@cloudscape-design/components 3.0.354 → 3.0.356

package/cards/interfaces.d.ts

@@ -44,7 +44,7 @@ export interface CardsProps<T = any> extends BaseComponentProps {
     /**
      *  Defines what to display in each card. It has the following properties:
      *  * `header` ((item) => ReactNode) - Responsible for displaying the card header. You receive the current item as an argument.
-     *      Use `fontSize="heading-m"` on [link](/components/link/) components inside card header.
+     *      Use `fontSize="inherit"` on [link](/components/link/) components inside card header.
      *  * `sections` (array) - Responsible for displaying the card content. Cards can have many sections in their
      *    body. Each entry in the array is responsible for displaying a section. An entry has the following properties:
      *    * `id`: (string) - A unique identifier for the section. The property is used as a [keys](https://reactjs.org/docs/lists-and-keys.html#keys)

package/cards/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["cards/interfaces.tsx"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\n/*\n * HACK: Cast the component to a named parametrized interface.\n *\n * This lets us use React.forwardRef and still let the component have type\n * parameters, and the naming convention lets the documenter know that this is\n * a forwardRef-wrapped component.\n *\n * We don't need to expose this type to customers because it's just a simple\n * function type.\n */\nexport interface CardsForwardRefType {\n  <T>(props: CardsProps<T> & { ref?: React.Ref<CardsProps.Ref> }): JSX.Element;\n}\n\nexport interface CardsProps<T = any> extends BaseComponentProps {\n  /**\n   * Displayed only when the list of items is empty.\n   */\n  empty?: React.ReactNode;\n\n  /**\n   * Heading element of the table container. Use the [header component](/components/header/).\n   */\n  header?: React.ReactNode;\n\n  /**\n   * Use this slot to add filtering controls to the component.\n   */\n  filter?: React.ReactNode;\n\n  /**\n   * Use this slot to add the [pagination component](/components/pagination/) to the component.\n   */\n  pagination?: React.ReactNode;\n\n  /**\n   * Use this slot to add [collection preferences](/components/collection-preferences/) to the component.\n   */\n  preferences?: React.ReactNode;\n\n  /**\n   * Specifies the items that serve as data source for a card.\n   *\n   * The `cardDefinition` property handles the display of this data.\n   */\n  items: ReadonlyArray<T>;\n\n  /**\n   * Renders the cards in a loading state. We recommend that you also set a `loadingText`.\n   */\n  loading?: boolean;\n\n  /**\n   * Specifies the text to display when in loading state.\n   */\n  loadingText?: string;\n\n  /**\n   *  Defines what to display in each card. It has the following properties:\n   *  * `header` ((item) => ReactNode) - Responsible for displaying the card header. You receive the current item as an argument.\n   *      Use `fontSize=\"heading-m\"` on [link](/components/link/) components inside card header.\n   *  * `sections` (array) - Responsible for displaying the card content. Cards can have many sections in their\n   *    body. Each entry in the array is responsible for displaying a section. An entry has the following properties:\n   *    * `id`: (string) - A unique identifier for the section. The property is used as a [keys](https://reactjs.org/docs/lists-and-keys.html#keys)\n   *   source for React rendering, and to match entries in the `visibleSections` property (if it's defined).\n   *    * `header`: (ReactNode) - Responsible for displaying the section header.\n   *    * `content`: ((item) => ReactNode) - Responsible for displaying the section content. You receive the current item as an argument.\n   *    * `width`: (number) - Specifies the width of the card section in percent. Use this to display multiple sections in\n   *    the same row. The default value is 100%.\n   *\n   *  All of the above properties are optional.\n   */\n  cardDefinition: CardsProps.CardDefinition<T>;\n  /**\n   * Determines the number of cards per row for any interval of container width.\n   * It's an array whose entries are objects containing the following:\n   * - `cards` (number) - Specifies the number of cards per row.\n   * - `minWidth` (number) - Specifies the minimum container width (in pixels) for which this configuration object should apply.\n   *\n   * For example, with this configuration:\n   * ```\n   * [{\n   *   cards: 1\n   * }, {\n   *   minWidth: 500,\n   *   cards: 2\n   * }, {\n   *   minWidth: 800,\n   *   cards: 3\n   * }]\n   * ```\n   *\n   * the cards component displays:\n   * * 1 card per row when the container width is below 500px.\n   * * 2 cards per row when the container width is between 500px and 799px.\n   * * 3 cards per row when the container width is 800px or wider.\n   *\n   * The number of cards per row can't be greater than 20.\n   *\n   * Default value:\n   * ```\n   * [{\n   *   cards: 1\n   * }, {\n   *   minWidth: 768,\n   *   cards: 2\n   * }, {\n   *   minWidth: 992,\n   *   cards: 3\n   * }, {\n   *   minWidth: 1200,\n   *   cards: 4\n   * }, {\n   *   minWidth: 1400,\n   *   cards: 5\n   * }, {\n   *   minWidth: 1920,\n   *   cards: 6\n   * }]\n   * ```\n   */\n  cardsPerRow?: ReadonlyArray<CardsProps.CardsLayout>;\n  /**\n   * Specifies the property inside items that uniquely identifies them.\n   * When it's set, it's used to provide [keys for React](https://reactjs.org/docs/lists-and-keys.html#keys)\n   * for performance optimizations.\n   *\n   * It's also used for connecting `items` and `selectedItems` values when they don't reference the same object.\n   */\n  trackBy?: CardsProps.TrackBy<T>;\n  /**\n   * Specifies the selection mode. It can be either `single` or `multi`.\n   */\n  selectionType?: CardsProps.SelectionType;\n  /**\n   * Specifies the list of selected items.\n   */\n  selectedItems?: ReadonlyArray<T>;\n  /**\n   * Determines which items are disabled. If an item is disabled, users can't select it.\n   */\n  isItemDisabled?: CardsProps.IsItemDisabled<T>;\n  /**\n   * Adds labels to the selection components (checkboxes and radio buttons) as follows:\n   * * `itemSelectionLabel` ((SelectionState, Item) => string) - Determines the label for an item.\n   * * `selectionGroupLabel` (string) - Specifies the label for the group selection control.\n   * * `cardsLabel` (string) - Provides alternative text for the cards list.\n   *                            By default the contents of the `header` are used.\n   *\n   * You can use the first arguments of type `SelectionState` to access the current selection\n   * state of the component (for example, the `selectedItems` list). The label function for individual\n   * items also receives the corresponding  `Item` object. You can use the group label to\n   * add a meaningful description to the whole selection.\n   * @i18n\n   */\n  ariaLabels?: CardsProps.AriaLabels<T>;\n  /**\n   * Specifies an array containing the `id` of each visible section. If not set, all sections are displayed.\n   *\n   * Use it in conjunction with the visible content preference of the [collection preferences](/components/collection-preferences/) component.\n   *\n   * The order of `id`s doesn't influence the order of display of sections, which is controlled by the `cardDefinition` property.\n   */\n  visibleSections?: ReadonlyArray<string>;\n  /**\n   * Called when a user interaction causes a change in the list of selected items.\n   * The event `detail` contains the current list of `selectedItems`.\n   */\n  onSelectionChange?: NonCancelableEventHandler<CardsProps.SelectionChangeDetail<T>>;\n  /**\n   * If set to true, the cards header remains visible when the user scrolls down.\n   */\n  stickyHeader?: boolean;\n  /**\n   * Optionally provide a vertical offset (in pixels) for the sticky header, for example if you\n   * need to position the sticky header below other fixed position elements on the page.\n   */\n  stickyHeaderVerticalOffset?: number;\n\n  /**\n   * Use this property to inform screen readers how many cards there are.\n   * It specifies the total number of cards.\n   * If there is an unknown total number of cards, leave this property undefined.   */\n  totalItemsCount?: number;\n  /**\n   *  Use this property to inform screen readers which range of cards is currently displayed.\n   *  It specifies the index (1-based) of the first card.\n   *  If the cards list has no pagination, leave this property undefined.   */\n  firstIndex?: number;\n  /**\n   * Use this function to announce page changes to screen reader users.\n   * Requires the properties firstIndex and totalItemsCount to be set correctly.\n   */\n  renderAriaLive?: (data: CardsProps.LiveAnnouncement) => string;\n\n  /**\n   * Specify a cards variant with one of the following:\n   * * `container` - Use this variant to have the cards displayed as a container.\n   * * `full-page` – Use this variant when cards are the entire content of a page. Full page variants\n   *                 implement the high contrast header and content behavior automatically.\n   * @visualrefresh `full-page` variant\n   */\n  variant?: 'container' | 'full-page';\n}\n\nexport namespace CardsProps {\n  export interface CardDefinition<T> {\n    header?(item: T): React.ReactNode;\n    sections?: ReadonlyArray<SectionDefinition<T>>;\n  }\n\n  export interface SectionDefinition<T> {\n    id?: string;\n    header?: React.ReactNode;\n    content?(item: T): React.ReactNode;\n    width?: number;\n  }\n\n  export interface CardsLayout {\n    cards: number;\n    minWidth?: number;\n  }\n\n  export type TrackBy<T> = string | ((item: T) => string);\n\n  export type SelectionType = 'single' | 'multi';\n\n  export interface SelectionState<T> {\n    selectedItems: ReadonlyArray<T>;\n  }\n\n  export interface SelectionChangeDetail<T> {\n    selectedItems: T[];\n  }\n\n  export type IsItemDisabled<T> = (item: T) => boolean;\n\n  export interface AriaLabels<T> {\n    itemSelectionLabel: (data: CardsProps.SelectionState<T>, row: T) => string;\n    selectionGroupLabel: string;\n    cardsLabel?: string;\n  }\n\n  export interface LiveAnnouncement {\n    totalItemsCount?: number;\n    firstIndex: number;\n    lastIndex: number;\n  }\n\n  export interface Ref {\n    /**\n     * When the sticky header is enabled, calling this function scrolls cards's\n     * scroll parent up to reveal the first card or row of cards.\n     */\n    scrollToTop(): void;\n  }\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["cards/interfaces.tsx"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\n/*\n * HACK: Cast the component to a named parametrized interface.\n *\n * This lets us use React.forwardRef and still let the component have type\n * parameters, and the naming convention lets the documenter know that this is\n * a forwardRef-wrapped component.\n *\n * We don't need to expose this type to customers because it's just a simple\n * function type.\n */\nexport interface CardsForwardRefType {\n  <T>(props: CardsProps<T> & { ref?: React.Ref<CardsProps.Ref> }): JSX.Element;\n}\n\nexport interface CardsProps<T = any> extends BaseComponentProps {\n  /**\n   * Displayed only when the list of items is empty.\n   */\n  empty?: React.ReactNode;\n\n  /**\n   * Heading element of the table container. Use the [header component](/components/header/).\n   */\n  header?: React.ReactNode;\n\n  /**\n   * Use this slot to add filtering controls to the component.\n   */\n  filter?: React.ReactNode;\n\n  /**\n   * Use this slot to add the [pagination component](/components/pagination/) to the component.\n   */\n  pagination?: React.ReactNode;\n\n  /**\n   * Use this slot to add [collection preferences](/components/collection-preferences/) to the component.\n   */\n  preferences?: React.ReactNode;\n\n  /**\n   * Specifies the items that serve as data source for a card.\n   *\n   * The `cardDefinition` property handles the display of this data.\n   */\n  items: ReadonlyArray<T>;\n\n  /**\n   * Renders the cards in a loading state. We recommend that you also set a `loadingText`.\n   */\n  loading?: boolean;\n\n  /**\n   * Specifies the text to display when in loading state.\n   */\n  loadingText?: string;\n\n  /**\n   *  Defines what to display in each card. It has the following properties:\n   *  * `header` ((item) => ReactNode) - Responsible for displaying the card header. You receive the current item as an argument.\n   *      Use `fontSize=\"inherit\"` on [link](/components/link/) components inside card header.\n   *  * `sections` (array) - Responsible for displaying the card content. Cards can have many sections in their\n   *    body. Each entry in the array is responsible for displaying a section. An entry has the following properties:\n   *    * `id`: (string) - A unique identifier for the section. The property is used as a [keys](https://reactjs.org/docs/lists-and-keys.html#keys)\n   *   source for React rendering, and to match entries in the `visibleSections` property (if it's defined).\n   *    * `header`: (ReactNode) - Responsible for displaying the section header.\n   *    * `content`: ((item) => ReactNode) - Responsible for displaying the section content. You receive the current item as an argument.\n   *    * `width`: (number) - Specifies the width of the card section in percent. Use this to display multiple sections in\n   *    the same row. The default value is 100%.\n   *\n   *  All of the above properties are optional.\n   */\n  cardDefinition: CardsProps.CardDefinition<T>;\n  /**\n   * Determines the number of cards per row for any interval of container width.\n   * It's an array whose entries are objects containing the following:\n   * - `cards` (number) - Specifies the number of cards per row.\n   * - `minWidth` (number) - Specifies the minimum container width (in pixels) for which this configuration object should apply.\n   *\n   * For example, with this configuration:\n   * ```\n   * [{\n   *   cards: 1\n   * }, {\n   *   minWidth: 500,\n   *   cards: 2\n   * }, {\n   *   minWidth: 800,\n   *   cards: 3\n   * }]\n   * ```\n   *\n   * the cards component displays:\n   * * 1 card per row when the container width is below 500px.\n   * * 2 cards per row when the container width is between 500px and 799px.\n   * * 3 cards per row when the container width is 800px or wider.\n   *\n   * The number of cards per row can't be greater than 20.\n   *\n   * Default value:\n   * ```\n   * [{\n   *   cards: 1\n   * }, {\n   *   minWidth: 768,\n   *   cards: 2\n   * }, {\n   *   minWidth: 992,\n   *   cards: 3\n   * }, {\n   *   minWidth: 1200,\n   *   cards: 4\n   * }, {\n   *   minWidth: 1400,\n   *   cards: 5\n   * }, {\n   *   minWidth: 1920,\n   *   cards: 6\n   * }]\n   * ```\n   */\n  cardsPerRow?: ReadonlyArray<CardsProps.CardsLayout>;\n  /**\n   * Specifies the property inside items that uniquely identifies them.\n   * When it's set, it's used to provide [keys for React](https://reactjs.org/docs/lists-and-keys.html#keys)\n   * for performance optimizations.\n   *\n   * It's also used for connecting `items` and `selectedItems` values when they don't reference the same object.\n   */\n  trackBy?: CardsProps.TrackBy<T>;\n  /**\n   * Specifies the selection mode. It can be either `single` or `multi`.\n   */\n  selectionType?: CardsProps.SelectionType;\n  /**\n   * Specifies the list of selected items.\n   */\n  selectedItems?: ReadonlyArray<T>;\n  /**\n   * Determines which items are disabled. If an item is disabled, users can't select it.\n   */\n  isItemDisabled?: CardsProps.IsItemDisabled<T>;\n  /**\n   * Adds labels to the selection components (checkboxes and radio buttons) as follows:\n   * * `itemSelectionLabel` ((SelectionState, Item) => string) - Determines the label for an item.\n   * * `selectionGroupLabel` (string) - Specifies the label for the group selection control.\n   * * `cardsLabel` (string) - Provides alternative text for the cards list.\n   *                            By default the contents of the `header` are used.\n   *\n   * You can use the first arguments of type `SelectionState` to access the current selection\n   * state of the component (for example, the `selectedItems` list). The label function for individual\n   * items also receives the corresponding  `Item` object. You can use the group label to\n   * add a meaningful description to the whole selection.\n   * @i18n\n   */\n  ariaLabels?: CardsProps.AriaLabels<T>;\n  /**\n   * Specifies an array containing the `id` of each visible section. If not set, all sections are displayed.\n   *\n   * Use it in conjunction with the visible content preference of the [collection preferences](/components/collection-preferences/) component.\n   *\n   * The order of `id`s doesn't influence the order of display of sections, which is controlled by the `cardDefinition` property.\n   */\n  visibleSections?: ReadonlyArray<string>;\n  /**\n   * Called when a user interaction causes a change in the list of selected items.\n   * The event `detail` contains the current list of `selectedItems`.\n   */\n  onSelectionChange?: NonCancelableEventHandler<CardsProps.SelectionChangeDetail<T>>;\n  /**\n   * If set to true, the cards header remains visible when the user scrolls down.\n   */\n  stickyHeader?: boolean;\n  /**\n   * Optionally provide a vertical offset (in pixels) for the sticky header, for example if you\n   * need to position the sticky header below other fixed position elements on the page.\n   */\n  stickyHeaderVerticalOffset?: number;\n\n  /**\n   * Use this property to inform screen readers how many cards there are.\n   * It specifies the total number of cards.\n   * If there is an unknown total number of cards, leave this property undefined.   */\n  totalItemsCount?: number;\n  /**\n   *  Use this property to inform screen readers which range of cards is currently displayed.\n   *  It specifies the index (1-based) of the first card.\n   *  If the cards list has no pagination, leave this property undefined.   */\n  firstIndex?: number;\n  /**\n   * Use this function to announce page changes to screen reader users.\n   * Requires the properties firstIndex and totalItemsCount to be set correctly.\n   */\n  renderAriaLive?: (data: CardsProps.LiveAnnouncement) => string;\n\n  /**\n   * Specify a cards variant with one of the following:\n   * * `container` - Use this variant to have the cards displayed as a container.\n   * * `full-page` – Use this variant when cards are the entire content of a page. Full page variants\n   *                 implement the high contrast header and content behavior automatically.\n   * @visualrefresh `full-page` variant\n   */\n  variant?: 'container' | 'full-page';\n}\n\nexport namespace CardsProps {\n  export interface CardDefinition<T> {\n    header?(item: T): React.ReactNode;\n    sections?: ReadonlyArray<SectionDefinition<T>>;\n  }\n\n  export interface SectionDefinition<T> {\n    id?: string;\n    header?: React.ReactNode;\n    content?(item: T): React.ReactNode;\n    width?: number;\n  }\n\n  export interface CardsLayout {\n    cards: number;\n    minWidth?: number;\n  }\n\n  export type TrackBy<T> = string | ((item: T) => string);\n\n  export type SelectionType = 'single' | 'multi';\n\n  export interface SelectionState<T> {\n    selectedItems: ReadonlyArray<T>;\n  }\n\n  export interface SelectionChangeDetail<T> {\n    selectedItems: T[];\n  }\n\n  export type IsItemDisabled<T> = (item: T) => boolean;\n\n  export interface AriaLabels<T> {\n    itemSelectionLabel: (data: CardsProps.SelectionState<T>, row: T) => string;\n    selectionGroupLabel: string;\n    cardsLabel?: string;\n  }\n\n  export interface LiveAnnouncement {\n    totalItemsCount?: number;\n    firstIndex: number;\n    lastIndex: number;\n  }\n\n  export interface Ref {\n    /**\n     * When the sticky header is enabled, calling this function scrolls cards's\n     * scroll parent up to reveal the first card or row of cards.\n     */\n    scrollToTop(): void;\n  }\n}\n"]}

package/container/styles.css.js

@@ -1,33 +1,33 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_14iqq_1t1om_97",
-  "fit-height": "awsui_fit-height_14iqq_1t1om_111",
-  "with-side-media": "awsui_with-side-media_14iqq_1t1om_116",
-  "variant-default": "awsui_variant-default_14iqq_1t1om_119",
-  "variant-stacked": "awsui_variant-stacked_14iqq_1t1om_119",
-  "sticky-enabled": "awsui_sticky-enabled_14iqq_1t1om_172",
-  "with-top-media": "awsui_with-top-media_14iqq_1t1om_184",
-  "content-wrapper": "awsui_content-wrapper_14iqq_1t1om_189",
-  "content-wrapper-fit-height": "awsui_content-wrapper-fit-height_14iqq_1t1om_194",
-  "media": "awsui_media_14iqq_1t1om_199",
-  "media-top": "awsui_media-top_14iqq_1t1om_211",
-  "media-side": "awsui_media-side_14iqq_1t1om_216",
-  "header": "awsui_header_14iqq_1t1om_222",
-  "header-with-media": "awsui_header-with-media_14iqq_1t1om_227",
-  "header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_1t1om_233",
-  "header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_1t1om_237",
-  "header-stuck": "awsui_header-stuck_14iqq_1t1om_243",
-  "header-variant-cards": "awsui_header-variant-cards_14iqq_1t1om_249",
-  "header-dynamic-height": "awsui_header-dynamic-height_14iqq_1t1om_252",
-  "with-paddings": "awsui_with-paddings_14iqq_1t1om_258",
-  "with-hidden-content": "awsui_with-hidden-content_14iqq_1t1om_264",
-  "header-variant-full-page": "awsui_header-variant-full-page_14iqq_1t1om_314",
-  "dark-header": "awsui_dark-header_14iqq_1t1om_332",
-  "content": "awsui_content_14iqq_1t1om_189",
-  "content-fit-height": "awsui_content-fit-height_14iqq_1t1om_340",
-  "content-with-media": "awsui_content-with-media_14iqq_1t1om_349",
-  "footer": "awsui_footer_14iqq_1t1om_353",
-  "with-divider": "awsui_with-divider_14iqq_1t1om_356"
+  "root": "awsui_root_14iqq_eh02f_97",
+  "fit-height": "awsui_fit-height_14iqq_eh02f_111",
+  "with-side-media": "awsui_with-side-media_14iqq_eh02f_116",
+  "variant-default": "awsui_variant-default_14iqq_eh02f_119",
+  "variant-stacked": "awsui_variant-stacked_14iqq_eh02f_119",
+  "sticky-enabled": "awsui_sticky-enabled_14iqq_eh02f_172",
+  "with-top-media": "awsui_with-top-media_14iqq_eh02f_184",
+  "content-wrapper": "awsui_content-wrapper_14iqq_eh02f_189",
+  "content-wrapper-fit-height": "awsui_content-wrapper-fit-height_14iqq_eh02f_194",
+  "media": "awsui_media_14iqq_eh02f_199",
+  "media-top": "awsui_media-top_14iqq_eh02f_211",
+  "media-side": "awsui_media-side_14iqq_eh02f_216",
+  "header": "awsui_header_14iqq_eh02f_222",
+  "header-with-media": "awsui_header-with-media_14iqq_eh02f_227",
+  "header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_eh02f_233",
+  "header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_eh02f_237",
+  "header-stuck": "awsui_header-stuck_14iqq_eh02f_243",
+  "header-variant-cards": "awsui_header-variant-cards_14iqq_eh02f_249",
+  "header-dynamic-height": "awsui_header-dynamic-height_14iqq_eh02f_252",
+  "with-paddings": "awsui_with-paddings_14iqq_eh02f_258",
+  "with-hidden-content": "awsui_with-hidden-content_14iqq_eh02f_264",
+  "header-variant-full-page": "awsui_header-variant-full-page_14iqq_eh02f_314",
+  "dark-header": "awsui_dark-header_14iqq_eh02f_332",
+  "content": "awsui_content_14iqq_eh02f_189",
+  "content-fit-height": "awsui_content-fit-height_14iqq_eh02f_340",
+  "content-with-media": "awsui_content-with-media_14iqq_eh02f_349",
+  "footer": "awsui_footer_14iqq_eh02f_353",
+  "with-divider": "awsui_with-divider_14iqq_eh02f_356"
 };
   

package/container/styles.scoped.css

@@ -94,7 +94,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_14iqq_1t1om_97:not(#\9) {
+.awsui_root_14iqq_eh02f_97:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   border-collapse: separate;
   border-spacing: 0;
@@ -134,20 +134,20 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   word-wrap: break-word;
   position: relative;
 }
-.awsui_root_14iqq_1t1om_97.awsui_fit-height_14iqq_1t1om_111:not(#\9) {
+.awsui_root_14iqq_eh02f_97.awsui_fit-height_14iqq_eh02f_111:not(#\9) {
   display: flex;
   flex-direction: column;
   height: 100%;
 }
-.awsui_root_14iqq_1t1om_97.awsui_fit-height_14iqq_1t1om_111.awsui_with-side-media_14iqq_1t1om_116:not(#\9) {
+.awsui_root_14iqq_eh02f_97.awsui_fit-height_14iqq_eh02f_111.awsui_with-side-media_14iqq_eh02f_116:not(#\9) {
   flex-direction: row;
 }
-.awsui_root_14iqq_1t1om_97.awsui_variant-default_14iqq_1t1om_119:not(#\9), .awsui_root_14iqq_1t1om_97.awsui_variant-stacked_14iqq_1t1om_119:not(#\9) {
+.awsui_root_14iqq_eh02f_97.awsui_variant-default_14iqq_eh02f_119:not(#\9), .awsui_root_14iqq_eh02f_97.awsui_variant-stacked_14iqq_eh02f_119:not(#\9) {
   border-radius: var(--border-radius-container-wqv1zi, 16px);
   box-sizing: border-box;
   background-color: var(--color-background-container-content-4un1ap, #ffffff);
 }
-.awsui_root_14iqq_1t1om_97.awsui_variant-default_14iqq_1t1om_119:not(#\9)::before, .awsui_root_14iqq_1t1om_97.awsui_variant-stacked_14iqq_1t1om_119:not(#\9)::before {
+.awsui_root_14iqq_eh02f_97.awsui_variant-default_14iqq_eh02f_119:not(#\9)::before, .awsui_root_14iqq_eh02f_97.awsui_variant-stacked_14iqq_eh02f_119:not(#\9)::before {
   content: "";
   position: absolute;
   left: 0px;
@@ -162,7 +162,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-radius: var(--border-radius-container-wqv1zi, 16px);
   z-index: 1;
 }
-.awsui_root_14iqq_1t1om_97.awsui_variant-default_14iqq_1t1om_119:not(#\9)::after, .awsui_root_14iqq_1t1om_97.awsui_variant-stacked_14iqq_1t1om_119:not(#\9)::after {
+.awsui_root_14iqq_eh02f_97.awsui_variant-default_14iqq_eh02f_119:not(#\9)::after, .awsui_root_14iqq_eh02f_97.awsui_variant-stacked_14iqq_eh02f_119:not(#\9)::after {
   content: "";
   position: absolute;
   left: 0px;
@@ -177,128 +177,128 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   mix-blend-mode: multiply;
 }
 @media screen and (-ms-high-contrast: active) {
-  .awsui_root_14iqq_1t1om_97.awsui_variant-default_14iqq_1t1om_119:not(#\9), .awsui_root_14iqq_1t1om_97.awsui_variant-stacked_14iqq_1t1om_119:not(#\9) {
+  .awsui_root_14iqq_eh02f_97.awsui_variant-default_14iqq_eh02f_119:not(#\9), .awsui_root_14iqq_eh02f_97.awsui_variant-stacked_14iqq_eh02f_119:not(#\9) {
     border: var(--border-field-width-09w7vk, 2px) solid var(--color-border-container-top-736buh, transparent);
   }
 }
-.awsui_root_14iqq_1t1om_97.awsui_variant-stacked_14iqq_1t1om_119:not(#\9):not(:last-child), .awsui_root_14iqq_1t1om_97.awsui_variant-stacked_14iqq_1t1om_119:not(#\9):not(:last-child)::before, .awsui_root_14iqq_1t1om_97.awsui_variant-stacked_14iqq_1t1om_119:not(#\9):not(:last-child)::after {
+.awsui_root_14iqq_eh02f_97.awsui_variant-stacked_14iqq_eh02f_119:not(#\9):not(:last-child), .awsui_root_14iqq_eh02f_97.awsui_variant-stacked_14iqq_eh02f_119:not(#\9):not(:last-child)::before, .awsui_root_14iqq_eh02f_97.awsui_variant-stacked_14iqq_eh02f_119:not(#\9):not(:last-child)::after {
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
-.awsui_root_14iqq_1t1om_97.awsui_variant-stacked_14iqq_1t1om_119 + .awsui_root_14iqq_1t1om_97.awsui_variant-stacked_14iqq_1t1om_119:not(#\9), .awsui_root_14iqq_1t1om_97.awsui_variant-stacked_14iqq_1t1om_119 + .awsui_root_14iqq_1t1om_97.awsui_variant-stacked_14iqq_1t1om_119:not(#\9)::before, .awsui_root_14iqq_1t1om_97.awsui_variant-stacked_14iqq_1t1om_119 + .awsui_root_14iqq_1t1om_97.awsui_variant-stacked_14iqq_1t1om_119:not(#\9)::after {
+.awsui_root_14iqq_eh02f_97.awsui_variant-stacked_14iqq_eh02f_119 + .awsui_root_14iqq_eh02f_97.awsui_variant-stacked_14iqq_eh02f_119:not(#\9), .awsui_root_14iqq_eh02f_97.awsui_variant-stacked_14iqq_eh02f_119 + .awsui_root_14iqq_eh02f_97.awsui_variant-stacked_14iqq_eh02f_119:not(#\9)::before, .awsui_root_14iqq_eh02f_97.awsui_variant-stacked_14iqq_eh02f_119 + .awsui_root_14iqq_eh02f_97.awsui_variant-stacked_14iqq_eh02f_119:not(#\9)::after {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
-.awsui_root_14iqq_1t1om_97.awsui_variant-stacked_14iqq_1t1om_119 + .awsui_root_14iqq_1t1om_97.awsui_variant-stacked_14iqq_1t1om_119:not(#\9)::before {
+.awsui_root_14iqq_eh02f_97.awsui_variant-stacked_14iqq_eh02f_119 + .awsui_root_14iqq_eh02f_97.awsui_variant-stacked_14iqq_eh02f_119:not(#\9)::before {
   border-top: var(--border-divider-section-width-4ax5o2, 2px) solid var(--color-border-divider-default-d3adp9, #e9ebed);
 }
-.awsui_root_14iqq_1t1om_97.awsui_variant-stacked_14iqq_1t1om_119 + .awsui_root_14iqq_1t1om_97.awsui_variant-stacked_14iqq_1t1om_119:not(#\9)::after {
+.awsui_root_14iqq_eh02f_97.awsui_variant-stacked_14iqq_eh02f_119 + .awsui_root_14iqq_eh02f_97.awsui_variant-stacked_14iqq_eh02f_119:not(#\9)::after {
   box-shadow: var(--shadow-container-stacked-4gw245, -1px 1px 1px 0px #e9ebed, 1px 1px 1px 0px #e9ebed, 0px 9px 8px -7px rgba(0, 7, 22, 0.12), 8px 0px 8px -7px rgba(0, 7, 22, 0.12), -8px 0px 8px -7px rgba(0, 7, 22, 0.12));
 }
-.awsui_root_14iqq_1t1om_97.awsui_sticky-enabled_14iqq_1t1om_172:not(#\9)::before {
+.awsui_root_14iqq_eh02f_97.awsui_sticky-enabled_14iqq_eh02f_172:not(#\9)::before {
   top: calc(-1 * var(--border-container-top-width-uugwwl, 0px));
 }
-.awsui_root_14iqq_1t1om_97.awsui_sticky-enabled_14iqq_1t1om_172.awsui_variant-stacked_14iqq_1t1om_119:not(#\9)::before {
+.awsui_root_14iqq_eh02f_97.awsui_sticky-enabled_14iqq_eh02f_172.awsui_variant-stacked_14iqq_eh02f_119:not(#\9)::before {
   top: calc(-1 * var(--border-divider-section-width-4ax5o2, 2px));
 }
 
-.awsui_with-side-media_14iqq_1t1om_116:not(#\9) {
+.awsui_with-side-media_14iqq_eh02f_116:not(#\9) {
   display: flex;
   flex-direction: row;
 }
 
-.awsui_with-top-media_14iqq_1t1om_184:not(#\9) {
+.awsui_with-top-media_14iqq_eh02f_184:not(#\9) {
   display: flex;
   flex-direction: column;
 }
 
-.awsui_content-wrapper_14iqq_1t1om_189:not(#\9) {
+.awsui_content-wrapper_14iqq_eh02f_189:not(#\9) {
   display: flex;
   flex-direction: column;
   width: 100%;
 }
-.awsui_content-wrapper-fit-height_14iqq_1t1om_194:not(#\9) {
+.awsui_content-wrapper-fit-height_14iqq_eh02f_194:not(#\9) {
   height: 100%;
   overflow: hidden;
 }
 
-.awsui_media_14iqq_1t1om_199:not(#\9) {
+.awsui_media_14iqq_eh02f_199:not(#\9) {
   overflow: hidden;
   flex-shrink: 0;
 }
-.awsui_media_14iqq_1t1om_199 img:not(#\9),
-.awsui_media_14iqq_1t1om_199 video:not(#\9),
-.awsui_media_14iqq_1t1om_199 picture:not(#\9) {
+.awsui_media_14iqq_eh02f_199 img:not(#\9),
+.awsui_media_14iqq_eh02f_199 video:not(#\9),
+.awsui_media_14iqq_eh02f_199 picture:not(#\9) {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
 }
-.awsui_media-top_14iqq_1t1om_211:not(#\9) {
+.awsui_media-top_14iqq_eh02f_211:not(#\9) {
   max-height: 66%;
   border-top-left-radius: var(--border-radius-container-wqv1zi, 16px);
   border-top-right-radius: var(--border-radius-container-wqv1zi, 16px);
 }
-.awsui_media-side_14iqq_1t1om_216:not(#\9) {
+.awsui_media-side_14iqq_eh02f_216:not(#\9) {
   max-width: 66%;
   border-top-left-radius: var(--border-radius-container-wqv1zi, 16px);
   border-bottom-left-radius: var(--border-radius-container-wqv1zi, 16px);
 }
 
-.awsui_header_14iqq_1t1om_222:not(#\9) {
+.awsui_header_14iqq_eh02f_222:not(#\9) {
   background-color: var(--color-background-container-header-8b9fgi, #ffffff);
   border-top-left-radius: var(--border-radius-container-wqv1zi, 16px);
   border-top-right-radius: var(--border-radius-container-wqv1zi, 16px);
 }
-.awsui_header_14iqq_1t1om_222.awsui_header-with-media_14iqq_1t1om_227:not(#\9) {
+.awsui_header_14iqq_eh02f_222.awsui_header-with-media_14iqq_eh02f_227:not(#\9) {
   background: none;
 }
-.awsui_header_14iqq_1t1om_222.awsui_header-with-media_14iqq_1t1om_227:not(#\9):not(:empty) {
+.awsui_header_14iqq_eh02f_222.awsui_header-with-media_14iqq_eh02f_227:not(#\9):not(:empty) {
   border-bottom: none;
 }
-.awsui_header-sticky-disabled_14iqq_1t1om_233:not(#\9) {
+.awsui_header-sticky-disabled_14iqq_eh02f_233:not(#\9) {
   position: relative;
   z-index: 1;
 }
-.awsui_header-sticky-enabled_14iqq_1t1om_237:not(#\9) {
+.awsui_header-sticky-enabled_14iqq_eh02f_237:not(#\9) {
   top: 0;
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   position: sticky;
   z-index: 800;
 }
-.awsui_header-stuck_14iqq_1t1om_243:not(#\9) {
+.awsui_header-stuck_14iqq_eh02f_243:not(#\9) {
   border-radius: 0;
 }
-.awsui_header-stuck_14iqq_1t1om_243:not(#\9)::before {
+.awsui_header-stuck_14iqq_eh02f_243:not(#\9)::before {
   border: 0;
 }
-.awsui_header-stuck_14iqq_1t1om_243:not(#\9):not(.awsui_header-variant-cards_14iqq_1t1om_249) {
+.awsui_header-stuck_14iqq_eh02f_243:not(#\9):not(.awsui_header-variant-cards_14iqq_eh02f_249) {
   box-shadow: var(--shadow-sticky-embedded-uvh5ry, 0px 2px 0px 0px #e9ebed, 0px 16px 16px -12px rgba(0, 7, 22, 0.1));
 }
-.awsui_header-dynamic-height_14iqq_1t1om_252.awsui_header-stuck_14iqq_1t1om_243:not(#\9) {
+.awsui_header-dynamic-height_14iqq_eh02f_252.awsui_header-stuck_14iqq_eh02f_243:not(#\9) {
   margin-bottom: calc(var(--font-heading-xl-line-height-qs40h8, 30px) - var(--font-heading-l-line-height-thvd8z, 24px));
 }
-.awsui_header_14iqq_1t1om_222:not(#\9):not(:empty) {
+.awsui_header_14iqq_eh02f_222:not(#\9):not(:empty) {
   border-bottom: var(--border-container-sticky-width-6asz33, 0px) solid var(--color-border-container-divider-p2uygo, transparent);
 }
-.awsui_header_14iqq_1t1om_222.awsui_with-paddings_14iqq_1t1om_258:not(#\9) {
+.awsui_header_14iqq_eh02f_222.awsui_with-paddings_14iqq_eh02f_258:not(#\9) {
   padding: var(--space-container-header-top-5qav00, 12px) var(--space-container-horizontal-wfukh3, 20px) var(--space-container-header-bottom-vj01hn, 8px);
 }
-.awsui_header_14iqq_1t1om_222.awsui_with-paddings_14iqq_1t1om_258.awsui_header-variant-cards_14iqq_1t1om_249:not(#\9) {
-  padding: var(--space-scaled-s-aqzyko, 12px) var(--space-container-horizontal-wfukh3, 20px);
+.awsui_header_14iqq_eh02f_222.awsui_with-paddings_14iqq_eh02f_258.awsui_header-variant-cards_14iqq_eh02f_249:not(#\9) {
+  padding: var(--space-container-header-top-5qav00, 12px) var(--space-container-horizontal-wfukh3, 20px);
 }
-.awsui_header_14iqq_1t1om_222.awsui_with-hidden-content_14iqq_1t1om_264:not(#\9) {
+.awsui_header_14iqq_eh02f_222.awsui_with-hidden-content_14iqq_eh02f_264:not(#\9) {
   border-bottom-left-radius: var(--border-radius-container-wqv1zi, 16px);
   border-bottom-right-radius: var(--border-radius-container-wqv1zi, 16px);
 }
-.awsui_header-variant-cards_14iqq_1t1om_249:not(#\9) {
+.awsui_header-variant-cards_14iqq_eh02f_249:not(#\9) {
   border-radius: var(--border-radius-container-wqv1zi, 16px);
   box-sizing: border-box;
 }
-.awsui_header-variant-cards_14iqq_1t1om_249:not(#\9):not(.awsui_header-sticky-enabled_14iqq_1t1om_237) {
+.awsui_header-variant-cards_14iqq_eh02f_249:not(#\9):not(.awsui_header-sticky-enabled_14iqq_eh02f_237) {
   position: relative;
 }
-.awsui_header-variant-cards_14iqq_1t1om_249:not(#\9)::before {
+.awsui_header-variant-cards_14iqq_eh02f_249:not(#\9)::before {
   content: "";
   position: absolute;
   left: 0px;
@@ -313,7 +313,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-radius: var(--border-radius-container-wqv1zi, 16px);
   z-index: 1;
 }
-.awsui_header-variant-cards_14iqq_1t1om_249:not(#\9)::after {
+.awsui_header-variant-cards_14iqq_eh02f_249:not(#\9)::after {
   content: "";
   position: absolute;
   left: 0px;
@@ -328,19 +328,19 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   mix-blend-mode: multiply;
 }
 @media screen and (-ms-high-contrast: active) {
-  .awsui_header-variant-cards_14iqq_1t1om_249:not(#\9) {
+  .awsui_header-variant-cards_14iqq_eh02f_249:not(#\9) {
     border: var(--border-field-width-09w7vk, 2px) solid var(--color-border-container-top-736buh, transparent);
   }
 }
-.awsui_header-variant-cards_14iqq_1t1om_249.awsui_header-stuck_14iqq_1t1om_243:not(#\9)::after, .awsui_header-variant-cards_14iqq_1t1om_249.awsui_header-stuck_14iqq_1t1om_243:not(#\9)::before {
+.awsui_header-variant-cards_14iqq_eh02f_249.awsui_header-stuck_14iqq_eh02f_243:not(#\9)::after, .awsui_header-variant-cards_14iqq_eh02f_249.awsui_header-stuck_14iqq_eh02f_243:not(#\9)::before {
   border: 0;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
-.awsui_header-variant-full-page_14iqq_1t1om_314.awsui_header-stuck_14iqq_1t1om_243:not(#\9) {
+.awsui_header-variant-full-page_14iqq_eh02f_314.awsui_header-stuck_14iqq_eh02f_243:not(#\9) {
   box-shadow: none;
 }
-.awsui_header-variant-full-page_14iqq_1t1om_314.awsui_header-stuck_14iqq_1t1om_243:not(#\9)::after {
+.awsui_header-variant-full-page_14iqq_eh02f_314.awsui_header-stuck_14iqq_eh02f_243:not(#\9)::after {
   content: "";
   position: absolute;
   right: 0;
@@ -355,30 +355,30 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
 The dynamic height dark header needs a background that will cover
 the default white background of the container component.
 */
-.awsui_dark-header_14iqq_1t1om_332:not(#\9) {
+.awsui_dark-header_14iqq_eh02f_332:not(#\9) {
   background-color: var(--color-background-layout-main-nx09lr, #ffffff);
   color: var(--color-text-body-default-2sxhhn, #000716);
 }
 
-.awsui_content_14iqq_1t1om_189:not(#\9) {
+.awsui_content_14iqq_eh02f_189:not(#\9) {
   flex: 1;
 }
-.awsui_content-fit-height_14iqq_1t1om_340:not(#\9) {
+.awsui_content-fit-height_14iqq_eh02f_340:not(#\9) {
   overflow: auto;
 }
-.awsui_content_14iqq_1t1om_189.awsui_with-paddings_14iqq_1t1om_258:not(#\9) {
+.awsui_content_14iqq_eh02f_189.awsui_with-paddings_14iqq_eh02f_258:not(#\9) {
   padding: var(--space-scaled-l-0hpmd7, 20px) var(--space-container-horizontal-wfukh3, 20px);
 }
-.awsui_header_14iqq_1t1om_222 + .awsui_content_14iqq_1t1om_189.awsui_with-paddings_14iqq_1t1om_258:not(#\9) {
+.awsui_header_14iqq_eh02f_222 + .awsui_content_14iqq_eh02f_189.awsui_with-paddings_14iqq_eh02f_258:not(#\9) {
   padding-top: var(--space-container-content-top-1ae0r3, 4px);
 }
-.awsui_header_14iqq_1t1om_222 + .awsui_content_14iqq_1t1om_189.awsui_with-paddings_14iqq_1t1om_258.awsui_content-with-media_14iqq_1t1om_349:not(#\9) {
+.awsui_header_14iqq_eh02f_222 + .awsui_content_14iqq_eh02f_189.awsui_with-paddings_14iqq_eh02f_258.awsui_content-with-media_14iqq_eh02f_349:not(#\9) {
   padding-top: 0;
 }
 
-.awsui_footer_14iqq_1t1om_353.awsui_with-paddings_14iqq_1t1om_258:not(#\9) {
+.awsui_footer_14iqq_eh02f_353.awsui_with-paddings_14iqq_eh02f_258:not(#\9) {
   padding: var(--space-scaled-s-aqzyko, 12px) var(--space-container-horizontal-wfukh3, 20px);
 }
-.awsui_footer_14iqq_1t1om_353.awsui_with-divider_14iqq_1t1om_356:not(#\9) {
+.awsui_footer_14iqq_eh02f_353.awsui_with-divider_14iqq_eh02f_356:not(#\9) {
   border-top: var(--border-divider-section-width-4ax5o2, 2px) solid var(--color-border-divider-default-d3adp9, #e9ebed);
 }

package/container/styles.selectors.js

@@ -2,33 +2,33 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_14iqq_1t1om_97",
-  "fit-height": "awsui_fit-height_14iqq_1t1om_111",
-  "with-side-media": "awsui_with-side-media_14iqq_1t1om_116",
-  "variant-default": "awsui_variant-default_14iqq_1t1om_119",
-  "variant-stacked": "awsui_variant-stacked_14iqq_1t1om_119",
-  "sticky-enabled": "awsui_sticky-enabled_14iqq_1t1om_172",
-  "with-top-media": "awsui_with-top-media_14iqq_1t1om_184",
-  "content-wrapper": "awsui_content-wrapper_14iqq_1t1om_189",
-  "content-wrapper-fit-height": "awsui_content-wrapper-fit-height_14iqq_1t1om_194",
-  "media": "awsui_media_14iqq_1t1om_199",
-  "media-top": "awsui_media-top_14iqq_1t1om_211",
-  "media-side": "awsui_media-side_14iqq_1t1om_216",
-  "header": "awsui_header_14iqq_1t1om_222",
-  "header-with-media": "awsui_header-with-media_14iqq_1t1om_227",
-  "header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_1t1om_233",
-  "header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_1t1om_237",
-  "header-stuck": "awsui_header-stuck_14iqq_1t1om_243",
-  "header-variant-cards": "awsui_header-variant-cards_14iqq_1t1om_249",
-  "header-dynamic-height": "awsui_header-dynamic-height_14iqq_1t1om_252",
-  "with-paddings": "awsui_with-paddings_14iqq_1t1om_258",
-  "with-hidden-content": "awsui_with-hidden-content_14iqq_1t1om_264",
-  "header-variant-full-page": "awsui_header-variant-full-page_14iqq_1t1om_314",
-  "dark-header": "awsui_dark-header_14iqq_1t1om_332",
-  "content": "awsui_content_14iqq_1t1om_189",
-  "content-fit-height": "awsui_content-fit-height_14iqq_1t1om_340",
-  "content-with-media": "awsui_content-with-media_14iqq_1t1om_349",
-  "footer": "awsui_footer_14iqq_1t1om_353",
-  "with-divider": "awsui_with-divider_14iqq_1t1om_356"
+  "root": "awsui_root_14iqq_eh02f_97",
+  "fit-height": "awsui_fit-height_14iqq_eh02f_111",
+  "with-side-media": "awsui_with-side-media_14iqq_eh02f_116",
+  "variant-default": "awsui_variant-default_14iqq_eh02f_119",
+  "variant-stacked": "awsui_variant-stacked_14iqq_eh02f_119",
+  "sticky-enabled": "awsui_sticky-enabled_14iqq_eh02f_172",
+  "with-top-media": "awsui_with-top-media_14iqq_eh02f_184",
+  "content-wrapper": "awsui_content-wrapper_14iqq_eh02f_189",
+  "content-wrapper-fit-height": "awsui_content-wrapper-fit-height_14iqq_eh02f_194",
+  "media": "awsui_media_14iqq_eh02f_199",
+  "media-top": "awsui_media-top_14iqq_eh02f_211",
+  "media-side": "awsui_media-side_14iqq_eh02f_216",
+  "header": "awsui_header_14iqq_eh02f_222",
+  "header-with-media": "awsui_header-with-media_14iqq_eh02f_227",
+  "header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_eh02f_233",
+  "header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_eh02f_237",
+  "header-stuck": "awsui_header-stuck_14iqq_eh02f_243",
+  "header-variant-cards": "awsui_header-variant-cards_14iqq_eh02f_249",
+  "header-dynamic-height": "awsui_header-dynamic-height_14iqq_eh02f_252",
+  "with-paddings": "awsui_with-paddings_14iqq_eh02f_258",
+  "with-hidden-content": "awsui_with-hidden-content_14iqq_eh02f_264",
+  "header-variant-full-page": "awsui_header-variant-full-page_14iqq_eh02f_314",
+  "dark-header": "awsui_dark-header_14iqq_eh02f_332",
+  "content": "awsui_content_14iqq_eh02f_189",
+  "content-fit-height": "awsui_content-fit-height_14iqq_eh02f_340",
+  "content-with-media": "awsui_content-with-media_14iqq_eh02f_349",
+  "footer": "awsui_footer_14iqq_eh02f_353",
+  "with-divider": "awsui_with-divider_14iqq_eh02f_356"
 };
   

package/expandable-section/styles.css.js

@@ -1,34 +1,34 @@
 
     import './styles.scoped.css';
     export default {
-  "content-enter": "awsui_content-enter_gwq0h_18mml_97",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_gwq0h_18mml_1",
-  "trigger-expanded": "awsui_trigger-expanded_gwq0h_18mml_119",
-  "icon": "awsui_icon_gwq0h_18mml_133",
-  "root": "awsui_root_gwq0h_18mml_151",
-  "expand-button": "awsui_expand-button_gwq0h_18mml_168",
-  "expanded": "awsui_expanded_gwq0h_18mml_175",
-  "icon-container": "awsui_icon-container_gwq0h_18mml_179",
-  "icon-container-container": "awsui_icon-container-container_gwq0h_18mml_184",
-  "wrapper": "awsui_wrapper_gwq0h_18mml_188",
-  "wrapper-default": "awsui_wrapper-default_gwq0h_18mml_195",
-  "wrapper-footer": "awsui_wrapper-footer_gwq0h_18mml_195",
-  "wrapper-navigation": "awsui_wrapper-navigation_gwq0h_18mml_198",
-  "wrapper-container": "awsui_wrapper-container_gwq0h_18mml_201",
-  "header-deprecated": "awsui_header-deprecated_gwq0h_18mml_217",
-  "wrapper-expanded": "awsui_wrapper-expanded_gwq0h_18mml_248",
-  "header": "awsui_header_gwq0h_18mml_217",
-  "header-wrapper": "awsui_header-wrapper_gwq0h_18mml_255",
-  "header-button": "awsui_header-button_gwq0h_18mml_265",
-  "header-container-button": "awsui_header-container-button_gwq0h_18mml_265",
-  "header-container": "awsui_header-container_gwq0h_18mml_265",
-  "header-navigation": "awsui_header-navigation_gwq0h_18mml_297",
-  "header-text": "awsui_header-text_gwq0h_18mml_329",
-  "content": "awsui_content_gwq0h_18mml_97",
-  "content-default": "awsui_content-default_gwq0h_18mml_336",
-  "content-footer": "awsui_content-footer_gwq0h_18mml_339",
-  "content-expanded": "awsui_content-expanded_gwq0h_18mml_342",
-  "focusable": "awsui_focusable_gwq0h_18mml_346",
-  "click-target": "awsui_click-target_gwq0h_18mml_357"
+  "content-enter": "awsui_content-enter_gwq0h_xgtm9_97",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_gwq0h_xgtm9_1",
+  "trigger-expanded": "awsui_trigger-expanded_gwq0h_xgtm9_119",
+  "icon": "awsui_icon_gwq0h_xgtm9_133",
+  "root": "awsui_root_gwq0h_xgtm9_151",
+  "expand-button": "awsui_expand-button_gwq0h_xgtm9_168",
+  "expanded": "awsui_expanded_gwq0h_xgtm9_175",
+  "icon-container": "awsui_icon-container_gwq0h_xgtm9_179",
+  "icon-container-container": "awsui_icon-container-container_gwq0h_xgtm9_184",
+  "wrapper": "awsui_wrapper_gwq0h_xgtm9_188",
+  "wrapper-default": "awsui_wrapper-default_gwq0h_xgtm9_195",
+  "wrapper-footer": "awsui_wrapper-footer_gwq0h_xgtm9_195",
+  "wrapper-navigation": "awsui_wrapper-navigation_gwq0h_xgtm9_198",
+  "wrapper-container": "awsui_wrapper-container_gwq0h_xgtm9_201",
+  "header-deprecated": "awsui_header-deprecated_gwq0h_xgtm9_217",
+  "wrapper-expanded": "awsui_wrapper-expanded_gwq0h_xgtm9_239",
+  "header": "awsui_header_gwq0h_xgtm9_217",
+  "header-wrapper": "awsui_header-wrapper_gwq0h_xgtm9_258",
+  "header-button": "awsui_header-button_gwq0h_xgtm9_268",
+  "header-container-button": "awsui_header-container-button_gwq0h_xgtm9_268",
+  "header-container": "awsui_header-container_gwq0h_xgtm9_268",
+  "header-navigation": "awsui_header-navigation_gwq0h_xgtm9_300",
+  "header-text": "awsui_header-text_gwq0h_xgtm9_332",
+  "content": "awsui_content_gwq0h_xgtm9_97",
+  "content-default": "awsui_content-default_gwq0h_xgtm9_339",
+  "content-footer": "awsui_content-footer_gwq0h_xgtm9_342",
+  "content-expanded": "awsui_content-expanded_gwq0h_xgtm9_345",
+  "focusable": "awsui_focusable_gwq0h_xgtm9_349",
+  "click-target": "awsui_click-target_gwq0h_xgtm9_360"
 };