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

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

@@ -0,0 +1,91 @@
+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: () => SplitInput
+});
+var import_react = __toModule(require("react"));
+var import_styled_components = __toModule(require("styled-components"));
+var import_BaseInput = __toModule(require("../BaseInput"));
+function getDividerColor(props) {
+  if (props.disabled) {
+    return props.theme?.colors.neutral.c40;
+  }
+  if (props.error) {
+    return props.theme?.colors.error.c100;
+  }
+  if (props.focus) {
+    return props.theme?.colors.primary.c80;
+  }
+  return props.theme?.colors.neutral.c40;
+}
+function getHoverBolderColor(props) {
+  return props.disabled || props.error ? "inherit" : props.theme?.colors.primary.c80;
+}
+const Divider = import_styled_components.default.div`
+  border-right: 1px solid;
+  height: 100%;
+  transition: border-color 0.2s ease;
+
+  border-color: ${getDividerColor};
+  ${import_BaseInput.InputContainer}:hover & {
+    border-color: ${getHoverBolderColor};
+  }
+`;
+function SplitInput(props) {
+  const { disabled, isDisabled, renderLeft, renderRight, error } = props;
+  const [focus, setFocus] = import_react.default.useState(false);
+  const onFocus = (0, import_react.useCallback)(() => {
+    setFocus(true);
+  }, [setFocus]);
+  const onBlur = (0, import_react.useCallback)(() => {
+    setFocus(false);
+  }, [setFocus]);
+  const disabledState = typeof disabled !== "undefined" ? disabled : isDisabled;
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_BaseInput.InputContainer, {
+    disabled: disabledState,
+    focus,
+    error
+  }, /* @__PURE__ */ import_react.default.createElement("div", {
+    style: { width: "50%", height: "100%" }
+  }, renderLeft({
+    error,
+    onFocus,
+    onBlur,
+    disabled: disabledState,
+    isDisabled: disabledState
+  })), /* @__PURE__ */ import_react.default.createElement(Divider, {
+    focus,
+    disabled,
+    error
+  }), /* @__PURE__ */ import_react.default.createElement("div", {
+    style: { width: "50%", height: "100%" }
+  }, typeof renderRight === "function" ? renderRight({
+    error,
+    onFocus,
+    onBlur,
+    disabled: disabledState,
+    isDisabled: disabledState
+  }) : renderRight)), error && !disabled && /* @__PURE__ */ import_react.default.createElement(import_BaseInput.InputErrorContainer, null, error));
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/form/SplitInput/index.tsx"],
+  "sourcesContent": ["import React, { useCallback } from \"react\";\nimport styled from \"styled-components\";\nimport { DefaultTheme } from \"styled-components\";\nimport { InputContainer, InputErrorContainer } from \"../BaseInput\";\n\ntype Callbacks = {\n  onFocus: <F>(event: React.FocusEvent<F>) => void;\n  onBlur: <B>(event: React.FocusEvent<B>) => void;\n};\ntype ExtraRenderProps = {\n  renderLeft: (p: StateProps & Callbacks) => React.ReactNode;\n  renderRight: (p: StateProps & Callbacks) => React.ReactNode;\n};\nexport type StateProps = {\n  error?: string | undefined;\n  disabled?: boolean;\n  isDisabled?: boolean;\n};\nexport type Props = StateProps & ExtraRenderProps;\ntype DividerProps = {\n  disabled: boolean | undefined;\n  focus: boolean | undefined;\n  error: string | undefined;\n  theme?: DefaultTheme;\n};\nfunction getDividerColor(props: DividerProps) {\n  if (props.disabled) {\n    return props.theme?.colors.neutral.c40;\n  }\n  if (props.error) {\n    return props.theme?.colors.error.c100;\n  }\n  if (props.focus) {\n    return props.theme?.colors.primary.c80;\n  }\n\n  return props.theme?.colors.neutral.c40;\n}\n\nfunction getHoverBolderColor(props: DividerProps) {\n  return props.disabled || props.error ? \"inherit\" : props.theme?.colors.primary.c80;\n}\n\nconst Divider = styled.div<{\n  disabled: boolean | undefined;\n  focus: boolean | undefined;\n  error: string | undefined;\n}>`\n  border-right: 1px solid;\n  height: 100%;\n  transition: border-color 0.2s ease;\n\n  border-color: ${getDividerColor};\n  ${InputContainer}:hover & {\n    border-color: ${getHoverBolderColor};\n  }\n`;\n\nexport default function SplitInput(props: Props): JSX.Element {\n  const { disabled, isDisabled, renderLeft, renderRight, error } = props;\n  const [focus, setFocus] = React.useState(false);\n\n  const onFocus = useCallback(() => {\n    setFocus(true);\n  }, [setFocus]);\n  const onBlur = useCallback(() => {\n    setFocus(false);\n  }, [setFocus]);\n\n  const disabledState = typeof disabled !== \"undefined\" ? disabled : isDisabled;\n\n  return (\n    <div>\n      <InputContainer disabled={disabledState} focus={focus} error={error}>\n        <div style={{ width: \"50%\", height: \"100%\" }}>\n          {renderLeft({\n            error,\n            onFocus,\n            onBlur,\n            disabled: disabledState,\n            isDisabled: disabledState,\n          })}\n        </div>\n        <Divider focus={focus} disabled={disabled} error={error} />\n        <div style={{ width: \"50%\", height: \"100%\" }}>\n          {typeof renderRight === \"function\"\n            ? renderRight({\n                error,\n                onFocus,\n                onBlur,\n                disabled: disabledState,\n                isDisabled: disabledState,\n              })\n            : renderRight}\n        </div>\n      </InputContainer>\n      {error && !disabled && <InputErrorContainer>{error}</InputErrorContainer>}\n    </div>\n  );\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAmC;AACnC,+BAAmB;AAEnB,uBAAoD;AAsBpD,yBAAyB,OAAqB;AAC5C,MAAI,MAAM,UAAU;AAClB,WAAO,MAAM,OAAO,OAAO,QAAQ;AAAA;AAErC,MAAI,MAAM,OAAO;AACf,WAAO,MAAM,OAAO,OAAO,MAAM;AAAA;AAEnC,MAAI,MAAM,OAAO;AACf,WAAO,MAAM,OAAO,OAAO,QAAQ;AAAA;AAGrC,SAAO,MAAM,OAAO,OAAO,QAAQ;AAAA;AAGrC,6BAA6B,OAAqB;AAChD,SAAO,MAAM,YAAY,MAAM,QAAQ,YAAY,MAAM,OAAO,OAAO,QAAQ;AAAA;AAGjF,MAAM,UAAU,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA,kBASL;AAAA,IACd;AAAA,oBACgB;AAAA;AAAA;AAIL,oBAAoB,OAA2B;AAC5D,QAAM,EAAE,UAAU,YAAY,YAAY,aAAa,UAAU;AACjE,QAAM,CAAC,OAAO,YAAY,qBAAM,SAAS;AAEzC,QAAM,UAAU,8BAAY,MAAM;AAChC,aAAS;AAAA,KACR,CAAC;AACJ,QAAM,SAAS,8BAAY,MAAM;AAC/B,aAAS;AAAA,KACR,CAAC;AAEJ,QAAM,gBAAgB,OAAO,aAAa,cAAc,WAAW;AAEnE,SACE,mDAAC,OAAD,MACE,mDAAC,iCAAD;AAAA,IAAgB,UAAU;AAAA,IAAe;AAAA,IAAc;AAAA,KACrD,mDAAC,OAAD;AAAA,IAAK,OAAO,EAAE,OAAO,OAAO,QAAQ;AAAA,KACjC,WAAW;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,YAAY;AAAA,OAGhB,mDAAC,SAAD;AAAA,IAAS;AAAA,IAAc;AAAA,IAAoB;AAAA,MAC3C,mDAAC,OAAD;AAAA,IAAK,OAAO,EAAE,OAAO,OAAO,QAAQ;AAAA,KACjC,OAAO,gBAAgB,aACpB,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,YAAY;AAAA,OAEd,eAGP,SAAS,CAAC,YAAY,mDAAC,sCAAD,MAAsB;AAAA;",
+  "names": []
+}

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

@@ -0,0 +1,163 @@
+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: () => Switch_default
+});
+var import_react = __toModule(require("react"));
+var import_styled_components = __toModule(require("styled-components"));
+var import_Text = __toModule(require("../../asorted/Text"));
+var import_Flex = __toModule(require("../../layout/Flex"));
+const Container = (0, import_styled_components.default)(import_Flex.default).attrs({ alignItems: "center", flexDirection: "row" })`
+  width: fit-content;
+  column-gap: ${(p) => p.theme.space[5]}px;
+  cursor: pointer;
+
+  /* reversed VARIANT */
+  &[data-reversed="true"] {
+    flex-direction: row-reverse;
+  }
+
+  &[data-disabled="true"] {
+    cursor: unset;
+  }
+`;
+const Input = import_styled_components.default.input`
+  position: absolute;
+  visibility: hidden;
+`;
+const Label = (0, import_styled_components.default)(import_Text.default)`
+  &:first-letter {
+    text-transform: uppercase;
+  }
+`;
+const Switcher = import_styled_components.default.div`
+  --ll-switch-width: ${(p) => p.theme.space[14]}px;
+  --ll-switch-height: ${(p) => p.theme.space[9]}px;
+  --ll-switch-padding: ${(p) => p.theme.space[2]}px;
+
+  position: relative;
+  display: inline-block;
+
+  background: ${(props) => props.theme.colors.neutral.c60};
+  border-radius: ${(p) => p.theme.space[6]}px;
+  width: var(--ll-switch-width);
+  height: var(--ll-switch-height);
+
+  transition: background 200ms;
+
+  &:before,
+  &:after {
+    content: "";
+  }
+
+  &:focus {
+    outline-style: auto;
+    outline: 1px solid ${(props) => props.theme.colors.neutral.c90};
+    outline-offset: ${(p) => p.theme.space[1]}px;
+  }
+
+  /* CIRCLE ELEMENT */
+  &:before {
+    position: absolute;
+    display: block;
+    background: ${(props) => props.theme.colors.constant.white};
+    border-radius: ${(p) => p.theme.space[12]}px;
+
+    width: calc(calc(var(--ll-switch-width) / 2) - var(--ll-switch-padding));
+    height: calc(calc(var(--ll-switch-width) / 2) - var(--ll-switch-padding));
+    top: var(--ll-switch-padding);
+    transform: translateX(var(--ll-switch-padding));
+    transition: transform 0.25s;
+  }
+
+  /* SMALL VARIANT */
+  &[data-size="small"] {
+    --ll-switch-width: ${(p) => p.theme.space[8]}px;
+    --ll-switch-height: ${(p) => p.theme.space[6]}px;
+  }
+
+  &:hover {
+    background-color: ${(props) => props.theme.colors.neutral.c70};
+  }
+
+  &:active {
+    background-color: ${(props) => props.theme.colors.neutral.c80};
+  }
+
+  /* CHECKED VARIANT */
+  ${Input}:checked ~ & {
+    background: ${(props) => props.theme.colors.primary.c80};
+
+    &:before {
+      transform: translateX(calc(var(--ll-switch-width) / 2));
+    }
+
+    &:hover {
+      background: ${(props) => props.theme.colors.primary.c90};
+    }
+
+    :active {
+      background: ${(props) => props.theme.colors.primary.c100};
+    }
+  }
+`;
+const Switch = ({
+  name,
+  checked,
+  onChange,
+  label,
+  disabled,
+  reversed,
+  size
+}) => {
+  const handleFocusKeyDown = (e) => {
+    if (e.key.match(/enter/i))
+      onChange(e);
+  };
+  const handleClick = (e) => {
+    if (!disabled)
+      onChange(e);
+  };
+  return /* @__PURE__ */ import_react.default.createElement(Container, {
+    role: "button",
+    "data-reversed": reversed,
+    "data-disabled": disabled,
+    onClick: handleClick,
+    tabIndex: 0,
+    "aria-pressed": checked,
+    onKeyDown: handleFocusKeyDown
+  }, /* @__PURE__ */ import_react.default.createElement(Input, {
+    type: "checkbox",
+    name,
+    id: name,
+    disabled,
+    checked
+  }), /* @__PURE__ */ import_react.default.createElement(Switcher, {
+    "data-size": size
+  }), label ? /* @__PURE__ */ import_react.default.createElement(Label, {
+    variant: "paragraph"
+  }, label) : null);
+};
+var Switch_default = Switch;
+//# sourceMappingURL=Switch.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/form/Switch/Switch.tsx"],
+  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport Text from \"../../asorted/Text\";\nimport Flex from \"../../layout/Flex\";\n\nconst Container = styled(Flex).attrs({ alignItems: \"center\", flexDirection: \"row\" })`\n  width: fit-content;\n  column-gap: ${(p) => p.theme.space[5]}px;\n  cursor: pointer;\n\n  /* reversed VARIANT */\n  &[data-reversed=\"true\"] {\n    flex-direction: row-reverse;\n  }\n\n  &[data-disabled=\"true\"] {\n    cursor: unset;\n  }\n`;\n\nconst Input = styled.input`\n  position: absolute;\n  visibility: hidden;\n`;\n\nconst Label = styled(Text)`\n  &:first-letter {\n    text-transform: uppercase;\n  }\n`;\n\nconst Switcher = styled.div`\n  --ll-switch-width: ${(p) => p.theme.space[14]}px;\n  --ll-switch-height: ${(p) => p.theme.space[9]}px;\n  --ll-switch-padding: ${(p) => p.theme.space[2]}px;\n\n  position: relative;\n  display: inline-block;\n\n  background: ${(props) => props.theme.colors.neutral.c60};\n  border-radius: ${(p) => p.theme.space[6]}px;\n  width: var(--ll-switch-width);\n  height: var(--ll-switch-height);\n\n  transition: background 200ms;\n\n  &:before,\n  &:after {\n    content: \"\";\n  }\n\n  &:focus {\n    outline-style: auto;\n    outline: 1px solid ${(props) => props.theme.colors.neutral.c90};\n    outline-offset: ${(p) => p.theme.space[1]}px;\n  }\n\n  /* CIRCLE ELEMENT */\n  &:before {\n    position: absolute;\n    display: block;\n    background: ${(props) => props.theme.colors.constant.white};\n    border-radius: ${(p) => p.theme.space[12]}px;\n\n    width: calc(calc(var(--ll-switch-width) / 2) - var(--ll-switch-padding));\n    height: calc(calc(var(--ll-switch-width) / 2) - var(--ll-switch-padding));\n    top: var(--ll-switch-padding);\n    transform: translateX(var(--ll-switch-padding));\n    transition: transform 0.25s;\n  }\n\n  /* SMALL VARIANT */\n  &[data-size=\"small\"] {\n    --ll-switch-width: ${(p) => p.theme.space[8]}px;\n    --ll-switch-height: ${(p) => p.theme.space[6]}px;\n  }\n\n  &:hover {\n    background-color: ${(props) => props.theme.colors.neutral.c70};\n  }\n\n  &:active {\n    background-color: ${(props) => props.theme.colors.neutral.c80};\n  }\n\n  /* CHECKED VARIANT */\n  ${Input}:checked ~ & {\n    background: ${(props) => props.theme.colors.primary.c80};\n\n    &:before {\n      transform: translateX(calc(var(--ll-switch-width) / 2));\n    }\n\n    &:hover {\n      background: ${(props) => props.theme.colors.primary.c90};\n    }\n\n    :active {\n      background: ${(props) => props.theme.colors.primary.c100};\n    }\n  }\n`;\n\nexport type SwitchProps = {\n  name: string;\n  checked: boolean;\n  onChange: (e: React.FormEvent<HTMLDivElement>) => void;\n  size?: \"normal\" | \"small\";\n  label?: string;\n  disabled?: boolean;\n  reversed?: boolean;\n};\n\nconst Switch = ({\n  name,\n  checked,\n  onChange,\n  label,\n  disabled,\n  reversed,\n  size,\n}: SwitchProps): JSX.Element => {\n  const handleFocusKeyDown = (e: React.FormEvent<HTMLDivElement> & { key: string }) => {\n    if (e.key.match(/enter/i)) onChange(e);\n  };\n\n  const handleClick = (e: React.FormEvent<HTMLDivElement>) => {\n    if (!disabled) onChange(e);\n  };\n\n  return (\n    <Container\n      role=\"button\"\n      data-reversed={reversed}\n      data-disabled={disabled}\n      onClick={handleClick}\n      tabIndex={0}\n      aria-pressed={checked}\n      onKeyDown={handleFocusKeyDown}\n    >\n      <Input type=\"checkbox\" name={name} id={name} disabled={disabled} checked={checked} />\n      <Switcher data-size={size} />\n      {label ? <Label variant=\"paragraph\">{label}</Label> : null}\n    </Container>\n  );\n};\n\nexport default Switch;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAiB;AACjB,kBAAiB;AAEjB,MAAM,YAAY,sCAAO,qBAAM,MAAM,EAAE,YAAY,UAAU,eAAe;AAAA;AAAA,gBAE5D,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAarC,MAAM,QAAQ,iCAAO;AAAA;AAAA;AAAA;AAKrB,MAAM,QAAQ,sCAAO;AAAA;AAAA;AAAA;AAAA;AAMrB,MAAM,WAAW,iCAAO;AAAA,uBACD,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA,wBACpB,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA,yBACpB,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,gBAK9B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,mBACnC,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAaf,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,sBACzC,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAOzB,CAAC,UAAU,MAAM,MAAM,OAAO,SAAS;AAAA,qBACpC,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAWjB,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA,0BACpB,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA,wBAIvB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,wBAItC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,IAI1D;AAAA,kBACc,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAOpC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,oBAItC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAe1D,MAAM,SAAS,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MAC8B;AAC9B,QAAM,qBAAqB,CAAC,MAAyD;AACnF,QAAI,EAAE,IAAI,MAAM;AAAW,eAAS;AAAA;AAGtC,QAAM,cAAc,CAAC,MAAuC;AAC1D,QAAI,CAAC;AAAU,eAAS;AAAA;AAG1B,SACE,mDAAC,WAAD;AAAA,IACE,MAAK;AAAA,IACL,iBAAe;AAAA,IACf,iBAAe;AAAA,IACf,SAAS;AAAA,IACT,UAAU;AAAA,IACV,gBAAc;AAAA,IACd,WAAW;AAAA,KAEX,mDAAC,OAAD;AAAA,IAAO,MAAK;AAAA,IAAW;AAAA,IAAY,IAAI;AAAA,IAAM;AAAA,IAAoB;AAAA,MACjE,mDAAC,UAAD;AAAA,IAAU,aAAW;AAAA,MACpB,QAAQ,mDAAC,OAAD;AAAA,IAAO,SAAQ;AAAA,KAAa,SAAiB;AAAA;AAK5D,IAAO,iBAAQ;",
+  "names": []
+}

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

@@ -0,0 +1,91 @@
+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: () => Default,
+  Reversed: () => Reversed,
+  default: () => Switch_stories_default
+});
+var import_react = __toModule(require("react"));
+var import_client_api = __toModule(require("@storybook/client-api"));
+var import_index = __toModule(require("./index"));
+var Switch_stories_default = {
+  title: "Form/SelectionControls/Switch",
+  component: import_index.default,
+  argTypes: {
+    name: { control: false },
+    onChange: { control: false },
+    checked: {
+      type: "boolean",
+      description: "Control if the component is checked or not",
+      required: true,
+      control: { type: "boolean" }
+    },
+    label: {
+      type: "text",
+      description: "Any valid string",
+      required: false,
+      control: { type: "text" }
+    },
+    disabled: {
+      type: "boolean",
+      description: "Control if the component is disabled or not",
+      required: false,
+      control: { type: "boolean" }
+    },
+    reversed: {
+      type: "boolean",
+      description: "Control if the component is disabled or not",
+      required: false,
+      control: { type: "boolean" }
+    },
+    size: {
+      options: ["normal", "small"],
+      control: { type: "select" }
+    }
+  }
+};
+const Template = (args) => {
+  const [currentArgs, updateArgs] = (0, import_client_api.useArgs)();
+  const handleChange = () => updateArgs({ checked: !currentArgs.checked });
+  return /* @__PURE__ */ import_react.default.createElement(import_index.default, {
+    ...args,
+    onChange: handleChange
+  });
+};
+const Default = Template.bind({});
+const Reversed = Template.bind({});
+Default.args = {
+  checked: false,
+  label: "Switch with label",
+  name: "default Switch",
+  size: "normal"
+};
+Reversed.args = {
+  checked: false,
+  label: "Reversed Switch with label",
+  name: "success Switch",
+  reversed: true,
+  size: "normal"
+};
+//# sourceMappingURL=Switch.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/form/Switch/Switch.stories.tsx"],
+  "sourcesContent": ["import React from \"react\";\n// @ts-expect-error Typings\u2026\nimport { useArgs } from \"@storybook/client-api\";\n\nimport Switch from \"./index\";\nimport type { SwitchProps } from \"./Switch\";\nimport { StoryTemplate } from \"../../helpers\";\n\nexport default {\n  title: \"Form/SelectionControls/Switch\",\n  component: Switch,\n  argTypes: {\n    name: { control: false },\n    onChange: { control: false },\n    checked: {\n      type: \"boolean\",\n      description: \"Control if the component is checked or not\",\n      required: true,\n      control: { type: \"boolean\" },\n    },\n    label: {\n      type: \"text\",\n      description: \"Any valid string\",\n      required: false,\n      control: { type: \"text\" },\n    },\n    disabled: {\n      type: \"boolean\",\n      description: \"Control if the component is disabled or not\",\n      required: false,\n      control: { type: \"boolean\" },\n    },\n    reversed: {\n      type: \"boolean\",\n      description: \"Control if the component is disabled or not\",\n      required: false,\n      control: { type: \"boolean\" },\n    },\n    size: {\n      options: [\"normal\", \"small\"],\n      control: { type: \"select\" },\n    },\n  },\n};\n\nconst Template = (args: SwitchProps) => {\n  const [currentArgs, updateArgs] = useArgs();\n\n  const handleChange = () => updateArgs({ checked: !currentArgs.checked });\n\n  return <Switch {...args} onChange={handleChange} />;\n};\n\nexport const Default: StoryTemplate<SwitchProps> = Template.bind({});\nexport const Reversed: StoryTemplate<SwitchProps> = Template.bind({});\n\nDefault.args = {\n  checked: false,\n  label: \"Switch with label\",\n  name: \"default Switch\",\n  size: \"normal\",\n};\n\nReversed.args = {\n  checked: false,\n  label: \"Reversed Switch with label\",\n  name: \"success Switch\",\n  reversed: true,\n  size: \"normal\",\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,wBAAwB;AAExB,mBAAmB;AAInB,IAAO,yBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,IACR,MAAM,EAAE,SAAS;AAAA,IACjB,UAAU,EAAE,SAAS;AAAA,IACrB,SAAS;AAAA,MACP,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS,EAAE,MAAM;AAAA;AAAA,IAEnB,OAAO;AAAA,MACL,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS,EAAE,MAAM;AAAA;AAAA,IAEnB,UAAU;AAAA,MACR,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS,EAAE,MAAM;AAAA;AAAA,IAEnB,UAAU;AAAA,MACR,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS,EAAE,MAAM;AAAA;AAAA,IAEnB,MAAM;AAAA,MACJ,SAAS,CAAC,UAAU;AAAA,MACpB,SAAS,EAAE,MAAM;AAAA;AAAA;AAAA;AAKvB,MAAM,WAAW,CAAC,SAAsB;AACtC,QAAM,CAAC,aAAa,cAAc;AAElC,QAAM,eAAe,MAAM,WAAW,EAAE,SAAS,CAAC,YAAY;AAE9D,SAAO,mDAAC,sBAAD;AAAA,OAAY;AAAA,IAAM,UAAU;AAAA;AAAA;AAG9B,MAAM,UAAsC,SAAS,KAAK;AAC1D,MAAM,WAAuC,SAAS,KAAK;AAElE,QAAQ,OAAO;AAAA,EACb,SAAS;AAAA,EACT,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA;AAGR,SAAS,OAAO;AAAA,EACd,SAAS;AAAA,EACT,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,MAAM;AAAA;",
+  "names": []
+}

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

@@ -0,0 +1,28 @@
+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: () => import_Switch.default
+});
+var import_Switch = __toModule(require("./Switch"));
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/form/Switch/index.ts"],
+  "sourcesContent": ["export { default } from \"./Switch\";\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,oBAAwB;",
+  "names": []
+}

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

@@ -0,0 +1,52 @@
+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, {
+  Checkbox: () => import_Checkbox.default,
+  Dropdown: () => import_Dropdown.default,
+  DropdownGeneric: () => import_DropdownGeneric.default,
+  Input: () => import_BaseInput.default,
+  LegendInput: () => import_LegendInput.default,
+  NumberInput: () => import_NumberInput.default,
+  QrCodeInput: () => import_QrCodeInput.default,
+  QuantityInput: () => import_QuantityInput.default,
+  Radio: () => import_Radio.default,
+  SearchInput: () => import_SearchInput.default,
+  SelectInput: () => import_SelectInput.default,
+  SplitInput: () => import_SplitInput.default,
+  Switch: () => import_Switch.default
+});
+var import_BaseInput = __toModule(require("./BaseInput"));
+var import_Checkbox = __toModule(require("./Checkbox"));
+var import_Dropdown = __toModule(require("./Dropdown"));
+var import_DropdownGeneric = __toModule(require("./DropdownGeneric"));
+var import_LegendInput = __toModule(require("./LegendInput"));
+var import_NumberInput = __toModule(require("./NumberInput"));
+var import_QrCodeInput = __toModule(require("./QrCodeInput"));
+var import_QuantityInput = __toModule(require("./QuantityInput"));
+var import_Radio = __toModule(require("./Radio"));
+var import_SearchInput = __toModule(require("./SearchInput"));
+var import_SelectInput = __toModule(require("./SelectInput"));
+var import_SplitInput = __toModule(require("./SplitInput"));
+var import_Switch = __toModule(require("./Switch"));
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/form/index.ts"],
+  "sourcesContent": ["export { default as Input } from \"./BaseInput\";\nexport { default as Checkbox } from \"./Checkbox\";\nexport { default as Dropdown } from \"./Dropdown\";\nexport { default as DropdownGeneric } from \"./DropdownGeneric\";\nexport { default as LegendInput } from \"./LegendInput\";\nexport { default as NumberInput } from \"./NumberInput\";\nexport { default as QrCodeInput } from \"./QrCodeInput\";\nexport { default as QuantityInput } from \"./QuantityInput\";\nexport { default as Radio } from \"./Radio\";\nexport { default as SearchInput } from \"./SearchInput\";\nexport { default as SelectInput } from \"./SelectInput\";\nexport { default as SplitInput } from \"./SplitInput\";\nexport { default as Switch } from \"./Switch\";\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAiC;AACjC,sBAAoC;AACpC,sBAAoC;AACpC,6BAA2C;AAC3C,yBAAuC;AACvC,yBAAuC;AACvC,yBAAuC;AACvC,2BAAyC;AACzC,mBAAiC;AACjC,yBAAuC;AACvC,yBAAuC;AACvC,wBAAsC;AACtC,oBAAkC;",
+  "names": []
+}

package/lib/cjs/components/helpers.js

@@ -0,0 +1,12 @@
+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, {
+  lipsum: () => lipsum
+});
+const lipsum = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi varius sollicitudin lectus vel finibus. Praesent eu leo nec libero interdum sodales et eget nulla. Donec tincidunt posuere sem vel porttitor. Nullam maximus urna non elit tempor, ut fermentum metus euismod. Quisque et rutrum arcu. Etiam nisl elit, tincidunt volutpat libero sed, imperdiet mollis risus. Maecenas imperdiet lectus id sapien tempus, eget fringilla nisl lacinia. Sed sem velit, egestas nec imperdiet ac, lobortis vel lectus. Curabitur dui orci, aliquam sit amet metus ut, sollicitudin fermentum erat. Curabitur id purus eget lectus varius congue. Donec eu auctor augue. Ut eleifend arcu nisl, volutpat fringilla quam cursus sit amet. Praesent leo enim, cursus vel egestas sed, vestibulum imperdiet diam. Etiam a diam lectus. Suspendisse aliquam imperdiet ultrices. Phasellus eget nulla eros. Nullam semper porta pulvinar. Duis maximus, lectus ac fringilla interdum, lacus ex cursus tellus, et dapibus est nisi id dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla gravida elit turpis, ac condimentum velit placerat at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In dolor tellus, semper id pulvinar eget, ornare bibendum justo. Sed in libero nisl. Morbi tincidunt sollicitudin nunc, vel imperdiet nisi iaculis vel. Nam viverra lorem vel ligula varius, lacinia maximus metus porta. Sed vitae vehicula leo. Proin sed lectus in lorem laoreet iaculis sed ut eros. Pellentesque et rhoncus sapien. Nam fringilla mauris nec tellus vestibulum, vel convallis mauris sagittis. Vivamus et lacinia dui. Sed pharetra vitae lacus vel facilisis. Nullam et sollicitudin risus. Curabitur egestas bibendum neque, sed lacinia nisi cursus nec. Quisque sed diam congue, luctus magna eget, convallis lectus. Cras ut tellus imperdiet, blandit magna non, auctor felis. Suspendisse potenti. Nulla volutpat felis vitae ante blandit tempor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla sagittis scelerisque magna quis ultrices";
+//# sourceMappingURL=helpers.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/helpers.ts"],
+  "sourcesContent": ["import React from \"react\";\n\n// Add helpers that don't have a place in the real world component usage here.\nexport const lipsum =\n  \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi varius sollicitudin lectus vel finibus. Praesent eu leo nec libero interdum sodales et eget nulla. Donec tincidunt posuere sem vel porttitor. Nullam maximus urna non elit tempor, ut fermentum metus euismod. Quisque et rutrum arcu. Etiam nisl elit, tincidunt volutpat libero sed, imperdiet mollis risus. Maecenas imperdiet lectus id sapien tempus, eget fringilla nisl lacinia. Sed sem velit, egestas nec imperdiet ac, lobortis vel lectus. Curabitur dui orci, aliquam sit amet metus ut, sollicitudin fermentum erat. Curabitur id purus eget lectus varius congue. Donec eu auctor augue. Ut eleifend arcu nisl, volutpat fringilla quam cursus sit amet. Praesent leo enim, cursus vel egestas sed, vestibulum imperdiet diam. Etiam a diam lectus. Suspendisse aliquam imperdiet ultrices. Phasellus eget nulla eros. Nullam semper porta pulvinar. Duis maximus, lectus ac fringilla interdum, lacus ex cursus tellus, et dapibus est nisi id dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla gravida elit turpis, ac condimentum velit placerat at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In dolor tellus, semper id pulvinar eget, ornare bibendum justo. Sed in libero nisl. Morbi tincidunt sollicitudin nunc, vel imperdiet nisi iaculis vel. Nam viverra lorem vel ligula varius, lacinia maximus metus porta. Sed vitae vehicula leo. Proin sed lectus in lorem laoreet iaculis sed ut eros. Pellentesque et rhoncus sapien. Nam fringilla mauris nec tellus vestibulum, vel convallis mauris sagittis. Vivamus et lacinia dui. Sed pharetra vitae lacus vel facilisis. Nullam et sollicitudin risus. Curabitur egestas bibendum neque, sed lacinia nisi cursus nec. Quisque sed diam congue, luctus magna eget, convallis lectus. Cras ut tellus imperdiet, blandit magna non, auctor felis. Suspendisse potenti. Nulla volutpat felis vitae ante blandit tempor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla sagittis scelerisque magna quis ultrices\";\n\nexport type StoryTemplate<Args> = {\n  (args: Args): React.ReactNode;\n  args?: Partial<Args>;\n  parameters?: unknown;\n};\n"],
+  "mappings": ";;;;;;;AAAA;AAAA;AAAA;AAGO,MAAM,SACX;",
+  "names": []
+}

package/lib/cjs/components/index.js

@@ -0,0 +1,42 @@
+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, {
+  Chart: () => import_Chart.default,
+  Table: () => import_Table.default,
+  Tag: () => import_Tag.default
+});
+__reExport(exports, __toModule(require("./asorted")));
+__reExport(exports, __toModule(require("./cards")));
+var import_Chart = __toModule(require("./Chart"));
+__reExport(exports, __toModule(require("./cta")));
+__reExport(exports, __toModule(require("./form")));
+__reExport(exports, __toModule(require("./layout")));
+__reExport(exports, __toModule(require("./loaders")));
+__reExport(exports, __toModule(require("./message")));
+__reExport(exports, __toModule(require("./navigation")));
+var import_Table = __toModule(require("./Table"));
+__reExport(exports, __toModule(require("./tabs")));
+var import_Tag = __toModule(require("./Tag"));
+__reExport(exports, __toModule(require("./transitions")));
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/index.ts"],
+  "sourcesContent": ["export * from \"./asorted\";\nexport * from \"./cards\";\nexport { default as Chart } from \"./Chart\";\nexport * from \"./cta\";\nexport * from \"./form\";\nexport * from \"./layout\";\nexport * from \"./loaders\";\nexport * from \"./message\";\nexport * from \"./navigation\";\nexport { default as Table } from \"./Table\";\nexport * from \"./tabs\";\nexport { default as Tag } from \"./Tag\";\nexport * from \"./transitions\";\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAc;AACd,oBAAc;AACd,mBAAiC;AACjC,oBAAc;AACd,oBAAc;AACd,oBAAc;AACd,oBAAc;AACd,oBAAc;AACd,oBAAc;AACd,mBAAiC;AACjC,oBAAc;AACd,iBAA+B;AAC/B,oBAAc;",
+  "names": []
+}

package/lib/cjs/components/layout/Box/Box.stories.js

@@ -0,0 +1,73 @@
+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: () => Default,
+  default: () => Box_stories_default
+});
+var import_react = __toModule(require("react"));
+var import__ = __toModule(require("."));
+var Box_stories_default = {
+  title: "Layout/Box",
+  component: import__.default,
+  argTypes: {
+    backgroundColor: {
+      type: "text",
+      control: "color",
+      defaultValue: "#0EBDCD",
+      description: "This property defines the backgroundColor of the box. This property any color format."
+    },
+    width: {
+      type: "text",
+      defaultValue: "200px",
+      description: "Width of the box."
+    },
+    py: {
+      type: "text",
+      defaultValue: "20px",
+      description: "Padding top and bottom."
+    },
+    mx: {
+      type: "text",
+      defaultValue: "20px",
+      description: "Margin left and right."
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `The Box component is a helper component that lets you write these common css properties more succinctly and inline.
+      
+It include all the style props exported by the color, layout, position, shadow utilities, and some of the flexbox utility, from the [styled-system](https://styled-system.com) library.
+      
+[See more about styled-system utilities](https://styled-system.com/api)`
+      }
+    },
+    actions: { argTypesRegex: false }
+  }
+};
+const Template = (args) => /* @__PURE__ */ import_react.default.createElement(import__.default, {
+  ...args
+}, "A plain good ol'box with fixed width, backgroundColor, padding and margin, all by using inline props");
+const Default = Template.bind({});
+//# sourceMappingURL=Box.stories.js.map