@react-spectrum/s2 3.0.0-nightly-63d4359d6-250428 → 3.0.0-nightly-1dd65ffc5-250429

package/style/dist/spectrum-theme.cjs

@@ -645,8 +645,8 @@ const $309cb17cf235357e$var$width = {
     ...$309cb17cf235357e$var$sizing,
     screen: '100vw'
 };
-function $309cb17cf235357e$var$createSpectrumSizingProperty(values) {
-    return (0, $346a586d9b655682$exports.createSizingProperty)(values, (px)=>`calc(${$309cb17cf235357e$var$pxToRem(px)} * var(--s2-scale))`);
+function $309cb17cf235357e$var$createSpectrumSizingProperty(property, values) {
+    return new (0, $346a586d9b655682$exports.SizingProperty)(property, values, (px)=>`calc(${$309cb17cf235357e$var$pxToRem(px)} * var(--s2-scale))`);
 }
 const $309cb17cf235357e$var$margin = {
     ...$309cb17cf235357e$var$spacing,
@@ -690,8 +690,8 @@ let $309cb17cf235357e$var$gridTrackSize = (value)=>{
 const $309cb17cf235357e$var$transitionProperty = {
     // var(--gp) is generated by the backgroundImage property when setting a gradient.
     // It includes a list of all of the custom properties used for each color stop.
-    default: 'color, background-color, var(--gp), border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter',
-    colors: 'color, background-color, var(--gp), border-color, text-decoration-color, fill, stroke',
+    default: 'color, background-color, var(--gp, color), border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter',
+    colors: 'color, background-color, var(--gp, color), border-color, text-decoration-color, fill, stroke',
     opacity: 'opacity',
     shadow: 'box-shadow',
     transform: 'transform, translate, scale, rotate',
@@ -707,10 +707,7 @@ const $309cb17cf235357e$var$timingFunction = {
     'in-out': 'cubic-bezier(0.45, 0, 0.4, 1)'
 };
 // TODO: do these need tokens or are arbitrary values ok?
-let $309cb17cf235357e$var$durationProperty = (0, $346a586d9b655682$exports.createArbitraryProperty)((value, property)=>({
-        [property]: typeof value === 'number' ? value + 'ms' : value
-    }));
-// const colorWithAlpha = createColorProperty(color);
+let $309cb17cf235357e$var$durationValue = (value)=>typeof value === 'number' ? value + 'ms' : value;
 const $309cb17cf235357e$var$fontWeightBase = {
     light: '300',
     // TODO: spectrum calls this "regular" but CSS calls it "normal". We also call other properties "default". What do we want to match?
@@ -720,6 +717,21 @@ const $309cb17cf235357e$var$fontWeightBase = {
     'extra-bold': '800',
     black: '900'
 };
+const $309cb17cf235357e$var$fontWeight = {
+    ...$309cb17cf235357e$var$fontWeightBase,
+    heading: {
+        default: $309cb17cf235357e$var$fontWeightBase["extra-bold"],
+        ':lang(ja, ko, zh, zh-Hant, zh-Hans)': $309cb17cf235357e$var$fontWeightBase["extra-bold"]
+    },
+    title: {
+        default: $309cb17cf235357e$var$fontWeightBase["bold"],
+        ':lang(ja, ko, zh, zh-Hant, zh-Hans)': $309cb17cf235357e$var$fontWeightBase["bold"]
+    },
+    detail: {
+        default: $309cb17cf235357e$var$fontWeightBase["medium"],
+        ':lang(ja, ko, zh, zh-Hant, zh-Hans)': $309cb17cf235357e$var$fontWeightBase["bold"]
+    }
+};
 const $309cb17cf235357e$var$i18nFonts = {
     ':lang(ar)': 'myriad-arabic, ui-sans-serif, system-ui, sans-serif',
     ':lang(he)': 'myriad-hebrew, ui-sans-serif, system-ui, sans-serif',
@@ -917,7 +929,7 @@ const $309cb17cf235357e$var$fontSize = {
 const $309cb17cf235357e$export$1d567c320f4763bc = (0, $346a586d9b655682$exports.createTheme)({
     properties: {
         // colors
-        color: (0, $346a586d9b655682$exports.createColorProperty)({
+        color: new (0, $346a586d9b655682$exports.ColorProperty)('color', {
             ...$309cb17cf235357e$var$color,
             accent: {
                 default: "light-dark(rgb(59, 99, 251), rgb(86, 129, 255))",
@@ -953,7 +965,7 @@ const $309cb17cf235357e$export$1d567c320f4763bc = (0, $346a586d9b655682$exports.
             code: "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
             auto: "lch(from self(backgroundColor, var(--s2-container-bg)) calc((49.44 - l) * infinity) 0 0 / 1)"
         }),
-        backgroundColor: (0, $346a586d9b655682$exports.createColorProperty)({
+        backgroundColor: new (0, $346a586d9b655682$exports.ColorProperty)('backgroundColor', {
             ...$309cb17cf235357e$var$color,
             accent: {
                 default: "light-dark(rgb(59, 99, 251), rgb(64, 105, 253))",
@@ -1043,7 +1055,7 @@ const $309cb17cf235357e$export$1d567c320f4763bc = (0, $346a586d9b655682$exports.
             pasteboard: "light-dark(rgb(233, 233, 233), rgb(17, 17, 17))",
             elevated: "light-dark(rgb(255, 255, 255), rgb(34, 34, 34))"
         }),
-        borderColor: (0, $346a586d9b655682$exports.createColorProperty)({
+        borderColor: new (0, $346a586d9b655682$exports.ColorProperty)('borderColor', {
             ...$309cb17cf235357e$var$color,
             negative: {
                 default: "light-dark(rgb(215, 50, 32), rgb(252, 67, 46))",
@@ -1053,17 +1065,14 @@ const $309cb17cf235357e$export$1d567c320f4763bc = (0, $346a586d9b655682$exports.
             },
             disabled: "light-dark(rgb(218, 218, 218), rgb(57, 57, 57))"
         }),
-        outlineColor: (0, $346a586d9b655682$exports.createColorProperty)({
+        outlineColor: new (0, $346a586d9b655682$exports.ColorProperty)('outlineColor', {
             ...$309cb17cf235357e$var$color,
             'focus-ring': {
                 default: "light-dark(rgb(75, 117, 255), rgb(64, 105, 253))",
                 forcedColors: 'Highlight'
             }
         }),
-        // textDecorationColor: colorWithAlpha,
-        // accentColor: colorWithAlpha,
-        // caretColor: colorWithAlpha,
-        fill: (0, $346a586d9b655682$exports.createColorProperty)({
+        fill: new (0, $346a586d9b655682$exports.ColorProperty)('fill', {
             none: 'none',
             currentColor: 'currentColor',
             accent: "light-dark(rgb(75, 117, 255), rgb(86, 129, 255))",
@@ -1093,7 +1102,7 @@ const $309cb17cf235357e$export$1d567c320f4763bc = (0, $346a586d9b655682$exports.
             silver: "light-dark(rgb(128, 128, 128), rgb(137, 137, 137))",
             ...$309cb17cf235357e$var$color
         }),
-        stroke: (0, $346a586d9b655682$exports.createColorProperty)({
+        stroke: new (0, $346a586d9b655682$exports.ColorProperty)('stroke', {
             none: 'none',
             currentColor: 'currentColor',
             ...$309cb17cf235357e$var$color
@@ -1107,22 +1116,22 @@ const $309cb17cf235357e$export$1d567c320f4763bc = (0, $346a586d9b655682$exports.
         },
         rowGap: $309cb17cf235357e$var$spacing,
         columnGap: $309cb17cf235357e$var$spacing,
-        height: $309cb17cf235357e$var$createSpectrumSizingProperty($309cb17cf235357e$var$height),
-        width: $309cb17cf235357e$var$createSpectrumSizingProperty($309cb17cf235357e$var$width),
-        containIntrinsicWidth: $309cb17cf235357e$var$createSpectrumSizingProperty($309cb17cf235357e$var$width),
-        containIntrinsicHeight: $309cb17cf235357e$var$createSpectrumSizingProperty($309cb17cf235357e$var$height),
-        minHeight: $309cb17cf235357e$var$createSpectrumSizingProperty($309cb17cf235357e$var$height),
-        maxHeight: $309cb17cf235357e$var$createSpectrumSizingProperty({
+        height: $309cb17cf235357e$var$createSpectrumSizingProperty('height', $309cb17cf235357e$var$height),
+        width: $309cb17cf235357e$var$createSpectrumSizingProperty('width', $309cb17cf235357e$var$width),
+        containIntrinsicWidth: $309cb17cf235357e$var$createSpectrumSizingProperty('containIntrinsicWidth', $309cb17cf235357e$var$width),
+        containIntrinsicHeight: $309cb17cf235357e$var$createSpectrumSizingProperty('containIntrinsicHeight', $309cb17cf235357e$var$height),
+        minHeight: $309cb17cf235357e$var$createSpectrumSizingProperty('minHeight', $309cb17cf235357e$var$height),
+        maxHeight: $309cb17cf235357e$var$createSpectrumSizingProperty('maxHeight', {
             ...$309cb17cf235357e$var$height,
             none: 'none'
         }),
-        minWidth: $309cb17cf235357e$var$createSpectrumSizingProperty($309cb17cf235357e$var$width),
-        maxWidth: $309cb17cf235357e$var$createSpectrumSizingProperty({
+        minWidth: $309cb17cf235357e$var$createSpectrumSizingProperty('minWidth', $309cb17cf235357e$var$width),
+        maxWidth: $309cb17cf235357e$var$createSpectrumSizingProperty('maxWidth', {
             ...$309cb17cf235357e$var$width,
             none: 'none'
         }),
-        borderStartWidth: (0, $346a586d9b655682$exports.createRenamedProperty)('borderInlineStartWidth', $309cb17cf235357e$var$borderWidth),
-        borderEndWidth: (0, $346a586d9b655682$exports.createRenamedProperty)('borderInlineEndWidth', $309cb17cf235357e$var$borderWidth),
+        borderStartWidth: new (0, $346a586d9b655682$exports.MappedProperty)('borderInlineStartWidth', $309cb17cf235357e$var$borderWidth),
+        borderEndWidth: new (0, $346a586d9b655682$exports.MappedProperty)('borderInlineEndWidth', $309cb17cf235357e$var$borderWidth),
         borderTopWidth: $309cb17cf235357e$var$borderWidth,
         borderBottomWidth: $309cb17cf235357e$var$borderWidth,
         borderStyle: [
@@ -1138,43 +1147,53 @@ const $309cb17cf235357e$export$1d567c320f4763bc = (0, $346a586d9b655682$exports.
             1: '1',
             2: '2'
         },
-        marginStart: (0, $346a586d9b655682$exports.createRenamedProperty)('marginInlineStart', $309cb17cf235357e$var$margin),
-        marginEnd: (0, $346a586d9b655682$exports.createRenamedProperty)('marginInlineEnd', $309cb17cf235357e$var$margin),
+        marginStart: new (0, $346a586d9b655682$exports.MappedProperty)('marginInlineStart', $309cb17cf235357e$var$margin),
+        marginEnd: new (0, $346a586d9b655682$exports.MappedProperty)('marginInlineEnd', $309cb17cf235357e$var$margin),
         marginTop: $309cb17cf235357e$var$margin,
         marginBottom: $309cb17cf235357e$var$margin,
-        paddingStart: (0, $346a586d9b655682$exports.createRenamedProperty)('paddingInlineStart', $309cb17cf235357e$var$spacing),
-        paddingEnd: (0, $346a586d9b655682$exports.createRenamedProperty)('paddingInlineEnd', $309cb17cf235357e$var$spacing),
+        paddingStart: new (0, $346a586d9b655682$exports.MappedProperty)('paddingInlineStart', $309cb17cf235357e$var$spacing),
+        paddingEnd: new (0, $346a586d9b655682$exports.MappedProperty)('paddingInlineEnd', $309cb17cf235357e$var$spacing),
         paddingTop: $309cb17cf235357e$var$spacing,
         paddingBottom: $309cb17cf235357e$var$spacing,
-        scrollMarginStart: (0, $346a586d9b655682$exports.createRenamedProperty)('scrollMarginInlineStart', $309cb17cf235357e$var$baseSpacing),
-        scrollMarginEnd: (0, $346a586d9b655682$exports.createRenamedProperty)('scrollMarginInlineEnd', $309cb17cf235357e$var$baseSpacing),
+        scrollMarginStart: new (0, $346a586d9b655682$exports.MappedProperty)('scrollMarginInlineStart', $309cb17cf235357e$var$baseSpacing),
+        scrollMarginEnd: new (0, $346a586d9b655682$exports.MappedProperty)('scrollMarginInlineEnd', $309cb17cf235357e$var$baseSpacing),
         scrollMarginTop: $309cb17cf235357e$var$baseSpacing,
         scrollMarginBottom: $309cb17cf235357e$var$baseSpacing,
-        scrollPaddingStart: (0, $346a586d9b655682$exports.createRenamedProperty)('scrollPaddingInlineStart', $309cb17cf235357e$var$baseSpacing),
-        scrollPaddingEnd: (0, $346a586d9b655682$exports.createRenamedProperty)('scrollPaddingInlineEnd', $309cb17cf235357e$var$baseSpacing),
+        scrollPaddingStart: new (0, $346a586d9b655682$exports.MappedProperty)('scrollPaddingInlineStart', $309cb17cf235357e$var$baseSpacing),
+        scrollPaddingEnd: new (0, $346a586d9b655682$exports.MappedProperty)('scrollPaddingInlineEnd', $309cb17cf235357e$var$baseSpacing),
         scrollPaddingTop: $309cb17cf235357e$var$baseSpacing,
         scrollPaddingBottom: $309cb17cf235357e$var$baseSpacing,
         textIndent: $309cb17cf235357e$var$baseSpacing,
-        translateX: (0, $346a586d9b655682$exports.createMappedProperty)((value)=>({
-                '--translateX': value,
+        translateX: new (0, $346a586d9b655682$exports.ExpandedProperty)([
+            '--translateX',
+            'translate'
+        ], (value)=>({
+                '--translateX': String(value),
                 translate: 'var(--translateX, 0) var(--translateY, 0)'
             }), $309cb17cf235357e$var$translate),
-        translateY: (0, $346a586d9b655682$exports.createMappedProperty)((value)=>({
-                '--translateY': value,
+        translateY: new (0, $346a586d9b655682$exports.ExpandedProperty)([
+            '--translateY',
+            'translate'
+        ], (value)=>({
+                '--translateY': String(value),
                 translate: 'var(--translateX, 0) var(--translateY, 0)'
             }), $309cb17cf235357e$var$translate),
-        rotate: (0, $346a586d9b655682$exports.createArbitraryProperty)((value, property)=>({
-                [property]: typeof value === 'number' ? `${value}deg` : value
-            })),
-        scaleX: (0, $346a586d9b655682$exports.createArbitraryProperty)((value)=>({
-                '--scaleX': value,
+        rotate: new (0, $346a586d9b655682$exports.ArbitraryProperty)('rotate', (value)=>typeof value === 'number' ? `${value}deg` : value),
+        scaleX: new (0, $346a586d9b655682$exports.ExpandedProperty)([
+            '--scaleX',
+            'scale'
+        ], (value)=>({
+                '--scaleX': String(value),
                 scale: 'var(--scaleX, 1) var(--scaleY, 1)'
             })),
-        scaleY: (0, $346a586d9b655682$exports.createArbitraryProperty)((value)=>({
-                '--scaleY': value,
+        scaleY: new (0, $346a586d9b655682$exports.ExpandedProperty)([
+            '--scaleY',
+            'scale'
+        ], (value)=>({
+                '--scaleY': String(value),
                 scale: 'var(--scaleX, 1) var(--scaleY, 1)'
             })),
-        transform: (0, $346a586d9b655682$exports.createArbitraryProperty)(),
+        transform: new (0, $346a586d9b655682$exports.ArbitraryProperty)('transform'),
         position: [
             'absolute',
             'fixed',
@@ -1182,8 +1201,8 @@ const $309cb17cf235357e$export$1d567c320f4763bc = (0, $346a586d9b655682$exports.
             'sticky',
             'static'
         ],
-        insetStart: (0, $346a586d9b655682$exports.createRenamedProperty)('insetInlineStart', $309cb17cf235357e$var$inset),
-        insetEnd: (0, $346a586d9b655682$exports.createRenamedProperty)('insetInlineEnd', $309cb17cf235357e$var$inset),
+        insetStart: new (0, $346a586d9b655682$exports.MappedProperty)('insetInlineStart', $309cb17cf235357e$var$inset),
+        insetEnd: new (0, $346a586d9b655682$exports.MappedProperty)('insetInlineEnd', $309cb17cf235357e$var$inset),
         top: $309cb17cf235357e$var$inset,
         left: $309cb17cf235357e$var$inset,
         bottom: $309cb17cf235357e$var$inset,
@@ -1206,31 +1225,18 @@ const $309cb17cf235357e$export$1d567c320f4763bc = (0, $346a586d9b655682$exports.
             code: 'source-code-pro, "Source Code Pro", Monaco, monospace'
         },
         fontSize: $309cb17cf235357e$var$fontSize,
-        fontWeight: (0, $346a586d9b655682$exports.createMappedProperty)((value, property)=>{
-            if (property === 'fontWeight') return {
+        fontWeight: new (0, $346a586d9b655682$exports.ExpandedProperty)([
+            'fontWeight',
+            'fontVariationSettings',
+            'fontSynthesisWeight'
+        ], (value)=>{
+            return {
                 // Set font-variation-settings in addition to font-weight to work around typekit issue.
                 fontVariationSettings: value === 'inherit' ? 'inherit' : `"wght" ${value}`,
                 fontWeight: value,
                 fontSynthesisWeight: 'none'
             };
-            return {
-                [property]: value
-            };
-        }, {
-            ...$309cb17cf235357e$var$fontWeightBase,
-            heading: {
-                default: $309cb17cf235357e$var$fontWeightBase["extra-bold"],
-                ':lang(ja, ko, zh, zh-Hant, zh-Hans)': $309cb17cf235357e$var$fontWeightBase["extra-bold"]
-            },
-            title: {
-                default: $309cb17cf235357e$var$fontWeightBase["bold"],
-                ':lang(ja, ko, zh, zh-Hant, zh-Hans)': $309cb17cf235357e$var$fontWeightBase["bold"]
-            },
-            detail: {
-                default: $309cb17cf235357e$var$fontWeightBase["medium"],
-                ':lang(ja, ko, zh, zh-Hant, zh-Hans)': $309cb17cf235357e$var$fontWeightBase["bold"]
-            }
-        }),
+        }, $309cb17cf235357e$var$fontWeight),
         lineHeight: {
             // See https://spectrum.corp.adobe.com/page/typography/#Line-height
             ui: {
@@ -1289,24 +1295,27 @@ const $309cb17cf235357e$export$1d567c320f4763bc = (0, $346a586d9b655682$exports.
             'sub',
             'super'
         ],
-        textDecoration: (0, $346a586d9b655682$exports.createMappedProperty)((value)=>({
+        textDecoration: new (0, $346a586d9b655682$exports.ExpandedProperty)([
+            'textDecoration',
+            'textUnderlineOffset'
+        ], (value)=>({
                 textDecoration: value === 'none' ? 'none' : `${value} ${"1px"}`,
                 textUnderlineOffset: value === 'underline' ? "1px" : undefined
-            }), [
-            'underline',
-            'overline',
-            'line-through',
-            'none'
-        ]),
+            })),
         textOverflow: [
             'ellipsis',
             'clip'
         ],
-        lineClamp: (0, $346a586d9b655682$exports.createArbitraryProperty)((value)=>({
+        lineClamp: new (0, $346a586d9b655682$exports.ExpandedProperty)([
+            'overflow',
+            'display',
+            '-webkit-box-orient',
+            '-webkit-line-clamp'
+        ], (value)=>({
                 overflow: 'hidden',
                 display: '-webkit-box',
                 '-webkit-box-orient': 'vertical',
-                '-webkit-line-clamp': value
+                '-webkit-line-clamp': String(value)
             })),
         hyphens: [
             'none',
@@ -1349,10 +1358,10 @@ const $309cb17cf235357e$export$1d567c320f4763bc = (0, $346a586d9b655682$exports.
             dragged: `drop-shadow${"0px"} ${"6px"} ${"16px"} ${"light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6))"}`,
             none: 'none'
         },
-        borderTopStartRadius: (0, $346a586d9b655682$exports.createRenamedProperty)('borderStartStartRadius', $309cb17cf235357e$var$radius),
-        borderTopEndRadius: (0, $346a586d9b655682$exports.createRenamedProperty)('borderStartEndRadius', $309cb17cf235357e$var$radius),
-        borderBottomStartRadius: (0, $346a586d9b655682$exports.createRenamedProperty)('borderEndStartRadius', $309cb17cf235357e$var$radius),
-        borderBottomEndRadius: (0, $346a586d9b655682$exports.createRenamedProperty)('borderEndEndRadius', $309cb17cf235357e$var$radius),
+        borderTopStartRadius: new (0, $346a586d9b655682$exports.MappedProperty)('borderStartStartRadius', $309cb17cf235357e$var$radius),
+        borderTopEndRadius: new (0, $346a586d9b655682$exports.MappedProperty)('borderStartEndRadius', $309cb17cf235357e$var$radius),
+        borderBottomStartRadius: new (0, $346a586d9b655682$exports.MappedProperty)('borderEndStartRadius', $309cb17cf235357e$var$radius),
+        borderBottomEndRadius: new (0, $346a586d9b655682$exports.MappedProperty)('borderEndEndRadius', $309cb17cf235357e$var$radius),
         forcedColorAdjust: [
             'auto',
             'none'
@@ -1362,13 +1371,19 @@ const $309cb17cf235357e$export$1d567c320f4763bc = (0, $346a586d9b655682$exports.
             'dark',
             'light dark'
         ],
-        backgroundImage: (0, $346a586d9b655682$exports.createArbitraryProperty)((value, property)=>{
+        backgroundImage: new (0, $346a586d9b655682$exports.ExpandedProperty)([
+            'backgroundImage',
+            '--g0',
+            '--g1',
+            '--g2',
+            '--gp'
+        ], (value)=>{
             if (typeof value === 'string') return {
-                [property]: value
+                backgroundImage: value
             };
             else if (Array.isArray(value) && value[0]?.type === 'linear-gradient') {
                 let values = {
-                    [property]: `linear-gradient(${value[0].angle}, ${value[0].stops.map(([, stop], i)=>`var(--g${i}) ${stop}%`)})`
+                    backgroundImage: `linear-gradient(${value[0].angle}, ${value[0].stops.map(([, stop], i)=>`var(--g${i}) ${stop}%`)})`
                 };
                 // Create a CSS var for each color stop so the gradient can be transitioned.
                 // These are registered via @property in the `linearGradient` macro.
@@ -1461,7 +1476,7 @@ const $309cb17cf235357e$export$1d567c320f4763bc = (0, $346a586d9b655682$exports.
             'plus-darker',
             'plus-lighter'
         ],
-        opacity: (0, $346a586d9b655682$exports.createArbitraryProperty)(),
+        opacity: new (0, $346a586d9b655682$exports.ArbitraryProperty)('opacity'),
         outlineStyle: [
             'none',
             'solid',
@@ -1470,19 +1485,15 @@ const $309cb17cf235357e$export$1d567c320f4763bc = (0, $346a586d9b655682$exports.
             'double',
             'inset'
         ],
-        outlineOffset: (0, $346a586d9b655682$exports.createArbitraryProperty)((v, property)=>({
-                [property]: `${v}px`
-            })),
+        outlineOffset: new (0, $346a586d9b655682$exports.ArbitraryProperty)('outlineOffset', (v)=>`${v}px`),
         outlineWidth: $309cb17cf235357e$var$borderWidth,
-        transition: (0, $346a586d9b655682$exports.createRenamedProperty)('transitionProperty', $309cb17cf235357e$var$transitionProperty),
-        transitionDelay: $309cb17cf235357e$var$durationProperty,
-        transitionDuration: $309cb17cf235357e$var$durationProperty,
+        transition: new (0, $346a586d9b655682$exports.MappedProperty)('transitionProperty', $309cb17cf235357e$var$transitionProperty),
+        transitionDelay: new (0, $346a586d9b655682$exports.ArbitraryProperty)('transitionDelay', $309cb17cf235357e$var$durationValue),
+        transitionDuration: new (0, $346a586d9b655682$exports.ArbitraryProperty)('transitionDuration', $309cb17cf235357e$var$durationValue),
         transitionTimingFunction: $309cb17cf235357e$var$timingFunction,
-        animation: (0, $346a586d9b655682$exports.createArbitraryProperty)((value, property)=>({
-                [property === 'animation' ? 'animationName' : property]: value
-            })),
-        animationDuration: $309cb17cf235357e$var$durationProperty,
-        animationDelay: $309cb17cf235357e$var$durationProperty,
+        animation: new (0, $346a586d9b655682$exports.ArbitraryProperty)('animationName'),
+        animationDuration: new (0, $346a586d9b655682$exports.ArbitraryProperty)('animationDuration', $309cb17cf235357e$var$durationValue),
+        animationDelay: new (0, $346a586d9b655682$exports.ArbitraryProperty)('animationDelay', $309cb17cf235357e$var$durationValue),
         animationDirection: [
             'normal',
             'reverse',
@@ -1495,7 +1506,7 @@ const $309cb17cf235357e$export$1d567c320f4763bc = (0, $346a586d9b655682$exports.
             'backwards',
             'both'
         ],
-        animationIterationCount: (0, $346a586d9b655682$exports.createArbitraryProperty)(),
+        animationIterationCount: new (0, $346a586d9b655682$exports.ArbitraryProperty)('animationIterationCount'),
         animationTimingFunction: $309cb17cf235357e$var$timingFunction,
         // layout
         display: [
@@ -1570,12 +1581,12 @@ const $309cb17cf235357e$export$1d567c320f4763bc = (0, $346a586d9b655682$exports.
             'wrap-reverse',
             'nowrap'
         ],
-        flexShrink: (0, $346a586d9b655682$exports.createArbitraryProperty)(),
-        flexGrow: (0, $346a586d9b655682$exports.createArbitraryProperty)(),
-        gridColumnStart: (0, $346a586d9b655682$exports.createArbitraryProperty)(),
-        gridColumnEnd: (0, $346a586d9b655682$exports.createArbitraryProperty)(),
-        gridRowStart: (0, $346a586d9b655682$exports.createArbitraryProperty)(),
-        gridRowEnd: (0, $346a586d9b655682$exports.createArbitraryProperty)(),
+        flexShrink: new (0, $346a586d9b655682$exports.ArbitraryProperty)('flexShrink'),
+        flexGrow: new (0, $346a586d9b655682$exports.ArbitraryProperty)('flexGrow'),
+        gridColumnStart: new (0, $346a586d9b655682$exports.ArbitraryProperty)('gridColumnStart'),
+        gridColumnEnd: new (0, $346a586d9b655682$exports.ArbitraryProperty)('gridColumnEnd'),
+        gridRowStart: new (0, $346a586d9b655682$exports.ArbitraryProperty)('gridRowStart'),
+        gridRowEnd: new (0, $346a586d9b655682$exports.ArbitraryProperty)('gridRowEnd'),
         gridAutoFlow: [
             'row',
             'column',
@@ -1583,21 +1594,11 @@ const $309cb17cf235357e$export$1d567c320f4763bc = (0, $346a586d9b655682$exports.
             'row dense',
             'column dense'
         ],
-        gridAutoRows: (0, $346a586d9b655682$exports.createArbitraryProperty)((value, property)=>({
-                [property]: $309cb17cf235357e$var$gridTrackSize(value)
-            })),
-        gridAutoColumns: (0, $346a586d9b655682$exports.createArbitraryProperty)((value, property)=>({
-                [property]: $309cb17cf235357e$var$gridTrackSize(value)
-            })),
-        gridTemplateColumns: (0, $346a586d9b655682$exports.createArbitraryProperty)((value, property)=>({
-                [property]: $309cb17cf235357e$var$gridTrack(value)
-            })),
-        gridTemplateRows: (0, $346a586d9b655682$exports.createArbitraryProperty)((value, property)=>({
-                [property]: $309cb17cf235357e$var$gridTrack(value)
-            })),
-        gridTemplateAreas: (0, $346a586d9b655682$exports.createArbitraryProperty)((value, property)=>({
-                [property]: value.map((v)=>`"${v}"`).join('')
-            })),
+        gridAutoRows: new (0, $346a586d9b655682$exports.ArbitraryProperty)('gridAutoRows', $309cb17cf235357e$var$gridTrackSize),
+        gridAutoColumns: new (0, $346a586d9b655682$exports.ArbitraryProperty)('gridAutoColumns', $309cb17cf235357e$var$gridTrackSize),
+        gridTemplateColumns: new (0, $346a586d9b655682$exports.ArbitraryProperty)('gridTemplateColumns', $309cb17cf235357e$var$gridTrack),
+        gridTemplateRows: new (0, $346a586d9b655682$exports.ArbitraryProperty)('gridTemplateRows', $309cb17cf235357e$var$gridTrack),
+        gridTemplateAreas: new (0, $346a586d9b655682$exports.ArbitraryProperty)('gridTemplateAreas', (value)=>value.map((v)=>`"${v}"`).join('')),
         float: [
             'inline-start',
             'inline-end',
@@ -1722,7 +1723,7 @@ const $309cb17cf235357e$export$1d567c320f4763bc = (0, $346a586d9b655682$exports.
             'auto',
             'smooth'
         ],
-        order: (0, $346a586d9b655682$exports.createArbitraryProperty)(),
+        order: new (0, $346a586d9b655682$exports.ArbitraryProperty)('order'),
         pointerEvents: [
             'none',
             'auto'
@@ -1850,11 +1851,9 @@ const $309cb17cf235357e$export$1d567c320f4763bc = (0, $346a586d9b655682$exports.
             'contents',
             'transform'
         ],
-        zIndex: (0, $346a586d9b655682$exports.createArbitraryProperty)(),
+        zIndex: new (0, $346a586d9b655682$exports.ArbitraryProperty)('zIndex'),
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        disableTapHighlight: (0, $346a586d9b655682$exports.createArbitraryProperty)((_value)=>({
-                '-webkit-tap-highlight-color': 'rgba(0,0,0,0)'
-            })),
+        disableTapHighlight: new (0, $346a586d9b655682$exports.ArbitraryProperty)('-webkit-tap-highlight-color', (_value)=>'rgba(0,0,0,0)'),
         unicodeBidi: [
             'normal',
             'embed',