@cloudscape-design/components-themeable 3.0.1212 → 3.0.1214

package/lib/internal/template/wizard/wizard-navigation.js

@@ -2,111 +2,38 @@
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 import clsx from 'clsx';
+import { useUniqueId } from '@cloudscape-design/component-toolkit/internal';
 import InternalBox from '../box/internal';
 import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
 import InternalLink from '../link/internal';
 import { getNavigationActionDetail } from './analytics-metadata/utils';
+import WizardStepList, { getStepStatus, StepStatusValues } from './wizard-step-list';
 import analyticsSelectors from './analytics-metadata/styles.css.js';
 import styles from './styles.css.js';
-var Statuses;
-(function (Statuses) {
-    Statuses["Active"] = "active";
-    Statuses["Unvisited"] = "unvisited";
-    Statuses["Visited"] = "visited";
-    Statuses["Next"] = "next";
-})(Statuses || (Statuses = {}));
 export default function Navigation({ activeStepIndex, farthestStepIndex, allowSkipTo, hidden, i18nStrings, isLoadingNextStep, onStepClick, onSkipToClick, steps, }) {
     const isVisualRefresh = useVisualRefresh();
-    return (React.createElement("nav", { className: clsx(styles.navigation, hidden && styles.hidden, isVisualRefresh && styles.refresh), "aria-label": i18nStrings.navigationAriaLabel },
-        React.createElement("ul", { className: clsx(isVisualRefresh && styles.refresh) }, steps.map((step, index) => isVisualRefresh ? (React.createElement(NavigationStepVisualRefresh, { i18nStrings: i18nStrings, index: index, key: index, onStepClick: onStepClick, onSkipToClick: onSkipToClick, status: getStatus(index), step: step })) : (React.createElement(NavigationStepClassic, { i18nStrings: i18nStrings, index: index, key: index, onStepClick: onStepClick, onSkipToClick: onSkipToClick, status: getStatus(index), step: step }))))));
-    function getStatus(index) {
-        if (activeStepIndex === index) {
-            return Statuses.Active;
-        }
-        if (isLoadingNextStep) {
-            return Statuses.Unvisited;
-        }
-        if (farthestStepIndex >= index) {
-            return Statuses.Visited;
-        }
-        if (allowSkipTo && canSkip(activeStepIndex + 1, index)) {
-            return Statuses.Next;
-        }
-        return Statuses.Unvisited;
-    }
-    function canSkip(fromIndex, toIndex) {
-        let index = fromIndex;
-        do {
-            if (!steps[index].isOptional) {
-                return false;
-            }
-            index++;
-        } while (index < toIndex);
-        return true;
-    }
-}
-function NavigationStepVisualRefresh({ i18nStrings, index, onStepClick, onSkipToClick, status, step, }) {
-    function handleStepInteraction() {
-        if (status === Statuses.Visited) {
-            onStepClick(index);
-        }
-        if (status === Statuses.Next) {
-            onSkipToClick(index);
-        }
-    }
-    const state = {
-        active: 'active',
-        unvisited: 'disabled',
-        visited: 'enabled',
-        next: 'enabled',
-    }[status];
-    const linkClassName = clsx(styles['navigation-link'], {
-        [styles['navigation-link-active']]: status === Statuses.Active,
-        [styles['navigation-link-disabled']]: status === Statuses.Unvisited,
-    });
-    return (React.createElement("li", { className: clsx(styles[`${state}`], styles['navigation-link-item']) },
-        React.createElement("hr", null),
-        React.createElement("span", { className: clsx(styles.number, styles['navigation-link-label']) },
-            i18nStrings.stepNumberLabel && i18nStrings.stepNumberLabel(index + 1),
-            step.isOptional && React.createElement("i", null, ` - ${i18nStrings.optional}`)),
-        React.createElement("a", { className: linkClassName, "aria-current": status === Statuses.Active ? 'step' : undefined, "aria-disabled": status === Statuses.Unvisited ? 'true' : undefined, onClick: event => {
-                event.preventDefault();
-                handleStepInteraction();
-            }, onKeyDown: event => {
-                if (event.key === ' ' || event.key === 'Enter') {
-                    event.preventDefault();
-                }
-                // Enter activates the button on key down instead of key up.
-                if (event.key === 'Enter') {
-                    handleStepInteraction();
-                }
-            }, onKeyUp: event => {
-                // Emulate button behavior, which also fires on space.
-                if (event.key === ' ') {
-                    handleStepInteraction();
-                }
-            }, role: "button", tabIndex: status === Statuses.Visited || status === Statuses.Next ? 0 : undefined, ...(status === Statuses.Unvisited
-                ? {}
-                : getNavigationActionDetail(index, 'step', true, `.${analyticsSelectors['step-title']}`)) },
-            React.createElement("div", { className: styles.circle }),
-            React.createElement("span", { className: clsx(styles.title, analyticsSelectors['step-title']) }, step.title))));
+    return (React.createElement("nav", { className: clsx(styles.navigation, hidden && styles.hidden, isVisualRefresh && styles.refresh), "aria-label": i18nStrings.navigationAriaLabel }, isVisualRefresh ? (React.createElement(WizardStepList, { activeStepIndex: activeStepIndex, farthestStepIndex: farthestStepIndex, allowSkipTo: allowSkipTo, i18nStrings: i18nStrings, isLoadingNextStep: isLoadingNextStep, onStepClick: onStepClick, onSkipToClick: onSkipToClick, steps: steps })) : (React.createElement("ul", null, steps.map((step, index) => {
+        const status = getStepStatus(index, activeStepIndex, farthestStepIndex, isLoadingNextStep, allowSkipTo, steps);
+        return (React.createElement(NavigationStepClassic, { i18nStrings: i18nStrings, index: index, key: index, onStepClick: onStepClick, onSkipToClick: onSkipToClick, status: status, step: step }));
+    })))));
 }
 function NavigationStepClassic({ i18nStrings, index, onStepClick, onSkipToClick, status, step }) {
-    const spanClassName = clsx(styles['navigation-link'], status === Statuses.Active ? styles['navigation-link-active'] : styles['navigation-link-disabled']);
-    return (React.createElement("li", { className: styles['navigation-link-item'], ...(status === Statuses.Unvisited
+    const spanClassName = clsx(styles['navigation-link'], status === StepStatusValues.Active ? styles['navigation-link-active'] : styles['navigation-link-disabled']);
+    const optionalDescriptionId = useUniqueId('wizard-step-optional-');
+    return (React.createElement("li", { className: styles['navigation-link-item'], ...(status === StepStatusValues.Unvisited
             ? {}
             : getNavigationActionDetail(index, 'step', true, `.${analyticsSelectors['step-title']}`)) },
         React.createElement(InternalBox, { variant: "small", className: styles['navigation-link-label'], display: "block", margin: { bottom: 'xxs' } },
             i18nStrings.stepNumberLabel && i18nStrings.stepNumberLabel(index + 1),
-            step.isOptional && React.createElement("i", null, ` - ${i18nStrings.optional}`)),
-        React.createElement("div", null, status === Statuses.Visited || status === Statuses.Next ? (React.createElement(InternalLink, { className: clsx(styles['navigation-link'], analyticsSelectors['step-title']), onFollow: evt => {
+            step.isOptional && React.createElement("i", { id: optionalDescriptionId }, ` - ${i18nStrings.optional}`)),
+        React.createElement("div", null, status === StepStatusValues.Visited || status === StepStatusValues.Next ? (React.createElement(InternalLink, { className: clsx(styles['navigation-link'], analyticsSelectors['step-title']), onFollow: evt => {
                 evt.preventDefault();
-                if (status === Statuses.Visited) {
+                if (status === StepStatusValues.Visited) {
                     onStepClick(index);
                 }
                 else {
                     onSkipToClick(index);
                 }
-            }, variant: "primary" }, step.title)) : (React.createElement("span", { className: clsx(spanClassName, analyticsSelectors['step-title']), "aria-current": status === Statuses.Active ? 'step' : undefined, "aria-disabled": status === Statuses.Active ? undefined : 'true' }, step.title)))));
+            }, variant: "primary", nativeAttributes: step.isOptional ? { 'aria-describedby': optionalDescriptionId } : undefined }, step.title)) : (React.createElement("span", { className: clsx(spanClassName, analyticsSelectors['step-title']), "aria-current": status === StepStatusValues.Active ? 'step' : undefined, "aria-disabled": status === StepStatusValues.Active ? undefined : 'true', "aria-describedby": step.isOptional ? optionalDescriptionId : undefined }, step.title)))));
 }
 //# sourceMappingURL=wizard-navigation.js.map

package/lib/internal/template/wizard/wizard-navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"wizard-navigation.js","sourceRoot":"","sources":["../../../src/wizard/wizard-navigation.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 InternalBox from '../box/internal';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport InternalLink from '../link/internal';\nimport { getNavigationActionDetail } from './analytics-metadata/utils';\nimport { WizardProps } from './interfaces';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface NavigationProps {\n  activeStepIndex: number;\n  farthestStepIndex: number;\n  allowSkipTo: boolean;\n  hidden: boolean;\n  i18nStrings: WizardProps.I18nStrings;\n  isLoadingNextStep: boolean;\n  onStepClick: (stepIndex: number) => void;\n  onSkipToClick: (stepIndex: number) => void;\n  steps: ReadonlyArray<WizardProps.Step>;\n}\n\ninterface NavigationStepProps {\n  i18nStrings: WizardProps.I18nStrings;\n  index: number;\n  onStepClick: (stepIndex: number) => void;\n  onSkipToClick: (stepIndex: number) => void;\n  status: string;\n  step: WizardProps.Step;\n}\n\nenum Statuses {\n  Active = 'active',\n  Unvisited = 'unvisited',\n  Visited = 'visited',\n  Next = 'next',\n}\n\nexport default function Navigation({\n  activeStepIndex,\n  farthestStepIndex,\n  allowSkipTo,\n  hidden,\n  i18nStrings,\n  isLoadingNextStep,\n  onStepClick,\n  onSkipToClick,\n  steps,\n}: NavigationProps) {\n  const isVisualRefresh = useVisualRefresh();\n  return (\n    <nav\n      className={clsx(styles.navigation, hidden && styles.hidden, isVisualRefresh && styles.refresh)}\n      aria-label={i18nStrings.navigationAriaLabel}\n    >\n      <ul className={clsx(isVisualRefresh && styles.refresh)}>\n        {steps.map((step, index: number) =>\n          isVisualRefresh ? (\n            <NavigationStepVisualRefresh\n              i18nStrings={i18nStrings}\n              index={index}\n              key={index}\n              onStepClick={onStepClick}\n              onSkipToClick={onSkipToClick}\n              status={getStatus(index)}\n              step={step}\n            />\n          ) : (\n            <NavigationStepClassic\n              i18nStrings={i18nStrings}\n              index={index}\n              key={index}\n              onStepClick={onStepClick}\n              onSkipToClick={onSkipToClick}\n              status={getStatus(index)}\n              step={step}\n            />\n          )\n        )}\n      </ul>\n    </nav>\n  );\n\n  function getStatus(index: number) {\n    if (activeStepIndex === index) {\n      return Statuses.Active;\n    }\n    if (isLoadingNextStep) {\n      return Statuses.Unvisited;\n    }\n    if (farthestStepIndex >= index) {\n      return Statuses.Visited;\n    }\n    if (allowSkipTo && canSkip(activeStepIndex + 1, index)) {\n      return Statuses.Next;\n    }\n    return Statuses.Unvisited;\n  }\n\n  function canSkip(fromIndex: number, toIndex: number) {\n    let index = fromIndex;\n    do {\n      if (!steps[index].isOptional) {\n        return false;\n      }\n      index++;\n    } while (index < toIndex);\n    return true;\n  }\n}\n\nfunction NavigationStepVisualRefresh({\n  i18nStrings,\n  index,\n  onStepClick,\n  onSkipToClick,\n  status,\n  step,\n}: NavigationStepProps) {\n  function handleStepInteraction() {\n    if (status === Statuses.Visited) {\n      onStepClick(index);\n    }\n    if (status === Statuses.Next) {\n      onSkipToClick(index);\n    }\n  }\n\n  const state = {\n    active: 'active',\n    unvisited: 'disabled',\n    visited: 'enabled',\n    next: 'enabled',\n  }[status];\n\n  const linkClassName = clsx(styles['navigation-link'], {\n    [styles['navigation-link-active']]: status === Statuses.Active,\n    [styles['navigation-link-disabled']]: status === Statuses.Unvisited,\n  });\n\n  return (\n    <li className={clsx(styles[`${state}`], styles['navigation-link-item'])}>\n      <hr />\n\n      <span className={clsx(styles.number, styles['navigation-link-label'])}>\n        {i18nStrings.stepNumberLabel && i18nStrings.stepNumberLabel(index + 1)}\n        {step.isOptional && <i>{` - ${i18nStrings.optional}`}</i>}\n      </span>\n\n      <a\n        className={linkClassName}\n        aria-current={status === Statuses.Active ? 'step' : undefined}\n        aria-disabled={status === Statuses.Unvisited ? 'true' : undefined}\n        onClick={event => {\n          event.preventDefault();\n          handleStepInteraction();\n        }}\n        onKeyDown={event => {\n          if (event.key === ' ' || event.key === 'Enter') {\n            event.preventDefault();\n          }\n          // Enter activates the button on key down instead of key up.\n          if (event.key === 'Enter') {\n            handleStepInteraction();\n          }\n        }}\n        onKeyUp={event => {\n          // Emulate button behavior, which also fires on space.\n          if (event.key === ' ') {\n            handleStepInteraction();\n          }\n        }}\n        role=\"button\"\n        tabIndex={status === Statuses.Visited || status === Statuses.Next ? 0 : undefined}\n        {...(status === Statuses.Unvisited\n          ? {}\n          : getNavigationActionDetail(index, 'step', true, `.${analyticsSelectors['step-title']}`))}\n      >\n        <div className={styles.circle} />\n\n        <span className={clsx(styles.title, analyticsSelectors['step-title'])}>{step.title}</span>\n      </a>\n    </li>\n  );\n}\n\nfunction NavigationStepClassic({ i18nStrings, index, onStepClick, onSkipToClick, status, step }: NavigationStepProps) {\n  const spanClassName = clsx(\n    styles['navigation-link'],\n    status === Statuses.Active ? styles['navigation-link-active'] : styles['navigation-link-disabled']\n  );\n\n  return (\n    <li\n      className={styles['navigation-link-item']}\n      {...(status === Statuses.Unvisited\n        ? {}\n        : getNavigationActionDetail(index, 'step', true, `.${analyticsSelectors['step-title']}`))}\n    >\n      <InternalBox\n        variant=\"small\"\n        className={styles['navigation-link-label']}\n        display=\"block\"\n        margin={{ bottom: 'xxs' }}\n      >\n        {i18nStrings.stepNumberLabel && i18nStrings.stepNumberLabel(index + 1)}\n        {step.isOptional && <i>{` - ${i18nStrings.optional}`}</i>}\n      </InternalBox>\n      <div>\n        {status === Statuses.Visited || status === Statuses.Next ? (\n          <InternalLink\n            className={clsx(styles['navigation-link'], analyticsSelectors['step-title'])}\n            onFollow={evt => {\n              evt.preventDefault();\n              if (status === Statuses.Visited) {\n                onStepClick(index);\n              } else {\n                onSkipToClick(index);\n              }\n            }}\n            variant=\"primary\"\n          >\n            {step.title}\n          </InternalLink>\n        ) : (\n          <span\n            className={clsx(spanClassName, analyticsSelectors['step-title'])}\n            aria-current={status === Statuses.Active ? 'step' : undefined}\n            aria-disabled={status === Statuses.Active ? undefined : 'true'}\n          >\n            {step.title}\n          </span>\n        )}\n      </div>\n    </li>\n  );\n}\n"]}
+{"version":3,"file":"wizard-navigation.js","sourceRoot":"","sources":["../../../src/wizard/wizard-navigation.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 { useUniqueId } from '@cloudscape-design/component-toolkit/internal';\n\nimport InternalBox from '../box/internal';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport InternalLink from '../link/internal';\nimport { getNavigationActionDetail } from './analytics-metadata/utils';\nimport { WizardProps } from './interfaces';\nimport WizardStepList, { getStepStatus, StepStatus, StepStatusValues } from './wizard-step-list';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface NavigationProps {\n  activeStepIndex: number;\n  farthestStepIndex: number;\n  allowSkipTo: boolean;\n  hidden: boolean;\n  i18nStrings: WizardProps.I18nStrings;\n  isLoadingNextStep: boolean;\n  onStepClick: (stepIndex: number) => void;\n  onSkipToClick: (stepIndex: number) => void;\n  steps: ReadonlyArray<WizardProps.Step>;\n}\n\ninterface NavigationStepProps {\n  i18nStrings: WizardProps.I18nStrings;\n  index: number;\n  onStepClick: (stepIndex: number) => void;\n  onSkipToClick: (stepIndex: number) => void;\n  status: StepStatus;\n  step: WizardProps.Step;\n}\n\nexport default function Navigation({\n  activeStepIndex,\n  farthestStepIndex,\n  allowSkipTo,\n  hidden,\n  i18nStrings,\n  isLoadingNextStep,\n  onStepClick,\n  onSkipToClick,\n  steps,\n}: NavigationProps) {\n  const isVisualRefresh = useVisualRefresh();\n\n  return (\n    <nav\n      className={clsx(styles.navigation, hidden && styles.hidden, isVisualRefresh && styles.refresh)}\n      aria-label={i18nStrings.navigationAriaLabel}\n    >\n      {isVisualRefresh ? (\n        <WizardStepList\n          activeStepIndex={activeStepIndex}\n          farthestStepIndex={farthestStepIndex}\n          allowSkipTo={allowSkipTo}\n          i18nStrings={i18nStrings}\n          isLoadingNextStep={isLoadingNextStep}\n          onStepClick={onStepClick}\n          onSkipToClick={onSkipToClick}\n          steps={steps}\n        />\n      ) : (\n        <ul>\n          {steps.map((step, index: number) => {\n            const status = getStepStatus(\n              index,\n              activeStepIndex,\n              farthestStepIndex,\n              isLoadingNextStep,\n              allowSkipTo,\n              steps\n            );\n            return (\n              <NavigationStepClassic\n                i18nStrings={i18nStrings}\n                index={index}\n                key={index}\n                onStepClick={onStepClick}\n                onSkipToClick={onSkipToClick}\n                status={status}\n                step={step}\n              />\n            );\n          })}\n        </ul>\n      )}\n    </nav>\n  );\n}\n\nfunction NavigationStepClassic({ i18nStrings, index, onStepClick, onSkipToClick, status, step }: NavigationStepProps) {\n  const spanClassName = clsx(\n    styles['navigation-link'],\n    status === StepStatusValues.Active ? styles['navigation-link-active'] : styles['navigation-link-disabled']\n  );\n  const optionalDescriptionId = useUniqueId('wizard-step-optional-');\n\n  return (\n    <li\n      className={styles['navigation-link-item']}\n      {...(status === StepStatusValues.Unvisited\n        ? {}\n        : getNavigationActionDetail(index, 'step', true, `.${analyticsSelectors['step-title']}`))}\n    >\n      <InternalBox\n        variant=\"small\"\n        className={styles['navigation-link-label']}\n        display=\"block\"\n        margin={{ bottom: 'xxs' }}\n      >\n        {i18nStrings.stepNumberLabel && i18nStrings.stepNumberLabel(index + 1)}\n        {step.isOptional && <i id={optionalDescriptionId}>{` - ${i18nStrings.optional}`}</i>}\n      </InternalBox>\n      <div>\n        {status === StepStatusValues.Visited || status === StepStatusValues.Next ? (\n          <InternalLink\n            className={clsx(styles['navigation-link'], analyticsSelectors['step-title'])}\n            onFollow={evt => {\n              evt.preventDefault();\n              if (status === StepStatusValues.Visited) {\n                onStepClick(index);\n              } else {\n                onSkipToClick(index);\n              }\n            }}\n            variant=\"primary\"\n            nativeAttributes={step.isOptional ? { 'aria-describedby': optionalDescriptionId } : undefined}\n          >\n            {step.title}\n          </InternalLink>\n        ) : (\n          <span\n            className={clsx(spanClassName, analyticsSelectors['step-title'])}\n            aria-current={status === StepStatusValues.Active ? 'step' : undefined}\n            aria-disabled={status === StepStatusValues.Active ? undefined : 'true'}\n            aria-describedby={step.isOptional ? optionalDescriptionId : undefined}\n          >\n            {step.title}\n          </span>\n        )}\n      </div>\n    </li>\n  );\n}\n"]}

package/lib/internal/template/wizard/wizard-step-list.d.ts

@@ -0,0 +1,27 @@
+import { WizardProps } from './interfaces';
+export declare const StepStatusValues: {
+    readonly Active: "active";
+    readonly Visited: "visited";
+    readonly Unvisited: "unvisited";
+    readonly Next: "next";
+};
+export type StepStatus = (typeof StepStatusValues)[keyof typeof StepStatusValues];
+export interface WizardStepListProps {
+    activeStepIndex: number;
+    farthestStepIndex: number;
+    allowSkipTo: boolean;
+    i18nStrings: WizardProps.I18nStrings;
+    isLoadingNextStep: boolean;
+    onStepClick: (stepIndex: number) => void;
+    onSkipToClick: (stepIndex: number) => void;
+    steps: ReadonlyArray<WizardProps.Step>;
+}
+export declare function getStepStatus(index: number, activeStepIndex: number, farthestStepIndex: number, isLoadingNextStep: boolean, allowSkipTo: boolean, steps: ReadonlyArray<{
+    isOptional?: boolean;
+}>): StepStatus;
+export declare function canSkip(fromIndex: number, toIndex: number, steps: ReadonlyArray<{
+    isOptional?: boolean;
+}>): boolean;
+export declare function handleStepNavigation(stepIndex: number, status: StepStatus, onStepClick: (index: number) => void, onSkipToClick: (index: number) => void): void;
+export default function WizardStepList({ activeStepIndex, farthestStepIndex, allowSkipTo, i18nStrings, isLoadingNextStep, onStepClick, onSkipToClick, steps, }: WizardStepListProps): JSX.Element;
+//# sourceMappingURL=wizard-step-list.d.ts.map

package/lib/internal/template/wizard/wizard-step-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wizard-step-list.d.ts","sourceRoot":"","sources":["../../../src/wizard/wizard-step-list.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAK3C,eAAO,MAAM,gBAAgB;;;;;CAKnB,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,OAAO,gBAAgB,CAAC,CAAC;AAElF,MAAM,WAAW,mBAAmB;IAClC,eAAe,EAAE,MAAM,CAAC;IACxB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC;IACrC,iBAAiB,EAAE,OAAO,CAAC;IAC3B,WAAW,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,aAAa,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,KAAK,EAAE,aAAa,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;CACxC;AAED,wBAAgB,aAAa,CAC3B,KAAK,EAAE,MAAM,EACb,eAAe,EAAE,MAAM,EACvB,iBAAiB,EAAE,MAAM,EACzB,iBAAiB,EAAE,OAAO,EAC1B,WAAW,EAAE,OAAO,EACpB,KAAK,EAAE,aAAa,CAAC;IAAE,UAAU,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,GAC7C,UAAU,CAqBZ;AAED,wBAAgB,OAAO,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,CAAC;IAAE,UAAU,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,GAAG,OAAO,CAWnH;AAED,wBAAgB,oBAAoB,CAClC,SAAS,EAAE,MAAM,EACjB,MAAM,EAAE,UAAU,EAClB,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,EACpC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,GACrC,IAAI,CAMN;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,eAAe,EACf,iBAAiB,EACjB,WAAW,EACX,WAAW,EACX,iBAAiB,EACjB,WAAW,EACX,aAAa,EACb,KAAK,GACN,EAAE,mBAAmB,eAoBrB"}

package/lib/internal/template/wizard/wizard-step-list.js

@@ -0,0 +1,105 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import clsx from 'clsx';
+import { useUniqueId } from '@cloudscape-design/component-toolkit/internal';
+import { getNavigationActionDetail } from './analytics-metadata/utils';
+import analyticsSelectors from './analytics-metadata/styles.css.js';
+import styles from './styles.css.js';
+export const StepStatusValues = {
+    Active: 'active',
+    Visited: 'visited',
+    Unvisited: 'unvisited',
+    Next: 'next',
+};
+export function getStepStatus(index, activeStepIndex, farthestStepIndex, isLoadingNextStep, allowSkipTo, steps) {
+    var _a;
+    if (activeStepIndex === index) {
+        return StepStatusValues.Active;
+    }
+    if (isLoadingNextStep) {
+        return StepStatusValues.Unvisited;
+    }
+    if (farthestStepIndex >= index) {
+        return StepStatusValues.Visited;
+    }
+    if (allowSkipTo && index > activeStepIndex) {
+        // Can we skip to this step? (all steps between current and this one are optional)
+        if (canSkip(activeStepIndex + 1, index, steps)) {
+            return StepStatusValues.Next;
+        }
+        // Immediate next step is also navigable if it's optional
+        if (index === activeStepIndex + 1 && ((_a = steps[index]) === null || _a === void 0 ? void 0 : _a.isOptional)) {
+            return StepStatusValues.Next;
+        }
+    }
+    return StepStatusValues.Unvisited;
+}
+export function canSkip(fromIndex, toIndex, steps) {
+    // Can't skip if there are no steps to skip over
+    if (fromIndex >= toIndex) {
+        return false;
+    }
+    for (let i = fromIndex; i < toIndex; i++) {
+        if (!steps[i].isOptional) {
+            return false;
+        }
+    }
+    return true;
+}
+export function handleStepNavigation(stepIndex, status, onStepClick, onSkipToClick) {
+    if (status === StepStatusValues.Visited) {
+        onStepClick(stepIndex);
+    }
+    else if (status === StepStatusValues.Next) {
+        onSkipToClick(stepIndex);
+    }
+}
+export default function WizardStepList({ activeStepIndex, farthestStepIndex, allowSkipTo, i18nStrings, isLoadingNextStep, onStepClick, onSkipToClick, steps, }) {
+    return (React.createElement("ul", { className: styles.refresh }, steps.map((step, index) => (React.createElement(WizardStepListItem, { key: index, index: index, step: step, activeStepIndex: activeStepIndex, farthestStepIndex: farthestStepIndex, allowSkipTo: allowSkipTo, i18nStrings: i18nStrings, isLoadingNextStep: isLoadingNextStep, onStepClick: onStepClick, onSkipToClick: onSkipToClick, steps: steps })))));
+}
+function WizardStepListItem({ index, step, activeStepIndex, farthestStepIndex, allowSkipTo, i18nStrings, isLoadingNextStep, onStepClick, onSkipToClick, steps, }) {
+    var _a, _b;
+    const status = getStepStatus(index, activeStepIndex, farthestStepIndex, isLoadingNextStep, allowSkipTo, steps);
+    const isClickable = status === StepStatusValues.Visited || status === StepStatusValues.Next;
+    const stepLabel = (_a = i18nStrings.stepNumberLabel) === null || _a === void 0 ? void 0 : _a.call(i18nStrings, index + 1);
+    const fullStepLabel = `${stepLabel}: ${step.title}`;
+    const optionalDescriptionId = useUniqueId('wizard-step-optional-');
+    const state = {
+        active: 'active',
+        unvisited: 'disabled',
+        visited: 'enabled',
+        next: 'enabled',
+    }[status];
+    const handleInteraction = () => handleStepNavigation(index, status, onStepClick, onSkipToClick);
+    return (React.createElement("li", { className: clsx(styles[`${state}`], styles['navigation-link-item']) },
+        React.createElement("hr", null),
+        React.createElement("span", { className: clsx(styles.number, styles['navigation-link-label']) }, (_b = i18nStrings.stepNumberLabel) === null || _b === void 0 ? void 0 :
+            _b.call(i18nStrings, index + 1),
+            step.isOptional && React.createElement("i", { id: optionalDescriptionId }, ` - ${i18nStrings.optional}`)),
+        React.createElement("a", { className: clsx(styles['navigation-link'], {
+                [styles['navigation-link-active']]: status === StepStatusValues.Active,
+                [styles['navigation-link-disabled']]: status === StepStatusValues.Unvisited,
+            }), "aria-current": status === StepStatusValues.Active ? 'step' : undefined, "aria-disabled": status === StepStatusValues.Unvisited ? 'true' : undefined, onClick: event => {
+                event.preventDefault();
+                handleInteraction();
+            }, onKeyDown: event => {
+                if (event.key === ' ' || event.key === 'Enter') {
+                    event.preventDefault();
+                }
+                // Enter activates the button on key down instead of key up.
+                if (event.key === 'Enter') {
+                    handleInteraction();
+                }
+            }, onKeyUp: event => {
+                // Emulate button behavior, which also fires on space.
+                if (event.key === ' ') {
+                    handleInteraction();
+                }
+            }, role: "button", tabIndex: isClickable ? 0 : undefined, "aria-label": fullStepLabel, "aria-describedby": step.isOptional ? optionalDescriptionId : undefined, ...(status === StepStatusValues.Unvisited
+                ? {}
+                : getNavigationActionDetail(index, 'step', true, `.${analyticsSelectors['step-title']}`)) },
+            React.createElement("div", { className: styles.circle }),
+            React.createElement("span", { className: clsx(styles.title, analyticsSelectors['step-title']) }, step.title))));
+}
+//# sourceMappingURL=wizard-step-list.js.map

package/lib/internal/template/wizard/wizard-step-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wizard-step-list.js","sourceRoot":"","sources":["../../../src/wizard/wizard-step-list.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 { useUniqueId } from '@cloudscape-design/component-toolkit/internal';\n\nimport { getNavigationActionDetail } from './analytics-metadata/utils';\nimport { WizardProps } from './interfaces';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nexport const StepStatusValues = {\n  Active: 'active',\n  Visited: 'visited',\n  Unvisited: 'unvisited',\n  Next: 'next',\n} as const;\n\nexport type StepStatus = (typeof StepStatusValues)[keyof typeof StepStatusValues];\n\nexport interface WizardStepListProps {\n  activeStepIndex: number;\n  farthestStepIndex: number;\n  allowSkipTo: boolean;\n  i18nStrings: WizardProps.I18nStrings;\n  isLoadingNextStep: boolean;\n  onStepClick: (stepIndex: number) => void;\n  onSkipToClick: (stepIndex: number) => void;\n  steps: ReadonlyArray<WizardProps.Step>;\n}\n\nexport function getStepStatus(\n  index: number,\n  activeStepIndex: number,\n  farthestStepIndex: number,\n  isLoadingNextStep: boolean,\n  allowSkipTo: boolean,\n  steps: ReadonlyArray<{ isOptional?: boolean }>\n): StepStatus {\n  if (activeStepIndex === index) {\n    return StepStatusValues.Active;\n  }\n  if (isLoadingNextStep) {\n    return StepStatusValues.Unvisited;\n  }\n  if (farthestStepIndex >= index) {\n    return StepStatusValues.Visited;\n  }\n  if (allowSkipTo && index > activeStepIndex) {\n    // Can we skip to this step? (all steps between current and this one are optional)\n    if (canSkip(activeStepIndex + 1, index, steps)) {\n      return StepStatusValues.Next;\n    }\n    // Immediate next step is also navigable if it's optional\n    if (index === activeStepIndex + 1 && steps[index]?.isOptional) {\n      return StepStatusValues.Next;\n    }\n  }\n  return StepStatusValues.Unvisited;\n}\n\nexport function canSkip(fromIndex: number, toIndex: number, steps: ReadonlyArray<{ isOptional?: boolean }>): boolean {\n  // Can't skip if there are no steps to skip over\n  if (fromIndex >= toIndex) {\n    return false;\n  }\n  for (let i = fromIndex; i < toIndex; i++) {\n    if (!steps[i].isOptional) {\n      return false;\n    }\n  }\n  return true;\n}\n\nexport function handleStepNavigation(\n  stepIndex: number,\n  status: StepStatus,\n  onStepClick: (index: number) => void,\n  onSkipToClick: (index: number) => void\n): void {\n  if (status === StepStatusValues.Visited) {\n    onStepClick(stepIndex);\n  } else if (status === StepStatusValues.Next) {\n    onSkipToClick(stepIndex);\n  }\n}\n\nexport default function WizardStepList({\n  activeStepIndex,\n  farthestStepIndex,\n  allowSkipTo,\n  i18nStrings,\n  isLoadingNextStep,\n  onStepClick,\n  onSkipToClick,\n  steps,\n}: WizardStepListProps) {\n  return (\n    <ul className={styles.refresh}>\n      {steps.map((step, index) => (\n        <WizardStepListItem\n          key={index}\n          index={index}\n          step={step}\n          activeStepIndex={activeStepIndex}\n          farthestStepIndex={farthestStepIndex}\n          allowSkipTo={allowSkipTo}\n          i18nStrings={i18nStrings}\n          isLoadingNextStep={isLoadingNextStep}\n          onStepClick={onStepClick}\n          onSkipToClick={onSkipToClick}\n          steps={steps}\n        />\n      ))}\n    </ul>\n  );\n}\n\ninterface WizardStepListItemProps {\n  index: number;\n  step: WizardProps.Step;\n  activeStepIndex: number;\n  farthestStepIndex: number;\n  allowSkipTo: boolean;\n  i18nStrings: WizardProps.I18nStrings;\n  isLoadingNextStep: boolean;\n  onStepClick: (stepIndex: number) => void;\n  onSkipToClick: (stepIndex: number) => void;\n  steps: ReadonlyArray<WizardProps.Step>;\n}\n\nfunction WizardStepListItem({\n  index,\n  step,\n  activeStepIndex,\n  farthestStepIndex,\n  allowSkipTo,\n  i18nStrings,\n  isLoadingNextStep,\n  onStepClick,\n  onSkipToClick,\n  steps,\n}: WizardStepListItemProps) {\n  const status = getStepStatus(index, activeStepIndex, farthestStepIndex, isLoadingNextStep, allowSkipTo, steps);\n  const isClickable = status === StepStatusValues.Visited || status === StepStatusValues.Next;\n  const stepLabel = i18nStrings.stepNumberLabel?.(index + 1);\n  const fullStepLabel = `${stepLabel}: ${step.title}`;\n  const optionalDescriptionId = useUniqueId('wizard-step-optional-');\n  const state = {\n    active: 'active',\n    unvisited: 'disabled',\n    visited: 'enabled',\n    next: 'enabled',\n  }[status];\n\n  const handleInteraction = () => handleStepNavigation(index, status, onStepClick, onSkipToClick);\n\n  return (\n    <li className={clsx(styles[`${state}`], styles['navigation-link-item'])}>\n      <hr />\n\n      <span className={clsx(styles.number, styles['navigation-link-label'])}>\n        {i18nStrings.stepNumberLabel?.(index + 1)}\n        {step.isOptional && <i id={optionalDescriptionId}>{` - ${i18nStrings.optional}`}</i>}\n      </span>\n\n      <a\n        className={clsx(styles['navigation-link'], {\n          [styles['navigation-link-active']]: status === StepStatusValues.Active,\n          [styles['navigation-link-disabled']]: status === StepStatusValues.Unvisited,\n        })}\n        aria-current={status === StepStatusValues.Active ? 'step' : undefined}\n        aria-disabled={status === StepStatusValues.Unvisited ? 'true' : undefined}\n        onClick={event => {\n          event.preventDefault();\n          handleInteraction();\n        }}\n        onKeyDown={event => {\n          if (event.key === ' ' || event.key === 'Enter') {\n            event.preventDefault();\n          }\n          // Enter activates the button on key down instead of key up.\n          if (event.key === 'Enter') {\n            handleInteraction();\n          }\n        }}\n        onKeyUp={event => {\n          // Emulate button behavior, which also fires on space.\n          if (event.key === ' ') {\n            handleInteraction();\n          }\n        }}\n        role=\"button\"\n        tabIndex={isClickable ? 0 : undefined}\n        aria-label={fullStepLabel}\n        aria-describedby={step.isOptional ? optionalDescriptionId : undefined}\n        {...(status === StepStatusValues.Unvisited\n          ? {}\n          : getNavigationActionDetail(index, 'step', true, `.${analyticsSelectors['step-title']}`))}\n      >\n        <div className={styles.circle} />\n\n        <span className={clsx(styles.title, analyticsSelectors['step-title'])}>{step.title}</span>\n      </a>\n    </li>\n  );\n}\n"]}

package/lib/internal/template/wizard/wizard-step-navigation-expandable.d.ts

@@ -0,0 +1,16 @@
+import { WizardProps } from './interfaces';
+interface WizardStepNavigationExpandableProps {
+    activeStepIndex: number;
+    farthestStepIndex: number;
+    allowSkipTo: boolean;
+    i18nStrings: WizardProps.I18nStrings;
+    isLoadingNextStep: boolean;
+    onStepClick: (stepIndex: number) => void;
+    onSkipToClick: (stepIndex: number) => void;
+    steps: ReadonlyArray<WizardProps.Step>;
+    expanded: boolean;
+    onExpandChange: (expanded: boolean) => void;
+}
+export default function WizardStepNavigationExpandable({ activeStepIndex, farthestStepIndex, allowSkipTo, i18nStrings, isLoadingNextStep, onStepClick, onSkipToClick, steps, expanded, onExpandChange, }: WizardStepNavigationExpandableProps): JSX.Element;
+export {};
+//# sourceMappingURL=wizard-step-navigation-expandable.d.ts.map

package/lib/internal/template/wizard/wizard-step-navigation-expandable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wizard-step-navigation-expandable.d.ts","sourceRoot":"","sources":["../../../src/wizard/wizard-step-navigation-expandable.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAK3C,UAAU,mCAAmC;IAC3C,eAAe,EAAE,MAAM,CAAC;IACxB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC;IACrC,iBAAiB,EAAE,OAAO,CAAC;IAC3B,WAAW,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,aAAa,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,KAAK,EAAE,aAAa,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IACvC,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CAC7C;AAED,MAAM,CAAC,OAAO,UAAU,8BAA8B,CAAC,EACrD,eAAe,EACf,iBAAiB,EACjB,WAAW,EACX,WAAW,EACX,iBAAiB,EACjB,WAAW,EACX,aAAa,EACb,KAAK,EACL,QAAQ,EACR,cAAc,GACf,EAAE,mCAAmC,eA+BrC"}

package/lib/internal/template/wizard/wizard-step-navigation-expandable.js

@@ -0,0 +1,18 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import clsx from 'clsx';
+import InternalExpandableSection from '../expandable-section/internal';
+import WizardStepList from './wizard-step-list';
+import styles from './styles.css.js';
+export default function WizardStepNavigationExpandable({ activeStepIndex, farthestStepIndex, allowSkipTo, i18nStrings, isLoadingNextStep, onStepClick, onSkipToClick, steps, expanded, onExpandChange, }) {
+    var _a, _b;
+    const collapsedStepsLabel = (_a = i18nStrings.collapsedStepsLabel) === null || _a === void 0 ? void 0 : _a.call(i18nStrings, activeStepIndex + 1, steps.length);
+    const headerAriaLabel = collapsedStepsLabel
+        ? `${collapsedStepsLabel} - ${(_b = i18nStrings.navigationAriaLabel) !== null && _b !== void 0 ? _b : 'Steps'}`
+        : undefined;
+    return (React.createElement(InternalExpandableSection, { variant: "footer", headerText: collapsedStepsLabel, headerAriaLabel: headerAriaLabel, expanded: expanded, onChange: ({ detail }) => onExpandChange(detail.expanded) },
+        React.createElement("nav", { className: clsx(styles.navigation, styles.refresh, styles['collapsed-steps-navigation']), "aria-label": i18nStrings.navigationAriaLabel },
+            React.createElement(WizardStepList, { activeStepIndex: activeStepIndex, farthestStepIndex: farthestStepIndex, allowSkipTo: allowSkipTo, i18nStrings: i18nStrings, isLoadingNextStep: isLoadingNextStep, onStepClick: onStepClick, onSkipToClick: onSkipToClick, steps: steps }))));
+}
+//# sourceMappingURL=wizard-step-navigation-expandable.js.map

package/lib/internal/template/wizard/wizard-step-navigation-expandable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wizard-step-navigation-expandable.js","sourceRoot":"","sources":["../../../src/wizard/wizard-step-navigation-expandable.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,yBAAyB,MAAM,gCAAgC,CAAC;AAEvE,OAAO,cAAc,MAAM,oBAAoB,CAAC;AAEhD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAerC,MAAM,CAAC,OAAO,UAAU,8BAA8B,CAAC,EACrD,eAAe,EACf,iBAAiB,EACjB,WAAW,EACX,WAAW,EACX,iBAAiB,EACjB,WAAW,EACX,aAAa,EACb,KAAK,EACL,QAAQ,EACR,cAAc,GACsB;;IACpC,MAAM,mBAAmB,GAAG,MAAA,WAAW,CAAC,mBAAmB,4DAAG,eAAe,GAAG,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACjG,MAAM,eAAe,GAAG,mBAAmB;QACzC,CAAC,CAAC,GAAG,mBAAmB,MAAM,MAAA,WAAW,CAAC,mBAAmB,mCAAI,OAAO,EAAE;QAC1E,CAAC,CAAC,SAAS,CAAC;IAEd,OAAO,CACL,oBAAC,yBAAyB,IACxB,OAAO,EAAC,QAAQ,EAChB,UAAU,EAAE,mBAAmB,EAC/B,eAAe,EAAE,eAAe,EAChC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,cAAc,CAAC,MAAM,CAAC,QAAQ,CAAC;QAEzD,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,4BAA4B,CAAC,CAAC,gBAC5E,WAAW,CAAC,mBAAmB;YAE3C,oBAAC,cAAc,IACb,eAAe,EAAE,eAAe,EAChC,iBAAiB,EAAE,iBAAiB,EACpC,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,WAAW,EACxB,iBAAiB,EAAE,iBAAiB,EACpC,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,KAAK,GACZ,CACE,CACoB,CAC7B,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 InternalExpandableSection from '../expandable-section/internal';\nimport { WizardProps } from './interfaces';\nimport WizardStepList from './wizard-step-list';\n\nimport styles from './styles.css.js';\n\ninterface WizardStepNavigationExpandableProps {\n  activeStepIndex: number;\n  farthestStepIndex: number;\n  allowSkipTo: boolean;\n  i18nStrings: WizardProps.I18nStrings;\n  isLoadingNextStep: boolean;\n  onStepClick: (stepIndex: number) => void;\n  onSkipToClick: (stepIndex: number) => void;\n  steps: ReadonlyArray<WizardProps.Step>;\n  expanded: boolean;\n  onExpandChange: (expanded: boolean) => void;\n}\n\nexport default function WizardStepNavigationExpandable({\n  activeStepIndex,\n  farthestStepIndex,\n  allowSkipTo,\n  i18nStrings,\n  isLoadingNextStep,\n  onStepClick,\n  onSkipToClick,\n  steps,\n  expanded,\n  onExpandChange,\n}: WizardStepNavigationExpandableProps) {\n  const collapsedStepsLabel = i18nStrings.collapsedStepsLabel?.(activeStepIndex + 1, steps.length);\n  const headerAriaLabel = collapsedStepsLabel\n    ? `${collapsedStepsLabel} - ${i18nStrings.navigationAriaLabel ?? 'Steps'}`\n    : undefined;\n\n  return (\n    <InternalExpandableSection\n      variant=\"footer\"\n      headerText={collapsedStepsLabel}\n      headerAriaLabel={headerAriaLabel}\n      expanded={expanded}\n      onChange={({ detail }) => onExpandChange(detail.expanded)}\n    >\n      <nav\n        className={clsx(styles.navigation, styles.refresh, styles['collapsed-steps-navigation'])}\n        aria-label={i18nStrings.navigationAriaLabel}\n      >\n        <WizardStepList\n          activeStepIndex={activeStepIndex}\n          farthestStepIndex={farthestStepIndex}\n          allowSkipTo={allowSkipTo}\n          i18nStrings={i18nStrings}\n          isLoadingNextStep={isLoadingNextStep}\n          onStepClick={onStepClick}\n          onSkipToClick={onSkipToClick}\n          steps={steps}\n        />\n      </nav>\n    </InternalExpandableSection>\n  );\n}\n"]}

package/package.json

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