@clickpalm/react 1.2.8 → 1.2.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -316,7 +316,7 @@ Avatar2.displayName = "Avatar";
316
316
  // src/components/Calendar/index.tsx
317
317
  var import_date_fns = require("date-fns");
318
318
  var import_locale = require("date-fns/locale");
319
- var import_react4 = require("react");
319
+ var import_react3 = require("react");
320
320
  var import_react_day_picker = require("react-day-picker");
321
321
  var import_style = require("react-day-picker/dist/style.css");
322
322
 
@@ -751,7 +751,6 @@ var iconMap = {
751
751
  };
752
752
 
753
753
  // src/components/Icon/index.tsx
754
- var import_react3 = require("react");
755
754
  var import_jsx_runtime16 = require("react/jsx-runtime");
756
755
  var colorMap = {
757
756
  black: "#000000",
@@ -764,13 +763,13 @@ function Icon({ name, size = 24, color = "black", ...rest }) {
764
763
  console.warn(`Icon "${name}" not found in iconMap`);
765
764
  return null;
766
765
  }
767
- const fillColor = (0, import_react3.useMemo)(() => colorMap[color], [color]);
766
+ const fillColor = colorMap[color];
768
767
  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
769
768
  IconComponent,
770
769
  {
771
770
  width: size,
772
771
  height: size,
773
- fill: fillColor,
772
+ style: { color: fillColor },
774
773
  "aria-hidden": true,
775
774
  ...rest
776
775
  }
@@ -975,9 +974,9 @@ var StyledLabel = styled("label", {
975
974
  var import_jsx_runtime17 = require("react/jsx-runtime");
976
975
  calendarStyles();
977
976
  var Calendar2 = ({ label, onChange }) => {
978
- const [selected, setSelected] = (0, import_react4.useState)(void 0);
979
- const [month, setMonth] = (0, import_react4.useState)(/* @__PURE__ */ new Date());
980
- const [open, setOpen] = (0, import_react4.useState)(true);
977
+ const [selected, setSelected] = (0, import_react3.useState)(void 0);
978
+ const [month, setMonth] = (0, import_react3.useState)(/* @__PURE__ */ new Date());
979
+ const [open, setOpen] = (0, import_react3.useState)(true);
981
980
  const handleDaySelect = (date) => {
982
981
  setSelected(date);
983
982
  if (date) {
@@ -985,7 +984,7 @@ var Calendar2 = ({ label, onChange }) => {
985
984
  onChange(formatted);
986
985
  }
987
986
  };
988
- (0, import_react4.useEffect)(() => {
987
+ (0, import_react3.useEffect)(() => {
989
988
  if (selected) {
990
989
  setMonth(selected);
991
990
  }
@@ -1044,7 +1043,7 @@ var Calendar2 = ({ label, onChange }) => {
1044
1043
  };
1045
1044
 
1046
1045
  // src/components/Checkbox/index.tsx
1047
- var import_react5 = require("react");
1046
+ var import_react4 = require("react");
1048
1047
 
1049
1048
  // src/components/Checkbox/styles.ts
1050
1049
  var Checkbox = __toESM(require("@radix-ui/react-checkbox"));
@@ -1161,7 +1160,7 @@ var Span = styled("span", {
1161
1160
 
1162
1161
  // src/components/Checkbox/index.tsx
1163
1162
  var import_jsx_runtime18 = require("react/jsx-runtime");
1164
- var Checkbox2 = (0, import_react5.forwardRef)(
1163
+ var Checkbox2 = (0, import_react4.forwardRef)(
1165
1164
  ({ label, checked, onCheckedChange, errorMessage, ...rest }, ref) => {
1166
1165
  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start" }, children: [
1167
1166
  /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(StyledWrapper, { hasError: !!errorMessage, children: [
@@ -1187,12 +1186,12 @@ Checkbox2.displayName = "Checkbox";
1187
1186
  // src/components/Datepicker/index.tsx
1188
1187
  var import_date_fns2 = require("date-fns");
1189
1188
  var import_locale2 = require("date-fns/locale");
1190
- var import_react7 = require("react");
1189
+ var import_react6 = require("react");
1191
1190
  var import_react_day_picker2 = require("react-day-picker");
1192
1191
  var import_style2 = require("react-day-picker/dist/style.css");
1193
1192
 
1194
1193
  // src/components/Input/index.tsx
1195
- var import_react6 = __toESM(require("react"));
1194
+ var import_react5 = __toESM(require("react"));
1196
1195
 
1197
1196
  // src/components/Input/styles.ts
1198
1197
  var StyledWrapper2 = styled("div", {
@@ -1290,15 +1289,15 @@ var Span2 = styled("span", {
1290
1289
 
1291
1290
  // src/components/Input/index.tsx
1292
1291
  var import_jsx_runtime19 = require("react/jsx-runtime");
1293
- var Input2 = (0, import_react6.forwardRef)(
1292
+ var Input2 = (0, import_react5.forwardRef)(
1294
1293
  ({ prefix, suffix, label, errorMessage, noMargin = false, ...props }, forwardedRef) => {
1295
- const localInputRef = (0, import_react6.useRef)(null);
1294
+ const localInputRef = (0, import_react5.useRef)(null);
1296
1295
  const inputRef = forwardedRef || localInputRef;
1297
1296
  const handleContainerClick = () => {
1298
1297
  inputRef?.current?.focus();
1299
1298
  };
1300
1299
  const isButtonElement = (node) => {
1301
- if (!import_react6.default.isValidElement(node))
1300
+ if (!import_react5.default.isValidElement(node))
1302
1301
  return false;
1303
1302
  const type = node.type;
1304
1303
  return type?.displayName === "Button";
@@ -1390,11 +1389,11 @@ var datePickerStyles = globalCss({
1390
1389
  var import_jsx_runtime20 = require("react/jsx-runtime");
1391
1390
  datePickerStyles();
1392
1391
  var Datepicker = ({ label, value, onChange }) => {
1393
- const [selected, setSelected] = (0, import_react7.useState)(void 0);
1394
- const [month, setMonth] = (0, import_react7.useState)(/* @__PURE__ */ new Date());
1395
- const [open, setOpen] = (0, import_react7.useState)(false);
1396
- const inputRef = (0, import_react7.useRef)(null);
1397
- const calendarRef = (0, import_react7.useRef)(null);
1392
+ const [selected, setSelected] = (0, import_react6.useState)(void 0);
1393
+ const [month, setMonth] = (0, import_react6.useState)(/* @__PURE__ */ new Date());
1394
+ const [open, setOpen] = (0, import_react6.useState)(false);
1395
+ const inputRef = (0, import_react6.useRef)(null);
1396
+ const calendarRef = (0, import_react6.useRef)(null);
1398
1397
  const handleDaySelect = (date) => {
1399
1398
  setSelected(date);
1400
1399
  if (date) {
@@ -1403,7 +1402,7 @@ var Datepicker = ({ label, value, onChange }) => {
1403
1402
  }
1404
1403
  setOpen(false);
1405
1404
  };
1406
- (0, import_react7.useEffect)(() => {
1405
+ (0, import_react6.useEffect)(() => {
1407
1406
  const handleClickOutside = (event) => {
1408
1407
  if (calendarRef.current && !calendarRef.current.contains(event.target) && inputRef.current && !inputRef.current.contains(event.target)) {
1409
1408
  setOpen(false);
@@ -1412,7 +1411,7 @@ var Datepicker = ({ label, value, onChange }) => {
1412
1411
  document.addEventListener("mousedown", handleClickOutside);
1413
1412
  return () => document.removeEventListener("mousedown", handleClickOutside);
1414
1413
  }, []);
1415
- (0, import_react7.useEffect)(() => {
1414
+ (0, import_react6.useEffect)(() => {
1416
1415
  if (!open && selected) {
1417
1416
  setMonth(selected);
1418
1417
  }
@@ -1475,7 +1474,7 @@ var Datepicker = ({ label, value, onChange }) => {
1475
1474
  };
1476
1475
 
1477
1476
  // src/components/Hr.tsx
1478
- var import_react8 = require("react");
1477
+ var import_react7 = require("react");
1479
1478
  var import_jsx_runtime21 = require("react/jsx-runtime");
1480
1479
  var StyledHr = styled("hr", {
1481
1480
  border: "none",
@@ -1492,7 +1491,7 @@ var StyledHr = styled("hr", {
1492
1491
  }
1493
1492
  }
1494
1493
  });
1495
- var Hr = (0, import_react8.forwardRef)(function Hr2({ children, ...props }, ref) {
1494
+ var Hr = (0, import_react7.forwardRef)(function Hr2({ children, ...props }, ref) {
1496
1495
  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(StyledHr, { ref, ...props, children });
1497
1496
  });
1498
1497
  Hr.displayName = "Hr";
@@ -1589,7 +1588,7 @@ var Modal = ({ open, onOpenChange, title, description, children }) => {
1589
1588
  };
1590
1589
 
1591
1590
  // src/components/ProgressBar/index.tsx
1592
- var import_react9 = require("react");
1591
+ var import_react8 = require("react");
1593
1592
 
1594
1593
  // src/components/ProgressBar/styles.ts
1595
1594
  var Progress = __toESM(require("@radix-ui/react-progress"));
@@ -1621,8 +1620,8 @@ var StyledIndicator = styled(Progress.Indicator, {
1621
1620
  // src/components/ProgressBar/index.tsx
1622
1621
  var import_jsx_runtime23 = require("react/jsx-runtime");
1623
1622
  var ProgressBar = ({ label, value = 0, max = 100, ...rest }) => {
1624
- const [progress2, setProgress] = (0, import_react9.useState)(0);
1625
- (0, import_react9.useEffect)(() => {
1623
+ const [progress2, setProgress] = (0, import_react8.useState)(0);
1624
+ (0, import_react8.useEffect)(() => {
1626
1625
  const timer = setTimeout(() => setProgress(value), 500);
1627
1626
  return () => clearTimeout(timer);
1628
1627
  }, [value]);
@@ -1648,7 +1647,7 @@ var ProgressBar = ({ label, value = 0, max = 100, ...rest }) => {
1648
1647
  ProgressBar.displayName = "ProgressBar";
1649
1648
 
1650
1649
  // src/components/Radio/index.tsx
1651
- var import_react10 = require("react");
1650
+ var import_react9 = require("react");
1652
1651
 
1653
1652
  // src/components/Radio/styles.ts
1654
1653
  var RadioGroup = __toESM(require("@radix-ui/react-radio-group"));
@@ -1743,7 +1742,7 @@ var Span3 = styled("span", {
1743
1742
 
1744
1743
  // src/components/Radio/index.tsx
1745
1744
  var import_jsx_runtime24 = require("react/jsx-runtime");
1746
- var Radio = (0, import_react10.forwardRef)(({
1745
+ var Radio = (0, import_react9.forwardRef)(({
1747
1746
  labels,
1748
1747
  value,
1749
1748
  onChange,
@@ -1799,7 +1798,7 @@ var Spacing = ({ size, axis = "vertical" }) => {
1799
1798
  };
1800
1799
 
1801
1800
  // src/components/Switch/index.tsx
1802
- var import_react11 = require("react");
1801
+ var import_react10 = require("react");
1803
1802
 
1804
1803
  // src/components/Switch/styles.ts
1805
1804
  var Switch = __toESM(require("@radix-ui/react-switch"));
@@ -1897,7 +1896,7 @@ var Span4 = styled("span", {
1897
1896
 
1898
1897
  // src/components/Switch/index.tsx
1899
1898
  var import_jsx_runtime26 = require("react/jsx-runtime");
1900
- var Switch2 = (0, import_react11.forwardRef)(({
1899
+ var Switch2 = (0, import_react10.forwardRef)(({
1901
1900
  label,
1902
1901
  checked,
1903
1902
  defaultChecked,
@@ -1931,7 +1930,7 @@ var Switch2 = (0, import_react11.forwardRef)(({
1931
1930
  Switch2.displayName = "Switch";
1932
1931
 
1933
1932
  // src/components/Tabs/index.tsx
1934
- var import_react12 = require("react");
1933
+ var import_react11 = require("react");
1935
1934
 
1936
1935
  // src/components/Tabs/styles.ts
1937
1936
  var Tabs = __toESM(require("@radix-ui/react-tabs"));
@@ -2018,17 +2017,17 @@ var TabsItem = ({ children }) => {
2018
2017
  };
2019
2018
  var Tabs2 = ({ defaultValue, colorContent, children }) => {
2020
2019
  const items = [];
2021
- const childrenArray = import_react12.Children.toArray(children);
2020
+ const childrenArray = import_react11.Children.toArray(children);
2022
2021
  childrenArray.forEach((child) => {
2023
- if ((0, import_react12.isValidElement)(child) && child.type === TabsItem) {
2022
+ if ((0, import_react11.isValidElement)(child) && child.type === TabsItem) {
2024
2023
  const { value, label, children: content } = child.props;
2025
2024
  items.push({ value, label, children: content });
2026
2025
  }
2027
2026
  });
2028
- const listRef = (0, import_react12.useRef)(null);
2029
- const rootRef = (0, import_react12.useRef)(null);
2030
- const hasOverflowRef = (0, import_react12.useRef)(false);
2031
- const [hasOverflow, setHasOverflow] = (0, import_react12.useState)(false);
2027
+ const listRef = (0, import_react11.useRef)(null);
2028
+ const rootRef = (0, import_react11.useRef)(null);
2029
+ const hasOverflowRef = (0, import_react11.useRef)(false);
2030
+ const [hasOverflow, setHasOverflow] = (0, import_react11.useState)(false);
2032
2031
  const checkOverflow = () => {
2033
2032
  const listEl = listRef.current;
2034
2033
  const rootEl = rootRef.current;
@@ -2043,7 +2042,7 @@ var Tabs2 = ({ defaultValue, colorContent, children }) => {
2043
2042
  setHasOverflow(overflow);
2044
2043
  }
2045
2044
  };
2046
- (0, import_react12.useLayoutEffect)(() => {
2045
+ (0, import_react11.useLayoutEffect)(() => {
2047
2046
  checkOverflow();
2048
2047
  const resizeObserver = new ResizeObserver(checkOverflow);
2049
2048
  if (listRef.current) {
@@ -2122,7 +2121,7 @@ var Tabs2 = ({ defaultValue, colorContent, children }) => {
2122
2121
  Tabs2.Item = TabsItem;
2123
2122
 
2124
2123
  // src/components/TextArea.tsx
2125
- var import_react13 = require("react");
2124
+ var import_react12 = require("react");
2126
2125
  var import_jsx_runtime28 = require("react/jsx-runtime");
2127
2126
  var Wrapper4 = styled("div", {
2128
2127
  display: "flex",
@@ -2198,7 +2197,7 @@ var Span5 = styled("span", {
2198
2197
  marginTop: "2px",
2199
2198
  marginBottom: "$6"
2200
2199
  });
2201
- var TextArea = (0, import_react13.forwardRef)(
2200
+ var TextArea = (0, import_react12.forwardRef)(
2202
2201
  ({ label, id, htmlFor, errorMessage, ...props }, ref) => {
2203
2202
  const textAreaId = id || htmlFor || `textarea-${crypto.randomUUID()}`;
2204
2203
  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Wrapper4, { children: [
@@ -2374,7 +2373,7 @@ var Loader = ({ show, fullscreen = false }) => {
2374
2373
  Loader.displayName = "Loader";
2375
2374
 
2376
2375
  // src/components/MaskedInput/index.tsx
2377
- var import_react14 = require("react");
2376
+ var import_react13 = require("react");
2378
2377
 
2379
2378
  // src/components/MaskedInput/utils.ts
2380
2379
  var MAX_LENGTHS = {
@@ -2439,10 +2438,10 @@ var applyMask = (value, maskType) => {
2439
2438
 
2440
2439
  // src/components/MaskedInput/index.tsx
2441
2440
  var import_jsx_runtime31 = require("react/jsx-runtime");
2442
- var MaskedInput = (0, import_react14.forwardRef)(
2441
+ var MaskedInput = (0, import_react13.forwardRef)(
2443
2442
  ({ maskType, onChange, ...props }, ref) => {
2444
- const [value, setValue] = (0, import_react14.useState)("");
2445
- const inputRef = (0, import_react14.useRef)(null);
2443
+ const [value, setValue] = (0, import_react13.useState)("");
2444
+ const inputRef = (0, import_react13.useRef)(null);
2446
2445
  const handleChange = (e) => {
2447
2446
  const { value: inputValue, selectionStart } = e.target;
2448
2447
  const isBackspace = value.length > inputValue.length;
@@ -2490,7 +2489,7 @@ var MaskedInput = (0, import_react14.forwardRef)(
2490
2489
  MaskedInput.displayName = "MaskedInput";
2491
2490
 
2492
2491
  // src/components/Dropdown/index.tsx
2493
- var import_react15 = __toESM(require("react"));
2492
+ var import_react14 = __toESM(require("react"));
2494
2493
  var DropdownMenu2 = __toESM(require("@radix-ui/react-dropdown-menu"));
2495
2494
 
2496
2495
  // src/components/Dropdown/styles.ts
@@ -2576,17 +2575,17 @@ var IconButton = styled("button", {
2576
2575
  // src/components/Dropdown/index.tsx
2577
2576
  var import_jsx_runtime32 = require("react/jsx-runtime");
2578
2577
  var Dropdown = ({ children }) => {
2579
- const childrenArray = import_react15.Children.toArray(children);
2578
+ const childrenArray = import_react14.Children.toArray(children);
2580
2579
  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(DropdownMenu2.Root, { children: [
2581
2580
  /* @__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 }) }) }),
2582
- /* @__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: [
2581
+ /* @__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: [
2583
2582
  child,
2584
2583
  index < childrenArray.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DropdownSeparator, {})
2585
2584
  ] }, index)) }) })
2586
2585
  ] });
2587
2586
  };
2588
2587
  var DropdownSeparator = StyledSeparator;
2589
- var DropdownItem = import_react15.default.forwardRef(({ children, ...props }, forwardedRef) => {
2588
+ var DropdownItem = import_react14.default.forwardRef(({ children, ...props }, forwardedRef) => {
2590
2589
  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(StyledItem2, { ...props, ref: forwardedRef, children });
2591
2590
  });
2592
2591
  Dropdown.displayName = "Dropdown";
@@ -2668,7 +2667,7 @@ var Paragraph = (props) => {
2668
2667
  Paragraph.displayName = "Paragraph";
2669
2668
 
2670
2669
  // src/components/Heading.tsx
2671
- var import_react16 = require("react");
2670
+ var import_react15 = require("react");
2672
2671
  var import_jsx_runtime35 = require("react/jsx-runtime");
2673
2672
  var StyledHeading = styled("h2", {
2674
2673
  fontFamily: "$default",
@@ -2691,7 +2690,7 @@ var StyledHeading = styled("h2", {
2691
2690
  size: "md"
2692
2691
  }
2693
2692
  });
2694
- var Heading = (0, import_react16.forwardRef)(function Heading2({ children, ...props }, ref) {
2693
+ var Heading = (0, import_react15.forwardRef)(function Heading2({ children, ...props }, ref) {
2695
2694
  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(StyledHeading, { ref, ...props, children });
2696
2695
  });
2697
2696
  Heading.displayName = "Heading";
@@ -2699,7 +2698,7 @@ Heading.displayName = "Heading";
2699
2698
  // src/components/Select/index.tsx
2700
2699
  var import_react_icons2 = require("@radix-ui/react-icons");
2701
2700
  var CustomSelect = __toESM(require("@radix-ui/react-select"));
2702
- var import_react17 = require("react");
2701
+ var import_react16 = require("react");
2703
2702
 
2704
2703
  // src/components/Select/styles.ts
2705
2704
  var Select = __toESM(require("@radix-ui/react-select"));
@@ -2820,7 +2819,7 @@ var Span6 = styled("span", {
2820
2819
 
2821
2820
  // src/components/Select/index.tsx
2822
2821
  var import_jsx_runtime36 = require("react/jsx-runtime");
2823
- var Select2 = (0, import_react17.forwardRef)(
2822
+ var Select2 = (0, import_react16.forwardRef)(
2824
2823
  ({
2825
2824
  value,
2826
2825
  onValueChange,
@@ -2833,7 +2832,7 @@ var Select2 = (0, import_react17.forwardRef)(
2833
2832
  style,
2834
2833
  ...rest
2835
2834
  }, ref) => {
2836
- const [open, setOpen] = (0, import_react17.useState)(false);
2835
+ const [open, setOpen] = (0, import_react16.useState)(false);
2837
2836
  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(StyledWrapper4, { css: css2, className, style, children: [
2838
2837
  label && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Label3, { children: label }),
2839
2838
  /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
@@ -2863,7 +2862,7 @@ var Select2 = (0, import_react17.forwardRef)(
2863
2862
  Select2.displayName = "Select";
2864
2863
 
2865
2864
  // src/components/LabelledValue/index.tsx
2866
- var import_react18 = require("react");
2865
+ var import_react17 = require("react");
2867
2866
 
2868
2867
  // src/components/LabelledValue/styles.ts
2869
2868
  var Container = styled("div", {
@@ -2926,9 +2925,9 @@ var Value2 = styled("div", {
2926
2925
  // src/components/LabelledValue/index.tsx
2927
2926
  var import_jsx_runtime37 = require("react/jsx-runtime");
2928
2927
  function LabelledValue({ position = "vertical", withRow = false, children }) {
2929
- return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Container, { position, children: import_react18.Children.map(children, (child) => {
2930
- if ((0, import_react18.isValidElement)(child)) {
2931
- return (0, import_react18.cloneElement)(child, { position, withRow });
2928
+ return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Container, { position, children: import_react17.Children.map(children, (child) => {
2929
+ if ((0, import_react17.isValidElement)(child)) {
2930
+ return (0, import_react17.cloneElement)(child, { position, withRow });
2932
2931
  }
2933
2932
  return child;
2934
2933
  }) });
@@ -3524,7 +3523,7 @@ var MultiStep = ({
3524
3523
  MultiStep.displayName = "MultiStep";
3525
3524
 
3526
3525
  // src/components/Carousel/index.tsx
3527
- var import_react19 = require("react");
3526
+ var import_react18 = require("react");
3528
3527
 
3529
3528
  // src/components/Carousel/styles.ts
3530
3529
  var CarouselContainer = styled("div", {
@@ -3635,10 +3634,10 @@ var CarouselItemContainer = styled("div", {
3635
3634
  var import_jsx_runtime41 = require("react/jsx-runtime");
3636
3635
  var SWIPE_THRESHOLD = 50;
3637
3636
  var Carousel = ({ title, variant, children }) => {
3638
- const items = import_react19.Children.toArray(children);
3639
- const [activeIndex, setActiveIndex] = (0, import_react19.useState)(0);
3640
- const [touchStartX, setTouchStartX] = (0, import_react19.useState)(null);
3641
- const [touchEndX, setTouchEndX] = (0, import_react19.useState)(null);
3637
+ const items = import_react18.Children.toArray(children);
3638
+ const [activeIndex, setActiveIndex] = (0, import_react18.useState)(0);
3639
+ const [touchStartX, setTouchStartX] = (0, import_react18.useState)(null);
3640
+ const [touchEndX, setTouchEndX] = (0, import_react18.useState)(null);
3642
3641
  const prev = () => {
3643
3642
  setActiveIndex((prevIndex) => prevIndex === 0 ? items.length - 1 : prevIndex - 1);
3644
3643
  };
@@ -3711,7 +3710,7 @@ var Carousel = ({ title, variant, children }) => {
3711
3710
  onTouchMove,
3712
3711
  onTouchEnd,
3713
3712
  children: items.map(
3714
- (child, index) => (0, import_react19.cloneElement)(child, {
3713
+ (child, index) => (0, import_react18.cloneElement)(child, {
3715
3714
  "aria-hidden": index !== activeIndex,
3716
3715
  style: {
3717
3716
  display: index === activeIndex ? "block" : "none"
@@ -3742,7 +3741,7 @@ var CarouselItem = ({ children, style, ...props }) => /* @__PURE__ */ (0, import
3742
3741
  Carousel.Item = CarouselItem;
3743
3742
 
3744
3743
  // src/components/PasswordInput.tsx
3745
- var import_react20 = require("react");
3744
+ var import_react19 = require("react");
3746
3745
  var import_jsx_runtime42 = require("react/jsx-runtime");
3747
3746
  var ToggleButton = styled("button", {
3748
3747
  all: "unset",
@@ -3758,11 +3757,11 @@ var ToggleButton = styled("button", {
3758
3757
  borderRadius: "$sm"
3759
3758
  }
3760
3759
  });
3761
- var PasswordInput = (0, import_react20.forwardRef)(
3760
+ var PasswordInput = (0, import_react19.forwardRef)(
3762
3761
  ({ value, onChange, ...props }, ref) => {
3763
- const [visible, setVisible] = (0, import_react20.useState)(false);
3764
- const innerRef = (0, import_react20.useRef)(null);
3765
- (0, import_react20.useImperativeHandle)(ref, () => innerRef.current);
3762
+ const [visible, setVisible] = (0, import_react19.useState)(false);
3763
+ const innerRef = (0, import_react19.useRef)(null);
3764
+ (0, import_react19.useImperativeHandle)(ref, () => innerRef.current);
3766
3765
  const handleToggleVisibility = () => {
3767
3766
  setVisible((v) => !v);
3768
3767
  setTimeout(() => {
@@ -3798,7 +3797,7 @@ PasswordInput.displayName = "PasswordInput";
3798
3797
 
3799
3798
  // src/components/Accordion/index.tsx
3800
3799
  var RadixAccordion = __toESM(require("@radix-ui/react-accordion"));
3801
- var import_react21 = __toESM(require("react"));
3800
+ var import_react20 = __toESM(require("react"));
3802
3801
 
3803
3802
  // src/components/Accordion/styles.ts
3804
3803
  var Accordion = __toESM(require("@radix-ui/react-accordion"));
@@ -3880,7 +3879,7 @@ var OptionsButton = styled(Button, {
3880
3879
 
3881
3880
  // src/components/Accordion/index.tsx
3882
3881
  var import_jsx_runtime43 = require("react/jsx-runtime");
3883
- var Accordion2 = import_react21.default.forwardRef(
3882
+ var Accordion2 = import_react20.default.forwardRef(
3884
3883
  ({ title, children, dropdownItems }, ref) => {
3885
3884
  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: [
3886
3885
  /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(AccordionHeader, { children: [
package/dist/index.mjs CHANGED
@@ -680,7 +680,6 @@ var iconMap = {
680
680
  };
681
681
 
682
682
  // src/components/Icon/index.tsx
683
- import { useMemo } from "react";
684
683
  import { jsx as jsx16 } from "react/jsx-runtime";
685
684
  var colorMap = {
686
685
  black: "#000000",
@@ -693,13 +692,13 @@ function Icon({ name, size = 24, color = "black", ...rest }) {
693
692
  console.warn(`Icon "${name}" not found in iconMap`);
694
693
  return null;
695
694
  }
696
- const fillColor = useMemo(() => colorMap[color], [color]);
695
+ const fillColor = colorMap[color];
697
696
  return /* @__PURE__ */ jsx16(
698
697
  IconComponent,
699
698
  {
700
699
  width: size,
701
700
  height: size,
702
- fill: fillColor,
701
+ style: { color: fillColor },
703
702
  "aria-hidden": true,
704
703
  ...rest
705
704
  }
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "Design System da Clikpalm",
4
4
  "author": "Enisson Shilo",
5
5
  "license": "MIT",
6
- "version": "1.2.8",
6
+ "version": "1.2.10",
7
7
  "repository": {
8
8
  "type": "git",
9
9
  "url": "git+https://github.com/clickpalm/clickpalm-designsystem-lib.git"