@dmsi/wedgekit-react 0.0.498 → 0.0.500

package/dist/components/Input.cjs

@@ -69,7 +69,7 @@ __export(Input_exports, {
 });
 module.exports = __toCommonJS(Input_exports);
 var import_react = require("react");
-var import_clsx4 = __toESM(require("clsx"), 1);
+var import_clsx5 = __toESM(require("clsx"), 1);
 
 // src/classNames.ts
 var import_clsx = __toESM(require("clsx"), 1);
@@ -320,14 +320,68 @@ function formatCurrencyDisplay(value) {
   return decimalPart !== void 0 ? `${formattedInteger}.${decimalPart}` : formattedInteger;
 }
 
-// src/components/Input.tsx
+// src/components/Paragraph.tsx
+var import_clsx4 = __toESM(require("clsx"), 1);
 var import_jsx_runtime3 = require("react/jsx-runtime");
+var Paragraph = (_a) => {
+  var _b = _a, {
+    className,
+    color,
+    padded,
+    align = "left",
+    tall,
+    addOverflow,
+    children,
+    as = "p",
+    id,
+    testid
+  } = _b, props = __objRest(_b, [
+    "className",
+    "color",
+    "padded",
+    "align",
+    "tall",
+    "addOverflow",
+    "children",
+    "as",
+    "id",
+    "testid"
+  ]);
+  const Element = as;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    Element,
+    __spreadProps(__spreadValues({
+      id,
+      "data-testid": testid
+    }, props), {
+      className: (0, import_clsx4.default)(
+        typography.paragraph,
+        className,
+        padded && componentPaddingXUsingComponentGap,
+        align === "left" && "text-left",
+        align === "center" && "text-center",
+        align === "right" && "text-right",
+        tall && "!leading-6",
+        addOverflow && "whitespace-nowrap text-ellipsis overflow-hidden"
+      ),
+      style: __spreadProps(__spreadValues({}, props.style), {
+        color: color ? `var(--color-${color})` : void 0
+      }),
+      children
+    })
+  );
+};
+Paragraph.displayName = "Paragraph";
+
+// src/components/Input.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var InputBase = (_a) => {
   var _b = _a, {
     id,
     testid,
     before,
     after,
+    rightAdornment,
     type,
     label,
     error,
@@ -351,6 +405,7 @@ var InputBase = (_a) => {
     "testid",
     "before",
     "after",
+    "rightAdornment",
     "type",
     "label",
     "error",
@@ -389,7 +444,7 @@ var InputBase = (_a) => {
       };
     }
   }, [selectOnFocus]);
-  const inputBaseClass = (0, import_clsx4.default)(
+  const inputBaseClass = (0, import_clsx5.default)(
     fullWidth ? "w-full" : "w-fit",
     "flex flex-row items-center",
     "bg-background-action-secondary-normal caret-icon-on-action-secondary-normal",
@@ -402,26 +457,26 @@ var InputBase = (_a) => {
     !removeBorder && "border border-border-primary-normal",
     "relative"
   );
-  const inputFocusClass = (0, import_clsx4.default)(
+  const inputFocusClass = (0, import_clsx5.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_clsx4.default)(
+  const inputDisabledClass = (0, import_clsx5.default)(
     "has-disabled:bg-background-action-secondary-disabled"
   );
-  const inputReadOnlyClass = (0, import_clsx4.default)(
+  const inputReadOnlyClass = (0, import_clsx5.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_clsx4.default)(
+  const inputInvalidClass = (0, import_clsx5.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_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "label",
     {
       id,
       "data-testid": testid,
       htmlFor: inputId,
       ref: inputContainerRef,
-      className: (0, import_clsx4.default)(
+      className: (0, import_clsx5.default)(
         "w-full flex flex-col",
         "block",
         "text-text-primary-normal has-disabled:text-text-primary-disabled",
@@ -429,30 +484,30 @@ var InputBase = (_a) => {
       ),
       style: __spreadValues({}, props.style),
       children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: (0, import_clsx4.default)("flex items-center", componentGap), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        label && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: (0, import_clsx5.default)("flex items-center", componentGap), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             Label,
             {
               id: id ? `${id}-label` : void 0,
               color: error ? "text-primary-error" : void 0,
-              className: (0, import_clsx4.default)(
+              className: (0, import_clsx5.default)(
                 props.disabled || props.readOnly ? "cursor-default" : "cursor-pointer"
               ),
               children: label
             }
           ),
-          required && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          required && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "span",
             {
-              className: (0, import_clsx4.default)(typography.label, "text-text-critical-normal"),
+              className: (0, import_clsx5.default)(typography.label, "text-text-critical-normal"),
               children: "*"
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
           "div",
           {
-            className: (0, import_clsx4.default)(
+            className: (0, import_clsx5.default)(
               inputBaseClass,
               !props.disabled && inputInvalidClass,
               inputFocusClass,
@@ -467,7 +522,7 @@ var InputBase = (_a) => {
             },
             children: [
               before,
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 "input",
                 __spreadProps(__spreadValues(__spreadValues({
                   ref: (el) => {
@@ -478,7 +533,7 @@ var InputBase = (_a) => {
                 }, props), attributes), {
                   id: inputId,
                   "data-testid": testid ? `${testid}-input` : void 0,
-                  className: (0, import_clsx4.default)(
+                  className: (0, import_clsx5.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",
@@ -492,11 +547,12 @@ var InputBase = (_a) => {
                   style: __spreadProps(__spreadValues({}, props.style), { width })
                 })
               ),
-              secondaryIconColor ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "contents text-text-secondary-normal", children: after }) : after
+              secondaryIconColor ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "contents text-text-secondary-normal", children: after }) : after,
+              rightAdornment
             ]
           }
         ),
-        caption && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        caption && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "div",
           {
             id: id ? `${id}-caption` : void 0,
@@ -519,7 +575,8 @@ var Input = (_a) => {
     onBlur,
     onClear,
     id,
-    testid
+    testid,
+    rightAdornment
   } = _b, props = __objRest(_b, [
     "variant",
     "decimals",
@@ -530,7 +587,8 @@ var Input = (_a) => {
     "onBlur",
     "onClear",
     "id",
-    "testid"
+    "testid",
+    "rightAdornment"
   ]);
   const [internalValue, setInternalValue] = (0, import_react.useState)("");
   const [displayValue, setDisplayValue] = (0, import_react.useState)("");
@@ -552,7 +610,7 @@ var Input = (_a) => {
     const formatted = formatDecimalValue(stringValue, decimals != null ? decimals : 2);
     setInternalValue(formatted);
     setDisplayValue(formatCurrencyDisplay(formatted));
-  }, []);
+  }, [variant, propValue, decimals]);
   const getInputProps = () => {
     var _a2;
     const baseProps = __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, props), {
@@ -589,9 +647,9 @@ var Input = (_a) => {
     if (props.before) return props.before;
     switch (variant) {
       case "search":
-        return !removeSearchIcon ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { name: "search" }) }) : null;
+        return !removeSearchIcon ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "search" }) }) : null;
       case "currency":
-        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { name: "attach_money" }) });
+        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "attach_money" }) });
       default:
         return null;
     }
@@ -601,7 +659,7 @@ var Input = (_a) => {
     switch (variant) {
       case "search": {
         const hasValue = displayValue.length > 0;
-        return hasValue && !props.readOnly ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        return hasValue && !props.readOnly ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           Icon,
           {
             id: id ? `${id}-clear-button` : void 0,
@@ -613,11 +671,11 @@ var Input = (_a) => {
         ) : null;
       }
       case "finder":
-        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { name: "search" });
+        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "search" });
       case "uom":
-        return uom ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-text-secondary-normal uppercase", children: uom.slice(0, 4) }) : null;
+        return uom ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Paragraph, { color: "text-secondary-normal", children: uom.toUpperCase() }) : null;
       case "percentage":
-        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { name: "percent" }) });
+        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "percent" }) });
       default:
         return null;
     }
@@ -694,27 +752,28 @@ var Input = (_a) => {
     onBlur == null ? void 0 : onBlur(e);
   };
   const inputProps = getInputProps();
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     InputBase,
     __spreadProps(__spreadValues({}, inputProps), {
       before: getBeforeElement(),
       after: getAfterElement(),
       onChange: handleChange,
       onBlur: handleBlur,
-      testid
+      testid,
+      rightAdornment
     })
   );
 };
 Input.displayName = "Input";
-var Finder = (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Input, __spreadProps(__spreadValues({}, props), { variant: "finder" }));
-var UOM = (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Input, __spreadProps(__spreadValues({}, props), { variant: "uom" }));
+var Finder = (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Input, __spreadProps(__spreadValues({}, props), { variant: "finder" }));
+var UOM = (props) => /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     Input,
     __spreadProps(__spreadValues({}, props), {
       variant: "currency",
@@ -723,7 +782,7 @@ var Currency = (props) => {
     })
   );
 };
-var Percentage = (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Input, __spreadProps(__spreadValues({}, props), { variant: "percentage" }));
+var Percentage = (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Input, __spreadProps(__spreadValues({}, props), { variant: "percentage" }));
 Finder.displayName = "Finder";
 UOM.displayName = "UOM";
 Currency.displayName = "Currency";

package/dist/components/Input.js

@@ -6,9 +6,10 @@ import {
   InputBase,
   Percentage,
   UOM
-} from "../chunk-44TH3VC7.js";
+} from "../chunk-G4AWTFBQ.js";
 import "../chunk-AL5QIRY3.js";
 import "../chunk-5UH6QUFB.js";
+import "../chunk-ZSETMD4A.js";
 import "../chunk-NKUETCDA.js";
 import "../chunk-IXR65MOU.js";
 import "../chunk-ORMEWXMH.js";

package/dist/components/MobileDataGrid/ColumnSelector/index.cjs

@@ -1624,6 +1624,7 @@ var InputBase = (_a) => {
     testid,
     before,
     after,
+    rightAdornment,
     type,
     label,
     error,
@@ -1647,6 +1648,7 @@ var InputBase = (_a) => {
     "testid",
     "before",
     "after",
+    "rightAdornment",
     "type",
     "label",
     "error",
@@ -1788,7 +1790,8 @@ var InputBase = (_a) => {
                   style: __spreadProps(__spreadValues({}, props.style), { width })
                 })
               ),
-              secondaryIconColor ? /* @__PURE__ */ (0, import_jsx_runtime7.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,
+              rightAdornment
             ]
           }
         ),
@@ -1815,7 +1818,8 @@ var Input = (_a) => {
     onBlur,
     onClear,
     id,
-    testid
+    testid,
+    rightAdornment
   } = _b, props = __objRest(_b, [
     "variant",
     "decimals",
@@ -1826,7 +1830,8 @@ var Input = (_a) => {
     "onBlur",
     "onClear",
     "id",
-    "testid"
+    "testid",
+    "rightAdornment"
   ]);
   const [internalValue, setInternalValue] = (0, import_react9.useState)("");
   const [displayValue, setDisplayValue] = (0, import_react9.useState)("");
@@ -1848,7 +1853,7 @@ var Input = (_a) => {
     const formatted = formatDecimalValue(stringValue, decimals != null ? decimals : 2);
     setInternalValue(formatted);
     setDisplayValue(formatCurrencyDisplay(formatted));
-  }, []);
+  }, [variant, propValue, decimals]);
   const getInputProps = () => {
     var _a2;
     const baseProps = __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, props), {
@@ -1911,7 +1916,7 @@ var Input = (_a) => {
       case "finder":
         return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { name: "search" });
       case "uom":
-        return uom ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-text-secondary-normal uppercase", children: uom.slice(0, 4) }) : null;
+        return uom ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Paragraph, { color: "text-secondary-normal", children: uom.toUpperCase() }) : null;
       case "percentage":
         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:
@@ -1997,7 +2002,8 @@ var Input = (_a) => {
       after: getAfterElement(),
       onChange: handleChange,
       onBlur: handleBlur,
-      testid
+      testid,
+      rightAdornment
     })
   );
 };
@@ -5056,8 +5062,10 @@ var ModalHeader = ({
   onClose,
   id,
   testid,
-  headerClassname
+  headerClassname,
+  titleAs: TitleComponent
 }) => {
+  const Title = TitleComponent || Heading2;
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
     "div",
     {
@@ -5076,7 +5084,7 @@ var ModalHeader = ({
         /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: (0, import_clsx25.default)("flex items-center flex-1", layoutGroupGap), children: [
           headerIcon,
           title && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-            Heading2,
+            Title,
             {
               id: id ? `${id}-title` : void 0,
               testid: testid ? `${testid}-title` : void 0,
@@ -5306,7 +5314,8 @@ var Modal = ({
   customActions,
   headerClassname,
   customFooter,
-  noWrapper
+  noWrapper,
+  titleAs: TitleComponent
 }) => {
   var _a;
   const mounted = useMounted();
@@ -5432,7 +5441,8 @@ var Modal = ({
                   hideCloseIcon,
                   headerIcon,
                   headerIconAlign,
-                  headerClassname
+                  headerClassname,
+                  titleAs: TitleComponent
                 }
               ),
               children && (size !== "screen" || noWrapper) ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(

package/dist/components/MobileDataGrid/ColumnSelector/index.js

@@ -1,13 +1,13 @@
 import {
   ColumnSelector
-} from "../../../chunk-7LKGHCVT.js";
+} from "../../../chunk-TWDH7ZDS.js";
 import "../../../chunk-M7INAUAJ.js";
-import "../../../chunk-4Q7T4GJ2.js";
+import "../../../chunk-YD3HWIUJ.js";
 import "../../../chunk-3DEYCNUE.js";
 import "../../../chunk-XHQOTLG6.js";
 import "../../../chunk-BQNPOGD5.js";
 import "../../../chunk-Y5GD2FJA.js";
-import "../../../chunk-3WCLGTYP.js";
+import "../../../chunk-4LBQSSGH.js";
 import "../../../chunk-YEZBNQZI.js";
 import "../../../chunk-B53XDCLO.js";
 import "../../../chunk-S5ZJ3Q7P.js";
@@ -28,23 +28,23 @@ import "../../../chunk-7BVUTFZ5.js";
 import "../../../chunk-L3BXRDLP.js";
 import "../../../chunk-34VEVX5H.js";
 import "../../../chunk-GRGDX7JC.js";
-import "../../../chunk-HVNHTM3P.js";
-import "../../../chunk-X67L3NZI.js";
+import "../../../chunk-PIBHG6DH.js";
+import "../../../chunk-TOKS63IK.js";
 import "../../../chunk-4RJKB7LC.js";
 import "../../../chunk-FG7GNGE3.js";
-import "../../../chunk-G7KIKHER.js";
+import "../../../chunk-X4UK7HE2.js";
 import "../../../chunk-AG43RS4Q.js";
 import "../../../chunk-ZQJMNPCF.js";
 import "../../../chunk-6TYWM26K.js";
 import "../../../chunk-SBRRNFOP.js";
 import "../../../chunk-Y2GK27RX.js";
 import "../../../chunk-QVWYTQKL.js";
-import "../../../chunk-ZKTHUXKS.js";
+import "../../../chunk-HIKWIY5Q.js";
 import "../../../chunk-TCMOGTPB.js";
 import "../../../chunk-DVU5XV7L.js";
 import "../../../chunk-5R4C5F63.js";
-import "../../../chunk-RQRR4FEF.js";
-import "../../../chunk-44TH3VC7.js";
+import "../../../chunk-5MLYAQQO.js";
+import "../../../chunk-G4AWTFBQ.js";
 import "../../../chunk-AL5QIRY3.js";
 import "../../../chunk-WVUIIBRR.js";
 import "../../../chunk-75USUR3I.js";

package/dist/components/MobileDataGrid/MobileDataGridHeader.cjs

@@ -2049,6 +2049,7 @@ var InputBase = (_a) => {
     testid,
     before,
     after,
+    rightAdornment,
     type,
     label,
     error,
@@ -2072,6 +2073,7 @@ var InputBase = (_a) => {
     "testid",
     "before",
     "after",
+    "rightAdornment",
     "type",
     "label",
     "error",
@@ -2213,7 +2215,8 @@ var InputBase = (_a) => {
                   style: __spreadProps(__spreadValues({}, props.style), { width })
                 })
               ),
-              secondaryIconColor ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "contents text-text-secondary-normal", children: after }) : after
+              secondaryIconColor ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "contents text-text-secondary-normal", children: after }) : after,
+              rightAdornment
             ]
           }
         ),
@@ -2240,7 +2243,8 @@ var Input = (_a) => {
     onBlur,
     onClear,
     id,
-    testid
+    testid,
+    rightAdornment
   } = _b, props = __objRest(_b, [
     "variant",
     "decimals",
@@ -2251,7 +2255,8 @@ var Input = (_a) => {
     "onBlur",
     "onClear",
     "id",
-    "testid"
+    "testid",
+    "rightAdornment"
   ]);
   const [internalValue, setInternalValue] = (0, import_react9.useState)("");
   const [displayValue, setDisplayValue] = (0, import_react9.useState)("");
@@ -2273,7 +2278,7 @@ var Input = (_a) => {
     const formatted = formatDecimalValue(stringValue, decimals != null ? decimals : 2);
     setInternalValue(formatted);
     setDisplayValue(formatCurrencyDisplay(formatted));
-  }, []);
+  }, [variant, propValue, decimals]);
   const getInputProps = () => {
     var _a2;
     const baseProps = __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, props), {
@@ -2336,7 +2341,7 @@ var Input = (_a) => {
       case "finder":
         return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { name: "search" });
       case "uom":
-        return uom ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-text-secondary-normal uppercase", children: uom.slice(0, 4) }) : null;
+        return uom ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Paragraph, { color: "text-secondary-normal", children: uom.toUpperCase() }) : null;
       case "percentage":
         return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { name: "percent" }) });
       default:
@@ -2422,7 +2427,8 @@ var Input = (_a) => {
       after: getAfterElement(),
       onChange: handleChange,
       onBlur: handleBlur,
-      testid
+      testid,
+      rightAdornment
     })
   );
 };
@@ -5284,8 +5290,10 @@ var ModalHeader = ({
   onClose,
   id,
   testid,
-  headerClassname
+  headerClassname,
+  titleAs: TitleComponent
 }) => {
+  const Title = TitleComponent || Heading2;
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     "div",
     {
@@ -5304,7 +5312,7 @@ var ModalHeader = ({
         /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: (0, import_clsx25.default)("flex items-center flex-1", layoutGroupGap), children: [
           headerIcon,
           title && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-            Heading2,
+            Title,
             {
               id: id ? `${id}-title` : void 0,
               testid: testid ? `${testid}-title` : void 0,
@@ -5534,7 +5542,8 @@ var Modal = ({
   customActions,
   headerClassname,
   customFooter,
-  noWrapper
+  noWrapper,
+  titleAs: TitleComponent
 }) => {
   var _a;
   const mounted = useMounted();
@@ -5660,7 +5669,8 @@ var Modal = ({
                   hideCloseIcon,
                   headerIcon,
                   headerIconAlign,
-                  headerClassname
+                  headerClassname,
+                  titleAs: TitleComponent
                 }
               ),
               children && (size !== "screen" || noWrapper) ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(

package/dist/components/MobileDataGrid/MobileDataGridHeader.js

@@ -1,13 +1,13 @@
 import {
   MobileDataGridHeader
-} from "../../chunk-7LKGHCVT.js";
+} from "../../chunk-TWDH7ZDS.js";
 import "../../chunk-M7INAUAJ.js";
-import "../../chunk-4Q7T4GJ2.js";
+import "../../chunk-YD3HWIUJ.js";
 import "../../chunk-3DEYCNUE.js";
 import "../../chunk-XHQOTLG6.js";
 import "../../chunk-BQNPOGD5.js";
 import "../../chunk-Y5GD2FJA.js";
-import "../../chunk-3WCLGTYP.js";
+import "../../chunk-4LBQSSGH.js";
 import "../../chunk-YEZBNQZI.js";
 import "../../chunk-B53XDCLO.js";
 import "../../chunk-S5ZJ3Q7P.js";
@@ -28,23 +28,23 @@ import "../../chunk-7BVUTFZ5.js";
 import "../../chunk-L3BXRDLP.js";
 import "../../chunk-34VEVX5H.js";
 import "../../chunk-GRGDX7JC.js";
-import "../../chunk-HVNHTM3P.js";
-import "../../chunk-X67L3NZI.js";
+import "../../chunk-PIBHG6DH.js";
+import "../../chunk-TOKS63IK.js";
 import "../../chunk-4RJKB7LC.js";
 import "../../chunk-FG7GNGE3.js";
-import "../../chunk-G7KIKHER.js";
+import "../../chunk-X4UK7HE2.js";
 import "../../chunk-AG43RS4Q.js";
 import "../../chunk-ZQJMNPCF.js";
 import "../../chunk-6TYWM26K.js";
 import "../../chunk-SBRRNFOP.js";
 import "../../chunk-Y2GK27RX.js";
 import "../../chunk-QVWYTQKL.js";
-import "../../chunk-ZKTHUXKS.js";
+import "../../chunk-HIKWIY5Q.js";
 import "../../chunk-TCMOGTPB.js";
 import "../../chunk-DVU5XV7L.js";
 import "../../chunk-5R4C5F63.js";
-import "../../chunk-RQRR4FEF.js";
-import "../../chunk-44TH3VC7.js";
+import "../../chunk-5MLYAQQO.js";
+import "../../chunk-G4AWTFBQ.js";
 import "../../chunk-AL5QIRY3.js";
 import "../../chunk-WVUIIBRR.js";
 import "../../chunk-75USUR3I.js";

package/dist/components/MobileDataGrid/RowDetailModalProvider/index.cjs

@@ -444,8 +444,10 @@ var ModalHeader = ({
   onClose,
   id,
   testid,
-  headerClassname
+  headerClassname,
+  titleAs: TitleComponent
 }) => {
+  const Title = TitleComponent || Heading2;
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "div",
     {
@@ -464,7 +466,7 @@ var ModalHeader = ({
         /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: (0, import_clsx5.default)("flex items-center flex-1", layoutGroupGap), children: [
           headerIcon,
           title && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            Heading2,
+            Title,
             {
               id: id ? `${id}-title` : void 0,
               testid: testid ? `${testid}-title` : void 0,
@@ -747,7 +749,8 @@ var Modal = ({
   customActions,
   headerClassname,
   customFooter,
-  noWrapper
+  noWrapper,
+  titleAs: TitleComponent
 }) => {
   var _a;
   const mounted = useMounted();
@@ -873,7 +876,8 @@ var Modal = ({
                   hideCloseIcon,
                   headerIcon,
                   headerIconAlign,
-                  headerClassname
+                  headerClassname,
+                  titleAs: TitleComponent
                 }
               ),
               children && (size !== "screen" || noWrapper) ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(