@ledgerhq/react-ui 0.7.2 → 0.7.5-monorepo.0

package/lib/cjs/components/animations/GlitchText/index.js

@@ -0,0 +1,64 @@
+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: () => GlitchText
+});
+var import_react = __toModule(require("react"));
+function makeRandomString(length) {
+  let result = "";
+  const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+  const charactersLength = characters.length;
+  for (let i = 0; i < length; i++) {
+    result += characters.charAt(Math.floor(Math.random() * charactersLength));
+  }
+  return result;
+}
+const INTERVAL = 77;
+function GlitchText({ text, duration = 800, delay = 500 }) {
+  const [shownText, setShownText] = (0, import_react.useState)(text);
+  (0, import_react.useEffect)(() => {
+    let frameT = 0;
+    const startFrame = Math.floor((1 + delay) / INTERVAL);
+    const totalFrames = Math.floor((delay + duration) / INTERVAL);
+    const interval = setInterval(() => {
+      if (frameT >= startFrame) {
+        if (frameT >= totalFrames) {
+          setShownText(text);
+          clearInterval(interval);
+          frameT = 0;
+          return;
+        }
+        const t1 = text.substr(0, -totalFrames + frameT + text.length);
+        const t2 = t1.length > 0 ? text.substr(t1.length, text.length) : text;
+        setShownText(t1 + makeRandomString(t2.length));
+      }
+      frameT++;
+    }, INTERVAL);
+    return () => {
+      interval && clearInterval(interval);
+    };
+  }, [delay, duration, text]);
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, shownText);
+}
+//# sourceMappingURL=index.js.map

package/lib/cjs/components/animations/GlitchText/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/animations/GlitchText/index.tsx"],
+  "sourcesContent": ["import React, { useEffect, useState } from \"react\";\n\nfunction makeRandomString(length: number) {\n  let result = \"\";\n  const characters = \"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789\";\n  const charactersLength = characters.length;\n  for (let i = 0; i < length; i++) {\n    result += characters.charAt(Math.floor(Math.random() * charactersLength));\n  }\n  return result;\n}\n\nexport interface GlitchTextProps {\n  text: string;\n  duration?: number;\n  delay?: number;\n}\n\nconst INTERVAL = 77;\n\nexport default function GlitchText({ text, duration = 800, delay = 500 }: GlitchTextProps) {\n  const [shownText, setShownText] = useState(text);\n\n  useEffect(() => {\n    let frameT = 0;\n    const startFrame = Math.floor((1 + delay) / INTERVAL);\n    const totalFrames = Math.floor((delay + duration) / INTERVAL);\n    const interval = setInterval(() => {\n      if (frameT >= startFrame) {\n        if (frameT >= totalFrames) {\n          setShownText(text);\n          clearInterval(interval);\n          frameT = 0;\n          return;\n        }\n        const t1 = text.substr(0, -totalFrames + frameT + text.length);\n        const t2 = t1.length > 0 ? text.substr(t1.length, text.length) : text;\n        setShownText(t1 + makeRandomString(t2.length));\n      }\n      frameT++;\n    }, INTERVAL);\n\n    return () => {\n      interval && clearInterval(interval);\n    };\n  }, [delay, duration, text]);\n\n  return <>{shownText}</>;\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAA2C;AAE3C,0BAA0B,QAAgB;AACxC,MAAI,SAAS;AACb,QAAM,aAAa;AACnB,QAAM,mBAAmB,WAAW;AACpC,WAAS,IAAI,GAAG,IAAI,QAAQ,KAAK;AAC/B,cAAU,WAAW,OAAO,KAAK,MAAM,KAAK,WAAW;AAAA;AAEzD,SAAO;AAAA;AAST,MAAM,WAAW;AAEF,oBAAoB,EAAE,MAAM,WAAW,KAAK,QAAQ,OAAwB;AACzF,QAAM,CAAC,WAAW,gBAAgB,2BAAS;AAE3C,8BAAU,MAAM;AACd,QAAI,SAAS;AACb,UAAM,aAAa,KAAK,MAAO,KAAI,SAAS;AAC5C,UAAM,cAAc,KAAK,MAAO,SAAQ,YAAY;AACpD,UAAM,WAAW,YAAY,MAAM;AACjC,UAAI,UAAU,YAAY;AACxB,YAAI,UAAU,aAAa;AACzB,uBAAa;AACb,wBAAc;AACd,mBAAS;AACT;AAAA;AAEF,cAAM,KAAK,KAAK,OAAO,GAAG,CAAC,cAAc,SAAS,KAAK;AACvD,cAAM,KAAK,GAAG,SAAS,IAAI,KAAK,OAAO,GAAG,QAAQ,KAAK,UAAU;AACjE,qBAAa,KAAK,iBAAiB,GAAG;AAAA;AAExC;AAAA,OACC;AAEH,WAAO,MAAM;AACX,kBAAY,cAAc;AAAA;AAAA,KAE3B,CAAC,OAAO,UAAU;AAErB,SAAO,wFAAG;AAAA;",
+  "names": []
+}

package/lib/cjs/components/asorted/Divider/Divider.stories.js

@@ -0,0 +1,56 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+__export(exports, {
+  Default: () => Default,
+  default: () => Divider_stories_default
+});
+var import_react = __toModule(require("react"));
+var import_index = __toModule(require("./index"));
+var import_Text = __toModule(require("../Text"));
+var import_Flex = __toModule(require("../../layout/Flex"));
+var import_styled_components = __toModule(require("styled-components"));
+const StyledWrapper = (0, import_styled_components.default)(import_Flex.default).attrs({ flexDirection: "column" })`
+  row-gap: 15px;
+`;
+var Divider_stories_default = {
+  title: "Asorted/Divider",
+  component: import_index.default,
+  argTypes: {
+    variant: {
+      type: "enum",
+      defaultValue: "default",
+      description: "The small variant is used to display a less noticeable separator.",
+      options: ["default", "light"],
+      control: {
+        options: ["default", "light"],
+        control: { type: "select" }
+      }
+    }
+  }
+};
+const Template = (args) => /* @__PURE__ */ import_react.default.createElement(StyledWrapper, null, /* @__PURE__ */ import_react.default.createElement(import_Text.default, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ante mauris, tempor faucibus urna quis, gravida vulputate nisl. Nam nec commodo dui. Quisque semper neque non risus elementum maximus. Nam molestie porttitor nibh, quis tempus quam maximus quis. Phasellus ultrices, leo nec pulvinar volutpat, ipsum purus lobortis metus, eu pharetra eros libero sed dui. Pellentesque in ligula lorem. In id vestibulum ligula. Aliquam quam tellus, ornare non molestie non, ornare vitae ex. Aliquam vel urna nec leo mattis iaculis. Maecenas velit metus, bibendum eu tincidunt et, rhoncus ac elit. Cras tristique quam vel mauris scelerisque aliquet. Donec dapibus lectus at nisi blandit, nec tristique ligula porttitor. Aliquam nec iaculis ex."), /* @__PURE__ */ import_react.default.createElement(import_index.default, {
+  ...args
+}), /* @__PURE__ */ import_react.default.createElement(import_Text.default, null, "Cras maximus orci eget sem elementum accumsan. Donec at mollis odio, a varius metus. Donec dapibus id elit vitae dignissim. Suspendisse consequat ex ut scelerisque imperdiet. Donec interdum lorem risus. Praesent consectetur lectus vel libero volutpat, id dictum sapien vulputate. Donec vulputate eros at nulla aliquet rutrum sit amet lacinia tortor. Ut pretium, purus eget sollicitudin finibus, eros dolor commodo libero, ut pellentesque mauris odio vitae sem. Nam ornare arcu sit amet posuere vestibulum. Donec eget felis sed erat placerat suscipit."));
+const Default = Template.bind({});
+//# sourceMappingURL=Divider.stories.js.map

package/lib/cjs/components/asorted/Divider/Divider.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/asorted/Divider/Divider.stories.tsx"],
+  "sourcesContent": ["import React from \"react\";\nimport Divider from \"./index\";\nimport Text from \"../Text\";\nimport Flex from \"../../layout/Flex\";\nimport styled from \"styled-components\";\n\nconst StyledWrapper = styled(Flex).attrs({ flexDirection: \"column\" })`\n  row-gap: 15px;\n`;\n\nexport default {\n  title: \"Asorted/Divider\",\n  component: Divider,\n  argTypes: {\n    variant: {\n      type: \"enum\",\n      defaultValue: \"default\",\n      description: \"The small variant is used to display a less noticeable separator.\",\n      options: [\"default\", \"light\"],\n      control: {\n        options: [\"default\", \"light\"],\n        control: { type: \"select\" },\n      },\n    },\n  },\n};\n\nconst Template = (args: React.ComponentProps<typeof Divider>) => (\n  <StyledWrapper>\n    <Text>\n      {\n        \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ante mauris, tempor faucibus urna quis, gravida vulputate nisl. Nam nec commodo dui. Quisque semper neque non risus elementum maximus. Nam molestie porttitor nibh, quis tempus quam maximus quis. Phasellus ultrices, leo nec pulvinar volutpat, ipsum purus lobortis metus, eu pharetra eros libero sed dui. Pellentesque in ligula lorem. In id vestibulum ligula. Aliquam quam tellus, ornare non molestie non, ornare vitae ex. Aliquam vel urna nec leo mattis iaculis. Maecenas velit metus, bibendum eu tincidunt et, rhoncus ac elit. Cras tristique quam vel mauris scelerisque aliquet. Donec dapibus lectus at nisi blandit, nec tristique ligula porttitor. Aliquam nec iaculis ex.\"\n      }\n    </Text>\n    <Divider {...args} />\n    <Text>\n      {\n        \"Cras maximus orci eget sem elementum accumsan. Donec at mollis odio, a varius metus. Donec dapibus id elit vitae dignissim. Suspendisse consequat ex ut scelerisque imperdiet. Donec interdum lorem risus. Praesent consectetur lectus vel libero volutpat, id dictum sapien vulputate. Donec vulputate eros at nulla aliquet rutrum sit amet lacinia tortor. Ut pretium, purus eget sollicitudin finibus, eros dolor commodo libero, ut pellentesque mauris odio vitae sem. Nam ornare arcu sit amet posuere vestibulum. Donec eget felis sed erat placerat suscipit.\"\n      }\n    </Text>\n  </StyledWrapper>\n);\n\nexport const Default = Template.bind({});\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,mBAAoB;AACpB,kBAAiB;AACjB,kBAAiB;AACjB,+BAAmB;AAEnB,MAAM,gBAAgB,sCAAO,qBAAM,MAAM,EAAE,eAAe;AAAA;AAAA;AAI1D,IAAO,0BAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,MAAM;AAAA,MACN,cAAc;AAAA,MACd,aAAa;AAAA,MACb,SAAS,CAAC,WAAW;AAAA,MACrB,SAAS;AAAA,QACP,SAAS,CAAC,WAAW;AAAA,QACrB,SAAS,EAAE,MAAM;AAAA;AAAA;AAAA;AAAA;AAMzB,MAAM,WAAW,CAAC,SAChB,mDAAC,eAAD,MACE,mDAAC,qBAAD,MAEI,suBAGJ,mDAAC,sBAAD;AAAA,KAAa;AAAA,IACb,mDAAC,qBAAD,MAEI;AAMD,MAAM,UAAU,SAAS,KAAK;",
+  "names": []
+}

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

@@ -0,0 +1,41 @@
+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: () => Divider_default
+});
+var import_react = __toModule(require("react"));
+var import_styled_components = __toModule(require("styled-components"));
+const Divider = import_styled_components.default.div`
+  display: block;
+  background: ${(p) => p.theme.colors.neutral.c90};
+  height: 1px;
+
+  &[data-variant="light"] {
+    background: ${(p) => p.theme.colors.neutral.c40};
+  }
+`;
+var Divider_default = ({ variant = "default" }) => /* @__PURE__ */ import_react.default.createElement(Divider, {
+  "data-variant": variant
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/asorted/Divider/index.tsx"],
+  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\n\nconst Divider = styled.div`\n  display: block;\n  background: ${(p) => p.theme.colors.neutral.c90};\n  height: 1px;\n\n  &[data-variant=\"light\"] {\n    background: ${(p) => p.theme.colors.neutral.c40};\n  }\n`;\n\nexport type Props = { variant: \"default\" | \"light\" };\n\nexport default ({ variant = \"default\" }: Props) => <Divider data-variant={variant} />;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AAEnB,MAAM,UAAU,iCAAO;AAAA;AAAA,gBAEP,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,kBAI5B,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAMhD,IAAO,kBAAQ,CAAC,EAAE,UAAU,gBAAuB,mDAAC,SAAD;AAAA,EAAS,gBAAc;AAAA;",
+  "names": []
+}

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

@@ -0,0 +1,104 @@
+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_BADGE_SIZE: () => DEFAULT_BADGE_SIZE,
+  DEFAULT_BOX_SIZE: () => DEFAULT_BOX_SIZE,
+  DEFAULT_ICON_SIZE: () => DEFAULT_ICON_SIZE,
+  IconBox: () => IconBox,
+  default: () => BoxedIcon_default
+});
+var import_react = __toModule(require("react"));
+var import_styled_components = __toModule(require("styled-components"));
+var import_Flex = __toModule(require("../../layout/Flex"));
+const DEFAULT_BOX_SIZE = 40;
+const DEFAULT_ICON_SIZE = 16;
+const DEFAULT_BADGE_SIZE = 20;
+function getClipRectangleSize(badgeSize) {
+  return 3 / 4 * badgeSize;
+}
+const getTopRightSquareClippedPolygon = (boxSize, rectangleSize) => {
+  const diff = boxSize - rectangleSize;
+  return `polygon(0 0, 0 0, 0 0, ${diff}px 0, ${diff}px ${rectangleSize}px, 100% ${rectangleSize}px, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 100%)`;
+};
+const Container = (0, import_styled_components.default)(import_Flex.default).attrs((p) => ({
+  heigth: p.size,
+  width: p.size,
+  alignItems: "center",
+  justifyContent: "center",
+  position: "relative"
+}))``;
+const IconBoxBackground = (0, import_styled_components.default)(import_Flex.default)`
+  position: absolute;
+  height: ${(p) => p.size}px;
+  width: ${(p) => p.size}px;
+  ${(p) => {
+  return p.hasBadge && `clip-path: ${getTopRightSquareClippedPolygon(p.size, getClipRectangleSize(p.badgeSize))};`;
+}};
+  border-radius: ${(p) => p.theme.radii[2]}px;
+`;
+const BadgeContainer = import_styled_components.default.div`
+  position: absolute;
+  ${(p) => `
+    top: -${p.badgeSize / 2 - 2}px;
+    right: -${p.badgeSize / 2 - 2}px;`}
+`;
+const IconBox = ({
+  Badge,
+  size = DEFAULT_BOX_SIZE,
+  children,
+  borderColor = "neutral.c40",
+  badgeColor,
+  badgeSize = DEFAULT_BADGE_SIZE
+}) => {
+  const hasBadge = !!Badge;
+  return /* @__PURE__ */ import_react.default.createElement(Container, {
+    size
+  }, /* @__PURE__ */ import_react.default.createElement(IconBoxBackground, {
+    size,
+    badgeSize,
+    hasBadge,
+    border: "1px solid",
+    borderColor
+  }), children, hasBadge && /* @__PURE__ */ import_react.default.createElement(BadgeContainer, {
+    badgeSize
+  }, /* @__PURE__ */ import_react.default.createElement(Badge, {
+    size: badgeSize,
+    color: badgeColor
+  })));
+};
+const BoxedIcon = ({
+  Icon,
+  iconSize = DEFAULT_ICON_SIZE,
+  iconColor,
+  ...iconBoxProps
+}) => {
+  return /* @__PURE__ */ import_react.default.createElement(IconBox, {
+    ...iconBoxProps
+  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
+    size: iconSize || DEFAULT_ICON_SIZE,
+    color: iconColor
+  }));
+};
+var BoxedIcon_default = BoxedIcon;
+//# sourceMappingURL=BoxedIcon.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/asorted/Icon/BoxedIcon.tsx"],
+  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport Flex from \"../../layout/Flex\";\n\nexport const DEFAULT_BOX_SIZE = 40;\nexport const DEFAULT_ICON_SIZE = 16;\nexport const DEFAULT_BADGE_SIZE = 20;\n\nfunction getClipRectangleSize(badgeSize: number): number {\n  return (3 / 4) * badgeSize;\n}\n\nconst getTopRightSquareClippedPolygon = (boxSize: number, rectangleSize: number) => {\n  // clipping path that hides top right square of size `${rectangleSize}px`\n  const diff = boxSize - rectangleSize;\n  return `polygon(0 0, 0 0, 0 0, ${diff}px 0, ${diff}px ${rectangleSize}px, 100% ${rectangleSize}px, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 100%)`;\n};\n\nconst Container = styled(Flex).attrs((p: { size: number }) => ({\n  heigth: p.size,\n  width: p.size,\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  position: \"relative\",\n}))<{ size: number }>``;\n\nconst IconBoxBackground = styled(Flex)<{ size: number; badgeSize: number; hasBadge: boolean }>`\n  position: absolute;\n  height: ${(p) => p.size}px;\n  width: ${(p) => p.size}px;\n  ${(p) => {\n    return (\n      p.hasBadge &&\n      `clip-path: ${getTopRightSquareClippedPolygon(p.size, getClipRectangleSize(p.badgeSize))};`\n    );\n  }};\n  border-radius: ${(p) => p.theme.radii[2]}px;\n`;\n\nconst BadgeContainer = styled.div<{ badgeSize: number }>`\n  position: absolute;\n  ${(p) => `\n    top: -${p.badgeSize / 2 - 2}px;\n    right: -${p.badgeSize / 2 - 2}px;`}\n`;\n\nexport type IconProps = {\n  size?: number;\n  color?: string;\n};\n\nexport type IconBoxProps = {\n  /**\n   * Component that takes `{size?: number; color?: string}` as props. Will be rendered at the top right with the size provided in `badgeSize` or a default size.\n   */\n  Badge?: React.ComponentType<IconProps> | ((props: IconProps) => JSX.Element);\n  /**\n   * Color of the border\n   */\n  borderColor?: string;\n  /**\n   * Badge color, will be applied to the component provided in the `Badge` prop\n   */\n  badgeColor?: string;\n  /**\n   * Badge size, will be applied to the component provided in the `Badge` prop\n   */\n  badgeSize?: number;\n  children?: JSX.Element;\n  /**\n   * Box size for preview\n   */\n  size?: number;\n};\n\nexport type BoxedIconProps = IconBoxProps & {\n  /**\n   * Component that takes `{size?: number; color?: string}` as props. Will be rendered at the top right with the size provided in `iconSize` or a default size.\n   */\n  Icon: React.ComponentType<IconProps> | ((props: IconProps) => JSX.Element);\n  /**\n   * Icon size, will be applied to the component provided in the `Icon` prop\n   */\n  iconSize?: number;\n  /**\n   * Icon color, will be applied to the component provided in the `Icon` prop\n   */\n  iconColor?: string;\n};\n\nexport const IconBox = ({\n  Badge,\n  size = DEFAULT_BOX_SIZE,\n  children,\n  borderColor = \"neutral.c40\",\n  badgeColor,\n  badgeSize = DEFAULT_BADGE_SIZE,\n}: IconBoxProps) => {\n  const hasBadge = !!Badge;\n  return (\n    <Container size={size}>\n      <IconBoxBackground\n        size={size}\n        badgeSize={badgeSize}\n        hasBadge={hasBadge}\n        border=\"1px solid\"\n        borderColor={borderColor}\n      />\n      {children}\n      {hasBadge && (\n        <BadgeContainer badgeSize={badgeSize}>\n          <Badge size={badgeSize} color={badgeColor} />\n        </BadgeContainer>\n      )}\n    </Container>\n  );\n};\n\nconst BoxedIcon = ({\n  Icon,\n  iconSize = DEFAULT_ICON_SIZE,\n  iconColor,\n  ...iconBoxProps\n}: BoxedIconProps) => {\n  return (\n    <IconBox {...iconBoxProps}>\n      <Icon size={iconSize || DEFAULT_ICON_SIZE} color={iconColor} />\n    </IconBox>\n  );\n};\n\nexport default BoxedIcon;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAiB;AAEV,MAAM,mBAAmB;AACzB,MAAM,oBAAoB;AAC1B,MAAM,qBAAqB;AAElC,8BAA8B,WAA2B;AACvD,SAAQ,IAAI,IAAK;AAAA;AAGnB,MAAM,kCAAkC,CAAC,SAAiB,kBAA0B;AAElF,QAAM,OAAO,UAAU;AACvB,SAAO,0BAA0B,aAAa,UAAU,yBAAyB;AAAA;AAGnF,MAAM,YAAY,sCAAO,qBAAM,MAAM,CAAC,MAAyB;AAAA,EAC7D,QAAQ,EAAE;AAAA,EACV,OAAO,EAAE;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,UAAU;AAAA;AAGZ,MAAM,oBAAoB,sCAAO;AAAA;AAAA,YAErB,CAAC,MAAM,EAAE;AAAA,WACV,CAAC,MAAM,EAAE;AAAA,IAChB,CAAC,MAAM;AACP,SACE,EAAE,YACF,cAAc,gCAAgC,EAAE,MAAM,qBAAqB,EAAE;AAAA;AAAA,mBAGhE,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA;AAGxC,MAAM,iBAAiB,iCAAO;AAAA;AAAA,IAE1B,CAAC,MAAM;AAAA,YACC,EAAE,YAAY,IAAI;AAAA,cAChB,EAAE,YAAY,IAAI;AAAA;AA+CzB,MAAM,UAAU,CAAC;AAAA,EACtB;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,YAAY;AAAA,MACM;AAClB,QAAM,WAAW,CAAC,CAAC;AACnB,SACE,mDAAC,WAAD;AAAA,IAAW;AAAA,KACT,mDAAC,mBAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAO;AAAA,IACP;AAAA,MAED,UACA,YACC,mDAAC,gBAAD;AAAA,IAAgB;AAAA,KACd,mDAAC,OAAD;AAAA,IAAO,MAAM;AAAA,IAAW,OAAO;AAAA;AAAA;AAOzC,MAAM,YAAY,CAAC;AAAA,EACjB;AAAA,EACA,WAAW;AAAA,EACX;AAAA,KACG;AAAA,MACiB;AACpB,SACE,mDAAC,SAAD;AAAA,OAAa;AAAA,KACX,mDAAC,MAAD;AAAA,IAAM,MAAM,YAAY;AAAA,IAAmB,OAAO;AAAA;AAAA;AAKxD,IAAO,oBAAQ;",
+  "names": []
+}

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

@@ -0,0 +1,129 @@
+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, {
+  BoxedIcon: () => BoxedIcon,
+  default: () => BoxedIcon_stories_default
+});
+var import_react = __toModule(require("react"));
+var import_Icon = __toModule(require("./Icon"));
+var import_BoxedIcon = __toModule(require("./BoxedIcon"));
+const ExampleIcon = ({ size, color, name }) => /* @__PURE__ */ import_react.default.createElement(import_Icon.default, {
+  name,
+  ...{ size, color }
+});
+const Story = {
+  title: "Asorted/Icons/BoxedIcon",
+  component: import_BoxedIcon.default,
+  argTypes: {
+    exampleIconName: {
+      type: "enum",
+      defaultValue: "Activity",
+      description: "[Not a BoxedIcon prop, only for this Storybook example] - Icon name. Value is passed to the `Icon` component of this UI library which is then used for the `Icon` prop.",
+      control: {
+        options: import_Icon.iconNames,
+        control: {
+          type: "select"
+        }
+      }
+    },
+    exampleBadgeName: {
+      type: "enum",
+      defaultValue: "CircledCheckSolid",
+      description: "[Not a BoxedIcon prop, only for this Storybook example] - Badge icon name. Value is passed to the `Icon` component of this UI library which is then used for the `Badge` prop.",
+      control: {
+        options: import_Icon.iconNames,
+        control: {
+          type: "select"
+        }
+      }
+    },
+    exampleBadgeEnabled: {
+      type: "boolean",
+      defaultValue: true,
+      description: "[Not a BoxedIcon prop, only for this Storybook example] - Controls whether a `Badge` prop is passed to the `BoxedIcon` component."
+    },
+    Badge: {
+      control: false
+    },
+    Icon: {
+      control: false
+    },
+    iconColor: {
+      type: "string",
+      defaultValue: "hsla(110, 50%, 57%, 1)",
+      control: { control: "color" }
+    },
+    badgeColor: {
+      type: "string",
+      defaultValue: "hsla(110, 50%, 57%, 1)",
+      control: { control: "color" }
+    },
+    borderColor: {
+      type: "string",
+      defaultValue: "success.c40",
+      control: { control: "color" }
+    },
+    iconSize: {
+      type: "number",
+      defaultValue: import_BoxedIcon.DEFAULT_ICON_SIZE
+    },
+    badgeSize: {
+      type: "number",
+      defaultValue: import_BoxedIcon.DEFAULT_BADGE_SIZE
+    },
+    size: {
+      type: "number",
+      defaultValue: import_BoxedIcon.DEFAULT_BOX_SIZE
+    }
+  }
+};
+var BoxedIcon_stories_default = Story;
+const BoxedIconTemplate = (args) => {
+  const badgeColor = args.badgeColor;
+  const badgeSize = args.badgeSize;
+  const borderColor = args.borderColor;
+  const iconColor = args.iconColor;
+  const IconComp = args.Icon || ((props) => /* @__PURE__ */ import_react.default.createElement(ExampleIcon, {
+    ...props,
+    name: args.exampleIconName
+  }));
+  const BadgeComp = args.Badge || ((props) => /* @__PURE__ */ import_react.default.createElement(ExampleIcon, {
+    ...props,
+    name: args.exampleBadgeName
+  }));
+  const iconSize = args.iconSize;
+  const size = args.size;
+  return /* @__PURE__ */ import_react.default.createElement(import_BoxedIcon.default, {
+    Icon: IconComp,
+    Badge: args.exampleBadgeEnabled ? BadgeComp : void 0,
+    badgeColor,
+    badgeSize,
+    borderColor,
+    iconColor,
+    iconSize,
+    size
+  });
+};
+const BoxedIcon = BoxedIconTemplate.bind({});
+//# sourceMappingURL=BoxedIcon.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/asorted/Icon/BoxedIcon.stories.tsx"],
+  "sourcesContent": ["import React from \"react\";\nimport Icon, { iconNames } from \"./Icon\";\nimport BoxedIconC, {\n  BoxedIconProps,\n  IconProps,\n  DEFAULT_BOX_SIZE,\n  DEFAULT_ICON_SIZE,\n  DEFAULT_BADGE_SIZE,\n} from \"./BoxedIcon\";\n\nconst ExampleIcon = ({ size, color, name }: IconProps & { name: string }) => (\n  <Icon name={name} {...{ size, color }} />\n);\n\nconst Story = {\n  title: \"Asorted/Icons/BoxedIcon\",\n  component: BoxedIconC,\n  argTypes: {\n    exampleIconName: {\n      type: \"enum\",\n      defaultValue: \"Activity\",\n      description:\n        \"[Not a BoxedIcon prop, only for this Storybook example] - Icon name. Value is passed to the `Icon` component of this UI library which is then used for the `Icon` prop.\",\n      control: {\n        options: iconNames,\n        control: {\n          type: \"select\",\n        },\n      },\n    },\n    exampleBadgeName: {\n      type: \"enum\",\n      defaultValue: \"CircledCheckSolid\",\n      description:\n        \"[Not a BoxedIcon prop, only for this Storybook example] - Badge icon name. Value is passed to the `Icon` component of this UI library which is then used for the `Badge` prop.\",\n      control: {\n        options: iconNames,\n        control: {\n          type: \"select\",\n        },\n      },\n    },\n    exampleBadgeEnabled: {\n      type: \"boolean\",\n      defaultValue: true,\n      description:\n        \"[Not a BoxedIcon prop, only for this Storybook example] - Controls whether a `Badge` prop is passed to the `BoxedIcon` component.\",\n    },\n    Badge: {\n      control: false,\n    },\n    Icon: {\n      control: false,\n    },\n    iconColor: {\n      type: \"string\",\n      defaultValue: \"hsla(110, 50%, 57%, 1)\",\n      control: { control: \"color\" },\n    },\n    badgeColor: {\n      type: \"string\",\n      defaultValue: \"hsla(110, 50%, 57%, 1)\",\n      control: { control: \"color\" },\n    },\n    borderColor: {\n      type: \"string\",\n      defaultValue: \"success.c40\",\n      control: { control: \"color\" },\n    },\n    iconSize: {\n      type: \"number\",\n      defaultValue: DEFAULT_ICON_SIZE,\n    },\n    badgeSize: {\n      type: \"number\",\n      defaultValue: DEFAULT_BADGE_SIZE,\n    },\n    size: {\n      type: \"number\",\n      defaultValue: DEFAULT_BOX_SIZE,\n    },\n  },\n};\n\nexport default Story;\n\nconst BoxedIconTemplate = (\n  args: BoxedIconProps & {\n    exampleIconName: string;\n    exampleBadgeName: string;\n    exampleBadgeEnabled: boolean;\n  },\n) => {\n  const badgeColor = args.badgeColor;\n  const badgeSize = args.badgeSize;\n  const borderColor = args.borderColor;\n  const iconColor = args.iconColor;\n  const IconComp =\n    args.Icon || ((props: IconProps) => <ExampleIcon {...props} name={args.exampleIconName} />);\n  const BadgeComp =\n    args.Badge || ((props: IconProps) => <ExampleIcon {...props} name={args.exampleBadgeName} />);\n  const iconSize = args.iconSize;\n  const size = args.size;\n\n  return (\n    <BoxedIconC\n      Icon={IconComp}\n      Badge={args.exampleBadgeEnabled ? BadgeComp : undefined}\n      badgeColor={badgeColor}\n      badgeSize={badgeSize}\n      borderColor={borderColor}\n      iconColor={iconColor}\n      iconSize={iconSize}\n      size={size}\n    />\n  );\n};\n\nexport const BoxedIcon = BoxedIconTemplate.bind({});\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,kBAAgC;AAChC,uBAMO;AAEP,MAAM,cAAc,CAAC,EAAE,MAAM,OAAO,WAClC,mDAAC,qBAAD;AAAA,EAAM;AAAA,KAAgB,EAAE,MAAM;AAAA;AAGhC,MAAM,QAAQ;AAAA,EACZ,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,IACR,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,cAAc;AAAA,MACd,aACE;AAAA,MACF,SAAS;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,UACP,MAAM;AAAA;AAAA;AAAA;AAAA,IAIZ,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,cAAc;AAAA,MACd,aACE;AAAA,MACF,SAAS;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,UACP,MAAM;AAAA;AAAA;AAAA;AAAA,IAIZ,qBAAqB;AAAA,MACnB,MAAM;AAAA,MACN,cAAc;AAAA,MACd,aACE;AAAA;AAAA,IAEJ,OAAO;AAAA,MACL,SAAS;AAAA;AAAA,IAEX,MAAM;AAAA,MACJ,SAAS;AAAA;AAAA,IAEX,WAAW;AAAA,MACT,MAAM;AAAA,MACN,cAAc;AAAA,MACd,SAAS,EAAE,SAAS;AAAA;AAAA,IAEtB,YAAY;AAAA,MACV,MAAM;AAAA,MACN,cAAc;AAAA,MACd,SAAS,EAAE,SAAS;AAAA;AAAA,IAEtB,aAAa;AAAA,MACX,MAAM;AAAA,MACN,cAAc;AAAA,MACd,SAAS,EAAE,SAAS;AAAA;AAAA,IAEtB,UAAU;AAAA,MACR,MAAM;AAAA,MACN,cAAc;AAAA;AAAA,IAEhB,WAAW;AAAA,MACT,MAAM;AAAA,MACN,cAAc;AAAA;AAAA,IAEhB,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,cAAc;AAAA;AAAA;AAAA;AAKpB,IAAO,4BAAQ;AAEf,MAAM,oBAAoB,CACxB,SAKG;AACH,QAAM,aAAa,KAAK;AACxB,QAAM,YAAY,KAAK;AACvB,QAAM,cAAc,KAAK;AACzB,QAAM,YAAY,KAAK;AACvB,QAAM,WACJ,KAAK,QAAS,EAAC,UAAqB,mDAAC,aAAD;AAAA,OAAiB;AAAA,IAAO,MAAM,KAAK;AAAA;AACzE,QAAM,YACJ,KAAK,SAAU,EAAC,UAAqB,mDAAC,aAAD;AAAA,OAAiB;AAAA,IAAO,MAAM,KAAK;AAAA;AAC1E,QAAM,WAAW,KAAK;AACtB,QAAM,OAAO,KAAK;AAElB,SACE,mDAAC,0BAAD;AAAA,IACE,MAAM;AAAA,IACN,OAAO,KAAK,sBAAsB,YAAY;AAAA,IAC9C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAKC,MAAM,YAAY,kBAAkB,KAAK;",
+  "names": []
+}

package/lib/cjs/components/asorted/Icon/Icon.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: () => Icon_default,
+  iconNames: () => iconNames
+});
+var icons = __toModule(require("@ledgerhq/icons-ui/react"));
+var import_react = __toModule(require("react"));
+const iconNames = Array.from(Object.keys(icons).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 Icon = ({
+  name,
+  size = 16,
+  color = "currentColor",
+  weight = "Medium"
+}) => {
+  const maybeIconName = `${name}${weight}`;
+  if (maybeIconName in icons) {
+    const Component = icons[maybeIconName];
+    return /* @__PURE__ */ import_react.default.createElement(Component, {
+      size,
+      color
+    });
+  }
+  return null;
+};
+var Icon_default = Icon;
+//# sourceMappingURL=Icon.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/asorted/Icon/Icon.tsx"],
+  "sourcesContent": ["import * as icons from \"@ledgerhq/icons-ui/react\";\nimport React from \"react\";\n\nexport type Props = {\n  name: string;\n  size?: number;\n  weight?: \"Regular\" | \"Thin\" | \"Light\" | \"Medium\" | \"UltraLight\";\n  color?: string;\n};\n\nexport const iconNames = Array.from(\n  Object.keys(icons).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 Icon = ({\n  name,\n  size = 16,\n  color = \"currentColor\",\n  weight = \"Medium\",\n}: Props): JSX.Element | null => {\n  const maybeIconName = `${name}${weight}`;\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    return <Component size={size} color={color} />;\n  }\n  return null;\n};\n\nexport default Icon;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,mBAAkB;AASX,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,OAAO,CAAC;AAAA,EACZ;AAAA,EACA,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,SAAS;AAAA,MACsB;AAC/B,QAAM,gBAAgB,GAAG,OAAO;AAChC,MAAI,iBAAiB,OAAO;AAE1B,UAAM,YAAY,MAAM;AACxB,WAAO,mDAAC,WAAD;AAAA,MAAW;AAAA,MAAY;AAAA;AAAA;AAEhC,SAAO;AAAA;AAGT,IAAO,eAAQ;",
+  "names": []
+}