@dmsi/wedgekit-react 0.0.498 → 0.0.499

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

@@ -1,14 +1,14 @@
 import {
   RowDetailModalProvider
-} from "../../../chunk-4Q7T4GJ2.js";
+} from "../../../chunk-YD3HWIUJ.js";
 import "../../../chunk-3DEYCNUE.js";
 import "../../../chunk-5IFPG6TS.js";
 import "../../../chunk-AJ5M6MVX.js";
 import "../../../chunk-KW6V7O3H.js";
-import "../../../chunk-X67L3NZI.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-URYQ24NF.js";

package/dist/components/MobileDataGrid/index.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
     })
   );
 };
@@ -5359,8 +5365,10 @@ var ModalHeader = ({
   onClose,
   id,
   testid,
-  headerClassname
+  headerClassname,
+  titleAs: TitleComponent
 }) => {
+  const Title = TitleComponent || Heading2;
   return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
     "div",
     {
@@ -5379,7 +5387,7 @@ var ModalHeader = ({
         /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: (0, import_clsx30.default)("flex items-center flex-1", layoutGroupGap), children: [
           headerIcon,
           title && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-            Heading2,
+            Title,
             {
               id: id ? `${id}-title` : void 0,
               testid: testid ? `${testid}-title` : void 0,
@@ -5609,7 +5617,8 @@ var Modal = ({
   customActions,
   headerClassname,
   customFooter,
-  noWrapper
+  noWrapper,
+  titleAs: TitleComponent
 }) => {
   var _a;
   const mounted = useMounted();
@@ -5735,7 +5744,8 @@ var Modal = ({
                   hideCloseIcon,
                   headerIcon,
                   headerIconAlign,
-                  headerClassname
+                  headerClassname,
+                  titleAs: TitleComponent
                 }
               ),
               children && (size !== "screen" || noWrapper) ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(

package/dist/components/MobileDataGrid/index.js

@@ -1,13 +1,13 @@
 import {
   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 "../../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/Modal.cjs

@@ -443,8 +443,10 @@ var ModalHeader = ({
   onClose,
   id,
   testid,
-  headerClassname
+  headerClassname,
+  titleAs: TitleComponent
 }) => {
+  const Title = TitleComponent || Heading2;
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "div",
     {
@@ -463,7 +465,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,
@@ -746,7 +748,8 @@ var Modal = ({
   customActions,
   headerClassname,
   customFooter,
-  noWrapper
+  noWrapper,
+  titleAs: TitleComponent
 }) => {
   var _a;
   const mounted = useMounted();
@@ -872,7 +875,8 @@ var Modal = ({
                   hideCloseIcon,
                   headerIcon,
                   headerIconAlign,
-                  headerClassname
+                  headerClassname,
+                  titleAs: TitleComponent
                 }
               ),
               children && (size !== "screen" || noWrapper) ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(

package/dist/components/Modal.js

@@ -1,10 +1,10 @@
 "use client";
 import {
   Modal
-} from "../chunk-X67L3NZI.js";
+} from "../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-URYQ24NF.js";

package/dist/components/ModalHeader.cjs

@@ -440,8 +440,10 @@ var ModalHeader = ({
   onClose,
   id,
   testid,
-  headerClassname
+  headerClassname,
+  titleAs: TitleComponent
 }) => {
+  const Title = TitleComponent || Heading2;
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "div",
     {
@@ -460,7 +462,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,

package/dist/components/ModalHeader.js

@@ -1,6 +1,6 @@
 import {
   ModalHeader
-} from "../chunk-G7KIKHER.js";
+} from "../chunk-X4UK7HE2.js";
 import "../chunk-H2KC5XUY.js";
 import "../chunk-NKUETCDA.js";
 import "../chunk-LPY6PMAY.js";

package/dist/components/PDFViewer/index.cjs

@@ -446,8 +446,10 @@ var ModalHeader = ({
   onClose,
   id,
   testid,
-  headerClassname
+  headerClassname,
+  titleAs: TitleComponent
 }) => {
+  const Title = TitleComponent || Heading2;
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "div",
     {
@@ -466,7 +468,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,
@@ -749,7 +751,8 @@ var Modal = ({
   customActions,
   headerClassname,
   customFooter,
-  noWrapper
+  noWrapper,
+  titleAs: TitleComponent
 }) => {
   var _a;
   const mounted = useMounted();
@@ -875,7 +878,8 @@ var Modal = ({
                   hideCloseIcon,
                   headerIcon,
                   headerIconAlign,
-                  headerClassname
+                  headerClassname,
+                  titleAs: TitleComponent
                 }
               ),
               children && (size !== "screen" || noWrapper) ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(

package/dist/components/PDFViewer/index.js

@@ -1,15 +1,15 @@
 "use client";
 import {
   PDFViewer
-} from "../../chunk-3WCLGTYP.js";
+} from "../../chunk-4LBQSSGH.js";
 import "../../chunk-YEZBNQZI.js";
 import "../../chunk-B53XDCLO.js";
 import "../../chunk-S5ZJ3Q7P.js";
 import "../../chunk-JUFBGNWW.js";
-import "../../chunk-X67L3NZI.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-SBRRNFOP.js";

package/dist/components/Password.cjs

@@ -67,7 +67,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);
@@ -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,14 +780,14 @@ 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";
 Percentage.displayName = "Percentage";
 
 // src/components/Password.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var Password = (_a) => {
   var _b = _a, {
     id,
@@ -738,20 +797,20 @@ var Password = (_a) => {
     "testid"
   ]);
   const [show, setShow] = (0, import_react2.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     InputBase,
     __spreadProps(__spreadValues({
       id,
       testid
     }, props), {
       type: show ? "text" : "password",
-      after: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(WhichIcon, { id, testid, show, setShow })
+      after: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(WhichIcon, { id, testid, show, setShow })
     })
   );
 };
 var WhichIcon = ({ id, testid, show, setShow }) => {
   if (show) {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       Icon,
       {
         id: id ? `${id}-toggle-visibility` : void 0,
@@ -762,7 +821,7 @@ var WhichIcon = ({ id, testid, show, setShow }) => {
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     Icon,
     {
       id: id ? `${id}-toggle-visibility` : void 0,