@cloudscape-design/components 3.0.311 → 3.0.312

package/code-editor/styles.selectors.js

@@ -2,37 +2,37 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "code-editor": "awsui_code-editor_1gl9c_1pa9a_98",
-  "code-editor-refresh": "awsui_code-editor-refresh_1gl9c_1pa9a_342",
-  "pane": "awsui_pane_1gl9c_1pa9a_354",
-  "pane__close-container": "awsui_pane__close-container_1gl9c_1pa9a_365",
-  "pane__list": "awsui_pane__list_1gl9c_1pa9a_370",
-  "pane__table": "awsui_pane__table_1gl9c_1pa9a_377",
-  "pane__item": "awsui_pane__item_1gl9c_1pa9a_382",
-  "pane__cell": "awsui_pane__cell_1gl9c_1pa9a_382",
-  "pane__item--highlighted": "awsui_pane__item--highlighted_1gl9c_1pa9a_396",
-  "pane__location": "awsui_pane__location_1gl9c_1pa9a_417",
-  "pane__description": "awsui_pane__description_1gl9c_1pa9a_417",
-  "focus-lock": "awsui_focus-lock_1gl9c_1pa9a_432",
-  "editor": "awsui_editor_1gl9c_1pa9a_457",
-  "editor-refresh": "awsui_editor-refresh_1gl9c_1pa9a_485",
-  "status-bar": "awsui_status-bar_1gl9c_1pa9a_490",
-  "status-bar-with-hidden-pane": "awsui_status-bar-with-hidden-pane_1gl9c_1pa9a_499",
-  "status-bar__left": "awsui_status-bar__left_1gl9c_1pa9a_503",
-  "status-bar__left-virtual": "awsui_status-bar__left-virtual_1gl9c_1pa9a_510",
-  "status-bar__right": "awsui_status-bar__right_1gl9c_1pa9a_514",
-  "status-bar__language-mode": "awsui_status-bar__language-mode_1gl9c_1pa9a_518",
-  "status-bar__cursor-position": "awsui_status-bar__cursor-position_1gl9c_1pa9a_518",
-  "status-bar__cog-button": "awsui_status-bar__cog-button_1gl9c_1pa9a_523",
-  "status-bar-virtual": "awsui_status-bar-virtual_1gl9c_1pa9a_527",
-  "tab-button": "awsui_tab-button_1gl9c_1pa9a_533",
-  "tab-button--refresh": "awsui_tab-button--refresh_1gl9c_1pa9a_546",
-  "tab-button--active": "awsui_tab-button--active_1gl9c_1pa9a_560",
-  "tab-button--disabled": "awsui_tab-button--disabled_1gl9c_1pa9a_580",
-  "tab-button--divider": "awsui_tab-button--divider_1gl9c_1pa9a_610",
-  "tab-button--errors": "awsui_tab-button--errors_1gl9c_1pa9a_617",
-  "tab-button--warnings": "awsui_tab-button--warnings_1gl9c_1pa9a_617",
-  "loading-screen": "awsui_loading-screen_1gl9c_1pa9a_621",
-  "error-screen": "awsui_error-screen_1gl9c_1pa9a_622"
+  "code-editor": "awsui_code-editor_1gl9c_f74y9_98",
+  "code-editor-refresh": "awsui_code-editor-refresh_1gl9c_f74y9_374",
+  "pane": "awsui_pane_1gl9c_f74y9_386",
+  "pane__close-container": "awsui_pane__close-container_1gl9c_f74y9_397",
+  "pane__list": "awsui_pane__list_1gl9c_f74y9_402",
+  "pane__table": "awsui_pane__table_1gl9c_f74y9_409",
+  "pane__item": "awsui_pane__item_1gl9c_f74y9_414",
+  "pane__cell": "awsui_pane__cell_1gl9c_f74y9_414",
+  "pane__item--highlighted": "awsui_pane__item--highlighted_1gl9c_f74y9_428",
+  "pane__location": "awsui_pane__location_1gl9c_f74y9_449",
+  "pane__description": "awsui_pane__description_1gl9c_f74y9_449",
+  "focus-lock": "awsui_focus-lock_1gl9c_f74y9_464",
+  "editor": "awsui_editor_1gl9c_f74y9_489",
+  "editor-refresh": "awsui_editor-refresh_1gl9c_f74y9_517",
+  "status-bar": "awsui_status-bar_1gl9c_f74y9_522",
+  "status-bar-with-hidden-pane": "awsui_status-bar-with-hidden-pane_1gl9c_f74y9_531",
+  "status-bar__left": "awsui_status-bar__left_1gl9c_f74y9_535",
+  "status-bar__left-virtual": "awsui_status-bar__left-virtual_1gl9c_f74y9_542",
+  "status-bar__right": "awsui_status-bar__right_1gl9c_f74y9_546",
+  "status-bar__language-mode": "awsui_status-bar__language-mode_1gl9c_f74y9_550",
+  "status-bar__cursor-position": "awsui_status-bar__cursor-position_1gl9c_f74y9_550",
+  "status-bar__cog-button": "awsui_status-bar__cog-button_1gl9c_f74y9_555",
+  "status-bar-virtual": "awsui_status-bar-virtual_1gl9c_f74y9_559",
+  "tab-button": "awsui_tab-button_1gl9c_f74y9_565",
+  "tab-button--refresh": "awsui_tab-button--refresh_1gl9c_f74y9_578",
+  "tab-button--active": "awsui_tab-button--active_1gl9c_f74y9_592",
+  "tab-button--disabled": "awsui_tab-button--disabled_1gl9c_f74y9_612",
+  "tab-button--divider": "awsui_tab-button--divider_1gl9c_f74y9_642",
+  "tab-button--errors": "awsui_tab-button--errors_1gl9c_f74y9_649",
+  "tab-button--warnings": "awsui_tab-button--warnings_1gl9c_f74y9_649",
+  "loading-screen": "awsui_loading-screen_1gl9c_f74y9_653",
+  "error-screen": "awsui_error-screen_1gl9c_f74y9_654"
 };
   

package/container/interfaces.d.ts

@@ -9,6 +9,26 @@ export interface ContainerProps extends BaseComponentProps {
      * Determines whether the container header has padding. If `true`, removes the default padding from the header.
      */
     disableHeaderPaddings?: boolean;
+    /**
+     *
+     * Use this slot to render a media element. Supported element types are 'img', 'video', and 'picture'.
+     * You can define different positions and sizes for the media element within the container.
+     *
+     * * `content` - Use this slot to render your media element. We support `img`, `video` and `picture` elements.
+     *
+     * * `position` - Defines the media slot's position within the container. Defaults to `top`.
+     *
+     * * `width` - Defines the width of the media slot when positioned on the side. Corresponds to the `width` CSS-property.
+     * When this value is set, media elements larger than the defined width may be cropped, with 'object-fit: cover' centering it.
+     * Note: This value is considered only when `position` is set to `side`.
+     * If no width is provided, the media slot will take a maximum of 66% of the container's width.
+     *
+     * * `height` - Defines the height of the media slot when position on the top. Corresponds to the `height` CSS-property.
+     * When this value is set, media elements larger than the defined width may be cropped, with 'object-fit: cover' centering it.   * Note: This value is only considered if `position` is set to `top`.
+     * If no height is provided, the media slot will be displayed at its full height.
+     *
+     */
+    media?: ContainerProps.Media;
     /**
      * Main content of the container.
      */
@@ -38,4 +58,34 @@ export interface ContainerProps extends BaseComponentProps {
      */
     variant?: 'default' | 'stacked';
 }
+export declare namespace ContainerProps {
+    interface Media {
+        /**
+         *
+         * Use this slot to render your media element. We support `img`, `video` and `picture` elements.
+         *
+         */
+        content: React.ReactNode;
+        /**
+         * Defines the media slot's position within the container. Defaults to `top`.
+         */
+        position?: 'top' | 'side';
+        /**
+         * Defines the width of the media slot when positioned on the side. Corresponds to the `width` CSS-property.
+         * When this value is set, the media element may be cropped, with `object-fit: cover` centering it.
+         *
+         * Note: This value is considered only when `position` is set to `side`.
+         * If no width is provided, the media slot will take a maximum of 66% of the container's width.
+         */
+        width?: string | number;
+        /**
+         * Defines the height of the media slot when position on the top. Corresponds to the `height` CSS-property.
+         * When this value is set, the media element may be cropped, with `object-fit: cover` centering it.
+         *
+         * Note: This value is only considered if `position` is set to `top`.
+         * If no height is provided, the media slot will be displayed at its full height.
+         */
+        height?: string | number;
+    }
+}
 //# sourceMappingURL=interfaces.d.ts.map

package/container/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["container/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,cAAe,SAAQ,kBAAkB;IACxD;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAEjC;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["container/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,cAAe,SAAQ,kBAAkB;IACxD;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC;;;;;;;;;;;;;;;;;;OAkBG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC;IAE7B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAEjC;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAED,yBAAiB,cAAc,CAAC;IAC9B,UAAiB,KAAK;QACpB;;;;WAIG;QACH,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;QAEzB;;WAEG;QACH,QAAQ,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;QAE1B;;;;;;WAMG;QACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QAExB;;;;;;WAMG;QACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;KAC1B;CACF"}

package/container/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["container/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport React from 'react';\n\nexport interface ContainerProps extends BaseComponentProps {\n  /**\n   * Heading element of the container. Use the [header component](/components/header/).\n   */\n  header?: React.ReactNode;\n\n  /**\n   * Determines whether the container header has padding. If `true`, removes the default padding from the header.\n   */\n  disableHeaderPaddings?: boolean;\n\n  /**\n   * Main content of the container.\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Determines whether the container content has padding. If `true`, removes the default padding from the content area.\n   */\n  disableContentPaddings?: boolean;\n\n  /**\n   * Enabling this property will make the container to fit into available height. If content is too short, the container\n   * will stretch, if too long, the container will shrink and show vertical scrollbar.\n   *\n   * Use this property to align heights of multiple containers displayed in a single row. It is recommended to stretch\n   * all containers to the height of the longest one, to avoid extra vertical scroll areas.\n   */\n  fitHeight?: boolean;\n\n  /**\n   * Footer of the container.\n   */\n  footer?: React.ReactNode;\n\n  /**\n   * Specify a container variant with one of the following:\n   * * `default` - Use this variant in standalone context.\n   * * `stacked` - Use this variant adjacent to other stacked containers (such as a container,\n   *               table).\n   * @visualrefresh `stacked` variant\n   */\n  variant?: 'default' | 'stacked';\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["container/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport React from 'react';\n\nexport interface ContainerProps extends BaseComponentProps {\n  /**\n   * Heading element of the container. Use the [header component](/components/header/).\n   */\n  header?: React.ReactNode;\n\n  /**\n   * Determines whether the container header has padding. If `true`, removes the default padding from the header.\n   */\n  disableHeaderPaddings?: boolean;\n\n  /**\n   *\n   * Use this slot to render a media element. Supported element types are 'img', 'video', and 'picture'.\n   * You can define different positions and sizes for the media element within the container.\n   *\n   * * `content` - Use this slot to render your media element. We support `img`, `video` and `picture` elements.\n   *\n   * * `position` - Defines the media slot's position within the container. Defaults to `top`.\n   *\n   * * `width` - Defines the width of the media slot when positioned on the side. Corresponds to the `width` CSS-property.\n   * When this value is set, media elements larger than the defined width may be cropped, with 'object-fit: cover' centering it.\n   * Note: This value is considered only when `position` is set to `side`.\n   * If no width is provided, the media slot will take a maximum of 66% of the container's width.\n   *\n   * * `height` - Defines the height of the media slot when position on the top. Corresponds to the `height` CSS-property.\n   * When this value is set, media elements larger than the defined width may be cropped, with 'object-fit: cover' centering it.   * Note: This value is only considered if `position` is set to `top`.\n   * If no height is provided, the media slot will be displayed at its full height.\n   *\n   */\n  media?: ContainerProps.Media;\n\n  /**\n   * Main content of the container.\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Determines whether the container content has padding. If `true`, removes the default padding from the content area.\n   */\n  disableContentPaddings?: boolean;\n\n  /**\n   * Enabling this property will make the container to fit into available height. If content is too short, the container\n   * will stretch, if too long, the container will shrink and show vertical scrollbar.\n   *\n   * Use this property to align heights of multiple containers displayed in a single row. It is recommended to stretch\n   * all containers to the height of the longest one, to avoid extra vertical scroll areas.\n   */\n  fitHeight?: boolean;\n\n  /**\n   * Footer of the container.\n   */\n  footer?: React.ReactNode;\n\n  /**\n   * Specify a container variant with one of the following:\n   * * `default` - Use this variant in standalone context.\n   * * `stacked` - Use this variant adjacent to other stacked containers (such as a container,\n   *               table).\n   * @visualrefresh `stacked` variant\n   */\n  variant?: 'default' | 'stacked';\n}\n\nexport namespace ContainerProps {\n  export interface Media {\n    /**\n     *\n     * Use this slot to render your media element. We support `img`, `video` and `picture` elements.\n     *\n     */\n    content: React.ReactNode;\n\n    /**\n     * Defines the media slot's position within the container. Defaults to `top`.\n     */\n    position?: 'top' | 'side';\n\n    /**\n     * Defines the width of the media slot when positioned on the side. Corresponds to the `width` CSS-property.\n     * When this value is set, the media element may be cropped, with `object-fit: cover` centering it.\n     *\n     * Note: This value is considered only when `position` is set to `side`.\n     * If no width is provided, the media slot will take a maximum of 66% of the container's width.\n     */\n    width?: string | number;\n\n    /**\n     * Defines the height of the media slot when position on the top. Corresponds to the `height` CSS-property.\n     * When this value is set, the media element may be cropped, with `object-fit: cover` centering it.\n     *\n     * Note: This value is only considered if `position` is set to `top`.\n     * If no height is provided, the media slot will be displayed at its full height.\n     */\n    height?: string | number;\n  }\n}\n"]}

package/container/internal.d.ts

@@ -20,5 +20,5 @@ export interface InternalContainerProps extends Omit<ContainerProps, 'variant'>,
      */
     variant?: ContainerProps['variant'] | 'embedded' | 'full-page' | 'cards';
 }
-export default function InternalContainer({ header, footer, children, variant, disableHeaderPaddings, disableContentPaddings, fitHeight, __stickyOffset, __mobileStickyOffset, __stickyHeader, __internalRootRef, __disableFooterDivider, __disableFooterPaddings, __hiddenContent, __headerRef, __headerId, __darkHeader, __disableStickyMobile, ...restProps }: InternalContainerProps): JSX.Element;
+export default function InternalContainer({ header, footer, children, variant, disableHeaderPaddings, disableContentPaddings, fitHeight, media, __stickyOffset, __mobileStickyOffset, __stickyHeader, __internalRootRef, __disableFooterDivider, __disableFooterPaddings, __hiddenContent, __headerRef, __headerId, __darkHeader, __disableStickyMobile, ...restProps }: InternalContainerProps): JSX.Element;
 //# sourceMappingURL=internal.d.ts.map

package/container/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["container/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAG9C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AASlF,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,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,GAAG,UAAU,GAAG,WAAW,GAAG,OAAO,CAAC;CAC1E;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,MAAM,EACN,MAAM,EACN,QAAQ,EACR,OAAmB,EACnB,qBAA6B,EAC7B,sBAA8B,EAC9B,SAAS,EACT,cAAc,EACd,oBAAoB,EACpB,cAAsB,EACtB,iBAAwB,EACxB,sBAA8B,EAC9B,uBAA+B,EAC/B,eAAuB,EACvB,WAAW,EACX,UAAU,EACV,YAAoB,EACpB,qBAA4B,EAC5B,GAAG,SAAS,EACb,EAAE,sBAAsB,eAqGxB"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["container/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAG9C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AASlF,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,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,GAAG,UAAU,GAAG,WAAW,GAAG,OAAO,CAAC;CAC1E;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,UAAU,EACV,YAAoB,EACpB,qBAA4B,EAC5B,GAAG,SAAS,EACb,EAAE,sBAAsB,eAoHxB"}

package/container/internal.js

@@ -13,7 +13,8 @@ import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
 import styles from './styles.css.js';
 import { useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';
 export default function InternalContainer(_a) {
-    var { header, footer, children, variant = 'default', disableHeaderPaddings = false, disableContentPaddings = false, fitHeight, __stickyOffset, __mobileStickyOffset, __stickyHeader = false, __internalRootRef = null, __disableFooterDivider = false, __disableFooterPaddings = false, __hiddenContent = false, __headerRef, __headerId, __darkHeader = false, __disableStickyMobile = true } = _a, restProps = __rest(_a, ["header", "footer", "children", "variant", "disableHeaderPaddings", "disableContentPaddings", "fitHeight", "__stickyOffset", "__mobileStickyOffset", "__stickyHeader", "__internalRootRef", "__disableFooterDivider", "__disableFooterPaddings", "__hiddenContent", "__headerRef", "__headerId", "__darkHeader", "__disableStickyMobile"]);
+    var _b;
+    var { header, footer, children, variant = 'default', disableHeaderPaddings = false, disableContentPaddings = false, fitHeight, media, __stickyOffset, __mobileStickyOffset, __stickyHeader = false, __internalRootRef = null, __disableFooterDivider = false, __disableFooterPaddings = false, __hiddenContent = false, __headerRef, __headerId, __darkHeader = false, __disableStickyMobile = true } = _a, restProps = __rest(_a, ["header", "footer", "children", "variant", "disableHeaderPaddings", "disableContentPaddings", "fitHeight", "media", "__stickyOffset", "__mobileStickyOffset", "__stickyHeader", "__internalRootRef", "__disableFooterDivider", "__disableFooterPaddings", "__hiddenContent", "__headerRef", "__headerId", "__darkHeader", "__disableStickyMobile"]);
     const isMobile = useMobile();
     const baseProps = getBaseProps(restProps);
     const rootRef = useRef(null);
@@ -46,22 +47,27 @@ export default function InternalContainer(_a) {
     // The container is only sticky on mobile if it is the header for the table.
     // 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.
     const shouldHaveStickyStyles = isSticky && !isMobile;
-    return (React.createElement("div", Object.assign({}, baseProps, funnelSubStepProps, { className: clsx(baseProps.className, styles.root, styles[`variant-${variant}`], fitHeight && styles['fit-height'], shouldHaveStickyStyles && [styles['sticky-enabled']]), ref: mergedRef }),
-        header && (React.createElement(StickyHeaderContext.Provider, { value: { isStuck } },
-            React.createElement("div", Object.assign({ className: clsx(styles.header, styles[`header-variant-${variant}`], {
-                    [styles['header-sticky-disabled']]: __stickyHeader && !isSticky,
-                    [styles['header-sticky-enabled']]: isSticky,
-                    [styles['header-dynamic-height']]: hasDynamicHeight,
-                    [styles['header-stuck']]: isStuck,
-                    [styles['with-paddings']]: !disableHeaderPaddings,
-                    [styles['with-hidden-content']]: !children || __hiddenContent,
-                }) }, headerIdProp, stickyStyles, { ref: headerMergedRef }), __darkHeader ? (React.createElement("div", { className: clsx(styles['dark-header'], 'awsui-context-content-header') }, header)) : (header)))),
-        React.createElement("div", { className: clsx(styles.content, {
-                [styles['with-paddings']]: !disableContentPaddings,
-            }) }, children),
-        footer && (React.createElement("div", { className: clsx(styles.footer, {
-                [styles['with-divider']]: !__disableFooterDivider,
-                [styles['with-paddings']]: !__disableFooterPaddings,
-            }) }, footer))));
+    const hasMedia = !!(media === null || media === void 0 ? void 0 : media.content);
+    const mediaPosition = (_b = media === null || media === void 0 ? void 0 : media.position) !== null && _b !== void 0 ? _b : 'top';
+    return (React.createElement("div", Object.assign({}, baseProps, funnelSubStepProps, { className: clsx(baseProps.className, styles.root, styles[`variant-${variant}`], fitHeight && styles['fit-height'], hasMedia && (mediaPosition === 'side' ? styles['with-side-media'] : styles['with-top-media']), shouldHaveStickyStyles && [styles['sticky-enabled']]), ref: mergedRef }),
+        hasMedia && (React.createElement("div", { className: clsx(styles[`media-${mediaPosition === 'side' ? 'side' : 'top'}`], styles.media), style: mediaPosition === 'top' ? { height: (media === null || media === void 0 ? void 0 : media.height) || '' } : { width: (media === null || media === void 0 ? void 0 : media.width) || '' } }, media.content)),
+        React.createElement("div", { className: clsx(styles['content-wrapper'], fitHeight && styles['content-wrapper-fit-height']) },
+            header && (React.createElement(StickyHeaderContext.Provider, { value: { isStuck } },
+                React.createElement("div", Object.assign({ className: clsx(styles.header, styles[`header-variant-${variant}`], {
+                        [styles['header-sticky-disabled']]: __stickyHeader && !isSticky,
+                        [styles['header-sticky-enabled']]: isSticky,
+                        [styles['header-dynamic-height']]: hasDynamicHeight,
+                        [styles['header-stuck']]: isStuck,
+                        [styles['with-paddings']]: !disableHeaderPaddings,
+                        [styles['with-hidden-content']]: !children || __hiddenContent,
+                        [styles['header-with-media']]: hasMedia,
+                    }) }, headerIdProp, stickyStyles, { ref: headerMergedRef }), __darkHeader ? (React.createElement("div", { className: clsx(styles['dark-header'], 'awsui-context-content-header') }, header)) : (header)))),
+            React.createElement("div", { className: clsx(styles.content, fitHeight && styles['content-fit-height'], {
+                    [styles['with-paddings']]: !disableContentPaddings,
+                }) }, children),
+            footer && (React.createElement("div", { className: clsx(styles.footer, {
+                    [styles['with-divider']]: !__disableFooterDivider,
+                    [styles['with-paddings']]: !__disableFooterPaddings,
+                }) }, footer)))));
 }
 //# sourceMappingURL=internal.js.map

package/container/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["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, { useEffect, useRef } from 'react';\nimport { ContainerProps } from './interfaces';\nimport { getBaseProps } from '../internal/base-component';\nimport { useAppLayoutContext } from '../internal/context/app-layout-context';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { StickyHeaderContext, useStickyHeader } from './use-sticky-header';\nimport { useDynamicOverlap } from '../internal/hooks/use-dynamic-overlap';\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';\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  __headerId?: string;\n  __darkHeader?: 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\nexport default function InternalContainer({\n  header,\n  footer,\n  children,\n  variant = 'default',\n  disableHeaderPaddings = false,\n  disableContentPaddings = false,\n  fitHeight,\n  __stickyOffset,\n  __mobileStickyOffset,\n  __stickyHeader = false,\n  __internalRootRef = null,\n  __disableFooterDivider = false,\n  __disableFooterPaddings = false,\n  __hiddenContent = false,\n  __headerRef,\n  __headerId,\n  __darkHeader = false,\n  __disableStickyMobile = true,\n  ...restProps\n}: InternalContainerProps) {\n  const isMobile = useMobile();\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  );\n  const { setHasStickyBackground } = useAppLayoutContext();\n  const isRefresh = useVisualRefresh();\n  const { subStepRef, funnelSubStepProps } = useFunnelSubStep();\n\n  const hasDynamicHeight = isRefresh && variant === 'full-page';\n  const overlapElement = useDynamicOverlap({ disabled: !hasDynamicHeight || !__darkHeader });\n\n  const mergedRef = useMergeRefs(rootRef, subStepRef, __internalRootRef);\n  const headerMergedRef = useMergeRefs(headerRef, overlapElement, __headerRef);\n  const headerIdProp = __headerId ? { id: __headerId } : {};\n\n  /**\n   * The visual refresh AppLayout component needs to know if a child component\n   * has a high contrast sticky header. This is to make sure the background element\n   * stays in the same vertical position as the header content.\n   */\n  useEffect(() => {\n    const shouldUpdateStickyBackground = isSticky && variant === 'full-page' && setHasStickyBackground;\n    if (shouldUpdateStickyBackground) {\n      setHasStickyBackground(true);\n    }\n\n    return () => {\n      if (shouldUpdateStickyBackground) {\n        setHasStickyBackground(false);\n      }\n    };\n  }, [isSticky, setHasStickyBackground, variant]);\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  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        shouldHaveStickyStyles && [styles['sticky-enabled']]\n      )}\n      ref={mergedRef}\n    >\n      {header && (\n        <StickyHeaderContext.Provider value={{ isStuck }}>\n          <div\n            className={clsx(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-hidden-content']]: !children || __hiddenContent,\n            })}\n            {...headerIdProp}\n            {...stickyStyles}\n            ref={headerMergedRef}\n          >\n            {__darkHeader ? (\n              <div className={clsx(styles['dark-header'], 'awsui-context-content-header')}>{header}</div>\n            ) : (\n              header\n            )}\n          </div>\n        </StickyHeaderContext.Provider>\n      )}\n      <div\n        className={clsx(styles.content, {\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  );\n}\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["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, { useEffect, useRef } from 'react';\nimport { ContainerProps } from './interfaces';\nimport { getBaseProps } from '../internal/base-component';\nimport { useAppLayoutContext } from '../internal/context/app-layout-context';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { StickyHeaderContext, useStickyHeader } from './use-sticky-header';\nimport { useDynamicOverlap } from '../internal/hooks/use-dynamic-overlap';\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';\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  __headerId?: string;\n  __darkHeader?: 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\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  __headerId,\n  __darkHeader = false,\n  __disableStickyMobile = true,\n  ...restProps\n}: InternalContainerProps) {\n  const isMobile = useMobile();\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  );\n  const { setHasStickyBackground } = useAppLayoutContext();\n  const isRefresh = useVisualRefresh();\n  const { subStepRef, funnelSubStepProps } = useFunnelSubStep();\n\n  const hasDynamicHeight = isRefresh && variant === 'full-page';\n  const overlapElement = useDynamicOverlap({ disabled: !hasDynamicHeight || !__darkHeader });\n\n  const mergedRef = useMergeRefs(rootRef, subStepRef, __internalRootRef);\n  const headerMergedRef = useMergeRefs(headerRef, overlapElement, __headerRef);\n  const headerIdProp = __headerId ? { id: __headerId } : {};\n\n  /**\n   * The visual refresh AppLayout component needs to know if a child component\n   * has a high contrast sticky header. This is to make sure the background element\n   * stays in the same vertical position as the header content.\n   */\n  useEffect(() => {\n    const shouldUpdateStickyBackground = isSticky && variant === 'full-page' && setHasStickyBackground;\n    if (shouldUpdateStickyBackground) {\n      setHasStickyBackground(true);\n    }\n\n    return () => {\n      if (shouldUpdateStickyBackground) {\n        setHasStickyBackground(false);\n      }\n    };\n  }, [isSticky, setHasStickyBackground, variant]);\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 mediaPosition = media?.position ?? 'top';\n\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      )}\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 className={clsx(styles['content-wrapper'], fitHeight && styles['content-wrapper-fit-height'])}>\n        {header && (\n          <StickyHeaderContext.Provider value={{ isStuck }}>\n            <div\n              className={clsx(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-hidden-content']]: !children || __hiddenContent,\n                [styles['header-with-media']]: hasMedia,\n              })}\n              {...headerIdProp}\n              {...stickyStyles}\n              ref={headerMergedRef}\n            >\n              {__darkHeader ? (\n                <div className={clsx(styles['dark-header'], 'awsui-context-content-header')}>{header}</div>\n              ) : (\n                header\n              )}\n            </div>\n          </StickyHeaderContext.Provider>\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

@@ -1,23 +1,33 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_14iqq_1rij9_97",
-  "fit-height": "awsui_fit-height_14iqq_1rij9_111",
-  "variant-default": "awsui_variant-default_14iqq_1rij9_116",
-  "variant-stacked": "awsui_variant-stacked_14iqq_1rij9_116",
-  "sticky-enabled": "awsui_sticky-enabled_14iqq_1rij9_169",
-  "header": "awsui_header_14iqq_1rij9_176",
-  "header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_1rij9_181",
-  "header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_1rij9_185",
-  "header-stuck": "awsui_header-stuck_14iqq_1rij9_191",
-  "header-variant-cards": "awsui_header-variant-cards_14iqq_1rij9_197",
-  "header-dynamic-height": "awsui_header-dynamic-height_14iqq_1rij9_200",
-  "with-paddings": "awsui_with-paddings_14iqq_1rij9_206",
-  "with-hidden-content": "awsui_with-hidden-content_14iqq_1rij9_209",
-  "header-variant-full-page": "awsui_header-variant-full-page_14iqq_1rij9_259",
-  "dark-header": "awsui_dark-header_14iqq_1rij9_277",
-  "content": "awsui_content_14iqq_1rij9_282",
-  "footer": "awsui_footer_14iqq_1rij9_293",
-  "with-divider": "awsui_with-divider_14iqq_1rij9_296"
+  "root": "awsui_root_14iqq_y5ati_97",
+  "fit-height": "awsui_fit-height_14iqq_y5ati_111",
+  "with-side-media": "awsui_with-side-media_14iqq_y5ati_116",
+  "variant-default": "awsui_variant-default_14iqq_y5ati_119",
+  "variant-stacked": "awsui_variant-stacked_14iqq_y5ati_119",
+  "sticky-enabled": "awsui_sticky-enabled_14iqq_y5ati_172",
+  "with-top-media": "awsui_with-top-media_14iqq_y5ati_184",
+  "content-wrapper": "awsui_content-wrapper_14iqq_y5ati_189",
+  "content-wrapper-fit-height": "awsui_content-wrapper-fit-height_14iqq_y5ati_194",
+  "media": "awsui_media_14iqq_y5ati_199",
+  "media-top": "awsui_media-top_14iqq_y5ati_211",
+  "media-side": "awsui_media-side_14iqq_y5ati_216",
+  "header": "awsui_header_14iqq_y5ati_222",
+  "header-with-media": "awsui_header-with-media_14iqq_y5ati_227",
+  "header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_y5ati_233",
+  "header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_y5ati_237",
+  "header-stuck": "awsui_header-stuck_14iqq_y5ati_243",
+  "header-variant-cards": "awsui_header-variant-cards_14iqq_y5ati_249",
+  "header-dynamic-height": "awsui_header-dynamic-height_14iqq_y5ati_252",
+  "with-paddings": "awsui_with-paddings_14iqq_y5ati_258",
+  "with-hidden-content": "awsui_with-hidden-content_14iqq_y5ati_261",
+  "header-variant-full-page": "awsui_header-variant-full-page_14iqq_y5ati_311",
+  "dark-header": "awsui_dark-header_14iqq_y5ati_329",
+  "content": "awsui_content_14iqq_y5ati_189",
+  "content-fit-height": "awsui_content-fit-height_14iqq_y5ati_337",
+  "content-with-media": "awsui_content-with-media_14iqq_y5ati_346",
+  "footer": "awsui_footer_14iqq_y5ati_350",
+  "with-divider": "awsui_with-divider_14iqq_y5ati_353"
 };
   

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_1rij9_97:not(#\9) {
+.awsui_root_14iqq_y5ati_97:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   border-collapse: separate;
   border-spacing: 0;
@@ -134,17 +134,20 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   word-wrap: break-word;
   position: relative;
 }
-.awsui_root_14iqq_1rij9_97.awsui_fit-height_14iqq_1rij9_111:not(#\9) {
+.awsui_root_14iqq_y5ati_97.awsui_fit-height_14iqq_y5ati_111:not(#\9) {
   display: flex;
   flex-direction: column;
   height: 100%;
 }
-.awsui_root_14iqq_1rij9_97.awsui_variant-default_14iqq_1rij9_116:not(#\9), .awsui_root_14iqq_1rij9_97.awsui_variant-stacked_14iqq_1rij9_116:not(#\9) {
+.awsui_root_14iqq_y5ati_97.awsui_fit-height_14iqq_y5ati_111.awsui_with-side-media_14iqq_y5ati_116:not(#\9) {
+  flex-direction: row;
+}
+.awsui_root_14iqq_y5ati_97.awsui_variant-default_14iqq_y5ati_119:not(#\9), .awsui_root_14iqq_y5ati_97.awsui_variant-stacked_14iqq_y5ati_119:not(#\9) {
   border-radius: var(--border-radius-container-pmtq2d, 16px);
   box-sizing: border-box;
   background-color: var(--color-background-container-content-og3y0v, #ffffff);
 }
-.awsui_root_14iqq_1rij9_97.awsui_variant-default_14iqq_1rij9_116:not(#\9)::before, .awsui_root_14iqq_1rij9_97.awsui_variant-stacked_14iqq_1rij9_116:not(#\9)::before {
+.awsui_root_14iqq_y5ati_97.awsui_variant-default_14iqq_y5ati_119:not(#\9)::before, .awsui_root_14iqq_y5ati_97.awsui_variant-stacked_14iqq_y5ati_119:not(#\9)::before {
   content: "";
   position: absolute;
   left: 0px;
@@ -159,7 +162,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-radius: var(--border-radius-container-pmtq2d, 16px);
   z-index: 1;
 }
-.awsui_root_14iqq_1rij9_97.awsui_variant-default_14iqq_1rij9_116:not(#\9)::after, .awsui_root_14iqq_1rij9_97.awsui_variant-stacked_14iqq_1rij9_116:not(#\9)::after {
+.awsui_root_14iqq_y5ati_97.awsui_variant-default_14iqq_y5ati_119:not(#\9)::after, .awsui_root_14iqq_y5ati_97.awsui_variant-stacked_14iqq_y5ati_119:not(#\9)::after {
   content: "";
   position: absolute;
   left: 0px;
@@ -174,76 +177,125 @@ 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_1rij9_97.awsui_variant-default_14iqq_1rij9_116:not(#\9), .awsui_root_14iqq_1rij9_97.awsui_variant-stacked_14iqq_1rij9_116:not(#\9) {
+  .awsui_root_14iqq_y5ati_97.awsui_variant-default_14iqq_y5ati_119:not(#\9), .awsui_root_14iqq_y5ati_97.awsui_variant-stacked_14iqq_y5ati_119:not(#\9) {
     border: var(--border-field-width-riro62, 2px) solid var(--color-border-container-top-camjrq, transparent);
   }
 }
-.awsui_root_14iqq_1rij9_97.awsui_variant-stacked_14iqq_1rij9_116:not(#\9):not(:last-child), .awsui_root_14iqq_1rij9_97.awsui_variant-stacked_14iqq_1rij9_116:not(#\9):not(:last-child)::before, .awsui_root_14iqq_1rij9_97.awsui_variant-stacked_14iqq_1rij9_116:not(#\9):not(:last-child)::after {
+.awsui_root_14iqq_y5ati_97.awsui_variant-stacked_14iqq_y5ati_119:not(#\9):not(:last-child), .awsui_root_14iqq_y5ati_97.awsui_variant-stacked_14iqq_y5ati_119:not(#\9):not(:last-child)::before, .awsui_root_14iqq_y5ati_97.awsui_variant-stacked_14iqq_y5ati_119:not(#\9):not(:last-child)::after {
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
-.awsui_root_14iqq_1rij9_97.awsui_variant-stacked_14iqq_1rij9_116 + .awsui_root_14iqq_1rij9_97.awsui_variant-stacked_14iqq_1rij9_116:not(#\9), .awsui_root_14iqq_1rij9_97.awsui_variant-stacked_14iqq_1rij9_116 + .awsui_root_14iqq_1rij9_97.awsui_variant-stacked_14iqq_1rij9_116:not(#\9)::before, .awsui_root_14iqq_1rij9_97.awsui_variant-stacked_14iqq_1rij9_116 + .awsui_root_14iqq_1rij9_97.awsui_variant-stacked_14iqq_1rij9_116:not(#\9)::after {
+.awsui_root_14iqq_y5ati_97.awsui_variant-stacked_14iqq_y5ati_119 + .awsui_root_14iqq_y5ati_97.awsui_variant-stacked_14iqq_y5ati_119:not(#\9), .awsui_root_14iqq_y5ati_97.awsui_variant-stacked_14iqq_y5ati_119 + .awsui_root_14iqq_y5ati_97.awsui_variant-stacked_14iqq_y5ati_119:not(#\9)::before, .awsui_root_14iqq_y5ati_97.awsui_variant-stacked_14iqq_y5ati_119 + .awsui_root_14iqq_y5ati_97.awsui_variant-stacked_14iqq_y5ati_119:not(#\9)::after {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
-.awsui_root_14iqq_1rij9_97.awsui_variant-stacked_14iqq_1rij9_116 + .awsui_root_14iqq_1rij9_97.awsui_variant-stacked_14iqq_1rij9_116:not(#\9)::before {
+.awsui_root_14iqq_y5ati_97.awsui_variant-stacked_14iqq_y5ati_119 + .awsui_root_14iqq_y5ati_97.awsui_variant-stacked_14iqq_y5ati_119:not(#\9)::before {
   border-top: var(--border-divider-section-width-orq175, 2px) solid var(--color-border-divider-default-9o8zql, #e9ebed);
 }
-.awsui_root_14iqq_1rij9_97.awsui_variant-stacked_14iqq_1rij9_116 + .awsui_root_14iqq_1rij9_97.awsui_variant-stacked_14iqq_1rij9_116:not(#\9)::after {
+.awsui_root_14iqq_y5ati_97.awsui_variant-stacked_14iqq_y5ati_119 + .awsui_root_14iqq_y5ati_97.awsui_variant-stacked_14iqq_y5ati_119:not(#\9)::after {
   box-shadow: var(--shadow-container-stacked-nlxqjb, -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_1rij9_97.awsui_sticky-enabled_14iqq_1rij9_169:not(#\9)::before {
+.awsui_root_14iqq_y5ati_97.awsui_sticky-enabled_14iqq_y5ati_172:not(#\9)::before {
   top: calc(-1 * var(--border-container-top-width-5cncr0, 0px));
 }
-.awsui_root_14iqq_1rij9_97.awsui_sticky-enabled_14iqq_1rij9_169.awsui_variant-stacked_14iqq_1rij9_116:not(#\9)::before {
+.awsui_root_14iqq_y5ati_97.awsui_sticky-enabled_14iqq_y5ati_172.awsui_variant-stacked_14iqq_y5ati_119:not(#\9)::before {
   top: calc(-1 * var(--border-divider-section-width-orq175, 2px));
 }
 
-.awsui_header_14iqq_1rij9_176:not(#\9) {
+.awsui_with-side-media_14iqq_y5ati_116:not(#\9) {
+  display: flex;
+  flex-direction: row;
+}
+
+.awsui_with-top-media_14iqq_y5ati_184:not(#\9) {
+  display: flex;
+  flex-direction: column;
+}
+
+.awsui_content-wrapper_14iqq_y5ati_189:not(#\9) {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.awsui_content-wrapper-fit-height_14iqq_y5ati_194:not(#\9) {
+  height: 100%;
+  overflow: hidden;
+}
+
+.awsui_media_14iqq_y5ati_199:not(#\9) {
+  overflow: hidden;
+  flex-shrink: 0;
+}
+.awsui_media_14iqq_y5ati_199 img:not(#\9),
+.awsui_media_14iqq_y5ati_199 video:not(#\9),
+.awsui_media_14iqq_y5ati_199 picture:not(#\9) {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+}
+.awsui_media-top_14iqq_y5ati_211:not(#\9) {
+  max-height: 66%;
+  border-top-left-radius: var(--border-radius-container-pmtq2d, 16px);
+  border-top-right-radius: var(--border-radius-container-pmtq2d, 16px);
+}
+.awsui_media-side_14iqq_y5ati_216:not(#\9) {
+  max-width: 66%;
+  border-top-left-radius: var(--border-radius-container-pmtq2d, 16px);
+  border-bottom-left-radius: var(--border-radius-container-pmtq2d, 16px);
+}
+
+.awsui_header_14iqq_y5ati_222:not(#\9) {
   background-color: var(--color-background-container-header-l5cy7j, #ffffff);
   border-top-left-radius: var(--border-radius-container-pmtq2d, 16px);
   border-top-right-radius: var(--border-radius-container-pmtq2d, 16px);
 }
-.awsui_header-sticky-disabled_14iqq_1rij9_181:not(#\9) {
+.awsui_header_14iqq_y5ati_222.awsui_header-with-media_14iqq_y5ati_227:not(#\9) {
+  background: none;
+}
+.awsui_header_14iqq_y5ati_222.awsui_header-with-media_14iqq_y5ati_227:not(#\9):not(:empty) {
+  border-bottom: none;
+}
+.awsui_header-sticky-disabled_14iqq_y5ati_233:not(#\9) {
   position: relative;
   z-index: 1;
 }
-.awsui_header-sticky-enabled_14iqq_1rij9_185:not(#\9) {
+.awsui_header-sticky-enabled_14iqq_y5ati_237:not(#\9) {
   top: 0;
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   position: sticky;
   z-index: 800;
 }
-.awsui_header-stuck_14iqq_1rij9_191:not(#\9) {
+.awsui_header-stuck_14iqq_y5ati_243:not(#\9) {
   border-radius: 0;
 }
-.awsui_header-stuck_14iqq_1rij9_191:not(#\9)::before {
+.awsui_header-stuck_14iqq_y5ati_243:not(#\9)::before {
   border: 0;
 }
-.awsui_header-stuck_14iqq_1rij9_191:not(#\9):not(.awsui_header-variant-cards_14iqq_1rij9_197) {
+.awsui_header-stuck_14iqq_y5ati_243:not(#\9):not(.awsui_header-variant-cards_14iqq_y5ati_249) {
   box-shadow: var(--shadow-sticky-embedded-rcrcz5, 0px 2px 0px 0px #e9ebed, 0px 16px 16px -12px rgba(0, 7, 22, 0.1));
 }
-.awsui_header-dynamic-height_14iqq_1rij9_200.awsui_header-stuck_14iqq_1rij9_191:not(#\9) {
+.awsui_header-dynamic-height_14iqq_y5ati_252.awsui_header-stuck_14iqq_y5ati_243:not(#\9) {
   margin-bottom: calc(var(--font-heading-xl-line-height-4s70cu, 40px) - var(--font-heading-l-line-height-l1pmir, 30px));
 }
-.awsui_header_14iqq_1rij9_176:not(#\9):not(:empty) {
+.awsui_header_14iqq_y5ati_222:not(#\9):not(:empty) {
   border-bottom: var(--border-container-sticky-width-3mz641, 0px) solid var(--color-border-container-divider-tildlh, transparent);
 }
-.awsui_header_14iqq_1rij9_176.awsui_with-paddings_14iqq_1rij9_206:not(#\9) {
+.awsui_header_14iqq_y5ati_222.awsui_with-paddings_14iqq_y5ati_258:not(#\9) {
   padding: var(--space-container-header-vertical-di96ce, 12px) var(--space-container-horizontal-jxdgil, 20px);
 }
-.awsui_header_14iqq_1rij9_176.awsui_with-hidden-content_14iqq_1rij9_209:not(#\9) {
+.awsui_header_14iqq_y5ati_222.awsui_with-hidden-content_14iqq_y5ati_261:not(#\9) {
   border-bottom-left-radius: var(--border-radius-container-pmtq2d, 16px);
   border-bottom-right-radius: var(--border-radius-container-pmtq2d, 16px);
 }
-.awsui_header-variant-cards_14iqq_1rij9_197:not(#\9) {
+.awsui_header-variant-cards_14iqq_y5ati_249:not(#\9) {
   border-radius: var(--border-radius-container-pmtq2d, 16px);
   box-sizing: border-box;
 }
-.awsui_header-variant-cards_14iqq_1rij9_197:not(#\9):not(.awsui_header-sticky-enabled_14iqq_1rij9_185) {
+.awsui_header-variant-cards_14iqq_y5ati_249:not(#\9):not(.awsui_header-sticky-enabled_14iqq_y5ati_237) {
   position: relative;
 }
-.awsui_header-variant-cards_14iqq_1rij9_197:not(#\9)::before {
+.awsui_header-variant-cards_14iqq_y5ati_249:not(#\9)::before {
   content: "";
   position: absolute;
   left: 0px;
@@ -258,7 +310,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-radius: var(--border-radius-container-pmtq2d, 16px);
   z-index: 1;
 }
-.awsui_header-variant-cards_14iqq_1rij9_197:not(#\9)::after {
+.awsui_header-variant-cards_14iqq_y5ati_249:not(#\9)::after {
   content: "";
   position: absolute;
   left: 0px;
@@ -273,19 +325,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_1rij9_197:not(#\9) {
+  .awsui_header-variant-cards_14iqq_y5ati_249:not(#\9) {
     border: var(--border-field-width-riro62, 2px) solid var(--color-border-container-top-camjrq, transparent);
   }
 }
-.awsui_header-variant-cards_14iqq_1rij9_197.awsui_header-stuck_14iqq_1rij9_191:not(#\9)::after, .awsui_header-variant-cards_14iqq_1rij9_197.awsui_header-stuck_14iqq_1rij9_191:not(#\9)::before {
+.awsui_header-variant-cards_14iqq_y5ati_249.awsui_header-stuck_14iqq_y5ati_243:not(#\9)::after, .awsui_header-variant-cards_14iqq_y5ati_249.awsui_header-stuck_14iqq_y5ati_243:not(#\9)::before {
   border: 0;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
-.awsui_header-variant-full-page_14iqq_1rij9_259.awsui_header-stuck_14iqq_1rij9_191:not(#\9) {
+.awsui_header-variant-full-page_14iqq_y5ati_311.awsui_header-stuck_14iqq_y5ati_243:not(#\9) {
   box-shadow: none;
 }
-.awsui_header-variant-full-page_14iqq_1rij9_259.awsui_header-stuck_14iqq_1rij9_191:not(#\9)::after {
+.awsui_header-variant-full-page_14iqq_y5ati_311.awsui_header-stuck_14iqq_y5ati_243:not(#\9)::after {
   content: "";
   position: absolute;
   right: 0;
@@ -300,25 +352,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_1rij9_277:not(#\9) {
+.awsui_dark-header_14iqq_y5ati_329:not(#\9) {
   background-color: var(--color-background-layout-main-m49752, #ffffff);
   color: var(--color-text-body-default-mmvcvg, #000716);
 }
 
-.awsui_fit-height_14iqq_1rij9_111 > .awsui_content_14iqq_1rij9_282:not(#\9) {
+.awsui_content_14iqq_y5ati_189:not(#\9) {
   flex: 1;
+}
+.awsui_content-fit-height_14iqq_y5ati_337:not(#\9) {
   overflow: auto;
 }
-.awsui_content_14iqq_1rij9_282.awsui_with-paddings_14iqq_1rij9_206:not(#\9) {
+.awsui_content_14iqq_y5ati_189.awsui_with-paddings_14iqq_y5ati_258:not(#\9) {
   padding: var(--space-scaled-l-2rs0gk, 20px) var(--space-container-horizontal-jxdgil, 20px);
 }
-.awsui_header_14iqq_1rij9_176 + .awsui_content_14iqq_1rij9_282.awsui_with-paddings_14iqq_1rij9_206:not(#\9) {
+.awsui_header_14iqq_y5ati_222 + .awsui_content_14iqq_y5ati_189.awsui_with-paddings_14iqq_y5ati_258:not(#\9) {
   padding-top: var(--space-container-content-top-aj37fz, 0px);
 }
+.awsui_header_14iqq_y5ati_222 + .awsui_content_14iqq_y5ati_189.awsui_with-paddings_14iqq_y5ati_258.awsui_content-with-media_14iqq_y5ati_346:not(#\9) {
+  padding-top: 0;
+}
 
-.awsui_footer_14iqq_1rij9_293.awsui_with-paddings_14iqq_1rij9_206:not(#\9) {
+.awsui_footer_14iqq_y5ati_350.awsui_with-paddings_14iqq_y5ati_258:not(#\9) {
   padding: var(--space-scaled-s-913kwi, 12px) var(--space-container-horizontal-jxdgil, 20px);
 }
-.awsui_footer_14iqq_1rij9_293.awsui_with-divider_14iqq_1rij9_296:not(#\9) {
+.awsui_footer_14iqq_y5ati_350.awsui_with-divider_14iqq_y5ati_353:not(#\9) {
   border-top: var(--border-divider-section-width-orq175, 2px) solid var(--color-border-divider-default-9o8zql, #e9ebed);
 }