@dmsi/wedgekit-react 0.0.475 → 0.0.477

package/dist/components/index.cjs

@@ -60,6 +60,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var components_exports = {};
 __export(components_exports, {
   Accordion: () => Accordion,
+  Alert: () => Alert,
   Button: () => Button,
   Card: () => Card,
   Checkbox: () => Checkbox,
@@ -67,6 +68,7 @@ __export(components_exports, {
   DataCellHeader: () => DataCellHeader,
   DataGrid: () => DataGrid,
   DataGridCell: () => DataGridCell,
+  DateInput: () => DateInput,
   DragAlongCell: () => DragAlongCell,
   DraggableCellHeader: () => DraggableCellHeader,
   EmptyCartIcon: () => EmptyCartIcon,
@@ -499,6 +501,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) {
@@ -4083,12 +4155,707 @@ var Tooltip = ({
 };
 Tooltip.displayName = "Tooltip";
 
-// src/components/Accordion.tsx
-var import_clsx21 = __toESM(require("clsx"), 1);
+// src/components/DateInput.tsx
+var import_react20 = require("react");
+var import_react_dom3 = require("react-dom");
 
-// src/components/Card.tsx
+// src/components/CalendarRange.tsx
 var import_clsx19 = __toESM(require("clsx"), 1);
+var import_react19 = __toESM(require("react"), 1);
+var import_polyfill = require("@js-temporal/polyfill");
 var import_jsx_runtime22 = require("react/jsx-runtime");
+function DateCell(_a) {
+  var _b = _a, {
+    date,
+    isInMonth,
+    isToday,
+    isSelected,
+    inRange,
+    isDisabled,
+    isRangeStart,
+    isRangeEnd,
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    cellPadding = "",
+    isRangeDisabled = false,
+    id,
+    testid
+  } = _b, props = __objRest(_b, [
+    "date",
+    "isInMonth",
+    "isToday",
+    "isSelected",
+    "inRange",
+    "isDisabled",
+    "isRangeStart",
+    "isRangeEnd",
+    "onClick",
+    "onMouseEnter",
+    "onMouseLeave",
+    "cellPadding",
+    "isRangeDisabled",
+    "id",
+    "testid"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    "span",
+    __spreadProps(__spreadValues({}, props), {
+      id,
+      "data-testid": testid,
+      className: (0, import_clsx19.default)(
+        "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,
+  id,
+  testid
+}) {
+  const weekDays = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+  const parseDate = (d) => {
+    if (!d) {
+      return void 0;
+    }
+    try {
+      if (typeof d === "number") {
+        return import_polyfill.Temporal.PlainDate.from(new Date(d).toISOString().slice(0, 10));
+      }
+      if (typeof d === "string") {
+        return import_polyfill.Temporal.PlainDate.from(d);
+      }
+      return void 0;
+    } catch (error) {
+      console.error("Invalid date format:", d, error);
+      return import_polyfill.Temporal.Now.plainDateISO();
+    }
+  };
+  const fromDate = parseDate(from);
+  const toDate = parseDate(to);
+  const today = import_polyfill.Temporal.Now.plainDateISO();
+  const [baseMonth, setBaseMonth] = (0, import_react19.useState)(
+    fromDate != null ? fromDate : today.with({ day: 1 })
+  );
+  const [selecting, setSelecting] = (0, import_react19.useState)("from");
+  const [pendingFrom, setPendingFrom] = (0, import_react19.useState)(void 0);
+  const [hoveredDate, setHoveredDate] = (0, import_react19.useState)(void 0);
+  (0, import_react19.useEffect)(() => {
+    if (fromDate) {
+      setBaseMonth(fromDate.with({ day: 1 }));
+    } else if (toDate) {
+      setBaseMonth(toDate.with({ day: 1 }));
+    }
+  }, [from, to]);
+  (0, import_react19.useEffect)(() => {
+    if (fromDate && toDate) {
+      setSelecting("from");
+      setPendingFrom(void 0);
+      setHoveredDate(void 0);
+    }
+  }, [from, to]);
+  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 getMonthDataWith(monthOffset) {
+    const monthDate = baseMonth.with({ month: 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] = import_polyfill.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] = import_polyfill.Temporal.PlainDate.compare(hoveredDate, pendingFrom) < 0 ? [hoveredDate, pendingFrom] : [pendingFrom, hoveredDate];
+      return import_polyfill.Temporal.PlainDate.compare(date, start) >= 0 && import_polyfill.Temporal.PlainDate.compare(date, end) <= 0;
+    }
+    if (!pendingFrom && fromDate && toDate) {
+      return import_polyfill.Temporal.PlainDate.compare(date, fromDate) >= 0 && import_polyfill.Temporal.PlainDate.compare(date, toDate) <= 0;
+    }
+    return false;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    "div",
+    {
+      id,
+      "data-testid": testid,
+      className: (0, import_clsx19.default)(
+        "relative bg-background-grouped-primary-normal rounded-base w-fit",
+        layoutPaddding,
+        layoutGap,
+        cardStyle && "shadow-4",
+        // baseTransition,
+        "overflow-hidden"
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        "div",
+        {
+          className: (0, import_clsx19.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_runtime22.jsx)(
+              CalendarPane,
+              {
+                getMonthData,
+                getMonthDataWith,
+                offset,
+                idx,
+                id,
+                testid,
+                baseMonth,
+                setBaseMonth,
+                mode,
+                pendingFrom,
+                weekDays,
+                fromDate,
+                toDate,
+                isDateAvailable,
+                disableRange,
+                hoveredDate,
+                isInRange,
+                today,
+                setHoveredDate,
+                handleDayClick
+              },
+              idx
+            );
+          })
+        }
+      )
+    }
+  );
+}
+function CalendarPane({
+  getMonthData,
+  getMonthDataWith,
+  offset,
+  idx,
+  id,
+  testid,
+  baseMonth,
+  setBaseMonth,
+  mode,
+  pendingFrom,
+  weekDays,
+  fromDate,
+  toDate,
+  isDateAvailable,
+  disableRange,
+  hoveredDate,
+  isInRange,
+  today,
+  setHoveredDate,
+  handleDayClick
+}) {
+  const months = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+  const years = Array.from({ length: 100 }).map(
+    (_, i) => baseMonth.year - 50 + i
+  );
+  const [monthMenuOpen, setMonthMenuOpen] = (0, import_react19.useState)(false);
+  const [yearMenuOpen, setYearMenuOpen] = (0, import_react19.useState)(false);
+  const monthMenuRef = (0, import_react19.useRef)(null);
+  const yearMenuRef = (0, import_react19.useRef)(null);
+  const month = getMonthData(offset);
+  const totalCells = 42;
+  const emptyCells = month.firstDayOffset;
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react19.default.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+      "div",
+      {
+        className: (0, import_clsx19.default)("flex flex-col"),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+            "div",
+            {
+              className: (0, import_clsx19.default)(
+                "flex flex-row items-center justify-between",
+                typography.label,
+                "text-text-action-primary-normal"
+              ),
+              children: [
+                idx === 0 ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                  "button",
+                  {
+                    id: id ? `${id}-prev-month-button` : void 0,
+                    "data-testid": testid ? `${testid}-prev-month-button` : void 0,
+                    type: "button",
+                    className: (0, import_clsx19.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_runtime22.jsx)(Icon, { name: "chevron_left", size: 24 })
+                  }
+                ) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: (0, import_clsx19.default)(componentPadding, "mr-1") }),
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex gap-desktop-compact-component-padding", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                    "button",
+                    {
+                      ref: (el) => {
+                        monthMenuRef.current = el;
+                      },
+                      type: "button",
+                      onClick: () => {
+                        setMonthMenuOpen(true);
+                        setYearMenuOpen(false);
+                      },
+                      className: "font-semibold text-text-action-primary-normal text-[14px] py-[2px] truncate",
+                      children: month.name
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                    Menu,
+                    {
+                      show: monthMenuOpen,
+                      positionTo: monthMenuRef,
+                      setShow: () => setMonthMenuOpen(false),
+                      children: months.map((x) => [x, getMonthDataWith(x + 1)]).map(([x, m]) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                        MenuOption,
+                        {
+                          selected: baseMonth.month === x + 1,
+                          onClick: () => {
+                            setBaseMonth(baseMonth.with({ month: x + 1 }));
+                            setMonthMenuOpen(false);
+                          },
+                          children: m.name
+                        },
+                        m.name
+                      ))
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                    "button",
+                    {
+                      ref: (el) => {
+                        yearMenuRef.current = el;
+                      },
+                      type: "button",
+                      onClick: () => {
+                        setYearMenuOpen(true);
+                        setMonthMenuOpen(false);
+                      },
+                      className: "font-semibold text-text-action-primary-normal text-[14px] py-[2px] truncate",
+                      children: month.year
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                    Menu,
+                    {
+                      show: yearMenuOpen,
+                      positionTo: yearMenuRef,
+                      setShow: () => setYearMenuOpen(false),
+                      children: years.map((y) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                        MenuOption,
+                        {
+                          selected: baseMonth.year === y,
+                          onClick: () => {
+                            setBaseMonth(baseMonth.with({ year: y }));
+                            setYearMenuOpen(false);
+                          },
+                          children: y
+                        },
+                        y
+                      ))
+                    }
+                  )
+                ] }),
+                (mode === "double" ? idx === 1 : true) ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                  "button",
+                  {
+                    id: id ? `${id}-next-month-button` : void 0,
+                    "data-testid": testid ? `${testid}-next-month-button` : void 0,
+                    type: "button",
+                    className: (0, import_clsx19.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_runtime22.jsx)(Icon, { name: "chevron_right", size: 24 })
+                  }
+                ) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: (0, import_clsx19.default)(componentPadding, "ml-1") })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: (0, import_clsx19.default)("grid grid-cols-7"), children: weekDays.map((d) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            "span",
+            {
+              className: (0, import_clsx19.default)(
+                typography.caption,
+                "text-text-secondary-normal text-center",
+                "w-10"
+              ),
+              children: d
+            },
+            d
+          )) }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: (0, import_clsx19.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
+            });
+            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 && import_polyfill.Temporal.PlainDate.compare(hoveredDate, pendingFrom) < 0;
+            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_runtime22.jsx)(
+              DateCell,
+              {
+                id: id ? `${id}-date-${date.toString()}` : void 0,
+                testid: testid ? `${testid}-date-${date.toString()}` : void 0,
+                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: componentPadding
+              },
+              i
+            );
+          }) })
+        ]
+      }
+    ),
+    mode === "double" && idx === 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      "div",
+      {
+        className: (0, import_clsx19.default)(
+          "self-stretch bg-border-primary-normal rounded-base",
+          // 1px width, full height, matches Figma divider
+          "w-px"
+        )
+      }
+    )
+  ] }, month.name + month.year);
+}
+
+// src/components/DateInput.tsx
+var import_jsx_runtime23 = 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_react20.useState)(false);
+  const [inputValue, setInputValue] = (0, import_react20.useState)("");
+  const [isTyping, setIsTyping] = (0, import_react20.useState)(false);
+  const popoverRef = (0, import_react20.useRef)(null);
+  const triggerRef = (0, import_react20.useRef)(null);
+  const rootRef = (0, import_react20.useRef)(null);
+  const [calendarPosition, setCalendarPosition] = (0, import_react20.useState)({
+    top: 0,
+    left: 0,
+    width: 0
+  });
+  const [from, to] = [value, ""];
+  (0, import_react20.useEffect)(() => {
+    if (!isTyping) {
+      setInputValue(formatDisplayValue(from));
+    }
+  }, [from, isTyping]);
+  (0, import_react20.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_react20.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_react20.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_react20.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_runtime23.jsxs)("div", { className: "relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      InputBase,
+      __spreadProps(__spreadValues({
+        id,
+        testid,
+        ref: (el) => {
+          triggerRef.current = el;
+        }
+      }, props), {
+        wrapperRef: rootRef,
+        value: inputValue,
+        placeholder,
+        disabled,
+        readOnly,
+        after: /* @__PURE__ */ (0, import_jsx_runtime23.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_runtime23.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_runtime23.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_clsx22 = __toESM(require("clsx"), 1);
+
+// src/components/Card.tsx
+var import_clsx20 = __toESM(require("clsx"), 1);
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function Card(props) {
   const _a = props, {
     children,
@@ -4115,7 +4882,7 @@ function Card(props) {
   ]);
   const CardComponent = props.as || "div";
   const anyPaddingPropSpecified = padding !== void 0 || paddingX !== void 0 || paddingY !== void 0 || paddingBottom !== void 0 || paddingTop !== void 0 || paddingLeft !== void 0 || paddingRight !== void 0;
-  const paddingClasses = (0, import_clsx19.default)(
+  const paddingClasses = (0, import_clsx20.default)(
     // Backward compatibility: if no new padding props provided keep existing class.
     !anyPaddingPropSpecified && "p-desktop-layout-padding",
     // New responsive spacing tokens (mirrors Stack for layout sizing)
@@ -4127,11 +4894,11 @@ function Card(props) {
     paddingLeft && "pl-mobile-layout-padding desktop:pl-desktop-layout-padding compact:pl-desktop-compact-layout-padding",
     paddingRight && "pr-mobile-layout-padding desktop:pr-desktop-layout-padding compact:pr-desktop-compact-layout-padding"
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     CardComponent,
     __spreadProps(__spreadValues({}, rest), {
       "data-testid": testid,
-      className: (0, import_clsx19.default)(
+      className: (0, import_clsx20.default)(
         "rounded-sm",
         paddingClasses,
         selected ? "border-2 border-border-primary-focus" : "border border-border-primary-normal",
@@ -4143,9 +4910,9 @@ function Card(props) {
 }
 
 // src/components/Stack.tsx
-var import_clsx20 = __toESM(require("clsx"), 1);
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var getFlexClassNames = ({ items, justify, grow }) => (0, import_clsx20.default)(
+var import_clsx21 = __toESM(require("clsx"), 1);
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var getFlexClassNames = ({ items, justify, grow }) => (0, import_clsx21.default)(
   "flex",
   items === "start" && "items-start",
   grow && "grow",
@@ -4161,7 +4928,7 @@ var getFlexClassNames = ({ items, justify, grow }) => (0, import_clsx20.default)
   justify === "around" && "justify-around"
 );
 var useGapClassNames = (sizing) => {
-  return (0, import_clsx20.default)(
+  return (0, import_clsx21.default)(
     sizing === "layout-group" && "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-compact-layout-group-gap",
     sizing === "layout" && "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap",
     sizing === "container" && "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-compact-container-gap",
@@ -4269,7 +5036,7 @@ var Stack = (_a) => {
   var _a2, _b2, _c, _d, _e, _f, _g;
   const flexClassNames = getFlexClassNames({ items, justify, grow });
   const gapClassNames = useGapClassNames(sizing);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "div",
     __spreadProps(__spreadValues({
       id,
@@ -4301,7 +5068,7 @@ var Stack = (_a) => {
         paddingInline: (_f = props.style) == null ? void 0 : _f.paddingInline,
         gap: (_g = props.style) == null ? void 0 : _g.gap
       },
-      className: (0, import_clsx20.default)(
+      className: (0, import_clsx21.default)(
         "scrollbar-thin",
         "max-w-screen",
         width !== "fit" && "w-full",
@@ -4363,7 +5130,7 @@ var Stack = (_a) => {
 };
 
 // src/components/Accordion.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function Accordion(props) {
   const {
     isOpen,
@@ -4376,11 +5143,11 @@ function Accordion(props) {
   const {
     title,
     before,
-    after = /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    after = /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       Icon,
       {
         name: "expand_more",
-        className: (0, import_clsx21.default)(
+        className: (0, import_clsx22.default)(
           "text-icon-primary-normal transform transition-all duration-300 ease-in-out",
           isOpen ? "rotate-180" : "rotate-0"
         )
@@ -4393,10 +5160,10 @@ function Accordion(props) {
     e.preventDefault();
     onClick == null ? void 0 : onClick();
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
     Card,
     {
-      className: (0, import_clsx21.default)(
+      className: (0, import_clsx22.default)(
         "overflow-hidden select-none",
         { "cursor-pointer": !disabled },
         className
@@ -4405,7 +5172,7 @@ function Accordion(props) {
       onClick: handleClick,
       testid,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
           Stack,
           {
             sizing: "component",
@@ -4414,9 +5181,9 @@ function Accordion(props) {
             justify: "between",
             items: "center",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Stack, { sizing: "layout-group", horizontal: true, items: titleAlign, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Stack, { sizing: "layout-group", horizontal: true, items: titleAlign, children: [
                 before,
-                typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                   Paragraph,
                   {
                     testid: testid ? `${testid}-title` : void 0,
@@ -4429,18 +5196,18 @@ function Accordion(props) {
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           "div",
           {
-            className: (0, import_clsx21.default)("grid transition-all duration-300 ease-in-out"),
+            className: (0, import_clsx22.default)("grid transition-all duration-300 ease-in-out"),
             style: {
               gridTemplateRows: isOpen ? "1fr" : "0fr"
             },
             "data-testid": testid ? `${testid}-content-container` : void 0,
-            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
               "div",
               {
-                className: (0, import_clsx21.default)(
+                className: (0, import_clsx22.default)(
                   typography.paragraph,
                   "text-text-primary-normal desktop:pt-desktop-layout-gap",
                   "flex flex-col gap-desktop-layout-gap"
@@ -4457,8 +5224,8 @@ function Accordion(props) {
 }
 
 // src/components/Heading.tsx
-var import_clsx22 = __toESM(require("clsx"), 1);
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_clsx23 = __toESM(require("clsx"), 1);
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var Heading = (_a) => {
   var _b = _a, {
     className,
@@ -4481,12 +5248,12 @@ 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_runtime27.jsx)(
     Element,
     __spreadProps(__spreadValues({
       id,
       "data-testid": testid,
-      className: (0, import_clsx22.default)(
+      className: (0, import_clsx23.default)(
         typography[variant],
         className,
         align === "left" && "text-left",
@@ -4502,15 +5269,15 @@ 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_runtime27.jsx)(Heading, __spreadProps(__spreadValues({}, props), { variant: "heading1" }));
+var Heading2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Heading, __spreadProps(__spreadValues({}, props), { variant: "heading2" }));
+var Heading3 = (props) => /* @__PURE__ */ (0, import_jsx_runtime27.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_runtime28 = require("react/jsx-runtime");
 function Theme({
   theme,
   children,
@@ -4518,7 +5285,7 @@ function Theme({
   testid,
   ref
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     "div",
     {
       id,
@@ -4534,18 +5301,18 @@ function Theme({
 }
 
 // src/components/MobileDataGrid/ColumnSelector/index.tsx
-var import_react21 = require("react");
+var import_react23 = require("react");
 
 // src/components/MobileDataGrid/GridContextProvider/useGridContext.ts
-var import_react20 = require("react");
+var import_react22 = require("react");
 
 // src/components/MobileDataGrid/GridContextProvider/GridContext.tsx
-var import_react19 = require("react");
-var GridContext = (0, import_react19.createContext)(null);
+var import_react21 = require("react");
+var GridContext = (0, import_react21.createContext)(null);
 
 // src/components/MobileDataGrid/GridContextProvider/useGridContext.ts
 function useGridContext() {
-  const ctx = (0, import_react20.useContext)(GridContext);
+  const ctx = (0, import_react22.useContext)(GridContext);
   if (!ctx) {
     throw new Error("useGridContext must be used within GridContextProvider");
   }
@@ -4553,11 +5320,11 @@ function useGridContext() {
 }
 
 // src/components/MobileDataGrid/ColumnSelector/index.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function ColumnSelector() {
   const context = useGridContext();
-  const ref = (0, import_react21.useRef)(null);
-  const [show, setShow] = (0, import_react21.useState)(false);
+  const ref = (0, import_react23.useRef)(null);
+  const [show, setShow] = (0, import_react23.useState)(false);
   const {
     columns,
     id,
@@ -4568,13 +5335,13 @@ function ColumnSelector() {
     resetColumnVisibility,
     dispatch
   } = context;
-  const toggleColumnVisibility = (0, import_react21.useCallback)(
+  const toggleColumnVisibility = (0, import_react23.useCallback)(
     (index, visible) => {
       dispatch({ type: "UPDATE", index, payload: { meta: { visible } } });
     },
     [dispatch]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     "div",
     {
       id: id ? `${id}-column-selector` : void 0,
@@ -4582,7 +5349,7 @@ function ColumnSelector() {
       className: "text-text-secondary-normal border-l border-brand-200 p-mobile-container-padding",
       ref,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           Button,
           {
             id: id ? `${id}-button` : void 0,
@@ -4591,10 +5358,10 @@ function ColumnSelector() {
             variant: "navigation",
             iconOnly: true,
             size: 24,
-            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon, { name: "tune" })
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon, { name: "tune" })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
           Menu,
           {
             id: id ? `${id}-menu` : void 0,
@@ -4605,7 +5372,7 @@ function ColumnSelector() {
             setShow,
             calculateMinMaxHeight: true,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                 Button,
                 {
                   id: id ? `${id}-reset-button` : void 0,
@@ -4623,11 +5390,11 @@ function ColumnSelector() {
                 return (_a = x.meta) == null ? void 0 : _a.inVisibilityMenu;
               }).map((column) => {
                 var _a, _b, _c;
-                return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                   MenuOption,
                   {
                     testid: testid ? `${testid}-option-${column.id}` : void 0,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                       Checkbox,
                       {
                         id: id ? `${id}-checkbox-${column.id}` : void 0,
@@ -4657,7 +5424,7 @@ function ColumnSelector() {
 }
 
 // src/components/MobileDataGrid/MobileDataGridHeader.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function MobileDataGridHeader({
   header: Header,
   enableColumnSelector,
@@ -4675,15 +5442,15 @@ function MobileDataGridHeader({
     handleRowSelectAll
   } = ctx;
   if (typeof Header === "undefined" && !primaryKey) return null;
-  if (typeof Header === "function") return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Header, __spreadValues({}, ctx));
+  if (typeof Header === "function") return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Header, __spreadValues({}, ctx));
   if (typeof Header === "string" || primaryKey)
-    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       "div",
       {
         id: id ? `${id}-header` : void 0,
         "data-testid": testid ? `${testid}-header` : void 0,
         className: "sticky top-0",
-        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Theme, { theme: "brand", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Theme, { theme: "brand", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
           Stack,
           {
             horizontal: true,
@@ -4692,7 +5459,7 @@ function MobileDataGridHeader({
             justify: "between",
             backgroundColor: "background-primary-normal",
             children: [
-              enableRowSelection && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "p-mobile-component-padding border-r border-brand-200 max-w-fit h-full", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+              enableRowSelection && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "p-mobile-component-padding border-r border-brand-200 max-w-fit h-full", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                 Checkbox,
                 {
                   id: id ? `${id}-select-all-checkbox` : void 0,
@@ -4702,7 +5469,7 @@ function MobileDataGridHeader({
                   onChange: handleRowSelectAll
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                 Stack,
                 {
                   horizontal: true,
@@ -4710,10 +5477,10 @@ function MobileDataGridHeader({
                   items: "center",
                   sizing: "component",
                   padding: true,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Heading3, { as: "span", color: "text-primary-normal", children: typeof Header === "string" ? Header : (_b = (_a = columns.find((col) => col.id === primaryKey)) == null ? void 0 : _a.header) == null ? void 0 : _b.toString() })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Heading3, { as: "span", color: "text-primary-normal", children: typeof Header === "string" ? Header : (_b = (_a = columns.find((col) => col.id === primaryKey)) == null ? void 0 : _a.header) == null ? void 0 : _b.toString() })
                 }
               ),
-              enableColumnSelector && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ColumnSelector, {})
+              enableColumnSelector && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ColumnSelector, {})
             ]
           }
         ) })
@@ -4722,7 +5489,7 @@ function MobileDataGridHeader({
 }
 
 // src/components/MobileDataGrid/GridContextProvider/index.tsx
-var import_react22 = require("react");
+var import_react24 = require("react");
 
 // src/components/MobileDataGrid/dataGridReducer.ts
 function dataGridReducer(state, action) {
@@ -4752,7 +5519,7 @@ function dataGridReducer(state, action) {
 }
 
 // src/components/MobileDataGrid/GridContextProvider/index.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function GridContextProvider(props) {
   const {
     initialColumns,
@@ -4765,10 +5532,10 @@ function GridContextProvider(props) {
     getId,
     onRowSelect
   } = props;
-  const [columns, dispatch] = (0, import_react22.useReducer)(dataGridReducer, initialColumns);
-  const [selectedRowIds, setSelectedRowIds] = (0, import_react22.useState)([]);
-  const [currentRow, setCurrentRow] = (0, import_react22.useState)(null);
-  const resetColumnVisibility = (0, import_react22.useCallback)(() => {
+  const [columns, dispatch] = (0, import_react24.useReducer)(dataGridReducer, initialColumns);
+  const [selectedRowIds, setSelectedRowIds] = (0, import_react24.useState)([]);
+  const [currentRow, setCurrentRow] = (0, import_react24.useState)(null);
+  const resetColumnVisibility = (0, import_react24.useCallback)(() => {
     const newColumns = columns.map((column) => {
       var _a;
       const initialColumn = initialColumns.find((c) => c.id === column.id);
@@ -4780,7 +5547,7 @@ function GridContextProvider(props) {
     });
     dispatch({ type: "SET", payload: newColumns });
   }, [columns, initialColumns]);
-  const handleRowSelect = (0, import_react22.useCallback)(
+  const handleRowSelect = (0, import_react24.useCallback)(
     (item) => {
       var _a;
       const rowId = (_a = getId(item)) != null ? _a : "";
@@ -4791,7 +5558,7 @@ function GridContextProvider(props) {
     },
     [getId, onRowSelect, selectedRowIds]
   );
-  const handleRowSelectAll = (0, import_react22.useCallback)(() => {
+  const handleRowSelectAll = (0, import_react24.useCallback)(() => {
     setSelectedRowIds((prev) => {
       if (prev.length === data.length) {
         return [];
@@ -4799,13 +5566,13 @@ function GridContextProvider(props) {
       return data.map(getId).filter((id2) => id2 !== void 0);
     });
   }, [data, getId]);
-  const openRowDetail = (0, import_react22.useCallback)((row) => {
+  const openRowDetail = (0, import_react24.useCallback)((row) => {
     setCurrentRow(row);
   }, []);
-  const closeRowDetail = (0, import_react22.useCallback)(() => {
+  const closeRowDetail = (0, import_react24.useCallback)(() => {
     setCurrentRow(null);
   }, []);
-  const visibleColumns = (0, import_react22.useMemo)(() => {
+  const visibleColumns = (0, import_react24.useMemo)(() => {
     const effectiveLimit = typeof numberOfColumnsToShow === "number" ? Math.max(numberOfColumnsToShow - 1, 0) : void 0;
     if (primaryKey) {
       const pkColumn = columns.find((col) => col.id === String(primaryKey));
@@ -4823,7 +5590,7 @@ function GridContextProvider(props) {
       return ((_a = x.meta) == null ? void 0 : _a.visible) !== false;
     }).slice(0, effectiveLimit);
   }, [columns, numberOfColumnsToShow, primaryKey]);
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     GridContext.Provider,
     {
       value: {
@@ -4851,12 +5618,12 @@ function GridContextProvider(props) {
 }
 
 // src/components/Modal.tsx
-var import_clsx27 = __toESM(require("clsx"), 1);
-var import_react24 = require("react");
+var import_clsx28 = __toESM(require("clsx"), 1);
+var import_react26 = require("react");
 
 // src/components/ModalHeader.tsx
-var import_clsx23 = __toESM(require("clsx"), 1);
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_clsx24 = __toESM(require("clsx"), 1);
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var ModalHeader = ({
   title,
   hideCloseIcon,
@@ -4867,12 +5634,12 @@ var ModalHeader = ({
   testid,
   headerClassname
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
     "div",
     {
       id,
       "data-testid": testid,
-      className: (0, import_clsx23.default)(
+      className: (0, import_clsx24.default)(
         "flex justify-between items-center",
         headerIconAlign === "center" && "justify-center",
         headerIconAlign === "right" && "justify-end",
@@ -4882,9 +5649,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_runtime32.jsxs)("div", { className: (0, import_clsx24.default)("flex items-center flex-1", layoutGroupGap), children: [
           headerIcon,
-          title && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          title && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             Heading2,
             {
               id: id ? `${id}-title` : void 0,
@@ -4894,7 +5661,7 @@ var ModalHeader = ({
             }
           )
         ] }),
-        !hideCloseIcon && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        !hideCloseIcon && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           Button,
           {
             id: id ? `${id}-close-button` : void 0,
@@ -4902,7 +5669,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_runtime32.jsx)("span", { className: "text-brand-text-action-primary-normal desktop:text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon, { name: "close", size: 24 }) })
           }
         )
       ]
@@ -4912,20 +5679,20 @@ var ModalHeader = ({
 ModalHeader.displayName = "ModalHeader";
 
 // src/components/ModalContent.tsx
-var import_clsx24 = __toESM(require("clsx"), 1);
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_clsx25 = __toESM(require("clsx"), 1);
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function ModalContent({
   fixedHeightScrolling,
   children,
   id,
   testid
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     "div",
     {
       id,
       "data-testid": testid,
-      className: (0, import_clsx24.default)(
+      className: (0, import_clsx25.default)(
         "flex-grow desktop:flex-grow-0",
         layoutPaddding,
         fixedHeightScrolling && "overflow-auto"
@@ -4937,8 +5704,8 @@ function ModalContent({
 ModalContent.displayName = "ModalContent";
 
 // src/components/ModalButtons.tsx
-var import_clsx25 = __toESM(require("clsx"), 1);
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_clsx26 = __toESM(require("clsx"), 1);
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var ModalButtons = ({
   onClose,
   onContinue,
@@ -4946,36 +5713,36 @@ var ModalButtons = ({
   id,
   testid
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     "div",
     {
       id,
       "data-testid": testid,
-      className: (0, import_clsx25.default)(
+      className: (0, import_clsx26.default)(
         "border-t border-neutral-300 flex justify-end",
         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_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.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_runtime34.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_runtime34.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_runtime34.jsx)(Icon, { name: "check", size: 24 }),
             className: "max-sm:w-full",
             onClick: onContinue,
             children: "Continue"
@@ -4988,8 +5755,8 @@ var ModalButtons = ({
 ModalButtons.displayName = "ModalButtons";
 
 // src/components/ModalScrim.tsx
-var import_clsx26 = __toESM(require("clsx"), 1);
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_clsx27 = __toESM(require("clsx"), 1);
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var ModalScrim = ({
   show = false,
   size = "small",
@@ -4999,12 +5766,12 @@ var ModalScrim = ({
   id,
   testid
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     "div",
     {
       id,
       "data-testid": testid,
-      className: (0, import_clsx26.default)(
+      className: (0, import_clsx27.default)(
         "overflow-y-auto h-screen transition-[visibility,opacity,background] ease-in-out duration-100 grid place-content-center group bg-neutral-600/50 fixed opacity-0",
         !show && " pointer-events-none",
         size === "small" && "p-4",
@@ -5020,14 +5787,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_react25 = require("react");
 var useMounted = () => {
-  const [isMounted, setIsMounted] = (0, import_react23.useState)(false);
-  (0, import_react23.useEffect)(() => {
+  const [isMounted, setIsMounted] = (0, import_react25.useState)(false);
+  (0, import_react25.useEffect)(() => {
     setIsMounted(true);
     return () => setIsMounted(false);
   }, []);
@@ -5035,7 +5802,7 @@ var useMounted = () => {
 };
 
 // src/components/Modal.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var fadeInScale = (element, duration = 300) => element.animate(
   [
     { opacity: 0, transform: "scale(0.95)" },
@@ -5119,12 +5886,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_react26.useRef)(null);
+  const bgRef = (0, import_react26.useRef)(null);
   const wasOpen = (0, import_react_use.usePrevious)(open);
   const isMobile = useMatchesMobile();
   const computedFixedHeightScrolling = isMobile || fixedHeightScrolling;
-  (0, import_react24.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (!mounted) return;
     if (!modalRef.current || !bgRef.current) {
       console.error("Modal or background reference is not set.");
@@ -5144,7 +5911,7 @@ var Modal = ({
       bgFadeIn(bgRef.current);
     }
   }, [mounted, onClose, open, wasOpen]);
-  const handleKeyDown = (0, import_react24.useCallback)(
+  const handleKeyDown = (0, import_react26.useCallback)(
     (e) => {
       if (e.key === "Escape") {
         if (onClose) {
@@ -5155,12 +5922,12 @@ var Modal = ({
     },
     [onClose]
   );
-  const handleClose = (0, import_react24.useCallback)(() => {
+  const handleClose = (0, import_react26.useCallback)(() => {
     if (onClose) {
       onClose();
     }
   }, [onClose]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (open) {
       document.addEventListener("keyup", handleKeyDown);
     }
@@ -5168,7 +5935,7 @@ var Modal = ({
       document.removeEventListener("keyup", handleKeyDown);
     };
   }, [open, handleKeyDown]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (!open) return;
     const scrollY = window.scrollY;
     const body = document.body;
@@ -5189,7 +5956,7 @@ var Modal = ({
     };
   }, [open]);
   const { sizeClass } = (_a = sizes[size]) != null ? _a : sizes.small;
-  const backgroundClickHandler = (0, import_react24.useCallback)(
+  const backgroundClickHandler = (0, import_react26.useCallback)(
     (e) => {
       const target = e.target;
       const currentTarget = e.currentTarget;
@@ -5206,8 +5973,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_runtime36.jsx)(
       ModalScrim,
       {
         id: id ? `${id}-scrim` : void 0,
@@ -5216,13 +5983,13 @@ var Modal = ({
         ref: bgRef,
         show: open,
         onClick: backgroundClickHandler,
-        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
           "div",
           {
             id,
             "data-testid": testid,
             ref: modalRef,
-            className: (0, import_clsx27.default)(
+            className: (0, import_clsx28.default)(
               "shadow-md rounded-sm flex flex-col overflow-hidden w-full opacity-0 h-fit",
               computedFixedHeightScrolling && size !== "screen" && "desktop:max-h-[calc(100vh-32px)] desktop:h-auto",
               className,
@@ -5231,7 +5998,7 @@ var Modal = ({
             ),
             onClick: (e) => e.stopPropagation(),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                 ModalHeader,
                 {
                   id: id ? `${id}-header` : void 0,
@@ -5244,7 +6011,7 @@ var Modal = ({
                   headerClassname
                 }
               ),
-              children && (size !== "screen" || noWrapper) ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+              children && (size !== "screen" || noWrapper) ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                 ModalContent,
                 {
                   id: id ? `${id}-content` : void 0,
@@ -5253,7 +6020,7 @@ var Modal = ({
                   children
                 }
               ) : children,
-              showButtons ? customFooter ? customActions : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+              showButtons ? customFooter ? customActions : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                 ModalButtons,
                 {
                   id: id ? `${id}-buttons` : void 0,
@@ -5274,12 +6041,12 @@ var Modal = ({
 Modal.displayName = "Modal";
 
 // src/components/MobileDataGrid/MobileDataGridCard/MobileDataGridColumn.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function MobileDataGridColumn(props) {
   var _a;
   const { column, data } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "grid grid-cols-2 gap-2 px-3 flex-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Paragraph, { color: "text-secondary-normal", className: "text-left", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "grid grid-cols-2 gap-2 px-3 flex-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Paragraph, { color: "text-secondary-normal", className: "text-left", children: [
       (_a = column.header) == null ? void 0 : _a.toString(),
       ":"
     ] }),
@@ -5289,28 +6056,28 @@ function MobileDataGridColumn(props) {
 }
 
 // src/components/MobileDataGrid/RowDetailModalProvider/ModalContent.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function ModalContent2() {
   const context = useGridContext();
   const { columns, currentRow } = context;
   if (!currentRow) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Stack, { sizing: "layout-group", children: columns.filter((x) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Stack, { sizing: "layout-group", children: columns.filter((x) => {
     var _a;
     return !((_a = x.id) == null ? void 0 : _a.startsWith("__"));
   }).map(
     (column, index) => {
       var _a, _b;
-      return ((_a = column.meta) == null ? void 0 : _a.useCustomRenderer) && column.meta.mobileCell && column.id ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+      return ((_a = column.meta) == null ? void 0 : _a.useCustomRenderer) && column.meta.mobileCell && column.id ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
         "div",
         {
           className: "grid grid-cols-2 gap-2 px-3 items-center flex-1",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Paragraph, { color: "text-secondary-normal", className: "text-left", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Paragraph, { color: "text-secondary-normal", className: "text-left", children: [
               (_b = column.header) == null ? void 0 : _b.toString(),
               ":"
             ] }),
             " ",
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
               column.meta.mobileCell,
               {
                 column,
@@ -5321,7 +6088,7 @@ function ModalContent2() {
           ]
         },
         `${column.id}-${index}`
-      ) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         MobileDataGridColumn,
         {
           column,
@@ -5334,7 +6101,7 @@ function ModalContent2() {
 }
 
 // src/components/MobileDataGrid/RowDetailModalProvider/index.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function RowDetailModalProvider() {
   var _a;
   const context = useGridContext();
@@ -5346,7 +6113,7 @@ function RowDetailModalProvider() {
     primaryKey,
     closeRowDetail
   } = context;
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     Modal,
     {
       fixedHeightScrolling: true,
@@ -5355,7 +6122,7 @@ function RowDetailModalProvider() {
       hideCloseIcon: true,
       size: "medium",
       className: "!p-0",
-      headerIcon: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+      headerIcon: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
         Stack,
         {
           horizontal: true,
@@ -5364,8 +6131,8 @@ function RowDetailModalProvider() {
           justify: "between",
           width: "full",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Heading2, { children: (_a = currentRow == null ? void 0 : currentRow[primaryKey != null ? primaryKey : "id"]) != null ? _a : "Grid Detail" }),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Heading2, { children: (_a = currentRow == null ? void 0 : currentRow[primaryKey != null ? primaryKey : "id"]) != null ? _a : "Grid Detail" }),
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
               Button,
               {
                 id: id ? `${id}-open-in-new-button` : void 0,
@@ -5373,25 +6140,25 @@ function RowDetailModalProvider() {
                 iconOnly: true,
                 variant: "tertiary",
                 onClick: closeRowDetail,
-                leftIcon: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Icon, { name: "open_in_new", size: 24 }) })
+                leftIcon: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Icon, { name: "open_in_new", size: 24 }) })
               }
             )
           ]
         }
       ),
-      customActions: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Button, { onClick: closeRowDetail, className: "w-full", children: "Close" }),
+      customActions: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Button, { onClick: closeRowDetail, className: "w-full", children: "Close" }),
       showButtons: true,
-      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "bg-white max-h-full flex flex-col flex-grow-1", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ModalContent2, {}) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "bg-white max-h-full flex flex-col flex-grow-1", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ModalContent2, {}) })
     }
   );
 }
 
 // src/components/MobileDataGrid/ColumnList.tsx
-var import_clsx29 = __toESM(require("clsx"), 1);
+var import_clsx30 = __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_clsx29 = __toESM(require("clsx"), 1);
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function MobileDataGridCard({
   renderLink,
   renderChevron = true,
@@ -5403,27 +6170,27 @@ function MobileDataGridCard({
   var _a;
   const context = useGridContext();
   const { id, testid, visibleColumns, getId, handleRowSelect, openRowDetail } = context;
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
     "li",
     {
       id: id ? `${id}-card-${getId(data)}` : void 0,
       "data-testid": testid ? `${testid}-card-${getId(data)}` : void 0,
-      className: (0, import_clsx28.default)(
+      className: (0, import_clsx29.default)(
         "hover:bg-action-100 cursor-pointer list-none",
         selected ? "bg-action-100" : "bg-background-grouped-primary-normal"
       ),
       onClick: () => openRowDetail(data),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Stack, { sizing: "component", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Stack, { horizontal: true, horizontalMobile: true, items: "center", justify: "between", children: [
-            enableRowSelection && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(Stack, { sizing: "component", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(Stack, { horizontal: true, horizontalMobile: true, items: "center", justify: "between", children: [
+            enableRowSelection && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
               Stack,
               {
                 sizing: "component",
                 padding: true,
                 width: "fit",
                 onClick: (e) => e.stopPropagation(),
-                children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                   Checkbox,
                   {
                     id: id ? `${id}-${getId(data)}-select-checkbox` : void 0,
@@ -5434,16 +6201,16 @@ function MobileDataGridCard({
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
               Stack,
               {
                 sizing: "component",
                 padding: true,
                 onClick: (e) => e.stopPropagation(),
-                children: renderLink ? renderLink(data) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Subheader, { children: String((_a = data[context.primaryKey]) != null ? _a : "") })
+                children: renderLink ? renderLink(data) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Subheader, { children: String((_a = data[context.primaryKey]) != null ? _a : "") })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
               Stack,
               {
                 horizontal: true,
@@ -5456,18 +6223,18 @@ function MobileDataGridCard({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Stack, { sizing: "layout-group", children: visibleColumns.filter((x) => {
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Stack, { sizing: "layout-group", children: visibleColumns.filter((x) => {
             var _a2, _b;
             return ((_a2 = x.meta) == null ? void 0 : _a2.visible) !== false && !((_b = x.id) == null ? void 0 : _b.startsWith("__"));
           }).map(
             (column, index) => {
               var _a2, _b;
-              return ((_a2 = column.meta) == null ? void 0 : _a2.useCustomRenderer) && column.meta.mobileCell && column.id ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+              return ((_a2 = column.meta) == null ? void 0 : _a2.useCustomRenderer) && column.meta.mobileCell && column.id ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
                 "div",
                 {
                   className: "grid grid-cols-2 gap-2 px-3 items-center flex-1",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
                       Paragraph,
                       {
                         color: "text-secondary-normal",
@@ -5479,7 +6246,7 @@ function MobileDataGridCard({
                       }
                     ),
                     " ",
-                    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                       column.meta.mobileCell,
                       {
                         column,
@@ -5490,7 +6257,7 @@ function MobileDataGridCard({
                   ]
                 },
                 `${column.id}-${index}`
-              ) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+              ) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                 MobileDataGridColumn,
                 {
                   column,
@@ -5501,14 +6268,14 @@ function MobileDataGridCard({
             }
           ) })
         ] }),
-        renderChevron && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Stack, { items: "center", justify: "center", horizontal: true, horizontalMobile: true, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Icon, { name: "keyboard_arrow_down" }) })
+        renderChevron && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Stack, { items: "center", justify: "center", horizontal: true, horizontalMobile: true, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Icon, { name: "keyboard_arrow_down" }) })
       ]
     }
   );
 }
 
 // src/components/MobileDataGrid/ColumnList.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 function ColumnList(props) {
   const {
     withBorder,
@@ -5520,19 +6287,19 @@ function ColumnList(props) {
   } = props;
   const ctx = useGridContext();
   const { id, testid, data, getId, selectedRowIds } = ctx;
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     "div",
     {
-      className: (0, import_clsx29.default)(
+      className: (0, import_clsx30.default)(
         "flex flex-col flex-1 relative overflow-y-auto overflow-x-hidden",
         !!Footer && "mb-20"
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
         "ul",
         {
           id,
           "data-testid": testid,
-          className: (0, import_clsx29.default)(
+          className: (0, import_clsx30.default)(
             "rounded absolute top-0 left-0 w-full flex-1",
             "divide-y divide-border-primary-normal",
             withBorder && "border border-border-primary-normal"
@@ -5540,7 +6307,7 @@ function ColumnList(props) {
           children: [
             data.map((item) => {
               const id2 = getId(item);
-              return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                 MobileDataGridCard,
                 {
                   data: item,
@@ -5553,7 +6320,7 @@ function ColumnList(props) {
                 id2
               );
             }),
-            !!Footer && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "fixed left-0 right-0 bottom-0 flex flex-col w-full min-h-20", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Footer, __spreadValues({}, ctx)) })
+            !!Footer && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "fixed left-0 right-0 bottom-0 flex flex-col w-full min-h-20", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Footer, __spreadValues({}, ctx)) })
           ]
         }
       )
@@ -5562,7 +6329,7 @@ function ColumnList(props) {
 }
 
 // src/components/MobileDataGrid/index.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 function MobileDataGrid(props) {
   const {
     columns,
@@ -5584,7 +6351,7 @@ function MobileDataGrid(props) {
     rowActions,
     rounded
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
     GridContextProvider,
     {
       initialColumns: columns,
@@ -5596,7 +6363,7 @@ function MobileDataGrid(props) {
       numberOfColumnsToShow,
       primaryKey,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
           Stack,
           {
             height: "full",
@@ -5604,7 +6371,7 @@ function MobileDataGrid(props) {
             overflowX: "hidden",
             overflowY: "hidden",
             children: [
-              !hideHeader && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+              !hideHeader && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                 MobileDataGridHeader,
                 {
                   header,
@@ -5612,7 +6379,7 @@ function MobileDataGrid(props) {
                   enableRowSelection
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                 ColumnList,
                 {
                   withBorder,
@@ -5626,21 +6393,21 @@ function MobileDataGrid(props) {
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(RowDetailModalProvider, {})
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(RowDetailModalProvider, {})
       ]
     }
   );
 }
 
 // src/components/ProductImagePreview/Thumbnail.tsx
-var import_react26 = require("react");
+var import_react28 = require("react");
 
 // src/components/ImagePlaceholder.tsx
-var import_react25 = require("react");
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_react27 = require("react");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 function ImagePlaceholder(props) {
-  const clipId = (0, import_react25.useId)();
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+  const clipId = (0, import_react27.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
     "svg",
     __spreadProps(__spreadValues({
       xmlns: "http://www.w3.org/2000/svg",
@@ -5649,15 +6416,15 @@ function ImagePlaceholder(props) {
       fill: "none"
     }, props), {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("g", { clipPath: `url(#${clipId})`, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("rect", { width: props.width, height: props.width, fill: "#F7F7F7", rx: 2 }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("clipPath", { id: clipId, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("rect", { width: props.width, height: props.width, fill: "#fff", rx: 2 }) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("g", { clipPath: `url(#${clipId})`, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("rect", { width: props.width, height: props.width, fill: "#F7F7F7", rx: 2 }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("clipPath", { id: clipId, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("rect", { width: props.width, height: props.width, fill: "#fff", rx: 2 }) }) })
       ]
     })
   );
 }
 
 // src/components/ProductImagePreview/Thumbnail.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 function Thumbnail({
   width,
   height,
@@ -5667,8 +6434,8 @@ function Thumbnail({
   onClick,
   isPlaceholder = false
 }) {
-  const [imageError, setImageError] = (0, import_react26.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  const [imageError, setImageError] = (0, import_react28.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     "button",
     {
       type: "button",
@@ -5681,7 +6448,7 @@ function Thumbnail({
       ].join(" "),
       style: { maxWidth: width, maxHeight: height, aspectRatio: "1 / 1" },
       "aria-pressed": isActive && !isPlaceholder ? "true" : "false",
-      children: isPlaceholder ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ImagePlaceholder, { width: 115, height: 115 }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      children: isPlaceholder ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ImagePlaceholder, { width: 115, height: 115 }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         "img",
         {
           src: imageError ? "/placeholder.svg" : src,
@@ -5699,8 +6466,8 @@ function Thumbnail({
 }
 
 // src/components/Grid.tsx
-var import_clsx30 = __toESM(require("clsx"), 1);
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_clsx31 = __toESM(require("clsx"), 1);
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var GAP_BY_SIZING = {
   none: "gap-0",
   "layout-group": "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-compact-layout-group-gap",
@@ -5748,14 +6515,14 @@ var Grid = (_a) => {
   ]);
   var _a2, _b2;
   const columnClasses = buildColumnClasses(columns, responsive);
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
     "div",
     __spreadProps(__spreadValues({
       id,
       "data-testid": testid,
       style
     }, rest), {
-      className: (0, import_clsx30.default)(
+      className: (0, import_clsx31.default)(
         "w-full grid",
         (_a2 = GAP_BY_SIZING[sizing]) != null ? _a2 : GAP_BY_SIZING.container,
         padding && ((_b2 = PADDING_BY_SIZING[sizing]) != null ? _b2 : PADDING_BY_SIZING.container),
@@ -5769,8 +6536,8 @@ var Grid = (_a) => {
 };
 
 // src/components/ProductImagePreview/ProductPrimaryImage.tsx
-var import_react27 = require("react");
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_react29 = require("react");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 var placeholderImageUri = "/placeholder.svg";
 function ProductPrimaryImage({
   image,
@@ -5784,12 +6551,12 @@ function ProductPrimaryImage({
   onZoomPositionChange,
   onScrollZoom
 }) {
-  const containerRef = (0, import_react27.useRef)(null);
-  const lastPointRef = (0, import_react27.useRef)(null);
-  const rafRef = (0, import_react27.useRef)(null);
-  const [active, setActive] = (0, import_react27.useState)(false);
-  const [, forceRerender] = (0, import_react27.useState)(0);
-  const imageSrc = (0, import_react27.useMemo)(() => image == null ? void 0 : image.src, [image == null ? void 0 : image.src]);
+  const containerRef = (0, import_react29.useRef)(null);
+  const lastPointRef = (0, import_react29.useRef)(null);
+  const rafRef = (0, import_react29.useRef)(null);
+  const [active, setActive] = (0, import_react29.useState)(false);
+  const [, forceRerender] = (0, import_react29.useState)(0);
+  const imageSrc = (0, import_react29.useMemo)(() => image == null ? void 0 : image.src, [image == null ? void 0 : image.src]);
   const schedule = () => {
     if (rafRef.current != null) return;
     rafRef.current = requestAnimationFrame(() => {
@@ -5797,7 +6564,7 @@ function ProductPrimaryImage({
       forceRerender((n) => n + 1);
     });
   };
-  const handlePointerEnter = (0, import_react27.useCallback)(() => {
+  const handlePointerEnter = (0, import_react29.useCallback)(() => {
     if (!zoomEnabled) return;
     setActive(true);
     const el = containerRef.current;
@@ -5810,13 +6577,13 @@ function ProductPrimaryImage({
       );
     }
   }, [zoomEnabled, onZoomPositionChange, zoomLensSize]);
-  const handlePointerLeave = (0, import_react27.useCallback)(() => {
+  const handlePointerLeave = (0, import_react29.useCallback)(() => {
     if (!zoomEnabled) return;
     setActive(false);
     lastPointRef.current = null;
     onZoomPositionChange == null ? void 0 : onZoomPositionChange(null, false);
   }, [zoomEnabled, onZoomPositionChange]);
-  const handlePointerMove = (0, import_react27.useCallback)(
+  const handlePointerMove = (0, import_react29.useCallback)(
     (e) => {
       if (isPlaceholder) return;
       if (!zoomEnabled || !active) return;
@@ -5853,7 +6620,7 @@ function ProductPrimaryImage({
     },
     [isPlaceholder, zoomEnabled, active, zoomLensSize, onZoomPositionChange]
   );
-  (0, import_react27.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     const container = containerRef.current;
     if (!container || !scrollToZoomEnabled) return;
     const handleNativeWheel = (e) => {
@@ -5868,7 +6635,7 @@ function ProductPrimaryImage({
       container.removeEventListener("wheel", handleNativeWheel);
     };
   }, [scrollToZoomEnabled, zoomEnabled, active, onScrollZoom]);
-  const handleImgError = (0, import_react27.useCallback)(
+  const handleImgError = (0, import_react29.useCallback)(
     (e) => {
       if (!placeholderImageUri) return;
       const img = e.currentTarget;
@@ -5890,7 +6657,7 @@ function ProductPrimaryImage({
       top: Math.max(0, Math.min(height - size, topRaw))
     };
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
     "div",
     {
       ref: containerRef,
@@ -5910,7 +6677,7 @@ function ProductPrimaryImage({
       onPointerLeave: handlePointerLeave,
       onPointerMove: handlePointerMove,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
           "img",
           {
             src: imageSrc != null ? imageSrc : placeholderImageUri,
@@ -5922,7 +6689,7 @@ function ProductPrimaryImage({
           },
           imageSrc
         ),
-        zoomEnabled && active && lensStyle && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        zoomEnabled && active && lensStyle && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
           "div",
           {
             "aria-hidden": true,
@@ -5936,11 +6703,11 @@ function ProductPrimaryImage({
 }
 
 // src/components/ProductImagePreview/ZoomWindow.tsx
-var import_react28 = require("react");
+var import_react30 = require("react");
 
 // src/components/Surface.tsx
-var import_clsx31 = __toESM(require("clsx"), 1);
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_clsx32 = __toESM(require("clsx"), 1);
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var Surface = (_a) => {
   var _b = _a, {
     children,
@@ -5953,11 +6720,11 @@ var Surface = (_a) => {
     "elevation",
     "id"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
     "div",
     __spreadProps(__spreadValues({
       id,
-      className: (0, import_clsx31.default)(
+      className: (0, import_clsx32.default)(
         "rounded-base",
         {
           "shadow-2": elevation === 2,
@@ -5974,7 +6741,7 @@ var Surface = (_a) => {
 Surface.displayName = "Surface";
 
 // src/components/ProductImagePreview/ZoomWindow.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 function ZoomWindow({
   image,
   width,
@@ -5987,7 +6754,7 @@ function ZoomWindow({
   offset = 10,
   className = ""
 }) {
-  const imageSrc = (0, import_react28.useMemo)(() => image == null ? void 0 : image.src, [image == null ? void 0 : image.src]);
+  const imageSrc = (0, import_react30.useMemo)(() => image == null ? void 0 : image.src, [image == null ? void 0 : image.src]);
   if (!image || !active || !pointer) return null;
   const zoomWindowSize = pointer.lensSize * scaleFactor;
   const baseW = pointer.w || width;
@@ -6032,7 +6799,7 @@ function ZoomWindow({
       top
     };
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     Surface,
     {
       elevation: 16,
@@ -6047,7 +6814,7 @@ function ZoomWindow({
         userSelect: "none"
       }, calculatePosition()),
       "aria-hidden": true,
-      children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
         "img",
         {
           src: imageSrc,
@@ -6068,8 +6835,8 @@ function ZoomWindow({
 }
 
 // src/components/ProductImagePreview/CarouselPagination.tsx
-var import_clsx32 = require("clsx");
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_clsx33 = require("clsx");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 function CarouselPagination({
   images,
   currentIndex,
@@ -6077,15 +6844,15 @@ function CarouselPagination({
   className
 }) {
   if (!(images == null ? void 0 : images.length)) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     "div",
     {
-      className: (0, import_clsx32.clsx)(
+      className: (0, import_clsx33.clsx)(
         "flex items-center justify-center w-full px-4 md:hidden",
         className
       ),
       "aria-label": "Image navigation",
-      children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
         "div",
         {
           className: "grid gap-2 place-items-center",
@@ -6093,12 +6860,12 @@ function CarouselPagination({
             gridTemplateColumns: `repeat(${Math.min(images.length, 8)}, 1fr)`
           },
           role: "tablist",
-          children: images.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          children: images.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
             "button",
             {
               type: "button",
               onClick: () => onSelect(index),
-              className: (0, import_clsx32.clsx)(
+              className: (0, import_clsx33.clsx)(
                 "w-4 h-4 transition-all duration-200 focus:outline-none",
                 index === currentIndex ? "ring-2 ring-brand-400" : "ring ring-neutral-300"
               ),
@@ -6116,8 +6883,8 @@ function CarouselPagination({
 }
 
 // src/components/ProductImagePreview/MobileImageCarousel.tsx
-var import_react29 = require("react");
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_react31 = require("react");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 function MobileImageCarousel({
   images,
   currentIndex,
@@ -6126,15 +6893,15 @@ function MobileImageCarousel({
   onChangeIndex,
   className = ""
 }) {
-  const containerRef = (0, import_react29.useRef)(null);
-  const [isDragging, setIsDragging] = (0, import_react29.useState)(false);
-  const [startX, setStartX] = (0, import_react29.useState)(0);
-  const [currentTranslate, setCurrentTranslate] = (0, import_react29.useState)(0);
-  const [prevTranslate, setPrevTranslate] = (0, import_react29.useState)(0);
-  const [containerWidth, setContainerWidth] = (0, import_react29.useState)(width);
+  const containerRef = (0, import_react31.useRef)(null);
+  const [isDragging, setIsDragging] = (0, import_react31.useState)(false);
+  const [startX, setStartX] = (0, import_react31.useState)(0);
+  const [currentTranslate, setCurrentTranslate] = (0, import_react31.useState)(0);
+  const [prevTranslate, setPrevTranslate] = (0, import_react31.useState)(0);
+  const [containerWidth, setContainerWidth] = (0, import_react31.useState)(width);
   const imageSize = Math.min(containerWidth * 0.6, height * 0.6);
   const gap = 16;
-  const getTranslateX = (0, import_react29.useCallback)(
+  const getTranslateX = (0, import_react31.useCallback)(
     (index) => {
       const containerCenter = containerWidth / 2;
       const imageCenter = imageSize / 2;
@@ -6143,12 +6910,12 @@ function MobileImageCarousel({
     },
     [containerWidth, imageSize, gap]
   );
-  (0, import_react29.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     const translateX = getTranslateX(currentIndex);
     setCurrentTranslate(translateX);
     setPrevTranslate(translateX);
   }, [currentIndex, getTranslateX]);
-  (0, import_react29.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     const updateContainerWidth = () => {
       if (containerRef.current) {
         const rect = containerRef.current.getBoundingClientRect();
@@ -6162,11 +6929,11 @@ function MobileImageCarousel({
     }
     return () => resizeObserver.disconnect();
   }, []);
-  const handleStart = (0, import_react29.useCallback)((clientX) => {
+  const handleStart = (0, import_react31.useCallback)((clientX) => {
     setIsDragging(true);
     setStartX(clientX);
   }, []);
-  const handleMove = (0, import_react29.useCallback)(
+  const handleMove = (0, import_react31.useCallback)(
     (clientX) => {
       if (!isDragging) return;
       const currentPosition = clientX;
@@ -6175,7 +6942,7 @@ function MobileImageCarousel({
     },
     [isDragging, startX, prevTranslate]
   );
-  const handleEnd = (0, import_react29.useCallback)(() => {
+  const handleEnd = (0, import_react31.useCallback)(() => {
     if (!isDragging) return;
     setIsDragging(false);
     const moved = currentTranslate - prevTranslate;
@@ -6223,7 +6990,7 @@ function MobileImageCarousel({
   const handleTouchEnd = () => {
     handleEnd();
   };
-  const handleImageClick = (0, import_react29.useCallback)(
+  const handleImageClick = (0, import_react31.useCallback)(
     (index) => {
       if (!isDragging && index !== currentIndex) {
         onChangeIndex(index);
@@ -6232,7 +6999,7 @@ function MobileImageCarousel({
     [isDragging, currentIndex, onChangeIndex]
   );
   if (!images.length) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: `md:hidden w-full ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: `md:hidden w-full ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     "div",
     {
       ref: containerRef,
@@ -6247,7 +7014,7 @@ function MobileImageCarousel({
       onTouchStart: handleTouchStart,
       onTouchMove: handleTouchMove,
       onTouchEnd: handleTouchEnd,
-      children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
         "div",
         {
           className: "flex items-center",
@@ -6260,7 +7027,7 @@ function MobileImageCarousel({
             const isActive = index === currentIndex;
             const distance = Math.abs(index - currentIndex);
             const shouldRender = distance <= 2;
-            return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
               "div",
               {
                 className: "flex-shrink-0 transition-opacity duration-300",
@@ -6270,7 +7037,7 @@ function MobileImageCarousel({
                   opacity: isActive ? 1 : Math.max(0.3, 1 - distance * 0.3)
                 },
                 onClick: () => handleImageClick(index),
-                children: shouldRender ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                children: shouldRender ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
                   "img",
                   {
                     src: image.src,
@@ -6282,7 +7049,7 @@ function MobileImageCarousel({
                       aspectRatio: "1 / 1"
                     }
                   }
-                ) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                ) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
                   "div",
                   {
                     className: "w-full h-full bg-neutral-100 rounded-md border border-gray-200",
@@ -6303,7 +7070,7 @@ function MobileImageCarousel({
 }
 
 // src/components/ProductImagePreview/useProductImagePreview.ts
-var import_react30 = require("react");
+var import_react32 = require("react");
 function useProductImagePreview(props) {
   const {
     images,
@@ -6316,18 +7083,18 @@ function useProductImagePreview(props) {
   } = props;
   const hasImages = !!(images == null ? void 0 : images.length);
   const safeIndex = hasImages && currentIndex >= 0 && currentIndex < images.length ? currentIndex : 0;
-  const active = (0, import_react30.useMemo)(() => {
+  const active = (0, import_react32.useMemo)(() => {
     return hasImages ? images[safeIndex] : void 0;
   }, [hasImages, images, safeIndex]);
-  const [zoomPoint, setZoomPoint] = (0, import_react30.useState)(null);
-  const [zoomActive, setZoomActive] = (0, import_react30.useState)(false);
-  const [currentZoomFactor, setCurrentZoomFactor] = (0, import_react30.useState)(zoomFactor);
-  const [primaryImagePosition, setPrimaryImagePosition] = (0, import_react30.useState)(null);
-  const primaryImageRef = (0, import_react30.useRef)(null);
-  const cleanupRef = (0, import_react30.useRef)(null);
+  const [zoomPoint, setZoomPoint] = (0, import_react32.useState)(null);
+  const [zoomActive, setZoomActive] = (0, import_react32.useState)(false);
+  const [currentZoomFactor, setCurrentZoomFactor] = (0, import_react32.useState)(zoomFactor);
+  const [primaryImagePosition, setPrimaryImagePosition] = (0, import_react32.useState)(null);
+  const primaryImageRef = (0, import_react32.useRef)(null);
+  const cleanupRef = (0, import_react32.useRef)(null);
   const effectiveZoomEnabled = zoomEnabled && !isMobile;
   const effectiveScrollToZoomEnabled = scrollToZoomEnabled && !isMobile;
-  (0, import_react30.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     if (!effectiveZoomEnabled) return;
     const setupTracking = () => {
       const element = primaryImageRef.current;
@@ -6361,24 +7128,24 @@ function useProductImagePreview(props) {
       }
     };
   }, [effectiveZoomEnabled]);
-  const handleSelect = (0, import_react30.useCallback)(
+  const handleSelect = (0, import_react32.useCallback)(
     (idx) => {
       if (idx === safeIndex) return;
       onChangeIndex(idx);
     },
     [safeIndex, onChangeIndex]
   );
-  const handleNext = (0, import_react30.useCallback)(() => {
+  const handleNext = (0, import_react32.useCallback)(() => {
     if (!hasImages) return;
     const nextIndex = (safeIndex + 1) % images.length;
     onChangeIndex(nextIndex);
   }, [hasImages, safeIndex, images.length, onChangeIndex]);
-  const handlePrevious = (0, import_react30.useCallback)(() => {
+  const handlePrevious = (0, import_react32.useCallback)(() => {
     if (!hasImages) return;
     const previousIndex = safeIndex === 0 ? images.length - 1 : safeIndex - 1;
     onChangeIndex(previousIndex);
   }, [hasImages, safeIndex, images.length, onChangeIndex]);
-  const handleZoomPositionChange = (0, import_react30.useCallback)(
+  const handleZoomPositionChange = (0, import_react32.useCallback)(
     (p, active2) => {
       if (isMobile) return;
       setZoomPoint(p);
@@ -6386,7 +7153,7 @@ function useProductImagePreview(props) {
     },
     [isMobile]
   );
-  const handleScrollZoom = (0, import_react30.useCallback)(
+  const handleScrollZoom = (0, import_react32.useCallback)(
     (delta) => {
       if (!effectiveScrollToZoomEnabled) return;
       const newZoomFactor = Math.max(1, Math.min(5, currentZoomFactor + delta));
@@ -6394,7 +7161,7 @@ function useProductImagePreview(props) {
     },
     [effectiveScrollToZoomEnabled, currentZoomFactor]
   );
-  (0, import_react30.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     setCurrentZoomFactor(zoomFactor);
   }, [zoomFactor]);
   return {
@@ -6418,7 +7185,7 @@ function useProductImagePreview(props) {
 }
 
 // src/components/ProductImagePreview/index.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var PLACEHOLDER_IMAGES = [
   { src: "", alt: "placeholder" },
   { src: "", alt: "placeholder" }
@@ -6461,9 +7228,9 @@ function ProductImagePreview(props) {
   });
   if (typeof isMobile === "undefined") return null;
   const effectiveZoomEnabled = zoomEnabled && !isMobile;
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Stack, { sizing: "layout", style: { width, position: "relative" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex gap-4 items-start", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { ref: primaryImageRef, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(Stack, { sizing: "layout", style: { width, position: "relative" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex gap-4 items-start", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { ref: primaryImageRef, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
         ProductPrimaryImage,
         {
           image: active,
@@ -6477,7 +7244,7 @@ function ProductImagePreview(props) {
           isPlaceholder: images.length === 0
         }
       ) }),
-      effectiveZoomEnabled && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      effectiveZoomEnabled && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
         ZoomWindow,
         {
           image: active,
@@ -6492,7 +7259,7 @@ function ProductImagePreview(props) {
         }
       )
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
       MobileImageCarousel,
       {
         images,
@@ -6502,14 +7269,14 @@ function ProductImagePreview(props) {
         onChangeIndex: handleSelect
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "hidden md:block", children: images.length <= 3 ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "hidden md:block", children: images.length <= 3 ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
       "div",
       {
         className: "flex justify-center gap-4",
         style: { width: "100%", maxWidth: width },
         "aria-label": "Product image thumbnails",
         children: (images.length === 0 ? PLACEHOLDER_IMAGES : images).map(
-          (img, i) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { style: { maxWidth: "115px" }, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+          (img, i) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { style: { maxWidth: "115px" }, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
             Thumbnail,
             {
               src: img.src,
@@ -6521,7 +7288,7 @@ function ProductImagePreview(props) {
           ) }, img.src + i)
         )
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
       Grid,
       {
         sizing: "layout-group",
@@ -6532,7 +7299,7 @@ function ProductImagePreview(props) {
         },
         columns: thumbsPerRow > 12 ? 12 : thumbsPerRow < 1 ? 1 : thumbsPerRow,
         children: (images.length === 0 ? PLACEHOLDER_IMAGES : images).map(
-          (img, i) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+          (img, i) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
             Thumbnail,
             {
               src: img.src,
@@ -6546,7 +7313,7 @@ function ProductImagePreview(props) {
         )
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
       CarouselPagination,
       {
         images,
@@ -6558,9 +7325,9 @@ function ProductImagePreview(props) {
 }
 
 // src/components/CompactImagesPreview.tsx
-var import_react31 = require("react");
-var import_clsx33 = __toESM(require("clsx"), 1);
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_react33 = require("react");
+var import_clsx34 = __toESM(require("clsx"), 1);
+var import_jsx_runtime52 = require("react/jsx-runtime");
 function CompactImagesPreview(props) {
   const {
     sources,
@@ -6577,7 +7344,7 @@ function CompactImagesPreview(props) {
   } = props;
   const isMobile = useMatchesMobile();
   const imagesCount = sources.length;
-  const handleImgError = (0, import_react31.useCallback)(
+  const handleImgError = (0, import_react33.useCallback)(
     (e) => {
       if (!placeholderImageUri2) return;
       const img = e.currentTarget;
@@ -6587,7 +7354,7 @@ function CompactImagesPreview(props) {
     },
     [placeholderImageUri2, placeholderAlt]
   );
-  const handleThumbnailClick = (0, import_react31.useCallback)(
+  const handleThumbnailClick = (0, import_react33.useCallback)(
     (newIndex) => {
       if (newIndex === currentSourceIndex) return;
       if (newIndex < 0 || newIndex >= imagesCount) return;
@@ -6596,7 +7363,7 @@ function CompactImagesPreview(props) {
     [currentSourceIndex, onChangeSource, imagesCount]
   );
   if (!sources.length || currentSourceIndex >= sources.length || typeof isMobile === "undefined")
-    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
       "img",
       {
         className: "object-center",
@@ -6613,11 +7380,11 @@ function CompactImagesPreview(props) {
       }
     );
   const currentSource = sources[currentSourceIndex];
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Stack, { sizing: "layout", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(Stack, { sizing: "layout", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
       "img",
       {
-        className: (0, import_clsx33.default)("object-center", onMainImageClick && "cursor-pointer"),
+        className: (0, import_clsx34.default)("object-center", onMainImageClick && "cursor-pointer"),
         style: {
           width: isMobile ? "100%" : activeImageWidth,
           height: activeImageHeight,
@@ -6630,18 +7397,18 @@ function CompactImagesPreview(props) {
         onClick: onMainImageClick
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "flex flex-row flex-wrap items-center gap-3", children: sources.slice(0, 4).map((source, index) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "flex flex-row flex-wrap items-center gap-3", children: sources.slice(0, 4).map((source, index) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
       "button",
       {
         onClick: (e) => {
           e.preventDefault();
           handleThumbnailClick(index);
         },
-        className: (0, import_clsx33.default)(
+        className: (0, import_clsx34.default)(
           "cursor-pointer",
           currentSourceIndex === index && enableThumbnailBorder ? "ring-2 ring-offset-2 ring-brand-400 transition-discrete duration-300" : "ring-brand-400/0"
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
           "img",
           {
             src: source.uri,
@@ -6662,31 +7429,31 @@ function CompactImagesPreview(props) {
 }
 
 // src/components/SimpleTable.tsx
-var import_clsx34 = __toESM(require("clsx"), 1);
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_clsx35 = __toESM(require("clsx"), 1);
+var import_jsx_runtime53 = require("react/jsx-runtime");
 function SimpleTable({
   columns,
   data,
   additionalRows
 }) {
   const allRows = additionalRows && additionalRows.length > 0 ? [...data, ...additionalRows] : data;
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Stack, { elevation: 4, rounded: true, overflowX: "hidden", overflowY: "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("table", { className: "w-full border-collapse text-left text-sm border overflow-hidden rounded border-border-primary-normal", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("tr", { className: "bg-background-primary-normal divide-x divide-border-primary-normal", children: columns.map((column, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Stack, { elevation: 4, rounded: true, overflowX: "hidden", overflowY: "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("table", { className: "w-full border-collapse text-left text-sm border overflow-hidden rounded border-border-primary-normal", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("tr", { className: "bg-background-primary-normal divide-x divide-border-primary-normal", children: columns.map((column, index) => {
       var _a, _b;
-      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
         "th",
         {
           scope: "col",
-          className: (0, import_clsx34.default)(
+          className: (0, import_clsx35.default)(
             "p-mobile-layout-padding desktop:p-desktop-layout-padding font-semibold text-text-primary-normal",
             ((_a = column.meta) == null ? void 0 : _a.headerWidth) ? column.meta.headerWidth : "w-2/3"
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Subheader, { children: (_b = column.header) == null ? void 0 : _b.toString() })
+          children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Subheader, { children: (_b = column.header) == null ? void 0 : _b.toString() })
         },
         index
       );
     }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("tbody", { children: allRows.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("tbody", { children: allRows.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       "tr",
       {
         className: "border-t border-border-primary-normal divide-x divide-border-primary-normal",
@@ -6694,10 +7461,10 @@ function SimpleTable({
           var _a;
           const rawValue = column.id ? row[column.id] : null;
           const cellValue = rawValue != null ? rawValue : null;
-          return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
             "td",
             {
-              className: (0, import_clsx34.default)(
+              className: (0, import_clsx35.default)(
                 "p-mobile-layout-padding desktop:p-desktop-layout-padding align-middle text-text-primary-normal",
                 (_a = column.meta) == null ? void 0 : _a.headerWidth
               ),
@@ -6713,17 +7480,17 @@ function SimpleTable({
 }
 
 // src/components/PDFViewer/index.tsx
-var import_react34 = require("react");
+var import_react36 = require("react");
 
 // src/components/PDFViewer/PDFElement.tsx
 var import_react_pdf2 = require("@mikecousins/react-pdf");
-var import_react33 = require("react");
+var import_react35 = require("react");
 
 // src/components/Spinner.tsx
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime54 = 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_runtime54.jsxs)(
     "svg",
     {
       "data-testid": testid,
@@ -6735,14 +7502,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_runtime54.jsx)("circle", { cx: "12", cy: "4", r: "2", opacity: "1" }),
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("circle", { cx: "17.666", cy: "6.334", r: "2", opacity: "0.125" }),
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("circle", { cx: "20", cy: "12", r: "2", opacity: "0.25" }),
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("circle", { cx: "17.666", cy: "17.666", r: "2", opacity: "0.375" }),
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("circle", { cx: "12", cy: "20", r: "2", opacity: "0.5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("circle", { cx: "6.334", cy: "17.666", r: "2", opacity: "0.625" }),
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("circle", { cx: "4", cy: "12", r: "2", opacity: "0.75" }),
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("circle", { cx: "6.334", cy: "6.334", r: "2", opacity: "0.875" })
       ]
     }
   );
@@ -6751,15 +7518,15 @@ 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_react34 = require("react");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 function PdfPage({
   file,
   pageNumber,
   testid,
   isMobile
 }) {
-  const canvasRef = (0, import_react32.useRef)(null);
+  const canvasRef = (0, import_react34.useRef)(null);
   const { pdfDocument } = (0, import_react_pdf.usePdf)({
     file,
     page: pageNumber,
@@ -6768,7 +7535,7 @@ function PdfPage({
     scale: isMobile ? 1 : 1.3
   });
   if (!pdfDocument) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
     "canvas",
     {
       ref: canvasRef,
@@ -6779,8 +7546,8 @@ function PdfPage({
 }
 
 // src/components/PDFViewer/PDFElement.tsx
-var import_clsx35 = __toESM(require("clsx"), 1);
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_clsx36 = __toESM(require("clsx"), 1);
+var import_jsx_runtime56 = require("react/jsx-runtime");
 function PDFElement({
   b64,
   testid,
@@ -6788,7 +7555,7 @@ function PDFElement({
   error
 }) {
   var _a;
-  const canvasRef = (0, import_react33.useRef)(null);
+  const canvasRef = (0, import_react35.useRef)(null);
   const { pdfDocument } = (0, import_react_pdf2.usePdf)({
     file: `data:application/pdf;base64,${b64}`,
     workerSrc: "/scripts/pdf.worker.min.mjs",
@@ -6796,7 +7563,7 @@ function PDFElement({
     canvasRef
   });
   const pagesArr = new Array((_a = pdfDocument == null ? void 0 : pdfDocument.numPages) != null ? _a : 1).fill(null);
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
     "div",
     {
       className: "flex flex-col space-y-4",
@@ -6804,14 +7571,14 @@ function PDFElement({
         minHeight: 871,
         minWidth: 654
       } : void 0,
-      children: !!pdfDocument && !!b64 && !error ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Stack, { sizing: "layout-group", children: pagesArr.length > 1 ? pagesArr.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+      children: !!pdfDocument && !!b64 && !error ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Stack, { sizing: "layout-group", children: pagesArr.length > 1 ? pagesArr.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
         "div",
         {
-          className: (0, import_clsx35.default)(
+          className: (0, import_clsx36.default)(
             "flex justify-center border-border-primary-normal",
             isMobile ? "border-0" : "border"
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
             PdfPage,
             {
               testid: testid ? `${testid}-pdf_page_${i + 1}` : void 0,
@@ -6821,14 +7588,14 @@ function PDFElement({
           )
         },
         `${testid}-pdf-page-${i + 1}`
-      )) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+      )) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
         "div",
         {
-          className: (0, import_clsx35.default)(
+          className: (0, import_clsx36.default)(
             "flex justify-center border-border-primary-normal",
             isMobile ? "border-0" : "border"
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
             "canvas",
             {
               "data-testid": testid ? `${testid}-pdf-content` : void 0,
@@ -6837,7 +7604,7 @@ function PDFElement({
             }
           )
         }
-      ) }) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+      ) }) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
         Stack,
         {
           justify: "center",
@@ -6845,7 +7612,7 @@ function PDFElement({
           height: "full",
           flexGrow: 1,
           "data-testid": testid ? `${testid}-pdf-${error ? "error" : "loading"}` : void 0,
-          children: error ? error : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Spinner, { size: "large" })
+          children: error ? error : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Spinner, { size: "large" })
         }
       )
     }
@@ -6853,26 +7620,26 @@ function PDFElement({
 }
 
 // src/components/PDFViewer/DownloadIcon.tsx
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 function DownloadIcon({
   onClick,
   isDownloading,
   testid
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
     Button,
     {
       testid,
       iconOnly: true,
       variant: "tertiary",
-      leftIcon: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Icon, { name: isDownloading ? "cached" : "download" }),
+      leftIcon: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Icon, { name: isDownloading ? "cached" : "download" }),
       onClick
     }
   );
 }
 
 // src/components/PDFViewer/PDFNavigation.tsx
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 function PdfNavigation({
   currentIndex,
   total,
@@ -6884,7 +7651,7 @@ function PdfNavigation({
   testid,
   fileName
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
     Stack,
     {
       horizontal: true,
@@ -6893,44 +7660,44 @@ function PdfNavigation({
       sizing: "layout-group",
       testid: testid ? `${testid}-pdf-navigation` : void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Stack, { horizontal: true, items: "center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Stack, { horizontal: true, items: "center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
             Button,
             {
               iconOnly: true,
               variant: "tertiary",
               onClick: onPrev,
-              leftIcon: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Icon, { name: "chevron_backward" }),
+              leftIcon: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Icon, { name: "chevron_backward" }),
               disabled: disablePrev,
               testid: testid ? `${testid}-pdf-file-previous-button` : void 0
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Heading3, { className: "text-text-primary-normal whitespace-nowrap", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Heading3, { className: "text-text-primary-normal whitespace-nowrap", children: [
             currentIndex + 1,
             " / ",
             total
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
             Button,
             {
               iconOnly: true,
               variant: "tertiary",
               onClick: onNext,
-              rightIcon: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Icon, { name: "chevron_forward" }),
+              rightIcon: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Icon, { name: "chevron_forward" }),
               disabled: disableNext,
               testid: testid ? `${testid}-pdf-file-next-button` : void 0
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Paragraph, { children: (fileName == null ? void 0 : fileName.endsWith(".pdf")) ? fileName : `${fileName}.pdf` })
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Paragraph, { children: (fileName == null ? void 0 : fileName.endsWith(".pdf")) ? fileName : `${fileName}.pdf` })
         ] }),
-        extraActions && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "flex items-center gap-2", children: extraActions })
+        extraActions && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "flex items-center gap-2", children: extraActions })
       ]
     }
   ) });
 }
 
 // src/components/PDFViewer/index.tsx
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 function PDFViewer(props) {
   const {
     isOpen,
@@ -6944,9 +7711,9 @@ function PDFViewer(props) {
     withPagination = true,
     error
   } = props;
-  const [currentIndex, setCurrentIndex] = (0, import_react34.useState)(0);
-  const [isDownloading, setIsDownloading] = (0, import_react34.useState)(false);
-  const handleDownload = (0, import_react34.useCallback)(() => {
+  const [currentIndex, setCurrentIndex] = (0, import_react36.useState)(0);
+  const [isDownloading, setIsDownloading] = (0, import_react36.useState)(false);
+  const handleDownload = (0, import_react36.useCallback)(() => {
     setIsDownloading(true);
     const link = document.createElement("a");
     const currentPdf = encodedPdfs[currentIndex];
@@ -6977,7 +7744,7 @@ function PDFViewer(props) {
     setIsDownloading(false);
     onClose();
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
     Modal,
     {
       testid,
@@ -6986,7 +7753,7 @@ function PDFViewer(props) {
       onClose: handleClose,
       noWrapper: true,
       showButtons: isMobile && customFooter ? !!customActions : !!encodedPdfs.length,
-      customActions: !!encodedPdfs.length && !isMobile && withPagination ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+      customActions: !!encodedPdfs.length && !isMobile && withPagination ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
         PdfNavigation,
         {
           testid,
@@ -7002,7 +7769,7 @@ function PDFViewer(props) {
       ) : customActions,
       fixedHeightScrolling: true,
       headerIconAlign: "right",
-      headerIcon: !isMobile ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+      headerIcon: !isMobile ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
         DownloadIcon,
         {
           testid: testid ? `${testid}-download-icon` : void 0,
@@ -7013,7 +7780,7 @@ function PDFViewer(props) {
       title: isMobile ? title != null ? title : encodedPdfs[currentIndex].fileName : void 0,
       size: isMobile ? "screen" : "large",
       headerClassname: "bg-brand-400 desktop:bg-background-grouped-primary-normal p-mobile-layout-padding text-brand-text-action-primary-normal",
-      children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
         PDFElement,
         {
           testid,
@@ -7027,9 +7794,9 @@ function PDFViewer(props) {
 }
 
 // src/components/ListGroup.tsx
-var import_react35 = require("react");
-var import_clsx36 = __toESM(require("clsx"), 1);
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_react37 = require("react");
+var import_clsx37 = __toESM(require("clsx"), 1);
+var import_jsx_runtime60 = require("react/jsx-runtime");
 function ListGroup({
   title,
   defaultOpen = false,
@@ -7040,7 +7807,7 @@ function ListGroup({
   className,
   children
 }) {
-  const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react35.useState)(defaultOpen);
+  const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react37.useState)(defaultOpen);
   const isControlled = controlledOpen !== void 0;
   const isOpen = isControlled ? controlledOpen : uncontrolledOpen;
   const toggle = () => {
@@ -7049,24 +7816,24 @@ function ListGroup({
     if (!isControlled) setUncontrolledOpen(next);
     onToggle == null ? void 0 : onToggle(next);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { "data-testid": testid, className: (0, import_clsx36.default)("rounded-sm", className), children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Stack, { sizing: "layout", noGap: true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { "data-testid": testid, className: (0, import_clsx37.default)("rounded-sm", className), children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(Stack, { sizing: "layout", noGap: true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
       "button",
       {
         type: "button",
         onClick: toggle,
-        className: (0, import_clsx36.default)(
+        className: (0, import_clsx37.default)(
           "w-full flex items-center justify-between text-left",
           disabled && "opacity-50 cursor-not-allowed"
         ),
         "aria-expanded": isOpen,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Label, { children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Label, { children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
             Icon,
             {
               name: "expand_more",
-              className: (0, import_clsx36.default)(
+              className: (0, import_clsx37.default)(
                 "transition-transform duration-200",
                 isOpen ? "rotate-180" : "rotate-0"
               )
@@ -7075,14 +7842,14 @@ function ListGroup({
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Stack, { sizing: "layout", paddingTop: true, children })
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Stack, { sizing: "layout", paddingTop: true, children })
   ] }) });
 }
 
 // src/components/Pagination.tsx
-var import_react36 = require("react");
-var import_clsx37 = __toESM(require("clsx"), 1);
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_react38 = require("react");
+var import_clsx38 = __toESM(require("clsx"), 1);
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var Pagination = ({
   totalPages,
   currentPage,
@@ -7092,7 +7859,7 @@ var Pagination = ({
   className,
   disabled
 }) => {
-  const goTo = (0, import_react36.useCallback)(
+  const goTo = (0, import_react38.useCallback)(
     (page) => {
       if (disabled) return;
       onPageChange(page);
@@ -7109,7 +7876,7 @@ var Pagination = ({
       goTo(currentPage + 1);
     }
   };
-  const pageTokens = (0, import_react36.useMemo)(() => {
+  const pageTokens = (0, import_react38.useMemo)(() => {
     if (totalPages <= 5) {
       return Array.from({ length: totalPages }, (_, i) => i + 1);
     }
@@ -7146,7 +7913,7 @@ var Pagination = ({
     return tokens;
   }, [totalPages, currentPage]);
   if (totalPages <= 1) return null;
-  const buttonClass = (0, import_clsx37.default)(
+  const buttonClass = (0, import_clsx38.default)(
     "cursor-pointer disabled:cursor-default",
     paddingUsingComponentGap,
     "w-8 h-8",
@@ -7157,14 +7924,14 @@ 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_runtime61.jsxs)(
     "nav",
     {
       id,
       "data-testid": testid,
       "aria-label": "Pagination",
       onKeyDown: handleKey,
-      className: (0, import_clsx37.default)(
+      className: (0, import_clsx38.default)(
         "flex items-center",
         "border border-border-primary-normal",
         "bg-background-grouped-primary-normal",
@@ -7172,19 +7939,19 @@ var Pagination = ({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime61.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" })
+            className: (0, import_clsx38.default)(buttonClass, "border-r-1 border-border-primary-normal"),
+            children: /* @__PURE__ */ (0, import_jsx_runtime61.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_runtime61.jsx)("ul", { className: (0, import_clsx38.default)("flex items-center"), children: pageTokens.map((token, index) => {
           if (token === "ellipsis") {
-            return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
               "li",
               {
                 className: "w-8 h-8 select-none text-text-action-primary-disabled",
@@ -7194,29 +7961,29 @@ 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_runtime61.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
             "button",
             {
               "aria-label": `Page ${token}`,
               "aria-current": selected ? "page" : void 0,
               disabled,
               onClick: () => goTo(token),
-              className: (0, import_clsx37.default)(
+              className: (0, import_clsx38.default)(
                 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_runtime61.jsx)(Subheader, { align: "center", weight: "bold", children: token })
             }
           ) }, token);
         }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime61.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" })
+            className: (0, import_clsx38.default)(buttonClass, "border-l-1 border-border-primary-normal"),
+            children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Icon, { name: "keyboard_arrow_right" })
           }
         )
       ]
@@ -7226,12 +7993,12 @@ var Pagination = ({
 Pagination.displayName = "Pagination";
 
 // src/components/SkeletonParagraph.tsx
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 function SkeletonParagraph({
   className = "",
   heightClassName = "h-6"
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
     "div",
     {
       "aria-label": "Loading content",
@@ -7242,9 +8009,9 @@ function SkeletonParagraph({
 }
 
 // src/components/EmptyCartIcon.tsx
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 function EmptyCartIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
     "svg",
     {
       width: "211",
@@ -7252,7 +8019,7 @@ function EmptyCartIcon() {
       viewBox: "0 0 211 196",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
         "path",
         {
           "fill-rule": "evenodd",
@@ -7264,9 +8031,90 @@ function EmptyCartIcon() {
     }
   );
 }
+
+// src/components/Alert.tsx
+var import_clsx39 = __toESM(require("clsx"), 1);
+var import_react39 = require("react");
+var import_jsx_runtime64 = require("react/jsx-runtime");
+function Alert(_a) {
+  var _b = _a, {
+    id,
+    testId,
+    variant,
+    title,
+    message,
+    dismissible = false,
+    onClose
+  } = _b, rest = __objRest(_b, [
+    "id",
+    "testId",
+    "variant",
+    "title",
+    "message",
+    "dismissible",
+    "onClose"
+  ]);
+  const isError = variant === "error";
+  const handleClose = (0, import_react39.useCallback)(() => {
+    if (onClose) onClose();
+  }, [onClose]);
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
+    Stack,
+    __spreadProps(__spreadValues({
+      id,
+      "data-testid": testId,
+      sizing: "container",
+      backgroundColor: "background-grouped-primary-normal",
+      borderColor: "border-primary-normal",
+      items: "start",
+      elevation: 4,
+      rounded: true,
+      padding: true,
+      horizontal: true,
+      horizontalMobile: true
+    }, rest), {
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+          "div",
+          {
+            className: (0, import_clsx39.default)("min-w-[2px] min-h-full flex", {
+              "bg-background-critical-normal": isError,
+              "bg-background-warning-normal": !isError
+            })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+          "span",
+          {
+            className: (0, import_clsx39.default)({
+              "text-icon-critical-normal": isError,
+              "text-icon-warning-normal": !isError
+            }),
+            children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Icon, { name: "warning" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(Stack, { flexGrow: 1, sizing: "component", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Heading2, { children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Paragraph, { children: message })
+        ] }),
+        dismissible && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+          Button,
+          {
+            "aria-label": "Dismiss alert",
+            iconOnly: true,
+            variant: "tertiary",
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Icon, { name: "close" }),
+            onClick: handleClose
+          }
+        )
+      ]
+    })
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
+  Alert,
   Button,
   Card,
   Checkbox,
@@ -7274,6 +8122,7 @@ function EmptyCartIcon() {
   DataCellHeader,
   DataGrid,
   DataGridCell,
+  DateInput,
   DragAlongCell,
   DraggableCellHeader,
   EmptyCartIcon,