@react-spectrum/s2 3.0.0-nightly-086ad3115-240912 → 3.0.0-nightly-8ab4f20de-240913

package/icons/Similar.mjs

@@ -1,23 +1,27 @@
 import {IconContext as $ac8c32e6775ddd1f$export$a49f528ae1a4d0ed} from "./Icon.mjs";
+import {SkeletonWrapper as $5ad421ec19460c48$export$6069cbe61f690103, useSkeletonIcon as $5ad421ec19460c48$export$4b7803c08fe9a32b} from "./Skeleton.mjs";
 import {jsx as $ecDaL$jsx} from "react/jsx-runtime";
-import {useRef as $ecDaL$useRef} from "react";
+import {forwardRef as $ecDaL$forwardRef, useRef as $ecDaL$useRef} from "react";
 import {useContextProps as $ecDaL$useContextProps} from "react-aria-components";
 
 
 
 
 
-const $7c1e5177198cc89d$var$SvgComponent = (props)=>/*#__PURE__*/ (0, $ecDaL$jsx)("svg", {
+
+const $7c1e5177198cc89d$var$SvgComponent = (props, ref)=>/*#__PURE__*/ (0, $ecDaL$jsx)("svg", {
         xmlns: "http://www.w3.org/2000/svg",
         width: 20,
         height: 20,
         viewBox: "0 0 20 20",
+        ref: ref,
         ...props,
         children: /*#__PURE__*/ (0, $ecDaL$jsx)("path", {
             d: "M13.125 9.513c-1.205 0-2.343-.512-3.524-1.287-2.167-1.423-4.273-1.278-6.088.42-.305.282-.778.266-1.06-.036-.284-.302-.267-.777.034-1.06 2.346-2.194 5.164-2.4 7.938-.578 2.082 1.368 3.592 1.626 6.054-.756.298-.287.773-.28 1.06.017.288.298.28.773-.018 1.061-1.646 1.592-3.062 2.219-4.396 2.219ZM13.125 14.262c-1.205 0-2.343-.512-3.524-1.287-2.164-1.423-4.27-1.28-6.09.42-.302.282-.776.267-1.059-.037-.283-.302-.266-.776.036-1.06 2.346-2.193 5.165-2.398 7.937-.577 2.082 1.367 3.592 1.627 6.054-.756.298-.287.773-.28 1.06.017.288.298.28.773-.018 1.061-1.646 1.592-3.062 2.219-4.396 2.219Z",
             fill: "var(--iconPrimary, var(--lightningcss-light, rgb(41, 41, 41)) var(--lightningcss-dark, rgb(219, 219, 219)))"
         })
     });
+const $7c1e5177198cc89d$var$ForwardRef = /*#__PURE__*/ (0, $ecDaL$forwardRef)($7c1e5177198cc89d$var$SvgComponent);
 function $7c1e5177198cc89d$export$2e2bcd8739ae039(props) {
     let ref = (0, $ecDaL$useRef)(null);
     let ctx;
@@ -28,15 +32,17 @@ function $7c1e5177198cc89d$export$2e2bcd8739ae039(props) {
     let { render: render, styles: styles } = ctx;
     let { UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style, slot: slot, 'aria-label': ariaLabel, 'aria-hidden': ariaHidden, ...otherProps } = props;
     if (!ariaHidden) ariaHidden = undefined;
-    let svg = /*#__PURE__*/ (0, $ecDaL$jsx)($7c1e5177198cc89d$var$SvgComponent, {
-        ...otherProps,
-        focusable: false,
-        "aria-label": ariaLabel,
-        "aria-hidden": ariaLabel ? ariaHidden || undefined : true,
-        role: "img",
-        "data-slot": slot,
-        className: (UNSAFE_className ?? '') + ' ' + (styles || ''),
-        style: UNSAFE_style
+    let svg = /*#__PURE__*/ (0, $ecDaL$jsx)((0, $5ad421ec19460c48$export$6069cbe61f690103), {
+        children: /*#__PURE__*/ (0, $ecDaL$jsx)($7c1e5177198cc89d$var$ForwardRef, {
+            ...otherProps,
+            focusable: false,
+            "aria-label": ariaLabel,
+            "aria-hidden": ariaLabel ? ariaHidden || undefined : true,
+            role: "img",
+            "data-slot": slot,
+            className: (UNSAFE_className ?? '') + ' ' + (0, $5ad421ec19460c48$export$4b7803c08fe9a32b)(styles),
+            style: UNSAFE_style
+        })
     });
     if (render) return render(svg);
     return svg;

package/icons/Similar.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;AAMA,MAAM,qCAAe,CAAC,sBAAmC,gBAAC;QAAI,OAAM;QAA6B,OAAO;QAAI,QAAQ;QAAI,SAAQ;QAAa,GAAG,KAAK;kBAAE,cAAA,gBAAC;YAAK,GAAE;YAA4kB,MAAK;;;AAGjuB,kDAAiB,KAAgB;IAC9C,IAAI,MAAM,CAAA,GAAA,aAAK,EAAc;IAC7B,IAAI;IACJ,sEAAsE;IACtE,CAAC,KAAK,IAAI,GAAG,CAAA,GAAA,sBAAc,EAAE;QAAC,MAAM,MAAM,IAAI,IAAI;IAAM,GAAuB,KAAK,CAAA,GAAA,yCAAU;IAC9F,IAAI,UAAC,MAAM,UAAE,MAAM,EAAC,GAAG;IACvB,IAAI,oBACF,gBAAgB,gBAChB,YAAY,QACZ,IAAI,EACJ,cAAc,SAAS,EACvB,eAAe,UAAU,EACzB,GAAG,YACJ,GAAG;IAEJ,IAAI,CAAC,YACH,aAAa;IAGf,IAAI,oBACF,gBAAC;QACE,GAAG,UAAU;QACd,WAAW;QACX,cAAY;QACZ,eAAa,YAAa,cAAc,YAAa;QACrD,MAAK;QACL,aAAW;QACX,WAAW,AAAC,CAAA,oBAAoB,EAAC,IAAK,MAAO,CAAA,UAAU,EAAC;QACxD,OAAO;;IAGX,IAAI,QACF,OAAO,OAAO;IAGhB,OAAO;AACT","sources":["packages/@react-spectrum/s2/s2wf-icons/S2_Icon_Similar_20_N.svg"],"sourcesContent":["<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\">\n  <path d=\"M13.125,9.5127c-1.20508,0-2.34277-.51172-3.52441-1.28711-2.16699-1.42285-4.27246-1.27734-6.08789.41992-.30469.28223-.77734.2666-1.06055-.03516-.2832-.30273-.2666-.77734.03516-1.06055,2.3457-2.19336,5.16406-2.39941,7.9375-.57812,2.08203,1.36816,3.5918,1.62598,6.05371-.75586.29883-.28711.77344-.2793,1.06055.01758.28809.29785.28027.77246-.01758,1.06055-1.64648,1.5918-3.0625,2.21875-4.39648,2.21875Z\" fill=\"var(--iconPrimary, #222)\"/>\n  <path d=\"M13.125,14.26172c-1.20508,0-2.34277-.51172-3.52441-1.28711-2.16309-1.42285-4.26953-1.2793-6.08887.41992-.30273.28223-.77637.26758-1.05957-.03613-.2832-.30273-.2666-.77637.03613-1.05957,2.3457-2.19336,5.16504-2.39844,7.93652-.57812,2.08203,1.36719,3.5918,1.62695,6.05371-.75586.29883-.28711.77344-.2793,1.06055.01758.28809.29785.28027.77246-.01758,1.06055-1.64648,1.5918-3.0625,2.21875-4.39648,2.21875Z\" fill=\"var(--iconPrimary, #222)\"/>\n</svg>"],"names":[],"version":3,"file":"Similar.mjs.map"}
+{"mappings":";;;;;;;;;;;AAOA,MAAM,qCAAe,CAAC,OAAgC,oBAA4B,gBAAC;QAAI,OAAM;QAA6B,OAAO;QAAI,QAAQ;QAAI,SAAQ;QAAY,KAAK;QAAM,GAAG,KAAK;kBAAE,cAAA,gBAAC;YAAK,GAAE;YAA4kB,MAAK;;;AACnxB,MAAM,iDAAa,CAAA,GAAA,iBAAS,EAAE;AAGf,kDAAiB,KAAgB;IAC9C,IAAI,MAAM,CAAA,GAAA,aAAK,EAAc;IAC7B,IAAI;IACJ,sEAAsE;IACtE,CAAC,KAAK,IAAI,GAAG,CAAA,GAAA,sBAAc,EAAE;QAAC,MAAM,MAAM,IAAI,IAAI;IAAM,GAAuB,KAAK,CAAA,GAAA,yCAAU;IAC9F,IAAI,UAAC,MAAM,UAAE,MAAM,EAAC,GAAG;IACvB,IAAI,oBACF,gBAAgB,gBAChB,YAAY,QACZ,IAAI,EACJ,cAAc,SAAS,EACvB,eAAe,UAAU,EACzB,GAAG,YACJ,GAAG;IAEJ,IAAI,CAAC,YACH,aAAa;IAGf,IAAI,oBACF,gBAAC,CAAA,GAAA,yCAAc;kBACb,cAAA,gBAAC;YACE,GAAG,UAAU;YACd,WAAW;YACX,cAAY;YACZ,eAAa,YAAa,cAAc,YAAa;YACrD,MAAK;YACL,aAAW;YACX,WAAW,AAAC,CAAA,oBAAoB,EAAC,IAAK,MAAM,CAAA,GAAA,yCAAc,EAAE;YAC5D,OAAO;;;IAIb,IAAI,QACF,OAAO,OAAO;IAGhB,OAAO;AACT","sources":["packages/@react-spectrum/s2/s2wf-icons/S2_Icon_Similar_20_N.svg"],"sourcesContent":["<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\">\n  <path d=\"M13.125,9.5127c-1.20508,0-2.34277-.51172-3.52441-1.28711-2.16699-1.42285-4.27246-1.27734-6.08789.41992-.30469.28223-.77734.2666-1.06055-.03516-.2832-.30273-.2666-.77734.03516-1.06055,2.3457-2.19336,5.16406-2.39941,7.9375-.57812,2.08203,1.36816,3.5918,1.62598,6.05371-.75586.29883-.28711.77344-.2793,1.06055.01758.28809.29785.28027.77246-.01758,1.06055-1.64648,1.5918-3.0625,2.21875-4.39648,2.21875Z\" fill=\"var(--iconPrimary, #222)\"/>\n  <path d=\"M13.125,14.26172c-1.20508,0-2.34277-.51172-3.52441-1.28711-2.16309-1.42285-4.26953-1.2793-6.08887.41992-.30273.28223-.77637.26758-1.05957-.03613-.2832-.30273-.2666-.77637.03613-1.05957,2.3457-2.19336,5.16504-2.39844,7.93652-.57812,2.08203,1.36719,3.5918,1.62695,6.05371-.75586.29883-.28711.77344-.2793,1.06055.01758.28809.29785.28027.77246-.01758,1.06055-1.64648,1.5918-3.0625,2.21875-4.39648,2.21875Z\" fill=\"var(--iconPrimary, #222)\"/>\n</svg>"],"names":[],"version":3,"file":"Similar.mjs.map"}

package/icons/Skeleton.cjs

@@ -0,0 +1,122 @@
+require("./Skeleton.css");
+var $308b180f49d82d28$exports = require("./runtime.cjs");
+var $lzdFu$reactjsxruntime = require("react/jsx-runtime");
+var $lzdFu$react = require("react");
+var $lzdFu$reactariautils = require("@react-aria/utils");
+
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "useLoadingAnimation", () => $5eb75e0c130e0669$export$6b288fe07640c94c);
+$parcel$export(module.exports, "SkeletonContext", () => $5eb75e0c130e0669$export$74e166679b1f49ee);
+$parcel$export(module.exports, "useIsSkeleton", () => $5eb75e0c130e0669$export$4f8dc7555740235c);
+$parcel$export(module.exports, "Skeleton", () => $5eb75e0c130e0669$export$8f31e4c4a37b8e9c);
+$parcel$export(module.exports, "loadingStyle", () => $5eb75e0c130e0669$export$d2353276f167b21f);
+$parcel$export(module.exports, "useSkeletonText", () => $5eb75e0c130e0669$export$a05a0b8a311cd65f);
+$parcel$export(module.exports, "SkeletonWrapper", () => $5eb75e0c130e0669$export$6069cbe61f690103);
+$parcel$export(module.exports, "useSkeletonIcon", () => $5eb75e0c130e0669$export$4b7803c08fe9a32b);
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+let $5eb75e0c130e0669$var$reduceMotion = typeof window?.matchMedia === 'function' ? window.matchMedia('(prefers-reduced-motion: reduce)').matches : false;
+function $5eb75e0c130e0669$export$6b288fe07640c94c(isAnimating) {
+    let animationRef = (0, $lzdFu$react.useRef)(null);
+    return (0, $lzdFu$react.useCallback)((element)=>{
+        if (isAnimating && !animationRef.current && element && !$5eb75e0c130e0669$var$reduceMotion) {
+            // Use web animation API instead of CSS animations so that we can
+            // synchronize it between all loading elements on the page (via startTime).
+            animationRef.current = element.animate([
+                {
+                    backgroundPosition: '100%'
+                },
+                {
+                    backgroundPosition: '0%'
+                }
+            ], {
+                duration: 2000,
+                iterations: Infinity,
+                easing: 'ease-in-out'
+            });
+            animationRef.current.startTime = 0;
+        } else if (!isAnimating && animationRef.current) {
+            animationRef.current.cancel();
+            animationRef.current = null;
+        }
+    }, [
+        isAnimating
+    ]);
+}
+const $5eb75e0c130e0669$export$74e166679b1f49ee = /*#__PURE__*/ (0, $lzdFu$react.createContext)(null);
+function $5eb75e0c130e0669$export$4f8dc7555740235c() {
+    return (0, $lzdFu$react.useContext)($5eb75e0c130e0669$export$74e166679b1f49ee) || false;
+}
+function $5eb75e0c130e0669$export$8f31e4c4a37b8e9c({ children: children, isLoading: isLoading }) {
+    // Disable all form components inside a skeleton.
+    return /*#__PURE__*/ (0, $lzdFu$reactjsxruntime.jsx)($5eb75e0c130e0669$export$74e166679b1f49ee.Provider, {
+        value: isLoading,
+        children: children
+    });
+}
+const $5eb75e0c130e0669$export$d2353276f167b21f = "-my2ngj";
+function $5eb75e0c130e0669$export$a05a0b8a311cd65f(children, style) {
+    let isSkeleton = (0, $lzdFu$react.useContext)($5eb75e0c130e0669$export$74e166679b1f49ee);
+    if (isSkeleton) {
+        children = /*#__PURE__*/ (0, $lzdFu$reactjsxruntime.jsx)($5eb75e0c130e0669$export$cb6ddd830302c2a8, {
+            children: children
+        });
+        style = {
+            ...style,
+            // This ensures the ellipsis on truncated text is also hidden.
+            // -webkit-text-fill-color overrides any `color` property that is also set.
+            WebkitTextFillColor: 'transparent'
+        };
+    }
+    return [
+        children,
+        style
+    ];
+}
+function $5eb75e0c130e0669$export$cb6ddd830302c2a8({ children: children }) {
+    return /*#__PURE__*/ (0, $lzdFu$reactjsxruntime.jsx)("span", {
+        // @ts-ignore - compatibility with React < 19
+        inert: "true",
+        ref: $5eb75e0c130e0669$export$6b288fe07640c94c(true),
+        className: $5eb75e0c130e0669$export$d2353276f167b21f + " . aa _sb _vb _wb _xb _yb",
+        children: children
+    });
+}
+function $5eb75e0c130e0669$export$6069cbe61f690103({ children: children }) {
+    let isLoading = (0, $lzdFu$react.useContext)($5eb75e0c130e0669$export$74e166679b1f49ee);
+    let animation = $5eb75e0c130e0669$export$6b288fe07640c94c(isLoading || false);
+    if (isLoading == null) return children;
+    let childRef = 'ref' in children ? children.ref : children.props.ref;
+    return /*#__PURE__*/ (0, $lzdFu$reactjsxruntime.jsx)($5eb75e0c130e0669$export$74e166679b1f49ee.Provider, {
+        value: null,
+        children: isLoading ? /*#__PURE__*/ (0, $lzdFu$react.cloneElement)(children, {
+            ref: (0, $lzdFu$reactariautils.mergeRefs)(childRef, animation),
+            className: (children.props.className || '') + ' ' + $5eb75e0c130e0669$export$d2353276f167b21f,
+            inert: 'true'
+        }) : children
+    });
+}
+function $5eb75e0c130e0669$export$4b7803c08fe9a32b(styles) {
+    let isSkeleton = (0, $lzdFu$react.useContext)($5eb75e0c130e0669$export$74e166679b1f49ee);
+    if (isSkeleton) return (0, $308b180f49d82d28$exports.mergeStyles)(" . _vb _wb _xb _yb", styles);
+    return styles || '';
+}
+
+
+//# sourceMappingURL=Skeleton.cjs.map

package/icons/Skeleton.cjs.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;AAUD,IAAI,qCAAe,OAAO,QAAQ,eAAe,aAC7C,OAAO,UAAU,CAAC,oCAAoC,OAAO,GAC7D;AAEG,SAAS,0CAAoB,WAAoB;IACtD,IAAI,eAAe,CAAA,GAAA,mBAAK,EAAoB;IAC5C,OAAO,CAAA,GAAA,wBAAU,EAAE,CAAC;QAClB,IAAI,eAAe,CAAC,aAAa,OAAO,IAAI,WAAW,CAAC,oCAAc;YACpE,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;KAAY;AAClB;AASO,MAAM,0DAAkB,CAAA,GAAA,0BAAY,EAAkB;AACtD,SAAS;IACd,OAAO,CAAA,GAAA,uBAAS,EAAE,8CAAoB;AACxC;AAOO,SAAS,0CAAS,YAAC,QAAQ,aAAE,SAAS,EAAgB;IAC3D,iDAAiD;IACjD,qBACE,gCAAC,0CAAgB,QAAQ;QAAC,OAAO;kBAC9B;;AAGP;AAEO,MAAM;AAQN,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,EAAC;IACrC,qBACE,gCAAC;QACC,6CAA6C;QAC7C,OAAM;QACN,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,WAAW,SAAS,GAAG,GAAU,SAAS,KAAK,CAAC,GAAG;IAC3E,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,OAAO;QACT,KAAK;;AAGX;AAGO,SAAS,0CAAgB,MAAmB;IACjD,IAAI,aAAa,CAAA,GAAA,uBAAS,EAAE;IAC5B,IAAI,YACF,OAAO,CAAA,GAAA,qCAAU,wBAA+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 {colorToken} from '../style/tokens' with {type: 'macro'};\nimport {mergeRefs} from '@react-aria/utils';\nimport {mergeStyles} from '../style/runtime';\nimport {raw} from '../style/style-macro' with {type: 'macro'};\nimport {style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {StyleString} from '../style/types';\n\nlet reduceMotion = typeof window?.matchMedia === 'function'\n  ? window.matchMedia('(prefers-reduced-motion: reduce)').matches\n  : false;\n\nexport function useLoadingAnimation(isAnimating: boolean) {\n  let animationRef = useRef<Animation | null>(null);\n  return useCallback((element: HTMLElement | null) => {\n    if (isAnimating && !animationRef.current && element && !reduceMotion) {\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]);\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\nexport function Skeleton({children, isLoading}: SkeletonProps) {\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, ${colorToken('gray-100')} 33%, light-dark(${colorToken('gray-25')}, ${colorToken('gray-300')}), ${colorToken('gray-100')} 66%);\n  background-size: 300%;\n  * {\n    visibility: hidden;\n  }\n`, 'UNSAFE_overrides');\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}) {\n  return (\n    <span\n      // @ts-ignore - compatibility with React < 19\n      inert=\"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}) {\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 ? 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        inert: '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

@@ -0,0 +1,44 @@
+@layer UNSAFE_overrides {
+  .-my2ngj {
+    background-image: linear-gradient(to right, var(--lightningcss-light, #e9e9e9) var(--lightningcss-dark, #2c2c2c) 33%, var(--lightningcss-light, #fff) var(--lightningcss-dark, #393939), var(--lightningcss-light, #e9e9e9) var(--lightningcss-dark, #2c2c2c) 66%);
+    background-size: 300%;
+  }
+
+  .-my2ngj * {
+    visibility: hidden;
+  }
+}
+
+@layer _.a {
+  .aa {
+    color: #0000;
+  }
+
+  ._sb {
+    -webkit-box-decoration-break: clone;
+    box-decoration-break: clone;
+  }
+
+  ._vb {
+    border-start-start-radius: .25rem;
+  }
+
+  ._wb {
+    border-start-end-radius: .25rem;
+  }
+
+  ._xb {
+    border-end-start-radius: .25rem;
+  }
+
+  ._yb {
+    border-end-end-radius: .25rem;
+  }
+}
+
+@layer _.b;
+
+.\.:not(#a#b) {
+  all: revert-layer;
+}
+/*# sourceMappingURL=Skeleton.css.map */

package/icons/Skeleton.css.map

@@ -0,0 +1 @@
+{"mappings":"AC2E4B;EAAA;;;;;EAAA;;;;;AA6BI;EAAA;;;;EAAA;;;;;EAkCT;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAlCS;;AAkCT","sources":["75d5c035b718255e","packages/@react-spectrum/s2/src/Skeleton.tsx"],"sourcesContent":["@import \"087771746f6f9bd4\";\n@import \"cdde487beeff3a0a\";\n@import \"15dee9c9bf5f0627\";\n","/*\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 {colorToken} from '../style/tokens' with {type: 'macro'};\nimport {mergeRefs} from '@react-aria/utils';\nimport {mergeStyles} from '../style/runtime';\nimport {raw} from '../style/style-macro' with {type: 'macro'};\nimport {style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {StyleString} from '../style/types';\n\nlet reduceMotion = typeof window?.matchMedia === 'function'\n  ? window.matchMedia('(prefers-reduced-motion: reduce)').matches\n  : false;\n\nexport function useLoadingAnimation(isAnimating: boolean) {\n  let animationRef = useRef<Animation | null>(null);\n  return useCallback((element: HTMLElement | null) => {\n    if (isAnimating && !animationRef.current && element && !reduceMotion) {\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]);\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\nexport function Skeleton({children, isLoading}: SkeletonProps) {\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, ${colorToken('gray-100')} 33%, light-dark(${colorToken('gray-25')}, ${colorToken('gray-300')}), ${colorToken('gray-100')} 66%);\n  background-size: 300%;\n  * {\n    visibility: hidden;\n  }\n`, 'UNSAFE_overrides');\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}) {\n  return (\n    <span\n      // @ts-ignore - compatibility with React < 19\n      inert=\"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}) {\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 ? 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        inert: '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.css.map"}

package/icons/Skeleton.d.ts

@@ -0,0 +1,5 @@
+import type {IconProps} from '../dist/types';
+import type {ReactNode} from 'react';
+
+declare function Icon(props: IconProps): ReactNode;
+export default Icon;

package/icons/Skeleton.mjs

@@ -0,0 +1,110 @@
+import "./Skeleton.css";
+import {mergeStyles as $feb886035e0d4633$export$e618dc39ac9ad607} from "./runtime.mjs";
+import {jsx as $cHM3s$jsx} from "react/jsx-runtime";
+import {useRef as $cHM3s$useRef, useCallback as $cHM3s$useCallback, createContext as $cHM3s$createContext, useContext as $cHM3s$useContext, cloneElement as $cHM3s$cloneElement} from "react";
+import {mergeRefs as $cHM3s$mergeRefs} from "@react-aria/utils";
+
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+let $5ad421ec19460c48$var$reduceMotion = typeof window?.matchMedia === 'function' ? window.matchMedia('(prefers-reduced-motion: reduce)').matches : false;
+function $5ad421ec19460c48$export$6b288fe07640c94c(isAnimating) {
+    let animationRef = (0, $cHM3s$useRef)(null);
+    return (0, $cHM3s$useCallback)((element)=>{
+        if (isAnimating && !animationRef.current && element && !$5ad421ec19460c48$var$reduceMotion) {
+            // Use web animation API instead of CSS animations so that we can
+            // synchronize it between all loading elements on the page (via startTime).
+            animationRef.current = element.animate([
+                {
+                    backgroundPosition: '100%'
+                },
+                {
+                    backgroundPosition: '0%'
+                }
+            ], {
+                duration: 2000,
+                iterations: Infinity,
+                easing: 'ease-in-out'
+            });
+            animationRef.current.startTime = 0;
+        } else if (!isAnimating && animationRef.current) {
+            animationRef.current.cancel();
+            animationRef.current = null;
+        }
+    }, [
+        isAnimating
+    ]);
+}
+const $5ad421ec19460c48$export$74e166679b1f49ee = /*#__PURE__*/ (0, $cHM3s$createContext)(null);
+function $5ad421ec19460c48$export$4f8dc7555740235c() {
+    return (0, $cHM3s$useContext)($5ad421ec19460c48$export$74e166679b1f49ee) || false;
+}
+function $5ad421ec19460c48$export$8f31e4c4a37b8e9c({ children: children, isLoading: isLoading }) {
+    // Disable all form components inside a skeleton.
+    return /*#__PURE__*/ (0, $cHM3s$jsx)($5ad421ec19460c48$export$74e166679b1f49ee.Provider, {
+        value: isLoading,
+        children: children
+    });
+}
+const $5ad421ec19460c48$export$d2353276f167b21f = "-my2ngj";
+function $5ad421ec19460c48$export$a05a0b8a311cd65f(children, style) {
+    let isSkeleton = (0, $cHM3s$useContext)($5ad421ec19460c48$export$74e166679b1f49ee);
+    if (isSkeleton) {
+        children = /*#__PURE__*/ (0, $cHM3s$jsx)($5ad421ec19460c48$export$cb6ddd830302c2a8, {
+            children: children
+        });
+        style = {
+            ...style,
+            // This ensures the ellipsis on truncated text is also hidden.
+            // -webkit-text-fill-color overrides any `color` property that is also set.
+            WebkitTextFillColor: 'transparent'
+        };
+    }
+    return [
+        children,
+        style
+    ];
+}
+function $5ad421ec19460c48$export$cb6ddd830302c2a8({ children: children }) {
+    return /*#__PURE__*/ (0, $cHM3s$jsx)("span", {
+        // @ts-ignore - compatibility with React < 19
+        inert: "true",
+        ref: $5ad421ec19460c48$export$6b288fe07640c94c(true),
+        className: $5ad421ec19460c48$export$d2353276f167b21f + " . aa _sb _vb _wb _xb _yb",
+        children: children
+    });
+}
+function $5ad421ec19460c48$export$6069cbe61f690103({ children: children }) {
+    let isLoading = (0, $cHM3s$useContext)($5ad421ec19460c48$export$74e166679b1f49ee);
+    let animation = $5ad421ec19460c48$export$6b288fe07640c94c(isLoading || false);
+    if (isLoading == null) return children;
+    let childRef = 'ref' in children ? children.ref : children.props.ref;
+    return /*#__PURE__*/ (0, $cHM3s$jsx)($5ad421ec19460c48$export$74e166679b1f49ee.Provider, {
+        value: null,
+        children: isLoading ? /*#__PURE__*/ (0, $cHM3s$cloneElement)(children, {
+            ref: (0, $cHM3s$mergeRefs)(childRef, animation),
+            className: (children.props.className || '') + ' ' + $5ad421ec19460c48$export$d2353276f167b21f,
+            inert: 'true'
+        }) : children
+    });
+}
+function $5ad421ec19460c48$export$4b7803c08fe9a32b(styles) {
+    let isSkeleton = (0, $cHM3s$useContext)($5ad421ec19460c48$export$74e166679b1f49ee);
+    if (isSkeleton) return (0, $feb886035e0d4633$export$e618dc39ac9ad607)(" . _vb _wb _xb _yb", styles);
+    return styles || '';
+}
+
+
+export {$5ad421ec19460c48$export$6b288fe07640c94c as useLoadingAnimation, $5ad421ec19460c48$export$74e166679b1f49ee as SkeletonContext, $5ad421ec19460c48$export$4f8dc7555740235c as useIsSkeleton, $5ad421ec19460c48$export$8f31e4c4a37b8e9c as Skeleton, $5ad421ec19460c48$export$d2353276f167b21f as loadingStyle, $5ad421ec19460c48$export$a05a0b8a311cd65f as useSkeletonText, $5ad421ec19460c48$export$cb6ddd830302c2a8 as SkeletonText, $5ad421ec19460c48$export$6069cbe61f690103 as SkeletonWrapper, $5ad421ec19460c48$export$4b7803c08fe9a32b as useSkeletonIcon};
+//# sourceMappingURL=Skeleton.mjs.map

package/icons/Skeleton.mjs.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;AAAA;;;;;;;;;;CAUC;;;;AAUD,IAAI,qCAAe,OAAO,QAAQ,eAAe,aAC7C,OAAO,UAAU,CAAC,oCAAoC,OAAO,GAC7D;AAEG,SAAS,0CAAoB,WAAoB;IACtD,IAAI,eAAe,CAAA,GAAA,aAAK,EAAoB;IAC5C,OAAO,CAAA,GAAA,kBAAU,EAAE,CAAC;QAClB,IAAI,eAAe,CAAC,aAAa,OAAO,IAAI,WAAW,CAAC,oCAAc;YACpE,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;KAAY;AAClB;AASO,MAAM,0DAAkB,CAAA,GAAA,oBAAY,EAAkB;AACtD,SAAS;IACd,OAAO,CAAA,GAAA,iBAAS,EAAE,8CAAoB;AACxC;AAOO,SAAS,0CAAS,YAAC,QAAQ,aAAE,SAAS,EAAgB;IAC3D,iDAAiD;IACjD,qBACE,gBAAC,0CAAgB,QAAQ;QAAC,OAAO;kBAC9B;;AAGP;AAEO,MAAM;AAQN,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,EAAC;IACrC,qBACE,gBAAC;QACC,6CAA6C;QAC7C,OAAM;QACN,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,WAAW,SAAS,GAAG,GAAU,SAAS,KAAK,CAAC,GAAG;IAC3E,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,OAAO;QACT,KAAK;;AAGX;AAGO,SAAS,0CAAgB,MAAmB;IACjD,IAAI,aAAa,CAAA,GAAA,iBAAS,EAAE;IAC5B,IAAI,YACF,OAAO,CAAA,GAAA,yCAAU,wBAA+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 {colorToken} from '../style/tokens' with {type: 'macro'};\nimport {mergeRefs} from '@react-aria/utils';\nimport {mergeStyles} from '../style/runtime';\nimport {raw} from '../style/style-macro' with {type: 'macro'};\nimport {style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {StyleString} from '../style/types';\n\nlet reduceMotion = typeof window?.matchMedia === 'function'\n  ? window.matchMedia('(prefers-reduced-motion: reduce)').matches\n  : false;\n\nexport function useLoadingAnimation(isAnimating: boolean) {\n  let animationRef = useRef<Animation | null>(null);\n  return useCallback((element: HTMLElement | null) => {\n    if (isAnimating && !animationRef.current && element && !reduceMotion) {\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]);\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\nexport function Skeleton({children, isLoading}: SkeletonProps) {\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, ${colorToken('gray-100')} 33%, light-dark(${colorToken('gray-25')}, ${colorToken('gray-300')}), ${colorToken('gray-100')} 66%);\n  background-size: 300%;\n  * {\n    visibility: hidden;\n  }\n`, 'UNSAFE_overrides');\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}) {\n  return (\n    <span\n      // @ts-ignore - compatibility with React < 19\n      inert=\"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}) {\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 ? 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        inert: '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/Slideshow.cjs

@@ -1,4 +1,5 @@
 var $bde97c91243ed164$exports = require("./Icon.cjs");
+var $5eb75e0c130e0669$exports = require("./Skeleton.cjs");
 var $hyRXw$reactjsxruntime = require("react/jsx-runtime");
 var $hyRXw$react = require("react");
 var $hyRXw$reactariacomponents = require("react-aria-components");
@@ -19,11 +20,13 @@ $parcel$export(module.exports, "default", () => $330bbc0691369c9f$export$2e2bcd8
 
 
 
-const $330bbc0691369c9f$var$SvgComponent = (props)=>/*#__PURE__*/ (0, $hyRXw$reactjsxruntime.jsxs)("svg", {
+
+const $330bbc0691369c9f$var$SvgComponent = (props, ref)=>/*#__PURE__*/ (0, $hyRXw$reactjsxruntime.jsxs)("svg", {
         xmlns: "http://www.w3.org/2000/svg",
         width: 20,
         height: 20,
         viewBox: "0 0 20 20",
+        ref: ref,
         ...props,
         children: [
             /*#__PURE__*/ (0, $hyRXw$reactjsxruntime.jsx)("path", {
@@ -36,6 +39,7 @@ const $330bbc0691369c9f$var$SvgComponent = (props)=>/*#__PURE__*/ (0, $hyRXw$rea
             })
         ]
     });
+const $330bbc0691369c9f$var$ForwardRef = /*#__PURE__*/ (0, $hyRXw$react.forwardRef)($330bbc0691369c9f$var$SvgComponent);
 function $330bbc0691369c9f$export$2e2bcd8739ae039(props) {
     let ref = (0, $hyRXw$react.useRef)(null);
     let ctx;
@@ -46,15 +50,17 @@ function $330bbc0691369c9f$export$2e2bcd8739ae039(props) {
     let { render: render, styles: styles } = ctx;
     let { UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style, slot: slot, 'aria-label': ariaLabel, 'aria-hidden': ariaHidden, ...otherProps } = props;
     if (!ariaHidden) ariaHidden = undefined;
-    let svg = /*#__PURE__*/ (0, $hyRXw$reactjsxruntime.jsx)($330bbc0691369c9f$var$SvgComponent, {
-        ...otherProps,
-        focusable: false,
-        "aria-label": ariaLabel,
-        "aria-hidden": ariaLabel ? ariaHidden || undefined : true,
-        role: "img",
-        "data-slot": slot,
-        className: (UNSAFE_className ?? '') + ' ' + (styles || ''),
-        style: UNSAFE_style
+    let svg = /*#__PURE__*/ (0, $hyRXw$reactjsxruntime.jsx)((0, $5eb75e0c130e0669$exports.SkeletonWrapper), {
+        children: /*#__PURE__*/ (0, $hyRXw$reactjsxruntime.jsx)($330bbc0691369c9f$var$ForwardRef, {
+            ...otherProps,
+            focusable: false,
+            "aria-label": ariaLabel,
+            "aria-hidden": ariaLabel ? ariaHidden || undefined : true,
+            role: "img",
+            "data-slot": slot,
+            className: (UNSAFE_className ?? '') + ' ' + (0, $5eb75e0c130e0669$exports.useSkeletonIcon)(styles),
+            style: UNSAFE_style
+        })
     });
     if (render) return render(svg);
     return svg;

package/icons/Slideshow.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;AAMA,MAAM,qCAAe,CAAC,sBAAmC,iCAAC;QAAI,OAAM;QAA6B,OAAO;QAAI,QAAQ;QAAI,SAAQ;QAAa,GAAG,KAAK;;0BAAE,gCAAC;gBAAK,GAAE;gBAA4b,MAAK;;0BAAgH,gCAAC;gBAAK,GAAE;gBAA8H,MAAK;;;;AAG50B,kDAAmB,KAAgB;IAChD,IAAI,MAAM,CAAA,GAAA,mBAAK,EAAc;IAC7B,IAAI;IACJ,sEAAsE;IACtE,CAAC,KAAK,IAAI,GAAG,CAAA,GAAA,0CAAc,EAAE;QAAC,MAAM,MAAM,IAAI,IAAI;IAAM,GAAuB,KAAK,CAAA,GAAA,qCAAU;IAC9F,IAAI,UAAC,MAAM,UAAE,MAAM,EAAC,GAAG;IACvB,IAAI,oBACF,gBAAgB,gBAChB,YAAY,QACZ,IAAI,EACJ,cAAc,SAAS,EACvB,eAAe,UAAU,EACzB,GAAG,YACJ,GAAG;IAEJ,IAAI,CAAC,YACH,aAAa;IAGf,IAAI,oBACF,gCAAC;QACE,GAAG,UAAU;QACd,WAAW;QACX,cAAY;QACZ,eAAa,YAAa,cAAc,YAAa;QACrD,MAAK;QACL,aAAW;QACX,WAAW,AAAC,CAAA,oBAAoB,EAAC,IAAK,MAAO,CAAA,UAAU,EAAC;QACxD,OAAO;;IAGX,IAAI,QACF,OAAO,OAAO;IAGhB,OAAO;AACT","sources":["packages/@react-spectrum/s2/s2wf-icons/S2_Icon_Slideshow_20_N.svg"],"sourcesContent":["<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\">\n  <path d=\"m13.75,16h-7.5c-1.24072,0-2.25-1.00977-2.25-2.25v-7.5c0-1.24023,1.00928-2.25,2.25-2.25h7.5c1.24072,0,2.25,1.00977,2.25,2.25v7.5c0,1.24023-1.00928,2.25-2.25,2.25ZM6.25,5.5c-.41357,0-.75.33691-.75.75v7.5c0,.41309.33643.75.75.75h7.5c.41357,0,.75-.33691.75-.75v-7.5c0-.41309-.33643-.75-.75-.75h-7.5Z\" fill=\"var(--iconPrimary, #222)\"/>\n  <path d=\"m1.75,14.75c-.41406,0-.75-.33594-.75-.75V6c0-.41406.33594-.75.75-.75s.75.33594.75.75v8c0,.41406-.33594.75-.75.75Z\" fill=\"var(--iconPrimary, #222)\"/>\n  <path d=\"m18.25,14.75c-.41406,0-.75-.33594-.75-.75V6c0-.41406.33594-.75.75-.75s.75.33594.75.75v8c0,.41406-.33594.75-.75.75Z\" fill=\"var(--iconPrimary, #222)\"/>\n  <path d=\"m12.19618,9.41442l-3.17813-1.70809c-.46031-.2474-1.01805.08603-1.01805.60862v3.41618c0,.52258.55773.85601,1.01805.60861l3.17814-1.7081c.48512-.26073.48512-.95649,0-1.21722Z\" fill=\"var(--iconPrimary, #222)\"/>\n</svg>"],"names":[],"version":3,"file":"Slideshow.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,qCAAe,CAAC,OAAgC,oBAA4B,iCAAC;QAAI,OAAM;QAA6B,OAAO;QAAI,QAAQ;QAAI,SAAQ;QAAY,KAAK;QAAM,GAAG,KAAK;;0BAAE,gCAAC;gBAAK,GAAE;gBAA4b,MAAK;;0BAAgH,gCAAC;gBAAK,GAAE;gBAA8H,MAAK;;;;AAC93B,MAAM,iDAAa,CAAA,GAAA,uBAAS,EAAE;AAGf,kDAAmB,KAAgB;IAChD,IAAI,MAAM,CAAA,GAAA,mBAAK,EAAc;IAC7B,IAAI;IACJ,sEAAsE;IACtE,CAAC,KAAK,IAAI,GAAG,CAAA,GAAA,0CAAc,EAAE;QAAC,MAAM,MAAM,IAAI,IAAI;IAAM,GAAuB,KAAK,CAAA,GAAA,qCAAU;IAC9F,IAAI,UAAC,MAAM,UAAE,MAAM,EAAC,GAAG;IACvB,IAAI,oBACF,gBAAgB,gBAChB,YAAY,QACZ,IAAI,EACJ,cAAc,SAAS,EACvB,eAAe,UAAU,EACzB,GAAG,YACJ,GAAG;IAEJ,IAAI,CAAC,YACH,aAAa;IAGf,IAAI,oBACF,gCAAC,CAAA,GAAA,yCAAc;kBACb,cAAA,gCAAC;YACE,GAAG,UAAU;YACd,WAAW;YACX,cAAY;YACZ,eAAa,YAAa,cAAc,YAAa;YACrD,MAAK;YACL,aAAW;YACX,WAAW,AAAC,CAAA,oBAAoB,EAAC,IAAK,MAAM,CAAA,GAAA,yCAAc,EAAE;YAC5D,OAAO;;;IAIb,IAAI,QACF,OAAO,OAAO;IAGhB,OAAO;AACT","sources":["packages/@react-spectrum/s2/s2wf-icons/S2_Icon_Slideshow_20_N.svg"],"sourcesContent":["<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\">\n  <path d=\"m13.75,16h-7.5c-1.24072,0-2.25-1.00977-2.25-2.25v-7.5c0-1.24023,1.00928-2.25,2.25-2.25h7.5c1.24072,0,2.25,1.00977,2.25,2.25v7.5c0,1.24023-1.00928,2.25-2.25,2.25ZM6.25,5.5c-.41357,0-.75.33691-.75.75v7.5c0,.41309.33643.75.75.75h7.5c.41357,0,.75-.33691.75-.75v-7.5c0-.41309-.33643-.75-.75-.75h-7.5Z\" fill=\"var(--iconPrimary, #222)\"/>\n  <path d=\"m1.75,14.75c-.41406,0-.75-.33594-.75-.75V6c0-.41406.33594-.75.75-.75s.75.33594.75.75v8c0,.41406-.33594.75-.75.75Z\" fill=\"var(--iconPrimary, #222)\"/>\n  <path d=\"m18.25,14.75c-.41406,0-.75-.33594-.75-.75V6c0-.41406.33594-.75.75-.75s.75.33594.75.75v8c0,.41406-.33594.75-.75.75Z\" fill=\"var(--iconPrimary, #222)\"/>\n  <path d=\"m12.19618,9.41442l-3.17813-1.70809c-.46031-.2474-1.01805.08603-1.01805.60862v3.41618c0,.52258.55773.85601,1.01805.60861l3.17814-1.7081c.48512-.26073.48512-.95649,0-1.21722Z\" fill=\"var(--iconPrimary, #222)\"/>\n</svg>"],"names":[],"version":3,"file":"Slideshow.cjs.map"}

package/icons/Slideshow.mjs

@@ -1,17 +1,20 @@
 import {IconContext as $ac8c32e6775ddd1f$export$a49f528ae1a4d0ed} from "./Icon.mjs";
+import {SkeletonWrapper as $5ad421ec19460c48$export$6069cbe61f690103, useSkeletonIcon as $5ad421ec19460c48$export$4b7803c08fe9a32b} from "./Skeleton.mjs";
 import {jsxs as $9AkAX$jsxs, jsx as $9AkAX$jsx} from "react/jsx-runtime";
-import {useRef as $9AkAX$useRef} from "react";
+import {forwardRef as $9AkAX$forwardRef, useRef as $9AkAX$useRef} from "react";
 import {useContextProps as $9AkAX$useContextProps} from "react-aria-components";
 
 
 
 
 
-const $2ad636826a6192d3$var$SvgComponent = (props)=>/*#__PURE__*/ (0, $9AkAX$jsxs)("svg", {
+
+const $2ad636826a6192d3$var$SvgComponent = (props, ref)=>/*#__PURE__*/ (0, $9AkAX$jsxs)("svg", {
         xmlns: "http://www.w3.org/2000/svg",
         width: 20,
         height: 20,
         viewBox: "0 0 20 20",
+        ref: ref,
         ...props,
         children: [
             /*#__PURE__*/ (0, $9AkAX$jsx)("path", {
@@ -24,6 +27,7 @@ const $2ad636826a6192d3$var$SvgComponent = (props)=>/*#__PURE__*/ (0, $9AkAX$jsx
             })
         ]
     });
+const $2ad636826a6192d3$var$ForwardRef = /*#__PURE__*/ (0, $9AkAX$forwardRef)($2ad636826a6192d3$var$SvgComponent);
 function $2ad636826a6192d3$export$2e2bcd8739ae039(props) {
     let ref = (0, $9AkAX$useRef)(null);
     let ctx;
@@ -34,15 +38,17 @@ function $2ad636826a6192d3$export$2e2bcd8739ae039(props) {
     let { render: render, styles: styles } = ctx;
     let { UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style, slot: slot, 'aria-label': ariaLabel, 'aria-hidden': ariaHidden, ...otherProps } = props;
     if (!ariaHidden) ariaHidden = undefined;
-    let svg = /*#__PURE__*/ (0, $9AkAX$jsx)($2ad636826a6192d3$var$SvgComponent, {
-        ...otherProps,
-        focusable: false,
-        "aria-label": ariaLabel,
-        "aria-hidden": ariaLabel ? ariaHidden || undefined : true,
-        role: "img",
-        "data-slot": slot,
-        className: (UNSAFE_className ?? '') + ' ' + (styles || ''),
-        style: UNSAFE_style
+    let svg = /*#__PURE__*/ (0, $9AkAX$jsx)((0, $5ad421ec19460c48$export$6069cbe61f690103), {
+        children: /*#__PURE__*/ (0, $9AkAX$jsx)($2ad636826a6192d3$var$ForwardRef, {
+            ...otherProps,
+            focusable: false,
+            "aria-label": ariaLabel,
+            "aria-hidden": ariaLabel ? ariaHidden || undefined : true,
+            role: "img",
+            "data-slot": slot,
+            className: (UNSAFE_className ?? '') + ' ' + (0, $5ad421ec19460c48$export$4b7803c08fe9a32b)(styles),
+            style: UNSAFE_style
+        })
     });
     if (render) return render(svg);
     return svg;

package/icons/Slideshow.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;AAMA,MAAM,qCAAe,CAAC,sBAAmC,iBAAC;QAAI,OAAM;QAA6B,OAAO;QAAI,QAAQ;QAAI,SAAQ;QAAa,GAAG,KAAK;;0BAAE,gBAAC;gBAAK,GAAE;gBAA4b,MAAK;;0BAAgH,gBAAC;gBAAK,GAAE;gBAA8H,MAAK;;;;AAG50B,kDAAmB,KAAgB;IAChD,IAAI,MAAM,CAAA,GAAA,aAAK,EAAc;IAC7B,IAAI;IACJ,sEAAsE;IACtE,CAAC,KAAK,IAAI,GAAG,CAAA,GAAA,sBAAc,EAAE;QAAC,MAAM,MAAM,IAAI,IAAI;IAAM,GAAuB,KAAK,CAAA,GAAA,yCAAU;IAC9F,IAAI,UAAC,MAAM,UAAE,MAAM,EAAC,GAAG;IACvB,IAAI,oBACF,gBAAgB,gBAChB,YAAY,QACZ,IAAI,EACJ,cAAc,SAAS,EACvB,eAAe,UAAU,EACzB,GAAG,YACJ,GAAG;IAEJ,IAAI,CAAC,YACH,aAAa;IAGf,IAAI,oBACF,gBAAC;QACE,GAAG,UAAU;QACd,WAAW;QACX,cAAY;QACZ,eAAa,YAAa,cAAc,YAAa;QACrD,MAAK;QACL,aAAW;QACX,WAAW,AAAC,CAAA,oBAAoB,EAAC,IAAK,MAAO,CAAA,UAAU,EAAC;QACxD,OAAO;;IAGX,IAAI,QACF,OAAO,OAAO;IAGhB,OAAO;AACT","sources":["packages/@react-spectrum/s2/s2wf-icons/S2_Icon_Slideshow_20_N.svg"],"sourcesContent":["<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\">\n  <path d=\"m13.75,16h-7.5c-1.24072,0-2.25-1.00977-2.25-2.25v-7.5c0-1.24023,1.00928-2.25,2.25-2.25h7.5c1.24072,0,2.25,1.00977,2.25,2.25v7.5c0,1.24023-1.00928,2.25-2.25,2.25ZM6.25,5.5c-.41357,0-.75.33691-.75.75v7.5c0,.41309.33643.75.75.75h7.5c.41357,0,.75-.33691.75-.75v-7.5c0-.41309-.33643-.75-.75-.75h-7.5Z\" fill=\"var(--iconPrimary, #222)\"/>\n  <path d=\"m1.75,14.75c-.41406,0-.75-.33594-.75-.75V6c0-.41406.33594-.75.75-.75s.75.33594.75.75v8c0,.41406-.33594.75-.75.75Z\" fill=\"var(--iconPrimary, #222)\"/>\n  <path d=\"m18.25,14.75c-.41406,0-.75-.33594-.75-.75V6c0-.41406.33594-.75.75-.75s.75.33594.75.75v8c0,.41406-.33594.75-.75.75Z\" fill=\"var(--iconPrimary, #222)\"/>\n  <path d=\"m12.19618,9.41442l-3.17813-1.70809c-.46031-.2474-1.01805.08603-1.01805.60862v3.41618c0,.52258.55773.85601,1.01805.60861l3.17814-1.7081c.48512-.26073.48512-.95649,0-1.21722Z\" fill=\"var(--iconPrimary, #222)\"/>\n</svg>"],"names":[],"version":3,"file":"Slideshow.mjs.map"}
+{"mappings":";;;;;;;;;;;AAOA,MAAM,qCAAe,CAAC,OAAgC,oBAA4B,iBAAC;QAAI,OAAM;QAA6B,OAAO;QAAI,QAAQ;QAAI,SAAQ;QAAY,KAAK;QAAM,GAAG,KAAK;;0BAAE,gBAAC;gBAAK,GAAE;gBAA4b,MAAK;;0BAAgH,gBAAC;gBAAK,GAAE;gBAA8H,MAAK;;;;AAC93B,MAAM,iDAAa,CAAA,GAAA,iBAAS,EAAE;AAGf,kDAAmB,KAAgB;IAChD,IAAI,MAAM,CAAA,GAAA,aAAK,EAAc;IAC7B,IAAI;IACJ,sEAAsE;IACtE,CAAC,KAAK,IAAI,GAAG,CAAA,GAAA,sBAAc,EAAE;QAAC,MAAM,MAAM,IAAI,IAAI;IAAM,GAAuB,KAAK,CAAA,GAAA,yCAAU;IAC9F,IAAI,UAAC,MAAM,UAAE,MAAM,EAAC,GAAG;IACvB,IAAI,oBACF,gBAAgB,gBAChB,YAAY,QACZ,IAAI,EACJ,cAAc,SAAS,EACvB,eAAe,UAAU,EACzB,GAAG,YACJ,GAAG;IAEJ,IAAI,CAAC,YACH,aAAa;IAGf,IAAI,oBACF,gBAAC,CAAA,GAAA,yCAAc;kBACb,cAAA,gBAAC;YACE,GAAG,UAAU;YACd,WAAW;YACX,cAAY;YACZ,eAAa,YAAa,cAAc,YAAa;YACrD,MAAK;YACL,aAAW;YACX,WAAW,AAAC,CAAA,oBAAoB,EAAC,IAAK,MAAM,CAAA,GAAA,yCAAc,EAAE;YAC5D,OAAO;;;IAIb,IAAI,QACF,OAAO,OAAO;IAGhB,OAAO;AACT","sources":["packages/@react-spectrum/s2/s2wf-icons/S2_Icon_Slideshow_20_N.svg"],"sourcesContent":["<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\">\n  <path d=\"m13.75,16h-7.5c-1.24072,0-2.25-1.00977-2.25-2.25v-7.5c0-1.24023,1.00928-2.25,2.25-2.25h7.5c1.24072,0,2.25,1.00977,2.25,2.25v7.5c0,1.24023-1.00928,2.25-2.25,2.25ZM6.25,5.5c-.41357,0-.75.33691-.75.75v7.5c0,.41309.33643.75.75.75h7.5c.41357,0,.75-.33691.75-.75v-7.5c0-.41309-.33643-.75-.75-.75h-7.5Z\" fill=\"var(--iconPrimary, #222)\"/>\n  <path d=\"m1.75,14.75c-.41406,0-.75-.33594-.75-.75V6c0-.41406.33594-.75.75-.75s.75.33594.75.75v8c0,.41406-.33594.75-.75.75Z\" fill=\"var(--iconPrimary, #222)\"/>\n  <path d=\"m18.25,14.75c-.41406,0-.75-.33594-.75-.75V6c0-.41406.33594-.75.75-.75s.75.33594.75.75v8c0,.41406-.33594.75-.75.75Z\" fill=\"var(--iconPrimary, #222)\"/>\n  <path d=\"m12.19618,9.41442l-3.17813-1.70809c-.46031-.2474-1.01805.08603-1.01805.60862v3.41618c0,.52258.55773.85601,1.01805.60861l3.17814-1.7081c.48512-.26073.48512-.95649,0-1.21722Z\" fill=\"var(--iconPrimary, #222)\"/>\n</svg>"],"names":[],"version":3,"file":"Slideshow.mjs.map"}

package/icons/SocialNetwork.cjs

@@ -1,4 +1,5 @@
 var $bde97c91243ed164$exports = require("./Icon.cjs");
+var $5eb75e0c130e0669$exports = require("./Skeleton.cjs");
 var $ynln1$reactjsxruntime = require("react/jsx-runtime");
 var $ynln1$react = require("react");
 var $ynln1$reactariacomponents = require("react-aria-components");
@@ -19,11 +20,13 @@ $parcel$export(module.exports, "default", () => $60cafe3054351828$export$2e2bcd8
 
 
 
-const $60cafe3054351828$var$SvgComponent = (props)=>/*#__PURE__*/ (0, $ynln1$reactjsxruntime.jsxs)("svg", {
+
+const $60cafe3054351828$var$SvgComponent = (props, ref)=>/*#__PURE__*/ (0, $ynln1$reactjsxruntime.jsxs)("svg", {
         xmlns: "http://www.w3.org/2000/svg",
         width: 20,
         height: 20,
         viewBox: "0 0 20 20",
+        ref: ref,
         ...props,
         children: [
             /*#__PURE__*/ (0, $ynln1$reactjsxruntime.jsx)("path", {
@@ -105,6 +108,7 @@ const $60cafe3054351828$var$SvgComponent = (props)=>/*#__PURE__*/ (0, $ynln1$rea
             })
         ]
     });
+const $60cafe3054351828$var$ForwardRef = /*#__PURE__*/ (0, $ynln1$react.forwardRef)($60cafe3054351828$var$SvgComponent);
 function $60cafe3054351828$export$2e2bcd8739ae039(props) {
     let ref = (0, $ynln1$react.useRef)(null);
     let ctx;
@@ -115,15 +119,17 @@ function $60cafe3054351828$export$2e2bcd8739ae039(props) {
     let { render: render, styles: styles } = ctx;
     let { UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style, slot: slot, 'aria-label': ariaLabel, 'aria-hidden': ariaHidden, ...otherProps } = props;
     if (!ariaHidden) ariaHidden = undefined;
-    let svg = /*#__PURE__*/ (0, $ynln1$reactjsxruntime.jsx)($60cafe3054351828$var$SvgComponent, {
-        ...otherProps,
-        focusable: false,
-        "aria-label": ariaLabel,
-        "aria-hidden": ariaLabel ? ariaHidden || undefined : true,
-        role: "img",
-        "data-slot": slot,
-        className: (UNSAFE_className ?? '') + ' ' + (styles || ''),
-        style: UNSAFE_style
+    let svg = /*#__PURE__*/ (0, $ynln1$reactjsxruntime.jsx)((0, $5eb75e0c130e0669$exports.SkeletonWrapper), {
+        children: /*#__PURE__*/ (0, $ynln1$reactjsxruntime.jsx)($60cafe3054351828$var$ForwardRef, {
+            ...otherProps,
+            focusable: false,
+            "aria-label": ariaLabel,
+            "aria-hidden": ariaLabel ? ariaHidden || undefined : true,
+            role: "img",
+            "data-slot": slot,
+            className: (UNSAFE_className ?? '') + ' ' + (0, $5eb75e0c130e0669$exports.useSkeletonIcon)(styles),
+            style: UNSAFE_style
+        })
     });
     if (render) return render(svg);
     return svg;