@dafaz-ui/react 4.0.19 → 7.0.0

package/dist/index.mjs

@@ -34,6 +34,7 @@ var __objRest = (source, exclude) => {
 var colors = {
   white: "#FFF",
   black: "#000",
+  red: "#ED0A0A",
   gray100: "#D6D6D6",
   gray200: "#666666",
   gray400: "#444444",
@@ -76,7 +77,7 @@ var radii = {
 var fonts = {
   default: "Roboto, sans-serif",
   app: "Poppins",
-  web: "League Spartan",
+  web: "League Spartan, League_Spartan",
   offer: "KoHo",
   code: "monospace"
 };
@@ -87,7 +88,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",
@@ -133,26 +142,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"
   }
 });
 
@@ -174,12 +234,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"
   },
@@ -188,21 +250,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",
@@ -210,10 +272,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"
@@ -275,7 +339,7 @@ function Button(_a) {
 Button.displayName = "Button";
 
 // src/components/CheckBox/index.tsx
-import { forwardRef, useEffect, useState } from "react";
+import { forwardRef, useId } from "react";
 
 // src/components/CheckBox/styles.ts
 import * as Checkbox from "@radix-ui/react-checkbox";
@@ -291,6 +355,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"
@@ -402,41 +467,26 @@ import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 var CheckBox = 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] = useState(checked ? value : void 0);
-    useEffect(() => {
-      if (checked) {
-        setCheckValue(value);
-      } else {
-        setCheckValue(void 0);
-      }
-    }, [checked, value]);
-    return /* @__PURE__ */ jsxs(Label, { htmlFor: id, disabled, size, children: [
+    const htmlId = useId();
+    return /* @__PURE__ */ jsxs(Label, { htmlFor: htmlId, disabled, size, children: [
       /* @__PURE__ */ jsx3(
         CheckBoxUI,
         __spreadProps(__spreadValues({
           ref,
-          checked,
-          onCheckedChange,
           disabled,
-          id,
+          id: htmlId,
           size,
-          value: checkValue
+          onCheckedChange: handleOnChange
         }, props), {
           children: /* @__PURE__ */ jsx3(CheckBoxIndicator, { asChild: true, size, children: /* @__PURE__ */ jsx3(Check, { weight: "bold" }) })
         })
@@ -453,24 +503,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"
   }
 });
@@ -526,6 +589,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"
@@ -632,57 +696,132 @@ var Label2 = styled("label", {
 });
 
 // src/components/Radio/RadioItem/index.tsx
+import { useId as useId2 } from "react";
 import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 function RadioItem(_a) {
   var _b = _a, {
     label,
-    id,
     size,
     disabled = false
   } = _b, props = __objRest(_b, [
     "label",
-    "id",
     "size",
     "disabled"
   ]);
+  const htmlId = useId2();
   return /* @__PURE__ */ jsxs2(RadioItemContainer, { children: [
-    /* @__PURE__ */ jsx5(RadioItemUI, __spreadProps(__spreadValues({ disabled, id }, props), { size, children: /* @__PURE__ */ jsx5(RadioIndicator, { asChild: true, size, children: /* @__PURE__ */ jsx5(Check2, { weight: "bold" }) }) })),
-    /* @__PURE__ */ jsx5(Label2, { disabled, htmlFor: id, size, children: label })
-  ] }, id);
+    /* @__PURE__ */ jsx5(RadioItemUI, __spreadProps(__spreadValues({ disabled, id: htmlId }, props), { size, children: /* @__PURE__ */ jsx5(RadioIndicator, { asChild: true, size, children: /* @__PURE__ */ jsx5(Check2, { weight: "bold" }) }) })),
+    /* @__PURE__ */ jsx5(Label2, { disabled, htmlFor: htmlId, size, children: label })
+  ] });
 }
 RadioItem.displayName = "RadioItem";
 
 // src/components/Radio/index.tsx
+import { forwardRef as forwardRef2 } from "react";
 import { jsx as jsx6 } from "react/jsx-runtime";
-function Radio(_a) {
-  var _b = _a, {
-    items,
-    size,
-    disabled = false
-  } = _b, props = __objRest(_b, [
-    "items",
-    "size",
-    "disabled"
-  ]);
-  return /* @__PURE__ */ jsx6(RadioUI, __spreadProps(__spreadValues({ disabled }, props), { children: items.map((item) => {
+var Radio = forwardRef2(
+  (_a, ref) => {
+    var _b = _a, {
+      items,
+      size,
+      disabled = false,
+      onValueChange,
+      value
+    } = _b, props = __objRest(_b, [
+      "items",
+      "size",
+      "disabled",
+      "onValueChange",
+      "value"
+    ]);
     return /* @__PURE__ */ jsx6(
-      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__ */ jsx6(
+            RadioItem,
+            {
+              label: item.label,
+              value: item.value,
+              size,
+              disabled
+            },
+            item.id
+          );
+        })
+      })
     );
-  }) }));
-}
+  }
+);
 Radio.displayName = "Radio";
 
+// src/components/Select/index.tsx
+import { CaretDown } from "@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",
@@ -690,20 +829,16 @@ 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"
-  },
+  marginLeft: "$1",
   "&:disabled": {
-    opacity: 0.5,
-    cursor: "not-allowed"
+    opacity: 0.5
+  },
+  "&:focus": {
+    outline: 0
   },
   variants: {
     size: {
@@ -746,49 +881,110 @@ var OptionUI = styled("option", {
 });
 
 // src/components/Select/index.tsx
-import { useState as useState2 } from "react";
+import { forwardRef as forwardRef3, useState } from "react";
 import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
-function Select(_a) {
-  var _b = _a, {
-    size,
-    placeholder,
-    items
-  } = _b, props = __objRest(_b, [
-    "size",
-    "placeholder",
-    "items"
-  ]);
-  const [value, setValue] = useState2("");
-  function handleSelect(event) {
-    setValue(() => {
-      return event.target.value;
-    });
-  }
-  return /* @__PURE__ */ jsxs3(
-    SelectUI,
-    __spreadProps(__spreadValues({
-      size
-    }, props), {
-      value,
-      onChange: handleSelect,
-      style: { opacity: value != "" ? 1 : 0.75 },
-      children: [
-        /* @__PURE__ */ jsx7(OptionUI, { className: "placeholder", value: "", children: placeholder }),
-        items.map((item) => {
-          return /* @__PURE__ */ jsx7(OptionUI, { value: item.value, children: item.label }, item.id);
+var Select = forwardRef3(
+  (_a, ref) => {
+    var _b = _a, { id, size, placeholder, items } = _b, props = __objRest(_b, ["id", "size", "placeholder", "items"]);
+    const [value, setValue] = useState("");
+    function handleSelect(event) {
+      setValue(() => {
+        return event.target.value;
+      });
+    }
+    return /* @__PURE__ */ jsxs3(SelectContainer, { size, children: [
+      /* @__PURE__ */ jsxs3(
+        SelectUI,
+        __spreadProps(__spreadValues({
+          id,
+          ref,
+          size
+        }, props), {
+          value,
+          onChange: handleSelect,
+          style: { opacity: value != "" ? 1 : 0.75 },
+          children: [
+            /* @__PURE__ */ jsx7(OptionUI, { className: "placeholder", value: "", children: placeholder }),
+            items.map((item) => {
+              return /* @__PURE__ */ jsx7(OptionUI, { value: item.value, children: item.label }, item.id);
+            })
+          ]
         })
-      ]
-    })
-  );
-}
+      ),
+      /* @__PURE__ */ jsx7(
+        "span",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            paddingLeft: "1rem",
+            marginRight: "0.7rem",
+            marginLeft: "-3rem"
+          },
+          children: /* @__PURE__ */ jsx7(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
+import { jsx as jsx8 } from "react/jsx-runtime";
+function Separator(_a) {
+  var _b = _a, { size, color, style } = _b, props = __objRest(_b, ["size", "color", "style"]);
+  return /* @__PURE__ */ jsx8(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" },
@@ -797,28 +993,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
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function Text(_a) {
   var _b = _a, {
     children,
-    size = "md"
+    size,
+    color
   } = _b, props = __objRest(_b, [
     "children",
-    "size"
+    "size",
+    "color"
   ]);
-  return /* @__PURE__ */ jsx8(TextUI, __spreadProps(__spreadValues({ size }, props), { children }));
+  return /* @__PURE__ */ jsx9(TextUI, __spreadProps(__spreadValues({ size, color }, props), { children }));
 }
 Text.displayName = "Text";
 
+// src/components/TextArea/index.tsx
+import { forwardRef as forwardRef4 } from "react";
+
 // src/components/TextArea/styles.ts
 var TextAreaUI = styled("textarea", {
   fontFamily: "$app",
@@ -826,6 +1047,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",
@@ -836,8 +1058,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,
@@ -852,21 +1076,28 @@ var TextAreaUI = styled("textarea", {
 });
 
 // src/components/TextArea/index.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
-function TextArea(_a) {
-  var _b = _a, {
-    children
-  } = _b, props = __objRest(_b, [
-    "children"
-  ]);
-  return /* @__PURE__ */ jsx9(TextAreaUI, __spreadProps(__spreadValues({ rows: 3 }, props), { children }));
-}
+import { jsx as jsx10 } from "react/jsx-runtime";
+var TextArea = forwardRef4((_a, ref) => {
+  var _b = _a, { id, disabled, placeholder, children } = _b, props = __objRest(_b, ["id", "disabled", "placeholder", "children"]);
+  return /* @__PURE__ */ jsx10(
+    TextAreaUI,
+    __spreadProps(__spreadValues({
+      ref,
+      rows: 3,
+      id,
+      placeholder,
+      disabled
+    }, props), {
+      children
+    })
+  );
+});
 TextArea.displayName = "TextArea";
 
 // src/components/TextInput/index.tsx
 import {
-  forwardRef as forwardRef2,
-  useState as useState3
+  forwardRef as forwardRef5,
+  useState as useState2
 } from "react";
 
 // src/components/TextInput/styles.ts
@@ -877,8 +1108,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"
@@ -887,7 +1118,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"
@@ -895,20 +1160,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",
@@ -917,6 +1185,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", {
@@ -931,21 +1215,27 @@ var Sufix = styled("span", {
 });
 
 // src/components/TextInput/index.tsx
-import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
-var TextInput = forwardRef2(
+import { Eye, EyeSlash } from "@phosphor-icons/react";
+import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
+var TextInput = forwardRef5(
   (_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] = useState3(required);
+    const [hiddenOptional, setHiddenOptional] = useState2(required);
+    const [isPasswordVisible, setIsPasswordVisible] = useState2(false);
     function handleOnChange(event) {
       if (!required) {
         if (event.target.value === "") {
@@ -955,20 +1245,367 @@ var TextInput = forwardRef2(
         }
       }
     }
-    return /* @__PURE__ */ jsxs4(InputContainer, { withShadow, children: [
-      /* @__PURE__ */ jsx10(InputUI, __spreadValues({ id, ref, onChange: handleOnChange }, props)),
-      !hiddenOptional && /* @__PURE__ */ jsx10(Sufix, { style: { marginLeft: `-${requiredText.length / 2}rem` }, children: requiredText })
+    return /* @__PURE__ */ jsxs4(InputContainer, { size, withShadow, children: [
+      /* @__PURE__ */ jsx11(
+        InputUI,
+        __spreadValues({
+          id,
+          ref,
+          size,
+          onChange: handleOnChange,
+          type: !isPasswordVisible ? type : "text"
+        }, props)
+      ),
+      !hiddenOptional && /* @__PURE__ */ jsx11(Sufix, { style: { marginLeft: `-${requiredText.length / 2}rem` }, children: requiredText }),
+      type === "password" && isPasswordVisible && /* @__PURE__ */ jsx11(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            setIsPasswordVisible(false);
+          },
+          children: /* @__PURE__ */ jsx11(EyeSlash, { size: 24 })
+        }
+      ),
+      type === "password" && !isPasswordVisible && /* @__PURE__ */ jsx11(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            setIsPasswordVisible(true);
+          },
+          children: /* @__PURE__ */ jsx11(Eye, { size: 24 })
+        }
+      )
     ] });
   }
 );
 TextInput.displayName = "TextInput";
+
+// src/components/MultiSelect/index.tsx
+import { CaretDown as CaretDown2, X } from "@phosphor-icons/react";
+
+// src/components/MultiSelect/styles.ts
+var Button2 = styled("button", {
+  backgroundColor: "transparent",
+  border: "none",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: "white",
+  marginBottom: "-3px",
+  cursor: "pointer",
+  zIndex: 5,
+  variants: {
+    size: {
+      lg: {
+        height: "$10",
+        width: "$10"
+      },
+      md: {
+        height: "$8",
+        width: "$8"
+      },
+      sm: {
+        height: "$6",
+        width: "$6"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "lg"
+  }
+});
+var SelectUI2 = styled("div", {
+  zIndex: 3,
+  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",
+  boxShadow: "0 3px 2px -2px $colors$gray400",
+  "&:hover": {
+    borderBottom: "2px solid $dafaz400"
+  },
+  "&.clicked": {
+    borderBottom: "2px solid $dafaz400"
+  },
+  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", {
+  padding: "$3 $2",
+  marginTop: "2px",
+  border: "1px solid $gray400",
+  boxSizing: "border-box",
+  borderRadius: "$md",
+  position: "absolute",
+  zIndex: 2,
+  minWidth: "100%",
+  maxWidth: "24.5rem",
+  background: "$gray800",
+  fontFamily: "$app",
+  color: "$white",
+  fontWeight: "$regular",
+  cursor: "pointer",
+  "&.closed": {
+    display: "none"
+  },
+  "&.opened": {
+    display: "flex",
+    flexDirection: "column",
+    gap: "$3"
+  }
+});
+
+// src/components/MultiSelect/index.tsx
+import {
+  forwardRef as forwardRef6,
+  useEffect,
+  useState as useState3
+} from "react";
+import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
+var MultiSelect = forwardRef6(
+  (_a, ref) => {
+    var _b = _a, { id, size, items, placeholder, onChange } = _b, props = __objRest(_b, ["id", "size", "items", "placeholder", "onChange"]);
+    const [values, setValues] = useState3([
+      { id: "", label: "", value: "", isChecked: false }
+    ]);
+    const [selectedValue, setSelectedValue] = useState3([""]);
+    const [clickClass, setClickClass] = useState3(false);
+    const [isClose, setIsClosed] = useState3(true);
+    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]);
+    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) {
+      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);
+      setIsClosed((state) => !state);
+    }
+    function handleRemoveItem(e, id2) {
+      setIsClosed(true);
+      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__ */ jsxs5(
+      SelectUI2,
+      __spreadProps(__spreadValues({
+        ref,
+        id,
+        size,
+        onClick: handleOnClick,
+        value: selectedValue,
+        onChange,
+        className: clickClass ? "clicked" : ""
+      }, props), {
+        children: [
+          isClose && itemsChecked.length > 0 && itemsChecked.map((item) => {
+            return /* @__PURE__ */ jsx12("div", { children: /* @__PURE__ */ jsxs5(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between"
+                },
+                children: [
+                  /* @__PURE__ */ jsx12("span", { style: { marginLeft: "0.5rem" }, children: item.label }),
+                  /* @__PURE__ */ jsx12(
+                    Button2,
+                    {
+                      type: "button",
+                      size,
+                      onClick: (e) => handleRemoveItem(e, item.id),
+                      children: /* @__PURE__ */ jsx12(X, { size: 24, weight: "bold" })
+                    }
+                  )
+                ]
+              }
+            ) }, `opt:${item.id}`);
+          }) || (itemsChecked.length === 0 || !isClose) && /* @__PURE__ */ jsx12("div", { children: /* @__PURE__ */ jsxs5(
+            "div",
+            {
+              style: {
+                display: "flex",
+                justifyContent: "space-between",
+                width: "100%",
+                alignItems: "center"
+              },
+              children: [
+                /* @__PURE__ */ jsx12("span", { style: { opacity: 0.75, marginLeft: "0.5rem" }, children: placeholder }),
+                /* @__PURE__ */ jsx12(
+                  "span",
+                  {
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      marginRight: "0.7rem"
+                    },
+                    children: /* @__PURE__ */ jsx12(CaretDown2, { size: 24, weight: "bold" })
+                  }
+                )
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx12(
+            SelectContainerUI,
+            {
+              className: isClose ? "closed" : "opened",
+              onMouseLeave: () => {
+                setIsClosed(true);
+              },
+              children: values.map((item) => {
+                return /* @__PURE__ */ jsx12(
+                  CheckBox,
+                  {
+                    name: `chk${item.id}`,
+                    size,
+                    label: item.label,
+                    checked: item.isChecked,
+                    value: updateSelectComponent(item.value),
+                    handleOnChange: () => {
+                      handleOnValueChange(item.id);
+                    }
+                  },
+                  item.id
+                );
+              })
+            }
+          )
+        ]
+      })
+    );
+  }
+);
+MultiSelect.displayName = "MultiSelect";
 export {
   Box,
   Button,
   CheckBox,
   Heading,
+  MultiSelect,
   Radio,
   Select,
+  Separator,
   Text,
   TextArea,
   TextInput,