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

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

@@ -26,7 +26,7 @@ __export(exports, {
   iconNames: () => iconNames,
   sizes: () => sizes
 });
-var flags = __toModule(require("@ledgerhq/icons-ui/react/_Flags"));
+var flags = __toModule(require("@ledgerhq/icons-ui/react/_Flags/index"));
 var import_react = __toModule(require("react"));
 const sizes = {
   XXS: 16,

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

@@ -1,7 +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"],
+  "sourcesContent": ["import * as flags from \"@ledgerhq/icons-ui/react/_Flags/index\";\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/PaymentIcon.js

@@ -26,7 +26,7 @@ __export(exports, {
   iconNames: () => iconNames,
   sizes: () => sizes
 });
-var paymentProviders = __toModule(require("@ledgerhq/icons-ui/react/_Payment"));
+var paymentProviders = __toModule(require("@ledgerhq/icons-ui/react/_Payment/index"));
 var import_react = __toModule(require("react"));
 const sizes = {
   XXS: 16,
@@ -42,10 +42,18 @@ const iconNames = Array.from(Object.keys(paymentProviders).reduce((set, rawKey)
     set.add(key);
   return set;
 }, new Set()));
+const getIconCaseInsensitive = ({ search, object }) => {
+  const asLower = search.toLowerCase();
+  const key = Object.keys(object).find((key2) => key2.toLowerCase() === asLower);
+  return key ? object[key] : null;
+};
 const PaymentIcon = ({ name, size = "S" }) => {
   const maybeIconName = `${name}`;
-  if (maybeIconName in paymentProviders) {
-    const Component = paymentProviders[maybeIconName];
+  const Component = getIconCaseInsensitive({
+    search: maybeIconName,
+    object: paymentProviders
+  });
+  if (Component) {
     return /* @__PURE__ */ import_react.default.createElement(Component, {
       size: sizes[size]
     });

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

@@ -1,7 +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;",
+  "sourcesContent": ["import * as paymentProviders from \"@ledgerhq/icons-ui/react/_Payment/index\";\n\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\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() === asLower);\n  return key ? object[key] : null;\n};\n\nconst PaymentIcon = ({ name, size = \"S\" }: Props): JSX.Element | null => {\n  const maybeIconName = `${name}`;\n\n  const Component = getIconCaseInsensitive({\n    search: maybeIconName,\n    object: paymentProviders,\n  }) as React.ElementType;\n  if (Component) {\n    return <Component size={sizes[size]} />;\n  }\n  return null;\n};\n\nexport default PaymentIcon;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAkC;AAElC,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;AAQT,MAAM,yBAAyB,CAAC,EAAE,QAAQ,aAA8B;AACtE,QAAM,UAAU,OAAO;AACvB,QAAM,MAAM,OAAO,KAAK,QAAQ,KAAK,CAAC,SAAQ,KAAI,kBAAkB;AACpE,SAAO,MAAM,OAAO,OAAO;AAAA;AAG7B,MAAM,cAAc,CAAC,EAAE,MAAM,OAAO,UAAqC;AACvE,QAAM,gBAAgB,GAAG;AAEzB,QAAM,YAAY,uBAAuB;AAAA,IACvC,QAAQ;AAAA,IACR,QAAQ;AAAA;AAEV,MAAI,WAAW;AACb,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

@@ -68,15 +68,7 @@ const Story = {
       }
     },
     name: {
-      type: "enum",
-      defaultValue: "France",
-      description: "[Only for single icon], Icon name",
-      control: {
-        options: import_PaymentIcon.iconNames,
-        control: {
-          type: "select"
-        }
-      }
+      type: "string"
     }
   }
 };

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

@@ -1,7 +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;",
+  "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: \"string\",\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;AAAA;AAAA;AAYZ,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

@@ -26,8 +26,10 @@ __export(exports, {
   iconNames: () => iconNames,
   sizes: () => sizes
 });
-var providers = __toModule(require("@ledgerhq/icons-ui/react/_ProvidersLogos"));
+var providers = __toModule(require("@ledgerhq/icons-ui/react/_ProvidersLogos/index"));
+var favicons = __toModule(require("./providerFaviconsIndex"));
 var import_react = __toModule(require("react"));
+var import_styled_components = __toModule(require("styled-components"));
 const sizes = {
   XXS: 16,
   XS: 24,
@@ -42,10 +44,28 @@ const iconNames = Array.from(Object.keys(providers).reduce((set, rawKey) => {
     set.add(key);
   return set;
 }, new Set()));
-const ProviderIcon = ({ name, size = "S" }) => {
+const Favicon = import_styled_components.default.img`
+  border-radius: 8px;
+`;
+const getIconCaseInsensitive = ({ search, object }) => {
+  const asLower = search.toLowerCase();
+  const key = Object.keys(object).find((key2) => key2.toLowerCase() === asLower);
+  return key ? object[key] : null;
+};
+const ProviderIcon = ({ name, size = "S", boxed = false }) => {
   const maybeIconName = `${name}`;
-  if (maybeIconName in providers) {
-    const Component = providers[maybeIconName];
+  if (boxed) {
+    return /* @__PURE__ */ import_react.default.createElement(Favicon, {
+      width: sizes[size],
+      height: sizes[size],
+      src: getIconCaseInsensitive({ search: maybeIconName, object: favicons })
+    });
+  }
+  const Component = getIconCaseInsensitive({
+    search: maybeIconName,
+    object: providers
+  });
+  if (Component) {
     return /* @__PURE__ */ import_react.default.createElement(Component, {
       size: sizes[size]
     });

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/_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;",
+  "sourcesContent": ["import * as providers from \"@ledgerhq/icons-ui/react/_ProvidersLogos/index\";\nimport * as favicons from \"./providerFaviconsIndex\";\n\nimport React from \"react\";\nimport styled from \"styled-components\";\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    if (!set.has(key)) set.add(key);\n    return set;\n  }, new Set<string>()),\n);\n\nconst Favicon = styled.img`\n  border-radius: 8px;\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() === 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    return (\n      <Favicon\n        width={sizes[size]}\n        height={sizes[size]}\n        src={getIconCaseInsensitive({ search: maybeIconName, object: favicons }) as string}\n      />\n    );\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,gBAA2B;AAC3B,eAA0B;AAE1B,mBAAkB;AAClB,+BAAmB;AAEZ,MAAM,QAAQ;AAAA,EACnB,KAAK;AAAA,EACL,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA;AAWC,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,UAAU,iCAAO;AAAA;AAAA;AASvB,MAAM,yBAAyB,CAAC,EAAE,QAAQ,aAA8B;AACtE,QAAM,UAAU,OAAO;AACvB,QAAM,MAAM,OAAO,KAAK,QAAQ,KAAK,CAAC,SAAQ,KAAI,kBAAkB;AACpE,SAAO,MAAM,OAAO,OAAO;AAAA;AAG7B,MAAM,eAAe,CAAC,EAAE,MAAM,OAAO,KAAK,QAAQ,YAAuC;AACvF,QAAM,gBAAgB,GAAG;AAEzB,MAAI,OAAO;AACT,WACE,mDAAC,SAAD;AAAA,MACE,OAAO,MAAM;AAAA,MACb,QAAQ,MAAM;AAAA,MACd,KAAK,uBAAuB,EAAE,QAAQ,eAAe,QAAQ;AAAA;AAAA;AAInE,QAAM,YAAY,uBAAuB;AAAA,IACvC,QAAQ;AAAA,IACR,QAAQ;AAAA;AAEV,MAAI,WAAW;AACb,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

@@ -67,16 +67,13 @@ const Story = {
         options: Object.keys(import_ProviderIcon.sizes)
       }
     },
+    boxed: {
+      type: "boolean",
+      description: "Boxed",
+      defaultValue: false
+    },
     name: {
-      type: "enum",
-      defaultValue: "France",
-      description: "[Only for single icon], Icon name",
-      control: {
-        options: import_ProviderIcon.iconNames,
-        control: {
-          type: "select"
-        }
-      }
+      type: "string"
     }
   }
 };
@@ -108,7 +105,8 @@ const ListTemplate = (args) => {
     }, /* @__PURE__ */ import_react.default.createElement(import_ProviderIcon.default, {
       key: name,
       name,
-      size: args.size
+      size: args.size,
+      boxed: args.boxed
     })), /* @__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));

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

@@ -1,7 +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;",
+  "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    boxed: {\n      type: \"boolean\",\n      description: \"Boxed\",\n      defaultValue: false,\n    },\n    name: {\n      type: \"string\",\n      // defaultValue: \"Aave\",\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} boxed={args.boxed} />\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,OAAO;AAAA,MACL,MAAM;AAAA,MACN,aAAa;AAAA,MACb,cAAc;AAAA;AAAA,IAEhB,MAAM;AAAA,MACJ,MAAM;AAAA;AAAA;AAAA;AAYZ,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,MAAM,OAAO,KAAK;AAAA,SAEpE,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/cjs/components/asorted/Icon/index.js

@@ -24,11 +24,17 @@ var __toModule = (module2) => {
 __export(exports, {
   BoxedIcon: () => import_BoxedIcon.default,
   CryptoIcon: () => import_CryptoIcon.default,
+  FlagIcon: () => import_FlagIcon.default,
   IconBox: () => import_BoxedIcon.IconBox,
+  PaymentIcon: () => import_PaymentIcon.default,
+  ProviderIcon: () => import_ProviderIcon.default,
   default: () => import_Icon.default,
   iconNames: () => import_Icon.iconNames
 });
 var import_Icon = __toModule(require("./Icon"));
 var import_BoxedIcon = __toModule(require("./BoxedIcon"));
 var import_CryptoIcon = __toModule(require("./CryptoIcon"));
+var import_PaymentIcon = __toModule(require("./PaymentIcon"));
+var import_ProviderIcon = __toModule(require("./ProviderIcon"));
+var import_FlagIcon = __toModule(require("./FlagIcon"));
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/asorted/Icon/index.tsx"],
-  "sourcesContent": ["export { default, iconNames } from \"./Icon\";\nimport BoxedIcon, { IconBox } from \"./BoxedIcon\";\nexport { BoxedIcon, IconBox };\nexport type { Props } from \"./Icon\";\nexport { default as CryptoIcon } from \"./CryptoIcon\";\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAmC;AACnC,uBAAmC;AAGnC,wBAAsC;",
+  "sourcesContent": ["export { default, iconNames } from \"./Icon\";\nimport BoxedIcon, { IconBox } from \"./BoxedIcon\";\nexport { BoxedIcon, IconBox };\nexport type { Props } from \"./Icon\";\nexport { default as CryptoIcon } from \"./CryptoIcon\";\nexport { default as PaymentIcon } from \"./PaymentIcon\";\nexport { default as ProviderIcon } from \"./ProviderIcon\";\nexport { default as FlagIcon } from \"./FlagIcon\";\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAmC;AACnC,uBAAmC;AAGnC,wBAAsC;AACtC,yBAAuC;AACvC,0BAAwC;AACxC,sBAAoC;",
   "names": []
 }

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

@@ -0,0 +1,92 @@
+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, {
+  Aave: () => import_Aave.default,
+  Baanx: () => import_Baanx.default,
+  Banxa: () => import_Banxa.default,
+  Bitrefill: () => import_Bitrefill.default,
+  BtcDirect: () => import_BtcDirect.default,
+  Changelly: () => import_Changelly.default,
+  CoinGecko: () => import_CoinGecko.default,
+  Coinify: () => import_Coinify.default,
+  Compound: () => import_Compound.default,
+  Deversifi: () => import_Deversifi.default,
+  Ftx: () => import_Ftx.default,
+  Ftxus: () => import_Ftxus.default,
+  Kiln: () => import_Kiln.default,
+  LedgerBlack: () => import_LedgerBlack.default,
+  LedgerCard: () => import_LedgerCard.default,
+  LedgerWhite: () => import_LedgerWhite.default,
+  Lido: () => import_Lido.default,
+  LoopiPay: () => import_LoopiPay.default,
+  Mercuryo: () => import_Mercuryo.default,
+  Moonpay: () => import_Moonpay.default,
+  Opensea: () => import_Opensea.default,
+  PancakeSwap: () => import_PancakeSwap.default,
+  Paraswap: () => import_Paraswap.default,
+  Poap: () => import_Poap.default,
+  RainbowMe: () => import_RainbowMe.default,
+  Ramp: () => import_Ramp.default,
+  Rarible: () => import_Rarible.default,
+  Simplex: () => import_Simplex.default,
+  SushiSwap: () => import_SushiSwap.default,
+  Transak: () => import_Transak.default,
+  Wyre: () => import_Wyre.default,
+  Zerion: () => import_Zerion.default,
+  _1Inch: () => import_Inch.default
+});
+var import_Inch = __toModule(require("../../../assets/providersFavicons/_1Inch.png"));
+var import_Aave = __toModule(require("../../../assets/providersFavicons/Aave.png"));
+var import_Baanx = __toModule(require("../../../assets/providersFavicons/Baanx.png"));
+var import_Banxa = __toModule(require("../../../assets/providersFavicons/Banxa.png"));
+var import_Bitrefill = __toModule(require("../../../assets/providersFavicons/Bitrefill.png"));
+var import_BtcDirect = __toModule(require("../../../assets/providersFavicons/BtcDirect.png"));
+var import_Changelly = __toModule(require("../../../assets/providersFavicons/Changelly.png"));
+var import_CoinGecko = __toModule(require("../../../assets/providersFavicons/CoinGecko.png"));
+var import_Coinify = __toModule(require("../../../assets/providersFavicons/Coinify.png"));
+var import_Compound = __toModule(require("../../../assets/providersFavicons/Compound.png"));
+var import_Deversifi = __toModule(require("../../../assets/providersFavicons/Deversifi.png"));
+var import_Ftx = __toModule(require("../../../assets/providersFavicons/Ftx.png"));
+var import_Ftxus = __toModule(require("../../../assets/providersFavicons/Ftxus.png"));
+var import_Kiln = __toModule(require("../../../assets/providersFavicons/Kiln.png"));
+var import_LedgerBlack = __toModule(require("../../../assets/providersFavicons/LedgerBlack.png"));
+var import_LedgerWhite = __toModule(require("../../../assets/providersFavicons/LedgerWhite.png"));
+var import_LedgerCard = __toModule(require("../../../assets/providersFavicons/LedgerCard.png"));
+var import_Lido = __toModule(require("../../../assets/providersFavicons/Lido.png"));
+var import_LoopiPay = __toModule(require("../../../assets/providersFavicons/LoopiPay.png"));
+var import_Mercuryo = __toModule(require("../../../assets/providersFavicons/Mercuryo.png"));
+var import_Moonpay = __toModule(require("../../../assets/providersFavicons/Moonpay.png"));
+var import_Opensea = __toModule(require("../../../assets/providersFavicons/Opensea.png"));
+var import_PancakeSwap = __toModule(require("../../../assets/providersFavicons/PancakeSwap.png"));
+var import_Paraswap = __toModule(require("../../../assets/providersFavicons/Paraswap.png"));
+var import_Poap = __toModule(require("../../../assets/providersFavicons/Poap.png"));
+var import_RainbowMe = __toModule(require("../../../assets/providersFavicons/RainbowMe.png"));
+var import_Ramp = __toModule(require("../../../assets/providersFavicons/Ramp.png"));
+var import_Rarible = __toModule(require("../../../assets/providersFavicons/Rarible.png"));
+var import_Simplex = __toModule(require("../../../assets/providersFavicons/Simplex.png"));
+var import_SushiSwap = __toModule(require("../../../assets/providersFavicons/SushiSwap.png"));
+var import_Transak = __toModule(require("../../../assets/providersFavicons/Transak.png"));
+var import_Wyre = __toModule(require("../../../assets/providersFavicons/Wyre.png"));
+var import_Zerion = __toModule(require("../../../assets/providersFavicons/Zerion.png"));
+//# sourceMappingURL=providerFaviconsIndex.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/asorted/Icon/providerFaviconsIndex.tsx"],
+  "sourcesContent": ["export { default as _1Inch } from \"../../../assets/providersFavicons/_1Inch.png\";\nexport { default as Aave } from \"../../../assets/providersFavicons/Aave.png\";\nexport { default as Baanx } from \"../../../assets/providersFavicons/Baanx.png\";\nexport { default as Banxa } from \"../../../assets/providersFavicons/Banxa.png\";\nexport { default as Bitrefill } from \"../../../assets/providersFavicons/Bitrefill.png\";\nexport { default as BtcDirect } from \"../../../assets/providersFavicons/BtcDirect.png\";\nexport { default as Changelly } from \"../../../assets/providersFavicons/Changelly.png\";\nexport { default as CoinGecko } from \"../../../assets/providersFavicons/CoinGecko.png\";\nexport { default as Coinify } from \"../../../assets/providersFavicons/Coinify.png\";\nexport { default as Compound } from \"../../../assets/providersFavicons/Compound.png\";\nexport { default as Deversifi } from \"../../../assets/providersFavicons/Deversifi.png\";\nexport { default as Ftx } from \"../../../assets/providersFavicons/Ftx.png\";\nexport { default as Ftxus } from \"../../../assets/providersFavicons/Ftxus.png\";\nexport { default as Kiln } from \"../../../assets/providersFavicons/Kiln.png\";\nexport { default as LedgerBlack } from \"../../../assets/providersFavicons/LedgerBlack.png\";\nexport { default as LedgerWhite } from \"../../../assets/providersFavicons/LedgerWhite.png\";\nexport { default as LedgerCard } from \"../../../assets/providersFavicons/LedgerCard.png\";\nexport { default as Lido } from \"../../../assets/providersFavicons/Lido.png\";\nexport { default as LoopiPay } from \"../../../assets/providersFavicons/LoopiPay.png\";\nexport { default as Mercuryo } from \"../../../assets/providersFavicons/Mercuryo.png\";\nexport { default as Moonpay } from \"../../../assets/providersFavicons/Moonpay.png\";\nexport { default as Opensea } from \"../../../assets/providersFavicons/Opensea.png\";\nexport { default as PancakeSwap } from \"../../../assets/providersFavicons/PancakeSwap.png\";\nexport { default as Paraswap } from \"../../../assets/providersFavicons/Paraswap.png\";\nexport { default as Poap } from \"../../../assets/providersFavicons/Poap.png\";\nexport { default as RainbowMe } from \"../../../assets/providersFavicons/RainbowMe.png\";\nexport { default as Ramp } from \"../../../assets/providersFavicons/Ramp.png\";\nexport { default as Rarible } from \"../../../assets/providersFavicons/Rarible.png\";\nexport { default as Simplex } from \"../../../assets/providersFavicons/Simplex.png\";\nexport { default as SushiSwap } from \"../../../assets/providersFavicons/SushiSwap.png\";\nexport { default as Transak } from \"../../../assets/providersFavicons/Transak.png\";\nexport { default as Wyre } from \"../../../assets/providersFavicons/Wyre.png\";\nexport { default as Zerion } from \"../../../assets/providersFavicons/Zerion.png\";\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAkC;AAClC,kBAAgC;AAChC,mBAAiC;AACjC,mBAAiC;AACjC,uBAAqC;AACrC,uBAAqC;AACrC,uBAAqC;AACrC,uBAAqC;AACrC,qBAAmC;AACnC,sBAAoC;AACpC,uBAAqC;AACrC,iBAA+B;AAC/B,mBAAiC;AACjC,kBAAgC;AAChC,yBAAuC;AACvC,yBAAuC;AACvC,wBAAsC;AACtC,kBAAgC;AAChC,sBAAoC;AACpC,sBAAoC;AACpC,qBAAmC;AACnC,qBAAmC;AACnC,yBAAuC;AACvC,sBAAoC;AACpC,kBAAgC;AAChC,uBAAqC;AACrC,kBAAgC;AAChC,qBAAmC;AACnC,qBAAmC;AACnC,uBAAqC;AACrC,qBAAmC;AACnC,kBAAgC;AAChC,oBAAkC;",
+  "names": []
+}