@react-spectrum/s2 1.5.0 → 1.5.1

package/dist/private/dnd-utils.cjs

@@ -31,22 +31,22 @@ $parcel$export(module.exports, "DragHandleButton", () => $f1f08ef5de95f8eb$expor
 
 let $f1f08ef5de95f8eb$var$insertionIndicatorWrapper = function anonymous(props) {
     let rules = " ";
-    rules += ' _Pa15';
-    rules += ' Wr15';
-    rules += ' _lr15';
-    rules += ' _Ar15';
-    rules += ' _zr15';
-    rules += ' sd15';
-    rules += ' eb15';
-    if (props.isRoot) rules += ' Iy15';
-    else rules += ' IyEbn5c15';
-    if (props.isDropTarget) rules += ' poPoFpe15';
-    else rules += ' pw15';
-    if (props.isDropTarget) rules += ' pld15';
-    if (props.isDropTarget) rules += ' -_3xYcJd-gX15';
-    else rules += ' -_3xYcJd-g915';
-    if (props.isDropTarget) rules += ' -_3xYcJd-lga15';
-    rules += ' _yb15';
+    rules += ' _Pa151';
+    rules += ' Wr151';
+    rules += ' _lr151';
+    rules += ' _Ar151';
+    rules += ' _zr151';
+    rules += ' sd151';
+    rules += ' eb151';
+    if (props.isRoot) rules += ' Iy151';
+    else rules += ' IyEbn5c151';
+    if (props.isDropTarget) rules += ' poPoFpe151';
+    else rules += ' pw151';
+    if (props.isDropTarget) rules += ' pld151';
+    if (props.isDropTarget) rules += ' -_3xYcJd-gX151';
+    else rules += ' -_3xYcJd-g9151';
+    if (props.isDropTarget) rules += ' -_3xYcJd-lga151';
+    rules += ' _yb151';
     return rules;
 };
 function $f1f08ef5de95f8eb$export$2c0bab5914a9d088({ target: target }) {
@@ -105,32 +105,32 @@ function $f1f08ef5de95f8eb$export$2c0bab5914a9d088({ target: target }) {
 }
 let $f1f08ef5de95f8eb$var$dragButton = function anonymous(props) {
     let rules = " ";
-    rules += ' p40ub4c15';
-    rules += ' sd15';
-    rules += ' eb15';
-    rules += ' _Ca15';
-    rules += ' Fo15';
-    rules += ' Zi15';
-    rules += ' Td15';
-    rules += ' Qd15';
-    rules += ' Sd15';
-    rules += ' Rd15';
-    rules += ' Jy15';
-    rules += ' Gy15';
-    rules += ' Iy15';
-    rules += ' Hy15';
-    rules += ' g915';
-    rules += ' _je15';
-    rules += ' oa15';
-    rules += ' na15';
-    rules += ' ka15';
-    rules += ' ja15';
-    if (props.isFocusVisible) rules += ' _Lf15';
-    else rules += ' _Le15';
-    rules += ' Oh15';
-    rules += ' Olc15';
-    rules += ' _Mc15';
-    rules += ' -_8sjo0b-t5ZbAob15';
+    rules += ' p40ub4c151';
+    rules += ' sd151';
+    rules += ' eb151';
+    rules += ' _Ca151';
+    rules += ' Fo151';
+    rules += ' Zi151';
+    rules += ' Td151';
+    rules += ' Qd151';
+    rules += ' Sd151';
+    rules += ' Rd151';
+    rules += ' Jy151';
+    rules += ' Gy151';
+    rules += ' Iy151';
+    rules += ' Hy151';
+    rules += ' g9151';
+    rules += ' _je151';
+    rules += ' oa151';
+    rules += ' na151';
+    rules += ' ka151';
+    rules += ' ja151';
+    if (props.isFocusVisible) rules += ' _Lf151';
+    else rules += ' _Le151';
+    rules += ' Oh151';
+    rules += ' Olc151';
+    rules += ' _Mc151';
+    rules += ' -_8sjo0b-t5ZbAob151';
     return rules;
 };
 function $f1f08ef5de95f8eb$export$4c99a519d851f90c({ isFocusVisibleWithin: isFocusVisibleWithin }) {

package/dist/private/dnd-utils.css

@@ -1,145 +1,145 @@
 @layer _.a {
-  ._Pa15 {
+  ._Pa151 {
     position: absolute;
   }
 
-  .Wr15 {
+  .Wr151 {
     top: 0;
   }
 
-  ._lr15 {
+  ._lr151 {
     bottom: 0;
   }
 
-  ._Ar15 {
+  ._Ar151 {
     inset-inline-start: 0;
   }
 
-  ._zr15 {
+  ._zr151 {
     inset-inline-end: 0;
   }
 
-  .IyEbn5c15 {
+  .IyEbn5c151 {
     margin-inline-start: calc((var(--drop-level, 1) - 1) * var(--indent) + var(--indicator-level-padding));
   }
 
-  .pw15 {
+  .pw151 {
     color: #0000;
   }
 
-  .poPoFpe15 {
+  .poPoFpe151 {
     color: light-dark(#4b75ff, #4069fd);
   }
 
-  .-_3xYcJd-g915 {
+  .-_3xYcJd-g9151 {
     --indicator-circle-bg: transparent;
   }
 
-  .-_3xYcJd-gX15 {
+  .-_3xYcJd-gX151 {
     --indicator-circle-bg: light-dark(#fff, #111);
   }
 
-  ._yb15 {
+  ._yb151 {
     forced-color-adjust: none;
   }
 
-  .p40ub4c15 {
+  .p40ub4c151 {
     color: inherit;
   }
 
-  .sd15 {
+  .sd151 {
     display: flex;
   }
 
-  .eb15 {
+  .eb151 {
     align-items: center;
   }
 
-  ._Ca15 {
+  ._Ca151 {
     justify-content: center;
   }
 
-  .Fo15 {
+  .Fo151 {
     height: calc(1.375rem * var(--s2-scale));
   }
 
-  .Zi15 {
+  .Zi151 {
     width: calc(.625rem * var(--s2-scale));
   }
 
-  .Td15 {
+  .Td151 {
     padding-top: 0;
   }
 
-  .Qd15 {
+  .Qd151 {
     padding-bottom: 0;
   }
 
-  .Sd15 {
+  .Sd151 {
     padding-inline-start: 0;
   }
 
-  .Rd15 {
+  .Rd151 {
     padding-inline-end: 0;
   }
 
-  .Jy15 {
+  .Jy151 {
     margin-top: 0;
   }
 
-  .Gy15 {
+  .Gy151 {
     margin-bottom: 0;
   }
 
-  .Iy15 {
+  .Iy151 {
     margin-inline-start: 0;
   }
 
-  .Hy15 {
+  .Hy151 {
     margin-inline-end: 0;
   }
 
-  .g915 {
+  .g9151 {
     background-color: #0000;
   }
 
-  ._je15 {
+  ._je151 {
     border-style: none;
   }
 
-  .oa15 {
+  .oa151 {
     border-start-start-radius: .25rem;
   }
 
-  .na15 {
+  .na151 {
     border-start-end-radius: .25rem;
   }
 
-  .ka15 {
+  .ka151 {
     border-end-start-radius: .25rem;
   }
 
-  .ja15 {
+  .ja151 {
     border-end-end-radius: .25rem;
   }
 
-  ._Le15 {
+  ._Le151 {
     outline-style: none;
   }
 
-  ._Lf15 {
+  ._Lf151 {
     outline-style: solid;
   }
 
-  .Oh15 {
+  .Oh151 {
     outline-color: light-dark(#4b75ff, #4069fd);
   }
 
-  ._Mc15 {
+  ._Mc151 {
     outline-width: 2px;
   }
 
-  .-_8sjo0b-t5ZbAob15 {
+  .-_8sjo0b-t5ZbAob151 {
     --iconPrimary: currentColor;
   }
 }
@@ -148,15 +148,15 @@
 
 @layer _.b.l {
   @media (forced-colors: active) {
-    .pld15 {
+    .pld151 {
       color: highlight;
     }
 
-    .-_3xYcJd-lga15 {
+    .-_3xYcJd-lga151 {
       --indicator-circle-bg: Background;
     }
 
-    .Olc15 {
+    .Olc151 {
       outline-color: highlight;
     }
   }

package/dist/private/dnd-utils.mjs

@@ -24,22 +24,22 @@ import {useVisuallyHidden as $7m476$useVisuallyHidden} from "react-aria/Visually
 
 let $3c1ab1fd8f31a3e2$var$insertionIndicatorWrapper = function anonymous(props) {
     let rules = " ";
-    rules += ' _Pa15';
-    rules += ' Wr15';
-    rules += ' _lr15';
-    rules += ' _Ar15';
-    rules += ' _zr15';
-    rules += ' sd15';
-    rules += ' eb15';
-    if (props.isRoot) rules += ' Iy15';
-    else rules += ' IyEbn5c15';
-    if (props.isDropTarget) rules += ' poPoFpe15';
-    else rules += ' pw15';
-    if (props.isDropTarget) rules += ' pld15';
-    if (props.isDropTarget) rules += ' -_3xYcJd-gX15';
-    else rules += ' -_3xYcJd-g915';
-    if (props.isDropTarget) rules += ' -_3xYcJd-lga15';
-    rules += ' _yb15';
+    rules += ' _Pa151';
+    rules += ' Wr151';
+    rules += ' _lr151';
+    rules += ' _Ar151';
+    rules += ' _zr151';
+    rules += ' sd151';
+    rules += ' eb151';
+    if (props.isRoot) rules += ' Iy151';
+    else rules += ' IyEbn5c151';
+    if (props.isDropTarget) rules += ' poPoFpe151';
+    else rules += ' pw151';
+    if (props.isDropTarget) rules += ' pld151';
+    if (props.isDropTarget) rules += ' -_3xYcJd-gX151';
+    else rules += ' -_3xYcJd-g9151';
+    if (props.isDropTarget) rules += ' -_3xYcJd-lga151';
+    rules += ' _yb151';
     return rules;
 };
 function $3c1ab1fd8f31a3e2$export$2c0bab5914a9d088({ target: target }) {
@@ -98,32 +98,32 @@ function $3c1ab1fd8f31a3e2$export$2c0bab5914a9d088({ target: target }) {
 }
 let $3c1ab1fd8f31a3e2$var$dragButton = function anonymous(props) {
     let rules = " ";
-    rules += ' p40ub4c15';
-    rules += ' sd15';
-    rules += ' eb15';
-    rules += ' _Ca15';
-    rules += ' Fo15';
-    rules += ' Zi15';
-    rules += ' Td15';
-    rules += ' Qd15';
-    rules += ' Sd15';
-    rules += ' Rd15';
-    rules += ' Jy15';
-    rules += ' Gy15';
-    rules += ' Iy15';
-    rules += ' Hy15';
-    rules += ' g915';
-    rules += ' _je15';
-    rules += ' oa15';
-    rules += ' na15';
-    rules += ' ka15';
-    rules += ' ja15';
-    if (props.isFocusVisible) rules += ' _Lf15';
-    else rules += ' _Le15';
-    rules += ' Oh15';
-    rules += ' Olc15';
-    rules += ' _Mc15';
-    rules += ' -_8sjo0b-t5ZbAob15';
+    rules += ' p40ub4c151';
+    rules += ' sd151';
+    rules += ' eb151';
+    rules += ' _Ca151';
+    rules += ' Fo151';
+    rules += ' Zi151';
+    rules += ' Td151';
+    rules += ' Qd151';
+    rules += ' Sd151';
+    rules += ' Rd151';
+    rules += ' Jy151';
+    rules += ' Gy151';
+    rules += ' Iy151';
+    rules += ' Hy151';
+    rules += ' g9151';
+    rules += ' _je151';
+    rules += ' oa151';
+    rules += ' na151';
+    rules += ' ka151';
+    rules += ' ja151';
+    if (props.isFocusVisible) rules += ' _Lf151';
+    else rules += ' _Le151';
+    rules += ' Oh151';
+    rules += ' Olc151';
+    rules += ' _Mc151';
+    rules += ' -_8sjo0b-t5ZbAob151';
     return rules;
 };
 function $3c1ab1fd8f31a3e2$export$4c99a519d851f90c({ isFocusVisibleWithin: isFocusVisibleWithin }) {

package/icons/Icon.cjs

@@ -71,9 +71,9 @@ const $bde97c91243ed164$var$iconStyles = function anonymous(props, overrides) {
         if (p[1] === "F") height = true;
         rules += p[0];
     }
-    if (!width) rules += ' Zm15';
-    if (!height) rules += ' Fn15';
-    rules += ' _va15';
+    if (!width) rules += ' Zm151';
+    if (!height) rules += ' Fn151';
+    rules += ' _va151';
     return rules;
 };
 function $bde97c91243ed164$export$274edc73af1ae9c8(Component, context = $bde97c91243ed164$export$a49f528ae1a4d0ed) {
@@ -114,20 +114,20 @@ const $bde97c91243ed164$var$illustrationStyles = function anonymous(props, overr
         rules += p[0];
     }
     if (props.size === "L") {
-        if (!width) rules += ' Zq15';
+        if (!width) rules += ' Zq151';
     } else if (props.size === "M") {
-        if (!width) rules += ' ZH15';
+        if (!width) rules += ' ZH151';
     } else if (props.size === "S") {
-        if (!width) rules += ' ZF15';
+        if (!width) rules += ' ZF151';
     }
     if (props.size === "L") {
-        if (!height) rules += ' Fr15';
+        if (!height) rules += ' Fr151';
     } else if (props.size === "M") {
-        if (!height) rules += ' FB15';
+        if (!height) rules += ' FB151';
     } else if (props.size === "S") {
-        if (!height) rules += ' Fz15';
+        if (!height) rules += ' Fz151';
     }
-    rules += ' _va15';
+    rules += ' _va151';
     return rules;
 };
 function $bde97c91243ed164$export$4d00e7be716a0093(Component) {

package/icons/Icon.css

@@ -1,37 +1,37 @@
 @layer _.a {
-  .Zm15 {
+  .Zm151 {
     width: calc(1.25rem * var(--s2-scale));
   }
 
-  .Fn15 {
+  .Fn151 {
     height: calc(1.25rem * var(--s2-scale));
   }
 
-  .ZF15 {
+  .ZF151 {
     width: calc(3rem * var(--s2-scale));
   }
 
-  .ZH15 {
+  .ZH151 {
     width: calc(6rem * var(--s2-scale));
   }
 
-  .Zq15 {
+  .Zq151 {
     width: calc(10rem * var(--s2-scale));
   }
 
-  .Fz15 {
+  .Fz151 {
     height: calc(3rem * var(--s2-scale));
   }
 
-  .FB15 {
+  .FB151 {
     height: calc(6rem * var(--s2-scale));
   }
 
-  .Fr15 {
+  .Fr151 {
     height: calc(10rem * var(--s2-scale));
   }
 
-  ._va15 {
+  ._va151 {
     flex-shrink: 0;
   }
 }

package/icons/Icon.mjs

@@ -62,9 +62,9 @@ const $ac8c32e6775ddd1f$var$iconStyles = function anonymous(props, overrides) {
         if (p[1] === "F") height = true;
         rules += p[0];
     }
-    if (!width) rules += ' Zm15';
-    if (!height) rules += ' Fn15';
-    rules += ' _va15';
+    if (!width) rules += ' Zm151';
+    if (!height) rules += ' Fn151';
+    rules += ' _va151';
     return rules;
 };
 function $ac8c32e6775ddd1f$export$274edc73af1ae9c8(Component, context = $ac8c32e6775ddd1f$export$a49f528ae1a4d0ed) {
@@ -105,20 +105,20 @@ const $ac8c32e6775ddd1f$var$illustrationStyles = function anonymous(props, overr
         rules += p[0];
     }
     if (props.size === "L") {
-        if (!width) rules += ' Zq15';
+        if (!width) rules += ' Zq151';
     } else if (props.size === "M") {
-        if (!width) rules += ' ZH15';
+        if (!width) rules += ' ZH151';
     } else if (props.size === "S") {
-        if (!width) rules += ' ZF15';
+        if (!width) rules += ' ZF151';
     }
     if (props.size === "L") {
-        if (!height) rules += ' Fr15';
+        if (!height) rules += ' Fr151';
     } else if (props.size === "M") {
-        if (!height) rules += ' FB15';
+        if (!height) rules += ' FB151';
     } else if (props.size === "S") {
-        if (!height) rules += ' Fz15';
+        if (!height) rules += ' Fz151';
     }
-    rules += ' _va15';
+    rules += ' _va151';
     return rules;
 };
 function $ac8c32e6775ddd1f$export$4d00e7be716a0093(Component) {

package/icons/Skeleton.cjs

@@ -99,7 +99,7 @@ function $5eb75e0c130e0669$export$cb6ddd830302c2a8({ children: children }) {
         // @ts-ignore - compatibility with React < 19
         inert: (0, $lzdFu$reactariaprivateutilsinertValue.inertValue)(true),
         ref: $5eb75e0c130e0669$export$6b288fe07640c94c(true),
-        className: $5eb75e0c130e0669$export$d2353276f167b21f + " pw15 _ma15 oa15 na15 ka15 ja15",
+        className: $5eb75e0c130e0669$export$d2353276f167b21f + " pw151 _ma151 oa151 na151 ka151 ja151",
         children: children
     });
 }
@@ -120,7 +120,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)(" oa15 na15 ka15 ja15", styles);
+    if (isSkeleton) return (0, $308b180f49d82d28$exports.mergeStyles)(" oa151 na151 ka151 ja151", styles);
     return styles || '';
 }
 

package/icons/Skeleton.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAqBM,SAAS,0CAAoB,WAAoB;IACtD,IAAI,eAAe,CAAA,GAAA,mBAAK,EAAoB;IAC5C,IAAI,eAAe,CAAA,GAAA,uCAAY,EAAE;IACjC,OAAO,CAAA,GAAA,wBAAU,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,0BAAY,EAAkB;AACtD,SAAS;IACd,OAAO,CAAA,GAAA,uBAAS,EAAE,8CAAoB;AACxC;AAUO,SAAS,0CAAS,YAAC,QAAQ,aAAE,SAAS,EAAgB;IAC3D,iDAAiD;IACjD,qBAAO,gCAAC,0CAAgB,QAAQ;QAAC,OAAO;kBAAY;;AACtD;AAEO,MAAM,sDASV,qEAAqE;AAEjE,SAAS,0CACd,QAAmB,EACnB,KAAgC;IAEhC,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,iDAAS,EAAE;QAClB,KAAK,0CAAoB;QACzB,WACE;kBAOD;;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,WACF,SAAS,YAAY,CAAC,OAAO,wBAAwB,CAAC,UAAU,QAAQ,MACnE,SAAS,GAAG,GACb,SAAS,KAAK,CAAC,GAAG;IACxB,qBACE,gCAAC,0CAAgB,QAAQ;QAAC,OAAO;kBAC9B,0BACG,CAAA,GAAA,yBAAW,EAAE,UAAU;YACrB,KAAK,CAAA,GAAA,mCAAQ,EAAE,UAAU;YACzB,WAAW,AAAC,CAAA,SAAS,KAAK,CAAC,SAAS,IAAI,EAAC,IAAK,MAAM;YACpD,6CAA6C;YAC7C,OAAO,CAAA,GAAA,iDAAS,EAAE;QACpB,KACA;;AAGV;AAGO,SAAS,0CAAgB,MAAmB;IACjD,IAAI,aAAa,CAAA,GAAA,uBAAS,EAAE;IAC5B,IAAI,YACF,OAAO,CAAA,GAAA,qCAAU,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.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAqBM,SAAS,0CAAoB,WAAoB;IACtD,IAAI,eAAe,CAAA,GAAA,mBAAK,EAAoB;IAC5C,IAAI,eAAe,CAAA,GAAA,uCAAY,EAAE;IACjC,OAAO,CAAA,GAAA,wBAAU,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,0BAAY,EAAkB;AACtD,SAAS;IACd,OAAO,CAAA,GAAA,uBAAS,EAAE,8CAAoB;AACxC;AAUO,SAAS,0CAAS,YAAC,QAAQ,aAAE,SAAS,EAAgB;IAC3D,iDAAiD;IACjD,qBAAO,gCAAC,0CAAgB,QAAQ;QAAC,OAAO;kBAAY;;AACtD;AAEO,MAAM,sDASV,qEAAqE;AAEjE,SAAS,0CACd,QAAmB,EACnB,KAAgC;IAEhC,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,iDAAS,EAAE;QAClB,KAAK,0CAAoB;QACzB,WACE;kBAOD;;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,WACF,SAAS,YAAY,CAAC,OAAO,wBAAwB,CAAC,UAAU,QAAQ,MACnE,SAAS,GAAG,GACb,SAAS,KAAK,CAAC,GAAG;IACxB,qBACE,gCAAC,0CAAgB,QAAQ;QAAC,OAAO;kBAC9B,0BACG,CAAA,GAAA,yBAAW,EAAE,UAAU;YACrB,KAAK,CAAA,GAAA,mCAAQ,EAAE,UAAU;YACzB,WAAW,AAAC,CAAA,SAAS,KAAK,CAAC,SAAS,IAAI,EAAC,IAAK,MAAM;YACpD,6CAA6C;YAC7C,OAAO,CAAA,GAAA,iDAAS,EAAE;QACpB,KACA;;AAGV;AAGO,SAAS,0CAAgB,MAAmB;IACjD,IAAI,aAAa,CAAA,GAAA,uBAAS,EAAE;IAC5B,IAAI,YACF,OAAO,CAAA,GAAA,qCAAU,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.cjs.map"}

package/icons/Skeleton.css

@@ -12,28 +12,28 @@
 }
 
 @layer _.a {
-  .pw15 {
+  .pw151 {
     color: #0000;
   }
 
-  ._ma15 {
+  ._ma151 {
     -webkit-box-decoration-break: clone;
     box-decoration-break: clone;
   }
 
-  .oa15 {
+  .oa151 {
     border-start-start-radius: .25rem;
   }
 
-  .na15 {
+  .na151 {
     border-start-end-radius: .25rem;
   }
 
-  .ka15 {
+  .ka151 {
     border-end-start-radius: .25rem;
   }
 
-  .ja15 {
+  .ja151 {
     border-end-end-radius: .25rem;
   }
 }

package/icons/Skeleton.mjs

@@ -86,7 +86,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 + " pw15 _ma15 oa15 na15 ka15 ja15",
+        className: $5ad421ec19460c48$export$d2353276f167b21f + " pw151 _ma151 oa151 na151 ka151 ja151",
         children: children
     });
 }
@@ -107,7 +107,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)(" oa15 na15 ka15 ja15", styles);
+    if (isSkeleton) return (0, $feb886035e0d4633$export$e618dc39ac9ad607)(" oa151 na151 ka151 ja151", styles);
     return styles || '';
 }