@clickpalm/react 1.3.11 → 1.3.13

package/dist/index.d.ts

@@ -4088,10 +4088,7 @@ interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'name' | 'color'> {
     color?: IconColor;
 }
 
-declare function Icon({ name, size, color, ...rest }: IconProps): react_jsx_runtime.JSX.Element | null;
-declare namespace Icon {
-    var displayName: string;
-}
+declare const Icon: react.ForwardRefExoticComponent<Omit<IconProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
 
 interface OneTimePasswordProps extends ComponentPropsWithoutRef<typeof OneTimePasswordField.Root> {
     label: string;

package/dist/index.js

@@ -316,7 +316,7 @@ Avatar2.displayName = "Avatar";
 // src/components/Calendar/index.tsx
 var import_date_fns = require("date-fns");
 var import_locale = require("date-fns/locale");
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_react_day_picker = require("react-day-picker");
 var import_style = require("react-day-picker/dist/style.css");
 
@@ -435,6 +435,9 @@ var Button = (0, import_react2.forwardRef)(function Button2({ children, ...props
 });
 Button.displayName = "Button";
 
+// src/components/Icon/index.tsx
+var import_react3 = require("react");
+
 // src/components/Icon/icons.ts
 var import_react_icons = require("@radix-ui/react-icons");
 
@@ -742,8 +745,8 @@ var Download = (props) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       {
         d: "M7.50005 1.04999C7.74858 1.04999 7.95005 1.25146 7.95005 1.49999V8.41359L10.1819 6.18179C10.3576 6.00605 10.6425 6.00605 10.8182 6.18179C10.994 6.35753 10.994 6.64245 10.8182 6.81819L7.81825 9.81819C7.64251 9.99392 7.35759 9.99392 7.18185 9.81819L4.18185 6.81819C4.00611 6.64245 4.00611 6.35753 4.18185 6.18179C4.35759 6.00605 4.64251 6.00605 4.81825 6.18179L7.05005 8.41359V1.49999C7.05005 1.25146 7.25152 1.04999 7.50005 1.04999ZM2.5 10C2.77614 10 3 10.2239 3 10.5V12C3 12.5539 3.44565 13 3.99635 13H11.0012C11.5529 13 12 12.5528 12 12V10.5C12 10.2239 12.2239 10 12.5 10C12.7761 10 13 10.2239 13 10.5V12C13 13.1041 12.1062 14 11.0012 14H3.99635C2.89019 14 2 13.103 2 12V10.5C2 10.2239 2.22386 10 2.5 10Z",
         fill: "currentColor",
-        "fill-rule": "evenodd",
-        "clip-rule": "evenodd"
+        fillRule: "evenodd",
+        clipRule: "evenodd"
       }
     )
   }
@@ -782,24 +785,27 @@ var colorMap = {
   green: "#78CB63",
   white: "#ffffff"
 };
-function Icon({ name, size = 24, color = "black", ...rest }) {
-  const IconComponent = iconMap[name];
-  if (!IconComponent) {
-    console.warn(`Icon "${name}" not found in iconMap`);
-    return null;
-  }
-  const fillColor = colorMap[color];
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-    IconComponent,
-    {
-      width: size,
-      height: size,
-      style: { color: fillColor },
-      "aria-hidden": true,
-      ...rest
+var Icon = (0, import_react3.forwardRef)(
+  ({ name, size = 24, color = "black", ...rest }, ref) => {
+    const IconComponent = iconMap[name];
+    if (!IconComponent) {
+      console.warn(`Icon "${name}" not found in iconMap`);
+      return null;
     }
-  );
-}
+    const fillColor = colorMap[color];
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      IconComponent,
+      {
+        ref,
+        width: size,
+        height: size,
+        style: { color: fillColor },
+        "aria-hidden": true,
+        ...rest
+      }
+    );
+  }
+);
 Icon.displayName = "Icon";
 
 // src/components/Calendar/styles.ts
@@ -999,9 +1005,9 @@ var StyledLabel = styled("label", {
 var import_jsx_runtime18 = require("react/jsx-runtime");
 calendarStyles();
 var Calendar2 = ({ label, onChange }) => {
-  const [selected, setSelected] = (0, import_react3.useState)(void 0);
-  const [month, setMonth] = (0, import_react3.useState)(/* @__PURE__ */ new Date());
-  const [open, setOpen] = (0, import_react3.useState)(true);
+  const [selected, setSelected] = (0, import_react4.useState)(void 0);
+  const [month, setMonth] = (0, import_react4.useState)(/* @__PURE__ */ new Date());
+  const [open, setOpen] = (0, import_react4.useState)(true);
   const handleDaySelect = (date) => {
     setSelected(date);
     if (date) {
@@ -1009,7 +1015,7 @@ var Calendar2 = ({ label, onChange }) => {
       onChange(formatted);
     }
   };
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (selected) {
       setMonth(selected);
     }
@@ -1068,7 +1074,7 @@ var Calendar2 = ({ label, onChange }) => {
 };
 
 // src/components/Checkbox/index.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 
 // src/components/Checkbox/styles.ts
 var Checkbox = __toESM(require("@radix-ui/react-checkbox"));
@@ -1185,7 +1191,7 @@ var Span = styled("span", {
 
 // src/components/Checkbox/index.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
-var Checkbox2 = (0, import_react4.forwardRef)(
+var Checkbox2 = (0, import_react5.forwardRef)(
   ({ label, checked, onCheckedChange, errorMessage, ...rest }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start" }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(StyledWrapper, { hasError: !!errorMessage, children: [
@@ -1211,12 +1217,12 @@ Checkbox2.displayName = "Checkbox";
 // src/components/Datepicker/index.tsx
 var import_date_fns2 = require("date-fns");
 var import_locale2 = require("date-fns/locale");
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_react_day_picker2 = require("react-day-picker");
 var import_style2 = require("react-day-picker/dist/style.css");
 
 // src/components/Input/index.tsx
-var import_react5 = __toESM(require("react"));
+var import_react6 = __toESM(require("react"));
 
 // src/components/Input/styles.ts
 var StyledWrapper2 = styled("div", {
@@ -1355,7 +1361,7 @@ var CharCounter = styled(Span2, {
 
 // src/components/Input/index.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
-var Input2 = (0, import_react5.forwardRef)(
+var Input2 = (0, import_react6.forwardRef)(
   ({ prefix, suffix, label, maxLength, showCounter = false, errorMessage, noMargin = false, redBorder, ...props }, forwardedRef) => {
     const getDisplayValue = (value) => {
       const stringValue = String(value || "");
@@ -1364,19 +1370,15 @@ var Input2 = (0, import_react5.forwardRef)(
       }
       return stringValue;
     };
-    const [displayValue, setDisplayValue] = (0, import_react5.useState)(getDisplayValue(props.value));
-    const [charCount, setCharCount] = (0, import_react5.useState)(getDisplayValue(props.value).length);
-    const localInputRef = (0, import_react5.useRef)(null);
+    const localInputRef = (0, import_react6.useRef)(null);
     const inputRef = forwardedRef || localInputRef;
-    (0, import_react5.useEffect)(() => {
-      const newDisplayValue = getDisplayValue(props.value);
-      if (newDisplayValue !== displayValue) {
-        setDisplayValue(newDisplayValue);
-        setCharCount(newDisplayValue.length);
-      }
-    }, [props.value, prefix, displayValue]);
+    const displayValue = getDisplayValue(props.value);
+    const charCount = displayValue.length;
     const handleChange = (e) => {
-      let currentDisplayValue = getDisplayValue(e.target.value);
+      let currentDisplayValue = e.target.value;
+      if (prefix && currentDisplayValue.startsWith(prefix)) {
+        currentDisplayValue = currentDisplayValue.substring(prefix.length);
+      }
       if (props.type === "number") {
         currentDisplayValue = currentDisplayValue.replace(/[^0-9]/g, "");
       }
@@ -1395,7 +1397,7 @@ var Input2 = (0, import_react5.forwardRef)(
       inputRef?.current?.focus();
     };
     const isButtonElement = (node) => {
-      if (!import_react5.default.isValidElement(node))
+      if (!import_react6.default.isValidElement(node))
         return false;
       const type = node.type;
       return type?.displayName === "Button";
@@ -1443,7 +1445,7 @@ var Input2 = (0, import_react5.forwardRef)(
 Input2.displayName = "Input";
 
 // src/components/Datepicker/CustomSelect/index.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 
 // src/components/Datepicker/CustomSelect/styles.ts
 var IconWrapper = styled("span", {
@@ -1578,8 +1580,8 @@ var CustomSelect = ({
   onChange,
   color = "white"
 }) => {
-  const [isOpen, setIsOpen] = (0, import_react6.useState)(false);
-  const selectRef = (0, import_react6.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react7.useState)(false);
+  const selectRef = (0, import_react7.useRef)(null);
   const handleToggle = () => setIsOpen(!isOpen);
   const handleOptionClick = (optionValue) => {
     if (onChange) {
@@ -1587,7 +1589,7 @@ var CustomSelect = ({
     }
     setIsOpen(false);
   };
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     const handleClickOutside = (event) => {
       if (selectRef.current && !selectRef.current.contains(event.target)) {
         setIsOpen(false);
@@ -1748,13 +1750,13 @@ var datePickerStyles = globalCss({
 var import_jsx_runtime23 = require("react/jsx-runtime");
 datePickerStyles();
 var oneYearMore = new Date((/* @__PURE__ */ new Date()).getFullYear() + 1, 11);
-var Datepicker = (0, import_react7.forwardRef)(({ label, placeholder, value, onChange, errorMessage, endDate = oneYearMore }, ref) => {
-  const [selected, setSelected] = (0, import_react7.useState)(void 0);
-  const [month, setMonth] = (0, import_react7.useState)(/* @__PURE__ */ new Date());
-  const [open, setOpen] = (0, import_react7.useState)(false);
-  const inputRef = (0, import_react7.useRef)(null);
-  const calendarRef = (0, import_react7.useRef)(null);
-  (0, import_react7.useImperativeHandle)(ref, () => inputRef.current);
+var Datepicker = (0, import_react8.forwardRef)(({ label, placeholder, value, onChange, errorMessage, endDate = oneYearMore }, ref) => {
+  const [selected, setSelected] = (0, import_react8.useState)(void 0);
+  const [month, setMonth] = (0, import_react8.useState)(/* @__PURE__ */ new Date());
+  const [open, setOpen] = (0, import_react8.useState)(false);
+  const inputRef = (0, import_react8.useRef)(null);
+  const calendarRef = (0, import_react8.useRef)(null);
+  (0, import_react8.useImperativeHandle)(ref, () => inputRef.current);
   const handleDaySelect = (date) => {
     setSelected(date);
     if (date) {
@@ -1763,7 +1765,7 @@ var Datepicker = (0, import_react7.forwardRef)(({ label, placeholder, value, onC
     }
     setOpen(false);
   };
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     const handleClickOutside = (event) => {
       if (calendarRef.current && !calendarRef.current.contains(event.target) && inputRef.current && !inputRef.current.contains(event.target)) {
         setOpen(false);
@@ -1772,7 +1774,7 @@ var Datepicker = (0, import_react7.forwardRef)(({ label, placeholder, value, onC
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (!open && selected) {
       setMonth(selected);
     }
@@ -1833,7 +1835,7 @@ var Datepicker = (0, import_react7.forwardRef)(({ label, placeholder, value, onC
 Datepicker.displayName = "Datepicker";
 
 // src/components/Hr.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_jsx_runtime24 = require("react/jsx-runtime");
 var StyledHr = styled("hr", {
   border: "none",
@@ -1850,7 +1852,7 @@ var StyledHr = styled("hr", {
     }
   }
 });
-var Hr = (0, import_react8.forwardRef)(function Hr2({ children, ...props }, ref) {
+var Hr = (0, import_react9.forwardRef)(function Hr2({ children, ...props }, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(StyledHr, { ref, ...props, children });
 });
 Hr.displayName = "Hr";
@@ -1947,7 +1949,7 @@ var Modal = ({ open, onOpenChange, title, description, children }) => {
 };
 
 // src/components/ProgressBar/index.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // src/components/ProgressBar/styles.ts
 var Progress = __toESM(require("@radix-ui/react-progress"));
@@ -1979,8 +1981,8 @@ var StyledIndicator = styled(Progress.Indicator, {
 // src/components/ProgressBar/index.tsx
 var import_jsx_runtime26 = require("react/jsx-runtime");
 var ProgressBar = ({ label, value = 0, max = 100, ...rest }) => {
-  const [progress2, setProgress] = (0, import_react9.useState)(0);
-  (0, import_react9.useEffect)(() => {
+  const [progress2, setProgress] = (0, import_react10.useState)(0);
+  (0, import_react10.useEffect)(() => {
     const timer = setTimeout(() => setProgress(value), 500);
     return () => clearTimeout(timer);
   }, [value]);
@@ -2006,7 +2008,7 @@ var ProgressBar = ({ label, value = 0, max = 100, ...rest }) => {
 ProgressBar.displayName = "ProgressBar";
 
 // src/components/Radio/index.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 
 // src/components/Radio/styles.ts
 var RadioGroup = __toESM(require("@radix-ui/react-radio-group"));
@@ -2101,7 +2103,7 @@ var Span3 = styled("span", {
 
 // src/components/Radio/index.tsx
 var import_jsx_runtime27 = require("react/jsx-runtime");
-var Radio = (0, import_react10.forwardRef)(({
+var Radio = (0, import_react11.forwardRef)(({
   labels,
   value,
   onChange,
@@ -2157,7 +2159,7 @@ var Spacing = ({ size, axis = "vertical" }) => {
 };
 
 // src/components/Switch/index.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 
 // src/components/Switch/styles.ts
 var Switch = __toESM(require("@radix-ui/react-switch"));
@@ -2255,7 +2257,7 @@ var Span4 = styled("span", {
 
 // src/components/Switch/index.tsx
 var import_jsx_runtime29 = require("react/jsx-runtime");
-var Switch2 = (0, import_react11.forwardRef)(({
+var Switch2 = (0, import_react12.forwardRef)(({
   label,
   checked,
   defaultChecked,
@@ -2289,7 +2291,7 @@ var Switch2 = (0, import_react11.forwardRef)(({
 Switch2.displayName = "Switch";
 
 // src/components/Tabs/index.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 
 // src/components/Tabs/styles.ts
 var Tabs = __toESM(require("@radix-ui/react-tabs"));
@@ -2375,17 +2377,17 @@ var TabsItem = ({ children }) => {
 };
 var Tabs2 = ({ defaultValue, colorContent, children, value, onValueChange }) => {
   const items = [];
-  const childrenArray = import_react12.Children.toArray(children);
+  const childrenArray = import_react13.Children.toArray(children);
   childrenArray.forEach((child) => {
-    if ((0, import_react12.isValidElement)(child) && child.type === TabsItem) {
+    if ((0, import_react13.isValidElement)(child) && child.type === TabsItem) {
       const { value: value2, label, forceMount, children: content } = child.props;
       items.push({ value: value2, label, forceMount, children: content });
     }
   });
-  const listRef = (0, import_react12.useRef)(null);
-  const rootRef = (0, import_react12.useRef)(null);
-  const hasOverflowRef = (0, import_react12.useRef)(false);
-  const [hasOverflow, setHasOverflow] = (0, import_react12.useState)(false);
+  const listRef = (0, import_react13.useRef)(null);
+  const rootRef = (0, import_react13.useRef)(null);
+  const hasOverflowRef = (0, import_react13.useRef)(false);
+  const [hasOverflow, setHasOverflow] = (0, import_react13.useState)(false);
   const checkOverflow = () => {
     const listEl = listRef.current;
     const rootEl = rootRef.current;
@@ -2400,7 +2402,7 @@ var Tabs2 = ({ defaultValue, colorContent, children, value, onValueChange }) =>
       setHasOverflow(overflow);
     }
   };
-  (0, import_react12.useLayoutEffect)(() => {
+  (0, import_react13.useLayoutEffect)(() => {
     checkOverflow();
     const resizeObserver = new ResizeObserver(checkOverflow);
     if (listRef.current) {
@@ -2429,7 +2431,7 @@ var Tabs2 = ({ defaultValue, colorContent, children, value, onValueChange }) =>
       value,
       onValueChange,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px", padding: `${hasOverflow ? "0 1rem" : ""}` }, children: [
           hasOverflow && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             Button,
             {
@@ -2482,7 +2484,7 @@ var Tabs2 = ({ defaultValue, colorContent, children, value, onValueChange }) =>
 Tabs2.Item = TabsItem;
 
 // src/components/TextArea.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var Wrapper4 = styled("div", {
   display: "flex",
@@ -2589,11 +2591,11 @@ var CharCounter2 = styled(Span5, {
     }
   }
 });
-var TextArea = (0, import_react13.forwardRef)(
+var TextArea = (0, import_react14.forwardRef)(
   ({ label, id, htmlFor, errorMessage, maxLength, showCounter = false, ...props }, ref) => {
     const textAreaId = id || htmlFor || `textarea-${crypto.randomUUID()}`;
-    const [charCount, setCharCount] = (0, import_react13.useState)(props.value?.toString().length || 0);
-    (0, import_react13.useEffect)(() => {
+    const [charCount, setCharCount] = (0, import_react14.useState)(props.value?.toString().length || 0);
+    (0, import_react14.useEffect)(() => {
       setCharCount(props.value?.toString().length || 0);
     }, [props.value]);
     return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Wrapper4, { children: [
@@ -2679,7 +2681,7 @@ var TooltipArrow = styled(RadixTooltip.Arrow, {
 });
 
 // src/components/Tooltip/index.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_jsx_runtime32 = require("react/jsx-runtime");
 var Tooltip = ({
   content,
@@ -2690,9 +2692,9 @@ var Tooltip = ({
   onOpenChange,
   delayDuration = 100
 }) => {
-  const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react14.useState)(false);
-  const [isTouchDevice, setIsTouchDevice] = (0, import_react14.useState)(false);
-  (0, import_react14.useEffect)(() => {
+  const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react15.useState)(false);
+  const [isTouchDevice, setIsTouchDevice] = (0, import_react15.useState)(false);
+  (0, import_react15.useEffect)(() => {
     setIsTouchDevice("ontouchstart" in window || navigator.maxTouchPoints > 0);
   }, []);
   const open = controlledOpen ?? uncontrolledOpen;
@@ -2798,7 +2800,7 @@ var Loader = ({ show, fullscreen = false }) => {
 Loader.displayName = "Loader";
 
 // src/components/MaskedInput/index.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 
 // src/components/MaskedInput/utils.ts
 var MAX_LENGTHS = {
@@ -2863,10 +2865,10 @@ var applyMask = (value, maskType) => {
 
 // src/components/MaskedInput/index.tsx
 var import_jsx_runtime34 = require("react/jsx-runtime");
-var MaskedInput = (0, import_react15.forwardRef)(
+var MaskedInput = (0, import_react16.forwardRef)(
   ({ maskType, onChange, ...props }, ref) => {
-    const [value, setValue] = (0, import_react15.useState)("");
-    const inputRef = (0, import_react15.useRef)(null);
+    const [value, setValue] = (0, import_react16.useState)("");
+    const inputRef = (0, import_react16.useRef)(null);
     const handleChange = (e) => {
       const { value: inputValue, selectionStart } = e.target;
       const isBackspace = value.length > inputValue.length;
@@ -2914,7 +2916,7 @@ var MaskedInput = (0, import_react15.forwardRef)(
 MaskedInput.displayName = "MaskedInput";
 
 // src/components/Dropdown/index.tsx
-var import_react16 = __toESM(require("react"));
+var import_react17 = __toESM(require("react"));
 var DropdownMenu2 = __toESM(require("@radix-ui/react-dropdown-menu"));
 
 // src/components/Dropdown/styles.ts
@@ -3002,17 +3004,17 @@ var IconButton = styled("button", {
 // src/components/Dropdown/index.tsx
 var import_jsx_runtime35 = require("react/jsx-runtime");
 var Dropdown = ({ children }) => {
-  const childrenArray = import_react16.Children.toArray(children);
+  const childrenArray = import_react17.Children.toArray(children);
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(DropdownMenu2.Root, { modal: false, children: [
     /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Button, { variant: "secondary", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Icon, { name: "Dots", size: 16 }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DropdownMenu2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(StyledContent2, { sideOffset: 5, align: "end", children: childrenArray.map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_react16.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DropdownMenu2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(StyledContent2, { sideOffset: 5, align: "end", children: childrenArray.map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_react17.Fragment, { children: [
       child,
       index < childrenArray.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DropdownSeparator, {})
     ] }, index)) }) })
   ] });
 };
 var DropdownSeparator = StyledSeparator;
-var DropdownItem = import_react16.default.forwardRef(({ children, ...props }, forwardedRef) => {
+var DropdownItem = import_react17.default.forwardRef(({ children, ...props }, forwardedRef) => {
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(StyledItem2, { ...props, ref: forwardedRef, children });
 });
 Dropdown.displayName = "Dropdown";
@@ -3094,7 +3096,7 @@ var Paragraph = (props) => {
 Paragraph.displayName = "Paragraph";
 
 // src/components/Heading.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_jsx_runtime38 = require("react/jsx-runtime");
 var StyledHeading = styled("h2", {
   fontFamily: "$default",
@@ -3126,7 +3128,7 @@ var StyledHeading = styled("h2", {
     size: "md"
   }
 });
-var Heading = (0, import_react17.forwardRef)(
+var Heading = (0, import_react18.forwardRef)(
   function Heading2({ children, bold = false, ...props }, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(StyledHeading, { ref, bold, ...props, children });
   }
@@ -3136,7 +3138,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_react18 = require("react");
+var import_react19 = require("react");
 
 // src/components/Select/styles.ts
 var Select = __toESM(require("@radix-ui/react-select"));
@@ -3269,7 +3271,7 @@ var Span6 = styled("span", {
 
 // src/components/Select/index.tsx
 var import_jsx_runtime39 = require("react/jsx-runtime");
-var Select2 = (0, import_react18.forwardRef)(
+var Select2 = (0, import_react19.forwardRef)(
   ({
     value,
     onValueChange,
@@ -3282,7 +3284,7 @@ var Select2 = (0, import_react18.forwardRef)(
     style,
     ...rest
   }, ref) => {
-    const [open, setOpen] = (0, import_react18.useState)(false);
+    const [open, setOpen] = (0, import_react19.useState)(false);
     return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(StyledWrapper4, { css: css2, className, style, children: [
       label && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Label3, { children: label }),
       /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
@@ -3312,7 +3314,7 @@ var Select2 = (0, import_react18.forwardRef)(
 Select2.displayName = "Select";
 
 // src/components/LabelledValue/index.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 
 // src/components/LabelledValue/styles.ts
 var Container = styled("div", {
@@ -3383,9 +3385,9 @@ var Value2 = styled("div", {
 // src/components/LabelledValue/index.tsx
 var import_jsx_runtime40 = require("react/jsx-runtime");
 function LabelledValue({ position = "vertical", withRow = false, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.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 /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Container, { position, children: import_react20.Children.map(children, (child) => {
+    if ((0, import_react20.isValidElement)(child)) {
+      return (0, import_react20.cloneElement)(child, { position, withRow });
     }
     return child;
   }) });
@@ -3981,7 +3983,7 @@ var MultiStep = ({
 MultiStep.displayName = "MultiStep";
 
 // src/components/Carousel/index.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 
 // src/components/Carousel/styles.ts
 var CarouselContainer = styled("div", {
@@ -4045,7 +4047,20 @@ var Navigation = styled("h3", {
 var CarouselContent = styled("div", {
   width: "100%",
   overflow: "hidden",
-  position: "relative"
+  position: "relative",
+  variants: {
+    variant: {
+      gray: {
+        color: "$black"
+      },
+      purple: {
+        color: "$white",
+        "& *": {
+          color: "$white"
+        }
+      }
+    }
+  }
 });
 var DotsContainer = styled("div", {
   display: "flex",
@@ -4091,17 +4106,18 @@ var Ellipsis = styled("span", {
   alignItems: "center"
 });
 var CarouselItemContainer = styled("div", {
-  width: "100%"
+  width: "100%",
+  color: "inherit"
 });
 
 // src/components/Carousel/index.tsx
 var import_jsx_runtime44 = require("react/jsx-runtime");
 var SWIPE_THRESHOLD = 50;
 var Carousel = ({ title, variant, children }) => {
-  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 items = import_react21.Children.toArray(children);
+  const [activeIndex, setActiveIndex] = (0, import_react21.useState)(0);
+  const [touchStartX, setTouchStartX] = (0, import_react21.useState)(null);
+  const [touchEndX, setTouchEndX] = (0, import_react21.useState)(null);
   const prev = () => {
     setActiveIndex((prevIndex) => prevIndex === 0 ? items.length - 1 : prevIndex - 1);
   };
@@ -4130,7 +4146,7 @@ var Carousel = ({ title, variant, children }) => {
     setTouchEndX(null);
   };
   const activeItem = items[activeIndex];
-  const itemTitle = activeItem.props.title;
+  const itemTitle = activeItem?.props?.title;
   return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
     CarouselContainer,
     {
@@ -4140,8 +4156,8 @@ var Carousel = ({ title, variant, children }) => {
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Wrapper6, { variant, children: [
           /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(CarouselHeader, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Title2, { children: itemTitle ?? title }),
-            /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Navigation, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Title2, { variant, children: itemTitle ?? title }),
+            items.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Navigation, { children: [
               /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
                 Button,
                 {
@@ -4158,7 +4174,7 @@ var Carousel = ({ title, variant, children }) => {
                 {
                   size: "sm",
                   variant: "secondary",
-                  "aria-label": "Previous Slide",
+                  "aria-label": "Next Slide",
                   onClick: next,
                   tabIndex: 0,
                   children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Icon, { name: "TriangleRight", size: 16, color: variant === "purple" ? "white" : "black" })
@@ -4175,8 +4191,9 @@ var Carousel = ({ title, variant, children }) => {
               onTouchStart,
               onTouchMove,
               onTouchEnd,
+              variant,
               children: items.map(
-                (child, index) => (0, import_react20.cloneElement)(child, {
+                (child, index) => (0, import_react21.cloneElement)(child, {
                   "aria-hidden": index !== activeIndex,
                   style: {
                     display: index === activeIndex ? "block" : "none"
@@ -4187,7 +4204,7 @@ var Carousel = ({ title, variant, children }) => {
           )
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Spacing, { size: "md" }),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DotsContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Dots2, { role: "tablist", "aria-label": "Carousel Pagination", children: getPaginationItems(items.length, activeIndex).map(
+        items.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DotsContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Dots2, { role: "tablist", "aria-label": "Carousel Pagination", children: getPaginationItems(items.length, activeIndex).map(
           (page, index) => typeof page === "number" ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
             DotButton,
             {
@@ -4221,7 +4238,7 @@ var CarouselItem = ({ children, style, title, ...props }) => /* @__PURE__ */ (0,
 Carousel.Item = CarouselItem;
 
 // src/components/PasswordInput.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_jsx_runtime45 = require("react/jsx-runtime");
 var ToggleButton = styled("button", {
   all: "unset",
@@ -4237,11 +4254,11 @@ var ToggleButton = styled("button", {
     borderRadius: "$sm"
   }
 });
-var PasswordInput = (0, import_react21.forwardRef)(
+var PasswordInput = (0, import_react22.forwardRef)(
   ({ value, onChange, ...props }, ref) => {
-    const [visible, setVisible] = (0, import_react21.useState)(false);
-    const innerRef = (0, import_react21.useRef)(null);
-    (0, import_react21.useImperativeHandle)(ref, () => innerRef.current);
+    const [visible, setVisible] = (0, import_react22.useState)(false);
+    const innerRef = (0, import_react22.useRef)(null);
+    (0, import_react22.useImperativeHandle)(ref, () => innerRef.current);
     const handleToggleVisibility = () => {
       setVisible((v) => !v);
       setTimeout(() => {
@@ -4277,7 +4294,7 @@ PasswordInput.displayName = "PasswordInput";
 
 // src/components/Accordion/index.tsx
 var RadixAccordion = __toESM(require("@radix-ui/react-accordion"));
-var import_react22 = __toESM(require("react"));
+var import_react23 = __toESM(require("react"));
 
 // src/components/Accordion/styles.ts
 var Accordion = __toESM(require("@radix-ui/react-accordion"));
@@ -4364,7 +4381,7 @@ var OptionsButton = styled(Button, {
 
 // src/components/Accordion/index.tsx
 var import_jsx_runtime46 = require("react/jsx-runtime");
-var Accordion2 = import_react22.default.forwardRef(
+var Accordion2 = import_react23.default.forwardRef(
   ({ title, children, dropdownItems }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AccordionContainer, { type: "single", collapsible: true, ref, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(AccordionItem, { value: "item-1", children: [
       /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(AccordionHeader, { children: [

package/dist/index.mjs

@@ -356,6 +356,9 @@ var Button = forwardRef(function Button2({ children, ...props }, ref) {
 });
 Button.displayName = "Button";
 
+// src/components/Icon/index.tsx
+import { forwardRef as forwardRef2 } from "react";
+
 // src/components/Icon/icons.ts
 import {
   TriangleDownIcon as TriangleDown,
@@ -672,8 +675,8 @@ var Download = (props) => /* @__PURE__ */ jsx16(
       {
         d: "M7.50005 1.04999C7.74858 1.04999 7.95005 1.25146 7.95005 1.49999V8.41359L10.1819 6.18179C10.3576 6.00605 10.6425 6.00605 10.8182 6.18179C10.994 6.35753 10.994 6.64245 10.8182 6.81819L7.81825 9.81819C7.64251 9.99392 7.35759 9.99392 7.18185 9.81819L4.18185 6.81819C4.00611 6.64245 4.00611 6.35753 4.18185 6.18179C4.35759 6.00605 4.64251 6.00605 4.81825 6.18179L7.05005 8.41359V1.49999C7.05005 1.25146 7.25152 1.04999 7.50005 1.04999ZM2.5 10C2.77614 10 3 10.2239 3 10.5V12C3 12.5539 3.44565 13 3.99635 13H11.0012C11.5529 13 12 12.5528 12 12V10.5C12 10.2239 12.2239 10 12.5 10C12.7761 10 13 10.2239 13 10.5V12C13 13.1041 12.1062 14 11.0012 14H3.99635C2.89019 14 2 13.103 2 12V10.5C2 10.2239 2.22386 10 2.5 10Z",
         fill: "currentColor",
-        "fill-rule": "evenodd",
-        "clip-rule": "evenodd"
+        fillRule: "evenodd",
+        clipRule: "evenodd"
       }
     )
   }
@@ -712,24 +715,27 @@ var colorMap = {
   green: "#78CB63",
   white: "#ffffff"
 };
-function Icon({ name, size = 24, color = "black", ...rest }) {
-  const IconComponent = iconMap[name];
-  if (!IconComponent) {
-    console.warn(`Icon "${name}" not found in iconMap`);
-    return null;
-  }
-  const fillColor = colorMap[color];
-  return /* @__PURE__ */ jsx17(
-    IconComponent,
-    {
-      width: size,
-      height: size,
-      style: { color: fillColor },
-      "aria-hidden": true,
-      ...rest
+var Icon = forwardRef2(
+  ({ name, size = 24, color = "black", ...rest }, ref) => {
+    const IconComponent = iconMap[name];
+    if (!IconComponent) {
+      console.warn(`Icon "${name}" not found in iconMap`);
+      return null;
     }
-  );
-}
+    const fillColor = colorMap[color];
+    return /* @__PURE__ */ jsx17(
+      IconComponent,
+      {
+        ref,
+        width: size,
+        height: size,
+        style: { color: fillColor },
+        "aria-hidden": true,
+        ...rest
+      }
+    );
+  }
+);
 Icon.displayName = "Icon";
 
 // src/components/Calendar/styles.ts
@@ -998,7 +1004,7 @@ var Calendar2 = ({ label, onChange }) => {
 };
 
 // src/components/Checkbox/index.tsx
-import { forwardRef as forwardRef2 } from "react";
+import { forwardRef as forwardRef3 } from "react";
 
 // src/components/Checkbox/styles.ts
 import * as Checkbox from "@radix-ui/react-checkbox";
@@ -1115,7 +1121,7 @@ var Span = styled("span", {
 
 // src/components/Checkbox/index.tsx
 import { jsx as jsx19, jsxs as jsxs3 } from "react/jsx-runtime";
-var Checkbox2 = forwardRef2(
+var Checkbox2 = forwardRef3(
   ({ label, checked, onCheckedChange, errorMessage, ...rest }, ref) => {
     return /* @__PURE__ */ jsxs3("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start" }, children: [
       /* @__PURE__ */ jsxs3(StyledWrapper, { hasError: !!errorMessage, children: [
@@ -1141,12 +1147,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 useEffect4, useImperativeHandle, useRef as useRef4, useState as useState4 } from "react";
+import { forwardRef as forwardRef5, 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, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+import React, { forwardRef as forwardRef4, useRef as useRef2 } from "react";
 
 // src/components/Input/styles.ts
 var StyledWrapper2 = styled("div", {
@@ -1285,7 +1291,7 @@ var CharCounter = styled(Span2, {
 
 // src/components/Input/index.tsx
 import { jsx as jsx20, jsxs as jsxs4 } from "react/jsx-runtime";
-var Input2 = forwardRef3(
+var Input2 = forwardRef4(
   ({ prefix, suffix, label, maxLength, showCounter = false, errorMessage, noMargin = false, redBorder, ...props }, forwardedRef) => {
     const getDisplayValue = (value) => {
       const stringValue = String(value || "");
@@ -1294,19 +1300,15 @@ var Input2 = forwardRef3(
       }
       return stringValue;
     };
-    const [displayValue, setDisplayValue] = useState2(getDisplayValue(props.value));
-    const [charCount, setCharCount] = useState2(getDisplayValue(props.value).length);
     const localInputRef = useRef2(null);
     const inputRef = forwardedRef || localInputRef;
-    useEffect2(() => {
-      const newDisplayValue = getDisplayValue(props.value);
-      if (newDisplayValue !== displayValue) {
-        setDisplayValue(newDisplayValue);
-        setCharCount(newDisplayValue.length);
-      }
-    }, [props.value, prefix, displayValue]);
+    const displayValue = getDisplayValue(props.value);
+    const charCount = displayValue.length;
     const handleChange = (e) => {
-      let currentDisplayValue = getDisplayValue(e.target.value);
+      let currentDisplayValue = e.target.value;
+      if (prefix && currentDisplayValue.startsWith(prefix)) {
+        currentDisplayValue = currentDisplayValue.substring(prefix.length);
+      }
       if (props.type === "number") {
         currentDisplayValue = currentDisplayValue.replace(/[^0-9]/g, "");
       }
@@ -1678,7 +1680,7 @@ var datePickerStyles = globalCss({
 import { jsx as jsx23, jsxs as jsxs6 } from "react/jsx-runtime";
 datePickerStyles();
 var oneYearMore = new Date((/* @__PURE__ */ new Date()).getFullYear() + 1, 11);
-var Datepicker = forwardRef4(({ label, placeholder, value, onChange, errorMessage, endDate = oneYearMore }, ref) => {
+var Datepicker = forwardRef5(({ label, placeholder, value, onChange, errorMessage, endDate = oneYearMore }, ref) => {
   const [selected, setSelected] = useState4(void 0);
   const [month, setMonth] = useState4(/* @__PURE__ */ new Date());
   const [open, setOpen] = useState4(false);
@@ -1763,7 +1765,7 @@ var Datepicker = forwardRef4(({ label, placeholder, value, onChange, errorMessag
 Datepicker.displayName = "Datepicker";
 
 // src/components/Hr.tsx
-import { forwardRef as forwardRef5 } from "react";
+import { forwardRef as forwardRef6 } from "react";
 import { jsx as jsx24 } from "react/jsx-runtime";
 var StyledHr = styled("hr", {
   border: "none",
@@ -1780,7 +1782,7 @@ var StyledHr = styled("hr", {
     }
   }
 });
-var Hr = forwardRef5(function Hr2({ children, ...props }, ref) {
+var Hr = forwardRef6(function Hr2({ children, ...props }, ref) {
   return /* @__PURE__ */ jsx24(StyledHr, { ref, ...props, children });
 });
 Hr.displayName = "Hr";
@@ -1936,7 +1938,7 @@ var ProgressBar = ({ label, value = 0, max = 100, ...rest }) => {
 ProgressBar.displayName = "ProgressBar";
 
 // src/components/Radio/index.tsx
-import { forwardRef as forwardRef6 } from "react";
+import { forwardRef as forwardRef7 } from "react";
 
 // src/components/Radio/styles.ts
 import * as RadioGroup from "@radix-ui/react-radio-group";
@@ -2031,7 +2033,7 @@ var Span3 = styled("span", {
 
 // src/components/Radio/index.tsx
 import { jsx as jsx27, jsxs as jsxs9 } from "react/jsx-runtime";
-var Radio = forwardRef6(({
+var Radio = forwardRef7(({
   labels,
   value,
   onChange,
@@ -2087,7 +2089,7 @@ var Spacing = ({ size, axis = "vertical" }) => {
 };
 
 // src/components/Switch/index.tsx
-import { forwardRef as forwardRef7 } from "react";
+import { forwardRef as forwardRef8 } from "react";
 
 // src/components/Switch/styles.ts
 import * as Switch from "@radix-ui/react-switch";
@@ -2185,7 +2187,7 @@ var Span4 = styled("span", {
 
 // src/components/Switch/index.tsx
 import { jsx as jsx29, jsxs as jsxs10 } from "react/jsx-runtime";
-var Switch2 = forwardRef7(({
+var Switch2 = forwardRef8(({
   label,
   checked,
   defaultChecked,
@@ -2359,7 +2361,7 @@ var Tabs2 = ({ defaultValue, colorContent, children, value, onValueChange }) =>
       value,
       onValueChange,
       children: [
-        /* @__PURE__ */ jsxs11("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+        /* @__PURE__ */ jsxs11("div", { style: { display: "flex", alignItems: "center", gap: "8px", padding: `${hasOverflow ? "0 1rem" : ""}` }, children: [
           hasOverflow && /* @__PURE__ */ jsx30(
             Button,
             {
@@ -2412,7 +2414,7 @@ var Tabs2 = ({ defaultValue, colorContent, children, value, onValueChange }) =>
 Tabs2.Item = TabsItem;
 
 // src/components/TextArea.tsx
-import { forwardRef as forwardRef8, useEffect as useEffect6, useState as useState7 } from "react";
+import { forwardRef as forwardRef9, useEffect as useEffect6, useState as useState7 } from "react";
 import { jsx as jsx31, jsxs as jsxs12 } from "react/jsx-runtime";
 var Wrapper4 = styled("div", {
   display: "flex",
@@ -2519,7 +2521,7 @@ var CharCounter2 = styled(Span5, {
     }
   }
 });
-var TextArea = forwardRef8(
+var TextArea = forwardRef9(
   ({ label, id, htmlFor, errorMessage, maxLength, showCounter = false, ...props }, ref) => {
     const textAreaId = id || htmlFor || `textarea-${crypto.randomUUID()}`;
     const [charCount, setCharCount] = useState7(props.value?.toString().length || 0);
@@ -2728,7 +2730,7 @@ var Loader = ({ show, fullscreen = false }) => {
 Loader.displayName = "Loader";
 
 // src/components/MaskedInput/index.tsx
-import { forwardRef as forwardRef9, useState as useState9, useRef as useRef6 } from "react";
+import { forwardRef as forwardRef10, useState as useState9, useRef as useRef6 } from "react";
 
 // src/components/MaskedInput/utils.ts
 var MAX_LENGTHS = {
@@ -2793,7 +2795,7 @@ var applyMask = (value, maskType) => {
 
 // src/components/MaskedInput/index.tsx
 import { jsx as jsx34 } from "react/jsx-runtime";
-var MaskedInput = forwardRef9(
+var MaskedInput = forwardRef10(
   ({ maskType, onChange, ...props }, ref) => {
     const [value, setValue] = useState9("");
     const inputRef = useRef6(null);
@@ -3024,7 +3026,7 @@ var Paragraph = (props) => {
 Paragraph.displayName = "Paragraph";
 
 // src/components/Heading.tsx
-import { forwardRef as forwardRef10 } from "react";
+import { forwardRef as forwardRef11 } from "react";
 import { jsx as jsx38 } from "react/jsx-runtime";
 var StyledHeading = styled("h2", {
   fontFamily: "$default",
@@ -3056,7 +3058,7 @@ var StyledHeading = styled("h2", {
     size: "md"
   }
 });
-var Heading = forwardRef10(
+var Heading = forwardRef11(
   function Heading2({ children, bold = false, ...props }, ref) {
     return /* @__PURE__ */ jsx38(StyledHeading, { ref, bold, ...props, children });
   }
@@ -3066,7 +3068,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 useState10 } from "react";
+import { forwardRef as forwardRef12, useState as useState10 } from "react";
 
 // src/components/Select/styles.ts
 import * as Select from "@radix-ui/react-select";
@@ -3199,7 +3201,7 @@ var Span6 = styled("span", {
 
 // src/components/Select/index.tsx
 import { jsx as jsx39, jsxs as jsxs15 } from "react/jsx-runtime";
-var Select2 = forwardRef11(
+var Select2 = forwardRef12(
   ({
     value,
     onValueChange,
@@ -3979,7 +3981,20 @@ var Navigation = styled("h3", {
 var CarouselContent = styled("div", {
   width: "100%",
   overflow: "hidden",
-  position: "relative"
+  position: "relative",
+  variants: {
+    variant: {
+      gray: {
+        color: "$black"
+      },
+      purple: {
+        color: "$white",
+        "& *": {
+          color: "$white"
+        }
+      }
+    }
+  }
 });
 var DotsContainer = styled("div", {
   display: "flex",
@@ -4025,7 +4040,8 @@ var Ellipsis = styled("span", {
   alignItems: "center"
 });
 var CarouselItemContainer = styled("div", {
-  width: "100%"
+  width: "100%",
+  color: "inherit"
 });
 
 // src/components/Carousel/index.tsx
@@ -4064,7 +4080,7 @@ var Carousel = ({ title, variant, children }) => {
     setTouchEndX(null);
   };
   const activeItem = items[activeIndex];
-  const itemTitle = activeItem.props.title;
+  const itemTitle = activeItem?.props?.title;
   return /* @__PURE__ */ jsxs20(
     CarouselContainer,
     {
@@ -4074,8 +4090,8 @@ var Carousel = ({ title, variant, children }) => {
       children: [
         /* @__PURE__ */ jsxs20(Wrapper6, { variant, children: [
           /* @__PURE__ */ jsxs20(CarouselHeader, { children: [
-            /* @__PURE__ */ jsx44(Title2, { children: itemTitle ?? title }),
-            /* @__PURE__ */ jsxs20(Navigation, { children: [
+            /* @__PURE__ */ jsx44(Title2, { variant, children: itemTitle ?? title }),
+            items.length > 0 && /* @__PURE__ */ jsxs20(Navigation, { children: [
               /* @__PURE__ */ jsx44(
                 Button,
                 {
@@ -4092,7 +4108,7 @@ var Carousel = ({ title, variant, children }) => {
                 {
                   size: "sm",
                   variant: "secondary",
-                  "aria-label": "Previous Slide",
+                  "aria-label": "Next Slide",
                   onClick: next,
                   tabIndex: 0,
                   children: /* @__PURE__ */ jsx44(Icon, { name: "TriangleRight", size: 16, color: variant === "purple" ? "white" : "black" })
@@ -4109,6 +4125,7 @@ var Carousel = ({ title, variant, children }) => {
               onTouchStart,
               onTouchMove,
               onTouchEnd,
+              variant,
               children: items.map(
                 (child, index) => cloneElement2(child, {
                   "aria-hidden": index !== activeIndex,
@@ -4121,7 +4138,7 @@ var Carousel = ({ title, variant, children }) => {
           )
         ] }),
         /* @__PURE__ */ jsx44(Spacing, { size: "md" }),
-        /* @__PURE__ */ jsx44(DotsContainer, { children: /* @__PURE__ */ jsx44(Dots2, { role: "tablist", "aria-label": "Carousel Pagination", children: getPaginationItems(items.length, activeIndex).map(
+        items.length > 0 && /* @__PURE__ */ jsx44(DotsContainer, { children: /* @__PURE__ */ jsx44(Dots2, { role: "tablist", "aria-label": "Carousel Pagination", children: getPaginationItems(items.length, activeIndex).map(
           (page, index) => typeof page === "number" ? /* @__PURE__ */ jsx44(
             DotButton,
             {
@@ -4155,7 +4172,7 @@ var CarouselItem = ({ children, style, title, ...props }) => /* @__PURE__ */ jsx
 Carousel.Item = CarouselItem;
 
 // src/components/PasswordInput.tsx
-import { forwardRef as forwardRef12, useImperativeHandle as useImperativeHandle2, useRef as useRef7, useState as useState13 } from "react";
+import { forwardRef as forwardRef13, useImperativeHandle as useImperativeHandle2, useRef as useRef7, useState as useState13 } from "react";
 import { jsx as jsx45 } from "react/jsx-runtime";
 var ToggleButton = styled("button", {
   all: "unset",
@@ -4171,7 +4188,7 @@ var ToggleButton = styled("button", {
     borderRadius: "$sm"
   }
 });
-var PasswordInput = forwardRef12(
+var PasswordInput = forwardRef13(
   ({ value, onChange, ...props }, ref) => {
     const [visible, setVisible] = useState13(false);
     const innerRef = useRef7(null);

package/package.json

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