@ledgerhq/react-ui 0.10.2 → 0.10.3-next.0

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

@@ -28,13 +28,12 @@ __export(exports, {
 });
 var flags = __toModule(require("@ledgerhq/icons-ui/react/Flags/index"));
 var import_react = __toModule(require("react"));
+var import_styled_components = __toModule(require("styled-components"));
+var import_Flex = __toModule(require("../../layout/Flex"));
 const sizes = {
   XXS: 16,
-  XS: 24,
   S: 32,
-  M: 40,
-  L: 48,
-  XL: 56
+  L: 48
 };
 const iconNames = Array.from(Object.keys(flags).reduce((set, rawKey) => {
   const key = rawKey.replace(/(.+)(Regular|Light|UltraLight|Thin|Medium)+$/g, "$1").replace(/(.+)(Ultra)+$/g, "$1");
@@ -42,13 +41,35 @@ const iconNames = Array.from(Object.keys(flags).reduce((set, rawKey) => {
     set.add(key);
   return set;
 }, new Set()));
+const FlagContainer = (0, import_styled_components.default)(import_Flex.default).attrs({
+  borderRadius: "50%",
+  position: "relative"
+})`
+  &:after {
+    content: "";
+    display: block;
+    box-shadow: inset 0 0 10px black;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 100%;
+    opacity: 10%;
+    ${(p) => `box-shadow: inset 0px 0px 0px 1px ${p.theme.colors.neutral.c100};`}
+  }
+`;
 const FlagIcon = ({ name, size = "S" }) => {
   const maybeIconName = `${name}`;
   if (maybeIconName in flags) {
     const Component = flags[maybeIconName];
-    return /* @__PURE__ */ import_react.default.createElement(Component, {
+    return /* @__PURE__ */ import_react.default.createElement(FlagContainer, {
+      width: sizes[size],
+      height: sizes[size],
+      overflow: "hidden"
+    }, /* @__PURE__ */ import_react.default.createElement(Component, {
       size: sizes[size]
-    });
+    }));
   }
   return null;
 };

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/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;",
+  "sourcesContent": ["import * as flags from \"@ledgerhq/icons-ui/react/Flags/index\";\nimport React from \"react\";\nimport styled from \"styled-components\";\nimport FlexBox from \"../../layout/Flex\";\n\nexport const sizes = {\n  XXS: 16,\n  S: 32,\n  L: 48,\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 FlagContainer = styled(FlexBox).attrs({\n  borderRadius: \"50%\",\n  position: \"relative\",\n})`\n  &:after {\n    content: \"\";\n    display: block;\n    box-shadow: inset 0 0 10px black;\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    border-radius: 100%;\n    opacity: 10%;\n    ${(p) => `box-shadow: inset 0px 0px 0px 1px ${p.theme.colors.neutral.c100};`}\n  }\n`;\n\nconst FlagIcon = ({ name, size = \"S\" }: Props): JSX.Element | null => {\n  const maybeIconName = `${name}`;\n\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 (\n      <FlagContainer width={sizes[size]} height={sizes[size]} overflow={\"hidden\"}>\n        <Component size={sizes[size]} />\n      </FlagContainer>\n    );\n  }\n  return null;\n};\n\nexport default FlagIcon;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,mBAAkB;AAClB,+BAAmB;AACnB,kBAAoB;AAEb,MAAM,QAAQ;AAAA,EACnB,KAAK;AAAA,EACL,GAAG;AAAA,EACH,GAAG;AAAA;AAUE,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,gBAAgB,sCAAO,qBAAS,MAAM;AAAA,EAC1C,cAAc;AAAA,EACd,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAaN,CAAC,MAAM,qCAAqC,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAIzE,MAAM,WAAW,CAAC,EAAE,MAAM,OAAO,UAAqC;AACpE,QAAM,gBAAgB,GAAG;AAEzB,MAAI,iBAAiB,OAAO;AAE1B,UAAM,YAAY,MAAM;AACxB,WACE,mDAAC,eAAD;AAAA,MAAe,OAAO,MAAM;AAAA,MAAO,QAAQ,MAAM;AAAA,MAAO,UAAU;AAAA,OAChE,mDAAC,WAAD;AAAA,MAAW,MAAM,MAAM;AAAA;AAAA;AAI7B,SAAO;AAAA;AAGT,IAAO,mBAAQ;",
   "names": []
 }

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

@@ -56,14 +56,17 @@ const ProviderIcon = ({ name, size = "S", boxed = false }) => {
       search: maybeIconName,
       object: providersBoxed
     });
-    return /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
-      width: sizes[size],
-      height: sizes[size],
-      borderRadius: 8,
-      overflow: "hidden"
-    }, /* @__PURE__ */ import_react.default.createElement(BoxedComponent, {
-      size: sizes[size]
-    }));
+    if (BoxedComponent) {
+      return /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
+        width: sizes[size],
+        height: sizes[size],
+        borderRadius: 8,
+        overflow: "hidden"
+      }, /* @__PURE__ */ import_react.default.createElement(BoxedComponent, {
+        size: sizes[size]
+      }));
+    }
+    return null;
   }
   const Component = getIconCaseInsensitive({
     search: maybeIconName,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/asorted/Icon/ProviderIcon.tsx"],
-  "sourcesContent": ["import * as providers from \"@ledgerhq/icons-ui/react/Providers/index\";\nimport * as providersBoxed from \"@ledgerhq/icons-ui/react/ProvidersBoxed/index\";\n\nimport React from \"react\";\nimport FlexBox from \"../../layout/Flex\";\n\nexport const sizes = {\n  XXS: 16,\n  XS: 24,\n  S: 32,\n  M: 40,\n  L: 48,\n  XL: 56,\n};\n\nexport type ProviderSizes = keyof typeof sizes;\n\nexport type Props = {\n  name: string;\n  size?: ProviderSizes;\n  boxed?: boolean;\n};\n\nexport const iconNames = Array.from(\n  Object.keys(providers).reduce((set, rawKey) => {\n    const key = rawKey\n      .replace(/(.+)(Regular|Light|UltraLight|Thin|Medium)+$/g, \"$1\")\n      .replace(/(.+)(Ultra)+$/g, \"$1\")\n      .replace(/^_/, \"\");\n    if (!set.has(key)) set.add(key);\n    return set;\n  }, new Set<string>()),\n);\n\nexport type IconGetterProps = {\n  search: string;\n  object: Record<string, React.ReactNode>;\n};\n\nconst getIconCaseInsensitive = ({ search, object }: IconGetterProps) => {\n  const asLower = search.toLowerCase();\n  const key = Object.keys(object).find((key) => key.toLowerCase().replace(/^_/, \"\") === asLower);\n  return key ? object[key] : null;\n};\n\nconst ProviderIcon = ({ name, size = \"S\", boxed = false }: Props): JSX.Element | null => {\n  const maybeIconName = `${name}`;\n\n  if (boxed) {\n    const BoxedComponent = getIconCaseInsensitive({\n      search: maybeIconName,\n      object: providersBoxed,\n    }) as React.ElementType;\n    return (\n      <FlexBox width={sizes[size]} height={sizes[size]} borderRadius={8} overflow={\"hidden\"}>\n        <BoxedComponent size={sizes[size]} />\n      </FlexBox>\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,qBAAgC;AAEhC,mBAAkB;AAClB,kBAAoB;AAEb,MAAM,QAAQ;AAAA,EACnB,KAAK;AAAA,EACL,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA;AAWC,MAAM,YAAY,MAAM,KAC7B,OAAO,KAAK,WAAW,OAAO,CAAC,KAAK,WAAW;AAC7C,QAAM,MAAM,OACT,QAAQ,iDAAiD,MACzD,QAAQ,kBAAkB,MAC1B,QAAQ,MAAM;AACjB,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,cAAc,QAAQ,MAAM,QAAQ;AACtF,SAAO,MAAM,OAAO,OAAO;AAAA;AAG7B,MAAM,eAAe,CAAC,EAAE,MAAM,OAAO,KAAK,QAAQ,YAAuC;AACvF,QAAM,gBAAgB,GAAG;AAEzB,MAAI,OAAO;AACT,UAAM,iBAAiB,uBAAuB;AAAA,MAC5C,QAAQ;AAAA,MACR,QAAQ;AAAA;AAEV,WACE,mDAAC,qBAAD;AAAA,MAAS,OAAO,MAAM;AAAA,MAAO,QAAQ,MAAM;AAAA,MAAO,cAAc;AAAA,MAAG,UAAU;AAAA,OAC3E,mDAAC,gBAAD;AAAA,MAAgB,MAAM,MAAM;AAAA;AAAA;AAIlC,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;",
+  "sourcesContent": ["import * as providers from \"@ledgerhq/icons-ui/react/Providers/index\";\nimport * as providersBoxed from \"@ledgerhq/icons-ui/react/ProvidersBoxed/index\";\n\nimport React from \"react\";\nimport FlexBox from \"../../layout/Flex\";\n\nexport const sizes = {\n  XXS: 16,\n  XS: 24,\n  S: 32,\n  M: 40,\n  L: 48,\n  XL: 56,\n};\n\nexport type ProviderSizes = keyof typeof sizes;\n\nexport type Props = {\n  name: string;\n  size?: ProviderSizes;\n  boxed?: boolean;\n};\n\nexport const iconNames = Array.from(\n  Object.keys(providers).reduce((set, rawKey) => {\n    const key = rawKey\n      .replace(/(.+)(Regular|Light|UltraLight|Thin|Medium)+$/g, \"$1\")\n      .replace(/(.+)(Ultra)+$/g, \"$1\")\n      .replace(/^_/, \"\");\n    if (!set.has(key)) set.add(key);\n    return set;\n  }, new Set<string>()),\n);\n\nexport type IconGetterProps = {\n  search: string;\n  object: Record<string, React.ReactNode>;\n};\n\nconst getIconCaseInsensitive = ({ search, object }: IconGetterProps) => {\n  const asLower = search.toLowerCase();\n  const key = Object.keys(object).find((key) => key.toLowerCase().replace(/^_/, \"\") === asLower);\n  return key ? object[key] : null;\n};\n\nconst ProviderIcon = ({ name, size = \"S\", boxed = false }: Props): JSX.Element | null => {\n  const maybeIconName = `${name}`;\n\n  if (boxed) {\n    const BoxedComponent = getIconCaseInsensitive({\n      search: maybeIconName,\n      object: providersBoxed,\n    }) as React.ElementType;\n    if (BoxedComponent) {\n      return (\n        <FlexBox width={sizes[size]} height={sizes[size]} borderRadius={8} overflow={\"hidden\"}>\n          <BoxedComponent size={sizes[size]} />\n        </FlexBox>\n      );\n    }\n    return null;\n  }\n  const Component = getIconCaseInsensitive({\n    search: maybeIconName,\n    object: providers,\n  }) as React.ElementType;\n  if (Component) {\n    return <Component size={sizes[size]} />;\n  }\n  return null;\n};\n\nexport default ProviderIcon;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAA2B;AAC3B,qBAAgC;AAEhC,mBAAkB;AAClB,kBAAoB;AAEb,MAAM,QAAQ;AAAA,EACnB,KAAK;AAAA,EACL,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA;AAWC,MAAM,YAAY,MAAM,KAC7B,OAAO,KAAK,WAAW,OAAO,CAAC,KAAK,WAAW;AAC7C,QAAM,MAAM,OACT,QAAQ,iDAAiD,MACzD,QAAQ,kBAAkB,MAC1B,QAAQ,MAAM;AACjB,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,cAAc,QAAQ,MAAM,QAAQ;AACtF,SAAO,MAAM,OAAO,OAAO;AAAA;AAG7B,MAAM,eAAe,CAAC,EAAE,MAAM,OAAO,KAAK,QAAQ,YAAuC;AACvF,QAAM,gBAAgB,GAAG;AAEzB,MAAI,OAAO;AACT,UAAM,iBAAiB,uBAAuB;AAAA,MAC5C,QAAQ;AAAA,MACR,QAAQ;AAAA;AAEV,QAAI,gBAAgB;AAClB,aACE,mDAAC,qBAAD;AAAA,QAAS,OAAO,MAAM;AAAA,QAAO,QAAQ,MAAM;AAAA,QAAO,cAAc;AAAA,QAAG,UAAU;AAAA,SAC3E,mDAAC,gBAAD;AAAA,QAAgB,MAAM,MAAM;AAAA;AAAA;AAIlC,WAAO;AAAA;AAET,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/components/asorted/Icon/FlagIcon.d.ts

@@ -1,11 +1,8 @@
 /// <reference types="react" />
 export declare const sizes: {
     XXS: number;
-    XS: number;
     S: number;
-    M: number;
     L: number;
-    XL: number;
 };
 export type FlagsSizes = keyof typeof sizes;
 export type Props = {

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

@@ -1,12 +1,11 @@
 import * as flags from "@ledgerhq/icons-ui/react/Flags/index";
 import React from "react";
+import styled from "styled-components";
+import FlexBox from "../../layout/Flex";
 export const sizes = {
     XXS: 16,
-    XS: 24,
     S: 32,
-    M: 40,
     L: 48,
-    XL: 56,
 };
 export const iconNames = Array.from(Object.keys(flags).reduce((set, rawKey) => {
     const key = rawKey
@@ -16,12 +15,31 @@ export const iconNames = Array.from(Object.keys(flags).reduce((set, rawKey) => {
         set.add(key);
     return set;
 }, new Set()));
+const FlagContainer = styled(FlexBox).attrs({
+    borderRadius: "50%",
+    position: "relative",
+}) `
+  &:after {
+    content: "";
+    display: block;
+    box-shadow: inset 0 0 10px black;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 100%;
+    opacity: 10%;
+    ${(p) => `box-shadow: inset 0px 0px 0px 1px ${p.theme.colors.neutral.c100};`}
+  }
+`;
 const FlagIcon = ({ name, size = "S" }) => {
     const maybeIconName = `${name}`;
     if (maybeIconName in flags) {
         // @ts-expect-error FIXME I don't know how to make you happy ts
         const Component = flags[maybeIconName];
-        return React.createElement(Component, { size: sizes[size] });
+        return (React.createElement(FlagContainer, { width: sizes[size], height: sizes[size], overflow: "hidden" },
+            React.createElement(Component, { size: sizes[size] })));
     }
     return null;
 };

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

@@ -31,8 +31,11 @@ const ProviderIcon = ({ name, size = "S", boxed = false }) => {
             search: maybeIconName,
             object: providersBoxed,
         });
-        return (React.createElement(FlexBox, { width: sizes[size], height: sizes[size], borderRadius: 8, overflow: "hidden" },
-            React.createElement(BoxedComponent, { size: sizes[size] })));
+        if (BoxedComponent) {
+            return (React.createElement(FlexBox, { width: sizes[size], height: sizes[size], borderRadius: 8, overflow: "hidden" },
+                React.createElement(BoxedComponent, { size: sizes[size] })));
+        }
+        return null;
     }
     const Component = getIconCaseInsensitive({
         search: maybeIconName,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/react-ui",
-  "version": "0.10.2",
+  "version": "0.10.3-next.0",
   "description": "Ledger Live - Desktop UI",
   "author": "Ledger Live Team <team-live@ledger.fr>",
   "repository": {
@@ -76,7 +76,7 @@
     "react-window": "^1.8.6",
     "styled-system": "^5.1.5",
     "@ledgerhq/crypto-icons-ui": "^0.2.1",
-    "@ledgerhq/icons-ui": "^0.3.2",
+    "@ledgerhq/icons-ui": "^0.3.3-next.0",
     "@ledgerhq/ui-shared": "^0.1.10"
   },
   "peerDependencies": {