@dmsi/wedgekit-react 0.0.5 → 0.0.6

package/src/components/Time.tsx

@@ -1,23 +1,19 @@
 import { ComponentProps, ReactNode, useEffect, useRef, useState } from "react";
 import { InputBase } from "./Input";
-import { Surface } from "./Surface";
 import { createPortal } from "react-dom";
 import clsx from "clsx";
 import { typography } from "../classNames";
 import { Icon } from "./Icon";
 import { findDocumentRoot } from "../utils";
+import { Stack } from "./Stack";
 
-interface TimeProps
-  extends Omit<
-    ComponentProps<"input">,
-    "type" | "children" | "dangerouslySetInnerHTML"
-  > {
+type TimeProps = {
   label?: string;
   error?: boolean;
   readOnly?: boolean;
   caption?: ReactNode;
   format?: "12h" | "24h";
-}
+} & Omit<ComponentProps<"input">, "type" | "children" | "dangerouslySetInnerHTML">;
 
 const timePickerScrollableStyle = "overflow-auto max-h-full py-4 no-scrollbar";
 
@@ -25,6 +21,7 @@ export const Time = ({ onChange, format = "12h", ...props }: TimeProps) => {
   const [showTimePicker, setShowTimePicker] = useState(false);
   const [hasInteracted, setHasInteracted] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
+  const inputContainerRef = useRef<HTMLLabelElement>(null);
   const timeRef = useRef<HTMLDivElement>(null);
   const [timePosition, setTimePosition] = useState({
     top: 0,
@@ -49,36 +46,21 @@ export const Time = ({ onChange, format = "12h", ...props }: TimeProps) => {
       : "";
 
   const updatePosition = () => {
-    if (inputRef.current) {
-      requestAnimationFrame(() => {
-        const parent = inputRef.current ? inputRef.current.parentElement : null;
-        const rect = parent?.getBoundingClientRect();
-        if (rect) {
-          setTimePosition({
-            top: rect.bottom + window.scrollY + 6,
-            left: rect.left + window.scrollX,
-            width: rect.width,
-          });
-        }
+    if (inputContainerRef.current) {
+      const rect = inputContainerRef.current.getBoundingClientRect();
+      setTimePosition({
+        top: rect.bottom + window.scrollY + 6,
+        left: rect.left + window.scrollX,
+        width: rect.width,
       });
     }
   };
 
   useEffect(() => {
-    updatePosition();
-
-    const resizeObserver = new ResizeObserver(updatePosition);
-    if (inputRef.current) {
-      resizeObserver.observe(inputRef.current);
+    if (showTimePicker) {
+      updatePosition();
     }
-
-    window.addEventListener("scroll", updatePosition);
-
-    return () => {
-      resizeObserver.disconnect();
-      window.removeEventListener("scroll", updatePosition);
-    };
-  }, []);
+  }, [showTimePicker, is12HourFormat]);
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -99,7 +81,7 @@ export const Time = ({ onChange, format = "12h", ...props }: TimeProps) => {
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
-  }, [showTimePicker]);
+  }, [showTimePicker, is12HourFormat]);
 
   useEffect(() => {
     if (formattedTime && hasInteracted) {
@@ -201,6 +183,12 @@ export const Time = ({ onChange, format = "12h", ...props }: TimeProps) => {
     onChange?.(e);
   };
 
+  const selectedRefs = {
+    hour: useRef<HTMLButtonElement | null>(null),
+    minute: useRef<HTMLButtonElement | null>(null),
+    meridiem: useRef<HTMLButtonElement | null>(null),
+  };
+
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === "Enter") {
       setShowTimePicker(false);
@@ -273,40 +261,27 @@ export const Time = ({ onChange, format = "12h", ...props }: TimeProps) => {
     if (is12HourFormat) setMeridiem(mer);
   };
 
-  const selectedRefs = {
-    hour: useRef<HTMLButtonElement | null>(null),
-    minute: useRef<HTMLButtonElement | null>(null),
-    meridiem: useRef<HTMLButtonElement | null>(null),
-  };
-
   useEffect(() => {
     if (showTimePicker) {
-      selectedRefs.hour.current?.scrollIntoView({
-        block: "center",
-        behavior: "instant",
-      });
-      selectedRefs.minute.current?.scrollIntoView({
-        block: "center",
-        behavior: "instant",
-      });
-      if (is12HourFormat) {
-        selectedRefs.meridiem.current?.scrollIntoView({
-          block: "center",
+      // Use a slight delay to ensure DOM is updated
+      setTimeout(() => {
+        selectedRefs.hour.current?.scrollIntoView({
+          block: "nearest",
           behavior: "instant",
         });
-      }
+        selectedRefs.minute.current?.scrollIntoView({
+          block: "nearest",
+          behavior: "instant",
+        });
+        if (is12HourFormat) {
+          selectedRefs.meridiem.current?.scrollIntoView({
+            block: "nearest",
+            behavior: "instant",
+          });
+        }
+      }, 0);
     }
-  }, [
-    showTimePicker,
-    hour,
-    minute,
-    meridiem,
-    is12HourFormat,
-    selectedRefs.hour,
-    selectedRefs.minute,
-    selectedRefs.meridiem,
-  ]);
-
+  }, [showTimePicker, is12HourFormat, selectedRefs.hour, selectedRefs.minute, selectedRefs.meridiem]);
   const renderOptions = (
     items: string[],
     type: "hour" | "minute" | "meridiem",
@@ -341,6 +316,7 @@ export const Time = ({ onChange, format = "12h", ...props }: TimeProps) => {
       <InputBase
         {...props}
         ref={inputRef}
+        inputContainerRef={inputContainerRef}
         value={inputValue}
         placeholder={is12HourFormat ? "hh:mm am" : "hh:mm"}
         after={
@@ -356,14 +332,19 @@ export const Time = ({ onChange, format = "12h", ...props }: TimeProps) => {
       />
       {showTimePicker &&
         createPortal(
-          <Surface
+          <Stack
             elevation={4}
-            className="absolute z-50 bg-background-grouped-primary-normal h-60 overflow-hidden"
-            style={{
-              top: `${timePosition.top}px`,
-              left: `${timePosition.left}px`,
-              minWidth: `${timePosition.width}px`,
-            }}
+            height={240}
+            position="absolute"
+            backgroundColor="background-grouped-primary-normal"
+            overflowX="hidden"
+            overflowY="hidden"
+            zIndex={50}
+            top={timePosition.top}
+            left={timePosition.left}
+            minWidth={timePosition.width}
+            maxWidth={0}
+            rounded
           >
             <div ref={timeRef} className="px-4 flex h-60">
               <div className={clsx(timePickerScrollableStyle)}>
@@ -388,7 +369,7 @@ export const Time = ({ onChange, format = "12h", ...props }: TimeProps) => {
                 </div>
               )}
             </div>
-          </Surface>,
+          </Stack>,
           findDocumentRoot(timeRef.current),
         )}
     </div>
@@ -454,4 +435,4 @@ function TimeCell({
       {children}
     </button>
   );
-}
+}

package/src/components/Toast.tsx

@@ -204,7 +204,7 @@ export const Toast = ({
       <div className="flex gap-desktop-layout-group-gap items-center">
         <div className="flex flex-col gap-desktop-component-gap w-68">
           {title && <Heading3>{title}</Heading3>}
-          {message && <Paragraph className="break-all">{message}</Paragraph>}
+          {message && <Paragraph>{message}</Paragraph>}
         </div>
         {showViewButton && (
           <Button variant="tertiary" href={viewButtonLink}>

package/src/darkmode.css

@@ -11,11 +11,16 @@
     --color-text-secondary-error: var(--color-critical-300);
 
     --color-text-success-normal: var(--color-success-200);
+    --color-text-success-disabled: var(--color-neutral-300);
+    --color-text-success-error: var(--color-critical-300);
+
     --color-text-warning-normal: var(--color-warning-200);
+    --color-text-warning-disabled: var(--color-neutral-300);
+    --color-text-warning-error: var(--color-critical-300);
 
-    --color-text-link-normal: var(--color-action-300);
-    --color-text-link-hover: var(--color-action-400);
-    --color-text-link-active: var(--color-action-200);
+    --color-text-link-normal: var(--color-link-300);
+    --color-text-link-hover: var(--color-link-400);
+    --color-text-link-active: var(--color-link-200);
     --color-text-link-disabled: var(--color-neutral-400);
 
     --color-border-primary-normal: var(--color-neutral-400);
@@ -76,11 +81,21 @@
     --color-icon-action-primary-active: var(--color-action-200);
     --color-icon-action-primary-disabled: var(--color-neutral-400);
 
+    --color-icon-action-secondary-normal: var(--color-action-300);
+    --color-icon-action-secondary-hover: var(--color-action-400);
+    --color-icon-action-secondary-active: var(--color-action-200);
+    --color-icon-action-secondary-disabled: var(--color-neutral-400);
+
     --color-icon-on-action-primary-normal: var(--color-neutral-600);
     --color-icon-on-action-primary-hover: var(--color-neutral-500);
     --color-icon-on-action-primary-active: var(--color-neutral-600);
     --color-icon-on-action-primary-disabled: var(--color-neutral-400);
 
+    --color-icon-action-critical-normal: var(--color-critical-300);
+    --color-icon-action-critical-hover: var(--color-critical-400);
+    --color-icon-action-critical-active: var(--color-critical-200);
+    --color-icon-action-critical-disabled: var(--color-neutral-400);
+
     --color-icon-brand-primary-normal: var(--color-brand-300);
     --color-icon-brand-primary-hover: var(--color-brand-400);
     --color-icon-brand-primary-active: var(--color-brand-200);

package/src/fonts.css

@@ -11,6 +11,7 @@
   /* src: url("../static/icons-light.woff2") format("woff2"); - We needed icons-light with FILL option */
   font-weight: 300;
   font-style: normal;
+  font-display: block;
 }
 
 @font-face {
@@ -18,4 +19,5 @@
   src: url("../static/icons-normal[FILL].woff2") format("woff2");
   font-weight: 400;
   font-style: normal;
+  font-display: block;
 }

package/src/index.css

@@ -36,6 +36,10 @@
   --color-action-500: var(--color-action-500-user-selected, #00365a);
 
   /* ── Link ────────────────────────────── */
+  --color-link-000: var(
+    --color-link-000-user-selected,
+    var(--color-action-000)
+  );
   --color-link-100: var(
     --color-link-100-user-selected,
     var(--color-action-100)
@@ -222,11 +226,17 @@
   --color-text-secondary-error: var(--color-critical-400);
 
   --color-text-success-normal: var(--color-success-500);
+  --color-text-success-disabled: var(--color-neutral-400);
+  --color-text-success-error: var(--color-critical-400);
+
   --color-text-warning-normal: var(--color-warning-500);
+  --color-text-warning-disabled: var(--color-neutral-400);
+  --color-text-warning-error: var(--color-critical-400);
+
 
-  --color-text-link-normal: var(--color-action-400);
-  --color-text-link-hover: var(--color-action-500);
-  --color-text-link-active: var(--color-action-300);
+  --color-text-link-normal: var(--color-link-400);
+  --color-text-link-hover: var(--color-link-500);
+  --color-text-link-active: var(--color-link-300);
   --color-text-link-disabled: var(--color-neutral-400);
 
   --color-border-primary-normal: var(--color-neutral-300);
@@ -323,6 +333,11 @@
   --color-icon-action-primary-active: var(--color-action-300);
   --color-icon-action-primary-disabled: var(--color-neutral-300);
 
+  --color-icon-action-secondary-normal: var(--color-action-400);
+  --color-icon-action-secondary-hover: var(--color-action-500);
+  --color-icon-action-secondary-active: var(--color-action-300);
+  --color-icon-action-secondary-disabled: var(--color-neutral-400);
+
   --color-icon-on-action-primary-normal: var(--color-neutral-000);
   --color-icon-on-action-primary-hover: var(--color-neutral-000);
   --color-icon-on-action-primary-active: var(--color-neutral-000);
@@ -333,6 +348,11 @@
   --color-icon-on-action-secondary-active: var(--color-action-300);
   --color-icon-on-action-secondary-disabled: var(--color-neutral-400);
 
+  --color-icon-action-critical-normal: var(--color-critical-400);
+  --color-icon-action-critical-hover: var(--color-critical-500);
+  --color-icon-action-critical-active: var(--color-critical-300);
+  --color-icon-action-critical-disabled: var(--color-neutral-400);
+
   --color-icon-action-critical-secondary-normal: var(--color-critical-400);
   --color-icon-action-critical-secondary-hover: var(--color-critical-500);
   --color-icon-action-critical-secondary-active: var(--color-critical-300);

package/dist/acc.css

@@ -1,3 +0,0 @@
-/* src/acc.css */
-[data-theme=acc] {
-}

package/dist/agility.css

@@ -1,7 +0,0 @@
-/* src/agility.css */
-[data-theme=agility] {
-  --color-background-brand-normal: #00486b;
-  --color-text-on-action-primary-normal: #002131;
-  --color-text-on-action-primary-hover: #002131;
-  --color-text-on-action-primary-active: #1a6280;
-}

package/dist/chunk-22YZ6LFN.js

@@ -1,322 +0,0 @@
-import {
-  Icon
-} from "./chunk-IGQVA7SC.js";
-import {
-  componentGap,
-  componentPadding,
-  componentPaddingXUsingComponentGap,
-  componentPaddingYUsingComponentGap,
-  paddingUsingComponentGap,
-  typography
-} from "./chunk-JDHZQIFC.js";
-import {
-  __objRest,
-  __spreadProps,
-  __spreadValues
-} from "./chunk-ORMEWXMH.js";
-
-// src/components/CalendarRange.tsx
-import clsx from "clsx";
-import React, { useState } from "react";
-import { Temporal } from "@js-temporal/polyfill";
-import { jsx, jsxs } from "react/jsx-runtime";
-function isWeekend(date) {
-  return date.dayOfWeek === 6 || date.dayOfWeek === 7;
-}
-function DateCell(_a) {
-  var _b = _a, {
-    date,
-    isInMonth,
-    isToday,
-    isSelected,
-    inRange,
-    isDisabled,
-    isRangeStart,
-    isRangeEnd,
-    onClick,
-    onMouseEnter,
-    onMouseLeave,
-    cellPadding = "",
-    isRangeDisabled = false
-  } = _b, props = __objRest(_b, [
-    "date",
-    "isInMonth",
-    "isToday",
-    "isSelected",
-    "inRange",
-    "isDisabled",
-    "isRangeStart",
-    "isRangeEnd",
-    "onClick",
-    "onMouseEnter",
-    "onMouseLeave",
-    "cellPadding",
-    "isRangeDisabled"
-  ]);
-  return /* @__PURE__ */ jsx(
-    "span",
-    __spreadProps(__spreadValues({}, props), {
-      className: clsx(
-        "flex items-center justify-center aspect-square select-none transition-colors border duration-100 font-medium",
-        typography.caption,
-        cellPadding,
-        !isToday && !isSelected && !inRange && !isDisabled && !isRangeStart && !isRangeEnd && "border-transparent",
-        !isInMonth && "border-transparent",
-        // Today: subtle border ring
-        isToday && !isSelected && !inRange && "rounded-full border-border-primary-normal ",
-        // Selected: Figma blue, white text, strong shadow
-        isSelected && "bg-action-400 text-white border-action-400 z-10",
-        !isSelected && !inRange && "rounded-base",
-        // When range is disabled OR when only 'from' is selected (no range yet), apply rounded corners
-        (isRangeDisabled || !inRange && isSelected) && "rounded-base",
-        inRange && isSelected && "hover:border-action-500",
-        // In range: Figma light blue background
-        inRange && !isSelected && "bg-action-100 text-text-primary-normal border-y-action-400 border-x-0  ",
-        // Disabled: Figma gray, no pointer, no hover
-        isDisabled && !inRange ? "text-text-primary-disabled bg-transparent pointer-events-none opacity-40 border-transparent" : [
-          "text-text-primary-normal cursor-pointer",
-          // Figma hover: blue bg, blue text (or red text if selected)
-          isSelected ? "hover:bg-background-action-primary-hover hover:text-white" : "hover:bg-action-100 hover:text-text-action-primary-hover",
-          // Figma active: darker blue bg, white text
-          "active:bg-action-300 active:text-white",
-          // Figma focus: ring
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-action-400"
-        ],
-        isRangeStart && "rounded-l",
-        isRangeEnd && "rounded-r"
-      ),
-      tabIndex: isDisabled ? -1 : 0,
-      "aria-disabled": isDisabled,
-      onClick: () => !isDisabled && isInMonth && onClick(),
-      onMouseEnter: () => isInMonth && onMouseEnter(),
-      onMouseLeave: () => isInMonth && onMouseLeave(),
-      children: isInMonth ? date.day : ""
-    })
-  );
-}
-function CalendarRange({
-  from,
-  to,
-  onChange,
-  isDateAvailable,
-  mode = "double",
-  cardStyle = false,
-  disableRange = false
-}) {
-  const weekDays = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
-  const parseDate = (d) => {
-    if (!d) return void 0;
-    if (typeof d === "number")
-      return Temporal.PlainDate.from(new Date(d).toISOString().slice(0, 10));
-    if (typeof d === "string") return Temporal.PlainDate.from(d);
-    return void 0;
-  };
-  const fromDate = parseDate(from);
-  const toDate = parseDate(to);
-  const today = Temporal.Now.plainDateISO();
-  const [baseMonth, setBaseMonth] = useState(
-    fromDate != null ? fromDate : today.with({ day: 1 })
-  );
-  const [selecting, setSelecting] = useState("from");
-  const [pendingFrom, setPendingFrom] = useState(void 0);
-  const [hoveredDate, setHoveredDate] = useState(void 0);
-  function getMonthData(monthOffset) {
-    const monthDate = baseMonth.add({ months: monthOffset }).with({ day: 1 });
-    const days = monthDate.daysInMonth;
-    const firstDayOffset = monthDate.dayOfWeek % 7;
-    return {
-      name: monthDate.toLocaleString("en-US", { month: "long" }),
-      year: monthDate.year,
-      days,
-      firstDayOffset,
-      date: monthDate
-    };
-  }
-  function handleDayClick(date) {
-    if (isDateAvailable && !isDateAvailable(date)) return;
-    if (mode === "single" && disableRange) {
-      if (onChange) {
-        onChange(date.toString(), date.toString());
-      }
-      return;
-    }
-    if (selecting === "from") {
-      setPendingFrom(date);
-      setSelecting("to");
-      setHoveredDate(void 0);
-    } else if (pendingFrom) {
-      if (onChange) {
-        const [start, end] = Temporal.PlainDate.compare(date, pendingFrom) < 0 ? [date, pendingFrom] : [pendingFrom, date];
-        onChange(start.toString(), end.toString());
-      }
-      setPendingFrom(void 0);
-      setSelecting("from");
-      setHoveredDate(void 0);
-    }
-  }
-  function isInRange(date) {
-    if (mode === "single" && disableRange) {
-      return false;
-    }
-    if (pendingFrom && selecting === "to" && hoveredDate) {
-      const [start, end] = Temporal.PlainDate.compare(hoveredDate, pendingFrom) < 0 ? [hoveredDate, pendingFrom] : [pendingFrom, hoveredDate];
-      return Temporal.PlainDate.compare(date, start) >= 0 && Temporal.PlainDate.compare(date, end) <= 0;
-    }
-    if (!pendingFrom && fromDate && toDate) {
-      return Temporal.PlainDate.compare(date, fromDate) >= 0 && Temporal.PlainDate.compare(date, toDate) <= 0;
-    }
-    return false;
-  }
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: clsx(
-        "relative bg-background-grouped-primary-normal rounded-base w-fit",
-        componentPadding,
-        componentGap,
-        cardStyle && "shadow-4",
-        // baseTransition,
-        "overflow-hidden"
-      ),
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: clsx(
-            "flex flex-row items-start justify-start bg-background-primary-normal overflow-clip",
-            componentGap,
-            paddingUsingComponentGap
-          ),
-          children: (mode === "double" ? [0, 1] : [0]).map((offset, idx) => {
-            const month = getMonthData(offset);
-            const totalCells = 42;
-            const emptyCells = month.firstDayOffset;
-            return /* @__PURE__ */ jsxs(React.Fragment, { children: [
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  className: clsx(
-                    "flex flex-col",
-                    componentGap,
-                    componentPadding
-                  ),
-                  children: [
-                    /* @__PURE__ */ jsxs(
-                      "div",
-                      {
-                        className: clsx(
-                          "flex flex-row items-center justify-between",
-                          componentGap,
-                          componentPaddingXUsingComponentGap,
-                          componentPaddingYUsingComponentGap,
-                          "mb-3",
-                          typography.label,
-                          "text-text-action-primary-normal"
-                        ),
-                        children: [
-                          idx === 0 ? /* @__PURE__ */ jsx(
-                            "button",
-                            {
-                              type: "button",
-                              className: clsx(
-                                "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-primary-normal",
-                                componentPadding,
-                                "mr-1"
-                              ),
-                              "aria-label": "Previous month",
-                              onClick: () => setBaseMonth(baseMonth.subtract({ months: 1 })),
-                              children: /* @__PURE__ */ jsx(Icon, { name: "chevron_left", size: 24 })
-                            }
-                          ) : /* @__PURE__ */ jsx("span", { className: clsx(componentPadding, "mr-1") }),
-                          /* @__PURE__ */ jsxs("div", { className: "flex gap-desktop-compact-component-padding", children: [
-                            /* @__PURE__ */ jsx("span", { className: "font-semibold text-text-action-primary-normal text-[14px] leading-[1] truncate", children: month.name }),
-                            /* @__PURE__ */ jsx("span", { className: "font-semibold text-text-action-primary-normal text-[14px] leading-[1] px-1 truncate", children: month.year })
-                          ] }),
-                          (mode === "double" ? idx === 1 : true) ? /* @__PURE__ */ jsx(
-                            "button",
-                            {
-                              type: "button",
-                              className: clsx(
-                                "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-primary-normal",
-                                componentPadding,
-                                "ml-1"
-                              ),
-                              "aria-label": "Next month",
-                              onClick: () => setBaseMonth(baseMonth.add({ months: 1 })),
-                              children: /* @__PURE__ */ jsx(Icon, { name: "chevron_right", size: 24 })
-                            }
-                          ) : /* @__PURE__ */ jsx("span", { className: clsx(componentPadding, "ml-1") })
-                        ]
-                      }
-                    ),
-                    /* @__PURE__ */ jsx("div", { className: clsx("grid grid-cols-7 mb-1", componentGap), children: weekDays.map((d) => /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        className: clsx(
-                          typography.caption,
-                          "text-text-secondary-normal text-center"
-                        ),
-                        children: d
-                      },
-                      d
-                    )) }),
-                    /* @__PURE__ */ jsx("div", { className: clsx("grid grid-cols-7"), children: Array.from({ length: totalCells }).map((_, i) => {
-                      const day = i - emptyCells + 1;
-                      const date = month.date.with({ day: 1 }).add({
-                        days: i - emptyCells
-                      });
-                      const isInMonth = day > 0 && day <= month.days;
-                      const isToday = isInMonth && date.equals(today);
-                      const isSelected = isInMonth && (!pendingFrom && fromDate && date.equals(fromDate) || !pendingFrom && toDate && date.equals(toDate) || pendingFrom && date.equals(pendingFrom));
-                      const inRange = isInMonth && isInRange(date);
-                      const isDisabled = !isInMonth || (isDateAvailable ? !isDateAvailable(date) : false);
-                      const hoverDateIsBeforePendingFrom = hoveredDate && pendingFrom && Temporal.PlainDate.compare(hoveredDate, pendingFrom) < 0;
-                      const hoverDateIsAfterPendingFrom = hoveredDate && pendingFrom && Temporal.PlainDate.compare(hoveredDate, pendingFrom) >= 0;
-                      const isRangeStart = mode === "single" && disableRange ? false : !pendingFrom && isInMonth && fromDate && date.equals(fromDate) || hoverDateIsAfterPendingFrom && date.equals(pendingFrom);
-                      const isRangeEnd = mode === "single" && disableRange ? false : !pendingFrom && isInMonth && toDate && date.equals(toDate) || hoverDateIsBeforePendingFrom && date.equals(pendingFrom);
-                      return /* @__PURE__ */ jsx(
-                        DateCell,
-                        {
-                          date,
-                          isInMonth: !!isInMonth,
-                          isToday: !!isToday,
-                          isSelected: !!isSelected,
-                          inRange: !!inRange,
-                          isDisabled: !!isDisabled,
-                          onClick: () => handleDayClick(date),
-                          onMouseEnter: () => setHoveredDate(date),
-                          onMouseLeave: () => setHoveredDate(void 0),
-                          isRangeStart: !!isRangeStart,
-                          isRangeEnd: !!isRangeEnd,
-                          isRangeDisabled: mode === "single" && disableRange,
-                          cellPadding: "p-1.5 md:p-2 lg:p-2.5"
-                        },
-                        i
-                      );
-                    }) })
-                  ]
-                }
-              ),
-              mode === "double" && idx === 0 && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: clsx(
-                    "self-stretch bg-border-primary-normal rounded-base mx-mobile-component-padding desktop:mx-desktop-component-padding compact:mx-desktop-compact-component-padding",
-                    // 1px width, full height, matches Figma divider
-                    "w-px"
-                  )
-                }
-              )
-            ] }, month.name + month.year);
-          })
-        }
-      )
-    }
-  );
-}
-var CalendarRange_default = CalendarRange;
-
-export {
-  isWeekend,
-  CalendarRange,
-  CalendarRange_default
-};