@ledgerhq/react-ui 0.12.1-recover-beta.0 → 0.13.0-next.0

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

@@ -1,39 +1,46 @@
+"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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
-  __markAsModule(target);
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && key !== "default")
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+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 });
   }
-  return target;
+  return to;
 };
-var __toModule = (module2) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-__export(exports, {
+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
 });
-var import_react = __toModule(require("react"));
-var import_react_transition_group = __toModule(require("react-transition-group"));
-var import_styled_components = __toModule(require("styled-components"));
-var import_client_api = __toModule(require("@storybook/client-api"));
-var import__ = __toModule(require("../../.."));
-var import_helpers = __toModule(require("../../helpers"));
-var import_react2 = __toModule(require("react"));
+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_client_api = require("@storybook/client-api");
+var import__ = require("../../..");
+var import_helpers = require("../../helpers");
+var import_react2 = require("react");
 const description = `
 ### A customizable flow layout.
 
@@ -169,87 +176,44 @@ const NB_OF_STEPS = 5;
 const Minimal = (args) => {
   const { activeIndex, ...rest } = args;
   const [, updateArgs] = (0, import_client_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, {
-      variant: "light"
-    })), /* @__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 })
-    }, "Previous"), /* @__PURE__ */ import_react.default.createElement(import__.Button, {
-      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__ */ 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."))
-  ]);
+  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, { variant: "light" })), /* @__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 })
+        },
+        "Previous"
+      ), /* @__PURE__ */ import_react.default.createElement(
+        import__.Button,
+        {
+          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__ */ 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."))
+    ]
+  );
 };
 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__.Icons.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)));
+  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__.Icons.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 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, {
-  variant: "light"
-})), /* @__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")));
+}) => /* @__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, { variant: "light" })), /* @__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)`
   transition: opacity 500ms;
   width: 100%;
@@ -267,115 +231,125 @@ 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 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 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_client_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
-    }, 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
-  })))));
+  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
+        },
+        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)
-      }, 'Go to "', step, '"');
+      return /* @__PURE__ */ import_react.default.createElement(
+        import__.Button,
+        {
+          key: step,
+          disabled: step === label,
+          variant: "main",
+          onClick: () => setActiveStep(step)
+        },
+        '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);
+  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
+  );
 };
 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
-  })))));
+  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 })))
+  ));
 };
 //# sourceMappingURL=FlowStepper.stories.js.map

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../src/components/navigation/FlowStepper/FlowStepper.stories.tsx"],
   "sourcesContent": ["import React, { useMemo } from \"react\";\nimport { TransitionGroup, CSSTransition } from \"react-transition-group\";\nimport styled from \"styled-components\";\n// @ts-expect-error Typings\u2026\nimport { useArgs } from \"@storybook/client-api\";\nimport { Props as FlowStepperProps } from \"./index\";\nimport { Divider, Flex, FlowStepper, Text, Button, Box, Link, Icons, Tag } from \"../../..\";\nimport type { Size as TagSize } from \"../../Tag\";\nimport { lipsum, StoryTemplate } from \"../../helpers\";\nimport { useState } from \"react\";\n\nconst description = `\n### A customizable flow layout.\n\nThis component accepts multiple children as steps and displays the active one as well\na progress stepper and optionally a header and/or a footer.\n\n## Usage\n\n\\`\\`\\`js\n\nimport { FlowStepper } from \"@ledgerhq/react-ui\"\n\n\\`\\`\\`\n\nEach step is a child of the component, which must be a JSX element having at least a \\`label\\` prop.\nThis label will be used by the flow stepper to populate the name of the step inside the progress stepper component.\n\n### Tip #1:\nTo avoid creating specific passthrough components you can use the \\`<FlowStepper.Step label=\"Step label\">{\u2026}</FlowStepper.Step>\\` helper.\n\n### Tip #2:\nYou can define a specific header/footer for a given step by using the props \\`header\\`/\\`footer\\` on each step child of the component.\n\n\\`\\`\\`jsx\n<FlowStepper\n  activeIndex={1}\n  renderStepFooter={ // Optional\n    ({activeIndex, stepsLength, children}) => (\n      <YourFooterWrapper>\n        {children}\n      </YourFooterWrapper>\n    )\n  }\n>\n  <YourStepA label=\"StepA\" />\n  <YourStepB label=\"StepB\" footer={<YourStepBFooter />}/>\n  <YourStepC label=\"StepC\" />\n  <YourStepD label=\"StepD\" />\n</FlowStepper.Indexed>\n\\`\\`\\`\n\n### Tip #3:\nIf you want to define steps that are identified by a \\`string\\` identifier, you can use FlowStepper with the \\`activeKey\\` prop and children that each have an \\`itemKey\\` prop.\nThis allows you to not have to hardcode steps indices.\n\n\\`\\`\\`jsx\n<FlowStepper.Indexed activeKey=\"stepC\">\n  <YourStepA label=\"StepA\" itemKey=\"stepA\" />\n  <YourStepB label=\"StepB\" itemKey=\"stepB\" />\n  <YourStepC label=\"StepC\" itemKey=\"stepC\" />\n  <YourStepD label=\"StepD\" itemKey=\"stepD\" />\n</FlowStepper.Indexed>\n\\`\\`\\`\n\n\n## Basic example:\n\n\\`\\`\\`jsx\nconst NB_OF_STEPS = 10;\nconst [activeIndex, setActiveIndex] = React.useState(0);\n\n<FlowStepper\n  activeIndex={activeIndex}\n  header={() => (\n    <Text variant=\"h1\">\n      Header - Page n\u00B0{activeIndex + 1} / {NB_OF_STEPS}\n    </Text>\n  )}\n  footer={() => (\n    <Flex mt={6} flexDirection=\"column\" rowGap={6} alignItems=\"flex-end\">\n      <Box alignSelf=\"stretch\">\n        <Divider variant=\"light\" />\n      </Box>\n      <Flex columnGap={6}>\n        <Button\n          variant=\"main\"\n          outline\n          disabled={activeIndex <= 0}\n          onClick={() => setActiveIndex(i => i - 1)}\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"main\"\n          disabled={activeIndex >= NB_OF_STEPS - 1}\n          onClick={() => setActiveIndex(i => i + 1)}\n        >\n          Continue\n        </Button>\n      </Flex>\n    </Flex>\n  )}\n>\n  {new Array(NB_OF_STEPS).fill(0).map((_, index) => (\n    <FlowStepper.Step label={\"Step \" + index}>\n      <Text key={index} variant=\"body\">\n        {lipsum}\n      </Text>\n    </FlowStepper.Step>\n  ))}\n</FlowStepper>\n\\`\\`\\`\n\n\n`;\n\nexport default {\n  title: \"Navigation/FlowStepper\",\n  component: FlowStepper,\n  argTypes: {\n    activeIndex: { control: \"number\", defaultValue: 0 },\n    extraProps: { control: \"disabled\" },\n    extraContainerProps: { control: \"disabled\" },\n    extraStepperProps: { control: \"disabled\" },\n    extraStepperContainerProps: { control: \"disabled\" },\n    children: { control: \"disabled\" },\n    renderChildren: { control: \"disabled\" },\n    header: { control: \"disabled\" },\n    stepHeaders: { control: \"disabled\" },\n    renderStepHeader: { control: \"disabled\" },\n    footer: { control: \"disabled\" },\n    stepFooters: { control: \"disabled\" },\n    renderStepFooter: { control: \"disabled\" },\n  },\n  parameters: {\n    docs: {\n      description: {\n        component: description,\n      },\n    },\n  },\n};\n\nconst NB_OF_STEPS = 5;\nexport const Minimal: StoryTemplate<FlowStepperProps<unknown>> = (args) => {\n  const { activeIndex, ...rest } = args;\n  const [, updateArgs] = useArgs();\n\n  return (\n    <FlowStepper\n      activeIndex={activeIndex}\n      header={() => (\n        <Text variant=\"h1\">\n          Header - Page n\u00B0{activeIndex + 1} / {NB_OF_STEPS}\n        </Text>\n      )}\n      footer={() => (\n        <Flex mt={6} flexDirection=\"column\" rowGap={6} alignItems=\"flex-end\">\n          <Box alignSelf=\"stretch\">\n            <Divider variant=\"light\" />\n          </Box>\n          <Flex columnGap={6}>\n            <Button\n              variant=\"main\"\n              outline\n              disabled={activeIndex <= 0}\n              onClick={() => updateArgs({ activeIndex: activeIndex - 1 })}\n            >\n              Previous\n            </Button>\n            <Button\n              variant=\"main\"\n              disabled={activeIndex >= NB_OF_STEPS - 1}\n              onClick={() => updateArgs({ activeIndex: activeIndex + 1 })}\n            >\n              Continue\n            </Button>\n          </Flex>\n        </Flex>\n      )}\n      {...rest}\n    >\n      {[\n        ...new Array(NB_OF_STEPS).fill(0).map((_, index) => (\n          <FlowStepper.Step label={\"Step \" + index}>\n            <Text key={index} variant=\"body\">\n              {lipsum}\n            </Text>\n            <Button mt={2} onClick={() => updateArgs({ activeIndex: NB_OF_STEPS })}>\n              Navigate to the hidden step.\n            </Button>\n          </FlowStepper.Step>\n        )),\n        <FlowStepper.Step label=\"Hidden Step\" hidden>\n          <Text key=\"hidden\" variant=\"body\">\n            I am hidden.\n          </Text>\n        </FlowStepper.Step>,\n      ]}\n    </FlowStepper>\n  );\n};\n\nconst Header = ({ activeIndex, onBack }: { activeIndex: number; onBack?: () => void }) => {\n  return (\n    <Box position=\"relative\" my={6}>\n      {onBack && (\n        <Box position=\"absolute\">\n          <Link onClick={onBack} Icon={Icons.ArrowLeftMedium} iconPosition=\"left\">\n            Back\n          </Link>\n        </Box>\n      )}\n      <Flex justifyContent=\"center\">\n        <Text variant=\"h2\">Header {activeIndex + 1}</Text>\n      </Flex>\n    </Box>\n  );\n};\n\nconst Footer = ({\n  onContinue,\n  children,\n}: {\n  onContinue?: () => void;\n  children?: React.ReactNode;\n}) => (\n  <Flex mt={6} flexDirection=\"column\" rowGap={6}>\n    <Box alignSelf=\"stretch\">\n      <Divider variant=\"light\" />\n    </Box>\n    <Flex flexDirection=\"row\" justifyContent=\"space-between\" alignItems=\"center\">\n      {children || <Flex />}\n      {onContinue && (\n        <Button variant=\"main\" onClick={onContinue}>\n          Continue\n        </Button>\n      )}\n    </Flex>\n  </Flex>\n);\n\nconst AnimatedItem = styled(Flex)`\n  transition: opacity 500ms;\n  width: 100%;\n  height: 100%;\n  &.step-enter {\n    opacity: 0;\n  }\n  &.step-enter-active {\n    opacity: 1;\n  }\n  &.step-exit {\n    opacity: 1;\n  }\n  &.step-exit-active {\n    opacity: 0;\n  }\n`;\nconst Item = ({ label }: { label: string }) => (\n  <AnimatedItem>\n    <Flex\n      position=\"absolute\"\n      left=\"0\"\n      right=\"0\"\n      top=\"0\"\n      bottom=\"0\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      backgroundColor={`${label.toLowerCase()}.c50`}\n    >\n      <Text variant=\"h2\" textTransform=\"capitalize\">\n        {label}\n      </Text>\n    </Flex>\n  </AnimatedItem>\n);\n\nconst steps = [\"Primary\", \"Neutral\", \"Success\", \"Warning\", \"Error\"];\n\nconst StepFooter = ({ label }: { label: string }) => (\n  <Flex flexDirection=\"row\" alignItems=\"center\">\n    <Text whiteSpace=\"pre\">Footer for step </Text>\n    <Tag size={\"medium\" as TagSize} type=\"plain\" active>\n      {label}\n    </Tag>\n  </Flex>\n);\n\nexport const Demo: StoryTemplate<FlowStepperProps<unknown>> = (args) => {\n  const [, updateArgs] = useArgs();\n\n  return (\n    <Flex height=\"90vh\">\n      <FlowStepper\n        header={({ activeIndex }) => (\n          <Header\n            activeIndex={activeIndex}\n            onBack={\n              activeIndex > 0\n                ? () => {\n                    updateArgs({ activeIndex: activeIndex - 1 });\n                  }\n                : undefined\n            }\n          />\n        )}\n        renderStepFooter={({ stepsLength, activeIndex, children }) => (\n          <Footer\n            onContinue={\n              activeIndex < stepsLength - 1\n                ? () => {\n                    updateArgs({ activeIndex: activeIndex + 1 });\n                  }\n                : undefined\n            }\n          >\n            {children}\n          </Footer>\n        )}\n        extraStepperContainerProps={{ my: 12 }}\n        extraStepperProps={{ maxWidth: \"500px\" }}\n        renderChildren={({ children }) => (\n          <TransitionGroup component={null}>{children}</TransitionGroup>\n        )}\n        {...args}\n      >\n        {steps.map((label) => (\n          <CSSTransition\n            key={label}\n            label={label}\n            footer={<StepFooter label={label} />}\n            timeout={500}\n            classNames=\"step\"\n            mountOnEnter\n            unmountOnExit\n          >\n            <Item label={label} />\n          </CSSTransition>\n        ))}\n      </FlowStepper>\n    </Flex>\n  );\n};\n\nconst StepWithNavigation = (props: { label: string; setActiveStep: (arg: string) => void }) => {\n  const { label, setActiveStep } = props;\n  const content = useMemo(() => {\n    return steps.map((step) => {\n      return (\n        <Button\n          key={step}\n          disabled={step === label}\n          variant=\"main\"\n          onClick={() => setActiveStep(step)}\n        >\n          Go to \"{step}\"\n        </Button>\n      );\n    });\n  }, [setActiveStep, label]);\n  return (\n    <Flex\n      flex={1}\n      flexDirection=\"column\"\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      padding={4}\n      rowGap={4}\n      backgroundColor={`${label.toLowerCase()}.c50`}\n    >\n      {content}\n    </Flex>\n  );\n};\n\nexport const IndexedByKey: StoryTemplate<FlowStepperProps<unknown>> = (args) => {\n  const [activeStep, setActiveStep] = useState(steps[0]);\n  return (\n    <Flex height=\"90vh\">\n      <FlowStepper.Indexed\n        activeKey={activeStep}\n        header={({ activeIndex }) => (\n          <Header\n            activeIndex={activeIndex}\n            onBack={\n              activeIndex > 0\n                ? () => {\n                    setActiveStep(steps[activeIndex - 1]);\n                  }\n                : undefined\n            }\n          />\n        )}\n        footer={({ stepsLength, activeIndex }) => (\n          <Footer\n            onContinue={\n              activeIndex < stepsLength - 1\n                ? () => {\n                    setActiveStep(steps[activeIndex + 1]);\n                  }\n                : undefined\n            }\n          />\n        )}\n        extraStepperContainerProps={{ my: 12 }}\n        extraStepperProps={{ maxWidth: \"500px\" }}\n        {...args}\n      >\n        {steps.map((label) => (\n          <FlowStepper.Indexed.Step key={label} label={label} itemKey={label}>\n            <StepWithNavigation label={label} setActiveStep={setActiveStep} />\n          </FlowStepper.Indexed.Step>\n        ))}\n      </FlowStepper.Indexed>\n    </Flex>\n  );\n};\n"],
-  "mappings": "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",
-  "names": []
+  "mappings": "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",
+  "names": ["import_react", "React", "styled"]
 }