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

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

@@ -0,0 +1,43 @@
+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: () => Toggle_default
+});
+var import_react = __toModule(require("react"));
+var import_Button = __toModule(require("../Button"));
+var TypeEnum;
+(function(TypeEnum2) {
+  TypeEnum2["ENABLED"] = "main";
+  TypeEnum2["DISABLED"] = "color";
+})(TypeEnum || (TypeEnum = {}));
+const Toggle = ({ checked = true, ...buttonProps }) => {
+  const type = (0, import_react.useMemo)(() => checked ? TypeEnum.ENABLED : TypeEnum.DISABLED, [checked]);
+  return /* @__PURE__ */ import_react.default.createElement(import_Button.default, {
+    variant: type,
+    outline: type === TypeEnum.ENABLED,
+    ...buttonProps
+  });
+};
+var Toggle_default = Toggle;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/cta/Toggle/index.tsx"],
+  "sourcesContent": ["import React, { useMemo } from \"react\";\nimport type { ButtonProps } from \"../Button\";\nimport Button from \"../Button\";\n\nexport interface ToggleProps extends Omit<ButtonProps, \"type\"> {\n  checked?: boolean;\n}\n\nenum TypeEnum {\n  ENABLED = \"main\",\n  DISABLED = \"color\",\n}\n\nconst Toggle = ({ checked = true, ...buttonProps }: ToggleProps) => {\n  const type = useMemo(() => (checked ? TypeEnum.ENABLED : TypeEnum.DISABLED), [checked]);\n  return <Button variant={type} outline={type === TypeEnum.ENABLED} {...buttonProps} />;\n};\n\nexport default Toggle;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAA+B;AAE/B,oBAAmB;AAMnB,IAAK;AAAL,UAAK,WAAL;AACE,yBAAU;AACV,0BAAW;AAAA,GAFR;AAKL,MAAM,SAAS,CAAC,EAAE,UAAU,SAAS,kBAA+B;AAClE,QAAM,OAAO,0BAAQ,MAAO,UAAU,SAAS,UAAU,SAAS,UAAW,CAAC;AAC9E,SAAO,mDAAC,uBAAD;AAAA,IAAQ,SAAS;AAAA,IAAM,SAAS,SAAS,SAAS;AAAA,OAAa;AAAA;AAAA;AAGxE,IAAO,iBAAQ;",
+  "names": []
+}

package/lib/cjs/components/cta/getCtaStyle.js

@@ -0,0 +1,22 @@
+var __defProp = Object.defineProperty;
+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 });
+};
+__export(exports, {
+  ctaIconSize: () => ctaIconSize,
+  ctaTextType: () => ctaTextType
+});
+const ctaTextType = {
+  small: "small",
+  medium: "paragraph",
+  large: "body"
+};
+const ctaIconSize = {
+  small: 16,
+  medium: 18,
+  large: 20
+};
+//# sourceMappingURL=getCtaStyle.js.map

package/lib/cjs/components/cta/getCtaStyle.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/cta/getCtaStyle.ts"],
+  "sourcesContent": ["import { TextVariants } from \"../../styles/theme\";\n\nexport const ctaTextType: { [index: string]: TextVariants } = {\n  small: \"small\",\n  medium: \"paragraph\",\n  large: \"body\",\n};\n\nexport const ctaIconSize: { [index: string]: number } = {\n  small: 16,\n  medium: 18,\n  large: 20,\n};\n"],
+  "mappings": ";;;;;;;AAAA;AAAA;AAAA;AAAA;AAEO,MAAM,cAAiD;AAAA,EAC5D,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA;AAGF,MAAM,cAA2C;AAAA,EACtD,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA;",
+  "names": []
+}

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

@@ -0,0 +1,32 @@
+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, {
+  Button: () => import_Button.default,
+  Link: () => import_Link.default,
+  Toggle: () => import_Toggle.default
+});
+var import_Button = __toModule(require("./Button"));
+var import_Toggle = __toModule(require("./Toggle"));
+var import_Link = __toModule(require("./Link"));
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/cta/index.ts"],
+  "sourcesContent": ["export { default as Button } from \"./Button\";\nexport { default as Toggle } from \"./Toggle\";\nexport { default as Link } from \"./Link\";\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAkC;AAClC,oBAAkC;AAClC,kBAAgC;",
+  "names": []
+}

package/lib/cjs/components/form/BaseInput/Input.stories.js

@@ -0,0 +1,113 @@
+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, {
+  Base: () => Base,
+  CustomSerializer: () => CustomSerializer,
+  RenderSideExemple: () => RenderSideExemple,
+  default: () => Input_stories_default
+});
+var import_react = __toModule(require("react"));
+var import_Button = __toModule(require("../../cta/Button"));
+var import_index = __toModule(require("./index"));
+var import__ = __toModule(require("../.."));
+var Input_stories_default = {
+  title: "Form/Input/Base",
+  argTypes: {
+    disabled: {
+      type: "boolean",
+      defaultValue: false
+    },
+    error: {
+      type: "string",
+      defaultValue: void 0
+    },
+    warning: {
+      type: "string",
+      defaultValue: void 0
+    },
+    clearable: {
+      type: "boolean",
+      defaultValue: false
+    }
+  }
+};
+const Base = (args) => {
+  const [value, setValue] = import_react.default.useState("");
+  return /* @__PURE__ */ import_react.default.createElement(import_index.default, {
+    ...args,
+    value,
+    onChange: setValue,
+    placeholder: "Placeholder"
+  });
+};
+const RenderSideExemple = () => {
+  const [disabled, setDisabled] = (0, import_react.useState)(false);
+  const [error, setError] = import_react.default.useState("");
+  const [value, setValue] = import_react.default.useState("test@ledger.fr");
+  const renderLeft = /* @__PURE__ */ import_react.default.createElement(import_index.InputRenderLeftContainer, null, /* @__PURE__ */ import_react.default.createElement(import_Button.default, {
+    variant: "main",
+    outline: true,
+    onClick: () => setDisabled(!disabled)
+  }, "disable"));
+  const renderRight = (props) => {
+    return /* @__PURE__ */ import_react.default.createElement(import_index.InputRenderRightContainer, null, /* @__PURE__ */ import_react.default.createElement(import_Button.default, {
+      variant: "main",
+      outline: true,
+      onClick: () => setError(error ? "" : "Error message"),
+      disabled: props.disabled
+    }, "error"));
+  };
+  return /* @__PURE__ */ import_react.default.createElement(import_index.default, {
+    value,
+    disabled,
+    error,
+    onChange: setValue,
+    renderLeft,
+    renderRight,
+    placeholder: "test"
+  });
+};
+function serialize(value) {
+  return value.split("").join(".");
+}
+function deserialize(value) {
+  return value.replace(/\./g, "");
+}
+const CustomSerializer = (args) => {
+  const [value, setValue] = import_react.default.useState("");
+  return /* @__PURE__ */ import_react.default.createElement(import__.Flex, {
+    flexDirection: "column",
+    rowGap: 8
+  }, /* @__PURE__ */ import_react.default.createElement(import_index.default, {
+    ...args,
+    value,
+    onChange: setValue,
+    serialize,
+    deserialize,
+    placeholder: "Placeholder"
+  }), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement(import__.Text, {
+    variant: "large"
+  }, "Value: "), value));
+};
+//# sourceMappingURL=Input.stories.js.map

package/lib/cjs/components/form/BaseInput/Input.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/form/BaseInput/Input.stories.tsx"],
+  "sourcesContent": ["import React, { useState } from \"react\";\nimport Button from \"../../cta/Button\";\nimport Input, { InputProps, InputRenderLeftContainer, InputRenderRightContainer } from \"./index\";\nimport { Flex, Text } from \"../..\";\n\nexport default {\n  title: \"Form/Input/Base\",\n  argTypes: {\n    disabled: {\n      type: \"boolean\",\n      defaultValue: false,\n    },\n    error: {\n      type: \"string\",\n      defaultValue: undefined,\n    },\n    warning: {\n      type: \"string\",\n      defaultValue: undefined,\n    },\n    clearable: {\n      type: \"boolean\",\n      defaultValue: false,\n    },\n  },\n};\n\nexport const Base = (args: InputProps): JSX.Element => {\n  const [value, setValue] = React.useState(\"\");\n\n  return <Input {...args} value={value} onChange={setValue} placeholder={\"Placeholder\"} />;\n};\n\nexport const RenderSideExemple = (): JSX.Element => {\n  const [disabled, setDisabled] = useState(false);\n  const [error, setError] = React.useState(\"\");\n  const [value, setValue] = React.useState(\"test@ledger.fr\");\n\n  const renderLeft = (\n    <InputRenderLeftContainer>\n      <Button variant=\"main\" outline onClick={() => setDisabled(!disabled)}>\n        disable\n      </Button>\n    </InputRenderLeftContainer>\n  );\n  const renderRight = (props: { disabled: boolean }) => {\n    return (\n      <InputRenderRightContainer>\n        <Button\n          variant=\"main\"\n          outline\n          onClick={() => setError(error ? \"\" : \"Error message\")}\n          /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */\n          // @ts-ignore\n          disabled={props.disabled}\n        >\n          error\n        </Button>\n      </InputRenderRightContainer>\n    );\n  };\n\n  return (\n    <Input\n      value={value}\n      disabled={disabled}\n      error={error}\n      onChange={setValue}\n      renderLeft={renderLeft}\n      renderRight={renderRight}\n      placeholder={\"test\"}\n    />\n  );\n};\n\nfunction serialize(value: string) {\n  return value.split(\"\").join(\".\");\n}\n\nfunction deserialize(value: string) {\n  return value.replace(/\\./g, \"\");\n}\n\nexport const CustomSerializer = (args: InputProps): JSX.Element => {\n  const [value, setValue] = React.useState(\"\");\n\n  return (\n    <Flex flexDirection=\"column\" rowGap={8}>\n      <Input\n        {...args}\n        value={value}\n        onChange={setValue}\n        serialize={serialize}\n        deserialize={deserialize}\n        placeholder={\"Placeholder\"}\n      />\n      <span>\n        <Text variant=\"large\">Value: </Text>\n        {value}\n      </span>\n    </Flex>\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,oBAAmB;AACnB,mBAAuF;AACvF,eAA2B;AAE3B,IAAO,wBAAQ;AAAA,EACb,OAAO;AAAA,EACP,UAAU;AAAA,IACR,UAAU;AAAA,MACR,MAAM;AAAA,MACN,cAAc;AAAA;AAAA,IAEhB,OAAO;AAAA,MACL,MAAM;AAAA,MACN,cAAc;AAAA;AAAA,IAEhB,SAAS;AAAA,MACP,MAAM;AAAA,MACN,cAAc;AAAA;AAAA,IAEhB,WAAW;AAAA,MACT,MAAM;AAAA,MACN,cAAc;AAAA;AAAA;AAAA;AAKb,MAAM,OAAO,CAAC,SAAkC;AACrD,QAAM,CAAC,OAAO,YAAY,qBAAM,SAAS;AAEzC,SAAO,mDAAC,sBAAD;AAAA,OAAW;AAAA,IAAM;AAAA,IAAc,UAAU;AAAA,IAAU,aAAa;AAAA;AAAA;AAGlE,MAAM,oBAAoB,MAAmB;AAClD,QAAM,CAAC,UAAU,eAAe,2BAAS;AACzC,QAAM,CAAC,OAAO,YAAY,qBAAM,SAAS;AACzC,QAAM,CAAC,OAAO,YAAY,qBAAM,SAAS;AAEzC,QAAM,aACJ,mDAAC,uCAAD,MACE,mDAAC,uBAAD;AAAA,IAAQ,SAAQ;AAAA,IAAO,SAAO;AAAA,IAAC,SAAS,MAAM,YAAY,CAAC;AAAA,KAAW;AAK1E,QAAM,cAAc,CAAC,UAAiC;AACpD,WACE,mDAAC,wCAAD,MACE,mDAAC,uBAAD;AAAA,MACE,SAAQ;AAAA,MACR,SAAO;AAAA,MACP,SAAS,MAAM,SAAS,QAAQ,KAAK;AAAA,MAGrC,UAAU,MAAM;AAAA,OACjB;AAAA;AAOP,SACE,mDAAC,sBAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,aAAa;AAAA;AAAA;AAKnB,mBAAmB,OAAe;AAChC,SAAO,MAAM,MAAM,IAAI,KAAK;AAAA;AAG9B,qBAAqB,OAAe;AAClC,SAAO,MAAM,QAAQ,OAAO;AAAA;AAGvB,MAAM,mBAAmB,CAAC,SAAkC;AACjE,QAAM,CAAC,OAAO,YAAY,qBAAM,SAAS;AAEzC,SACE,mDAAC,eAAD;AAAA,IAAM,eAAc;AAAA,IAAS,QAAQ;AAAA,KACnC,mDAAC,sBAAD;AAAA,OACM;AAAA,IACJ;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,aAAa;AAAA,MAEf,mDAAC,QAAD,MACE,mDAAC,eAAD;AAAA,IAAM,SAAQ;AAAA,KAAQ,YACrB;AAAA;",
+  "names": []
+}

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

@@ -0,0 +1,202 @@
+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, {
+  BaseInput: () => BaseInput,
+  ClearableButtonUnstyled: () => ClearableButtonUnstyled,
+  InputContainer: () => InputContainer,
+  InputErrorContainer: () => InputErrorContainer,
+  InputRenderLeftContainer: () => InputRenderLeftContainer,
+  InputRenderRightContainer: () => InputRenderRightContainer,
+  InputWarningContainer: () => InputWarningContainer,
+  default: () => BaseInput_default
+});
+var import_styled_components = __toModule(require("styled-components"));
+var import_styled_system = __toModule(require("styled-system"));
+var import_react = __toModule(require("react"));
+var import_CircledCrossSolidMedium = __toModule(require("@ledgerhq/icons-ui/react/CircledCrossSolidMedium"));
+var import_Flex = __toModule(require("../../layout/Flex"));
+var import_Text = __toModule(require("../../asorted/Text"));
+var import_helpers = __toModule(require("../../../styles/helpers"));
+var import_Button = __toModule(require("../../cta/Button"));
+const InputContainer = import_styled_components.default.div`
+  display: flex;
+  height: 48px;
+  border: ${(p) => `1px solid ${p.theme.colors.neutral.c40}`};
+  border-radius: 24px;
+  transition: all 0.2s ease;
+  color: ${(p) => p.theme.colors.neutral.c100};
+
+  ${(p) => p.focus && !p.error && !p.warning && import_styled_components.css`
+      border: 1px solid ${p.theme.colors.primary.c80};
+      box-shadow: 0 0 0 4px ${(0, import_helpers.rgba)(p.theme.colors.primary.c60, 0.4)};
+    `};
+
+  ${(p) => p.error && !p.disabled && import_styled_components.css`
+      border: 1px solid ${p.theme.colors.error.c100};
+    `};
+
+  ${(p) => !p.error && p.warning && !p.disabled && import_styled_components.css`
+      border: 1px solid ${p.theme.colors.warning.c80};
+    `};
+
+  ${(p) => !p.error && !p.warning && !p.disabled && import_styled_components.css`
+      &:hover {
+        border: ${!p.disabled && `1px solid ${p.theme.colors.primary.c80}`};
+      }
+    `};
+
+  ${(p) => p.disabled && import_styled_components.css`
+      color: ${p.theme.colors.neutral.c60};
+      background: ${(p2) => p2.theme.colors.neutral.c20};
+    `};
+`;
+const BaseInput = import_styled_components.default.input.attrs({
+  fontSize: "paragraph",
+  fontWeight: "medium"
+})`
+  height: 100%;
+  width: 100%;
+  border: 0;
+  caret-color: ${(p) => p.error ? p.theme.colors.error.c100 : p.theme.colors.primary.c80};
+  background: none;
+  outline: none;
+  cursor: ${(p) => p.disabled ? "not-allowed" : "text"};
+  flex-shrink: 1;
+  padding-top: 14px;
+  padding-bottom: 14px;
+  padding-left: 20px;
+  padding-right: 20px;
+  &::placeholder {
+    color: ${(p) => p.disabled ? p.theme.colors.neutral.c50 : p.theme.colors.neutral.c70};
+  }
+
+  /* Hide type=number arrow for Chrome, Safari, Edge, Opera */
+  &::-webkit-outer-spin-button,
+  ::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  /* Hide type=number arrow for Firefox */
+  &[type="number"] {
+    -moz-appearance: textfield;
+  }
+
+  ${import_styled_system.typography}
+`;
+const InputErrorContainer = (0, import_styled_components.default)(import_Text.default)`
+  color: ${(p) => p.theme.colors.error.c100};
+  margin-left: 12px;
+`;
+const InputWarningContainer = (0, import_styled_components.default)(import_Text.default)`
+  color: ${(p) => p.theme.colors.warning.c80};
+  margin-left: 12px;
+`;
+const InputRenderLeftContainer = (0, import_styled_components.default)(import_Flex.default).attrs(() => ({
+  alignItems: "center",
+  pl: "16px"
+}))``;
+const InputRenderRightContainer = (0, import_styled_components.default)(import_Flex.default).attrs(() => ({
+  alignItems: "center",
+  pr: "16px"
+}))``;
+const ClearableButtonUnstyled = (0, import_styled_components.default)(import_Button.ButtonUnstyled)`
+  display: flex;
+`;
+const IDENTITY = (_) => _;
+function Input(props, ref) {
+  const {
+    value,
+    disabled,
+    error,
+    warning,
+    onChange,
+    onChangeEvent,
+    renderLeft,
+    renderRight,
+    unwrapped,
+    containerProps,
+    serialize = IDENTITY,
+    deserialize = IDENTITY,
+    clearable,
+    ...htmlInputProps
+  } = props;
+  const [focus, setFocus] = (0, import_react.useState)(false);
+  const inputValue = (0, import_react.useMemo)(() => serialize(value), [serialize, value]);
+  const handleChange = (0, import_react.useCallback)((e) => {
+    onChange && onChange(deserialize(e.target.value));
+    onChangeEvent && onChangeEvent(e);
+  }, [onChange, onChangeEvent, deserialize]);
+  const handleClear = (0, import_react.useCallback)(() => {
+    onChange && onChange(deserialize(""));
+  }, [onChange, deserialize]);
+  const inner = /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, typeof renderLeft === "function" ? renderLeft(props) : renderLeft, /* @__PURE__ */ import_react.default.createElement(BaseInput, {
+    ref,
+    ...htmlInputProps,
+    disabled,
+    error,
+    warning,
+    onChange: handleChange,
+    value: inputValue,
+    onFocus: (event) => {
+      setFocus(true);
+      htmlInputProps.onFocus && htmlInputProps.onFocus(event);
+    },
+    onBlur: (event) => {
+      setFocus(false);
+      htmlInputProps.onBlur && htmlInputProps.onBlur(event);
+    }
+  }), clearable && inputValue && /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
+    alignItems: "center",
+    mr: 7
+  }, /* @__PURE__ */ import_react.default.createElement(ClearableButtonUnstyled, {
+    onClick: handleClear
+  }, /* @__PURE__ */ import_react.default.createElement(import_CircledCrossSolidMedium.default, {
+    size: 18,
+    color: "neutral.c50"
+  }))), typeof renderRight === "function" ? renderRight(props) : renderRight);
+  if (unwrapped) {
+    return /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
+      alignItems: "stretch",
+      style: { height: "100%" }
+    }, inner);
+  }
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(InputContainer, {
+    disabled,
+    focus,
+    error,
+    warning,
+    ...containerProps
+  }, inner), (error || warning) && !disabled && /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
+    flexDirection: "column",
+    rowGap: 2,
+    mt: 2
+  }, error && /* @__PURE__ */ import_react.default.createElement(InputErrorContainer, {
+    variant: "small"
+  }, error), warning && /* @__PURE__ */ import_react.default.createElement(InputWarningContainer, {
+    variant: "small"
+  }, warning)));
+}
+var BaseInput_default = import_react.default.forwardRef(Input);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,+BAA4B;AAC5B,2BAA4C;AAC5C,mBAA2E;AAC3E,qCAAoC;AACpC,kBAAoB;AACpB,kBAAiB;AACjB,qBAAqB;AACrB,oBAA+B;AAuCxB,MAAM,iBAAiB,iCAAO;AAAA;AAAA;AAAA,YAGzB,CAAC,MAAM,aAAa,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,WAG5C,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA,IAErC,CAAC,MACD,EAAE,SACF,CAAC,EAAE,SACH,CAAC,EAAE,WACH;AAAA,0BACsB,EAAE,MAAM,OAAO,QAAQ;AAAA,8BACnB,yBAAK,EAAE,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA,IAG3D,CAAC,MACD,EAAE,SACF,CAAC,EAAE,YACH;AAAA,0BACsB,EAAE,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA,IAG3C,CAAC,MACD,CAAC,EAAE,SACH,EAAE,WACF,CAAC,EAAE,YACH;AAAA,0BACsB,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,IAG7C,CAAC,MACD,CAAC,EAAE,SACH,CAAC,EAAE,WACH,CAAC,EAAE,YACH;AAAA;AAAA,kBAEc,CAAC,EAAE,YAAY,aAAa,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,IAIjE,CAAC,MACD,EAAE,YACF;AAAA,eACW,EAAE,MAAM,OAAO,QAAQ;AAAA,oBAClB,CAAC,OAAM,GAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAI3C,MAAM,YAAY,iCAAO,MAAM,MAEpC;AAAA,EACA,UAAU;AAAA,EACV,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,iBAKG,CAAC,MAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,MAAM,OAAO,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,YAG1E,CAAC,MAAO,EAAE,WAAW,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAOpC,CAAC,MAAO,EAAE,WAAW,EAAE,MAAM,OAAO,QAAQ,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAelF;AAAA;AAGG,MAAM,sBAAsB,sCAAO;AAAA,WAC/B,CAAC,MAAM,EAAE,MAAM,OAAO,MAAM;AAAA;AAAA;AAGhC,MAAM,wBAAwB,sCAAO;AAAA,WACjC,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAIlC,MAAM,2BAA2B,sCAAO,qBAAS,MAAM,MAAO;AAAA,EACnE,YAAY;AAAA,EACZ,IAAI;AAAA;AAGC,MAAM,4BAA4B,sCAAO,qBAAS,MAAM,MAAO;AAAA,EACpE,YAAY;AAAA,EACZ,IAAI;AAAA;AAGC,MAAM,0BAA0B,sCAAO;AAAA;AAAA;AAM9C,MAAM,WAAW,CAAC,MAAgB;AAElC,eACE,OACA,KACa;AACb,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,cAAc;AAAA,IACd;AAAA,OACG;AAAA,MACD;AACJ,QAAM,CAAC,OAAO,YAAY,2BAAS;AACnC,QAAM,aAAa,0BAAQ,MAAM,UAAU,QAAQ,CAAC,WAAW;AAE/D,QAAM,eAAe,8BACnB,CAAC,MAA2C;AAC1C,gBAAY,SAAS,YAAY,EAAE,OAAO;AAC1C,qBAAiB,cAAc;AAAA,KAEjC,CAAC,UAAU,eAAe;AAG5B,QAAM,cAAc,8BAAY,MAAM;AACpC,gBAAY,SAAS,YAAY;AAAA,KAChC,CAAC,UAAU;AAEd,QAAM,QACJ,wFACG,OAAO,eAAe,aAAa,WAAW,SAAS,YACxD,mDAAC,WAAD;AAAA,IACE;AAAA,OACI;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,OAAO;AAAA,IACP,SAAS,CAAC,UAA8C;AACtD,eAAS;AACT,qBAAe,WAAW,eAAe,QAAQ;AAAA;AAAA,IAEnD,QAAQ,CAAC,UAA8C;AACrD,eAAS;AACT,qBAAe,UAAU,eAAe,OAAO;AAAA;AAAA,MAGlD,aAAa,cACZ,mDAAC,qBAAD;AAAA,IAAS,YAAY;AAAA,IAAU,IAAI;AAAA,KACjC,mDAAC,yBAAD;AAAA,IAAyB,SAAS;AAAA,KAChC,mDAAC,wCAAD;AAAA,IAAyB,MAAM;AAAA,IAAI,OAAO;AAAA,QAI/C,OAAO,gBAAgB,aAAa,YAAY,SAAS;AAI9D,MAAI,WAAW;AACb,WACE,mDAAC,qBAAD;AAAA,MAAS,YAAW;AAAA,MAAU,OAAO,EAAE,QAAQ;AAAA,OAC5C;AAAA;AAKP,SACE,mDAAC,OAAD,MACE,mDAAC,gBAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,OACI;AAAA,KAEH,QAED,UAAS,YAAY,CAAC,YACtB,mDAAC,qBAAD;AAAA,IAAS,eAAc;AAAA,IAAS,QAAQ;AAAA,IAAG,IAAI;AAAA,KAC5C,SAAS,mDAAC,qBAAD;AAAA,IAAqB,SAAQ;AAAA,KAAS,QAC/C,WAAW,mDAAC,uBAAD;AAAA,IAAuB,SAAQ;AAAA,KAAS;AAAA;AAO9D,IAAO,oBAAQ,qBAAM,WAAW;",
+  "names": []
+}

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

@@ -0,0 +1,129 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+__export(exports, {
+  default: () => Checkbox_default
+});
+var import_react = __toModule(require("react"));
+var import_styled_components = __toModule(require("styled-components"));
+var import_Text = __toModule(require("../../asorted/Text"));
+var import_CheckAloneRegular = __toModule(require("@ledgerhq/icons-ui/react/CheckAloneRegular"));
+var import_server = __toModule(require("react-dom/server"));
+const Icon = () => import_react.default.cloneElement((0, import_CheckAloneRegular.default)({ size: 13, color: "white" }), {
+  xmlns: "http://www.w3.org/2000/svg"
+});
+const CheckMarkIcon = encodeURIComponent((0, import_server.renderToStaticMarkup)(/* @__PURE__ */ import_react.default.createElement(Icon, null)));
+const Input = import_styled_components.default.input`
+  background-color: transparent;
+
+  border-radius: ${(p) => `${p.theme.radii[1]}px`};
+  position: relative;
+
+  width: ${(p) => p.theme.space[7]}px;
+  height: ${(p) => p.theme.space[7]}px;
+  appearance: none;
+  border: 1px solid ${(props) => props.theme.colors.neutral.c90};
+  box-shadow: none;
+
+  &:checked {
+    background-color: currentColor;
+    border-color: currentColor;
+  }
+
+  &:checked::after {
+    content: " ";
+    width: ${(p) => p.theme.space[7]}px;
+    height: ${(p) => p.theme.space[7]}px;
+    display: inline-block;
+
+    background-image: url("data:image/svg+xml,${CheckMarkIcon}");
+    background-position: center;
+    background-repeat: no-repeat;
+
+    /* Trick to center the check mark by taking into account the border */
+    position: absolute;
+    top: -1px;
+    left: -1px;
+  }
+`;
+const Label = (0, import_styled_components.default)(import_Text.default).attrs({ type: "body", fontWeight: "500" })`
+  color: ${(props) => props.theme.colors.neutral.c80};
+
+  /* Version when the input is checked */
+  ${Input}:checked + & {
+    color: currentColor;
+  }
+
+  &:first-letter {
+    text-transform: uppercase;
+  }
+`;
+const Container = import_styled_components.default.div`
+  --ll-checkbox-color: unset;
+  color: var(--ll-checkbox-color, ${(props) => props.theme.colors.primary.c90});
+
+  display: inline-flex;
+  column-gap: ${(p) => p.theme.space[5]}px;
+  align-items: center;
+  cursor: pointer;
+
+  &[data-variant="default"] {
+    --ll-checkbox-color: ${(props) => props.theme.colors.primary.c90};
+  }
+
+  &[data-variant="success"] {
+    --ll-checkbox-color: ${(props) => props.theme.colors.success.c100};
+  }
+
+  &[data-variant="error"] {
+    --ll-checkbox-color: ${(props) => props.theme.colors.error.c100};
+  }
+
+  &[data-disabled="true"] {
+    --ll-checkbox-color: ${(props) => props.theme.colors.neutral.c80};
+    cursor: unset;
+  }
+`;
+const Checkbox = ({
+  isDisabled = false,
+  variant = "default",
+  label,
+  isChecked,
+  name,
+  onChange
+}) => /* @__PURE__ */ import_react.default.createElement(Container, {
+  "data-variant": variant,
+  "data-disabled": isDisabled
+}, /* @__PURE__ */ import_react.default.createElement(Input, {
+  type: "checkbox",
+  name,
+  id: name,
+  checked: isChecked,
+  disabled: isDisabled,
+  onChange
+}), label ? /* @__PURE__ */ import_react.default.createElement(Label, {
+  as: "label",
+  htmlFor: name
+}, label) : null);
+var Checkbox_default = Checkbox;
+//# sourceMappingURL=Checkbox.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/form/Checkbox/Checkbox.tsx"],
+  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport Text from \"../../asorted/Text\";\nimport CheckAloneRegular from \"@ledgerhq/icons-ui/react/CheckAloneRegular\";\nimport { renderToStaticMarkup } from \"react-dom/server\";\n\nconst Icon = () =>\n  React.cloneElement(CheckAloneRegular({ size: 13, color: \"white\" }), {\n    // the xmlns attribute is required to properly display the checkbox\n    xmlns: \"http://www.w3.org/2000/svg\",\n  });\nconst CheckMarkIcon = encodeURIComponent(renderToStaticMarkup(<Icon />));\n\nconst Input = styled.input`\n  background-color: transparent;\n\n  border-radius: ${(p) => `${p.theme.radii[1]}px`};\n  position: relative;\n\n  width: ${(p) => p.theme.space[7]}px;\n  height: ${(p) => p.theme.space[7]}px;\n  appearance: none;\n  border: 1px solid ${(props) => props.theme.colors.neutral.c90};\n  box-shadow: none;\n\n  &:checked {\n    background-color: currentColor;\n    border-color: currentColor;\n  }\n\n  &:checked::after {\n    content: \" \";\n    width: ${(p) => p.theme.space[7]}px;\n    height: ${(p) => p.theme.space[7]}px;\n    display: inline-block;\n\n    background-image: url(\"data:image/svg+xml,${CheckMarkIcon}\");\n    background-position: center;\n    background-repeat: no-repeat;\n\n    /* Trick to center the check mark by taking into account the border */\n    position: absolute;\n    top: -1px;\n    left: -1px;\n  }\n`;\n\nconst Label = styled(Text).attrs({ type: \"body\", fontWeight: \"500\" })`\n  color: ${(props) => props.theme.colors.neutral.c80};\n\n  /* Version when the input is checked */\n  ${Input}:checked + & {\n    color: currentColor;\n  }\n\n  &:first-letter {\n    text-transform: uppercase;\n  }\n`;\n\nconst Container = styled.div`\n  --ll-checkbox-color: unset;\n  color: var(--ll-checkbox-color, ${(props) => props.theme.colors.primary.c90});\n\n  display: inline-flex;\n  column-gap: ${(p) => p.theme.space[5]}px;\n  align-items: center;\n  cursor: pointer;\n\n  &[data-variant=\"default\"] {\n    --ll-checkbox-color: ${(props) => props.theme.colors.primary.c90};\n  }\n\n  &[data-variant=\"success\"] {\n    --ll-checkbox-color: ${(props) => props.theme.colors.success.c100};\n  }\n\n  &[data-variant=\"error\"] {\n    --ll-checkbox-color: ${(props) => props.theme.colors.error.c100};\n  }\n\n  &[data-disabled=\"true\"] {\n    --ll-checkbox-color: ${(props) => props.theme.colors.neutral.c80};\n    cursor: unset;\n  }\n`;\n\nexport type CheckboxProps = {\n  isDisabled?: boolean;\n  isChecked: boolean;\n  variant?: \"default\" | \"success\" | \"error\";\n  label?: React.ReactNode;\n  name: string;\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n};\n\nconst Checkbox = ({\n  isDisabled = false,\n  variant = \"default\",\n  label,\n  isChecked,\n  name,\n  onChange,\n}: CheckboxProps): JSX.Element => (\n  <Container data-variant={variant} data-disabled={isDisabled}>\n    <Input\n      type=\"checkbox\"\n      name={name}\n      id={name}\n      checked={isChecked}\n      disabled={isDisabled}\n      onChange={onChange}\n    />\n    {label ? (\n      <Label as=\"label\" htmlFor={name}>\n        {label}\n      </Label>\n    ) : null}\n  </Container>\n);\n\nexport default Checkbox;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAiB;AACjB,+BAA8B;AAC9B,oBAAqC;AAErC,MAAM,OAAO,MACX,qBAAM,aAAa,sCAAkB,EAAE,MAAM,IAAI,OAAO,YAAY;AAAA,EAElE,OAAO;AAAA;AAEX,MAAM,gBAAgB,mBAAmB,wCAAqB,mDAAC,MAAD;AAE9D,MAAM,QAAQ,iCAAO;AAAA;AAAA;AAAA,mBAGF,CAAC,MAAM,GAAG,EAAE,MAAM,MAAM;AAAA;AAAA;AAAA,WAGhC,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA,YACpB,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA;AAAA,sBAEX,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAU/C,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA,cACpB,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA;AAAA;AAAA,gDAGa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWhD,MAAM,QAAQ,sCAAO,qBAAM,MAAM,EAAE,MAAM,QAAQ,YAAY;AAAA,WAClD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,IAG7C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASJ,MAAM,YAAY,iCAAO;AAAA;AAAA,oCAEW,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,gBAG1D,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,2BAKV,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,2BAItC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,2BAItC,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA,2BAIpC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAcjE,MAAM,WAAW,CAAC;AAAA,EAChB,aAAa;AAAA,EACb,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MAEA,mDAAC,WAAD;AAAA,EAAW,gBAAc;AAAA,EAAS,iBAAe;AAAA,GAC/C,mDAAC,OAAD;AAAA,EACE,MAAK;AAAA,EACL;AAAA,EACA,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,UAAU;AAAA,EACV;AAAA,IAED,QACC,mDAAC,OAAD;AAAA,EAAO,IAAG;AAAA,EAAQ,SAAS;AAAA,GACxB,SAED;AAIR,IAAO,mBAAQ;",
+  "names": []
+}