@cloudscape-design/components-themeable 3.0.1370 → 3.0.1372

package/lib/internal/template/status-indicator/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/status-indicator/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { isThemeActive, Theme } from '@cloudscape-design/component-toolkit/internal';\n\nimport { IconProps } from '../icon/interfaces';\nimport InternalIcon from '../icon/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { SomeRequired } from '../internal/types';\n/**\n * @awsuiSystem core\n */\nimport WithNativeAttributes from '../internal/utils/with-native-attributes';\nimport InternalSpinner from '../spinner/internal';\nimport { StatusIndicatorProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\nexport interface InternalStatusIndicatorProps\n  extends SomeRequired<StatusIndicatorProps, 'type'>,\n    InternalBaseComponentProps {\n  /**\n   * Play an animation on the error icon when first rendered\n   */\n  __animate?: boolean;\n\n  /**\n   * Size of icon.\n   */\n  __size?: IconProps.Size;\n\n  /**\n   * The CSS behavior of the status indicator container element.\n   */\n  __display?: 'inline' | 'inline-block';\n}\n\nconst typeToIcon: (size: IconProps.Size) => Record<StatusIndicatorProps.Type, JSX.Element> = size => {\n  // Spinner supports a narrower size set than icons (no 'small'/'medium'/'inherit'); map to a valid\n  // spinner size so the loading spinner matches the sibling status icons.\n  const spinnerSize = size === 'x-small' ? 'x-small' : 'normal';\n  return {\n    error: <InternalIcon name=\"status-negative\" size={size} />,\n    warning: <InternalIcon name=\"status-warning\" size={size} />,\n    success: <InternalIcon name=\"status-positive\" size={size} />,\n    info: <InternalIcon name=\"status-info\" size={size} />,\n    stopped: <InternalIcon name=\"status-stopped\" size={size} />,\n    pending: <InternalIcon name=\"status-pending\" size={size} />,\n    'in-progress': <InternalIcon name=\"status-in-progress\" size={size} />,\n    loading: <InternalSpinner size={spinnerSize} />,\n    'not-started': <InternalIcon name=\"status-not-started\" size={size} />,\n    log: <InternalIcon name=\"dot\" size={size} />,\n  };\n};\n\ninterface InternalStatusIconProps extends Pick<InternalStatusIndicatorProps, 'type' | 'iconAriaLabel'> {\n  animate?: InternalStatusIndicatorProps['__animate'];\n  size?: InternalStatusIndicatorProps['__size'];\n  display?: InternalStatusIndicatorProps['__display'];\n}\n\nexport function InternalStatusIcon({\n  type,\n  iconAriaLabel,\n  animate,\n  display,\n  size = 'normal',\n}: InternalStatusIconProps) {\n  return (\n    <span\n      className={clsx(styles.icon, animate && styles['icon-shake'])}\n      aria-label={iconAriaLabel}\n      role={iconAriaLabel ? 'img' : undefined}\n    >\n      {typeToIcon(size)[type]}\n      {display === 'inline' && <>&nbsp;</>}\n    </span>\n  );\n}\n\nexport default function StatusIndicator({\n  type,\n  children,\n  iconAriaLabel,\n  colorOverride,\n  wrapText = true,\n  nativeAttributes,\n  __animate = false,\n  __internalRootRef,\n  __size = isThemeActive(Theme.OneTheme) ? 'x-small' : 'normal',\n  __display = 'inline-block',\n  ...rest\n}: InternalStatusIndicatorProps) {\n  const baseProps = getBaseProps(rest);\n  return (\n    <WithNativeAttributes\n      {...baseProps}\n      tag=\"span\"\n      componentName=\"StatusIndicator\"\n      nativeAttributes={nativeAttributes}\n      className={clsx(\n        styles.root,\n        styles[`status-${type}`],\n        {\n          [styles[`color-override-${colorOverride}`]]: colorOverride,\n        },\n        baseProps.className\n      )}\n      ref={__internalRootRef}\n    >\n      <span\n        className={clsx(\n          styles.container,\n          styles[`display-${__display}`],\n          wrapText === false && styles['overflow-ellipsis'],\n          __animate && styles['container-fade-in']\n        )}\n      >\n        <InternalStatusIcon\n          type={type}\n          iconAriaLabel={iconAriaLabel}\n          animate={__animate}\n          display={__display}\n          size={__size}\n        />\n        <span>{children}</span>\n      </span>\n    </WithNativeAttributes>\n  );\n}\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/status-indicator/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { isThemeActive, Theme } from '@cloudscape-design/component-toolkit/internal';\n\nimport { IconProps } from '../icon/interfaces';\nimport InternalIcon from '../icon/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { SomeRequired } from '../internal/types';\n/**\n * @awsuiSystem core\n */\nimport WithNativeAttributes from '../internal/utils/with-native-attributes';\nimport InternalSpinner from '../spinner/internal';\nimport { StatusIndicatorProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\nexport interface InternalStatusIndicatorProps\n  extends SomeRequired<StatusIndicatorProps, 'type'>,\n    InternalBaseComponentProps {\n  /**\n   * Play an animation on the error icon when first rendered\n   */\n  __animate?: boolean;\n\n  /**\n   * Size of icon.\n   */\n  __size?: IconProps.Size;\n\n  /**\n   * The CSS behavior of the status indicator container element.\n   */\n  __display?: 'inline' | 'inline-block';\n\n  /**\n   * Renders the status indicator without its container background, for embedding inside other components.\n   */\n  __embedded?: boolean;\n}\n\nconst typeToIcon: (size: IconProps.Size) => Record<StatusIndicatorProps.Type, JSX.Element> = size => {\n  // Spinner supports a narrower size set than icons (no 'small'/'medium'/'inherit'); map to a valid\n  // spinner size so the loading spinner matches the sibling status icons.\n  const spinnerSize = size === 'x-small' ? 'x-small' : 'normal';\n  return {\n    error: <InternalIcon name=\"status-negative\" size={size} />,\n    warning: <InternalIcon name=\"status-warning\" size={size} />,\n    success: <InternalIcon name=\"status-positive\" size={size} />,\n    info: <InternalIcon name=\"status-info\" size={size} />,\n    stopped: <InternalIcon name=\"status-stopped\" size={size} />,\n    pending: <InternalIcon name=\"status-pending\" size={size} />,\n    'in-progress': <InternalIcon name=\"status-in-progress\" size={size} />,\n    loading: <InternalSpinner size={spinnerSize} />,\n    'not-started': <InternalIcon name=\"status-not-started\" size={size} />,\n    log: <InternalIcon name=\"dot\" size={size} />,\n  };\n};\n\ninterface InternalStatusIconProps extends Pick<InternalStatusIndicatorProps, 'type' | 'iconAriaLabel'> {\n  animate?: InternalStatusIndicatorProps['__animate'];\n  size?: InternalStatusIndicatorProps['__size'];\n  display?: InternalStatusIndicatorProps['__display'];\n}\n\nexport function InternalStatusIcon({\n  type,\n  iconAriaLabel,\n  animate,\n  display,\n  size = 'normal',\n}: InternalStatusIconProps) {\n  return (\n    <span\n      className={clsx(styles.icon, animate && styles['icon-shake'])}\n      aria-label={iconAriaLabel}\n      role={iconAriaLabel ? 'img' : undefined}\n    >\n      {typeToIcon(size)[type]}\n      {display === 'inline' && <>&nbsp;</>}\n    </span>\n  );\n}\n\nexport default function StatusIndicator({\n  type,\n  children,\n  iconAriaLabel,\n  colorOverride,\n  wrapText = true,\n  nativeAttributes,\n  __animate = false,\n  __internalRootRef,\n  __size = isThemeActive(Theme.OneTheme) ? 'x-small' : 'normal',\n  __display = 'inline-block',\n  __embedded = false,\n  ...rest\n}: InternalStatusIndicatorProps) {\n  const baseProps = getBaseProps(rest);\n  return (\n    <WithNativeAttributes\n      {...baseProps}\n      tag=\"span\"\n      componentName=\"StatusIndicator\"\n      nativeAttributes={nativeAttributes}\n      className={clsx(\n        styles.root,\n        styles[`status-${type}`],\n        __embedded && styles.embedded,\n        {\n          [styles[`color-override-${colorOverride}`]]: colorOverride,\n        },\n        baseProps.className\n      )}\n      ref={__internalRootRef}\n    >\n      <span\n        className={clsx(\n          styles.container,\n          styles[`display-${__display}`],\n          wrapText === false && styles['overflow-ellipsis'],\n          __animate && styles['container-fade-in']\n        )}\n      >\n        <InternalStatusIcon\n          type={type}\n          iconAriaLabel={iconAriaLabel}\n          animate={__animate}\n          display={__display}\n          size={__size}\n        />\n        <span>{children}</span>\n      </span>\n    </WithNativeAttributes>\n  );\n}\n"]}

package/lib/internal/template/status-indicator/styles.css.js

@@ -1,30 +1,31 @@
 
     import './styles.scoped.css';
     export default {
-  "icon-shake": "awsui_icon-shake_1cbgc_k7aux_13",
-  "awsui-motion-shake-horizontally": "awsui_awsui-motion-shake-horizontally_1cbgc_k7aux_1",
-  "container-fade-in": "awsui_container-fade-in_1cbgc_k7aux_41",
-  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_1cbgc_k7aux_1",
-  "root": "awsui_root_1cbgc_k7aux_63",
-  "status-error": "awsui_status-error_1cbgc_k7aux_72",
-  "status-warning": "awsui_status-warning_1cbgc_k7aux_75",
-  "status-success": "awsui_status-success_1cbgc_k7aux_78",
-  "status-info": "awsui_status-info_1cbgc_k7aux_81",
-  "status-stopped": "awsui_status-stopped_1cbgc_k7aux_84",
-  "status-pending": "awsui_status-pending_1cbgc_k7aux_87",
-  "status-in-progress": "awsui_status-in-progress_1cbgc_k7aux_90",
-  "status-loading": "awsui_status-loading_1cbgc_k7aux_93",
-  "status-not-started": "awsui_status-not-started_1cbgc_k7aux_96",
-  "status-log": "awsui_status-log_1cbgc_k7aux_99",
-  "color-override-red": "awsui_color-override-red_1cbgc_k7aux_102",
-  "color-override-grey": "awsui_color-override-grey_1cbgc_k7aux_105",
-  "color-override-blue": "awsui_color-override-blue_1cbgc_k7aux_108",
-  "color-override-green": "awsui_color-override-green_1cbgc_k7aux_111",
-  "color-override-yellow": "awsui_color-override-yellow_1cbgc_k7aux_114",
-  "container": "awsui_container_1cbgc_k7aux_41",
-  "display-inline": "awsui_display-inline_1cbgc_k7aux_170",
-  "icon": "awsui_icon_1cbgc_k7aux_13",
-  "display-inline-block": "awsui_display-inline-block_1cbgc_k7aux_178",
-  "overflow-ellipsis": "awsui_overflow-ellipsis_1cbgc_k7aux_187"
+  "icon-shake": "awsui_icon-shake_1cbgc_108bb_13",
+  "awsui-motion-shake-horizontally": "awsui_awsui-motion-shake-horizontally_1cbgc_108bb_1",
+  "container-fade-in": "awsui_container-fade-in_1cbgc_108bb_41",
+  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_1cbgc_108bb_1",
+  "root": "awsui_root_1cbgc_108bb_63",
+  "status-error": "awsui_status-error_1cbgc_108bb_72",
+  "status-warning": "awsui_status-warning_1cbgc_108bb_75",
+  "status-success": "awsui_status-success_1cbgc_108bb_78",
+  "status-info": "awsui_status-info_1cbgc_108bb_81",
+  "status-stopped": "awsui_status-stopped_1cbgc_108bb_84",
+  "status-pending": "awsui_status-pending_1cbgc_108bb_87",
+  "status-in-progress": "awsui_status-in-progress_1cbgc_108bb_90",
+  "status-loading": "awsui_status-loading_1cbgc_108bb_93",
+  "status-not-started": "awsui_status-not-started_1cbgc_108bb_96",
+  "status-log": "awsui_status-log_1cbgc_108bb_99",
+  "color-override-red": "awsui_color-override-red_1cbgc_108bb_102",
+  "color-override-grey": "awsui_color-override-grey_1cbgc_108bb_105",
+  "color-override-blue": "awsui_color-override-blue_1cbgc_108bb_108",
+  "color-override-green": "awsui_color-override-green_1cbgc_108bb_111",
+  "color-override-yellow": "awsui_color-override-yellow_1cbgc_108bb_114",
+  "embedded": "awsui_embedded_1cbgc_108bb_117",
+  "container": "awsui_container_1cbgc_108bb_41",
+  "display-inline": "awsui_display-inline_1cbgc_108bb_170",
+  "icon": "awsui_icon_1cbgc_108bb_13",
+  "display-inline-block": "awsui_display-inline-block_1cbgc_108bb_178",
+  "overflow-ellipsis": "awsui_overflow-ellipsis_1cbgc_108bb_187"
 };
   

package/lib/internal/template/status-indicator/styles.scoped.css

@@ -10,11 +10,11 @@ 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_icon-shake_1cbgc_k7aux_13:not(#\9) {
+.awsui_icon-shake_1cbgc_108bb_13:not(#\9) {
   display: inline-block;
-  animation: awsui_awsui-motion-shake-horizontally_1cbgc_k7aux_1 var(--motion-duration-refresh-only-medium-s8g1xv, 0ms);
+  animation: awsui_awsui-motion-shake-horizontally_1cbgc_108bb_1 var(--motion-duration-refresh-only-medium-s8g1xv, 0ms);
 }
-@keyframes awsui_awsui-motion-shake-horizontally_1cbgc_k7aux_1 {
+@keyframes awsui_awsui-motion-shake-horizontally_1cbgc_108bb_1 {
   0% {
     transform: translateX(-5px);
     animation-timing-function: linear;
@@ -28,20 +28,20 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_icon-shake_1cbgc_k7aux_13:not(#\9) {
+  .awsui_icon-shake_1cbgc_108bb_13:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_icon-shake_1cbgc_k7aux_13:not(#\9), .awsui-mode-entering .awsui_icon-shake_1cbgc_k7aux_13:not(#\9) {
+.awsui-motion-disabled .awsui_icon-shake_1cbgc_108bb_13:not(#\9), .awsui-mode-entering .awsui_icon-shake_1cbgc_108bb_13:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_container-fade-in_1cbgc_k7aux_41:not(#\9) {
-  animation: awsui_awsui-motion-fade-in-0_1cbgc_k7aux_1 var(--motion-duration-refresh-only-medium-s8g1xv, 0ms) var(--motion-easing-refresh-only-a-b2p95e, cubic-bezier(0, 0, 0, 1));
+.awsui_container-fade-in_1cbgc_108bb_41:not(#\9) {
+  animation: awsui_awsui-motion-fade-in-0_1cbgc_108bb_1 var(--motion-duration-refresh-only-medium-s8g1xv, 0ms) var(--motion-easing-refresh-only-a-b2p95e, cubic-bezier(0, 0, 0, 1));
 }
-@keyframes awsui_awsui-motion-fade-in-0_1cbgc_k7aux_1 {
+@keyframes awsui_awsui-motion-fade-in-0_1cbgc_108bb_1 {
   from {
     opacity: 0;
   }
@@ -50,17 +50,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_container-fade-in_1cbgc_k7aux_41:not(#\9) {
+  .awsui_container-fade-in_1cbgc_108bb_41:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_container-fade-in_1cbgc_k7aux_41:not(#\9), .awsui-mode-entering .awsui_container-fade-in_1cbgc_k7aux_41:not(#\9) {
+.awsui-motion-disabled .awsui_container-fade-in_1cbgc_108bb_41:not(#\9), .awsui-mode-entering .awsui_container-fade-in_1cbgc_108bb_41:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_root_1cbgc_k7aux_63:not(#\9) {
+.awsui_root_1cbgc_108bb_63:not(#\9) {
   font-size: var(--font-size-body-m-tq5a14, 14px);
   line-height: var(--line-height-body-m-5xw6xo, 22px);
   color: var(--color-text-body-default-b2us04, #16191f);
@@ -69,122 +69,122 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
 }
-.awsui_root_1cbgc_k7aux_63.awsui_status-error_1cbgc_k7aux_72:not(#\9) {
+.awsui_root_1cbgc_108bb_63.awsui_status-error_1cbgc_108bb_72:not(#\9) {
   color: var(--color-text-status-error-ri38gt, #d13212);
 }
-.awsui_root_1cbgc_k7aux_63.awsui_status-warning_1cbgc_k7aux_75:not(#\9) {
+.awsui_root_1cbgc_108bb_63.awsui_status-warning_1cbgc_108bb_75:not(#\9) {
   color: var(--color-text-status-warning-fabq6h, #906806);
 }
-.awsui_root_1cbgc_k7aux_63.awsui_status-success_1cbgc_k7aux_78:not(#\9) {
+.awsui_root_1cbgc_108bb_63.awsui_status-success_1cbgc_108bb_78:not(#\9) {
   color: var(--color-text-status-success-1i2jf8, #1d8102);
 }
-.awsui_root_1cbgc_k7aux_63.awsui_status-info_1cbgc_k7aux_81:not(#\9) {
+.awsui_root_1cbgc_108bb_63.awsui_status-info_1cbgc_108bb_81:not(#\9) {
   color: var(--color-text-status-info-su6k9n, #0073bb);
 }
-.awsui_root_1cbgc_k7aux_63.awsui_status-stopped_1cbgc_k7aux_84:not(#\9) {
+.awsui_root_1cbgc_108bb_63.awsui_status-stopped_1cbgc_108bb_84:not(#\9) {
   color: var(--color-text-status-inactive-fqjc97, #687078);
 }
-.awsui_root_1cbgc_k7aux_63.awsui_status-pending_1cbgc_k7aux_87:not(#\9) {
+.awsui_root_1cbgc_108bb_63.awsui_status-pending_1cbgc_108bb_87:not(#\9) {
   color: var(--color-text-status-inactive-fqjc97, #687078);
 }
-.awsui_root_1cbgc_k7aux_63.awsui_status-in-progress_1cbgc_k7aux_90:not(#\9) {
+.awsui_root_1cbgc_108bb_63.awsui_status-in-progress_1cbgc_108bb_90:not(#\9) {
   color: var(--color-text-status-inactive-fqjc97, #687078);
 }
-.awsui_root_1cbgc_k7aux_63.awsui_status-loading_1cbgc_k7aux_93:not(#\9) {
+.awsui_root_1cbgc_108bb_63.awsui_status-loading_1cbgc_108bb_93:not(#\9) {
   color: var(--color-text-status-inactive-fqjc97, #687078);
 }
-.awsui_root_1cbgc_k7aux_63.awsui_status-not-started_1cbgc_k7aux_96:not(#\9) {
+.awsui_root_1cbgc_108bb_63.awsui_status-not-started_1cbgc_108bb_96:not(#\9) {
   color: var(--color-text-status-inactive-fqjc97, #687078);
 }
-.awsui_root_1cbgc_k7aux_63.awsui_status-log_1cbgc_k7aux_99:not(#\9) {
+.awsui_root_1cbgc_108bb_63.awsui_status-log_1cbgc_108bb_99:not(#\9) {
   color: var(--color-text-status-inactive-fqjc97, #687078);
 }
-.awsui_root_1cbgc_k7aux_63.awsui_color-override-red_1cbgc_k7aux_102:not(#\9) {
+.awsui_root_1cbgc_108bb_63.awsui_color-override-red_1cbgc_108bb_102:not(#\9) {
   color: var(--color-text-status-error-ri38gt, #d13212);
 }
-.awsui_root_1cbgc_k7aux_63.awsui_color-override-grey_1cbgc_k7aux_105:not(#\9) {
+.awsui_root_1cbgc_108bb_63.awsui_color-override-grey_1cbgc_108bb_105:not(#\9) {
   color: var(--color-text-status-inactive-fqjc97, #687078);
 }
-.awsui_root_1cbgc_k7aux_63.awsui_color-override-blue_1cbgc_k7aux_108:not(#\9) {
+.awsui_root_1cbgc_108bb_63.awsui_color-override-blue_1cbgc_108bb_108:not(#\9) {
   color: var(--color-text-status-info-su6k9n, #0073bb);
 }
-.awsui_root_1cbgc_k7aux_63.awsui_color-override-green_1cbgc_k7aux_111:not(#\9) {
+.awsui_root_1cbgc_108bb_63.awsui_color-override-green_1cbgc_108bb_111:not(#\9) {
   color: var(--color-text-status-success-1i2jf8, #1d8102);
 }
-.awsui_root_1cbgc_k7aux_63.awsui_color-override-yellow_1cbgc_k7aux_114:not(#\9) {
+.awsui_root_1cbgc_108bb_63.awsui_color-override-yellow_1cbgc_108bb_114:not(#\9) {
   color: var(--color-text-status-warning-fabq6h, #906806);
 }
-.awsui_root_1cbgc_k7aux_63.awsui_status-error_1cbgc_k7aux_72 > .awsui_container_1cbgc_k7aux_41:not(#\9) {
+.awsui_root_1cbgc_108bb_63.awsui_status-error_1cbgc_108bb_72:not(#\9):not(.awsui_embedded_1cbgc_108bb_117) > .awsui_container_1cbgc_108bb_41 {
   background: var(--color-background-status-indicator-error-mdm30w, transparent);
 }
-.awsui_root_1cbgc_k7aux_63.awsui_status-warning_1cbgc_k7aux_75 > .awsui_container_1cbgc_k7aux_41:not(#\9) {
+.awsui_root_1cbgc_108bb_63.awsui_status-warning_1cbgc_108bb_75:not(#\9):not(.awsui_embedded_1cbgc_108bb_117) > .awsui_container_1cbgc_108bb_41 {
   background: var(--color-background-status-indicator-warning-4hkqn2, transparent);
 }
-.awsui_root_1cbgc_k7aux_63.awsui_status-success_1cbgc_k7aux_78 > .awsui_container_1cbgc_k7aux_41:not(#\9) {
+.awsui_root_1cbgc_108bb_63.awsui_status-success_1cbgc_108bb_78:not(#\9):not(.awsui_embedded_1cbgc_108bb_117) > .awsui_container_1cbgc_108bb_41 {
   background: var(--color-background-status-indicator-success-5z9dt9, transparent);
 }
-.awsui_root_1cbgc_k7aux_63.awsui_status-info_1cbgc_k7aux_81 > .awsui_container_1cbgc_k7aux_41:not(#\9) {
+.awsui_root_1cbgc_108bb_63.awsui_status-info_1cbgc_108bb_81:not(#\9):not(.awsui_embedded_1cbgc_108bb_117) > .awsui_container_1cbgc_108bb_41 {
   background: var(--color-background-status-indicator-info-vrpf2i, transparent);
 }
-.awsui_root_1cbgc_k7aux_63.awsui_status-stopped_1cbgc_k7aux_84 > .awsui_container_1cbgc_k7aux_41:not(#\9) {
+.awsui_root_1cbgc_108bb_63.awsui_status-stopped_1cbgc_108bb_84:not(#\9):not(.awsui_embedded_1cbgc_108bb_117) > .awsui_container_1cbgc_108bb_41 {
   background: var(--color-background-status-indicator-neutral-izf254, transparent);
 }
-.awsui_root_1cbgc_k7aux_63.awsui_status-pending_1cbgc_k7aux_87 > .awsui_container_1cbgc_k7aux_41:not(#\9) {
+.awsui_root_1cbgc_108bb_63.awsui_status-pending_1cbgc_108bb_87:not(#\9):not(.awsui_embedded_1cbgc_108bb_117) > .awsui_container_1cbgc_108bb_41 {
   background: var(--color-background-status-indicator-neutral-izf254, transparent);
 }
-.awsui_root_1cbgc_k7aux_63.awsui_status-in-progress_1cbgc_k7aux_90 > .awsui_container_1cbgc_k7aux_41:not(#\9) {
+.awsui_root_1cbgc_108bb_63.awsui_status-in-progress_1cbgc_108bb_90:not(#\9):not(.awsui_embedded_1cbgc_108bb_117) > .awsui_container_1cbgc_108bb_41 {
   background: var(--color-background-status-indicator-neutral-izf254, transparent);
 }
-.awsui_root_1cbgc_k7aux_63.awsui_status-loading_1cbgc_k7aux_93 > .awsui_container_1cbgc_k7aux_41:not(#\9) {
+.awsui_root_1cbgc_108bb_63.awsui_status-loading_1cbgc_108bb_93:not(#\9):not(.awsui_embedded_1cbgc_108bb_117) > .awsui_container_1cbgc_108bb_41 {
   background: var(--color-background-status-indicator-neutral-izf254, transparent);
 }
-.awsui_root_1cbgc_k7aux_63.awsui_status-not-started_1cbgc_k7aux_96 > .awsui_container_1cbgc_k7aux_41:not(#\9) {
+.awsui_root_1cbgc_108bb_63.awsui_status-not-started_1cbgc_108bb_96:not(#\9):not(.awsui_embedded_1cbgc_108bb_117) > .awsui_container_1cbgc_108bb_41 {
   background: var(--color-background-status-indicator-neutral-izf254, transparent);
 }
-.awsui_root_1cbgc_k7aux_63.awsui_status-log_1cbgc_k7aux_99 > .awsui_container_1cbgc_k7aux_41:not(#\9) {
+.awsui_root_1cbgc_108bb_63.awsui_status-log_1cbgc_108bb_99:not(#\9):not(.awsui_embedded_1cbgc_108bb_117) > .awsui_container_1cbgc_108bb_41 {
   background: var(--color-background-status-indicator-neutral-izf254, transparent);
 }
-.awsui_root_1cbgc_k7aux_63.awsui_color-override-red_1cbgc_k7aux_102 > .awsui_container_1cbgc_k7aux_41:not(#\9) {
+.awsui_root_1cbgc_108bb_63.awsui_color-override-red_1cbgc_108bb_102:not(#\9):not(.awsui_embedded_1cbgc_108bb_117) > .awsui_container_1cbgc_108bb_41 {
   background: var(--color-background-status-indicator-error-mdm30w, transparent);
 }
-.awsui_root_1cbgc_k7aux_63.awsui_color-override-grey_1cbgc_k7aux_105 > .awsui_container_1cbgc_k7aux_41:not(#\9) {
+.awsui_root_1cbgc_108bb_63.awsui_color-override-grey_1cbgc_108bb_105:not(#\9):not(.awsui_embedded_1cbgc_108bb_117) > .awsui_container_1cbgc_108bb_41 {
   background: var(--color-background-status-indicator-neutral-izf254, transparent);
 }
-.awsui_root_1cbgc_k7aux_63.awsui_color-override-blue_1cbgc_k7aux_108 > .awsui_container_1cbgc_k7aux_41:not(#\9) {
+.awsui_root_1cbgc_108bb_63.awsui_color-override-blue_1cbgc_108bb_108:not(#\9):not(.awsui_embedded_1cbgc_108bb_117) > .awsui_container_1cbgc_108bb_41 {
   background: var(--color-background-status-indicator-info-vrpf2i, transparent);
 }
-.awsui_root_1cbgc_k7aux_63.awsui_color-override-green_1cbgc_k7aux_111 > .awsui_container_1cbgc_k7aux_41:not(#\9) {
+.awsui_root_1cbgc_108bb_63.awsui_color-override-green_1cbgc_108bb_111:not(#\9):not(.awsui_embedded_1cbgc_108bb_117) > .awsui_container_1cbgc_108bb_41 {
   background: var(--color-background-status-indicator-success-5z9dt9, transparent);
 }
-.awsui_root_1cbgc_k7aux_63.awsui_color-override-yellow_1cbgc_k7aux_114 > .awsui_container_1cbgc_k7aux_41:not(#\9) {
+.awsui_root_1cbgc_108bb_63.awsui_color-override-yellow_1cbgc_108bb_114:not(#\9):not(.awsui_embedded_1cbgc_108bb_117) > .awsui_container_1cbgc_108bb_41 {
   background: var(--color-background-status-indicator-warning-4hkqn2, transparent);
 }
 
-.awsui_container_1cbgc_k7aux_41:not(#\9) {
+.awsui_container_1cbgc_108bb_41:not(#\9) {
   padding-inline: var(--space-status-indicator-padding-horizontal-pqbmh8, 0px);
   border-start-start-radius: var(--border-radius-status-indicator-1d9bsf, 16px);
   border-start-end-radius: var(--border-radius-status-indicator-1d9bsf, 16px);
   border-end-start-radius: var(--border-radius-status-indicator-1d9bsf, 16px);
   border-end-end-radius: var(--border-radius-status-indicator-1d9bsf, 16px);
 }
-.awsui_container_1cbgc_k7aux_41.awsui_display-inline_1cbgc_k7aux_170:not(#\9) {
+.awsui_container_1cbgc_108bb_41.awsui_display-inline_1cbgc_108bb_170:not(#\9) {
   min-inline-size: 0;
   word-break: break-word;
   display: inline;
 }
-.awsui_container_1cbgc_k7aux_41.awsui_display-inline_1cbgc_k7aux_170 > .awsui_icon_1cbgc_k7aux_13:not(#\9) {
+.awsui_container_1cbgc_108bb_41.awsui_display-inline_1cbgc_108bb_170 > .awsui_icon_1cbgc_108bb_13:not(#\9) {
   white-space: nowrap;
 }
-.awsui_container_1cbgc_k7aux_41.awsui_display-inline-block_1cbgc_k7aux_178:not(#\9) {
+.awsui_container_1cbgc_108bb_41.awsui_display-inline-block_1cbgc_108bb_178:not(#\9) {
   display: inline-block;
   word-wrap: break-word;
   word-break: break-all;
 }
-.awsui_container_1cbgc_k7aux_41.awsui_display-inline-block_1cbgc_k7aux_178 > .awsui_icon_1cbgc_k7aux_13:not(#\9) {
+.awsui_container_1cbgc_108bb_41.awsui_display-inline-block_1cbgc_108bb_178 > .awsui_icon_1cbgc_108bb_13:not(#\9) {
   padding-inline-end: var(--space-xxs-3o1yoq, 4px);
 }
 
-.awsui_overflow-ellipsis_1cbgc_k7aux_187:not(#\9) {
+.awsui_overflow-ellipsis_1cbgc_108bb_187:not(#\9) {
   max-inline-size: 100%;
   overflow: hidden;
   text-overflow: ellipsis;

package/lib/internal/template/status-indicator/styles.selectors.js

@@ -2,30 +2,31 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "icon-shake": "awsui_icon-shake_1cbgc_k7aux_13",
-  "awsui-motion-shake-horizontally": "awsui_awsui-motion-shake-horizontally_1cbgc_k7aux_1",
-  "container-fade-in": "awsui_container-fade-in_1cbgc_k7aux_41",
-  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_1cbgc_k7aux_1",
-  "root": "awsui_root_1cbgc_k7aux_63",
-  "status-error": "awsui_status-error_1cbgc_k7aux_72",
-  "status-warning": "awsui_status-warning_1cbgc_k7aux_75",
-  "status-success": "awsui_status-success_1cbgc_k7aux_78",
-  "status-info": "awsui_status-info_1cbgc_k7aux_81",
-  "status-stopped": "awsui_status-stopped_1cbgc_k7aux_84",
-  "status-pending": "awsui_status-pending_1cbgc_k7aux_87",
-  "status-in-progress": "awsui_status-in-progress_1cbgc_k7aux_90",
-  "status-loading": "awsui_status-loading_1cbgc_k7aux_93",
-  "status-not-started": "awsui_status-not-started_1cbgc_k7aux_96",
-  "status-log": "awsui_status-log_1cbgc_k7aux_99",
-  "color-override-red": "awsui_color-override-red_1cbgc_k7aux_102",
-  "color-override-grey": "awsui_color-override-grey_1cbgc_k7aux_105",
-  "color-override-blue": "awsui_color-override-blue_1cbgc_k7aux_108",
-  "color-override-green": "awsui_color-override-green_1cbgc_k7aux_111",
-  "color-override-yellow": "awsui_color-override-yellow_1cbgc_k7aux_114",
-  "container": "awsui_container_1cbgc_k7aux_41",
-  "display-inline": "awsui_display-inline_1cbgc_k7aux_170",
-  "icon": "awsui_icon_1cbgc_k7aux_13",
-  "display-inline-block": "awsui_display-inline-block_1cbgc_k7aux_178",
-  "overflow-ellipsis": "awsui_overflow-ellipsis_1cbgc_k7aux_187"
+  "icon-shake": "awsui_icon-shake_1cbgc_108bb_13",
+  "awsui-motion-shake-horizontally": "awsui_awsui-motion-shake-horizontally_1cbgc_108bb_1",
+  "container-fade-in": "awsui_container-fade-in_1cbgc_108bb_41",
+  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_1cbgc_108bb_1",
+  "root": "awsui_root_1cbgc_108bb_63",
+  "status-error": "awsui_status-error_1cbgc_108bb_72",
+  "status-warning": "awsui_status-warning_1cbgc_108bb_75",
+  "status-success": "awsui_status-success_1cbgc_108bb_78",
+  "status-info": "awsui_status-info_1cbgc_108bb_81",
+  "status-stopped": "awsui_status-stopped_1cbgc_108bb_84",
+  "status-pending": "awsui_status-pending_1cbgc_108bb_87",
+  "status-in-progress": "awsui_status-in-progress_1cbgc_108bb_90",
+  "status-loading": "awsui_status-loading_1cbgc_108bb_93",
+  "status-not-started": "awsui_status-not-started_1cbgc_108bb_96",
+  "status-log": "awsui_status-log_1cbgc_108bb_99",
+  "color-override-red": "awsui_color-override-red_1cbgc_108bb_102",
+  "color-override-grey": "awsui_color-override-grey_1cbgc_108bb_105",
+  "color-override-blue": "awsui_color-override-blue_1cbgc_108bb_108",
+  "color-override-green": "awsui_color-override-green_1cbgc_108bb_111",
+  "color-override-yellow": "awsui_color-override-yellow_1cbgc_108bb_114",
+  "embedded": "awsui_embedded_1cbgc_108bb_117",
+  "container": "awsui_container_1cbgc_108bb_41",
+  "display-inline": "awsui_display-inline_1cbgc_108bb_170",
+  "icon": "awsui_icon_1cbgc_108bb_13",
+  "display-inline-block": "awsui_display-inline-block_1cbgc_108bb_178",
+  "overflow-ellipsis": "awsui_overflow-ellipsis_1cbgc_108bb_187"
 };
   

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

@@ -64,7 +64,7 @@ const InternalStep = ({ status, statusIconAriaLabel, header, details, annotation
         React.createElement(StepAnnotation, null, annotation),
         React.createElement("div", { className: styles['step-layout'] }, orientation === 'vertical' ? (React.createElement(React.Fragment, null,
             React.createElement("div", { className: styles.header },
-                React.createElement(InternalStatusIndicator, { type: status, iconAriaLabel: statusIconAriaLabel }, header)),
+                React.createElement(InternalStatusIndicator, { __embedded: true, type: status, iconAriaLabel: statusIconAriaLabel }, header)),
             React.createElement(StepDetails, null, details),
             React.createElement("hr", { className: clsx(connectorClassName, styles['connector-continuation']), role: "none" }))) : (React.createElement(React.Fragment, null,
             React.createElement(InternalBox, { color: statusToColor[status] },

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

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/steps/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { BoxProps } from '../box/interfaces';\nimport InternalBox from '../box/internal';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { SomeRequired } from '../internal/types';\nimport InternalStatusIndicator, { InternalStatusIcon } from '../status-indicator/internal';\nimport { StepsProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ntype InternalStepsProps = SomeRequired<StepsProps, 'steps' | 'orientation' | 'connectorLines'> &\n  InternalBaseComponentProps;\n\nconst statusToColor: Record<StepsProps.Status, BoxProps.Color> = {\n  error: 'text-status-error',\n  warning: 'text-status-warning',\n  success: 'text-status-success',\n  info: 'text-status-info',\n  stopped: 'text-status-inactive',\n  pending: 'text-status-inactive',\n  'in-progress': 'text-status-inactive',\n  loading: 'text-status-inactive',\n  'not-started': 'text-status-inactive',\n  log: 'text-status-inactive',\n};\n\nconst StepAnnotation = ({ children }: { children: StepsProps.Step['annotation'] }) => {\n  if (children === undefined || children === null) {\n    return null;\n  }\n  return <div className={styles.annotation}>{children}</div>;\n};\n\nconst StepDetails = ({ children }: { children: StepsProps.Step['details'] }) => {\n  if (children === undefined || children === null) {\n    return null;\n  }\n  return <div className={styles.details}>{children}</div>;\n};\n\nconst CustomStep = ({\n  step,\n  orientation,\n  renderStep,\n  hideConnectors,\n}: {\n  step: StepsProps.Step;\n  orientation: StepsProps.Orientation;\n  renderStep: Required<StepsProps>['renderStep'];\n  hideConnectors: boolean;\n}) => {\n  const { status, statusIconAriaLabel, annotation } = step;\n  const { header, details, icon } = renderStep(step);\n  const iconNode = icon ? icon : <InternalStatusIcon type={status} iconAriaLabel={statusIconAriaLabel} />;\n  const connectorClassName = clsx(styles.connector, hideConnectors && styles['connector-hidden']);\n\n  if (orientation === 'horizontal') {\n    return (\n      <li className={styles.container}>\n        <StepAnnotation>{annotation}</StepAnnotation>\n        <div className={styles['step-layout']}>\n          {iconNode}\n          <hr className={connectorClassName} role=\"none\" />\n        </div>\n        <div className={styles.content}>\n          <div className={styles.header}>{header}</div>\n          <StepDetails>{details}</StepDetails>\n        </div>\n      </li>\n    );\n  }\n\n  // Vertical orientation: render the icon and the connector together in a column-1 \"rail\" so the\n  // connector starts directly beneath the icon and stretches the full height of the step. Unlike\n  // placing the header in the same row as the icon, this keeps the vertical line continuous even\n  // when the custom header wraps onto multiple lines. `annotation` (for example, a timeline timestamp)\n  // is rendered before the rail.\n  return (\n    <li className={clsx(styles.container, styles['custom-vertical'])}>\n      <StepAnnotation>{annotation}</StepAnnotation>\n      <div className={styles.rail}>\n        {iconNode}\n        <hr className={connectorClassName} role=\"none\" />\n      </div>\n      <div className={styles.content}>\n        <div className={styles.header}>{header}</div>\n        <StepDetails>{details}</StepDetails>\n      </div>\n    </li>\n  );\n};\n\nconst InternalStep = ({\n  status,\n  statusIconAriaLabel,\n  header,\n  details,\n  annotation,\n  orientation,\n  hideConnectors,\n}: StepsProps.Step & { orientation: StepsProps.Orientation; hideConnectors: boolean }) => {\n  const connectorClassName = clsx(styles.connector, hideConnectors && styles['connector-hidden']);\n  return (\n    <li className={styles.container}>\n      <StepAnnotation>{annotation}</StepAnnotation>\n      <div className={styles['step-layout']}>\n        {orientation === 'vertical' ? (\n          <>\n            <div className={styles.header}>\n              <InternalStatusIndicator type={status} iconAriaLabel={statusIconAriaLabel}>\n                {header}\n              </InternalStatusIndicator>\n            </div>\n            <StepDetails>{details}</StepDetails>\n            <hr className={clsx(connectorClassName, styles['connector-continuation'])} role=\"none\" />\n          </>\n        ) : (\n          <>\n            <InternalBox color={statusToColor[status]}>\n              <InternalStatusIcon type={status} iconAriaLabel={statusIconAriaLabel} />\n            </InternalBox>\n            <hr className={connectorClassName} role=\"none\" />\n          </>\n        )}\n      </div>\n      {orientation === 'horizontal' && (\n        <div className={styles.content}>\n          <div className={styles.header}>\n            <InternalBox color={statusToColor[status]}>{header}</InternalBox>\n          </div>\n          <StepDetails>{details}</StepDetails>\n        </div>\n      )}\n    </li>\n  );\n};\n\nconst InternalSteps = ({\n  steps,\n  orientation,\n  connectorLines,\n  renderStep,\n  ariaLabel,\n  ariaLabelledby,\n  ariaDescribedby,\n  __internalRootRef,\n  ...props\n}: InternalStepsProps) => {\n  const hideConnectors = connectorLines === 'none';\n  const hasAnnotations = steps.some(step => step.annotation !== undefined && step.annotation !== null);\n  return (\n    <div\n      {...props}\n      className={clsx(styles.root, props.className, orientation === 'horizontal' ? styles.horizontal : styles.vertical)}\n      ref={__internalRootRef}\n    >\n      <ol\n        className={clsx(styles.list, orientation === 'vertical' && hasAnnotations && styles['with-annotation'])}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        aria-describedby={ariaDescribedby}\n      >\n        {steps.map((step, index) =>\n          renderStep ? (\n            <CustomStep\n              key={index}\n              orientation={orientation}\n              step={step}\n              renderStep={renderStep}\n              hideConnectors={hideConnectors}\n            />\n          ) : (\n            <InternalStep\n              key={index}\n              status={step.status}\n              statusIconAriaLabel={step.statusIconAriaLabel}\n              header={step.header}\n              details={step.details}\n              annotation={step.annotation}\n              orientation={orientation}\n              hideConnectors={hideConnectors}\n            />\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":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { BoxProps } from '../box/interfaces';\nimport InternalBox from '../box/internal';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { SomeRequired } from '../internal/types';\nimport InternalStatusIndicator, { InternalStatusIcon } from '../status-indicator/internal';\nimport { StepsProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ntype InternalStepsProps = SomeRequired<StepsProps, 'steps' | 'orientation' | 'connectorLines'> &\n  InternalBaseComponentProps;\n\nconst statusToColor: Record<StepsProps.Status, BoxProps.Color> = {\n  error: 'text-status-error',\n  warning: 'text-status-warning',\n  success: 'text-status-success',\n  info: 'text-status-info',\n  stopped: 'text-status-inactive',\n  pending: 'text-status-inactive',\n  'in-progress': 'text-status-inactive',\n  loading: 'text-status-inactive',\n  'not-started': 'text-status-inactive',\n  log: 'text-status-inactive',\n};\n\nconst StepAnnotation = ({ children }: { children: StepsProps.Step['annotation'] }) => {\n  if (children === undefined || children === null) {\n    return null;\n  }\n  return <div className={styles.annotation}>{children}</div>;\n};\n\nconst StepDetails = ({ children }: { children: StepsProps.Step['details'] }) => {\n  if (children === undefined || children === null) {\n    return null;\n  }\n  return <div className={styles.details}>{children}</div>;\n};\n\nconst CustomStep = ({\n  step,\n  orientation,\n  renderStep,\n  hideConnectors,\n}: {\n  step: StepsProps.Step;\n  orientation: StepsProps.Orientation;\n  renderStep: Required<StepsProps>['renderStep'];\n  hideConnectors: boolean;\n}) => {\n  const { status, statusIconAriaLabel, annotation } = step;\n  const { header, details, icon } = renderStep(step);\n  const iconNode = icon ? icon : <InternalStatusIcon type={status} iconAriaLabel={statusIconAriaLabel} />;\n  const connectorClassName = clsx(styles.connector, hideConnectors && styles['connector-hidden']);\n\n  if (orientation === 'horizontal') {\n    return (\n      <li className={styles.container}>\n        <StepAnnotation>{annotation}</StepAnnotation>\n        <div className={styles['step-layout']}>\n          {iconNode}\n          <hr className={connectorClassName} role=\"none\" />\n        </div>\n        <div className={styles.content}>\n          <div className={styles.header}>{header}</div>\n          <StepDetails>{details}</StepDetails>\n        </div>\n      </li>\n    );\n  }\n\n  // Vertical orientation: render the icon and the connector together in a column-1 \"rail\" so the\n  // connector starts directly beneath the icon and stretches the full height of the step. Unlike\n  // placing the header in the same row as the icon, this keeps the vertical line continuous even\n  // when the custom header wraps onto multiple lines. `annotation` (for example, a timeline timestamp)\n  // is rendered before the rail.\n  return (\n    <li className={clsx(styles.container, styles['custom-vertical'])}>\n      <StepAnnotation>{annotation}</StepAnnotation>\n      <div className={styles.rail}>\n        {iconNode}\n        <hr className={connectorClassName} role=\"none\" />\n      </div>\n      <div className={styles.content}>\n        <div className={styles.header}>{header}</div>\n        <StepDetails>{details}</StepDetails>\n      </div>\n    </li>\n  );\n};\n\nconst InternalStep = ({\n  status,\n  statusIconAriaLabel,\n  header,\n  details,\n  annotation,\n  orientation,\n  hideConnectors,\n}: StepsProps.Step & { orientation: StepsProps.Orientation; hideConnectors: boolean }) => {\n  const connectorClassName = clsx(styles.connector, hideConnectors && styles['connector-hidden']);\n  return (\n    <li className={styles.container}>\n      <StepAnnotation>{annotation}</StepAnnotation>\n      <div className={styles['step-layout']}>\n        {orientation === 'vertical' ? (\n          <>\n            <div className={styles.header}>\n              <InternalStatusIndicator __embedded={true} type={status} iconAriaLabel={statusIconAriaLabel}>\n                {header}\n              </InternalStatusIndicator>\n            </div>\n            <StepDetails>{details}</StepDetails>\n            <hr className={clsx(connectorClassName, styles['connector-continuation'])} role=\"none\" />\n          </>\n        ) : (\n          <>\n            <InternalBox color={statusToColor[status]}>\n              <InternalStatusIcon type={status} iconAriaLabel={statusIconAriaLabel} />\n            </InternalBox>\n            <hr className={connectorClassName} role=\"none\" />\n          </>\n        )}\n      </div>\n      {orientation === 'horizontal' && (\n        <div className={styles.content}>\n          <div className={styles.header}>\n            <InternalBox color={statusToColor[status]}>{header}</InternalBox>\n          </div>\n          <StepDetails>{details}</StepDetails>\n        </div>\n      )}\n    </li>\n  );\n};\n\nconst InternalSteps = ({\n  steps,\n  orientation,\n  connectorLines,\n  renderStep,\n  ariaLabel,\n  ariaLabelledby,\n  ariaDescribedby,\n  __internalRootRef,\n  ...props\n}: InternalStepsProps) => {\n  const hideConnectors = connectorLines === 'none';\n  const hasAnnotations = steps.some(step => step.annotation !== undefined && step.annotation !== null);\n  return (\n    <div\n      {...props}\n      className={clsx(styles.root, props.className, orientation === 'horizontal' ? styles.horizontal : styles.vertical)}\n      ref={__internalRootRef}\n    >\n      <ol\n        className={clsx(styles.list, orientation === 'vertical' && hasAnnotations && styles['with-annotation'])}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        aria-describedby={ariaDescribedby}\n      >\n        {steps.map((step, index) =>\n          renderStep ? (\n            <CustomStep\n              key={index}\n              orientation={orientation}\n              step={step}\n              renderStep={renderStep}\n              hideConnectors={hideConnectors}\n            />\n          ) : (\n            <InternalStep\n              key={index}\n              status={step.status}\n              statusIconAriaLabel={step.statusIconAriaLabel}\n              header={step.header}\n              details={step.details}\n              annotation={step.annotation}\n              orientation={orientation}\n              hideConnectors={hideConnectors}\n            />\n          )\n        )}\n      </ol>\n    </div>\n  );\n};\n\nexport default InternalSteps;\n"]}

package/lib/internal/template/theming/index.d.ts

@@ -3,16 +3,18 @@ export type Theme = TypedOverride;
 export interface ApplyThemeParams {
     theme: Theme;
     baseThemeId?: string;
+    selector?: string;
 }
 export interface ApplyThemeResult {
     reset: () => void;
 }
-export declare function applyTheme({ theme, baseThemeId }: ApplyThemeParams): ApplyThemeResult;
+export declare function applyTheme({ theme, baseThemeId, selector }: ApplyThemeParams): ApplyThemeResult;
 export interface GenerateThemeStylesheetParams {
     theme: Theme;
     baseThemeId?: string;
+    selector?: string;
 }
-export declare function generateThemeStylesheet({ theme, baseThemeId }: GenerateThemeStylesheetParams): string;
+export declare function generateThemeStylesheet({ theme, baseThemeId, selector }: GenerateThemeStylesheetParams): string;
 export declare function setGlobalTheme(theme: Theme): void;
 export declare function applyGlobalTheme(): ApplyThemeResult;
 //# sourceMappingURL=index.d.ts.map

package/lib/internal/template/theming/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/theming/index.ts"],"names":[],"mappings":"AAQA,OAAO,EAAU,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAEtE,MAAM,MAAM,KAAK,GAAG,aAAa,CAAC;AAClC,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,gBAAgB,GAAG,gBAAgB,CAMrF;AAED,MAAM,WAAW,6BAA6B;IAC5C,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,uBAAuB,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,6BAA6B,GAAG,MAAM,CAMrG;AAoBD,wBAAgB,cAAc,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAOjD;AAOD,wBAAgB,gBAAgB,IAAI,gBAAgB,CAmCnD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/theming/index.ts"],"names":[],"mappings":"AAQA,OAAO,EAAU,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAItE,MAAM,MAAM,KAAK,GAAG,aAAa,CAAC;AAClC,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,EAAE,gBAAgB,GAAG,gBAAgB,CAO/F;AAED,MAAM,WAAW,6BAA6B;IAC5C,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,uBAAuB,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,EAAE,6BAA6B,GAAG,MAAM,CAO/G;AAoBD,wBAAgB,cAAc,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAOjD;AAOD,wBAAgB,gBAAgB,IAAI,gBAAgB,CAmCnD"}

package/lib/internal/template/theming/index.js

@@ -3,18 +3,21 @@
 'use client';
 import { applyTheme as coreApplyTheme, generateThemeStylesheet as coreGenerateThemeStylesheet, } from '@cloudscape-design/theming-runtime';
 import { preset } from '../internal/generated/theming';
-export function applyTheme({ theme, baseThemeId }) {
+const VISUAL_REFRESH_THEME_ID = 'visual-refresh';
+export function applyTheme({ theme, baseThemeId, selector }) {
     return coreApplyTheme({
         override: theme,
         preset,
-        baseThemeId,
+        selector,
+        baseThemeId: baseThemeId !== null && baseThemeId !== void 0 ? baseThemeId : (selector ? VISUAL_REFRESH_THEME_ID : undefined),
     });
 }
-export function generateThemeStylesheet({ theme, baseThemeId }) {
+export function generateThemeStylesheet({ theme, baseThemeId, selector }) {
     return coreGenerateThemeStylesheet({
         override: theme,
         preset,
-        baseThemeId,
+        baseThemeId: baseThemeId !== null && baseThemeId !== void 0 ? baseThemeId : (selector ? VISUAL_REFRESH_THEME_ID : undefined),
+        selector,
     });
 }
 const themeStorageKey = Symbol.for('awsui-global-theme');

package/lib/internal/template/theming/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/theming/index.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,YAAY,CAAC;AACb,OAAO,EACL,UAAU,IAAI,cAAc,EAC5B,uBAAuB,IAAI,2BAA2B,GACvD,MAAM,oCAAoC,CAAC;AAE5C,OAAO,EAAE,MAAM,EAAiB,MAAM,+BAA+B,CAAC;AAYtE,MAAM,UAAU,UAAU,CAAC,EAAE,KAAK,EAAE,WAAW,EAAoB;IACjE,OAAO,cAAc,CAAC;QACpB,QAAQ,EAAE,KAAK;QACf,MAAM;QACN,WAAW;KACZ,CAAC,CAAC;AACL,CAAC;AAOD,MAAM,UAAU,uBAAuB,CAAC,EAAE,KAAK,EAAE,WAAW,EAAiC;IAC3F,OAAO,2BAA2B,CAAC;QACjC,QAAQ,EAAE,KAAK;QACf,MAAM;QACN,WAAW;KACZ,CAAC,CAAC;AACL,CAAC;AAED,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;AACzD,MAAM,gBAAgB,GAAG,2BAA2B,CAAC;AAMrD,SAAS,YAAY;IACnB,IAAI,CAAC;QACH,IAAI,MAAM,CAAC,GAAG,IAAI,MAAM,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;YACtC,OAAO,MAAM,CAAC,GAAsB,CAAC;QACvC,CAAC;IACH,CAAC;IAAC,MAAM,CAAC;QACP,2DAA2D;IAC7D,CAAC;IACD,OAAO,MAAyB,CAAC;AACnC,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,KAAY;IACzC,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;QAClC,OAAO;IACT,CAAC;IACD,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IACjC,SAAS,CAAC,eAAe,CAAC,GAAG,KAAK,CAAC;IACnC,SAAS,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC;AACvD,CAAC;AAED,SAAS,cAAc;IACrB,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IACjC,OAAO,SAAS,CAAC,eAAe,CAAC,CAAC;AACpC,CAAC;AAED,MAAM,UAAU,gBAAgB;IAC9B,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;QAClC,OAAO,EAAE,KAAK,EAAE,GAAG,EAAE,GAAE,CAAC,EAAE,CAAC;IAC7B,CAAC;IAED,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IACjC,IAAI,YAAsC,CAAC;IAE3C,SAAS,KAAK;QACZ,YAAY,aAAZ,YAAY,uBAAZ,YAAY,EAAI,CAAC;QACjB,YAAY,GAAG,SAAS,CAAC;QACzB,MAAM,KAAK,GAAG,cAAc,EAAE,CAAC;QAE/B,IAAI,KAAK,EAAE,CAAC;YACV,MAAM,MAAM,GAAG,UAAU,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;YACrC,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC;QAC9B,CAAC;IACH,CAAC;IAED,8CAA8C;IAC9C,KAAK,EAAE,CAAC;IAER,0CAA0C;IAC1C,MAAM,QAAQ,GAAG,GAAG,EAAE;QACpB,KAAK,EAAE,CAAC;IACV,CAAC,CAAC;IACF,SAAS,CAAC,gBAAgB,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAC;IAEvD,OAAO;QACL,KAAK,EAAE,GAAG,EAAE;YACV,YAAY,aAAZ,YAAY,uBAAZ,YAAY,EAAI,CAAC;YACjB,YAAY,GAAG,SAAS,CAAC;YACzB,SAAS,CAAC,mBAAmB,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAC;QAC5D,CAAC;KACF,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n'use client';\nimport {\n  applyTheme as coreApplyTheme,\n  generateThemeStylesheet as coreGenerateThemeStylesheet,\n} from '@cloudscape-design/theming-runtime';\n\nimport { preset, TypedOverride } from '../internal/generated/theming';\n\nexport type Theme = TypedOverride;\nexport interface ApplyThemeParams {\n  theme: Theme;\n  baseThemeId?: string;\n}\n\nexport interface ApplyThemeResult {\n  reset: () => void;\n}\n\nexport function applyTheme({ theme, baseThemeId }: ApplyThemeParams): ApplyThemeResult {\n  return coreApplyTheme({\n    override: theme,\n    preset,\n    baseThemeId,\n  });\n}\n\nexport interface GenerateThemeStylesheetParams {\n  theme: Theme;\n  baseThemeId?: string;\n}\n\nexport function generateThemeStylesheet({ theme, baseThemeId }: GenerateThemeStylesheetParams): string {\n  return coreGenerateThemeStylesheet({\n    override: theme,\n    preset,\n    baseThemeId,\n  });\n}\n\nconst themeStorageKey = Symbol.for('awsui-global-theme');\nconst themeChangeEvent = 'awsui-global-theme-change';\n\ninterface WindowWithTheme extends Window {\n  [themeStorageKey]?: Theme;\n}\n\nfunction getTopWindow(): WindowWithTheme {\n  try {\n    if (window.top && window.top.document) {\n      return window.top as WindowWithTheme;\n    }\n  } catch {\n    // Cross-origin access error — fall back to current window.\n  }\n  return window as WindowWithTheme;\n}\n\nexport function setGlobalTheme(theme: Theme): void {\n  if (typeof window === 'undefined') {\n    return;\n  }\n  const topWindow = getTopWindow();\n  topWindow[themeStorageKey] = theme;\n  topWindow.dispatchEvent(new Event(themeChangeEvent));\n}\n\nfunction getGlobalTheme(): Theme | undefined {\n  const topWindow = getTopWindow();\n  return topWindow[themeStorageKey];\n}\n\nexport function applyGlobalTheme(): ApplyThemeResult {\n  if (typeof window === 'undefined') {\n    return { reset: () => {} };\n  }\n\n  const topWindow = getTopWindow();\n  let currentReset: (() => void) | undefined;\n\n  function apply() {\n    currentReset?.();\n    currentReset = undefined;\n    const theme = getGlobalTheme();\n\n    if (theme) {\n      const result = applyTheme({ theme });\n      currentReset = result.reset;\n    }\n  }\n\n  // Apply the current global theme immediately.\n  apply();\n\n  // Listen for future global theme changes.\n  const listener = () => {\n    apply();\n  };\n  topWindow.addEventListener(themeChangeEvent, listener);\n\n  return {\n    reset: () => {\n      currentReset?.();\n      currentReset = undefined;\n      topWindow.removeEventListener(themeChangeEvent, listener);\n    },\n  };\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/theming/index.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n'use client';\nimport {\n  applyTheme as coreApplyTheme,\n  generateThemeStylesheet as coreGenerateThemeStylesheet,\n} from '@cloudscape-design/theming-runtime';\n\nimport { preset, TypedOverride } from '../internal/generated/theming';\n\nconst VISUAL_REFRESH_THEME_ID = 'visual-refresh';\n\nexport type Theme = TypedOverride;\nexport interface ApplyThemeParams {\n  theme: Theme;\n  baseThemeId?: string;\n  selector?: string;\n}\n\nexport interface ApplyThemeResult {\n  reset: () => void;\n}\n\nexport function applyTheme({ theme, baseThemeId, selector }: ApplyThemeParams): ApplyThemeResult {\n  return coreApplyTheme({\n    override: theme,\n    preset,\n    selector,\n    baseThemeId: baseThemeId ?? (selector ? VISUAL_REFRESH_THEME_ID : undefined),\n  });\n}\n\nexport interface GenerateThemeStylesheetParams {\n  theme: Theme;\n  baseThemeId?: string;\n  selector?: string;\n}\n\nexport function generateThemeStylesheet({ theme, baseThemeId, selector }: GenerateThemeStylesheetParams): string {\n  return coreGenerateThemeStylesheet({\n    override: theme,\n    preset,\n    baseThemeId: baseThemeId ?? (selector ? VISUAL_REFRESH_THEME_ID : undefined),\n    selector,\n  });\n}\n\nconst themeStorageKey = Symbol.for('awsui-global-theme');\nconst themeChangeEvent = 'awsui-global-theme-change';\n\ninterface WindowWithTheme extends Window {\n  [themeStorageKey]?: Theme;\n}\n\nfunction getTopWindow(): WindowWithTheme {\n  try {\n    if (window.top && window.top.document) {\n      return window.top as WindowWithTheme;\n    }\n  } catch {\n    // Cross-origin access error — fall back to current window.\n  }\n  return window as WindowWithTheme;\n}\n\nexport function setGlobalTheme(theme: Theme): void {\n  if (typeof window === 'undefined') {\n    return;\n  }\n  const topWindow = getTopWindow();\n  topWindow[themeStorageKey] = theme;\n  topWindow.dispatchEvent(new Event(themeChangeEvent));\n}\n\nfunction getGlobalTheme(): Theme | undefined {\n  const topWindow = getTopWindow();\n  return topWindow[themeStorageKey];\n}\n\nexport function applyGlobalTheme(): ApplyThemeResult {\n  if (typeof window === 'undefined') {\n    return { reset: () => {} };\n  }\n\n  const topWindow = getTopWindow();\n  let currentReset: (() => void) | undefined;\n\n  function apply() {\n    currentReset?.();\n    currentReset = undefined;\n    const theme = getGlobalTheme();\n\n    if (theme) {\n      const result = applyTheme({ theme });\n      currentReset = result.reset;\n    }\n  }\n\n  // Apply the current global theme immediately.\n  apply();\n\n  // Listen for future global theme changes.\n  const listener = () => {\n    apply();\n  };\n  topWindow.addEventListener(themeChangeEvent, listener);\n\n  return {\n    reset: () => {\n      currentReset?.();\n      currentReset = undefined;\n      topWindow.removeEventListener(themeChangeEvent, listener);\n    },\n  };\n}\n"]}

package/lib/theming.d.ts

@@ -6,4 +6,9 @@ export interface BuildThemedComponentsParams {
     baseThemeId?: string;
 }
 export declare function buildThemedComponents({ theme, outputDir, baseThemeId, ...rest }: BuildThemedComponentsParams): Promise<void>;
+export interface GenerateThemeStylesheetParams {
+    theme: Theme;
+    selector: string;
+}
+export declare function generateThemeStylesheet({ theme, selector }: GenerateThemeStylesheetParams): string;
 //# sourceMappingURL=theming.d.ts.map

package/lib/theming.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theming.d.ts","sourceRoot":"","sources":["../../src-themeable/theming.ts"],"names":[],"mappings":"AAMA,OAAO,EAAU,aAAa,EAAE,MAAM,0DAA0D,CAAC;AAOjG,MAAM,MAAM,KAAK,GAAG,aAAa,CAAC;AAClC,MAAM,WAAW,2BAA2B;IAC1C,KAAK,EAAE,KAAK,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,SAAS,EACT,WAAW,EACX,GAAG,IAAI,EACR,EAAE,2BAA2B,GAAG,OAAO,CAAC,IAAI,CAAC,CAoB7C"}
+{"version":3,"file":"theming.d.ts","sourceRoot":"","sources":["../../src-themeable/theming.ts"],"names":[],"mappings":"AASA,OAAO,EAAU,aAAa,EAAE,MAAM,0DAA0D,CAAC;AASjG,MAAM,MAAM,KAAK,GAAG,aAAa,CAAC;AAClC,MAAM,WAAW,2BAA2B;IAC1C,KAAK,EAAE,KAAK,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,SAAS,EACT,WAAW,EACX,GAAG,IAAI,EACR,EAAE,2BAA2B,GAAG,OAAO,CAAC,IAAI,CAAC,CAoB7C;AAED,MAAM,WAAW,6BAA6B;IAC5C,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,wBAAgB,uBAAuB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,6BAA6B,GAAG,MAAM,CASlG"}

package/lib/theming.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.buildThemedComponents = buildThemedComponents;
+exports.generateThemeStylesheet = generateThemeStylesheet;
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 const path_1 = require("path");
@@ -10,6 +11,7 @@ const internalDir = (0, path_1.join)(__dirname, './internal');
 const scssDir = (0, path_1.join)(internalDir, './scss');
 const templateDir = (0, path_1.join)(internalDir, './template');
 const designTokensTemplateDir = (0, path_1.join)(internalDir, './template-tokens');
+const VISUAL_REFRESH_THEME_ID = 'visual-refresh';
 function buildThemedComponents({ theme, outputDir, baseThemeId, ...rest }) {
     // Website-only escape hatch to avoid token hash collisions in generated output.
     const version = rest.__tokenHashSeed;
@@ -31,4 +33,14 @@ function buildThemedComponents({ theme, outputDir, baseThemeId, ...rest }) {
         scssDir,
     });
 }
+function generateThemeStylesheet({ theme, selector }) {
+    return (0, theming_build_1.generateThemeStylesheet)({
+        override: theme,
+        selector,
+        preset: index_cjs_1.preset,
+        // Current theming builder relies on tokens being relative to a base theme for
+        // all non-themeable tokens, which is currently visual refresh.
+        baseThemeId: VISUAL_REFRESH_THEME_ID,
+    });
+}
 //# sourceMappingURL=theming.js.map

package/lib/theming.js.map

@@ -1 +1 @@
-{"version":3,"file":"theming.js","sourceRoot":"","sources":["../../src-themeable/theming.ts"],"names":[],"mappings":";;AAoBA,sDAyBC;AA7CD,qEAAqE;AACrE,sCAAsC;AACtC,+BAA4B;AAE5B,oEAA6F;AAE7F,wFAAiG;AAEjG,MAAM,WAAW,GAAG,IAAA,WAAI,EAAC,SAAS,EAAE,YAAY,CAAC,CAAC;AAClD,MAAM,OAAO,GAAG,IAAA,WAAI,EAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;AAC5C,MAAM,WAAW,GAAG,IAAA,WAAI,EAAC,WAAW,EAAE,YAAY,CAAC,CAAC;AACpD,MAAM,uBAAuB,GAAG,IAAA,WAAI,EAAC,WAAW,EAAE,mBAAmB,CAAC,CAAC;AASvE,SAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,SAAS,EACT,WAAW,EACX,GAAG,IAAI,EACqB;IAC5B,gFAAgF;IAChF,MAAM,OAAO,GAAI,IAAY,CAAC,eAAe,CAAC;IAC9C,OAAO,IAAA,qCAAgB,EAAC;QACtB,QAAQ,EAAE,KAAK;QACf,MAAM,EAAE;YACN,GAAG,kBAAM;YACT,GAAG,CAAC,OAAO;gBACT,CAAC,CAAC;oBACE,aAAa,EAAE,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,OAAO,CAAC,kBAAM,CAAC,aAAa,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC;iBAC3G;gBACH,CAAC,CAAC,EAAE,CAAC;SACR;QACD,WAAW;QACX,mBAAmB,EAAE,IAAA,WAAI,EAAC,SAAS,EAAE,YAAY,CAAC;QAClD,qBAAqB,EAAE,IAAA,WAAI,EAAC,SAAS,EAAE,eAAe,CAAC;QACvD,WAAW;QACX,uBAAuB;QACvB,OAAO;KACR,CAAC,CAAC;AACL,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { join } from 'path';\n\nimport { buildThemedComponents as themingCoreBuild } from '@cloudscape-design/theming-build';\n\nimport { preset, TypedOverride } from './internal/template/internal/generated/theming/index.cjs';\n\nconst internalDir = join(__dirname, './internal');\nconst scssDir = join(internalDir, './scss');\nconst templateDir = join(internalDir, './template');\nconst designTokensTemplateDir = join(internalDir, './template-tokens');\n\nexport type Theme = TypedOverride;\nexport interface BuildThemedComponentsParams {\n  theme: Theme;\n  outputDir: string;\n  baseThemeId?: string;\n}\n\nexport function buildThemedComponents({\n  theme,\n  outputDir,\n  baseThemeId,\n  ...rest\n}: BuildThemedComponentsParams): Promise<void> {\n  // Website-only escape hatch to avoid token hash collisions in generated output.\n  const version = (rest as any).__tokenHashSeed;\n  return themingCoreBuild({\n    override: theme,\n    preset: {\n      ...preset,\n      ...(version\n        ? {\n            tokenVersions: Object.fromEntries(Object.entries(preset.propertiesMap).map(([token]) => [token, version])),\n          }\n        : {}),\n    },\n    baseThemeId,\n    componentsOutputDir: join(outputDir, 'components'),\n    designTokensOutputDir: join(outputDir, 'design-tokens'),\n    templateDir,\n    designTokensTemplateDir,\n    scssDir,\n  });\n}\n"]}
+{"version":3,"file":"theming.js","sourceRoot":"","sources":["../../src-themeable/theming.ts"],"names":[],"mappings":";;AAyBA,sDAyBC;AAOD,0DASC;AAlED,qEAAqE;AACrE,sCAAsC;AACtC,+BAA4B;AAE5B,oEAG0C;AAE1C,wFAAiG;AAEjG,MAAM,WAAW,GAAG,IAAA,WAAI,EAAC,SAAS,EAAE,YAAY,CAAC,CAAC;AAClD,MAAM,OAAO,GAAG,IAAA,WAAI,EAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;AAC5C,MAAM,WAAW,GAAG,IAAA,WAAI,EAAC,WAAW,EAAE,YAAY,CAAC,CAAC;AACpD,MAAM,uBAAuB,GAAG,IAAA,WAAI,EAAC,WAAW,EAAE,mBAAmB,CAAC,CAAC;AAEvE,MAAM,uBAAuB,GAAG,gBAAgB,CAAC;AASjD,SAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,SAAS,EACT,WAAW,EACX,GAAG,IAAI,EACqB;IAC5B,gFAAgF;IAChF,MAAM,OAAO,GAAI,IAAY,CAAC,eAAe,CAAC;IAC9C,OAAO,IAAA,qCAAgB,EAAC;QACtB,QAAQ,EAAE,KAAK;QACf,MAAM,EAAE;YACN,GAAG,kBAAM;YACT,GAAG,CAAC,OAAO;gBACT,CAAC,CAAC;oBACE,aAAa,EAAE,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,OAAO,CAAC,kBAAM,CAAC,aAAa,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC;iBAC3G;gBACH,CAAC,CAAC,EAAE,CAAC;SACR;QACD,WAAW;QACX,mBAAmB,EAAE,IAAA,WAAI,EAAC,SAAS,EAAE,YAAY,CAAC;QAClD,qBAAqB,EAAE,IAAA,WAAI,EAAC,SAAS,EAAE,eAAe,CAAC;QACvD,WAAW;QACX,uBAAuB;QACvB,OAAO;KACR,CAAC,CAAC;AACL,CAAC;AAOD,SAAgB,uBAAuB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAiC;IACxF,OAAO,IAAA,uCAAkC,EAAC;QACxC,QAAQ,EAAE,KAAK;QACf,QAAQ;QACR,MAAM,EAAN,kBAAM;QACN,8EAA8E;QAC9E,+DAA+D;QAC/D,WAAW,EAAE,uBAAuB;KACrC,CAAC,CAAC;AACL,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { join } from 'path';\n\nimport {\n  buildThemedComponents as themingCoreBuild,\n  generateThemeStylesheet as themingCoreGenerateThemeStylesheet,\n} from '@cloudscape-design/theming-build';\n\nimport { preset, TypedOverride } from './internal/template/internal/generated/theming/index.cjs';\n\nconst internalDir = join(__dirname, './internal');\nconst scssDir = join(internalDir, './scss');\nconst templateDir = join(internalDir, './template');\nconst designTokensTemplateDir = join(internalDir, './template-tokens');\n\nconst VISUAL_REFRESH_THEME_ID = 'visual-refresh';\n\nexport type Theme = TypedOverride;\nexport interface BuildThemedComponentsParams {\n  theme: Theme;\n  outputDir: string;\n  baseThemeId?: string;\n}\n\nexport function buildThemedComponents({\n  theme,\n  outputDir,\n  baseThemeId,\n  ...rest\n}: BuildThemedComponentsParams): Promise<void> {\n  // Website-only escape hatch to avoid token hash collisions in generated output.\n  const version = (rest as any).__tokenHashSeed;\n  return themingCoreBuild({\n    override: theme,\n    preset: {\n      ...preset,\n      ...(version\n        ? {\n            tokenVersions: Object.fromEntries(Object.entries(preset.propertiesMap).map(([token]) => [token, version])),\n          }\n        : {}),\n    },\n    baseThemeId,\n    componentsOutputDir: join(outputDir, 'components'),\n    designTokensOutputDir: join(outputDir, 'design-tokens'),\n    templateDir,\n    designTokensTemplateDir,\n    scssDir,\n  });\n}\n\nexport interface GenerateThemeStylesheetParams {\n  theme: Theme;\n  selector: string;\n}\n\nexport function generateThemeStylesheet({ theme, selector }: GenerateThemeStylesheetParams): string {\n  return themingCoreGenerateThemeStylesheet({\n    override: theme,\n    selector,\n    preset,\n    // Current theming builder relies on tokens being relative to a base theme for\n    // all non-themeable tokens, which is currently visual refresh.\n    baseThemeId: VISUAL_REFRESH_THEME_ID,\n  });\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudscape-design/components-themeable",
-  "version": "3.0.1370",
+  "version": "3.0.1372",
   "files": [
     "lib"
   ],