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

package/lib/cjs/components/Tag/Tag.stories.js

@@ -88,7 +88,7 @@ Outlined.args = {
   type: "outlined"
 };
 const OutlinedOpacity = Template.bind({});
-Outlined.args = {
+OutlinedOpacity.args = {
   ...defaultArgs,
   type: "outlinedOpacity"
 };

package/lib/cjs/components/Tag/Tag.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/Tag/Tag.stories.tsx"],
-  "sourcesContent": ["import React from \"react\";\n\nimport { StoryTemplate } from \"../helpers\";\nimport Tag, { Type, Size, TagProps } from \"./index\";\nimport Text from \"../asorted/Text\";\nimport Flex from \"../layout/Flex\";\n\nconst sizes: Size[] = [\"large\", \"medium\", \"small\"];\nconst types: Type[] = [\"plain\", \"opacity\", \"outlined\", \"outlinedOpacity\"];\nconst states = [{}, { disabled: true }];\n\nexport default {\n  title: \"Toasts/Tag\",\n  component: Tag,\n  argTypes: {\n    active: {\n      control: {\n        type: \"boolean\",\n      },\n    },\n    type: {\n      options: types,\n    },\n    size: {\n      options: sizes,\n    },\n    children: {\n      type: \"string\",\n    },\n  },\n};\n\nexport const Overview = ((): JSX.Element => (\n  <Flex flexDirection=\"column\">\n    {sizes.map(size => (\n      <Flex flexDirection=\"column\" marginBottom={5}>\n        <Text variant=\"h5\" marginBottom={5}>\n          size=\"{size}\"\n        </Text>\n        {types.map(type => (\n          <Flex flexDirection=\"row\" alignItems=\"center\" mb={5}>\n            <div style={{ width: \"150px\" }}>\n              <Text variant=\"small\" color=\"neutral.c70\">\n                type=\"{type}\"\n              </Text>\n            </div>\n            <Flex flexDirection=\"row\" mt=\"5px\" columnGap=\"16px\">\n              {states.map(state =>\n                [true, false].map((active: boolean) => (\n                  <Tag size={size} type={type} active={active} {...state}>\n                    {active ? \"Active\" : \"Inactive\"}\n                  </Tag>\n                )),\n              )}\n            </Flex>\n          </Flex>\n        ))}\n      </Flex>\n    ))}\n  </Flex>\n)).bind({});\n\nconst Template: StoryTemplate<TagProps> = (args: TagProps): JSX.Element => (\n  <Tag {...args}>{args.children}</Tag>\n);\n\nconst defaultArgs = {\n  active: true,\n  children: \"Label\",\n  type: \"large\",\n};\n\nexport const Plain = Template.bind({});\nPlain.args = {\n  ...defaultArgs,\n  type: \"plain\",\n};\nexport const Opacity = Template.bind({});\nOpacity.args = {\n  ...defaultArgs,\n  type: \"opacity\",\n};\nexport const Outlined = Template.bind({});\nOutlined.args = {\n  ...defaultArgs,\n  type: \"outlined\",\n};\nexport const OutlinedOpacity = Template.bind({});\nOutlined.args = {\n  ...defaultArgs,\n  type: \"outlinedOpacity\",\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAGlB,mBAA0C;AAC1C,kBAAiB;AACjB,kBAAiB;AAEjB,MAAM,QAAgB,CAAC,SAAS,UAAU,OAAO;AACjD,MAAM,QAAgB,CAAC,SAAS,WAAW,YAAY,iBAAiB;AACxE,MAAM,SAAS,CAAC,CAAC,GAAG,EAAE,UAAU,KAAK,CAAC;AAEtC,IAAO,sBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,IACX;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACR,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAEO,MAAM,YAAY,MACvB,6BAAAC,QAAA,cAAC,YAAAC,SAAA,EAAK,eAAc,YACjB,MAAM,IAAI,UACT,6BAAAD,QAAA,cAAC,YAAAC,SAAA,EAAK,eAAc,UAAS,cAAc,KACzC,6BAAAD,QAAA,cAAC,YAAAE,SAAA,EAAK,SAAQ,MAAK,cAAc,KAAG,UAC3B,MAAK,GACd,GACC,MAAM,IAAI,UACT,6BAAAF,QAAA,cAAC,YAAAC,SAAA,EAAK,eAAc,OAAM,YAAW,UAAS,IAAI,KAChD,6BAAAD,QAAA,cAAC,SAAI,OAAO,EAAE,OAAO,QAAQ,KAC3B,6BAAAA,QAAA,cAAC,YAAAE,SAAA,EAAK,SAAQ,SAAQ,OAAM,iBAAc,UACjC,MAAK,GACd,CACF,GACA,6BAAAF,QAAA,cAAC,YAAAC,SAAA,EAAK,eAAc,OAAM,IAAG,OAAM,WAAU,UAC1C,OAAO;AAAA,EAAI,WACV,CAAC,MAAM,KAAK,EAAE,IAAI,CAAC,WACjB,6BAAAD,QAAA,cAAC,aAAAD,SAAA,EAAI,MAAY,MAAY,QAAiB,GAAG,SAC9C,SAAS,WAAW,UACvB,CACD;AACH,CACF,CACF,CACD,CACH,CACD,CACH,GACC,KAAK,CAAC,CAAC;AAEV,MAAM,WAAoC,CAAC,SACzC,6BAAAC,QAAA,cAAC,aAAAD,SAAA,EAAK,GAAG,QAAO,KAAK,QAAS;AAGhC,MAAM,cAAc;AAAA,EAClB,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,MAAM;AACR;AAEO,MAAM,QAAQ,SAAS,KAAK,CAAC,CAAC;AACrC,MAAM,OAAO;AAAA,EACX,GAAG;AAAA,EACH,MAAM;AACR;AACO,MAAM,UAAU,SAAS,KAAK,CAAC,CAAC;AACvC,QAAQ,OAAO;AAAA,EACb,GAAG;AAAA,EACH,MAAM;AACR;AACO,MAAM,WAAW,SAAS,KAAK,CAAC,CAAC;AACxC,SAAS,OAAO;AAAA,EACd,GAAG;AAAA,EACH,MAAM;AACR;AACO,MAAM,kBAAkB,SAAS,KAAK,CAAC,CAAC;AAC/C,SAAS,OAAO;AAAA,EACd,GAAG;AAAA,EACH,MAAM;AACR;",
+  "sourcesContent": ["import React from \"react\";\n\nimport { StoryTemplate } from \"../helpers\";\nimport Tag, { Type, Size, TagProps } from \"./index\";\nimport Text from \"../asorted/Text\";\nimport Flex from \"../layout/Flex\";\n\nconst sizes: Size[] = [\"large\", \"medium\", \"small\"];\nconst types: Type[] = [\"plain\", \"opacity\", \"outlined\", \"outlinedOpacity\"];\nconst states = [{}, { disabled: true }];\n\nexport default {\n  title: \"Toasts/Tag\",\n  component: Tag,\n  argTypes: {\n    active: {\n      control: {\n        type: \"boolean\",\n      },\n    },\n    type: {\n      options: types,\n    },\n    size: {\n      options: sizes,\n    },\n    children: {\n      type: \"string\",\n    },\n  },\n};\n\nexport const Overview = ((): JSX.Element => (\n  <Flex flexDirection=\"column\">\n    {sizes.map(size => (\n      <Flex flexDirection=\"column\" marginBottom={5}>\n        <Text variant=\"h5\" marginBottom={5}>\n          size=\"{size}\"\n        </Text>\n        {types.map(type => (\n          <Flex flexDirection=\"row\" alignItems=\"center\" mb={5}>\n            <div style={{ width: \"150px\" }}>\n              <Text variant=\"small\" color=\"neutral.c70\">\n                type=\"{type}\"\n              </Text>\n            </div>\n            <Flex flexDirection=\"row\" mt=\"5px\" columnGap=\"16px\">\n              {states.map(state =>\n                [true, false].map((active: boolean) => (\n                  <Tag size={size} type={type} active={active} {...state}>\n                    {active ? \"Active\" : \"Inactive\"}\n                  </Tag>\n                )),\n              )}\n            </Flex>\n          </Flex>\n        ))}\n      </Flex>\n    ))}\n  </Flex>\n)).bind({});\n\nconst Template: StoryTemplate<TagProps> = (args: TagProps): JSX.Element => (\n  <Tag {...args}>{args.children}</Tag>\n);\n\nconst defaultArgs = {\n  active: true,\n  children: \"Label\",\n  type: \"large\",\n};\n\nexport const Plain = Template.bind({});\nPlain.args = {\n  ...defaultArgs,\n  type: \"plain\",\n};\nexport const Opacity = Template.bind({});\nOpacity.args = {\n  ...defaultArgs,\n  type: \"opacity\",\n};\nexport const Outlined = Template.bind({});\nOutlined.args = {\n  ...defaultArgs,\n  type: \"outlined\",\n};\nexport const OutlinedOpacity = Template.bind({});\nOutlinedOpacity.args = {\n  ...defaultArgs,\n  type: \"outlinedOpacity\",\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAGlB,mBAA0C;AAC1C,kBAAiB;AACjB,kBAAiB;AAEjB,MAAM,QAAgB,CAAC,SAAS,UAAU,OAAO;AACjD,MAAM,QAAgB,CAAC,SAAS,WAAW,YAAY,iBAAiB;AACxE,MAAM,SAAS,CAAC,CAAC,GAAG,EAAE,UAAU,KAAK,CAAC;AAEtC,IAAO,sBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,IACX;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACR,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAEO,MAAM,YAAY,MACvB,6BAAAC,QAAA,cAAC,YAAAC,SAAA,EAAK,eAAc,YACjB,MAAM,IAAI,UACT,6BAAAD,QAAA,cAAC,YAAAC,SAAA,EAAK,eAAc,UAAS,cAAc,KACzC,6BAAAD,QAAA,cAAC,YAAAE,SAAA,EAAK,SAAQ,MAAK,cAAc,KAAG,UAC3B,MAAK,GACd,GACC,MAAM,IAAI,UACT,6BAAAF,QAAA,cAAC,YAAAC,SAAA,EAAK,eAAc,OAAM,YAAW,UAAS,IAAI,KAChD,6BAAAD,QAAA,cAAC,SAAI,OAAO,EAAE,OAAO,QAAQ,KAC3B,6BAAAA,QAAA,cAAC,YAAAE,SAAA,EAAK,SAAQ,SAAQ,OAAM,iBAAc,UACjC,MAAK,GACd,CACF,GACA,6BAAAF,QAAA,cAAC,YAAAC,SAAA,EAAK,eAAc,OAAM,IAAG,OAAM,WAAU,UAC1C,OAAO;AAAA,EAAI,WACV,CAAC,MAAM,KAAK,EAAE,IAAI,CAAC,WACjB,6BAAAD,QAAA,cAAC,aAAAD,SAAA,EAAI,MAAY,MAAY,QAAiB,GAAG,SAC9C,SAAS,WAAW,UACvB,CACD;AACH,CACF,CACF,CACD,CACH,CACD,CACH,GACC,KAAK,CAAC,CAAC;AAEV,MAAM,WAAoC,CAAC,SACzC,6BAAAC,QAAA,cAAC,aAAAD,SAAA,EAAK,GAAG,QAAO,KAAK,QAAS;AAGhC,MAAM,cAAc;AAAA,EAClB,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,MAAM;AACR;AAEO,MAAM,QAAQ,SAAS,KAAK,CAAC,CAAC;AACrC,MAAM,OAAO;AAAA,EACX,GAAG;AAAA,EACH,MAAM;AACR;AACO,MAAM,UAAU,SAAS,KAAK,CAAC,CAAC;AACvC,QAAQ,OAAO;AAAA,EACb,GAAG;AAAA,EACH,MAAM;AACR;AACO,MAAM,WAAW,SAAS,KAAK,CAAC,CAAC;AACxC,SAAS,OAAO;AAAA,EACd,GAAG;AAAA,EACH,MAAM;AACR;AACO,MAAM,kBAAkB,SAAS,KAAK,CAAC,CAAC;AAC/C,gBAAgB,OAAO;AAAA,EACrB,GAAG;AAAA,EACH,MAAM;AACR;",
   "names": ["Tag", "React", "Flex", "Text"]
 }

package/lib/cjs/components/asorted/Icon/BoxedIcon.stories.js

@@ -42,29 +42,18 @@ const Story = {
   argTypes: {
     exampleIconName: {
       type: "enum",
-      defaultValue: "Activity",
       description: "[Not a BoxedIcon prop, only for this Storybook example] - Icon name. Value is passed to the `Icon` component of this UI library which is then used for the `Icon` prop.",
-      control: {
-        options: import_Icon.iconNames,
-        control: {
-          type: "select"
-        }
-      }
+      options: import_Icon.iconNames,
+      control: { type: "select" }
     },
     exampleBadgeName: {
       type: "enum",
-      defaultValue: "CircledCheckSolid",
       description: "[Not a BoxedIcon prop, only for this Storybook example] - Badge icon name. Value is passed to the `Icon` component of this UI library which is then used for the `Badge` prop.",
-      control: {
-        options: import_Icon.iconNames,
-        control: {
-          type: "select"
-        }
-      }
+      options: import_Icon.iconNames,
+      control: { type: "select" }
     },
     exampleBadgeEnabled: {
       type: "boolean",
-      defaultValue: true,
       description: "[Not a BoxedIcon prop, only for this Storybook example] - Controls whether a `Badge` prop is passed to the `BoxedIcon` component."
     },
     Badge: {
@@ -75,31 +64,36 @@ const Story = {
     },
     iconColor: {
       type: "string",
-      defaultValue: "hsla(110, 50%, 57%, 1)",
-      control: { control: "color" }
+      control: { type: "color" }
     },
     badgeColor: {
       type: "string",
-      defaultValue: "hsla(110, 50%, 57%, 1)",
-      control: { control: "color" }
+      control: { type: "color" }
     },
     borderColor: {
       type: "string",
-      defaultValue: "success.c40",
-      control: { control: "color" }
+      control: { type: "color" }
     },
     iconSize: {
-      type: "number",
-      defaultValue: import_BoxedIcon.DEFAULT_ICON_SIZE
+      type: "number"
     },
     badgeSize: {
-      type: "number",
-      defaultValue: import_BoxedIcon.DEFAULT_BADGE_SIZE
+      type: "number"
     },
     size: {
-      type: "number",
-      defaultValue: import_BoxedIcon.DEFAULT_BOX_SIZE
+      type: "number"
     }
+  },
+  args: {
+    exampleIconName: "Activity",
+    exampleBadgeName: "CircledCheckSolid",
+    exampleBadgeEnabled: true,
+    iconColor: "hsla(110, 50%, 57%, 1)",
+    badgeColor: "hsla(110, 50%, 57%, 1)",
+    borderColor: "success.c40",
+    iconSize: import_BoxedIcon.DEFAULT_ICON_SIZE,
+    badgeSize: import_BoxedIcon.DEFAULT_BADGE_SIZE,
+    size: import_BoxedIcon.DEFAULT_BOX_SIZE
   }
 };
 var BoxedIcon_stories_default = Story;

package/lib/cjs/components/asorted/Icon/BoxedIcon.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/asorted/Icon/BoxedIcon.stories.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport Icon, { iconNames } from \"./Icon\";\nimport BoxedIconC, {\n  BoxedIconProps,\n  IconProps,\n  DEFAULT_BOX_SIZE,\n  DEFAULT_ICON_SIZE,\n  DEFAULT_BADGE_SIZE,\n} from \"./BoxedIcon\";\n\nconst ExampleIcon = ({ size, color, name }: IconProps & { name: string }) => (\n  <Icon name={name} {...{ size, color }} />\n);\n\nconst Story = {\n  title: \"Asorted/Icons/BoxedIcon\",\n  component: BoxedIconC,\n  argTypes: {\n    exampleIconName: {\n      type: \"enum\",\n      defaultValue: \"Activity\",\n      description:\n        \"[Not a BoxedIcon prop, only for this Storybook example] - Icon name. Value is passed to the `Icon` component of this UI library which is then used for the `Icon` prop.\",\n      control: {\n        options: iconNames,\n        control: {\n          type: \"select\",\n        },\n      },\n    },\n    exampleBadgeName: {\n      type: \"enum\",\n      defaultValue: \"CircledCheckSolid\",\n      description:\n        \"[Not a BoxedIcon prop, only for this Storybook example] - Badge icon name. Value is passed to the `Icon` component of this UI library which is then used for the `Badge` prop.\",\n      control: {\n        options: iconNames,\n        control: {\n          type: \"select\",\n        },\n      },\n    },\n    exampleBadgeEnabled: {\n      type: \"boolean\",\n      defaultValue: true,\n      description:\n        \"[Not a BoxedIcon prop, only for this Storybook example] - Controls whether a `Badge` prop is passed to the `BoxedIcon` component.\",\n    },\n    Badge: {\n      control: false,\n    },\n    Icon: {\n      control: false,\n    },\n    iconColor: {\n      type: \"string\",\n      defaultValue: \"hsla(110, 50%, 57%, 1)\",\n      control: { control: \"color\" },\n    },\n    badgeColor: {\n      type: \"string\",\n      defaultValue: \"hsla(110, 50%, 57%, 1)\",\n      control: { control: \"color\" },\n    },\n    borderColor: {\n      type: \"string\",\n      defaultValue: \"success.c40\",\n      control: { control: \"color\" },\n    },\n    iconSize: {\n      type: \"number\",\n      defaultValue: DEFAULT_ICON_SIZE,\n    },\n    badgeSize: {\n      type: \"number\",\n      defaultValue: DEFAULT_BADGE_SIZE,\n    },\n    size: {\n      type: \"number\",\n      defaultValue: DEFAULT_BOX_SIZE,\n    },\n  },\n};\n\nexport default Story;\n\nconst BoxedIconTemplate = (\n  args: BoxedIconProps & {\n    exampleIconName: string;\n    exampleBadgeName: string;\n    exampleBadgeEnabled: boolean;\n  },\n) => {\n  const badgeColor = args.badgeColor;\n  const badgeSize = args.badgeSize;\n  const borderColor = args.borderColor;\n  const iconColor = args.iconColor;\n  const IconComp =\n    args.Icon || ((props: IconProps) => <ExampleIcon {...props} name={args.exampleIconName} />);\n  const BadgeComp =\n    args.Badge || ((props: IconProps) => <ExampleIcon {...props} name={args.exampleBadgeName} />);\n  const iconSize = args.iconSize;\n  const size = args.size;\n\n  return (\n    <BoxedIconC\n      Icon={IconComp}\n      Badge={args.exampleBadgeEnabled ? BadgeComp : undefined}\n      badgeColor={badgeColor}\n      badgeSize={badgeSize}\n      borderColor={borderColor}\n      iconColor={iconColor}\n      iconSize={iconSize}\n      size={size}\n    />\n  );\n};\n\nexport const BoxedIcon = BoxedIconTemplate.bind({});\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,kBAAgC;AAChC,uBAMO;AAEP,MAAM,cAAc,CAAC,EAAE,MAAM,OAAO,KAAK,MACvC,6BAAAA,QAAA,cAAC,YAAAC,SAAA,EAAK,MAAa,GAAG,EAAE,MAAM,MAAM,GAAG;AAGzC,MAAM,QAAQ;AAAA,EACZ,OAAO;AAAA,EACP,WAAW,iBAAAC;AAAA,EACX,UAAU;AAAA,IACR,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,cAAc;AAAA,MACd,aACE;AAAA,MACF,SAAS;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,UACP,MAAM;AAAA,QACR;AAAA,MACF;AAAA,IACF;AAAA,IACA,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,cAAc;AAAA,MACd,aACE;AAAA,MACF,SAAS;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,UACP,MAAM;AAAA,QACR;AAAA,MACF;AAAA,IACF;AAAA,IACA,qBAAqB;AAAA,MACnB,MAAM;AAAA,MACN,cAAc;AAAA,MACd,aACE;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,IACX;AAAA,IACA,WAAW;AAAA,MACT,MAAM;AAAA,MACN,cAAc;AAAA,MACd,SAAS,EAAE,SAAS,QAAQ;AAAA,IAC9B;AAAA,IACA,YAAY;AAAA,MACV,MAAM;AAAA,MACN,cAAc;AAAA,MACd,SAAS,EAAE,SAAS,QAAQ;AAAA,IAC9B;AAAA,IACA,aAAa;AAAA,MACX,MAAM;AAAA,MACN,cAAc;AAAA,MACd,SAAS,EAAE,SAAS,QAAQ;AAAA,IAC9B;AAAA,IACA,UAAU;AAAA,MACR,MAAM;AAAA,MACN,cAAc;AAAA,IAChB;AAAA,IACA,WAAW;AAAA,MACT,MAAM;AAAA,MACN,cAAc;AAAA,IAChB;AAAA,IACA,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,cAAc;AAAA,IAChB;AAAA,EACF;AACF;AAEA,IAAO,4BAAQ;AAEf,MAAM,oBAAoB,CACxB,SAKG;AACH,QAAM,aAAa,KAAK;AACxB,QAAM,YAAY,KAAK;AACvB,QAAM,cAAc,KAAK;AACzB,QAAM,YAAY,KAAK;AACvB,QAAM,WACJ,KAAK,SAAS,CAAC,UAAqB,6BAAAF,QAAA,cAAC,eAAa,GAAG,OAAO,MAAM,KAAK,iBAAiB;AAC1F,QAAM,YACJ,KAAK,UAAU,CAAC,UAAqB,6BAAAA,QAAA,cAAC,eAAa,GAAG,OAAO,MAAM,KAAK,kBAAkB;AAC5F,QAAM,WAAW,KAAK;AACtB,QAAM,OAAO,KAAK;AAElB,SACE,6BAAAA,QAAA;AAAA,IAAC,iBAAAE;AAAA,IAAA;AAAA,MACC,MAAM;AAAA,MACN,OAAO,KAAK,sBAAsB,YAAY;AAAA,MAC9C;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;AAEO,MAAM,YAAY,kBAAkB,KAAK,CAAC,CAAC;",
+  "sourcesContent": ["import React from \"react\";\nimport Icon, { iconNames } from \"./Icon\";\nimport BoxedIconC, {\n  BoxedIconProps,\n  IconProps,\n  DEFAULT_BOX_SIZE,\n  DEFAULT_ICON_SIZE,\n  DEFAULT_BADGE_SIZE,\n} from \"./BoxedIcon\";\n\nconst ExampleIcon = ({ size, color, name }: IconProps & { name: string }) => (\n  <Icon name={name} {...{ size, color }} />\n);\n\nconst Story = {\n  title: \"Asorted/Icons/BoxedIcon\",\n  component: BoxedIconC,\n  argTypes: {\n    exampleIconName: {\n      type: \"enum\",\n      description:\n        \"[Not a BoxedIcon prop, only for this Storybook example] - Icon name. Value is passed to the `Icon` component of this UI library which is then used for the `Icon` prop.\",\n      options: iconNames,\n      control: { type: \"select\" },\n    },\n    exampleBadgeName: {\n      type: \"enum\",\n      description:\n        \"[Not a BoxedIcon prop, only for this Storybook example] - Badge icon name. Value is passed to the `Icon` component of this UI library which is then used for the `Badge` prop.\",\n      options: iconNames,\n      control: { type: \"select\" },\n    },\n    exampleBadgeEnabled: {\n      type: \"boolean\",\n      description:\n        \"[Not a BoxedIcon prop, only for this Storybook example] - Controls whether a `Badge` prop is passed to the `BoxedIcon` component.\",\n    },\n    Badge: {\n      control: false,\n    },\n    Icon: {\n      control: false,\n    },\n    iconColor: {\n      type: \"string\",\n      control: { type: \"color\" },\n    },\n    badgeColor: {\n      type: \"string\",\n      control: { type: \"color\" },\n    },\n    borderColor: {\n      type: \"string\",\n      control: { type: \"color\" },\n    },\n    iconSize: {\n      type: \"number\",\n    },\n    badgeSize: {\n      type: \"number\",\n    },\n    size: {\n      type: \"number\",\n    },\n  },\n  args: {\n    exampleIconName: \"Activity\",\n    exampleBadgeName: \"CircledCheckSolid\",\n    exampleBadgeEnabled: true,\n    iconColor: \"hsla(110, 50%, 57%, 1)\",\n    badgeColor: \"hsla(110, 50%, 57%, 1)\",\n    borderColor: \"success.c40\",\n    iconSize: DEFAULT_ICON_SIZE,\n    badgeSize: DEFAULT_BADGE_SIZE,\n    size: DEFAULT_BOX_SIZE,\n  },\n};\n\nexport default Story;\n\nconst BoxedIconTemplate = (\n  args: BoxedIconProps & {\n    exampleIconName: string;\n    exampleBadgeName: string;\n    exampleBadgeEnabled: boolean;\n  },\n) => {\n  const badgeColor = args.badgeColor;\n  const badgeSize = args.badgeSize;\n  const borderColor = args.borderColor;\n  const iconColor = args.iconColor;\n  const IconComp =\n    args.Icon || ((props: IconProps) => <ExampleIcon {...props} name={args.exampleIconName} />);\n  const BadgeComp =\n    args.Badge || ((props: IconProps) => <ExampleIcon {...props} name={args.exampleBadgeName} />);\n  const iconSize = args.iconSize;\n  const size = args.size;\n\n  return (\n    <BoxedIconC\n      Icon={IconComp}\n      Badge={args.exampleBadgeEnabled ? BadgeComp : undefined}\n      badgeColor={badgeColor}\n      badgeSize={badgeSize}\n      borderColor={borderColor}\n      iconColor={iconColor}\n      iconSize={iconSize}\n      size={size}\n    />\n  );\n};\n\nexport const BoxedIcon = BoxedIconTemplate.bind({});\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,kBAAgC;AAChC,uBAMO;AAEP,MAAM,cAAc,CAAC,EAAE,MAAM,OAAO,KAAK,MACvC,6BAAAA,QAAA,cAAC,YAAAC,SAAA,EAAK,MAAa,GAAG,EAAE,MAAM,MAAM,GAAG;AAGzC,MAAM,QAAQ;AAAA,EACZ,OAAO;AAAA,EACP,WAAW,iBAAAC;AAAA,EACX,UAAU;AAAA,IACR,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,aACE;AAAA,MACF,SAAS;AAAA,MACT,SAAS,EAAE,MAAM,SAAS;AAAA,IAC5B;AAAA,IACA,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,aACE;AAAA,MACF,SAAS;AAAA,MACT,SAAS,EAAE,MAAM,SAAS;AAAA,IAC5B;AAAA,IACA,qBAAqB;AAAA,MACnB,MAAM;AAAA,MACN,aACE;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,IACX;AAAA,IACA,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS,EAAE,MAAM,QAAQ;AAAA,IAC3B;AAAA,IACA,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS,EAAE,MAAM,QAAQ;AAAA,IAC3B;AAAA,IACA,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS,EAAE,MAAM,QAAQ;AAAA,IAC3B;AAAA,IACA,UAAU;AAAA,MACR,MAAM;AAAA,IACR;AAAA,IACA,WAAW;AAAA,MACT,MAAM;AAAA,IACR;AAAA,IACA,MAAM;AAAA,MACJ,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,iBAAiB;AAAA,IACjB,kBAAkB;AAAA,IAClB,qBAAqB;AAAA,IACrB,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,UAAU;AAAA,IACV,WAAW;AAAA,IACX,MAAM;AAAA,EACR;AACF;AAEA,IAAO,4BAAQ;AAEf,MAAM,oBAAoB,CACxB,SAKG;AACH,QAAM,aAAa,KAAK;AACxB,QAAM,YAAY,KAAK;AACvB,QAAM,cAAc,KAAK;AACzB,QAAM,YAAY,KAAK;AACvB,QAAM,WACJ,KAAK,SAAS,CAAC,UAAqB,6BAAAF,QAAA,cAAC,eAAa,GAAG,OAAO,MAAM,KAAK,iBAAiB;AAC1F,QAAM,YACJ,KAAK,UAAU,CAAC,UAAqB,6BAAAA,QAAA,cAAC,eAAa,GAAG,OAAO,MAAM,KAAK,kBAAkB;AAC5F,QAAM,WAAW,KAAK;AACtB,QAAM,OAAO,KAAK;AAElB,SACE,6BAAAA,QAAA;AAAA,IAAC,iBAAAE;AAAA,IAAA;AAAA,MACC,MAAM;AAAA,MACN,OAAO,KAAK,sBAAsB,YAAY;AAAA,MAC9C;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;AAEO,MAAM,YAAY,kBAAkB,KAAK,CAAC,CAAC;",
   "names": ["React", "Icon", "BoxedIconC"]
 }

package/lib/cjs/components/asorted/Icon/CryptoIcons.stories.js

@@ -86,8 +86,7 @@ const Story = {
   argTypes: {
     size: {
       type: "number",
-      description: "Icon size for preview",
-      defaultValue: 32
+      description: "Icon size for preview"
     },
     color: {
       type: "string",
@@ -96,7 +95,6 @@ const Story = {
     },
     name: {
       type: "enum",
-      defaultValue: "BTC",
       description: "[Only for single icon], Icon name",
       control: {
         options: Object.keys(cryptoIcons),
@@ -107,20 +105,24 @@ const Story = {
     },
     circleIcon: {
       type: "boolean",
-      description: "if icon is in a circle or not",
-      defaultValue: false
+      description: "if icon is in a circle or not"
     },
     disabled: {
       type: "boolean",
-      description: "if icon is in a disabled or not",
-      defaultValue: false
+      description: "if icon is in a disabled or not"
     },
     tokenIcon: {
       type: "string",
-      description: "ref to the token icon to show as a sub icon",
-      defaultValue: ""
+      description: "ref to the token icon to show as a sub icon"
     }
   },
+  args: {
+    size: 32,
+    name: "BTC",
+    circleIcon: false,
+    disabled: false,
+    tokenIcon: ""
+  },
   parameters: {
     docs: {
       description: {

package/lib/cjs/components/asorted/Icon/CryptoIcons.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/asorted/Icon/CryptoIcons.stories.tsx"],
-  "sourcesContent": ["import React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport { Text, SearchInput, Flex, Grid, CryptoIcon } from \"../../..\";\nimport * as cryptoIcons from \"@ledgerhq/crypto-icons-ui/react\";\n\nconst description = `\n### A customizable crypto-icon component.\n\n### Props\n\n\\`\\`\\`tsx\ntype Props = {\n  name: string;\n  size?: number;\n  color?: string;\n  backgroundColor?: string; // overrides background color to ensure contrast with icon color\n  circleIcon?: boolean; // if icon is in a circle or not\n  tokenIcon?: string; // ref to the token icon to show as a sub icon\n  disabled?: boolean;\n  fallback?: JSX.Element; // fallback element if no icon found - defaults to an icon with first letter of icon name\n};\n\\`\\`\\`\n`;\n\ntype CryptoIconsProps = {\n  name: keyof typeof cryptoIcons;\n  size?: number;\n  color?: string;\n  circleIcon?: boolean;\n  disabled?: boolean;\n  tokenIcon?: string;\n};\n\nconst ScrollArea = styled(Grid)`\n  flex: 1;\n  height: auto;\n  ${p => p.theme.overflow.y};\n`;\n\nconst Container = styled(Flex).attrs({\n  flex: 1,\n  flexDirection: \"column\",\n  p: 4,\n})`\n  overflow: hidden;\n  height: calc(100vh - 4em);\n`;\n\nconst IconContainer = styled(Flex).attrs<{ active?: boolean }>({\n  flexDirection: \"column\",\n  justifyContent: \"flex-end\",\n  alignItems: \"center\",\n  p: 4,\n})<{ active?: boolean }>`\n  ${p => (p.active ? `background-color: ${p.theme.colors.neutral.c20};` : ``)}\n  border-radius: 4px;\n  height: 100px;\n`;\n\nconst Bold = styled.b`\n  color: ${p => p.theme.colors.primary.c80};\n`;\n\nconst Story = {\n  title: \"Asorted/CryptoIcons\",\n  argTypes: {\n    size: {\n      type: \"number\",\n      description: \"Icon size for preview\",\n      defaultValue: 32,\n    },\n    color: {\n      type: \"string\",\n      description: \"Color\",\n      control: { control: \"color\" },\n    },\n    name: {\n      type: \"enum\",\n      defaultValue: \"BTC\",\n      description: \"[Only for single icon], Icon name\",\n      control: {\n        options: Object.keys(cryptoIcons),\n        control: {\n          type: \"select\",\n        },\n      },\n    },\n    circleIcon: {\n      type: \"boolean\",\n      description: \"if icon is in a circle or not\",\n      defaultValue: false,\n    },\n    disabled: {\n      type: \"boolean\",\n      description: \"if icon is in a disabled or not\",\n      defaultValue: false,\n    },\n    tokenIcon: {\n      type: \"string\",\n      description: \"ref to the token icon to show as a sub icon\",\n      defaultValue: \"\",\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        component: description,\n      },\n    },\n  },\n};\nexport default Story;\n\nconst ListTemplate = (args: CryptoIconsProps) => {\n  const color = args.color || undefined;\n  const [search, setSearch] = useState(\"\");\n  const s = search.toLowerCase();\n  const regexp = new RegExp(s, \"i\");\n\n  const { tokenIcon, disabled, circleIcon, size } = args;\n\n  return (\n    <Container>\n      <SearchInput value={search} onChange={setSearch} />\n      <ScrollArea\n        gridTemplateColumns=\"repeat(auto-fill, 100px);\"\n        gridTemplateRows=\"repeat(auto-fill, 100px);\"\n        gridGap={4}\n        mt={4}\n      >\n        {Object.keys(cryptoIcons)\n          .sort((a, b) => {\n            return s ? b.toLowerCase().indexOf(s) - a.toLowerCase().indexOf(s) : a.localeCompare(b);\n          })\n          // @ts-expect-error FIXME I don't know how to make you happy ts\n          .map((name: keyof typeof cryptoIcons) => {\n            const match = name.match(regexp);\n            const active = s && match;\n            const index = match?.index ?? 0;\n            return (\n              <IconContainer active={!!active}>\n                <Flex flex={1} justifyContent=\"center\" alignItems=\"center\">\n                  <CryptoIcon\n                    key={name}\n                    name={name}\n                    size={size}\n                    color={color}\n                    disabled={disabled}\n                    circleIcon={circleIcon}\n                    tokenIcon={tokenIcon}\n                  />\n                </Flex>\n                <Text variant=\"extraSmall\">\n                  {active ? (\n                    <>\n                      {name.substr(0, index)}\n                      <Bold>{name.substr(index, s.length)}</Bold>\n                      {name.substr(index + s.length)}\n                    </>\n                  ) : (\n                    name\n                  )}\n                </Text>\n              </IconContainer>\n            );\n          })}\n      </ScrollArea>\n    </Container>\n  );\n};\nconst IconTemplate = (args: CryptoIconsProps) => {\n  const color = args.color || undefined;\n\n  return <CryptoIcon {...args} color={color} />;\n};\n\nexport const ListCryptoIcons = ListTemplate.bind({});\nexport const SingleCryptoIcon = IconTemplate.bind({});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport { Text, SearchInput, Flex, Grid, CryptoIcon } from \"../../..\";\nimport * as cryptoIcons from \"@ledgerhq/crypto-icons-ui/react\";\n\nconst description = `\n### A customizable crypto-icon component.\n\n### Props\n\n\\`\\`\\`tsx\ntype Props = {\n  name: string;\n  size?: number;\n  color?: string;\n  backgroundColor?: string; // overrides background color to ensure contrast with icon color\n  circleIcon?: boolean; // if icon is in a circle or not\n  tokenIcon?: string; // ref to the token icon to show as a sub icon\n  disabled?: boolean;\n  fallback?: JSX.Element; // fallback element if no icon found - defaults to an icon with first letter of icon name\n};\n\\`\\`\\`\n`;\n\ntype CryptoIconsProps = {\n  name: keyof typeof cryptoIcons;\n  size?: number;\n  color?: string;\n  circleIcon?: boolean;\n  disabled?: boolean;\n  tokenIcon?: string;\n};\n\nconst ScrollArea = styled(Grid)`\n  flex: 1;\n  height: auto;\n  ${p => p.theme.overflow.y};\n`;\n\nconst Container = styled(Flex).attrs({\n  flex: 1,\n  flexDirection: \"column\",\n  p: 4,\n})`\n  overflow: hidden;\n  height: calc(100vh - 4em);\n`;\n\nconst IconContainer = styled(Flex).attrs<{ active?: boolean }>({\n  flexDirection: \"column\",\n  justifyContent: \"flex-end\",\n  alignItems: \"center\",\n  p: 4,\n})<{ active?: boolean }>`\n  ${p => (p.active ? `background-color: ${p.theme.colors.neutral.c20};` : ``)}\n  border-radius: 4px;\n  height: 100px;\n`;\n\nconst Bold = styled.b`\n  color: ${p => p.theme.colors.primary.c80};\n`;\n\nconst Story = {\n  title: \"Asorted/CryptoIcons\",\n  argTypes: {\n    size: {\n      type: \"number\",\n      description: \"Icon size for preview\",\n    },\n    color: {\n      type: \"string\",\n      description: \"Color\",\n      control: { control: \"color\" },\n    },\n    name: {\n      type: \"enum\",\n      description: \"[Only for single icon], Icon name\",\n      control: {\n        options: Object.keys(cryptoIcons),\n        control: {\n          type: \"select\",\n        },\n      },\n    },\n    circleIcon: {\n      type: \"boolean\",\n      description: \"if icon is in a circle or not\",\n    },\n    disabled: {\n      type: \"boolean\",\n      description: \"if icon is in a disabled or not\",\n    },\n    tokenIcon: {\n      type: \"string\",\n      description: \"ref to the token icon to show as a sub icon\",\n    },\n  },\n  args: {\n    size: 32,\n    name: \"BTC\",\n    circleIcon: false,\n    disabled: false,\n    tokenIcon: \"\",\n  },\n  parameters: {\n    docs: {\n      description: {\n        component: description,\n      },\n    },\n  },\n};\nexport default Story;\n\nconst ListTemplate = (args: CryptoIconsProps) => {\n  const color = args.color || undefined;\n  const [search, setSearch] = useState(\"\");\n  const s = search.toLowerCase();\n  const regexp = new RegExp(s, \"i\");\n\n  const { tokenIcon, disabled, circleIcon, size } = args;\n\n  return (\n    <Container>\n      <SearchInput value={search} onChange={setSearch} />\n      <ScrollArea\n        gridTemplateColumns=\"repeat(auto-fill, 100px);\"\n        gridTemplateRows=\"repeat(auto-fill, 100px);\"\n        gridGap={4}\n        mt={4}\n      >\n        {Object.keys(cryptoIcons)\n          .sort((a, b) => {\n            return s ? b.toLowerCase().indexOf(s) - a.toLowerCase().indexOf(s) : a.localeCompare(b);\n          })\n          // @ts-expect-error FIXME I don't know how to make you happy ts\n          .map((name: keyof typeof cryptoIcons) => {\n            const match = name.match(regexp);\n            const active = s && match;\n            const index = match?.index ?? 0;\n            return (\n              <IconContainer active={!!active}>\n                <Flex flex={1} justifyContent=\"center\" alignItems=\"center\">\n                  <CryptoIcon\n                    key={name}\n                    name={name}\n                    size={size}\n                    color={color}\n                    disabled={disabled}\n                    circleIcon={circleIcon}\n                    tokenIcon={tokenIcon}\n                  />\n                </Flex>\n                <Text variant=\"extraSmall\">\n                  {active ? (\n                    <>\n                      {name.substr(0, index)}\n                      <Bold>{name.substr(index, s.length)}</Bold>\n                      {name.substr(index + s.length)}\n                    </>\n                  ) : (\n                    name\n                  )}\n                </Text>\n              </IconContainer>\n            );\n          })}\n      </ScrollArea>\n    </Container>\n  );\n};\nconst IconTemplate = (args: CryptoIconsProps) => {\n  const color = args.color || undefined;\n\n  return <CryptoIcon {...args} color={color} />;\n};\n\nexport const ListCryptoIcons = ListTemplate.bind({});\nexport const SingleCryptoIcon = IconTemplate.bind({});\n"],
+  "mappings": "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",
   "names": ["styled", "React"]
 }

package/lib/cjs/components/asorted/Icon/Icons.stories.js

@@ -78,4 +78,50 @@ IconGrid.argTypes = {
   color: { control: "color" },
   style: { control: "object" }
 };
+IconGrid.parameters = {
+  docs: {
+    description: {
+      component: `
+### Adding New Icons to @ledgerHQ/icons-ui Package
+
+1. **Access Figma Core File:**
+   - Navigate to the [Figma Core Library](https://www.figma.com/file/lbUZsVWtBdZpuHSv6lTY9U/%E2%9A%9B%EF%B8%8F-Core-Library?type=design&node-id=12801-12882&mode=design&t=jx0X8jco5kW0wHSP-0).
+
+2. **Export Medium-sized Icons as SVG:**
+   - In Figma, open the medium-sized icons.
+   - Select all the icons you want to export.
+   - Right-click and choose **Export**.
+   - Ensure that the export parameters are already set as needed (no modifications required).
+   - Export the selected icons as SVG files.
+
+3. **Drop Exported SVGs to icons Package:**
+   - Move all the exported SVG files to the \`libs/ui/packages/icons/src/svg\` directory in your project.
+
+4. **Build @ledgerHQ/icons-ui Package:**
+   - Run the command to build the \`@ledgerHQ/icons-ui\` package:
+    \`\`\`
+     cd libs/ui/packages/icons && pnpm build
+    \`\`\`
+   - Alternatively, you can build app dependencies using:
+     \`\`\`
+      pnpm build:llm:deps
+     \`\`\`
+   - This step ensures that the updated icons are built into the \`@ledgerHQ/icons-ui\` package.
+
+5. **Verify Changes Locally:**
+   - Start your local Storybook to ensure the new icons are rendering correctly:
+     \`\`\`
+      cd libs/ui/packages/react && pnpm storybook
+     \`\`\`
+   - Open your browser and navigate to [http://localhost:6006](http://localhost:6006).
+   - Check that the new icons are visible and functional in the Storybook UI.
+
+
+
+
+### Reference
+      `
+    }
+  }
+};
 //# sourceMappingURL=Icons.stories.js.map

package/lib/cjs/components/asorted/Icon/Icons.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/asorted/Icon/Icons.stories.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport { Story, Meta } from \"@storybook/react\";\nimport * as Icons from \"@ledgerhq/icons-ui/react\";\nimport styled from \"styled-components\";\nimport { Flex, Text } from \"../../..\";\nimport { useTheme } from \"styled-components\";\n\ninterface SizeData {\n  size: number;\n  stroke: number;\n}\n\ninterface AvailableSizes {\n  XS: SizeData;\n  S: SizeData;\n  M: SizeData;\n  L: SizeData;\n  XL: SizeData;\n}\n\nexport default {\n  title: \"asorted/Icons\",\n  component: null, // Since we're rendering multiple icons, we don't have a single component to import\n} as Meta;\n\ninterface IconProps {\n  size?: keyof AvailableSizes;\n  color?: string;\n  style?: React.CSSProperties;\n}\n\nconst IconContainer = styled(Flex).attrs<{ active?: boolean }>({\n  flexDirection: \"column\",\n  justifyContent: \"flex-end\",\n  alignItems: \"center\",\n  p: 4,\n  fill: \"black\",\n})<{ active?: boolean }>`\n  ${p => (p.active ? `background-color: ${p.theme.colors.neutral.c20};` : ``)}\n  border-radius: 4px;\n  height: 100px;\n`;\n\nconst IconGridTemplate: React.FC<IconProps> = ({ size, color, style }) => {\n  const iconNames = Object.keys(Icons) as (keyof typeof Icons)[];\n\n  const theme = useTheme();\n  const selectedColor = color || theme.colors.neutral.c100;\n\n  return (\n    <div style={{ display: \"grid\", gridTemplateColumns: \"repeat(4, 1fr)\", gap: \"10px\" }}>\n      {iconNames.map(iconName => {\n        const IconComponent = Icons[iconName];\n        return (\n          <IconContainer key={iconName}>\n            <IconComponent size={size} color={selectedColor} style={style} />\n            <Text pt={6}>{iconName}</Text>\n          </IconContainer>\n        );\n      })}\n    </div>\n  );\n};\n\nexport const IconGrid: Story<IconProps> = (args: IconProps) => <IconGridTemplate {...args} />;\n\nIconGrid.args = {\n  size: \"M\",\n  color: \"\",\n  style: {},\n};\n\nIconGrid.argTypes = {\n  size: {\n    control: {\n      type: \"select\",\n      options: [\"XS\", \"S\", \"M\", \"L\", \"XL\"],\n    },\n  },\n  color: { control: \"color\" },\n  style: { control: \"object\" },\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,YAAuB;AACvB,+BAAmB;AACnB,eAA2B;AAC3B,IAAAA,4BAAyB;AAezB,IAAO,wBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW;AAAA;AACb;AAQA,MAAM,oBAAgB,yBAAAC,SAAO,aAAI,EAAE,MAA4B;AAAA,EAC7D,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,GAAG;AAAA,EACH,MAAM;AACR,CAAC;AAAA,IACG,OAAM,EAAE,SAAS,qBAAqB,EAAE,MAAM,OAAO,QAAQ,GAAG,MAAM,EAAG;AAAA;AAAA;AAAA;AAK7E,MAAM,mBAAwC,CAAC,EAAE,MAAM,OAAO,MAAM,MAAM;AACxE,QAAM,YAAY,OAAO,KAAK,KAAK;AAEnC,QAAM,YAAQ,oCAAS;AACvB,QAAM,gBAAgB,SAAS,MAAM,OAAO,QAAQ;AAEpD,SACE,6BAAAC,QAAA,cAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,qBAAqB,kBAAkB,KAAK,OAAO,KAC/E,UAAU,IAAI,cAAY;AACzB,UAAM,gBAAgB,MAAM,QAAQ;AACpC,WACE,6BAAAA,QAAA,cAAC,iBAAc,KAAK,YAClB,6BAAAA,QAAA,cAAC,iBAAc,MAAY,OAAO,eAAe,OAAc,GAC/D,6BAAAA,QAAA,cAAC,iBAAK,IAAI,KAAI,QAAS,CACzB;AAAA,EAEJ,CAAC,CACH;AAEJ;AAEO,MAAM,WAA6B,CAAC,SAAoB,6BAAAA,QAAA,cAAC,oBAAkB,GAAG,MAAM;AAE3F,SAAS,OAAO;AAAA,EACd,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO,CAAC;AACV;AAEA,SAAS,WAAW;AAAA,EAClB,MAAM;AAAA,IACJ,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS,CAAC,MAAM,KAAK,KAAK,KAAK,IAAI;AAAA,IACrC;AAAA,EACF;AAAA,EACA,OAAO,EAAE,SAAS,QAAQ;AAAA,EAC1B,OAAO,EAAE,SAAS,SAAS;AAC7B;",
+  "sourcesContent": ["import React from \"react\";\nimport { Story, Meta } from \"@storybook/react\";\nimport * as Icons from \"@ledgerhq/icons-ui/react\";\nimport styled from \"styled-components\";\nimport { Flex, Text } from \"../../..\";\nimport { useTheme } from \"styled-components\";\n\ninterface SizeData {\n  size: number;\n  stroke: number;\n}\n\ninterface AvailableSizes {\n  XS: SizeData;\n  S: SizeData;\n  M: SizeData;\n  L: SizeData;\n  XL: SizeData;\n}\n\nexport default {\n  title: \"asorted/Icons\",\n  component: null, // Since we're rendering multiple icons, we don't have a single component to import\n} as Meta;\n\ninterface IconProps {\n  size?: keyof AvailableSizes;\n  color?: string;\n  style?: React.CSSProperties;\n}\n\nconst IconContainer = styled(Flex).attrs<{ active?: boolean }>({\n  flexDirection: \"column\",\n  justifyContent: \"flex-end\",\n  alignItems: \"center\",\n  p: 4,\n  fill: \"black\",\n})<{ active?: boolean }>`\n  ${p => (p.active ? `background-color: ${p.theme.colors.neutral.c20};` : ``)}\n  border-radius: 4px;\n  height: 100px;\n`;\n\nconst IconGridTemplate: React.FC<IconProps> = ({ size, color, style }) => {\n  const iconNames = Object.keys(Icons) as (keyof typeof Icons)[];\n\n  const theme = useTheme();\n  const selectedColor = color || theme.colors.neutral.c100;\n\n  return (\n    <div style={{ display: \"grid\", gridTemplateColumns: \"repeat(4, 1fr)\", gap: \"10px\" }}>\n      {iconNames.map(iconName => {\n        const IconComponent = Icons[iconName];\n        return (\n          <IconContainer key={iconName}>\n            <IconComponent size={size} color={selectedColor} style={style} />\n            <Text pt={6}>{iconName}</Text>\n          </IconContainer>\n        );\n      })}\n    </div>\n  );\n};\n\nexport const IconGrid: Story<IconProps> = (args: IconProps) => <IconGridTemplate {...args} />;\n\nIconGrid.args = {\n  size: \"M\",\n  color: \"\",\n  style: {},\n};\n\nIconGrid.argTypes = {\n  size: {\n    control: {\n      type: \"select\",\n      options: [\"XS\", \"S\", \"M\", \"L\", \"XL\"],\n    },\n  },\n  color: { control: \"color\" },\n  style: { control: \"object\" },\n};\n\nIconGrid.parameters = {\n  docs: {\n    description: {\n      component: `\n### Adding New Icons to @ledgerHQ/icons-ui Package\n\n1. **Access Figma Core File:**\n   - Navigate to the [Figma Core Library](https://www.figma.com/file/lbUZsVWtBdZpuHSv6lTY9U/%E2%9A%9B%EF%B8%8F-Core-Library?type=design&node-id=12801-12882&mode=design&t=jx0X8jco5kW0wHSP-0).\n\n2. **Export Medium-sized Icons as SVG:**\n   - In Figma, open the medium-sized icons.\n   - Select all the icons you want to export.\n   - Right-click and choose **Export**.\n   - Ensure that the export parameters are already set as needed (no modifications required).\n   - Export the selected icons as SVG files.\n\n3. **Drop Exported SVGs to icons Package:**\n   - Move all the exported SVG files to the \\`libs/ui/packages/icons/src/svg\\` directory in your project.\n\n4. **Build @ledgerHQ/icons-ui Package:**\n   - Run the command to build the \\`@ledgerHQ/icons-ui\\` package:\n    \\`\\`\\`\n     cd libs/ui/packages/icons && pnpm build\n    \\`\\`\\`\n   - Alternatively, you can build app dependencies using:\n     \\`\\`\\`\n      pnpm build:llm:deps\n     \\`\\`\\`\n   - This step ensures that the updated icons are built into the \\`@ledgerHQ/icons-ui\\` package.\n\n5. **Verify Changes Locally:**\n   - Start your local Storybook to ensure the new icons are rendering correctly:\n     \\`\\`\\`\n      cd libs/ui/packages/react && pnpm storybook\n     \\`\\`\\`\n   - Open your browser and navigate to [http://localhost:6006](http://localhost:6006).\n   - Check that the new icons are visible and functional in the Storybook UI.\n\\n\n\\n\n### Reference\n      `,\n    },\n  },\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,YAAuB;AACvB,+BAAmB;AACnB,eAA2B;AAC3B,IAAAA,4BAAyB;AAezB,IAAO,wBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW;AAAA;AACb;AAQA,MAAM,oBAAgB,yBAAAC,SAAO,aAAI,EAAE,MAA4B;AAAA,EAC7D,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,GAAG;AAAA,EACH,MAAM;AACR,CAAC;AAAA,IACG,OAAM,EAAE,SAAS,qBAAqB,EAAE,MAAM,OAAO,QAAQ,GAAG,MAAM,EAAG;AAAA;AAAA;AAAA;AAK7E,MAAM,mBAAwC,CAAC,EAAE,MAAM,OAAO,MAAM,MAAM;AACxE,QAAM,YAAY,OAAO,KAAK,KAAK;AAEnC,QAAM,YAAQ,oCAAS;AACvB,QAAM,gBAAgB,SAAS,MAAM,OAAO,QAAQ;AAEpD,SACE,6BAAAC,QAAA,cAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,qBAAqB,kBAAkB,KAAK,OAAO,KAC/E,UAAU,IAAI,cAAY;AACzB,UAAM,gBAAgB,MAAM,QAAQ;AACpC,WACE,6BAAAA,QAAA,cAAC,iBAAc,KAAK,YAClB,6BAAAA,QAAA,cAAC,iBAAc,MAAY,OAAO,eAAe,OAAc,GAC/D,6BAAAA,QAAA,cAAC,iBAAK,IAAI,KAAI,QAAS,CACzB;AAAA,EAEJ,CAAC,CACH;AAEJ;AAEO,MAAM,WAA6B,CAAC,SAAoB,6BAAAA,QAAA,cAAC,oBAAkB,GAAG,MAAM;AAE3F,SAAS,OAAO;AAAA,EACd,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO,CAAC;AACV;AAEA,SAAS,WAAW;AAAA,EAClB,MAAM;AAAA,IACJ,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS,CAAC,MAAM,KAAK,KAAK,KAAK,IAAI;AAAA,IACrC;AAAA,EACF;AAAA,EACA,OAAO,EAAE,SAAS,QAAQ;AAAA,EAC1B,OAAO,EAAE,SAAS,SAAS;AAC7B;AAEA,SAAS,aAAa;AAAA,EACpB,MAAM;AAAA,IACJ,aAAa;AAAA,MACX,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAsCb;AAAA,EACF;AACF;",
   "names": ["import_styled_components", "styled", "React"]
 }

package/lib/cjs/components/asorted/Icon/IconsLegacy.stories.js

@@ -70,35 +70,43 @@ const Story = {
     weight: {
       type: "enum",
       description: "Weight (Deprecated)",
-      defaultValue: "Medium",
-      control: {
-        options: ["Medium"],
-        control: {
-          type: "select"
-        }
+      options: ["Medium"],
+      control: { type: "select" },
+      table: {
+        type: { summary: "enum" },
+        defaultValue: { summary: "Medium" }
       }
     },
     size: {
       type: "number",
       description: "Icon size for preview",
-      defaultValue: 32
+      table: {
+        type: { summary: "number" },
+        defaultValue: { summary: "32" }
+      }
     },
     color: {
       type: "string",
-      description: "Color",
-      control: { control: "color" }
+      description: "Icon color",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "theme.colors.neutral.c100" }
+      }
     },
     name: {
       type: "enum",
-      defaultValue: "Activity",
-      description: "[Only for single icon], Icon name",
-      control: {
-        options: import_Icon.iconNames,
-        control: {
-          type: "select"
-        }
+      description: "Icon name",
+      options: import_Icon.iconNames,
+      control: { type: "select" },
+      table: {
+        type: { summary: "enum" }
       }
     }
+  },
+  args: {
+    weight: "Medium",
+    size: 32,
+    name: "Activity"
   }
 };
 var IconsLegacy_stories_default = Story;
@@ -140,6 +148,6 @@ const IconTemplate = (args) => {
   const color = args.color || theme.colors.neutral.c100;
   return /* @__PURE__ */ import_react.default.createElement(import_Icon.default, { ...args, color });
 };
-const List = ListTemplate.bind({});
 const SingleIcon = IconTemplate.bind({});
+const List = ListTemplate.bind({});
 //# sourceMappingURL=IconsLegacy.stories.js.map

package/lib/cjs/components/asorted/Icon/IconsLegacy.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/asorted/Icon/IconsLegacy.stories.tsx"],
-  "sourcesContent": ["import React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport Icon, { iconNames, Props as IconProps } from \"./Icon\";\nimport { useTheme } from \"styled-components\";\nimport { Text, SearchInput, Flex, Grid } from \"../../..\";\n\nconst ScrollArea = styled(Grid)`\n  flex: 1;\n  height: auto;\n  ${p => p.theme.overflow.y};\n`;\n\nconst Container = styled(Flex).attrs({\n  flex: 1,\n  flexDirection: \"column\",\n  p: 4,\n})`\n  overflow: hidden;\n  height: calc(100vh - 4em);\n`;\n\nconst IconContainer = styled(Flex).attrs<{ active?: boolean }>({\n  flexDirection: \"column\",\n  justifyContent: \"flex-end\",\n  alignItems: \"center\",\n  p: 4,\n})<{ active?: boolean }>`\n  ${p => (p.active ? `background-color: ${p.theme.colors.neutral.c20};` : ``)}\n  border-radius: 4px;\n  height: 100px;\n`;\n\nconst Bold = styled.b`\n  color: ${p => p.theme.colors.primary.c80};\n`;\n\nconst Story = {\n  title: \"Asorted/Icons/Icons(legacy)\",\n  argTypes: {\n    weight: {\n      type: \"enum\",\n      description: \"Weight (Deprecated)\",\n      defaultValue: \"Medium\",\n      control: {\n        options: [\"Medium\"],\n        control: {\n          type: \"select\",\n        },\n      },\n    },\n    size: {\n      type: \"number\",\n      description: \"Icon size for preview\",\n      defaultValue: 32,\n    },\n    color: {\n      type: \"string\",\n      description: \"Color\",\n      control: { control: \"color\" },\n    },\n    name: {\n      type: \"enum\",\n      defaultValue: \"Activity\",\n      description: \"[Only for single icon], Icon name\",\n      control: {\n        options: iconNames,\n        control: {\n          type: \"select\",\n        },\n      },\n    },\n  },\n};\nexport default Story;\n\nconst ListTemplate = (args: IconProps) => {\n  const theme = useTheme();\n  const color = args.color || theme.colors.neutral.c100;\n  const [search, setSearch] = useState(\"\");\n  const s = search.toLowerCase();\n  const regexp = new RegExp(s, \"i\");\n\n  return (\n    <Container>\n      <SearchInput value={search} onChange={setSearch} />\n      <ScrollArea\n        gridTemplateColumns=\"repeat(auto-fill, 100px);\"\n        gridTemplateRows=\"repeat(auto-fill, 100px);\"\n        gridGap={4}\n        mt={4}\n      >\n        {iconNames\n          .sort((a: string, b: string) => {\n            return s ? b.toLowerCase().indexOf(s) - a.toLowerCase().indexOf(s) : a.localeCompare(b);\n          })\n          .map(name => {\n            const match = name.match(regexp);\n            const active = s && match;\n            const index = match?.index ?? 0;\n            return (\n              <IconContainer active={!!active}>\n                <Flex flex={1} justifyContent=\"center\" alignItems=\"center\">\n                  <Icon\n                    key={name}\n                    name={name}\n                    weight={args.weight}\n                    size={args.size}\n                    color={color}\n                  />\n                </Flex>\n                <Text variant=\"extraSmall\">\n                  {active ? (\n                    <>\n                      {name.substr(0, index)}\n                      <Bold>{name.substr(index, s.length)}</Bold>\n                      {name.substr(index + s.length)}\n                    </>\n                  ) : (\n                    name\n                  )}\n                </Text>\n              </IconContainer>\n            );\n          })}\n      </ScrollArea>\n    </Container>\n  );\n};\nconst IconTemplate = (args: IconProps) => {\n  const theme = useTheme();\n  const color = args.color || theme.colors.neutral.c100;\n\n  return <Icon {...args} color={color} />;\n};\n\nexport const List = ListTemplate.bind({});\nexport const SingleIcon = IconTemplate.bind({});\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,+BAAmB;AACnB,kBAAoD;AACpD,IAAAA,4BAAyB;AACzB,eAA8C;AAE9C,MAAM,iBAAa,yBAAAC,SAAO,aAAI;AAAA;AAAA;AAAA,IAG1B,OAAK,EAAE,MAAM,SAAS,CAAC;AAAA;AAG3B,MAAM,gBAAY,yBAAAA,SAAO,aAAI,EAAE,MAAM;AAAA,EACnC,MAAM;AAAA,EACN,eAAe;AAAA,EACf,GAAG;AACL,CAAC;AAAA;AAAA;AAAA;AAKD,MAAM,oBAAgB,yBAAAA,SAAO,aAAI,EAAE,MAA4B;AAAA,EAC7D,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,GAAG;AACL,CAAC;AAAA,IACG,OAAM,EAAE,SAAS,qBAAqB,EAAE,MAAM,OAAO,QAAQ,GAAG,MAAM,EAAG;AAAA;AAAA;AAAA;AAK7E,MAAM,OAAO,yBAAAA,QAAO;AAAA,WACT,OAAK,EAAE,MAAM,OAAO,QAAQ,GAAG;AAAA;AAG1C,MAAM,QAAQ;AAAA,EACZ,OAAO;AAAA,EACP,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,aAAa;AAAA,MACb,cAAc;AAAA,MACd,SAAS;AAAA,QACP,SAAS,CAAC,QAAQ;AAAA,QAClB,SAAS;AAAA,UACP,MAAM;AAAA,QACR;AAAA,MACF;AAAA,IACF;AAAA,IACA,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,aAAa;AAAA,MACb,cAAc;AAAA,IAChB;AAAA,IACA,OAAO;AAAA,MACL,MAAM;AAAA,MACN,aAAa;AAAA,MACb,SAAS,EAAE,SAAS,QAAQ;AAAA,IAC9B;AAAA,IACA,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,cAAc;AAAA,MACd,aAAa;AAAA,MACb,SAAS;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,UACP,MAAM;AAAA,QACR;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;AACA,IAAO,8BAAQ;AAEf,MAAM,eAAe,CAAC,SAAoB;AACxC,QAAM,YAAQ,oCAAS;AACvB,QAAM,QAAQ,KAAK,SAAS,MAAM,OAAO,QAAQ;AACjD,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAS,EAAE;AACvC,QAAM,IAAI,OAAO,YAAY;AAC7B,QAAM,SAAS,IAAI,OAAO,GAAG,GAAG;AAEhC,SACE,6BAAAC,QAAA,cAAC,iBACC,6BAAAA,QAAA,cAAC,wBAAY,OAAO,QAAQ,UAAU,WAAW,GACjD,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,qBAAoB;AAAA,MACpB,kBAAiB;AAAA,MACjB,SAAS;AAAA,MACT,IAAI;AAAA;AAAA,IAEH,sBACE,KAAK,CAAC,GAAW,MAAc;AAC9B,aAAO,IAAI,EAAE,YAAY,EAAE,QAAQ,CAAC,IAAI,EAAE,YAAY,EAAE,QAAQ,CAAC,IAAI,EAAE,cAAc,CAAC;AAAA,IACxF,CAAC,EACA,IAAI,UAAQ;AACX,YAAM,QAAQ,KAAK,MAAM,MAAM;AAC/B,YAAM,SAAS,KAAK;AACpB,YAAM,SAAQ,+BAAO,UAAS;AAC9B,aACE,6BAAAA,QAAA,cAAC,iBAAc,QAAQ,CAAC,CAAC,UACvB,6BAAAA,QAAA,cAAC,iBAAK,MAAM,GAAG,gBAAe,UAAS,YAAW,YAChD,6BAAAA,QAAA;AAAA,QAAC,YAAAC;AAAA,QAAA;AAAA,UACC,KAAK;AAAA,UACL;AAAA,UACA,QAAQ,KAAK;AAAA,UACb,MAAM,KAAK;AAAA,UACX;AAAA;AAAA,MACF,CACF,GACA,6BAAAD,QAAA,cAAC,iBAAK,SAAQ,gBACX,SACC,6BAAAA,QAAA,2BAAAA,QAAA,gBACG,KAAK,OAAO,GAAG,KAAK,GACrB,6BAAAA,QAAA,cAAC,YAAM,KAAK,OAAO,OAAO,EAAE,MAAM,CAAE,GACnC,KAAK,OAAO,QAAQ,EAAE,MAAM,CAC/B,IAEA,IAEJ,CACF;AAAA,IAEJ,CAAC;AAAA,EACL,CACF;AAEJ;AACA,MAAM,eAAe,CAAC,SAAoB;AACxC,QAAM,YAAQ,oCAAS;AACvB,QAAM,QAAQ,KAAK,SAAS,MAAM,OAAO,QAAQ;AAEjD,SAAO,6BAAAA,QAAA,cAAC,YAAAC,SAAA,EAAM,GAAG,MAAM,OAAc;AACvC;AAEO,MAAM,OAAO,aAAa,KAAK,CAAC,CAAC;AACjC,MAAM,aAAa,aAAa,KAAK,CAAC,CAAC;",
+  "sourcesContent": ["import React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport Icon, { iconNames, Props as IconProps } from \"./Icon\";\nimport { useTheme } from \"styled-components\";\nimport { Text, SearchInput, Flex, Grid } from \"../../..\";\n\nconst ScrollArea = styled(Grid)`\n  flex: 1;\n  height: auto;\n  ${p => p.theme.overflow.y};\n`;\n\nconst Container = styled(Flex).attrs({\n  flex: 1,\n  flexDirection: \"column\",\n  p: 4,\n})`\n  overflow: hidden;\n  height: calc(100vh - 4em);\n`;\n\nconst IconContainer = styled(Flex).attrs<{ active?: boolean }>({\n  flexDirection: \"column\",\n  justifyContent: \"flex-end\",\n  alignItems: \"center\",\n  p: 4,\n})<{ active?: boolean }>`\n  ${p => (p.active ? `background-color: ${p.theme.colors.neutral.c20};` : ``)}\n  border-radius: 4px;\n  height: 100px;\n`;\n\nconst Bold = styled.b`\n  color: ${p => p.theme.colors.primary.c80};\n`;\n\nconst Story = {\n  title: \"Asorted/Icons/Icons(legacy)\",\n  argTypes: {\n    weight: {\n      type: \"enum\",\n      description: \"Weight (Deprecated)\",\n      options: [\"Medium\"],\n      control: { type: \"select\" },\n      table: {\n        type: { summary: \"enum\" },\n        defaultValue: { summary: \"Medium\" },\n      },\n    },\n    size: {\n      type: \"number\",\n      description: \"Icon size for preview\",\n      table: {\n        type: { summary: \"number\" },\n        defaultValue: { summary: \"32\" },\n      },\n    },\n    color: {\n      type: \"string\",\n      description: \"Icon color\",\n      table: {\n        type: { summary: \"string\" },\n        defaultValue: { summary: \"theme.colors.neutral.c100\" },\n      },\n    },\n    name: {\n      type: \"enum\",\n      description: \"Icon name\",\n      options: iconNames,\n      control: { type: \"select\" },\n      table: {\n        type: { summary: \"enum\" },\n      },\n    },\n  },\n  args: {\n    weight: \"Medium\",\n    size: 32,\n    name: \"Activity\",\n  },\n};\nexport default Story;\n\nconst ListTemplate = (args: IconProps) => {\n  const theme = useTheme();\n  const color = args.color || theme.colors.neutral.c100;\n  const [search, setSearch] = useState(\"\");\n  const s = search.toLowerCase();\n  const regexp = new RegExp(s, \"i\");\n\n  return (\n    <Container>\n      <SearchInput value={search} onChange={setSearch} />\n      <ScrollArea\n        gridTemplateColumns=\"repeat(auto-fill, 100px);\"\n        gridTemplateRows=\"repeat(auto-fill, 100px);\"\n        gridGap={4}\n        mt={4}\n      >\n        {iconNames\n          .sort((a: string, b: string) => {\n            return s ? b.toLowerCase().indexOf(s) - a.toLowerCase().indexOf(s) : a.localeCompare(b);\n          })\n          .map(name => {\n            const match = name.match(regexp);\n            const active = s && match;\n            const index = match?.index ?? 0;\n            return (\n              <IconContainer active={!!active}>\n                <Flex flex={1} justifyContent=\"center\" alignItems=\"center\">\n                  <Icon\n                    key={name}\n                    name={name}\n                    weight={args.weight}\n                    size={args.size}\n                    color={color}\n                  />\n                </Flex>\n                <Text variant=\"extraSmall\">\n                  {active ? (\n                    <>\n                      {name.substr(0, index)}\n                      <Bold>{name.substr(index, s.length)}</Bold>\n                      {name.substr(index + s.length)}\n                    </>\n                  ) : (\n                    name\n                  )}\n                </Text>\n              </IconContainer>\n            );\n          })}\n      </ScrollArea>\n    </Container>\n  );\n};\nconst IconTemplate = (args: IconProps) => {\n  const theme = useTheme();\n  const color = args.color || theme.colors.neutral.c100;\n\n  return <Icon {...args} color={color} />;\n};\n\nexport const SingleIcon = IconTemplate.bind({});\nexport const List = ListTemplate.bind({});\n"],
+  "mappings": "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",
   "names": ["import_styled_components", "styled", "React", "Icon"]
 }

package/lib/cjs/components/cta/Button/Button.stories.js

@@ -39,7 +39,7 @@ module.exports = __toCommonJS(Button_stories_exports);
 var import_react = __toESM(require("react"));
 var import_index = __toESM(require("./index"));
 var import_Text = __toESM(require("../../asorted/Text"));
-var import_reactLegacy = require("@ledgerhq/icons-ui/reactLegacy/");
+var import_reactLegacy = require("@ledgerhq/icons-ui/reactLegacy");
 var import_InvertTheme = require("../../../styles/InvertTheme");
 var import_Flex = __toESM(require("../../layout/Flex"));
 var import_Grid = __toESM(require("../../layout/Grid"));

package/lib/cjs/components/cta/Button/Button.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/cta/Button/Button.stories.tsx"],
-  "sourcesContent": ["import React, { Fragment } from \"react\";\nimport Button, { ButtonExpandProps, ButtonProps, ButtonVariants, IconPosition } from \"./index\";\nimport Text from \"../../asorted/Text\";\nimport { PlusMedium, WalletAddMedium } from \"@ledgerhq/icons-ui/reactLegacy/\";\nimport { InvertTheme } from \"../../../styles/InvertTheme\";\nimport Flex from \"../../layout/Flex\";\nimport Grid from \"../../layout/Grid\";\nimport { StoryTemplate } from \"../../helpers\";\n\nconst iconPositions: IconPosition[] = [\"left\", \"right\"];\nconst buttonVariants: ButtonVariants[] = [\"main\", \"shade\", \"color\", \"error\"];\n\nexport default {\n  title: \"cta/Button\",\n  component: Button,\n  argTypes: {\n    variant: {\n      options: [undefined, ...buttonVariants],\n      control: {\n        type: \"radio\",\n      },\n    },\n    size: {\n      options: [undefined, \"small\", \"medium\", \"large\"],\n      control: { type: \"radio\" },\n    },\n    fontSize: {\n      options: [undefined, 0, 1, 2, 3, 4, 5, 6, 7, 8],\n      control: {\n        type: \"radio\",\n      },\n    },\n    children: {\n      type: \"text\",\n    },\n    iconPosition: {\n      options: iconPositions,\n      control: {\n        type: \"radio\",\n      },\n    },\n    disabled: {\n      type: \"boolean\",\n    },\n    outline: {\n      type: \"boolean\",\n    },\n  },\n};\n\nexport const Overview = ((args: ButtonProps) => {\n  const templateProps = { Icon: PlusMedium, children: \"Try me\", onClick: () => {} };\n  const propsArr = [\n    { ...templateProps, Icon: undefined },\n    { ...templateProps, iconPosition: iconPositions[0] },\n    { ...templateProps, iconPosition: iconPositions[1] },\n    { ...templateProps, children: \"\" },\n  ];\n  return (\n    <Grid columns=\"none\" gridTemplateColumns=\"max-content repeat(4, 1fr)\" columnGap={8} rowGap={8}>\n      {buttonVariants.flatMap((buttonType, i) =>\n        [false, true].map((outline, j) => (\n          <Fragment key={`${i}:${j}`}>\n            <Text variant=\"small\" color=\"neutral.c70\">\n              variant=\"{buttonType}\"<br />\n              outline={`{${outline.toString()}}`}\n            </Text>\n            {propsArr.map(buttonProps => (\n              <Flex flex={1} columnGap={4}>\n                {[false, true].map(disabled => (\n                  <Button\n                    size={args.size}\n                    variant={buttonType}\n                    outline={outline}\n                    disabled={disabled}\n                    {...buttonProps}\n                  />\n                ))}\n              </Flex>\n            ))}\n          </Fragment>\n        )),\n      )}\n    </Grid>\n  );\n}).bind({});\n\nexport const Default: StoryTemplate<ButtonProps> = args => {\n  return <Button {...args}>{args.children || \"Regular button\"}</Button>;\n};\n\nexport const Inverted: StoryTemplate<ButtonProps> = args => {\n  return (\n    <Flex flexDirection=\"column\">\n      <Flex flex=\"0 0 1\" p={4} alignItems=\"center\" bg=\"background.main\">\n        <Button {...args}>{args.children || \"Regular button\"}</Button>\n      </Flex>\n      <InvertTheme>\n        <Flex flex=\"0 0 1\" p={4} alignItems=\"center\" bg=\"background.main\">\n          <Button {...args}>{args.children || \"Inverted button\"}</Button>\n        </Flex>\n      </InvertTheme>\n    </Flex>\n  );\n};\n\nexport const IconButton: StoryTemplate<ButtonProps> = args => {\n  return <Button {...args}>{args.children || \"Regular button\"}</Button>;\n};\nIconButton.args = {\n  children: \"\",\n  Icon: WalletAddMedium,\n  iconPosition: \"right\",\n};\n\nexport const Expand: StoryTemplate<ButtonProps> = (args: ButtonExpandProps) => {\n  const [show, setShow] = React.useState(false);\n  return (\n    <>\n      <Button.Expand {...args} onToggle={setShow}>\n        {args.children}\n      </Button.Expand>\n      {show && (\n        <div\n          style={{\n            padding: \"1rem\",\n          }}\n        >\n          Hello world!\n        </div>\n      )}\n    </>\n  );\n};\nExpand.args = {\n  children: \"Show all\",\n};\n"],
+  "sourcesContent": ["import React, { Fragment } from \"react\";\nimport Button, { ButtonExpandProps, ButtonProps, ButtonVariants, IconPosition } from \"./index\";\nimport Text from \"../../asorted/Text\";\nimport { PlusMedium, WalletAddMedium } from \"@ledgerhq/icons-ui/reactLegacy\";\nimport { InvertTheme } from \"../../../styles/InvertTheme\";\nimport Flex from \"../../layout/Flex\";\nimport Grid from \"../../layout/Grid\";\nimport { StoryTemplate } from \"../../helpers\";\n\nconst iconPositions: IconPosition[] = [\"left\", \"right\"];\nconst buttonVariants: ButtonVariants[] = [\"main\", \"shade\", \"color\", \"error\"];\n\nexport default {\n  title: \"cta/Button\",\n  component: Button,\n  argTypes: {\n    variant: {\n      options: [undefined, ...buttonVariants],\n      control: {\n        type: \"radio\",\n      },\n    },\n    size: {\n      options: [undefined, \"small\", \"medium\", \"large\"],\n      control: { type: \"radio\" },\n    },\n    fontSize: {\n      options: [undefined, 0, 1, 2, 3, 4, 5, 6, 7, 8],\n      control: {\n        type: \"radio\",\n      },\n    },\n    children: {\n      type: \"text\",\n    },\n    iconPosition: {\n      options: iconPositions,\n      control: {\n        type: \"radio\",\n      },\n    },\n    disabled: {\n      type: \"boolean\",\n    },\n    outline: {\n      type: \"boolean\",\n    },\n  },\n};\n\nexport const Overview = ((args: ButtonProps) => {\n  const templateProps = { Icon: PlusMedium, children: \"Try me\", onClick: () => {} };\n  const propsArr = [\n    { ...templateProps, Icon: undefined },\n    { ...templateProps, iconPosition: iconPositions[0] },\n    { ...templateProps, iconPosition: iconPositions[1] },\n    { ...templateProps, children: \"\" },\n  ];\n  return (\n    <Grid columns=\"none\" gridTemplateColumns=\"max-content repeat(4, 1fr)\" columnGap={8} rowGap={8}>\n      {buttonVariants.flatMap((buttonType, i) =>\n        [false, true].map((outline, j) => (\n          <Fragment key={`${i}:${j}`}>\n            <Text variant=\"small\" color=\"neutral.c70\">\n              variant=\"{buttonType}\"<br />\n              outline={`{${outline.toString()}}`}\n            </Text>\n            {propsArr.map(buttonProps => (\n              <Flex flex={1} columnGap={4}>\n                {[false, true].map(disabled => (\n                  <Button\n                    size={args.size}\n                    variant={buttonType}\n                    outline={outline}\n                    disabled={disabled}\n                    {...buttonProps}\n                  />\n                ))}\n              </Flex>\n            ))}\n          </Fragment>\n        )),\n      )}\n    </Grid>\n  );\n}).bind({});\n\nexport const Default: StoryTemplate<ButtonProps> = args => {\n  return <Button {...args}>{args.children || \"Regular button\"}</Button>;\n};\n\nexport const Inverted: StoryTemplate<ButtonProps> = args => {\n  return (\n    <Flex flexDirection=\"column\">\n      <Flex flex=\"0 0 1\" p={4} alignItems=\"center\" bg=\"background.main\">\n        <Button {...args}>{args.children || \"Regular button\"}</Button>\n      </Flex>\n      <InvertTheme>\n        <Flex flex=\"0 0 1\" p={4} alignItems=\"center\" bg=\"background.main\">\n          <Button {...args}>{args.children || \"Inverted button\"}</Button>\n        </Flex>\n      </InvertTheme>\n    </Flex>\n  );\n};\n\nexport const IconButton: StoryTemplate<ButtonProps> = args => {\n  return <Button {...args}>{args.children || \"Regular button\"}</Button>;\n};\nIconButton.args = {\n  children: \"\",\n  Icon: WalletAddMedium,\n  iconPosition: \"right\",\n};\n\nexport const Expand: StoryTemplate<ButtonProps> = (args: ButtonExpandProps) => {\n  const [show, setShow] = React.useState(false);\n  return (\n    <>\n      <Button.Expand {...args} onToggle={setShow}>\n        {args.children}\n      </Button.Expand>\n      {show && (\n        <div\n          style={{\n            padding: \"1rem\",\n          }}\n        >\n          Hello world!\n        </div>\n      )}\n    </>\n  );\n};\nExpand.args = {\n  children: \"Show all\",\n};\n"],
   "mappings": "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",
   "names": ["Button", "React", "Grid", "Text", "Flex"]
 }

package/lib/cjs/components/form/Dropdown/Dropdown.stories.js

@@ -45,7 +45,10 @@ var Dropdown_stories_default = {
     isDisabled: { type: "boolean" },
     error: { type: "string" },
     menuIsOpen: { type: "boolean" },
-    label: { type: "string", defaultValue: "Label" }
+    label: { type: "string" }
+  },
+  args: {
+    label: "Label"
   }
 };
 const options = [

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/form/Dropdown/Dropdown.stories.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport DropdownComponent, { Props as DropdownProps } from \".\";\n\nexport default {\n  title: \"Form/SelectAndDialogs/Dropdown\",\n  component: DropdownComponent,\n  argTypes: {\n    value: { table: { disable: true } },\n    renderLeft: { table: { disable: true } },\n    renderRight: { table: { disable: true } },\n    rowHeight: { table: { disable: true } },\n    isDisabled: { type: \"boolean\" },\n    error: { type: \"string\" },\n    menuIsOpen: { type: \"boolean\" },\n    label: { type: \"string\", defaultValue: \"Label\" },\n  },\n};\n\nconst options = [\n  { value: \"chocolate\", label: \"Chocolate\" },\n  { value: \"strawberry\", label: \"Strawberry\" },\n  { value: \"lemon\", label: \"Lemon\" },\n  { value: \"vanilla\", label: \"Vanilla\" },\n];\ntype Option = (typeof options)[0];\n\nexport const Dropdown = (args: DropdownProps<Option>): React.ReactNode => {\n  const [value, setValue] = React.useState<Option | null>(null);\n\n  return (\n    <DropdownComponent\n      options={options}\n      value={value}\n      onChange={setValue}\n      menuPortalTarget={document.body}\n      {...args}\n    />\n  );\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,eAA0D;AAE1D,IAAO,2BAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,SAAAA;AAAA,EACX,UAAU;AAAA,IACR,OAAO,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,IAClC,YAAY,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,IACvC,aAAa,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,IACxC,WAAW,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,IACtC,YAAY,EAAE,MAAM,UAAU;AAAA,IAC9B,OAAO,EAAE,MAAM,SAAS;AAAA,IACxB,YAAY,EAAE,MAAM,UAAU;AAAA,IAC9B,OAAO,EAAE,MAAM,UAAU,cAAc,QAAQ;AAAA,EACjD;AACF;AAEA,MAAM,UAAU;AAAA,EACd,EAAE,OAAO,aAAa,OAAO,YAAY;AAAA,EACzC,EAAE,OAAO,cAAc,OAAO,aAAa;AAAA,EAC3C,EAAE,OAAO,SAAS,OAAO,QAAQ;AAAA,EACjC,EAAE,OAAO,WAAW,OAAO,UAAU;AACvC;AAGO,MAAM,WAAW,CAAC,SAAiD;AACxE,QAAM,CAAC,OAAO,QAAQ,IAAI,aAAAC,QAAM,SAAwB,IAAI;AAE5D,SACE,6BAAAA,QAAA;AAAA,IAAC,SAAAD;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,kBAAkB,SAAS;AAAA,MAC1B,GAAG;AAAA;AAAA,EACN;AAEJ;",
+  "sourcesContent": ["import React from \"react\";\nimport DropdownComponent, { Props as DropdownProps } from \".\";\n\nexport default {\n  title: \"Form/SelectAndDialogs/Dropdown\",\n  component: DropdownComponent,\n  argTypes: {\n    value: { table: { disable: true } },\n    renderLeft: { table: { disable: true } },\n    renderRight: { table: { disable: true } },\n    rowHeight: { table: { disable: true } },\n    isDisabled: { type: \"boolean\" },\n    error: { type: \"string\" },\n    menuIsOpen: { type: \"boolean\" },\n    label: { type: \"string\" },\n  },\n  args: {\n    label: \"Label\",\n  },\n};\n\nconst options = [\n  { value: \"chocolate\", label: \"Chocolate\" },\n  { value: \"strawberry\", label: \"Strawberry\" },\n  { value: \"lemon\", label: \"Lemon\" },\n  { value: \"vanilla\", label: \"Vanilla\" },\n];\ntype Option = (typeof options)[0];\n\nexport const Dropdown = (args: DropdownProps<Option>): React.ReactNode => {\n  const [value, setValue] = React.useState<Option | null>(null);\n\n  return (\n    <DropdownComponent\n      options={options}\n      value={value}\n      onChange={setValue}\n      menuPortalTarget={document.body}\n      {...args}\n    />\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,eAA0D;AAE1D,IAAO,2BAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,SAAAA;AAAA,EACX,UAAU;AAAA,IACR,OAAO,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,IAClC,YAAY,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,IACvC,aAAa,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,IACxC,WAAW,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,IACtC,YAAY,EAAE,MAAM,UAAU;AAAA,IAC9B,OAAO,EAAE,MAAM,SAAS;AAAA,IACxB,YAAY,EAAE,MAAM,UAAU;AAAA,IAC9B,OAAO,EAAE,MAAM,SAAS;AAAA,EAC1B;AAAA,EACA,MAAM;AAAA,IACJ,OAAO;AAAA,EACT;AACF;AAEA,MAAM,UAAU;AAAA,EACd,EAAE,OAAO,aAAa,OAAO,YAAY;AAAA,EACzC,EAAE,OAAO,cAAc,OAAO,aAAa;AAAA,EAC3C,EAAE,OAAO,SAAS,OAAO,QAAQ;AAAA,EACjC,EAAE,OAAO,WAAW,OAAO,UAAU;AACvC;AAGO,MAAM,WAAW,CAAC,SAAiD;AACxE,QAAM,CAAC,OAAO,QAAQ,IAAI,aAAAC,QAAM,SAAwB,IAAI;AAE5D,SACE,6BAAAA,QAAA;AAAA,IAAC,SAAAD;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,kBAAkB,SAAS;AAAA,MAC1B,GAAG;AAAA;AAAA,EACN;AAEJ;",
   "names": ["DropdownComponent", "React"]
 }

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

@@ -105,12 +105,20 @@ var DropdownGeneric_stories_default = {
   title: "Form/SelectAndDialogs",
   component: import__.default,
   argTypes: {
-    label: { type: "string", defaultValue: "Label" },
-    placement: { control: { type: "select", defaultValue: "bottom" } },
-    closeOnClickOutside: { type: "boolean", defaultValue: true },
-    closeOnClickInside: { type: "boolean", defaultValue: false },
-    disabled: { type: "boolean", defaultValue: false },
-    flipDisabled: { type: "boolean", defaultValue: false }
+    label: { type: "string" },
+    placement: { control: { type: "select" } },
+    closeOnClickOutside: { type: "boolean" },
+    closeOnClickInside: { type: "boolean" },
+    disabled: { type: "boolean" },
+    flipDisabled: { type: "boolean" }
+  },
+  args: {
+    label: "Label",
+    placement: "bottom",
+    closeOnClickOutside: true,
+    closeOnClickInside: false,
+    disabled: false,
+    flipDisabled: false
   }
 };
 //# sourceMappingURL=DropdownGeneric.stories.js.map

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"]
 }