@react-spectrum/s2 1.5.0 → 1.5.1

package/icons/Skeleton.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAqBM,SAAS,0CAAoB,WAAoB;IACtD,IAAI,eAAe,CAAA,GAAA,aAAK,EAAoB;IAC5C,IAAI,eAAe,CAAA,GAAA,wCAAY,EAAE;IACjC,OAAO,CAAA,GAAA,kBAAU,EACf,CAAC;QACC,IACE,eACA,CAAC,aAAa,OAAO,IACrB,WACA,CAAC,gBACD,OAAO,QAAQ,OAAO,KAAK,YAC3B;YACA,iEAAiE;YACjE,2EAA2E;YAC3E,aAAa,OAAO,GAAG,QAAQ,OAAO,CACpC;gBAAC;oBAAC,oBAAoB;gBAAM;gBAAG;oBAAC,oBAAoB;gBAAI;aAAE,EAC1D;gBACE,UAAU;gBACV,YAAY;gBACZ,QAAQ;YACV;YAEF,aAAa,OAAO,CAAC,SAAS,GAAG;QACnC,OAAO,IAAI,CAAC,eAAe,aAAa,OAAO,EAAE;YAC/C,aAAa,OAAO,CAAC,MAAM;YAC3B,aAAa,OAAO,GAAG;QACzB;IACF,GACA;QAAC;QAAa;KAAa;AAE/B;AASO,MAAM,0DAAkB,CAAA,GAAA,oBAAY,EAAkB;AACtD,SAAS;IACd,OAAO,CAAA,GAAA,iBAAS,EAAE,8CAAoB;AACxC;AAUO,SAAS,0CAAS,YAAC,QAAQ,aAAE,SAAS,EAAgB;IAC3D,iDAAiD;IACjD,qBAAO,gBAAC,0CAAgB,QAAQ;QAAC,OAAO;kBAAY;;AACtD;AAEO,MAAM,sDASV,qEAAqE;AAEjE,SAAS,0CACd,QAAmB,EACnB,KAAgC;IAEhC,IAAI,aAAa,CAAA,GAAA,iBAAS,EAAE;IAC5B,IAAI,YAAY;QACd,yBAAW,gBAAC;sBAAc;;QAC1B,QAAQ;YACN,GAAG,KAAK;YACR,8DAA8D;YAC9D,2EAA2E;YAC3E,qBAAqB;QACvB;IACF;IACA,OAAO;QAAC;QAAU;KAAM;AAC1B;AAGO,SAAS,0CAAa,YAAC,QAAQ,EAAwB;IAC5D,qBACE,gBAAC;QACC,6CAA6C;QAC7C,OAAO,CAAA,GAAA,iBAAS,EAAE;QAClB,KAAK,0CAAoB;QACzB,WACE;kBAOD;;AAGP;AAGO,SAAS,0CAAgB,YAAC,QAAQ,EAA8B;IACrE,IAAI,YAAY,CAAA,GAAA,iBAAS,EAAE;IAC3B,IAAI,YAAY,0CAAoB,aAAa;IACjD,IAAI,aAAa,MACf,OAAO;IAGT,IAAI,WACF,SAAS,YAAY,CAAC,OAAO,wBAAwB,CAAC,UAAU,QAAQ,MACnE,SAAS,GAAG,GACb,SAAS,KAAK,CAAC,GAAG;IACxB,qBACE,gBAAC,0CAAgB,QAAQ;QAAC,OAAO;kBAC9B,0BACG,CAAA,GAAA,mBAAW,EAAE,UAAU;YACrB,KAAK,CAAA,GAAA,gBAAQ,EAAE,UAAU;YACzB,WAAW,AAAC,CAAA,SAAS,KAAK,CAAC,SAAS,IAAI,EAAC,IAAK,MAAM;YACpD,6CAA6C;YAC7C,OAAO,CAAA,GAAA,iBAAS,EAAE;QACpB,KACA;;AAGV;AAGO,SAAS,0CAAgB,MAAmB;IACjD,IAAI,aAAa,CAAA,GAAA,iBAAS,EAAE;IAC5B,IAAI,YACF,OAAO,CAAA,GAAA,yCAAU,0BAA+B;IAElD,OAAO,UAAW;AACpB","sources":["packages/@react-spectrum/s2/src/Skeleton.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  cloneElement,\n  createContext,\n  CSSProperties,\n  ReactElement,\n  ReactNode,\n  Ref,\n  useCallback,\n  useContext,\n  useRef\n} from 'react';\nimport {color, style} from '../style' with {type: 'macro'};\nimport {css} from '../style/style-macro' with {type: 'macro'};\nimport {inertValue} from 'react-aria/private/utils/inertValue';\nimport {mergeRefs} from 'react-aria/mergeRefs';\nimport {mergeStyles} from '../style/runtime';\nimport {StyleString} from '../style/types';\nimport {useMediaQuery} from './useMediaQuery';\n\nexport function useLoadingAnimation(isAnimating: boolean): (element: HTMLElement | null) => void {\n  let animationRef = useRef<Animation | null>(null);\n  let reduceMotion = useMediaQuery('(prefers-reduced-motion: reduce)');\n  return useCallback(\n    (element: HTMLElement | null) => {\n      if (\n        isAnimating &&\n        !animationRef.current &&\n        element &&\n        !reduceMotion &&\n        typeof element.animate === 'function'\n      ) {\n        // Use web animation API instead of CSS animations so that we can\n        // synchronize it between all loading elements on the page (via startTime).\n        animationRef.current = element.animate(\n          [{backgroundPosition: '100%'}, {backgroundPosition: '0%'}],\n          {\n            duration: 2000,\n            iterations: Infinity,\n            easing: 'ease-in-out'\n          }\n        );\n        animationRef.current.startTime = 0;\n      } else if (!isAnimating && animationRef.current) {\n        animationRef.current.cancel();\n        animationRef.current = null;\n      }\n    },\n    [isAnimating, reduceMotion]\n  );\n}\n\nexport type SkeletonElement = ReactElement<{\n  children: ReactNode;\n  className?: string;\n  ref?: Ref<HTMLElement>;\n  inert?: boolean | 'true';\n}>;\n\nexport const SkeletonContext = createContext<boolean | null>(null);\nexport function useIsSkeleton(): boolean {\n  return useContext(SkeletonContext) || false;\n}\n\nexport interface SkeletonProps {\n  children: ReactNode;\n  isLoading: boolean;\n}\n\n/**\n * A Skeleton wraps around content to render it as a placeholder.\n */\nexport function Skeleton({children, isLoading}: SkeletonProps): ReactNode {\n  // Disable all form components inside a skeleton.\n  return <SkeletonContext.Provider value={isLoading}>{children}</SkeletonContext.Provider>;\n}\n\nexport const loadingStyle = css(\n  `\n  background-image: linear-gradient(to right, ${color('gray-100')} 33%, light-dark(${color('gray-25')}, ${color('gray-300')}), ${color('gray-100')} 66%);\n  background-size: 300%;\n  * {\n    visibility: hidden;\n  }\n`,\n  'L'\n); // add to a separate layer so it overrides default style macro styles\n\nexport function useSkeletonText(\n  children: ReactNode,\n  style: CSSProperties | undefined\n): [ReactNode, CSSProperties | undefined] {\n  let isSkeleton = useContext(SkeletonContext);\n  if (isSkeleton) {\n    children = <SkeletonText>{children}</SkeletonText>;\n    style = {\n      ...style,\n      // This ensures the ellipsis on truncated text is also hidden.\n      // -webkit-text-fill-color overrides any `color` property that is also set.\n      WebkitTextFillColor: 'transparent'\n    };\n  }\n  return [children, style];\n}\n\n// Rendered inside <Text> to create skeleton line boxes via box-decoration-break.\nexport function SkeletonText({children}: {children: ReactNode}): ReactNode {\n  return (\n    <span\n      // @ts-ignore - compatibility with React < 19\n      inert={inertValue(true)}\n      ref={useLoadingAnimation(true)}\n      className={\n        loadingStyle +\n        style({\n          color: 'transparent',\n          boxDecorationBreak: 'clone',\n          borderRadius: 'sm'\n        })\n      }>\n      {children}\n    </span>\n  );\n}\n\n// Clones the child element and displays it with skeleton styling.\nexport function SkeletonWrapper({children}: {children: SkeletonElement}): ReactNode {\n  let isLoading = useContext(SkeletonContext);\n  let animation = useLoadingAnimation(isLoading || false);\n  if (isLoading == null) {\n    return children;\n  }\n\n  let childRef =\n    'ref' in children && !Object.getOwnPropertyDescriptor(children, 'ref')?.get\n      ? (children.ref as any)\n      : children.props.ref;\n  return (\n    <SkeletonContext.Provider value={null}>\n      {isLoading\n        ? cloneElement(children, {\n            ref: mergeRefs(childRef, animation),\n            className: (children.props.className || '') + ' ' + loadingStyle,\n            // @ts-ignore - compatibility with React < 19\n            inert: inertValue(true)\n          })\n        : children}\n    </SkeletonContext.Provider>\n  );\n}\n\n// Adds default border radius around icons when displayed in a skeleton.\nexport function useSkeletonIcon(styles: StyleString): StyleString {\n  let isSkeleton = useContext(SkeletonContext);\n  if (isSkeleton) {\n    return mergeStyles(style({borderRadius: 'sm'}), styles);\n  }\n  return styles || ('' as StyleString);\n}\n"],"names":[],"version":3,"file":"Skeleton.mjs.map"}
+{"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAqBM,SAAS,0CAAoB,WAAoB;IACtD,IAAI,eAAe,CAAA,GAAA,aAAK,EAAoB;IAC5C,IAAI,eAAe,CAAA,GAAA,wCAAY,EAAE;IACjC,OAAO,CAAA,GAAA,kBAAU,EACf,CAAC;QACC,IACE,eACA,CAAC,aAAa,OAAO,IACrB,WACA,CAAC,gBACD,OAAO,QAAQ,OAAO,KAAK,YAC3B;YACA,iEAAiE;YACjE,2EAA2E;YAC3E,aAAa,OAAO,GAAG,QAAQ,OAAO,CACpC;gBAAC;oBAAC,oBAAoB;gBAAM;gBAAG;oBAAC,oBAAoB;gBAAI;aAAE,EAC1D;gBACE,UAAU;gBACV,YAAY;gBACZ,QAAQ;YACV;YAEF,aAAa,OAAO,CAAC,SAAS,GAAG;QACnC,OAAO,IAAI,CAAC,eAAe,aAAa,OAAO,EAAE;YAC/C,aAAa,OAAO,CAAC,MAAM;YAC3B,aAAa,OAAO,GAAG;QACzB;IACF,GACA;QAAC;QAAa;KAAa;AAE/B;AASO,MAAM,0DAAkB,CAAA,GAAA,oBAAY,EAAkB;AACtD,SAAS;IACd,OAAO,CAAA,GAAA,iBAAS,EAAE,8CAAoB;AACxC;AAUO,SAAS,0CAAS,YAAC,QAAQ,aAAE,SAAS,EAAgB;IAC3D,iDAAiD;IACjD,qBAAO,gBAAC,0CAAgB,QAAQ;QAAC,OAAO;kBAAY;;AACtD;AAEO,MAAM,sDASV,qEAAqE;AAEjE,SAAS,0CACd,QAAmB,EACnB,KAAgC;IAEhC,IAAI,aAAa,CAAA,GAAA,iBAAS,EAAE;IAC5B,IAAI,YAAY;QACd,yBAAW,gBAAC;sBAAc;;QAC1B,QAAQ;YACN,GAAG,KAAK;YACR,8DAA8D;YAC9D,2EAA2E;YAC3E,qBAAqB;QACvB;IACF;IACA,OAAO;QAAC;QAAU;KAAM;AAC1B;AAGO,SAAS,0CAAa,YAAC,QAAQ,EAAwB;IAC5D,qBACE,gBAAC;QACC,6CAA6C;QAC7C,OAAO,CAAA,GAAA,iBAAS,EAAE;QAClB,KAAK,0CAAoB;QACzB,WACE;kBAOD;;AAGP;AAGO,SAAS,0CAAgB,YAAC,QAAQ,EAA8B;IACrE,IAAI,YAAY,CAAA,GAAA,iBAAS,EAAE;IAC3B,IAAI,YAAY,0CAAoB,aAAa;IACjD,IAAI,aAAa,MACf,OAAO;IAGT,IAAI,WACF,SAAS,YAAY,CAAC,OAAO,wBAAwB,CAAC,UAAU,QAAQ,MACnE,SAAS,GAAG,GACb,SAAS,KAAK,CAAC,GAAG;IACxB,qBACE,gBAAC,0CAAgB,QAAQ;QAAC,OAAO;kBAC9B,0BACG,CAAA,GAAA,mBAAW,EAAE,UAAU;YACrB,KAAK,CAAA,GAAA,gBAAQ,EAAE,UAAU;YACzB,WAAW,AAAC,CAAA,SAAS,KAAK,CAAC,SAAS,IAAI,EAAC,IAAK,MAAM;YACpD,6CAA6C;YAC7C,OAAO,CAAA,GAAA,iBAAS,EAAE;QACpB,KACA;;AAGV;AAGO,SAAS,0CAAgB,MAAmB;IACjD,IAAI,aAAa,CAAA,GAAA,iBAAS,EAAE;IAC5B,IAAI,YACF,OAAO,CAAA,GAAA,yCAAU,8BAA+B;IAElD,OAAO,UAAW;AACpB","sources":["packages/@react-spectrum/s2/src/Skeleton.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  cloneElement,\n  createContext,\n  CSSProperties,\n  ReactElement,\n  ReactNode,\n  Ref,\n  useCallback,\n  useContext,\n  useRef\n} from 'react';\nimport {color, style} from '../style' with {type: 'macro'};\nimport {css} from '../style/style-macro' with {type: 'macro'};\nimport {inertValue} from 'react-aria/private/utils/inertValue';\nimport {mergeRefs} from 'react-aria/mergeRefs';\nimport {mergeStyles} from '../style/runtime';\nimport {StyleString} from '../style/types';\nimport {useMediaQuery} from './useMediaQuery';\n\nexport function useLoadingAnimation(isAnimating: boolean): (element: HTMLElement | null) => void {\n  let animationRef = useRef<Animation | null>(null);\n  let reduceMotion = useMediaQuery('(prefers-reduced-motion: reduce)');\n  return useCallback(\n    (element: HTMLElement | null) => {\n      if (\n        isAnimating &&\n        !animationRef.current &&\n        element &&\n        !reduceMotion &&\n        typeof element.animate === 'function'\n      ) {\n        // Use web animation API instead of CSS animations so that we can\n        // synchronize it between all loading elements on the page (via startTime).\n        animationRef.current = element.animate(\n          [{backgroundPosition: '100%'}, {backgroundPosition: '0%'}],\n          {\n            duration: 2000,\n            iterations: Infinity,\n            easing: 'ease-in-out'\n          }\n        );\n        animationRef.current.startTime = 0;\n      } else if (!isAnimating && animationRef.current) {\n        animationRef.current.cancel();\n        animationRef.current = null;\n      }\n    },\n    [isAnimating, reduceMotion]\n  );\n}\n\nexport type SkeletonElement = ReactElement<{\n  children: ReactNode;\n  className?: string;\n  ref?: Ref<HTMLElement>;\n  inert?: boolean | 'true';\n}>;\n\nexport const SkeletonContext = createContext<boolean | null>(null);\nexport function useIsSkeleton(): boolean {\n  return useContext(SkeletonContext) || false;\n}\n\nexport interface SkeletonProps {\n  children: ReactNode;\n  isLoading: boolean;\n}\n\n/**\n * A Skeleton wraps around content to render it as a placeholder.\n */\nexport function Skeleton({children, isLoading}: SkeletonProps): ReactNode {\n  // Disable all form components inside a skeleton.\n  return <SkeletonContext.Provider value={isLoading}>{children}</SkeletonContext.Provider>;\n}\n\nexport const loadingStyle = css(\n  `\n  background-image: linear-gradient(to right, ${color('gray-100')} 33%, light-dark(${color('gray-25')}, ${color('gray-300')}), ${color('gray-100')} 66%);\n  background-size: 300%;\n  * {\n    visibility: hidden;\n  }\n`,\n  'L'\n); // add to a separate layer so it overrides default style macro styles\n\nexport function useSkeletonText(\n  children: ReactNode,\n  style: CSSProperties | undefined\n): [ReactNode, CSSProperties | undefined] {\n  let isSkeleton = useContext(SkeletonContext);\n  if (isSkeleton) {\n    children = <SkeletonText>{children}</SkeletonText>;\n    style = {\n      ...style,\n      // This ensures the ellipsis on truncated text is also hidden.\n      // -webkit-text-fill-color overrides any `color` property that is also set.\n      WebkitTextFillColor: 'transparent'\n    };\n  }\n  return [children, style];\n}\n\n// Rendered inside <Text> to create skeleton line boxes via box-decoration-break.\nexport function SkeletonText({children}: {children: ReactNode}): ReactNode {\n  return (\n    <span\n      // @ts-ignore - compatibility with React < 19\n      inert={inertValue(true)}\n      ref={useLoadingAnimation(true)}\n      className={\n        loadingStyle +\n        style({\n          color: 'transparent',\n          boxDecorationBreak: 'clone',\n          borderRadius: 'sm'\n        })\n      }>\n      {children}\n    </span>\n  );\n}\n\n// Clones the child element and displays it with skeleton styling.\nexport function SkeletonWrapper({children}: {children: SkeletonElement}): ReactNode {\n  let isLoading = useContext(SkeletonContext);\n  let animation = useLoadingAnimation(isLoading || false);\n  if (isLoading == null) {\n    return children;\n  }\n\n  let childRef =\n    'ref' in children && !Object.getOwnPropertyDescriptor(children, 'ref')?.get\n      ? (children.ref as any)\n      : children.props.ref;\n  return (\n    <SkeletonContext.Provider value={null}>\n      {isLoading\n        ? cloneElement(children, {\n            ref: mergeRefs(childRef, animation),\n            className: (children.props.className || '') + ' ' + loadingStyle,\n            // @ts-ignore - compatibility with React < 19\n            inert: inertValue(true)\n          })\n        : children}\n    </SkeletonContext.Provider>\n  );\n}\n\n// Adds default border radius around icons when displayed in a skeleton.\nexport function useSkeletonIcon(styles: StyleString): StyleString {\n  let isSkeleton = useContext(SkeletonContext);\n  if (isSkeleton) {\n    return mergeStyles(style({borderRadius: 'sm'}), styles);\n  }\n  return styles || ('' as StyleString);\n}\n"],"names":[],"version":3,"file":"Skeleton.mjs.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-spectrum/s2",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "Spectrum 2 UI components in React",
   "license": "Apache-2.0",
   "repository": {
@@ -96,5 +96,5 @@
   "page": "dist/page.cjs",
   "style-main": "style/dist/main.cjs",
   "style-module": "style/dist/module.mjs",
-  "gitHead": "1c84a49a1faf50b571c84e00bcf9c60b22ddd03e"
+  "gitHead": "c4de1e2235bce213d392477a2ebc1e575937051f"
 }

package/src/Button.tsx

@@ -253,7 +253,12 @@ const button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: bool
           fill: {
             variant: {
               primary: 'auto',
-              secondary: 'white',
+              secondary: {
+                default: 'transparent-overlay-1000',
+                isHovered: 'transparent-overlay-1000',
+                isFocusVisible: 'transparent-overlay-1000',
+                isPressed: 'transparent-overlay-1000'
+              },
               premium: 'white',
               genai: 'white'
             }
@@ -263,7 +268,12 @@ const button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: bool
               premium: 'white',
               genai: 'white'
             },
-            default: 'white'
+            default: {
+              default: 'transparent-overlay-1000',
+              isHovered: 'transparent-overlay-1000',
+              isFocusVisible: 'transparent-overlay-1000',
+              isPressed: 'transparent-overlay-1000'
+            }
           }
         },
         isDisabled: 'transparent-overlay-400'

package/style/__tests__/style-macro.test.js

@@ -40,26 +40,26 @@ describe('style-macro', () => {
 "@layer _.a, _.b, _.c;
 
 @layer _.b {
-  .Jbs15:first-child {
+  .Jbs151:first-child {
     margin-top: 0.25rem;
   }
 }
 
 @layer _.c.p {
   @media (min-width: 64rem) {
-    .Jbpv15:first-child {
+    .Jbpv151:first-child {
       margin-top: 0.5rem;
     }
   }
 }
 
-.-macro-static-wxfyDb {
-        --macro-data-wxfyDb: {"style":{"marginTop":{":first-child":{"default":4,"lg":8}}},"loc":"undefined:undefined:undefined"};
+.-macro-static-OZFeNe {
+        --macro-data-OZFeNe: {"style":{"marginTop":{":first-child":{"default":4,"lg":8}}},"loc":"undefined:undefined:undefined"};
       }
 
 "
 `);
-    expect(js).toMatchInlineSnapshot(`" Jbs15 Jbpv15 -macro-static-wxfyDb"`);
+    expect(js).toMatchInlineSnapshot(`" Jbs151 Jbpv151 -macro-static-OZFeNe"`);
   });
 
   it('should support self references', () => {
@@ -73,60 +73,60 @@ describe('style-macro', () => {
 "@layer _.a;
 
 @layer _.a {
-  ._kc15 {
+  ._kc151 {
     border-top-width: 2px;
   }
 
 
-  .hc15 {
+  .hc151 {
     border-bottom-width: 2px;
   }
 
 
-  .mCPFGYc15 {
+  .mCPFGYc151 {
     border-inline-start-width: var(--m);
   }
 
 
-  .lc15 {
+  .lc151 {
     border-inline-end-width: 2px;
   }
 
 
-  .SMBFGYc15 {
+  .SMBFGYc151 {
     padding-inline-start: var(--S);
   }
 
 
-  .Rv15 {
+  .Rv151 {
     padding-inline-end: calc(var(--F, var(--M)) * 3 / 8);
   }
 
 
-  .ZjUQgKd15 {
+  .ZjUQgKd151 {
     width: calc(200px - var(--m) - var(--S));
   }
 
 
-  .-m_-mc15 {
+  .-m_-mc151 {
     --m: 2px;
   }
 
 
-  .-S_-Sv15 {
+  .-S_-Sv151 {
     --S: calc(var(--F, var(--M)) * 3 / 8);
   }
 }
 
-.-macro-static-vBpT2 {
-        --macro-data-vBpT2: {"style":{"borderWidth":2,"paddingX":"edge-to-text","width":"calc(200px - self(borderStartWidth) - self(paddingStart))"},"loc":"undefined:undefined:undefined"};
+.-macro-static-6DrPJb {
+        --macro-data-6DrPJb: {"style":{"borderWidth":2,"paddingX":"edge-to-text","width":"calc(200px - self(borderStartWidth) - self(paddingStart))"},"loc":"undefined:undefined:undefined"};
       }
 
 "
 `);
 
     expect(js).toMatchInlineSnapshot(
-      `" _kc15 hc15 mCPFGYc15 lc15 SMBFGYc15 Rv15 ZjUQgKd15 -m_-mc15 -S_-Sv15 -macro-static-vBpT2"`
+      `" _kc151 hc151 mCPFGYc151 lc151 SMBFGYc151 Rv151 ZjUQgKd151 -m_-mc151 -S_-Sv151 -macro-static-6DrPJb"`
     );
   });
 
@@ -144,9 +144,9 @@ describe('style-macro', () => {
       color: 'green-400'
     });
 
-    expect(js()).toMatchInlineSnapshot(`"  gw15 pg15 -macro-dynamic-16fgbv4"`);
-    expect(overrides).toMatchInlineSnapshot(`" g8tmWqb15 pHJ3AUd15 -macro-static-4cOIRb"`);
-    expect(js({}, overrides)).toMatchInlineSnapshot(`"  g8tmWqb15 pg15 -macro-dynamic-1vflel8"`);
+    expect(js()).toMatchInlineSnapshot(`"  gw151 pg151 -macro-dynamic-ksiu6q"`);
+    expect(overrides).toMatchInlineSnapshot(`" g8tmWqb151 pHJ3AUd151 -macro-static-4DCFgd"`);
+    expect(js({}, overrides)).toMatchInlineSnapshot(`"  g8tmWqb151 pg151 -macro-dynamic-197x9i6"`);
   });
 
   it('should support allowed overrides for properties that expand into multiple', () => {
@@ -161,10 +161,10 @@ describe('style-macro', () => {
       translateX: 40
     });
 
-    expect(js()).toMatchInlineSnapshot(`"  -_7PloMd-B15 __Ya15 -macro-dynamic-2u33z5"`);
-    expect(overrides).toMatchInlineSnapshot(`" -_7PloMd-D15 __Ya15 -macro-static-poioi"`);
+    expect(js()).toMatchInlineSnapshot(`"  -_7PloMd-B151 __Ya151 -macro-dynamic-clboub"`);
+    expect(overrides).toMatchInlineSnapshot(`" -_7PloMd-D151 __Ya151 -macro-static-pdFIDc"`);
     expect(js({}, overrides)).toMatchInlineSnapshot(
-      `"  -_7PloMd-D15 __Ya15 -macro-dynamic-13fqmar"`
+      `"  -_7PloMd-D151 __Ya151 -macro-dynamic-n9a5xh"`
     );
   });
 
@@ -180,10 +180,10 @@ describe('style-macro', () => {
       padding: 40
     });
 
-    expect(js()).toMatchInlineSnapshot(`"  Tk15 Qk15 Sk15 Rk15 -macro-dynamic-2rom7x"`);
-    expect(overrides).toMatchInlineSnapshot(`" Tm15 Qm15 Sm15 Rm15 -macro-static-FXaHv"`);
+    expect(js()).toMatchInlineSnapshot(`"  Tk151 Qk151 Sk151 Rk151 -macro-dynamic-1esad0h"`);
+    expect(overrides).toMatchInlineSnapshot(`" Tm151 Qm151 Sm151 Rm151 -macro-static-Nfrh6d"`);
     expect(js({}, overrides)).toMatchInlineSnapshot(
-      `"  Tm15 Qm15 Sm15 Rm15 -macro-dynamic-16os9ol"`
+      `"  Tm151 Qm151 Sm151 Rm151 -macro-dynamic-7axbah"`
     );
   });
 
@@ -199,9 +199,11 @@ describe('style-macro', () => {
       fontSize: 'ui-xs'
     });
 
-    expect(js()).toMatchInlineSnapshot(`"  -_6BNtrc-woabcc15 vx15 -macro-dynamic-qs6tc"`);
-    expect(overrides).toMatchInlineSnapshot(`" -_6BNtrc-a15 vx15 -macro-static-yXDXz"`);
-    expect(js({}, overrides)).toMatchInlineSnapshot(`"  -_6BNtrc-a15 vx15 -macro-dynamic-1nd81ma"`);
+    expect(js()).toMatchInlineSnapshot(`"  -_6BNtrc-woabcc151 vx151 -macro-dynamic-xhgg6a"`);
+    expect(overrides).toMatchInlineSnapshot(`" -_6BNtrc-a151 vx151 -macro-static-grInxd"`);
+    expect(js({}, overrides)).toMatchInlineSnapshot(
+      `"  -_6BNtrc-a151 vx151 -macro-dynamic-hitxxw"`
+    );
   });
 
   it("should support allowed overrides for values that aren't defined", () => {
@@ -216,9 +218,9 @@ describe('style-macro', () => {
       minWidth: 32
     });
 
-    expect(js()).toMatchInlineSnapshot(`"  gE15 -macro-dynamic-11gtfdt"`);
-    expect(overrides).toMatchInlineSnapshot(`" Nk15 -macro-static-Io0zY"`);
-    expect(js({}, overrides)).toMatchInlineSnapshot(`"  Nk15 gE15 -macro-dynamic-14t819c"`);
+    expect(js()).toMatchInlineSnapshot(`"  gE151 -macro-dynamic-wd489e"`);
+    expect(overrides).toMatchInlineSnapshot(`" Nk151 -macro-static-f34NMd"`);
+    expect(js({}, overrides)).toMatchInlineSnapshot(`"  Nk151 gE151 -macro-dynamic-1qncav6"`);
   });
 
   it('should support runtime conditions', () => {
@@ -239,32 +241,32 @@ describe('style-macro', () => {
 "@layer _.a;
 
 @layer _.a {
-  .gH15 {
+  .gH151 {
     background-color: light-dark(rgb(233, 233, 233), rgb(44, 44, 44));
   }
 
 
-  .gF15 {
+  .gF151 {
     background-color: light-dark(rgb(225, 225, 225), rgb(50, 50, 50));
   }
 
 
-  .gE15 {
+  .gE151 {
     background-color: light-dark(rgb(218, 218, 218), rgb(57, 57, 57));
   }
 
 
-  .pt15 {
+  .pt151 {
     color: light-dark(rgb(41, 41, 41), rgb(219, 219, 219));
   }
 
 
-  .po15 {
+  .po151 {
     color: light-dark(rgb(19, 19, 19), rgb(242, 242, 242));
   }
 
 
-  .pm15 {
+  .pm151 {
     color: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));
   }
 }
@@ -272,9 +274,9 @@ describe('style-macro', () => {
 "
 `);
 
-    expect(js({})).toMatchInlineSnapshot(`"  gH15 pt15 -macro-dynamic-10n1jv2"`);
-    expect(js({isHovered: true})).toMatchInlineSnapshot(`"  gF15 po15 -macro-dynamic-boma93"`);
-    expect(js({isPressed: true})).toMatchInlineSnapshot(`"  gE15 pm15 -macro-dynamic-1cs8qp0"`);
+    expect(js({})).toMatchInlineSnapshot(`"  gH151 pt151 -macro-dynamic-13m9l9s"`);
+    expect(js({isHovered: true})).toMatchInlineSnapshot(`"  gF151 po151 -macro-dynamic-1e5szmx"`);
+    expect(js({isPressed: true})).toMatchInlineSnapshot(`"  gE151 pm151 -macro-dynamic-1ltkejq"`);
   });
 
   it('should support nested runtime conditions', () => {
@@ -293,33 +295,33 @@ describe('style-macro', () => {
 "@layer _.a;
 
 @layer _.a {
-  .gH15 {
+  .gH151 {
     background-color: light-dark(rgb(233, 233, 233), rgb(44, 44, 44));
   }
 
 
-  .gF15 {
+  .gF151 {
     background-color: light-dark(rgb(225, 225, 225), rgb(50, 50, 50));
   }
 
 
-  .g_h15 {
+  .g_h151 {
     background-color: light-dark(rgb(75, 117, 255), rgb(64, 105, 253));
   }
 
 
-  .g315 {
+  .g3151 {
     background-color: light-dark(rgb(59, 99, 251), rgb(86, 129, 255));
   }
 }
 
 "
 `);
-    expect(js({})).toMatchInlineSnapshot(`"  gH15 -macro-dynamic-1etdqys"`);
-    expect(js({isHovered: true})).toMatchInlineSnapshot(`"  gF15 -macro-dynamic-1tldjwi"`);
-    expect(js({isSelected: true})).toMatchInlineSnapshot(`"  g_h15 -macro-dynamic-d1dps3"`);
+    expect(js({})).toMatchInlineSnapshot(`"  gH151 -macro-dynamic-1ap2imt"`);
+    expect(js({isHovered: true})).toMatchInlineSnapshot(`"  gF151 -macro-dynamic-1153npv"`);
+    expect(js({isSelected: true})).toMatchInlineSnapshot(`"  g_h151 -macro-dynamic-7jyd2s"`);
     expect(js({isSelected: true, isHovered: true})).toMatchInlineSnapshot(
-      `"  g315 -macro-dynamic-sejjv3"`
+      `"  g3151 -macro-dynamic-heik00"`
     );
   });
 
@@ -334,9 +336,9 @@ describe('style-macro', () => {
       }
     });
 
-    expect(js({variant: 'accent'})).toMatchInlineSnapshot(`"  gY15 -macro-dynamic-vr3hyt"`);
-    expect(js({variant: 'primary'})).toMatchInlineSnapshot(`"  gjQquMe15 -macro-dynamic-vcucj3"`);
-    expect(js({variant: 'secondary'})).toMatchInlineSnapshot(`"  gw15 -macro-dynamic-n6ilub"`);
+    expect(js({variant: 'accent'})).toMatchInlineSnapshot(`"  gY151 -macro-dynamic-1kvorfq"`);
+    expect(js({variant: 'primary'})).toMatchInlineSnapshot(`"  gjQquMe151 -macro-dynamic-17tas0w"`);
+    expect(js({variant: 'secondary'})).toMatchInlineSnapshot(`"  gw151 -macro-dynamic-1m4zj7o"`);
   });
 
   it('supports runtime conditions nested inside css conditions', () => {
@@ -354,14 +356,14 @@ describe('style-macro', () => {
 
 @layer _.b.l {
   @media (forced-colors: active) {
-    .plb15 {
+    .plb151 {
       color: ButtonText;
     }
   }
 
 
   @media (forced-colors: active) {
-    .ple15 {
+    .ple151 {
       color: HighlightText;
     }
   }
@@ -370,8 +372,8 @@ describe('style-macro', () => {
 "
 `);
 
-    expect(js({})).toMatchInlineSnapshot(`"  plb15 -macro-dynamic-1ap32yb"`);
-    expect(js({isSelected: true})).toMatchInlineSnapshot(`"  ple15 -macro-dynamic-1o1neja"`);
+    expect(js({})).toMatchInlineSnapshot(`"  plb151 -macro-dynamic-1gtim5g"`);
+    expect(js({isSelected: true})).toMatchInlineSnapshot(`"  ple151 -macro-dynamic-1v5gwiv"`);
   });
 
   it('inherits parent default when nested branch has no default key', () => {
@@ -387,9 +389,9 @@ describe('style-macro', () => {
     });
     // forcedColors.default should apply when variant=highlight but !isSelected
     expect(css).toContain('ButtonText');
-    expect(js({variant: 'highlight'})).toMatchInlineSnapshot(`"  plb15 -macro-dynamic-1ap32yb"`);
+    expect(js({variant: 'highlight'})).toMatchInlineSnapshot(`"  plb151 -macro-dynamic-1gtim5g"`);
     expect(js({variant: 'highlight', isSelected: true})).toMatchInlineSnapshot(
-      `"  ple15 -macro-dynamic-1o1neja"`
+      `"  ple151 -macro-dynamic-1v5gwiv"`
     );
   });
 
@@ -398,33 +400,33 @@ describe('style-macro', () => {
       padding: 24
     });
 
-    expect(js).toMatchInlineSnapshot(`" Th15 Qh15 Sh15 Rh15 -macro-static-PaKDid"`);
+    expect(js).toMatchInlineSnapshot(`" Th151 Qh151 Sh151 Rh151 -macro-static-dvFMTb"`);
     expect(css).toMatchInlineSnapshot(`
 "@layer _.a;
 
 @layer _.a {
-  .Th15 {
+  .Th151 {
     padding-top: 24px;
   }
 
 
-  .Qh15 {
+  .Qh151 {
     padding-bottom: 24px;
   }
 
 
-  .Sh15 {
+  .Sh151 {
     padding-inline-start: 24px;
   }
 
 
-  .Rh15 {
+  .Rh151 {
     padding-inline-end: 24px;
   }
 }
 
-.-macro-static-PaKDid {
-        --macro-data-PaKDid: {"style":{"padding":24},"loc":"undefined:undefined:undefined"};
+.-macro-static-dvFMTb {
+        --macro-data-dvFMTb: {"style":{"padding":24},"loc":"undefined:undefined:undefined"};
       }
 
 "
@@ -440,13 +442,13 @@ describe('style-macro', () => {
 "@layer _.a;
 
 @layer _.a {
-  .gpQzfVb15 {
+  .gpQzfVb151 {
     background-color: rgb(from light-dark(rgb(39, 77, 234), rgb(105, 149, 254)) r g b / 50%);
   }
 }
 
-.-macro-static-3vO7o {
-        --macro-data-3vO7o: {"style":{"backgroundColor":"blue-1000/50"},"loc":"undefined:undefined:undefined"};
+.-macro-static-GJJsFd {
+        --macro-data-GJJsFd: {"style":{"backgroundColor":"blue-1000/50"},"loc":"undefined:undefined:undefined"};
       }
 
 "
@@ -465,13 +467,13 @@ describe('style-macro', () => {
 "@layer _.a;
 
 @layer _.a {
-  .-FUeYm-gE15 {
+  .-FUeYm-gE151 {
     --foo: light-dark(rgb(218, 218, 218), rgb(57, 57, 57));
   }
 }
 
-.-macro-static-z8Uxye {
-        --macro-data-z8Uxye: {"style":{"--foo":{"type":"backgroundColor","value":"gray-300"}},"loc":"undefined:undefined:undefined"};
+.-macro-static-QA93Ie {
+        --macro-data-QA93Ie: {"style":{"--foo":{"type":"backgroundColor","value":"gray-300"}},"loc":"undefined:undefined:undefined"};
       }
 
 "