@tecsinapse/cortex-react 1.13.1 → 1.13.3-beta.0

package/dist/cjs/components/Calendar/CalendarHeader.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var fa = require('react-icons/fa');
 var Button = require('../Button.js');
 
@@ -9,33 +9,35 @@ const CalendarHeader = ({
   onClickNextButton,
   title
 }) => {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: "flex flex-row justify-between items-center gap-x-deca bg-miscellaneous-body p-mili",
-      "data-testid": "calendar-header"
-    },
-    /* @__PURE__ */ React.createElement(
-      Button.Button,
-      {
-        onClick: onClickPrevButton,
-        variants: { variant: "text", intent: "secondary", size: "small" },
-        "data-testid": "calendar-header-prev-button",
-        type: "button"
-      },
-      /* @__PURE__ */ React.createElement(fa.FaChevronLeft, null)
-    ),
-    /* @__PURE__ */ React.createElement("span", { className: "font-bold capitalize" }, title),
-    /* @__PURE__ */ React.createElement(
-      Button.Button,
-      {
-        onClick: onClickNextButton,
-        variants: { variant: "text", intent: "secondary", size: "small" },
-        "data-testid": "calendar-header-next-button",
-        type: "button"
-      },
-      /* @__PURE__ */ React.createElement(fa.FaChevronRight, null)
-    )
+      "data-testid": "calendar-header",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button.Button,
+          {
+            onClick: onClickPrevButton,
+            variants: { variant: "text", intent: "secondary", size: "small" },
+            "data-testid": "calendar-header-prev-button",
+            type: "button",
+            children: /* @__PURE__ */ jsxRuntime.jsx(fa.FaChevronLeft, {})
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold capitalize", children: title }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button.Button,
+          {
+            onClick: onClickNextButton,
+            variants: { variant: "text", intent: "secondary", size: "small" },
+            "data-testid": "calendar-header-next-button",
+            type: "button",
+            children: /* @__PURE__ */ jsxRuntime.jsx(fa.FaChevronRight, {})
+          }
+        )
+      ]
+    }
   );
 };
 

package/dist/cjs/components/Calendar/RangeCalendar.js

@@ -1,9 +1,13 @@
 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 require('@internationalized/date');
 require('react-aria');
 require('react-stately');
+require('react');
+require('../../provider/MenubarContext.js');
+require('../../provider/SnackbarProvider.js');
+var CalendarProvider = require('../../provider/CalendarProvider.js');
 require('../Popover/Context.js');
 require('react-dropzone');
 require('uuid');
@@ -13,29 +17,39 @@ var useRangeCalendar = require('../../hooks/useRangeCalendar.js');
 var CalendarGrid = require('./CalendarGrid.js');
 var CalendarHeader = require('./CalendarHeader.js');
 
-const RangeCalendar = ({ value, onChange }) => {
+const RangeCalendar = ({
+  value,
+  onChange,
+  isTodayHighlited = true,
+  minValue,
+  maxValue
+}) => {
   const { calendarProps, state, title, ref } = useRangeCalendar.useRangeCalendar({
     value,
-    onChange
+    onChange,
+    minValue,
+    maxValue
   });
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx(CalendarProvider.CalendarProvider, { isTodayHighlited, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       ...calendarProps,
       className: "calendar",
       ref,
-      "data-testid": "calendar-range-div"
-    },
-    /* @__PURE__ */ React.createElement(
-      CalendarHeader.CalendarHeader,
-      {
-        onClickPrevButton: () => state.focusPreviousPage(),
-        onClickNextButton: () => state.focusNextPage(),
-        title
-      }
-    ),
-    /* @__PURE__ */ React.createElement(CalendarGrid.CalendarGrid, { state })
-  );
+      "data-testid": "calendar-range-div",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          CalendarHeader.CalendarHeader,
+          {
+            onClickPrevButton: () => state.focusPreviousPage(),
+            onClickNextButton: () => state.focusNextPage(),
+            title
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(CalendarGrid.CalendarGrid, { state })
+      ]
+    }
+  ) });
 };
 
 exports.RangeCalendar = RangeCalendar;

package/dist/cjs/components/Card.js

@@ -1,11 +1,12 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var cortexCore = require('@tecsinapse/cortex-core');
 var React = require('react');
 
 const Card = React.forwardRef((props, ref) => {
   const { children, className, ...rest } = props;
-  return /* @__PURE__ */ React.createElement("div", { className: cortexCore.card({ className }), ref, ...rest }, children);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cortexCore.card({ className }), ref, ...rest, children });
 });
 
 exports.Card = Card;

package/dist/cjs/components/Carousel/Carousel.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var Button = require('../Button.js');
 var reactSpringCarousel = require('react-spring-carousel');
 var io = require('react-icons/io');
@@ -9,33 +9,39 @@ var CarouselItem = require('./CarouselItem.js');
 const Carousel = ({ images }) => {
   const itemsCarousel = images.map((imageProp, i) => ({
     id: `${imageProp.alt}-${i}`,
-    renderItem: /* @__PURE__ */ React.createElement(CarouselItem.CarouselItem, { item: imageProp })
+    renderItem: /* @__PURE__ */ jsxRuntime.jsx(CarouselItem.CarouselItem, { item: imageProp })
   }));
   const { carouselFragment, slideToNextItem, slideToPrevItem } = reactSpringCarousel.useSpringCarousel({
     withLoop: true,
     items: itemsCarousel
   });
-  return /* @__PURE__ */ React.createElement("div", { className: "overflow-hidden w-fit relative" }, itemsCarousel.length > 1 ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    Button.Button,
-    {
-      type: "button",
-      "data-testid": "button-carousel-prev",
-      className: "z-absolute absolute left-deca top-[50%]  transform -translate-y-[50%] p-centi hidden lg:flex",
-      size: "square",
-      onClick: slideToPrevItem
-    },
-    /* @__PURE__ */ React.createElement(io.IoIosArrowBack, null)
-  ), /* @__PURE__ */ React.createElement(
-    Button.Button,
-    {
-      type: "button",
-      "data-testid": "button-carousel-next",
-      size: "square",
-      className: "z-absolute absolute right-deca top-[50%] transform -translate-y-[50%] p-centi hidden lg:flex",
-      onClick: slideToNextItem
-    },
-    /* @__PURE__ */ React.createElement(io.IoIosArrowForward, null)
-  )) : /* @__PURE__ */ React.createElement(React.Fragment, null), carouselFragment);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overflow-hidden w-fit relative", children: [
+    itemsCarousel.length > 1 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button.Button,
+        {
+          type: "button",
+          "data-testid": "button-carousel-prev",
+          className: "z-absolute absolute left-deca top-[50%]  transform -translate-y-[50%] p-centi hidden lg:flex",
+          size: "square",
+          onClick: slideToPrevItem,
+          children: /* @__PURE__ */ jsxRuntime.jsx(io.IoIosArrowBack, {})
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button.Button,
+        {
+          type: "button",
+          "data-testid": "button-carousel-next",
+          size: "square",
+          className: "z-absolute absolute right-deca top-[50%] transform -translate-y-[50%] p-centi hidden lg:flex",
+          onClick: slideToNextItem,
+          children: /* @__PURE__ */ jsxRuntime.jsx(io.IoIosArrowForward, {})
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}),
+    carouselFragment
+  ] });
 };
 
 exports.Carousel = Carousel;

package/dist/cjs/components/Carousel/CarouselItem.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var Button = require('../Button.js');
 
 const CarouselItem = ({ item }) => {
@@ -12,52 +12,58 @@ const CarouselItem = ({ item }) => {
     color: item.subtitle.color ?? "white",
     fontSize: item.subtitle?.size ?? "1rem"
   };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    "img",
-    {
-      className: "w-full h-[360px] object-cover rounded-mili z-absolute",
-      src: item.src,
-      alt: item.alt
-    }
-  ), /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: "z-absolute absolute top-[50%] transform -translate-y-[50%] left-[10%] mx-deca max-w-[60%]"
-    },
-    /* @__PURE__ */ React.createElement(
-      "p",
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
       {
-        className: "text-h2 font-bold",
-        style: stylesTitle,
-        dangerouslySetInnerHTML: { __html: item.title.text }
+        className: "w-full h-[360px] object-cover rounded-mili z-absolute",
+        src: item.src,
+        alt: item.alt
       }
     ),
-    /* @__PURE__ */ React.createElement(
-      "p",
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
       {
-        className: "text-white text-h2 font-bold hidden lg:block",
-        style: stylesSubTitle,
-        dangerouslySetInnerHTML: { __html: item.subtitle.text }
+        className: "z-absolute absolute top-[50%] transform -translate-y-[50%] left-[10%] mx-deca max-w-[60%]",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: "text-h2 font-bold",
+              style: stylesTitle,
+              dangerouslySetInnerHTML: { __html: item.title.text }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: "text-white text-h2 font-bold hidden lg:block",
+              style: stylesSubTitle,
+              dangerouslySetInnerHTML: { __html: item.subtitle.text }
+            }
+          )
+        ]
       }
-    )
-  ), item.button ? /* @__PURE__ */ React.createElement(
-    "a",
-    {
-      type: "button",
-      href: item.button.link,
-      target: item.button.target ?? "_self",
-      rel: "noopener noreferrer"
-    },
-    /* @__PURE__ */ React.createElement(
-      Button.Button,
+    ),
+    item.button ? /* @__PURE__ */ jsxRuntime.jsx(
+      "a",
       {
         type: "button",
-        "data-testid": "button-link-carousel",
-        className: "z-absolute absolute bottom-deca left-[10%]"
-      },
-      item.button.title
-    )
-  ) : /* @__PURE__ */ React.createElement(React.Fragment, null));
+        href: item.button.link,
+        target: item.button.target ?? "_self",
+        rel: "noopener noreferrer",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          Button.Button,
+          {
+            type: "button",
+            "data-testid": "button-link-carousel",
+            className: "z-absolute absolute bottom-deca left-[10%]",
+            children: item.button.title
+          }
+        )
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {})
+  ] });
 };
 
 exports.CarouselItem = CarouselItem;

package/dist/cjs/components/Checkbox.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var cortexCore = require('@tecsinapse/cortex-core');
 var React = require('react');
 
@@ -21,7 +22,7 @@ const Checkbox = React.forwardRef((props, ref) => {
       setIndeterminate
     };
   });
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     "input",
     {
       type: "checkbox",

package/dist/cjs/components/ColorPicker.js

@@ -1,11 +1,12 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var React = require('react');
 
 const Box = React.forwardRef((props, ref) => {
   const { id, ...rest } = props;
-  return /* @__PURE__ */ React.createElement("div", { className: "w-tera h-kilo overflow-hidden relative" }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-tera h-kilo overflow-hidden relative", children: /* @__PURE__ */ jsxRuntime.jsx(
     "input",
     {
       ...rest,
@@ -14,10 +15,10 @@ const Box = React.forwardRef((props, ref) => {
       className: "bg-transparent cursor-pointer disabled:opacity-50 disabled:cursor-default absolute -top-1.5 -right-1 w-peta h-giga",
       ref
     }
-  ));
+  ) });
 });
 const Face = ({ children }) => {
-  return /* @__PURE__ */ React.createElement("div", { className: "rounded-mili p-mili shadow-default bg-white flex flex-row items-center gap-2" }, children);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-mili p-mili shadow-default bg-white flex flex-row items-center gap-2", children });
 };
 const Label = ({
   children,
@@ -25,11 +26,14 @@ const Label = ({
   className,
   ...rest
 }) => {
-  return /* @__PURE__ */ React.createElement("label", { ...rest, htmlFor: id, className: clsx("text-base", className) }, children);
+  return /* @__PURE__ */ jsxRuntime.jsx("label", { ...rest, htmlFor: id, className: clsx("text-base", className), children });
 };
 const Root = React.forwardRef((props, ref) => {
   const { id, value, ...rest } = props;
-  return /* @__PURE__ */ React.createElement(Face, null, /* @__PURE__ */ React.createElement(Box, { ...rest, ref, id, value }), value ? /* @__PURE__ */ React.createElement(Label, { id }, value) : null);
+  return /* @__PURE__ */ jsxRuntime.jsxs(Face, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Box, { ...rest, ref, id, value }),
+    value ? /* @__PURE__ */ jsxRuntime.jsx(Label, { id, children: value }) : null
+  ] });
 });
 const ColorPicker = {
   Box,

package/dist/cjs/components/{DatePicker/Content.js → Content.js}

@@ -1,10 +1,11 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 
 const Content = ({ children }) => {
   const ref = React.useRef(null);
-  return /* @__PURE__ */ React.createElement("div", { ref }, children);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, children });
 };
 
 exports.Content = Content;

package/dist/cjs/components/DatePicker/DateField.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var date = require('@internationalized/date');
 var React = require('react');
 var reactAria = require('react-aria');
@@ -38,21 +39,21 @@ const DateField = ({
     },
     [onClickDate, onClickTime, state.isDisabled]
   );
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       ...fieldProps,
       ref,
       className: "flex flex-row",
-      "data-testid": "date-field-div"
-    },
-    state.segments.map((segment, i) => {
-      if (segment.type === "literal") {
-        const text = formatLiteralSegment(segment.text);
-        return /* @__PURE__ */ React.createElement("span", { key: i, style: { whiteSpace: "pre" } }, text);
-      }
-      return /* @__PURE__ */ React.createElement("div", { key: i, onClick: () => handleOnClickSegment(segment) }, /* @__PURE__ */ React.createElement(DateSegment.DateSegment, { segment, state }));
-    })
+      "data-testid": "date-field-div",
+      children: state.segments.map((segment, i) => {
+        if (segment.type === "literal") {
+          const text = formatLiteralSegment(segment.text);
+          return /* @__PURE__ */ jsxRuntime.jsx("span", { style: { whiteSpace: "pre" }, children: text }, i);
+        }
+        return /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: () => handleOnClickSegment(segment), children: /* @__PURE__ */ jsxRuntime.jsx(DateSegment.DateSegment, { segment, state }) }, i);
+      })
+    }
   );
 };
 

package/dist/cjs/components/DatePicker/DatePickerInput.js

@@ -1,19 +1,24 @@
 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 require('@internationalized/date');
 require('react-aria');
 require('react-stately');
 var date = require('../../utils/date.js');
+require('react');
+require('../../provider/MenubarContext.js');
+require('../../provider/SnackbarProvider.js');
+require('../../provider/CalendarProvider.js');
 var useDatePickerInput = require('../../hooks/useDatePickerInput.js');
 var useDatePickerInputCommon = require('../../hooks/useDatePickerInputCommon.js');
 require('react-dropzone');
 require('uuid');
 require('@floating-ui/react');
 require('currency.js');
+require('../Popover/Context.js');
 var Calendar = require('../Calendar/Calendar.js');
+var Content = require('../Content.js');
 var index = require('../Popover/index.js');
-var Content = require('../Select/Content.js');
 var DateField = require('./DateField.js');
 var DatePickerInputBase = require('./DatePickerInputBase.js');
 
@@ -25,53 +30,70 @@ const DatePickerInputWithPopover = (props) => {
     variants,
     disabled,
     hourCycle = 24,
-    granularity = "day"
+    granularity = "day",
+    isTodayHighlited,
+    minValue,
+    maxValue
   } = props;
   const { fieldProps, state, ref } = useDatePickerInput.useDatePickerInput({
     value,
-    onChange
+    onChange,
+    minValue,
+    maxValue
   });
   const { handleTogglePopover, handleChangeCalendar, handleCloseCalendar } = useDatePickerInputCommon.useDatePickerInputCommon({
-    onChangeCalendar: (value2) => {
-      state.setValue(date.dateToCalendarDateTime(value2));
+    onChangeCalendar: (_value) => {
+      state.setValue(date.dateToCalendarDateTime(_value));
     }
   });
-  return /* @__PURE__ */ React.createElement("div", { ref, "data-testid": "date-picker-input" }, /* @__PURE__ */ React.createElement(index.Popover.Trigger, { disabled: true }, /* @__PURE__ */ React.createElement(
-    DatePickerInputBase.DatePickerInputBase,
-    {
-      variants: {
-        ...variants,
-        intent: state.isInvalid ? "error" : variants?.intent
-      },
-      label,
-      disabled,
-      value,
-      onClean: () => state.setValue(null),
-      onToggle: handleTogglePopover
-    },
-    /* @__PURE__ */ React.createElement(
-      DateField.DateField,
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, "data-testid": "date-picker-input", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(index.Popover.Trigger, { disabled: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      DatePickerInputBase.DatePickerInputBase,
       {
-        ...fieldProps,
-        onChange: (value2) => {
-          fieldProps.onChange?.(value2);
-          handleCloseCalendar();
+        variants: {
+          ...variants,
+          intent: state.isInvalid ? "error" : variants?.intent
         },
-        isDisabled: disabled,
-        onClickDate: handleTogglePopover,
-        hourCycle,
-        granularity
+        label,
+        disabled,
+        value,
+        onClean: () => state.setValue(null),
+        onToggle: handleTogglePopover,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          DateField.DateField,
+          {
+            ...fieldProps,
+            onChange: (value2) => {
+              fieldProps.onChange?.(value2);
+              handleCloseCalendar();
+            },
+            isDisabled: disabled,
+            onClickDate: handleTogglePopover,
+            hourCycle,
+            granularity
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      index.Popover.Content,
+      {
+        className: "bg-inherit shadow-default border-none",
+        initialFocus: -1,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          Calendar.Calendar,
+          {
+            value,
+            onChange: handleChangeCalendar,
+            isTodayHighlited,
+            minValue,
+            maxValue
+          }
+        )
       }
     )
-  )), /* @__PURE__ */ React.createElement(
-    index.Popover.Content,
-    {
-      className: "bg-inherit shadow-none border-none",
-      initialFocus: -1
-    },
-    /* @__PURE__ */ React.createElement(Calendar.Calendar, { value, onChange: handleChangeCalendar })
-  ));
+  ] });
 };
-const DatePickerInput = (props) => /* @__PURE__ */ React.createElement(index.Popover.Root, { placement: "bottom-start", trigger: "click" }, /* @__PURE__ */ React.createElement(Content.Content, null, /* @__PURE__ */ React.createElement(DatePickerInputWithPopover, { ...props })));
+const DatePickerInput = (props) => /* @__PURE__ */ jsxRuntime.jsx(index.Popover.Root, { placement: "bottom-start", trigger: "click", children: /* @__PURE__ */ jsxRuntime.jsx(Content.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(DatePickerInputWithPopover, { ...props }) }) });
 
 exports.DatePickerInput = DatePickerInput;

package/dist/cjs/components/DatePicker/DatePickerInputBase.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var cortexCore = require('@tecsinapse/cortex-core');
 var React = require('react');
 var io = require('react-icons/io');
@@ -28,39 +29,43 @@ const DatePickerInputBase = ({
     if (value && "start" in value) return hasStartDate && hasEndDate;
     return hasDate;
   }, [value]);
-  return /* @__PURE__ */ React.createElement(index.Input.Face, { variants, "data-testid": "date-picker-input-base" }, /* @__PURE__ */ React.createElement("label", { className: cortexCore.labelStyle({}) }, label), /* @__PURE__ */ React.createElement("div", { className: cortexCore.inputBox("", label, "w-full flex flex-row") }, children), /* @__PURE__ */ React.createElement(index.Input.Right, { className: "flex h-full justify-center" }, showCloseIcon ? /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      className: "bg-transparent",
-      onClick: onClean,
-      disabled,
-      "data-testid": "date-picker-input-base-clean-button",
-      type: "button"
-    },
-    /* @__PURE__ */ React.createElement(
-      io.IoMdClose,
+  return /* @__PURE__ */ jsxRuntime.jsxs(index.Input.Face, { variants, "data-testid": "date-picker-input-base", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("label", { className: cortexCore.labelStyle({}), children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cortexCore.inputBox("", label, "w-full flex flex-row"), children }),
+    /* @__PURE__ */ jsxRuntime.jsx(index.Input.Right, { className: "flex h-full justify-center", children: showCloseIcon ? /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
       {
-        className: icon({ disabled }),
-        "data-testid": "date-picker-input-base-clean-icon"
+        className: "bg-transparent",
+        onClick: onClean,
+        disabled,
+        "data-testid": "date-picker-input-base-clean-button",
+        type: "button",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          io.IoMdClose,
+          {
+            className: icon({ disabled }),
+            "data-testid": "date-picker-input-base-clean-icon"
+          }
+        )
       }
-    )
-  ) : /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      className: "bg-transparent",
-      onClick: onToggle,
-      disabled,
-      "data-testid": "date-picker-input-base-calendar-button",
-      type: "button"
-    },
-    /* @__PURE__ */ React.createElement(
-      lia.LiaCalendar,
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
       {
-        className: icon({ disabled }),
-        "data-testid": "date-picker-input-base-calendar-icon"
+        className: "bg-transparent",
+        onClick: onToggle,
+        disabled,
+        "data-testid": "date-picker-input-base-calendar-button",
+        type: "button",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          lia.LiaCalendar,
+          {
+            className: icon({ disabled }),
+            "data-testid": "date-picker-input-base-calendar-icon"
+          }
+        )
       }
-    )
-  )));
+    ) })
+  ] });
 };
 
 exports.DatePickerInputBase = DatePickerInputBase;