@ledgerhq/react-ui 0.12.1-recover-beta.0 → 0.13.0-next.0

package/lib/cjs/styles/palettes/colors.stories.js

@@ -1,35 +1,42 @@
+"use strict";
 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 });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-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, {
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var colors_stories_exports = {};
+__export(colors_stories_exports, {
   Colors: () => Colors,
   default: () => colors_stories_default
 });
-var import_react = __toModule(require("react"));
-var import_styled_components = __toModule(require("styled-components"));
-var import_Text = __toModule(require("../../components/asorted/Text"));
-var import_Flex = __toModule(require("../../components/layout/Flex"));
-var import_helpers = __toModule(require("../helpers"));
+module.exports = __toCommonJS(colors_stories_exports);
+var import_react = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+var import_Text = __toESM(require("../../components/asorted/Text"));
+var import_Flex = __toESM(require("../../components/layout/Flex"));
+var import_ui_shared = require("@ledgerhq/ui-shared");
 var colors_stories_default = { title: "Particles" };
 const ColorArea = import_styled_components.default.div`
   width: 200px;
@@ -41,45 +48,29 @@ const ColorArea = import_styled_components.default.div`
   border-radius: 2px;
 `;
 const CardColor = ({ shade, type, value }) => {
-  const rgba = (0, import_react.useMemo)(() => value.length > 7 ? `${(0, import_helpers.hex)(value)} ${(0, import_helpers.getAlpha)(value) * 100}%` : value, [value]);
+  const [isHovered, setIsHovered] = (0, import_react.useState)(false);
   const onClick = (type2, shade2) => {
     navigator.clipboard.writeText(`p.theme.colors.${type2}.${shade2}`);
   };
-  return /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
-    flexDirection: "column",
-    alignItems: "center"
-  }, /* @__PURE__ */ import_react.default.createElement(ColorArea, {
-    type,
-    shade,
-    onClick: () => onClick(type, shade)
-  }), /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
-    variant: "tiny"
-  }, shade), /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
-    variant: "tiny",
-    color: "neutral.c60"
-  }, rgba));
-};
-const Colors = () => {
-  const { colors } = (0, import_styled_components.useTheme)();
-  const { palette, type, ...others } = colors;
-  return /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
-    flexDirection: "column",
-    rowGap: "2rem"
-  }, Object.entries(others).map(([type2, shades]) => /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
-    flexDirection: "column",
-    rowGap: "1rem"
-  }, /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
-    variant: "h2",
-    textTransform: "uppercase"
-  }, type2), /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
-    columnGap: "0.5rem",
-    rowGap: "0.5rem",
-    flexWrap: "wrap"
-  }, Object.entries(shades).map(([shade, value]) => /* @__PURE__ */ import_react.default.createElement(CardColor, {
-    key: shade,
-    shade,
-    type: type2,
-    value
-  }))))));
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_Flex.default,
+    {
+      flexDirection: "column",
+      alignItems: "center",
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false)
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      ColorArea,
+      {
+        type,
+        shade,
+        onClick: () => onClick(type, shade)
+      }
+    ),
+    /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "tiny" }, isHovered ? value : shade)
+  );
 };
+const { type: _, ...palette } = import_ui_shared.palettes.light;
+const Colors = () => /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { flexDirection: "column", rowGap: "2rem" }, Object.entries(palette).map(([type, shades]) => /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { flexDirection: "column", rowGap: "1rem" }, /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "h2", textTransform: "uppercase" }, type), /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { columnGap: "0.5rem", rowGap: "0.5rem", flexWrap: "wrap" }, Object.entries(shades).map(([shade, value]) => /* @__PURE__ */ import_react.default.createElement(CardColor, { key: shade, shade, type, value }))))));
 //# sourceMappingURL=colors.stories.js.map

package/lib/cjs/styles/palettes/colors.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/styles/palettes/colors.stories.tsx"],
-  "sourcesContent": ["import React, { useMemo } from \"react\";\nimport styled, { useTheme } from \"styled-components\";\nimport Text from \"../../components/asorted/Text\";\nimport Flex from \"../../components/layout/Flex\";\nimport { getAlpha, hex } from \"../helpers\";\nimport { ColorPalette } from \"@ledgerhq/ui-shared\";\n\nexport default { title: \"Particles\" };\n\nconst ColorArea = styled.div<{ type: keyof ColorPalette; shade: string }>`\n  width: 200px;\n  aspect-ratio: 1;\n  background-color: ${(p) => {\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore next-line\n    return p.theme.colors[p.type][p.shade];\n  }};\n  cursor: pointer;\n  border-radius: 2px;\n`;\n\ntype CardColorProps = { shade: string; type: string; value: string };\nconst CardColor = ({ shade, type, value }: CardColorProps): JSX.Element => {\n  const rgba = useMemo(\n    () => (value.length > 7 ? `${hex(value)} ${getAlpha(value) * 100}%` : value),\n    [value],\n  );\n\n  const onClick = (type: string, shade: string): void => {\n    navigator.clipboard.writeText(`p.theme.colors.${type}.${shade}`);\n  };\n\n  return (\n    <Flex flexDirection=\"column\" alignItems=\"center\">\n      <ColorArea\n        type={type as keyof ColorPalette}\n        shade={shade}\n        onClick={() => onClick(type, shade)}\n      />\n      <Text variant=\"tiny\">{shade}</Text>\n      <Text variant=\"tiny\" color=\"neutral.c60\">\n        {rgba}\n      </Text>\n    </Flex>\n  );\n};\n\nexport const Colors = (): JSX.Element => {\n  const { colors } = useTheme();\n  const { palette, type, ...others } = colors; // eslint-disable-line @typescript-eslint/no-unused-vars\n  return (\n    <Flex flexDirection=\"column\" rowGap=\"2rem\">\n      {Object.entries(others).map(([type, shades]) => (\n        <Flex flexDirection=\"column\" rowGap=\"1rem\">\n          <Text variant=\"h2\" textTransform=\"uppercase\">\n            {type}\n          </Text>\n          <Flex columnGap=\"0.5rem\" rowGap=\"0.5rem\" flexWrap=\"wrap\">\n            {Object.entries(shades).map(([shade, value]) => (\n              <CardColor key={shade} shade={shade} type={type} value={value} />\n            ))}\n          </Flex>\n        </Flex>\n      ))}\n    </Flex>\n  );\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA+B;AAC/B,+BAAiC;AACjC,kBAAiB;AACjB,kBAAiB;AACjB,qBAA8B;AAG9B,IAAO,yBAAQ,EAAE,OAAO;AAExB,MAAM,YAAY,iCAAO;AAAA;AAAA;AAAA,sBAGH,CAAC,MAAM;AAGzB,SAAO,EAAE,MAAM,OAAO,EAAE,MAAM,EAAE;AAAA;AAAA;AAAA;AAAA;AAOpC,MAAM,YAAY,CAAC,EAAE,OAAO,MAAM,YAAyC;AACzE,QAAM,OAAO,0BACX,MAAO,MAAM,SAAS,IAAI,GAAG,wBAAI,UAAU,6BAAS,SAAS,SAAS,OACtE,CAAC;AAGH,QAAM,UAAU,CAAC,OAAc,WAAwB;AACrD,cAAU,UAAU,UAAU,kBAAkB,SAAQ;AAAA;AAG1D,SACE,mDAAC,qBAAD;AAAA,IAAM,eAAc;AAAA,IAAS,YAAW;AAAA,KACtC,mDAAC,WAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA,SAAS,MAAM,QAAQ,MAAM;AAAA,MAE/B,mDAAC,qBAAD;AAAA,IAAM,SAAQ;AAAA,KAAQ,QACtB,mDAAC,qBAAD;AAAA,IAAM,SAAQ;AAAA,IAAO,OAAM;AAAA,KACxB;AAAA;AAMF,MAAM,SAAS,MAAmB;AACvC,QAAM,EAAE,WAAW;AACnB,QAAM,EAAE,SAAS,SAAS,WAAW;AACrC,SACE,mDAAC,qBAAD;AAAA,IAAM,eAAc;AAAA,IAAS,QAAO;AAAA,KACjC,OAAO,QAAQ,QAAQ,IAAI,CAAC,CAAC,OAAM,YAClC,mDAAC,qBAAD;AAAA,IAAM,eAAc;AAAA,IAAS,QAAO;AAAA,KAClC,mDAAC,qBAAD;AAAA,IAAM,SAAQ;AAAA,IAAK,eAAc;AAAA,KAC9B,QAEH,mDAAC,qBAAD;AAAA,IAAM,WAAU;AAAA,IAAS,QAAO;AAAA,IAAS,UAAS;AAAA,KAC/C,OAAO,QAAQ,QAAQ,IAAI,CAAC,CAAC,OAAO,WACnC,mDAAC,WAAD;AAAA,IAAW,KAAK;AAAA,IAAO;AAAA,IAAc,MAAM;AAAA,IAAM;AAAA;AAAA;",
-  "names": []
+  "sourcesContent": ["import React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport Text from \"../../components/asorted/Text\";\nimport Flex from \"../../components/layout/Flex\";\nimport { palettes, ColorPalette } from \"@ledgerhq/ui-shared\";\n\nexport default { title: \"Particles\" };\n\nconst ColorArea = styled.div<{ type: keyof ColorPalette; shade: string }>`\n  width: 200px;\n  aspect-ratio: 1;\n  background-color: ${(p) => {\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore next-line\n    return p.theme.colors[p.type][p.shade];\n  }};\n  cursor: pointer;\n  border-radius: 2px;\n`;\n\ntype CardColorProps = { shade: string; type: string; value: string };\nconst CardColor = ({ shade, type, value }: CardColorProps): JSX.Element => {\n  const [isHovered, setIsHovered] = useState(false);\n\n  const onClick = (type: string, shade: string): void => {\n    navigator.clipboard.writeText(`p.theme.colors.${type}.${shade}`);\n  };\n\n  return (\n    <Flex\n      flexDirection=\"column\"\n      alignItems=\"center\"\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n    >\n      <ColorArea\n        type={type as keyof ColorPalette}\n        shade={shade}\n        onClick={() => onClick(type, shade)}\n      />\n      <Text variant=\"tiny\">{isHovered ? value : shade}</Text>\n    </Flex>\n  );\n};\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nconst { type: _, ...palette } = palettes.light;\n\nexport const Colors = (): JSX.Element => (\n  <Flex flexDirection=\"column\" rowGap=\"2rem\">\n    {Object.entries(palette).map(([type, shades]) => (\n      <Flex flexDirection=\"column\" rowGap=\"1rem\">\n        <Text variant=\"h2\" textTransform=\"uppercase\">\n          {type}\n        </Text>\n        <Flex columnGap=\"0.5rem\" rowGap=\"0.5rem\" flexWrap=\"wrap\">\n          {Object.entries(shades).map(([shade, value]) => (\n            <CardColor key={shade} shade={shade} type={type} value={value} />\n          ))}\n        </Flex>\n      </Flex>\n    ))}\n  </Flex>\n);\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,+BAAmB;AACnB,kBAAiB;AACjB,kBAAiB;AACjB,uBAAuC;AAEvC,IAAO,yBAAQ,EAAE,OAAO,YAAY;AAEpC,MAAM,YAAY,yBAAAA,QAAO;AAAA;AAAA;AAAA,sBAGH,CAAC,MAAM;AAGzB,SAAO,EAAE,MAAM,OAAO,EAAE,IAAI,EAAE,EAAE,KAAK;AACvC;AAAA;AAAA;AAAA;AAMF,MAAM,YAAY,CAAC,EAAE,OAAO,MAAM,MAAM,MAAmC;AACzE,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAEhD,QAAM,UAAU,CAACC,OAAcC,WAAwB;AACrD,cAAU,UAAU,UAAU,kBAAkBD,SAAQC,QAAO;AAAA,EACjE;AAEA,SACE,6BAAAC,QAAA;AAAA,IAAC,YAAAC;AAAA,IAAA;AAAA,MACC,eAAc;AAAA,MACd,YAAW;AAAA,MACX,cAAc,MAAM,aAAa,IAAI;AAAA,MACrC,cAAc,MAAM,aAAa,KAAK;AAAA;AAAA,IAEtC,6BAAAD,QAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,SAAS,MAAM,QAAQ,MAAM,KAAK;AAAA;AAAA,IACpC;AAAA,IACA,6BAAAA,QAAA,cAAC,YAAAE,SAAA,EAAK,SAAQ,UAAQ,YAAY,QAAQ,KAAM;AAAA,EAClD;AAEJ;AAGA,MAAM,EAAE,MAAM,GAAG,GAAG,QAAQ,IAAI,0BAAS;AAElC,MAAM,SAAS,MACpB,6BAAAF,QAAA,cAAC,YAAAC,SAAA,EAAK,eAAc,UAAS,QAAO,UACjC,OAAO,QAAQ,OAAO,EAAE,IAAI,CAAC,CAAC,MAAM,MAAM,MACzC,6BAAAD,QAAA,cAAC,YAAAC,SAAA,EAAK,eAAc,UAAS,QAAO,UAClC,6BAAAD,QAAA,cAAC,YAAAE,SAAA,EAAK,SAAQ,MAAK,eAAc,eAC9B,IACH,GACA,6BAAAF,QAAA,cAAC,YAAAC,SAAA,EAAK,WAAU,UAAS,QAAO,UAAS,UAAS,UAC/C,OAAO,QAAQ,MAAM,EAAE,IAAI,CAAC,CAAC,OAAO,KAAK,MACxC,6BAAAD,QAAA,cAAC,aAAU,KAAK,OAAO,OAAc,MAAY,OAAc,CAChE,CACH,CACF,CACD,CACH;",
+  "names": ["styled", "type", "shade", "React", "Flex", "Text"]
 }

package/lib/cjs/styles/styled/fontFamily.js

@@ -1,30 +1,27 @@
-var __create = Object.create;
+"use strict";
 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 });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-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, {
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var fontFamily_exports = {};
+__export(fontFamily_exports, {
   default: () => fontFamily_default
 });
-var import_helpers = __toModule(require("../helpers"));
+module.exports = __toCommonJS(fontFamily_exports);
+var import_helpers = require("../helpers");
 var fontFamily_default = (props) => {
   const prop = props.ff;
   if (prop == null) {

package/lib/cjs/styles/styled/fontFamily.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../src/styles/styled/fontFamily.ts"],
   "sourcesContent": ["import { ff } from \"../helpers\";\n\nexport default (props: { ff?: string }) => {\n  const prop = props.ff;\n\n  if (prop == null) {\n    return null;\n  }\n\n  return ff(prop);\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,qBAAmB;AAEnB,IAAO,qBAAQ,CAAC,UAA2B;AACzC,QAAM,OAAO,MAAM;AAEnB,MAAI,QAAQ,MAAM;AAChB,WAAO;AAAA;AAGT,SAAO,uBAAG;AAAA;",
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAmB;AAEnB,IAAO,qBAAQ,CAAC,UAA2B;AACzC,QAAM,OAAO,MAAM;AAEnB,MAAI,QAAQ,MAAM;AAChB,WAAO;AAAA,EACT;AAEA,aAAO,mBAAG,IAAI;AAChB;",
   "names": []
 }

package/lib/cjs/styles/system/gaps.js

@@ -1,30 +1,27 @@
-var __create = Object.create;
+"use strict";
 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 });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-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, {
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var gaps_exports = {};
+__export(gaps_exports, {
   default: () => gaps_default
 });
-var import_styled_system = __toModule(require("styled-system"));
+module.exports = __toCommonJS(gaps_exports);
+var import_styled_system = require("styled-system");
 const gaps = (0, import_styled_system.system)({
   rowGap: { property: "rowGap", scale: "space" },
   columnGap: { property: "columnGap", scale: "space" }

package/lib/cjs/styles/system/gaps.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../src/styles/system/gaps.ts"],
   "sourcesContent": ["import { system } from \"styled-system\";\n\nconst gaps = system({\n  rowGap: { property: \"rowGap\", scale: \"space\" },\n  columnGap: { property: \"columnGap\", scale: \"space\" },\n});\n\nexport default gaps;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,2BAAuB;AAEvB,MAAM,OAAO,iCAAO;AAAA,EAClB,QAAQ,EAAE,UAAU,UAAU,OAAO;AAAA,EACrC,WAAW,EAAE,UAAU,aAAa,OAAO;AAAA;AAG7C,IAAO,eAAQ;",
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAAuB;AAEvB,MAAM,WAAO,6BAAO;AAAA,EAClB,QAAQ,EAAE,UAAU,UAAU,OAAO,QAAQ;AAAA,EAC7C,WAAW,EAAE,UAAU,aAAa,OAAO,QAAQ;AACrD,CAAC;AAED,IAAO,eAAQ;",
   "names": []
 }

package/lib/cjs/styles/theme.js

@@ -1,27 +1,23 @@
-var __create = Object.create;
+"use strict";
 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 });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-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, {
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var theme_exports = {};
+__export(theme_exports, {
   breakpoints: () => breakpoints,
   default: () => theme_default,
   fontFamilies: () => fontFamilies,
@@ -31,8 +27,9 @@ __export(exports, {
   space: () => space,
   zIndexes: () => zIndexes
 });
-var import_styled_components = __toModule(require("styled-components"));
-var import_ui_shared = __toModule(require("@ledgerhq/ui-shared"));
+module.exports = __toCommonJS(theme_exports);
+var import_styled_components = require("styled-components");
+var import_ui_shared = require("@ledgerhq/ui-shared");
 const breakpoints = {
   sm: "640px",
   md: "768px",
@@ -41,6 +38,8 @@ const breakpoints = {
   xxl: "1536px"
 };
 const space = [
+  /* space indexes:
+  0, 1, 2, 3, 4,  5,  6,  7,  8,  9,  10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21 */
   0,
   2,
   4,

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../src/styles/theme.ts"],
   "sourcesContent": ["import { keyframes, css, DefaultTheme } from \"styled-components\";\nimport { palettes, ColorPalette } from \"@ledgerhq/ui-shared\";\n\nexport type screensBreakpoints = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\";\n\nexport const breakpoints = {\n  sm: \"640px\",\n  md: \"768px\",\n  lg: \"1024px\",\n  xl: \"1280px\",\n  xxl: \"1536px\",\n} as Record<screensBreakpoints, string>;\n\nexport const space = [\n  /* space indexes:\n  0, 1, 2, 3, 4,  5,  6,  7,  8,  9,  10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21 */\n  0, 2, 4, 8, 10, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 68, 72, 76,\n];\n\nexport type TextVariants =\n  | \"h1\"\n  | \"h1Inter\"\n  | \"h2\"\n  | \"h2Inter\"\n  | \"h3\"\n  | \"h3Inter\"\n  | \"h4\"\n  | \"h4Inter\"\n  | \"h5\"\n  | \"h5Inter\"\n  | \"large\"\n  | \"largeLineHeight\"\n  | \"body\"\n  | \"bodyLineHeight\"\n  | \"paragraph\"\n  | \"paragraphLineHeight\"\n  | \"small\"\n  | \"extraSmall\"\n  | \"tiny\"\n  | \"micro\"\n  | \"subtitle\";\n\nexport type ThemeScale<Type, Aliases extends string> = Array<Type> & Record<Aliases, Type>;\n\nexport const fontSizes = [8, 10, 11, 12, 13, 14, 16, 20, 24, 28, 32, 36] as ThemeScale<\n  number,\n  TextVariants\n>;\n\n[\n  fontSizes.micro,\n  fontSizes.tiny,\n  fontSizes.extraSmall,\n  fontSizes.small,\n  fontSizes.paragraph,\n  fontSizes.body,\n  fontSizes.large,\n  fontSizes.h5,\n  fontSizes.h4,\n  fontSizes.h3,\n  fontSizes.h2,\n  fontSizes.h1,\n] = fontSizes;\nfontSizes.largeLineHeight = fontSizes.large;\nfontSizes.bodyLineHeight = fontSizes.body;\nfontSizes.paragraphLineHeight = fontSizes.paragraph;\nfontSizes.subtitle = fontSizes.extraSmall;\nfontSizes.h1Inter = fontSizes.h1;\nfontSizes.h2Inter = fontSizes.h2;\nfontSizes.h3Inter = fontSizes.h3;\nfontSizes.h4Inter = fontSizes.h4;\nfontSizes.h5Inter = fontSizes.h5;\n\nconst fontWeights = {\n  extraLight: \"100\",\n  light: \"300\",\n  regular: \"400\",\n  medium: \"500\",\n  semiBold: \"600\",\n  bold: \"700\",\n  extraBold: \"800\",\n};\n\nexport const radii = [0, 4, 8, 12, 16, 20];\nexport const shadows = [\"0 4px 8px 0 rgba(0, 0, 0, 0.03)\"];\nexport const zIndexes = [-1, 0, 1, 9, 10, 90, 100, 900, 1000];\n\n// Those fonts are now defined in global.css, this is just a mapping for styled-system\nexport const fontFamilies = {\n  Inter: {\n    ExtraLight: {\n      weight: 100,\n      style: \"normal\",\n    },\n    Light: {\n      weight: 300,\n      style: \"normal\",\n    },\n    Regular: {\n      weight: 400,\n      style: \"normal\",\n    },\n    Medium: {\n      weight: 500,\n      style: \"normal\",\n    },\n    SemiBold: {\n      weight: 600,\n      style: \"normal\",\n    },\n    Bold: {\n      weight: 700,\n      style: \"normal\",\n    },\n    ExtraBold: {\n      weight: 800,\n      style: \"normal\",\n    },\n  },\n  Alpha: {\n    Medium: {\n      weight: 500,\n      style: \"normal\",\n    },\n  },\n};\n\nconst animationDuration = \"0.33s\";\nconst easings = {\n  outQuadratic: \"cubic-bezier(0.25, 0.46, 0.45, 0.94)\",\n};\n\nconst transition = (\n  properties = [\"all\"],\n  duration = animationDuration,\n  easing = easings.outQuadratic,\n) => css`\n  transition-property: ${properties.join(\",\")};\n  transition-duration: ${duration};\n  transition-timing-function: ${easing};\n`;\n\nconst fadeIn = keyframes`\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  `;\nconst fadeOut = keyframes`\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n    }\n  `;\nconst fadeInGrowX = keyframes`\n    0% {\n      opacity: 0;\n      transform: scaleX(0);\n    }\n    100% {\n      opacity: 1;\n      transform: scaleX(1);\n    }\n`;\nconst fadeInUp = keyframes`\n    0% {\n      opacity: 0;\n      transform: translateY(66%);\n    }\n    100% {\n      opacity: 1;\n      transform: translateY(0%);\n    }\n  `;\nconst animations = {\n  fadeIn: () =>\n    css`\n      ${fadeIn} ${animationDuration} ${easings.outQuadratic} forwards\n    `,\n  fadeOut: () =>\n    css`\n      ${fadeOut} ${animationDuration} ${easings.outQuadratic} forwards\n    `,\n  fadeInGrowX: () =>\n    css`\n      ${fadeInGrowX} 0.6s ${easings.outQuadratic} forwards\n    `,\n  fadeInUp: () =>\n    css`\n      ${fadeInUp} ${animationDuration} ${easings.outQuadratic} forwards\n    `,\n};\nconst overflow = {\n  x: css`\n    overflow-y: hidden;\n    overflow-x: scroll;\n    will-change: transform;\n    &:hover {\n      --track-color: ${(p) => p.theme.colors.neutral.c30};\n    }\n  `,\n  y: css`\n    overflow-x: hidden;\n    overflow-y: scroll;\n    will-change: transform;\n    &:hover {\n      --track-color: ${(p) => p.theme.colors.neutral.c30};\n    }\n  `,\n  yAuto: css`\n    overflow-x: hidden;\n    overflow-y: auto;\n    will-change: transform;\n    &:hover {\n      --track-color: ${(p) => p.theme.colors.neutral.c30};\n    }\n  `,\n  xy: css`\n    overflow: scroll;\n    will-change: transform;\n    &:hover {\n      --track-color: ${(p) => p.theme.colors.neutral.c30};\n    }\n  `,\n  trackSize: 12,\n};\n\ndeclare module \"styled-components\" {\n  export interface Font {\n    weight: number;\n    style: string;\n  }\n  export interface DefaultTheme {\n    theme: \"dark\" | \"light\";\n    animations: typeof animations;\n    transition: typeof transition;\n    overflow: typeof overflow;\n    sizes: {\n      topBarHeight: number;\n      sideBarWidth: number;\n      drawer: {\n        side: {\n          big: {\n            width: number;\n          };\n          small: {\n            width: number;\n          };\n        };\n        popin: {\n          min: {\n            height: number;\n            width: number;\n          };\n          max: {\n            height: number;\n            width: number;\n          };\n        };\n      };\n    };\n    radii: number[];\n    fontFamilies: Record<string, Record<string, Font>>;\n    fontSizes: number[];\n    space: number[];\n    shadows: string[];\n    colors: ColorPalette & {\n      /**\n       * @deprecated Do not use the .palette prefix anymore!\n       */\n      palette: ColorPalette;\n    };\n    fontWeights: Record<string, string>;\n    breakpoints: Record<screensBreakpoints, string>;\n    zIndexes: number[];\n  }\n}\n\nconst theme: DefaultTheme = {\n  theme: \"light\",\n  sizes: {\n    drawer: {\n      side: {\n        big: {\n          width: 580,\n        },\n        small: {\n          width: 420,\n        },\n      },\n      popin: {\n        min: {\n          height: 158,\n          width: 462,\n        },\n        max: {\n          height: 522,\n          width: 622,\n        },\n      },\n    },\n    topBarHeight: 58,\n    sideBarWidth: 230,\n  },\n  radii,\n  fontFamilies,\n  fontSizes,\n  fontWeights,\n  space,\n  shadows,\n  colors: {\n    palette: palettes.light,\n    ...palettes.light,\n  },\n  animations,\n  overflow,\n  transition,\n  zIndexes,\n  breakpoints,\n};\n\nexport default theme;\nexport type Theme = DefaultTheme;\n"],
-  "mappings": "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",
+  "mappings": "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",
   "names": []
 }

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

@@ -2,7 +2,7 @@
 export type Props = {
     name: string;
     size?: number;
-    weight?: "Regular" | "Thin" | "Light" | "Medium" | "UltraLight";
+    weight?: "Medium";
     color?: string;
 };
 export declare const iconNames: string[];

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

@@ -1,9 +1,7 @@
 import * as icons from "@ledgerhq/icons-ui/react";
 import React from "react";
 export const iconNames = Array.from(Object.keys(icons).reduce((set, rawKey) => {
-    const key = rawKey
-        .replace(/(.+)(Regular|Light|UltraLight|Thin|Medium)+$/g, "$1")
-        .replace(/(.+)(Ultra)+$/g, "$1");
+    const key = rawKey.replace(/(.+)(Medium)+$/g, "$1");
     if (!set.has(key))
         set.add(key);
     return set;

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

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

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

@@ -2,5 +2,4 @@ export { default, iconNames } from "./Icon";
 import BoxedIcon, { IconBox } from "./BoxedIcon";
 export { BoxedIcon, IconBox };
 export { default as CryptoIcon } from "./CryptoIcon";
-export { default as PaymentIcon } from "./PaymentIcon";
 export { default as ProviderIcon } from "./ProviderIcon";

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

@@ -1,3 +1,3 @@
 export { default as Divider } from "./Divider";
-export { default as Icon, IconBox, BoxedIcon, CryptoIcon, ProviderIcon, PaymentIcon } from "./Icon";
+export { default as Icon, IconBox, BoxedIcon, CryptoIcon, ProviderIcon } 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, CryptoIcon, ProviderIcon, PaymentIcon } from "./Icon";
+export { default as Icon, IconBox, BoxedIcon, CryptoIcon, ProviderIcon } from "./Icon";
 export { default as Text } from "./Text";

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

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

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

@@ -16,8 +16,7 @@ import { fontSize, border, compose } from "styled-system";
 import fontFamily from "../../../styles/styled/fontFamily";
 import { fontSizes } from "../../../styles/theme";
 import { rgba } from "../../../styles/helpers";
-import ChevronBottom from "@ledgerhq/icons-ui/react/ChevronBottomRegular";
-import IconComponent from "../../asorted/Icon";
+import ChevronBottom from "@ledgerhq/icons-ui/react/ChevronBottomMedium";
 const IconContainer = styled.div `
   display: inline-block;
   ${(p) => `${p.iconPosition === "left" ? "margin-right" : "margin-left"}: ${p.theme.space[4]}px;`}
@@ -205,10 +204,9 @@ export const Base = baseStyled.button.attrs((p) => {
 const ContentContainer = styled.div ``;
 const Button = (_a, ref) => {
     var _b;
-    var { Icon, iconPosition = "right", iconSize = 16, children, onClick, iconName } = _a, props = __rest(_a, ["Icon", "iconPosition", "iconSize", "children", "onClick", "iconName"]);
+    var { Icon, iconPosition = "right", iconSize = 16, children, onClick } = _a, props = __rest(_a, ["Icon", "iconPosition", "iconSize", "children", "onClick"]);
     const iconNodeSize = iconSize || fontSizes[(_b = props.fontSize) !== null && _b !== void 0 ? _b : 4];
-    const IconNode = useMemo(() => (iconName && React.createElement(IconComponent, { name: iconName, size: iconNodeSize })) ||
-        (Icon && React.createElement(Icon, { size: iconNodeSize })), [iconName, iconNodeSize, Icon]);
+    const IconNode = useMemo(() => Icon && React.createElement(Icon, { size: iconNodeSize }), [iconNodeSize, Icon]);
     return (React.createElement(Base, Object.assign({}, props, { ref: ref, iconButton: !(Icon == null) && !children, onClick: onClick }),
         iconPosition === "right" ? React.createElement(ContentContainer, null, children) : null,
         IconNode && React.createElement(IconContainer, { iconPosition: iconPosition }, IconNode),

package/lib/components/form/Checkbox/Checkbox.js

@@ -1,9 +1,9 @@
 import React from "react";
 import styled from "styled-components";
 import Text from "../../asorted/Text";
-import CheckAloneRegular from "@ledgerhq/icons-ui/react/CheckAloneRegular";
+import CheckAloneMedium from "@ledgerhq/icons-ui/react/CheckAloneMedium";
 import { renderToStaticMarkup } from "react-dom/server";
-const Icon = () => React.cloneElement(CheckAloneRegular({ size: 13, color: "currentColor" }), {
+const Icon = () => React.cloneElement(CheckAloneMedium({ size: 13, color: "currentColor" }), {
     // the xmlns attribute is required to properly display the checkbox
     xmlns: "http://www.w3.org/2000/svg",
 });

package/lib/components/layout/Drawer/index.js

@@ -15,7 +15,7 @@ import styled from "styled-components";
 import FlexBox from "../Flex";
 import Divider from "../../asorted/Divider";
 import Close from "@ledgerhq/icons-ui/react/CloseMedium";
-import ArrowLeft from "@ledgerhq/icons-ui/react/ArrowLeftRegular";
+import ArrowLeft from "@ledgerhq/icons-ui/react/ArrowLeftMedium";
 import TransitionSlide from "../../transitions/TransitionSlide";
 import TransitionInOut from "../../transitions/TransitionInOut";
 import Text from "../../asorted/Text";

package/lib/components/layout/Popin/index.js

@@ -12,8 +12,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from "react";
 import ReactDOM from "react-dom";
 import styled from "styled-components";
-import CloseIcon from "@ledgerhq/icons-ui/react/CloseRegular";
-import ArrowLeftIcon from "@ledgerhq/icons-ui/react/ArrowLeftRegular";
+import CloseIcon from "@ledgerhq/icons-ui/react/CloseMedium";
+import ArrowLeftIcon from "@ledgerhq/icons-ui/react/ArrowLeftMedium";
 import baseStyled from "../../styled";
 import Flex from "../../layout/Flex";
 import Button from "../../cta/Button";

package/lib/styles/helpers.d.ts

@@ -1,6 +1,4 @@
 export declare const rgba: (c: string, a: number) => string;
-export declare const hex: (color: string) => string;
-export declare const getAlpha: (color: string) => number;
 export declare const darken: (c: string, a: number) => string;
 export declare const lighten: (c: string, a: number) => string;
 export declare const mix: (c: string, b: string, a: number) => string;

package/lib/styles/helpers.js

@@ -1,8 +1,6 @@
 import Color from "color";
 import { fontFamilies } from "./theme";
 export const rgba = (c, a) => Color(c).alpha(a).rgb().toString();
-export const hex = (color) => Color(color).hex().toString();
-export const getAlpha = (color) => Color(color).alpha();
 export const darken = (c, a) => Color(c).darken(a).toString();
 export const lighten = (c, a) => Color(c).lighten(a).toString();
 export const mix = (c, b, a) => Color(c).mix(Color(b), a).toString();