npm - @cloudscape-design/components - Versions diffs - 3.0.822 → 3.0.823 - Mend

@cloudscape-design/components 3.0.822 → 3.0.823

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (36) hide show

package/app-layout/drawer/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/drawer/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAWtC,OAAO,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAsB1E,eAAO,MAAM,MAAM,~~2FAyGlB~~,CAAC;AAoDF,eAAO,MAAM,iBAAiB,4GAS3B,sBAAsB,gBAyFxB,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/drawer/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAWtC,OAAO,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAsB1E,eAAO,MAAM,MAAM,2FA4GlB,CAAC;AAoDF,eAAO,MAAM,iBAAiB,4GAS3B,sBAAsB,gBAyFxB,CAAC"}

package/app-layout/drawer/index.js CHANGED Viewed

@@ -62,7 +62,9 @@ export const Drawer = React.forwardRef(({ id, contentClassName, toggleClassName,
                 [testutilStyles['drawer-closed']]: !isOpen,
             }) },
             !isMobile && !hideOpenButton && regularOpenButton,
-            React.createElement(TagName, { className: clsx(resizeHandle && styles['drawer-resize-content']), "aria-label": mainLabel, "aria-hidden": !isOpen },
+            React.createElement(TagName, { className: clsx(resizeHandle && styles['drawer-resize-content'], styles['drawer-content-wrapper']), "aria-label": mainLabel, "aria-hidden": !isOpen, style: {
+                    blockSize: `calc(100vh - ${(topOffset || 0) + (bottomOffset || 0)}px)`,
+                } },
                 !isMobile && isOpen && React.createElement("div", { className: styles['resize-handle-wrapper'] }, resizeHandle),
                 React.createElement(CloseButton, { ref: toggleRefs.close, className: closeClassName, ariaLabel: closeLabel, onClick: () => {
                         onToggle(false);

package/app-layout/drawer/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/app-layout/drawer/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, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\nimport { useDensityMode } from '@cloudscape-design/component-toolkit/internal';\n\nimport { getVisualContextClassname } from '../../internal/components/visual-context';\nimport { AppLayoutProps } from '../interfaces';\nimport { CloseButton, ToggleButton, togglesConfig } from '../toggles';\nimport { TOOLS_DRAWER_ID } from '../utils/use-drawers';\nimport { splitItems } from './drawers-helpers';\nimport { DesktopDrawerProps, DrawerTriggersBarProps } from './interfaces';\nimport OverflowMenu from './overflow-menu';\n\nimport testutilStyles from '../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\n// We are using two landmarks per drawer, i.e. two NAVs and two ASIDEs, because of several\n// known bugs in NVDA that cause focus changes within a container to sometimes not be\n// announced. As a result, we use one region for the open button and one region for the\n// actual drawer content, always hiding the other one when it's not visible.\n// An alternative solution to follow a more classic implementation here to only have one\n// button that triggers the opening/closing of the drawer also did not work due to another\n// series of bugs in NVDA (together with Firefox) which prevent the changed expanded state\n// from being announced.\n// Even with this workaround in place, the announcement of the close button when opening a\n// panel in NVDA is not working correctly. The suspected root cause is one of the bugs below\n// as well.\n// Relevant tickets:\n// * https://github.com/nvaccess/nvda/issues/6606\n// * https://github.com/nvaccess/nvda/issues/5825\n// * https://github.com/nvaccess/nvda/issues/5247\n// * https://github.com/nvaccess/nvda/pull/8869 (reverted PR that was going to fix it)\nexport const Drawer = React.forwardRef(\n (\n {\n id,\n contentClassName,\n toggleClassName,\n closeClassName,\n width,\n type,\n toggleRefs,\n topOffset,\n bottomOffset,\n ariaLabels,\n children,\n hideOpenButton,\n isOpen,\n isHidden,\n isMobile,\n onToggle,\n onClick,\n onLoseFocus,\n resizeHandle,\n }: DesktopDrawerProps,\n ref: React.Ref<HTMLDivElement>\n ) => {\n const openButtonWrapperRef = useRef<HTMLElement \| null>(null);\n const { TagName, iconName } = togglesConfig[type];\n const { mainLabel, closeLabel, openLabel } = ariaLabels;\n const drawerContentWidthOpen = isMobile ? undefined : width;\n const drawerContentWidth = isOpen ? drawerContentWidthOpen : undefined;\n\n const regularOpenButton = (\n <TagName ref={openButtonWrapperRef} aria-label={mainLabel} className={styles.toggle} aria-hidden={isOpen}>\n <ToggleButton\n ref={toggleRefs.toggle}\n className={toggleClassName}\n iconName={iconName}\n ariaLabel={openLabel}\n onClick={() => onToggle(true)}\n ariaExpanded={isOpen ? undefined : false}\n />\n </TagName>\n );\n\n return (\n <div\n ref={ref}\n className={clsx(styles.drawer, {\n [styles.hide]: isHidden,\n [styles['drawer-closed']]: !isOpen,\n [styles['drawer-mobile']]: isMobile,\n })}\n style={{ width: drawerContentWidth }}\n onBlur={\n onLoseFocus\n ? e => {\n if (!e.relatedTarget \|\| !e.currentTarget.contains(e.relatedTarget)) {\n onLoseFocus(e);\n }\n }\n : undefined\n }\n onClick={event => {\n if (onClick) {\n onClick(event);\n }\n if (!isOpen) {\n // to prevent calling onToggle from the drawer when it's called from the toggle button\n if (\n openButtonWrapperRef.current === event.target \|\|\n !openButtonWrapperRef.current?.contains(event.target as Node)\n ) {\n onToggle(true);\n }\n }\n }}\n >\n <div\n id={id}\n style={{ width: drawerContentWidth, top: topOffset, bottom: bottomOffset }}\n className={clsx(styles['drawer-content'], styles['drawer-content-clickable'], contentClassName, {\n [testutilStyles['drawer-closed']]: !isOpen,\n })}\n >\n {!isMobile && !hideOpenButton && regularOpenButton}\n <TagName\n className={clsx(resizeHandle && styles['drawer-resize-content'])}\n aria-label={mainLabel}\n aria-hidden={!isOpen}\n >\n {!isMobile && isOpen && <div className={styles['resize-handle-wrapper']}>{resizeHandle}</div>}\n <CloseButton\n ref={toggleRefs.close}\n className={closeClassName}\n ariaLabel={closeLabel}\n onClick={() => {\n onToggle(false);\n }}\n />\n {children}\n </TagName>\n </div>\n </div>\n );\n }\n);\n\ninterface DrawerTriggerProps {\n testUtilsClassName?: string;\n ariaLabel: string \| undefined;\n ariaExpanded: boolean;\n ariaControls?: string;\n badge: boolean \| undefined;\n itemId?: string;\n isActive: boolean;\n trigger: AppLayoutProps.Drawer['trigger'];\n onClick: (() => void) \| undefined;\n}\n\nconst DrawerTrigger = React.forwardRef(\n (\n {\n testUtilsClassName,\n ariaLabel,\n ariaExpanded,\n ariaControls,\n badge,\n itemId,\n isActive,\n trigger,\n onClick,\n }: DrawerTriggerProps,\n ref: React.Ref<{ focus: () => void }>\n ) => (\n <div\n className={clsx(\n styles['drawer-trigger'],\n isActive && styles['drawer-trigger-active'],\n isActive && getVisualContextClassname('app-layout-tools-drawer-trigger')\n )}\n onClick={onClick}\n >\n <ToggleButton\n ref={ref}\n className={testUtilsClassName}\n iconName={trigger!.iconName}\n iconSvg={trigger!.iconSvg}\n ariaLabel={ariaLabel}\n ariaExpanded={ariaExpanded}\n ariaControls={ariaControls}\n badge={badge}\n testId={itemId && `awsui-app-layout-trigger-${itemId}`}\n />\n </div>\n )\n);\n\nexport const DrawerTriggersBar = ({\n isMobile,\n topOffset,\n bottomOffset,\n activeDrawerId,\n ariaLabels,\n drawers,\n drawerRefs,\n onDrawerChange,\n}: DrawerTriggersBarProps) => {\n const containerRef = React.useRef<HTMLDivElement>(null);\n const previousActiveDrawerId = useRef(activeDrawerId);\n const [containerHeight, triggersContainerRef] = useContainerQuery(rect => rect.contentBoxHeight);\n const isCompactMode = useDensityMode(containerRef) === 'compact';\n\n if (activeDrawerId) {\n previousActiveDrawerId.current = activeDrawerId;\n }\n\n const getIndexOfOverflowItem = () => {\n if (containerHeight) {\n const ITEM_HEIGHT = isCompactMode ? 34 : 38;\n const overflowSpot = containerHeight / 1.5;\n\n const index = Math.floor(overflowSpot / ITEM_HEIGHT);\n\n return index;\n }\n return 0;\n };\n\n const { visibleItems, overflowItems } = splitItems(drawers, getIndexOfOverflowItem(), activeDrawerId);\n const overflowMenuHasBadge = !!overflowItems.find(item => item.badge);\n\n return (\n <div\n className={clsx(styles.drawer, styles['drawer-closed'], testutilStyles['drawer-closed'], {\n [styles['drawer-mobile']]: isMobile,\n [styles.hide]: drawers.length === 1 && !!activeDrawerId,\n })}\n ref={containerRef}\n >\n <div\n ref={triggersContainerRef}\n style={{ top: topOffset, bottom: bottomOffset }}\n className={clsx(styles['drawer-content'], {\n [styles['drawer-content-clickable']]: drawers.length === 1,\n })}\n onClick={\n drawers.length === 1\n ? () => onDrawerChange(drawers[0].id !== activeDrawerId ? drawers[0].id : null)\n : undefined\n }\n >\n {!isMobile && (\n <aside aria-label={ariaLabels?.drawers} role=\"region\">\n <div className={styles['drawer-triggers-wrapper']} role=\"toolbar\" aria-orientation=\"vertical\">\n {visibleItems.map((item, index) => {\n return (\n <DrawerTrigger\n key={index}\n testUtilsClassName={clsx(\n testutilStyles['drawers-trigger'],\n item.id === TOOLS_DRAWER_ID && testutilStyles['tools-toggle']\n )}\n ariaExpanded={activeDrawerId === item.id}\n ref={item.id === previousActiveDrawerId.current ? drawerRefs.toggle : undefined}\n ariaLabel={item.ariaLabels?.triggerButton}\n ariaControls={activeDrawerId === item.id ? item.id : undefined}\n trigger={item.trigger}\n badge={item.badge}\n itemId={item.id}\n isActive={activeDrawerId === item.id}\n onClick={\n drawers.length !== 1\n ? () => onDrawerChange(item.id !== activeDrawerId ? item.id : null)\n : undefined\n }\n />\n );\n })}\n {overflowItems.length > 0 && (\n <div className={styles['drawer-trigger']}>\n <OverflowMenu\n ariaLabel={\n overflowMenuHasBadge ? ariaLabels?.drawersOverflowWithBadge : ariaLabels?.drawersOverflow\n }\n items={overflowItems}\n onItemClick={({ detail }) => onDrawerChange(detail.id)}\n />\n </div>\n )}\n </div>\n </aside>\n )}\n </div>\n </div>\n );\n};\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/app-layout/drawer/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, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\nimport { useDensityMode } from '@cloudscape-design/component-toolkit/internal';\n\nimport { getVisualContextClassname } from '../../internal/components/visual-context';\nimport { AppLayoutProps } from '../interfaces';\nimport { CloseButton, ToggleButton, togglesConfig } from '../toggles';\nimport { TOOLS_DRAWER_ID } from '../utils/use-drawers';\nimport { splitItems } from './drawers-helpers';\nimport { DesktopDrawerProps, DrawerTriggersBarProps } from './interfaces';\nimport OverflowMenu from './overflow-menu';\n\nimport testutilStyles from '../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\n// We are using two landmarks per drawer, i.e. two NAVs and two ASIDEs, because of several\n// known bugs in NVDA that cause focus changes within a container to sometimes not be\n// announced. As a result, we use one region for the open button and one region for the\n// actual drawer content, always hiding the other one when it's not visible.\n// An alternative solution to follow a more classic implementation here to only have one\n// button that triggers the opening/closing of the drawer also did not work due to another\n// series of bugs in NVDA (together with Firefox) which prevent the changed expanded state\n// from being announced.\n// Even with this workaround in place, the announcement of the close button when opening a\n// panel in NVDA is not working correctly. The suspected root cause is one of the bugs below\n// as well.\n// Relevant tickets:\n// * https://github.com/nvaccess/nvda/issues/6606\n// * https://github.com/nvaccess/nvda/issues/5825\n// * https://github.com/nvaccess/nvda/issues/5247\n// * https://github.com/nvaccess/nvda/pull/8869 (reverted PR that was going to fix it)\nexport const Drawer = React.forwardRef(\n (\n {\n id,\n contentClassName,\n toggleClassName,\n closeClassName,\n width,\n type,\n toggleRefs,\n topOffset,\n bottomOffset,\n ariaLabels,\n children,\n hideOpenButton,\n isOpen,\n isHidden,\n isMobile,\n onToggle,\n onClick,\n onLoseFocus,\n resizeHandle,\n }: DesktopDrawerProps,\n ref: React.Ref<HTMLDivElement>\n ) => {\n const openButtonWrapperRef = useRef<HTMLElement \| null>(null);\n const { TagName, iconName } = togglesConfig[type];\n const { mainLabel, closeLabel, openLabel } = ariaLabels;\n const drawerContentWidthOpen = isMobile ? undefined : width;\n const drawerContentWidth = isOpen ? drawerContentWidthOpen : undefined;\n\n const regularOpenButton = (\n <TagName ref={openButtonWrapperRef} aria-label={mainLabel} className={styles.toggle} aria-hidden={isOpen}>\n <ToggleButton\n ref={toggleRefs.toggle}\n className={toggleClassName}\n iconName={iconName}\n ariaLabel={openLabel}\n onClick={() => onToggle(true)}\n ariaExpanded={isOpen ? undefined : false}\n />\n </TagName>\n );\n\n return (\n <div\n ref={ref}\n className={clsx(styles.drawer, {\n [styles.hide]: isHidden,\n [styles['drawer-closed']]: !isOpen,\n [styles['drawer-mobile']]: isMobile,\n })}\n style={{ width: drawerContentWidth }}\n onBlur={\n onLoseFocus\n ? e => {\n if (!e.relatedTarget \|\| !e.currentTarget.contains(e.relatedTarget)) {\n onLoseFocus(e);\n }\n }\n : undefined\n }\n onClick={event => {\n if (onClick) {\n onClick(event);\n }\n if (!isOpen) {\n // to prevent calling onToggle from the drawer when it's called from the toggle button\n if (\n openButtonWrapperRef.current === event.target \|\|\n !openButtonWrapperRef.current?.contains(event.target as Node)\n ) {\n onToggle(true);\n }\n }\n }}\n >\n <div\n id={id}\n style={{ width: drawerContentWidth, top: topOffset, bottom: bottomOffset }}\n className={clsx(styles['drawer-content'], styles['drawer-content-clickable'], contentClassName, {\n [testutilStyles['drawer-closed']]: !isOpen,\n })}\n >\n {!isMobile && !hideOpenButton && regularOpenButton}\n <TagName\n className={clsx(resizeHandle && styles['drawer-resize-content'], styles['drawer-content-wrapper'])}\n aria-label={mainLabel}\n aria-hidden={!isOpen}\n style={{\n blockSize: `calc(100vh - ${(topOffset \|\| 0) + (bottomOffset \|\| 0)}px)`,\n }}\n >\n {!isMobile && isOpen && <div className={styles['resize-handle-wrapper']}>{resizeHandle}</div>}\n <CloseButton\n ref={toggleRefs.close}\n className={closeClassName}\n ariaLabel={closeLabel}\n onClick={() => {\n onToggle(false);\n }}\n />\n {children}\n </TagName>\n </div>\n </div>\n );\n }\n);\n\ninterface DrawerTriggerProps {\n testUtilsClassName?: string;\n ariaLabel: string \| undefined;\n ariaExpanded: boolean;\n ariaControls?: string;\n badge: boolean \| undefined;\n itemId?: string;\n isActive: boolean;\n trigger: AppLayoutProps.Drawer['trigger'];\n onClick: (() => void) \| undefined;\n}\n\nconst DrawerTrigger = React.forwardRef(\n (\n {\n testUtilsClassName,\n ariaLabel,\n ariaExpanded,\n ariaControls,\n badge,\n itemId,\n isActive,\n trigger,\n onClick,\n }: DrawerTriggerProps,\n ref: React.Ref<{ focus: () => void }>\n ) => (\n <div\n className={clsx(\n styles['drawer-trigger'],\n isActive && styles['drawer-trigger-active'],\n isActive && getVisualContextClassname('app-layout-tools-drawer-trigger')\n )}\n onClick={onClick}\n >\n <ToggleButton\n ref={ref}\n className={testUtilsClassName}\n iconName={trigger!.iconName}\n iconSvg={trigger!.iconSvg}\n ariaLabel={ariaLabel}\n ariaExpanded={ariaExpanded}\n ariaControls={ariaControls}\n badge={badge}\n testId={itemId && `awsui-app-layout-trigger-${itemId}`}\n />\n </div>\n )\n);\n\nexport const DrawerTriggersBar = ({\n isMobile,\n topOffset,\n bottomOffset,\n activeDrawerId,\n ariaLabels,\n drawers,\n drawerRefs,\n onDrawerChange,\n}: DrawerTriggersBarProps) => {\n const containerRef = React.useRef<HTMLDivElement>(null);\n const previousActiveDrawerId = useRef(activeDrawerId);\n const [containerHeight, triggersContainerRef] = useContainerQuery(rect => rect.contentBoxHeight);\n const isCompactMode = useDensityMode(containerRef) === 'compact';\n\n if (activeDrawerId) {\n previousActiveDrawerId.current = activeDrawerId;\n }\n\n const getIndexOfOverflowItem = () => {\n if (containerHeight) {\n const ITEM_HEIGHT = isCompactMode ? 34 : 38;\n const overflowSpot = containerHeight / 1.5;\n\n const index = Math.floor(overflowSpot / ITEM_HEIGHT);\n\n return index;\n }\n return 0;\n };\n\n const { visibleItems, overflowItems } = splitItems(drawers, getIndexOfOverflowItem(), activeDrawerId);\n const overflowMenuHasBadge = !!overflowItems.find(item => item.badge);\n\n return (\n <div\n className={clsx(styles.drawer, styles['drawer-closed'], testutilStyles['drawer-closed'], {\n [styles['drawer-mobile']]: isMobile,\n [styles.hide]: drawers.length === 1 && !!activeDrawerId,\n })}\n ref={containerRef}\n >\n <div\n ref={triggersContainerRef}\n style={{ top: topOffset, bottom: bottomOffset }}\n className={clsx(styles['drawer-content'], {\n [styles['drawer-content-clickable']]: drawers.length === 1,\n })}\n onClick={\n drawers.length === 1\n ? () => onDrawerChange(drawers[0].id !== activeDrawerId ? drawers[0].id : null)\n : undefined\n }\n >\n {!isMobile && (\n <aside aria-label={ariaLabels?.drawers} role=\"region\">\n <div className={styles['drawer-triggers-wrapper']} role=\"toolbar\" aria-orientation=\"vertical\">\n {visibleItems.map((item, index) => {\n return (\n <DrawerTrigger\n key={index}\n testUtilsClassName={clsx(\n testutilStyles['drawers-trigger'],\n item.id === TOOLS_DRAWER_ID && testutilStyles['tools-toggle']\n )}\n ariaExpanded={activeDrawerId === item.id}\n ref={item.id === previousActiveDrawerId.current ? drawerRefs.toggle : undefined}\n ariaLabel={item.ariaLabels?.triggerButton}\n ariaControls={activeDrawerId === item.id ? item.id : undefined}\n trigger={item.trigger}\n badge={item.badge}\n itemId={item.id}\n isActive={activeDrawerId === item.id}\n onClick={\n drawers.length !== 1\n ? () => onDrawerChange(item.id !== activeDrawerId ? item.id : null)\n : undefined\n }\n />\n );\n })}\n {overflowItems.length > 0 && (\n <div className={styles['drawer-trigger']}>\n <OverflowMenu\n ariaLabel={\n overflowMenuHasBadge ? ariaLabels?.drawersOverflowWithBadge : ariaLabels?.drawersOverflow\n }\n items={overflowItems}\n onItemClick={({ detail }) => onDrawerChange(detail.id)}\n />\n </div>\n )}\n </div>\n </aside>\n )}\n </div>\n </div>\n );\n};\n"]}

package/app-layout/drawer/styles.css.js CHANGED Viewed

@@ -1,18 +1,19 @@
     import './styles.scoped.css';
     export default {
-  "toggle": "awsui_toggle_1uo6m_imzwf_189",
-  "drawer-triggers": "awsui_drawer-triggers_1uo6m_imzwf_195",
-  "drawer": "awsui_drawer_1uo6m_imzwf_195",
-  "drawer-mobile": "awsui_drawer-mobile_1uo6m_imzwf_205",
-  "drawer-closed": "awsui_drawer-closed_1uo6m_imzwf_208",
-  "drawer-content": "awsui_drawer-content_1uo6m_imzwf_215",
-  "drawer-content-clickable": "awsui_drawer-content-clickable_1uo6m_imzwf_227",
-  "drawer-resize-content": "awsui_drawer-resize-content_1uo6m_imzwf_237",
-  "drawer-triggers-wrapper": "awsui_drawer-triggers-wrapper_1uo6m_imzwf_243",
-  "drawer-trigger": "awsui_drawer-trigger_1uo6m_imzwf_195",
-  "drawer-trigger-active": "awsui_drawer-trigger-active_1uo6m_imzwf_262",
-  "resize-handle-wrapper": "awsui_resize-handle-wrapper_1uo6m_imzwf_270",
-  "hide": "awsui_hide_1uo6m_imzwf_280"
+  "toggle": "awsui_toggle_1uo6m_11iof_189",
+  "drawer-triggers": "awsui_drawer-triggers_1uo6m_11iof_195",
+  "drawer": "awsui_drawer_1uo6m_11iof_195",
+  "drawer-mobile": "awsui_drawer-mobile_1uo6m_11iof_205",
+  "drawer-closed": "awsui_drawer-closed_1uo6m_11iof_208",
+  "drawer-content": "awsui_drawer-content_1uo6m_11iof_215",
+  "drawer-content-clickable": "awsui_drawer-content-clickable_1uo6m_11iof_229",
+  "drawer-resize-content": "awsui_drawer-resize-content_1uo6m_11iof_239",
+  "drawer-content-wrapper": "awsui_drawer-content-wrapper_1uo6m_11iof_244",
+  "drawer-triggers-wrapper": "awsui_drawer-triggers-wrapper_1uo6m_11iof_248",
+  "drawer-trigger": "awsui_drawer-trigger_1uo6m_11iof_195",
+  "drawer-trigger-active": "awsui_drawer-trigger-active_1uo6m_11iof_267",
+  "resize-handle-wrapper": "awsui_resize-handle-wrapper_1uo6m_11iof_275",
+  "hide": "awsui_hide_1uo6m_11iof_285"
 };

package/app-layout/drawer/styles.scoped.css CHANGED Viewed

@@ -186,88 +186,93 @@ 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_toggle_1uo6m_imzwf_189:not(#\9) {
+.awsui_toggle_1uo6m_11iof_189:not(#\9) {
   box-sizing: border-box;
   padding-block: var(--space-xxs-p8yyaw, 4px);
   padding-inline: 7px;
 }
-.awsui_drawer-triggers_1uo6m_imzwf_195:not(#\9) {
+.awsui_drawer-triggers_1uo6m_11iof_195:not(#\9) {
   box-sizing: border-box;
 }
-.awsui_drawer_1uo6m_imzwf_195:not(#\9) {
+.awsui_drawer_1uo6m_11iof_195:not(#\9) {
   flex-shrink: 0;
   position: relative;
   word-wrap: break-word;
   box-shadow: var(--shadow-panel-g6fkp1, 0px 0px 0px 1px #b6bec9);
 }
-.awsui_drawer_1uo6m_imzwf_195:not(#\9):not(.awsui_drawer-mobile_1uo6m_imzwf_205) {
+.awsui_drawer_1uo6m_11iof_195:not(#\9):not(.awsui_drawer-mobile_1uo6m_11iof_205) {
   z-index: 830;
 }
-.awsui_drawer-closed_1uo6m_imzwf_208:not(#\9) {
+.awsui_drawer-closed_1uo6m_11iof_208:not(#\9) {
   min-inline-size: 40px;
 }
-.awsui_drawer-closed_1uo6m_imzwf_208.awsui_drawer-mobile_1uo6m_imzwf_205:not(#\9) {
+.awsui_drawer-closed_1uo6m_11iof_208.awsui_drawer-mobile_1uo6m_11iof_205:not(#\9) {
   display: none;
 }
-.awsui_drawer-content_1uo6m_imzwf_215:not(#\9) {
+.awsui_drawer-content_1uo6m_11iof_215:not(#\9) {
   position: fixed;
   overflow: auto;
   background-color: var(--color-background-layout-panel-content-du0fbw, #ffffff);
+  display: flex;
+  flex-direction: column;
 }
-.awsui_drawer-mobile_1uo6m_imzwf_205 > .awsui_drawer-content_1uo6m_imzwf_215:not(#\9) {
+.awsui_drawer-mobile_1uo6m_11iof_205 > .awsui_drawer-content_1uo6m_11iof_215:not(#\9) {
   z-index: 1001;
   inset: 0;
 }
-.awsui_drawer-closed_1uo6m_imzwf_208 > .awsui_drawer-content_1uo6m_imzwf_215:not(#\9) {
+.awsui_drawer-closed_1uo6m_11iof_208 > .awsui_drawer-content_1uo6m_11iof_215:not(#\9) {
   inline-size: 40px;
 }
-.awsui_drawer-closed_1uo6m_imzwf_208 > .awsui_drawer-content_1uo6m_imzwf_215.awsui_drawer-content-clickable_1uo6m_imzwf_227:not(#\9) {
+.awsui_drawer-closed_1uo6m_11iof_208 > .awsui_drawer-content_1uo6m_11iof_215.awsui_drawer-content-clickable_1uo6m_11iof_229:not(#\9) {
   cursor: pointer;
   color: var(--color-text-interactive-default-tkx8fe, #424650);
 }
-.awsui_drawer-closed_1uo6m_imzwf_208 > .awsui_drawer-content_1uo6m_imzwf_215.awsui_drawer-content-clickable_1uo6m_imzwf_227:not(#\9):hover {
+.awsui_drawer-closed_1uo6m_11iof_208 > .awsui_drawer-content_1uo6m_11iof_215.awsui_drawer-content-clickable_1uo6m_11iof_229:not(#\9):hover {
   background: var(--color-background-layout-panel-hover-1ftnua, #ebebf0);
 }
-.awsui_drawer-content_1uo6m_imzwf_215 > [aria-hidden=true]:not(#\9) {
+.awsui_drawer-content_1uo6m_11iof_215 > [aria-hidden=true]:not(#\9) {
   display: none;
 }
-.awsui_drawer-content_1uo6m_imzwf_215 > .awsui_drawer-resize-content_1uo6m_imzwf_237:not(#\9) {
+.awsui_drawer-content_1uo6m_11iof_215 > .awsui_drawer-resize-content_1uo6m_11iof_239:not(#\9) {
   overflow: auto;
   block-size: 100%;
   position: relative;
 }
+.awsui_drawer-content_1uo6m_11iof_215 > .awsui_drawer-content-wrapper_1uo6m_11iof_244:not(#\9) {
+  flex: 1;
+}
-.awsui_drawer-triggers-wrapper_1uo6m_imzwf_243:not(#\9) {
+.awsui_drawer-triggers-wrapper_1uo6m_11iof_248:not(#\9) {
   display: flex;
   flex-direction: column;
   text-align: center;
   align-items: stretch;
 }
-.awsui_drawer-trigger_1uo6m_imzwf_195:not(#\9) {
+.awsui_drawer-trigger_1uo6m_11iof_195:not(#\9) {
   padding-block: var(--space-xxs-p8yyaw, 4px);
   padding-inline: 7px;
   cursor: pointer;
   color: var(--color-text-interactive-default-tkx8fe, #424650);
 }
-.awsui_drawer-trigger_1uo6m_imzwf_195:not(#\9):not(:first-child) {
+.awsui_drawer-trigger_1uo6m_11iof_195:not(#\9):not(:first-child) {
   border-block-start: 1px solid var(--color-border-layout-hrw5xj, #b4b4bb);
 }
-.awsui_drawer-trigger_1uo6m_imzwf_195:not(#\9):hover {
+.awsui_drawer-trigger_1uo6m_11iof_195:not(#\9):hover {
   color: var(--color-text-layout-toggle-hover-v3lnw5, #006ce0);
 }
-.awsui_drawer-trigger-active_1uo6m_imzwf_262:not(#\9), .awsui_drawer-trigger-active_1uo6m_imzwf_262:not(#\9):hover {
+.awsui_drawer-trigger-active_1uo6m_11iof_267:not(#\9), .awsui_drawer-trigger-active_1uo6m_11iof_267:not(#\9):hover {
   background-color: var(--color-background-layout-toggle-selected-default-27rnk6, #006ce0);
   color: var(--color-text-layout-toggle-active-as4nbt, #ffffff);
 }
-.awsui_drawer-content-clickable_1uo6m_imzwf_227 > .awsui_drawer-triggers-wrapper_1uo6m_imzwf_243 > .awsui_drawer-trigger_1uo6m_imzwf_195:not(#\9):hover {
+.awsui_drawer-content-clickable_1uo6m_11iof_229 > .awsui_drawer-triggers-wrapper_1uo6m_11iof_248 > .awsui_drawer-trigger_1uo6m_11iof_195:not(#\9):hover {
   color: var(--color-text-interactive-default-tkx8fe, #424650);
 }
-.awsui_resize-handle-wrapper_1uo6m_imzwf_270:not(#\9) {
+.awsui_resize-handle-wrapper_1uo6m_11iof_275:not(#\9) {
   position: absolute;
   inset-inline-start: 0;
   inset-block-start: 0;
@@ -277,6 +282,6 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   z-index: 1;
 }
-.awsui_hide_1uo6m_imzwf_280:not(#\9) {
+.awsui_hide_1uo6m_11iof_285:not(#\9) {
   display: none;
 }

package/app-layout/drawer/styles.selectors.js CHANGED Viewed

@@ -2,18 +2,19 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "toggle": "awsui_toggle_1uo6m_imzwf_189",
-  "drawer-triggers": "awsui_drawer-triggers_1uo6m_imzwf_195",
-  "drawer": "awsui_drawer_1uo6m_imzwf_195",
-  "drawer-mobile": "awsui_drawer-mobile_1uo6m_imzwf_205",
-  "drawer-closed": "awsui_drawer-closed_1uo6m_imzwf_208",
-  "drawer-content": "awsui_drawer-content_1uo6m_imzwf_215",
-  "drawer-content-clickable": "awsui_drawer-content-clickable_1uo6m_imzwf_227",
-  "drawer-resize-content": "awsui_drawer-resize-content_1uo6m_imzwf_237",
-  "drawer-triggers-wrapper": "awsui_drawer-triggers-wrapper_1uo6m_imzwf_243",
-  "drawer-trigger": "awsui_drawer-trigger_1uo6m_imzwf_195",
-  "drawer-trigger-active": "awsui_drawer-trigger-active_1uo6m_imzwf_262",
-  "resize-handle-wrapper": "awsui_resize-handle-wrapper_1uo6m_imzwf_270",
-  "hide": "awsui_hide_1uo6m_imzwf_280"
+  "toggle": "awsui_toggle_1uo6m_11iof_189",
+  "drawer-triggers": "awsui_drawer-triggers_1uo6m_11iof_195",
+  "drawer": "awsui_drawer_1uo6m_11iof_195",
+  "drawer-mobile": "awsui_drawer-mobile_1uo6m_11iof_205",
+  "drawer-closed": "awsui_drawer-closed_1uo6m_11iof_208",
+  "drawer-content": "awsui_drawer-content_1uo6m_11iof_215",
+  "drawer-content-clickable": "awsui_drawer-content-clickable_1uo6m_11iof_229",
+  "drawer-resize-content": "awsui_drawer-resize-content_1uo6m_11iof_239",
+  "drawer-content-wrapper": "awsui_drawer-content-wrapper_1uo6m_11iof_244",
+  "drawer-triggers-wrapper": "awsui_drawer-triggers-wrapper_1uo6m_11iof_248",
+  "drawer-trigger": "awsui_drawer-trigger_1uo6m_11iof_195",
+  "drawer-trigger-active": "awsui_drawer-trigger-active_1uo6m_11iof_267",
+  "resize-handle-wrapper": "awsui_resize-handle-wrapper_1uo6m_11iof_275",
+  "hide": "awsui_hide_1uo6m_11iof_285"
 };

package/app-layout/visual-refresh/navigation.js CHANGED Viewed

@@ -48,7 +48,7 @@ export default function Navigation() {
                 }), ref: state !== 'exiting' ? transitionEventsRef : undefined, "aria-hidden": !navigationOpen, onClick: event => {
                     onNavigationClick && onNavigationClick(event);
                 } },
-                React.createElement("div", { className: styles['animated-content'] },
+                React.createElement("div", { className: clsx(styles['content-container'], styles['animated-content']) },
                     React.createElement("div", { className: styles['hide-navigation'] },
                         React.createElement(InternalButton, { ariaLabel: (_c = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.navigationClose) !== null && _c !== void 0 ? _c : undefined, iconName: isMobile ? 'close' : 'angle-left', onClick: () => handleNavigationClick(false), variant: "icon", formAction: "none", className: testutilStyles['navigation-close'], ref: navigationRefs.close })),
                     navigation))));

package/app-layout/visual-refresh/navigation.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"navigation.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/navigation.tsx"],"names":[],"mappings":"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~~oBACxC~~,6BAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC;wBACvC,oBAAC,cAAc,IACb,SAAS,EAAE,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,eAAe,mCAAI,SAAS,EACnD,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,EAC3C,OAAO,EAAE,GAAG,EAAE,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAC3C,OAAO,EAAC,MAAM,EACd,UAAU,EAAC,MAAM,EACjB,SAAS,EAAE,cAAc,CAAC,kBAAkB,CAAC,EAC7C,GAAG,EAAE,cAAc,CAAC,KAAK,GACzB,CACE;oBACL,UAAU,CACP,CACF,CACF,CACP,CAAA;KAAA,CACU,CACd,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { findUpUntil } from '@cloudscape-design/component-toolkit/dom';\n\nimport { InternalButton } from '../../button/internal';\nimport { Transition } from '../../internal/components/transition';\nimport customCssProps from '../../internal/generated/custom-css-properties';\nimport { useAppLayoutInternals } from './context';\nimport TriggerButton from './trigger-button';\n\nimport testutilStyles from '../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\n/*\n The Navigation component consists of the following elements:\n * the container, or root element, that sits as a direct child to the Layout grid definition;\n * the show navigation form that contains the trigger for the drawer in large viewports;\n * the navigation, or drawer, that contains the hide navigation form and the children\n * passed through the API;\n */\nexport default function Navigation() {\n const {\n ariaLabels,\n disableBodyScroll,\n handleNavigationClick,\n hasDrawerViewportOverlay,\n isMobile,\n navigationOpen,\n isToolsOpen,\n navigation,\n navigationHide,\n navigationRefs,\n navigationWidth,\n toolsHide,\n headerVariant,\n } = useAppLayoutInternals();\n\n if (navigationHide) {\n return null;\n }\n\n // Close the Navigation drawer on mobile when a user clicks a link inside.\n const onNavigationClick = (event: React.MouseEvent) => {\n const hasLink = findUpUntil(\n event.target as HTMLElement,\n node => node.tagName === 'A' && !!(node as HTMLAnchorElement).href\n );\n if (hasLink && isMobile) {\n handleNavigationClick(false);\n }\n };\n\n const isUnfocusable = hasDrawerViewportOverlay && (!navigationOpen \|\| (isToolsOpen && !toolsHide));\n\n return (\n <Transition in={navigationOpen}>\n {(state, transitionEventsRef) => (\n <div\n className={clsx(styles['navigation-container'], {\n [styles['disable-body-scroll']]: disableBodyScroll,\n [styles.unfocusable]: isUnfocusable,\n })}\n style={{ [customCssProps.navigationWidth]: `${navigationWidth}px` }}\n >\n {!isMobile && (\n <nav\n aria-hidden={isMobile \|\| navigationOpen}\n aria-label={ariaLabels?.navigation ?? undefined}\n className={clsx(styles['show-navigation'], {\n [styles.animating]: state === 'exiting',\n [styles['is-navigation-open']]: navigationOpen,\n })}\n ref={state === 'exiting' ? transitionEventsRef : undefined}\n >\n <TriggerButton\n ariaLabel={ariaLabels?.navigationToggle}\n ariaExpanded={navigationOpen ? undefined : false}\n iconName=\"menu\"\n className={testutilStyles['navigation-toggle']}\n onClick={() => handleNavigationClick(true)}\n ref={navigationRefs.toggle}\n highContrastHeader={headerVariant === 'high-contrast'}\n />\n </nav>\n )}\n\n <nav\n aria-label={ariaLabels?.navigation ?? undefined}\n className={clsx(styles.navigation, testutilStyles.navigation, {\n [testutilStyles['drawer-closed']]: !navigationOpen,\n [styles.animating]: state === 'entering',\n [styles['is-navigation-open']]: navigationOpen,\n })}\n ref={state !== 'exiting' ? transitionEventsRef : undefined}\n aria-hidden={!navigationOpen}\n onClick={event => {\n onNavigationClick && onNavigationClick(event);\n }}\n >\n <div className={styles['animated-content']}>\n <div className={styles['hide-navigation']}>\n <InternalButton\n ariaLabel={ariaLabels?.navigationClose ?? undefined}\n iconName={isMobile ? 'close' : 'angle-left'}\n onClick={() => handleNavigationClick(false)}\n variant=\"icon\"\n formAction=\"none\"\n className={testutilStyles['navigation-close']}\n ref={navigationRefs.close}\n />\n </div>\n {navigation}\n </div>\n </nav>\n </div>\n )}\n </Transition>\n );\n}\n"]}
1	+ {"version":3,"file":"navigation.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/navigation.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 clsx from 'clsx';\n\nimport { findUpUntil } from '@cloudscape-design/component-toolkit/dom';\n\nimport { InternalButton } from '../../button/internal';\nimport { Transition } from '../../internal/components/transition';\nimport customCssProps from '../../internal/generated/custom-css-properties';\nimport { useAppLayoutInternals } from './context';\nimport TriggerButton from './trigger-button';\n\nimport testutilStyles from '../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\n/*\n The Navigation component consists of the following elements:\n * the container, or root element, that sits as a direct child to the Layout grid definition;\n * the show navigation form that contains the trigger for the drawer in large viewports;\n * the navigation, or drawer, that contains the hide navigation form and the children\n * passed through the API;\n */\nexport default function Navigation() {\n const {\n ariaLabels,\n disableBodyScroll,\n handleNavigationClick,\n hasDrawerViewportOverlay,\n isMobile,\n navigationOpen,\n isToolsOpen,\n navigation,\n navigationHide,\n navigationRefs,\n navigationWidth,\n toolsHide,\n headerVariant,\n } = useAppLayoutInternals();\n\n if (navigationHide) {\n return null;\n }\n\n // Close the Navigation drawer on mobile when a user clicks a link inside.\n const onNavigationClick = (event: React.MouseEvent) => {\n const hasLink = findUpUntil(\n event.target as HTMLElement,\n node => node.tagName === 'A' && !!(node as HTMLAnchorElement).href\n );\n if (hasLink && isMobile) {\n handleNavigationClick(false);\n }\n };\n\n const isUnfocusable = hasDrawerViewportOverlay && (!navigationOpen \|\| (isToolsOpen && !toolsHide));\n\n return (\n <Transition in={navigationOpen}>\n {(state, transitionEventsRef) => (\n <div\n className={clsx(styles['navigation-container'], {\n [styles['disable-body-scroll']]: disableBodyScroll,\n [styles.unfocusable]: isUnfocusable,\n })}\n style={{ [customCssProps.navigationWidth]: `${navigationWidth}px` }}\n >\n {!isMobile && (\n <nav\n aria-hidden={isMobile \|\| navigationOpen}\n aria-label={ariaLabels?.navigation ?? undefined}\n className={clsx(styles['show-navigation'], {\n [styles.animating]: state === 'exiting',\n [styles['is-navigation-open']]: navigationOpen,\n })}\n ref={state === 'exiting' ? transitionEventsRef : undefined}\n >\n <TriggerButton\n ariaLabel={ariaLabels?.navigationToggle}\n ariaExpanded={navigationOpen ? undefined : false}\n iconName=\"menu\"\n className={testutilStyles['navigation-toggle']}\n onClick={() => handleNavigationClick(true)}\n ref={navigationRefs.toggle}\n highContrastHeader={headerVariant === 'high-contrast'}\n />\n </nav>\n )}\n\n <nav\n aria-label={ariaLabels?.navigation ?? undefined}\n className={clsx(styles.navigation, testutilStyles.navigation, {\n [testutilStyles['drawer-closed']]: !navigationOpen,\n [styles.animating]: state === 'entering',\n [styles['is-navigation-open']]: navigationOpen,\n })}\n ref={state !== 'exiting' ? transitionEventsRef : undefined}\n aria-hidden={!navigationOpen}\n onClick={event => {\n onNavigationClick && onNavigationClick(event);\n }}\n >\n <div className={clsx(styles['content-container'], styles['animated-content'])}>\n <div className={styles['hide-navigation']}>\n <InternalButton\n ariaLabel={ariaLabels?.navigationClose ?? undefined}\n iconName={isMobile ? 'close' : 'angle-left'}\n onClick={() => handleNavigationClick(false)}\n variant=\"icon\"\n formAction=\"none\"\n className={testutilStyles['navigation-close']}\n ref={navigationRefs.close}\n />\n </div>\n {navigation}\n </div>\n </nav>\n </div>\n )}\n </Transition>\n );\n}\n"]}

package/app-layout/visual-refresh/styles.css.js CHANGED Viewed

@@ -1,90 +1,91 @@
     import './styles.scoped.css';
     export default {
-  "background": "awsui_background_hyvsj_14131_145",
-  "scrolling-background": "awsui_scrolling-background_hyvsj_14131_148",
-  "breadcrumbs": "awsui_breadcrumbs_hyvsj_14131_159",
-  "drawers-container": "awsui_drawers-container_hyvsj_14131_172",
-  "has-open-drawer": "awsui_has-open-drawer_hyvsj_14131_183",
-  "disable-body-scroll": "awsui_disable-body-scroll_hyvsj_14131_204",
-  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_hyvsj_14131_209",
-  "has-multiple-triggers": "awsui_has-multiple-triggers_hyvsj_14131_250",
-  "drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_hyvsj_14131_260",
-  "drawers-trigger-content": "awsui_drawers-trigger-content_hyvsj_14131_265",
-  "drawers-trigger-overflow": "awsui_drawers-trigger-overflow_hyvsj_14131_279",
-  "drawers-trigger": "awsui_drawers-trigger_hyvsj_14131_265",
-  "drawer": "awsui_drawer_hyvsj_14131_172",
-  "drawer-content-container": "awsui_drawer-content-container_hyvsj_14131_310",
-  "drawer-close-button": "awsui_drawer-close-button_hyvsj_14131_319",
-  "drawer-content": "awsui_drawer-content_hyvsj_14131_310",
-  "drawer-content-hidden": "awsui_drawer-content-hidden_hyvsj_14131_327",
-  "drawer-slider": "awsui_drawer-slider_hyvsj_14131_330",
-  "is-drawer-open": "awsui_is-drawer-open_hyvsj_14131_337",
-  "content": "awsui_content_hyvsj_14131_363",
-  "layout": "awsui_layout_hyvsj_14131_388",
-  "has-max-content-width": "awsui_has-max-content-width_hyvsj_14131_460",
-  "content-type-dashboard": "awsui_content-type-dashboard_hyvsj_14131_475",
-  "content-type-table": "awsui_content-type-table_hyvsj_14131_489",
-  "content-type-cards": "awsui_content-type-cards_hyvsj_14131_489",
-  "is-overlap-disabled": "awsui_is-overlap-disabled_hyvsj_14131_495",
-  "is-hide-mobile-toolbar": "awsui_is-hide-mobile-toolbar_hyvsj_14131_498",
-  "has-content-gap-left": "awsui_has-content-gap-left_hyvsj_14131_512",
-  "has-content-gap-right": "awsui_has-content-gap-right_hyvsj_14131_515",
-  "has-breadcrumbs": "awsui_has-breadcrumbs_hyvsj_14131_525",
-  "content-first-child-header": "awsui_content-first-child-header_hyvsj_14131_528",
-  "content-first-child-notifications": "awsui_content-first-child-notifications_hyvsj_14131_528",
-  "has-header": "awsui_has-header_hyvsj_14131_528",
-  "content-first-child-main": "awsui_content-first-child-main_hyvsj_14131_543",
-  "disable-content-paddings": "awsui_disable-content-paddings_hyvsj_14131_543",
-  "has-left-toggles-gutter": "awsui_has-left-toggles-gutter_hyvsj_14131_563",
-  "has-right-toggles-gutter": "awsui_has-right-toggles-gutter_hyvsj_14131_566",
-  "has-split-panel": "awsui_has-split-panel_hyvsj_14131_586",
-  "split-panel-position-bottom": "awsui_split-panel-position-bottom_hyvsj_14131_586",
-  "block-body-scroll": "awsui_block-body-scroll_hyvsj_14131_594",
-  "unfocusable": "awsui_unfocusable_hyvsj_14131_599",
-  "container": "awsui_container_hyvsj_14131_609",
-  "is-navigation-open": "awsui_is-navigation-open_hyvsj_14131_635",
-  "is-tools-open": "awsui_is-tools-open_hyvsj_14131_638",
-  "is-split-panel-open": "awsui_is-split-panel-open_hyvsj_14131_638",
-  "split-panel-position-side": "awsui_split-panel-position-side_hyvsj_14131_638",
-  "has-active-drawer": "awsui_has-active-drawer_hyvsj_14131_638",
-  "mobile-toolbar": "awsui_mobile-toolbar_hyvsj_14131_651",
-  "remove-high-contrast-header": "awsui_remove-high-contrast-header_hyvsj_14131_668",
-  "mobile-toolbar-nav": "awsui_mobile-toolbar-nav_hyvsj_14131_672",
-  "mobile-toolbar-breadcrumbs": "awsui_mobile-toolbar-breadcrumbs_hyvsj_14131_676",
-  "mobile-toolbar-tools": "awsui_mobile-toolbar-tools_hyvsj_14131_680",
-  "navigation-container": "awsui_navigation-container_hyvsj_14131_689",
-  "show-navigation": "awsui_show-navigation_hyvsj_14131_727",
-  "animating": "awsui_animating_hyvsj_14131_750",
-  "showButtons": "awsui_showButtons_hyvsj_14131_1",
-  "navigation": "awsui_navigation_hyvsj_14131_689",
-  "openNavigation": "awsui_openNavigation_hyvsj_14131_1",
-  "animated-content": "awsui_animated-content_hyvsj_14131_812",
-  "hide-navigation": "awsui_hide-navigation_hyvsj_14131_821",
-  "notifications": "awsui_notifications_hyvsj_14131_831",
-  "has-notification-content": "awsui_has-notification-content_hyvsj_14131_836",
-  "sticky-notifications": "awsui_sticky-notifications_hyvsj_14131_840",
-  "high-contrast": "awsui_high-contrast_hyvsj_14131_845",
-  "split-panel-bottom": "awsui_split-panel-bottom_hyvsj_14131_863",
-  "position-bottom": "awsui_position-bottom_hyvsj_14131_910",
-  "openSplitPanelBottom": "awsui_openSplitPanelBottom_hyvsj_14131_1",
-  "split-panel-side": "awsui_split-panel-side_hyvsj_14131_939",
-  "position-side": "awsui_position-side_hyvsj_14131_952",
-  "tools-container": "awsui_tools-container_hyvsj_14131_974",
-  "tools": "awsui_tools_hyvsj_14131_974",
-  "openTools": "awsui_openTools_hyvsj_14131_1",
-  "has-tools-form-persistence": "awsui_has-tools-form-persistence_hyvsj_14131_1063",
-  "hide-tools": "awsui_hide-tools_hyvsj_14131_1073",
-  "show-tools": "awsui_show-tools_hyvsj_14131_1085",
-  "has-tools-form": "awsui_has-tools-form_hyvsj_14131_1063",
-  "trigger-button-styles": "awsui_trigger-button-styles_hyvsj_14131_1168",
-  "trigger-badge-wrapper": "awsui_trigger-badge-wrapper_hyvsj_14131_1184",
-  "trigger": "awsui_trigger_hyvsj_14131_1168",
-  "selected": "awsui_selected_hyvsj_14131_1236",
-  "badge": "awsui_badge_hyvsj_14131_1256",
-  "trigger-wrapper": "awsui_trigger-wrapper_hyvsj_14131_1260",
-  "trigger-wrapper-tooltip-visible": "awsui_trigger-wrapper-tooltip-visible_hyvsj_14131_1271",
-  "dot": "awsui_dot_hyvsj_14131_1275",
-  "trigger-tooltip": "awsui_trigger-tooltip_hyvsj_14131_1288"
+  "background": "awsui_background_hyvsj_17ek5_145",
+  "scrolling-background": "awsui_scrolling-background_hyvsj_17ek5_148",
+  "breadcrumbs": "awsui_breadcrumbs_hyvsj_17ek5_159",
+  "drawers-container": "awsui_drawers-container_hyvsj_17ek5_172",
+  "has-open-drawer": "awsui_has-open-drawer_hyvsj_17ek5_183",
+  "disable-body-scroll": "awsui_disable-body-scroll_hyvsj_17ek5_204",
+  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_hyvsj_17ek5_209",
+  "has-multiple-triggers": "awsui_has-multiple-triggers_hyvsj_17ek5_250",
+  "drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_hyvsj_17ek5_260",
+  "drawers-trigger-content": "awsui_drawers-trigger-content_hyvsj_17ek5_265",
+  "drawers-trigger-overflow": "awsui_drawers-trigger-overflow_hyvsj_17ek5_279",
+  "drawers-trigger": "awsui_drawers-trigger_hyvsj_17ek5_265",
+  "drawer": "awsui_drawer_hyvsj_17ek5_172",
+  "drawer-content-container": "awsui_drawer-content-container_hyvsj_17ek5_310",
+  "drawer-close-button": "awsui_drawer-close-button_hyvsj_17ek5_319",
+  "drawer-content": "awsui_drawer-content_hyvsj_17ek5_310",
+  "drawer-content-hidden": "awsui_drawer-content-hidden_hyvsj_17ek5_328",
+  "drawer-slider": "awsui_drawer-slider_hyvsj_17ek5_331",
+  "is-drawer-open": "awsui_is-drawer-open_hyvsj_17ek5_338",
+  "content": "awsui_content_hyvsj_17ek5_364",
+  "layout": "awsui_layout_hyvsj_17ek5_389",
+  "has-max-content-width": "awsui_has-max-content-width_hyvsj_17ek5_461",
+  "content-type-dashboard": "awsui_content-type-dashboard_hyvsj_17ek5_476",
+  "content-type-table": "awsui_content-type-table_hyvsj_17ek5_490",
+  "content-type-cards": "awsui_content-type-cards_hyvsj_17ek5_490",
+  "is-overlap-disabled": "awsui_is-overlap-disabled_hyvsj_17ek5_496",
+  "is-hide-mobile-toolbar": "awsui_is-hide-mobile-toolbar_hyvsj_17ek5_499",
+  "has-content-gap-left": "awsui_has-content-gap-left_hyvsj_17ek5_513",
+  "has-content-gap-right": "awsui_has-content-gap-right_hyvsj_17ek5_516",
+  "has-breadcrumbs": "awsui_has-breadcrumbs_hyvsj_17ek5_526",
+  "content-first-child-header": "awsui_content-first-child-header_hyvsj_17ek5_529",
+  "content-first-child-notifications": "awsui_content-first-child-notifications_hyvsj_17ek5_529",
+  "has-header": "awsui_has-header_hyvsj_17ek5_529",
+  "content-first-child-main": "awsui_content-first-child-main_hyvsj_17ek5_544",
+  "disable-content-paddings": "awsui_disable-content-paddings_hyvsj_17ek5_544",
+  "has-left-toggles-gutter": "awsui_has-left-toggles-gutter_hyvsj_17ek5_564",
+  "has-right-toggles-gutter": "awsui_has-right-toggles-gutter_hyvsj_17ek5_567",
+  "has-split-panel": "awsui_has-split-panel_hyvsj_17ek5_587",
+  "split-panel-position-bottom": "awsui_split-panel-position-bottom_hyvsj_17ek5_587",
+  "block-body-scroll": "awsui_block-body-scroll_hyvsj_17ek5_595",
+  "unfocusable": "awsui_unfocusable_hyvsj_17ek5_600",
+  "container": "awsui_container_hyvsj_17ek5_610",
+  "is-navigation-open": "awsui_is-navigation-open_hyvsj_17ek5_636",
+  "is-tools-open": "awsui_is-tools-open_hyvsj_17ek5_639",
+  "is-split-panel-open": "awsui_is-split-panel-open_hyvsj_17ek5_639",
+  "split-panel-position-side": "awsui_split-panel-position-side_hyvsj_17ek5_639",
+  "has-active-drawer": "awsui_has-active-drawer_hyvsj_17ek5_639",
+  "mobile-toolbar": "awsui_mobile-toolbar_hyvsj_17ek5_652",
+  "remove-high-contrast-header": "awsui_remove-high-contrast-header_hyvsj_17ek5_669",
+  "mobile-toolbar-nav": "awsui_mobile-toolbar-nav_hyvsj_17ek5_673",
+  "mobile-toolbar-breadcrumbs": "awsui_mobile-toolbar-breadcrumbs_hyvsj_17ek5_677",
+  "mobile-toolbar-tools": "awsui_mobile-toolbar-tools_hyvsj_17ek5_681",
+  "navigation-container": "awsui_navigation-container_hyvsj_17ek5_690",
+  "show-navigation": "awsui_show-navigation_hyvsj_17ek5_728",
+  "animating": "awsui_animating_hyvsj_17ek5_751",
+  "showButtons": "awsui_showButtons_hyvsj_17ek5_1",
+  "navigation": "awsui_navigation_hyvsj_17ek5_690",
+  "openNavigation": "awsui_openNavigation_hyvsj_17ek5_1",
+  "animated-content": "awsui_animated-content_hyvsj_17ek5_815",
+  "content-container": "awsui_content-container_hyvsj_17ek5_818",
+  "hide-navigation": "awsui_hide-navigation_hyvsj_17ek5_827",
+  "notifications": "awsui_notifications_hyvsj_17ek5_837",
+  "has-notification-content": "awsui_has-notification-content_hyvsj_17ek5_842",
+  "sticky-notifications": "awsui_sticky-notifications_hyvsj_17ek5_846",
+  "high-contrast": "awsui_high-contrast_hyvsj_17ek5_851",
+  "split-panel-bottom": "awsui_split-panel-bottom_hyvsj_17ek5_869",
+  "position-bottom": "awsui_position-bottom_hyvsj_17ek5_916",
+  "openSplitPanelBottom": "awsui_openSplitPanelBottom_hyvsj_17ek5_1",
+  "split-panel-side": "awsui_split-panel-side_hyvsj_17ek5_945",
+  "position-side": "awsui_position-side_hyvsj_17ek5_958",
+  "tools-container": "awsui_tools-container_hyvsj_17ek5_980",
+  "tools": "awsui_tools_hyvsj_17ek5_980",
+  "openTools": "awsui_openTools_hyvsj_17ek5_1",
+  "has-tools-form-persistence": "awsui_has-tools-form-persistence_hyvsj_17ek5_1069",
+  "hide-tools": "awsui_hide-tools_hyvsj_17ek5_1079",
+  "show-tools": "awsui_show-tools_hyvsj_17ek5_1091",
+  "has-tools-form": "awsui_has-tools-form_hyvsj_17ek5_1069",
+  "trigger-button-styles": "awsui_trigger-button-styles_hyvsj_17ek5_1174",
+  "trigger-badge-wrapper": "awsui_trigger-badge-wrapper_hyvsj_17ek5_1190",
+  "trigger": "awsui_trigger_hyvsj_17ek5_1174",
+  "selected": "awsui_selected_hyvsj_17ek5_1242",
+  "badge": "awsui_badge_hyvsj_17ek5_1262",
+  "trigger-wrapper": "awsui_trigger-wrapper_hyvsj_17ek5_1266",
+  "trigger-wrapper-tooltip-visible": "awsui_trigger-wrapper-tooltip-visible_hyvsj_17ek5_1277",
+  "dot": "awsui_dot_hyvsj_17ek5_1281",
+  "trigger-tooltip": "awsui_trigger-tooltip_hyvsj_17ek5_1294"
 };