@ledgerhq/react-ui 0.9.0-nightly.0 → 0.9.1-nightly.0

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

@@ -29,25 +29,116 @@ 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"));
+var import_Text = __toModule(require("../Text/index"));
+var import_Flex = __toModule(require("../../layout/Flex"));
 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 Container = (0, import_styled_components.default)(import_Flex.default).attrs((p) => ({
+  heigth: p.size,
+  width: p.size,
+  alignItems: "center",
+  justifyContent: "center",
+  position: "relative"
+}))``;
+const Circle = (0, import_styled_components.default)(import_Flex.default).attrs((p) => ({
+  heigth: p.size,
+  width: p.size,
+  alignItems: "center",
+  justifyContent: "center",
+  position: "relative",
+  borderRadius: "50%",
+  backgroundColor: p.backgroundColor
+}))``;
+const TokenContainer = (0, import_styled_components.default)(import_Flex.default).attrs((p) => ({
+  position: "absolute",
+  bottom: "-2px",
+  right: "-5px",
+  alignItems: "center",
+  justifyContent: "center",
+  heigth: p.size,
+  width: p.size,
+  borderRadius: "50%",
+  border: `2px solid ${p.borderColor}`,
+  backgroundColor: p.backgroundColor,
+  zIndex: 0
+}))``;
+function Fallback({ name }) {
+  return /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
+    uppercase: true,
+    color: "neutral.c70"
+  }, name.slice(0, 1));
+}
+const IconBox = ({
+  children,
+  color,
+  backgroundColor,
+  disabled,
+  size = 16,
+  tokenIcon = ""
+}) => {
+  const { colors } = (0, import_styled_components.useTheme)();
+  if (tokenIcon in icons) {
+    const Component = icons[tokenIcon];
+    const defaultColor = Component.DefaultColor;
+    const iconColor = disabled ? colors.neutral.c70 : color || defaultColor;
+    const contrastedColor = (0, import_styles.ensureContrast)(iconColor, backgroundColor || colors.background.main);
+    return /* @__PURE__ */ import_react.default.createElement(Container, {
+      size
+    }, children, tokenIcon && /* @__PURE__ */ import_react.default.createElement(TokenContainer, {
+      size: size / 3,
+      borderColor: colors.background.main,
+      backgroundColor: contrastedColor
+    }, /* @__PURE__ */ import_react.default.createElement(Component, {
+      size,
+      color: colors.background.main
+    })));
+  }
+  return children;
+};
+const CryptoIcon = ({
+  name,
+  size = 16,
+  color,
+  backgroundColor,
+  circleIcon,
+  disabled,
+  tokenIcon,
+  fallbackIcon
+}) => {
   const { colors } = (0, import_styled_components.useTheme)();
+  const maybeIconName = `${name}`;
   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, {
+    const iconColor = disabled ? colors.neutral.c70 : color || defaultColor;
+    const contrastedColor = (0, import_styles.ensureContrast)(iconColor, backgroundColor || colors.background.main);
+    return /* @__PURE__ */ import_react.default.createElement(IconBox, {
+      size,
+      tokenIcon,
+      color,
+      disabled,
+      name
+    }, tokenIcon || circleIcon ? /* @__PURE__ */ import_react.default.createElement(Circle, {
+      backgroundColor: contrastedColor,
+      size
+    }, /* @__PURE__ */ import_react.default.createElement(Component, {
+      size,
+      color: colors.background.main
+    })) : /* @__PURE__ */ import_react.default.createElement(Component, {
       size,
       color: contrastedColor
-    });
+    }));
+  }
+  if (fallbackIcon) {
+    return fallbackIcon;
   }
-  return null;
+  return /* @__PURE__ */ import_react.default.createElement(Fallback, {
+    name
+  });
 };
 var CryptoIcon_default = CryptoIcon;
 //# sourceMappingURL=CryptoIcon.js.map

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

@@ -1,7 +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;",
+  "sourcesContent": ["import * as icons from \"@ledgerhq/crypto-icons-ui/react\";\nimport React from \"react\";\nimport { ensureContrast } from \"../../../styles\";\nimport styled, { useTheme } from \"styled-components\";\nimport Text from \"../Text/index\";\nimport Flex from \"../../layout/Flex\";\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  circleIcon?: boolean;\n  disabled?: boolean;\n  tokenIcon?: string;\n  fallbackIcon?: JSX.Element;\n};\n\ntype IconBoxProps = {\n  children: JSX.Element;\n} & Props;\n\ntype FallbackProps = {\n  name: string;\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 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 Circle = styled(Flex).attrs((p: { size: number; backgroundColor: string }) => ({\n  heigth: p.size,\n  width: p.size,\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  position: \"relative\",\n  borderRadius: \"50%\",\n  backgroundColor: p.backgroundColor,\n}))<{ size: number }>``;\n\nconst TokenContainer = styled(Flex).attrs(\n  (p: { size: number; borderColor: string; backgroundColor: string }) => ({\n    position: \"absolute\",\n    bottom: \"-2px\",\n    right: \"-5px\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    heigth: p.size,\n    width: p.size,\n    borderRadius: \"50%\",\n    border: `2px solid ${p.borderColor}`,\n    backgroundColor: p.backgroundColor,\n    zIndex: 0,\n  }),\n)<{ size: number }>``;\n\nfunction Fallback({ name }: FallbackProps) {\n  return (\n    <Text uppercase color=\"neutral.c70\">\n      {name.slice(0, 1)}\n    </Text>\n  );\n}\n\nconst IconBox = ({\n  children,\n  color,\n  backgroundColor,\n  disabled,\n  size = 16,\n  tokenIcon = \"\",\n}: IconBoxProps) => {\n  const { colors } = useTheme();\n  if (tokenIcon in icons) {\n    // @ts-expect-error FIXME I don't know how to make you happy ts\n    const Component = icons[tokenIcon];\n    const defaultColor = Component.DefaultColor;\n    const iconColor = disabled ? colors.neutral.c70 : color || defaultColor;\n    const contrastedColor = ensureContrast(iconColor, backgroundColor || colors.background.main);\n    return (\n      <Container size={size}>\n        {children}\n        {tokenIcon && (\n          <TokenContainer\n            size={size / 3}\n            borderColor={colors.background.main}\n            backgroundColor={contrastedColor}\n          >\n            <Component size={size} color={colors.background.main} />\n          </TokenContainer>\n        )}\n      </Container>\n    );\n  }\n  return children;\n};\n\nconst CryptoIcon = ({\n  name,\n  size = 16,\n  color,\n  backgroundColor,\n  circleIcon,\n  disabled,\n  tokenIcon,\n  fallbackIcon,\n}: Props): JSX.Element => {\n  const { colors } = useTheme();\n  const maybeIconName = `${name}`;\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 iconColor = disabled ? colors.neutral.c70 : color || defaultColor;\n    const contrastedColor = ensureContrast(iconColor, backgroundColor || colors.background.main);\n\n    return (\n      <IconBox size={size} tokenIcon={tokenIcon} color={color} disabled={disabled} name={name}>\n        {tokenIcon || circleIcon ? (\n          <Circle backgroundColor={contrastedColor} size={size}>\n            <Component size={size} color={colors.background.main} />\n          </Circle>\n        ) : (\n          <Component size={size} color={contrastedColor} />\n        )}\n      </IconBox>\n    );\n  }\n  if (fallbackIcon) {\n    return fallbackIcon;\n  }\n  return <Fallback name={name} />;\n};\n\nexport default CryptoIcon;\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -30,6 +30,24 @@ 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 description = `
+### A customizable crypto-icon component.
+
+### Props
+
+\`\`\`tsx
+type Props = {
+  name: string;
+  size?: number;
+  color?: string;
+  backgroundColor?: string; // overrides background color to ensure contrast with icon color
+  circleIcon?: boolean; // if icon is in a circle or not
+  tokenIcon?: string; // ref to the token icon to show as a sub icon
+  disabled?: boolean;
+  fallback?: JSX.Element; // fallback element if no icon found - defaults to an icon with first letter of icon name
+};
+\`\`\`
+`;
 const ScrollArea = (0, import_styled_components.default)(import__.Grid)`
   flex: 1;
   height: auto;
@@ -79,6 +97,28 @@ const Story = {
           type: "select"
         }
       }
+    },
+    circleIcon: {
+      type: "boolean",
+      description: "if icon is in a circle or not",
+      defaultValue: false
+    },
+    disabled: {
+      type: "boolean",
+      description: "if icon is in a disabled or not",
+      defaultValue: false
+    },
+    tokenIcon: {
+      type: "string",
+      description: "ref to the token icon to show as a sub icon",
+      defaultValue: ""
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: description
+      }
     }
   }
 };
@@ -88,6 +128,7 @@ const ListTemplate = (args) => {
   const [search, setSearch] = (0, import_react.useState)("");
   const s = search.toLowerCase();
   const regexp = new RegExp(s, "i");
+  const { tokenIcon, disabled, circleIcon, size } = args;
   return /* @__PURE__ */ import_react.default.createElement(Container, null, /* @__PURE__ */ import_react.default.createElement(import__.SearchInput, {
     value: search,
     onChange: setSearch
@@ -111,8 +152,11 @@ const ListTemplate = (args) => {
     }, /* @__PURE__ */ import_react.default.createElement(import__.CryptoIcon, {
       key: name,
       name,
-      size: args.size,
-      color
+      size,
+      color,
+      disabled,
+      circleIcon,
+      tokenIcon
     })), /* @__PURE__ */ import_react.default.createElement(import__.Text, {
       variant: "extraSmall"
     }, active ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, name.substr(0, index), /* @__PURE__ */ import_react.default.createElement(Bold, null, name.substr(index, s.length)), name.substr(index + s.length)) : name));

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

@@ -1,7 +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;",
+  "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\nconst description = `\n### A customizable crypto-icon component.\n\n### Props\n\n\\`\\`\\`tsx\ntype Props = {\n  name: string;\n  size?: number;\n  color?: string;\n  backgroundColor?: string; // overrides background color to ensure contrast with icon color\n  circleIcon?: boolean; // if icon is in a circle or not\n  tokenIcon?: string; // ref to the token icon to show as a sub icon\n  disabled?: boolean;\n  fallback?: JSX.Element; // fallback element if no icon found - defaults to an icon with first letter of icon name\n};\n\\`\\`\\`\n`;\n\ntype CryptoIconsProps = {\n  name: keyof typeof cryptoIcons;\n  size?: number;\n  color?: string;\n  circleIcon?: boolean;\n  disabled?: boolean;\n  tokenIcon?: 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    circleIcon: {\n      type: \"boolean\",\n      description: \"if icon is in a circle or not\",\n      defaultValue: false,\n    },\n    disabled: {\n      type: \"boolean\",\n      description: \"if icon is in a disabled or not\",\n      defaultValue: false,\n    },\n    tokenIcon: {\n      type: \"string\",\n      description: \"ref to the token icon to show as a sub icon\",\n      defaultValue: \"\",\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        component: description,\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  const { tokenIcon, disabled, circleIcon, size } = args;\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\n                    key={name}\n                    name={name}\n                    size={size}\n                    color={color}\n                    disabled={disabled}\n                    circleIcon={circleIcon}\n                    tokenIcon={tokenIcon}\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: 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": "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",
   "names": []
 }

package/lib/cjs/components/cards/Carousel/Slide.js

@@ -31,10 +31,9 @@ var import_Flex = __toModule(require("../../layout/Flex"));
 const Wrapper = (0, import_styled_components.default)(import_Flex.default)`
   width: 100%;
   height: 100%;
-  background: gray;
   flex-direction: column;
   padding: ${(p) => p.theme.space[8]}px ${(p) => p.theme.space[10]}px;
-  padding-right: 280px; // Nb gives air to not overlap the illustration
+  padding-right: 280px; /* Nb gives air to not overlap the illustration */
   z-index: ${(p) => p.theme.zIndexes[8]};
   background: url(${(p) => p.image}) no-repeat ${(p) => p.theme.colors.neutral.c100};
   background-size: contain;

package/lib/cjs/components/cards/Carousel/Slide.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/cards/Carousel/Slide.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport Text from \"../../asorted/Text\";\nimport Flex from \"../../layout/Flex\";\n\nconst Wrapper = styled(Flex)<{ image?: string }>`\n  width: 100%;\n  height: 100%;\n  background: gray;\n  flex-direction: column;\n  padding: ${(p) => p.theme.space[8]}px ${(p) => p.theme.space[10]}px;\n  padding-right: 280px; // Nb gives air to not overlap the illustration\n  z-index: ${(p) => p.theme.zIndexes[8]};\n  background: url(${(p) => p.image}) no-repeat ${(p) => p.theme.colors.neutral.c100};\n  background-size: contain;\n  background-position: right 60px bottom;\n`;\n\nexport type Props = {\n  onClick: () => void;\n  title: string;\n  description: string;\n  image?: string;\n};\n\nconst Slide = ({ title, description, image, onClick }: Props): React.ReactElement => {\n  return (\n    <Wrapper key={\"key\"} image={image} onClick={onClick}>\n      <Text variant={\"tiny\"} color=\"neutral.c00\" fontWeight=\"regular\">\n        {title}\n      </Text>\n      <Text variant={\"h5\"} color=\"neutral.c00\" textTransform=\"uppercase\">\n        {description}\n      </Text>\n    </Wrapper>\n  );\n};\n\nexport default Slide;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAiB;AACjB,kBAAiB;AAEjB,MAAM,UAAU,sCAAO;AAAA;AAAA;AAAA;AAAA;AAAA,aAKV,CAAC,MAAM,EAAE,MAAM,MAAM,QAAQ,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA;AAAA,aAElD,CAAC,MAAM,EAAE,MAAM,SAAS;AAAA,oBACjB,CAAC,MAAM,EAAE,oBAAoB,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAY/E,MAAM,QAAQ,CAAC,EAAE,OAAO,aAAa,OAAO,cAAyC;AACnF,SACE,mDAAC,SAAD;AAAA,IAAS,KAAK;AAAA,IAAO;AAAA,IAAc;AAAA,KACjC,mDAAC,qBAAD;AAAA,IAAM,SAAS;AAAA,IAAQ,OAAM;AAAA,IAAc,YAAW;AAAA,KACnD,QAEH,mDAAC,qBAAD;AAAA,IAAM,SAAS;AAAA,IAAM,OAAM;AAAA,IAAc,eAAc;AAAA,KACpD;AAAA;AAMT,IAAO,gBAAQ;",
+  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport Text from \"../../asorted/Text\";\nimport Flex from \"../../layout/Flex\";\n\nconst Wrapper = styled(Flex)<{ image?: string }>`\n  width: 100%;\n  height: 100%;\n  flex-direction: column;\n  padding: ${(p) => p.theme.space[8]}px ${(p) => p.theme.space[10]}px;\n  padding-right: 280px; /* Nb gives air to not overlap the illustration */\n  z-index: ${(p) => p.theme.zIndexes[8]};\n  background: url(${(p) => p.image}) no-repeat ${(p) => p.theme.colors.neutral.c100};\n  background-size: contain;\n  background-position: right 60px bottom;\n`;\n\nexport type Props = {\n  onClick: () => void;\n  title: string;\n  description: string;\n  image?: string;\n};\n\nconst Slide = ({ title, description, image, onClick }: Props): React.ReactElement => {\n  return (\n    <Wrapper key={\"key\"} image={image} onClick={onClick}>\n      <Text variant={\"tiny\"} color=\"neutral.c00\" fontWeight=\"regular\">\n        {title}\n      </Text>\n      <Text variant={\"h5\"} color=\"neutral.c00\" textTransform=\"uppercase\">\n        {description}\n      </Text>\n    </Wrapper>\n  );\n};\n\nexport default Slide;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAiB;AACjB,kBAAiB;AAEjB,MAAM,UAAU,sCAAO;AAAA;AAAA;AAAA;AAAA,aAIV,CAAC,MAAM,EAAE,MAAM,MAAM,QAAQ,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA;AAAA,aAElD,CAAC,MAAM,EAAE,MAAM,SAAS;AAAA,oBACjB,CAAC,MAAM,EAAE,oBAAoB,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAY/E,MAAM,QAAQ,CAAC,EAAE,OAAO,aAAa,OAAO,cAAyC;AACnF,SACE,mDAAC,SAAD;AAAA,IAAS,KAAK;AAAA,IAAO;AAAA,IAAc;AAAA,KACjC,mDAAC,qBAAD;AAAA,IAAM,SAAS;AAAA,IAAQ,OAAM;AAAA,IAAc,YAAW;AAAA,KACnD,QAEH,mDAAC,qBAAD;AAAA,IAAM,SAAS;AAAA,IAAM,OAAM;AAAA,IAAc,eAAc;AAAA,KACpD;AAAA;AAMT,IAAO,gBAAQ;",
   "names": []
 }

package/lib/cjs/components/cta/Button/index.js

@@ -165,7 +165,7 @@ const Base = import_styled.default.button.attrs((p) => ({
   overflow: hidden;
   ${(p) => buttonSizeStyle[p.size || "medium"]}
   text-overflow: ellipsis;
-  white-space: nowrap;
+  white-space: ${(p) => p.whiteSpace ? p.whiteSpace : "nowrap"};
   max-width: 100%;
   position: relative;
   cursor: ${(p) => p.disabled ? "default" : "pointer"};

package/lib/cjs/components/cta/Button/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/cta/Button/index.tsx"],
-  "sourcesContent": ["import React, { useState, useMemo } from \"react\";\nimport styled, { css, StyledProps } from \"styled-components\";\nimport baseStyled, { BaseStyledProps } from \"../../styled\";\nimport { fontSize, border, BordersProps, compose } from \"styled-system\";\nimport fontFamily from \"../../../styles/styled/fontFamily\";\nimport { fontSizes } from \"../../../styles/theme\";\nimport { rgba } from \"../../../styles/helpers\";\nimport ChevronBottom from \"@ledgerhq/icons-ui/react/ChevronBottomRegular\";\nimport IconComponent from \"../../asorted/Icon\";\n\nexport type ButtonVariants = \"main\" | \"shade\" | \"error\" | \"color\";\nexport type IconPosition = \"right\" | \"left\";\ninterface BaseProps extends BaseStyledProps, BordersProps {\n  ff?: string;\n  color?: string;\n  backgroundColor?: string;\n  size?: \"small\" | \"medium\" | \"large\";\n  fontSize?: number;\n  variant?: ButtonVariants;\n  outline?: boolean;\n  iconPosition?: IconPosition;\n  iconButton?: boolean;\n  disabled?: boolean;\n}\n\nexport interface ButtonProps extends BaseProps, React.RefAttributes<HTMLButtonElement> {\n  iconName?: string;\n  Icon?: React.ComponentType<{ size: number; color?: string }>;\n  children?: React.ReactNode;\n  onClick?: (event: React.SyntheticEvent<HTMLButtonElement>) => void;\n  iconSize?: number;\n  style?: React.CSSProperties;\n}\nconst IconContainer = styled.div<{\n  iconPosition: IconPosition;\n}>`\n  display: inline-block;\n  ${(p) => `${p.iconPosition === \"left\" ? \"margin-right\" : \"margin-left\"}: ${p.theme.space[4]}px;`}\n  padding-top: 0.2em;\n`;\n\nconst getVariantColors = (p: StyledProps<BaseProps>) => ({\n  main: {\n    outline: `\n        border-color: ${p.theme.colors.neutral.c100};\n        color: ${p.theme.colors.neutral.c100};\n        background-color: transparent;\n        &:hover, &:focus {\n          background-color: ${rgba(p.theme.colors.neutral.c100, 0.03)};\n        }\n        &:active {\n          background-color: ${rgba(p.theme.colors.neutral.c100, 0.05)};\n        }\n      `,\n    filled: `\n        color: ${p.theme.colors.neutral.c00};\n        background-color: ${p.theme.colors.neutral.c100};\n        &:hover, &:focus {\n          background-color: ${p.theme.colors.neutral.c90};\n        }\n      `,\n  },\n  shade: `\n      border-color: ${p.theme.colors.neutral.c40};\n      color: ${p.theme.colors.neutral.c100};\n      background-color: ${p.theme.colors.neutral.c00};\n      &:focus {\n        border-color: ${p.theme.colors.primary.c80};\n      }\n\n      &:hover, &:focus {\n        background-color: ${p.theme.colors.neutral.c20};\n      }\n\n      &:active {\n        background-color: ${p.theme.colors.neutral.c30};\n      }\n    `,\n  error: {\n    outline: `\n      border-color: ${p.theme.colors.error.c100};\n      color: ${p.theme.colors.error.c100};\n      background-color: transparent;\n      &:hover {\n        background-color: ${rgba(p.theme.colors.error.c100, 0.02)};\n      }\n      &:active {\n        background-color: ${rgba(p.theme.colors.error.c100, 0.05)};\n      }\n    `,\n    filled: `\n      color: ${p.theme.colors.neutral.c00};\n      background-color: ${p.theme.colors.error.c100};\n      &:hover {\n        background-color: ${p.theme.colors.error.c80};\n      }\n    `,\n  },\n  color: {\n    outline: `\n      border-color: ${p.theme.colors.primary.c80};\n      color: ${p.theme.colors.primary.c80};\n      background-color: transparent;\n      &:hover {\n        background-color: ${rgba(p.theme.colors.primary.c100, 0.02)};\n      }\n      &:active {\n        background-color: ${rgba(p.theme.colors.primary.c100, 0.05)};\n      }\n    `,\n    filled: `\n      color: ${p.theme.colors.neutral.c00};\n      background-color: ${p.theme.colors.primary.c80};\n      &:hover {\n        background-color: ${p.theme.colors.primary.c70};\n      }\n    `,\n  },\n  disabled: {\n    outline: `\n        border-color: ${p.theme.colors.neutral.c50};\n        color: ${p.theme.colors.neutral.c50};\n        background-color: transparent;\n      `,\n    filled: `\n        color: ${p.theme.colors.neutral.c50};\n        background-color: ${p.theme.colors.neutral.c30};\n      `,\n  },\n  default: `\n    color: ${p.theme.colors.neutral.c100};\n    background-color: transparent;\n    &:hover {\n      text-decoration: underline;\n    }\n  `,\n});\n\nexport const ButtonUnstyled = baseStyled.button`\n  all: unset;\n  cursor: pointer;\n\n  &:disabled {\n    cursor: default;\n  }\n`;\n\nexport const Base = baseStyled.button.attrs((p: BaseProps) => ({\n  fontFamily: \"Inter\",\n  fontSize: p.fontSize ?? 4,\n}))<BaseProps>`\n  background-color: transparent;\n  border-color: transparent;\n  border-radius: ${(p) => p.theme.space[13]}px;\n  border-style: solid;\n  border-width: ${(p) => (p.outline || p.variant === \"shade\" ? 1 : 0)}px;\n  font-weight: 600;\n  ${compose(fontFamily, fontSize, border)};\n  line-height: ${(p) => p.theme.fontSizes[p.fontSize]}px;\n  text-align: center;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  ${(p) => buttonSizeStyle[p.size || \"medium\"]}\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: 100%;\n  position: relative;\n  cursor: ${(p) => (p.disabled ? \"default\" : \"pointer\")};\n  &:active {\n    box-shadow: 0 0 0 4px ${(p) => rgba(p.theme.colors.primary.c60, 0.4)};\n  }\n  &:focus, &:hover {\n    box-shadow: 0 0 0 2px ${(p) => rgba(p.theme.colors.primary.c60, 0.4)};\n  }\n\n  ${(p) => {\n    const variants = getVariantColors(p);\n    if (p.disabled) {\n      return p.outline || p.variant === \"shade\"\n        ? variants.disabled.outline\n        : variants.disabled.filled;\n    }\n\n    const variant: ButtonVariants | \"default\" =\n      p.variant ?? (\"default\" as ButtonVariants | \"default\");\n    switch (variant) {\n      case \"main\":\n        return p.outline ? variants.main.outline : variants.main.filled;\n      case \"shade\":\n        return variants.shade;\n\n      case \"error\":\n        return p.outline ? variants.error.outline : variants.error.filled;\n\n      case \"color\":\n        return p.outline ? variants.color.outline : variants.color.filled;\n\n      case \"default\":\n      default:\n        return variants.default;\n    }\n  }}\n  ${(p) =>\n    p.iconButton\n      ? css`\n          width: ${p.theme.space[13]}px;\n          padding: 0;\n          ${IconContainer} {\n            margin: 0;\n          }\n        `\n      : \"\"}\n  ${(p) => p.theme.transition([\"background-color\", \"color\", \"border-color\", \"box-shadow\"], \"0.2s\")}\n`;\n\nconst ContentContainer = styled.div``;\n\nconst Button = (\n  {\n    Icon,\n    iconPosition = \"right\",\n    iconSize = 16,\n    children,\n    onClick,\n    iconName,\n    ...props\n  }: ButtonProps,\n  ref?: React.ForwardedRef<HTMLButtonElement>,\n): React.ReactElement => {\n  const iconNodeSize = iconSize || fontSizes[props.fontSize ?? 4];\n  const IconNode = useMemo(\n    () =>\n      (iconName && <IconComponent name={iconName} size={iconNodeSize} />) ||\n      (Icon && <Icon size={iconNodeSize} />),\n    [iconName, iconNodeSize, Icon],\n  );\n\n  return (\n    <Base {...props} ref={ref} iconButton={!(Icon == null) && !children} onClick={onClick}>\n      {iconPosition === \"right\" ? <ContentContainer>{children}</ContentContainer> : null}\n      {IconNode && <IconContainer iconPosition={iconPosition}>{IconNode}</IconContainer>}\n      {iconPosition === \"left\" ? <ContentContainer>{children}</ContentContainer> : null}\n    </Base>\n  );\n};\nconst ButtonWithRef = React.forwardRef(Button) as unknown as typeof Button;\n\nexport type ButtonExpandProps = React.PropsWithChildren<\n  ButtonProps & {\n    onToggle?: (arg0: boolean) => void;\n  }\n>;\n\nconst StyledButtonExpand = styled(ButtonWithRef).attrs((props) => ({\n  Icon: props.Icon != null || ChevronBottom,\n  iconPosition: props.iconPosition || \"right\",\n}))<{ expanded: boolean }>`\n  ${IconContainer} {\n    transition: transform 0.25s;\n    ${(p) => (p.expanded ? \"transform: rotate(180deg)\" : \"\")}\n  }\n`;\nexport function ButtonExpand(\n  { onToggle, onClick, ...props }: ButtonExpandProps,\n  ref?: React.ForwardedRef<HTMLButtonElement>,\n): React.ReactElement {\n  const [expanded, setExpanded] = useState(false);\n  return (\n    <StyledButtonExpand\n      {...props}\n      ref={ref}\n      expanded={expanded}\n      onClick={(event: React.SyntheticEvent<HTMLButtonElement>) => {\n        setExpanded((expanded) => !expanded);\n        onToggle != null && onToggle(!expanded);\n        onClick != null && onClick(event);\n      }}\n    />\n  );\n}\n\nexport const buttonSizeStyle: {\n  [index: string]: {\n    padding: string;\n    height: string;\n  };\n} = {\n  small: {\n    padding: \"0 20px\",\n    height: \"32px\",\n  },\n  medium: {\n    padding: \"0 24px\",\n    height: \"40px\",\n  },\n  large: {\n    padding: \"0 28px\",\n    height: \"48px\",\n  },\n};\n\nButton.Unstyled = ButtonUnstyled;\nButton.Expand = React.forwardRef(ButtonExpand);\nButtonWithRef.Unstyled = Button.Unstyled;\nButtonWithRef.Expand = Button.Expand;\nexport default ButtonWithRef;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { useState, useMemo } from \"react\";\nimport styled, { css, StyledProps } from \"styled-components\";\nimport baseStyled, { BaseStyledProps } from \"../../styled\";\nimport { fontSize, border, BordersProps, compose } from \"styled-system\";\nimport fontFamily from \"../../../styles/styled/fontFamily\";\nimport { fontSizes } from \"../../../styles/theme\";\nimport { rgba } from \"../../../styles/helpers\";\nimport ChevronBottom from \"@ledgerhq/icons-ui/react/ChevronBottomRegular\";\nimport IconComponent from \"../../asorted/Icon\";\n\nexport type ButtonVariants = \"main\" | \"shade\" | \"error\" | \"color\";\nexport type IconPosition = \"right\" | \"left\";\ninterface BaseProps extends BaseStyledProps, BordersProps {\n  ff?: string;\n  color?: string;\n  backgroundColor?: string;\n  size?: \"small\" | \"medium\" | \"large\";\n  fontSize?: number;\n  variant?: ButtonVariants;\n  outline?: boolean;\n  iconPosition?: IconPosition;\n  iconButton?: boolean;\n  disabled?: boolean;\n  whiteSpace?: string;\n}\n\nexport interface ButtonProps extends BaseProps, React.RefAttributes<HTMLButtonElement> {\n  iconName?: string;\n  Icon?: React.ComponentType<{ size: number; color?: string }>;\n  children?: React.ReactNode;\n  onClick?: (event: React.SyntheticEvent<HTMLButtonElement>) => void;\n  iconSize?: number;\n  style?: React.CSSProperties;\n}\nconst IconContainer = styled.div<{\n  iconPosition: IconPosition;\n}>`\n  display: inline-block;\n  ${(p) => `${p.iconPosition === \"left\" ? \"margin-right\" : \"margin-left\"}: ${p.theme.space[4]}px;`}\n  padding-top: 0.2em;\n`;\n\nconst getVariantColors = (p: StyledProps<BaseProps>) => ({\n  main: {\n    outline: `\n        border-color: ${p.theme.colors.neutral.c100};\n        color: ${p.theme.colors.neutral.c100};\n        background-color: transparent;\n        &:hover, &:focus {\n          background-color: ${rgba(p.theme.colors.neutral.c100, 0.03)};\n        }\n        &:active {\n          background-color: ${rgba(p.theme.colors.neutral.c100, 0.05)};\n        }\n      `,\n    filled: `\n        color: ${p.theme.colors.neutral.c00};\n        background-color: ${p.theme.colors.neutral.c100};\n        &:hover, &:focus {\n          background-color: ${p.theme.colors.neutral.c90};\n        }\n      `,\n  },\n  shade: `\n      border-color: ${p.theme.colors.neutral.c40};\n      color: ${p.theme.colors.neutral.c100};\n      background-color: ${p.theme.colors.neutral.c00};\n      &:focus {\n        border-color: ${p.theme.colors.primary.c80};\n      }\n\n      &:hover, &:focus {\n        background-color: ${p.theme.colors.neutral.c20};\n      }\n\n      &:active {\n        background-color: ${p.theme.colors.neutral.c30};\n      }\n    `,\n  error: {\n    outline: `\n      border-color: ${p.theme.colors.error.c100};\n      color: ${p.theme.colors.error.c100};\n      background-color: transparent;\n      &:hover {\n        background-color: ${rgba(p.theme.colors.error.c100, 0.02)};\n      }\n      &:active {\n        background-color: ${rgba(p.theme.colors.error.c100, 0.05)};\n      }\n    `,\n    filled: `\n      color: ${p.theme.colors.neutral.c00};\n      background-color: ${p.theme.colors.error.c100};\n      &:hover {\n        background-color: ${p.theme.colors.error.c80};\n      }\n    `,\n  },\n  color: {\n    outline: `\n      border-color: ${p.theme.colors.primary.c80};\n      color: ${p.theme.colors.primary.c80};\n      background-color: transparent;\n      &:hover {\n        background-color: ${rgba(p.theme.colors.primary.c100, 0.02)};\n      }\n      &:active {\n        background-color: ${rgba(p.theme.colors.primary.c100, 0.05)};\n      }\n    `,\n    filled: `\n      color: ${p.theme.colors.neutral.c00};\n      background-color: ${p.theme.colors.primary.c80};\n      &:hover {\n        background-color: ${p.theme.colors.primary.c70};\n      }\n    `,\n  },\n  disabled: {\n    outline: `\n        border-color: ${p.theme.colors.neutral.c50};\n        color: ${p.theme.colors.neutral.c50};\n        background-color: transparent;\n      `,\n    filled: `\n        color: ${p.theme.colors.neutral.c50};\n        background-color: ${p.theme.colors.neutral.c30};\n      `,\n  },\n  default: `\n    color: ${p.theme.colors.neutral.c100};\n    background-color: transparent;\n    &:hover {\n      text-decoration: underline;\n    }\n  `,\n});\n\nexport const ButtonUnstyled = baseStyled.button`\n  all: unset;\n  cursor: pointer;\n\n  &:disabled {\n    cursor: default;\n  }\n`;\n\nexport const Base = baseStyled.button.attrs((p: BaseProps) => ({\n  fontFamily: \"Inter\",\n  fontSize: p.fontSize ?? 4,\n}))<BaseProps>`\n  background-color: transparent;\n  border-color: transparent;\n  border-radius: ${(p) => p.theme.space[13]}px;\n  border-style: solid;\n  border-width: ${(p) => (p.outline || p.variant === \"shade\" ? 1 : 0)}px;\n  font-weight: 600;\n  ${compose(fontFamily, fontSize, border)};\n  line-height: ${(p) => p.theme.fontSizes[p.fontSize]}px;\n  text-align: center;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  ${(p) => buttonSizeStyle[p.size || \"medium\"]}\n  text-overflow: ellipsis;\n  white-space: ${(p) => (p.whiteSpace ? p.whiteSpace : \"nowrap\")};\n  max-width: 100%;\n  position: relative;\n  cursor: ${(p) => (p.disabled ? \"default\" : \"pointer\")};\n  &:active {\n    box-shadow: 0 0 0 4px ${(p) => rgba(p.theme.colors.primary.c60, 0.4)};\n  }\n  &:focus, &:hover {\n    box-shadow: 0 0 0 2px ${(p) => rgba(p.theme.colors.primary.c60, 0.4)};\n  }\n\n  ${(p) => {\n    const variants = getVariantColors(p);\n    if (p.disabled) {\n      return p.outline || p.variant === \"shade\"\n        ? variants.disabled.outline\n        : variants.disabled.filled;\n    }\n\n    const variant: ButtonVariants | \"default\" =\n      p.variant ?? (\"default\" as ButtonVariants | \"default\");\n    switch (variant) {\n      case \"main\":\n        return p.outline ? variants.main.outline : variants.main.filled;\n      case \"shade\":\n        return variants.shade;\n\n      case \"error\":\n        return p.outline ? variants.error.outline : variants.error.filled;\n\n      case \"color\":\n        return p.outline ? variants.color.outline : variants.color.filled;\n\n      case \"default\":\n      default:\n        return variants.default;\n    }\n  }}\n  ${(p) =>\n    p.iconButton\n      ? css`\n          width: ${p.theme.space[13]}px;\n          padding: 0;\n          ${IconContainer} {\n            margin: 0;\n          }\n        `\n      : \"\"}\n  ${(p) => p.theme.transition([\"background-color\", \"color\", \"border-color\", \"box-shadow\"], \"0.2s\")}\n`;\n\nconst ContentContainer = styled.div``;\n\nconst Button = (\n  {\n    Icon,\n    iconPosition = \"right\",\n    iconSize = 16,\n    children,\n    onClick,\n    iconName,\n    ...props\n  }: ButtonProps,\n  ref?: React.ForwardedRef<HTMLButtonElement>,\n): React.ReactElement => {\n  const iconNodeSize = iconSize || fontSizes[props.fontSize ?? 4];\n  const IconNode = useMemo(\n    () =>\n      (iconName && <IconComponent name={iconName} size={iconNodeSize} />) ||\n      (Icon && <Icon size={iconNodeSize} />),\n    [iconName, iconNodeSize, Icon],\n  );\n\n  return (\n    <Base {...props} ref={ref} iconButton={!(Icon == null) && !children} onClick={onClick}>\n      {iconPosition === \"right\" ? <ContentContainer>{children}</ContentContainer> : null}\n      {IconNode && <IconContainer iconPosition={iconPosition}>{IconNode}</IconContainer>}\n      {iconPosition === \"left\" ? <ContentContainer>{children}</ContentContainer> : null}\n    </Base>\n  );\n};\nconst ButtonWithRef = React.forwardRef(Button) as unknown as typeof Button;\n\nexport type ButtonExpandProps = React.PropsWithChildren<\n  ButtonProps & {\n    onToggle?: (arg0: boolean) => void;\n  }\n>;\n\nconst StyledButtonExpand = styled(ButtonWithRef).attrs((props) => ({\n  Icon: props.Icon != null || ChevronBottom,\n  iconPosition: props.iconPosition || \"right\",\n}))<{ expanded: boolean }>`\n  ${IconContainer} {\n    transition: transform 0.25s;\n    ${(p) => (p.expanded ? \"transform: rotate(180deg)\" : \"\")}\n  }\n`;\nexport function ButtonExpand(\n  { onToggle, onClick, ...props }: ButtonExpandProps,\n  ref?: React.ForwardedRef<HTMLButtonElement>,\n): React.ReactElement {\n  const [expanded, setExpanded] = useState(false);\n  return (\n    <StyledButtonExpand\n      {...props}\n      ref={ref}\n      expanded={expanded}\n      onClick={(event: React.SyntheticEvent<HTMLButtonElement>) => {\n        setExpanded((expanded) => !expanded);\n        onToggle != null && onToggle(!expanded);\n        onClick != null && onClick(event);\n      }}\n    />\n  );\n}\n\nexport const buttonSizeStyle: {\n  [index: string]: {\n    padding: string;\n    height: string;\n  };\n} = {\n  small: {\n    padding: \"0 20px\",\n    height: \"32px\",\n  },\n  medium: {\n    padding: \"0 24px\",\n    height: \"40px\",\n  },\n  large: {\n    padding: \"0 28px\",\n    height: \"48px\",\n  },\n};\n\nButton.Unstyled = ButtonUnstyled;\nButton.Expand = React.forwardRef(ButtonExpand);\nButtonWithRef.Unstyled = Button.Unstyled;\nButtonWithRef.Expand = Button.Expand;\nexport default ButtonWithRef;\n"],
+  "mappings": "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",
   "names": []
 }

package/lib/cjs/components/form/BaseInput/index.js

@@ -91,6 +91,8 @@ const BaseInput = import_styled_components.default.input.attrs({
     color: ${(p) => p.disabled ? p.theme.colors.neutral.c50 : p.theme.colors.neutral.c70};
   }
 
+  /* stylelint-disable property-no-vendor-prefix */
+
   /* Hide type=number arrow for Chrome, Safari, Edge, Opera */
   &::-webkit-outer-spin-button,
   ::-webkit-inner-spin-button {
@@ -102,6 +104,7 @@ const BaseInput = import_styled_components.default.input.attrs({
   &[type="number"] {
     -moz-appearance: textfield;
   }
+  /* stylelint-enable property-no-vendor-prefix */
 
   ${import_styled_system.typography}
 `;

package/lib/cjs/components/form/BaseInput/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/form/BaseInput/index.tsx"],
-  "sourcesContent": ["import styled, { css } from \"styled-components\";\nimport { typography, TypographyProps } from \"styled-system\";\nimport React, { InputHTMLAttributes, useState, useMemo, useCallback } from \"react\";\nimport CircledCrossSolidMedium from \"@ledgerhq/icons-ui/react/CircledCrossSolidMedium\";\nimport FlexBox from \"../../layout/Flex\";\nimport Text from \"../../asorted/Text\";\nimport { rgba } from \"../../../styles/helpers\";\nimport { ButtonUnstyled } from \"../../cta/Button\";\n\ntype ValueType = HTMLInputElement[\"value\"];\n\nexport type CommonProps = InputHTMLAttributes<HTMLInputElement> &\n  TypographyProps & {\n    disabled?: boolean;\n    error?: string;\n    warning?: string;\n  };\n\nexport type InputProps<T = ValueType> = Omit<CommonProps, \"value\" | \"onChange\"> & {\n  value: T;\n  onChange?: (value: T) => void;\n  onChangeEvent?: InputHTMLAttributes<HTMLInputElement>[\"onChange\"];\n  renderLeft?: ((props: InputProps<T>) => React.ReactNode) | React.ReactNode;\n  renderRight?: ((props: InputProps<T>) => React.ReactNode) | React.ReactNode;\n  unwrapped?: boolean;\n  containerProps?: InputContainerProps;\n  clearable?: boolean;\n  /**\n   * A function can be provided to serialize a value of any type to a string.\n   *\n   * This can be useful to wrap the `<BaseInput />` component (which expects a string)\n   * and create higher-level components that will automatically perform the input/output\n   * conversion to other types.\n   *\n   * *A serializer function should always be used in conjunction with a deserializer function.*\n   */\n  serialize?: (value: T) => ValueType;\n  /**\n   * A deserializer can be provided to convert the html input value from a string to any other type.\n   *\n   * *A deserializer function should always be used in conjunction with a serializer function.*\n   */\n  deserialize?: (value: ValueType) => T;\n};\n\nexport type InputContainerProps = React.ComponentProps<typeof InputContainer>;\nexport const InputContainer = styled.div<Partial<CommonProps> & { focus?: boolean }>`\n  display: flex;\n  height: 48px;\n  border: ${(p) => `1px solid ${p.theme.colors.neutral.c40}`};\n  border-radius: 24px;\n  transition: all 0.2s ease;\n  color: ${(p) => p.theme.colors.neutral.c100};\n\n  ${(p) =>\n    p.focus &&\n    !p.error &&\n    !p.warning &&\n    css`\n      border: 1px solid ${p.theme.colors.primary.c80};\n      box-shadow: 0 0 0 4px ${rgba(p.theme.colors.primary.c60, 0.4)};\n    `};\n\n  ${(p) =>\n    p.error &&\n    !p.disabled &&\n    css`\n      border: 1px solid ${p.theme.colors.error.c100};\n    `};\n\n  ${(p) =>\n    !p.error &&\n    p.warning &&\n    !p.disabled &&\n    css`\n      border: 1px solid ${p.theme.colors.warning.c80};\n    `};\n\n  ${(p) =>\n    !p.error &&\n    !p.warning &&\n    !p.disabled &&\n    css`\n      &:hover {\n        border: ${!p.disabled && `1px solid ${p.theme.colors.primary.c80}`};\n      }\n    `};\n\n  ${(p) =>\n    p.disabled &&\n    css`\n      color: ${p.theme.colors.neutral.c60};\n      background: ${(p) => p.theme.colors.neutral.c20};\n    `};\n`;\n\nexport const BaseInput = styled.input.attrs<\n  Partial<CommonProps> & { focus?: boolean } & TypographyProps\n>({\n  fontSize: \"paragraph\",\n  fontWeight: \"medium\",\n})<Partial<CommonProps> & { focus?: boolean } & TypographyProps>`\n  height: 100%;\n  width: 100%;\n  border: 0;\n  caret-color: ${(p) => (p.error ? p.theme.colors.error.c100 : p.theme.colors.primary.c80)};\n  background: none;\n  outline: none;\n  cursor: ${(p) => (p.disabled ? \"not-allowed\" : \"text\")};\n  flex-shrink: 1;\n  padding-top: 14px;\n  padding-bottom: 14px;\n  padding-left: 20px;\n  padding-right: 20px;\n  &::placeholder {\n    color: ${(p) => (p.disabled ? p.theme.colors.neutral.c50 : p.theme.colors.neutral.c70)};\n  }\n\n  /* Hide type=number arrow for Chrome, Safari, Edge, Opera */\n  &::-webkit-outer-spin-button,\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n\n  /* Hide type=number arrow for Firefox */\n  &[type=\"number\"] {\n    -moz-appearance: textfield;\n  }\n\n  ${typography}\n`;\n\nexport const InputErrorContainer = styled(Text)`\n  color: ${(p) => p.theme.colors.error.c100};\n  margin-left: 12px;\n`;\nexport const InputWarningContainer = styled(Text)`\n  color: ${(p) => p.theme.colors.warning.c80};\n  margin-left: 12px;\n`;\n\nexport const InputRenderLeftContainer = styled(FlexBox).attrs(() => ({\n  alignItems: \"center\",\n  pl: \"16px\",\n}))``;\n\nexport const InputRenderRightContainer = styled(FlexBox).attrs(() => ({\n  alignItems: \"center\",\n  pr: \"16px\",\n}))``;\n\nexport const ClearableButtonUnstyled = styled(ButtonUnstyled)`\n  display: flex;\n`;\n\n// Yes, this is dirty. If you can figure out a better way please change the code :).\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst IDENTITY = (_: any): any => _;\n\nfunction Input<T = ValueType>(\n  props: InputProps<T>,\n  ref?: React.ForwardedRef<HTMLInputElement>,\n): JSX.Element {\n  const {\n    value,\n    disabled,\n    error,\n    warning,\n    onChange,\n    onChangeEvent,\n    renderLeft,\n    renderRight,\n    unwrapped,\n    containerProps,\n    serialize = IDENTITY,\n    deserialize = IDENTITY,\n    clearable,\n    ...htmlInputProps\n  } = props;\n  const [focus, setFocus] = useState(false);\n  const inputValue = useMemo(() => serialize(value), [serialize, value]);\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      onChange && onChange(deserialize(e.target.value));\n      onChangeEvent && onChangeEvent(e);\n    },\n    [onChange, onChangeEvent, deserialize],\n  );\n\n  const handleClear = useCallback(() => {\n    onChange && onChange(deserialize(\"\"));\n  }, [onChange, deserialize]);\n\n  const inner = (\n    <>\n      {typeof renderLeft === \"function\" ? renderLeft(props) : renderLeft}\n      <BaseInput\n        ref={ref}\n        {...htmlInputProps}\n        disabled={disabled}\n        error={error}\n        warning={warning}\n        onChange={handleChange}\n        value={inputValue}\n        onFocus={(event: React.FocusEvent<HTMLInputElement>) => {\n          setFocus(true);\n          htmlInputProps.onFocus && htmlInputProps.onFocus(event);\n        }}\n        onBlur={(event: React.FocusEvent<HTMLInputElement>) => {\n          setFocus(false);\n          htmlInputProps.onBlur && htmlInputProps.onBlur(event);\n        }}\n      />\n      {clearable && inputValue && (\n        <FlexBox alignItems={\"center\"} mr={7}>\n          <ClearableButtonUnstyled onClick={handleClear}>\n            <CircledCrossSolidMedium size={18} color={\"neutral.c50\"} />\n          </ClearableButtonUnstyled>\n        </FlexBox>\n      )}\n      {typeof renderRight === \"function\" ? renderRight(props) : renderRight}\n    </>\n  );\n\n  if (unwrapped) {\n    return (\n      <FlexBox alignItems=\"stretch\" style={{ height: \"100%\" }}>\n        {inner}\n      </FlexBox>\n    );\n  }\n\n  return (\n    <div>\n      <InputContainer\n        disabled={disabled}\n        focus={focus}\n        error={error}\n        warning={warning}\n        {...containerProps}\n      >\n        {inner}\n      </InputContainer>\n      {(error || warning) && !disabled && (\n        <FlexBox flexDirection=\"column\" rowGap={2} mt={2}>\n          {error && <InputErrorContainer variant=\"small\">{error}</InputErrorContainer>}\n          {warning && <InputWarningContainer variant=\"small\">{warning}</InputWarningContainer>}\n        </FlexBox>\n      )}\n    </div>\n  );\n}\n\nexport default React.forwardRef(Input) as <T>(\n  props: InputProps<T> & { ref?: React.ForwardedRef<HTMLInputElement> },\n) => ReturnType<typeof Input>;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import styled, { css } from \"styled-components\";\nimport { typography, TypographyProps } from \"styled-system\";\nimport React, { InputHTMLAttributes, useState, useMemo, useCallback } from \"react\";\nimport CircledCrossSolidMedium from \"@ledgerhq/icons-ui/react/CircledCrossSolidMedium\";\nimport FlexBox from \"../../layout/Flex\";\nimport Text from \"../../asorted/Text\";\nimport { rgba } from \"../../../styles/helpers\";\nimport { ButtonUnstyled } from \"../../cta/Button\";\n\ntype ValueType = HTMLInputElement[\"value\"];\n\nexport type CommonProps = InputHTMLAttributes<HTMLInputElement> &\n  TypographyProps & {\n    disabled?: boolean;\n    error?: string;\n    warning?: string;\n  };\n\nexport type InputProps<T = ValueType> = Omit<CommonProps, \"value\" | \"onChange\"> & {\n  value: T;\n  onChange?: (value: T) => void;\n  onChangeEvent?: InputHTMLAttributes<HTMLInputElement>[\"onChange\"];\n  renderLeft?: ((props: InputProps<T>) => React.ReactNode) | React.ReactNode;\n  renderRight?: ((props: InputProps<T>) => React.ReactNode) | React.ReactNode;\n  unwrapped?: boolean;\n  containerProps?: InputContainerProps;\n  clearable?: boolean;\n  /**\n   * A function can be provided to serialize a value of any type to a string.\n   *\n   * This can be useful to wrap the `<BaseInput />` component (which expects a string)\n   * and create higher-level components that will automatically perform the input/output\n   * conversion to other types.\n   *\n   * *A serializer function should always be used in conjunction with a deserializer function.*\n   */\n  serialize?: (value: T) => ValueType;\n  /**\n   * A deserializer can be provided to convert the html input value from a string to any other type.\n   *\n   * *A deserializer function should always be used in conjunction with a serializer function.*\n   */\n  deserialize?: (value: ValueType) => T;\n};\n\nexport type InputContainerProps = React.ComponentProps<typeof InputContainer>;\nexport const InputContainer = styled.div<Partial<CommonProps> & { focus?: boolean }>`\n  display: flex;\n  height: 48px;\n  border: ${(p) => `1px solid ${p.theme.colors.neutral.c40}`};\n  border-radius: 24px;\n  transition: all 0.2s ease;\n  color: ${(p) => p.theme.colors.neutral.c100};\n\n  ${(p) =>\n    p.focus &&\n    !p.error &&\n    !p.warning &&\n    css`\n      border: 1px solid ${p.theme.colors.primary.c80};\n      box-shadow: 0 0 0 4px ${rgba(p.theme.colors.primary.c60, 0.4)};\n    `};\n\n  ${(p) =>\n    p.error &&\n    !p.disabled &&\n    css`\n      border: 1px solid ${p.theme.colors.error.c100};\n    `};\n\n  ${(p) =>\n    !p.error &&\n    p.warning &&\n    !p.disabled &&\n    css`\n      border: 1px solid ${p.theme.colors.warning.c80};\n    `};\n\n  ${(p) =>\n    !p.error &&\n    !p.warning &&\n    !p.disabled &&\n    css`\n      &:hover {\n        border: ${!p.disabled && `1px solid ${p.theme.colors.primary.c80}`};\n      }\n    `};\n\n  ${(p) =>\n    p.disabled &&\n    css`\n      color: ${p.theme.colors.neutral.c60};\n      background: ${(p) => p.theme.colors.neutral.c20};\n    `};\n`;\n\nexport const BaseInput = styled.input.attrs<\n  Partial<CommonProps> & { focus?: boolean } & TypographyProps\n>({\n  fontSize: \"paragraph\",\n  fontWeight: \"medium\",\n})<Partial<CommonProps> & { focus?: boolean } & TypographyProps>`\n  height: 100%;\n  width: 100%;\n  border: 0;\n  caret-color: ${(p) => (p.error ? p.theme.colors.error.c100 : p.theme.colors.primary.c80)};\n  background: none;\n  outline: none;\n  cursor: ${(p) => (p.disabled ? \"not-allowed\" : \"text\")};\n  flex-shrink: 1;\n  padding-top: 14px;\n  padding-bottom: 14px;\n  padding-left: 20px;\n  padding-right: 20px;\n  &::placeholder {\n    color: ${(p) => (p.disabled ? p.theme.colors.neutral.c50 : p.theme.colors.neutral.c70)};\n  }\n\n  /* stylelint-disable property-no-vendor-prefix */\n\n  /* Hide type=number arrow for Chrome, Safari, Edge, Opera */\n  &::-webkit-outer-spin-button,\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n\n  /* Hide type=number arrow for Firefox */\n  &[type=\"number\"] {\n    -moz-appearance: textfield;\n  }\n  /* stylelint-enable property-no-vendor-prefix */\n\n  ${typography}\n`;\n\nexport const InputErrorContainer = styled(Text)`\n  color: ${(p) => p.theme.colors.error.c100};\n  margin-left: 12px;\n`;\nexport const InputWarningContainer = styled(Text)`\n  color: ${(p) => p.theme.colors.warning.c80};\n  margin-left: 12px;\n`;\n\nexport const InputRenderLeftContainer = styled(FlexBox).attrs(() => ({\n  alignItems: \"center\",\n  pl: \"16px\",\n}))``;\n\nexport const InputRenderRightContainer = styled(FlexBox).attrs(() => ({\n  alignItems: \"center\",\n  pr: \"16px\",\n}))``;\n\nexport const ClearableButtonUnstyled = styled(ButtonUnstyled)`\n  display: flex;\n`;\n\n// Yes, this is dirty. If you can figure out a better way please change the code :).\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst IDENTITY = (_: any): any => _;\n\nfunction Input<T = ValueType>(\n  props: InputProps<T>,\n  ref?: React.ForwardedRef<HTMLInputElement>,\n): JSX.Element {\n  const {\n    value,\n    disabled,\n    error,\n    warning,\n    onChange,\n    onChangeEvent,\n    renderLeft,\n    renderRight,\n    unwrapped,\n    containerProps,\n    serialize = IDENTITY,\n    deserialize = IDENTITY,\n    clearable,\n    ...htmlInputProps\n  } = props;\n  const [focus, setFocus] = useState(false);\n  const inputValue = useMemo(() => serialize(value), [serialize, value]);\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      onChange && onChange(deserialize(e.target.value));\n      onChangeEvent && onChangeEvent(e);\n    },\n    [onChange, onChangeEvent, deserialize],\n  );\n\n  const handleClear = useCallback(() => {\n    onChange && onChange(deserialize(\"\"));\n  }, [onChange, deserialize]);\n\n  const inner = (\n    <>\n      {typeof renderLeft === \"function\" ? renderLeft(props) : renderLeft}\n      <BaseInput\n        ref={ref}\n        {...htmlInputProps}\n        disabled={disabled}\n        error={error}\n        warning={warning}\n        onChange={handleChange}\n        value={inputValue}\n        onFocus={(event: React.FocusEvent<HTMLInputElement>) => {\n          setFocus(true);\n          htmlInputProps.onFocus && htmlInputProps.onFocus(event);\n        }}\n        onBlur={(event: React.FocusEvent<HTMLInputElement>) => {\n          setFocus(false);\n          htmlInputProps.onBlur && htmlInputProps.onBlur(event);\n        }}\n      />\n      {clearable && inputValue && (\n        <FlexBox alignItems={\"center\"} mr={7}>\n          <ClearableButtonUnstyled onClick={handleClear}>\n            <CircledCrossSolidMedium size={18} color={\"neutral.c50\"} />\n          </ClearableButtonUnstyled>\n        </FlexBox>\n      )}\n      {typeof renderRight === \"function\" ? renderRight(props) : renderRight}\n    </>\n  );\n\n  if (unwrapped) {\n    return (\n      <FlexBox alignItems=\"stretch\" style={{ height: \"100%\" }}>\n        {inner}\n      </FlexBox>\n    );\n  }\n\n  return (\n    <div>\n      <InputContainer\n        disabled={disabled}\n        focus={focus}\n        error={error}\n        warning={warning}\n        {...containerProps}\n      >\n        {inner}\n      </InputContainer>\n      {(error || warning) && !disabled && (\n        <FlexBox flexDirection=\"column\" rowGap={2} mt={2}>\n          {error && <InputErrorContainer variant=\"small\">{error}</InputErrorContainer>}\n          {warning && <InputWarningContainer variant=\"small\">{warning}</InputWarningContainer>}\n        </FlexBox>\n      )}\n    </div>\n  );\n}\n\nexport default React.forwardRef(Input) as <T>(\n  props: InputProps<T> & { ref?: React.ForwardedRef<HTMLInputElement> },\n) => ReturnType<typeof Input>;\n"],
+  "mappings": "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",
   "names": []
 }

package/lib/cjs/components/form/Radio/RadioElement.js

@@ -31,6 +31,7 @@ var import_Text = __toModule(require("../../asorted/Text"));
 var import_index = __toModule(require("./index"));
 const Label = (0, import_styled_components.default)(import_Text.default)`
   color: var(--ledger-ui-checkbox-color, ${(p) => p.theme.colors.neutral.c100});
+  width: 266px;
 `;
 const Input = import_styled_components.default.input`
   --ledger-ui-checkbox-color: ${(p) => p.theme.colors.neutral.c50};

package/lib/cjs/components/form/Radio/RadioElement.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/form/Radio/RadioElement.tsx"],
-  "sourcesContent": ["import React, { InputHTMLAttributes, useContext, useMemo } from \"react\";\nimport styled, { css } from \"styled-components\";\n\nimport { rgba } from \"../../../styles/helpers\";\nimport Text from \"../../asorted/Text\";\nimport { RadioContext } from \"./index\";\n\nconst Label = styled(Text)`\n  color: var(--ledger-ui-checkbox-color, ${(p) => p.theme.colors.neutral.c100});\n`;\n\nconst Input = styled.input`\n  --ledger-ui-checkbox-color: ${(p) => p.theme.colors.neutral.c50};\n  --ledger-ui-checkbox-size: 1.25rem;\n\n  position: relative;\n  appearance: none;\n  width: var(--ledger-ui-checkbox-size);\n  height: var(--ledger-ui-checkbox-size);\n  flex-shrink: 0;\n  border-radius: ${(p) => `${p.theme.radii[1]}px`};\n  border: 1px solid var(--ledger-ui-checkbox-color);\n  cursor: pointer;\n\n  &:checked::before {\n    position: absolute;\n    display: block;\n    content: \" \";\n    background-color: var(--ledger-ui-checkbox-color);\n    left: 0;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    margin: auto;\n    border-radius: 2px;\n    width: calc(var(--ledger-ui-checkbox-size) / 2);\n    height: calc(var(--ledger-ui-checkbox-size) / 2);\n  }\n\n  &[data-variant=\"default\"] {\n    :hover {\n      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.primary.c90};\n    }\n    :active {\n      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.primary.c100};\n    }\n    :checked,\n    :focus {\n      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.primary.c80};\n    }\n    :focus {\n      box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.primary.c60, 0.48)};\n    }\n  }\n\n  &[data-variant=\"main\"] {\n    :hover {\n      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.neutral.c90};\n    }\n    :active,\n    :checked,\n    :focus {\n      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.neutral.c100};\n    }\n    :focus {\n      box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.neutral.c60, 0.48)};\n    }\n  }\n\n  &[data-variant=\"success\"] {\n    :hover,\n    :checked:not([disabled]),\n    :checked:not([disabled]) + ${Label}, :focus {\n      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.success.c100};\n    }\n    :focus {\n      box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.success.c100, 0.48)};\n    }\n  }\n\n  &[data-variant=\"error\"] {\n    :hover,\n    :checked:not([disabled]),\n    :checked:not([disabled]) + ${Label}, :focus {\n      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.error.c100};\n    }\n    :focus {\n      box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.error.c100, 0.48)};\n    }\n  }\n\n  &[data-variant]:disabled {\n    --ledger-ui-checkbox-color: ${(p) => p.theme.colors.neutral.c40};\n    cursor: unset;\n    background-color: ${(p) => p.theme.colors.neutral.c30};\n  }\n`;\n\nconst outlinedCSS = css`\n  padding: 20px;\n  border: 1px solid ${(p) => p.theme.colors.neutral.c50};\n  border-radius: ${(p) => p.theme.radii[2]}px;\n  &[data-variant=\"default\"] {\n    :hover {\n      border-color: ${(p) => p.theme.colors.primary.c90};\n    }\n    &[data-checked] :active {\n      border-color: ${(p) => p.theme.colors.primary.c100};\n    }\n    :focus {\n      border-color: ${(p) => p.theme.colors.primary.c80};\n    }\n  }\n\n  &[data-variant=\"main\"] {\n    :hover {\n      border-color: ${(p) => p.theme.colors.neutral.c90};\n    }\n    &[data-checked],\n    :active :focus {\n      border-color: ${(p) => p.theme.colors.neutral.c100};\n    }\n  }\n\n  &[data-variant=\"success\"] {\n    &[data-checked]:not([disabled]) {\n      border-color: ${(p) => p.theme.colors.success.c100};\n    }\n    :hover {\n      border-color: ${(p) => p.theme.colors.success.c100};\n    }\n  }\n\n  &[data-variant=\"error\"] {\n    &[data-checked]:not([disabled]) {\n      border-color: ${(p) => p.theme.colors.error.c100};\n    }\n    :hover {\n      border-color: ${(p) => p.theme.colors.error.c100};\n    }\n  }\n\n  &[data-variant]:disabled {\n    border-color: ${(p) => p.theme.colors.neutral.c40};\n    cursor: unset;\n  }\n`;\n\nconst RadioElement = styled.label.attrs({ tabIndex: -1 })<{\n  outlined?: boolean;\n}>`\n  display: inline-flex;\n  column-gap: 0.75rem;\n  align-items: center;\n  cursor: pointer;\n  &[data-variant]:disabled {\n    cursor: unset;\n  }\n  ${(p) => p.outlined && outlinedCSS}\n`;\n\ntype InputAttributes = Omit<InputHTMLAttributes<HTMLInputElement>, \"type\" | \"onChange\" | \"name\">;\n\nexport type RadioElementProps = InputAttributes & {\n  variant?: \"default\" | \"main\" | \"success\" | \"error\";\n  label: string;\n  outlined?: boolean;\n};\n\nconst Element = ({\n  label,\n  value,\n  disabled,\n  outlined,\n  variant = \"default\",\n  ...props\n}: RadioElementProps): JSX.Element => {\n  const context = useContext(RadioContext);\n  if (context === undefined) throw new Error(\"RadioElement must be used within a RadioProvider\");\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const isChecked = useMemo(() => context.currentValue === value, [context.currentValue]);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    context.onChange(event.target.value);\n  };\n\n  return (\n    <RadioElement\n      data-variant={variant}\n      {...(isChecked ? { \"data-checked\": true } : {})}\n      outlined={outlined}\n    >\n      <Input\n        type=\"radio\"\n        data-variant={variant}\n        checked={isChecked}\n        disabled={disabled}\n        onChange={handleChange}\n        value={value}\n        name={context.name}\n        {...props}\n      />\n      <Label variant=\"paragraph\">{label}</Label>\n    </RadioElement>\n  );\n};\n\nElement.displayName = \"Radio.Element\"; // For easy identification in the React devtools & in storybook\n\nexport default Element;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { InputHTMLAttributes, useContext, useMemo } from \"react\";\nimport styled, { css } from \"styled-components\";\n\nimport { rgba } from \"../../../styles/helpers\";\nimport Text from \"../../asorted/Text\";\nimport { RadioContext } from \"./index\";\n\nconst Label = styled(Text)`\n  color: var(--ledger-ui-checkbox-color, ${(p) => p.theme.colors.neutral.c100});\n  width: 266px;\n`;\n\nconst Input = styled.input`\n  --ledger-ui-checkbox-color: ${(p) => p.theme.colors.neutral.c50};\n  --ledger-ui-checkbox-size: 1.25rem;\n\n  position: relative;\n  appearance: none;\n  width: var(--ledger-ui-checkbox-size);\n  height: var(--ledger-ui-checkbox-size);\n  flex-shrink: 0;\n  border-radius: ${(p) => `${p.theme.radii[1]}px`};\n  border: 1px solid var(--ledger-ui-checkbox-color);\n  cursor: pointer;\n\n  &:checked::before {\n    position: absolute;\n    display: block;\n    content: \" \";\n    background-color: var(--ledger-ui-checkbox-color);\n    left: 0;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    margin: auto;\n    border-radius: 2px;\n    width: calc(var(--ledger-ui-checkbox-size) / 2);\n    height: calc(var(--ledger-ui-checkbox-size) / 2);\n  }\n\n  &[data-variant=\"default\"] {\n    :hover {\n      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.primary.c90};\n    }\n    :active {\n      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.primary.c100};\n    }\n    :checked,\n    :focus {\n      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.primary.c80};\n    }\n    :focus {\n      box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.primary.c60, 0.48)};\n    }\n  }\n\n  &[data-variant=\"main\"] {\n    :hover {\n      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.neutral.c90};\n    }\n    :active,\n    :checked,\n    :focus {\n      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.neutral.c100};\n    }\n    :focus {\n      box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.neutral.c60, 0.48)};\n    }\n  }\n\n  &[data-variant=\"success\"] {\n    :hover,\n    :checked:not([disabled]),\n    :checked:not([disabled]) + ${Label}, :focus {\n      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.success.c100};\n    }\n    :focus {\n      box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.success.c100, 0.48)};\n    }\n  }\n\n  &[data-variant=\"error\"] {\n    :hover,\n    :checked:not([disabled]),\n    :checked:not([disabled]) + ${Label}, :focus {\n      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.error.c100};\n    }\n    :focus {\n      box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.error.c100, 0.48)};\n    }\n  }\n\n  &[data-variant]:disabled {\n    --ledger-ui-checkbox-color: ${(p) => p.theme.colors.neutral.c40};\n    cursor: unset;\n    background-color: ${(p) => p.theme.colors.neutral.c30};\n  }\n`;\n\nconst outlinedCSS = css`\n  padding: 20px;\n  border: 1px solid ${(p) => p.theme.colors.neutral.c50};\n  border-radius: ${(p) => p.theme.radii[2]}px;\n  &[data-variant=\"default\"] {\n    :hover {\n      border-color: ${(p) => p.theme.colors.primary.c90};\n    }\n    &[data-checked] :active {\n      border-color: ${(p) => p.theme.colors.primary.c100};\n    }\n    :focus {\n      border-color: ${(p) => p.theme.colors.primary.c80};\n    }\n  }\n\n  &[data-variant=\"main\"] {\n    :hover {\n      border-color: ${(p) => p.theme.colors.neutral.c90};\n    }\n    &[data-checked],\n    :active :focus {\n      border-color: ${(p) => p.theme.colors.neutral.c100};\n    }\n  }\n\n  &[data-variant=\"success\"] {\n    &[data-checked]:not([disabled]) {\n      border-color: ${(p) => p.theme.colors.success.c100};\n    }\n    :hover {\n      border-color: ${(p) => p.theme.colors.success.c100};\n    }\n  }\n\n  &[data-variant=\"error\"] {\n    &[data-checked]:not([disabled]) {\n      border-color: ${(p) => p.theme.colors.error.c100};\n    }\n    :hover {\n      border-color: ${(p) => p.theme.colors.error.c100};\n    }\n  }\n\n  &[data-variant]:disabled {\n    border-color: ${(p) => p.theme.colors.neutral.c40};\n    cursor: unset;\n  }\n`;\n\nconst RadioElement = styled.label.attrs({ tabIndex: -1 })<{\n  outlined?: boolean;\n}>`\n  display: inline-flex;\n  column-gap: 0.75rem;\n  align-items: center;\n  cursor: pointer;\n  &[data-variant]:disabled {\n    cursor: unset;\n  }\n  ${(p) => p.outlined && outlinedCSS}\n`;\n\ntype InputAttributes = Omit<InputHTMLAttributes<HTMLInputElement>, \"type\" | \"onChange\" | \"name\">;\n\nexport type RadioElementProps = InputAttributes & {\n  variant?: \"default\" | \"main\" | \"success\" | \"error\";\n  label: string;\n  outlined?: boolean;\n};\n\nconst Element = ({\n  label,\n  value,\n  disabled,\n  outlined,\n  variant = \"default\",\n  ...props\n}: RadioElementProps): JSX.Element => {\n  const context = useContext(RadioContext);\n  if (context === undefined) throw new Error(\"RadioElement must be used within a RadioProvider\");\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const isChecked = useMemo(() => context.currentValue === value, [context.currentValue]);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    context.onChange(event.target.value);\n  };\n\n  return (\n    <RadioElement\n      data-variant={variant}\n      {...(isChecked ? { \"data-checked\": true } : {})}\n      outlined={outlined}\n    >\n      <Input\n        type=\"radio\"\n        data-variant={variant}\n        checked={isChecked}\n        disabled={disabled}\n        onChange={handleChange}\n        value={value}\n        name={context.name}\n        {...props}\n      />\n      <Label variant=\"paragraph\">{label}</Label>\n    </RadioElement>\n  );\n};\n\nElement.displayName = \"Radio.Element\"; // For easy identification in the React devtools & in storybook\n\nexport default Element;\n"],
+  "mappings": "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",
   "names": []
 }

package/lib/cjs/components/message/Tooltip/styles.js

@@ -45,6 +45,19 @@ var styles_default = import_styled_components.css`
     transition-property: transform, visibility, opacity;
   }
 
+  .tippy-arrow {
+    width: 16px;
+    height: 16px;
+    color: ${(p) => p.theme.colors.neutral.c100};
+  }
+
+  .tippy-arrow:before {
+    content: "";
+    position: absolute;
+    border-color: transparent;
+    border-style: solid;
+  }
+
   .tippy-box[data-placement^="top"] > .tippy-arrow {
     bottom: 0;
   }
@@ -95,19 +108,6 @@ var styles_default = import_styled_components.css`
     transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
   }
 
-  .tippy-arrow {
-    width: 16px;
-    height: 16px;
-    color: ${(p) => p.theme.colors.neutral.c100};
-  }
-
-  .tippy-arrow:before {
-    content: "";
-    position: absolute;
-    border-color: transparent;
-    border-style: solid;
-  }
-
   .tippy-content {
     position: relative;
     padding: 8px 10px;

package/lib/cjs/components/message/Tooltip/styles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/message/Tooltip/styles.ts"],
-  "sourcesContent": ["import { DefaultTheme, css } from \"styled-components\";\n\ntype Props = { theme: DefaultTheme };\n\nexport default css`\n  .tippy-box[data-animation=\"fade\"][data-state=\"hidden\"] {\n    opacity: 0;\n  }\n\n  [data-tippy-root] {\n    max-width: calc(100vw - 10px);\n  }\n\n  .tippy-box {\n    position: relative;\n    background-color: ${(p: Props) => p.theme.colors.neutral.c100};\n    color: ${(p: Props) => p.theme.colors.neutral.c00};\n    border-radius: 4px;\n    font-size: 14px;\n    line-height: 1.4;\n    outline: 0;\n    transition-property: transform, visibility, opacity;\n  }\n\n  .tippy-box[data-placement^=\"top\"] > .tippy-arrow {\n    bottom: 0;\n  }\n\n  .tippy-box[data-placement^=\"top\"] > .tippy-arrow:before {\n    bottom: -4px;\n    left: 0;\n    border-width: 10px 10px 0;\n    border-top-color: initial;\n    transform-origin: center top;\n  }\n\n  .tippy-box[data-placement^=\"bottom\"] > .tippy-arrow {\n    top: 0;\n  }\n\n  .tippy-box[data-placement^=\"bottom\"] > .tippy-arrow:before {\n    top: -4px;\n    left: 0;\n    border-width: 0 10px 10px;\n    border-bottom-color: initial;\n    transform-origin: center bottom;\n  }\n\n  .tippy-box[data-placement^=\"left\"] > .tippy-arrow {\n    right: 0;\n  }\n\n  .tippy-box[data-placement^=\"left\"] > .tippy-arrow:before {\n    border-width: 10px 0 10px 10px;\n    border-left-color: initial;\n    right: -4px;\n    transform-origin: center left;\n  }\n\n  .tippy-box[data-placement^=\"right\"] > .tippy-arrow {\n    left: 0;\n  }\n\n  .tippy-box[data-placement^=\"right\"] > .tippy-arrow:before {\n    left: -4px;\n    border-width: 10px 10px 10px 0;\n    border-right-color: initial;\n    transform-origin: center right;\n  }\n\n  .tippy-box[data-inertia][data-state=\"visible\"] {\n    transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);\n  }\n\n  .tippy-arrow {\n    width: 16px;\n    height: 16px;\n    color: ${(p: Props) => p.theme.colors.neutral.c100};\n  }\n\n  .tippy-arrow:before {\n    content: \"\";\n    position: absolute;\n    border-color: transparent;\n    border-style: solid;\n  }\n\n  .tippy-content {\n    position: relative;\n    padding: 8px 10px;\n    z-index: 1;\n  }\n`;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,+BAAkC;AAIlC,IAAO,iBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAWS,CAAC,MAAa,EAAE,MAAM,OAAO,QAAQ;AAAA,aAChD,CAAC,MAAa,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aA6DrC,CAAC,MAAa,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import { DefaultTheme, css } from \"styled-components\";\n\ntype Props = { theme: DefaultTheme };\n\nexport default css`\n  .tippy-box[data-animation=\"fade\"][data-state=\"hidden\"] {\n    opacity: 0;\n  }\n\n  [data-tippy-root] {\n    max-width: calc(100vw - 10px);\n  }\n\n  .tippy-box {\n    position: relative;\n    background-color: ${(p: Props) => p.theme.colors.neutral.c100};\n    color: ${(p: Props) => p.theme.colors.neutral.c00};\n    border-radius: 4px;\n    font-size: 14px;\n    line-height: 1.4;\n    outline: 0;\n    transition-property: transform, visibility, opacity;\n  }\n\n  .tippy-arrow {\n    width: 16px;\n    height: 16px;\n    color: ${(p: Props) => p.theme.colors.neutral.c100};\n  }\n\n  .tippy-arrow:before {\n    content: \"\";\n    position: absolute;\n    border-color: transparent;\n    border-style: solid;\n  }\n\n  .tippy-box[data-placement^=\"top\"] > .tippy-arrow {\n    bottom: 0;\n  }\n\n  .tippy-box[data-placement^=\"top\"] > .tippy-arrow:before {\n    bottom: -4px;\n    left: 0;\n    border-width: 10px 10px 0;\n    border-top-color: initial;\n    transform-origin: center top;\n  }\n\n  .tippy-box[data-placement^=\"bottom\"] > .tippy-arrow {\n    top: 0;\n  }\n\n  .tippy-box[data-placement^=\"bottom\"] > .tippy-arrow:before {\n    top: -4px;\n    left: 0;\n    border-width: 0 10px 10px;\n    border-bottom-color: initial;\n    transform-origin: center bottom;\n  }\n\n  .tippy-box[data-placement^=\"left\"] > .tippy-arrow {\n    right: 0;\n  }\n\n  .tippy-box[data-placement^=\"left\"] > .tippy-arrow:before {\n    border-width: 10px 0 10px 10px;\n    border-left-color: initial;\n    right: -4px;\n    transform-origin: center left;\n  }\n\n  .tippy-box[data-placement^=\"right\"] > .tippy-arrow {\n    left: 0;\n  }\n\n  .tippy-box[data-placement^=\"right\"] > .tippy-arrow:before {\n    left: -4px;\n    border-width: 10px 10px 10px 0;\n    border-right-color: initial;\n    transform-origin: center right;\n  }\n\n  .tippy-box[data-inertia][data-state=\"visible\"] {\n    transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);\n  }\n\n  .tippy-content {\n    position: relative;\n    padding: 8px 10px;\n    z-index: 1;\n  }\n`;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,+BAAkC;AAIlC,IAAO,iBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAWS,CAAC,MAAa,EAAE,MAAM,OAAO,QAAQ;AAAA,aAChD,CAAC,MAAa,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAWrC,CAAC,MAAa,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/lib/cjs/components/navigation/progress/ProgressBar/Onboarding.js

@@ -37,7 +37,7 @@ const Bar = import_styled_components.default.div`
   transition: all 600ms linear;
   height: 4px;
   border-radius: 2px;
-  // Disable left/right border radius to match the handler
+  /* Disable left/right border radius to match the handler */
   border-top-${(p) => p.on ? "right" : "left"}-radius: 0;
   border-bottom-${(p) => p.on ? "right" : "left"}-radius: 0;
   flex: ${(p) => p.fill};

package/lib/cjs/components/navigation/progress/ProgressBar/Onboarding.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/components/navigation/progress/ProgressBar/Onboarding.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport Text from \"../../../asorted/Text\";\n\nconst Container = styled.div`\n  display: flex;\n  flex-direction: row;\n  height: 24px;\n  align-items: center;\n`;\n\nconst Bar = styled.div<{ on?: boolean; fill: string | number }>`\n  transition: all 600ms linear;\n  height: 4px;\n  border-radius: 2px;\n  // Disable left/right border radius to match the handler\n  border-top-${(p) => (p.on ? \"right\" : \"left\")}-radius: 0;\n  border-bottom-${(p) => (p.on ? \"right\" : \"left\")}-radius: 0;\n  flex: ${(p) => p.fill};\n  background: ${(p) => (p.on ? p.theme.colors.neutral.c100 : p.theme.colors.neutral.c40)};\n`;\n\nconst Handler = styled.div`\n  transition: all 600ms linear;\n  padding: 4px;\n  background: ${(p) => p.theme.colors.neutral.c100};\n  border-radius: ${(p) => `${p.theme.radii[1]}px`};\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  column-gap: 6px;\n\n  & span.index {\n    display: flex;\n    border-radius: 2px;\n    height: 16px;\n    width: 16px;\n    justify-content: center;\n    align-items: center;\n    color: ${(p) => p.theme.colors.neutral.c100};\n    background: ${(p) => p.theme.colors.neutral.c00};\n  }\n`;\n\ninterface Step {\n  key: string;\n  label: string;\n}\n\nexport type OnboardingProps = {\n  steps: Step[];\n  currentIndex: number;\n};\n\nconst Onboarding = ({ steps, currentIndex }: OnboardingProps): JSX.Element => {\n  const currentStep = steps[currentIndex];\n  const fill = ((currentIndex / (steps.length - 1)) * 100).toFixed(2);\n\n  return (\n    <Container>\n      <Bar on fill={fill} />\n      <Handler key={currentStep.key}>\n        <Text className=\"index\" color=\"neutral.c00\" fontWeight=\"medium\" variant={\"micro\"}>\n          {currentIndex + 1}\n        </Text>\n        <Text color=\"neutral.c00\" fontWeight=\"medium\" textTransform=\"uppercase\" variant={\"micro\"}>\n          {currentStep.label}\n        </Text>\n      </Handler>\n      <Bar fill={100 - Number(fill)} />\n    </Container>\n  );\n};\n\nexport default Onboarding;\n"],
+  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport Text from \"../../../asorted/Text\";\n\nconst Container = styled.div`\n  display: flex;\n  flex-direction: row;\n  height: 24px;\n  align-items: center;\n`;\n\nconst Bar = styled.div<{ on?: boolean; fill: string | number }>`\n  transition: all 600ms linear;\n  height: 4px;\n  border-radius: 2px;\n  /* Disable left/right border radius to match the handler */\n  border-top-${(p) => (p.on ? \"right\" : \"left\")}-radius: 0;\n  border-bottom-${(p) => (p.on ? \"right\" : \"left\")}-radius: 0;\n  flex: ${(p) => p.fill};\n  background: ${(p) => (p.on ? p.theme.colors.neutral.c100 : p.theme.colors.neutral.c40)};\n`;\n\nconst Handler = styled.div`\n  transition: all 600ms linear;\n  padding: 4px;\n  background: ${(p) => p.theme.colors.neutral.c100};\n  border-radius: ${(p) => `${p.theme.radii[1]}px`};\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  column-gap: 6px;\n\n  & span.index {\n    display: flex;\n    border-radius: 2px;\n    height: 16px;\n    width: 16px;\n    justify-content: center;\n    align-items: center;\n    color: ${(p) => p.theme.colors.neutral.c100};\n    background: ${(p) => p.theme.colors.neutral.c00};\n  }\n`;\n\ninterface Step {\n  key: string;\n  label: string;\n}\n\nexport type OnboardingProps = {\n  steps: Step[];\n  currentIndex: number;\n};\n\nconst Onboarding = ({ steps, currentIndex }: OnboardingProps): JSX.Element => {\n  const currentStep = steps[currentIndex];\n  const fill = ((currentIndex / (steps.length - 1)) * 100).toFixed(2);\n\n  return (\n    <Container>\n      <Bar on fill={fill} />\n      <Handler key={currentStep.key}>\n        <Text className=\"index\" color=\"neutral.c00\" fontWeight=\"medium\" variant={\"micro\"}>\n          {currentIndex + 1}\n        </Text>\n        <Text color=\"neutral.c00\" fontWeight=\"medium\" textTransform=\"uppercase\" variant={\"micro\"}>\n          {currentStep.label}\n        </Text>\n      </Handler>\n      <Bar fill={100 - Number(fill)} />\n    </Container>\n  );\n};\n\nexport default Onboarding;\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAiB;AAEjB,MAAM,YAAY,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzB,MAAM,MAAM,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA,eAKJ,CAAC,MAAO,EAAE,KAAK,UAAU;AAAA,kBACtB,CAAC,MAAO,EAAE,KAAK,UAAU;AAAA,UACjC,CAAC,MAAM,EAAE;AAAA,gBACH,CAAC,MAAO,EAAE,KAAK,EAAE,MAAM,OAAO,QAAQ,OAAO,EAAE,MAAM,OAAO,QAAQ;AAAA;AAGpF,MAAM,UAAU,iCAAO;AAAA;AAAA;AAAA,gBAGP,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,mBAC3B,CAAC,MAAM,GAAG,EAAE,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAc9B,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,kBACzB,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAchD,MAAM,aAAa,CAAC,EAAE,OAAO,mBAAiD;AAC5E,QAAM,cAAc,MAAM;AAC1B,QAAM,OAAS,gBAAgB,OAAM,SAAS,KAAM,KAAK,QAAQ;AAEjE,SACE,mDAAC,WAAD,MACE,mDAAC,KAAD;AAAA,IAAK,IAAE;AAAA,IAAC;AAAA,MACR,mDAAC,SAAD;AAAA,IAAS,KAAK,YAAY;AAAA,KACxB,mDAAC,qBAAD;AAAA,IAAM,WAAU;AAAA,IAAQ,OAAM;AAAA,IAAc,YAAW;AAAA,IAAS,SAAS;AAAA,KACtE,eAAe,IAElB,mDAAC,qBAAD;AAAA,IAAM,OAAM;AAAA,IAAc,YAAW;AAAA,IAAS,eAAc;AAAA,IAAY,SAAS;AAAA,KAC9E,YAAY,SAGjB,mDAAC,KAAD;AAAA,IAAK,MAAM,MAAM,OAAO;AAAA;AAAA;AAK9B,IAAO,qBAAQ;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/styles/InvertTheme.tsx"],
-  "sourcesContent": ["import React, { useMemo } from \"react\";\nimport { ThemeProvider, useTheme } from \"styled-components\";\nimport { defaultTheme } from \".\";\nimport { palettes } from \"@ledgerhq/ui-shared\";\nimport V3dDfaultTheme, { Theme } from \"./theme\";\n\nexport type Props = {\n  if?: boolean;\n};\n\nexport const InvertTheme = ({\n  if: condition,\n  children,\n}: React.PropsWithChildren<Props>): React.ReactElement => {\n  const theme = useTheme();\n  const revertTheme = theme.theme === \"light\" ? \"dark\" : \"light\";\n  const newTheme: Theme = useMemo(\n    () => ({\n      ...defaultTheme,\n      colors: { ...palettes[revertTheme], palette: palettes[revertTheme] },\n      theme: revertTheme,\n    }),\n    [revertTheme],\n  );\n\n  return <ThemeProvider theme={condition ? newTheme : theme}>{children}</ThemeProvider>;\n};\n\nexport const InvertThemeV3 = ({ children }: any): React.ReactElement => {\n  const theme = useTheme();\n\n  const v3RevertTheme = theme.theme === \"light\" ? \"dark\" : \"light\";\n  const newTheme: Theme = useMemo(\n    () => ({\n      ...defaultTheme,\n      ...V3dDfaultTheme,\n      colors: {\n        ...defaultTheme.colors,\n        ...palettes[v3RevertTheme],\n        palette: palettes[v3RevertTheme],\n      },\n      theme: v3RevertTheme,\n    }),\n    [v3RevertTheme],\n  );\n  return <ThemeProvider theme={newTheme}>{children}</ThemeProvider>;\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA+B;AAC/B,+BAAwC;AACxC,eAA6B;AAC7B,uBAAyB;AACzB,mBAAsC;AAM/B,MAAM,cAAc,CAAC;AAAA,EAC1B,IAAI;AAAA,EACJ;AAAA,MACwD;AACxD,QAAM,QAAQ;AACd,QAAM,cAAc,MAAM,UAAU,UAAU,SAAS;AACvD,QAAM,WAAkB,0BACtB,MAAO;AAAA,OACF;AAAA,IACH,QAAQ,KAAK,0BAAS,cAAc,SAAS,0BAAS;AAAA,IACtD,OAAO;AAAA,MAET,CAAC;AAGH,SAAO,mDAAC,wCAAD;AAAA,IAAe,OAAO,YAAY,WAAW;AAAA,KAAQ;AAAA;AAGvD,MAAM,gBAAgB,CAAC,EAAE,eAAwC;AACtE,QAAM,QAAQ;AAEd,QAAM,gBAAgB,MAAM,UAAU,UAAU,SAAS;AACzD,QAAM,WAAkB,0BACtB,MAAO;AAAA,OACF;AAAA,OACA;AAAA,IACH,QAAQ;AAAA,SACH,sBAAa;AAAA,SACb,0BAAS;AAAA,MACZ,SAAS,0BAAS;AAAA;AAAA,IAEpB,OAAO;AAAA,MAET,CAAC;AAEH,SAAO,mDAAC,wCAAD;AAAA,IAAe,OAAO;AAAA,KAAW;AAAA;",
+  "sourcesContent": ["import React, { useMemo } from \"react\";\nimport { ThemeProvider, useTheme } from \"styled-components\";\nimport { defaultTheme } from \".\";\nimport { palettes } from \"@ledgerhq/ui-shared\";\nimport V3dDfaultTheme, { Theme } from \"./theme\";\n\nexport type Props = {\n  if?: boolean;\n};\n\nexport const InvertTheme = ({\n  if: condition,\n  children,\n}: React.PropsWithChildren<Props>): React.ReactElement => {\n  const theme = useTheme();\n  const revertTheme = theme.theme === \"light\" ? \"dark\" : \"light\";\n  const newTheme: Theme = useMemo(\n    () => ({\n      ...defaultTheme,\n      colors: { ...palettes[revertTheme], palette: palettes[revertTheme] },\n      theme: revertTheme,\n    }),\n    [revertTheme],\n  );\n\n  return <ThemeProvider theme={condition ? newTheme : theme}>{children}</ThemeProvider>;\n};\n\nexport const InvertThemeV3 = ({ children }: any): React.ReactElement => {\n  const theme = useTheme();\n  const v3RevertTheme = theme.theme === \"light\" ? \"dark\" : \"light\";\n  const newTheme: Theme = useMemo(\n    () => ({\n      ...defaultTheme,\n      ...V3dDfaultTheme,\n      colors: {\n        ...defaultTheme.colors,\n        ...palettes[v3RevertTheme],\n        palette: palettes[v3RevertTheme],\n      },\n      theme: v3RevertTheme,\n    }),\n    [v3RevertTheme],\n  );\n  return <ThemeProvider theme={newTheme}>{children}</ThemeProvider>;\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA+B;AAC/B,+BAAwC;AACxC,eAA6B;AAC7B,uBAAyB;AACzB,mBAAsC;AAM/B,MAAM,cAAc,CAAC;AAAA,EAC1B,IAAI;AAAA,EACJ;AAAA,MACwD;AACxD,QAAM,QAAQ;AACd,QAAM,cAAc,MAAM,UAAU,UAAU,SAAS;AACvD,QAAM,WAAkB,0BACtB,MAAO;AAAA,OACF;AAAA,IACH,QAAQ,KAAK,0BAAS,cAAc,SAAS,0BAAS;AAAA,IACtD,OAAO;AAAA,MAET,CAAC;AAGH,SAAO,mDAAC,wCAAD;AAAA,IAAe,OAAO,YAAY,WAAW;AAAA,KAAQ;AAAA;AAGvD,MAAM,gBAAgB,CAAC,EAAE,eAAwC;AACtE,QAAM,QAAQ;AACd,QAAM,gBAAgB,MAAM,UAAU,UAAU,SAAS;AACzD,QAAM,WAAkB,0BACtB,MAAO;AAAA,OACF;AAAA,OACA;AAAA,IACH,QAAQ;AAAA,SACH,sBAAa;AAAA,SACb,0BAAS;AAAA,MACZ,SAAS,0BAAS;AAAA;AAAA,IAEpB,OAAO;AAAA,MAET,CAAC;AAEH,SAAO,mDAAC,wCAAD;AAAA,IAAe,OAAO;AAAA,KAAW;AAAA;",
   "names": []
 }

package/lib/cjs/styles/global.js

@@ -34,7 +34,7 @@ const GlobalStyle = import_styled_components.createGlobalStyle`
   }
 
   body {
-    font-family: Inter;
+    font-family: Inter, sans-serif;
     font-size: 100%;
   }
 

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  ::-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"],
+  "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, sans-serif;\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/components/asorted/Icon/CryptoIcon.d.ts

@@ -4,7 +4,11 @@ export declare type Props = {
     size?: number;
     color?: string;
     backgroundColor?: string;
+    circleIcon?: boolean;
+    disabled?: boolean;
+    tokenIcon?: string;
+    fallbackIcon?: JSX.Element;
 };
 export declare const iconNames: string[];
-declare const CryptoIcon: ({ name, size, color, backgroundColor }: Props) => JSX.Element | null;
+declare const CryptoIcon: ({ name, size, color, backgroundColor, circleIcon, disabled, tokenIcon, fallbackIcon, }: Props) => JSX.Element;
 export default CryptoIcon;

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

@@ -1,23 +1,77 @@
 import * as icons from "@ledgerhq/crypto-icons-ui/react";
 import React from "react";
 import { ensureContrast } from "../../../styles";
-import { useTheme } from "styled-components";
+import styled, { useTheme } from "styled-components";
+import Text from "../Text/index";
+import Flex from "../../layout/Flex";
 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 Container = styled(Flex).attrs((p) => ({
+    heigth: p.size,
+    width: p.size,
+    alignItems: "center",
+    justifyContent: "center",
+    position: "relative",
+})) ``;
+const Circle = styled(Flex).attrs((p) => ({
+    heigth: p.size,
+    width: p.size,
+    alignItems: "center",
+    justifyContent: "center",
+    position: "relative",
+    borderRadius: "50%",
+    backgroundColor: p.backgroundColor,
+})) ``;
+const TokenContainer = styled(Flex).attrs((p) => ({
+    position: "absolute",
+    bottom: "-2px",
+    right: "-5px",
+    alignItems: "center",
+    justifyContent: "center",
+    heigth: p.size,
+    width: p.size,
+    borderRadius: "50%",
+    border: `2px solid ${p.borderColor}`,
+    backgroundColor: p.backgroundColor,
+    zIndex: 0,
+})) ``;
+function Fallback({ name }) {
+    return (React.createElement(Text, { uppercase: true, color: "neutral.c70" }, name.slice(0, 1)));
+}
+const IconBox = ({ children, color, backgroundColor, disabled, size = 16, tokenIcon = "", }) => {
+    const { colors } = useTheme();
+    if (tokenIcon in icons) {
+        // @ts-expect-error FIXME I don't know how to make you happy ts
+        const Component = icons[tokenIcon];
+        const defaultColor = Component.DefaultColor;
+        const iconColor = disabled ? colors.neutral.c70 : color || defaultColor;
+        const contrastedColor = ensureContrast(iconColor, backgroundColor || colors.background.main);
+        return (React.createElement(Container, { size: size },
+            children,
+            tokenIcon && (React.createElement(TokenContainer, { size: size / 3, borderColor: colors.background.main, backgroundColor: contrastedColor },
+                React.createElement(Component, { size: size, color: colors.background.main })))));
+    }
+    return children;
+};
+const CryptoIcon = ({ name, size = 16, color, backgroundColor, circleIcon, disabled, tokenIcon, fallbackIcon, }) => {
     const { colors } = useTheme();
+    const maybeIconName = `${name}`;
     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 });
+        const iconColor = disabled ? colors.neutral.c70 : color || defaultColor;
+        const contrastedColor = ensureContrast(iconColor, backgroundColor || colors.background.main);
+        return (React.createElement(IconBox, { size: size, tokenIcon: tokenIcon, color: color, disabled: disabled, name: name }, tokenIcon || circleIcon ? (React.createElement(Circle, { backgroundColor: contrastedColor, size: size },
+            React.createElement(Component, { size: size, color: colors.background.main }))) : (React.createElement(Component, { size: size, color: contrastedColor }))));
+    }
+    if (fallbackIcon) {
+        return fallbackIcon;
     }
-    return null;
+    return React.createElement(Fallback, { name: name });
 };
 export default CryptoIcon;

package/lib/components/cards/Carousel/Slide.js

@@ -5,10 +5,9 @@ import Flex from "../../layout/Flex";
 const Wrapper = styled(Flex) `
   width: 100%;
   height: 100%;
-  background: gray;
   flex-direction: column;
   padding: ${(p) => p.theme.space[8]}px ${(p) => p.theme.space[10]}px;
-  padding-right: 280px; // Nb gives air to not overlap the illustration
+  padding-right: 280px; /* Nb gives air to not overlap the illustration */
   z-index: ${(p) => p.theme.zIndexes[8]};
   background: url(${(p) => p.image}) no-repeat ${(p) => p.theme.colors.neutral.c100};
   background-size: contain;

package/lib/components/cta/Button/index.d.ts

@@ -14,6 +14,7 @@ interface BaseProps extends BaseStyledProps, BordersProps {
     iconPosition?: IconPosition;
     iconButton?: boolean;
     disabled?: boolean;
+    whiteSpace?: string;
 }
 export interface ButtonProps extends BaseProps, React.RefAttributes<HTMLButtonElement> {
     iconName?: string;
@@ -36,7 +37,7 @@ declare const ButtonWithRef: {
     Unstyled: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
     Expand: React.ForwardRefExoticComponent<Pick<ButtonProps & {
         onToggle?: ((arg0: boolean) => void) | undefined;
-    }, "overflow" | "p" | "style" | "key" | "color" | "children" | "onClick" | "variant" | "size" | "rowGap" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontSize" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "top" | "verticalAlign" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "margin" | "outline" | "padding" | "disabled" | "onToggle" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "bg" | "borderX" | "borderY" | "Icon" | "iconSize" | "ff" | "iconPosition" | "iconButton" | "iconName"> & React.RefAttributes<HTMLButtonElement>>;
+    }, "overflow" | "p" | "style" | "key" | "color" | "children" | "onClick" | "variant" | "size" | "rowGap" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontSize" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "top" | "verticalAlign" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "margin" | "outline" | "padding" | "disabled" | "onToggle" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "bg" | "borderX" | "borderY" | "Icon" | "iconSize" | "ff" | "iconPosition" | "iconButton" | "iconName"> & React.RefAttributes<HTMLButtonElement>>;
 };
 export declare type ButtonExpandProps = React.PropsWithChildren<ButtonProps & {
     onToggle?: (arg0: boolean) => void;

package/lib/components/cta/Button/index.js

@@ -149,7 +149,7 @@ export const Base = baseStyled.button.attrs((p) => {
   overflow: hidden;
   ${(p) => buttonSizeStyle[p.size || "medium"]}
   text-overflow: ellipsis;
-  white-space: nowrap;
+  white-space: ${(p) => (p.whiteSpace ? p.whiteSpace : "nowrap")};
   max-width: 100%;
   position: relative;
   cursor: ${(p) => (p.disabled ? "default" : "pointer")};

package/lib/components/form/BaseInput/index.js

@@ -81,6 +81,8 @@ export const BaseInput = styled.input.attrs({
     color: ${(p) => (p.disabled ? p.theme.colors.neutral.c50 : p.theme.colors.neutral.c70)};
   }
 
+  /* stylelint-disable property-no-vendor-prefix */
+
   /* Hide type=number arrow for Chrome, Safari, Edge, Opera */
   &::-webkit-outer-spin-button,
   ::-webkit-inner-spin-button {
@@ -92,6 +94,7 @@ export const BaseInput = styled.input.attrs({
   &[type="number"] {
     -moz-appearance: textfield;
   }
+  /* stylelint-enable property-no-vendor-prefix */
 
   ${typography}
 `;

package/lib/components/form/Radio/RadioElement.js

@@ -16,6 +16,7 @@ import Text from "../../asorted/Text";
 import { RadioContext } from "./index";
 const Label = styled(Text) `
   color: var(--ledger-ui-checkbox-color, ${(p) => p.theme.colors.neutral.c100});
+  width: 266px;
 `;
 const Input = styled.input `
   --ledger-ui-checkbox-color: ${(p) => p.theme.colors.neutral.c50};

package/lib/components/message/Tooltip/styles.js

@@ -19,6 +19,19 @@ export default css `
     transition-property: transform, visibility, opacity;
   }
 
+  .tippy-arrow {
+    width: 16px;
+    height: 16px;
+    color: ${(p) => p.theme.colors.neutral.c100};
+  }
+
+  .tippy-arrow:before {
+    content: "";
+    position: absolute;
+    border-color: transparent;
+    border-style: solid;
+  }
+
   .tippy-box[data-placement^="top"] > .tippy-arrow {
     bottom: 0;
   }
@@ -69,19 +82,6 @@ export default css `
     transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
   }
 
-  .tippy-arrow {
-    width: 16px;
-    height: 16px;
-    color: ${(p) => p.theme.colors.neutral.c100};
-  }
-
-  .tippy-arrow:before {
-    content: "";
-    position: absolute;
-    border-color: transparent;
-    border-style: solid;
-  }
-
   .tippy-content {
     position: relative;
     padding: 8px 10px;

package/lib/components/navigation/progress/ProgressBar/Onboarding.js

@@ -11,7 +11,7 @@ const Bar = styled.div `
   transition: all 600ms linear;
   height: 4px;
   border-radius: 2px;
-  // Disable left/right border radius to match the handler
+  /* Disable left/right border radius to match the handler */
   border-top-${(p) => (p.on ? "right" : "left")}-radius: 0;
   border-bottom-${(p) => (p.on ? "right" : "left")}-radius: 0;
   flex: ${(p) => p.fill};

package/lib/styles/global.js

@@ -8,7 +8,7 @@ export const GlobalStyle = createGlobalStyle `
   }
 
   body {
-    font-family: Inter;
+    font-family: Inter, sans-serif;
     font-size: 100%;
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/react-ui",
-  "version": "0.9.0-nightly.0",
+  "version": "0.9.1-nightly.0",
   "description": "Ledger Live - Desktop UI",
   "author": "Ledger Live Team <team-live@ledger.fr>",
   "repository": {
@@ -58,7 +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/crypto-icons-ui": "^0.2.0",
     "@ledgerhq/ui-shared": "^0.1.9",
     "@tippyjs/react": "^4.2.6",
     "@types/color": "^3.0.2",
@@ -112,7 +112,11 @@
     "styled-components": "^5.3.3",
     "tiny-glob": "^0.2.9",
     "typescript": "^4.3.5",
-    "webpack": "*"
+    "webpack": "*",
+    "stylelint": "^14.9.1",
+    "stylelint-config-recommended": "^8.0.0",
+    "stylelint-config-styled-components": "^0.1.1",
+    "stylelint-processor-styled-components": "^1.10.0"
   },
   "scripts": {
     "storybook": "start-storybook -p 6006 -s ./src",
@@ -123,6 +127,7 @@
     "clean": "rimraf lib",
     "lint": "eslint src --ext .js,.jsx,.ts,.tsx --cache",
     "lint:fix": "pnpm lint --fix",
+    "lint:css": "stylelint './src/**/*.{js,jsx,ts,tsx}' --fix",
     "typecheck": "tsc --p . --noEmit",
     "test": "pnpm -w -F ui test:react"
   }