@cloudscape-design/components 3.0.1296 → 3.0.1298

package/internal/generated/styles/tokens.js

@@ -588,6 +588,8 @@ export var colorIconActionCardDefault = "var(--color-icon-action-card-default-an
 export var colorIconActionCardHover = "var(--color-icon-action-card-hover-qxq4pp, #002b66)";
 export var colorIconActionCardActive = "var(--color-icon-action-card-active-rhp94s, #002b66)";
 export var colorIconActionCardDisabled = "var(--color-icon-action-card-disabled-wm3kyf, #b4b4bb)";
+export var colorBackgroundSkeleton = "var(--color-background-skeleton-sjxg4n, #ebebf0)";
+export var colorBackgroundSkeletonWave = "var(--color-background-skeleton-wave-1dy97d, #f6f6f9)";
 export var fontBoxValueLargeWeight = "var(--font-box-value-large-weight-wr00sw, 700)";
 export var fontButtonLetterSpacing = "var(--font-button-letter-spacing-ufowe3, 0.005em)";
 export var fontChartDetailSize = "var(--font-chart-detail-size-9qr25q, 12px)";
@@ -714,6 +716,7 @@ export var borderWidthActionCardDefault = "var(--border-width-action-card-defaul
 export var borderWidthActionCardHover = "var(--border-width-action-card-hover-02l6fg, 1px)";
 export var borderWidthActionCardActive = "var(--border-width-action-card-active-pwtgzu, 1px)";
 export var borderWidthActionCardDisabled = "var(--border-width-action-card-disabled-rdvlbc, 1px)";
+export var borderRadiusSkeleton = "var(--border-radius-skeleton-9lkvfi, 8px)";
 export var motionDurationExtraFast = "var(--motion-duration-extra-fast-l4w48j, 45ms)";
 export var motionDurationExtraSlow = "var(--motion-duration-extra-slow-29bqym, 270ms)";
 export var motionDurationFast = "var(--motion-duration-fast-unntf6, 90ms)";

package/internal/generated/theming/index.cjs

@@ -2399,6 +2399,14 @@ module.exports.preset = {
         "light": "{colorNeutral400}",
         "dark": "{colorNeutral600}"
       },
+      "colorBackgroundSkeleton": {
+        "light": "{colorNeutral250}",
+        "dark": "{colorNeutral750}"
+      },
+      "colorBackgroundSkeletonWave": {
+        "light": "{colorNeutral150}",
+        "dark": "{colorNeutral700}"
+      },
       "fontBoxValueLargeWeight": "700",
       "fontButtonLetterSpacing": "0.005em",
       "fontChartDetailSize": "{fontSizeBodyS}",
@@ -2525,6 +2533,7 @@ module.exports.preset = {
       "borderWidthActionCardHover": "{borderWidthCard}",
       "borderWidthActionCardActive": "{borderWidthCard}",
       "borderWidthActionCardDisabled": "{borderWidthCard}",
+      "borderRadiusSkeleton": "8px",
       "motionDurationExtraFast": {
         "default": "45ms",
         "disabled": "0ms"
@@ -5033,6 +5042,14 @@ module.exports.preset = {
             "light": "{colorNeutral600}",
             "dark": "{colorNeutral600}"
           },
+          "colorBackgroundSkeleton": {
+            "light": "{colorNeutral750}",
+            "dark": "{colorNeutral750}"
+          },
+          "colorBackgroundSkeletonWave": {
+            "light": "{colorNeutral700}",
+            "dark": "{colorNeutral700}"
+          },
           "colorPrimary50": "#f0fbff",
           "colorPrimary100": "#d1f1ff",
           "colorPrimary200": "#b8e7ff",
@@ -6502,6 +6519,14 @@ module.exports.preset = {
             "light": "{colorNeutral600}",
             "dark": "{colorNeutral600}"
           },
+          "colorBackgroundSkeleton": {
+            "light": "{colorNeutral750}",
+            "dark": "{colorNeutral750}"
+          },
+          "colorBackgroundSkeletonWave": {
+            "light": "{colorNeutral700}",
+            "dark": "{colorNeutral700}"
+          },
           "colorPrimary50": "#f0fbff",
           "colorPrimary100": "#d1f1ff",
           "colorPrimary200": "#b8e7ff",
@@ -7898,6 +7923,14 @@ module.exports.preset = {
           "colorIconActionCardDisabled": {
             "light": "{colorNeutral400}",
             "dark": "{colorNeutral600}"
+          },
+          "colorBackgroundSkeleton": {
+            "light": "{colorNeutral250}",
+            "dark": "{colorNeutral750}"
+          },
+          "colorBackgroundSkeletonWave": {
+            "light": "{colorNeutral150}",
+            "dark": "{colorNeutral700}"
           }
         }
       },
@@ -9180,6 +9213,14 @@ module.exports.preset = {
           "colorIconActionCardDisabled": {
             "light": "{colorNeutral400}",
             "dark": "{colorNeutral600}"
+          },
+          "colorBackgroundSkeleton": {
+            "light": "{colorNeutral250}",
+            "dark": "{colorNeutral750}"
+          },
+          "colorBackgroundSkeletonWave": {
+            "light": "{colorNeutral150}",
+            "dark": "{colorNeutral700}"
           }
         }
       },
@@ -10463,6 +10504,14 @@ module.exports.preset = {
             "light": "{colorNeutral400}",
             "dark": "{colorNeutral600}"
           },
+          "colorBackgroundSkeleton": {
+            "light": "{colorNeutral250}",
+            "dark": "{colorNeutral750}"
+          },
+          "colorBackgroundSkeletonWave": {
+            "light": "{colorNeutral150}",
+            "dark": "{colorNeutral700}"
+          },
           "fontExpandableHeadingSize": "14px",
           "borderDividerSectionWidth": "1px"
         }
@@ -11746,6 +11795,14 @@ module.exports.preset = {
           "colorIconActionCardDisabled": {
             "light": "{colorNeutral600}",
             "dark": "{colorNeutral600}"
+          },
+          "colorBackgroundSkeleton": {
+            "light": "{colorNeutral750}",
+            "dark": "{colorNeutral750}"
+          },
+          "colorBackgroundSkeletonWave": {
+            "light": "{colorNeutral700}",
+            "dark": "{colorNeutral700}"
           }
         }
       },
@@ -12351,6 +12408,8 @@ module.exports.preset = {
       "colorIconActionCardHover": "color",
       "colorIconActionCardActive": "color",
       "colorIconActionCardDisabled": "color",
+      "colorBackgroundSkeleton": "color",
+      "colorBackgroundSkeletonWave": "color",
       "motionDurationExtraFast": "motion",
       "motionDurationExtraSlow": "motion",
       "motionDurationFast": "motion",
@@ -14208,6 +14267,8 @@ module.exports.preset = {
     "colorIconActionCardHover": "color-icon-action-card-hover",
     "colorIconActionCardActive": "color-icon-action-card-active",
     "colorIconActionCardDisabled": "color-icon-action-card-disabled",
+    "colorBackgroundSkeleton": "color-background-skeleton",
+    "colorBackgroundSkeletonWave": "color-background-skeleton-wave",
     "fontBoxValueLargeWeight": "font-box-value-large-weight",
     "fontButtonLetterSpacing": "font-button-letter-spacing",
     "fontChartDetailSize": "font-chart-detail-size",
@@ -14334,6 +14395,7 @@ module.exports.preset = {
     "borderWidthActionCardHover": "border-width-action-card-hover",
     "borderWidthActionCardActive": "border-width-action-card-active",
     "borderWidthActionCardDisabled": "border-width-action-card-disabled",
+    "borderRadiusSkeleton": "border-radius-skeleton",
     "motionDurationExtraFast": "motion-duration-extra-fast",
     "motionDurationExtraSlow": "motion-duration-extra-slow",
     "motionDurationFast": "motion-duration-fast",
@@ -15112,6 +15174,8 @@ module.exports.preset = {
     "colorIconActionCardHover": "--color-icon-action-card-hover-qxq4pp",
     "colorIconActionCardActive": "--color-icon-action-card-active-rhp94s",
     "colorIconActionCardDisabled": "--color-icon-action-card-disabled-wm3kyf",
+    "colorBackgroundSkeleton": "--color-background-skeleton-sjxg4n",
+    "colorBackgroundSkeletonWave": "--color-background-skeleton-wave-1dy97d",
     "fontBoxValueLargeWeight": "--font-box-value-large-weight-wr00sw",
     "fontButtonLetterSpacing": "--font-button-letter-spacing-ufowe3",
     "fontChartDetailSize": "--font-chart-detail-size-9qr25q",
@@ -15238,6 +15302,7 @@ module.exports.preset = {
     "borderWidthActionCardHover": "--border-width-action-card-hover-02l6fg",
     "borderWidthActionCardActive": "--border-width-action-card-active-pwtgzu",
     "borderWidthActionCardDisabled": "--border-width-action-card-disabled-rdvlbc",
+    "borderRadiusSkeleton": "--border-radius-skeleton-9lkvfi",
     "motionDurationExtraFast": "--motion-duration-extra-fast-l4w48j",
     "motionDurationExtraSlow": "--motion-duration-extra-slow-29bqym",
     "motionDurationFast": "--motion-duration-fast-unntf6",

package/internal/generated/theming/index.js

@@ -2399,6 +2399,14 @@ export var preset = {
         "light": "{colorNeutral400}",
         "dark": "{colorNeutral600}"
       },
+      "colorBackgroundSkeleton": {
+        "light": "{colorNeutral250}",
+        "dark": "{colorNeutral750}"
+      },
+      "colorBackgroundSkeletonWave": {
+        "light": "{colorNeutral150}",
+        "dark": "{colorNeutral700}"
+      },
       "fontBoxValueLargeWeight": "700",
       "fontButtonLetterSpacing": "0.005em",
       "fontChartDetailSize": "{fontSizeBodyS}",
@@ -2525,6 +2533,7 @@ export var preset = {
       "borderWidthActionCardHover": "{borderWidthCard}",
       "borderWidthActionCardActive": "{borderWidthCard}",
       "borderWidthActionCardDisabled": "{borderWidthCard}",
+      "borderRadiusSkeleton": "8px",
       "motionDurationExtraFast": {
         "default": "45ms",
         "disabled": "0ms"
@@ -5033,6 +5042,14 @@ export var preset = {
             "light": "{colorNeutral600}",
             "dark": "{colorNeutral600}"
           },
+          "colorBackgroundSkeleton": {
+            "light": "{colorNeutral750}",
+            "dark": "{colorNeutral750}"
+          },
+          "colorBackgroundSkeletonWave": {
+            "light": "{colorNeutral700}",
+            "dark": "{colorNeutral700}"
+          },
           "colorPrimary50": "#f0fbff",
           "colorPrimary100": "#d1f1ff",
           "colorPrimary200": "#b8e7ff",
@@ -6502,6 +6519,14 @@ export var preset = {
             "light": "{colorNeutral600}",
             "dark": "{colorNeutral600}"
           },
+          "colorBackgroundSkeleton": {
+            "light": "{colorNeutral750}",
+            "dark": "{colorNeutral750}"
+          },
+          "colorBackgroundSkeletonWave": {
+            "light": "{colorNeutral700}",
+            "dark": "{colorNeutral700}"
+          },
           "colorPrimary50": "#f0fbff",
           "colorPrimary100": "#d1f1ff",
           "colorPrimary200": "#b8e7ff",
@@ -7898,6 +7923,14 @@ export var preset = {
           "colorIconActionCardDisabled": {
             "light": "{colorNeutral400}",
             "dark": "{colorNeutral600}"
+          },
+          "colorBackgroundSkeleton": {
+            "light": "{colorNeutral250}",
+            "dark": "{colorNeutral750}"
+          },
+          "colorBackgroundSkeletonWave": {
+            "light": "{colorNeutral150}",
+            "dark": "{colorNeutral700}"
           }
         }
       },
@@ -9180,6 +9213,14 @@ export var preset = {
           "colorIconActionCardDisabled": {
             "light": "{colorNeutral400}",
             "dark": "{colorNeutral600}"
+          },
+          "colorBackgroundSkeleton": {
+            "light": "{colorNeutral250}",
+            "dark": "{colorNeutral750}"
+          },
+          "colorBackgroundSkeletonWave": {
+            "light": "{colorNeutral150}",
+            "dark": "{colorNeutral700}"
           }
         }
       },
@@ -10463,6 +10504,14 @@ export var preset = {
             "light": "{colorNeutral400}",
             "dark": "{colorNeutral600}"
           },
+          "colorBackgroundSkeleton": {
+            "light": "{colorNeutral250}",
+            "dark": "{colorNeutral750}"
+          },
+          "colorBackgroundSkeletonWave": {
+            "light": "{colorNeutral150}",
+            "dark": "{colorNeutral700}"
+          },
           "fontExpandableHeadingSize": "14px",
           "borderDividerSectionWidth": "1px"
         }
@@ -11746,6 +11795,14 @@ export var preset = {
           "colorIconActionCardDisabled": {
             "light": "{colorNeutral600}",
             "dark": "{colorNeutral600}"
+          },
+          "colorBackgroundSkeleton": {
+            "light": "{colorNeutral750}",
+            "dark": "{colorNeutral750}"
+          },
+          "colorBackgroundSkeletonWave": {
+            "light": "{colorNeutral700}",
+            "dark": "{colorNeutral700}"
           }
         }
       },
@@ -12351,6 +12408,8 @@ export var preset = {
       "colorIconActionCardHover": "color",
       "colorIconActionCardActive": "color",
       "colorIconActionCardDisabled": "color",
+      "colorBackgroundSkeleton": "color",
+      "colorBackgroundSkeletonWave": "color",
       "motionDurationExtraFast": "motion",
       "motionDurationExtraSlow": "motion",
       "motionDurationFast": "motion",
@@ -14208,6 +14267,8 @@ export var preset = {
     "colorIconActionCardHover": "color-icon-action-card-hover",
     "colorIconActionCardActive": "color-icon-action-card-active",
     "colorIconActionCardDisabled": "color-icon-action-card-disabled",
+    "colorBackgroundSkeleton": "color-background-skeleton",
+    "colorBackgroundSkeletonWave": "color-background-skeleton-wave",
     "fontBoxValueLargeWeight": "font-box-value-large-weight",
     "fontButtonLetterSpacing": "font-button-letter-spacing",
     "fontChartDetailSize": "font-chart-detail-size",
@@ -14334,6 +14395,7 @@ export var preset = {
     "borderWidthActionCardHover": "border-width-action-card-hover",
     "borderWidthActionCardActive": "border-width-action-card-active",
     "borderWidthActionCardDisabled": "border-width-action-card-disabled",
+    "borderRadiusSkeleton": "border-radius-skeleton",
     "motionDurationExtraFast": "motion-duration-extra-fast",
     "motionDurationExtraSlow": "motion-duration-extra-slow",
     "motionDurationFast": "motion-duration-fast",
@@ -15112,6 +15174,8 @@ export var preset = {
     "colorIconActionCardHover": "--color-icon-action-card-hover-qxq4pp",
     "colorIconActionCardActive": "--color-icon-action-card-active-rhp94s",
     "colorIconActionCardDisabled": "--color-icon-action-card-disabled-wm3kyf",
+    "colorBackgroundSkeleton": "--color-background-skeleton-sjxg4n",
+    "colorBackgroundSkeletonWave": "--color-background-skeleton-wave-1dy97d",
     "fontBoxValueLargeWeight": "--font-box-value-large-weight-wr00sw",
     "fontButtonLetterSpacing": "--font-button-letter-spacing-ufowe3",
     "fontChartDetailSize": "--font-chart-detail-size-9qr25q",
@@ -15238,6 +15302,7 @@ export var preset = {
     "borderWidthActionCardHover": "--border-width-action-card-hover-02l6fg",
     "borderWidthActionCardActive": "--border-width-action-card-active-pwtgzu",
     "borderWidthActionCardDisabled": "--border-width-action-card-disabled-rdvlbc",
+    "borderRadiusSkeleton": "--border-radius-skeleton-9lkvfi",
     "motionDurationExtraFast": "--motion-duration-extra-fast-l4w48j",
     "motionDurationExtraSlow": "--motion-duration-extra-slow-29bqym",
     "motionDurationFast": "--motion-duration-fast-unntf6",

package/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "6f1df81380f2d4a269fe203c8ddd1fcdf2d4b25d"
+  "commit": "be984ac790ad40485a7f8bfe6c41161046f3033a"
 }

package/live-region/internal.d.ts

@@ -8,6 +8,11 @@ interface InternalLiveRegionProps extends InternalBaseComponentProps, LiveRegion
    * interrupted by other actions (like text entry in text filtering).
    */
   delay?: number;
+  /**
+   * By default, the live region will announce the message immediately on mount.
+   * This attribute prevents that.
+   */
+  preventInitialAnnouncement?: boolean;
   /**
    * Use a list of strings and/or refs to existing elements for building the
    * announcement text. If this property is set, `children` and `message` will

package/live-region/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/live-region/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAMtE,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAK/C,UAAU,uBAAwB,SAAQ,0BAA0B,EAAE,eAAe;IACnF;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;OAIG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG,SAAS,CAAC,CAAC;CAC5E;AAED,MAAM,WAAW,qBAAqB;IACpC;;;;;;;OAOG;IACH,UAAU,IAAI,IAAI,CAAC;CACpB;;AAED,wBAyEG;AAcH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,WAAW,GAAG,MAAM,CAU5D"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/live-region/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAMtE,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAK/C,UAAU,uBAAwB,SAAQ,0BAA0B,EAAE,eAAe;IACnF;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,0BAA0B,CAAC,EAAE,OAAO,CAAC;IAErC;;;;OAIG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG,SAAS,CAAC,CAAC;CAC5E;AAED,MAAM,WAAW,qBAAqB;IACpC;;;;;;;OAOG;IACH,UAAU,IAAI,IAAI,CAAC;CACpB;;AAED,wBAmFG;AAcH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,WAAW,GAAG,MAAM,CAU5D"}

package/live-region/internal.js

@@ -7,7 +7,7 @@ import { getBaseProps } from '../internal/base-component';
 import { LiveRegionController } from './controller';
 import styles from './styles.css.js';
 import testUtilStyles from './test-classes/styles.css.js';
-export default React.forwardRef(function InternalLiveRegion({ assertive = false, hidden = false, tagName: TagName = 'div', delay, sources, children, __internalRootRef, className, ...restProps }, ref) {
+export default React.forwardRef(function InternalLiveRegion({ assertive = false, hidden = false, tagName: TagName = 'div', delay, sources, preventInitialAnnouncement, children, __internalRootRef, className, ...restProps }, ref) {
     const baseProps = getBaseProps(restProps);
     const childrenRef = useRef(null);
     const mergedRef = useMergeRefs(childrenRef, __internalRootRef);
@@ -41,11 +41,19 @@ export default React.forwardRef(function InternalLiveRegion({ assertive = false,
             return extractTextContent(childrenRef.current);
         }
     };
+    const initialAnnouncementContent = useRef();
     // Call the controller on every render. The controller will deduplicate the
     // message against the previous announcement internally.
     useEffect(() => {
         var _a;
-        (_a = liveRegionControllerRef.current) === null || _a === void 0 ? void 0 : _a.announce({ message: getContent() });
+        const message = getContent();
+        if (initialAnnouncementContent.current === undefined) {
+            initialAnnouncementContent.current = message;
+        }
+        if (preventInitialAnnouncement && initialAnnouncementContent.current === message) {
+            return;
+        }
+        (_a = liveRegionControllerRef.current) === null || _a === void 0 ? void 0 : _a.announce({ message });
     });
     useImperativeHandle(ref, () => ({
         reannounce() {

package/live-region/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/live-region/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useEffect, useImperativeHandle, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { LiveRegionController } from './controller';\nimport { LiveRegionProps } from './interfaces';\n\nimport styles from './styles.css.js';\nimport testUtilStyles from './test-classes/styles.css.js';\n\ninterface InternalLiveRegionProps extends InternalBaseComponentProps, LiveRegionProps {\n  /**\n   * The delay between each announcement from this live region. You should\n   * leave this set to the default unless this live region is commonly\n   * interrupted by other actions (like text entry in text filtering).\n   */\n  delay?: number;\n\n  /**\n   * Use a list of strings and/or refs to existing elements for building the\n   * announcement text. If this property is set, `children` and `message` will\n   * be ignored.\n   */\n  sources?: ReadonlyArray<string | React.RefObject<HTMLElement> | undefined>;\n}\n\nexport interface InternalLiveRegionRef {\n  /**\n   * Force the live region to announce the message, even if it's the same as\n   * the previously announced message.\n   *\n   * This is useful when making status updates after a change (e.g. filtering)\n   * where the new message might be the same as the old one, but the announcement\n   * also serves to tell screen reader users that the action was performed.\n   */\n  reannounce(): void;\n}\n\nexport default React.forwardRef(function InternalLiveRegion(\n  {\n    assertive = false,\n    hidden = false,\n    tagName: TagName = 'div',\n    delay,\n    sources,\n    children,\n    __internalRootRef,\n    className,\n    ...restProps\n  }: InternalLiveRegionProps,\n  ref: React.Ref<InternalLiveRegionRef>\n) {\n  const baseProps = getBaseProps(restProps);\n  const childrenRef = useRef<HTMLSpanElement & HTMLDivElement>(null);\n  const mergedRef = useMergeRefs(childrenRef, __internalRootRef);\n\n  useEffect(() => {\n    // We have to do this because `inert` isn't properly supported until\n    // React 19 and this seems much more maintainable than version detection.\n    // `inert` is better than `hidden` because it also blocks pointer and\n    // focus events as well as hiding the contents from screen readers.\n    // https://github.com/facebook/react/issues/17157\n    if (childrenRef.current) {\n      childrenRef.current.inert = hidden;\n    }\n  }, [hidden]);\n\n  // Initialize the live region controller inside an effect. We have to do this\n  // because the controller depends on DOM elements, which aren't available on the\n  // server.\n  const liveRegionControllerRef = useRef<LiveRegionController | undefined>();\n  useEffect(() => {\n    const liveRegionController = new LiveRegionController(assertive ? 'assertive' : 'polite', delay);\n    liveRegionControllerRef.current = liveRegionController;\n    return () => {\n      liveRegionController.destroy();\n      liveRegionControllerRef.current = undefined;\n    };\n  }, [assertive, delay]);\n\n  const getContent = () => {\n    if (sources) {\n      return getSourceContent(sources);\n    }\n    if (childrenRef.current) {\n      return extractTextContent(childrenRef.current);\n    }\n  };\n\n  // Call the controller on every render. The controller will deduplicate the\n  // message against the previous announcement internally.\n  useEffect(() => {\n    liveRegionControllerRef.current?.announce({ message: getContent() });\n  });\n\n  useImperativeHandle(ref, () => ({\n    reannounce() {\n      liveRegionControllerRef.current?.announce({ message: getContent(), forceReannounce: true });\n    },\n  }));\n\n  return (\n    <TagName\n      ref={mergedRef}\n      {...baseProps}\n      className={clsx(styles.root, testUtilStyles.root, className)}\n      hidden={hidden}\n    >\n      {children}\n    </TagName>\n  );\n});\n\nconst processNode = (childNode: Node): string => {\n  if (childNode.nodeType === Node.TEXT_NODE) {\n    return childNode.textContent || '';\n  }\n\n  if (childNode.nodeType === Node.ELEMENT_NODE) {\n    return extractTextContent(childNode as HTMLElement);\n  }\n\n  return '';\n};\n\nexport function extractTextContent(node: HTMLElement): string {\n  // We use the text content of the node as the announcement text.\n  // This only extracts text content from the node including all its children which is enough for now.\n  // To make it more powerful, it is possible to create a more sophisticated extractor with respect to\n  // ARIA properties to ignore aria-hidden nodes and read ARIA labels from the live content.\n  if (!node || !node?.childNodes?.length) {\n    return '';\n  }\n\n  return Array.from(node.childNodes, processNode).join(' ').replace(/\\s+/g, ' ').trim();\n}\n\nfunction getSourceContent(source: ReadonlyArray<string | React.RefObject<HTMLElement> | undefined>): string {\n  return source\n    .map(item => {\n      if (!item || typeof item === 'string') {\n        return item;\n      }\n      if (item.current) {\n        return extractTextContent(item.current);\n      }\n    })\n    .filter(Boolean)\n    .join(' ');\n}\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/live-region/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useEffect, useImperativeHandle, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { LiveRegionController } from './controller';\nimport { LiveRegionProps } from './interfaces';\n\nimport styles from './styles.css.js';\nimport testUtilStyles from './test-classes/styles.css.js';\n\ninterface InternalLiveRegionProps extends InternalBaseComponentProps, LiveRegionProps {\n  /**\n   * The delay between each announcement from this live region. You should\n   * leave this set to the default unless this live region is commonly\n   * interrupted by other actions (like text entry in text filtering).\n   */\n  delay?: number;\n\n  /**\n   * By default, the live region will announce the message immediately on mount.\n   * This attribute prevents that.\n   */\n  preventInitialAnnouncement?: boolean;\n\n  /**\n   * Use a list of strings and/or refs to existing elements for building the\n   * announcement text. If this property is set, `children` and `message` will\n   * be ignored.\n   */\n  sources?: ReadonlyArray<string | React.RefObject<HTMLElement> | undefined>;\n}\n\nexport interface InternalLiveRegionRef {\n  /**\n   * Force the live region to announce the message, even if it's the same as\n   * the previously announced message.\n   *\n   * This is useful when making status updates after a change (e.g. filtering)\n   * where the new message might be the same as the old one, but the announcement\n   * also serves to tell screen reader users that the action was performed.\n   */\n  reannounce(): void;\n}\n\nexport default React.forwardRef(function InternalLiveRegion(\n  {\n    assertive = false,\n    hidden = false,\n    tagName: TagName = 'div',\n    delay,\n    sources,\n    preventInitialAnnouncement,\n    children,\n    __internalRootRef,\n    className,\n    ...restProps\n  }: InternalLiveRegionProps,\n  ref: React.Ref<InternalLiveRegionRef>\n) {\n  const baseProps = getBaseProps(restProps);\n  const childrenRef = useRef<HTMLSpanElement & HTMLDivElement>(null);\n  const mergedRef = useMergeRefs(childrenRef, __internalRootRef);\n\n  useEffect(() => {\n    // We have to do this because `inert` isn't properly supported until\n    // React 19 and this seems much more maintainable than version detection.\n    // `inert` is better than `hidden` because it also blocks pointer and\n    // focus events as well as hiding the contents from screen readers.\n    // https://github.com/facebook/react/issues/17157\n    if (childrenRef.current) {\n      childrenRef.current.inert = hidden;\n    }\n  }, [hidden]);\n\n  // Initialize the live region controller inside an effect. We have to do this\n  // because the controller depends on DOM elements, which aren't available on the\n  // server.\n  const liveRegionControllerRef = useRef<LiveRegionController | undefined>();\n  useEffect(() => {\n    const liveRegionController = new LiveRegionController(assertive ? 'assertive' : 'polite', delay);\n    liveRegionControllerRef.current = liveRegionController;\n    return () => {\n      liveRegionController.destroy();\n      liveRegionControllerRef.current = undefined;\n    };\n  }, [assertive, delay]);\n\n  const getContent = () => {\n    if (sources) {\n      return getSourceContent(sources);\n    }\n    if (childrenRef.current) {\n      return extractTextContent(childrenRef.current);\n    }\n  };\n\n  const initialAnnouncementContent = useRef<string | undefined>();\n\n  // Call the controller on every render. The controller will deduplicate the\n  // message against the previous announcement internally.\n  useEffect(() => {\n    const message = getContent();\n    if (initialAnnouncementContent.current === undefined) {\n      initialAnnouncementContent.current = message;\n    }\n    if (preventInitialAnnouncement && initialAnnouncementContent.current === message) {\n      return;\n    }\n    liveRegionControllerRef.current?.announce({ message });\n  });\n\n  useImperativeHandle(ref, () => ({\n    reannounce() {\n      liveRegionControllerRef.current?.announce({ message: getContent(), forceReannounce: true });\n    },\n  }));\n\n  return (\n    <TagName\n      ref={mergedRef}\n      {...baseProps}\n      className={clsx(styles.root, testUtilStyles.root, className)}\n      hidden={hidden}\n    >\n      {children}\n    </TagName>\n  );\n});\n\nconst processNode = (childNode: Node): string => {\n  if (childNode.nodeType === Node.TEXT_NODE) {\n    return childNode.textContent || '';\n  }\n\n  if (childNode.nodeType === Node.ELEMENT_NODE) {\n    return extractTextContent(childNode as HTMLElement);\n  }\n\n  return '';\n};\n\nexport function extractTextContent(node: HTMLElement): string {\n  // We use the text content of the node as the announcement text.\n  // This only extracts text content from the node including all its children which is enough for now.\n  // To make it more powerful, it is possible to create a more sophisticated extractor with respect to\n  // ARIA properties to ignore aria-hidden nodes and read ARIA labels from the live content.\n  if (!node || !node?.childNodes?.length) {\n    return '';\n  }\n\n  return Array.from(node.childNodes, processNode).join(' ').replace(/\\s+/g, ' ').trim();\n}\n\nfunction getSourceContent(source: ReadonlyArray<string | React.RefObject<HTMLElement> | undefined>): string {\n  return source\n    .map(item => {\n      if (!item || typeof item === 'string') {\n        return item;\n      }\n      if (item.current) {\n        return extractTextContent(item.current);\n      }\n    })\n    .filter(Boolean)\n    .join(' ');\n}\n"]}

package/package.json

@@ -103,6 +103,7 @@
     "./segmented-control": "./segmented-control/index.js",
     "./select": "./select/index.js",
     "./side-navigation": "./side-navigation/index.js",
+    "./skeleton": "./skeleton/index.js",
     "./slider": "./slider/index.js",
     "./space-between": "./space-between/index.js",
     "./spinner": "./spinner/index.js",
@@ -165,7 +166,7 @@
     "./internal/base-component/index.js",
     "./internal/base-component/styles.css.js"
   ],
-  "version": "3.0.1296",
+  "version": "3.0.1298",
   "repository": {
     "type": "git",
     "url": "https://github.com/cloudscape-design/components.git"

package/skeleton/index.d.ts

@@ -0,0 +1,10 @@
+import { SkeletonProps } from './interfaces';
+export { SkeletonProps };
+export default function Skeleton({
+  variant,
+  display,
+  tagOverride,
+  height,
+  width,
+  ...restProps
+}: SkeletonProps): JSX.Element;

package/skeleton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/skeleton/index.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAG7C,OAAO,EAAE,aAAa,EAAE,CAAC;AAEzB,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,OAAmB,EACnB,OAAiB,EACjB,WAAmB,EACnB,MAAM,EACN,KAAK,EACL,GAAG,SAAS,EACb,EAAE,aAAa,eAqBf"}

package/skeleton/index.js

@@ -0,0 +1,21 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+'use client';
+import React from 'react';
+import useBaseComponent from '../internal/hooks/use-base-component';
+import { applyDisplayName } from '../internal/utils/apply-display-name';
+import InternalSkeleton from './internal';
+export default function Skeleton({ variant = 'dynamic', display = 'block', tagOverride = 'div', height, width, ...restProps }) {
+    const baseComponentProps = useBaseComponent('Skeleton', {
+        props: {
+            variant,
+            display,
+            height,
+            width,
+            tagOverride,
+        },
+    });
+    return (React.createElement(InternalSkeleton, { variant: variant, display: display, height: height, width: width, tagOverride: tagOverride, ...restProps, ...baseComponentProps }));
+}
+applyDisplayName(Skeleton, 'Skeleton');
+//# sourceMappingURL=index.js.map

package/skeleton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/skeleton/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,YAAY,CAAC;AACb,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,gBAAgB,MAAM,YAAY,CAAC;AAI1C,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,OAAO,GAAG,SAAS,EACnB,OAAO,GAAG,OAAO,EACjB,WAAW,GAAG,KAAK,EACnB,MAAM,EACN,KAAK,EACL,GAAG,SAAS,EACE;IACd,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,UAAU,EAAE;QACtD,KAAK,EAAE;YACL,OAAO;YACP,OAAO;YACP,MAAM;YACN,KAAK;YACL,WAAW;SACZ;KACF,CAAC,CAAC;IACH,OAAO,CACL,oBAAC,gBAAgB,IACf,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,KACpB,SAAS,KACT,kBAAkB,GACtB,CACH,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n'use client';\nimport React from 'react';\n\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { SkeletonProps } from './interfaces';\nimport InternalSkeleton from './internal';\n\nexport { SkeletonProps };\n\nexport default function Skeleton({\n  variant = 'dynamic',\n  display = 'block',\n  tagOverride = 'div',\n  height,\n  width,\n  ...restProps\n}: SkeletonProps) {\n  const baseComponentProps = useBaseComponent('Skeleton', {\n    props: {\n      variant,\n      display,\n      height,\n      width,\n      tagOverride,\n    },\n  });\n  return (\n    <InternalSkeleton\n      variant={variant}\n      display={display}\n      height={height}\n      width={width}\n      tagOverride={tagOverride}\n      {...restProps}\n      {...baseComponentProps}\n    />\n  );\n}\n\napplyDisplayName(Skeleton, 'Skeleton');\n"]}

package/skeleton/interfaces.d.ts

@@ -0,0 +1,36 @@
+import { BaseComponentProps } from '../internal/base-component';
+export interface SkeletonProps extends BaseComponentProps {
+  /**
+   * Specifies the variant of the skeleton to match Box fontSize options.
+   * The default value, `dynamic`, matches skeleton height to the surrounding font size.
+   * * `text-body-s` - Skeleton with height matching body-s line-height.
+   * * `text-body-m` - Skeleton with height matching body-m line-height.
+   * * `text-heading-xs` - Skeleton with height matching heading-xs line-height.
+   * * `text-heading-s` - Skeleton with height matching heading-s line-height.
+   * * `text-heading-m` - Skeleton with height matching heading-m line-height.
+   * * `text-heading-l` - Skeleton with height matching heading-l line-height.
+   * * `text-heading-xl` - Skeleton with height matching heading-xl line-height.
+   * * `text-display-l` - Skeleton with height matching display-l line-height.
+   */
+  variant?: SkeletonProps.Variant;
+  /**
+   * Specifies the CSS `display` of the skeleton.
+   */
+  display?: 'block' | 'inline-block' | 'inline';
+  /**
+   * Overrides the default HTML tag used by the component.
+   */
+  tagOverride?: string;
+  /**
+   * Specifies the height of the skeleton. Accepts any valid CSS value (for example, `"100px"`, `"3em"`).
+   * By default the height is determined by the `variant`.
+   */
+  height?: string;
+  /**
+   * Specifies the width of the skeleton. Accepts any valid CSS value (for example, `"200px"`, `"100%"`).
+   */
+  width?: string;
+}
+export declare namespace SkeletonProps {
+  type Variant = 'dynamic' | 'text-body-s' | 'text-body-m' | 'text-heading-xs' | 'text-heading-s' | 'text-heading-m' | 'text-heading-l' | 'text-heading-xl' | 'text-display-l';
+}

package/skeleton/interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/skeleton/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE,MAAM,WAAW,aAAc,SAAQ,kBAAkB;IACvD;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC;IAEhC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,cAAc,GAAG,QAAQ,CAAC;IAE9C;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,yBAAiB,aAAa,CAAC;IAC7B,KAAY,OAAO,GACf,SAAS,GACT,aAAa,GACb,aAAa,GACb,iBAAiB,GACjB,gBAAgB,GAChB,gBAAgB,GAChB,gBAAgB,GAChB,iBAAiB,GACjB,gBAAgB,CAAC;CACtB"}

package/skeleton/interfaces.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=interfaces.js.map

package/skeleton/interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/skeleton/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\n\nexport interface SkeletonProps extends BaseComponentProps {\n  /**\n   * Specifies the variant of the skeleton to match Box fontSize options.\n   * The default value, `dynamic`, matches skeleton height to the surrounding font size.\n   * * `text-body-s` - Skeleton with height matching body-s line-height.\n   * * `text-body-m` - Skeleton with height matching body-m line-height.\n   * * `text-heading-xs` - Skeleton with height matching heading-xs line-height.\n   * * `text-heading-s` - Skeleton with height matching heading-s line-height.\n   * * `text-heading-m` - Skeleton with height matching heading-m line-height.\n   * * `text-heading-l` - Skeleton with height matching heading-l line-height.\n   * * `text-heading-xl` - Skeleton with height matching heading-xl line-height.\n   * * `text-display-l` - Skeleton with height matching display-l line-height.\n   */\n  variant?: SkeletonProps.Variant;\n\n  /**\n   * Specifies the CSS `display` of the skeleton.\n   */\n  display?: 'block' | 'inline-block' | 'inline';\n\n  /**\n   * Overrides the default HTML tag used by the component.\n   */\n  tagOverride?: string;\n\n  /**\n   * Specifies the height of the skeleton. Accepts any valid CSS value (for example, `\"100px\"`, `\"3em\"`).\n   * By default the height is determined by the `variant`.\n   */\n  height?: string;\n\n  /**\n   * Specifies the width of the skeleton. Accepts any valid CSS value (for example, `\"200px\"`, `\"100%\"`).\n   */\n  width?: string;\n}\n\nexport namespace SkeletonProps {\n  export type Variant =\n    | 'dynamic'\n    | 'text-body-s'\n    | 'text-body-m'\n    | 'text-heading-xs'\n    | 'text-heading-s'\n    | 'text-heading-m'\n    | 'text-heading-l'\n    | 'text-heading-xl'\n    | 'text-display-l';\n}\n"]}

package/skeleton/internal.d.ts

@@ -0,0 +1,14 @@
+import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
+import { SomeRequired } from '../internal/types';
+import { SkeletonProps } from './interfaces';
+interface InternalSkeletonProps extends SomeRequired<SkeletonProps, 'variant' | 'tagOverride'>, InternalBaseComponentProps {}
+export default function InternalSkeleton({
+  variant,
+  height,
+  width,
+  display,
+  tagOverride,
+  __internalRootRef,
+  ...props
+}: InternalSkeletonProps): JSX.Element;
+export {};

package/skeleton/internal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/skeleton/internal.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAClF,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAI7C,UAAU,qBACR,SAAQ,YAAY,CAAC,aAAa,EAAE,SAAS,GAAG,aAAa,CAAC,EAC5D,0BAA0B;CAAG;AAEjC,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,OAAO,EACP,MAAM,EACN,KAAK,EACL,OAAO,EACP,WAAW,EACX,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,qBAAqB,eAqBvB"}

package/skeleton/internal.js

@@ -0,0 +1,13 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import clsx from 'clsx';
+import { getBaseProps } from '../internal/base-component';
+import styles from './styles.css.js';
+export default function InternalSkeleton({ variant, height, width, display, tagOverride, __internalRootRef, ...props }) {
+    const baseProps = getBaseProps(props);
+    const Tag = tagOverride;
+    return (React.createElement(Tag, { ...baseProps, className: clsx(baseProps.className, styles.root, variant && styles[`variant-${variant}`], display && styles[`display-${display}`]), ref: __internalRootRef, style: width !== undefined ? { inlineSize: width } : {}, "aria-hidden": "true" },
+        React.createElement(Tag, { className: styles.inner, style: height !== undefined ? { blockSize: height } : {} })));
+}
+//# sourceMappingURL=internal.js.map

package/skeleton/internal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/skeleton/internal.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAK1D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAMrC,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,OAAO,EACP,MAAM,EACN,KAAK,EACL,OAAO,EACP,WAAW,EACX,iBAAiB,EACjB,GAAG,KAAK,EACc;IACtB,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IAEtC,MAAM,GAAG,GAAG,WAAoB,CAAC;IAEjC,OAAO,CACL,oBAAC,GAAG,OACE,SAAS,EACb,SAAS,EAAE,IAAI,CACb,SAAS,CAAC,SAAS,EACnB,MAAM,CAAC,IAAI,EACX,OAAO,IAAI,MAAM,CAAC,WAAW,OAAO,EAAE,CAAC,EACvC,OAAO,IAAI,MAAM,CAAC,WAAW,OAAO,EAAE,CAAC,CACxC,EACD,GAAG,EAAE,iBAAiB,EACtB,KAAK,EAAE,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,iBAC3C,MAAM;QAElB,oBAAC,GAAG,IAAC,SAAS,EAAE,MAAM,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,GAAI,CACtF,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { SomeRequired } from '../internal/types';\nimport { SkeletonProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ninterface InternalSkeletonProps\n  extends SomeRequired<SkeletonProps, 'variant' | 'tagOverride'>,\n    InternalBaseComponentProps {}\n\nexport default function InternalSkeleton({\n  variant,\n  height,\n  width,\n  display,\n  tagOverride,\n  __internalRootRef,\n  ...props\n}: InternalSkeletonProps) {\n  const baseProps = getBaseProps(props);\n\n  const Tag = tagOverride as 'div';\n\n  return (\n    <Tag\n      {...baseProps}\n      className={clsx(\n        baseProps.className,\n        styles.root,\n        variant && styles[`variant-${variant}`],\n        display && styles[`display-${display}`]\n      )}\n      ref={__internalRootRef}\n      style={width !== undefined ? { inlineSize: width } : {}}\n      aria-hidden=\"true\"\n    >\n      <Tag className={styles.inner} style={height !== undefined ? { blockSize: height } : {}} />\n    </Tag>\n  );\n}\n"]}

package/skeleton/styles.css.js

@@ -0,0 +1,20 @@
+
+    import './styles.scoped.css';
+    export default {
+  "root": "awsui_root_1qq5l_23px4_161",
+  "inner": "awsui_inner_1qq5l_23px4_164",
+  "skeleton-wave": "awsui_skeleton-wave_1qq5l_23px4_1",
+  "skeleton-wave-rtl": "awsui_skeleton-wave-rtl_1qq5l_23px4_1",
+  "display-block": "awsui_display-block_1qq5l_23px4_222",
+  "display-inline-block": "awsui_display-inline-block_1qq5l_23px4_226",
+  "display-inline": "awsui_display-inline_1qq5l_23px4_226",
+  "variant-text-body-s": "awsui_variant-text-body-s_1qq5l_23px4_235",
+  "variant-text-body-m": "awsui_variant-text-body-m_1qq5l_23px4_240",
+  "variant-text-heading-xs": "awsui_variant-text-heading-xs_1qq5l_23px4_245",
+  "variant-text-heading-s": "awsui_variant-text-heading-s_1qq5l_23px4_250",
+  "variant-text-heading-m": "awsui_variant-text-heading-m_1qq5l_23px4_255",
+  "variant-text-heading-l": "awsui_variant-text-heading-l_1qq5l_23px4_260",
+  "variant-text-heading-xl": "awsui_variant-text-heading-xl_1qq5l_23px4_265",
+  "variant-text-display-l": "awsui_variant-text-display-l_1qq5l_23px4_270"
+};
+