@clickpalm/react 1.2.17 → 1.3.0

package/dist/index.js

@@ -735,6 +735,7 @@ var iconMap = {
   EyeClosed: import_react_icons.EyeClosedIcon,
   EyeOpen: import_react_icons.EyeOpenIcon,
   QuestionMark: import_react_icons.QuestionMarkIcon,
+  Reload: import_react_icons.ReloadIcon,
   Calendar,
   Closed,
   Dots,
@@ -1186,7 +1187,7 @@ Checkbox2.displayName = "Checkbox";
 // src/components/Datepicker/index.tsx
 var import_date_fns2 = require("date-fns");
 var import_locale2 = require("date-fns/locale");
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_react_day_picker2 = require("react-day-picker");
 var import_style2 = require("react-day-picker/dist/style.css");
 
@@ -1217,7 +1218,8 @@ var TextInputContainer = styled("div", {
   marginBottom: "$6",
   FontSize: "$md",
   "&:has(input:focus), &:hover": {
-    border: "2px solid $clickpalm_light"
+    border: "2px solid $clickpalm_light",
+    padding: "calc($4 - 0.9px) calc($4 - 0.9px)"
   },
   "&:has(input:disabled)": {
     opacity: 0.5,
@@ -1238,9 +1240,15 @@ var TextInputContainer = styled("div", {
         border: "1px solid $danger_dark",
         marginBottom: "0px",
         "&:has(input:focus), &:hover": {
-          border: "2px solid $danger_dark"
+          border: "2px solid $danger_dark",
+          padding: "calc($4 - 0.9px) calc($4 - 0.9px)"
         }
       }
+    },
+    hasCounter: {
+      true: {
+        marginBottom: "0px"
+      }
     }
   }
 });
@@ -1280,17 +1288,45 @@ var Span2 = styled("span", {
   fontFamily: "$default",
   fontWeight: "$regular",
   fontSize: "$sm",
+  textAlign: "left",
   color: "$danger_dark",
   alignSelf: "flex-start",
   paddingLeft: "1px",
   marginTop: "2px",
-  marginBottom: "$6"
+  marginBottom: "$6",
+  flexShrink: 1,
+  wordBreak: "break-word"
+});
+var Footer = styled("div", {
+  display: "flex",
+  justifyContent: "space-between",
+  width: "100%",
+  gap: "$2"
+});
+var CharCounter = styled(Span2, {
+  fontFamily: "$default",
+  fontWeight: "$regular",
+  fontSize: "$sm",
+  color: "$gray_mid",
+  marginLeft: "auto",
+  whiteSpace: "nowrap",
+  paddingRight: "1px",
+  marginTop: "2px",
+  marginBottom: "$6",
+  variants: {
+    hasReachedMax: {
+      true: {
+        color: "$danger_dark"
+      }
+    }
+  }
 });
 
 // src/components/Input/index.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var Input2 = (0, import_react5.forwardRef)(
-  ({ prefix, suffix, label, errorMessage, noMargin = false, ...props }, forwardedRef) => {
+  ({ prefix, suffix, label, maxLength, errorMessage, noMargin = false, ...props }, forwardedRef) => {
+    const [charCount, setCharCount] = (0, import_react5.useState)(0);
     const localInputRef = (0, import_react5.useRef)(null);
     const inputRef = forwardedRef || localInputRef;
     const handleContainerClick = () => {
@@ -1310,20 +1346,237 @@ var Input2 = (0, import_react5.forwardRef)(
           hasButtonSuffix: isButtonElement(suffix),
           noMargin,
           hasError: !!errorMessage,
+          hasCounter: !!maxLength,
           onClick: handleContainerClick,
           children: [
             !!prefix && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Prefix, { children: prefix }),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Input, { ref: inputRef, ...props }),
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              Input,
+              {
+                ref: inputRef,
+                ...props,
+                maxLength,
+                onChange: (e) => {
+                  if (props.onChange) {
+                    props.onChange(e);
+                  }
+                  setCharCount(e.target.value.length);
+                }
+              }
+            ),
             !!suffix && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Suffix, { children: suffix })
           ]
         }
       ),
-      errorMessage && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Span2, { children: errorMessage })
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Footer, { children: [
+        errorMessage && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Span2, { children: errorMessage }),
+        maxLength && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(CharCounter, { hasReachedMax: maxLength ? charCount >= maxLength : false, children: [
+          charCount,
+          "/",
+          maxLength
+        ] })
+      ] })
     ] });
   }
 );
 Input2.displayName = "Input";
 
+// src/components/Datepicker/CustomSelect/index.tsx
+var import_react6 = require("react");
+
+// src/components/Datepicker/CustomSelect/styles.ts
+var IconWrapper = styled("span", {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  transition: "transform 0.3s ease"
+});
+var SelectValueButton = styled("button", {
+  position: "relative",
+  display: "flex",
+  alignItems: "center",
+  width: "100%",
+  backgroundColor: "transparent",
+  borderRadius: "8px",
+  padding: "8px",
+  fontSize: "16px",
+  fontWeight: theme.fontWeights.bold,
+  fontFamily: theme.fonts.default,
+  textAlign: "left",
+  cursor: "pointer",
+  gap: theme.space[2],
+  "&:hover, &:focus": {
+    backgroundColor: "transparent",
+    outline: "none",
+    boxShadow: "none",
+    border: `2px solid ${theme.colors.gray_mid}`
+  }
+});
+var SelectOptionsList = styled("ul", {
+  position: "absolute",
+  top: "100%",
+  left: 0,
+  right: 0,
+  backgroundColor: theme.colors.gray_background,
+  border: `2px solid ${theme.colors.white}`,
+  borderRadius: "8px",
+  boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
+  listStyle: "none",
+  margin: "4px 0 0",
+  padding: "0 12px",
+  zIndex: 10,
+  maxHeight: "200px",
+  overflowY: "auto",
+  fontFamily: theme.fonts.default,
+  fontWeight: theme.fontWeights.regular,
+  textAlign: "left",
+  width: "100%",
+  "&::-webkit-scrollbar": {
+    width: "8px"
+  },
+  "&::-webkit-scrollbar-track": {
+    background: theme.colors.gray_light,
+    borderRadius: "8px"
+  },
+  "&::-webkit-scrollbar-thumb": {
+    backgroundColor: theme.colors.clickpalm_light,
+    borderRadius: "8px"
+  }
+});
+var SelectOptionItem = styled("li", {
+  padding: "12px 0",
+  color: theme.colors.black,
+  cursor: "pointer",
+  borderBottom: `1px solid ${theme.colors.gray_mid}`,
+  "&:last-child": {
+    borderBottom: "none"
+  },
+  "&:hover": {
+    backgroundColor: theme.colors.gray_background,
+    color: theme.colors.clickpalm_mid
+  },
+  variants: {
+    selected: {
+      true: {
+        backgroundColor: theme.colors.gray_background,
+        color: theme.colors.clickpalm_mid
+      }
+    }
+  }
+});
+var SelectContainer = styled("div", {
+  position: "relative",
+  width: "100%",
+  maxWidth: "130px",
+  variants: {
+    isOpen: {
+      true: {
+        [`& ${IconWrapper}`]: {
+          transform: "rotate(180deg)"
+        }
+      }
+    },
+    color: {
+      white: {
+        [`& ${SelectValueButton}`]: {
+          color: theme.colors.white,
+          border: `2px solid ${theme.colors.white}`
+        },
+        [`& ${IconWrapper}`]: {
+          color: theme.colors.white
+        }
+      },
+      black: {
+        marginBottom: 0,
+        [`& ${SelectValueButton}`]: {
+          color: theme.colors.black,
+          border: "1px solid transparent"
+        },
+        [`& ${IconWrapper}`]: {
+          color: theme.colors.black
+        }
+      }
+    }
+  }
+});
+
+// src/components/Datepicker/CustomSelect/index.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var CustomSelect = ({
+  options = [],
+  value,
+  onChange,
+  color = "white"
+}) => {
+  const [isOpen, setIsOpen] = (0, import_react6.useState)(false);
+  const selectRef = (0, import_react6.useRef)(null);
+  const handleToggle = () => setIsOpen(!isOpen);
+  const handleOptionClick = (optionValue) => {
+    if (onChange) {
+      onChange(optionValue);
+    }
+    setIsOpen(false);
+  };
+  (0, import_react6.useEffect)(() => {
+    const handleClickOutside = (event) => {
+      if (selectRef.current && !selectRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+  const safeValue = value ?? "";
+  const selectedLabel = options.find((opt) => opt.value === safeValue)?.label || safeValue;
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(SelectContainer, { color, isOpen, ref: selectRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(SelectValueButton, { onClick: handleToggle, children: [
+      selectedLabel,
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(IconWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { name: "TriangleDown", size: 16 }) })
+    ] }),
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SelectOptionsList, { onMouseDown: (e) => e.preventDefault(), children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      SelectOptionItem,
+      {
+        selected: option.value === value,
+        onClick: () => handleOptionClick(option.value),
+        children: option.label
+      },
+      option.value
+    )) })
+  ] });
+};
+
+// src/components/Datepicker/DatePickerSelectAdapter.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function DatePickerSelectAdapter(props) {
+  const { options, value, onChange } = props;
+  const handleValueChange = (newValue) => {
+    if (onChange) {
+      const syntheticEvent = {
+        target: { value: newValue }
+      };
+      onChange(syntheticEvent);
+    }
+  };
+  const selectOptions = options?.map((option) => {
+    const label = typeof option.label === "string" ? option.label.charAt(0).toUpperCase() + option.label.slice(1) : option.label;
+    return {
+      label,
+      value: option.value?.toString() ?? ""
+    };
+  }) || [];
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    CustomSelect,
+    {
+      color: "black",
+      options: selectOptions,
+      value: value?.toString() || "",
+      onChange: handleValueChange
+    }
+  );
+}
+
 // src/components/Datepicker/styles.ts
 var datePickerStyles = globalCss({
   ".rdp-root": {
@@ -1351,7 +1604,8 @@ var datePickerStyles = globalCss({
     paddingLeft: "15px"
   },
   ".rdp-caption_label": {
-    paddingLeft: theme.space[1]
+    paddingLeft: theme.space[1],
+    textTransform: "capitalize"
   },
   ".rdp-nav": {
     gap: theme.space[1]
@@ -1383,18 +1637,47 @@ var datePickerStyles = globalCss({
     background: theme.colors.clickpalm_light,
     color: theme.colors.white
   }
+  // '.rdp-caption_dropdowns': {
+  //   display: 'flex',
+  // 	gap: theme.space[2],
+  // },
+  // '.rdp-dropdown': {
+  // 	padding: '6px 8px',
+  // 	fontFamily: theme.fonts.default,
+  // 	fontSize: theme.fontSizes.sm,
+  // 	color: theme.colors.black,
+  // 	border: `1px solid ${theme.colors.gray_light}`,
+  // 	borderRadius: theme.radii.md,
+  // 	backgroundColor: theme.colors.white,
+  // 	appearance: 'none',
+  // 	backgroundRepeat: 'no-repeat',
+  // 	backgroundPosition: `right ${theme.space[2]} center`,
+  // 	backgroundSize: '1em',
+  // 	'&:focus, &:hover': {
+  // 		outline: 'none',
+  // 		borderColor: theme.colors.clickpalm_light,
+  // 	},
+  // 	'& option:checked': {
+  // 		backgroundColor: theme.colors.clickpalm_light,
+  // 		color: theme.colors.white,
+  // 	},
+  // 	'& option:hover': {
+  // 		backgroundColor: theme.colors.gray_background,
+  // 		color: theme.colors.black,
+  // 	},
+  // },
 });
 
 // src/components/Datepicker/index.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 datePickerStyles();
-var Datepicker = (0, import_react6.forwardRef)(({ label, value, onChange, errorMessage }, ref) => {
-  const [selected, setSelected] = (0, import_react6.useState)(void 0);
-  const [month, setMonth] = (0, import_react6.useState)(/* @__PURE__ */ new Date());
-  const [open, setOpen] = (0, import_react6.useState)(false);
-  const inputRef = (0, import_react6.useRef)(null);
-  const calendarRef = (0, import_react6.useRef)(null);
-  (0, import_react6.useImperativeHandle)(ref, () => inputRef.current);
+var Datepicker = (0, import_react7.forwardRef)(({ label, placeholder, value, onChange, errorMessage }, ref) => {
+  const [selected, setSelected] = (0, import_react7.useState)(void 0);
+  const [month, setMonth] = (0, import_react7.useState)(/* @__PURE__ */ new Date());
+  const [open, setOpen] = (0, import_react7.useState)(false);
+  const inputRef = (0, import_react7.useRef)(null);
+  const calendarRef = (0, import_react7.useRef)(null);
+  (0, import_react7.useImperativeHandle)(ref, () => inputRef.current);
   const handleDaySelect = (date) => {
     setSelected(date);
     if (date) {
@@ -1403,7 +1686,7 @@ var Datepicker = (0, import_react6.forwardRef)(({ label, value, onChange, errorM
     }
     setOpen(false);
   };
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     const handleClickOutside = (event) => {
       if (calendarRef.current && !calendarRef.current.contains(event.target) && inputRef.current && !inputRef.current.contains(event.target)) {
         setOpen(false);
@@ -1412,26 +1695,27 @@ var Datepicker = (0, import_react6.forwardRef)(({ label, value, onChange, errorM
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!open && selected) {
       setMonth(selected);
     }
   }, [open, selected]);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       Input2,
       {
         ref: inputRef,
         label,
-        placeholder: "dd/mm/aaaa",
+        placeholder,
         onFocus: () => setOpen(true),
         value: value || "",
         readOnly: true,
-        suffix: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { name: "Calendar", size: 16 }),
-        errorMessage
+        suffix: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { name: "Calendar", size: 16 }),
+        errorMessage,
+        noMargin: true
       }
     ),
-    open && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    open && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       "div",
       {
         ref: calendarRef,
@@ -1443,7 +1727,7 @@ var Datepicker = (0, import_react6.forwardRef)(({ label, value, onChange, errorM
           boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
           borderRadius: "8px"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           import_react_day_picker2.DayPicker,
           {
             mode: "single",
@@ -1453,20 +1737,13 @@ var Datepicker = (0, import_react6.forwardRef)(({ label, value, onChange, errorM
             onMonthChange: setMonth,
             locale: import_locale2.ptBR,
             showOutsideDays: true,
-            formatters: {
-              formatCaption: (month2, options) => {
-                const mes = (0, import_date_fns2.format)(month2, "MMMM", options).replace(/^./, (c) => c.toUpperCase());
-                const ano = (0, import_date_fns2.format)(month2, "yyyy", options);
-                return `${mes} de ${ano}`;
-              },
-              formatWeekdayName: (date, options) => {
-                const dia = (0, import_date_fns2.format)(date, "EEEEEE", options);
-                return dia.charAt(0).toUpperCase() + dia.slice(1);
-              }
-            },
+            captionLayout: "dropdown",
+            startMonth: new Date(1915, 0),
+            endMonth: /* @__PURE__ */ new Date(),
             components: {
-              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 }) })
+              PreviousMonthButton: (props) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { size: "sm", variant: "secondary", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { name: "TriangleLeft", size: 16 }) }),
+              NextMonthButton: (props) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { size: "sm", variant: "secondary", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { name: "TriangleRight", size: 16 }) }),
+              Dropdown: DatePickerSelectAdapter
             }
           }
         )
@@ -1477,8 +1754,8 @@ var Datepicker = (0, import_react6.forwardRef)(({ label, value, onChange, errorM
 Datepicker.displayName = "Datepicker";
 
 // src/components/Hr.tsx
-var import_react7 = require("react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_react8 = require("react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var StyledHr = styled("hr", {
   border: "none",
   height: "1px",
@@ -1494,8 +1771,8 @@ var StyledHr = styled("hr", {
     }
   }
 });
-var Hr = (0, import_react7.forwardRef)(function Hr2({ children, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(StyledHr, { ref, ...props, children });
+var Hr = (0, import_react8.forwardRef)(function Hr2({ children, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(StyledHr, { ref, ...props, children });
 });
 Hr.displayName = "Hr";
 
@@ -1572,26 +1849,26 @@ var StyledChildren = styled("div", {
 });
 
 // src/components/Modal/index.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var Modal = ({ open, onOpenChange, title, description, children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Dialog2.Root, { open, onOpenChange, modal: true, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Dialog2.Portal, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StyledOverlay, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(StyledContent, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Wrapper, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StyledTitle, { children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StyledClose, { asChild: true, "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { variant: "secondary", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { name: "Closed", size: 8 }) }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Dialog2.Root, { open, onOpenChange, modal: true, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Dialog2.Portal, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(StyledOverlay, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(StyledContent, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Wrapper, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(StyledTitle, { children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(StyledClose, { asChild: true, "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { variant: "secondary", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, { name: "Closed", size: 8 }) }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StyledDivider, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
-        description && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StyledDescription, { children: description }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StyledChildren, { children })
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(StyledDivider, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { children: [
+        description && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(StyledDescription, { children: description }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(StyledChildren, { children })
       ] })
     ] })
   ] }) });
 };
 
 // src/components/ProgressBar/index.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 
 // src/components/ProgressBar/styles.ts
 var Progress = __toESM(require("@radix-ui/react-progress"));
@@ -1621,23 +1898,23 @@ var StyledIndicator = styled(Progress.Indicator, {
 });
 
 // src/components/ProgressBar/index.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var ProgressBar = ({ label, value = 0, max = 100, ...rest }) => {
-  const [progress2, setProgress] = (0, import_react8.useState)(0);
-  (0, import_react8.useEffect)(() => {
+  const [progress2, setProgress] = (0, import_react9.useState)(0);
+  (0, import_react9.useEffect)(() => {
     const timer = setTimeout(() => setProgress(value), 500);
     return () => clearTimeout(timer);
   }, [value]);
   const valueLabel = `${Math.round(progress2 / max * 100)}%`;
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(StyledWrapper3, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("label", { style: { fontSize: 16, alignSelf: "flex-start", color: "black" }, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(StyledWrapper3, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("label", { style: { fontSize: 16, alignSelf: "flex-start", color: "black" }, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       StyledRoot,
       {
         value: progress2,
         "aria-valuetext": valueLabel,
         ...rest,
-        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           StyledIndicator,
           {
             style: { transform: `translateX(-${100 - progress2}%)` }
@@ -1650,7 +1927,7 @@ var ProgressBar = ({ label, value = 0, max = 100, ...rest }) => {
 ProgressBar.displayName = "ProgressBar";
 
 // src/components/Radio/index.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // src/components/Radio/styles.ts
 var RadioGroup = __toESM(require("@radix-ui/react-radio-group"));
@@ -1744,8 +2021,8 @@ var Span3 = styled("span", {
 });
 
 // src/components/Radio/index.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var Radio = (0, import_react9.forwardRef)(({
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var Radio = (0, import_react10.forwardRef)(({
   labels,
   value,
   onChange,
@@ -1753,8 +2030,8 @@ var Radio = (0, import_react9.forwardRef)(({
   required = false,
   errorMessage
 }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("form", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("form", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       StyledRoot2,
       {
         ref,
@@ -1764,28 +2041,28 @@ var Radio = (0, import_react9.forwardRef)(({
         disabled,
         required,
         loop: true,
-        children: labels.map((label, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Wrapper2, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        children: labels.map((label, index) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Wrapper2, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             StyledItem,
             {
               value: label,
               id: `radio-${index}`,
               "aria-label": label,
               hasError: !!errorMessage,
-              children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(StyledIndicator2, {})
+              children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(StyledIndicator2, {})
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ItemLabel, { htmlFor: `radio-${index}`, children: label })
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ItemLabel, { htmlFor: `radio-${index}`, children: label })
         ] }, label))
       }
     ),
-    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Span3, { children: errorMessage })
+    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Span3, { children: errorMessage })
   ] });
 });
 Radio.displayName = "Radio";
 
 // src/components/Spacing.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var spacingMap = {
   xs: 8,
   sm: 12,
@@ -1797,11 +2074,11 @@ 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_runtime25.jsx)("div", { style, "data-testid": `spacing-${size}-${axis}` });
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style, "data-testid": `spacing-${size}-${axis}` });
 };
 
 // src/components/Switch/index.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 
 // src/components/Switch/styles.ts
 var Switch = __toESM(require("@radix-ui/react-switch"));
@@ -1898,8 +2175,8 @@ var Span4 = styled("span", {
 });
 
 // src/components/Switch/index.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var Switch2 = (0, import_react10.forwardRef)(({
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var Switch2 = (0, import_react11.forwardRef)(({
   label,
   checked,
   defaultChecked,
@@ -1909,9 +2186,9 @@ var Switch2 = (0, import_react10.forwardRef)(({
   id,
   errorMessage
 }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Wrapper3, { hasError: !!errorMessage, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Wrapper3, { hasError: !!errorMessage, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         StyledRoot3,
         {
           ref,
@@ -1922,18 +2199,18 @@ var Switch2 = (0, import_react10.forwardRef)(({
           hasError: !!errorMessage,
           disabled,
           required,
-          children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(StyledThumb, {})
+          children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(StyledThumb, {})
         }
       ),
-      label && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Label2, { htmlFor: id, children: label })
+      label && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Label2, { htmlFor: id, children: label })
     ] }),
-    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Span4, { children: errorMessage })
+    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Span4, { children: errorMessage })
   ] });
 });
 Switch2.displayName = "Switch";
 
 // src/components/Tabs/index.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 
 // src/components/Tabs/styles.ts
 var Tabs = __toESM(require("@radix-ui/react-tabs"));
@@ -2014,23 +2291,23 @@ var TabsContent = styled(Tabs.Content, {
 });
 
 // src/components/Tabs/index.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var TabsItem = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_jsx_runtime27.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children });
 };
 var Tabs2 = ({ defaultValue, colorContent, children, value, onValueChange }) => {
   const items = [];
-  const childrenArray = import_react11.Children.toArray(children);
+  const childrenArray = import_react12.Children.toArray(children);
   childrenArray.forEach((child) => {
-    if ((0, import_react11.isValidElement)(child) && child.type === TabsItem) {
+    if ((0, import_react12.isValidElement)(child) && child.type === TabsItem) {
       const { value: value2, label, forceMount, children: content } = child.props;
       items.push({ value: value2, label, forceMount, children: content });
     }
   });
-  const listRef = (0, import_react11.useRef)(null);
-  const rootRef = (0, import_react11.useRef)(null);
-  const hasOverflowRef = (0, import_react11.useRef)(false);
-  const [hasOverflow, setHasOverflow] = (0, import_react11.useState)(false);
+  const listRef = (0, import_react12.useRef)(null);
+  const rootRef = (0, import_react12.useRef)(null);
+  const hasOverflowRef = (0, import_react12.useRef)(false);
+  const [hasOverflow, setHasOverflow] = (0, import_react12.useState)(false);
   const checkOverflow = () => {
     const listEl = listRef.current;
     const rootEl = rootRef.current;
@@ -2045,7 +2322,7 @@ var Tabs2 = ({ defaultValue, colorContent, children, value, onValueChange }) =>
       setHasOverflow(overflow);
     }
   };
-  (0, import_react11.useLayoutEffect)(() => {
+  (0, import_react12.useLayoutEffect)(() => {
     checkOverflow();
     const resizeObserver = new ResizeObserver(checkOverflow);
     if (listRef.current) {
@@ -2066,7 +2343,7 @@ var Tabs2 = ({ defaultValue, colorContent, children, value, onValueChange }) =>
       });
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     TabsRoot,
     {
       defaultValue: defaultValue || items[0]?.value,
@@ -2074,22 +2351,22 @@ var Tabs2 = ({ defaultValue, colorContent, children, value, onValueChange }) =>
       value,
       onValueChange,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-          hasOverflow && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+          hasOverflow && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             Button,
             {
               variant: "secondary",
               size: "sm",
               onClick: () => scroll("left"),
-              children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon, { name: "TriangleLeft", size: 64 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon, { name: "TriangleLeft", size: 64 })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             TabsList,
             {
               ref: listRef,
               scrollable: hasOverflow,
-              children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+              children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                 TabsTrigger,
                 {
                   value: item.value,
@@ -2100,17 +2377,17 @@ var Tabs2 = ({ defaultValue, colorContent, children, value, onValueChange }) =>
               ))
             }
           ),
-          hasOverflow && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          hasOverflow && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             Button,
             {
               variant: "secondary",
               size: "sm",
               onClick: () => scroll("right"),
-              children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon, { name: "TriangleRight", size: 64 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon, { name: "TriangleRight", size: 64 })
             }
           )
         ] }),
-        items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           TabsContent,
           {
             colorContent,
@@ -2127,8 +2404,8 @@ var Tabs2 = ({ defaultValue, colorContent, children, value, onValueChange }) =>
 Tabs2.Item = TabsItem;
 
 // src/components/TextArea.tsx
-var import_react12 = require("react");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_react13 = require("react");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var Wrapper4 = styled("div", {
   display: "flex",
   flexDirection: "column"
@@ -2152,9 +2429,8 @@ var TextAreaElement = styled("textarea", {
   fontSize: "$sm",
   color: "$black",
   fontWeight: "$regular",
-  resize: "none",
-  minHeight: 100,
-  maxHeight: "170px",
+  resize: "vertical",
+  minHeight: "100px",
   overflowY: "auto",
   width: "100%",
   "&:focus": {
@@ -2190,6 +2466,11 @@ var TextAreaElement = styled("textarea", {
           border: "2px solid $danger_dark"
         }
       }
+    },
+    hasCounter: {
+      true: {
+        marginBottom: "0px"
+      }
     }
   }
 });
@@ -2197,27 +2478,70 @@ var Span5 = styled("span", {
   fontFamily: "$default",
   fontWeight: "$regular",
   fontSize: "$sm",
+  textAlign: "left",
   color: "$danger_dark",
   alignSelf: "flex-start",
   paddingLeft: "1px",
   marginTop: "2px",
-  marginBottom: "$6"
+  marginBottom: "$6",
+  flexShrink: 1,
+  wordBreak: "break-word"
+});
+var Footer2 = styled("div", {
+  display: "flex",
+  justifyContent: "space-between",
+  width: "100%",
+  gap: "$2"
+});
+var CharCounter2 = styled(Span5, {
+  fontFamily: "$default",
+  fontWeight: "$regular",
+  fontSize: "$sm",
+  color: "$gray_mid",
+  marginLeft: "auto",
+  whiteSpace: "nowrap",
+  paddingRight: "1px",
+  marginTop: "2px",
+  marginBottom: "$6",
+  variants: {
+    hasReachedMax: {
+      true: {
+        color: "$danger_dark"
+      }
+    }
+  }
 });
-var TextArea = (0, import_react12.forwardRef)(
-  ({ label, id, htmlFor, errorMessage, ...props }, ref) => {
+var TextArea = (0, import_react13.forwardRef)(
+  ({ label, id, htmlFor, errorMessage, maxLength, ...props }, ref) => {
     const textAreaId = id || htmlFor || `textarea-${crypto.randomUUID()}`;
-    return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Wrapper4, { children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(StyledLabel2, { htmlFor: textAreaId, children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    const [charCount, setCharCount] = (0, import_react13.useState)(0);
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Wrapper4, { children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(StyledLabel2, { htmlFor: textAreaId, children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         TextAreaElement,
         {
           id: textAreaId,
           ...props,
           hasError: !!errorMessage,
-          ref
+          hasCounter: !!maxLength,
+          ref,
+          maxLength,
+          onChange: (e) => {
+            if (props.onChange) {
+              props.onChange(e);
+            }
+            setCharCount(e.target.value.length);
+          }
         }
       ),
-      errorMessage && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Span5, { children: errorMessage })
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Footer2, { children: [
+        errorMessage && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Span5, { children: errorMessage }),
+        maxLength && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(CharCounter2, { hasReachedMax: maxLength ? charCount >= maxLength : false, children: [
+          charCount,
+          "/",
+          maxLength
+        ] })
+      ] })
     ] });
   }
 );
@@ -2274,7 +2598,7 @@ var TooltipArrow = styled(RadixTooltip.Arrow, {
 });
 
 // src/components/Tooltip/index.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var Tooltip = ({
   content,
   children,
@@ -2284,11 +2608,11 @@ var Tooltip = ({
   onOpenChange,
   delayDuration = 100
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(RadixTooltip2.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(RadixTooltip2.Root, { open, onOpenChange, delayDuration, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TooltipTrigger, { asChild: true, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(TooltipContent, { side, sideOffset, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(RadixTooltip2.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(RadixTooltip2.Root, { open, onOpenChange, delayDuration, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TooltipTrigger, { asChild: true, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(TooltipContent, { side, sideOffset, children: [
       content,
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TooltipArrow, {})
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TooltipArrow, {})
     ] })
   ] }) });
 };
@@ -2372,14 +2696,14 @@ var Spinner = styled("span", {
 });
 
 // src/components/Loader/index.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var Loader = ({ show, fullscreen = false }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Overlay2, { show, fullscreen, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SpinnerContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Spinner, {}) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Overlay2, { show, fullscreen, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SpinnerContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Spinner, {}) }) });
 };
 Loader.displayName = "Loader";
 
 // src/components/MaskedInput/index.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 
 // src/components/MaskedInput/utils.ts
 var MAX_LENGTHS = {
@@ -2443,11 +2767,11 @@ var applyMask = (value, maskType) => {
 };
 
 // src/components/MaskedInput/index.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
-var MaskedInput = (0, import_react13.forwardRef)(
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var MaskedInput = (0, import_react14.forwardRef)(
   ({ maskType, onChange, ...props }, ref) => {
-    const [value, setValue] = (0, import_react13.useState)("");
-    const inputRef = (0, import_react13.useRef)(null);
+    const [value, setValue] = (0, import_react14.useState)("");
+    const inputRef = (0, import_react14.useRef)(null);
     const handleChange = (e) => {
       const { value: inputValue, selectionStart } = e.target;
       const isBackspace = value.length > inputValue.length;
@@ -2480,7 +2804,7 @@ var MaskedInput = (0, import_react13.forwardRef)(
         onChange(syntheticEvent);
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       Input2,
       {
         ...props,
@@ -2495,7 +2819,7 @@ var MaskedInput = (0, import_react13.forwardRef)(
 MaskedInput.displayName = "MaskedInput";
 
 // src/components/Dropdown/index.tsx
-var import_react14 = __toESM(require("react"));
+var import_react15 = __toESM(require("react"));
 var DropdownMenu2 = __toESM(require("@radix-ui/react-dropdown-menu"));
 
 // src/components/Dropdown/styles.ts
@@ -2534,7 +2858,9 @@ var StyledContent2 = styled(DropdownMenu.Content, {
 });
 var itemStyles = {
   all: "unset",
+  fontFamily: "$default",
   fontSize: "$sm",
+  fontWeights: "$regular",
   lineHeight: 1,
   color: "$black",
   borderRadius: "$sm",
@@ -2579,27 +2905,27 @@ var IconButton = styled("button", {
 });
 
 // src/components/Dropdown/index.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var Dropdown = ({ children }) => {
-  const childrenArray = import_react14.Children.toArray(children);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(DropdownMenu2.Root, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Button, { variant: "secondary", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon, { name: "Dots", size: 16 }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DropdownMenu2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(StyledContent2, { sideOffset: 5, align: "end", children: childrenArray.map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react14.Fragment, { children: [
+  const childrenArray = import_react15.Children.toArray(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(DropdownMenu2.Root, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Button, { variant: "secondary", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon, { name: "Dots", size: 16 }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DropdownMenu2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(StyledContent2, { sideOffset: 5, align: "end", children: childrenArray.map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react15.Fragment, { children: [
       child,
-      index < childrenArray.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DropdownSeparator, {})
+      index < childrenArray.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DropdownSeparator, {})
     ] }, index)) }) })
   ] });
 };
 var DropdownSeparator = StyledSeparator;
-var DropdownItem = import_react14.default.forwardRef(({ children, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(StyledItem2, { ...props, ref: forwardedRef, children });
+var DropdownItem = import_react15.default.forwardRef(({ children, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(StyledItem2, { ...props, ref: forwardedRef, children });
 });
 Dropdown.displayName = "Dropdown";
 DropdownItem.displayName = "DropdownItem";
 DropdownSeparator.displayName = "DropdownSeparator";
 
 // src/components/Box.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var StyledBox = styled("div", {
   padding: "$5",
   borderRadius: "$md",
@@ -2621,12 +2947,12 @@ var StyledBox = styled("div", {
   }
 });
 var Box = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(StyledBox, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(StyledBox, { ...props });
 };
 Box.displayName = "Box";
 
 // src/components/Paragraph.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var StyledParagraph = styled("p", {
   fontFamily: "$default",
   lineHeight: "$short",
@@ -2668,17 +2994,17 @@ var StyledParagraph = styled("p", {
   }
 });
 var Paragraph = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(StyledParagraph, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(StyledParagraph, { ...props });
 };
 Paragraph.displayName = "Paragraph";
 
 // src/components/Heading.tsx
-var import_react15 = require("react");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_react16 = require("react");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var StyledHeading = styled("h2", {
   fontFamily: "$default",
   lineHeight: "$shorter",
-  margin: 0,
+  margin: "1px",
   color: "$black",
   variants: {
     size: {
@@ -2696,15 +3022,15 @@ var StyledHeading = styled("h2", {
     size: "md"
   }
 });
-var Heading = (0, import_react15.forwardRef)(function Heading2({ children, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(StyledHeading, { ref, ...props, children });
+var Heading = (0, import_react16.forwardRef)(function Heading2({ children, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(StyledHeading, { ref, ...props, children });
 });
 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_react16 = require("react");
+var CustomSelect2 = __toESM(require("@radix-ui/react-select"));
+var import_react17 = require("react");
 
 // src/components/Select/styles.ts
 var Select = __toESM(require("@radix-ui/react-select"));
@@ -2740,7 +3066,8 @@ var StyledTrigger = styled(Select.Trigger, {
   },
   "&[data-highlighted], &:focus, &:hover": {
     outline: "none",
-    border: "2px solid $clickpalm_light"
+    border: "2px solid $clickpalm_light",
+    padding: "calc(0.92rem - 0.9px) calc($4 - 0.9px)"
   },
   "&:disabled": {
     opacity: 0.5,
@@ -2753,7 +3080,8 @@ var StyledTrigger = styled(Select.Trigger, {
         marginBottom: "0px",
         "&[data-highlighted], &:focus, &:hover": {
           outline: "none",
-          border: "2px solid $danger_dark"
+          border: "2px solid $danger_dark",
+          padding: "calc(0.92rem - 0.9px) calc($4 - 0.9px)"
         }
       }
     }
@@ -2836,8 +3164,8 @@ var Span6 = styled("span", {
 });
 
 // src/components/Select/index.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
-var Select2 = (0, import_react16.forwardRef)(
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var Select2 = (0, import_react17.forwardRef)(
   ({
     value,
     onValueChange,
@@ -2850,36 +3178,27 @@ var Select2 = (0, import_react16.forwardRef)(
     style,
     ...rest
   }, ref) => {
-    const [open, setOpen] = (0, import_react16.useState)(false);
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(StyledWrapper4, { css: css2, className, style, children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Label3, { children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
-        CustomSelect.Root,
+    const [open, setOpen] = (0, import_react17.useState)(false);
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(StyledWrapper4, { css: css2, className, style, children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Label3, { children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+        CustomSelect2.Root,
         {
           value,
           onValueChange,
           onOpenChange: setOpen,
           ...rest,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(StyledTrigger, { "aria-label": label, hasError: !!errorMessage, ref, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CustomSelect.Value, { placeholder }),
-              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(StyledIcon, { open, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react_icons2.TriangleDownIcon, {}) })
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(StyledTrigger, { "aria-label": label, hasError: !!errorMessage, ref, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CustomSelect2.Value, { placeholder }),
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(StyledIcon, { open, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_icons2.TriangleDownIcon, {}) })
             ] }),
-            errorMessage && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Span6, { children: errorMessage }),
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CustomSelect.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
-              StyledContent3,
-              {
-                side: "bottom",
-                align: "start",
-                position: "popper",
-                className,
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CustomSelect.ScrollUpButton, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react_icons2.TriangleUpIcon, {}) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(StyledViewport, { children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(StyledItem3, { value: item.value, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(StyledItemText, { children: item.label }) }, item.value)) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CustomSelect.ScrollDownButton, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react_icons2.TriangleDownIcon, {}) })
-                ]
-              }
-            ) })
+            errorMessage && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Span6, { children: errorMessage }),
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CustomSelect2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(StyledContent3, { side: "bottom", align: "start", position: "popper", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CustomSelect2.ScrollUpButton, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_icons2.TriangleUpIcon, {}) }),
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(StyledViewport, { children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(StyledItem3, { value: item.value, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(StyledItemText, { children: item.label }) }, item.value)) }),
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CustomSelect2.ScrollDownButton, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_icons2.TriangleDownIcon, {}) })
+            ] }) })
           ]
         }
       )
@@ -2889,7 +3208,7 @@ var Select2 = (0, import_react16.forwardRef)(
 Select2.displayName = "Select";
 
 // src/components/LabelledValue/index.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 
 // src/components/LabelledValue/styles.ts
 var Container = styled("div", {
@@ -2950,19 +3269,19 @@ var Value2 = styled("div", {
 });
 
 // src/components/LabelledValue/index.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function LabelledValue({ position = "vertical", withRow = false, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Container, { position, children: import_react17.Children.map(children, (child) => {
-    if ((0, import_react17.isValidElement)(child)) {
-      return (0, import_react17.cloneElement)(child, { position, withRow });
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Container, { position, children: import_react18.Children.map(children, (child) => {
+    if ((0, import_react18.isValidElement)(child)) {
+      return (0, import_react18.cloneElement)(child, { position, withRow });
     }
     return child;
   }) });
 }
 function Item4({ label, value, position = "vertical", withRow = false }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(ItemWrapper, { position, withRow, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Label4, { children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Value2, { children: value })
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(ItemWrapper, { position, withRow, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Label4, { children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Value2, { children: value })
   ] });
 }
 LabelledValue.Item = Item4;
@@ -3034,11 +3353,11 @@ var Span7 = styled("span", {
 });
 
 // src/components/OneTimePassword/index.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var OneTimePassword = ({ label, length, value, errorMessage, onValueChange, ...rootProps }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Container2, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(StyledWrapper5, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(StyledLabel3, { children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Container2, { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(StyledWrapper5, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(StyledLabel3, { children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
       StyledRoot4,
       {
         value,
@@ -3046,12 +3365,12 @@ var OneTimePassword = ({ label, length, value, errorMessage, onValueChange, ...r
         ...rootProps,
         style: { "--otp-length": length },
         children: [
-          Array.from({ length }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(StyledInput, {}, index)),
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(OneTimePasswordField2.HiddenInput, {})
+          Array.from({ length }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(StyledInput, {}, index)),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(OneTimePasswordField2.HiddenInput, {})
         ]
       }
     ),
-    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Span7, { children: errorMessage })
+    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Span7, { children: errorMessage })
   ] }) });
 };
 OneTimePassword.displayName = "OneTimePasswordInput";
@@ -3173,7 +3492,7 @@ var ToastProgress = styled("div", {
   borderBottomRightRadius: "$full",
   backgroundColor: "$clickpalm_light",
   animationTimingFunction: "linear",
-  animation: `${progress} 3s linear`,
+  animation: `${progress} 6s linear`,
   animationFillMode: "forwards",
   variants: {
     paused: {
@@ -3221,7 +3540,7 @@ var toast = {
 };
 
 // src/components/Toast/index.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var Toast = () => {
   const [messages, setMessages] = React4.useState([]);
   const [paused, setPaused] = React4.useState(false);
@@ -3237,8 +3556,8 @@ var Toast = () => {
   const removeToast = (id) => {
     setMessages((prev) => prev.filter((msg) => msg.id !== id));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(ToastPrimitive2.Provider, { swipeDirection: "right", children: [
-    messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(ToastPrimitive2.Provider, { swipeDirection: "right", children: [
+    messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
       ToastRoot,
       {
         open: true,
@@ -3247,15 +3566,15 @@ var Toast = () => {
             removeToast(message.id);
         },
         variant: message.variant,
-        duration: 3e3,
+        duration: 6e3,
         onPause: () => setPaused(true),
         onResume: () => setPaused(false),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(ToastContent, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ToastTitle, { children: message.title }),
-            message.description && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ToastDescription, { children: message.description })
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(ToastContent, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ToastTitle, { children: message.title }),
+            message.description && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ToastDescription, { children: message.description })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ToastAction, { altText: "Fechar", asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ToastAction, { altText: "Fechar", asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
             "button",
             {
               style: {
@@ -3265,15 +3584,15 @@ var Toast = () => {
                 alignItems: "center"
               },
               onClick: () => removeToast(message.id),
-              children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Icon, { name: "Closed", size: 16, height: 14, width: 14 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon, { name: "Closed", size: 16, height: 14, width: 14 })
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ToastProgress, { paused, variant: message.variant })
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ToastProgress, { paused, variant: message.variant })
         ]
       },
       message.id
     )),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ToastViewport, {})
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ToastViewport, {})
   ] });
 };
 
@@ -3508,22 +3827,22 @@ var StepLabel = styled("span", {
 });
 
 // src/components/MultiStep/index.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var MultiStep = ({
   steps,
   currentStep,
   orientation = "horizontal",
   variant
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     Wrapper5,
     {
       orientation,
       children: steps.map((step, index) => {
         const isFirst = index === 0;
         const isLast = index === steps.length - 1;
-        return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(StepItem, { orientation, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(StepItem, { orientation, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
             StepCircle,
             {
               orientation,
@@ -3534,7 +3853,7 @@ var MultiStep = ({
               children: index + 1
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
             StepLabel,
             {
               orientation,
@@ -3550,7 +3869,7 @@ var MultiStep = ({
 MultiStep.displayName = "MultiStep";
 
 // src/components/Carousel/index.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 
 // src/components/Carousel/styles.ts
 var CarouselContainer = styled("div", {
@@ -3658,13 +3977,13 @@ var CarouselItemContainer = styled("div", {
 });
 
 // src/components/Carousel/index.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var SWIPE_THRESHOLD = 50;
 var Carousel = ({ title, variant, children }) => {
-  const items = import_react18.Children.toArray(children);
-  const [activeIndex, setActiveIndex] = (0, import_react18.useState)(0);
-  const [touchStartX, setTouchStartX] = (0, import_react18.useState)(null);
-  const [touchEndX, setTouchEndX] = (0, import_react18.useState)(null);
+  const items = import_react19.Children.toArray(children);
+  const [activeIndex, setActiveIndex] = (0, import_react19.useState)(0);
+  const [touchStartX, setTouchStartX] = (0, import_react19.useState)(null);
+  const [touchEndX, setTouchEndX] = (0, import_react19.useState)(null);
   const prev = () => {
     setActiveIndex((prevIndex) => prevIndex === 0 ? items.length - 1 : prevIndex - 1);
   };
@@ -3692,18 +4011,18 @@ var Carousel = ({ title, variant, children }) => {
     setTouchStartX(null);
     setTouchEndX(null);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
     CarouselContainer,
     {
       role: "region",
       "aria-roledescription": "carousel",
       "aria-label": "Carousel Component",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Wrapper6, { variant, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(CarouselHeader, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Title2, { children: title }),
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Navigation, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Wrapper6, { variant, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(CarouselHeader, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Title2, { children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Navigation, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                 Button,
                 {
                   size: "sm",
@@ -3711,10 +4030,10 @@ var Carousel = ({ title, variant, children }) => {
                   "aria-label": "Previous Slide",
                   onClick: prev,
                   tabIndex: 0,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon, { name: "TriangleLeft", size: 16, color: variant === "purple" ? "white" : "black" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Icon, { name: "TriangleLeft", size: 16, color: variant === "purple" ? "white" : "black" })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                 Button,
                 {
                   size: "sm",
@@ -3722,22 +4041,22 @@ var Carousel = ({ title, variant, children }) => {
                   "aria-label": "Previous Slide",
                   onClick: next,
                   tabIndex: 0,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon, { name: "TriangleRight", size: 16, color: variant === "purple" ? "white" : "black" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Icon, { name: "TriangleRight", size: 16, color: variant === "purple" ? "white" : "black" })
                 }
               )
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Spacing, { size: "xs" }),
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Hr, { variant }),
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Spacing, { size: "xs" }),
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Spacing, { size: "xs" }),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Hr, { variant }),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Spacing, { size: "xs" }),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
             CarouselContent,
             {
               onTouchStart,
               onTouchMove,
               onTouchEnd,
               children: items.map(
-                (child, index) => (0, import_react18.cloneElement)(child, {
+                (child, index) => (0, import_react19.cloneElement)(child, {
                   "aria-hidden": index !== activeIndex,
                   style: {
                     display: index === activeIndex ? "block" : "none"
@@ -3747,8 +4066,8 @@ var Carousel = ({ title, variant, children }) => {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Spacing, { size: "md" }),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(DotsContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Dots2, { role: "tablist", "aria-label": "Carousel Pagination", children: items.map((_, idx) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Spacing, { size: "md" }),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DotsContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Dots2, { role: "tablist", "aria-label": "Carousel Pagination", children: items.map((_, idx) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
           DotButton,
           {
             active: idx === activeIndex,
@@ -3764,12 +4083,12 @@ var Carousel = ({ title, variant, children }) => {
     }
   );
 };
-var CarouselItem = ({ children, style, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CarouselItemContainer, { ...props, style: { ...style }, children });
+var CarouselItem = ({ children, style, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(CarouselItemContainer, { ...props, style: { ...style }, children });
 Carousel.Item = CarouselItem;
 
 // src/components/PasswordInput.tsx
-var import_react19 = require("react");
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_react20 = require("react");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var ToggleButton = styled("button", {
   all: "unset",
   cursor: "pointer",
@@ -3784,11 +4103,11 @@ var ToggleButton = styled("button", {
     borderRadius: "$sm"
   }
 });
-var PasswordInput = (0, import_react19.forwardRef)(
+var PasswordInput = (0, import_react20.forwardRef)(
   ({ value, onChange, ...props }, ref) => {
-    const [visible, setVisible] = (0, import_react19.useState)(false);
-    const innerRef = (0, import_react19.useRef)(null);
-    (0, import_react19.useImperativeHandle)(ref, () => innerRef.current);
+    const [visible, setVisible] = (0, import_react20.useState)(false);
+    const innerRef = (0, import_react20.useRef)(null);
+    (0, import_react20.useImperativeHandle)(ref, () => innerRef.current);
     const handleToggleVisibility = () => {
       setVisible((v) => !v);
       setTimeout(() => {
@@ -3798,7 +4117,7 @@ var PasswordInput = (0, import_react19.forwardRef)(
         }
       }, 0);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       Input2,
       {
         ...props,
@@ -3806,14 +4125,14 @@ var PasswordInput = (0, import_react19.forwardRef)(
         type: visible ? "text" : "password",
         value,
         onChange,
-        suffix: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        suffix: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
           ToggleButton,
           {
             type: "button",
             onClick: handleToggleVisibility,
             onMouseDown: (e) => e.preventDefault(),
             "aria-label": visible ? "Ocultar senha" : "Mostrar senha",
-            children: visible ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Icon, { name: "EyeClosed", size: 16, color: "black" }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Icon, { name: "EyeOpen", size: 16, color: "black" })
+            children: visible ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Icon, { name: "EyeClosed", size: 16, color: "black" }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Icon, { name: "EyeOpen", size: 16, color: "black" })
           }
         )
       }
@@ -3824,7 +4143,7 @@ PasswordInput.displayName = "PasswordInput";
 
 // src/components/Accordion/index.tsx
 var RadixAccordion = __toESM(require("@radix-ui/react-accordion"));
-var import_react20 = __toESM(require("react"));
+var import_react21 = __toESM(require("react"));
 
 // src/components/Accordion/styles.ts
 var Accordion = __toESM(require("@radix-ui/react-accordion"));
@@ -3905,18 +4224,18 @@ var OptionsButton = styled(Button, {
 });
 
 // src/components/Accordion/index.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
-var Accordion2 = import_react20.default.forwardRef(
+var import_jsx_runtime45 = require("react/jsx-runtime");
+var Accordion2 = import_react21.default.forwardRef(
   ({ title, children, dropdownItems }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(AccordionContainer, { type: "single", collapsible: true, ref, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(AccordionItem, { value: "item-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(AccordionHeader, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(AccordionTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { children: title }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(TriggerContent, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(AccordionContainer, { type: "single", collapsible: true, ref, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(AccordionItem, { value: "item-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(AccordionHeader, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(AccordionTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { children: title }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(TriggerContent, { children: [
           dropdownItems && dropdownItems,
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(RadixAccordion.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(StyledButton, { as: "div", variant: "secondary", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(AccordionChevron, { name: "TriangleDown", size: 16, "aria-hidden": true }) }) })
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(RadixAccordion.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(StyledButton, { as: "div", variant: "secondary", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(AccordionChevron, { name: "TriangleDown", size: 16, "aria-hidden": true }) }) })
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(RadixAccordion.Content, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(AccordionContent, { children }) })
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(RadixAccordion.Content, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(AccordionContent, { children }) })
     ] }) });
   }
 );