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

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

@@ -1,27 +1,33 @@
+"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 BaseInput_exports = {};
+__export(BaseInput_exports, {
   BaseInput: () => BaseInput,
   ClearableButtonUnstyled: () => ClearableButtonUnstyled,
   InputContainer: () => InputContainer,
@@ -32,14 +38,15 @@ __export(exports, {
   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"));
+module.exports = __toCommonJS(BaseInput_exports);
+var import_styled_components = __toESM(require("styled-components"));
+var import_styled_system = require("styled-system");
+var import_react = __toESM(require("react"));
+var import_CircledCrossSolidMedium = __toESM(require("@ledgerhq/icons-ui/react/CircledCrossSolidMedium"));
+var import_Flex = __toESM(require("../../layout/Flex"));
+var import_Text = __toESM(require("../../asorted/Text"));
+var import_helpers = require("../../../styles/helpers");
+var import_Button = require("../../cta/Button");
 const InputContainer = import_styled_components.default.div`
   display: flex;
   height: 48px;
@@ -151,62 +158,51 @@ function Input(props, ref) {
   } = 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 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,
-    info,
-    onChange: handleChange,
-    value: inputValue,
-    onFocus: (event) => {
-      setFocus(true);
-      htmlInputProps.onFocus && htmlInputProps.onFocus(event);
-    },
-    onBlur: (event) => {
-      setFocus(false);
-      htmlInputProps.onBlur && htmlInputProps.onBlur(event);
+  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,
+      info,
+      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);
+  ), 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(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 || info) && !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) : info ? /* @__PURE__ */ import_react.default.createElement(InputInfoContainer, {
-    variant: "small"
-  }, info) : null));
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+    InputContainer,
+    {
+      disabled,
+      focus,
+      error,
+      warning,
+      ...containerProps
+    },
+    inner
+  ), (error || warning || info) && !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) : info ? /* @__PURE__ */ import_react.default.createElement(InputInfoContainer, { variant: "small" }, info) : null));
 }
 var BaseInput_default = import_react.default.forwardRef(Input);
 //# sourceMappingURL=index.js.map

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

@@ -2,6 +2,6 @@
   "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    info?: 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-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`;\nexport const InputInfoContainer = styled(Text)`\n  color: ${(p) => p.theme.colors.neutral.c60};\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    info,\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        info={info}\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 || info) && !disabled && (\n        <FlexBox flexDirection=\"column\" rowGap={2} mt={2}>\n          {error ? (\n            <InputErrorContainer variant=\"small\">{error}</InputErrorContainer>\n          ) : warning ? (\n            <InputWarningContainer variant=\"small\">{warning}</InputWarningContainer>\n          ) : info ? (\n            <InputInfoContainer variant=\"small\">{info}</InputInfoContainer>\n          ) : null}\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;AAAA,+BAA4B;AAC5B,2BAA4C;AAC5C,mBAA2E;AAC3E,qCAAoC;AACpC,kBAAoB;AACpB,kBAAiB;AACjB,qBAAqB;AACrB,oBAA+B;AAwCxB,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,aAKpC,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;AAAA;AAAA;AAAA,IAkBlF;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;AAGlC,MAAM,qBAAqB,sCAAO;AAAA,WAC9B,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;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;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,WAAW,SAAS,CAAC,YAC9B,mDAAC,qBAAD;AAAA,IAAS,eAAc;AAAA,IAAS,QAAQ;AAAA,IAAG,IAAI;AAAA,KAC5C,QACC,mDAAC,qBAAD;AAAA,IAAqB,SAAQ;AAAA,KAAS,SACpC,UACF,mDAAC,uBAAD;AAAA,IAAuB,SAAQ;AAAA,KAAS,WACtC,OACF,mDAAC,oBAAD;AAAA,IAAoB,SAAQ;AAAA,KAAS,QACnC;AAAA;AAOd,IAAO,oBAAQ,qBAAM,WAAW;",
-  "names": []
+  "mappings": "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",
+  "names": ["styled", "p", "Text", "FlexBox", "React", "CircledCrossSolidMedium"]
 }

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

@@ -1,35 +1,43 @@
+"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 Checkbox_exports = {};
+__export(Checkbox_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: "currentColor" }), {
+module.exports = __toCommonJS(Checkbox_exports);
+var import_react = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+var import_Text = __toESM(require("../../asorted/Text"));
+var import_CheckAloneMedium = __toESM(require("@ledgerhq/icons-ui/react/CheckAloneMedium"));
+var import_server = require("react-dom/server");
+const Icon = () => import_react.default.cloneElement((0, import_CheckAloneMedium.default)({ size: 13, color: "currentColor" }), {
+  // the xmlns attribute is required to properly display the checkbox
   xmlns: "http://www.w3.org/2000/svg"
 });
 const CheckMarkIcon = encodeURIComponent((0, import_server.renderToStaticMarkup)(/* @__PURE__ */ import_react.default.createElement(Icon, null)));
@@ -112,19 +120,6 @@ const Checkbox = ({
   isChecked,
   name,
   onChange
-}) => /* @__PURE__ */ import_react.default.createElement(Container, {
-  "data-variant": variant,
-  "data-disabled": isDisabled,
-  onClick: () => onChange(!isChecked)
-}, /* @__PURE__ */ import_react.default.createElement(Input, {
-  type: "checkbox",
-  name,
-  id: name,
-  checked: isChecked,
-  disabled: isDisabled
-}), label ? /* @__PURE__ */ import_react.default.createElement(Label, {
-  as: "label",
-  htmlFor: name
-}, label) : null);
+}) => /* @__PURE__ */ import_react.default.createElement(Container, { "data-variant": variant, "data-disabled": isDisabled, onClick: () => onChange(!isChecked) }, /* @__PURE__ */ import_react.default.createElement(Input, { type: "checkbox", name, id: name, checked: isChecked, disabled: isDisabled }), 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

@@ -1,7 +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: \"currentColor\" }), {\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  min-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    color: ${(props) => props.theme.colors.neutral.c00};\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: (value: boolean) => 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} onClick={() => onChange(!isChecked)}>\n    <Input type=\"checkbox\" name={name} id={name} checked={isChecked} disabled={isDisabled} />\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,mBAAmB;AAAA,EAEzE,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,eAG5B,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA,YACxB,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,aAEtB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,gDAEH;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,EAAY,SAAS,MAAM,SAAS,CAAC;AAAA,GACpF,mDAAC,OAAD;AAAA,EAAO,MAAK;AAAA,EAAW;AAAA,EAAY,IAAI;AAAA,EAAM,SAAS;AAAA,EAAW,UAAU;AAAA,IAC1E,QACC,mDAAC,OAAD;AAAA,EAAO,IAAG;AAAA,EAAQ,SAAS;AAAA,GACxB,SAED;AAIR,IAAO,mBAAQ;",
-  "names": []
+  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport Text from \"../../asorted/Text\";\nimport CheckAloneMedium from \"@ledgerhq/icons-ui/react/CheckAloneMedium\";\nimport { renderToStaticMarkup } from \"react-dom/server\";\n\nconst Icon = () =>\n  React.cloneElement(CheckAloneMedium({ size: 13, color: \"currentColor\" }), {\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  min-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    color: ${(props) => props.theme.colors.neutral.c00};\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: (value: boolean) => 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} onClick={() => onChange(!isChecked)}>\n    <Input type=\"checkbox\" name={name} id={name} checked={isChecked} disabled={isDisabled} />\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;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAiB;AACjB,8BAA6B;AAC7B,oBAAqC;AAErC,MAAM,OAAO,MACX,aAAAA,QAAM,iBAAa,wBAAAC,SAAiB,EAAE,MAAM,IAAI,OAAO,eAAe,CAAC,GAAG;AAAA;AAAA,EAExE,OAAO;AACT,CAAC;AACH,MAAM,gBAAgB,uBAAmB,oCAAqB,6BAAAD,QAAA,cAAC,UAAK,CAAE,CAAC;AAEvE,MAAM,QAAQ,yBAAAE,QAAO;AAAA;AAAA;AAAA,mBAGF,CAAC,MAAM,GAAG,EAAE,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA,eAG7B,CAAC,MAAM,EAAE,MAAM,MAAM,CAAC;AAAA,YACzB,CAAC,MAAM,EAAE,MAAM,MAAM,CAAC;AAAA;AAAA,sBAEZ,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAU/C,CAAC,MAAM,EAAE,MAAM,MAAM,CAAC;AAAA,cACrB,CAAC,MAAM,EAAE,MAAM,MAAM,CAAC;AAAA;AAAA,aAEvB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,gDAEH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWhD,MAAM,YAAQ,yBAAAA,SAAO,YAAAC,OAAI,EAAE,MAAM,EAAE,MAAM,QAAQ,YAAY,MAAM,CAAC;AAAA,WACzD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,IAG7C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASJ,MAAM,YAAY,yBAAAD,QAAO;AAAA;AAAA,oCAEW,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,gBAG1D,CAAC,MAAM,EAAE,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,2BAKX,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;AACF,MACE,6BAAAF,QAAA,cAAC,aAAU,gBAAc,SAAS,iBAAe,YAAY,SAAS,MAAM,SAAS,CAAC,SAAS,KAC7F,6BAAAA,QAAA,cAAC,SAAM,MAAK,YAAW,MAAY,IAAI,MAAM,SAAS,WAAW,UAAU,YAAY,GACtF,QACC,6BAAAA,QAAA,cAAC,SAAM,IAAG,SAAQ,SAAS,QACxB,KACH,IACE,IACN;AAGF,IAAO,mBAAQ;",
+  "names": ["React", "CheckAloneMedium", "styled", "Text"]
 }

package/lib/cjs/components/form/Checkbox/Checkbox.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 Checkbox_stories_exports = {};
+__export(Checkbox_stories_exports, {
   Default: () => Default,
   Error: () => Error2,
   Success: () => Success,
   default: () => Checkbox_stories_default
 });
-var import_react = __toModule(require("react"));
-var import_client_api = __toModule(require("@storybook/client-api"));
-var import_index = __toModule(require("./index"));
+module.exports = __toCommonJS(Checkbox_stories_exports);
+var import_react = __toESM(require("react"));
+var import_client_api = require("@storybook/client-api");
+var import_index = __toESM(require("./index"));
 var Checkbox_stories_default = {
   title: "Form/SelectionControls/Checkbox",
   component: import_index.default,
@@ -64,10 +71,7 @@ var Checkbox_stories_default = {
 const Template = (args) => {
   const [currentArgs, updateArgs] = (0, import_client_api.useArgs)();
   const handleChange = () => updateArgs({ isChecked: !currentArgs.isChecked });
-  return /* @__PURE__ */ import_react.default.createElement(import_index.default, {
-    ...args,
-    onChange: handleChange
-  });
+  return /* @__PURE__ */ import_react.default.createElement(import_index.default, { ...args, onChange: handleChange });
 };
 const Default = Template.bind({});
 const Success = Template.bind({});

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../src/components/form/Checkbox/Checkbox.stories.tsx"],
   "sourcesContent": ["import React from \"react\";\n// @ts-expect-error Typings\u2026\nimport { useArgs } from \"@storybook/client-api\";\n\nimport Checkbox from \"./index\";\nimport type { CheckboxProps } from \"./Checkbox\";\nimport { StoryTemplate } from \"../../helpers\";\n\nexport default {\n  title: \"Form/SelectionControls/Checkbox\",\n  component: Checkbox,\n  argTypes: {\n    isDisabled: {\n      type: \"boolean\",\n      description: \"Control if the component is disabled or not\",\n      required: false,\n      control: { type: \"boolean\" },\n    },\n    isChecked: {\n      type: \"boolean\",\n      description: \"Control if the component is checked or not\",\n      required: true,\n      control: { type: \"boolean\" },\n    },\n    variant: {\n      type: \"text\",\n      description: \"default | success | error\",\n      required: false,\n      control: false,\n    },\n    label: {\n      type: \"text\",\n      description: \"Any valid string\",\n      required: false,\n      control: { type: \"text\" },\n    },\n    name: { control: false },\n  },\n};\n\nconst Template = (args: CheckboxProps) => {\n  const [currentArgs, updateArgs] = useArgs();\n\n  const handleChange = () => updateArgs({ isChecked: !currentArgs.isChecked });\n\n  return <Checkbox {...args} onChange={handleChange} />;\n};\n\nexport const Default: StoryTemplate<CheckboxProps> = Template.bind({});\nexport const Success: StoryTemplate<CheckboxProps> = Template.bind({});\nexport const Error: StoryTemplate<CheckboxProps> = Template.bind({});\n\nDefault.args = {\n  isChecked: false,\n  label: \"checkbox with label\",\n  variant: \"default\",\n  name: \"default checkbox\",\n};\n\nSuccess.args = {\n  isChecked: false,\n  label: \"checkbox with label\",\n  variant: \"success\",\n  name: \"success checkbox\",\n};\n\nError.args = {\n  isChecked: false,\n  label: \"checkbox with label\",\n  variant: \"error\",\n  name: \"error checkbox\",\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,wBAAwB;AAExB,mBAAqB;AAIrB,IAAO,2BAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,IACR,YAAY;AAAA,MACV,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS,EAAE,MAAM;AAAA;AAAA,IAEnB,WAAW;AAAA,MACT,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS,EAAE,MAAM;AAAA;AAAA,IAEnB,SAAS;AAAA,MACP,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS;AAAA;AAAA,IAEX,OAAO;AAAA,MACL,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS,EAAE,MAAM;AAAA;AAAA,IAEnB,MAAM,EAAE,SAAS;AAAA;AAAA;AAIrB,MAAM,WAAW,CAAC,SAAwB;AACxC,QAAM,CAAC,aAAa,cAAc;AAElC,QAAM,eAAe,MAAM,WAAW,EAAE,WAAW,CAAC,YAAY;AAEhE,SAAO,mDAAC,sBAAD;AAAA,OAAc;AAAA,IAAM,UAAU;AAAA;AAAA;AAGhC,MAAM,UAAwC,SAAS,KAAK;AAC5D,MAAM,UAAwC,SAAS,KAAK;AAC5D,MAAM,SAAsC,SAAS,KAAK;AAEjE,QAAQ,OAAO;AAAA,EACb,WAAW;AAAA,EACX,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AAAA;AAGR,QAAQ,OAAO;AAAA,EACb,WAAW;AAAA,EACX,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AAAA;AAGR,OAAM,OAAO;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AAAA;",
-  "names": []
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,eAAAA;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,wBAAwB;AAExB,mBAAqB;AAIrB,IAAO,2BAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAC;AAAA,EACX,UAAU;AAAA,IACR,YAAY;AAAA,MACV,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS,EAAE,MAAM,UAAU;AAAA,IAC7B;AAAA,IACA,WAAW;AAAA,MACT,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS,EAAE,MAAM,UAAU;AAAA,IAC7B;AAAA,IACA,SAAS;AAAA,MACP,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS;AAAA,IACX;AAAA,IACA,OAAO;AAAA,MACL,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS,EAAE,MAAM,OAAO;AAAA,IAC1B;AAAA,IACA,MAAM,EAAE,SAAS,MAAM;AAAA,EACzB;AACF;AAEA,MAAM,WAAW,CAAC,SAAwB;AACxC,QAAM,CAAC,aAAa,UAAU,QAAI,2BAAQ;AAE1C,QAAM,eAAe,MAAM,WAAW,EAAE,WAAW,CAAC,YAAY,UAAU,CAAC;AAE3E,SAAO,6BAAAC,QAAA,cAAC,aAAAD,SAAA,EAAU,GAAG,MAAM,UAAU,cAAc;AACrD;AAEO,MAAM,UAAwC,SAAS,KAAK,CAAC,CAAC;AAC9D,MAAM,UAAwC,SAAS,KAAK,CAAC,CAAC;AAC9D,MAAMD,SAAsC,SAAS,KAAK,CAAC,CAAC;AAEnE,QAAQ,OAAO;AAAA,EACb,WAAW;AAAA,EACX,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AACR;AAEA,QAAQ,OAAO;AAAA,EACb,WAAW;AAAA,EACX,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AACR;AAEAA,OAAM,OAAO;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AACR;",
+  "names": ["Error", "Checkbox", "React"]
 }

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

@@ -1,28 +1,35 @@
+"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 Checkbox_exports = {};
+__export(Checkbox_exports, {
   default: () => import_Checkbox.default
 });
-var import_Checkbox = __toModule(require("./Checkbox"));
+module.exports = __toCommonJS(Checkbox_exports);
+var import_Checkbox = __toESM(require("./Checkbox"));
 //# sourceMappingURL=index.js.map

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../src/components/form/Checkbox/index.ts"],
   "sourcesContent": ["export { default } from \"./Checkbox\";\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,sBAAwB;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAAwB;",
   "names": []
 }

package/lib/cjs/components/form/Dropdown/Dropdown.stories.js

@@ -1,32 +1,39 @@
+"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 Dropdown_stories_exports = {};
+__export(Dropdown_stories_exports, {
   Dropdown: () => Dropdown,
   default: () => Dropdown_stories_default
 });
-var import_react = __toModule(require("react"));
-var import__ = __toModule(require("."));
+module.exports = __toCommonJS(Dropdown_stories_exports);
+var import_react = __toESM(require("react"));
+var import__ = __toESM(require("."));
 var Dropdown_stories_default = {
   title: "Form/SelectAndDialogs/Dropdown",
   component: import__.default,
@@ -49,12 +56,15 @@ const options = [
 ];
 const Dropdown = (args) => {
   const [value, setValue] = import_react.default.useState(null);
-  return /* @__PURE__ */ import_react.default.createElement(import__.default, {
-    options,
-    value,
-    onChange: setValue,
-    menuPortalTarget: document.body,
-    ...args
-  });
+  return /* @__PURE__ */ import_react.default.createElement(
+    import__.default,
+    {
+      options,
+      value,
+      onChange: setValue,
+      menuPortalTarget: document.body,
+      ...args
+    }
+  );
 };
 //# sourceMappingURL=Dropdown.stories.js.map

package/lib/cjs/components/form/Dropdown/Dropdown.stories.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../src/components/form/Dropdown/Dropdown.stories.tsx"],
   "sourcesContent": ["import React from \"react\";\nimport DropdownComponent, { Props as DropdownProps } from \".\";\n\nexport default {\n  title: \"Form/SelectAndDialogs/Dropdown\",\n  component: DropdownComponent,\n  argTypes: {\n    value: { table: { disable: true } },\n    renderLeft: { table: { disable: true } },\n    renderRight: { table: { disable: true } },\n    rowHeight: { table: { disable: true } },\n    isDisabled: { type: \"boolean\" },\n    error: { type: \"string\" },\n    menuIsOpen: { type: \"boolean\" },\n    label: { type: \"string\", defaultValue: \"Label\" },\n  },\n};\n\nconst options = [\n  { value: \"chocolate\", label: \"Chocolate\" },\n  { value: \"strawberry\", label: \"Strawberry\" },\n  { value: \"lemon\", label: \"Lemon\" },\n  { value: \"vanilla\", label: \"Vanilla\" },\n];\ntype Option = typeof options[0];\n\nexport const Dropdown = (args: DropdownProps<Option>): React.ReactNode => {\n  const [value, setValue] = React.useState<Option | null>(null);\n\n  return (\n    <DropdownComponent\n      options={options}\n      value={value}\n      onChange={setValue}\n      menuPortalTarget={document.body}\n      {...args}\n    />\n  );\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,eAA0D;AAE1D,IAAO,2BAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,IACR,OAAO,EAAE,OAAO,EAAE,SAAS;AAAA,IAC3B,YAAY,EAAE,OAAO,EAAE,SAAS;AAAA,IAChC,aAAa,EAAE,OAAO,EAAE,SAAS;AAAA,IACjC,WAAW,EAAE,OAAO,EAAE,SAAS;AAAA,IAC/B,YAAY,EAAE,MAAM;AAAA,IACpB,OAAO,EAAE,MAAM;AAAA,IACf,YAAY,EAAE,MAAM;AAAA,IACpB,OAAO,EAAE,MAAM,UAAU,cAAc;AAAA;AAAA;AAI3C,MAAM,UAAU;AAAA,EACd,EAAE,OAAO,aAAa,OAAO;AAAA,EAC7B,EAAE,OAAO,cAAc,OAAO;AAAA,EAC9B,EAAE,OAAO,SAAS,OAAO;AAAA,EACzB,EAAE,OAAO,WAAW,OAAO;AAAA;AAItB,MAAM,WAAW,CAAC,SAAiD;AACxE,QAAM,CAAC,OAAO,YAAY,qBAAM,SAAwB;AAExD,SACE,mDAAC,kBAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,kBAAkB,SAAS;AAAA,OACvB;AAAA;AAAA;",
-  "names": []
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,eAA0D;AAE1D,IAAO,2BAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,SAAAA;AAAA,EACX,UAAU;AAAA,IACR,OAAO,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,IAClC,YAAY,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,IACvC,aAAa,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,IACxC,WAAW,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,IACtC,YAAY,EAAE,MAAM,UAAU;AAAA,IAC9B,OAAO,EAAE,MAAM,SAAS;AAAA,IACxB,YAAY,EAAE,MAAM,UAAU;AAAA,IAC9B,OAAO,EAAE,MAAM,UAAU,cAAc,QAAQ;AAAA,EACjD;AACF;AAEA,MAAM,UAAU;AAAA,EACd,EAAE,OAAO,aAAa,OAAO,YAAY;AAAA,EACzC,EAAE,OAAO,cAAc,OAAO,aAAa;AAAA,EAC3C,EAAE,OAAO,SAAS,OAAO,QAAQ;AAAA,EACjC,EAAE,OAAO,WAAW,OAAO,UAAU;AACvC;AAGO,MAAM,WAAW,CAAC,SAAiD;AACxE,QAAM,CAAC,OAAO,QAAQ,IAAI,aAAAC,QAAM,SAAwB,IAAI;AAE5D,SACE,6BAAAA,QAAA;AAAA,IAAC,SAAAD;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,kBAAkB,SAAS;AAAA,MAC1B,GAAG;AAAA;AAAA,EACN;AAEJ;",
+  "names": ["DropdownComponent", "React"]
 }