@cloudscape-design/components 3.0.283 → 3.0.285

package/app-layout/mobile-toolbar/index.js

@@ -12,7 +12,7 @@ const MobileToggle = React.forwardRef(({ className, ariaLabels, type, disabled,
     return (React.createElement(TagName, { className: clsx(styles['mobile-toggle']), "aria-hidden": disabled, "aria-label": mainLabel, onClick: e => e.target === e.currentTarget && onClick() },
         React.createElement(AppLayoutButton, { ref: ref, className: className, iconName: iconName, onClick: onClick, ariaLabel: openLabel, disabled: disabled, ariaExpanded: disabled })));
 });
-export function MobileToolbar({ ariaLabels = {}, toggleRefs, topOffset, navigationHide, toolsHide, anyPanelOpen = false, unfocusable, children, onNavigationOpen, onToolsOpen, drawers, }) {
+export function MobileToolbar({ ariaLabels = {}, toggleRefs, topOffset, navigationHide, toolsHide, anyPanelOpen = false, unfocusable, children, onNavigationOpen, onToolsOpen, drawers, mobileBarRef, }) {
     useEffect(() => {
         if (anyPanelOpen) {
             document.body.classList.add(styles['block-body-scroll']);
@@ -24,7 +24,7 @@ export function MobileToolbar({ ariaLabels = {}, toggleRefs, topOffset, navigati
             document.body.classList.remove(styles['block-body-scroll']);
         }
     }, [anyPanelOpen]);
-    return (React.createElement("div", { className: clsx(styles['mobile-bar'], unfocusable && sharedStyles.unfocusable), style: { top: topOffset } },
+    return (React.createElement("div", { ref: mobileBarRef, className: clsx(styles['mobile-bar'], unfocusable && sharedStyles.unfocusable), style: { top: topOffset } },
         !navigationHide && (React.createElement(MobileToggle, { ref: toggleRefs.navigation, type: "navigation", className: testutilStyles['navigation-toggle'], ariaLabels: ariaLabels, disabled: anyPanelOpen, onClick: onNavigationOpen })),
         React.createElement("div", { className: styles['mobile-bar-breadcrumbs'] }, children && React.createElement("div", { className: testutilStyles.breadcrumbs }, children)),
         !toolsHide && !drawers && (React.createElement(MobileToggle, { ref: toggleRefs.tools, type: "tools", className: testutilStyles['tools-toggle'], ariaLabels: ariaLabels, disabled: anyPanelOpen, onClick: onToolsOpen })),

package/app-layout/mobile-toolbar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["app-layout/mobile-toolbar/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIzC,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAC5C,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAQ3D,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CACnC,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAqB,EAAE,GAA+B,EAAE,EAAE;IACzG,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAC7D,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,SAAS,CAAC,UAAU,CAAC,CAAC;IAEvD,OAAO,CACL,oBAAC,OAAO,IACN,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,iBAC3B,QAAQ,gBACT,SAAS,EACrB,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,aAAa,IAAI,OAAO,EAAE;QAEvD,oBAAC,eAAe,IACd,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,QAAQ,GACtB,CACM,CACX,CAAC;AACJ,CAAC,CACF,CAAC;AAuBF,MAAM,UAAU,aAAa,CAAC,EAC5B,UAAU,GAAG,EAAE,EACf,UAAU,EACV,SAAS,EACT,cAAc,EACd,SAAS,EACT,YAAY,GAAG,KAAK,EACpB,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,WAAW,EACX,OAAO,GACY;IACnB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,YAAY,EAAE;YAChB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC,CAAC;YACzD,OAAO,GAAG,EAAE;gBACV,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC,CAAC;YAC9D,CAAC,CAAC;SACH;aAAM;YACL,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC,CAAC;SAC7D;IACH,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IACnB,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE,WAAW,IAAI,YAAY,CAAC,WAAW,CAAC,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE;QAC3G,CAAC,cAAc,IAAI,CAClB,oBAAC,YAAY,IACX,GAAG,EAAE,UAAU,CAAC,UAAU,EAC1B,IAAI,EAAC,YAAY,EACjB,SAAS,EAAE,cAAc,CAAC,mBAAmB,CAAC,EAC9C,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,gBAAgB,GACzB,CACH;QACD,6BAAK,SAAS,EAAE,MAAM,CAAC,wBAAwB,CAAC,IAC7C,QAAQ,IAAI,6BAAK,SAAS,EAAE,cAAc,CAAC,WAAW,IAAG,QAAQ,CAAO,CACrE;QACL,CAAC,SAAS,IAAI,CAAC,OAAO,IAAI,CACzB,oBAAC,YAAY,IACX,GAAG,EAAE,UAAU,CAAC,KAAK,EACrB,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,cAAc,CAAC,cAAc,CAAC,EACzC,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,WAAW,GACpB,CACH;QACA,OAAO,IAAI,CACV,6CACc,OAAO,CAAC,SAAS,EAC7B,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,eAAe,CAAC,EACvB,MAAM,CAAC,4BAA4B,CAAC,EACpC,cAAc,CAAC,mCAAmC,CAAC,CACpD,IAEA,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAgB,EAAE,KAAa,EAAE,EAAE;;YAAC,OAAA,CACtD,oBAAC,eAAe,IACd,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,6BAA6B,CAAC,EAAE,cAAc,CAAC,iBAAiB,CAAC,CAAC,EACzF,GAAG,EAAE,kBAAkB,KAAK,EAAE,EAC9B,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,QAAQ,EAC/B,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO,EAC7B,SAAS,EAAE,MAAA,IAAI,CAAC,UAAU,0CAAE,aAAa,EACzC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,cAAc,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,EAC5D,YAAY,EAAE,OAAO,CAAC,cAAc,KAAK,SAAS,GAClD,CACH,CAAA;SAAA,CAAC,CACI,CACT,CACG,CACP,CAAC;AACJ,CAAC","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 } from 'react';\nimport { ButtonProps } from '../../button/interfaces';\nimport { AppLayoutProps } from '../interfaces';\nimport { DrawerItem } from '../drawer/interfaces';\nimport { AppLayoutButton, togglesConfig } from '../toggles';\nimport styles from './styles.css.js';\nimport sharedStyles from '../styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\ninterface MobileToggleProps {\n  className?: string;\n  ariaLabels?: AppLayoutProps.Labels;\n  type: keyof typeof togglesConfig;\n  disabled?: boolean;\n  onClick: () => void;\n}\nconst MobileToggle = React.forwardRef(\n  ({ className, ariaLabels, type, disabled, onClick }: MobileToggleProps, ref: React.Ref<ButtonProps.Ref>) => {\n    const { TagName, iconName, getLabels } = togglesConfig[type];\n    const { mainLabel, openLabel } = getLabels(ariaLabels);\n\n    return (\n      <TagName\n        className={clsx(styles['mobile-toggle'])}\n        aria-hidden={disabled}\n        aria-label={mainLabel}\n        onClick={e => e.target === e.currentTarget && onClick()}\n      >\n        <AppLayoutButton\n          ref={ref}\n          className={className}\n          iconName={iconName}\n          onClick={onClick}\n          ariaLabel={openLabel}\n          disabled={disabled}\n          ariaExpanded={disabled}\n        />\n      </TagName>\n    );\n  }\n);\ninterface MobileToolbarProps {\n  anyPanelOpen: boolean | undefined;\n  unfocusable: boolean | undefined;\n  toggleRefs: {\n    navigation: React.Ref<ButtonProps.Ref>;\n    tools: React.Ref<ButtonProps.Ref>;\n  };\n  navigationHide: boolean | undefined;\n  toolsHide: boolean | undefined;\n  topOffset?: number;\n  ariaLabels?: AppLayoutProps.Labels;\n  children: React.ReactNode;\n  onNavigationOpen: () => void;\n  onToolsOpen: () => void;\n  drawers?: {\n    items: Array<DrawerItem>;\n    activeDrawerId: string | undefined;\n    onChange: (changeDetail: { activeDrawerId: string | undefined }) => void;\n    ariaLabel?: string;\n  };\n}\n\nexport function MobileToolbar({\n  ariaLabels = {},\n  toggleRefs,\n  topOffset,\n  navigationHide,\n  toolsHide,\n  anyPanelOpen = false,\n  unfocusable,\n  children,\n  onNavigationOpen,\n  onToolsOpen,\n  drawers,\n}: MobileToolbarProps) {\n  useEffect(() => {\n    if (anyPanelOpen) {\n      document.body.classList.add(styles['block-body-scroll']);\n      return () => {\n        document.body.classList.remove(styles['block-body-scroll']);\n      };\n    } else {\n      document.body.classList.remove(styles['block-body-scroll']);\n    }\n  }, [anyPanelOpen]);\n  return (\n    <div className={clsx(styles['mobile-bar'], unfocusable && sharedStyles.unfocusable)} style={{ top: topOffset }}>\n      {!navigationHide && (\n        <MobileToggle\n          ref={toggleRefs.navigation}\n          type=\"navigation\"\n          className={testutilStyles['navigation-toggle']}\n          ariaLabels={ariaLabels}\n          disabled={anyPanelOpen}\n          onClick={onNavigationOpen}\n        />\n      )}\n      <div className={styles['mobile-bar-breadcrumbs']}>\n        {children && <div className={testutilStyles.breadcrumbs}>{children}</div>}\n      </div>\n      {!toolsHide && !drawers && (\n        <MobileToggle\n          ref={toggleRefs.tools}\n          type=\"tools\"\n          className={testutilStyles['tools-toggle']}\n          ariaLabels={ariaLabels}\n          disabled={anyPanelOpen}\n          onClick={onToolsOpen}\n        />\n      )}\n      {drawers && (\n        <aside\n          aria-label={drawers.ariaLabel}\n          className={clsx(\n            styles['mobile-toggle'],\n            styles['mobile-toggle-with-drawers'],\n            testutilStyles['drawers-mobile-triggers-container']\n          )}\n        >\n          {drawers.items.map((item: DrawerItem, index: number) => (\n            <AppLayoutButton\n              className={clsx(styles['mobile-trigger-with-drawers'], testutilStyles['drawers-trigger'])}\n              key={`drawer-trigger-${index}`}\n              iconName={item.trigger.iconName}\n              iconSvg={item.trigger.iconSvg}\n              ariaLabel={item.ariaLabels?.triggerButton}\n              onClick={() => drawers.onChange({ activeDrawerId: item.id })}\n              ariaExpanded={drawers.activeDrawerId !== undefined}\n            />\n          ))}\n        </aside>\n      )}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["app-layout/mobile-toolbar/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 clsx from 'clsx';\nimport React, { useEffect } from 'react';\nimport { ButtonProps } from '../../button/interfaces';\nimport { AppLayoutProps } from '../interfaces';\nimport { DrawerItem } from '../drawer/interfaces';\nimport { AppLayoutButton, togglesConfig } from '../toggles';\nimport styles from './styles.css.js';\nimport sharedStyles from '../styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\ninterface MobileToggleProps {\n  className?: string;\n  ariaLabels?: AppLayoutProps.Labels;\n  type: keyof typeof togglesConfig;\n  disabled?: boolean;\n  onClick: () => void;\n}\nconst MobileToggle = React.forwardRef(\n  ({ className, ariaLabels, type, disabled, onClick }: MobileToggleProps, ref: React.Ref<ButtonProps.Ref>) => {\n    const { TagName, iconName, getLabels } = togglesConfig[type];\n    const { mainLabel, openLabel } = getLabels(ariaLabels);\n\n    return (\n      <TagName\n        className={clsx(styles['mobile-toggle'])}\n        aria-hidden={disabled}\n        aria-label={mainLabel}\n        onClick={e => e.target === e.currentTarget && onClick()}\n      >\n        <AppLayoutButton\n          ref={ref}\n          className={className}\n          iconName={iconName}\n          onClick={onClick}\n          ariaLabel={openLabel}\n          disabled={disabled}\n          ariaExpanded={disabled}\n        />\n      </TagName>\n    );\n  }\n);\ninterface MobileToolbarProps {\n  anyPanelOpen: boolean | undefined;\n  unfocusable: boolean | undefined;\n  toggleRefs: {\n    navigation: React.Ref<ButtonProps.Ref>;\n    tools: React.Ref<ButtonProps.Ref>;\n  };\n  navigationHide: boolean | undefined;\n  toolsHide: boolean | undefined;\n  topOffset?: number;\n  ariaLabels?: AppLayoutProps.Labels;\n  mobileBarRef: React.Ref<HTMLDivElement>;\n  children: React.ReactNode;\n  onNavigationOpen: () => void;\n  onToolsOpen: () => void;\n  drawers?: {\n    items: Array<DrawerItem>;\n    activeDrawerId: string | undefined;\n    onChange: (changeDetail: { activeDrawerId: string | undefined }) => void;\n    ariaLabel?: string;\n  };\n}\n\nexport function MobileToolbar({\n  ariaLabels = {},\n  toggleRefs,\n  topOffset,\n  navigationHide,\n  toolsHide,\n  anyPanelOpen = false,\n  unfocusable,\n  children,\n  onNavigationOpen,\n  onToolsOpen,\n  drawers,\n  mobileBarRef,\n}: MobileToolbarProps) {\n  useEffect(() => {\n    if (anyPanelOpen) {\n      document.body.classList.add(styles['block-body-scroll']);\n      return () => {\n        document.body.classList.remove(styles['block-body-scroll']);\n      };\n    } else {\n      document.body.classList.remove(styles['block-body-scroll']);\n    }\n  }, [anyPanelOpen]);\n  return (\n    <div\n      ref={mobileBarRef}\n      className={clsx(styles['mobile-bar'], unfocusable && sharedStyles.unfocusable)}\n      style={{ top: topOffset }}\n    >\n      {!navigationHide && (\n        <MobileToggle\n          ref={toggleRefs.navigation}\n          type=\"navigation\"\n          className={testutilStyles['navigation-toggle']}\n          ariaLabels={ariaLabels}\n          disabled={anyPanelOpen}\n          onClick={onNavigationOpen}\n        />\n      )}\n      <div className={styles['mobile-bar-breadcrumbs']}>\n        {children && <div className={testutilStyles.breadcrumbs}>{children}</div>}\n      </div>\n      {!toolsHide && !drawers && (\n        <MobileToggle\n          ref={toggleRefs.tools}\n          type=\"tools\"\n          className={testutilStyles['tools-toggle']}\n          ariaLabels={ariaLabels}\n          disabled={anyPanelOpen}\n          onClick={onToolsOpen}\n        />\n      )}\n      {drawers && (\n        <aside\n          aria-label={drawers.ariaLabel}\n          className={clsx(\n            styles['mobile-toggle'],\n            styles['mobile-toggle-with-drawers'],\n            testutilStyles['drawers-mobile-triggers-container']\n          )}\n        >\n          {drawers.items.map((item: DrawerItem, index: number) => (\n            <AppLayoutButton\n              className={clsx(styles['mobile-trigger-with-drawers'], testutilStyles['drawers-trigger'])}\n              key={`drawer-trigger-${index}`}\n              iconName={item.trigger.iconName}\n              iconSvg={item.trigger.iconSvg}\n              ariaLabel={item.ariaLabels?.triggerButton}\n              onClick={() => drawers.onChange({ activeDrawerId: item.id })}\n              ariaExpanded={drawers.activeDrawerId !== undefined}\n            />\n          ))}\n        </aside>\n      )}\n    </div>\n  );\n}\n"]}

package/app-layout/notifications/styles.css.js

@@ -1,8 +1,8 @@
 
     import './styles.scoped.css';
     export default {
-  "notifications": "awsui_notifications_1hmm4_1tp3h_9",
-  "notifications-sticky": "awsui_notifications-sticky_1hmm4_1tp3h_10",
-  "no-content-paddings": "awsui_no-content-paddings_1hmm4_1tp3h_25"
+  "notifications": "awsui_notifications_1hmm4_1w4q6_9",
+  "notifications-sticky": "awsui_notifications-sticky_1hmm4_1w4q6_10",
+  "no-content-paddings": "awsui_no-content-paddings_1hmm4_1w4q6_25"
 };
   

package/app-layout/notifications/styles.scoped.css

@@ -6,26 +6,26 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_notifications_1hmm4_1tp3h_9:not(#\9),
-.awsui_notifications-sticky_1hmm4_1tp3h_10:not(#\9) {
+.awsui_notifications_1hmm4_1w4q6_9:not(#\9),
+.awsui_notifications-sticky_1hmm4_1w4q6_10:not(#\9) {
   z-index: 850;
 }
 
-.awsui_notifications_1hmm4_1tp3h_9:not(#\9) {
+.awsui_notifications_1hmm4_1w4q6_9:not(#\9) {
   /* This is necessary for the z-index to have effect */
   position: relative;
 }
 
-.awsui_notifications-sticky_1hmm4_1tp3h_10:not(#\9) {
+.awsui_notifications-sticky_1hmm4_1w4q6_10:not(#\9) {
   top: 0;
   position: sticky;
-  --awsui-flashbar-sticky-bottom-margin-3j0evk: var(--space-xxl-2nvmf1, 32px);
+  --awsui-flashbar-sticky-bottom-margin-rrnppm: var(--space-xxl-2nvmf1, 32px);
 }
 
-.awsui_no-content-paddings_1hmm4_1tp3h_25:not(#\9) {
+.awsui_no-content-paddings_1hmm4_1w4q6_25:not(#\9) {
   /*
   When using the disableContentPaddings option, the Flashbar will use this custom property to add additional space
   when the notification bar is rendered, to prevent it from overlapping the content.
    */
-  --awsui-stacked-notifications-bottom-margin-3j0evk: var(--space-scaled-l-t03y3z, 20px);
+  --awsui-stacked-notifications-bottom-margin-rrnppm: var(--space-scaled-l-t03y3z, 20px);
 }

package/app-layout/notifications/styles.selectors.js

@@ -2,8 +2,8 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "notifications": "awsui_notifications_1hmm4_1tp3h_9",
-  "notifications-sticky": "awsui_notifications-sticky_1hmm4_1tp3h_10",
-  "no-content-paddings": "awsui_no-content-paddings_1hmm4_1tp3h_25"
+  "notifications": "awsui_notifications_1hmm4_1w4q6_9",
+  "notifications-sticky": "awsui_notifications-sticky_1hmm4_1w4q6_10",
+  "no-content-paddings": "awsui_no-content-paddings_1hmm4_1w4q6_25"
 };
   

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

@@ -1,77 +1,77 @@
 
     import './styles.scoped.css';
     export default {
-  "appbar": "awsui_appbar_hyvsj_117n2_93",
-  "appbar-nav": "awsui_appbar-nav_hyvsj_117n2_117",
-  "breadcrumbs": "awsui_breadcrumbs_hyvsj_117n2_121",
-  "appbar-tools": "awsui_appbar-tools_hyvsj_117n2_125",
-  "drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_hyvsj_117n2_126",
-  "has-breadcrumbs": "awsui_has-breadcrumbs_hyvsj_117n2_167",
-  "has-notifications-content": "awsui_has-notifications-content_hyvsj_117n2_175",
-  "has-header": "awsui_has-header_hyvsj_117n2_181",
-  "has-dynamic-overlap-height": "awsui_has-dynamic-overlap-height_hyvsj_117n2_181",
-  "content-type-wizard": "awsui_content-type-wizard_hyvsj_117n2_182",
-  "content-type-cards": "awsui_content-type-cards_hyvsj_117n2_185",
-  "content-type-table": "awsui_content-type-table_hyvsj_117n2_186",
-  "has-sticky-background": "awsui_has-sticky-background_hyvsj_117n2_189",
-  "background": "awsui_background_hyvsj_117n2_224",
-  "notifications-appbar-header": "awsui_notifications-appbar-header_hyvsj_117n2_227",
-  "sticky-notifications": "awsui_sticky-notifications_hyvsj_117n2_240",
-  "overlap": "awsui_overlap_hyvsj_117n2_246",
-  "drawers-container": "awsui_drawers-container_hyvsj_117n2_274",
-  "has-open-drawer": "awsui_has-open-drawer_hyvsj_117n2_286",
-  "disable-body-scroll": "awsui_disable-body-scroll_hyvsj_117n2_320",
-  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_hyvsj_117n2_325",
-  "has-multiple-triggers": "awsui_has-multiple-triggers_hyvsj_117n2_343",
-  "drawers-trigger-content": "awsui_drawers-trigger-content_hyvsj_117n2_375",
-  "drawers-trigger": "awsui_drawers-trigger_hyvsj_117n2_375",
-  "drawer": "awsui_drawer_hyvsj_117n2_126",
-  "drawer-close-button": "awsui_drawer-close-button_hyvsj_117n2_426",
-  "drawer-content": "awsui_drawer-content_hyvsj_117n2_431",
-  "is-drawer-open": "awsui_is-drawer-open_hyvsj_117n2_436",
-  "content": "awsui_content_hyvsj_117n2_182",
-  "layout": "awsui_layout_hyvsj_117n2_534",
-  "has-max-content-width": "awsui_has-max-content-width_hyvsj_117n2_617",
-  "content-type-dashboard": "awsui_content-type-dashboard_hyvsj_117n2_632",
-  "is-overlap-disabled": "awsui_is-overlap-disabled_hyvsj_117n2_659",
-  "has-sticky-notifications": "awsui_has-sticky-notifications_hyvsj_117n2_666",
-  "has-split-panel": "awsui_has-split-panel_hyvsj_117n2_680",
-  "split-panel-position-bottom": "awsui_split-panel-position-bottom_hyvsj_117n2_680",
-  "has-content-gap-left": "awsui_has-content-gap-left_hyvsj_117n2_692",
-  "has-content-gap-right": "awsui_has-content-gap-right_hyvsj_117n2_695",
-  "block-body-scroll": "awsui_block-body-scroll_hyvsj_117n2_710",
-  "container": "awsui_container_hyvsj_117n2_718",
-  "disable-content-paddings": "awsui_disable-content-paddings_hyvsj_117n2_744",
-  "is-navigation-open": "awsui_is-navigation-open_hyvsj_117n2_749",
-  "is-tools-open": "awsui_is-tools-open_hyvsj_117n2_752",
-  "is-split-panel-open": "awsui_is-split-panel-open_hyvsj_117n2_752",
-  "split-panel-position-side": "awsui_split-panel-position-side_hyvsj_117n2_752",
-  "content-type-default": "awsui_content-type-default_hyvsj_117n2_772",
-  "content-type-form": "awsui_content-type-form_hyvsj_117n2_772",
-  "unfocusable": "awsui_unfocusable_hyvsj_117n2_813",
-  "navigation-container": "awsui_navigation-container_hyvsj_117n2_823",
-  "show-navigation": "awsui_show-navigation_hyvsj_117n2_867",
-  "animating": "awsui_animating_hyvsj_117n2_889",
-  "showButtons": "awsui_showButtons_hyvsj_117n2_1",
-  "navigation": "awsui_navigation_hyvsj_117n2_823",
-  "openNavigation": "awsui_openNavigation_hyvsj_117n2_1",
-  "animated-content": "awsui_animated-content_hyvsj_117n2_950",
-  "hide-navigation": "awsui_hide-navigation_hyvsj_117n2_959",
-  "notifications": "awsui_notifications_hyvsj_117n2_227",
-  "split-panel-bottom": "awsui_split-panel-bottom_hyvsj_117n2_1026",
-  "position-bottom": "awsui_position-bottom_hyvsj_117n2_1072",
-  "openSplitPanelBottom": "awsui_openSplitPanelBottom_hyvsj_117n2_1",
-  "split-panel-side": "awsui_split-panel-side_hyvsj_117n2_1101",
-  "position-side": "awsui_position-side_hyvsj_117n2_1129",
-  "openSplitPanelSide": "awsui_openSplitPanelSide_hyvsj_117n2_1",
-  "tools-container": "awsui_tools-container_hyvsj_117n2_1166",
-  "tools": "awsui_tools_hyvsj_117n2_1166",
-  "openTools": "awsui_openTools_hyvsj_117n2_1",
-  "has-tools-form-persistence": "awsui_has-tools-form-persistence_hyvsj_117n2_1260",
-  "hide-tools": "awsui_hide-tools_hyvsj_117n2_1270",
-  "show-tools": "awsui_show-tools_hyvsj_117n2_1282",
-  "has-tools-form": "awsui_has-tools-form_hyvsj_117n2_1260",
-  "trigger": "awsui_trigger_hyvsj_117n2_1349",
-  "selected": "awsui_selected_hyvsj_117n2_1388"
+  "appbar": "awsui_appbar_hyvsj_a6htg_93",
+  "appbar-nav": "awsui_appbar-nav_hyvsj_a6htg_117",
+  "breadcrumbs": "awsui_breadcrumbs_hyvsj_a6htg_121",
+  "appbar-tools": "awsui_appbar-tools_hyvsj_a6htg_125",
+  "drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_hyvsj_a6htg_126",
+  "has-breadcrumbs": "awsui_has-breadcrumbs_hyvsj_a6htg_167",
+  "has-notifications-content": "awsui_has-notifications-content_hyvsj_a6htg_175",
+  "has-header": "awsui_has-header_hyvsj_a6htg_181",
+  "has-dynamic-overlap-height": "awsui_has-dynamic-overlap-height_hyvsj_a6htg_181",
+  "content-type-wizard": "awsui_content-type-wizard_hyvsj_a6htg_182",
+  "content-type-cards": "awsui_content-type-cards_hyvsj_a6htg_185",
+  "content-type-table": "awsui_content-type-table_hyvsj_a6htg_186",
+  "has-sticky-background": "awsui_has-sticky-background_hyvsj_a6htg_189",
+  "background": "awsui_background_hyvsj_a6htg_224",
+  "notifications-appbar-header": "awsui_notifications-appbar-header_hyvsj_a6htg_227",
+  "sticky-notifications": "awsui_sticky-notifications_hyvsj_a6htg_240",
+  "overlap": "awsui_overlap_hyvsj_a6htg_246",
+  "drawers-container": "awsui_drawers-container_hyvsj_a6htg_274",
+  "has-open-drawer": "awsui_has-open-drawer_hyvsj_a6htg_286",
+  "disable-body-scroll": "awsui_disable-body-scroll_hyvsj_a6htg_320",
+  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_hyvsj_a6htg_325",
+  "has-multiple-triggers": "awsui_has-multiple-triggers_hyvsj_a6htg_343",
+  "drawers-trigger-content": "awsui_drawers-trigger-content_hyvsj_a6htg_375",
+  "drawers-trigger": "awsui_drawers-trigger_hyvsj_a6htg_375",
+  "drawer": "awsui_drawer_hyvsj_a6htg_126",
+  "drawer-close-button": "awsui_drawer-close-button_hyvsj_a6htg_426",
+  "drawer-content": "awsui_drawer-content_hyvsj_a6htg_431",
+  "is-drawer-open": "awsui_is-drawer-open_hyvsj_a6htg_436",
+  "content": "awsui_content_hyvsj_a6htg_182",
+  "layout": "awsui_layout_hyvsj_a6htg_534",
+  "has-max-content-width": "awsui_has-max-content-width_hyvsj_a6htg_618",
+  "content-type-dashboard": "awsui_content-type-dashboard_hyvsj_a6htg_633",
+  "is-overlap-disabled": "awsui_is-overlap-disabled_hyvsj_a6htg_660",
+  "has-sticky-notifications": "awsui_has-sticky-notifications_hyvsj_a6htg_667",
+  "has-split-panel": "awsui_has-split-panel_hyvsj_a6htg_681",
+  "split-panel-position-bottom": "awsui_split-panel-position-bottom_hyvsj_a6htg_681",
+  "has-content-gap-left": "awsui_has-content-gap-left_hyvsj_a6htg_693",
+  "has-content-gap-right": "awsui_has-content-gap-right_hyvsj_a6htg_696",
+  "block-body-scroll": "awsui_block-body-scroll_hyvsj_a6htg_711",
+  "container": "awsui_container_hyvsj_a6htg_719",
+  "disable-content-paddings": "awsui_disable-content-paddings_hyvsj_a6htg_745",
+  "is-navigation-open": "awsui_is-navigation-open_hyvsj_a6htg_750",
+  "is-tools-open": "awsui_is-tools-open_hyvsj_a6htg_753",
+  "is-split-panel-open": "awsui_is-split-panel-open_hyvsj_a6htg_753",
+  "split-panel-position-side": "awsui_split-panel-position-side_hyvsj_a6htg_753",
+  "content-type-default": "awsui_content-type-default_hyvsj_a6htg_773",
+  "content-type-form": "awsui_content-type-form_hyvsj_a6htg_773",
+  "unfocusable": "awsui_unfocusable_hyvsj_a6htg_814",
+  "navigation-container": "awsui_navigation-container_hyvsj_a6htg_824",
+  "show-navigation": "awsui_show-navigation_hyvsj_a6htg_868",
+  "animating": "awsui_animating_hyvsj_a6htg_890",
+  "showButtons": "awsui_showButtons_hyvsj_a6htg_1",
+  "navigation": "awsui_navigation_hyvsj_a6htg_824",
+  "openNavigation": "awsui_openNavigation_hyvsj_a6htg_1",
+  "animated-content": "awsui_animated-content_hyvsj_a6htg_951",
+  "hide-navigation": "awsui_hide-navigation_hyvsj_a6htg_960",
+  "notifications": "awsui_notifications_hyvsj_a6htg_227",
+  "split-panel-bottom": "awsui_split-panel-bottom_hyvsj_a6htg_1027",
+  "position-bottom": "awsui_position-bottom_hyvsj_a6htg_1073",
+  "openSplitPanelBottom": "awsui_openSplitPanelBottom_hyvsj_a6htg_1",
+  "split-panel-side": "awsui_split-panel-side_hyvsj_a6htg_1102",
+  "position-side": "awsui_position-side_hyvsj_a6htg_1130",
+  "openSplitPanelSide": "awsui_openSplitPanelSide_hyvsj_a6htg_1",
+  "tools-container": "awsui_tools-container_hyvsj_a6htg_1167",
+  "tools": "awsui_tools_hyvsj_a6htg_1167",
+  "openTools": "awsui_openTools_hyvsj_a6htg_1",
+  "has-tools-form-persistence": "awsui_has-tools-form-persistence_hyvsj_a6htg_1261",
+  "hide-tools": "awsui_hide-tools_hyvsj_a6htg_1271",
+  "show-tools": "awsui_show-tools_hyvsj_a6htg_1283",
+  "has-tools-form": "awsui_has-tools-form_hyvsj_a6htg_1261",
+  "trigger": "awsui_trigger_hyvsj_a6htg_1350",
+  "selected": "awsui_selected_hyvsj_a6htg_1389"
 };