@react-spectrum/s2 1.0.0 → 1.2.0

package/icons/Icon.cjs

@@ -65,15 +65,15 @@ const $bde97c91243ed164$var$iconStyles = function anonymous(props, overrides) {
     let rules = " ";
     let width = false;
     let height = false;
-    let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_S|-_8sjo0b-|Z|F)[^\s]+/g);
+    let matches = String(overrides || '').matchAll(/(?:^|\s)(J|G|I|H|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_S|-_8sjo0b-|Z|F)[^\s]+/g);
     for (let p of matches){
         if (p[1] === "Z") width = true;
         if (p[1] === "F") height = true;
         rules += p[0];
     }
-    if (!width) rules += ' Zm1';
-    if (!height) rules += ' Fn1';
-    rules += ' _va1';
+    if (!width) rules += ' Zm12';
+    if (!height) rules += ' Fn12';
+    rules += ' _va12';
     return rules;
 };
 function $bde97c91243ed164$export$274edc73af1ae9c8(Component, context = $bde97c91243ed164$export$a49f528ae1a4d0ed) {
@@ -107,27 +107,27 @@ const $bde97c91243ed164$var$illustrationStyles = function anonymous(props, overr
     let rules = " ";
     let width = false;
     let height = false;
-    let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_S|-_8sjo0b-|Z|F)[^\s]+/g);
+    let matches = String(overrides || '').matchAll(/(?:^|\s)(J|G|I|H|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_S|-_8sjo0b-|Z|F)[^\s]+/g);
     for (let p of matches){
         if (p[1] === "Z") width = true;
         if (p[1] === "F") height = true;
         rules += p[0];
     }
     if (props.size === "L") {
-        if (!width) rules += ' Zq1';
+        if (!width) rules += ' Zq12';
     } else if (props.size === "M") {
-        if (!width) rules += ' ZH1';
+        if (!width) rules += ' ZH12';
     } else if (props.size === "S") {
-        if (!width) rules += ' ZF1';
+        if (!width) rules += ' ZF12';
     }
     if (props.size === "L") {
-        if (!height) rules += ' Fr1';
+        if (!height) rules += ' Fr12';
     } else if (props.size === "M") {
-        if (!height) rules += ' FB1';
+        if (!height) rules += ' FB12';
     } else if (props.size === "S") {
-        if (!height) rules += ' Fz1';
+        if (!height) rules += ' Fz12';
     }
-    rules += ' _va1';
+    rules += ' _va12';
     return rules;
 };
 function $bde97c91243ed164$export$4d00e7be716a0093(Component) {

package/icons/Icon.css

@@ -1,37 +1,37 @@
 @layer _.a {
-  .Zm1 {
+  .Zm12 {
     width: calc(1.25rem * var(--s2-scale));
   }
 
-  .Fn1 {
+  .Fn12 {
     height: calc(1.25rem * var(--s2-scale));
   }
 
-  .ZF1 {
+  .ZF12 {
     width: calc(3rem * var(--s2-scale));
   }
 
-  .ZH1 {
+  .ZH12 {
     width: calc(6rem * var(--s2-scale));
   }
 
-  .Zq1 {
+  .Zq12 {
     width: calc(10rem * var(--s2-scale));
   }
 
-  .Fz1 {
+  .Fz12 {
     height: calc(3rem * var(--s2-scale));
   }
 
-  .FB1 {
+  .FB12 {
     height: calc(6rem * var(--s2-scale));
   }
 
-  .Fr1 {
+  .Fr12 {
     height: calc(10rem * var(--s2-scale));
   }
 
-  ._va1 {
+  ._va12 {
     flex-shrink: 0;
   }
 }

package/icons/Icon.mjs

@@ -56,15 +56,15 @@ const $ac8c32e6775ddd1f$var$iconStyles = function anonymous(props, overrides) {
     let rules = " ";
     let width = false;
     let height = false;
-    let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_S|-_8sjo0b-|Z|F)[^\s]+/g);
+    let matches = String(overrides || '').matchAll(/(?:^|\s)(J|G|I|H|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_S|-_8sjo0b-|Z|F)[^\s]+/g);
     for (let p of matches){
         if (p[1] === "Z") width = true;
         if (p[1] === "F") height = true;
         rules += p[0];
     }
-    if (!width) rules += ' Zm1';
-    if (!height) rules += ' Fn1';
-    rules += ' _va1';
+    if (!width) rules += ' Zm12';
+    if (!height) rules += ' Fn12';
+    rules += ' _va12';
     return rules;
 };
 function $ac8c32e6775ddd1f$export$274edc73af1ae9c8(Component, context = $ac8c32e6775ddd1f$export$a49f528ae1a4d0ed) {
@@ -98,27 +98,27 @@ const $ac8c32e6775ddd1f$var$illustrationStyles = function anonymous(props, overr
     let rules = " ";
     let width = false;
     let height = false;
-    let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_S|-_8sjo0b-|Z|F)[^\s]+/g);
+    let matches = String(overrides || '').matchAll(/(?:^|\s)(J|G|I|H|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_S|-_8sjo0b-|Z|F)[^\s]+/g);
     for (let p of matches){
         if (p[1] === "Z") width = true;
         if (p[1] === "F") height = true;
         rules += p[0];
     }
     if (props.size === "L") {
-        if (!width) rules += ' Zq1';
+        if (!width) rules += ' Zq12';
     } else if (props.size === "M") {
-        if (!width) rules += ' ZH1';
+        if (!width) rules += ' ZH12';
     } else if (props.size === "S") {
-        if (!width) rules += ' ZF1';
+        if (!width) rules += ' ZF12';
     }
     if (props.size === "L") {
-        if (!height) rules += ' Fr1';
+        if (!height) rules += ' Fr12';
     } else if (props.size === "M") {
-        if (!height) rules += ' FB1';
+        if (!height) rules += ' FB12';
     } else if (props.size === "S") {
-        if (!height) rules += ' Fz1';
+        if (!height) rules += ' Fz12';
     }
-    rules += ' _va1';
+    rules += ' _va12';
     return rules;
 };
 function $ac8c32e6775ddd1f$export$4d00e7be716a0093(Component) {

package/icons/Skeleton.cjs

@@ -97,7 +97,7 @@ function $5eb75e0c130e0669$export$cb6ddd830302c2a8({ children: children }) {
         // @ts-ignore - compatibility with React < 19
         inert: (0, $lzdFu$reactariautils.inertValue)(true),
         ref: $5eb75e0c130e0669$export$6b288fe07640c94c(true),
-        className: $5eb75e0c130e0669$export$d2353276f167b21f + " pw1 _ma1 oa1 na1 ka1 ja1",
+        className: $5eb75e0c130e0669$export$d2353276f167b21f + " pw12 _ma12 oa12 na12 ka12 ja12",
         children: children
     });
 }
@@ -118,7 +118,7 @@ function $5eb75e0c130e0669$export$6069cbe61f690103({ children: children }) {
 }
 function $5eb75e0c130e0669$export$4b7803c08fe9a32b(styles) {
     let isSkeleton = (0, $lzdFu$react.useContext)($5eb75e0c130e0669$export$74e166679b1f49ee);
-    if (isSkeleton) return (0, $308b180f49d82d28$exports.mergeStyles)(" oa1 na1 ka1 ja1", styles);
+    if (isSkeleton) return (0, $308b180f49d82d28$exports.mergeStyles)(" oa12 na12 ka12 ja12", styles);
     return styles || '';
 }
 

package/icons/Skeleton.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAUM,SAAS,0CAAoB,WAAoB;IACtD,IAAI,eAAe,CAAA,GAAA,mBAAK,EAAoB;IAC5C,IAAI,eAAe,CAAA,GAAA,uCAAY,EAAE;IACjC,OAAO,CAAA,GAAA,wBAAU,EAAE,CAAC;QAClB,IAAI,eAAe,CAAC,aAAa,OAAO,IAAI,WAAW,CAAC,gBAAgB,OAAO,QAAQ,OAAO,KAAK,YAAY;YAC7G,iEAAiE;YACjE,2EAA2E;YAC3E,aAAa,OAAO,GAAG,QAAQ,OAAO,CACpC;gBACE;oBAAC,oBAAoB;gBAAM;gBAC3B;oBAAC,oBAAoB;gBAAI;aAC1B,EACD;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,GAAG;QAAC;QAAa;KAAa;AAChC;AASO,MAAM,0DAAkB,CAAA,GAAA,0BAAY,EAAkB;AACtD,SAAS;IACd,OAAO,CAAA,GAAA,uBAAS,EAAE,8CAAoB;AACxC;AAUO,SAAS,0CAAS,YAAC,QAAQ,aAAE,SAAS,EAAgB;IAC3D,iDAAiD;IACjD,qBACE,gCAAC,0CAAgB,QAAQ;QAAC,OAAO;kBAC9B;;AAGP;AAEO,MAAM,sDAMJ,qEAAqE;AAEvE,SAAS,0CAAgB,QAAmB,EAAE,KAAgC;IACnF,IAAI,aAAa,CAAA,GAAA,uBAAS,EAAE;IAC5B,IAAI,YAAY;QACd,yBAAW,gCAAC;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,gCAAC;QACC,6CAA6C;QAC7C,OAAO,CAAA,GAAA,gCAAS,EAAE;QAClB,KAAK,0CAAoB;QACzB,WAAW;kBAKV;;AAGP;AAGO,SAAS,0CAAgB,YAAC,QAAQ,EAA8B;IACrE,IAAI,YAAY,CAAA,GAAA,uBAAS,EAAE;IAC3B,IAAI,YAAY,0CAAoB,aAAa;IACjD,IAAI,aAAa,MACf,OAAO;IAGT,IAAI,WAAW,SAAS,YAAY,CAAC,OAAO,wBAAwB,CAAC,UAAU,QAAQ,MAAM,SAAS,GAAG,GAAU,SAAS,KAAK,CAAC,GAAG;IACrI,qBACE,gCAAC,0CAAgB,QAAQ;QAAC,OAAO;kBAC9B,0BAAY,CAAA,GAAA,yBAAW,EAAE,UAAU;YAClC,KAAK,CAAA,GAAA,+BAAQ,EAAE,UAAU;YACzB,WAAW,AAAC,CAAA,SAAS,KAAK,CAAC,SAAS,IAAI,EAAC,IAAK,MAAM;YACpD,6CAA6C;YAC7C,OAAO,CAAA,GAAA,gCAAS,EAAE;QACpB,KAAK;;AAGX;AAGO,SAAS,0CAAgB,MAAmB;IACjD,IAAI,aAAa,CAAA,GAAA,uBAAS,EAAE;IAC5B,IAAI,YACF,OAAO,CAAA,GAAA,qCAAU,sBAA+B;IAElD,OAAO,UAAU;AACnB","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 {cloneElement, createContext, CSSProperties, ReactElement, ReactNode, Ref, useCallback, useContext, useRef} from 'react';\nimport {color, style} from '../style' with {type: 'macro'};\nimport {inertValue, mergeRefs} from '@react-aria/utils';\nimport {mergeStyles} from '../style/runtime';\nimport {raw} from '../style/style-macro' with {type: 'macro'};\nimport {StyleString} from '../style/types';\nimport {useMediaQuery} from '@react-spectrum/utils';\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((element: HTMLElement | null) => {\n    if (isAnimating && !animationRef.current && element && !reduceMotion && typeof element.animate === 'function') {\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        [\n          {backgroundPosition: '100%'},\n          {backgroundPosition: '0%'}\n        ],\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  }, [isAnimating, reduceMotion]);\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 (\n    <SkeletonContext.Provider value={isLoading}>\n      {children}\n    </SkeletonContext.Provider>\n  );\n}\n\nexport const loadingStyle = raw(`\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`, 'L'); // add to a separate layer so it overrides default style macro styles\n\nexport function useSkeletonText(children: ReactNode, style: CSSProperties | undefined): [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={loadingStyle + style({\n        color: 'transparent',\n        boxDecorationBreak: 'clone',\n        borderRadius: 'sm'\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 = 'ref' in children && !Object.getOwnPropertyDescriptor(children, 'ref')?.get ? children.ref as any : children.props.ref;\n  return (\n    <SkeletonContext.Provider value={null}>\n      {isLoading ? 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      }) : 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.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAUM,SAAS,0CAAoB,WAAoB;IACtD,IAAI,eAAe,CAAA,GAAA,mBAAK,EAAoB;IAC5C,IAAI,eAAe,CAAA,GAAA,uCAAY,EAAE;IACjC,OAAO,CAAA,GAAA,wBAAU,EAAE,CAAC;QAClB,IAAI,eAAe,CAAC,aAAa,OAAO,IAAI,WAAW,CAAC,gBAAgB,OAAO,QAAQ,OAAO,KAAK,YAAY;YAC7G,iEAAiE;YACjE,2EAA2E;YAC3E,aAAa,OAAO,GAAG,QAAQ,OAAO,CACpC;gBACE;oBAAC,oBAAoB;gBAAM;gBAC3B;oBAAC,oBAAoB;gBAAI;aAC1B,EACD;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,GAAG;QAAC;QAAa;KAAa;AAChC;AASO,MAAM,0DAAkB,CAAA,GAAA,0BAAY,EAAkB;AACtD,SAAS;IACd,OAAO,CAAA,GAAA,uBAAS,EAAE,8CAAoB;AACxC;AAUO,SAAS,0CAAS,YAAC,QAAQ,aAAE,SAAS,EAAgB;IAC3D,iDAAiD;IACjD,qBACE,gCAAC,0CAAgB,QAAQ;QAAC,OAAO;kBAC9B;;AAGP;AAEO,MAAM,sDAMJ,qEAAqE;AAEvE,SAAS,0CAAgB,QAAmB,EAAE,KAAgC;IACnF,IAAI,aAAa,CAAA,GAAA,uBAAS,EAAE;IAC5B,IAAI,YAAY;QACd,yBAAW,gCAAC;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,gCAAC;QACC,6CAA6C;QAC7C,OAAO,CAAA,GAAA,gCAAS,EAAE;QAClB,KAAK,0CAAoB;QACzB,WAAW;kBAKV;;AAGP;AAGO,SAAS,0CAAgB,YAAC,QAAQ,EAA8B;IACrE,IAAI,YAAY,CAAA,GAAA,uBAAS,EAAE;IAC3B,IAAI,YAAY,0CAAoB,aAAa;IACjD,IAAI,aAAa,MACf,OAAO;IAGT,IAAI,WAAW,SAAS,YAAY,CAAC,OAAO,wBAAwB,CAAC,UAAU,QAAQ,MAAM,SAAS,GAAG,GAAU,SAAS,KAAK,CAAC,GAAG;IACrI,qBACE,gCAAC,0CAAgB,QAAQ;QAAC,OAAO;kBAC9B,0BAAY,CAAA,GAAA,yBAAW,EAAE,UAAU;YAClC,KAAK,CAAA,GAAA,+BAAQ,EAAE,UAAU;YACzB,WAAW,AAAC,CAAA,SAAS,KAAK,CAAC,SAAS,IAAI,EAAC,IAAK,MAAM;YACpD,6CAA6C;YAC7C,OAAO,CAAA,GAAA,gCAAS,EAAE;QACpB,KAAK;;AAGX;AAGO,SAAS,0CAAgB,MAAmB;IACjD,IAAI,aAAa,CAAA,GAAA,uBAAS,EAAE;IAC5B,IAAI,YACF,OAAO,CAAA,GAAA,qCAAU,0BAA+B;IAElD,OAAO,UAAU;AACnB","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 {cloneElement, createContext, CSSProperties, ReactElement, ReactNode, Ref, useCallback, useContext, useRef} from 'react';\nimport {color, style} from '../style' with {type: 'macro'};\nimport {inertValue, mergeRefs} from '@react-aria/utils';\nimport {mergeStyles} from '../style/runtime';\nimport {raw} from '../style/style-macro' with {type: 'macro'};\nimport {StyleString} from '../style/types';\nimport {useMediaQuery} from '@react-spectrum/utils';\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((element: HTMLElement | null) => {\n    if (isAnimating && !animationRef.current && element && !reduceMotion && typeof element.animate === 'function') {\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        [\n          {backgroundPosition: '100%'},\n          {backgroundPosition: '0%'}\n        ],\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  }, [isAnimating, reduceMotion]);\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 (\n    <SkeletonContext.Provider value={isLoading}>\n      {children}\n    </SkeletonContext.Provider>\n  );\n}\n\nexport const loadingStyle = raw(`\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`, 'L'); // add to a separate layer so it overrides default style macro styles\n\nexport function useSkeletonText(children: ReactNode, style: CSSProperties | undefined): [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={loadingStyle + style({\n        color: 'transparent',\n        boxDecorationBreak: 'clone',\n        borderRadius: 'sm'\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 = 'ref' in children && !Object.getOwnPropertyDescriptor(children, 'ref')?.get ? children.ref as any : children.props.ref;\n  return (\n    <SkeletonContext.Provider value={null}>\n      {isLoading ? 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      }) : 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.cjs.map"}

package/icons/Skeleton.css

@@ -12,28 +12,28 @@
 }
 
 @layer _.a {
-  .pw1 {
+  .pw12 {
     color: #0000;
   }
 
-  ._ma1 {
+  ._ma12 {
     -webkit-box-decoration-break: clone;
     box-decoration-break: clone;
   }
 
-  .oa1 {
+  .oa12 {
     border-start-start-radius: .25rem;
   }
 
-  .na1 {
+  .na12 {
     border-start-end-radius: .25rem;
   }
 
-  .ka1 {
+  .ka12 {
     border-end-start-radius: .25rem;
   }
 
-  .ja1 {
+  .ja12 {
     border-end-end-radius: .25rem;
   }
 }

package/icons/Skeleton.mjs

@@ -84,7 +84,7 @@ function $5ad421ec19460c48$export$cb6ddd830302c2a8({ children: children }) {
         // @ts-ignore - compatibility with React < 19
         inert: (0, $cHM3s$inertValue)(true),
         ref: $5ad421ec19460c48$export$6b288fe07640c94c(true),
-        className: $5ad421ec19460c48$export$d2353276f167b21f + " pw1 _ma1 oa1 na1 ka1 ja1",
+        className: $5ad421ec19460c48$export$d2353276f167b21f + " pw12 _ma12 oa12 na12 ka12 ja12",
         children: children
     });
 }
@@ -105,7 +105,7 @@ function $5ad421ec19460c48$export$6069cbe61f690103({ children: children }) {
 }
 function $5ad421ec19460c48$export$4b7803c08fe9a32b(styles) {
     let isSkeleton = (0, $cHM3s$useContext)($5ad421ec19460c48$export$74e166679b1f49ee);
-    if (isSkeleton) return (0, $feb886035e0d4633$export$e618dc39ac9ad607)(" oa1 na1 ka1 ja1", styles);
+    if (isSkeleton) return (0, $feb886035e0d4633$export$e618dc39ac9ad607)(" oa12 na12 ka12 ja12", styles);
     return styles || '';
 }
 

package/icons/Skeleton.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAUM,SAAS,0CAAoB,WAAoB;IACtD,IAAI,eAAe,CAAA,GAAA,aAAK,EAAoB;IAC5C,IAAI,eAAe,CAAA,GAAA,oBAAY,EAAE;IACjC,OAAO,CAAA,GAAA,kBAAU,EAAE,CAAC;QAClB,IAAI,eAAe,CAAC,aAAa,OAAO,IAAI,WAAW,CAAC,gBAAgB,OAAO,QAAQ,OAAO,KAAK,YAAY;YAC7G,iEAAiE;YACjE,2EAA2E;YAC3E,aAAa,OAAO,GAAG,QAAQ,OAAO,CACpC;gBACE;oBAAC,oBAAoB;gBAAM;gBAC3B;oBAAC,oBAAoB;gBAAI;aAC1B,EACD;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,GAAG;QAAC;QAAa;KAAa;AAChC;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,qBACE,gBAAC,0CAAgB,QAAQ;QAAC,OAAO;kBAC9B;;AAGP;AAEO,MAAM,sDAMJ,qEAAqE;AAEvE,SAAS,0CAAgB,QAAmB,EAAE,KAAgC;IACnF,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,WAAW;kBAKV;;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,WAAW,SAAS,YAAY,CAAC,OAAO,wBAAwB,CAAC,UAAU,QAAQ,MAAM,SAAS,GAAG,GAAU,SAAS,KAAK,CAAC,GAAG;IACrI,qBACE,gBAAC,0CAAgB,QAAQ;QAAC,OAAO;kBAC9B,0BAAY,CAAA,GAAA,mBAAW,EAAE,UAAU;YAClC,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,KAAK;;AAGX;AAGO,SAAS,0CAAgB,MAAmB;IACjD,IAAI,aAAa,CAAA,GAAA,iBAAS,EAAE;IAC5B,IAAI,YACF,OAAO,CAAA,GAAA,yCAAU,sBAA+B;IAElD,OAAO,UAAU;AACnB","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 {cloneElement, createContext, CSSProperties, ReactElement, ReactNode, Ref, useCallback, useContext, useRef} from 'react';\nimport {color, style} from '../style' with {type: 'macro'};\nimport {inertValue, mergeRefs} from '@react-aria/utils';\nimport {mergeStyles} from '../style/runtime';\nimport {raw} from '../style/style-macro' with {type: 'macro'};\nimport {StyleString} from '../style/types';\nimport {useMediaQuery} from '@react-spectrum/utils';\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((element: HTMLElement | null) => {\n    if (isAnimating && !animationRef.current && element && !reduceMotion && typeof element.animate === 'function') {\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        [\n          {backgroundPosition: '100%'},\n          {backgroundPosition: '0%'}\n        ],\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  }, [isAnimating, reduceMotion]);\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 (\n    <SkeletonContext.Provider value={isLoading}>\n      {children}\n    </SkeletonContext.Provider>\n  );\n}\n\nexport const loadingStyle = raw(`\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`, 'L'); // add to a separate layer so it overrides default style macro styles\n\nexport function useSkeletonText(children: ReactNode, style: CSSProperties | undefined): [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={loadingStyle + style({\n        color: 'transparent',\n        boxDecorationBreak: 'clone',\n        borderRadius: 'sm'\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 = 'ref' in children && !Object.getOwnPropertyDescriptor(children, 'ref')?.get ? children.ref as any : children.props.ref;\n  return (\n    <SkeletonContext.Provider value={null}>\n      {isLoading ? 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      }) : 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;;;;;AAUM,SAAS,0CAAoB,WAAoB;IACtD,IAAI,eAAe,CAAA,GAAA,aAAK,EAAoB;IAC5C,IAAI,eAAe,CAAA,GAAA,oBAAY,EAAE;IACjC,OAAO,CAAA,GAAA,kBAAU,EAAE,CAAC;QAClB,IAAI,eAAe,CAAC,aAAa,OAAO,IAAI,WAAW,CAAC,gBAAgB,OAAO,QAAQ,OAAO,KAAK,YAAY;YAC7G,iEAAiE;YACjE,2EAA2E;YAC3E,aAAa,OAAO,GAAG,QAAQ,OAAO,CACpC;gBACE;oBAAC,oBAAoB;gBAAM;gBAC3B;oBAAC,oBAAoB;gBAAI;aAC1B,EACD;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,GAAG;QAAC;QAAa;KAAa;AAChC;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,qBACE,gBAAC,0CAAgB,QAAQ;QAAC,OAAO;kBAC9B;;AAGP;AAEO,MAAM,sDAMJ,qEAAqE;AAEvE,SAAS,0CAAgB,QAAmB,EAAE,KAAgC;IACnF,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,WAAW;kBAKV;;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,WAAW,SAAS,YAAY,CAAC,OAAO,wBAAwB,CAAC,UAAU,QAAQ,MAAM,SAAS,GAAG,GAAU,SAAS,KAAK,CAAC,GAAG;IACrI,qBACE,gBAAC,0CAAgB,QAAQ;QAAC,OAAO;kBAC9B,0BAAY,CAAA,GAAA,mBAAW,EAAE,UAAU;YAClC,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,KAAK;;AAGX;AAGO,SAAS,0CAAgB,MAAmB;IACjD,IAAI,aAAa,CAAA,GAAA,iBAAS,EAAE;IAC5B,IAAI,YACF,OAAO,CAAA,GAAA,yCAAU,0BAA+B;IAElD,OAAO,UAAU;AACnB","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 {cloneElement, createContext, CSSProperties, ReactElement, ReactNode, Ref, useCallback, useContext, useRef} from 'react';\nimport {color, style} from '../style' with {type: 'macro'};\nimport {inertValue, mergeRefs} from '@react-aria/utils';\nimport {mergeStyles} from '../style/runtime';\nimport {raw} from '../style/style-macro' with {type: 'macro'};\nimport {StyleString} from '../style/types';\nimport {useMediaQuery} from '@react-spectrum/utils';\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((element: HTMLElement | null) => {\n    if (isAnimating && !animationRef.current && element && !reduceMotion && typeof element.animate === 'function') {\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        [\n          {backgroundPosition: '100%'},\n          {backgroundPosition: '0%'}\n        ],\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  }, [isAnimating, reduceMotion]);\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 (\n    <SkeletonContext.Provider value={isLoading}>\n      {children}\n    </SkeletonContext.Provider>\n  );\n}\n\nexport const loadingStyle = raw(`\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`, 'L'); // add to a separate layer so it overrides default style macro styles\n\nexport function useSkeletonText(children: ReactNode, style: CSSProperties | undefined): [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={loadingStyle + style({\n        color: 'transparent',\n        boxDecorationBreak: 'clone',\n        borderRadius: 'sm'\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 = 'ref' in children && !Object.getOwnPropertyDescriptor(children, 'ref')?.get ? children.ref as any : children.props.ref;\n  return (\n    <SkeletonContext.Provider value={null}>\n      {isLoading ? 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      }) : 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/icons/runtime.cjs

@@ -16,9 +16,19 @@ $parcel$export(module.exports, "mergeStyles", () => $308b180f49d82d28$export$e61
  * governing permissions and limitations under the License.
  */ function $308b180f49d82d28$export$e618dc39ac9ad607(...styles) {
     let definedStyles = styles.filter(Boolean);
-    if (definedStyles.length === 1) return definedStyles[0];
+    if (definedStyles.length === 1) {
+        let first = definedStyles[0];
+        if (typeof first !== 'string') // static macro has a toString method so that we generate the style macro map for the entry
+        // it's automatically called in other places, but for our merging, we have to call it ourselves
+        return first.toString();
+        return first;
+    }
     let map = new Map();
-    for (let style of definedStyles)for (let [k, v] of $308b180f49d82d28$var$parse(style))map.set(k, v);
+    for (let style of definedStyles){
+        // must call toString here for the static macro
+        let str = style.toString();
+        for (let [k, v] of $308b180f49d82d28$var$parse(str))map.set(k, v);
+    }
     let res = '';
     for (let value of map.values())res += value;
     return res;
@@ -34,7 +44,10 @@ function $308b180f49d82d28$var$parse(s) {
         let condition = i;
         while(i < s.length && s[i] !== ' ')readValue();
         let property = s.slice(start, condition);
-        properties.set(property, (properties.get(property) || '') + ' ' + s.slice(start, i));
+        if (process.env.NODE_ENV !== 'production' && property.startsWith('-macro-')) {
+            let value = s.slice(start, i);
+            properties.set(value, ' ' + value);
+        } else properties.set(property, (properties.get(property) || '') + ' ' + s.slice(start, i));
     }
     function readValue() {
         if (s[i] === '-') // the beginning and end of arbitrary values are marked with -

package/icons/runtime.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;AAAA;;;;;;;;;;CAUC,GA4BM,SAAS,0CAAY,GAAG,MAA0C;IACvE,IAAI,gBAAgB,OAAO,MAAM,CAAC;IAClC,IAAI,cAAc,MAAM,KAAK,GAC3B,OAAO,aAAa,CAAC,EAAE;IAGzB,IAAI,MAAM,IAAI;IACd,KAAK,IAAI,SAAS,cAChB,KAAK,IAAI,CAAC,GAAG,EAAE,IAAI,4BAAM,OACvB,IAAI,GAAG,CAAC,GAAG;IAIf,IAAI,MAAM;IACV,KAAK,IAAI,SAAS,IAAI,MAAM,GAC1B,OAAO;IAET,OAAO;AACT;AAEA,SAAS,4BAAM,CAAS;IACtB,IAAI,aAAa,IAAI;IACrB,IAAI,IAAI;IACR,MAAO,IAAI,EAAE,MAAM,CAAE;QACnB,MAAO,IAAI,EAAE,MAAM,IAAI,CAAC,CAAC,EAAE,KAAK,IAC9B;QAGF,IAAI,QAAQ;QACZ,aAAa,iBAAiB;QAE9B,2CAA2C;QAC3C,IAAI,YAAY;QAChB,MAAO,IAAI,EAAE,MAAM,IAAI,CAAC,CAAC,EAAE,KAAK,IAC9B;QAGF,IAAI,WAAW,EAAE,KAAK,CAAC,OAAO;QAC9B,WAAW,GAAG,CAAC,UAAU,AAAC,CAAA,WAAW,GAAG,CAAC,aAAa,EAAC,IAAK,MAAM,EAAE,KAAK,CAAC,OAAO;IACnF;IAEA,SAAS;QACP,IAAI,CAAC,CAAC,EAAE,KAAK,KACX,8DAA8D;QAC9D,MAAO,IAAI,EAAE,MAAM,IAAI,CAAC,CAAC,EAAE,KAAK,IAAK;YACnC;YACA,IAAI,CAAC,CAAC,EAAE,KAAK,KAAK;gBAChB;gBACA;YACF;QACF;aACK;YACL,MAAO,IAAI,EAAE,MAAM,CACjB,IAAI,CAAC,CAAC,EAAE,KAAK,KACX;iBACK;gBACL;gBACA;YACF;QAEJ;IACF;IAEA,OAAO;AACT","sources":["packages/@react-spectrum/s2/style/runtime.ts"],"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 {StyleString} from './types';\n// import {RuntimeStyleFunction, RenderProps} from './types';\n\n// taken from: https://stackoverflow.com/questions/51603250/typescript-3-parameter-list-intersection-type/51604379#51604379\n// type ArgTypes<T> = T extends (props: infer V) => any ? NullToObject<V> : never;\n// type NullToObject<T> = T extends (null | undefined) ? {} : T;\n// type BoxedTupleTypes<T extends any[]> = { [P in keyof T]: [ArgTypes<T[P]>] }[Exclude<keyof T, keyof any[]>];\n// type BoxedReturnTypes<T extends any[]> = { [P in keyof T]: [InferReturn<T[P]>] }[Exclude<keyof T, keyof any[]>];\n// type UnboxIntersection<T> = T extends { 0: infer U } ? U : never;\n// type Arg<X, R> = RuntimeStyleFunction<X, R> | null | undefined;\n// type NoInfer<T> = [T, void][T extends any ? 0 : 1];\n// type InferReturn<T> = T extends (props: any) => infer R ? NullToObject<R> : never;\n// type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends ((k: infer I) => void) ? I : never;\n// type InferReturnType<T extends any[]> = UnboxIntersection<UnionToIntersection<BoxedReturnTypes<T>>>;\n\n// Two overloads:\n// 1. If a render props type is expected based on the return type, forward that type to all arguments.\n// 2. Otherwise, infer the return type based on the arguments.\n// export function merge<R extends RenderProps<string> = never, X = {}>(...args: Arg<NoInfer<X>, NoInfer<R>>[]): RuntimeStyleFunction<X, R>;\n// export function merge<T extends Arg<any, any>[]>(...args: T): RuntimeStyleFunction<InferReturnType<T>, UnboxIntersection<UnionToIntersection<BoxedTupleTypes<T>>>>;\n// export function merge(...args: any[]): RuntimeStyleFunction<any, any> {\n//   return (props) => {\n//     return mergeStyles(...args.map(f => typeof f === 'function' ? f(props) : null));\n//   };\n// }\n\nexport function mergeStyles(...styles: (StyleString | null | undefined)[]): StyleString {\n  let definedStyles = styles.filter(Boolean) as StyleString[];\n  if (definedStyles.length === 1) {\n    return definedStyles[0];\n  }\n\n  let map = new Map();\n  for (let style of definedStyles) {\n    for (let [k, v] of parse(style)) {\n      map.set(k, v);\n    }\n  }\n  \n  let res = '';\n  for (let value of map.values()) {\n    res += value;\n  }\n  return res as StyleString;\n}\n\nfunction parse(s: string) {\n  let properties = new Map<string, string>();\n  let i = 0;\n  while (i < s.length) {\n    while (i < s.length && s[i] === ' ') {\n      i++;\n    }\n\n    let start = i;\n    readValue(); // property index\n\n    // read conditions (up to the last segment)\n    let condition = i;\n    while (i < s.length && s[i] !== ' ') {\n      readValue();\n    }\n\n    let property = s.slice(start, condition);\n    properties.set(property, (properties.get(property) || '') + ' ' + s.slice(start, i));\n  }\n\n  function readValue() {\n    if (s[i] === '-') {\n      // the beginning and end of arbitrary values are marked with -\n      while (i < s.length && s[i] !== ' ') {\n        i++;\n        if (s[i] === '-') {\n          i++;\n          break;\n        }\n      }\n    } else {\n      while (i < s.length) {\n        if (s[i] === '_') {\n          i++;\n        } else {\n          i++;\n          break;\n        }\n      }\n    }\n  }\n\n  return properties;\n}\n"],"names":[],"version":3,"file":"runtime.cjs.map"}
+{"mappings":";;;;;;AAAA;;;;;;;;;;CAUC,GA4BM,SAAS,0CAAY,GAAG,MAA0C;IACvE,IAAI,gBAAgB,OAAO,MAAM,CAAC;IAClC,IAAI,cAAc,MAAM,KAAK,GAAG;QAC9B,IAAI,QAAQ,aAAa,CAAC,EAAE;QAC5B,IAAI,OAAO,UAAU,UACnB,2FAA2F;QAC3F,+FAA+F;QAC/F,OAAO,AAAC,MAAsB,QAAQ;QAExC,OAAO;IACT;IAEA,IAAI,MAAM,IAAI;IAEd,KAAK,IAAI,SAAS,cAAe;QAC/B,+CAA+C;QAC/C,IAAI,MAAM,MAAM,QAAQ;QAExB,KAAK,IAAI,CAAC,GAAG,EAAE,IAAI,4BAAM,KACvB,IAAI,GAAG,CAAC,GAAG;IAEf;IAEA,IAAI,MAAM;IACV,KAAK,IAAI,SAAS,IAAI,MAAM,GAC1B,OAAO;IAGT,OAAO;AACT;AAEA,SAAS,4BAAM,CAAS;IACtB,IAAI,aAAa,IAAI;IACrB,IAAI,IAAI;IACR,MAAO,IAAI,EAAE,MAAM,CAAE;QACnB,MAAO,IAAI,EAAE,MAAM,IAAI,CAAC,CAAC,EAAE,KAAK,IAC9B;QAGF,IAAI,QAAQ;QACZ,aAAa,iBAAiB;QAE9B,2CAA2C;QAC3C,IAAI,YAAY;QAChB,MAAO,IAAI,EAAE,MAAM,IAAI,CAAC,CAAC,EAAE,KAAK,IAC9B;QAGF,IAAI,WAAW,EAAE,KAAK,CAAC,OAAO;QAC9B,IAAI,QAAQ,GAAG,CAAC,QAAQ,KAAK,gBAAgB,SAAS,UAAU,CAAC,YAAY;YAC3E,IAAI,QAAQ,EAAE,KAAK,CAAC,OAAO;YAC3B,WAAW,GAAG,CAAC,OAAO,MAAM;QAC9B,OACE,WAAW,GAAG,CAAC,UAAU,AAAC,CAAA,WAAW,GAAG,CAAC,aAAa,EAAC,IAAK,MAAM,EAAE,KAAK,CAAC,OAAO;IAErF;IAEA,SAAS;QACP,IAAI,CAAC,CAAC,EAAE,KAAK,KACX,8DAA8D;QAC9D,MAAO,IAAI,EAAE,MAAM,IAAI,CAAC,CAAC,EAAE,KAAK,IAAK;YACnC;YACA,IAAI,CAAC,CAAC,EAAE,KAAK,KAAK;gBAChB;gBACA;YACF;QACF;aACK;YACL,MAAO,IAAI,EAAE,MAAM,CACjB,IAAI,CAAC,CAAC,EAAE,KAAK,KACX;iBACK;gBACL;gBACA;YACF;QAEJ;IACF;IAEA,OAAO;AACT","sources":["packages/@react-spectrum/s2/style/runtime.ts"],"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 {StyleString} from './types';\n// import {RuntimeStyleFunction, RenderProps} from './types';\n\n// taken from: https://stackoverflow.com/questions/51603250/typescript-3-parameter-list-intersection-type/51604379#51604379\n// type ArgTypes<T> = T extends (props: infer V) => any ? NullToObject<V> : never;\n// type NullToObject<T> = T extends (null | undefined) ? {} : T;\n// type BoxedTupleTypes<T extends any[]> = { [P in keyof T]: [ArgTypes<T[P]>] }[Exclude<keyof T, keyof any[]>];\n// type BoxedReturnTypes<T extends any[]> = { [P in keyof T]: [InferReturn<T[P]>] }[Exclude<keyof T, keyof any[]>];\n// type UnboxIntersection<T> = T extends { 0: infer U } ? U : never;\n// type Arg<X, R> = RuntimeStyleFunction<X, R> | null | undefined;\n// type NoInfer<T> = [T, void][T extends any ? 0 : 1];\n// type InferReturn<T> = T extends (props: any) => infer R ? NullToObject<R> : never;\n// type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends ((k: infer I) => void) ? I : never;\n// type InferReturnType<T extends any[]> = UnboxIntersection<UnionToIntersection<BoxedReturnTypes<T>>>;\n\n// Two overloads:\n// 1. If a render props type is expected based on the return type, forward that type to all arguments.\n// 2. Otherwise, infer the return type based on the arguments.\n// export function merge<R extends RenderProps<string> = never, X = {}>(...args: Arg<NoInfer<X>, NoInfer<R>>[]): RuntimeStyleFunction<X, R>;\n// export function merge<T extends Arg<any, any>[]>(...args: T): RuntimeStyleFunction<InferReturnType<T>, UnboxIntersection<UnionToIntersection<BoxedTupleTypes<T>>>>;\n// export function merge(...args: any[]): RuntimeStyleFunction<any, any> {\n//   return (props) => {\n//     return mergeStyles(...args.map(f => typeof f === 'function' ? f(props) : null));\n//   };\n// }\n\nexport function mergeStyles(...styles: (StyleString | null | undefined)[]): StyleString {\n  let definedStyles = styles.filter(Boolean) as StyleString[];\n  if (definedStyles.length === 1) {\n    let first = definedStyles[0];\n    if (typeof first !== 'string') {\n      // static macro has a toString method so that we generate the style macro map for the entry\n      // it's automatically called in other places, but for our merging, we have to call it ourselves\n      return (first as StyleString).toString() as StyleString;\n    }\n    return first;\n  }\n\n  let map = new Map<string, string>();\n\n  for (let style of definedStyles) {\n    // must call toString here for the static macro\n    let str = style.toString();\n\n    for (let [k, v] of parse(str)) {\n      map.set(k, v);\n    }\n  }\n\n  let res = '';\n  for (let value of map.values()) {\n    res += value;\n  }\n\n  return res as StyleString;\n}\n\nfunction parse(s: string) {\n  let properties = new Map<string, string>();\n  let i = 0;\n  while (i < s.length) {\n    while (i < s.length && s[i] === ' ') {\n      i++;\n    }\n\n    let start = i;\n    readValue(); // property index\n\n    // read conditions (up to the last segment)\n    let condition = i;\n    while (i < s.length && s[i] !== ' ') {\n      readValue();\n    }\n\n    let property = s.slice(start, condition);\n    if (process.env.NODE_ENV !== 'production' && property.startsWith('-macro-')) {\n      let value = s.slice(start, i);\n      properties.set(value, ' ' + value);\n    } else {\n      properties.set(property, (properties.get(property) || '') + ' ' + s.slice(start, i));\n    }\n  }\n\n  function readValue() {\n    if (s[i] === '-') {\n      // the beginning and end of arbitrary values are marked with -\n      while (i < s.length && s[i] !== ' ') {\n        i++;\n        if (s[i] === '-') {\n          i++;\n          break;\n        }\n      }\n    } else {\n      while (i < s.length) {\n        if (s[i] === '_') {\n          i++;\n        } else {\n          i++;\n          break;\n        }\n      }\n    }\n  }\n\n  return properties;\n}\n"],"names":[],"version":3,"file":"runtime.cjs.map"}

package/icons/runtime.mjs

@@ -10,9 +10,19 @@
  * governing permissions and limitations under the License.
  */ function $feb886035e0d4633$export$e618dc39ac9ad607(...styles) {
     let definedStyles = styles.filter(Boolean);
-    if (definedStyles.length === 1) return definedStyles[0];
+    if (definedStyles.length === 1) {
+        let first = definedStyles[0];
+        if (typeof first !== 'string') // static macro has a toString method so that we generate the style macro map for the entry
+        // it's automatically called in other places, but for our merging, we have to call it ourselves
+        return first.toString();
+        return first;
+    }
     let map = new Map();
-    for (let style of definedStyles)for (let [k, v] of $feb886035e0d4633$var$parse(style))map.set(k, v);
+    for (let style of definedStyles){
+        // must call toString here for the static macro
+        let str = style.toString();
+        for (let [k, v] of $feb886035e0d4633$var$parse(str))map.set(k, v);
+    }
     let res = '';
     for (let value of map.values())res += value;
     return res;
@@ -28,7 +38,10 @@ function $feb886035e0d4633$var$parse(s) {
         let condition = i;
         while(i < s.length && s[i] !== ' ')readValue();
         let property = s.slice(start, condition);
-        properties.set(property, (properties.get(property) || '') + ' ' + s.slice(start, i));
+        if (process.env.NODE_ENV !== 'production' && property.startsWith('-macro-')) {
+            let value = s.slice(start, i);
+            properties.set(value, ' ' + value);
+        } else properties.set(property, (properties.get(property) || '') + ' ' + s.slice(start, i));
     }
     function readValue() {
         if (s[i] === '-') // the beginning and end of arbitrary values are marked with -

package/icons/runtime.mjs.map

@@ -1 +1 @@
-{"mappings":"AAAA;;;;;;;;;;CAUC,GA4BM,SAAS,0CAAY,GAAG,MAA0C;IACvE,IAAI,gBAAgB,OAAO,MAAM,CAAC;IAClC,IAAI,cAAc,MAAM,KAAK,GAC3B,OAAO,aAAa,CAAC,EAAE;IAGzB,IAAI,MAAM,IAAI;IACd,KAAK,IAAI,SAAS,cAChB,KAAK,IAAI,CAAC,GAAG,EAAE,IAAI,4BAAM,OACvB,IAAI,GAAG,CAAC,GAAG;IAIf,IAAI,MAAM;IACV,KAAK,IAAI,SAAS,IAAI,MAAM,GAC1B,OAAO;IAET,OAAO;AACT;AAEA,SAAS,4BAAM,CAAS;IACtB,IAAI,aAAa,IAAI;IACrB,IAAI,IAAI;IACR,MAAO,IAAI,EAAE,MAAM,CAAE;QACnB,MAAO,IAAI,EAAE,MAAM,IAAI,CAAC,CAAC,EAAE,KAAK,IAC9B;QAGF,IAAI,QAAQ;QACZ,aAAa,iBAAiB;QAE9B,2CAA2C;QAC3C,IAAI,YAAY;QAChB,MAAO,IAAI,EAAE,MAAM,IAAI,CAAC,CAAC,EAAE,KAAK,IAC9B;QAGF,IAAI,WAAW,EAAE,KAAK,CAAC,OAAO;QAC9B,WAAW,GAAG,CAAC,UAAU,AAAC,CAAA,WAAW,GAAG,CAAC,aAAa,EAAC,IAAK,MAAM,EAAE,KAAK,CAAC,OAAO;IACnF;IAEA,SAAS;QACP,IAAI,CAAC,CAAC,EAAE,KAAK,KACX,8DAA8D;QAC9D,MAAO,IAAI,EAAE,MAAM,IAAI,CAAC,CAAC,EAAE,KAAK,IAAK;YACnC;YACA,IAAI,CAAC,CAAC,EAAE,KAAK,KAAK;gBAChB;gBACA;YACF;QACF;aACK;YACL,MAAO,IAAI,EAAE,MAAM,CACjB,IAAI,CAAC,CAAC,EAAE,KAAK,KACX;iBACK;gBACL;gBACA;YACF;QAEJ;IACF;IAEA,OAAO;AACT","sources":["packages/@react-spectrum/s2/style/runtime.ts"],"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 {StyleString} from './types';\n// import {RuntimeStyleFunction, RenderProps} from './types';\n\n// taken from: https://stackoverflow.com/questions/51603250/typescript-3-parameter-list-intersection-type/51604379#51604379\n// type ArgTypes<T> = T extends (props: infer V) => any ? NullToObject<V> : never;\n// type NullToObject<T> = T extends (null | undefined) ? {} : T;\n// type BoxedTupleTypes<T extends any[]> = { [P in keyof T]: [ArgTypes<T[P]>] }[Exclude<keyof T, keyof any[]>];\n// type BoxedReturnTypes<T extends any[]> = { [P in keyof T]: [InferReturn<T[P]>] }[Exclude<keyof T, keyof any[]>];\n// type UnboxIntersection<T> = T extends { 0: infer U } ? U : never;\n// type Arg<X, R> = RuntimeStyleFunction<X, R> | null | undefined;\n// type NoInfer<T> = [T, void][T extends any ? 0 : 1];\n// type InferReturn<T> = T extends (props: any) => infer R ? NullToObject<R> : never;\n// type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends ((k: infer I) => void) ? I : never;\n// type InferReturnType<T extends any[]> = UnboxIntersection<UnionToIntersection<BoxedReturnTypes<T>>>;\n\n// Two overloads:\n// 1. If a render props type is expected based on the return type, forward that type to all arguments.\n// 2. Otherwise, infer the return type based on the arguments.\n// export function merge<R extends RenderProps<string> = never, X = {}>(...args: Arg<NoInfer<X>, NoInfer<R>>[]): RuntimeStyleFunction<X, R>;\n// export function merge<T extends Arg<any, any>[]>(...args: T): RuntimeStyleFunction<InferReturnType<T>, UnboxIntersection<UnionToIntersection<BoxedTupleTypes<T>>>>;\n// export function merge(...args: any[]): RuntimeStyleFunction<any, any> {\n//   return (props) => {\n//     return mergeStyles(...args.map(f => typeof f === 'function' ? f(props) : null));\n//   };\n// }\n\nexport function mergeStyles(...styles: (StyleString | null | undefined)[]): StyleString {\n  let definedStyles = styles.filter(Boolean) as StyleString[];\n  if (definedStyles.length === 1) {\n    return definedStyles[0];\n  }\n\n  let map = new Map();\n  for (let style of definedStyles) {\n    for (let [k, v] of parse(style)) {\n      map.set(k, v);\n    }\n  }\n  \n  let res = '';\n  for (let value of map.values()) {\n    res += value;\n  }\n  return res as StyleString;\n}\n\nfunction parse(s: string) {\n  let properties = new Map<string, string>();\n  let i = 0;\n  while (i < s.length) {\n    while (i < s.length && s[i] === ' ') {\n      i++;\n    }\n\n    let start = i;\n    readValue(); // property index\n\n    // read conditions (up to the last segment)\n    let condition = i;\n    while (i < s.length && s[i] !== ' ') {\n      readValue();\n    }\n\n    let property = s.slice(start, condition);\n    properties.set(property, (properties.get(property) || '') + ' ' + s.slice(start, i));\n  }\n\n  function readValue() {\n    if (s[i] === '-') {\n      // the beginning and end of arbitrary values are marked with -\n      while (i < s.length && s[i] !== ' ') {\n        i++;\n        if (s[i] === '-') {\n          i++;\n          break;\n        }\n      }\n    } else {\n      while (i < s.length) {\n        if (s[i] === '_') {\n          i++;\n        } else {\n          i++;\n          break;\n        }\n      }\n    }\n  }\n\n  return properties;\n}\n"],"names":[],"version":3,"file":"runtime.mjs.map"}
+{"mappings":"AAAA;;;;;;;;;;CAUC,GA4BM,SAAS,0CAAY,GAAG,MAA0C;IACvE,IAAI,gBAAgB,OAAO,MAAM,CAAC;IAClC,IAAI,cAAc,MAAM,KAAK,GAAG;QAC9B,IAAI,QAAQ,aAAa,CAAC,EAAE;QAC5B,IAAI,OAAO,UAAU,UACnB,2FAA2F;QAC3F,+FAA+F;QAC/F,OAAO,AAAC,MAAsB,QAAQ;QAExC,OAAO;IACT;IAEA,IAAI,MAAM,IAAI;IAEd,KAAK,IAAI,SAAS,cAAe;QAC/B,+CAA+C;QAC/C,IAAI,MAAM,MAAM,QAAQ;QAExB,KAAK,IAAI,CAAC,GAAG,EAAE,IAAI,4BAAM,KACvB,IAAI,GAAG,CAAC,GAAG;IAEf;IAEA,IAAI,MAAM;IACV,KAAK,IAAI,SAAS,IAAI,MAAM,GAC1B,OAAO;IAGT,OAAO;AACT;AAEA,SAAS,4BAAM,CAAS;IACtB,IAAI,aAAa,IAAI;IACrB,IAAI,IAAI;IACR,MAAO,IAAI,EAAE,MAAM,CAAE;QACnB,MAAO,IAAI,EAAE,MAAM,IAAI,CAAC,CAAC,EAAE,KAAK,IAC9B;QAGF,IAAI,QAAQ;QACZ,aAAa,iBAAiB;QAE9B,2CAA2C;QAC3C,IAAI,YAAY;QAChB,MAAO,IAAI,EAAE,MAAM,IAAI,CAAC,CAAC,EAAE,KAAK,IAC9B;QAGF,IAAI,WAAW,EAAE,KAAK,CAAC,OAAO;QAC9B,IAAI,QAAQ,GAAG,CAAC,QAAQ,KAAK,gBAAgB,SAAS,UAAU,CAAC,YAAY;YAC3E,IAAI,QAAQ,EAAE,KAAK,CAAC,OAAO;YAC3B,WAAW,GAAG,CAAC,OAAO,MAAM;QAC9B,OACE,WAAW,GAAG,CAAC,UAAU,AAAC,CAAA,WAAW,GAAG,CAAC,aAAa,EAAC,IAAK,MAAM,EAAE,KAAK,CAAC,OAAO;IAErF;IAEA,SAAS;QACP,IAAI,CAAC,CAAC,EAAE,KAAK,KACX,8DAA8D;QAC9D,MAAO,IAAI,EAAE,MAAM,IAAI,CAAC,CAAC,EAAE,KAAK,IAAK;YACnC;YACA,IAAI,CAAC,CAAC,EAAE,KAAK,KAAK;gBAChB;gBACA;YACF;QACF;aACK;YACL,MAAO,IAAI,EAAE,MAAM,CACjB,IAAI,CAAC,CAAC,EAAE,KAAK,KACX;iBACK;gBACL;gBACA;YACF;QAEJ;IACF;IAEA,OAAO;AACT","sources":["packages/@react-spectrum/s2/style/runtime.ts"],"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 {StyleString} from './types';\n// import {RuntimeStyleFunction, RenderProps} from './types';\n\n// taken from: https://stackoverflow.com/questions/51603250/typescript-3-parameter-list-intersection-type/51604379#51604379\n// type ArgTypes<T> = T extends (props: infer V) => any ? NullToObject<V> : never;\n// type NullToObject<T> = T extends (null | undefined) ? {} : T;\n// type BoxedTupleTypes<T extends any[]> = { [P in keyof T]: [ArgTypes<T[P]>] }[Exclude<keyof T, keyof any[]>];\n// type BoxedReturnTypes<T extends any[]> = { [P in keyof T]: [InferReturn<T[P]>] }[Exclude<keyof T, keyof any[]>];\n// type UnboxIntersection<T> = T extends { 0: infer U } ? U : never;\n// type Arg<X, R> = RuntimeStyleFunction<X, R> | null | undefined;\n// type NoInfer<T> = [T, void][T extends any ? 0 : 1];\n// type InferReturn<T> = T extends (props: any) => infer R ? NullToObject<R> : never;\n// type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends ((k: infer I) => void) ? I : never;\n// type InferReturnType<T extends any[]> = UnboxIntersection<UnionToIntersection<BoxedReturnTypes<T>>>;\n\n// Two overloads:\n// 1. If a render props type is expected based on the return type, forward that type to all arguments.\n// 2. Otherwise, infer the return type based on the arguments.\n// export function merge<R extends RenderProps<string> = never, X = {}>(...args: Arg<NoInfer<X>, NoInfer<R>>[]): RuntimeStyleFunction<X, R>;\n// export function merge<T extends Arg<any, any>[]>(...args: T): RuntimeStyleFunction<InferReturnType<T>, UnboxIntersection<UnionToIntersection<BoxedTupleTypes<T>>>>;\n// export function merge(...args: any[]): RuntimeStyleFunction<any, any> {\n//   return (props) => {\n//     return mergeStyles(...args.map(f => typeof f === 'function' ? f(props) : null));\n//   };\n// }\n\nexport function mergeStyles(...styles: (StyleString | null | undefined)[]): StyleString {\n  let definedStyles = styles.filter(Boolean) as StyleString[];\n  if (definedStyles.length === 1) {\n    let first = definedStyles[0];\n    if (typeof first !== 'string') {\n      // static macro has a toString method so that we generate the style macro map for the entry\n      // it's automatically called in other places, but for our merging, we have to call it ourselves\n      return (first as StyleString).toString() as StyleString;\n    }\n    return first;\n  }\n\n  let map = new Map<string, string>();\n\n  for (let style of definedStyles) {\n    // must call toString here for the static macro\n    let str = style.toString();\n\n    for (let [k, v] of parse(str)) {\n      map.set(k, v);\n    }\n  }\n\n  let res = '';\n  for (let value of map.values()) {\n    res += value;\n  }\n\n  return res as StyleString;\n}\n\nfunction parse(s: string) {\n  let properties = new Map<string, string>();\n  let i = 0;\n  while (i < s.length) {\n    while (i < s.length && s[i] === ' ') {\n      i++;\n    }\n\n    let start = i;\n    readValue(); // property index\n\n    // read conditions (up to the last segment)\n    let condition = i;\n    while (i < s.length && s[i] !== ' ') {\n      readValue();\n    }\n\n    let property = s.slice(start, condition);\n    if (process.env.NODE_ENV !== 'production' && property.startsWith('-macro-')) {\n      let value = s.slice(start, i);\n      properties.set(value, ' ' + value);\n    } else {\n      properties.set(property, (properties.get(property) || '') + ' ' + s.slice(start, i));\n    }\n  }\n\n  function readValue() {\n    if (s[i] === '-') {\n      // the beginning and end of arbitrary values are marked with -\n      while (i < s.length && s[i] !== ' ') {\n        i++;\n        if (s[i] === '-') {\n          i++;\n          break;\n        }\n      }\n    } else {\n      while (i < s.length) {\n        if (s[i] === '_') {\n          i++;\n        } else {\n          i++;\n          break;\n        }\n      }\n    }\n  }\n\n  return properties;\n}\n"],"names":[],"version":3,"file":"runtime.mjs.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-spectrum/s2",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "Spectrum 2 UI components in React",
   "license": "Apache-2.0",
   "repository": {
@@ -77,30 +77,30 @@
     "src"
   ],
   "dependencies": {
-    "@internationalized/date": "^3.10.1",
+    "@internationalized/date": "^3.12.0",
     "@internationalized/number": "^3.6.5",
     "@parcel/macros": "^2.16.3",
-    "@react-aria/calendar": "^3.9.3",
-    "@react-aria/collections": "^3.0.1",
-    "@react-aria/focus": "^3.21.3",
-    "@react-aria/i18n": "^3.12.14",
-    "@react-aria/interactions": "^3.26.0",
+    "@react-aria/calendar": "^3.9.5",
+    "@react-aria/collections": "^3.0.3",
+    "@react-aria/focus": "^3.21.5",
+    "@react-aria/i18n": "^3.12.16",
+    "@react-aria/interactions": "^3.27.1",
     "@react-aria/live-announcer": "^3.4.4",
-    "@react-aria/utils": "^3.32.0",
-    "@react-spectrum/utils": "^3.12.10",
-    "@react-stately/layout": "^4.5.2",
+    "@react-aria/utils": "^3.33.1",
+    "@react-spectrum/utils": "^3.12.12",
+    "@react-stately/layout": "^4.6.0",
     "@react-stately/utils": "^3.11.0",
-    "@react-types/dialog": "^3.5.22",
-    "@react-types/grid": "^3.3.6",
-    "@react-types/overlays": "^3.9.2",
-    "@react-types/provider": "^3.8.13",
-    "@react-types/shared": "^3.32.1",
-    "@react-types/table": "^3.13.4",
-    "@react-types/textfield": "^3.12.6",
+    "@react-types/dialog": "^3.5.24",
+    "@react-types/grid": "^3.3.8",
+    "@react-types/overlays": "^3.9.4",
+    "@react-types/provider": "^3.8.15",
+    "@react-types/shared": "^3.33.1",
+    "@react-types/table": "^3.13.6",
+    "@react-types/textfield": "^3.12.8",
     "csstype": "^3.0.2",
-    "react-aria": "^3.45.0",
-    "react-aria-components": "^1.14.0",
-    "react-stately": "^3.43.0"
+    "react-aria": "^3.47.0",
+    "react-aria-components": "^1.16.0",
+    "react-stately": "^3.45.0"
   },
   "peerDependencies": {
     "react": "^19.0.0-rc.1",
@@ -109,5 +109,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4d838da5bfe36abb35aed166995a9ef63825370f"
+  "gitHead": "8df187370053aa35f553cb388ad670f65e1ab371"
 }

package/src/Accordion.tsx

@@ -122,7 +122,7 @@ export interface AccordionItemRenderProps {
   state: AccordionItemState
 }
 
-export interface AccordionItemProps extends Omit<RenderProps<AccordionItemRenderProps>, 'className' | 'style'>, SlotProps, StyleProps {
+export interface AccordionItemProps extends Omit<RenderProps<AccordionItemRenderProps>, 'className' | 'style' | 'render'>, SlotProps, StyleProps {
   /**
    * The size of the accordion item.
    * @default 'M'

package/src/ActionBar.tsx

@@ -161,8 +161,8 @@ const ActionBarInner = forwardRef(function ActionBarInner(props: ActionBarProps
         ref={objectRef}
         {...otherProps}
         {...keyboardProps}
-        className={actionBarStyles({isEmphasized, isInContainer: !!scrollRef, isEntering, isExiting})}
-        style={{insetInlineEnd: `calc(var(--insetEnd) + ${scrollbarWidth}px)`}}>
+        className={(props.UNSAFE_className || '') + actionBarStyles({isEmphasized, isInContainer: !!scrollRef, isEntering, isExiting})}
+        style={{insetInlineEnd: `calc(var(--insetEnd) + ${scrollbarWidth}px)`, ...props.UNSAFE_style}}>
         <div className={style({order: 1, marginStart: 'auto'})}>
           <ActionButtonGroup
             staticColor={isEmphasized ? 'auto' : undefined}

package/src/ActionButton.tsx

@@ -59,7 +59,7 @@ interface ActionGroupItemStyleProps {
   isJustified?: boolean
 }
 
-export interface ActionButtonProps extends Omit<ButtonProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'onClick' | keyof GlobalDOMAttributes>, StyleProps, ActionButtonStyleProps {
+export interface ActionButtonProps extends Omit<ButtonProps, 'className' | 'style' | 'render' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'onClick' | keyof GlobalDOMAttributes>, StyleProps, ActionButtonStyleProps {
   /** The content to display in the ActionButton. */
   children: ReactNode
 }

package/src/Breadcrumbs.tsx

@@ -63,7 +63,7 @@ interface BreadcrumbsStyleProps {
   // TODO: showRoot?: boolean,
 }
 
-export interface BreadcrumbsProps<T> extends Omit<AriaBreadcrumbsProps<T>, 'children' | 'style' | 'className' | keyof GlobalDOMAttributes>, BreadcrumbsStyleProps, StyleProps {
+export interface BreadcrumbsProps<T> extends Omit<AriaBreadcrumbsProps<T>, 'children' | 'style' | 'className' | 'render' | keyof GlobalDOMAttributes>, BreadcrumbsStyleProps, StyleProps {
   /** The children of the Breadcrumbs. */
   children: ReactNode | ((item: T) => ReactNode)
 }
@@ -296,7 +296,7 @@ const heading = style({
   fontWeight: 'extra-bold'
 });
 
-export interface BreadcrumbProps extends Omit<AriaBreadcrumbItemProps, 'children' | 'style' | 'className' | 'autoFocus' | 'onClick' | keyof GlobalDOMAttributes>, LinkDOMProps {
+export interface BreadcrumbProps extends Omit<AriaBreadcrumbItemProps, 'children' | 'style' | 'className' | 'render' | 'autoFocus' | 'onClick' | keyof GlobalDOMAttributes>, LinkDOMProps {
   /** The children of the breadcrumb item. */
   children: ReactNode
 }

package/src/Button.tsx

@@ -52,12 +52,12 @@ interface ButtonStyleProps {
   staticColor?: 'white' | 'black' | 'auto'
 }
 
-export interface ButtonProps extends Omit<RACButtonProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'onClick' | keyof GlobalDOMAttributes>, StyleProps, ButtonStyleProps {
+export interface ButtonProps extends Omit<RACButtonProps, 'className' | 'style' | 'render' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'onClick' | keyof GlobalDOMAttributes>, StyleProps, ButtonStyleProps {
   /** The content to display in the Button. */
   children: ReactNode
 }
 
-export interface LinkButtonProps extends Omit<LinkProps, 'className' | 'style' | 'children' | 'onClick' | keyof GlobalDOMAttributes>, StyleProps, ButtonStyleProps {
+export interface LinkButtonProps extends Omit<LinkProps, 'className' | 'style' | 'render' | 'children' | 'onClick' | keyof GlobalDOMAttributes>, StyleProps, ButtonStyleProps {
   /** The content to display in the Button. */
   children: ReactNode
 }

package/src/Calendar.tsx

@@ -55,7 +55,7 @@ import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 
 export interface CalendarProps<T extends DateValue>
-  extends Omit<AriaCalendarProps<T>, 'visibleDuration' | 'style' | 'className' | 'styles' | 'children' | keyof GlobalDOMAttributes>,
+  extends Omit<AriaCalendarProps<T>, 'visibleDuration' | 'style' | 'className' | 'render' | 'styles' | 'children' | keyof GlobalDOMAttributes>,
   StyleProps {
   /**
    * The error message to display when the calendar is invalid.

package/src/Card.tsx

@@ -36,7 +36,7 @@ interface CardRenderProps {
   size: 'XS' | 'S' | 'M' | 'L' | 'XL'
 }
 
-export interface CardProps extends Omit<GridListItemProps, 'className' | 'style' | 'children' | 'onHoverChange' | 'onHoverStart' | 'onHoverEnd' | 'onClick' | keyof GlobalDOMAttributes>, StyleProps {
+export interface CardProps extends Omit<GridListItemProps, 'className' | 'style' | 'render' | 'children' | 'onHoverChange' | 'onHoverStart' | 'onHoverEnd' | 'onClick' | keyof GlobalDOMAttributes>, StyleProps {
   /** The children of the Card. */
   children: ReactNode | ((renderProps: CardRenderProps) => ReactNode),
   /**

package/src/CardView.tsx

@@ -34,7 +34,7 @@ import {useDOMRef} from '@react-spectrum/utils';
 import {useEffectEvent, useLayoutEffect, useResizeObserver} from '@react-aria/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface CardViewProps<T> extends Omit<GridListProps<T>, 'layout' | 'keyboardNavigationBehavior' | 'selectionBehavior' | 'className' | 'style' | 'isLoading' | keyof GlobalDOMAttributes>, UnsafeStyles {
+export interface CardViewProps<T> extends Omit<GridListProps<T>, 'layout' | 'keyboardNavigationBehavior' | 'selectionBehavior' | 'className' | 'style' | 'render' | 'isLoading' | keyof GlobalDOMAttributes>, UnsafeStyles {
   /**
    * The layout of the cards.
    * @default 'grid'