@oliasoft-open-source/react-ui-library 4.1.11 → 4.2.0-beta-1

package/dist/index.js

@@ -10,8 +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 } from "lodash";
-import { validateNumber, cleanNumStr } from "@oliasoft-open-source/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, isObjectLike, has as has$1 } from "lodash";
+import { validateNumber, cleanNumStr, unitFromQuantity, isValueWithUnit, convertSamePrecision, withUnit, getValue as getValue$1, split as split$1, getUnit, checkAndCleanDecimalComma, label as label$b, altUnitsList, isNumeric, isValidNum } from "@oliasoft-open-source/units";
 const global$2 = "";
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 function getDefaultExportFromCjs(x2) {
@@ -174,7 +174,7 @@ var InputType = /* @__PURE__ */ ((InputType2) => {
 })(InputType || {});
 const chevron = "_chevron_1kw4m_1";
 const expanded$2 = "_expanded_1kw4m_9";
-const styles$T = {
+const styles$U = {
   chevron,
   expanded: expanded$2
 };
@@ -880,7 +880,7 @@ const wrapper$5 = "_wrapper_18jt2_1";
 const customSvg = "_customSvg_18jt2_8";
 const customPng = "_customPng_18jt2_11";
 const clickable$2 = "_clickable_18jt2_16";
-const styles$S = {
+const styles$T = {
   wrapper: wrapper$5,
   customSvg,
   customPng,
@@ -1563,8 +1563,8 @@ const Icon = ({
     "div",
     {
       className: cx$2(
-        styles$S.wrapper,
-        (clickable2 || onClick) && !disabledContext ? styles$S.clickable : ""
+        styles$T.wrapper,
+        (clickable2 || onClick) && !disabledContext ? styles$T.clickable : ""
       ),
       style: style2,
       onClick: (evt) => onClick && !disabledContext ? onClick(evt) : void 0,
@@ -1572,7 +1572,7 @@ const Icon = ({
       children: isValidElement(icon2) ? icon2 : typeof icon2 === "string" && (icon2.includes(".svg") || icon2.includes("image/svg")) ? /* @__PURE__ */ jsx(
         ReactSVG,
         {
-          className: styles$S.customSvg,
+          className: styles$T.customSvg,
           beforeInjection: (svg) => {
             if (size2) {
               svg.setAttribute("width", String(size2));
@@ -1581,12 +1581,12 @@ const Icon = ({
           },
           src: icon2
         }
-      ) : typeof icon2 === "string" && (icon2.includes(".png") || icon2.includes("image/png")) ? /* @__PURE__ */ jsx("img", { alt: "icon", className: styles$S.customPng, src: icon2 }) : typeof icon2 === "string" ? /* @__PURE__ */ jsx(NamedIcon, { icon: icon2 }) : null
+      ) : typeof icon2 === "string" && (icon2.includes(".png") || icon2.includes("image/png")) ? /* @__PURE__ */ jsx("img", { alt: "icon", className: styles$T.customPng, src: icon2 }) : typeof icon2 === "string" ? /* @__PURE__ */ jsx(NamedIcon, { icon: icon2 }) : null
     }
   );
 };
 const Chevron = ({ expanded: expanded2 }) => {
-  return /* @__PURE__ */ jsx("span", { className: cx$2(styles$T.chevron, expanded2 ? styles$T.expanded : ""), children: /* @__PURE__ */ jsx(Icon, { icon: IconType.CHEVRON_RIGHT }) });
+  return /* @__PURE__ */ jsx("span", { className: cx$2(styles$U.chevron, expanded2 ? styles$U.expanded : ""), children: /* @__PURE__ */ jsx(Icon, { icon: IconType.CHEVRON_RIGHT }) });
 };
 const accordion = "_accordion_15p8j_1";
 const accordionHeader = "_accordionHeader_15p8j_5";
@@ -1597,7 +1597,7 @@ const accordionContent = "_accordionContent_15p8j_18";
 const expanded$1 = "_expanded_15p8j_36";
 const padding$3 = "_padding_15p8j_44";
 const squareBottom = "_squareBottom_15p8j_47";
-const styles$R = {
+const styles$S = {
   accordion,
   accordionHeader,
   heading: heading$6,
@@ -1622,21 +1622,21 @@ const AccordionBase = ({
     "div",
     {
       className: cx$2(
-        styles$R.accordion,
-        bordered2 ? styles$R.bordered : "",
-        expanded2 ? styles$R.expanded : "",
-        squareBottom2 ? styles$R.squareBottom : ""
+        styles$S.accordion,
+        bordered2 ? styles$S.bordered : "",
+        expanded2 ? styles$S.expanded : "",
+        squareBottom2 ? styles$S.squareBottom : ""
       ),
       children: [
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: cx$2(styles$R.accordionHeader, onClick ? styles$R.clickable : ""),
+            className: cx$2(styles$S.accordionHeader, onClick ? styles$S.clickable : ""),
             onClick,
             "data-testid": testId,
             children: [
               /* @__PURE__ */ jsx(Chevron, { expanded: expanded2 }),
-              /* @__PURE__ */ jsx("div", { className: styles$R.heading, children: heading2 })
+              /* @__PURE__ */ jsx("div", { className: styles$S.heading, children: heading2 })
             ]
           }
         ),
@@ -1644,8 +1644,8 @@ const AccordionBase = ({
           "div",
           {
             className: cx$2(
-              styles$R.accordionContent,
-              bordered2 && padding2 ? styles$R.padding : ""
+              styles$S.accordionContent,
+              bordered2 && padding2 ? styles$S.padding : ""
             ),
             children
           }
@@ -1723,7 +1723,7 @@ const disabled$a = "_disabled_1ybyr_67";
 const noMargin$2 = "_noMargin_1ybyr_81";
 const isInTable$4 = "_isInTable_1ybyr_84";
 const helpIconEnabled$2 = "_helpIconEnabled_1ybyr_87";
-const styles$Q = {
+const styles$R = {
   checkbox,
   noLabel,
   small: small$d,
@@ -3748,7 +3748,7 @@ function useHover(_temp) {
 const tooltip = "_tooltip_wli9z_1";
 const error$9 = "_error_wli9z_15";
 const warning$c = "_warning_wli9z_19";
-const styles$P = {
+const styles$Q = {
   tooltip,
   error: error$9,
   warning: warning$c
@@ -3779,8 +3779,8 @@ const TooltipLayer = ({
     "div",
     {
       className: cx$2(
-        styles$P.tooltip,
-        error2 ? styles$P.error : warning2 ? styles$P.warning : ""
+        styles$Q.tooltip,
+        error2 ? styles$Q.error : warning2 ? styles$Q.warning : ""
       ),
       ...layerProps,
       children: [
@@ -3849,7 +3849,7 @@ const Tooltip = ({
 const helpIcon = "_helpIcon_hd0z2_1";
 const active$9 = "_active_hd0z2_9";
 const clickable = "_clickable_hd0z2_12";
-const styles$O = {
+const styles$P = {
   helpIcon,
   active: active$9,
   clickable
@@ -3880,9 +3880,9 @@ const HelpIcon = ({
     "div",
     {
       className: cx$2(
-        styles$O.helpIcon,
-        onClick ? styles$O.clickable : "",
-        active2 ? styles$O.active : ""
+        styles$P.helpIcon,
+        onClick ? styles$P.clickable : "",
+        active2 ? styles$P.active : ""
       ),
       onClick: onClickHelpIcon,
       "data-testid": testId,
@@ -3914,12 +3914,12 @@ const CheckBox = ({
     "div",
     {
       className: cx$2(
-        styles$Q.checkbox,
-        noMargin2 && styles$Q.noMargin,
-        isInTable2 && styles$Q.isInTable,
-        isDisabled && styles$Q.disabled,
-        small2 && styles$Q.small,
-        !label2 && styles$Q.noLabel
+        styles$R.checkbox,
+        noMargin2 && styles$R.noMargin,
+        isInTable2 && styles$R.isInTable,
+        isDisabled && styles$R.disabled,
+        small2 && styles$R.small,
+        !label2 && styles$R.noLabel
       ),
       "data-ix": dataix,
       onClick: (evt) => {
@@ -3947,10 +3947,10 @@ const CheckBox = ({
           key2
         ),
         /* @__PURE__ */ jsxs("label", { htmlFor: name2, children: [
-          /* @__PURE__ */ jsx("span", { className: styles$Q.checkmark, children: /* @__PURE__ */ jsx(Icon, { icon: IconType.CHECK }) }),
+          /* @__PURE__ */ jsx("span", { className: styles$R.checkmark, children: /* @__PURE__ */ jsx(Icon, { icon: IconType.CHECK }) }),
           label2
         ] }),
-        showHelp && /* @__PURE__ */ jsx("div", { className: styles$Q.helpIconEnabled, onClick: onClickHelp, children: /* @__PURE__ */ jsx(HelpIcon, { text: helpText }) })
+        showHelp && /* @__PURE__ */ jsx("div", { className: styles$R.helpIconEnabled, onClick: onClickHelp, children: /* @__PURE__ */ jsx(HelpIcon, { text: helpText }) })
       ]
     }
   );
@@ -3959,7 +3959,7 @@ const bordered$3 = "_bordered_1cgsf_1";
 const checkboxWrapper = "_checkboxWrapper_1cgsf_7";
 const padding$2 = "_padding_1cgsf_13";
 const contentWrapper = "_contentWrapper_1cgsf_16";
-const styles$N = {
+const styles$O = {
   bordered: bordered$3,
   checkboxWrapper,
   padding: padding$2,
@@ -4001,7 +4001,7 @@ const AccordionWithDefaultToggle = ({
     defaultEnabled
   });
   const content2 = /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    /* @__PURE__ */ jsx("div", { className: styles$N.checkboxWrapper, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: styles$O.checkboxWrapper, children: /* @__PURE__ */ jsx(
       CheckBox,
       {
         label: toggleLabel,
@@ -4012,7 +4012,7 @@ const AccordionWithDefaultToggle = ({
         checked: state.defaultEnabled
       }
     ) }),
-    state.accordionExpanded && /* @__PURE__ */ jsx("div", { className: styles$N.contentWrapper, children })
+    state.accordionExpanded && /* @__PURE__ */ jsx("div", { className: styles$O.contentWrapper, children })
   ] });
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsx(
@@ -4025,7 +4025,7 @@ const AccordionWithDefaultToggle = ({
         onClick: () => dispatch({ type: AccordionActionType.TOGGLE_ACCORDION })
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: cx$2(styles$N.bordered, padding2 ? styles$N.padding : ""), children: content2 })
+    /* @__PURE__ */ jsx("div", { className: cx$2(styles$O.bordered, padding2 ? styles$O.padding : ""), children: content2 })
   ] });
 };
 const inputInTable$b = "_inputInTable_1rzkf_1";
@@ -4083,7 +4083,7 @@ const buttonStyles = {
   groupOrderLast: groupOrderLast$4
 };
 const spinner = "_spinner_156m4_1";
-const styles$M = {
+const styles$N = {
   spinner
 };
 const Spinner$1 = ({
@@ -4094,7 +4094,7 @@ const Spinner$1 = ({
 }) => {
   const color2 = colored2 ? "var(--color-text-primary)" : dark2 ? "var(--color-text-muted)" : "white";
   const fontSize = small2 ? "var(--font-size)" : tiny ? "var(--font-size-xs)" : "var(--size)";
-  return /* @__PURE__ */ jsx("div", { className: styles$M.spinner, style: { color: color2, fontSize } });
+  return /* @__PURE__ */ jsx("div", { className: styles$N.spinner, style: { color: color2, fontSize } });
 };
 var ButtonType = /* @__PURE__ */ ((ButtonType2) => {
   ButtonType2["SUBMIT"] = "submit";
@@ -4213,7 +4213,7 @@ const Button$1 = ({
 const actions$2 = "_actions_1nid8_1";
 const actionComponentContainer = "_actionComponentContainer_1nid8_11";
 const active$7 = "_active_1nid8_33";
-const styles$L = {
+const styles$M = {
   actions: actions$2,
   actionComponentContainer,
   active: active$7
@@ -4246,7 +4246,7 @@ const buttonCaret = "_buttonCaret_uioq1_178";
 const component = "_component_uioq1_182";
 const right$7 = "_right_uioq1_188";
 const actions$1 = "_actions_uioq1_193";
-const styles$K = {
+const styles$L = {
   wrapper: wrapper$4,
   layer: layer$1,
   layerContainer: layerContainer$1,
@@ -4280,15 +4280,15 @@ const Heading$3 = ({ label: label2, onClick, icon: icon2, testId }) => /* @__PUR
   "div",
   {
     onClick: (evt) => evt.stopPropagation(),
-    className: styles$K.heading,
+    className: styles$L.heading,
     "data-testid": testId,
     children: [
       label2,
-      /* @__PURE__ */ jsx("span", { className: styles$K.headingIcon, onClick, children: icon2 })
+      /* @__PURE__ */ jsx("span", { className: styles$L.headingIcon, onClick, children: icon2 })
     ]
   }
 );
-const Divider$1 = () => /* @__PURE__ */ jsx("hr", { className: styles$K.divider });
+const Divider$1 = () => /* @__PURE__ */ jsx("hr", { className: styles$L.divider });
 const Option$2 = ({
   actions: actions2,
   label: label2,
@@ -4324,31 +4324,31 @@ const Option$2 = ({
     {
       href: url,
       className: cx$2(
-        styles$K.option,
-        disabled2 ? styles$K.disabled : "",
-        inline2 ? styles$K.inline : "",
-        selected2 ? styles$K.selected : ""
+        styles$L.option,
+        disabled2 ? styles$L.disabled : "",
+        inline2 ? styles$L.inline : "",
+        selected2 ? styles$L.selected : ""
       ),
       onClick: handleClick2,
       "data-testid": testId,
       children: [
-        icon2 ? /* @__PURE__ */ jsx("span", { className: styles$K.icon, children: /* @__PURE__ */ jsx(Icon, { icon: icon2 }) }) : null,
-        /* @__PURE__ */ jsxs("div", { className: styles$K.optionContent, children: [
+        icon2 ? /* @__PURE__ */ jsx("span", { className: styles$L.icon, children: /* @__PURE__ */ jsx(Icon, { icon: icon2 }) }) : null,
+        /* @__PURE__ */ jsxs("div", { className: styles$L.optionContent, children: [
           upload && /* @__PURE__ */ jsx(
             "input",
             {
               type: "file",
-              className: styles$K.fileInput,
+              className: styles$L.fileInput,
               onChange: (evt) => {
                 onChange == null ? void 0 : onChange(evt.target.files);
                 close2 == null ? void 0 : close2();
               }
             }
           ),
-          /* @__PURE__ */ jsx("span", { className: styles$K.label, title: `${title2 || label2}`, children: label2 }),
-          /* @__PURE__ */ jsxs("div", { className: styles$K.right, children: [
-            /* @__PURE__ */ jsx("span", { className: styles$K.description, children: description2 }),
-            !!(actions2 == null ? void 0 : actions2.length) && /* @__PURE__ */ jsx("div", { className: styles$K.actions, children: /* @__PURE__ */ jsx(Actions, { actions: actions2 }) })
+          /* @__PURE__ */ jsx("span", { className: styles$L.label, title: `${title2 || label2}`, children: label2 }),
+          /* @__PURE__ */ jsxs("div", { className: styles$L.right, children: [
+            /* @__PURE__ */ jsx("span", { className: styles$L.description, children: description2 }),
+            !!(actions2 == null ? void 0 : actions2.length) && /* @__PURE__ */ jsx("div", { className: styles$L.actions, children: /* @__PURE__ */ jsx(Actions, { actions: actions2 }) })
           ] })
         ] })
       ]
@@ -4481,7 +4481,7 @@ const Layer$2 = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cx$2(styles$K.layer, isNested ? styles$K.nested : null),
+      className: cx$2(styles$L.layer, isNested ? styles$L.nested : null),
       style: { maxWidth: width2, maxHeight },
       "data-testid": testId,
       children: /* @__PURE__ */ jsx("ul", { children: localSections.map((section2, i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
@@ -4518,7 +4518,7 @@ const light = "_light_nwprz_26";
 const small$b = "_small_nwprz_29";
 const dot = "_dot_nwprz_33";
 const hasChildren = "_hasChildren_nwprz_39";
-const styles$J = {
+const styles$K = {
   wrapper: wrapper$3,
   badge,
   label: label$9,
@@ -4546,16 +4546,16 @@ const Badge = ({
   small: small2 = false
 }) => {
   const visible = !(title2 === null && dot2 === false);
-  return /* @__PURE__ */ jsxs("div", { className: styles$J.wrapper, children: [
+  return /* @__PURE__ */ jsxs("div", { className: styles$K.wrapper, children: [
     visible && /* @__PURE__ */ jsx(
       "sup",
       {
         className: cx$2(
-          styles$J.badge,
-          isDark(color2) ? styles$J.dark : styles$J.light,
-          title2 !== null ? styles$J.label : styles$J.dot,
-          small2 ? styles$J.small : "",
-          children ? styles$J.hasChildren : ""
+          styles$K.badge,
+          isDark(color2) ? styles$K.dark : styles$K.light,
+          title2 !== null ? styles$K.label : styles$K.dot,
+          small2 ? styles$K.small : "",
+          children ? styles$K.hasChildren : ""
         ),
         style: {
           background: color2 || void 0,
@@ -4581,16 +4581,16 @@ const Button = ({
   active: active2
 }) => {
   const disabledContext = useContext(DisabledContext);
-  const buttonLabel2 = trigger2 === TriggerType.BUTTON ? label2 : trigger2 === TriggerType.DROP_DOWN_BUTTON ? /* @__PURE__ */ jsxs("span", { className: styles$K.middleAlignedInline, children: [
-    /* @__PURE__ */ jsx("span", { className: styles$K.buttonLabel, children: label2 }),
-    /* @__PURE__ */ jsx("span", { className: styles$K.buttonCaret, children: /* @__PURE__ */ jsx(Icon, { icon: IconType.CHEVRON_DOWN }) })
+  const buttonLabel2 = trigger2 === TriggerType.BUTTON ? label2 : trigger2 === TriggerType.DROP_DOWN_BUTTON ? /* @__PURE__ */ jsxs("span", { className: styles$L.middleAlignedInline, children: [
+    /* @__PURE__ */ jsx("span", { className: styles$L.buttonLabel, children: label2 }),
+    /* @__PURE__ */ jsx("span", { className: styles$L.buttonCaret, children: /* @__PURE__ */ jsx(Icon, { icon: IconType.CHEVRON_DOWN }) })
   ] }) : null;
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: cx$2(
-        styles$K.trigger,
-        disabled2 || disabledContext ? styles$K.disabled : null
+        styles$L.trigger,
+        disabled2 || disabledContext ? styles$L.disabled : null
       ),
       style: { width: width2 },
       children: /* @__PURE__ */ jsx(
@@ -4630,13 +4630,13 @@ const Text$1 = ({
     "div",
     {
       className: cx$2(
-        styles$K.trigger,
-        disabled2 ? styles$K.disabled : null,
-        isOpen2 ? styles$K.active : null
+        styles$L.trigger,
+        disabled2 ? styles$L.disabled : null,
+        isOpen2 ? styles$L.active : null
       ),
       children: [
-        /* @__PURE__ */ jsx("span", { className: styles$K.label, title: titleText, children: label2 }),
-        carat && carat === MenuCarat.RIGHT ? /* @__PURE__ */ jsx("span", { className: styles$K.arrow, children: /* @__PURE__ */ jsx(Icon, { icon: IconType.CHEVRON_RIGHT }) }) : carat && carat === MenuCarat.DOWN ? /* @__PURE__ */ jsx("span", { className: styles$K.arrow, children: /* @__PURE__ */ jsx(Icon, { icon: IconType.CHEVRON_DOWN }) }) : null
+        /* @__PURE__ */ jsx("span", { className: styles$L.label, title: titleText, children: label2 }),
+        carat && carat === MenuCarat.RIGHT ? /* @__PURE__ */ jsx("span", { className: styles$L.arrow, children: /* @__PURE__ */ jsx(Icon, { icon: IconType.CHEVRON_RIGHT }) }) : carat && carat === MenuCarat.DOWN ? /* @__PURE__ */ jsx("span", { className: styles$L.arrow, children: /* @__PURE__ */ jsx(Icon, { icon: IconType.CHEVRON_DOWN }) }) : null
       ]
     }
   );
@@ -4649,7 +4649,7 @@ const Component = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cx$2(styles$K.component, disabled2 ? styles$K.disabled : null),
+      className: cx$2(styles$L.component, disabled2 ? styles$L.disabled : null),
       "data-testid": testId,
       children: component2
     }
@@ -4730,7 +4730,7 @@ const Trigger$1 = React__default.forwardRef(
       "div",
       {
         ref: ref2,
-        className: styles$K.wrapper,
+        className: styles$L.wrapper,
         style: width2 ? { width: width2 } : {
           ...fullHeight && {
             height: "100%",
@@ -4952,7 +4952,7 @@ const DropDownMenu = ({
         "div",
         {
           ...layerProps,
-          className: styles$K.layerContainer,
+          className: styles$L.layerContainer,
           "data-testid": menu2.testId,
           onClick: (evt) => evt.stopPropagation(),
           children: /* @__PURE__ */ jsx(
@@ -5020,7 +5020,7 @@ const SubmenuActions = (props) => {
 const Actions = (props) => {
   const disabledContext = useContext(DisabledContext);
   const { actions: actions2 = [], closeLayer } = props;
-  return /* @__PURE__ */ jsx("div", { className: cx$2(styles$L.actions), children: actions2.map((action2, index2) => {
+  return /* @__PURE__ */ jsx("div", { className: cx$2(styles$M.actions), children: actions2.map((action2, index2) => {
     const hidden2 = (action2 == null ? void 0 : action2.hidden) || !action2 || !Object.keys(action2).length;
     if (!hidden2) {
       if (action2.childComponent && React__default.isValidElement(action2.childComponent)) {
@@ -5074,7 +5074,7 @@ const labelContainer = "_labelContainer_2k0cd_7";
 const active$5 = "_active_2k0cd_17";
 const disabled$7 = "_disabled_2k0cd_22";
 const separator = "_separator_2k0cd_27";
-const styles$I = {
+const styles$J = {
   breadcrumb,
   small: small$a,
   labelContainer,
@@ -5105,16 +5105,16 @@ const Link$2 = ({
     {
       onClick,
       className: cx$2(
-        styles$I.labelContainer,
-        active2 && styles$I.active,
-        (disabled2 || disabledContext) && styles$I.disabled
+        styles$J.labelContainer,
+        active2 && styles$J.active,
+        (disabled2 || disabledContext) && styles$J.disabled
       ),
       children: isLink ? /* @__PURE__ */ jsx("a", { href: url, children: label2 }) : isCustom ? element : label2
     }
   );
 };
 const Breadcrumb = ({ links, small: small2 = false }) => {
-  return /* @__PURE__ */ jsx("div", { className: cx$2(styles$I.breadcrumb, small2 && styles$I.small), children: links.map((link2, i) => {
+  return /* @__PURE__ */ jsx("div", { className: cx$2(styles$J.breadcrumb, small2 && styles$J.small), children: links.map((link2, i) => {
     const isFinal = links.length === i + 1;
     const { type, label: label2, url, onClick, active: active2, disabled: disabled2, element } = link2;
     return /* @__PURE__ */ jsxs("span", { children: [
@@ -5130,13 +5130,13 @@ const Breadcrumb = ({ links, small: small2 = false }) => {
           element
         }
       ),
-      !isFinal && /* @__PURE__ */ jsx("span", { className: styles$I.separator, children: "/" })
+      !isFinal && /* @__PURE__ */ jsx("span", { className: styles$J.separator, children: "/" })
     ] }, i);
   }) });
 };
 const label$8 = "_label_iu2wi_1";
 const buttonGroup = "_buttonGroup_iu2wi_11";
-const styles$H = {
+const styles$I = {
   label: label$8,
   buttonGroup
 };
@@ -5197,7 +5197,7 @@ const ButtonGroup = (props) => {
   };
   const renderHeader = () => {
     if (header2) {
-      return /* @__PURE__ */ jsx("label", { className: styles$H.label, children: header2 });
+      return /* @__PURE__ */ jsx("label", { className: styles$I.label, children: header2 });
     }
   };
   const renderButtons = () => {
@@ -5254,7 +5254,7 @@ const ButtonGroup = (props) => {
   };
   return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { children: [
     renderHeader(),
-    /* @__PURE__ */ jsx("div", { className: styles$H.buttonGroup, "data-testid": testId, children: renderButtons() })
+    /* @__PURE__ */ jsx("div", { className: styles$I.buttonGroup, "data-testid": testId, children: renderButtons() })
   ] }) });
 };
 const card = "_card_ucdeu_1";
@@ -5264,7 +5264,7 @@ const cardHeader = "_cardHeader_ucdeu_13";
 const cardContentBorderTop = "_cardContentBorderTop_ucdeu_19";
 const padding$1 = "_padding_ucdeu_22";
 const cardContent = "_cardContent_ucdeu_19";
-const styles$G = {
+const styles$H = {
   card,
   bordered: bordered$2,
   raised,
@@ -5285,20 +5285,20 @@ const Card = ({
     "div",
     {
       className: cx$2(
-        styles$G.card,
-        bordered2 ? styles$G.bordered : "",
-        raised2 ? styles$G.raised : ""
+        styles$H.card,
+        bordered2 ? styles$H.bordered : "",
+        raised2 ? styles$H.raised : ""
       ),
       style: { margin: margin2 },
       children: [
-        heading2 ? /* @__PURE__ */ jsx("div", { className: cx$2(styles$G.cardHeader), children: heading2 }) : null,
+        heading2 ? /* @__PURE__ */ jsx("div", { className: cx$2(styles$H.cardHeader), children: heading2 }) : null,
         /* @__PURE__ */ jsx(
           "div",
           {
             className: cx$2(
-              styles$G.cardContent,
-              heading2 ? styles$G.cardContentBorderTop : "",
-              padding2 ? styles$G.padding : ""
+              styles$H.cardContent,
+              heading2 ? styles$H.cardContentBorderTop : "",
+              padding2 ? styles$H.padding : ""
             ),
             children
           }
@@ -6530,7 +6530,7 @@ const Column = ({
 const divider = "_divider_2bfzh_1";
 const alignLeft = "_alignLeft_2bfzh_12";
 const alignRight = "_alignRight_2bfzh_15";
-const styles$F = {
+const styles$G = {
   divider,
   alignLeft,
   alignRight
@@ -6544,7 +6544,7 @@ const warning$a = "_warning_11ofj_16";
 const error$7 = "_error_11ofj_19";
 const small$9 = "_small_11ofj_22";
 const link$1 = "_link_11ofj_25";
-const styles$E = {
+const styles$F = {
   bold: bold$1,
   center,
   muted: muted$1,
@@ -6572,16 +6572,16 @@ const Text = ({
     "span",
     {
       className: cx$2(
-        bold2 && styles$E.bold,
-        center2 && styles$E.center,
-        error2 && styles$E.error,
-        faint2 && styles$E.faint,
-        link2 && styles$E.link,
-        muted2 && styles$E.muted,
-        onClick && styles$E.clickable,
-        small2 && styles$E.small,
-        success2 && styles$E.success,
-        warning2 && styles$E.warning
+        bold2 && styles$F.bold,
+        center2 && styles$F.center,
+        error2 && styles$F.error,
+        faint2 && styles$F.faint,
+        link2 && styles$F.link,
+        muted2 && styles$F.muted,
+        onClick && styles$F.clickable,
+        small2 && styles$F.small,
+        success2 && styles$F.success,
+        warning2 && styles$F.warning
       ),
       onClick,
       children
@@ -6591,9 +6591,9 @@ const Text = ({
 const cssAlignClass = (align) => {
   switch (align) {
     case Align.LEFT:
-      return styles$F.alignLeft;
+      return styles$G.alignLeft;
     case Align.RIGHT:
-      return styles$F.alignRight;
+      return styles$G.alignRight;
     default:
       return "";
   }
@@ -6606,7 +6606,7 @@ const Divider = ({
 }) => /* @__PURE__ */ jsx(
   "div",
   {
-    className: `${styles$F.divider} ${cssAlignClass(align)}`,
+    className: `${styles$G.divider} ${cssAlignClass(align)}`,
     style: {
       marginTop: margin2,
       marginBottom: margin2,
@@ -6618,7 +6618,7 @@ const Divider = ({
 const heading$4 = "_heading_yhdiy_1";
 const top$1 = "_top_yhdiy_10";
 const icons$2 = "_icons_yhdiy_20";
-const styles$D = {
+const styles$E = {
   heading: heading$4,
   top: top$1,
   icons: icons$2
@@ -6639,13 +6639,13 @@ const Heading$2 = ({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cx$2(styles$D.heading, top2 ? styles$D.top : ""),
+      className: cx$2(styles$E.heading, top2 ? styles$E.top : ""),
       style: { marginBottom },
       onClick,
       "data-testid": testId,
       children: [
         children,
-        /* @__PURE__ */ jsxs("div", { className: styles$D.icons, children: [
+        /* @__PURE__ */ jsxs("div", { className: styles$E.icons, children: [
           icon2 && /* @__PURE__ */ jsx(HelpIcon, { onClick: onIconClick, icon: icon2 }),
           isHelpIconDisplayed && /* @__PURE__ */ jsx(HelpIcon, { text: helpText, onClick: onClickHelp }),
           libraryIcon && /* @__PURE__ */ jsx(
@@ -6668,7 +6668,7 @@ const header$2 = "_header_18g0k_24";
 const dismiss$2 = "_dismiss_18g0k_33";
 const content$3 = "_content_18g0k_38";
 const footer$2 = "_footer_18g0k_47";
-const styles$C = {
+const styles$D = {
   dialog,
   inline: inline$3,
   scroll: scroll$3,
@@ -6703,16 +6703,16 @@ const Dialog = ({ dialog: dialog2 }) => {
     "div",
     {
       className: cx$2(
-        styles$C.dialog,
-        width2 ? styles$C.inline : null,
-        scroll3 ? styles$C.scroll : null
+        styles$D.dialog,
+        width2 ? styles$D.inline : null,
+        scroll3 ? styles$D.scroll : null
       ),
       style: { width: width2, height: height2 },
       "data-testid": testId ?? null,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: styles$C.header, children: [
+        /* @__PURE__ */ jsxs("div", { className: styles$D.header, children: [
           /* @__PURE__ */ jsx(Heading$2, { testId: testId && `${testId}-heading`, top: true, marginBottom: 0, children: heading2 }),
-          onClose ? /* @__PURE__ */ jsx("div", { className: styles$C.dismiss, children: /* @__PURE__ */ jsx(
+          onClose ? /* @__PURE__ */ jsx("div", { className: styles$D.dismiss, children: /* @__PURE__ */ jsx(
             Button$1,
             {
               icon: IconType.CLOSE,
@@ -6728,7 +6728,7 @@ const Dialog = ({ dialog: dialog2 }) => {
           "div",
           {
             "data-testid": testId && `${testId}-content`,
-            className: styles$C.content,
+            className: styles$D.content,
             style: { padding: contentPadding2 },
             children: convertStringToJsx(content2)
           }
@@ -6737,7 +6737,7 @@ const Dialog = ({ dialog: dialog2 }) => {
           "div",
           {
             "data-testid": testId && `${testId}-footer`,
-            className: styles$C.footer,
+            className: styles$D.footer,
             children: footer2
           }
         )
@@ -6770,7 +6770,7 @@ const active$4 = "_active_khmhl_197";
 const disabled$6 = "_disabled_khmhl_222";
 const tabsContent = "_tabsContent_khmhl_229";
 const resizeHandle = "_resizeHandle_khmhl_235";
-const styles$B = {
+const styles$C = {
   inputInTable: inputInTable$a,
   inputHover: inputHover$a,
   inputFocus: inputFocus$a,
@@ -6812,13 +6812,13 @@ const DrawerTabs = ({
   testId
 }) => {
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    /* @__PURE__ */ jsx("div", { className: styles$B.tabs, children: tabs2.map((tab2, index2) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: styles$C.tabs, children: tabs2.map((tab2, index2) => /* @__PURE__ */ jsx(
       "div",
       {
         className: cx$2(
-          styles$B.tab,
-          activeTab === index2 && open ? styles$B.active : "",
-          tab2.disabled ? styles$B.disabled : ""
+          styles$C.tab,
+          activeTab === index2 && open ? styles$C.active : "",
+          tab2.disabled ? styles$C.disabled : ""
         ),
         style: { background: background2 },
         onClick: !tab2.disabled ? () => handleTabClick(index2) : void 0,
@@ -6833,7 +6833,7 @@ const DrawerTabs = ({
         "div",
         {
           style: { width: typeof width2 === "number" ? `${width2}px` : width2 },
-          className: styles$B.tabsContent,
+          className: styles$C.tabsContent,
           "data-testid": testId && `${testId}-content-${index2}`,
           children: active2 && open && tab2.content
         },
@@ -8825,7 +8825,7 @@ const MIN_OPEN_WIDTH = 240;
 const ResizeHandle = forwardRef(
   (props, ref2) => {
     const { handleAxis, ...rest } = props;
-    return /* @__PURE__ */ jsx("div", { ref: ref2, className: styles$B.resizeHandle, ...rest, children: /* @__PURE__ */ jsx(Icon, { icon: IconType.DRAG }) });
+    return /* @__PURE__ */ jsx("div", { ref: ref2, className: styles$C.resizeHandle, ...rest, children: /* @__PURE__ */ jsx(Icon, { icon: IconType.DRAG }) });
   }
 );
 const DrawerResizeWrapper = ({
@@ -8852,7 +8852,7 @@ const DrawerResizeWrapper = ({
       handle: /* @__PURE__ */ jsx(ResizeHandle, {}),
       resizeHandles: right2 ? ["w"] : ["e"],
       axis: "x",
-      className: isResizing2 ? styles$B.isResizing : "",
+      className: isResizing2 ? styles$C.isResizing : "",
       onResizeStart: () => {
         if (setOpen)
           setOpen(true);
@@ -8953,17 +8953,17 @@ const Drawer = ({
         "div",
         {
           className: cx$2(
-            styles$B.drawer,
-            shadow4 ? styles$B.shadow : "",
-            fixed2 ? styles$B.fixed : styles$B.inline,
-            right2 ? styles$B.right : styles$B.left
+            styles$C.drawer,
+            shadow4 ? styles$C.shadow : "",
+            fixed2 ? styles$C.fixed : styles$C.inline,
+            right2 ? styles$C.right : styles$C.left
           ),
           style: { top: top2 },
           children: [
             /* @__PURE__ */ jsx(
               "div",
               {
-                className: cx$2(styles$B.drawerContent, border2 && styles$B.border),
+                className: cx$2(styles$C.drawerContent, border2 && styles$C.border),
                 style: {
                   background: background2,
                   borderColor: typeof border2 === "string" ? border2 : void 0,
@@ -8989,9 +8989,9 @@ const Drawer = ({
               "span",
               {
                 className: cx$2(
-                  styles$B.toggleButton,
-                  localOpen && (isStandardButton || isCustomButton && buttonAnimate) ? styles$B.toggleButtonOpen : "",
-                  buttonPosition === "top" ? styles$B.top : styles$B.bottom
+                  styles$C.toggleButton,
+                  localOpen && (isStandardButton || isCustomButton && buttonAnimate) ? styles$C.toggleButtonOpen : "",
+                  buttonPosition === "top" ? styles$C.top : styles$C.bottom
                 ),
                 children: isCustomButton ? button2 : /* @__PURE__ */ jsx(
                   Button$1,
@@ -9011,7 +9011,7 @@ const Drawer = ({
 };
 const empty$2 = "_empty_fe425_1";
 const text$2 = "_text_fe425_11";
-const styles$A = {
+const styles$B = {
   empty: empty$2,
   text: text$2
 };
@@ -9025,7 +9025,7 @@ const Empty = ({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: styles$A.empty,
+      className: styles$B.empty,
       style: { width: width2, height: height2 },
       "data-testid": testId,
       children: [
@@ -9057,14 +9057,14 @@ const Empty = ({
             )
           ] })
         ] }) }),
-        text2 !== "" && /* @__PURE__ */ jsx("div", { className: styles$A.text, children: /* @__PURE__ */ jsx(Text, { faint: true, children: text2 }) }),
+        text2 !== "" && /* @__PURE__ */ jsx("div", { className: styles$B.text, children: /* @__PURE__ */ jsx(Text, { faint: true, children: text2 }) }),
         children
       ]
     }
   );
 };
 const inputGroup = "_inputGroup_biuoa_1";
-const styles$z = {
+const styles$A = {
   inputGroup
 };
 const isDOMTypeElement = (element) => {
@@ -9089,7 +9089,7 @@ const InputGroup = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cx$2(styles$z.inputGroup),
+      className: cx$2(styles$A.inputGroup),
       style: { width: width2 },
       children: elements
     }
@@ -9111,7 +9111,7 @@ const right$5 = "_right_jnwnh_170";
 const groupOrderFirst$3 = "_groupOrderFirst_jnwnh_173";
 const groupOrderMiddle$3 = "_groupOrderMiddle_jnwnh_174";
 const groupOrderLast$3 = "_groupOrderLast_jnwnh_175";
-const styles$y = {
+const styles$z = {
   inputInTable: inputInTable$9,
   inputHover: inputHover$9,
   inputFocus: inputFocus$9,
@@ -9166,11 +9166,11 @@ const Input$1 = forwardRef(
       if (groupOrder) {
         switch (groupOrder) {
           case "first":
-            return styles$y.groupOrderFirst;
+            return styles$z.groupOrderFirst;
           case "last":
-            return styles$y.groupOrderLast;
+            return styles$z.groupOrderLast;
           default:
-            return styles$y.groupOrderMiddle;
+            return styles$z.groupOrderMiddle;
         }
       }
       return "";
@@ -9204,11 +9204,11 @@ const Input$1 = forwardRef(
             autoComplete: "off",
             disabled: disabled2 || disabledContext,
             className: cx$2(
-              styles$y.input,
-              error2 ? styles$y.error : warning2 ? styles$y.warning : "",
-              right2 ? styles$y.right : "",
-              small2 ? styles$y.small : "",
-              isInTable2 ? styles$y.isInTable : ""
+              styles$z.input,
+              error2 ? styles$z.error : warning2 ? styles$z.warning : "",
+              right2 ? styles$z.right : "",
+              small2 ? styles$z.small : "",
+              isInTable2 ? styles$z.isInTable : ""
             ),
             style: { width: width2 },
             "data-testid": testId
@@ -9219,7 +9219,7 @@ const Input$1 = forwardRef(
   }
 );
 const fileInput = "_fileInput_1elar_1";
-const styles$x = {
+const styles$y = {
   fileInput
 };
 var InputReaderMethods = /* @__PURE__ */ ((InputReaderMethods2) => {
@@ -9288,7 +9288,7 @@ const FileInput = ({
       {
         name: name2,
         ref: inputRef,
-        className: styles$x.fileInput,
+        className: styles$y.fileInput,
         type: "file",
         accept,
         onChange: (evt) => {
@@ -9309,7 +9309,7 @@ const FileInput = ({
 const label$7 = "_label_18pfe_1";
 const labelLeft$1 = "_labelLeft_18pfe_5";
 const icons$1 = "_icons_18pfe_13";
-const styles$w = {
+const styles$x = {
   label: label$7,
   labelLeft: labelLeft$1,
   icons: icons$1
@@ -9332,9 +9332,9 @@ const Label$2 = ({
   libraryIcon,
   labelLeft: labelLeft2 = false
 }) => {
-  return /* @__PURE__ */ jsx("div", { className: cx$2(styles$w.label, labelLeft2 ? styles$w.labelLeft : ""), children: /* @__PURE__ */ jsxs("label", { style: { width: width2 || "" }, children: [
+  return /* @__PURE__ */ jsx("div", { className: cx$2(styles$x.label, labelLeft2 ? styles$x.labelLeft : ""), children: /* @__PURE__ */ jsxs("label", { style: { width: width2 || "" }, children: [
     label2,
-    /* @__PURE__ */ jsxs("div", { className: styles$w.icons, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles$x.icons, children: [
       (helpText || onClickHelp) && /* @__PURE__ */ jsx(
         HelpIcon,
         {
@@ -9369,7 +9369,7 @@ const labelLeft = "_labelLeft_1xoss_5";
 const fieldInput = "_fieldInput_1xoss_9";
 const formRow$1 = "_formRow_1xoss_12";
 const button$2 = "_button_1xoss_22";
-const styles$v = {
+const styles$w = {
   field,
   labelLeft,
   fieldInput,
@@ -9400,7 +9400,7 @@ const Field = ({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cx$2(styles$v.field, labelLeft2 ? styles$v.labelLeft : ""),
+      className: cx$2(styles$w.field, labelLeft2 ? styles$w.labelLeft : ""),
       "data-testid": testId,
       children: [
         (label2 || labelLeft2) && /* @__PURE__ */ jsx(
@@ -9417,7 +9417,7 @@ const Field = ({
             labelLeft: labelLeft2
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: styles$v.fieldInput, children })
+        /* @__PURE__ */ jsx("div", { className: styles$w.fieldInput, children })
       ]
     }
   );
@@ -9448,11 +9448,11 @@ const Flex = ({
   );
 };
 const formRow = "_formRow_odewu_1";
-const styles$u = {
+const styles$v = {
   formRow
 };
 const FormRow = ({ children }) => {
-  return /* @__PURE__ */ jsx("div", { className: styles$u.formRow, children });
+  return /* @__PURE__ */ jsx("div", { className: styles$v.formRow, children });
 };
 const getGapValue = (gap) => {
   if (typeof gap === "boolean") {
@@ -9512,7 +9512,7 @@ const small$7 = "_small_b4w53_12";
 const groupOrderFirst$2 = "_groupOrderFirst_b4w53_16";
 const groupOrderMiddle$2 = "_groupOrderMiddle_b4w53_17";
 const groupOrderLast$2 = "_groupOrderLast_b4w53_21";
-const styles$t = {
+const styles$u = {
   addon,
   small: small$7,
   groupOrderFirst: groupOrderFirst$2,
@@ -9528,16 +9528,16 @@ const InputGroupAddon = ({
     if (groupOrder) {
       switch (groupOrder) {
         case GroupOrder.FIRST:
-          return styles$t.groupOrderFirst;
+          return styles$u.groupOrderFirst;
         case GroupOrder.LAST:
-          return styles$t.groupOrderLast;
+          return styles$u.groupOrderLast;
         default:
-          return styles$t.groupOrderMiddle;
+          return styles$u.groupOrderMiddle;
       }
     }
     return "";
   })();
-  return /* @__PURE__ */ jsx("span", { className: cx$2(styles$t.addon, order2, small2 ? styles$t.small : ""), children });
+  return /* @__PURE__ */ jsx("span", { className: cx$2(styles$u.addon, order2, small2 ? styles$u.small : ""), children });
 };
 function _typeof$2(o) {
   "@babel/helpers - typeof";
@@ -15944,7 +15944,7 @@ function useStartupValidation() {
     checkDoctype(document);
   }, []);
 }
-function usePrevious$2(current) {
+function usePrevious$3(current) {
   var ref2 = useRef(current);
   useEffect(function() {
     ref2.current = current;
@@ -16622,7 +16622,7 @@ function useTouchSensor(api) {
 }
 function useValidateSensorHooks(sensorHooks) {
   useDev(function() {
-    var previousRef = usePrevious$2(sensorHooks);
+    var previousRef = usePrevious$3(sensorHooks);
     useDevSetupWarning(function() {
       !(previousRef.current.length === sensorHooks.length) ? process.env.NODE_ENV !== "production" ? invariant$3(false, "Cannot change the amount of sensor hooks after mounting") : invariant$3(false) : void 0;
     });
@@ -17034,7 +17034,7 @@ function App(props) {
   var contextId = props.contextId, setCallbacks = props.setCallbacks, sensors = props.sensors, nonce = props.nonce, dragHandleUsageInstructions2 = props.dragHandleUsageInstructions;
   var lazyStoreRef = useRef(null);
   useStartupValidation();
-  var lastPropsRef = usePrevious$2(props);
+  var lastPropsRef = usePrevious$3(props);
   var getResponders = useCallback(function() {
     return createResponders(lastPropsRef.current);
   }, [lastPropsRef]);
@@ -17386,7 +17386,7 @@ function useDroppablePublisher(args) {
   var appContext = useRequiredContext(AppContext);
   var uniqueId3 = useUniqueId("droppable");
   var registry = appContext.registry, marshal = appContext.marshal;
-  var previousRef = usePrevious$2(args);
+  var previousRef = usePrevious$3(args);
   var descriptor = useMemo(function() {
     return {
       id: args.droppableId,
@@ -19069,7 +19069,7 @@ const dimmer = "_dimmer_477i5_21";
 const content$2 = "_content_477i5_44";
 const text$1 = "_text_477i5_49";
 const details$1 = "_details_477i5_53";
-const styles$s = {
+const styles$t = {
   loader,
   fullViewPortSize,
   cover,
@@ -19094,22 +19094,22 @@ const Loader = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cx$2(styles$s.loader, cover2 ? styles$s.cover : "", {
-        [styles$s.fullViewPortSize]: fullViewPortSize2
+      className: cx$2(styles$t.loader, cover2 ? styles$t.cover : "", {
+        [styles$t.fullViewPortSize]: fullViewPortSize2
       }),
       style: { width: width2, height: height2 },
       "data-testid": testId,
-      children: /* @__PURE__ */ jsx("div", { className: styles$s.dimmer, style: { background: background2, color: color2 }, children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsx("div", { className: styles$t.dimmer, style: { background: background2, color: color2 }, children: /* @__PURE__ */ jsxs(
         "div",
         {
-          className: styles$s.content,
+          className: styles$t.content,
           "data-testid": testId && `${testId}-content`,
           children: [
             children,
             text2 && /* @__PURE__ */ jsx(
               "div",
               {
-                className: styles$s.text,
+                className: styles$t.text,
                 "data-testid": testId && `${testId}-text`,
                 children: text2
               }
@@ -19117,7 +19117,7 @@ const Loader = ({
             details2 && /* @__PURE__ */ jsx(
               "div",
               {
-                className: styles$s.details,
+                className: styles$t.details,
                 "data-testid": testId && `${testId}-details`,
                 children: details2
               }
@@ -19321,7 +19321,7 @@ const absolute = "_absolute_s49vk_143";
 const legendToggle = "_legendToggle_s49vk_155";
 const detailsText = "_detailsText_s49vk_165";
 const footer$1 = "_footer_s49vk_169";
-const styles$r = {
+const styles$s = {
   inputInTable: inputInTable$7,
   inputHover: inputHover$7,
   inputFocus: inputFocus$7,
@@ -19360,9 +19360,9 @@ const Dismiss = ({ type, onClose, isInToast }) => {
     "div",
     {
       className: cx$2(
-        styles$r.dismiss,
-        isInToast ? styles$r.absolute : "",
-        type === MessageType.INFO ? styles$r.info : type === MessageType.SUCCESS ? styles$r.success : type === MessageType.WARNING ? styles$r.warning : type === MessageType.ERROR ? styles$r.error : null
+        styles$s.dismiss,
+        isInToast ? styles$s.absolute : "",
+        type === MessageType.INFO ? styles$s.info : type === MessageType.SUCCESS ? styles$s.success : type === MessageType.WARNING ? styles$s.warning : type === MessageType.ERROR ? styles$s.error : null
       ),
       children: /* @__PURE__ */ jsx(Icon, { icon: IconType.CLOSE, onClick: onClose })
     }
@@ -19384,8 +19384,8 @@ const reducer$1 = (state, action2) => {
 };
 const Details = ({ details: details2, visible, dispatch }) => {
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("div", { className: cx$2(styles$r.legendToggle), onClick: dispatch, children: visible ? "Hide details" : "Show details" }),
-    visible ? /* @__PURE__ */ jsx("div", { className: styles$r.detailsText, children: details2 }) : null
+    /* @__PURE__ */ jsx("div", { className: cx$2(styles$s.legendToggle), onClick: dispatch, children: visible ? "Hide details" : "Show details" }),
+    visible ? /* @__PURE__ */ jsx("div", { className: styles$s.detailsText, children: details2 }) : null
   ] });
 };
 const DialogIcon = ({ type }) => {
@@ -19420,15 +19420,15 @@ const Message = ({ message: message2 }) => {
     "div",
     {
       className: cx$2(
-        styles$r.container,
-        width2 ? styles$r.block : null,
-        type === MessageType.SUCCESS ? styles$r.success : type === MessageType.WARNING ? styles$r.warning : type === MessageType.ERROR ? styles$r.error : styles$r.info
+        styles$s.container,
+        width2 ? styles$s.block : null,
+        type === MessageType.SUCCESS ? styles$s.success : type === MessageType.WARNING ? styles$s.warning : type === MessageType.ERROR ? styles$s.error : styles$s.info
       ),
       style: { width: width2, maxHeight },
       children: [
-        /* @__PURE__ */ jsx("div", { children: icon2 ? /* @__PURE__ */ jsx("div", { className: styles$r.icon, children: /* @__PURE__ */ jsx(DialogIcon, { type }) }) : null }),
-        /* @__PURE__ */ jsxs("div", { className: styles$r.content, children: [
-          heading2 ? /* @__PURE__ */ jsx("div", { className: styles$r.heading, children: heading2 }) : null,
+        /* @__PURE__ */ jsx("div", { children: icon2 ? /* @__PURE__ */ jsx("div", { className: styles$s.icon, children: /* @__PURE__ */ jsx(DialogIcon, { type }) }) : null }),
+        /* @__PURE__ */ jsxs("div", { className: styles$s.content, children: [
+          heading2 ? /* @__PURE__ */ jsx("div", { className: styles$s.heading, children: heading2 }) : null,
           /* @__PURE__ */ jsx("div", { children: content2 }),
           details2 ? /* @__PURE__ */ jsx(
             Details,
@@ -19438,7 +19438,7 @@ const Message = ({ message: message2 }) => {
               dispatch: () => dispatch({ type: MessageToggle.TOGGLE_DETAILS })
             }
           ) : null,
-          !!footer2 && /* @__PURE__ */ jsx("div", { className: styles$r.footer, children: footer2 })
+          !!footer2 && /* @__PURE__ */ jsx("div", { className: styles$s.footer, children: footer2 })
         ] }),
         withDismiss ? /* @__PURE__ */ jsx(Dismiss, { type, onClose }) : null
       ]
@@ -19471,7 +19471,7 @@ const wrapper$2 = "_wrapper_sb0hc_1";
 const contentContainer = "_contentContainer_sb0hc_15";
 const centered = "_centered_sb0hc_24";
 const newLine = "_newLine_sb0hc_28";
-const styles$q = {
+const styles$r = {
   wrapper: wrapper$2,
   contentContainer,
   centered,
@@ -19491,12 +19491,12 @@ const Wrapper = ({ children }) => {
       }
     }
   }, []);
-  return /* @__PURE__ */ jsx("div", { ref: wrapperRef, tabIndex: -1, className: cx$2(styles$q.wrapper), children });
+  return /* @__PURE__ */ jsx("div", { ref: wrapperRef, tabIndex: -1, className: cx$2(styles$r.wrapper), children });
 };
 const Content$2 = ({ children, width: width2, centered: centered2 }) => /* @__PURE__ */ jsx(
   "div",
   {
-    className: cx$2(styles$q.contentContainer, centered2 ? styles$q.centered : ""),
+    className: cx$2(styles$r.contentContainer, centered2 ? styles$r.centered : ""),
     style: { maxWidth: width2 },
     children
   }
@@ -19536,7 +19536,7 @@ const menu$1 = "_menu_12x4u_1";
 const header = "_header_12x4u_11";
 const item$3 = "_item_12x4u_27";
 const heading$1 = "_heading_12x4u_32";
-const styles$p = {
+const styles$q = {
   menu: menu$1,
   header,
   item: item$3,
@@ -19547,9 +19547,9 @@ const Option$1 = ({
   onChange
 }) => {
   const { key: key2, label: label2, selected: selected2 } = option2;
-  return /* @__PURE__ */ jsx("div", { className: styles$p.item, children: /* @__PURE__ */ jsx(CheckBox, { label: label2, noMargin: true, checked: selected2, onChange }) }, key2);
+  return /* @__PURE__ */ jsx("div", { className: styles$q.item, children: /* @__PURE__ */ jsx(CheckBox, { label: label2, noMargin: true, checked: selected2, onChange }) }, key2);
 };
-const Heading$1 = ({ label: label2 }) => /* @__PURE__ */ jsx("div", { className: styles$p.heading, children: label2 });
+const Heading$1 = ({ label: label2 }) => /* @__PURE__ */ jsx("div", { className: styles$q.heading, children: label2 });
 var DropdownType = /* @__PURE__ */ ((DropdownType2) => {
   DropdownType2["HEADING"] = "Heading";
   DropdownType2["DIVIDER"] = "Divider";
@@ -19562,9 +19562,9 @@ const Layer$1 = ({
   showHeader,
   maxHeight
 }) => {
-  return /* @__PURE__ */ jsxs("div", { className: cx$2("menu", styles$p.menu), style: { maxHeight }, children: [
+  return /* @__PURE__ */ jsxs("div", { className: cx$2("menu", styles$q.menu), style: { maxHeight }, children: [
     showHeader && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-      /* @__PURE__ */ jsxs("div", { className: styles$p.header, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles$q.header, children: [
         /* @__PURE__ */ jsx(
           "a",
           {
@@ -19667,7 +19667,7 @@ const OptionDropdown = ({
 };
 const page = "_page_beskc_1";
 const scroll$1 = "_scroll_beskc_23";
-const styles$o = {
+const styles$p = {
   page,
   scroll: scroll$1
 };
@@ -19682,7 +19682,7 @@ const Page = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cx$2(styles$o.page, scroll3 ? styles$o.scroll : ""),
+      className: cx$2(styles$p.page, scroll3 ? styles$p.scroll : ""),
       style: { left: left2, padding: padding2, top: top2 },
       children
     }
@@ -19705,7 +19705,7 @@ const right$3 = "_right_2ynxq_182";
 const groupOrderFirst$1 = "_groupOrderFirst_2ynxq_193";
 const groupOrderMiddle$1 = "_groupOrderMiddle_2ynxq_194";
 const groupOrderLast$1 = "_groupOrderLast_2ynxq_198";
-const styles$n = {
+const styles$o = {
   inputInTable: inputInTable$6,
   inputHover: inputHover$6,
   inputFocus: inputFocus$6,
@@ -19793,11 +19793,11 @@ const NativeSelect = ({
     if (groupOrder) {
       switch (groupOrder) {
         case GroupOrder.FIRST:
-          return styles$n.groupOrderFirst;
+          return styles$o.groupOrderFirst;
         case GroupOrder.LAST:
-          return styles$n.groupOrderLast;
+          return styles$o.groupOrderLast;
         default:
-          return styles$n.groupOrderMiddle;
+          return styles$o.groupOrderMiddle;
       }
     }
     return "";
@@ -19815,12 +19815,12 @@ const NativeSelect = ({
         "select",
         {
           className: cx$2(
-            styles$n.select,
-            isUnselected ? styles$n.unSelected : "",
-            error2 ? styles$n.error : warning2 ? styles$n.warning : "",
-            right2 ? styles$n.right : "",
-            small2 ? styles$n.small : "",
-            isInTable2 ? styles$n.isInTable : "",
+            styles$o.select,
+            isUnselected ? styles$o.unSelected : "",
+            error2 ? styles$o.error : warning2 ? styles$o.warning : "",
+            right2 ? styles$o.right : "",
+            small2 ? styles$o.small : "",
+            isInTable2 ? styles$o.isInTable : "",
             order2
           ),
           style: {
@@ -20595,7 +20595,7 @@ const optionContent = "_optionContent_1lbvo_92";
 const label$5 = "_label_1lbvo_97";
 const icon$2 = "_icon_1lbvo_104";
 const details = "_details_1lbvo_109";
-const styles$m = {
+const styles$n = {
   layerContainer,
   layer,
   small: small$5,
@@ -20616,7 +20616,7 @@ const Heading = ({ label: label2 }) => {
     "div",
     {
       onClick: (evt) => evt.stopPropagation(),
-      className: styles$m.heading,
+      className: styles$n.heading,
       children: label2
     }
   );
@@ -20637,21 +20637,21 @@ const Option = ({
     "div",
     {
       className: cx$2(
-        styles$m.option,
-        disabled2 ? styles$m.disabled : "",
-        selected2 ? styles$m.selected : "",
-        focused2 ? styles$m.focused : ""
+        styles$n.option,
+        disabled2 ? styles$n.disabled : "",
+        selected2 ? styles$n.selected : "",
+        focused2 ? styles$n.focused : ""
       ),
       onClick: !disabled2 && onSelectOption ? onSelectOption : void 0,
       "data-testid": testId,
       children: [
-        /* @__PURE__ */ jsx("div", { className: styles$m.optionContent, children: /* @__PURE__ */ jsxs("span", { className: styles$m.label, title: label2, children: [
+        /* @__PURE__ */ jsx("div", { className: styles$n.optionContent, children: /* @__PURE__ */ jsxs("span", { className: styles$n.label, title: label2, children: [
           label2,
-          icon2 && /* @__PURE__ */ jsx("span", { className: styles$m.icon, children: icon2 })
+          icon2 && /* @__PURE__ */ jsx("span", { className: styles$n.icon, children: icon2 })
         ] }) }),
-        details2 && /* @__PURE__ */ jsx("div", { className: cx$2(styles$m.details), children: /* @__PURE__ */ jsx(Text, { faint: true, children: details2 }) }),
-        !!(actions2 == null ? void 0 : actions2.length) && /* @__PURE__ */ jsx("div", { className: cx$2(styles$m.actions), children: /* @__PURE__ */ jsx(Actions, { actions: actions2, closeLayer }) }),
-        /* @__PURE__ */ jsx("span", { className: styles$m.check, children: selected2 ? /* @__PURE__ */ jsx(Icon, { icon: IconType.CHECK }) : null })
+        details2 && /* @__PURE__ */ jsx("div", { className: cx$2(styles$n.details), children: /* @__PURE__ */ jsx(Text, { faint: true, children: details2 }) }),
+        !!(actions2 == null ? void 0 : actions2.length) && /* @__PURE__ */ jsx("div", { className: cx$2(styles$n.actions), children: /* @__PURE__ */ jsx(Actions, { actions: actions2, closeLayer }) }),
+        /* @__PURE__ */ jsx("span", { className: styles$n.check, children: selected2 ? /* @__PURE__ */ jsx(Icon, { icon: IconType.CHECK }) : null })
       ]
     }
   );
@@ -20763,8 +20763,8 @@ const Layer = ({
     "div",
     {
       "data-testid": testId,
-      className: cx$2(styles$m.layer, small2 && styles$m.small),
-      children: !sections.length ? /* @__PURE__ */ jsx("ul", { children: /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("div", { className: styles$m.message, style: { width: width2 }, children: "No matches" }) }) }) : /* @__PURE__ */ jsx(
+      className: cx$2(styles$n.layer, small2 && styles$n.small),
+      children: !sections.length ? /* @__PURE__ */ jsx("ul", { children: /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("div", { className: styles$n.message, style: { width: width2 }, children: "No matches" }) }) }) : /* @__PURE__ */ jsx(
         FixedSizeList,
         {
           ref: listRef,
@@ -20826,7 +20826,7 @@ const groupOrderFirst = "_groupOrderFirst_1qfoj_297";
 const groupOrderMiddle = "_groupOrderMiddle_1qfoj_298";
 const groupOrderLast = "_groupOrderLast_1qfoj_302";
 const detailedLabel = "_detailedLabel_1qfoj_307";
-const styles$l = {
+const styles$m = {
   inputInTable: inputInTable$5,
   inputHover: inputHover$5,
   inputFocus: inputFocus$5,
@@ -20884,11 +20884,11 @@ const MultiSelectedOptions = ({
     setDisplayedOptions(displayed);
     setOverflowOptions(overflow);
   }, [selectedOptions, isFontLoaded, width2]);
-  return /* @__PURE__ */ jsxs("div", { className: styles$l.multiOptions, children: [
+  return /* @__PURE__ */ jsxs("div", { className: styles$m.multiOptions, children: [
     displayedOptions.filter((option2) => option2 && option2.label).map((option2, index2) => /* @__PURE__ */ jsx(
       "span",
       {
-        className: styles$l.multiOption,
+        className: styles$m.multiOption,
         onClick: (evt) => {
           evt.stopPropagation();
         },
@@ -20901,7 +20901,7 @@ const MultiSelectedOptions = ({
       {
         text: overflowOptions.map((option2, index2) => /* @__PURE__ */ jsx("div", { children: option2.label }, index2)),
         display: "inline-flex",
-        children: /* @__PURE__ */ jsx("span", { className: styles$l.multiOption, children: displayedOptions.length ? `+${overflowOptions.length}` : `${overflowOptions.length} items` })
+        children: /* @__PURE__ */ jsx("span", { className: styles$m.multiOption, children: displayedOptions.length ? `+${overflowOptions.length}` : `${overflowOptions.length} items` })
       }
     )
   ] });
@@ -20927,22 +20927,22 @@ const Input = ({
     const inputWidth = ((_b = inputRef.current) == null ? void 0 : _b.offsetWidth) || 0;
     return containerWidth - inputWidth;
   };
-  return /* @__PURE__ */ jsxs("div", { className: styles$l.triggerInputContainer, ref: containerRef, children: [
-    !hasSelectedValues ? /* @__PURE__ */ jsx("span", { className: styles$l.placeHolder, children: !(searchValue == null ? void 0 : searchValue.length) ? placeholder3 : "" }) : isMulti2 ? /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs("div", { className: styles$m.triggerInputContainer, ref: containerRef, children: [
+    !hasSelectedValues ? /* @__PURE__ */ jsx("span", { className: styles$m.placeHolder, children: !(searchValue == null ? void 0 : searchValue.length) ? placeholder3 : "" }) : isMulti2 ? /* @__PURE__ */ jsx(
       MultiSelectedOptions,
       {
         selectedOptions,
         small: small2,
         width: getMultiOptionsWidth()
       }
-    ) : /* @__PURE__ */ jsx("span", { className: styles$l.selectedSingleValue, children: !(searchValue == null ? void 0 : searchValue.length) ? selectedOptions == null ? void 0 : selectedOptions.label : "" }),
+    ) : /* @__PURE__ */ jsx("span", { className: styles$m.selectedSingleValue, children: !(searchValue == null ? void 0 : searchValue.length) ? selectedOptions == null ? void 0 : selectedOptions.label : "" }),
     searchable ? /* @__PURE__ */ jsx(
       "input",
       {
         tabIndex: -1,
         ref: inputRef,
         size: inputSize,
-        className: cx$2(styles$l.input, error2 ? styles$l.error : ""),
+        className: cx$2(styles$m.input, error2 ? styles$m.error : ""),
         value: searchValue,
         onChange: (evt) => onChange(evt.target.value)
       }
@@ -20986,18 +20986,18 @@ const Trigger = ({
     if (groupOrder) {
       switch (groupOrder) {
         case GroupOrder.FIRST:
-          return styles$l.groupOrderFirst;
+          return styles$m.groupOrderFirst;
         case GroupOrder.LAST:
-          return styles$l.groupOrderLast;
+          return styles$m.groupOrderLast;
         default:
-          return styles$l.groupOrderMiddle;
+          return styles$m.groupOrderMiddle;
       }
     }
     return "";
   })();
   const selectedOptionsWithDetails = !Array.isArray(selectedOptions) && (selectedOptions == null ? void 0 : selectedOptions.details) ? {
     ...selectedOptions,
-    label: /* @__PURE__ */ jsxs("div", { className: cx$2(styles$l.detailedLabel), children: [
+    label: /* @__PURE__ */ jsxs("div", { className: cx$2(styles$m.detailedLabel), children: [
       /* @__PURE__ */ jsx(Text, { children: selectedOptions.label }),
       /* @__PURE__ */ jsx(Text, { muted: true, children: selectedOptions.details })
     ] })
@@ -21010,13 +21010,13 @@ const Trigger = ({
         ref: triggerRef,
         tabIndex,
         className: cx$2(
-          styles$l.trigger,
-          isOpen2 ? styles$l.isOpen : "",
-          error2 ? styles$l.error : warning2 ? styles$l.warning : "",
-          disabled2 ? styles$l.disabled : "",
-          small2 ? styles$l.small : "",
-          isInTable2 ? styles$l.isInTable : "",
-          right2 ? styles$l.right : "",
+          styles$m.trigger,
+          isOpen2 ? styles$m.isOpen : "",
+          error2 ? styles$m.error : warning2 ? styles$m.warning : "",
+          disabled2 ? styles$m.disabled : "",
+          small2 ? styles$m.small : "",
+          isInTable2 ? styles$m.isInTable : "",
+          right2 ? styles$m.right : "",
           order2
         ),
         onClick: (evt) => {
@@ -21043,12 +21043,12 @@ const Trigger = ({
               small: small2
             }
           ),
-          /* @__PURE__ */ jsx("span", { className: styles$l.icons, children: canClear ? /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("span", { className: styles$m.icons, children: canClear ? /* @__PURE__ */ jsx(
             "span",
             {
               className: cx$2(
-                styles$l.clearAll,
-                clearAllIsFocused ? styles$l.focus : ""
+                styles$m.clearAll,
+                clearAllIsFocused ? styles$m.focus : ""
               ),
               onClick: (evt) => {
                 evt.stopPropagation();
@@ -21058,7 +21058,7 @@ const Trigger = ({
               },
               children: /* @__PURE__ */ jsx(Icon, { icon: IconType.CLOSE })
             }
-          ) : /* @__PURE__ */ jsx("span", { className: cx$2(styles$l.iconOpen), children: /* @__PURE__ */ jsx(Icon, { icon: "chevron down" }) }) })
+          ) : /* @__PURE__ */ jsx("span", { className: cx$2(styles$m.iconOpen), children: /* @__PURE__ */ jsx(Icon, { icon: "chevron down" }) }) })
         ]
       }
     )
@@ -21599,7 +21599,7 @@ const CustomSelect = (props) => {
           }
         ),
         state.isLayerOpen && renderLayer(
-          /* @__PURE__ */ jsx("div", { ...layerProps, className: styles$m.layerContainer, children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("div", { ...layerProps, className: styles$n.layerContainer, children: /* @__PURE__ */ jsx(
             Layer,
             {
               listRef,
@@ -21848,7 +21848,7 @@ const validateSelectedPage = (selectedPage, numPages, errorMessageTemplate = "Se
   return valid;
 };
 const paginationContainer = "_paginationContainer_1tmz4_1";
-const styles$k = {
+const styles$l = {
   paginationContainer
 };
 const Pagination = ({ pagination }) => {
@@ -21885,7 +21885,7 @@ const Pagination = ({ pagination }) => {
       onSelectPage(Number(value));
     }
   };
-  return /* @__PURE__ */ jsxs("div", { className: styles$k.paginationContainer, children: [
+  return /* @__PURE__ */ jsxs("div", { className: styles$l.paginationContainer, children: [
     rowsPerPage && /* @__PURE__ */ jsx("div", { style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx(
       Select,
       {
@@ -21970,7 +21970,7 @@ const Pagination = ({ pagination }) => {
 const toggleBox = "_toggleBox_lhie5_1";
 const fullWidthStyleFix = "_fullWidthStyleFix_lhie5_8";
 const dismiss = "_dismiss_lhie5_13";
-const styles$j = {
+const styles$k = {
   toggleBox,
   fullWidthStyleFix,
   dismiss
@@ -22014,7 +22014,7 @@ const Popover = ({
       /* @__PURE__ */ jsxs(
         "div",
         {
-          className: fullWidth ? cx$2(styles$j.toggleBox, styles$j.fullWidthStyleFix) : cx$2(styles$j.toggleBox),
+          className: fullWidth ? cx$2(styles$k.toggleBox, styles$k.fullWidthStyleFix) : cx$2(styles$k.toggleBox),
           ...layerProps,
           children: [
             /* @__PURE__ */ jsxs("div", { children: [
@@ -22022,7 +22022,7 @@ const Popover = ({
                 content2,
                 { close: close2 }
               ) : content2,
-              showCloseButton && /* @__PURE__ */ jsx("div", { className: styles$j.dismiss, children: /* @__PURE__ */ jsx(Button$1, { small: true, round: true, onClick: close2, icon: IconType.CLOSE }) })
+              showCloseButton && /* @__PURE__ */ jsx("div", { className: styles$k.dismiss, children: /* @__PURE__ */ jsx(Button$1, { small: true, round: true, onClick: close2, icon: IconType.CLOSE }) })
             ] }),
             /* @__PURE__ */ jsx(
               Arrow,
@@ -22041,7 +22041,7 @@ const Popover = ({
   ] });
 };
 const printHeader = "_printHeader_o7xxx_1";
-const styles$i = {
+const styles$j = {
   printHeader
 };
 const PrintHeader = ({
@@ -22053,7 +22053,7 @@ const PrintHeader = ({
   {
     src: logo2,
     alt,
-    className: styles$i.printHeader,
+    className: styles$j.printHeader,
     style: { width: logoWidth }
   }
 );
@@ -22067,7 +22067,7 @@ const orange = "_orange_23ror_30";
 const yellow = "_yellow_23ror_33";
 const green = "_green_23ror_36";
 const label$3 = "_label_23ror_39";
-const styles$h = {
+const styles$i = {
   progress: progress$1,
   inverted,
   bar,
@@ -22081,14 +22081,14 @@ const styles$h = {
 };
 const getColor = (perct) => {
   if (perct < 20)
-    return styles$h.grey;
+    return styles$i.grey;
   if (perct < 40)
-    return styles$h.red;
+    return styles$i.red;
   if (perct < 60)
-    return styles$h.orange;
+    return styles$i.orange;
   if (perct < 80)
-    return styles$h.yellow;
-  return styles$h.green;
+    return styles$i.yellow;
+  return styles$i.green;
 };
 const ProgressBar$1 = ({
   width: width2 = "auto",
@@ -22101,21 +22101,21 @@ const ProgressBar$1 = ({
   return /* @__PURE__ */ jsx("div", { style: { width: width2 }, "data-percent": percentage, children: /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cx$2(styles$h.progress, inverted2 ? styles$h.inverted : ""),
+      className: cx$2(styles$i.progress, inverted2 ? styles$i.inverted : ""),
       style: { width: width2 },
       children: [
         /* @__PURE__ */ jsx(
           "div",
           {
             className: cx$2(
-              styles$h.bar,
-              showProgressColors ? getColor(percentage) : colored2 ? styles$h.colored : ""
+              styles$i.bar,
+              showProgressColors ? getColor(percentage) : colored2 ? styles$i.colored : ""
             ),
             style: { width: `${percentage}%` },
-            children: /* @__PURE__ */ jsx("div", { className: styles$h.label, children: !noLabel2 && `${percentage}%` })
+            children: /* @__PURE__ */ jsx("div", { className: styles$i.label, children: !noLabel2 && `${percentage}%` })
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: styles$h.label, children: !noLabel2 && `${percentage}%` })
+        /* @__PURE__ */ jsx("div", { className: styles$i.label, children: !noLabel2 && `${percentage}%` })
       ]
     }
   ) });
@@ -22129,7 +22129,7 @@ const noMargin$1 = "_noMargin_1fbik_32";
 const disabled$2 = "_disabled_1fbik_90";
 const isInTable = "_isInTable_1fbik_106";
 const helpIconEnabled$1 = "_helpIconEnabled_1fbik_111";
-const styles$g = {
+const styles$h = {
   wrapper: wrapper$1,
   inline: inline$1,
   radio,
@@ -22158,10 +22158,10 @@ const RadioInput = ({
     "div",
     {
       className: cx$2(
-        styles$g.radio,
-        disabled2 ? styles$g.disabled : null,
-        small2 ? styles$g.small : null,
-        noMargin2 ? styles$g.noMargin : null
+        styles$h.radio,
+        disabled2 ? styles$h.disabled : null,
+        small2 ? styles$h.small : null,
+        noMargin2 ? styles$h.noMargin : null
       ),
       onClick: onChange,
       "data-testid": testId,
@@ -22178,7 +22178,7 @@ const RadioInput = ({
           }
         ),
         /* @__PURE__ */ jsx("label", { "data-name": name2, "data-value": value, children: label2 }),
-        showHelp && /* @__PURE__ */ jsx("div", { className: styles$g.helpIconEnabled, onClick: onClickHelp, children: /* @__PURE__ */ jsx(HelpIcon, { text: helpText }) })
+        showHelp && /* @__PURE__ */ jsx("div", { className: styles$h.helpIconEnabled, onClick: onClickHelp, children: /* @__PURE__ */ jsx(HelpIcon, { text: helpText }) })
       ]
     }
   );
@@ -22218,13 +22218,13 @@ const RadioButton = ({
     "div",
     {
       className: cx$2(
-        styles$g.wrapper,
-        inline2 ? styles$g.inline : null,
-        classForContainer === "inline fields" ? styles$g.inline : null
+        styles$h.wrapper,
+        inline2 ? styles$h.inline : null,
+        classForContainer === "inline fields" ? styles$h.inline : null
         //deprecated
       ),
       children: [
-        mainLabel && /* @__PURE__ */ jsx("label", { className: cx$2(inline2 && styles$g.labelMargin), children: label2 }),
+        mainLabel && /* @__PURE__ */ jsx("label", { className: cx$2(inline2 && styles$h.labelMargin), children: label2 }),
         options.map(
           (option2, index2) => {
             const selected2 = option2.checked || option2.value === selectedValue || false;
@@ -49746,7 +49746,7 @@ function createContextHook(useHook) {
 function contextHookFactory(DefaultContext2) {
   return (selector, equalityCheck) => {
     const context2 = useContext(DefaultContext2);
-    const previousContext = usePrevious$1(context2);
+    const previousContext = usePrevious$2(context2);
     if (!context2) {
       throw new Error(
         "`useContextHook` must be placed inside the `Provider` returned by the `createContextState` method"
@@ -49768,7 +49768,7 @@ function contextHookFactory(DefaultContext2) {
     return equalityCheck(previousValue, value) ? previousValue : value;
   };
 }
-function usePrevious$1(value) {
+function usePrevious$2(value) {
   const ref2 = useRef();
   useIsomorphicLayoutEffect$3(() => {
     ref2.current = value;
@@ -52268,7 +52268,7 @@ var ReactFramework = class extends Framework {
 };
 _editorRef = /* @__PURE__ */ new WeakMap();
 var useIsomorphicLayoutEffect$2 = typeof document !== "undefined" ? useLayoutEffect$1 : useEffect;
-function usePrevious(value) {
+function usePrevious$1(value) {
   const ref2 = useRef();
   useIsomorphicLayoutEffect$2(() => {
     ref2.current = value;
@@ -52322,7 +52322,7 @@ function useFramework(props) {
 function useControlledEditor(framework) {
   const { state } = framework.props;
   const isControlledRef = useRef(!!state);
-  const previousValue = usePrevious(state);
+  const previousValue = usePrevious$1(state);
   useIsomorphicLayoutEffect$2(() => {
     const validUpdate = state ? isControlledRef.current === true : isControlledRef.current === false;
     invariant$2(validUpdate, {
@@ -52380,7 +52380,7 @@ function Remirror(props) {
 const all = "";
 const richTextToolbar = "_richTextToolbar_1gbkk_1";
 const richTextToolbarContainer = "_richTextToolbarContainer_1gbkk_5";
-const styles$f = {
+const styles$g = {
   richTextToolbar,
   richTextToolbarContainer
 };
@@ -52432,8 +52432,8 @@ const RichTextToolbar = ({
       active: active2.orderedList()
     }
   ];
-  return /* @__PURE__ */ jsxs("div", { className: styles$f.richTextToolbarContainer, children: [
-    /* @__PURE__ */ jsx("div", { className: styles$f.richTextToolbar, children: items.map((item2, index2) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs("div", { className: styles$g.richTextToolbarContainer, children: [
+    /* @__PURE__ */ jsx("div", { className: styles$g.richTextToolbar, children: items.map((item2, index2) => /* @__PURE__ */ jsx(
       Button$1,
       {
         small: true,
@@ -52461,7 +52461,7 @@ const inputWarning$4 = "_inputWarning_ta5ga_26";
 const inputDisabled$4 = "_inputDisabled_ta5ga_61";
 const hideScrollbars$4 = "_hideScrollbars_ta5ga_67";
 const richTextInput = "_richTextInput_ta5ga_77";
-const styles$e = {
+const styles$f = {
   inputInTable: inputInTable$4,
   inputHover: inputHover$4,
   inputFocus: inputFocus$4,
@@ -52497,7 +52497,7 @@ const RichTextInput = forwardRef(
       }
       setState(state2);
     };
-    return /* @__PURE__ */ jsx("div", { className: styles$e.richTextInput, children: /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx("div", { className: styles$f.richTextInput, children: /* @__PURE__ */ jsxs(
       Remirror,
       {
         manager,
@@ -52520,7 +52520,7 @@ const RichTextInput = forwardRef(
   }
 );
 const row = "_row_n16je_1";
-const styles$d = {
+const styles$e = {
   row
 };
 const Row$1 = ({
@@ -52541,7 +52541,7 @@ const Row$1 = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cx$2(styles$d.row),
+      className: cx$2(styles$e.row),
       style: {
         alignItems,
         justifyContent,
@@ -52667,7 +52667,7 @@ const item$2 = "_item_1ube5_140";
 const experimental = "_experimental_1ube5_155";
 const active$2 = "_active_1ube5_159";
 const icon$1 = "_icon_1ube5_163";
-const styles$c = {
+const styles$d = {
   inputInTable: inputInTable$3,
   inputHover: inputHover$3,
   inputFocus: inputFocus$3,
@@ -52700,10 +52700,10 @@ const TooltipIcon = memo(
           fontSize: 16,
           padding: "var(--padding-sm)",
           display: "block",
-          children: /* @__PURE__ */ jsx("span", { className: styles$c.icon, children: /* @__PURE__ */ jsx(Badge, { small: true, title: invalid ? "!" : void 0, margin: 4, children: /* @__PURE__ */ jsx(Icon, { icon: icon2 }) }) })
+          children: /* @__PURE__ */ jsx("span", { className: styles$d.icon, children: /* @__PURE__ */ jsx(Badge, { small: true, title: invalid ? "!" : void 0, margin: 4, children: /* @__PURE__ */ jsx(Icon, { icon: icon2 }) }) })
         }
       ),
-      /* @__PURE__ */ jsx("span", { className: styles$c.label, children: label2 })
+      /* @__PURE__ */ jsx("span", { className: styles$d.label, children: label2 })
     ] });
   },
   (prevProps, nextProps) => isEqual$1(prevProps, nextProps)
@@ -52715,16 +52715,16 @@ const Link$1 = ({
   onClick,
   testId
 }) => {
-  return /* @__PURE__ */ jsx("div", { className: styles$c.list, children: items.map((link2, i) => {
+  return /* @__PURE__ */ jsx("div", { className: styles$d.list, children: items.map((link2, i) => {
     const key2 = `${sectionIndex}_${i}`;
     return /* @__PURE__ */ jsx(
       "a",
       {
         href: link2.value,
         className: cx$2(
-          styles$c.item,
-          link2.isActive ? styles$c.active : "",
-          link2.isExperimental ? styles$c.experimental : ""
+          styles$d.item,
+          link2.isActive ? styles$d.active : "",
+          link2.isExperimental ? styles$d.experimental : ""
         ),
         onClick: (evt) => onClick(evt, link2.value, link2.label, link2.onClick),
         "data-testid": testId,
@@ -52749,7 +52749,7 @@ const Sections = ({
   onClick
 }) => {
   return /* @__PURE__ */ jsx(Fragment$1, { children: sections.map((section2, i) => /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
-    /* @__PURE__ */ jsx("h5", { className: styles$c.subtitle, children: section2.heading.toUpperCase() }),
+    /* @__PURE__ */ jsx("h5", { className: styles$d.subtitle, children: section2.heading.toUpperCase() }),
     /* @__PURE__ */ jsx(
       Link$1,
       {
@@ -52805,8 +52805,8 @@ const SideBar = memo(
             icon: IconType.LEFT
           }
         ),
-        children: /* @__PURE__ */ jsx("div", { className: cx$2(styles$c.sidebar, !isOpen2 ? styles$c.collapsed : ""), children: visible && /* @__PURE__ */ jsxs("div", { className: styles$c.inner, children: [
-          /* @__PURE__ */ jsx("h4", { className: styles$c.title, children: options.title }),
+        children: /* @__PURE__ */ jsx("div", { className: cx$2(styles$d.sidebar, !isOpen2 ? styles$d.collapsed : ""), children: visible && /* @__PURE__ */ jsxs("div", { className: styles$d.inner, children: [
+          /* @__PURE__ */ jsx("h4", { className: styles$d.title, children: options.title }),
           /* @__PURE__ */ jsx(
             Sections,
             {
@@ -55274,7 +55274,7 @@ const vertical = "_vertical_1a936_13";
 const hasArrows = "_hasArrows_1a936_17";
 const button$1 = "_button_1a936_21";
 const label$1 = "_label_1a936_24";
-const styles$b = {
+const styles$c = {
   container,
   small: small$2,
   hasMarks,
@@ -55326,7 +55326,7 @@ const Slider = ({
       }
     });
   };
-  const ButtonMin = () => /* @__PURE__ */ jsx("div", { className: styles$b.button, children: /* @__PURE__ */ jsx(
+  const ButtonMin = () => /* @__PURE__ */ jsx("div", { className: styles$c.button, children: /* @__PURE__ */ jsx(
     Button$1,
     {
       basic: true,
@@ -55337,7 +55337,7 @@ const Slider = ({
       icon: IconType.FAST_BACKWARD
     }
   ) });
-  const ButtonMax = () => /* @__PURE__ */ jsx("div", { className: styles$b.button, children: /* @__PURE__ */ jsx(
+  const ButtonMax = () => /* @__PURE__ */ jsx("div", { className: styles$c.button, children: /* @__PURE__ */ jsx(
     Button$1,
     {
       basic: true,
@@ -55352,10 +55352,10 @@ const Slider = ({
     "div",
     {
       className: cx$2(
-        styles$b.container,
-        small2 ? styles$b.small : "",
-        vertical2.enabled ? styles$b.vertical : "",
-        !_$1.isEmpty(marks) ? styles$b.hasMarks : ""
+        styles$c.container,
+        small2 ? styles$c.small : "",
+        vertical2.enabled ? styles$c.vertical : "",
+        !_$1.isEmpty(marks) ? styles$c.hasMarks : ""
       ),
       style: vertical2.enabled ? { width: vertical2.width, height: vertical2.height } : { width: width2 },
       children: [
@@ -55366,8 +55366,8 @@ const Slider = ({
             range: true,
             allowCross: false,
             className: cx$2(
-              (disabled2 || disabledContext) && styles$b.rcSliderDisabled,
-              showArrows && styles$b.hasArrows
+              (disabled2 || disabledContext) && styles$c.rcSliderDisabled,
+              showArrows && styles$c.hasArrows
             ),
             value,
             max,
@@ -55383,8 +55383,8 @@ const Slider = ({
           Slider$1,
           {
             className: cx$2(
-              (disabled2 || disabledContext) && styles$b.rcSliderDisabled,
-              showArrows && styles$b.hasArrows
+              (disabled2 || disabledContext) && styles$c.rcSliderDisabled,
+              showArrows && styles$c.hasArrows
             ),
             value,
             max,
@@ -55398,7 +55398,7 @@ const Slider = ({
           }
         ),
         showArrows && (vertical2.enabled ? /* @__PURE__ */ jsx(ButtonMin, {}) : /* @__PURE__ */ jsx(ButtonMax, {})),
-        label2 && /* @__PURE__ */ jsx("label", { className: styles$b.label, style: { width: labelWidth }, children: label2 })
+        label2 && /* @__PURE__ */ jsx("label", { className: styles$c.label, style: { width: labelWidth }, children: label2 })
       ]
     }
   );
@@ -55431,7 +55431,7 @@ const bordered = "_bordered_y9car_93";
 const scroll2 = "_scroll_y9car_98";
 const table = "_table_y9car_108";
 const striped = "_striped_y9car_188";
-const styles$a = {
+const styles$b = {
   inputInTable: inputInTable$2,
   inputHover: inputHover$2,
   inputFocus: inputFocus$2,
@@ -55446,7 +55446,7 @@ const styles$a = {
   striped
 };
 const title$1 = "_title_11pbp_1";
-const styles$9 = {
+const styles$a = {
   title: title$1
 };
 const Title$1 = ({
@@ -55470,14 +55470,14 @@ const Title$1 = ({
     }
     return /* @__PURE__ */ jsx("div", { children: actionsComponent });
   };
-  return /* @__PURE__ */ jsxs("div", { className: styles$9.title, children: [
+  return /* @__PURE__ */ jsxs("div", { className: styles$a.title, children: [
     isNameDefined ? /* @__PURE__ */ jsx(Heading$2, { children: /* @__PURE__ */ jsx("span", { "data-testid": testId, children: name2 }) }) : null,
     actionsContainer()
   ] });
 };
 const footer = "_footer_4sumy_1";
 const section = "_section_4sumy_7";
-const styles$8 = {
+const styles$9 = {
   footer,
   section
 };
@@ -55499,9 +55499,9 @@ const Footer = ({
     return false;
   };
   const showFooter = hasActions2 || hasContent || hasPagination();
-  return showFooter ? /* @__PURE__ */ jsxs("div", { className: styles$8.footer, children: [
-    hasContent ? /* @__PURE__ */ jsx("div", { className: styles$8.section, children: /* @__PURE__ */ jsx("div", { children: content2 }) }) : null,
-    hasActions2 || hasPagination() ? /* @__PURE__ */ jsxs("div", { className: styles$8.section, children: [
+  return showFooter ? /* @__PURE__ */ jsxs("div", { className: styles$9.footer, children: [
+    hasContent ? /* @__PURE__ */ jsx("div", { className: styles$9.section, children: /* @__PURE__ */ jsx("div", { children: content2 }) }) : null,
+    hasActions2 || hasPagination() ? /* @__PURE__ */ jsxs("div", { className: styles$9.section, children: [
       hasPagination() ? /* @__PURE__ */ jsx(Pagination, { pagination }) : /* @__PURE__ */ jsx("div", {}),
       hasActions2 && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Actions, { actions: actions2 }) })
     ] }) : null
@@ -55544,7 +55544,7 @@ const TableScrollWrapper = ({
       setVisibleRows(visibleRows + pageSize);
     }
   };
-  return /* @__PURE__ */ jsx("div", { id: "scrollWrapper", className: styles$a.scroll, children: infiniteScroll ? /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { id: "scrollWrapper", className: styles$b.scroll, children: infiniteScroll ? /* @__PURE__ */ jsx(
     InfiniteScroll,
     {
       dataLength: Math.min(rows.length, visibleRows + pageSize),
@@ -55564,7 +55564,7 @@ const expandableRow = "_expandableRow_11d5t_8";
 const flush2 = "_flush_11d5t_8";
 const dragIconCell = "_dragIconCell_11d5t_28";
 const dragIcon = "_dragIcon_11d5t_28";
-const styles$7 = {
+const styles$8 = {
   clickableRow,
   hoverableRow,
   rowActive,
@@ -55582,7 +55582,7 @@ const ExpandedContentRow = ({
     "td",
     {
       colSpan,
-      className: cx$2(styles$7.expandableRow, flush3 ? styles$7.flush : ""),
+      className: cx$2(styles$8.expandableRow, flush3 ? styles$8.flush : ""),
       children
     }
   ) });
@@ -55656,7 +55656,7 @@ const centerAligned = "_centerAligned_u3xdj_192";
 const leftAligned = "_leftAligned_u3xdj_198";
 const popover = "_popover_u3xdj_201";
 const disabledPointerEvents = "_disabledPointerEvents_u3xdj_204";
-const styles$6 = {
+const styles$7 = {
   inputInTable: inputInTable$1,
   inputHover: inputHover$1,
   inputFocus: inputFocus$1,
@@ -55718,7 +55718,7 @@ const InputCell = ({
     }
   );
 };
-const getStringName = (name2) => {
+const getStringName$1 = (name2) => {
   if (!name2)
     return "";
   if (typeof name2 === "string") {
@@ -55753,7 +55753,7 @@ const NumberInput = ({
 }) => {
   const [displayValue, setDisplayValue] = useState(value);
   const [validationError, setValidationError] = useState(null);
-  const stringName = getStringName(name2);
+  const stringName = getStringName$1(name2);
   const validateInputValue = (value2) => {
     let validation = validateNumber(value2);
     if (allowEmpty && value2 === "" || validation.valid) {
@@ -55889,7 +55889,7 @@ const InputCellWrapper = ({
   columnAlignment,
   testId
 }) => {
-  return /* @__PURE__ */ jsx("div", { className: styles$6.inputWrapper, children: cell2.type === "Input" ? /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: styles$7.inputWrapper, children: cell2.type === "Input" ? /* @__PURE__ */ jsx(
     InputCell,
     {
       cell: cell2,
@@ -55911,7 +55911,7 @@ const LinkCell = ({ cell: cell2, testId }) => {
   const isTooltipEnabled = (text2) => {
     return isStringNumberOrNode(text2);
   };
-  return /* @__PURE__ */ jsx("div", { className: styles$6.inputWrapper, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: styles$7.inputWrapper, children: /* @__PURE__ */ jsx(
     Tooltip,
     {
       error: !!error2,
@@ -55924,14 +55924,14 @@ const LinkCell = ({ cell: cell2, testId }) => {
         "div",
         {
           className: cx$2(
-            styles$6.staticCellContent,
-            error2 ? styles$6.error : warning2 ? styles$6.warning : ""
+            styles$7.staticCellContent,
+            error2 ? styles$7.error : warning2 ? styles$7.warning : ""
           ),
           children: /* @__PURE__ */ jsx(
             "a",
             {
               className: cx$2(
-                (cell2.disabled || disabledContext) && styles$6.disabledLink
+                (cell2.disabled || disabledContext) && styles$7.disabledLink
               ),
               onClick: cell2.disabled || disabledContext ? void 0 : (evt) => {
                 var _a;
@@ -55962,7 +55962,7 @@ const CheckBoxCell = ({ cell: cell2, testId }) => {
   );
 };
 const SliderCell = ({ cell: cell2 }) => {
-  return /* @__PURE__ */ jsx("div", { className: styles$6.inputWrapper, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: styles$7.inputWrapper, children: /* @__PURE__ */ jsx(
     Slider,
     {
       label: cell2.label,
@@ -55981,7 +55981,7 @@ const SliderCell = ({ cell: cell2 }) => {
 };
 const IconCell = ({ cell: cell2 }) => {
   const { tooltip: tooltip2, icon: icon2 } = cell2;
-  return /* @__PURE__ */ jsx("div", { className: styles$6.iconCellWrapper, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: styles$7.iconCellWrapper, children: /* @__PURE__ */ jsx(
     Tooltip,
     {
       text: tooltip2,
@@ -55997,11 +55997,11 @@ const ActionsCell = ({ cell: cell2 }) => {
 };
 const CellHelpIcon = ({ cell: cell2 }) => {
   const { helpIcon: helpIcon2 } = cell2;
-  return helpIcon2 ? /* @__PURE__ */ jsx("div", { className: styles$6.icon, children: /* @__PURE__ */ jsx(HelpIcon, { onClick: helpIcon2.onClick, text: helpIcon2.tooltip }) }) : null;
+  return helpIcon2 ? /* @__PURE__ */ jsx("div", { className: styles$7.icon, children: /* @__PURE__ */ jsx(HelpIcon, { onClick: helpIcon2.onClick, text: helpIcon2.tooltip }) }) : null;
 };
 const CellLibraryIcon = ({ cell: cell2 }) => {
   const { libraryIcon } = cell2;
-  return libraryIcon ? /* @__PURE__ */ jsx("div", { className: styles$6.icon, children: /* @__PURE__ */ jsx(
+  return libraryIcon ? /* @__PURE__ */ jsx("div", { className: styles$7.icon, children: /* @__PURE__ */ jsx(
     HelpIcon,
     {
       onClick: libraryIcon.onClick,
@@ -56012,7 +56012,7 @@ const CellLibraryIcon = ({ cell: cell2 }) => {
 };
 const Sort = ({ cell: cell2 }) => {
   const { hasSort, sort: sort2, sortPriority } = cell2;
-  return hasSort ? /* @__PURE__ */ jsxs("span", { className: styles$6.sortingCellIcon, children: [
+  return hasSort ? /* @__PURE__ */ jsxs("span", { className: styles$7.sortingCellIcon, children: [
     sort2 === "down" ? /* @__PURE__ */ jsx(Text, { link: true, children: /* @__PURE__ */ jsx(Icon, { icon: IconType.SORT_ASCENDING }) }) : sort2 === "up" ? /* @__PURE__ */ jsx(Text, { link: true, children: /* @__PURE__ */ jsx(Icon, { icon: IconType.SORT_DESCENDING }) }) : /* @__PURE__ */ jsx(Text, { faint: true, children: /* @__PURE__ */ jsx(Icon, { icon: IconType.SORT_DESCENDING }) }),
     sortPriority && sort2 ? /* @__PURE__ */ jsx("sup", { children: sortPriority }) : null
   ] }) : null;
@@ -56023,9 +56023,9 @@ const StaticCell = ({ cell: cell2, isHeader, testId }) => {
     "div",
     {
       className: cx$2(
-        styles$6.staticCellContent,
-        type === "Unit" ? styles$6.unit : "",
-        error2 ? styles$6.error : warning2 ? styles$6.warning : ""
+        styles$7.staticCellContent,
+        type === "Unit" ? styles$7.unit : "",
+        error2 ? styles$7.error : warning2 ? styles$7.warning : ""
       ),
       onClick: hasSort ? (evt) => onSort && onSort(evt) : () => {
       },
@@ -56040,7 +56040,7 @@ const StaticCell = ({ cell: cell2, isHeader, testId }) => {
       ]
     }
   );
-  return /* @__PURE__ */ jsx("div", { className: styles$6.inputWrapper, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: styles$7.inputWrapper, children: /* @__PURE__ */ jsx(
     Tooltip,
     {
       error: !!error2,
@@ -56063,7 +56063,7 @@ const PopoverCell = ({ cell: cell2, testId }) => {
       fullWidth,
       closeOnOutsideClick,
       disabled: disabled2,
-      children: /* @__PURE__ */ jsx("div", { className: styles$6.popover, children: /* @__PURE__ */ jsx(StaticCell, { cell: cell2, testId }) })
+      children: /* @__PURE__ */ jsx("div", { className: styles$7.popover, children: /* @__PURE__ */ jsx(StaticCell, { cell: cell2, testId }) })
     }
   );
 };
@@ -56131,15 +56131,15 @@ const Cell = ({
     headerAlignment: columnHeaderAlignment,
     isHeader
   };
-  const cellAlignmentStyle = getCellAlignment(alignment, styles$6);
-  const cellAlignmentText = getCellAlignment(alignment, styles$6, true);
-  const cellTypeClassName = cell2.type === CellType.INPUT || cell2.type === CellType.NUMBER_INPUT || cell2.type === CellType.SELECT || cell2.type === CellType.POPOVER ? styles$6.inputCell : cell2.type === CellType.SLIDER ? styles$6.sliderCell : cell2.type === CellType.CHECKBOX ? styles$6.checkBoxCell : cell2.type === CellType.ACTIONS ? styles$6.actionsCell : styles$6.staticCell;
+  const cellAlignmentStyle = getCellAlignment(alignment, styles$7);
+  const cellAlignmentText = getCellAlignment(alignment, styles$7, true);
+  const cellTypeClassName = cell2.type === CellType.INPUT || cell2.type === CellType.NUMBER_INPUT || cell2.type === CellType.SELECT || cell2.type === CellType.POPOVER ? styles$7.inputCell : cell2.type === CellType.SLIDER ? styles$7.sliderCell : cell2.type === CellType.CHECKBOX ? styles$7.checkBoxCell : cell2.type === CellType.ACTIONS ? styles$7.actionsCell : styles$7.staticCell;
   const className = cx$2(
-    styles$6.cell,
+    styles$7.cell,
     cellTypeClassName,
-    cell2.hasSort ? styles$6.sortingCell : null,
+    cell2.hasSort ? styles$7.sortingCell : null,
     cellAlignmentStyle,
-    cell2.breakWord ? styles$6.breakWord : ""
+    cell2.breakWord ? styles$7.breakWord : ""
   );
   const width2 = cellWidthProp ?? columnWidthProp ?? ((snapshot == null ? void 0 : snapshot.isDragging) && ref2.current && ref2.current.offsetWidth) ?? void 0;
   const style2 = { width: width2, minWidth: width2, ...styleProp };
@@ -56238,7 +56238,7 @@ const Row = ({
     if (row2.noDrag) {
       return /* @__PURE__ */ jsx("td", { "aria-labelledby": "unique-label-id" });
     }
-    return /* @__PURE__ */ jsx("td", { className: styles$7.dragIconCell, children: /* @__PURE__ */ jsx("div", { ...provided.dragHandleProps, className: styles$7.dragIcon, children: /* @__PURE__ */ jsx(Icon, { icon: IconType.DRAG }) }) });
+    return /* @__PURE__ */ jsx("td", { className: styles$8.dragIconCell, children: /* @__PURE__ */ jsx("div", { ...provided.dragHandleProps, className: styles$8.dragIcon, children: /* @__PURE__ */ jsx(Icon, { icon: IconType.DRAG }) }) });
   };
   return isHeader ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsxs(
@@ -56250,8 +56250,8 @@ const Row = ({
         onMouseLeave: onRowMouseLeave,
         onFocus: onRowFocus,
         className: cx$2(
-          onRowClick ? styles$7.clickableRow : null,
-          onRowMouseEnter ? styles$7.hoverableRow : null
+          onRowClick ? styles$8.clickableRow : null,
+          onRowMouseEnter ? styles$8.hoverableRow : null
         ),
         children: [
           draggableTable ? (
@@ -56282,9 +56282,9 @@ const Row = ({
         onMouseLeave: onRowMouseLeave,
         onFocus: onRowFocus,
         className: cx$2(
-          onRowClick && !onRowClick.noStyle ? styles$7.clickableRow : null,
-          onRowMouseEnter && !onRowMouseEnter.noStyle ? styles$7.hoverableRow : null,
-          active2 ? styles$7.rowActive : null
+          onRowClick && !onRowClick.noStyle ? styles$8.clickableRow : null,
+          onRowMouseEnter && !onRowMouseEnter.noStyle ? styles$8.hoverableRow : null,
+          active2 ? styles$8.rowActive : null
         ),
         ref: (provided == null ? void 0 : provided.innerRef) || null,
         ...(provided == null ? void 0 : provided.draggableProps) || null,
@@ -56383,7 +56383,7 @@ const Table = (props) => {
     ...propTable,
     rows
   };
-  const wrapperClass = cx$2(styles$a.wrapper, bordered2 ? styles$a.bordered : "");
+  const wrapperClass = cx$2(styles$b.wrapper, bordered2 ? styles$b.bordered : "");
   const wrapperStyles = {
     maxHeight,
     width: width2,
@@ -56415,7 +56415,7 @@ const Table = (props) => {
           return /* @__PURE__ */ jsx(TableScrollWrapper, { table: table2, children: ({ visibleRows }) => /* @__PURE__ */ jsxs(
             "table",
             {
-              className: cx$2(styles$a.table, striped2 ? styles$a.striped : ""),
+              className: cx$2(styles$b.table, striped2 ? styles$b.striped : ""),
               "data-testid": testId,
               ref: provided.innerRef,
               children: [
@@ -56493,7 +56493,7 @@ const Table = (props) => {
     /* @__PURE__ */ jsx(TableScrollWrapper, { table: table2, children: ({ visibleRows }) => /* @__PURE__ */ jsxs(
       "table",
       {
-        className: cx$2(styles$a.table, striped2 ? styles$a.striped : ""),
+        className: cx$2(styles$b.table, striped2 ? styles$b.striped : ""),
         "data-testid": testId,
         children: [
           /* @__PURE__ */ jsx("thead", { children: headers.map((row2, rowIndex) => {
@@ -56550,7 +56550,7 @@ const hidden = "_hidden_1y79t_58";
 const disabled$1 = "_disabled_1y79t_61";
 const left$1 = "_left_1y79t_65";
 const right$1 = "_right_1y79t_65";
-const styles$5 = {
+const styles$6 = {
   tabs,
   padding,
   margin,
@@ -56583,11 +56583,11 @@ const Label = ({
       id: label2 == null ? void 0 : label2.toString(),
       href: url,
       className: cx$2(
-        styles$5.item,
-        active2 ? styles$5.active : "",
-        disabled2 ? styles$5.disabled : "",
-        hidden2 && !active2 ? styles$5.hidden : "",
-        right2 ? styles$5.right : styles$5.left
+        styles$6.item,
+        active2 ? styles$6.active : "",
+        disabled2 ? styles$6.disabled : "",
+        hidden2 && !active2 ? styles$6.hidden : "",
+        right2 ? styles$6.right : styles$6.left
       ),
       onClick,
       "data-testid": testId,
@@ -56600,7 +56600,7 @@ const Content$1 = ({
   activeTabIndex,
   contentPadding: contentPadding2
 }) => {
-  return Array.isArray(children) ? /* @__PURE__ */ jsx("div", { className: cx$2(contentPadding2 ? styles$5.contentPadding : ""), children: children.map((child, index2) => activeTabIndex === index2 && child) }) : null;
+  return Array.isArray(children) ? /* @__PURE__ */ jsx("div", { className: cx$2(contentPadding2 ? styles$6.contentPadding : ""), children: children.map((child, index2) => activeTabIndex === index2 && child) }) : null;
 };
 const Tabs = ({
   name: name2 = void 0,
@@ -56688,9 +56688,9 @@ const Tabs = ({
         "div",
         {
           className: cx$2(
-            styles$5.tabs,
-            padding2 ? styles$5.padding : "",
-            margin2 ? styles$5.margin : ""
+            styles$6.tabs,
+            padding2 ? styles$6.padding : "",
+            margin2 ? styles$6.margin : ""
           ),
           "data-testid": testId,
           children: tabs2.map(renderTab)
@@ -56729,7 +56729,7 @@ const small$1 = "_small_66zck_116";
 const error = "_error_66zck_121";
 const warning$1 = "_warning_66zck_138";
 const monospace = "_monospace_66zck_155";
-const styles$4 = {
+const styles$5 = {
   inputInTable,
   inputHover,
   inputFocus,
@@ -56772,10 +56772,10 @@ const TextArea = ({
     "textarea",
     {
       className: cx$2(
-        styles$4.textarea,
-        error2 ? styles$4.error : "",
-        warning2 ? styles$4.warning : "",
-        monospace2 ? styles$4.monospace : ""
+        styles$5.textarea,
+        error2 ? styles$5.error : "",
+        warning2 ? styles$5.warning : "",
+        monospace2 ? styles$5.monospace : ""
       ),
       name: name2,
       value,
@@ -57921,7 +57921,7 @@ const small = "_small_1mo1i_25";
 const disabled = "_disabled_1mo1i_102";
 const noMargin = "_noMargin_1mo1i_113";
 const helpIconEnabled = "_helpIconEnabled_1mo1i_116";
-const styles$3 = {
+const styles$4 = {
   toggle: toggle$1,
   small,
   disabled,
@@ -57947,10 +57947,10 @@ const Toggle = ({
     "div",
     {
       className: cx$2(
-        styles$3.toggle,
-        isDisabled ? styles$3.disabled : null,
-        small2 ? styles$3.small : null,
-        noMargin2 ? styles$3.noMargin : null
+        styles$4.toggle,
+        isDisabled ? styles$4.disabled : null,
+        small2 ? styles$4.small : null,
+        noMargin2 ? styles$4.noMargin : null
       ),
       onClick: (evt) => {
         if (!isDisabled) {
@@ -57975,7 +57975,7 @@ const Toggle = ({
           }
         ),
         /* @__PURE__ */ jsx("label", { children: label2 }),
-        showHelp && /* @__PURE__ */ jsx("div", { className: styles$3.helpIconEnabled, onClick: onClickHelp, children: /* @__PURE__ */ jsx(HelpIcon, { text: helpText }) })
+        showHelp && /* @__PURE__ */ jsx("div", { className: styles$4.helpIconEnabled, onClick: onClickHelp, children: /* @__PURE__ */ jsx(HelpIcon, { text: helpText }) })
       ]
     }
   );
@@ -57996,7 +57996,7 @@ const button = "_button_gmfjn_139";
 const menu = "_menu_gmfjn_140";
 const active = "_active_gmfjn_168";
 const alert = "_alert_gmfjn_193";
-const styles$2 = {
+const styles$3 = {
   topbar,
   fixed,
   appSwitcher,
@@ -58015,7 +58015,7 @@ const styles$2 = {
   alert
 };
 const Warning = ({ warning: warning2 }) => {
-  return /* @__PURE__ */ jsx("div", { className: styles$2.alert, children: warning2 });
+  return /* @__PURE__ */ jsx("div", { className: styles$3.alert, children: warning2 });
 };
 const AppSwitcher = ({
   icon: icon2,
@@ -58023,7 +58023,7 @@ const AppSwitcher = ({
   onClick
 }) => {
   const content2 = /* @__PURE__ */ jsx(Icon, { icon: icon2 });
-  return url ? /* @__PURE__ */ jsx("a", { href: url, onClick, className: styles$2.appSwitcher, children: content2 }) : /* @__PURE__ */ jsx("div", { onClick, className: styles$2.appSwitcher, children: content2 });
+  return url ? /* @__PURE__ */ jsx("a", { href: url, onClick, className: styles$3.appSwitcher, children: content2 }) : /* @__PURE__ */ jsx("div", { onClick, className: styles$3.appSwitcher, children: content2 });
 };
 const Title = ({
   label: label2,
@@ -58032,12 +58032,12 @@ const Title = ({
   version: version2,
   onClick
 }) => {
-  const content2 = /* @__PURE__ */ jsxs("div", { className: styles$2.title, children: [
-    logo2 && /* @__PURE__ */ jsx("div", { className: styles$2.logo, children: logo2 }),
-    label2 && /* @__PURE__ */ jsx("span", { className: styles$2.label, children: label2 }),
-    version2 && /* @__PURE__ */ jsx("div", { className: styles$2.version, children: version2 })
+  const content2 = /* @__PURE__ */ jsxs("div", { className: styles$3.title, children: [
+    logo2 && /* @__PURE__ */ jsx("div", { className: styles$3.logo, children: logo2 }),
+    label2 && /* @__PURE__ */ jsx("span", { className: styles$3.label, children: label2 }),
+    version2 && /* @__PURE__ */ jsx("div", { className: styles$3.version, children: version2 })
   ] });
-  return /* @__PURE__ */ jsx("div", { className: cx$2(styles$2.item, styles$2.brand), children: url ? /* @__PURE__ */ jsx("a", { href: url, onClick, children: content2 }) : /* @__PURE__ */ jsx("div", { onClick, children: content2 }) });
+  return /* @__PURE__ */ jsx("div", { className: cx$2(styles$3.item, styles$3.brand), children: url ? /* @__PURE__ */ jsx("a", { href: url, onClick, children: content2 }) : /* @__PURE__ */ jsx("div", { onClick, children: content2 }) });
 };
 var ElementType = /* @__PURE__ */ ((ElementType2) => {
   ElementType2["LINK"] = "Link";
@@ -58065,7 +58065,7 @@ const Link = ({
   return /* @__PURE__ */ jsxs(
     "a",
     {
-      className: cx$2(styles$2.link, active2 ? styles$2.active : ""),
+      className: cx$2(styles$3.link, active2 ? styles$3.active : ""),
       href: url || "#",
       onClick: handleClick2,
       "aria-disabled": disabled2 || disabledContext,
@@ -58073,7 +58073,7 @@ const Link = ({
       role: onClick && !url ? "button" : void 0,
       children: [
         icon2,
-        /* @__PURE__ */ jsx("span", { className: styles$2.label, children: label2 })
+        /* @__PURE__ */ jsx("span", { className: styles$3.label, children: label2 })
       ]
     }
   );
@@ -58081,7 +58081,7 @@ const Link = ({
 const Element$1 = ({ element }) => {
   switch (element.type) {
     case ElementType.LINK:
-      return /* @__PURE__ */ jsx("div", { className: styles$2.item, children: /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx("div", { className: styles$3.item, children: /* @__PURE__ */ jsx(
         Link,
         {
           label: element.label,
@@ -58094,7 +58094,7 @@ const Element$1 = ({ element }) => {
         }
       ) });
     case ElementType.BUTTON:
-      return /* @__PURE__ */ jsx("div", { className: cx$2(styles$2.item, styles$2.button), children: /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx("div", { className: cx$2(styles$3.item, styles$3.button), children: /* @__PURE__ */ jsx(
         Button$1,
         {
           label: element.label,
@@ -58107,7 +58107,7 @@ const Element$1 = ({ element }) => {
         }
       ) });
     case ElementType.MENU:
-      return /* @__PURE__ */ jsx("div", { className: cx$2(styles$2.item, styles$2.menu), children: /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx("div", { className: cx$2(styles$3.item, styles$3.menu), children: /* @__PURE__ */ jsx(
         Menu,
         {
           maxHeight: "100%",
@@ -58128,7 +58128,7 @@ const Element$1 = ({ element }) => {
         }
       ) });
     case ElementType.COMPONENT:
-      return /* @__PURE__ */ jsx("div", { className: styles$2.item, children: element.component });
+      return /* @__PURE__ */ jsx("div", { className: styles$3.item, children: element.component });
     default:
       return null;
   }
@@ -58147,7 +58147,7 @@ const TopBar = ({
     /* @__PURE__ */ jsxs(
       "div",
       {
-        className: cx$2(styles$2.topbar, fixedPosition ? styles$2.fixed : ""),
+        className: cx$2(styles$3.topbar, fixedPosition ? styles$3.fixed : ""),
         style: { height: height2 },
         children: [
           !!appSwitcher2 && /* @__PURE__ */ jsx(
@@ -58158,7 +58158,7 @@ const TopBar = ({
               onClick: appSwitcher2.onClick
             }
           ),
-          /* @__PURE__ */ jsxs("div", { className: styles$2.left, children: [
+          /* @__PURE__ */ jsxs("div", { className: styles$3.left, children: [
             title2 && /* @__PURE__ */ jsx(
               Title,
               {
@@ -58176,7 +58176,7 @@ const TopBar = ({
               return null;
             })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: styles$2.right, children: contentRight.map((element, i) => {
+          /* @__PURE__ */ jsx("div", { className: styles$3.right, children: contentRight.map((element, i) => {
             if (element) {
               return /* @__PURE__ */ jsx(Element$1, { element }, i);
             }
@@ -58190,7 +58190,7 @@ const TopBar = ({
 const popConfirm = "_popConfirm_1x6ye_1";
 const content = "_content_1x6ye_7";
 const buttons = "_buttons_1x6ye_13";
-const styles$1 = {
+const styles$2 = {
   popConfirm,
   content,
   buttons
@@ -58203,9 +58203,9 @@ const Content = ({
   onClickCancel,
   close: close2,
   testId
-}) => /* @__PURE__ */ jsxs("div", { className: styles$1.popConfirm, children: [
-  title2 && /* @__PURE__ */ jsx("div", { className: styles$1.content, children: /* @__PURE__ */ jsx(Text, { small: true, children: title2 }) }),
-  /* @__PURE__ */ jsxs("div", { className: styles$1.buttons, children: [
+}) => /* @__PURE__ */ jsxs("div", { className: styles$2.popConfirm, children: [
+  title2 && /* @__PURE__ */ jsx("div", { className: styles$2.content, children: /* @__PURE__ */ jsx(Text, { small: true, children: title2 }) }),
+  /* @__PURE__ */ jsxs("div", { className: styles$2.buttons, children: [
     /* @__PURE__ */ jsx(
       Button$1,
       {
@@ -69931,7 +69931,7 @@ const dropTarget = "_dropTarget_1lv9u_11";
 const draggingSource = "_draggingSource_1lv9u_14";
 const placeholderContainer = "_placeholderContainer_1lv9u_17";
 const placeholder2 = "_placeholder_1lv9u_17";
-const styles = {
+const styles$1 = {
   tree,
   toggle,
   dropTarget,
@@ -69979,7 +69979,7 @@ const TreeItem = ({
         {
           className: listStyles.itemHeader,
           children: [
-            hasChild && /* @__PURE__ */ jsx("div", { className: styles.toggle, children: /* @__PURE__ */ jsx(
+            hasChild && /* @__PURE__ */ jsx("div", { className: styles$1.toggle, children: /* @__PURE__ */ jsx(
               Button$1,
               {
                 basic: true,
@@ -69999,7 +69999,7 @@ const TreeItem = ({
     }
   );
 };
-const TreePlaceholder = ({ depth }) => /* @__PURE__ */ jsx("div", { className: styles.placeholder, style: { left: depth * 24 } });
+const TreePlaceholder = ({ depth }) => /* @__PURE__ */ jsx("div", { className: styles$1.placeholder, style: { left: depth * 24 } });
 const Tree = ({
   list: list2,
   draggable: draggable2 = false,
@@ -70086,10 +70086,10 @@ const Tree = ({
             listComponent: "div",
             listItemComponent: "div",
             classes: {
-              root: styles.tree,
-              draggingSource: styles.draggingSource,
-              dropTarget: styles.dropTarget,
-              placeholder: styles.placeholderContainer
+              root: styles$1.tree,
+              draggingSource: styles$1.draggingSource,
+              dropTarget: styles$1.dropTarget,
+              placeholder: styles$1.placeholderContainer
             },
             initialOpen: isInitialOpen
           }
@@ -70098,6 +70098,405 @@ const Tree = ({
     ) })
   ] });
 };
+const useRunAfterUpdate = () => {
+  const afterPaintRef = useRef(null);
+  useLayoutEffect$1(() => {
+    if (afterPaintRef.current) {
+      afterPaintRef.current();
+      afterPaintRef.current = null;
+    }
+  });
+  const runAfterUpdate = (fn) => {
+    afterPaintRef.current = fn;
+  };
+  return runAfterUpdate;
+};
+const usePrevious = (value) => {
+  const ref2 = useRef();
+  useEffect(() => {
+    ref2.current = value;
+  }, [value]);
+  return ref2.current;
+};
+const getPreferredUnit = (unitkey, unitTemplate) => {
+  const preferredUnit = unitTemplate == null ? void 0 : unitTemplate[unitkey];
+  if (!preferredUnit) {
+    console.log(
+      `Warning: unitTemplate is ${unitTemplate}, unitkey is ${unitkey}`
+    );
+    return unitFromQuantity(unitkey) ?? "";
+  }
+  return preferredUnit;
+};
+var PredefinedOptionsMenuState = /* @__PURE__ */ ((PredefinedOptionsMenuState2) => {
+  PredefinedOptionsMenuState2["CUSTOM"] = "custom";
+  PredefinedOptionsMenuState2["PREDEFINED"] = "predefined";
+  return PredefinedOptionsMenuState2;
+})(PredefinedOptionsMenuState || {});
+const isWrongValue = (val) => {
+  return val === "undefined" || val === void 0 || val === "" || val === "null" || val === null || val === "NaN" || isNaN(val);
+};
+const convertUnit = (stringValue = "", toUnit, defaultFromUnit = "", doNotConvertValue = false) => {
+  if (toUnit && !doNotConvertValue) {
+    try {
+      const result = isWrongValue(stringValue) ? stringValue : isValueWithUnit(stringValue) ? convertSamePrecision(stringValue, toUnit) : convertSamePrecision(withUnit(stringValue, defaultFromUnit), toUnit);
+      return getValue$1(result);
+    } catch (e2) {
+    }
+  }
+  return "";
+};
+const safeConvertValue = (value = "", toUnit, defaultFromUnit, doNotConvertValue) => {
+  const isWithUnit = isValueWithUnit(value);
+  const isNullEmptyUndefined = isWithUnit && isWrongValue(getValue$1(value)) || !isWithUnit && isWrongValue(value);
+  const convertedValue = isWithUnit ? !isNullEmptyUndefined ? convertUnit(getValue$1(value), toUnit, defaultFromUnit, doNotConvertValue) : "" : !isNullEmptyUndefined ? value : "";
+  return convertedValue;
+};
+const getStringName = (name2) => {
+  if (isObject$5(name2) && !isArray$1(name2) && !isFunction$3(name2)) {
+    return get$2(name2, "fieldName", "");
+  }
+  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 predefinedMenuActive = "_predefinedMenuActive_1yvt4_1";
+const styles = {
+  predefinedMenuActive
+};
+const UnitInput = ({
+  name: name2,
+  placeholder: placeholder3 = "",
+  disabled: disabled2 = false,
+  disabledUnit = false,
+  error: error2 = null,
+  left: left2 = false,
+  small: small2 = false,
+  width: width2 = "100%",
+  value,
+  unitkey = "",
+  initUnit,
+  noConversion = false,
+  onChange = () => {
+  },
+  onClick = () => {
+  },
+  onFocus = () => {
+  },
+  onSwitchUnit = () => {
+  },
+  unitTemplate,
+  doNotConvertValue = false,
+  testId,
+  warning: warning2 = null,
+  predefinedOptions,
+  initialPredefinedOption = false,
+  shouldLinkAutomaticly = true,
+  selectedPredefinedOptionKey,
+  validationCallback = () => ({ name: "", error: null }),
+  disabledValidation = false,
+  allowEmpty = false,
+  autoValue
+}) => {
+  if (typeof value === "number") {
+    value = `${value}`;
+  }
+  const runAfterUpdate = useRunAfterUpdate();
+  const [propValue = "", propUnit = ""] = value !== void 0 ? split$1(value) : [];
+  const propAutoUnit = autoValue ? getUnit(autoValue) : "";
+  const defaultUnit = getPreferredUnit(unitkey, unitTemplate);
+  const initDisplayUnit = initUnit || defaultUnit || propUnit;
+  const previousInitUnit = usePrevious(initDisplayUnit);
+  const convertedValue = safeConvertValue(
+    value,
+    initDisplayUnit,
+    propUnit,
+    doNotConvertValue
+  );
+  const convertedAutoValue = safeConvertValue(
+    autoValue,
+    initDisplayUnit,
+    propAutoUnit,
+    doNotConvertValue
+  );
+  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 foundPredefinedMenuOption = predefinedOptions && predefinedOptions.find((el2) => {
+    if (selectedPredefinedOptionKey) {
+      return selectedPredefinedOptionKey === el2.valueKey;
+    }
+    const predefinedMenuItemUnit = isValueWithUnit(el2.value) ? getUnit(el2.value) : "";
+    return withUnit(
+      convertUnit(String(value), predefinedMenuItemUnit),
+      predefinedMenuItemUnit
+    ) === el2.value;
+  });
+  const getAlternativeUnits = () => {
+    if (unitkey) {
+      try {
+        const valueToList = String(isAutoValue ? autoValue : value ?? "");
+        let alternativeUnits2 = altUnitsList(valueToList, unitkey);
+        if (getValue$1(valueToList) === "") {
+          return alternativeUnits2.map((unitRow) => ["", unitRow[1]]);
+        }
+        return alternativeUnits2;
+      } catch (e2) {
+        return null;
+      }
+    }
+  };
+  const onSetValue = (evt) => {
+    var _a;
+    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);
+    let validation = validateNumber(rawValue);
+    const isLeadingZeroes = rawValue.search(RegExp(/(^0{2}\.)|(^0+[1-9])/g)) === 0;
+    if (!(allowEmpty && rawValue === "" || autoValue) && !isNumeric(rawValue) || !isValidNum(rawValue) || isLeadingZeroes) {
+      validation = {
+        ...validation,
+        valid: false,
+        errors: ["Invalid number format"]
+      };
+    }
+    if (validation.valid || rawValue === "" && autoValue || allowEmpty && rawValue === "") {
+      onChange({
+        target: {
+          value: newValue,
+          name: stringName2
+        }
+      });
+      const [val, u] = split$1(newValue);
+      setDisplayLayer({ value: val, unit: u });
+      setValidationError(null);
+      validationCallback(stringName2, null);
+    } else {
+      const firstError = ((_a = validation == null ? void 0 : validation.errors) == null ? void 0 : _a[0]) ?? null;
+      const errorMessage = getErrorMessage(firstError);
+      setDisplayLayer({ value: cleanInputValue, unit: displayLayer.unit });
+      setValidationError(errorMessage);
+      validationCallback(getStringName(name2), errorMessage);
+    }
+    runAfterUpdate(() => {
+      input2.selectionStart = currentCursorPosition;
+      input2.selectionEnd = currentCursorPosition;
+    });
+  };
+  const onClickUnit = (nextValue, nextUnit) => {
+    if (nextUnit === displayLayer.unit || isNaN(Number(nextValue))) {
+      return;
+    }
+    setDisplayLayer({ value: nextValue, unit: nextUnit });
+    if (onSwitchUnit) {
+      onSwitchUnit(nextUnit);
+    }
+  };
+  useEffect(() => {
+    var _a;
+    if (initDisplayUnit) {
+      let newValue, newUnit = "";
+      if (previousInitUnit !== initDisplayUnit) {
+        newValue = safeConvertValue(
+          String(value),
+          initDisplayUnit,
+          propUnit,
+          doNotConvertValue
+        );
+        newUnit = initDisplayUnit;
+      } else if (withUnit(displayLayer.value, displayLayer.unit) !== value) {
+        newValue = safeConvertValue(
+          String(value),
+          displayLayer.unit,
+          propUnit,
+          doNotConvertValue
+        );
+        newUnit = displayLayer.unit;
+      }
+      if (newValue !== void 0) {
+        setDisplayLayer({ value: newValue, unit: newUnit });
+      }
+      if (predefinedOptions) {
+        if (foundPredefinedMenuOption && shouldLinkAutomaticly) {
+          setPredefinedOptionsMenuState(PredefinedOptionsMenuState.PREDEFINED);
+        } else {
+          setPredefinedOptionsMenuState(PredefinedOptionsMenuState.CUSTOM);
+        }
+      }
+    }
+    const cleanValue = withUnit(
+      checkAndCleanDecimalComma(propValue),
+      (displayLayer == null ? void 0 : displayLayer.unit) || ""
+    );
+    const validation = validateNumber(getValue$1(cleanValue));
+    if (!validation.valid && !disabledValidation) {
+      const firstError = ((_a = validation == null ? void 0 : validation.errors) == null ? void 0 : _a[0]) ?? null;
+      const errorMessage = getErrorMessage(firstError);
+      setValidationError(errorMessage);
+    } else {
+      setValidationError(null);
+    }
+  }, [initDisplayUnit, value, error2, shouldLinkAutomaticly]);
+  const alternativeUnits = getAlternativeUnits();
+  const displayUnitLabel = label$b(displayLayer.unit) || displayLayer.unit || "";
+  const noConvert = noConversion || !alternativeUnits || alternativeUnits && alternativeUnits.length === 1;
+  const stringName = getStringName(name2);
+  let sectionsPredefinedMenu;
+  const createPredefinedOption = (el2) => {
+    const [value2, unit2 = ""] = isValueWithUnit(el2.value) ? split$1(el2.value) : [el2.value];
+    return {
+      type: MenuType.OPTION,
+      inline: true,
+      onClick: () => {
+        const validation = validateNumber(value2);
+        if (validation.valid && !disabled2) {
+          setPredefinedOptionsMenuState(PredefinedOptionsMenuState.PREDEFINED);
+          onChange({
+            target: {
+              value: el2.value,
+              name: typeof name2 === "string" ? name2 : (name2 == null ? void 0 : name2.fieldName) || "",
+              predefinedSelected: true,
+              predefinedOption: el2
+            }
+          });
+        }
+      },
+      label: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+        /* @__PURE__ */ jsx(Text, { children: el2.label }),
+        /* @__PURE__ */ jsx(Spacer, { width: "20px", height: "0" })
+      ] }),
+      description: isValueWithUnit(el2.value) ? `${value2} ${unit2}` : el2.value,
+      selected: foundPredefinedMenuOption === el2 && predefinedOptionsMenuState === PredefinedOptionsMenuState.PREDEFINED
+    };
+  };
+  sectionsPredefinedMenu = [
+    {
+      type: MenuType.OPTION,
+      inline: true,
+      onClick: () => {
+        if (predefinedOptionsMenuState !== PredefinedOptionsMenuState.CUSTOM && !disabled2) {
+          onChange({
+            target: {
+              value: withUnit(displayLayer.value, displayLayer.unit),
+              name: typeof name2 === "string" ? name2 : (name2 == null ? void 0 : name2.fieldName) || ""
+            }
+          });
+        }
+      },
+      label: "Custom",
+      selected: predefinedOptionsMenuState === PredefinedOptionsMenuState.CUSTOM
+    }
+  ];
+  if (predefinedOptions == null ? void 0 : predefinedOptions.length) {
+    const dynamicOptions = predefinedOptions.map(createPredefinedOption);
+    sectionsPredefinedMenu = [...sectionsPredefinedMenu, ...dynamicOptions];
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: predefinedOptionsMenuState === PredefinedOptionsMenuState.PREDEFINED ? cx$2(styles.predefinedMenuActive) : "",
+      children: /* @__PURE__ */ jsxs(InputGroup, { small: small2, width: width2, children: [
+        predefinedOptions && /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            text: predefinedOptionsMenuState === PredefinedOptionsMenuState.PREDEFINED ? foundPredefinedMenuOption == null ? void 0 : foundPredefinedMenuOption.label : "",
+            children: /* @__PURE__ */ jsx(
+              Menu,
+              {
+                maxHeight: 380,
+                groupOrder: "first",
+                testId: testId && `${testId}-predefined-menu`,
+                disabled: disabled2,
+                menu: {
+                  colored: true,
+                  trigger: "Component",
+                  component: /* @__PURE__ */ jsx(
+                    Button$1,
+                    {
+                      groupOrder: "first",
+                      active: predefinedOptionsMenuState === PredefinedOptionsMenuState.PREDEFINED,
+                      icon: predefinedOptionsMenuState === PredefinedOptionsMenuState.PREDEFINED ? "link" : "unlink"
+                    }
+                  ),
+                  small: small2,
+                  sections: sectionsPredefinedMenu
+                }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Input$1,
+          {
+            type: "text",
+            name: stringName,
+            testId,
+            disabled: disabled2,
+            placeholder: isAutoValue ? safeConvertValue(
+              autoValue,
+              displayLayer.unit,
+              propAutoUnit,
+              doNotConvertValue
+            ) : placeholder3,
+            value: displayLayer.value,
+            onChange: onSetValue,
+            onFocus,
+            error: error2 || validationError,
+            warning: warning2,
+            right: !left2
+          },
+          stringName
+        ),
+        displayUnitLabel && (noConvert ? /* @__PURE__ */ jsx(InputGroupAddon, { groupOrder: "last", children: displayUnitLabel }) : /* @__PURE__ */ jsx(
+          Menu,
+          {
+            maxHeight: 380,
+            groupOrder: "last",
+            disabled: disabledUnit,
+            testId: testId && `${testId}-menu`,
+            menu: {
+              label: displayUnitLabel,
+              trigger: "DropDownButton",
+              small: small2,
+              sections: alternativeUnits.map(([value2, altUnit, label2]) => {
+                const displayUnit = label2 || altUnit || "";
+                return {
+                  type: "Option",
+                  label: !isNaN(Number(value2)) ? value2 : "",
+                  inline: true,
+                  onClick: (evt) => {
+                    evt.stopPropagation();
+                    onClickUnit(isAutoValue ? "" : value2, altUnit);
+                  },
+                  description: displayUnit,
+                  selected: displayUnit === displayUnitLabel,
+                  testId: `${testId}-unit-${displayUnit}`
+                };
+              })
+            }
+          }
+        ))
+      ] })
+    }
+  );
+};
 export {
   Accordion,
   AccordionWithDefaultToggle,
@@ -70176,6 +70575,7 @@ export {
   TopBar,
   Tree,
   TriggerType,
+  UnitInput,
   dismissToast,
   readFile,
   toast,