@ledgerhq/react-ui 0.14.3 → 0.14.4-next.0

package/lib/assets/icons.d.ts

@@ -1 +1 @@
-export * from "@ledgerhq/icons-ui/react";
+export * from "@ledgerhq/icons-ui/reactLegacy";

package/lib/assets/icons.js

@@ -1,2 +1,2 @@
-export * from "@ledgerhq/icons-ui/react";
+export * from "@ledgerhq/icons-ui/reactLegacy";
 //# sourceMappingURL=icons.js.map

package/lib/assets/icons.js.map

@@ -1 +1 @@
-{"version":3,"file":"icons.js","sourceRoot":"","sources":["../../src/assets/icons.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC"}
+{"version":3,"file":"icons.js","sourceRoot":"","sources":["../../src/assets/icons.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC"}

package/lib/assets/index.d.ts

@@ -1,3 +1,4 @@
+export * as IconsLegacy from "@ledgerhq/icons-ui/reactLegacy";
 export * as Icons from "@ledgerhq/icons-ui/react";
 export * as CryptoIcons from "@ledgerhq/crypto-icons-ui/react";
 export * as Logos from "./logos";

package/lib/assets/index.js

@@ -1,3 +1,5 @@
+import * as IconsLegacy_1 from "@ledgerhq/icons-ui/reactLegacy";
+export { IconsLegacy_1 as IconsLegacy };
 import * as Icons_1 from "@ledgerhq/icons-ui/react";
 export { Icons_1 as Icons };
 import * as CryptoIcons_1 from "@ledgerhq/crypto-icons-ui/react";

package/lib/assets/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/assets/index.ts"],"names":[],"mappings":"yBAAuB,0BAA0B;oBAArC,KAAK;+BACY,iCAAiC;0BAAlD,WAAW;yBACA,SAAS;oBAApB,KAAK"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/assets/index.ts"],"names":[],"mappings":"+BAA6B,gCAAgC;0BAAjD,WAAW;yBACA,0BAA0B;oBAArC,KAAK;+BACY,iCAAiC;0BAAlD,WAAW;yBACA,SAAS;oBAApB,KAAK"}

package/lib/cjs/assets/icons.js

@@ -15,5 +15,5 @@ var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "defau
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var icons_exports = {};
 module.exports = __toCommonJS(icons_exports);
-__reExport(icons_exports, require("@ledgerhq/icons-ui/react"), module.exports);
+__reExport(icons_exports, require("@ledgerhq/icons-ui/reactLegacy"), module.exports);
 //# sourceMappingURL=icons.js.map

package/lib/cjs/assets/icons.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/assets/icons.ts"],
-  "sourcesContent": ["export * from \"@ledgerhq/icons-ui/react\";\n"],
-  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,0BAAc,qCAAd;",
+  "sourcesContent": ["export * from \"@ledgerhq/icons-ui/reactLegacy\";\n"],
+  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,0BAAc,2CAAd;",
   "names": []
 }

package/lib/cjs/assets/index.js

@@ -30,9 +30,11 @@ var assets_exports = {};
 __export(assets_exports, {
   CryptoIcons: () => CryptoIcons,
   Icons: () => Icons,
+  IconsLegacy: () => IconsLegacy,
   Logos: () => Logos
 });
 module.exports = __toCommonJS(assets_exports);
+var IconsLegacy = __toESM(require("@ledgerhq/icons-ui/reactLegacy"));
 var Icons = __toESM(require("@ledgerhq/icons-ui/react"));
 var CryptoIcons = __toESM(require("@ledgerhq/crypto-icons-ui/react"));
 var Logos = __toESM(require("./logos"));

package/lib/cjs/assets/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/assets/index.ts"],
-  "sourcesContent": ["export * as Icons from \"@ledgerhq/icons-ui/react\";\nexport * as CryptoIcons from \"@ledgerhq/crypto-icons-ui/react\";\nexport * as Logos from \"./logos\";\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,kBAA6B;AAC7B,YAAuB;",
+  "sourcesContent": ["export * as IconsLegacy from \"@ledgerhq/icons-ui/reactLegacy\";\nexport * as Icons from \"@ledgerhq/icons-ui/react\";\nexport * as CryptoIcons from \"@ledgerhq/crypto-icons-ui/react\";\nexport * as Logos from \"./logos\";\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAA6B;AAC7B,YAAuB;AACvB,kBAA6B;AAC7B,YAAuB;",
   "names": []
 }

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

@@ -32,7 +32,7 @@ __export(Icon_exports, {
   iconNames: () => iconNames
 });
 module.exports = __toCommonJS(Icon_exports);
-var icons = __toESM(require("@ledgerhq/icons-ui/react"));
+var icons = __toESM(require("@ledgerhq/icons-ui/reactLegacy"));
 var import_react = __toESM(require("react"));
 const iconNames = Array.from(
   Object.keys(icons).reduce((set, rawKey) => {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/asorted/Icon/Icon.tsx"],
-  "sourcesContent": ["import * as icons from \"@ledgerhq/icons-ui/react\";\nimport React from \"react\";\n\nexport type Props = {\n  name: string;\n  size?: number;\n  weight?: \"Medium\";\n  color?: string;\n};\n\nexport const iconNames = Array.from(\n  Object.keys(icons).reduce((set, rawKey) => {\n    const key = rawKey.replace(/(.+)(Medium)+$/g, \"$1\");\n    if (!set.has(key)) set.add(key);\n    return set;\n  }, new Set<string>()),\n);\n\nconst Icon = ({\n  name,\n  size = 16,\n  color = \"currentColor\",\n  weight = \"Medium\",\n}: Props): JSX.Element | null => {\n  const maybeIconName = `${name}${weight}`;\n  if (maybeIconName in icons) {\n    // @ts-expect-error FIXME I don't know how to make you happy ts\n    const Component = icons[maybeIconName];\n    return <Component size={size} color={color} />;\n  }\n  return null;\n};\n\nexport default Icon;\n"],
+  "sourcesContent": ["import * as icons from \"@ledgerhq/icons-ui/reactLegacy\";\nimport React from \"react\";\n\nexport type Props = {\n  name: string;\n  size?: number;\n  weight?: \"Medium\";\n  color?: string;\n};\n\nexport const iconNames = Array.from(\n  Object.keys(icons).reduce((set, rawKey) => {\n    const key = rawKey.replace(/(.+)(Medium)+$/g, \"$1\");\n    if (!set.has(key)) set.add(key);\n    return set;\n  }, new Set<string>()),\n);\n\nconst Icon = ({\n  name,\n  size = 16,\n  color = \"currentColor\",\n  weight = \"Medium\",\n}: Props): JSX.Element | null => {\n  const maybeIconName = `${name}${weight}`;\n  if (maybeIconName in icons) {\n    // @ts-expect-error FIXME I don't know how to make you happy ts\n    const Component = icons[maybeIconName];\n    return <Component size={size} color={color} />;\n  }\n  return null;\n};\n\nexport default Icon;\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,mBAAkB;AASX,MAAM,YAAY,MAAM;AAAA,EAC7B,OAAO,KAAK,KAAK,EAAE,OAAO,CAAC,KAAK,WAAW;AACzC,UAAM,MAAM,OAAO,QAAQ,mBAAmB,IAAI;AAClD,QAAI,CAAC,IAAI,IAAI,GAAG;AAAG,UAAI,IAAI,GAAG;AAC9B,WAAO;AAAA,EACT,GAAG,oBAAI,IAAY,CAAC;AACtB;AAEA,MAAM,OAAO,CAAC;AAAA,EACZ;AAAA,EACA,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,SAAS;AACX,MAAiC;AAC/B,QAAM,gBAAgB,GAAG,OAAO;AAChC,MAAI,iBAAiB,OAAO;AAE1B,UAAM,YAAY,MAAM,aAAa;AACrC,WAAO,6BAAAA,QAAA,cAAC,aAAU,MAAY,OAAc;AAAA,EAC9C;AACA,SAAO;AACT;AAEA,IAAO,eAAQ;",
   "names": ["React"]
 }

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

@@ -28,118 +28,54 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var Icons_stories_exports = {};
 __export(Icons_stories_exports, {
-  List: () => List,
-  SingleIcon: () => SingleIcon,
+  IconGrid: () => IconGrid,
   default: () => Icons_stories_default
 });
 module.exports = __toCommonJS(Icons_stories_exports);
 var import_react = __toESM(require("react"));
+var Icons = __toESM(require("@ledgerhq/icons-ui/react"));
 var import_styled_components = __toESM(require("styled-components"));
-var import_Icon = __toESM(require("./Icon"));
-var import_styled_components2 = require("styled-components");
 var import__ = require("../../..");
-const ScrollArea = (0, import_styled_components.default)(import__.Grid)`
-  flex: 1;
-  height: auto;
-  ${(p) => p.theme.overflow.y};
-`;
-const Container = (0, import_styled_components.default)(import__.Flex).attrs({
-  flex: 1,
-  flexDirection: "column",
-  p: 4
-})`
-  overflow: hidden;
-  height: calc(100vh - 4em);
-`;
+var import_styled_components2 = require("styled-components");
+var Icons_stories_default = {
+  title: "asorted/Icons",
+  component: null
+  // Since we're rendering multiple icons, we don't have a single component to import
+};
 const IconContainer = (0, import_styled_components.default)(import__.Flex).attrs({
   flexDirection: "column",
   justifyContent: "flex-end",
   alignItems: "center",
-  p: 4
+  p: 4,
+  fill: "black"
 })`
   ${(p) => p.active ? `background-color: ${p.theme.colors.neutral.c20};` : ``}
   border-radius: 4px;
   height: 100px;
 `;
-const Bold = import_styled_components.default.b`
-  color: ${(p) => p.theme.colors.primary.c80};
-`;
-const Story = {
-  title: "Asorted/Icons",
-  argTypes: {
-    weight: {
-      type: "enum",
-      description: "Weight (Deprecated)",
-      defaultValue: "Medium",
-      control: {
-        options: ["Medium"],
-        control: {
-          type: "select"
-        }
-      }
-    },
-    size: {
-      type: "number",
-      description: "Icon size for preview",
-      defaultValue: 32
-    },
-    color: {
-      type: "string",
-      description: "Color",
-      control: { control: "color" }
-    },
-    name: {
-      type: "enum",
-      defaultValue: "Activity",
-      description: "[Only for single icon], Icon name",
-      control: {
-        options: import_Icon.iconNames,
-        control: {
-          type: "select"
-        }
-      }
-    }
-  }
-};
-var Icons_stories_default = Story;
-const ListTemplate = (args) => {
+const IconGridTemplate = ({ size, color, style }) => {
+  const iconNames = Object.keys(Icons);
   const theme = (0, import_styled_components2.useTheme)();
-  const color = args.color || theme.colors.neutral.c100;
-  const [search, setSearch] = (0, import_react.useState)("");
-  const s = search.toLowerCase();
-  const regexp = new RegExp(s, "i");
-  return /* @__PURE__ */ import_react.default.createElement(Container, null, /* @__PURE__ */ import_react.default.createElement(import__.SearchInput, { value: search, onChange: setSearch }), /* @__PURE__ */ import_react.default.createElement(
-    ScrollArea,
-    {
-      gridTemplateColumns: "repeat(auto-fill, 100px);",
-      gridTemplateRows: "repeat(auto-fill, 100px);",
-      gridGap: 4,
-      mt: 4
-    },
-    import_Icon.iconNames.sort((a, b) => {
-      return s ? b.toLowerCase().indexOf(s) - a.toLowerCase().indexOf(s) : a.localeCompare(b);
-    }).map((name) => {
-      const match = name.match(regexp);
-      const active = s && match;
-      const index = (match == null ? void 0 : match.index) ?? 0;
-      return /* @__PURE__ */ import_react.default.createElement(IconContainer, { active: !!active }, /* @__PURE__ */ import_react.default.createElement(import__.Flex, { flex: 1, justifyContent: "center", alignItems: "center" }, /* @__PURE__ */ import_react.default.createElement(
-        import_Icon.default,
-        {
-          key: name,
-          name,
-          weight: args.weight,
-          size: args.size,
-          color
-        }
-      )), /* @__PURE__ */ import_react.default.createElement(import__.Text, { variant: "extraSmall" }, active ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, name.substr(0, index), /* @__PURE__ */ import_react.default.createElement(Bold, null, name.substr(index, s.length)), name.substr(index + s.length)) : name));
-    })
-  ));
+  const selectedColor = color || theme.colors.neutral.c100;
+  return /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "10px" } }, iconNames.map((iconName) => {
+    const IconComponent = Icons[iconName];
+    return /* @__PURE__ */ import_react.default.createElement(IconContainer, { key: iconName }, /* @__PURE__ */ import_react.default.createElement(IconComponent, { size, color: selectedColor, style }), /* @__PURE__ */ import_react.default.createElement(import__.Text, { pt: 6 }, iconName));
+  }));
 };
-const IconTemplate = (args) => {
-  const theme = (0, import_styled_components2.useTheme)();
-  const color = args.color || theme.colors.neutral.c100;
-  return /* @__PURE__ */ import_react.default.createElement(import_Icon.default, { ...args, color });
+const IconGrid = (args) => /* @__PURE__ */ import_react.default.createElement(IconGridTemplate, { ...args });
+IconGrid.args = {
+  size: "M",
+  color: "",
+  style: {}
+};
+IconGrid.argTypes = {
+  size: {
+    control: {
+      type: "select",
+      options: ["XS", "S", "M", "L", "XL"]
+    }
+  },
+  color: { control: "color" },
+  style: { control: "object" }
 };
-const List = ListTemplate.bind({});
-const SingleIcon = IconTemplate.bind({});
 //# 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, { 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\",\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": "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",
-  "names": ["import_styled_components", "styled", "React", "Icon"]
+  "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,SAAS;AAAA;AAAA;AAAA;AAK1E,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;",
+  "names": ["import_styled_components", "styled", "React"]
 }

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

@@ -0,0 +1,145 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var IconsLegacy_stories_exports = {};
+__export(IconsLegacy_stories_exports, {
+  List: () => List,
+  SingleIcon: () => SingleIcon,
+  default: () => IconsLegacy_stories_default
+});
+module.exports = __toCommonJS(IconsLegacy_stories_exports);
+var import_react = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+var import_Icon = __toESM(require("./Icon"));
+var import_styled_components2 = require("styled-components");
+var import__ = require("../../..");
+const ScrollArea = (0, import_styled_components.default)(import__.Grid)`
+  flex: 1;
+  height: auto;
+  ${(p) => p.theme.overflow.y};
+`;
+const Container = (0, import_styled_components.default)(import__.Flex).attrs({
+  flex: 1,
+  flexDirection: "column",
+  p: 4
+})`
+  overflow: hidden;
+  height: calc(100vh - 4em);
+`;
+const IconContainer = (0, import_styled_components.default)(import__.Flex).attrs({
+  flexDirection: "column",
+  justifyContent: "flex-end",
+  alignItems: "center",
+  p: 4
+})`
+  ${(p) => p.active ? `background-color: ${p.theme.colors.neutral.c20};` : ``}
+  border-radius: 4px;
+  height: 100px;
+`;
+const Bold = import_styled_components.default.b`
+  color: ${(p) => p.theme.colors.primary.c80};
+`;
+const Story = {
+  title: "Asorted/Icons/Icons(legacy)",
+  argTypes: {
+    weight: {
+      type: "enum",
+      description: "Weight (Deprecated)",
+      defaultValue: "Medium",
+      control: {
+        options: ["Medium"],
+        control: {
+          type: "select"
+        }
+      }
+    },
+    size: {
+      type: "number",
+      description: "Icon size for preview",
+      defaultValue: 32
+    },
+    color: {
+      type: "string",
+      description: "Color",
+      control: { control: "color" }
+    },
+    name: {
+      type: "enum",
+      defaultValue: "Activity",
+      description: "[Only for single icon], Icon name",
+      control: {
+        options: import_Icon.iconNames,
+        control: {
+          type: "select"
+        }
+      }
+    }
+  }
+};
+var IconsLegacy_stories_default = Story;
+const ListTemplate = (args) => {
+  const theme = (0, import_styled_components2.useTheme)();
+  const color = args.color || theme.colors.neutral.c100;
+  const [search, setSearch] = (0, import_react.useState)("");
+  const s = search.toLowerCase();
+  const regexp = new RegExp(s, "i");
+  return /* @__PURE__ */ import_react.default.createElement(Container, null, /* @__PURE__ */ import_react.default.createElement(import__.SearchInput, { value: search, onChange: setSearch }), /* @__PURE__ */ import_react.default.createElement(
+    ScrollArea,
+    {
+      gridTemplateColumns: "repeat(auto-fill, 100px);",
+      gridTemplateRows: "repeat(auto-fill, 100px);",
+      gridGap: 4,
+      mt: 4
+    },
+    import_Icon.iconNames.sort((a, b) => {
+      return s ? b.toLowerCase().indexOf(s) - a.toLowerCase().indexOf(s) : a.localeCompare(b);
+    }).map((name) => {
+      const match = name.match(regexp);
+      const active = s && match;
+      const index = (match == null ? void 0 : match.index) ?? 0;
+      return /* @__PURE__ */ import_react.default.createElement(IconContainer, { active: !!active }, /* @__PURE__ */ import_react.default.createElement(import__.Flex, { flex: 1, justifyContent: "center", alignItems: "center" }, /* @__PURE__ */ import_react.default.createElement(
+        import_Icon.default,
+        {
+          key: name,
+          name,
+          weight: args.weight,
+          size: args.size,
+          color
+        }
+      )), /* @__PURE__ */ import_react.default.createElement(import__.Text, { variant: "extraSmall" }, active ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, name.substr(0, index), /* @__PURE__ */ import_react.default.createElement(Bold, null, name.substr(index, s.length)), name.substr(index + s.length)) : name));
+    })
+  ));
+};
+const IconTemplate = (args) => {
+  const theme = (0, import_styled_components2.useTheme)();
+  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({});
+//# sourceMappingURL=IconsLegacy.stories.js.map

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

@@ -0,0 +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": "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",
+  "names": ["import_styled_components", "styled", "React", "Icon"]
+}

package/lib/cjs/components/asorted/Icon/ProviderIcon.js

@@ -33,8 +33,8 @@ __export(ProviderIcon_exports, {
   sizes: () => sizes
 });
 module.exports = __toCommonJS(ProviderIcon_exports);
-var providers = __toESM(require("@ledgerhq/icons-ui/react/Providers/index"));
-var providersBoxed = __toESM(require("@ledgerhq/icons-ui/react/ProvidersBoxed/index"));
+var providers = __toESM(require("@ledgerhq/icons-ui/reactLegacy/Providers/index"));
+var providersBoxed = __toESM(require("@ledgerhq/icons-ui/reactLegacy/ProvidersBoxed/index"));
 var import_react = __toESM(require("react"));
 var import_Flex = __toESM(require("../../layout/Flex"));
 const sizes = {

package/lib/cjs/components/asorted/Icon/ProviderIcon.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/asorted/Icon/ProviderIcon.tsx"],
-  "sourcesContent": ["import * as providers from \"@ledgerhq/icons-ui/react/Providers/index\";\nimport * as providersBoxed from \"@ledgerhq/icons-ui/react/ProvidersBoxed/index\";\n\nimport React from \"react\";\nimport FlexBox from \"../../layout/Flex\";\n\nexport const sizes = {\n  XXS: 16,\n  XS: 24,\n  S: 32,\n  M: 40,\n  L: 48,\n  XL: 56,\n};\n\nexport type ProviderSizes = keyof typeof sizes;\n\nexport type Props = {\n  name: string;\n  size?: ProviderSizes;\n  boxed?: boolean;\n};\n\nexport const iconNames = Array.from(\n  Object.keys(providers).reduce((set, rawKey) => {\n    const key = rawKey\n      .replace(/(.+)(Regular|Light|UltraLight|Thin|Medium)+$/g, \"$1\")\n      .replace(/(.+)(Ultra)+$/g, \"$1\")\n      .replace(/^_/, \"\");\n    if (!set.has(key)) set.add(key);\n    return set;\n  }, new Set<string>()),\n);\n\nexport type IconGetterProps = {\n  search: string;\n  object: Record<string, React.ReactNode>;\n};\n\nconst getIconCaseInsensitive = ({ search, object }: IconGetterProps) => {\n  const asLower = search.toLowerCase();\n  const key = Object.keys(object).find(key => key.toLowerCase().replace(/^_/, \"\") === asLower);\n  return key ? object[key] : null;\n};\n\nconst ProviderIcon = ({ name, size = \"S\", boxed = false }: Props): JSX.Element | null => {\n  const maybeIconName = `${name}`;\n\n  if (boxed) {\n    const BoxedComponent = getIconCaseInsensitive({\n      search: maybeIconName,\n      object: providersBoxed,\n    }) as React.ElementType;\n    if (BoxedComponent) {\n      return (\n        <FlexBox width={sizes[size]} height={sizes[size]} borderRadius={8} overflow={\"hidden\"}>\n          <BoxedComponent size={sizes[size]} />\n        </FlexBox>\n      );\n    }\n    return null;\n  }\n  const Component = getIconCaseInsensitive({\n    search: maybeIconName,\n    object: providers,\n  }) as React.ElementType;\n  if (Component) {\n    return <Component size={sizes[size]} />;\n  }\n  return null;\n};\n\nexport default ProviderIcon;\n"],
+  "sourcesContent": ["import * as providers from \"@ledgerhq/icons-ui/reactLegacy/Providers/index\";\nimport * as providersBoxed from \"@ledgerhq/icons-ui/reactLegacy/ProvidersBoxed/index\";\n\nimport React from \"react\";\nimport FlexBox from \"../../layout/Flex\";\n\nexport const sizes = {\n  XXS: 16,\n  XS: 24,\n  S: 32,\n  M: 40,\n  L: 48,\n  XL: 56,\n};\n\nexport type ProviderSizes = keyof typeof sizes;\n\nexport type Props = {\n  name: string;\n  size?: ProviderSizes;\n  boxed?: boolean;\n};\n\nexport const iconNames = Array.from(\n  Object.keys(providers).reduce((set, rawKey) => {\n    const key = rawKey\n      .replace(/(.+)(Regular|Light|UltraLight|Thin|Medium)+$/g, \"$1\")\n      .replace(/(.+)(Ultra)+$/g, \"$1\")\n      .replace(/^_/, \"\");\n    if (!set.has(key)) set.add(key);\n    return set;\n  }, new Set<string>()),\n);\n\nexport type IconGetterProps = {\n  search: string;\n  object: Record<string, React.ReactNode>;\n};\n\nconst getIconCaseInsensitive = ({ search, object }: IconGetterProps) => {\n  const asLower = search.toLowerCase();\n  const key = Object.keys(object).find(key => key.toLowerCase().replace(/^_/, \"\") === asLower);\n  return key ? object[key] : null;\n};\n\nconst ProviderIcon = ({ name, size = \"S\", boxed = false }: Props): JSX.Element | null => {\n  const maybeIconName = `${name}`;\n\n  if (boxed) {\n    const BoxedComponent = getIconCaseInsensitive({\n      search: maybeIconName,\n      object: providersBoxed,\n    }) as React.ElementType;\n    if (BoxedComponent) {\n      return (\n        <FlexBox width={sizes[size]} height={sizes[size]} borderRadius={8} overflow={\"hidden\"}>\n          <BoxedComponent size={sizes[size]} />\n        </FlexBox>\n      );\n    }\n    return null;\n  }\n  const Component = getIconCaseInsensitive({\n    search: maybeIconName,\n    object: providers,\n  }) as React.ElementType;\n  if (Component) {\n    return <Component size={sizes[size]} />;\n  }\n  return null;\n};\n\nexport default ProviderIcon;\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAA2B;AAC3B,qBAAgC;AAEhC,mBAAkB;AAClB,kBAAoB;AAEb,MAAM,QAAQ;AAAA,EACnB,KAAK;AAAA,EACL,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AACN;AAUO,MAAM,YAAY,MAAM;AAAA,EAC7B,OAAO,KAAK,SAAS,EAAE,OAAO,CAAC,KAAK,WAAW;AAC7C,UAAM,MAAM,OACT,QAAQ,iDAAiD,IAAI,EAC7D,QAAQ,kBAAkB,IAAI,EAC9B,QAAQ,MAAM,EAAE;AACnB,QAAI,CAAC,IAAI,IAAI,GAAG;AAAG,UAAI,IAAI,GAAG;AAC9B,WAAO;AAAA,EACT,GAAG,oBAAI,IAAY,CAAC;AACtB;AAOA,MAAM,yBAAyB,CAAC,EAAE,QAAQ,OAAO,MAAuB;AACtE,QAAM,UAAU,OAAO,YAAY;AACnC,QAAM,MAAM,OAAO,KAAK,MAAM,EAAE,KAAK,CAAAA,SAAOA,KAAI,YAAY,EAAE,QAAQ,MAAM,EAAE,MAAM,OAAO;AAC3F,SAAO,MAAM,OAAO,GAAG,IAAI;AAC7B;AAEA,MAAM,eAAe,CAAC,EAAE,MAAM,OAAO,KAAK,QAAQ,MAAM,MAAiC;AACvF,QAAM,gBAAgB,GAAG;AAEzB,MAAI,OAAO;AACT,UAAM,iBAAiB,uBAAuB;AAAA,MAC5C,QAAQ;AAAA,MACR,QAAQ;AAAA,IACV,CAAC;AACD,QAAI,gBAAgB;AAClB,aACE,6BAAAC,QAAA,cAAC,YAAAC,SAAA,EAAQ,OAAO,MAAM,IAAI,GAAG,QAAQ,MAAM,IAAI,GAAG,cAAc,GAAG,UAAU,YAC3E,6BAAAD,QAAA,cAAC,kBAAe,MAAM,MAAM,IAAI,GAAG,CACrC;AAAA,IAEJ;AACA,WAAO;AAAA,EACT;AACA,QAAM,YAAY,uBAAuB;AAAA,IACvC,QAAQ;AAAA,IACR,QAAQ;AAAA,EACV,CAAC;AACD,MAAI,WAAW;AACb,WAAO,6BAAAA,QAAA,cAAC,aAAU,MAAM,MAAM,IAAI,GAAG;AAAA,EACvC;AACA,SAAO;AACT;AAEA,IAAO,uBAAQ;",
   "names": ["key", "React", "FlexBox"]
 }

package/lib/cjs/components/cards/Carousel/index.js

@@ -39,9 +39,9 @@ var import_Button = __toESM(require("../../cta/Button"));
 var import_Text = __toESM(require("../../asorted/Text"));
 var import_Flex = __toESM(require("../../layout/Flex"));
 var import_Slide = __toESM(require("./Slide"));
-var import_ArrowLeftMedium = __toESM(require("@ledgerhq/icons-ui/react/ArrowLeftMedium"));
-var import_ArrowRightMedium = __toESM(require("@ledgerhq/icons-ui/react/ArrowRightMedium"));
-var import_CloseMedium = __toESM(require("@ledgerhq/icons-ui/react/CloseMedium"));
+var import_ArrowLeftMedium = __toESM(require("@ledgerhq/icons-ui/reactLegacy/ArrowLeftMedium"));
+var import_ArrowRightMedium = __toESM(require("@ledgerhq/icons-ui/reactLegacy/ArrowRightMedium"));
+var import_CloseMedium = __toESM(require("@ledgerhq/icons-ui/reactLegacy/CloseMedium"));
 const CarouselWrapper = import_styled_components.default.div`
   width: 100%;
   height: 180px;

package/lib/cjs/components/cards/Carousel/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/cards/Carousel/index.tsx"],
-  "sourcesContent": ["import React, { useRef, useCallback, useState, useEffect } from \"react\";\nimport styled from \"styled-components\";\nimport { TransitionGroup } from \"react-transition-group\";\nimport TransitionSlide from \"../../transitions/TransitionSlide\";\n\nimport Button from \"../../cta/Button\";\nimport Text from \"../../asorted/Text\";\nimport Flex from \"../../layout/Flex\";\nimport Slide, { Props as SlideProps } from \"./Slide\";\n\nimport IconLeft from \"@ledgerhq/icons-ui/react/ArrowLeftMedium\";\nimport IconRight from \"@ledgerhq/icons-ui/react/ArrowRightMedium\";\nimport IconClose from \"@ledgerhq/icons-ui/react/CloseMedium\";\n\nconst CarouselWrapper = styled.div`\n  width: 100%;\n  height: 180px;\n  border-radius: 8px;\n  overflow: hidden;\n  cursor: pointer;\n  position: relative;\n  flex: 1;\n  background: ${p => p.theme.colors.neutral.c100};\n`;\n\nconst Controllers = styled(Flex)`\n  position: absolute;\n  flex-direction: row;\n  right: ${p => p.theme.space[5]}px;\n  bottom: ${p => p.theme.space[4]}px;\n  column-gap: ${p => p.theme.space[4]}px;\n  color: ${p => p.theme.colors.neutral.c00};\n\n  > div {\n    &:hover {\n      opacity: 0.5;\n    }\n  }\n`;\n\nconst Bullets = styled.div<{ active?: number }>`\n  position: absolute;\n  display: flex;\n  left: ${p => p.theme.space[10]}px;\n  bottom: ${p => p.theme.space[8]}px;\n  column-gap: ${p => p.theme.space[2]}px;\n  flex-direction: row;\n\n  > div {\n    position: relative;\n    height: ${p => p.theme.space[1]}px;\n    width: ${p => p.theme.space[8]}px;\n    background: ${p => p.theme.colors.neutral.c00};\n    opacity: 0.5;\n    &:hover {\n      opacity: 0.75;\n    }\n\n    &:nth-child(${p => p.active}) {\n      opacity: 1;\n      &:hover {\n        opacity: 0.75;\n      }\n    }\n\n    ::after {\n      content: \"\";\n      position: absolute;\n      top: -${p => p.theme.space[4]}px;\n      height: ${p => p.theme.space[7]}px;\n      width: 100%;\n    }\n  }\n`;\n\nconst Close = styled.div`\n  position: absolute;\n  top: ${p => p.theme.space[7]}px;\n  right: ${p => p.theme.space[5]}px;\n  color: ${p => p.theme.colors.neutral.c00};\n  &:hover {\n    opacity: 0.5;\n  }\n`;\n\nconst DismissWrapper = styled.div`\n  color: white;\n  align-items: center;\n  justify-content: center;\n  display: flex;\n  flex-direction: column;\n  padding: ${p => p.theme.space[13]}px;\n  row-gap: ${p => p.theme.space[7]}px;\n`;\n\nexport type Props = {\n  timeout?: number;\n  queue: SlideProps[];\n  isDismissed: boolean;\n  onDismiss: () => void;\n  dismissText?: React.ReactNode;\n  dismissConfirmText?: React.ReactNode;\n  dismissCancelText?: React.ReactNode;\n};\n\nconst DEFAULT_TIMEOUT = 7000;\nconst Carousel = ({\n  timeout = DEFAULT_TIMEOUT,\n  queue,\n  isDismissed,\n  onDismiss,\n  dismissText = \"This banner will not show up again until there is a new announcement\",\n  dismissConfirmText = \"Confirm\",\n  dismissCancelText = \"Show again\",\n}: Props): React.ReactElement | null => {\n  const intervalRef = useRef<ReturnType<typeof setInterval>>();\n\n  const [direction, setDirection] = useState(\"right\");\n  const [index, setIndex] = useState(0);\n  const [wantToDismiss, setWantToDismiss] = useState(false);\n  const [paused, setPaused] = useState(false);\n  const childFactory = useCallback(child => React.cloneElement(child, { direction }), [direction]);\n\n  const wrappedSetIndex = useCallback(\n    newIndex => {\n      setDirection(newIndex > index ? \"left\" : \"right\");\n      setIndex(newIndex);\n    },\n    [index],\n  );\n\n  const onSlide = useCallback(\n    (direction = \"left\") => {\n      setDirection(direction);\n      const i = index + (direction === \"right\" ? -1 : 1);\n      setIndex(i < 0 ? queue.length - 1 : i >= queue.length ? 0 : i);\n    },\n    [index, queue],\n  );\n  const onPrevious = useCallback(() => onSlide(\"right\"), [onSlide]);\n  const onNext = useCallback(() => onSlide(\"left\"), [onSlide]);\n\n  const onWantToDismiss = () => setWantToDismiss(true);\n  const onCancelDismiss = () => setWantToDismiss(false);\n\n  const onMouseEnter = () => setPaused(true);\n  const onMouseLeave = () => setPaused(false);\n\n  useEffect(() => {\n    // Nb we pause automatic transitions when the mouse is within the carousel.\n    // Override passed timeout if lower than 1000ms\n    const _timeout = timeout < 1000 ? DEFAULT_TIMEOUT : timeout;\n    if (intervalRef.current) clearInterval(intervalRef.current);\n    if (!paused) intervalRef.current = setInterval(onSlide, _timeout);\n  }, [onSlide, paused, timeout]);\n\n  useEffect(() => {\n    if (isDismissed) setWantToDismiss(false);\n  }, [isDismissed]);\n\n  if (!queue?.length || isDismissed) return null;\n\n  return (\n    <CarouselWrapper id={\"carousel\"} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>\n      {wantToDismiss ? (\n        <DismissWrapper>\n          <Text color=\"neutral.c00\" fontWeight=\"medium\" variant={\"paragraph\"}>\n            {dismissText}\n          </Text>\n          <Flex columnGap={5}>\n            <Button color=\"neutral.c100\" backgroundColor=\"neutral.c00\" onClick={onDismiss}>\n              {dismissConfirmText}\n            </Button>\n            <Button\n              outline\n              color=\"neutral.c00\"\n              backgroundColor=\"neutral.c100\"\n              borderColor=\"neutral.c00\"\n              onClick={onCancelDismiss}\n            >\n              {dismissCancelText}\n            </Button>\n          </Flex>\n        </DismissWrapper>\n      ) : (\n        <div>\n          <TransitionGroup component={null} childFactory={childFactory}>\n            <TransitionSlide key={index} direction={direction}>\n              <Slide {...queue[index]} />\n            </TransitionSlide>\n          </TransitionGroup>\n\n          <Close id={\"carousel-dismiss\"} onClick={onWantToDismiss}>\n            <IconClose size={18} />\n          </Close>\n\n          <Bullets active={index + 1}>\n            {queue.map((_, i) => (\n              <div key={`bullet_${i}`} onClick={() => wrappedSetIndex(i)} />\n            ))}\n          </Bullets>\n\n          <Controllers>\n            <div onClick={onPrevious}>\n              <IconLeft size={20} />\n            </div>\n            <div onClick={onNext}>\n              <IconRight size={20} />\n            </div>\n          </Controllers>\n        </div>\n      )}\n    </CarouselWrapper>\n  );\n};\n\nexport default Carousel;\n"],
+  "sourcesContent": ["import React, { useRef, useCallback, useState, useEffect } from \"react\";\nimport styled from \"styled-components\";\nimport { TransitionGroup } from \"react-transition-group\";\nimport TransitionSlide from \"../../transitions/TransitionSlide\";\n\nimport Button from \"../../cta/Button\";\nimport Text from \"../../asorted/Text\";\nimport Flex from \"../../layout/Flex\";\nimport Slide, { Props as SlideProps } from \"./Slide\";\n\nimport IconLeft from \"@ledgerhq/icons-ui/reactLegacy/ArrowLeftMedium\";\nimport IconRight from \"@ledgerhq/icons-ui/reactLegacy/ArrowRightMedium\";\nimport IconClose from \"@ledgerhq/icons-ui/reactLegacy/CloseMedium\";\n\nconst CarouselWrapper = styled.div`\n  width: 100%;\n  height: 180px;\n  border-radius: 8px;\n  overflow: hidden;\n  cursor: pointer;\n  position: relative;\n  flex: 1;\n  background: ${p => p.theme.colors.neutral.c100};\n`;\n\nconst Controllers = styled(Flex)`\n  position: absolute;\n  flex-direction: row;\n  right: ${p => p.theme.space[5]}px;\n  bottom: ${p => p.theme.space[4]}px;\n  column-gap: ${p => p.theme.space[4]}px;\n  color: ${p => p.theme.colors.neutral.c00};\n\n  > div {\n    &:hover {\n      opacity: 0.5;\n    }\n  }\n`;\n\nconst Bullets = styled.div<{ active?: number }>`\n  position: absolute;\n  display: flex;\n  left: ${p => p.theme.space[10]}px;\n  bottom: ${p => p.theme.space[8]}px;\n  column-gap: ${p => p.theme.space[2]}px;\n  flex-direction: row;\n\n  > div {\n    position: relative;\n    height: ${p => p.theme.space[1]}px;\n    width: ${p => p.theme.space[8]}px;\n    background: ${p => p.theme.colors.neutral.c00};\n    opacity: 0.5;\n    &:hover {\n      opacity: 0.75;\n    }\n\n    &:nth-child(${p => p.active}) {\n      opacity: 1;\n      &:hover {\n        opacity: 0.75;\n      }\n    }\n\n    ::after {\n      content: \"\";\n      position: absolute;\n      top: -${p => p.theme.space[4]}px;\n      height: ${p => p.theme.space[7]}px;\n      width: 100%;\n    }\n  }\n`;\n\nconst Close = styled.div`\n  position: absolute;\n  top: ${p => p.theme.space[7]}px;\n  right: ${p => p.theme.space[5]}px;\n  color: ${p => p.theme.colors.neutral.c00};\n  &:hover {\n    opacity: 0.5;\n  }\n`;\n\nconst DismissWrapper = styled.div`\n  color: white;\n  align-items: center;\n  justify-content: center;\n  display: flex;\n  flex-direction: column;\n  padding: ${p => p.theme.space[13]}px;\n  row-gap: ${p => p.theme.space[7]}px;\n`;\n\nexport type Props = {\n  timeout?: number;\n  queue: SlideProps[];\n  isDismissed: boolean;\n  onDismiss: () => void;\n  dismissText?: React.ReactNode;\n  dismissConfirmText?: React.ReactNode;\n  dismissCancelText?: React.ReactNode;\n};\n\nconst DEFAULT_TIMEOUT = 7000;\nconst Carousel = ({\n  timeout = DEFAULT_TIMEOUT,\n  queue,\n  isDismissed,\n  onDismiss,\n  dismissText = \"This banner will not show up again until there is a new announcement\",\n  dismissConfirmText = \"Confirm\",\n  dismissCancelText = \"Show again\",\n}: Props): React.ReactElement | null => {\n  const intervalRef = useRef<ReturnType<typeof setInterval>>();\n\n  const [direction, setDirection] = useState(\"right\");\n  const [index, setIndex] = useState(0);\n  const [wantToDismiss, setWantToDismiss] = useState(false);\n  const [paused, setPaused] = useState(false);\n  const childFactory = useCallback(child => React.cloneElement(child, { direction }), [direction]);\n\n  const wrappedSetIndex = useCallback(\n    newIndex => {\n      setDirection(newIndex > index ? \"left\" : \"right\");\n      setIndex(newIndex);\n    },\n    [index],\n  );\n\n  const onSlide = useCallback(\n    (direction = \"left\") => {\n      setDirection(direction);\n      const i = index + (direction === \"right\" ? -1 : 1);\n      setIndex(i < 0 ? queue.length - 1 : i >= queue.length ? 0 : i);\n    },\n    [index, queue],\n  );\n  const onPrevious = useCallback(() => onSlide(\"right\"), [onSlide]);\n  const onNext = useCallback(() => onSlide(\"left\"), [onSlide]);\n\n  const onWantToDismiss = () => setWantToDismiss(true);\n  const onCancelDismiss = () => setWantToDismiss(false);\n\n  const onMouseEnter = () => setPaused(true);\n  const onMouseLeave = () => setPaused(false);\n\n  useEffect(() => {\n    // Nb we pause automatic transitions when the mouse is within the carousel.\n    // Override passed timeout if lower than 1000ms\n    const _timeout = timeout < 1000 ? DEFAULT_TIMEOUT : timeout;\n    if (intervalRef.current) clearInterval(intervalRef.current);\n    if (!paused) intervalRef.current = setInterval(onSlide, _timeout);\n  }, [onSlide, paused, timeout]);\n\n  useEffect(() => {\n    if (isDismissed) setWantToDismiss(false);\n  }, [isDismissed]);\n\n  if (!queue?.length || isDismissed) return null;\n\n  return (\n    <CarouselWrapper id={\"carousel\"} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>\n      {wantToDismiss ? (\n        <DismissWrapper>\n          <Text color=\"neutral.c00\" fontWeight=\"medium\" variant={\"paragraph\"}>\n            {dismissText}\n          </Text>\n          <Flex columnGap={5}>\n            <Button color=\"neutral.c100\" backgroundColor=\"neutral.c00\" onClick={onDismiss}>\n              {dismissConfirmText}\n            </Button>\n            <Button\n              outline\n              color=\"neutral.c00\"\n              backgroundColor=\"neutral.c100\"\n              borderColor=\"neutral.c00\"\n              onClick={onCancelDismiss}\n            >\n              {dismissCancelText}\n            </Button>\n          </Flex>\n        </DismissWrapper>\n      ) : (\n        <div>\n          <TransitionGroup component={null} childFactory={childFactory}>\n            <TransitionSlide key={index} direction={direction}>\n              <Slide {...queue[index]} />\n            </TransitionSlide>\n          </TransitionGroup>\n\n          <Close id={\"carousel-dismiss\"} onClick={onWantToDismiss}>\n            <IconClose size={18} />\n          </Close>\n\n          <Bullets active={index + 1}>\n            {queue.map((_, i) => (\n              <div key={`bullet_${i}`} onClick={() => wrappedSetIndex(i)} />\n            ))}\n          </Bullets>\n\n          <Controllers>\n            <div onClick={onPrevious}>\n              <IconLeft size={20} />\n            </div>\n            <div onClick={onNext}>\n              <IconRight size={20} />\n            </div>\n          </Controllers>\n        </div>\n      )}\n    </CarouselWrapper>\n  );\n};\n\nexport default Carousel;\n"],
   "mappings": "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",
   "names": ["styled", "Flex", "React", "direction", "Text", "Button", "TransitionSlide", "Slide", "IconClose", "IconLeft", "IconRight"]
 }

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_react2 = require("@ledgerhq/icons-ui/react/");
+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"));
@@ -83,7 +83,7 @@ var Button_stories_default = {
   }
 };
 const Overview = ((args) => {
-  const templateProps = { Icon: import_react2.PlusMedium, children: "Try me", onClick: () => {
+  const templateProps = { Icon: import_reactLegacy.PlusMedium, children: "Try me", onClick: () => {
   } };
   const propsArr = [
     { ...templateProps, Icon: void 0 },
@@ -115,7 +115,7 @@ const IconButton = (args) => {
 };
 IconButton.args = {
   children: "",
-  Icon: import_react2.WalletAddMedium,
+  Icon: import_reactLegacy.WalletAddMedium,
   iconPosition: "right"
 };
 const Expand = (args) => {