@cloudscape-design/components 3.0.310 → 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/collection-preferences/content-display/index.js

@@ -33,7 +33,7 @@ export default function ContentDisplayPreference({ title, description, options,
     const announcements = useLiveAnnouncements({
         isDragging: activeItem !== null,
         liveAnnouncementDndStarted: i18n('contentDisplayPreference.liveAnnouncementDndStarted', liveAnnouncementDndStarted, format => (position, total) => format({ position, total })),
-        liveAnnouncementDndItemReordered: i18n('contentDisplayPreference.liveAnnouncementDndItemReordered', liveAnnouncementDndItemReordered, format => (initialPosition, currentPosition, total) => format({ initialPosition, currentPosition, total, isInitialPosition: `${initialPosition === currentPosition}` })),
+        liveAnnouncementDndItemReordered: i18n('contentDisplayPreference.liveAnnouncementDndItemReordered', liveAnnouncementDndItemReordered, format => (initialPosition, currentPosition, total) => format({ currentPosition, total, isInitialPosition: `${initialPosition === currentPosition}` })),
         liveAnnouncementDndItemCommitted: i18n('contentDisplayPreference.liveAnnouncementDndItemCommitted', liveAnnouncementDndItemCommitted, format => (initialPosition, finalPosition, total) => format({ initialPosition, finalPosition, total, isInitialPosition: `${initialPosition === finalPosition}` })),
         liveAnnouncementDndDiscarded: i18n('contentDisplayPreference.liveAnnouncementDndDiscarded', liveAnnouncementDndDiscarded),
         sortedOptions: value,

package/collection-preferences/content-display/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["collection-preferences/content-display/index.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 React from 'react';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\n\nimport { CollectionPreferencesProps } from '../interfaces';\nimport styles from '../styles.css.js';\nimport { getSortedOptions, OptionWithVisibility } from './utils';\nimport { DndContext, DragOverlay } from '@dnd-kit/core';\nimport { arrayMove, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';\nimport DraggableOption from './draggable-option';\nimport useDragAndDropReorder from './use-drag-and-drop-reorder';\nimport useLiveAnnouncements from './use-live-announcements';\nimport Portal from '../../internal/components/portal';\nimport ContentDisplayOption from './content-display-option';\nimport { useInternalI18n } from '../../internal/i18n/context';\n\nconst componentPrefix = 'content-display';\n\nconst getClassName = (suffix: string) => styles[`${componentPrefix}-${suffix}`];\n\ninterface ContentDisplayPreferenceProps extends CollectionPreferencesProps.ContentDisplayPreference {\n  onChange: (value: ReadonlyArray<CollectionPreferencesProps.ContentDisplayItem>) => void;\n  value?: ReadonlyArray<CollectionPreferencesProps.ContentDisplayItem>;\n}\n\nexport default function ContentDisplayPreference({\n  title,\n  description,\n  options,\n  value = options.map(({ id }) => ({\n    id,\n    visible: true,\n  })),\n  onChange,\n  liveAnnouncementDndStarted,\n  liveAnnouncementDndItemReordered,\n  liveAnnouncementDndItemCommitted,\n  liveAnnouncementDndDiscarded,\n  dragHandleAriaDescription,\n  dragHandleAriaLabel,\n}: ContentDisplayPreferenceProps) {\n  const idPrefix = useUniqueId(componentPrefix);\n  const i18n = useInternalI18n('collection-preferences');\n\n  const onToggle = (option: OptionWithVisibility) => {\n    onChange(value.map(item => (item.id === option.id ? { ...item, visible: !option.visible } : item)));\n  };\n\n  const titleId = `${idPrefix}-title`;\n  const descriptionId = `${idPrefix}-description`;\n\n  const sortedOptions = getSortedOptions({ options, contentDisplay: value });\n\n  const { activeItem, collisionDetection, handleKeyDown, sensors, setActiveItem } = useDragAndDropReorder({\n    sortedOptions,\n  });\n\n  const activeOption = activeItem ? sortedOptions.find(({ id }) => id === activeItem) : null;\n\n  const announcements = useLiveAnnouncements({\n    isDragging: activeItem !== null,\n    liveAnnouncementDndStarted: i18n(\n      'contentDisplayPreference.liveAnnouncementDndStarted',\n      liveAnnouncementDndStarted,\n      format => (position, total) => format({ position, total })\n    ),\n    liveAnnouncementDndItemReordered: i18n(\n      'contentDisplayPreference.liveAnnouncementDndItemReordered',\n      liveAnnouncementDndItemReordered,\n      format => (initialPosition, currentPosition, total) =>\n        format({ initialPosition, currentPosition, total, isInitialPosition: `${initialPosition === currentPosition}` })\n    ),\n    liveAnnouncementDndItemCommitted: i18n(\n      'contentDisplayPreference.liveAnnouncementDndItemCommitted',\n      liveAnnouncementDndItemCommitted,\n      format => (initialPosition, finalPosition, total) =>\n        format({ initialPosition, finalPosition, total, isInitialPosition: `${initialPosition === finalPosition}` })\n    ),\n    liveAnnouncementDndDiscarded: i18n(\n      'contentDisplayPreference.liveAnnouncementDndDiscarded',\n      liveAnnouncementDndDiscarded\n    ),\n    sortedOptions: value,\n  });\n\n  const renderedDragHandleAriaDescription = i18n(\n    'contentDisplayPreference.dragHandleAriaDescription',\n    dragHandleAriaDescription\n  );\n\n  return (\n    <div className={styles[componentPrefix]}>\n      <h3 className={getClassName('title')} id={titleId}>\n        {i18n('contentDisplayPreference.title', title)}\n      </h3>\n      <p className={getClassName('description')} id={descriptionId}>\n        {i18n('contentDisplayPreference.description', description)}\n      </p>\n      <DndContext\n        sensors={sensors}\n        collisionDetection={collisionDetection}\n        accessibility={{\n          announcements,\n          restoreFocus: false,\n          screenReaderInstructions: renderedDragHandleAriaDescription\n            ? { draggable: renderedDragHandleAriaDescription }\n            : undefined,\n        }}\n        onDragStart={({ active }) => setActiveItem(active.id)}\n        onDragEnd={event => {\n          setActiveItem(null);\n          const { active, over } = event;\n\n          if (over && active.id !== over.id) {\n            const oldIndex = value.findIndex(({ id }) => id === active.id);\n            const newIndex = value.findIndex(({ id }) => id === over.id);\n            onChange(arrayMove([...value], oldIndex, newIndex));\n          }\n        }}\n        onDragCancel={() => setActiveItem(null)}\n      >\n        {/* Use explicit list role to work around Safari not announcing lists as such when list-style is set to none.\n            See https://bugs.webkit.org/show_bug.cgi?id=170179 */}\n        <ul\n          className={getClassName('option-list')}\n          aria-describedby={descriptionId}\n          aria-labelledby={titleId}\n          role=\"list\"\n        >\n          <SortableContext items={sortedOptions.map(({ id }) => id)} strategy={verticalListSortingStrategy}>\n            {sortedOptions.map(option => {\n              return (\n                <DraggableOption\n                  dragHandleAriaLabel={i18n('contentDisplayPreference.dragHandleAriaLabel', dragHandleAriaLabel)}\n                  key={option.id}\n                  onKeyDown={handleKeyDown}\n                  onToggle={onToggle}\n                  option={option}\n                />\n              );\n            })}\n          </SortableContext>\n        </ul>\n        <Portal>\n          {/* Make sure that the drag overlay is above the modal\n              by assigning the z-index as inline style\n              so that it prevails over dnd-kit's inline z-index of 999  */}\n          {/* className is a documented prop of the DragOverlay component:\n              https://docs.dndkit.com/api-documentation/draggable/drag-overlay#class-name-and-inline-styles */\n          /* eslint-disable-next-line react/forbid-component-props */}\n          <DragOverlay className={styles['drag-overlay']} dropAnimation={null} style={{ zIndex: 5000 }}>\n            {activeOption && (\n              <ContentDisplayOption\n                listeners={{ onKeyDown: handleKeyDown }}\n                dragHandleAriaLabel={i18n('contentDisplayPreference.dragHandleAriaLabel', dragHandleAriaLabel)}\n                onToggle={onToggle}\n                option={activeOption}\n              />\n            )}\n          </DragOverlay>\n        </Portal>\n      </DndContext>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["collection-preferences/content-display/index.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 React from 'react';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\n\nimport { CollectionPreferencesProps } from '../interfaces';\nimport styles from '../styles.css.js';\nimport { getSortedOptions, OptionWithVisibility } from './utils';\nimport { DndContext, DragOverlay } from '@dnd-kit/core';\nimport { arrayMove, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';\nimport DraggableOption from './draggable-option';\nimport useDragAndDropReorder from './use-drag-and-drop-reorder';\nimport useLiveAnnouncements from './use-live-announcements';\nimport Portal from '../../internal/components/portal';\nimport ContentDisplayOption from './content-display-option';\nimport { useInternalI18n } from '../../internal/i18n/context';\n\nconst componentPrefix = 'content-display';\n\nconst getClassName = (suffix: string) => styles[`${componentPrefix}-${suffix}`];\n\ninterface ContentDisplayPreferenceProps extends CollectionPreferencesProps.ContentDisplayPreference {\n  onChange: (value: ReadonlyArray<CollectionPreferencesProps.ContentDisplayItem>) => void;\n  value?: ReadonlyArray<CollectionPreferencesProps.ContentDisplayItem>;\n}\n\nexport default function ContentDisplayPreference({\n  title,\n  description,\n  options,\n  value = options.map(({ id }) => ({\n    id,\n    visible: true,\n  })),\n  onChange,\n  liveAnnouncementDndStarted,\n  liveAnnouncementDndItemReordered,\n  liveAnnouncementDndItemCommitted,\n  liveAnnouncementDndDiscarded,\n  dragHandleAriaDescription,\n  dragHandleAriaLabel,\n}: ContentDisplayPreferenceProps) {\n  const idPrefix = useUniqueId(componentPrefix);\n  const i18n = useInternalI18n('collection-preferences');\n\n  const onToggle = (option: OptionWithVisibility) => {\n    onChange(value.map(item => (item.id === option.id ? { ...item, visible: !option.visible } : item)));\n  };\n\n  const titleId = `${idPrefix}-title`;\n  const descriptionId = `${idPrefix}-description`;\n\n  const sortedOptions = getSortedOptions({ options, contentDisplay: value });\n\n  const { activeItem, collisionDetection, handleKeyDown, sensors, setActiveItem } = useDragAndDropReorder({\n    sortedOptions,\n  });\n\n  const activeOption = activeItem ? sortedOptions.find(({ id }) => id === activeItem) : null;\n\n  const announcements = useLiveAnnouncements({\n    isDragging: activeItem !== null,\n    liveAnnouncementDndStarted: i18n(\n      'contentDisplayPreference.liveAnnouncementDndStarted',\n      liveAnnouncementDndStarted,\n      format => (position, total) => format({ position, total })\n    ),\n    liveAnnouncementDndItemReordered: i18n(\n      'contentDisplayPreference.liveAnnouncementDndItemReordered',\n      liveAnnouncementDndItemReordered,\n      format => (initialPosition, currentPosition, total) =>\n        format({ currentPosition, total, isInitialPosition: `${initialPosition === currentPosition}` })\n    ),\n    liveAnnouncementDndItemCommitted: i18n(\n      'contentDisplayPreference.liveAnnouncementDndItemCommitted',\n      liveAnnouncementDndItemCommitted,\n      format => (initialPosition, finalPosition, total) =>\n        format({ initialPosition, finalPosition, total, isInitialPosition: `${initialPosition === finalPosition}` })\n    ),\n    liveAnnouncementDndDiscarded: i18n(\n      'contentDisplayPreference.liveAnnouncementDndDiscarded',\n      liveAnnouncementDndDiscarded\n    ),\n    sortedOptions: value,\n  });\n\n  const renderedDragHandleAriaDescription = i18n(\n    'contentDisplayPreference.dragHandleAriaDescription',\n    dragHandleAriaDescription\n  );\n\n  return (\n    <div className={styles[componentPrefix]}>\n      <h3 className={getClassName('title')} id={titleId}>\n        {i18n('contentDisplayPreference.title', title)}\n      </h3>\n      <p className={getClassName('description')} id={descriptionId}>\n        {i18n('contentDisplayPreference.description', description)}\n      </p>\n      <DndContext\n        sensors={sensors}\n        collisionDetection={collisionDetection}\n        accessibility={{\n          announcements,\n          restoreFocus: false,\n          screenReaderInstructions: renderedDragHandleAriaDescription\n            ? { draggable: renderedDragHandleAriaDescription }\n            : undefined,\n        }}\n        onDragStart={({ active }) => setActiveItem(active.id)}\n        onDragEnd={event => {\n          setActiveItem(null);\n          const { active, over } = event;\n\n          if (over && active.id !== over.id) {\n            const oldIndex = value.findIndex(({ id }) => id === active.id);\n            const newIndex = value.findIndex(({ id }) => id === over.id);\n            onChange(arrayMove([...value], oldIndex, newIndex));\n          }\n        }}\n        onDragCancel={() => setActiveItem(null)}\n      >\n        {/* Use explicit list role to work around Safari not announcing lists as such when list-style is set to none.\n            See https://bugs.webkit.org/show_bug.cgi?id=170179 */}\n        <ul\n          className={getClassName('option-list')}\n          aria-describedby={descriptionId}\n          aria-labelledby={titleId}\n          role=\"list\"\n        >\n          <SortableContext items={sortedOptions.map(({ id }) => id)} strategy={verticalListSortingStrategy}>\n            {sortedOptions.map(option => {\n              return (\n                <DraggableOption\n                  dragHandleAriaLabel={i18n('contentDisplayPreference.dragHandleAriaLabel', dragHandleAriaLabel)}\n                  key={option.id}\n                  onKeyDown={handleKeyDown}\n                  onToggle={onToggle}\n                  option={option}\n                />\n              );\n            })}\n          </SortableContext>\n        </ul>\n        <Portal>\n          {/* Make sure that the drag overlay is above the modal\n              by assigning the z-index as inline style\n              so that it prevails over dnd-kit's inline z-index of 999  */}\n          {/* className is a documented prop of the DragOverlay component:\n              https://docs.dndkit.com/api-documentation/draggable/drag-overlay#class-name-and-inline-styles */\n          /* eslint-disable-next-line react/forbid-component-props */}\n          <DragOverlay className={styles['drag-overlay']} dropAnimation={null} style={{ zIndex: 5000 }}>\n            {activeOption && (\n              <ContentDisplayOption\n                listeners={{ onKeyDown: handleKeyDown }}\n                dragHandleAriaLabel={i18n('contentDisplayPreference.dragHandleAriaLabel', dragHandleAriaLabel)}\n                onToggle={onToggle}\n                option={activeOption}\n              />\n            )}\n          </DragOverlay>\n        </Portal>\n      </DndContext>\n    </div>\n  );\n}\n"]}

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"
 };