Allow calc

Author: istarkov

apps/builder/app/builder/features/settings-panel/props-section/animation/animation-panel-content.tsx

@@ -269,9 +269,10 @@ export const AnimationPanelContent = ({ onChange, value, type }: Props) => {
           }}
         />
       </Grid>
-      <Grid gap={1} align={"center"} css={{ gridTemplateColumns: "1fr 1fr" }}>
+      <Grid gap={1} align={"center"} css={{ gridTemplateColumns: "2fr 1fr" }}>
         <Label htmlFor={fieldIds.rangeStartName}>Range Start</Label>
         <Label htmlFor={fieldIds.rangeStartValue}>Value</Label>
+
         <Select
           id={fieldIds.rangeStartName}
           options={timelineRangeNames}
@@ -333,6 +334,7 @@ export const AnimationPanelContent = ({ onChange, value, type }: Props) => {
             });
           }}
         />
+
         <Label htmlFor={fieldIds.rangeEndName}>Range End</Label>
         <Label htmlFor={fieldIds.rangeEndValue}>Value</Label>
         <Select

packages/sdk-components-animation/private-src

@@ -59,11 +59,17 @@ export const RANGE_UNITS = [
 
 export const rangeUnitSchema = literalUnion(RANGE_UNITS);
 
-export const rangeUnitValueSchema = z.object({
-  type: z.literal("unit"),
-  value: z.number(),
-  unit: rangeUnitSchema,
-});
+export const rangeUnitValueSchema = z.union([
+  z.object({
+    type: z.literal("unit"),
+    value: z.number(),
+    unit: rangeUnitSchema,
+  }),
+  z.object({
+    type: z.literal("unparsed"),
+    value: z.string(),
+  }),
+]);
 
 // @todo: Fix Keyframe Styles
 export const keyframeStylesSchema = z.record(StyleValue);