@oliasoft-open-source/react-ui-library 4.7.0-beta-1 → 4.7.0-beta-3

package/dist/index.js

@@ -10,9 +10,8 @@ import React__default, { useContext, isValidElement, useState, useRef, useEffect
 import * as PropTypes from "prop-types";
 import PropTypes__default from "prop-types";
 import ReactDOM, { createPortal, unstable_batchedUpdates, render } from "react-dom";
-import _$1, { set, get as get$2, isString as isString$3, isNumber as isNumber$1, isBoolean as isBoolean$2, isFunction as isFunction$3, isEmpty, isArray as isArray$1, toNumber, debounce as debounce$2, isObject as isObject$5, isObjectLike, has as has$1, isEqual as isEqual$4 } from "lodash";
-import { validateNumber, cleanNumStr, unitFromQuantity, isValueWithUnit, withUnit, convertSamePrecision, getValue as getValue$1, getUnit, KNOWN_UNITS, split as split$1, checkAndCleanDecimalComma, label as label$b, altUnitsList, getUnitsForQuantity, convertAndGetValue, roundToPrecision } from "@oliasoft-open-source/units";
-import { isValueWithUnit as isValueWithUnit$1 } from "@oliasoft-open-source/units/dist/units";
+import _$1, { set, get as get$2, isString as isString$3, isNumber as isNumber$1, isBoolean as isBoolean$2, isFunction as isFunction$3, isEmpty, isArray as isArray$1, toNumber, debounce as debounce$2, isObject as isObject$5, isEqual as isEqual$4 } from "lodash";
+import { isScientificStringNum, roundToPrecision, roundToFixed, validateNumber, cleanNumStr, unitFromQuantity, isValueWithUnit, withUnit, convertSamePrecision, getValue as getValue$1, getUnit, KNOWN_UNITS, split as split$1, label as label$b, altUnitsList, convertAndGetValue, getUnitsForQuantity, roundByMagnitudeToFixed } from "@oliasoft-open-source/units";
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 function getDefaultExportFromCjs(x2) {
   return x2 && x2.__esModule && Object.prototype.hasOwnProperty.call(x2, "default") ? x2["default"] : x2;
@@ -3803,7 +3802,7 @@ const Tooltip = ({
   ],
   enabled = true,
   warning: warning2 = false,
-  maxWidth = "none",
+  maxWidth = "40em",
   triggerOffset = 12,
   fontSize = "inherit",
   padding: padding2 = "var(--padding-xxs) var(--padding-xs)",
@@ -3811,7 +3810,7 @@ const Tooltip = ({
   flex = "none",
   forceOpen = false
 }) => {
-  const visible = enabled && (isValidElement(text2) || typeof text2 === "string" && text2.length > 0);
+  const visible = enabled && (isValidElement(text2) || typeof text2 === "string" && text2.length > 0 || typeof text2 === "number");
   const [isOver, hoverProps, forceClose] = useHover({
     delayEnter: 100,
     delayLeave: 0
@@ -4133,8 +4132,10 @@ const Button$1 = ({
   warning: warning2,
   testId,
   tooltip: tooltip2,
-  inverted: inverted2 = false
+  inverted: inverted2 = false,
   // *Deprecated*
+  component: Component2 = "button",
+  url
 }) => {
   const disabledContext = useContext(DisabledContext);
   const color2 = (() => {
@@ -4168,7 +4169,7 @@ const Button$1 = ({
     return "";
   })();
   return /* @__PURE__ */ jsx(ButtonTooltipWrapper, { tooltip: tooltip2, children: /* @__PURE__ */ jsxs(
-    "button",
+    Component2,
     {
       type: type === ButtonType.SUBMIT ? ButtonType.SUBMIT : ButtonType.BUTTON,
       className: cx$2(
@@ -4192,6 +4193,7 @@ const Button$1 = ({
       ...title2 ? { title: title2 } : {},
       style: { width: width2 },
       "data-testid": testId,
+      to: url,
       children: [
         icon2 && /* @__PURE__ */ jsx("span", { className: buttonStyles.icon, children: /* @__PURE__ */ jsx(Icon, { icon: icon2 }) }),
         loading && /* @__PURE__ */ jsx("span", { className: buttonStyles.icon, children: /* @__PURE__ */ jsx(
@@ -4208,42 +4210,44 @@ const Button$1 = ({
     }
   ) });
 };
-const actions$2 = "_actions_1nid8_1";
-const actionComponentContainer = "_actionComponentContainer_1nid8_11";
-const active$7 = "_active_1nid8_33";
+const actions$2 = "_actions_1t7vd_1";
+const childComponent = "_childComponent_1t7vd_11";
+const actionComponentContainer = "_actionComponentContainer_1t7vd_14";
+const active$7 = "_active_1t7vd_36";
 const styles$M = {
   actions: actions$2,
+  childComponent,
   actionComponentContainer,
   active: active$7
 };
-const wrapper$4 = "_wrapper_uioq1_1";
-const layer$1 = "_layer_uioq1_5";
-const layerContainer$1 = "_layerContainer_uioq1_8";
-const nested = "_nested_uioq1_23";
-const fileInput$1 = "_fileInput_uioq1_35";
-const trigger$2 = "_trigger_uioq1_40";
-const middleAlignedInline = "_middleAlignedInline_uioq1_49";
-const heading$5 = "_heading_uioq1_55";
-const headingIcon = "_headingIcon_uioq1_61";
-const option$1 = "_option_uioq1_73";
-const active$6 = "_active_uioq1_92";
-const selected$1 = "_selected_uioq1_97";
-const optionContent$1 = "_optionContent_uioq1_103";
-const inline$4 = "_inline_uioq1_107";
-const icon$4 = "_icon_uioq1_112";
-const check$1 = "_check_uioq1_113";
-const text$3 = "_text_uioq1_135";
-const label$a = "_label_uioq1_140";
-const description = "_description_uioq1_151";
-const arrow$1 = "_arrow_uioq1_155";
-const divider$1 = "_divider_uioq1_159";
-const deprecatedSemanticIcon = "_deprecatedSemanticIcon_uioq1_163";
-const disabled$8 = "_disabled_uioq1_167";
-const buttonLabel = "_buttonLabel_uioq1_172";
-const buttonCaret = "_buttonCaret_uioq1_178";
-const component = "_component_uioq1_182";
-const right$7 = "_right_uioq1_188";
-const actions$1 = "_actions_uioq1_193";
+const wrapper$4 = "_wrapper_1iw97_1";
+const layer$1 = "_layer_1iw97_5";
+const layerContainer$1 = "_layerContainer_1iw97_8";
+const nested = "_nested_1iw97_24";
+const fileInput$1 = "_fileInput_1iw97_36";
+const trigger$2 = "_trigger_1iw97_41";
+const middleAlignedInline = "_middleAlignedInline_1iw97_50";
+const heading$5 = "_heading_1iw97_56";
+const headingIcon = "_headingIcon_1iw97_62";
+const option$1 = "_option_1iw97_74";
+const active$6 = "_active_1iw97_93";
+const selected$1 = "_selected_1iw97_98";
+const optionContent$1 = "_optionContent_1iw97_104";
+const inline$4 = "_inline_1iw97_108";
+const icon$4 = "_icon_1iw97_113";
+const check$1 = "_check_1iw97_114";
+const text$3 = "_text_1iw97_136";
+const label$a = "_label_1iw97_141";
+const description = "_description_1iw97_152";
+const arrow$1 = "_arrow_1iw97_156";
+const divider$1 = "_divider_1iw97_160";
+const deprecatedSemanticIcon = "_deprecatedSemanticIcon_1iw97_164";
+const disabled$8 = "_disabled_1iw97_168";
+const buttonLabel = "_buttonLabel_1iw97_173";
+const buttonCaret = "_buttonCaret_1iw97_179";
+const component = "_component_1iw97_183";
+const right$7 = "_right_1iw97_189";
+const actions$1 = "_actions_1iw97_194";
 const styles$L = {
   wrapper: wrapper$4,
   layer: layer$1,
@@ -4302,7 +4306,8 @@ const Option$2 = ({
   title: title2,
   upload,
   onChange,
-  testId
+  testId,
+  component: Component2 = "a"
 }) => {
   const handleClick2 = (evt) => {
     evt.stopPropagation();
@@ -4318,9 +4323,10 @@ const Option$2 = ({
     onClick == null ? void 0 : onClick(evt);
   };
   return /* @__PURE__ */ jsxs(
-    "a",
+    Component2,
     {
       href: url,
+      to: url,
       className: cx$2(
         styles$L.option,
         disabled2 ? styles$L.disabled : "",
@@ -4406,7 +4412,8 @@ const Section$1 = ({
           title: section2.title,
           upload: section2.upload,
           onChange: section2.onChange,
-          testId: section2.testId
+          testId: section2.testId,
+          component: section2.component
         }
       );
     case MenuType.MENU:
@@ -4827,7 +4834,7 @@ const ContextMenu = ({
     path,
     groupOrder,
     overflowContainer: true,
-    maxHeight: "40vh",
+    maxHeight: void 0,
     testId
   });
   const isDisabled = disabled2 || isMenuEmpty(menu2) || disabledContext;
@@ -5023,7 +5030,15 @@ const Actions = (props) => {
     const hidden2 = (action2 == null ? void 0 : action2.hidden) || !action2 || !Object.keys(action2).length;
     if (!hidden2) {
       if (action2.childComponent && React__default.isValidElement(action2.childComponent)) {
-        return /* @__PURE__ */ jsx("div", { "data-testid": action2.testId, children: action2.childComponent }, index2);
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-testid": action2.testId,
+            className: styles$M.childComponent,
+            children: action2.childComponent
+          },
+          index2
+        );
       } else if (action2.subActions) {
         return /* @__PURE__ */ jsx(
           SubmenuActions,
@@ -9062,6 +9077,47 @@ const Empty = ({
     }
   );
 };
+const FileButton = ({
+  file,
+  accept,
+  multi,
+  name: name2,
+  disabled: disabled2,
+  onChange = () => {
+  },
+  ...buttonProps
+}) => {
+  const disabledContext = useContext(DisabledContext);
+  const inputRef = useRef(null);
+  const handleClick2 = () => {
+    var _a;
+    if (!(disabled2 || disabledContext))
+      (_a = inputRef.current) == null ? void 0 : _a.click();
+  };
+  const handleChange = (evt) => {
+    var _a;
+    const files = multi ? evt.target.files : (_a = evt.target.files) == null ? void 0 : _a[0];
+    onChange({ ...evt, target: { ...evt.target, value: files } });
+    if (inputRef.current) {
+      inputRef.current.value = "";
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    /* @__PURE__ */ jsx(Button$1, { ...buttonProps, onClick: handleClick2 }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        name: name2,
+        ref: inputRef,
+        style: { display: "none" },
+        type: "file",
+        accept,
+        multiple: multi,
+        onChange: handleChange
+      }
+    )
+  ] });
+};
 const inputGroup = "_inputGroup_biuoa_1";
 const styles$A = {
   inputGroup
@@ -9281,6 +9337,14 @@ const FileInput = ({
     if (!(disabled2 || disabledContext))
       (_a = inputRef.current) == null ? void 0 : _a.click();
   };
+  const handleChange = (evt) => {
+    var _a, _b, _c;
+    const files = multi ? (_a = evt == null ? void 0 : evt.target) == null ? void 0 : _a.files : (_c = (_b = evt == null ? void 0 : evt.target) == null ? void 0 : _b.files) == null ? void 0 : _c[0];
+    onChange({ ...evt, target: { ...evt.target, value: files } });
+    if (inputRef.current) {
+      inputRef.current.value = "";
+    }
+  };
   return /* @__PURE__ */ jsxs("div", { onClick: handleClick2, style: { width: width2 }, children: [
     /* @__PURE__ */ jsxs(InputGroup, { children: [
       /* @__PURE__ */ jsx(Input$1, { value: fileName || "", placeholder: placeholder3, disabled: true }),
@@ -9303,16 +9367,7 @@ const FileInput = ({
         type: "file",
         accept,
         multiple: multi,
-        onChange: (evt) => {
-          var _a, _b, _c;
-          onChange({
-            ...evt,
-            target: {
-              ...evt.target,
-              value: multi ? (_a = evt == null ? void 0 : evt.target) == null ? void 0 : _a.files : (_c = (_b = evt == null ? void 0 : evt.target) == null ? void 0 : _b.files) == null ? void 0 : _c[0]
-            }
-          });
-        },
+        onChange: handleChange,
         "data-testid": testId
       }
     )
@@ -15423,7 +15478,7 @@ var getStyles = function getStyles2(rules2, property) {
     return rule.selector + " { " + value + " }";
   }).join(" ");
 };
-var noPointerEvents = "pointer-events: none;";
+var noPointerEvents$1 = "pointer-events: none;";
 var getStyles$1 = function(contextId) {
   var getSelector2 = makeGetSelector(contextId);
   var dragHandle$1 = function() {
@@ -15433,7 +15488,7 @@ var getStyles$1 = function(contextId) {
       styles: {
         always: "\n          -webkit-touch-callout: none;\n          -webkit-tap-highlight-color: rgba(0,0,0,0);\n          touch-action: manipulation;\n        ",
         resting: grabCursor,
-        dragging: noPointerEvents,
+        dragging: noPointerEvents$1,
         dropAnimating: grabCursor
       }
     };
@@ -18784,44 +18839,45 @@ var InfiniteScroll = (
     return InfiniteScroll2;
   }(Component$1)
 );
-const inputInTable$8 = "_inputInTable_j55lv_1";
-const inputHover$8 = "_inputHover_j55lv_13";
-const inputFocus$8 = "_inputFocus_j55lv_18";
-const inputError$8 = "_inputError_j55lv_25";
-const inputWarning$8 = "_inputWarning_j55lv_26";
-const inputDisabled$8 = "_inputDisabled_j55lv_61";
-const hideScrollbars$8 = "_hideScrollbars_j55lv_67";
-const header$1 = "_header_j55lv_77";
-const headerTitle = "_headerTitle_j55lv_77";
-const heading$3 = "_heading_j55lv_78";
-const itemHeader = "_itemHeader_j55lv_78";
-const narrow = "_narrow_j55lv_81";
-const stickyHeader = "_stickyHeader_j55lv_85";
-const title$3 = "_title_j55lv_96";
-const name = "_name_j55lv_102";
-const iconTooltipMargin = "_iconTooltipMargin_j55lv_105";
-const bold = "_bold_j55lv_108";
-const toggleNarrow = "_toggleNarrow_j55lv_117";
-const drag$1 = "_drag_j55lv_135";
-const list$1 = "_list_j55lv_155";
-const bordered$1 = "_bordered_j55lv_159";
-const item$4 = "_item_j55lv_78";
-const action = "_action_j55lv_192";
-const active$3 = "_active_j55lv_195";
-const indented = "_indented_j55lv_202";
-const disabled$5 = "_disabled_j55lv_215";
-const label$6 = "_label_j55lv_226";
-const details$2 = "_details_j55lv_237";
-const metadata = "_metadata_j55lv_238";
-const itemContent = "_itemContent_j55lv_246";
-const indentIcon = "_indentIcon_j55lv_253";
-const expandIcon = "_expandIcon_j55lv_258";
-const expanded = "_expanded_j55lv_265";
-const right$4 = "_right_j55lv_268";
-const actions = "_actions_j55lv_276";
-const scrollableList = "_scrollableList_j55lv_281";
-const infiniteScrollContainer = "_infiniteScrollContainer_j55lv_286";
-const hideScrollbar = "_hideScrollbar_j55lv_67";
+const inputInTable$8 = "_inputInTable_tn20e_1";
+const inputHover$8 = "_inputHover_tn20e_13";
+const inputFocus$8 = "_inputFocus_tn20e_18";
+const inputError$8 = "_inputError_tn20e_25";
+const inputWarning$8 = "_inputWarning_tn20e_26";
+const inputDisabled$8 = "_inputDisabled_tn20e_61";
+const hideScrollbars$8 = "_hideScrollbars_tn20e_67";
+const header$1 = "_header_tn20e_77";
+const headerTitle = "_headerTitle_tn20e_77";
+const heading$3 = "_heading_tn20e_78";
+const itemHeader = "_itemHeader_tn20e_78";
+const narrow = "_narrow_tn20e_81";
+const stickyHeader = "_stickyHeader_tn20e_85";
+const title$3 = "_title_tn20e_96";
+const name = "_name_tn20e_102";
+const iconTooltipMargin = "_iconTooltipMargin_tn20e_105";
+const bold = "_bold_tn20e_108";
+const toggleNarrow = "_toggleNarrow_tn20e_117";
+const drag$1 = "_drag_tn20e_135";
+const list$1 = "_list_tn20e_155";
+const bordered$1 = "_bordered_tn20e_159";
+const item$4 = "_item_tn20e_78";
+const action = "_action_tn20e_192";
+const active$3 = "_active_tn20e_195";
+const indented = "_indented_tn20e_202";
+const disabled$5 = "_disabled_tn20e_215";
+const label$6 = "_label_tn20e_226";
+const details$2 = "_details_tn20e_237";
+const metadata = "_metadata_tn20e_238";
+const itemContent = "_itemContent_tn20e_246";
+const indentIcon = "_indentIcon_tn20e_253";
+const expandIcon = "_expandIcon_tn20e_258";
+const expanded = "_expanded_tn20e_265";
+const right$4 = "_right_tn20e_268";
+const actions = "_actions_tn20e_276";
+const scrollableList = "_scrollableList_tn20e_281";
+const infiniteScrollContainer = "_infiniteScrollContainer_tn20e_286";
+const hideScrollbar = "_hideScrollbar_tn20e_67";
+const noPointerEvents = "_noPointerEvents_tn20e_303";
 const listStyles = {
   inputInTable: inputInTable$8,
   inputHover: inputHover$8,
@@ -18860,7 +18916,8 @@ const listStyles = {
   actions,
   scrollableList,
   infiniteScrollContainer,
-  hideScrollbar
+  hideScrollbar,
+  noPointerEvents
 };
 const ToggleNarrow = ({
   toggleNarrow: toggleNarrow2,
@@ -18990,10 +19047,12 @@ const ListRow = forwardRef(
   ({ items, expanding, invokeEditOnRowClick, provided, draggable: draggable2 }, listRowRefs) => {
     const disabledContext = useContext(DisabledContext);
     const listElement = (index2, provided2, item2, indent, hasOnClick, edit2) => {
+      const Component2 = item2.component || "a";
       return /* @__PURE__ */ createElement(
-        "a",
+        Component2,
         {
           href: item2.url,
+          to: item2.url,
           ref: provided2 == null ? void 0 : provided2.innerRef,
           ...provided2.draggableProps,
           style: getItemStyle(provided2.draggableProps, item2),
@@ -19524,6 +19583,18 @@ const Modal = ({
   onEnter,
   onEscape
 }) => {
+  const MODAL_CONTAINER_ID = "modalContainer";
+  useEffect(() => {
+    if (document.getElementById(MODAL_CONTAINER_ID)) {
+      return;
+    }
+    const container2 = document.createElement("div");
+    container2.id = MODAL_CONTAINER_ID;
+    document.body.insertBefore(container2, document.body.firstChild);
+    return () => {
+      document.body.removeChild(container2);
+    };
+  }, []);
   useKeyboardEvent(
     "Enter",
     () => {
@@ -19542,10 +19613,7 @@ const Modal = ({
     },
     [visible, onEscape]
   );
-  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    /* @__PURE__ */ jsx(Portal, { id: "modalContainer", children: visible ? /* @__PURE__ */ jsx(Wrapper, { children: /* @__PURE__ */ jsx(Content$2, { width: width2, centered: centered2, children }) }) : null }),
-    /* @__PURE__ */ jsx("div", { id: "modalContainer" })
-  ] });
+  return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(Portal, { id: MODAL_CONTAINER_ID, children: visible ? /* @__PURE__ */ jsx(Wrapper, { children: /* @__PURE__ */ jsx(Content$2, { width: width2, centered: centered2, children }) }) : null }) });
 };
 const menu$1 = "_menu_12x4u_1";
 const header = "_header_12x4u_11";
@@ -21999,18 +22067,28 @@ const Popover = ({
   showCloseButton = false,
   testId,
   disabled: disabled2 = false,
-  overflowContainer = false
+  overflowContainer = false,
+  isOpen: externalIsOpen,
+  onToggle: externalOnToggle
 }) => {
   const disabledContext = useContext(DisabledContext);
-  const [isOpen2, setOpen] = useState(false);
-  const close2 = () => setOpen(false);
+  const [isOpen2, setOpen] = externalIsOpen !== void 0 ? [externalIsOpen, externalOnToggle] : useState(false);
+  const close2 = () => {
+    if (!disabled2 && !disabledContext) {
+      if (setOpen) {
+        setOpen(false);
+      }
+    }
+  };
   const toggle2 = () => {
     if (!(disabled2 || disabledContext)) {
-      setOpen(!isOpen2);
+      if (setOpen) {
+        setOpen(!isOpen2);
+      }
     }
   };
   useEffect(() => {
-    if (!(disabled2 || disabledContext)) {
+    if (disabled2 || disabledContext) {
       close2();
     }
   }, [disabled2, disabledContext]);
@@ -55262,23 +55340,6 @@ if (process.env.NODE_ENV !== "production") {
 }
 var _default = Handle;
 default_1 = Handle$1.default = _default;
-const SliderTooltip = ({ text: text2 }) => {
-  return /* @__PURE__ */ jsx(
-    TooltipLayer,
-    {
-      text: text2,
-      layerProps: {
-        style: {
-          whiteSpace: "nowrap",
-          position: "fixed",
-          transform: "translate(-50%, -100%)",
-          marginTop: -15,
-          marginLeft: 5
-        }
-      }
-    }
-  );
-};
 const container = "_container_1a936_1";
 const small$2 = "_small_1a936_7";
 const hasMarks = "_hasMarks_1a936_10";
@@ -55360,6 +55421,14 @@ const Slider = ({
       icon: IconType.FAST_FORWARD
     }
   ) });
+  const handleRender = (node2, handleProps) => {
+    const isTooltipVisible = showTooltip && handleProps.dragging;
+    return (
+      // TODO: revisit - fix handle warning
+      // @ts-ignore: revisit - fix handle warning
+      /* @__PURE__ */ jsx(default_1, { ...node2.props, ...handleProps, children: isTooltipVisible && /* @__PURE__ */ jsx(Tooltip, { display: "block", text: tooltipFormatter(value), forceOpen: true, children: /* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: 0 } }) }) })
+    );
+  };
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -55372,10 +55441,10 @@ const Slider = ({
       style: vertical2.enabled ? { width: vertical2.width, height: vertical2.height } : { width: width2 },
       children: [
         showArrows && (vertical2.enabled ? /* @__PURE__ */ jsx(ButtonMax, {}) : /* @__PURE__ */ jsx(ButtonMin, {})),
-        range2 ? /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(
           Slider$1,
           {
-            range: true,
+            range: range2,
             allowCross: false,
             className: cx$2(
               (disabled2 || disabledContext) && styles$c.rcSliderDisabled,
@@ -55389,24 +55458,7 @@ const Slider = ({
             onChange: (v2) => onChangeValue(v2),
             disabled: disabled2 || disabledContext,
             vertical: vertical2.enabled,
-            handle: showTooltip ? ({ index: index2, value: value2, dragging, ...handleProps }) => /* @__PURE__ */ jsx(default_1, { value: value2, ...handleProps, children: dragging && /* @__PURE__ */ jsx(SliderTooltip, { text: tooltipFormatter(value2) }) }, index2) : void 0
-          }
-        ) : /* @__PURE__ */ jsx(
-          Slider$1,
-          {
-            className: cx$2(
-              (disabled2 || disabledContext) && styles$c.rcSliderDisabled,
-              showArrows && styles$c.hasArrows
-            ),
-            value,
-            max,
-            min,
-            step,
-            marks: formattedMarks,
-            onChange: (v2) => onChangeValue(v2),
-            disabled: disabled2 || disabledContext,
-            vertical: vertical2.enabled,
-            handle: showTooltip ? ({ index: index2, value: value2, dragging, ...handleProps }) => /* @__PURE__ */ jsx(default_1, { value: value2, ...handleProps, children: dragging && /* @__PURE__ */ jsx(SliderTooltip, { text: tooltipFormatter(value2) }) }, index2) : void 0
+            handleRender
           }
         ),
         showArrows && (vertical2.enabled ? /* @__PURE__ */ jsx(ButtonMin, {}) : /* @__PURE__ */ jsx(ButtonMax, {})),
@@ -55569,19 +55621,23 @@ const TableScrollWrapper = ({
     }
   ) : children({ visibleRows }) });
 };
-const clickableRow = "_clickableRow_11d5t_1";
-const hoverableRow = "_hoverableRow_11d5t_4";
-const rowActive = "_rowActive_11d5t_4";
-const expandableRow = "_expandableRow_11d5t_8";
-const flush2 = "_flush_11d5t_8";
-const dragIconCell = "_dragIconCell_11d5t_28";
-const dragIcon = "_dragIcon_11d5t_28";
+const clickableRow = "_clickableRow_1ki29_1";
+const hoverableRow = "_hoverableRow_1ki29_4";
+const rowActive = "_rowActive_1ki29_4";
+const expandableRow = "_expandableRow_1ki29_8";
+const flush2 = "_flush_1ki29_8";
+const errorRow = "_errorRow_1ki29_12";
+const warningRow = "_warningRow_1ki29_15";
+const dragIconCell = "_dragIconCell_1ki29_34";
+const dragIcon = "_dragIcon_1ki29_34";
 const styles$8 = {
   clickableRow,
   hoverableRow,
   rowActive,
   expandableRow,
   flush: flush2,
+  errorRow,
+  warningRow,
   dragIconCell,
   dragIcon
 };
@@ -55648,7 +55704,7 @@ const inputDisabled$1 = "_inputDisabled_u3xdj_61";
 const hideScrollbars$1 = "_hideScrollbars_u3xdj_67";
 const cell = "_cell_u3xdj_77";
 const disabledLink = "_disabledLink_u3xdj_87";
-const inputWrapper = "_inputWrapper_u3xdj_91";
+const inputWrapper$1 = "_inputWrapper_u3xdj_91";
 const breakWord = "_breakWord_u3xdj_106";
 const inputCell = "_inputCell_u3xdj_109";
 const sliderCell = "_sliderCell_u3xdj_112";
@@ -55678,7 +55734,7 @@ const styles$7 = {
   hideScrollbars: hideScrollbars$1,
   cell,
   disabledLink,
-  inputWrapper,
+  inputWrapper: inputWrapper$1,
   breakWord,
   inputCell,
   sliderCell,
@@ -55714,6 +55770,8 @@ const InputCell = ({
         var _a;
         return (_a = cell2.onChange) == null ? void 0 : _a.call(cell2, ev);
       },
+      onFocus: cell2.onFocus,
+      onBlur: cell2.onBlur,
       onPaste: (ev) => {
         var _a;
         return (_a = cell2.onPaste) == null ? void 0 : _a.call(cell2, ev);
@@ -55732,6 +55790,11 @@ const InputCell = ({
     }
   );
 };
+const COSMETIC_ROUNDING_DEFAULT_PRECISION = 14;
+const roundNumberCosmetic = (value) => {
+  const isScientific = isScientificStringNum(value);
+  return !isScientific ? roundToPrecision(value, COSMETIC_ROUNDING_DEFAULT_PRECISION) : value;
+};
 const getStringName$1 = (name2) => {
   if (!name2)
     return "";
@@ -55755,6 +55818,8 @@ const NumberInput = ({
   },
   onFocus = () => {
   },
+  onBlur = () => {
+  },
   tabIndex = 0,
   testId,
   tooltip: tooltip2 = null,
@@ -55763,80 +55828,118 @@ const NumberInput = ({
   },
   allowEmpty = false,
   isInTable: isInTable2,
-  groupOrder
+  groupOrder,
+  enableCosmeticRounding = true,
+  enableDisplayRounding = false,
+  roundDisplayValue,
+  disableInternalErrorValidationMessages = false
 }) => {
-  const [displayValue, setDisplayValue] = useState(value);
-  const [validationError, setValidationError] = useState(null);
+  const inputRef = useRef(null);
+  const [displayValue, setDisplayValue] = useState(String(value));
+  const [focus2, setFocus] = useState(false);
+  const [pristine, setPristine] = useState(true);
   const stringName = getStringName$1(name2);
   const validateInputValue = (value2) => {
-    let validation = validateNumber(value2);
+    const validation = validateNumber(value2);
     if (allowEmpty && value2 === "" || validation.valid) {
       return { ...validation, valid: true, errors: void 0 };
     } else {
       return validation;
     }
   };
+  const { valid, errors: errors2 } = validateInputValue(displayValue);
+  const firstError = errors2 && errors2.length && !disableInternalErrorValidationMessages ? errors2[0] : null;
   useEffect(() => {
-    const { valid, errors: errors2 } = validateInputValue(value);
-    setDisplayValue(value);
-    if (valid) {
-      setValidationError(null);
-      validationCallback(stringName, null);
-    } else {
-      const firstError = errors2 && errors2.length ? errors2[0] : null;
-      setValidationError(firstError);
+    setDisplayValue(String(value));
+  }, [value, enableCosmeticRounding, enableDisplayRounding]);
+  useEffect(() => {
+    if (!focus2 && !valid) {
       validationCallback(stringName, firstError);
+    } else {
+      validationCallback(stringName, null);
     }
-  }, [value, error2]);
-  const onSetValue = (evt) => {
-    const input2 = evt.target;
-    const { value: value2 } = input2;
-    const inputValue = cleanNumStr(
-      value2.replaceAll(" ", "").replaceAll("|", "")
-    );
-    const { valid, errors: errors2 } = validateInputValue(inputValue);
-    if (valid) {
-      const newEvent = {
+  }, [focus2, valid, error2]);
+  const onChangeValue = (evt) => {
+    if (valid && !pristine) {
+      const event = {
         ...evt,
         target: {
           ...evt.target,
-          value: inputValue,
+          value: String(displayValue),
           name: stringName
         }
       };
-      onChange(newEvent);
-      setDisplayValue(inputValue);
-      setValidationError(null);
-      validationCallback(stringName, null);
-    } else {
-      setDisplayValue(inputValue);
-      const firstError = errors2 && errors2.length ? errors2[0] : null;
-      setValidationError(firstError);
-      validationCallback(stringName, firstError);
+      onChange(event);
     }
   };
+  const onSetValue = (evt) => {
+    const input2 = evt.target;
+    const { value: value2 } = input2;
+    const inputValue = cleanNumStr(
+      value2.replaceAll(" ", "").replaceAll("|", "")
+    );
+    setDisplayValue(inputValue);
+    setPristine(false);
+  };
+  useEffect(() => {
+    if (inputRef && (inputRef == null ? void 0 : inputRef.current) && enableDisplayRounding && focus2) {
+      const textInput = inputRef.current;
+      if (textInput) {
+        setTimeout(() => {
+          const { length: length2 } = String(displayValue);
+          textInput.setSelectionRange(length2, length2);
+        }, 0);
+      }
+    }
+  }, [focus2]);
+  const onInputFocus = (evt) => {
+    setFocus(true);
+    onFocus(evt);
+  };
+  const onInputBlur = (evt) => {
+    setFocus(false);
+    onChangeValue(evt);
+    onBlur(evt);
+  };
+  const shouldDisplayRound = enableDisplayRounding && !focus2 && valid;
+  const valueWithDisplayRounding = shouldDisplayRound ? roundDisplayValue ? String(roundDisplayValue(displayValue)) : roundToFixed(displayValue, 2) : displayValue;
+  const displayValueEndsWithZero = !!(valueWithDisplayRounding == null ? void 0 : valueWithDisplayRounding.endsWith("0"));
+  const shouldCosmeticallyRound = enableCosmeticRounding && // only when prop is enabled
+  valueWithDisplayRounding && // not when empty typed value
+  !displayValueEndsWithZero && // not when intentionally trying to type trailing zeros as interim values (OW-17109)
+  valid;
+  const valueWithCosmeticRounding = shouldCosmeticallyRound ? roundNumberCosmetic(valueWithDisplayRounding) : valueWithDisplayRounding;
   return /* @__PURE__ */ jsx(
-    Input$1,
+    KeyboardEventHandler,
     {
-      type: "text",
-      name: stringName,
-      testId,
-      disabled: disabled2,
-      placeholder: placeholder3,
-      value: displayValue,
-      onChange: onSetValue,
-      onFocus,
-      error: error2 || validationError,
-      warning: warning2,
-      right: !left2,
-      small: small2,
-      width: width2,
-      isInTable: isInTable2,
-      groupOrder,
-      tabIndex,
-      tooltip: tooltip2
-    },
-    stringName
+      handleKeys: [EventKey.ENTER],
+      onKeyEvent: (_key, evt) => onChangeValue(evt),
+      children: /* @__PURE__ */ jsx(
+        Input$1,
+        {
+          type: "text",
+          name: stringName,
+          testId,
+          disabled: disabled2,
+          placeholder: placeholder3,
+          value: valueWithCosmeticRounding,
+          onChange: onSetValue,
+          onFocus: onInputFocus,
+          onBlur: onInputBlur,
+          error: !focus2 && (firstError || error2),
+          warning: warning2,
+          right: !left2,
+          small: small2,
+          width: width2,
+          isInTable: isInTable2,
+          groupOrder,
+          tabIndex,
+          tooltip: tooltip2,
+          ref: inputRef
+        },
+        stringName
+      )
+    }
   );
 };
 const NumberInputCell = ({ cell: cell2, testId }) => {
@@ -55849,6 +55952,8 @@ const NumberInputCell = ({ cell: cell2, testId }) => {
         var _a;
         return (_a = cell2.onChange) == null ? void 0 : _a.call(cell2, ev);
       },
+      onFocus: cell2.onFocus,
+      onBlur: cell2.onBlur,
       placeholder: cell2.placeholder,
       error: cell2.error,
       warning: cell2.warning,
@@ -55859,7 +55964,10 @@ const NumberInputCell = ({ cell: cell2, testId }) => {
       testId,
       tooltip: cell2.tooltip,
       validationCallback: cell2.validationCallback,
-      allowEmpty: cell2.allowEmpty
+      allowEmpty: cell2.allowEmpty,
+      enableCosmeticRounding: cell2.enableCosmeticRounding,
+      enableDisplayRounding: cell2.enableDisplayRounding,
+      roundDisplayValue: cell2.roundDisplayValue
     }
   );
 };
@@ -55892,6 +56000,7 @@ const SelectCell = ({
       maxTooltipWidth: cell2.maxTooltipWidth,
       width: "100%",
       autoLayerWidth: cell2.autoLayerWidth,
+      multi: cell2.multi,
       right: columnAlignment === Align.RIGHT,
       testId,
       tabIndex: cell2.disabled ? -1 : 0
@@ -56126,6 +56235,7 @@ var CellType = /* @__PURE__ */ ((CellType2) => {
   CellType2["SLIDER"] = "Slider";
   CellType2["CHECKBOX"] = "CheckBox";
   CellType2["ACTIONS"] = "Actions";
+  CellType2["AUTO_UNIT"] = "AutoUnit";
   return CellType2;
 })(CellType || {});
 const Cell = ({
@@ -56208,6 +56318,8 @@ const Row = ({
     onRowMouseEnter,
     onRowMouseLeave,
     expandedContent,
+    error: error2,
+    warning: warning2,
     active: active2
   } = row2;
   const cells = row2.cells.map((c2, i) => {
@@ -56299,7 +56411,9 @@ const Row = ({
         className: cx$2(
           onRowClick && !onRowClick.noStyle ? styles$8.clickableRow : null,
           onRowMouseEnter && !onRowMouseEnter.noStyle ? styles$8.hoverableRow : null,
-          active2 ? styles$8.rowActive : null
+          active2 ? styles$8.rowActive : null,
+          error2 ? styles$8.errorRow : null,
+          warning2 ? styles$8.warningRow : null
         ),
         ref: (provided == null ? void 0 : provided.innerRef) || null,
         ...(provided == null ? void 0 : provided.draggableProps) || null,
@@ -56728,9 +56842,20 @@ const TextLink = ({
   href = void 0,
   target = void 0,
   testId,
-  onClick
+  onClick,
+  component: Component2 = "a"
 }) => {
-  return /* @__PURE__ */ jsx("a", { href, target, onClick, "data-testid": testId, children: /* @__PURE__ */ jsx(Text, { link: true, children }) });
+  return /* @__PURE__ */ jsx(
+    Component2,
+    {
+      href,
+      to: href,
+      target,
+      onClick,
+      "data-testid": testId,
+      children: /* @__PURE__ */ jsx(Text, { link: true, children })
+    }
+  );
 };
 const inputInTable = "_inputInTable_66zck_1";
 const inputHover = "_inputHover_66zck_13";
@@ -57996,22 +58121,22 @@ const Toggle = ({
     }
   );
 };
-const topbar = "_topbar_gmfjn_11";
-const fixed = "_fixed_gmfjn_21";
-const appSwitcher = "_appSwitcher_gmfjn_29";
-const title = "_title_gmfjn_75";
-const logo = "_logo_gmfjn_91";
-const label = "_label_gmfjn_94";
-const brand = "_brand_gmfjn_99";
-const version = "_version_gmfjn_104";
-const left = "_left_gmfjn_111";
-const right = "_right_gmfjn_112";
-const item = "_item_gmfjn_126";
-const link = "_link_gmfjn_127";
-const button = "_button_gmfjn_139";
-const menu = "_menu_gmfjn_140";
-const active = "_active_gmfjn_168";
-const alert = "_alert_gmfjn_193";
+const topbar = "_topbar_oyr59_11";
+const fixed = "_fixed_oyr59_21";
+const appSwitcher = "_appSwitcher_oyr59_29";
+const title = "_title_oyr59_75";
+const logo = "_logo_oyr59_91";
+const label = "_label_oyr59_94";
+const brand = "_brand_oyr59_99";
+const version = "_version_oyr59_104";
+const left = "_left_oyr59_111";
+const right = "_right_oyr59_112";
+const item = "_item_oyr59_126";
+const link = "_link_oyr59_127";
+const button = "_button_oyr59_138";
+const menu = "_menu_oyr59_139";
+const active = "_active_oyr59_168";
+const alert = "_alert_oyr59_193";
 const styles$3 = {
   topbar,
   fixed,
@@ -58069,7 +58194,8 @@ const Link = ({
   onClick,
   active: active2,
   disabled: disabled2,
-  testId
+  testId,
+  component: Component2 = "a"
 }) => {
   const disabledContext = useContext(DisabledContext);
   const handleClick2 = (event) => {
@@ -58079,10 +58205,11 @@ const Link = ({
     onClick == null ? void 0 : onClick(event);
   };
   return /* @__PURE__ */ jsxs(
-    "a",
+    Component2,
     {
       className: cx$2(styles$3.link, active2 ? styles$3.active : ""),
       href: url || "#",
+      to: url,
       onClick: handleClick2,
       "aria-disabled": disabled2 || disabledContext,
       "data-testid": testId,
@@ -58106,7 +58233,8 @@ const Element$1 = ({ element }) => {
           onClick: element.onClick,
           active: element.active,
           disabled: element.disabled,
-          testId: element.testId
+          testId: element.testId,
+          component: element.component
         }
       ) });
     case ElementType.BUTTON:
@@ -69925,12 +70053,12 @@ function TreeInner(props, ref2) {
   );
 }
 var Tree$1 = forwardRef(TreeInner);
-const tree = "_tree_1lv9u_1";
-const toggle = "_toggle_1lv9u_4";
-const dropTarget = "_dropTarget_1lv9u_11";
-const draggingSource = "_draggingSource_1lv9u_14";
-const placeholderContainer = "_placeholderContainer_1lv9u_17";
-const placeholder2 = "_placeholder_1lv9u_17";
+const tree = "_tree_15yn1_1";
+const toggle = "_toggle_15yn1_4";
+const dropTarget = "_dropTarget_15yn1_11";
+const draggingSource = "_draggingSource_15yn1_26";
+const placeholderContainer = "_placeholderContainer_15yn1_29";
+const placeholder2 = "_placeholder_15yn1_29";
 const styles$1 = {
   tree,
   toggle,
@@ -69946,14 +70074,46 @@ const TreeItem = ({
   onToggle,
   hasChild,
   draggable: draggable2,
-  icons: icons2
+  icons: icons2,
+  onDrop
 }) => {
   const { id: id2, data } = node2;
   const { active: active2, testId, onClick, actions: actions2 = [] } = data;
+  const [isDragOver, setDragOver] = React__default.useState(false);
+  const [dragOverStartTime, setDragOverStartTime] = React__default.useState(0);
   const handleToggle = (e2) => {
     e2.stopPropagation();
     onToggle(id2);
   };
+  const handleDragEnter = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (!isDragOver) {
+      setDragOver(true);
+      setDragOverStartTime((/* @__PURE__ */ new Date()).getTime());
+    }
+  };
+  const handleDragLeave = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if ((/* @__PURE__ */ new Date()).getTime() - dragOverStartTime > 20) {
+      setDragOver(false);
+    }
+  };
+  const handleDragOver = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (hasChild && !isOpen2 && (/* @__PURE__ */ new Date()).getTime() - dragOverStartTime > 200) {
+      handleToggle(event);
+    }
+  };
+  const handleDrop = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setDragOver(false);
+    setDragOverStartTime((/* @__PURE__ */ new Date()).getTime());
+    onDrop == null ? void 0 : onDrop(event);
+  };
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -69961,7 +70121,8 @@ const TreeItem = ({
         listStyles.item,
         listStyles.action,
         active2 ? listStyles.active : "",
-        depth > 0 ? listStyles.indented : ""
+        depth > 0 ? listStyles.indented : "",
+        isDragOver ? listStyles.bordered : ""
       ),
       style: {
         marginInlineStart: depth * 24
@@ -69974,10 +70135,17 @@ const TreeItem = ({
           handleToggle(evt);
         }
       },
+      onDrop: (evt) => onDrop ? handleDrop(evt) : {},
+      onDragEnter: (evt) => onDrop ? handleDragEnter(evt) : {},
+      onDragOver: (evt) => onDrop ? handleDragOver(evt) : {},
+      onDragLeave: (evt) => onDrop ? handleDragLeave(evt) : {},
       children: /* @__PURE__ */ jsxs(
         "div",
         {
-          className: listStyles.itemHeader,
+          className: cx$2(
+            listStyles.itemHeader,
+            isDragOver ? listStyles.noPointerEvents : ""
+          ),
           children: [
             hasChild && /* @__PURE__ */ jsx("div", { className: styles$1.toggle, children: /* @__PURE__ */ jsx(
               Button$1,
@@ -70010,35 +70178,89 @@ const Tree = ({
   treeRef,
   itemHasChild,
   onItemToggle,
-  icons: icons2
+  icons: icons2,
+  allowParentReassignment
 }) => {
   var _a;
-  const handleDrop = (newTree) => {
-    if (onListReorder) {
-      const newList = newTree.map(({ id: id2, parent, droppable: droppable2, data }) => ({
+  const handleOpen = (id2) => {
+    if (onChangeOpen) {
+      onChangeOpen(id2);
+    }
+  };
+  const findNodeIndexById = (tree22, id2) => {
+    return (tree22 == null ? void 0 : tree22.findIndex((node2) => (node2 == null ? void 0 : node2.id) === id2)) ?? -1;
+  };
+  const setDragSourceParentToGrandparent = (dragSource, workingTree) => {
+    const dragSourceParentIndex = findNodeIndexById(
+      workingTree,
+      dragSource == null ? void 0 : dragSource.parent
+    );
+    if (dragSourceParentIndex >= 0) {
+      const grandparent = workingTree == null ? void 0 : workingTree.find(
+        (node2) => {
+          var _a2;
+          return (node2 == null ? void 0 : node2.id) === ((_a2 = workingTree[dragSourceParentIndex]) == null ? void 0 : _a2.parent);
+        }
+      );
+      dragSource.parent = grandparent ? grandparent.id : 0;
+    }
+  };
+  const removeDragSourceFromWorkingTree = (dragSource, workingTree) => {
+    return (workingTree == null ? void 0 : workingTree.filter((node2) => (node2 == null ? void 0 : node2.id) !== (dragSource == null ? void 0 : dragSource.id))) ?? [];
+  };
+  const insertDragSourceAfterParentInWorkingTree = (dragSource, dragSourceParentIndex, workingTree) => {
+    workingTree == null ? void 0 : workingTree.splice(dragSourceParentIndex, 0, dragSource);
+    return workingTree;
+  };
+  const transformTreeToList = (tree22) => {
+    return tree22.map(({ id: id2, parent, droppable: droppable2, data }) => {
+      return {
         id: id2,
         parent,
         droppable: droppable2,
         ...data
-      }));
-      onListReorder(newList);
-    }
+      };
+    });
   };
-  const handleOpen = (id2) => {
-    if (onChangeOpen) {
-      onChangeOpen(id2);
+  const handleDrop = (newTree, option2) => {
+    const { dragSource, dropTarget: dropTarget2 } = option2;
+    let workingTree = [...newTree];
+    if (!onListReorder)
+      return;
+    const dragSourceIndex = findNodeIndexById(workingTree, dragSource == null ? void 0 : dragSource.id);
+    const dragSourceParentIndex = findNodeIndexById(
+      workingTree,
+      dragSource == null ? void 0 : dragSource.parent
+    );
+    let newList = [];
+    if ((dragSource == null ? void 0 : dragSource.parent) === (dropTarget2 == null ? void 0 : dropTarget2.id) && dragSourceIndex === 0 && allowParentReassignment) {
+      setDragSourceParentToGrandparent(dragSource, workingTree);
+      workingTree = removeDragSourceFromWorkingTree(
+        dragSource,
+        workingTree
+      );
+      workingTree = insertDragSourceAfterParentInWorkingTree(
+        dragSource,
+        dragSourceParentIndex,
+        workingTree
+      );
     }
+    newList = transformTreeToList(workingTree);
+    onListReorder(newList);
   };
-  const tree2 = (_a = list2 == null ? void 0 : list2.items) == null ? void 0 : _a.map(({ id: id2, droppable: droppable2, parent, name: name2, ...rest }) => ({
-    id: id2,
-    text: name2,
-    droppable: droppable2,
-    parent,
-    data: {
-      name: name2,
-      ...rest
-    }
-  }));
+  const tree2 = (_a = list2 == null ? void 0 : list2.items) == null ? void 0 : _a.map(
+    ({ id: id2, droppable: droppable2, parent, name: name2, onDrop, ...rest }) => ({
+      id: id2,
+      text: name2,
+      droppable: droppable2,
+      parent,
+      data: {
+        name: name2,
+        onDrop,
+        ...rest
+      }
+    })
+  );
   return /* @__PURE__ */ jsxs("div", { "data-testid": testId, children: [
     list2.name && !list2.noHeader && /* @__PURE__ */ jsx(ListHeading, { name: list2.name, actions: list2.actions }),
     /* @__PURE__ */ jsx("div", { className: listStyles.list, children: /* @__PURE__ */ jsx(
@@ -70062,6 +70284,7 @@ const Tree = ({
             },
             rootId: 0,
             render: (node2, { depth, isOpen: isOpen2, onToggle, hasChild }) => {
+              var _a2;
               return /* @__PURE__ */ jsx(
                 TreeItem,
                 {
@@ -70074,7 +70297,8 @@ const Tree = ({
                     onToggle();
                   },
                   draggable: draggable2,
-                  icons: icons2
+                  icons: icons2,
+                  onDrop: (_a2 = node2.data) == null ? void 0 : _a2.onDrop
                 }
               );
             },
@@ -70175,45 +70399,6 @@ const getStringName = (name2) => {
   }
   return typeof name2 === "string" ? name2 : "";
 };
-const isErrorObject = (error2) => isObjectLike(error2) && has$1(error2, "message");
-const getErrorMessage = (error2) => {
-  if (typeof error2 === "string") {
-    return error2;
-  } else if (isErrorObject(error2)) {
-    return error2.message;
-  } else {
-    return null;
-  }
-};
-const hasLeadingZeroes = (value) => {
-  return value.search(RegExp(/(^0{2}\.)|(^0+[1-9])/g)) === 0;
-};
-const validate = (value, options) => {
-  var _a;
-  const {
-    allowEmpty = false,
-    autoValue,
-    placeholder: placeholder3,
-    disabledValidation = false
-  } = options || {};
-  const stringValue = String(value);
-  if (disabledValidation || autoValue || placeholder3) {
-    return null;
-  }
-  const cleanValue = isValueWithUnit$1(stringValue) ? getValue$1(stringValue) : stringValue;
-  if (allowEmpty && cleanValue === "") {
-    return null;
-  }
-  if (hasLeadingZeroes(cleanValue)) {
-    return "Invalid number format due to leading zeroes";
-  }
-  const validationErrors = validateNumber(cleanValue);
-  if (!validationErrors.valid) {
-    const firstError = ((_a = validationErrors == null ? void 0 : validationErrors.errors) == null ? void 0 : _a[0]) ?? null;
-    return getErrorMessage(firstError);
-  }
-  return null;
-};
 const isUnitKnown = (unit2 = "") => {
   var _a;
   return (_a = KNOWN_UNITS) == null ? void 0 : _a.includes(unit2);
@@ -70222,16 +70407,18 @@ const isKnownUnit = (valueWithUnit, defaultUnit) => {
   const unitFromValue = getUnit(valueWithUnit || "");
   return isUnitKnown(defaultUnit) && isUnitKnown(unitFromValue);
 };
-const predefinedMenuActive = "_predefinedMenuActive_1yvt4_1";
+const predefinedMenuActive = "_predefinedMenuActive_ye9w9_1";
+const inputWrapper = "_inputWrapper_ye9w9_4";
 const styles = {
-  predefinedMenuActive
+  predefinedMenuActive,
+  inputWrapper
 };
 const UnitInput = ({
   name: name2,
   placeholder: placeholder3 = "",
   disabled: disabled2 = false,
   disabledUnit = false,
-  error: error2 = null,
+  error: error2 = false,
   left: left2 = false,
   small: small2 = false,
   width: width2 = "100%",
@@ -70250,15 +70437,18 @@ const UnitInput = ({
   unitTemplate,
   doNotConvertValue = false,
   testId,
-  warning: warning2 = null,
+  warning: warning2 = false,
   predefinedOptions,
   initialPredefinedOption = false,
   shouldLinkAutomaticly = true,
   selectedPredefinedOptionKey,
-  validationCallback = () => ({ name: "", error: null }),
+  validationCallback,
   disabledValidation = false,
   allowEmpty = false,
-  autoValue
+  autoValue,
+  convertBackToStorageUnit = false,
+  enableCosmeticRounding = true,
+  enableDisplayRounding = false
 }) => {
   if (typeof value === "number") {
     value = `${value}`;
@@ -70287,11 +70477,11 @@ const UnitInput = ({
   );
   const initDisplayLayer = convertedValue !== "" ? { value: convertedValue, unit: initDisplayUnit } : convertedAutoValue !== "" ? { value: convertedAutoValue, unit: initDisplayUnit } : { value: propValue, unit: propUnit };
   const [displayLayer, setDisplayLayer] = useState(initDisplayLayer);
-  const [validationError, setValidationError] = useState(null);
   const [predefinedOptionsMenuState, setPredefinedOptionsMenuState] = useState(
     initialPredefinedOption ? PredefinedOptionsMenuState.PREDEFINED : PredefinedOptionsMenuState.CUSTOM
   );
   const isAutoValue = propValue === "" && autoValue;
+  const disableInternalErrorValidationMessages = !!(disabledValidation || autoValue || placeholder3);
   const foundPredefinedMenuOption = predefinedOptions && predefinedOptions.find((el2) => {
     if (selectedPredefinedOptionKey) {
       return selectedPredefinedOptionKey === el2.valueKey;
@@ -70320,33 +70510,16 @@ const UnitInput = ({
     const stringName2 = getStringName(name2);
     const input2 = evt.target;
     const { value: inputValue, selectionStart: currentCursorPosition } = input2;
-    const cleanInputValue = cleanNumStr(
-      inputValue.replaceAll(" ", "").replaceAll("|", "")
-    );
-    const newValue = withUnit(cleanInputValue, (displayLayer == null ? void 0 : displayLayer.unit) || "");
-    const rawValue = getValue$1(newValue);
-    const validationResult = validate(rawValue, {
-      allowEmpty,
-      autoValue,
-      placeholder: placeholder3,
-      disabledValidation
+    const newValue = withUnit(inputValue, (displayLayer == null ? void 0 : displayLayer.unit) || "");
+    const returnValue = convertBackToStorageUnit ? withUnit(convertAndGetValue(newValue, propUnit), propUnit) : newValue;
+    onChange({
+      target: {
+        value: returnValue,
+        name: stringName2
+      }
     });
-    if (validationResult === null) {
-      onChange({
-        target: {
-          value: newValue,
-          name: stringName2
-        }
-      });
-      const [val, u] = split$1(newValue);
-      setDisplayLayer({ value: val, unit: u });
-      setValidationError(null);
-      validationCallback(stringName2, null);
-    } else {
-      setDisplayLayer({ value: cleanInputValue, unit: displayLayer.unit });
-      setValidationError(validationResult);
-      validationCallback(stringName2, validationResult);
-    }
+    const [val, u] = split$1(newValue);
+    setDisplayLayer({ value: val, unit: u });
     runAfterUpdate(() => {
       input2.selectionStart = currentCursorPosition;
       input2.selectionEnd = currentCursorPosition;
@@ -70392,14 +70565,6 @@ const UnitInput = ({
         }
       }
     }
-    const cleanValue = checkAndCleanDecimalComma(propValue);
-    const errorMessage = validate(cleanValue, {
-      allowEmpty,
-      autoValue,
-      placeholder: placeholder3,
-      disabledValidation
-    });
-    setValidationError(errorMessage);
   }, [initDisplayUnit, value, error2, shouldLinkAutomaticly]);
   const alternativeUnits = getAlternativeUnits();
   const displayUnitLabel = label$b(displayLayer.unit) || displayLayer.unit || "";
@@ -70433,6 +70598,14 @@ const UnitInput = ({
       selected: foundPredefinedMenuOption === el2 && predefinedOptionsMenuState === PredefinedOptionsMenuState.PREDEFINED
     };
   };
+  const handleValidationCallback = (name22, error22) => {
+    if (validationCallback) {
+      validationCallback({
+        name: name22,
+        error: error22
+      });
+    }
+  };
   sectionsPredefinedMenu = [
     {
       type: MenuType.OPTION,
@@ -70489,10 +70662,9 @@ const UnitInput = ({
             )
           }
         ),
-        /* @__PURE__ */ jsx(
-          Input$1,
+        /* @__PURE__ */ jsx("div", { className: styles.inputWrapper, children: /* @__PURE__ */ jsx(
+          NumberInput,
           {
-            type: "text",
             name: stringName,
             testId,
             disabled: disabled2,
@@ -70505,12 +70677,18 @@ const UnitInput = ({
             value: displayLayer.value,
             onChange: onSetValue,
             onFocus,
-            error: error2 || validationError,
+            error: error2,
             warning: warning2,
-            right: !left2
+            left: left2,
+            allowEmpty,
+            validationCallback: handleValidationCallback,
+            enableCosmeticRounding,
+            enableDisplayRounding,
+            groupOrder: predefinedOptions ? "middle" : "first",
+            disableInternalErrorValidationMessages
           },
           stringName
-        ),
+        ) }),
         displayUnitLabel && (noConvert || !knownUnit ? /* @__PURE__ */ jsx(InputGroupAddon, { groupOrder: "last", children: displayUnitLabel }) : /* @__PURE__ */ jsx(
           Menu,
           {
@@ -70524,9 +70702,11 @@ const UnitInput = ({
               small: small2,
               sections: alternativeUnits.map(([value2, altUnit, label2]) => {
                 const displayUnit = label2 || altUnit || "";
+                const safeValue = !isNaN(Number(value2)) ? value2 : "";
+                const displayValue = enableCosmeticRounding ? roundNumberCosmetic(safeValue) : safeValue;
                 return {
                   type: "Option",
-                  label: !isNaN(Number(value2)) ? value2 : "",
+                  label: displayValue,
                   inline: true,
                   onClick: (evt) => {
                     evt.stopPropagation();
@@ -70559,78 +70739,108 @@ const convertVisibleRows = ({
   storageUnits,
   onChangeUnit,
   convertBackToStorageUnit,
-  convertBackToString,
-  enableCosmeticRounding
+  enableCosmeticRounding,
+  enableDisplayRounding
 }) => {
-  const convertedHeaders = headers.map((headerRow) => ({
+  const convertedHeaders = headers ? headers.map((headerRow) => ({
     ...headerRow,
     cells: headerRow.cells.map((headerCell) => {
-      if (headerCell.type === "AutoUnit") {
-        const { unitKey } = headerCell;
+      var _a;
+      if (headerCell.type === CellType.AUTO_UNIT) {
+        const { testId, unitKey } = headerCell;
         return {
           value: selectedUnits[unitKey],
-          type: "Select",
-          options: getUnitsForQuantity(unitKey),
-          native: true,
-          onChange: (evt) => onChangeUnit({ unitKey, value: evt.target.value })
+          type: CellType.SELECT,
+          searchable: false,
+          options: (_a = getUnitsForQuantity(unitKey)) == null ? void 0 : _a.map((unit2) => ({
+            label: label$b(unit2),
+            value: unit2
+          })),
+          native: headerCell.native,
+          onChange: (evt) => onChangeUnit({ unitKey, value: evt.target.value }),
+          testId
         };
       }
       return headerCell;
     })
-  }));
-  const convertedRows = rows.map((row2, rowIndex) => ({
+  })) : [];
+  const convertedRows = rows ? rows.map((row2, rowIndex) => ({
     ...row2,
     cells: row2.cells.map((cell2, cellIndex) => {
-      if (cell2.autoUnit) {
-        const { formatDisplayValue } = cell2;
-        const convertedValue = convertAndGetValue(
-          cell2.value,
-          selectedUnits[cell2.unitKey],
-          storageUnits[cell2.unitKey]
-        );
-        const displayValue = enableCosmeticRounding ? roundToPrecision(convertedValue, 14) : convertedValue;
-        const formattedDisplayValue = formatDisplayValue ? formatDisplayValue(displayValue) : displayValue;
+      if ("autoUnit" in cell2 && (cell2 == null ? void 0 : cell2.autoUnit) && (typeof (cell2 == null ? void 0 : cell2.value) === "string" || typeof (cell2 == null ? void 0 : cell2.value) === "number")) {
+        const { unitKey, value, formatDisplayValue } = cell2;
+        const roundDisplayValue = enableDisplayRounding && "roundDisplayValue" in cell2 ? cell2 == null ? void 0 : cell2.roundDisplayValue : null;
+        const selectedUnit = selectedUnits[unitKey];
+        const storageUnit = storageUnits[unitKey];
+        const unitChanged = selectedUnit !== storageUnit;
+        const convertedValue = unitChanged ? convertAndGetValue(value, selectedUnit, storageUnit) : cell2.value;
+        const formattedDisplayValue = formatDisplayValue ? formatDisplayValue(convertedValue) : convertedValue;
         return {
           ...cell2,
           value: formattedDisplayValue,
+          enableCosmeticRounding: enableCosmeticRounding && unitChanged,
+          //todo: why did we need to check unitChanged here? (original rationale)
+          enableDisplayRounding,
+          roundDisplayValue,
           onChange: (evt) => {
-            const { value } = evt.target;
-            const { unitKey } = cell2;
-            const storageUnit = storageUnits[unitKey];
-            const selectedUnit = selectedUnits[unitKey];
-            const unitChanged = selectedUnit !== storageUnit;
-            const nextValueConverted = unitChanged && convertBackToStorageUnit ? convertAndGetValue(value, storageUnit, selectedUnit) : value;
-            const nextValue = convertBackToString ? String(nextValueConverted) : nextValueConverted;
-            const nextUnit = convertBackToStorageUnit ? storageUnit : selectedUnit;
-            cell2.onChange({
-              rowIndex,
-              cellIndex,
-              value: nextValue,
-              unit: nextUnit
-            });
+            const { value: value2 } = evt.target;
+            const storageUnit2 = storageUnits[unitKey];
+            const selectedUnit2 = selectedUnits[unitKey];
+            const unitChanged2 = selectedUnit2 !== storageUnit2;
+            const nextUnit = convertBackToStorageUnit ? storageUnit2 : selectedUnit2;
+            const nextValueConverted = unitChanged2 ? convertAndGetValue(value2, nextUnit, selectedUnit2) : value2;
+            if ("onChange" in cell2) {
+              const { onChange } = cell2;
+              const event = {
+                ...evt,
+                target: {
+                  ...evt.target,
+                  value: String(nextValueConverted),
+                  rowIndex,
+                  cellIndex,
+                  unit: nextUnit
+                }
+              };
+              onChange(event);
+            }
           }
         };
       }
       return cell2;
     })
-  }));
+  })) : [];
   return { convertedHeaders, convertedRows };
 };
 const UnitTable = ({
   table: table2,
   unitConfig,
   convertBackToStorageUnit = true,
-  convertBackToString = false,
-  enableCosmeticRounding = true
+  enableCosmeticRounding = true,
+  enableDisplayRounding = true
 }) => {
-  const { rows, headers, otherProps } = table2;
+  const { rows, headers, ...otherProps } = table2;
   const { storageUnits, preferredUnits } = normalizeUnits(unitConfig);
   const previousPreferredUnits = usePrevious(preferredUnits);
   const [selectedUnits, setSelectedUnits] = useState(preferredUnits);
-  const onChangeUnit = ({ unitKey, value }) => setSelectedUnits({
-    ...selectedUnits,
-    [unitKey]: value
-  });
+  const onChangeUnit = ({
+    unitKey,
+    value
+  }) => {
+    setSelectedUnits({
+      ...selectedUnits,
+      [unitKey]: value
+    });
+    const specificUnitConfiguration = unitConfig.find(
+      (configuration) => configuration.unitKey === unitKey
+    );
+    if (specificUnitConfiguration && typeof specificUnitConfiguration.onChange === "function") {
+      specificUnitConfiguration.onChange({
+        oldUnit: selectedUnits[unitKey],
+        newUnit: value,
+        unitKey
+      });
+    }
+  };
   const convertViewData = (selectedUnits2) => convertVisibleRows({
     headers,
     rows,
@@ -70638,24 +70848,27 @@ const UnitTable = ({
     storageUnits,
     onChangeUnit,
     convertBackToStorageUnit,
-    convertBackToString,
-    enableCosmeticRounding
+    enableCosmeticRounding,
+    enableDisplayRounding
   });
   const convertedViewData = convertViewData(selectedUnits);
   const [viewData, setViewData] = useState(convertedViewData);
   useEffect(() => {
     const templateChanged = !isEqual$4(preferredUnits, previousPreferredUnits);
     if (templateChanged) {
-      setSelectedUnits(preferredUnits);
+      Object.keys(preferredUnits).forEach((unitKey) => {
+        const oldUnit = previousPreferredUnits == null ? void 0 : previousPreferredUnits[unitKey];
+        const newUnit = preferredUnits[unitKey];
+        if (oldUnit !== newUnit) {
+          onChangeUnit({ unitKey, value: newUnit });
+        }
+      });
       setViewData(convertViewData(preferredUnits));
     }
   }, [unitConfig]);
   useEffect(() => {
     setViewData(convertViewData(selectedUnits));
-  }, [table2]);
-  useEffect(() => {
-    setViewData(convertViewData(selectedUnits));
-  }, [selectedUnits]);
+  }, [table2, selectedUnits]);
   return /* @__PURE__ */ jsx(
     Table,
     {
@@ -70667,6 +70880,154 @@ const UnitTable = ({
     }
   );
 };
+const INTERVAL_TIME = 250;
+const REQUEST_TIME = 4e4;
+const FINISH_INTERVALS = 20;
+const FINISH_TIME = 500;
+const SmartUploadModal = ({
+  visible,
+  prompt,
+  onCloseModal,
+  onUpload,
+  onComplete,
+  onFailed,
+  onError: onError3,
+  width: width2,
+  heading: heading2,
+  dialogText,
+  fileInputText,
+  fileInputPlaceholder,
+  uploadText,
+  cancelText,
+  testId
+}) => {
+  const [file, setFile] = useState(null);
+  const [isFetching, setFetching] = useState(false);
+  const [requestTimer, setRequestTimer] = useState(0);
+  let timer = 0;
+  const updateTimer = () => {
+    const newTime = timer + INTERVAL_TIME;
+    timer = newTime;
+    setRequestTimer(timer);
+  };
+  const finishTimer = (deltaTime) => {
+    let newTime = timer + deltaTime;
+    if (newTime >= 0.99 * REQUEST_TIME) {
+      newTime = REQUEST_TIME;
+    }
+    timer = newTime;
+    setRequestTimer(timer);
+  };
+  useEffect(() => {
+    setFile(null);
+  }, [visible]);
+  const handleFileChange = (event) => {
+    if (!event.target.value)
+      return;
+    setFile(event.target.value);
+  };
+  const handleUpload = async () => {
+    setRequestTimer(0);
+    const id2 = setInterval(updateTimer, INTERVAL_TIME);
+    try {
+      if (!file)
+        return;
+      setFetching(true);
+      const data = await onUpload(prompt, file);
+      if (!visible)
+        return;
+      if (data) {
+        clearInterval(id2);
+        const id22 = setInterval(
+          finishTimer,
+          FINISH_TIME / FINISH_INTERVALS,
+          (REQUEST_TIME - timer) / (FINISH_INTERVALS - 1)
+        );
+        setTimeout(() => {
+          onComplete(data);
+          clearInterval(id22);
+          setFetching(false);
+        }, FINISH_TIME);
+      } else {
+        onFailed == null ? void 0 : onFailed();
+        setFetching(false);
+      }
+    } catch (error2) {
+      onError3 == null ? void 0 : onError3(error2);
+      setFetching(false);
+    } finally {
+      clearInterval(id2);
+    }
+  };
+  const onConfirm = () => {
+    handleUpload();
+  };
+  const onClose = () => {
+    onCloseModal();
+  };
+  const content2 = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    /* @__PURE__ */ jsx(Text, { children: dialogText || "Upload file and extract data using a LLM" }),
+    /* @__PURE__ */ jsx(Spacer, {}),
+    /* @__PURE__ */ jsx(
+      FileInput,
+      {
+        placeholder: fileInputPlaceholder || "No file",
+        label: fileInputText || "Select",
+        file: file || void 0,
+        onChange: handleFileChange,
+        testId: `${testId}-file-input`,
+        accept: "image/*"
+      }
+    ),
+    isFetching && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      /* @__PURE__ */ jsx(Spacer, {}),
+      /* @__PURE__ */ jsx(
+        ProgressBar$1,
+        {
+          percentage: roundByMagnitudeToFixed(
+            100 * requestTimer / REQUEST_TIME,
+            3
+          )
+        }
+      )
+    ] })
+  ] });
+  const footer2 = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    /* @__PURE__ */ jsx(
+      Button$1,
+      {
+        label: uploadText || "Upload",
+        colored: true,
+        onClick: onConfirm,
+        disabled: !file || isFetching,
+        testId: `${testId}-button-upload`
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button$1,
+      {
+        label: cancelText || "Cancel",
+        onClick: onClose,
+        testId: `${testId}-button-cancel`
+      }
+    )
+  ] });
+  useKeyboardEvent("Escape", () => onClose());
+  return /* @__PURE__ */ jsx(Modal, { visible, centered: true, children: /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      dialog: {
+        scroll: true,
+        heading: heading2 || "Smart Upload",
+        content: content2,
+        footer: footer2,
+        onClose,
+        width: width2 || 350,
+        testId
+      }
+    }
+  ) });
+};
 export {
   Accordion,
   AccordionWithDefaultToggle,
@@ -70690,6 +71051,7 @@ export {
   ElementType,
   Empty,
   Field,
+  FileButton,
   FileInput,
   Flex,
   FormRow,
@@ -70731,6 +71093,7 @@ export {
   Select,
   SideBar,
   Slider,
+  SmartUploadModal,
   Spacer,
   Spinner$1 as Spinner,
   Table,