@dmsi/wedgekit-react 0.0.552 → 0.0.554

package/dist/components/index.cjs

@@ -59,6 +59,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/components/index.ts
 var components_exports = {};
 __export(components_exports, {
+  AccessCard: () => AccessCard,
+  AccessCardGroup: () => AccessCardGroup,
   Accordion: () => Accordion,
   Alert: () => Alert,
   Button: () => Button,
@@ -4095,7 +4097,39 @@ Checkbox.displayName = "Checkbox";
 
 // src/components/Button.tsx
 var import_clsx18 = __toESM(require("clsx"), 1);
+
+// src/components/Spinner.tsx
 var import_jsx_runtime21 = require("react/jsx-runtime");
+var Spinner = ({ size = "small", testid }) => {
+  const dimension = size === "large" ? 48 : 24;
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    "svg",
+    {
+      "data-testid": testid,
+      width: dimension,
+      height: dimension,
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "#1D1E1E",
+      className: "spinner",
+      "aria-label": "Loading",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("circle", { cx: "12", cy: "4", r: "2", opacity: "1" }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("circle", { cx: "17.666", cy: "6.334", r: "2", opacity: "0.125" }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("circle", { cx: "20", cy: "12", r: "2", opacity: "0.25" }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("circle", { cx: "17.666", cy: "17.666", r: "2", opacity: "0.375" }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("circle", { cx: "12", cy: "20", r: "2", opacity: "0.5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("circle", { cx: "6.334", cy: "17.666", r: "2", opacity: "0.625" }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("circle", { cx: "4", cy: "12", r: "2", opacity: "0.75" }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("circle", { cx: "6.334", cy: "6.334", r: "2", opacity: "0.875" })
+      ]
+    }
+  );
+};
+Spinner.displayName = "Spinner";
+
+// src/components/Button.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var Button = (_a) => {
   var _b = _a, {
     variant = "primary",
@@ -4111,7 +4145,8 @@ var Button = (_a) => {
     colorClassName,
     href,
     id,
-    testid
+    testid,
+    isLoading
   } = _b, props = __objRest(_b, [
     "variant",
     "as",
@@ -4126,7 +4161,8 @@ var Button = (_a) => {
     "colorClassName",
     "href",
     "id",
-    "testid"
+    "testid",
+    "isLoading"
   ]);
   const primaryVariantStyles = variant === "primary" && (0, import_clsx18.default)(
     (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
@@ -4210,7 +4246,7 @@ var Button = (_a) => {
     typography.buttonLabel
   );
   const Element = href && !as ? "a" : as;
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     Element,
     __spreadProps(__spreadValues({
       id,
@@ -4224,7 +4260,8 @@ var Button = (_a) => {
       "data-theme": variant === "navigation" ? "brand" : void 0,
       children: [
         leftIcon && leftIcon,
-        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { id: id ? `${id}-label` : void 0, "data-testid": testid ? `${testid}-label` : void 0, className: labelClasses, children }),
+        isLoading && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Spinner, { size: "small" }),
+        !iconOnly && !isLoading && children && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { id: id ? `${id}-label` : void 0, "data-testid": testid ? `${testid}-label` : void 0, className: labelClasses, children }),
         rightIcon && rightIcon
       ]
     })
@@ -4236,7 +4273,7 @@ Button.displayName = "Button";
 var import_clsx19 = __toESM(require("clsx"), 1);
 var import_react18 = require("react");
 var import_react_dom2 = require("react-dom");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var Tooltip = ({
   id,
   testid,
@@ -4303,7 +4340,7 @@ var Tooltip = ({
       return () => window.removeEventListener("resize", updatePosition);
     }
   }, [isVisible]);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     "div",
     {
       id,
@@ -4315,7 +4352,7 @@ var Tooltip = ({
       children: [
         children,
         !keepHidden && isVisible && typeof document !== "undefined" && (0, import_react_dom2.createPortal)(
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             "div",
             {
               id: id ? `${id}-message` : void 0,
@@ -4362,7 +4399,7 @@ var import_react_dom3 = require("react-dom");
 var import_clsx20 = __toESM(require("clsx"), 1);
 var import_react19 = __toESM(require("react"), 1);
 var import_polyfill = require("@js-temporal/polyfill");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function DateCell(_a) {
   var _b = _a, {
     date,
@@ -4397,7 +4434,7 @@ function DateCell(_a) {
     "id",
     "testid"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     "span",
     __spreadProps(__spreadValues({}, props), {
       id,
@@ -4553,7 +4590,7 @@ function CalendarRange({
     }
     return false;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     "div",
     {
       id,
@@ -4566,7 +4603,7 @@ function CalendarRange({
         // baseTransition,
         "overflow-hidden"
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         "div",
         {
           className: (0, import_clsx20.default)(
@@ -4574,7 +4611,7 @@ function CalendarRange({
             layoutGap
           ),
           children: (mode === "double" ? [0, 1] : [0]).map((offset, idx) => {
-            return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
               CalendarPane,
               {
                 getMonthData,
@@ -4639,13 +4676,13 @@ function CalendarPane({
   const month = getMonthData(offset);
   const totalCells = 42;
   const emptyCells = month.firstDayOffset;
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react19.default.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react19.default.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
       "div",
       {
         className: (0, import_clsx20.default)("flex flex-col"),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
             "div",
             {
               className: (0, import_clsx20.default)(
@@ -4654,7 +4691,7 @@ function CalendarPane({
                 "text-text-action-primary-normal"
               ),
               children: [
-                idx === 0 ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                idx === 0 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                   "button",
                   {
                     id: id ? `${id}-prev-month-button` : void 0,
@@ -4666,11 +4703,11 @@ function CalendarPane({
                     ),
                     "aria-label": "Previous month",
                     onClick: () => setBaseMonth(baseMonth.subtract({ months: 1 })),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, { name: "chevron_left", size: 24 })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, { name: "chevron_left", size: 24 })
                   }
-                ) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: (0, import_clsx20.default)(componentPadding, "mr-1") }),
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex gap-desktop-compact-component-padding", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                ) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: (0, import_clsx20.default)(componentPadding, "mr-1") }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex gap-desktop-compact-component-padding", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                     "button",
                     {
                       ref: (el) => {
@@ -4685,13 +4722,13 @@ function CalendarPane({
                       children: month.name
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                     Menu,
                     {
                       show: monthMenuOpen,
                       positionTo: monthMenuRef,
                       setShow: () => setMonthMenuOpen(false),
-                      children: months.map((x) => [x, getMonthDataWith(x + 1)]).map(([x, m]) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                      children: months.map((x) => [x, getMonthDataWith(x + 1)]).map(([x, m]) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                         MenuOption,
                         {
                           selected: baseMonth.month === x + 1,
@@ -4705,7 +4742,7 @@ function CalendarPane({
                       ))
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                     "button",
                     {
                       ref: (el) => {
@@ -4720,13 +4757,13 @@ function CalendarPane({
                       children: month.year
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                     Menu,
                     {
                       show: yearMenuOpen,
                       positionTo: yearMenuRef,
                       setShow: () => setYearMenuOpen(false),
-                      children: years.map((y) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                      children: years.map((y) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                         MenuOption,
                         {
                           selected: baseMonth.year === y,
@@ -4741,7 +4778,7 @@ function CalendarPane({
                     }
                   )
                 ] }),
-                (mode === "double" ? idx === 1 : true) ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                (mode === "double" ? idx === 1 : true) ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                   "button",
                   {
                     id: id ? `${id}-next-month-button` : void 0,
@@ -4753,13 +4790,13 @@ function CalendarPane({
                     ),
                     "aria-label": "Next month",
                     onClick: () => setBaseMonth(baseMonth.add({ months: 1 })),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, { name: "chevron_right", size: 24 })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, { name: "chevron_right", size: 24 })
                   }
-                ) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: (0, import_clsx20.default)(componentPadding, "ml-1") })
+                ) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: (0, import_clsx20.default)(componentPadding, "ml-1") })
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: (0, import_clsx20.default)("grid grid-cols-7"), children: weekDays.map((d) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: (0, import_clsx20.default)("grid grid-cols-7"), children: weekDays.map((d) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             "span",
             {
               className: (0, import_clsx20.default)(
@@ -4771,7 +4808,7 @@ function CalendarPane({
             },
             d
           )) }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: (0, import_clsx20.default)("grid grid-cols-7"), children: Array.from({ length: totalCells }).map((_, i) => {
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: (0, import_clsx20.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
@@ -4785,7 +4822,7 @@ function CalendarPane({
             const hoverDateIsAfterPendingFrom = hoveredDate && pendingFrom && import_polyfill.Temporal.PlainDate.compare(hoveredDate, pendingFrom) >= 0;
             const isRangeStart = mode === "single" && disableRange ? false : !pendingFrom && isInMonth && fromDate && date.equals(fromDate) || hoverDateIsAfterPendingFrom && date.equals(pendingFrom);
             const isRangeEnd = mode === "single" && disableRange ? false : !pendingFrom && isInMonth && toDate && date.equals(toDate) || hoverDateIsBeforePendingFrom && date.equals(pendingFrom);
-            return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
               DateCell,
               {
                 id: id ? `${id}-date-${date.toString()}` : void 0,
@@ -4810,7 +4847,7 @@ function CalendarPane({
         ]
       }
     ),
-    mode === "double" && idx === 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    mode === "double" && idx === 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       "div",
       {
         className: (0, import_clsx20.default)(
@@ -4824,7 +4861,7 @@ function CalendarPane({
 }
 
 // src/components/DateInput.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var DateInput = (_a) => {
   var _b = _a, {
     id,
@@ -4985,8 +5022,8 @@ var DateInput = (_a) => {
       }
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "relative", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       InputBase,
       __spreadProps(__spreadValues({
         id,
@@ -5000,7 +5037,7 @@ var DateInput = (_a) => {
         placeholder,
         disabled,
         readOnly,
-        after: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, { name: "calendar_month" }),
+        after: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, { name: "calendar_month" }),
         onFocus: handleFocus,
         onClick: handleClick,
         onChange: handleInputChange,
@@ -5011,7 +5048,7 @@ var DateInput = (_a) => {
       })
     ),
     visible && !readOnly && (0, import_react_dom3.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
         "div",
         {
           ref: (el) => {
@@ -5023,7 +5060,7 @@ var DateInput = (_a) => {
             left: `${calendarPosition.left}px`,
             minWidth: `${calendarPosition.width}px`
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             CalendarRange,
             {
               id: id ? `${id}-calendar` : void 0,
@@ -5059,7 +5096,7 @@ var import_clsx23 = __toESM(require("clsx"), 1);
 
 // src/components/Card.tsx
 var import_clsx21 = __toESM(require("clsx"), 1);
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function Card(props) {
   const _a = props, {
     children,
@@ -5098,7 +5135,7 @@ 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_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     CardComponent,
     __spreadProps(__spreadValues({}, rest), {
       "data-testid": testid,
@@ -5115,7 +5152,7 @@ function Card(props) {
 
 // src/components/Stack.tsx
 var import_clsx22 = __toESM(require("clsx"), 1);
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var getFlexClassNames = ({ items, justify, grow }) => (0, import_clsx22.default)(
   "flex",
   items === "start" && "items-start",
@@ -5188,7 +5225,8 @@ var Stack = (_a) => {
     bottom,
     zIndex,
     flexWrap,
-    className
+    className,
+    unclipEdges
   } = _b, props = __objRest(_b, [
     "children",
     "items",
@@ -5237,12 +5275,13 @@ var Stack = (_a) => {
     "bottom",
     "zIndex",
     "flexWrap",
-    "className"
+    "className",
+    "unclipEdges"
   ]);
   var _a2, _b2, _c, _d, _e, _f, _g;
   const flexClassNames = getFlexClassNames({ items, justify, grow });
   const gapClassNames = useGapClassNames(sizing);
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     "div",
     __spreadProps(__spreadValues({
       id,
@@ -5329,6 +5368,7 @@ var Stack = (_a) => {
         elevation === 4 && "shadow-4",
         elevation === 16 && "shadow-16",
         rounded && "rounded",
+        unclipEdges && "-m-0.75 p-1",
         className
       ),
       children
@@ -5337,7 +5377,7 @@ var Stack = (_a) => {
 };
 
 // src/components/Accordion.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function Accordion(props) {
   const {
     isOpen,
@@ -5350,7 +5390,7 @@ function Accordion(props) {
   const {
     title,
     before,
-    after = /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    after = /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       Icon,
       {
         name: "expand_more",
@@ -5367,7 +5407,7 @@ function Accordion(props) {
     e.preventDefault();
     onClick == null ? void 0 : onClick();
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
     Card,
     {
       className: (0, import_clsx23.default)(
@@ -5379,7 +5419,7 @@ function Accordion(props) {
       onClick: handleClick,
       testid,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
           Stack,
           {
             sizing: "component",
@@ -5388,9 +5428,9 @@ function Accordion(props) {
             justify: "between",
             items: "center",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Stack, { sizing: "layout-group", horizontal: true, items: titleAlign, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Stack, { sizing: "layout-group", horizontal: true, items: titleAlign, children: [
                 before,
-                typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                   Paragraph,
                   {
                     testid: testid ? `${testid}-title` : void 0,
@@ -5403,7 +5443,7 @@ function Accordion(props) {
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           "div",
           {
             className: (0, import_clsx23.default)("grid transition-all duration-300 ease-in-out"),
@@ -5411,7 +5451,7 @@ function Accordion(props) {
               gridTemplateRows: isOpen ? "1fr" : "0fr"
             },
             "data-testid": testid ? `${testid}-content-container` : void 0,
-            children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
               "div",
               {
                 className: (0, import_clsx23.default)(
@@ -5432,7 +5472,7 @@ function Accordion(props) {
 
 // src/components/Heading.tsx
 var import_clsx24 = __toESM(require("clsx"), 1);
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var Heading = (_a) => {
   var _b = _a, {
     className,
@@ -5455,7 +5495,7 @@ var Heading = (_a) => {
   ]);
   const defaultElement = variant === "heading1" ? "h1" : variant === "heading2" ? "h2" : "h3";
   const Element = as != null ? as : defaultElement;
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     Element,
     __spreadProps(__spreadValues({
       id,
@@ -5476,15 +5516,15 @@ var Heading = (_a) => {
   );
 };
 Heading.displayName = "Heading";
-var Heading1 = (props) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Heading, __spreadProps(__spreadValues({}, props), { variant: "heading1" }));
-var Heading2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Heading, __spreadProps(__spreadValues({}, props), { variant: "heading2" }));
-var Heading3 = (props) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Heading, __spreadProps(__spreadValues({}, props), { variant: "heading3" }));
+var Heading1 = (props) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Heading, __spreadProps(__spreadValues({}, props), { variant: "heading1" }));
+var Heading2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Heading, __spreadProps(__spreadValues({}, props), { variant: "heading2" }));
+var Heading3 = (props) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Heading, __spreadProps(__spreadValues({}, props), { variant: "heading3" }));
 Heading1.displayName = "Heading1";
 Heading2.displayName = "Heading2";
 Heading3.displayName = "Heading3";
 
 // src/components/Theme.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function Theme({
   theme,
   children,
@@ -5492,7 +5532,7 @@ function Theme({
   testid,
   ref
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "div",
     {
       id,
@@ -5527,7 +5567,7 @@ function useGridContext() {
 }
 
 // src/components/MobileDataGrid/ColumnSelector/index.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function ColumnSelector() {
   const context = useGridContext();
   const ref = (0, import_react23.useRef)(null);
@@ -5548,7 +5588,7 @@ function ColumnSelector() {
     },
     [dispatch]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     "div",
     {
       id: id ? `${id}-column-selector` : void 0,
@@ -5556,7 +5596,7 @@ function ColumnSelector() {
       className: "text-text-secondary-normal border-l border-brand-200 p-mobile-container-padding",
       ref,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           Button,
           {
             id: id ? `${id}-button` : void 0,
@@ -5565,10 +5605,10 @@ function ColumnSelector() {
             variant: "navigation",
             iconOnly: true,
             size: 24,
-            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { name: "tune" })
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon, { name: "tune" })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
           Menu,
           {
             id: id ? `${id}-menu` : void 0,
@@ -5579,7 +5619,7 @@ function ColumnSelector() {
             setShow,
             calculateMinMaxHeight: true,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                 Button,
                 {
                   id: id ? `${id}-reset-button` : void 0,
@@ -5597,11 +5637,11 @@ function ColumnSelector() {
                 return (_a = x.meta) == null ? void 0 : _a.inVisibilityMenu;
               }).map((column) => {
                 var _a, _b, _c;
-                return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                   MenuOption,
                   {
                     testid: testid ? `${testid}-option-${column.id}` : void 0,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                       Checkbox,
                       {
                         id: id ? `${id}-checkbox-${column.id}` : void 0,
@@ -5631,7 +5671,7 @@ function ColumnSelector() {
 }
 
 // src/components/MobileDataGrid/MobileDataGridHeader.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function MobileDataGridHeader({
   header: Header,
   enableColumnSelector,
@@ -5649,15 +5689,15 @@ function MobileDataGridHeader({
     handleRowSelectAll
   } = ctx;
   if (typeof Header === "undefined" && !primaryKey) return null;
-  if (typeof Header === "function") return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Header, __spreadValues({}, ctx));
+  if (typeof Header === "function") return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Header, __spreadValues({}, ctx));
   if (typeof Header === "string" || primaryKey)
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "div",
       {
         id: id ? `${id}-header` : void 0,
         "data-testid": testid ? `${testid}-header` : void 0,
         className: "sticky top-0",
-        children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Theme, { theme: "brand", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Theme, { theme: "brand", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
           Stack,
           {
             horizontal: true,
@@ -5667,7 +5707,7 @@ function MobileDataGridHeader({
             backgroundColor: "background-primary-normal",
             style: { borderTopRightRadius: 4, borderTopLeftRadius: 4 },
             children: [
-              enableRowSelection && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "p-mobile-component-padding border-r border-brand-200 max-w-fit h-full", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+              enableRowSelection && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "p-mobile-component-padding border-r border-brand-200 max-w-fit h-full", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                 Checkbox,
                 {
                   id: id ? `${id}-select-all-checkbox` : void 0,
@@ -5677,7 +5717,7 @@ function MobileDataGridHeader({
                   onChange: handleRowSelectAll
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                 Stack,
                 {
                   horizontal: true,
@@ -5685,10 +5725,10 @@ function MobileDataGridHeader({
                   items: "center",
                   sizing: "component",
                   padding: true,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime31.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_runtime32.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_runtime31.jsx)(ColumnSelector, {})
+              enableColumnSelector && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ColumnSelector, {})
             ]
           }
         ) })
@@ -5727,7 +5767,7 @@ function dataGridReducer(state, action) {
 }
 
 // src/components/MobileDataGrid/GridContextProvider/index.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function GridContextProvider(props) {
   const {
     initialColumns,
@@ -5798,7 +5838,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_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     GridContext.Provider,
     {
       value: {
@@ -5831,7 +5871,7 @@ var import_react26 = require("react");
 
 // src/components/ModalHeader.tsx
 var import_clsx25 = __toESM(require("clsx"), 1);
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var ModalHeader = ({
   title,
   hideCloseIcon,
@@ -5844,7 +5884,7 @@ var ModalHeader = ({
   titleAs: TitleComponent
 }) => {
   const Title = TitleComponent || Heading2;
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
     "div",
     {
       id,
@@ -5859,9 +5899,9 @@ var ModalHeader = ({
         headerClassname
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: (0, import_clsx25.default)("flex items-center flex-1", layoutGroupGap), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: (0, import_clsx25.default)("flex items-center flex-1", layoutGroupGap), children: [
           headerIcon,
-          title && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          title && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             Title,
             {
               id: id ? `${id}-title` : void 0,
@@ -5871,7 +5911,7 @@ var ModalHeader = ({
             }
           )
         ] }),
-        !hideCloseIcon && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        !hideCloseIcon && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           Button,
           {
             id: id ? `${id}-close-button` : void 0,
@@ -5879,7 +5919,7 @@ var ModalHeader = ({
             iconOnly: true,
             variant: "tertiary",
             onClick: onClose,
-            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-brand-text-action-primary-normal desktop:text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icon, { name: "close", size: 24 }) })
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-brand-text-action-primary-normal desktop:text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon, { name: "close", size: 24 }) })
           }
         )
       ]
@@ -5890,14 +5930,14 @@ ModalHeader.displayName = "ModalHeader";
 
 // src/components/ModalContent.tsx
 var import_clsx26 = __toESM(require("clsx"), 1);
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function ModalContent({
   fixedHeightScrolling,
   children,
   id,
   testid
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     "div",
     {
       id,
@@ -5915,7 +5955,7 @@ ModalContent.displayName = "ModalContent";
 
 // src/components/ModalButtons.tsx
 var import_clsx27 = __toESM(require("clsx"), 1);
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var ModalButtons = ({
   onClose,
   onContinue,
@@ -5923,7 +5963,7 @@ var ModalButtons = ({
   id,
   testid
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     "div",
     {
       id,
@@ -5933,26 +5973,26 @@ var ModalButtons = ({
         layoutPaddding,
         layoutGroupGap
       ),
-      children: customActions != null ? customActions : /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      children: customActions != null ? customActions : /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           Button,
           {
             id: id ? `${id}-close-button` : void 0,
             testid: testid ? `${testid}-close-button` : void 0,
             variant: "secondary",
-            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Icon, { name: "close", size: 24 }),
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Icon, { name: "close", size: 24 }),
             onClick: onClose,
             className: "max-sm:w-full",
             children: "Close"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           Button,
           {
             id: id ? `${id}-continue-button` : void 0,
             testid: testid ? `${testid}-continue-button` : void 0,
             variant: "primary",
-            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Icon, { name: "check", size: 24 }),
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Icon, { name: "check", size: 24 }),
             className: "max-sm:w-full",
             onClick: onContinue,
             children: "Continue"
@@ -5966,7 +6006,7 @@ ModalButtons.displayName = "ModalButtons";
 
 // src/components/ModalScrim.tsx
 var import_clsx28 = __toESM(require("clsx"), 1);
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var ModalScrim = ({
   show = false,
   size = "small",
@@ -5976,7 +6016,7 @@ var ModalScrim = ({
   id,
   testid
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     "div",
     {
       id,
@@ -6012,7 +6052,7 @@ var useMounted = () => {
 };
 
 // src/components/Modal.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var fadeInScale = (element, duration = 300) => element.animate(
   [
     { opacity: 0, transform: "scale(0.95)" },
@@ -6185,7 +6225,7 @@ var Modal = ({
     return null;
   }
   return (0, import_react_dom4.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       ModalScrim,
       {
         id: id ? `${id}-scrim` : void 0,
@@ -6194,7 +6234,7 @@ var Modal = ({
         ref: bgRef,
         show: open,
         onClick: backgroundClickHandler,
-        children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
           "div",
           {
             id,
@@ -6209,7 +6249,7 @@ var Modal = ({
             ),
             onClick: (e) => e.stopPropagation(),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                 ModalHeader,
                 {
                   id: id ? `${id}-header` : void 0,
@@ -6223,7 +6263,7 @@ var Modal = ({
                   titleAs: TitleComponent
                 }
               ),
-              children && (size !== "screen" || noWrapper) ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+              children && (size !== "screen" || noWrapper) ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                 ModalContent,
                 {
                   id: id ? `${id}-content` : void 0,
@@ -6232,7 +6272,7 @@ var Modal = ({
                   children
                 }
               ) : children,
-              showButtons ? customFooter ? customActions : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+              showButtons ? customFooter ? customActions : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                 ModalButtons,
                 {
                   id: id ? `${id}-buttons` : void 0,
@@ -6253,7 +6293,7 @@ var Modal = ({
 Modal.displayName = "Modal";
 
 // src/components/MobileDataGrid/MobileDataGridCard/MobileDataGridColumn.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function MobileDataGridColumn(props) {
   var _a, _b;
   const { column, data } = props;
@@ -6264,8 +6304,8 @@ function MobileDataGridColumn(props) {
       value = formatDate(value);
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "grid grid-cols-2 gap-2 flex-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Paragraph, { color: "text-secondary-normal", className: "text-left", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "grid grid-cols-2 gap-2 flex-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Paragraph, { color: "text-secondary-normal", className: "text-left", children: [
       (_b = column.header) == null ? void 0 : _b.toString(),
       ":"
     ] }),
@@ -6275,28 +6315,28 @@ function MobileDataGridColumn(props) {
 }
 
 // src/components/MobileDataGrid/RowDetailModalProvider/ModalContent.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function ModalContent2() {
   const context = useGridContext();
   const { columns, currentRow } = context;
   if (!currentRow) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Stack, { sizing: "layout-group", children: columns.filter((x) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime40.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_runtime39.jsxs)(
+      return ((_a = column.meta) == null ? void 0 : _a.useCustomRenderer) && column.meta.mobileCell && column.id ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
         "div",
         {
           className: "grid grid-cols-2 gap-2 items-center flex-1",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Paragraph, { color: "text-secondary-normal", className: "text-left", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(Paragraph, { color: "text-secondary-normal", className: "text-left", children: [
               (_b = column.header) == null ? void 0 : _b.toString(),
               ":"
             ] }),
             " ",
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
               column.meta.mobileCell,
               {
                 column,
@@ -6307,7 +6347,7 @@ function ModalContent2() {
           ]
         },
         `${column.id}-${index}`
-      ) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
         MobileDataGridColumn,
         {
           column,
@@ -6320,7 +6360,7 @@ function ModalContent2() {
 }
 
 // src/components/MobileDataGrid/RowDetailModalProvider/index.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 function RowDetailModalProvider() {
   var _a;
   const context = useGridContext();
@@ -6332,7 +6372,7 @@ function RowDetailModalProvider() {
     primaryKey,
     closeRowDetail
   } = context;
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     Modal,
     {
       fixedHeightScrolling: true,
@@ -6341,7 +6381,7 @@ function RowDetailModalProvider() {
       hideCloseIcon: true,
       size: "medium",
       className: "!p-0",
-      headerIcon: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+      headerIcon: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
         Stack,
         {
           horizontal: true,
@@ -6350,8 +6390,8 @@ function RowDetailModalProvider() {
           justify: "between",
           width: "full",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Heading2, { children: (_a = currentRow == null ? void 0 : currentRow[primaryKey != null ? primaryKey : "id"]) != null ? _a : "Grid Detail" }),
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Heading2, { children: (_a = currentRow == null ? void 0 : currentRow[primaryKey != null ? primaryKey : "id"]) != null ? _a : "Grid Detail" }),
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
               Button,
               {
                 id: id ? `${id}-open-in-new-button` : void 0,
@@ -6359,15 +6399,15 @@ function RowDetailModalProvider() {
                 iconOnly: true,
                 variant: "tertiary",
                 onClick: closeRowDetail,
-                leftIcon: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Icon, { name: "open_in_new", size: 24 }) })
+                leftIcon: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon, { name: "open_in_new", size: 24 }) })
               }
             )
           ]
         }
       ),
-      customActions: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Button, { onClick: closeRowDetail, className: "w-full", children: "Close" }),
+      customActions: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Button, { onClick: closeRowDetail, className: "w-full", children: "Close" }),
       showButtons: true,
-      children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "bg-white max-h-full flex flex-col flex-grow-1", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ModalContent2, {}) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "bg-white max-h-full flex flex-col flex-grow-1", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ModalContent2, {}) })
     }
   );
 }
@@ -6377,7 +6417,7 @@ var import_clsx31 = __toESM(require("clsx"), 1);
 
 // src/components/MobileDataGrid/MobileDataGridCard/index.tsx
 var import_clsx30 = __toESM(require("clsx"), 1);
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 function MobileDataGridCard({
   renderLink,
   renderChevron = true,
@@ -6389,7 +6429,7 @@ function MobileDataGridCard({
   var _a;
   const context = useGridContext();
   const { id, testid, visibleColumns, getId, handleRowSelect, openRowDetail } = context;
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
     "li",
     {
       id: id ? `${id}-card-${getId(data)}` : void 0,
@@ -6404,9 +6444,9 @@ function MobileDataGridCard({
       ),
       onClick: () => openRowDetail(data),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Stack, { sizing: "component", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Stack, { horizontal: true, horizontalMobile: true, items: "center", justify: "between", children: [
-            enableRowSelection && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Stack, { sizing: "component", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Stack, { horizontal: true, horizontalMobile: true, items: "center", justify: "between", children: [
+            enableRowSelection && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
               Stack,
               {
                 sizing: "component",
@@ -6414,7 +6454,7 @@ function MobileDataGridCard({
                 width: "fit",
                 style: { paddingLeft: 0, paddingRight: 8 },
                 onClick: (e) => e.stopPropagation(),
-                children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                   Checkbox,
                   {
                     id: id ? `${id}-${getId(data)}-select-checkbox` : void 0,
@@ -6425,17 +6465,17 @@ function MobileDataGridCard({
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
               Stack,
               {
                 sizing: "component",
                 padding: true,
                 onClick: (e) => e.stopPropagation(),
                 style: { paddingInline: 0 },
-                children: renderLink ? renderLink(data) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Subheader, { children: String((_a = data[context.primaryKey]) != null ? _a : "") })
+                children: renderLink ? renderLink(data) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Subheader, { children: String((_a = data[context.primaryKey]) != null ? _a : "") })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
               Stack,
               {
                 horizontal: true,
@@ -6448,18 +6488,18 @@ function MobileDataGridCard({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Stack, { sizing: "layout-group", children: visibleColumns.filter((x) => {
+          /* @__PURE__ */ (0, import_jsx_runtime42.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_runtime41.jsxs)(
+              return ((_a2 = column.meta) == null ? void 0 : _a2.useCustomRenderer) && column.meta.mobileCell && column.id ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
                 "div",
                 {
                   className: "grid grid-cols-2 gap-2 items-center flex-1",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
                       Paragraph,
                       {
                         color: "text-secondary-normal",
@@ -6471,7 +6511,7 @@ function MobileDataGridCard({
                       }
                     ),
                     " ",
-                    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                       column.meta.mobileCell,
                       {
                         column,
@@ -6482,7 +6522,7 @@ function MobileDataGridCard({
                   ]
                 },
                 `${column.id}-${index}`
-              ) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              ) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                 MobileDataGridColumn,
                 {
                   column,
@@ -6493,14 +6533,14 @@ function MobileDataGridCard({
             }
           ) })
         ] }),
-        renderChevron && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Stack, { items: "center", justify: "center", horizontal: true, horizontalMobile: true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "text-icon-primary-normal", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon, { name: "keyboard_arrow_down" }) }) })
+        renderChevron && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Stack, { items: "center", justify: "center", horizontal: true, horizontalMobile: true, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "text-icon-primary-normal", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Icon, { name: "keyboard_arrow_down" }) }) })
       ]
     }
   );
 }
 
 // src/components/MobileDataGrid/ColumnList.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 function ColumnList(props) {
   const {
     withBorder,
@@ -6512,14 +6552,14 @@ function ColumnList(props) {
   } = props;
   const ctx = useGridContext();
   const { id, testid, data, getId, selectedRowIds } = ctx;
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     "div",
     {
       className: (0, import_clsx31.default)(
         "flex flex-col flex-1 relative overflow-y-auto overflow-x-hidden",
         !!Footer && "mb-20"
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
         "ul",
         {
           id,
@@ -6532,7 +6572,7 @@ function ColumnList(props) {
           children: [
             data.map((item) => {
               const id2 = getId(item);
-              return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                 MobileDataGridCard,
                 {
                   data: item,
@@ -6545,7 +6585,7 @@ function ColumnList(props) {
                 id2
               );
             }),
-            !!Footer && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "fixed left-0 right-0 bottom-0 flex flex-col w-full min-h-20", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Footer, __spreadValues({}, ctx)) })
+            !!Footer && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "fixed left-0 right-0 bottom-0 flex flex-col w-full min-h-20", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Footer, __spreadValues({}, ctx)) })
           ]
         }
       )
@@ -6554,7 +6594,7 @@ function ColumnList(props) {
 }
 
 // src/components/MobileDataGrid/index.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 function MobileDataGrid(props) {
   const {
     columns,
@@ -6576,7 +6616,7 @@ function MobileDataGrid(props) {
     rowActions,
     rounded
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
     GridContextProvider,
     {
       initialColumns: columns,
@@ -6588,7 +6628,7 @@ function MobileDataGrid(props) {
       numberOfColumnsToShow,
       primaryKey,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
           Stack,
           {
             height: "full",
@@ -6596,7 +6636,7 @@ function MobileDataGrid(props) {
             overflowX: "hidden",
             overflowY: "hidden",
             children: [
-              !hideHeader && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+              !hideHeader && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
                 MobileDataGridHeader,
                 {
                   header,
@@ -6604,7 +6644,7 @@ function MobileDataGrid(props) {
                   enableRowSelection
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
                 ColumnList,
                 {
                   withBorder,
@@ -6618,7 +6658,7 @@ function MobileDataGrid(props) {
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(RowDetailModalProvider, {})
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(RowDetailModalProvider, {})
       ]
     }
   );
@@ -6629,10 +6669,10 @@ var import_react28 = require("react");
 
 // src/components/ImagePlaceholder.tsx
 var import_react27 = require("react");
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 function ImagePlaceholder(props) {
   const clipId = (0, import_react27.useId)();
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
     "svg",
     __spreadProps(__spreadValues({
       xmlns: "http://www.w3.org/2000/svg",
@@ -6641,15 +6681,15 @@ function ImagePlaceholder(props) {
       fill: "none"
     }, props), {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("g", { clipPath: `url(#${clipId})`, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("rect", { width: props.width, height: props.width, fill: "#F7F7F7", rx: 2 }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("clipPath", { id: clipId, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("rect", { width: props.width, height: props.width, fill: "#fff", rx: 2 }) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("g", { clipPath: `url(#${clipId})`, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("rect", { width: props.width, height: props.width, fill: "#F7F7F7", rx: 2 }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("clipPath", { id: clipId, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("rect", { width: props.width, height: props.width, fill: "#fff", rx: 2 }) }) })
       ]
     })
   );
 }
 
 // src/components/ProductImagePreview/Thumbnail.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 function Thumbnail({
   width,
   height,
@@ -6660,7 +6700,7 @@ function Thumbnail({
   isPlaceholder = false
 }) {
   const [imageError, setImageError] = (0, import_react28.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     "button",
     {
       type: "button",
@@ -6673,7 +6713,7 @@ function Thumbnail({
       ].join(" "),
       style: { maxWidth: width, maxHeight: height, aspectRatio: "1 / 1" },
       "aria-pressed": isActive && !isPlaceholder ? "true" : "false",
-      children: isPlaceholder ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ImagePlaceholder, { width: 115, height: 115 }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      children: isPlaceholder ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ImagePlaceholder, { width: 115, height: 115 }) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
         "img",
         {
           src: imageError ? "/placeholder.svg" : src,
@@ -6692,7 +6732,7 @@ function Thumbnail({
 
 // src/components/Grid.tsx
 var import_clsx32 = __toESM(require("clsx"), 1);
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime47 = 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",
@@ -6740,7 +6780,7 @@ var Grid = (_a) => {
   ]);
   var _a2, _b2;
   const columnClasses = buildColumnClasses(columns, responsive);
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
     "div",
     __spreadProps(__spreadValues({
       id,
@@ -6761,7 +6801,7 @@ var Grid = (_a) => {
 
 // src/components/ProductImagePreview/ProductPrimaryImage.tsx
 var import_react29 = require("react");
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var placeholderImageUri = "/placeholder.svg";
 function ProductPrimaryImage({
   image,
@@ -6881,7 +6921,7 @@ function ProductPrimaryImage({
       top: Math.max(0, Math.min(height - size, topRaw))
     };
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
     "div",
     {
       ref: containerRef,
@@ -6901,7 +6941,7 @@ function ProductPrimaryImage({
       onPointerLeave: handlePointerLeave,
       onPointerMove: handlePointerMove,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
           "img",
           {
             src: imageSrc != null ? imageSrc : placeholderImageUri,
@@ -6913,7 +6953,7 @@ function ProductPrimaryImage({
           },
           imageSrc
         ),
-        zoomEnabled && active && lensStyle && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        zoomEnabled && active && lensStyle && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
           "div",
           {
             "aria-hidden": true,
@@ -6931,7 +6971,7 @@ var import_react30 = require("react");
 
 // src/components/Surface.tsx
 var import_clsx33 = __toESM(require("clsx"), 1);
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var Surface = (_a) => {
   var _b = _a, {
     children,
@@ -6944,7 +6984,7 @@ var Surface = (_a) => {
     "elevation",
     "id"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     "div",
     __spreadProps(__spreadValues({
       id,
@@ -6965,7 +7005,7 @@ var Surface = (_a) => {
 Surface.displayName = "Surface";
 
 // src/components/ProductImagePreview/ZoomWindow.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 function ZoomWindow({
   image,
   width,
@@ -7023,7 +7063,7 @@ function ZoomWindow({
       top
     };
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     Surface,
     {
       elevation: 16,
@@ -7038,7 +7078,7 @@ function ZoomWindow({
         userSelect: "none"
       }, calculatePosition()),
       "aria-hidden": true,
-      children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
         "img",
         {
           src: imageSrc,
@@ -7060,7 +7100,7 @@ function ZoomWindow({
 
 // src/components/ProductImagePreview/CarouselPagination.tsx
 var import_clsx34 = require("clsx");
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 function CarouselPagination({
   images,
   currentIndex,
@@ -7068,7 +7108,7 @@ function CarouselPagination({
   className
 }) {
   if (!(images == null ? void 0 : images.length)) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     "div",
     {
       className: (0, import_clsx34.clsx)(
@@ -7076,7 +7116,7 @@ function CarouselPagination({
         className
       ),
       "aria-label": "Image navigation",
-      children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
         "div",
         {
           className: "grid gap-2 place-items-center",
@@ -7084,7 +7124,7 @@ function CarouselPagination({
             gridTemplateColumns: `repeat(${Math.min(images.length, 8)}, 1fr)`
           },
           role: "tablist",
-          children: images.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+          children: images.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
             "button",
             {
               type: "button",
@@ -7108,7 +7148,7 @@ function CarouselPagination({
 
 // src/components/ProductImagePreview/MobileImageCarousel.tsx
 var import_react31 = require("react");
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 function MobileImageCarousel({
   images,
   currentIndex,
@@ -7223,7 +7263,7 @@ function MobileImageCarousel({
     [isDragging, currentIndex, onChangeIndex]
   );
   if (!images.length) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: `md:hidden w-full ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: `md:hidden w-full ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
     "div",
     {
       ref: containerRef,
@@ -7238,7 +7278,7 @@ function MobileImageCarousel({
       onTouchStart: handleTouchStart,
       onTouchMove: handleTouchMove,
       onTouchEnd: handleTouchEnd,
-      children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
         "div",
         {
           className: "flex items-center",
@@ -7251,7 +7291,7 @@ function MobileImageCarousel({
             const isActive = index === currentIndex;
             const distance = Math.abs(index - currentIndex);
             const shouldRender = distance <= 2;
-            return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
               "div",
               {
                 className: "flex-shrink-0 transition-opacity duration-300",
@@ -7261,7 +7301,7 @@ function MobileImageCarousel({
                   opacity: isActive ? 1 : Math.max(0.3, 1 - distance * 0.3)
                 },
                 onClick: () => handleImageClick(index),
-                children: shouldRender ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                children: shouldRender ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
                   "img",
                   {
                     src: image.src,
@@ -7273,7 +7313,7 @@ function MobileImageCarousel({
                       aspectRatio: "1 / 1"
                     }
                   }
-                ) : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                ) : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
                   "div",
                   {
                     className: "w-full h-full bg-neutral-100 rounded-md border border-gray-200",
@@ -7409,7 +7449,7 @@ function useProductImagePreview(props) {
 }
 
 // src/components/ProductImagePreview/index.tsx
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var PLACEHOLDER_IMAGES = [
   { src: "", alt: "placeholder" },
   { src: "", alt: "placeholder" }
@@ -7452,9 +7492,9 @@ function ProductImagePreview(props) {
   });
   if (typeof isMobile === "undefined") return null;
   const effectiveZoomEnabled = zoomEnabled && !isMobile;
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(Stack, { sizing: "layout", style: { width, position: "relative" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex gap-4 items-start", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { ref: primaryImageRef, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Stack, { sizing: "layout", style: { width, position: "relative" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex gap-4 items-start", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { ref: primaryImageRef, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
         ProductPrimaryImage,
         {
           image: active,
@@ -7468,7 +7508,7 @@ function ProductImagePreview(props) {
           isPlaceholder: images.length === 0
         }
       ) }),
-      effectiveZoomEnabled && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+      effectiveZoomEnabled && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
         ZoomWindow,
         {
           image: active,
@@ -7483,7 +7523,7 @@ function ProductImagePreview(props) {
         }
       )
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       MobileImageCarousel,
       {
         images,
@@ -7493,14 +7533,14 @@ function ProductImagePreview(props) {
         onChangeIndex: handleSelect
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "hidden md:block", children: images.length <= 3 ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "hidden md:block", children: images.length <= 3 ? /* @__PURE__ */ (0, import_jsx_runtime53.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_runtime52.jsx)("div", { style: { maxWidth: "115px" }, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+          (img, i) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { style: { maxWidth: "115px" }, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
             Thumbnail,
             {
               src: img.src,
@@ -7512,7 +7552,7 @@ function ProductImagePreview(props) {
           ) }, img.src + i)
         )
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       Grid,
       {
         sizing: "layout-group",
@@ -7523,7 +7563,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_runtime52.jsx)(
+          (img, i) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
             Thumbnail,
             {
               src: img.src,
@@ -7537,7 +7577,7 @@ function ProductImagePreview(props) {
         )
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       CarouselPagination,
       {
         images,
@@ -7551,7 +7591,7 @@ function ProductImagePreview(props) {
 // src/components/CompactImagesPreview.tsx
 var import_react33 = require("react");
 var import_clsx35 = __toESM(require("clsx"), 1);
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 function CompactImagesPreview(props) {
   const {
     sources,
@@ -7588,7 +7628,7 @@ function CompactImagesPreview(props) {
     [currentSourceIndex, onChangeSource, imagesCount]
   );
   if (!sources.length || currentSourceIndex >= sources.length || typeof isMobile === "undefined")
-    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
       "img",
       {
         "data-testid": testid ? `${testid}-placeholder` : void 0,
@@ -7606,8 +7646,8 @@ function CompactImagesPreview(props) {
       }
     );
   const currentSource = sources[currentSourceIndex];
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Stack, { "data-testid": testid, sizing: "layout", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Stack, { "data-testid": testid, sizing: "layout", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
       "img",
       {
         "data-testid": testid ? `${testid}-main-image` : void 0,
@@ -7624,7 +7664,7 @@ function CompactImagesPreview(props) {
         onClick: onMainImageClick
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "flex flex-row flex-wrap items-center gap-3", children: sources.slice(0, 4).map((source, index) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "flex flex-row flex-wrap items-center gap-3", children: sources.slice(0, 4).map((source, index) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
       "button",
       {
         "data-testid": testid ? `${testid}-thumbnail-${index}` : void 0,
@@ -7636,7 +7676,7 @@ function CompactImagesPreview(props) {
           "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_runtime53.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
           "img",
           {
             src: source.uri,
@@ -7658,17 +7698,17 @@ function CompactImagesPreview(props) {
 
 // src/components/SimpleTable.tsx
 var import_clsx36 = __toESM(require("clsx"), 1);
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 function SimpleTable({
   columns,
   data,
   additionalRows
 }) {
   const allRows = additionalRows && additionalRows.length > 0 ? [...data, ...additionalRows] : data;
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Stack, { elevation: 4, rounded: true, overflowX: "hidden", overflowY: "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("table", { className: "w-full border-collapse text-left text-sm border overflow-hidden rounded border-border-primary-normal", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("tr", { className: "bg-background-primary-normal divide-x divide-border-primary-normal", children: columns.map((column, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Stack, { elevation: 4, rounded: true, overflowX: "hidden", overflowY: "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("table", { className: "w-full border-collapse text-left text-sm border overflow-hidden rounded border-border-primary-normal", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime55.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_runtime54.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
         "th",
         {
           scope: "col",
@@ -7676,12 +7716,12 @@ function SimpleTable({
             "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_runtime54.jsx)(Subheader, { children: (_b = column.header) == null ? void 0 : _b.toString() })
+          children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Subheader, { children: (_b = column.header) == null ? void 0 : _b.toString() })
         },
         index
       );
     }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("tbody", { children: allRows.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("tbody", { children: allRows.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
       "tr",
       {
         className: "border-t border-border-primary-normal divide-x divide-border-primary-normal",
@@ -7689,7 +7729,7 @@ function SimpleTable({
           var _a;
           const rawValue = column.id ? row[column.id] : null;
           const cellValue = rawValue != null ? rawValue : null;
-          return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
             "td",
             {
               className: (0, import_clsx36.default)(
@@ -7710,7 +7750,7 @@ function SimpleTable({
 // src/components/ListGroup.tsx
 var import_react34 = require("react");
 var import_clsx37 = __toESM(require("clsx"), 1);
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 function ListGroup({
   title,
   defaultOpen = false,
@@ -7730,8 +7770,8 @@ function ListGroup({
     if (!isControlled) setUncontrolledOpen(next);
     onToggle == null ? void 0 : onToggle(next);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { "data-testid": testid, className: (0, import_clsx37.default)("rounded-sm", className), children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Stack, { sizing: "layout", noGap: true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+  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: [
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
       "button",
       {
         type: "button",
@@ -7742,8 +7782,8 @@ function ListGroup({
         ),
         "aria-expanded": isOpen,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Label, { children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Label, { children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
             Icon,
             {
               name: "expand_more",
@@ -7756,14 +7796,14 @@ function ListGroup({
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Stack, { sizing: "layout", paddingTop: true, children })
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Stack, { sizing: "layout", paddingTop: true, children })
   ] }) });
 }
 
 // src/components/Pagination.tsx
 var import_react35 = require("react");
 var import_clsx38 = __toESM(require("clsx"), 1);
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 var Pagination = ({
   totalPages,
   currentPage,
@@ -7838,7 +7878,7 @@ var Pagination = ({
     "focus:bg-background-grouped-secondary-normal focus:outline-0",
     "disabled:bg-transparent disabled:text-text-action-primary-disabled"
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
     "nav",
     {
       id,
@@ -7853,19 +7893,19 @@ var Pagination = ({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
           "button",
           {
             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"),
-            children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Icon, { name: "keyboard_arrow_left" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Icon, { name: "keyboard_arrow_left" })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime56.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_clsx38.default)("flex items-center"), children: pageTokens.map((token, index) => {
           if (token === "ellipsis") {
-            return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
               "li",
               {
                 className: "w-8 h-8 select-none text-text-action-primary-disabled",
@@ -7875,7 +7915,7 @@ var Pagination = ({
             );
           }
           const selected = token === currentPage;
-          return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
             "button",
             {
               "aria-label": `Page ${token}`,
@@ -7886,18 +7926,18 @@ var Pagination = ({
                 buttonClass,
                 selected && "border-x-1 bg-background-grouped-secondary-normal border-border-primary-normal"
               ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Subheader, { align: "center", weight: "bold", children: token })
+              children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Subheader, { align: "center", weight: "bold", children: token })
             }
           ) }, token);
         }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
           "button",
           {
             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"),
-            children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Icon, { name: "keyboard_arrow_right" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Icon, { name: "keyboard_arrow_right" })
           }
         )
       ]
@@ -7907,7 +7947,7 @@ var Pagination = ({
 Pagination.displayName = "Pagination";
 
 // src/components/SkeletonParagraph.tsx
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 function SkeletonParagraph({
   className = "",
   heightClassName = "h-6",
@@ -7918,7 +7958,7 @@ function SkeletonParagraph({
     medium: "min-w-20 w-1/2",
     large: "min-w-32 w-full"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
     "div",
     {
       "aria-label": "Loading content",
@@ -7929,9 +7969,9 @@ function SkeletonParagraph({
 }
 
 // src/components/EmptyCartIcon.tsx
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 function EmptyCartIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
     "svg",
     {
       width: "211",
@@ -7939,7 +7979,7 @@ function EmptyCartIcon() {
       viewBox: "0 0 211 196",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
         "path",
         {
           "fill-rule": "evenodd",
@@ -7954,7 +7994,7 @@ function EmptyCartIcon() {
 
 // src/components/SearchResultImage/index.tsx
 var import_react36 = require("react");
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 function SearchResultImage({
   width = 20,
   height = 20,
@@ -7963,7 +8003,7 @@ function SearchResultImage({
 }) {
   const [imageError, setImageError] = (0, import_react36.useState)(false);
   const showPlaceholder = imageError || !src;
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_jsx_runtime59.Fragment, { children: showPlaceholder ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ImagePlaceholder, { width, height }) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_jsx_runtime60.Fragment, { children: showPlaceholder ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ImagePlaceholder, { width, height }) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     "img",
     {
       src,
@@ -7980,7 +8020,7 @@ function SearchResultImage({
 // src/components/Alert.tsx
 var import_clsx39 = __toESM(require("clsx"), 1);
 var import_react37 = require("react");
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 function Alert(_a) {
   var _b = _a, {
     id,
@@ -8003,7 +8043,7 @@ function Alert(_a) {
   const handleClose = (0, import_react37.useCallback)(() => {
     if (onClose) onClose();
   }, [onClose]);
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
     Stack,
     __spreadProps(__spreadValues({
       id,
@@ -8019,7 +8059,7 @@ function Alert(_a) {
       horizontalMobile: true
     }, rest), {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
           "div",
           {
             className: (0, import_clsx39.default)("min-w-[2px] min-h-full flex", {
@@ -8028,27 +8068,27 @@ function Alert(_a) {
             })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
           "span",
           {
             className: (0, import_clsx39.default)({
               "text-icon-critical-normal": isError,
               "text-icon-warning-normal": !isError
             }),
-            children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Icon, { name: "warning" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Icon, { name: "warning" })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(Stack, { flexGrow: 1, sizing: "component", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Heading2, { children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Paragraph, { children: message })
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(Stack, { flexGrow: 1, sizing: "component", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Heading2, { children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Paragraph, { children: message })
         ] }),
-        dismissible && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+        dismissible && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
           Button,
           {
             "aria-label": "Dismiss alert",
             iconOnly: true,
             variant: "tertiary",
-            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Icon, { name: "close" }),
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Icon, { name: "close" }),
             onClick: handleClose
           }
         )
@@ -8058,9 +8098,9 @@ function Alert(_a) {
 }
 
 // src/components/OrderCheckIcon.tsx
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 function OrderCheckIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
     "svg",
     __spreadProps(__spreadValues({
       xmlns: "http://www.w3.org/2000/svg",
@@ -8069,7 +8109,7 @@ function OrderCheckIcon(props) {
       width: 37,
       height: 36
     }, props), {
-      children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
         "path",
         {
           d: "M18.457 3.00024C19.6493 3.01827 20.8644 3.13827 22.0283 3.41724C22.8321 3.61234 23.3287 4.42237 23.1337 5.22778C22.9402 6.03178 22.1252 6.5272 21.3242 6.33521C20.3928 6.11026 19.4046 6.01526 18.4658 6.00024C15.2603 6.00924 12.2492 7.26586 9.99018 9.53833C7.72976 11.8108 6.49103 14.829 6.49995 18.0344C6.50895 21.2399 7.7656 24.2495 10.038 26.51C12.303 28.7615 15.3065 30.0002 18.4999 30.0002H18.5341C21.7396 29.9912 24.7507 28.7346 27.0097 26.4622C29.2701 24.1882 30.5089 21.1714 30.4999 17.9661C30.4984 17.1382 31.1673 16.4629 31.9951 16.4612H31.9999C32.8263 16.4612 33.4982 17.13 33.4999 17.9563C33.5119 21.9627 31.9625 25.7354 29.1367 28.5764C26.3123 31.4173 22.5503 32.9881 18.5439 33.0002H18.4999C14.5086 33.0002 10.7542 31.4523 7.92378 28.637C5.08288 25.8126 3.51206 22.0505 3.49995 18.0442C3.48795 14.0363 5.03742 10.265 7.86323 7.42407C10.6877 4.58307 14.4505 3.01224 18.457 3.00024ZM27.872 9.51196C28.418 8.89248 29.3642 8.82637 29.9882 9.37231C30.6107 9.91681 30.6739 10.8645 30.1279 11.4885L19.6279 23.4885C19.3549 23.8004 18.9652 23.9852 18.5498 24.0002H18.4999C18.1025 24.0002 17.7214 23.8428 17.4394 23.5608L12.9394 19.0608C12.3529 18.4743 12.353 17.5262 12.9394 16.9397C13.5259 16.3532 14.474 16.3532 15.0605 16.9397L18.4267 20.3059L27.872 9.51196Z",
@@ -8079,8 +8119,274 @@ function OrderCheckIcon(props) {
     })
   );
 }
+
+// src/components/AccessCard.tsx
+var import_clsx41 = __toESM(require("clsx"), 1);
+
+// src/components/Radio.tsx
+var import_clsx40 = __toESM(require("clsx"), 1);
+var import_jsx_runtime63 = require("react/jsx-runtime");
+var Radio = (_a) => {
+  var _b = _a, {
+    className,
+    label,
+    error,
+    disabled,
+    checked,
+    readOnly,
+    id,
+    testid
+  } = _b, props = __objRest(_b, [
+    "className",
+    "label",
+    "error",
+    "disabled",
+    "checked",
+    "readOnly",
+    "id",
+    "testid"
+  ]);
+  const radioId = id;
+  const paragraphColor = disabled ? "text-primary-disabled" : error ? "text-primary-error" : "text-primary-normal";
+  const defaultClassName = (0, import_clsx40.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)(
+    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)(
+    disabled && "peer-disabled:bg-background-action-secondary-disabled peer-disabled:border-border-primary-normal peer-checked:border-0"
+  );
+  const readonlyClassName = (0, import_clsx40.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_runtime63.jsxs)(
+    "label",
+    {
+      htmlFor: radioId,
+      "data-testid": testid,
+      className: (0, import_clsx40.default)(
+        "flex items-center",
+        componentGap,
+        disabled ? "cursor-default" : "cursor-pointer",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "relative", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+            "input",
+            __spreadValues({
+              id: radioId,
+              "data-testid": testid ? `${testid}-input` : void 0,
+              type: "radio",
+              className: "sr-only peer",
+              disabled,
+              checked,
+              readOnly
+            }, props)
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+            "div",
+            {
+              className: (0, import_clsx40.default)(
+                "size-6 rounded-full border flex items-center justify-center",
+                baseTransition,
+                defaultClassName,
+                errorClassName,
+                disabledClassName,
+                readonlyClassName
+              ),
+              children: checked && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+                RadioIcon,
+                {
+                  className: (0, import_clsx40.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",
+                    disabled && "text-icon-on-action-secondary-disabled",
+                    readOnly && "text-icon-on-action-secondary-disabled"
+                  )
+                }
+              )
+            }
+          )
+        ] }),
+        label && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Paragraph, { id: radioId ? `${radioId}-label` : void 0, testid: testid ? `${testid}-label` : void 0, padded: true, color: paragraphColor, children: label })
+      ]
+    }
+  );
+};
+Radio.displayName = "Radio";
+var RadioIcon = ({ className }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
+    "svg",
+    {
+      className,
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+          "rect",
+          {
+            x: "1",
+            y: "1",
+            width: "22",
+            height: "22",
+            rx: "11",
+            stroke: "currentColor",
+            strokeWidth: "2"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("rect", { x: "4", y: "4", width: "16", height: "16", rx: "8", fill: "currentColor" })
+      ]
+    }
+  );
+};
+RadioIcon.displayName = "RadioIcon";
+
+// src/components/AccessCard.tsx
+var import_jsx_runtime64 = require("react/jsx-runtime");
+function AccessCard(props) {
+  const {
+    title,
+    description,
+    status,
+    onClick,
+    onDefaultGrantedChange,
+    defaultGranted,
+    testid,
+    error,
+    unavailable
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(import_jsx_runtime64.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
+      "div",
+      {
+        "data-testid": testid,
+        className: (0, import_clsx41.default)(
+          "cursor-pointer bg-background-grouped-secondary-normal",
+          "px-4 py-2 gap-2",
+          "shadow-access-card rounded",
+          "flex items-center",
+          unavailable && "opacity-50 pointer-events-none"
+        ),
+        onClick: (e) => {
+          const target = e.target;
+          const targetIsTheRadioComponent = target.closest("label");
+          if (targetIsTheRadioComponent || defaultGranted) {
+            return;
+          }
+          onClick == null ? void 0 : onClick();
+        },
+        children: [
+          status === "granted" && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+            Radio,
+            {
+              testid: testid ? `${testid}-radio` : void 0,
+              checked: defaultGranted,
+              onChange: () => {
+                if (unavailable) {
+                  return;
+                }
+                onDefaultGrantedChange == null ? void 0 : onDefaultGrantedChange();
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "flex flex-col gap-1 flex-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Subheader, { children: title }),
+            description && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Caption, { color: "text-primary-normal", children: description })
+          ] }),
+          !defaultGranted && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+            Icon,
+            {
+              name: status === "granted" ? "remove" : "add"
+            }
+          )
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Caption, { style: "error", children: error })
+  ] });
+}
+
+// src/components/AccessCardGroup.tsx
+var import_clsx42 = __toESM(require("clsx"), 1);
+var import_react38 = require("react");
+var import_jsx_runtime65 = require("react/jsx-runtime");
+function AccessCardGroup(props) {
+  const {
+    title,
+    children,
+    status,
+    expanded,
+    hasDefault,
+    onClick,
+    onGrantDenyClick,
+    testid,
+    unavailable
+  } = props;
+  const [expand, setExpand] = (0, import_react38.useState)(expanded);
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { "data-testid": testid, className: "mb-mobile-layout-group-gap desktop:mb-desktop-layout-group-gap compact:mb-desktop-compact-layout-group-gap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+      "div",
+      {
+        className: (0, import_clsx42.default)(
+          "flex items-center",
+          "p-2 pr-4 gap-2",
+          "rounded",
+          "bg-neutral-500 text-neutral-000",
+          "cursor-pointer",
+          expand && "mb-2",
+          unavailable && "opacity-75"
+        ),
+        onClick: () => {
+          setExpand(!expand);
+          onClick == null ? void 0 : onClick();
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+            Icon,
+            {
+              name: "keyboard_arrow_down",
+              className: (0, import_clsx42.default)(
+                expand && "rotate-180",
+                "transform transition-all duration-300 ease-in-out"
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Subheader, { children: title }) }),
+          !hasDefault && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+            Icon,
+            {
+              name: status === "granted" ? "remove" : "add",
+              onClick: (e) => {
+                e.stopPropagation();
+                onGrantDenyClick == null ? void 0 : onGrantDenyClick();
+              }
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+      "div",
+      {
+        className: (0, import_clsx42.default)(
+          "grid transition-all duration-300 ease-in-out",
+          expand ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "overflow-hidden -m-[3px] p-[4px]", children })
+      }
+    )
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AccessCard,
+  AccessCardGroup,
   Accordion,
   Alert,
   Button,