@ultraviolet/ui 3.0.0-beta.27 → 3.0.0-beta.28

package/dist/components/Chip/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useState, useRef, useMemo, useEffect } from "react";
 import { Stack } from "../Stack/index.js";
 import { Text } from "../Text/index.js";
@@ -29,11 +29,10 @@ const Chip = ({
     }
     return "default";
   }, [isActive, disabled]);
-  const value = useMemo(() => ({
-    disabled,
-    iconRef,
-    isActive
-  }), [isActive, disabled, iconRef]);
+  const value = useMemo(
+    () => ({ disabled, iconRef, isActive }),
+    [isActive, disabled, iconRef]
+  );
   useEffect(() => {
     setIsActive(active);
   }, [active]);
@@ -47,12 +46,38 @@ const Chip = ({
       }
     }
   }, [children, iconRef]);
-  return /* @__PURE__ */ jsx(ChipContext.Provider, { value, children: /* @__PURE__ */ jsx(Text, { as: "div", style, variant: size === "large" ? "bodySmall" : "caption", children: /* @__PURE__ */ jsx(Stack, { alignItems: "center", className: `${className ? `${className} ` : ""}${container}`, "data-active": isActive, "data-disabled": disabled, "data-prominence": prominence, "data-size": size, "data-testid": dataTestId, "data-trailing-icon": hasTrailingIcon, direction: "row", gap: 1, justifyContent: "center", onClick: () => {
-    if (!disabled) {
-      setIsActive(!isActive);
-      onClick?.(!isActive);
+  return /* @__PURE__ */ jsx(ChipContext.Provider, { value, children: /* @__PURE__ */ jsx(
+    Text,
+    {
+      as: "div",
+      style,
+      variant: size === "large" ? "bodySmall" : "caption",
+      children: /* @__PURE__ */ jsx(
+        Stack,
+        {
+          alignItems: "center",
+          className: `${className ? `${className} ` : ""}${container}`,
+          "data-active": isActive,
+          "data-disabled": disabled,
+          "data-prominence": prominence,
+          "data-size": size,
+          "data-testid": dataTestId,
+          "data-trailing-icon": hasTrailingIcon,
+          direction: "row",
+          gap: 1,
+          justifyContent: "center",
+          onClick: () => {
+            if (!disabled) {
+              setIsActive(!isActive);
+              onClick?.(!isActive);
+            }
+          },
+          ref: chipRef,
+          children
+        }
+      )
     }
-  }, ref: chipRef, children }) }) });
+  ) });
 };
 Chip.Icon = ChipIcon;
 export {

package/dist/components/CopyButton/index.d.ts

@@ -15,5 +15,5 @@ type CopyButtonProps = {
 /**
  * CopyButton is a button that copies a given value to the clipboard.
  */
-export declare const CopyButton: ({ size, value, copyText, copiedText, sentiment, bordered, className, children, "data-testid": dataTestId, onCopy, style, }: CopyButtonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const CopyButton: ({ size, value, copyText, copiedText, sentiment, bordered, className, children, "data-testid": dataTestId, onCopy, style, }: CopyButtonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/CopyButton/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { CheckIcon, CopyContentIcon } from "@ultraviolet/icons";
 import useClipboard from "react-use-clipboard";
 import { Button } from "../Button/index.js";
@@ -20,13 +20,28 @@ const CopyButton = ({
   const [isCopied, setCopied] = useClipboard(value, {
     successDuration: COPY_DURATION
   });
-  return /* @__PURE__ */ jsxs(Button, { "aria-label": "Copy", className, "data-testid": dataTestId, onClick: () => {
-    setCopied();
-    onCopy?.();
-  }, sentiment, size, style, tooltip: isCopied ? copiedText : copyText, type: "button", variant: !bordered ? "ghost" : "outlined", children: [
-    isCopied ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(CopyContentIcon, {}),
-    children
-  ] });
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      "aria-label": "Copy",
+      className,
+      "data-testid": dataTestId,
+      onClick: () => {
+        setCopied();
+        onCopy?.();
+      },
+      sentiment,
+      size,
+      style,
+      tooltip: isCopied ? copiedText : copyText,
+      type: "button",
+      variant: !bordered ? "ghost" : "outlined",
+      children: [
+        isCopied ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(CopyContentIcon, {}),
+        children
+      ]
+    }
+  );
 };
 export {
   CopyButton

package/dist/components/DateInput/components/CalendarContent.d.ts

@@ -1 +1 @@
-export declare const CalendarContent: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const CalendarContent: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/DateInput/components/CalendarContent.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { ArrowLeftIcon, ArrowRightIcon } from "@ultraviolet/icons";
 import { useContext } from "react";
 import { Button } from "../../Button/index.js";
@@ -25,33 +25,68 @@ const CalendarContent = () => {
   } = useContext(DateInputContext);
   return /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
     /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "space-between", width: "100%", children: [
-      /* @__PURE__ */ jsx(Button, { "data-testid": "previous-month", disabled: !!(minDate && minDate > new Date(yearToShow, monthToShow - 1, 0)) || disabled, onClick: () => {
-        if ((!minDate || minDate <= new Date(yearToShow, monthToShow - 1, 0)) && !readOnly) {
-          if (!showMonthYearPicker) {
-            const [prevMonth, year] = getPreviousMonth(monthToShow, yearToShow);
-            setMonthToShow(prevMonth);
-            setYearToShow(year);
-          } else {
-            setYearToShow(yearToShow - 1);
-          }
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          "data-testid": "previous-month",
+          disabled: !!(minDate && minDate > new Date(yearToShow, monthToShow - 1, 0)) || disabled,
+          onClick: () => {
+            if ((!minDate || minDate <= new Date(yearToShow, monthToShow - 1, 0)) && !readOnly) {
+              if (!showMonthYearPicker) {
+                const [prevMonth, year] = getPreviousMonth(
+                  monthToShow,
+                  yearToShow
+                );
+                setMonthToShow(prevMonth);
+                setYearToShow(year);
+              } else {
+                setYearToShow(yearToShow - 1);
+              }
+            }
+          },
+          sentiment: "neutral",
+          size: "xsmall",
+          variant: "ghost",
+          children: /* @__PURE__ */ jsx(ArrowLeftIcon, {})
         }
-      }, sentiment: "neutral", size: "xsmall", variant: "ghost", children: /* @__PURE__ */ jsx(ArrowLeftIcon, {}) }),
-      /* @__PURE__ */ jsxs(Text, { as: "span", className: capitalizedText, disabled, sentiment: "neutral", variant: "bodyStrong", children: [
-        !showMonthYearPicker ? MONTHS_ARR[monthToShow - 1] : null,
-        " ",
-        yearToShow
-      ] }),
-      /* @__PURE__ */ jsx(Button, { "data-testid": "next-month", disabled: !!(maxDate && maxDate < new Date(yearToShow, monthToShow, 1)) || disabled, onClick: () => {
-        if ((!maxDate || maxDate >= new Date(yearToShow, monthToShow, 1)) && !readOnly) {
-          if (!showMonthYearPicker) {
-            const [monthNext, year] = getNextMonth(monthToShow, yearToShow);
-            setMonthToShow(monthNext);
-            setYearToShow(year);
-          } else {
-            setYearToShow(yearToShow + 1);
-          }
+      ),
+      /* @__PURE__ */ jsxs(
+        Text,
+        {
+          as: "span",
+          className: capitalizedText,
+          disabled,
+          sentiment: "neutral",
+          variant: "bodyStrong",
+          children: [
+            !showMonthYearPicker ? MONTHS_ARR[monthToShow - 1] : null,
+            " ",
+            yearToShow
+          ]
         }
-      }, sentiment: "neutral", size: "xsmall", variant: "ghost", children: /* @__PURE__ */ jsx(ArrowRightIcon, {}) })
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          "data-testid": "next-month",
+          disabled: !!(maxDate && maxDate < new Date(yearToShow, monthToShow, 1)) || disabled,
+          onClick: () => {
+            if ((!maxDate || maxDate >= new Date(yearToShow, monthToShow, 1)) && !readOnly) {
+              if (!showMonthYearPicker) {
+                const [monthNext, year] = getNextMonth(monthToShow, yearToShow);
+                setMonthToShow(monthNext);
+                setYearToShow(year);
+              } else {
+                setYearToShow(yearToShow + 1);
+              }
+            }
+          },
+          sentiment: "neutral",
+          size: "xsmall",
+          variant: "ghost",
+          children: /* @__PURE__ */ jsx(ArrowRightIcon, {})
+        }
+      )
     ] }),
     showMonthYearPicker ? /* @__PURE__ */ jsx(Monthly, {}) : /* @__PURE__ */ jsx(Daily, {})
   ] });

package/dist/components/DateInput/components/CalendarDaily.d.ts

@@ -1 +1 @@
-export declare const Daily: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Daily: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/DateInput/components/CalendarDaily.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { useContext, useState } from "react";
 import { Button } from "../../Button/index.js";
 import { Row } from "../../Row/index.js";
@@ -32,36 +32,57 @@ const Daily = () => {
     hoveredDate,
     setHoveredDate
   } = useContext(DateInputContext);
-  const [rangeState, setRangeState] = useState(range?.start && !range?.end ? "end" : "start");
+  const [rangeState, setRangeState] = useState(
+    range?.start && !range?.end ? "end" : "start"
+  );
   const monthDays = new Date(yearToShow, monthToShow, 0).getDate();
   const daysFromPreviousMonth = getMonthFirstDay(monthToShow, yearToShow);
   const daysFromNextMonth = CALENDAR_WEEKS * 7 - (daysFromPreviousMonth + monthDays);
-  const [previousMonth, prevMonthYear] = getPreviousMonth(monthToShow, yearToShow);
+  const [previousMonth, prevMonthYear] = getPreviousMonth(
+    monthToShow,
+    yearToShow
+  );
   const [nextMonth, nextMonthYear] = getNextMonth(monthToShow, yearToShow);
   const previousMonthDays = new Date(prevMonthYear, previousMonth, 0).getDate();
-  const prevMonthDates = Array.from({
-    length: daysFromPreviousMonth
-  }, (_, index) => ({
-    day: index + 1 + (previousMonthDays - daysFromPreviousMonth),
-    month: -1
-  }));
-  const currentMonthDates = Array.from({
-    length: monthDays
-  }, (_, index) => ({
+  const prevMonthDates = Array.from(
+    { length: daysFromPreviousMonth },
+    (_, index) => ({
+      day: index + 1 + (previousMonthDays - daysFromPreviousMonth),
+      month: -1
+    })
+  );
+  const currentMonthDates = Array.from({ length: monthDays }, (_, index) => ({
     day: index + 1,
     month: 0
   }));
-  const nextMonthDates = Array.from({
-    length: daysFromNextMonth
-  }, (_, index) => ({
-    day: index + 1,
-    month: 1
-  }));
-  const allDaysToShow = [...prevMonthDates, ...currentMonthDates, ...nextMonthDates];
+  const nextMonthDates = Array.from(
+    { length: daysFromNextMonth },
+    (_, index) => ({ day: index + 1, month: 1 })
+  );
+  const allDaysToShow = [
+    ...prevMonthDates,
+    ...currentMonthDates,
+    ...nextMonthDates
+  ];
   return /* @__PURE__ */ jsxs(Row, { gap: 1, templateColumns: "repeat(7, 1fr)", children: [
-    Object.entries(DAYS).map((day) => /* @__PURE__ */ jsx(Text, { as: "p", className: capitalizedTextDay, disabled, sentiment: "neutral", variant: "bodyStrong", children: day[1] }, day[0])),
+    Object.entries(DAYS).map((day) => /* @__PURE__ */ jsx(
+      Text,
+      {
+        as: "p",
+        className: capitalizedTextDay,
+        disabled,
+        sentiment: "neutral",
+        variant: "bodyStrong",
+        children: day[1]
+      },
+      day[0]
+    )),
     allDaysToShow.map((data) => {
-      const constructedDate = new Date(yearToShow, monthToShow - 1 + data.month, data.day);
+      const constructedDate = new Date(
+        yearToShow,
+        monthToShow - 1 + data.month,
+        data.day
+      );
       const isExcluded = excludeDates ? excludeDates.map((date) => isSameDay(constructedDate, date)).includes(true) : false;
       const isOutsideRange = !!(minDate && constructedDate < minDate) || !!(maxDate && constructedDate > maxDate);
       const isSelected = value && isSameDay(constructedDate, new Date(value)) || range?.end && isSameDay(constructedDate, range.end) || range?.start && isSameDay(constructedDate, range.start);
@@ -83,39 +104,45 @@ const Daily = () => {
       const onClickRange = (event, newDate) => {
         if (selectsRange) {
           if (rangeState === "end" && isAfterStartDate) {
-            setRange?.({
-              end: newDate,
-              start: range.start
-            });
+            setRange?.({ end: newDate, start: range.start });
             onChange?.([range.start, newDate], event);
-            setInputValue(formatValue(null, {
-              end: newDate,
-              start: range.start
-            }, false, true, format));
+            setInputValue(
+              formatValue(
+                null,
+                { end: newDate, start: range.start },
+                false,
+                true,
+                format
+              )
+            );
             setRangeState("start");
             setVisible(false);
           } else if (rangeState === "end" && !isAfterStartDate && range?.start) {
-            setRange?.({
-              end: range.start,
-              start: newDate
-            });
+            setRange?.({ end: range.start, start: newDate });
             onChange?.([newDate, range.start], event);
-            setInputValue(formatValue(null, {
-              end: range.start,
-              start: newDate
-            }, false, true, format));
+            setInputValue(
+              formatValue(
+                null,
+                { end: range.start, start: newDate },
+                false,
+                true,
+                format
+              )
+            );
             setRangeState("start");
             setVisible(false);
           } else {
-            setRange?.({
-              end: null,
-              start: newDate
-            });
+            setRange?.({ end: null, start: newDate });
             onChange?.([newDate, null], event);
-            setInputValue(formatValue(null, {
-              end: null,
-              start: newDate
-            }, false, true, format));
+            setInputValue(
+              formatValue(
+                null,
+                { end: null, start: newDate },
+                false,
+                true,
+                format
+              )
+            );
             setRangeState("end");
           }
         }
@@ -144,23 +171,39 @@ const Daily = () => {
         }
         return "neutral";
       };
-      return /* @__PURE__ */ jsx(Button, { "aria-label": dayState(), className: dayMonth, "data-testid": createTestId(), disabled: disabled || isExcluded || isOutsideRange, onClick: (event) => {
-        if (!isExcluded && !isOutsideRange && !readOnly) {
-          const newDate = getNewDate();
-          if (selectsRange) {
-            onClickRange(event, newDate);
-          } else {
-            setValue(newDate);
-            onChange?.(newDate, event);
-            setInputValue(formatValue(newDate, null, false, false, format));
-            setVisible(false);
-          }
-        }
-      }, onMouseEnter: () => {
-        if (selectsRange && range?.start) {
-          setHoveredDate(constructedDate);
-        }
-      }, sentiment: isSelected || isInHoveredRange ? "primary" : "neutral", variant: isSelected || isInHoveredRange ? "filled" : "ghost", children: data.day }, `${data.month}-${data.day}`);
+      return /* @__PURE__ */ jsx(
+        Button,
+        {
+          "aria-label": dayState(),
+          className: dayMonth,
+          "data-testid": createTestId(),
+          disabled: disabled || isExcluded || isOutsideRange,
+          onClick: (event) => {
+            if (!isExcluded && !isOutsideRange && !readOnly) {
+              const newDate = getNewDate();
+              if (selectsRange) {
+                onClickRange(event, newDate);
+              } else {
+                setValue(newDate);
+                onChange?.(newDate, event);
+                setInputValue(
+                  formatValue(newDate, null, false, false, format)
+                );
+                setVisible(false);
+              }
+            }
+          },
+          onMouseEnter: () => {
+            if (selectsRange && range?.start) {
+              setHoveredDate(constructedDate);
+            }
+          },
+          sentiment: isSelected || isInHoveredRange ? "primary" : "neutral",
+          variant: isSelected || isInHoveredRange ? "filled" : "ghost",
+          children: data.day
+        },
+        `${data.month}-${data.day}`
+      );
     })
   ] });
 };

package/dist/components/DateInput/components/CalendarMonthly.d.ts

@@ -1 +1 @@
-export declare const Monthly: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Monthly: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/DateInput/components/CalendarMonthly.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useContext, useState } from "react";
 import { Button } from "../../Button/index.js";
 import { Row } from "../../Row/index.js";
@@ -28,7 +28,9 @@ const Monthly = () => {
     setHoveredDate,
     hoveredDate
   } = useContext(DateInputContext);
-  const [rangeState, setRangeState] = useState(range?.start && !range.end ? "end" : "start");
+  const [rangeState, setRangeState] = useState(
+    range?.start && !range.end ? "end" : "start"
+  );
   return /* @__PURE__ */ jsx(Row, { gap: 1, templateColumns: "1fr 1fr 1fr", children: Object.entries(MONTHS).map((month, index) => {
     const constructedDate = new Date(yearToShow, index, 1);
     const isExcluded = excludeDates ? excludeDates.map((date) => isSameMonth(constructedDate, date)).includes(true) : false;
@@ -39,39 +41,45 @@ const Monthly = () => {
     const onClickRange = (event, newDate) => {
       if (selectsRange) {
         if (rangeState === "end" && isAfterStartDate) {
-          setRange?.({
-            end: newDate,
-            start: range.start
-          });
+          setRange?.({ end: newDate, start: range.start });
           onChange?.([range.start, newDate], event);
-          setInputValue(formatValue(null, {
-            end: newDate,
-            start: range.start
-          }, true, true, format));
+          setInputValue(
+            formatValue(
+              null,
+              { end: newDate, start: range.start },
+              true,
+              true,
+              format
+            )
+          );
           setVisible(false);
           setRangeState("start");
         } else if (rangeState === "end" && !isAfterStartDate && range) {
-          setRange?.({
-            end: range.start,
-            start: newDate
-          });
+          setRange?.({ end: range.start, start: newDate });
           onChange?.([newDate, range.start], event);
-          setInputValue(formatValue(null, {
-            end: range.start,
-            start: newDate
-          }, true, true, format));
+          setInputValue(
+            formatValue(
+              null,
+              { end: range.start, start: newDate },
+              true,
+              true,
+              format
+            )
+          );
           setVisible(false);
           setRangeState("start");
         } else {
-          setRange?.({
-            end: null,
-            start: newDate
-          });
+          setRange?.({ end: null, start: newDate });
           onChange?.([newDate, null], event);
-          setInputValue(formatValue(null, {
-            end: null,
-            start: newDate
-          }, true, true, format));
+          setInputValue(
+            formatValue(
+              null,
+              { end: null, start: newDate },
+              true,
+              true,
+              format
+            )
+          );
           setRangeState("end");
         }
       }
@@ -85,19 +93,34 @@ const Monthly = () => {
       }
       return "neutral";
     };
-    return /* @__PURE__ */ jsx(Button, { "aria-label": monthState(), className: `${dayMonth} ${capitalizedText}`, disabled: disabled || isExcluded || isOutsideRange, onClick: (event) => {
-      if (!isExcluded && !isOutsideRange && !readOnly) {
-        if (selectsRange) {
-          onClickRange(event, constructedDate);
-        } else {
-          setMonthToShow(index + 1);
-          setValue(constructedDate);
-          onChange?.(constructedDate, event);
-          setInputValue(formatValue(constructedDate, null, true, false, format));
-          setVisible(false);
-        }
-      }
-    }, onMouseEnter: () => setHoveredDate(constructedDate), sentiment: isSelected || isInHoveredRange ? "primary" : "neutral", variant: isSelected || isInHoveredRange ? "filled" : "ghost", children: month[1] }, month[0]);
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        "aria-label": monthState(),
+        className: `${dayMonth} ${capitalizedText}`,
+        disabled: disabled || isExcluded || isOutsideRange,
+        onClick: (event) => {
+          if (!isExcluded && !isOutsideRange && !readOnly) {
+            if (selectsRange) {
+              onClickRange(event, constructedDate);
+            } else {
+              setMonthToShow(index + 1);
+              setValue(constructedDate);
+              onChange?.(constructedDate, event);
+              setInputValue(
+                formatValue(constructedDate, null, true, false, format)
+              );
+              setVisible(false);
+            }
+          }
+        },
+        onMouseEnter: () => setHoveredDate(constructedDate),
+        sentiment: isSelected || isInHoveredRange ? "primary" : "neutral",
+        variant: isSelected || isInHoveredRange ? "filled" : "ghost",
+        children: month[1]
+      },
+      month[0]
+    );
   }) });
 };
 export {

package/dist/components/DateInput/components/Popup.d.ts

@@ -6,5 +6,5 @@ type PopupProps = {
     refInput: RefObject<HTMLInputElement | null>;
     content: ReactNode;
 };
-export declare const CalendarPopup: ({ children, visible, setVisible, refInput, content, }: PopupProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const CalendarPopup: ({ children, visible, setVisible, refInput, content, }: PopupProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/DateInput/components/Popup.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useRef, useEffect } from "react";
 import { Popup } from "../../Popup/index.js";
 import { POPUP_WIDTH } from "../constants.js";
@@ -18,10 +18,33 @@ const CalendarPopup = ({
 }) => {
   const ref = useRef(null);
   useEffect(() => {
-    document.addEventListener("mousedown", (event) => handleClickOutside(event, ref, setVisible, refInput));
-    return () => document.removeEventListener("mousedown", (event) => handleClickOutside(event, ref, setVisible, refInput));
+    document.addEventListener(
+      "mousedown",
+      (event) => handleClickOutside(event, ref, setVisible, refInput)
+    );
+    return () => document.removeEventListener(
+      "mousedown",
+      (event) => handleClickOutside(event, ref, setVisible, refInput)
+    );
   }, [ref, setVisible, refInput]);
-  return /* @__PURE__ */ jsx(Popup, { align: "start", className: dateinputPopup, debounceDelay: 0, disableAnimation: true, hasArrow: false, maxWidth: POPUP_WIDTH, placement: "bottom", ref, role: "dialog", tabIndex: 0, text: content, visible, children });
+  return /* @__PURE__ */ jsx(
+    Popup,
+    {
+      align: "start",
+      className: dateinputPopup,
+      debounceDelay: 0,
+      disableAnimation: true,
+      hasArrow: false,
+      maxWidth: POPUP_WIDTH,
+      placement: "bottom",
+      ref,
+      role: "dialog",
+      tabIndex: 0,
+      text: content,
+      visible,
+      children
+    }
+  );
 };
 export {
   CalendarPopup

package/dist/components/DateInput/helpers.js

@@ -22,7 +22,11 @@ const getDateISO = (showMonthYearPicker, date) => {
     if (showMonthYearPicker) {
       return [addZero(date.getMonth() + 1), date.getFullYear()].join("/");
     }
-    return [addZero(date.getMonth() + 1), addZero(date.getDate()), date.getFullYear()].join("/");
+    return [
+      addZero(date.getMonth() + 1),
+      addZero(date.getDate()),
+      date.getFullYear()
+    ].join("/");
   }
   return "";
 };
@@ -53,7 +57,10 @@ const createDate = (value, showMonthYearPicker) => {
 };
 const createDateRange = (value, showMonthYearPicker) => {
   const [startDateInput, endDateInput] = value.split(" - ").map((val) => createDate(val, showMonthYearPicker));
-  const computedNewRange = [startDateInput instanceof Date && !Number.isNaN(startDateInput.getTime()) ? startDateInput : null, endDateInput instanceof Date && !Number.isNaN(endDateInput.getTime()) ? endDateInput : null];
+  const computedNewRange = [
+    startDateInput instanceof Date && !Number.isNaN(startDateInput.getTime()) ? startDateInput : null,
+    endDateInput instanceof Date && !Number.isNaN(endDateInput.getTime()) ? endDateInput : null
+  ];
   return computedNewRange;
 };
 export {