@dafaz-ui/react 4.0.18 → 6.0.5

package/dist/index.js

@@ -55,6 +55,26 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
 
 // src/index.tsx
 var src_exports = {};
@@ -63,8 +83,10 @@ __export(src_exports, {
   Button: () => Button,
   CheckBox: () => CheckBox,
   Heading: () => Heading,
+  MultiSelect: () => MultiSelect,
   Radio: () => Radio,
   Select: () => Select,
+  Separator: () => Separator,
   Text: () => Text,
   TextArea: () => TextArea,
   TextInput: () => TextInput,
@@ -83,6 +105,7 @@ module.exports = __toCommonJS(src_exports);
 var colors = {
   white: "#FFF",
   black: "#000",
+  red: "#ED0A0A",
   gray100: "#D6D6D6",
   gray200: "#666666",
   gray400: "#444444",
@@ -125,7 +148,7 @@ var radii = {
 var fonts = {
   default: "Roboto, sans-serif",
   app: "Poppins",
-  web: "League Spartan",
+  web: "League Spartan, League_Spartan",
   offer: "KoHo",
   code: "monospace"
 };
@@ -136,7 +159,15 @@ var fontSizes = {
   md: "0.875rem",
   lg: "1.0rem",
   xl: "1.25rem",
-  "2xl": "2rem"
+  "2xl": "1.5rem",
+  "3xl": "1.75rem",
+  "4xl": "2rem",
+  "5xl": "2.5rem",
+  "6xl": "3rem",
+  "7xl": "3.5rem",
+  "8xl": "4rem",
+  "9xl": "5rem",
+  "10xl": "6rem"
 };
 var fontWeights = {
   regular: "400",
@@ -182,26 +213,77 @@ var {
 var BoxUI = styled("div", {
   padding: "$4",
   variants: {
+    withShadow: {
+      true: {
+        boxShadow: "1px 1px 2px $colors$gray800"
+      }
+    },
     stretch: {
       true: {
-        width: "100%"
+        width: "100%",
+        "> div": {
+          paddingLeft: 0
+        }
       },
       false: {
-        width: "18.4375rem"
+        width: "24.5rem",
+        "> div": {
+          paddingLeft: 0
+        }
       }
     },
-    dark: {
-      true: {
+    color: {
+      dark: {
         background: "$gray800"
       },
-      false: {
+      primary: {
+        background: "$dafaz400"
+      },
+      secondary: {
+        background: "$dafaz800"
+      },
+      light: {
+        background: "$dafaz100"
+      },
+      transparent: {
         background: "transparent"
       }
+    },
+    rounded: {
+      px: {
+        borderRadius: "$px"
+      },
+      sm: {
+        borderRadius: "$sm"
+      },
+      md: {
+        borderRadius: "$md"
+      },
+      full: {
+        borderRadius: "$full"
+      }
+    },
+    direction: {
+      none: {},
+      row: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      column: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center"
+      }
     }
   },
   defaultVariants: {
-    stretch: false,
-    dark: false
+    stretch: true,
+    color: "dark",
+    rounded: "px",
+    withShadow: false,
+    direction: "row"
   }
 });
 
@@ -223,12 +305,14 @@ var ButtonUI = styled("button", {
   textAlign: "center",
   minWidth: 120,
   boxSizing: "border-box",
+  boxShadow: "3px 3px 2px -2px $colors$gray400",
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
   gap: "$2",
   padding: "$2 $5",
   cursor: "pointer",
+  transition: "background 0.2s linear",
   "&:disabled": {
     cursor: "not-allowed"
   },
@@ -237,21 +321,21 @@ var ButtonUI = styled("button", {
       primary: {
         color: "$white",
         background: "$dafaz600",
-        opacity: 0.8,
         "&:not(:disabled):hover": {
-          opacity: 1
+          background: "$dafaz400"
         },
         "&:disabled": {
           background: "$gray200"
         }
       },
       secondary: {
+        transition: "border, color 0.2s linear",
         fontWeight: "$medium",
         color: "$dafaz600",
         border: "2px solid $dafaz600",
-        opacity: 0.8,
         "&:not(:disabled):hover": {
-          opacity: 1
+          color: "$dafaz400",
+          border: "2px solid $dafaz400"
         },
         "&:disabled": {
           color: "$gray200",
@@ -259,10 +343,12 @@ var ButtonUI = styled("button", {
         }
       },
       tertiary: {
+        transition: "color 0.2s linear",
+        boxShadow: "none",
         fontWeight: "$medium",
-        color: "$gray400",
+        color: "$gray100",
         "&:not(:disabled):hover": {
-          color: "$gray800"
+          opacity: 0.9
         },
         "&:disabled": {
           color: "$gray200"
@@ -340,6 +426,7 @@ var CheckBoxUI = styled(Checkbox.Root, {
   alignItems: "center",
   transition: "border 0.2s linear",
   border: "2px solid $gray400",
+  boxShadow: "1.3px 1.3px 4px -1px $colors$dafaz600",
   '&:focus,&[data-state="checked"]': {
     backgroundColor: "$dafaz600",
     borderColor: "$dafaz600"
@@ -451,41 +538,26 @@ var import_jsx_runtime3 = require("react/jsx-runtime");
 var CheckBox = (0, import_react2.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
-      id,
       label,
       size,
       disabled = false,
-      checked = false,
-      onCheckedChange,
-      value
+      handleOnChange
     } = _b, props = __objRest(_b, [
-      "id",
       "label",
       "size",
       "disabled",
-      "checked",
-      "onCheckedChange",
-      "value"
+      "handleOnChange"
     ]);
-    const [checkValue, setCheckValue] = (0, import_react2.useState)(value);
-    (0, import_react2.useEffect)(() => {
-      if (checked) {
-        setCheckValue(value);
-      } else {
-        setCheckValue(void 0);
-      }
-    }, [checked, value]);
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Label, { htmlFor: id, disabled, size, children: [
+    const htmlId = (0, import_react2.useId)();
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Label, { htmlFor: htmlId, disabled, size, children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         CheckBoxUI,
         __spreadProps(__spreadValues({
           ref,
-          checked,
-          onCheckedChange,
           disabled,
-          id,
+          id: htmlId,
           size,
-          value: checkValue
+          onCheckedChange: handleOnChange
         }, props), {
           children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CheckBoxIndicator, { asChild: true, size, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react3.Check, { weight: "bold" }) })
         })
@@ -502,24 +574,37 @@ var HeadingUI = styled("h2", {
   lineHeight: "$shorter",
   margin: 0,
   variants: {
-    mode: {
-      default: {
-        color: "$dafaz400"
-      },
+    size: {
+      sm: { fontSize: "$2xl" },
+      md: { fontSize: "$3xl" },
+      lg: { fontSize: "$4xl" },
+      xl: { fontSize: "$5xl" },
+      "2xl": { fontSize: "$6xl" },
+      "3xl": { fontSize: "$7xl" },
+      "4xl": { fontSize: "$8xl" },
+      "5xl": { fontSize: "$9xl" },
+      "6xl": { fontSize: "$10xl" }
+    },
+    color: {
       white: {
         color: "$white"
+      },
+      black: {
+        color: "black"
+      },
+      primary: {
+        color: "$dafaz400"
+      },
+      lightGray: {
+        color: "$gray400"
+      },
+      darkGray: {
+        color: "$gray800"
       }
-    },
-    size: {
-      sm: { fontSize: "$lg" },
-      md: { fontSize: "$xl" },
-      lg: { fontSize: "$2xl" },
-      xl: { fontSize: "3rem" },
-      "2xl": { fontSize: "4rem" }
     }
   },
   defaultVariants: {
-    mode: "default",
+    color: "white",
     size: "lg"
   }
 });
@@ -575,6 +660,7 @@ var RadioItemUI = styled(RadioGroup2.Item, {
   display: "flex",
   justifyContent: "center",
   alignItems: "center",
+  boxShadow: "1.3px 1.3px 4px -1px $colors$dafaz600",
   transition: "border 0.2s linear",
   "&:disabled": {
     cursor: "not-allowed"
@@ -681,57 +767,132 @@ var Label2 = styled("label", {
 });
 
 // src/components/Radio/RadioItem/index.tsx
+var import_react5 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function RadioItem(_a) {
   var _b = _a, {
     label,
-    id,
     size,
     disabled = false
   } = _b, props = __objRest(_b, [
     "label",
-    "id",
     "size",
     "disabled"
   ]);
+  const htmlId = (0, import_react5.useId)();
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(RadioItemContainer, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RadioItemUI, __spreadProps(__spreadValues({ disabled, id }, props), { size, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RadioIndicator, { asChild: true, size, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react4.Check, { weight: "bold" }) }) })),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Label2, { disabled, htmlFor: id, size, children: label })
-  ] }, id);
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RadioItemUI, __spreadProps(__spreadValues({ disabled, id: htmlId }, props), { size, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RadioIndicator, { asChild: true, size, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react4.Check, { weight: "bold" }) }) })),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Label2, { disabled, htmlFor: htmlId, size, children: label })
+  ] });
 }
 RadioItem.displayName = "RadioItem";
 
 // src/components/Radio/index.tsx
+var import_react6 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-function Radio(_a) {
-  var _b = _a, {
-    items,
-    size,
-    disabled = false
-  } = _b, props = __objRest(_b, [
-    "items",
-    "size",
-    "disabled"
-  ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(RadioUI, __spreadProps(__spreadValues({ disabled }, props), { children: items.map((item) => {
+var Radio = (0, import_react6.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, {
+      items,
+      size,
+      disabled = false,
+      onValueChange,
+      value
+    } = _b, props = __objRest(_b, [
+      "items",
+      "size",
+      "disabled",
+      "onValueChange",
+      "value"
+    ]);
     return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      RadioItem,
-      {
-        id: item.id,
-        label: item.label,
-        value: item.value,
-        size,
+      RadioUI,
+      __spreadProps(__spreadValues({
+        ref,
         disabled
-      },
-      item.id
+      }, props), {
+        onValueChange,
+        value,
+        children: items.map((item) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            RadioItem,
+            {
+              label: item.label,
+              value: item.value,
+              size,
+              disabled
+            },
+            item.id
+          );
+        })
+      })
     );
-  }) }));
-}
+  }
+);
 Radio.displayName = "Radio";
 
+// src/components/Select/index.tsx
+var import_react7 = require("@phosphor-icons/react");
+
 // src/components/Select/styles.ts
+var SelectContainer = styled("div", {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  fontFamily: "$app",
+  color: "$white",
+  cursor: "pointer",
+  width: "100%",
+  maxWidth: "24.5rem",
+  boxSizing: "border-box",
+  borderRadius: "$md",
+  borderBottom: "2px solid $dafaz600",
+  boxShadow: "0 3px 2px -2px $colors$gray400",
+  transition: "border 0.2s linear",
+  "&:disabled": {
+    cursor: "not-allowed",
+    opacity: 0.5
+  },
+  "&:active": {
+    borderBottom: "2px solid $dafaz400"
+  },
+  "&:hover": {
+    borderBottom: "2px solid $dafaz400"
+  },
+  variants: {
+    size: {
+      lg: {
+        fontSize: "$xl",
+        svg: {
+          width: "$5",
+          height: "$5"
+        }
+      },
+      md: {
+        fontSize: "$lg",
+        svg: {
+          width: "$4",
+          height: "$4"
+        }
+      },
+      sm: {
+        fontSize: "$sm",
+        svg: {
+          width: "$3",
+          height: "$3"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "lg"
+  }
+});
 var SelectUI = styled("select", {
-  gap: "$2",
+  zIndex: 1,
+  "-moz-appearance": "none",
+  "-webkit-appearance": "none",
+  appearance: "none",
   overflow: "hidden",
   background: "transparent",
   border: "none",
@@ -739,20 +900,15 @@ var SelectUI = styled("select", {
   color: "$white",
   fontWeight: "$regular",
   cursor: "pointer",
-  boxSizing: "border-box",
-  borderRadius: "$md",
-  borderBottom: "2px solid $dafaz600",
-  transition: "border 0.2s linear",
   width: "100%",
+  maxWidth: "24.5rem",
   margin: 0,
   padding: "$1 $1",
-  "&:focus": {
-    outline: 0,
-    borderBottom: "2px solid $dafaz400"
-  },
   "&:disabled": {
-    opacity: 0.5,
-    cursor: "not-allowed"
+    opacity: 0.5
+  },
+  "&:focus": {
+    outline: 0
   },
   variants: {
     size: {
@@ -795,49 +951,110 @@ var OptionUI = styled("option", {
 });
 
 // src/components/Select/index.tsx
-var import_react5 = require("react");
+var import_react8 = require("react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
-function Select(_a) {
-  var _b = _a, {
-    size,
-    placeholder,
-    items
-  } = _b, props = __objRest(_b, [
-    "size",
-    "placeholder",
-    "items"
-  ]);
-  const [value, setValue] = (0, import_react5.useState)("");
-  function handleSelect(event) {
-    setValue(() => {
-      return event.target.value;
-    });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-    SelectUI,
-    __spreadProps(__spreadValues({
-      size
-    }, props), {
-      value,
-      onChange: handleSelect,
-      style: { opacity: value != "" ? 1 : 0.75 },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(OptionUI, { className: "placeholder", value: "", children: placeholder }),
-        items.map((item) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(OptionUI, { value: item.value, children: item.label }, item.id);
+var Select = (0, import_react8.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { id, size, placeholder, items } = _b, props = __objRest(_b, ["id", "size", "placeholder", "items"]);
+    const [value, setValue] = (0, import_react8.useState)("");
+    function handleSelect(event) {
+      setValue(() => {
+        return event.target.value;
+      });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(SelectContainer, { size, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        SelectUI,
+        __spreadProps(__spreadValues({
+          id,
+          ref,
+          size
+        }, props), {
+          value,
+          onChange: handleSelect,
+          style: { opacity: value != "" ? 1 : 0.75 },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(OptionUI, { className: "placeholder", value: "", children: placeholder }),
+            items.map((item) => {
+              return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(OptionUI, { value: item.value, children: item.label }, item.id);
+            })
+          ]
         })
-      ]
-    })
-  );
-}
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "span",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            paddingLeft: "1rem",
+            marginRight: "0.6rem",
+            marginLeft: "-3rem"
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react7.CaretDown, { size: 24, weight: "bold" })
+        }
+      )
+    ] });
+  }
+);
 Select.displayName = "Select";
 
+// src/components/Separator/styles.ts
+var SeparatorUI = styled("hr", {
+  width: "100%",
+  borderStyle: "solid",
+  variants: {
+    color: {
+      primary: {
+        borderColor: "$dafaz400"
+      },
+      lightGray: {
+        borderColor: "$gray100"
+      },
+      darkGray: {
+        borderColor: "$gray800"
+      },
+      white: {
+        borderColor: "$white"
+      },
+      black: {
+        borderColor: "$black"
+      }
+    },
+    size: {
+      lg: {
+        borderWidth: "2px"
+      },
+      md: {
+        borderWidth: "1px"
+      },
+      sm: {
+        borderWidth: "0.75px"
+      },
+      xs: {
+        borderWidth: "0.5px"
+      }
+    }
+  },
+  defaultVariants: {
+    color: "primary",
+    size: "lg"
+  }
+});
+
+// src/components/Separator/index.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function Separator(_a) {
+  var _b = _a, { size, color, style } = _b, props = __objRest(_b, ["size", "color", "style"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SeparatorUI, __spreadValues({ size, color, style }, props));
+}
+Separator.displayName = "Separator";
+
 // src/components/Text/styles.ts
 var TextUI = styled("p", {
   fontFamily: "$web",
   lineHeight: "$base",
   margin: 0,
-  color: "$white",
   variants: {
     size: {
       xxs: { fontSize: "$xxs" },
@@ -846,28 +1063,53 @@ var TextUI = styled("p", {
       md: { fontSize: "$md" },
       lg: { fontSize: "$lg" },
       xl: { fontSize: "$xl" },
-      "2xl": { fontSize: "$2xl" }
+      "2xl": { fontSize: "$2xl" },
+      "3xl": { fontSize: "$3xl" },
+      "4xl": { fontSize: "$4xl" }
+    },
+    color: {
+      white: {
+        color: "$white"
+      },
+      black: {
+        color: "black"
+      },
+      primary: {
+        color: "$dafaz400"
+      },
+      lightGray: {
+        color: "$gray400"
+      },
+      darkGray: {
+        color: "$gray800"
+      }
     }
   },
   defaultVariants: {
-    size: "md"
+    size: "md",
+    color: "white"
   }
 });
 
 // src/components/Text/index.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function Text(_a) {
   var _b = _a, {
     children,
-    size = "md"
+    size,
+    color
   } = _b, props = __objRest(_b, [
     "children",
-    "size"
+    "size",
+    "color"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TextUI, __spreadProps(__spreadValues({ size }, props), { children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TextUI, __spreadProps(__spreadValues({ size, color }, props), { children }));
 }
 Text.displayName = "Text";
 
+// src/components/TextArea/index.tsx
+var import_react9 = require("react");
+
 // src/components/TextArea/styles.ts
 var TextAreaUI = styled("textarea", {
   fontFamily: "$app",
@@ -875,6 +1117,7 @@ var TextAreaUI = styled("textarea", {
   color: "$white",
   fontWeight: "$regular",
   resize: "vertical",
+  boxShadow: "0 3px 2px -2px $colors$gray400",
   border: "0.7px solid $gray400",
   margin: 0,
   backgroundColor: "transparent",
@@ -885,8 +1128,10 @@ var TextAreaUI = styled("textarea", {
   alignItems: "baseline",
   width: "100%",
   padding: "$1 $2",
+  transition: "border 0.2s linear",
   "&:focus": {
-    outline: 0
+    outline: 0,
+    borderBottom: "2px solid $dafaz400"
   },
   "&:disabled": {
     opacity: 0.5,
@@ -901,19 +1146,26 @@ var TextAreaUI = styled("textarea", {
 });
 
 // src/components/TextArea/index.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-function TextArea(_a) {
-  var _b = _a, {
-    children
-  } = _b, props = __objRest(_b, [
-    "children"
-  ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TextAreaUI, __spreadProps(__spreadValues({ rows: 3 }, props), { children }));
-}
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var TextArea = (0, import_react9.forwardRef)((_a, ref) => {
+  var _b = _a, { id, disabled, placeholder, children } = _b, props = __objRest(_b, ["id", "disabled", "placeholder", "children"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    TextAreaUI,
+    __spreadProps(__spreadValues({
+      ref,
+      rows: 3,
+      id,
+      placeholder,
+      disabled
+    }, props), {
+      children
+    })
+  );
+});
 TextArea.displayName = "TextArea";
 
 // src/components/TextInput/index.tsx
-var import_react6 = require("react");
+var import_react10 = require("react");
 
 // src/components/TextInput/styles.ts
 var InputContainer = styled("div", {
@@ -923,8 +1175,8 @@ var InputContainer = styled("div", {
   borderRadius: "$md",
   boxSizing: "border-box",
   display: "flex",
-  alignItems: "baseline",
   width: "100%",
+  boxShadow: "0 3px 2px -2px $colors$gray400",
   transition: "border 0.2s linear",
   "&:has(input:focus)": {
     borderBottom: "2px solid $dafaz400"
@@ -933,7 +1185,41 @@ var InputContainer = styled("div", {
     opacity: 0.5,
     cursor: "not-allowed"
   },
+  button: {
+    border: 0,
+    background: "none",
+    marginRight: "0.5rem",
+    cursor: "pointer",
+    svg: {
+      opacity: 0.75,
+      color: "$white",
+      marginBottom: "-0.3rem"
+    }
+  },
   variants: {
+    size: {
+      lg: {
+        fontSize: "$xl",
+        svg: {
+          width: "$5",
+          height: "$5"
+        }
+      },
+      md: {
+        fontSize: "$lg",
+        svg: {
+          width: "$5",
+          height: "$5"
+        }
+      },
+      sm: {
+        fontSize: "$md",
+        svg: {
+          width: "$4",
+          height: "$4"
+        }
+      }
+    },
     withShadow: {
       true: {
         boxShadow: "inset 0 3rem #444"
@@ -941,20 +1227,23 @@ var InputContainer = styled("div", {
     }
   },
   defaultVariants: {
+    size: "lg",
     withShadow: false
   }
 });
 var InputUI = styled("input", {
   margin: 0,
   fontFamily: "$app",
-  fontSize: "$xl",
   color: "$white",
   backgroundColor: "transparent",
   border: "none",
   width: "100%",
   padding: "$1 $2",
   "&::-ms-reveal": {
-    filter: "invert(100%)"
+    display: "none"
+  },
+  "&::-ms-clear": {
+    display: "none"
   },
   "&::placeholder": {
     fontWeight: "$regular",
@@ -963,6 +1252,22 @@ var InputUI = styled("input", {
   },
   "&:focus": {
     outline: 0
+  },
+  variants: {
+    size: {
+      lg: {
+        fontSize: "$xl"
+      },
+      md: {
+        fontSize: "$lg"
+      },
+      sm: {
+        fontSize: "$md"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "lg"
   }
 });
 var Sufix = styled("span", {
@@ -977,21 +1282,27 @@ var Sufix = styled("span", {
 });
 
 // src/components/TextInput/index.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var TextInput = (0, import_react6.forwardRef)(
+var import_react11 = require("@phosphor-icons/react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var TextInput = (0, import_react10.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       withShadow = false,
       required = true,
       requiredText = "Opcional",
-      id
+      id,
+      type = "text",
+      size
     } = _b, props = __objRest(_b, [
       "withShadow",
       "required",
       "requiredText",
-      "id"
+      "id",
+      "type",
+      "size"
     ]);
-    const [hiddenOptional, setHiddenOptional] = (0, import_react6.useState)(required);
+    const [hiddenOptional, setHiddenOptional] = (0, import_react10.useState)(required);
+    const [isPasswordVisible, setIsPasswordVisible] = (0, import_react10.useState)(false);
     function handleOnChange(event) {
       if (!required) {
         if (event.target.value === "") {
@@ -1001,21 +1312,339 @@ var TextInput = (0, import_react6.forwardRef)(
         }
       }
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(InputContainer, { withShadow, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(InputUI, __spreadValues({ id, ref, onChange: handleOnChange }, props)),
-      !hiddenOptional && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Sufix, { style: { marginLeft: `-${requiredText.length / 2}rem` }, children: requiredText })
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(InputContainer, { size, withShadow, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        InputUI,
+        __spreadValues({
+          id,
+          ref,
+          size,
+          onChange: handleOnChange,
+          type: !isPasswordVisible ? type : "text"
+        }, props)
+      ),
+      !hiddenOptional && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Sufix, { style: { marginLeft: `-${requiredText.length / 2}rem` }, children: requiredText }),
+      type === "password" && isPasswordVisible && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            setIsPasswordVisible(false);
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react11.EyeSlash, { size: 24 })
+        }
+      ),
+      type === "password" && !isPasswordVisible && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            setIsPasswordVisible(true);
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react11.Eye, { size: 24 })
+        }
+      )
     ] });
   }
 );
 TextInput.displayName = "TextInput";
+
+// src/components/MultiSelect/index.tsx
+var import_react12 = require("@phosphor-icons/react");
+
+// src/components/MultiSelect/styles.ts
+var SelectUI2 = styled("div", {
+  width: "100%",
+  maxWidth: "24.5rem",
+  position: "relative",
+  display: "inline-block",
+  fontFamily: "$app",
+  color: "$white",
+  fontWeight: "$regular",
+  cursor: "pointer",
+  margin: 0,
+  backgroundColor: "transparent",
+  borderBottom: "2px solid $dafaz600",
+  borderRadius: "$md",
+  boxSizing: "border-box",
+  transition: "border 0.2s linear",
+  padding: "$1 $2",
+  boxShadow: "0 3px 2px -2px $colors$gray400",
+  "&:hover": {
+    borderBottom: "2px solid $dafaz400"
+  },
+  "&.clicked": {
+    borderBottom: "2px solid $dafaz400",
+    "&:hover": {
+      "> div": {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "start",
+        gap: "$3"
+      }
+    }
+  },
+  variants: {
+    disabled: {
+      true: {
+        opacity: 0.5,
+        cursor: "not-allowed"
+      }
+    },
+    size: {
+      lg: {
+        fontSize: "$xl",
+        svg: {
+          width: "$5",
+          height: "$5"
+        }
+      },
+      md: {
+        fontSize: "$lg",
+        svg: {
+          width: "$4",
+          height: "$4"
+        }
+      },
+      sm: {
+        fontSize: "$md",
+        svg: {
+          width: "$3",
+          height: "$3"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    disabled: false,
+    size: "lg"
+  }
+});
+var SelectContainerUI = styled("div", {
+  marginTop: "0.4rem",
+  marginLeft: "-0.5rem",
+  padding: "$3 $2",
+  border: "1px solid $gray400",
+  boxSizing: "border-box",
+  borderRadius: "$md",
+  display: "none",
+  position: "absolute",
+  zIndex: 999,
+  minWidth: "100%",
+  maxWidth: "24.5rem",
+  background: "$gray800",
+  fontFamily: "$app",
+  color: "$white",
+  fontWeight: "$regular",
+  cursor: "pointer",
+  "&:hover": {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "start",
+    gap: "$3"
+  }
+});
+
+// src/components/MultiSelect/index.tsx
+var import_react13 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var MultiSelect = (0, import_react13.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { id, size, items, placeholder, onChange } = _b, props = __objRest(_b, ["id", "size", "items", "placeholder", "onChange"]);
+    const [values, setValues] = (0, import_react13.useState)([
+      { id: "", label: "", value: "", isChecked: false }
+    ]);
+    const [selectedValue, setSelectedValue] = (0, import_react13.useState)([""]);
+    const [clickClass, setClickClass] = (0, import_react13.useState)(false);
+    (0, import_react13.useEffect)(() => {
+      items.map(
+        (item) => setValues((state) => {
+          const values2 = state.filter((item2) => item2.id !== "");
+          return [
+            ...values2,
+            {
+              id: item.id,
+              label: item.label,
+              value: item.value,
+              isChecked: false
+            }
+          ].sort((a, b) => a.label > b.label ? 1 : -1);
+        })
+      );
+    }, [items]);
+    (0, import_react13.useEffect)(() => {
+      setClickClass(false);
+      values.map((item) => {
+        if (item.isChecked) {
+          setSelectedValue((state) => {
+            const alreadyChecked = state.find((obj) => obj === item.value);
+            if (alreadyChecked) {
+              return state;
+            } else {
+              return [...state, item.value];
+            }
+          });
+        } else {
+          setSelectedValue((state) => {
+            const itemsChecked2 = state.filter((obj) => obj !== item.value);
+            return itemsChecked2;
+          });
+        }
+      });
+    }, [values, items, setValues]);
+    function handleOnValueChange(id2) {
+      setClickClass(() => false);
+      setValues((state) => {
+        const items2 = state.filter((item2) => item2.id !== id2);
+        const item = state.find((item2) => item2.id === id2);
+        if (item) {
+          return [
+            {
+              id: item.id,
+              label: item.label,
+              value: item.value,
+              isChecked: !item.isChecked
+            },
+            ...items2
+          ].sort((a, b) => a.label > b.label ? 1 : -1);
+        }
+        return state;
+      });
+      values.map((item) => {
+        if (item.isChecked) {
+          setSelectedValue((state) => {
+            const alreadyChecked = state.find((obj) => obj === item.value);
+            if (alreadyChecked) {
+              return state;
+            } else {
+              return [...state, item.value];
+            }
+          });
+        } else {
+          setSelectedValue((state) => {
+            const itemsChecked2 = state.filter((obj) => obj !== item.value);
+            return itemsChecked2;
+          });
+        }
+      });
+    }
+    function handleOnClick() {
+      setClickClass((state) => !state);
+    }
+    function handleRemoveItem(e, id2) {
+      handleOnValueChange(id2);
+    }
+    function updateSelectComponent(item) {
+      const checkedItem = selectedValue.find((obj) => obj === item);
+      if (checkedItem) {
+        return selectedValue.filter((obj) => obj !== item);
+      } else {
+        return [...selectedValue.filter((obj) => obj !== ""), item].sort(
+          (a, b) => a > b ? 1 : -1
+        );
+      }
+    }
+    const itemsChecked = values.filter((item) => item.isChecked === true).sort((a, b) => a.label > b.label ? 1 : -1);
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      SelectUI2,
+      __spreadProps(__spreadValues({
+        ref,
+        id,
+        size,
+        onClick: handleOnClick,
+        onBlur: handleOnClick,
+        value: selectedValue,
+        onChange,
+        className: clickClass ? "clicked" : ""
+      }, props), {
+        children: [
+          itemsChecked.length > 0 && itemsChecked.map((item) => {
+            return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  justifyContent: "space-between",
+                  width: "100%",
+                  marginTop: "0.2rem",
+                  alignItems: "center"
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: item.label }),
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                    "button",
+                    {
+                      style: {
+                        all: "unset",
+                        display: "flex",
+                        alignItems: "center",
+                        paddingLeft: "1rem"
+                      },
+                      type: "button",
+                      onClick: (e) => handleRemoveItem(e, item.id),
+                      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react12.X, { size: 24, weight: "bold" })
+                    }
+                  )
+                ]
+              }
+            ) }, `opt:${item.id}`);
+          }) || itemsChecked.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+            "div",
+            {
+              style: {
+                display: "flex",
+                justifyContent: "space-between",
+                width: "100%",
+                alignItems: "center"
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: { opacity: 0.75 }, children: placeholder }),
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  "span",
+                  {
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      paddingLeft: "1rem"
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react12.CaretDown, { size: 24, weight: "bold" })
+                  }
+                )
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectContainerUI, { onMouseOutCapture: handleOnClick, children: values.map((item) => {
+            return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              CheckBox,
+              {
+                name: `chk${item.id}`,
+                size,
+                label: item.label,
+                checked: item.isChecked,
+                value: updateSelectComponent(item.value),
+                handleOnChange: () => __async(void 0, null, function* () {
+                  handleOnValueChange(item.id);
+                })
+              },
+              item.id
+            );
+          }) })
+        ]
+      })
+    );
+  }
+);
+MultiSelect.displayName = "MultiSelect";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Box,
   Button,
   CheckBox,
   Heading,
+  MultiSelect,
   Radio,
   Select,
+  Separator,
   Text,
   TextArea,
   TextInput,