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

package/lib/cjs/components/form/DropdownGeneric/DropdownGeneric.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/form/DropdownGeneric/DropdownGeneric.stories.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport Flex from \"../../layout/Flex\";\nimport Box from \"../../layout/Box\";\nimport Text from \"../../asorted/Text\";\nimport Alert from \"../../message/Alert\";\nimport DropdownGenericComponent, { Props as DropdownGenericProps } from \".\";\nimport Divider from \"../../asorted/Divider\";\n\nconst SmallChild = () => (\n  <Flex\n    height={200}\n    width={180}\n    padding={10}\n    backgroundColor=\"neutral.c30\"\n    justifyContent=\"center\"\n    alignItems=\"center\"\n  >\n    <Text variant=\"small\" color=\"neutral.c60\" textAlign=\"center\">\n      I'm a simple div with a grey background and no margin passed as children of the dropdown\n      component.\n    </Text>\n  </Flex>\n);\n\nconst BigChild = ({ containerProps }: { containerProps?: Record<string, unknown> }) => (\n  <Box\n    padding={10}\n    flexDirection=\"column\"\n    width=\"300px\"\n    justifyContent=\"center\"\n    alignItems=\"center\"\n    {...containerProps}\n  >\n    <Text variant=\"small\" color=\"neutral.c60\" textAlign=\"center\">\n      If the children node of the dropdown is bigger than the available space, the dropdown will\n      restrict its own height to avoid overflowing and its inner container will scroll.\n    </Text>\n    <Box height=\"100px\" width=\"100%\" backgroundColor=\"primary.c100\" />\n    <Box height=\"100px\" width=\"100%\" backgroundColor=\"primary.c90\" />\n    <Box height=\"100px\" width=\"100%\" backgroundColor=\"primary.c80\" />\n    <Box height=\"100px\" width=\"100%\" backgroundColor=\"primary.c70\" />\n    <Box height=\"100px\" width=\"100%\" backgroundColor=\"primary.c60\" />\n  </Box>\n);\n\nconst BottomPlaceholder = () => (\n  <Flex\n    width=\"100%\"\n    height=\"100px\"\n    backgroundColor=\"neutral.c30\"\n    justifyContent=\"center\"\n    alignItems=\"center\"\n    padding={20}\n  >\n    <Text variant=\"small\" color=\"palette.neutral.c50\" textAlign=\"center\">\n      Ignore me, I'm just an item placed below to illustrate that the dropdown is a floating\n      component\n    </Text>\n  </Flex>\n);\n\nconst DropdownStoryTemplate = (\n  props: Omit<DropdownGenericProps, \"children\"> & {\n    big?: boolean;\n    bigWithMaxHeight?: boolean;\n    containerProps: Record<string, unknown>;\n  },\n) => {\n  const { containerProps = {}, big = false, bigWithMaxHeight = false, ...rest } = props;\n  return (\n    <Flex flexDirection=\"column\" {...containerProps}>\n      <DropdownGenericComponent {...rest}>\n        {big ? (\n          bigWithMaxHeight ? (\n            <BigChild containerProps={{ maxHeight: \"400px\", overflow: \"scroll\" }} />\n          ) : (\n            <BigChild />\n          )\n        ) : (\n          <SmallChild />\n        )}\n      </DropdownGenericComponent>\n      <BottomPlaceholder />\n    </Flex>\n  );\n};\n\nexport const DropdownGeneric = (args: DropdownGenericProps): React.ReactNode => {\n  const alignItemsPossibilities = [\"flex-start\", \"center\", \"flex-end\"];\n  const containerPropsPossibilities = alignItemsPossibilities.map(alignItems => ({ alignItems }));\n  return (\n    <Flex flexDirection=\"column\" rowGap={5}>\n      {/**\n       * Calling DropdownTemplate as a function here to trick storybook into displaying\n       * the actual code in \"show code\" instead of an opaque \"DropdownTemplate\" component\n       *  */}\n      <Text variant=\"h5\">Small content:</Text>\n      {containerPropsPossibilities.map(containerProps =>\n        DropdownStoryTemplate({ ...args, containerProps }),\n      )}\n      <Divider />\n      <Text variant=\"h5\">Big content:</Text>\n      {containerPropsPossibilities.map(containerProps =>\n        DropdownStoryTemplate({ ...args, big: true, containerProps }),\n      )}\n      <Divider />\n      <Text variant=\"h5\">Big content (max height on child)</Text>\n      <Alert\n        type=\"info\"\n        title=\"In the following examples, the component passed as a child has its own internal maxHeight\n        setup\"\n      ></Alert>\n      {containerPropsPossibilities.map(containerProps =>\n        DropdownStoryTemplate({ ...args, big: true, bigWithMaxHeight: true, containerProps }),\n      )}\n    </Flex>\n  );\n};\n\nexport default {\n  title: \"Form/SelectAndDialogs\",\n  component: DropdownGenericComponent,\n  argTypes: {\n    label: { type: \"string\", defaultValue: \"Label\" },\n    placement: { control: { type: \"select\", defaultValue: \"bottom\" } },\n    closeOnClickOutside: { type: \"boolean\", defaultValue: true },\n    closeOnClickInside: { type: \"boolean\", defaultValue: false },\n    disabled: { type: \"boolean\", defaultValue: false },\n    flipDisabled: { type: \"boolean\", defaultValue: false },\n  },\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React from \"react\";\nimport Flex from \"../../layout/Flex\";\nimport Box from \"../../layout/Box\";\nimport Text from \"../../asorted/Text\";\nimport Alert from \"../../message/Alert\";\nimport DropdownGenericComponent, { Props as DropdownGenericProps } from \".\";\nimport Divider from \"../../asorted/Divider\";\n\nconst SmallChild = () => (\n  <Flex\n    height={200}\n    width={180}\n    padding={10}\n    backgroundColor=\"neutral.c30\"\n    justifyContent=\"center\"\n    alignItems=\"center\"\n  >\n    <Text variant=\"small\" color=\"neutral.c60\" textAlign=\"center\">\n      I'm a simple div with a grey background and no margin passed as children of the dropdown\n      component.\n    </Text>\n  </Flex>\n);\n\nconst BigChild = ({ containerProps }: { containerProps?: Record<string, unknown> }) => (\n  <Box\n    padding={10}\n    flexDirection=\"column\"\n    width=\"300px\"\n    justifyContent=\"center\"\n    alignItems=\"center\"\n    {...containerProps}\n  >\n    <Text variant=\"small\" color=\"neutral.c60\" textAlign=\"center\">\n      If the children node of the dropdown is bigger than the available space, the dropdown will\n      restrict its own height to avoid overflowing and its inner container will scroll.\n    </Text>\n    <Box height=\"100px\" width=\"100%\" backgroundColor=\"primary.c100\" />\n    <Box height=\"100px\" width=\"100%\" backgroundColor=\"primary.c90\" />\n    <Box height=\"100px\" width=\"100%\" backgroundColor=\"primary.c80\" />\n    <Box height=\"100px\" width=\"100%\" backgroundColor=\"primary.c70\" />\n    <Box height=\"100px\" width=\"100%\" backgroundColor=\"primary.c60\" />\n  </Box>\n);\n\nconst BottomPlaceholder = () => (\n  <Flex\n    width=\"100%\"\n    height=\"100px\"\n    backgroundColor=\"neutral.c30\"\n    justifyContent=\"center\"\n    alignItems=\"center\"\n    padding={20}\n  >\n    <Text variant=\"small\" color=\"palette.neutral.c50\" textAlign=\"center\">\n      Ignore me, I'm just an item placed below to illustrate that the dropdown is a floating\n      component\n    </Text>\n  </Flex>\n);\n\nconst DropdownStoryTemplate = (\n  props: Omit<DropdownGenericProps, \"children\"> & {\n    big?: boolean;\n    bigWithMaxHeight?: boolean;\n    containerProps: Record<string, unknown>;\n  },\n) => {\n  const { containerProps = {}, big = false, bigWithMaxHeight = false, ...rest } = props;\n  return (\n    <Flex flexDirection=\"column\" {...containerProps}>\n      <DropdownGenericComponent {...rest}>\n        {big ? (\n          bigWithMaxHeight ? (\n            <BigChild containerProps={{ maxHeight: \"400px\", overflow: \"scroll\" }} />\n          ) : (\n            <BigChild />\n          )\n        ) : (\n          <SmallChild />\n        )}\n      </DropdownGenericComponent>\n      <BottomPlaceholder />\n    </Flex>\n  );\n};\n\nexport const DropdownGeneric = (args: DropdownGenericProps): React.ReactNode => {\n  const alignItemsPossibilities = [\"flex-start\", \"center\", \"flex-end\"];\n  const containerPropsPossibilities = alignItemsPossibilities.map(alignItems => ({ alignItems }));\n  return (\n    <Flex flexDirection=\"column\" rowGap={5}>\n      {/**\n       * Calling DropdownTemplate as a function here to trick storybook into displaying\n       * the actual code in \"show code\" instead of an opaque \"DropdownTemplate\" component\n       *  */}\n      <Text variant=\"h5\">Small content:</Text>\n      {containerPropsPossibilities.map(containerProps =>\n        DropdownStoryTemplate({ ...args, containerProps }),\n      )}\n      <Divider />\n      <Text variant=\"h5\">Big content:</Text>\n      {containerPropsPossibilities.map(containerProps =>\n        DropdownStoryTemplate({ ...args, big: true, containerProps }),\n      )}\n      <Divider />\n      <Text variant=\"h5\">Big content (max height on child)</Text>\n      <Alert\n        type=\"info\"\n        title=\"In the following examples, the component passed as a child has its own internal maxHeight\n        setup\"\n      ></Alert>\n      {containerPropsPossibilities.map(containerProps =>\n        DropdownStoryTemplate({ ...args, big: true, bigWithMaxHeight: true, containerProps }),\n      )}\n    </Flex>\n  );\n};\n\nexport default {\n  title: \"Form/SelectAndDialogs\",\n  component: DropdownGenericComponent,\n  argTypes: {\n    label: { type: \"string\" },\n    placement: { control: { type: \"select\" } },\n    closeOnClickOutside: { type: \"boolean\" },\n    closeOnClickInside: { type: \"boolean\" },\n    disabled: { type: \"boolean\" },\n    flipDisabled: { type: \"boolean\" },\n  },\n  args: {\n    label: \"Label\",\n    placement: \"bottom\",\n    closeOnClickOutside: true,\n    closeOnClickInside: false,\n    disabled: false,\n    flipDisabled: false,\n  },\n};\n"],
+  "mappings": "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",
   "names": ["React", "Flex", "Text", "Box", "DropdownGenericComponent", "Divider", "Alert"]
 }

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

@@ -41,25 +41,32 @@ var Box_stories_default = {
     backgroundColor: {
       type: "text",
       control: "color",
-      defaultValue: "#0EBDCD",
       description: "This property defines the backgroundColor of the box. This property any color format."
     },
     width: {
       type: "text",
-      defaultValue: "200px",
       description: "Width of the box."
     },
     py: {
       type: "text",
-      defaultValue: "20px",
       description: "Padding top and bottom."
     },
+    px: {
+      type: "text",
+      description: "Padding left and right."
+    },
     mx: {
       type: "text",
-      defaultValue: "20px",
       description: "Margin left and right."
     }
   },
+  args: {
+    backgroundColor: "#0EBDCD",
+    width: "200px",
+    py: "20px",
+    px: "20px",
+    mx: "20px"
+  },
   parameters: {
     docs: {
       description: {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/layout/Box/Box.stories.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport Box, { BoxProps } from \".\";\nexport default {\n  title: \"Layout/Box\",\n  component: Box,\n  argTypes: {\n    backgroundColor: {\n      type: \"text\",\n      control: \"color\",\n      defaultValue: \"#0EBDCD\",\n      description:\n        \"This property defines the backgroundColor of the box. This property any color format.\",\n    },\n    width: {\n      type: \"text\",\n      defaultValue: \"200px\",\n      description: \"Width of the box.\",\n    },\n    py: {\n      type: \"text\",\n      defaultValue: \"20px\",\n      description: \"Padding top and bottom.\",\n    },\n    mx: {\n      type: \"text\",\n      defaultValue: \"20px\",\n      description: \"Margin left and right.\",\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        component: `The Box component is a helper component that lets you write these common css properties more succinctly and inline.\n      \nIt include all the style props exported by the color, layout, position, shadow utilities, and some of the flexbox utility, from the [styled-system](https://styled-system.com) library.\n      \n[See more about styled-system utilities](https://styled-system.com/api)`,\n      },\n    },\n    actions: { argTypesRegex: false },\n  },\n};\n\nconst Template = (args: BoxProps) => (\n  <Box {...args}>\n    A plain good ol'box with fixed width, backgroundColor, padding and margin, all by using inline\n    props\n  </Box>\n);\n\nexport const Default = Template.bind({});\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,eAA8B;AAC9B,IAAO,sBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,SAAAA;AAAA,EACX,UAAU;AAAA,IACR,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,SAAS;AAAA,MACT,cAAc;AAAA,MACd,aACE;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,MACL,MAAM;AAAA,MACN,cAAc;AAAA,MACd,aAAa;AAAA,IACf;AAAA,IACA,IAAI;AAAA,MACF,MAAM;AAAA,MACN,cAAc;AAAA,MACd,aAAa;AAAA,IACf;AAAA,IACA,IAAI;AAAA,MACF,MAAM;AAAA,MACN,cAAc;AAAA,MACd,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,MAAM;AAAA,MACJ,aAAa;AAAA,QACX,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,MAKb;AAAA,IACF;AAAA,IACA,SAAS,EAAE,eAAe,MAAM;AAAA,EAClC;AACF;AAEA,MAAM,WAAW,CAAC,SAChB,6BAAAC,QAAA,cAAC,SAAAD,SAAA,EAAK,GAAG,QAAM,sGAGf;AAGK,MAAM,UAAU,SAAS,KAAK,CAAC,CAAC;",
+  "sourcesContent": ["import React from \"react\";\nimport Box, { BoxProps } from \".\";\nexport default {\n  title: \"Layout/Box\",\n  component: Box,\n  argTypes: {\n    backgroundColor: {\n      type: \"text\",\n      control: \"color\",\n      description:\n        \"This property defines the backgroundColor of the box. This property any color format.\",\n    },\n    width: {\n      type: \"text\",\n      description: \"Width of the box.\",\n    },\n    py: {\n      type: \"text\",\n      description: \"Padding top and bottom.\",\n    },\n    px: {\n      type: \"text\",\n      description: \"Padding left and right.\",\n    },\n    mx: {\n      type: \"text\",\n      description: \"Margin left and right.\",\n    },\n  },\n  args: {\n    backgroundColor: \"#0EBDCD\",\n    width: \"200px\",\n    py: \"20px\",\n    px: \"20px\",\n    mx: \"20px\",\n  },\n  parameters: {\n    docs: {\n      description: {\n        component: `The Box component is a helper component that lets you write these common css properties more succinctly and inline.\n      \nIt include all the style props exported by the color, layout, position, shadow utilities, and some of the flexbox utility, from the [styled-system](https://styled-system.com) library.\n      \n[See more about styled-system utilities](https://styled-system.com/api)`,\n      },\n    },\n    actions: { argTypesRegex: false },\n  },\n};\n\nconst Template = (args: BoxProps) => (\n  <Box {...args}>\n    A plain good ol'box with fixed width, backgroundColor, padding and margin, all by using inline\n    props\n  </Box>\n);\n\nexport const Default = Template.bind({});\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,eAA8B;AAC9B,IAAO,sBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,SAAAA;AAAA,EACX,UAAU;AAAA,IACR,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,SAAS;AAAA,MACT,aACE;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,MACL,MAAM;AAAA,MACN,aAAa;AAAA,IACf;AAAA,IACA,IAAI;AAAA,MACF,MAAM;AAAA,MACN,aAAa;AAAA,IACf;AAAA,IACA,IAAI;AAAA,MACF,MAAM;AAAA,MACN,aAAa;AAAA,IACf;AAAA,IACA,IAAI;AAAA,MACF,MAAM;AAAA,MACN,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,iBAAiB;AAAA,IACjB,OAAO;AAAA,IACP,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAAA,EACA,YAAY;AAAA,IACV,MAAM;AAAA,MACJ,aAAa;AAAA,QACX,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,MAKb;AAAA,IACF;AAAA,IACA,SAAS,EAAE,eAAe,MAAM;AAAA,EAClC;AACF;AAEA,MAAM,WAAW,CAAC,SAChB,6BAAAC,QAAA,cAAC,SAAAD,SAAA,EAAK,GAAG,QAAM,sGAGf;AAGK,MAAM,UAAU,SAAS,KAAK,CAAC,CAAC;",
   "names": ["Box", "React"]
 }

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

@@ -36,6 +36,7 @@ var import_styled_components = __toESM(require("styled-components"));
 var import__2 = require("../..");
 var import__3 = require("../../..");
 var import_Tag = __toESM(require("../../../Tag"));
+var import_InfiniteLoader = __toESM(require("../../../loaders/InfiniteLoader"));
 var import_TimelineIndicator = __toESM(require("./TimelineIndicator"));
 const getContainerBackground = (theme, status) => {
   if (status === "completed") {
@@ -94,7 +95,7 @@ function TimelineItem({ item, isFirstItem, isLastItem, onClick }) {
       textProps: { color: colors.neutral.c100 }
     },
     `${item.estimatedTime / 60} min`
-  )), item.renderBody && item.status === "active" && /* @__PURE__ */ import_react.default.createElement(import__2.Box, { position: "relative", pt: 6 }, item.renderBody(item.status === "active"))));
+  ) || (item == null ? void 0 : item.hasLoader) && item.status === "active" && /* @__PURE__ */ import_react.default.createElement(import_InfiniteLoader.default, { size: 30 })), item.renderBody && item.status === "active" && /* @__PURE__ */ import_react.default.createElement(import__2.Box, { position: "relative", pt: 6 }, item.renderBody(item.status === "active"))));
 }
 var TimelineItem_default = import_react.default.memo(TimelineItem);
 //# sourceMappingURL=TimelineItem.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/components/layout/List/VerticalTimeline/TimelineItem.tsx"],
-  "sourcesContent": ["import React from \"react\";\n\nimport { Theme } from \"../../../../styles/theme\";\nimport styled, { useTheme } from \"styled-components\";\n\nimport { Item, ItemStatus } from \".\";\nimport { Flex, Box } from \"../..\";\nimport { Text } from \"../../..\";\nimport Tag from \"../../../Tag\";\n\nimport TimelineIndicator from \"./TimelineIndicator\";\n\nexport type Props = {\n  item: Item;\n  isFirstItem?: boolean;\n  isLastItem?: boolean;\n  onClick?: () => void;\n};\n\nconst getContainerBackground = (theme: Theme, status: ItemStatus) => {\n  if (status === \"completed\") {\n    return \"transparent\";\n  } else if (status === \"active\") {\n    return theme.colors.neutral.c20;\n  }\n  return \"transparent\";\n};\n\nconst getContainerBorder = (theme: Theme, status: ItemStatus, isLastItem?: boolean) => {\n  if (status === \"completed\") {\n    return \"transparent\";\n  } else if (isLastItem && status === \"active\") {\n    return theme.colors.success.c50;\n  } else if (status === \"active\") {\n    return theme.colors.neutral.c40;\n  }\n  return \"transparent\";\n};\n\nconst Container = styled(Flex)<{ status: ItemStatus; isLastItem?: boolean }>`\n  flex: 1;\n  border-radius: ${p => p.theme.radii[2]}px;\n  background: ${p => getContainerBackground(p.theme, p.status)};\n  border: 1px solid ${p => getContainerBorder(p.theme, p.status, p.isLastItem)};\n  padding: 20px 16px;\n`;\n\nconst TimelineIndicatorContentHeader = styled(Flex)`\n  justify-content: space-between;\n  align-items: center;\n`;\n\nfunction TimelineItem({ item, isFirstItem, isLastItem, onClick }: Props) {\n  const { colors } = useTheme();\n\n  return (\n    <Flex flexDirection=\"row\" onClick={onClick} flex={1}>\n      <TimelineIndicator\n        status={item.status}\n        isFirstItem={isFirstItem}\n        isLastItem={isLastItem}\n        mr={4}\n      />\n      <Container status={item.status} isLastItem={isLastItem} mb={4} flexDirection=\"column\">\n        <TimelineIndicatorContentHeader height=\"20px\">\n          <Text\n            variant=\"body\"\n            fontWeight={item.status === \"active\" ? \"semiBold\" : \"medium\"}\n            color={\n              item.status !== \"inactive\" && isLastItem\n                ? \"success.c70\"\n                : item.status === \"active\"\n                ? \"primary.c80\"\n                : \"neutral.c70\"\n            }\n          >\n            {item.title}\n          </Text>\n          {item?.estimatedTime && item.status === \"active\" && (\n            <Tag\n              size=\"small\"\n              type=\"opacity\"\n              active\n              disabled\n              textProps={{ color: colors.neutral.c100 }}\n            >{`${item.estimatedTime / 60} min`}</Tag>\n          )}\n        </TimelineIndicatorContentHeader>\n        {item.renderBody && item.status === \"active\" && (\n          <Box position=\"relative\" pt={6}>\n            {item.renderBody(item.status === \"active\")}\n          </Box>\n        )}\n      </Container>\n    </Flex>\n  );\n}\n\nexport default React.memo(TimelineItem);\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAGlB,+BAAiC;AAGjC,IAAAA,YAA0B;AAC1B,IAAAA,YAAqB;AACrB,iBAAgB;AAEhB,+BAA8B;AAS9B,MAAM,yBAAyB,CAAC,OAAc,WAAuB;AACnE,MAAI,WAAW,aAAa;AAC1B,WAAO;AAAA,EACT,WAAW,WAAW,UAAU;AAC9B,WAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B;AACA,SAAO;AACT;AAEA,MAAM,qBAAqB,CAAC,OAAc,QAAoB,eAAyB;AACrF,MAAI,WAAW,aAAa;AAC1B,WAAO;AAAA,EACT,WAAW,cAAc,WAAW,UAAU;AAC5C,WAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B,WAAW,WAAW,UAAU;AAC9B,WAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B;AACA,SAAO;AACT;AAEA,MAAM,gBAAY,yBAAAC,SAAO,cAAI;AAAA;AAAA,mBAEV,OAAK,EAAE,MAAM,MAAM,CAAC,CAAC;AAAA,gBACxB,OAAK,uBAAuB,EAAE,OAAO,EAAE,MAAM,CAAC;AAAA,sBACxC,OAAK,mBAAmB,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,CAAC;AAAA;AAAA;AAI9E,MAAM,qCAAiC,yBAAAA,SAAO,cAAI;AAAA;AAAA;AAAA;AAKlD,SAAS,aAAa,EAAE,MAAM,aAAa,YAAY,QAAQ,GAAU;AACvE,QAAM,EAAE,OAAO,QAAI,mCAAS;AAE5B,SACE,6BAAAC,QAAA,cAAC,kBAAK,eAAc,OAAM,SAAkB,MAAM,KAChD,6BAAAA,QAAA;AAAA,IAAC,yBAAAC;AAAA,IAAA;AAAA,MACC,QAAQ,KAAK;AAAA,MACb;AAAA,MACA;AAAA,MACA,IAAI;AAAA;AAAA,EACN,GACA,6BAAAD,QAAA,cAAC,aAAU,QAAQ,KAAK,QAAQ,YAAwB,IAAI,GAAG,eAAc,YAC3E,6BAAAA,QAAA,cAAC,kCAA+B,QAAO,UACrC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,YAAY,KAAK,WAAW,WAAW,aAAa;AAAA,MACpD,OACE,KAAK,WAAW,cAAc,aAC1B,gBACA,KAAK,WAAW,WAChB,gBACA;AAAA;AAAA,IAGL,KAAK;AAAA,EACR,IACC,6BAAM,kBAAiB,KAAK,WAAW,YACtC,6BAAAA,QAAA;AAAA,IAAC,WAAAE;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,MAAK;AAAA,MACL,QAAM;AAAA,MACN,UAAQ;AAAA,MACR,WAAW,EAAE,OAAO,OAAO,QAAQ,KAAK;AAAA;AAAA,IACxC,GAAG,KAAK,gBAAgB,EAAE;AAAA,EAAO,CAEvC,GACC,KAAK,cAAc,KAAK,WAAW,YAClC,6BAAAF,QAAA,cAAC,iBAAI,UAAS,YAAW,IAAI,KAC1B,KAAK,WAAW,KAAK,WAAW,QAAQ,CAC3C,CAEJ,CACF;AAEJ;AAEA,IAAO,uBAAQ,aAAAA,QAAM,KAAK,YAAY;",
-  "names": ["import__", "styled", "React", "TimelineIndicator", "Tag"]
+  "sourcesContent": ["import React from \"react\";\n\nimport { Theme } from \"../../../../styles/theme\";\nimport styled, { useTheme } from \"styled-components\";\n\nimport { Item, ItemStatus } from \".\";\nimport { Flex, Box } from \"../..\";\nimport { Text } from \"../../..\";\nimport Tag from \"../../../Tag\";\nimport InfiniteLoader from \"../../../loaders/InfiniteLoader\";\n\nimport TimelineIndicator from \"./TimelineIndicator\";\n\nexport type Props = {\n  item: Item;\n  isFirstItem?: boolean;\n  isLastItem?: boolean;\n  onClick?: () => void;\n};\n\nconst getContainerBackground = (theme: Theme, status: ItemStatus) => {\n  if (status === \"completed\") {\n    return \"transparent\";\n  } else if (status === \"active\") {\n    return theme.colors.neutral.c20;\n  }\n  return \"transparent\";\n};\n\nconst getContainerBorder = (theme: Theme, status: ItemStatus, isLastItem?: boolean) => {\n  if (status === \"completed\") {\n    return \"transparent\";\n  } else if (isLastItem && status === \"active\") {\n    return theme.colors.success.c50;\n  } else if (status === \"active\") {\n    return theme.colors.neutral.c40;\n  }\n  return \"transparent\";\n};\n\nconst Container = styled(Flex)<{ status: ItemStatus; isLastItem?: boolean }>`\n  flex: 1;\n  border-radius: ${p => p.theme.radii[2]}px;\n  background: ${p => getContainerBackground(p.theme, p.status)};\n  border: 1px solid ${p => getContainerBorder(p.theme, p.status, p.isLastItem)};\n  padding: 20px 16px;\n`;\n\nconst TimelineIndicatorContentHeader = styled(Flex)`\n  justify-content: space-between;\n  align-items: center;\n`;\n\nfunction TimelineItem({ item, isFirstItem, isLastItem, onClick }: Props) {\n  const { colors } = useTheme();\n\n  return (\n    <Flex flexDirection=\"row\" onClick={onClick} flex={1}>\n      <TimelineIndicator\n        status={item.status}\n        isFirstItem={isFirstItem}\n        isLastItem={isLastItem}\n        mr={4}\n      />\n      <Container status={item.status} isLastItem={isLastItem} mb={4} flexDirection=\"column\">\n        <TimelineIndicatorContentHeader height=\"20px\">\n          <Text\n            variant=\"body\"\n            fontWeight={item.status === \"active\" ? \"semiBold\" : \"medium\"}\n            color={\n              item.status !== \"inactive\" && isLastItem\n                ? \"success.c70\"\n                : item.status === \"active\"\n                ? \"primary.c80\"\n                : \"neutral.c70\"\n            }\n          >\n            {item.title}\n          </Text>\n          {(item?.estimatedTime && item.status === \"active\" && (\n            <Tag\n              size=\"small\"\n              type=\"opacity\"\n              active\n              disabled\n              textProps={{ color: colors.neutral.c100 }}\n            >{`${item.estimatedTime / 60} min`}</Tag>\n          )) ||\n            (item?.hasLoader && item.status === \"active\" && <InfiniteLoader size={30} />)}\n        </TimelineIndicatorContentHeader>\n        {item.renderBody && item.status === \"active\" && (\n          <Box position=\"relative\" pt={6}>\n            {item.renderBody(item.status === \"active\")}\n          </Box>\n        )}\n      </Container>\n    </Flex>\n  );\n}\n\nexport default React.memo(TimelineItem);\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAGlB,+BAAiC;AAGjC,IAAAA,YAA0B;AAC1B,IAAAA,YAAqB;AACrB,iBAAgB;AAChB,4BAA2B;AAE3B,+BAA8B;AAS9B,MAAM,yBAAyB,CAAC,OAAc,WAAuB;AACnE,MAAI,WAAW,aAAa;AAC1B,WAAO;AAAA,EACT,WAAW,WAAW,UAAU;AAC9B,WAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B;AACA,SAAO;AACT;AAEA,MAAM,qBAAqB,CAAC,OAAc,QAAoB,eAAyB;AACrF,MAAI,WAAW,aAAa;AAC1B,WAAO;AAAA,EACT,WAAW,cAAc,WAAW,UAAU;AAC5C,WAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B,WAAW,WAAW,UAAU;AAC9B,WAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B;AACA,SAAO;AACT;AAEA,MAAM,gBAAY,yBAAAC,SAAO,cAAI;AAAA;AAAA,mBAEV,OAAK,EAAE,MAAM,MAAM,CAAC,CAAC;AAAA,gBACxB,OAAK,uBAAuB,EAAE,OAAO,EAAE,MAAM,CAAC;AAAA,sBACxC,OAAK,mBAAmB,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,CAAC;AAAA;AAAA;AAI9E,MAAM,qCAAiC,yBAAAA,SAAO,cAAI;AAAA;AAAA;AAAA;AAKlD,SAAS,aAAa,EAAE,MAAM,aAAa,YAAY,QAAQ,GAAU;AACvE,QAAM,EAAE,OAAO,QAAI,mCAAS;AAE5B,SACE,6BAAAC,QAAA,cAAC,kBAAK,eAAc,OAAM,SAAkB,MAAM,KAChD,6BAAAA,QAAA;AAAA,IAAC,yBAAAC;AAAA,IAAA;AAAA,MACC,QAAQ,KAAK;AAAA,MACb;AAAA,MACA;AAAA,MACA,IAAI;AAAA;AAAA,EACN,GACA,6BAAAD,QAAA,cAAC,aAAU,QAAQ,KAAK,QAAQ,YAAwB,IAAI,GAAG,eAAc,YAC3E,6BAAAA,QAAA,cAAC,kCAA+B,QAAO,UACrC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,YAAY,KAAK,WAAW,WAAW,aAAa;AAAA,MACpD,OACE,KAAK,WAAW,cAAc,aAC1B,gBACA,KAAK,WAAW,WAChB,gBACA;AAAA;AAAA,IAGL,KAAK;AAAA,EACR,IACE,6BAAM,kBAAiB,KAAK,WAAW,YACvC,6BAAAA,QAAA;AAAA,IAAC,WAAAE;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,MAAK;AAAA,MACL,QAAM;AAAA,MACN,UAAQ;AAAA,MACR,WAAW,EAAE,OAAO,OAAO,QAAQ,KAAK;AAAA;AAAA,IACxC,GAAG,KAAK,gBAAgB,EAAE;AAAA,EAAO,MAElC,6BAAM,cAAa,KAAK,WAAW,YAAY,6BAAAF,QAAA,cAAC,sBAAAG,SAAA,EAAe,MAAM,IAAI,CAC9E,GACC,KAAK,cAAc,KAAK,WAAW,YAClC,6BAAAH,QAAA,cAAC,iBAAI,UAAS,YAAW,IAAI,KAC1B,KAAK,WAAW,KAAK,WAAW,QAAQ,CAC3C,CAEJ,CACF;AAEJ;AAEA,IAAO,uBAAQ,aAAAA,QAAM,KAAK,YAAY;",
+  "names": ["import__", "styled", "React", "TimelineIndicator", "Tag", "InfiniteLoader"]
 }

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 Text, { TextProps } from \"../../../asorted/Text\";\nimport { BaseStyledProps } from \"../../../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,WACxC,6BAAAD,QAAA,cAAC,YAAAE,SAAA,EAAK,SAAQ,QAAO,YAAW,YAAW,OAAM,gBAAe,IAAI,GAAI,GAAG,OAAO;AAGpF,MAAM,WAAgC,WACpC,6BAAAF,QAAA,cAAC,YAAAE,SAAA,EAAK,SAAQ,kBAAiB,YAAW,UAAS,OAAM,eAAe,GAAG,OAAO;AAGpF,iBAAiB,WAAW;AAC5B,iBAAiB,eAAe;",
+  "sourcesContent": ["import React, { ReactNode } from \"react\";\n\nimport TimelineItem from \"./TimelineItem\";\nimport { Flex } from \"../..\";\nimport Text, { TextProps } from \"../../../asorted/Text\";\nimport { BaseStyledProps } from \"../../../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  hasLoader?: boolean;\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;AAkBjB,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,WACxC,6BAAAD,QAAA,cAAC,YAAAE,SAAA,EAAK,SAAQ,QAAO,YAAW,YAAW,OAAM,gBAAe,IAAI,GAAI,GAAG,OAAO;AAGpF,MAAM,WAAgC,WACpC,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/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/loaders/ProgressLoader/index.js

@@ -117,7 +117,7 @@ function ProgressLoader({
   frontStrokeLinecap,
   backgroundStrokeColor
 }) {
-  return /* @__PURE__ */ import_react.default.createElement(StyledProgressLoaderContainer, null, showPercentage && /* @__PURE__ */ import_react.default.createElement(StyledCenteredText, { variant: "body", color: textColor || "primary.c80" }, progress, "%"), infinite ? /* @__PURE__ */ import_react.default.createElement(StyledSpinningContainer, null, /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react.default.createElement(StyledProgressLoaderContainer, null, showPercentage && /* @__PURE__ */ import_react.default.createElement(StyledCenteredText, { variant: "body", color: textColor || "primary.c80" }, Math.floor(progress), "%"), infinite ? /* @__PURE__ */ import_react.default.createElement(StyledSpinningContainer, null, /* @__PURE__ */ import_react.default.createElement(
     ProgressCircleSvg,
     {
       radius,

package/lib/cjs/components/loaders/ProgressLoader/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/loaders/ProgressLoader/index.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport Text from \"../../asorted/Text\";\n\nexport interface Props {\n  /**\n   * Radius of the progress ring.\n   */\n  radius?: number;\n\n  /**\n   * Thickness of the progress ring.\n   */\n  stroke?: number;\n\n  /**\n   * Progress of the loader, in percent, between 0 and 100.\n   */\n  progress?: number;\n\n  /**\n   * Whether to make it infinite, with spinning and whatnot.\n   */\n  infinite?: boolean;\n\n  /**\n   * Whether to display the progress, defaults to true.\n   */\n  showPercentage?: boolean;\n\n  /**\n   * Percentage text color\n   */\n  textColor?: string;\n\n  /**\n   * Front stroke color.\n   */\n  frontStrokeColor?: string;\n\n  /**\n   * Front stroke linecap.\n   * https://developer.mozilla.org/fr/docs/Web/SVG/Attribute/stroke-linecap\n   */\n  frontStrokeLinecap?: \"butt\" | \"round\";\n\n  /**\n   * Background stroke color.\n   */\n  backgroundStrokeColor?: string;\n}\n\nconst StyledCircle = styled.circle.attrs({\n  fill: \"transparent\",\n  cx: \"50%\",\n  cy: \"50%\",\n})`\n  transition: stroke-dashoffset 0.35s;\n  transform: rotate(-90deg);\n  transform-origin: 50% 50%;\n`;\n\nconst StyledCircleBackground = styled(StyledCircle).attrs(props => ({\n  stroke: props.stroke || props.theme.colors.primary.c30,\n}))``;\n\nconst StyledCircleFront = styled(StyledCircle).attrs(props => ({\n  stroke: props.stroke || props.theme.colors.primary.c80,\n}))``;\n\nconst StyledCenteredText = styled(Text)`\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  text-align: center;\n`;\n\nconst StyledProgressLoaderContainer = styled.div`\n  display: flex;\n  position: absolute;\n`;\nconst StyledSpinningContainer = styled.div`\n  animation: rotation 1s infinite linear;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  @keyframes rotation {\n    from {\n      transform: rotate(0deg);\n    }\n    to {\n      transform: rotate(360deg);\n    }\n  }\n`;\n\nfunction ProgressCircleSvg({\n  radius,\n  stroke,\n  progress,\n  backgroundStrokeColor,\n  frontStrokeColor,\n  frontStrokeLinecap,\n}: {\n  radius: number;\n  stroke: number;\n  progress: number;\n  backgroundStrokeColor?: string;\n  frontStrokeColor?: string;\n  frontStrokeLinecap?: \"butt\" | \"round\" | \"square\";\n}) {\n  const normalizedRadius = radius - stroke / 2;\n  const circumference = normalizedRadius * 2 * Math.PI;\n  const strokeDashoffset = circumference - (progress / 100) * circumference;\n  return (\n    <svg height={radius * 2} width={radius * 2}>\n      <StyledCircleBackground\n        strokeWidth={stroke}\n        strokeDasharray={circumference + \" \" + circumference}\n        style={{ strokeDashoffset: 0 }}\n        stroke={backgroundStrokeColor}\n        r={normalizedRadius}\n      />\n      <StyledCircleFront\n        strokeWidth={stroke}\n        strokeDasharray={circumference + \" \" + circumference}\n        style={{ strokeDashoffset }}\n        stroke={frontStrokeColor}\n        strokeLinecap={frontStrokeLinecap}\n        r={normalizedRadius}\n      />\n    </svg>\n  );\n}\n\nexport default function ProgressLoader({\n  radius = 32,\n  stroke = 6,\n  progress = 0,\n  showPercentage = true,\n  infinite,\n  textColor,\n  frontStrokeColor,\n  frontStrokeLinecap,\n  backgroundStrokeColor,\n}: Props): JSX.Element {\n  return (\n    <StyledProgressLoaderContainer>\n      {showPercentage && (\n        <StyledCenteredText variant=\"body\" color={textColor || \"primary.c80\"}>\n          {progress}%\n        </StyledCenteredText>\n      )}\n      {infinite ? (\n        <StyledSpinningContainer>\n          <ProgressCircleSvg\n            radius={radius}\n            stroke={stroke}\n            progress={25}\n            frontStrokeColor={frontStrokeColor}\n            frontStrokeLinecap={frontStrokeLinecap}\n            backgroundStrokeColor={backgroundStrokeColor}\n          />\n        </StyledSpinningContainer>\n      ) : (\n        <ProgressCircleSvg\n          radius={radius}\n          stroke={stroke}\n          progress={progress}\n          frontStrokeColor={frontStrokeColor}\n          frontStrokeLinecap={frontStrokeLinecap}\n          backgroundStrokeColor={backgroundStrokeColor}\n        />\n      )}\n    </StyledProgressLoaderContainer>\n  );\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAiB;AAkDjB,MAAM,eAAe,yBAAAA,QAAO,OAAO,MAAM;AAAA,EACvC,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,IAAI;AACN,CAAC;AAAA;AAAA;AAAA;AAAA;AAMD,MAAM,6BAAyB,yBAAAA,SAAO,YAAY,EAAE,MAAM,YAAU;AAAA,EAClE,QAAQ,MAAM,UAAU,MAAM,MAAM,OAAO,QAAQ;AACrD,EAAE;AAEF,MAAM,wBAAoB,yBAAAA,SAAO,YAAY,EAAE,MAAM,YAAU;AAAA,EAC7D,QAAQ,MAAM,UAAU,MAAM,MAAM,OAAO,QAAQ;AACrD,EAAE;AAEF,MAAM,yBAAqB,yBAAAA,SAAO,YAAAC,OAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQtC,MAAM,gCAAgC,yBAAAD,QAAO;AAAA;AAAA;AAAA;AAI7C,MAAM,0BAA0B,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAevC,SAAS,kBAAkB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAOG;AACD,QAAM,mBAAmB,SAAS,SAAS;AAC3C,QAAM,gBAAgB,mBAAmB,IAAI,KAAK;AAClD,QAAM,mBAAmB,gBAAiB,WAAW,MAAO;AAC5D,SACE,6BAAAE,QAAA,cAAC,SAAI,QAAQ,SAAS,GAAG,OAAO,SAAS,KACvC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,aAAa;AAAA,MACb,iBAAiB,gBAAgB,MAAM;AAAA,MACvC,OAAO,EAAE,kBAAkB,EAAE;AAAA,MAC7B,QAAQ;AAAA,MACR,GAAG;AAAA;AAAA,EACL,GACA,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,aAAa;AAAA,MACb,iBAAiB,gBAAgB,MAAM;AAAA,MACvC,OAAO,EAAE,iBAAiB;AAAA,MAC1B,QAAQ;AAAA,MACR,eAAe;AAAA,MACf,GAAG;AAAA;AAAA,EACL,CACF;AAEJ;AAEe,SAAR,eAAgC;AAAA,EACrC,SAAS;AAAA,EACT,SAAS;AAAA,EACT,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAuB;AACrB,SACE,6BAAAA,QAAA,cAAC,qCACE,kBACC,6BAAAA,QAAA,cAAC,sBAAmB,SAAQ,QAAO,OAAO,aAAa,iBACpD,UAAS,GACZ,GAED,WACC,6BAAAA,QAAA,cAAC,+BACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF,CACF,IAEA,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF,CAEJ;AAEJ;",
+  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport Text from \"../../asorted/Text\";\n\nexport interface Props {\n  /**\n   * Radius of the progress ring.\n   */\n  radius?: number;\n\n  /**\n   * Thickness of the progress ring.\n   */\n  stroke?: number;\n\n  /**\n   * Progress of the loader, in percent, between 0 and 100.\n   */\n  progress?: number;\n\n  /**\n   * Whether to make it infinite, with spinning and whatnot.\n   */\n  infinite?: boolean;\n\n  /**\n   * Whether to display the progress, defaults to true.\n   */\n  showPercentage?: boolean;\n\n  /**\n   * Percentage text color\n   */\n  textColor?: string;\n\n  /**\n   * Front stroke color.\n   */\n  frontStrokeColor?: string;\n\n  /**\n   * Front stroke linecap.\n   * https://developer.mozilla.org/fr/docs/Web/SVG/Attribute/stroke-linecap\n   */\n  frontStrokeLinecap?: \"butt\" | \"round\";\n\n  /**\n   * Background stroke color.\n   */\n  backgroundStrokeColor?: string;\n}\n\nconst StyledCircle = styled.circle.attrs({\n  fill: \"transparent\",\n  cx: \"50%\",\n  cy: \"50%\",\n})`\n  transition: stroke-dashoffset 0.35s;\n  transform: rotate(-90deg);\n  transform-origin: 50% 50%;\n`;\n\nconst StyledCircleBackground = styled(StyledCircle).attrs(props => ({\n  stroke: props.stroke || props.theme.colors.primary.c30,\n}))``;\n\nconst StyledCircleFront = styled(StyledCircle).attrs(props => ({\n  stroke: props.stroke || props.theme.colors.primary.c80,\n}))``;\n\nconst StyledCenteredText = styled(Text)`\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  text-align: center;\n`;\n\nconst StyledProgressLoaderContainer = styled.div`\n  display: flex;\n  position: absolute;\n`;\nconst StyledSpinningContainer = styled.div`\n  animation: rotation 1s infinite linear;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  @keyframes rotation {\n    from {\n      transform: rotate(0deg);\n    }\n    to {\n      transform: rotate(360deg);\n    }\n  }\n`;\n\nfunction ProgressCircleSvg({\n  radius,\n  stroke,\n  progress,\n  backgroundStrokeColor,\n  frontStrokeColor,\n  frontStrokeLinecap,\n}: {\n  radius: number;\n  stroke: number;\n  progress: number;\n  backgroundStrokeColor?: string;\n  frontStrokeColor?: string;\n  frontStrokeLinecap?: \"butt\" | \"round\" | \"square\";\n}) {\n  const normalizedRadius = radius - stroke / 2;\n  const circumference = normalizedRadius * 2 * Math.PI;\n  const strokeDashoffset = circumference - (progress / 100) * circumference;\n  return (\n    <svg height={radius * 2} width={radius * 2}>\n      <StyledCircleBackground\n        strokeWidth={stroke}\n        strokeDasharray={circumference + \" \" + circumference}\n        style={{ strokeDashoffset: 0 }}\n        stroke={backgroundStrokeColor}\n        r={normalizedRadius}\n      />\n      <StyledCircleFront\n        strokeWidth={stroke}\n        strokeDasharray={circumference + \" \" + circumference}\n        style={{ strokeDashoffset }}\n        stroke={frontStrokeColor}\n        strokeLinecap={frontStrokeLinecap}\n        r={normalizedRadius}\n      />\n    </svg>\n  );\n}\n\nexport default function ProgressLoader({\n  radius = 32,\n  stroke = 6,\n  progress = 0,\n  showPercentage = true,\n  infinite,\n  textColor,\n  frontStrokeColor,\n  frontStrokeLinecap,\n  backgroundStrokeColor,\n}: Props): JSX.Element {\n  return (\n    <StyledProgressLoaderContainer>\n      {showPercentage && (\n        <StyledCenteredText variant=\"body\" color={textColor || \"primary.c80\"}>\n          {Math.floor(progress)}%\n        </StyledCenteredText>\n      )}\n      {infinite ? (\n        <StyledSpinningContainer>\n          <ProgressCircleSvg\n            radius={radius}\n            stroke={stroke}\n            progress={25}\n            frontStrokeColor={frontStrokeColor}\n            frontStrokeLinecap={frontStrokeLinecap}\n            backgroundStrokeColor={backgroundStrokeColor}\n          />\n        </StyledSpinningContainer>\n      ) : (\n        <ProgressCircleSvg\n          radius={radius}\n          stroke={stroke}\n          progress={progress}\n          frontStrokeColor={frontStrokeColor}\n          frontStrokeLinecap={frontStrokeLinecap}\n          backgroundStrokeColor={backgroundStrokeColor}\n        />\n      )}\n    </StyledProgressLoaderContainer>\n  );\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAiB;AAkDjB,MAAM,eAAe,yBAAAA,QAAO,OAAO,MAAM;AAAA,EACvC,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,IAAI;AACN,CAAC;AAAA;AAAA;AAAA;AAAA;AAMD,MAAM,6BAAyB,yBAAAA,SAAO,YAAY,EAAE,MAAM,YAAU;AAAA,EAClE,QAAQ,MAAM,UAAU,MAAM,MAAM,OAAO,QAAQ;AACrD,EAAE;AAEF,MAAM,wBAAoB,yBAAAA,SAAO,YAAY,EAAE,MAAM,YAAU;AAAA,EAC7D,QAAQ,MAAM,UAAU,MAAM,MAAM,OAAO,QAAQ;AACrD,EAAE;AAEF,MAAM,yBAAqB,yBAAAA,SAAO,YAAAC,OAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQtC,MAAM,gCAAgC,yBAAAD,QAAO;AAAA;AAAA;AAAA;AAI7C,MAAM,0BAA0B,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAevC,SAAS,kBAAkB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAOG;AACD,QAAM,mBAAmB,SAAS,SAAS;AAC3C,QAAM,gBAAgB,mBAAmB,IAAI,KAAK;AAClD,QAAM,mBAAmB,gBAAiB,WAAW,MAAO;AAC5D,SACE,6BAAAE,QAAA,cAAC,SAAI,QAAQ,SAAS,GAAG,OAAO,SAAS,KACvC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,aAAa;AAAA,MACb,iBAAiB,gBAAgB,MAAM;AAAA,MACvC,OAAO,EAAE,kBAAkB,EAAE;AAAA,MAC7B,QAAQ;AAAA,MACR,GAAG;AAAA;AAAA,EACL,GACA,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,aAAa;AAAA,MACb,iBAAiB,gBAAgB,MAAM;AAAA,MACvC,OAAO,EAAE,iBAAiB;AAAA,MAC1B,QAAQ;AAAA,MACR,eAAe;AAAA,MACf,GAAG;AAAA;AAAA,EACL,CACF;AAEJ;AAEe,SAAR,eAAgC;AAAA,EACrC,SAAS;AAAA,EACT,SAAS;AAAA,EACT,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAuB;AACrB,SACE,6BAAAA,QAAA,cAAC,qCACE,kBACC,6BAAAA,QAAA,cAAC,sBAAmB,SAAQ,QAAO,OAAO,aAAa,iBACpD,KAAK,MAAM,QAAQ,GAAE,GACxB,GAED,WACC,6BAAAA,QAAA,cAAC,+BACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF,CACF,IAEA,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF,CAEJ;AAEJ;",
   "names": ["styled", "Text", "React"]
 }

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) => {