@clickpalm/react 1.0.0 → 1.1.0

package/dist/index.js

@@ -42,6 +42,8 @@ __export(src_exports, {
   Icon: () => Icon,
   Input: () => Input2,
   LabelledValue: () => LabelledValue,
+  Loader: () => Loader,
+  MaskedInput: () => MaskedInput,
   Modal: () => Modal,
   MultiStep: () => MultiStep,
   OneTimePassword: () => OneTimePassword,
@@ -690,6 +692,32 @@ var Check = (props) => {
   );
 };
 
+// src/components/Icon/Svgs/Copy.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var Copy = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    "svg",
+    {
+      width: "18",
+      height: "19",
+      viewBox: "0 0 18 19",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        "path",
+        {
+          d: "M3.4 11.9547H2.6C2.17565 11.9547 1.76869 11.7861 1.46863 11.4861C1.16857 11.186 1 10.779 1 10.3547V3.15469C1 2.73034 1.16857 2.32337 1.46863 2.02332C1.76869 1.72326 2.17565 1.55469 2.6 1.55469H9.8C10.2243 1.55469 10.6313 1.72326 10.9314 2.02332C11.2314 2.32337 11.4 2.73034 11.4 3.15469V3.95469M8.2 7.15469H15.4C16.2837 7.15469 17 7.87103 17 8.75469V15.9547C17 16.8383 16.2837 17.5547 15.4 17.5547H8.2C7.31634 17.5547 6.6 16.8383 6.6 15.9547V8.75469C6.6 7.87103 7.31634 7.15469 8.2 7.15469Z",
+          stroke: "currentColor",
+          "stroke-width": "2",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        }
+      )
+    }
+  );
+};
+
 // src/components/Icon/icons.ts
 var iconMap = {
   TriangleDown: import_react_icons.TriangleDownIcon,
@@ -709,12 +737,13 @@ var iconMap = {
   Search,
   ChevronLeft,
   ChevronRight,
-  Check
+  Check,
+  Copy
 };
 
 // src/components/Icon/index.tsx
 var import_react3 = require("react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var colorMap = {
   black: "#000000",
   green: "#78CB63",
@@ -727,7 +756,7 @@ function Icon({ name, size = 24, color = "black", ...rest }) {
     return null;
   }
   const fillColor = (0, import_react3.useMemo)(() => colorMap[color], [color]);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     IconComponent,
     {
       width: size,
@@ -934,7 +963,7 @@ var StyledLabel = styled("label", {
 });
 
 // src/components/Calendar/index.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 calendarStyles();
 var Calendar2 = ({ label, onChange }) => {
   const [selected, setSelected] = (0, import_react4.useState)(void 0);
@@ -952,9 +981,9 @@ var Calendar2 = ({ label, onChange }) => {
       setMonth(selected);
     }
   }, [selected]);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(StyledLabel, { children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(StyledLabel, { children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       import_react_day_picker.DayPicker,
       {
         className: !open ? "calendar-root-collapsed" : "",
@@ -984,21 +1013,21 @@ var Calendar2 = ({ label, onChange }) => {
         components: {
           MonthCaption: ({ calendarMonth, displayIndex, ...safeprops }) => {
             const displayMonth = calendarMonth.date;
-            return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { ...safeprops, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { ...safeprops, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                 Button,
                 {
                   variant: "secondary",
                   size: "sm",
                   onClick: () => setOpen(!open),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(StyledButton2, { isOpen: open, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, { name: "TriangleUp", size: 16 }) })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(StyledButton2, { isOpen: open, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon, { name: "TriangleUp", size: 16 }) })
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "calendar-month_caption", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "calendar-caption_label", role: "heading", "aria-level": 2, children: (0, import_date_fns.format)(displayMonth, "MMMM 'de' yyyy", { locale: import_locale.ptBR }).replace(/^./, (c) => c.toUpperCase()) }) })
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "calendar-month_caption", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "calendar-caption_label", role: "heading", "aria-level": 2, children: (0, import_date_fns.format)(displayMonth, "MMMM 'de' yyyy", { locale: import_locale.ptBR }).replace(/^./, (c) => c.toUpperCase()) }) })
             ] });
           },
-          PreviousMonthButton: (props) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Button, { size: "sm", variant: "secondary", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, { name: "TriangleLeft", size: 16 }) }),
-          NextMonthButton: (props) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Button, { size: "sm", variant: "secondary", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, { name: "TriangleRight", size: 16 }) })
+          PreviousMonthButton: (props) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Button, { size: "sm", variant: "secondary", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon, { name: "TriangleLeft", size: 16 }) }),
+          NextMonthButton: (props) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Button, { size: "sm", variant: "secondary", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon, { name: "TriangleRight", size: 16 }) })
         }
       }
     )
@@ -1118,23 +1147,23 @@ var Span = styled("span", {
 });
 
 // src/components/Checkbox/index.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function Checkbox2({ label, checked, onCheckedChange, errorMessage, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(StyledWrapper, { hasError: !!errorMessage, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(StyledWrapper, { hasError: !!errorMessage, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         CheckboxContainer,
         {
           checked,
           onCheckedChange,
           hasError: !!errorMessage,
           ...rest,
-          children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CheckboxIndicator, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon, { name: "Check", size: 16 }) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(CheckboxIndicator, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon, { name: "Check", size: 16 }) })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CheckboxLabel, { children: label })
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(CheckboxLabel, { children: label })
     ] }),
-    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Span, { children: errorMessage })
+    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Span, { children: errorMessage })
   ] });
 }
 Checkbox2.displayName = "Checkbox";
@@ -1244,7 +1273,7 @@ var Span2 = styled("span", {
 });
 
 // src/components/Input/index.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var Input2 = (0, import_react5.forwardRef)(
   ({ prefix, suffix, label, errorMessage, noMargin = false, ...props }, forwardedRef) => {
     const localInputRef = (0, import_react5.useRef)(null);
@@ -1258,9 +1287,9 @@ var Input2 = (0, import_react5.forwardRef)(
       const type = node.type;
       return type?.displayName === "Button";
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(StyledWrapper2, { children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Label, { children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(StyledWrapper2, { children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Label, { children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
         TextInputContainer,
         {
           hasButtonSuffix: isButtonElement(suffix),
@@ -1268,13 +1297,13 @@ var Input2 = (0, import_react5.forwardRef)(
           hasError: !!errorMessage,
           onClick: handleContainerClick,
           children: [
-            !!prefix && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Prefix, { children: prefix }),
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Input, { ref: inputRef, ...props }),
-            !!suffix && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Suffix, { children: suffix })
+            !!prefix && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Prefix, { children: prefix }),
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Input, { ref: inputRef, ...props }),
+            !!suffix && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Suffix, { children: suffix })
           ]
         }
       ),
-      errorMessage && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Span2, { children: errorMessage })
+      errorMessage && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Span2, { children: errorMessage })
     ] });
   }
 );
@@ -1342,7 +1371,7 @@ var datePickerStyles = globalCss({
 });
 
 // src/components/Datepicker/index.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 datePickerStyles();
 var Datepicker = ({ label, value, onChange }) => {
   const [selected, setSelected] = (0, import_react6.useState)(void 0);
@@ -1372,8 +1401,8 @@ var Datepicker = ({ label, value, onChange }) => {
       setMonth(selected);
     }
   }, [open, selected]);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       Input2,
       {
         ref: inputRef,
@@ -1383,10 +1412,10 @@ var Datepicker = ({ label, value, onChange }) => {
         value: value || "",
         noMargin: true,
         readOnly: true,
-        suffix: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: "Calendar", size: 16 })
+        suffix: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { name: "Calendar", size: 16 })
       }
     ),
-    open && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    open && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       "div",
       {
         ref: calendarRef,
@@ -1398,7 +1427,7 @@ var Datepicker = ({ label, value, onChange }) => {
           boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
           borderRadius: "8px"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           import_react_day_picker2.DayPicker,
           {
             mode: "single",
@@ -1420,8 +1449,8 @@ var Datepicker = ({ label, value, onChange }) => {
               }
             },
             components: {
-              PreviousMonthButton: (props) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Button, { size: "sm", variant: "secondary", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: "TriangleLeft", size: 16 }) }),
-              NextMonthButton: (props) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Button, { size: "sm", variant: "secondary", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: "TriangleRight", size: 16 }) })
+              PreviousMonthButton: (props) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { size: "sm", variant: "secondary", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { name: "TriangleLeft", size: 16 }) }),
+              NextMonthButton: (props) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { size: "sm", variant: "secondary", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { name: "TriangleRight", size: 16 }) })
             }
           }
         )
@@ -1503,16 +1532,16 @@ var StyledDivider = (0, import_react7.styled)("hr", {
 });
 
 // src/components/Modal/index.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var Modal = ({ open, onOpenChange, title, children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Dialog2.Root, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Dialog2.Portal, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(StyledOverlay, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(StyledContent, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Wrapper, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(StyledTitle, { children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(StyledClose, { asChild: true, "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { variant: "secondary", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { name: "Closed", size: 8 }) }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Dialog2.Root, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Dialog2.Portal, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(StyledOverlay, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(StyledContent, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Wrapper, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(StyledTitle, { children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(StyledClose, { asChild: true, "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { variant: "secondary", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon, { name: "Closed", size: 8 }) }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(StyledDivider, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(StyledDivider, {}),
       children
     ] })
   ] }) });
@@ -1549,7 +1578,7 @@ var StyledIndicator = styled(Progress.Indicator, {
 });
 
 // src/components/ProgressBar/index.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var ProgressBar = ({ label, value = 0, max = 100, ...rest }) => {
   const [progress2, setProgress] = (0, import_react8.useState)(0);
   (0, import_react8.useEffect)(() => {
@@ -1557,15 +1586,15 @@ var ProgressBar = ({ label, value = 0, max = 100, ...rest }) => {
     return () => clearTimeout(timer);
   }, [value]);
   const valueLabel = `${Math.round(progress2 / max * 100)}%`;
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(StyledWrapper3, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("label", { style: { fontSize: 16, alignSelf: "flex-start" }, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(StyledWrapper3, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("label", { style: { fontSize: 16, alignSelf: "flex-start" }, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       StyledRoot,
       {
         value: progress2,
         "aria-valuetext": valueLabel,
         ...rest,
-        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           StyledIndicator,
           {
             style: { transform: `translateX(-${100 - progress2}%)` }
@@ -1669,7 +1698,7 @@ var Span3 = styled("span", {
 });
 
 // src/components/Radio/index.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var Radio = ({
   labels,
   value,
@@ -1678,8 +1707,8 @@ var Radio = ({
   required = false,
   errorMessage
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("form", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("form", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       StyledRoot2,
       {
         value,
@@ -1688,27 +1717,27 @@ var Radio = ({
         disabled,
         required,
         loop: true,
-        children: labels.map((label, index) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Wrapper2, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        children: labels.map((label, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Wrapper2, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             StyledItem,
             {
               value: label,
               id: `radio-${index}`,
               "aria-label": label,
               hasError: !!errorMessage,
-              children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StyledIndicator2, {})
+              children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(StyledIndicator2, {})
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ItemLabel, { htmlFor: `radio-${index}`, children: label })
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ItemLabel, { htmlFor: `radio-${index}`, children: label })
         ] }, label))
       }
     ),
-    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Span3, { children: errorMessage })
+    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Span3, { children: errorMessage })
   ] });
 };
 
 // src/components/Spacing.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var spacingMap = {
   xs: 8,
   sm: 12,
@@ -1720,7 +1749,7 @@ var spacingMap = {
 };
 var Spacing = ({ size, axis = "vertical" }) => {
   const style = axis === "vertical" ? { height: spacingMap[size], width: "100%" } : { width: spacingMap[size], height: "100%" };
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style, "data-testid": `spacing-${size}-${axis}` });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { style, "data-testid": `spacing-${size}-${axis}` });
 };
 
 // src/components/Switch/styles.ts
@@ -1818,7 +1847,7 @@ var Span4 = styled("span", {
 });
 
 // src/components/Switch/index.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var Switch2 = ({
   label,
   checked,
@@ -1829,9 +1858,9 @@ var Switch2 = ({
   id,
   errorMessage
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Wrapper3, { hasError: !!errorMessage, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Wrapper3, { hasError: !!errorMessage, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
         StyledRoot3,
         {
           id,
@@ -1841,12 +1870,12 @@ var Switch2 = ({
           hasError: !!errorMessage,
           disabled,
           required,
-          children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(StyledThumb, {})
+          children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(StyledThumb, {})
         }
       ),
-      label && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Label2, { htmlFor: id, children: label })
+      label && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Label2, { htmlFor: id, children: label })
     ] }),
-    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Span4, { children: errorMessage })
+    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Span4, { children: errorMessage })
   ] });
 };
 
@@ -1932,9 +1961,9 @@ var TabsContent = styled(Tabs.Content, {
 });
 
 // src/components/Tabs/index.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var TabsItem = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_jsx_runtime25.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_jsx_runtime26.Fragment, { children });
 };
 var Tabs2 = ({ defaultValue, colorContent, children }) => {
   const items = [];
@@ -1984,28 +2013,28 @@ var Tabs2 = ({ defaultValue, colorContent, children }) => {
       });
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
     TabsRoot,
     {
       defaultValue: defaultValue || items[0]?.value,
       ref: rootRef,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-          hasOverflow && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+          hasOverflow && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             Button,
             {
               variant: "secondary",
               size: "sm",
               onClick: () => scroll("left"),
-              children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, { name: "TriangleLeft", size: 64 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon, { name: "TriangleLeft", size: 64 })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             TabsList,
             {
               ref: listRef,
               scrollable: hasOverflow,
-              children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                 TabsTrigger,
                 {
                   value: item.value,
@@ -2016,17 +2045,17 @@ var Tabs2 = ({ defaultValue, colorContent, children }) => {
               ))
             }
           ),
-          hasOverflow && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          hasOverflow && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             Button,
             {
               variant: "secondary",
               size: "sm",
               onClick: () => scroll("right"),
-              children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, { name: "TriangleRight", size: 64 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon, { name: "TriangleRight", size: 64 })
             }
           )
         ] }),
-        items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           TabsContent,
           {
             colorContent,
@@ -2042,7 +2071,7 @@ var Tabs2 = ({ defaultValue, colorContent, children }) => {
 Tabs2.Item = TabsItem;
 
 // src/components/TextArea.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var Wrapper4 = styled("div", {
   display: "flex",
   flexDirection: "column"
@@ -2119,10 +2148,10 @@ var Span5 = styled("span", {
 });
 var TextArea = ({ label, id, htmlFor, errorMessage, ...props }) => {
   const textAreaId = id || htmlFor || `textarea-${crypto.randomUUID()}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Wrapper4, { children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(StyledLabel2, { htmlFor: textAreaId, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TextAreaElement, { id: textAreaId, ...props, hasError: !!errorMessage }),
-    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Span5, { children: errorMessage })
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Wrapper4, { children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(StyledLabel2, { htmlFor: textAreaId, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TextAreaElement, { id: textAreaId, ...props, hasError: !!errorMessage }),
+    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Span5, { children: errorMessage })
   ] });
 };
 TextArea.displayName = "TextArea";
@@ -2178,7 +2207,7 @@ var TooltipArrow = styled(RadixTooltip.Arrow, {
 });
 
 // src/components/Tooltip/index.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var Tooltip = ({
   content,
   children,
@@ -2188,18 +2217,233 @@ var Tooltip = ({
   onOpenChange,
   delayDuration = 100
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(RadixTooltip2.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(RadixTooltip2.Root, { open, onOpenChange, delayDuration, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TooltipTrigger, { asChild: true, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(TooltipContent, { side, sideOffset, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(RadixTooltip2.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(RadixTooltip2.Root, { open, onOpenChange, delayDuration, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TooltipTrigger, { asChild: true, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(TooltipContent, { side, sideOffset, children: [
       content,
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TooltipArrow, {})
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TooltipArrow, {})
     ] })
   ] }) });
 };
 Tooltip.displayName = "Tooltip";
 
+// src/components/Loader/index.tsx
+var import_react10 = require("react");
+
+// src/components/Loader/style.ts
+var Content4 = styled("div", {
+  position: "relative",
+  height: "100%",
+  width: "100%",
+  minHeight: "inherit",
+  top: 0,
+  left: 0,
+  backgroundColor: "YellowGreen"
+});
+var Overlay2 = styled("div", {
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  backgroundColor: "rgba(255, 255, 255, 0.6)",
+  zIndex: 999,
+  variants: {
+    show: {
+      true: {
+        opacity: 1
+      },
+      false: {
+        opacity: 0
+      }
+    },
+    fullscreen: {
+      true: {
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0
+      },
+      false: {
+        position: "absolute"
+      }
+    }
+  }
+});
+var SpinnerContainer = styled("div", {
+  position: "relative"
+});
+var rotation = keyframes({
+  "0%": { transform: "rotate(0deg)" },
+  "100%": { transform: "rotate(360deg)" }
+});
+var Spinner = styled("span", {
+  width: "$19",
+  height: "$19",
+  borderRadius: "50%",
+  display: "inline-block",
+  borderTop: "6px solid $ignite_light",
+  borderRight: "6px solid transparent",
+  boxSizing: "border-box",
+  animation: `${rotation} 1s linear infinite`,
+  "&::after": {
+    content: '""',
+    boxSizing: "border-box",
+    position: "absolute",
+    left: 0,
+    top: 0,
+    width: "$19",
+    height: "$19",
+    borderRadius: "50%",
+    borderLeft: "6px solid $clickpalm_light",
+    borderBottom: "6px solid transparent",
+    animation: `${rotation} 0.5s linear infinite reverse`
+  }
+});
+
+// src/components/Loader/index.tsx
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var Loader = ({ show, fullscreen }) => {
+  const ref = (0, import_react10.useRef)(null);
+  const [parentRect, setParentRect] = (0, import_react10.useState)(null);
+  (0, import_react10.useEffect)(() => {
+    if (!fullscreen && ref.current?.parentElement) {
+      const rect = ref.current.parentElement.getBoundingClientRect();
+      setParentRect(rect);
+    }
+  }, [fullscreen, show]);
+  if (!show)
+    return null;
+  const overlayStyles = fullscreen ? { position: "fixed", top: 0, left: 0, right: 0, bottom: 0 } : parentRect ? {
+    top: parentRect.top + window.scrollY,
+    left: parentRect.left + window.scrollX,
+    width: parentRect.width,
+    height: parentRect.height
+  } : {};
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { ref, style: { display: "none" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Overlay2, { show: true, fullscreen, style: overlayStyles, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SpinnerContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Spinner, {}) }) })
+  ] });
+};
+Loader.displayName = "Loader";
+
+// src/components/MaskedInput/index.tsx
+var import_react11 = require("react");
+
+// src/components/MaskedInput/utils.ts
+var MAX_LENGTHS = {
+  cellPhone: 15,
+  homePhone: 14,
+  cep: 9,
+  cpf: 14,
+  cnpj: 18,
+  date: 10
+};
+var applyMask = (value, maskType) => {
+  const digits = value.replace(/\D/g, "");
+  const maxLength = MAX_LENGTHS[maskType];
+  if (digits.length > maxLength) {
+    return value.slice(0, -1);
+  }
+  switch (maskType) {
+    case "cellPhone":
+      if (digits.length <= 2)
+        return digits;
+      if (digits.length <= 7)
+        return `(${digits.slice(0, 2)}) ${digits.slice(2)}`;
+      return `(${digits.slice(0, 2)}) ${digits.slice(2, 7)}-${digits.slice(7, 11)}`;
+    case "homePhone":
+      if (digits.length <= 2)
+        return digits;
+      if (digits.length <= 6)
+        return `(${digits.slice(0, 2)}) ${digits.slice(2)}`;
+      return `(${digits.slice(0, 2)}) ${digits.slice(2, 6)}-${digits.slice(6, 10)}`;
+    case "cep":
+      if (digits.length <= 5)
+        return digits;
+      return `${digits.slice(0, 5)}-${digits.slice(5, 8)}`;
+    case "cpf":
+      if (digits.length <= 3)
+        return digits;
+      if (digits.length <= 6)
+        return `${digits.slice(0, 3)}.${digits.slice(3)}`;
+      if (digits.length <= 9)
+        return `${digits.slice(0, 3)}.${digits.slice(3, 6)}.${digits.slice(6)}`;
+      return `${digits.slice(0, 3)}.${digits.slice(3, 6)}.${digits.slice(6, 9)}-${digits.slice(9, 11)}`;
+    case "cnpj":
+      if (digits.length <= 2)
+        return digits;
+      if (digits.length <= 5)
+        return `${digits.slice(0, 2)}.${digits.slice(2)}`;
+      if (digits.length <= 8)
+        return `${digits.slice(0, 2)}.${digits.slice(2, 5)}.${digits.slice(5)}`;
+      if (digits.length <= 12)
+        return `${digits.slice(0, 2)}.${digits.slice(2, 5)}.${digits.slice(5, 8)}/${digits.slice(8)}`;
+      return `${digits.slice(0, 2)}.${digits.slice(2, 5)}.${digits.slice(5, 8)}/${digits.slice(8, 12)}-${digits.slice(12, 14)}`;
+    case "date":
+      if (digits.length <= 2)
+        return digits;
+      if (digits.length <= 4)
+        return `${digits.slice(0, 2)}/${digits.slice(2)}`;
+      return `${digits.slice(0, 2)}/${digits.slice(2, 4)}/${digits.slice(4, 8)}`;
+    default:
+      return value;
+  }
+};
+
+// src/components/MaskedInput/index.tsx
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var MaskedInput = (0, import_react11.forwardRef)(
+  ({ maskType, onChange, ...props }, ref) => {
+    const [value, setValue] = (0, import_react11.useState)("");
+    const inputRef = (0, import_react11.useRef)(null);
+    const handleChange = (e) => {
+      const { value: inputValue, selectionStart } = e.target;
+      const isBackspace = value.length > inputValue.length;
+      const rawValue = inputValue.replace(/\D/g, "");
+      const maskedValue = applyMask(rawValue, maskType);
+      setValue(maskedValue);
+      if (inputRef.current && selectionStart !== null) {
+        let newCursorPos = selectionStart;
+        if (isBackspace && value.length > 0) {
+          const prevChar = value[selectionStart || 0];
+          if (prevChar && !/\d/.test(prevChar)) {
+            newCursorPos = Math.max(0, (selectionStart || 0) - 1);
+          }
+        }
+        setTimeout(() => {
+          if (inputRef.current) {
+            inputRef.current.setSelectionRange(newCursorPos, newCursorPos);
+          }
+        }, 0);
+      }
+      if (onChange) {
+        const syntheticEvent = {
+          ...e,
+          target: {
+            ...e.target,
+            value: maskedValue,
+            rawValue
+          }
+        };
+        onChange(syntheticEvent);
+      }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      Input2,
+      {
+        ...props,
+        ref,
+        value,
+        onChange: handleChange,
+        maxLength: MAX_LENGTHS[maskType]
+      }
+    );
+  }
+);
+MaskedInput.displayName = "MaskedInput";
+
 // src/components/Box.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var StyledBox = styled("div", {
   padding: "$5",
   borderRadius: "$md",
@@ -2221,12 +2465,12 @@ var StyledBox = styled("div", {
   }
 });
 var Box = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(StyledBox, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(StyledBox, { ...props });
 };
 Box.displayName = "Box";
 
 // src/components/Text.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var StyledText = styled("p", {
   fontFamily: "$default",
   lineHeight: "$short",
@@ -2267,7 +2511,7 @@ var StyledText = styled("p", {
   }
 });
 var Text = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(StyledText, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(StyledText, { ...props });
 };
 Text.displayName = "Text";
 
@@ -2298,7 +2542,7 @@ Heading.displayName = "Heading";
 // src/components/Select/index.tsx
 var import_react_icons2 = require("@radix-ui/react-icons");
 var CustomSelect = __toESM(require("@radix-ui/react-select"));
-var import_react10 = require("react");
+var import_react12 = require("react");
 
 // src/components/Select/styles.ts
 var Select = __toESM(require("@radix-ui/react-select"));
@@ -2415,7 +2659,7 @@ var Span6 = styled("span", {
 });
 
 // src/components/Select/index.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function Select2({
   value,
   onValueChange,
@@ -2425,10 +2669,10 @@ function Select2({
   errorMessage,
   ...rest
 }) {
-  const [open, setOpen] = (0, import_react10.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(StyledWrapper4, { children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Label3, { children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+  const [open, setOpen] = (0, import_react12.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(StyledWrapper4, { children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Label3, { children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
       CustomSelect.Root,
       {
         value,
@@ -2436,21 +2680,21 @@ function Select2({
         onOpenChange: setOpen,
         ...rest,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(StyledTrigger, { "aria-label": label, hasError: !!errorMessage, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CustomSelect.Value, { placeholder }),
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(StyledIcon, { open, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_icons2.TriangleDownIcon, {}) })
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(StyledTrigger, { "aria-label": label, hasError: !!errorMessage, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CustomSelect.Value, { placeholder }),
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(StyledIcon, { open, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_icons2.TriangleDownIcon, {}) })
           ] }),
-          errorMessage && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Span6, { children: errorMessage }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CustomSelect.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+          errorMessage && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Span6, { children: errorMessage }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CustomSelect.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
             StyledContent2,
             {
               side: "bottom",
               align: "start",
               position: "popper",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CustomSelect.ScrollUpButton, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_icons2.TriangleUpIcon, {}) }),
-                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(StyledViewport, { children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(StyledItem2, { value: item.value, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CustomSelect.ItemText, { children: item.label }) }, item.value)) }),
-                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CustomSelect.ScrollDownButton, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_icons2.TriangleDownIcon, {}) })
+                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CustomSelect.ScrollUpButton, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_icons2.TriangleUpIcon, {}) }),
+                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(StyledViewport, { children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(StyledItem2, { value: item.value, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CustomSelect.ItemText, { children: item.label }) }, item.value)) }),
+                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CustomSelect.ScrollDownButton, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_icons2.TriangleDownIcon, {}) })
               ]
             }
           ) })
@@ -2462,7 +2706,7 @@ function Select2({
 Select2.displayName = "Select";
 
 // src/components/LabelledValue/index.tsx
-var import_react11 = require("react");
+var import_react13 = require("react");
 
 // src/components/LabelledValue/styles.ts
 var Container = styled("div", {
@@ -2523,19 +2767,19 @@ var Value2 = styled("div", {
 });
 
 // src/components/LabelledValue/index.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function LabelledValue({ position = "vertical", withRow = false, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Container, { position, children: import_react11.Children.map(children, (child) => {
-    if ((0, import_react11.isValidElement)(child)) {
-      return (0, import_react11.cloneElement)(child, { position, withRow });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Container, { position, children: import_react13.Children.map(children, (child) => {
+    if ((0, import_react13.isValidElement)(child)) {
+      return (0, import_react13.cloneElement)(child, { position, withRow });
     }
     return child;
   }) });
 }
 function Item3({ label, value, position = "vertical", withRow = false }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(ItemWrapper, { position, withRow, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Label4, { children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Value2, { children: value })
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(ItemWrapper, { position, withRow, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Label4, { children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Value2, { children: value })
   ] });
 }
 LabelledValue.Item = Item3;
@@ -2584,19 +2828,19 @@ var StyledInput = styled(OneTimePasswordField.Input, {
 });
 
 // src/components/OneTimePassword/index.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var OneTimePassword = ({ label, length, value, onValueChange, ...rootProps }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(StyledWrapper5, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("label", { children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(StyledWrapper5, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("label", { children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
       StyledRoot4,
       {
         value,
         onValueChange,
         ...rootProps,
         children: [
-          Array.from({ length }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(StyledInput, {}, index)),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(OneTimePasswordField2.HiddenInput, {})
+          Array.from({ length }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(StyledInput, {}, index)),
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(OneTimePasswordField2.HiddenInput, {})
         ]
       }
     )
@@ -2606,7 +2850,7 @@ OneTimePassword.displayName = "OneTimePasswordInput";
 
 // src/components/Toast/index.tsx
 var ToastPrimitive2 = __toESM(require("@radix-ui/react-toast"));
-var React2 = __toESM(require("react"));
+var React3 = __toESM(require("react"));
 
 // src/components/Toast/styles.ts
 var ToastPrimitive = __toESM(require("@radix-ui/react-toast"));
@@ -2769,11 +3013,11 @@ var toast = {
 };
 
 // src/components/Toast/index.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var Toast = () => {
-  const [messages, setMessages] = React2.useState([]);
-  const [paused, setPaused] = React2.useState(false);
-  React2.useEffect(() => {
+  const [messages, setMessages] = React3.useState([]);
+  const [paused, setPaused] = React3.useState(false);
+  React3.useEffect(() => {
     const handleNewToast = (msg) => {
       setMessages((prev) => [...prev, msg]);
     };
@@ -2785,8 +3029,8 @@ var Toast = () => {
   const removeToast = (id) => {
     setMessages((prev) => prev.filter((msg) => msg.id !== id));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(ToastPrimitive2.Provider, { swipeDirection: "right", children: [
-    messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(ToastPrimitive2.Provider, { swipeDirection: "right", children: [
+    messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
       ToastRoot,
       {
         open: true,
@@ -2799,11 +3043,11 @@ var Toast = () => {
         onPause: () => setPaused(true),
         onResume: () => setPaused(false),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(ToastContent, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ToastTitle, { children: message.title }),
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ToastDescription, { children: message.description })
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(ToastContent, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ToastTitle, { children: message.title }),
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ToastDescription, { children: message.description })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ToastAction, { altText: "Fechar", asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ToastAction, { altText: "Fechar", asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             "button",
             {
               style: {
@@ -2813,15 +3057,15 @@ var Toast = () => {
                 alignItems: "center"
               },
               onClick: () => removeToast(message.id),
-              children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icon, { name: "Closed", size: 16, height: 14, width: 14 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Icon, { name: "Closed", size: 16, height: 14, width: 14 })
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ToastProgress, { paused, variant: message.variant })
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ToastProgress, { paused, variant: message.variant })
         ]
       },
       message.id
     )),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ToastViewport, {})
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ToastViewport, {})
   ] });
 };
 
@@ -3057,22 +3301,22 @@ var StepLabel = styled("span", {
 });
 
 // src/components/MultiStep/index.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var MultiStep = ({
   steps,
   currentStep,
   orientation = "horizontal",
   variant
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     Wrapper5,
     {
       orientation,
       children: steps.map((step, index) => {
         const isFirst = index === 0;
         const isLast = index === steps.length - 1;
-        return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(StepItem, { orientation, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(StepItem, { orientation, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
             StepCircle,
             {
               orientation,
@@ -3083,7 +3327,7 @@ var MultiStep = ({
               children: index + 1
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
             StepLabel,
             {
               orientation,
@@ -3099,7 +3343,7 @@ var MultiStep = ({
 MultiStep.displayName = "MultiStep";
 
 // src/components/Carousel/index.tsx
-var import_react12 = require("react");
+var import_react14 = require("react");
 
 // src/components/Carousel/styles.ts
 var CarouselContainer = styled("div", {
@@ -3205,13 +3449,13 @@ var CarouselItemContainer = styled("div", {
 });
 
 // src/components/Carousel/index.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var SWIPE_THRESHOLD = 50;
 var Carousel = ({ title, variant, children }) => {
-  const items = import_react12.Children.toArray(children);
-  const [activeIndex, setActiveIndex] = (0, import_react12.useState)(0);
-  const [touchStartX, setTouchStartX] = (0, import_react12.useState)(null);
-  const [touchEndX, setTouchEndX] = (0, import_react12.useState)(null);
+  const items = import_react14.Children.toArray(children);
+  const [activeIndex, setActiveIndex] = (0, import_react14.useState)(0);
+  const [touchStartX, setTouchStartX] = (0, import_react14.useState)(null);
+  const [touchEndX, setTouchEndX] = (0, import_react14.useState)(null);
   const prev = () => {
     setActiveIndex((prevIndex) => prevIndex === 0 ? items.length - 1 : prevIndex - 1);
   };
@@ -3239,18 +3483,18 @@ var Carousel = ({ title, variant, children }) => {
     setTouchStartX(null);
     setTouchEndX(null);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
     CarouselContainer,
     {
       role: "region",
       "aria-roledescription": "carousel",
       "aria-label": "Carousel Component",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Wrapper6, { variant, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(CarouselHeader, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Title2, { children: title }),
-            /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Navigation, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Wrapper6, { variant, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(CarouselHeader, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Title2, { children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Navigation, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                 Button,
                 {
                   size: "sm",
@@ -3258,10 +3502,10 @@ var Carousel = ({ title, variant, children }) => {
                   "aria-label": "Previous Slide",
                   onClick: prev,
                   tabIndex: 0,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Icon, { name: "TriangleLeft", size: 16, color: variant === "purple" ? "white" : "black" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Icon, { name: "TriangleLeft", size: 16, color: variant === "purple" ? "white" : "black" })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                 Button,
                 {
                   size: "sm",
@@ -3269,22 +3513,22 @@ var Carousel = ({ title, variant, children }) => {
                   "aria-label": "Previous Slide",
                   onClick: next,
                   tabIndex: 0,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Icon, { name: "TriangleRight", size: 16, color: variant === "purple" ? "white" : "black" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Icon, { name: "TriangleRight", size: 16, color: variant === "purple" ? "white" : "black" })
                 }
               )
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Spacing, { size: "xs" }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Hr, { variant }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Spacing, { size: "xs" }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Spacing, { size: "xs" }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Hr, { variant }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Spacing, { size: "xs" }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
             CarouselContent,
             {
               onTouchStart,
               onTouchMove,
               onTouchEnd,
               children: items.map(
-                (child, index) => (0, import_react12.cloneElement)(child, {
+                (child, index) => (0, import_react14.cloneElement)(child, {
                   "aria-hidden": index !== activeIndex,
                   style: {
                     display: index === activeIndex ? "block" : "none"
@@ -3294,8 +3538,8 @@ var Carousel = ({ title, variant, children }) => {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Spacing, { size: "md" }),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DotsContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Dots2, { role: "tablist", "aria-label": "Carousel Pagination", children: items.map((_, idx) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Spacing, { size: "md" }),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DotsContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Dots2, { role: "tablist", "aria-label": "Carousel Pagination", children: items.map((_, idx) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           DotButton,
           {
             active: idx === activeIndex,
@@ -3311,18 +3555,17 @@ var Carousel = ({ title, variant, children }) => {
     }
   );
 };
-var CarouselItem = ({ children, style, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CarouselItemContainer, { ...props, style: { ...style }, children });
+var CarouselItem = ({ children, style, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CarouselItemContainer, { ...props, style: { ...style }, children });
 Carousel.Item = CarouselItem;
 
 // src/components/PasswordInput.tsx
-var import_react13 = require("react");
-var import_jsx_runtime36 = require("react/jsx-runtime");
-var PasswordInput = (0, import_react13.forwardRef)(
+var import_react15 = require("react");
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var PasswordInput = (0, import_react15.forwardRef)(
   ({ value, onChange, ...props }, ref) => {
-    console.log("\u{1F680} ~ value:", value);
-    const [visible, setVisible] = (0, import_react13.useState)(false);
-    const innerRef = (0, import_react13.useRef)(null);
-    (0, import_react13.useImperativeHandle)(ref, () => innerRef.current);
+    const [visible, setVisible] = (0, import_react15.useState)(false);
+    const innerRef = (0, import_react15.useRef)(null);
+    (0, import_react15.useImperativeHandle)(ref, () => innerRef.current);
     const handleToggleVisibility = () => {
       setVisible((v) => !v);
       setTimeout(() => {
@@ -3332,7 +3575,7 @@ var PasswordInput = (0, import_react13.forwardRef)(
         }
       }, 0);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       Input2,
       {
         ...props,
@@ -3340,7 +3583,7 @@ var PasswordInput = (0, import_react13.forwardRef)(
         type: visible ? "text" : "password",
         value,
         onChange,
-        suffix: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        suffix: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           "button",
           {
             type: "button",
@@ -3354,7 +3597,7 @@ var PasswordInput = (0, import_react13.forwardRef)(
               justifyContent: "center"
             },
             "aria-label": visible ? "Ocultar senha" : "Mostrar senha",
-            children: visible ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Icon, { name: "EyeClosed", size: 16, color: "black" }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Icon, { name: "EyeOpen", size: 16, color: "black" })
+            children: visible ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Icon, { name: "EyeClosed", size: 16, color: "black" }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Icon, { name: "EyeOpen", size: 16, color: "black" })
           }
         )
       }
@@ -3376,6 +3619,8 @@ PasswordInput.displayName = "PasswordInput";
   Icon,
   Input,
   LabelledValue,
+  Loader,
+  MaskedInput,
   Modal,
   MultiStep,
   OneTimePassword,