@dmsi/wedgekit-react 0.0.5 → 0.0.7

package/dist/components/ModalContent.cjs

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/components/ModalContent.tsx
@@ -23,9 +33,22 @@ __export(ModalContent_exports, {
   ModalContent: () => ModalContent
 });
 module.exports = __toCommonJS(ModalContent_exports);
+var import_clsx = __toESM(require("clsx"), 1);
 var import_jsx_runtime = require("react/jsx-runtime");
-function ModalContent({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "p-4", children });
+function ModalContent({
+  fixedHeightScrolling,
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: (0, import_clsx.default)(
+        "flex-grow desktop:flex-grow-0 p-4",
+        fixedHeightScrolling && "overflow-auto"
+      ),
+      children
+    }
+  );
 }
 ModalContent.displayName = "ModalContent";
 // Annotate the CommonJS export names for ESM import in node:

package/dist/components/ModalContent.js

@@ -1,6 +1,6 @@
 import {
   ModalContent
-} from "../chunk-I7LXSGQA.js";
+} from "../chunk-Q3FKEKIN.js";
 import "../chunk-ORMEWXMH.js";
 export {
   ModalContent

package/dist/components/ModalHeader.cjs

@@ -397,10 +397,18 @@ function Icon(_a) {
 
 // src/components/ModalHeader.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var ModalHeader = ({ title, onClose }) => {
+var ModalHeader = ({
+  title,
+  hideCloseIcon,
+  headerIcon,
+  onClose
+}) => {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex justify-between items-center p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-desktop-compact-container-gap", children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Heading2, { as: "p", children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-2", children: [
+      headerIcon,
+      title && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Heading2, { as: "p", children: title })
+    ] }),
+    !hideCloseIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       Button,
       {
         iconOnly: true,

package/dist/components/ModalHeader.js

@@ -1,6 +1,6 @@
 import {
   ModalHeader
-} from "../chunk-SPQH4CSJ.js";
+} from "../chunk-XUIPGYP5.js";
 import "../chunk-TYI74BSP.js";
 import "../chunk-KENSVWOY.js";
 import "../chunk-IGQVA7SC.js";

package/dist/components/ModalScrim.cjs

@@ -37,24 +37,23 @@ var import_clsx = __toESM(require("clsx"), 1);
 var import_jsx_runtime = require("react/jsx-runtime");
 var ModalScrim = ({
   show = false,
+  size = "small",
   children,
   onClick,
   ref
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
       className: (0, import_clsx.default)(
-        "transition-[visibility,opacity,background] ease-in-out duration-100 grid place-content-center p-4 group bg-neutral-600/50 fixed opacity-0",
+        "overflow-y-auto h-screen transition-[visibility,opacity,background] ease-in-out duration-100 grid place-content-center desktop:p-4 group bg-neutral-600/50 fixed opacity-0",
         !show && " pointer-events-none",
+        size === "small" && "p-4",
         "inset-0 z-50"
       ),
       onMouseDown: onClick,
       ref,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { children: show }),
-        children
-      ]
+      children
     }
   );
 };

package/dist/components/ModalScrim.js

@@ -1,6 +1,6 @@
 import {
   ModalScrim
-} from "../chunk-C7S6DKZ6.js";
+} from "../chunk-TU55CHXU.js";
 import "../chunk-ORMEWXMH.js";
 export {
   ModalScrim

package/dist/components/Notification.cjs

@@ -63,7 +63,7 @@ __export(Notification_exports, {
   Notification: () => Notification
 });
 module.exports = __toCommonJS(Notification_exports);
-var import_clsx6 = __toESM(require("clsx"), 1);
+var import_clsx7 = __toESM(require("clsx"), 1);
 var import_react = require("react");
 
 // src/components/Button.tsx
@@ -444,24 +444,125 @@ function Icon(_a) {
   );
 }
 
-// src/components/Notification.tsx
+// src/components/Stack.tsx
+var import_clsx6 = __toESM(require("clsx"), 1);
 var import_jsx_runtime5 = require("react/jsx-runtime");
+var useFlexClassNames = ({ items, justify, grow }) => (0, import_clsx6.default)(
+  "flex",
+  items === "start" && "items-start",
+  grow && "grow",
+  items === "start" && "items-start",
+  items === "center" && "items-center",
+  items === "end" && "items-end",
+  items === "start-center" && "items-start desktop:items-center",
+  justify === "start" && "justify-start",
+  justify === "center" && "justify-center",
+  justify === "end" && "justify-end",
+  justify === "end" && "justify-end",
+  justify === "between" && "justify-between",
+  justify === "around" && "justify-around"
+);
+var Stack = ({
+  children,
+  items,
+  justify,
+  grow,
+  padding,
+  paddingX,
+  horizontal,
+  horizontalMobile,
+  elevation = 0,
+  rounded,
+  centered,
+  width,
+  maxWidth,
+  minWidth,
+  height,
+  maxHeight,
+  borderColor,
+  backgroundColor,
+  sizing = "none",
+  overflowY = "inherit",
+  overflowX = "inherit",
+  flexShrink,
+  flexGrow,
+  position,
+  top,
+  left
+}) => {
+  const flexClassNames = useFlexClassNames({ items, justify, grow });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "div",
+    {
+      style: {
+        height: height === "full" ? "100%" : height !== void 0 ? `${height}px` : void 0,
+        maxHeight: maxHeight !== void 0 ? `${maxHeight}px` : void 0,
+        maxWidth: maxWidth !== void 0 ? `${maxWidth}px` : void 0,
+        width: width !== void 0 && typeof width === "number" ? `${width}px` : void 0,
+        minWidth: minWidth !== void 0 ? `${minWidth}px` : void 0,
+        border: borderColor ? `1px solid var(--color-${borderColor})` : void 0,
+        backgroundColor: backgroundColor ? `var(--color-${backgroundColor})` : void 0,
+        flexGrow: flexGrow !== void 0 ? flexGrow : void 0,
+        flexShrink: flexShrink !== void 0 ? flexShrink : void 0,
+        position: position !== void 0 ? position : void 0,
+        top: top !== void 0 ? `${top}px` : void 0,
+        left: left !== void 0 ? `${left}px` : void 0
+      },
+      className: (0, import_clsx6.default)(
+        "scrollbar-thin",
+        width !== "fit" && "w-full",
+        width === "full" && "w-full",
+        centered && "mx-auto",
+        overflowY == "auto" && "overflow-y-auto",
+        overflowY == "hidden" && "overflow-y-hidden",
+        overflowY == "scroll" && "overflow-y-scroll",
+        overflowX == "auto" && "overflow-x-auto",
+        overflowX == "hidden" && "overflow-x-hidden",
+        overflowX == "scroll" && "overflow-x-scroll",
+        padding && sizing === "container" && "p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding",
+        padding && sizing === "layout" && "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding",
+        padding && sizing === "layout-group" && "p-mobile-layout-group-padding desktop:p-desktop-layout-group-padding compact:p-desktop-compact-layout-group-padding",
+        padding && sizing === "component" && "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding",
+        paddingX && sizing === "container" && "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding",
+        paddingX && sizing === "layout" && "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding",
+        paddingX && sizing === "layout-group" && "px-mobile-layout-group-padding desktop:px-desktop-layout-group-padding compact:px-desktop-compact-layout-group-padding",
+        paddingX && sizing === "component" && "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding",
+        horizontal ? "desktop:flex-row" : "desktop:flex-col",
+        horizontalMobile ? "flex-row" : "flex-col",
+        flexClassNames,
+        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",
+        sizing === "component" && "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-compact-component-gap",
+        elevation === 0 && "shadow-none",
+        elevation === 2 && "shadow-2",
+        elevation === 4 && "shadow-4",
+        elevation === 16 && "shadow-16",
+        rounded && "rounded"
+      ),
+      children
+    }
+  );
+};
+
+// src/components/Notification.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var variants = {
   success: {
     className: "border-success-400",
-    icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-icon-success-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { name: "check_circle", size: 24 }) })
+    icon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-icon-success-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "check_circle", size: 24 }) })
   },
   warning: {
     className: "border-warning-400",
-    icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-icon-warning-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { name: "warning", size: 24 }) })
+    icon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-icon-warning-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "warning", size: 24 }) })
   },
   error: {
     className: "border-critical-400",
-    icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-icon-critical-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { name: "error", size: 24 }) })
+    icon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-icon-critical-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "error", size: 24 }) })
   },
   info: {
     className: "border-action-400",
-    icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-icon-on-action-secondary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { name: "info", size: 24 }) })
+    icon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-icon-on-action-secondary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "info", size: 24 }) })
   }
 };
 var Notification = (_a) => {
@@ -469,53 +570,63 @@ var Notification = (_a) => {
     variant = "success",
     title,
     message,
-    removeMessage = false,
+    enableMessage = true,
     description,
-    removeDescription = false,
+    enableDescription = false,
     disclaimer,
-    removeDisclaimer = false,
+    enableDisclaimer = false,
     card = false
   } = _b, props = __objRest(_b, [
     "variant",
     "title",
     "message",
-    "removeMessage",
+    "enableMessage",
     "description",
-    "removeDescription",
+    "enableDescription",
     "disclaimer",
-    "removeDisclaimer",
+    "enableDisclaimer",
     "card"
   ]);
   var _a2;
   const [visible, setVisible] = (0, import_react.useState)(true);
   const { className, icon: iconElement } = (_a2 = variants[variant]) != null ? _a2 : variants.success;
   if (!visible) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
     __spreadProps(__spreadValues({
-      className: (0, import_clsx6.default)(
-        "flex gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-desktop-compact-layout-gap justify-between items-center border-2 rounded-sm w-full p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding bg-white",
+      className: (0, import_clsx7.default)(
+        "flex gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-desktop-compact-layout-gap justify-between items-center border-2 rounded-sm w-full p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding bg-white max-w-240",
         className,
         card && "shadow-4"
       )
     }, props), {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-desktop-compact-layout-gap", children: [
-          iconElement,
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-desktop-compact-component-gap", children: [
-            title && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { as: "h3", children: title }),
-            message && !removeMessage && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Paragraph, { as: "p", children: message }),
-            description && !removeDescription && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Paragraph, { as: "p", children: description }),
-            disclaimer && !removeDisclaimer && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Paragraph, { as: "p", children: disclaimer })
-          ] })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+          Stack,
+          {
+            horizontal: true,
+            horizontalMobile: true,
+            items: "start",
+            justify: "start",
+            sizing: "layout",
+            children: [
+              iconElement,
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Stack, { elevation: 0, items: "start", justify: "start", sizing: "component", children: [
+                title && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Heading3, { as: "h3", children: title }),
+                message && enableMessage && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Paragraph, { as: "p", children: message }),
+                description && enableDescription && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Paragraph, { as: "p", children: description }),
+                disclaimer && enableDisclaimer && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Paragraph, { as: "p", children: disclaimer })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           Button,
           {
             iconOnly: true,
             variant: "tertiary",
             onClick: () => setVisible(false),
-            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { name: "close", size: 24 })
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "close", size: 24 })
           }
         )
       ]

package/dist/components/Notification.js

@@ -1,4 +1,7 @@
 "use client";
+import {
+  Stack
+} from "../chunk-U42SKNR6.js";
 import {
   Heading3
 } from "../chunk-TYI74BSP.js";
@@ -45,21 +48,21 @@ var Notification = (_a) => {
     variant = "success",
     title,
     message,
-    removeMessage = false,
+    enableMessage = true,
     description,
-    removeDescription = false,
+    enableDescription = false,
     disclaimer,
-    removeDisclaimer = false,
+    enableDisclaimer = false,
     card = false
   } = _b, props = __objRest(_b, [
     "variant",
     "title",
     "message",
-    "removeMessage",
+    "enableMessage",
     "description",
-    "removeDescription",
+    "enableDescription",
     "disclaimer",
-    "removeDisclaimer",
+    "enableDisclaimer",
     "card"
   ]);
   var _a2;
@@ -70,21 +73,31 @@ var Notification = (_a) => {
     "div",
     __spreadProps(__spreadValues({
       className: clsx(
-        "flex gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-desktop-compact-layout-gap justify-between items-center border-2 rounded-sm w-full p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding bg-white",
+        "flex gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-desktop-compact-layout-gap justify-between items-center border-2 rounded-sm w-full p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding bg-white max-w-240",
         className,
         card && "shadow-4"
       )
     }, props), {
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-desktop-compact-layout-gap", children: [
-          iconElement,
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-desktop-compact-component-gap", children: [
-            title && /* @__PURE__ */ jsx(Heading3, { as: "h3", children: title }),
-            message && !removeMessage && /* @__PURE__ */ jsx(Paragraph, { as: "p", children: message }),
-            description && !removeDescription && /* @__PURE__ */ jsx(Paragraph, { as: "p", children: description }),
-            disclaimer && !removeDisclaimer && /* @__PURE__ */ jsx(Paragraph, { as: "p", children: disclaimer })
-          ] })
-        ] }),
+        /* @__PURE__ */ jsxs(
+          Stack,
+          {
+            horizontal: true,
+            horizontalMobile: true,
+            items: "start",
+            justify: "start",
+            sizing: "layout",
+            children: [
+              iconElement,
+              /* @__PURE__ */ jsxs(Stack, { elevation: 0, items: "start", justify: "start", sizing: "component", children: [
+                title && /* @__PURE__ */ jsx(Heading3, { as: "h3", children: title }),
+                message && enableMessage && /* @__PURE__ */ jsx(Paragraph, { as: "p", children: message }),
+                description && enableDescription && /* @__PURE__ */ jsx(Paragraph, { as: "p", children: description }),
+                disclaimer && enableDisclaimer && /* @__PURE__ */ jsx(Paragraph, { as: "p", children: disclaimer })
+              ] })
+            ]
+          }
+        ),
         /* @__PURE__ */ jsx(
           Button,
           {

package/dist/components/Password.cjs

@@ -486,7 +486,9 @@ var Input = (_a) => {
   }, [propValue, decimals, variant]);
   const getInputProps = () => {
     var _a2;
-    const baseProps = __spreadValues(__spreadValues({}, props), getDecimalPlaceholder(decimals));
+    const baseProps = __spreadProps(__spreadValues(__spreadValues({}, props), getDecimalPlaceholder(decimals)), {
+      value: propValue
+    });
     switch (variant) {
       case "search":
         return __spreadProps(__spreadValues({}, baseProps), {
@@ -540,7 +542,7 @@ var Input = (_a) => {
       case "finder":
         return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { name: "search" });
       case "uom":
-        return uom ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-text-secondary-normal uppercase", children: uom }) : null;
+        return uom ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-text-secondary-normal uppercase", children: uom.slice(0, 4) }) : 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" }) });
       default:

package/dist/components/Password.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   InputBase
-} from "../chunk-UGXT677T.js";
+} from "../chunk-BWRHL2AG.js";
 import "../chunk-4C66DLIJ.js";
 import {
   Icon

package/dist/components/Search.cjs

@@ -486,7 +486,9 @@ var Input = (_a) => {
   }, [propValue, decimals, variant]);
   const getInputProps = () => {
     var _a2;
-    const baseProps = __spreadValues(__spreadValues({}, props), getDecimalPlaceholder(decimals));
+    const baseProps = __spreadProps(__spreadValues(__spreadValues({}, props), getDecimalPlaceholder(decimals)), {
+      value: propValue
+    });
     switch (variant) {
       case "search":
         return __spreadProps(__spreadValues({}, baseProps), {
@@ -540,7 +542,7 @@ var Input = (_a) => {
       case "finder":
         return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { name: "search" });
       case "uom":
-        return uom ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-text-secondary-normal uppercase", children: uom }) : null;
+        return uom ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-text-secondary-normal uppercase", children: uom.slice(0, 4) }) : 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" }) });
       default:

package/dist/components/Search.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   Search
-} from "../chunk-TBHTISFW.js";
-import "../chunk-UGXT677T.js";
+} from "../chunk-GTCSRHPF.js";
+import "../chunk-BWRHL2AG.js";
 import "../chunk-4C66DLIJ.js";
 import "../chunk-IGQVA7SC.js";
 import "../chunk-KX3O6GJ6.js";

package/dist/components/Select.cjs

@@ -486,7 +486,9 @@ var Input = (_a) => {
   }, [propValue, decimals, variant]);
   const getInputProps = () => {
     var _a2;
-    const baseProps = __spreadValues(__spreadValues({}, props), getDecimalPlaceholder(decimals));
+    const baseProps = __spreadProps(__spreadValues(__spreadValues({}, props), getDecimalPlaceholder(decimals)), {
+      value: propValue
+    });
     switch (variant) {
       case "search":
         return __spreadProps(__spreadValues({}, baseProps), {
@@ -540,7 +542,7 @@ var Input = (_a) => {
       case "finder":
         return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { name: "search" });
       case "uom":
-        return uom ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-text-secondary-normal uppercase", children: uom }) : null;
+        return uom ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-text-secondary-normal uppercase", children: uom.slice(0, 4) }) : 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" }) });
       default:
@@ -671,7 +673,9 @@ var Select = (_a) => {
     onClick,
     className,
     wrapperClassName,
-    removeRoundness
+    removeRoundness,
+    displayValue,
+    value
   } = _b, props = __objRest(_b, [
     "label",
     "error",
@@ -681,7 +685,9 @@ var Select = (_a) => {
     "onClick",
     "className",
     "wrapperClassName",
-    "removeRoundness"
+    "removeRoundness",
+    "displayValue",
+    "value"
   ]);
   const inputRef = (0, import_react2.useRef)(null);
   const inputContainerRef = (0, import_react2.useRef)(null);
@@ -694,11 +700,11 @@ var Select = (_a) => {
       return;
     }
     (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
-  }, [props.value]);
+  }, [value]);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       InputBase,
-      __spreadValues({
+      __spreadProps(__spreadValues({
         inputContainerRef,
         ref: inputRef,
         label,
@@ -733,7 +739,9 @@ var Select = (_a) => {
         readOnly,
         removeRoundness,
         focus: show
-      }, props)
+      }, props), {
+        value: displayValue != null ? displayValue : value
+      })
     ),
     renderMenu ? renderMenu({
       positionTo: inputContainerRef,

package/dist/components/Select.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   Select
-} from "../chunk-UEN5BURK.js";
-import "../chunk-UGXT677T.js";
+} from "../chunk-TRUPPHBQ.js";
+import "../chunk-BWRHL2AG.js";
 import "../chunk-4C66DLIJ.js";
 import "../chunk-IGQVA7SC.js";
 import "../chunk-KX3O6GJ6.js";