@clickpalm/react 1.2.9 → 1.2.11

package/dist/index.d.ts

@@ -2311,8 +2311,9 @@ interface DatePickerInputProps {
     label: string;
     value?: string;
     onChange: (date: string) => void;
+    errorMessage?: string;
 }
-declare const Datepicker: ({ label, value, onChange }: DatePickerInputProps) => react_jsx_runtime.JSX.Element;
+declare const Datepicker: react.ForwardRefExoticComponent<DatePickerInputProps & react.RefAttributes<HTMLInputElement>>;
 
 declare const StyledHr: _stitches_react_types_styled_component.StyledComponent<"hr", {
     variant?: "gray" | "purple" | undefined;

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_react4 = require("react");
+var import_react3 = require("react");
 var import_react_day_picker = require("react-day-picker");
 var import_style = require("react-day-picker/dist/style.css");
 
@@ -751,7 +751,6 @@ var iconMap = {
 };
 
 // src/components/Icon/index.tsx
-var import_react3 = require("react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var colorMap = {
   black: "#000000",
@@ -764,7 +763,7 @@ function Icon({ name, size = 24, color = "black", ...rest }) {
     console.warn(`Icon "${name}" not found in iconMap`);
     return null;
   }
-  const fillColor = (0, import_react3.useMemo)(() => colorMap[color], [color]);
+  const fillColor = colorMap[color];
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     IconComponent,
     {
@@ -975,9 +974,9 @@ var StyledLabel = styled("label", {
 var import_jsx_runtime17 = require("react/jsx-runtime");
 calendarStyles();
 var Calendar2 = ({ label, onChange }) => {
-  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 [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 handleDaySelect = (date) => {
     setSelected(date);
     if (date) {
@@ -985,7 +984,7 @@ var Calendar2 = ({ label, onChange }) => {
       onChange(formatted);
     }
   };
-  (0, import_react4.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (selected) {
       setMonth(selected);
     }
@@ -1044,7 +1043,7 @@ var Calendar2 = ({ label, onChange }) => {
 };
 
 // src/components/Checkbox/index.tsx
-var import_react5 = require("react");
+var import_react4 = require("react");
 
 // src/components/Checkbox/styles.ts
 var Checkbox = __toESM(require("@radix-ui/react-checkbox"));
@@ -1161,7 +1160,7 @@ var Span = styled("span", {
 
 // src/components/Checkbox/index.tsx
 var import_jsx_runtime18 = require("react/jsx-runtime");
-var Checkbox2 = (0, import_react5.forwardRef)(
+var Checkbox2 = (0, import_react4.forwardRef)(
   ({ label, checked, onCheckedChange, errorMessage, ...rest }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start" }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(StyledWrapper, { hasError: !!errorMessage, children: [
@@ -1187,12 +1186,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_react6 = 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_react6 = __toESM(require("react"));
+var import_react5 = __toESM(require("react"));
 
 // src/components/Input/styles.ts
 var StyledWrapper2 = styled("div", {
@@ -1290,15 +1289,15 @@ var Span2 = styled("span", {
 
 // src/components/Input/index.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
-var Input2 = (0, import_react6.forwardRef)(
+var Input2 = (0, import_react5.forwardRef)(
   ({ prefix, suffix, label, errorMessage, noMargin = false, ...props }, forwardedRef) => {
-    const localInputRef = (0, import_react6.useRef)(null);
+    const localInputRef = (0, import_react5.useRef)(null);
     const inputRef = forwardedRef || localInputRef;
     const handleContainerClick = () => {
       inputRef?.current?.focus();
     };
     const isButtonElement = (node) => {
-      if (!import_react6.default.isValidElement(node))
+      if (!import_react5.default.isValidElement(node))
         return false;
       const type = node.type;
       return type?.displayName === "Button";
@@ -1389,12 +1388,13 @@ var datePickerStyles = globalCss({
 // src/components/Datepicker/index.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
 datePickerStyles();
-var Datepicker = ({ label, value, onChange }) => {
-  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);
+var Datepicker = (0, import_react6.forwardRef)(({ label, value, onChange, errorMessage }, ref) => {
+  const [selected, setSelected] = (0, import_react6.useState)(void 0);
+  const [month, setMonth] = (0, import_react6.useState)(/* @__PURE__ */ new Date());
+  const [open, setOpen] = (0, import_react6.useState)(false);
+  const inputRef = (0, import_react6.useRef)(null);
+  const calendarRef = (0, import_react6.useRef)(null);
+  (0, import_react6.useImperativeHandle)(ref, () => inputRef.current);
   const handleDaySelect = (date) => {
     setSelected(date);
     if (date) {
@@ -1403,7 +1403,7 @@ var Datepicker = ({ label, value, onChange }) => {
     }
     setOpen(false);
   };
-  (0, import_react7.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     const handleClickOutside = (event) => {
       if (calendarRef.current && !calendarRef.current.contains(event.target) && inputRef.current && !inputRef.current.contains(event.target)) {
         setOpen(false);
@@ -1412,7 +1412,7 @@ var Datepicker = ({ label, value, onChange }) => {
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (!open && selected) {
       setMonth(selected);
     }
@@ -1427,7 +1427,8 @@ var Datepicker = ({ label, value, onChange }) => {
         onFocus: () => setOpen(true),
         value: value || "",
         readOnly: true,
-        suffix: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { name: "Calendar", size: 16 })
+        suffix: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { name: "Calendar", size: 16 }),
+        errorMessage
       }
     ),
     open && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
@@ -1472,10 +1473,11 @@ var Datepicker = ({ label, value, onChange }) => {
       }
     )
   ] });
-};
+});
+Datepicker.displayName = "Datepicker";
 
 // src/components/Hr.tsx
-var import_react8 = require("react");
+var import_react7 = require("react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var StyledHr = styled("hr", {
   border: "none",
@@ -1492,7 +1494,7 @@ var StyledHr = styled("hr", {
     }
   }
 });
-var Hr = (0, import_react8.forwardRef)(function Hr2({ children, ...props }, ref) {
+var Hr = (0, import_react7.forwardRef)(function Hr2({ children, ...props }, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(StyledHr, { ref, ...props, children });
 });
 Hr.displayName = "Hr";
@@ -1589,7 +1591,7 @@ var Modal = ({ open, onOpenChange, title, description, children }) => {
 };
 
 // src/components/ProgressBar/index.tsx
-var import_react9 = require("react");
+var import_react8 = require("react");
 
 // src/components/ProgressBar/styles.ts
 var Progress = __toESM(require("@radix-ui/react-progress"));
@@ -1621,8 +1623,8 @@ var StyledIndicator = styled(Progress.Indicator, {
 // src/components/ProgressBar/index.tsx
 var import_jsx_runtime23 = 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_react8.useState)(0);
+  (0, import_react8.useEffect)(() => {
     const timer = setTimeout(() => setProgress(value), 500);
     return () => clearTimeout(timer);
   }, [value]);
@@ -1648,7 +1650,7 @@ var ProgressBar = ({ label, value = 0, max = 100, ...rest }) => {
 ProgressBar.displayName = "ProgressBar";
 
 // src/components/Radio/index.tsx
-var import_react10 = require("react");
+var import_react9 = require("react");
 
 // src/components/Radio/styles.ts
 var RadioGroup = __toESM(require("@radix-ui/react-radio-group"));
@@ -1743,7 +1745,7 @@ var Span3 = styled("span", {
 
 // src/components/Radio/index.tsx
 var import_jsx_runtime24 = require("react/jsx-runtime");
-var Radio = (0, import_react10.forwardRef)(({
+var Radio = (0, import_react9.forwardRef)(({
   labels,
   value,
   onChange,
@@ -1799,7 +1801,7 @@ var Spacing = ({ size, axis = "vertical" }) => {
 };
 
 // src/components/Switch/index.tsx
-var import_react11 = require("react");
+var import_react10 = require("react");
 
 // src/components/Switch/styles.ts
 var Switch = __toESM(require("@radix-ui/react-switch"));
@@ -1897,7 +1899,7 @@ var Span4 = styled("span", {
 
 // src/components/Switch/index.tsx
 var import_jsx_runtime26 = require("react/jsx-runtime");
-var Switch2 = (0, import_react11.forwardRef)(({
+var Switch2 = (0, import_react10.forwardRef)(({
   label,
   checked,
   defaultChecked,
@@ -1931,7 +1933,7 @@ var Switch2 = (0, import_react11.forwardRef)(({
 Switch2.displayName = "Switch";
 
 // src/components/Tabs/index.tsx
-var import_react12 = require("react");
+var import_react11 = require("react");
 
 // src/components/Tabs/styles.ts
 var Tabs = __toESM(require("@radix-ui/react-tabs"));
@@ -2018,17 +2020,17 @@ var TabsItem = ({ children }) => {
 };
 var Tabs2 = ({ defaultValue, colorContent, children }) => {
   const items = [];
-  const childrenArray = import_react12.Children.toArray(children);
+  const childrenArray = import_react11.Children.toArray(children);
   childrenArray.forEach((child) => {
-    if ((0, import_react12.isValidElement)(child) && child.type === TabsItem) {
+    if ((0, import_react11.isValidElement)(child) && child.type === TabsItem) {
       const { value, label, children: content } = child.props;
       items.push({ value, label, 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_react11.useRef)(null);
+  const rootRef = (0, import_react11.useRef)(null);
+  const hasOverflowRef = (0, import_react11.useRef)(false);
+  const [hasOverflow, setHasOverflow] = (0, import_react11.useState)(false);
   const checkOverflow = () => {
     const listEl = listRef.current;
     const rootEl = rootRef.current;
@@ -2043,7 +2045,7 @@ var Tabs2 = ({ defaultValue, colorContent, children }) => {
       setHasOverflow(overflow);
     }
   };
-  (0, import_react12.useLayoutEffect)(() => {
+  (0, import_react11.useLayoutEffect)(() => {
     checkOverflow();
     const resizeObserver = new ResizeObserver(checkOverflow);
     if (listRef.current) {
@@ -2122,7 +2124,7 @@ var Tabs2 = ({ defaultValue, colorContent, children }) => {
 Tabs2.Item = TabsItem;
 
 // src/components/TextArea.tsx
-var import_react13 = require("react");
+var import_react12 = require("react");
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var Wrapper4 = styled("div", {
   display: "flex",
@@ -2198,7 +2200,7 @@ var Span5 = styled("span", {
   marginTop: "2px",
   marginBottom: "$6"
 });
-var TextArea = (0, import_react13.forwardRef)(
+var TextArea = (0, import_react12.forwardRef)(
   ({ label, id, htmlFor, errorMessage, ...props }, ref) => {
     const textAreaId = id || htmlFor || `textarea-${crypto.randomUUID()}`;
     return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Wrapper4, { children: [
@@ -2374,7 +2376,7 @@ var Loader = ({ show, fullscreen = false }) => {
 Loader.displayName = "Loader";
 
 // src/components/MaskedInput/index.tsx
-var import_react14 = require("react");
+var import_react13 = require("react");
 
 // src/components/MaskedInput/utils.ts
 var MAX_LENGTHS = {
@@ -2439,10 +2441,10 @@ var applyMask = (value, maskType) => {
 
 // src/components/MaskedInput/index.tsx
 var import_jsx_runtime31 = require("react/jsx-runtime");
-var MaskedInput = (0, import_react14.forwardRef)(
+var MaskedInput = (0, import_react13.forwardRef)(
   ({ maskType, onChange, ...props }, ref) => {
-    const [value, setValue] = (0, import_react14.useState)("");
-    const inputRef = (0, import_react14.useRef)(null);
+    const [value, setValue] = (0, import_react13.useState)("");
+    const inputRef = (0, import_react13.useRef)(null);
     const handleChange = (e) => {
       const { value: inputValue, selectionStart } = e.target;
       const isBackspace = value.length > inputValue.length;
@@ -2490,7 +2492,7 @@ var MaskedInput = (0, import_react14.forwardRef)(
 MaskedInput.displayName = "MaskedInput";
 
 // src/components/Dropdown/index.tsx
-var import_react15 = __toESM(require("react"));
+var import_react14 = __toESM(require("react"));
 var DropdownMenu2 = __toESM(require("@radix-ui/react-dropdown-menu"));
 
 // src/components/Dropdown/styles.ts
@@ -2576,17 +2578,17 @@ var IconButton = styled("button", {
 // src/components/Dropdown/index.tsx
 var import_jsx_runtime32 = require("react/jsx-runtime");
 var Dropdown = ({ children }) => {
-  const childrenArray = import_react15.Children.toArray(children);
+  const childrenArray = import_react14.Children.toArray(children);
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(DropdownMenu2.Root, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Button, { variant: "secondary", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon, { name: "Dots", size: 16 }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DropdownMenu2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(StyledContent2, { sideOffset: 5, align: "end", children: childrenArray.map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react15.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DropdownMenu2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(StyledContent2, { sideOffset: 5, align: "end", children: childrenArray.map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react14.Fragment, { children: [
       child,
       index < childrenArray.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DropdownSeparator, {})
     ] }, index)) }) })
   ] });
 };
 var DropdownSeparator = StyledSeparator;
-var DropdownItem = import_react15.default.forwardRef(({ children, ...props }, forwardedRef) => {
+var DropdownItem = import_react14.default.forwardRef(({ children, ...props }, forwardedRef) => {
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(StyledItem2, { ...props, ref: forwardedRef, children });
 });
 Dropdown.displayName = "Dropdown";
@@ -2668,7 +2670,7 @@ var Paragraph = (props) => {
 Paragraph.displayName = "Paragraph";
 
 // src/components/Heading.tsx
-var import_react16 = require("react");
+var import_react15 = require("react");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 var StyledHeading = styled("h2", {
   fontFamily: "$default",
@@ -2691,7 +2693,7 @@ var StyledHeading = styled("h2", {
     size: "md"
   }
 });
-var Heading = (0, import_react16.forwardRef)(function Heading2({ children, ...props }, ref) {
+var Heading = (0, import_react15.forwardRef)(function Heading2({ children, ...props }, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(StyledHeading, { ref, ...props, children });
 });
 Heading.displayName = "Heading";
@@ -2699,7 +2701,7 @@ Heading.displayName = "Heading";
 // src/components/Select/index.tsx
 var import_react_icons2 = require("@radix-ui/react-icons");
 var CustomSelect = __toESM(require("@radix-ui/react-select"));
-var import_react17 = require("react");
+var import_react16 = require("react");
 
 // src/components/Select/styles.ts
 var Select = __toESM(require("@radix-ui/react-select"));
@@ -2820,7 +2822,7 @@ var Span6 = styled("span", {
 
 // src/components/Select/index.tsx
 var import_jsx_runtime36 = require("react/jsx-runtime");
-var Select2 = (0, import_react17.forwardRef)(
+var Select2 = (0, import_react16.forwardRef)(
   ({
     value,
     onValueChange,
@@ -2833,7 +2835,7 @@ var Select2 = (0, import_react17.forwardRef)(
     style,
     ...rest
   }, ref) => {
-    const [open, setOpen] = (0, import_react17.useState)(false);
+    const [open, setOpen] = (0, import_react16.useState)(false);
     return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(StyledWrapper4, { css: css2, className, style, children: [
       label && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Label3, { children: label }),
       /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
@@ -2863,7 +2865,7 @@ var Select2 = (0, import_react17.forwardRef)(
 Select2.displayName = "Select";
 
 // src/components/LabelledValue/index.tsx
-var import_react18 = require("react");
+var import_react17 = require("react");
 
 // src/components/LabelledValue/styles.ts
 var Container = styled("div", {
@@ -2926,9 +2928,9 @@ var Value2 = styled("div", {
 // src/components/LabelledValue/index.tsx
 var import_jsx_runtime37 = require("react/jsx-runtime");
 function LabelledValue({ position = "vertical", withRow = false, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.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_runtime37.jsx)(Container, { position, children: import_react17.Children.map(children, (child) => {
+    if ((0, import_react17.isValidElement)(child)) {
+      return (0, import_react17.cloneElement)(child, { position, withRow });
     }
     return child;
   }) });
@@ -3524,7 +3526,7 @@ var MultiStep = ({
 MultiStep.displayName = "MultiStep";
 
 // src/components/Carousel/index.tsx
-var import_react19 = require("react");
+var import_react18 = require("react");
 
 // src/components/Carousel/styles.ts
 var CarouselContainer = styled("div", {
@@ -3635,10 +3637,10 @@ var CarouselItemContainer = styled("div", {
 var import_jsx_runtime41 = 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_react18.Children.toArray(children);
+  const [activeIndex, setActiveIndex] = (0, import_react18.useState)(0);
+  const [touchStartX, setTouchStartX] = (0, import_react18.useState)(null);
+  const [touchEndX, setTouchEndX] = (0, import_react18.useState)(null);
   const prev = () => {
     setActiveIndex((prevIndex) => prevIndex === 0 ? items.length - 1 : prevIndex - 1);
   };
@@ -3711,7 +3713,7 @@ var Carousel = ({ title, variant, children }) => {
               onTouchMove,
               onTouchEnd,
               children: items.map(
-                (child, index) => (0, import_react19.cloneElement)(child, {
+                (child, index) => (0, import_react18.cloneElement)(child, {
                   "aria-hidden": index !== activeIndex,
                   style: {
                     display: index === activeIndex ? "block" : "none"
@@ -3742,7 +3744,7 @@ var CarouselItem = ({ children, style, ...props }) => /* @__PURE__ */ (0, import
 Carousel.Item = CarouselItem;
 
 // src/components/PasswordInput.tsx
-var import_react20 = require("react");
+var import_react19 = require("react");
 var import_jsx_runtime42 = require("react/jsx-runtime");
 var ToggleButton = styled("button", {
   all: "unset",
@@ -3758,11 +3760,11 @@ var ToggleButton = styled("button", {
     borderRadius: "$sm"
   }
 });
-var PasswordInput = (0, import_react20.forwardRef)(
+var PasswordInput = (0, import_react19.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_react19.useState)(false);
+    const innerRef = (0, import_react19.useRef)(null);
+    (0, import_react19.useImperativeHandle)(ref, () => innerRef.current);
     const handleToggleVisibility = () => {
       setVisible((v) => !v);
       setTimeout(() => {
@@ -3798,7 +3800,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_react20 = __toESM(require("react"));
 
 // src/components/Accordion/styles.ts
 var Accordion = __toESM(require("@radix-ui/react-accordion"));
@@ -3880,7 +3882,7 @@ var OptionsButton = styled(Button, {
 
 // src/components/Accordion/index.tsx
 var import_jsx_runtime43 = require("react/jsx-runtime");
-var Accordion2 = import_react21.default.forwardRef(
+var Accordion2 = import_react20.default.forwardRef(
   ({ title, children, dropdownItems }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(AccordionContainer, { type: "single", collapsible: true, ref, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(AccordionItem, { value: "item-1", children: [
       /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(AccordionHeader, { children: [

package/dist/index.mjs

@@ -680,7 +680,6 @@ var iconMap = {
 };
 
 // src/components/Icon/index.tsx
-import { useMemo } from "react";
 import { jsx as jsx16 } from "react/jsx-runtime";
 var colorMap = {
   black: "#000000",
@@ -693,7 +692,7 @@ function Icon({ name, size = 24, color = "black", ...rest }) {
     console.warn(`Icon "${name}" not found in iconMap`);
     return null;
   }
-  const fillColor = useMemo(() => colorMap[color], [color]);
+  const fillColor = colorMap[color];
   return /* @__PURE__ */ jsx16(
     IconComponent,
     {
@@ -1116,7 +1115,7 @@ Checkbox2.displayName = "Checkbox";
 // src/components/Datepicker/index.tsx
 import { format as format2 } from "date-fns";
 import { ptBR as ptBR2 } from "date-fns/locale";
-import { useEffect as useEffect2, useRef as useRef3, useState as useState2 } from "react";
+import { forwardRef as forwardRef4, useEffect as useEffect2, useImperativeHandle, useRef as useRef3, useState as useState2 } from "react";
 import { DayPicker as DayPicker2 } from "react-day-picker";
 import "react-day-picker/dist/style.css";
 
@@ -1318,12 +1317,13 @@ var datePickerStyles = globalCss({
 // src/components/Datepicker/index.tsx
 import { jsx as jsx20, jsxs as jsxs5 } from "react/jsx-runtime";
 datePickerStyles();
-var Datepicker = ({ label, value, onChange }) => {
+var Datepicker = forwardRef4(({ label, value, onChange, errorMessage }, ref) => {
   const [selected, setSelected] = useState2(void 0);
   const [month, setMonth] = useState2(/* @__PURE__ */ new Date());
   const [open, setOpen] = useState2(false);
   const inputRef = useRef3(null);
   const calendarRef = useRef3(null);
+  useImperativeHandle(ref, () => inputRef.current);
   const handleDaySelect = (date) => {
     setSelected(date);
     if (date) {
@@ -1356,7 +1356,8 @@ var Datepicker = ({ label, value, onChange }) => {
         onFocus: () => setOpen(true),
         value: value || "",
         readOnly: true,
-        suffix: /* @__PURE__ */ jsx20(Icon, { name: "Calendar", size: 16 })
+        suffix: /* @__PURE__ */ jsx20(Icon, { name: "Calendar", size: 16 }),
+        errorMessage
       }
     ),
     open && /* @__PURE__ */ jsx20(
@@ -1401,10 +1402,11 @@ var Datepicker = ({ label, value, onChange }) => {
       }
     )
   ] });
-};
+});
+Datepicker.displayName = "Datepicker";
 
 // src/components/Hr.tsx
-import { forwardRef as forwardRef4 } from "react";
+import { forwardRef as forwardRef5 } from "react";
 import { jsx as jsx21 } from "react/jsx-runtime";
 var StyledHr = styled("hr", {
   border: "none",
@@ -1421,7 +1423,7 @@ var StyledHr = styled("hr", {
     }
   }
 });
-var Hr = forwardRef4(function Hr2({ children, ...props }, ref) {
+var Hr = forwardRef5(function Hr2({ children, ...props }, ref) {
   return /* @__PURE__ */ jsx21(StyledHr, { ref, ...props, children });
 });
 Hr.displayName = "Hr";
@@ -1577,7 +1579,7 @@ var ProgressBar = ({ label, value = 0, max = 100, ...rest }) => {
 ProgressBar.displayName = "ProgressBar";
 
 // src/components/Radio/index.tsx
-import { forwardRef as forwardRef5 } from "react";
+import { forwardRef as forwardRef6 } from "react";
 
 // src/components/Radio/styles.ts
 import * as RadioGroup from "@radix-ui/react-radio-group";
@@ -1672,7 +1674,7 @@ var Span3 = styled("span", {
 
 // src/components/Radio/index.tsx
 import { jsx as jsx24, jsxs as jsxs8 } from "react/jsx-runtime";
-var Radio = forwardRef5(({
+var Radio = forwardRef6(({
   labels,
   value,
   onChange,
@@ -1728,7 +1730,7 @@ var Spacing = ({ size, axis = "vertical" }) => {
 };
 
 // src/components/Switch/index.tsx
-import { forwardRef as forwardRef6 } from "react";
+import { forwardRef as forwardRef7 } from "react";
 
 // src/components/Switch/styles.ts
 import * as Switch from "@radix-ui/react-switch";
@@ -1826,7 +1828,7 @@ var Span4 = styled("span", {
 
 // src/components/Switch/index.tsx
 import { jsx as jsx26, jsxs as jsxs9 } from "react/jsx-runtime";
-var Switch2 = forwardRef6(({
+var Switch2 = forwardRef7(({
   label,
   checked,
   defaultChecked,
@@ -2051,7 +2053,7 @@ var Tabs2 = ({ defaultValue, colorContent, children }) => {
 Tabs2.Item = TabsItem;
 
 // src/components/TextArea.tsx
-import { forwardRef as forwardRef7 } from "react";
+import { forwardRef as forwardRef8 } from "react";
 import { jsx as jsx28, jsxs as jsxs11 } from "react/jsx-runtime";
 var Wrapper4 = styled("div", {
   display: "flex",
@@ -2127,7 +2129,7 @@ var Span5 = styled("span", {
   marginTop: "2px",
   marginBottom: "$6"
 });
-var TextArea = forwardRef7(
+var TextArea = forwardRef8(
   ({ label, id, htmlFor, errorMessage, ...props }, ref) => {
     const textAreaId = id || htmlFor || `textarea-${crypto.randomUUID()}`;
     return /* @__PURE__ */ jsxs11(Wrapper4, { children: [
@@ -2303,7 +2305,7 @@ var Loader = ({ show, fullscreen = false }) => {
 Loader.displayName = "Loader";
 
 // src/components/MaskedInput/index.tsx
-import { forwardRef as forwardRef8, useState as useState5, useRef as useRef5 } from "react";
+import { forwardRef as forwardRef9, useState as useState5, useRef as useRef5 } from "react";
 
 // src/components/MaskedInput/utils.ts
 var MAX_LENGTHS = {
@@ -2368,7 +2370,7 @@ var applyMask = (value, maskType) => {
 
 // src/components/MaskedInput/index.tsx
 import { jsx as jsx31 } from "react/jsx-runtime";
-var MaskedInput = forwardRef8(
+var MaskedInput = forwardRef9(
   ({ maskType, onChange, ...props }, ref) => {
     const [value, setValue] = useState5("");
     const inputRef = useRef5(null);
@@ -2597,7 +2599,7 @@ var Paragraph = (props) => {
 Paragraph.displayName = "Paragraph";
 
 // src/components/Heading.tsx
-import { forwardRef as forwardRef9 } from "react";
+import { forwardRef as forwardRef10 } from "react";
 import { jsx as jsx35 } from "react/jsx-runtime";
 var StyledHeading = styled("h2", {
   fontFamily: "$default",
@@ -2620,7 +2622,7 @@ var StyledHeading = styled("h2", {
     size: "md"
   }
 });
-var Heading = forwardRef9(function Heading2({ children, ...props }, ref) {
+var Heading = forwardRef10(function Heading2({ children, ...props }, ref) {
   return /* @__PURE__ */ jsx35(StyledHeading, { ref, ...props, children });
 });
 Heading.displayName = "Heading";
@@ -2628,7 +2630,7 @@ Heading.displayName = "Heading";
 // src/components/Select/index.tsx
 import { TriangleDownIcon, TriangleUpIcon } from "@radix-ui/react-icons";
 import * as CustomSelect from "@radix-ui/react-select";
-import { forwardRef as forwardRef10, useState as useState6 } from "react";
+import { forwardRef as forwardRef11, useState as useState6 } from "react";
 
 // src/components/Select/styles.ts
 import * as Select from "@radix-ui/react-select";
@@ -2749,7 +2751,7 @@ var Span6 = styled("span", {
 
 // src/components/Select/index.tsx
 import { jsx as jsx36, jsxs as jsxs14 } from "react/jsx-runtime";
-var Select2 = forwardRef10(
+var Select2 = forwardRef11(
   ({
     value,
     onValueChange,
@@ -3675,7 +3677,7 @@ var CarouselItem = ({ children, style, ...props }) => /* @__PURE__ */ jsx41(Caro
 Carousel.Item = CarouselItem;
 
 // src/components/PasswordInput.tsx
-import { forwardRef as forwardRef11, useImperativeHandle, useRef as useRef6, useState as useState9 } from "react";
+import { forwardRef as forwardRef12, useImperativeHandle as useImperativeHandle2, useRef as useRef6, useState as useState9 } from "react";
 import { jsx as jsx42 } from "react/jsx-runtime";
 var ToggleButton = styled("button", {
   all: "unset",
@@ -3691,11 +3693,11 @@ var ToggleButton = styled("button", {
     borderRadius: "$sm"
   }
 });
-var PasswordInput = forwardRef11(
+var PasswordInput = forwardRef12(
   ({ value, onChange, ...props }, ref) => {
     const [visible, setVisible] = useState9(false);
     const innerRef = useRef6(null);
-    useImperativeHandle(ref, () => innerRef.current);
+    useImperativeHandle2(ref, () => innerRef.current);
     const handleToggleVisibility = () => {
       setVisible((v) => !v);
       setTimeout(() => {

package/package.json

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