@cloudscape-design/components-themeable 3.0.851 → 3.0.853

package/lib/internal/template/split-panel/implementation.js

@@ -55,7 +55,7 @@ export function SplitPanelImplementation(_a) {
             !hidePreferencesButton && isOpen && (React.createElement(React.Fragment, null,
                 React.createElement(InternalButton, { className: testUtilStyles['preferences-button'], iconName: "settings", variant: "icon", onClick: () => setPreferencesOpen(true), formAction: "none", ariaLabel: i18nStrings.preferencesTitle, ref: refs.preferences }),
                 React.createElement("span", { className: styles.divider }))),
-            isOpen ? (React.createElement(InternalButton, { className: testUtilStyles['close-button'], iconName: isRefresh && closeBehavior === 'collapse' ? (position === 'side' ? 'angle-right' : 'angle-down') : 'close', variant: "icon", onClick: onToggle, formAction: "none", ariaLabel: i18nStrings.closeButtonAriaLabel, ariaExpanded: isOpen })) : isToolbar || position === 'side' ? null : (React.createElement(InternalButton, { className: testUtilStyles['open-button'], iconName: "angle-up", variant: "icon", formAction: "none", ariaLabel: i18nStrings.openButtonAriaLabel, ref: refs.toggle, ariaExpanded: isOpen })))));
+            isOpen ? (React.createElement(InternalButton, { className: testUtilStyles['close-button'], iconName: isRefresh && closeBehavior === 'collapse' ? (position === 'side' ? 'angle-right' : 'angle-down') : 'close', variant: "icon", onClick: onToggle, formAction: "none", ariaLabel: i18nStrings.closeButtonAriaLabel, ariaExpanded: isOpen })) : position === 'side' ? null : (React.createElement(InternalButton, { className: testUtilStyles['open-button'], iconName: "angle-up", variant: "icon", formAction: "none", ariaLabel: i18nStrings.openButtonAriaLabel, ref: refs.toggle, ariaExpanded: isOpen })))));
     const resizeHandle = (React.createElement(PanelResizeHandle, { ref: refs.slider, className: testUtilStyles.slider, ariaLabel: i18nStrings.resizeHandleAriaLabel, 
         // Allows us to use the logical left/right keys to move the slider left/right,
         // but match aria keyboard behavior of using left/right to decrease/increase

package/lib/internal/template/split-panel/implementation.js.map

@@ -1 +1 @@
-{"version":3,"file":"implementation.js","sourceRoot":"","sources":["../../../src/split-panel/implementation.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, useLayoutEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useAppLayoutToolbarEnabled } from '../app-layout/utils/feature-flags';\nimport { SizeControlProps } from '../app-layout/utils/interfaces';\nimport { useKeyboardEvents } from '../app-layout/utils/use-keyboard-events';\nimport { usePointerEvents } from '../app-layout/utils/use-pointer-events';\nimport { InternalButton } from '../button/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport PanelResizeHandle from '../internal/components/panel-resize-handle';\nimport { useSplitPanelContext } from '../internal/context/split-panel-context';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport globalVars from '../internal/styles/global-vars';\nimport { SomeRequired } from '../internal/types';\nimport { createWidgetizedComponent } from '../internal/widgets';\nimport { SplitPanelContentBottom } from './bottom';\nimport { SplitPanelProps } from './interfaces';\nimport PreferencesModal from './preferences-modal';\nimport { SplitPanelContentSide } from './side';\n\nimport styles from './styles.css.js';\nimport testUtilStyles from './test-classes/styles.css.js';\n\nexport type SplitPanelImplementationProps = SomeRequired<SplitPanelProps, 'hidePreferencesButton' | 'closeBehavior'> &\n  InternalBaseComponentProps;\n\nexport function SplitPanelImplementation({\n  __internalRootRef,\n  header,\n  children,\n  hidePreferencesButton,\n  closeBehavior,\n  i18nStrings = {},\n  ...restProps\n}: SplitPanelImplementationProps) {\n  const isRefresh = useVisualRefresh();\n  const isToolbar = useAppLayoutToolbarEnabled();\n\n  const {\n    position,\n    topOffset,\n    bottomOffset,\n    rightOffset,\n    contentWidthStyles,\n    isOpen,\n    isForcedPosition,\n    onPreferencesChange,\n    onResize,\n    onToggle,\n    size,\n    relativeSize,\n    setSplitPanelToggle,\n    refs,\n  } = useSplitPanelContext();\n  const baseProps = getBaseProps(restProps);\n  const [isPreferencesOpen, setPreferencesOpen] = useState<boolean>(false);\n\n  const appLayoutMaxWidth = isRefresh && position === 'bottom' ? contentWidthStyles : undefined;\n\n  const openButtonAriaLabel = i18nStrings.openButtonAriaLabel;\n  useEffect(() => {\n    setSplitPanelToggle({ displayed: closeBehavior === 'collapse', ariaLabel: openButtonAriaLabel });\n\n    return () => {\n      setSplitPanelToggle({ displayed: false, ariaLabel: undefined });\n    };\n  }, [setSplitPanelToggle, openButtonAriaLabel, closeBehavior]);\n\n  const splitPanelRefObject = useRef<HTMLDivElement>(null);\n\n  const sizeControlProps: SizeControlProps = {\n    position,\n    panelRef: splitPanelRefObject,\n    handleRef: refs.slider,\n    onResize,\n  };\n  const onSliderPointerDown = usePointerEvents(sizeControlProps);\n  const onKeyDown = useKeyboardEvents(sizeControlProps);\n\n  const contentStyle = {\n    [globalVars.stickyVerticalTopOffset]: topOffset,\n    [globalVars.stickyVerticalBottomOffset]: bottomOffset,\n  };\n\n  const panelHeaderId = useUniqueId('split-panel-header');\n\n  const wrappedHeader = (\n    <div className={clsx(styles.header, isToolbar && styles['with-toolbar'])} style={appLayoutMaxWidth}>\n      <h2 className={clsx(styles['header-text'], testUtilStyles['header-text'])} id={panelHeaderId}>\n        {header}\n      </h2>\n      <div className={styles['header-actions']}>\n        {!hidePreferencesButton && isOpen && (\n          <>\n            <InternalButton\n              className={testUtilStyles['preferences-button']}\n              iconName=\"settings\"\n              variant=\"icon\"\n              onClick={() => setPreferencesOpen(true)}\n              formAction=\"none\"\n              ariaLabel={i18nStrings.preferencesTitle}\n              ref={refs.preferences}\n            />\n            <span className={styles.divider} />\n          </>\n        )}\n\n        {isOpen ? (\n          <InternalButton\n            className={testUtilStyles['close-button']}\n            iconName={\n              isRefresh && closeBehavior === 'collapse' ? (position === 'side' ? 'angle-right' : 'angle-down') : 'close'\n            }\n            variant=\"icon\"\n            onClick={onToggle}\n            formAction=\"none\"\n            ariaLabel={i18nStrings.closeButtonAriaLabel}\n            ariaExpanded={isOpen}\n          />\n        ) : isToolbar || position === 'side' ? null : (\n          <InternalButton\n            className={testUtilStyles['open-button']}\n            iconName=\"angle-up\"\n            variant=\"icon\"\n            formAction=\"none\"\n            ariaLabel={i18nStrings.openButtonAriaLabel}\n            ref={refs.toggle}\n            ariaExpanded={isOpen}\n          />\n        )}\n      </div>\n    </div>\n  );\n\n  const resizeHandle = (\n    <PanelResizeHandle\n      ref={refs.slider}\n      className={testUtilStyles.slider}\n      ariaLabel={i18nStrings.resizeHandleAriaLabel}\n      // Allows us to use the logical left/right keys to move the slider left/right,\n      // but match aria keyboard behavior of using left/right to decrease/increase\n      // the slider value.\n      ariaValuenow={position === 'bottom' ? relativeSize : 100 - relativeSize}\n      position={position}\n      onKeyDown={onKeyDown}\n      onPointerDown={onSliderPointerDown}\n    />\n  );\n\n  /*\n    This effect forces the browser to recalculate the layout\n    whenever the split panel might have moved.\n\n    This is needed as a workaround for a bug in Safari, which does\n    not automatically calculate the new position of the split panel\n    _content_ when the split panel moves.\n  */\n  useLayoutEffect(() => {\n    const root = splitPanelRefObject.current;\n\n    if (root) {\n      const property = 'transform';\n      const temporaryValue = 'translateZ(0)';\n\n      const valueBefore = root.style[property];\n      root.style[property] = temporaryValue;\n\n      // This line forces the browser to recalculate the layout\n      void root.offsetHeight;\n\n      root.style[property] = valueBefore;\n    }\n  }, [rightOffset, __internalRootRef]);\n\n  const mergedRef = useMergeRefs(splitPanelRefObject, __internalRootRef);\n\n  if (closeBehavior === 'hide' && !isOpen) {\n    return <></>;\n  }\n\n  /**\n   * The AppLayout factor moved the circular buttons out of the\n   * SplitPanel and into the Tools component. This conditional\n   * is still needed for the early return to prevent execution\n   * of the following code.\n   */\n  if (isRefresh && !isToolbar && !isOpen && position === 'side') {\n    return <></>;\n  }\n\n  return (\n    <>\n      {position === 'side' && (\n        <SplitPanelContentSide\n          style={contentStyle}\n          resizeHandle={resizeHandle}\n          baseProps={baseProps}\n          isOpen={isOpen}\n          splitPanelRef={mergedRef}\n          cappedSize={size}\n          onToggle={onToggle}\n          openButtonAriaLabel={openButtonAriaLabel}\n          toggleRef={refs.toggle}\n          header={wrappedHeader}\n          panelHeaderId={panelHeaderId}\n        >\n          {children}\n        </SplitPanelContentSide>\n      )}\n\n      {position === 'bottom' && (\n        <SplitPanelContentBottom\n          style={contentStyle}\n          resizeHandle={resizeHandle}\n          baseProps={baseProps}\n          isOpen={isOpen}\n          splitPanelRef={mergedRef}\n          cappedSize={size}\n          onToggle={onToggle}\n          header={wrappedHeader}\n          panelHeaderId={panelHeaderId}\n          appLayoutMaxWidth={appLayoutMaxWidth}\n        >\n          {children}\n        </SplitPanelContentBottom>\n      )}\n      {isPreferencesOpen && (\n        <PreferencesModal\n          visible={true}\n          preferences={{ position }}\n          disabledSidePosition={position === 'bottom' && isForcedPosition}\n          isRefresh={isRefresh}\n          i18nStrings={{\n            header: i18nStrings.preferencesTitle,\n            confirm: i18nStrings.preferencesConfirm,\n            cancel: i18nStrings.preferencesCancel,\n            positionLabel: i18nStrings.preferencesPositionLabel,\n            positionDescription: i18nStrings.preferencesPositionDescription,\n            positionBottom: i18nStrings.preferencesPositionBottom,\n            positionSide: i18nStrings.preferencesPositionSide,\n          }}\n          onConfirm={preferences => {\n            onPreferencesChange({ ...preferences });\n            setPreferencesOpen(false);\n          }}\n          onDismiss={() => {\n            setPreferencesOpen(false);\n          }}\n        />\n      )}\n    </>\n  );\n}\n\nexport const createWidgetizedSplitPanel = createWidgetizedComponent(SplitPanelImplementation);\n"]}
+{"version":3,"file":"implementation.js","sourceRoot":"","sources":["../../../src/split-panel/implementation.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, useLayoutEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useAppLayoutToolbarEnabled } from '../app-layout/utils/feature-flags';\nimport { SizeControlProps } from '../app-layout/utils/interfaces';\nimport { useKeyboardEvents } from '../app-layout/utils/use-keyboard-events';\nimport { usePointerEvents } from '../app-layout/utils/use-pointer-events';\nimport { InternalButton } from '../button/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport PanelResizeHandle from '../internal/components/panel-resize-handle';\nimport { useSplitPanelContext } from '../internal/context/split-panel-context';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport globalVars from '../internal/styles/global-vars';\nimport { SomeRequired } from '../internal/types';\nimport { createWidgetizedComponent } from '../internal/widgets';\nimport { SplitPanelContentBottom } from './bottom';\nimport { SplitPanelProps } from './interfaces';\nimport PreferencesModal from './preferences-modal';\nimport { SplitPanelContentSide } from './side';\n\nimport styles from './styles.css.js';\nimport testUtilStyles from './test-classes/styles.css.js';\n\nexport type SplitPanelImplementationProps = SomeRequired<SplitPanelProps, 'hidePreferencesButton' | 'closeBehavior'> &\n  InternalBaseComponentProps;\n\nexport function SplitPanelImplementation({\n  __internalRootRef,\n  header,\n  children,\n  hidePreferencesButton,\n  closeBehavior,\n  i18nStrings = {},\n  ...restProps\n}: SplitPanelImplementationProps) {\n  const isRefresh = useVisualRefresh();\n  const isToolbar = useAppLayoutToolbarEnabled();\n\n  const {\n    position,\n    topOffset,\n    bottomOffset,\n    rightOffset,\n    contentWidthStyles,\n    isOpen,\n    isForcedPosition,\n    onPreferencesChange,\n    onResize,\n    onToggle,\n    size,\n    relativeSize,\n    setSplitPanelToggle,\n    refs,\n  } = useSplitPanelContext();\n  const baseProps = getBaseProps(restProps);\n  const [isPreferencesOpen, setPreferencesOpen] = useState<boolean>(false);\n\n  const appLayoutMaxWidth = isRefresh && position === 'bottom' ? contentWidthStyles : undefined;\n\n  const openButtonAriaLabel = i18nStrings.openButtonAriaLabel;\n  useEffect(() => {\n    setSplitPanelToggle({ displayed: closeBehavior === 'collapse', ariaLabel: openButtonAriaLabel });\n\n    return () => {\n      setSplitPanelToggle({ displayed: false, ariaLabel: undefined });\n    };\n  }, [setSplitPanelToggle, openButtonAriaLabel, closeBehavior]);\n\n  const splitPanelRefObject = useRef<HTMLDivElement>(null);\n\n  const sizeControlProps: SizeControlProps = {\n    position,\n    panelRef: splitPanelRefObject,\n    handleRef: refs.slider,\n    onResize,\n  };\n  const onSliderPointerDown = usePointerEvents(sizeControlProps);\n  const onKeyDown = useKeyboardEvents(sizeControlProps);\n\n  const contentStyle = {\n    [globalVars.stickyVerticalTopOffset]: topOffset,\n    [globalVars.stickyVerticalBottomOffset]: bottomOffset,\n  };\n\n  const panelHeaderId = useUniqueId('split-panel-header');\n\n  const wrappedHeader = (\n    <div className={clsx(styles.header, isToolbar && styles['with-toolbar'])} style={appLayoutMaxWidth}>\n      <h2 className={clsx(styles['header-text'], testUtilStyles['header-text'])} id={panelHeaderId}>\n        {header}\n      </h2>\n      <div className={styles['header-actions']}>\n        {!hidePreferencesButton && isOpen && (\n          <>\n            <InternalButton\n              className={testUtilStyles['preferences-button']}\n              iconName=\"settings\"\n              variant=\"icon\"\n              onClick={() => setPreferencesOpen(true)}\n              formAction=\"none\"\n              ariaLabel={i18nStrings.preferencesTitle}\n              ref={refs.preferences}\n            />\n            <span className={styles.divider} />\n          </>\n        )}\n\n        {isOpen ? (\n          <InternalButton\n            className={testUtilStyles['close-button']}\n            iconName={\n              isRefresh && closeBehavior === 'collapse' ? (position === 'side' ? 'angle-right' : 'angle-down') : 'close'\n            }\n            variant=\"icon\"\n            onClick={onToggle}\n            formAction=\"none\"\n            ariaLabel={i18nStrings.closeButtonAriaLabel}\n            ariaExpanded={isOpen}\n          />\n        ) : position === 'side' ? null : (\n          <InternalButton\n            className={testUtilStyles['open-button']}\n            iconName=\"angle-up\"\n            variant=\"icon\"\n            formAction=\"none\"\n            ariaLabel={i18nStrings.openButtonAriaLabel}\n            ref={refs.toggle}\n            ariaExpanded={isOpen}\n          />\n        )}\n      </div>\n    </div>\n  );\n\n  const resizeHandle = (\n    <PanelResizeHandle\n      ref={refs.slider}\n      className={testUtilStyles.slider}\n      ariaLabel={i18nStrings.resizeHandleAriaLabel}\n      // Allows us to use the logical left/right keys to move the slider left/right,\n      // but match aria keyboard behavior of using left/right to decrease/increase\n      // the slider value.\n      ariaValuenow={position === 'bottom' ? relativeSize : 100 - relativeSize}\n      position={position}\n      onKeyDown={onKeyDown}\n      onPointerDown={onSliderPointerDown}\n    />\n  );\n\n  /*\n    This effect forces the browser to recalculate the layout\n    whenever the split panel might have moved.\n\n    This is needed as a workaround for a bug in Safari, which does\n    not automatically calculate the new position of the split panel\n    _content_ when the split panel moves.\n  */\n  useLayoutEffect(() => {\n    const root = splitPanelRefObject.current;\n\n    if (root) {\n      const property = 'transform';\n      const temporaryValue = 'translateZ(0)';\n\n      const valueBefore = root.style[property];\n      root.style[property] = temporaryValue;\n\n      // This line forces the browser to recalculate the layout\n      void root.offsetHeight;\n\n      root.style[property] = valueBefore;\n    }\n  }, [rightOffset, __internalRootRef]);\n\n  const mergedRef = useMergeRefs(splitPanelRefObject, __internalRootRef);\n\n  if (closeBehavior === 'hide' && !isOpen) {\n    return <></>;\n  }\n\n  /**\n   * The AppLayout factor moved the circular buttons out of the\n   * SplitPanel and into the Tools component. This conditional\n   * is still needed for the early return to prevent execution\n   * of the following code.\n   */\n  if (isRefresh && !isToolbar && !isOpen && position === 'side') {\n    return <></>;\n  }\n\n  return (\n    <>\n      {position === 'side' && (\n        <SplitPanelContentSide\n          style={contentStyle}\n          resizeHandle={resizeHandle}\n          baseProps={baseProps}\n          isOpen={isOpen}\n          splitPanelRef={mergedRef}\n          cappedSize={size}\n          onToggle={onToggle}\n          openButtonAriaLabel={openButtonAriaLabel}\n          toggleRef={refs.toggle}\n          header={wrappedHeader}\n          panelHeaderId={panelHeaderId}\n        >\n          {children}\n        </SplitPanelContentSide>\n      )}\n\n      {position === 'bottom' && (\n        <SplitPanelContentBottom\n          style={contentStyle}\n          resizeHandle={resizeHandle}\n          baseProps={baseProps}\n          isOpen={isOpen}\n          splitPanelRef={mergedRef}\n          cappedSize={size}\n          onToggle={onToggle}\n          header={wrappedHeader}\n          panelHeaderId={panelHeaderId}\n          appLayoutMaxWidth={appLayoutMaxWidth}\n        >\n          {children}\n        </SplitPanelContentBottom>\n      )}\n      {isPreferencesOpen && (\n        <PreferencesModal\n          visible={true}\n          preferences={{ position }}\n          disabledSidePosition={position === 'bottom' && isForcedPosition}\n          isRefresh={isRefresh}\n          i18nStrings={{\n            header: i18nStrings.preferencesTitle,\n            confirm: i18nStrings.preferencesConfirm,\n            cancel: i18nStrings.preferencesCancel,\n            positionLabel: i18nStrings.preferencesPositionLabel,\n            positionDescription: i18nStrings.preferencesPositionDescription,\n            positionBottom: i18nStrings.preferencesPositionBottom,\n            positionSide: i18nStrings.preferencesPositionSide,\n          }}\n          onConfirm={preferences => {\n            onPreferencesChange({ ...preferences });\n            setPreferencesOpen(false);\n          }}\n          onDismiss={() => {\n            setPreferencesOpen(false);\n          }}\n        />\n      )}\n    </>\n  );\n}\n\nexport const createWidgetizedSplitPanel = createWidgetizedComponent(SplitPanelImplementation);\n"]}

package/lib/internal/template/split-panel/styles.css.js

@@ -1,31 +1,31 @@
 
     import './styles.scoped.css';
     export default {
-  "drawer": "awsui_drawer_1r9lg_gz9hx_149",
-  "drawer-closed": "awsui_drawer-closed_1r9lg_gz9hx_189",
-  "refresh": "awsui_refresh_1r9lg_gz9hx_189",
-  "drawer-content-side": "awsui_drawer-content-side_1r9lg_gz9hx_194",
-  "drawer-content-bottom": "awsui_drawer-content-bottom_1r9lg_gz9hx_210",
-  "position-bottom": "awsui_position-bottom_1r9lg_gz9hx_217",
-  "with-toolbar": "awsui_with-toolbar_1r9lg_gz9hx_234",
-  "position-side": "awsui_position-side_1r9lg_gz9hx_249",
-  "slider-wrapper-bottom": "awsui_slider-wrapper-bottom_1r9lg_gz9hx_258",
-  "slider-wrapper-side": "awsui_slider-wrapper-side_1r9lg_gz9hx_269",
-  "open-button-side": "awsui_open-button-side_1r9lg_gz9hx_283",
-  "pane-header-wrapper-bottom": "awsui_pane-header-wrapper-bottom_1r9lg_gz9hx_292",
-  "drawer-mobile": "awsui_drawer-mobile_1r9lg_gz9hx_302",
-  "drawer-disable-content-paddings": "awsui_drawer-disable-content-paddings_1r9lg_gz9hx_306",
-  "content-bottom": "awsui_content-bottom_1r9lg_gz9hx_318",
-  "pane-bottom-center-align": "awsui_pane-bottom-center-align_1r9lg_gz9hx_337",
-  "pane-bottom-content-nav-padding": "awsui_pane-bottom-content-nav-padding_1r9lg_gz9hx_342",
-  "pane-bottom-content-tools-padding": "awsui_pane-bottom-content-tools-padding_1r9lg_gz9hx_346",
-  "content-bottom-max-width": "awsui_content-bottom-max-width_1r9lg_gz9hx_350",
-  "content-side": "awsui_content-side_1r9lg_gz9hx_355",
-  "pane-header-wrapper-side": "awsui_pane-header-wrapper-side_1r9lg_gz9hx_367",
-  "pane-content-wrapper-side": "awsui_pane-content-wrapper-side_1r9lg_gz9hx_376",
-  "header": "awsui_header_1r9lg_gz9hx_387",
-  "header-text": "awsui_header-text_1r9lg_gz9hx_400",
-  "header-actions": "awsui_header-actions_1r9lg_gz9hx_413",
-  "divider": "awsui_divider_1r9lg_gz9hx_421"
+  "drawer": "awsui_drawer_1r9lg_1jb1k_149",
+  "drawer-closed": "awsui_drawer-closed_1r9lg_1jb1k_186",
+  "refresh": "awsui_refresh_1r9lg_1jb1k_186",
+  "drawer-content-side": "awsui_drawer-content-side_1r9lg_1jb1k_191",
+  "drawer-content-bottom": "awsui_drawer-content-bottom_1r9lg_1jb1k_207",
+  "position-bottom": "awsui_position-bottom_1r9lg_1jb1k_214",
+  "position-side": "awsui_position-side_1r9lg_1jb1k_241",
+  "with-toolbar": "awsui_with-toolbar_1r9lg_1jb1k_246",
+  "slider-wrapper-bottom": "awsui_slider-wrapper-bottom_1r9lg_1jb1k_250",
+  "slider-wrapper-side": "awsui_slider-wrapper-side_1r9lg_1jb1k_261",
+  "open-button-side": "awsui_open-button-side_1r9lg_1jb1k_275",
+  "pane-header-wrapper-bottom": "awsui_pane-header-wrapper-bottom_1r9lg_1jb1k_284",
+  "drawer-mobile": "awsui_drawer-mobile_1r9lg_1jb1k_294",
+  "drawer-disable-content-paddings": "awsui_drawer-disable-content-paddings_1r9lg_1jb1k_298",
+  "content-bottom": "awsui_content-bottom_1r9lg_1jb1k_310",
+  "pane-bottom-center-align": "awsui_pane-bottom-center-align_1r9lg_1jb1k_329",
+  "pane-bottom-content-nav-padding": "awsui_pane-bottom-content-nav-padding_1r9lg_1jb1k_334",
+  "pane-bottom-content-tools-padding": "awsui_pane-bottom-content-tools-padding_1r9lg_1jb1k_338",
+  "content-bottom-max-width": "awsui_content-bottom-max-width_1r9lg_1jb1k_342",
+  "content-side": "awsui_content-side_1r9lg_1jb1k_347",
+  "pane-header-wrapper-side": "awsui_pane-header-wrapper-side_1r9lg_1jb1k_359",
+  "pane-content-wrapper-side": "awsui_pane-content-wrapper-side_1r9lg_1jb1k_368",
+  "header": "awsui_header_1r9lg_1jb1k_379",
+  "header-text": "awsui_header-text_1r9lg_1jb1k_392",
+  "header-actions": "awsui_header-actions_1r9lg_1jb1k_405",
+  "divider": "awsui_divider_1r9lg_1jb1k_413"
 };
   

package/lib/internal/template/split-panel/styles.scoped.css

@@ -146,7 +146,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_drawer_1r9lg_gz9hx_149:not(#\9) {
+.awsui_drawer_1r9lg_1jb1k_149:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -155,12 +155,9 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   direction: inherit;
   empty-cells: show;
   font-family: serif;
-  font-size: medium;
   font-style: normal;
   font-variant: normal;
-  font-weight: 400;
   font-stretch: normal;
-  line-height: normal;
   -webkit-hyphens: none;
           hyphens: none;
   letter-spacing: normal;
@@ -187,35 +184,35 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   background-color: var(--color-background-layout-panel-content-70ws8g, #ffffff);
   z-index: 840;
 }
-.awsui_drawer-closed_1r9lg_gz9hx_189:not(#\9):not(.awsui_refresh_1r9lg_gz9hx_189) {
+.awsui_drawer-closed_1r9lg_1jb1k_186:not(#\9):not(.awsui_refresh_1r9lg_1jb1k_186) {
   cursor: pointer;
   min-inline-size: 40px;
 }
 
-.awsui_drawer-content-side_1r9lg_gz9hx_194:not(#\9) {
+.awsui_drawer-content-side_1r9lg_1jb1k_191:not(#\9) {
   display: flex;
   align-items: center;
   block-size: 100%;
   overflow: auto;
 }
-.awsui_drawer-content-side_1r9lg_gz9hx_194 > [aria-hidden=true]:not(#\9), .awsui_drawer-closed_1r9lg_gz9hx_189.awsui_refresh_1r9lg_gz9hx_189 > .awsui_drawer-content-side_1r9lg_gz9hx_194:not(#\9) {
+.awsui_drawer-content-side_1r9lg_1jb1k_191 > [aria-hidden=true]:not(#\9), .awsui_drawer-closed_1r9lg_1jb1k_186.awsui_refresh_1r9lg_1jb1k_186 > .awsui_drawer-content-side_1r9lg_1jb1k_191:not(#\9) {
   display: none;
 }
-.awsui_drawer-closed_1r9lg_gz9hx_189:not(#\9):not(.awsui_refresh_1r9lg_gz9hx_189) > .awsui_drawer-content-side_1r9lg_gz9hx_194 {
+.awsui_drawer-closed_1r9lg_1jb1k_186:not(#\9):not(.awsui_refresh_1r9lg_1jb1k_186) > .awsui_drawer-content-side_1r9lg_1jb1k_191 {
   inline-size: 40px;
 }
-.awsui_drawer-closed_1r9lg_gz9hx_189:not(#\9):not(.awsui_refresh_1r9lg_gz9hx_189) > .awsui_drawer-content-side_1r9lg_gz9hx_194:hover {
+.awsui_drawer-closed_1r9lg_1jb1k_186:not(#\9):not(.awsui_refresh_1r9lg_1jb1k_186) > .awsui_drawer-content-side_1r9lg_1jb1k_191:hover {
   background: var(--color-background-layout-panel-hover-7apn2n, #eaeded);
 }
 
-:not(#\9):not(.awsui_drawer-closed_1r9lg_gz9hx_189) > .awsui_drawer-content-bottom_1r9lg_gz9hx_210 {
+:not(#\9):not(.awsui_drawer-closed_1r9lg_1jb1k_186) > .awsui_drawer-content-bottom_1r9lg_1jb1k_207 {
   overflow-y: auto;
   position: absolute;
   inset: 0;
   clip-path: border-box;
 }
 
-.awsui_position-bottom_1r9lg_gz9hx_217:not(#\9) {
+.awsui_position-bottom_1r9lg_1jb1k_214:not(#\9) {
   position: fixed;
   overflow-y: auto;
   border-block-start: var(--border-panel-top-width-r884k5, 0px) solid var(--color-border-divider-panel-bottom-x4u2pv, rgba(0, 28, 36, 0.15));
@@ -224,39 +221,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_gz9hx_217:not(#\9):not(.awsui_refresh_1r9lg_gz9hx_189) {
+.awsui_position-bottom_1r9lg_1jb1k_214:not(#\9):not(.awsui_refresh_1r9lg_1jb1k_186) {
   box-shadow: var(--shadow-split-bottom-wl1xw5, 0 -2px 1px -1px rgba(0, 28, 36, 0.15), 0 -1px 1px -1px rgba(0, 28, 36, 0.3));
   border-inline-start: var(--border-divider-section-width-iueskx, 1px) solid var(--color-border-divider-panel-bottom-x4u2pv, rgba(0, 28, 36, 0.15));
   border-inline-end: var(--border-divider-section-width-iueskx, 1px) solid var(--color-border-divider-panel-bottom-x4u2pv, rgba(0, 28, 36, 0.15));
 }
-.awsui_position-bottom_1r9lg_gz9hx_217.awsui_drawer-closed_1r9lg_gz9hx_189:not(#\9) {
+.awsui_position-bottom_1r9lg_1jb1k_214.awsui_drawer-closed_1r9lg_1jb1k_186:not(#\9) {
   overflow: hidden;
 }
-.awsui_position-bottom_1r9lg_gz9hx_217.awsui_drawer-closed_1r9lg_gz9hx_189.awsui_with-toolbar_1r9lg_gz9hx_234:not(#\9) {
-  block-size: 0px;
-  border-block: none;
-  border-inline: none;
-}
-.awsui_position-bottom_1r9lg_gz9hx_217.awsui_drawer-closed_1r9lg_gz9hx_189:not(#\9):hover {
+.awsui_position-bottom_1r9lg_1jb1k_214.awsui_drawer-closed_1r9lg_1jb1k_186:not(#\9):hover {
   background: var(--color-background-layout-panel-hover-7apn2n, #eaeded);
 }
-.awsui_position-bottom_1r9lg_gz9hx_217 > .awsui_drawer-content-bottom_1r9lg_gz9hx_210 > [aria-hidden=true]:not(#\9) {
+.awsui_position-bottom_1r9lg_1jb1k_214 > .awsui_drawer-content-bottom_1r9lg_1jb1k_207 > [aria-hidden=true]:not(#\9) {
   display: none;
 }
-.awsui_position-bottom_1r9lg_gz9hx_217.awsui_refresh_1r9lg_gz9hx_189:not(#\9) {
+.awsui_position-bottom_1r9lg_1jb1k_214.awsui_refresh_1r9lg_1jb1k_186:not(#\9) {
   position: relative;
 }
 
-.awsui_position-side_1r9lg_gz9hx_249:not(#\9) {
+.awsui_position-side_1r9lg_1jb1k_241:not(#\9) {
   border-block-start: none;
   box-shadow: var(--shadow-split-side-f26q5c, 0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15));
   block-size: 100%;
 }
-.awsui_position-side_1r9lg_gz9hx_249.awsui_with-toolbar_1r9lg_gz9hx_234:not(#\9) {
+.awsui_position-side_1r9lg_1jb1k_241.awsui_with-toolbar_1r9lg_1jb1k_246:not(#\9) {
   box-shadow: none;
 }
 
-.awsui_slider-wrapper-bottom_1r9lg_gz9hx_258:not(#\9) {
+.awsui_slider-wrapper-bottom_1r9lg_1jb1k_250:not(#\9) {
   position: absolute;
   inset-block-start: 0;
   inset-inline-start: 0;
@@ -267,7 +259,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   z-index: 2;
 }
 
-.awsui_slider-wrapper-side_1r9lg_gz9hx_269:not(#\9) {
+.awsui_slider-wrapper-side_1r9lg_1jb1k_261:not(#\9) {
   position: absolute;
   inset-inline-start: 0;
   inset-block-start: 0;
@@ -277,11 +269,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   align-items: center;
   z-index: 1;
 }
-.awsui_slider-wrapper-side_1r9lg_gz9hx_269.awsui_with-toolbar_1r9lg_gz9hx_234:not(#\9) {
+.awsui_slider-wrapper-side_1r9lg_1jb1k_261.awsui_with-toolbar_1r9lg_1jb1k_246:not(#\9) {
   position: unset;
 }
 
-.awsui_open-button-side_1r9lg_gz9hx_283:not(#\9) {
+.awsui_open-button-side_1r9lg_1jb1k_275:not(#\9) {
   flex: 0 0 auto;
   align-self: flex-start;
   box-sizing: border-box;
@@ -290,7 +282,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-inline: auto;
 }
 
-.awsui_pane-header-wrapper-bottom_1r9lg_gz9hx_292:not(#\9) {
+.awsui_pane-header-wrapper-bottom_1r9lg_1jb1k_284:not(#\9) {
   position: sticky;
   inset-block-start: 0;
   display: flex;
@@ -300,60 +292,60 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   padding-block: 0;
   padding-inline: var(--space-layout-content-horizontal-18y4hb, 40px);
 }
-.awsui_drawer-mobile_1r9lg_gz9hx_302 > .awsui_drawer-content-bottom_1r9lg_gz9hx_210 > .awsui_pane-header-wrapper-bottom_1r9lg_gz9hx_292:not(#\9) {
+.awsui_drawer-mobile_1r9lg_1jb1k_294 > .awsui_drawer-content-bottom_1r9lg_1jb1k_207 > .awsui_pane-header-wrapper-bottom_1r9lg_1jb1k_284:not(#\9) {
   padding-block: 0;
   padding-inline: var(--space-l-eenfqd, 20px);
 }
-.awsui_drawer-disable-content-paddings_1r9lg_gz9hx_306 > .awsui_drawer-content-bottom_1r9lg_gz9hx_210 > .awsui_pane-header-wrapper-bottom_1r9lg_gz9hx_292:not(#\9) {
+.awsui_drawer-disable-content-paddings_1r9lg_1jb1k_298 > .awsui_drawer-content-bottom_1r9lg_1jb1k_207 > .awsui_pane-header-wrapper-bottom_1r9lg_1jb1k_284:not(#\9) {
   padding-block: 0;
   padding-inline: var(--space-l-eenfqd, 20px);
 }
-:not(#\9):not(.awsui_drawer-closed_1r9lg_gz9hx_189) > .awsui_drawer-content-bottom_1r9lg_gz9hx_210 > .awsui_pane-header-wrapper-bottom_1r9lg_gz9hx_292 {
+:not(#\9):not(.awsui_drawer-closed_1r9lg_1jb1k_186) > .awsui_drawer-content-bottom_1r9lg_1jb1k_207 > .awsui_pane-header-wrapper-bottom_1r9lg_1jb1k_284 {
   background-color: var(--color-background-layout-panel-content-70ws8g, #ffffff);
   border-block-end: var(--border-panel-header-width-5k61ph, 0px) solid var(--color-border-panel-header-q2vg1j, #eaeded);
 }
-.awsui_with-toolbar_1r9lg_gz9hx_234:not(#\9):not(.awsui_drawer-closed_1r9lg_gz9hx_189) > .awsui_drawer-content-bottom_1r9lg_gz9hx_210 > .awsui_pane-header-wrapper-bottom_1r9lg_gz9hx_292 {
+.awsui_with-toolbar_1r9lg_1jb1k_246:not(#\9):not(.awsui_drawer-closed_1r9lg_1jb1k_186) > .awsui_drawer-content-bottom_1r9lg_1jb1k_207 > .awsui_pane-header-wrapper-bottom_1r9lg_1jb1k_284 {
   border-color: transparent;
 }
 
-.awsui_content-bottom_1r9lg_gz9hx_318:not(#\9) {
+.awsui_content-bottom_1r9lg_1jb1k_310:not(#\9) {
   padding-block: 0;
   padding-inline: var(--space-layout-content-horizontal-18y4hb, 40px);
   margin-block-start: var(--space-panel-split-top-lbihmh, 0px);
   position: relative;
   z-index: 0;
 }
-.awsui_with-toolbar_1r9lg_gz9hx_234 > .awsui_drawer-content-bottom_1r9lg_gz9hx_210 > .awsui_content-bottom_1r9lg_gz9hx_318:not(#\9) {
+.awsui_with-toolbar_1r9lg_1jb1k_246 > .awsui_drawer-content-bottom_1r9lg_1jb1k_207 > .awsui_content-bottom_1r9lg_1jb1k_310:not(#\9) {
   margin-block-start: 0px;
 }
-.awsui_drawer-mobile_1r9lg_gz9hx_302 > .awsui_drawer-content-bottom_1r9lg_gz9hx_210 > .awsui_content-bottom_1r9lg_gz9hx_318:not(#\9) {
+.awsui_drawer-mobile_1r9lg_1jb1k_294 > .awsui_drawer-content-bottom_1r9lg_1jb1k_207 > .awsui_content-bottom_1r9lg_1jb1k_310:not(#\9) {
   padding-block: 0;
   padding-inline: var(--space-l-eenfqd, 20px);
 }
-.awsui_drawer-disable-content-paddings_1r9lg_gz9hx_306 > .awsui_drawer-content-bottom_1r9lg_gz9hx_210 > .awsui_content-bottom_1r9lg_gz9hx_318:not(#\9) {
+.awsui_drawer-disable-content-paddings_1r9lg_1jb1k_298 > .awsui_drawer-content-bottom_1r9lg_1jb1k_207 > .awsui_content-bottom_1r9lg_1jb1k_310:not(#\9) {
   padding-block: 0;
   padding-inline: 0;
 }
 
-.awsui_pane-bottom-center-align_1r9lg_gz9hx_337:not(#\9) {
+.awsui_pane-bottom-center-align_1r9lg_1jb1k_329:not(#\9) {
   display: flex;
   justify-content: center;
 }
 
-.awsui_pane-bottom-content-nav-padding_1r9lg_gz9hx_342:not(#\9) {
+.awsui_pane-bottom-content-nav-padding_1r9lg_1jb1k_334:not(#\9) {
   padding-inline-start: calc(var(--space-layout-toggle-diameter-sv0v6a, 36px) + 2 * var(--space-layout-toggle-padding-xtz3a6, 12px));
 }
 
-.awsui_pane-bottom-content-tools-padding_1r9lg_gz9hx_346:not(#\9) {
+.awsui_pane-bottom-content-tools-padding_1r9lg_1jb1k_338:not(#\9) {
   padding-inline-end: calc(var(--space-layout-toggle-diameter-sv0v6a, 36px) + 2 * var(--space-layout-toggle-padding-xtz3a6, 12px));
 }
 
-.awsui_content-bottom-max-width_1r9lg_gz9hx_350:not(#\9) {
+.awsui_content-bottom-max-width_1r9lg_1jb1k_342:not(#\9) {
   flex-grow: 1;
   max-inline-size: 100%;
 }
 
-.awsui_content-side_1r9lg_gz9hx_355:not(#\9) {
+.awsui_content-side_1r9lg_1jb1k_347:not(#\9) {
   flex: auto;
   align-self: flex-start;
   box-sizing: border-box;
@@ -362,30 +354,30 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   inset-inline: 0;
   block-size: 100%;
 }
-.awsui_content-side_1r9lg_gz9hx_355.awsui_with-toolbar_1r9lg_gz9hx_234:not(#\9) {
+.awsui_content-side_1r9lg_1jb1k_347.awsui_with-toolbar_1r9lg_1jb1k_246:not(#\9) {
   position: absolute;
 }
-.awsui_content-side_1r9lg_gz9hx_355 > .awsui_pane-header-wrapper-side_1r9lg_gz9hx_367:not(#\9) {
+.awsui_content-side_1r9lg_1jb1k_347 > .awsui_pane-header-wrapper-side_1r9lg_1jb1k_359:not(#\9) {
   padding-block: 0;
   padding-inline-end: var(--space-m-u91ipm, 16px);
   padding-inline-start: var(--space-panel-side-left-1i2jyv, 32px);
   border-block-end: var(--border-panel-header-width-5k61ph, 0px) solid var(--color-border-panel-header-q2vg1j, #eaeded);
 }
-.awsui_content-side_1r9lg_gz9hx_355.awsui_with-toolbar_1r9lg_gz9hx_234 > .awsui_pane-header-wrapper-side_1r9lg_gz9hx_367:not(#\9) {
+.awsui_content-side_1r9lg_1jb1k_347.awsui_with-toolbar_1r9lg_1jb1k_246 > .awsui_pane-header-wrapper-side_1r9lg_1jb1k_359:not(#\9) {
   border-color: transparent;
 }
-.awsui_content-side_1r9lg_gz9hx_355 > .awsui_pane-content-wrapper-side_1r9lg_gz9hx_376:not(#\9) {
+.awsui_content-side_1r9lg_1jb1k_347 > .awsui_pane-content-wrapper-side_1r9lg_1jb1k_368:not(#\9) {
   padding-block: 0;
   padding-inline-start: var(--space-panel-side-left-1i2jyv, 32px);
   padding-inline-end: var(--space-panel-side-right-otvpm8, 32px);
   margin-block-start: var(--space-panel-split-top-lbihmh, 0px);
   margin-block-end: var(--space-panel-split-bottom-j0hrt0, 20px);
 }
-.awsui_content-side_1r9lg_gz9hx_355.awsui_with-toolbar_1r9lg_gz9hx_234 > .awsui_pane-content-wrapper-side_1r9lg_gz9hx_376:not(#\9) {
+.awsui_content-side_1r9lg_1jb1k_347.awsui_with-toolbar_1r9lg_1jb1k_246 > .awsui_pane-content-wrapper-side_1r9lg_1jb1k_368:not(#\9) {
   margin-block-start: 0px;
 }
 
-.awsui_header_1r9lg_gz9hx_387:not(#\9) {
+.awsui_header_1r9lg_1jb1k_379:not(#\9) {
   display: flex;
   flex: auto;
   flex-direction: row;
@@ -395,10 +387,10 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-block: var(--size-vertical-panel-icon-offset-t770lc, 15px);
   margin-inline: 0;
 }
-.awsui_header_1r9lg_gz9hx_387.awsui_with-toolbar_1r9lg_gz9hx_234:not(#\9) {
+.awsui_header_1r9lg_1jb1k_379.awsui_with-toolbar_1r9lg_1jb1k_246:not(#\9) {
   margin-block: 14px;
 }
-.awsui_header-text_1r9lg_gz9hx_400:not(#\9) {
+.awsui_header-text_1r9lg_1jb1k_392:not(#\9) {
   font-size: var(--font-panel-header-size-197c0y, 18px);
   line-height: var(--font-panel-header-line-height-av95ns, 22px);
   font-weight: var(--font-weight-heading-l-ypbqtk, 700);
@@ -411,7 +403,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-block-start: calc(var(--space-scaled-xxs-krq5fq, 4px) + 1px);
 }
 
-.awsui_header-actions_1r9lg_gz9hx_413:not(#\9) {
+.awsui_header-actions_1r9lg_1jb1k_405:not(#\9) {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -419,7 +411,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-inline-start: var(--space-xs-6dgkww, 8px);
 }
 
-.awsui_divider_1r9lg_gz9hx_421:not(#\9) {
+.awsui_divider_1r9lg_1jb1k_413:not(#\9) {
   border-inline-end: var(--border-divider-section-width-iueskx, 1px) solid var(--color-border-divider-default-u5ytia, #eaeded);
   margin-block: var(--space-scaled-xxs-krq5fq, 4px);
   margin-inline: var(--space-scaled-xs-t3am3w, 8px);

package/lib/internal/template/split-panel/styles.selectors.js

@@ -2,31 +2,31 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "drawer": "awsui_drawer_1r9lg_gz9hx_149",
-  "drawer-closed": "awsui_drawer-closed_1r9lg_gz9hx_189",
-  "refresh": "awsui_refresh_1r9lg_gz9hx_189",
-  "drawer-content-side": "awsui_drawer-content-side_1r9lg_gz9hx_194",
-  "drawer-content-bottom": "awsui_drawer-content-bottom_1r9lg_gz9hx_210",
-  "position-bottom": "awsui_position-bottom_1r9lg_gz9hx_217",
-  "with-toolbar": "awsui_with-toolbar_1r9lg_gz9hx_234",
-  "position-side": "awsui_position-side_1r9lg_gz9hx_249",
-  "slider-wrapper-bottom": "awsui_slider-wrapper-bottom_1r9lg_gz9hx_258",
-  "slider-wrapper-side": "awsui_slider-wrapper-side_1r9lg_gz9hx_269",
-  "open-button-side": "awsui_open-button-side_1r9lg_gz9hx_283",
-  "pane-header-wrapper-bottom": "awsui_pane-header-wrapper-bottom_1r9lg_gz9hx_292",
-  "drawer-mobile": "awsui_drawer-mobile_1r9lg_gz9hx_302",
-  "drawer-disable-content-paddings": "awsui_drawer-disable-content-paddings_1r9lg_gz9hx_306",
-  "content-bottom": "awsui_content-bottom_1r9lg_gz9hx_318",
-  "pane-bottom-center-align": "awsui_pane-bottom-center-align_1r9lg_gz9hx_337",
-  "pane-bottom-content-nav-padding": "awsui_pane-bottom-content-nav-padding_1r9lg_gz9hx_342",
-  "pane-bottom-content-tools-padding": "awsui_pane-bottom-content-tools-padding_1r9lg_gz9hx_346",
-  "content-bottom-max-width": "awsui_content-bottom-max-width_1r9lg_gz9hx_350",
-  "content-side": "awsui_content-side_1r9lg_gz9hx_355",
-  "pane-header-wrapper-side": "awsui_pane-header-wrapper-side_1r9lg_gz9hx_367",
-  "pane-content-wrapper-side": "awsui_pane-content-wrapper-side_1r9lg_gz9hx_376",
-  "header": "awsui_header_1r9lg_gz9hx_387",
-  "header-text": "awsui_header-text_1r9lg_gz9hx_400",
-  "header-actions": "awsui_header-actions_1r9lg_gz9hx_413",
-  "divider": "awsui_divider_1r9lg_gz9hx_421"
+  "drawer": "awsui_drawer_1r9lg_1jb1k_149",
+  "drawer-closed": "awsui_drawer-closed_1r9lg_1jb1k_186",
+  "refresh": "awsui_refresh_1r9lg_1jb1k_186",
+  "drawer-content-side": "awsui_drawer-content-side_1r9lg_1jb1k_191",
+  "drawer-content-bottom": "awsui_drawer-content-bottom_1r9lg_1jb1k_207",
+  "position-bottom": "awsui_position-bottom_1r9lg_1jb1k_214",
+  "position-side": "awsui_position-side_1r9lg_1jb1k_241",
+  "with-toolbar": "awsui_with-toolbar_1r9lg_1jb1k_246",
+  "slider-wrapper-bottom": "awsui_slider-wrapper-bottom_1r9lg_1jb1k_250",
+  "slider-wrapper-side": "awsui_slider-wrapper-side_1r9lg_1jb1k_261",
+  "open-button-side": "awsui_open-button-side_1r9lg_1jb1k_275",
+  "pane-header-wrapper-bottom": "awsui_pane-header-wrapper-bottom_1r9lg_1jb1k_284",
+  "drawer-mobile": "awsui_drawer-mobile_1r9lg_1jb1k_294",
+  "drawer-disable-content-paddings": "awsui_drawer-disable-content-paddings_1r9lg_1jb1k_298",
+  "content-bottom": "awsui_content-bottom_1r9lg_1jb1k_310",
+  "pane-bottom-center-align": "awsui_pane-bottom-center-align_1r9lg_1jb1k_329",
+  "pane-bottom-content-nav-padding": "awsui_pane-bottom-content-nav-padding_1r9lg_1jb1k_334",
+  "pane-bottom-content-tools-padding": "awsui_pane-bottom-content-tools-padding_1r9lg_1jb1k_338",
+  "content-bottom-max-width": "awsui_content-bottom-max-width_1r9lg_1jb1k_342",
+  "content-side": "awsui_content-side_1r9lg_1jb1k_347",
+  "pane-header-wrapper-side": "awsui_pane-header-wrapper-side_1r9lg_1jb1k_359",
+  "pane-content-wrapper-side": "awsui_pane-content-wrapper-side_1r9lg_1jb1k_368",
+  "header": "awsui_header_1r9lg_1jb1k_379",
+  "header-text": "awsui_header-text_1r9lg_1jb1k_392",
+  "header-actions": "awsui_header-actions_1r9lg_1jb1k_405",
+  "divider": "awsui_divider_1r9lg_1jb1k_413"
 };
   

package/lib/internal/template/steps/internal.d.ts

@@ -3,6 +3,6 @@ import { InternalBaseComponentProps } from '../internal/hooks/use-base-component
 import { SomeRequired } from '../internal/types';
 import { StepsProps } from './interfaces';
 type InternalStepsProps = SomeRequired<StepsProps, 'steps'> & InternalBaseComponentProps<HTMLDivElement>;
-export declare const InternalSteps: ({ steps, ariaLabel, ariaLabelledby, ariaDescribedby, __internalRootRef, ...props }: InternalStepsProps) => JSX.Element;
+declare const InternalSteps: ({ steps, ariaLabel, ariaLabelledby, ariaDescribedby, __internalRootRef, ...props }: InternalStepsProps) => JSX.Element;
 export default InternalSteps;
 //# sourceMappingURL=internal.d.ts.map

package/lib/internal/template/steps/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/steps/internal.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAClF,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAI1C,KAAK,kBAAkB,GAAG,YAAY,CAAC,UAAU,EAAE,OAAO,CAAC,GAAG,0BAA0B,CAAC,cAAc,CAAC,CAAC;AAgBzG,eAAO,MAAM,aAAa,uFAOvB,kBAAkB,gBAqBpB,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/steps/internal.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAClF,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAI1C,KAAK,kBAAkB,GAAG,YAAY,CAAC,UAAU,EAAE,OAAO,CAAC,GAAG,0BAA0B,CAAC,cAAc,CAAC,CAAC;AAgBzG,QAAA,MAAM,aAAa,uFAOhB,kBAAkB,gBAqBpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/internal/template/steps/internal.js

@@ -12,7 +12,7 @@ const InternalStep = ({ status, statusIconAriaLabel, header, details }) => {
         React.createElement("hr", { className: styles.connector, role: "none" }),
         details && React.createElement("div", { className: styles.details }, details)));
 };
-export const InternalSteps = (_a) => {
+const InternalSteps = (_a) => {
     var { steps, ariaLabel, ariaLabelledby, ariaDescribedby, __internalRootRef } = _a, props = __rest(_a, ["steps", "ariaLabel", "ariaLabelledby", "ariaDescribedby", "__internalRootRef"]);
     return (React.createElement("div", Object.assign({}, props, { className: clsx(styles.root, props.className), ref: __internalRootRef }),
         React.createElement("ol", { className: styles.list, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby }, steps.map((step, index) => (React.createElement(InternalStep, { key: index, status: step.status, statusIconAriaLabel: step.statusIconAriaLabel, header: step.header, details: step.details }))))));

package/lib/internal/template/steps/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/steps/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAIxB,OAAO,eAAe,MAAM,8BAA8B,CAAC;AAG3D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,YAAY,GAAG,CAAC,EAAE,MAAM,EAAE,mBAAmB,EAAE,MAAM,EAAE,OAAO,EAAmB,EAAE,EAAE;IACzF,OAAO,CACL,4BAAI,SAAS,EAAE,MAAM,CAAC,SAAS;QAC7B,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM;YAC3B,oBAAC,eAAe,IAAC,IAAI,EAAE,MAAM,EAAE,aAAa,EAAE,mBAAmB,IAC9D,MAAM,CACS,CACd;QACN,4BAAI,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,IAAI,EAAC,MAAM,GAAG;QAC9C,OAAO,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,OAAO,CAAO,CACxD,CACN,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAOT,EAAE,EAAE;QAPK,EAC5B,KAAK,EACL,SAAS,EACT,cAAc,EACd,eAAe,EACf,iBAAiB,OAEE,EADhB,KAAK,cANoB,gFAO7B,CADS;IAER,OAAO,CACL,6CAAS,KAAK,IAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC,EAAE,GAAG,EAAE,iBAAiB;QACnF,4BACE,SAAS,EAAE,MAAM,CAAC,IAAI,gBACV,SAAS,qBACJ,cAAc,sBACb,eAAe,IAEhC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC1B,oBAAC,YAAY,IACX,GAAG,EAAE,KAAK,EACV,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,mBAAmB,EAAE,IAAI,CAAC,mBAAmB,EAC7C,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,GACrB,CACH,CAAC,CACC,CACD,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,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 { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { SomeRequired } from '../internal/types';\nimport StatusIndicator from '../status-indicator/internal';\nimport { StepsProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ntype InternalStepsProps = SomeRequired<StepsProps, 'steps'> & InternalBaseComponentProps<HTMLDivElement>;\n\nconst InternalStep = ({ status, statusIconAriaLabel, header, details }: StepsProps.Step) => {\n  return (\n    <li className={styles.container}>\n      <div className={styles.header}>\n        <StatusIndicator type={status} iconAriaLabel={statusIconAriaLabel}>\n          {header}\n        </StatusIndicator>\n      </div>\n      <hr className={styles.connector} role=\"none\" />\n      {details && <div className={styles.details}>{details}</div>}\n    </li>\n  );\n};\n\nexport const InternalSteps = ({\n  steps,\n  ariaLabel,\n  ariaLabelledby,\n  ariaDescribedby,\n  __internalRootRef,\n  ...props\n}: InternalStepsProps) => {\n  return (\n    <div {...props} className={clsx(styles.root, props.className)} ref={__internalRootRef}>\n      <ol\n        className={styles.list}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        aria-describedby={ariaDescribedby}\n      >\n        {steps.map((step, index) => (\n          <InternalStep\n            key={index}\n            status={step.status}\n            statusIconAriaLabel={step.statusIconAriaLabel}\n            header={step.header}\n            details={step.details}\n          />\n        ))}\n      </ol>\n    </div>\n  );\n};\n\nexport default InternalSteps;\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/steps/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAIxB,OAAO,eAAe,MAAM,8BAA8B,CAAC;AAG3D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,YAAY,GAAG,CAAC,EAAE,MAAM,EAAE,mBAAmB,EAAE,MAAM,EAAE,OAAO,EAAmB,EAAE,EAAE;IACzF,OAAO,CACL,4BAAI,SAAS,EAAE,MAAM,CAAC,SAAS;QAC7B,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM;YAC3B,oBAAC,eAAe,IAAC,IAAI,EAAE,MAAM,EAAE,aAAa,EAAE,mBAAmB,IAC9D,MAAM,CACS,CACd;QACN,4BAAI,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,IAAI,EAAC,MAAM,GAAG;QAC9C,OAAO,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,OAAO,CAAO,CACxD,CACN,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,aAAa,GAAG,CAAC,EAOF,EAAE,EAAE;QAPF,EACrB,KAAK,EACL,SAAS,EACT,cAAc,EACd,eAAe,EACf,iBAAiB,OAEE,EADhB,KAAK,cANa,gFAOtB,CADS;IAER,OAAO,CACL,6CAAS,KAAK,IAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC,EAAE,GAAG,EAAE,iBAAiB;QACnF,4BACE,SAAS,EAAE,MAAM,CAAC,IAAI,gBACV,SAAS,qBACJ,cAAc,sBACb,eAAe,IAEhC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC1B,oBAAC,YAAY,IACX,GAAG,EAAE,KAAK,EACV,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,mBAAmB,EAAE,IAAI,CAAC,mBAAmB,EAC7C,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,GACrB,CACH,CAAC,CACC,CACD,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,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 { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { SomeRequired } from '../internal/types';\nimport StatusIndicator from '../status-indicator/internal';\nimport { StepsProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ntype InternalStepsProps = SomeRequired<StepsProps, 'steps'> & InternalBaseComponentProps<HTMLDivElement>;\n\nconst InternalStep = ({ status, statusIconAriaLabel, header, details }: StepsProps.Step) => {\n  return (\n    <li className={styles.container}>\n      <div className={styles.header}>\n        <StatusIndicator type={status} iconAriaLabel={statusIconAriaLabel}>\n          {header}\n        </StatusIndicator>\n      </div>\n      <hr className={styles.connector} role=\"none\" />\n      {details && <div className={styles.details}>{details}</div>}\n    </li>\n  );\n};\n\nconst InternalSteps = ({\n  steps,\n  ariaLabel,\n  ariaLabelledby,\n  ariaDescribedby,\n  __internalRootRef,\n  ...props\n}: InternalStepsProps) => {\n  return (\n    <div {...props} className={clsx(styles.root, props.className)} ref={__internalRootRef}>\n      <ol\n        className={styles.list}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        aria-describedby={ariaDescribedby}\n      >\n        {steps.map((step, index) => (\n          <InternalStep\n            key={index}\n            status={step.status}\n            statusIconAriaLabel={step.statusIconAriaLabel}\n            header={step.header}\n            details={step.details}\n          />\n        ))}\n      </ol>\n    </div>\n  );\n};\n\nexport default InternalSteps;\n"]}

package/lib/internal/template/steps/styles.css.js

@@ -1,11 +1,11 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_gxp9y_1y1y4_177",
-  "list": "awsui_list_gxp9y_1y1y4_211",
-  "container": "awsui_container_gxp9y_1y1y4_216",
-  "header": "awsui_header_gxp9y_1y1y4_221",
-  "details": "awsui_details_gxp9y_1y1y4_225",
-  "connector": "awsui_connector_gxp9y_1y1y4_231"
+  "root": "awsui_root_gxp9y_48lkt_177",
+  "list": "awsui_list_gxp9y_48lkt_208",
+  "container": "awsui_container_gxp9y_48lkt_213",
+  "header": "awsui_header_gxp9y_48lkt_218",
+  "details": "awsui_details_gxp9y_48lkt_222",
+  "connector": "awsui_connector_gxp9y_48lkt_228"
 };
   

package/lib/internal/template/steps/styles.scoped.css

@@ -174,7 +174,7 @@
 */
 /* Style used for links in slots/components that are text heavy, to help links stand out among
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
-.awsui_root_gxp9y_1y1y4_177:not(#\9) {
+.awsui_root_gxp9y_48lkt_177:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -183,12 +183,9 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   direction: inherit;
   empty-cells: show;
   font-family: serif;
-  font-size: medium;
   font-style: normal;
   font-variant: normal;
-  font-weight: 400;
   font-stretch: normal;
-  line-height: normal;
   -webkit-hyphens: none;
           hyphens: none;
   letter-spacing: normal;
@@ -209,27 +206,27 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
 }
-.awsui_root_gxp9y_1y1y4_177 > .awsui_list_gxp9y_1y1y4_211:not(#\9) {
+.awsui_root_gxp9y_48lkt_177 > .awsui_list_gxp9y_48lkt_208:not(#\9) {
   list-style: none;
   padding-inline-start: 0;
   margin-block: 0;
 }
-.awsui_root_gxp9y_1y1y4_177 > .awsui_list_gxp9y_1y1y4_211 > .awsui_container_gxp9y_1y1y4_216:not(#\9) {
+.awsui_root_gxp9y_48lkt_177 > .awsui_list_gxp9y_48lkt_208 > .awsui_container_gxp9y_48lkt_213:not(#\9) {
   display: grid;
   grid-template-columns: var(--space-static-l-xtao5d, 20px) 1fr;
   grid-template-rows: minmax(var(--space-static-l-xtao5d, 20px), auto);
 }
-.awsui_root_gxp9y_1y1y4_177 > .awsui_list_gxp9y_1y1y4_211 > .awsui_container_gxp9y_1y1y4_216 > .awsui_header_gxp9y_1y1y4_221:not(#\9) {
+.awsui_root_gxp9y_48lkt_177 > .awsui_list_gxp9y_48lkt_208 > .awsui_container_gxp9y_48lkt_213 > .awsui_header_gxp9y_48lkt_218:not(#\9) {
   grid-row: 1;
   grid-column: 1/span 2;
 }
-.awsui_root_gxp9y_1y1y4_177 > .awsui_list_gxp9y_1y1y4_211 > .awsui_container_gxp9y_1y1y4_216 > .awsui_details_gxp9y_1y1y4_225:not(#\9) {
+.awsui_root_gxp9y_48lkt_177 > .awsui_list_gxp9y_48lkt_208 > .awsui_container_gxp9y_48lkt_213 > .awsui_details_gxp9y_48lkt_222:not(#\9) {
   align-items: center;
   grid-row: 2;
   grid-column: 2;
   margin-block-end: var(--space-static-xs-fwcjew, 8px);
 }
-.awsui_root_gxp9y_1y1y4_177 > .awsui_list_gxp9y_1y1y4_211 > .awsui_container_gxp9y_1y1y4_216 > .awsui_connector_gxp9y_1y1y4_231:not(#\9) {
+.awsui_root_gxp9y_48lkt_177 > .awsui_list_gxp9y_48lkt_208 > .awsui_container_gxp9y_48lkt_213 > .awsui_connector_gxp9y_48lkt_228:not(#\9) {
   grid-row: 2;
   grid-column: 1;
   background-color: var(--color-border-divider-default-u5ytia, #eaeded);
@@ -242,6 +239,6 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   position: relative;
   inset-inline-end: var(--space-static-xxxs-h1c9px, 2px);
 }
-.awsui_root_gxp9y_1y1y4_177 > .awsui_list_gxp9y_1y1y4_211 > :not(#\9):last-of-type > .awsui_connector_gxp9y_1y1y4_231 {
+.awsui_root_gxp9y_48lkt_177 > .awsui_list_gxp9y_48lkt_208 > :not(#\9):last-of-type > .awsui_connector_gxp9y_48lkt_228 {
   display: none;
 }