@dmsi/wedgekit-react 0.0.884 → 0.0.885

package/dist/components/index.cjs

@@ -4432,6 +4432,7 @@ Tooltip.displayName = "Tooltip";
 // src/components/DateInput.tsx
 var import_react21 = require("react");
 var import_react_dom3 = require("react-dom");
+var import_clsx21 = __toESM(require("clsx"), 1);
 
 // src/components/CalendarRange.tsx
 var import_clsx20 = __toESM(require("clsx"), 1);
@@ -4986,10 +4987,12 @@ var DateInput = (_a) => {
   const popoverRef = (0, import_react21.useRef)(null);
   const triggerRef = (0, import_react21.useRef)(null);
   const rootRef = (0, import_react21.useRef)(null);
+  const isMobile = useMatchesMobile();
   const [calendarPosition, setCalendarPosition] = (0, import_react21.useState)({
     top: 0,
     left: 0,
-    width: 0
+    width: 0,
+    openAbove: false
   });
   const [from, to] = [value, ""];
   (0, import_react21.useEffect)(() => {
@@ -5005,11 +5008,28 @@ var DateInput = (_a) => {
   const updatePosition = () => {
     if (rootRef.current) {
       const rect = rootRef.current.getBoundingClientRect();
-      setCalendarPosition({
-        top: rect.bottom + window.scrollY,
-        left: rect.left + window.scrollX,
-        width: rect.width
-      });
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+      const calendarWidth = 340;
+      const calendarHeight = 400;
+      let viewportLeft = rect.left;
+      if (viewportLeft + calendarWidth > viewportWidth) {
+        viewportLeft = rect.right - calendarWidth;
+        if (viewportLeft < 0) {
+          viewportLeft = Math.max(0, (viewportWidth - calendarWidth) / 2);
+        }
+      }
+      const left = viewportLeft + window.scrollX;
+      const spaceBelow = viewportHeight - rect.bottom;
+      const spaceAbove = rect.top;
+      const openAbove = spaceBelow < calendarHeight && spaceAbove > spaceBelow;
+      let top;
+      if (openAbove) {
+        top = rect.top + window.scrollY - calendarHeight - 4;
+      } else {
+        top = rect.bottom + window.scrollY + 4;
+      }
+      setCalendarPosition({ top, left, width: rect.width, openAbove });
     }
   };
   (0, import_react21.useEffect)(() => {
@@ -5092,7 +5112,10 @@ var DateInput = (_a) => {
       if (cursorPosition > 0 && value2[cursorPosition - 1] === sep) {
         event.preventDefault();
         const newValue = value2.slice(0, cursorPosition - 2) + value2.slice(cursorPosition);
-        const formattedValue = formatInputValueWithDashes(newValue, dateInDashes);
+        const formattedValue = formatInputValueWithDashes(
+          newValue,
+          dateInDashes
+        );
         setInputValue(formattedValue);
         requestAnimationFrame(() => {
           if (triggerRef.current) {
@@ -5143,25 +5166,58 @@ var DateInput = (_a) => {
         /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           "div",
           {
-            className: "fixed inset-0 z-30",
+            className: (0, import_clsx21.default)(
+              "fixed inset-0 z-50",
+              isMobile && "overflow-y-auto bg-neutral-600/50"
+            ),
             onClick: () => setVisible(false),
             onMouseDown: (e) => {
-              e.preventDefault();
+              if (!isMobile) {
+                e.preventDefault();
+              }
             },
             onWheel: (e) => {
               var _a2;
-              const scrollableParent = (_a2 = document.scrollingElement) != null ? _a2 : document.documentElement;
-              scrollableParent.scrollTop += e.deltaY;
-              scrollableParent.scrollLeft += e.deltaX;
+              if (!isMobile) {
+                const scrollableParent = (_a2 = document.scrollingElement) != null ? _a2 : document.documentElement;
+                scrollableParent.scrollTop += e.deltaY;
+                scrollableParent.scrollLeft += e.deltaX;
+              }
             },
             onTouchMove: (e) => {
-              e.stopPropagation();
+              if (!isMobile) {
+                e.stopPropagation();
+              }
             },
-            style: { touchAction: "pan-y pan-x" },
-            "aria-hidden": "true"
+            style: { touchAction: isMobile ? "auto" : "pan-y pan-x" },
+            "aria-hidden": "true",
+            children: isMobile && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "min-h-full flex items-start justify-center py-4 px-2", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              "div",
+              {
+                ref: (el) => {
+                  popoverRef.current = el;
+                },
+                className: "bg-white rounded-base shadow-4 max-w-full",
+                onClick: (e) => e.stopPropagation(),
+                children: /* @__PURE__ */ (0, import_jsx_runtime25.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,
+                    isDateAvailable
+                  }
+                )
+              }
+            ) })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        !isMobile && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           "div",
           {
             ref: (el) => {
@@ -5169,7 +5225,7 @@ var DateInput = (_a) => {
             },
             className: "absolute z-50 bg-white",
             style: {
-              top: `${calendarPosition.top + 4}px`,
+              top: `${calendarPosition.top}px`,
               left: `${calendarPosition.left}px`
             },
             children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
@@ -5205,10 +5261,10 @@ function formatDisplayValue(from, dateInDashes) {
 }
 
 // src/components/Accordion.tsx
-var import_clsx23 = __toESM(require("clsx"), 1);
+var import_clsx24 = __toESM(require("clsx"), 1);
 
 // src/components/Card.tsx
-var import_clsx21 = __toESM(require("clsx"), 1);
+var import_clsx22 = __toESM(require("clsx"), 1);
 var import_jsx_runtime26 = require("react/jsx-runtime");
 function Card(props) {
   const _a = props, {
@@ -5238,7 +5294,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_clsx21.default)(
+  const paddingClasses = (0, import_clsx22.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)
@@ -5254,7 +5310,7 @@ function Card(props) {
     CardComponent,
     __spreadProps(__spreadValues({}, rest), {
       "data-testid": testid,
-      className: (0, import_clsx21.default)(
+      className: (0, import_clsx22.default)(
         "rounded-sm",
         paddingClasses,
         selected ? "border-2 border-border-primary-focus" : "border border-border-primary-normal",
@@ -5270,9 +5326,9 @@ function Card(props) {
 }
 
 // src/components/Stack.tsx
-var import_clsx22 = __toESM(require("clsx"), 1);
+var import_clsx23 = __toESM(require("clsx"), 1);
 var import_jsx_runtime27 = require("react/jsx-runtime");
-var getFlexClassNames = ({ items, justify, grow }) => (0, import_clsx22.default)(
+var getFlexClassNames = ({ items, justify, grow }) => (0, import_clsx23.default)(
   "flex",
   items === "start" && "items-start",
   grow && "grow",
@@ -5288,7 +5344,7 @@ var getFlexClassNames = ({ items, justify, grow }) => (0, import_clsx22.default)
   justify === "around" && "justify-around"
 );
 var useGapClassNames = (sizing) => {
-  return (0, import_clsx22.default)(
+  return (0, import_clsx23.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",
@@ -5432,7 +5488,7 @@ var Stack = (_a) => {
         paddingInline: (_f = props.style) == null ? void 0 : _f.paddingInline,
         gap: (_g = props.style) == null ? void 0 : _g.gap
       }, props.style),
-      className: (0, import_clsx22.default)(
+      className: (0, import_clsx23.default)(
         "scrollbar-thin",
         "max-w-screen",
         width !== "fit" && "w-full",
@@ -5513,7 +5569,7 @@ function Accordion(props) {
       Icon,
       {
         name: "expand_more",
-        className: (0, import_clsx23.default)(
+        className: (0, import_clsx24.default)(
           "text-icon-primary-normal transform transition-all duration-300 ease-in-out",
           isOpen ? "rotate-180" : "rotate-0"
         )
@@ -5529,7 +5585,7 @@ function Accordion(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
     Card,
     {
-      className: (0, import_clsx23.default)(
+      className: (0, import_clsx24.default)(
         "overflow-hidden select-none",
         { "cursor-pointer": !disabled },
         className
@@ -5565,7 +5621,7 @@ function Accordion(props) {
         /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           "div",
           {
-            className: (0, import_clsx23.default)("grid transition-all duration-300 ease-in-out"),
+            className: (0, import_clsx24.default)("grid transition-all duration-300 ease-in-out"),
             style: {
               gridTemplateRows: isOpen ? "1fr" : "0fr"
             },
@@ -5573,7 +5629,7 @@ function Accordion(props) {
             children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
               "div",
               {
-                className: (0, import_clsx23.default)(
+                className: (0, import_clsx24.default)(
                   typography.paragraph,
                   "text-text-primary-normal desktop:pt-desktop-layout-gap",
                   "flex flex-col gap-desktop-layout-gap"
@@ -5590,7 +5646,7 @@ function Accordion(props) {
 }
 
 // src/components/Heading.tsx
-var import_clsx24 = __toESM(require("clsx"), 1);
+var import_clsx25 = __toESM(require("clsx"), 1);
 var import_jsx_runtime29 = require("react/jsx-runtime");
 var Heading = (_a) => {
   var _b = _a, {
@@ -5619,7 +5675,7 @@ var Heading = (_a) => {
     __spreadProps(__spreadValues({
       id,
       "data-testid": testid,
-      className: (0, import_clsx24.default)(
+      className: (0, import_clsx25.default)(
         typography[variant],
         className,
         align === "left" && "text-left",
@@ -5985,11 +6041,11 @@ function GridContextProvider(props) {
 }
 
 // src/components/Modal.tsx
-var import_clsx29 = __toESM(require("clsx"), 1);
+var import_clsx30 = __toESM(require("clsx"), 1);
 var import_react27 = require("react");
 
 // src/components/ModalHeader.tsx
-var import_clsx25 = __toESM(require("clsx"), 1);
+var import_clsx26 = __toESM(require("clsx"), 1);
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var ModalHeader = ({
   title,
@@ -6009,7 +6065,7 @@ var ModalHeader = ({
     {
       id,
       "data-testid": testid,
-      className: (0, import_clsx25.default)(
+      className: (0, import_clsx26.default)(
         "flex justify-between items-center",
         headerIconAlign === "center" && "justify-center",
         headerIconAlign === "right" && "justify-end",
@@ -6019,7 +6075,7 @@ var ModalHeader = ({
         headerClassname
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: (0, import_clsx25.default)("flex items-center flex-1", layoutGroupGap), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: (0, import_clsx26.default)("flex items-center flex-1", layoutGroupGap), children: [
           headerIcon,
           title && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             Title,
@@ -6042,7 +6098,7 @@ var ModalHeader = ({
             leftIcon: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
               "span",
               {
-                className: (0, import_clsx25.default)(
+                className: (0, import_clsx26.default)(
                   "contents",
                   headerIconClassname != null ? headerIconClassname : "text-icon-primary-normal"
                 ),
@@ -6058,7 +6114,7 @@ var ModalHeader = ({
 ModalHeader.displayName = "ModalHeader";
 
 // src/components/ModalContent.tsx
-var import_clsx26 = __toESM(require("clsx"), 1);
+var import_clsx27 = __toESM(require("clsx"), 1);
 var import_jsx_runtime35 = require("react/jsx-runtime");
 function ModalContent({
   fixedHeightScrolling,
@@ -6071,7 +6127,7 @@ function ModalContent({
     {
       id,
       "data-testid": testid,
-      className: (0, import_clsx26.default)(
+      className: (0, import_clsx27.default)(
         "flex-grow desktop:flex-grow-0",
         layoutPaddding,
         fixedHeightScrolling && "overflow-auto"
@@ -6083,7 +6139,7 @@ function ModalContent({
 ModalContent.displayName = "ModalContent";
 
 // src/components/ModalButtons.tsx
-var import_clsx27 = __toESM(require("clsx"), 1);
+var import_clsx28 = __toESM(require("clsx"), 1);
 var import_jsx_runtime36 = require("react/jsx-runtime");
 var ModalButtons = ({
   onClose,
@@ -6098,7 +6154,7 @@ var ModalButtons = ({
     {
       id,
       "data-testid": testid,
-      className: (0, import_clsx27.default)(
+      className: (0, import_clsx28.default)(
         "border-t border-neutral-300 flex justify-end",
         mobileButtonStack && "flex-col ",
         layoutPaddding,
@@ -6136,7 +6192,7 @@ var ModalButtons = ({
 ModalButtons.displayName = "ModalButtons";
 
 // src/components/ModalScrim.tsx
-var import_clsx28 = __toESM(require("clsx"), 1);
+var import_clsx29 = __toESM(require("clsx"), 1);
 var import_jsx_runtime37 = require("react/jsx-runtime");
 var ModalScrim = ({
   show = false,
@@ -6152,7 +6208,7 @@ var ModalScrim = ({
     {
       id,
       "data-testid": testid,
-      className: (0, import_clsx28.default)(
+      className: (0, import_clsx29.default)(
         "overflow-y-auto h-dvh 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",
@@ -6373,7 +6429,7 @@ var Modal = ({
             id,
             "data-testid": testid,
             ref: modalRef,
-            className: (0, import_clsx29.default)(
+            className: (0, import_clsx30.default)(
               "shadow-md rounded-sm flex flex-col overflow-hidden w-full opacity-0",
               computedFixedHeightScrolling && size !== "screen" && "desktop:max-h-[calc(100vh-32px)] desktop:h-auto",
               className,
@@ -6548,10 +6604,10 @@ function RowDetailModalProvider() {
 }
 
 // src/components/MobileDataGrid/ColumnList.tsx
-var import_clsx31 = __toESM(require("clsx"), 1);
+var import_clsx32 = __toESM(require("clsx"), 1);
 
 // src/components/MobileDataGrid/MobileDataGridCard/index.tsx
-var import_clsx30 = __toESM(require("clsx"), 1);
+var import_clsx31 = __toESM(require("clsx"), 1);
 var import_jsx_runtime42 = require("react/jsx-runtime");
 function MobileDataGridCard({
   renderLink,
@@ -6569,7 +6625,7 @@ function MobileDataGridCard({
     {
       id: id ? `${id}-card-${getId(data)}` : void 0,
       "data-testid": testid ? `${testid}-card-${getId(data)}` : void 0,
-      className: (0, import_clsx30.default)(
+      className: (0, import_clsx31.default)(
         "flex flex-col",
         "hover:bg-action-100 cursor-pointer list-none",
         selected ? "bg-action-100" : "bg-background-grouped-primary-normal",
@@ -6692,7 +6748,7 @@ function ColumnList(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     "div",
     {
-      className: (0, import_clsx31.default)(
+      className: (0, import_clsx32.default)(
         "flex flex-col flex-1 relative overflow-y-auto overflow-x-hidden",
         !!Footer && "mb-20"
       ),
@@ -6701,7 +6757,7 @@ function ColumnList(props) {
         {
           id,
           "data-testid": testid,
-          className: (0, import_clsx31.default)(
+          className: (0, import_clsx32.default)(
             "rounded absolute top-0 left-0 w-full flex-1",
             empty && "!rounded-t-none",
             "divide-y divide-border-primary-normal",
@@ -6711,7 +6767,7 @@ function ColumnList(props) {
             empty ? /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
               "div",
               {
-                className: (0, import_clsx31.default)(
+                className: (0, import_clsx32.default)(
                   "flex flex-col items-center justify-center",
                   componentGap,
                   componentPadding
@@ -6893,7 +6949,7 @@ function Thumbnail({
 }
 
 // src/components/Grid.tsx
-var import_clsx32 = __toESM(require("clsx"), 1);
+var import_clsx33 = __toESM(require("clsx"), 1);
 var import_jsx_runtime47 = require("react/jsx-runtime");
 var GAP_BY_SIZING = {
   none: "gap-0",
@@ -6949,7 +7005,7 @@ var Grid = (_a) => {
       "data-testid": testid,
       style
     }, rest), {
-      className: (0, import_clsx32.default)(
+      className: (0, import_clsx33.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),
@@ -7132,7 +7188,7 @@ function ProductPrimaryImage({
 var import_react31 = require("react");
 
 // src/components/Surface.tsx
-var import_clsx33 = __toESM(require("clsx"), 1);
+var import_clsx34 = __toESM(require("clsx"), 1);
 var import_jsx_runtime49 = require("react/jsx-runtime");
 var Surface = (_a) => {
   var _b = _a, {
@@ -7150,7 +7206,7 @@ var Surface = (_a) => {
     "div",
     __spreadProps(__spreadValues({
       id,
-      className: (0, import_clsx33.default)(
+      className: (0, import_clsx34.default)(
         "rounded-base",
         {
           "shadow-2": elevation === 2,
@@ -7261,7 +7317,7 @@ function ZoomWindow({
 }
 
 // src/components/ProductImagePreview/CarouselPagination.tsx
-var import_clsx34 = require("clsx");
+var import_clsx35 = require("clsx");
 var import_jsx_runtime51 = require("react/jsx-runtime");
 function CarouselPagination({
   images,
@@ -7273,7 +7329,7 @@ function CarouselPagination({
   return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     "div",
     {
-      className: (0, import_clsx34.clsx)(
+      className: (0, import_clsx35.clsx)(
         "flex items-center justify-center w-full px-4 md:hidden",
         className
       ),
@@ -7291,7 +7347,7 @@ function CarouselPagination({
             {
               type: "button",
               onClick: () => onSelect(index),
-              className: (0, import_clsx34.clsx)(
+              className: (0, import_clsx35.clsx)(
                 "w-4 h-4 transition-all duration-200 focus:outline-none",
                 index === currentIndex ? "ring-2 ring-brand-400" : "ring ring-neutral-300"
               ),
@@ -7778,7 +7834,7 @@ function ProductImagePreview(props) {
 
 // src/components/CompactImagesPreview.tsx
 var import_react34 = require("react");
-var import_clsx35 = __toESM(require("clsx"), 1);
+var import_clsx36 = __toESM(require("clsx"), 1);
 var import_jsx_runtime54 = require("react/jsx-runtime");
 function CompactImagesPreview(props) {
   const {
@@ -7839,7 +7895,7 @@ function CompactImagesPreview(props) {
       "img",
       {
         "data-testid": testid ? `${testid}-main-image` : void 0,
-        className: (0, import_clsx35.default)("object-center", onMainImageClick && "cursor-pointer"),
+        className: (0, import_clsx36.default)("object-center", onMainImageClick && "cursor-pointer"),
         style: {
           width: isMobile ? "100%" : activeImageWidth,
           height: activeImageHeight,
@@ -7860,7 +7916,7 @@ function CompactImagesPreview(props) {
           e.preventDefault();
           handleThumbnailClick(index);
         },
-        className: (0, import_clsx35.default)(
+        className: (0, import_clsx36.default)(
           "cursor-pointer",
           currentSourceIndex === index && enableThumbnailBorder ? "ring-2 ring-offset-2 ring-brand-400 transition-discrete duration-300" : "ring-brand-400/0"
         ),
@@ -7885,7 +7941,7 @@ function CompactImagesPreview(props) {
 }
 
 // src/components/SimpleTable.tsx
-var import_clsx36 = __toESM(require("clsx"), 1);
+var import_clsx37 = __toESM(require("clsx"), 1);
 var import_jsx_runtime55 = require("react/jsx-runtime");
 function SimpleTable({
   columns,
@@ -7909,7 +7965,7 @@ function SimpleTable({
             "th",
             {
               scope: "col",
-              className: (0, import_clsx36.default)(
+              className: (0, import_clsx37.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"
               ),
@@ -7929,7 +7985,7 @@ function SimpleTable({
               return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                 "td",
                 {
-                  className: (0, import_clsx36.default)(
+                  className: (0, import_clsx37.default)(
                     "p-mobile-layout-padding desktop:p-desktop-layout-padding align-middle text-text-primary-normal",
                     (_a = column.meta) == null ? void 0 : _a.headerWidth
                   ),
@@ -7948,7 +8004,7 @@ function SimpleTable({
 
 // src/components/ListGroup.tsx
 var import_react35 = require("react");
-var import_clsx37 = __toESM(require("clsx"), 1);
+var import_clsx38 = __toESM(require("clsx"), 1);
 var import_jsx_runtime56 = require("react/jsx-runtime");
 function ListGroup({
   title,
@@ -7969,13 +8025,13 @@ function ListGroup({
     if (!isControlled) setUncontrolledOpen(next);
     onToggle == null ? void 0 : onToggle(next);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { "data-testid": testid, className: (0, import_clsx37.default)("rounded-sm", className), children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Stack, { sizing: "layout", noGap: true, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { "data-testid": testid, className: (0, import_clsx38.default)("rounded-sm", className), children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Stack, { sizing: "layout", noGap: true, children: [
     /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
       "button",
       {
         type: "button",
         onClick: toggle,
-        className: (0, import_clsx37.default)(
+        className: (0, import_clsx38.default)(
           "w-full flex items-center justify-between text-left",
           disabled && "opacity-50 cursor-not-allowed"
         ),
@@ -7986,7 +8042,7 @@ function ListGroup({
             Icon,
             {
               name: "expand_more",
-              className: (0, import_clsx37.default)(
+              className: (0, import_clsx38.default)(
                 "transition-transform duration-200",
                 isOpen ? "rotate-180" : "rotate-0"
               )
@@ -8001,7 +8057,7 @@ function ListGroup({
 
 // src/components/Pagination.tsx
 var import_react36 = require("react");
-var import_clsx38 = __toESM(require("clsx"), 1);
+var import_clsx39 = __toESM(require("clsx"), 1);
 var import_jsx_runtime57 = require("react/jsx-runtime");
 var Pagination = ({
   totalPages,
@@ -8066,7 +8122,7 @@ var Pagination = ({
     return tokens;
   }, [totalPages, currentPage]);
   if (totalPages <= 1) return null;
-  const buttonClass = (0, import_clsx38.default)(
+  const buttonClass = (0, import_clsx39.default)(
     "cursor-pointer disabled:cursor-default",
     paddingUsingComponentGap,
     "w-8 h-8",
@@ -8084,7 +8140,7 @@ var Pagination = ({
       "data-testid": testid,
       "aria-label": "Pagination",
       onKeyDown: handleKey,
-      className: (0, import_clsx38.default)(
+      className: (0, import_clsx39.default)(
         "flex items-center",
         "border border-border-primary-normal",
         "bg-background-grouped-primary-normal",
@@ -8098,11 +8154,11 @@ var Pagination = ({
             disabled: disabled || currentPage <= 1,
             "aria-label": "Previous page",
             onClick: () => goTo(currentPage - 1),
-            className: (0, import_clsx38.default)(buttonClass, "border-r-1 border-border-primary-normal"),
+            className: (0, import_clsx39.default)(buttonClass, "border-r-1 border-border-primary-normal"),
             children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Icon, { name: "keyboard_arrow_left" })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("ul", { className: (0, import_clsx38.default)("flex items-center"), children: pageTokens.map((token, index) => {
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("ul", { className: (0, import_clsx39.default)("flex items-center"), children: pageTokens.map((token, index) => {
           if (token === "ellipsis") {
             return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
               "li",
@@ -8121,7 +8177,7 @@ var Pagination = ({
               "aria-current": selected ? "page" : void 0,
               disabled,
               onClick: () => goTo(token),
-              className: (0, import_clsx38.default)(
+              className: (0, import_clsx39.default)(
                 buttonClass,
                 selected && "border-x-1 bg-background-grouped-secondary-normal border-border-primary-normal"
               ),
@@ -8135,7 +8191,7 @@ var Pagination = ({
             disabled: disabled || currentPage >= totalPages,
             "aria-label": "Next page",
             onClick: () => goTo(currentPage + 1),
-            className: (0, import_clsx38.default)(buttonClass, "border-l-1 border-border-primary-normal"),
+            className: (0, import_clsx39.default)(buttonClass, "border-l-1 border-border-primary-normal"),
             children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Icon, { name: "keyboard_arrow_right" })
           }
         )
@@ -8219,7 +8275,7 @@ function SearchResultImage({
 }
 
 // src/components/Alert.tsx
-var import_clsx39 = __toESM(require("clsx"), 1);
+var import_clsx40 = __toESM(require("clsx"), 1);
 var import_react38 = require("react");
 var import_jsx_runtime61 = require("react/jsx-runtime");
 function Alert(_a) {
@@ -8263,7 +8319,7 @@ function Alert(_a) {
         /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
           "div",
           {
-            className: (0, import_clsx39.default)("min-w-[2px] min-h-full flex", {
+            className: (0, import_clsx40.default)("min-w-[2px] min-h-full flex", {
               "bg-background-critical-normal": isError,
               "bg-background-warning-normal": !isError
             })
@@ -8272,7 +8328,7 @@ function Alert(_a) {
         /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
           "span",
           {
-            className: (0, import_clsx39.default)({
+            className: (0, import_clsx40.default)({
               "text-icon-critical-normal": isError,
               "text-icon-warning-normal": !isError
             }),
@@ -8340,10 +8396,10 @@ var useTableEditingContext = () => {
 };
 
 // src/components/AccessCard.tsx
-var import_clsx41 = __toESM(require("clsx"), 1);
+var import_clsx42 = __toESM(require("clsx"), 1);
 
 // src/components/Radio.tsx
-var import_clsx40 = __toESM(require("clsx"), 1);
+var import_clsx41 = __toESM(require("clsx"), 1);
 var import_jsx_runtime64 = require("react/jsx-runtime");
 var Radio = (_a) => {
   var _b = _a, {
@@ -8367,16 +8423,16 @@ var Radio = (_a) => {
   ]);
   const radioId = id;
   const paragraphColor = disabled ? "text-primary-disabled" : error ? "text-primary-error" : "text-primary-normal";
-  const defaultClassName = (0, import_clsx40.default)(
+  const defaultClassName = (0, import_clsx41.default)(
     !error && !disabled && "border-border-primary-normal peer-hover:border-border-action-hover peer-hover:bg-background-action-secondary-hover peer-focus:border-border-action-hover peer-focus:bg-background-action-secondary-hover peer-active:border-border-action-active peer-active:bg-background-action-secondary-active peer-checked:border-0 peer-checked:bg-background-action-secondary-hover"
   );
-  const errorClassName = (0, import_clsx40.default)(
+  const errorClassName = (0, import_clsx41.default)(
     error && !disabled && "border-border-action-critical-normal peer-hover:border-border-action-critical-hover peer-hover:bg-background-action-critical-secondary-hover peer-focus:border-border-action-critical-hover peer-focus:bg-background-action-critical-secondary-hover peer-active:border-border-action-critical-active peer-active:bg-background-action-secondary-active peer-checked:bg-background-action-critical-secondary-hover peer-checked:border-0 "
   );
-  const disabledClassName = (0, import_clsx40.default)(
+  const disabledClassName = (0, import_clsx41.default)(
     disabled && "peer-disabled:bg-background-action-secondary-disabled peer-disabled:border-border-primary-normal peer-checked:border-0"
   );
-  const readonlyClassName = (0, import_clsx40.default)(
+  const readonlyClassName = (0, import_clsx41.default)(
     readOnly && "peer-read-only:bg-background-action-secondary-disabled peer-read-only:border-border-primary-normal peer-checked:border-0"
   );
   return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
@@ -8384,7 +8440,7 @@ var Radio = (_a) => {
     {
       htmlFor: radioId,
       "data-testid": testid,
-      className: (0, import_clsx40.default)(
+      className: (0, import_clsx41.default)(
         "flex items-center",
         componentGap,
         disabled ? "cursor-default" : "cursor-pointer",
@@ -8407,7 +8463,7 @@ var Radio = (_a) => {
           /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
             "div",
             {
-              className: (0, import_clsx40.default)(
+              className: (0, import_clsx41.default)(
                 "size-6 rounded-full border flex items-center justify-center",
                 baseTransition,
                 defaultClassName,
@@ -8418,7 +8474,7 @@ var Radio = (_a) => {
               children: checked && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
                 RadioIcon,
                 {
-                  className: (0, import_clsx40.default)(
+                  className: (0, import_clsx41.default)(
                     "transition-colors",
                     !error && !disabled && "text-icon-on-action-secondary-normal hover:text-icon-on-action-secondary-hover active:text-icon-on-action-secondary-active peer-hover:text-icon-on-action-secondary-hover peer-focus:text-icon-on-action-secondary-hover peer-active:text-icon-on-action-secondary-active",
                     error && !disabled && "text-icon-action-critical-secondary-normal hover:text-icon-action-critical-secondary-hover active:text-icon-action-critical-secondary-active peer-hover:text-icon-action-critical-secondary-hover peer-focus:text-icon-action-critical-secondary-hover peer-active:text-icon-action-critical-secondary-active",
@@ -8485,7 +8541,7 @@ function AccessCard(props) {
       "div",
       {
         "data-testid": testid,
-        className: (0, import_clsx41.default)(
+        className: (0, import_clsx42.default)(
           "cursor-pointer bg-background-grouped-secondary-normal",
           "px-4 py-2 gap-2",
           "shadow-access-card rounded",
@@ -8532,7 +8588,7 @@ function AccessCard(props) {
 }
 
 // src/components/AccessCardGroup.tsx
-var import_clsx42 = __toESM(require("clsx"), 1);
+var import_clsx43 = __toESM(require("clsx"), 1);
 var import_react40 = require("react");
 var import_jsx_runtime66 = require("react/jsx-runtime");
 function AccessCardGroup(props) {
@@ -8552,7 +8608,7 @@ function AccessCardGroup(props) {
     /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
       "div",
       {
-        className: (0, import_clsx42.default)(
+        className: (0, import_clsx43.default)(
           "flex items-center",
           "p-2 pr-4 gap-2",
           "rounded",
@@ -8570,7 +8626,7 @@ function AccessCardGroup(props) {
             Icon,
             {
               name: "keyboard_arrow_down",
-              className: (0, import_clsx42.default)(
+              className: (0, import_clsx43.default)(
                 expand && "rotate-180",
                 "transform transition-all duration-300 ease-in-out"
               )
@@ -8593,7 +8649,7 @@ function AccessCardGroup(props) {
     /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
       "div",
       {
-        className: (0, import_clsx42.default)(
+        className: (0, import_clsx43.default)(
           "grid transition-all duration-300 ease-in-out",
           expand ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
         ),
@@ -8640,9 +8696,9 @@ var useSelectedSnapDisplay = (emblaApi) => {
 };
 
 // src/components/EmblaCarousel/ArrowButtons.tsx
-var import_clsx43 = __toESM(require("clsx"), 1);
+var import_clsx44 = __toESM(require("clsx"), 1);
 var import_jsx_runtime68 = require("react/jsx-runtime");
-var arrowButtonStyles = (0, import_clsx43.default)(
+var arrowButtonStyles = (0, import_clsx44.default)(
   "appearance-none bg-transparent border cursor-pointer p-2 flex items-center justify-center size-9 rounded-full transition-colors duration-300 ease-in-out"
 );
 var PrevButton = (props) => {
@@ -8650,7 +8706,7 @@ var PrevButton = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
     "button",
     __spreadProps(__spreadValues({
-      className: (0, import_clsx43.default)(
+      className: (0, import_clsx44.default)(
         arrowButtonStyles,
         !disabled && "border-border-primary-normal hover:border-border-action-hover active:border-border-action-active",
         disabled && "border-border-action-disabled"
@@ -8661,7 +8717,7 @@ var PrevButton = (props) => {
         /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
           "svg",
           {
-            className: (0, import_clsx43.default)(
+            className: (0, import_clsx44.default)(
               "size-3 transition-colors duration-300 ease-in-out",
               !disabled && "text-text-primary-normal",
               disabled && "text-icon-primary-disabled"
@@ -8686,7 +8742,7 @@ var NextButton = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
     "button",
     __spreadProps(__spreadValues({
-      className: (0, import_clsx43.default)(
+      className: (0, import_clsx44.default)(
         arrowButtonStyles,
         !disabled && "border-border-primary-normal hover:border-border-action-hover active:border-border-action-active",
         disabled && "border-border-action-disabled"
@@ -8697,7 +8753,7 @@ var NextButton = (props) => {
         /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
           "svg",
           {
-            className: (0, import_clsx43.default)(
+            className: (0, import_clsx44.default)(
               "size-3 transition-colors duration-300 ease-in-out",
               !disabled && "text-text-primary-normal",
               disabled && "text-icon-primary-disabled"