@ledgerhq/react-ui 0.45.0 → 0.46.0-nightly.20260217030329

package/lib/cjs/components/navigation/FlowStepper/FlowStepper.stories.js

@@ -1,46 +1,1604 @@
+(() => {
 "use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
+var __webpack_modules__ = ({
+4572(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (Tag)
+});
+/* import */ var react__rspack_import_0 = __webpack_require__(2015);
+/* import */ var react__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(react__rspack_import_0);
+/* import */ var styled_system__rspack_import_1 = __webpack_require__(9351);
+/* import */ var styled_system__rspack_import_1_default = /*#__PURE__*/__webpack_require__.n(styled_system__rspack_import_1);
+/* import */ var _asorted_Text__rspack_import_3 = __webpack_require__(348);
+/* import */ var _styled__rspack_import_2 = __webpack_require__(7680);
+
+
+
+
+function getColor({ type, active, disabled }) {
+    switch(type){
+        case "plain":
+            if (disabled) return active ? "neutral.c00" : "neutral.c70";
+            return active ? "neutral.c00" : "primary.c90";
+        default:
+            return disabled ? "neutral.c70" : "primary.c90";
+    }
+}
+function getBgColor({ type, active, disabled }) {
+    switch(type){
+        case "plain":
+            return active ? disabled ? "neutral.c70" : "primary.c90" : undefined;
+        case "opacity":
+            return active ? disabled ? "neutral.c30" : "primary.c20" : undefined;
+        default:
+            return;
+    }
+}
+function getBorderColor({ type, active, disabled }) {
+    if (!active) return;
+    switch(type){
+        case "outlined":
+            return disabled ? "neutral.c70" : "primary.c90";
+        case "outlinedOpacity":
+            return disabled ? "neutral.c40" : "primary.c40";
+    }
+}
+function getPadding({ size }) {
+    // Padding is 1px less than what's indicated in the design because of the 1px wide border.
+    switch(size){
+        case "tiny":
+            return "1px 3px";
+        case "small":
+            return "2px 4px";
+        case "medium":
+            return "5px 7px";
+        case "large":
+        default:
+            return "8px 9px 9px";
+    }
+}
+function getTextProps({ size }) {
+    switch(size){
+        case "tiny":
+        case "small":
+        case "medium":
+            return {
+                variant: "tiny",
+                fontWeight: "semiBold",
+                lineHeight: "normal"
+            };
+        case "large":
+        default:
+            return {
+                variant: "extraSmall",
+                fontWeight: "semiBold"
+            };
+    }
+}
+const TagContainer = _styled__rspack_import_2["default"].div.attrs((props)=>({
+        backgroundColor: props.bg || props.backgroundColor || getBgColor(props),
+        color: props.color || getColor(props),
+        borderColor: getBorderColor(props)
+    }))`
+  display: inline-flex;
+  justify-content: center;
+  border: 1px solid transparent;
+  border-radius: ${(p)=>`${p.theme.radii[1]}px`};
+  padding: ${(p)=>getPadding(p)};
+  ${styled_system__rspack_import_1.border}
+`;
+function Tag({ children, textProps, size = "large", ...props }) {
+    const textColor = getColor(props);
+    const baseTextProps = getTextProps({
+        size,
+        ...props
+    });
+    return /*#__PURE__*/ react__rspack_import_0_default().createElement(TagContainer, {
+        size: size,
+        ...props
+    }, /*#__PURE__*/ react__rspack_import_0_default().createElement(_asorted_Text__rspack_import_3["default"], {
+        ...baseTextProps,
+        color: textColor,
+        ...textProps ? textProps : {}
+    }, children));
+}
+
+
+},
+7716(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (__rspack_default_export)
+});
+/* import */ var react__rspack_import_0 = __webpack_require__(2015);
+/* import */ var react__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(react__rspack_import_0);
+/* import */ var styled_components__rspack_import_1 = __webpack_require__(2770);
+/* import */ var styled_components__rspack_import_1_default = /*#__PURE__*/__webpack_require__.n(styled_components__rspack_import_1);
+/* import */ var _layout_Flex__rspack_import_2 = __webpack_require__(3696);
+/* import */ var _asorted_Text__rspack_import_3 = __webpack_require__(348);
+
+
+
+
+const DividerBase = styled_components__rspack_import_1_default()((0,_layout_Flex__rspack_import_2["default"])).attrs((p)=>({
+        my: p.my || 0,
+        height: 1,
+        backgroundColor: p.color || "neutral.c40"
+    }))`
+  &[data-variant="light"] {
+    background: ${(p)=>p.theme.colors.neutral.c30};
+  }
+`;
+const Divider = (props)=>{
+    if (!props.text) return /*#__PURE__*/ react__rspack_import_0_default().createElement(DividerBase, props);
+    return /*#__PURE__*/ react__rspack_import_0_default().createElement(_layout_Flex__rspack_import_2["default"], {
+        ...props,
+        flexDirection: "row",
+        alignItems: "center"
+    }, /*#__PURE__*/ react__rspack_import_0_default().createElement(DividerBase, {
+        my: 6,
+        flex: 1
+    }), /*#__PURE__*/ react__rspack_import_0_default().createElement(_asorted_Text__rspack_import_3["default"], {
+        variant: "bodyLineHeight",
+        color: "neutral.c60",
+        mx: 6
+    }, props.text), /*#__PURE__*/ react__rspack_import_0_default().createElement(DividerBase, {
+        my: 6,
+        flex: 1
+    }));
+};
+/* export default */ const __rspack_default_export = (Divider);
+
+
+},
+348(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (__rspack_default_export)
+});
+/* import */ var _styled__rspack_import_1 = __webpack_require__(7680);
+/* import */ var styled_system__rspack_import_0 = __webpack_require__(9351);
+/* import */ var styled_system__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(styled_system__rspack_import_0);
+/* import */ var _styles_styled_fontFamily__rspack_import_3 = __webpack_require__(3364);
+/* import */ var _styles__rspack_import_2 = __webpack_require__(4368);
+
+
+
+
+const uppercase = (0,styled_system__rspack_import_0.system)({
+    uppercase: {
+        property: "textTransform",
+        transform: (value)=>value ? "uppercase" : "none"
+    }
+});
+const Text = _styled__rspack_import_1["default"].span.attrs(({ variant = "body", fontSize, color })=>({
+        fontSize: fontSize ? fontSize : variant,
+        color: color || "neutral.c100"
+    }))`
+  font-weight: 500;
+  white-space: ${(props)=>props.whiteSpace ?? "normal"};
+  ${(p)=>_styles__rspack_import_2.textVariantStyle[p.variant || "body"]}
+  ${(0,styled_system__rspack_import_0.compose)(uppercase, styled_system__rspack_import_0.lineHeight, _styles_styled_fontFamily__rspack_import_3["default"], styled_system__rspack_import_0.fontSize, styled_system__rspack_import_0.textAlign, styled_system__rspack_import_0.fontWeight, styled_system__rspack_import_0.letterSpacing, (0,styled_system__rspack_import_0.system)({
+    textOverflow: true
+}))}
+  ${(p)=>p.textTransform ? `text-transform: ${p.textTransform};` : ""}
+`;
+/* export default */ const __rspack_default_export = (Text);
+
+
+},
+4368(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  textVariantStyle: () => (textVariantStyle)
+});
+/* import */ var styled_components__rspack_import_0 = __webpack_require__(2770);
+/* import */ var styled_components__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(styled_components__rspack_import_0);
+
+const getFontSource = (name)=>(props)=>{
+        const fontsPath = props.fontsPath ?? "assets/fonts";
+        const fontName = props.fontMappings && props.fontMappings(name) || `${name}.woff2`;
+        return `url("${fontsPath}/${fontName}") format("woff2")`;
+    };
+const fontStyles = (0,styled_components__rspack_import_0.css)`
+  @font-face {
+    font-family: "Inter";
+    src: ${getFontSource("Inter-ExtraLight-BETA")};
+    font-weight: 100;
+    font-style: normal;
+  }
+
+  @font-face {
+    font-family: "Inter";
+    src: ${getFontSource("Inter-Light-BETA")};
+    font-weight: 300;
+    font-style: normal;
+  }
+
+  @font-face {
+    font-family: "Inter";
+    src: ${getFontSource("Inter-Regular")};
+    font-weight: 400;
+    font-style: normal;
+  }
+
+  @font-face {
+    font-family: "Inter";
+    src: ${getFontSource("Inter-Medium")};
+    font-weight: 500;
+    font-style: normal;
+  }
+
+  @font-face {
+    font-family: "Inter";
+    src: ${getFontSource("Inter-SemiBold")};
+    font-weight: 600;
+    font-style: normal;
+  }
+
+  @font-face {
+    font-family: "Inter";
+    src: ${getFontSource("Inter-ExtraBold")};
+    font-weight: 900;
+    font-style: normal;
+  }
+
+  @font-face {
+    font-family: "Alpha";
+    src: ${getFontSource("HMAlphaMono-Medium")};
+    font-weight: 500;
+    font-style: normal;
+  }
+`;
+const textVariantStyle = {
+    h1: {
+        fontFamily: "Alpha, Inter, Sans",
+        fontWeight: 500,
+        "text-transform": "uppercase"
+    },
+    h1Inter: {
+        fontFamily: "Inter, Sans",
+        fontWeight: 500,
+        "text-transform": "uppercase"
+    },
+    h2: {
+        fontFamily: "Alpha, Inter, Sans",
+        fontWeight: 500,
+        "text-transform": "uppercase"
+    },
+    h2Inter: {
+        fontFamily: "Inter, Sans",
+        fontWeight: 500,
+        "text-transform": "uppercase"
+    },
+    h3: {
+        fontFamily: "Alpha, Inter, Sans",
+        fontWeight: 500,
+        "text-transform": "uppercase"
+    },
+    h3Inter: {
+        fontFamily: "Inter, Sans",
+        fontWeight: 500
+    },
+    h4: {
+        fontFamily: "Alpha, Inter, Sans",
+        fontWeight: 500,
+        "text-transform": "uppercase"
+    },
+    h4Inter: {
+        fontFamily: "Inter, Sans",
+        fontWeight: 600
+    },
+    h5: {
+        fontFamily: "Alpha, Inter, Sans",
+        fontWeight: 500,
+        "text-transform": "uppercase"
+    },
+    h5Inter: {
+        fontFamily: "Inter, Sans",
+        fontWeight: 500
+    },
+    large: {
+        fontFamily: "Inter, Sans"
+    },
+    largeLineHeight: {
+        fontFamily: "Inter, Sans",
+        lineHeight: 1.7
+    },
+    body: {
+        fontFamily: "Inter, Sans"
+    },
+    bodyLineHeight: {
+        fontFamily: "Inter, Sans",
+        lineHeight: 1.7
+    },
+    paragraph: {
+        fontFamily: "Inter, Sans"
+    },
+    paragraphLineHeight: {
+        fontFamily: "Inter, Sans",
+        lineHeight: 1.7
+    },
+    small: {
+        fontFamily: "Inter, Sans"
+    },
+    extraSmall: {
+        fontFamily: "Inter, Sans"
+    },
+    tiny: {
+        fontFamily: "Inter, Sans"
+    },
+    micro: {
+        fontFamily: "Inter, Sans"
+    },
+    subtitle: {
+        fontFamily: "Inter, Sans",
+        fontWeight: 600,
+        "text-transform": "uppercase"
+    }
+};
+
+
+},
+1133(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (/* binding */ cta_Button)
+});
+
+// UNUSED EXPORTS: ButtonUnstyled, ButtonExpand, buttonSizeStyle, Base
+
+;// CONCATENATED MODULE: external "@ledgerhq/icons-ui/reactLegacy/ChevronBottomMedium"
+const ChevronBottomMedium_namespaceObject = require("@ledgerhq/icons-ui/reactLegacy/ChevronBottomMedium");
+var ChevronBottomMedium_default = /*#__PURE__*/__webpack_require__.n(ChevronBottomMedium_namespaceObject);
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(2015);
+var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
+// EXTERNAL MODULE: external "styled-components"
+var external_styled_components_ = __webpack_require__(2770);
+var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
+// EXTERNAL MODULE: external "styled-system"
+var external_styled_system_ = __webpack_require__(9351);
+// EXTERNAL MODULE: ./src/styles/helpers.ts + 1 modules
+var helpers = __webpack_require__(4336);
+// EXTERNAL MODULE: ./src/styles/styled/fontFamily.ts
+var fontFamily = __webpack_require__(3364);
+// EXTERNAL MODULE: ./src/styles/theme.ts
+var theme = __webpack_require__(5548);
+// EXTERNAL MODULE: ./src/components/styled.ts
+var styled = __webpack_require__(7680);
+;// CONCATENATED MODULE: ./src/components/cta/Button/index.tsx
+
+
+
+
+
+
+
+
+const IconContainer = (external_styled_components_default()).div`
+  display: inline-block;
+  ${(p)=>`${p.iconPosition === "left" ? "margin-right" : "margin-left"}: ${p.theme.space[4]}px;`}
+  padding-top: 0.2em;
+`;
+const getVariantColors = (p)=>({
+        main: {
+            outline: `
+        border-color: ${p.theme.colors.neutral.c100};
+        color: ${p.theme.colors.neutral.c100};
+        background-color: transparent;
+        &:hover, &:focus {
+          background-color: ${(0,helpers.rgba)(p.theme.colors.neutral.c100, 0.03)};
+        }
+        &:active {
+          background-color: ${(0,helpers.rgba)(p.theme.colors.neutral.c100, 0.05)};
+        }
+      `,
+            filled: `
+        color: ${p.theme.colors.neutral.c00};
+        background-color: ${p.theme.colors.neutral.c100};
+        &:hover, &:focus {
+          background-color: ${p.theme.colors.neutral.c90};
+        }
+      `
+        },
+        shade: `
+      border-color: ${p.theme.colors.neutral.c40};
+      color: ${p.theme.colors.neutral.c100};
+      &:focus {
+        border-color: ${p.theme.colors.primary.c80};
+      }
+
+      &:hover, &:focus {
+        background-color: ${p.theme.colors.neutral.c20};
+      }
+
+      &:active {
+        background-color: ${p.theme.colors.neutral.c30};
+      }
+    `,
+        error: {
+            outline: `
+      border-color: ${p.theme.colors.error.c50};
+      color: ${p.theme.colors.error.c50};
+      background-color: transparent;
+      &:hover {
+        background-color: ${(0,helpers.rgba)(p.theme.colors.error.c50, 0.02)};
+      }
+      &:active {
+        background-color: ${(0,helpers.rgba)(p.theme.colors.error.c50, 0.05)};
+      }
+    `,
+            filled: `
+      color: ${p.theme.colors.neutral.c00};
+      background-color: ${p.theme.colors.error.c50};
+      &:hover {
+        background-color: ${p.theme.colors.error.c40};
+      }
+    `
+        },
+        neutral: `
+    color: ${p.theme.colors.neutral.c100};
+    background-color: ${p.theme.colors.neutral.c30};
+    &:hover {
+      background-color: ${p.theme.colors.neutral.c40};
+    }
+  `,
+        color: {
+            outline: `
+      border-color: ${p.theme.colors.primary.c80};
+      color: ${p.theme.colors.primary.c80};
+      background-color: transparent;
+      &:hover {
+        background-color: ${(0,helpers.rgba)(p.theme.colors.primary.c100, 0.02)};
+      }
+      &:active {
+        background-color: ${(0,helpers.rgba)(p.theme.colors.primary.c100, 0.05)};
+      }
+    `,
+            filled: `
+      color: ${p.theme.colors.neutral.c00};
+      background-color: ${p.theme.colors.primary.c80};
+      &:hover {
+        background-color: ${p.theme.colors.primary.c70};
+      }
+    `
+        },
+        disabled: {
+            outline: `
+        border-color: ${p.theme.colors.neutral.c50};
+        color: ${p.theme.colors.neutral.c50};
+        background-color: transparent;
+        &:focus, &:hover {
+          box-shadow: none;
+        }
+      `,
+            filled: `
+        color: ${p.theme.colors.neutral.c50};
+        background-color: ${p.theme.colors.neutral.c30};
+        &:focus, &:hover {
+          box-shadow: none;
+        }
+      `
+        },
+        default: `
+    color: ${p.theme.colors.neutral.c100};
+    background-color: transparent;
+    &:hover {
+      text-decoration: underline;
+    }
+  `
+    });
+const ButtonUnstyled = styled["default"].button`
+  all: unset;
+  cursor: pointer;
+
+  &:disabled {
+    cursor: default;
+  }
+`;
+const Base = styled["default"].button.attrs((p)=>({
+        fontFamily: "Inter",
+        fontSize: p.fontSize ?? 4
+    }))`
+  background-color: transparent;
+  border-color: transparent;
+  border-radius: 44px;
+  border-style: solid;
+  border-width: ${(p)=>p.outline || p.variant === "shade" ? 1 : 0}px;
+  font-weight: 600;
+  ${(0,external_styled_system_.compose)(fontFamily["default"], external_styled_system_.fontSize, external_styled_system_.border)};
+  line-height: ${(p)=>p.theme.fontSizes[p.fontSize]}px;
+  text-align: center;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  ${(p)=>buttonSizeStyle[p.size || "medium"]}
+  text-overflow: ellipsis;
+  white-space: ${(p)=>p.whiteSpace ? p.whiteSpace : "nowrap"};
+  max-width: 100%;
+  position: relative;
+  cursor: ${(p)=>p.disabled ? "default" : "pointer"};
+  &:active {
+    box-shadow: 0 0 0 4px ${(p)=>(0,helpers.rgba)(p.theme.colors.primary.c60, 0.4)};
+  }
+  &:focus, &:hover {
+    box-shadow: 0 0 0 2px ${(p)=>(0,helpers.rgba)(p.theme.colors.primary.c60, 0.4)};
+  }
+
+  ${(p)=>{
+    const variants = getVariantColors(p);
+    if (p.disabled) {
+        return p.outline || p.variant === "shade" ? variants.disabled.outline : variants.disabled.filled;
+    }
+    const variant = p.variant ?? "default";
+    switch(variant){
+        case "main":
+            return p.outline ? variants.main.outline : variants.main.filled;
+        case "shade":
+            return variants.shade;
+        case "error":
+            return p.outline ? variants.error.outline : variants.error.filled;
+        case "color":
+            return p.outline ? variants.color.outline : variants.color.filled;
+        case "neutral":
+            return variants.neutral;
+        case "default":
+        default:
+            return variants.default;
+    }
+}}
+  ${(p)=>p.iconButton ? (0,external_styled_components_.css)`
+          width: ${p.theme.space[12]}px;
+          padding: 0;
+          ${IconContainer} {
+            margin: 0;
+          }
+        ` : ""}
+  ${(p)=>p.theme.transition([
+        "background-color",
+        "color",
+        "border-color",
+        "box-shadow"
+    ], "0.2s")}
+`;
+const ContentContainer = (external_styled_components_default()).div``;
+const Button = ({ Icon, iconPosition = "right", iconSize = 16, children, onClick, ...props }, ref)=>{
+    const iconNodeSize = iconSize || theme.fontSizes[props.fontSize ?? 4];
+    const IconNode = (0,external_react_.useMemo)(()=>{
+        if (!Icon) return null;
+        if (typeof Icon === "object") return Icon;
+        return /*#__PURE__*/ external_react_default().createElement(Icon, {
+            size: iconNodeSize
+        });
+    }, [
+        iconNodeSize,
+        Icon
+    ]);
+    return /*#__PURE__*/ external_react_default().createElement(Base, {
+        ...props,
+        ref: ref,
+        iconButton: !(Icon == null) && !children,
+        onClick: onClick
+    }, iconPosition === "right" ? /*#__PURE__*/ external_react_default().createElement(ContentContainer, null, children) : null, IconNode && /*#__PURE__*/ external_react_default().createElement(IconContainer, {
+        iconPosition: iconPosition
+    }, IconNode), iconPosition === "left" ? /*#__PURE__*/ external_react_default().createElement(ContentContainer, null, children) : null);
 };
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+const ButtonWithRef = /*#__PURE__*/ external_react_default().forwardRef(Button);
+const StyledButtonExpand = external_styled_components_default()(ButtonWithRef).attrs((props)=>({
+        Icon: props.Icon != null || (ChevronBottomMedium_default()),
+        iconPosition: props.iconPosition || "right"
+    }))`
+  ${IconContainer} {
+    transition: transform 0.25s;
+    ${(p)=>p.expanded ? "transform: rotate(180deg)" : ""}
   }
-  return to;
+`;
+function ButtonExpand({ onToggle, onClick, ...props }, ref) {
+    const [expanded, setExpanded] = (0,external_react_.useState)(false);
+    return /*#__PURE__*/ external_react_default().createElement(StyledButtonExpand, {
+        ...props,
+        ref: ref,
+        expanded: expanded,
+        onClick: (event)=>{
+            setExpanded((expanded)=>!expanded);
+            onToggle != null && onToggle(!expanded);
+            onClick != null && onClick(event);
+        }
+    });
+}
+const buttonSizeStyle = {
+    xs: {
+        padding: "0 12px",
+        height: "28px"
+    },
+    small: {
+        padding: "0 20px",
+        height: "32px"
+    },
+    medium: {
+        padding: "0 24px",
+        height: "40px"
+    },
+    large: {
+        padding: "0 28px",
+        height: "48px"
+    },
+    xl: {
+        padding: "0 28px",
+        height: "56px"
+    }
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var FlowStepper_stories_exports = {};
-__export(FlowStepper_stories_exports, {
-  Demo: () => Demo,
-  IndexedByKey: () => IndexedByKey,
-  Minimal: () => Minimal,
-  default: () => FlowStepper_stories_default
+Button.Unstyled = ButtonUnstyled;
+Button.Expand = /*#__PURE__*/ external_react_default().forwardRef(ButtonExpand);
+ButtonWithRef.Unstyled = Button.Unstyled;
+ButtonWithRef.Expand = Button.Expand;
+/* export default */ const cta_Button = (ButtonWithRef);
+
+
+},
+7894(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  getLinkColors: () => (getLinkColors)
+});
+function getLinkColors(colors) {
+    return {
+        disabled: {
+            default: colors.neutral.c50,
+            pressed: colors.neutral.c50
+        },
+        main: {
+            default: colors.neutral.c100,
+            pressed: colors.neutral.c80
+        },
+        color: {
+            default: colors.primary.c80,
+            pressed: colors.primary.c70
+        },
+        shade: {
+            default: colors.neutral.c70,
+            pressed: colors.neutral.c80
+        }
+    };
+}
+
+
+},
+7473(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (__rspack_default_export)
+});
+/* import */ var react__rspack_import_0 = __webpack_require__(2015);
+/* import */ var react__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(react__rspack_import_0);
+/* import */ var styled_components__rspack_import_1 = __webpack_require__(2770);
+/* import */ var styled_components__rspack_import_1_default = /*#__PURE__*/__webpack_require__.n(styled_components__rspack_import_1);
+/* import */ var _getLinkStyle__rspack_import_3 = __webpack_require__(7894);
+/* import */ var _getCtaStyle__rspack_import_5 = __webpack_require__(3169);
+/* import */ var _asorted__rspack_import_4 = __webpack_require__(348);
+/* import */ var _styled__rspack_import_2 = __webpack_require__(7680);
+
+
+
+
+
+
+const DEFAULT_ICON_POSITION = "right";
+const DEFAULT_SIZE = "medium";
+const DEFAULT_TYPE = "main";
+const IconContainer = (styled_components__rspack_import_1_default().div)`
+  ${(p)=>p.iconLink ? "" : p.iconPosition === "left" ? `margin-right: 6px;` : `margin-left: 6px;`}
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const Base = _styled__rspack_import_2["default"].a`
+  color: ${({ color, theme, disabled, type = "main" })=>color || (0,_getLinkStyle__rspack_import_3.getLinkColors)(theme.colors)[disabled ? "disabled" : type]["default"]};
+  cursor: pointer;
+  display: inline-flex;
+  flex-direction: row;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    text-decoration: underline;
+  }
+  &:active {
+    color: ${({ color, theme, type = "main" })=>color || (0,_getLinkStyle__rspack_import_3.getLinkColors)(theme.colors)[type]["pressed"]};
+    text-decoration: underline;
+  }
+
+  text-decoration: ${(p)=>p.alwaysUnderline ? "underline" : "none"};
+
+`;
+const LinkContainer = ({ Icon, iconPosition = DEFAULT_ICON_POSITION, children, color, size = DEFAULT_SIZE, textProps })=>{
+    const text = /*#__PURE__*/ react__rspack_import_0_default().createElement(_asorted__rspack_import_4["default"], {
+        variant: _getCtaStyle__rspack_import_5.ctaTextType[size],
+        fontWeight: "semiBold",
+        color: color || "inherit",
+        ...textProps
+    }, children);
+    return /*#__PURE__*/ react__rspack_import_0_default().createElement((react__rspack_import_0_default().Fragment), null, iconPosition === "right" && children ? text : null, Icon ? /*#__PURE__*/ react__rspack_import_0_default().createElement(IconContainer, {
+        iconLink: !children,
+        iconPosition: iconPosition
+    }, /*#__PURE__*/ react__rspack_import_0_default().createElement(Icon, {
+        size: _getCtaStyle__rspack_import_5.ctaIconSize[size],
+        color: color || "currentcolor"
+    })) : null, iconPosition === "left" && children ? text : null);
+};
+const Link = (props)=>{
+    const { type = DEFAULT_TYPE, size = DEFAULT_SIZE, color } = props;
+    return /*#__PURE__*/ react__rspack_import_0_default().createElement(Base, {
+        color: color,
+        ...props
+    }, /*#__PURE__*/ react__rspack_import_0_default().createElement(LinkContainer, {
+        ...props,
+        type: type,
+        size: size
+    }));
+};
+/* export default */ const __rspack_default_export = (Link);
+
+
+},
+3169(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  ctaIconSize: () => (ctaIconSize),
+  ctaTextType: () => (ctaTextType)
+});
+const ctaTextType = {
+    small: "small",
+    medium: "paragraph",
+    large: "body"
+};
+const ctaIconSize = {
+    small: 16,
+    medium: 18,
+    large: 20
+};
+
+
+},
+6614(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  lipsum: () => (lipsum)
+});
+// Add helpers that don't have a place in the real world component usage here.
+const lipsum = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi varius sollicitudin lectus vel finibus. Praesent eu leo nec libero interdum sodales et eget nulla. Donec tincidunt posuere sem vel porttitor. Nullam maximus urna non elit tempor, ut fermentum metus euismod. Quisque et rutrum arcu. Etiam nisl elit, tincidunt volutpat libero sed, imperdiet mollis risus. Maecenas imperdiet lectus id sapien tempus, eget fringilla nisl lacinia. Sed sem velit, egestas nec imperdiet ac, lobortis vel lectus. Curabitur dui orci, aliquam sit amet metus ut, sollicitudin fermentum erat. Curabitur id purus eget lectus varius congue. Donec eu auctor augue. Ut eleifend arcu nisl, volutpat fringilla quam cursus sit amet. Praesent leo enim, cursus vel egestas sed, vestibulum imperdiet diam. Etiam a diam lectus. Suspendisse aliquam imperdiet ultrices. Phasellus eget nulla eros. Nullam semper porta pulvinar. Duis maximus, lectus ac fringilla interdum, lacus ex cursus tellus, et dapibus est nisi id dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla gravida elit turpis, ac condimentum velit placerat at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In dolor tellus, semper id pulvinar eget, ornare bibendum justo. Sed in libero nisl. Morbi tincidunt sollicitudin nunc, vel imperdiet nisi iaculis vel. Nam viverra lorem vel ligula varius, lacinia maximus metus porta. Sed vitae vehicula leo. Proin sed lectus in lorem laoreet iaculis sed ut eros. Pellentesque et rhoncus sapien. Nam fringilla mauris nec tellus vestibulum, vel convallis mauris sagittis. Vivamus et lacinia dui. Sed pharetra vitae lacus vel facilisis. Nullam et sollicitudin risus. Curabitur egestas bibendum neque, sed lacinia nisi cursus nec. Quisque sed diam congue, luctus magna eget, convallis lectus. Cras ut tellus imperdiet, blandit magna non, auctor felis. Suspendisse potenti. Nulla volutpat felis vitae ante blandit tempor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla sagittis scelerisque magna quis ultrices";
+
+
+},
+3832(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (__rspack_default_export)
+});
+/* import */ var _styled__rspack_import_0 = __webpack_require__(7680);
+
+const Box = _styled__rspack_import_0["default"].div``;
+/* export default */ const __rspack_default_export = (Box);
+
+
+},
+3696(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (__rspack_default_export)
+});
+/* import */ var _styled__rspack_import_0 = __webpack_require__(7680);
+
+const FlexBox = _styled__rspack_import_0["default"].div.attrs({
+    display: "flex"
+})``;
+/* export default */ const __rspack_default_export = (FlexBox);
+
+
+},
+1304(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (__rspack_default_export)
 });
-module.exports = __toCommonJS(FlowStepper_stories_exports);
-var import_react = __toESM(require("react"));
-var import_react_transition_group = require("react-transition-group");
-var import_styled_components = __toESM(require("styled-components"));
-var import_manager_api = require("@storybook/manager-api");
-var import__ = require("../../..");
-var import_helpers = require("../../helpers");
-var import_react2 = require("react");
+/* import */ var react__rspack_import_0 = __webpack_require__(2015);
+/* import */ var react__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(react__rspack_import_0);
+/* import */ var react_is__rspack_import_1 = __webpack_require__(4562);
+/* import */ var react_is__rspack_import_1_default = /*#__PURE__*/__webpack_require__.n(react_is__rspack_import_1);
+/* import */ var _layout_Flex__rspack_import_2 = __webpack_require__(3696);
+/* import */ var ___rspack_import_3 = __webpack_require__(1982);
+
+
+
+
+function FlowStepper({ activeIndex, header, renderStepHeader, footer, renderStepFooter, extraProps, extraContainerProps, extraStepperProps, extraStepperContainerProps, extraChildrenContainerProps, renderChildren, children }) {
+    const { steps, innerContents, stepFooter, stepHeader } = react__rspack_import_0_default().Children.toArray(children).reduce((acc, child, idx)=>{
+        const index = ((0,react_is__rspack_import_1.isElement)(child) && child.props.index) ?? idx;
+        const label = (0,react_is__rspack_import_1.isElement)(child) && child.props.label;
+        const hidden = (0,react_is__rspack_import_1.isElement)(child) && child.props.hidden;
+        const stepHeader = (0,react_is__rspack_import_1.isElement)(child) && child.props.header;
+        const stepFooter = (0,react_is__rspack_import_1.isElement)(child) && child.props.footer;
+        if (label && !hidden) {
+            acc.steps[index] = label;
+        }
+        if (index === activeIndex) {
+            acc.innerContents = child;
+            acc.stepFooter = stepFooter;
+            acc.stepHeader = stepHeader;
+        }
+        return acc;
+    }, {
+        steps: [],
+        innerContents: null,
+        stepHeader: null,
+        stepFooter: null
+    });
+    const renderArgs = {
+        ...extraProps,
+        activeIndex,
+        stepsLength: steps.length
+    };
+    function getSectionContents(renderFunc, stepSection, renderStepFunc) {
+        return stepSection ? renderStepFunc ? renderStepFunc({
+            ...renderArgs,
+            children: stepSection
+        }) : stepSection : renderFunc && renderFunc(renderArgs);
+    }
+    return /*#__PURE__*/ react__rspack_import_0_default().createElement(_layout_Flex__rspack_import_2["default"], {
+        flex: 1,
+        flexDirection: "column",
+        ...extraContainerProps
+    }, getSectionContents(header, stepHeader, renderStepHeader), /*#__PURE__*/ react__rspack_import_0_default().createElement(_layout_Flex__rspack_import_2["default"], {
+        my: 8,
+        justifyContent: "center",
+        ...extraStepperContainerProps
+    }, /*#__PURE__*/ react__rspack_import_0_default().createElement(___rspack_import_3["default"], {
+        activeIndex: activeIndex,
+        steps: steps,
+        flex: 1,
+        ...extraStepperProps
+    })), /*#__PURE__*/ react__rspack_import_0_default().createElement(_layout_Flex__rspack_import_2["default"], {
+        flex: 1,
+        flexDirection: "column",
+        position: "relative",
+        ...extraChildrenContainerProps
+    }, renderChildren ? renderChildren({
+        ...renderArgs,
+        children: innerContents
+    }) : innerContents), getSectionContents(footer, stepFooter, renderStepFooter));
+}
+function Step({ children }) {
+    return /*#__PURE__*/ react__rspack_import_0_default().createElement((react__rspack_import_0_default().Fragment), null, children);
+}
+FlowStepper.Step = Step;
+/* export default */ const __rspack_default_export = (FlowStepper);
+/**
+ * This is a FlowStepper where each child must have an `itemKey: string` prop
+ * and the active step is defined by the `activeKey: string` prop.
+ *
+ * This allows for usages with a lot of steps where dealing with indices could be
+ * painful and error prone (for instance inserting/removing a step somewhere would shift
+ * the indices of the following steps and navigation would be impacted).
+ *
+ * By using string identifiers (`itemKey`) for each step, it's more "human readable"
+ * and less error prone to setup a navigation logic between steps.
+ */ function FlowStepperIndexed(props) {
+    const { activeKey, children, ...otherProps } = props;
+    const activeIndex = react__rspack_import_0_default().Children.toArray(children).findIndex((child)=>{
+        const res = (0,react_is__rspack_import_1.isElement)(child) && child.props.itemKey === activeKey;
+        return res;
+    });
+    return /*#__PURE__*/ react__rspack_import_0_default().createElement(FlowStepper, {
+        ...otherProps,
+        activeIndex: activeIndex
+    }, children);
+}
+function IndexedStep({ children }) {
+    return /*#__PURE__*/ react__rspack_import_0_default().createElement((react__rspack_import_0_default().Fragment), null, children);
+}
+FlowStepperIndexed.Step = IndexedStep;
+FlowStepper.Indexed = FlowStepperIndexed;
+
+
+},
+1982(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (__rspack_default_export)
+});
+/* import */ var react__rspack_import_0 = __webpack_require__(2015);
+/* import */ var react__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(react__rspack_import_0);
+/* import */ var styled_components__rspack_import_1 = __webpack_require__(2770);
+/* import */ var styled_components__rspack_import_1_default = /*#__PURE__*/__webpack_require__.n(styled_components__rspack_import_1);
+/* import */ var styled_system__rspack_import_2 = __webpack_require__(9351);
+/* import */ var styled_system__rspack_import_2_default = /*#__PURE__*/__webpack_require__.n(styled_system__rspack_import_2);
+/* import */ var _index__rspack_import_3 = __webpack_require__(9979);
+/* import */ var _index__rspack_import_3_default = /*#__PURE__*/__webpack_require__.n(_index__rspack_import_3);
+/* import */ var _asorted_Text__rspack_import_4 = __webpack_require__(348);
+/* import */ var _layout_Flex__rspack_import_5 = __webpack_require__(3696);
+
+
+
+
+
+
+const Item = {
+    Container: styled_components__rspack_import_1_default().div.attrs({
+        mx: "8px"
+    })`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: ${(p)=>p.theme.space[8]}px;
+    height: ${(p)=>p.theme.space[8]}px;
+    ${styled_system__rspack_import_2.color}
+    ${styled_system__rspack_import_2.border}
+    ${styled_system__rspack_import_2.space}
+  `,
+    Spacer: (styled_components__rspack_import_1_default().div)`
+    display: flex;
+    align-self: stretch;
+    ${styled_system__rspack_import_2.space}
+  `,
+    Current: styled_components__rspack_import_1_default().div.attrs({
+        backgroundColor: "primary.c90"
+    })`
+    width: 6px;
+    height: 6px;
+    border-radius: 6px;
+    ${styled_system__rspack_import_2.color}
+  `,
+    Pending: styled_components__rspack_import_1_default().div.attrs({
+        backgroundColor: "neutral.c70"
+    })`
+    width: ${(p)=>p.theme.space[2]}px;
+    height: ${(p)=>p.theme.space[2]}px;
+    border-radius: ${(p)=>p.theme.space[2]}px;
+    ${styled_system__rspack_import_2.color}
+  `,
+    Completed: ()=>/*#__PURE__*/ react__rspack_import_0_default().createElement(_index__rspack_import_3.CheckAloneMedium, {
+            size: 16
+        }),
+    Disabled: ()=>/*#__PURE__*/ react__rspack_import_0_default().createElement(_index__rspack_import_3.CloseMedium, {
+            size: 16
+        }),
+    Errored: ()=>/*#__PURE__*/ react__rspack_import_0_default().createElement(_index__rspack_import_3.CloseMedium, {
+            size: 16
+        })
+};
+const StepText = styled_components__rspack_import_1_default()((0,_asorted_Text__rspack_import_4["default"]))`
+  text-align: center;
+  white-space: pre-wrap;
+  color: ${(p)=>{
+    if (p.state === "errored") {
+        return p.theme.colors.error.c50;
+    }
+    if (p.state === "disabled") {
+        return p.theme.colors.neutral.c50;
+    }
+    if (p.state === "pending") {
+        return p.theme.colors.neutral.c70;
+    }
+    return p.theme.colors.neutral.c100;
+}};
+`;
+const BaseSeparator = (styled_components__rspack_import_1_default().div)`
+  flex: 1;
+  position: relative;
+  overflow-x: hidden;
+  background-color: ${(p)=>p.theme.colors.neutral.c40};
+  height: 1px;
+  top: ${(p)=>p.theme.space[5]}px;
+`;
+const Separator = {
+    Step: styled_components__rspack_import_1_default()(BaseSeparator)``,
+    Item: styled_components__rspack_import_1_default()(BaseSeparator)``
+};
+const stepContentsByState = {
+    pending: /*#__PURE__*/ react__rspack_import_0_default().createElement(Item.Container, null, /*#__PURE__*/ react__rspack_import_0_default().createElement(Item.Pending, null)),
+    current: /*#__PURE__*/ react__rspack_import_0_default().createElement(Item.Container, {
+        backgroundColor: "primary.c20",
+        borderRadius: "8px"
+    }, /*#__PURE__*/ react__rspack_import_0_default().createElement(Item.Current, null)),
+    completed: /*#__PURE__*/ react__rspack_import_0_default().createElement(Item.Container, {
+        color: "primary.c90",
+        backgroundColor: "primary.c20",
+        borderRadius: "8px"
+    }, /*#__PURE__*/ react__rspack_import_0_default().createElement(Item.Completed, null)),
+    errored: /*#__PURE__*/ react__rspack_import_0_default().createElement(Item.Container, {
+        color: "error.c50",
+        backgroundColor: "warning.c30",
+        borderRadius: "8px"
+    }, /*#__PURE__*/ react__rspack_import_0_default().createElement(Item.Errored, null)),
+    disabled: /*#__PURE__*/ react__rspack_import_0_default().createElement(Item.Container, {
+        color: "neutral.c50"
+    }, /*#__PURE__*/ react__rspack_import_0_default().createElement(Item.Disabled, null))
+};
+const Step = /*#__PURE__*/ (0,react__rspack_import_0.memo)(function Step({ state, label: Label, hideLeftSeparator, nextState }) {
+    const inactive = state === "pending";
+    const nextInactive = state === "pending";
+    return /*#__PURE__*/ react__rspack_import_0_default().createElement(_layout_Flex__rspack_import_5["default"], {
+        flexDirection: "column",
+        alignItems: "center",
+        flex: 20
+    }, /*#__PURE__*/ react__rspack_import_0_default().createElement(Item.Spacer, {
+        mb: 5
+    }, !hideLeftSeparator && /*#__PURE__*/ react__rspack_import_0_default().createElement(Separator.Item, {
+        inactive: inactive,
+        position: "left"
+    }) || /*#__PURE__*/ react__rspack_import_0_default().createElement(_layout_Flex__rspack_import_5["default"], {
+        flex: "1"
+    }), stepContentsByState[state], nextState && /*#__PURE__*/ react__rspack_import_0_default().createElement(Separator.Item, {
+        inactive: nextInactive,
+        position: "right"
+    }) || /*#__PURE__*/ react__rspack_import_0_default().createElement(_layout_Flex__rspack_import_5["default"], {
+        flex: "1"
+    })), typeof Label === "string" ? /*#__PURE__*/ react__rspack_import_0_default().createElement(StepText, {
+        state: state,
+        variant: "small"
+    }, Label) : /*#__PURE__*/ react__rspack_import_0_default().createElement(Label, {
+        state: state
+    }));
+});
+function getState(activeIndex, index, errored, disabled, completed) {
+    if (completed) {
+        return "completed";
+    }
+    if (disabled) {
+        return "disabled";
+    }
+    if (activeIndex < index) {
+        return "pending";
+    }
+    if (activeIndex === index) {
+        return errored ? "errored" : "current";
+    }
+    return "completed";
+}
+function Stepper({ steps, activeIndex = 0, errored, disabledIndexes, filterDuplicate, isOver, ...extraProps }) {
+    const displayedSteps = filterDuplicate ? steps.filter((step, index)=>index === 0 || step !== steps[index - 1]) : steps;
+    const dislayedActiveIndex = filterDuplicate ? displayedSteps.findIndex((step)=>step === steps[activeIndex]) : activeIndex;
+    return /*#__PURE__*/ react__rspack_import_0_default().createElement(_layout_Flex__rspack_import_5["default"], {
+        flexWrap: "nowrap",
+        justifyContent: "space-between",
+        ...extraProps
+    }, displayedSteps.map((step, idx)=>{
+        const state = getState(dislayedActiveIndex, idx, errored, disabledIndexes?.includes(idx), isOver);
+        const nextState = idx < displayedSteps.length - 1 ? getState(dislayedActiveIndex, idx + 1) : undefined;
+        return /*#__PURE__*/ react__rspack_import_0_default().createElement(react__rspack_import_0.Fragment, {
+            key: idx
+        }, idx > 0 && /*#__PURE__*/ react__rspack_import_0_default().createElement(Separator.Step, {
+            inactive: state === "pending"
+        }), /*#__PURE__*/ react__rspack_import_0_default().createElement(Step, {
+            label: step,
+            state: state,
+            nextState: nextState,
+            hideLeftSeparator: idx === 0
+        }));
+    }));
+}
+/* export default */ const __rspack_default_export = (/*#__PURE__*/(0,react__rspack_import_0.memo)(Stepper));
+
+
+},
+7680(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (__rspack_default_export)
+});
+/* import */ var _styles_system_gaps__rspack_import_2 = __webpack_require__(4182);
+/* import */ var styled_components__rspack_import_0 = __webpack_require__(2770);
+/* import */ var styled_components__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(styled_components__rspack_import_0);
+/* import */ var styled_system__rspack_import_1 = __webpack_require__(9351);
+/* import */ var styled_system__rspack_import_1_default = /*#__PURE__*/__webpack_require__.n(styled_system__rspack_import_1);
+
+
+
+const baseStyles = (0,styled_system__rspack_import_1.compose)(styled_system__rspack_import_1.flexbox, styled_system__rspack_import_1.space, styled_system__rspack_import_1.position, styled_system__rspack_import_1.color, styled_system__rspack_import_1.layout, styled_system__rspack_import_1.overflow, _styles_system_gaps__rspack_import_2["default"], styled_system__rspack_import_1.border);
+const proxyStyled = new Proxy((styled_components__rspack_import_0_default()), {
+    apply (target, thisArg, argumentsList) {
+        return styled_components__rspack_import_0_default()(target.apply(thisArg, argumentsList)(baseStyles));
+    },
+    get (target, property) {
+        if (typeof target[property] === "function") {
+            return styled_components__rspack_import_0_default()(target[property].apply((styled_components__rspack_import_0_default()), [
+                baseStyles
+            ]));
+        }
+        return target[property];
+    }
+});
+/* export default */ const __rspack_default_export = (proxyStyled);
+
+
+},
+4336(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  rgba: () => (/* binding */ rgba),
+  ff: () => (/* binding */ ff)
+});
+
+// UNUSED EXPORTS: darken, ensureContrast, mix, lighten
+
+;// CONCATENATED MODULE: external "color"
+const external_color_namespaceObject = require("color");
+var external_color_default = /*#__PURE__*/__webpack_require__.n(external_color_namespaceObject);
+// EXTERNAL MODULE: ./src/styles/theme.ts
+var theme = __webpack_require__(5548);
+;// CONCATENATED MODULE: ./src/styles/helpers.ts
+
+
+const rgba = (c, a)=>external_color_default()(c).alpha(a).rgb().toString();
+const darken = (c, a)=>Color(c).darken(a).toString();
+const lighten = (c, a)=>Color(c).lighten(a).toString();
+const mix = (c, b, a)=>Color(c).mix(Color(b), a).toString();
+const ff = (v)=>{
+    const [font, type = "Regular"] = v.split("|");
+    // @ts-expect-error FIXME
+    const { style, weight } = theme.fontFamilies[font][type];
+    // @ts-expect-error FIXME
+    const fallback = theme.fontFamilies[font].fallback ?? "Arial";
+    return {
+        fontFamily: `${font}, ${fallback}`,
+        fontWeight: weight,
+        fontStyle: style
+    };
+};
+const ensureContrast = (color1, color2)=>{
+    const colorL1 = Color(color1).luminosity() + 0.05;
+    const colorL2 = Color(color2).luminosity() + 0.05;
+    const lRatio = colorL1 > colorL2 ? colorL1 / colorL2 : colorL2 / colorL1;
+    if (lRatio < 1.5) {
+        return Color(color1).rotate(180).negate().string();
+    }
+    return color1;
+};
+
+
+},
+3364(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (__rspack_default_export)
+});
+/* import */ var _helpers__rspack_import_0 = __webpack_require__(4336);
+
+/* export default */ const __rspack_default_export = ((props)=>{
+    const prop = props.ff;
+    if (prop == null) {
+        return null;
+    }
+    return (0,_helpers__rspack_import_0.ff)(prop);
+});
+
+
+},
+4182(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (__rspack_default_export)
+});
+/* import */ var styled_system__rspack_import_0 = __webpack_require__(9351);
+/* import */ var styled_system__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(styled_system__rspack_import_0);
+
+const gaps = (0,styled_system__rspack_import_0.system)({
+    rowGap: {
+        property: "rowGap",
+        scale: "space"
+    },
+    columnGap: {
+        property: "columnGap",
+        scale: "space"
+    }
+});
+/* export default */ const __rspack_default_export = (gaps);
+
+
+},
+5548(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  fontFamilies: () => (fontFamilies),
+  fontSizes: () => (fontSizes)
+});
+/* import */ var styled_components__rspack_import_0 = __webpack_require__(2770);
+/* import */ var styled_components__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(styled_components__rspack_import_0);
+/* import */ var _ledgerhq_ui_shared__rspack_import_1 = __webpack_require__(2993);
+/* import */ var _ledgerhq_ui_shared__rspack_import_1_default = /*#__PURE__*/__webpack_require__.n(_ledgerhq_ui_shared__rspack_import_1);
+
+
+const breakpoints = {
+    sm: "640px",
+    md: "768px",
+    lg: "1024px",
+    xl: "1280px",
+    xxl: "1536px"
+};
+const space = [
+    /* space indexes:
+  0, 1, 2, 3, 4,  5,  6,  7,  8,  9,  10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21 */ 0,
+    2,
+    4,
+    8,
+    10,
+    12,
+    16,
+    20,
+    24,
+    28,
+    32,
+    36,
+    40,
+    44,
+    48,
+    52,
+    56,
+    60,
+    64,
+    68,
+    72,
+    76
+];
+const fontSizes = [
+    8,
+    10,
+    11,
+    12,
+    13,
+    14,
+    16,
+    20,
+    24,
+    28,
+    32,
+    36
+];
+[fontSizes.micro, fontSizes.tiny, fontSizes.extraSmall, fontSizes.small, fontSizes.paragraph, fontSizes.body, fontSizes.large, fontSizes.h5, fontSizes.h4, fontSizes.h3, fontSizes.h2, fontSizes.h1] = fontSizes;
+fontSizes.largeLineHeight = fontSizes.large;
+fontSizes.bodyLineHeight = fontSizes.body;
+fontSizes.paragraphLineHeight = fontSizes.paragraph;
+fontSizes.subtitle = fontSizes.extraSmall;
+fontSizes.h1Inter = fontSizes.h1;
+fontSizes.h2Inter = fontSizes.h2;
+fontSizes.h3Inter = fontSizes.h3;
+fontSizes.h4Inter = fontSizes.h4;
+fontSizes.h5Inter = fontSizes.h5;
+const fontWeights = {
+    extraLight: "100",
+    light: "300",
+    regular: "400",
+    medium: "500",
+    semiBold: "600",
+    bold: "700",
+    extraBold: "800"
+};
+const radii = [
+    0,
+    4,
+    8,
+    12,
+    16,
+    20
+];
+const shadows = [
+    "0 4px 8px 0 rgba(0, 0, 0, 0.03)"
+];
+const zIndexes = [
+    -1,
+    0,
+    1,
+    9,
+    10,
+    90,
+    100,
+    900,
+    1000
+];
+// Those fonts are now defined in global.css, this is just a mapping for styled-system
+const fontFamilies = {
+    Inter: {
+        ExtraLight: {
+            weight: 100,
+            style: "normal"
+        },
+        Light: {
+            weight: 300,
+            style: "normal"
+        },
+        Regular: {
+            weight: 400,
+            style: "normal"
+        },
+        Medium: {
+            weight: 500,
+            style: "normal"
+        },
+        SemiBold: {
+            weight: 600,
+            style: "normal"
+        },
+        Bold: {
+            weight: 700,
+            style: "normal"
+        },
+        ExtraBold: {
+            weight: 800,
+            style: "normal"
+        }
+    },
+    Alpha: {
+        Medium: {
+            weight: 500,
+            style: "normal"
+        }
+    }
+};
+const animationDuration = "0.33s";
+const easings = {
+    outQuadratic: "cubic-bezier(0.25, 0.46, 0.45, 0.94)"
+};
+const transition = (properties = [
+    "all"
+], duration = animationDuration, easing = easings.outQuadratic)=>(0,styled_components__rspack_import_0.css)`
+  transition-property: ${properties.join(",")};
+  transition-duration: ${duration};
+  transition-timing-function: ${easing};
+`;
+const fadeIn = (0,styled_components__rspack_import_0.keyframes)`
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  `;
+const fadeOut = (0,styled_components__rspack_import_0.keyframes)`
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  `;
+const fadeInGrowX = (0,styled_components__rspack_import_0.keyframes)`
+    0% {
+      opacity: 0;
+      transform: scaleX(0);
+    }
+    100% {
+      opacity: 1;
+      transform: scaleX(1);
+    }
+`;
+const fadeInUp = (0,styled_components__rspack_import_0.keyframes)`
+    0% {
+      opacity: 0;
+      transform: translateY(66%);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0%);
+    }
+  `;
+const animations = {
+    fadeIn: ()=>(0,styled_components__rspack_import_0.css)`
+    ${fadeIn} ${animationDuration} ${easings.outQuadratic} forwards
+  `,
+    fadeOut: ()=>(0,styled_components__rspack_import_0.css)`
+    ${fadeOut} ${animationDuration} ${easings.outQuadratic} forwards
+  `,
+    fadeInGrowX: ()=>(0,styled_components__rspack_import_0.css)`
+    ${fadeInGrowX} 0.6s ${easings.outQuadratic} forwards
+  `,
+    fadeInUp: ()=>(0,styled_components__rspack_import_0.css)`
+    ${fadeInUp} ${animationDuration} ${easings.outQuadratic} forwards
+  `
+};
+const overflow = {
+    x: (0,styled_components__rspack_import_0.css)`
+    overflow-y: hidden;
+    overflow-x: scroll;
+    will-change: transform;
+    &:hover {
+      --track-color: ${(p)=>p.theme.colors.neutral.c30};
+    }
+  `,
+    y: (0,styled_components__rspack_import_0.css)`
+    overflow-x: hidden;
+    overflow-y: scroll;
+    will-change: transform;
+    &:hover {
+      --track-color: ${(p)=>p.theme.colors.neutral.c30};
+    }
+  `,
+    yAuto: (0,styled_components__rspack_import_0.css)`
+    overflow-x: hidden;
+    overflow-y: auto;
+    will-change: transform;
+    &:hover {
+      --track-color: ${(p)=>p.theme.colors.neutral.c30};
+    }
+  `,
+    xy: (0,styled_components__rspack_import_0.css)`
+    overflow: scroll;
+    will-change: transform;
+    &:hover {
+      --track-color: ${(p)=>p.theme.colors.neutral.c30};
+    }
+  `,
+    trackSize: 12
+};
+const theme = {
+    theme: "light",
+    sizes: {
+        drawer: {
+            side: {
+                big: {
+                    width: 580
+                },
+                small: {
+                    width: 420
+                }
+            },
+            popin: {
+                min: {
+                    height: 158,
+                    width: 462
+                },
+                max: {
+                    height: 522,
+                    width: 622
+                }
+            }
+        },
+        topBarHeight: 58,
+        sideBarWidth: 230
+    },
+    radii,
+    fontFamilies,
+    fontSizes,
+    fontWeights,
+    space,
+    shadows,
+    colors: _ledgerhq_ui_shared__rspack_import_1.palettes.light,
+    animations,
+    overflow,
+    transition,
+    zIndexes,
+    breakpoints
+};
+/* unused export default */ var __rspack_default_export = ((/* unused pure expression or super */ null && (theme)));
+
+
+},
+9979(module) {
+module.exports = require("@ledgerhq/icons-ui/reactLegacy");
+
+},
+2993(module) {
+module.exports = require("@ledgerhq/ui-shared");
+
+},
+2015(module) {
+module.exports = require("react");
+
+},
+4562(module) {
+module.exports = require("react-is");
+
+},
+2770(module) {
+module.exports = require("styled-components");
+
+},
+9351(module) {
+module.exports = require("styled-system");
+
+},
+
+});
+// The module cache
+var __webpack_module_cache__ = {};
+
+// The require function
+function __webpack_require__(moduleId) {
+
+// Check if module is in cache
+var cachedModule = __webpack_module_cache__[moduleId];
+if (cachedModule !== undefined) {
+return cachedModule.exports;
+}
+// Create a new module (and put it into the cache)
+var module = (__webpack_module_cache__[moduleId] = {
+exports: {}
+});
+// Execute the module function
+__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+
+// Return the exports of the module
+return module.exports;
+
+}
+
+// webpack/runtime/compat_get_default_export
+(() => {
+// getDefaultExport function for compatibility with non-ESM modules
+__webpack_require__.n = (module) => {
+	var getter = module && module.__esModule ?
+		() => (module['default']) :
+		() => (module);
+	__webpack_require__.d(getter, { a: getter });
+	return getter;
+};
+
+})();
+// webpack/runtime/define_property_getters
+(() => {
+__webpack_require__.d = (exports, definition) => {
+	for(var key in definition) {
+        if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+            Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+        }
+    }
+};
+})();
+// webpack/runtime/has_own_property
+(() => {
+__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+})();
+// webpack/runtime/make_namespace_object
+(() => {
+// define __esModule on exports
+__webpack_require__.r = (exports) => {
+	if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+		Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+	}
+	Object.defineProperty(exports, '__esModule', { value: true });
+};
+})();
+var __webpack_exports__ = {};
+// This entry needs to be wrapped in an IIFE because it needs to be isolated against other modules in the chunk.
+(() => {
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (/* binding */ FlowStepper_stories),
+  Demo: () => (/* binding */ Demo),
+  Minimal: () => (/* binding */ Minimal),
+  IndexedByKey: () => (/* binding */ IndexedByKey)
+});
+
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(2015);
+var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
+;// CONCATENATED MODULE: external "react-transition-group"
+const external_react_transition_group_namespaceObject = require("react-transition-group");
+// EXTERNAL MODULE: external "styled-components"
+var external_styled_components_ = __webpack_require__(2770);
+var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
+;// CONCATENATED MODULE: external "storybook/manager-api"
+const manager_api_namespaceObject = require("storybook/manager-api");
+// EXTERNAL MODULE: ./src/components/navigation/FlowStepper/index.tsx
+var FlowStepper = __webpack_require__(1304);
+// EXTERNAL MODULE: ./src/components/asorted/Text/index.tsx
+var Text = __webpack_require__(348);
+// EXTERNAL MODULE: ./src/components/layout/Flex/index.ts
+var Flex = __webpack_require__(3696);
+// EXTERNAL MODULE: ./src/components/layout/Box/index.ts
+var Box = __webpack_require__(3832);
+// EXTERNAL MODULE: ./src/components/asorted/Divider/index.tsx
+var Divider = __webpack_require__(7716);
+// EXTERNAL MODULE: ./src/components/cta/Button/index.tsx + 1 modules
+var Button = __webpack_require__(1133);
+// EXTERNAL MODULE: ./src/components/cta/Link/index.tsx
+var Link = __webpack_require__(7473);
+// EXTERNAL MODULE: external "@ledgerhq/icons-ui/reactLegacy"
+var reactLegacy_ = __webpack_require__(9979);
+// EXTERNAL MODULE: ./src/components/Tag/index.tsx
+var Tag = __webpack_require__(4572);
+// EXTERNAL MODULE: ./src/components/helpers.ts
+var helpers = __webpack_require__(6614);
+;// CONCATENATED MODULE: ./src/components/navigation/FlowStepper/FlowStepper.stories.tsx
+
+
+
+
+
+
+
 const description = `
 ### A customizable flow layout.
 
@@ -59,7 +1617,7 @@ Each step is a child of the component, which must be a JSX element having at lea
 This label will be used by the flow stepper to populate the name of the step inside the progress stepper component.
 
 ### Tip #1:
-To avoid creating specific passthrough components you can use the \`<FlowStepper.Step label="Step label">{\u2026}</FlowStepper.Step>\` helper.
+To avoid creating specific passthrough components you can use the \`<FlowStepper.Step label="Step label">{…}</FlowStepper.Step>\` helper.
 
 ### Tip #2:
 You can define a specific header/footer for a given step by using the props \`header\`/\`footer\` on each step child of the component.
@@ -106,7 +1664,7 @@ const [activeIndex, setActiveIndex] = React.useState(0);
   activeIndex={activeIndex}
   header={() => (
     <Text variant="h1">
-      Header - Page n\xB0{activeIndex + 1} / {NB_OF_STEPS}
+      Header - Page n°{activeIndex + 1} / {NB_OF_STEPS}
     </Text>
   )}
   footer={() => (
@@ -146,78 +1704,146 @@ const [activeIndex, setActiveIndex] = React.useState(0);
 
 
 `;
-var FlowStepper_stories_default = {
-  title: "Navigation/FlowStepper",
-  component: import__.FlowStepper,
-  argTypes: {
-    activeIndex: { control: "number" },
-    extraProps: { control: "disabled" },
-    extraContainerProps: { control: "disabled" },
-    extraStepperProps: { control: "disabled" },
-    extraStepperContainerProps: { control: "disabled" },
-    children: { control: "disabled" },
-    renderChildren: { control: "disabled" },
-    header: { control: "disabled" },
-    stepHeaders: { control: "disabled" },
-    renderStepHeader: { control: "disabled" },
-    footer: { control: "disabled" },
-    stepFooters: { control: "disabled" },
-    renderStepFooter: { control: "disabled" }
-  },
-  args: {
-    activeIndex: 0
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: description
-      }
-    }
-  }
-};
-const NB_OF_STEPS = 5;
-const Minimal = (args) => {
-  const { activeIndex, ...rest } = args;
-  const [, updateArgs] = (0, import_manager_api.useArgs)();
-  return /* @__PURE__ */ import_react.default.createElement(
-    import__.FlowStepper,
-    {
-      activeIndex,
-      header: () => /* @__PURE__ */ import_react.default.createElement(import__.Text, { variant: "h1" }, "Header - Page n\xB0", activeIndex + 1, " / ", NB_OF_STEPS),
-      footer: () => /* @__PURE__ */ import_react.default.createElement(import__.Flex, { mt: 6, flexDirection: "column", rowGap: 6, alignItems: "flex-end" }, /* @__PURE__ */ import_react.default.createElement(import__.Box, { alignSelf: "stretch" }, /* @__PURE__ */ import_react.default.createElement(import__.Divider, null)), /* @__PURE__ */ import_react.default.createElement(import__.Flex, { columnGap: 6 }, /* @__PURE__ */ import_react.default.createElement(
-        import__.Button,
-        {
-          variant: "main",
-          outline: true,
-          disabled: activeIndex <= 0,
-          onClick: () => updateArgs({ activeIndex: activeIndex - 1 })
+/* export default */ const FlowStepper_stories = ({
+    title: "Navigation/FlowStepper",
+    component: FlowStepper["default"],
+    argTypes: {
+        activeIndex: {
+            control: "number"
+        },
+        extraProps: {
+            control: "disabled"
+        },
+        extraContainerProps: {
+            control: "disabled"
+        },
+        extraStepperProps: {
+            control: "disabled"
+        },
+        extraStepperContainerProps: {
+            control: "disabled"
+        },
+        children: {
+            control: "disabled"
+        },
+        renderChildren: {
+            control: "disabled"
+        },
+        header: {
+            control: "disabled"
+        },
+        stepHeaders: {
+            control: "disabled"
         },
-        "Previous"
-      ), /* @__PURE__ */ import_react.default.createElement(
-        import__.Button,
-        {
-          variant: "main",
-          disabled: activeIndex >= NB_OF_STEPS - 1,
-          onClick: () => updateArgs({ activeIndex: activeIndex + 1 })
+        renderStepHeader: {
+            control: "disabled"
         },
-        "Continue"
-      ))),
-      ...rest
+        footer: {
+            control: "disabled"
+        },
+        stepFooters: {
+            control: "disabled"
+        },
+        renderStepFooter: {
+            control: "disabled"
+        }
     },
-    [
-      ...new Array(NB_OF_STEPS).fill(0).map((_, index) => /* @__PURE__ */ import_react.default.createElement(import__.FlowStepper.Step, { label: "Step " + index }, /* @__PURE__ */ import_react.default.createElement(import__.Text, { key: index, variant: "body" }, import_helpers.lipsum), /* @__PURE__ */ import_react.default.createElement(import__.Button, { mt: 2, onClick: () => updateArgs({ activeIndex: NB_OF_STEPS }) }, "Navigate to the hidden step."))),
-      /* @__PURE__ */ import_react.default.createElement(import__.FlowStepper.Step, { label: "Hidden Step", hidden: true }, /* @__PURE__ */ import_react.default.createElement(import__.Text, { key: "hidden", variant: "body" }, "I am hidden."))
-    ]
-  );
+    args: {
+        activeIndex: 0
+    },
+    parameters: {
+        docs: {
+            description: {
+                component: description
+            }
+        }
+    }
+});
+const NB_OF_STEPS = 5;
+const Minimal = (args)=>{
+    const { activeIndex, ...rest } = args;
+    const [, updateArgs] = (0,manager_api_namespaceObject.useArgs)();
+    return /*#__PURE__*/ external_react_default().createElement(FlowStepper["default"], {
+        activeIndex: activeIndex,
+        header: ()=>/*#__PURE__*/ external_react_default().createElement(Text["default"], {
+                variant: "h1"
+            }, "Header - Page n°", activeIndex + 1, " / ", NB_OF_STEPS),
+        footer: ()=>/*#__PURE__*/ external_react_default().createElement(Flex["default"], {
+                mt: 6,
+                flexDirection: "column",
+                rowGap: 6,
+                alignItems: "flex-end"
+            }, /*#__PURE__*/ external_react_default().createElement(Box["default"], {
+                alignSelf: "stretch"
+            }, /*#__PURE__*/ external_react_default().createElement(Divider["default"], null)), /*#__PURE__*/ external_react_default().createElement(Flex["default"], {
+                columnGap: 6
+            }, /*#__PURE__*/ external_react_default().createElement(Button["default"], {
+                variant: "main",
+                outline: true,
+                disabled: activeIndex <= 0,
+                onClick: ()=>updateArgs({
+                        activeIndex: activeIndex - 1
+                    })
+            }, "Previous"), /*#__PURE__*/ external_react_default().createElement(Button["default"], {
+                variant: "main",
+                disabled: activeIndex >= NB_OF_STEPS - 1,
+                onClick: ()=>updateArgs({
+                        activeIndex: activeIndex + 1
+                    })
+            }, "Continue"))),
+        ...rest
+    }, [
+        ...new Array(NB_OF_STEPS).fill(0).map((_, index)=>/*#__PURE__*/ external_react_default().createElement(FlowStepper["default"].Step, {
+                label: "Step " + index
+            }, /*#__PURE__*/ external_react_default().createElement(Text["default"], {
+                key: index,
+                variant: "body"
+            }, helpers.lipsum), /*#__PURE__*/ external_react_default().createElement(Button["default"], {
+                mt: 2,
+                onClick: ()=>updateArgs({
+                        activeIndex: NB_OF_STEPS
+                    })
+            }, "Navigate to the hidden step."))),
+        /*#__PURE__*/ external_react_default().createElement(FlowStepper["default"].Step, {
+            label: "Hidden Step",
+            hidden: true
+        }, /*#__PURE__*/ external_react_default().createElement(Text["default"], {
+            key: "hidden",
+            variant: "body"
+        }, "I am hidden."))
+    ]);
 };
-const Header = ({ activeIndex, onBack }) => {
-  return /* @__PURE__ */ import_react.default.createElement(import__.Box, { position: "relative", my: 6 }, onBack && /* @__PURE__ */ import_react.default.createElement(import__.Box, { position: "absolute" }, /* @__PURE__ */ import_react.default.createElement(import__.Link, { onClick: onBack, Icon: import__.IconsLegacy.ArrowLeftMedium, iconPosition: "left" }, "Back")), /* @__PURE__ */ import_react.default.createElement(import__.Flex, { justifyContent: "center" }, /* @__PURE__ */ import_react.default.createElement(import__.Text, { variant: "h2" }, "Header ", activeIndex + 1)));
+const Header = ({ activeIndex, onBack })=>{
+    return /*#__PURE__*/ external_react_default().createElement(Box["default"], {
+        position: "relative",
+        my: 6
+    }, onBack && /*#__PURE__*/ external_react_default().createElement(Box["default"], {
+        position: "absolute"
+    }, /*#__PURE__*/ external_react_default().createElement(Link["default"], {
+        onClick: onBack,
+        Icon: reactLegacy_.ArrowLeftMedium,
+        iconPosition: "left"
+    }, "Back")), /*#__PURE__*/ external_react_default().createElement(Flex["default"], {
+        justifyContent: "center"
+    }, /*#__PURE__*/ external_react_default().createElement(Text["default"], {
+        variant: "h2"
+    }, "Header ", activeIndex + 1)));
 };
-const Footer = ({
-  onContinue,
-  children
-}) => /* @__PURE__ */ import_react.default.createElement(import__.Flex, { mt: 6, flexDirection: "column", rowGap: 6 }, /* @__PURE__ */ import_react.default.createElement(import__.Box, { alignSelf: "stretch" }, /* @__PURE__ */ import_react.default.createElement(import__.Divider, null)), /* @__PURE__ */ import_react.default.createElement(import__.Flex, { flexDirection: "row", justifyContent: "space-between", alignItems: "center" }, children || /* @__PURE__ */ import_react.default.createElement(import__.Flex, null), onContinue && /* @__PURE__ */ import_react.default.createElement(import__.Button, { variant: "main", onClick: onContinue }, "Continue")));
-const AnimatedItem = (0, import_styled_components.default)(import__.Flex)`
+const Footer = ({ onContinue, children })=>/*#__PURE__*/ external_react_default().createElement(Flex["default"], {
+        mt: 6,
+        flexDirection: "column",
+        rowGap: 6
+    }, /*#__PURE__*/ external_react_default().createElement(Box["default"], {
+        alignSelf: "stretch"
+    }, /*#__PURE__*/ external_react_default().createElement(Divider["default"], null)), /*#__PURE__*/ external_react_default().createElement(Flex["default"], {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center"
+    }, children || /*#__PURE__*/ external_react_default().createElement(Flex["default"], null), onContinue && /*#__PURE__*/ external_react_default().createElement(Button["default"], {
+        variant: "main",
+        onClick: onContinue
+    }, "Continue")));
+const AnimatedItem = external_styled_components_default()((0,Flex["default"]))`
   transition: opacity 500ms;
   width: 100%;
   height: 100%;
@@ -234,125 +1860,142 @@ const AnimatedItem = (0, import_styled_components.default)(import__.Flex)`
     opacity: 0;
   }
 `;
-const Item = ({ label }) => /* @__PURE__ */ import_react.default.createElement(AnimatedItem, null, /* @__PURE__ */ import_react.default.createElement(
-  import__.Flex,
-  {
-    position: "absolute",
-    left: "0",
-    right: "0",
-    top: "0",
-    bottom: "0",
-    alignItems: "center",
-    justifyContent: "center",
-    backgroundColor: `${label.toLowerCase()}.c50`
-  },
-  /* @__PURE__ */ import_react.default.createElement(import__.Text, { variant: "h2", textTransform: "capitalize" }, label)
-));
-const steps = ["Primary", "Neutral", "Success", "Warning", "Error"];
-const StepFooter = ({ label }) => /* @__PURE__ */ import_react.default.createElement(import__.Flex, { flexDirection: "row", alignItems: "center" }, /* @__PURE__ */ import_react.default.createElement(import__.Text, { whiteSpace: "pre" }, "Footer for step "), /* @__PURE__ */ import_react.default.createElement(import__.Tag, { size: "medium", type: "plain", active: true }, label));
-const Demo = (args) => {
-  const [, updateArgs] = (0, import_manager_api.useArgs)();
-  return /* @__PURE__ */ import_react.default.createElement(import__.Flex, { height: "90vh" }, /* @__PURE__ */ import_react.default.createElement(
-    import__.FlowStepper,
-    {
-      header: ({ activeIndex }) => /* @__PURE__ */ import_react.default.createElement(
-        Header,
-        {
-          activeIndex,
-          onBack: activeIndex > 0 ? () => {
-            updateArgs({ activeIndex: activeIndex - 1 });
-          } : void 0
-        }
-      ),
-      renderStepFooter: ({ stepsLength, activeIndex, children }) => /* @__PURE__ */ import_react.default.createElement(
-        Footer,
-        {
-          onContinue: activeIndex < stepsLength - 1 ? () => {
-            updateArgs({ activeIndex: activeIndex + 1 });
-          } : void 0
+const Item = ({ label })=>/*#__PURE__*/ external_react_default().createElement(AnimatedItem, null, /*#__PURE__*/ external_react_default().createElement(Flex["default"], {
+        position: "absolute",
+        left: "0",
+        right: "0",
+        top: "0",
+        bottom: "0",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: `${label.toLowerCase()}.c50`
+    }, /*#__PURE__*/ external_react_default().createElement(Text["default"], {
+        variant: "h2",
+        textTransform: "capitalize"
+    }, label)));
+const steps = [
+    "Primary",
+    "Neutral",
+    "Success",
+    "Warning",
+    "Error"
+];
+const StepFooter = ({ label })=>/*#__PURE__*/ external_react_default().createElement(Flex["default"], {
+        flexDirection: "row",
+        alignItems: "center"
+    }, /*#__PURE__*/ external_react_default().createElement(Text["default"], {
+        whiteSpace: "pre"
+    }, "Footer for step "), /*#__PURE__*/ external_react_default().createElement(Tag["default"], {
+        size: "medium",
+        type: "plain",
+        active: true
+    }, label));
+const Demo = (args)=>{
+    const [, updateArgs] = (0,manager_api_namespaceObject.useArgs)();
+    return /*#__PURE__*/ external_react_default().createElement(Flex["default"], {
+        height: "90vh"
+    }, /*#__PURE__*/ external_react_default().createElement(FlowStepper["default"], {
+        header: ({ activeIndex })=>/*#__PURE__*/ external_react_default().createElement(Header, {
+                activeIndex: activeIndex,
+                onBack: activeIndex > 0 ? ()=>{
+                    updateArgs({
+                        activeIndex: activeIndex - 1
+                    });
+                } : undefined
+            }),
+        renderStepFooter: ({ stepsLength, activeIndex, children })=>/*#__PURE__*/ external_react_default().createElement(Footer, {
+                onContinue: activeIndex < stepsLength - 1 ? ()=>{
+                    updateArgs({
+                        activeIndex: activeIndex + 1
+                    });
+                } : undefined
+            }, children),
+        extraStepperContainerProps: {
+            my: 12
         },
-        children
-      ),
-      extraStepperContainerProps: { my: 12 },
-      extraStepperProps: { maxWidth: "500px" },
-      renderChildren: ({ children }) => /* @__PURE__ */ import_react.default.createElement(import_react_transition_group.TransitionGroup, { component: null }, children),
-      ...args
-    },
-    steps.map((label) => /* @__PURE__ */ import_react.default.createElement(
-      import_react_transition_group.CSSTransition,
-      {
-        key: label,
-        label,
-        footer: /* @__PURE__ */ import_react.default.createElement(StepFooter, { label }),
-        timeout: 500,
-        classNames: "step",
-        mountOnEnter: true,
-        unmountOnExit: true
-      },
-      /* @__PURE__ */ import_react.default.createElement(Item, { label })
-    ))
-  ));
-};
-const StepWithNavigation = (props) => {
-  const { label, setActiveStep } = props;
-  const content = (0, import_react.useMemo)(() => {
-    return steps.map((step) => {
-      return /* @__PURE__ */ import_react.default.createElement(
-        import__.Button,
-        {
-          key: step,
-          disabled: step === label,
-          variant: "main",
-          onClick: () => setActiveStep(step)
+        extraStepperProps: {
+            maxWidth: "500px"
         },
-        'Go to "',
-        step,
-        '"'
-      );
-    });
-  }, [setActiveStep, label]);
-  return /* @__PURE__ */ import_react.default.createElement(
-    import__.Flex,
-    {
-      flex: 1,
-      flexDirection: "column",
-      justifyContent: "center",
-      alignItems: "center",
-      padding: 4,
-      rowGap: 4,
-      backgroundColor: `${label.toLowerCase()}.c50`
-    },
-    content
-  );
+        renderChildren: ({ children })=>/*#__PURE__*/ external_react_default().createElement(external_react_transition_group_namespaceObject.TransitionGroup, {
+                component: null
+            }, children),
+        ...args
+    }, steps.map((label)=>/*#__PURE__*/ external_react_default().createElement(external_react_transition_group_namespaceObject.CSSTransition, {
+            key: label,
+            label: label,
+            footer: /*#__PURE__*/ external_react_default().createElement(StepFooter, {
+                label: label
+            }),
+            timeout: 500,
+            classNames: "step",
+            mountOnEnter: true,
+            unmountOnExit: true
+        }, /*#__PURE__*/ external_react_default().createElement(Item, {
+            label: label
+        })))));
 };
-const IndexedByKey = (args) => {
-  const [activeStep, setActiveStep] = (0, import_react2.useState)(steps[0]);
-  return /* @__PURE__ */ import_react.default.createElement(import__.Flex, { height: "90vh" }, /* @__PURE__ */ import_react.default.createElement(
-    import__.FlowStepper.Indexed,
-    {
-      activeKey: activeStep,
-      header: ({ activeIndex }) => /* @__PURE__ */ import_react.default.createElement(
-        Header,
-        {
-          activeIndex,
-          onBack: activeIndex > 0 ? () => {
-            setActiveStep(steps[activeIndex - 1]);
-          } : void 0
-        }
-      ),
-      footer: ({ stepsLength, activeIndex }) => /* @__PURE__ */ import_react.default.createElement(
-        Footer,
-        {
-          onContinue: activeIndex < stepsLength - 1 ? () => {
-            setActiveStep(steps[activeIndex + 1]);
-          } : void 0
-        }
-      ),
-      extraStepperContainerProps: { my: 12 },
-      extraStepperProps: { maxWidth: "500px" },
-      ...args
-    },
-    steps.map((label) => /* @__PURE__ */ import_react.default.createElement(import__.FlowStepper.Indexed.Step, { key: label, label, itemKey: label }, /* @__PURE__ */ import_react.default.createElement(StepWithNavigation, { label, setActiveStep })))
-  ));
+const StepWithNavigation = (props)=>{
+    const { label, setActiveStep } = props;
+    const content = (0,external_react_.useMemo)(()=>{
+        return steps.map((step)=>{
+            return /*#__PURE__*/ external_react_default().createElement(Button["default"], {
+                key: step,
+                disabled: step === label,
+                variant: "main",
+                onClick: ()=>setActiveStep(step)
+            }, 'Go to "', step, '"');
+        });
+    }, [
+        setActiveStep,
+        label
+    ]);
+    return /*#__PURE__*/ external_react_default().createElement(Flex["default"], {
+        flex: 1,
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        padding: 4,
+        rowGap: 4,
+        backgroundColor: `${label.toLowerCase()}.c50`
+    }, content);
 };
-//# sourceMappingURL=FlowStepper.stories.js.map
+const IndexedByKey = (args)=>{
+    const [activeStep, setActiveStep] = (0,external_react_.useState)(steps[0]);
+    return /*#__PURE__*/ external_react_default().createElement(Flex["default"], {
+        height: "90vh"
+    }, /*#__PURE__*/ external_react_default().createElement(FlowStepper["default"].Indexed, {
+        activeKey: activeStep,
+        header: ({ activeIndex })=>/*#__PURE__*/ external_react_default().createElement(Header, {
+                activeIndex: activeIndex,
+                onBack: activeIndex > 0 ? ()=>{
+                    setActiveStep(steps[activeIndex - 1]);
+                } : undefined
+            }),
+        footer: ({ stepsLength, activeIndex })=>/*#__PURE__*/ external_react_default().createElement(Footer, {
+                onContinue: activeIndex < stepsLength - 1 ? ()=>{
+                    setActiveStep(steps[activeIndex + 1]);
+                } : undefined
+            }),
+        extraStepperContainerProps: {
+            my: 12
+        },
+        extraStepperProps: {
+            maxWidth: "500px"
+        },
+        ...args
+    }, steps.map((label)=>/*#__PURE__*/ external_react_default().createElement(FlowStepper["default"].Indexed.Step, {
+            key: label,
+            label: label,
+            itemKey: label
+        }, /*#__PURE__*/ external_react_default().createElement(StepWithNavigation, {
+            label: label,
+            setActiveStep: setActiveStep
+        })))));
+};
+
+})();
+
+module.exports = __webpack_exports__;
+})()
+;
+//# sourceMappingURL=FlowStepper.stories.js.map