@ledgerhq/react-ui 0.8.3-next.0 → 0.9.0-nightly.0

package/lib/assets/cryptoIcons.d.ts

@@ -0,0 +1 @@
+export * from "@ledgerhq/crypto-icons-ui/react";

package/lib/assets/cryptoIcons.js

@@ -0,0 +1 @@
+export * from "@ledgerhq/crypto-icons-ui/react";

package/lib/assets/index.d.ts

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

package/lib/assets/index.js

@@ -1,4 +1,6 @@
 import * as Icons_1 from "@ledgerhq/icons-ui/react";
 export { Icons_1 as Icons };
+import * as CryptoIcons_1 from "@ledgerhq/crypto-icons-ui/react";
+export { CryptoIcons_1 as CryptoIcons };
 import * as Logos_1 from "./logos";
 export { Logos_1 as Logos };

package/lib/cjs/assets/cryptoIcons.js

@@ -0,0 +1,21 @@
+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 __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);
+};
+__markAsModule(exports);
+__reExport(exports, __toModule(require("@ledgerhq/crypto-icons-ui/react")));
+//# sourceMappingURL=cryptoIcons.js.map

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

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

package/lib/cjs/assets/index.js

@@ -22,9 +22,11 @@ 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, {
+  CryptoIcons: () => CryptoIcons,
   Icons: () => Icons,
   Logos: () => Logos
 });
 var Icons = __toModule(require("@ledgerhq/icons-ui/react"));
+var CryptoIcons = __toModule(require("@ledgerhq/crypto-icons-ui/react"));
 var Logos = __toModule(require("./logos"));
 //# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,53 @@
+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: () => CryptoIcon_default,
+  iconNames: () => iconNames
+});
+var icons = __toModule(require("@ledgerhq/crypto-icons-ui/react"));
+var import_react = __toModule(require("react"));
+var import_styles = __toModule(require("../../../styles"));
+var import_styled_components = __toModule(require("styled-components"));
+const iconNames = Array.from(Object.keys(icons).reduce((set, rawKey) => {
+  const key = rawKey;
+  if (!set.has(key))
+    set.add(key);
+  return set;
+}, new Set()));
+const CryptoIcon = ({ name, size = 16, color, backgroundColor }) => {
+  const maybeIconName = `${name}`;
+  const { colors } = (0, import_styled_components.useTheme)();
+  if (maybeIconName in icons) {
+    const Component = icons[maybeIconName];
+    const defaultColor = Component.DefaultColor;
+    const contrastedColor = (0, import_styles.ensureContrast)(color || defaultColor, backgroundColor || colors.background.main);
+    return /* @__PURE__ */ import_react.default.createElement(Component, {
+      size,
+      color: contrastedColor
+    });
+  }
+  return null;
+};
+var CryptoIcon_default = CryptoIcon;
+//# sourceMappingURL=CryptoIcon.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/asorted/Icon/CryptoIcon.tsx"],
+  "sourcesContent": ["import * as icons from \"@ledgerhq/crypto-icons-ui/react\";\nimport React from \"react\";\nimport { ensureContrast } from \"../../../styles\";\nimport { useTheme } from \"styled-components\";\n\nexport type Props = {\n  name: string;\n  size?: number;\n  color?: string;\n  backgroundColor?: string; // overrides background color to ensure contrast with icon color\n};\n\nexport const iconNames = Array.from(\n  Object.keys(icons).reduce((set, rawKey) => {\n    const key = rawKey;\n    if (!set.has(key)) set.add(key);\n    return set;\n  }, new Set<string>()),\n);\n\nconst CryptoIcon = ({ name, size = 16, color, backgroundColor }: Props): JSX.Element | null => {\n  const maybeIconName = `${name}`;\n  const { colors } = useTheme();\n  if (maybeIconName in icons) {\n    // @ts-expect-error FIXME I don't know how to make you happy ts\n    const Component = icons[maybeIconName];\n    const defaultColor = Component.DefaultColor;\n    const contrastedColor = ensureContrast(\n      color || defaultColor,\n      backgroundColor || colors.background.main,\n    );\n    return <Component size={size} color={contrastedColor} />;\n  }\n  return null;\n};\n\nexport default CryptoIcon;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,mBAAkB;AAClB,oBAA+B;AAC/B,+BAAyB;AASlB,MAAM,YAAY,MAAM,KAC7B,OAAO,KAAK,OAAO,OAAO,CAAC,KAAK,WAAW;AACzC,QAAM,MAAM;AACZ,MAAI,CAAC,IAAI,IAAI;AAAM,QAAI,IAAI;AAC3B,SAAO;AAAA,GACN,IAAI;AAGT,MAAM,aAAa,CAAC,EAAE,MAAM,OAAO,IAAI,OAAO,sBAAiD;AAC7F,QAAM,gBAAgB,GAAG;AACzB,QAAM,EAAE,WAAW;AACnB,MAAI,iBAAiB,OAAO;AAE1B,UAAM,YAAY,MAAM;AACxB,UAAM,eAAe,UAAU;AAC/B,UAAM,kBAAkB,kCACtB,SAAS,cACT,mBAAmB,OAAO,WAAW;AAEvC,WAAO,mDAAC,WAAD;AAAA,MAAW;AAAA,MAAY,OAAO;AAAA;AAAA;AAEvC,SAAO;AAAA;AAGT,IAAO,qBAAQ;",
+  "names": []
+}

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

@@ -0,0 +1,130 @@
+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, {
+  ListCryptoIcons: () => ListCryptoIcons,
+  SingleCryptoIcon: () => SingleCryptoIcon,
+  default: () => CryptoIcons_stories_default
+});
+var import_react = __toModule(require("react"));
+var import_styled_components = __toModule(require("styled-components"));
+var import__ = __toModule(require("../../.."));
+var cryptoIcons = __toModule(require("@ledgerhq/crypto-icons-ui/react"));
+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/CryptoIcons",
+  argTypes: {
+    size: {
+      type: "number",
+      description: "Icon size for preview",
+      defaultValue: 32
+    },
+    color: {
+      type: "string",
+      description: "Color",
+      control: { control: "color" }
+    },
+    name: {
+      type: "enum",
+      defaultValue: "BTC",
+      description: "[Only for single icon], Icon name",
+      control: {
+        options: Object.keys(cryptoIcons),
+        control: {
+          type: "select"
+        }
+      }
+    }
+  }
+};
+var CryptoIcons_stories_default = Story;
+const ListTemplate = (args) => {
+  const color = args.color || void 0;
+  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
+  }, Object.keys(cryptoIcons).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__.CryptoIcon, {
+      key: name,
+      name,
+      size: args.size,
+      color
+    })), /* @__PURE__ */ import_react.default.createElement(import__.Text, {
+      variant: "extraSmall"
+    }, active ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, name.substr(0, index), /* @__PURE__ */ import_react.default.createElement(Bold, null, name.substr(index, s.length)), name.substr(index + s.length)) : name));
+  })));
+};
+const IconTemplate = (args) => {
+  const color = args.color || void 0;
+  return /* @__PURE__ */ import_react.default.createElement(import__.CryptoIcon, {
+    ...args,
+    color
+  });
+};
+const ListCryptoIcons = ListTemplate.bind({});
+const SingleCryptoIcon = IconTemplate.bind({});
+//# sourceMappingURL=CryptoIcons.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/asorted/Icon/CryptoIcons.stories.tsx"],
+  "sourcesContent": ["import React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport { Text, SearchInput, Flex, Grid, CryptoIcon } from \"../../..\";\nimport * as cryptoIcons from \"@ledgerhq/crypto-icons-ui/react\";\n\ntype CryptoIconsProps = {\n  name: keyof typeof cryptoIcons;\n  size?: number;\n  color?: string;\n};\n\nconst ScrollArea = styled(Grid)`\n  flex: 1;\n  height: auto;\n  ${(p) => p.theme.overflow.y};\n`;\n\nconst Container = styled(Flex).attrs({\n  flex: 1,\n  flexDirection: \"column\",\n  p: 4,\n})`\n  overflow: hidden;\n  height: calc(100vh - 4em);\n`;\n\nconst IconContainer = styled(Flex).attrs<{ active?: boolean }>({\n  flexDirection: \"column\",\n  justifyContent: \"flex-end\",\n  alignItems: \"center\",\n  p: 4,\n})<{ active?: boolean }>`\n  ${(p) => (p.active ? `background-color: ${p.theme.colors.neutral.c20};` : ``)}\n  border-radius: 4px;\n  height: 100px;\n`;\n\nconst Bold = styled.b`\n  color: ${(p) => p.theme.colors.primary.c80};\n`;\n\nconst Story = {\n  title: \"Asorted/CryptoIcons\",\n  argTypes: {\n    size: {\n      type: \"number\",\n      description: \"Icon size for preview\",\n      defaultValue: 32,\n    },\n    color: {\n      type: \"string\",\n      description: \"Color\",\n      control: { control: \"color\" },\n    },\n    name: {\n      type: \"enum\",\n      defaultValue: \"BTC\",\n      description: \"[Only for single icon], Icon name\",\n      control: {\n        options: Object.keys(cryptoIcons),\n        control: {\n          type: \"select\",\n        },\n      },\n    },\n  },\n};\nexport default Story;\n\nconst ListTemplate = (args: CryptoIconsProps) => {\n  const color = args.color || undefined;\n  const [search, setSearch] = useState(\"\");\n  const s = search.toLowerCase();\n  const regexp = new RegExp(s, \"i\");\n\n  return (\n    <Container>\n      <SearchInput value={search} onChange={setSearch} />\n      <ScrollArea\n        gridTemplateColumns=\"repeat(auto-fill, 100px);\"\n        gridTemplateRows=\"repeat(auto-fill, 100px);\"\n        gridGap={4}\n        mt={4}\n      >\n        {Object.keys(cryptoIcons)\n          .sort((a, b) => {\n            return s ? b.toLowerCase().indexOf(s) - a.toLowerCase().indexOf(s) : a.localeCompare(b);\n          })\n          // @ts-expect-error FIXME I don't know how to make you happy ts\n          .map((name: keyof typeof cryptoIcons) => {\n            const match = name.match(regexp);\n            const active = s && match;\n            const index = match?.index ?? 0;\n            return (\n              <IconContainer active={!!active}>\n                <Flex flex={1} justifyContent=\"center\" alignItems=\"center\">\n                  <CryptoIcon key={name} name={name} size={args.size} color={color} />\n                </Flex>\n                <Text variant=\"extraSmall\">\n                  {active ? (\n                    <>\n                      {name.substr(0, index)}\n                      <Bold>{name.substr(index, s.length)}</Bold>\n                      {name.substr(index + s.length)}\n                    </>\n                  ) : (\n                    name\n                  )}\n                </Text>\n              </IconContainer>\n            );\n          })}\n      </ScrollArea>\n    </Container>\n  );\n};\nconst IconTemplate = (args: CryptoIconsProps) => {\n  const color = args.color || undefined;\n\n  return <CryptoIcon {...args} color={color} />;\n};\n\nexport const ListCryptoIcons = ListTemplate.bind({});\nexport const SingleCryptoIcon = IconTemplate.bind({});\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,+BAAmB;AACnB,eAA0D;AAC1D,kBAA6B;AAQ7B,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;AAAA,IAEhB,OAAO;AAAA,MACL,MAAM;AAAA,MACN,aAAa;AAAA,MACb,SAAS,EAAE,SAAS;AAAA;AAAA,IAEtB,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,cAAc;AAAA,MACd,aAAa;AAAA,MACb,SAAS;AAAA,QACP,SAAS,OAAO,KAAK;AAAA,QACrB,SAAS;AAAA,UACP,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAMhB,IAAO,8BAAQ;AAEf,MAAM,eAAe,CAAC,SAA2B;AAC/C,QAAM,QAAQ,KAAK,SAAS;AAC5B,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,OAAO,KAAK,aACV,KAAK,CAAC,GAAG,MAAM;AACd,WAAO,IAAI,EAAE,cAAc,QAAQ,KAAK,EAAE,cAAc,QAAQ,KAAK,EAAE,cAAc;AAAA,KAGtF,IAAI,CAAC,SAAmC;AACvC,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,qBAAD;AAAA,MAAY,KAAK;AAAA,MAAM;AAAA,MAAY,MAAM,KAAK;AAAA,MAAM;AAAA,SAEtD,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,QAAM,QAAQ,KAAK,SAAS;AAE5B,SAAO,mDAAC,qBAAD;AAAA,OAAgB;AAAA,IAAM;AAAA;AAAA;AAGxB,MAAM,kBAAkB,aAAa,KAAK;AAC1C,MAAM,mBAAmB,aAAa,KAAK;",
+  "names": []
+}

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

@@ -42,7 +42,7 @@ const Container = (0, import_styled_components.default)(import__.Flex).attrs({
   p: 4
 })`
   overflow: hidden;
-  height: calc(100vh - 2em);
+  height: calc(100vh - 4em);
 `;
 const IconContainer = (0, import_styled_components.default)(import__.Flex).attrs({
   flexDirection: "column",

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/asorted/Icon/Icons.stories.tsx"],
-  "sourcesContent": ["import React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport Icon, { iconNames, Props as IconProps } from \"./Icon\";\nimport { useTheme } from \"styled-components\";\nimport { Text, SearchInput, Flex, Grid } from \"../../..\";\n\nconst ScrollArea = styled(Grid)`\n  flex: 1;\n  height: auto;\n  ${(p) => p.theme.overflow.y};\n`;\n\nconst Container = styled(Flex).attrs({\n  flex: 1,\n  flexDirection: \"column\",\n  p: 4,\n})`\n  overflow: hidden;\n  height: calc(100vh - 2em);\n`;\n\nconst IconContainer = styled(Flex).attrs<{ active?: boolean }>({\n  flexDirection: \"column\",\n  justifyContent: \"flex-end\",\n  alignItems: \"center\",\n  p: 4,\n})<{ active?: boolean }>`\n  ${(p) => (p.active ? `background-color: ${p.theme.colors.neutral.c20};` : ``)}\n  border-radius: 4px;\n  height: 100px;\n`;\n\nconst Bold = styled.b`\n  color: ${(p) => p.theme.colors.primary.c80};\n`;\n\nconst Story = {\n  title: \"Asorted/Icons\",\n  argTypes: {\n    weight: {\n      type: \"enum\",\n      description: \"Weight\",\n      defaultValue: \"Medium\",\n      control: {\n        options: [\"Light\", \"Medium\", \"Regular\", \"Thin\", \"UltraLight\"],\n        control: {\n          type: \"select\",\n        },\n      },\n    },\n    size: {\n      type: \"number\",\n      description: \"Icon size for preview\",\n      defaultValue: 32,\n    },\n    color: {\n      type: \"string\",\n      description: \"Color\",\n      control: { control: \"color\" },\n    },\n    name: {\n      type: \"enum\",\n      defaultValue: \"Activity\",\n      description: \"[Only for single icon], Icon name\",\n      control: {\n        options: iconNames,\n        control: {\n          type: \"select\",\n        },\n      },\n    },\n  },\n};\nexport default Story;\n\nconst ListTemplate = (args: IconProps) => {\n  const theme = useTheme();\n  const color = args.color || theme.colors.neutral.c100;\n  const [search, setSearch] = useState(\"\");\n  const s = search.toLowerCase();\n  const regexp = new RegExp(s, \"i\");\n\n  return (\n    <Container>\n      <SearchInput value={search} onChange={setSearch} />\n      <ScrollArea\n        gridTemplateColumns=\"repeat(auto-fill, 100px);\"\n        gridTemplateRows=\"repeat(auto-fill, 100px);\"\n        gridGap={4}\n        mt={4}\n      >\n        {iconNames\n          .sort((a: string, b: string) => {\n            return s ? b.toLowerCase().indexOf(s) - a.toLowerCase().indexOf(s) : a.localeCompare(b);\n          })\n          .map((name) => {\n            const match = name.match(regexp);\n            const active = s && match;\n            const index = match?.index ?? 0;\n            return (\n              <IconContainer active={!!active}>\n                <Flex flex={1} justifyContent=\"center\" alignItems=\"center\">\n                  <Icon\n                    key={name}\n                    name={name}\n                    weight={args.weight}\n                    size={args.size}\n                    color={color}\n                  />\n                </Flex>\n                <Text variant=\"extraSmall\">\n                  {active ? (\n                    <>\n                      {name.substr(0, index)}\n                      <Bold>{name.substr(index, s.length)}</Bold>\n                      {name.substr(index + s.length)}\n                    </>\n                  ) : (\n                    name\n                  )}\n                </Text>\n              </IconContainer>\n            );\n          })}\n      </ScrollArea>\n    </Container>\n  );\n};\nconst IconTemplate = (args: IconProps) => {\n  const theme = useTheme();\n  const color = args.color || theme.colors.neutral.c100;\n\n  return <Icon {...args} color={color} />;\n};\n\nexport const List = ListTemplate.bind({});\nexport const SingleIcon = IconTemplate.bind({});\n"],
+  "sourcesContent": ["import React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport Icon, { iconNames, Props as IconProps } from \"./Icon\";\nimport { useTheme } from \"styled-components\";\nimport { Text, SearchInput, Flex, Grid } from \"../../..\";\n\nconst ScrollArea = styled(Grid)`\n  flex: 1;\n  height: auto;\n  ${(p) => p.theme.overflow.y};\n`;\n\nconst Container = styled(Flex).attrs({\n  flex: 1,\n  flexDirection: \"column\",\n  p: 4,\n})`\n  overflow: hidden;\n  height: calc(100vh - 4em);\n`;\n\nconst IconContainer = styled(Flex).attrs<{ active?: boolean }>({\n  flexDirection: \"column\",\n  justifyContent: \"flex-end\",\n  alignItems: \"center\",\n  p: 4,\n})<{ active?: boolean }>`\n  ${(p) => (p.active ? `background-color: ${p.theme.colors.neutral.c20};` : ``)}\n  border-radius: 4px;\n  height: 100px;\n`;\n\nconst Bold = styled.b`\n  color: ${(p) => p.theme.colors.primary.c80};\n`;\n\nconst Story = {\n  title: \"Asorted/Icons\",\n  argTypes: {\n    weight: {\n      type: \"enum\",\n      description: \"Weight\",\n      defaultValue: \"Medium\",\n      control: {\n        options: [\"Light\", \"Medium\", \"Regular\", \"Thin\", \"UltraLight\"],\n        control: {\n          type: \"select\",\n        },\n      },\n    },\n    size: {\n      type: \"number\",\n      description: \"Icon size for preview\",\n      defaultValue: 32,\n    },\n    color: {\n      type: \"string\",\n      description: \"Color\",\n      control: { control: \"color\" },\n    },\n    name: {\n      type: \"enum\",\n      defaultValue: \"Activity\",\n      description: \"[Only for single icon], Icon name\",\n      control: {\n        options: iconNames,\n        control: {\n          type: \"select\",\n        },\n      },\n    },\n  },\n};\nexport default Story;\n\nconst ListTemplate = (args: IconProps) => {\n  const theme = useTheme();\n  const color = args.color || theme.colors.neutral.c100;\n  const [search, setSearch] = useState(\"\");\n  const s = search.toLowerCase();\n  const regexp = new RegExp(s, \"i\");\n\n  return (\n    <Container>\n      <SearchInput value={search} onChange={setSearch} />\n      <ScrollArea\n        gridTemplateColumns=\"repeat(auto-fill, 100px);\"\n        gridTemplateRows=\"repeat(auto-fill, 100px);\"\n        gridGap={4}\n        mt={4}\n      >\n        {iconNames\n          .sort((a: string, b: string) => {\n            return s ? b.toLowerCase().indexOf(s) - a.toLowerCase().indexOf(s) : a.localeCompare(b);\n          })\n          .map((name) => {\n            const match = name.match(regexp);\n            const active = s && match;\n            const index = match?.index ?? 0;\n            return (\n              <IconContainer active={!!active}>\n                <Flex flex={1} justifyContent=\"center\" alignItems=\"center\">\n                  <Icon\n                    key={name}\n                    name={name}\n                    weight={args.weight}\n                    size={args.size}\n                    color={color}\n                  />\n                </Flex>\n                <Text variant=\"extraSmall\">\n                  {active ? (\n                    <>\n                      {name.substr(0, index)}\n                      <Bold>{name.substr(index, s.length)}</Bold>\n                      {name.substr(index + s.length)}\n                    </>\n                  ) : (\n                    name\n                  )}\n                </Text>\n              </IconContainer>\n            );\n          })}\n      </ScrollArea>\n    </Container>\n  );\n};\nconst IconTemplate = (args: IconProps) => {\n  const theme = useTheme();\n  const color = args.color || theme.colors.neutral.c100;\n\n  return <Icon {...args} color={color} />;\n};\n\nexport const List = ListTemplate.bind({});\nexport const SingleIcon = IconTemplate.bind({});\n"],
   "mappings": "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",
   "names": []
 }

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

@@ -23,10 +23,12 @@ var __toModule = (module2) => {
 };
 __export(exports, {
   BoxedIcon: () => import_BoxedIcon.default,
+  CryptoIcon: () => import_CryptoIcon.default,
   IconBox: () => import_BoxedIcon.IconBox,
   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"));
 //# 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\";\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAmC;AACnC,uBAAmC;",
+  "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;",
   "names": []
 }

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

@@ -23,6 +23,7 @@ var __toModule = (module2) => {
 };
 __export(exports, {
   BoxedIcon: () => import_Icon.BoxedIcon,
+  CryptoIcon: () => import_Icon.CryptoIcon,
   Divider: () => import_Divider.default,
   Icon: () => import_Icon.default,
   IconBox: () => import_Icon.IconBox,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/asorted/index.ts"],
-  "sourcesContent": ["export { default as Divider } from \"./Divider\";\nexport { default as Icon, IconBox, BoxedIcon } from \"./Icon\";\nexport { default as Text } from \"./Text\";\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAmC;AACnC,kBAAoD;AACpD,kBAAgC;",
+  "sourcesContent": ["export { default as Divider } from \"./Divider\";\nexport { default as Icon, IconBox, BoxedIcon, CryptoIcon } from \"./Icon\";\nexport { default as Text } from \"./Text\";\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAmC;AACnC,kBAAgE;AAChE,kBAAgC;",
   "names": []
 }

package/lib/cjs/styles/global.js

@@ -57,5 +57,27 @@ const GlobalStyle = import_styled_components.createGlobalStyle`
   ${(props) => typeof props.fontsPath === "string" ? import_styles2.fontStyles : ""}
 
   ${import_styles.default}
+
+  ::-webkit-scrollbar              {
+    width: 12px;
+    height: 12px;
+    background-color: rgba(0,0,0,0);
+  }
+  ::-webkit-scrollbar-button       {
+    opacity: 0;
+    height: 0;
+    width: 0;
+  }
+  ::-webkit-scrollbar-track        {
+    background-color: rgba(0,0,0,0);
+  }
+  ::-webkit-scrollbar-thumb        {
+    box-shadow: inset 0 0 0 12px var(--track-color);
+    border: 2px solid rgba(0,0,0,0);
+    border-radius: 12px;
+  }
+  ::-webkit-scrollbar-corner {
+    opacity: 0;
+  }
 `;
 //# sourceMappingURL=global.js.map

package/lib/cjs/styles/global.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/styles/global.ts"],
-  "sourcesContent": ["import { createGlobalStyle } from \"styled-components\";\n\nimport { rgba } from \"./helpers\";\nimport tippyStyles from \"../components/message/Tooltip/styles\";\nimport { fontStyles } from \"../components/asorted/Text/styles\";\n\nexport type GlobalStyleProps = {\n  fontsPath?: string;\n  fontMappings?: (name: string) => string;\n};\n\nexport const GlobalStyle = createGlobalStyle<GlobalStyleProps>`\n  html {\n    box-sizing: border-box;\n  }\n\n  body {\n    font-family: Inter;\n    font-size: 100%;\n  }\n\n  * {\n    margin: 0;\n    padding: 0;\n    font: inherit;\n    color: inherit;\n    user-select: inherit;\n    cursor: inherit;\n    outline: none;\n  }\n\n  ::selection {\n    background: ${(p) => rgba(p.theme.colors.primary.c100, 0.1)};\n  }\n\n  --track-color: rgba(0,0,0,0);\n\n  ${(props) => (typeof props.fontsPath === \"string\" ? fontStyles : \"\")}\n\n  ${tippyStyles}\n`;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,+BAAkC;AAElC,qBAAqB;AACrB,oBAAwB;AACxB,qBAA2B;AAOpB,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAqBT,CAAC,MAAM,yBAAK,EAAE,MAAM,OAAO,QAAQ,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,IAKvD,CAAC,UAAW,OAAO,MAAM,cAAc,WAAW,4BAAa;AAAA;AAAA,IAE/D;AAAA;",
+  "sourcesContent": ["import { createGlobalStyle } from \"styled-components\";\n\nimport { rgba } from \"./helpers\";\nimport tippyStyles from \"../components/message/Tooltip/styles\";\nimport { fontStyles } from \"../components/asorted/Text/styles\";\n\nexport type GlobalStyleProps = {\n  fontsPath?: string;\n  fontMappings?: (name: string) => string;\n};\n\nexport const GlobalStyle = createGlobalStyle<GlobalStyleProps>`\n  html {\n    box-sizing: border-box;\n  }\n\n  body {\n    font-family: Inter;\n    font-size: 100%;\n  }\n\n  * {\n    margin: 0;\n    padding: 0;\n    font: inherit;\n    color: inherit;\n    user-select: inherit;\n    cursor: inherit;\n    outline: none;\n  }\n\n  ::selection {\n    background: ${(p) => rgba(p.theme.colors.primary.c100, 0.1)};\n  }\n\n  --track-color: rgba(0,0,0,0);\n\n  ${(props) => (typeof props.fontsPath === \"string\" ? fontStyles : \"\")}\n\n  ${tippyStyles}\n\n  ::-webkit-scrollbar              {\n    width: 12px;\n    height: 12px;\n    background-color: rgba(0,0,0,0);\n  }\n  ::-webkit-scrollbar-button       {\n    opacity: 0;\n    height: 0;\n    width: 0;\n  }\n  ::-webkit-scrollbar-track        {\n    background-color: rgba(0,0,0,0);\n  }\n  ::-webkit-scrollbar-thumb        {\n    box-shadow: inset 0 0 0 12px var(--track-color);\n    border: 2px solid rgba(0,0,0,0);\n    border-radius: 12px;\n  }\n  ::-webkit-scrollbar-corner {\n    opacity: 0;\n  }\n`;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,+BAAkC;AAElC,qBAAqB;AACrB,oBAAwB;AACxB,qBAA2B;AAOpB,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAqBT,CAAC,MAAM,yBAAK,EAAE,MAAM,OAAO,QAAQ,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,IAKvD,CAAC,UAAW,OAAO,MAAM,cAAc,WAAW,4BAAa;AAAA;AAAA,IAE/D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/lib/cjs/styles/helpers.js

@@ -23,6 +23,7 @@ var __toModule = (module2) => {
 };
 __export(exports, {
   darken: () => darken,
+  ensureContrast: () => ensureContrast,
   ff: () => ff,
   lighten: () => lighten,
   mix: () => mix,
@@ -44,4 +45,13 @@ const ff = (v) => {
     fontStyle: style
   };
 };
+const ensureContrast = (color1, color2) => {
+  const colorL1 = (0, import_color.default)(color1).luminosity() + 0.05;
+  const colorL2 = (0, import_color.default)(color2).luminosity() + 0.05;
+  const lRatio = colorL1 > colorL2 ? colorL1 / colorL2 : colorL2 / colorL1;
+  if (lRatio < 1.5) {
+    return (0, import_color.default)(color1).rotate(180).negate().string();
+  }
+  return color1;
+};
 //# sourceMappingURL=helpers.js.map

package/lib/cjs/styles/helpers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/styles/helpers.ts"],
-  "sourcesContent": ["import Color from \"color\";\n\nimport { fontFamilies } from \"./theme\";\n\nexport const rgba = (c: string, a: number): string => Color(c).alpha(a).rgb().toString();\n\nexport const darken = (c: string, a: number): string => Color(c).darken(a).toString();\n\nexport const lighten = (c: string, a: number): string => Color(c).lighten(a).toString();\n\nexport const mix = (c: string, b: string, a: number): string =>\n  Color(c).mix(Color(b), a).toString();\n\nexport const ff = (v: string) => {\n  const [font, type = \"Regular\"] = v.split(\"|\");\n  // @ts-expect-error FIXME\n  const { style, weight } = fontFamilies[font][type];\n  // @ts-expect-error FIXME\n  const fallback: string = fontFamilies[font].fallback ?? \"Arial\";\n\n  return {\n    fontFamily: `${font}, ${fallback}`,\n    fontWeight: weight,\n    fontStyle: style,\n  };\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,mBAA6B;AAEtB,MAAM,OAAO,CAAC,GAAW,MAAsB,0BAAM,GAAG,MAAM,GAAG,MAAM;AAEvE,MAAM,SAAS,CAAC,GAAW,MAAsB,0BAAM,GAAG,OAAO,GAAG;AAEpE,MAAM,UAAU,CAAC,GAAW,MAAsB,0BAAM,GAAG,QAAQ,GAAG;AAEtE,MAAM,MAAM,CAAC,GAAW,GAAW,MACxC,0BAAM,GAAG,IAAI,0BAAM,IAAI,GAAG;AAErB,MAAM,KAAK,CAAC,MAAc;AAC/B,QAAM,CAAC,MAAM,OAAO,aAAa,EAAE,MAAM;AAEzC,QAAM,EAAE,OAAO,WAAW,0BAAa,MAAM;AAE7C,QAAM,WAAmB,0BAAa,MAAM,YAAY;AAExD,SAAO;AAAA,IACL,YAAY,GAAG,SAAS;AAAA,IACxB,YAAY;AAAA,IACZ,WAAW;AAAA;AAAA;",
+  "sourcesContent": ["import Color from \"color\";\n\nimport { fontFamilies } from \"./theme\";\n\nexport const rgba = (c: string, a: number): string => Color(c).alpha(a).rgb().toString();\n\nexport const darken = (c: string, a: number): string => Color(c).darken(a).toString();\n\nexport const lighten = (c: string, a: number): string => Color(c).lighten(a).toString();\n\nexport const mix = (c: string, b: string, a: number): string =>\n  Color(c).mix(Color(b), a).toString();\n\nexport const ff = (v: string) => {\n  const [font, type = \"Regular\"] = v.split(\"|\");\n  // @ts-expect-error FIXME\n  const { style, weight } = fontFamilies[font][type];\n  // @ts-expect-error FIXME\n  const fallback: string = fontFamilies[font].fallback ?? \"Arial\";\n\n  return {\n    fontFamily: `${font}, ${fallback}`,\n    fontWeight: weight,\n    fontStyle: style,\n  };\n};\n\nexport const ensureContrast = (color1: string, color2: string) => {\n  const colorL1 = Color(color1).luminosity() + 0.05;\n  const colorL2 = Color(color2).luminosity() + 0.05;\n\n  const lRatio = colorL1 > colorL2 ? colorL1 / colorL2 : colorL2 / colorL1;\n\n  if (lRatio < 1.5) {\n    return Color(color1).rotate(180).negate().string();\n  }\n  return color1;\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,mBAA6B;AAEtB,MAAM,OAAO,CAAC,GAAW,MAAsB,0BAAM,GAAG,MAAM,GAAG,MAAM;AAEvE,MAAM,SAAS,CAAC,GAAW,MAAsB,0BAAM,GAAG,OAAO,GAAG;AAEpE,MAAM,UAAU,CAAC,GAAW,MAAsB,0BAAM,GAAG,QAAQ,GAAG;AAEtE,MAAM,MAAM,CAAC,GAAW,GAAW,MACxC,0BAAM,GAAG,IAAI,0BAAM,IAAI,GAAG;AAErB,MAAM,KAAK,CAAC,MAAc;AAC/B,QAAM,CAAC,MAAM,OAAO,aAAa,EAAE,MAAM;AAEzC,QAAM,EAAE,OAAO,WAAW,0BAAa,MAAM;AAE7C,QAAM,WAAmB,0BAAa,MAAM,YAAY;AAExD,SAAO;AAAA,IACL,YAAY,GAAG,SAAS;AAAA,IACxB,YAAY;AAAA,IACZ,WAAW;AAAA;AAAA;AAIR,MAAM,iBAAiB,CAAC,QAAgB,WAAmB;AAChE,QAAM,UAAU,0BAAM,QAAQ,eAAe;AAC7C,QAAM,UAAU,0BAAM,QAAQ,eAAe;AAE7C,QAAM,SAAS,UAAU,UAAU,UAAU,UAAU,UAAU;AAEjE,MAAI,SAAS,KAAK;AAChB,WAAO,0BAAM,QAAQ,OAAO,KAAK,SAAS;AAAA;AAE5C,SAAO;AAAA;",
   "names": []
 }

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare type Props = {
+    name: string;
+    size?: number;
+    color?: string;
+    backgroundColor?: string;
+};
+export declare const iconNames: string[];
+declare const CryptoIcon: ({ name, size, color, backgroundColor }: Props) => JSX.Element | null;
+export default CryptoIcon;

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

@@ -0,0 +1,23 @@
+import * as icons from "@ledgerhq/crypto-icons-ui/react";
+import React from "react";
+import { ensureContrast } from "../../../styles";
+import { useTheme } from "styled-components";
+export const iconNames = Array.from(Object.keys(icons).reduce((set, rawKey) => {
+    const key = rawKey;
+    if (!set.has(key))
+        set.add(key);
+    return set;
+}, new Set()));
+const CryptoIcon = ({ name, size = 16, color, backgroundColor }) => {
+    const maybeIconName = `${name}`;
+    const { colors } = useTheme();
+    if (maybeIconName in icons) {
+        // @ts-expect-error FIXME I don't know how to make you happy ts
+        const Component = icons[maybeIconName];
+        const defaultColor = Component.DefaultColor;
+        const contrastedColor = ensureContrast(color || defaultColor, backgroundColor || colors.background.main);
+        return React.createElement(Component, { size: size, color: contrastedColor });
+    }
+    return null;
+};
+export default CryptoIcon;

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

@@ -2,3 +2,4 @@ export { default, iconNames } from "./Icon";
 import BoxedIcon, { IconBox } from "./BoxedIcon";
 export { BoxedIcon, IconBox };
 export type { Props } from "./Icon";
+export { default as CryptoIcon } from "./CryptoIcon";

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

@@ -1,3 +1,4 @@
 export { default, iconNames } from "./Icon";
 import BoxedIcon, { IconBox } from "./BoxedIcon";
 export { BoxedIcon, IconBox };
+export { default as CryptoIcon } from "./CryptoIcon";

package/lib/components/asorted/index.d.ts

@@ -1,3 +1,3 @@
 export { default as Divider } from "./Divider";
-export { default as Icon, IconBox, BoxedIcon } from "./Icon";
+export { default as Icon, IconBox, BoxedIcon, CryptoIcon } from "./Icon";
 export { default as Text } from "./Text";

package/lib/components/asorted/index.js

@@ -1,3 +1,3 @@
 export { default as Divider } from "./Divider";
-export { default as Icon, IconBox, BoxedIcon } from "./Icon";
+export { default as Icon, IconBox, BoxedIcon, CryptoIcon } from "./Icon";
 export { default as Text } from "./Text";

package/lib/styles/global.js

@@ -31,4 +31,26 @@ export const GlobalStyle = createGlobalStyle `
   ${(props) => (typeof props.fontsPath === "string" ? fontStyles : "")}
 
   ${tippyStyles}
+
+  ::-webkit-scrollbar              {
+    width: 12px;
+    height: 12px;
+    background-color: rgba(0,0,0,0);
+  }
+  ::-webkit-scrollbar-button       {
+    opacity: 0;
+    height: 0;
+    width: 0;
+  }
+  ::-webkit-scrollbar-track        {
+    background-color: rgba(0,0,0,0);
+  }
+  ::-webkit-scrollbar-thumb        {
+    box-shadow: inset 0 0 0 12px var(--track-color);
+    border: 2px solid rgba(0,0,0,0);
+    border-radius: 12px;
+  }
+  ::-webkit-scrollbar-corner {
+    opacity: 0;
+  }
 `;

package/lib/styles/helpers.d.ts

@@ -7,3 +7,4 @@ export declare const ff: (v: string) => {
     fontWeight: any;
     fontStyle: any;
 };
+export declare const ensureContrast: (color1: string, color2: string) => string;

package/lib/styles/helpers.js

@@ -17,3 +17,12 @@ export const ff = (v) => {
         fontStyle: style,
     };
 };
+export const ensureContrast = (color1, color2) => {
+    const colorL1 = Color(color1).luminosity() + 0.05;
+    const colorL2 = Color(color2).luminosity() + 0.05;
+    const lRatio = colorL1 > colorL2 ? colorL1 / colorL2 : colorL2 / colorL1;
+    if (lRatio < 1.5) {
+        return Color(color1).rotate(180).negate().string();
+    }
+    return color1;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/react-ui",
-  "version": "0.8.3-next.0",
+  "version": "0.9.0-nightly.0",
   "description": "Ledger Live - Desktop UI",
   "author": "Ledger Live Team <team-live@ledger.fr>",
   "repository": {
@@ -58,6 +58,7 @@
   "dependencies": {
     "@floating-ui/react-dom": "^0.4.0",
     "@ledgerhq/icons-ui": "^0.2.7",
+    "@ledgerhq/crypto-icons-ui": "^0.2.0-nightly.0",
     "@ledgerhq/ui-shared": "^0.1.9",
     "@tippyjs/react": "^4.2.6",
     "@types/color": "^3.0.2",
@@ -116,7 +117,7 @@
   "scripts": {
     "storybook": "start-storybook -p 6006 -s ./src",
     "build": "tsc -p tsconfig.prod.json && node scripts/transpile && node scripts/postBuild",
-    "prebuild:storybook": "pnpm -F ui-shared -F icons-ui build",
+    "prebuild:storybook": "pnpm -F ui-shared -F icons-ui -F crypto-icons-ui build",
     "build:storybook": "build-storybook -s ./src",
     "watch": "tsc -p tsconfig.prod.json --watch",
     "clean": "rimraf lib",