npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.1223 → 3.0.1225 - Mend

@cloudscape-design/components-themeable 3.0.1223 → 3.0.1225

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 (58) hide show

package/lib/internal/manifest.json CHANGED Viewed

@@ -1,3 +1,3 @@
 {
-  "commit": "a01000a12a87a949b7cb55935e33bc9a244cd85e"
+  "commit": "f7f12eee7554481017a5d9fcc63b20c12d44d583"
 }

package/lib/internal/scss/internal/generated/custom-css-properties/index.scss CHANGED Viewed

@@ -1,6 +1,6 @@
     // Build environment
-    $awsui-commit-hash: "a01000a1";
+    $awsui-commit-hash: "f7f12eee";
     // Manually managed CSS-variables
     $maxContentWidth: --awsui-max-content-width-n6lfw8;
 $minContentWidth: --awsui-min-content-width-n6lfw8;

package/lib/internal/scss/internal/styles/typography/mixins.scss CHANGED Viewed

@@ -38,6 +38,7 @@
   }
   font-size: awsui.$font-size-heading-xs;
   line-height: awsui.$line-height-heading-xs;
+  letter-spacing: awsui.$letter-spacing-heading-xs;
   @if $weight {
     font-weight: awsui.$font-weight-heading-xs;
     @include font-smoothing;

package/lib/internal/scss/prompt-input/styles.scss CHANGED Viewed

@@ -250,6 +250,7 @@ $invalid-border-offset: constants.$invalid-control-left-padding;
   flex-shrink: 1;
   box-sizing: border-box;
   @include styles.text-flex-wrapping;
+  padding-inline-end: awsui.$space-scaled-xxs;
   &.with-paddings {
     padding-inline: styles.$control-padding-horizontal;
     padding-block-start: awsui.$space-scaled-s;

package/lib/internal/template/app-layout/interfaces.d.ts CHANGED Viewed

@@ -38,7 +38,7 @@ export interface BaseLayoutProps extends BaseComponentProps {
      * #### DrawerAriaLabels
      * - `drawerName` (string) - Label for the drawer itself, and for the drawer trigger button tooltip text.
      * - `closeButton` (string) - (Optional) Label for the close button.
-     * - `triggerButton` (string) - (Optional) Label for the trigger button.
+     * - `triggerButton` (string) - (Optional) Label for the trigger button. When `badge` is true, include the badge information in the label (for example, "Notifications, has unread messages").
      * - `resizeHandle` (string) - (Optional) Label for the resize handle.
      */
     drawers?: Array<AppLayoutProps.Drawer>;

package/lib/internal/template/app-layout/interfaces.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/app-layout/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { IconProps } from '../icon/interfaces';\nimport { FlowType } from '../internal/analytics/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { SomeRequired } from '../internal/types';\n\nexport interface BaseLayoutProps extends BaseComponentProps {\n /*\n Specifies additional analytics-related metadata.\n * * `instanceIdentifier` - A unique string that identifies this component instance in your application.\n * * `flowType` - Identifies the type of flow represented by the component.\n * Note: This API is currently experimental.\n * @analytics\n /\n analyticsMetadata?: AppLayoutProps.AnalyticsMetadata;\n\n /\n Determines the default behavior of the component based on some predefined page layouts.\n * Individual properties will always take precedence over the default coming from the content type.\n /\n contentType?: AppLayoutProps.ContentType;\n\n /\n Drawers property. If you set both `drawers` and `tools`, `drawers` will take precedence.\n\n * Each Drawer is an item in the drawers wrapper with the following properties:\n * * id (string) - the id of the drawer.\n * * content (React.ReactNode) - the content in the drawer.\n * * trigger (DrawerTrigger) - the button that opens and closes the active drawer.\n * * ariaLabels (DrawerAriaLabels) - the labels for the interactive elements of the drawer.\n * * badge (boolean) - Adds a badge to the corner of the icon to indicate a state change. For example: Unread notifications.\n * * resizable (boolean) - if the drawer is resizable or not.\n * * defaultSize (number) - starting size of the drawer. if not set, defaults to 290.\n * * onResize (({ size: number }) => void) - Fired when the active drawer is resized.\n \n #### DrawerTrigger\n * - `iconName` (IconProps.Name) - (Optional) Specifies the icon to be displayed.\n * - `iconSvg` (React.ReactNode) - (Optional) Specifies the SVG of a custom icon. For more information, see [SVG icon guidelines](/components/icon/?tabId=api#slots)\n \n #### DrawerAriaLabels\n * - `drawerName` (string) - Label for the drawer itself, and for the drawer trigger button tooltip text.\n * - `closeButton` (string) - (Optional) Label for the close button.\n * - `triggerButton` (string) - (Optional) Label for the trigger button.\n * - `resizeHandle` (string) - (Optional) Label for the resize handle.\n /\n drawers?: Array<AppLayoutProps.Drawer>;\n\n /\n The active drawer id. If you want to clear the active drawer, use `null`.\n /\n activeDrawerId?: string \| null;\n\n /\n Fired when the active drawer is toggled.\n /\n onDrawerChange?: NonCancelableEventHandler<AppLayoutProps.DrawerChangeDetail>;\n\n /\n If `true`, disables outer paddings for the content slot.\n /\n disableContentPaddings?: boolean;\n\n /\n State of the navigation drawer.\n /\n navigationOpen?: boolean;\n\n /\n Navigation drawer width in pixels.\n /\n navigationWidth?: number;\n\n /\n If `true`, the navigation drawer is not displayed at all.\n /\n navigationHide?: boolean;\n\n /\n State of the tools drawer.\n /\n toolsOpen?: boolean;\n\n /\n If `true`, the tools drawer is not displayed at all.\n /\n toolsHide?: boolean;\n\n /\n Tools drawer width in pixels.\n /\n toolsWidth?: number;\n\n /\n Maximum main content panel width in pixels.\n \n If set to `Number.MAX_VALUE`, the main content panel will occupy the full available width.\n /\n maxContentWidth?: number;\n\n /\n Minimum main content panel width in pixels.\n /\n minContentWidth?: number;\n\n /\n If true, the notification slot is rendered above the scrollable\n * content area so it is always visible.\n /\n stickyNotifications?: boolean;\n\n /\n CSS selector for the application header.\n /\n headerSelector?: string;\n\n /\n CSS selector for the application footer.\n /\n footerSelector?: string;\n\n /\n Aria labels for the drawer operating buttons. Use this property to ensure accessibility.\n \n * `navigation` (string) - Label for the landmark that wraps the navigation drawer.\n * * `navigationClose` (string) - Label for the button that closes the navigation drawer.\n * * `navigationToggle` (string) - Label for the button that opens the navigation drawer.\n * * `notification` (string) - Label for the region that contains notification messages.\n * * `tools` (string) - Label for the landmark that wraps the tools drawer.\n * * `toolsClose` (string) - Label for the button that closes the tools drawer.\n * * `toolsToggle` (string) - Label for the button that opens the tools drawer.\n * * `drawers` (string) - Label for the landmark that wraps the active drawer.\n * * `drawersOverflow` (string) - Label for the ellipsis button with any overflow drawers.\n * * `drawersOverflowWithBadge` (string) - Label for the ellipsis button with any overflow drawers, with a badge.\n \n Example:\n * ```\n * {\n * navigation: \"Navigation drawer\",\n * navigationClose: \"Close navigation drawer\",\n * navigationToggle: \"Open navigation drawer\",\n * notifications: \"Notifications\",\n * tools: \"Help panel\",\n * toolsClose: \"Close help panel\",\n * toolsToggle: \"Open help panel\",\n * drawers: \"Drawers\",\n * drawersOverflow: \"Overflow drawers\",\n * drawersOverflowWithBadge: \"Overflow drawers (Unread notifications)\"\n * }\n * ```\n * @i18n\n /\n ariaLabels?: AppLayoutProps.Labels;\n\n /\n Navigation drawer.\n /\n navigation?: React.ReactNode;\n\n /\n Top area of the page content.\n * @deprecated Replaced by the `header` slot of the [content layout](/components/content-layout/) component.\n * @visualrefresh\n /\n contentHeader?: React.ReactNode;\n\n /\n Disables overlap between `contentHeader` and `content` slots.\n * @deprecated Replaced by the `disableOverlap` property of the [content layout](/components/content-layout/) component.\n * @visualrefresh\n /\n disableContentHeaderOverlap?: boolean;\n\n /\n Determines the visual treatment for the breadcrumbs and notifications slots. Specifically:\n * * `default` - Does not apply any visual treatment.\n * * `high-contrast` - Applies high-contrast to both slots. Use in conjunction with `headerVariant=\"high-contrast\"` in ContentLayout.\n * @visualrefresh\n /\n headerVariant?: 'default' \| 'high-contrast';\n\n /\n Main content.\n /\n content?: React.ReactNode;\n\n /\n Tools drawer.\n /\n tools?: React.ReactNode;\n\n /\n Displayed on top of the main content in the scrollable area.\n \n Conceived to contain notifications (flash messages).\n /\n notifications?: React.ReactNode;\n\n /\n Use this slot to add the [breadcrumb group component](/components/breadcrumb-group/) to the app layout.\n /\n breadcrumbs?: React.ReactNode;\n\n /\n Fired when the navigation drawer is toggled.\n /\n onNavigationChange?: NonCancelableEventHandler<AppLayoutProps.ChangeDetail>;\n\n /\n Fired when the tools drawer is toggled.\n /\n onToolsChange?: NonCancelableEventHandler<AppLayoutProps.ChangeDetail>;\n\n /\n Use this slot to add the [split panel component](/components/split-panel/) to the app layout.\n \n Note: If provided, this property should be set to `null` or `undefined` if a split panel should not be rendered.\n /\n splitPanel?: React.ReactNode;\n\n /\n The size of the split panel in pixels.\n /\n splitPanelSize?: number;\n\n /\n State of the split panel.\n /\n splitPanelOpen?: boolean;\n /\n Controls the split panel preferences.\n \n By default, the preference is `{ position: 'bottom' }`\n /\n splitPanelPreferences?: AppLayoutProps.SplitPanelPreferences;\n /\n Fired when the split panel is resized.\n /\n onSplitPanelResize?: NonCancelableEventHandler<AppLayoutProps.SplitPanelResizeDetail>;\n /\n Fired when the split panel is toggled.\n /\n onSplitPanelToggle?: NonCancelableEventHandler<AppLayoutProps.ChangeDetail>;\n /\n Fired when the split panel preferences change.\n /\n onSplitPanelPreferencesChange?: NonCancelableEventHandler<AppLayoutProps.SplitPanelPreferences>;\n}\n\nexport interface AppLayoutProps extends BaseLayoutProps {\n /\n Activates a backwards-compatibility mode for applications with non-fixed headers and footers.\n * @deprecated This layout is being phased out and may miss some features.\n /\n disableBodyScroll?: boolean;\n}\n\nexport namespace AppLayoutProps {\n export interface AnalyticsMetadata {\n instanceIdentifier?: string;\n flowType?: FlowType;\n }\n\n export type ContentType = 'default' \| 'form' \| 'table' \| 'cards' \| 'wizard' \| 'dashboard';\n\n export interface Ref {\n /\n Manually closes the navigation drawer if it is necessary for the current\n * viewport size.\n /\n closeNavigationIfNecessary(): void;\n\n /\n Opens the tools panel if it is not already open. Note that it is preferable\n * to control the state by listening to `toolsChange` and providing `toolsOpen`.\n /\n openTools(): void;\n\n /\n Focuses the tools panel if it is open. Use this to focus the tools panel\n * after changing the content, for example when clicking on an 'info' link while\n * the panel is already open.\n /\n focusToolsClose(): void;\n\n /\n Focuses the active drawer. Use this to focus the active drawer after opening it programmatically.\n /\n focusActiveDrawer(): void;\n\n /\n Focuses the split panel if it is open.\n */\n focusSplitPanel(): void;\n }\n\n export interface Drawer {\n id: string;\n content: React.ReactNode;\n trigger?: {\n iconName?: IconProps.Name;\n iconSvg?: React.ReactNode;\n customIcon?: React.ReactNode;\n };\n ariaLabels: DrawerAriaLabels;\n badge?: boolean;\n resizable?: boolean;\n defaultSize?: number;\n onResize?: NonCancelableEventHandler<{ size: number }>;\n preserveInactiveContent?: boolean;\n }\n\n export interface DrawerAriaLabels {\n drawerName: string;\n closeButton?: string;\n triggerButton?: string;\n resizeHandle?: string;\n resizeHandleTooltipText?: string;\n }\n\n export interface Labels {\n notifications?: string;\n\n navigation?: string;\n navigationToggle?: string;\n navigationClose?: string;\n\n tools?: string;\n toolsToggle?: string;\n toolsClose?: string;\n\n drawers?: string;\n drawersOverflow?: string;\n drawersOverflowWithBadge?: string;\n }\n\n export interface ChangeDetail {\n open: boolean;\n }\n\n export interface SplitPanelResizeDetail {\n size: number;\n }\n\n export interface SplitPanelPreferences {\n position: 'side' \| 'bottom';\n }\n // Duplicated the positions because using this definition in SplitPanelPreferences would display\n // 'AppLayoutProps.SplitPanelPosition' on the API docs instead of the string values.\n export type SplitPanelPosition = 'side' \| 'bottom';\n\n export interface DrawerChangeDetail {\n activeDrawerId: string \| null;\n }\n}\n\nexport type AppLayoutPropsWithDefaults = SomeRequired<\n Omit<AppLayoutProps, 'headerSelector' \| 'footerSelector'>,\n 'contentType' \| 'navigationWidth' \| 'toolsWidth' \| 'minContentWidth' \| 'navigationOpen' \| 'onNavigationChange'\n> & {\n placement: {\n insetBlockStart: number;\n insetBlockEnd: number;\n insetInlineStart: number;\n insetInlineEnd: number;\n inlineSize: number;\n };\n};\n"]}
1	+ {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/app-layout/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { IconProps } from '../icon/interfaces';\nimport { FlowType } from '../internal/analytics/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { SomeRequired } from '../internal/types';\n\nexport interface BaseLayoutProps extends BaseComponentProps {\n /*\n Specifies additional analytics-related metadata.\n * * `instanceIdentifier` - A unique string that identifies this component instance in your application.\n * * `flowType` - Identifies the type of flow represented by the component.\n * Note: This API is currently experimental.\n * @analytics\n /\n analyticsMetadata?: AppLayoutProps.AnalyticsMetadata;\n\n /\n Determines the default behavior of the component based on some predefined page layouts.\n * Individual properties will always take precedence over the default coming from the content type.\n /\n contentType?: AppLayoutProps.ContentType;\n\n /\n Drawers property. If you set both `drawers` and `tools`, `drawers` will take precedence.\n\n * Each Drawer is an item in the drawers wrapper with the following properties:\n * * id (string) - the id of the drawer.\n * * content (React.ReactNode) - the content in the drawer.\n * * trigger (DrawerTrigger) - the button that opens and closes the active drawer.\n * * ariaLabels (DrawerAriaLabels) - the labels for the interactive elements of the drawer.\n * * badge (boolean) - Adds a badge to the corner of the icon to indicate a state change. For example: Unread notifications.\n * * resizable (boolean) - if the drawer is resizable or not.\n * * defaultSize (number) - starting size of the drawer. if not set, defaults to 290.\n * * onResize (({ size: number }) => void) - Fired when the active drawer is resized.\n \n #### DrawerTrigger\n * - `iconName` (IconProps.Name) - (Optional) Specifies the icon to be displayed.\n * - `iconSvg` (React.ReactNode) - (Optional) Specifies the SVG of a custom icon. For more information, see [SVG icon guidelines](/components/icon/?tabId=api#slots)\n \n #### DrawerAriaLabels\n * - `drawerName` (string) - Label for the drawer itself, and for the drawer trigger button tooltip text.\n * - `closeButton` (string) - (Optional) Label for the close button.\n * - `triggerButton` (string) - (Optional) Label for the trigger button. When `badge` is true, include the badge information in the label (for example, \"Notifications, has unread messages\").\n * - `resizeHandle` (string) - (Optional) Label for the resize handle.\n /\n drawers?: Array<AppLayoutProps.Drawer>;\n\n /\n The active drawer id. If you want to clear the active drawer, use `null`.\n /\n activeDrawerId?: string \| null;\n\n /\n Fired when the active drawer is toggled.\n /\n onDrawerChange?: NonCancelableEventHandler<AppLayoutProps.DrawerChangeDetail>;\n\n /\n If `true`, disables outer paddings for the content slot.\n /\n disableContentPaddings?: boolean;\n\n /\n State of the navigation drawer.\n /\n navigationOpen?: boolean;\n\n /\n Navigation drawer width in pixels.\n /\n navigationWidth?: number;\n\n /\n If `true`, the navigation drawer is not displayed at all.\n /\n navigationHide?: boolean;\n\n /\n State of the tools drawer.\n /\n toolsOpen?: boolean;\n\n /\n If `true`, the tools drawer is not displayed at all.\n /\n toolsHide?: boolean;\n\n /\n Tools drawer width in pixels.\n /\n toolsWidth?: number;\n\n /\n Maximum main content panel width in pixels.\n \n If set to `Number.MAX_VALUE`, the main content panel will occupy the full available width.\n /\n maxContentWidth?: number;\n\n /\n Minimum main content panel width in pixels.\n /\n minContentWidth?: number;\n\n /\n If true, the notification slot is rendered above the scrollable\n * content area so it is always visible.\n /\n stickyNotifications?: boolean;\n\n /\n CSS selector for the application header.\n /\n headerSelector?: string;\n\n /\n CSS selector for the application footer.\n /\n footerSelector?: string;\n\n /\n Aria labels for the drawer operating buttons. Use this property to ensure accessibility.\n \n * `navigation` (string) - Label for the landmark that wraps the navigation drawer.\n * * `navigationClose` (string) - Label for the button that closes the navigation drawer.\n * * `navigationToggle` (string) - Label for the button that opens the navigation drawer.\n * * `notification` (string) - Label for the region that contains notification messages.\n * * `tools` (string) - Label for the landmark that wraps the tools drawer.\n * * `toolsClose` (string) - Label for the button that closes the tools drawer.\n * * `toolsToggle` (string) - Label for the button that opens the tools drawer.\n * * `drawers` (string) - Label for the landmark that wraps the active drawer.\n * * `drawersOverflow` (string) - Label for the ellipsis button with any overflow drawers.\n * * `drawersOverflowWithBadge` (string) - Label for the ellipsis button with any overflow drawers, with a badge.\n \n Example:\n * ```\n * {\n * navigation: \"Navigation drawer\",\n * navigationClose: \"Close navigation drawer\",\n * navigationToggle: \"Open navigation drawer\",\n * notifications: \"Notifications\",\n * tools: \"Help panel\",\n * toolsClose: \"Close help panel\",\n * toolsToggle: \"Open help panel\",\n * drawers: \"Drawers\",\n * drawersOverflow: \"Overflow drawers\",\n * drawersOverflowWithBadge: \"Overflow drawers (Unread notifications)\"\n * }\n * ```\n * @i18n\n /\n ariaLabels?: AppLayoutProps.Labels;\n\n /\n Navigation drawer.\n /\n navigation?: React.ReactNode;\n\n /\n Top area of the page content.\n * @deprecated Replaced by the `header` slot of the [content layout](/components/content-layout/) component.\n * @visualrefresh\n /\n contentHeader?: React.ReactNode;\n\n /\n Disables overlap between `contentHeader` and `content` slots.\n * @deprecated Replaced by the `disableOverlap` property of the [content layout](/components/content-layout/) component.\n * @visualrefresh\n /\n disableContentHeaderOverlap?: boolean;\n\n /\n Determines the visual treatment for the breadcrumbs and notifications slots. Specifically:\n * * `default` - Does not apply any visual treatment.\n * * `high-contrast` - Applies high-contrast to both slots. Use in conjunction with `headerVariant=\"high-contrast\"` in ContentLayout.\n * @visualrefresh\n /\n headerVariant?: 'default' \| 'high-contrast';\n\n /\n Main content.\n /\n content?: React.ReactNode;\n\n /\n Tools drawer.\n /\n tools?: React.ReactNode;\n\n /\n Displayed on top of the main content in the scrollable area.\n \n Conceived to contain notifications (flash messages).\n /\n notifications?: React.ReactNode;\n\n /\n Use this slot to add the [breadcrumb group component](/components/breadcrumb-group/) to the app layout.\n /\n breadcrumbs?: React.ReactNode;\n\n /\n Fired when the navigation drawer is toggled.\n /\n onNavigationChange?: NonCancelableEventHandler<AppLayoutProps.ChangeDetail>;\n\n /\n Fired when the tools drawer is toggled.\n /\n onToolsChange?: NonCancelableEventHandler<AppLayoutProps.ChangeDetail>;\n\n /\n Use this slot to add the [split panel component](/components/split-panel/) to the app layout.\n \n Note: If provided, this property should be set to `null` or `undefined` if a split panel should not be rendered.\n /\n splitPanel?: React.ReactNode;\n\n /\n The size of the split panel in pixels.\n /\n splitPanelSize?: number;\n\n /\n State of the split panel.\n /\n splitPanelOpen?: boolean;\n /\n Controls the split panel preferences.\n \n By default, the preference is `{ position: 'bottom' }`\n /\n splitPanelPreferences?: AppLayoutProps.SplitPanelPreferences;\n /\n Fired when the split panel is resized.\n /\n onSplitPanelResize?: NonCancelableEventHandler<AppLayoutProps.SplitPanelResizeDetail>;\n /\n Fired when the split panel is toggled.\n /\n onSplitPanelToggle?: NonCancelableEventHandler<AppLayoutProps.ChangeDetail>;\n /\n Fired when the split panel preferences change.\n /\n onSplitPanelPreferencesChange?: NonCancelableEventHandler<AppLayoutProps.SplitPanelPreferences>;\n}\n\nexport interface AppLayoutProps extends BaseLayoutProps {\n /\n Activates a backwards-compatibility mode for applications with non-fixed headers and footers.\n * @deprecated This layout is being phased out and may miss some features.\n /\n disableBodyScroll?: boolean;\n}\n\nexport namespace AppLayoutProps {\n export interface AnalyticsMetadata {\n instanceIdentifier?: string;\n flowType?: FlowType;\n }\n\n export type ContentType = 'default' \| 'form' \| 'table' \| 'cards' \| 'wizard' \| 'dashboard';\n\n export interface Ref {\n /\n Manually closes the navigation drawer if it is necessary for the current\n * viewport size.\n /\n closeNavigationIfNecessary(): void;\n\n /\n Opens the tools panel if it is not already open. Note that it is preferable\n * to control the state by listening to `toolsChange` and providing `toolsOpen`.\n /\n openTools(): void;\n\n /\n Focuses the tools panel if it is open. Use this to focus the tools panel\n * after changing the content, for example when clicking on an 'info' link while\n * the panel is already open.\n /\n focusToolsClose(): void;\n\n /\n Focuses the active drawer. Use this to focus the active drawer after opening it programmatically.\n /\n focusActiveDrawer(): void;\n\n /\n Focuses the split panel if it is open.\n */\n focusSplitPanel(): void;\n }\n\n export interface Drawer {\n id: string;\n content: React.ReactNode;\n trigger?: {\n iconName?: IconProps.Name;\n iconSvg?: React.ReactNode;\n customIcon?: React.ReactNode;\n };\n ariaLabels: DrawerAriaLabels;\n badge?: boolean;\n resizable?: boolean;\n defaultSize?: number;\n onResize?: NonCancelableEventHandler<{ size: number }>;\n preserveInactiveContent?: boolean;\n }\n\n export interface DrawerAriaLabels {\n drawerName: string;\n closeButton?: string;\n triggerButton?: string;\n resizeHandle?: string;\n resizeHandleTooltipText?: string;\n }\n\n export interface Labels {\n notifications?: string;\n\n navigation?: string;\n navigationToggle?: string;\n navigationClose?: string;\n\n tools?: string;\n toolsToggle?: string;\n toolsClose?: string;\n\n drawers?: string;\n drawersOverflow?: string;\n drawersOverflowWithBadge?: string;\n }\n\n export interface ChangeDetail {\n open: boolean;\n }\n\n export interface SplitPanelResizeDetail {\n size: number;\n }\n\n export interface SplitPanelPreferences {\n position: 'side' \| 'bottom';\n }\n // Duplicated the positions because using this definition in SplitPanelPreferences would display\n // 'AppLayoutProps.SplitPanelPosition' on the API docs instead of the string values.\n export type SplitPanelPosition = 'side' \| 'bottom';\n\n export interface DrawerChangeDetail {\n activeDrawerId: string \| null;\n }\n}\n\nexport type AppLayoutPropsWithDefaults = SomeRequired<\n Omit<AppLayoutProps, 'headerSelector' \| 'footerSelector'>,\n 'contentType' \| 'navigationWidth' \| 'toolsWidth' \| 'minContentWidth' \| 'navigationOpen' \| 'onNavigationChange'\n> & {\n placement: {\n insetBlockStart: number;\n insetBlockEnd: number;\n insetInlineStart: number;\n insetInlineEnd: number;\n inlineSize: number;\n };\n};\n"]}

package/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/index.js CHANGED Viewed

@@ -72,7 +72,7 @@ toolbarProps = {}, featureNotificationsProps, }) {
                         onActiveAiDrawerChange === null || onActiveAiDrawerChange === void 0 ? void 0 : onActiveAiDrawerChange((_a = aiDrawer === null || aiDrawer === void 0 ? void 0 : aiDrawer.id) !== null && _a !== void 0 ? _a : null, { initiatedByUserAction: true });
                     }, ref: aiDrawerFocusRef, selected: !drawerExpandedMode && !!activeAiDrawerId, disabled: anyPanelOpenInMobile, variant: ((_c = aiDrawer === null || aiDrawer === void 0 ? void 0 : aiDrawer.trigger) === null || _c === void 0 ? void 0 : _c.customIcon) ? 'custom' : 'circle', testId: `awsui-app-layout-trigger-${aiDrawer === null || aiDrawer === void 0 ? void 0 : aiDrawer.id}`, isForPreviousActiveDrawer: true })));
         }),
-        React.createElement(ToolbarContainer, { hasAiDrawer: !!(aiDrawer === null || aiDrawer === void 0 ? void 0 : aiDrawer.trigger) },
+        React.createElement(ToolbarContainer, { hasAiDrawer: !!activeAiDrawerId },
             hasNavigation && (React.createElement("nav", { ...navLandmarkAttributes, className: clsx(styles['universal-toolbar-nav']) },
                 React.createElement(TriggerButton, { ariaLabel: (_a = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.navigationToggle) !== null && _a !== void 0 ? _a : undefined, ariaExpanded: !drawerExpandedMode && navigationOpen, iconName: "menu", className: testutilStyles['navigation-toggle'], onClick: () => {
                         if (setExpandedDrawerId) {

package/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/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 React, { useEffect, useRef } from 'react';\nimport { Transition } from 'react-transition-group';\nimport clsx from 'clsx';\n\nimport { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';\n\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { AppLayoutProps } from '../../interfaces';\nimport { OnChangeParams } from '../../utils/use-drawers';\nimport { Focusable, FocusControlMultipleStates } from '../../utils/use-focus-control';\nimport { AppLayoutInternals } from '../interfaces';\nimport { ToolbarSkeleton } from '../skeleton/skeleton-parts';\nimport { ToolbarSlot } from '../skeleton/slots';\nimport { ToolbarBreadcrumbsSection, ToolbarContainer } from '../skeleton/toolbar-container';\nimport { FeatureNotificationsProps } from '../state/use-feature-notifications';\nimport { DrawerTriggers, SplitPanelToggleProps } from './drawer-triggers';\nimport TriggerButton from './trigger-button';\n\nimport sharedStyles from '../../resize/styles.css.js';\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nexport { SplitPanelToggleProps };\n\nexport interface ToolbarProps {\n ariaLabels?: AppLayoutProps.Labels;\n // navigation\n hasNavigation?: boolean;\n navigationOpen?: boolean;\n onNavigationToggle?: (open: boolean) => void;\n navigationFocusRef?: React.Ref<Focusable>;\n\n // breadcrumbs\n hasBreadcrumbsPortal?: boolean;\n\n // split panel\n hasSplitPanel?: boolean;\n splitPanelToggleProps?: SplitPanelToggleProps;\n splitPanelFocusRef?: React.Ref<Focusable>;\n onSplitPanelToggle?: () => void;\n\n // drawers\n activeDrawerId?: string \| null;\n drawers?: ReadonlyArray<AppLayoutProps.Drawer>;\n drawersFocusRef?: React.Ref<Focusable>;\n bottomDrawersFocusRef?: React.Ref<Focusable>;\n globalDrawersFocusControl?: FocusControlMultipleStates;\n onActiveDrawerChange?: (drawerId: string \| null, params: OnChangeParams) => void;\n globalDrawers?: ReadonlyArray<AppLayoutProps.Drawer> \| undefined;\n activeGlobalDrawersIds?: ReadonlyArray<string>;\n onActiveGlobalDrawersChange?: ((drawerId: string, params: OnChangeParams) => void) \| undefined;\n bottomDrawers?: ReadonlyArray<AppLayoutProps.Drawer> \| undefined;\n activeGlobalBottomDrawerId?: string \| null;\n onActiveGlobalBottomDrawerChange?: (value: string \| null, params: OnChangeParams) => void;\n\n expandedDrawerId?: string \| null;\n setExpandedDrawerId?: (value: string \| null) => void;\n\n aiDrawer?: AppLayoutProps.Drawer;\n onActiveAiDrawerChange?: (value: string \| null) => void;\n activeAiDrawerId?: string \| null;\n aiDrawerFocusRef?: React.Ref<Focusable>;\n}\n\nexport interface AppLayoutToolbarImplementationProps {\n appLayoutInternals: AppLayoutInternals;\n toolbarProps: ToolbarProps;\n featureNotificationsProps?: FeatureNotificationsProps;\n}\n\nexport function AppLayoutToolbarImplementation({\n appLayoutInternals,\n // the value could be undefined if this component is loaded as a widget by a different app layout version\n // not testable in a single-version setup\n toolbarProps = {},\n featureNotificationsProps,\n}: AppLayoutToolbarImplementationProps) {\n const {\n breadcrumbs,\n discoveredBreadcrumbs,\n verticalOffsets,\n isMobile,\n setToolbarHeight,\n aiDrawer,\n activeAiDrawer,\n onActiveAiDrawerChange,\n } = appLayoutInternals;\n const {\n ariaLabels,\n activeDrawerId,\n drawers,\n drawersFocusRef,\n onActiveDrawerChange,\n globalDrawersFocusControl,\n globalDrawers,\n activeGlobalDrawersIds,\n onActiveGlobalDrawersChange,\n hasNavigation,\n navigationOpen,\n navigationFocusRef,\n onNavigationToggle,\n hasSplitPanel,\n splitPanelFocusRef,\n splitPanelToggleProps,\n onSplitPanelToggle,\n expandedDrawerId,\n setExpandedDrawerId,\n aiDrawerFocusRef,\n onActiveGlobalBottomDrawerChange,\n activeGlobalBottomDrawerId,\n bottomDrawersFocusRef,\n bottomDrawers,\n } = toolbarProps;\n const drawerExpandedMode = !!expandedDrawerId;\n const ref = useRef<HTMLElement>(null);\n const aiDrawerTransitionRef = useRef<HTMLDivElement>(null);\n const activeAiDrawerId = activeAiDrawer?.id;\n useResizeObserver(ref, entry => setToolbarHeight(entry.borderBoxHeight));\n useEffect(() => {\n return () => {\n setToolbarHeight(0);\n };\n // unmount effect only\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const anyPanelOpenInMobile =\n !!isMobile &&\n (!!activeDrawerId \|\|\n !!activeGlobalDrawersIds?.length \|\|\n !!activeAiDrawerId \|\|\n !!activeGlobalBottomDrawerId \|\|\n (!!navigationOpen && !!hasNavigation));\n useEffect(() => {\n if (anyPanelOpenInMobile) {\n document.body.classList.add(styles['block-body-scroll']);\n } else {\n document.body.classList.remove(styles['block-body-scroll']);\n }\n return () => {\n document.body.classList.remove(styles['block-body-scroll']);\n };\n }, [anyPanelOpenInMobile]);\n\n const navLandmarkAttributes = navigationOpen\n ? { role: 'presentation' }\n : { role: 'navigation', 'aria-label': ariaLabels?.navigation };\n\n return (\n <ToolbarSlot\n ref={ref}\n className={clsx((aiDrawer?.trigger \|\| !!activeAiDrawerId) && styles['with-ai-drawer'], {\n [testutilStyles['mobile-bar']]: isMobile,\n })}\n style={{\n insetBlockStart: verticalOffsets.toolbar,\n }}\n >\n <Transition\n in={!!(aiDrawer?.trigger && !activeAiDrawerId)}\n timeout={{ enter: 0, exit: 165 }}\n mountOnEnter={true}\n unmountOnExit={true}\n nodeRef={aiDrawerTransitionRef}\n >\n {state => (\n <div\n className={clsx(!!aiDrawer?.trigger?.customIcon && styles['universal-toolbar-ai-custom'], [\n sharedStyles['with-motion-horizontal'],\n ])}\n style={{\n opacity: ['entering', 'exiting'].includes(state) ? 0 : 1,\n }}\n >\n <TriggerButton\n ariaLabel={aiDrawer?.ariaLabels?.triggerButton}\n ariaExpanded={!!activeAiDrawerId}\n iconName={aiDrawer?.trigger!.iconName}\n iconSvg={aiDrawer?.trigger!.iconSvg}\n customSvg={aiDrawer?.trigger!.customIcon}\n className={testutilStyles['ai-drawer-toggle']}\n onClick={() => {\n if (setExpandedDrawerId) {\n setExpandedDrawerId(null);\n }\n onActiveAiDrawerChange?.(aiDrawer?.id ?? null, { initiatedByUserAction: true });\n }}\n ref={aiDrawerFocusRef}\n selected={!drawerExpandedMode && !!activeAiDrawerId}\n disabled={anyPanelOpenInMobile}\n variant={aiDrawer?.trigger?.customIcon ? 'custom' : 'circle'}\n testId={`awsui-app-layout-trigger-${aiDrawer?.id}`}\n isForPreviousActiveDrawer={true}\n />\n </div>\n )}\n </Transition>\n <ToolbarContainer hasAiDrawer={!!aiDrawer?.trigger}>\n {hasNavigation && (\n <nav {...navLandmarkAttributes} className={clsx(styles['universal-toolbar-nav'])}>\n <TriggerButton\n ariaLabel={ariaLabels?.navigationToggle ?? undefined}\n ariaExpanded={!drawerExpandedMode && navigationOpen}\n iconName=\"menu\"\n className={testutilStyles['navigation-toggle']}\n onClick={() => {\n if (setExpandedDrawerId) {\n setExpandedDrawerId(null);\n }\n if (navigationOpen && expandedDrawerId) {\n return;\n }\n onNavigationToggle?.(!navigationOpen);\n }}\n ref={navigationFocusRef}\n selected={!drawerExpandedMode && navigationOpen}\n disabled={anyPanelOpenInMobile}\n />\n </nav>\n )}\n {(breadcrumbs \|\| discoveredBreadcrumbs) && (\n <ToolbarBreadcrumbsSection\n ownBreadcrumbs={appLayoutInternals.breadcrumbs}\n discoveredBreadcrumbs={appLayoutInternals.discoveredBreadcrumbs}\n includeTestUtils={true}\n />\n )}\n {(drawers?.length \|\|\n globalDrawers?.length \|\|\n bottomDrawers?.length \|\|\n (hasSplitPanel && splitPanelToggleProps?.displayed)) && (\n <div className={clsx(styles['universal-toolbar-drawers'])}>\n <DrawerTriggers\n ariaLabels={ariaLabels}\n activeDrawerId={activeDrawerId ?? null}\n drawers={drawers?.filter(item => !!item.trigger) ?? []}\n drawersFocusRef={drawersFocusRef}\n onActiveDrawerChange={onActiveDrawerChange}\n splitPanelToggleProps={splitPanelToggleProps?.displayed ? splitPanelToggleProps : undefined}\n splitPanelFocusRef={splitPanelFocusRef}\n onSplitPanelToggle={onSplitPanelToggle}\n disabled={anyPanelOpenInMobile}\n globalDrawersFocusControl={globalDrawersFocusControl}\n bottomDrawersFocusRef={bottomDrawersFocusRef}\n globalDrawers={globalDrawers?.filter(item => !!item.trigger) ?? []}\n activeGlobalDrawersIds={activeGlobalDrawersIds ?? []}\n onActiveGlobalDrawersChange={onActiveGlobalDrawersChange}\n expandedDrawerId={expandedDrawerId}\n setExpandedDrawerId={setExpandedDrawerId!}\n bottomDrawers={bottomDrawers}\n onActiveGlobalBottomDrawerChange={onActiveGlobalBottomDrawerChange}\n activeGlobalBottomDrawerId={activeGlobalBottomDrawerId}\n featureNotificationsProps={featureNotificationsProps}\n />\n </div>\n )}\n </ToolbarContainer>\n </ToolbarSlot>\n );\n}\n\nexport const AppLayoutToolbar = createWidgetizedComponent(AppLayoutToolbarImplementation, ToolbarSkeleton);\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/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 React, { useEffect, useRef } from 'react';\nimport { Transition } from 'react-transition-group';\nimport clsx from 'clsx';\n\nimport { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';\n\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { AppLayoutProps } from '../../interfaces';\nimport { OnChangeParams } from '../../utils/use-drawers';\nimport { Focusable, FocusControlMultipleStates } from '../../utils/use-focus-control';\nimport { AppLayoutInternals } from '../interfaces';\nimport { ToolbarSkeleton } from '../skeleton/skeleton-parts';\nimport { ToolbarSlot } from '../skeleton/slots';\nimport { ToolbarBreadcrumbsSection, ToolbarContainer } from '../skeleton/toolbar-container';\nimport { FeatureNotificationsProps } from '../state/use-feature-notifications';\nimport { DrawerTriggers, SplitPanelToggleProps } from './drawer-triggers';\nimport TriggerButton from './trigger-button';\n\nimport sharedStyles from '../../resize/styles.css.js';\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nexport { SplitPanelToggleProps };\n\nexport interface ToolbarProps {\n ariaLabels?: AppLayoutProps.Labels;\n // navigation\n hasNavigation?: boolean;\n navigationOpen?: boolean;\n onNavigationToggle?: (open: boolean) => void;\n navigationFocusRef?: React.Ref<Focusable>;\n\n // breadcrumbs\n hasBreadcrumbsPortal?: boolean;\n\n // split panel\n hasSplitPanel?: boolean;\n splitPanelToggleProps?: SplitPanelToggleProps;\n splitPanelFocusRef?: React.Ref<Focusable>;\n onSplitPanelToggle?: () => void;\n\n // drawers\n activeDrawerId?: string \| null;\n drawers?: ReadonlyArray<AppLayoutProps.Drawer>;\n drawersFocusRef?: React.Ref<Focusable>;\n bottomDrawersFocusRef?: React.Ref<Focusable>;\n globalDrawersFocusControl?: FocusControlMultipleStates;\n onActiveDrawerChange?: (drawerId: string \| null, params: OnChangeParams) => void;\n globalDrawers?: ReadonlyArray<AppLayoutProps.Drawer> \| undefined;\n activeGlobalDrawersIds?: ReadonlyArray<string>;\n onActiveGlobalDrawersChange?: ((drawerId: string, params: OnChangeParams) => void) \| undefined;\n bottomDrawers?: ReadonlyArray<AppLayoutProps.Drawer> \| undefined;\n activeGlobalBottomDrawerId?: string \| null;\n onActiveGlobalBottomDrawerChange?: (value: string \| null, params: OnChangeParams) => void;\n\n expandedDrawerId?: string \| null;\n setExpandedDrawerId?: (value: string \| null) => void;\n\n aiDrawer?: AppLayoutProps.Drawer;\n onActiveAiDrawerChange?: (value: string \| null) => void;\n activeAiDrawerId?: string \| null;\n aiDrawerFocusRef?: React.Ref<Focusable>;\n}\n\nexport interface AppLayoutToolbarImplementationProps {\n appLayoutInternals: AppLayoutInternals;\n toolbarProps: ToolbarProps;\n featureNotificationsProps?: FeatureNotificationsProps;\n}\n\nexport function AppLayoutToolbarImplementation({\n appLayoutInternals,\n // the value could be undefined if this component is loaded as a widget by a different app layout version\n // not testable in a single-version setup\n toolbarProps = {},\n featureNotificationsProps,\n}: AppLayoutToolbarImplementationProps) {\n const {\n breadcrumbs,\n discoveredBreadcrumbs,\n verticalOffsets,\n isMobile,\n setToolbarHeight,\n aiDrawer,\n activeAiDrawer,\n onActiveAiDrawerChange,\n } = appLayoutInternals;\n const {\n ariaLabels,\n activeDrawerId,\n drawers,\n drawersFocusRef,\n onActiveDrawerChange,\n globalDrawersFocusControl,\n globalDrawers,\n activeGlobalDrawersIds,\n onActiveGlobalDrawersChange,\n hasNavigation,\n navigationOpen,\n navigationFocusRef,\n onNavigationToggle,\n hasSplitPanel,\n splitPanelFocusRef,\n splitPanelToggleProps,\n onSplitPanelToggle,\n expandedDrawerId,\n setExpandedDrawerId,\n aiDrawerFocusRef,\n onActiveGlobalBottomDrawerChange,\n activeGlobalBottomDrawerId,\n bottomDrawersFocusRef,\n bottomDrawers,\n } = toolbarProps;\n const drawerExpandedMode = !!expandedDrawerId;\n const ref = useRef<HTMLElement>(null);\n const aiDrawerTransitionRef = useRef<HTMLDivElement>(null);\n const activeAiDrawerId = activeAiDrawer?.id;\n useResizeObserver(ref, entry => setToolbarHeight(entry.borderBoxHeight));\n useEffect(() => {\n return () => {\n setToolbarHeight(0);\n };\n // unmount effect only\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const anyPanelOpenInMobile =\n !!isMobile &&\n (!!activeDrawerId \|\|\n !!activeGlobalDrawersIds?.length \|\|\n !!activeAiDrawerId \|\|\n !!activeGlobalBottomDrawerId \|\|\n (!!navigationOpen && !!hasNavigation));\n useEffect(() => {\n if (anyPanelOpenInMobile) {\n document.body.classList.add(styles['block-body-scroll']);\n } else {\n document.body.classList.remove(styles['block-body-scroll']);\n }\n return () => {\n document.body.classList.remove(styles['block-body-scroll']);\n };\n }, [anyPanelOpenInMobile]);\n\n const navLandmarkAttributes = navigationOpen\n ? { role: 'presentation' }\n : { role: 'navigation', 'aria-label': ariaLabels?.navigation };\n\n return (\n <ToolbarSlot\n ref={ref}\n className={clsx((aiDrawer?.trigger \|\| !!activeAiDrawerId) && styles['with-ai-drawer'], {\n [testutilStyles['mobile-bar']]: isMobile,\n })}\n style={{\n insetBlockStart: verticalOffsets.toolbar,\n }}\n >\n <Transition\n in={!!(aiDrawer?.trigger && !activeAiDrawerId)}\n timeout={{ enter: 0, exit: 165 }}\n mountOnEnter={true}\n unmountOnExit={true}\n nodeRef={aiDrawerTransitionRef}\n >\n {state => (\n <div\n className={clsx(!!aiDrawer?.trigger?.customIcon && styles['universal-toolbar-ai-custom'], [\n sharedStyles['with-motion-horizontal'],\n ])}\n style={{\n opacity: ['entering', 'exiting'].includes(state) ? 0 : 1,\n }}\n >\n <TriggerButton\n ariaLabel={aiDrawer?.ariaLabels?.triggerButton}\n ariaExpanded={!!activeAiDrawerId}\n iconName={aiDrawer?.trigger!.iconName}\n iconSvg={aiDrawer?.trigger!.iconSvg}\n customSvg={aiDrawer?.trigger!.customIcon}\n className={testutilStyles['ai-drawer-toggle']}\n onClick={() => {\n if (setExpandedDrawerId) {\n setExpandedDrawerId(null);\n }\n onActiveAiDrawerChange?.(aiDrawer?.id ?? null, { initiatedByUserAction: true });\n }}\n ref={aiDrawerFocusRef}\n selected={!drawerExpandedMode && !!activeAiDrawerId}\n disabled={anyPanelOpenInMobile}\n variant={aiDrawer?.trigger?.customIcon ? 'custom' : 'circle'}\n testId={`awsui-app-layout-trigger-${aiDrawer?.id}`}\n isForPreviousActiveDrawer={true}\n />\n </div>\n )}\n </Transition>\n <ToolbarContainer hasAiDrawer={!!activeAiDrawerId}>\n {hasNavigation && (\n <nav {...navLandmarkAttributes} className={clsx(styles['universal-toolbar-nav'])}>\n <TriggerButton\n ariaLabel={ariaLabels?.navigationToggle ?? undefined}\n ariaExpanded={!drawerExpandedMode && navigationOpen}\n iconName=\"menu\"\n className={testutilStyles['navigation-toggle']}\n onClick={() => {\n if (setExpandedDrawerId) {\n setExpandedDrawerId(null);\n }\n if (navigationOpen && expandedDrawerId) {\n return;\n }\n onNavigationToggle?.(!navigationOpen);\n }}\n ref={navigationFocusRef}\n selected={!drawerExpandedMode && navigationOpen}\n disabled={anyPanelOpenInMobile}\n />\n </nav>\n )}\n {(breadcrumbs \|\| discoveredBreadcrumbs) && (\n <ToolbarBreadcrumbsSection\n ownBreadcrumbs={appLayoutInternals.breadcrumbs}\n discoveredBreadcrumbs={appLayoutInternals.discoveredBreadcrumbs}\n includeTestUtils={true}\n />\n )}\n {(drawers?.length \|\|\n globalDrawers?.length \|\|\n bottomDrawers?.length \|\|\n (hasSplitPanel && splitPanelToggleProps?.displayed)) && (\n <div className={clsx(styles['universal-toolbar-drawers'])}>\n <DrawerTriggers\n ariaLabels={ariaLabels}\n activeDrawerId={activeDrawerId ?? null}\n drawers={drawers?.filter(item => !!item.trigger) ?? []}\n drawersFocusRef={drawersFocusRef}\n onActiveDrawerChange={onActiveDrawerChange}\n splitPanelToggleProps={splitPanelToggleProps?.displayed ? splitPanelToggleProps : undefined}\n splitPanelFocusRef={splitPanelFocusRef}\n onSplitPanelToggle={onSplitPanelToggle}\n disabled={anyPanelOpenInMobile}\n globalDrawersFocusControl={globalDrawersFocusControl}\n bottomDrawersFocusRef={bottomDrawersFocusRef}\n globalDrawers={globalDrawers?.filter(item => !!item.trigger) ?? []}\n activeGlobalDrawersIds={activeGlobalDrawersIds ?? []}\n onActiveGlobalDrawersChange={onActiveGlobalDrawersChange}\n expandedDrawerId={expandedDrawerId}\n setExpandedDrawerId={setExpandedDrawerId!}\n bottomDrawers={bottomDrawers}\n onActiveGlobalBottomDrawerChange={onActiveGlobalBottomDrawerChange}\n activeGlobalBottomDrawerId={activeGlobalBottomDrawerId}\n featureNotificationsProps={featureNotificationsProps}\n />\n </div>\n )}\n </ToolbarContainer>\n </ToolbarSlot>\n );\n}\n\nexport const AppLayoutToolbar = createWidgetizedComponent(AppLayoutToolbarImplementation, ToolbarSkeleton);\n"]}

package/lib/internal/template/box/styles.css.js CHANGED Viewed

@@ -1,197 +1,197 @@
     import './styles.scoped.css';
     export default {
-  "box": "awsui_box_18wu0_gc87h_172",
-  "p-variant": "awsui_p-variant_18wu0_gc87h_172",
-  "color-default": "awsui_color-default_18wu0_gc87h_172",
-  "b-variant": "awsui_b-variant_18wu0_gc87h_172",
-  "strong-variant": "awsui_strong-variant_18wu0_gc87h_172",
-  "code-variant": "awsui_code-variant_18wu0_gc87h_172",
-  "pre-variant": "awsui_pre-variant_18wu0_gc87h_172",
-  "samp-variant": "awsui_samp-variant_18wu0_gc87h_172",
-  "h1-variant": "awsui_h1-variant_18wu0_gc87h_176",
-  "h2-variant": "awsui_h2-variant_18wu0_gc87h_176",
-  "h3-variant": "awsui_h3-variant_18wu0_gc87h_176",
-  "h4-variant": "awsui_h4-variant_18wu0_gc87h_176",
-  "h5-variant": "awsui_h5-variant_18wu0_gc87h_176",
-  "small-variant": "awsui_small-variant_18wu0_gc87h_180",
-  "a-variant": "awsui_a-variant_18wu0_gc87h_184",
-  "font-size-default": "awsui_font-size-default_18wu0_gc87h_188",
-  "font-weight-default": "awsui_font-weight-default_18wu0_gc87h_228",
-  "key-label-variant": "awsui_key-label-variant_18wu0_gc87h_270",
-  "gen-ai-label-variant": "awsui_gen-ai-label-variant_18wu0_gc87h_277",
-  "value-large-variant": "awsui_value-large-variant_18wu0_gc87h_284",
-  "inline-code-variant": "awsui_inline-code-variant_18wu0_gc87h_291",
-  "font-weight-heavy": "awsui_font-weight-heavy_18wu0_gc87h_305",
-  "color-inverted": "awsui_color-inverted_18wu0_gc87h_310",
-  "color-text-label": "awsui_color-text-label_18wu0_gc87h_313",
-  "color-text-body-secondary": "awsui_color-text-body-secondary_18wu0_gc87h_316",
-  "color-text-status-error": "awsui_color-text-status-error_18wu0_gc87h_319",
-  "color-text-status-success": "awsui_color-text-status-success_18wu0_gc87h_322",
-  "color-text-status-info": "awsui_color-text-status-info_18wu0_gc87h_325",
-  "color-text-status-inactive": "awsui_color-text-status-inactive_18wu0_gc87h_328",
-  "color-text-status-warning": "awsui_color-text-status-warning_18wu0_gc87h_331",
-  "color-inherit": "awsui_color-inherit_18wu0_gc87h_334",
-  "font-size-body-s": "awsui_font-size-body-s_18wu0_gc87h_337",
-  "font-size-body-m": "awsui_font-size-body-m_18wu0_gc87h_342",
-  "font-size-heading-xs": "awsui_font-size-heading-xs_18wu0_gc87h_346",
-  "font-size-heading-s": "awsui_font-size-heading-s_18wu0_gc87h_350",
-  "font-size-heading-m": "awsui_font-size-heading-m_18wu0_gc87h_355",
-  "font-size-heading-l": "awsui_font-size-heading-l_18wu0_gc87h_360",
-  "font-size-heading-xl": "awsui_font-size-heading-xl_18wu0_gc87h_365",
-  "font-size-display-l": "awsui_font-size-display-l_18wu0_gc87h_370",
-  "font-weight-light": "awsui_font-weight-light_18wu0_gc87h_375",
-  "font-weight-normal": "awsui_font-weight-normal_18wu0_gc87h_378",
-  "font-weight-bold": "awsui_font-weight-bold_18wu0_gc87h_381",
-  "t-left": "awsui_t-left_18wu0_gc87h_388",
-  "t-right": "awsui_t-right_18wu0_gc87h_392",
-  "t-center": "awsui_t-center_18wu0_gc87h_396",
-  "p-n": "awsui_p-n_18wu0_gc87h_413",
-  "p-top-n": "awsui_p-top-n_18wu0_gc87h_418",
-  "p-vertical-n": "awsui_p-vertical-n_18wu0_gc87h_419",
-  "p-right-n": "awsui_p-right-n_18wu0_gc87h_423",
-  "p-horizontal-n": "awsui_p-horizontal-n_18wu0_gc87h_424",
-  "p-bottom-n": "awsui_p-bottom-n_18wu0_gc87h_428",
-  "p-left-n": "awsui_p-left-n_18wu0_gc87h_433",
-  "p-xxxs": "awsui_p-xxxs_18wu0_gc87h_438",
-  "p-top-xxxs": "awsui_p-top-xxxs_18wu0_gc87h_443",
-  "p-vertical-xxxs": "awsui_p-vertical-xxxs_18wu0_gc87h_444",
-  "p-right-xxxs": "awsui_p-right-xxxs_18wu0_gc87h_448",
-  "p-horizontal-xxxs": "awsui_p-horizontal-xxxs_18wu0_gc87h_449",
-  "p-bottom-xxxs": "awsui_p-bottom-xxxs_18wu0_gc87h_453",
-  "p-left-xxxs": "awsui_p-left-xxxs_18wu0_gc87h_458",
-  "p-xxs": "awsui_p-xxs_18wu0_gc87h_463",
-  "p-top-xxs": "awsui_p-top-xxs_18wu0_gc87h_468",
-  "p-vertical-xxs": "awsui_p-vertical-xxs_18wu0_gc87h_469",
-  "p-right-xxs": "awsui_p-right-xxs_18wu0_gc87h_473",
-  "p-horizontal-xxs": "awsui_p-horizontal-xxs_18wu0_gc87h_474",
-  "p-bottom-xxs": "awsui_p-bottom-xxs_18wu0_gc87h_478",
-  "p-left-xxs": "awsui_p-left-xxs_18wu0_gc87h_483",
-  "p-xs": "awsui_p-xs_18wu0_gc87h_488",
-  "p-top-xs": "awsui_p-top-xs_18wu0_gc87h_493",
-  "p-vertical-xs": "awsui_p-vertical-xs_18wu0_gc87h_494",
-  "p-right-xs": "awsui_p-right-xs_18wu0_gc87h_498",
-  "p-horizontal-xs": "awsui_p-horizontal-xs_18wu0_gc87h_499",
-  "p-bottom-xs": "awsui_p-bottom-xs_18wu0_gc87h_503",
-  "p-left-xs": "awsui_p-left-xs_18wu0_gc87h_508",
-  "p-s": "awsui_p-s_18wu0_gc87h_513",
-  "p-top-s": "awsui_p-top-s_18wu0_gc87h_518",
-  "p-vertical-s": "awsui_p-vertical-s_18wu0_gc87h_519",
-  "p-right-s": "awsui_p-right-s_18wu0_gc87h_523",
-  "p-horizontal-s": "awsui_p-horizontal-s_18wu0_gc87h_524",
-  "p-bottom-s": "awsui_p-bottom-s_18wu0_gc87h_528",
-  "p-left-s": "awsui_p-left-s_18wu0_gc87h_533",
-  "p-m": "awsui_p-m_18wu0_gc87h_538",
-  "p-top-m": "awsui_p-top-m_18wu0_gc87h_543",
-  "p-vertical-m": "awsui_p-vertical-m_18wu0_gc87h_544",
-  "p-right-m": "awsui_p-right-m_18wu0_gc87h_548",
-  "p-horizontal-m": "awsui_p-horizontal-m_18wu0_gc87h_549",
-  "p-bottom-m": "awsui_p-bottom-m_18wu0_gc87h_553",
-  "p-left-m": "awsui_p-left-m_18wu0_gc87h_558",
-  "p-l": "awsui_p-l_18wu0_gc87h_433",
-  "p-top-l": "awsui_p-top-l_18wu0_gc87h_568",
-  "p-vertical-l": "awsui_p-vertical-l_18wu0_gc87h_569",
-  "p-right-l": "awsui_p-right-l_18wu0_gc87h_573",
-  "p-horizontal-l": "awsui_p-horizontal-l_18wu0_gc87h_574",
-  "p-bottom-l": "awsui_p-bottom-l_18wu0_gc87h_578",
-  "p-left-l": "awsui_p-left-l_18wu0_gc87h_583",
-  "p-xl": "awsui_p-xl_18wu0_gc87h_588",
-  "p-top-xl": "awsui_p-top-xl_18wu0_gc87h_593",
-  "p-vertical-xl": "awsui_p-vertical-xl_18wu0_gc87h_594",
-  "p-right-xl": "awsui_p-right-xl_18wu0_gc87h_598",
-  "p-horizontal-xl": "awsui_p-horizontal-xl_18wu0_gc87h_599",
-  "p-bottom-xl": "awsui_p-bottom-xl_18wu0_gc87h_603",
-  "p-left-xl": "awsui_p-left-xl_18wu0_gc87h_608",
-  "p-xxl": "awsui_p-xxl_18wu0_gc87h_613",
-  "p-top-xxl": "awsui_p-top-xxl_18wu0_gc87h_618",
-  "p-vertical-xxl": "awsui_p-vertical-xxl_18wu0_gc87h_619",
-  "p-right-xxl": "awsui_p-right-xxl_18wu0_gc87h_623",
-  "p-horizontal-xxl": "awsui_p-horizontal-xxl_18wu0_gc87h_624",
-  "p-bottom-xxl": "awsui_p-bottom-xxl_18wu0_gc87h_628",
-  "p-left-xxl": "awsui_p-left-xxl_18wu0_gc87h_633",
-  "p-xxxl": "awsui_p-xxxl_18wu0_gc87h_638",
-  "p-top-xxxl": "awsui_p-top-xxxl_18wu0_gc87h_643",
-  "p-vertical-xxxl": "awsui_p-vertical-xxxl_18wu0_gc87h_644",
-  "p-right-xxxl": "awsui_p-right-xxxl_18wu0_gc87h_648",
-  "p-horizontal-xxxl": "awsui_p-horizontal-xxxl_18wu0_gc87h_649",
-  "p-bottom-xxxl": "awsui_p-bottom-xxxl_18wu0_gc87h_653",
-  "p-left-xxxl": "awsui_p-left-xxxl_18wu0_gc87h_658",
-  "m-n": "awsui_m-n_18wu0_gc87h_663",
-  "m-top-n": "awsui_m-top-n_18wu0_gc87h_668",
-  "m-vertical-n": "awsui_m-vertical-n_18wu0_gc87h_669",
-  "m-right-n": "awsui_m-right-n_18wu0_gc87h_673",
-  "m-horizontal-n": "awsui_m-horizontal-n_18wu0_gc87h_674",
-  "m-bottom-n": "awsui_m-bottom-n_18wu0_gc87h_678",
-  "m-left-n": "awsui_m-left-n_18wu0_gc87h_683",
-  "m-xxxs": "awsui_m-xxxs_18wu0_gc87h_688",
-  "m-top-xxxs": "awsui_m-top-xxxs_18wu0_gc87h_693",
-  "m-vertical-xxxs": "awsui_m-vertical-xxxs_18wu0_gc87h_694",
-  "m-right-xxxs": "awsui_m-right-xxxs_18wu0_gc87h_698",
-  "m-horizontal-xxxs": "awsui_m-horizontal-xxxs_18wu0_gc87h_699",
-  "m-bottom-xxxs": "awsui_m-bottom-xxxs_18wu0_gc87h_703",
-  "m-left-xxxs": "awsui_m-left-xxxs_18wu0_gc87h_708",
-  "m-xxs": "awsui_m-xxs_18wu0_gc87h_713",
-  "m-top-xxs": "awsui_m-top-xxs_18wu0_gc87h_718",
-  "m-vertical-xxs": "awsui_m-vertical-xxs_18wu0_gc87h_719",
-  "m-right-xxs": "awsui_m-right-xxs_18wu0_gc87h_723",
-  "m-horizontal-xxs": "awsui_m-horizontal-xxs_18wu0_gc87h_724",
-  "m-bottom-xxs": "awsui_m-bottom-xxs_18wu0_gc87h_728",
-  "m-left-xxs": "awsui_m-left-xxs_18wu0_gc87h_733",
-  "m-xs": "awsui_m-xs_18wu0_gc87h_738",
-  "m-top-xs": "awsui_m-top-xs_18wu0_gc87h_743",
-  "m-vertical-xs": "awsui_m-vertical-xs_18wu0_gc87h_744",
-  "m-right-xs": "awsui_m-right-xs_18wu0_gc87h_748",
-  "m-horizontal-xs": "awsui_m-horizontal-xs_18wu0_gc87h_749",
-  "m-bottom-xs": "awsui_m-bottom-xs_18wu0_gc87h_753",
-  "m-left-xs": "awsui_m-left-xs_18wu0_gc87h_758",
-  "m-s": "awsui_m-s_18wu0_gc87h_763",
-  "m-top-s": "awsui_m-top-s_18wu0_gc87h_768",
-  "m-vertical-s": "awsui_m-vertical-s_18wu0_gc87h_769",
-  "m-right-s": "awsui_m-right-s_18wu0_gc87h_773",
-  "m-horizontal-s": "awsui_m-horizontal-s_18wu0_gc87h_774",
-  "m-bottom-s": "awsui_m-bottom-s_18wu0_gc87h_778",
-  "m-left-s": "awsui_m-left-s_18wu0_gc87h_783",
-  "m-m": "awsui_m-m_18wu0_gc87h_788",
-  "m-top-m": "awsui_m-top-m_18wu0_gc87h_793",
-  "m-vertical-m": "awsui_m-vertical-m_18wu0_gc87h_794",
-  "m-right-m": "awsui_m-right-m_18wu0_gc87h_798",
-  "m-horizontal-m": "awsui_m-horizontal-m_18wu0_gc87h_799",
-  "m-bottom-m": "awsui_m-bottom-m_18wu0_gc87h_803",
-  "m-left-m": "awsui_m-left-m_18wu0_gc87h_808",
-  "m-l": "awsui_m-l_18wu0_gc87h_683",
-  "m-top-l": "awsui_m-top-l_18wu0_gc87h_818",
-  "m-vertical-l": "awsui_m-vertical-l_18wu0_gc87h_819",
-  "m-right-l": "awsui_m-right-l_18wu0_gc87h_823",
-  "m-horizontal-l": "awsui_m-horizontal-l_18wu0_gc87h_824",
-  "m-bottom-l": "awsui_m-bottom-l_18wu0_gc87h_828",
-  "m-left-l": "awsui_m-left-l_18wu0_gc87h_833",
-  "m-xl": "awsui_m-xl_18wu0_gc87h_838",
-  "m-top-xl": "awsui_m-top-xl_18wu0_gc87h_843",
-  "m-vertical-xl": "awsui_m-vertical-xl_18wu0_gc87h_844",
-  "m-right-xl": "awsui_m-right-xl_18wu0_gc87h_848",
-  "m-horizontal-xl": "awsui_m-horizontal-xl_18wu0_gc87h_849",
-  "m-bottom-xl": "awsui_m-bottom-xl_18wu0_gc87h_853",
-  "m-left-xl": "awsui_m-left-xl_18wu0_gc87h_858",
-  "m-xxl": "awsui_m-xxl_18wu0_gc87h_863",
-  "m-top-xxl": "awsui_m-top-xxl_18wu0_gc87h_868",
-  "m-vertical-xxl": "awsui_m-vertical-xxl_18wu0_gc87h_869",
-  "m-right-xxl": "awsui_m-right-xxl_18wu0_gc87h_873",
-  "m-horizontal-xxl": "awsui_m-horizontal-xxl_18wu0_gc87h_874",
-  "m-bottom-xxl": "awsui_m-bottom-xxl_18wu0_gc87h_878",
-  "m-left-xxl": "awsui_m-left-xxl_18wu0_gc87h_883",
-  "m-xxxl": "awsui_m-xxxl_18wu0_gc87h_888",
-  "m-top-xxxl": "awsui_m-top-xxxl_18wu0_gc87h_893",
-  "m-vertical-xxxl": "awsui_m-vertical-xxxl_18wu0_gc87h_894",
-  "m-right-xxxl": "awsui_m-right-xxxl_18wu0_gc87h_898",
-  "m-horizontal-xxxl": "awsui_m-horizontal-xxxl_18wu0_gc87h_899",
-  "m-bottom-xxxl": "awsui_m-bottom-xxxl_18wu0_gc87h_903",
-  "m-left-xxxl": "awsui_m-left-xxxl_18wu0_gc87h_908",
-  "d-block": "awsui_d-block_18wu0_gc87h_913",
-  "d-inline": "awsui_d-inline_18wu0_gc87h_916",
-  "d-inline-block": "awsui_d-inline-block_18wu0_gc87h_919",
-  "d-none": "awsui_d-none_18wu0_gc87h_922",
-  "f-left": "awsui_f-left_18wu0_gc87h_926",
-  "f-right": "awsui_f-right_18wu0_gc87h_930",
-  "root": "awsui_root_18wu0_gc87h_934"
+  "box": "awsui_box_18wu0_1q0fz_172",
+  "p-variant": "awsui_p-variant_18wu0_1q0fz_172",
+  "color-default": "awsui_color-default_18wu0_1q0fz_172",
+  "b-variant": "awsui_b-variant_18wu0_1q0fz_172",
+  "strong-variant": "awsui_strong-variant_18wu0_1q0fz_172",
+  "code-variant": "awsui_code-variant_18wu0_1q0fz_172",
+  "pre-variant": "awsui_pre-variant_18wu0_1q0fz_172",
+  "samp-variant": "awsui_samp-variant_18wu0_1q0fz_172",
+  "h1-variant": "awsui_h1-variant_18wu0_1q0fz_176",
+  "h2-variant": "awsui_h2-variant_18wu0_1q0fz_176",
+  "h3-variant": "awsui_h3-variant_18wu0_1q0fz_176",
+  "h4-variant": "awsui_h4-variant_18wu0_1q0fz_176",
+  "h5-variant": "awsui_h5-variant_18wu0_1q0fz_176",
+  "small-variant": "awsui_small-variant_18wu0_1q0fz_180",
+  "a-variant": "awsui_a-variant_18wu0_1q0fz_184",
+  "font-size-default": "awsui_font-size-default_18wu0_1q0fz_188",
+  "font-weight-default": "awsui_font-weight-default_18wu0_1q0fz_229",
+  "key-label-variant": "awsui_key-label-variant_18wu0_1q0fz_271",
+  "gen-ai-label-variant": "awsui_gen-ai-label-variant_18wu0_1q0fz_278",
+  "value-large-variant": "awsui_value-large-variant_18wu0_1q0fz_285",
+  "inline-code-variant": "awsui_inline-code-variant_18wu0_1q0fz_292",
+  "font-weight-heavy": "awsui_font-weight-heavy_18wu0_1q0fz_306",
+  "color-inverted": "awsui_color-inverted_18wu0_1q0fz_311",
+  "color-text-label": "awsui_color-text-label_18wu0_1q0fz_314",
+  "color-text-body-secondary": "awsui_color-text-body-secondary_18wu0_1q0fz_317",
+  "color-text-status-error": "awsui_color-text-status-error_18wu0_1q0fz_320",
+  "color-text-status-success": "awsui_color-text-status-success_18wu0_1q0fz_323",
+  "color-text-status-info": "awsui_color-text-status-info_18wu0_1q0fz_326",
+  "color-text-status-inactive": "awsui_color-text-status-inactive_18wu0_1q0fz_329",
+  "color-text-status-warning": "awsui_color-text-status-warning_18wu0_1q0fz_332",
+  "color-inherit": "awsui_color-inherit_18wu0_1q0fz_335",
+  "font-size-body-s": "awsui_font-size-body-s_18wu0_1q0fz_338",
+  "font-size-body-m": "awsui_font-size-body-m_18wu0_1q0fz_343",
+  "font-size-heading-xs": "awsui_font-size-heading-xs_18wu0_1q0fz_347",
+  "font-size-heading-s": "awsui_font-size-heading-s_18wu0_1q0fz_352",
+  "font-size-heading-m": "awsui_font-size-heading-m_18wu0_1q0fz_357",
+  "font-size-heading-l": "awsui_font-size-heading-l_18wu0_1q0fz_362",
+  "font-size-heading-xl": "awsui_font-size-heading-xl_18wu0_1q0fz_367",
+  "font-size-display-l": "awsui_font-size-display-l_18wu0_1q0fz_372",
+  "font-weight-light": "awsui_font-weight-light_18wu0_1q0fz_377",
+  "font-weight-normal": "awsui_font-weight-normal_18wu0_1q0fz_380",
+  "font-weight-bold": "awsui_font-weight-bold_18wu0_1q0fz_383",
+  "t-left": "awsui_t-left_18wu0_1q0fz_390",
+  "t-right": "awsui_t-right_18wu0_1q0fz_394",
+  "t-center": "awsui_t-center_18wu0_1q0fz_398",
+  "p-n": "awsui_p-n_18wu0_1q0fz_415",
+  "p-top-n": "awsui_p-top-n_18wu0_1q0fz_420",
+  "p-vertical-n": "awsui_p-vertical-n_18wu0_1q0fz_421",
+  "p-right-n": "awsui_p-right-n_18wu0_1q0fz_425",
+  "p-horizontal-n": "awsui_p-horizontal-n_18wu0_1q0fz_426",
+  "p-bottom-n": "awsui_p-bottom-n_18wu0_1q0fz_430",
+  "p-left-n": "awsui_p-left-n_18wu0_1q0fz_435",
+  "p-xxxs": "awsui_p-xxxs_18wu0_1q0fz_440",
+  "p-top-xxxs": "awsui_p-top-xxxs_18wu0_1q0fz_445",
+  "p-vertical-xxxs": "awsui_p-vertical-xxxs_18wu0_1q0fz_446",
+  "p-right-xxxs": "awsui_p-right-xxxs_18wu0_1q0fz_450",
+  "p-horizontal-xxxs": "awsui_p-horizontal-xxxs_18wu0_1q0fz_451",
+  "p-bottom-xxxs": "awsui_p-bottom-xxxs_18wu0_1q0fz_455",
+  "p-left-xxxs": "awsui_p-left-xxxs_18wu0_1q0fz_460",
+  "p-xxs": "awsui_p-xxs_18wu0_1q0fz_465",
+  "p-top-xxs": "awsui_p-top-xxs_18wu0_1q0fz_470",
+  "p-vertical-xxs": "awsui_p-vertical-xxs_18wu0_1q0fz_471",
+  "p-right-xxs": "awsui_p-right-xxs_18wu0_1q0fz_475",
+  "p-horizontal-xxs": "awsui_p-horizontal-xxs_18wu0_1q0fz_476",
+  "p-bottom-xxs": "awsui_p-bottom-xxs_18wu0_1q0fz_480",
+  "p-left-xxs": "awsui_p-left-xxs_18wu0_1q0fz_485",
+  "p-xs": "awsui_p-xs_18wu0_1q0fz_490",
+  "p-top-xs": "awsui_p-top-xs_18wu0_1q0fz_495",
+  "p-vertical-xs": "awsui_p-vertical-xs_18wu0_1q0fz_496",
+  "p-right-xs": "awsui_p-right-xs_18wu0_1q0fz_500",
+  "p-horizontal-xs": "awsui_p-horizontal-xs_18wu0_1q0fz_501",
+  "p-bottom-xs": "awsui_p-bottom-xs_18wu0_1q0fz_505",
+  "p-left-xs": "awsui_p-left-xs_18wu0_1q0fz_510",
+  "p-s": "awsui_p-s_18wu0_1q0fz_515",
+  "p-top-s": "awsui_p-top-s_18wu0_1q0fz_520",
+  "p-vertical-s": "awsui_p-vertical-s_18wu0_1q0fz_521",
+  "p-right-s": "awsui_p-right-s_18wu0_1q0fz_525",
+  "p-horizontal-s": "awsui_p-horizontal-s_18wu0_1q0fz_526",
+  "p-bottom-s": "awsui_p-bottom-s_18wu0_1q0fz_530",
+  "p-left-s": "awsui_p-left-s_18wu0_1q0fz_535",
+  "p-m": "awsui_p-m_18wu0_1q0fz_540",
+  "p-top-m": "awsui_p-top-m_18wu0_1q0fz_545",
+  "p-vertical-m": "awsui_p-vertical-m_18wu0_1q0fz_546",
+  "p-right-m": "awsui_p-right-m_18wu0_1q0fz_550",
+  "p-horizontal-m": "awsui_p-horizontal-m_18wu0_1q0fz_551",
+  "p-bottom-m": "awsui_p-bottom-m_18wu0_1q0fz_555",
+  "p-left-m": "awsui_p-left-m_18wu0_1q0fz_560",
+  "p-l": "awsui_p-l_18wu0_1q0fz_435",
+  "p-top-l": "awsui_p-top-l_18wu0_1q0fz_570",
+  "p-vertical-l": "awsui_p-vertical-l_18wu0_1q0fz_571",
+  "p-right-l": "awsui_p-right-l_18wu0_1q0fz_575",
+  "p-horizontal-l": "awsui_p-horizontal-l_18wu0_1q0fz_576",
+  "p-bottom-l": "awsui_p-bottom-l_18wu0_1q0fz_580",
+  "p-left-l": "awsui_p-left-l_18wu0_1q0fz_585",
+  "p-xl": "awsui_p-xl_18wu0_1q0fz_590",
+  "p-top-xl": "awsui_p-top-xl_18wu0_1q0fz_595",
+  "p-vertical-xl": "awsui_p-vertical-xl_18wu0_1q0fz_596",
+  "p-right-xl": "awsui_p-right-xl_18wu0_1q0fz_600",
+  "p-horizontal-xl": "awsui_p-horizontal-xl_18wu0_1q0fz_601",
+  "p-bottom-xl": "awsui_p-bottom-xl_18wu0_1q0fz_605",
+  "p-left-xl": "awsui_p-left-xl_18wu0_1q0fz_610",
+  "p-xxl": "awsui_p-xxl_18wu0_1q0fz_615",
+  "p-top-xxl": "awsui_p-top-xxl_18wu0_1q0fz_620",
+  "p-vertical-xxl": "awsui_p-vertical-xxl_18wu0_1q0fz_621",
+  "p-right-xxl": "awsui_p-right-xxl_18wu0_1q0fz_625",
+  "p-horizontal-xxl": "awsui_p-horizontal-xxl_18wu0_1q0fz_626",
+  "p-bottom-xxl": "awsui_p-bottom-xxl_18wu0_1q0fz_630",
+  "p-left-xxl": "awsui_p-left-xxl_18wu0_1q0fz_635",
+  "p-xxxl": "awsui_p-xxxl_18wu0_1q0fz_640",
+  "p-top-xxxl": "awsui_p-top-xxxl_18wu0_1q0fz_645",
+  "p-vertical-xxxl": "awsui_p-vertical-xxxl_18wu0_1q0fz_646",
+  "p-right-xxxl": "awsui_p-right-xxxl_18wu0_1q0fz_650",
+  "p-horizontal-xxxl": "awsui_p-horizontal-xxxl_18wu0_1q0fz_651",
+  "p-bottom-xxxl": "awsui_p-bottom-xxxl_18wu0_1q0fz_655",
+  "p-left-xxxl": "awsui_p-left-xxxl_18wu0_1q0fz_660",
+  "m-n": "awsui_m-n_18wu0_1q0fz_665",
+  "m-top-n": "awsui_m-top-n_18wu0_1q0fz_670",
+  "m-vertical-n": "awsui_m-vertical-n_18wu0_1q0fz_671",
+  "m-right-n": "awsui_m-right-n_18wu0_1q0fz_675",
+  "m-horizontal-n": "awsui_m-horizontal-n_18wu0_1q0fz_676",
+  "m-bottom-n": "awsui_m-bottom-n_18wu0_1q0fz_680",
+  "m-left-n": "awsui_m-left-n_18wu0_1q0fz_685",
+  "m-xxxs": "awsui_m-xxxs_18wu0_1q0fz_690",
+  "m-top-xxxs": "awsui_m-top-xxxs_18wu0_1q0fz_695",
+  "m-vertical-xxxs": "awsui_m-vertical-xxxs_18wu0_1q0fz_696",
+  "m-right-xxxs": "awsui_m-right-xxxs_18wu0_1q0fz_700",
+  "m-horizontal-xxxs": "awsui_m-horizontal-xxxs_18wu0_1q0fz_701",
+  "m-bottom-xxxs": "awsui_m-bottom-xxxs_18wu0_1q0fz_705",
+  "m-left-xxxs": "awsui_m-left-xxxs_18wu0_1q0fz_710",
+  "m-xxs": "awsui_m-xxs_18wu0_1q0fz_715",
+  "m-top-xxs": "awsui_m-top-xxs_18wu0_1q0fz_720",
+  "m-vertical-xxs": "awsui_m-vertical-xxs_18wu0_1q0fz_721",
+  "m-right-xxs": "awsui_m-right-xxs_18wu0_1q0fz_725",
+  "m-horizontal-xxs": "awsui_m-horizontal-xxs_18wu0_1q0fz_726",
+  "m-bottom-xxs": "awsui_m-bottom-xxs_18wu0_1q0fz_730",
+  "m-left-xxs": "awsui_m-left-xxs_18wu0_1q0fz_735",
+  "m-xs": "awsui_m-xs_18wu0_1q0fz_740",
+  "m-top-xs": "awsui_m-top-xs_18wu0_1q0fz_745",
+  "m-vertical-xs": "awsui_m-vertical-xs_18wu0_1q0fz_746",
+  "m-right-xs": "awsui_m-right-xs_18wu0_1q0fz_750",
+  "m-horizontal-xs": "awsui_m-horizontal-xs_18wu0_1q0fz_751",
+  "m-bottom-xs": "awsui_m-bottom-xs_18wu0_1q0fz_755",
+  "m-left-xs": "awsui_m-left-xs_18wu0_1q0fz_760",
+  "m-s": "awsui_m-s_18wu0_1q0fz_765",
+  "m-top-s": "awsui_m-top-s_18wu0_1q0fz_770",
+  "m-vertical-s": "awsui_m-vertical-s_18wu0_1q0fz_771",
+  "m-right-s": "awsui_m-right-s_18wu0_1q0fz_775",
+  "m-horizontal-s": "awsui_m-horizontal-s_18wu0_1q0fz_776",
+  "m-bottom-s": "awsui_m-bottom-s_18wu0_1q0fz_780",
+  "m-left-s": "awsui_m-left-s_18wu0_1q0fz_785",
+  "m-m": "awsui_m-m_18wu0_1q0fz_790",
+  "m-top-m": "awsui_m-top-m_18wu0_1q0fz_795",
+  "m-vertical-m": "awsui_m-vertical-m_18wu0_1q0fz_796",
+  "m-right-m": "awsui_m-right-m_18wu0_1q0fz_800",
+  "m-horizontal-m": "awsui_m-horizontal-m_18wu0_1q0fz_801",
+  "m-bottom-m": "awsui_m-bottom-m_18wu0_1q0fz_805",
+  "m-left-m": "awsui_m-left-m_18wu0_1q0fz_810",
+  "m-l": "awsui_m-l_18wu0_1q0fz_685",
+  "m-top-l": "awsui_m-top-l_18wu0_1q0fz_820",
+  "m-vertical-l": "awsui_m-vertical-l_18wu0_1q0fz_821",
+  "m-right-l": "awsui_m-right-l_18wu0_1q0fz_825",
+  "m-horizontal-l": "awsui_m-horizontal-l_18wu0_1q0fz_826",
+  "m-bottom-l": "awsui_m-bottom-l_18wu0_1q0fz_830",
+  "m-left-l": "awsui_m-left-l_18wu0_1q0fz_835",
+  "m-xl": "awsui_m-xl_18wu0_1q0fz_840",
+  "m-top-xl": "awsui_m-top-xl_18wu0_1q0fz_845",
+  "m-vertical-xl": "awsui_m-vertical-xl_18wu0_1q0fz_846",
+  "m-right-xl": "awsui_m-right-xl_18wu0_1q0fz_850",
+  "m-horizontal-xl": "awsui_m-horizontal-xl_18wu0_1q0fz_851",
+  "m-bottom-xl": "awsui_m-bottom-xl_18wu0_1q0fz_855",
+  "m-left-xl": "awsui_m-left-xl_18wu0_1q0fz_860",
+  "m-xxl": "awsui_m-xxl_18wu0_1q0fz_865",
+  "m-top-xxl": "awsui_m-top-xxl_18wu0_1q0fz_870",
+  "m-vertical-xxl": "awsui_m-vertical-xxl_18wu0_1q0fz_871",
+  "m-right-xxl": "awsui_m-right-xxl_18wu0_1q0fz_875",
+  "m-horizontal-xxl": "awsui_m-horizontal-xxl_18wu0_1q0fz_876",
+  "m-bottom-xxl": "awsui_m-bottom-xxl_18wu0_1q0fz_880",
+  "m-left-xxl": "awsui_m-left-xxl_18wu0_1q0fz_885",
+  "m-xxxl": "awsui_m-xxxl_18wu0_1q0fz_890",
+  "m-top-xxxl": "awsui_m-top-xxxl_18wu0_1q0fz_895",
+  "m-vertical-xxxl": "awsui_m-vertical-xxxl_18wu0_1q0fz_896",
+  "m-right-xxxl": "awsui_m-right-xxxl_18wu0_1q0fz_900",
+  "m-horizontal-xxxl": "awsui_m-horizontal-xxxl_18wu0_1q0fz_901",
+  "m-bottom-xxxl": "awsui_m-bottom-xxxl_18wu0_1q0fz_905",
+  "m-left-xxxl": "awsui_m-left-xxxl_18wu0_1q0fz_910",
+  "d-block": "awsui_d-block_18wu0_1q0fz_915",
+  "d-inline": "awsui_d-inline_18wu0_1q0fz_918",
+  "d-inline-block": "awsui_d-inline-block_18wu0_1q0fz_921",
+  "d-none": "awsui_d-none_18wu0_1q0fz_924",
+  "f-left": "awsui_f-left_18wu0_1q0fz_928",
+  "f-right": "awsui_f-right_18wu0_1q0fz_932",
+  "root": "awsui_root_18wu0_1q0fz_936"
 };