@cloudscape-design/components-themeable 3.0.299 → 3.0.301

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

@@ -1,85 +1,19 @@
 import { __rest } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useEffect, useRef } from 'react';
-import clsx from 'clsx';
-import { getBaseProps } from '../internal/base-component';
-import { fireNonCancelableEvent } from '../internal/events';
-import { warnOnce } from '../internal/logging';
-import { useContainerBreakpoints } from '../internal/hooks/container-queries';
-import { useControllable } from '../internal/hooks/use-controllable';
-import WizardForm from './wizard-form';
-import WizardNavigation from './wizard-navigation';
-import styles from './styles.css.js';
+import React from 'react';
+import { getExternalProps } from '../internal/utils/external-props';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
 import useBaseComponent from '../internal/hooks/use-base-component';
-import { useMergeRefs } from '../internal/hooks/use-merge-refs';
-import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
-import { trackStartStep, trackNavigate, trackSubmit, trackStartWizard, trackEndWizard, trackCancel, } from './internal/analytics';
-import { useInternalI18n } from '../internal/i18n/context';
-export default function Wizard(_a) {
-    var { steps, activeStepIndex: controlledActiveStepIndex, isLoadingNextStep = false, allowSkipTo = false, secondaryActions, onCancel, onSubmit, onNavigate } = _a, rest = __rest(_a, ["steps", "activeStepIndex", "isLoadingNextStep", "allowSkipTo", "secondaryActions", "onCancel", "onSubmit", "onNavigate"]);
-    const { __internalRootRef } = useBaseComponent('Wizard');
-    const baseProps = getBaseProps(rest);
-    const funnelId = baseProps.id;
-    const [breakpoint, breakpointsRef] = useContainerBreakpoints(['xs']);
-    const ref = useMergeRefs(breakpointsRef, __internalRootRef);
-    const smallContainer = breakpoint === 'default';
-    const [activeStepIndex, setActiveStepIndex] = useControllable(controlledActiveStepIndex, onNavigate, 0, {
-        componentName: 'Wizard',
-        controlledProp: 'activeStepIndex',
-        changeHandler: 'onNavigate',
-    });
-    const actualActiveStepIndex = activeStepIndex ? Math.min(activeStepIndex, steps.length - 1) : 0;
-    const farthestStepIndex = useRef(actualActiveStepIndex);
-    farthestStepIndex.current = Math.max(farthestStepIndex.current, actualActiveStepIndex);
-    const isVisualRefresh = useVisualRefresh();
-    const isLastStep = actualActiveStepIndex >= steps.length - 1;
-    const navigationEvent = (requestedStepIndex, reason) => {
-        trackNavigate(actualActiveStepIndex, requestedStepIndex, reason, funnelId);
-        setActiveStepIndex(requestedStepIndex);
-        fireNonCancelableEvent(onNavigate, { requestedStepIndex, reason });
-    };
-    const onStepClick = (stepIndex) => navigationEvent(stepIndex, 'step');
-    const onSkipToClick = (stepIndex) => navigationEvent(stepIndex, 'skip');
-    const onCancelClick = () => {
-        trackCancel(actualActiveStepIndex, funnelId);
-        fireNonCancelableEvent(onCancel);
-    };
-    const onPreviousClick = () => navigationEvent(actualActiveStepIndex - 1, 'previous');
-    const onPrimaryClick = () => {
-        if (isLastStep) {
-            trackSubmit(actualActiveStepIndex, funnelId);
-            fireNonCancelableEvent(onSubmit);
-        }
-        else {
-            navigationEvent(actualActiveStepIndex + 1, 'next');
-        }
-    };
-    const i18n = useInternalI18n('wizard');
-    const i18nStrings = Object.assign(Object.assign({}, rest.i18nStrings), { stepNumberLabel: i18n('i18nStrings.stepNumberLabel', rest.i18nStrings.stepNumberLabel), collapsedStepsLabel: i18n('i18nStrings.collapsedStepsLabel', rest.i18nStrings.collapsedStepsLabel), cancelButton: i18n('i18nStrings.cancelButton', rest.i18nStrings.cancelButton), previousButton: i18n('i18nStrings.previousButton', rest.i18nStrings.previousButton), nextButton: i18n('i18nStrings.nextButton', rest.i18nStrings.nextButton), optional: i18n('i18nStrings.optional', rest.i18nStrings.optional) });
-    if (activeStepIndex && activeStepIndex >= steps.length) {
-        warnOnce('Wizard', `You have set \`activeStepIndex\` to ${activeStepIndex} but you have provided only ${steps.length} steps. Its value is ignored and the component uses ${steps.length - 1} instead.`);
-    }
-    if (allowSkipTo && !i18nStrings.skipToButtonLabel) {
-        warnOnce('Wizard', `You have set \`allowSkipTo\` but you have not provided \`i18nStrings.skipToButtonLabel\`. The skip-to button will not be rendered.`);
-    }
-    useEffect(() => {
-        trackStartWizard();
-        return () => {
-            trackEndWizard(funnelId);
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps -- this is intentional
-    }, []);
-    useEffect(() => {
-        trackStartStep(actualActiveStepIndex, funnelId);
-    }, [actualActiveStepIndex, funnelId]);
-    return (React.createElement("div", Object.assign({}, baseProps, { className: clsx(styles.root, baseProps.className), ref: ref }),
-        React.createElement("div", { className: clsx(styles.wizard, isVisualRefresh && styles.refresh, smallContainer && styles['small-container']) },
-            React.createElement(WizardNavigation, { activeStepIndex: actualActiveStepIndex, farthestStepIndex: farthestStepIndex.current, allowSkipTo: allowSkipTo, hidden: smallContainer, i18nStrings: i18nStrings, isVisualRefresh: isVisualRefresh, isLoadingNextStep: isLoadingNextStep, onStepClick: onStepClick, onSkipToClick: onSkipToClick, steps: steps }),
-            React.createElement("div", { className: clsx(styles.form, isVisualRefresh && styles.refresh, smallContainer && styles['small-container']) },
-                isVisualRefresh && React.createElement("div", { className: clsx(styles.background, 'awsui-context-content-header') }),
-                React.createElement(WizardForm, { steps: steps, isVisualRefresh: isVisualRefresh, showCollapsedSteps: smallContainer, i18nStrings: i18nStrings, activeStepIndex: actualActiveStepIndex, isPrimaryLoading: isLoadingNextStep, allowSkipTo: allowSkipTo, secondaryActions: secondaryActions, onCancelClick: onCancelClick, onPreviousClick: onPreviousClick, onSkipToClick: onSkipToClick, onPrimaryClick: onPrimaryClick })))));
+import { AnalyticsFunnel } from '../internal/analytics/components/analytics-funnel';
+import InternalWizard from './internal';
+function Wizard(_a) {
+    var { isLoadingNextStep = false, allowSkipTo = false } = _a, props = __rest(_a, ["isLoadingNextStep", "allowSkipTo"]);
+    const baseComponentProps = useBaseComponent('Wizard');
+    const externalProps = getExternalProps(props);
+    return (React.createElement(AnalyticsFunnel, { funnelType: "multi-page", optionalStepNumbers: props.steps.map((step, index) => (step.isOptional ? index : -1)).filter(step => step !== -1), totalFunnelSteps: props.steps.length },
+        React.createElement(InternalWizard, Object.assign({ isLoadingNextStep: isLoadingNextStep, allowSkipTo: allowSkipTo }, externalProps, baseComponentProps))));
 }
 applyDisplayName(Wizard, 'Wizard');
+export default Wizard;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["wizard/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAC9E,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AACrE,OAAO,UAAU,MAAM,eAAe,CAAC;AACvC,OAAO,gBAAgB,MAAM,qBAAqB,CAAC;AAEnD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAErE,OAAO,EACL,cAAc,EACd,aAAa,EACb,WAAW,EACX,gBAAgB,EAChB,cAAc,EACd,WAAW,GACZ,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAI3D,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAUjB;QAViB,EAC7B,KAAK,EACL,eAAe,EAAE,yBAAyB,EAC1C,iBAAiB,GAAG,KAAK,EACzB,WAAW,GAAG,KAAK,EACnB,gBAAgB,EAChB,QAAQ,EACR,QAAQ,EACR,UAAU,OAEE,EADT,IAAI,cATsB,0HAU9B,CADQ;IAEP,MAAM,EAAE,iBAAiB,EAAE,GAAG,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACzD,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IACrC,MAAM,QAAQ,GAAG,SAAS,CAAC,EAAE,CAAC;IAE9B,MAAM,CAAC,UAAU,EAAE,cAAc,CAAC,GAAG,uBAAuB,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;IACrE,MAAM,GAAG,GAAG,YAAY,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;IAE5D,MAAM,cAAc,GAAG,UAAU,KAAK,SAAS,CAAC;IAEhD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,eAAe,CAAC,yBAAyB,EAAE,UAAU,EAAE,CAAC,EAAE;QACtG,aAAa,EAAE,QAAQ;QACvB,cAAc,EAAE,iBAAiB;QACjC,aAAa,EAAE,YAAY;KAC5B,CAAC,CAAC;IACH,MAAM,qBAAqB,GAAG,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,eAAe,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAEhG,MAAM,iBAAiB,GAAG,MAAM,CAAS,qBAAqB,CAAC,CAAC;IAChE,iBAAiB,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,OAAO,EAAE,qBAAqB,CAAC,CAAC;IAEvF,MAAM,eAAe,GAAG,gBAAgB,EAAE,CAAC;IAC3C,MAAM,UAAU,GAAG,qBAAqB,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;IAE7D,MAAM,eAAe,GAAG,CAAC,kBAA0B,EAAE,MAAoC,EAAE,EAAE;QAC3F,aAAa,CAAC,qBAAqB,EAAE,kBAAkB,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC;QAC3E,kBAAkB,CAAC,kBAAkB,CAAC,CAAC;QACvC,sBAAsB,CAAC,UAAU,EAAE,EAAE,kBAAkB,EAAE,MAAM,EAAE,CAAC,CAAC;IACrE,CAAC,CAAC;IACF,MAAM,WAAW,GAAG,CAAC,SAAiB,EAAE,EAAE,CAAC,eAAe,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;IAC9E,MAAM,aAAa,GAAG,CAAC,SAAiB,EAAE,EAAE,CAAC,eAAe,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;IAChF,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,WAAW,CAAC,qBAAqB,EAAE,QAAQ,CAAC,CAAC;QAC7C,sBAAsB,CAAC,QAAQ,CAAC,CAAC;IACnC,CAAC,CAAC;IACF,MAAM,eAAe,GAAG,GAAG,EAAE,CAAC,eAAe,CAAC,qBAAqB,GAAG,CAAC,EAAE,UAAU,CAAC,CAAC;IACrF,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,IAAI,UAAU,EAAE;YACd,WAAW,CAAC,qBAAqB,EAAE,QAAQ,CAAC,CAAC;YAC7C,sBAAsB,CAAC,QAAQ,CAAC,CAAC;SAClC;aAAM;YACL,eAAe,CAAC,qBAAqB,GAAG,CAAC,EAAE,MAAM,CAAC,CAAC;SACpD;IACH,CAAC,CAAC;IAEF,MAAM,IAAI,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;IACvC,MAAM,WAAW,mCACZ,IAAI,CAAC,WAAW,KACnB,eAAe,EAAE,IAAI,CAAC,6BAA6B,EAAE,IAAI,CAAC,WAAW,CAAC,eAAe,CAAC,EACtF,mBAAmB,EAAE,IAAI,CAAC,iCAAiC,EAAE,IAAI,CAAC,WAAW,CAAC,mBAAmB,CAAC,EAClG,YAAY,EAAE,IAAI,CAAC,0BAA0B,EAAE,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,EAC7E,cAAc,EAAE,IAAI,CAAC,4BAA4B,EAAE,IAAI,CAAC,WAAW,CAAC,cAAc,CAAC,EACnF,UAAU,EAAE,IAAI,CAAC,wBAAwB,EAAE,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,EACvE,QAAQ,EAAE,IAAI,CAAC,sBAAsB,EAAE,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,GAClE,CAAC;IAEF,IAAI,eAAe,IAAI,eAAe,IAAI,KAAK,CAAC,MAAM,EAAE;QACtD,QAAQ,CACN,QAAQ,EACR,uCAAuC,eAAe,+BACpD,KAAK,CAAC,MACR,uDAAuD,KAAK,CAAC,MAAM,GAAG,CAAC,WAAW,CACnF,CAAC;KACH;IAED,IAAI,WAAW,IAAI,CAAC,WAAW,CAAC,iBAAiB,EAAE;QACjD,QAAQ,CACN,QAAQ,EACR,oIAAoI,CACrI,CAAC;KACH;IAED,SAAS,CAAC,GAAG,EAAE;QACb,gBAAgB,EAAE,CAAC;QAEnB,OAAO,GAAG,EAAE;YACV,cAAc,CAAC,QAAQ,CAAC,CAAC;QAC3B,CAAC,CAAC;QACF,8EAA8E;IAChF,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,cAAc,CAAC,qBAAqB,EAAE,QAAQ,CAAC,CAAC;IAClD,CAAC,EAAE,CAAC,qBAAqB,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtC,OAAO,CACL,6CAAS,SAAS,IAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,SAAS,CAAC,EAAE,GAAG,EAAE,GAAG;QAC7E,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,eAAe,IAAI,MAAM,CAAC,OAAO,EAAE,cAAc,IAAI,MAAM,CAAC,iBAAiB,CAAC,CAAC;YAE9G,oBAAC,gBAAgB,IACf,eAAe,EAAE,qBAAqB,EACtC,iBAAiB,EAAE,iBAAiB,CAAC,OAAO,EAC5C,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,cAAc,EACtB,WAAW,EAAE,WAAW,EACxB,eAAe,EAAE,eAAe,EAChC,iBAAiB,EAAE,iBAAiB,EACpC,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,KAAK,GACZ;YACF,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,eAAe,IAAI,MAAM,CAAC,OAAO,EAAE,cAAc,IAAI,MAAM,CAAC,iBAAiB,CAAC,CAAC;gBAE3G,eAAe,IAAI,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,8BAA8B,CAAC,GAAI;gBAE/F,oBAAC,UAAU,IACT,KAAK,EAAE,KAAK,EACZ,eAAe,EAAE,eAAe,EAChC,kBAAkB,EAAE,cAAc,EAClC,WAAW,EAAE,WAAW,EACxB,eAAe,EAAE,qBAAqB,EACtC,gBAAgB,EAAE,iBAAiB,EACnC,WAAW,EAAE,WAAW,EACxB,gBAAgB,EAAE,gBAAgB,EAClC,aAAa,EAAE,aAAa,EAC5B,eAAe,EAAE,eAAe,EAChC,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,GAC9B,CACE,CACF,CACF,CACP,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\nimport { getBaseProps } from '../internal/base-component';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { warnOnce } from '../internal/logging';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { useControllable } from '../internal/hooks/use-controllable';\nimport WizardForm from './wizard-form';\nimport WizardNavigation from './wizard-navigation';\nimport { WizardProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\n\nimport {\n  trackStartStep,\n  trackNavigate,\n  trackSubmit,\n  trackStartWizard,\n  trackEndWizard,\n  trackCancel,\n} from './internal/analytics';\nimport { useInternalI18n } from '../internal/i18n/context';\n\nexport { WizardProps };\n\nexport default function Wizard({\n  steps,\n  activeStepIndex: controlledActiveStepIndex,\n  isLoadingNextStep = false,\n  allowSkipTo = false,\n  secondaryActions,\n  onCancel,\n  onSubmit,\n  onNavigate,\n  ...rest\n}: WizardProps) {\n  const { __internalRootRef } = useBaseComponent('Wizard');\n  const baseProps = getBaseProps(rest);\n  const funnelId = baseProps.id;\n\n  const [breakpoint, breakpointsRef] = useContainerBreakpoints(['xs']);\n  const ref = useMergeRefs(breakpointsRef, __internalRootRef);\n\n  const smallContainer = breakpoint === 'default';\n\n  const [activeStepIndex, setActiveStepIndex] = useControllable(controlledActiveStepIndex, onNavigate, 0, {\n    componentName: 'Wizard',\n    controlledProp: 'activeStepIndex',\n    changeHandler: 'onNavigate',\n  });\n  const actualActiveStepIndex = activeStepIndex ? Math.min(activeStepIndex, steps.length - 1) : 0;\n\n  const farthestStepIndex = useRef<number>(actualActiveStepIndex);\n  farthestStepIndex.current = Math.max(farthestStepIndex.current, actualActiveStepIndex);\n\n  const isVisualRefresh = useVisualRefresh();\n  const isLastStep = actualActiveStepIndex >= steps.length - 1;\n\n  const navigationEvent = (requestedStepIndex: number, reason: WizardProps.NavigationReason) => {\n    trackNavigate(actualActiveStepIndex, requestedStepIndex, reason, funnelId);\n    setActiveStepIndex(requestedStepIndex);\n    fireNonCancelableEvent(onNavigate, { requestedStepIndex, reason });\n  };\n  const onStepClick = (stepIndex: number) => navigationEvent(stepIndex, 'step');\n  const onSkipToClick = (stepIndex: number) => navigationEvent(stepIndex, 'skip');\n  const onCancelClick = () => {\n    trackCancel(actualActiveStepIndex, funnelId);\n    fireNonCancelableEvent(onCancel);\n  };\n  const onPreviousClick = () => navigationEvent(actualActiveStepIndex - 1, 'previous');\n  const onPrimaryClick = () => {\n    if (isLastStep) {\n      trackSubmit(actualActiveStepIndex, funnelId);\n      fireNonCancelableEvent(onSubmit);\n    } else {\n      navigationEvent(actualActiveStepIndex + 1, 'next');\n    }\n  };\n\n  const i18n = useInternalI18n('wizard');\n  const i18nStrings: WizardProps.I18nStrings = {\n    ...rest.i18nStrings,\n    stepNumberLabel: i18n('i18nStrings.stepNumberLabel', rest.i18nStrings.stepNumberLabel),\n    collapsedStepsLabel: i18n('i18nStrings.collapsedStepsLabel', rest.i18nStrings.collapsedStepsLabel),\n    cancelButton: i18n('i18nStrings.cancelButton', rest.i18nStrings.cancelButton),\n    previousButton: i18n('i18nStrings.previousButton', rest.i18nStrings.previousButton),\n    nextButton: i18n('i18nStrings.nextButton', rest.i18nStrings.nextButton),\n    optional: i18n('i18nStrings.optional', rest.i18nStrings.optional),\n  };\n\n  if (activeStepIndex && activeStepIndex >= steps.length) {\n    warnOnce(\n      'Wizard',\n      `You have set \\`activeStepIndex\\` to ${activeStepIndex} but you have provided only ${\n        steps.length\n      } steps. Its value is ignored and the component uses ${steps.length - 1} instead.`\n    );\n  }\n\n  if (allowSkipTo && !i18nStrings.skipToButtonLabel) {\n    warnOnce(\n      'Wizard',\n      `You have set \\`allowSkipTo\\` but you have not provided \\`i18nStrings.skipToButtonLabel\\`. The skip-to button will not be rendered.`\n    );\n  }\n\n  useEffect(() => {\n    trackStartWizard();\n\n    return () => {\n      trackEndWizard(funnelId);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- this is intentional\n  }, []);\n\n  useEffect(() => {\n    trackStartStep(actualActiveStepIndex, funnelId);\n  }, [actualActiveStepIndex, funnelId]);\n\n  return (\n    <div {...baseProps} className={clsx(styles.root, baseProps.className)} ref={ref}>\n      <div\n        className={clsx(styles.wizard, isVisualRefresh && styles.refresh, smallContainer && styles['small-container'])}\n      >\n        <WizardNavigation\n          activeStepIndex={actualActiveStepIndex}\n          farthestStepIndex={farthestStepIndex.current}\n          allowSkipTo={allowSkipTo}\n          hidden={smallContainer}\n          i18nStrings={i18nStrings}\n          isVisualRefresh={isVisualRefresh}\n          isLoadingNextStep={isLoadingNextStep}\n          onStepClick={onStepClick}\n          onSkipToClick={onSkipToClick}\n          steps={steps}\n        />\n        <div\n          className={clsx(styles.form, isVisualRefresh && styles.refresh, smallContainer && styles['small-container'])}\n        >\n          {isVisualRefresh && <div className={clsx(styles.background, 'awsui-context-content-header')} />}\n\n          <WizardForm\n            steps={steps}\n            isVisualRefresh={isVisualRefresh}\n            showCollapsedSteps={smallContainer}\n            i18nStrings={i18nStrings}\n            activeStepIndex={actualActiveStepIndex}\n            isPrimaryLoading={isLoadingNextStep}\n            allowSkipTo={allowSkipTo}\n            secondaryActions={secondaryActions}\n            onCancelClick={onCancelClick}\n            onPreviousClick={onPreviousClick}\n            onSkipToClick={onSkipToClick}\n            onPrimaryClick={onPrimaryClick}\n          />\n        </div>\n      </div>\n    </div>\n  );\n}\n\napplyDisplayName(Wizard, 'Wizard');\n"]}
+{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["wizard/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AAEpE,OAAO,EAAE,eAAe,EAAE,MAAM,mDAAmD,CAAC;AAEpF,OAAO,cAAc,MAAM,YAAY,CAAC;AAGxC,SAAS,MAAM,CAAC,EAAyE;QAAzE,EAAE,iBAAiB,GAAG,KAAK,EAAE,WAAW,GAAG,KAAK,OAAyB,EAApB,KAAK,cAA1D,oCAA4D,CAAF;IACxE,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACtD,MAAM,aAAa,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAE9C,OAAO,CACL,oBAAC,eAAe,IACd,UAAU,EAAC,YAAY,EACvB,mBAAmB,EAAE,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,EACjH,gBAAgB,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM;QAEpC,oBAAC,cAAc,kBACb,iBAAiB,EAAE,iBAAiB,EACpC,WAAW,EAAE,WAAW,IACpB,aAAa,EACb,kBAAkB,EACtB,CACc,CACnB,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;AAGnC,eAAe,MAAM,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { getExternalProps } from '../internal/utils/external-props';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\n\nimport { AnalyticsFunnel } from '../internal/analytics/components/analytics-funnel';\n\nimport InternalWizard from './internal';\nimport { WizardProps } from './interfaces';\n\nfunction Wizard({ isLoadingNextStep = false, allowSkipTo = false, ...props }: WizardProps) {\n  const baseComponentProps = useBaseComponent('Wizard');\n  const externalProps = getExternalProps(props);\n\n  return (\n    <AnalyticsFunnel\n      funnelType=\"multi-page\"\n      optionalStepNumbers={props.steps.map((step, index) => (step.isOptional ? index : -1)).filter(step => step !== -1)}\n      totalFunnelSteps={props.steps.length}\n    >\n      <InternalWizard\n        isLoadingNextStep={isLoadingNextStep}\n        allowSkipTo={allowSkipTo}\n        {...externalProps}\n        {...baseComponentProps}\n      />\n    </AnalyticsFunnel>\n  );\n}\n\napplyDisplayName(Wizard, 'Wizard');\n\nexport { WizardProps };\nexport default Wizard;\n"]}

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
+import { WizardProps } from './interfaces';
+type InternalWizardProps = WizardProps & InternalBaseComponentProps;
+export default function InternalWizard({ steps, activeStepIndex: controlledActiveStepIndex, isLoadingNextStep, allowSkipTo, secondaryActions, onCancel, onSubmit, onNavigate, __internalRootRef, ...rest }: InternalWizardProps): JSX.Element;
+export {};
+//# sourceMappingURL=internal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["wizard/internal.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAWlF,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAI3C,KAAK,mBAAmB,GAAG,WAAW,GAAG,0BAA0B,CAAC;AAEpE,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,KAAK,EACL,eAAe,EAAE,yBAAyB,EAC1C,iBAAyB,EACzB,WAAmB,EACnB,gBAAgB,EAChB,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,iBAAiB,EACjB,GAAG,IAAI,EACR,EAAE,mBAAmB,eAuHrB"}

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

@@ -0,0 +1,82 @@
+import { __rest } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useRef } from 'react';
+import clsx from 'clsx';
+import { getBaseProps } from '../internal/base-component';
+import { fireNonCancelableEvent } from '../internal/events';
+import { warnOnce } from '../internal/logging';
+import { useContainerBreakpoints } from '../internal/hooks/container-queries';
+import { useControllable } from '../internal/hooks/use-controllable';
+import { useMergeRefs } from '../internal/hooks/use-merge-refs';
+import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
+import { useInternalI18n } from '../internal/i18n/context';
+import { FunnelMetrics } from '../internal/analytics';
+import { useFunnel } from '../internal/analytics/hooks/use-funnel';
+import { getSubStepAllSelector } from '../internal/analytics/selectors';
+import WizardForm from './wizard-form';
+import WizardNavigation from './wizard-navigation';
+import styles from './styles.css.js';
+export default function InternalWizard(_a) {
+    var { steps, activeStepIndex: controlledActiveStepIndex, isLoadingNextStep = false, allowSkipTo = false, secondaryActions, onCancel, onSubmit, onNavigate, __internalRootRef } = _a, rest = __rest(_a, ["steps", "activeStepIndex", "isLoadingNextStep", "allowSkipTo", "secondaryActions", "onCancel", "onSubmit", "onNavigate", "__internalRootRef"]);
+    const baseProps = getBaseProps(rest);
+    const [breakpoint, breakpointsRef] = useContainerBreakpoints(['xs']);
+    const ref = useMergeRefs(breakpointsRef, __internalRootRef);
+    const smallContainer = breakpoint === 'default';
+    const [activeStepIndex, setActiveStepIndex] = useControllable(controlledActiveStepIndex, onNavigate, 0, {
+        componentName: 'Wizard',
+        controlledProp: 'activeStepIndex',
+        changeHandler: 'onNavigate',
+    });
+    const { funnelInteractionId, funnelSubmit, funnelCancel, funnelProps } = useFunnel();
+    const actualActiveStepIndex = activeStepIndex ? Math.min(activeStepIndex, steps.length - 1) : 0;
+    const farthestStepIndex = useRef(actualActiveStepIndex);
+    farthestStepIndex.current = Math.max(farthestStepIndex.current, actualActiveStepIndex);
+    const isVisualRefresh = useVisualRefresh();
+    const isLastStep = actualActiveStepIndex >= steps.length - 1;
+    const navigationEvent = (requestedStepIndex, reason) => {
+        if (funnelInteractionId) {
+            FunnelMetrics.funnelStepNavigation({
+                navigationType: reason,
+                funnelInteractionId,
+                stepNumber: actualActiveStepIndex + 1,
+                stepNameSelector: `.${styles['form-header-component-wrapper']}`,
+                destinationStepNumber: requestedStepIndex + 1,
+                subStepAllSelector: getSubStepAllSelector(),
+            });
+        }
+        setActiveStepIndex(requestedStepIndex);
+        fireNonCancelableEvent(onNavigate, { requestedStepIndex, reason });
+    };
+    const onStepClick = (stepIndex) => navigationEvent(stepIndex, 'step');
+    const onSkipToClick = (stepIndex) => navigationEvent(stepIndex, 'skip');
+    const onCancelClick = () => {
+        funnelCancel();
+        fireNonCancelableEvent(onCancel);
+    };
+    const onPreviousClick = () => navigationEvent(actualActiveStepIndex - 1, 'previous');
+    const onPrimaryClick = () => {
+        if (isLastStep) {
+            funnelSubmit();
+            fireNonCancelableEvent(onSubmit);
+        }
+        else {
+            navigationEvent(actualActiveStepIndex + 1, 'next');
+        }
+    };
+    const i18n = useInternalI18n('wizard');
+    const i18nStrings = Object.assign(Object.assign({}, rest.i18nStrings), { stepNumberLabel: i18n('i18nStrings.stepNumberLabel', rest.i18nStrings.stepNumberLabel), collapsedStepsLabel: i18n('i18nStrings.collapsedStepsLabel', rest.i18nStrings.collapsedStepsLabel), cancelButton: i18n('i18nStrings.cancelButton', rest.i18nStrings.cancelButton), previousButton: i18n('i18nStrings.previousButton', rest.i18nStrings.previousButton), nextButton: i18n('i18nStrings.nextButton', rest.i18nStrings.nextButton), optional: i18n('i18nStrings.optional', rest.i18nStrings.optional) });
+    if (activeStepIndex && activeStepIndex >= steps.length) {
+        warnOnce('Wizard', `You have set \`activeStepIndex\` to ${activeStepIndex} but you have provided only ${steps.length} steps. Its value is ignored and the component uses ${steps.length - 1} instead.`);
+    }
+    if (allowSkipTo && !i18nStrings.skipToButtonLabel) {
+        warnOnce('Wizard', `You have set \`allowSkipTo\` but you have not provided \`i18nStrings.skipToButtonLabel\`. The skip-to button will not be rendered.`);
+    }
+    return (React.createElement("div", Object.assign({}, baseProps, funnelProps, { ref: ref, className: clsx(styles.root, baseProps.className) }),
+        React.createElement("div", { className: clsx(styles.wizard, isVisualRefresh && styles.refresh, smallContainer && styles['small-container']) },
+            React.createElement(WizardNavigation, { activeStepIndex: actualActiveStepIndex, farthestStepIndex: farthestStepIndex.current, allowSkipTo: allowSkipTo, hidden: smallContainer, i18nStrings: i18nStrings, isVisualRefresh: isVisualRefresh, isLoadingNextStep: isLoadingNextStep, onStepClick: onStepClick, onSkipToClick: onSkipToClick, steps: steps }),
+            React.createElement("div", { className: clsx(styles.form, isVisualRefresh && styles.refresh, smallContainer && styles['small-container']) },
+                isVisualRefresh && React.createElement("div", { className: clsx(styles.background, 'awsui-context-content-header') }),
+                React.createElement(WizardForm, { steps: steps, isVisualRefresh: isVisualRefresh, showCollapsedSteps: smallContainer, i18nStrings: i18nStrings, activeStepIndex: actualActiveStepIndex, isPrimaryLoading: isLoadingNextStep, allowSkipTo: allowSkipTo, secondaryActions: secondaryActions, onCancelClick: onCancelClick, onPreviousClick: onPreviousClick, onSkipToClick: onSkipToClick, onPrimaryClick: onPrimaryClick })))));
+}
+//# sourceMappingURL=internal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["wizard/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, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { warnOnce } from '../internal/logging';\n\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { useControllable } from '../internal/hooks/use-controllable';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\n\nimport { useInternalI18n } from '../internal/i18n/context';\n\nimport { FunnelMetrics } from '../internal/analytics';\nimport { useFunnel } from '../internal/analytics/hooks/use-funnel';\nimport { getSubStepAllSelector } from '../internal/analytics/selectors';\n\nimport WizardForm from './wizard-form';\nimport WizardNavigation from './wizard-navigation';\n\nimport { WizardProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ntype InternalWizardProps = WizardProps & InternalBaseComponentProps;\n\nexport default function InternalWizard({\n  steps,\n  activeStepIndex: controlledActiveStepIndex,\n  isLoadingNextStep = false,\n  allowSkipTo = false,\n  secondaryActions,\n  onCancel,\n  onSubmit,\n  onNavigate,\n  __internalRootRef,\n  ...rest\n}: InternalWizardProps) {\n  const baseProps = getBaseProps(rest);\n\n  const [breakpoint, breakpointsRef] = useContainerBreakpoints(['xs']);\n  const ref = useMergeRefs(breakpointsRef, __internalRootRef);\n\n  const smallContainer = breakpoint === 'default';\n\n  const [activeStepIndex, setActiveStepIndex] = useControllable(controlledActiveStepIndex, onNavigate, 0, {\n    componentName: 'Wizard',\n    controlledProp: 'activeStepIndex',\n    changeHandler: 'onNavigate',\n  });\n  const { funnelInteractionId, funnelSubmit, funnelCancel, funnelProps } = useFunnel();\n  const actualActiveStepIndex = activeStepIndex ? Math.min(activeStepIndex, steps.length - 1) : 0;\n\n  const farthestStepIndex = useRef<number>(actualActiveStepIndex);\n  farthestStepIndex.current = Math.max(farthestStepIndex.current, actualActiveStepIndex);\n\n  const isVisualRefresh = useVisualRefresh();\n  const isLastStep = actualActiveStepIndex >= steps.length - 1;\n\n  const navigationEvent = (requestedStepIndex: number, reason: WizardProps.NavigationReason) => {\n    if (funnelInteractionId) {\n      FunnelMetrics.funnelStepNavigation({\n        navigationType: reason,\n        funnelInteractionId,\n        stepNumber: actualActiveStepIndex + 1,\n        stepNameSelector: `.${styles['form-header-component-wrapper']}`,\n        destinationStepNumber: requestedStepIndex + 1,\n        subStepAllSelector: getSubStepAllSelector(),\n      });\n    }\n\n    setActiveStepIndex(requestedStepIndex);\n    fireNonCancelableEvent(onNavigate, { requestedStepIndex, reason });\n  };\n  const onStepClick = (stepIndex: number) => navigationEvent(stepIndex, 'step');\n  const onSkipToClick = (stepIndex: number) => navigationEvent(stepIndex, 'skip');\n  const onCancelClick = () => {\n    funnelCancel();\n    fireNonCancelableEvent(onCancel);\n  };\n  const onPreviousClick = () => navigationEvent(actualActiveStepIndex - 1, 'previous');\n  const onPrimaryClick = () => {\n    if (isLastStep) {\n      funnelSubmit();\n      fireNonCancelableEvent(onSubmit);\n    } else {\n      navigationEvent(actualActiveStepIndex + 1, 'next');\n    }\n  };\n\n  const i18n = useInternalI18n('wizard');\n  const i18nStrings: WizardProps.I18nStrings = {\n    ...rest.i18nStrings,\n    stepNumberLabel: i18n('i18nStrings.stepNumberLabel', rest.i18nStrings.stepNumberLabel),\n    collapsedStepsLabel: i18n('i18nStrings.collapsedStepsLabel', rest.i18nStrings.collapsedStepsLabel),\n    cancelButton: i18n('i18nStrings.cancelButton', rest.i18nStrings.cancelButton),\n    previousButton: i18n('i18nStrings.previousButton', rest.i18nStrings.previousButton),\n    nextButton: i18n('i18nStrings.nextButton', rest.i18nStrings.nextButton),\n    optional: i18n('i18nStrings.optional', rest.i18nStrings.optional),\n  };\n\n  if (activeStepIndex && activeStepIndex >= steps.length) {\n    warnOnce(\n      'Wizard',\n      `You have set \\`activeStepIndex\\` to ${activeStepIndex} but you have provided only ${\n        steps.length\n      } steps. Its value is ignored and the component uses ${steps.length - 1} instead.`\n    );\n  }\n\n  if (allowSkipTo && !i18nStrings.skipToButtonLabel) {\n    warnOnce(\n      'Wizard',\n      `You have set \\`allowSkipTo\\` but you have not provided \\`i18nStrings.skipToButtonLabel\\`. The skip-to button will not be rendered.`\n    );\n  }\n\n  return (\n    <div {...baseProps} {...funnelProps} ref={ref} className={clsx(styles.root, baseProps.className)}>\n      <div\n        className={clsx(styles.wizard, isVisualRefresh && styles.refresh, smallContainer && styles['small-container'])}\n      >\n        <WizardNavigation\n          activeStepIndex={actualActiveStepIndex}\n          farthestStepIndex={farthestStepIndex.current}\n          allowSkipTo={allowSkipTo}\n          hidden={smallContainer}\n          i18nStrings={i18nStrings}\n          isVisualRefresh={isVisualRefresh}\n          isLoadingNextStep={isLoadingNextStep}\n          onStepClick={onStepClick}\n          onSkipToClick={onSkipToClick}\n          steps={steps}\n        />\n        <div\n          className={clsx(styles.form, isVisualRefresh && styles.refresh, smallContainer && styles['small-container'])}\n        >\n          {isVisualRefresh && <div className={clsx(styles.background, 'awsui-context-content-header')} />}\n          <WizardForm\n            steps={steps}\n            isVisualRefresh={isVisualRefresh}\n            showCollapsedSteps={smallContainer}\n            i18nStrings={i18nStrings}\n            activeStepIndex={actualActiveStepIndex}\n            isPrimaryLoading={isLoadingNextStep}\n            allowSkipTo={allowSkipTo}\n            secondaryActions={secondaryActions}\n            onCancelClick={onCancelClick}\n            onPreviousClick={onPreviousClick}\n            onSkipToClick={onSkipToClick}\n            onPrimaryClick={onPrimaryClick}\n          />\n        </div>\n      </div>\n    </div>\n  );\n}\n"]}

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

@@ -1,37 +1,37 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_1xupv_15m1v_94",
-  "wizard": "awsui_wizard_1xupv_15m1v_107",
-  "refresh": "awsui_refresh_1xupv_15m1v_107",
-  "small-container": "awsui_small-container_1xupv_15m1v_114",
-  "navigation": "awsui_navigation_1xupv_15m1v_123",
-  "number": "awsui_number_1xupv_15m1v_185",
-  "circle": "awsui_circle_1xupv_15m1v_201",
-  "title": "awsui_title_1xupv_15m1v_209",
-  "active": "awsui_active_1xupv_15m1v_238",
-  "disabled": "awsui_disabled_1xupv_15m1v_249",
-  "enabled": "awsui_enabled_1xupv_15m1v_259",
-  "form": "awsui_form_1xupv_15m1v_301",
-  "form-header": "awsui_form-header_1xupv_15m1v_307",
-  "background": "awsui_background_1xupv_15m1v_318",
-  "form-header-content": "awsui_form-header-content_1xupv_15m1v_330",
-  "form-component": "awsui_form-component_1xupv_15m1v_334",
-  "hidden": "awsui_hidden_1xupv_15m1v_348",
-  "collapsed-steps": "awsui_collapsed-steps_1xupv_15m1v_352",
-  "collapsed-steps-extra-padding": "awsui_collapsed-steps-extra-padding_1xupv_15m1v_357",
-  "collapsed-steps-hidden": "awsui_collapsed-steps-hidden_1xupv_15m1v_360",
-  "form-header-component-wrapper": "awsui_form-header-component-wrapper_1xupv_15m1v_364",
-  "form-header-component": "awsui_form-header-component_1xupv_15m1v_364",
-  "navigation-link": "awsui_navigation-link_1xupv_15m1v_377",
-  "navigation-link-item": "awsui_navigation-link-item_1xupv_15m1v_378",
-  "navigation-link-label": "awsui_navigation-link-label_1xupv_15m1v_379",
-  "navigation-link-active": "awsui_navigation-link-active_1xupv_15m1v_383",
-  "navigation-link-disabled": "awsui_navigation-link-disabled_1xupv_15m1v_388",
-  "cancel-button": "awsui_cancel-button_1xupv_15m1v_392",
-  "previous-button": "awsui_previous-button_1xupv_15m1v_393",
-  "primary-button": "awsui_primary-button_1xupv_15m1v_394",
-  "skip-to-button": "awsui_skip-to-button_1xupv_15m1v_395",
-  "action-buttons": "awsui_action-buttons_1xupv_15m1v_399"
+  "root": "awsui_root_1xupv_1lhfm_94",
+  "wizard": "awsui_wizard_1xupv_1lhfm_107",
+  "refresh": "awsui_refresh_1xupv_1lhfm_107",
+  "small-container": "awsui_small-container_1xupv_1lhfm_114",
+  "navigation": "awsui_navigation_1xupv_1lhfm_123",
+  "number": "awsui_number_1xupv_1lhfm_185",
+  "circle": "awsui_circle_1xupv_1lhfm_201",
+  "title": "awsui_title_1xupv_1lhfm_209",
+  "active": "awsui_active_1xupv_1lhfm_238",
+  "disabled": "awsui_disabled_1xupv_1lhfm_249",
+  "enabled": "awsui_enabled_1xupv_1lhfm_259",
+  "form": "awsui_form_1xupv_1lhfm_301",
+  "form-header": "awsui_form-header_1xupv_1lhfm_307",
+  "background": "awsui_background_1xupv_1lhfm_318",
+  "form-header-content": "awsui_form-header-content_1xupv_1lhfm_330",
+  "form-component": "awsui_form-component_1xupv_1lhfm_334",
+  "hidden": "awsui_hidden_1xupv_1lhfm_348",
+  "collapsed-steps": "awsui_collapsed-steps_1xupv_1lhfm_352",
+  "collapsed-steps-extra-padding": "awsui_collapsed-steps-extra-padding_1xupv_1lhfm_357",
+  "collapsed-steps-hidden": "awsui_collapsed-steps-hidden_1xupv_1lhfm_360",
+  "form-header-component-wrapper": "awsui_form-header-component-wrapper_1xupv_1lhfm_364",
+  "form-header-component": "awsui_form-header-component_1xupv_1lhfm_364",
+  "navigation-link": "awsui_navigation-link_1xupv_1lhfm_377",
+  "navigation-link-item": "awsui_navigation-link-item_1xupv_1lhfm_378",
+  "navigation-link-label": "awsui_navigation-link-label_1xupv_1lhfm_379",
+  "navigation-link-active": "awsui_navigation-link-active_1xupv_1lhfm_383",
+  "navigation-link-disabled": "awsui_navigation-link-disabled_1xupv_1lhfm_388",
+  "cancel-button": "awsui_cancel-button_1xupv_1lhfm_392",
+  "previous-button": "awsui_previous-button_1xupv_1lhfm_393",
+  "primary-button": "awsui_primary-button_1xupv_1lhfm_394",
+  "skip-to-button": "awsui_skip-to-button_1xupv_1lhfm_395",
+  "action-buttons": "awsui_action-buttons_1xupv_1lhfm_399"
 };