@dfds-ui/react-components 1.0.6 → 1.0.7

package/cjs/mobile-stepper/MobileStepper.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+declare type MobileStepperProps = {
+    /**
+     *   Total steps
+     */
+    steps: number;
+    /**
+     *   Active step
+     */
+    activeStep?: number;
+    /**
+     * A back button element. For instance, it can be a `Button` or an `IconButton`.
+     */
+    backButton?: ReactNode;
+    /**
+     * A next button element. For instance, it can be a `Button` or an `IconButton`.
+     */
+    nextButton?: ReactNode;
+    /**
+     * 	The variant to use `'text' | 'dots'`
+     */
+    variant?: 'text' | 'dots';
+};
+declare const MobileStepper: ({ steps, activeStep, backButton, nextButton, variant, ...props }: MobileStepperProps) => JSX.Element;
+export default MobileStepper;

package/cjs/mobile-stepper/MobileStepper.js

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@emotion/react");
+
+var _theme = require("@dfds-ui/theme");
+
+const _excluded = ["steps", "activeStep", "backButton", "nextButton", "variant"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+const MobileStepperWrapperStyles = process.env.NODE_ENV === "production" ? {
+  name: "1ks9uvr",
+  styles: "display:flex;justify-content:space-between;align-items:center;width:100%"
+} : {
+  name: "2up18-MobileStepperWrapperStyles",
+  styles: "display:flex;justify-content:space-between;align-items:center;width:100%;label:MobileStepperWrapperStyles;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9tb2JpbGUtc3RlcHBlci9Nb2JpbGVTdGVwcGVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEyQnNDIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9tb2JpbGUtc3RlcHBlci9Nb2JpbGVTdGVwcGVyLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tICdAZGZkcy11aS90aGVtZSdcblxudHlwZSBNb2JpbGVTdGVwcGVyUHJvcHMgPSB7XG4gIC8qKlxuICAgKiAgIFRvdGFsIHN0ZXBzXG4gICAqL1xuICBzdGVwczogbnVtYmVyXG4gIC8qKlxuICAgKiAgIEFjdGl2ZSBzdGVwXG4gICAqL1xuICBhY3RpdmVTdGVwPzogbnVtYmVyXG4gIC8qKlxuICAgKiBBIGJhY2sgYnV0dG9uIGVsZW1lbnQuIEZvciBpbnN0YW5jZSwgaXQgY2FuIGJlIGEgYEJ1dHRvbmAgb3IgYW4gYEljb25CdXR0b25gLlxuICAgKi9cbiAgYmFja0J1dHRvbj86IFJlYWN0Tm9kZVxuICAvKipcbiAgICogQSBuZXh0IGJ1dHRvbiBlbGVtZW50LiBGb3IgaW5zdGFuY2UsIGl0IGNhbiBiZSBhIGBCdXR0b25gIG9yIGFuIGBJY29uQnV0dG9uYC5cbiAgICovXG4gIG5leHRCdXR0b24/OiBSZWFjdE5vZGVcbiAgLyoqXG4gICAqIFx0VGhlIHZhcmlhbnQgdG8gdXNlIGAndGV4dCcgfCAnZG90cydgXG4gICAqL1xuICB2YXJpYW50PzogJ3RleHQnIHwgJ2RvdHMnXG59XG5cbmNvbnN0IE1vYmlsZVN0ZXBwZXJXcmFwcGVyU3R5bGVzID0gY3NzYFxuICBkaXNwbGF5OiBmbGV4O1xuICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIHdpZHRoOiAxMDAlO1xuYFxuY29uc3QgTW9iaWxlU3RlcHBlckRvdCA9ICh7IGFjdGl2ZSB9OiB7IGFjdGl2ZTogYm9vbGVhbiB9KSA9PiB7XG4gIHJldHVybiAoXG4gICAgPGRpdlxuICAgICAgZGF0YS10ZXN0aWQ9XCJtb2JpbGUtc3RlcHBlci1kb3RcIlxuICAgICAgY3NzPXtjc3NgXG4gICAgICAgIHdpZHRoOiA4cHg7XG4gICAgICAgIGhlaWdodDogOHB4O1xuICAgICAgICBib3JkZXItcmFkaXVzOiA1MCU7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7YWN0aXZlID8gdGhlbWUuY29sb3JzLnNlY29uZGFyeS5tYWluIDogdGhlbWUuY29sb3JzLnRleHQucHJpbWFyeS5kaXNhYmxlZH07XG4gICAgICBgfVxuICAgID48L2Rpdj5cbiAgKVxufVxuY29uc3QgTW9iaWxlU3RlcHBlckRvdHMgPSAoeyBjaGlsZHJlbiB9OiB7IGNoaWxkcmVuOiBSZWFjdE5vZGUgfSkgPT4ge1xuICByZXR1cm4gKFxuICAgIDxkaXZcbiAgICAgIGRhdGEtdGVzdGlkPVwibW9iaWxlLXN0ZXBwZXItZG90c1wiXG4gICAgICBjc3M9e2Nzc2BcbiAgICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgICAgZ2FwOiA0cHg7XG4gICAgICBgfVxuICAgID5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICA8L2Rpdj5cbiAgKVxufVxuY29uc3QgTW9iaWxlU3RlcHBlciA9ICh7XG4gIHN0ZXBzLFxuICBhY3RpdmVTdGVwID0gMCxcbiAgYmFja0J1dHRvbixcbiAgbmV4dEJ1dHRvbixcbiAgdmFyaWFudCA9ICd0ZXh0JyxcbiAgLi4ucHJvcHNcbn06IE1vYmlsZVN0ZXBwZXJQcm9wcykgPT4ge1xuICByZXR1cm4gKFxuICAgIDxkaXYgY3NzPXtNb2JpbGVTdGVwcGVyV3JhcHBlclN0eWxlc30gey4uLnByb3BzfSBkYXRhLXRlc3RpZD1cIm1vYmlsZS1zdGVwcGVyXCI+XG4gICAgICB7YmFja0J1dHRvbn1cbiAgICAgIHt2YXJpYW50ID09PSAndGV4dCcgPyAoXG4gICAgICAgIGAke2FjdGl2ZVN0ZXAgKyAxfSAvICR7c3RlcHN9YFxuICAgICAgKSA6IChcbiAgICAgICAgPE1vYmlsZVN0ZXBwZXJEb3RzPlxuICAgICAgICAgIHtbLi4ubmV3IEFycmF5KHN0ZXBzKV0ubWFwKChfLCBpbmRleCkgPT4gKFxuICAgICAgICAgICAgPE1vYmlsZVN0ZXBwZXJEb3Qga2V5PXtpbmRleH0gYWN0aXZlPXthY3RpdmVTdGVwID09PSBpbmRleH0gLz5cbiAgICAgICAgICApKX1cbiAgICAgICAgPC9Nb2JpbGVTdGVwcGVyRG90cz5cbiAgICAgICl9XG4gICAgICB7bmV4dEJ1dHRvbn1cbiAgICA8L2Rpdj5cbiAgKVxufVxuXG5leHBvcnQgZGVmYXVsdCBNb2JpbGVTdGVwcGVyXG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+const MobileStepperDot = ({
+  active
+}) => {
+  return (0, _react2.jsx)("div", {
+    "data-testid": "mobile-stepper-dot",
+    css: /*#__PURE__*/(0, _react2.css)("width:8px;height:8px;border-radius:50%;background-color:", active ? _theme.theme.colors.secondary.main : _theme.theme.colors.text.primary.disabled, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:MobileStepperDot;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9tb2JpbGUtc3RlcHBlci9Nb2JpbGVTdGVwcGVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFxQ2MiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL21vYmlsZS1zdGVwcGVyL01vYmlsZVN0ZXBwZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gJ0BkZmRzLXVpL3RoZW1lJ1xuXG50eXBlIE1vYmlsZVN0ZXBwZXJQcm9wcyA9IHtcbiAgLyoqXG4gICAqICAgVG90YWwgc3RlcHNcbiAgICovXG4gIHN0ZXBzOiBudW1iZXJcbiAgLyoqXG4gICAqICAgQWN0aXZlIHN0ZXBcbiAgICovXG4gIGFjdGl2ZVN0ZXA/OiBudW1iZXJcbiAgLyoqXG4gICAqIEEgYmFjayBidXR0b24gZWxlbWVudC4gRm9yIGluc3RhbmNlLCBpdCBjYW4gYmUgYSBgQnV0dG9uYCBvciBhbiBgSWNvbkJ1dHRvbmAuXG4gICAqL1xuICBiYWNrQnV0dG9uPzogUmVhY3ROb2RlXG4gIC8qKlxuICAgKiBBIG5leHQgYnV0dG9uIGVsZW1lbnQuIEZvciBpbnN0YW5jZSwgaXQgY2FuIGJlIGEgYEJ1dHRvbmAgb3IgYW4gYEljb25CdXR0b25gLlxuICAgKi9cbiAgbmV4dEJ1dHRvbj86IFJlYWN0Tm9kZVxuICAvKipcbiAgICogXHRUaGUgdmFyaWFudCB0byB1c2UgYCd0ZXh0JyB8ICdkb3RzJ2BcbiAgICovXG4gIHZhcmlhbnQ/OiAndGV4dCcgfCAnZG90cydcbn1cblxuY29uc3QgTW9iaWxlU3RlcHBlcldyYXBwZXJTdHlsZXMgPSBjc3NgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgd2lkdGg6IDEwMCU7XG5gXG5jb25zdCBNb2JpbGVTdGVwcGVyRG90ID0gKHsgYWN0aXZlIH06IHsgYWN0aXZlOiBib29sZWFuIH0pID0+IHtcbiAgcmV0dXJuIChcbiAgICA8ZGl2XG4gICAgICBkYXRhLXRlc3RpZD1cIm1vYmlsZS1zdGVwcGVyLWRvdFwiXG4gICAgICBjc3M9e2Nzc2BcbiAgICAgICAgd2lkdGg6IDhweDtcbiAgICAgICAgaGVpZ2h0OiA4cHg7XG4gICAgICAgIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHthY3RpdmUgPyB0aGVtZS5jb2xvcnMuc2Vjb25kYXJ5Lm1haW4gOiB0aGVtZS5jb2xvcnMudGV4dC5wcmltYXJ5LmRpc2FibGVkfTtcbiAgICAgIGB9XG4gICAgPjwvZGl2PlxuICApXG59XG5jb25zdCBNb2JpbGVTdGVwcGVyRG90cyA9ICh7IGNoaWxkcmVuIH06IHsgY2hpbGRyZW46IFJlYWN0Tm9kZSB9KSA9PiB7XG4gIHJldHVybiAoXG4gICAgPGRpdlxuICAgICAgZGF0YS10ZXN0aWQ9XCJtb2JpbGUtc3RlcHBlci1kb3RzXCJcbiAgICAgIGNzcz17Y3NzYFxuICAgICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgICBnYXA6IDRweDtcbiAgICAgIGB9XG4gICAgPlxuICAgICAge2NoaWxkcmVufVxuICAgIDwvZGl2PlxuICApXG59XG5jb25zdCBNb2JpbGVTdGVwcGVyID0gKHtcbiAgc3RlcHMsXG4gIGFjdGl2ZVN0ZXAgPSAwLFxuICBiYWNrQnV0dG9uLFxuICBuZXh0QnV0dG9uLFxuICB2YXJpYW50ID0gJ3RleHQnLFxuICAuLi5wcm9wc1xufTogTW9iaWxlU3RlcHBlclByb3BzKSA9PiB7XG4gIHJldHVybiAoXG4gICAgPGRpdiBjc3M9e01vYmlsZVN0ZXBwZXJXcmFwcGVyU3R5bGVzfSB7Li4ucHJvcHN9IGRhdGEtdGVzdGlkPVwibW9iaWxlLXN0ZXBwZXJcIj5cbiAgICAgIHtiYWNrQnV0dG9ufVxuICAgICAge3ZhcmlhbnQgPT09ICd0ZXh0JyA/IChcbiAgICAgICAgYCR7YWN0aXZlU3RlcCArIDF9IC8gJHtzdGVwc31gXG4gICAgICApIDogKFxuICAgICAgICA8TW9iaWxlU3RlcHBlckRvdHM+XG4gICAgICAgICAge1suLi5uZXcgQXJyYXkoc3RlcHMpXS5tYXAoKF8sIGluZGV4KSA9PiAoXG4gICAgICAgICAgICA8TW9iaWxlU3RlcHBlckRvdCBrZXk9e2luZGV4fSBhY3RpdmU9e2FjdGl2ZVN0ZXAgPT09IGluZGV4fSAvPlxuICAgICAgICAgICkpfVxuICAgICAgICA8L01vYmlsZVN0ZXBwZXJEb3RzPlxuICAgICAgKX1cbiAgICAgIHtuZXh0QnV0dG9ufVxuICAgIDwvZGl2PlxuICApXG59XG5cbmV4cG9ydCBkZWZhdWx0IE1vYmlsZVN0ZXBwZXJcbiJdfQ== */")
+  });
+};
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "490tlg",
+  styles: "display:flex;gap:4px"
+} : {
+  name: "i63685-MobileStepperDots",
+  styles: "display:flex;gap:4px;label:MobileStepperDots;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9tb2JpbGUtc3RlcHBlci9Nb2JpbGVTdGVwcGVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrRGMiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL21vYmlsZS1zdGVwcGVyL01vYmlsZVN0ZXBwZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gJ0BkZmRzLXVpL3RoZW1lJ1xuXG50eXBlIE1vYmlsZVN0ZXBwZXJQcm9wcyA9IHtcbiAgLyoqXG4gICAqICAgVG90YWwgc3RlcHNcbiAgICovXG4gIHN0ZXBzOiBudW1iZXJcbiAgLyoqXG4gICAqICAgQWN0aXZlIHN0ZXBcbiAgICovXG4gIGFjdGl2ZVN0ZXA/OiBudW1iZXJcbiAgLyoqXG4gICAqIEEgYmFjayBidXR0b24gZWxlbWVudC4gRm9yIGluc3RhbmNlLCBpdCBjYW4gYmUgYSBgQnV0dG9uYCBvciBhbiBgSWNvbkJ1dHRvbmAuXG4gICAqL1xuICBiYWNrQnV0dG9uPzogUmVhY3ROb2RlXG4gIC8qKlxuICAgKiBBIG5leHQgYnV0dG9uIGVsZW1lbnQuIEZvciBpbnN0YW5jZSwgaXQgY2FuIGJlIGEgYEJ1dHRvbmAgb3IgYW4gYEljb25CdXR0b25gLlxuICAgKi9cbiAgbmV4dEJ1dHRvbj86IFJlYWN0Tm9kZVxuICAvKipcbiAgICogXHRUaGUgdmFyaWFudCB0byB1c2UgYCd0ZXh0JyB8ICdkb3RzJ2BcbiAgICovXG4gIHZhcmlhbnQ/OiAndGV4dCcgfCAnZG90cydcbn1cblxuY29uc3QgTW9iaWxlU3RlcHBlcldyYXBwZXJTdHlsZXMgPSBjc3NgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgd2lkdGg6IDEwMCU7XG5gXG5jb25zdCBNb2JpbGVTdGVwcGVyRG90ID0gKHsgYWN0aXZlIH06IHsgYWN0aXZlOiBib29sZWFuIH0pID0+IHtcbiAgcmV0dXJuIChcbiAgICA8ZGl2XG4gICAgICBkYXRhLXRlc3RpZD1cIm1vYmlsZS1zdGVwcGVyLWRvdFwiXG4gICAgICBjc3M9e2Nzc2BcbiAgICAgICAgd2lkdGg6IDhweDtcbiAgICAgICAgaGVpZ2h0OiA4cHg7XG4gICAgICAgIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHthY3RpdmUgPyB0aGVtZS5jb2xvcnMuc2Vjb25kYXJ5Lm1haW4gOiB0aGVtZS5jb2xvcnMudGV4dC5wcmltYXJ5LmRpc2FibGVkfTtcbiAgICAgIGB9XG4gICAgPjwvZGl2PlxuICApXG59XG5jb25zdCBNb2JpbGVTdGVwcGVyRG90cyA9ICh7IGNoaWxkcmVuIH06IHsgY2hpbGRyZW46IFJlYWN0Tm9kZSB9KSA9PiB7XG4gIHJldHVybiAoXG4gICAgPGRpdlxuICAgICAgZGF0YS10ZXN0aWQ9XCJtb2JpbGUtc3RlcHBlci1kb3RzXCJcbiAgICAgIGNzcz17Y3NzYFxuICAgICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgICBnYXA6IDRweDtcbiAgICAgIGB9XG4gICAgPlxuICAgICAge2NoaWxkcmVufVxuICAgIDwvZGl2PlxuICApXG59XG5jb25zdCBNb2JpbGVTdGVwcGVyID0gKHtcbiAgc3RlcHMsXG4gIGFjdGl2ZVN0ZXAgPSAwLFxuICBiYWNrQnV0dG9uLFxuICBuZXh0QnV0dG9uLFxuICB2YXJpYW50ID0gJ3RleHQnLFxuICAuLi5wcm9wc1xufTogTW9iaWxlU3RlcHBlclByb3BzKSA9PiB7XG4gIHJldHVybiAoXG4gICAgPGRpdiBjc3M9e01vYmlsZVN0ZXBwZXJXcmFwcGVyU3R5bGVzfSB7Li4ucHJvcHN9IGRhdGEtdGVzdGlkPVwibW9iaWxlLXN0ZXBwZXJcIj5cbiAgICAgIHtiYWNrQnV0dG9ufVxuICAgICAge3ZhcmlhbnQgPT09ICd0ZXh0JyA/IChcbiAgICAgICAgYCR7YWN0aXZlU3RlcCArIDF9IC8gJHtzdGVwc31gXG4gICAgICApIDogKFxuICAgICAgICA8TW9iaWxlU3RlcHBlckRvdHM+XG4gICAgICAgICAge1suLi5uZXcgQXJyYXkoc3RlcHMpXS5tYXAoKF8sIGluZGV4KSA9PiAoXG4gICAgICAgICAgICA8TW9iaWxlU3RlcHBlckRvdCBrZXk9e2luZGV4fSBhY3RpdmU9e2FjdGl2ZVN0ZXAgPT09IGluZGV4fSAvPlxuICAgICAgICAgICkpfVxuICAgICAgICA8L01vYmlsZVN0ZXBwZXJEb3RzPlxuICAgICAgKX1cbiAgICAgIHtuZXh0QnV0dG9ufVxuICAgIDwvZGl2PlxuICApXG59XG5cbmV4cG9ydCBkZWZhdWx0IE1vYmlsZVN0ZXBwZXJcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+const MobileStepperDots = ({
+  children
+}) => {
+  return (0, _react2.jsx)("div", {
+    "data-testid": "mobile-stepper-dots",
+    css: _ref
+  }, children);
+};
+
+const MobileStepper = _ref2 => {
+  let steps = _ref2.steps,
+      _ref2$activeStep = _ref2.activeStep,
+      activeStep = _ref2$activeStep === void 0 ? 0 : _ref2$activeStep,
+      backButton = _ref2.backButton,
+      nextButton = _ref2.nextButton,
+      _ref2$variant = _ref2.variant,
+      variant = _ref2$variant === void 0 ? 'text' : _ref2$variant,
+      props = _objectWithoutProperties(_ref2, _excluded);
+
+  return (0, _react2.jsx)("div", _extends({
+    css: MobileStepperWrapperStyles
+  }, props, {
+    "data-testid": "mobile-stepper"
+  }), backButton, variant === 'text' ? `${activeStep + 1} / ${steps}` : (0, _react2.jsx)(MobileStepperDots, null, [...new Array(steps)].map((_, index) => (0, _react2.jsx)(MobileStepperDot, {
+    key: index,
+    active: activeStep === index
+  }))), nextButton);
+};
+
+var _default = MobileStepper;
+exports.default = _default;

package/cjs/mobile-stepper/index.d.ts

@@ -0,0 +1 @@
+export { default as MobileStepper } from './MobileStepper';

package/cjs/mobile-stepper/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "MobileStepper", {
+  enumerable: true,
+  get: function get() {
+    return _MobileStepper.default;
+  }
+});
+
+var _MobileStepper = _interopRequireDefault(require("./MobileStepper"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/cjs/step/Step.d.ts

@@ -0,0 +1,45 @@
+import React, { ReactNode } from 'react';
+export declare type StepProps = {
+    /**
+     * 	The position of the step
+     */
+    index: number;
+    /**
+     * Step label
+     */
+    label?: string;
+    /**
+     * 	Sets the step as active
+     */
+    active?: boolean;
+    /**
+     * 	Sets the step as completed
+     */
+    completed?: boolean;
+    /**
+     * If `true`, the step button will be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Should be Step sub-components, such as `StepContent` for the vertical variant
+     */
+    children?: ReactNode;
+    /**
+     * Optional label. Is shown below the step label
+     */
+    optionalStepText?: string;
+    /**
+     * Error step. Error icon will be showen in the step button
+     */
+    hasError?: boolean;
+    /**
+     * Editing step. Editing icon wil be showen in the step button
+     */
+    isEditing?: boolean;
+    /**
+     * The function is triggered when step button is clicked
+     */
+    handleStepClick?: () => void;
+};
+declare const _default: React.MemoExoticComponent<({ index, label, active: activeProp, completed: completedProp, disabled, children, hasError, optionalStepText, isEditing, handleStepClick, ...props }: StepProps) => JSX.Element>;
+export default _default;

package/cjs/step/Step.js

@@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _StepLabel = _interopRequireDefault(require("./StepLabel"));
+
+var _StepButton = _interopRequireDefault(require("./StepButton"));
+
+var _StepContent = _interopRequireDefault(require("./StepContent"));
+
+var _StepContext = _interopRequireDefault(require("./StepContext"));
+
+var _StepperContext = _interopRequireDefault(require("../stepper/StepperContext"));
+
+var _Step = require("./Step.styles");
+
+var _stepperFeedbackMessage = require("../stepper-feedback-message");
+
+var _react2 = require("@emotion/react");
+
+const _excluded = ["index", "label", "active", "completed", "disabled", "children", "hasError", "optionalStepText", "isEditing", "handleStepClick"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+const Step = _ref => {
+  let index = _ref.index,
+      _ref$label = _ref.label,
+      label = _ref$label === void 0 ? '' : _ref$label,
+      activeProp = _ref.active,
+      completedProp = _ref.completed,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      children = _ref.children,
+      _ref$hasError = _ref.hasError,
+      hasError = _ref$hasError === void 0 ? false : _ref$hasError,
+      optionalStepText = _ref.optionalStepText,
+      _ref$isEditing = _ref.isEditing,
+      isEditing = _ref$isEditing === void 0 ? false : _ref$isEditing,
+      handleStepClick = _ref.handleStepClick,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  const _useContext = (0, _react.useContext)(_StepperContext.default),
+        activeStep = _useContext.activeStep,
+        orientation = _useContext.orientation,
+        sequential = _useContext.sequential,
+        stepFeedbackMessage = _useContext.stepFeedbackMessage;
+
+  let _activeProp = activeProp,
+      active = _activeProp === void 0 ? false : _activeProp,
+      _completedProp = completedProp,
+      completed = _completedProp === void 0 ? false : _completedProp;
+  if (activeStep === index) active = activeProp !== undefined ? activeProp : true;else if (sequential && activeStep > index) completed = completedProp !== undefined ? completedProp : true;
+
+  const contextValue = _react.default.useMemo(() => ({
+    index,
+    active,
+    completed,
+    disabled,
+    hasError,
+    isEditing
+  }), [index, active, completed, disabled, hasError, isEditing]);
+
+  const displayFeedbackCondition = orientation === 'vertical' && stepFeedbackMessage && activeStep === index;
+  return (0, _react2.jsx)(_StepContext.default.Provider, {
+    value: contextValue
+  }, (0, _react2.jsx)("div", _extends({
+    css: orientation === 'horizontal' ? _Step.stepWrapperHorizontalStyles : _Step.stepWrapperVerticalStyles
+  }, props, {
+    "data-testid": "step"
+  }), (0, _react2.jsx)("div", {
+    css: _Step.stepHeaderStyles
+  }, displayFeedbackCondition ? (0, _react2.jsx)(_stepperFeedbackMessage.StepperFeedbackMessage, {
+    message: stepFeedbackMessage
+  }) : (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_StepButton.default, _extends({
+    handleStepClick: handleStepClick
+  }, props)), label ? (0, _react2.jsx)(_StepLabel.default, {
+    optionalStepText: optionalStepText
+  }, label) : null)), orientation === 'vertical' ? (0, _react2.jsx)("div", {
+    css: _Step.stepContentStyles
+  }, (0, _react2.jsx)(_StepContent.default, null, children)) : null));
+};
+
+var _default = /*#__PURE__*/(0, _react.memo)(Step);
+
+exports.default = _default;

package/cjs/step/Step.styles.d.ts

@@ -0,0 +1,4 @@
+export declare const stepWrapperHorizontalStyles: import("@emotion/react").SerializedStyles;
+export declare const stepWrapperVerticalStyles: import("@emotion/react").SerializedStyles;
+export declare const stepHeaderStyles: import("@emotion/react").SerializedStyles;
+export declare const stepContentStyles: import("@emotion/react").SerializedStyles;

package/cjs/step/Step.styles.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.stepContentStyles = exports.stepHeaderStyles = exports.stepWrapperVerticalStyles = exports.stepWrapperHorizontalStyles = void 0;
+
+var _theme = require("@dfds-ui/theme");
+
+var _react = require("@emotion/react");
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+// space between label and stepButton
+const spacing = _theme.theme.spacing.xs;
+const buttonWidth = _theme.theme.spacing.m;
+const connecterWidth = '1px';
+const stepWrapperHorizontalStyles = /*#__PURE__*/(0, _react.css)("display:flex;gap:", spacing, ";align-items:center;box-sizing:border-box;&:not(:last-child){flex:1;&:after{box-sizing:border-box;content:'';height:", connecterWidth, ";background-color:", _theme.theme.colors.text.primary.disabled, ";flex:1;width:100%;margin-right:", spacing, ";}}" + (process.env.NODE_ENV === "production" ? "" : ";label:stepWrapperHorizontalStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9zdGVwL1N0ZXAuc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU84QyIsImZpbGUiOiIuLi8uLi8uLi9zcmMvc3RlcC9TdGVwLnN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IHRoZW1lIH0gZnJvbSAnQGRmZHMtdWkvdGhlbWUnXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuLy8gc3BhY2UgYmV0d2VlbiBsYWJlbCBhbmQgc3RlcEJ1dHRvblxuY29uc3Qgc3BhY2luZyA9IHRoZW1lLnNwYWNpbmcueHNcbmNvbnN0IGJ1dHRvbldpZHRoID0gdGhlbWUuc3BhY2luZy5tXG5jb25zdCBjb25uZWN0ZXJXaWR0aCA9ICcxcHgnXG5leHBvcnQgY29uc3Qgc3RlcFdyYXBwZXJIb3Jpem9udGFsU3R5bGVzID0gY3NzYFxuICBkaXNwbGF5OiBmbGV4O1xuICBnYXA6ICR7c3BhY2luZ307XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICY6bm90KDpsYXN0LWNoaWxkKSB7XG4gICAgZmxleDogMTtcbiAgICAmOmFmdGVyIHtcbiAgICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgICBjb250ZW50OiAnJztcbiAgICAgIGhlaWdodDogJHtjb25uZWN0ZXJXaWR0aH07XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3RoZW1lLmNvbG9ycy50ZXh0LnByaW1hcnkuZGlzYWJsZWR9O1xuICAgICAgZmxleDogMTtcbiAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgbWFyZ2luLXJpZ2h0OiAke3NwYWNpbmd9O1xuICAgIH1cbiAgfVxuYFxuXG5leHBvcnQgY29uc3Qgc3RlcFdyYXBwZXJWZXJ0aWNhbFN0eWxlcyA9IGNzc2BcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBwYWRkaW5nLWJvdHRvbTogMmVtO1xuICAmOm5vdCg6bGFzdC1jaGlsZCkge1xuICAgICY6YWZ0ZXIge1xuICAgICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgIGNvbnRlbnQ6ICcnO1xuICAgICAgdG9wOiBjYWxjKCR7YnV0dG9uV2lkdGh9ICsgJHtzcGFjaW5nfSk7XG4gICAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoY2FsYygoJHtidXR0b25XaWR0aH0gLyAyKSAtIDFweCkpO1xuICAgICAgd2lkdGg6ICR7Y29ubmVjdGVyV2lkdGh9O1xuICAgICAgYmFja2dyb3VuZDogJHt0aGVtZS5jb2xvcnMudGV4dC5wcmltYXJ5LmRpc2FibGVkfTtcbiAgICAgIGhlaWdodDogY2FsYygxMDAlIC0gJHtidXR0b25XaWR0aH0gLSAoMiAqICR7c3BhY2luZ30pKTtcbiAgICB9XG4gIH1cbmBcblxuZXhwb3J0IGNvbnN0IHN0ZXBIZWFkZXJTdHlsZXMgPSBjc3NgXG4gIGdhcDogOHB4O1xuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuYFxuXG5leHBvcnQgY29uc3Qgc3RlcENvbnRlbnRTdHlsZXMgPSBjc3NgXG4gIHRyYW5zZm9ybTogdHJhbnNsYXRlWChjYWxjKDMgKiAke3NwYWNpbmd9KSk7XG5gXG4iXX0= */");
+exports.stepWrapperHorizontalStyles = stepWrapperHorizontalStyles;
+const stepWrapperVerticalStyles = /*#__PURE__*/(0, _react.css)("display:flex;flex-direction:column;position:relative;padding-bottom:2em;&:not(:last-child){&:after{box-sizing:border-box;position:absolute;content:'';top:calc(", buttonWidth, " + ", spacing, ");transform:translateX(calc((", buttonWidth, " / 2) - 1px));width:", connecterWidth, ";background:", _theme.theme.colors.text.primary.disabled, ";height:calc(100% - ", buttonWidth, " - (2 * ", spacing, "));}}" + (process.env.NODE_ENV === "production" ? "" : ";label:stepWrapperVerticalStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9zdGVwL1N0ZXAuc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTBCNEMiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL3N0ZXAvU3RlcC5zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyB0aGVtZSB9IGZyb20gJ0BkZmRzLXVpL3RoZW1lJ1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5cbi8vIHNwYWNlIGJldHdlZW4gbGFiZWwgYW5kIHN0ZXBCdXR0b25cbmNvbnN0IHNwYWNpbmcgPSB0aGVtZS5zcGFjaW5nLnhzXG5jb25zdCBidXR0b25XaWR0aCA9IHRoZW1lLnNwYWNpbmcubVxuY29uc3QgY29ubmVjdGVyV2lkdGggPSAnMXB4J1xuZXhwb3J0IGNvbnN0IHN0ZXBXcmFwcGVySG9yaXpvbnRhbFN0eWxlcyA9IGNzc2BcbiAgZGlzcGxheTogZmxleDtcbiAgZ2FwOiAke3NwYWNpbmd9O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAmOm5vdCg6bGFzdC1jaGlsZCkge1xuICAgIGZsZXg6IDE7XG4gICAgJjphZnRlciB7XG4gICAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgICAgY29udGVudDogJyc7XG4gICAgICBoZWlnaHQ6ICR7Y29ubmVjdGVyV2lkdGh9O1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt0aGVtZS5jb2xvcnMudGV4dC5wcmltYXJ5LmRpc2FibGVkfTtcbiAgICAgIGZsZXg6IDE7XG4gICAgICB3aWR0aDogMTAwJTtcbiAgICAgIG1hcmdpbi1yaWdodDogJHtzcGFjaW5nfTtcbiAgICB9XG4gIH1cbmBcblxuZXhwb3J0IGNvbnN0IHN0ZXBXcmFwcGVyVmVydGljYWxTdHlsZXMgPSBjc3NgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgcGFkZGluZy1ib3R0b206IDJlbTtcbiAgJjpub3QoOmxhc3QtY2hpbGQpIHtcbiAgICAmOmFmdGVyIHtcbiAgICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICBjb250ZW50OiAnJztcbiAgICAgIHRvcDogY2FsYygke2J1dHRvbldpZHRofSArICR7c3BhY2luZ30pO1xuICAgICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVYKGNhbGMoKCR7YnV0dG9uV2lkdGh9IC8gMikgLSAxcHgpKTtcbiAgICAgIHdpZHRoOiAke2Nvbm5lY3RlcldpZHRofTtcbiAgICAgIGJhY2tncm91bmQ6ICR7dGhlbWUuY29sb3JzLnRleHQucHJpbWFyeS5kaXNhYmxlZH07XG4gICAgICBoZWlnaHQ6IGNhbGMoMTAwJSAtICR7YnV0dG9uV2lkdGh9IC0gKDIgKiAke3NwYWNpbmd9KSk7XG4gICAgfVxuICB9XG5gXG5cbmV4cG9ydCBjb25zdCBzdGVwSGVhZGVyU3R5bGVzID0gY3NzYFxuICBnYXA6IDhweDtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbmBcblxuZXhwb3J0IGNvbnN0IHN0ZXBDb250ZW50U3R5bGVzID0gY3NzYFxuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoY2FsYygzICogJHtzcGFjaW5nfSkpO1xuYFxuIl19 */");
+exports.stepWrapperVerticalStyles = stepWrapperVerticalStyles;
+const stepHeaderStyles = process.env.NODE_ENV === "production" ? {
+  name: "1s8f72p",
+  styles: "gap:8px;display:flex;align-items:center"
+} : {
+  name: "khhwdo-stepHeaderStyles",
+  styles: "gap:8px;display:flex;align-items:center;label:stepHeaderStyles;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9zdGVwL1N0ZXAuc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTZDbUMiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL3N0ZXAvU3RlcC5zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyB0aGVtZSB9IGZyb20gJ0BkZmRzLXVpL3RoZW1lJ1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5cbi8vIHNwYWNlIGJldHdlZW4gbGFiZWwgYW5kIHN0ZXBCdXR0b25cbmNvbnN0IHNwYWNpbmcgPSB0aGVtZS5zcGFjaW5nLnhzXG5jb25zdCBidXR0b25XaWR0aCA9IHRoZW1lLnNwYWNpbmcubVxuY29uc3QgY29ubmVjdGVyV2lkdGggPSAnMXB4J1xuZXhwb3J0IGNvbnN0IHN0ZXBXcmFwcGVySG9yaXpvbnRhbFN0eWxlcyA9IGNzc2BcbiAgZGlzcGxheTogZmxleDtcbiAgZ2FwOiAke3NwYWNpbmd9O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAmOm5vdCg6bGFzdC1jaGlsZCkge1xuICAgIGZsZXg6IDE7XG4gICAgJjphZnRlciB7XG4gICAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgICAgY29udGVudDogJyc7XG4gICAgICBoZWlnaHQ6ICR7Y29ubmVjdGVyV2lkdGh9O1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt0aGVtZS5jb2xvcnMudGV4dC5wcmltYXJ5LmRpc2FibGVkfTtcbiAgICAgIGZsZXg6IDE7XG4gICAgICB3aWR0aDogMTAwJTtcbiAgICAgIG1hcmdpbi1yaWdodDogJHtzcGFjaW5nfTtcbiAgICB9XG4gIH1cbmBcblxuZXhwb3J0IGNvbnN0IHN0ZXBXcmFwcGVyVmVydGljYWxTdHlsZXMgPSBjc3NgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgcGFkZGluZy1ib3R0b206IDJlbTtcbiAgJjpub3QoOmxhc3QtY2hpbGQpIHtcbiAgICAmOmFmdGVyIHtcbiAgICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICBjb250ZW50OiAnJztcbiAgICAgIHRvcDogY2FsYygke2J1dHRvbldpZHRofSArICR7c3BhY2luZ30pO1xuICAgICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVYKGNhbGMoKCR7YnV0dG9uV2lkdGh9IC8gMikgLSAxcHgpKTtcbiAgICAgIHdpZHRoOiAke2Nvbm5lY3RlcldpZHRofTtcbiAgICAgIGJhY2tncm91bmQ6ICR7dGhlbWUuY29sb3JzLnRleHQucHJpbWFyeS5kaXNhYmxlZH07XG4gICAgICBoZWlnaHQ6IGNhbGMoMTAwJSAtICR7YnV0dG9uV2lkdGh9IC0gKDIgKiAke3NwYWNpbmd9KSk7XG4gICAgfVxuICB9XG5gXG5cbmV4cG9ydCBjb25zdCBzdGVwSGVhZGVyU3R5bGVzID0gY3NzYFxuICBnYXA6IDhweDtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbmBcblxuZXhwb3J0IGNvbnN0IHN0ZXBDb250ZW50U3R5bGVzID0gY3NzYFxuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoY2FsYygzICogJHtzcGFjaW5nfSkpO1xuYFxuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+exports.stepHeaderStyles = stepHeaderStyles;
+const stepContentStyles = /*#__PURE__*/(0, _react.css)("transform:translateX(calc(3 * ", spacing, "));" + (process.env.NODE_ENV === "production" ? "" : ";label:stepContentStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9zdGVwL1N0ZXAuc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1Eb0MiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL3N0ZXAvU3RlcC5zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyB0aGVtZSB9IGZyb20gJ0BkZmRzLXVpL3RoZW1lJ1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5cbi8vIHNwYWNlIGJldHdlZW4gbGFiZWwgYW5kIHN0ZXBCdXR0b25cbmNvbnN0IHNwYWNpbmcgPSB0aGVtZS5zcGFjaW5nLnhzXG5jb25zdCBidXR0b25XaWR0aCA9IHRoZW1lLnNwYWNpbmcubVxuY29uc3QgY29ubmVjdGVyV2lkdGggPSAnMXB4J1xuZXhwb3J0IGNvbnN0IHN0ZXBXcmFwcGVySG9yaXpvbnRhbFN0eWxlcyA9IGNzc2BcbiAgZGlzcGxheTogZmxleDtcbiAgZ2FwOiAke3NwYWNpbmd9O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAmOm5vdCg6bGFzdC1jaGlsZCkge1xuICAgIGZsZXg6IDE7XG4gICAgJjphZnRlciB7XG4gICAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgICAgY29udGVudDogJyc7XG4gICAgICBoZWlnaHQ6ICR7Y29ubmVjdGVyV2lkdGh9O1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt0aGVtZS5jb2xvcnMudGV4dC5wcmltYXJ5LmRpc2FibGVkfTtcbiAgICAgIGZsZXg6IDE7XG4gICAgICB3aWR0aDogMTAwJTtcbiAgICAgIG1hcmdpbi1yaWdodDogJHtzcGFjaW5nfTtcbiAgICB9XG4gIH1cbmBcblxuZXhwb3J0IGNvbnN0IHN0ZXBXcmFwcGVyVmVydGljYWxTdHlsZXMgPSBjc3NgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgcGFkZGluZy1ib3R0b206IDJlbTtcbiAgJjpub3QoOmxhc3QtY2hpbGQpIHtcbiAgICAmOmFmdGVyIHtcbiAgICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICBjb250ZW50OiAnJztcbiAgICAgIHRvcDogY2FsYygke2J1dHRvbldpZHRofSArICR7c3BhY2luZ30pO1xuICAgICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVYKGNhbGMoKCR7YnV0dG9uV2lkdGh9IC8gMikgLSAxcHgpKTtcbiAgICAgIHdpZHRoOiAke2Nvbm5lY3RlcldpZHRofTtcbiAgICAgIGJhY2tncm91bmQ6ICR7dGhlbWUuY29sb3JzLnRleHQucHJpbWFyeS5kaXNhYmxlZH07XG4gICAgICBoZWlnaHQ6IGNhbGMoMTAwJSAtICR7YnV0dG9uV2lkdGh9IC0gKDIgKiAke3NwYWNpbmd9KSk7XG4gICAgfVxuICB9XG5gXG5cbmV4cG9ydCBjb25zdCBzdGVwSGVhZGVyU3R5bGVzID0gY3NzYFxuICBnYXA6IDhweDtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbmBcblxuZXhwb3J0IGNvbnN0IHN0ZXBDb250ZW50U3R5bGVzID0gY3NzYFxuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoY2FsYygzICogJHtzcGFjaW5nfSkpO1xuYFxuIl19 */");
+exports.stepContentStyles = stepContentStyles;

package/cjs/step/StepButton.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare type StepButtonProps = (React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    handleStepClick?: () => void;
+});
+declare const StepButtom: React.FC<StepButtonProps>;
+export default StepButtom;

package/cjs/step/StepButton.js

@@ -0,0 +1,136 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@emotion/react");
+
+var _button = require("../button");
+
+var _system = require("@dfds-ui/icons/system");
+
+var _theme = require("@dfds-ui/theme");
+
+var _StepContext = _interopRequireDefault(require("./StepContext"));
+
+const _excluded = ["handleStepClick"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+const buttonStyles = ({
+  active,
+  completed = false
+}) => /*#__PURE__*/(0, _react2.css)("border-radius:50%;background-color:", active || completed ? _theme.theme.colors.secondary.main : _theme.theme.colors.text.primary.disabled, ";font-weight:", active || completed ? 'bold' : '', ";width:100%;height:100%;min-width:100%;min-height:100%;display:flex;justify-content:center;align-items:center;color:#fff;:hover{color:#fff;}" + (process.env.NODE_ENV === "production" ? "" : ";label:buttonStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9zdGVwL1N0ZXBCdXR0b24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVlxRyIsImZpbGUiOiIuLi8uLi8uLi9zcmMvc3RlcC9TdGVwQnV0dG9uLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCdcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHsgSWNvbkJ1dHRvbiB9IGZyb20gJy4uL2J1dHRvbidcbmltcG9ydCB7IFllcywgRWRpdCwgU3RhdHVzQWxlcnQgfSBmcm9tICdAZGZkcy11aS9pY29ucy9zeXN0ZW0nXG5pbXBvcnQgeyBCdXR0b24gfSBmcm9tICcuLi9idXR0b24nXG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gJ0BkZmRzLXVpL3RoZW1lJ1xuaW1wb3J0IFN0ZXBDb250ZXh0IGZyb20gJy4vU3RlcENvbnRleHQnXG5cbnR5cGUgU3RlcEJ1dHRvblByb3BzID1cbiAgfCBSZWFjdC5CdXR0b25IVE1MQXR0cmlidXRlczxIVE1MQnV0dG9uRWxlbWVudD4gJiB7XG4gICAgICBoYW5kbGVTdGVwQ2xpY2s/OiAoKSA9PiB2b2lkXG4gICAgfVxuY29uc3QgYnV0dG9uU3R5bGVzID0gKHsgYWN0aXZlLCBjb21wbGV0ZWQgPSBmYWxzZSB9OiB7IGFjdGl2ZTogYm9vbGVhbjsgY29tcGxldGVkPzogYm9vbGVhbiB9KSA9PiBjc3NgXG4gIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgYmFja2dyb3VuZC1jb2xvcjogJHthY3RpdmUgfHwgY29tcGxldGVkID8gdGhlbWUuY29sb3JzLnNlY29uZGFyeS5tYWluIDogdGhlbWUuY29sb3JzLnRleHQucHJpbWFyeS5kaXNhYmxlZH07XG4gIGZvbnQtd2VpZ2h0OiAke2FjdGl2ZSB8fCBjb21wbGV0ZWQgPyAnYm9sZCcgOiAnJ307XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG4gIG1pbi13aWR0aDogMTAwJTtcbiAgbWluLWhlaWdodDogMTAwJTtcbiAgZGlzcGxheTogZmxleDtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGNvbG9yOiAjZmZmO1xuICA6aG92ZXIge1xuICAgIGNvbG9yOiAjZmZmO1xuICB9XG5gXG5cbmNvbnN0IGNvc3R1bWVCdXR0b25TdHlsZXMgPSBjc3NgXG4gIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMTAwJTtcbiAgbWluLXdpZHRoOiAxMDAlO1xuICBtaW4taGVpZ2h0OiAxMDAlO1xuICBkaXNwbGF5OiBmbGV4O1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbmBcbmNvbnN0IGVkaXRCdXR0b25TdHlsZXMgPSBjc3NgXG4gIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUuY29sb3JzLnNlY29uZGFyeS5tYWlufTtcbiAgYm9yZGVyLXJhZGl1czogNTAlO1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAxMDAlO1xuICBtaW4td2lkdGg6IDEwMCU7XG4gIG1pbi1oZWlnaHQ6IDEwMCU7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuYFxuXG5jb25zdCBTdGVwQnV0dG9uRWxlbWVudDogUmVhY3QuRkM8U3RlcEJ1dHRvblByb3BzPiA9ICh7IC4uLnJlc3QgfSkgPT4ge1xuICBjb25zdCB7IGNvbXBsZXRlZCwgaW5kZXgsIGFjdGl2ZSwgaGFzRXJyb3IsIGlzRWRpdGluZywgZGlzYWJsZWQgfSA9IFJlYWN0LnVzZUNvbnRleHQoU3RlcENvbnRleHQpXG4gIGlmIChoYXNFcnJvcikge1xuICAgIHJldHVybiAoXG4gICAgICA8SWNvbkJ1dHRvblxuICAgICAgICBkaXNhYmxlZD17ZGlzYWJsZWR9XG4gICAgICAgIGRhdGEtdGVzdGlkPVwic3RlcC1idXR0b24tZXJyb3JcIlxuICAgICAgICB7Li4ucmVzdH1cbiAgICAgICAgaWNvbj17U3RhdHVzQWxlcnR9XG4gICAgICAgIGFyaWFMYWJlbD1cIkVycm9yXCJcbiAgICAgICAgY29sb3I9e3RoZW1lLmNvbG9ycy5zdGF0dXMuYWxlcnR9XG4gICAgICAgIGNzcz17Y29zdHVtZUJ1dHRvblN0eWxlc31cbiAgICAgICAgZGlzYWJsZU92ZXJsYXlcbiAgICAgIC8+XG4gICAgKVxuICB9IGVsc2UgaWYgKGlzRWRpdGluZykge1xuICAgIHJldHVybiAoXG4gICAgICA8SWNvbkJ1dHRvblxuICAgICAgICBkaXNhYmxlZD17ZGlzYWJsZWR9XG4gICAgICAgIHsuLi5yZXN0fVxuICAgICAgICBkYXRhLXRlc3RpZD1cInN0ZXAtYnV0dG9uLWVkaXRpbmdcIlxuICAgICAgICBzaXplPVwic21hbGxcIlxuICAgICAgICBjb2xvcj1cIndoaXRlXCJcbiAgICAgICAgaWNvbj17RWRpdH1cbiAgICAgICAgYXJpYUxhYmVsPVwiQ29tcGxldGVkXCJcbiAgICAgICAgY3NzPXtlZGl0QnV0dG9uU3R5bGVzfVxuICAgICAgICBkaXNhYmxlT3ZlcmxheVxuICAgICAgLz5cbiAgICApXG4gIH0gZWxzZSBpZiAoY29tcGxldGVkKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxJY29uQnV0dG9uXG4gICAgICAgIGRpc2FibGVkPXtkaXNhYmxlZH1cbiAgICAgICAgey4uLnJlc3R9XG4gICAgICAgIGRhdGEtdGVzdGlkPVwic3RlcC1idXR0b24tY29tcGxldGVkXCJcbiAgICAgICAgc2l6ZT1cInNtYWxsXCJcbiAgICAgICAgY29sb3I9XCJ3aGl0ZVwiXG4gICAgICAgIGljb249e1llc31cbiAgICAgICAgYXJpYUxhYmVsPVwiQ29tcGxldGVkXCJcbiAgICAgICAgY3NzPXtidXR0b25TdHlsZXMoeyBhY3RpdmUsIGNvbXBsZXRlZCB9KX1cbiAgICAgICAgZGlzYWJsZU92ZXJsYXlcbiAgICAgIC8+XG4gICAgKVxuICB9XG4gIHJldHVybiAoXG4gICAgPEJ1dHRvblxuICAgICAgZGlzYWJsZWQ9e2Rpc2FibGVkfVxuICAgICAgZGF0YS10ZXN0aWQ9XCJzdGVwLWJ1dHRvbi1pbmRleFwiXG4gICAgICB7Li4ucmVzdH1cbiAgICAgIHNpemU9XCJzbWFsbFwiXG4gICAgICB2YXJpYXRpb249XCJ0ZXh0XCJcbiAgICAgIGNvbG9yPVwid2hpdGVcIlxuICAgICAgY3NzPXtidXR0b25TdHlsZXMoeyBhY3RpdmUsIGNvbXBsZXRlZCB9KX1cbiAgICA+XG4gICAgICB7aW5kZXggKyAxfVxuICAgIDwvQnV0dG9uPlxuICApXG59XG5jb25zdCBTdGVwQnV0dG9tOiBSZWFjdC5GQzxTdGVwQnV0dG9uUHJvcHM+ID0gKHsgaGFuZGxlU3RlcENsaWNrLCAuLi5yZXN0IH0pID0+IHtcbiAgcmV0dXJuIChcbiAgICA8ZGl2XG4gICAgICBkYXRhLXRlc3RpZD1cInN0ZXAtYnV0dG9uXCJcbiAgICAgIGNzcz17Y3NzYFxuICAgICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgICAgIHBhZGRpbmc6IDA7XG4gICAgICAgIHdpZHRoOiAxLjVlbTtcbiAgICAgICAgaGVpZ2h0OiAxLjVlbTtcbiAgICAgICAgbWluLXdpZHRoOiAxLjVlbTtcbiAgICAgICAgbWluLWhlaWdodDogMS41ZW07XG4gICAgICBgfVxuICAgID5cbiAgICAgIDxTdGVwQnV0dG9uRWxlbWVudCB7Li4ucmVzdH0gb25DbGljaz17aGFuZGxlU3RlcENsaWNrfSAvPlxuICAgIDwvZGl2PlxuICApXG59XG5leHBvcnQgZGVmYXVsdCBTdGVwQnV0dG9tXG4iXX0= */");
+
+const costumeButtonStyles = process.env.NODE_ENV === "production" ? {
+  name: "jue234",
+  styles: "border-radius:50%;width:100%;height:100%;min-width:100%;min-height:100%;display:flex;justify-content:center;align-items:center"
+} : {
+  name: "1au5w8v-costumeButtonStyles",
+  styles: "border-radius:50%;width:100%;height:100%;min-width:100%;min-height:100%;display:flex;justify-content:center;align-items:center;label:costumeButtonStyles;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9zdGVwL1N0ZXBCdXR0b24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTZCK0IiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL3N0ZXAvU3RlcEJ1dHRvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCB7IEljb25CdXR0b24gfSBmcm9tICcuLi9idXR0b24nXG5pbXBvcnQgeyBZZXMsIEVkaXQsIFN0YXR1c0FsZXJ0IH0gZnJvbSAnQGRmZHMtdWkvaWNvbnMvc3lzdGVtJ1xuaW1wb3J0IHsgQnV0dG9uIH0gZnJvbSAnLi4vYnV0dG9uJ1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tICdAZGZkcy11aS90aGVtZSdcbmltcG9ydCBTdGVwQ29udGV4dCBmcm9tICcuL1N0ZXBDb250ZXh0J1xuXG50eXBlIFN0ZXBCdXR0b25Qcm9wcyA9XG4gIHwgUmVhY3QuQnV0dG9uSFRNTEF0dHJpYnV0ZXM8SFRNTEJ1dHRvbkVsZW1lbnQ+ICYge1xuICAgICAgaGFuZGxlU3RlcENsaWNrPzogKCkgPT4gdm9pZFxuICAgIH1cbmNvbnN0IGJ1dHRvblN0eWxlcyA9ICh7IGFjdGl2ZSwgY29tcGxldGVkID0gZmFsc2UgfTogeyBhY3RpdmU6IGJvb2xlYW47IGNvbXBsZXRlZD86IGJvb2xlYW4gfSkgPT4gY3NzYFxuICBib3JkZXItcmFkaXVzOiA1MCU7XG4gIGJhY2tncm91bmQtY29sb3I6ICR7YWN0aXZlIHx8IGNvbXBsZXRlZCA/IHRoZW1lLmNvbG9ycy5zZWNvbmRhcnkubWFpbiA6IHRoZW1lLmNvbG9ycy50ZXh0LnByaW1hcnkuZGlzYWJsZWR9O1xuICBmb250LXdlaWdodDogJHthY3RpdmUgfHwgY29tcGxldGVkID8gJ2JvbGQnIDogJyd9O1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAxMDAlO1xuICBtaW4td2lkdGg6IDEwMCU7XG4gIG1pbi1oZWlnaHQ6IDEwMCU7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBjb2xvcjogI2ZmZjtcbiAgOmhvdmVyIHtcbiAgICBjb2xvcjogI2ZmZjtcbiAgfVxuYFxuXG5jb25zdCBjb3N0dW1lQnV0dG9uU3R5bGVzID0gY3NzYFxuICBib3JkZXItcmFkaXVzOiA1MCU7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG4gIG1pbi13aWR0aDogMTAwJTtcbiAgbWluLWhlaWdodDogMTAwJTtcbiAgZGlzcGxheTogZmxleDtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5gXG5jb25zdCBlZGl0QnV0dG9uU3R5bGVzID0gY3NzYFxuICBiYWNrZ3JvdW5kLWNvbG9yOiAke3RoZW1lLmNvbG9ycy5zZWNvbmRhcnkubWFpbn07XG4gIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMTAwJTtcbiAgbWluLXdpZHRoOiAxMDAlO1xuICBtaW4taGVpZ2h0OiAxMDAlO1xuICBkaXNwbGF5OiBmbGV4O1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbmBcblxuY29uc3QgU3RlcEJ1dHRvbkVsZW1lbnQ6IFJlYWN0LkZDPFN0ZXBCdXR0b25Qcm9wcz4gPSAoeyAuLi5yZXN0IH0pID0+IHtcbiAgY29uc3QgeyBjb21wbGV0ZWQsIGluZGV4LCBhY3RpdmUsIGhhc0Vycm9yLCBpc0VkaXRpbmcsIGRpc2FibGVkIH0gPSBSZWFjdC51c2VDb250ZXh0KFN0ZXBDb250ZXh0KVxuICBpZiAoaGFzRXJyb3IpIHtcbiAgICByZXR1cm4gKFxuICAgICAgPEljb25CdXR0b25cbiAgICAgICAgZGlzYWJsZWQ9e2Rpc2FibGVkfVxuICAgICAgICBkYXRhLXRlc3RpZD1cInN0ZXAtYnV0dG9uLWVycm9yXCJcbiAgICAgICAgey4uLnJlc3R9XG4gICAgICAgIGljb249e1N0YXR1c0FsZXJ0fVxuICAgICAgICBhcmlhTGFiZWw9XCJFcnJvclwiXG4gICAgICAgIGNvbG9yPXt0aGVtZS5jb2xvcnMuc3RhdHVzLmFsZXJ0fVxuICAgICAgICBjc3M9e2Nvc3R1bWVCdXR0b25TdHlsZXN9XG4gICAgICAgIGRpc2FibGVPdmVybGF5XG4gICAgICAvPlxuICAgIClcbiAgfSBlbHNlIGlmIChpc0VkaXRpbmcpIHtcbiAgICByZXR1cm4gKFxuICAgICAgPEljb25CdXR0b25cbiAgICAgICAgZGlzYWJsZWQ9e2Rpc2FibGVkfVxuICAgICAgICB7Li4ucmVzdH1cbiAgICAgICAgZGF0YS10ZXN0aWQ9XCJzdGVwLWJ1dHRvbi1lZGl0aW5nXCJcbiAgICAgICAgc2l6ZT1cInNtYWxsXCJcbiAgICAgICAgY29sb3I9XCJ3aGl0ZVwiXG4gICAgICAgIGljb249e0VkaXR9XG4gICAgICAgIGFyaWFMYWJlbD1cIkNvbXBsZXRlZFwiXG4gICAgICAgIGNzcz17ZWRpdEJ1dHRvblN0eWxlc31cbiAgICAgICAgZGlzYWJsZU92ZXJsYXlcbiAgICAgIC8+XG4gICAgKVxuICB9IGVsc2UgaWYgKGNvbXBsZXRlZCkge1xuICAgIHJldHVybiAoXG4gICAgICA8SWNvbkJ1dHRvblxuICAgICAgICBkaXNhYmxlZD17ZGlzYWJsZWR9XG4gICAgICAgIHsuLi5yZXN0fVxuICAgICAgICBkYXRhLXRlc3RpZD1cInN0ZXAtYnV0dG9uLWNvbXBsZXRlZFwiXG4gICAgICAgIHNpemU9XCJzbWFsbFwiXG4gICAgICAgIGNvbG9yPVwid2hpdGVcIlxuICAgICAgICBpY29uPXtZZXN9XG4gICAgICAgIGFyaWFMYWJlbD1cIkNvbXBsZXRlZFwiXG4gICAgICAgIGNzcz17YnV0dG9uU3R5bGVzKHsgYWN0aXZlLCBjb21wbGV0ZWQgfSl9XG4gICAgICAgIGRpc2FibGVPdmVybGF5XG4gICAgICAvPlxuICAgIClcbiAgfVxuICByZXR1cm4gKFxuICAgIDxCdXR0b25cbiAgICAgIGRpc2FibGVkPXtkaXNhYmxlZH1cbiAgICAgIGRhdGEtdGVzdGlkPVwic3RlcC1idXR0b24taW5kZXhcIlxuICAgICAgey4uLnJlc3R9XG4gICAgICBzaXplPVwic21hbGxcIlxuICAgICAgdmFyaWF0aW9uPVwidGV4dFwiXG4gICAgICBjb2xvcj1cIndoaXRlXCJcbiAgICAgIGNzcz17YnV0dG9uU3R5bGVzKHsgYWN0aXZlLCBjb21wbGV0ZWQgfSl9XG4gICAgPlxuICAgICAge2luZGV4ICsgMX1cbiAgICA8L0J1dHRvbj5cbiAgKVxufVxuY29uc3QgU3RlcEJ1dHRvbTogUmVhY3QuRkM8U3RlcEJ1dHRvblByb3BzPiA9ICh7IGhhbmRsZVN0ZXBDbGljaywgLi4ucmVzdCB9KSA9PiB7XG4gIHJldHVybiAoXG4gICAgPGRpdlxuICAgICAgZGF0YS10ZXN0aWQ9XCJzdGVwLWJ1dHRvblwiXG4gICAgICBjc3M9e2Nzc2BcbiAgICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgICAgICBwYWRkaW5nOiAwO1xuICAgICAgICB3aWR0aDogMS41ZW07XG4gICAgICAgIGhlaWdodDogMS41ZW07XG4gICAgICAgIG1pbi13aWR0aDogMS41ZW07XG4gICAgICAgIG1pbi1oZWlnaHQ6IDEuNWVtO1xuICAgICAgYH1cbiAgICA+XG4gICAgICA8U3RlcEJ1dHRvbkVsZW1lbnQgey4uLnJlc3R9IG9uQ2xpY2s9e2hhbmRsZVN0ZXBDbGlja30gLz5cbiAgICA8L2Rpdj5cbiAgKVxufVxuZXhwb3J0IGRlZmF1bHQgU3RlcEJ1dHRvbVxuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+const editButtonStyles = /*#__PURE__*/(0, _react2.css)("background-color:", _theme.theme.colors.secondary.main, ";border-radius:50%;width:100%;height:100%;min-width:100%;min-height:100%;display:flex;justify-content:center;align-items:center;" + (process.env.NODE_ENV === "production" ? "" : ";label:editButtonStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9zdGVwL1N0ZXBCdXR0b24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXVDNEIiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL3N0ZXAvU3RlcEJ1dHRvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCB7IEljb25CdXR0b24gfSBmcm9tICcuLi9idXR0b24nXG5pbXBvcnQgeyBZZXMsIEVkaXQsIFN0YXR1c0FsZXJ0IH0gZnJvbSAnQGRmZHMtdWkvaWNvbnMvc3lzdGVtJ1xuaW1wb3J0IHsgQnV0dG9uIH0gZnJvbSAnLi4vYnV0dG9uJ1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tICdAZGZkcy11aS90aGVtZSdcbmltcG9ydCBTdGVwQ29udGV4dCBmcm9tICcuL1N0ZXBDb250ZXh0J1xuXG50eXBlIFN0ZXBCdXR0b25Qcm9wcyA9XG4gIHwgUmVhY3QuQnV0dG9uSFRNTEF0dHJpYnV0ZXM8SFRNTEJ1dHRvbkVsZW1lbnQ+ICYge1xuICAgICAgaGFuZGxlU3RlcENsaWNrPzogKCkgPT4gdm9pZFxuICAgIH1cbmNvbnN0IGJ1dHRvblN0eWxlcyA9ICh7IGFjdGl2ZSwgY29tcGxldGVkID0gZmFsc2UgfTogeyBhY3RpdmU6IGJvb2xlYW47IGNvbXBsZXRlZD86IGJvb2xlYW4gfSkgPT4gY3NzYFxuICBib3JkZXItcmFkaXVzOiA1MCU7XG4gIGJhY2tncm91bmQtY29sb3I6ICR7YWN0aXZlIHx8IGNvbXBsZXRlZCA/IHRoZW1lLmNvbG9ycy5zZWNvbmRhcnkubWFpbiA6IHRoZW1lLmNvbG9ycy50ZXh0LnByaW1hcnkuZGlzYWJsZWR9O1xuICBmb250LXdlaWdodDogJHthY3RpdmUgfHwgY29tcGxldGVkID8gJ2JvbGQnIDogJyd9O1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAxMDAlO1xuICBtaW4td2lkdGg6IDEwMCU7XG4gIG1pbi1oZWlnaHQ6IDEwMCU7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBjb2xvcjogI2ZmZjtcbiAgOmhvdmVyIHtcbiAgICBjb2xvcjogI2ZmZjtcbiAgfVxuYFxuXG5jb25zdCBjb3N0dW1lQnV0dG9uU3R5bGVzID0gY3NzYFxuICBib3JkZXItcmFkaXVzOiA1MCU7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG4gIG1pbi13aWR0aDogMTAwJTtcbiAgbWluLWhlaWdodDogMTAwJTtcbiAgZGlzcGxheTogZmxleDtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5gXG5jb25zdCBlZGl0QnV0dG9uU3R5bGVzID0gY3NzYFxuICBiYWNrZ3JvdW5kLWNvbG9yOiAke3RoZW1lLmNvbG9ycy5zZWNvbmRhcnkubWFpbn07XG4gIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMTAwJTtcbiAgbWluLXdpZHRoOiAxMDAlO1xuICBtaW4taGVpZ2h0OiAxMDAlO1xuICBkaXNwbGF5OiBmbGV4O1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbmBcblxuY29uc3QgU3RlcEJ1dHRvbkVsZW1lbnQ6IFJlYWN0LkZDPFN0ZXBCdXR0b25Qcm9wcz4gPSAoeyAuLi5yZXN0IH0pID0+IHtcbiAgY29uc3QgeyBjb21wbGV0ZWQsIGluZGV4LCBhY3RpdmUsIGhhc0Vycm9yLCBpc0VkaXRpbmcsIGRpc2FibGVkIH0gPSBSZWFjdC51c2VDb250ZXh0KFN0ZXBDb250ZXh0KVxuICBpZiAoaGFzRXJyb3IpIHtcbiAgICByZXR1cm4gKFxuICAgICAgPEljb25CdXR0b25cbiAgICAgICAgZGlzYWJsZWQ9e2Rpc2FibGVkfVxuICAgICAgICBkYXRhLXRlc3RpZD1cInN0ZXAtYnV0dG9uLWVycm9yXCJcbiAgICAgICAgey4uLnJlc3R9XG4gICAgICAgIGljb249e1N0YXR1c0FsZXJ0fVxuICAgICAgICBhcmlhTGFiZWw9XCJFcnJvclwiXG4gICAgICAgIGNvbG9yPXt0aGVtZS5jb2xvcnMuc3RhdHVzLmFsZXJ0fVxuICAgICAgICBjc3M9e2Nvc3R1bWVCdXR0b25TdHlsZXN9XG4gICAgICAgIGRpc2FibGVPdmVybGF5XG4gICAgICAvPlxuICAgIClcbiAgfSBlbHNlIGlmIChpc0VkaXRpbmcpIHtcbiAgICByZXR1cm4gKFxuICAgICAgPEljb25CdXR0b25cbiAgICAgICAgZGlzYWJsZWQ9e2Rpc2FibGVkfVxuICAgICAgICB7Li4ucmVzdH1cbiAgICAgICAgZGF0YS10ZXN0aWQ9XCJzdGVwLWJ1dHRvbi1lZGl0aW5nXCJcbiAgICAgICAgc2l6ZT1cInNtYWxsXCJcbiAgICAgICAgY29sb3I9XCJ3aGl0ZVwiXG4gICAgICAgIGljb249e0VkaXR9XG4gICAgICAgIGFyaWFMYWJlbD1cIkNvbXBsZXRlZFwiXG4gICAgICAgIGNzcz17ZWRpdEJ1dHRvblN0eWxlc31cbiAgICAgICAgZGlzYWJsZU92ZXJsYXlcbiAgICAgIC8+XG4gICAgKVxuICB9IGVsc2UgaWYgKGNvbXBsZXRlZCkge1xuICAgIHJldHVybiAoXG4gICAgICA8SWNvbkJ1dHRvblxuICAgICAgICBkaXNhYmxlZD17ZGlzYWJsZWR9XG4gICAgICAgIHsuLi5yZXN0fVxuICAgICAgICBkYXRhLXRlc3RpZD1cInN0ZXAtYnV0dG9uLWNvbXBsZXRlZFwiXG4gICAgICAgIHNpemU9XCJzbWFsbFwiXG4gICAgICAgIGNvbG9yPVwid2hpdGVcIlxuICAgICAgICBpY29uPXtZZXN9XG4gICAgICAgIGFyaWFMYWJlbD1cIkNvbXBsZXRlZFwiXG4gICAgICAgIGNzcz17YnV0dG9uU3R5bGVzKHsgYWN0aXZlLCBjb21wbGV0ZWQgfSl9XG4gICAgICAgIGRpc2FibGVPdmVybGF5XG4gICAgICAvPlxuICAgIClcbiAgfVxuICByZXR1cm4gKFxuICAgIDxCdXR0b25cbiAgICAgIGRpc2FibGVkPXtkaXNhYmxlZH1cbiAgICAgIGRhdGEtdGVzdGlkPVwic3RlcC1idXR0b24taW5kZXhcIlxuICAgICAgey4uLnJlc3R9XG4gICAgICBzaXplPVwic21hbGxcIlxuICAgICAgdmFyaWF0aW9uPVwidGV4dFwiXG4gICAgICBjb2xvcj1cIndoaXRlXCJcbiAgICAgIGNzcz17YnV0dG9uU3R5bGVzKHsgYWN0aXZlLCBjb21wbGV0ZWQgfSl9XG4gICAgPlxuICAgICAge2luZGV4ICsgMX1cbiAgICA8L0J1dHRvbj5cbiAgKVxufVxuY29uc3QgU3RlcEJ1dHRvbTogUmVhY3QuRkM8U3RlcEJ1dHRvblByb3BzPiA9ICh7IGhhbmRsZVN0ZXBDbGljaywgLi4ucmVzdCB9KSA9PiB7XG4gIHJldHVybiAoXG4gICAgPGRpdlxuICAgICAgZGF0YS10ZXN0aWQ9XCJzdGVwLWJ1dHRvblwiXG4gICAgICBjc3M9e2Nzc2BcbiAgICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgICAgICBwYWRkaW5nOiAwO1xuICAgICAgICB3aWR0aDogMS41ZW07XG4gICAgICAgIGhlaWdodDogMS41ZW07XG4gICAgICAgIG1pbi13aWR0aDogMS41ZW07XG4gICAgICAgIG1pbi1oZWlnaHQ6IDEuNWVtO1xuICAgICAgYH1cbiAgICA+XG4gICAgICA8U3RlcEJ1dHRvbkVsZW1lbnQgey4uLnJlc3R9IG9uQ2xpY2s9e2hhbmRsZVN0ZXBDbGlja30gLz5cbiAgICA8L2Rpdj5cbiAgKVxufVxuZXhwb3J0IGRlZmF1bHQgU3RlcEJ1dHRvbVxuIl19 */");
+
+const StepButtonElement = _ref2 => {
+  let rest = _extends({}, _ref2);
+
+  const _React$useContext = _react.default.useContext(_StepContext.default),
+        completed = _React$useContext.completed,
+        index = _React$useContext.index,
+        active = _React$useContext.active,
+        hasError = _React$useContext.hasError,
+        isEditing = _React$useContext.isEditing,
+        disabled = _React$useContext.disabled;
+
+  if (hasError) {
+    return (0, _react2.jsx)(_button.IconButton, _extends({
+      disabled: disabled,
+      "data-testid": "step-button-error"
+    }, rest, {
+      icon: _system.StatusAlert,
+      ariaLabel: "Error",
+      color: _theme.theme.colors.status.alert,
+      css: costumeButtonStyles,
+      disableOverlay: true
+    }));
+  } else if (isEditing) {
+    return (0, _react2.jsx)(_button.IconButton, _extends({
+      disabled: disabled
+    }, rest, {
+      "data-testid": "step-button-editing",
+      size: "small",
+      color: "white",
+      icon: _system.Edit,
+      ariaLabel: "Completed",
+      css: editButtonStyles,
+      disableOverlay: true
+    }));
+  } else if (completed) {
+    return (0, _react2.jsx)(_button.IconButton, _extends({
+      disabled: disabled
+    }, rest, {
+      "data-testid": "step-button-completed",
+      size: "small",
+      color: "white",
+      icon: _system.Yes,
+      ariaLabel: "Completed",
+      css: buttonStyles({
+        active,
+        completed
+      }),
+      disableOverlay: true
+    }));
+  }
+
+  return (0, _react2.jsx)(_button.Button, _extends({
+    disabled: disabled,
+    "data-testid": "step-button-index"
+  }, rest, {
+    size: "small",
+    variation: "text",
+    color: "white",
+    css: buttonStyles({
+      active,
+      completed
+    })
+  }), index + 1);
+};
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "br76u9",
+  styles: "position:relative;padding:0;width:1.5em;height:1.5em;min-width:1.5em;min-height:1.5em"
+} : {
+  name: "e5lzjv-StepButtom",
+  styles: "position:relative;padding:0;width:1.5em;height:1.5em;min-width:1.5em;min-height:1.5em;label:StepButtom;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9zdGVwL1N0ZXBCdXR0b24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlIYyIsImZpbGUiOiIuLi8uLi8uLi9zcmMvc3RlcC9TdGVwQnV0dG9uLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCdcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHsgSWNvbkJ1dHRvbiB9IGZyb20gJy4uL2J1dHRvbidcbmltcG9ydCB7IFllcywgRWRpdCwgU3RhdHVzQWxlcnQgfSBmcm9tICdAZGZkcy11aS9pY29ucy9zeXN0ZW0nXG5pbXBvcnQgeyBCdXR0b24gfSBmcm9tICcuLi9idXR0b24nXG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gJ0BkZmRzLXVpL3RoZW1lJ1xuaW1wb3J0IFN0ZXBDb250ZXh0IGZyb20gJy4vU3RlcENvbnRleHQnXG5cbnR5cGUgU3RlcEJ1dHRvblByb3BzID1cbiAgfCBSZWFjdC5CdXR0b25IVE1MQXR0cmlidXRlczxIVE1MQnV0dG9uRWxlbWVudD4gJiB7XG4gICAgICBoYW5kbGVTdGVwQ2xpY2s/OiAoKSA9PiB2b2lkXG4gICAgfVxuY29uc3QgYnV0dG9uU3R5bGVzID0gKHsgYWN0aXZlLCBjb21wbGV0ZWQgPSBmYWxzZSB9OiB7IGFjdGl2ZTogYm9vbGVhbjsgY29tcGxldGVkPzogYm9vbGVhbiB9KSA9PiBjc3NgXG4gIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgYmFja2dyb3VuZC1jb2xvcjogJHthY3RpdmUgfHwgY29tcGxldGVkID8gdGhlbWUuY29sb3JzLnNlY29uZGFyeS5tYWluIDogdGhlbWUuY29sb3JzLnRleHQucHJpbWFyeS5kaXNhYmxlZH07XG4gIGZvbnQtd2VpZ2h0OiAke2FjdGl2ZSB8fCBjb21wbGV0ZWQgPyAnYm9sZCcgOiAnJ307XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG4gIG1pbi13aWR0aDogMTAwJTtcbiAgbWluLWhlaWdodDogMTAwJTtcbiAgZGlzcGxheTogZmxleDtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGNvbG9yOiAjZmZmO1xuICA6aG92ZXIge1xuICAgIGNvbG9yOiAjZmZmO1xuICB9XG5gXG5cbmNvbnN0IGNvc3R1bWVCdXR0b25TdHlsZXMgPSBjc3NgXG4gIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMTAwJTtcbiAgbWluLXdpZHRoOiAxMDAlO1xuICBtaW4taGVpZ2h0OiAxMDAlO1xuICBkaXNwbGF5OiBmbGV4O1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbmBcbmNvbnN0IGVkaXRCdXR0b25TdHlsZXMgPSBjc3NgXG4gIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUuY29sb3JzLnNlY29uZGFyeS5tYWlufTtcbiAgYm9yZGVyLXJhZGl1czogNTAlO1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAxMDAlO1xuICBtaW4td2lkdGg6IDEwMCU7XG4gIG1pbi1oZWlnaHQ6IDEwMCU7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuYFxuXG5jb25zdCBTdGVwQnV0dG9uRWxlbWVudDogUmVhY3QuRkM8U3RlcEJ1dHRvblByb3BzPiA9ICh7IC4uLnJlc3QgfSkgPT4ge1xuICBjb25zdCB7IGNvbXBsZXRlZCwgaW5kZXgsIGFjdGl2ZSwgaGFzRXJyb3IsIGlzRWRpdGluZywgZGlzYWJsZWQgfSA9IFJlYWN0LnVzZUNvbnRleHQoU3RlcENvbnRleHQpXG4gIGlmIChoYXNFcnJvcikge1xuICAgIHJldHVybiAoXG4gICAgICA8SWNvbkJ1dHRvblxuICAgICAgICBkaXNhYmxlZD17ZGlzYWJsZWR9XG4gICAgICAgIGRhdGEtdGVzdGlkPVwic3RlcC1idXR0b24tZXJyb3JcIlxuICAgICAgICB7Li4ucmVzdH1cbiAgICAgICAgaWNvbj17U3RhdHVzQWxlcnR9XG4gICAgICAgIGFyaWFMYWJlbD1cIkVycm9yXCJcbiAgICAgICAgY29sb3I9e3RoZW1lLmNvbG9ycy5zdGF0dXMuYWxlcnR9XG4gICAgICAgIGNzcz17Y29zdHVtZUJ1dHRvblN0eWxlc31cbiAgICAgICAgZGlzYWJsZU92ZXJsYXlcbiAgICAgIC8+XG4gICAgKVxuICB9IGVsc2UgaWYgKGlzRWRpdGluZykge1xuICAgIHJldHVybiAoXG4gICAgICA8SWNvbkJ1dHRvblxuICAgICAgICBkaXNhYmxlZD17ZGlzYWJsZWR9XG4gICAgICAgIHsuLi5yZXN0fVxuICAgICAgICBkYXRhLXRlc3RpZD1cInN0ZXAtYnV0dG9uLWVkaXRpbmdcIlxuICAgICAgICBzaXplPVwic21hbGxcIlxuICAgICAgICBjb2xvcj1cIndoaXRlXCJcbiAgICAgICAgaWNvbj17RWRpdH1cbiAgICAgICAgYXJpYUxhYmVsPVwiQ29tcGxldGVkXCJcbiAgICAgICAgY3NzPXtlZGl0QnV0dG9uU3R5bGVzfVxuICAgICAgICBkaXNhYmxlT3ZlcmxheVxuICAgICAgLz5cbiAgICApXG4gIH0gZWxzZSBpZiAoY29tcGxldGVkKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxJY29uQnV0dG9uXG4gICAgICAgIGRpc2FibGVkPXtkaXNhYmxlZH1cbiAgICAgICAgey4uLnJlc3R9XG4gICAgICAgIGRhdGEtdGVzdGlkPVwic3RlcC1idXR0b24tY29tcGxldGVkXCJcbiAgICAgICAgc2l6ZT1cInNtYWxsXCJcbiAgICAgICAgY29sb3I9XCJ3aGl0ZVwiXG4gICAgICAgIGljb249e1llc31cbiAgICAgICAgYXJpYUxhYmVsPVwiQ29tcGxldGVkXCJcbiAgICAgICAgY3NzPXtidXR0b25TdHlsZXMoeyBhY3RpdmUsIGNvbXBsZXRlZCB9KX1cbiAgICAgICAgZGlzYWJsZU92ZXJsYXlcbiAgICAgIC8+XG4gICAgKVxuICB9XG4gIHJldHVybiAoXG4gICAgPEJ1dHRvblxuICAgICAgZGlzYWJsZWQ9e2Rpc2FibGVkfVxuICAgICAgZGF0YS10ZXN0aWQ9XCJzdGVwLWJ1dHRvbi1pbmRleFwiXG4gICAgICB7Li4ucmVzdH1cbiAgICAgIHNpemU9XCJzbWFsbFwiXG4gICAgICB2YXJpYXRpb249XCJ0ZXh0XCJcbiAgICAgIGNvbG9yPVwid2hpdGVcIlxuICAgICAgY3NzPXtidXR0b25TdHlsZXMoeyBhY3RpdmUsIGNvbXBsZXRlZCB9KX1cbiAgICA+XG4gICAgICB7aW5kZXggKyAxfVxuICAgIDwvQnV0dG9uPlxuICApXG59XG5jb25zdCBTdGVwQnV0dG9tOiBSZWFjdC5GQzxTdGVwQnV0dG9uUHJvcHM+ID0gKHsgaGFuZGxlU3RlcENsaWNrLCAuLi5yZXN0IH0pID0+IHtcbiAgcmV0dXJuIChcbiAgICA8ZGl2XG4gICAgICBkYXRhLXRlc3RpZD1cInN0ZXAtYnV0dG9uXCJcbiAgICAgIGNzcz17Y3NzYFxuICAgICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgICAgIHBhZGRpbmc6IDA7XG4gICAgICAgIHdpZHRoOiAxLjVlbTtcbiAgICAgICAgaGVpZ2h0OiAxLjVlbTtcbiAgICAgICAgbWluLXdpZHRoOiAxLjVlbTtcbiAgICAgICAgbWluLWhlaWdodDogMS41ZW07XG4gICAgICBgfVxuICAgID5cbiAgICAgIDxTdGVwQnV0dG9uRWxlbWVudCB7Li4ucmVzdH0gb25DbGljaz17aGFuZGxlU3RlcENsaWNrfSAvPlxuICAgIDwvZGl2PlxuICApXG59XG5leHBvcnQgZGVmYXVsdCBTdGVwQnV0dG9tXG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+const StepButtom = _ref3 => {
+  let handleStepClick = _ref3.handleStepClick,
+      rest = _objectWithoutProperties(_ref3, _excluded);
+
+  return (0, _react2.jsx)("div", {
+    "data-testid": "step-button",
+    css: _ref
+  }, (0, _react2.jsx)(StepButtonElement, _extends({}, rest, {
+    onClick: handleStepClick
+  })));
+};
+
+var _default = StepButtom;
+exports.default = _default;

package/cjs/step/StepContent.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+declare type StepContentProps = {
+    children: ReactNode;
+};
+declare const StepContent: ({ children }: StepContentProps) => JSX.Element;
+export default StepContent;

package/cjs/step/StepContent.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@emotion/react");
+
+var _accordion = require("../accordion");
+
+var _StepContext = _interopRequireDefault(require("../step/StepContext"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1go1kzf",
+  styles: "& .accordion__content{padding:0;background-color:inherit;}"
+} : {
+  name: "ayumll-StepContent",
+  styles: "& .accordion__content{padding:0;background-color:inherit;};label:StepContent;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9zdGVwL1N0ZXBDb250ZW50LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF1QmdCIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9zdGVwL1N0ZXBDb250ZW50LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHsgQWNjb3JkaW9uIH0gZnJvbSAnLi4vYWNjb3JkaW9uJ1xuaW1wb3J0IFN0ZXBDb250ZXh0IGZyb20gJy4uL3N0ZXAvU3RlcENvbnRleHQnXG5cbnR5cGUgU3RlcENvbnRlbnRQcm9wcyA9IHtcbiAgLypcbiAgICogXHRUaGUgY29udGVudCBvZiB0aGUgY29tcG9uZW50XG4gICAqL1xuICBjaGlsZHJlbjogUmVhY3ROb2RlXG59XG5cbmNvbnN0IFN0ZXBDb250ZW50ID0gKHsgY2hpbGRyZW4gfTogU3RlcENvbnRlbnRQcm9wcykgPT4ge1xuICBjb25zdCB7IGFjdGl2ZSB9ID0gUmVhY3QudXNlQ29udGV4dChTdGVwQ29udGV4dClcbiAgcmV0dXJuIChcbiAgICA8ZGl2XG4gICAgICBkYXRhLXRlc3RpZD1cInN0ZXAtY29udGVudFwiXG4gICAgICBjc3M9e2Nzc2BcbiAgICAgICAgcGFkZGluZy10b3A6IDhweDtcbiAgICAgIGB9XG4gICAgPlxuICAgICAgPEFjY29yZGlvblxuICAgICAgICBpc09wZW49e2FjdGl2ZX1cbiAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgJiAuYWNjb3JkaW9uX19jb250ZW50IHtcbiAgICAgICAgICAgIHBhZGRpbmc6IDA7XG4gICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiBpbmhlcml0O1xuICAgICAgICAgIH1cbiAgICAgICAgYH1cbiAgICAgICAgaGVhZGVyPXs8ZGl2PjwvZGl2Pn1cbiAgICAgICAgdHlwZT1cInNtYWxsXCJcbiAgICAgID5cbiAgICAgICAge2NoaWxkcmVufVxuICAgICAgPC9BY2NvcmRpb24+XG4gICAgPC9kaXY+XG4gIClcbn1cblxuZXhwb3J0IGRlZmF1bHQgU3RlcENvbnRlbnRcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "1nuhno9",
+  styles: "padding-top:8px"
+} : {
+  name: "p2uvj7-StepContent",
+  styles: "padding-top:8px;label:StepContent;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9zdGVwL1N0ZXBDb250ZW50LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQmMiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL3N0ZXAvU3RlcENvbnRlbnQudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgeyBBY2NvcmRpb24gfSBmcm9tICcuLi9hY2NvcmRpb24nXG5pbXBvcnQgU3RlcENvbnRleHQgZnJvbSAnLi4vc3RlcC9TdGVwQ29udGV4dCdcblxudHlwZSBTdGVwQ29udGVudFByb3BzID0ge1xuICAvKlxuICAgKiBcdFRoZSBjb250ZW50IG9mIHRoZSBjb21wb25lbnRcbiAgICovXG4gIGNoaWxkcmVuOiBSZWFjdE5vZGVcbn1cblxuY29uc3QgU3RlcENvbnRlbnQgPSAoeyBjaGlsZHJlbiB9OiBTdGVwQ29udGVudFByb3BzKSA9PiB7XG4gIGNvbnN0IHsgYWN0aXZlIH0gPSBSZWFjdC51c2VDb250ZXh0KFN0ZXBDb250ZXh0KVxuICByZXR1cm4gKFxuICAgIDxkaXZcbiAgICAgIGRhdGEtdGVzdGlkPVwic3RlcC1jb250ZW50XCJcbiAgICAgIGNzcz17Y3NzYFxuICAgICAgICBwYWRkaW5nLXRvcDogOHB4O1xuICAgICAgYH1cbiAgICA+XG4gICAgICA8QWNjb3JkaW9uXG4gICAgICAgIGlzT3Blbj17YWN0aXZlfVxuICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICAmIC5hY2NvcmRpb25fX2NvbnRlbnQge1xuICAgICAgICAgICAgcGFkZGluZzogMDtcbiAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6IGluaGVyaXQ7XG4gICAgICAgICAgfVxuICAgICAgICBgfVxuICAgICAgICBoZWFkZXI9ezxkaXY+PC9kaXY+fVxuICAgICAgICB0eXBlPVwic21hbGxcIlxuICAgICAgPlxuICAgICAgICB7Y2hpbGRyZW59XG4gICAgICA8L0FjY29yZGlvbj5cbiAgICA8L2Rpdj5cbiAgKVxufVxuXG5leHBvcnQgZGVmYXVsdCBTdGVwQ29udGVudFxuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+const StepContent = ({
+  children
+}) => {
+  const _React$useContext = _react.default.useContext(_StepContext.default),
+        active = _React$useContext.active;
+
+  return (0, _react2.jsx)("div", {
+    "data-testid": "step-content",
+    css: _ref2
+  }, (0, _react2.jsx)(_accordion.Accordion, {
+    isOpen: active,
+    css: _ref,
+    header: (0, _react2.jsx)("div", null),
+    type: "small"
+  }, children));
+};
+
+var _default = StepContent;
+exports.default = _default;

package/cjs/step/StepContext.d.ts

@@ -0,0 +1,12 @@
+import React, { ReactNode } from 'react';
+export declare type StepContextType = {
+    index: number;
+    active: boolean;
+    hasError?: boolean;
+    completed?: boolean;
+    disabled?: boolean;
+    isEditing?: boolean;
+    feedback?: ReactNode;
+};
+declare const StepContext: React.Context<StepContextType>;
+export default StepContext;

package/cjs/step/StepContext.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const StepContext = /*#__PURE__*/_react.default.createContext({
+  completed: false,
+  active: false,
+  disabled: false,
+  index: 0
+});
+
+var _default = StepContext;
+exports.default = _default;