@dmsi/wedgekit-react 0.0.498 → 0.0.500

package/dist/components/Time.cjs

@@ -66,7 +66,7 @@ var import_react2 = require("react");
 
 // 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);
@@ -317,14 +317,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,
@@ -348,6 +402,7 @@ var InputBase = (_a) => {
     "testid",
     "before",
     "after",
+    "rightAdornment",
     "type",
     "label",
     "error",
@@ -386,7 +441,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",
@@ -399,26 +454,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",
@@ -426,30 +481,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,
@@ -464,7 +519,7 @@ var InputBase = (_a) => {
             },
             children: [
               before,
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 "input",
                 __spreadProps(__spreadValues(__spreadValues({
                   ref: (el) => {
@@ -475,7 +530,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",
@@ -489,11 +544,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,
@@ -516,7 +572,8 @@ var Input = (_a) => {
     onBlur,
     onClear,
     id,
-    testid
+    testid,
+    rightAdornment
   } = _b, props = __objRest(_b, [
     "variant",
     "decimals",
@@ -527,7 +584,8 @@ var Input = (_a) => {
     "onBlur",
     "onClear",
     "id",
-    "testid"
+    "testid",
+    "rightAdornment"
   ]);
   const [internalValue, setInternalValue] = (0, import_react.useState)("");
   const [displayValue, setDisplayValue] = (0, import_react.useState)("");
@@ -549,7 +607,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), {
@@ -586,9 +644,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;
     }
@@ -598,7 +656,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,
@@ -610,11 +668,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;
     }
@@ -691,27 +749,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",
@@ -720,7 +779,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";
@@ -728,7 +787,7 @@ Percentage.displayName = "Percentage";
 
 // src/components/Time.tsx
 var import_react_dom = require("react-dom");
-var import_clsx6 = __toESM(require("clsx"), 1);
+var import_clsx7 = __toESM(require("clsx"), 1);
 
 // src/utils.ts
 function findDocumentRoot(element) {
@@ -754,9 +813,9 @@ function findDocumentRoot(element) {
 }
 
 // src/components/Stack.tsx
-var import_clsx5 = __toESM(require("clsx"), 1);
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var getFlexClassNames = ({ items, justify, grow }) => (0, import_clsx5.default)(
+var import_clsx6 = __toESM(require("clsx"), 1);
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var getFlexClassNames = ({ items, justify, grow }) => (0, import_clsx6.default)(
   "flex",
   items === "start" && "items-start",
   grow && "grow",
@@ -772,7 +831,7 @@ var getFlexClassNames = ({ items, justify, grow }) => (0, import_clsx5.default)(
   justify === "around" && "justify-around"
 );
 var useGapClassNames = (sizing) => {
-  return (0, import_clsx5.default)(
+  return (0, import_clsx6.default)(
     sizing === "layout-group" && "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-compact-layout-group-gap",
     sizing === "layout" && "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap",
     sizing === "container" && "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-compact-container-gap",
@@ -880,7 +939,7 @@ var Stack = (_a) => {
   var _a2, _b2, _c, _d, _e, _f, _g;
   const flexClassNames = getFlexClassNames({ items, justify, grow });
   const gapClassNames = useGapClassNames(sizing);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "div",
     __spreadProps(__spreadValues({
       id,
@@ -912,7 +971,7 @@ var Stack = (_a) => {
         paddingInline: (_f = props.style) == null ? void 0 : _f.paddingInline,
         gap: (_g = props.style) == null ? void 0 : _g.gap
       },
-      className: (0, import_clsx5.default)(
+      className: (0, import_clsx6.default)(
         "scrollbar-thin",
         "max-w-screen",
         width !== "fit" && "w-full",
@@ -974,7 +1033,7 @@ var Stack = (_a) => {
 };
 
 // src/components/Time.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var timePickerScrollableStyle = "overflow-auto max-h-full py-4 no-scrollbar";
 var Time = (_a) => {
   var _b = _a, { onChange, format = "12h", id, testid } = _b, props = __objRest(_b, ["onChange", "format", "id", "testid"]);
@@ -1182,7 +1241,7 @@ var Time = (_a) => {
   ]);
   const renderOptions = (items, type) => items.map((val) => {
     const isSelected = type === "hour" && val === hour || type === "minute" && val === minute || type === "meridiem" && val === meridiem;
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       TimeCell,
       {
         id: id ? `${id}-${type}-${val}` : void 0,
@@ -1192,14 +1251,14 @@ var Time = (_a) => {
           selectedRefs[type].current = el;
         } : null,
         onClick: () => handleSelect(type, val),
-        className: (0, import_clsx6.default)("!size-10 cursor-pointer", typography.caption),
+        className: (0, import_clsx7.default)("!size-10 cursor-pointer", typography.caption),
         children: val
       },
       val
     );
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "relative max-w-38", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "relative max-w-38", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       InputBase,
       __spreadProps(__spreadValues({}, props), {
         id,
@@ -1208,7 +1267,7 @@ var Time = (_a) => {
         inputContainerRef,
         value: inputValue,
         placeholder: is12HourFormat ? "hh:mm am" : "hh:mm",
-        after: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { name: "schedule" }) }),
+        after: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "schedule" }) }),
         onFocus: handleFocus,
         caption: props.caption,
         onChange: handleInputChange,
@@ -1217,7 +1276,7 @@ var Time = (_a) => {
       })
     ),
     showTimePicker && (0, import_react_dom.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         Stack,
         {
           id: id ? `${id}-timepicker` : void 0,
@@ -1233,22 +1292,22 @@ var Time = (_a) => {
           minWidth: timePosition.width,
           maxWidth: 0,
           rounded: true,
-          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { ref: timeRef, className: "px-4 flex h-60", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: (0, import_clsx6.default)(timePickerScrollableStyle), children: renderOptions(
+          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { ref: timeRef, className: "px-4 flex h-60", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: (0, import_clsx7.default)(timePickerScrollableStyle), children: renderOptions(
               Array.from(
                 { length: is12HourFormat ? 12 : 24 },
                 (_, i) => (i + (is12HourFormat ? 1 : 0)).toString().padStart(2, "0")
               ),
               "hour"
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: (0, import_clsx6.default)(timePickerScrollableStyle), children: renderOptions(
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: (0, import_clsx7.default)(timePickerScrollableStyle), children: renderOptions(
               Array.from(
                 { length: 12 },
                 (_, i) => (i * 5).toString().padStart(2, "0")
               ),
               "minute"
             ) }),
-            is12HourFormat && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "py-4", children: renderOptions(["AM", "PM"], "meridiem") })
+            is12HourFormat && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "py-4", children: renderOptions(["AM", "PM"], "meridiem") })
           ] })
         }
       ),
@@ -1290,7 +1349,7 @@ function TimeCell(_a) {
   ]);
   const isDefault = !selected && !start && !intermediate && !end && !today;
   const isToday = today && !selected && !start && !intermediate && !end;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "button",
     __spreadProps(__spreadValues({
       id,
@@ -1300,7 +1359,7 @@ function TimeCell(_a) {
       onKeyDown,
       disabled,
       ref,
-      className: (0, import_clsx6.default)(
+      className: (0, import_clsx7.default)(
         "w-full h-full aspect-square flex items-center justify-center ",
         isDefault && "text-neutral-500 hover:bg-action-100 hover:text-action-500 active:text-action-300 disabled:text-neutral-300 disabled:pointer-events-none rounded",
         isToday && "rounded-full border border-neutral-300 hover:bg-action-100 hover:text-action-500 active:text-action-300 disabled:text-neutral-300 ",

package/dist/components/Time.js

@@ -1,12 +1,13 @@
 import {
   InputBase
-} from "../chunk-44TH3VC7.js";
+} from "../chunk-G4AWTFBQ.js";
 import "../chunk-AL5QIRY3.js";
 import {
   findDocumentRoot
 } from "../chunk-VXWSAIB5.js";
 import "../chunk-R3EQIDBX.js";
 import "../chunk-5UH6QUFB.js";
+import "../chunk-ZSETMD4A.js";
 import {
   Stack
 } from "../chunk-DORD2EBO.js";

package/dist/components/index.cjs

@@ -1654,6 +1654,7 @@ var InputBase = (_a) => {
     testid,
     before,
     after,
+    rightAdornment,
     type,
     label,
     error,
@@ -1677,6 +1678,7 @@ var InputBase = (_a) => {
     "testid",
     "before",
     "after",
+    "rightAdornment",
     "type",
     "label",
     "error",
@@ -1818,7 +1820,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
             ]
           }
         ),
@@ -1845,7 +1848,8 @@ var Input = (_a) => {
     onBlur,
     onClear,
     id,
-    testid
+    testid,
+    rightAdornment
   } = _b, props = __objRest(_b, [
     "variant",
     "decimals",
@@ -1856,7 +1860,8 @@ var Input = (_a) => {
     "onBlur",
     "onClear",
     "id",
-    "testid"
+    "testid",
+    "rightAdornment"
   ]);
   const [internalValue, setInternalValue] = (0, import_react9.useState)("");
   const [displayValue, setDisplayValue] = (0, import_react9.useState)("");
@@ -1878,7 +1883,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), {
@@ -1941,7 +1946,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:
@@ -2027,7 +2032,8 @@ var Input = (_a) => {
       after: getAfterElement(),
       onChange: handleChange,
       onBlur: handleBlur,
-      testid
+      testid,
+      rightAdornment
     })
   );
 };
@@ -5760,8 +5766,10 @@ var ModalHeader = ({
   onClose,
   id,
   testid,
-  headerClassname
+  headerClassname,
+  titleAs: TitleComponent
 }) => {
+  const Title = TitleComponent || Heading2;
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
     "div",
     {
@@ -5780,7 +5788,7 @@ var ModalHeader = ({
         /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: (0, import_clsx25.default)("flex items-center flex-1", layoutGroupGap), children: [
           headerIcon,
           title && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-            Heading2,
+            Title,
             {
               id: id ? `${id}-title` : void 0,
               testid: testid ? `${testid}-title` : void 0,
@@ -6010,7 +6018,8 @@ var Modal = ({
   customActions,
   headerClassname,
   customFooter,
-  noWrapper
+  noWrapper,
+  titleAs: TitleComponent
 }) => {
   var _a;
   const mounted = useMounted();
@@ -6136,7 +6145,8 @@ var Modal = ({
                   hideCloseIcon,
                   headerIcon,
                   headerIconAlign,
-                  headerClassname
+                  headerClassname,
+                  titleAs: TitleComponent
                 }
               ),
               children && (size !== "screen" || noWrapper) ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(

package/dist/components/index.js

@@ -2,9 +2,9 @@ import {
   DataGrid,
   DateInput,
   MobileDataGrid
-} 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 {
   ProductImagePreview
@@ -15,7 +15,7 @@ import {
 } from "../chunk-Y5GD2FJA.js";
 import {
   PDFViewer
-} from "../chunk-3WCLGTYP.js";
+} from "../chunk-4LBQSSGH.js";
 import "../chunk-YEZBNQZI.js";
 import "../chunk-B53XDCLO.js";
 import "../chunk-S5ZJ3Q7P.js";
@@ -48,11 +48,11 @@ import {
 } from "../chunk-GRGDX7JC.js";
 import {
   Select
-} from "../chunk-HVNHTM3P.js";
-import "../chunk-X67L3NZI.js";
+} from "../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 {
@@ -66,7 +66,7 @@ import {
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "../chunk-ZKTHUXKS.js";
+} from "../chunk-HIKWIY5Q.js";
 import {
   Menu
 } from "../chunk-TCMOGTPB.js";
@@ -76,10 +76,10 @@ import {
 } from "../chunk-5R4C5F63.js";
 import {
   Search
-} from "../chunk-RQRR4FEF.js";
+} from "../chunk-5MLYAQQO.js";
 import {
   Input
-} from "../chunk-44TH3VC7.js";
+} from "../chunk-G4AWTFBQ.js";
 import {
   Label
 } from "../chunk-AL5QIRY3.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dmsi/wedgekit-react",
   "private": false,
-  "version": "0.0.498",
+  "version": "0.0.500",
   "type": "module",
   "scripts": {
     "build": "tsup",