@dmsi/wedgekit-react 0.0.475 → 0.0.477

package/dist/components/CalendarRange.cjs

@@ -64,7 +64,7 @@ __export(CalendarRange_exports, {
   isWeekend: () => isWeekend
 });
 module.exports = __toCommonJS(CalendarRange_exports);
-var import_clsx38 = __toESM(require("clsx"), 1);
+var import_clsx39 = __toESM(require("clsx"), 1);
 
 // src/classNames.ts
 var import_clsx = __toESM(require("clsx"), 1);
@@ -239,7 +239,7 @@ function Icon(_a) {
 }
 
 // src/components/CalendarRange.tsx
-var import_react37 = __toESM(require("react"), 1);
+var import_react39 = __toESM(require("react"), 1);
 var import_polyfill = require("@js-temporal/polyfill");
 
 // src/components/DataGridCell.tsx
@@ -479,6 +479,76 @@ function formatCurrencyDisplay(value) {
 }
 
 // src/utils/date.ts
+function parseInputDate(input) {
+  const match = input.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/);
+  if (!match) {
+    return null;
+  }
+  const [, month, day, year] = match;
+  const paddedMonth = month.padStart(2, "0");
+  const paddedDay = day.padStart(2, "0");
+  return `${year}-${paddedMonth}-${paddedDay}`;
+}
+function isValidDate(dateString) {
+  const date = new Date(dateString);
+  return date instanceof Date && !isNaN(date.getTime()) && dateString === date.toISOString().split("T")[0];
+}
+function formatInputValue(value) {
+  const digits = value.replace(/\D/g, "");
+  if (digits.length < 2) {
+    return digits;
+  }
+  if (digits.length >= 4) {
+    return `${digits.slice(0, 2)}/${digits.slice(2, 4)}/${digits.slice(4, 8)}`;
+  }
+  return `${digits.slice(0, 2)}/${digits.slice(2)}`;
+}
+function isDigit(character) {
+  return /\d/.test(character);
+}
+function isSlash(character) {
+  return character === "/";
+}
+function countDigitsUpToCursor(value, cursorPosition) {
+  let digitCount = 0;
+  for (let i = 0; i < cursorPosition && i < value.length; i++) {
+    if (!isDigit(value[i])) {
+      continue;
+    }
+    digitCount++;
+  }
+  return digitCount;
+}
+function findPositionAfterDigitCount(formattedValue, targetDigitCount) {
+  let currentDigitCount = 0;
+  for (let i = 0; i < formattedValue.length; i++) {
+    if (!isDigit(formattedValue[i])) {
+      continue;
+    }
+    currentDigitCount++;
+    if (currentDigitCount !== targetDigitCount) {
+      continue;
+    }
+    const positionAfterDigit = i + 1;
+    const nextCharacter = formattedValue[positionAfterDigit];
+    if (nextCharacter && isSlash(nextCharacter)) {
+      return positionAfterDigit + 1;
+    }
+    return positionAfterDigit;
+  }
+  return formattedValue.length;
+}
+function calculateCursorPosition(originalValue, formattedValue, originalPosition) {
+  const targetDigitCount = countDigitsUpToCursor(
+    originalValue,
+    originalPosition
+  );
+  const newPosition = findPositionAfterDigitCount(
+    formattedValue,
+    targetDigitCount
+  );
+  return Math.min(newPosition, formattedValue.length);
+}
 function parseDateParts(dateString) {
   const [yearStr, monthStr, dayStr] = dateString.split("-");
   if (!yearStr || !monthStr || !dayStr) {
@@ -4063,23 +4133,253 @@ var Tooltip = ({
 };
 Tooltip.displayName = "Tooltip";
 
+// src/components/DateInput.tsx
+var import_react19 = require("react");
+var import_react_dom3 = require("react-dom");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var DateInput = (_a) => {
+  var _b = _a, {
+    id,
+    testid,
+    value,
+    onChange,
+    placeholder = "MM/DD/YYYY",
+    disabled,
+    readOnly = false,
+    label
+  } = _b, props = __objRest(_b, [
+    "id",
+    "testid",
+    "value",
+    "onChange",
+    "placeholder",
+    "disabled",
+    "readOnly",
+    "label"
+  ]);
+  const [visible, setVisible] = (0, import_react19.useState)(false);
+  const [inputValue, setInputValue] = (0, import_react19.useState)("");
+  const [isTyping, setIsTyping] = (0, import_react19.useState)(false);
+  const popoverRef = (0, import_react19.useRef)(null);
+  const triggerRef = (0, import_react19.useRef)(null);
+  const rootRef = (0, import_react19.useRef)(null);
+  const [calendarPosition, setCalendarPosition] = (0, import_react19.useState)({
+    top: 0,
+    left: 0,
+    width: 0
+  });
+  const [from, to] = [value, ""];
+  (0, import_react19.useEffect)(() => {
+    if (!isTyping) {
+      setInputValue(formatDisplayValue(from));
+    }
+  }, [from, isTyping]);
+  (0, import_react19.useLayoutEffect)(() => {
+    if (visible) {
+      updatePosition();
+    }
+  }, [visible]);
+  const updatePosition = () => {
+    if (rootRef.current) {
+      const rect = rootRef.current.getBoundingClientRect();
+      setCalendarPosition({
+        top: rect.bottom + window.scrollY,
+        left: rect.left + window.scrollX,
+        width: rect.width
+      });
+    }
+  };
+  (0, import_react19.useEffect)(() => {
+    updatePosition();
+    const resizeObserver = new ResizeObserver(updatePosition);
+    if (triggerRef.current) {
+      resizeObserver.observe(triggerRef.current);
+    }
+    window.addEventListener("scroll", updatePosition);
+    return () => {
+      resizeObserver.disconnect();
+      window.removeEventListener("scroll", updatePosition);
+    };
+  }, []);
+  (0, import_react19.useEffect)(() => {
+    const handleKeyDown2 = (event) => {
+      var _a2;
+      if (event.key === "Escape" && popoverRef.current) {
+        setVisible(false);
+        (_a2 = triggerRef.current) == null ? void 0 : _a2.blur();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown2);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown2);
+    };
+  });
+  (0, import_react19.useEffect)(() => {
+    const handleClickOutside = (event) => {
+      if (popoverRef.current && !popoverRef.current.contains(event.target) && triggerRef.current && !triggerRef.current.contains(event.target)) {
+        setVisible(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+  function handleDateChange(fromValue) {
+    onChange(fromValue);
+    setVisible(false);
+    setIsTyping(false);
+  }
+  const handleFocus = () => {
+    if (readOnly) return;
+    setVisible(true);
+  };
+  const handleClick = () => {
+    handleFocus();
+  };
+  const handleInputChange = (event) => {
+    if (readOnly) return;
+    const rawValue = event.target.value;
+    const cursorPosition = event.target.selectionStart || 0;
+    setIsTyping(true);
+    const formattedValue = formatInputValue(rawValue);
+    setInputValue(formattedValue);
+    requestAnimationFrame(() => {
+      if (triggerRef.current) {
+        const newPosition = calculateCursorPosition(
+          rawValue,
+          formattedValue,
+          cursorPosition
+        );
+        triggerRef.current.setSelectionRange(newPosition, newPosition);
+      }
+    });
+    const parsedDate = parseInputDate(formattedValue);
+    if (parsedDate && isValidDate(parsedDate)) {
+      onChange(parsedDate);
+    }
+  };
+  const handleBlur = () => {
+    setIsTyping(false);
+    const parsedDate = parseInputDate(inputValue);
+    if (!parsedDate || !isValidDate(parsedDate)) {
+      setInputValue(formatDisplayValue(from));
+    }
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Backspace") {
+      const input = event.target;
+      const cursorPosition = input.selectionStart || 0;
+      const value2 = input.value;
+      if (cursorPosition > 0 && value2[cursorPosition - 1] === "/") {
+        event.preventDefault();
+        const newValue = value2.slice(0, cursorPosition - 2) + value2.slice(cursorPosition);
+        const formattedValue = formatInputValue(newValue);
+        setInputValue(formattedValue);
+        requestAnimationFrame(() => {
+          if (triggerRef.current) {
+            const newPosition = Math.max(0, cursorPosition - 2);
+            triggerRef.current.setSelectionRange(newPosition, newPosition);
+          }
+        });
+        setIsTyping(true);
+        return;
+      }
+    }
+    if (event.key === "Enter") {
+      const parsedDate = parseInputDate(inputValue);
+      if (parsedDate && isValidDate(parsedDate)) {
+        onChange(parsedDate);
+        setVisible(false);
+        setIsTyping(false);
+      }
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      InputBase,
+      __spreadProps(__spreadValues({
+        id,
+        testid,
+        ref: (el) => {
+          triggerRef.current = el;
+        }
+      }, props), {
+        wrapperRef: rootRef,
+        value: inputValue,
+        placeholder,
+        disabled,
+        readOnly,
+        after: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { name: "calendar_month" }),
+        onFocus: handleFocus,
+        onClick: handleClick,
+        onChange: handleInputChange,
+        onBlur: handleBlur,
+        onKeyDown: handleKeyDown,
+        label,
+        secondaryIconColor: true
+      })
+    ),
+    visible && !readOnly && (0, import_react_dom3.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        "div",
+        {
+          ref: (el) => {
+            popoverRef.current = el;
+          },
+          className: "absolute z-40 bg-white",
+          style: {
+            top: `${calendarPosition.top + 4}px`,
+            left: `${calendarPosition.left}px`,
+            minWidth: `${calendarPosition.width}px`
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            CalendarRange,
+            {
+              id: id ? `${id}-calendar` : void 0,
+              testid: testid ? `${testid}-calendar` : void 0,
+              from,
+              to: to || from,
+              onChange: handleDateChange,
+              cardStyle: true,
+              mode: "single",
+              disableRange: true
+            }
+          )
+        }
+      ),
+      findDocumentRoot(popoverRef.current)
+    )
+  ] });
+};
+DateInput.displayName = "DateInput";
+function formatDisplayValue(from) {
+  if (!from) {
+    return "";
+  }
+  if (!isValidDate(from)) {
+    return "";
+  }
+  return formatDate(from);
+}
+
 // src/components/Accordion.tsx
 var import_clsx21 = __toESM(require("clsx"), 1);
 
 // src/components/Card.tsx
 var import_clsx19 = __toESM(require("clsx"), 1);
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 
 // src/components/Stack.tsx
 var import_clsx20 = __toESM(require("clsx"), 1);
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 
 // src/components/Accordion.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 
 // src/components/Heading.tsx
 var import_clsx22 = __toESM(require("clsx"), 1);
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var Heading = (_a) => {
   var _b = _a, {
     className,
@@ -4102,7 +4402,7 @@ var Heading = (_a) => {
   ]);
   const defaultElement = variant === "heading1" ? "h1" : variant === "heading2" ? "h2" : "h3";
   const Element = as != null ? as : defaultElement;
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     Element,
     __spreadProps(__spreadValues({
       id,
@@ -4123,43 +4423,43 @@ var Heading = (_a) => {
   );
 };
 Heading.displayName = "Heading";
-var Heading1 = (props) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Heading, __spreadProps(__spreadValues({}, props), { variant: "heading1" }));
-var Heading2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Heading, __spreadProps(__spreadValues({}, props), { variant: "heading2" }));
-var Heading3 = (props) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Heading, __spreadProps(__spreadValues({}, props), { variant: "heading3" }));
+var Heading1 = (props) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Heading, __spreadProps(__spreadValues({}, props), { variant: "heading1" }));
+var Heading2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Heading, __spreadProps(__spreadValues({}, props), { variant: "heading2" }));
+var Heading3 = (props) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Heading, __spreadProps(__spreadValues({}, props), { variant: "heading3" }));
 Heading1.displayName = "Heading1";
 Heading2.displayName = "Heading2";
 Heading3.displayName = "Heading3";
 
 // src/components/Theme.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 
 // src/components/MobileDataGrid/ColumnSelector/index.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 
 // src/components/MobileDataGrid/GridContextProvider/useGridContext.ts
-var import_react20 = require("react");
+var import_react21 = require("react");
 
 // src/components/MobileDataGrid/GridContextProvider/GridContext.tsx
-var import_react19 = require("react");
-var GridContext = (0, import_react19.createContext)(null);
+var import_react20 = require("react");
+var GridContext = (0, import_react20.createContext)(null);
 
 // src/components/MobileDataGrid/ColumnSelector/index.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 
 // src/components/MobileDataGrid/MobileDataGridHeader.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 
 // src/components/MobileDataGrid/GridContextProvider/index.tsx
-var import_react22 = require("react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_react23 = require("react");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 
 // src/components/Modal.tsx
 var import_clsx27 = __toESM(require("clsx"), 1);
-var import_react24 = require("react");
+var import_react25 = require("react");
 
 // src/components/ModalHeader.tsx
 var import_clsx23 = __toESM(require("clsx"), 1);
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var ModalHeader = ({
   title,
   hideCloseIcon,
@@ -4170,7 +4470,7 @@ var ModalHeader = ({
   testid,
   headerClassname
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     "div",
     {
       id,
@@ -4185,9 +4485,9 @@ var ModalHeader = ({
         headerClassname
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: (0, import_clsx23.default)("flex items-center flex-1", layoutGroupGap), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: (0, import_clsx23.default)("flex items-center flex-1", layoutGroupGap), children: [
           headerIcon,
-          title && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          title && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
             Heading2,
             {
               id: id ? `${id}-title` : void 0,
@@ -4197,7 +4497,7 @@ var ModalHeader = ({
             }
           )
         ] }),
-        !hideCloseIcon && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        !hideCloseIcon && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           Button,
           {
             id: id ? `${id}-close-button` : void 0,
@@ -4205,7 +4505,7 @@ var ModalHeader = ({
             iconOnly: true,
             variant: "tertiary",
             onClick: onClose,
-            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-brand-text-action-primary-normal desktop:text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { name: "close", size: 24 }) })
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-brand-text-action-primary-normal desktop:text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon, { name: "close", size: 24 }) })
           }
         )
       ]
@@ -4216,14 +4516,14 @@ ModalHeader.displayName = "ModalHeader";
 
 // src/components/ModalContent.tsx
 var import_clsx24 = __toESM(require("clsx"), 1);
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function ModalContent({
   fixedHeightScrolling,
   children,
   id,
   testid
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "div",
     {
       id,
@@ -4241,7 +4541,7 @@ ModalContent.displayName = "ModalContent";
 
 // src/components/ModalButtons.tsx
 var import_clsx25 = __toESM(require("clsx"), 1);
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var ModalButtons = ({
   onClose,
   onContinue,
@@ -4249,7 +4549,7 @@ var ModalButtons = ({
   id,
   testid
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     "div",
     {
       id,
@@ -4259,26 +4559,26 @@ var ModalButtons = ({
         layoutPaddding,
         layoutGroupGap
       ),
-      children: customActions != null ? customActions : /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      children: customActions != null ? customActions : /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           Button,
           {
             id: id ? `${id}-close-button` : void 0,
             testid: testid ? `${testid}-close-button` : void 0,
             variant: "secondary",
-            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon, { name: "close", size: 24 }),
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icon, { name: "close", size: 24 }),
             onClick: onClose,
             className: "max-sm:w-full",
             children: "Close"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           Button,
           {
             id: id ? `${id}-continue-button` : void 0,
             testid: testid ? `${testid}-continue-button` : void 0,
             variant: "primary",
-            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon, { name: "check", size: 24 }),
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icon, { name: "check", size: 24 }),
             className: "max-sm:w-full",
             onClick: onContinue,
             children: "Continue"
@@ -4292,7 +4592,7 @@ ModalButtons.displayName = "ModalButtons";
 
 // src/components/ModalScrim.tsx
 var import_clsx26 = __toESM(require("clsx"), 1);
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var ModalScrim = ({
   show = false,
   size = "small",
@@ -4302,7 +4602,7 @@ var ModalScrim = ({
   id,
   testid
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     "div",
     {
       id,
@@ -4323,14 +4623,14 @@ var ModalScrim = ({
 ModalScrim.displayName = "ModalScrim";
 
 // src/components/Modal.tsx
-var import_react_dom3 = require("react-dom");
+var import_react_dom4 = require("react-dom");
 var import_react_use = require("react-use");
 
 // src/components/useMounted.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 var useMounted = () => {
-  const [isMounted, setIsMounted] = (0, import_react23.useState)(false);
-  (0, import_react23.useEffect)(() => {
+  const [isMounted, setIsMounted] = (0, import_react24.useState)(false);
+  (0, import_react24.useEffect)(() => {
     setIsMounted(true);
     return () => setIsMounted(false);
   }, []);
@@ -4338,7 +4638,7 @@ var useMounted = () => {
 };
 
 // src/components/Modal.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var fadeInScale = (element, duration = 300) => element.animate(
   [
     { opacity: 0, transform: "scale(0.95)" },
@@ -4422,12 +4722,12 @@ var Modal = ({
 }) => {
   var _a;
   const mounted = useMounted();
-  const modalRef = (0, import_react24.useRef)(null);
-  const bgRef = (0, import_react24.useRef)(null);
+  const modalRef = (0, import_react25.useRef)(null);
+  const bgRef = (0, import_react25.useRef)(null);
   const wasOpen = (0, import_react_use.usePrevious)(open);
   const isMobile = useMatchesMobile();
   const computedFixedHeightScrolling = isMobile || fixedHeightScrolling;
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (!mounted) return;
     if (!modalRef.current || !bgRef.current) {
       console.error("Modal or background reference is not set.");
@@ -4447,7 +4747,7 @@ var Modal = ({
       bgFadeIn(bgRef.current);
     }
   }, [mounted, onClose, open, wasOpen]);
-  const handleKeyDown = (0, import_react24.useCallback)(
+  const handleKeyDown = (0, import_react25.useCallback)(
     (e) => {
       if (e.key === "Escape") {
         if (onClose) {
@@ -4458,12 +4758,12 @@ var Modal = ({
     },
     [onClose]
   );
-  const handleClose = (0, import_react24.useCallback)(() => {
+  const handleClose = (0, import_react25.useCallback)(() => {
     if (onClose) {
       onClose();
     }
   }, [onClose]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (open) {
       document.addEventListener("keyup", handleKeyDown);
     }
@@ -4471,7 +4771,7 @@ var Modal = ({
       document.removeEventListener("keyup", handleKeyDown);
     };
   }, [open, handleKeyDown]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (!open) return;
     const scrollY = window.scrollY;
     const body = document.body;
@@ -4492,7 +4792,7 @@ var Modal = ({
     };
   }, [open]);
   const { sizeClass } = (_a = sizes[size]) != null ? _a : sizes.small;
-  const backgroundClickHandler = (0, import_react24.useCallback)(
+  const backgroundClickHandler = (0, import_react25.useCallback)(
     (e) => {
       const target = e.target;
       const currentTarget = e.currentTarget;
@@ -4509,8 +4809,8 @@ var Modal = ({
   if (!mounted) {
     return null;
   }
-  return (0, import_react_dom3.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return (0, import_react_dom4.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       ModalScrim,
       {
         id: id ? `${id}-scrim` : void 0,
@@ -4519,7 +4819,7 @@ var Modal = ({
         ref: bgRef,
         show: open,
         onClick: backgroundClickHandler,
-        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
           "div",
           {
             id,
@@ -4534,7 +4834,7 @@ var Modal = ({
             ),
             onClick: (e) => e.stopPropagation(),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                 ModalHeader,
                 {
                   id: id ? `${id}-header` : void 0,
@@ -4547,7 +4847,7 @@ var Modal = ({
                   headerClassname
                 }
               ),
-              children && (size !== "screen" || noWrapper) ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+              children && (size !== "screen" || noWrapper) ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                 ModalContent,
                 {
                   id: id ? `${id}-content` : void 0,
@@ -4556,7 +4856,7 @@ var Modal = ({
                   children
                 }
               ) : children,
-              showButtons ? customFooter ? customActions : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+              showButtons ? customFooter ? customActions : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                 ModalButtons,
                 {
                   id: id ? `${id}-buttons` : void 0,
@@ -4577,51 +4877,51 @@ var Modal = ({
 Modal.displayName = "Modal";
 
 // src/components/MobileDataGrid/MobileDataGridCard/MobileDataGridColumn.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 
 // src/components/MobileDataGrid/RowDetailModalProvider/ModalContent.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 
 // src/components/MobileDataGrid/RowDetailModalProvider/index.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 
 // src/components/MobileDataGrid/ColumnList.tsx
 var import_clsx29 = __toESM(require("clsx"), 1);
 
 // src/components/MobileDataGrid/MobileDataGridCard/index.tsx
 var import_clsx28 = __toESM(require("clsx"), 1);
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 
 // src/components/MobileDataGrid/ColumnList.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 
 // src/components/MobileDataGrid/index.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 
 // src/components/ProductImagePreview/Thumbnail.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 
 // src/components/ImagePlaceholder.tsx
-var import_react25 = require("react");
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_react26 = require("react");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 
 // src/components/ProductImagePreview/Thumbnail.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 
 // src/components/Grid.tsx
 var import_clsx30 = __toESM(require("clsx"), 1);
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 
 // src/components/ProductImagePreview/ProductPrimaryImage.tsx
-var import_react27 = require("react");
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_react28 = require("react");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 
 // src/components/ProductImagePreview/ZoomWindow.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 
 // src/components/Surface.tsx
 var import_clsx31 = __toESM(require("clsx"), 1);
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 var Surface = (_a) => {
   var _b = _a, {
     children,
@@ -4634,7 +4934,7 @@ var Surface = (_a) => {
     "elevation",
     "id"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     "div",
     __spreadProps(__spreadValues({
       id,
@@ -4655,43 +4955,43 @@ var Surface = (_a) => {
 Surface.displayName = "Surface";
 
 // src/components/ProductImagePreview/ZoomWindow.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 
 // src/components/ProductImagePreview/CarouselPagination.tsx
 var import_clsx32 = require("clsx");
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 
 // src/components/ProductImagePreview/MobileImageCarousel.tsx
-var import_react29 = require("react");
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_react30 = require("react");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 
 // src/components/ProductImagePreview/useProductImagePreview.ts
-var import_react30 = require("react");
+var import_react31 = require("react");
 
 // src/components/ProductImagePreview/index.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 
 // src/components/CompactImagesPreview.tsx
-var import_react31 = require("react");
+var import_react32 = require("react");
 var import_clsx33 = __toESM(require("clsx"), 1);
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 
 // src/components/SimpleTable.tsx
 var import_clsx34 = __toESM(require("clsx"), 1);
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 
 // src/components/PDFViewer/index.tsx
-var import_react34 = require("react");
+var import_react35 = require("react");
 
 // src/components/PDFViewer/PDFElement.tsx
 var import_react_pdf2 = require("@mikecousins/react-pdf");
-var import_react33 = require("react");
+var import_react34 = require("react");
 
 // src/components/Spinner.tsx
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var Spinner = ({ size = "small", testid }) => {
   const dimension = size === "large" ? 48 : 24;
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
     "svg",
     {
       "data-testid": testid,
@@ -4703,14 +5003,14 @@ var Spinner = ({ size = "small", testid }) => {
       className: "spinner",
       "aria-label": "Loading",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("circle", { cx: "12", cy: "4", r: "2", opacity: "1" }),
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("circle", { cx: "17.666", cy: "6.334", r: "2", opacity: "0.125" }),
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("circle", { cx: "20", cy: "12", r: "2", opacity: "0.25" }),
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("circle", { cx: "17.666", cy: "17.666", r: "2", opacity: "0.375" }),
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("circle", { cx: "12", cy: "20", r: "2", opacity: "0.5" }),
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("circle", { cx: "6.334", cy: "17.666", r: "2", opacity: "0.625" }),
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("circle", { cx: "4", cy: "12", r: "2", opacity: "0.75" }),
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("circle", { cx: "6.334", cy: "6.334", r: "2", opacity: "0.875" })
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("circle", { cx: "12", cy: "4", r: "2", opacity: "1" }),
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("circle", { cx: "17.666", cy: "6.334", r: "2", opacity: "0.125" }),
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("circle", { cx: "20", cy: "12", r: "2", opacity: "0.25" }),
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("circle", { cx: "17.666", cy: "17.666", r: "2", opacity: "0.375" }),
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("circle", { cx: "12", cy: "20", r: "2", opacity: "0.5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("circle", { cx: "6.334", cy: "17.666", r: "2", opacity: "0.625" }),
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("circle", { cx: "4", cy: "12", r: "2", opacity: "0.75" }),
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("circle", { cx: "6.334", cy: "6.334", r: "2", opacity: "0.875" })
       ]
     }
   );
@@ -4719,31 +5019,31 @@ Spinner.displayName = "Spinner";
 
 // src/components/PDFViewer/PDFPage.tsx
 var import_react_pdf = require("@mikecousins/react-pdf");
-var import_react32 = require("react");
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_react33 = require("react");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 
 // src/components/PDFViewer/PDFElement.tsx
 var import_clsx35 = __toESM(require("clsx"), 1);
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 
 // src/components/PDFViewer/DownloadIcon.tsx
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 
 // src/components/PDFViewer/PDFNavigation.tsx
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 
 // src/components/PDFViewer/index.tsx
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 
 // src/components/ListGroup.tsx
-var import_react35 = require("react");
+var import_react36 = require("react");
 var import_clsx36 = __toESM(require("clsx"), 1);
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 
 // src/components/Pagination.tsx
-var import_react36 = require("react");
+var import_react37 = require("react");
 var import_clsx37 = __toESM(require("clsx"), 1);
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var Pagination = ({
   totalPages,
   currentPage,
@@ -4753,7 +5053,7 @@ var Pagination = ({
   className,
   disabled
 }) => {
-  const goTo = (0, import_react36.useCallback)(
+  const goTo = (0, import_react37.useCallback)(
     (page) => {
       if (disabled) return;
       onPageChange(page);
@@ -4770,7 +5070,7 @@ var Pagination = ({
       goTo(currentPage + 1);
     }
   };
-  const pageTokens = (0, import_react36.useMemo)(() => {
+  const pageTokens = (0, import_react37.useMemo)(() => {
     if (totalPages <= 5) {
       return Array.from({ length: totalPages }, (_, i) => i + 1);
     }
@@ -4818,7 +5118,7 @@ var Pagination = ({
     "focus:bg-background-grouped-secondary-normal focus:outline-0",
     "disabled:bg-transparent disabled:text-text-action-primary-disabled"
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
     "nav",
     {
       id,
@@ -4833,19 +5133,19 @@ var Pagination = ({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
           "button",
           {
             disabled: disabled || currentPage <= 1,
             "aria-label": "Previous page",
             onClick: () => goTo(currentPage - 1),
             className: (0, import_clsx37.default)(buttonClass, "border-r-1 border-border-primary-normal"),
-            children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Icon, { name: "keyboard_arrow_left" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Icon, { name: "keyboard_arrow_left" })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("ul", { className: (0, import_clsx37.default)("flex items-center"), children: pageTokens.map((token, index) => {
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("ul", { className: (0, import_clsx37.default)("flex items-center"), children: pageTokens.map((token, index) => {
           if (token === "ellipsis") {
-            return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
               "li",
               {
                 className: "w-8 h-8 select-none text-text-action-primary-disabled",
@@ -4855,7 +5155,7 @@ var Pagination = ({
             );
           }
           const selected = token === currentPage;
-          return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
             "button",
             {
               "aria-label": `Page ${token}`,
@@ -4866,18 +5166,18 @@ var Pagination = ({
                 buttonClass,
                 selected && "border-x-1 bg-background-grouped-secondary-normal border-border-primary-normal"
               ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Subheader, { align: "center", weight: "bold", children: token })
+              children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Subheader, { align: "center", weight: "bold", children: token })
             }
           ) }, token);
         }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
           "button",
           {
             disabled: disabled || currentPage >= totalPages,
             "aria-label": "Next page",
             onClick: () => goTo(currentPage + 1),
             className: (0, import_clsx37.default)(buttonClass, "border-l-1 border-border-primary-normal"),
-            children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Icon, { name: "keyboard_arrow_right" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Icon, { name: "keyboard_arrow_right" })
           }
         )
       ]
@@ -4887,13 +5187,18 @@ var Pagination = ({
 Pagination.displayName = "Pagination";
 
 // src/components/SkeletonParagraph.tsx
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 
 // src/components/EmptyCartIcon.tsx
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
+
+// src/components/Alert.tsx
+var import_clsx38 = __toESM(require("clsx"), 1);
+var import_react38 = require("react");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 
 // src/components/CalendarRange.tsx
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 function isWeekend(date) {
   return date.dayOfWeek === 6 || date.dayOfWeek === 7;
 }
@@ -4931,12 +5236,12 @@ function DateCell(_a) {
     "id",
     "testid"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
     "span",
     __spreadProps(__spreadValues({}, props), {
       id,
       "data-testid": testid,
-      className: (0, import_clsx38.default)(
+      className: (0, import_clsx39.default)(
         "flex items-center justify-center aspect-square select-none transition-colors border duration-100 font-medium",
         typography.caption,
         cellPadding,
@@ -5006,20 +5311,20 @@ function CalendarRange({
   const fromDate = parseDate(from);
   const toDate = parseDate(to);
   const today = import_polyfill.Temporal.Now.plainDateISO();
-  const [baseMonth, setBaseMonth] = (0, import_react37.useState)(
+  const [baseMonth, setBaseMonth] = (0, import_react39.useState)(
     fromDate != null ? fromDate : today.with({ day: 1 })
   );
-  const [selecting, setSelecting] = (0, import_react37.useState)("from");
-  const [pendingFrom, setPendingFrom] = (0, import_react37.useState)(void 0);
-  const [hoveredDate, setHoveredDate] = (0, import_react37.useState)(void 0);
-  (0, import_react37.useEffect)(() => {
+  const [selecting, setSelecting] = (0, import_react39.useState)("from");
+  const [pendingFrom, setPendingFrom] = (0, import_react39.useState)(void 0);
+  const [hoveredDate, setHoveredDate] = (0, import_react39.useState)(void 0);
+  (0, import_react39.useEffect)(() => {
     if (fromDate) {
       setBaseMonth(fromDate.with({ day: 1 }));
     } else if (toDate) {
       setBaseMonth(toDate.with({ day: 1 }));
     }
   }, [from, to]);
-  (0, import_react37.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     if (fromDate && toDate) {
       setSelecting("from");
       setPendingFrom(void 0);
@@ -5085,12 +5390,12 @@ function CalendarRange({
     }
     return false;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
     "div",
     {
       id,
       "data-testid": testid,
-      className: (0, import_clsx38.default)(
+      className: (0, import_clsx39.default)(
         "relative bg-background-grouped-primary-normal rounded-base w-fit",
         layoutPaddding,
         layoutGap,
@@ -5098,15 +5403,15 @@ function CalendarRange({
         // baseTransition,
         "overflow-hidden"
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
         "div",
         {
-          className: (0, import_clsx38.default)(
+          className: (0, import_clsx39.default)(
             "flex flex-row items-start justify-start bg-background-primary-normal overflow-clip",
             layoutGap
           ),
           children: (mode === "double" ? [0, 1] : [0]).map((offset, idx) => {
-            return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
               CalendarPane,
               {
                 getMonthData,
@@ -5164,45 +5469,45 @@ function CalendarPane({
   const years = Array.from({ length: 100 }).map(
     (_, i) => baseMonth.year - 50 + i
   );
-  const [monthMenuOpen, setMonthMenuOpen] = (0, import_react37.useState)(false);
-  const [yearMenuOpen, setYearMenuOpen] = (0, import_react37.useState)(false);
-  const monthMenuRef = (0, import_react37.useRef)(null);
-  const yearMenuRef = (0, import_react37.useRef)(null);
+  const [monthMenuOpen, setMonthMenuOpen] = (0, import_react39.useState)(false);
+  const [yearMenuOpen, setYearMenuOpen] = (0, import_react39.useState)(false);
+  const monthMenuRef = (0, import_react39.useRef)(null);
+  const yearMenuRef = (0, import_react39.useRef)(null);
   const month = getMonthData(offset);
   const totalCells = 42;
   const emptyCells = month.firstDayOffset;
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_react37.default.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(import_react39.default.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
       "div",
       {
-        className: (0, import_clsx38.default)("flex flex-col"),
+        className: (0, import_clsx39.default)("flex flex-col"),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
             "div",
             {
-              className: (0, import_clsx38.default)(
+              className: (0, import_clsx39.default)(
                 "flex flex-row items-center justify-between",
                 typography.label,
                 "text-text-action-primary-normal"
               ),
               children: [
-                idx === 0 ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+                idx === 0 ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
                   "button",
                   {
                     id: id ? `${id}-prev-month-button` : void 0,
                     "data-testid": testid ? `${testid}-prev-month-button` : void 0,
                     type: "button",
-                    className: (0, import_clsx38.default)(
+                    className: (0, import_clsx39.default)(
                       "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-action-primary-normal",
                       componentPadding
                     ),
                     "aria-label": "Previous month",
                     onClick: () => setBaseMonth(baseMonth.subtract({ months: 1 })),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Icon, { name: "chevron_left", size: 24 })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Icon, { name: "chevron_left", size: 24 })
                   }
-                ) : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: (0, import_clsx38.default)(componentPadding, "mr-1") }),
-                /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex gap-desktop-compact-component-padding", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+                ) : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: (0, import_clsx39.default)(componentPadding, "mr-1") }),
+                /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "flex gap-desktop-compact-component-padding", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
                     "button",
                     {
                       ref: (el) => {
@@ -5217,13 +5522,13 @@ function CalendarPane({
                       children: month.name
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
                     Menu,
                     {
                       show: monthMenuOpen,
                       positionTo: monthMenuRef,
                       setShow: () => setMonthMenuOpen(false),
-                      children: months.map((x) => [x, getMonthDataWith(x + 1)]).map(([x, m]) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+                      children: months.map((x) => [x, getMonthDataWith(x + 1)]).map(([x, m]) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
                         MenuOption,
                         {
                           selected: baseMonth.month === x + 1,
@@ -5237,7 +5542,7 @@ function CalendarPane({
                       ))
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
                     "button",
                     {
                       ref: (el) => {
@@ -5252,13 +5557,13 @@ function CalendarPane({
                       children: month.year
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
                     Menu,
                     {
                       show: yearMenuOpen,
                       positionTo: yearMenuRef,
                       setShow: () => setYearMenuOpen(false),
-                      children: years.map((y) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+                      children: years.map((y) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
                         MenuOption,
                         {
                           selected: baseMonth.year === y,
@@ -5273,28 +5578,28 @@ function CalendarPane({
                     }
                   )
                 ] }),
-                (mode === "double" ? idx === 1 : true) ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+                (mode === "double" ? idx === 1 : true) ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
                   "button",
                   {
                     id: id ? `${id}-next-month-button` : void 0,
                     "data-testid": testid ? `${testid}-next-month-button` : void 0,
                     type: "button",
-                    className: (0, import_clsx38.default)(
+                    className: (0, import_clsx39.default)(
                       "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-action-primary-normal",
                       componentPadding
                     ),
                     "aria-label": "Next month",
                     onClick: () => setBaseMonth(baseMonth.add({ months: 1 })),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Icon, { name: "chevron_right", size: 24 })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Icon, { name: "chevron_right", size: 24 })
                   }
-                ) : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: (0, import_clsx38.default)(componentPadding, "ml-1") })
+                ) : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: (0, import_clsx39.default)(componentPadding, "ml-1") })
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: (0, import_clsx38.default)("grid grid-cols-7"), children: weekDays.map((d) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: (0, import_clsx39.default)("grid grid-cols-7"), children: weekDays.map((d) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
             "span",
             {
-              className: (0, import_clsx38.default)(
+              className: (0, import_clsx39.default)(
                 typography.caption,
                 "text-text-secondary-normal text-center",
                 "w-10"
@@ -5303,7 +5608,7 @@ function CalendarPane({
             },
             d
           )) }),
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: (0, import_clsx38.default)("grid grid-cols-7"), children: Array.from({ length: totalCells }).map((_, i) => {
+          /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: (0, import_clsx39.default)("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
@@ -5317,7 +5622,7 @@ function CalendarPane({
             const hoverDateIsAfterPendingFrom = hoveredDate && pendingFrom && import_polyfill.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__ */ (0, import_jsx_runtime62.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
               DateCell,
               {
                 id: id ? `${id}-date-${date.toString()}` : void 0,
@@ -5342,10 +5647,10 @@ function CalendarPane({
         ]
       }
     ),
-    mode === "double" && idx === 0 && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+    mode === "double" && idx === 0 && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
       "div",
       {
-        className: (0, import_clsx38.default)(
+        className: (0, import_clsx39.default)(
           "self-stretch bg-border-primary-normal rounded-base",
           // 1px width, full height, matches Figma divider
           "w-px"