@clickpalm/react 1.3.2 → 1.3.3

package/dist/index.d.ts

@@ -3073,7 +3073,7 @@ interface TooltipProps {
     delayDuration?: number;
 }
 declare const Tooltip: {
-    ({ content, children, side, sideOffset, open, onOpenChange, delayDuration }: TooltipProps): react_jsx_runtime.JSX.Element;
+    ({ content, children, side, sideOffset, open: controlledOpen, onOpenChange, delayDuration }: TooltipProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 

package/dist/index.js

@@ -1218,8 +1218,7 @@ var TextInputContainer = styled("div", {
   marginBottom: "$6",
   FontSize: "$md",
   "&:has(input:focus), &:hover": {
-    border: "2px solid $clickpalm_light",
-    padding: "calc($4 - 0.9px) calc($4 - 0.9px)"
+    border: "1px solid $clickpalm_light"
   },
   "&:has(input:disabled)": {
     opacity: 0.5,
@@ -1240,8 +1239,7 @@ var TextInputContainer = styled("div", {
         border: "1px solid $danger_dark",
         marginBottom: "0px",
         "&:has(input:focus), &:hover": {
-          border: "2px solid $danger_dark",
-          padding: "calc($4 - 0.9px) calc($4 - 0.9px)"
+          border: "1px solid $danger_dark"
         }
       }
     },
@@ -1326,9 +1324,22 @@ var CharCounter = styled(Span2, {
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var Input2 = (0, import_react5.forwardRef)(
   ({ prefix, suffix, label, maxLength, showCounter = false, errorMessage, noMargin = false, ...props }, forwardedRef) => {
-    const [charCount, setCharCount] = (0, import_react5.useState)(0);
+    const getDisplayValue = (value) => {
+      const stringValue = String(value || "");
+      if (prefix && stringValue.startsWith(prefix)) {
+        return stringValue.substring(prefix.length);
+      }
+      return stringValue;
+    };
+    const [displayValue, setDisplayValue] = (0, import_react5.useState)(getDisplayValue(props.value));
+    const [charCount, setCharCount] = (0, import_react5.useState)((prefix?.length || 0) + getDisplayValue(props.value).length);
     const localInputRef = (0, import_react5.useRef)(null);
     const inputRef = forwardedRef || localInputRef;
+    (0, import_react5.useEffect)(() => {
+      const newDisplayValue = getDisplayValue(props.value);
+      setDisplayValue(newDisplayValue);
+      setCharCount((prefix?.length || 0) + newDisplayValue.length);
+    }, [props.value, prefix]);
     const handleContainerClick = () => {
       inputRef?.current?.focus();
     };
@@ -1355,12 +1366,23 @@ var Input2 = (0, import_react5.forwardRef)(
               {
                 ref: inputRef,
                 ...props,
-                maxLength,
+                value: displayValue,
+                maxLength: maxLength ? maxLength - (prefix?.length || 0) : void 0,
                 onChange: (e) => {
+                  const currentDisplayValue = e.target.value;
+                  setDisplayValue(currentDisplayValue);
+                  setCharCount((prefix?.length || 0) + currentDisplayValue.length);
                   if (props.onChange) {
-                    props.onChange(e);
+                    const valueWithPrefix = prefix ? prefix + currentDisplayValue : currentDisplayValue;
+                    const newEvent = {
+                      ...e,
+                      target: {
+                        ...e.target,
+                        value: valueWithPrefix
+                      }
+                    };
+                    props.onChange(newEvent);
                   }
-                  setCharCount(e.target.value.length);
                 }
               }
             ),
@@ -2135,7 +2157,7 @@ var StyledRoot3 = styled(Switch.Root, {
   },
   '&[data-state="unchecked"]': {
     backgroundColor: "$white",
-    border: "2px solid $gray_dark"
+    border: "1px solid $gray_dark"
   },
   "&:disabled": {
     opacity: 0.5,
@@ -2147,13 +2169,13 @@ var StyledRoot3 = styled(Switch.Root, {
   variants: {
     hasError: {
       true: {
-        border: "2px solid $danger_dark",
+        border: "1px solid $danger_dark",
         marginBottom: "0px",
         "&:focus": {
           outline: "1px solid $danger_dark"
         },
         '&[data-state="unchecked"]': {
-          border: "2px solid $danger_dark"
+          border: "1px solid $danger_dark"
         }
       }
     }
@@ -2451,7 +2473,7 @@ var TextAreaElement = styled("textarea", {
   width: "100%",
   "&:focus": {
     outline: 0,
-    border: "2px solid $clickpalm_light"
+    border: "1px solid $clickpalm_light"
   },
   "&:disabled": {
     opacity: 0.5,
@@ -2476,10 +2498,10 @@ var TextAreaElement = styled("textarea", {
   variants: {
     hasError: {
       true: {
-        border: "1px solid $danger_dark",
+        border: "1px solid $danger",
         marginBottom: "0px",
         "&:focus": {
-          border: "2px solid $danger_dark"
+          border: "1px solid $danger_dark"
         }
       }
     },
@@ -2614,18 +2636,32 @@ var TooltipArrow = styled(RadixTooltip.Arrow, {
 });
 
 // src/components/Tooltip/index.tsx
+var import_react14 = require("react");
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var Tooltip = ({
   content,
   children,
   side = "top",
   sideOffset = 5,
-  open,
+  open: controlledOpen,
   onOpenChange,
   delayDuration = 100
 }) => {
-  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 }),
+  const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react14.useState)(false);
+  const [isTouchDevice, setIsTouchDevice] = (0, import_react14.useState)(false);
+  (0, import_react14.useEffect)(() => {
+    setIsTouchDevice("ontouchstart" in window || navigator.maxTouchPoints > 0);
+  }, []);
+  const open = controlledOpen ?? uncontrolledOpen;
+  const setOpen = onOpenChange ?? setUncontrolledOpen;
+  const handleClick = (event) => {
+    if (isTouchDevice) {
+      event.preventDefault();
+      setOpen(!open);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(RadixTooltip2.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(RadixTooltip2.Root, { open, onOpenChange: setOpen, delayDuration, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TooltipTrigger, { asChild: true, onClick: handleClick, children }),
     /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(TooltipContent, { side, sideOffset, children: [
       content,
       /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TooltipArrow, {})
@@ -2719,7 +2755,7 @@ var Loader = ({ show, fullscreen = false }) => {
 Loader.displayName = "Loader";
 
 // src/components/MaskedInput/index.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 
 // src/components/MaskedInput/utils.ts
 var MAX_LENGTHS = {
@@ -2784,10 +2820,10 @@ var applyMask = (value, maskType) => {
 
 // src/components/MaskedInput/index.tsx
 var import_jsx_runtime33 = require("react/jsx-runtime");
-var MaskedInput = (0, import_react14.forwardRef)(
+var MaskedInput = (0, import_react15.forwardRef)(
   ({ maskType, onChange, ...props }, ref) => {
-    const [value, setValue] = (0, import_react14.useState)("");
-    const inputRef = (0, import_react14.useRef)(null);
+    const [value, setValue] = (0, import_react15.useState)("");
+    const inputRef = (0, import_react15.useRef)(null);
     const handleChange = (e) => {
       const { value: inputValue, selectionStart } = e.target;
       const isBackspace = value.length > inputValue.length;
@@ -2835,7 +2871,7 @@ var MaskedInput = (0, import_react14.forwardRef)(
 MaskedInput.displayName = "MaskedInput";
 
 // src/components/Dropdown/index.tsx
-var import_react15 = __toESM(require("react"));
+var import_react16 = __toESM(require("react"));
 var DropdownMenu2 = __toESM(require("@radix-ui/react-dropdown-menu"));
 
 // src/components/Dropdown/styles.ts
@@ -2923,17 +2959,17 @@ var IconButton = styled("button", {
 // src/components/Dropdown/index.tsx
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var Dropdown = ({ children }) => {
-  const childrenArray = import_react15.Children.toArray(children);
+  const childrenArray = import_react16.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: [
+    /* @__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_react16.Fragment, { children: [
       child,
       index < childrenArray.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DropdownSeparator, {})
     ] }, index)) }) })
   ] });
 };
 var DropdownSeparator = StyledSeparator;
-var DropdownItem = import_react15.default.forwardRef(({ children, ...props }, forwardedRef) => {
+var DropdownItem = import_react16.default.forwardRef(({ children, ...props }, forwardedRef) => {
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(StyledItem2, { ...props, ref: forwardedRef, children });
 });
 Dropdown.displayName = "Dropdown";
@@ -3015,7 +3051,7 @@ var Paragraph = (props) => {
 Paragraph.displayName = "Paragraph";
 
 // src/components/Heading.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_jsx_runtime37 = require("react/jsx-runtime");
 var StyledHeading = styled("h2", {
   fontFamily: "$default",
@@ -3038,7 +3074,7 @@ var StyledHeading = styled("h2", {
     size: "md"
   }
 });
-var Heading = (0, import_react16.forwardRef)(function Heading2({ children, ...props }, ref) {
+var Heading = (0, import_react17.forwardRef)(function Heading2({ children, ...props }, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(StyledHeading, { ref, ...props, children });
 });
 Heading.displayName = "Heading";
@@ -3046,7 +3082,7 @@ Heading.displayName = "Heading";
 // src/components/Select/index.tsx
 var import_react_icons2 = require("@radix-ui/react-icons");
 var CustomSelect2 = __toESM(require("@radix-ui/react-select"));
-var import_react17 = require("react");
+var import_react18 = require("react");
 
 // src/components/Select/styles.ts
 var Select = __toESM(require("@radix-ui/react-select"));
@@ -3082,8 +3118,7 @@ var StyledTrigger = styled(Select.Trigger, {
   },
   "&[data-highlighted], &:focus, &:hover": {
     outline: "none",
-    border: "2px solid $clickpalm_light",
-    padding: "calc(0.92rem - 0.9px) calc($4 - 0.9px)"
+    border: "1px solid $clickpalm_light"
   },
   "&:disabled": {
     opacity: 0.5,
@@ -3096,8 +3131,7 @@ var StyledTrigger = styled(Select.Trigger, {
         marginBottom: "0px",
         "&[data-highlighted], &:focus, &:hover": {
           outline: "none",
-          border: "2px solid $danger_dark",
-          padding: "calc(0.92rem - 0.9px) calc($4 - 0.9px)"
+          border: "1px solid $danger_dark"
         }
       }
     }
@@ -3181,7 +3215,7 @@ var Span6 = styled("span", {
 
 // src/components/Select/index.tsx
 var import_jsx_runtime38 = require("react/jsx-runtime");
-var Select2 = (0, import_react17.forwardRef)(
+var Select2 = (0, import_react18.forwardRef)(
   ({
     value,
     onValueChange,
@@ -3194,7 +3228,7 @@ var Select2 = (0, import_react17.forwardRef)(
     style,
     ...rest
   }, ref) => {
-    const [open, setOpen] = (0, import_react17.useState)(false);
+    const [open, setOpen] = (0, import_react18.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)(
@@ -3224,7 +3258,7 @@ var Select2 = (0, import_react17.forwardRef)(
 Select2.displayName = "Select";
 
 // src/components/LabelledValue/index.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 
 // src/components/LabelledValue/styles.ts
 var Container = styled("div", {
@@ -3287,9 +3321,9 @@ var Value2 = styled("div", {
 // src/components/LabelledValue/index.tsx
 var import_jsx_runtime39 = require("react/jsx-runtime");
 function LabelledValue({ position = "vertical", withRow = false, children }) {
-  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 /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Container, { position, children: import_react19.Children.map(children, (child) => {
+    if ((0, import_react19.isValidElement)(child)) {
+      return (0, import_react19.cloneElement)(child, { position, withRow });
     }
     return child;
   }) });
@@ -3885,7 +3919,7 @@ var MultiStep = ({
 MultiStep.displayName = "MultiStep";
 
 // src/components/Carousel/index.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 
 // src/components/Carousel/styles.ts
 var CarouselContainer = styled("div", {
@@ -3996,10 +4030,10 @@ var CarouselItemContainer = styled("div", {
 var import_jsx_runtime43 = require("react/jsx-runtime");
 var SWIPE_THRESHOLD = 50;
 var Carousel = ({ title, variant, children }) => {
-  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 items = import_react20.Children.toArray(children);
+  const [activeIndex, setActiveIndex] = (0, import_react20.useState)(0);
+  const [touchStartX, setTouchStartX] = (0, import_react20.useState)(null);
+  const [touchEndX, setTouchEndX] = (0, import_react20.useState)(null);
   const prev = () => {
     setActiveIndex((prevIndex) => prevIndex === 0 ? items.length - 1 : prevIndex - 1);
   };
@@ -4072,7 +4106,7 @@ var Carousel = ({ title, variant, children }) => {
               onTouchMove,
               onTouchEnd,
               children: items.map(
-                (child, index) => (0, import_react19.cloneElement)(child, {
+                (child, index) => (0, import_react20.cloneElement)(child, {
                   "aria-hidden": index !== activeIndex,
                   style: {
                     display: index === activeIndex ? "block" : "none"
@@ -4103,7 +4137,7 @@ var CarouselItem = ({ children, style, ...props }) => /* @__PURE__ */ (0, import
 Carousel.Item = CarouselItem;
 
 // src/components/PasswordInput.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_jsx_runtime44 = require("react/jsx-runtime");
 var ToggleButton = styled("button", {
   all: "unset",
@@ -4119,11 +4153,11 @@ var ToggleButton = styled("button", {
     borderRadius: "$sm"
   }
 });
-var PasswordInput = (0, import_react20.forwardRef)(
+var PasswordInput = (0, import_react21.forwardRef)(
   ({ value, onChange, ...props }, ref) => {
-    const [visible, setVisible] = (0, import_react20.useState)(false);
-    const innerRef = (0, import_react20.useRef)(null);
-    (0, import_react20.useImperativeHandle)(ref, () => innerRef.current);
+    const [visible, setVisible] = (0, import_react21.useState)(false);
+    const innerRef = (0, import_react21.useRef)(null);
+    (0, import_react21.useImperativeHandle)(ref, () => innerRef.current);
     const handleToggleVisibility = () => {
       setVisible((v) => !v);
       setTimeout(() => {
@@ -4159,7 +4193,7 @@ PasswordInput.displayName = "PasswordInput";
 
 // src/components/Accordion/index.tsx
 var RadixAccordion = __toESM(require("@radix-ui/react-accordion"));
-var import_react21 = __toESM(require("react"));
+var import_react22 = __toESM(require("react"));
 
 // src/components/Accordion/styles.ts
 var Accordion = __toESM(require("@radix-ui/react-accordion"));
@@ -4246,7 +4280,7 @@ var OptionsButton = styled(Button, {
 
 // src/components/Accordion/index.tsx
 var import_jsx_runtime45 = require("react/jsx-runtime");
-var Accordion2 = import_react21.default.forwardRef(
+var Accordion2 = import_react22.default.forwardRef(
   ({ title, children, dropdownItems }, ref) => {
     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: [

package/dist/index.mjs

@@ -1117,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 useState4 } from "react";
+import { forwardRef as forwardRef4, useEffect as useEffect4, 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, useState as useState2 } from "react";
+import React, { forwardRef as forwardRef3, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
 
 // src/components/Input/styles.ts
 var StyledWrapper2 = styled("div", {
@@ -1148,8 +1148,7 @@ var TextInputContainer = styled("div", {
   marginBottom: "$6",
   FontSize: "$md",
   "&:has(input:focus), &:hover": {
-    border: "2px solid $clickpalm_light",
-    padding: "calc($4 - 0.9px) calc($4 - 0.9px)"
+    border: "1px solid $clickpalm_light"
   },
   "&:has(input:disabled)": {
     opacity: 0.5,
@@ -1170,8 +1169,7 @@ var TextInputContainer = styled("div", {
         border: "1px solid $danger_dark",
         marginBottom: "0px",
         "&:has(input:focus), &:hover": {
-          border: "2px solid $danger_dark",
-          padding: "calc($4 - 0.9px) calc($4 - 0.9px)"
+          border: "1px solid $danger_dark"
         }
       }
     },
@@ -1256,9 +1254,22 @@ var CharCounter = styled(Span2, {
 import { jsx as jsx19, jsxs as jsxs4 } from "react/jsx-runtime";
 var Input2 = forwardRef3(
   ({ prefix, suffix, label, maxLength, showCounter = false, errorMessage, noMargin = false, ...props }, forwardedRef) => {
-    const [charCount, setCharCount] = useState2(0);
+    const getDisplayValue = (value) => {
+      const stringValue = String(value || "");
+      if (prefix && stringValue.startsWith(prefix)) {
+        return stringValue.substring(prefix.length);
+      }
+      return stringValue;
+    };
+    const [displayValue, setDisplayValue] = useState2(getDisplayValue(props.value));
+    const [charCount, setCharCount] = useState2((prefix?.length || 0) + getDisplayValue(props.value).length);
     const localInputRef = useRef2(null);
     const inputRef = forwardedRef || localInputRef;
+    useEffect2(() => {
+      const newDisplayValue = getDisplayValue(props.value);
+      setDisplayValue(newDisplayValue);
+      setCharCount((prefix?.length || 0) + newDisplayValue.length);
+    }, [props.value, prefix]);
     const handleContainerClick = () => {
       inputRef?.current?.focus();
     };
@@ -1285,12 +1296,23 @@ var Input2 = forwardRef3(
               {
                 ref: inputRef,
                 ...props,
-                maxLength,
+                value: displayValue,
+                maxLength: maxLength ? maxLength - (prefix?.length || 0) : void 0,
                 onChange: (e) => {
+                  const currentDisplayValue = e.target.value;
+                  setDisplayValue(currentDisplayValue);
+                  setCharCount((prefix?.length || 0) + currentDisplayValue.length);
                   if (props.onChange) {
-                    props.onChange(e);
+                    const valueWithPrefix = prefix ? prefix + currentDisplayValue : currentDisplayValue;
+                    const newEvent = {
+                      ...e,
+                      target: {
+                        ...e.target,
+                        value: valueWithPrefix
+                      }
+                    };
+                    props.onChange(newEvent);
                   }
-                  setCharCount(e.target.value.length);
                 }
               }
             ),
@@ -1312,7 +1334,7 @@ var Input2 = forwardRef3(
 Input2.displayName = "Input";
 
 // src/components/Datepicker/CustomSelect/index.tsx
-import { useEffect as useEffect2, useRef as useRef3, useState as useState3 } from "react";
+import { useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "react";
 
 // src/components/Datepicker/CustomSelect/styles.ts
 var IconWrapper = styled("span", {
@@ -1456,7 +1478,7 @@ var CustomSelect = ({
     }
     setIsOpen(false);
   };
-  useEffect2(() => {
+  useEffect3(() => {
     const handleClickOutside = (event) => {
       if (selectRef.current && !selectRef.current.contains(event.target)) {
         setIsOpen(false);
@@ -1632,7 +1654,7 @@ var Datepicker = forwardRef4(({ label, placeholder, value, onChange, errorMessag
     }
     setOpen(false);
   };
-  useEffect3(() => {
+  useEffect4(() => {
     const handleClickOutside = (event) => {
       if (calendarRef.current && !calendarRef.current.contains(event.target) && inputRef.current && !inputRef.current.contains(event.target)) {
         setOpen(false);
@@ -1641,7 +1663,7 @@ var Datepicker = forwardRef4(({ label, placeholder, value, onChange, errorMessag
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!open && selected) {
       setMonth(selected);
     }
@@ -1814,7 +1836,7 @@ var Modal = ({ open, onOpenChange, title, description, children }) => {
 };
 
 // src/components/ProgressBar/index.tsx
-import { useEffect as useEffect4, useState as useState5 } from "react";
+import { useEffect as useEffect5, useState as useState5 } from "react";
 
 // src/components/ProgressBar/styles.ts
 import * as Progress from "@radix-ui/react-progress";
@@ -1847,7 +1869,7 @@ var StyledIndicator = styled(Progress.Indicator, {
 import { jsx as jsx25, jsxs as jsxs8 } from "react/jsx-runtime";
 var ProgressBar = ({ label, value = 0, max = 100, ...rest }) => {
   const [progress2, setProgress] = useState5(0);
-  useEffect4(() => {
+  useEffect5(() => {
     const timer = setTimeout(() => setProgress(value), 500);
     return () => clearTimeout(timer);
   }, [value]);
@@ -2065,7 +2087,7 @@ var StyledRoot3 = styled(Switch.Root, {
   },
   '&[data-state="unchecked"]': {
     backgroundColor: "$white",
-    border: "2px solid $gray_dark"
+    border: "1px solid $gray_dark"
   },
   "&:disabled": {
     opacity: 0.5,
@@ -2077,13 +2099,13 @@ var StyledRoot3 = styled(Switch.Root, {
   variants: {
     hasError: {
       true: {
-        border: "2px solid $danger_dark",
+        border: "1px solid $danger_dark",
         marginBottom: "0px",
         "&:focus": {
           outline: "1px solid $danger_dark"
         },
         '&[data-state="unchecked"]': {
-          border: "2px solid $danger_dark"
+          border: "1px solid $danger_dark"
         }
       }
     }
@@ -2381,7 +2403,7 @@ var TextAreaElement = styled("textarea", {
   width: "100%",
   "&:focus": {
     outline: 0,
-    border: "2px solid $clickpalm_light"
+    border: "1px solid $clickpalm_light"
   },
   "&:disabled": {
     opacity: 0.5,
@@ -2406,10 +2428,10 @@ var TextAreaElement = styled("textarea", {
   variants: {
     hasError: {
       true: {
-        border: "1px solid $danger_dark",
+        border: "1px solid $danger",
         marginBottom: "0px",
         "&:focus": {
-          border: "2px solid $danger_dark"
+          border: "1px solid $danger_dark"
         }
       }
     },
@@ -2544,18 +2566,32 @@ var TooltipArrow = styled(RadixTooltip.Arrow, {
 });
 
 // src/components/Tooltip/index.tsx
+import { useState as useState8, useEffect as useEffect6 } from "react";
 import { jsx as jsx31, jsxs as jsxs13 } from "react/jsx-runtime";
 var Tooltip = ({
   content,
   children,
   side = "top",
   sideOffset = 5,
-  open,
+  open: controlledOpen,
   onOpenChange,
   delayDuration = 100
 }) => {
-  return /* @__PURE__ */ jsx31(RadixTooltip2.Provider, { children: /* @__PURE__ */ jsxs13(RadixTooltip2.Root, { open, onOpenChange, delayDuration, children: [
-    /* @__PURE__ */ jsx31(TooltipTrigger, { asChild: true, children }),
+  const [uncontrolledOpen, setUncontrolledOpen] = useState8(false);
+  const [isTouchDevice, setIsTouchDevice] = useState8(false);
+  useEffect6(() => {
+    setIsTouchDevice("ontouchstart" in window || navigator.maxTouchPoints > 0);
+  }, []);
+  const open = controlledOpen ?? uncontrolledOpen;
+  const setOpen = onOpenChange ?? setUncontrolledOpen;
+  const handleClick = (event) => {
+    if (isTouchDevice) {
+      event.preventDefault();
+      setOpen(!open);
+    }
+  };
+  return /* @__PURE__ */ jsx31(RadixTooltip2.Provider, { children: /* @__PURE__ */ jsxs13(RadixTooltip2.Root, { open, onOpenChange: setOpen, delayDuration, children: [
+    /* @__PURE__ */ jsx31(TooltipTrigger, { asChild: true, onClick: handleClick, children }),
     /* @__PURE__ */ jsxs13(TooltipContent, { side, sideOffset, children: [
       content,
       /* @__PURE__ */ jsx31(TooltipArrow, {})
@@ -2649,7 +2685,7 @@ var Loader = ({ show, fullscreen = false }) => {
 Loader.displayName = "Loader";
 
 // src/components/MaskedInput/index.tsx
-import { forwardRef as forwardRef9, useState as useState8, useRef as useRef6 } from "react";
+import { forwardRef as forwardRef9, useState as useState9, useRef as useRef6 } from "react";
 
 // src/components/MaskedInput/utils.ts
 var MAX_LENGTHS = {
@@ -2716,7 +2752,7 @@ var applyMask = (value, maskType) => {
 import { jsx as jsx33 } from "react/jsx-runtime";
 var MaskedInput = forwardRef9(
   ({ maskType, onChange, ...props }, ref) => {
-    const [value, setValue] = useState8("");
+    const [value, setValue] = useState9("");
     const inputRef = useRef6(null);
     const handleChange = (e) => {
       const { value: inputValue, selectionStart } = e.target;
@@ -2976,7 +3012,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 useState9 } from "react";
+import { forwardRef as forwardRef11, useState as useState10 } from "react";
 
 // src/components/Select/styles.ts
 import * as Select from "@radix-ui/react-select";
@@ -3012,8 +3048,7 @@ var StyledTrigger = styled(Select.Trigger, {
   },
   "&[data-highlighted], &:focus, &:hover": {
     outline: "none",
-    border: "2px solid $clickpalm_light",
-    padding: "calc(0.92rem - 0.9px) calc($4 - 0.9px)"
+    border: "1px solid $clickpalm_light"
   },
   "&:disabled": {
     opacity: 0.5,
@@ -3026,8 +3061,7 @@ var StyledTrigger = styled(Select.Trigger, {
         marginBottom: "0px",
         "&[data-highlighted], &:focus, &:hover": {
           outline: "none",
-          border: "2px solid $danger_dark",
-          padding: "calc(0.92rem - 0.9px) calc($4 - 0.9px)"
+          border: "1px solid $danger_dark"
         }
       }
     }
@@ -3124,7 +3158,7 @@ var Select2 = forwardRef11(
     style,
     ...rest
   }, ref) => {
-    const [open, setOpen] = useState9(false);
+    const [open, setOpen] = useState10(false);
     return /* @__PURE__ */ jsxs15(StyledWrapper4, { css: css2, className, style, children: [
       label && /* @__PURE__ */ jsx38(Label3, { children: label }),
       /* @__PURE__ */ jsxs15(
@@ -3819,7 +3853,7 @@ var MultiStep = ({
 MultiStep.displayName = "MultiStep";
 
 // src/components/Carousel/index.tsx
-import { useState as useState11, Children as Children4, cloneElement as cloneElement2 } from "react";
+import { useState as useState12, Children as Children4, cloneElement as cloneElement2 } from "react";
 
 // src/components/Carousel/styles.ts
 var CarouselContainer = styled("div", {
@@ -3931,9 +3965,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] = useState11(0);
-  const [touchStartX, setTouchStartX] = useState11(null);
-  const [touchEndX, setTouchEndX] = useState11(null);
+  const [activeIndex, setActiveIndex] = useState12(0);
+  const [touchStartX, setTouchStartX] = useState12(null);
+  const [touchEndX, setTouchEndX] = useState12(null);
   const prev = () => {
     setActiveIndex((prevIndex) => prevIndex === 0 ? items.length - 1 : prevIndex - 1);
   };
@@ -4037,7 +4071,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 useState12 } from "react";
+import { forwardRef as forwardRef12, useImperativeHandle as useImperativeHandle2, useRef as useRef7, useState as useState13 } from "react";
 import { jsx as jsx44 } from "react/jsx-runtime";
 var ToggleButton = styled("button", {
   all: "unset",
@@ -4055,7 +4089,7 @@ var ToggleButton = styled("button", {
 });
 var PasswordInput = forwardRef12(
   ({ value, onChange, ...props }, ref) => {
-    const [visible, setVisible] = useState12(false);
+    const [visible, setVisible] = useState13(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.3.2",
+	"version": "1.3.3",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/clickpalm/clickpalm-designsystem-lib.git"