@dmsi/wedgekit-react 0.0.498 → 0.0.499

package/dist/components/DateRangeInput.cjs

@@ -67,7 +67,7 @@ var import_react_dom5 = require("react-dom");
 
 // src/components/Input.tsx
 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);
@@ -318,14 +318,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,
@@ -349,6 +403,7 @@ var InputBase = (_a) => {
     "testid",
     "before",
     "after",
+    "rightAdornment",
     "type",
     "label",
     "error",
@@ -387,7 +442,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",
@@ -400,26 +455,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",
@@ -427,30 +482,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,
@@ -465,7 +520,7 @@ var InputBase = (_a) => {
             },
             children: [
               before,
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 "input",
                 __spreadProps(__spreadValues(__spreadValues({
                   ref: (el) => {
@@ -476,7 +531,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",
@@ -490,11 +545,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,
@@ -517,7 +573,8 @@ var Input = (_a) => {
     onBlur,
     onClear,
     id,
-    testid
+    testid,
+    rightAdornment
   } = _b, props = __objRest(_b, [
     "variant",
     "decimals",
@@ -528,7 +585,8 @@ var Input = (_a) => {
     "onBlur",
     "onClear",
     "id",
-    "testid"
+    "testid",
+    "rightAdornment"
   ]);
   const [internalValue, setInternalValue] = (0, import_react.useState)("");
   const [displayValue, setDisplayValue] = (0, import_react.useState)("");
@@ -550,7 +608,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), {
@@ -587,9 +645,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;
     }
@@ -599,7 +657,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,
@@ -611,11 +669,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;
     }
@@ -692,27 +750,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",
@@ -721,7 +780,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";
@@ -791,59 +850,6 @@ var import_react11 = require("react");
 var import_clsx7 = __toESM(require("clsx"), 1);
 var import_react7 = require("react");
 
-// src/components/Paragraph.tsx
-var import_clsx5 = __toESM(require("clsx"), 1);
-var import_jsx_runtime4 = 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_runtime4.jsx)(
-    Element,
-    __spreadProps(__spreadValues({
-      id,
-      "data-testid": testid
-    }, props), {
-      className: (0, import_clsx5.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/hooks/useKeydown.ts
 var import_react3 = require("react");
 
@@ -4600,8 +4606,10 @@ var ModalHeader = ({
   onClose,
   id,
   testid,
-  headerClassname
+  headerClassname,
+  titleAs: TitleComponent
 }) => {
+  const Title = TitleComponent || Heading2;
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
     "div",
     {
@@ -4620,7 +4628,7 @@ var ModalHeader = ({
         /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: (0, import_clsx24.default)("flex items-center flex-1", layoutGroupGap), children: [
           headerIcon,
           title && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-            Heading2,
+            Title,
             {
               id: id ? `${id}-title` : void 0,
               testid: testid ? `${testid}-title` : void 0,
@@ -4850,7 +4858,8 @@ var Modal = ({
   customActions,
   headerClassname,
   customFooter,
-  noWrapper
+  noWrapper,
+  titleAs: TitleComponent
 }) => {
   var _a;
   const mounted = useMounted();
@@ -4976,7 +4985,8 @@ var Modal = ({
                   hideCloseIcon,
                   headerIcon,
                   headerIconAlign,
-                  headerClassname
+                  headerClassname,
+                  titleAs: TitleComponent
                 }
               ),
               children && (size !== "screen" || noWrapper) ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(

package/dist/components/DateRangeInput.js

@@ -1,13 +1,13 @@
 import {
   CalendarRange
-} 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,25 +28,25 @@ 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-5MLYAQQO.js";
 import {
   InputBase
-} from "../chunk-44TH3VC7.js";
+} from "../chunk-G4AWTFBQ.js";
 import "../chunk-AL5QIRY3.js";
 import "../chunk-WVUIIBRR.js";
 import "../chunk-75USUR3I.js";

package/dist/components/FilterGroup.cjs

@@ -855,6 +855,7 @@ var InputBase = (_a) => {
     testid,
     before,
     after,
+    rightAdornment,
     type,
     label,
     error,
@@ -878,6 +879,7 @@ var InputBase = (_a) => {
     "testid",
     "before",
     "after",
+    "rightAdornment",
     "type",
     "label",
     "error",
@@ -1019,7 +1021,8 @@ var InputBase = (_a) => {
                   style: __spreadProps(__spreadValues({}, props.style), { width })
                 })
               ),
-              secondaryIconColor ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "contents text-text-secondary-normal", children: after }) : after
+              secondaryIconColor ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "contents text-text-secondary-normal", children: after }) : after,
+              rightAdornment
             ]
           }
         ),
@@ -1046,7 +1049,8 @@ var Input = (_a) => {
     onBlur,
     onClear,
     id,
-    testid
+    testid,
+    rightAdornment
   } = _b, props = __objRest(_b, [
     "variant",
     "decimals",
@@ -1057,7 +1061,8 @@ var Input = (_a) => {
     "onBlur",
     "onClear",
     "id",
-    "testid"
+    "testid",
+    "rightAdornment"
   ]);
   const [internalValue, setInternalValue] = (0, import_react.useState)("");
   const [displayValue, setDisplayValue] = (0, import_react.useState)("");
@@ -1079,7 +1084,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), {
@@ -1142,7 +1147,7 @@ var Input = (_a) => {
       case "finder":
         return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { name: "search" });
       case "uom":
-        return uom ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-text-secondary-normal uppercase", children: uom.slice(0, 4) }) : null;
+        return uom ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Paragraph, { color: "text-secondary-normal", children: uom.toUpperCase() }) : null;
       case "percentage":
         return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { name: "percent" }) });
       default:
@@ -1228,7 +1233,8 @@ var Input = (_a) => {
       after: getAfterElement(),
       onChange: handleChange,
       onBlur: handleBlur,
-      testid
+      testid,
+      rightAdornment
     })
   );
 };

package/dist/components/FilterGroup.js

@@ -4,8 +4,8 @@ import {
 } from "../chunk-2F3R3WXW.js";
 import {
   Search
-} from "../chunk-RQRR4FEF.js";
-import "../chunk-44TH3VC7.js";
+} from "../chunk-5MLYAQQO.js";
+import "../chunk-G4AWTFBQ.js";
 import {
   Label
 } from "../chunk-AL5QIRY3.js";