@cloudscape-design/components 3.0.0

package/wizard/interfaces.d.ts

@@ -0,0 +1,116 @@
+import React from 'react';
+import { BaseComponentProps } from '../internal/base-component';
+import { NonCancelableEventHandler } from '../internal/events';
+export interface WizardProps extends BaseComponentProps {
+    /**
+     * Array of step objects. Each object represents a step in the wizard with the following properties:
+     *
+     * - `title` (string) - Text that's displayed as the title in the navigation pane and form header.
+     * - `info` (ReactNode) - (Optional) Area for a page level info link that's displayed in the form header.
+     *    The page level info link should trigger the default help panel content for the step. Use the [link component](/components/link/) to display the link.
+     * - `description` (ReactNode) - (Optional) Area below the form header for a page level description text to further explain the purpose, goal, or main actions of the step.
+     * - `content` (ReactNode) - Main content area to display form sections, form fields, and controls.
+     * - `errorText` (ReactNode) - (Optional) Error text that's displayed in a page level error alert.
+     *    Use this for rendering actionable server-side validation failure messages.
+     * - `isOptional` (boolean) - Specifies whether the step is optional or required. If set to `true`, the text from `i18nStrings.optional`
+     *    is rendered next to the `title` in the navigation step label and the form header title.
+     */
+    steps: ReadonlyArray<WizardProps.Step>;
+    /**
+     * Index of the step that's currently displayed. The first step has an index of zero (0).
+     *
+     * If you don't set this property, the component starts on the first step and switches step automatically
+     * when a user navigates using the buttons or an enabled step link in the navigation pane (that is, uncontrolled behavior).
+     *
+     * If you provide a value for this property, you must also set an `onNavigate` listener to update the property when
+     * a user navigates (that is, controlled behavior).
+     *
+     * If you set it to a value that exceeds the maximum value (that is, the number of steps minus 1), its value is ignored and the component uses the maximum value.
+     */
+    activeStepIndex?: number;
+    /**
+     * An object containing all the necessary localized strings required by the component.
+     *
+     * - `stepNumberLabel` ((stepNumber: number) => string) - A function that accepts a number (1-based indexing),
+     *    and returns a human-readable, localized string displaying the step number in the navigation pane. For example, "Step 1" or "Step 2".
+     * - `collapsedStepsLabel` ((stepNumber: number, stepsCount: number) => string) - A function that accepts two number parameters (1-based indexing),
+     *    and returns a string responsible for the navigation summary on smaller screens. For example, "Step 1 of 3". The parameters are as follows:
+     *    - `stepNumber` (number) - The step number that the user is currently on.
+     *    - `stepsCount` (number) - The total number of steps in the wizard.
+     * - `skipToButtonLabel`: ((targetStep: WizardProps.Step, targetStepNumber: number) => string) - An optional function that accepts the target step object
+     *    and the target step number (1-based indexing), and returns a string to be used as the *skip-to* button label. For example, "Skip to Step 2" or "Skip to end".
+     * - `cancelButton` (string) - The text of the button that enables the user to exit the flow.
+     * - `previousButton` (string) - The text of the button that enables the user to return to the previous step.
+     * - `nextButton` (string) - The text of the button that enables the user to move to the next step.
+     * - `submitButton` (string) - The text of the button that enables the user to submit the form.
+     * - `optional` (string) - The text displayed next to the step title and form header title when a step is declared optional.
+     */
+    i18nStrings: WizardProps.I18nStrings;
+    /**
+     * Renders the *next* or *submit* button in a loading state.
+     *
+     * Use this if you need to wait for a response from the server before the user can proceed to the next step, such as during server-side validation or retrieving the next step's information.
+     */
+    isLoadingNextStep?: boolean;
+    /**
+     * When set to `false`, the *skip-to* button is never shown.
+     * When set to `true`, the *skip-to* button may appear to offer faster navigation for the user.
+     *
+     * The *skip-to* button only allows to skip optional steps. It is shown when there is one or more optional
+     * steps ahead having no required steps in-between.
+     *
+     * Note: the *skip-to* button requires the function i18nStrings.skipToButtonLabel to be defined.
+     *
+     * Defaults to `false`.
+     */
+    allowSkipTo?: boolean;
+    /**
+     * Specifies left-aligned secondary actions for the wizard. Use a button dropdown if multiple actions are required.
+     */
+    secondaryActions?: React.ReactNode;
+    /**
+     * Called when a user clicks the *cancel* button.
+     * If a user has entered data in the form, you should prompt the user with a modal before exiting the wizard flow.
+     */
+    onCancel?: NonCancelableEventHandler;
+    /**
+     * Called when a user clicks the *submit* button.
+     */
+    onSubmit?: NonCancelableEventHandler;
+    /**
+     * Called when a user clicks the *next* button, the *previous* button, or an enabled step link in the navigation pane.
+     *
+     * The event `detail` includes the following:
+     * - `requestedStepIndex` - The index of the requested step.
+     * - `reason` - The user action that triggered the navigation event. It can be `next` (when the user clicks the *next* button),
+     * `previous` (when the user clicks the *previous* button), `step` (an enabled step link in the navigation pane),
+     * or `skip` (when navigated using navigation pane or the *skip-to* button to the previously unvisited step).
+     */
+    onNavigate?: NonCancelableEventHandler<WizardProps.NavigateDetail>;
+}
+export declare namespace WizardProps {
+    interface Step {
+        title: string;
+        info?: React.ReactNode;
+        description?: React.ReactNode;
+        content: React.ReactNode;
+        errorText?: React.ReactNode;
+        isOptional?: boolean;
+    }
+    interface I18nStrings {
+        stepNumberLabel(stepNumber: number): string;
+        collapsedStepsLabel(stepNumber: number, stepsCount: number): string;
+        skipToButtonLabel?(targetStep: WizardProps.Step, targetStepNumber: number): string;
+        cancelButton: string;
+        previousButton: string;
+        nextButton: string;
+        submitButton: string;
+        optional?: string;
+    }
+    interface NavigateDetail {
+        requestedStepIndex: number;
+        reason: WizardProps.NavigationReason;
+    }
+    type NavigationReason = 'next' | 'previous' | 'step' | 'skip';
+}
+//# sourceMappingURL=interfaces.d.ts.map

package/wizard/interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/wizard/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,WAAY,SAAQ,kBAAkB;IACrD;;;;;;;;;;;;OAYG;IACH,KAAK,EAAE,aAAa,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IAEvC;;;;;;;;;;OAUG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;;;;;;;;;;;;;;OAgBG;IACH,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC;IAErC;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;;;;;;;;;OAUG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEnC;;;OAGG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC;IAErC;;OAEG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC;IAErC;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,yBAAyB,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;CACpE;AAED,yBAAiB,WAAW,CAAC;IAC3B,UAAiB,IAAI;QACnB,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC9B,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;QACzB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;KACtB;IAED,UAAiB,WAAW;QAC1B,eAAe,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAAC;QAC5C,mBAAmB,CAAC,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,MAAM,CAAC;QACpE,iBAAiB,CAAC,CAAC,UAAU,EAAE,WAAW,CAAC,IAAI,EAAE,gBAAgB,EAAE,MAAM,GAAG,MAAM,CAAC;QACnF,YAAY,EAAE,MAAM,CAAC;QACrB,cAAc,EAAE,MAAM,CAAC;QACvB,UAAU,EAAE,MAAM,CAAC;QACnB,YAAY,EAAE,MAAM,CAAC;QACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB;IAED,UAAiB,cAAc;QAC7B,kBAAkB,EAAE,MAAM,CAAC;QAC3B,MAAM,EAAE,WAAW,CAAC,gBAAgB,CAAC;KACtC;IAED,KAAY,gBAAgB,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;CACtE"}

package/wizard/interfaces.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=interfaces.js.map

package/wizard/interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/wizard/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface WizardProps extends BaseComponentProps {\n  /**\n   * Array of step objects. Each object represents a step in the wizard with the following properties:\n   *\n   * - `title` (string) - Text that's displayed as the title in the navigation pane and form header.\n   * - `info` (ReactNode) - (Optional) Area for a page level info link that's displayed in the form header.\n   *    The page level info link should trigger the default help panel content for the step. Use the [link component](/components/link/) to display the link.\n   * - `description` (ReactNode) - (Optional) Area below the form header for a page level description text to further explain the purpose, goal, or main actions of the step.\n   * - `content` (ReactNode) - Main content area to display form sections, form fields, and controls.\n   * - `errorText` (ReactNode) - (Optional) Error text that's displayed in a page level error alert.\n   *    Use this for rendering actionable server-side validation failure messages.\n   * - `isOptional` (boolean) - Specifies whether the step is optional or required. If set to `true`, the text from `i18nStrings.optional`\n   *    is rendered next to the `title` in the navigation step label and the form header title.\n   */\n  steps: ReadonlyArray<WizardProps.Step>;\n\n  /**\n   * Index of the step that's currently displayed. The first step has an index of zero (0).\n   *\n   * If you don't set this property, the component starts on the first step and switches step automatically\n   * when a user navigates using the buttons or an enabled step link in the navigation pane (that is, uncontrolled behavior).\n   *\n   * If you provide a value for this property, you must also set an `onNavigate` listener to update the property when\n   * a user navigates (that is, controlled behavior).\n   *\n   * If you set it to a value that exceeds the maximum value (that is, the number of steps minus 1), its value is ignored and the component uses the maximum value.\n   */\n  activeStepIndex?: number;\n\n  /**\n   * An object containing all the necessary localized strings required by the component.\n   *\n   * - `stepNumberLabel` ((stepNumber: number) => string) - A function that accepts a number (1-based indexing),\n   *    and returns a human-readable, localized string displaying the step number in the navigation pane. For example, \"Step 1\" or \"Step 2\".\n   * - `collapsedStepsLabel` ((stepNumber: number, stepsCount: number) => string) - A function that accepts two number parameters (1-based indexing),\n   *    and returns a string responsible for the navigation summary on smaller screens. For example, \"Step 1 of 3\". The parameters are as follows:\n   *    - `stepNumber` (number) - The step number that the user is currently on.\n   *    - `stepsCount` (number) - The total number of steps in the wizard.\n   * - `skipToButtonLabel`: ((targetStep: WizardProps.Step, targetStepNumber: number) => string) - An optional function that accepts the target step object\n   *    and the target step number (1-based indexing), and returns a string to be used as the *skip-to* button label. For example, \"Skip to Step 2\" or \"Skip to end\".\n   * - `cancelButton` (string) - The text of the button that enables the user to exit the flow.\n   * - `previousButton` (string) - The text of the button that enables the user to return to the previous step.\n   * - `nextButton` (string) - The text of the button that enables the user to move to the next step.\n   * - `submitButton` (string) - The text of the button that enables the user to submit the form.\n   * - `optional` (string) - The text displayed next to the step title and form header title when a step is declared optional.\n   */\n  i18nStrings: WizardProps.I18nStrings;\n\n  /**\n   * Renders the *next* or *submit* button in a loading state.\n   *\n   * Use this if you need to wait for a response from the server before the user can proceed to the next step, such as during server-side validation or retrieving the next step's information.\n   */\n  isLoadingNextStep?: boolean;\n\n  /**\n   * When set to `false`, the *skip-to* button is never shown.\n   * When set to `true`, the *skip-to* button may appear to offer faster navigation for the user.\n   *\n   * The *skip-to* button only allows to skip optional steps. It is shown when there is one or more optional\n   * steps ahead having no required steps in-between.\n   *\n   * Note: the *skip-to* button requires the function i18nStrings.skipToButtonLabel to be defined.\n   *\n   * Defaults to `false`.\n   */\n  allowSkipTo?: boolean;\n\n  /**\n   * Specifies left-aligned secondary actions for the wizard. Use a button dropdown if multiple actions are required.\n   */\n  secondaryActions?: React.ReactNode;\n\n  /**\n   * Called when a user clicks the *cancel* button.\n   * If a user has entered data in the form, you should prompt the user with a modal before exiting the wizard flow.\n   */\n  onCancel?: NonCancelableEventHandler;\n\n  /**\n   * Called when a user clicks the *submit* button.\n   */\n  onSubmit?: NonCancelableEventHandler;\n\n  /**\n   * Called when a user clicks the *next* button, the *previous* button, or an enabled step link in the navigation pane.\n   *\n   * The event `detail` includes the following:\n   * - `requestedStepIndex` - The index of the requested step.\n   * - `reason` - The user action that triggered the navigation event. It can be `next` (when the user clicks the *next* button),\n   * `previous` (when the user clicks the *previous* button), `step` (an enabled step link in the navigation pane),\n   * or `skip` (when navigated using navigation pane or the *skip-to* button to the previously unvisited step).\n   */\n  onNavigate?: NonCancelableEventHandler<WizardProps.NavigateDetail>;\n}\n\nexport namespace WizardProps {\n  export interface Step {\n    title: string;\n    info?: React.ReactNode;\n    description?: React.ReactNode;\n    content: React.ReactNode;\n    errorText?: React.ReactNode;\n    isOptional?: boolean;\n  }\n\n  export interface I18nStrings {\n    stepNumberLabel(stepNumber: number): string;\n    collapsedStepsLabel(stepNumber: number, stepsCount: number): string;\n    skipToButtonLabel?(targetStep: WizardProps.Step, targetStepNumber: number): string;\n    cancelButton: string;\n    previousButton: string;\n    nextButton: string;\n    submitButton: string;\n    optional?: string;\n  }\n\n  export interface NavigateDetail {\n    requestedStepIndex: number;\n    reason: WizardProps.NavigationReason;\n  }\n\n  export type NavigationReason = 'next' | 'previous' | 'step' | 'skip';\n}\n"]}

package/wizard/styles.css.js

@@ -0,0 +1,36 @@
+
+    import './styles.scoped.css';
+    export default {
+  "root": "awsui_root_1xupv_cn8ug_94",
+  "wizard": "awsui_wizard_1xupv_cn8ug_105",
+  "refresh": "awsui_refresh_1xupv_cn8ug_105",
+  "small-container": "awsui_small-container_1xupv_cn8ug_112",
+  "navigation": "awsui_navigation_1xupv_cn8ug_120",
+  "number": "awsui_number_1xupv_cn8ug_148",
+  "circle": "awsui_circle_1xupv_cn8ug_164",
+  "title": "awsui_title_1xupv_cn8ug_172",
+  "active": "awsui_active_1xupv_cn8ug_201",
+  "disabled": "awsui_disabled_1xupv_cn8ug_212",
+  "enabled": "awsui_enabled_1xupv_cn8ug_222",
+  "form": "awsui_form_1xupv_cn8ug_261",
+  "form-header": "awsui_form-header_1xupv_cn8ug_267",
+  "background": "awsui_background_1xupv_cn8ug_278",
+  "form-header-content": "awsui_form-header-content_1xupv_cn8ug_288",
+  "form-component": "awsui_form-component_1xupv_cn8ug_292",
+  "hidden": "awsui_hidden_1xupv_cn8ug_306",
+  "collapsed-steps": "awsui_collapsed-steps_1xupv_cn8ug_310",
+  "collapsed-steps-extra-padding": "awsui_collapsed-steps-extra-padding_1xupv_cn8ug_315",
+  "collapsed-steps-hidden": "awsui_collapsed-steps-hidden_1xupv_cn8ug_318",
+  "form-header-component": "awsui_form-header-component_1xupv_cn8ug_322",
+  "navigation-link": "awsui_navigation-link_1xupv_cn8ug_323",
+  "navigation-link-item": "awsui_navigation-link-item_1xupv_cn8ug_324",
+  "navigation-link-label": "awsui_navigation-link-label_1xupv_cn8ug_325",
+  "navigation-link-active": "awsui_navigation-link-active_1xupv_cn8ug_329",
+  "navigation-link-disabled": "awsui_navigation-link-disabled_1xupv_cn8ug_334",
+  "cancel-button": "awsui_cancel-button_1xupv_cn8ug_338",
+  "previous-button": "awsui_previous-button_1xupv_cn8ug_339",
+  "primary-button": "awsui_primary-button_1xupv_cn8ug_340",
+  "skip-to-button": "awsui_skip-to-button_1xupv_cn8ug_341",
+  "action-buttons": "awsui_action-buttons_1xupv_cn8ug_345"
+};
+  

package/wizard/styles.scoped.css

@@ -0,0 +1,429 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* 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 */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* stylelint-disable selector-max-universal, selector-max-type */
+.awsui_root_1xupv_cn8ug_94:not(#\9) {
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+  border-collapse: separate;
+  border-spacing: 0;
+  caption-side: top;
+  cursor: auto;
+  direction: ltr;
+  empty-cells: show;
+  font-family: serif;
+  font-size: medium;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-hyphens: none;
+      -ms-hyphens: none;
+          hyphens: none;
+  letter-spacing: normal;
+  list-style: disc outside none;
+  tab-size: 8;
+  text-align: left;
+  text-align-last: auto;
+  text-indent: 0;
+  text-shadow: none;
+  text-transform: none;
+  visibility: visible;
+  white-space: normal;
+  widows: 2;
+  word-spacing: normal;
+  box-sizing: border-box;
+  font-size: 14px;
+  font-size: var(--font-body-m-size-sregvd, 14px);
+  line-height: 22px;
+  line-height: var(--font-body-m-line-height-i7xxvv, 22px);
+  color: #000716;
+  color: var(--color-text-body-default-ajf1h5, #000716);
+  font-weight: 400;
+  font-family: "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif;
+  font-family: var(--font-family-base-qnistn, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+}
+
+.awsui_wizard_1xupv_cn8ug_105.awsui_refresh_1xupv_cn8ug_105:not(#\9) {
+  column-gap: 24px;
+  column-gap: var(--space-xl-a39hup, 24px);
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: auto 1fr;
+  row-gap: 24px;
+  row-gap: var(--space-scaled-xl-w2t504, 24px);
+}
+.awsui_wizard_1xupv_cn8ug_105.awsui_refresh_1xupv_cn8ug_105.awsui_small-container_1xupv_cn8ug_112:not(#\9) {
+  row-gap: 20px;
+  row-gap: var(--space-scaled-l-t03y3z, 20px);
+}
+
+.awsui_wizard_1xupv_cn8ug_105:not(#\9):not(.awsui_refresh_1xupv_cn8ug_105) {
+  display: flex;
+}
+
+.awsui_navigation_1xupv_cn8ug_120.awsui_refresh_1xupv_cn8ug_105:not(#\9) {
+  grid-column: 1;
+  grid-row: 1/span 2;
+  padding-top: 4px;
+  padding-top: var(--space-scaled-xxs-95dhkm, 4px);
+  z-index: 1;
+}
+.awsui_navigation_1xupv_cn8ug_120.awsui_refresh_1xupv_cn8ug_105 > ul:not(#\9) {
+  background: #ffffff;
+  background: var(--color-background-container-content-i8i4a0, #ffffff);
+  border-radius: 16px;
+  border-radius: var(--border-container-radius-8dqnwf, 16px);
+  box-shadow: 0px 0px 1px 1px #e9ebed, 0px 1px 8px 2px rgba(0, 7, 22, 0.12);
+  box-shadow: var(--shadow-container-7nblnj, 0px 0px 1px 1px #e9ebed, 0px 1px 8px 2px rgba(0, 7, 22, 0.12));
+  margin: 0;
+  padding: 20px 20px;
+  padding: var(--space-scaled-l-t03y3z, 20px) var(--space-l-4vl6xu, 20px);
+  width: 280px;
+  box-sizing: border-box;
+}
+.awsui_navigation_1xupv_cn8ug_120.awsui_refresh_1xupv_cn8ug_105 > ul > li:not(#\9) {
+  display: grid;
+  column-gap: 12px;
+  column-gap: var(--space-s-hv8c1d, 12px);
+  grid-template-columns: 20px 1fr;
+  grid-template-columns: var(--space-l-4vl6xu, 20px) 1fr;
+  grid-template-rows: repeat(2, auto);
+}
+.awsui_navigation_1xupv_cn8ug_120.awsui_refresh_1xupv_cn8ug_105 > ul > li > hr:not(#\9) {
+  background-color: #e9ebed;
+  background-color: var(--color-border-divider-default-7s2wjw, #e9ebed);
+  border: 0;
+  grid-column: 1;
+  height: 100%;
+  width: 2px;
+  width: var(--space-xxxs-k2w98v, 2px);
+}
+.awsui_navigation_1xupv_cn8ug_120.awsui_refresh_1xupv_cn8ug_105 > ul > li > .awsui_number_1xupv_cn8ug_148:not(#\9) {
+  color: #5f6b7a;
+  color: var(--color-text-small-le1y42, #5f6b7a);
+  font-size: 12px;
+  font-size: var(--font-body-s-size-ukw2p9, 12px);
+  grid-column: 2;
+  grid-row: 1;
+}
+.awsui_navigation_1xupv_cn8ug_120.awsui_refresh_1xupv_cn8ug_105 > ul > li > a:not(#\9) {
+  align-items: start;
+  column-gap: 12px;
+  column-gap: var(--space-s-hv8c1d, 12px);
+  cursor: pointer;
+  display: grid;
+  font-size: 14px;
+  font-size: var(--font-body-m-size-sregvd, 14px);
+  grid-column: 1/span 2;
+  grid-row: 2;
+  grid-template-columns: 20px 1fr;
+  grid-template-columns: var(--space-l-4vl6xu, 20px) 1fr;
+}
+.awsui_navigation_1xupv_cn8ug_120.awsui_refresh_1xupv_cn8ug_105 > ul > li > a > .awsui_circle_1xupv_cn8ug_164:not(#\9) {
+  border-radius: 100%;
+  grid-column: 1;
+  height: 10px;
+  justify-self: center;
+  margin-top: 6px;
+  width: 10px;
+}
+.awsui_navigation_1xupv_cn8ug_120.awsui_refresh_1xupv_cn8ug_105 > ul > li > a > .awsui_title_1xupv_cn8ug_172:not(#\9) {
+  min-width: 0;
+  -ms-word-break: break-all;
+  word-break: break-word;
+  grid-column: 2;
+}
+.awsui_navigation_1xupv_cn8ug_120.awsui_refresh_1xupv_cn8ug_105 > ul > li > a[data-awsui-focus-visible=true]:not(#\9):focus {
+  outline: thin dotted;
+  outline: 0;
+  outline: var(--border-link-focus-ring-outline-k2wccv, 0);
+  outline-offset: 2px;
+  outline-color: #0972d3;
+  outline-color: var(--color-border-item-focused-ap3b6s, #0972d3);
+  border-radius: 4px;
+  border-radius: var(--border-control-focus-ring-radius-default-6g2tnn, 4px);
+  box-shadow: 0 0 0 2px #0972d3;
+  box-shadow: 0 0 0 var(--border-link-focus-ring-shadow-spread-nv4ahb, 2px) var(--color-border-item-focused-ap3b6s, #0972d3);
+}
+.awsui_navigation_1xupv_cn8ug_120.awsui_refresh_1xupv_cn8ug_105 > ul > li:not(#\9):first-child > hr {
+  grid-row: 2/span 2;
+}
+.awsui_navigation_1xupv_cn8ug_120.awsui_refresh_1xupv_cn8ug_105 > ul > li:not(#\9):not(:first-child) > .awsui_number_1xupv_cn8ug_148 {
+  margin-top: 24px;
+  margin-top: var(--space-scaled-xl-w2t504, 24px);
+}
+.awsui_navigation_1xupv_cn8ug_120.awsui_refresh_1xupv_cn8ug_105 > ul > li:not(#\9):last-child > hr {
+  grid-row: 1;
+}
+.awsui_navigation_1xupv_cn8ug_120.awsui_refresh_1xupv_cn8ug_105 > ul > li:not(#\9):only-of-type > hr {
+  display: none;
+}
+.awsui_navigation_1xupv_cn8ug_120.awsui_refresh_1xupv_cn8ug_105 > ul > li:not(#\9):not(:first-child):not(:last-child) > hr {
+  grid-row: 1/span 3;
+}
+.awsui_navigation_1xupv_cn8ug_120.awsui_refresh_1xupv_cn8ug_105 > ul > li.awsui_active_1xupv_cn8ug_201 > a:not(#\9) {
+  cursor: text;
+}
+.awsui_navigation_1xupv_cn8ug_120.awsui_refresh_1xupv_cn8ug_105 > ul > li.awsui_active_1xupv_cn8ug_201 > a > .awsui_circle_1xupv_cn8ug_164:not(#\9) {
+  background-color: #0972d3;
+  background-color: var(--color-background-control-checked-9admlu, #0972d3);
+  box-shadow: 0 0 0 3px #ffffff, 0 0 0 5px #0972d3, 0 0 0 7px #ffffff;
+  box-shadow: 0 0 0 3px var(--color-background-container-content-i8i4a0, #ffffff), 0 0 0 5px var(--color-background-control-checked-9admlu, #0972d3), 0 0 0 7px var(--color-background-container-content-i8i4a0, #ffffff);
+}
+.awsui_navigation_1xupv_cn8ug_120.awsui_refresh_1xupv_cn8ug_105 > ul > li.awsui_active_1xupv_cn8ug_201 > a > .awsui_title_1xupv_cn8ug_172:not(#\9) {
+  color: #0972d3;
+  color: var(--color-background-control-checked-9admlu, #0972d3);
+  font-weight: 700;
+}
+.awsui_navigation_1xupv_cn8ug_120.awsui_refresh_1xupv_cn8ug_105 > ul > li.awsui_disabled_1xupv_cn8ug_212 > a:not(#\9) {
+  cursor: text;
+}
+.awsui_navigation_1xupv_cn8ug_120.awsui_refresh_1xupv_cn8ug_105 > ul > li.awsui_disabled_1xupv_cn8ug_212 > a > .awsui_circle_1xupv_cn8ug_164:not(#\9) {
+  background-color: #ffffff;
+  background-color: var(--color-background-container-content-i8i4a0, #ffffff);
+  box-shadow: 0 0 0 2px #9ba7b6, 0 0 0 4px #ffffff;
+  box-shadow: 0 0 0 2px var(--color-text-interactive-disabled-3pbb07, #9ba7b6), 0 0 0 4px var(--color-background-container-content-i8i4a0, #ffffff);
+}
+.awsui_navigation_1xupv_cn8ug_120.awsui_refresh_1xupv_cn8ug_105 > ul > li.awsui_disabled_1xupv_cn8ug_212 > a > .awsui_title_1xupv_cn8ug_172:not(#\9) {
+  color: #9ba7b6;
+  color: var(--color-text-interactive-disabled-3pbb07, #9ba7b6);
+}
+.awsui_navigation_1xupv_cn8ug_120.awsui_refresh_1xupv_cn8ug_105 > ul > li.awsui_enabled_1xupv_cn8ug_222 > a > .awsui_circle_1xupv_cn8ug_164:not(#\9) {
+  background-color: #414d5c;
+  background-color: var(--color-text-interactive-default-eg5fsa, #414d5c);
+  box-shadow: 0 0 0 2px #414d5c, 0 0 0 4px #ffffff;
+  box-shadow: 0 0 0 2px var(--color-text-interactive-default-eg5fsa, #414d5c), 0 0 0 4px var(--color-background-container-content-i8i4a0, #ffffff);
+}
+.awsui_navigation_1xupv_cn8ug_120.awsui_refresh_1xupv_cn8ug_105 > ul > li.awsui_enabled_1xupv_cn8ug_222 > a > .awsui_title_1xupv_cn8ug_172:not(#\9) {
+  color: #414d5c;
+  color: var(--color-text-interactive-default-eg5fsa, #414d5c);
+}
+.awsui_navigation_1xupv_cn8ug_120.awsui_refresh_1xupv_cn8ug_105 > ul > li.awsui_enabled_1xupv_cn8ug_222 > a:not(#\9):hover > .awsui_circle_1xupv_cn8ug_164 {
+  background-color: #0972d3;
+  background-color: var(--color-background-control-checked-9admlu, #0972d3);
+  box-shadow: 0 0 0 2px #0972d3, 0 0 0 4px #ffffff;
+  box-shadow: 0 0 0 2px var(--color-background-control-checked-9admlu, #0972d3), 0 0 0 4px var(--color-background-container-content-i8i4a0, #ffffff);
+}
+.awsui_navigation_1xupv_cn8ug_120.awsui_refresh_1xupv_cn8ug_105 > ul > li.awsui_enabled_1xupv_cn8ug_222 > a:not(#\9):hover > .awsui_title_1xupv_cn8ug_172 {
+  color: #0972d3;
+  color: var(--color-background-control-checked-9admlu, #0972d3);
+}
+
+.awsui_navigation_1xupv_cn8ug_120:not(#\9):not(.awsui_refresh_1xupv_cn8ug_105) {
+  color: #9ba7b6;
+  color: var(--color-text-disabled-a2nkh4, #9ba7b6);
+  display: inline-block;
+  margin-right: calc(2 * 40px);
+  margin-right: calc(2 * var(--space-xxxl-bo9z7f, 40px));
+  min-width: 200px;
+  padding-top: 4px;
+  padding-top: var(--space-xxs-ynfts5, 4px);
+  width: 200px;
+}
+.awsui_navigation_1xupv_cn8ug_120:not(#\9):not(.awsui_refresh_1xupv_cn8ug_105) > ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.awsui_navigation_1xupv_cn8ug_120:not(#\9):not(.awsui_refresh_1xupv_cn8ug_105) > ul > li {
+  padding-bottom: 16px;
+  padding-bottom: var(--space-scaled-m-pv0fmt, 16px);
+  padding-top: 0;
+}
+.awsui_navigation_1xupv_cn8ug_120:not(#\9):not(.awsui_refresh_1xupv_cn8ug_105) > ul > li:not(:first-child) {
+  margin-top: 16px;
+  margin-top: var(--space-scaled-m-pv0fmt, 16px);
+}
+.awsui_navigation_1xupv_cn8ug_120:not(#\9):not(.awsui_refresh_1xupv_cn8ug_105) > ul > li:not(:last-child) {
+  border-bottom: 1px solid #d1d5db;
+  border-bottom: var(--border-divider-list-width-hacikr, 1px) solid var(--color-border-layout-wf5alz, #d1d5db);
+}
+
+.awsui_form_1xupv_cn8ug_261:not(#\9):not(.awsui_refresh_1xupv_cn8ug_105) {
+  min-width: 0;
+  -ms-word-break: break-all;
+  word-break: break-word;
+  width: 100%;
+}
+.awsui_form_1xupv_cn8ug_261:not(#\9):not(.awsui_refresh_1xupv_cn8ug_105) > .awsui_form-header_1xupv_cn8ug_267 {
+  position: relative;
+  margin-bottom: 16px;
+  margin-bottom: var(--space-scaled-m-pv0fmt, 16px);
+}
+
+.awsui_form_1xupv_cn8ug_261.awsui_refresh_1xupv_cn8ug_105:not(#\9) {
+  min-width: 0;
+  -ms-word-break: break-all;
+  word-break: break-word;
+  display: contents;
+}
+.awsui_form_1xupv_cn8ug_261.awsui_refresh_1xupv_cn8ug_105 > .awsui_background_1xupv_cn8ug_278:not(#\9) {
+  background-color: #ffffff;
+  background-color: var(--color-background-layout-main-sfhm4y, #ffffff);
+  grid-column: 1/span 2;
+  grid-row: 1;
+}
+.awsui_form_1xupv_cn8ug_261.awsui_refresh_1xupv_cn8ug_105 > .awsui_form-header_1xupv_cn8ug_267:not(#\9) {
+  background-color: #ffffff;
+  background-color: var(--color-background-layout-main-sfhm4y, #ffffff);
+  grid-column: 2;
+  grid-row: 1;
+}
+.awsui_form_1xupv_cn8ug_261.awsui_refresh_1xupv_cn8ug_105 > .awsui_form-header_1xupv_cn8ug_267 > .awsui_form-header-content_1xupv_cn8ug_288:not(#\9) {
+  padding-top: 24px;
+  padding-top: var(--space-scaled-xl-w2t504, 24px);
+  padding-bottom: 24px;
+  padding-bottom: var(--space-scaled-xl-w2t504, 24px);
+}
+.awsui_form_1xupv_cn8ug_261.awsui_refresh_1xupv_cn8ug_105 > .awsui_form-component_1xupv_cn8ug_292:not(#\9) {
+  grid-column: 2;
+  grid-row: 2;
+}
+.awsui_form_1xupv_cn8ug_261.awsui_refresh_1xupv_cn8ug_105.awsui_small-container_1xupv_cn8ug_112 > .awsui_form-header_1xupv_cn8ug_267:not(#\9) {
+  grid-column: 1/span 2;
+}
+.awsui_form_1xupv_cn8ug_261.awsui_refresh_1xupv_cn8ug_105.awsui_small-container_1xupv_cn8ug_112 > .awsui_form-header_1xupv_cn8ug_267 > .awsui_form-header-content_1xupv_cn8ug_288:not(#\9) {
+  padding-top: 0;
+}
+.awsui_form_1xupv_cn8ug_261.awsui_refresh_1xupv_cn8ug_105.awsui_small-container_1xupv_cn8ug_112 > .awsui_form-component_1xupv_cn8ug_292:not(#\9) {
+  grid-column: 1/span 2;
+}
+
+.awsui_navigation_1xupv_cn8ug_120.awsui_hidden_1xupv_cn8ug_306:not(#\9) {
+  display: none;
+}
+
+.awsui_collapsed-steps_1xupv_cn8ug_310:not(#\9) {
+  color: #414d5c;
+  color: var(--color-text-heading-secondary-corkaj, #414d5c);
+  font-weight: 700;
+  padding-top: 4px;
+  padding-top: var(--space-scaled-xxs-95dhkm, 4px);
+}
+.awsui_collapsed-steps-extra-padding_1xupv_cn8ug_315:not(#\9) {
+  padding-top: 20px;
+  padding-top: var(--space-scaled-l-t03y3z, 20px);
+}
+.awsui_collapsed-steps-hidden_1xupv_cn8ug_318:not(#\9) {
+  display: none;
+}
+
+.awsui_form-header-component_1xupv_cn8ug_322:not(#\9),
+.awsui_navigation-link_1xupv_cn8ug_323:not(#\9),
+.awsui_navigation-link-item_1xupv_cn8ug_324:not(#\9),
+.awsui_navigation-link-label_1xupv_cn8ug_325:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_navigation-link-active_1xupv_cn8ug_329:not(#\9) {
+  font-weight: 700;
+  color: #000716;
+  color: var(--color-text-body-default-ajf1h5, #000716);
+}
+
+.awsui_navigation-link-disabled_1xupv_cn8ug_334:not(#\9) {
+  color: #9ba7b6;
+  color: var(--color-text-control-disabled-3z3eul, #9ba7b6);
+}
+
+.awsui_cancel-button_1xupv_cn8ug_338:not(#\9),
+.awsui_previous-button_1xupv_cn8ug_339:not(#\9),
+.awsui_primary-button_1xupv_cn8ug_340:not(#\9),
+.awsui_skip-to-button_1xupv_cn8ug_341:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_action-buttons_1xupv_cn8ug_345:not(#\9) {
+  display: flex;
+  justify-content: flex-end;
+}

package/wizard/styles.selectors.js

@@ -0,0 +1,37 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "root": "awsui_root_1xupv_cn8ug_94",
+  "wizard": "awsui_wizard_1xupv_cn8ug_105",
+  "refresh": "awsui_refresh_1xupv_cn8ug_105",
+  "small-container": "awsui_small-container_1xupv_cn8ug_112",
+  "navigation": "awsui_navigation_1xupv_cn8ug_120",
+  "number": "awsui_number_1xupv_cn8ug_148",
+  "circle": "awsui_circle_1xupv_cn8ug_164",
+  "title": "awsui_title_1xupv_cn8ug_172",
+  "active": "awsui_active_1xupv_cn8ug_201",
+  "disabled": "awsui_disabled_1xupv_cn8ug_212",
+  "enabled": "awsui_enabled_1xupv_cn8ug_222",
+  "form": "awsui_form_1xupv_cn8ug_261",
+  "form-header": "awsui_form-header_1xupv_cn8ug_267",
+  "background": "awsui_background_1xupv_cn8ug_278",
+  "form-header-content": "awsui_form-header-content_1xupv_cn8ug_288",
+  "form-component": "awsui_form-component_1xupv_cn8ug_292",
+  "hidden": "awsui_hidden_1xupv_cn8ug_306",
+  "collapsed-steps": "awsui_collapsed-steps_1xupv_cn8ug_310",
+  "collapsed-steps-extra-padding": "awsui_collapsed-steps-extra-padding_1xupv_cn8ug_315",
+  "collapsed-steps-hidden": "awsui_collapsed-steps-hidden_1xupv_cn8ug_318",
+  "form-header-component": "awsui_form-header-component_1xupv_cn8ug_322",
+  "navigation-link": "awsui_navigation-link_1xupv_cn8ug_323",
+  "navigation-link-item": "awsui_navigation-link-item_1xupv_cn8ug_324",
+  "navigation-link-label": "awsui_navigation-link-label_1xupv_cn8ug_325",
+  "navigation-link-active": "awsui_navigation-link-active_1xupv_cn8ug_329",
+  "navigation-link-disabled": "awsui_navigation-link-disabled_1xupv_cn8ug_334",
+  "cancel-button": "awsui_cancel-button_1xupv_cn8ug_338",
+  "previous-button": "awsui_previous-button_1xupv_cn8ug_339",
+  "primary-button": "awsui_primary-button_1xupv_cn8ug_340",
+  "skip-to-button": "awsui_skip-to-button_1xupv_cn8ug_341",
+  "action-buttons": "awsui_action-buttons_1xupv_cn8ug_345"
+};
+  

package/wizard/unmount.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export default class Unmount extends React.Component<{
+    onUnmount: () => void;
+    children: React.ReactNode;
+}> {
+    componentWillUnmount(): void;
+    render(): React.ReactNode;
+}
+//# sourceMappingURL=unmount.d.ts.map

package/wizard/unmount.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"unmount.d.ts","sourceRoot":"","sources":["../../../src/wizard/unmount.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,KAAK,CAAC,SAAS,CAAC;IAAE,SAAS,EAAE,MAAM,IAAI,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAAC;IACxG,oBAAoB;IAIpB,MAAM;CAGP"}