@ledgerhq/react-ui 0.9.2-next.0 → 0.9.2

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

@@ -0,0 +1,56 @@
+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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+__export(exports, {
+  default: () => FlagIcon_default,
+  iconNames: () => iconNames,
+  sizes: () => sizes
+});
+var flags = __toModule(require("@ledgerhq/icons-ui/react/_Flags"));
+var import_react = __toModule(require("react"));
+const sizes = {
+  XXS: 16,
+  XS: 24,
+  S: 32,
+  M: 40,
+  L: 48,
+  XL: 56
+};
+const iconNames = Array.from(Object.keys(flags).reduce((set, rawKey) => {
+  const key = rawKey.replace(/(.+)(Regular|Light|UltraLight|Thin|Medium)+$/g, "$1").replace(/(.+)(Ultra)+$/g, "$1");
+  if (!set.has(key))
+    set.add(key);
+  return set;
+}, new Set()));
+const FlagIcon = ({ name, size = "S" }) => {
+  const maybeIconName = `${name}`;
+  if (maybeIconName in flags) {
+    const Component = flags[maybeIconName];
+    return /* @__PURE__ */ import_react.default.createElement(Component, {
+      size: sizes[size]
+    });
+  }
+  return null;
+};
+var FlagIcon_default = FlagIcon;
+//# sourceMappingURL=FlagIcon.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/asorted/Icon/FlagIcon.tsx"],
+  "sourcesContent": ["import * as flags from \"@ledgerhq/icons-ui/react/_Flags\";\nimport React from \"react\";\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 FlagsSizes = keyof typeof sizes;\n\nexport type Props = {\n  name: string;\n  size?: FlagsSizes;\n};\n\nexport const iconNames = Array.from(\n  Object.keys(flags).reduce((set, rawKey) => {\n    const key = rawKey\n      .replace(/(.+)(Regular|Light|UltraLight|Thin|Medium)+$/g, \"$1\")\n      .replace(/(.+)(Ultra)+$/g, \"$1\");\n    if (!set.has(key)) set.add(key);\n    return set;\n  }, new Set<string>()),\n);\n\nconst FlagIcon = ({ name, size = \"S\" }: Props): JSX.Element | null => {\n  const maybeIconName = `${name}`;\n  if (maybeIconName in flags) {\n    // @ts-expect-error FIXME I don't know how to make you happy ts\n    const Component = flags[maybeIconName];\n    return <Component size={sizes[size]} />;\n  }\n  return null;\n};\n\nexport default FlagIcon;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,mBAAkB;AAEX,MAAM,QAAQ;AAAA,EACnB,KAAK;AAAA,EACL,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA;AAUC,MAAM,YAAY,MAAM,KAC7B,OAAO,KAAK,OAAO,OAAO,CAAC,KAAK,WAAW;AACzC,QAAM,MAAM,OACT,QAAQ,iDAAiD,MACzD,QAAQ,kBAAkB;AAC7B,MAAI,CAAC,IAAI,IAAI;AAAM,QAAI,IAAI;AAC3B,SAAO;AAAA,GACN,IAAI;AAGT,MAAM,WAAW,CAAC,EAAE,MAAM,OAAO,UAAqC;AACpE,QAAM,gBAAgB,GAAG;AACzB,MAAI,iBAAiB,OAAO;AAE1B,UAAM,YAAY,MAAM;AACxB,WAAO,mDAAC,WAAD;AAAA,MAAW,MAAM,MAAM;AAAA;AAAA;AAEhC,SAAO;AAAA;AAGT,IAAO,mBAAQ;",
+  "names": []
+}

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

@@ -0,0 +1,124 @@
+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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+__export(exports, {
+  List: () => List,
+  SingleIcon: () => SingleIcon,
+  default: () => Flags_stories_default
+});
+var import_react = __toModule(require("react"));
+var import_styled_components = __toModule(require("styled-components"));
+var import_FlagIcon = __toModule(require("./FlagIcon"));
+var import__ = __toModule(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/Flags",
+  argTypes: {
+    size: {
+      type: "enum",
+      description: "Icon size",
+      defaultValue: "L",
+      control: {
+        options: Object.keys(import_FlagIcon.sizes)
+      }
+    },
+    name: {
+      type: "enum",
+      defaultValue: "France",
+      description: "[Only for single icon], Icon name",
+      control: {
+        options: import_FlagIcon.iconNames,
+        control: {
+          type: "select"
+        }
+      }
+    }
+  }
+};
+var Flags_stories_default = Story;
+const ListTemplate = (args) => {
+  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_FlagIcon.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?.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_FlagIcon.default, {
+      key: name,
+      name,
+      size: args.size
+    })), /* @__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 FlagTemplate = (args) => {
+  return /* @__PURE__ */ import_react.default.createElement(import_FlagIcon.default, {
+    ...args
+  });
+};
+const List = ListTemplate.bind({});
+const SingleIcon = FlagTemplate.bind({});
+//# sourceMappingURL=Flags.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/asorted/Icon/Flags.stories.tsx"],
+  "sourcesContent": ["import React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport FlagIcon, { iconNames, Props as FlagIconProps, sizes as flagSizes } from \"./FlagIcon\";\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/Flags\",\n  argTypes: {\n    size: {\n      type: \"enum\",\n      description: \"Icon size\",\n      defaultValue: \"L\",\n      control: {\n        options: Object.keys(flagSizes),\n      },\n    },\n    name: {\n      type: \"enum\",\n      defaultValue: \"France\",\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: FlagIconProps) => {\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                  <FlagIcon key={name} name={name} size={args.size} />\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 FlagTemplate = (args: FlagIconProps) => {\n  return <FlagIcon {...args} />;\n};\n\nexport const List = ListTemplate.bind({});\nexport const SingleIcon = FlagTemplate.bind({});\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,+BAAmB;AACnB,sBAAgF;AAChF,eAA8C;AAE9C,MAAM,aAAa,sCAAO;AAAA;AAAA;AAAA,IAGtB,CAAC,MAAM,EAAE,MAAM,SAAS;AAAA;AAG5B,MAAM,YAAY,sCAAO,eAAM,MAAM;AAAA,EACnC,MAAM;AAAA,EACN,eAAe;AAAA,EACf,GAAG;AAAA;AAAA;AAAA;AAAA;AAML,MAAM,gBAAgB,sCAAO,eAAM,MAA4B;AAAA,EAC7D,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,GAAG;AAAA;AAAA,IAED,CAAC,MAAO,EAAE,SAAS,qBAAqB,EAAE,MAAM,OAAO,QAAQ,SAAS;AAAA;AAAA;AAAA;AAK5E,MAAM,OAAO,iCAAO;AAAA,WACT,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAGzC,MAAM,QAAQ;AAAA,EACZ,OAAO;AAAA,EACP,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,aAAa;AAAA,MACb,cAAc;AAAA,MACd,SAAS;AAAA,QACP,SAAS,OAAO,KAAK;AAAA;AAAA;AAAA,IAGzB,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,cAAc;AAAA,MACd,aAAa;AAAA,MACb,SAAS;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,UACP,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAMhB,IAAO,wBAAQ;AAEf,MAAM,eAAe,CAAC,SAAwB;AAC5C,QAAM,CAAC,QAAQ,aAAa,2BAAS;AACrC,QAAM,IAAI,OAAO;AACjB,QAAM,SAAS,IAAI,OAAO,GAAG;AAE7B,SACE,mDAAC,WAAD,MACE,mDAAC,sBAAD;AAAA,IAAa,OAAO;AAAA,IAAQ,UAAU;AAAA,MACtC,mDAAC,YAAD;AAAA,IACE,qBAAoB;AAAA,IACpB,kBAAiB;AAAA,IACjB,SAAS;AAAA,IACT,IAAI;AAAA,KAEH,0BACE,KAAK,CAAC,GAAW,MAAc;AAC9B,WAAO,IAAI,EAAE,cAAc,QAAQ,KAAK,EAAE,cAAc,QAAQ,KAAK,EAAE,cAAc;AAAA,KAEtF,IAAI,CAAC,SAAS;AACb,UAAM,QAAQ,KAAK,MAAM;AACzB,UAAM,SAAS,KAAK;AACpB,UAAM,QAAQ,OAAO,SAAS;AAC9B,WACE,mDAAC,eAAD;AAAA,MAAe,QAAQ,CAAC,CAAC;AAAA,OACvB,mDAAC,eAAD;AAAA,MAAM,MAAM;AAAA,MAAG,gBAAe;AAAA,MAAS,YAAW;AAAA,OAChD,mDAAC,yBAAD;AAAA,MAAU,KAAK;AAAA,MAAM;AAAA,MAAY,MAAM,KAAK;AAAA,SAE9C,mDAAC,eAAD;AAAA,MAAM,SAAQ;AAAA,OACX,SACC,wFACG,KAAK,OAAO,GAAG,QAChB,mDAAC,MAAD,MAAO,KAAK,OAAO,OAAO,EAAE,UAC3B,KAAK,OAAO,QAAQ,EAAE,WAGzB;AAAA;AAAA;AAUpB,MAAM,eAAe,CAAC,SAAwB;AAC5C,SAAO,mDAAC,yBAAD;AAAA,OAAc;AAAA;AAAA;AAGhB,MAAM,OAAO,aAAa,KAAK;AAC/B,MAAM,aAAa,aAAa,KAAK;",
+  "names": []
+}

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

@@ -0,0 +1,56 @@
+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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+__export(exports, {
+  default: () => PaymentIcon_default,
+  iconNames: () => iconNames,
+  sizes: () => sizes
+});
+var paymentProviders = __toModule(require("@ledgerhq/icons-ui/react/_Payment"));
+var import_react = __toModule(require("react"));
+const sizes = {
+  XXS: 16,
+  XS: 24,
+  S: 32,
+  M: 40,
+  L: 48,
+  XL: 56
+};
+const iconNames = Array.from(Object.keys(paymentProviders).reduce((set, rawKey) => {
+  const key = rawKey.replace(/(.+)(Regular|Light|UltraLight|Thin|Medium)+$/g, "$1").replace(/(.+)(Ultra)+$/g, "$1");
+  if (!set.has(key))
+    set.add(key);
+  return set;
+}, new Set()));
+const PaymentIcon = ({ name, size = "S" }) => {
+  const maybeIconName = `${name}`;
+  if (maybeIconName in paymentProviders) {
+    const Component = paymentProviders[maybeIconName];
+    return /* @__PURE__ */ import_react.default.createElement(Component, {
+      size: sizes[size]
+    });
+  }
+  return null;
+};
+var PaymentIcon_default = PaymentIcon;
+//# sourceMappingURL=PaymentIcon.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/asorted/Icon/PaymentIcon.tsx"],
+  "sourcesContent": ["import * as paymentProviders from \"@ledgerhq/icons-ui/react/_Payment\";\nimport React from \"react\";\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 PaymentIconSizes = keyof typeof sizes;\n\nexport type Props = {\n  name: string;\n  size?: PaymentIconSizes;\n};\n\nexport const iconNames = Array.from(\n  Object.keys(paymentProviders).reduce((set, rawKey) => {\n    const key = rawKey\n      .replace(/(.+)(Regular|Light|UltraLight|Thin|Medium)+$/g, \"$1\")\n      .replace(/(.+)(Ultra)+$/g, \"$1\");\n    if (!set.has(key)) set.add(key);\n    return set;\n  }, new Set<string>()),\n);\n\nconst PaymentIcon = ({ name, size = \"S\" }: Props): JSX.Element | null => {\n  const maybeIconName = `${name}`;\n  if (maybeIconName in paymentProviders) {\n    // @ts-expect-error FIXME I don't know how to make you happy ts\n    const Component = paymentProviders[maybeIconName];\n    return <Component size={sizes[size]} />;\n  }\n  return null;\n};\n\nexport default PaymentIcon;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAkC;AAClC,mBAAkB;AAEX,MAAM,QAAQ;AAAA,EACnB,KAAK;AAAA,EACL,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA;AAUC,MAAM,YAAY,MAAM,KAC7B,OAAO,KAAK,kBAAkB,OAAO,CAAC,KAAK,WAAW;AACpD,QAAM,MAAM,OACT,QAAQ,iDAAiD,MACzD,QAAQ,kBAAkB;AAC7B,MAAI,CAAC,IAAI,IAAI;AAAM,QAAI,IAAI;AAC3B,SAAO;AAAA,GACN,IAAI;AAGT,MAAM,cAAc,CAAC,EAAE,MAAM,OAAO,UAAqC;AACvE,QAAM,gBAAgB,GAAG;AACzB,MAAI,iBAAiB,kBAAkB;AAErC,UAAM,YAAY,iBAAiB;AACnC,WAAO,mDAAC,WAAD;AAAA,MAAW,MAAM,MAAM;AAAA;AAAA;AAEhC,SAAO;AAAA;AAGT,IAAO,sBAAQ;",
+  "names": []
+}

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

@@ -0,0 +1,124 @@
+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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+__export(exports, {
+  List: () => List,
+  SingleIcon: () => SingleIcon,
+  default: () => PaymentIcon_stories_default
+});
+var import_react = __toModule(require("react"));
+var import_styled_components = __toModule(require("styled-components"));
+var import_PaymentIcon = __toModule(require("./PaymentIcon"));
+var import__ = __toModule(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/Payment",
+  argTypes: {
+    size: {
+      type: "enum",
+      description: "Icon size",
+      defaultValue: "L",
+      control: {
+        options: Object.keys(import_PaymentIcon.sizes)
+      }
+    },
+    name: {
+      type: "enum",
+      defaultValue: "France",
+      description: "[Only for single icon], Icon name",
+      control: {
+        options: import_PaymentIcon.iconNames,
+        control: {
+          type: "select"
+        }
+      }
+    }
+  }
+};
+var PaymentIcon_stories_default = Story;
+const ListTemplate = (args) => {
+  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_PaymentIcon.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?.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_PaymentIcon.default, {
+      key: name,
+      name,
+      size: args.size
+    })), /* @__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 FlagTemplate = (args) => {
+  return /* @__PURE__ */ import_react.default.createElement(import_PaymentIcon.default, {
+    ...args
+  });
+};
+const List = ListTemplate.bind({});
+const SingleIcon = FlagTemplate.bind({});
+//# sourceMappingURL=PaymentIcon.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/asorted/Icon/PaymentIcon.stories.tsx"],
+  "sourcesContent": ["import React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport PaymentIcon, {\n  iconNames,\n  Props as PaymentIconProps,\n  sizes as flagSizes,\n} from \"./PaymentIcon\";\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/Payment\",\n  argTypes: {\n    size: {\n      type: \"enum\",\n      description: \"Icon size\",\n      defaultValue: \"L\",\n      control: {\n        options: Object.keys(flagSizes),\n      },\n    },\n    name: {\n      type: \"enum\",\n      defaultValue: \"France\",\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: PaymentIconProps) => {\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                  <PaymentIcon key={name} name={name} size={args.size} />\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 FlagTemplate = (args: PaymentIconProps) => {\n  return <PaymentIcon {...args} />;\n};\n\nexport const List = ListTemplate.bind({});\nexport const SingleIcon = FlagTemplate.bind({});\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,+BAAmB;AACnB,yBAIO;AACP,eAA8C;AAE9C,MAAM,aAAa,sCAAO;AAAA;AAAA;AAAA,IAGtB,CAAC,MAAM,EAAE,MAAM,SAAS;AAAA;AAG5B,MAAM,YAAY,sCAAO,eAAM,MAAM;AAAA,EACnC,MAAM;AAAA,EACN,eAAe;AAAA,EACf,GAAG;AAAA;AAAA;AAAA;AAAA;AAML,MAAM,gBAAgB,sCAAO,eAAM,MAA4B;AAAA,EAC7D,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,GAAG;AAAA;AAAA,IAED,CAAC,MAAO,EAAE,SAAS,qBAAqB,EAAE,MAAM,OAAO,QAAQ,SAAS;AAAA;AAAA;AAAA;AAK5E,MAAM,OAAO,iCAAO;AAAA,WACT,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAGzC,MAAM,QAAQ;AAAA,EACZ,OAAO;AAAA,EACP,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,aAAa;AAAA,MACb,cAAc;AAAA,MACd,SAAS;AAAA,QACP,SAAS,OAAO,KAAK;AAAA;AAAA;AAAA,IAGzB,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,cAAc;AAAA,MACd,aAAa;AAAA,MACb,SAAS;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,UACP,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAMhB,IAAO,8BAAQ;AAEf,MAAM,eAAe,CAAC,SAA2B;AAC/C,QAAM,CAAC,QAAQ,aAAa,2BAAS;AACrC,QAAM,IAAI,OAAO;AACjB,QAAM,SAAS,IAAI,OAAO,GAAG;AAE7B,SACE,mDAAC,WAAD,MACE,mDAAC,sBAAD;AAAA,IAAa,OAAO;AAAA,IAAQ,UAAU;AAAA,MACtC,mDAAC,YAAD;AAAA,IACE,qBAAoB;AAAA,IACpB,kBAAiB;AAAA,IACjB,SAAS;AAAA,IACT,IAAI;AAAA,KAEH,6BACE,KAAK,CAAC,GAAW,MAAc;AAC9B,WAAO,IAAI,EAAE,cAAc,QAAQ,KAAK,EAAE,cAAc,QAAQ,KAAK,EAAE,cAAc;AAAA,KAEtF,IAAI,CAAC,SAAS;AACb,UAAM,QAAQ,KAAK,MAAM;AACzB,UAAM,SAAS,KAAK;AACpB,UAAM,QAAQ,OAAO,SAAS;AAC9B,WACE,mDAAC,eAAD;AAAA,MAAe,QAAQ,CAAC,CAAC;AAAA,OACvB,mDAAC,eAAD;AAAA,MAAM,MAAM;AAAA,MAAG,gBAAe;AAAA,MAAS,YAAW;AAAA,OAChD,mDAAC,4BAAD;AAAA,MAAa,KAAK;AAAA,MAAM;AAAA,MAAY,MAAM,KAAK;AAAA,SAEjD,mDAAC,eAAD;AAAA,MAAM,SAAQ;AAAA,OACX,SACC,wFACG,KAAK,OAAO,GAAG,QAChB,mDAAC,MAAD,MAAO,KAAK,OAAO,OAAO,EAAE,UAC3B,KAAK,OAAO,QAAQ,EAAE,WAGzB;AAAA;AAAA;AAUpB,MAAM,eAAe,CAAC,SAA2B;AAC/C,SAAO,mDAAC,4BAAD;AAAA,OAAiB;AAAA;AAAA;AAGnB,MAAM,OAAO,aAAa,KAAK;AAC/B,MAAM,aAAa,aAAa,KAAK;",
+  "names": []
+}

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

@@ -0,0 +1,56 @@
+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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+__export(exports, {
+  default: () => ProviderIcon_default,
+  iconNames: () => iconNames,
+  sizes: () => sizes
+});
+var providers = __toModule(require("@ledgerhq/icons-ui/react/_ProvidersLogos"));
+var import_react = __toModule(require("react"));
+const sizes = {
+  XXS: 16,
+  XS: 24,
+  S: 32,
+  M: 40,
+  L: 48,
+  XL: 56
+};
+const iconNames = Array.from(Object.keys(providers).reduce((set, rawKey) => {
+  const key = rawKey.replace(/(.+)(Regular|Light|UltraLight|Thin|Medium)+$/g, "$1").replace(/(.+)(Ultra)+$/g, "$1");
+  if (!set.has(key))
+    set.add(key);
+  return set;
+}, new Set()));
+const ProviderIcon = ({ name, size = "S" }) => {
+  const maybeIconName = `${name}`;
+  if (maybeIconName in providers) {
+    const Component = providers[maybeIconName];
+    return /* @__PURE__ */ import_react.default.createElement(Component, {
+      size: sizes[size]
+    });
+  }
+  return null;
+};
+var ProviderIcon_default = ProviderIcon;
+//# sourceMappingURL=ProviderIcon.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/asorted/Icon/ProviderIcon.tsx"],
+  "sourcesContent": ["import * as providers from \"@ledgerhq/icons-ui/react/_ProvidersLogos\";\nimport React from \"react\";\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};\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    if (!set.has(key)) set.add(key);\n    return set;\n  }, new Set<string>()),\n);\n\nconst ProviderIcon = ({ name, size = \"S\" }: Props): JSX.Element | null => {\n  const maybeIconName = `${name}`;\n  if (maybeIconName in providers) {\n    // @ts-expect-error FIXME I don't know how to make you happy ts\n    const Component = providers[maybeIconName];\n    return <Component size={sizes[size]} />;\n  }\n  return null;\n};\n\nexport default ProviderIcon;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAA2B;AAC3B,mBAAkB;AAEX,MAAM,QAAQ;AAAA,EACnB,KAAK;AAAA,EACL,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA;AAUC,MAAM,YAAY,MAAM,KAC7B,OAAO,KAAK,WAAW,OAAO,CAAC,KAAK,WAAW;AAC7C,QAAM,MAAM,OACT,QAAQ,iDAAiD,MACzD,QAAQ,kBAAkB;AAC7B,MAAI,CAAC,IAAI,IAAI;AAAM,QAAI,IAAI;AAC3B,SAAO;AAAA,GACN,IAAI;AAGT,MAAM,eAAe,CAAC,EAAE,MAAM,OAAO,UAAqC;AACxE,QAAM,gBAAgB,GAAG;AACzB,MAAI,iBAAiB,WAAW;AAE9B,UAAM,YAAY,UAAU;AAC5B,WAAO,mDAAC,WAAD;AAAA,MAAW,MAAM,MAAM;AAAA;AAAA;AAEhC,SAAO;AAAA;AAGT,IAAO,uBAAQ;",
+  "names": []
+}

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

@@ -0,0 +1,124 @@
+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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+__export(exports, {
+  List: () => List,
+  SingleIcon: () => SingleIcon,
+  default: () => Providers_stories_default
+});
+var import_react = __toModule(require("react"));
+var import_styled_components = __toModule(require("styled-components"));
+var import_ProviderIcon = __toModule(require("./ProviderIcon"));
+var import__ = __toModule(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/ProviderIcons",
+  argTypes: {
+    size: {
+      type: "enum",
+      description: "Icon size",
+      defaultValue: "L",
+      control: {
+        options: Object.keys(import_ProviderIcon.sizes)
+      }
+    },
+    name: {
+      type: "enum",
+      defaultValue: "France",
+      description: "[Only for single icon], Icon name",
+      control: {
+        options: import_ProviderIcon.iconNames,
+        control: {
+          type: "select"
+        }
+      }
+    }
+  }
+};
+var Providers_stories_default = Story;
+const ListTemplate = (args) => {
+  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_ProviderIcon.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?.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_ProviderIcon.default, {
+      key: name,
+      name,
+      size: args.size
+    })), /* @__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 FlagTemplate = (args) => {
+  return /* @__PURE__ */ import_react.default.createElement(import_ProviderIcon.default, {
+    ...args
+  });
+};
+const List = ListTemplate.bind({});
+const SingleIcon = FlagTemplate.bind({});
+//# sourceMappingURL=Providers.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/asorted/Icon/Providers.stories.tsx"],
+  "sourcesContent": ["import React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport ProviderIcon, {\n  iconNames,\n  Props as ProviderIconProps,\n  sizes as providerSizes,\n} from \"./ProviderIcon\";\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/ProviderIcons\",\n  argTypes: {\n    size: {\n      type: \"enum\",\n      description: \"Icon size\",\n      defaultValue: \"L\",\n      control: {\n        options: Object.keys(providerSizes),\n      },\n    },\n    name: {\n      type: \"enum\",\n      defaultValue: \"France\",\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: ProviderIconProps) => {\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                  <ProviderIcon key={name} name={name} size={args.size} />\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 FlagTemplate = (args: ProviderIconProps) => {\n  return <ProviderIcon {...args} />;\n};\n\nexport const List = ListTemplate.bind({});\nexport const SingleIcon = FlagTemplate.bind({});\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,+BAAmB;AACnB,0BAIO;AACP,eAA8C;AAE9C,MAAM,aAAa,sCAAO;AAAA;AAAA;AAAA,IAGtB,CAAC,MAAM,EAAE,MAAM,SAAS;AAAA;AAG5B,MAAM,YAAY,sCAAO,eAAM,MAAM;AAAA,EACnC,MAAM;AAAA,EACN,eAAe;AAAA,EACf,GAAG;AAAA;AAAA;AAAA;AAAA;AAML,MAAM,gBAAgB,sCAAO,eAAM,MAA4B;AAAA,EAC7D,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,GAAG;AAAA;AAAA,IAED,CAAC,MAAO,EAAE,SAAS,qBAAqB,EAAE,MAAM,OAAO,QAAQ,SAAS;AAAA;AAAA;AAAA;AAK5E,MAAM,OAAO,iCAAO;AAAA,WACT,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAGzC,MAAM,QAAQ;AAAA,EACZ,OAAO;AAAA,EACP,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,aAAa;AAAA,MACb,cAAc;AAAA,MACd,SAAS;AAAA,QACP,SAAS,OAAO,KAAK;AAAA;AAAA;AAAA,IAGzB,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,cAAc;AAAA,MACd,aAAa;AAAA,MACb,SAAS;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,UACP,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAMhB,IAAO,4BAAQ;AAEf,MAAM,eAAe,CAAC,SAA4B;AAChD,QAAM,CAAC,QAAQ,aAAa,2BAAS;AACrC,QAAM,IAAI,OAAO;AACjB,QAAM,SAAS,IAAI,OAAO,GAAG;AAE7B,SACE,mDAAC,WAAD,MACE,mDAAC,sBAAD;AAAA,IAAa,OAAO;AAAA,IAAQ,UAAU;AAAA,MACtC,mDAAC,YAAD;AAAA,IACE,qBAAoB;AAAA,IACpB,kBAAiB;AAAA,IACjB,SAAS;AAAA,IACT,IAAI;AAAA,KAEH,8BACE,KAAK,CAAC,GAAW,MAAc;AAC9B,WAAO,IAAI,EAAE,cAAc,QAAQ,KAAK,EAAE,cAAc,QAAQ,KAAK,EAAE,cAAc;AAAA,KAEtF,IAAI,CAAC,SAAS;AACb,UAAM,QAAQ,KAAK,MAAM;AACzB,UAAM,SAAS,KAAK;AACpB,UAAM,QAAQ,OAAO,SAAS;AAC9B,WACE,mDAAC,eAAD;AAAA,MAAe,QAAQ,CAAC,CAAC;AAAA,OACvB,mDAAC,eAAD;AAAA,MAAM,MAAM;AAAA,MAAG,gBAAe;AAAA,MAAS,YAAW;AAAA,OAChD,mDAAC,6BAAD;AAAA,MAAc,KAAK;AAAA,MAAM;AAAA,MAAY,MAAM,KAAK;AAAA,SAElD,mDAAC,eAAD;AAAA,MAAM,SAAQ;AAAA,OACX,SACC,wFACG,KAAK,OAAO,GAAG,QAChB,mDAAC,MAAD,MAAO,KAAK,OAAO,OAAO,EAAE,UAC3B,KAAK,OAAO,QAAQ,EAAE,WAGzB;AAAA;AAAA;AAUpB,MAAM,eAAe,CAAC,SAA4B;AAChD,SAAO,mDAAC,6BAAD;AAAA,OAAkB;AAAA;AAAA;AAGpB,MAAM,OAAO,aAAa,KAAK;AAC/B,MAAM,aAAa,aAAa,KAAK;",
+  "names": []
+}

package/lib/components/asorted/Icon/FlagIcon.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+export declare const sizes: {
+    XXS: number;
+    XS: number;
+    S: number;
+    M: number;
+    L: number;
+    XL: number;
+};
+export declare type FlagsSizes = keyof typeof sizes;
+export declare type Props = {
+    name: string;
+    size?: FlagsSizes;
+};
+export declare const iconNames: string[];
+declare const FlagIcon: ({ name, size }: Props) => JSX.Element | null;
+export default FlagIcon;

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

@@ -0,0 +1,28 @@
+import * as flags from "@ledgerhq/icons-ui/react/_Flags";
+import React from "react";
+export const sizes = {
+    XXS: 16,
+    XS: 24,
+    S: 32,
+    M: 40,
+    L: 48,
+    XL: 56,
+};
+export const iconNames = Array.from(Object.keys(flags).reduce((set, rawKey) => {
+    const key = rawKey
+        .replace(/(.+)(Regular|Light|UltraLight|Thin|Medium)+$/g, "$1")
+        .replace(/(.+)(Ultra)+$/g, "$1");
+    if (!set.has(key))
+        set.add(key);
+    return set;
+}, new Set()));
+const FlagIcon = ({ name, size = "S" }) => {
+    const maybeIconName = `${name}`;
+    if (maybeIconName in flags) {
+        // @ts-expect-error FIXME I don't know how to make you happy ts
+        const Component = flags[maybeIconName];
+        return React.createElement(Component, { size: sizes[size] });
+    }
+    return null;
+};
+export default FlagIcon;

package/lib/components/asorted/Icon/PaymentIcon.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+export declare const sizes: {
+    XXS: number;
+    XS: number;
+    S: number;
+    M: number;
+    L: number;
+    XL: number;
+};
+export declare type PaymentIconSizes = keyof typeof sizes;
+export declare type Props = {
+    name: string;
+    size?: PaymentIconSizes;
+};
+export declare const iconNames: string[];
+declare const PaymentIcon: ({ name, size }: Props) => JSX.Element | null;
+export default PaymentIcon;

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

@@ -0,0 +1,28 @@
+import * as paymentProviders from "@ledgerhq/icons-ui/react/_Payment";
+import React from "react";
+export const sizes = {
+    XXS: 16,
+    XS: 24,
+    S: 32,
+    M: 40,
+    L: 48,
+    XL: 56,
+};
+export const iconNames = Array.from(Object.keys(paymentProviders).reduce((set, rawKey) => {
+    const key = rawKey
+        .replace(/(.+)(Regular|Light|UltraLight|Thin|Medium)+$/g, "$1")
+        .replace(/(.+)(Ultra)+$/g, "$1");
+    if (!set.has(key))
+        set.add(key);
+    return set;
+}, new Set()));
+const PaymentIcon = ({ name, size = "S" }) => {
+    const maybeIconName = `${name}`;
+    if (maybeIconName in paymentProviders) {
+        // @ts-expect-error FIXME I don't know how to make you happy ts
+        const Component = paymentProviders[maybeIconName];
+        return React.createElement(Component, { size: sizes[size] });
+    }
+    return null;
+};
+export default PaymentIcon;

package/lib/components/asorted/Icon/ProviderIcon.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+export declare const sizes: {
+    XXS: number;
+    XS: number;
+    S: number;
+    M: number;
+    L: number;
+    XL: number;
+};
+export declare type ProviderSizes = keyof typeof sizes;
+export declare type Props = {
+    name: string;
+    size?: ProviderSizes;
+};
+export declare const iconNames: string[];
+declare const ProviderIcon: ({ name, size }: Props) => JSX.Element | null;
+export default ProviderIcon;

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

@@ -0,0 +1,28 @@
+import * as providers from "@ledgerhq/icons-ui/react/_ProvidersLogos";
+import React from "react";
+export const sizes = {
+    XXS: 16,
+    XS: 24,
+    S: 32,
+    M: 40,
+    L: 48,
+    XL: 56,
+};
+export const iconNames = Array.from(Object.keys(providers).reduce((set, rawKey) => {
+    const key = rawKey
+        .replace(/(.+)(Regular|Light|UltraLight|Thin|Medium)+$/g, "$1")
+        .replace(/(.+)(Ultra)+$/g, "$1");
+    if (!set.has(key))
+        set.add(key);
+    return set;
+}, new Set()));
+const ProviderIcon = ({ name, size = "S" }) => {
+    const maybeIconName = `${name}`;
+    if (maybeIconName in providers) {
+        // @ts-expect-error FIXME I don't know how to make you happy ts
+        const Component = providers[maybeIconName];
+        return React.createElement(Component, { size: sizes[size] });
+    }
+    return null;
+};
+export default ProviderIcon;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/react-ui",
-  "version": "0.9.2-next.0",
+  "version": "0.9.2",
   "description": "Ledger Live - Desktop UI",
   "author": "Ledger Live Team <team-live@ledger.fr>",
   "repository": {