@cloudscape-design/components-themeable 3.0.1138 → 3.0.1139

package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/styles.scoped.css

@@ -150,7 +150,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_navigation-container_2p2ab_dik30_153:not(#\9) {
+.awsui_navigation-container_2p2ab_8qqrp_153:not(#\9) {
   position: sticky;
   z-index: 830;
   background-color: var(--color-background-container-content-aemn43, #ffffff);
@@ -161,27 +161,27 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   display: flex;
   flex-direction: column;
 }
-.awsui_navigation-container_2p2ab_dik30_153:not(#\9):not(.awsui_is-navigation-open_2p2ab_dik30_164) {
+.awsui_navigation-container_2p2ab_8qqrp_153:not(#\9):not(.awsui_is-navigation-open_2p2ab_8qqrp_164) {
   inline-size: 0px;
   display: none;
 }
-.awsui_navigation-container_2p2ab_dik30_153 > .awsui_navigation_2p2ab_dik30_153:not(#\9) {
+.awsui_navigation-container_2p2ab_8qqrp_153 > .awsui_navigation_2p2ab_8qqrp_153:not(#\9) {
   flex-grow: 1;
   block-size: 100%;
   overflow-y: auto;
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   overscroll-behavior-y: contain;
-  inline-size: var(--awsui-navigation-width-9t5olz);
+  inline-size: var(--awsui-navigation-width-d43v8n);
   position: relative;
 }
 @media (max-width: 688px) {
-  .awsui_navigation-container_2p2ab_dik30_153:not(#\9) {
-    --awsui-navigation-width-9t5olz: 100vw;
+  .awsui_navigation-container_2p2ab_8qqrp_153:not(#\9) {
+    --awsui-navigation-width-d43v8n: 100vw;
     z-index: 1001;
   }
 }
 
-.awsui_hide-navigation_2p2ab_dik30_184:not(#\9) {
+.awsui_hide-navigation_2p2ab_8qqrp_184:not(#\9) {
   position: absolute;
   inset-inline-end: var(--space-m-n2lypl, 16px);
   inset-block-start: 14px;

package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/styles.selectors.js

@@ -2,9 +2,9 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "navigation-container": "awsui_navigation-container_2p2ab_dik30_153",
-  "is-navigation-open": "awsui_is-navigation-open_2p2ab_dik30_164",
-  "navigation": "awsui_navigation_2p2ab_dik30_153",
-  "hide-navigation": "awsui_hide-navigation_2p2ab_dik30_184"
+  "navigation-container": "awsui_navigation-container_2p2ab_8qqrp_153",
+  "is-navigation-open": "awsui_is-navigation-open_2p2ab_8qqrp_164",
+  "navigation": "awsui_navigation_2p2ab_8qqrp_153",
+  "hide-navigation": "awsui_hide-navigation_2p2ab_8qqrp_184"
 };
   

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

@@ -27,17 +27,17 @@ export const SkeletonLayout = ({ registered, appLayoutProps, appLayoutState, too
     const { wrapperElAttributes, mainElAttributes, contentWrapperElAttributes, contentHeaderElAttributes, contentElAttributes, } = skeletonSlotsAttributes;
     const isWidgetLoaded = isWidgetReady(appLayoutState);
     return (React.createElement(VisualContext, { contextName: "app-layout-toolbar" },
-        React.createElement("div", Object.assign({}, getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata }), { ref: appLayoutState.rootRef, "data-awsui-app-layout-widget-loaded": isWidgetLoaded }, wrapperElAttributes, { className: (_a = wrapperElAttributes === null || wrapperElAttributes === void 0 ? void 0 : wrapperElAttributes.className) !== null && _a !== void 0 ? _a : clsx(styles.root, testutilStyles.root), style: (_b = wrapperElAttributes === null || wrapperElAttributes === void 0 ? void 0 : wrapperElAttributes.style) !== null && _b !== void 0 ? _b : {
+        React.createElement("div", { ...getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata }), ref: appLayoutState.rootRef, "data-awsui-app-layout-widget-loaded": isWidgetLoaded, ...wrapperElAttributes, className: (_a = wrapperElAttributes === null || wrapperElAttributes === void 0 ? void 0 : wrapperElAttributes.className) !== null && _a !== void 0 ? _a : clsx(styles.root, testutilStyles.root), style: (_b = wrapperElAttributes === null || wrapperElAttributes === void 0 ? void 0 : wrapperElAttributes.style) !== null && _b !== void 0 ? _b : {
                 blockSize: `calc(100vh - ${appLayoutProps.placement.insetBlockStart + appLayoutProps.placement.insetBlockEnd}px)`,
                 [customCssProps.navigationWidth]: `${navigationWidth}px`,
-            } }),
-            React.createElement(AppLayoutBeforeMainSlot, Object.assign({}, mergedProps)),
-            React.createElement("main", Object.assign({}, mainElAttributes, { className: (_c = mainElAttributes === null || mainElAttributes === void 0 ? void 0 : mainElAttributes.className) !== null && _c !== void 0 ? _c : styles['main-landmark'] }),
-                React.createElement(AppLayoutTopContentSlot, Object.assign({}, mergedProps)),
-                React.createElement("div", Object.assign({}, contentWrapperElAttributes, { className: (_d = contentWrapperElAttributes === null || contentWrapperElAttributes === void 0 ? void 0 : contentWrapperElAttributes.className) !== null && _d !== void 0 ? _d : clsx(styles.main, { [styles['main-disable-paddings']]: appLayoutProps.disableContentPaddings }) }),
-                    contentHeader && React.createElement("div", Object.assign({}, contentHeaderElAttributes), contentHeader),
-                    React.createElement("div", Object.assign({}, contentElAttributes, { className: (_e = contentElAttributes === null || contentElAttributes === void 0 ? void 0 : contentElAttributes.className) !== null && _e !== void 0 ? _e : testutilStyles.content }), registered ? content : null)),
-                React.createElement(AppLayoutBottomContentSlot, Object.assign({}, mergedProps))),
-            React.createElement(AppLayoutAfterMainSlot, Object.assign({}, mergedProps)))));
+            } },
+            React.createElement(AppLayoutBeforeMainSlot, { ...mergedProps }),
+            React.createElement("main", { ...mainElAttributes, className: (_c = mainElAttributes === null || mainElAttributes === void 0 ? void 0 : mainElAttributes.className) !== null && _c !== void 0 ? _c : styles['main-landmark'] },
+                React.createElement(AppLayoutTopContentSlot, { ...mergedProps }),
+                React.createElement("div", { ...contentWrapperElAttributes, className: (_d = contentWrapperElAttributes === null || contentWrapperElAttributes === void 0 ? void 0 : contentWrapperElAttributes.className) !== null && _d !== void 0 ? _d : clsx(styles.main, { [styles['main-disable-paddings']]: appLayoutProps.disableContentPaddings }) },
+                    contentHeader && React.createElement("div", { ...contentHeaderElAttributes }, contentHeader),
+                    React.createElement("div", { ...contentElAttributes, className: (_e = contentElAttributes === null || contentElAttributes === void 0 ? void 0 : contentElAttributes.className) !== null && _e !== void 0 ? _e : testutilStyles.content }, registered ? content : null)),
+                React.createElement(AppLayoutBottomContentSlot, { ...mergedProps })),
+            React.createElement(AppLayoutAfterMainSlot, { ...mergedProps }))));
 };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/skeleton/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { GeneratedAnalyticsMetadataAppLayoutToolbarComponent } from '../../../app-layout-toolbar/analytics-metadata/interfaces';\nimport VisualContext from '../../../internal/components/visual-context';\nimport customCssProps from '../../../internal/generated/custom-css-properties';\nimport { AppLayoutInternalProps, AppLayoutPendingState } from '../interfaces';\nimport {\n  AppLayoutAfterMainSlot,\n  AppLayoutBeforeMainSlot,\n  AppLayoutBottomContentSlot,\n  AppLayoutTopContentSlot,\n} from '../internal';\nimport { isWidgetReady } from '../state/invariants';\nimport { ToolbarProps } from '../toolbar';\nimport { SkeletonPartProps, SkeletonSlotsAttributes } from './interfaces';\n\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nexport interface SkeletonLayoutProps {\n  registered: boolean;\n  appLayoutProps: AppLayoutInternalProps;\n  appLayoutState: AppLayoutPendingState;\n  toolbarProps: ToolbarProps | null;\n  skeletonSlotsAttributes: SkeletonSlotsAttributes;\n}\n\nconst componentAnalyticsMetadata: GeneratedAnalyticsMetadataAppLayoutToolbarComponent = {\n  name: 'awsui.AppLayoutToolbar',\n  label: {\n    selector: 'h1',\n    root: 'body',\n  },\n};\n\nexport const SkeletonLayout = ({\n  registered,\n  appLayoutProps,\n  appLayoutState,\n  toolbarProps,\n  skeletonSlotsAttributes,\n}: SkeletonLayoutProps) => {\n  const { contentHeader, content, navigationWidth } = appLayoutProps;\n  const mergedProps: SkeletonPartProps = {\n    toolbarProps,\n    appLayoutProps,\n    appLayoutState,\n  };\n  const {\n    wrapperElAttributes,\n    mainElAttributes,\n    contentWrapperElAttributes,\n    contentHeaderElAttributes,\n    contentElAttributes,\n  } = skeletonSlotsAttributes;\n\n  const isWidgetLoaded = isWidgetReady(appLayoutState);\n\n  return (\n    <VisualContext contextName=\"app-layout-toolbar\">\n      <div\n        {...getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata })}\n        ref={appLayoutState.rootRef as React.Ref<HTMLDivElement>}\n        data-awsui-app-layout-widget-loaded={isWidgetLoaded}\n        {...wrapperElAttributes}\n        className={wrapperElAttributes?.className ?? clsx(styles.root, testutilStyles.root)}\n        style={\n          wrapperElAttributes?.style ?? {\n            blockSize: `calc(100vh - ${appLayoutProps.placement.insetBlockStart + appLayoutProps.placement.insetBlockEnd}px)`,\n            [customCssProps.navigationWidth]: `${navigationWidth}px`,\n          }\n        }\n      >\n        <AppLayoutBeforeMainSlot {...mergedProps} />\n        <main {...mainElAttributes} className={mainElAttributes?.className ?? styles['main-landmark']}>\n          <AppLayoutTopContentSlot {...mergedProps} />\n          <div\n            {...contentWrapperElAttributes}\n            className={\n              contentWrapperElAttributes?.className ??\n              clsx(styles.main, { [styles['main-disable-paddings']]: appLayoutProps.disableContentPaddings })\n            }\n          >\n            {contentHeader && <div {...contentHeaderElAttributes}>{contentHeader}</div>}\n            {/*delay rendering the content until registration of this instance is complete*/}\n            <div {...contentElAttributes} className={contentElAttributes?.className ?? testutilStyles.content}>\n              {registered ? content : null}\n            </div>\n          </div>\n          <AppLayoutBottomContentSlot {...mergedProps} />\n        </main>\n        <AppLayoutAfterMainSlot {...mergedProps} />\n      </div>\n    </VisualContext>\n  );\n};\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/skeleton/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { GeneratedAnalyticsMetadataAppLayoutToolbarComponent } from '../../../app-layout-toolbar/analytics-metadata/interfaces';\nimport VisualContext from '../../../internal/components/visual-context';\nimport customCssProps from '../../../internal/generated/custom-css-properties';\nimport { AppLayoutInternalProps, AppLayoutPendingState } from '../interfaces';\nimport {\n  AppLayoutAfterMainSlot,\n  AppLayoutBeforeMainSlot,\n  AppLayoutBottomContentSlot,\n  AppLayoutTopContentSlot,\n} from '../internal';\nimport { isWidgetReady } from '../state/invariants';\nimport { ToolbarProps } from '../toolbar';\nimport { SkeletonPartProps, SkeletonSlotsAttributes } from './interfaces';\n\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nexport interface SkeletonLayoutProps {\n  registered: boolean;\n  appLayoutProps: AppLayoutInternalProps;\n  appLayoutState: AppLayoutPendingState;\n  toolbarProps: ToolbarProps | null;\n  skeletonSlotsAttributes: SkeletonSlotsAttributes;\n}\n\nconst componentAnalyticsMetadata: GeneratedAnalyticsMetadataAppLayoutToolbarComponent = {\n  name: 'awsui.AppLayoutToolbar',\n  label: {\n    selector: 'h1',\n    root: 'body',\n  },\n};\n\nexport const SkeletonLayout = ({\n  registered,\n  appLayoutProps,\n  appLayoutState,\n  toolbarProps,\n  skeletonSlotsAttributes,\n}: SkeletonLayoutProps) => {\n  const { contentHeader, content, navigationWidth } = appLayoutProps;\n  const mergedProps: SkeletonPartProps = {\n    toolbarProps,\n    appLayoutProps,\n    appLayoutState,\n  };\n  const {\n    wrapperElAttributes,\n    mainElAttributes,\n    contentWrapperElAttributes,\n    contentHeaderElAttributes,\n    contentElAttributes,\n  } = skeletonSlotsAttributes;\n\n  const isWidgetLoaded = isWidgetReady(appLayoutState);\n\n  return (\n    <VisualContext contextName=\"app-layout-toolbar\">\n      <div\n        {...getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata })}\n        ref={appLayoutState.rootRef as React.Ref<HTMLDivElement>}\n        data-awsui-app-layout-widget-loaded={isWidgetLoaded}\n        {...wrapperElAttributes}\n        className={wrapperElAttributes?.className ?? clsx(styles.root, testutilStyles.root)}\n        style={\n          wrapperElAttributes?.style ?? {\n            blockSize: `calc(100vh - ${appLayoutProps.placement.insetBlockStart + appLayoutProps.placement.insetBlockEnd}px)`,\n            [customCssProps.navigationWidth]: `${navigationWidth}px`,\n          }\n        }\n      >\n        <AppLayoutBeforeMainSlot {...mergedProps} />\n        <main {...mainElAttributes} className={mainElAttributes?.className ?? styles['main-landmark']}>\n          <AppLayoutTopContentSlot {...mergedProps} />\n          <div\n            {...contentWrapperElAttributes}\n            className={\n              contentWrapperElAttributes?.className ??\n              clsx(styles.main, { [styles['main-disable-paddings']]: appLayoutProps.disableContentPaddings })\n            }\n          >\n            {contentHeader && <div {...contentHeaderElAttributes}>{contentHeader}</div>}\n            {/*delay rendering the content until registration of this instance is complete*/}\n            <div {...contentElAttributes} className={contentElAttributes?.className ?? testutilStyles.content}>\n              {registered ? content : null}\n            </div>\n          </div>\n          <AppLayoutBottomContentSlot {...mergedProps} />\n        </main>\n        <AppLayoutAfterMainSlot {...mergedProps} />\n      </div>\n    </VisualContext>\n  );\n};\n"]}

package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/slots.js

@@ -7,7 +7,10 @@ import { BreadcrumbsSlotContext } from '../contexts';
 import styles from './styles.css.js';
 export const ToolbarSlot = React.forwardRef(({ className, style, children }, ref) => {
     var _a;
-    return (React.createElement("section", { ref: ref, className: clsx(styles['toolbar-container'], className), style: Object.assign({ insetBlockStart: (_a = style === null || style === void 0 ? void 0 : style.insetBlockStart) !== null && _a !== void 0 ? _a : 0 }, style) }, children));
+    return (React.createElement("section", { ref: ref, className: clsx(styles['toolbar-container'], className), style: {
+            insetBlockStart: (_a = style === null || style === void 0 ? void 0 : style.insetBlockStart) !== null && _a !== void 0 ? _a : 0,
+            ...style,
+        } }, children));
 });
 export const NotificationsSlot = React.forwardRef(({ className, style, children }, ref) => (React.createElement("div", { ref: ref, className: clsx(styles['notifications-container'], className), style: style }, children)));
 const breadcrumbsSlotContextValue = { isInToolbar: true };
@@ -16,6 +19,6 @@ export function BreadcrumbsSlot({ ownBreadcrumbs, discoveredBreadcrumbs }) {
     return (React.createElement(BreadcrumbsSlotContext.Provider, { value: breadcrumbsSlotContextValue },
         React.createElement("div", { className: styles['breadcrumbs-own'] }, ownBreadcrumbs),
         discoveredBreadcrumbs && !isSSR && (React.createElement("div", { className: styles['breadcrumbs-discovered'] },
-            React.createElement(BreadcrumbGroupImplementation, Object.assign({}, discoveredBreadcrumbs, { "data-awsui-discovered-breadcrumbs": true, __injectAnalyticsComponentMetadata: true }))))));
+            React.createElement(BreadcrumbGroupImplementation, { ...discoveredBreadcrumbs, "data-awsui-discovered-breadcrumbs": true, __injectAnalyticsComponentMetadata: true })))));
 }
 //# sourceMappingURL=slots.js.map

package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/slots.js.map

@@ -1 +1 @@
-{"version":3,"file":"slots.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/skeleton/slots.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,6BAA6B,EAAE,MAAM,0CAA0C,CAAC;AAEzF,OAAO,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAErD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAQrC,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAgC,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAE,EAAE;;IAAC,OAAA,CAClH,iCACE,GAAG,EAAE,GAAqB,EAC1B,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,EAAE,SAAS,CAAC,EACvD,KAAK,kBACH,eAAe,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAAe,mCAAI,CAAC,IACzC,KAAK,KAGT,QAAQ,CACD,CACX,CAAA;CAAA,CAAC,CAAC;AAQH,MAAM,CAAC,MAAM,iBAAiB,GAAG,KAAK,CAAC,UAAU,CAC/C,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACvC,6BAAK,GAAG,EAAE,GAAqB,EAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,yBAAyB,CAAC,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,IACzG,QAAQ,CACL,CACP,CACF,CAAC;AAOF,MAAM,2BAA2B,GAAG,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;AAE1D,MAAM,UAAU,eAAe,CAAC,EAAE,cAAc,EAAE,qBAAqB,EAAwB;IAC7F,MAAM,KAAK,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC;IAE5C,OAAO,CACL,oBAAC,sBAAsB,CAAC,QAAQ,IAAC,KAAK,EAAE,2BAA2B;QACjE,6BAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC,IAAG,cAAc,CAAO;QAChE,qBAAqB,IAAI,CAAC,KAAK,IAAI,CAClC,6BAAK,SAAS,EAAE,MAAM,CAAC,wBAAwB,CAAC;YAC9C,oBAAC,6BAA6B,oBACxB,qBAAqB,yCACU,IAAI,EACvC,kCAAkC,EAAE,IAAI,IACxC,CACE,CACP,CAC+B,CACnC,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { BreadcrumbGroupImplementation } from '../../../breadcrumb-group/implementation';\nimport { BreadcrumbGroupProps } from '../../../breadcrumb-group/interfaces';\nimport { BreadcrumbsSlotContext } from '../contexts';\n\nimport styles from './styles.css.js';\n\ninterface ToolbarSlotProps {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n}\n\nexport const ToolbarSlot = React.forwardRef<HTMLElement, ToolbarSlotProps>(({ className, style, children }, ref) => (\n  <section\n    ref={ref as React.Ref<any>}\n    className={clsx(styles['toolbar-container'], className)}\n    style={{\n      insetBlockStart: style?.insetBlockStart ?? 0,\n      ...style,\n    }}\n  >\n    {children}\n  </section>\n));\n\ninterface NotificationsSlotProps {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n}\n\nexport const NotificationsSlot = React.forwardRef<HTMLElement, NotificationsSlotProps>(\n  ({ className, style, children }, ref) => (\n    <div ref={ref as React.Ref<any>} className={clsx(styles['notifications-container'], className)} style={style}>\n      {children}\n    </div>\n  )\n);\n\ninterface BreadcrumbsSlotProps {\n  ownBreadcrumbs: React.ReactNode;\n  discoveredBreadcrumbs?: BreadcrumbGroupProps | null;\n}\n\nconst breadcrumbsSlotContextValue = { isInToolbar: true };\n\nexport function BreadcrumbsSlot({ ownBreadcrumbs, discoveredBreadcrumbs }: BreadcrumbsSlotProps) {\n  const isSSR = typeof window === 'undefined';\n\n  return (\n    <BreadcrumbsSlotContext.Provider value={breadcrumbsSlotContextValue}>\n      <div className={styles['breadcrumbs-own']}>{ownBreadcrumbs}</div>\n      {discoveredBreadcrumbs && !isSSR && (\n        <div className={styles['breadcrumbs-discovered']}>\n          <BreadcrumbGroupImplementation\n            {...discoveredBreadcrumbs}\n            data-awsui-discovered-breadcrumbs={true}\n            __injectAnalyticsComponentMetadata={true}\n          />\n        </div>\n      )}\n    </BreadcrumbsSlotContext.Provider>\n  );\n}\n"]}
+{"version":3,"file":"slots.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/skeleton/slots.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,6BAA6B,EAAE,MAAM,0CAA0C,CAAC;AAEzF,OAAO,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAErD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAQrC,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAgC,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAE,EAAE;;IAAC,OAAA,CAClH,iCACE,GAAG,EAAE,GAAqB,EAC1B,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,EAAE,SAAS,CAAC,EACvD,KAAK,EAAE;YACL,eAAe,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAAe,mCAAI,CAAC;YAC5C,GAAG,KAAK;SACT,IAEA,QAAQ,CACD,CACX,CAAA;CAAA,CAAC,CAAC;AAQH,MAAM,CAAC,MAAM,iBAAiB,GAAG,KAAK,CAAC,UAAU,CAC/C,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACvC,6BAAK,GAAG,EAAE,GAAqB,EAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,yBAAyB,CAAC,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,IACzG,QAAQ,CACL,CACP,CACF,CAAC;AAOF,MAAM,2BAA2B,GAAG,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;AAE1D,MAAM,UAAU,eAAe,CAAC,EAAE,cAAc,EAAE,qBAAqB,EAAwB;IAC7F,MAAM,KAAK,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC;IAE5C,OAAO,CACL,oBAAC,sBAAsB,CAAC,QAAQ,IAAC,KAAK,EAAE,2BAA2B;QACjE,6BAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC,IAAG,cAAc,CAAO;QAChE,qBAAqB,IAAI,CAAC,KAAK,IAAI,CAClC,6BAAK,SAAS,EAAE,MAAM,CAAC,wBAAwB,CAAC;YAC9C,oBAAC,6BAA6B,OACxB,qBAAqB,uCACU,IAAI,EACvC,kCAAkC,EAAE,IAAI,GACxC,CACE,CACP,CAC+B,CACnC,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { BreadcrumbGroupImplementation } from '../../../breadcrumb-group/implementation';\nimport { BreadcrumbGroupProps } from '../../../breadcrumb-group/interfaces';\nimport { BreadcrumbsSlotContext } from '../contexts';\n\nimport styles from './styles.css.js';\n\ninterface ToolbarSlotProps {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n}\n\nexport const ToolbarSlot = React.forwardRef<HTMLElement, ToolbarSlotProps>(({ className, style, children }, ref) => (\n  <section\n    ref={ref as React.Ref<any>}\n    className={clsx(styles['toolbar-container'], className)}\n    style={{\n      insetBlockStart: style?.insetBlockStart ?? 0,\n      ...style,\n    }}\n  >\n    {children}\n  </section>\n));\n\ninterface NotificationsSlotProps {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n}\n\nexport const NotificationsSlot = React.forwardRef<HTMLElement, NotificationsSlotProps>(\n  ({ className, style, children }, ref) => (\n    <div ref={ref as React.Ref<any>} className={clsx(styles['notifications-container'], className)} style={style}>\n      {children}\n    </div>\n  )\n);\n\ninterface BreadcrumbsSlotProps {\n  ownBreadcrumbs: React.ReactNode;\n  discoveredBreadcrumbs?: BreadcrumbGroupProps | null;\n}\n\nconst breadcrumbsSlotContextValue = { isInToolbar: true };\n\nexport function BreadcrumbsSlot({ ownBreadcrumbs, discoveredBreadcrumbs }: BreadcrumbsSlotProps) {\n  const isSSR = typeof window === 'undefined';\n\n  return (\n    <BreadcrumbsSlotContext.Provider value={breadcrumbsSlotContextValue}>\n      <div className={styles['breadcrumbs-own']}>{ownBreadcrumbs}</div>\n      {discoveredBreadcrumbs && !isSSR && (\n        <div className={styles['breadcrumbs-discovered']}>\n          <BreadcrumbGroupImplementation\n            {...discoveredBreadcrumbs}\n            data-awsui-discovered-breadcrumbs={true}\n            __injectAnalyticsComponentMetadata={true}\n          />\n        </div>\n      )}\n    </BreadcrumbsSlotContext.Provider>\n  );\n}\n"]}

package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.css.js

@@ -1,32 +1,32 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_7nfqu_2ahww_153",
-  "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_2ahww_197",
-  "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_2ahww_202",
-  "drawer-expanded-mode": "awsui_drawer-expanded-mode_7nfqu_2ahww_217",
-  "ai-drawer-expanded-mode": "awsui_ai-drawer-expanded-mode_7nfqu_2ahww_220",
-  "bottom-drawer-expanded-mode": "awsui_bottom-drawer-expanded-mode_7nfqu_2ahww_223",
-  "ai-drawer": "awsui_ai-drawer_7nfqu_2ahww_220",
-  "navigation": "awsui_navigation_7nfqu_2ahww_230",
-  "tools": "awsui_tools_7nfqu_2ahww_231",
-  "global-tools": "awsui_global-tools_7nfqu_2ahww_232",
-  "bottom-tool": "awsui_bottom-tool_7nfqu_2ahww_233",
-  "tools-open": "awsui_tools-open_7nfqu_2ahww_290",
-  "split-panel-side": "awsui_split-panel-side_7nfqu_2ahww_304",
-  "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_2ahww_311",
-  "panel-hidden": "awsui_panel-hidden_7nfqu_2ahww_324",
-  "toolbar-container": "awsui_toolbar-container_7nfqu_2ahww_334",
-  "notifications-container": "awsui_notifications-container_7nfqu_2ahww_341",
-  "notifications-background": "awsui_notifications-background_7nfqu_2ahww_345",
-  "main-landmark": "awsui_main-landmark_7nfqu_2ahww_356",
-  "main": "awsui_main_7nfqu_2ahww_356",
-  "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_2ahww_365",
-  "content-header": "awsui_content-header_7nfqu_2ahww_375",
-  "content": "awsui_content_7nfqu_2ahww_375",
-  "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_2ahww_385",
-  "hidden": "awsui_hidden_7nfqu_2ahww_390",
-  "breadcrumbs-own": "awsui_breadcrumbs-own_7nfqu_2ahww_394",
-  "breadcrumbs-discovered": "awsui_breadcrumbs-discovered_7nfqu_2ahww_394"
+  "root": "awsui_root_7nfqu_brc8f_153",
+  "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_brc8f_197",
+  "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_brc8f_202",
+  "drawer-expanded-mode": "awsui_drawer-expanded-mode_7nfqu_brc8f_217",
+  "ai-drawer-expanded-mode": "awsui_ai-drawer-expanded-mode_7nfqu_brc8f_220",
+  "bottom-drawer-expanded-mode": "awsui_bottom-drawer-expanded-mode_7nfqu_brc8f_223",
+  "ai-drawer": "awsui_ai-drawer_7nfqu_brc8f_220",
+  "navigation": "awsui_navigation_7nfqu_brc8f_230",
+  "tools": "awsui_tools_7nfqu_brc8f_231",
+  "global-tools": "awsui_global-tools_7nfqu_brc8f_232",
+  "bottom-tool": "awsui_bottom-tool_7nfqu_brc8f_233",
+  "tools-open": "awsui_tools-open_7nfqu_brc8f_290",
+  "split-panel-side": "awsui_split-panel-side_7nfqu_brc8f_304",
+  "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_brc8f_311",
+  "panel-hidden": "awsui_panel-hidden_7nfqu_brc8f_324",
+  "toolbar-container": "awsui_toolbar-container_7nfqu_brc8f_334",
+  "notifications-container": "awsui_notifications-container_7nfqu_brc8f_341",
+  "notifications-background": "awsui_notifications-background_7nfqu_brc8f_345",
+  "main-landmark": "awsui_main-landmark_7nfqu_brc8f_356",
+  "main": "awsui_main_7nfqu_brc8f_356",
+  "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_brc8f_365",
+  "content-header": "awsui_content-header_7nfqu_brc8f_375",
+  "content": "awsui_content_7nfqu_brc8f_375",
+  "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_brc8f_385",
+  "hidden": "awsui_hidden_7nfqu_brc8f_390",
+  "breadcrumbs-own": "awsui_breadcrumbs-own_7nfqu_brc8f_394",
+  "breadcrumbs-discovered": "awsui_breadcrumbs-discovered_7nfqu_brc8f_394"
 };
   

package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.scoped.css

@@ -150,7 +150,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_7nfqu_2ahww_153:not(#\9) {
+.awsui_root_7nfqu_brc8f_153:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -182,72 +182,72 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -moz-osx-font-smoothing: auto;
   color: var(--color-text-body-default-5qid0u, #16191f);
   background-color: var(--color-background-layout-main-05m5y6, #f2f3f3);
-  --awsui-max-content-width-9t5olz: 100%;
+  --awsui-max-content-width-d43v8n: 100%;
   display: grid;
   grid-template-areas: "toolbar    toolbar     toolbar" ".       notifications  ." ".           main       .";
   grid-template-columns: var(--space-layout-content-horizontal-q3zhej, 40px) minmax(0, 1fr) var(--space-layout-content-horizontal-q3zhej, 40px);
   grid-template-rows: min-content min-content 1fr;
 }
 @media (min-width: 689px) {
-  .awsui_root_7nfqu_2ahww_153:not(#\9) {
+  .awsui_root_7nfqu_brc8f_153:not(#\9) {
     grid-template-areas: "ai-drawer toolbar    toolbar      toolbar       toolbar   toolbar         toolbar  toolbar" "ai-drawer navigation .         notifications    .         sideSplitPanel  tools    global-tools" "ai-drawer navigation .             main         .         sideSplitPanel  tools    global-tools" "ai-drawer bottom-tool bottom-tool bottom-tool  bottom-tool  bottom-tool bottom-tool global-tools";
-    grid-template-columns: min-content min-content minmax(var(--space-layout-content-horizontal-q3zhej, 40px), 1fr) minmax(0, var(--awsui-max-content-width-9t5olz)) minmax(var(--space-layout-content-horizontal-q3zhej, 40px), 1fr) min-content min-content;
+    grid-template-columns: min-content min-content minmax(var(--space-layout-content-horizontal-q3zhej, 40px), 1fr) minmax(0, var(--awsui-max-content-width-d43v8n)) minmax(var(--space-layout-content-horizontal-q3zhej, 40px), 1fr) min-content min-content;
     grid-template-rows: min-content min-content 1fr min-content min-content;
   }
-  .awsui_root_7nfqu_2ahww_153.awsui_has-adaptive-widths-default_7nfqu_2ahww_197:not(#\9) {
-    --awsui-max-content-width-9t5olz: 1620px;
+  .awsui_root_7nfqu_brc8f_153.awsui_has-adaptive-widths-default_7nfqu_brc8f_197:not(#\9) {
+    --awsui-max-content-width-d43v8n: 1620px;
   }
 }
 @media (min-width: 689px) and (min-width: 1401px) {
-  .awsui_root_7nfqu_2ahww_153.awsui_has-adaptive-widths-dashboard_7nfqu_2ahww_202:not(#\9) {
-    --awsui-max-content-width-9t5olz: 1280px;
+  .awsui_root_7nfqu_brc8f_153.awsui_has-adaptive-widths-dashboard_7nfqu_brc8f_202:not(#\9) {
+    --awsui-max-content-width-d43v8n: 1280px;
   }
 }
 @media (min-width: 689px) and (min-width: 1921px) {
-  .awsui_root_7nfqu_2ahww_153.awsui_has-adaptive-widths-dashboard_7nfqu_2ahww_202:not(#\9) {
-    --awsui-max-content-width-9t5olz: 1620px;
+  .awsui_root_7nfqu_brc8f_153.awsui_has-adaptive-widths-dashboard_7nfqu_brc8f_202:not(#\9) {
+    --awsui-max-content-width-d43v8n: 1620px;
   }
 }
 @media (min-width: 689px) and (min-width: 2541px) {
-  .awsui_root_7nfqu_2ahww_153.awsui_has-adaptive-widths-dashboard_7nfqu_2ahww_202:not(#\9) {
-    --awsui-max-content-width-9t5olz: 2160px;
+  .awsui_root_7nfqu_brc8f_153.awsui_has-adaptive-widths-dashboard_7nfqu_brc8f_202:not(#\9) {
+    --awsui-max-content-width-d43v8n: 2160px;
   }
 }
 @media (min-width: 689px) {
-  .awsui_root_7nfqu_2ahww_153.awsui_drawer-expanded-mode_7nfqu_2ahww_217:not(#\9) {
+  .awsui_root_7nfqu_brc8f_153.awsui_drawer-expanded-mode_7nfqu_brc8f_217:not(#\9) {
     grid-template-columns: 0 0 0 0 0 0 0 auto;
   }
-  .awsui_root_7nfqu_2ahww_153.awsui_drawer-expanded-mode_7nfqu_2ahww_217.awsui_ai-drawer-expanded-mode_7nfqu_2ahww_220:not(#\9) {
+  .awsui_root_7nfqu_brc8f_153.awsui_drawer-expanded-mode_7nfqu_brc8f_217.awsui_ai-drawer-expanded-mode_7nfqu_brc8f_220:not(#\9) {
     grid-template-columns: auto 0 0 0 0 0 0 0;
   }
-  .awsui_root_7nfqu_2ahww_153.awsui_drawer-expanded-mode_7nfqu_2ahww_217.awsui_bottom-drawer-expanded-mode_7nfqu_2ahww_223:not(#\9) {
+  .awsui_root_7nfqu_brc8f_153.awsui_drawer-expanded-mode_7nfqu_brc8f_217.awsui_bottom-drawer-expanded-mode_7nfqu_brc8f_223:not(#\9) {
     grid-template-rows: auto;
     grid-template-columns: 0 0 0 0 0 auto 0 0;
   }
 }
 
-.awsui_ai-drawer_7nfqu_2ahww_220:not(#\9),
-.awsui_navigation_7nfqu_2ahww_230:not(#\9),
-.awsui_tools_7nfqu_2ahww_231:not(#\9),
-.awsui_global-tools_7nfqu_2ahww_232:not(#\9),
-.awsui_bottom-tool_7nfqu_2ahww_233:not(#\9) {
+.awsui_ai-drawer_7nfqu_brc8f_220:not(#\9),
+.awsui_navigation_7nfqu_brc8f_230:not(#\9),
+.awsui_tools_7nfqu_brc8f_231:not(#\9),
+.awsui_global-tools_7nfqu_brc8f_232:not(#\9),
+.awsui_bottom-tool_7nfqu_brc8f_233:not(#\9) {
   grid-row: 1/-1;
   grid-column: 1/-1;
   background: var(--color-background-container-content-aemn43, #ffffff);
   opacity: 1;
 }
 @media (max-width: 688px) {
-  .awsui_ai-drawer_7nfqu_2ahww_220:not(#\9),
-  .awsui_navigation_7nfqu_2ahww_230:not(#\9),
-  .awsui_tools_7nfqu_2ahww_231:not(#\9),
-  .awsui_global-tools_7nfqu_2ahww_232:not(#\9),
-  .awsui_bottom-tool_7nfqu_2ahww_233:not(#\9) {
+  .awsui_ai-drawer_7nfqu_brc8f_220:not(#\9),
+  .awsui_navigation_7nfqu_brc8f_230:not(#\9),
+  .awsui_tools_7nfqu_brc8f_231:not(#\9),
+  .awsui_global-tools_7nfqu_brc8f_232:not(#\9),
+  .awsui_bottom-tool_7nfqu_brc8f_233:not(#\9) {
     inline-size: 100%;
   }
 }
 
 @media (min-width: 689px) {
-  .awsui_bottom-tool_7nfqu_2ahww_233:not(#\9) {
+  .awsui_bottom-tool_7nfqu_brc8f_233:not(#\9) {
     grid-area: bottom-tool;
     position: sticky;
     inset-block-end: 0;
@@ -257,43 +257,43 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
 }
 
 @media (min-width: 689px) {
-  .awsui_ai-drawer_7nfqu_2ahww_220:not(#\9) {
+  .awsui_ai-drawer_7nfqu_brc8f_220:not(#\9) {
     grid-area: ai-drawer;
     position: sticky;
   }
 }
 
-.awsui_navigation_7nfqu_2ahww_230:not(#\9) {
+.awsui_navigation_7nfqu_brc8f_230:not(#\9) {
   z-index: 830;
 }
 @media (min-width: 689px) {
-  .awsui_navigation_7nfqu_2ahww_230:not(#\9) {
+  .awsui_navigation_7nfqu_brc8f_230:not(#\9) {
     grid-area: navigation;
-    inline-size: var(--awsui-navigation-width-9t5olz);
+    inline-size: var(--awsui-navigation-width-d43v8n);
     border-inline-end: var(--border-divider-section-width-sznrdy, 1px) solid var(--color-border-layout-ovzonx, #d5dbdb);
   }
 }
 @media (max-width: 688px) {
-  .awsui_navigation_7nfqu_2ahww_230:not(#\9) {
+  .awsui_navigation_7nfqu_brc8f_230:not(#\9) {
     z-index: 1001;
   }
 }
 
 @media (min-width: 689px) {
-  .awsui_tools_7nfqu_2ahww_231:not(#\9) {
+  .awsui_tools_7nfqu_brc8f_231:not(#\9) {
     grid-area: tools;
     /* stylelint-disable plugin/no-unsupported-browser-features */
   }
-  .awsui_tools_7nfqu_2ahww_231:not(#\9):not(:has(> [data-testid])) {
-    inline-size: var(--awsui-tools-width-9t5olz);
+  .awsui_tools_7nfqu_brc8f_231:not(#\9):not(:has(> [data-testid])) {
+    inline-size: var(--awsui-tools-width-d43v8n);
   }
-  .awsui_tools_7nfqu_2ahww_231:not(#\9):not(:has(> [data-testid])).awsui_tools-open_7nfqu_2ahww_290 {
+  .awsui_tools_7nfqu_brc8f_231:not(#\9):not(:has(> [data-testid])).awsui_tools-open_7nfqu_brc8f_290 {
     border-inline-start: var(--border-divider-section-width-sznrdy, 1px) solid var(--color-border-layout-ovzonx, #d5dbdb);
   }
 }
 
 @media (min-width: 689px) {
-  .awsui_global-tools_7nfqu_2ahww_232:not(#\9) {
+  .awsui_global-tools_7nfqu_brc8f_232:not(#\9) {
     display: flex;
     grid-area: global-tools;
     justify-content: flex-end;
@@ -301,14 +301,14 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
 }
 
 @media (min-width: 689px) {
-  .awsui_split-panel-side_7nfqu_2ahww_304:not(#\9) {
+  .awsui_split-panel-side_7nfqu_brc8f_304:not(#\9) {
     grid-area: sideSplitPanel;
     border-inline-start: var(--border-divider-section-width-sznrdy, 1px) solid var(--color-border-layout-ovzonx, #d5dbdb);
     opacity: 1;
   }
 }
 
-.awsui_split-panel-bottom_7nfqu_2ahww_311:not(#\9) {
+.awsui_split-panel-bottom_7nfqu_brc8f_311:not(#\9) {
   position: sticky;
   z-index: 840;
   align-self: end;
@@ -316,81 +316,81 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   grid-column: 1/-1;
 }
 @media (min-width: 689px) {
-  .awsui_split-panel-bottom_7nfqu_2ahww_311:not(#\9) {
+  .awsui_split-panel-bottom_7nfqu_brc8f_311:not(#\9) {
     grid-column: 3/6;
   }
 }
 
-.awsui_panel-hidden_7nfqu_2ahww_324:not(#\9) {
+.awsui_panel-hidden_7nfqu_brc8f_324:not(#\9) {
   border-block: none;
   border-inline: none;
   opacity: 0;
   z-index: 0;
 }
-.awsui_panel-hidden_7nfqu_2ahww_324.awsui_navigation_7nfqu_2ahww_230:not(#\9), .awsui_panel-hidden_7nfqu_2ahww_324.awsui_tools_7nfqu_2ahww_231:not(#\9), .awsui_panel-hidden_7nfqu_2ahww_324.awsui_global-tools_7nfqu_2ahww_232:not(#\9) {
+.awsui_panel-hidden_7nfqu_brc8f_324.awsui_navigation_7nfqu_brc8f_230:not(#\9), .awsui_panel-hidden_7nfqu_brc8f_324.awsui_tools_7nfqu_brc8f_231:not(#\9), .awsui_panel-hidden_7nfqu_brc8f_324.awsui_global-tools_7nfqu_brc8f_232:not(#\9) {
   inline-size: 0px;
 }
 
-.awsui_toolbar-container_7nfqu_2ahww_334:not(#\9) {
+.awsui_toolbar-container_7nfqu_brc8f_334:not(#\9) {
   grid-area: toolbar;
   block-size: 42px;
   border-block-end: var(--border-divider-section-width-sznrdy, 1px) solid var(--color-border-layout-ovzonx, #d5dbdb);
   box-sizing: border-box;
 }
 
-.awsui_notifications-container_7nfqu_2ahww_341:not(#\9) {
+.awsui_notifications-container_7nfqu_brc8f_341:not(#\9) {
   grid-area: notifications;
 }
 
-.awsui_notifications-background_7nfqu_2ahww_345:not(#\9) {
+.awsui_notifications-background_7nfqu_brc8f_345:not(#\9) {
   background: var(--color-background-layout-main-05m5y6, #f2f3f3);
   grid-area: notifications;
   grid-column: 1/-1;
 }
 @media (min-width: 689px) {
-  .awsui_notifications-background_7nfqu_2ahww_345:not(#\9) {
+  .awsui_notifications-background_7nfqu_brc8f_345:not(#\9) {
     grid-column: 3/6;
   }
 }
 
-.awsui_main-landmark_7nfqu_2ahww_356:not(#\9) {
+.awsui_main-landmark_7nfqu_brc8f_356:not(#\9) {
   display: contents;
 }
 
-.awsui_main_7nfqu_2ahww_356:not(#\9) {
+.awsui_main_7nfqu_brc8f_356:not(#\9) {
   grid-area: main;
   margin-block-start: var(--space-scaled-s-gjhvjd, 12px);
   margin-block-end: var(--space-layout-content-bottom-iu1izz, 20px);
 }
-.awsui_main-disable-paddings_7nfqu_2ahww_365:not(#\9) {
+.awsui_main-disable-paddings_7nfqu_brc8f_365:not(#\9) {
   margin-block: 0;
   grid-column: 1/-1;
 }
 @media (min-width: 689px) {
-  .awsui_main-disable-paddings_7nfqu_2ahww_365:not(#\9) {
+  .awsui_main-disable-paddings_7nfqu_brc8f_365:not(#\9) {
     grid-column: 3/6;
   }
 }
 
-.awsui_content-header_7nfqu_2ahww_375:not(#\9) {
+.awsui_content-header_7nfqu_brc8f_375:not(#\9) {
   margin-block-end: var(--space-content-header-padding-bottom-hjkugf, 16px);
 }
 
-.awsui_content_7nfqu_2ahww_375:not(#\9) {
+.awsui_content_7nfqu_brc8f_375:not(#\9) {
   display: contents;
 }
 
 /* stylelint-disable-next-line selector-combinator-disallowed-list, selector-max-universal */
 @media (max-width: 688px) {
-  .awsui_unfocusable-mobile_7nfqu_2ahww_385 *:not(#\9) {
+  .awsui_unfocusable-mobile_7nfqu_brc8f_385 *:not(#\9) {
     visibility: hidden;
   }
 }
 
-.awsui_hidden_7nfqu_2ahww_390:not(#\9) {
+.awsui_hidden_7nfqu_brc8f_390:not(#\9) {
   display: none;
 }
 
-.awsui_breadcrumbs-own_7nfqu_2ahww_394:not(#\9):not(:empty) + .awsui_breadcrumbs-discovered_7nfqu_2ahww_394 {
+.awsui_breadcrumbs-own_7nfqu_brc8f_394:not(#\9):not(:empty) + .awsui_breadcrumbs-discovered_7nfqu_brc8f_394 {
   display: none;
 }

package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.selectors.js

@@ -2,32 +2,32 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_7nfqu_2ahww_153",
-  "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_2ahww_197",
-  "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_2ahww_202",
-  "drawer-expanded-mode": "awsui_drawer-expanded-mode_7nfqu_2ahww_217",
-  "ai-drawer-expanded-mode": "awsui_ai-drawer-expanded-mode_7nfqu_2ahww_220",
-  "bottom-drawer-expanded-mode": "awsui_bottom-drawer-expanded-mode_7nfqu_2ahww_223",
-  "ai-drawer": "awsui_ai-drawer_7nfqu_2ahww_220",
-  "navigation": "awsui_navigation_7nfqu_2ahww_230",
-  "tools": "awsui_tools_7nfqu_2ahww_231",
-  "global-tools": "awsui_global-tools_7nfqu_2ahww_232",
-  "bottom-tool": "awsui_bottom-tool_7nfqu_2ahww_233",
-  "tools-open": "awsui_tools-open_7nfqu_2ahww_290",
-  "split-panel-side": "awsui_split-panel-side_7nfqu_2ahww_304",
-  "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_2ahww_311",
-  "panel-hidden": "awsui_panel-hidden_7nfqu_2ahww_324",
-  "toolbar-container": "awsui_toolbar-container_7nfqu_2ahww_334",
-  "notifications-container": "awsui_notifications-container_7nfqu_2ahww_341",
-  "notifications-background": "awsui_notifications-background_7nfqu_2ahww_345",
-  "main-landmark": "awsui_main-landmark_7nfqu_2ahww_356",
-  "main": "awsui_main_7nfqu_2ahww_356",
-  "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_2ahww_365",
-  "content-header": "awsui_content-header_7nfqu_2ahww_375",
-  "content": "awsui_content_7nfqu_2ahww_375",
-  "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_2ahww_385",
-  "hidden": "awsui_hidden_7nfqu_2ahww_390",
-  "breadcrumbs-own": "awsui_breadcrumbs-own_7nfqu_2ahww_394",
-  "breadcrumbs-discovered": "awsui_breadcrumbs-discovered_7nfqu_2ahww_394"
+  "root": "awsui_root_7nfqu_brc8f_153",
+  "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_brc8f_197",
+  "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_brc8f_202",
+  "drawer-expanded-mode": "awsui_drawer-expanded-mode_7nfqu_brc8f_217",
+  "ai-drawer-expanded-mode": "awsui_ai-drawer-expanded-mode_7nfqu_brc8f_220",
+  "bottom-drawer-expanded-mode": "awsui_bottom-drawer-expanded-mode_7nfqu_brc8f_223",
+  "ai-drawer": "awsui_ai-drawer_7nfqu_brc8f_220",
+  "navigation": "awsui_navigation_7nfqu_brc8f_230",
+  "tools": "awsui_tools_7nfqu_brc8f_231",
+  "global-tools": "awsui_global-tools_7nfqu_brc8f_232",
+  "bottom-tool": "awsui_bottom-tool_7nfqu_brc8f_233",
+  "tools-open": "awsui_tools-open_7nfqu_brc8f_290",
+  "split-panel-side": "awsui_split-panel-side_7nfqu_brc8f_304",
+  "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_brc8f_311",
+  "panel-hidden": "awsui_panel-hidden_7nfqu_brc8f_324",
+  "toolbar-container": "awsui_toolbar-container_7nfqu_brc8f_334",
+  "notifications-container": "awsui_notifications-container_7nfqu_brc8f_341",
+  "notifications-background": "awsui_notifications-background_7nfqu_brc8f_345",
+  "main-landmark": "awsui_main-landmark_7nfqu_brc8f_356",
+  "main": "awsui_main_7nfqu_brc8f_356",
+  "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_brc8f_365",
+  "content-header": "awsui_content-header_7nfqu_brc8f_375",
+  "content": "awsui_content_7nfqu_brc8f_375",
+  "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_brc8f_385",
+  "hidden": "awsui_hidden_7nfqu_brc8f_390",
+  "breadcrumbs-own": "awsui_breadcrumbs-own_7nfqu_brc8f_394",
+  "breadcrumbs-discovered": "awsui_breadcrumbs-discovered_7nfqu_brc8f_394"
 };
   

package/lib/internal/template/app-layout/visual-refresh-toolbar/split-panel/index.js

@@ -7,7 +7,7 @@ import styles from './styles.css.js';
 export function AppLayoutSplitPanelDrawerSideImplementation({ children, appLayoutInternals, splitPanelInternals, bottomDrawerReportedSize, }) {
     const { splitPanelControlId, placement, verticalOffsets, isMobile, splitPanelAnimationDisabled } = appLayoutInternals;
     const { drawerTopOffset, drawerHeight } = getDrawerStyles(verticalOffsets, isMobile, placement, isMobile ? 0 : (bottomDrawerReportedSize !== null && bottomDrawerReportedSize !== void 0 ? bottomDrawerReportedSize : 0));
-    return (React.createElement(SplitPanelProvider, Object.assign({}, splitPanelInternals, { animationDisabled: splitPanelAnimationDisabled }),
+    return (React.createElement(SplitPanelProvider, { ...splitPanelInternals, animationDisabled: splitPanelAnimationDisabled },
         React.createElement("section", { id: splitPanelControlId, className: styles['split-panel-side'], style: {
                 blockSize: drawerHeight,
                 insetBlockStart: drawerTopOffset,
@@ -15,7 +15,7 @@ export function AppLayoutSplitPanelDrawerSideImplementation({ children, appLayou
 }
 export function AppLayoutSplitPanelDrawerBottomImplementation({ children, splitPanelInternals, appLayoutInternals, }) {
     const { splitPanelControlId, splitPanelAnimationDisabled } = appLayoutInternals;
-    return (React.createElement(SplitPanelProvider, Object.assign({}, splitPanelInternals, { animationDisabled: splitPanelAnimationDisabled }),
+    return (React.createElement(SplitPanelProvider, { ...splitPanelInternals, animationDisabled: splitPanelAnimationDisabled },
         React.createElement("section", { id: splitPanelControlId }, children)));
 }
 //# sourceMappingURL=index.js.map

package/lib/internal/template/app-layout/visual-refresh-toolbar/split-panel/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/split-panel/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAA2B,MAAM,mBAAmB,CAAC;AAChF,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AASrC,MAAM,UAAU,2CAA2C,CAAC,EAC1D,QAAQ,EACR,kBAAkB,EAClB,mBAAmB,EACnB,wBAAwB,GACyB;IACjD,MAAM,EAAE,mBAAmB,EAAE,SAAS,EAAE,eAAe,EAAE,QAAQ,EAAE,2BAA2B,EAAE,GAAG,kBAAkB,CAAC;IACtH,MAAM,EAAE,eAAe,EAAE,YAAY,EAAE,GAAG,eAAe,CACvD,eAAe,EACf,QAAQ,EACR,SAAS,EACT,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,wBAAwB,aAAxB,wBAAwB,cAAxB,wBAAwB,GAAI,CAAC,CAAC,CAC/C,CAAC;IAEF,OAAO,CACL,oBAAC,kBAAkB,oBAAK,mBAAmB,IAAE,iBAAiB,EAAE,2BAA2B;QACzF,iCACE,EAAE,EAAE,mBAAmB,EACvB,SAAS,EAAE,MAAM,CAAC,kBAAkB,CAAC,EACrC,KAAK,EAAE;gBACL,SAAS,EAAE,YAAY;gBACvB,eAAe,EAAE,eAAe;aACjC,IAEA,QAAQ,CACD,CACS,CACtB,CAAC;AACJ,CAAC;AAQD,MAAM,UAAU,6CAA6C,CAAC,EAC5D,QAAQ,EACR,mBAAmB,EACnB,kBAAkB,GACiC;IACnD,MAAM,EAAE,mBAAmB,EAAE,2BAA2B,EAAE,GAAG,kBAAkB,CAAC;IAChF,OAAO,CACL,oBAAC,kBAAkB,oBAAK,mBAAmB,IAAE,iBAAiB,EAAE,2BAA2B;QACzF,iCAAS,EAAE,EAAE,mBAAmB,IAAG,QAAQ,CAAW,CACnC,CACtB,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { SplitPanelProvider, SplitPanelProviderProps } from '../../split-panel';\nimport { getDrawerStyles } from '../compute-layout';\nimport { AppLayoutInternals } from '../interfaces';\n\nimport styles from './styles.css.js';\n\ninterface AppLayoutSplitPanelDrawerSideImplementationProps {\n  appLayoutInternals: AppLayoutInternals;\n  splitPanelInternals: SplitPanelProviderProps;\n  bottomDrawerReportedSize?: number;\n  children: React.ReactNode;\n}\n\nexport function AppLayoutSplitPanelDrawerSideImplementation({\n  children,\n  appLayoutInternals,\n  splitPanelInternals,\n  bottomDrawerReportedSize,\n}: AppLayoutSplitPanelDrawerSideImplementationProps) {\n  const { splitPanelControlId, placement, verticalOffsets, isMobile, splitPanelAnimationDisabled } = appLayoutInternals;\n  const { drawerTopOffset, drawerHeight } = getDrawerStyles(\n    verticalOffsets,\n    isMobile,\n    placement,\n    isMobile ? 0 : (bottomDrawerReportedSize ?? 0)\n  );\n\n  return (\n    <SplitPanelProvider {...splitPanelInternals} animationDisabled={splitPanelAnimationDisabled}>\n      <section\n        id={splitPanelControlId}\n        className={styles['split-panel-side']}\n        style={{\n          blockSize: drawerHeight,\n          insetBlockStart: drawerTopOffset,\n        }}\n      >\n        {children}\n      </section>\n    </SplitPanelProvider>\n  );\n}\n\ninterface AppLayoutSplitPanelDrawerBottomImplementationProps {\n  appLayoutInternals: AppLayoutInternals;\n  splitPanelInternals: SplitPanelProviderProps;\n  children: React.ReactNode;\n}\n\nexport function AppLayoutSplitPanelDrawerBottomImplementation({\n  children,\n  splitPanelInternals,\n  appLayoutInternals,\n}: AppLayoutSplitPanelDrawerBottomImplementationProps) {\n  const { splitPanelControlId, splitPanelAnimationDisabled } = appLayoutInternals;\n  return (\n    <SplitPanelProvider {...splitPanelInternals} animationDisabled={splitPanelAnimationDisabled}>\n      <section id={splitPanelControlId}>{children}</section>\n    </SplitPanelProvider>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/split-panel/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAA2B,MAAM,mBAAmB,CAAC;AAChF,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AASrC,MAAM,UAAU,2CAA2C,CAAC,EAC1D,QAAQ,EACR,kBAAkB,EAClB,mBAAmB,EACnB,wBAAwB,GACyB;IACjD,MAAM,EAAE,mBAAmB,EAAE,SAAS,EAAE,eAAe,EAAE,QAAQ,EAAE,2BAA2B,EAAE,GAAG,kBAAkB,CAAC;IACtH,MAAM,EAAE,eAAe,EAAE,YAAY,EAAE,GAAG,eAAe,CACvD,eAAe,EACf,QAAQ,EACR,SAAS,EACT,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,wBAAwB,aAAxB,wBAAwB,cAAxB,wBAAwB,GAAI,CAAC,CAAC,CAC/C,CAAC;IAEF,OAAO,CACL,oBAAC,kBAAkB,OAAK,mBAAmB,EAAE,iBAAiB,EAAE,2BAA2B;QACzF,iCACE,EAAE,EAAE,mBAAmB,EACvB,SAAS,EAAE,MAAM,CAAC,kBAAkB,CAAC,EACrC,KAAK,EAAE;gBACL,SAAS,EAAE,YAAY;gBACvB,eAAe,EAAE,eAAe;aACjC,IAEA,QAAQ,CACD,CACS,CACtB,CAAC;AACJ,CAAC;AAQD,MAAM,UAAU,6CAA6C,CAAC,EAC5D,QAAQ,EACR,mBAAmB,EACnB,kBAAkB,GACiC;IACnD,MAAM,EAAE,mBAAmB,EAAE,2BAA2B,EAAE,GAAG,kBAAkB,CAAC;IAChF,OAAO,CACL,oBAAC,kBAAkB,OAAK,mBAAmB,EAAE,iBAAiB,EAAE,2BAA2B;QACzF,iCAAS,EAAE,EAAE,mBAAmB,IAAG,QAAQ,CAAW,CACnC,CACtB,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { SplitPanelProvider, SplitPanelProviderProps } from '../../split-panel';\nimport { getDrawerStyles } from '../compute-layout';\nimport { AppLayoutInternals } from '../interfaces';\n\nimport styles from './styles.css.js';\n\ninterface AppLayoutSplitPanelDrawerSideImplementationProps {\n  appLayoutInternals: AppLayoutInternals;\n  splitPanelInternals: SplitPanelProviderProps;\n  bottomDrawerReportedSize?: number;\n  children: React.ReactNode;\n}\n\nexport function AppLayoutSplitPanelDrawerSideImplementation({\n  children,\n  appLayoutInternals,\n  splitPanelInternals,\n  bottomDrawerReportedSize,\n}: AppLayoutSplitPanelDrawerSideImplementationProps) {\n  const { splitPanelControlId, placement, verticalOffsets, isMobile, splitPanelAnimationDisabled } = appLayoutInternals;\n  const { drawerTopOffset, drawerHeight } = getDrawerStyles(\n    verticalOffsets,\n    isMobile,\n    placement,\n    isMobile ? 0 : (bottomDrawerReportedSize ?? 0)\n  );\n\n  return (\n    <SplitPanelProvider {...splitPanelInternals} animationDisabled={splitPanelAnimationDisabled}>\n      <section\n        id={splitPanelControlId}\n        className={styles['split-panel-side']}\n        style={{\n          blockSize: drawerHeight,\n          insetBlockStart: drawerTopOffset,\n        }}\n      >\n        {children}\n      </section>\n    </SplitPanelProvider>\n  );\n}\n\ninterface AppLayoutSplitPanelDrawerBottomImplementationProps {\n  appLayoutInternals: AppLayoutInternals;\n  splitPanelInternals: SplitPanelProviderProps;\n  children: React.ReactNode;\n}\n\nexport function AppLayoutSplitPanelDrawerBottomImplementation({\n  children,\n  splitPanelInternals,\n  appLayoutInternals,\n}: AppLayoutSplitPanelDrawerBottomImplementationProps) {\n  const { splitPanelControlId, splitPanelAnimationDisabled } = appLayoutInternals;\n  return (\n    <SplitPanelProvider {...splitPanelInternals} animationDisabled={splitPanelAnimationDisabled}>\n      <section id={splitPanelControlId}>{children}</section>\n    </SplitPanelProvider>\n  );\n}\n"]}