@ledgerhq/react-ui 0.13.0 → 0.14.0-next.0

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

@@ -34,7 +34,10 @@ __export(VerticalTimeline_stories_exports, {
 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_form = require("../../../form");
+var import_asorted = require("../../../asorted");
+var import_Button = __toESM(require("../../../cta/Button"));
+var import_ContinueOnDevice = __toESM(require("../../../message/ContinueOnDevice"));
 var import__ = __toESM(require("."));
 const description = `
 ### A Vertical Timeline
@@ -89,53 +92,103 @@ var VerticalTimeline_stories_default = {
     }
   }
 };
+const { BodyText, SubtitleText } = import__.default;
+const defaultItems = [
+  {
+    status: "active",
+    title: "step's {title} prop",
+    renderBody: () => /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { flexDirection: "column", flex: 1, border: "1px solid", borderColor: "neutral.c100", p: 3 }, /* @__PURE__ */ import_react.default.createElement(BodyText, null, `This box is the React node returned by the step's {renderBody} prop`), /* @__PURE__ */ import_react.default.createElement(import_asorted.Divider, { my: 6, text: "`Divider` component" }), /* @__PURE__ */ import_react.default.createElement(SubtitleText, null, "This subtitle text component is `VerticalTimeline.SubtitleText`"), /* @__PURE__ */ import_react.default.createElement(BodyText, null, "This body text component is `VerticalTimeline.BodyText`"), /* @__PURE__ */ import_react.default.createElement(
+      import_ContinueOnDevice.default,
+      {
+        Icon: ({ size }) => /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { height: size, width: size, borderRadius: size, bg: "neutral.c40" }),
+        text: "This component is `ContinueOnDevice`."
+      }
+    ))
+  },
+  {
+    status: "inactive",
+    title: "Set your PIN",
+    estimatedTime: 120,
+    renderBody: () => /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { flexDirection: "column" }, /* @__PURE__ */ import_react.default.createElement(BodyText, null, `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.`), /* @__PURE__ */ import_react.default.createElement(
+      import_ContinueOnDevice.default,
+      {
+        Icon: ({ size }) => /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { height: size, width: size, borderRadius: size, bg: "neutral.c40" }),
+        text: "Set PIN on your Ledger Stax."
+      }
+    ))
+  },
+  {
+    status: "inactive",
+    title: "Recovery phrase",
+    estimatedTime: 300,
+    renderBody: () => /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { flexDirection: "column" }, /* @__PURE__ */ import_react.default.createElement(SubtitleText, null, `Generate a new phrase`), /* @__PURE__ */ import_react.default.createElement(BodyText, null, `Your device will generate a new secret recovery phrase. For your eyes only.`), /* @__PURE__ */ import_react.default.createElement(import_asorted.Divider, { text: "OR", my: 6 }), /* @__PURE__ */ import_react.default.createElement(SubtitleText, null, `Restore using Secret Recovery Phrase`), /* @__PURE__ */ import_react.default.createElement(BodyText, null, `Make sure to use a Phrase generated by a Ledger for the guaranteed security of your assets. `))
+  },
+  {
+    status: "inactive",
+    title: "Software check",
+    renderBody: () => /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { flexDirection: "column" }, /* @__PURE__ */ import_react.default.createElement(BodyText, null, `We'll verify whether your Nano is genuine. This should be quick and easy!`))
+  },
+  {
+    status: "inactive",
+    title: "Install apps",
+    renderBody: () => /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { flexDirection: "column" }, /* @__PURE__ */ import_react.default.createElement(BodyText, null, `Installing apps`))
+  },
+  {
+    status: "inactive",
+    title: "Nano is ready",
+    renderBody: () => /* @__PURE__ */ import_react.default.createElement(BodyText, null, "Almost there ...")
+  }
+];
 const Template = () => {
-  const defaultItems = [
-    {
-      status: "active",
-      title: "Nano paired"
-    },
-    {
-      status: "inactive",
-      title: "Set your PIN",
-      renderBody: () => /* @__PURE__ */ import_react.default.createElement(import_Text.default, null, `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.`),
-      estimatedTime: 120
-    },
-    {
-      status: "inactive",
-      title: "Recovery phrase",
-      renderBody: () => /* @__PURE__ */ import_react.default.createElement(import_Text.default, null, `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.`),
-      estimatedTime: 300
-    },
+  const [autoAnimate, setAutoAnimate] = (0, import_react.useState)(false);
+  const [currentIndex, setCurrentIndex] = (0, import_react.useState)(1);
+  (0, import_react.useEffect)(() => {
+    let timeout = null;
+    if (autoAnimate) {
+      timeout = setTimeout(() => {
+        if (currentIndex === defaultItems.length) {
+          setCurrentIndex(0);
+          return;
+        }
+        setCurrentIndex(currentIndex + 1);
+      }, 1e3);
+    }
+    return () => {
+      timeout && clearTimeout(timeout);
+    };
+  }, [autoAnimate, currentIndex]);
+  const items = (0, import_react.useMemo)(
+    () => defaultItems.map((item, index) => ({
+      ...item,
+      status: index < currentIndex ? "completed" : index > currentIndex ? "inactive" : "active"
+    })),
+    [currentIndex]
+  );
+  return /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { flexDirection: "column", flex: 1, alignItems: "center" }, /* @__PURE__ */ import_react.default.createElement(
+    import_Flex.default,
     {
-      status: "inactive",
-      title: "Software check",
-      renderBody: () => /* @__PURE__ */ import_react.default.createElement(import_Text.default, null, `We'll verify whether your Nano is genuine. This should be quick and easy!`)
+      flexDirection: "column",
+      p: 6,
+      rowGap: 3,
+      alignSelf: "stretch",
+      alignItems: "flex-start",
+      flex: 1,
+      borderColor: "neutral.c100",
+      border: "1px solid"
     },
-    {
-      status: "inactive",
-      title: "Nano is ready"
-    }
-  ];
-  const [items, setItems] = (0, import_react.useState)(defaultItems);
-  const [currentIndex, setCurrentIndex] = (0, import_react.useState)(0);
-  (0, import_react.useEffect)(() => {
-    setTimeout(() => {
-      if (currentIndex === defaultItems.length) {
-        setCurrentIndex(0);
-        setItems(defaultItems);
-        return;
-      }
-      const newItems = items.concat([]);
-      newItems[currentIndex]["status"] = "completed";
-      if (currentIndex + 1 !== defaultItems.length) {
-        newItems[currentIndex + 1]["status"] = "active";
+    /* @__PURE__ */ import_react.default.createElement(import_asorted.Text, { variant: "h5Inter" }, "Controls:"),
+    /* @__PURE__ */ import_react.default.createElement(
+      import_form.Switch,
+      {
+        name: "Auto animate",
+        label: "Auto animate steps",
+        checked: autoAnimate,
+        onChange: () => setAutoAnimate(!autoAnimate)
       }
-      setCurrentIndex(currentIndex + 1);
-      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 }));
+    ),
+    /* @__PURE__ */ import_react.default.createElement(import_Button.default, { my: 3, variant: "main", outline: true, onClick: () => setCurrentIndex(items.length) }, "Set last step complete"),
+    /* @__PURE__ */ import_react.default.createElement(import_asorted.Text, { variant: "body" }, "Click on a step to make it the active one (this is only for the storybook, not a native feature of this component, although you can implement `onClickIndex` to do that)")
+  ), /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { width: 432, mt: 10 }, /* @__PURE__ */ import_react.default.createElement(import__.default, { steps: items, onClickIndex: (index) => setCurrentIndex(index) })));
 };
 const Default = Template.bind({});
 //# sourceMappingURL=VerticalTimeline.stories.js.map

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

@@ -1,7 +1,7 @@
 {
   "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;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"]
+  "sourcesContent": ["import React, { useEffect, useMemo, useState } from \"react\";\nimport Flex from \"../../Flex\";\nimport { Switch } from \"../../../form\";\nimport { Text, Divider } from \"../../../asorted\";\nimport Button from \"../../../cta/Button\";\nimport ContinueOnDevice from \"../../../message/ContinueOnDevice\";\nimport VerticalTimeline from \".\";\nimport type { Item } from \".\";\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 { BodyText, SubtitleText } = VerticalTimeline;\n\nconst defaultItems: Item[] = [\n  {\n    status: \"active\",\n    title: \"step's {title} prop\",\n    renderBody: () => (\n      <Flex flexDirection=\"column\" flex={1} border=\"1px solid\" borderColor=\"neutral.c100\" p={3}>\n        <BodyText>{`This box is the React node returned by the step's {renderBody} prop`}</BodyText>\n        <Divider my={6} text=\"`Divider` component\" />\n        <SubtitleText>This subtitle text component is `VerticalTimeline.SubtitleText`</SubtitleText>\n        <BodyText>This body text component is `VerticalTimeline.BodyText`</BodyText>\n        <ContinueOnDevice\n          Icon={({ size }) => (\n            <Flex height={size} width={size} borderRadius={size} bg=\"neutral.c40\" />\n          )}\n          text=\"This component is `ContinueOnDevice`.\"\n        />\n      </Flex>\n    ),\n  },\n  {\n    status: \"inactive\",\n    title: \"Set your PIN\",\n    estimatedTime: 120,\n    renderBody: () => (\n      <Flex flexDirection=\"column\">\n        <BodyText>\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        </BodyText>\n        <ContinueOnDevice\n          Icon={({ size }) => (\n            <Flex height={size} width={size} borderRadius={size} bg=\"neutral.c40\" />\n          )}\n          text=\"Set PIN on your Ledger Stax.\"\n        />\n      </Flex>\n    ),\n  },\n  {\n    status: \"inactive\",\n    title: \"Recovery phrase\",\n    estimatedTime: 300,\n    renderBody: () => (\n      <Flex flexDirection=\"column\">\n        <SubtitleText>{`Generate a new phrase`}</SubtitleText>\n        <BodyText>\n          {`Your device will generate a new secret recovery phrase. For your eyes only.`}\n        </BodyText>\n        <Divider text=\"OR\" my={6} />\n        <SubtitleText>{`Restore using Secret Recovery Phrase`}</SubtitleText>\n        <BodyText>\n          {`Make sure to use a Phrase generated by a Ledger for the guaranteed security of your assets. `}\n        </BodyText>\n      </Flex>\n    ),\n  },\n  {\n    status: \"inactive\",\n    title: \"Software check\",\n    renderBody: () => (\n      <Flex flexDirection=\"column\">\n        <BodyText>{`We'll verify whether your Nano is genuine. This should be quick and easy!`}</BodyText>\n      </Flex>\n    ),\n  },\n  {\n    status: \"inactive\",\n    title: \"Install apps\",\n    renderBody: () => (\n      <Flex flexDirection=\"column\">\n        <BodyText>{`Installing apps`}</BodyText>\n      </Flex>\n    ),\n  },\n  {\n    status: \"inactive\",\n    title: \"Nano is ready\",\n    renderBody: () => <BodyText>Almost there ...</BodyText>,\n  },\n];\n\nconst Template = () => {\n  const [autoAnimate, setAutoAnimate] = useState(false);\n  const [currentIndex, setCurrentIndex] = useState(1);\n\n  useEffect(() => {\n    let timeout: ReturnType<typeof setTimeout> | null = null;\n    if (autoAnimate) {\n      timeout = setTimeout(() => {\n        if (currentIndex === defaultItems.length) {\n          setCurrentIndex(0);\n          return;\n        }\n        setCurrentIndex(currentIndex + 1);\n      }, 1000);\n    }\n    return () => {\n      timeout && clearTimeout(timeout);\n    };\n  }, [autoAnimate, currentIndex]);\n\n  const items: Item[] = useMemo(\n    () =>\n      defaultItems.map((item, index) => ({\n        ...item,\n        status: index < currentIndex ? \"completed\" : index > currentIndex ? \"inactive\" : \"active\",\n      })),\n    [currentIndex],\n  );\n\n  return (\n    <Flex flexDirection=\"column\" flex={1} alignItems=\"center\">\n      <Flex\n        flexDirection=\"column\"\n        p={6}\n        rowGap={3}\n        alignSelf=\"stretch\"\n        alignItems=\"flex-start\"\n        flex={1}\n        borderColor=\"neutral.c100\"\n        border=\"1px solid\"\n      >\n        <Text variant=\"h5Inter\">Controls:</Text>\n        <Switch\n          name=\"Auto animate\"\n          label=\"Auto animate steps\"\n          checked={autoAnimate}\n          onChange={() => setAutoAnimate(!autoAnimate)}\n        />\n        <Button my={3} variant=\"main\" outline onClick={() => setCurrentIndex(items.length)}>\n          Set last step complete\n        </Button>\n        <Text variant=\"body\">\n          Click on a step to make it the active one (this is only for the storybook, not a native\n          feature of this component, although you can implement `onClickIndex` to do that)\n        </Text>\n      </Flex>\n\n      <Flex width={432} mt={10}>\n        <VerticalTimeline steps={items} onClickIndex={(index) => setCurrentIndex(index)} />\n      </Flex>\n    </Flex>\n  );\n};\n\nexport const Default = Template.bind({});\n"],
+  "mappings": "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",
+  "names": ["VerticalTimeline", "React", "Flex", "ContinueOnDevice", "Button"]
 }

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

@@ -34,15 +34,21 @@ 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 == null ? void 0 : steps.map((step, index) => /* @__PURE__ */ import_react.default.createElement(
+var import_Text = __toESM(require("../../../asorted/Text"));
+function VerticalTimeline({ steps, onClickIndex, ...props }) {
+  return /* @__PURE__ */ import_react.default.createElement(import__.Flex, { ...props, flexDirection: "column", flex: 1 }, steps == null ? void 0 : steps.map((step, index) => /* @__PURE__ */ import_react.default.createElement(
     import_TimelineItem.default,
     {
-      key: step.title,
+      key: index,
       item: step,
       isFirstItem: index === 0,
-      isLastItem: index === steps.length - 1
+      isLastItem: index === steps.length - 1,
+      onClick: onClickIndex ? () => onClickIndex(index) : void 0
     }
   )));
 }
+const SubtitleText = (props) => /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "body", fontWeight: "semiBold", color: "neutral.c100", mb: 3, ...props });
+const BodyText = (props) => /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "bodyLineHeight", fontWeight: "medium", color: "neutral.c80", ...props });
+VerticalTimeline.BodyText = BodyText;
+VerticalTimeline.SubtitleText = SubtitleText;
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "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;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"]
+  "sourcesContent": ["import React, { ReactNode } from \"react\";\n\nimport TimelineItem from \"./TimelineItem\";\nimport { Flex } from \"../..\";\nimport Text, { TextProps } from \"../../../asorted/Text\";\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  onClickIndex?: (index: number) => void;\n};\n\nexport default function VerticalTimeline({ steps, onClickIndex, ...props }: Props) {\n  return (\n    <Flex {...props} flexDirection=\"column\" flex={1}>\n      {steps?.map((step, index) => (\n        <TimelineItem\n          key={index}\n          item={step}\n          isFirstItem={index === 0}\n          isLastItem={index === steps.length - 1}\n          onClick={onClickIndex ? () => onClickIndex(index) : undefined}\n        />\n      ))}\n    </Flex>\n  );\n}\n\nconst SubtitleText: React.FC<TextProps> = (props) => (\n  <Text variant=\"body\" fontWeight=\"semiBold\" color=\"neutral.c100\" mb={3} {...props} />\n);\n\nconst BodyText: React.FC<TextProps> = (props) => (\n  <Text variant=\"bodyLineHeight\" fontWeight=\"medium\" color=\"neutral.c80\" {...props} />\n);\n\nVerticalTimeline.BodyText = BodyText;\nVerticalTimeline.SubtitleText = SubtitleText;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAiC;AAEjC,0BAAyB;AACzB,eAAqB;AACrB,kBAAgC;AAiBjB,SAAR,iBAAkC,EAAE,OAAO,cAAc,GAAG,MAAM,GAAU;AACjF,SACE,6BAAAA,QAAA,cAAC,iBAAM,GAAG,OAAO,eAAc,UAAS,MAAM,KAC3C,+BAAO,IAAI,CAAC,MAAM,UACjB,6BAAAA,QAAA;AAAA,IAAC,oBAAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,MAAM;AAAA,MACN,aAAa,UAAU;AAAA,MACvB,YAAY,UAAU,MAAM,SAAS;AAAA,MACrC,SAAS,eAAe,MAAM,aAAa,KAAK,IAAI;AAAA;AAAA,EACtD,EAEJ;AAEJ;AAEA,MAAM,eAAoC,CAAC,UACzC,6BAAAD,QAAA,cAAC,YAAAE,SAAA,EAAK,SAAQ,QAAO,YAAW,YAAW,OAAM,gBAAe,IAAI,GAAI,GAAG,OAAO;AAGpF,MAAM,WAAgC,CAAC,UACrC,6BAAAF,QAAA,cAAC,YAAAE,SAAA,EAAK,SAAQ,kBAAiB,YAAW,UAAS,OAAM,eAAe,GAAG,OAAO;AAGpF,iBAAiB,WAAW;AAC5B,iBAAiB,eAAe;",
+  "names": ["React", "TimelineItem", "Text"]
 }

package/lib/cjs/components/loaders/InfiniteLoader/InfiniteLoader.stories.js

@@ -51,7 +51,7 @@ import { InfiniteLoader } from "@ledgerhq/react-ui"
   Both color and size are optional.
   Extra props are passed to the child <svg> tag.
 */
-<InfiniteLoader size={40} color="warning.c50" />
+<InfiniteLoader size={40} color="warning.c20" />
 \`\`\`
 `;
 var InfiniteLoader_stories_default = {

package/lib/cjs/components/loaders/InfiniteLoader/InfiniteLoader.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/loaders/InfiniteLoader/InfiniteLoader.stories.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport InfiniteLoader, { Props } from \"./index\";\n\nconst description = `\n### Spinner Component\n\nA simple spinner component with customizable size and color \uD83C\uDFA1.\n\n## Usage\n\n\\`\\`\\`js\n\nimport { InfiniteLoader } from \"@ledgerhq/react-ui\"\n\\`\\`\\`\n\n\\`\\`\\`js\n/*\n  Both color and size are optional.\n  Extra props are passed to the child <svg> tag.\n*/\n<InfiniteLoader size={40} color=\"warning.c50\" />\n\\`\\`\\`\n`;\n\nexport default {\n  title: \"Loaders/InfiniteLoader\",\n  component: InfiniteLoader,\n  parameters: {\n    docs: {\n      description: {\n        component: description,\n      },\n    },\n  },\n  argTypes: {\n    size: {\n      type: \"number\",\n    },\n    color: {\n      control: {\n        type: \"color\",\n        presetColors: [\"coral\", \"tomato\", \"orange\", \"blue\", \"purple\"],\n      },\n    },\n    theme: {\n      table: { disable: true },\n    },\n    as: {\n      table: { disable: true },\n    },\n    forwardedAs: {\n      table: { disable: true },\n    },\n  },\n};\n\nexport const Default = (args: Props): JSX.Element => {\n  return <InfiniteLoader {...args} />;\n};\n"],
+  "sourcesContent": ["import React from \"react\";\nimport InfiniteLoader, { Props } from \"./index\";\n\nconst description = `\n### Spinner Component\n\nA simple spinner component with customizable size and color \uD83C\uDFA1.\n\n## Usage\n\n\\`\\`\\`js\n\nimport { InfiniteLoader } from \"@ledgerhq/react-ui\"\n\\`\\`\\`\n\n\\`\\`\\`js\n/*\n  Both color and size are optional.\n  Extra props are passed to the child <svg> tag.\n*/\n<InfiniteLoader size={40} color=\"warning.c20\" />\n\\`\\`\\`\n`;\n\nexport default {\n  title: \"Loaders/InfiniteLoader\",\n  component: InfiniteLoader,\n  parameters: {\n    docs: {\n      description: {\n        component: description,\n      },\n    },\n  },\n  argTypes: {\n    size: {\n      type: \"number\",\n    },\n    color: {\n      control: {\n        type: \"color\",\n        presetColors: [\"coral\", \"tomato\", \"orange\", \"blue\", \"purple\"],\n      },\n    },\n    theme: {\n      table: { disable: true },\n    },\n    as: {\n      table: { disable: true },\n    },\n    forwardedAs: {\n      table: { disable: true },\n    },\n  },\n};\n\nexport const Default = (args: Props): JSX.Element => {\n  return <InfiniteLoader {...args} />;\n};\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,mBAAsC;AAEtC,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBpB,IAAO,iCAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,YAAY;AAAA,IACV,MAAM;AAAA,MACJ,aAAa;AAAA,QACX,WAAW;AAAA,MACb;AAAA,IACF;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,MAAM;AAAA,IACR;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,QACP,MAAM;AAAA,QACN,cAAc,CAAC,SAAS,UAAU,UAAU,QAAQ,QAAQ;AAAA,MAC9D;AAAA,IACF;AAAA,IACA,OAAO;AAAA,MACL,OAAO,EAAE,SAAS,KAAK;AAAA,IACzB;AAAA,IACA,IAAI;AAAA,MACF,OAAO,EAAE,SAAS,KAAK;AAAA,IACzB;AAAA,IACA,aAAa;AAAA,MACX,OAAO,EAAE,SAAS,KAAK;AAAA,IACzB;AAAA,EACF;AACF;AAEO,MAAM,UAAU,CAAC,SAA6B;AACnD,SAAO,6BAAAC,QAAA,cAAC,aAAAD,SAAA,EAAgB,GAAG,MAAM;AACnC;",
   "names": ["InfiniteLoader", "React"]
 }

package/lib/cjs/components/message/Alert/Alert.stories.js

@@ -36,7 +36,6 @@ module.exports = __toCommonJS(Alert_stories_exports);
 var import_react = __toESM(require("react"));
 var import_index = __toESM(require("./index"));
 var import_Link = __toESM(require("../../cta/Link"));
-var import_Text = __toESM(require("../../asorted/Text"));
 var import_Button = __toESM(require("../../cta/Button"));
 var import_assets = require("../../../../src/assets");
 var Alert_stories_default = {
@@ -44,7 +43,7 @@ var Alert_stories_default = {
   component: import_index.default,
   argTypes: {
     type: {
-      options: ["info", "warning", "error"],
+      options: ["info", "secondary", "success", "warning", "error"],
       control: {
         type: "radio"
       }
@@ -72,16 +71,15 @@ const WithContent = (args) => {
     {
       ...args,
       containerProps: { pr: 7 },
-      renderContent: ({ color, textProps }) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_Text.default, { color: "inherit", ...textProps }, "Your xpub is privacy-sensitive data. Use with caution, especially when disclosing to third parties."), /* @__PURE__ */ import_react.default.createElement(
+      renderContent: ({ textProps }) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_index.default.BodyText, null, "Your xpub is privacy-sensitive data. Use with caution, especially when disclosing to third parties."), /* @__PURE__ */ import_react.default.createElement(
         import_Link.default,
         {
-          color,
           textProps,
           alwaysUnderline: true,
           size: "small",
           Icon: import_assets.Icons.ExternalLinkMedium
         },
-        "And a learn more link"
+        /* @__PURE__ */ import_react.default.createElement(import_index.default.UnderlinedText, null, "Learn more")
       )),
       renderRight: () => /* @__PURE__ */ import_react.default.createElement(import_Button.default, { variant: "color" }, "Click me")
     }

package/lib/cjs/components/message/Alert/Alert.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/message/Alert/Alert.stories.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport Alert, { AlertProps } from \"./index\";\nimport Link from \"../../cta/Link\";\nimport Text from \"../../asorted/Text\";\nimport Button from \"../../cta/Button\";\nimport { Icons } from \"../../../../src/assets\";\n\nexport default {\n  title: \"Messages/Alerts\",\n  component: Alert,\n  argTypes: {\n    type: {\n      options: [\"info\", \"warning\", \"error\"],\n      control: {\n        type: \"radio\",\n      },\n    },\n    title: {\n      control: {\n        type: \"text\",\n      },\n      defaultValue: \"Title\",\n    },\n    showIcon: {\n      control: {\n        type: \"boolean\",\n      },\n      defaultValue: true,\n    },\n  },\n};\n\nexport const Default = (args: AlertProps): JSX.Element => {\n  return <Alert {...args} />;\n};\n\nexport const WithContent = (args: AlertProps) => {\n  return (\n    <Alert\n      {...args}\n      containerProps={{ pr: 7 }}\n      renderContent={({ color, textProps }) => (\n        <>\n          <Text color=\"inherit\" {...textProps}>\n            Your xpub is privacy-sensitive data. Use with caution, especially when disclosing to\n            third parties.\n          </Text>\n          <Link\n            color={color}\n            textProps={textProps}\n            alwaysUnderline\n            size={\"small\" as any}\n            Icon={Icons.ExternalLinkMedium}\n          >\n            And a learn more link\n          </Link>\n        </>\n      )}\n      renderRight={() => <Button variant=\"color\">Click me</Button>}\n    />\n  );\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,mBAAkC;AAClC,kBAAiB;AACjB,kBAAiB;AACjB,oBAAmB;AACnB,oBAAsB;AAEtB,IAAO,wBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,SAAS,CAAC,QAAQ,WAAW,OAAO;AAAA,MACpC,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,MACA,cAAc;AAAA,IAChB;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,MACA,cAAc;AAAA,IAChB;AAAA,EACF;AACF;AAEO,MAAM,UAAU,CAAC,SAAkC;AACxD,SAAO,6BAAAC,QAAA,cAAC,aAAAD,SAAA,EAAO,GAAG,MAAM;AAC1B;AAEO,MAAM,cAAc,CAAC,SAAqB;AAC/C,SACE,6BAAAC,QAAA;AAAA,IAAC,aAAAD;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,gBAAgB,EAAE,IAAI,EAAE;AAAA,MACxB,eAAe,CAAC,EAAE,OAAO,UAAU,MACjC,6BAAAC,QAAA,2BAAAA,QAAA,gBACE,6BAAAA,QAAA,cAAC,YAAAC,SAAA,EAAK,OAAM,WAAW,GAAG,aAAW,qGAGrC,GACA,6BAAAD,QAAA;AAAA,QAAC,YAAAE;AAAA,QAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,iBAAe;AAAA,UACf,MAAM;AAAA,UACN,MAAM,oBAAM;AAAA;AAAA,QACb;AAAA,MAED,CACF;AAAA,MAEF,aAAa,MAAM,6BAAAF,QAAA,cAAC,cAAAG,SAAA,EAAO,SAAQ,WAAQ,UAAQ;AAAA;AAAA,EACrD;AAEJ;",
-  "names": ["Alert", "React", "Text", "Link", "Button"]
+  "sourcesContent": ["import React from \"react\";\nimport Alert, { AlertProps } from \"./index\";\nimport Link from \"../../cta/Link\";\nimport Button from \"../../cta/Button\";\nimport { Icons } from \"../../../../src/assets\";\n\nexport default {\n  title: \"Messages/Alerts\",\n  component: Alert,\n  argTypes: {\n    type: {\n      options: [\"info\", \"secondary\", \"success\", \"warning\", \"error\"],\n      control: {\n        type: \"radio\",\n      },\n    },\n    title: {\n      control: {\n        type: \"text\",\n      },\n      defaultValue: \"Title\",\n    },\n    showIcon: {\n      control: {\n        type: \"boolean\",\n      },\n      defaultValue: true,\n    },\n  },\n};\n\nexport const Default = (args: AlertProps): JSX.Element => {\n  return <Alert {...args} />;\n};\n\nexport const WithContent = (args: AlertProps) => {\n  return (\n    <Alert\n      {...args}\n      containerProps={{ pr: 7 }}\n      renderContent={({ textProps }) => (\n        <>\n          <Alert.BodyText>\n            Your xpub is privacy-sensitive data. Use with caution, especially when disclosing to\n            third parties.\n          </Alert.BodyText>\n          <Link\n            textProps={textProps}\n            alwaysUnderline\n            size={\"small\" as \"small\" | \"medium\" | \"large\"}\n            Icon={Icons.ExternalLinkMedium}\n          >\n            <Alert.UnderlinedText>Learn more</Alert.UnderlinedText>\n          </Link>\n        </>\n      )}\n      renderRight={() => <Button variant=\"color\">Click me</Button>}\n    />\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,mBAAkC;AAClC,kBAAiB;AACjB,oBAAmB;AACnB,oBAAsB;AAEtB,IAAO,wBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,SAAS,CAAC,QAAQ,aAAa,WAAW,WAAW,OAAO;AAAA,MAC5D,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,MACA,cAAc;AAAA,IAChB;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,MACA,cAAc;AAAA,IAChB;AAAA,EACF;AACF;AAEO,MAAM,UAAU,CAAC,SAAkC;AACxD,SAAO,6BAAAC,QAAA,cAAC,aAAAD,SAAA,EAAO,GAAG,MAAM;AAC1B;AAEO,MAAM,cAAc,CAAC,SAAqB;AAC/C,SACE,6BAAAC,QAAA;AAAA,IAAC,aAAAD;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,gBAAgB,EAAE,IAAI,EAAE;AAAA,MACxB,eAAe,CAAC,EAAE,UAAU,MAC1B,6BAAAC,QAAA,2BAAAA,QAAA,gBACE,6BAAAA,QAAA,cAAC,aAAAD,QAAM,UAAN,MAAe,qGAGhB,GACA,6BAAAC,QAAA;AAAA,QAAC,YAAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,iBAAe;AAAA,UACf,MAAM;AAAA,UACN,MAAM,oBAAM;AAAA;AAAA,QAEZ,6BAAAD,QAAA,cAAC,aAAAD,QAAM,gBAAN,MAAqB,YAAU;AAAA,MAClC,CACF;AAAA,MAEF,aAAa,MAAM,6BAAAC,QAAA,cAAC,cAAAE,SAAA,EAAO,SAAQ,WAAQ,UAAQ;AAAA;AAAA,EACrD;AAEJ;",
+  "names": ["Alert", "React", "Link", "Button"]
 }

package/lib/cjs/components/message/Alert/index.js

@@ -28,49 +28,70 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var Alert_exports = {};
 __export(Alert_exports, {
-  default: () => Alert
+  default: () => Alert_default
 });
 module.exports = __toCommonJS(Alert_exports);
 var import_react = __toESM(require("react"));
 var import_styled_components = __toESM(require("styled-components"));
 var import_Text = __toESM(require("../../asorted/Text"));
 var import_Flex = __toESM(require("../../layout/Flex"));
-var import_ShieldSecurityMedium = __toESM(require("@ledgerhq/icons-ui/react/ShieldSecurityMedium"));
-var import_CircledCrossMedium = __toESM(require("@ledgerhq/icons-ui/react/CircledCrossMedium"));
-var import_CircledAlertMedium = __toESM(require("@ledgerhq/icons-ui/react/CircledAlertMedium"));
+var import_InfoAltFillMedium = __toESM(require("@ledgerhq/icons-ui/react/InfoAltFillMedium"));
+var import_CircledCheckSolidMedium = __toESM(require("@ledgerhq/icons-ui/react/CircledCheckSolidMedium"));
+var import_WarningSolidMedium = __toESM(require("@ledgerhq/icons-ui/react/WarningSolidMedium"));
+var import_CircledCrossSolidMedium = __toESM(require("@ledgerhq/icons-ui/react/CircledCrossSolidMedium"));
 const StyledIconContainer = import_styled_components.default.div`
-  margin-right: 12px;
+  margin-right: 8px;
   display: flex;
   align-items: center;
 `;
 const icons = {
-  info: /* @__PURE__ */ import_react.default.createElement(import_ShieldSecurityMedium.default, { size: 20 }),
-  warning: /* @__PURE__ */ import_react.default.createElement(import_CircledAlertMedium.default, { size: 20 }),
-  error: /* @__PURE__ */ import_react.default.createElement(import_CircledCrossMedium.default, { size: 20 })
+  info: /* @__PURE__ */ import_react.default.createElement(import_InfoAltFillMedium.default, { size: 24 }),
+  secondary: /* @__PURE__ */ import_react.default.createElement(import_InfoAltFillMedium.default, { size: 24 }),
+  success: /* @__PURE__ */ import_react.default.createElement(import_CircledCheckSolidMedium.default, { size: 24 }),
+  warning: /* @__PURE__ */ import_react.default.createElement(import_WarningSolidMedium.default, { size: 24 }),
+  error: /* @__PURE__ */ import_react.default.createElement(import_CircledCrossSolidMedium.default, { size: 24 })
 };
 const getColors = ({ theme, type }) => {
   switch (type) {
+    case "secondary":
+      return {
+        background: theme.colors.opacityDefault.c05,
+        iconColor: theme.colors.neutral.c80
+      };
+    case "success":
+      return {
+        background: theme.colors.success.c10,
+        iconColor: theme.colors.success.c50
+      };
     case "warning":
       return {
-        background: theme.colors.warning.c30,
-        color: theme.colors.warning.c100
+        background: theme.colors.warning.c10,
+        iconColor: theme.colors.warning.c70
       };
     case "error":
       return {
-        background: theme.colors.error.c30,
-        color: theme.colors.error.c100
+        background: theme.colors.error.c10,
+        iconColor: theme.colors.error.c50
       };
     case "info":
     default:
       return {
-        background: theme.colors.primary.c20,
-        color: theme.colors.primary.c90
+        background: theme.colors.primary.c10,
+        iconColor: theme.colors.primary.c80
       };
   }
 };
 const StyledAlertContainer = (0, import_styled_components.default)(import_Flex.default)`
-  border-radius: ${(p) => `${p.theme.radii[1]}px`};
-  align-items: center;
+  border-radius: ${(p) => `${p.theme.radii[2]}px`};
+  align-items: start;
+`;
+const AlertBodyText = (0, import_styled_components.default)(import_Text.default).attrs({
+  flexShrink: 1,
+  variant: "bodyLineHeight",
+  fontWeight: "semiBold"
+})``;
+const AlertUnderlinedText = (0, import_styled_components.default)(AlertBodyText)`
+  text-decoration-line: underline;
 `;
 function Alert({
   type = "info",
@@ -81,22 +102,26 @@ function Alert({
   containerProps
 }) {
   const theme = (0, import_styled_components.useTheme)();
-  const { color, background } = getColors({ theme, type });
+  const { iconColor, background } = getColors({ theme, type });
   const textProps = {
-    variant: "paragraph",
-    fontWeight: "medium"
+    variant: "bodyLineHeight",
+    fontWeight: "semiBold"
   };
+  const textColor = "neutral.c100";
   return /* @__PURE__ */ import_react.default.createElement(
     StyledAlertContainer,
     {
-      color,
+      color: textColor,
       backgroundColor: background,
       padding: 6,
       ...containerProps
     },
-    showIcon && !!icons[type] && /* @__PURE__ */ import_react.default.createElement(StyledIconContainer, null, icons[type]),
-    /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { flexDirection: "column", flex: 1, alignItems: "flex-start", rowGap: "6px" }, title && /* @__PURE__ */ import_react.default.createElement(import_Text.default, { ...textProps, color: "inherit" }, title), renderContent && renderContent({ color, textProps })),
-    /* @__PURE__ */ import_react.default.createElement(import_Flex.default, null, renderRight && renderRight({ color, textProps }))
+    showIcon && !!icons[type] && /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { color: iconColor }, /* @__PURE__ */ import_react.default.createElement(StyledIconContainer, null, icons[type])),
+    /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { flexDirection: "column", flex: 1, alignItems: "flex-start", rowGap: "6px" }, title && /* @__PURE__ */ import_react.default.createElement(import_Text.default, { ...textProps, color: textColor }, title), renderContent && renderContent({ textProps })),
+    /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { alignSelf: "center" }, renderRight && renderRight({ textProps }))
   );
 }
+Alert.BodyText = AlertBodyText;
+Alert.UnderlinedText = AlertUnderlinedText;
+var Alert_default = Alert;
 //# sourceMappingURL=index.js.map

package/lib/cjs/components/message/Alert/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/message/Alert/index.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport styled, { useTheme, DefaultTheme } from \"styled-components\";\nimport Text from \"../../asorted/Text\";\nimport { TextVariants } from \"../../../styles/theme\";\nimport Flex from \"../../layout/Flex\";\nimport ShieldSecurityMedium from \"@ledgerhq/icons-ui/react/ShieldSecurityMedium\";\nimport CircledCrossMedium from \"@ledgerhq/icons-ui/react/CircledCrossMedium\";\nimport CircledAlertMedium from \"@ledgerhq/icons-ui/react/CircledAlertMedium\";\n\ntype AlertType = \"info\" | \"warning\" | \"error\";\n\ntype RenderProps = (props: {\n  color: string;\n  textProps: { variant?: TextVariants; fontWeight?: string };\n}) => JSX.Element;\n\nexport interface AlertProps {\n  /**\n   * Affects the colors of the background & text and what icon can be displayed.\n   */\n  type?: AlertType;\n  /**\n   * Title of the Alert.\n   */\n  title?: string;\n  /**\n   * Method for rendering additional content under the title. `{ color: string; textProps: { variant?: TextVariants; fontWeight?: string } }` is passed as props to easily style text elements.\n   */\n  renderContent?: RenderProps;\n\n  /**\n   * Method for rendering additional content to the right. `{ color: string; textProps: { variant?: TextVariants; fontWeight?: string } }` is passed as props to easily style text elements.\n   */\n  renderRight?: RenderProps;\n\n  /**\n   * Additional props to be passed to the top level container (containing icon + content).\n   */\n  containerProps?: Record<string, unknown>;\n\n  /**\n   * Whether or not to display an icon\n   */\n  showIcon?: boolean;\n}\n\nconst StyledIconContainer = styled.div`\n  margin-right: 12px;\n  display: flex;\n  align-items: center;\n`;\n\nconst icons = {\n  info: <ShieldSecurityMedium size={20} />,\n  warning: <CircledAlertMedium size={20} />,\n  error: <CircledCrossMedium size={20} />,\n};\n\nconst getColors = ({ theme, type }: { theme: DefaultTheme; type?: AlertType }) => {\n  switch (type) {\n    case \"warning\":\n      return {\n        background: theme.colors.warning.c30,\n        color: theme.colors.warning.c100,\n      };\n    case \"error\":\n      return {\n        background: theme.colors.error.c30,\n        color: theme.colors.error.c100,\n      };\n    case \"info\":\n    default:\n      return {\n        background: theme.colors.primary.c20,\n        color: theme.colors.primary.c90,\n      };\n  }\n};\n\nconst StyledAlertContainer = styled(Flex)<{ background?: string; color?: string }>`\n  border-radius: ${(p) => `${p.theme.radii[1]}px`};\n  align-items: center;\n`;\n\nexport default function Alert({\n  type = \"info\",\n  title,\n  showIcon = true,\n  renderContent,\n  renderRight,\n  containerProps,\n}: AlertProps): JSX.Element {\n  const theme = useTheme();\n  const { color, background } = getColors({ theme, type });\n  const textProps: { variant?: TextVariants; fontWeight?: string } = {\n    variant: \"paragraph\",\n    fontWeight: \"medium\",\n  };\n  return (\n    <StyledAlertContainer\n      color={color}\n      backgroundColor={background}\n      padding={6}\n      {...containerProps}\n    >\n      {showIcon && !!icons[type] && <StyledIconContainer>{icons[type]}</StyledIconContainer>}\n      <Flex flexDirection=\"column\" flex={1} alignItems=\"flex-start\" rowGap=\"6px\">\n        {title && (\n          <Text {...textProps} color=\"inherit\">\n            {title}\n          </Text>\n        )}\n        {renderContent && renderContent({ color, textProps })}\n      </Flex>\n      <Flex>{renderRight && renderRight({ color, textProps })}</Flex>\n    </StyledAlertContainer>\n  );\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAA+C;AAC/C,kBAAiB;AAEjB,kBAAiB;AACjB,kCAAiC;AACjC,gCAA+B;AAC/B,gCAA+B;AAuC/B,MAAM,sBAAsB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAMnC,MAAM,QAAQ;AAAA,EACZ,MAAM,6BAAAC,QAAA,cAAC,4BAAAC,SAAA,EAAqB,MAAM,IAAI;AAAA,EACtC,SAAS,6BAAAD,QAAA,cAAC,0BAAAE,SAAA,EAAmB,MAAM,IAAI;AAAA,EACvC,OAAO,6BAAAF,QAAA,cAAC,0BAAAG,SAAA,EAAmB,MAAM,IAAI;AACvC;AAEA,MAAM,YAAY,CAAC,EAAE,OAAO,KAAK,MAAiD;AAChF,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO;AAAA,QACL,YAAY,MAAM,OAAO,QAAQ;AAAA,QACjC,OAAO,MAAM,OAAO,QAAQ;AAAA,MAC9B;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,YAAY,MAAM,OAAO,MAAM;AAAA,QAC/B,OAAO,MAAM,OAAO,MAAM;AAAA,MAC5B;AAAA,IACF,KAAK;AAAA,IACL;AACE,aAAO;AAAA,QACL,YAAY,MAAM,OAAO,QAAQ;AAAA,QACjC,OAAO,MAAM,OAAO,QAAQ;AAAA,MAC9B;AAAA,EACJ;AACF;AAEA,MAAM,2BAAuB,yBAAAJ,SAAO,YAAAK,OAAI;AAAA,mBACrB,CAAC,MAAM,GAAG,EAAE,MAAM,MAAM,CAAC;AAAA;AAAA;AAI7B,SAAR,MAAuB;AAAA,EAC5B,OAAO;AAAA,EACP;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AACF,GAA4B;AAC1B,QAAM,YAAQ,mCAAS;AACvB,QAAM,EAAE,OAAO,WAAW,IAAI,UAAU,EAAE,OAAO,KAAK,CAAC;AACvD,QAAM,YAA6D;AAAA,IACjE,SAAS;AAAA,IACT,YAAY;AAAA,EACd;AACA,SACE,6BAAAJ,QAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,iBAAiB;AAAA,MACjB,SAAS;AAAA,MACR,GAAG;AAAA;AAAA,IAEH,YAAY,CAAC,CAAC,MAAM,IAAI,KAAK,6BAAAA,QAAA,cAAC,2BAAqB,MAAM,IAAI,CAAE;AAAA,IAChE,6BAAAA,QAAA,cAAC,YAAAI,SAAA,EAAK,eAAc,UAAS,MAAM,GAAG,YAAW,cAAa,QAAO,SAClE,SACC,6BAAAJ,QAAA,cAAC,YAAAK,SAAA,EAAM,GAAG,WAAW,OAAM,aACxB,KACH,GAED,iBAAiB,cAAc,EAAE,OAAO,UAAU,CAAC,CACtD;AAAA,IACA,6BAAAL,QAAA,cAAC,YAAAI,SAAA,MAAM,eAAe,YAAY,EAAE,OAAO,UAAU,CAAC,CAAE;AAAA,EAC1D;AAEJ;",
-  "names": ["styled", "React", "ShieldSecurityMedium", "CircledAlertMedium", "CircledCrossMedium", "Flex", "Text"]
+  "sourcesContent": ["import React from \"react\";\nimport styled, { useTheme, DefaultTheme } from \"styled-components\";\nimport Text from \"../../asorted/Text\";\nimport { TextVariants } from \"../../../styles/theme\";\nimport Flex from \"../../layout/Flex\";\nimport InfoAltFillMedium from \"@ledgerhq/icons-ui/react/InfoAltFillMedium\";\nimport CircledCheckSolidMedium from \"@ledgerhq/icons-ui/react/CircledCheckSolidMedium\";\nimport WarningSolidMedium from \"@ledgerhq/icons-ui/react/WarningSolidMedium\";\nimport CircledCrossSolidMedium from \"@ledgerhq/icons-ui/react/CircledCrossSolidMedium\";\n\ntype AlertType = \"info\" | \"secondary\" | \"success\" | \"warning\" | \"error\";\n\ntype RenderProps = (props: {\n  textProps: { variant?: TextVariants; fontWeight?: string };\n}) => JSX.Element;\n\nexport interface AlertProps {\n  /**\n   * Affects the colors of the background & text and what icon can be displayed.\n   */\n  type?: AlertType;\n  /**\n   * Title of the Alert.\n   */\n  title?: string;\n  /**\n   * Method for rendering additional content under the title. `{ color: string; textProps: { variant?: TextVariants; fontWeight?: string } }` is passed as props to easily style text elements.\n   */\n  renderContent?: RenderProps;\n\n  /**\n   * Method for rendering additional content to the right. `{ color: string; textProps: { variant?: TextVariants; fontWeight?: string } }` is passed as props to easily style text elements.\n   */\n  renderRight?: RenderProps;\n\n  /**\n   * Additional props to be passed to the top level container (containing icon + content).\n   */\n  containerProps?: Record<string, unknown>;\n\n  /**\n   * Whether or not to display an icon\n   */\n  showIcon?: boolean;\n}\n\nconst StyledIconContainer = styled.div`\n  margin-right: 8px;\n  display: flex;\n  align-items: center;\n`;\n\nconst icons = {\n  info: <InfoAltFillMedium size={24} />,\n  secondary: <InfoAltFillMedium size={24} />,\n  success: <CircledCheckSolidMedium size={24} />,\n  warning: <WarningSolidMedium size={24} />,\n  error: <CircledCrossSolidMedium size={24} />,\n};\n\nconst getColors = ({ theme, type }: { theme: DefaultTheme; type?: AlertType }) => {\n  switch (type) {\n    case \"secondary\":\n      return {\n        background: theme.colors.opacityDefault.c05,\n        iconColor: theme.colors.neutral.c80,\n      };\n    case \"success\":\n      return {\n        background: theme.colors.success.c10,\n        iconColor: theme.colors.success.c50,\n      };\n    case \"warning\":\n      return {\n        background: theme.colors.warning.c10,\n        iconColor: theme.colors.warning.c70,\n      };\n    case \"error\":\n      return {\n        background: theme.colors.error.c10,\n        iconColor: theme.colors.error.c50,\n      };\n    case \"info\":\n    default:\n      return {\n        background: theme.colors.primary.c10,\n        iconColor: theme.colors.primary.c80,\n      };\n  }\n};\n\nconst StyledAlertContainer = styled(Flex)<{ background?: string; color?: string }>`\n  border-radius: ${(p) => `${p.theme.radii[2]}px`};\n  align-items: start;\n`;\n\nconst AlertBodyText = styled(Text).attrs({\n  flexShrink: 1,\n  variant: \"bodyLineHeight\",\n  fontWeight: \"semiBold\",\n})``;\n\nconst AlertUnderlinedText = styled(AlertBodyText)`\n  text-decoration-line: underline;\n`;\n\nfunction Alert({\n  type = \"info\",\n  title,\n  showIcon = true,\n  renderContent,\n  renderRight,\n  containerProps,\n}: AlertProps): JSX.Element {\n  const theme = useTheme();\n  const { iconColor, background } = getColors({ theme, type });\n  const textProps: { variant?: TextVariants; fontWeight?: string } = {\n    variant: \"bodyLineHeight\",\n    fontWeight: \"semiBold\",\n  };\n  const textColor = \"neutral.c100\";\n  return (\n    <StyledAlertContainer\n      color={textColor}\n      backgroundColor={background}\n      padding={6}\n      {...containerProps}\n    >\n      {showIcon && !!icons[type] && (\n        <Flex color={iconColor}>\n          <StyledIconContainer>{icons[type]}</StyledIconContainer>\n        </Flex>\n      )}\n      <Flex flexDirection=\"column\" flex={1} alignItems=\"flex-start\" rowGap=\"6px\">\n        {title && (\n          <Text {...textProps} color={textColor}>\n            {title}\n          </Text>\n        )}\n        {renderContent && renderContent({ textProps })}\n      </Flex>\n      <Flex alignSelf=\"center\">{renderRight && renderRight({ textProps })}</Flex>\n    </StyledAlertContainer>\n  );\n}\n\nAlert.BodyText = AlertBodyText;\nAlert.UnderlinedText = AlertUnderlinedText;\n\nexport default Alert;\n"],
+  "mappings": "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",
+  "names": ["styled", "React", "InfoAltFillMedium", "CircledCheckSolidMedium", "WarningSolidMedium", "CircledCrossSolidMedium", "Flex", "Text"]
 }

package/lib/cjs/components/message/ContinueOnDevice/ContinueOnDevice.stories.js

@@ -0,0 +1,88 @@
+"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 __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 to;
+};
+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 ContinueOnDevice_stories_exports = {};
+__export(ContinueOnDevice_stories_exports, {
+  ContinueOnDevice: () => ContinueOnDevice,
+  default: () => ContinueOnDevice_stories_default
+});
+module.exports = __toCommonJS(ContinueOnDevice_stories_exports);
+var import_react = __toESM(require("react"));
+var import__ = __toESM(require("."));
+var import_Flex = __toESM(require("../../layout/Flex"));
+const description = `
+### Component to inform the user to continue the current flow by checking their device. An example with more context can be found in the VerticalTimeline component story.
+
+## Usage
+
+\`\`\`js
+
+import { Icons, ContinueOnDevice } from "@ledgerhq/react-ui"
+
+const YourComponent = () => (
+  <ContinueOnDevice
+    Icon={Icon.StaxMedium}
+    text="Perform this action on your Ledger Stax"
+    withTopDivider={false} // this will 
+  />
+)
+
+\`\`\`
+
+## Sandbox
+`;
+const PlaceholderIcon = ({ size }) => /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { height: size, width: size, borderRadius: size, bg: "neutral.c40" });
+var ContinueOnDevice_stories_default = {
+  title: "Messages/ContinueOnDevice",
+  component: import__.default,
+  parameters: {
+    docs: {
+      description: {
+        component: description
+      }
+    }
+  },
+  argTypes: {
+    Icon: {
+      type: "object",
+      defaultValue: PlaceholderIcon
+    },
+    text: {
+      type: "string",
+      defaultValue: "Continue on device"
+    },
+    withTopDivider: {
+      type: "boolean",
+      defaultValue: false
+    }
+  }
+};
+const ContinueOnDevice = (args) => {
+  return /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { flex: 1 }, /* @__PURE__ */ import_react.default.createElement(import__.default, { ...args }));
+};
+//# sourceMappingURL=ContinueOnDevice.stories.js.map

package/lib/cjs/components/message/ContinueOnDevice/ContinueOnDevice.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/message/ContinueOnDevice/ContinueOnDevice.stories.tsx"],
+  "sourcesContent": ["import React from \"react\";\nimport ContinueOnDeviceComponent from \".\";\nimport Flex from \"../../layout/Flex\";\n\nconst description = `\n### Component to inform the user to continue the current flow by checking their device. An example with more context can be found in the VerticalTimeline component story.\n\n## Usage\n\n\\`\\`\\`js\n\nimport { Icons, ContinueOnDevice } from \"@ledgerhq/react-ui\"\n\nconst YourComponent = () => (\n  <ContinueOnDevice\n    Icon={Icon.StaxMedium}\n    text=\"Perform this action on your Ledger Stax\"\n    withTopDivider={false} // this will \n  />\n)\n\n\\`\\`\\`\n\n## Sandbox\n`;\n\nconst PlaceholderIcon = ({ size }: { size: number }) => (\n  <Flex height={size} width={size} borderRadius={size} bg=\"neutral.c40\" />\n);\n\nexport default {\n  title: \"Messages/ContinueOnDevice\",\n  component: ContinueOnDeviceComponent,\n  parameters: {\n    docs: {\n      description: {\n        component: description,\n      },\n    },\n  },\n  argTypes: {\n    Icon: {\n      type: \"object\",\n      defaultValue: PlaceholderIcon,\n    },\n    text: {\n      type: \"string\",\n      defaultValue: \"Continue on device\",\n    },\n    withTopDivider: {\n      type: \"boolean\",\n      defaultValue: false,\n    },\n  },\n};\n\nexport const ContinueOnDevice = (\n  args: React.ComponentProps<typeof ContinueOnDeviceComponent>,\n): JSX.Element => {\n  return (\n    <Flex flex={1}>\n      <ContinueOnDeviceComponent {...args} />\n    </Flex>\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,eAAsC;AACtC,kBAAiB;AAEjB,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBpB,MAAM,kBAAkB,CAAC,EAAE,KAAK,MAC9B,6BAAAA,QAAA,cAAC,YAAAC,SAAA,EAAK,QAAQ,MAAM,OAAO,MAAM,cAAc,MAAM,IAAG,eAAc;AAGxE,IAAO,mCAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,SAAAC;AAAA,EACX,YAAY;AAAA,IACV,MAAM;AAAA,MACJ,aAAa;AAAA,QACX,WAAW;AAAA,MACb;AAAA,IACF;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,cAAc;AAAA,IAChB;AAAA,IACA,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,cAAc;AAAA,IAChB;AAAA,IACA,gBAAgB;AAAA,MACd,MAAM;AAAA,MACN,cAAc;AAAA,IAChB;AAAA,EACF;AACF;AAEO,MAAM,mBAAmB,CAC9B,SACgB;AAChB,SACE,6BAAAF,QAAA,cAAC,YAAAC,SAAA,EAAK,MAAM,KACV,6BAAAD,QAAA,cAAC,SAAAE,SAAA,EAA2B,GAAG,MAAM,CACvC;AAEJ;",
+  "names": ["React", "Flex", "ContinueOnDeviceComponent"]
+}