@ledgerhq/react-ui 0.8.2 → 0.9.0-next.0

package/lib/assets/cryptoIcons.d.ts

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

package/lib/assets/cryptoIcons.js

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

package/lib/assets/index.d.ts

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

package/lib/assets/index.js

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

package/lib/cjs/assets/cryptoIcons.js

@@ -0,0 +1,21 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __reExport = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+__markAsModule(exports);
+__reExport(exports, __toModule(require("@ledgerhq/crypto-icons-ui/react")));
+//# sourceMappingURL=cryptoIcons.js.map

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

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

package/lib/cjs/assets/index.js

@@ -22,9 +22,11 @@ var __toModule = (module2) => {
   return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
 };
 __export(exports, {
+  CryptoIcons: () => CryptoIcons,
   Icons: () => Icons,
   Logos: () => Logos
 });
 var Icons = __toModule(require("@ledgerhq/icons-ui/react"));
+var CryptoIcons = __toModule(require("@ledgerhq/crypto-icons-ui/react"));
 var Logos = __toModule(require("./logos"));
 //# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,53 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+__export(exports, {
+  default: () => CryptoIcon_default,
+  iconNames: () => iconNames
+});
+var icons = __toModule(require("@ledgerhq/crypto-icons-ui/react"));
+var import_react = __toModule(require("react"));
+var import_styles = __toModule(require("../../../styles"));
+var import_styled_components = __toModule(require("styled-components"));
+const iconNames = Array.from(Object.keys(icons).reduce((set, rawKey) => {
+  const key = rawKey;
+  if (!set.has(key))
+    set.add(key);
+  return set;
+}, new Set()));
+const CryptoIcon = ({ name, size = 16, color, backgroundColor }) => {
+  const maybeIconName = `${name}`;
+  const { colors } = (0, import_styled_components.useTheme)();
+  if (maybeIconName in icons) {
+    const Component = icons[maybeIconName];
+    const defaultColor = Component.DefaultColor;
+    const contrastedColor = (0, import_styles.ensureContrast)(color || defaultColor, backgroundColor || colors.background.main);
+    return /* @__PURE__ */ import_react.default.createElement(Component, {
+      size,
+      color: contrastedColor
+    });
+  }
+  return null;
+};
+var CryptoIcon_default = CryptoIcon;
+//# sourceMappingURL=CryptoIcon.js.map

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

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

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

@@ -0,0 +1,130 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+__export(exports, {
+  ListCryptoIcons: () => ListCryptoIcons,
+  SingleCryptoIcon: () => SingleCryptoIcon,
+  default: () => CryptoIcons_stories_default
+});
+var import_react = __toModule(require("react"));
+var import_styled_components = __toModule(require("styled-components"));
+var import__ = __toModule(require("../../.."));
+var cryptoIcons = __toModule(require("@ledgerhq/crypto-icons-ui/react"));
+const ScrollArea = (0, import_styled_components.default)(import__.Grid)`
+  flex: 1;
+  height: auto;
+  ${(p) => p.theme.overflow.y};
+`;
+const Container = (0, import_styled_components.default)(import__.Flex).attrs({
+  flex: 1,
+  flexDirection: "column",
+  p: 4
+})`
+  overflow: hidden;
+  height: calc(100vh - 4em);
+`;
+const IconContainer = (0, import_styled_components.default)(import__.Flex).attrs({
+  flexDirection: "column",
+  justifyContent: "flex-end",
+  alignItems: "center",
+  p: 4
+})`
+  ${(p) => p.active ? `background-color: ${p.theme.colors.neutral.c20};` : ``}
+  border-radius: 4px;
+  height: 100px;
+`;
+const Bold = import_styled_components.default.b`
+  color: ${(p) => p.theme.colors.primary.c80};
+`;
+const Story = {
+  title: "Asorted/CryptoIcons",
+  argTypes: {
+    size: {
+      type: "number",
+      description: "Icon size for preview",
+      defaultValue: 32
+    },
+    color: {
+      type: "string",
+      description: "Color",
+      control: { control: "color" }
+    },
+    name: {
+      type: "enum",
+      defaultValue: "BTC",
+      description: "[Only for single icon], Icon name",
+      control: {
+        options: Object.keys(cryptoIcons),
+        control: {
+          type: "select"
+        }
+      }
+    }
+  }
+};
+var CryptoIcons_stories_default = Story;
+const ListTemplate = (args) => {
+  const color = args.color || void 0;
+  const [search, setSearch] = (0, import_react.useState)("");
+  const s = search.toLowerCase();
+  const regexp = new RegExp(s, "i");
+  return /* @__PURE__ */ import_react.default.createElement(Container, null, /* @__PURE__ */ import_react.default.createElement(import__.SearchInput, {
+    value: search,
+    onChange: setSearch
+  }), /* @__PURE__ */ import_react.default.createElement(ScrollArea, {
+    gridTemplateColumns: "repeat(auto-fill, 100px);",
+    gridTemplateRows: "repeat(auto-fill, 100px);",
+    gridGap: 4,
+    mt: 4
+  }, Object.keys(cryptoIcons).sort((a, b) => {
+    return s ? b.toLowerCase().indexOf(s) - a.toLowerCase().indexOf(s) : a.localeCompare(b);
+  }).map((name) => {
+    const match = name.match(regexp);
+    const active = s && match;
+    const index = match?.index ?? 0;
+    return /* @__PURE__ */ import_react.default.createElement(IconContainer, {
+      active: !!active
+    }, /* @__PURE__ */ import_react.default.createElement(import__.Flex, {
+      flex: 1,
+      justifyContent: "center",
+      alignItems: "center"
+    }, /* @__PURE__ */ import_react.default.createElement(import__.CryptoIcon, {
+      key: name,
+      name,
+      size: args.size,
+      color
+    })), /* @__PURE__ */ import_react.default.createElement(import__.Text, {
+      variant: "extraSmall"
+    }, active ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, name.substr(0, index), /* @__PURE__ */ import_react.default.createElement(Bold, null, name.substr(index, s.length)), name.substr(index + s.length)) : name));
+  })));
+};
+const IconTemplate = (args) => {
+  const color = args.color || void 0;
+  return /* @__PURE__ */ import_react.default.createElement(import__.CryptoIcon, {
+    ...args,
+    color
+  });
+};
+const ListCryptoIcons = ListTemplate.bind({});
+const SingleCryptoIcon = IconTemplate.bind({});
+//# sourceMappingURL=CryptoIcons.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/asorted/Icon/CryptoIcons.stories.tsx"],
+  "sourcesContent": ["import React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport { Text, SearchInput, Flex, Grid, CryptoIcon } from \"../../..\";\nimport * as cryptoIcons from \"@ledgerhq/crypto-icons-ui/react\";\n\ntype CryptoIconsProps = {\n  name: keyof typeof cryptoIcons;\n  size?: number;\n  color?: string;\n};\n\nconst ScrollArea = styled(Grid)`\n  flex: 1;\n  height: auto;\n  ${(p) => p.theme.overflow.y};\n`;\n\nconst Container = styled(Flex).attrs({\n  flex: 1,\n  flexDirection: \"column\",\n  p: 4,\n})`\n  overflow: hidden;\n  height: calc(100vh - 4em);\n`;\n\nconst IconContainer = styled(Flex).attrs<{ active?: boolean }>({\n  flexDirection: \"column\",\n  justifyContent: \"flex-end\",\n  alignItems: \"center\",\n  p: 4,\n})<{ active?: boolean }>`\n  ${(p) => (p.active ? `background-color: ${p.theme.colors.neutral.c20};` : ``)}\n  border-radius: 4px;\n  height: 100px;\n`;\n\nconst Bold = styled.b`\n  color: ${(p) => p.theme.colors.primary.c80};\n`;\n\nconst Story = {\n  title: \"Asorted/CryptoIcons\",\n  argTypes: {\n    size: {\n      type: \"number\",\n      description: \"Icon size for preview\",\n      defaultValue: 32,\n    },\n    color: {\n      type: \"string\",\n      description: \"Color\",\n      control: { control: \"color\" },\n    },\n    name: {\n      type: \"enum\",\n      defaultValue: \"BTC\",\n      description: \"[Only for single icon], Icon name\",\n      control: {\n        options: Object.keys(cryptoIcons),\n        control: {\n          type: \"select\",\n        },\n      },\n    },\n  },\n};\nexport default Story;\n\nconst ListTemplate = (args: CryptoIconsProps) => {\n  const color = args.color || undefined;\n  const [search, setSearch] = useState(\"\");\n  const s = search.toLowerCase();\n  const regexp = new RegExp(s, \"i\");\n\n  return (\n    <Container>\n      <SearchInput value={search} onChange={setSearch} />\n      <ScrollArea\n        gridTemplateColumns=\"repeat(auto-fill, 100px);\"\n        gridTemplateRows=\"repeat(auto-fill, 100px);\"\n        gridGap={4}\n        mt={4}\n      >\n        {Object.keys(cryptoIcons)\n          .sort((a, b) => {\n            return s ? b.toLowerCase().indexOf(s) - a.toLowerCase().indexOf(s) : a.localeCompare(b);\n          })\n          // @ts-expect-error FIXME I don't know how to make you happy ts\n          .map((name: keyof typeof cryptoIcons) => {\n            const match = name.match(regexp);\n            const active = s && match;\n            const index = match?.index ?? 0;\n            return (\n              <IconContainer active={!!active}>\n                <Flex flex={1} justifyContent=\"center\" alignItems=\"center\">\n                  <CryptoIcon key={name} name={name} size={args.size} color={color} />\n                </Flex>\n                <Text variant=\"extraSmall\">\n                  {active ? (\n                    <>\n                      {name.substr(0, index)}\n                      <Bold>{name.substr(index, s.length)}</Bold>\n                      {name.substr(index + s.length)}\n                    </>\n                  ) : (\n                    name\n                  )}\n                </Text>\n              </IconContainer>\n            );\n          })}\n      </ScrollArea>\n    </Container>\n  );\n};\nconst IconTemplate = (args: CryptoIconsProps) => {\n  const color = args.color || undefined;\n\n  return <CryptoIcon {...args} color={color} />;\n};\n\nexport const ListCryptoIcons = ListTemplate.bind({});\nexport const SingleCryptoIcon = IconTemplate.bind({});\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,+BAAmB;AACnB,eAA0D;AAC1D,kBAA6B;AAQ7B,MAAM,aAAa,sCAAO;AAAA;AAAA;AAAA,IAGtB,CAAC,MAAM,EAAE,MAAM,SAAS;AAAA;AAG5B,MAAM,YAAY,sCAAO,eAAM,MAAM;AAAA,EACnC,MAAM;AAAA,EACN,eAAe;AAAA,EACf,GAAG;AAAA;AAAA;AAAA;AAAA;AAML,MAAM,gBAAgB,sCAAO,eAAM,MAA4B;AAAA,EAC7D,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,GAAG;AAAA;AAAA,IAED,CAAC,MAAO,EAAE,SAAS,qBAAqB,EAAE,MAAM,OAAO,QAAQ,SAAS;AAAA;AAAA;AAAA;AAK5E,MAAM,OAAO,iCAAO;AAAA,WACT,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAGzC,MAAM,QAAQ;AAAA,EACZ,OAAO;AAAA,EACP,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,aAAa;AAAA,MACb,cAAc;AAAA;AAAA,IAEhB,OAAO;AAAA,MACL,MAAM;AAAA,MACN,aAAa;AAAA,MACb,SAAS,EAAE,SAAS;AAAA;AAAA,IAEtB,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,cAAc;AAAA,MACd,aAAa;AAAA,MACb,SAAS;AAAA,QACP,SAAS,OAAO,KAAK;AAAA,QACrB,SAAS;AAAA,UACP,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAMhB,IAAO,8BAAQ;AAEf,MAAM,eAAe,CAAC,SAA2B;AAC/C,QAAM,QAAQ,KAAK,SAAS;AAC5B,QAAM,CAAC,QAAQ,aAAa,2BAAS;AACrC,QAAM,IAAI,OAAO;AACjB,QAAM,SAAS,IAAI,OAAO,GAAG;AAE7B,SACE,mDAAC,WAAD,MACE,mDAAC,sBAAD;AAAA,IAAa,OAAO;AAAA,IAAQ,UAAU;AAAA,MACtC,mDAAC,YAAD;AAAA,IACE,qBAAoB;AAAA,IACpB,kBAAiB;AAAA,IACjB,SAAS;AAAA,IACT,IAAI;AAAA,KAEH,OAAO,KAAK,aACV,KAAK,CAAC,GAAG,MAAM;AACd,WAAO,IAAI,EAAE,cAAc,QAAQ,KAAK,EAAE,cAAc,QAAQ,KAAK,EAAE,cAAc;AAAA,KAGtF,IAAI,CAAC,SAAmC;AACvC,UAAM,QAAQ,KAAK,MAAM;AACzB,UAAM,SAAS,KAAK;AACpB,UAAM,QAAQ,OAAO,SAAS;AAC9B,WACE,mDAAC,eAAD;AAAA,MAAe,QAAQ,CAAC,CAAC;AAAA,OACvB,mDAAC,eAAD;AAAA,MAAM,MAAM;AAAA,MAAG,gBAAe;AAAA,MAAS,YAAW;AAAA,OAChD,mDAAC,qBAAD;AAAA,MAAY,KAAK;AAAA,MAAM;AAAA,MAAY,MAAM,KAAK;AAAA,MAAM;AAAA,SAEtD,mDAAC,eAAD;AAAA,MAAM,SAAQ;AAAA,OACX,SACC,wFACG,KAAK,OAAO,GAAG,QAChB,mDAAC,MAAD,MAAO,KAAK,OAAO,OAAO,EAAE,UAC3B,KAAK,OAAO,QAAQ,EAAE,WAGzB;AAAA;AAAA;AAUpB,MAAM,eAAe,CAAC,SAA2B;AAC/C,QAAM,QAAQ,KAAK,SAAS;AAE5B,SAAO,mDAAC,qBAAD;AAAA,OAAgB;AAAA,IAAM;AAAA;AAAA;AAGxB,MAAM,kBAAkB,aAAa,KAAK;AAC1C,MAAM,mBAAmB,aAAa,KAAK;",
+  "names": []
+}

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

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

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

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

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

@@ -23,10 +23,12 @@ var __toModule = (module2) => {
 };
 __export(exports, {
   BoxedIcon: () => import_BoxedIcon.default,
+  CryptoIcon: () => import_CryptoIcon.default,
   IconBox: () => import_BoxedIcon.IconBox,
   default: () => import_Icon.default,
   iconNames: () => import_Icon.iconNames
 });
 var import_Icon = __toModule(require("./Icon"));
 var import_BoxedIcon = __toModule(require("./BoxedIcon"));
+var import_CryptoIcon = __toModule(require("./CryptoIcon"));
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/asorted/Icon/index.tsx"],
-  "sourcesContent": ["export { default, iconNames } from \"./Icon\";\nimport BoxedIcon, { IconBox } from \"./BoxedIcon\";\nexport { BoxedIcon, IconBox };\nexport type { Props } from \"./Icon\";\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAmC;AACnC,uBAAmC;",
+  "sourcesContent": ["export { default, iconNames } from \"./Icon\";\nimport BoxedIcon, { IconBox } from \"./BoxedIcon\";\nexport { BoxedIcon, IconBox };\nexport type { Props } from \"./Icon\";\nexport { default as CryptoIcon } from \"./CryptoIcon\";\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAmC;AACnC,uBAAmC;AAGnC,wBAAsC;",
   "names": []
 }

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

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

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

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

package/lib/cjs/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/Button.stories.js

@@ -48,6 +48,10 @@ var Button_stories_default = {
         type: "radio"
       }
     },
+    size: {
+      options: [void 0, "small", "medium", "large"],
+      control: { type: "radio" }
+    },
     fontSize: {
       options: [void 0, 0, 1, 2, 3, 4, 5, 6, 7, 8],
       control: {
@@ -71,7 +75,7 @@ var Button_stories_default = {
     }
   }
 };
-const Overview = (() => {
+const Overview = ((args) => {
   const templateProps = { Icon: import_react2.PlusMedium, children: "Try me", onClick: () => {
   } };
   const propsArr = [
@@ -94,6 +98,7 @@ const Overview = (() => {
     flex: 1,
     columnGap: 4
   }, [false, true].map((disabled) => /* @__PURE__ */ import_react.default.createElement(import_index.default, {
+    size: args.size,
     variant: buttonType,
     outline,
     disabled,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/cta/Button/Button.stories.tsx"],
-  "sourcesContent": ["import React, { Fragment } from \"react\";\nimport Button, { ButtonExpandProps, ButtonProps, ButtonVariants, IconPosition } from \"./index\";\nimport Text from \"../../asorted/Text\";\nimport { PlusMedium, WalletAddMedium } from \"@ledgerhq/icons-ui/react/\";\nimport { InvertTheme } from \"../../../styles/InvertTheme\";\nimport Flex from \"../../layout/Flex\";\nimport Grid from \"../../layout/Grid\";\nimport { StoryTemplate } from \"../../helpers\";\n\nconst iconPositions: IconPosition[] = [\"left\", \"right\"];\nconst buttonVariants: ButtonVariants[] = [\"main\", \"shade\", \"color\", \"error\"];\n\nexport default {\n  title: \"cta/Button\",\n  component: Button,\n  argTypes: {\n    variant: {\n      options: [undefined, ...buttonVariants],\n      control: {\n        type: \"radio\",\n      },\n    },\n    fontSize: {\n      options: [undefined, 0, 1, 2, 3, 4, 5, 6, 7, 8],\n      control: {\n        type: \"radio\",\n      },\n    },\n    children: {\n      type: \"text\",\n    },\n    iconPosition: {\n      options: iconPositions,\n      control: {\n        type: \"radio\",\n      },\n    },\n    disabled: {\n      type: \"boolean\",\n    },\n    outline: {\n      type: \"boolean\",\n    },\n  },\n};\n\nexport const Overview = (() => {\n  const templateProps = { Icon: PlusMedium, children: \"Try me\", onClick: () => {} };\n  const propsArr = [\n    { ...templateProps, Icon: undefined },\n    { ...templateProps, iconPosition: iconPositions[0] },\n    { ...templateProps, iconPosition: iconPositions[1] },\n    { ...templateProps, children: \"\" },\n  ];\n  return (\n    <Grid columns=\"none\" gridTemplateColumns=\"max-content repeat(4, 1fr)\" columnGap={8} rowGap={8}>\n      {buttonVariants.flatMap((buttonType, i) =>\n        [false, true].map((outline, j) => (\n          <Fragment key={`${i}:${j}`}>\n            <Text variant=\"small\" color=\"neutral.c70\">\n              variant=\"{buttonType}\"<br />\n              outline={`{${outline.toString()}}`}\n            </Text>\n            {propsArr.map((buttonProps) => (\n              <Flex flex={1} columnGap={4}>\n                {[false, true].map((disabled) => (\n                  <Button\n                    variant={buttonType}\n                    outline={outline}\n                    disabled={disabled}\n                    {...buttonProps}\n                  />\n                ))}\n              </Flex>\n            ))}\n          </Fragment>\n        )),\n      )}\n    </Grid>\n  );\n}).bind({});\n\nexport const Default: StoryTemplate<ButtonProps> = (args) => {\n  return <Button {...args}>{args.children || \"Regular button\"}</Button>;\n};\n\nexport const Inverted: StoryTemplate<ButtonProps> = (args) => {\n  return (\n    <Flex flexDirection=\"column\">\n      <Flex flex=\"0 0 1\" p={4} alignItems=\"center\" bg=\"background.main\">\n        <Button {...args}>{args.children || \"Regular button\"}</Button>\n      </Flex>\n      <InvertTheme>\n        <Flex flex=\"0 0 1\" p={4} alignItems=\"center\" bg=\"background.main\">\n          <Button {...args}>{args.children || \"Inverted button\"}</Button>\n        </Flex>\n      </InvertTheme>\n    </Flex>\n  );\n};\n\nexport const IconButton: StoryTemplate<ButtonProps> = (args) => {\n  return <Button {...args}>{args.children || \"Regular button\"}</Button>;\n};\nIconButton.args = {\n  children: \"\",\n  Icon: WalletAddMedium,\n  iconPosition: \"right\",\n};\n\nexport const Expand: StoryTemplate<ButtonProps> = (args: ButtonExpandProps) => {\n  const [show, setShow] = React.useState(false);\n  return (\n    <>\n      <Button.Expand {...args} onToggle={setShow}>\n        {args.children}\n      </Button.Expand>\n      {show && (\n        <div\n          style={{\n            padding: \"1rem\",\n          }}\n        >\n          Hello world!\n        </div>\n      )}\n    </>\n  );\n};\nExpand.args = {\n  children: \"Show all\",\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { Fragment } from \"react\";\nimport Button, { ButtonExpandProps, ButtonProps, ButtonVariants, IconPosition } from \"./index\";\nimport Text from \"../../asorted/Text\";\nimport { PlusMedium, WalletAddMedium } from \"@ledgerhq/icons-ui/react/\";\nimport { InvertTheme } from \"../../../styles/InvertTheme\";\nimport Flex from \"../../layout/Flex\";\nimport Grid from \"../../layout/Grid\";\nimport { StoryTemplate } from \"../../helpers\";\n\nconst iconPositions: IconPosition[] = [\"left\", \"right\"];\nconst buttonVariants: ButtonVariants[] = [\"main\", \"shade\", \"color\", \"error\"];\n\nexport default {\n  title: \"cta/Button\",\n  component: Button,\n  argTypes: {\n    variant: {\n      options: [undefined, ...buttonVariants],\n      control: {\n        type: \"radio\",\n      },\n    },\n    size: {\n      options: [undefined, \"small\", \"medium\", \"large\"],\n      control: { type: \"radio\" },\n    },\n    fontSize: {\n      options: [undefined, 0, 1, 2, 3, 4, 5, 6, 7, 8],\n      control: {\n        type: \"radio\",\n      },\n    },\n    children: {\n      type: \"text\",\n    },\n    iconPosition: {\n      options: iconPositions,\n      control: {\n        type: \"radio\",\n      },\n    },\n    disabled: {\n      type: \"boolean\",\n    },\n    outline: {\n      type: \"boolean\",\n    },\n  },\n};\n\nexport const Overview = ((args: ButtonProps) => {\n  const templateProps = { Icon: PlusMedium, children: \"Try me\", onClick: () => {} };\n  const propsArr = [\n    { ...templateProps, Icon: undefined },\n    { ...templateProps, iconPosition: iconPositions[0] },\n    { ...templateProps, iconPosition: iconPositions[1] },\n    { ...templateProps, children: \"\" },\n  ];\n  return (\n    <Grid columns=\"none\" gridTemplateColumns=\"max-content repeat(4, 1fr)\" columnGap={8} rowGap={8}>\n      {buttonVariants.flatMap((buttonType, i) =>\n        [false, true].map((outline, j) => (\n          <Fragment key={`${i}:${j}`}>\n            <Text variant=\"small\" color=\"neutral.c70\">\n              variant=\"{buttonType}\"<br />\n              outline={`{${outline.toString()}}`}\n            </Text>\n            {propsArr.map((buttonProps) => (\n              <Flex flex={1} columnGap={4}>\n                {[false, true].map((disabled) => (\n                  <Button\n                    size={args.size}\n                    variant={buttonType}\n                    outline={outline}\n                    disabled={disabled}\n                    {...buttonProps}\n                  />\n                ))}\n              </Flex>\n            ))}\n          </Fragment>\n        )),\n      )}\n    </Grid>\n  );\n}).bind({});\n\nexport const Default: StoryTemplate<ButtonProps> = (args) => {\n  return <Button {...args}>{args.children || \"Regular button\"}</Button>;\n};\n\nexport const Inverted: StoryTemplate<ButtonProps> = (args) => {\n  return (\n    <Flex flexDirection=\"column\">\n      <Flex flex=\"0 0 1\" p={4} alignItems=\"center\" bg=\"background.main\">\n        <Button {...args}>{args.children || \"Regular button\"}</Button>\n      </Flex>\n      <InvertTheme>\n        <Flex flex=\"0 0 1\" p={4} alignItems=\"center\" bg=\"background.main\">\n          <Button {...args}>{args.children || \"Inverted button\"}</Button>\n        </Flex>\n      </InvertTheme>\n    </Flex>\n  );\n};\n\nexport const IconButton: StoryTemplate<ButtonProps> = (args) => {\n  return <Button {...args}>{args.children || \"Regular button\"}</Button>;\n};\nIconButton.args = {\n  children: \"\",\n  Icon: WalletAddMedium,\n  iconPosition: \"right\",\n};\n\nexport const Expand: StoryTemplate<ButtonProps> = (args: ButtonExpandProps) => {\n  const [show, setShow] = React.useState(false);\n  return (\n    <>\n      <Button.Expand {...args} onToggle={setShow}>\n        {args.children}\n      </Button.Expand>\n      {show && (\n        <div\n          style={{\n            padding: \"1rem\",\n          }}\n        >\n          Hello world!\n        </div>\n      )}\n    </>\n  );\n};\nExpand.args = {\n  children: \"Show all\",\n};\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -25,6 +25,7 @@ __export(exports, {
   Base: () => Base,
   ButtonExpand: () => ButtonExpand,
   ButtonUnstyled: () => ButtonUnstyled,
+  buttonSizeStyle: () => buttonSizeStyle,
   default: () => Button_default
 });
 var import_react = __toModule(require("react"));
@@ -156,14 +157,13 @@ const Base = import_styled.default.button.attrs((p) => ({
   border-width: ${(p) => p.outline || p.variant === "shade" ? 1 : 0}px;
   font-weight: 600;
   ${(0, import_styled_system.compose)(import_fontFamily.default, import_styled_system.fontSize, import_styled_system.border)};
-  height: ${(p) => p.theme.space[13]}px;
   line-height: ${(p) => p.theme.fontSizes[p.fontSize]}px;
   text-align: center;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 0 2em;
   overflow: hidden;
+  ${(p) => buttonSizeStyle[p.size || "medium"]}
   text-overflow: ellipsis;
   white-space: nowrap;
   max-width: 100%;
@@ -254,6 +254,20 @@ function ButtonExpand({ onToggle, onClick, ...props }, ref) {
     }
   });
 }
+const buttonSizeStyle = {
+  small: {
+    padding: "0 20px",
+    height: "32px"
+  },
+  medium: {
+    padding: "0 24px",
+    height: "40px"
+  },
+  large: {
+    padding: "0 28px",
+    height: "48px"
+  }
+};
 Button.Unstyled = ButtonUnstyled;
 Button.Expand = import_react.default.forwardRef(ButtonExpand);
 ButtonWithRef.Unstyled = Button.Unstyled;

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  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  height: ${(p) => p.theme.space[13]}px;\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  padding: 0 2em;\n  overflow: hidden;\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\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}\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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",
   "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/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/global.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/lib/components/asorted/index.js

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

package/lib/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

@@ -7,6 +7,7 @@ interface BaseProps extends BaseStyledProps, BordersProps {
     ff?: string;
     color?: string;
     backgroundColor?: string;
+    size?: "small" | "medium" | "large";
     fontSize?: number;
     variant?: ButtonVariants;
     outline?: boolean;
@@ -41,4 +42,10 @@ export declare type ButtonExpandProps = React.PropsWithChildren<ButtonProps & {
     onToggle?: (arg0: boolean) => void;
 }>;
 export declare function ButtonExpand({ onToggle, onClick, ...props }: ButtonExpandProps, ref?: React.ForwardedRef<HTMLButtonElement>): React.ReactElement;
+export declare const buttonSizeStyle: {
+    [index: string]: {
+        padding: string;
+        height: string;
+    };
+};
 export default ButtonWithRef;

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

@@ -141,14 +141,13 @@ export const Base = baseStyled.button.attrs((p) => {
   border-width: ${(p) => (p.outline || p.variant === "shade" ? 1 : 0)}px;
   font-weight: 600;
   ${compose(fontFamily, fontSize, border)};
-  height: ${(p) => p.theme.space[13]}px;
   line-height: ${(p) => p.theme.fontSizes[p.fontSize]}px;
   text-align: center;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 0 2em;
   overflow: hidden;
+  ${(p) => buttonSizeStyle[p.size || "medium"]}
   text-overflow: ellipsis;
   white-space: nowrap;
   max-width: 100%;
@@ -226,6 +225,20 @@ export function ButtonExpand(_a, ref) {
             onClick != null && onClick(event);
         } })));
 }
+export const buttonSizeStyle = {
+    small: {
+        padding: "0 20px",
+        height: "32px",
+    },
+    medium: {
+        padding: "0 24px",
+        height: "40px",
+    },
+    large: {
+        padding: "0 28px",
+        height: "48px",
+    },
+};
 Button.Unstyled = ButtonUnstyled;
 Button.Expand = React.forwardRef(ButtonExpand);
 ButtonWithRef.Unstyled = Button.Unstyled;

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

package/lib/styles/helpers.d.ts

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

package/lib/styles/helpers.js

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

package/package.json

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