@ledgerhq/react-ui 0.12.1-recover-beta.0 → 0.13.0-next.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/react-ui",
-  "version": "0.12.1-recover-beta.0",
+  "version": "0.13.0-next.0",
   "description": "Ledger Live - Desktop UI",
   "author": "Ledger Live Team <team-live@ledger.fr>",
   "repository": {
@@ -22,14 +22,6 @@
     }
   },
   "exports": {
-    "./": {
-      "require": "./lib/cjs/",
-      "default": "./lib/"
-    },
-    "./*/": {
-      "require": "./lib/cjs/*/index.js",
-      "default": "./lib/*/index.js"
-    },
     "./*": {
       "require": "./lib/cjs/*.js",
       "default": "./lib/*.js"
@@ -42,6 +34,14 @@
       "require": "./lib/cjs/*.woff2",
       "default": "./lib/*.woff2"
     },
+    "./assets/fonts/HMAlphaMono-Medium.woff2": "./lib/assets/fonts/HMAlphaMono-Medium.woff2",
+    "./assets/fonts/Inter-Bold.woff2": "./lib/assets/fonts/Inter-Bold.woff2",
+    "./assets/fonts/Inter-ExtraBold.woff2": "./lib/assets/fonts/Inter-ExtraBold.woff2",
+    "./assets/fonts/Inter-ExtraLight-BETA.woff2": "./lib/assets/fonts/Inter-ExtraLight-BETA.woff2",
+    "./assets/fonts/Inter-Light-BETA.woff2": "./lib/assets/fonts/Inter-Light-BETA.woff2",
+    "./assets/fonts/Inter-Medium.woff2": "./lib/assets/fonts/Inter-Medium.woff2",
+    "./assets/fonts/Inter-Regular.woff2": "./lib/assets/fonts/Inter-Regular.woff2",
+    "./assets/fonts/Inter-SemiBold.woff2": "./lib/assets/fonts/Inter-SemiBold.woff2",
     ".": {
       "require": "./lib/cjs/index.js",
       "default": "./lib/index.js"
@@ -59,7 +59,7 @@
     "@floating-ui/react-dom": "^0.4.0",
     "@tippyjs/react": "^4.2.6",
     "@types/color": "^3.0.2",
-    "@types/react": "~17.0.37",
+    "@types/react": "~17.0.53",
     "@types/react-dom": "^17.0.11",
     "@types/react-transition-group": "^4.4.2",
     "@types/react-window": "^1.8.5",
@@ -75,17 +75,17 @@
     "react-transition-group": "^4.4.2",
     "react-window": "^1.8.6",
     "styled-system": "^5.1.5",
-    "@ledgerhq/crypto-icons-ui": "^0.2.1",
-    "@ledgerhq/icons-ui": "^0.3.5",
-    "@ledgerhq/ui-shared": "^0.1.11-recover-beta.0"
+    "@ledgerhq/crypto-icons-ui": "^0.2.2-next.0",
+    "@ledgerhq/icons-ui": "^0.4.0-next.0",
+    "@ledgerhq/ui-shared": "^0.1.10"
   },
   "peerDependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": ">=17.0.2",
+    "react-dom": ">=17.0.2",
     "styled-components": "^5.3.3"
   },
   "devDependencies": {
-    "@babel/core": "7",
+    "@babel/core": "^7.21.0",
     "@storybook/addon-actions": "^6.3.6",
     "@storybook/addon-essentials": "^6.3.6",
     "@storybook/addon-links": "^6.3.6",
@@ -98,7 +98,7 @@
     "@typescript-eslint/parser": "^5.22.0",
     "babel-loader": "^8.0.0",
     "csstype": "^3.0.11",
-    "esbuild": "^0.13.13",
+    "esbuild": "^0.17.14",
     "eslint": "8.2.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
@@ -115,7 +115,7 @@
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-processor-styled-components": "^1.10.0",
     "tiny-glob": "^0.2.9",
-    "typescript": "^4.8.3",
+    "typescript": "^4.9.5",
     "webpack": "*"
   },
   "scripts": {

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

@@ -1,61 +0,0 @@
-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/index"));
-var import_react = __toModule(require("react"));
-const sizes = {
-  XXS: 16,
-  XS: 24,
-  S: 32
-};
-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 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}`;
-  const Component = getIconCaseInsensitive({
-    search: maybeIconName,
-    object: paymentProviders
-  });
-  if (Component) {
-    return /* @__PURE__ */ import_react.default.createElement(Component, {
-      height: sizes[size]
-    });
-  }
-  return null;
-};
-var PaymentIcon_default = PaymentIcon;
-//# sourceMappingURL=PaymentIcon.js.map

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../../src/components/asorted/Icon/PaymentIcon.tsx"],
-  "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};\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 height={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;AAUE,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,QAAQ,MAAM;AAAA;AAAA;AAElC,SAAO;AAAA;AAGT,IAAO,sBAAQ;",
-  "names": []
-}

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

@@ -1,117 +0,0 @@
-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: "S",
-      control: {
-        options: Object.keys(import_PaymentIcon.sizes)
-      }
-    },
-    name: {
-      type: "string",
-      defaultValue: "Ach"
-    }
-  }
-};
-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, 120px);",
-    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

@@ -1,7 +0,0 @@
-{
-  "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: \"S\",\n      control: {\n        options: Object.keys(flagSizes),\n      },\n    },\n    name: {\n      type: \"string\",\n      defaultValue: \"Ach\",\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, 120px);\"\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;AAAA;AAAA;AAIpB,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/components/asorted/Icon/PaymentIcon.d.ts

@@ -1,18 +0,0 @@
-import React from "react";
-export declare const sizes: {
-    XXS: number;
-    XS: number;
-    S: number;
-};
-export type PaymentIconSizes = keyof typeof sizes;
-export type Props = {
-    name: string;
-    size?: PaymentIconSizes;
-};
-export declare const iconNames: string[];
-export type IconGetterProps = {
-    search: string;
-    object: Record<string, React.ReactNode>;
-};
-declare const PaymentIcon: ({ name, size }: Props) => JSX.Element | null;
-export default PaymentIcon;

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

@@ -1,32 +0,0 @@
-import * as paymentProviders from "@ledgerhq/icons-ui/react/Payment/index";
-import React from "react";
-export const sizes = {
-    XXS: 16,
-    XS: 24,
-    S: 32,
-};
-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 getIconCaseInsensitive = ({ search, object }) => {
-    const asLower = search.toLowerCase();
-    const key = Object.keys(object).find((key) => key.toLowerCase() === asLower);
-    return key ? object[key] : null;
-};
-const PaymentIcon = ({ name, size = "S" }) => {
-    const maybeIconName = `${name}`;
-    const Component = getIconCaseInsensitive({
-        search: maybeIconName,
-        object: paymentProviders,
-    });
-    if (Component) {
-        return React.createElement(Component, { height: sizes[size] });
-    }
-    return null;
-};
-export default PaymentIcon;