@clickpalm/react 1.2.17 → 1.3.0

package/dist/index.mjs

@@ -364,7 +364,8 @@ import {
   TriangleRightIcon as TriangleRight,
   EyeClosedIcon as EyeClosed,
   EyeOpenIcon as EyeOpen,
-  QuestionMarkIcon as QuestionMark
+  QuestionMarkIcon as QuestionMark,
+  ReloadIcon as Reload
 } from "@radix-ui/react-icons";
 
 // src/components/Icon/Svgs/Calendar.tsx
@@ -664,6 +665,7 @@ var iconMap = {
   EyeClosed,
   EyeOpen,
   QuestionMark,
+  Reload,
   Calendar,
   Closed,
   Dots,
@@ -1115,12 +1117,12 @@ Checkbox2.displayName = "Checkbox";
 // src/components/Datepicker/index.tsx
 import { format as format2 } from "date-fns";
 import { ptBR as ptBR2 } from "date-fns/locale";
-import { forwardRef as forwardRef4, useEffect as useEffect2, useImperativeHandle, useRef as useRef3, useState as useState2 } from "react";
+import { forwardRef as forwardRef4, useEffect as useEffect3, useImperativeHandle, useRef as useRef4, useState as useState4 } from "react";
 import { DayPicker as DayPicker2 } from "react-day-picker";
 import "react-day-picker/dist/style.css";
 
 // src/components/Input/index.tsx
-import React, { forwardRef as forwardRef3, useRef as useRef2 } from "react";
+import React, { forwardRef as forwardRef3, useRef as useRef2, useState as useState2 } from "react";
 
 // src/components/Input/styles.ts
 var StyledWrapper2 = styled("div", {
@@ -1146,7 +1148,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,
@@ -1167,9 +1170,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"
+      }
     }
   }
 });
@@ -1209,17 +1218,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
 import { jsx as jsx19, jsxs as jsxs4 } from "react/jsx-runtime";
 var Input2 = forwardRef3(
-  ({ prefix, suffix, label, errorMessage, noMargin = false, ...props }, forwardedRef) => {
+  ({ prefix, suffix, label, maxLength, errorMessage, noMargin = false, ...props }, forwardedRef) => {
+    const [charCount, setCharCount] = useState2(0);
     const localInputRef = useRef2(null);
     const inputRef = forwardedRef || localInputRef;
     const handleContainerClick = () => {
@@ -1239,20 +1276,237 @@ var Input2 = forwardRef3(
           hasButtonSuffix: isButtonElement(suffix),
           noMargin,
           hasError: !!errorMessage,
+          hasCounter: !!maxLength,
           onClick: handleContainerClick,
           children: [
             !!prefix && /* @__PURE__ */ jsx19(Prefix, { children: prefix }),
-            /* @__PURE__ */ jsx19(Input, { ref: inputRef, ...props }),
+            /* @__PURE__ */ jsx19(
+              Input,
+              {
+                ref: inputRef,
+                ...props,
+                maxLength,
+                onChange: (e) => {
+                  if (props.onChange) {
+                    props.onChange(e);
+                  }
+                  setCharCount(e.target.value.length);
+                }
+              }
+            ),
             !!suffix && /* @__PURE__ */ jsx19(Suffix, { children: suffix })
           ]
         }
       ),
-      errorMessage && /* @__PURE__ */ jsx19(Span2, { children: errorMessage })
+      /* @__PURE__ */ jsxs4(Footer, { children: [
+        errorMessage && /* @__PURE__ */ jsx19(Span2, { children: errorMessage }),
+        maxLength && /* @__PURE__ */ jsxs4(CharCounter, { hasReachedMax: maxLength ? charCount >= maxLength : false, children: [
+          charCount,
+          "/",
+          maxLength
+        ] })
+      ] })
     ] });
   }
 );
 Input2.displayName = "Input";
 
+// src/components/Datepicker/CustomSelect/index.tsx
+import { useEffect as useEffect2, useRef as useRef3, useState as useState3 } from "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
+import { jsx as jsx20, jsxs as jsxs5 } from "react/jsx-runtime";
+var CustomSelect = ({
+  options = [],
+  value,
+  onChange,
+  color = "white"
+}) => {
+  const [isOpen, setIsOpen] = useState3(false);
+  const selectRef = useRef3(null);
+  const handleToggle = () => setIsOpen(!isOpen);
+  const handleOptionClick = (optionValue) => {
+    if (onChange) {
+      onChange(optionValue);
+    }
+    setIsOpen(false);
+  };
+  useEffect2(() => {
+    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__ */ jsxs5(SelectContainer, { color, isOpen, ref: selectRef, children: [
+    /* @__PURE__ */ jsxs5(SelectValueButton, { onClick: handleToggle, children: [
+      selectedLabel,
+      /* @__PURE__ */ jsx20(IconWrapper, { children: /* @__PURE__ */ jsx20(Icon, { name: "TriangleDown", size: 16 }) })
+    ] }),
+    isOpen && /* @__PURE__ */ jsx20(SelectOptionsList, { onMouseDown: (e) => e.preventDefault(), children: options.map((option) => /* @__PURE__ */ jsx20(
+      SelectOptionItem,
+      {
+        selected: option.value === value,
+        onClick: () => handleOptionClick(option.value),
+        children: option.label
+      },
+      option.value
+    )) })
+  ] });
+};
+
+// src/components/Datepicker/DatePickerSelectAdapter.tsx
+import { jsx as jsx21 } from "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__ */ jsx21(
+    CustomSelect,
+    {
+      color: "black",
+      options: selectOptions,
+      value: value?.toString() || "",
+      onChange: handleValueChange
+    }
+  );
+}
+
 // src/components/Datepicker/styles.ts
 var datePickerStyles = globalCss({
   ".rdp-root": {
@@ -1280,7 +1534,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]
@@ -1312,17 +1567,46 @@ 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
-import { jsx as jsx20, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs6 } from "react/jsx-runtime";
 datePickerStyles();
-var Datepicker = forwardRef4(({ label, value, onChange, errorMessage }, ref) => {
-  const [selected, setSelected] = useState2(void 0);
-  const [month, setMonth] = useState2(/* @__PURE__ */ new Date());
-  const [open, setOpen] = useState2(false);
-  const inputRef = useRef3(null);
-  const calendarRef = useRef3(null);
+var Datepicker = forwardRef4(({ label, placeholder, value, onChange, errorMessage }, ref) => {
+  const [selected, setSelected] = useState4(void 0);
+  const [month, setMonth] = useState4(/* @__PURE__ */ new Date());
+  const [open, setOpen] = useState4(false);
+  const inputRef = useRef4(null);
+  const calendarRef = useRef4(null);
   useImperativeHandle(ref, () => inputRef.current);
   const handleDaySelect = (date) => {
     setSelected(date);
@@ -1332,7 +1616,7 @@ var Datepicker = forwardRef4(({ label, value, onChange, errorMessage }, ref) =>
     }
     setOpen(false);
   };
-  useEffect2(() => {
+  useEffect3(() => {
     const handleClickOutside = (event) => {
       if (calendarRef.current && !calendarRef.current.contains(event.target) && inputRef.current && !inputRef.current.contains(event.target)) {
         setOpen(false);
@@ -1341,26 +1625,27 @@ var Datepicker = forwardRef4(({ label, value, onChange, errorMessage }, ref) =>
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!open && selected) {
       setMonth(selected);
     }
   }, [open, selected]);
-  return /* @__PURE__ */ jsxs5("div", { children: [
-    /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsxs6("div", { children: [
+    /* @__PURE__ */ jsx22(
       Input2,
       {
         ref: inputRef,
         label,
-        placeholder: "dd/mm/aaaa",
+        placeholder,
         onFocus: () => setOpen(true),
         value: value || "",
         readOnly: true,
-        suffix: /* @__PURE__ */ jsx20(Icon, { name: "Calendar", size: 16 }),
-        errorMessage
+        suffix: /* @__PURE__ */ jsx22(Icon, { name: "Calendar", size: 16 }),
+        errorMessage,
+        noMargin: true
       }
     ),
-    open && /* @__PURE__ */ jsx20(
+    open && /* @__PURE__ */ jsx22(
       "div",
       {
         ref: calendarRef,
@@ -1372,7 +1657,7 @@ var Datepicker = forwardRef4(({ label, value, onChange, errorMessage }, ref) =>
           boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
           borderRadius: "8px"
         },
-        children: /* @__PURE__ */ jsx20(
+        children: /* @__PURE__ */ jsx22(
           DayPicker2,
           {
             mode: "single",
@@ -1382,20 +1667,13 @@ var Datepicker = forwardRef4(({ label, value, onChange, errorMessage }, ref) =>
             onMonthChange: setMonth,
             locale: ptBR2,
             showOutsideDays: true,
-            formatters: {
-              formatCaption: (month2, options) => {
-                const mes = format2(month2, "MMMM", options).replace(/^./, (c) => c.toUpperCase());
-                const ano = format2(month2, "yyyy", options);
-                return `${mes} de ${ano}`;
-              },
-              formatWeekdayName: (date, options) => {
-                const dia = format2(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__ */ jsx20(Button, { size: "sm", variant: "secondary", ...props, children: /* @__PURE__ */ jsx20(Icon, { name: "TriangleLeft", size: 16 }) }),
-              NextMonthButton: (props) => /* @__PURE__ */ jsx20(Button, { size: "sm", variant: "secondary", ...props, children: /* @__PURE__ */ jsx20(Icon, { name: "TriangleRight", size: 16 }) })
+              PreviousMonthButton: (props) => /* @__PURE__ */ jsx22(Button, { size: "sm", variant: "secondary", ...props, children: /* @__PURE__ */ jsx22(Icon, { name: "TriangleLeft", size: 16 }) }),
+              NextMonthButton: (props) => /* @__PURE__ */ jsx22(Button, { size: "sm", variant: "secondary", ...props, children: /* @__PURE__ */ jsx22(Icon, { name: "TriangleRight", size: 16 }) }),
+              Dropdown: DatePickerSelectAdapter
             }
           }
         )
@@ -1407,7 +1685,7 @@ Datepicker.displayName = "Datepicker";
 
 // src/components/Hr.tsx
 import { forwardRef as forwardRef5 } from "react";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var StyledHr = styled("hr", {
   border: "none",
   height: "1px",
@@ -1424,7 +1702,7 @@ var StyledHr = styled("hr", {
   }
 });
 var Hr = forwardRef5(function Hr2({ children, ...props }, ref) {
-  return /* @__PURE__ */ jsx21(StyledHr, { ref, ...props, children });
+  return /* @__PURE__ */ jsx23(StyledHr, { ref, ...props, children });
 });
 Hr.displayName = "Hr";
 
@@ -1501,26 +1779,26 @@ var StyledChildren = styled("div", {
 });
 
 // src/components/Modal/index.tsx
-import { jsx as jsx22, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs7 } from "react/jsx-runtime";
 var Modal = ({ open, onOpenChange, title, description, children }) => {
-  return /* @__PURE__ */ jsx22(Dialog2.Root, { open, onOpenChange, modal: true, children: /* @__PURE__ */ jsxs6(Dialog2.Portal, { children: [
-    /* @__PURE__ */ jsx22(StyledOverlay, {}),
-    /* @__PURE__ */ jsxs6(StyledContent, { children: [
-      /* @__PURE__ */ jsxs6(Wrapper, { children: [
-        /* @__PURE__ */ jsx22(StyledTitle, { children: title }),
-        /* @__PURE__ */ jsx22(StyledClose, { asChild: true, "aria-label": "Close", children: /* @__PURE__ */ jsx22(Button, { variant: "secondary", size: "sm", children: /* @__PURE__ */ jsx22(Icon, { name: "Closed", size: 8 }) }) })
+  return /* @__PURE__ */ jsx24(Dialog2.Root, { open, onOpenChange, modal: true, children: /* @__PURE__ */ jsxs7(Dialog2.Portal, { children: [
+    /* @__PURE__ */ jsx24(StyledOverlay, {}),
+    /* @__PURE__ */ jsxs7(StyledContent, { children: [
+      /* @__PURE__ */ jsxs7(Wrapper, { children: [
+        /* @__PURE__ */ jsx24(StyledTitle, { children: title }),
+        /* @__PURE__ */ jsx24(StyledClose, { asChild: true, "aria-label": "Close", children: /* @__PURE__ */ jsx24(Button, { variant: "secondary", size: "sm", children: /* @__PURE__ */ jsx24(Icon, { name: "Closed", size: 8 }) }) })
       ] }),
-      /* @__PURE__ */ jsx22(StyledDivider, {}),
-      /* @__PURE__ */ jsxs6("div", { children: [
-        description && /* @__PURE__ */ jsx22(StyledDescription, { children: description }),
-        /* @__PURE__ */ jsx22(StyledChildren, { children })
+      /* @__PURE__ */ jsx24(StyledDivider, {}),
+      /* @__PURE__ */ jsxs7("div", { children: [
+        description && /* @__PURE__ */ jsx24(StyledDescription, { children: description }),
+        /* @__PURE__ */ jsx24(StyledChildren, { children })
       ] })
     ] })
   ] }) });
 };
 
 // src/components/ProgressBar/index.tsx
-import { useEffect as useEffect3, useState as useState3 } from "react";
+import { useEffect as useEffect4, useState as useState5 } from "react";
 
 // src/components/ProgressBar/styles.ts
 import * as Progress from "@radix-ui/react-progress";
@@ -1550,23 +1828,23 @@ var StyledIndicator = styled(Progress.Indicator, {
 });
 
 // src/components/ProgressBar/index.tsx
-import { jsx as jsx23, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs8 } from "react/jsx-runtime";
 var ProgressBar = ({ label, value = 0, max = 100, ...rest }) => {
-  const [progress2, setProgress] = useState3(0);
-  useEffect3(() => {
+  const [progress2, setProgress] = useState5(0);
+  useEffect4(() => {
     const timer = setTimeout(() => setProgress(value), 500);
     return () => clearTimeout(timer);
   }, [value]);
   const valueLabel = `${Math.round(progress2 / max * 100)}%`;
-  return /* @__PURE__ */ jsxs7(StyledWrapper3, { children: [
-    /* @__PURE__ */ jsx23("label", { style: { fontSize: 16, alignSelf: "flex-start", color: "black" }, children: label }),
-    /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsxs8(StyledWrapper3, { children: [
+    /* @__PURE__ */ jsx25("label", { style: { fontSize: 16, alignSelf: "flex-start", color: "black" }, children: label }),
+    /* @__PURE__ */ jsx25(
       StyledRoot,
       {
         value: progress2,
         "aria-valuetext": valueLabel,
         ...rest,
-        children: /* @__PURE__ */ jsx23(
+        children: /* @__PURE__ */ jsx25(
           StyledIndicator,
           {
             style: { transform: `translateX(-${100 - progress2}%)` }
@@ -1673,7 +1951,7 @@ var Span3 = styled("span", {
 });
 
 // src/components/Radio/index.tsx
-import { jsx as jsx24, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs9 } from "react/jsx-runtime";
 var Radio = forwardRef6(({
   labels,
   value,
@@ -1682,8 +1960,8 @@ var Radio = forwardRef6(({
   required = false,
   errorMessage
 }, ref) => {
-  return /* @__PURE__ */ jsxs8("form", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start" }, children: [
-    /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsxs9("form", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start" }, children: [
+    /* @__PURE__ */ jsx26(
       StyledRoot2,
       {
         ref,
@@ -1693,28 +1971,28 @@ var Radio = forwardRef6(({
         disabled,
         required,
         loop: true,
-        children: labels.map((label, index) => /* @__PURE__ */ jsxs8(Wrapper2, { children: [
-          /* @__PURE__ */ jsx24(
+        children: labels.map((label, index) => /* @__PURE__ */ jsxs9(Wrapper2, { children: [
+          /* @__PURE__ */ jsx26(
             StyledItem,
             {
               value: label,
               id: `radio-${index}`,
               "aria-label": label,
               hasError: !!errorMessage,
-              children: /* @__PURE__ */ jsx24(StyledIndicator2, {})
+              children: /* @__PURE__ */ jsx26(StyledIndicator2, {})
             }
           ),
-          /* @__PURE__ */ jsx24(ItemLabel, { htmlFor: `radio-${index}`, children: label })
+          /* @__PURE__ */ jsx26(ItemLabel, { htmlFor: `radio-${index}`, children: label })
         ] }, label))
       }
     ),
-    errorMessage && /* @__PURE__ */ jsx24(Span3, { children: errorMessage })
+    errorMessage && /* @__PURE__ */ jsx26(Span3, { children: errorMessage })
   ] });
 });
 Radio.displayName = "Radio";
 
 // src/components/Spacing.tsx
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var spacingMap = {
   xs: 8,
   sm: 12,
@@ -1726,7 +2004,7 @@ var spacingMap = {
 };
 var Spacing = ({ size, axis = "vertical" }) => {
   const style = axis === "vertical" ? { height: spacingMap[size], width: "100%" } : { width: spacingMap[size], height: "100%" };
-  return /* @__PURE__ */ jsx25("div", { style, "data-testid": `spacing-${size}-${axis}` });
+  return /* @__PURE__ */ jsx27("div", { style, "data-testid": `spacing-${size}-${axis}` });
 };
 
 // src/components/Switch/index.tsx
@@ -1827,7 +2105,7 @@ var Span4 = styled("span", {
 });
 
 // src/components/Switch/index.tsx
-import { jsx as jsx26, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs10 } from "react/jsx-runtime";
 var Switch2 = forwardRef7(({
   label,
   checked,
@@ -1838,9 +2116,9 @@ var Switch2 = forwardRef7(({
   id,
   errorMessage
 }, ref) => {
-  return /* @__PURE__ */ jsxs9("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start" }, children: [
-    /* @__PURE__ */ jsxs9(Wrapper3, { hasError: !!errorMessage, children: [
-      /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsxs10("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start" }, children: [
+    /* @__PURE__ */ jsxs10(Wrapper3, { hasError: !!errorMessage, children: [
+      /* @__PURE__ */ jsx28(
         StyledRoot3,
         {
           ref,
@@ -1851,18 +2129,18 @@ var Switch2 = forwardRef7(({
           hasError: !!errorMessage,
           disabled,
           required,
-          children: /* @__PURE__ */ jsx26(StyledThumb, {})
+          children: /* @__PURE__ */ jsx28(StyledThumb, {})
         }
       ),
-      label && /* @__PURE__ */ jsx26(Label2, { htmlFor: id, children: label })
+      label && /* @__PURE__ */ jsx28(Label2, { htmlFor: id, children: label })
     ] }),
-    errorMessage && /* @__PURE__ */ jsx26(Span4, { children: errorMessage })
+    errorMessage && /* @__PURE__ */ jsx28(Span4, { children: errorMessage })
   ] });
 });
 Switch2.displayName = "Switch";
 
 // src/components/Tabs/index.tsx
-import { Children, isValidElement, useLayoutEffect, useRef as useRef4, useState as useState4 } from "react";
+import { Children, isValidElement, useLayoutEffect, useRef as useRef5, useState as useState6 } from "react";
 
 // src/components/Tabs/styles.ts
 import * as Tabs from "@radix-ui/react-tabs";
@@ -1943,9 +2221,9 @@ var TabsContent = styled(Tabs.Content, {
 });
 
 // src/components/Tabs/index.tsx
-import { Fragment, jsx as jsx27, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx29, jsxs as jsxs11 } from "react/jsx-runtime";
 var TabsItem = ({ children }) => {
-  return /* @__PURE__ */ jsx27(Fragment, { children });
+  return /* @__PURE__ */ jsx29(Fragment, { children });
 };
 var Tabs2 = ({ defaultValue, colorContent, children, value, onValueChange }) => {
   const items = [];
@@ -1956,10 +2234,10 @@ var Tabs2 = ({ defaultValue, colorContent, children, value, onValueChange }) =>
       items.push({ value: value2, label, forceMount, children: content });
     }
   });
-  const listRef = useRef4(null);
-  const rootRef = useRef4(null);
-  const hasOverflowRef = useRef4(false);
-  const [hasOverflow, setHasOverflow] = useState4(false);
+  const listRef = useRef5(null);
+  const rootRef = useRef5(null);
+  const hasOverflowRef = useRef5(false);
+  const [hasOverflow, setHasOverflow] = useState6(false);
   const checkOverflow = () => {
     const listEl = listRef.current;
     const rootEl = rootRef.current;
@@ -1995,7 +2273,7 @@ var Tabs2 = ({ defaultValue, colorContent, children, value, onValueChange }) =>
       });
     }
   };
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     TabsRoot,
     {
       defaultValue: defaultValue || items[0]?.value,
@@ -2003,22 +2281,22 @@ var Tabs2 = ({ defaultValue, colorContent, children, value, onValueChange }) =>
       value,
       onValueChange,
       children: [
-        /* @__PURE__ */ jsxs10("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-          hasOverflow && /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsxs11("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+          hasOverflow && /* @__PURE__ */ jsx29(
             Button,
             {
               variant: "secondary",
               size: "sm",
               onClick: () => scroll("left"),
-              children: /* @__PURE__ */ jsx27(Icon, { name: "TriangleLeft", size: 64 })
+              children: /* @__PURE__ */ jsx29(Icon, { name: "TriangleLeft", size: 64 })
             }
           ),
-          /* @__PURE__ */ jsx27(
+          /* @__PURE__ */ jsx29(
             TabsList,
             {
               ref: listRef,
               scrollable: hasOverflow,
-              children: items.map((item) => /* @__PURE__ */ jsx27(
+              children: items.map((item) => /* @__PURE__ */ jsx29(
                 TabsTrigger,
                 {
                   value: item.value,
@@ -2029,17 +2307,17 @@ var Tabs2 = ({ defaultValue, colorContent, children, value, onValueChange }) =>
               ))
             }
           ),
-          hasOverflow && /* @__PURE__ */ jsx27(
+          hasOverflow && /* @__PURE__ */ jsx29(
             Button,
             {
               variant: "secondary",
               size: "sm",
               onClick: () => scroll("right"),
-              children: /* @__PURE__ */ jsx27(Icon, { name: "TriangleRight", size: 64 })
+              children: /* @__PURE__ */ jsx29(Icon, { name: "TriangleRight", size: 64 })
             }
           )
         ] }),
-        items.map((item) => /* @__PURE__ */ jsx27(
+        items.map((item) => /* @__PURE__ */ jsx29(
           TabsContent,
           {
             colorContent,
@@ -2056,8 +2334,8 @@ var Tabs2 = ({ defaultValue, colorContent, children, value, onValueChange }) =>
 Tabs2.Item = TabsItem;
 
 // src/components/TextArea.tsx
-import { forwardRef as forwardRef8 } from "react";
-import { jsx as jsx28, jsxs as jsxs11 } from "react/jsx-runtime";
+import { forwardRef as forwardRef8, useState as useState7 } from "react";
+import { jsx as jsx30, jsxs as jsxs12 } from "react/jsx-runtime";
 var Wrapper4 = styled("div", {
   display: "flex",
   flexDirection: "column"
@@ -2081,9 +2359,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": {
@@ -2119,6 +2396,11 @@ var TextAreaElement = styled("textarea", {
           border: "2px solid $danger_dark"
         }
       }
+    },
+    hasCounter: {
+      true: {
+        marginBottom: "0px"
+      }
     }
   }
 });
@@ -2126,27 +2408,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 = forwardRef8(
-  ({ label, id, htmlFor, errorMessage, ...props }, ref) => {
+  ({ label, id, htmlFor, errorMessage, maxLength, ...props }, ref) => {
     const textAreaId = id || htmlFor || `textarea-${crypto.randomUUID()}`;
-    return /* @__PURE__ */ jsxs11(Wrapper4, { children: [
-      label && /* @__PURE__ */ jsx28(StyledLabel2, { htmlFor: textAreaId, children: label }),
-      /* @__PURE__ */ jsx28(
+    const [charCount, setCharCount] = useState7(0);
+    return /* @__PURE__ */ jsxs12(Wrapper4, { children: [
+      label && /* @__PURE__ */ jsx30(StyledLabel2, { htmlFor: textAreaId, children: label }),
+      /* @__PURE__ */ jsx30(
         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__ */ jsx28(Span5, { children: errorMessage })
+      /* @__PURE__ */ jsxs12(Footer2, { children: [
+        errorMessage && /* @__PURE__ */ jsx30(Span5, { children: errorMessage }),
+        maxLength && /* @__PURE__ */ jsxs12(CharCounter2, { hasReachedMax: maxLength ? charCount >= maxLength : false, children: [
+          charCount,
+          "/",
+          maxLength
+        ] })
+      ] })
     ] });
   }
 );
@@ -2203,7 +2528,7 @@ var TooltipArrow = styled(RadixTooltip.Arrow, {
 });
 
 // src/components/Tooltip/index.tsx
-import { jsx as jsx29, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs13 } from "react/jsx-runtime";
 var Tooltip = ({
   content,
   children,
@@ -2213,11 +2538,11 @@ var Tooltip = ({
   onOpenChange,
   delayDuration = 100
 }) => {
-  return /* @__PURE__ */ jsx29(RadixTooltip2.Provider, { children: /* @__PURE__ */ jsxs12(RadixTooltip2.Root, { open, onOpenChange, delayDuration, children: [
-    /* @__PURE__ */ jsx29(TooltipTrigger, { asChild: true, children }),
-    /* @__PURE__ */ jsxs12(TooltipContent, { side, sideOffset, children: [
+  return /* @__PURE__ */ jsx31(RadixTooltip2.Provider, { children: /* @__PURE__ */ jsxs13(RadixTooltip2.Root, { open, onOpenChange, delayDuration, children: [
+    /* @__PURE__ */ jsx31(TooltipTrigger, { asChild: true, children }),
+    /* @__PURE__ */ jsxs13(TooltipContent, { side, sideOffset, children: [
       content,
-      /* @__PURE__ */ jsx29(TooltipArrow, {})
+      /* @__PURE__ */ jsx31(TooltipArrow, {})
     ] })
   ] }) });
 };
@@ -2301,14 +2626,14 @@ var Spinner = styled("span", {
 });
 
 // src/components/Loader/index.tsx
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var Loader = ({ show, fullscreen = false }) => {
-  return /* @__PURE__ */ jsx30(Overlay2, { show, fullscreen, children: /* @__PURE__ */ jsx30(SpinnerContainer, { children: /* @__PURE__ */ jsx30(Spinner, {}) }) });
+  return /* @__PURE__ */ jsx32(Overlay2, { show, fullscreen, children: /* @__PURE__ */ jsx32(SpinnerContainer, { children: /* @__PURE__ */ jsx32(Spinner, {}) }) });
 };
 Loader.displayName = "Loader";
 
 // src/components/MaskedInput/index.tsx
-import { forwardRef as forwardRef9, useState as useState5, useRef as useRef5 } from "react";
+import { forwardRef as forwardRef9, useState as useState8, useRef as useRef6 } from "react";
 
 // src/components/MaskedInput/utils.ts
 var MAX_LENGTHS = {
@@ -2372,11 +2697,11 @@ var applyMask = (value, maskType) => {
 };
 
 // src/components/MaskedInput/index.tsx
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var MaskedInput = forwardRef9(
   ({ maskType, onChange, ...props }, ref) => {
-    const [value, setValue] = useState5("");
-    const inputRef = useRef5(null);
+    const [value, setValue] = useState8("");
+    const inputRef = useRef6(null);
     const handleChange = (e) => {
       const { value: inputValue, selectionStart } = e.target;
       const isBackspace = value.length > inputValue.length;
@@ -2409,7 +2734,7 @@ var MaskedInput = forwardRef9(
         onChange(syntheticEvent);
       }
     };
-    return /* @__PURE__ */ jsx31(
+    return /* @__PURE__ */ jsx33(
       Input2,
       {
         ...props,
@@ -2463,7 +2788,9 @@ var StyledContent2 = styled(DropdownMenu.Content, {
 });
 var itemStyles = {
   all: "unset",
+  fontFamily: "$default",
   fontSize: "$sm",
+  fontWeights: "$regular",
   lineHeight: 1,
   color: "$black",
   borderRadius: "$sm",
@@ -2508,27 +2835,27 @@ var IconButton = styled("button", {
 });
 
 // src/components/Dropdown/index.tsx
-import { jsx as jsx32, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs14 } from "react/jsx-runtime";
 var Dropdown = ({ children }) => {
   const childrenArray = Children2.toArray(children);
-  return /* @__PURE__ */ jsxs13(DropdownMenu2.Root, { children: [
-    /* @__PURE__ */ jsx32(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsx32(Button, { variant: "secondary", size: "sm", children: /* @__PURE__ */ jsx32(Icon, { name: "Dots", size: 16 }) }) }),
-    /* @__PURE__ */ jsx32(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsx32(StyledContent2, { sideOffset: 5, align: "end", children: childrenArray.map((child, index) => /* @__PURE__ */ jsxs13(Fragment2, { children: [
+  return /* @__PURE__ */ jsxs14(DropdownMenu2.Root, { children: [
+    /* @__PURE__ */ jsx34(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsx34(Button, { variant: "secondary", size: "sm", children: /* @__PURE__ */ jsx34(Icon, { name: "Dots", size: 16 }) }) }),
+    /* @__PURE__ */ jsx34(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsx34(StyledContent2, { sideOffset: 5, align: "end", children: childrenArray.map((child, index) => /* @__PURE__ */ jsxs14(Fragment2, { children: [
       child,
-      index < childrenArray.length - 1 && /* @__PURE__ */ jsx32(DropdownSeparator, {})
+      index < childrenArray.length - 1 && /* @__PURE__ */ jsx34(DropdownSeparator, {})
     ] }, index)) }) })
   ] });
 };
 var DropdownSeparator = StyledSeparator;
 var DropdownItem = React3.forwardRef(({ children, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ jsx32(StyledItem2, { ...props, ref: forwardedRef, children });
+  return /* @__PURE__ */ jsx34(StyledItem2, { ...props, ref: forwardedRef, children });
 });
 Dropdown.displayName = "Dropdown";
 DropdownItem.displayName = "DropdownItem";
 DropdownSeparator.displayName = "DropdownSeparator";
 
 // src/components/Box.tsx
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var StyledBox = styled("div", {
   padding: "$5",
   borderRadius: "$md",
@@ -2550,12 +2877,12 @@ var StyledBox = styled("div", {
   }
 });
 var Box = (props) => {
-  return /* @__PURE__ */ jsx33(StyledBox, { ...props });
+  return /* @__PURE__ */ jsx35(StyledBox, { ...props });
 };
 Box.displayName = "Box";
 
 // src/components/Paragraph.tsx
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var StyledParagraph = styled("p", {
   fontFamily: "$default",
   lineHeight: "$short",
@@ -2597,17 +2924,17 @@ var StyledParagraph = styled("p", {
   }
 });
 var Paragraph = (props) => {
-  return /* @__PURE__ */ jsx34(StyledParagraph, { ...props });
+  return /* @__PURE__ */ jsx36(StyledParagraph, { ...props });
 };
 Paragraph.displayName = "Paragraph";
 
 // src/components/Heading.tsx
 import { forwardRef as forwardRef10 } from "react";
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 var StyledHeading = styled("h2", {
   fontFamily: "$default",
   lineHeight: "$shorter",
-  margin: 0,
+  margin: "1px",
   color: "$black",
   variants: {
     size: {
@@ -2626,14 +2953,14 @@ var StyledHeading = styled("h2", {
   }
 });
 var Heading = forwardRef10(function Heading2({ children, ...props }, ref) {
-  return /* @__PURE__ */ jsx35(StyledHeading, { ref, ...props, children });
+  return /* @__PURE__ */ jsx37(StyledHeading, { ref, ...props, children });
 });
 Heading.displayName = "Heading";
 
 // src/components/Select/index.tsx
 import { TriangleDownIcon, TriangleUpIcon } from "@radix-ui/react-icons";
-import * as CustomSelect from "@radix-ui/react-select";
-import { forwardRef as forwardRef11, useState as useState6 } from "react";
+import * as CustomSelect2 from "@radix-ui/react-select";
+import { forwardRef as forwardRef11, useState as useState9 } from "react";
 
 // src/components/Select/styles.ts
 import * as Select from "@radix-ui/react-select";
@@ -2669,7 +2996,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,
@@ -2682,7 +3010,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)"
         }
       }
     }
@@ -2765,7 +3094,7 @@ var Span6 = styled("span", {
 });
 
 // src/components/Select/index.tsx
-import { jsx as jsx36, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs15 } from "react/jsx-runtime";
 var Select2 = forwardRef11(
   ({
     value,
@@ -2779,36 +3108,27 @@ var Select2 = forwardRef11(
     style,
     ...rest
   }, ref) => {
-    const [open, setOpen] = useState6(false);
-    return /* @__PURE__ */ jsxs14(StyledWrapper4, { css: css2, className, style, children: [
-      label && /* @__PURE__ */ jsx36(Label3, { children: label }),
-      /* @__PURE__ */ jsxs14(
-        CustomSelect.Root,
+    const [open, setOpen] = useState9(false);
+    return /* @__PURE__ */ jsxs15(StyledWrapper4, { css: css2, className, style, children: [
+      label && /* @__PURE__ */ jsx38(Label3, { children: label }),
+      /* @__PURE__ */ jsxs15(
+        CustomSelect2.Root,
         {
           value,
           onValueChange,
           onOpenChange: setOpen,
           ...rest,
           children: [
-            /* @__PURE__ */ jsxs14(StyledTrigger, { "aria-label": label, hasError: !!errorMessage, ref, children: [
-              /* @__PURE__ */ jsx36(CustomSelect.Value, { placeholder }),
-              /* @__PURE__ */ jsx36(StyledIcon, { open, children: /* @__PURE__ */ jsx36(TriangleDownIcon, {}) })
+            /* @__PURE__ */ jsxs15(StyledTrigger, { "aria-label": label, hasError: !!errorMessage, ref, children: [
+              /* @__PURE__ */ jsx38(CustomSelect2.Value, { placeholder }),
+              /* @__PURE__ */ jsx38(StyledIcon, { open, children: /* @__PURE__ */ jsx38(TriangleDownIcon, {}) })
             ] }),
-            errorMessage && /* @__PURE__ */ jsx36(Span6, { children: errorMessage }),
-            /* @__PURE__ */ jsx36(CustomSelect.Portal, { children: /* @__PURE__ */ jsxs14(
-              StyledContent3,
-              {
-                side: "bottom",
-                align: "start",
-                position: "popper",
-                className,
-                children: [
-                  /* @__PURE__ */ jsx36(CustomSelect.ScrollUpButton, { children: /* @__PURE__ */ jsx36(TriangleUpIcon, {}) }),
-                  /* @__PURE__ */ jsx36(StyledViewport, { children: items.map((item) => /* @__PURE__ */ jsx36(StyledItem3, { value: item.value, children: /* @__PURE__ */ jsx36(StyledItemText, { children: item.label }) }, item.value)) }),
-                  /* @__PURE__ */ jsx36(CustomSelect.ScrollDownButton, { children: /* @__PURE__ */ jsx36(TriangleDownIcon, {}) })
-                ]
-              }
-            ) })
+            errorMessage && /* @__PURE__ */ jsx38(Span6, { children: errorMessage }),
+            /* @__PURE__ */ jsx38(CustomSelect2.Portal, { children: /* @__PURE__ */ jsxs15(StyledContent3, { side: "bottom", align: "start", position: "popper", children: [
+              /* @__PURE__ */ jsx38(CustomSelect2.ScrollUpButton, { children: /* @__PURE__ */ jsx38(TriangleUpIcon, {}) }),
+              /* @__PURE__ */ jsx38(StyledViewport, { children: items.map((item) => /* @__PURE__ */ jsx38(StyledItem3, { value: item.value, children: /* @__PURE__ */ jsx38(StyledItemText, { children: item.label }) }, item.value)) }),
+              /* @__PURE__ */ jsx38(CustomSelect2.ScrollDownButton, { children: /* @__PURE__ */ jsx38(TriangleDownIcon, {}) })
+            ] }) })
           ]
         }
       )
@@ -2883,9 +3203,9 @@ var Value2 = styled("div", {
 });
 
 // src/components/LabelledValue/index.tsx
-import { jsx as jsx37, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs16 } from "react/jsx-runtime";
 function LabelledValue({ position = "vertical", withRow = false, children }) {
-  return /* @__PURE__ */ jsx37(Container, { position, children: Children3.map(children, (child) => {
+  return /* @__PURE__ */ jsx39(Container, { position, children: Children3.map(children, (child) => {
     if (isValidElement2(child)) {
       return cloneElement(child, { position, withRow });
     }
@@ -2893,9 +3213,9 @@ function LabelledValue({ position = "vertical", withRow = false, children }) {
   }) });
 }
 function Item4({ label, value, position = "vertical", withRow = false }) {
-  return /* @__PURE__ */ jsxs15(ItemWrapper, { position, withRow, children: [
-    /* @__PURE__ */ jsx37(Label4, { children: label }),
-    /* @__PURE__ */ jsx37(Value2, { children: value })
+  return /* @__PURE__ */ jsxs16(ItemWrapper, { position, withRow, children: [
+    /* @__PURE__ */ jsx39(Label4, { children: label }),
+    /* @__PURE__ */ jsx39(Value2, { children: value })
   ] });
 }
 LabelledValue.Item = Item4;
@@ -2967,11 +3287,11 @@ var Span7 = styled("span", {
 });
 
 // src/components/OneTimePassword/index.tsx
-import { jsx as jsx38, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs17 } from "react/jsx-runtime";
 var OneTimePassword = ({ label, length, value, errorMessage, onValueChange, ...rootProps }) => {
-  return /* @__PURE__ */ jsx38(Container2, { children: /* @__PURE__ */ jsxs16(StyledWrapper5, { children: [
-    /* @__PURE__ */ jsx38(StyledLabel3, { children: label }),
-    /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsx40(Container2, { children: /* @__PURE__ */ jsxs17(StyledWrapper5, { children: [
+    /* @__PURE__ */ jsx40(StyledLabel3, { children: label }),
+    /* @__PURE__ */ jsxs17(
       StyledRoot4,
       {
         value,
@@ -2979,12 +3299,12 @@ var OneTimePassword = ({ label, length, value, errorMessage, onValueChange, ...r
         ...rootProps,
         style: { "--otp-length": length },
         children: [
-          Array.from({ length }).map((_, index) => /* @__PURE__ */ jsx38(StyledInput, {}, index)),
-          /* @__PURE__ */ jsx38(OneTimePasswordField2.HiddenInput, {})
+          Array.from({ length }).map((_, index) => /* @__PURE__ */ jsx40(StyledInput, {}, index)),
+          /* @__PURE__ */ jsx40(OneTimePasswordField2.HiddenInput, {})
         ]
       }
     ),
-    errorMessage && /* @__PURE__ */ jsx38(Span7, { children: errorMessage })
+    errorMessage && /* @__PURE__ */ jsx40(Span7, { children: errorMessage })
   ] }) });
 };
 OneTimePassword.displayName = "OneTimePasswordInput";
@@ -3106,7 +3426,7 @@ var ToastProgress = styled("div", {
   borderBottomRightRadius: "$full",
   backgroundColor: "$clickpalm_light",
   animationTimingFunction: "linear",
-  animation: `${progress} 3s linear`,
+  animation: `${progress} 6s linear`,
   animationFillMode: "forwards",
   variants: {
     paused: {
@@ -3154,7 +3474,7 @@ var toast = {
 };
 
 // src/components/Toast/index.tsx
-import { jsx as jsx39, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs18 } from "react/jsx-runtime";
 var Toast = () => {
   const [messages, setMessages] = React4.useState([]);
   const [paused, setPaused] = React4.useState(false);
@@ -3170,8 +3490,8 @@ var Toast = () => {
   const removeToast = (id) => {
     setMessages((prev) => prev.filter((msg) => msg.id !== id));
   };
-  return /* @__PURE__ */ jsxs17(ToastPrimitive2.Provider, { swipeDirection: "right", children: [
-    messages.map((message) => /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs18(ToastPrimitive2.Provider, { swipeDirection: "right", children: [
+    messages.map((message) => /* @__PURE__ */ jsxs18(
       ToastRoot,
       {
         open: true,
@@ -3180,15 +3500,15 @@ var Toast = () => {
             removeToast(message.id);
         },
         variant: message.variant,
-        duration: 3e3,
+        duration: 6e3,
         onPause: () => setPaused(true),
         onResume: () => setPaused(false),
         children: [
-          /* @__PURE__ */ jsxs17(ToastContent, { children: [
-            /* @__PURE__ */ jsx39(ToastTitle, { children: message.title }),
-            message.description && /* @__PURE__ */ jsx39(ToastDescription, { children: message.description })
+          /* @__PURE__ */ jsxs18(ToastContent, { children: [
+            /* @__PURE__ */ jsx41(ToastTitle, { children: message.title }),
+            message.description && /* @__PURE__ */ jsx41(ToastDescription, { children: message.description })
           ] }),
-          /* @__PURE__ */ jsx39(ToastAction, { altText: "Fechar", asChild: true, children: /* @__PURE__ */ jsx39(
+          /* @__PURE__ */ jsx41(ToastAction, { altText: "Fechar", asChild: true, children: /* @__PURE__ */ jsx41(
             "button",
             {
               style: {
@@ -3198,15 +3518,15 @@ var Toast = () => {
                 alignItems: "center"
               },
               onClick: () => removeToast(message.id),
-              children: /* @__PURE__ */ jsx39(Icon, { name: "Closed", size: 16, height: 14, width: 14 })
+              children: /* @__PURE__ */ jsx41(Icon, { name: "Closed", size: 16, height: 14, width: 14 })
             }
           ) }),
-          /* @__PURE__ */ jsx39(ToastProgress, { paused, variant: message.variant })
+          /* @__PURE__ */ jsx41(ToastProgress, { paused, variant: message.variant })
         ]
       },
       message.id
     )),
-    /* @__PURE__ */ jsx39(ToastViewport, {})
+    /* @__PURE__ */ jsx41(ToastViewport, {})
   ] });
 };
 
@@ -3441,22 +3761,22 @@ var StepLabel = styled("span", {
 });
 
 // src/components/MultiStep/index.tsx
-import { jsx as jsx40, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs19 } from "react/jsx-runtime";
 var MultiStep = ({
   steps,
   currentStep,
   orientation = "horizontal",
   variant
 }) => {
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx42(
     Wrapper5,
     {
       orientation,
       children: steps.map((step, index) => {
         const isFirst = index === 0;
         const isLast = index === steps.length - 1;
-        return /* @__PURE__ */ jsxs18(StepItem, { orientation, children: [
-          /* @__PURE__ */ jsx40(
+        return /* @__PURE__ */ jsxs19(StepItem, { orientation, children: [
+          /* @__PURE__ */ jsx42(
             StepCircle,
             {
               orientation,
@@ -3467,7 +3787,7 @@ var MultiStep = ({
               children: index + 1
             }
           ),
-          /* @__PURE__ */ jsx40(
+          /* @__PURE__ */ jsx42(
             StepLabel,
             {
               orientation,
@@ -3483,7 +3803,7 @@ var MultiStep = ({
 MultiStep.displayName = "MultiStep";
 
 // src/components/Carousel/index.tsx
-import { useState as useState8, Children as Children4, cloneElement as cloneElement2 } from "react";
+import { useState as useState11, Children as Children4, cloneElement as cloneElement2 } from "react";
 
 // src/components/Carousel/styles.ts
 var CarouselContainer = styled("div", {
@@ -3591,13 +3911,13 @@ var CarouselItemContainer = styled("div", {
 });
 
 // src/components/Carousel/index.tsx
-import { jsx as jsx41, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs20 } from "react/jsx-runtime";
 var SWIPE_THRESHOLD = 50;
 var Carousel = ({ title, variant, children }) => {
   const items = Children4.toArray(children);
-  const [activeIndex, setActiveIndex] = useState8(0);
-  const [touchStartX, setTouchStartX] = useState8(null);
-  const [touchEndX, setTouchEndX] = useState8(null);
+  const [activeIndex, setActiveIndex] = useState11(0);
+  const [touchStartX, setTouchStartX] = useState11(null);
+  const [touchEndX, setTouchEndX] = useState11(null);
   const prev = () => {
     setActiveIndex((prevIndex) => prevIndex === 0 ? items.length - 1 : prevIndex - 1);
   };
@@ -3625,18 +3945,18 @@ var Carousel = ({ title, variant, children }) => {
     setTouchStartX(null);
     setTouchEndX(null);
   };
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs20(
     CarouselContainer,
     {
       role: "region",
       "aria-roledescription": "carousel",
       "aria-label": "Carousel Component",
       children: [
-        /* @__PURE__ */ jsxs19(Wrapper6, { variant, children: [
-          /* @__PURE__ */ jsxs19(CarouselHeader, { children: [
-            /* @__PURE__ */ jsx41(Title2, { children: title }),
-            /* @__PURE__ */ jsxs19(Navigation, { children: [
-              /* @__PURE__ */ jsx41(
+        /* @__PURE__ */ jsxs20(Wrapper6, { variant, children: [
+          /* @__PURE__ */ jsxs20(CarouselHeader, { children: [
+            /* @__PURE__ */ jsx43(Title2, { children: title }),
+            /* @__PURE__ */ jsxs20(Navigation, { children: [
+              /* @__PURE__ */ jsx43(
                 Button,
                 {
                   size: "sm",
@@ -3644,10 +3964,10 @@ var Carousel = ({ title, variant, children }) => {
                   "aria-label": "Previous Slide",
                   onClick: prev,
                   tabIndex: 0,
-                  children: /* @__PURE__ */ jsx41(Icon, { name: "TriangleLeft", size: 16, color: variant === "purple" ? "white" : "black" })
+                  children: /* @__PURE__ */ jsx43(Icon, { name: "TriangleLeft", size: 16, color: variant === "purple" ? "white" : "black" })
                 }
               ),
-              /* @__PURE__ */ jsx41(
+              /* @__PURE__ */ jsx43(
                 Button,
                 {
                   size: "sm",
@@ -3655,15 +3975,15 @@ var Carousel = ({ title, variant, children }) => {
                   "aria-label": "Previous Slide",
                   onClick: next,
                   tabIndex: 0,
-                  children: /* @__PURE__ */ jsx41(Icon, { name: "TriangleRight", size: 16, color: variant === "purple" ? "white" : "black" })
+                  children: /* @__PURE__ */ jsx43(Icon, { name: "TriangleRight", size: 16, color: variant === "purple" ? "white" : "black" })
                 }
               )
             ] })
           ] }),
-          /* @__PURE__ */ jsx41(Spacing, { size: "xs" }),
-          /* @__PURE__ */ jsx41(Hr, { variant }),
-          /* @__PURE__ */ jsx41(Spacing, { size: "xs" }),
-          /* @__PURE__ */ jsx41(
+          /* @__PURE__ */ jsx43(Spacing, { size: "xs" }),
+          /* @__PURE__ */ jsx43(Hr, { variant }),
+          /* @__PURE__ */ jsx43(Spacing, { size: "xs" }),
+          /* @__PURE__ */ jsx43(
             CarouselContent,
             {
               onTouchStart,
@@ -3680,8 +4000,8 @@ var Carousel = ({ title, variant, children }) => {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx41(Spacing, { size: "md" }),
-        /* @__PURE__ */ jsx41(DotsContainer, { children: /* @__PURE__ */ jsx41(Dots2, { role: "tablist", "aria-label": "Carousel Pagination", children: items.map((_, idx) => /* @__PURE__ */ jsx41(
+        /* @__PURE__ */ jsx43(Spacing, { size: "md" }),
+        /* @__PURE__ */ jsx43(DotsContainer, { children: /* @__PURE__ */ jsx43(Dots2, { role: "tablist", "aria-label": "Carousel Pagination", children: items.map((_, idx) => /* @__PURE__ */ jsx43(
           DotButton,
           {
             active: idx === activeIndex,
@@ -3697,12 +4017,12 @@ var Carousel = ({ title, variant, children }) => {
     }
   );
 };
-var CarouselItem = ({ children, style, ...props }) => /* @__PURE__ */ jsx41(CarouselItemContainer, { ...props, style: { ...style }, children });
+var CarouselItem = ({ children, style, ...props }) => /* @__PURE__ */ jsx43(CarouselItemContainer, { ...props, style: { ...style }, children });
 Carousel.Item = CarouselItem;
 
 // src/components/PasswordInput.tsx
-import { forwardRef as forwardRef12, useImperativeHandle as useImperativeHandle2, useRef as useRef6, useState as useState9 } from "react";
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { forwardRef as forwardRef12, useImperativeHandle as useImperativeHandle2, useRef as useRef7, useState as useState12 } from "react";
+import { jsx as jsx44 } from "react/jsx-runtime";
 var ToggleButton = styled("button", {
   all: "unset",
   cursor: "pointer",
@@ -3719,8 +4039,8 @@ var ToggleButton = styled("button", {
 });
 var PasswordInput = forwardRef12(
   ({ value, onChange, ...props }, ref) => {
-    const [visible, setVisible] = useState9(false);
-    const innerRef = useRef6(null);
+    const [visible, setVisible] = useState12(false);
+    const innerRef = useRef7(null);
     useImperativeHandle2(ref, () => innerRef.current);
     const handleToggleVisibility = () => {
       setVisible((v) => !v);
@@ -3731,7 +4051,7 @@ var PasswordInput = forwardRef12(
         }
       }, 0);
     };
-    return /* @__PURE__ */ jsx42(
+    return /* @__PURE__ */ jsx44(
       Input2,
       {
         ...props,
@@ -3739,14 +4059,14 @@ var PasswordInput = forwardRef12(
         type: visible ? "text" : "password",
         value,
         onChange,
-        suffix: /* @__PURE__ */ jsx42(
+        suffix: /* @__PURE__ */ jsx44(
           ToggleButton,
           {
             type: "button",
             onClick: handleToggleVisibility,
             onMouseDown: (e) => e.preventDefault(),
             "aria-label": visible ? "Ocultar senha" : "Mostrar senha",
-            children: visible ? /* @__PURE__ */ jsx42(Icon, { name: "EyeClosed", size: 16, color: "black" }) : /* @__PURE__ */ jsx42(Icon, { name: "EyeOpen", size: 16, color: "black" })
+            children: visible ? /* @__PURE__ */ jsx44(Icon, { name: "EyeClosed", size: 16, color: "black" }) : /* @__PURE__ */ jsx44(Icon, { name: "EyeOpen", size: 16, color: "black" })
           }
         )
       }
@@ -3838,18 +4158,18 @@ var OptionsButton = styled(Button, {
 });
 
 // src/components/Accordion/index.tsx
-import { jsx as jsx43, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs21 } from "react/jsx-runtime";
 var Accordion2 = React6.forwardRef(
   ({ title, children, dropdownItems }, ref) => {
-    return /* @__PURE__ */ jsx43(AccordionContainer, { type: "single", collapsible: true, ref, children: /* @__PURE__ */ jsxs20(AccordionItem, { value: "item-1", children: [
-      /* @__PURE__ */ jsxs20(AccordionHeader, { children: [
-        /* @__PURE__ */ jsx43(AccordionTrigger, { children: /* @__PURE__ */ jsx43("span", { children: title }) }),
-        /* @__PURE__ */ jsxs20(TriggerContent, { children: [
+    return /* @__PURE__ */ jsx45(AccordionContainer, { type: "single", collapsible: true, ref, children: /* @__PURE__ */ jsxs21(AccordionItem, { value: "item-1", children: [
+      /* @__PURE__ */ jsxs21(AccordionHeader, { children: [
+        /* @__PURE__ */ jsx45(AccordionTrigger, { children: /* @__PURE__ */ jsx45("span", { children: title }) }),
+        /* @__PURE__ */ jsxs21(TriggerContent, { children: [
           dropdownItems && dropdownItems,
-          /* @__PURE__ */ jsx43(RadixAccordion.Trigger, { asChild: true, children: /* @__PURE__ */ jsx43(StyledButton, { as: "div", variant: "secondary", size: "sm", children: /* @__PURE__ */ jsx43(AccordionChevron, { name: "TriangleDown", size: 16, "aria-hidden": true }) }) })
+          /* @__PURE__ */ jsx45(RadixAccordion.Trigger, { asChild: true, children: /* @__PURE__ */ jsx45(StyledButton, { as: "div", variant: "secondary", size: "sm", children: /* @__PURE__ */ jsx45(AccordionChevron, { name: "TriangleDown", size: 16, "aria-hidden": true }) }) })
         ] })
       ] }),
-      /* @__PURE__ */ jsx43(RadixAccordion.Content, { asChild: true, children: /* @__PURE__ */ jsx43(AccordionContent, { children }) })
+      /* @__PURE__ */ jsx45(RadixAccordion.Content, { asChild: true, children: /* @__PURE__ */ jsx45(AccordionContent, { children }) })
     ] }) });
   }
 );