@clickpalm/react 1.2.18 → 1.3.1

package/dist/index.d.ts

@@ -2309,6 +2309,7 @@ declare const Checkbox: react.ForwardRefExoticComponent<Omit<CheckboxProps, "ref
 
 interface DatePickerInputProps {
     label: string;
+    placeholder?: string;
     value?: string;
     onChange: (date: string) => void;
     errorMessage?: string;
@@ -2613,6 +2614,7 @@ declare const Tabs: React.FC<TabsProps> & {
 
 declare const TextAreaElement: _stitches_react_types_styled_component.StyledComponent<"textarea", {
     hasError?: boolean | "true" | undefined;
+    hasCounter?: boolean | "true" | undefined;
 }, {
     sm: "(min-width: 375px)";
     md: "(min-width: 768px)";
@@ -3055,6 +3057,8 @@ interface TextAreaProps extends ComponentPropsWithoutRef<'textarea'>, VariantPro
     label?: string;
     htmlFor?: string;
     errorMessage?: string;
+    maxLength?: number;
+    showCounter?: boolean;
 }
 declare const TextArea: react.ForwardRefExoticComponent<TextAreaProps & react.RefAttributes<HTMLTextAreaElement>>;
 
@@ -3084,6 +3088,8 @@ interface TextInputProps extends InputHTMLAttributes<HTMLInputElement> {
     suffix?: react__default.ReactNode;
     noMargin?: boolean;
     errorMessage?: string;
+    maxLength?: number;
+    showCounter?: boolean;
 }
 declare const Input: react__default.ForwardRefExoticComponent<TextInputProps & react__default.RefAttributes<HTMLInputElement>>;
 

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,
@@ -1243,6 +1244,11 @@ var TextInputContainer = styled("div", {
           padding: "calc($4 - 0.9px) calc($4 - 0.9px)"
         }
       }
+    },
+    hasCounter: {
+      true: {
+        marginBottom: "0px"
+      }
     }
   }
 });
@@ -1282,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: "0px",
+  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, showCounter = false, 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 = () => {
@@ -1312,15 +1346,36 @@ var Input2 = (0, import_react5.forwardRef)(
           hasButtonSuffix: isButtonElement(suffix),
           noMargin,
           hasError: !!errorMessage,
+          hasCounter: showCounter,
           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 }),
+        showCounter && maxLength && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(CharCounter, { hasReachedMax: maxLength ? charCount >= maxLength : false, children: [
+          charCount,
+          "/",
+          maxLength
+        ] })
+      ] })
     ] });
   }
 );
@@ -1616,7 +1671,7 @@ var datePickerStyles = globalCss({
 // src/components/Datepicker/index.tsx
 var import_jsx_runtime22 = require("react/jsx-runtime");
 datePickerStyles();
-var Datepicker = (0, import_react7.forwardRef)(({ label, value, onChange, errorMessage }, ref) => {
+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);
@@ -1651,7 +1706,7 @@ var Datepicker = (0, import_react7.forwardRef)(({ label, value, onChange, errorM
       {
         ref: inputRef,
         label,
-        placeholder: "dd/mm/aaaa",
+        placeholder,
         onFocus: () => setOpen(true),
         value: value || "",
         readOnly: true,
@@ -2374,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": {
@@ -2412,6 +2466,11 @@ var TextAreaElement = styled("textarea", {
           border: "2px solid $danger_dark"
         }
       }
+    },
+    hasCounter: {
+      true: {
+        marginBottom: "0px"
+      }
     }
   }
 });
@@ -2419,15 +2478,43 @@ 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: "0px",
+  variants: {
+    hasReachedMax: {
+      true: {
+        color: "$danger_dark"
+      }
+    }
+  }
 });
 var TextArea = (0, import_react13.forwardRef)(
-  ({ label, id, htmlFor, errorMessage, ...props }, ref) => {
+  ({ label, id, htmlFor, errorMessage, maxLength, showCounter = false, ...props }, ref) => {
     const textAreaId = id || htmlFor || `textarea-${crypto.randomUUID()}`;
+    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)(
@@ -2436,10 +2523,25 @@ var TextArea = (0, import_react13.forwardRef)(
           id: textAreaId,
           ...props,
           hasError: !!errorMessage,
-          ref
+          hasCounter: showCounter,
+          ref,
+          maxLength,
+          onChange: (e) => {
+            if (props.onChange) {
+              props.onChange(e);
+            }
+            setCharCount(e.target.value.length);
+          }
         }
       ),
-      errorMessage && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Span5, { children: errorMessage })
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Footer2, { children: [
+        errorMessage && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Span5, { children: errorMessage }),
+        showCounter && maxLength && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(CharCounter2, { hasReachedMax: maxLength ? charCount >= maxLength : false, children: [
+          charCount,
+          "/",
+          maxLength
+        ] })
+      ] })
     ] });
   }
 );
@@ -2902,7 +3004,7 @@ var import_jsx_runtime37 = require("react/jsx-runtime");
 var StyledHeading = styled("h2", {
   fontFamily: "$default",
   lineHeight: "$shorter",
-  margin: 0,
+  margin: "1px",
   color: "$black",
   variants: {
     size: {
@@ -3390,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: {
@@ -3464,7 +3566,7 @@ var Toast = () => {
             removeToast(message.id);
         },
         variant: message.variant,
-        duration: 3e3,
+        duration: 6e3,
         onPause: () => setPaused(true),
         onResume: () => setPaused(false),
         children: [

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 useEffect3, useImperativeHandle, useRef as useRef4, useState as useState3 } 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", {
@@ -1172,6 +1174,11 @@ var TextInputContainer = styled("div", {
           padding: "calc($4 - 0.9px) calc($4 - 0.9px)"
         }
       }
+    },
+    hasCounter: {
+      true: {
+        marginBottom: "0px"
+      }
     }
   }
 });
@@ -1211,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: "0px",
+  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, showCounter = false, errorMessage, noMargin = false, ...props }, forwardedRef) => {
+    const [charCount, setCharCount] = useState2(0);
     const localInputRef = useRef2(null);
     const inputRef = forwardedRef || localInputRef;
     const handleContainerClick = () => {
@@ -1241,22 +1276,43 @@ var Input2 = forwardRef3(
           hasButtonSuffix: isButtonElement(suffix),
           noMargin,
           hasError: !!errorMessage,
+          hasCounter: showCounter,
           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 }),
+        showCounter && 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 useState2 } from "react";
+import { useEffect as useEffect2, useRef as useRef3, useState as useState3 } from "react";
 
 // src/components/Datepicker/CustomSelect/styles.ts
 var IconWrapper = styled("span", {
@@ -1382,7 +1438,7 @@ var CustomSelect = ({
   onChange,
   color = "white"
 }) => {
-  const [isOpen, setIsOpen] = useState2(false);
+  const [isOpen, setIsOpen] = useState3(false);
   const selectRef = useRef3(null);
   const handleToggle = () => setIsOpen(!isOpen);
   const handleOptionClick = (optionValue) => {
@@ -1545,10 +1601,10 @@ var datePickerStyles = globalCss({
 // src/components/Datepicker/index.tsx
 import { jsx as jsx22, jsxs as jsxs6 } from "react/jsx-runtime";
 datePickerStyles();
-var Datepicker = forwardRef4(({ label, value, onChange, errorMessage }, ref) => {
-  const [selected, setSelected] = useState3(void 0);
-  const [month, setMonth] = useState3(/* @__PURE__ */ new Date());
-  const [open, setOpen] = useState3(false);
+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);
@@ -1580,7 +1636,7 @@ var Datepicker = forwardRef4(({ label, value, onChange, errorMessage }, ref) =>
       {
         ref: inputRef,
         label,
-        placeholder: "dd/mm/aaaa",
+        placeholder,
         onFocus: () => setOpen(true),
         value: value || "",
         readOnly: true,
@@ -1742,7 +1798,7 @@ var Modal = ({ open, onOpenChange, title, description, children }) => {
 };
 
 // src/components/ProgressBar/index.tsx
-import { useEffect as useEffect4, useState as useState4 } from "react";
+import { useEffect as useEffect4, useState as useState5 } from "react";
 
 // src/components/ProgressBar/styles.ts
 import * as Progress from "@radix-ui/react-progress";
@@ -1774,7 +1830,7 @@ var StyledIndicator = styled(Progress.Indicator, {
 // src/components/ProgressBar/index.tsx
 import { jsx as jsx25, jsxs as jsxs8 } from "react/jsx-runtime";
 var ProgressBar = ({ label, value = 0, max = 100, ...rest }) => {
-  const [progress2, setProgress] = useState4(0);
+  const [progress2, setProgress] = useState5(0);
   useEffect4(() => {
     const timer = setTimeout(() => setProgress(value), 500);
     return () => clearTimeout(timer);
@@ -2084,7 +2140,7 @@ var Switch2 = forwardRef7(({
 Switch2.displayName = "Switch";
 
 // src/components/Tabs/index.tsx
-import { Children, isValidElement, useLayoutEffect, useRef as useRef5, useState as useState5 } 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";
@@ -2181,7 +2237,7 @@ var Tabs2 = ({ defaultValue, colorContent, children, value, onValueChange }) =>
   const listRef = useRef5(null);
   const rootRef = useRef5(null);
   const hasOverflowRef = useRef5(false);
-  const [hasOverflow, setHasOverflow] = useState5(false);
+  const [hasOverflow, setHasOverflow] = useState6(false);
   const checkOverflow = () => {
     const listEl = listRef.current;
     const rootEl = rootRef.current;
@@ -2278,7 +2334,7 @@ var Tabs2 = ({ defaultValue, colorContent, children, value, onValueChange }) =>
 Tabs2.Item = TabsItem;
 
 // src/components/TextArea.tsx
-import { forwardRef as forwardRef8 } from "react";
+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",
@@ -2303,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": {
@@ -2341,6 +2396,11 @@ var TextAreaElement = styled("textarea", {
           border: "2px solid $danger_dark"
         }
       }
+    },
+    hasCounter: {
+      true: {
+        marginBottom: "0px"
+      }
     }
   }
 });
@@ -2348,15 +2408,43 @@ 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: "0px",
+  variants: {
+    hasReachedMax: {
+      true: {
+        color: "$danger_dark"
+      }
+    }
+  }
 });
 var TextArea = forwardRef8(
-  ({ label, id, htmlFor, errorMessage, ...props }, ref) => {
+  ({ label, id, htmlFor, errorMessage, maxLength, showCounter = false, ...props }, ref) => {
     const textAreaId = id || htmlFor || `textarea-${crypto.randomUUID()}`;
+    const [charCount, setCharCount] = useState7(0);
     return /* @__PURE__ */ jsxs12(Wrapper4, { children: [
       label && /* @__PURE__ */ jsx30(StyledLabel2, { htmlFor: textAreaId, children: label }),
       /* @__PURE__ */ jsx30(
@@ -2365,10 +2453,25 @@ var TextArea = forwardRef8(
           id: textAreaId,
           ...props,
           hasError: !!errorMessage,
-          ref
+          hasCounter: showCounter,
+          ref,
+          maxLength,
+          onChange: (e) => {
+            if (props.onChange) {
+              props.onChange(e);
+            }
+            setCharCount(e.target.value.length);
+          }
         }
       ),
-      errorMessage && /* @__PURE__ */ jsx30(Span5, { children: errorMessage })
+      /* @__PURE__ */ jsxs12(Footer2, { children: [
+        errorMessage && /* @__PURE__ */ jsx30(Span5, { children: errorMessage }),
+        showCounter && maxLength && /* @__PURE__ */ jsxs12(CharCounter2, { hasReachedMax: maxLength ? charCount >= maxLength : false, children: [
+          charCount,
+          "/",
+          maxLength
+        ] })
+      ] })
     ] });
   }
 );
@@ -2530,7 +2633,7 @@ var Loader = ({ show, fullscreen = false }) => {
 Loader.displayName = "Loader";
 
 // src/components/MaskedInput/index.tsx
-import { forwardRef as forwardRef9, useState as useState6, useRef as useRef6 } from "react";
+import { forwardRef as forwardRef9, useState as useState8, useRef as useRef6 } from "react";
 
 // src/components/MaskedInput/utils.ts
 var MAX_LENGTHS = {
@@ -2597,7 +2700,7 @@ var applyMask = (value, maskType) => {
 import { jsx as jsx33 } from "react/jsx-runtime";
 var MaskedInput = forwardRef9(
   ({ maskType, onChange, ...props }, ref) => {
-    const [value, setValue] = useState6("");
+    const [value, setValue] = useState8("");
     const inputRef = useRef6(null);
     const handleChange = (e) => {
       const { value: inputValue, selectionStart } = e.target;
@@ -2831,7 +2934,7 @@ import { jsx as jsx37 } from "react/jsx-runtime";
 var StyledHeading = styled("h2", {
   fontFamily: "$default",
   lineHeight: "$shorter",
-  margin: 0,
+  margin: "1px",
   color: "$black",
   variants: {
     size: {
@@ -2857,7 +2960,7 @@ Heading.displayName = "Heading";
 // src/components/Select/index.tsx
 import { TriangleDownIcon, TriangleUpIcon } from "@radix-ui/react-icons";
 import * as CustomSelect2 from "@radix-ui/react-select";
-import { forwardRef as forwardRef11, useState as useState7 } from "react";
+import { forwardRef as forwardRef11, useState as useState9 } from "react";
 
 // src/components/Select/styles.ts
 import * as Select from "@radix-ui/react-select";
@@ -3005,7 +3108,7 @@ var Select2 = forwardRef11(
     style,
     ...rest
   }, ref) => {
-    const [open, setOpen] = useState7(false);
+    const [open, setOpen] = useState9(false);
     return /* @__PURE__ */ jsxs15(StyledWrapper4, { css: css2, className, style, children: [
       label && /* @__PURE__ */ jsx38(Label3, { children: label }),
       /* @__PURE__ */ jsxs15(
@@ -3323,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: {
@@ -3397,7 +3500,7 @@ var Toast = () => {
             removeToast(message.id);
         },
         variant: message.variant,
-        duration: 3e3,
+        duration: 6e3,
         onPause: () => setPaused(true),
         onResume: () => setPaused(false),
         children: [
@@ -3700,7 +3803,7 @@ var MultiStep = ({
 MultiStep.displayName = "MultiStep";
 
 // src/components/Carousel/index.tsx
-import { useState as useState9, 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", {
@@ -3812,9 +3915,9 @@ 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] = useState9(0);
-  const [touchStartX, setTouchStartX] = useState9(null);
-  const [touchEndX, setTouchEndX] = useState9(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);
   };
@@ -3918,7 +4021,7 @@ var CarouselItem = ({ children, style, ...props }) => /* @__PURE__ */ jsx43(Caro
 Carousel.Item = CarouselItem;
 
 // src/components/PasswordInput.tsx
-import { forwardRef as forwardRef12, useImperativeHandle as useImperativeHandle2, useRef as useRef7, useState as useState10 } from "react";
+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",
@@ -3936,7 +4039,7 @@ var ToggleButton = styled("button", {
 });
 var PasswordInput = forwardRef12(
   ({ value, onChange, ...props }, ref) => {
-    const [visible, setVisible] = useState10(false);
+    const [visible, setVisible] = useState12(false);
     const innerRef = useRef7(null);
     useImperativeHandle2(ref, () => innerRef.current);
     const handleToggleVisibility = () => {

package/package.json

@@ -3,7 +3,7 @@
 	"description": "Design System da Clikpalm",
 	"author": "Enisson Shilo",
 	"license": "MIT",
-	"version": "1.2.18",
+	"version": "1.3.1",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/clickpalm/clickpalm-designsystem-lib.git"