@cloudscape-design/components 3.0.673 → 3.0.675

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/cards/interfaces.d.ts +1 -2
  2. package/cards/interfaces.d.ts.map +1 -1
  3. package/cards/interfaces.js.map +1 -1
  4. package/container/internal.d.ts.map +1 -1
  5. package/container/internal.js +1 -0
  6. package/container/internal.js.map +1 -1
  7. package/container/styles.css.js +31 -30
  8. package/container/styles.scoped.css +57 -54
  9. package/container/styles.selectors.js +31 -30
  10. package/internal/environment.js +1 -1
  11. package/internal/environment.json +1 -1
  12. package/internal/manifest.json +1 -1
  13. package/internal/utils/scrollable-containers.js +3 -2
  14. package/internal/utils/scrollable-containers.js.map +1 -1
  15. package/package.json +1 -1
  16. package/popover/use-popover-position.js +3 -2
  17. package/popover/use-popover-position.js.map +1 -1
  18. package/table/header-cell/styles.css.js +26 -26
  19. package/table/header-cell/styles.scoped.css +67 -64
  20. package/table/header-cell/styles.selectors.js +26 -26
  21. package/table/interfaces.d.ts +1 -2
  22. package/table/interfaces.d.ts.map +1 -1
  23. package/table/interfaces.js.map +1 -1
  24. package/table/styles.css.js +34 -34
  25. package/table/styles.scoped.css +42 -39
  26. package/table/styles.selectors.js +34 -34
package/cards/interfaces.d.ts CHANGED
@@ -184,8 +184,7 @@ export interface CardsProps<T = any> extends BaseComponentProps {
184
184
  /**
185
185
  * Specify a cards variant with one of the following:
186
186
  * * `container` - Use this variant to have the cards displayed as a container.
187
- * * `full-page` – Use this variant when cards are the entire content of a page. Full page variants
188
- * implement the high contrast header and content behavior automatically.
187
+ * * `full-page` – Use this variant when cards are the entire content of a page.
189
188
  * @visualrefresh `full-page` variant
190
189
  */
191
190
  variant?: 'container' | 'full-page';
package/cards/interfaces.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/cards/interfaces.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/cards/interfaces.tsx"],"names":[],"mappings":"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"}
package/cards/interfaces.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/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 */\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 */\n firstIndex?: number;\n /**\n * Use this function to announce page changes to screen reader users.\n * The function argument takes the following properties:\n * * `firstIndex` (number) - The provided `firstIndex` property which defaults to 1 when not defined.\n * * `lastIndex` (number) - The index of the last visible item of the table.\n * * `totalItemsCount` (optional, number) - The provided `totalItemsCount` property.\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 /**\n * Activating this property makes the entire card clickable to select it.\n * Don't use this property if the card has any other interactive elements.\n */\n entireCardClickable?: boolean;\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 firstIndex: number;\n lastIndex: number;\n totalItemsCount?: 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"]}
1
+ {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/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 */\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 */\n firstIndex?: number;\n /**\n * Use this function to announce page changes to screen reader users.\n * The function argument takes the following properties:\n * * `firstIndex` (number) - The provided `firstIndex` property which defaults to 1 when not defined.\n * * `lastIndex` (number) - The index of the last visible item of the table.\n * * `totalItemsCount` (optional, number) - The provided `totalItemsCount` property.\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.\n * @visualrefresh `full-page` variant\n */\n variant?: 'container' | 'full-page';\n\n /**\n * Activating this property makes the entire card clickable to select it.\n * Don't use this property if the card has any other interactive elements.\n */\n entireCardClickable?: boolean;\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 firstIndex: number;\n lastIndex: number;\n totalItemsCount?: 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/internal.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/container/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiB,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAMlF,OAAO,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAM1E,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC,EAAE,0BAA0B;IACzG,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,GAAG,UAAU,GAAG,WAAW,GAAG,OAAO,CAAC;IAEzE,oBAAoB,CAAC,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,oBAAoB,CAAC,CAAC;IACjF,YAAY,CAAC,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,YAAY,CAAC,CAAC;CAClE;AAED,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,sBAAsB,eAWvE;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,MAAM,EACN,MAAM,EACN,QAAQ,EACR,OAAmB,EACnB,qBAA6B,EAC7B,sBAA8B,EAC9B,SAAS,EACT,KAAK,EACL,cAAc,EACd,oBAAoB,EACpB,cAAsB,EACtB,iBAAwB,EACxB,sBAA8B,EAC9B,uBAA+B,EAC/B,eAAuB,EACvB,WAAW,EACX,UAAkB,EAClB,qBAA4B,EAC5B,oBAAoB,EACpB,YAAY,EACZ,GAAG,SAAS,EACb,EAAE,sBAAsB,eAoGxB"}
1
+ {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/container/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiB,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAMlF,OAAO,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAM1E,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC,EAAE,0BAA0B;IACzG,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,GAAG,UAAU,GAAG,WAAW,GAAG,OAAO,CAAC;IAEzE,oBAAoB,CAAC,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,oBAAoB,CAAC,CAAC;IACjF,YAAY,CAAC,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,YAAY,CAAC,CAAC;CAClE;AAED,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,sBAAsB,eAWvE;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,MAAM,EACN,MAAM,EACN,QAAQ,EACR,OAAmB,EACnB,qBAA6B,EAC7B,sBAA8B,EAC9B,SAAS,EACT,KAAK,EACL,cAAc,EACd,oBAAoB,EACpB,cAAsB,EACtB,iBAAwB,EACxB,sBAA8B,EAC9B,uBAA+B,EAC/B,eAAuB,EACvB,WAAW,EACX,UAAkB,EAClB,qBAA4B,EAC5B,oBAAoB,EACpB,YAAY,EACZ,GAAG,SAAS,EACb,EAAE,sBAAsB,eAqGxB"}
package/container/internal.js CHANGED
@@ -52,6 +52,7 @@ export default function InternalContainer(_a) {
52
52
  [styles['with-toolbar']]: hasToolbar,
53
53
  [styles['with-hidden-content']]: !children || __hiddenContent,
54
54
  [styles['header-with-media']]: hasMedia,
55
+ [styles['header-full-page']]: __fullPage && isRefresh,
55
56
  }) }, stickyStyles, { ref: headerMergedRef }),
56
57
  isStuck && !isMobile && isRefresh && __fullPage && React.createElement("div", { className: styles['header-cover'] }),
57
58
  header)))),
package/container/internal.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/container/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\nimport clsx from 'clsx';\nimport React, { useRef } from 'react';\nimport { ContainerProps } from './interfaces';\nimport { getBaseProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { StickyHeaderContext, useStickyHeader } from './use-sticky-header';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport styles from './styles.css.js';\nimport { useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\nimport { useModalContext } from '../internal/context/modal-context';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { ContainerHeaderContextProvider } from '../internal/context/container-header';\nimport { getGlobalFlag } from '../internal/utils/global-flags';\n\nexport interface InternalContainerProps extends Omit<ContainerProps, 'variant'>, InternalBaseComponentProps {\n __stickyHeader?: boolean;\n __stickyOffset?: number;\n __mobileStickyOffset?: number;\n __disableFooterDivider?: boolean;\n __disableFooterPaddings?: boolean;\n __hiddenContent?: boolean;\n __headerRef?: React.RefObject<HTMLDivElement>;\n __fullPage?: boolean;\n __disableStickyMobile?: boolean;\n /**\n * Additional internal variant:\n * * `embedded` - Use this variant within a parent container (such as a modal,\n * expandable section, container or split panel).\n * * `full-page` – Only for internal use in table, cards and other components\n */\n variant?: ContainerProps['variant'] | 'embedded' | 'full-page' | 'cards';\n\n __funnelSubStepProps?: ReturnType<typeof useFunnelSubStep>['funnelSubStepProps'];\n __subStepRef?: ReturnType<typeof useFunnelSubStep>['subStepRef'];\n}\n\nexport function InternalContainerAsSubstep(props: InternalContainerProps) {\n const { subStepRef, funnelSubStepProps } = useFunnelSubStep();\n const modalContext = useModalContext();\n\n return (\n <InternalContainer\n {...props}\n __subStepRef={modalContext?.isInModal ? { current: null } : subStepRef}\n __funnelSubStepProps={modalContext?.isInModal ? {} : funnelSubStepProps}\n />\n );\n}\n\nexport default function InternalContainer({\n header,\n footer,\n children,\n variant = 'default',\n disableHeaderPaddings = false,\n disableContentPaddings = false,\n fitHeight,\n media,\n __stickyOffset,\n __mobileStickyOffset,\n __stickyHeader = false,\n __internalRootRef = null,\n __disableFooterDivider = false,\n __disableFooterPaddings = false,\n __hiddenContent = false,\n __headerRef,\n __fullPage = false,\n __disableStickyMobile = true,\n __funnelSubStepProps,\n __subStepRef,\n ...restProps\n}: InternalContainerProps) {\n const isMobile = useMobile();\n const isRefresh = useVisualRefresh();\n const baseProps = getBaseProps(restProps);\n const rootRef = useRef<HTMLDivElement>(null);\n const headerRef = useRef<HTMLDivElement>(null);\n const { isSticky, isStuck, stickyStyles } = useStickyHeader(\n rootRef,\n headerRef,\n __stickyHeader,\n __stickyOffset,\n __mobileStickyOffset,\n __disableStickyMobile,\n __fullPage && isRefresh && !isMobile\n );\n const contentId = useUniqueId();\n\n const hasDynamicHeight = isRefresh && variant === 'full-page';\n\n const mergedRef = useMergeRefs(rootRef, __internalRootRef);\n const headerMergedRef = useMergeRefs(headerRef, __headerRef);\n\n // The container is only sticky on mobile if it is the header for the table.\n // In this case we don't want the container to have sticky styles, as only the table header row will show as stuck on scroll.\n const shouldHaveStickyStyles = isSticky && !isMobile;\n\n const hasMedia = !!media?.content;\n const hasToolbar = getGlobalFlag('appLayoutWidget');\n const mediaPosition = media?.position ?? 'top';\n return (\n <div\n {...baseProps}\n {...__funnelSubStepProps}\n className={clsx(\n baseProps.className,\n styles.root,\n styles[`variant-${variant}`],\n fitHeight && styles['fit-height'],\n hasMedia && (mediaPosition === 'side' ? styles['with-side-media'] : styles['with-top-media']),\n shouldHaveStickyStyles && [styles['sticky-enabled']],\n isRefresh && styles.refresh\n )}\n ref={mergedRef}\n >\n {hasMedia && (\n <div\n className={clsx(styles[`media-${mediaPosition === 'side' ? 'side' : 'top'}`], styles.media)}\n style={mediaPosition === 'top' ? { height: media?.height || '' } : { width: media?.width || '' }}\n >\n {media.content}\n </div>\n )}\n <div\n id={contentId}\n ref={__subStepRef}\n className={clsx(styles['content-wrapper'], fitHeight && styles['content-wrapper-fit-height'])}\n >\n {header && (\n <ContainerHeaderContextProvider>\n <StickyHeaderContext.Provider value={{ isStuck }}>\n <div\n className={clsx(isRefresh && styles.refresh, styles.header, styles[`header-variant-${variant}`], {\n [styles['header-sticky-disabled']]: __stickyHeader && !isSticky,\n [styles['header-sticky-enabled']]: isSticky,\n [styles['header-dynamic-height']]: hasDynamicHeight,\n [styles['header-stuck']]: isStuck,\n [styles['with-paddings']]: !disableHeaderPaddings,\n [styles['with-toolbar']]: hasToolbar,\n [styles['with-hidden-content']]: !children || __hiddenContent,\n [styles['header-with-media']]: hasMedia,\n })}\n {...stickyStyles}\n ref={headerMergedRef}\n >\n {isStuck && !isMobile && isRefresh && __fullPage && <div className={styles['header-cover']}></div>}\n {header}\n </div>\n </StickyHeaderContext.Provider>\n </ContainerHeaderContextProvider>\n )}\n <div\n className={clsx(styles.content, fitHeight && styles['content-fit-height'], {\n [styles['with-paddings']]: !disableContentPaddings,\n })}\n >\n {children}\n </div>\n {footer && (\n <div\n className={clsx(styles.footer, {\n [styles['with-divider']]: !__disableFooterDivider,\n [styles['with-paddings']]: !__disableFooterPaddings,\n })}\n >\n {footer}\n </div>\n )}\n </div>\n </div>\n );\n}\n"]}
1
+ {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/container/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\nimport clsx from 'clsx';\nimport React, { useRef } from 'react';\nimport { ContainerProps } from './interfaces';\nimport { getBaseProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { StickyHeaderContext, useStickyHeader } from './use-sticky-header';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport styles from './styles.css.js';\nimport { useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\nimport { useModalContext } from '../internal/context/modal-context';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { ContainerHeaderContextProvider } from '../internal/context/container-header';\nimport { getGlobalFlag } from '../internal/utils/global-flags';\n\nexport interface InternalContainerProps extends Omit<ContainerProps, 'variant'>, InternalBaseComponentProps {\n __stickyHeader?: boolean;\n __stickyOffset?: number;\n __mobileStickyOffset?: number;\n __disableFooterDivider?: boolean;\n __disableFooterPaddings?: boolean;\n __hiddenContent?: boolean;\n __headerRef?: React.RefObject<HTMLDivElement>;\n __fullPage?: boolean;\n __disableStickyMobile?: boolean;\n /**\n * Additional internal variant:\n * * `embedded` - Use this variant within a parent container (such as a modal,\n * expandable section, container or split panel).\n * * `full-page` – Only for internal use in table, cards and other components\n */\n variant?: ContainerProps['variant'] | 'embedded' | 'full-page' | 'cards';\n\n __funnelSubStepProps?: ReturnType<typeof useFunnelSubStep>['funnelSubStepProps'];\n __subStepRef?: ReturnType<typeof useFunnelSubStep>['subStepRef'];\n}\n\nexport function InternalContainerAsSubstep(props: InternalContainerProps) {\n const { subStepRef, funnelSubStepProps } = useFunnelSubStep();\n const modalContext = useModalContext();\n\n return (\n <InternalContainer\n {...props}\n __subStepRef={modalContext?.isInModal ? { current: null } : subStepRef}\n __funnelSubStepProps={modalContext?.isInModal ? {} : funnelSubStepProps}\n />\n );\n}\n\nexport default function InternalContainer({\n header,\n footer,\n children,\n variant = 'default',\n disableHeaderPaddings = false,\n disableContentPaddings = false,\n fitHeight,\n media,\n __stickyOffset,\n __mobileStickyOffset,\n __stickyHeader = false,\n __internalRootRef = null,\n __disableFooterDivider = false,\n __disableFooterPaddings = false,\n __hiddenContent = false,\n __headerRef,\n __fullPage = false,\n __disableStickyMobile = true,\n __funnelSubStepProps,\n __subStepRef,\n ...restProps\n}: InternalContainerProps) {\n const isMobile = useMobile();\n const isRefresh = useVisualRefresh();\n const baseProps = getBaseProps(restProps);\n const rootRef = useRef<HTMLDivElement>(null);\n const headerRef = useRef<HTMLDivElement>(null);\n const { isSticky, isStuck, stickyStyles } = useStickyHeader(\n rootRef,\n headerRef,\n __stickyHeader,\n __stickyOffset,\n __mobileStickyOffset,\n __disableStickyMobile,\n __fullPage && isRefresh && !isMobile\n );\n const contentId = useUniqueId();\n\n const hasDynamicHeight = isRefresh && variant === 'full-page';\n\n const mergedRef = useMergeRefs(rootRef, __internalRootRef);\n const headerMergedRef = useMergeRefs(headerRef, __headerRef);\n\n // The container is only sticky on mobile if it is the header for the table.\n // In this case we don't want the container to have sticky styles, as only the table header row will show as stuck on scroll.\n const shouldHaveStickyStyles = isSticky && !isMobile;\n\n const hasMedia = !!media?.content;\n const hasToolbar = getGlobalFlag('appLayoutWidget');\n const mediaPosition = media?.position ?? 'top';\n return (\n <div\n {...baseProps}\n {...__funnelSubStepProps}\n className={clsx(\n baseProps.className,\n styles.root,\n styles[`variant-${variant}`],\n fitHeight && styles['fit-height'],\n hasMedia && (mediaPosition === 'side' ? styles['with-side-media'] : styles['with-top-media']),\n shouldHaveStickyStyles && [styles['sticky-enabled']],\n isRefresh && styles.refresh\n )}\n ref={mergedRef}\n >\n {hasMedia && (\n <div\n className={clsx(styles[`media-${mediaPosition === 'side' ? 'side' : 'top'}`], styles.media)}\n style={mediaPosition === 'top' ? { height: media?.height || '' } : { width: media?.width || '' }}\n >\n {media.content}\n </div>\n )}\n <div\n id={contentId}\n ref={__subStepRef}\n className={clsx(styles['content-wrapper'], fitHeight && styles['content-wrapper-fit-height'])}\n >\n {header && (\n <ContainerHeaderContextProvider>\n <StickyHeaderContext.Provider value={{ isStuck }}>\n <div\n className={clsx(isRefresh && styles.refresh, styles.header, styles[`header-variant-${variant}`], {\n [styles['header-sticky-disabled']]: __stickyHeader && !isSticky,\n [styles['header-sticky-enabled']]: isSticky,\n [styles['header-dynamic-height']]: hasDynamicHeight,\n [styles['header-stuck']]: isStuck,\n [styles['with-paddings']]: !disableHeaderPaddings,\n [styles['with-toolbar']]: hasToolbar,\n [styles['with-hidden-content']]: !children || __hiddenContent,\n [styles['header-with-media']]: hasMedia,\n [styles['header-full-page']]: __fullPage && isRefresh,\n })}\n {...stickyStyles}\n ref={headerMergedRef}\n >\n {isStuck && !isMobile && isRefresh && __fullPage && <div className={styles['header-cover']}></div>}\n {header}\n </div>\n </StickyHeaderContext.Provider>\n </ContainerHeaderContextProvider>\n )}\n <div\n className={clsx(styles.content, fitHeight && styles['content-fit-height'], {\n [styles['with-paddings']]: !disableContentPaddings,\n })}\n >\n {children}\n </div>\n {footer && (\n <div\n className={clsx(styles.footer, {\n [styles['with-divider']]: !__disableFooterDivider,\n [styles['with-paddings']]: !__disableFooterPaddings,\n })}\n >\n {footer}\n </div>\n )}\n </div>\n </div>\n );\n}\n"]}
package/container/styles.css.js CHANGED
@@ -1,35 +1,36 @@
1
1
 
2
2
  import './styles.scoped.css';
3
3
  export default {
4
- "root": "awsui_root_14iqq_1o4mb_101",
5
- "fit-height": "awsui_fit-height_14iqq_1o4mb_137",
6
- "with-side-media": "awsui_with-side-media_14iqq_1o4mb_142",
7
- "variant-default": "awsui_variant-default_14iqq_1o4mb_145",
8
- "variant-stacked": "awsui_variant-stacked_14iqq_1o4mb_145",
9
- "refresh": "awsui_refresh_14iqq_1o4mb_153",
10
- "sticky-enabled": "awsui_sticky-enabled_14iqq_1o4mb_203",
11
- "with-top-media": "awsui_with-top-media_14iqq_1o4mb_215",
12
- "content-wrapper": "awsui_content-wrapper_14iqq_1o4mb_220",
13
- "content-wrapper-fit-height": "awsui_content-wrapper-fit-height_14iqq_1o4mb_225",
14
- "media": "awsui_media_14iqq_1o4mb_232",
15
- "media-top": "awsui_media-top_14iqq_1o4mb_250",
16
- "media-side": "awsui_media-side_14iqq_1o4mb_255",
17
- "header": "awsui_header_14iqq_1o4mb_261",
18
- "header-with-media": "awsui_header-with-media_14iqq_1o4mb_266",
19
- "header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_1o4mb_272",
20
- "header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_1o4mb_276",
21
- "header-stuck": "awsui_header-stuck_14iqq_1o4mb_282",
22
- "header-variant-cards": "awsui_header-variant-cards_14iqq_1o4mb_292",
23
- "header-dynamic-height": "awsui_header-dynamic-height_14iqq_1o4mb_295",
24
- "with-paddings": "awsui_with-paddings_14iqq_1o4mb_301",
25
- "with-hidden-content": "awsui_with-hidden-content_14iqq_1o4mb_310",
26
- "header-variant-full-page": "awsui_header-variant-full-page_14iqq_1o4mb_368",
27
- "with-toolbar": "awsui_with-toolbar_14iqq_1o4mb_368",
28
- "header-cover": "awsui_header-cover_14iqq_1o4mb_374",
29
- "content": "awsui_content_14iqq_1o4mb_220",
30
- "content-fit-height": "awsui_content-fit-height_14iqq_1o4mb_402",
31
- "content-with-media": "awsui_content-with-media_14iqq_1o4mb_412",
32
- "footer": "awsui_footer_14iqq_1o4mb_416",
33
- "with-divider": "awsui_with-divider_14iqq_1o4mb_420"
4
+ "root": "awsui_root_14iqq_1ml84_101",
5
+ "fit-height": "awsui_fit-height_14iqq_1ml84_137",
6
+ "with-side-media": "awsui_with-side-media_14iqq_1ml84_142",
7
+ "variant-default": "awsui_variant-default_14iqq_1ml84_145",
8
+ "variant-stacked": "awsui_variant-stacked_14iqq_1ml84_145",
9
+ "refresh": "awsui_refresh_14iqq_1ml84_153",
10
+ "sticky-enabled": "awsui_sticky-enabled_14iqq_1ml84_203",
11
+ "with-top-media": "awsui_with-top-media_14iqq_1ml84_215",
12
+ "content-wrapper": "awsui_content-wrapper_14iqq_1ml84_220",
13
+ "content-wrapper-fit-height": "awsui_content-wrapper-fit-height_14iqq_1ml84_225",
14
+ "media": "awsui_media_14iqq_1ml84_232",
15
+ "media-top": "awsui_media-top_14iqq_1ml84_250",
16
+ "media-side": "awsui_media-side_14iqq_1ml84_255",
17
+ "header": "awsui_header_14iqq_1ml84_261",
18
+ "header-full-page": "awsui_header-full-page_14iqq_1ml84_266",
19
+ "header-with-media": "awsui_header-with-media_14iqq_1ml84_269",
20
+ "header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_1ml84_275",
21
+ "header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_1ml84_279",
22
+ "header-stuck": "awsui_header-stuck_14iqq_1ml84_285",
23
+ "header-variant-cards": "awsui_header-variant-cards_14iqq_1ml84_295",
24
+ "header-dynamic-height": "awsui_header-dynamic-height_14iqq_1ml84_298",
25
+ "with-paddings": "awsui_with-paddings_14iqq_1ml84_304",
26
+ "with-hidden-content": "awsui_with-hidden-content_14iqq_1ml84_313",
27
+ "header-variant-full-page": "awsui_header-variant-full-page_14iqq_1ml84_371",
28
+ "with-toolbar": "awsui_with-toolbar_14iqq_1ml84_371",
29
+ "header-cover": "awsui_header-cover_14iqq_1ml84_377",
30
+ "content": "awsui_content_14iqq_1ml84_220",
31
+ "content-fit-height": "awsui_content-fit-height_14iqq_1ml84_405",
32
+ "content-with-media": "awsui_content-with-media_14iqq_1ml84_415",
33
+ "footer": "awsui_footer_14iqq_1ml84_419",
34
+ "with-divider": "awsui_with-divider_14iqq_1ml84_423"
34
35
  };
35
36
 
package/container/styles.scoped.css CHANGED
@@ -98,7 +98,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
98
98
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
99
99
  SPDX-License-Identifier: Apache-2.0
100
100
  */
101
- .awsui_root_14iqq_1o4mb_101:not(#\9) {
101
+ .awsui_root_14iqq_1ml84_101:not(#\9) {
102
102
  border-collapse: separate;
103
103
  border-spacing: 0;
104
104
  box-sizing: border-box;
@@ -135,15 +135,15 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
135
135
  word-wrap: break-word;
136
136
  position: relative;
137
137
  }
138
- .awsui_root_14iqq_1o4mb_101.awsui_fit-height_14iqq_1o4mb_137:not(#\9) {
138
+ .awsui_root_14iqq_1ml84_101.awsui_fit-height_14iqq_1ml84_137:not(#\9) {
139
139
  display: flex;
140
140
  flex-direction: column;
141
141
  block-size: 100%;
142
142
  }
143
- .awsui_root_14iqq_1o4mb_101.awsui_fit-height_14iqq_1o4mb_137.awsui_with-side-media_14iqq_1o4mb_142:not(#\9) {
143
+ .awsui_root_14iqq_1ml84_101.awsui_fit-height_14iqq_1ml84_137.awsui_with-side-media_14iqq_1ml84_142:not(#\9) {
144
144
  flex-direction: row;
145
145
  }
146
- .awsui_root_14iqq_1o4mb_101.awsui_variant-default_14iqq_1o4mb_145:not(#\9), .awsui_root_14iqq_1o4mb_101.awsui_variant-stacked_14iqq_1o4mb_145:not(#\9) {
146
+ .awsui_root_14iqq_1ml84_101.awsui_variant-default_14iqq_1ml84_145:not(#\9), .awsui_root_14iqq_1ml84_101.awsui_variant-stacked_14iqq_1ml84_145:not(#\9) {
147
147
  background-color: var(--color-background-container-content-4un1ap, #ffffff);
148
148
  border-start-start-radius: var(--border-radius-container-wqv1zi, 16px);
149
149
  border-start-end-radius: var(--border-radius-container-wqv1zi, 16px);
@@ -151,11 +151,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
151
151
  border-end-end-radius: var(--border-radius-container-wqv1zi, 16px);
152
152
  box-sizing: border-box;
153
153
  }
154
- .awsui_root_14iqq_1o4mb_101.awsui_variant-default_14iqq_1o4mb_145.awsui_refresh_14iqq_1o4mb_153:not(#\9), .awsui_root_14iqq_1o4mb_101.awsui_variant-stacked_14iqq_1o4mb_145.awsui_refresh_14iqq_1o4mb_153:not(#\9) {
154
+ .awsui_root_14iqq_1ml84_101.awsui_variant-default_14iqq_1ml84_145.awsui_refresh_14iqq_1ml84_153:not(#\9), .awsui_root_14iqq_1ml84_101.awsui_variant-stacked_14iqq_1ml84_145.awsui_refresh_14iqq_1ml84_153:not(#\9) {
155
155
  border-block: solid var(--border-divider-section-width-1061zr, 1px) var(--color-border-divider-default-j74lyz, #b6bec9);
156
156
  border-inline: solid var(--border-divider-section-width-1061zr, 1px) var(--color-border-divider-default-j74lyz, #b6bec9);
157
157
  }
158
- .awsui_root_14iqq_1o4mb_101.awsui_variant-default_14iqq_1o4mb_145:not(#\9):not(.awsui_refresh_14iqq_1o4mb_153)::before, .awsui_root_14iqq_1o4mb_101.awsui_variant-stacked_14iqq_1o4mb_145:not(#\9):not(.awsui_refresh_14iqq_1o4mb_153)::before {
158
+ .awsui_root_14iqq_1ml84_101.awsui_variant-default_14iqq_1ml84_145:not(#\9):not(.awsui_refresh_14iqq_1ml84_153)::before, .awsui_root_14iqq_1ml84_101.awsui_variant-stacked_14iqq_1ml84_145:not(#\9):not(.awsui_refresh_14iqq_1ml84_153)::before {
159
159
  content: "";
160
160
  position: absolute;
161
161
  inset-inline-start: 0px;
@@ -173,7 +173,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
173
173
  border-end-end-radius: var(--border-radius-container-wqv1zi, 16px);
174
174
  z-index: 1;
175
175
  }
176
- .awsui_root_14iqq_1o4mb_101.awsui_variant-default_14iqq_1o4mb_145:not(#\9):not(.awsui_refresh_14iqq_1o4mb_153)::after, .awsui_root_14iqq_1o4mb_101.awsui_variant-stacked_14iqq_1o4mb_145:not(#\9):not(.awsui_refresh_14iqq_1o4mb_153)::after {
176
+ .awsui_root_14iqq_1ml84_101.awsui_variant-default_14iqq_1ml84_145:not(#\9):not(.awsui_refresh_14iqq_1ml84_153)::after, .awsui_root_14iqq_1ml84_101.awsui_variant-stacked_14iqq_1ml84_145:not(#\9):not(.awsui_refresh_14iqq_1ml84_153)::after {
177
177
  content: "";
178
178
  position: absolute;
179
179
  inset-inline-start: 0px;
@@ -189,141 +189,144 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
189
189
  border-end-end-radius: var(--border-radius-container-wqv1zi, 16px);
190
190
  box-shadow: var(--shadow-container-fxmdn3, 0px 0px 1px 1px #e9ebed, 0px 1px 8px 2px rgba(0, 7, 22, 0.12));
191
191
  }
192
- .awsui_root_14iqq_1o4mb_101.awsui_variant-stacked_14iqq_1o4mb_145:not(#\9):not(:last-child), .awsui_root_14iqq_1o4mb_101.awsui_variant-stacked_14iqq_1o4mb_145:not(#\9):not(:last-child)::before, .awsui_root_14iqq_1o4mb_101.awsui_variant-stacked_14iqq_1o4mb_145:not(#\9):not(:last-child)::after {
192
+ .awsui_root_14iqq_1ml84_101.awsui_variant-stacked_14iqq_1ml84_145:not(#\9):not(:last-child), .awsui_root_14iqq_1ml84_101.awsui_variant-stacked_14iqq_1ml84_145:not(#\9):not(:last-child)::before, .awsui_root_14iqq_1ml84_101.awsui_variant-stacked_14iqq_1ml84_145:not(#\9):not(:last-child)::after {
193
193
  border-end-end-radius: 0;
194
194
  border-end-start-radius: 0;
195
195
  border-block-end-width: 0;
196
196
  }
197
- .awsui_root_14iqq_1o4mb_101.awsui_variant-stacked_14iqq_1o4mb_145 + .awsui_root_14iqq_1o4mb_101.awsui_variant-stacked_14iqq_1o4mb_145:not(#\9), .awsui_root_14iqq_1o4mb_101.awsui_variant-stacked_14iqq_1o4mb_145 + .awsui_root_14iqq_1o4mb_101.awsui_variant-stacked_14iqq_1o4mb_145:not(#\9)::before, .awsui_root_14iqq_1o4mb_101.awsui_variant-stacked_14iqq_1o4mb_145 + .awsui_root_14iqq_1o4mb_101.awsui_variant-stacked_14iqq_1o4mb_145:not(#\9)::after {
197
+ .awsui_root_14iqq_1ml84_101.awsui_variant-stacked_14iqq_1ml84_145 + .awsui_root_14iqq_1ml84_101.awsui_variant-stacked_14iqq_1ml84_145:not(#\9), .awsui_root_14iqq_1ml84_101.awsui_variant-stacked_14iqq_1ml84_145 + .awsui_root_14iqq_1ml84_101.awsui_variant-stacked_14iqq_1ml84_145:not(#\9)::before, .awsui_root_14iqq_1ml84_101.awsui_variant-stacked_14iqq_1ml84_145 + .awsui_root_14iqq_1ml84_101.awsui_variant-stacked_14iqq_1ml84_145:not(#\9)::after {
198
198
  border-start-start-radius: 0;
199
199
  border-start-end-radius: 0;
200
200
  }
201
- .awsui_root_14iqq_1o4mb_101.awsui_variant-stacked_14iqq_1o4mb_145 + .awsui_root_14iqq_1o4mb_101.awsui_variant-stacked_14iqq_1o4mb_145:not(#\9):not(.awsui_refresh_14iqq_1o4mb_153)::before {
201
+ .awsui_root_14iqq_1ml84_101.awsui_variant-stacked_14iqq_1ml84_145 + .awsui_root_14iqq_1ml84_101.awsui_variant-stacked_14iqq_1ml84_145:not(#\9):not(.awsui_refresh_14iqq_1ml84_153)::before {
202
202
  border-block-start: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-divider-default-j74lyz, #b6bec9);
203
203
  }
204
- .awsui_root_14iqq_1o4mb_101.awsui_sticky-enabled_14iqq_1o4mb_203:not(#\9):not(.awsui_refresh_14iqq_1o4mb_153)::before {
204
+ .awsui_root_14iqq_1ml84_101.awsui_sticky-enabled_14iqq_1ml84_203:not(#\9):not(.awsui_refresh_14iqq_1ml84_153)::before {
205
205
  inset-block-start: calc(-1 * var(--border-container-top-width-uugwwl, 0px));
206
206
  }
207
- .awsui_root_14iqq_1o4mb_101.awsui_sticky-enabled_14iqq_1o4mb_203:not(#\9):not(.awsui_refresh_14iqq_1o4mb_153).awsui_variant-stacked_14iqq_1o4mb_145::before {
207
+ .awsui_root_14iqq_1ml84_101.awsui_sticky-enabled_14iqq_1ml84_203:not(#\9):not(.awsui_refresh_14iqq_1ml84_153).awsui_variant-stacked_14iqq_1ml84_145::before {
208
208
  inset-block-start: calc(-1 * var(--border-divider-section-width-1061zr, 1px));
209
209
  }
210
210
 
211
- .awsui_with-side-media_14iqq_1o4mb_142:not(#\9) {
211
+ .awsui_with-side-media_14iqq_1ml84_142:not(#\9) {
212
212
  display: flex;
213
213
  flex-direction: row;
214
214
  }
215
215
 
216
- .awsui_with-top-media_14iqq_1o4mb_215:not(#\9) {
216
+ .awsui_with-top-media_14iqq_1ml84_215:not(#\9) {
217
217
  display: flex;
218
218
  flex-direction: column;
219
219
  }
220
220
 
221
- .awsui_content-wrapper_14iqq_1o4mb_220:not(#\9) {
221
+ .awsui_content-wrapper_14iqq_1ml84_220:not(#\9) {
222
222
  display: flex;
223
223
  flex-direction: column;
224
224
  inline-size: 100%;
225
225
  }
226
- .awsui_content-wrapper-fit-height_14iqq_1o4mb_225:not(#\9) {
226
+ .awsui_content-wrapper-fit-height_14iqq_1ml84_225:not(#\9) {
227
227
  block-size: 100%;
228
228
  overflow: hidden;
229
229
  border-end-start-radius: var(--border-radius-container-wqv1zi, 16px);
230
230
  border-end-end-radius: var(--border-radius-container-wqv1zi, 16px);
231
231
  }
232
232
 
233
- .awsui_media_14iqq_1o4mb_232:not(#\9) {
233
+ .awsui_media_14iqq_1ml84_232:not(#\9) {
234
234
  overflow: hidden;
235
235
  flex-shrink: 0;
236
236
  }
237
- .awsui_media_14iqq_1o4mb_232 img:not(#\9),
238
- .awsui_media_14iqq_1o4mb_232 video:not(#\9),
239
- .awsui_media_14iqq_1o4mb_232 picture:not(#\9) {
237
+ .awsui_media_14iqq_1ml84_232 img:not(#\9),
238
+ .awsui_media_14iqq_1ml84_232 video:not(#\9),
239
+ .awsui_media_14iqq_1ml84_232 picture:not(#\9) {
240
240
  inline-size: 100%;
241
241
  block-size: 100%;
242
242
  object-fit: cover;
243
243
  object-position: center;
244
244
  }
245
- .awsui_media_14iqq_1o4mb_232 iframe:not(#\9) {
245
+ .awsui_media_14iqq_1ml84_232 iframe:not(#\9) {
246
246
  inline-size: 100%;
247
247
  block-size: 100%;
248
248
  border-block: 0;
249
249
  border-inline: 0;
250
250
  }
251
- .awsui_media-top_14iqq_1o4mb_250:not(#\9) {
251
+ .awsui_media-top_14iqq_1ml84_250:not(#\9) {
252
252
  max-block-size: 66%;
253
253
  border-start-start-radius: calc(var(--border-radius-container-wqv1zi, 16px) - 1px);
254
254
  border-start-end-radius: calc(var(--border-radius-container-wqv1zi, 16px) - 1px);
255
255
  }
256
- .awsui_media-side_14iqq_1o4mb_255:not(#\9) {
256
+ .awsui_media-side_14iqq_1ml84_255:not(#\9) {
257
257
  max-inline-size: 66%;
258
258
  border-start-start-radius: calc(var(--border-radius-container-wqv1zi, 16px) - 1px);
259
259
  border-end-start-radius: calc(var(--border-radius-container-wqv1zi, 16px) - 1px);
260
260
  }
261
261
 
262
- .awsui_header_14iqq_1o4mb_261:not(#\9) {
262
+ .awsui_header_14iqq_1ml84_261:not(#\9) {
263
263
  background-color: var(--color-background-container-header-8b9fgi, #ffffff);
264
264
  border-start-start-radius: var(--border-radius-container-wqv1zi, 16px);
265
265
  border-start-end-radius: var(--border-radius-container-wqv1zi, 16px);
266
266
  }
267
- .awsui_header_14iqq_1o4mb_261.awsui_header-with-media_14iqq_1o4mb_266:not(#\9) {
267
+ .awsui_header_14iqq_1ml84_261.awsui_header-full-page_14iqq_1ml84_266:not(#\9) {
268
+ background-color: var(--color-background-layout-main-nx09lr, #ffffff);
269
+ }
270
+ .awsui_header_14iqq_1ml84_261.awsui_header-with-media_14iqq_1ml84_269:not(#\9) {
268
271
  background: none;
269
272
  }
270
- .awsui_header_14iqq_1o4mb_261.awsui_header-with-media_14iqq_1o4mb_266:not(#\9):not(:empty) {
273
+ .awsui_header_14iqq_1ml84_261.awsui_header-with-media_14iqq_1ml84_269:not(#\9):not(:empty) {
271
274
  border-block-end: none;
272
275
  }
273
- .awsui_header-sticky-disabled_14iqq_1o4mb_272:not(#\9) {
276
+ .awsui_header-sticky-disabled_14iqq_1ml84_275:not(#\9) {
274
277
  position: relative;
275
278
  z-index: 1;
276
279
  }
277
- .awsui_header-sticky-enabled_14iqq_1o4mb_276:not(#\9) {
280
+ .awsui_header-sticky-enabled_14iqq_1ml84_279:not(#\9) {
278
281
  inset-block-start: 0;
279
282
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
280
283
  position: sticky;
281
284
  z-index: 800;
282
285
  }
283
- .awsui_header-stuck_14iqq_1o4mb_282:not(#\9) {
286
+ .awsui_header-stuck_14iqq_1ml84_285:not(#\9) {
284
287
  border-start-start-radius: 0;
285
288
  border-start-end-radius: 0;
286
289
  border-end-start-radius: 0;
287
290
  border-end-end-radius: 0;
288
291
  }
289
- .awsui_header-stuck_14iqq_1o4mb_282:not(#\9)::before {
292
+ .awsui_header-stuck_14iqq_1ml84_285:not(#\9)::before {
290
293
  border-block: 0;
291
294
  border-inline: 0;
292
295
  }
293
- .awsui_header-stuck_14iqq_1o4mb_282:not(#\9):not(.awsui_header-variant-cards_14iqq_1o4mb_292) {
296
+ .awsui_header-stuck_14iqq_1ml84_285:not(#\9):not(.awsui_header-variant-cards_14iqq_1ml84_295) {
294
297
  box-shadow: var(--shadow-sticky-embedded-uvh5ry, 0px 2px 0px 0px #e9ebed, 0px 16px 16px -12px rgba(0, 7, 22, 0.1));
295
298
  }
296
- .awsui_header-dynamic-height_14iqq_1o4mb_295.awsui_header-stuck_14iqq_1o4mb_282:not(#\9) {
299
+ .awsui_header-dynamic-height_14iqq_1ml84_298.awsui_header-stuck_14iqq_1ml84_285:not(#\9) {
297
300
  margin-block-end: calc(var(--line-height-heading-xl-avbttk, 30px) - var(--line-height-heading-l-mmm3my, 24px));
298
301
  }
299
- .awsui_header_14iqq_1o4mb_261:not(#\9):not(:empty) {
302
+ .awsui_header_14iqq_1ml84_261:not(#\9):not(:empty) {
300
303
  border-block-end: var(--border-container-sticky-width-6asz33, 0px) solid var(--color-border-container-divider-p2uygo, transparent);
301
304
  }
302
- .awsui_header_14iqq_1o4mb_261.awsui_with-paddings_14iqq_1o4mb_301:not(#\9) {
305
+ .awsui_header_14iqq_1ml84_261.awsui_with-paddings_14iqq_1ml84_304:not(#\9) {
303
306
  padding-block-start: var(--space-container-header-top-5qav00, 12px);
304
307
  padding-block-end: var(--space-container-header-bottom-vj01hn, 8px);
305
308
  padding-inline: var(--space-container-horizontal-wfukh3, 20px);
306
309
  }
307
- .awsui_header_14iqq_1o4mb_261.awsui_with-paddings_14iqq_1o4mb_301.awsui_header-variant-cards_14iqq_1o4mb_292:not(#\9) {
310
+ .awsui_header_14iqq_1ml84_261.awsui_with-paddings_14iqq_1ml84_304.awsui_header-variant-cards_14iqq_1ml84_295:not(#\9) {
308
311
  padding-block: var(--space-container-header-top-5qav00, 12px);
309
312
  padding-inline: var(--space-container-horizontal-wfukh3, 20px);
310
313
  }
311
- .awsui_header_14iqq_1o4mb_261.awsui_with-hidden-content_14iqq_1o4mb_310:not(#\9) {
314
+ .awsui_header_14iqq_1ml84_261.awsui_with-hidden-content_14iqq_1ml84_313:not(#\9) {
312
315
  border-end-start-radius: var(--border-radius-container-wqv1zi, 16px);
313
316
  border-end-end-radius: var(--border-radius-container-wqv1zi, 16px);
314
317
  }
315
- .awsui_header-variant-cards_14iqq_1o4mb_292:not(#\9) {
318
+ .awsui_header-variant-cards_14iqq_1ml84_295:not(#\9) {
316
319
  border-start-start-radius: var(--border-radius-container-wqv1zi, 16px);
317
320
  border-start-end-radius: var(--border-radius-container-wqv1zi, 16px);
318
321
  border-end-start-radius: var(--border-radius-container-wqv1zi, 16px);
319
322
  border-end-end-radius: var(--border-radius-container-wqv1zi, 16px);
320
323
  box-sizing: border-box;
321
324
  }
322
- .awsui_header-variant-cards_14iqq_1o4mb_292.awsui_refresh_14iqq_1o4mb_153:not(#\9) {
325
+ .awsui_header-variant-cards_14iqq_1ml84_295.awsui_refresh_14iqq_1ml84_153:not(#\9) {
323
326
  border-block: solid var(--border-divider-section-width-1061zr, 1px) var(--color-border-divider-default-j74lyz, #b6bec9);
324
327
  border-inline: solid var(--border-divider-section-width-1061zr, 1px) var(--color-border-divider-default-j74lyz, #b6bec9);
325
328
  }
326
- .awsui_header-variant-cards_14iqq_1o4mb_292:not(#\9):not(.awsui_refresh_14iqq_1o4mb_153)::before {
329
+ .awsui_header-variant-cards_14iqq_1ml84_295:not(#\9):not(.awsui_refresh_14iqq_1ml84_153)::before {
327
330
  content: "";
328
331
  position: absolute;
329
332
  inset-inline-start: 0px;
@@ -341,7 +344,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
341
344
  border-end-end-radius: var(--border-radius-container-wqv1zi, 16px);
342
345
  z-index: 1;
343
346
  }
344
- .awsui_header-variant-cards_14iqq_1o4mb_292:not(#\9):not(.awsui_refresh_14iqq_1o4mb_153)::after {
347
+ .awsui_header-variant-cards_14iqq_1ml84_295:not(#\9):not(.awsui_refresh_14iqq_1ml84_153)::after {
345
348
  content: "";
346
349
  position: absolute;
347
350
  inset-inline-start: 0px;
@@ -357,29 +360,29 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
357
360
  border-end-end-radius: var(--border-radius-container-wqv1zi, 16px);
358
361
  box-shadow: var(--shadow-container-fxmdn3, 0px 0px 1px 1px #e9ebed, 0px 1px 8px 2px rgba(0, 7, 22, 0.12));
359
362
  }
360
- .awsui_header-variant-cards_14iqq_1o4mb_292:not(#\9):not(.awsui_header-sticky-enabled_14iqq_1o4mb_276) {
363
+ .awsui_header-variant-cards_14iqq_1ml84_295:not(#\9):not(.awsui_header-sticky-enabled_14iqq_1ml84_279) {
361
364
  position: relative;
362
365
  }
363
- .awsui_header-variant-cards_14iqq_1o4mb_292.awsui_header-stuck_14iqq_1o4mb_282:not(#\9)::after, .awsui_header-variant-cards_14iqq_1o4mb_292.awsui_header-stuck_14iqq_1o4mb_282:not(#\9)::before {
366
+ .awsui_header-variant-cards_14iqq_1ml84_295.awsui_header-stuck_14iqq_1ml84_285:not(#\9)::after, .awsui_header-variant-cards_14iqq_1ml84_295.awsui_header-stuck_14iqq_1ml84_285:not(#\9)::before {
364
367
  border-block: 0;
365
368
  border-inline: 0;
366
369
  border-start-start-radius: 0;
367
370
  border-start-end-radius: 0;
368
371
  }
369
- .awsui_header-variant-full-page_14iqq_1o4mb_368.awsui_with-toolbar_14iqq_1o4mb_368:not(#\9) {
372
+ .awsui_header-variant-full-page_14iqq_1ml84_371.awsui_with-toolbar_14iqq_1ml84_371:not(#\9) {
370
373
  padding-block-start: var(--space-scaled-s-aqzyko, 12px);
371
374
  }
372
- .awsui_header-variant-full-page_14iqq_1o4mb_368.awsui_header-stuck_14iqq_1o4mb_282:not(#\9) {
375
+ .awsui_header-variant-full-page_14iqq_1ml84_371.awsui_header-stuck_14iqq_1ml84_285:not(#\9) {
373
376
  box-shadow: none;
374
377
  }
375
- .awsui_header-variant-full-page_14iqq_1o4mb_368.awsui_header-stuck_14iqq_1o4mb_282 > .awsui_header-cover_14iqq_1o4mb_374:not(#\9) {
378
+ .awsui_header-variant-full-page_14iqq_1ml84_371.awsui_header-stuck_14iqq_1ml84_285 > .awsui_header-cover_14iqq_1ml84_377:not(#\9) {
376
379
  background-color: var(--color-background-layout-main-nx09lr, #ffffff);
377
380
  inline-size: 100%;
378
381
  position: absolute;
379
382
  block-size: var(--space-scaled-s-aqzyko, 12px);
380
383
  inset-block-start: calc(-1 * var(--space-scaled-s-aqzyko, 12px));
381
384
  }
382
- .awsui_header-variant-full-page_14iqq_1o4mb_368.awsui_header-stuck_14iqq_1o4mb_282:not(#\9)::before {
385
+ .awsui_header-variant-full-page_14iqq_1ml84_371.awsui_header-stuck_14iqq_1ml84_285:not(#\9)::before {
383
386
  content: "";
384
387
  position: absolute;
385
388
  pointer-events: none;
@@ -389,7 +392,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
389
392
  inset-block-start: 0;
390
393
  border-block-end: solid var(--border-divider-section-width-1061zr, 1px) var(--color-border-divider-default-j74lyz, #b6bec9);
391
394
  }
392
- .awsui_header-variant-full-page_14iqq_1o4mb_368.awsui_header-stuck_14iqq_1o4mb_282:not(#\9)::after {
395
+ .awsui_header-variant-full-page_14iqq_1ml84_371.awsui_header-stuck_14iqq_1ml84_285:not(#\9)::after {
393
396
  content: "";
394
397
  position: absolute;
395
398
  inset: 0;
@@ -397,27 +400,27 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
397
400
  clip-path: polygon(-999% 100%, 999% 100%, 999% 999%, -999% 999%);
398
401
  }
399
402
 
400
- .awsui_content_14iqq_1o4mb_220:not(#\9) {
403
+ .awsui_content_14iqq_1ml84_220:not(#\9) {
401
404
  flex: 1;
402
405
  }
403
- .awsui_content-fit-height_14iqq_1o4mb_402:not(#\9) {
406
+ .awsui_content-fit-height_14iqq_1ml84_405:not(#\9) {
404
407
  overflow: auto;
405
408
  }
406
- .awsui_content_14iqq_1o4mb_220.awsui_with-paddings_14iqq_1o4mb_301:not(#\9) {
409
+ .awsui_content_14iqq_1ml84_220.awsui_with-paddings_14iqq_1ml84_304:not(#\9) {
407
410
  padding-block: var(--space-scaled-l-0hpmd7, 20px);
408
411
  padding-inline: var(--space-container-horizontal-wfukh3, 20px);
409
412
  }
410
- .awsui_header_14iqq_1o4mb_261 + .awsui_content_14iqq_1o4mb_220.awsui_with-paddings_14iqq_1o4mb_301:not(#\9) {
413
+ .awsui_header_14iqq_1ml84_261 + .awsui_content_14iqq_1ml84_220.awsui_with-paddings_14iqq_1ml84_304:not(#\9) {
411
414
  padding-block-start: var(--space-container-content-top-1ae0r3, 4px);
412
415
  }
413
- .awsui_header_14iqq_1o4mb_261 + .awsui_content_14iqq_1o4mb_220.awsui_with-paddings_14iqq_1o4mb_301.awsui_content-with-media_14iqq_1o4mb_412:not(#\9) {
416
+ .awsui_header_14iqq_1ml84_261 + .awsui_content_14iqq_1ml84_220.awsui_with-paddings_14iqq_1ml84_304.awsui_content-with-media_14iqq_1ml84_415:not(#\9) {
414
417
  padding-block-start: 0;
415
418
  }
416
419
 
417
- .awsui_footer_14iqq_1o4mb_416.awsui_with-paddings_14iqq_1o4mb_301:not(#\9) {
420
+ .awsui_footer_14iqq_1ml84_419.awsui_with-paddings_14iqq_1ml84_304:not(#\9) {
418
421
  padding-block: var(--space-scaled-s-aqzyko, 12px);
419
422
  padding-inline: var(--space-container-horizontal-wfukh3, 20px);
420
423
  }
421
- .awsui_footer_14iqq_1o4mb_416.awsui_with-divider_14iqq_1o4mb_420:not(#\9) {
424
+ .awsui_footer_14iqq_1ml84_419.awsui_with-divider_14iqq_1ml84_423:not(#\9) {
422
425
  border-block-start: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-divider-default-j74lyz, #b6bec9);
423
426
  }