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

package/lib/cjs/components/layout/List/VerticalTimeline/TimelineItem.js

@@ -1,35 +1,42 @@
+"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 TimelineItem_exports = {};
+__export(TimelineItem_exports, {
   default: () => TimelineItem
 });
-var import_react = __toModule(require("react"));
-var import_styled_components = __toModule(require("styled-components"));
-var import__2 = __toModule(require("../.."));
-var import__3 = __toModule(require("../../.."));
-var import_Tag = __toModule(require("../../../Tag"));
-var import_TimelineIndicator = __toModule(require("./TimelineIndicator"));
+module.exports = __toCommonJS(TimelineItem_exports);
+var import_react = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+var import__2 = require("../..");
+var import__3 = require("../../..");
+var import_Tag = __toESM(require("../../../Tag"));
+var import_TimelineIndicator = __toESM(require("./TimelineIndicator"));
 const getContainerBackground = (theme, status, isLastItem) => {
   if (isLastItem && status === "completed") {
     return theme.colors.success.c30;
@@ -64,30 +71,31 @@ const TimelineIndicatorContentHeader = (0, import_styled_components.default)(imp
 `;
 function TimelineItem({ item, isFirstItem, isLastItem }) {
   const { colors } = (0, import_styled_components.useTheme)();
-  return /* @__PURE__ */ import_react.default.createElement(import__2.Flex, {
-    flexDirection: "row"
-  }, /* @__PURE__ */ import_react.default.createElement(import_TimelineIndicator.default, {
-    status: item.status,
-    isFirstItem,
-    isLastItem,
-    mr: 4
-  }), /* @__PURE__ */ import_react.default.createElement(Container, {
-    status: item.status,
-    isLastItem,
-    mb: 4,
-    flexDirection: "column"
-  }, /* @__PURE__ */ import_react.default.createElement(TimelineIndicatorContentHeader, null, /* @__PURE__ */ import_react.default.createElement(import__3.Text, {
-    variant: "body",
-    color: item.status === "inactive" ? "neutral.c80" : isLastItem ? "success.c100" : "primary.c90"
-  }, item.title), item?.estimatedTime && item.status === "active" && /* @__PURE__ */ import_react.default.createElement(import_Tag.default, {
-    size: "small",
-    type: "opacity",
-    active: true,
-    disabled: true,
-    textProps: { color: colors.neutral.c100 }
-  }, `${item.estimatedTime / 60} min`)), item.renderBody && item.status === "active" && /* @__PURE__ */ import_react.default.createElement(import__2.Box, {
-    position: "relative",
-    pt: 6
-  }, item.renderBody(item.status === "active"))));
+  return /* @__PURE__ */ import_react.default.createElement(import__2.Flex, { flexDirection: "row" }, /* @__PURE__ */ import_react.default.createElement(
+    import_TimelineIndicator.default,
+    {
+      status: item.status,
+      isFirstItem,
+      isLastItem,
+      mr: 4
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(Container, { status: item.status, isLastItem, mb: 4, flexDirection: "column" }, /* @__PURE__ */ import_react.default.createElement(TimelineIndicatorContentHeader, null, /* @__PURE__ */ import_react.default.createElement(
+    import__3.Text,
+    {
+      variant: "body",
+      color: item.status === "inactive" ? "neutral.c80" : isLastItem ? "success.c100" : "primary.c90"
+    },
+    item.title
+  ), (item == null ? void 0 : item.estimatedTime) && item.status === "active" && /* @__PURE__ */ import_react.default.createElement(
+    import_Tag.default,
+    {
+      size: "small",
+      type: "opacity",
+      active: true,
+      disabled: true,
+      textProps: { color: colors.neutral.c100 }
+    },
+    `${item.estimatedTime / 60} min`
+  )), item.renderBody && item.status === "active" && /* @__PURE__ */ import_react.default.createElement(import__2.Box, { position: "relative", pt: 6 }, item.renderBody(item.status === "active"))));
 }
 //# sourceMappingURL=TimelineItem.js.map

package/lib/cjs/components/layout/List/VerticalTimeline/TimelineItem.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../src/components/layout/List/VerticalTimeline/TimelineItem.tsx"],
   "sourcesContent": ["import React from \"react\";\n\nimport { Theme } from \"src/styles/theme\";\nimport styled, { useTheme } from \"styled-components\";\n\nimport { Item, ItemStatus } from \".\";\nimport { Flex, Box } from \"../..\";\nimport { Text } from \"../../..\";\nimport Tag from \"../../../Tag\";\n\nimport TimelineIndicator from \"./TimelineIndicator\";\n\nexport type Props = {\n  item: Item;\n  isFirstItem?: boolean;\n  isLastItem?: boolean;\n};\n\nconst getContainerBackground = (theme: Theme, status: ItemStatus, isLastItem?: boolean) => {\n  if (isLastItem && status === \"completed\") {\n    return theme.colors.success.c30;\n  } else if (status === \"completed\") {\n    return theme.colors.primary.c20;\n  } else if (status === \"active\") {\n    return theme.colors.neutral.c20;\n  }\n  return theme.colors.neutral.c30;\n};\n\nconst getContainerBorder = (theme: Theme, status: ItemStatus, isLastItem?: boolean) => {\n  if (isLastItem && status === \"completed\") {\n    return theme.colors.success.c30;\n  } else if (isLastItem && status === \"active\") {\n    return theme.colors.success.c100;\n  } else if (status === \"completed\") {\n    return theme.colors.primary.c20;\n  } else if (status === \"active\") {\n    return theme.colors.primary.c80;\n  }\n  return theme.colors.neutral.c30;\n};\n\nconst Container = styled(Flex)<{ status: ItemStatus; isLastItem?: boolean }>`\n  flex: 1;\n  border-radius: ${(p) => p.theme.radii[2]}px;\n  background: ${(p) => getContainerBackground(p.theme, p.status, p.isLastItem)};\n  border: 1px solid ${(p) => getContainerBorder(p.theme, p.status, p.isLastItem)};\n  padding: 20px 16px;\n`;\n\nconst TimelineIndicatorContentHeader = styled(Flex)`\n  justify-content: space-between;\n`;\n\nexport default function TimelineItem({ item, isFirstItem, isLastItem }: Props) {\n  const { colors } = useTheme();\n\n  return (\n    <Flex flexDirection=\"row\">\n      <TimelineIndicator\n        status={item.status}\n        isFirstItem={isFirstItem}\n        isLastItem={isLastItem}\n        mr={4}\n      />\n      <Container status={item.status} isLastItem={isLastItem} mb={4} flexDirection=\"column\">\n        <TimelineIndicatorContentHeader>\n          <Text\n            variant=\"body\"\n            color={\n              item.status === \"inactive\"\n                ? \"neutral.c80\"\n                : isLastItem\n                ? \"success.c100\"\n                : \"primary.c90\"\n            }\n          >\n            {item.title}\n          </Text>\n          {item?.estimatedTime && item.status === \"active\" && (\n            <Tag\n              size=\"small\"\n              type=\"opacity\"\n              active\n              disabled\n              textProps={{ color: colors.neutral.c100 }}\n            >{`${item.estimatedTime / 60} min`}</Tag>\n          )}\n        </TimelineIndicatorContentHeader>\n        {item.renderBody && item.status === \"active\" && (\n          <Box position=\"relative\" pt={6}>\n            {item.renderBody(item.status === \"active\")}\n          </Box>\n        )}\n      </Container>\n    </Flex>\n  );\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAGlB,+BAAiC;AAGjC,gBAA0B;AAC1B,gBAAqB;AACrB,iBAAgB;AAEhB,+BAA8B;AAQ9B,MAAM,yBAAyB,CAAC,OAAc,QAAoB,eAAyB;AACzF,MAAI,cAAc,WAAW,aAAa;AACxC,WAAO,MAAM,OAAO,QAAQ;AAAA,aACnB,WAAW,aAAa;AACjC,WAAO,MAAM,OAAO,QAAQ;AAAA,aACnB,WAAW,UAAU;AAC9B,WAAO,MAAM,OAAO,QAAQ;AAAA;AAE9B,SAAO,MAAM,OAAO,QAAQ;AAAA;AAG9B,MAAM,qBAAqB,CAAC,OAAc,QAAoB,eAAyB;AACrF,MAAI,cAAc,WAAW,aAAa;AACxC,WAAO,MAAM,OAAO,QAAQ;AAAA,aACnB,cAAc,WAAW,UAAU;AAC5C,WAAO,MAAM,OAAO,QAAQ;AAAA,aACnB,WAAW,aAAa;AACjC,WAAO,MAAM,OAAO,QAAQ;AAAA,aACnB,WAAW,UAAU;AAC9B,WAAO,MAAM,OAAO,QAAQ;AAAA;AAE9B,SAAO,MAAM,OAAO,QAAQ;AAAA;AAG9B,MAAM,YAAY,sCAAO;AAAA;AAAA,mBAEN,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA,gBACxB,CAAC,MAAM,uBAAuB,EAAE,OAAO,EAAE,QAAQ,EAAE;AAAA,sBAC7C,CAAC,MAAM,mBAAmB,EAAE,OAAO,EAAE,QAAQ,EAAE;AAAA;AAAA;AAIrE,MAAM,iCAAiC,sCAAO;AAAA;AAAA;AAI/B,sBAAsB,EAAE,MAAM,aAAa,cAAqB;AAC7E,QAAM,EAAE,WAAW;AAEnB,SACE,mDAAC,gBAAD;AAAA,IAAM,eAAc;AAAA,KAClB,mDAAC,kCAAD;AAAA,IACE,QAAQ,KAAK;AAAA,IACb;AAAA,IACA;AAAA,IACA,IAAI;AAAA,MAEN,mDAAC,WAAD;AAAA,IAAW,QAAQ,KAAK;AAAA,IAAQ;AAAA,IAAwB,IAAI;AAAA,IAAG,eAAc;AAAA,KAC3E,mDAAC,gCAAD,MACE,mDAAC,gBAAD;AAAA,IACE,SAAQ;AAAA,IACR,OACE,KAAK,WAAW,aACZ,gBACA,aACA,iBACA;AAAA,KAGL,KAAK,QAEP,MAAM,iBAAiB,KAAK,WAAW,YACtC,mDAAC,oBAAD;AAAA,IACE,MAAK;AAAA,IACL,MAAK;AAAA,IACL,QAAM;AAAA,IACN,UAAQ;AAAA,IACR,WAAW,EAAE,OAAO,OAAO,QAAQ;AAAA,KACnC,GAAG,KAAK,gBAAgB,YAG7B,KAAK,cAAc,KAAK,WAAW,YAClC,mDAAC,eAAD;AAAA,IAAK,UAAS;AAAA,IAAW,IAAI;AAAA,KAC1B,KAAK,WAAW,KAAK,WAAW;AAAA;",
-  "names": []
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAGlB,+BAAiC;AAGjC,IAAAA,YAA0B;AAC1B,IAAAA,YAAqB;AACrB,iBAAgB;AAEhB,+BAA8B;AAQ9B,MAAM,yBAAyB,CAAC,OAAc,QAAoB,eAAyB;AACzF,MAAI,cAAc,WAAW,aAAa;AACxC,WAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B,WAAW,WAAW,aAAa;AACjC,WAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B,WAAW,WAAW,UAAU;AAC9B,WAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B;AACA,SAAO,MAAM,OAAO,QAAQ;AAC9B;AAEA,MAAM,qBAAqB,CAAC,OAAc,QAAoB,eAAyB;AACrF,MAAI,cAAc,WAAW,aAAa;AACxC,WAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B,WAAW,cAAc,WAAW,UAAU;AAC5C,WAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B,WAAW,WAAW,aAAa;AACjC,WAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B,WAAW,WAAW,UAAU;AAC9B,WAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B;AACA,SAAO,MAAM,OAAO,QAAQ;AAC9B;AAEA,MAAM,gBAAY,yBAAAC,SAAO,cAAI;AAAA;AAAA,mBAEV,CAAC,MAAM,EAAE,MAAM,MAAM,CAAC;AAAA,gBACzB,CAAC,MAAM,uBAAuB,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU;AAAA,sBACvD,CAAC,MAAM,mBAAmB,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU;AAAA;AAAA;AAI/E,MAAM,qCAAiC,yBAAAA,SAAO,cAAI;AAAA;AAAA;AAInC,SAAR,aAA8B,EAAE,MAAM,aAAa,WAAW,GAAU;AAC7E,QAAM,EAAE,OAAO,QAAI,mCAAS;AAE5B,SACE,6BAAAC,QAAA,cAAC,kBAAK,eAAc,SAClB,6BAAAA,QAAA;AAAA,IAAC,yBAAAC;AAAA,IAAA;AAAA,MACC,QAAQ,KAAK;AAAA,MACb;AAAA,MACA;AAAA,MACA,IAAI;AAAA;AAAA,EACN,GACA,6BAAAD,QAAA,cAAC,aAAU,QAAQ,KAAK,QAAQ,YAAwB,IAAI,GAAG,eAAc,YAC3E,6BAAAA,QAAA,cAAC,sCACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,OACE,KAAK,WAAW,aACZ,gBACA,aACA,iBACA;AAAA;AAAA,IAGL,KAAK;AAAA,EACR,IACC,6BAAM,kBAAiB,KAAK,WAAW,YACtC,6BAAAA,QAAA;AAAA,IAAC,WAAAE;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,MAAK;AAAA,MACL,QAAM;AAAA,MACN,UAAQ;AAAA,MACR,WAAW,EAAE,OAAO,OAAO,QAAQ,KAAK;AAAA;AAAA,IACxC,GAAG,KAAK,gBAAgB;AAAA,EAAS,CAEvC,GACC,KAAK,cAAc,KAAK,WAAW,YAClC,6BAAAF,QAAA,cAAC,iBAAI,UAAS,YAAW,IAAI,KAC1B,KAAK,WAAW,KAAK,WAAW,QAAQ,CAC3C,CAEJ,CACF;AAEJ;",
+  "names": ["import__", "styled", "React", "TimelineIndicator", "Tag"]
 }

package/lib/cjs/components/layout/List/VerticalTimeline/VerticalTimeline.stories.js

@@ -1,34 +1,41 @@
+"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 VerticalTimeline_stories_exports = {};
+__export(VerticalTimeline_stories_exports, {
   Default: () => Default,
   default: () => VerticalTimeline_stories_default
 });
-var import_react = __toModule(require("react"));
-var import_Flex = __toModule(require("../../Flex"));
-var import_Text = __toModule(require("../../../asorted/Text"));
-var import__ = __toModule(require("."));
+module.exports = __toCommonJS(VerticalTimeline_stories_exports);
+var import_react = __toESM(require("react"));
+var import_Flex = __toESM(require("../../Flex"));
+var import_Text = __toESM(require("../../../asorted/Text"));
+var import__ = __toESM(require("."));
 const description = `
 ### A Vertical Timeline
 
@@ -128,11 +135,7 @@ const Template = () => {
       setItems(newItems);
     }, 1e3);
   }, [items, currentIndex]);
-  return /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
-    width: 300
-  }, /* @__PURE__ */ import_react.default.createElement(import__.default, {
-    steps: items
-  }));
+  return /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { width: 300 }, /* @__PURE__ */ import_react.default.createElement(import__.default, { steps: items }));
 };
 const Default = Template.bind({});
 //# sourceMappingURL=VerticalTimeline.stories.js.map

package/lib/cjs/components/layout/List/VerticalTimeline/VerticalTimeline.stories.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../src/components/layout/List/VerticalTimeline/VerticalTimeline.stories.tsx"],
   "sourcesContent": ["import React, { useEffect, useState } from \"react\";\nimport Flex from \"../../Flex\";\nimport Text from \"../../../asorted/Text\";\nimport VerticalTimeline from \".\";\n\nconst description = `\n### A Vertical Timeline\n\nThis components accepts an Array of object like this:\n## Usage\n\n\\`\\`\\`js\n\nconst steps = [\n    {\n      /**\n       * status is an ItemStatus which can be inactive, active or completed\n       */\n      status: ItemStatus;\n      /**\n       * title is the title of the step\n       */\n      title: string;\n      /**\n       * renderBody is an optional prop which is a ReactNode to be rendered next to the title\n       */\n      renderBody?: (isDisplayed?: boolean) => ReactNode;\n      /**\n       * estimatedTime is an optional prop that take the estimated time to complete the time in second and display it in a tag in minute\n       */\n       estimatedTime?: number;\n    },\n    {  \n      status: ItemStatus;\n      title: string;\n      renderBody?: (isDisplayed?: boolean) => ReactNode;\n      estimatedTime?: number;\n    }\n  ];\n\n<VerticalTimeline steps={steps as any} />\n\\`\\`\\`\n`;\n\nexport default {\n  title: \"Layout/List/VerticalTimeline\",\n  argTypes: {\n    steps: {\n      control: \"disabled\",\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        component: description,\n      },\n    },\n  },\n};\n\nconst Template = () => {\n  const defaultItems = [\n    {\n      status: \"active\",\n      title: \"Nano paired\",\n    },\n    {\n      status: \"inactive\",\n      title: \"Set your PIN\",\n      renderBody: () => (\n        <Text>\n          {`Your PIN can be 4 to 8 digits long. Anyone with access to your Nano and to your PIN can also access all your crypto and NFT assets.`}\n        </Text>\n      ),\n      estimatedTime: 120,\n    },\n    {\n      status: \"inactive\",\n      title: \"Recovery phrase\",\n      renderBody: () => (\n        <Text>\n          {`Your recovery phrase is a secret list of 24 words that backs up your private keys. Your Nano generates a unique recovery phrase. Ledger does not keep a copy of it.`}\n        </Text>\n      ),\n      estimatedTime: 300,\n    },\n    {\n      status: \"inactive\",\n      title: \"Software check\",\n      renderBody: () => (\n        <Text>{`We'll verify whether your Nano is genuine. This should be quick and easy!`}</Text>\n      ),\n    },\n    {\n      status: \"inactive\",\n      title: \"Nano is ready\",\n    },\n  ];\n\n  const [items, setItems] = useState(defaultItems);\n  const [currentIndex, setCurrentIndex] = useState(0);\n\n  useEffect(() => {\n    setTimeout(() => {\n      if (currentIndex === defaultItems.length) {\n        setCurrentIndex(0);\n        setItems(defaultItems);\n        return;\n      }\n      const newItems = items.concat([]);\n      newItems[currentIndex][\"status\"] = \"completed\";\n      if (currentIndex + 1 !== defaultItems.length) {\n        newItems[currentIndex + 1][\"status\"] = \"active\";\n      }\n      setCurrentIndex(currentIndex + 1);\n      setItems(newItems);\n    }, 1000);\n  }, [items, currentIndex]);\n\n  return (\n    <Flex width={300}>\n      <VerticalTimeline steps={items as any} />\n    </Flex>\n  );\n};\n\nexport const Default = Template.bind({});\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA2C;AAC3C,kBAAiB;AACjB,kBAAiB;AACjB,eAA6B;AAE7B,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuCpB,IAAO,mCAAQ;AAAA,EACb,OAAO;AAAA,EACP,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA;AAAA;AAAA,EAGb,YAAY;AAAA,IACV,MAAM;AAAA,MACJ,aAAa;AAAA,QACX,WAAW;AAAA;AAAA;AAAA;AAAA;AAMnB,MAAM,WAAW,MAAM;AACrB,QAAM,eAAe;AAAA,IACnB;AAAA,MACE,QAAQ;AAAA,MACR,OAAO;AAAA;AAAA,IAET;AAAA,MACE,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,YAAY,MACV,mDAAC,qBAAD,MACG;AAAA,MAGL,eAAe;AAAA;AAAA,IAEjB;AAAA,MACE,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,YAAY,MACV,mDAAC,qBAAD,MACG;AAAA,MAGL,eAAe;AAAA;AAAA,IAEjB;AAAA,MACE,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,YAAY,MACV,mDAAC,qBAAD,MAAO;AAAA;AAAA,IAGX;AAAA,MACE,QAAQ;AAAA,MACR,OAAO;AAAA;AAAA;AAIX,QAAM,CAAC,OAAO,YAAY,2BAAS;AACnC,QAAM,CAAC,cAAc,mBAAmB,2BAAS;AAEjD,8BAAU,MAAM;AACd,eAAW,MAAM;AACf,UAAI,iBAAiB,aAAa,QAAQ;AACxC,wBAAgB;AAChB,iBAAS;AACT;AAAA;AAEF,YAAM,WAAW,MAAM,OAAO;AAC9B,eAAS,cAAc,YAAY;AACnC,UAAI,eAAe,MAAM,aAAa,QAAQ;AAC5C,iBAAS,eAAe,GAAG,YAAY;AAAA;AAEzC,sBAAgB,eAAe;AAC/B,eAAS;AAAA,OACR;AAAA,KACF,CAAC,OAAO;AAEX,SACE,mDAAC,qBAAD;AAAA,IAAM,OAAO;AAAA,KACX,mDAAC,kBAAD;AAAA,IAAkB,OAAO;AAAA;AAAA;AAKxB,MAAM,UAAU,SAAS,KAAK;",
-  "names": []
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA2C;AAC3C,kBAAiB;AACjB,kBAAiB;AACjB,eAA6B;AAE7B,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuCpB,IAAO,mCAAQ;AAAA,EACb,OAAO;AAAA,EACP,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,MAAM;AAAA,MACJ,aAAa;AAAA,QACX,WAAW;AAAA,MACb;AAAA,IACF;AAAA,EACF;AACF;AAEA,MAAM,WAAW,MAAM;AACrB,QAAM,eAAe;AAAA,IACnB;AAAA,MACE,QAAQ;AAAA,MACR,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,YAAY,MACV,6BAAAA,QAAA,cAAC,YAAAC,SAAA,MACE,qIACH;AAAA,MAEF,eAAe;AAAA,IACjB;AAAA,IACA;AAAA,MACE,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,YAAY,MACV,6BAAAD,QAAA,cAAC,YAAAC,SAAA,MACE,qKACH;AAAA,MAEF,eAAe;AAAA,IACjB;AAAA,IACA;AAAA,MACE,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,YAAY,MACV,6BAAAD,QAAA,cAAC,YAAAC,SAAA,MAAM,2EAA4E;AAAA,IAEvF;AAAA,IACA;AAAA,MACE,QAAQ;AAAA,MACR,OAAO;AAAA,IACT;AAAA,EACF;AAEA,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,YAAY;AAC/C,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAS,CAAC;AAElD,8BAAU,MAAM;AACd,eAAW,MAAM;AACf,UAAI,iBAAiB,aAAa,QAAQ;AACxC,wBAAgB,CAAC;AACjB,iBAAS,YAAY;AACrB;AAAA,MACF;AACA,YAAM,WAAW,MAAM,OAAO,CAAC,CAAC;AAChC,eAAS,YAAY,EAAE,QAAQ,IAAI;AACnC,UAAI,eAAe,MAAM,aAAa,QAAQ;AAC5C,iBAAS,eAAe,CAAC,EAAE,QAAQ,IAAI;AAAA,MACzC;AACA,sBAAgB,eAAe,CAAC;AAChC,eAAS,QAAQ;AAAA,IACnB,GAAG,GAAI;AAAA,EACT,GAAG,CAAC,OAAO,YAAY,CAAC;AAExB,SACE,6BAAAD,QAAA,cAAC,YAAAE,SAAA,EAAK,OAAO,OACX,6BAAAF,QAAA,cAAC,SAAAG,SAAA,EAAiB,OAAO,OAAc,CACzC;AAEJ;AAEO,MAAM,UAAU,SAAS,KAAK,CAAC,CAAC;",
+  "names": ["React", "Text", "Flex", "VerticalTimeline"]
 }

package/lib/cjs/components/layout/List/VerticalTimeline/index.js

@@ -1,41 +1,48 @@
+"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 VerticalTimeline_exports = {};
+__export(VerticalTimeline_exports, {
   default: () => VerticalTimeline
 });
-var import_react = __toModule(require("react"));
-var import_TimelineItem = __toModule(require("./TimelineItem"));
-var import__ = __toModule(require("../.."));
+module.exports = __toCommonJS(VerticalTimeline_exports);
+var import_react = __toESM(require("react"));
+var import_TimelineItem = __toESM(require("./TimelineItem"));
+var import__ = require("../..");
 function VerticalTimeline({ steps, ...props }) {
-  return /* @__PURE__ */ import_react.default.createElement(import__.Flex, {
-    ...props,
-    flexDirection: "column"
-  }, steps?.map((step, index) => /* @__PURE__ */ import_react.default.createElement(import_TimelineItem.default, {
-    key: step.title,
-    item: step,
-    isFirstItem: index === 0,
-    isLastItem: index === steps.length - 1
-  })));
+  return /* @__PURE__ */ import_react.default.createElement(import__.Flex, { ...props, flexDirection: "column" }, steps == null ? void 0 : steps.map((step, index) => /* @__PURE__ */ import_react.default.createElement(
+    import_TimelineItem.default,
+    {
+      key: step.title,
+      item: step,
+      isFirstItem: index === 0,
+      isLastItem: index === steps.length - 1
+    }
+  )));
 }
 //# sourceMappingURL=index.js.map

package/lib/cjs/components/layout/List/VerticalTimeline/index.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../src/components/layout/List/VerticalTimeline/index.tsx"],
   "sourcesContent": ["import React, { ReactNode } from \"react\";\n\nimport TimelineItem from \"./TimelineItem\";\nimport { Flex } from \"../..\";\nimport { BaseStyledProps } from \"src/components/styled\";\n\nexport type ItemStatus = \"inactive\" | \"active\" | \"completed\";\n\nexport type Item = {\n  status: ItemStatus;\n  title: string;\n  renderBody?: (isDisplayed?: boolean) => ReactNode;\n  estimatedTime?: number;\n};\n\nexport type Props = BaseStyledProps & {\n  steps?: Item[];\n};\n\nexport default function VerticalTimeline({ steps, ...props }: Props) {\n  return (\n    <Flex {...props} flexDirection=\"column\">\n      {steps?.map((step, index) => (\n        <TimelineItem\n          key={step.title}\n          item={step}\n          isFirstItem={index === 0}\n          isLastItem={index === steps.length - 1}\n        />\n      ))}\n    </Flex>\n  );\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAiC;AAEjC,0BAAyB;AACzB,eAAqB;AAgBN,0BAA0B,EAAE,UAAU,SAAgB;AACnE,SACE,mDAAC,eAAD;AAAA,OAAU;AAAA,IAAO,eAAc;AAAA,KAC5B,OAAO,IAAI,CAAC,MAAM,UACjB,mDAAC,6BAAD;AAAA,IACE,KAAK,KAAK;AAAA,IACV,MAAM;AAAA,IACN,aAAa,UAAU;AAAA,IACvB,YAAY,UAAU,MAAM,SAAS;AAAA;AAAA;",
-  "names": []
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAiC;AAEjC,0BAAyB;AACzB,eAAqB;AAgBN,SAAR,iBAAkC,EAAE,OAAO,GAAG,MAAM,GAAU;AACnE,SACE,6BAAAA,QAAA,cAAC,iBAAM,GAAG,OAAO,eAAc,YAC5B,+BAAO,IAAI,CAAC,MAAM,UACjB,6BAAAA,QAAA;AAAA,IAAC,oBAAAC;AAAA,IAAA;AAAA,MACC,KAAK,KAAK;AAAA,MACV,MAAM;AAAA,MACN,aAAa,UAAU;AAAA,MACvB,YAAY,UAAU,MAAM,SAAS;AAAA;AAAA,EACvC,EAEJ;AAEJ;",
+  "names": ["React", "TimelineItem"]
 }

package/lib/cjs/components/layout/Popin/Popin.stories.js

@@ -1,37 +1,44 @@
+"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 Popin_stories_exports = {};
+__export(Popin_stories_exports, {
   Default: () => Default,
   default: () => Popin_stories_default
 });
-var import_react = __toModule(require("react"));
-var import_client_api = __toModule(require("@storybook/client-api"));
-var import_addon_actions = __toModule(require("@storybook/addon-actions"));
-var import_index = __toModule(require("./index"));
-var import_Text = __toModule(require("../../asorted/Text"));
-var import_Button = __toModule(require("../../cta/Button"));
-var import_theme = __toModule(require("../../../styles/theme"));
+module.exports = __toCommonJS(Popin_stories_exports);
+var import_react = __toESM(require("react"));
+var import_client_api = require("@storybook/client-api");
+var import_addon_actions = require("@storybook/addon-actions");
+var import_index = __toESM(require("./index"));
+var import_Text = __toESM(require("../../asorted/Text"));
+var import_Button = __toESM(require("../../cta/Button"));
+var import_theme = __toESM(require("../../../styles/theme"));
 const description = `
 ### This is a customizable pop-in component.
 
@@ -78,6 +85,7 @@ var Popin_stories_default = {
     }
   },
   argTypes: {
+    /** PROPS **/
     width: {
       type: "number",
       description: "Optional popin's width",
@@ -127,6 +135,7 @@ var Popin_stories_default = {
       description: "Unmount the component when the user click on the cross icon. This props controls if the cross icon should be rendered inside the header component.",
       control: false
     },
+    /** playground **/
     hasHeader: {
       type: "boolean",
       value: true,
@@ -182,24 +191,14 @@ var Popin_stories_default = {
 const Template = (args) => {
   const [, updateArgs] = (0, import_client_api.useArgs)();
   const onClose = () => updateArgs({ isOpen: false });
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_Button.default, {
-    variant: "shade",
-    onClick: () => updateArgs({ isOpen: true })
-  }, "Open the modal"), /* @__PURE__ */ import_react.default.createElement(import_index.default, {
-    ...args
-  }, args.hasHeader ? /* @__PURE__ */ import_react.default.createElement(import_index.default.Header, {
-    onBack: args.isBackDisplayed ? (0, import_addon_actions.action)("previous") : void 0,
-    onClose: args.isCloseDisplayed ? onClose : void 0
-  }, /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
-    variant: "h5"
-  }, args["Header.Children.Text"])) : null, /* @__PURE__ */ import_react.default.createElement(import_index.default.Body, null, /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
-    variant: "paragraph"
-  }, args["Body.Children.Text"])), args.hasFooter ? /* @__PURE__ */ import_react.default.createElement(import_index.default.Footer, {
-    flexDirection: "row-reverse"
-  }, /* @__PURE__ */ import_react.default.createElement(import_Button.default, {
-    variant: "main",
-    onClick: (0, import_addon_actions.action)("next")
-  }, "Next")) : null));
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_Button.default, { variant: "shade", onClick: () => updateArgs({ isOpen: true }) }, "Open the modal"), /* @__PURE__ */ import_react.default.createElement(import_index.default, { ...args }, args.hasHeader ? /* @__PURE__ */ import_react.default.createElement(
+    import_index.default.Header,
+    {
+      onBack: args.isBackDisplayed ? (0, import_addon_actions.action)("previous") : void 0,
+      onClose: args.isCloseDisplayed ? onClose : void 0
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "h5" }, args["Header.Children.Text"])
+  ) : null, /* @__PURE__ */ import_react.default.createElement(import_index.default.Body, null, /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "paragraph" }, args["Body.Children.Text"])), args.hasFooter ? /* @__PURE__ */ import_react.default.createElement(import_index.default.Footer, { flexDirection: "row-reverse" }, /* @__PURE__ */ import_react.default.createElement(import_Button.default, { variant: "main", onClick: (0, import_addon_actions.action)("next") }, "Next")) : null));
 };
 const Default = Template.bind({});
 //# sourceMappingURL=Popin.stories.js.map

package/lib/cjs/components/layout/Popin/Popin.stories.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../src/components/layout/Popin/Popin.stories.tsx"],
   "sourcesContent": ["import React from \"react\";\n// @ts-expect-error Typings\u2026\nimport { useArgs } from \"@storybook/client-api\";\nimport { action } from \"@storybook/addon-actions\";\n\nimport Popin, { PopinProps } from \"./index\";\nimport Text from \"../../asorted/Text\";\nimport Button from \"../../cta/Button\";\nimport theme from \"../../../styles/theme\";\n\nconst description = `\n### This is a customizable pop-in component.\n\nThe component exports by default the container that defines how the component should be animated during the mount/unmount process.<br />\nIn addition to that, 3 different sections *(header, body and footer)* of the component are already designed and attached to the Popin default component.<br />\n\n## Usage\n\n\\`\\`\\`js\n\nimport { Popin } from \"@ledgerhq/react-ui\"\n\n\\`\\`\\`\n\nFrom the default Popin component, you can access 3 different pre-styled sections *(\\`Popin.Header\\`, \\`Popin.Body\\` and \\`Popin.Footer\\`)*. \\\nAll of these components are optional.\n\n- \\`Popin.Header\\` is accepting an onClose callback. The cross icon is only rendered if the onClose callback is provided\n- \\`Popin.Body\\` is just a customizable scrollable Flex component configured to take all the available space\n- \\`Popin.Footer\\` is a customizable Flex component\n\n## Sandbox\n\nPlacement, style and content can be customized using props as demonstrated in the following example.<br />\nAdditionally, the story provide some playground options to play with the component. These options aren't \\\nprops of the component itself.\n`;\n\nconst code = `\n<Popin isOpen={isOpen}>\n  <Popin.Header onClose={onBack} onClose={onBack}><Text variant=\"h5\">A title</Text></Popin.Header>\n  <Popin.Body><Text variant=\"paragraph\">Some texts here</Text></Popin.Body>\n  <Popin.Footer>\n    <Button type=\"main\" onClick={onClick}>\n      Next\n    </Button>\n  </Popin.Footer>\n</Popin>\n`;\n\nexport default {\n  title: \"Layout/Popin\",\n  component: Popin,\n  parameters: {\n    docs: {\n      description: { component: description },\n      source: { code, type: \"code\" },\n    },\n  },\n  argTypes: {\n    /** PROPS **/\n    width: {\n      type: \"number\",\n      description: \"Optional popin's width\",\n      defaultValue: theme.sizes.drawer.popin.max.width,\n      control: {\n        type: \"number\",\n        min: theme.sizes.drawer.popin.min.width,\n        max: theme.sizes.drawer.popin.max.width,\n      },\n      table: {\n        type: {\n          summary: \"Accepted range\",\n          detail: `Value lower than ${theme.sizes.drawer.popin.min.width}px or greather than ${theme.sizes.drawer.popin.max.width}px will have no effect because of min/max css rules.`,\n        },\n        defaultValue: {\n          summary: theme.sizes.drawer.popin.min.width,\n        },\n      },\n    },\n    height: {\n      type: \"number\",\n      description: \"Optional popin's height\",\n      defaultValue: theme.sizes.drawer.popin.max.width,\n      control: {\n        type: \"number\",\n        min: theme.sizes.drawer.popin.min.height,\n        max: theme.sizes.drawer.popin.max.height,\n      },\n      table: {\n        type: {\n          summary: \"Accepted range\",\n          detail: `Value lower than ${theme.sizes.drawer.popin.min.height}px or greather than ${theme.sizes.drawer.popin.max.height}px will have no effect because of min/max css rules.`,\n        },\n        defaultValue: {\n          summary: theme.sizes.drawer.popin.min.height,\n        },\n      },\n    },\n    isOpen: {\n      type: \"boolean\",\n      defaultValue: true,\n      description: \"Controls if the popin is mounted or not.\",\n      required: true,\n      control: { type: \"boolean\" },\n    },\n    onClose: {\n      description:\n        \"Unmount the component when the user click on the cross icon. This props controls if the cross icon should be rendered inside the header component.\",\n      control: false,\n    },\n\n    /** playground **/\n    hasHeader: {\n      type: \"boolean\",\n      value: true,\n      description: \"Controls if the header should be displayed.\",\n      required: true,\n      defaultValue: true,\n      control: { type: \"boolean\" },\n      table: { category: \"playground\" },\n    },\n    hasFooter: {\n      type: \"boolean\",\n      value: true,\n      description: \"Controls if the footer should be displayed.\",\n      required: true,\n      defaultValue: true,\n      control: { type: \"boolean\" },\n      table: { category: \"playground\" },\n    },\n    isCloseDisplayed: {\n      type: \"boolean\",\n      defaultValue: true,\n      description: \"Controls if the close button should be rendered.\",\n      required: true,\n      control: { type: \"boolean\" },\n      table: { category: \"playground\" },\n    },\n    isBackDisplayed: {\n      type: \"boolean\",\n      defaultValue: true,\n      description: \"Controls if the back button should be rendered.\",\n      required: true,\n      control: { type: \"boolean\" },\n      table: { category: \"playground\" },\n    },\n    \"Header.Children.Text\": {\n      type: \"text\",\n      description:\n        \"Any valid text. This parameter is passed to a Text component as children. The Text component is the children of the Header component.\",\n      required: true,\n      defaultValue: \"This is a fake title\",\n      control: { type: \"text\" },\n      table: { category: \"playground\" },\n    },\n    \"Body.Children.Text\": {\n      type: \"text\",\n      description:\n        \"Any valid text. This parameter is passed to a Text component as children. The Text component is the children of the Body component.\",\n      required: true,\n      defaultValue: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor.`,\n      control: { type: \"text\" },\n      table: { category: \"playground\" },\n    },\n  },\n};\n\ntype playgroundProps = {\n  \"Header.Children.Text\": string;\n  \"Body.Children.Text\": string;\n  hasHeader: boolean;\n  hasFooter: boolean;\n  isCloseDisplayed: boolean;\n  isBackDisplayed: boolean;\n};\n\nconst Template = (args: PopinProps & playgroundProps) => {\n  const [, updateArgs] = useArgs();\n\n  /* Allow interactive controls from the story. Thanks to this, triggering onClose\n   ** function from the component itself (by clicking on the cross icon e.g.)\n   ** will update the value of the isOpen props.\n   */\n  const onClose = () => updateArgs({ isOpen: false });\n\n  return (\n    <>\n      <Button variant=\"shade\" onClick={() => updateArgs({ isOpen: true })}>\n        Open the modal\n      </Button>\n      <Popin {...args}>\n        {args.hasHeader ? (\n          <Popin.Header\n            onBack={args.isBackDisplayed ? action(\"previous\") : undefined}\n            onClose={args.isCloseDisplayed ? onClose : undefined}\n          >\n            <Text variant=\"h5\">{args[\"Header.Children.Text\"]}</Text>\n          </Popin.Header>\n        ) : null}\n        <Popin.Body>\n          <Text variant=\"paragraph\">{args[\"Body.Children.Text\"]}</Text>\n        </Popin.Body>\n        {args.hasFooter ? (\n          <Popin.Footer flexDirection=\"row-reverse\">\n            <Button variant=\"main\" onClick={action(\"next\")}>\n              Next\n            </Button>\n          </Popin.Footer>\n        ) : null}\n      </Popin>\n    </>\n  );\n};\n\nexport const Default = Template.bind({});\n"],
-  "mappings": "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",
-  "names": []
+  "mappings": "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",
+  "names": ["Popin", "theme", "React", "Button", "Text"]
 }