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

package/dist/components/Chip/ChipIcon.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import * as Icon from "@ultraviolet/icons";
 import { useContext } from "react";
 import { ChipContext } from "./ChipContext.js";
@@ -13,21 +13,55 @@ const ChipIcon = ({
   if (!context) {
     throw new Error("Chip.Icon can only be used inside a Chip component");
   }
-  const {
-    disabled,
-    isActive,
-    iconRef
-  } = context;
+  const { disabled, isActive, iconRef } = context;
   const IconUsed = Icon[`${name.charAt(0).toUpperCase() + name.slice(1)}Icon`];
   if (onClick) {
-    return /* @__PURE__ */ jsx("button", { className: buttonContainer, "data-active": isActive, "data-disabled": disabled, "data-has-onclick": !!onClick && !disabled, "data-testid": dataTestId, onClick: (event) => {
-      if (!disabled && onClick) {
-        event.stopPropagation();
-        onClick();
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: buttonContainer,
+        "data-active": isActive,
+        "data-disabled": disabled,
+        "data-has-onclick": !!onClick && !disabled,
+        "data-testid": dataTestId,
+        onClick: (event) => {
+          if (!disabled && onClick) {
+            event.stopPropagation();
+            onClick();
+          }
+        },
+        ref: iconRef,
+        children: /* @__PURE__ */ jsx(
+          IconUsed,
+          {
+            disabled,
+            prominence: isActive ? "stronger" : "default",
+            sentiment: "neutral",
+            size: "small"
+          }
+        )
       }
-    }, ref: iconRef, children: /* @__PURE__ */ jsx(IconUsed, { disabled, prominence: isActive ? "stronger" : "default", sentiment: "neutral", size: "small" }) });
+    );
   }
-  return /* @__PURE__ */ jsx("div", { className: buttonContainer, "data-active": isActive, "data-disabled": disabled, "data-testid": dataTestId, ref: iconRef, children: /* @__PURE__ */ jsx(IconUsed, { disabled, prominence: isActive ? "stronger" : "default", sentiment: "neutral", size: "small" }) });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: buttonContainer,
+      "data-active": isActive,
+      "data-disabled": disabled,
+      "data-testid": dataTestId,
+      ref: iconRef,
+      children: /* @__PURE__ */ jsx(
+        IconUsed,
+        {
+          disabled,
+          prominence: isActive ? "stronger" : "default",
+          sentiment: "neutral",
+          size: "small"
+        }
+      )
+    }
+  );
 };
 export {
   ChipIcon

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

@@ -13,11 +13,11 @@ type ChipType = {
  * Chip component is used to display a clickable status or a label in a small container
  */
 export declare const Chip: {
-    ({ children, size, disabled, active, className, "data-testid": dataTestId, onClick, style, }: ChipType): import("@emotion/react/jsx-runtime").JSX.Element;
+    ({ children, size, disabled, active, className, "data-testid": dataTestId, onClick, style, }: ChipType): import("react/jsx-runtime").JSX.Element;
     Icon: ({ name, onClick, "data-testid": dataTestId, }: {
-        name: "search" | "anchor" | "bold" | "filter" | "sort" | "italic" | "underline" | "drag" | "address" | "audio" | "video" | "image" | "stop" | "view" | "id" | "pen" | "download" | "cancel" | "close" | "play" | "send" | "email" | "arrowLeft" | "upload" | "addressOutline" | "addressPlay" | "adjustmentsHorizontal" | "adjustmentsHorizontalOutline" | "alertCircle" | "alertCircleOutline" | "arrowDown" | "arrowLeftBottom" | "arrowLeftDouble" | "arrowRightBottom" | "arrowRightDouble" | "arrowRight" | "arrowUp" | "attach" | "autoFix" | "autoFixOutline" | "bookOpenOutline" | "bookOpenOutlineOutline" | "boxEssentials" | "boxEssentialsOutline" | "bullhorn" | "bullhornOutline" | "burger" | "calculator" | "calculatorOutline" | "calendarRange" | "calendarRangeOutline" | "chat" | "chatOutline" | "checkCircle" | "checkCircleOutline" | "check" | "clickhouse" | "lock" | "clock" | "lockOutline" | "clockOutline" | "closeCircleOutline" | "console" | "consoleOutline" | "copyContent" | "credential" | "credentialOutline" | "creditCard" | "creditCardOutline" | "database" | "databaseOutline" | "delete" | "deleteOutline" | "detach" | "doc" | "docOutline" | "dotsHorizontal" | "dotsVertical" | "earth" | "earthOutline" | "east" | "eastShort" | "emailOutline" | "emailRemove" | "emailRemoveOutline" | "equal" | "escape" | "expand" | "expandMore" | "eye" | "eyeOff" | "eyeOffOutline" | "eyeOutline" | "filterOutline" | "folder" | "folderOutline" | "github" | "helpCircle" | "helpCircleOutline" | "idOutline" | "imageOutline" | "information" | "informationOutline" | "instagram" | "leaf" | "leafOutline" | "leftRightArrow" | "lightBulb" | "lightBulbOutline" | "linkedin" | "listBullet" | "listNumber" | "logout" | "members" | "membersOutline" | "minus" | "moon" | "moonOutline" | "mosaic" | "mosaicOutline" | "music" | "musicOutline" | "north" | "northShort" | "notification" | "notificationOutline" | "openInNew" | "organization" | "paperclip" | "partnerSpace" | "pen2" | "pen2Outline" | "pencil" | "pencilOutline" | "penOutline" | "phone" | "phoneOutline" | "pin" | "pinOutline" | "playOutline" | "plus" | "privacy" | "privacyOutline" | "profile" | "profileOutline" | "progressCheck" | "rayEndArrow" | "rayStartArrow" | "rayStartEnd" | "rayTopArrow" | "reboot" | "restore" | "revoke" | "rocket" | "rocketOutline" | "rss" | "sendOutline" | "settings" | "settingsOutline" | "sidebar" | "sidebarOutline" | "slack" | "south" | "southShort" | "sparkles" | "sparklesOutline" | "star" | "starOutline" | "stopOutline" | "sun" | "sunOutline" | "support" | "supportOutline" | "switchOrga" | "thumbsDown" | "thumbsDownOutline" | "thumbsUp" | "thumbsUpOutline" | "twitter" | "unlock" | "unlockOutline" | "unpin" | "unpinOutline" | "videoOutline" | "weatherNight" | "weatherNightOutline" | "west" | "westShort" | "youtube";
+        name: "search" | "anchor" | "bold" | "filter" | "sort" | "italic" | "underline" | "drag" | "address" | "audio" | "video" | "image" | "stop" | "view" | "id" | "pen" | "download" | "cancel" | "close" | "play" | "send" | "email" | "arrowLeft" | "upload" | "addressOutline" | "addressPlay" | "adjustmentsHorizontal" | "adjustmentsHorizontalOutline" | "alertCircle" | "alertCircleOutline" | "arrowDown" | "arrowLeftBottom" | "arrowLeftDouble" | "arrowRightBottom" | "arrowRightDouble" | "arrowRight" | "arrowUp" | "attach" | "autoFix" | "autoFixOutline" | "bookOpenOutline" | "bookOpenOutlineOutline" | "boxEssentials" | "boxEssentialsOutline" | "bullhorn" | "bullhornOutline" | "burger" | "calculator" | "calculatorOutline" | "calendarRange" | "calendarRangeOutline" | "chat" | "chatOutline" | "checkCircle" | "checkCircleOutline" | "check" | "clickhouse" | "lock" | "clock" | "lockOutline" | "clockOutline" | "closeCircle" | "closeCircleOutline" | "console" | "consoleOutline" | "copyContent" | "credential" | "credentialOutline" | "creditCard" | "creditCardOutline" | "database" | "databaseOutline" | "delete" | "deleteOutline" | "detach" | "doc" | "docOutline" | "dotsHorizontal" | "dotsVertical" | "earth" | "earthOutline" | "east" | "eastShort" | "emailOutline" | "emailRemove" | "emailRemoveOutline" | "equal" | "escape" | "expand" | "expandMore" | "eye" | "eyeOff" | "eyeOffOutline" | "eyeOutline" | "filterOutline" | "folder" | "folderOutline" | "github" | "helpCircle" | "helpCircleOutline" | "idOutline" | "imageOutline" | "information" | "informationOutline" | "instagram" | "leaf" | "leafOutline" | "leftRightArrow" | "lightBulb" | "lightBulbOutline" | "linkedin" | "listBullet" | "listNumber" | "logout" | "members" | "membersOutline" | "minus" | "moon" | "moonOutline" | "mosaic" | "mosaicOutline" | "music" | "musicOutline" | "north" | "northShort" | "notification" | "notificationOutline" | "openInNew" | "organization" | "paperclip" | "partnerSpace" | "pen2" | "pen2Outline" | "pencil" | "pencilOutline" | "penOutline" | "phone" | "phoneOutline" | "pin" | "pinOutline" | "playOutline" | "plus" | "privacy" | "privacyOutline" | "profile" | "profileOutline" | "progressCheck" | "rayEndArrow" | "rayStartArrow" | "rayStartEnd" | "rayTopArrow" | "reboot" | "restore" | "revoke" | "rocket" | "rocketOutline" | "rss" | "sendOutline" | "settings" | "settingsOutline" | "sidebar" | "sidebarOutline" | "slack" | "south" | "southShort" | "sparkles" | "sparklesOutline" | "star" | "starOutline" | "stopOutline" | "sun" | "sunOutline" | "support" | "supportOutline" | "switchOrga" | "thumbsDown" | "thumbsDownOutline" | "thumbsUp" | "thumbsUpOutline" | "twitter" | "unlock" | "unlockOutline" | "unpin" | "unpinOutline" | "videoOutline" | "weatherNight" | "weatherNightOutline" | "west" | "westShort" | "youtube";
         onClick?: () => void;
         'data-testid'?: string;
-    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    }) => import("react/jsx-runtime").JSX.Element;
 };
 export {};

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;