@cloudscape-design/components 3.0.685 → 3.0.687

package/spinner/styles.scoped.css

@@ -98,52 +98,52 @@ 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
 */
-@keyframes awsui_spinner-rotator_1612d_1a59r_1 {
+@keyframes awsui_spinner-rotator_1612d_andhz_1 {
   0% {
-    transform: rotate(var(--awsui-spinner-rotator-from-9rhwr5));
+    transform: rotate(var(--awsui-spinner-rotator-from-g964ok));
   }
   100% {
-    transform: rotate(var(--awsui-spinner-rotator-to-9rhwr5));
+    transform: rotate(var(--awsui-spinner-rotator-to-g964ok));
   }
 }
-@keyframes awsui_spinner-line-left_1612d_1a59r_1 {
+@keyframes awsui_spinner-line-left_1612d_andhz_1 {
   0% {
-    transform: rotate(var(--awsui-spinner-line-left-from-9rhwr5));
+    transform: rotate(var(--awsui-spinner-line-left-from-g964ok));
   }
   50% {
-    transform: rotate(var(--awsui-spinner-line-left-to-9rhwr5));
+    transform: rotate(var(--awsui-spinner-line-left-to-g964ok));
   }
   100% {
-    transform: rotate(var(--awsui-spinner-line-left-from-9rhwr5));
+    transform: rotate(var(--awsui-spinner-line-left-from-g964ok));
   }
 }
-@keyframes awsui_spinner-line-right_1612d_1a59r_1 {
+@keyframes awsui_spinner-line-right_1612d_andhz_1 {
   0% {
-    transform: rotate(var(--awsui-spinner-line-right-from-9rhwr5));
+    transform: rotate(var(--awsui-spinner-line-right-from-g964ok));
   }
   50% {
-    transform: rotate(var(--awsui-spinner-line-right-to-9rhwr5));
+    transform: rotate(var(--awsui-spinner-line-right-to-g964ok));
   }
   100% {
-    transform: rotate(var(--awsui-spinner-line-right-from-9rhwr5));
+    transform: rotate(var(--awsui-spinner-line-right-from-g964ok));
   }
 }
-.awsui_root_1612d_1a59r_131:not(#\9) {
-  --awsui-spinner-rotator-from-9rhwr5: 0deg;
-  --awsui-spinner-rotator-to-9rhwr5: 360deg;
-  --awsui-spinner-line-left-from-9rhwr5: 0deg;
-  --awsui-spinner-line-left-to-9rhwr5: 120deg;
-  --awsui-spinner-line-right-from-9rhwr5: 90deg;
-  --awsui-spinner-line-right-to-9rhwr5: -30deg;
+.awsui_root_1612d_andhz_131:not(#\9) {
+  --awsui-spinner-rotator-from-g964ok: 0deg;
+  --awsui-spinner-rotator-to-g964ok: 360deg;
+  --awsui-spinner-line-left-from-g964ok: 0deg;
+  --awsui-spinner-line-left-to-g964ok: 120deg;
+  --awsui-spinner-line-right-from-g964ok: 90deg;
+  --awsui-spinner-line-right-to-g964ok: -30deg;
   display: inline-block;
   vertical-align: top;
   /*stylelint-disable-next-line @cloudscape-design/no-motion-outside-of-mixin */
-  animation: awsui_spinner-rotator_1612d_1a59r_1 0.7s linear infinite;
+  animation: awsui_spinner-rotator_1612d_andhz_1 0.7s linear infinite;
   box-sizing: border-box;
   line-height: 0;
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
 }
-.awsui_root_1612d_1a59r_131.awsui_size-normal_1612d_1a59r_146:not(#\9) {
+.awsui_root_1612d_andhz_131.awsui_size-normal_1612d_andhz_146:not(#\9) {
   inline-size: var(--size-icon-normal-0m1722, 16px);
   block-size: var(--size-icon-normal-0m1722, 16px);
   padding-block: calc((var(--size-icon-normal-0m1722, 16px) - 12px) / 2);
@@ -151,7 +151,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-block: calc((var(--line-height-body-m-30ar75, 20px) - var(--size-icon-normal-0m1722, 16px)) / 2);
   box-sizing: border-box;
 }
-.awsui_root_1612d_1a59r_131.awsui_size-big_1612d_1a59r_154:not(#\9) {
+.awsui_root_1612d_andhz_131.awsui_size-big_1612d_andhz_154:not(#\9) {
   inline-size: var(--size-icon-big-zkdryd, 32px);
   block-size: var(--size-icon-big-zkdryd, 32px);
   padding-block: calc((var(--size-icon-big-zkdryd, 32px) - 24px) / 2);
@@ -159,7 +159,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-block: calc((var(--line-height-heading-xl-avbttk, 30px) - var(--size-icon-big-zkdryd, 32px)) / 2);
   box-sizing: border-box;
 }
-.awsui_root_1612d_1a59r_131.awsui_size-large_1612d_1a59r_162:not(#\9) {
+.awsui_root_1612d_andhz_131.awsui_size-large_1612d_andhz_162:not(#\9) {
   inline-size: var(--size-icon-large-bivhmh, 48px);
   block-size: var(--size-icon-large-bivhmh, 48px);
   padding-block: calc((var(--size-icon-large-bivhmh, 48px) - 36px) / 2);
@@ -167,32 +167,32 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-block: calc((var(--line-height-display-l-8nioft, 48px) - var(--size-icon-large-bivhmh, 48px)) / 2);
   box-sizing: border-box;
 }
-.awsui_root_1612d_1a59r_131.awsui_variant-normal_1612d_1a59r_170:not(#\9) {
+.awsui_root_1612d_andhz_131.awsui_variant-normal_1612d_andhz_170:not(#\9) {
   color: currentColor;
 }
-.awsui_root_1612d_1a59r_131.awsui_variant-disabled_1612d_1a59r_173:not(#\9) {
+.awsui_root_1612d_andhz_131.awsui_variant-disabled_1612d_andhz_173:not(#\9) {
   color: var(--color-text-interactive-disabled-z7a3t4, #9ba7b6);
 }
-.awsui_root_1612d_1a59r_131.awsui_variant-inverted_1612d_1a59r_176:not(#\9) {
+.awsui_root_1612d_andhz_131.awsui_variant-inverted_1612d_andhz_176:not(#\9) {
   color: var(--color-text-inverted-70cpkk, #ffffff);
 }
-.awsui_root_1612d_1a59r_131:not(#\9):dir(rtl) {
-  --awsui-spinner-rotator-from-9rhwr5: 360deg;
-  --awsui-spinner-rotator-to-9rhwr5: 0deg;
-  --awsui-spinner-line-left-from-9rhwr5: 0deg;
-  --awsui-spinner-line-left-to-9rhwr5: -120deg;
-  --awsui-spinner-line-right-from-9rhwr5: -90deg;
-  --awsui-spinner-line-right-to-9rhwr5: 30deg;
+.awsui_root_1612d_andhz_131:not(#\9):dir(rtl) {
+  --awsui-spinner-rotator-from-g964ok: 360deg;
+  --awsui-spinner-rotator-to-g964ok: 0deg;
+  --awsui-spinner-line-left-from-g964ok: 0deg;
+  --awsui-spinner-line-left-to-g964ok: -120deg;
+  --awsui-spinner-line-right-from-g964ok: -90deg;
+  --awsui-spinner-line-right-to-g964ok: 30deg;
 }
 
-.awsui_circle_1612d_1a59r_188:not(#\9) {
+.awsui_circle_1612d_andhz_188:not(#\9) {
   display: inline-block;
   inline-size: 50%;
   block-size: 100%;
   overflow: hidden;
   position: relative;
 }
-.awsui_circle_1612d_1a59r_188:not(#\9):after {
+.awsui_circle_1612d_andhz_188:not(#\9):after {
   position: absolute;
   box-sizing: border-box;
   content: "";
@@ -205,7 +205,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-inline-end-color: transparent;
   border-block-end-color: transparent;
 }
-.awsui_circle_1612d_1a59r_188:not(#\9):after {
+.awsui_circle_1612d_andhz_188:not(#\9):after {
   /*stylelint-disable-next-line @cloudscape-design/no-motion-outside-of-mixin */
   animation: 1.5s ease-in-out infinite;
   inset-block-start: 0;
@@ -213,13 +213,13 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   block-size: 100%;
   inline-size: 200%;
 }
-.awsui_circle_1612d_1a59r_188.awsui_circle-left_1612d_1a59r_216:not(#\9):after {
+.awsui_circle_1612d_andhz_188.awsui_circle-left_1612d_andhz_216:not(#\9):after {
   inset-inline-start: 0;
   /*stylelint-disable-next-line @cloudscape-design/no-motion-outside-of-mixin */
-  animation-name: awsui_spinner-line-left_1612d_1a59r_1;
+  animation-name: awsui_spinner-line-left_1612d_andhz_1;
 }
-.awsui_circle_1612d_1a59r_188.awsui_circle-right_1612d_1a59r_221:not(#\9):after {
+.awsui_circle_1612d_andhz_188.awsui_circle-right_1612d_andhz_221:not(#\9):after {
   inset-inline-start: -100%;
   /*stylelint-disable-next-line @cloudscape-design/no-motion-outside-of-mixin */
-  animation-name: awsui_spinner-line-right_1612d_1a59r_1;
+  animation-name: awsui_spinner-line-right_1612d_andhz_1;
 }

package/spinner/styles.selectors.js

@@ -2,18 +2,18 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_1612d_1a59r_131",
-  "spinner-rotator": "awsui_spinner-rotator_1612d_1a59r_1",
-  "size-normal": "awsui_size-normal_1612d_1a59r_146",
-  "size-big": "awsui_size-big_1612d_1a59r_154",
-  "size-large": "awsui_size-large_1612d_1a59r_162",
-  "variant-normal": "awsui_variant-normal_1612d_1a59r_170",
-  "variant-disabled": "awsui_variant-disabled_1612d_1a59r_173",
-  "variant-inverted": "awsui_variant-inverted_1612d_1a59r_176",
-  "circle": "awsui_circle_1612d_1a59r_188",
-  "circle-left": "awsui_circle-left_1612d_1a59r_216",
-  "spinner-line-left": "awsui_spinner-line-left_1612d_1a59r_1",
-  "circle-right": "awsui_circle-right_1612d_1a59r_221",
-  "spinner-line-right": "awsui_spinner-line-right_1612d_1a59r_1"
+  "root": "awsui_root_1612d_andhz_131",
+  "spinner-rotator": "awsui_spinner-rotator_1612d_andhz_1",
+  "size-normal": "awsui_size-normal_1612d_andhz_146",
+  "size-big": "awsui_size-big_1612d_andhz_154",
+  "size-large": "awsui_size-large_1612d_andhz_162",
+  "variant-normal": "awsui_variant-normal_1612d_andhz_170",
+  "variant-disabled": "awsui_variant-disabled_1612d_andhz_173",
+  "variant-inverted": "awsui_variant-inverted_1612d_andhz_176",
+  "circle": "awsui_circle_1612d_andhz_188",
+  "circle-left": "awsui_circle-left_1612d_andhz_216",
+  "spinner-line-left": "awsui_spinner-line-left_1612d_andhz_1",
+  "circle-right": "awsui_circle-right_1612d_andhz_221",
+  "spinner-line-right": "awsui_spinner-line-right_1612d_andhz_1"
 };
   

package/split-panel/bottom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bottom.d.ts","sourceRoot":"","sources":["../../../src/split-panel/bottom.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAGjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AACrE,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAOtD,UAAU,4BAA6B,SAAQ,sBAAsB;IACnE,KAAK,EAAE,gBAAgB,CAAC;IACxB,uBAAuB,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACxC,iBAAiB,EAAE,KAAK,CAAC,aAAa,GAAG,SAAS,CAAC;CACpD;AAED,wBAAgB,uBAAuB,CAAC,EACtC,SAAS,EACT,MAAM,EACN,KAAK,EACL,uBAAuB,EACvB,aAAa,EACb,UAAU,EACV,MAAM,EACN,YAAY,EACZ,QAAQ,EACR,iBAAiB,EACjB,aAAa,EACb,QAAQ,GACT,EAAE,4BAA4B,eAsD9B"}
+{"version":3,"file":"bottom.d.ts","sourceRoot":"","sources":["../../../src/split-panel/bottom.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAGjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AACrE,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAQtD,UAAU,4BAA6B,SAAQ,sBAAsB;IACnE,KAAK,EAAE,gBAAgB,CAAC;IACxB,uBAAuB,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACxC,iBAAiB,EAAE,KAAK,CAAC,aAAa,GAAG,SAAS,CAAC;CACpD;AAED,wBAAgB,uBAAuB,CAAC,EACtC,SAAS,EACT,MAAM,EACN,KAAK,EACL,uBAAuB,EACvB,aAAa,EACb,UAAU,EACV,MAAM,EACN,YAAY,EACZ,QAAQ,EACR,iBAAiB,EACjB,aAAa,EACb,QAAQ,GACT,EAAE,4BAA4B,eAwD9B"}

package/split-panel/bottom.js

@@ -9,8 +9,10 @@ import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
 import { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';
 import styles from './styles.css.js';
 import testUtilStyles from './test-classes/styles.css.js';
+import { getGlobalFlag } from '../internal/utils/global-flags';
 export function SplitPanelContentBottom({ baseProps, isOpen, state, transitioningElementRef, splitPanelRef, cappedSize, header, resizeHandle, children, appLayoutMaxWidth, panelHeaderId, onToggle, }) {
     const isRefresh = useVisualRefresh();
+    const hasToolbar = getGlobalFlag('appLayoutWidget');
     const { bottomOffset, leftOffset, rightOffset, disableContentPaddings, contentWrapperPaddings, reportHeaderHeight } = useSplitPanelContext();
     const transitionContentBottomRef = useMergeRefs(splitPanelRef || null, transitioningElementRef);
     const isMobile = useMobile();
@@ -33,6 +35,7 @@ export function SplitPanelContentBottom({ baseProps, isOpen, state, transitionin
             [styles['drawer-disable-content-paddings']]: disableContentPaddings,
             [styles.animating]: isRefresh && (state === 'entering' || state === 'exiting'),
             [styles.refresh]: isRefresh,
+            [styles['with-toolbar']]: hasToolbar,
         }), onClick: () => !isOpen && onToggle(), style: {
             insetBlockEnd: bottomOffset,
             insetInlineStart: leftOffset,

package/split-panel/bottom.js.map

@@ -1 +1 @@
-{"version":3,"file":"bottom.js","sourceRoot":"","sources":["../../../src/split-panel/bottom.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useEffect, useRef } from 'react';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport { TransitionStatus } from '../internal/components/transition';\nimport { SplitPanelContentProps } from './interfaces';\nimport { useSplitPanelContext } from '../internal/context/split-panel-context';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';\nimport styles from './styles.css.js';\nimport testUtilStyles from './test-classes/styles.css.js';\n\ninterface SplitPanelContentBottomProps extends SplitPanelContentProps {\n  state: TransitionStatus;\n  transitioningElementRef: React.Ref<any>;\n  appLayoutMaxWidth: React.CSSProperties | undefined;\n}\n\nexport function SplitPanelContentBottom({\n  baseProps,\n  isOpen,\n  state,\n  transitioningElementRef,\n  splitPanelRef,\n  cappedSize,\n  header,\n  resizeHandle,\n  children,\n  appLayoutMaxWidth,\n  panelHeaderId,\n  onToggle,\n}: SplitPanelContentBottomProps) {\n  const isRefresh = useVisualRefresh();\n  const { bottomOffset, leftOffset, rightOffset, disableContentPaddings, contentWrapperPaddings, reportHeaderHeight } =\n    useSplitPanelContext();\n  const transitionContentBottomRef = useMergeRefs(splitPanelRef || null, transitioningElementRef);\n  const isMobile = useMobile();\n\n  const headerRef = useRef<HTMLDivElement>(null);\n  useResizeObserver(headerRef, entry => reportHeaderHeight(entry.borderBoxHeight));\n  useEffect(() => {\n    // report empty height when unmounting the panel\n    return () => reportHeaderHeight(0);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const centeredMaxWidthClasses = clsx({\n    [styles['pane-bottom-center-align']]: isRefresh,\n    [styles['pane-bottom-content-nav-padding']]: contentWrapperPaddings?.closedNav,\n    [styles['pane-bottom-content-tools-padding']]: contentWrapperPaddings?.closedTools,\n  });\n\n  return (\n    <div\n      {...baseProps}\n      className={clsx(baseProps.className, styles.drawer, styles['position-bottom'], testUtilStyles.root, {\n        [testUtilStyles['open-position-bottom']]: isOpen,\n        [styles['drawer-closed']]: !isOpen,\n        [styles['drawer-mobile']]: isMobile,\n        [styles['drawer-disable-content-paddings']]: disableContentPaddings,\n        [styles.animating]: isRefresh && (state === 'entering' || state === 'exiting'),\n        [styles.refresh]: isRefresh,\n      })}\n      onClick={() => !isOpen && onToggle()}\n      style={{\n        insetBlockEnd: bottomOffset,\n        insetInlineStart: leftOffset,\n        insetInlineEnd: rightOffset,\n        blockSize: isOpen ? cappedSize : undefined,\n      }}\n      ref={transitionContentBottomRef}\n    >\n      {isOpen && <div className={styles['slider-wrapper-bottom']}>{resizeHandle}</div>}\n      <div className={styles['drawer-content-bottom']} aria-labelledby={panelHeaderId} role=\"region\">\n        <div className={clsx(styles['pane-header-wrapper-bottom'], centeredMaxWidthClasses)} ref={headerRef}>\n          {header}\n        </div>\n        <div className={clsx(styles['content-bottom'], centeredMaxWidthClasses)} aria-hidden={!isOpen}>\n          <div className={clsx({ [styles['content-bottom-max-width']]: isRefresh })} style={appLayoutMaxWidth}>\n            {children}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"bottom.js","sourceRoot":"","sources":["../../../src/split-panel/bottom.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useEffect, useRef } from 'react';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport { TransitionStatus } from '../internal/components/transition';\nimport { SplitPanelContentProps } from './interfaces';\nimport { useSplitPanelContext } from '../internal/context/split-panel-context';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';\nimport styles from './styles.css.js';\nimport testUtilStyles from './test-classes/styles.css.js';\nimport { getGlobalFlag } from '../internal/utils/global-flags';\n\ninterface SplitPanelContentBottomProps extends SplitPanelContentProps {\n  state: TransitionStatus;\n  transitioningElementRef: React.Ref<any>;\n  appLayoutMaxWidth: React.CSSProperties | undefined;\n}\n\nexport function SplitPanelContentBottom({\n  baseProps,\n  isOpen,\n  state,\n  transitioningElementRef,\n  splitPanelRef,\n  cappedSize,\n  header,\n  resizeHandle,\n  children,\n  appLayoutMaxWidth,\n  panelHeaderId,\n  onToggle,\n}: SplitPanelContentBottomProps) {\n  const isRefresh = useVisualRefresh();\n  const hasToolbar = getGlobalFlag('appLayoutWidget');\n  const { bottomOffset, leftOffset, rightOffset, disableContentPaddings, contentWrapperPaddings, reportHeaderHeight } =\n    useSplitPanelContext();\n  const transitionContentBottomRef = useMergeRefs(splitPanelRef || null, transitioningElementRef);\n  const isMobile = useMobile();\n\n  const headerRef = useRef<HTMLDivElement>(null);\n  useResizeObserver(headerRef, entry => reportHeaderHeight(entry.borderBoxHeight));\n  useEffect(() => {\n    // report empty height when unmounting the panel\n    return () => reportHeaderHeight(0);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const centeredMaxWidthClasses = clsx({\n    [styles['pane-bottom-center-align']]: isRefresh,\n    [styles['pane-bottom-content-nav-padding']]: contentWrapperPaddings?.closedNav,\n    [styles['pane-bottom-content-tools-padding']]: contentWrapperPaddings?.closedTools,\n  });\n\n  return (\n    <div\n      {...baseProps}\n      className={clsx(baseProps.className, styles.drawer, styles['position-bottom'], testUtilStyles.root, {\n        [testUtilStyles['open-position-bottom']]: isOpen,\n        [styles['drawer-closed']]: !isOpen,\n        [styles['drawer-mobile']]: isMobile,\n        [styles['drawer-disable-content-paddings']]: disableContentPaddings,\n        [styles.animating]: isRefresh && (state === 'entering' || state === 'exiting'),\n        [styles.refresh]: isRefresh,\n        [styles['with-toolbar']]: hasToolbar,\n      })}\n      onClick={() => !isOpen && onToggle()}\n      style={{\n        insetBlockEnd: bottomOffset,\n        insetInlineStart: leftOffset,\n        insetInlineEnd: rightOffset,\n        blockSize: isOpen ? cappedSize : undefined,\n      }}\n      ref={transitionContentBottomRef}\n    >\n      {isOpen && <div className={styles['slider-wrapper-bottom']}>{resizeHandle}</div>}\n      <div className={styles['drawer-content-bottom']} aria-labelledby={panelHeaderId} role=\"region\">\n        <div className={clsx(styles['pane-header-wrapper-bottom'], centeredMaxWidthClasses)} ref={headerRef}>\n          {header}\n        </div>\n        <div className={clsx(styles['content-bottom'], centeredMaxWidthClasses)} aria-hidden={!isOpen}>\n          <div className={clsx({ [styles['content-bottom-max-width']]: isRefresh })} style={appLayoutMaxWidth}>\n            {children}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"]}

package/split-panel/styles.css.js

@@ -1,31 +1,32 @@
 
     import './styles.scoped.css';
     export default {
-  "drawer": "awsui_drawer_1r9lg_ofsif_197",
-  "refresh": "awsui_refresh_1r9lg_ofsif_197",
-  "animating": "awsui_animating_1r9lg_ofsif_211",
-  "drawer-closed": "awsui_drawer-closed_1r9lg_ofsif_266",
-  "drawer-content-side": "awsui_drawer-content-side_1r9lg_ofsif_271",
-  "drawer-content-bottom": "awsui_drawer-content-bottom_1r9lg_ofsif_287",
-  "position-bottom": "awsui_position-bottom_1r9lg_ofsif_294",
-  "position-side": "awsui_position-side_1r9lg_ofsif_321",
-  "slider-wrapper-bottom": "awsui_slider-wrapper-bottom_1r9lg_ofsif_327",
-  "slider-wrapper-side": "awsui_slider-wrapper-side_1r9lg_ofsif_338",
-  "open-button-side": "awsui_open-button-side_1r9lg_ofsif_349",
-  "pane-header-wrapper-bottom": "awsui_pane-header-wrapper-bottom_1r9lg_ofsif_358",
-  "drawer-mobile": "awsui_drawer-mobile_1r9lg_ofsif_368",
-  "drawer-disable-content-paddings": "awsui_drawer-disable-content-paddings_1r9lg_ofsif_372",
-  "content-bottom": "awsui_content-bottom_1r9lg_ofsif_381",
-  "pane-bottom-center-align": "awsui_pane-bottom-center-align_1r9lg_ofsif_397",
-  "pane-bottom-content-nav-padding": "awsui_pane-bottom-content-nav-padding_1r9lg_ofsif_402",
-  "pane-bottom-content-tools-padding": "awsui_pane-bottom-content-tools-padding_1r9lg_ofsif_406",
-  "content-bottom-max-width": "awsui_content-bottom-max-width_1r9lg_ofsif_410",
-  "content-side": "awsui_content-side_1r9lg_ofsif_415",
-  "pane-header-wrapper-side": "awsui_pane-header-wrapper-side_1r9lg_ofsif_425",
-  "pane-content-wrapper-side": "awsui_pane-content-wrapper-side_1r9lg_ofsif_431",
-  "header": "awsui_header_1r9lg_ofsif_439",
-  "header-text": "awsui_header-text_1r9lg_ofsif_449",
-  "header-actions": "awsui_header-actions_1r9lg_ofsif_462",
-  "divider": "awsui_divider_1r9lg_ofsif_470"
+  "drawer": "awsui_drawer_1r9lg_10v1l_197",
+  "refresh": "awsui_refresh_1r9lg_10v1l_197",
+  "animating": "awsui_animating_1r9lg_10v1l_211",
+  "drawer-closed": "awsui_drawer-closed_1r9lg_10v1l_266",
+  "drawer-content-side": "awsui_drawer-content-side_1r9lg_10v1l_271",
+  "drawer-content-bottom": "awsui_drawer-content-bottom_1r9lg_10v1l_287",
+  "position-bottom": "awsui_position-bottom_1r9lg_10v1l_294",
+  "with-toolbar": "awsui_with-toolbar_1r9lg_10v1l_311",
+  "position-side": "awsui_position-side_1r9lg_10v1l_324",
+  "slider-wrapper-bottom": "awsui_slider-wrapper-bottom_1r9lg_10v1l_330",
+  "slider-wrapper-side": "awsui_slider-wrapper-side_1r9lg_10v1l_341",
+  "open-button-side": "awsui_open-button-side_1r9lg_10v1l_352",
+  "pane-header-wrapper-bottom": "awsui_pane-header-wrapper-bottom_1r9lg_10v1l_361",
+  "drawer-mobile": "awsui_drawer-mobile_1r9lg_10v1l_371",
+  "drawer-disable-content-paddings": "awsui_drawer-disable-content-paddings_1r9lg_10v1l_375",
+  "content-bottom": "awsui_content-bottom_1r9lg_10v1l_384",
+  "pane-bottom-center-align": "awsui_pane-bottom-center-align_1r9lg_10v1l_400",
+  "pane-bottom-content-nav-padding": "awsui_pane-bottom-content-nav-padding_1r9lg_10v1l_405",
+  "pane-bottom-content-tools-padding": "awsui_pane-bottom-content-tools-padding_1r9lg_10v1l_409",
+  "content-bottom-max-width": "awsui_content-bottom-max-width_1r9lg_10v1l_413",
+  "content-side": "awsui_content-side_1r9lg_10v1l_418",
+  "pane-header-wrapper-side": "awsui_pane-header-wrapper-side_1r9lg_10v1l_428",
+  "pane-content-wrapper-side": "awsui_pane-content-wrapper-side_1r9lg_10v1l_434",
+  "header": "awsui_header_1r9lg_10v1l_442",
+  "header-text": "awsui_header-text_1r9lg_10v1l_452",
+  "header-actions": "awsui_header-actions_1r9lg_10v1l_465",
+  "divider": "awsui_divider_1r9lg_10v1l_473"
 };
   

package/split-panel/styles.scoped.css

@@ -194,36 +194,36 @@ 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_drawer_1r9lg_ofsif_197.awsui_refresh_1r9lg_ofsif_197:not(#\9) {
+.awsui_drawer_1r9lg_10v1l_197.awsui_refresh_1r9lg_10v1l_197:not(#\9) {
   transition-duration: var(--motion-duration-refresh-only-fast-4jn2d7, 115ms);
   transition-property: none;
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_drawer_1r9lg_ofsif_197.awsui_refresh_1r9lg_ofsif_197:not(#\9) {
+  .awsui_drawer_1r9lg_10v1l_197.awsui_refresh_1r9lg_10v1l_197:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_drawer_1r9lg_ofsif_197.awsui_refresh_1r9lg_ofsif_197:not(#\9), .awsui-mode-entering .awsui_drawer_1r9lg_ofsif_197.awsui_refresh_1r9lg_ofsif_197:not(#\9) {
+.awsui-motion-disabled .awsui_drawer_1r9lg_10v1l_197.awsui_refresh_1r9lg_10v1l_197:not(#\9), .awsui-mode-entering .awsui_drawer_1r9lg_10v1l_197.awsui_refresh_1r9lg_10v1l_197:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_drawer_1r9lg_ofsif_197.awsui_refresh_1r9lg_ofsif_197.awsui_animating_1r9lg_ofsif_211:not(#\9) {
+.awsui_drawer_1r9lg_10v1l_197.awsui_refresh_1r9lg_10v1l_197.awsui_animating_1r9lg_10v1l_211:not(#\9) {
   transition-property: transform;
   transition-timing-function: var(--motion-easing-refresh-only-a-8flf9q, cubic-bezier(0, 0, 0, 1));
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_drawer_1r9lg_ofsif_197.awsui_refresh_1r9lg_ofsif_197.awsui_animating_1r9lg_ofsif_211:not(#\9) {
+  .awsui_drawer_1r9lg_10v1l_197.awsui_refresh_1r9lg_10v1l_197.awsui_animating_1r9lg_10v1l_211:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_drawer_1r9lg_ofsif_197.awsui_refresh_1r9lg_ofsif_197.awsui_animating_1r9lg_ofsif_211:not(#\9), .awsui-mode-entering .awsui_drawer_1r9lg_ofsif_197.awsui_refresh_1r9lg_ofsif_197.awsui_animating_1r9lg_ofsif_211:not(#\9) {
+.awsui-motion-disabled .awsui_drawer_1r9lg_10v1l_197.awsui_refresh_1r9lg_10v1l_197.awsui_animating_1r9lg_10v1l_211:not(#\9), .awsui-mode-entering .awsui_drawer_1r9lg_10v1l_197.awsui_refresh_1r9lg_10v1l_197.awsui_animating_1r9lg_10v1l_211:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_drawer_1r9lg_ofsif_197:not(#\9) {
+.awsui_drawer_1r9lg_10v1l_197:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -264,35 +264,35 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   background-color: var(--color-background-layout-panel-content-t82vgh, #ffffff);
   z-index: 840;
 }
-.awsui_drawer-closed_1r9lg_ofsif_266:not(#\9) {
+.awsui_drawer-closed_1r9lg_10v1l_266:not(#\9) {
   cursor: pointer;
   min-inline-size: 40px;
 }
 
-.awsui_drawer-content-side_1r9lg_ofsif_271:not(#\9) {
+.awsui_drawer-content-side_1r9lg_10v1l_271:not(#\9) {
   display: flex;
   align-items: center;
   block-size: 100%;
   overflow: auto;
 }
-.awsui_drawer-closed_1r9lg_ofsif_266 > .awsui_drawer-content-side_1r9lg_ofsif_271:not(#\9) {
+.awsui_drawer-closed_1r9lg_10v1l_266 > .awsui_drawer-content-side_1r9lg_10v1l_271:not(#\9) {
   inline-size: 40px;
 }
-.awsui_drawer-closed_1r9lg_ofsif_266 > .awsui_drawer-content-side_1r9lg_ofsif_271:not(#\9):hover {
+.awsui_drawer-closed_1r9lg_10v1l_266 > .awsui_drawer-content-side_1r9lg_10v1l_271:not(#\9):hover {
   background: var(--color-background-layout-panel-hover-n9apd3, #e9ebed);
 }
-.awsui_drawer-content-side_1r9lg_ofsif_271 > [aria-hidden=true]:not(#\9) {
+.awsui_drawer-content-side_1r9lg_10v1l_271 > [aria-hidden=true]:not(#\9) {
   display: none;
 }
 
-:not(#\9):not(.awsui_drawer-closed_1r9lg_ofsif_266) > .awsui_drawer-content-bottom_1r9lg_ofsif_287 {
+:not(#\9):not(.awsui_drawer-closed_1r9lg_10v1l_266) > .awsui_drawer-content-bottom_1r9lg_10v1l_287 {
   overflow-y: auto;
   position: absolute;
   inset: 0;
   clip-path: border-box;
 }
 
-.awsui_position-bottom_1r9lg_ofsif_294:not(#\9) {
+.awsui_position-bottom_1r9lg_10v1l_294:not(#\9) {
   position: fixed;
   overflow-y: auto;
   border-block-start: var(--border-panel-top-width-7uc0w9, 1px) solid var(--color-border-divider-panel-bottom-dwyqvg, #b6bec9);
@@ -301,31 +301,34 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   SplitPanel is no longer in fixed position in the DOM.
   */
 }
-.awsui_position-bottom_1r9lg_ofsif_294:not(#\9):not(.awsui_refresh_1r9lg_ofsif_197) {
+.awsui_position-bottom_1r9lg_10v1l_294:not(#\9):not(.awsui_refresh_1r9lg_10v1l_197) {
   box-shadow: var(--shadow-split-bottom-5e389u, 0px -36px 36px -36px rgba(0, 7, 22, 0.1));
   border-inline-start: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-divider-panel-bottom-dwyqvg, #b6bec9);
   border-inline-end: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-divider-panel-bottom-dwyqvg, #b6bec9);
 }
-.awsui_position-bottom_1r9lg_ofsif_294.awsui_drawer-closed_1r9lg_ofsif_266:not(#\9) {
+.awsui_position-bottom_1r9lg_10v1l_294.awsui_drawer-closed_1r9lg_10v1l_266:not(#\9) {
   overflow: hidden;
 }
-.awsui_position-bottom_1r9lg_ofsif_294.awsui_drawer-closed_1r9lg_ofsif_266:not(#\9):hover {
+.awsui_position-bottom_1r9lg_10v1l_294.awsui_drawer-closed_1r9lg_10v1l_266.awsui_with-toolbar_1r9lg_10v1l_311:not(#\9) {
+  display: none;
+}
+.awsui_position-bottom_1r9lg_10v1l_294.awsui_drawer-closed_1r9lg_10v1l_266:not(#\9):hover {
   background: var(--color-background-layout-panel-hover-n9apd3, #e9ebed);
 }
-.awsui_position-bottom_1r9lg_ofsif_294 > .awsui_drawer-content-bottom_1r9lg_ofsif_287 > [aria-hidden=true]:not(#\9) {
+.awsui_position-bottom_1r9lg_10v1l_294 > .awsui_drawer-content-bottom_1r9lg_10v1l_287 > [aria-hidden=true]:not(#\9) {
   display: none;
 }
-.awsui_position-bottom_1r9lg_ofsif_294.awsui_refresh_1r9lg_ofsif_197:not(#\9) {
+.awsui_position-bottom_1r9lg_10v1l_294.awsui_refresh_1r9lg_10v1l_197:not(#\9) {
   position: relative;
 }
 
-.awsui_position-side_1r9lg_ofsif_321:not(#\9) {
+.awsui_position-side_1r9lg_10v1l_324:not(#\9) {
   border-block-start: none;
   box-shadow: var(--shadow-split-side-ggdtnk, -1px 0px 1px 0px #e9ebed, -36px 6px 36px -36px rgba(0, 7, 22, 0.1));
   block-size: 100%;
 }
 
-.awsui_slider-wrapper-bottom_1r9lg_ofsif_327:not(#\9) {
+.awsui_slider-wrapper-bottom_1r9lg_10v1l_330:not(#\9) {
   position: absolute;
   inset-block-start: 0;
   inset-inline-start: 0;
@@ -336,7 +339,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   z-index: 2;
 }
 
-.awsui_slider-wrapper-side_1r9lg_ofsif_338:not(#\9) {
+.awsui_slider-wrapper-side_1r9lg_10v1l_341:not(#\9) {
   position: absolute;
   inset-inline-start: 0;
   inset-block-start: 0;
@@ -347,7 +350,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   z-index: 1;
 }
 
-.awsui_open-button-side_1r9lg_ofsif_349:not(#\9) {
+.awsui_open-button-side_1r9lg_10v1l_352:not(#\9) {
   flex: 0 0 auto;
   align-self: flex-start;
   box-sizing: border-box;
@@ -356,7 +359,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-inline: auto;
 }
 
-.awsui_pane-header-wrapper-bottom_1r9lg_ofsif_358:not(#\9) {
+.awsui_pane-header-wrapper-bottom_1r9lg_10v1l_361:not(#\9) {
   position: sticky;
   inset-block-start: 0;
   display: flex;
@@ -366,54 +369,54 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   padding-block: 0;
   padding-inline: var(--space-layout-content-horizontal-7l52k3, 24px);
 }
-.awsui_drawer-mobile_1r9lg_ofsif_368 > .awsui_drawer-content-bottom_1r9lg_ofsif_287 > .awsui_pane-header-wrapper-bottom_1r9lg_ofsif_358:not(#\9) {
+.awsui_drawer-mobile_1r9lg_10v1l_371 > .awsui_drawer-content-bottom_1r9lg_10v1l_287 > .awsui_pane-header-wrapper-bottom_1r9lg_10v1l_361:not(#\9) {
   padding-block: 0;
   padding-inline: var(--space-l-t419sm, 20px);
 }
-.awsui_drawer-disable-content-paddings_1r9lg_ofsif_372 > .awsui_drawer-content-bottom_1r9lg_ofsif_287 > .awsui_pane-header-wrapper-bottom_1r9lg_ofsif_358:not(#\9) {
+.awsui_drawer-disable-content-paddings_1r9lg_10v1l_375 > .awsui_drawer-content-bottom_1r9lg_10v1l_287 > .awsui_pane-header-wrapper-bottom_1r9lg_10v1l_361:not(#\9) {
   padding-block: 0;
   padding-inline: var(--space-l-t419sm, 20px);
 }
-:not(#\9):not(.awsui_drawer-closed_1r9lg_ofsif_266) > .awsui_drawer-content-bottom_1r9lg_ofsif_287 > .awsui_pane-header-wrapper-bottom_1r9lg_ofsif_358 {
+:not(#\9):not(.awsui_drawer-closed_1r9lg_10v1l_266) > .awsui_drawer-content-bottom_1r9lg_10v1l_287 > .awsui_pane-header-wrapper-bottom_1r9lg_10v1l_361 {
   background-color: var(--color-background-layout-panel-content-t82vgh, #ffffff);
   border-block-end: var(--border-panel-header-width-3w1py7, 1px) solid var(--color-border-divider-default-j74lyz, #b6bec9);
 }
 
-.awsui_content-bottom_1r9lg_ofsif_381:not(#\9) {
+.awsui_content-bottom_1r9lg_10v1l_384:not(#\9) {
   padding-block: 0;
   padding-inline: var(--space-layout-content-horizontal-7l52k3, 24px);
   margin-block-start: var(--space-panel-split-top-q1pux4, 20px);
   position: relative;
   z-index: 0;
 }
-.awsui_drawer-mobile_1r9lg_ofsif_368 > .awsui_drawer-content-bottom_1r9lg_ofsif_287 > .awsui_content-bottom_1r9lg_ofsif_381:not(#\9) {
+.awsui_drawer-mobile_1r9lg_10v1l_371 > .awsui_drawer-content-bottom_1r9lg_10v1l_287 > .awsui_content-bottom_1r9lg_10v1l_384:not(#\9) {
   padding-block: 0;
   padding-inline: var(--space-l-t419sm, 20px);
 }
-.awsui_drawer-disable-content-paddings_1r9lg_ofsif_372 > .awsui_drawer-content-bottom_1r9lg_ofsif_287 > .awsui_content-bottom_1r9lg_ofsif_381:not(#\9) {
+.awsui_drawer-disable-content-paddings_1r9lg_10v1l_375 > .awsui_drawer-content-bottom_1r9lg_10v1l_287 > .awsui_content-bottom_1r9lg_10v1l_384:not(#\9) {
   padding-block: 0;
   padding-inline: 0;
 }
 
-.awsui_pane-bottom-center-align_1r9lg_ofsif_397:not(#\9) {
+.awsui_pane-bottom-center-align_1r9lg_10v1l_400:not(#\9) {
   display: flex;
   justify-content: center;
 }
 
-.awsui_pane-bottom-content-nav-padding_1r9lg_ofsif_402:not(#\9) {
+.awsui_pane-bottom-content-nav-padding_1r9lg_10v1l_405:not(#\9) {
   padding-inline-start: calc(var(--space-layout-toggle-diameter-hb85rk, 36px) + 2 * var(--space-layout-toggle-padding-lcu6qi, 12px));
 }
 
-.awsui_pane-bottom-content-tools-padding_1r9lg_ofsif_406:not(#\9) {
+.awsui_pane-bottom-content-tools-padding_1r9lg_10v1l_409:not(#\9) {
   padding-inline-end: calc(var(--space-layout-toggle-diameter-hb85rk, 36px) + 2 * var(--space-layout-toggle-padding-lcu6qi, 12px));
 }
 
-.awsui_content-bottom-max-width_1r9lg_ofsif_410:not(#\9) {
+.awsui_content-bottom-max-width_1r9lg_10v1l_413:not(#\9) {
   flex-grow: 1;
   max-inline-size: 100%;
 }
 
-.awsui_content-side_1r9lg_ofsif_415:not(#\9) {
+.awsui_content-side_1r9lg_10v1l_418:not(#\9) {
   flex: auto;
   align-self: flex-start;
   box-sizing: border-box;
@@ -423,13 +426,13 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   inset-inline: 0;
   block-size: 100%;
 }
-.awsui_content-side_1r9lg_ofsif_415 > .awsui_pane-header-wrapper-side_1r9lg_ofsif_425:not(#\9) {
+.awsui_content-side_1r9lg_10v1l_418 > .awsui_pane-header-wrapper-side_1r9lg_10v1l_428:not(#\9) {
   padding-block: 0;
   padding-inline-end: var(--space-m-udix3p, 16px);
   padding-inline-start: var(--space-panel-side-left-5t0who, 28px);
   border-block-end: var(--border-panel-header-width-3w1py7, 1px) solid var(--color-border-divider-default-j74lyz, #b6bec9);
 }
-.awsui_content-side_1r9lg_ofsif_415 > .awsui_pane-content-wrapper-side_1r9lg_ofsif_431:not(#\9) {
+.awsui_content-side_1r9lg_10v1l_418 > .awsui_pane-content-wrapper-side_1r9lg_10v1l_434:not(#\9) {
   padding-block: 0;
   padding-inline-start: var(--space-panel-side-left-5t0who, 28px);
   padding-inline-end: var(--space-panel-side-right-xofg51, 24px);
@@ -437,7 +440,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-block-end: var(--space-panel-split-bottom-qwdduf, 20px);
 }
 
-.awsui_header_1r9lg_ofsif_439:not(#\9) {
+.awsui_header_1r9lg_10v1l_442:not(#\9) {
   display: flex;
   flex: auto;
   flex-direction: row;
@@ -447,7 +450,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-block: var(--size-vertical-panel-icon-offset-wy8j08, 15px);
   margin-inline: 0;
 }
-.awsui_header-text_1r9lg_ofsif_449:not(#\9) {
+.awsui_header-text_1r9lg_10v1l_452:not(#\9) {
   font-size: var(--font-panel-header-size-edjz3l, 18px);
   line-height: var(--font-panel-header-line-height-kxi4u2, 22px);
   font-weight: var(--font-weight-heading-l-f8711v, 700);
@@ -460,7 +463,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-block-start: calc(var(--space-scaled-xxs-7597g1, 4px) + 1px);
 }
 
-.awsui_header-actions_1r9lg_ofsif_462:not(#\9) {
+.awsui_header-actions_1r9lg_10v1l_465:not(#\9) {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -468,7 +471,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-inline-start: var(--space-xs-zb16t3, 8px);
 }
 
-.awsui_divider_1r9lg_ofsif_470:not(#\9) {
+.awsui_divider_1r9lg_10v1l_473:not(#\9) {
   border-inline-end: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-divider-default-j74lyz, #b6bec9);
   margin-block: var(--space-scaled-xxs-7597g1, 4px);
   margin-inline: var(--space-scaled-xs-26e2du, 8px);