@ledgerhq/react-ui 0.14.11-nightly.3 → 0.14.12-next.0

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

@@ -89,7 +89,6 @@ var Popin_stories_default = {
     width: {
       type: "number",
       description: "Optional popin's width",
-      defaultValue: import_theme.default.sizes.drawer.popin.max.width,
       control: {
         type: "number",
         min: import_theme.default.sizes.drawer.popin.min.width,
@@ -108,7 +107,6 @@ var Popin_stories_default = {
     height: {
       type: "number",
       description: "Optional popin's height",
-      defaultValue: import_theme.default.sizes.drawer.popin.max.width,
       control: {
         type: "number",
         min: import_theme.default.sizes.drawer.popin.min.height,
@@ -126,7 +124,6 @@ var Popin_stories_default = {
     },
     isOpen: {
       type: "boolean",
-      defaultValue: true,
       description: "Controls if the popin is mounted or not.",
       required: true,
       control: { type: "boolean" }
@@ -141,7 +138,6 @@ var Popin_stories_default = {
       value: true,
       description: "Controls if the header should be displayed.",
       required: true,
-      defaultValue: true,
       control: { type: "boolean" },
       table: { category: "playground" }
     },
@@ -150,13 +146,11 @@ var Popin_stories_default = {
       value: true,
       description: "Controls if the footer should be displayed.",
       required: true,
-      defaultValue: true,
       control: { type: "boolean" },
       table: { category: "playground" }
     },
     isCloseDisplayed: {
       type: "boolean",
-      defaultValue: true,
       description: "Controls if the close button should be rendered.",
       required: true,
       control: { type: "boolean" },
@@ -164,7 +158,6 @@ var Popin_stories_default = {
     },
     isBackDisplayed: {
       type: "boolean",
-      defaultValue: true,
       description: "Controls if the back button should be rendered.",
       required: true,
       control: { type: "boolean" },
@@ -174,7 +167,6 @@ var Popin_stories_default = {
       type: "text",
       description: "Any valid text. This parameter is passed to a Text component as children. The Text component is the children of the Header component.",
       required: true,
-      defaultValue: "This is a fake title",
       control: { type: "text" },
       table: { category: "playground" }
     },
@@ -182,10 +174,20 @@ var Popin_stories_default = {
       type: "text",
       description: "Any valid text. This parameter is passed to a Text component as children. The Text component is the children of the Body component.",
       required: true,
-      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.`,
       control: { type: "text" },
       table: { category: "playground" }
     }
+  },
+  args: {
+    width: import_theme.default.sizes.drawer.popin.max.width,
+    height: import_theme.default.sizes.drawer.popin.max.height,
+    isOpen: true,
+    hasHeader: true,
+    hasFooter: true,
+    isCloseDisplayed: true,
+    isBackDisplayed: true,
+    "Body.Children.Text": `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.`,
+    "Header.Children.Text": "This is a fake title"
   }
 };
 const Template = (args) => {

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

@@ -1,7 +1,7 @@
 {
   "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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",
+  "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      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      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      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      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      control: { type: \"boolean\" },\n      table: { category: \"playground\" },\n    },\n    isCloseDisplayed: {\n      type: \"boolean\",\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      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      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      control: { type: \"text\" },\n      table: { category: \"playground\" },\n    },\n  },\n  args: {\n    width: theme.sizes.drawer.popin.max.width,\n    height: theme.sizes.drawer.popin.max.height,\n    isOpen: true,\n    hasHeader: true,\n    hasFooter: true,\n    isCloseDisplayed: true,\n    isBackDisplayed: true,\n    \"Body.Children.Text\": `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    \"Header.Children.Text\": \"This is a fake title\",\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": ["Popin", "theme", "React", "Button", "Text"]
 }

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

@@ -93,7 +93,6 @@ var Side_stories_default = {
     title: {
       type: "text",
       description: "Side default title",
-      defaultValue: "Default title",
       control: {
         type: "text"
       },
@@ -108,6 +107,10 @@ var Side_stories_default = {
         type: "boolean"
       }
     }
+  },
+  args: {
+    title: "Default title",
+    isOpen: true
   }
 };
 const Template = (args) => {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/layout/Side/Side.stories.tsx"],
-  "sourcesContent": ["import React, { useCallback, useEffect } from \"react\";\nimport styled from \"styled-components\";\n\nimport Button from \"../../cta/Button\";\nimport { lipsum } from \"../../helpers\";\nimport Side, { SideProps } from \"./index\";\nimport SideProvider, { setSide } from \"./Provider\";\n\nconst DummyContentWrapper = styled.div`\n  width: 100%;\n  background-color: ${p => p.color};\n  align-items: center;\n  padding: ${p => p.theme.space[4]}px;\n`;\n\nconst onBackLvl1 = () =>\n  setSide<SideProps & { left: boolean }>(DummyContent, {\n    left: true,\n  });\n\nconst onBackLvl2 = () =>\n  setSide(DummySubContentLvl1, {\n    onBack: onBackLvl1,\n    left: true,\n  });\n\nconst DummyContent = () => (\n  <DummyContentWrapper color={\"#957DAD\"}>\n    <Button\n      onClick={() =>\n        setSide(DummySubContentLvl1, {\n          onBack: onBackLvl1,\n          left: true,\n        })\n      }\n    >\n      {\"Go to level 2\"}\n    </Button>\n  </DummyContentWrapper>\n);\n\nconst DummySubContentLvl1 = () => (\n  <DummyContentWrapper color={\"#E0BBE4\"}>\n    <Button\n      onClick={() =>\n        setSide(DummySubContentLvl2, {\n          onBack: onBackLvl2,\n          left: true,\n        })\n      }\n    >\n      {\"Go to level 3\"}\n    </Button>\n    <div>{lipsum}</div>\n  </DummyContentWrapper>\n);\n\nconst DummySubContentLvl2 = () => (\n  <DummyContentWrapper color={\"#FEC8D8\"}>\n    <div>{lipsum}</div>\n  </DummyContentWrapper>\n);\n\nconst components = {\n  DummyContent,\n  DummySubContentLvl1,\n  DummySubContentLvl2,\n};\n\nexport default {\n  title: \"Layout/Drawer/Side\",\n  component: Side,\n  argTypes: {\n    isOpen: {\n      type: \"boolean\",\n      value: true,\n      description: \"Is open\",\n      required: false,\n      control: {\n        type: \"boolean\",\n      },\n    },\n    title: {\n      type: \"text\",\n      description: \"Side default title\",\n      defaultValue: \"Default title\",\n      control: {\n        type: \"text\",\n      },\n      required: false,\n    },\n    big: {\n      type: \"boolean\",\n      value: true,\n      description: \"Larger width side drawer.\",\n      required: false,\n      control: {\n        type: \"boolean\",\n      },\n    },\n  },\n};\n\nconst Template = (args: SideProps & { isOpen: boolean }) => {\n  const onClose = useCallback(() => setSide(null), []);\n  const onOpen = useCallback(() => setSide(components.DummyContent), []);\n\n  useEffect(() => {\n    if (args.isOpen) onOpen();\n    if (!args.isOpen) onClose();\n  }, [args.isOpen, onClose, onOpen]);\n\n  return (\n    <SideProvider>\n      <Side {...args} />\n    </SideProvider>\n  );\n};\n\nexport const Default = Template.bind({});\n// @ts-expect-error FIXME\nDefault.args = {};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA8C;AAC9C,+BAAmB;AAEnB,oBAAmB;AACnB,qBAAuB;AACvB,mBAAgC;AAChC,sBAAsC;AAEtC,MAAM,sBAAsB,yBAAAA,QAAO;AAAA;AAAA,sBAEb,OAAK,EAAE,KAAK;AAAA;AAAA,aAErB,OAAK,EAAE,MAAM,MAAM,CAAC,CAAC;AAAA;AAGlC,MAAM,aAAa,UACjB,yBAAuC,cAAc;AAAA,EACnD,MAAM;AACR,CAAC;AAEH,MAAM,aAAa,UACjB,yBAAQ,qBAAqB;AAAA,EAC3B,QAAQ;AAAA,EACR,MAAM;AACR,CAAC;AAEH,MAAM,eAAe,MACnB,6BAAAC,QAAA,cAAC,uBAAoB,OAAO,aAC1B,6BAAAA,QAAA;AAAA,EAAC,cAAAC;AAAA,EAAA;AAAA,IACC,SAAS,UACP,yBAAQ,qBAAqB;AAAA,MAC3B,QAAQ;AAAA,MACR,MAAM;AAAA,IACR,CAAC;AAAA;AAAA,EAGF;AACH,CACF;AAGF,MAAM,sBAAsB,MAC1B,6BAAAD,QAAA,cAAC,uBAAoB,OAAO,aAC1B,6BAAAA,QAAA;AAAA,EAAC,cAAAC;AAAA,EAAA;AAAA,IACC,SAAS,UACP,yBAAQ,qBAAqB;AAAA,MAC3B,QAAQ;AAAA,MACR,MAAM;AAAA,IACR,CAAC;AAAA;AAAA,EAGF;AACH,GACA,6BAAAD,QAAA,cAAC,aAAK,qBAAO,CACf;AAGF,MAAM,sBAAsB,MAC1B,6BAAAA,QAAA,cAAC,uBAAoB,OAAO,aAC1B,6BAAAA,QAAA,cAAC,aAAK,qBAAO,CACf;AAGF,MAAM,aAAa;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AACF;AAEA,IAAO,uBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAE;AAAA,EACX,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,MACP,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,OAAO;AAAA,MACL,MAAM;AAAA,MACN,aAAa;AAAA,MACb,cAAc;AAAA,MACd,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,MACA,UAAU;AAAA,IACZ;AAAA,IACA,KAAK;AAAA,MACH,MAAM;AAAA,MACN,OAAO;AAAA,MACP,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACF;AAEA,MAAM,WAAW,CAAC,SAA0C;AAC1D,QAAM,cAAU,0BAAY,UAAM,yBAAQ,IAAI,GAAG,CAAC,CAAC;AACnD,QAAM,aAAS,0BAAY,UAAM,yBAAQ,WAAW,YAAY,GAAG,CAAC,CAAC;AAErE,8BAAU,MAAM;AACd,QAAI,KAAK;AAAQ,aAAO;AACxB,QAAI,CAAC,KAAK;AAAQ,cAAQ;AAAA,EAC5B,GAAG,CAAC,KAAK,QAAQ,SAAS,MAAM,CAAC;AAEjC,SACE,6BAAAF,QAAA,cAAC,gBAAAG,SAAA,MACC,6BAAAH,QAAA,cAAC,aAAAE,SAAA,EAAM,GAAG,MAAM,CAClB;AAEJ;AAEO,MAAM,UAAU,SAAS,KAAK,CAAC,CAAC;AAEvC,QAAQ,OAAO,CAAC;",
+  "sourcesContent": ["import React, { useCallback, useEffect } from \"react\";\nimport styled from \"styled-components\";\n\nimport Button from \"../../cta/Button\";\nimport { lipsum } from \"../../helpers\";\nimport Side, { SideProps } from \"./index\";\nimport SideProvider, { setSide } from \"./Provider\";\n\nconst DummyContentWrapper = styled.div`\n  width: 100%;\n  background-color: ${p => p.color};\n  align-items: center;\n  padding: ${p => p.theme.space[4]}px;\n`;\n\nconst onBackLvl1 = () =>\n  setSide<SideProps & { left: boolean }>(DummyContent, {\n    left: true,\n  });\n\nconst onBackLvl2 = () =>\n  setSide(DummySubContentLvl1, {\n    onBack: onBackLvl1,\n    left: true,\n  });\n\nconst DummyContent = () => (\n  <DummyContentWrapper color={\"#957DAD\"}>\n    <Button\n      onClick={() =>\n        setSide(DummySubContentLvl1, {\n          onBack: onBackLvl1,\n          left: true,\n        })\n      }\n    >\n      {\"Go to level 2\"}\n    </Button>\n  </DummyContentWrapper>\n);\n\nconst DummySubContentLvl1 = () => (\n  <DummyContentWrapper color={\"#E0BBE4\"}>\n    <Button\n      onClick={() =>\n        setSide(DummySubContentLvl2, {\n          onBack: onBackLvl2,\n          left: true,\n        })\n      }\n    >\n      {\"Go to level 3\"}\n    </Button>\n    <div>{lipsum}</div>\n  </DummyContentWrapper>\n);\n\nconst DummySubContentLvl2 = () => (\n  <DummyContentWrapper color={\"#FEC8D8\"}>\n    <div>{lipsum}</div>\n  </DummyContentWrapper>\n);\n\nconst components = {\n  DummyContent,\n  DummySubContentLvl1,\n  DummySubContentLvl2,\n};\n\nexport default {\n  title: \"Layout/Drawer/Side\",\n  component: Side,\n  argTypes: {\n    isOpen: {\n      type: \"boolean\",\n      value: true,\n      description: \"Is open\",\n      required: false,\n      control: {\n        type: \"boolean\",\n      },\n    },\n    title: {\n      type: \"text\",\n      description: \"Side default title\",\n      control: {\n        type: \"text\",\n      },\n      required: false,\n    },\n    big: {\n      type: \"boolean\",\n      value: true,\n      description: \"Larger width side drawer.\",\n      required: false,\n      control: {\n        type: \"boolean\",\n      },\n    },\n  },\n  args: {\n    title: \"Default title\",\n    isOpen: true,\n  },\n};\n\nconst Template = (args: SideProps & { isOpen: boolean }) => {\n  const onClose = useCallback(() => setSide(null), []);\n  const onOpen = useCallback(() => setSide(components.DummyContent), []);\n\n  useEffect(() => {\n    if (args.isOpen) onOpen();\n    if (!args.isOpen) onClose();\n  }, [args.isOpen, onClose, onOpen]);\n\n  return (\n    <SideProvider>\n      <Side {...args} />\n    </SideProvider>\n  );\n};\n\nexport const Default = Template.bind({});\n// @ts-expect-error FIXME\nDefault.args = {};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA8C;AAC9C,+BAAmB;AAEnB,oBAAmB;AACnB,qBAAuB;AACvB,mBAAgC;AAChC,sBAAsC;AAEtC,MAAM,sBAAsB,yBAAAA,QAAO;AAAA;AAAA,sBAEb,OAAK,EAAE,KAAK;AAAA;AAAA,aAErB,OAAK,EAAE,MAAM,MAAM,CAAC,CAAC;AAAA;AAGlC,MAAM,aAAa,UACjB,yBAAuC,cAAc;AAAA,EACnD,MAAM;AACR,CAAC;AAEH,MAAM,aAAa,UACjB,yBAAQ,qBAAqB;AAAA,EAC3B,QAAQ;AAAA,EACR,MAAM;AACR,CAAC;AAEH,MAAM,eAAe,MACnB,6BAAAC,QAAA,cAAC,uBAAoB,OAAO,aAC1B,6BAAAA,QAAA;AAAA,EAAC,cAAAC;AAAA,EAAA;AAAA,IACC,SAAS,UACP,yBAAQ,qBAAqB;AAAA,MAC3B,QAAQ;AAAA,MACR,MAAM;AAAA,IACR,CAAC;AAAA;AAAA,EAGF;AACH,CACF;AAGF,MAAM,sBAAsB,MAC1B,6BAAAD,QAAA,cAAC,uBAAoB,OAAO,aAC1B,6BAAAA,QAAA;AAAA,EAAC,cAAAC;AAAA,EAAA;AAAA,IACC,SAAS,UACP,yBAAQ,qBAAqB;AAAA,MAC3B,QAAQ;AAAA,MACR,MAAM;AAAA,IACR,CAAC;AAAA;AAAA,EAGF;AACH,GACA,6BAAAD,QAAA,cAAC,aAAK,qBAAO,CACf;AAGF,MAAM,sBAAsB,MAC1B,6BAAAA,QAAA,cAAC,uBAAoB,OAAO,aAC1B,6BAAAA,QAAA,cAAC,aAAK,qBAAO,CACf;AAGF,MAAM,aAAa;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AACF;AAEA,IAAO,uBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAE;AAAA,EACX,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,MACP,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,OAAO;AAAA,MACL,MAAM;AAAA,MACN,aAAa;AAAA,MACb,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,MACA,UAAU;AAAA,IACZ;AAAA,IACA,KAAK;AAAA,MACH,MAAM;AAAA,MACN,OAAO;AAAA,MACP,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,IACF;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AACF;AAEA,MAAM,WAAW,CAAC,SAA0C;AAC1D,QAAM,cAAU,0BAAY,UAAM,yBAAQ,IAAI,GAAG,CAAC,CAAC;AACnD,QAAM,aAAS,0BAAY,UAAM,yBAAQ,WAAW,YAAY,GAAG,CAAC,CAAC;AAErE,8BAAU,MAAM;AACd,QAAI,KAAK;AAAQ,aAAO;AACxB,QAAI,CAAC,KAAK;AAAQ,cAAQ;AAAA,EAC5B,GAAG,CAAC,KAAK,QAAQ,SAAS,MAAM,CAAC;AAEjC,SACE,6BAAAF,QAAA,cAAC,gBAAAG,SAAA,MACC,6BAAAH,QAAA,cAAC,aAAAE,SAAA,EAAM,GAAG,MAAM,CAClB;AAEJ;AAEO,MAAM,UAAU,SAAS,KAAK,CAAC,CAAC;AAEvC,QAAQ,OAAO,CAAC;",
   "names": ["styled", "React", "Button", "Side", "SideProvider"]
 }

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

@@ -51,15 +51,17 @@ var Alert_stories_default = {
     title: {
       control: {
         type: "text"
-      },
-      defaultValue: "Title"
+      }
     },
     showIcon: {
       control: {
         type: "boolean"
-      },
-      defaultValue: true
+      }
     }
+  },
+  args: {
+    title: "Title",
+    showIcon: true
   }
 };
 const Default = (args) => {

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 Button from \"../../cta/Button\";\nimport { IconsLegacy } 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={IconsLegacy.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,oBAA4B;AAE5B,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,0BAAY;AAAA;AAAA,QAElB,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;",
+  "sourcesContent": ["import React from \"react\";\nimport Alert, { AlertProps } from \"./index\";\nimport Link from \"../../cta/Link\";\nimport Button from \"../../cta/Button\";\nimport { IconsLegacy } 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    },\n    showIcon: {\n      control: {\n        type: \"boolean\",\n      },\n    },\n  },\n  args: {\n    title: \"Title\",\n    showIcon: true,\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={IconsLegacy.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,oBAA4B;AAE5B,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,IACF;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,IACF;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,UAAU;AAAA,EACZ;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,0BAAY;AAAA;AAAA,QAElB,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/ContinueOnDevice/ContinueOnDevice.stories.js

@@ -56,7 +56,16 @@ const YourComponent = () => (
 
 ## Sandbox
 `;
-const PlaceholderIcon = ({ size }) => /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { height: size, width: size, borderRadius: size, bg: "neutral.c40" });
+const PlaceholderIcon = ({ size }) => /* @__PURE__ */ import_react.default.createElement(
+  import_Flex.default,
+  {
+    height: size,
+    width: size,
+    borderRadius: size,
+    bg: "neutral.c40",
+    backgroundColor: "primary.c50"
+  }
+);
 var ContinueOnDevice_stories_default = {
   title: "Messages/ContinueOnDevice",
   component: import__.default,
@@ -69,17 +78,19 @@ var ContinueOnDevice_stories_default = {
   },
   argTypes: {
     Icon: {
-      type: "object",
-      defaultValue: PlaceholderIcon
+      type: "object"
     },
     text: {
-      type: "string",
-      defaultValue: "Continue on device"
+      type: "string"
     },
     withTopDivider: {
-      type: "boolean",
-      defaultValue: false
+      type: "boolean"
     }
+  },
+  args: {
+    Icon: PlaceholderIcon,
+    text: "Continue on device",
+    withTopDivider: false
   }
 };
 const ContinueOnDevice = (args) => {

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

@@ -1,7 +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;",
+  "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\n    height={size}\n    width={size}\n    borderRadius={size}\n    bg=\"neutral.c40\"\n    backgroundColor=\"primary.c50\"\n  />\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    },\n    text: {\n      type: \"string\",\n    },\n    withTopDivider: {\n      type: \"boolean\",\n    },\n  },\n  args: {\n    Icon: PlaceholderIcon,\n    text: \"Continue on device\",\n    withTopDivider: false,\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;AAAA,EAAC,YAAAC;AAAA,EAAA;AAAA,IACC,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,cAAc;AAAA,IACd,IAAG;AAAA,IACH,iBAAgB;AAAA;AAClB;AAGF,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,IACR;AAAA,IACA,MAAM;AAAA,MACJ,MAAM;AAAA,IACR;AAAA,IACA,gBAAgB;AAAA,MACd,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,MAAM;AAAA,IACN,gBAAgB;AAAA,EAClB;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"]
 }

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

@@ -39,9 +39,11 @@ var Log_stories_default = {
   component: import_index.default,
   argTypes: {
     children: {
-      type: "string",
-      defaultValue: "oh my mattis, oh my word. very dolor! very layout. plz aenean, much doge, oh my word. oh my elit, i can haz full. such layout. oh my word. want text"
+      type: "string"
     }
+  },
+  args: {
+    children: "oh my mattis, oh my word. very dolor! very layout. plz aenean, much doge, oh my word. oh my elit, i can haz full. such layout. oh my word. want text"
   }
 };
 const Log = (args) => {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/message/Log/Log.stories.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport LogComponent, { Props } from \"./index\";\n\nexport default {\n  title: \"Messages/Log\",\n  component: LogComponent,\n  argTypes: {\n    children: {\n      type: \"string\",\n      defaultValue:\n        \"oh my mattis, oh my word. very dolor! very layout. plz aenean, much doge, oh my word. oh my elit, i can haz full. such layout. oh my word. want text\",\n    },\n  },\n};\n\nexport const Log = (args: Props): JSX.Element => {\n  return <LogComponent {...args} />;\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,mBAAoC;AAEpC,IAAO,sBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,UAAU;AAAA,IACR,UAAU;AAAA,MACR,MAAM;AAAA,MACN,cACE;AAAA,IACJ;AAAA,EACF;AACF;AAEO,MAAM,MAAM,CAAC,SAA6B;AAC/C,SAAO,6BAAAC,QAAA,cAAC,aAAAD,SAAA,EAAc,GAAG,MAAM;AACjC;",
+  "sourcesContent": ["import React from \"react\";\nimport LogComponent, { Props } from \"./index\";\n\nexport default {\n  title: \"Messages/Log\",\n  component: LogComponent,\n  argTypes: {\n    children: {\n      type: \"string\",\n    },\n  },\n  args: {\n    children:\n      \"oh my mattis, oh my word. very dolor! very layout. plz aenean, much doge, oh my word. oh my elit, i can haz full. such layout. oh my word. want text\",\n  },\n};\n\nexport const Log = (args: Props): JSX.Element => {\n  return <LogComponent {...args} />;\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,mBAAoC;AAEpC,IAAO,sBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,UAAU;AAAA,IACR,UAAU;AAAA,MACR,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,UACE;AAAA,EACJ;AACF;AAEO,MAAM,MAAM,CAAC,SAA6B;AAC/C,SAAO,6BAAAC,QAAA,cAAC,aAAAD,SAAA,EAAc,GAAG,MAAM;AACjC;",
   "names": ["LogComponent", "React"]
 }

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

@@ -41,20 +41,16 @@ var Notification_stories_default = {
   component: import_index.default,
   argTypes: {
     title: {
-      type: "string",
-      defaultValue: "Informational title"
+      type: "string"
     },
     description: {
-      type: "string",
-      defaultValue: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nibh felis, pom id..."
+      type: "string"
     },
     link: {
-      type: "string",
-      defaultValue: "Learn more"
+      type: "string"
     },
     active: {
-      type: "boolean",
-      defaultValue: false
+      type: "boolean"
     },
     badge: {
       control: false
@@ -62,6 +58,12 @@ var Notification_stories_default = {
     theme: { table: { disable: true } },
     as: { table: { disable: true } },
     forwardedAs: { table: { disable: true } }
+  },
+  args: {
+    title: "Informational title",
+    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nibh felis, pom id...",
+    link: "Learn more",
+    active: false
   }
 };
 function Notifications(args) {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/message/Notification/Notification.stories.tsx"],
-  "sourcesContent": ["import React from \"react\";\n\nimport Icon from \"../../asorted/Icon\";\nimport FlexBox from \"../../layout/Flex\";\nimport Notification, { Props } from \"./index\";\n\nexport default {\n  title: \"Messages/Notifications\",\n  component: Notification,\n  argTypes: {\n    title: {\n      type: \"string\",\n      defaultValue: \"Informational title\",\n    },\n    description: {\n      type: \"string\",\n      defaultValue:\n        \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nibh felis, pom id...\",\n    },\n    link: {\n      type: \"string\",\n      defaultValue: \"Learn more\",\n    },\n    active: {\n      type: \"boolean\",\n      defaultValue: false,\n    },\n    badge: {\n      control: false,\n    },\n    theme: { table: { disable: true } },\n    as: { table: { disable: true } },\n    forwardedAs: { table: { disable: true } },\n  },\n};\n\nexport function Notifications(args: Props & { active: boolean }): JSX.Element {\n  const { description, link, ...props } = args;\n\n  const warningBadge = (\n    <Notification.Badge\n      color=\"warning.c50\"\n      backgroundColor=\"warning.c10\"\n      icon={<Icon name=\"Warning\" size={24} />}\n      active={args.active}\n    />\n  );\n\n  const infoBadge = (\n    <Notification.Badge\n      color=\"primary.c100\"\n      backgroundColor=\"primary.c10\"\n      icon={<Icon name=\"Info\" size={24} weight=\"Medium\" />}\n      active={args.active}\n    />\n  );\n\n  return (\n    <FlexBox flexDirection=\"column\" rowGap={5}>\n      <Notification {...props} badge={warningBadge} hasBackground />\n      <Notification {...props} badge={infoBadge} />\n      <Notification {...props} description={description} badge={warningBadge} hasBackground />\n      <Notification {...props} description={description} badge={infoBadge} />\n      <Notification\n        description={description}\n        link={link}\n        {...props}\n        badge={warningBadge}\n        hasBackground\n      />\n      <Notification {...props} description={description} link={link} badge={infoBadge} />\n    </FlexBox>\n  );\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,kBAAiB;AACjB,kBAAoB;AACpB,mBAAoC;AAEpC,IAAO,+BAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,UAAU;AAAA,IACR,OAAO;AAAA,MACL,MAAM;AAAA,MACN,cAAc;AAAA,IAChB;AAAA,IACA,aAAa;AAAA,MACX,MAAM;AAAA,MACN,cACE;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,cAAc;AAAA,IAChB;AAAA,IACA,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,cAAc;AAAA,IAChB;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,IACA,OAAO,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,IAClC,IAAI,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,IAC/B,aAAa,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,EAC1C;AACF;AAEO,SAAS,cAAc,MAAgD;AAC5E,QAAM,EAAE,aAAa,MAAM,GAAG,MAAM,IAAI;AAExC,QAAM,eACJ,6BAAAC,QAAA;AAAA,IAAC,aAAAD,QAAa;AAAA,IAAb;AAAA,MACC,OAAM;AAAA,MACN,iBAAgB;AAAA,MAChB,MAAM,6BAAAC,QAAA,cAAC,YAAAC,SAAA,EAAK,MAAK,WAAU,MAAM,IAAI;AAAA,MACrC,QAAQ,KAAK;AAAA;AAAA,EACf;AAGF,QAAM,YACJ,6BAAAD,QAAA;AAAA,IAAC,aAAAD,QAAa;AAAA,IAAb;AAAA,MACC,OAAM;AAAA,MACN,iBAAgB;AAAA,MAChB,MAAM,6BAAAC,QAAA,cAAC,YAAAC,SAAA,EAAK,MAAK,QAAO,MAAM,IAAI,QAAO,UAAS;AAAA,MAClD,QAAQ,KAAK;AAAA;AAAA,EACf;AAGF,SACE,6BAAAD,QAAA,cAAC,YAAAE,SAAA,EAAQ,eAAc,UAAS,QAAQ,KACtC,6BAAAF,QAAA,cAAC,aAAAD,SAAA,EAAc,GAAG,OAAO,OAAO,cAAc,eAAa,MAAC,GAC5D,6BAAAC,QAAA,cAAC,aAAAD,SAAA,EAAc,GAAG,OAAO,OAAO,WAAW,GAC3C,6BAAAC,QAAA,cAAC,aAAAD,SAAA,EAAc,GAAG,OAAO,aAA0B,OAAO,cAAc,eAAa,MAAC,GACtF,6BAAAC,QAAA,cAAC,aAAAD,SAAA,EAAc,GAAG,OAAO,aAA0B,OAAO,WAAW,GACrE,6BAAAC,QAAA;AAAA,IAAC,aAAAD;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACJ,OAAO;AAAA,MACP,eAAa;AAAA;AAAA,EACf,GACA,6BAAAC,QAAA,cAAC,aAAAD,SAAA,EAAc,GAAG,OAAO,aAA0B,MAAY,OAAO,WAAW,CACnF;AAEJ;",
+  "sourcesContent": ["import React from \"react\";\n\nimport Icon from \"../../asorted/Icon\";\nimport FlexBox from \"../../layout/Flex\";\nimport Notification, { Props } from \"./index\";\n\nexport default {\n  title: \"Messages/Notifications\",\n  component: Notification,\n  argTypes: {\n    title: {\n      type: \"string\",\n    },\n    description: {\n      type: \"string\",\n    },\n    link: {\n      type: \"string\",\n    },\n    active: {\n      type: \"boolean\",\n    },\n    badge: {\n      control: false,\n    },\n    theme: { table: { disable: true } },\n    as: { table: { disable: true } },\n    forwardedAs: { table: { disable: true } },\n  },\n  args: {\n    title: \"Informational title\",\n    description:\n      \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nibh felis, pom id...\",\n    link: \"Learn more\",\n    active: false,\n  },\n};\n\nexport function Notifications(args: Props & { active: boolean }): JSX.Element {\n  const { description, link, ...props } = args;\n\n  const warningBadge = (\n    <Notification.Badge\n      color=\"warning.c50\"\n      backgroundColor=\"warning.c10\"\n      icon={<Icon name=\"Warning\" size={24} />}\n      active={args.active}\n    />\n  );\n\n  const infoBadge = (\n    <Notification.Badge\n      color=\"primary.c100\"\n      backgroundColor=\"primary.c10\"\n      icon={<Icon name=\"Info\" size={24} weight=\"Medium\" />}\n      active={args.active}\n    />\n  );\n\n  return (\n    <FlexBox flexDirection=\"column\" rowGap={5}>\n      <Notification {...props} badge={warningBadge} hasBackground />\n      <Notification {...props} badge={infoBadge} />\n      <Notification {...props} description={description} badge={warningBadge} hasBackground />\n      <Notification {...props} description={description} badge={infoBadge} />\n      <Notification\n        description={description}\n        link={link}\n        {...props}\n        badge={warningBadge}\n        hasBackground\n      />\n      <Notification {...props} description={description} link={link} badge={infoBadge} />\n    </FlexBox>\n  );\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,kBAAiB;AACjB,kBAAoB;AACpB,mBAAoC;AAEpC,IAAO,+BAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,UAAU;AAAA,IACR,OAAO;AAAA,MACL,MAAM;AAAA,IACR;AAAA,IACA,aAAa;AAAA,MACX,MAAM;AAAA,IACR;AAAA,IACA,MAAM;AAAA,MACJ,MAAM;AAAA,IACR;AAAA,IACA,QAAQ;AAAA,MACN,MAAM;AAAA,IACR;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,IACA,OAAO,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,IAClC,IAAI,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,IAC/B,aAAa,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,EAC1C;AAAA,EACA,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,aACE;AAAA,IACF,MAAM;AAAA,IACN,QAAQ;AAAA,EACV;AACF;AAEO,SAAS,cAAc,MAAgD;AAC5E,QAAM,EAAE,aAAa,MAAM,GAAG,MAAM,IAAI;AAExC,QAAM,eACJ,6BAAAC,QAAA;AAAA,IAAC,aAAAD,QAAa;AAAA,IAAb;AAAA,MACC,OAAM;AAAA,MACN,iBAAgB;AAAA,MAChB,MAAM,6BAAAC,QAAA,cAAC,YAAAC,SAAA,EAAK,MAAK,WAAU,MAAM,IAAI;AAAA,MACrC,QAAQ,KAAK;AAAA;AAAA,EACf;AAGF,QAAM,YACJ,6BAAAD,QAAA;AAAA,IAAC,aAAAD,QAAa;AAAA,IAAb;AAAA,MACC,OAAM;AAAA,MACN,iBAAgB;AAAA,MAChB,MAAM,6BAAAC,QAAA,cAAC,YAAAC,SAAA,EAAK,MAAK,QAAO,MAAM,IAAI,QAAO,UAAS;AAAA,MAClD,QAAQ,KAAK;AAAA;AAAA,EACf;AAGF,SACE,6BAAAD,QAAA,cAAC,YAAAE,SAAA,EAAQ,eAAc,UAAS,QAAQ,KACtC,6BAAAF,QAAA,cAAC,aAAAD,SAAA,EAAc,GAAG,OAAO,OAAO,cAAc,eAAa,MAAC,GAC5D,6BAAAC,QAAA,cAAC,aAAAD,SAAA,EAAc,GAAG,OAAO,OAAO,WAAW,GAC3C,6BAAAC,QAAA,cAAC,aAAAD,SAAA,EAAc,GAAG,OAAO,aAA0B,OAAO,cAAc,eAAa,MAAC,GACtF,6BAAAC,QAAA,cAAC,aAAAD,SAAA,EAAc,GAAG,OAAO,aAA0B,OAAO,WAAW,GACrE,6BAAAC,QAAA;AAAA,IAAC,aAAAD;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACJ,OAAO;AAAA,MACP,eAAa;AAAA;AAAA,EACf,GACA,6BAAAC,QAAA,cAAC,aAAAD,SAAA,EAAc,GAAG,OAAO,aAA0B,MAAY,OAAO,WAAW,CACnF;AAEJ;",
   "names": ["Notification", "React", "Icon", "FlexBox"]
 }

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

@@ -41,8 +41,7 @@ var StatusNotification_stories_default = {
   component: import_index.default,
   argTypes: {
     text: {
-      type: "string",
-      defaultValue: "Ledger Live is Experiencing Issues"
+      type: "string"
     },
     badge: {
       control: false
@@ -53,6 +52,9 @@ var StatusNotification_stories_default = {
     theme: { table: { disable: true } },
     as: { table: { disable: true } },
     forwardedAs: { table: { disable: true } }
+  },
+  args: {
+    text: "Ledger Live is Experiencing Issues"
   }
 };
 function StatusNotifications(args) {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/message/StatusNotification/StatusNotification.stories.tsx"],
-  "sourcesContent": ["import React from \"react\";\n\nimport Icon from \"../../asorted/Icon\";\nimport FlexBox from \"../../layout/Flex\";\nimport StatusNotification, { Props } from \"./index\";\n\nexport default {\n  title: \"Messages/Status Notifications\",\n  component: StatusNotification,\n  argTypes: {\n    text: {\n      type: \"string\",\n      defaultValue: \"Ledger Live is Experiencing Issues\",\n    },\n    badge: {\n      control: false,\n    },\n    columnGap: { control: false },\n    rowGap: { control: false },\n    hasBorder: { type: \"boolean\" },\n    theme: { table: { disable: true } },\n    as: { table: { disable: true } },\n    forwardedAs: { table: { disable: true } },\n  },\n};\n\nexport function StatusNotifications(args: Props & { active: boolean }): JSX.Element {\n  const { ...props } = args;\n\n  const warningBadge = <Icon name=\"Warning\" size={50} color=\"error.c50\" weight=\"Medium\" />;\n  const infoBadge = <Icon name=\"Info\" size={50} color=\"primary.c100\" weight=\"Medium\" />;\n\n  return (\n    <FlexBox justifyContent=\"center\">\n      <FlexBox width=\"502px\" flexDirection=\"column\" rowGap={5}>\n        <StatusNotification {...props} badge={warningBadge} hasBorder />\n        <StatusNotification {...props} badge={infoBadge} />\n        <StatusNotification {...props} badge={warningBadge} hasBorder />\n        <StatusNotification {...props} badge={infoBadge} />\n      </FlexBox>\n    </FlexBox>\n  );\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,kBAAiB;AACjB,kBAAoB;AACpB,mBAA0C;AAE1C,IAAO,qCAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,cAAc;AAAA,IAChB;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,IACA,WAAW,EAAE,SAAS,MAAM;AAAA,IAC5B,QAAQ,EAAE,SAAS,MAAM;AAAA,IACzB,WAAW,EAAE,MAAM,UAAU;AAAA,IAC7B,OAAO,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,IAClC,IAAI,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,IAC/B,aAAa,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,EAC1C;AACF;AAEO,SAAS,oBAAoB,MAAgD;AAClF,QAAM,EAAE,GAAG,MAAM,IAAI;AAErB,QAAM,eAAe,6BAAAC,QAAA,cAAC,YAAAC,SAAA,EAAK,MAAK,WAAU,MAAM,IAAI,OAAM,aAAY,QAAO,UAAS;AACtF,QAAM,YAAY,6BAAAD,QAAA,cAAC,YAAAC,SAAA,EAAK,MAAK,QAAO,MAAM,IAAI,OAAM,gBAAe,QAAO,UAAS;AAEnF,SACE,6BAAAD,QAAA,cAAC,YAAAE,SAAA,EAAQ,gBAAe,YACtB,6BAAAF,QAAA,cAAC,YAAAE,SAAA,EAAQ,OAAM,SAAQ,eAAc,UAAS,QAAQ,KACpD,6BAAAF,QAAA,cAAC,aAAAD,SAAA,EAAoB,GAAG,OAAO,OAAO,cAAc,WAAS,MAAC,GAC9D,6BAAAC,QAAA,cAAC,aAAAD,SAAA,EAAoB,GAAG,OAAO,OAAO,WAAW,GACjD,6BAAAC,QAAA,cAAC,aAAAD,SAAA,EAAoB,GAAG,OAAO,OAAO,cAAc,WAAS,MAAC,GAC9D,6BAAAC,QAAA,cAAC,aAAAD,SAAA,EAAoB,GAAG,OAAO,OAAO,WAAW,CACnD,CACF;AAEJ;",
+  "sourcesContent": ["import React from \"react\";\n\nimport Icon from \"../../asorted/Icon\";\nimport FlexBox from \"../../layout/Flex\";\nimport StatusNotification, { Props } from \"./index\";\n\nexport default {\n  title: \"Messages/Status Notifications\",\n  component: StatusNotification,\n  argTypes: {\n    text: {\n      type: \"string\",\n    },\n    badge: {\n      control: false,\n    },\n    columnGap: { control: false },\n    rowGap: { control: false },\n    hasBorder: { type: \"boolean\" },\n    theme: { table: { disable: true } },\n    as: { table: { disable: true } },\n    forwardedAs: { table: { disable: true } },\n  },\n  args: {\n    text: \"Ledger Live is Experiencing Issues\",\n  },\n};\n\nexport function StatusNotifications(args: Props & { active: boolean }): JSX.Element {\n  const { ...props } = args;\n\n  const warningBadge = <Icon name=\"Warning\" size={50} color=\"error.c50\" weight=\"Medium\" />;\n  const infoBadge = <Icon name=\"Info\" size={50} color=\"primary.c100\" weight=\"Medium\" />;\n\n  return (\n    <FlexBox justifyContent=\"center\">\n      <FlexBox width=\"502px\" flexDirection=\"column\" rowGap={5}>\n        <StatusNotification {...props} badge={warningBadge} hasBorder />\n        <StatusNotification {...props} badge={infoBadge} />\n        <StatusNotification {...props} badge={warningBadge} hasBorder />\n        <StatusNotification {...props} badge={infoBadge} />\n      </FlexBox>\n    </FlexBox>\n  );\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,kBAAiB;AACjB,kBAAoB;AACpB,mBAA0C;AAE1C,IAAO,qCAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,MAAM;AAAA,IACR;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,IACA,WAAW,EAAE,SAAS,MAAM;AAAA,IAC5B,QAAQ,EAAE,SAAS,MAAM;AAAA,IACzB,WAAW,EAAE,MAAM,UAAU;AAAA,IAC7B,OAAO,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,IAClC,IAAI,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,IAC/B,aAAa,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,EAC1C;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,EACR;AACF;AAEO,SAAS,oBAAoB,MAAgD;AAClF,QAAM,EAAE,GAAG,MAAM,IAAI;AAErB,QAAM,eAAe,6BAAAC,QAAA,cAAC,YAAAC,SAAA,EAAK,MAAK,WAAU,MAAM,IAAI,OAAM,aAAY,QAAO,UAAS;AACtF,QAAM,YAAY,6BAAAD,QAAA,cAAC,YAAAC,SAAA,EAAK,MAAK,QAAO,MAAM,IAAI,OAAM,gBAAe,QAAO,UAAS;AAEnF,SACE,6BAAAD,QAAA,cAAC,YAAAE,SAAA,EAAQ,gBAAe,YACtB,6BAAAF,QAAA,cAAC,YAAAE,SAAA,EAAQ,OAAM,SAAQ,eAAc,UAAS,QAAQ,KACpD,6BAAAF,QAAA,cAAC,aAAAD,SAAA,EAAoB,GAAG,OAAO,OAAO,cAAc,WAAS,MAAC,GAC9D,6BAAAC,QAAA,cAAC,aAAAD,SAAA,EAAoB,GAAG,OAAO,OAAO,WAAW,GACjD,6BAAAC,QAAA,cAAC,aAAAD,SAAA,EAAoB,GAAG,OAAO,OAAO,cAAc,WAAS,MAAC,GAC9D,6BAAAC,QAAA,cAAC,aAAAD,SAAA,EAAoB,GAAG,OAAO,OAAO,WAAW,CACnD,CACF;AAEJ;",
   "names": ["StatusNotification", "React", "Icon", "FlexBox"]
 }

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

@@ -46,9 +46,12 @@ var Tip_stories_default = {
     label: {
       control: {
         type: "text"
-      },
-      defaultValue: "Label"
+      }
     }
+  },
+  args: {
+    type: "sucess",
+    label: "Label"
   }
 };
 const Default = (args) => {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/message/Tip/Tip.stories.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport Tip, { TipProps } from \"./index\";\nexport default {\n  title: \"Messages/Tips\",\n  argTypes: {\n    type: {\n      options: [\"success\", \"warning\", \"error\", undefined],\n      control: {\n        type: \"radio\",\n      },\n    },\n    label: {\n      control: {\n        type: \"text\",\n      },\n      defaultValue: \"Label\",\n    },\n  },\n};\n\nexport const Default = (args: TipProps): JSX.Element => {\n  return <Tip {...args} />;\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,mBAA8B;AAC9B,IAAO,sBAAQ;AAAA,EACb,OAAO;AAAA,EACP,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,SAAS,CAAC,WAAW,WAAW,SAAS,MAAS;AAAA,MAClD,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,EACF;AACF;AAEO,MAAM,UAAU,CAAC,SAAgC;AACtD,SAAO,6BAAAA,QAAA,cAAC,aAAAC,SAAA,EAAK,GAAG,MAAM;AACxB;",
+  "sourcesContent": ["import React from \"react\";\nimport Tip, { TipProps } from \"./index\";\n\nexport default {\n  title: \"Messages/Tips\",\n  argTypes: {\n    type: {\n      options: [\"success\", \"warning\", \"error\", undefined],\n      control: {\n        type: \"radio\",\n      },\n    },\n    label: {\n      control: {\n        type: \"text\",\n      },\n    },\n  },\n  args: {\n    type: \"sucess\",\n    label: \"Label\",\n  },\n};\n\nexport const Default = (args: TipProps): JSX.Element => {\n  return <Tip {...args} />;\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,mBAA8B;AAE9B,IAAO,sBAAQ;AAAA,EACb,OAAO;AAAA,EACP,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,SAAS,CAAC,WAAW,WAAW,SAAS,MAAS;AAAA,MAClD,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,IACF;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AACF;AAEO,MAAM,UAAU,CAAC,SAAgC;AACtD,SAAO,6BAAAA,QAAA,cAAC,aAAAC,SAAA,EAAK,GAAG,MAAM;AACxB;",
   "names": ["React", "Tip"]
 }

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

@@ -76,7 +76,7 @@ var Tooltip_stories_default = {
     }
   },
   argTypes: {
-    content: { type: "string", defaultValue: "Hello World!" },
+    content: { type: "string" },
     visible: { options: [true, false, void 0] },
     disabled: { type: "boolean" },
     placement: {
@@ -99,6 +99,9 @@ var Tooltip_stories_default = {
         "auto-end"
       ]
     }
+  },
+  args: {
+    content: "Hello World!"
   }
 };
 const Tooltip = (args) => /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { alignItems: "center", justifyContent: "center" }, /* @__PURE__ */ import_react.default.createElement(import_index.default, { ...args }, /* @__PURE__ */ import_react.default.createElement("div", { style: { margin: "50px" } }, /* @__PURE__ */ import_react.default.createElement(

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/message/Tooltip/Tooltip.stories.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport { StoryTemplate } from \"src/components/helpers\";\n\nimport Text from \"../../asorted/Text\";\nimport FlexBox from \"../../layout/Flex\";\nimport TooltipComponent, { Props } from \"./index\";\n\nconst description = `\n### Tooltips display informative text when users hover over an element.\n\nThis component is based on [tippyjs](https://atomiks.github.io/tippyjs/) which is powerful library.\nPlease check [the documentation](https://github.com/atomiks/tippyjs-react#-props) for the full props list and usage.\n\n## Usage\n\n\\`\\`\\`js\n\nimport { Tooltip } from \"@ledgerhq/react-ui\"\n\n\\`\\`\\`\n\nWrap some jsx that will make the tooltip visible on mouse over.<br/>\n_**Note:** this jsx will automatically be wrapped inside a \\`span\\` element if the ref cannot be forwarded. \\\nSee [here](https://github.com/atomiks/tippyjs-react#component-children) for a detailed explanation._\n\nTo set the tooltip inner contents, use the \\`content\\` prop.\n\n\\`\\`\\`js\n<Tooltip content=\"Hello!\" {...props}>\n  <div>Hover me</div>\n</Tooltip>\n\\`\\`\\`\n\n## Sandbox\n\nPlacement, style and content can be customized using props as demonstrated in the following example.\n`;\n\nexport default {\n  title: \"Messages/Tooltip\",\n  component: TooltipComponent,\n  parameters: {\n    docs: {\n      description: {\n        component: description,\n      },\n    },\n  },\n  argTypes: {\n    content: { type: \"string\", defaultValue: \"Hello World!\" },\n    visible: { options: [true, false, undefined] },\n    disabled: { type: \"boolean\" },\n    placement: {\n      control: { type: \"radio\" },\n      options: [\n        \"top\",\n        \"top-start\",\n        \"top-end\",\n        \"right\",\n        \"right-start\",\n        \"right-end\",\n        \"bottom\",\n        \"bottom-start\",\n        \"bottom-end\",\n        \"left\",\n        \"left-start\",\n        \"left-end\",\n        \"auto\",\n        \"auto-start\",\n        \"auto-end\",\n      ],\n    },\n  },\n};\n\nexport const Tooltip: StoryTemplate<Props> = args => (\n  <FlexBox alignItems=\"center\" justifyContent=\"center\">\n    <TooltipComponent {...args}>\n      <div style={{ margin: \"50px\" }}>\n        <Text\n          as=\"div\"\n          fontWeight=\"semiBold\"\n          color=\"neutral.c100\"\n          style={{ border: \"2px solid #AAA\", borderRadius: \"5px\" }}\n          p={10}\n          textAlign=\"center\"\n        >\n          Hover\n          <br />\n          me\n        </Text>\n      </div>\n    </TooltipComponent>\n  </FlexBox>\n);\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAGlB,kBAAiB;AACjB,kBAAoB;AACpB,mBAAwC;AAExC,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;AA+BpB,IAAO,0BAAQ;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,SAAS,EAAE,MAAM,UAAU,cAAc,eAAe;AAAA,IACxD,SAAS,EAAE,SAAS,CAAC,MAAM,OAAO,MAAS,EAAE;AAAA,IAC7C,UAAU,EAAE,MAAM,UAAU;AAAA,IAC5B,WAAW;AAAA,MACT,SAAS,EAAE,MAAM,QAAQ;AAAA,MACzB,SAAS;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;AAEO,MAAM,UAAgC,UAC3C,6BAAAC,QAAA,cAAC,YAAAC,SAAA,EAAQ,YAAW,UAAS,gBAAe,YAC1C,6BAAAD,QAAA,cAAC,aAAAD,SAAA,EAAkB,GAAG,QACpB,6BAAAC,QAAA,cAAC,SAAI,OAAO,EAAE,QAAQ,OAAO,KAC3B,6BAAAA,QAAA;AAAA,EAAC,YAAAE;AAAA,EAAA;AAAA,IACC,IAAG;AAAA,IACH,YAAW;AAAA,IACX,OAAM;AAAA,IACN,OAAO,EAAE,QAAQ,kBAAkB,cAAc,MAAM;AAAA,IACvD,GAAG;AAAA,IACH,WAAU;AAAA;AAAA,EACX;AAAA,EAEC,6BAAAF,QAAA,cAAC,UAAG;AAAA,EAAE;AAER,CACF,CACF,CACF;",
+  "sourcesContent": ["import React from \"react\";\nimport { StoryTemplate } from \"src/components/helpers\";\n\nimport Text from \"../../asorted/Text\";\nimport FlexBox from \"../../layout/Flex\";\nimport TooltipComponent, { Props } from \"./index\";\n\nconst description = `\n### Tooltips display informative text when users hover over an element.\n\nThis component is based on [tippyjs](https://atomiks.github.io/tippyjs/) which is powerful library.\nPlease check [the documentation](https://github.com/atomiks/tippyjs-react#-props) for the full props list and usage.\n\n## Usage\n\n\\`\\`\\`js\n\nimport { Tooltip } from \"@ledgerhq/react-ui\"\n\n\\`\\`\\`\n\nWrap some jsx that will make the tooltip visible on mouse over.<br/>\n_**Note:** this jsx will automatically be wrapped inside a \\`span\\` element if the ref cannot be forwarded. \\\nSee [here](https://github.com/atomiks/tippyjs-react#component-children) for a detailed explanation._\n\nTo set the tooltip inner contents, use the \\`content\\` prop.\n\n\\`\\`\\`js\n<Tooltip content=\"Hello!\" {...props}>\n  <div>Hover me</div>\n</Tooltip>\n\\`\\`\\`\n\n## Sandbox\n\nPlacement, style and content can be customized using props as demonstrated in the following example.\n`;\n\nexport default {\n  title: \"Messages/Tooltip\",\n  component: TooltipComponent,\n  parameters: {\n    docs: {\n      description: {\n        component: description,\n      },\n    },\n  },\n  argTypes: {\n    content: { type: \"string\" },\n    visible: { options: [true, false, undefined] },\n    disabled: { type: \"boolean\" },\n    placement: {\n      control: { type: \"radio\" },\n      options: [\n        \"top\",\n        \"top-start\",\n        \"top-end\",\n        \"right\",\n        \"right-start\",\n        \"right-end\",\n        \"bottom\",\n        \"bottom-start\",\n        \"bottom-end\",\n        \"left\",\n        \"left-start\",\n        \"left-end\",\n        \"auto\",\n        \"auto-start\",\n        \"auto-end\",\n      ],\n    },\n  },\n  args: {\n    content: \"Hello World!\",\n  },\n};\n\nexport const Tooltip: StoryTemplate<Props> = args => (\n  <FlexBox alignItems=\"center\" justifyContent=\"center\">\n    <TooltipComponent {...args}>\n      <div style={{ margin: \"50px\" }}>\n        <Text\n          as=\"div\"\n          fontWeight=\"semiBold\"\n          color=\"neutral.c100\"\n          style={{ border: \"2px solid #AAA\", borderRadius: \"5px\" }}\n          p={10}\n          textAlign=\"center\"\n        >\n          Hover\n          <br />\n          me\n        </Text>\n      </div>\n    </TooltipComponent>\n  </FlexBox>\n);\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAGlB,kBAAiB;AACjB,kBAAoB;AACpB,mBAAwC;AAExC,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;AA+BpB,IAAO,0BAAQ;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,SAAS,EAAE,MAAM,SAAS;AAAA,IAC1B,SAAS,EAAE,SAAS,CAAC,MAAM,OAAO,MAAS,EAAE;AAAA,IAC7C,UAAU,EAAE,MAAM,UAAU;AAAA,IAC5B,WAAW;AAAA,MACT,SAAS,EAAE,MAAM,QAAQ;AAAA,MACzB,SAAS;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA,EACX;AACF;AAEO,MAAM,UAAgC,UAC3C,6BAAAC,QAAA,cAAC,YAAAC,SAAA,EAAQ,YAAW,UAAS,gBAAe,YAC1C,6BAAAD,QAAA,cAAC,aAAAD,SAAA,EAAkB,GAAG,QACpB,6BAAAC,QAAA,cAAC,SAAI,OAAO,EAAE,QAAQ,OAAO,KAC3B,6BAAAA,QAAA;AAAA,EAAC,YAAAE;AAAA,EAAA;AAAA,IACC,IAAG;AAAA,IACH,YAAW;AAAA,IACX,OAAM;AAAA,IACN,OAAO,EAAE,QAAQ,kBAAkB,cAAc,MAAM;AAAA,IACvD,GAAG;AAAA,IACH,WAAU;AAAA;AAAA,EACX;AAAA,EAEC,6BAAAF,QAAA,cAAC,UAAG;AAAA,EAAE;AAER,CACF,CACF,CACF;",
   "names": ["TooltipComponent", "React", "FlexBox", "Text"]
 }

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

@@ -150,7 +150,7 @@ var FlowStepper_stories_default = {
   title: "Navigation/FlowStepper",
   component: import__.FlowStepper,
   argTypes: {
-    activeIndex: { control: "number", defaultValue: 0 },
+    activeIndex: { control: "number" },
     extraProps: { control: "disabled" },
     extraContainerProps: { control: "disabled" },
     extraStepperProps: { control: "disabled" },
@@ -164,6 +164,9 @@ var FlowStepper_stories_default = {
     stepFooters: { control: "disabled" },
     renderStepFooter: { control: "disabled" }
   },
+  args: {
+    activeIndex: 0
+  },
   parameters: {
     docs: {
       description: {