@cloudscape-design/components-themeable 3.0.1129 → 3.0.1130

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

@@ -150,52 +150,52 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-@keyframes awsui_spinner-rotator_1612d_sv6go_1 {
+@keyframes awsui_spinner-rotator_1612d_sq8vz_1 {
   0% {
-    transform: rotate(var(--awsui-spinner-rotator-from-b75yp7));
+    transform: rotate(var(--awsui-spinner-rotator-from-lqnbqg));
   }
   100% {
-    transform: rotate(var(--awsui-spinner-rotator-to-b75yp7));
+    transform: rotate(var(--awsui-spinner-rotator-to-lqnbqg));
   }
 }
-@keyframes awsui_spinner-line-left_1612d_sv6go_1 {
+@keyframes awsui_spinner-line-left_1612d_sq8vz_1 {
   0% {
-    transform: rotate(var(--awsui-spinner-line-left-from-b75yp7));
+    transform: rotate(var(--awsui-spinner-line-left-from-lqnbqg));
   }
   50% {
-    transform: rotate(var(--awsui-spinner-line-left-to-b75yp7));
+    transform: rotate(var(--awsui-spinner-line-left-to-lqnbqg));
   }
   100% {
-    transform: rotate(var(--awsui-spinner-line-left-from-b75yp7));
+    transform: rotate(var(--awsui-spinner-line-left-from-lqnbqg));
   }
 }
-@keyframes awsui_spinner-line-right_1612d_sv6go_1 {
+@keyframes awsui_spinner-line-right_1612d_sq8vz_1 {
   0% {
-    transform: rotate(var(--awsui-spinner-line-right-from-b75yp7));
+    transform: rotate(var(--awsui-spinner-line-right-from-lqnbqg));
   }
   50% {
-    transform: rotate(var(--awsui-spinner-line-right-to-b75yp7));
+    transform: rotate(var(--awsui-spinner-line-right-to-lqnbqg));
   }
   100% {
-    transform: rotate(var(--awsui-spinner-line-right-from-b75yp7));
+    transform: rotate(var(--awsui-spinner-line-right-from-lqnbqg));
   }
 }
-.awsui_root_1612d_sv6go_183:not(#\9) {
-  --awsui-spinner-rotator-from-b75yp7: 0deg;
-  --awsui-spinner-rotator-to-b75yp7: 360deg;
-  --awsui-spinner-line-left-from-b75yp7: 0deg;
-  --awsui-spinner-line-left-to-b75yp7: 120deg;
-  --awsui-spinner-line-right-from-b75yp7: 90deg;
-  --awsui-spinner-line-right-to-b75yp7: -30deg;
+.awsui_root_1612d_sq8vz_183:not(#\9) {
+  --awsui-spinner-rotator-from-lqnbqg: 0deg;
+  --awsui-spinner-rotator-to-lqnbqg: 360deg;
+  --awsui-spinner-line-left-from-lqnbqg: 0deg;
+  --awsui-spinner-line-left-to-lqnbqg: 120deg;
+  --awsui-spinner-line-right-from-lqnbqg: 90deg;
+  --awsui-spinner-line-right-to-lqnbqg: -30deg;
   display: inline-block;
   vertical-align: top;
   /*stylelint-disable-next-line @cloudscape-design/no-motion-outside-of-mixin */
-  animation: awsui_spinner-rotator_1612d_sv6go_1 0.7s linear infinite;
+  animation: awsui_spinner-rotator_1612d_sq8vz_1 0.7s linear infinite;
   box-sizing: border-box;
   line-height: 0;
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
 }
-.awsui_root_1612d_sv6go_183.awsui_size-normal_1612d_sv6go_198:not(#\9) {
+.awsui_root_1612d_sq8vz_183.awsui_size-normal_1612d_sq8vz_198:not(#\9) {
   inline-size: var(--size-icon-normal-2f5zkr, 16px);
   block-size: var(--size-icon-normal-2f5zkr, 16px);
   padding-block: calc((var(--size-icon-normal-2f5zkr, 16px) - 12px) / 2);
@@ -203,7 +203,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-block: calc((var(--line-height-body-m-bedeoh, 22px) - var(--size-icon-normal-2f5zkr, 16px)) / 2);
   box-sizing: border-box;
 }
-.awsui_root_1612d_sv6go_183.awsui_size-big_1612d_sv6go_206:not(#\9) {
+.awsui_root_1612d_sq8vz_183.awsui_size-big_1612d_sq8vz_206:not(#\9) {
   inline-size: var(--size-icon-big-hnqj8f, 32px);
   block-size: var(--size-icon-big-hnqj8f, 32px);
   padding-block: calc((var(--size-icon-big-hnqj8f, 32px) - 24px) / 2);
@@ -211,7 +211,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-block: calc((var(--line-height-heading-xl-vs1f23, 36px) - var(--size-icon-big-hnqj8f, 32px)) / 2);
   box-sizing: border-box;
 }
-.awsui_root_1612d_sv6go_183.awsui_size-large_1612d_sv6go_214:not(#\9) {
+.awsui_root_1612d_sq8vz_183.awsui_size-large_1612d_sq8vz_214:not(#\9) {
   inline-size: var(--size-icon-large-gj7xfw, 48px);
   block-size: var(--size-icon-large-gj7xfw, 48px);
   padding-block: calc((var(--size-icon-large-gj7xfw, 48px) - 36px) / 2);
@@ -219,32 +219,32 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-block: calc((var(--line-height-display-l-3zghmm, 56px) - var(--size-icon-large-gj7xfw, 48px)) / 2);
   box-sizing: border-box;
 }
-.awsui_root_1612d_sv6go_183.awsui_variant-normal_1612d_sv6go_222:not(#\9) {
+.awsui_root_1612d_sq8vz_183.awsui_variant-normal_1612d_sq8vz_222:not(#\9) {
   color: currentColor;
 }
-.awsui_root_1612d_sv6go_183.awsui_variant-disabled_1612d_sv6go_225:not(#\9) {
+.awsui_root_1612d_sq8vz_183.awsui_variant-disabled_1612d_sq8vz_225:not(#\9) {
   color: var(--color-text-interactive-disabled-xwt2jl, #aab7b8);
 }
-.awsui_root_1612d_sv6go_183.awsui_variant-inverted_1612d_sv6go_228:not(#\9) {
+.awsui_root_1612d_sq8vz_183.awsui_variant-inverted_1612d_sq8vz_228:not(#\9) {
   color: var(--color-text-inverted-2l365o, #ffffff);
 }
-.awsui_root_1612d_sv6go_183:not(#\9):dir(rtl) {
-  --awsui-spinner-rotator-from-b75yp7: 360deg;
-  --awsui-spinner-rotator-to-b75yp7: 0deg;
-  --awsui-spinner-line-left-from-b75yp7: 0deg;
-  --awsui-spinner-line-left-to-b75yp7: -120deg;
-  --awsui-spinner-line-right-from-b75yp7: -90deg;
-  --awsui-spinner-line-right-to-b75yp7: 30deg;
+.awsui_root_1612d_sq8vz_183:not(#\9):dir(rtl) {
+  --awsui-spinner-rotator-from-lqnbqg: 360deg;
+  --awsui-spinner-rotator-to-lqnbqg: 0deg;
+  --awsui-spinner-line-left-from-lqnbqg: 0deg;
+  --awsui-spinner-line-left-to-lqnbqg: -120deg;
+  --awsui-spinner-line-right-from-lqnbqg: -90deg;
+  --awsui-spinner-line-right-to-lqnbqg: 30deg;
 }
 
-.awsui_circle_1612d_sv6go_240:not(#\9) {
+.awsui_circle_1612d_sq8vz_240:not(#\9) {
   display: inline-block;
   inline-size: 50%;
   block-size: 100%;
   overflow: hidden;
   position: relative;
 }
-.awsui_circle_1612d_sv6go_240:not(#\9):after {
+.awsui_circle_1612d_sq8vz_240:not(#\9):after {
   position: absolute;
   box-sizing: border-box;
   content: "";
@@ -257,7 +257,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-inline-end-color: transparent;
   border-block-end-color: transparent;
 }
-.awsui_circle_1612d_sv6go_240:not(#\9):after {
+.awsui_circle_1612d_sq8vz_240:not(#\9):after {
   /*stylelint-disable-next-line @cloudscape-design/no-motion-outside-of-mixin */
   animation: 1.5s ease-in-out infinite;
   inset-block-start: 0;
@@ -265,13 +265,13 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   block-size: 100%;
   inline-size: 200%;
 }
-.awsui_circle_1612d_sv6go_240.awsui_circle-left_1612d_sv6go_268:not(#\9):after {
+.awsui_circle_1612d_sq8vz_240.awsui_circle-left_1612d_sq8vz_268:not(#\9):after {
   inset-inline-start: 0;
   /*stylelint-disable-next-line @cloudscape-design/no-motion-outside-of-mixin */
-  animation-name: awsui_spinner-line-left_1612d_sv6go_1;
+  animation-name: awsui_spinner-line-left_1612d_sq8vz_1;
 }
-.awsui_circle_1612d_sv6go_240.awsui_circle-right_1612d_sv6go_273:not(#\9):after {
+.awsui_circle_1612d_sq8vz_240.awsui_circle-right_1612d_sq8vz_273:not(#\9):after {
   inset-inline-start: -100%;
   /*stylelint-disable-next-line @cloudscape-design/no-motion-outside-of-mixin */
-  animation-name: awsui_spinner-line-right_1612d_sv6go_1;
+  animation-name: awsui_spinner-line-right_1612d_sq8vz_1;
 }

package/lib/internal/template/spinner/styles.selectors.js

@@ -2,18 +2,18 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_1612d_sv6go_183",
-  "spinner-rotator": "awsui_spinner-rotator_1612d_sv6go_1",
-  "size-normal": "awsui_size-normal_1612d_sv6go_198",
-  "size-big": "awsui_size-big_1612d_sv6go_206",
-  "size-large": "awsui_size-large_1612d_sv6go_214",
-  "variant-normal": "awsui_variant-normal_1612d_sv6go_222",
-  "variant-disabled": "awsui_variant-disabled_1612d_sv6go_225",
-  "variant-inverted": "awsui_variant-inverted_1612d_sv6go_228",
-  "circle": "awsui_circle_1612d_sv6go_240",
-  "circle-left": "awsui_circle-left_1612d_sv6go_268",
-  "spinner-line-left": "awsui_spinner-line-left_1612d_sv6go_1",
-  "circle-right": "awsui_circle-right_1612d_sv6go_273",
-  "spinner-line-right": "awsui_spinner-line-right_1612d_sv6go_1"
+  "root": "awsui_root_1612d_sq8vz_183",
+  "spinner-rotator": "awsui_spinner-rotator_1612d_sq8vz_1",
+  "size-normal": "awsui_size-normal_1612d_sq8vz_198",
+  "size-big": "awsui_size-big_1612d_sq8vz_206",
+  "size-large": "awsui_size-large_1612d_sq8vz_214",
+  "variant-normal": "awsui_variant-normal_1612d_sq8vz_222",
+  "variant-disabled": "awsui_variant-disabled_1612d_sq8vz_225",
+  "variant-inverted": "awsui_variant-inverted_1612d_sq8vz_228",
+  "circle": "awsui_circle_1612d_sq8vz_240",
+  "circle-left": "awsui_circle-left_1612d_sq8vz_268",
+  "spinner-line-left": "awsui_spinner-line-left_1612d_sq8vz_1",
+  "circle-right": "awsui_circle-right_1612d_sq8vz_273",
+  "spinner-line-right": "awsui_spinner-line-right_1612d_sq8vz_1"
 };
   

package/lib/internal/template/status-indicator/internal.d.ts

@@ -17,5 +17,12 @@ export interface InternalStatusIndicatorProps extends SomeRequired<StatusIndicat
      */
     __display?: 'inline' | 'inline-block';
 }
+interface InternalStatusIconProps extends Pick<InternalStatusIndicatorProps, 'type' | 'iconAriaLabel'> {
+    animate?: InternalStatusIndicatorProps['__animate'];
+    size?: InternalStatusIndicatorProps['__size'];
+    display?: InternalStatusIndicatorProps['__display'];
+}
+export declare function InternalStatusIcon({ type, iconAriaLabel, animate, display, size, }: InternalStatusIconProps): JSX.Element;
 export default function StatusIndicator({ type, children, iconAriaLabel, colorOverride, wrapText, nativeAttributes, __animate, __internalRootRef, __size, __display, ...rest }: InternalStatusIndicatorProps): JSX.Element;
+export {};
 //# sourceMappingURL=internal.d.ts.map

package/lib/internal/template/status-indicator/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/status-indicator/internal.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAG/C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAClF,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAMjD,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAIpD,MAAM,WAAW,4BACf,SAAQ,YAAY,CAAC,oBAAoB,EAAE,MAAM,CAAC,EAChD,0BAA0B;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;IAExB;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,cAAc,CAAC;CACvC;AAaD,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,IAAI,EACJ,QAAQ,EACR,aAAa,EACb,aAAa,EACb,QAAe,EACf,gBAAgB,EAChB,SAAiB,EACjB,iBAAiB,EACjB,MAAiB,EACjB,SAA0B,EAC1B,GAAG,IAAI,EACR,EAAE,4BAA4B,eAsC9B"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/status-indicator/internal.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAG/C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAClF,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAMjD,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAIpD,MAAM,WAAW,4BACf,SAAQ,YAAY,CAAC,oBAAoB,EAAE,MAAM,CAAC,EAChD,0BAA0B;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;IAExB;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,cAAc,CAAC;CACvC;AAaD,UAAU,uBAAwB,SAAQ,IAAI,CAAC,4BAA4B,EAAE,MAAM,GAAG,eAAe,CAAC;IACpG,OAAO,CAAC,EAAE,4BAA4B,CAAC,WAAW,CAAC,CAAC;IACpD,IAAI,CAAC,EAAE,4BAA4B,CAAC,QAAQ,CAAC,CAAC;IAC9C,OAAO,CAAC,EAAE,4BAA4B,CAAC,WAAW,CAAC,CAAC;CACrD;AAED,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,aAAa,EACb,OAAO,EACP,OAAO,EACP,IAAe,GAChB,EAAE,uBAAuB,eAWzB;AAED,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,IAAI,EACJ,QAAQ,EACR,aAAa,EACb,aAAa,EACb,QAAe,EACf,gBAAgB,EAChB,SAAiB,EACjB,iBAAiB,EACjB,MAAiB,EACjB,SAA0B,EAC1B,GAAG,IAAI,EACR,EAAE,4BAA4B,eAqC9B"}

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

@@ -21,6 +21,11 @@ const typeToIcon = size => ({
     'in-progress': React.createElement(InternalIcon, { name: "status-in-progress", size: size }),
     loading: React.createElement(InternalSpinner, null),
 });
+export function InternalStatusIcon({ type, iconAriaLabel, animate, display, size = 'normal', }) {
+    return (React.createElement("span", { className: clsx(styles.icon, animate && styles['icon-shake']), "aria-label": iconAriaLabel, role: iconAriaLabel ? 'img' : undefined },
+        typeToIcon(size)[type],
+        display === 'inline' && React.createElement(React.Fragment, null, "\u00A0")));
+}
 export default function StatusIndicator(_a) {
     var { type, children, iconAriaLabel, colorOverride, wrapText = true, nativeAttributes, __animate = false, __internalRootRef, __size = 'normal', __display = 'inline-block' } = _a, rest = __rest(_a, ["type", "children", "iconAriaLabel", "colorOverride", "wrapText", "nativeAttributes", "__animate", "__internalRootRef", "__size", "__display"]);
     const baseProps = getBaseProps(rest);
@@ -28,9 +33,7 @@ export default function StatusIndicator(_a) {
             [styles[`color-override-${colorOverride}`]]: colorOverride,
         }, baseProps.className), ref: __internalRootRef }),
         React.createElement("span", { className: clsx(styles.container, styles[`display-${__display}`], wrapText === false && styles['overflow-ellipsis'], __animate && styles['container-fade-in']) },
-            React.createElement("span", { className: clsx(styles.icon, __animate && styles['icon-shake']), "aria-label": iconAriaLabel, role: iconAriaLabel ? 'img' : undefined },
-                typeToIcon(__size)[type],
-                __display === 'inline' && React.createElement(React.Fragment, null, "\u00A0")),
+            React.createElement(InternalStatusIcon, { type: type, iconAriaLabel: iconAriaLabel, animate: __animate, display: __display, size: __size }),
             children)));
 }
 //# sourceMappingURL=internal.js.map

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":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAGxB,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAG1D;;GAEG;AACH,OAAO,oBAAoB,MAAM,0CAA0C,CAAC;AAC5E,OAAO,eAAe,MAAM,qBAAqB,CAAC;AAGlD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAqBrC,MAAM,UAAU,GAA6E,IAAI,CAAC,EAAE,CAAC,CAAC;IACpG,KAAK,EAAE,oBAAC,YAAY,IAAC,IAAI,EAAC,iBAAiB,EAAC,IAAI,EAAE,IAAI,GAAI;IAC1D,OAAO,EAAE,oBAAC,YAAY,IAAC,IAAI,EAAC,gBAAgB,EAAC,IAAI,EAAE,IAAI,GAAI;IAC3D,OAAO,EAAE,oBAAC,YAAY,IAAC,IAAI,EAAC,iBAAiB,EAAC,IAAI,EAAE,IAAI,GAAI;IAC5D,IAAI,EAAE,oBAAC,YAAY,IAAC,IAAI,EAAC,aAAa,EAAC,IAAI,EAAE,IAAI,GAAI;IACrD,OAAO,EAAE,oBAAC,YAAY,IAAC,IAAI,EAAC,gBAAgB,EAAC,IAAI,EAAE,IAAI,GAAI;IAC3D,OAAO,EAAE,oBAAC,YAAY,IAAC,IAAI,EAAC,gBAAgB,EAAC,IAAI,EAAE,IAAI,GAAI;IAC3D,aAAa,EAAE,oBAAC,YAAY,IAAC,IAAI,EAAC,oBAAoB,EAAC,IAAI,EAAE,IAAI,GAAI;IACrE,OAAO,EAAE,oBAAC,eAAe,OAAG;CAC7B,CAAC,CAAC;AAEH,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EAYT;QAZS,EACtC,IAAI,EACJ,QAAQ,EACR,aAAa,EACb,aAAa,EACb,QAAQ,GAAG,IAAI,EACf,gBAAgB,EAChB,SAAS,GAAG,KAAK,EACjB,iBAAiB,EACjB,MAAM,GAAG,QAAQ,EACjB,SAAS,GAAG,cAAc,OAEG,EAD1B,IAAI,cAX+B,+IAYvC,CADQ;IAEP,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IACrC,OAAO,CACL,oBAAC,oBAAoB,oBACf,SAAS,IACb,GAAG,EAAC,MAAM,EACV,aAAa,EAAC,iBAAiB,EAC/B,gBAAgB,EAAE,gBAAgB,EAClC,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,IAAI,EACX,MAAM,CAAC,UAAU,IAAI,EAAE,CAAC,EACxB;YACE,CAAC,MAAM,CAAC,kBAAkB,aAAa,EAAE,CAAC,CAAC,EAAE,aAAa;SAC3D,EACD,SAAS,CAAC,SAAS,CACpB,EACD,GAAG,EAAE,iBAAiB;QAEtB,8BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,SAAS,EAChB,MAAM,CAAC,WAAW,SAAS,EAAE,CAAC,EAC9B,QAAQ,KAAK,KAAK,IAAI,MAAM,CAAC,mBAAmB,CAAC,EACjD,SAAS,IAAI,MAAM,CAAC,mBAAmB,CAAC,CACzC;YAED,8BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,IAAI,MAAM,CAAC,YAAY,CAAC,CAAC,gBACnD,aAAa,EACzB,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS;gBAEtC,UAAU,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC;gBACxB,SAAS,KAAK,QAAQ,IAAI,mDAAW,CACjC;YACN,QAAQ,CACJ,CACc,CACxB,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { 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  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 />,\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 = '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        <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        {children}\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 { 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  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 />,\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 = '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        {children}\n      </span>\n    </WithNativeAttributes>\n  );\n}\n"]}

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

@@ -12,6 +12,27 @@ export interface StepsProps extends BaseComponentProps {
      *  * `details` (ReactNode) - (Optional) Additional information corresponding to the step.
      */
     steps: ReadonlyArray<StepsProps.Step>;
+    /**
+     * The visual orientation of the steps (vertical or horizontal).
+     * By default the orientation is vertical.
+     *
+     * @awsuiSystem core
+     */
+    orientation?: StepsProps.Orientation;
+    /**
+     * Render a step. This overrides the default icon, header, and details provided by the component.
+     * The function is called for each step and should return an object with the following keys:
+     * * `header` (React.ReactNode) - Summary corresponding to the step.
+     * * `details` (React.ReactNode) - (Optional) Additional information corresponding to the step.
+     * * `icon` (React.ReactNode) - (Optional) Replaces the standard step icon from the status indicator.
+     *
+     * @awsuiSystem core
+     */
+    renderStep?: (step: StepsProps.Step) => {
+        header: React.ReactNode;
+        details?: React.ReactNode;
+        icon?: React.ReactNode;
+    };
     /**
      * Provides an `aria-label` to the progress steps container.
      * Don't use `ariaLabel` and `ariaLabelledby` at the same time.
@@ -36,5 +57,6 @@ export declare namespace StepsProps {
         header: React.ReactNode;
         details?: React.ReactNode;
     }
+    type Orientation = 'vertical' | 'horizontal';
 }
 //# sourceMappingURL=interfaces.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/steps/interfaces.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AAEtE,MAAM,WAAW,UAAW,SAAQ,kBAAkB;IACpD;;;;;;;;OAQG;IACH,KAAK,EAAE,aAAa,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IACtC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,yBAAiB,UAAU,CAAC;IAC1B,KAAY,MAAM,GAAG,oBAAoB,CAAC,IAAI,CAAC;IAE/C,UAAiB,IAAI;QACnB,MAAM,EAAE,MAAM,CAAC;QACf,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;QACxB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;KAC3B;CACF"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/steps/interfaces.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AAEtE,MAAM,WAAW,UAAW,SAAQ,kBAAkB;IACpD;;;;;;;;OAQG;IACH,KAAK,EAAE,aAAa,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IACtC;;;;;OAKG;IACH,WAAW,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC;IACrC;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,CAAC,IAAI,KAAK;QACtC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;QACxB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;KACxB,CAAC;IACF;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,yBAAiB,UAAU,CAAC;IAC1B,KAAY,MAAM,GAAG,oBAAoB,CAAC,IAAI,CAAC;IAE/C,UAAiB,IAAI;QACnB,MAAM,EAAE,MAAM,CAAC;QACf,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;QACxB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;KAC3B;IAED,KAAY,WAAW,GAAG,UAAU,GAAG,YAAY,CAAC;CACrD"}

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

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/steps/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport { StatusIndicatorProps } from '../status-indicator/interfaces';\n\nexport interface StepsProps extends BaseComponentProps {\n  /**\n   * An array of individual steps\n   *\n   * Each step definition has the following properties:\n   *  * `status` (string) - Status of the step corresponding to a status indicator.\n   *  * `statusIconAriaLabel` - (string) - (Optional) Alternative text for the status icon.\n   *  * `header` (ReactNode) - Summary corresponding to the step.\n   *  * `details` (ReactNode) - (Optional) Additional information corresponding to the step.\n   */\n  steps: ReadonlyArray<StepsProps.Step>;\n  /**\n   * Provides an `aria-label` to the progress steps container.\n   * Don't use `ariaLabel` and `ariaLabelledby` at the same time.\n   */\n  ariaLabel?: string;\n  /**\n   * Sets the `aria-labelledby` property on the progress steps container.\n   * If there's a visible label element that you can reference, use this instead of `ariaLabel`.\n   * Don't use `ariaLabel` and `ariaLabelledby` at the same time.\n   */\n  ariaLabelledby?: string;\n  /**\n   * Sets the `aria-describedby` property on the progress steps container.\n   */\n  ariaDescribedby?: string;\n}\n\nexport namespace StepsProps {\n  export type Status = StatusIndicatorProps.Type;\n\n  export interface Step {\n    status: Status;\n    statusIconAriaLabel?: string;\n    header: React.ReactNode;\n    details?: React.ReactNode;\n  }\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/steps/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport { StatusIndicatorProps } from '../status-indicator/interfaces';\n\nexport interface StepsProps extends BaseComponentProps {\n  /**\n   * An array of individual steps\n   *\n   * Each step definition has the following properties:\n   *  * `status` (string) - Status of the step corresponding to a status indicator.\n   *  * `statusIconAriaLabel` - (string) - (Optional) Alternative text for the status icon.\n   *  * `header` (ReactNode) - Summary corresponding to the step.\n   *  * `details` (ReactNode) - (Optional) Additional information corresponding to the step.\n   */\n  steps: ReadonlyArray<StepsProps.Step>;\n  /**\n   * The visual orientation of the steps (vertical or horizontal).\n   * By default the orientation is vertical.\n   *\n   * @awsuiSystem core\n   */\n  orientation?: StepsProps.Orientation;\n  /**\n   * Render a step. This overrides the default icon, header, and details provided by the component.\n   * The function is called for each step and should return an object with the following keys:\n   * * `header` (React.ReactNode) - Summary corresponding to the step.\n   * * `details` (React.ReactNode) - (Optional) Additional information corresponding to the step.\n   * * `icon` (React.ReactNode) - (Optional) Replaces the standard step icon from the status indicator.\n   *\n   * @awsuiSystem core\n   */\n  renderStep?: (step: StepsProps.Step) => {\n    header: React.ReactNode;\n    details?: React.ReactNode;\n    icon?: React.ReactNode;\n  };\n  /**\n   * Provides an `aria-label` to the progress steps container.\n   * Don't use `ariaLabel` and `ariaLabelledby` at the same time.\n   */\n  ariaLabel?: string;\n  /**\n   * Sets the `aria-labelledby` property on the progress steps container.\n   * If there's a visible label element that you can reference, use this instead of `ariaLabel`.\n   * Don't use `ariaLabel` and `ariaLabelledby` at the same time.\n   */\n  ariaLabelledby?: string;\n  /**\n   * Sets the `aria-describedby` property on the progress steps container.\n   */\n  ariaDescribedby?: string;\n}\n\nexport namespace StepsProps {\n  export type Status = StatusIndicatorProps.Type;\n\n  export interface Step {\n    status: Status;\n    statusIconAriaLabel?: string;\n    header: React.ReactNode;\n    details?: React.ReactNode;\n  }\n\n  export type Orientation = 'vertical' | 'horizontal';\n}\n"]}

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;
-declare const InternalSteps: ({ steps, ariaLabel, ariaLabelledby, ariaDescribedby, __internalRootRef, ...props }: InternalStepsProps) => JSX.Element;
+declare const InternalSteps: ({ steps, orientation, renderStep, 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;AAgBzF,QAAA,MAAM,aAAa,uFAOhB,kBAAkB,gBAqBpB,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/steps/internal.tsx"],"names":[],"mappings":";AAOA,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;AA2EzF,QAAA,MAAM,aAAa,gHAShB,kBAAkB,gBA8BpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

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

@@ -3,19 +3,43 @@ import { __rest } from "tslib";
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 import clsx from 'clsx';
-import StatusIndicator from '../status-indicator/internal';
+import InternalBox from '../box/internal';
+import InternalStatusIndicator, { InternalStatusIcon } from '../status-indicator/internal';
 import styles from './styles.css.js';
-const InternalStep = ({ status, statusIconAriaLabel, header, details }) => {
+const statusToColor = {
+    error: 'text-status-error',
+    warning: 'text-status-warning',
+    success: 'text-status-success',
+    info: 'text-status-info',
+    stopped: 'text-status-inactive',
+    pending: 'text-status-inactive',
+    'in-progress': 'text-status-inactive',
+    loading: 'text-status-inactive',
+};
+const CustomStep = ({ step, orientation, renderStep, }) => {
+    const { status, statusIconAriaLabel } = step;
+    const { header, details, icon } = renderStep(step);
     return (React.createElement("li", { className: styles.container },
         React.createElement("div", { className: styles.header },
-            React.createElement(StatusIndicator, { type: status, iconAriaLabel: statusIconAriaLabel }, header)),
-        React.createElement("hr", { className: styles.connector, role: "none" }),
+            icon ? icon : React.createElement(InternalStatusIcon, { type: status, iconAriaLabel: statusIconAriaLabel }),
+            orientation === 'vertical' ? header : React.createElement("hr", { className: styles.connector, role: "none" })),
+        orientation === 'vertical' ? (React.createElement("hr", { className: styles.connector, role: "none" })) : (React.createElement("div", { className: styles['horizontal-header'] }, header)),
+        details && React.createElement("div", { className: styles.details }, details)));
+};
+const InternalStep = ({ status, statusIconAriaLabel, header, details, orientation, }) => {
+    return (React.createElement("li", { className: styles.container },
+        React.createElement("div", { className: styles.header }, orientation === 'vertical' ? (React.createElement(InternalStatusIndicator, { type: status, iconAriaLabel: statusIconAriaLabel }, header)) : (React.createElement(React.Fragment, null,
+            React.createElement(InternalBox, { color: statusToColor[status] },
+                React.createElement(InternalStatusIcon, { type: status, iconAriaLabel: statusIconAriaLabel })),
+            React.createElement("hr", { className: styles.connector, role: "none" })))),
+        orientation === 'vertical' ? (React.createElement("hr", { className: styles.connector, role: "none" })) : (React.createElement("div", { className: styles['horizontal-header'] },
+            React.createElement(InternalBox, { color: statusToColor[status] }, header))),
         details && React.createElement("div", { className: styles.details }, details)));
 };
 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 }))))));
+    var { steps, orientation = 'vertical', renderStep, ariaLabel, ariaLabelledby, ariaDescribedby, __internalRootRef } = _a, props = __rest(_a, ["steps", "orientation", "renderStep", "ariaLabel", "ariaLabelledby", "ariaDescribedby", "__internalRootRef"]);
+    return (React.createElement("div", Object.assign({}, props, { className: clsx(styles.root, props.className, orientation === 'horizontal' ? styles.horizontal : styles.vertical), ref: __internalRootRef }),
+        React.createElement("ol", { className: styles.list, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby }, steps.map((step, index) => renderStep ? (React.createElement(CustomStep, { key: index, orientation: orientation, step: step, renderStep: renderStep })) : (React.createElement(InternalStep, { key: index, status: step.status, statusIconAriaLabel: step.statusIconAriaLabel, header: step.header, details: step.details, orientation: orientation }))))));
 };
 export default InternalSteps;
 //# sourceMappingURL=internal.js.map

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,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;\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"]}
+{"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'> & 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};\n\nconst CustomStep = ({\n  step,\n  orientation,\n  renderStep,\n}: {\n  step: StepsProps.Step;\n  orientation: StepsProps.Orientation;\n  renderStep: Required<StepsProps>['renderStep'];\n}) => {\n  const { status, statusIconAriaLabel } = step;\n  const { header, details, icon } = renderStep(step);\n  return (\n    <li className={styles.container}>\n      <div className={styles.header}>\n        {icon ? icon : <InternalStatusIcon type={status} iconAriaLabel={statusIconAriaLabel} />}\n        {orientation === 'vertical' ? header : <hr className={styles.connector} role=\"none\" />}\n      </div>\n      {orientation === 'vertical' ? (\n        <hr className={styles.connector} role=\"none\" />\n      ) : (\n        <div className={styles['horizontal-header']}>{header}</div>\n      )}\n      {details && <div className={styles.details}>{details}</div>}\n    </li>\n  );\n};\n\nconst InternalStep = ({\n  status,\n  statusIconAriaLabel,\n  header,\n  details,\n  orientation,\n}: StepsProps.Step & { orientation: StepsProps.Orientation }) => {\n  return (\n    <li className={styles.container}>\n      <div className={styles.header}>\n        {orientation === 'vertical' ? (\n          <InternalStatusIndicator type={status} iconAriaLabel={statusIconAriaLabel}>\n            {header}\n          </InternalStatusIndicator>\n        ) : (\n          <>\n            <InternalBox color={statusToColor[status]}>\n              <InternalStatusIcon type={status} iconAriaLabel={statusIconAriaLabel} />\n            </InternalBox>\n            <hr className={styles.connector} role=\"none\" />\n          </>\n        )}\n      </div>\n      {orientation === 'vertical' ? (\n        <hr className={styles.connector} role=\"none\" />\n      ) : (\n        <div className={styles['horizontal-header']}>\n          <InternalBox color={statusToColor[status]}>{header}</InternalBox>\n        </div>\n      )}\n      {details && <div className={styles.details}>{details}</div>}\n    </li>\n  );\n};\n\nconst InternalSteps = ({\n  steps,\n  orientation = 'vertical',\n  renderStep,\n  ariaLabel,\n  ariaLabelledby,\n  ariaDescribedby,\n  __internalRootRef,\n  ...props\n}: InternalStepsProps) => {\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={styles.list}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        aria-describedby={ariaDescribedby}\n      >\n        {steps.map((step, index) =>\n          renderStep ? (\n            <CustomStep key={index} orientation={orientation} step={step} renderStep={renderStep} />\n          ) : (\n            <InternalStep\n              key={index}\n              status={step.status}\n              statusIconAriaLabel={step.statusIconAriaLabel}\n              header={step.header}\n              details={step.details}\n              orientation={orientation}\n            />\n          )\n        )}\n      </ol>\n    </div>\n  );\n};\n\nexport default InternalSteps;\n"]}

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

@@ -1,11 +1,14 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_gxp9y_1ss9r_181",
-  "list": "awsui_list_gxp9y_1ss9r_212",
-  "container": "awsui_container_gxp9y_1ss9r_217",
-  "header": "awsui_header_gxp9y_1ss9r_222",
-  "details": "awsui_details_gxp9y_1ss9r_226",
-  "connector": "awsui_connector_gxp9y_1ss9r_232"
+  "root": "awsui_root_gxp9y_1804k_181",
+  "list": "awsui_list_gxp9y_1804k_214",
+  "container": "awsui_container_gxp9y_1804k_219",
+  "header": "awsui_header_gxp9y_1804k_224",
+  "details": "awsui_details_gxp9y_1804k_230",
+  "connector": "awsui_connector_gxp9y_1804k_236",
+  "custom": "awsui_custom_gxp9y_1804k_252",
+  "horizontal": "awsui_horizontal_gxp9y_1804k_256",
+  "horizontal-header": "awsui_horizontal-header_gxp9y_1804k_288"
 };
   

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

@@ -178,7 +178,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_1ss9r_181:not(#\9) {
+.awsui_root_gxp9y_1804k_181:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -208,28 +208,32 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   font-family: var(--font-family-base-8x5ngf, "Noto Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
+  min-inline-size: 0;
+  word-break: break-word;
 }
-.awsui_root_gxp9y_1ss9r_181 > .awsui_list_gxp9y_1ss9r_212:not(#\9) {
+.awsui_root_gxp9y_1804k_181 > .awsui_list_gxp9y_1804k_214:not(#\9) {
   list-style: none;
   padding-inline-start: 0;
   margin-block: 0;
 }
-.awsui_root_gxp9y_1ss9r_181 > .awsui_list_gxp9y_1ss9r_212 > .awsui_container_gxp9y_1ss9r_217:not(#\9) {
+.awsui_root_gxp9y_1804k_181 > .awsui_list_gxp9y_1804k_214 > .awsui_container_gxp9y_1804k_219:not(#\9) {
   display: grid;
   grid-template-columns: var(--space-static-l-ig026c, 20px) 1fr;
   grid-template-rows: minmax(var(--space-static-l-ig026c, 20px), auto);
 }
-.awsui_root_gxp9y_1ss9r_181 > .awsui_list_gxp9y_1ss9r_212 > .awsui_container_gxp9y_1ss9r_217 > .awsui_header_gxp9y_1ss9r_222:not(#\9) {
+.awsui_root_gxp9y_1804k_181 > .awsui_list_gxp9y_1804k_214 > .awsui_container_gxp9y_1804k_219 > .awsui_header_gxp9y_1804k_224:not(#\9) {
+  display: flex;
+  gap: var(--space-xxs-jnczic, 4px);
   grid-row: 1;
   grid-column: 1/span 2;
 }
-.awsui_root_gxp9y_1ss9r_181 > .awsui_list_gxp9y_1ss9r_212 > .awsui_container_gxp9y_1ss9r_217 > .awsui_details_gxp9y_1ss9r_226:not(#\9) {
+.awsui_root_gxp9y_1804k_181 > .awsui_list_gxp9y_1804k_214 > .awsui_container_gxp9y_1804k_219 > .awsui_details_gxp9y_1804k_230:not(#\9) {
   align-items: center;
   grid-row: 2;
   grid-column: 2;
   margin-block-end: var(--space-static-xs-4gq40t, 8px);
 }
-.awsui_root_gxp9y_1ss9r_181 > .awsui_list_gxp9y_1ss9r_212 > .awsui_container_gxp9y_1ss9r_217 > .awsui_connector_gxp9y_1ss9r_232:not(#\9) {
+.awsui_root_gxp9y_1804k_181 > .awsui_list_gxp9y_1804k_214 > .awsui_container_gxp9y_1804k_219 > .awsui_connector_gxp9y_1804k_236:not(#\9) {
   grid-row: 2;
   grid-column: 1;
   background-color: var(--color-border-divider-default-ipvpev, #eaeded);
@@ -242,6 +246,53 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   position: relative;
   inset-inline-end: var(--space-static-xxxs-zckw10, 2px);
 }
-.awsui_root_gxp9y_1ss9r_181 > .awsui_list_gxp9y_1ss9r_212 > :not(#\9):last-of-type > .awsui_connector_gxp9y_1ss9r_232 {
+.awsui_root_gxp9y_1804k_181 > .awsui_list_gxp9y_1804k_214 > :not(#\9):last-of-type > .awsui_connector_gxp9y_1804k_236 {
+  display: none;
+}
+.awsui_root_gxp9y_1804k_181 > .awsui_list_gxp9y_1804k_214.awsui_custom_gxp9y_1804k_252 > .awsui_details_gxp9y_1804k_230:not(#\9) {
+  margin-block-end: 0;
+}
+
+.awsui_horizontal_gxp9y_1804k_256 > .awsui_list_gxp9y_1804k_214:not(#\9) {
+  display: grid;
+  align-items: flex-start;
+  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+  grid-auto-flow: column;
+}
+.awsui_horizontal_gxp9y_1804k_256 > .awsui_list_gxp9y_1804k_214 > .awsui_container_gxp9y_1804k_219:not(#\9) {
+  display: grid;
+  grid-template-columns: var(--space-static-l-ig026c, 20px) 1fr;
+  grid-template-rows: minmax(var(--space-static-l-ig026c, 20px), auto);
+  align-items: center;
+}
+.awsui_horizontal_gxp9y_1804k_256 > .awsui_list_gxp9y_1804k_214 > .awsui_container_gxp9y_1804k_219 > .awsui_header_gxp9y_1804k_224:not(#\9) {
+  display: flex;
+  grid-row: 1;
+  grid-column: 1/span 2;
+  align-items: center;
+}
+.awsui_horizontal_gxp9y_1804k_256 > .awsui_list_gxp9y_1804k_214 > .awsui_container_gxp9y_1804k_219 > .awsui_header_gxp9y_1804k_224 > .awsui_connector_gxp9y_1804k_236:not(#\9) {
+  display: block;
+  flex: 1;
+  background-color: var(--color-border-divider-default-ipvpev, #eaeded);
+  margin-block: 0;
+  border-block: 0;
+  border-inline: 0;
+  min-block-size: 0;
+  inset-inline-end: 0;
+  block-size: var(--border-divider-list-width-8ggz94, 1px);
+  inline-size: auto;
+  min-inline-size: var(--space-static-xs-4gq40t, 8px);
+  margin-inline-end: var(--space-static-xxs-0cgyf1, 4px);
+}
+.awsui_horizontal_gxp9y_1804k_256 > .awsui_list_gxp9y_1804k_214 > .awsui_container_gxp9y_1804k_219 > .awsui_horizontal-header_gxp9y_1804k_288:not(#\9) {
+  grid-row: 2;
+  grid-column: 1/span 3;
+}
+.awsui_horizontal_gxp9y_1804k_256 > .awsui_list_gxp9y_1804k_214 > .awsui_container_gxp9y_1804k_219 > .awsui_details_gxp9y_1804k_230:not(#\9) {
+  grid-row: 3;
+  grid-column: 1/span 3;
+}
+.awsui_horizontal_gxp9y_1804k_256 > .awsui_list_gxp9y_1804k_214 > .awsui_container_gxp9y_1804k_219:not(#\9):last-child > .awsui_header_gxp9y_1804k_224 > .awsui_connector_gxp9y_1804k_236 {
   display: none;
 }

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

@@ -2,11 +2,14 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_gxp9y_1ss9r_181",
-  "list": "awsui_list_gxp9y_1ss9r_212",
-  "container": "awsui_container_gxp9y_1ss9r_217",
-  "header": "awsui_header_gxp9y_1ss9r_222",
-  "details": "awsui_details_gxp9y_1ss9r_226",
-  "connector": "awsui_connector_gxp9y_1ss9r_232"
+  "root": "awsui_root_gxp9y_1804k_181",
+  "list": "awsui_list_gxp9y_1804k_214",
+  "container": "awsui_container_gxp9y_1804k_219",
+  "header": "awsui_header_gxp9y_1804k_224",
+  "details": "awsui_details_gxp9y_1804k_230",
+  "connector": "awsui_connector_gxp9y_1804k_236",
+  "custom": "awsui_custom_gxp9y_1804k_252",
+  "horizontal": "awsui_horizontal_gxp9y_1804k_256",
+  "horizontal-header": "awsui_horizontal-header_gxp9y_1804k_288"
 };
   

package/lib/internal/template/tag-editor/styles.css.js

@@ -1,8 +1,8 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_brdst_1danq_145",
-  "loading": "awsui_loading_brdst_1danq_149",
-  "undo-button": "awsui_undo-button_brdst_1danq_153"
+  "root": "awsui_root_brdst_1u55z_145",
+  "loading": "awsui_loading_brdst_1u55z_149",
+  "undo-button": "awsui_undo-button_brdst_1u55z_153"
 };