@dmsi/wedgekit-react 0.0.494 → 0.0.496

package/dist/components/DataGridCell.cjs

@@ -117,7 +117,7 @@ var CSS = /* @__PURE__ */ Object.freeze({
 });
 
 // src/components/DataGridCell.tsx
-var import_clsx8 = __toESM(require("clsx"), 1);
+var import_clsx9 = __toESM(require("clsx"), 1);
 var import_react11 = require("react");
 
 // src/classNames.ts
@@ -258,7 +258,7 @@ var gapUsingContainerPadding = (0, import_clsx.default)(
 );
 
 // src/components/MenuOption.tsx
-var import_clsx5 = __toESM(require("clsx"), 1);
+var import_clsx6 = __toESM(require("clsx"), 1);
 var import_react6 = require("react");
 
 // src/components/Label.tsx
@@ -477,8 +477,130 @@ function findDocumentRoot(element) {
 var import_react5 = require("react");
 var LocalStoragePrefix = `${LocalStoragePrefixVersion}-tableLayout`;
 
-// src/components/MenuOption.tsx
+// src/components/Caption.tsx
+var import_clsx5 = __toESM(require("clsx"), 1);
 var import_jsx_runtime4 = require("react/jsx-runtime");
+var Caption = (_a) => {
+  var _b = _a, {
+    className,
+    children,
+    as = "span",
+    style = "default",
+    color,
+    align,
+    id,
+    testid,
+    marginTopDesktop
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children",
+    "as",
+    "style",
+    "color",
+    "align",
+    "id",
+    "testid",
+    "marginTopDesktop"
+  ]);
+  const Element = as;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { id, "data-testid": testid, className: "flex gap-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      WhichIcon,
+      {
+        id,
+        testid,
+        style,
+        size: 16,
+        className: "mt-[3px] desktop:mt-0"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      Element,
+      __spreadProps(__spreadValues({
+        id: id ? `${id}-text` : void 0,
+        "data-testid": testid ? `${testid}-text` : void 0,
+        className: (0, import_clsx5.default)(
+          typography.caption.replace("text-text-primary-normal", ""),
+          (style === "default" || style === "info") && "text-text-secondary-normal",
+          style === "success" && "text-text-success-normal",
+          style === "warning" && "text-text-warning-normal",
+          style === "error" && "text-text-critical-normal",
+          align === "left" && "text-left",
+          align === "center" && "text-center",
+          align === "right" && "text-right",
+          className,
+          marginTopDesktop && `desktop:mt-px`
+        )
+      }, props), {
+        style: {
+          color: color ? `var(--color-${color})` : void 0
+        },
+        children
+      })
+    )
+  ] });
+};
+var WhichIcon = ({
+  style,
+  size,
+  className,
+  id,
+  testid
+}) => {
+  if (style === "success") {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-icon-success-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      Icon,
+      {
+        id: id ? `${id}-icon` : void 0,
+        testid: testid ? `${testid}-icon` : void 0,
+        className,
+        name: "check_circle",
+        size
+      }
+    ) });
+  }
+  if (style === "warning") {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-icon-warning-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      Icon,
+      {
+        id: id ? `${id}-icon` : void 0,
+        testid: testid ? `${testid}-icon` : void 0,
+        className,
+        name: "warning",
+        size
+      }
+    ) });
+  }
+  if (style === "error") {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-icon-critical-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      Icon,
+      {
+        id: id ? `${id}-icon` : void 0,
+        testid: testid ? `${testid}-icon` : void 0,
+        className,
+        name: "info",
+        size
+      }
+    ) });
+  }
+  if (style === "info") {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      Icon,
+      {
+        id: id ? `${id}-icon` : void 0,
+        testid: testid ? `${testid}-icon` : void 0,
+        className,
+        name: "info",
+        size
+      }
+    ) });
+  }
+  return null;
+};
+Caption.displayName = "Caption";
+
+// src/components/MenuOption.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var MenuOption = ({
   id,
   testid,
@@ -503,7 +625,8 @@ var MenuOption = ({
   mobilePositionTo,
   highlightMatchingText = false,
   menuValue,
-  onMouseMove
+  onMouseMove,
+  small = false
 }) => {
   const uniqueId = (0, import_react6.useId)();
   const internalRef = (0, import_react6.useRef)(null);
@@ -533,47 +656,48 @@ var MenuOption = ({
   const additionalAttributes = {
     "data-selected": selected || null
   };
-  const svgStyles = (0, import_clsx5.default)(
+  const svgStyles = (0, import_clsx6.default)(
     "[&>svg]:shrink-0 [&>svg]:fill-icon-action-primary-normal"
   );
-  const textLabelStyles = (0, import_clsx5.default)("w-full whitespace-nowrap !leading-6");
-  const normalStyles = variant === "normal" && !disabled && (0, import_clsx5.default)(
+  const textLabelStyles = (0, import_clsx6.default)("w-full whitespace-nowrap !leading-6");
+  const normalStyles = variant === "normal" && !disabled && (0, import_clsx6.default)(
     "bg-transparent text-text-primary-normal",
     "hover:bg-background-action-secondary-hover",
     "focus:bg-background-action-secondary-hover",
     "data-selected:bg-background-action-secondary-hover",
     "active:bg-background-action-secondary-active"
   );
-  const normalDisabledStyles = variant === "normal" && disabled && (0, import_clsx5.default)("text-text-primary-disabled");
-  const actionStyles = variant === "action" && !disabled && (0, import_clsx5.default)(
+  const normalDisabledStyles = variant === "normal" && disabled && (0, import_clsx6.default)("text-text-primary-disabled");
+  const actionStyles = variant === "action" && !disabled && (0, import_clsx6.default)(
     "text-action-400 bg-transparent",
     "hover:bg-background-action-secondary-hover hover:text-text-action-hover",
     "focus:bg-background-action-secondary-hover focus:text-text-action-hover",
     "data-selected:bg-background-action-secondary-active data-selected:text-text-action-active",
     "active:bg-background-action-secondary-active active:text-text-action-active"
   );
-  const actionDisabledStyles = variant === "action" && disabled && (0, import_clsx5.default)("text-text-action-disabled");
-  const disabledStyles = disabled && (0, import_clsx5.default)("bg-transparent cursor-default pointer-events-none");
+  const actionDisabledStyles = variant === "action" && disabled && (0, import_clsx6.default)("text-text-action-disabled");
+  const disabledStyles = disabled && (0, import_clsx6.default)("bg-transparent cursor-default pointer-events-none");
   const processChildren = typeof children === "string" && highlightMatchingText ? highlightMatch(children, menuValue) : children;
-  const renderChildren = typeof children === "object" ? children : variant === "action" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Label, { padded: true, className: textLabelStyles, children: processChildren }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Paragraph, { padded: true, className: textLabelStyles, children: processChildren });
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  const renderChildren = typeof children === "object" ? children : variant === "action" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Label, { padded: true, className: textLabelStyles, children: processChildren }) : !small ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Paragraph, { padded: true, className: textLabelStyles, children: processChildren }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Caption, { padded: true, className: textLabelStyles, children: processChildren });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       "div",
       __spreadProps(__spreadValues({
         id,
         "data-testid": testid,
         ref: actualRef,
-        className: (0, import_clsx5.default)(
-          "flex items-center cursor-pointer w-full text-left relative outline-none",
+        className: (0, import_clsx6.default)(
+          "flex cursor-pointer w-full text-left relative outline-none",
           svgStyles,
-          componentGap,
+          small ? layoutGroupGap : componentGap,
           componentPadding,
           baseTransition,
           normalStyles,
           normalDisabledStyles,
           actionStyles,
           actionDisabledStyles,
-          disabledStyles
+          disabledStyles,
+          { "items-center": !small }
         ),
         "data-value": value || children,
         onClick: () => {
@@ -590,13 +714,13 @@ var MenuOption = ({
         role: "menuitem",
         "aria-haspopup": subMenu ? "menu" : void 0,
         children: [
-          before && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "shrink-0 flex items-center", children: before }),
+          before && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: (0, import_clsx6.default)("shrink-0", { "items-center flex": !small }), children: before }),
           renderChildren,
           renderAfterProp()
         ]
       })
     ),
-    subMenu && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    subMenu && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "div",
       {
         onMouseEnter: handleSubMenuEnter,
@@ -620,14 +744,14 @@ var MenuOption = ({
       return after;
     }
     if (subMenu && after !== null) {
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "chevron_right" });
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { name: "chevron_right" });
     }
   }
   function mobileBackMenuOption() {
     if (!isMobile) {
       return;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       MenuOption,
       {
         id: id ? `${id}-back` : void 0,
@@ -636,7 +760,7 @@ var MenuOption = ({
           closeSubMenuLevel == null ? void 0 : closeSubMenuLevel(currentSubMenuLevel != null ? currentSubMenuLevel : 0);
         },
         variant: "action",
-        before: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "chevron_left" }),
+        before: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { name: "chevron_left" }),
         children: "Back"
       }
     );
@@ -653,12 +777,12 @@ function highlightMatch(text, searchValue) {
   );
   const parts = text.split(regex);
   return parts.map(
-    (part, index) => regex.test(part) ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "font-bold", children: part }, index) : part
+    (part, index) => regex.test(part) ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "font-bold", children: part }, index) : part
   );
 }
 
 // src/components/Menu.tsx
-var import_clsx6 = __toESM(require("clsx"), 1);
+var import_clsx7 = __toESM(require("clsx"), 1);
 var import_react8 = require("react");
 var import_react_dom = require("react-dom");
 
@@ -1025,7 +1149,7 @@ function getScrollableAncestors(element) {
 }
 
 // src/components/Menu.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var Menu = (_a) => {
   var _b = _a, {
     id,
@@ -1141,13 +1265,13 @@ var Menu = (_a) => {
     };
   }, [show, setShow, positionTo]);
   return show && (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       "div",
       __spreadProps(__spreadValues({
         id,
         "data-testid": testid,
         ref: setRefs,
-        className: (0, import_clsx6.default)(
+        className: (0, import_clsx7.default)(
           "shadow-4 rounded-base bg-background-grouped-primary-normal overflow-x-hidden overflow-y-auto flex flex-col outline-0",
           "fixed",
           "z-50",
@@ -1281,8 +1405,8 @@ var import_react10 = require("react");
 
 // src/components/Input.tsx
 var import_react9 = require("react");
-var import_clsx7 = __toESM(require("clsx"), 1);
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_clsx8 = __toESM(require("clsx"), 1);
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var InputBase = (_a) => {
   var _b = _a, {
     id,
@@ -1350,7 +1474,7 @@ var InputBase = (_a) => {
       };
     }
   }, [selectOnFocus]);
-  const inputBaseClass = (0, import_clsx7.default)(
+  const inputBaseClass = (0, import_clsx8.default)(
     fullWidth ? "w-full" : "w-fit",
     "flex flex-row items-center",
     "bg-background-action-secondary-normal caret-icon-on-action-secondary-normal",
@@ -1363,26 +1487,26 @@ var InputBase = (_a) => {
     !removeBorder && "border border-border-primary-normal",
     "relative"
   );
-  const inputFocusClass = (0, import_clsx7.default)(
+  const inputFocusClass = (0, import_clsx8.default)(
     "has-[[data-focus]]:border-transparent has-[[data-focus]]:outline-border-primary-focus focus-within:border-transparent focus-within:outline-border-primary-focus"
   );
-  const inputDisabledClass = (0, import_clsx7.default)(
+  const inputDisabledClass = (0, import_clsx8.default)(
     "has-disabled:bg-background-action-secondary-disabled"
   );
-  const inputReadOnlyClass = (0, import_clsx7.default)(
+  const inputReadOnlyClass = (0, import_clsx8.default)(
     "has-[input:not(:disabled):read-only]:outline-none has-[input:not(:disabled):read-only]:bg-transparent has-[input:not(:disabled):read-only]:border-transparent has-[input:not(:disabled):read-only]:pl-0"
   );
-  const inputInvalidClass = (0, import_clsx7.default)(
+  const inputInvalidClass = (0, import_clsx8.default)(
     "has-[[data-error]]:border-transparent has-[[data-error]]:not-focus-within:outline-border-primary-error has-[[data-error]]:not-focus-within:outline-1"
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "label",
     {
       id,
       "data-testid": testid,
       htmlFor: inputId,
       ref: inputContainerRef,
-      className: (0, import_clsx7.default)(
+      className: (0, import_clsx8.default)(
         "w-full flex flex-col",
         "block",
         "text-text-primary-normal has-disabled:text-text-primary-disabled",
@@ -1390,30 +1514,30 @@ var InputBase = (_a) => {
       ),
       style: __spreadValues({}, props.style),
       children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: (0, import_clsx7.default)("flex items-center", componentGap), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        label && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: (0, import_clsx8.default)("flex items-center", componentGap), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             Label,
             {
               id: id ? `${id}-label` : void 0,
               color: error ? "text-primary-error" : void 0,
-              className: (0, import_clsx7.default)(
+              className: (0, import_clsx8.default)(
                 props.disabled || props.readOnly ? "cursor-default" : "cursor-pointer"
               ),
               children: label
             }
           ),
-          required && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          required && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             "span",
             {
-              className: (0, import_clsx7.default)(typography.label, "text-text-critical-normal"),
+              className: (0, import_clsx8.default)(typography.label, "text-text-critical-normal"),
               children: "*"
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
           "div",
           {
-            className: (0, import_clsx7.default)(
+            className: (0, import_clsx8.default)(
               inputBaseClass,
               !props.disabled && inputInvalidClass,
               inputFocusClass,
@@ -1428,7 +1552,7 @@ var InputBase = (_a) => {
             },
             children: [
               before,
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "input",
                 __spreadProps(__spreadValues(__spreadValues({
                   ref: (el) => {
@@ -1439,7 +1563,7 @@ var InputBase = (_a) => {
                 }, props), attributes), {
                   id: inputId,
                   "data-testid": testid ? `${testid}-input` : void 0,
-                  className: (0, import_clsx7.default)(
+                  className: (0, import_clsx8.default)(
                     "flex-1 outline-none w-full max-w-full min-h-6 min-w-0",
                     "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
                     "placeholder:text-text-secondary-normal disabled:text-text-secondary-disabled",
@@ -1453,11 +1577,11 @@ var InputBase = (_a) => {
                   style: __spreadProps(__spreadValues({}, props.style), { width })
                 })
               ),
-              secondaryIconColor ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "contents text-text-secondary-normal", children: after }) : after
+              secondaryIconColor ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "contents text-text-secondary-normal", children: after }) : after
             ]
           }
         ),
-        caption && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        caption && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "div",
           {
             id: id ? `${id}-caption` : void 0,
@@ -1550,9 +1674,9 @@ var Input = (_a) => {
     if (props.before) return props.before;
     switch (variant) {
       case "search":
-        return !removeSearchIcon ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "search" }) }) : null;
+        return !removeSearchIcon ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { name: "search" }) }) : null;
       case "currency":
-        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "attach_money" }) });
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { name: "attach_money" }) });
       default:
         return null;
     }
@@ -1562,7 +1686,7 @@ var Input = (_a) => {
     switch (variant) {
       case "search": {
         const hasValue = displayValue.length > 0;
-        return hasValue && !props.readOnly ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        return hasValue && !props.readOnly ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           Icon,
           {
             id: id ? `${id}-clear-button` : void 0,
@@ -1574,11 +1698,11 @@ var Input = (_a) => {
         ) : null;
       }
       case "finder":
-        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "search" });
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { name: "search" });
       case "uom":
-        return uom ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-text-secondary-normal uppercase", children: uom.slice(0, 4) }) : null;
+        return uom ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-text-secondary-normal uppercase", children: uom.slice(0, 4) }) : null;
       case "percentage":
-        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "percent" }) });
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { name: "percent" }) });
       default:
         return null;
     }
@@ -1655,7 +1779,7 @@ var Input = (_a) => {
     onBlur == null ? void 0 : onBlur(e);
   };
   const inputProps = getInputProps();
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     InputBase,
     __spreadProps(__spreadValues({}, inputProps), {
       before: getBeforeElement(),
@@ -1667,15 +1791,15 @@ var Input = (_a) => {
   );
 };
 Input.displayName = "Input";
-var Finder = (props) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Input, __spreadProps(__spreadValues({}, props), { variant: "finder" }));
-var UOM = (props) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Input, __spreadProps(__spreadValues({}, props), { variant: "uom" }));
+var Finder = (props) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Input, __spreadProps(__spreadValues({}, props), { variant: "finder" }));
+var UOM = (props) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Input, __spreadProps(__spreadValues({}, props), { variant: "uom" }));
 var Currency = (props) => {
   var _a;
   const handleCurrencyChange = (e) => {
     var _a2;
     (_a2 = props.onChange) == null ? void 0 : _a2.call(props, e);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     Input,
     __spreadProps(__spreadValues({}, props), {
       variant: "currency",
@@ -1684,14 +1808,14 @@ var Currency = (props) => {
     })
   );
 };
-var Percentage = (props) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Input, __spreadProps(__spreadValues({}, props), { variant: "percentage" }));
+var Percentage = (props) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Input, __spreadProps(__spreadValues({}, props), { variant: "percentage" }));
 Finder.displayName = "Finder";
 UOM.displayName = "UOM";
 Currency.displayName = "Currency";
 Percentage.displayName = "Percentage";
 
 // src/components/Search.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var Search = (_a) => {
   var _b = _a, {
     id,
@@ -1733,8 +1857,8 @@ var Search = (_a) => {
     }
     (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
   }, [props.value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       Input,
       __spreadValues({
         id,
@@ -1808,7 +1932,7 @@ var Search = (_a) => {
 Search.displayName = "Search";
 
 // src/components/DataGridCell.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var DataGridCell = (0, import_react11.memo)(
   (_a) => {
     var _b = _a, {
@@ -1889,10 +2013,10 @@ var DataGridCell = (0, import_react11.memo)(
     };
     const headerBgStyles = type === "header" && !locked && !["button"].includes(component) && "bg-brand-400 border-brand-200";
     const lockedHeaderBgStyles = locked && !["button"].includes(component) && "bg-neutral-400 border-neutral-300";
-    const headerTypeStyles = type === "header" && component !== "button" && component !== "icon" && (0, import_clsx8.default)("border-r");
-    const buttonComponentStyles = component === "button" && (0, import_clsx8.default)("border-r border-b border-border-primary-normal");
-    const iconComponentStyles = component === "icon" && (0, import_clsx8.default)("border-l");
-    const cellClasses = (0, import_clsx8.default)(
+    const headerTypeStyles = type === "header" && component !== "button" && component !== "icon" && (0, import_clsx9.default)("border-r");
+    const buttonComponentStyles = component === "button" && (0, import_clsx9.default)("border-r border-b border-border-primary-normal");
+    const iconComponentStyles = component === "icon" && (0, import_clsx9.default)("border-l");
+    const cellClasses = (0, import_clsx9.default)(
       headerTypeStyles,
       buttonComponentStyles,
       headerBgStyles,
@@ -1913,16 +2037,16 @@ var DataGridCell = (0, import_react11.memo)(
       isGrabbing && "!cursor-grabbing",
       component === "checkbox" || center && "justify-center"
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       Element,
       __spreadProps(__spreadValues({
         id,
         "data-testid": testid,
-        className: (0, import_clsx8.default)("flex h-10", !width && "flex-1"),
+        className: (0, import_clsx9.default)("flex h-10", !width && "flex-1"),
         style: { width, minWidth }
       }, props), {
         "data-theme": type === "header" && !locked ? "brand" : void 0,
-        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "div",
           {
             className: cellClasses,
@@ -1999,7 +2123,7 @@ function DataCellHeader(_a) {
     "--color-icon-on-action-primary-normal": "var(--color-text-brand-primary-normal)",
     "--background-action-secondary-normal": "var(--color-text-brand-primary-normal)"
   }, props.style);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     DataGridCell,
     __spreadProps(__spreadValues({
       id,
@@ -2014,7 +2138,7 @@ function DataCellHeader(_a) {
     }, props), {
       children: [
         children,
-        header.column.getCanFilter() && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        header.column.getCanFilter() && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
           Menu,
           {
             id: id ? `${id}-menu` : void 0,
@@ -2026,7 +2150,7 @@ function DataCellHeader(_a) {
             mobileHide,
             useDefaultMinWidth: useMenuDefaultMinWidth,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 MenuOption,
                 __spreadProps(__spreadValues({
                   id: id ? `${id}-filter-option` : void 0,
@@ -2034,7 +2158,7 @@ function DataCellHeader(_a) {
                 }, subMenuListeners), {
                   subMenu: (_b2) => {
                     var _c = _b2, { menuId, subMenuLevel } = _c, props2 = __objRest(_c, ["menuId", "subMenuLevel"]);
-                    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
                       Menu,
                       __spreadProps(__spreadValues({
                         id: id ? `${id}-filter-submenu` : void 0,
@@ -2046,7 +2170,7 @@ function DataCellHeader(_a) {
                         },
                         useDefaultMinWidth: useMenuDefaultMinWidth,
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: (0, import_clsx8.default)(paddingUsingComponentGap), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: (0, import_clsx9.default)(paddingUsingComponentGap), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                             Search,
                             {
                               id: id ? `${id}-filter-search` : void 0,
@@ -2062,7 +2186,7 @@ function DataCellHeader(_a) {
                               value: filter != null ? filter : ""
                             }
                           ) }),
-                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                             MenuOption,
                             {
                               id: id ? `${id}-filter-contains` : void 0,
@@ -2072,7 +2196,7 @@ function DataCellHeader(_a) {
                               children: "Contains"
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                             MenuOption,
                             {
                               id: id ? `${id}-filter-startswith` : void 0,
@@ -2082,7 +2206,7 @@ function DataCellHeader(_a) {
                               children: "Starts with"
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                             MenuOption,
                             {
                               id: id ? `${id}-filter-endswith` : void 0,
@@ -2099,7 +2223,7 @@ function DataCellHeader(_a) {
                   children: "Filter"
                 })
               ),
-              !predeterminedPinned.current && header.column.getCanPin() && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              !predeterminedPinned.current && header.column.getCanPin() && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 MenuOption,
                 __spreadProps(__spreadValues({
                   onClick: () => {
@@ -2108,7 +2232,7 @@ function DataCellHeader(_a) {
                 }, subMenuListeners), {
                   subMenu: (_d) => {
                     var _e = _d, { menuId, subMenuLevel } = _e, props2 = __objRest(_e, ["menuId", "subMenuLevel"]);
-                    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
                       Menu,
                       __spreadProps(__spreadValues({}, props2), {
                         show: isMenuActive(menuId, subMenuLevel),
@@ -2116,7 +2240,7 @@ function DataCellHeader(_a) {
                           registerSubMenu(menuId, el);
                         },
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                             MenuOption,
                             {
                               selected: header.column.getIsPinned() === "left",
@@ -2127,11 +2251,11 @@ function DataCellHeader(_a) {
                                   header.column.pin("left");
                                 }
                               },
-                              after: header.column.getIsPinned() === "left" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { name: "check" }),
+                              after: header.column.getIsPinned() === "left" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { name: "check" }),
                               children: "Left"
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                             MenuOption,
                             {
                               selected: header.column.getIsPinned() === "right",
@@ -2142,7 +2266,7 @@ function DataCellHeader(_a) {
                                   header.column.pin("right");
                                 }
                               },
-                              after: header.column.getIsPinned() === "right" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { name: "check" }),
+                              after: header.column.getIsPinned() === "right" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { name: "check" }),
                               children: "Right"
                             }
                           )
@@ -2160,11 +2284,11 @@ function DataCellHeader(_a) {
     })
   );
   function menuOptionIcon(value) {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       Icon,
       {
         name: "check",
-        className: (0, import_clsx8.default)(
+        className: (0, import_clsx9.default)(
           header.column.columnDef.filterFn !== value && "text-transparent"
         )
       }
@@ -2209,7 +2333,7 @@ function DraggableCellHeader(_a) {
     "--color-icon-on-action-primary-normal": "var(--color-action-000)",
     userSelect: "none"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     DataCellHeader,
     __spreadProps(__spreadValues(__spreadValues(__spreadValues({
       header,
@@ -2241,7 +2365,7 @@ function DragAlongCell(_a) {
     minWidth: cell.column.getSize(),
     zIndex: isDragging ? 1 : 0
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DataGridCell, __spreadProps(__spreadValues({ style, ref: setNodeRef }, props), { children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DataGridCell, __spreadProps(__spreadValues({ style, ref: setNodeRef }, props), { children }));
 }
 DragAlongCell.displayName = "DragAlongCell";
 // Annotate the CommonJS export names for ESM import in node: