@oliasoft-open-source/react-ui-library 4.7.2-beta-6 → 4.7.2-beta-7

package/dist/assets/{index-7PLAdoQ9.js → index-zmbFJmOv.js}

@@ -9277,7 +9277,7 @@ const wrapper$2 = "_wrapper_18jt2_1";
 const customSvg = "_customSvg_18jt2_8";
 const customPng = "_customPng_18jt2_11";
 const clickable$1 = "_clickable_18jt2_16";
-const styles$j = {
+const styles$m = {
   wrapper: wrapper$2,
   customSvg,
   customPng,
@@ -9881,8 +9881,8 @@ const Icon = ({
     "div",
     {
       className: cx$2(
-        styles$j.wrapper,
-        (clickable2 || onClick) && !disabledContext ? styles$j.clickable : ""
+        styles$m.wrapper,
+        (clickable2 || onClick) && !disabledContext ? styles$m.clickable : ""
       ),
       style,
       onClick: (evt) => onClick && !disabledContext ? onClick(evt) : void 0,
@@ -9890,7 +9890,7 @@ const Icon = ({
       children: reactExports.isValidElement(icon2) ? icon2 : typeof icon2 === "string" && (icon2.includes(".svg") || icon2.includes("image/svg")) ? /* @__PURE__ */ jsxRuntimeExports.jsx(
         ReactSVG,
         {
-          className: styles$j.customSvg,
+          className: styles$m.customSvg,
           beforeInjection: (svg) => {
             if (size2) {
               svg.setAttribute("width", String(size2));
@@ -9899,7 +9899,7 @@ const Icon = ({
           },
           src: icon2
         }
-      ) : typeof icon2 === "string" && (icon2.includes(".png") || icon2.includes("image/png")) ? /* @__PURE__ */ jsxRuntimeExports.jsx("img", { alt: "icon", className: styles$j.customPng, src: icon2 }) : typeof icon2 === "string" ? /* @__PURE__ */ jsxRuntimeExports.jsx(NamedIcon, { icon: icon2 }) : null
+      ) : typeof icon2 === "string" && (icon2.includes(".png") || icon2.includes("image/png")) ? /* @__PURE__ */ jsxRuntimeExports.jsx("img", { alt: "icon", className: styles$m.customPng, src: icon2 }) : typeof icon2 === "string" ? /* @__PURE__ */ jsxRuntimeExports.jsx(NamedIcon, { icon: icon2 }) : null
     }
   );
 };
@@ -11881,7 +11881,7 @@ function useHover(_temp) {
 const tooltip = "_tooltip_wli9z_1";
 const error$m = "_error_wli9z_15";
 const warning$3 = "_warning_wli9z_19";
-const styles$i = {
+const styles$l = {
   tooltip,
   error: error$m,
   warning: warning$3
@@ -11912,8 +11912,8 @@ const TooltipLayer = ({
     "div",
     {
       className: cx$2(
-        styles$i.tooltip,
-        error2 ? styles$i.error : warning2 ? styles$i.warning : ""
+        styles$l.tooltip,
+        error2 ? styles$l.error : warning2 ? styles$l.warning : ""
       ),
       ...layerProps,
       children: [
@@ -11990,7 +11990,7 @@ const Tooltip = ({
 const helpIcon = "_helpIcon_hd0z2_1";
 const active$7 = "_active_hd0z2_9";
 const clickable = "_clickable_hd0z2_12";
-const styles$h = {
+const styles$k = {
   helpIcon,
   active: active$7,
   clickable
@@ -12021,9 +12021,9 @@ const HelpIcon = ({
     "div",
     {
       className: cx$2(
-        styles$h.helpIcon,
-        onClick ? styles$h.clickable : "",
-        active2 ? styles$h.active : ""
+        styles$k.helpIcon,
+        onClick ? styles$k.clickable : "",
+        active2 ? styles$k.active : ""
       ),
       onClick: onClickHelpIcon,
       "data-testid": testId,
@@ -17530,15 +17530,15 @@ const iconOnly = "_iconOnly_1rzkf_153";
 const basic = "_basic_1rzkf_163";
 const muted$2 = "_muted_1rzkf_169";
 const disabled$3 = "_disabled_1rzkf_188";
-const small$3 = "_small_1rzkf_198";
+const small$4 = "_small_1rzkf_198";
 const pill = "_pill_1rzkf_203";
 const round = "_round_1rzkf_204";
 const error$l = "_error_1rzkf_276";
 const warning$2 = "_warning_1rzkf_293";
 const inverted = "_inverted_1rzkf_310";
-const groupOrderFirst$1 = "_groupOrderFirst_1rzkf_340";
-const groupOrderMiddle$1 = "_groupOrderMiddle_1rzkf_341";
-const groupOrderLast$1 = "_groupOrderLast_1rzkf_342";
+const groupOrderFirst$2 = "_groupOrderFirst_1rzkf_340";
+const groupOrderMiddle$2 = "_groupOrderMiddle_1rzkf_341";
+const groupOrderLast$2 = "_groupOrderLast_1rzkf_342";
 const buttonStyles = {
   inputInTable: inputInTable$5,
   inputHover: inputHover$5,
@@ -17557,18 +17557,18 @@ const buttonStyles = {
   basic,
   muted: muted$2,
   disabled: disabled$3,
-  small: small$3,
+  small: small$4,
   pill,
   round,
   error: error$l,
   warning: warning$2,
   inverted,
-  groupOrderFirst: groupOrderFirst$1,
-  groupOrderMiddle: groupOrderMiddle$1,
-  groupOrderLast: groupOrderLast$1
+  groupOrderFirst: groupOrderFirst$2,
+  groupOrderMiddle: groupOrderMiddle$2,
+  groupOrderLast: groupOrderLast$2
 };
 const spinner = "_spinner_156m4_1";
-const styles$g = {
+const styles$j = {
   spinner
 };
 const Spinner = ({
@@ -17579,7 +17579,7 @@ const Spinner = ({
 }) => {
   const color2 = colored ? "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__ */ jsxRuntimeExports.jsx("div", { className: styles$g.spinner, style: { color: color2, fontSize } });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$j.spinner, style: { color: color2, fontSize } });
 };
 var ButtonType = /* @__PURE__ */ ((ButtonType2) => {
   ButtonType2["SUBMIT"] = "submit";
@@ -17702,7 +17702,7 @@ const actions$2 = "_actions_1t7vd_1";
 const childComponent = "_childComponent_1t7vd_11";
 const actionComponentContainer = "_actionComponentContainer_1t7vd_14";
 const active$5 = "_active_1t7vd_36";
-const styles$f = {
+const styles$i = {
   actions: actions$2,
   childComponent,
   actionComponentContainer,
@@ -17736,7 +17736,7 @@ const buttonCaret = "_buttonCaret_1iw97_179";
 const component = "_component_1iw97_183";
 const right$4 = "_right_1iw97_189";
 const actions$1 = "_actions_1iw97_194";
-const styles$e = {
+const styles$h = {
   wrapper: wrapper$1,
   layer,
   layerContainer,
@@ -17770,15 +17770,15 @@ const Heading$1 = ({ label: label2, onClick, icon: icon2, testId }) => /* @__PUR
   "div",
   {
     onClick: (evt) => evt.stopPropagation(),
-    className: styles$e.heading,
+    className: styles$h.heading,
     "data-testid": testId,
     children: [
       label2,
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$e.headingIcon, onClick, children: icon2 })
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$h.headingIcon, onClick, children: icon2 })
     ]
   }
 );
-const Divider$1 = () => /* @__PURE__ */ jsxRuntimeExports.jsx("hr", { className: styles$e.divider });
+const Divider$1 = () => /* @__PURE__ */ jsxRuntimeExports.jsx("hr", { className: styles$h.divider });
 const Option = ({
   actions: actions2,
   label: label2,
@@ -17815,31 +17815,31 @@ const Option = ({
       href: url,
       to: url,
       className: cx$2(
-        styles$e.option,
-        disabled2 ? styles$e.disabled : "",
-        inline2 ? styles$e.inline : "",
-        selected2 ? styles$e.selected : ""
+        styles$h.option,
+        disabled2 ? styles$h.disabled : "",
+        inline2 ? styles$h.inline : "",
+        selected2 ? styles$h.selected : ""
       ),
       onClick: handleClick2,
       "data-testid": testId,
       children: [
-        icon2 ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$e.icon, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: icon2 }) }) : null,
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$e.optionContent, children: [
+        icon2 ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$h.icon, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: icon2 }) }) : null,
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$h.optionContent, children: [
           upload && /* @__PURE__ */ jsxRuntimeExports.jsx(
             "input",
             {
               type: "file",
-              className: styles$e.fileInput,
+              className: styles$h.fileInput,
               onChange: (evt) => {
                 onChange == null ? void 0 : onChange(evt.target.files);
                 close2 == null ? void 0 : close2();
               }
             }
           ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$e.label, title: `${title2 || label2}`, children: label2 }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$e.right, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$e.description, children: description2 }),
-            !!(actions2 == null ? void 0 : actions2.length) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$e.actions, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Actions, { actions: actions2 }) })
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$h.label, title: `${title2 || label2}`, children: label2 }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$h.right, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$h.description, children: description2 }),
+            !!(actions2 == null ? void 0 : actions2.length) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$h.actions, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Actions, { actions: actions2 }) })
           ] })
         ] })
       ]
@@ -17973,7 +17973,7 @@ const Layer = ({
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
-      className: cx$2(styles$e.layer, isNested ? styles$e.nested : null),
+      className: cx$2(styles$h.layer, isNested ? styles$h.nested : null),
       style: { maxWidth: width2, maxHeight },
       "data-testid": testId,
       children: /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { children: localSections.map((section, i) => /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -18004,16 +18004,16 @@ const badge = "_badge_nwprz_5";
 const label$3 = "_label_nwprz_11";
 const dark = "_dark_nwprz_23";
 const light = "_light_nwprz_26";
-const small$2 = "_small_nwprz_29";
+const small$3 = "_small_nwprz_29";
 const dot = "_dot_nwprz_33";
 const hasChildren = "_hasChildren_nwprz_39";
-const styles$d = {
+const styles$g = {
   wrapper,
   badge,
   label: label$3,
   dark,
   light,
-  small: small$2,
+  small: small$3,
   dot,
   hasChildren
 };
@@ -18035,16 +18035,16 @@ const Badge = ({
   small: small2 = false
 }) => {
   const visible = !(title2 === null && dot2 === false);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$d.wrapper, children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$g.wrapper, children: [
     visible && /* @__PURE__ */ jsxRuntimeExports.jsx(
       "sup",
       {
         className: cx$2(
-          styles$d.badge,
-          isDark(color2) ? styles$d.dark : styles$d.light,
-          title2 !== null ? styles$d.label : styles$d.dot,
-          small2 ? styles$d.small : "",
-          children ? styles$d.hasChildren : ""
+          styles$g.badge,
+          isDark(color2) ? styles$g.dark : styles$g.light,
+          title2 !== null ? styles$g.label : styles$g.dot,
+          small2 ? styles$g.small : "",
+          children ? styles$g.hasChildren : ""
         ),
         style: {
           background: color2 || void 0,
@@ -18070,16 +18070,16 @@ const Button = ({
   active: active2
 }) => {
   const disabledContext = reactExports.useContext(DisabledContext);
-  const buttonLabel2 = trigger2 === TriggerType.BUTTON ? label2 : trigger2 === TriggerType.DROP_DOWN_BUTTON ? /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: styles$e.middleAlignedInline, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$e.buttonLabel, children: label2 }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$e.buttonCaret, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: IconType.CHEVRON_DOWN }) })
+  const buttonLabel2 = trigger2 === TriggerType.BUTTON ? label2 : trigger2 === TriggerType.DROP_DOWN_BUTTON ? /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: styles$h.middleAlignedInline, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$h.buttonLabel, children: label2 }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$h.buttonCaret, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: IconType.CHEVRON_DOWN }) })
   ] }) : null;
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
       className: cx$2(
-        styles$e.trigger,
-        disabled2 || disabledContext ? styles$e.disabled : null
+        styles$h.trigger,
+        disabled2 || disabledContext ? styles$h.disabled : null
       ),
       style: { width: width2 },
       children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -18119,13 +18119,13 @@ const Text$1 = ({
     "div",
     {
       className: cx$2(
-        styles$e.trigger,
-        disabled2 ? styles$e.disabled : null,
-        isOpen ? styles$e.active : null
+        styles$h.trigger,
+        disabled2 ? styles$h.disabled : null,
+        isOpen ? styles$h.active : null
       ),
       children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$e.label, title: titleText, children: label2 }),
-        carat && carat === MenuCarat.RIGHT ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$e.arrow, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: IconType.CHEVRON_RIGHT }) }) : carat && carat === MenuCarat.DOWN ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$e.arrow, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: IconType.CHEVRON_DOWN }) }) : null
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$h.label, title: titleText, children: label2 }),
+        carat && carat === MenuCarat.RIGHT ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$h.arrow, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: IconType.CHEVRON_RIGHT }) }) : carat && carat === MenuCarat.DOWN ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$h.arrow, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: IconType.CHEVRON_DOWN }) }) : null
       ]
     }
   );
@@ -18138,7 +18138,7 @@ const Component = ({
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
-      className: cx$2(styles$e.component, disabled2 ? styles$e.disabled : null),
+      className: cx$2(styles$h.component, disabled2 ? styles$h.disabled : null),
       "data-testid": testId,
       children: component2
     }
@@ -18219,7 +18219,7 @@ const Trigger = React$4.forwardRef(
       "div",
       {
         ref: ref2,
-        className: styles$e.wrapper,
+        className: styles$h.wrapper,
         style: width2 ? { width: width2 } : {
           ...fullHeight && {
             height: "100%",
@@ -18441,7 +18441,7 @@ const DropDownMenu = ({
         "div",
         {
           ...layerProps,
-          className: styles$e.layerContainer,
+          className: styles$h.layerContainer,
           "data-testid": menu2.testId,
           onClick: (evt) => evt.stopPropagation(),
           children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -18510,7 +18510,7 @@ const SubmenuActions = (props) => {
 const Actions = (props) => {
   const disabledContext = reactExports.useContext(DisabledContext);
   const { actions: actions2 = [], closeLayer } = props;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cx$2(styles$f.actions), children: actions2.map((action2, index2) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cx$2(styles$i.actions), children: actions2.map((action2, index2) => {
     const hidden = (action2 == null ? void 0 : action2.hidden) || !action2 || !Object.keys(action2).length;
     if (!hidden) {
       if (action2.childComponent && React$4.isValidElement(action2.childComponent)) {
@@ -18518,7 +18518,7 @@ const Actions = (props) => {
           "div",
           {
             "data-testid": action2.testId,
-            className: styles$f.childComponent,
+            className: styles$i.childComponent,
             children: action2.childComponent
           },
           index2
@@ -18573,7 +18573,7 @@ const cardHeader = "_cardHeader_ucdeu_13";
 const cardContentBorderTop = "_cardContentBorderTop_ucdeu_19";
 const padding = "_padding_ucdeu_22";
 const cardContent = "_cardContent_ucdeu_19";
-const styles$c = {
+const styles$f = {
   card,
   bordered: bordered$1,
   raised,
@@ -18594,20 +18594,20 @@ const Card = ({
     "div",
     {
       className: cx$2(
-        styles$c.card,
-        bordered2 ? styles$c.bordered : "",
-        raised2 ? styles$c.raised : ""
+        styles$f.card,
+        bordered2 ? styles$f.bordered : "",
+        raised2 ? styles$f.raised : ""
       ),
       style: { margin },
       children: [
-        heading2 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cx$2(styles$c.cardHeader), children: heading2 }) : null,
+        heading2 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cx$2(styles$f.cardHeader), children: heading2 }) : null,
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "div",
           {
             className: cx$2(
-              styles$c.cardContent,
-              heading2 ? styles$c.cardContentBorderTop : "",
-              padding2 ? styles$c.padding : ""
+              styles$f.cardContent,
+              heading2 ? styles$f.cardContentBorderTop : "",
+              padding2 ? styles$f.padding : ""
             ),
             children
           }
@@ -19716,7 +19716,7 @@ pt$1.div`
 const divider = "_divider_2bfzh_1";
 const alignLeft = "_alignLeft_2bfzh_12";
 const alignRight = "_alignRight_2bfzh_15";
-const styles$b = {
+const styles$e = {
   divider,
   alignLeft,
   alignRight
@@ -19728,9 +19728,9 @@ const faint = "_faint_11ofj_10";
 const success = "_success_11ofj_13";
 const warning$1 = "_warning_11ofj_16";
 const error$k = "_error_11ofj_19";
-const small$1 = "_small_11ofj_22";
+const small$2 = "_small_11ofj_22";
 const link$2 = "_link_11ofj_25";
-const styles$a = {
+const styles$d = {
   bold: bold$1,
   center,
   muted: muted$1,
@@ -19738,7 +19738,7 @@ const styles$a = {
   success,
   warning: warning$1,
   error: error$k,
-  small: small$1,
+  small: small$2,
   link: link$2
 };
 const Text = ({
@@ -19758,16 +19758,16 @@ const Text = ({
     "span",
     {
       className: cx$2(
-        bold2 && styles$a.bold,
-        center2 && styles$a.center,
-        error2 && styles$a.error,
-        faint2 && styles$a.faint,
-        link2 && styles$a.link,
-        muted2 && styles$a.muted,
-        onClick && styles$a.clickable,
-        small2 && styles$a.small,
-        success2 && styles$a.success,
-        warning2 && styles$a.warning
+        bold2 && styles$d.bold,
+        center2 && styles$d.center,
+        error2 && styles$d.error,
+        faint2 && styles$d.faint,
+        link2 && styles$d.link,
+        muted2 && styles$d.muted,
+        onClick && styles$d.clickable,
+        small2 && styles$d.small,
+        success2 && styles$d.success,
+        warning2 && styles$d.warning
       ),
       onClick,
       children
@@ -19777,9 +19777,9 @@ const Text = ({
 const cssAlignClass = (align) => {
   switch (align) {
     case Align.LEFT:
-      return styles$b.alignLeft;
+      return styles$e.alignLeft;
     case Align.RIGHT:
-      return styles$b.alignRight;
+      return styles$e.alignRight;
     default:
       return "";
   }
@@ -19792,7 +19792,7 @@ const Divider = ({
 }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
   "div",
   {
-    className: `${styles$b.divider} ${cssAlignClass(align)}`,
+    className: `${styles$e.divider} ${cssAlignClass(align)}`,
     style: {
       marginTop: margin,
       marginBottom: margin,
@@ -19804,7 +19804,7 @@ const Divider = ({
 const heading$1 = "_heading_yhdiy_1";
 const top$1 = "_top_yhdiy_10";
 const icons = "_icons_yhdiy_20";
-const styles$9 = {
+const styles$c = {
   heading: heading$1,
   top: top$1,
   icons
@@ -19825,13 +19825,13 @@ const Heading = ({
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
-      className: cx$2(styles$9.heading, top2 ? styles$9.top : ""),
+      className: cx$2(styles$c.heading, top2 ? styles$c.top : ""),
       style: { marginBottom },
       onClick,
       "data-testid": testId,
       children: [
         children,
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$9.icons, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$c.icons, children: [
           icon2 && /* @__PURE__ */ jsxRuntimeExports.jsx(HelpIcon, { onClick: onIconClick, icon: icon2 }),
           isHelpIconDisplayed && /* @__PURE__ */ jsxRuntimeExports.jsx(HelpIcon, { text: helpText, onClick: onClickHelp }),
           libraryIcon && /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -19872,7 +19872,7 @@ const active$3 = "_active_khmhl_197";
 const disabled$1 = "_disabled_khmhl_222";
 const tabsContent = "_tabsContent_khmhl_229";
 const resizeHandle = "_resizeHandle_khmhl_235";
-const styles$8 = {
+const styles$b = {
   inputInTable: inputInTable$4,
   inputHover: inputHover$4,
   inputFocus: inputFocus$4,
@@ -19913,13 +19913,13 @@ const DrawerTabs = ({
   testId
 }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$8.tabs, children: tabs2.map((tab2, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$b.tabs, children: tabs2.map((tab2, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
         className: cx$2(
-          styles$8.tab,
-          activeTab === index2 && open ? styles$8.active : "",
-          tab2.disabled ? styles$8.disabled : ""
+          styles$b.tab,
+          activeTab === index2 && open ? styles$b.active : "",
+          tab2.disabled ? styles$b.disabled : ""
         ),
         style: { background: background2 },
         onClick: !tab2.disabled ? () => handleTabClick(index2) : void 0,
@@ -19934,7 +19934,7 @@ const DrawerTabs = ({
         "div",
         {
           style: { width: typeof width2 === "number" ? `${width2}px` : width2 },
-          className: styles$8.tabsContent,
+          className: styles$b.tabsContent,
           "data-testid": testId && `${testId}-content-${index2}`,
           children: active2 && open && tab2.content
         },
@@ -21855,7 +21855,7 @@ const MIN_OPEN_WIDTH = 240;
 const ResizeHandle = reactExports.forwardRef(
   (props, ref2) => {
     const { handleAxis, ...rest } = props;
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: ref2, className: styles$8.resizeHandle, ...rest, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: IconType.DRAG }) });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: ref2, className: styles$b.resizeHandle, ...rest, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: IconType.DRAG }) });
   }
 );
 const DrawerResizeWrapper = ({
@@ -21881,7 +21881,7 @@ const DrawerResizeWrapper = ({
       handle: /* @__PURE__ */ jsxRuntimeExports.jsx(ResizeHandle, {}),
       resizeHandles: right2 ? ["w"] : ["e"],
       axis: "x",
-      className: isResizing2 ? styles$8.isResizing : "",
+      className: isResizing2 ? styles$b.isResizing : "",
       onResizeStart: () => {
         if (setOpen) setOpen(true);
         if (onResize) onResize(width2);
@@ -21979,17 +21979,17 @@ const Drawer = ({
         "div",
         {
           className: cx$2(
-            styles$8.drawer,
-            shadow4 ? styles$8.shadow : "",
-            fixed2 ? styles$8.fixed : styles$8.inline,
-            right2 ? styles$8.right : styles$8.left
+            styles$b.drawer,
+            shadow4 ? styles$b.shadow : "",
+            fixed2 ? styles$b.fixed : styles$b.inline,
+            right2 ? styles$b.right : styles$b.left
           ),
           style: { top: top2 },
           children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               "div",
               {
-                className: cx$2(styles$8.drawerContent, border2 && styles$8.border),
+                className: cx$2(styles$b.drawerContent, border2 && styles$b.border),
                 style: {
                   background: background2,
                   borderColor: typeof border2 === "string" ? border2 : void 0,
@@ -22015,9 +22015,9 @@ const Drawer = ({
               "span",
               {
                 className: cx$2(
-                  styles$8.toggleButton,
-                  localOpen && (isStandardButton || isCustomButton && buttonAnimate) ? styles$8.toggleButtonOpen : "",
-                  buttonPosition === "top" ? styles$8.top : styles$8.bottom
+                  styles$b.toggleButton,
+                  localOpen && (isStandardButton || isCustomButton && buttonAnimate) ? styles$b.toggleButtonOpen : "",
+                  buttonPosition === "top" ? styles$b.top : styles$b.bottom
                 ),
                 children: isCustomButton ? button2 : /* @__PURE__ */ jsxRuntimeExports.jsx(
                   Button$1,
@@ -22035,6 +22035,38 @@ const Drawer = ({
     }
   );
 };
+const inputGroup = "_inputGroup_biuoa_1";
+const styles$a = {
+  inputGroup
+};
+const isDOMTypeElement = (element) => {
+  return reactExports.isValidElement(element) && typeof element.type === "string";
+};
+const InputGroup = ({
+  children,
+  small: small2 = false,
+  width: width2 = "100%"
+}) => {
+  const childElements = Array.isArray(children) ? children.filter((c2) => reactExports.isValidElement(c2)) : [children];
+  const elements = childElements.map((item2, index2) => {
+    const isDOMType = isDOMTypeElement(item2);
+    const { groupOrder: groupOrderProp } = !isDOMType ? item2.props : { groupOrder: null };
+    const count2 = childElements.length;
+    const isFirst = index2 === 0;
+    const isLast = index2 === count2 - 1;
+    const isOnly = !count2 || count2 === 1;
+    const groupOrder = groupOrderProp || (isOnly ? null : isFirst ? GroupOrder.FIRST : isLast ? GroupOrder.LAST : GroupOrder.MIDDLE);
+    return isDOMType ? item2 : /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Fragment, { children: React$4.cloneElement(item2, { groupOrder, small: small2 }) }, index2);
+  });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      className: cx$2(styles$a.inputGroup),
+      style: { width: width2 },
+      children: elements
+    }
+  );
+};
 const inputInTable$3 = "_inputInTable_jnwnh_1";
 const inputHover$3 = "_inputHover_jnwnh_13";
 const inputFocus$3 = "_inputFocus_jnwnh_18";
@@ -22044,14 +22076,14 @@ const inputDisabled$3 = "_inputDisabled_jnwnh_61";
 const hideScrollbars$3 = "_hideScrollbars_jnwnh_67";
 const input = "_input_jnwnh_1";
 const isInTable = "_isInTable_jnwnh_100";
-const small = "_small_jnwnh_124";
+const small$1 = "_small_jnwnh_124";
 const error$j = "_error_jnwnh_130";
 const warning = "_warning_jnwnh_147";
 const right$2 = "_right_jnwnh_170";
-const groupOrderFirst = "_groupOrderFirst_jnwnh_173";
-const groupOrderMiddle = "_groupOrderMiddle_jnwnh_174";
-const groupOrderLast = "_groupOrderLast_jnwnh_175";
-const styles$7 = {
+const groupOrderFirst$1 = "_groupOrderFirst_jnwnh_173";
+const groupOrderMiddle$1 = "_groupOrderMiddle_jnwnh_174";
+const groupOrderLast$1 = "_groupOrderLast_jnwnh_175";
+const styles$9 = {
   inputInTable: inputInTable$3,
   inputHover: inputHover$3,
   inputFocus: inputFocus$3,
@@ -22061,15 +22093,15 @@ const styles$7 = {
   hideScrollbars: hideScrollbars$3,
   input,
   isInTable,
-  small,
+  small: small$1,
   error: error$j,
   warning,
   right: right$2,
-  groupOrderFirst,
-  groupOrderMiddle,
-  groupOrderLast
+  groupOrderFirst: groupOrderFirst$1,
+  groupOrderMiddle: groupOrderMiddle$1,
+  groupOrderLast: groupOrderLast$1
 };
-reactExports.forwardRef(
+const Input = reactExports.forwardRef(
   ({
     error: error2 = null,
     tooltip: tooltip2 = null,
@@ -22106,11 +22138,11 @@ reactExports.forwardRef(
       if (groupOrder) {
         switch (groupOrder) {
           case "first":
-            return styles$7.groupOrderFirst;
+            return styles$9.groupOrderFirst;
           case "last":
-            return styles$7.groupOrderLast;
+            return styles$9.groupOrderLast;
           default:
-            return styles$7.groupOrderMiddle;
+            return styles$9.groupOrderMiddle;
         }
       }
       return "";
@@ -22144,11 +22176,11 @@ reactExports.forwardRef(
             autoComplete: "off",
             disabled: disabled2 || disabledContext,
             className: cx$2(
-              styles$7.input,
-              error2 ? styles$7.error : warning2 ? styles$7.warning : "",
-              right2 ? styles$7.right : "",
-              small2 ? styles$7.small : "",
-              isInTable2 ? styles$7.isInTable : ""
+              styles$9.input,
+              error2 ? styles$9.error : warning2 ? styles$9.warning : "",
+              right2 ? styles$9.right : "",
+              small2 ? styles$9.small : "",
+              isInTable2 ? styles$9.isInTable : ""
             ),
             style: { width: width2 },
             "data-testid": testId
@@ -22236,6 +22268,38 @@ const Grid = ({
     }
   );
 };
+const addon = "_addon_b4w53_1";
+const small = "_small_b4w53_12";
+const groupOrderFirst = "_groupOrderFirst_b4w53_16";
+const groupOrderMiddle = "_groupOrderMiddle_b4w53_17";
+const groupOrderLast = "_groupOrderLast_b4w53_21";
+const styles$8 = {
+  addon,
+  small,
+  groupOrderFirst,
+  groupOrderMiddle,
+  groupOrderLast
+};
+const InputGroupAddon = ({
+  children,
+  groupOrder = null,
+  small: small2 = false
+}) => {
+  const order2 = (() => {
+    if (groupOrder) {
+      switch (groupOrder) {
+        case GroupOrder.FIRST:
+          return styles$8.groupOrderFirst;
+        case GroupOrder.LAST:
+          return styles$8.groupOrderLast;
+        default:
+          return styles$8.groupOrderMiddle;
+      }
+    }
+    return "";
+  })();
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: cx$2(styles$8.addon, order2, small2 ? styles$8.small : ""), children });
+};
 var ReactReduxContext = /* @__PURE__ */ React$4.createContext(null);
 function defaultNoopBatch(callback) {
   callback();
@@ -23522,7 +23586,7 @@ function useUniqueId(prefix2, options2) {
   }, [options2.separator, prefix2]);
 }
 var AppContext = React$4.createContext(null);
-function usePrevious$2(current) {
+function usePrevious$3(current) {
   var ref2 = reactExports.useRef(current);
   reactExports.useEffect(function() {
     ref2.current = current;
@@ -23755,7 +23819,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,
@@ -25340,7 +25404,7 @@ reactExports.forwardRef(
 );
 const page = "_page_beskc_1";
 const scroll = "_scroll_beskc_23";
-const styles$6 = {
+const styles$7 = {
   page,
   scroll
 };
@@ -25355,7 +25419,7 @@ const Page$1 = ({
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
-      className: cx$2(styles$6.page, scroll3 ? styles$6.scroll : ""),
+      className: cx$2(styles$7.page, scroll3 ? styles$7.scroll : ""),
       style: { left: left2, padding: padding2, top: top2 },
       children
     }
@@ -53091,7 +53155,7 @@ function createContextHook(useHook) {
 function contextHookFactory(DefaultContext2) {
   return (selector, equalityCheck) => {
     const context2 = reactExports.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"
@@ -53113,7 +53177,7 @@ function contextHookFactory(DefaultContext2) {
     return equalityCheck(previousValue, value) ? previousValue : value;
   };
 }
-function usePrevious$1(value) {
+function usePrevious$2(value) {
   const ref2 = reactExports.useRef();
   useIsomorphicLayoutEffect$3(() => {
     ref2.current = value;
@@ -54693,7 +54757,7 @@ var ReactFramework = class extends Framework {
 };
 _editorRef = /* @__PURE__ */ new WeakMap();
 var useIsomorphicLayoutEffect$2 = typeof document !== "undefined" ? reactExports.useLayoutEffect : reactExports.useEffect;
-function usePrevious(value) {
+function usePrevious$1(value) {
   const ref2 = reactExports.useRef();
   useIsomorphicLayoutEffect$2(() => {
     ref2.current = value;
@@ -54747,7 +54811,7 @@ function useFramework(props) {
 function useControlledEditor(framework) {
   const { state } = framework.props;
   const isControlledRef = reactExports.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, {
@@ -54815,7 +54879,7 @@ var interopRequireDefaultExports = interopRequireDefault.exports;
 const require$$2 = /* @__PURE__ */ getAugmentedNamespace(_extends$5);
 const richTextToolbar = "_richTextToolbar_1gbkk_1";
 const richTextToolbarContainer = "_richTextToolbarContainer_1gbkk_5";
-const styles$5 = {
+const styles$6 = {
   richTextToolbar,
   richTextToolbarContainer
 };
@@ -54867,8 +54931,8 @@ const RichTextToolbar = ({
       active: active2.orderedList()
     }
   ];
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$5.richTextToolbarContainer, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$5.richTextToolbar, children: items2.map((item2, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$6.richTextToolbarContainer, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$6.richTextToolbar, children: items2.map((item2, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
       Button$1,
       {
         small: true,
@@ -54896,7 +54960,7 @@ const inputWarning$1 = "_inputWarning_ta5ga_26";
 const inputDisabled$1 = "_inputDisabled_ta5ga_61";
 const hideScrollbars$1 = "_hideScrollbars_ta5ga_67";
 const richTextInput = "_richTextInput_ta5ga_77";
-const styles$4 = {
+const styles$5 = {
   inputInTable: inputInTable$1,
   inputHover: inputHover$1,
   inputFocus: inputFocus$1,
@@ -54932,7 +54996,7 @@ reactExports.forwardRef(
       }
       setState(state2);
     };
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$4.richTextInput, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$5.richTextInput, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
       Remirror,
       {
         manager,
@@ -55044,7 +55108,7 @@ const item$1 = "_item_1ube5_140";
 const experimental = "_experimental_1ube5_155";
 const active$1 = "_active_1ube5_159";
 const icon = "_icon_1ube5_163";
-const styles$3 = {
+const styles$4 = {
   inputInTable,
   inputHover,
   inputFocus,
@@ -55077,10 +55141,10 @@ const TooltipIcon = reactExports.memo(
           fontSize: 16,
           padding: "var(--padding-sm)",
           display: "block",
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$3.icon, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { small: true, title: invalid ? "!" : void 0, margin: 4, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: icon2 }) }) })
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$4.icon, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { small: true, title: invalid ? "!" : void 0, margin: 4, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: icon2 }) }) })
         }
       ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$3.label, children: label2 })
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$4.label, children: label2 })
     ] });
   },
   (prevProps, nextProps) => isEqual4(prevProps, nextProps)
@@ -55092,16 +55156,16 @@ const Link$1 = ({
   onClick,
   testId
 }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$3.list, children: items2.map((link2, i) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$4.list, children: items2.map((link2, i) => {
     const key2 = `${sectionIndex}_${i}`;
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "a",
       {
         href: link2.value,
         className: cx$2(
-          styles$3.item,
-          link2.isActive ? styles$3.active : "",
-          link2.isExperimental ? styles$3.experimental : ""
+          styles$4.item,
+          link2.isActive ? styles$4.active : "",
+          link2.isExperimental ? styles$4.experimental : ""
         ),
         onClick: (evt) => onClick(evt, link2.value, link2.label, link2.onClick),
         "data-testid": testId,
@@ -55126,7 +55190,7 @@ const Sections = ({
   onClick
 }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: sections.map((section, i) => /* @__PURE__ */ jsxRuntimeExports.jsxs(React$4.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("h5", { className: styles$3.subtitle, children: section.heading.toUpperCase() }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("h5", { className: styles$4.subtitle, children: section.heading.toUpperCase() }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       Link$1,
       {
@@ -55182,8 +55246,8 @@ reactExports.memo(
             icon: IconType.LEFT
           }
         ),
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cx$2(styles$3.sidebar, !isOpen ? styles$3.collapsed : ""), children: visible && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$3.inner, children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: styles$3.title, children: options2.title }),
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cx$2(styles$4.sidebar, !isOpen ? styles$4.collapsed : ""), children: visible && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$4.inner, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: styles$4.title, children: options2.title }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             Sections,
             {
@@ -58841,10 +58905,10 @@ function requireConstants() {
   })(constants);
   return constants;
 }
-var validate$2 = {};
+var validate$3 = {};
 var ajv$1 = { exports: {} };
 var core$2 = {};
-var validate$1 = {};
+var validate$2 = {};
 var boolSchema = {};
 var errors = {};
 var codegen = {};
@@ -61009,8 +61073,8 @@ function getSchemaRefs(schema, baseId) {
   }
 }
 resolve$2.getSchemaRefs = getSchemaRefs;
-Object.defineProperty(validate$1, "__esModule", { value: true });
-validate$1.getData = validate$1.KeywordCxt = validate$1.validateFunctionCode = void 0;
+Object.defineProperty(validate$2, "__esModule", { value: true });
+validate$2.getData = validate$2.KeywordCxt = validate$2.validateFunctionCode = void 0;
 const boolSchema_1 = boolSchema;
 const dataType_1$1 = dataType;
 const applicability_1 = applicability;
@@ -61033,7 +61097,7 @@ function validateFunctionCode(it2) {
   }
   validateFunction(it2, () => (0, boolSchema_1.topBoolOrEmptySchema)(it2));
 }
-validate$1.validateFunctionCode = validateFunctionCode;
+validate$2.validateFunctionCode = validateFunctionCode;
 function validateFunction({ gen, validateName, schema, schemaEnv, opts }, body) {
   if (opts.code.es5) {
     gen.func(validateName, (0, codegen_1$o._)`${names_1$3.default.data}, ${names_1$3.default.valCxt}`, schemaEnv.$async, () => {
@@ -61453,7 +61517,7 @@ class KeywordCxt {
     }
   }
 }
-validate$1.KeywordCxt = KeywordCxt;
+validate$2.KeywordCxt = KeywordCxt;
 function keywordCode(it2, keyword2, def2, ruleType) {
   const cxt = new KeywordCxt(it2, def2, keyword2);
   if ("code" in def2) {
@@ -61508,7 +61572,7 @@ function getData($data, { dataLevel, dataNames, dataPathArr }) {
     return `Cannot access ${pointerType} ${up} levels up, current level is ${dataLevel}`;
   }
 }
-validate$1.getData = getData;
+validate$2.getData = getData;
 var validation_error = {};
 Object.defineProperty(validation_error, "__esModule", { value: true });
 class ValidationError extends Error {
@@ -61538,7 +61602,7 @@ const validation_error_1 = validation_error;
 const names_1$2 = names$2;
 const resolve_1 = resolve$2;
 const util_1$k = util;
-const validate_1$1 = validate$1;
+const validate_1$1 = validate$2;
 class SchemaEnv {
   constructor(env2) {
     var _a;
@@ -62431,7 +62495,7 @@ uri$1.default = uri;
 (function(exports) {
   Object.defineProperty(exports, "__esModule", { value: true });
   exports.CodeGen = exports.Name = exports.nil = exports.stringify = exports.str = exports._ = exports.KeywordCxt = void 0;
-  var validate_12 = validate$1;
+  var validate_12 = validate$2;
   Object.defineProperty(exports, "KeywordCxt", { enumerable: true, get: function() {
     return validate_12.KeywordCxt;
   } });
@@ -64033,7 +64097,7 @@ const def$a = {
 additionalProperties.default = def$a;
 var properties$1 = {};
 Object.defineProperty(properties$1, "__esModule", { value: true });
-const validate_1 = validate$1;
+const validate_1 = validate$2;
 const code_1$2 = code;
 const util_1$7 = util;
 const additionalProperties_1$1 = additionalProperties;
@@ -64884,7 +64948,7 @@ const require$$3 = {
   module.exports.Ajv = Ajv;
   Object.defineProperty(exports, "__esModule", { value: true });
   exports.default = Ajv;
-  var validate_12 = validate$1;
+  var validate_12 = validate$2;
   Object.defineProperty(exports, "KeywordCxt", { enumerable: true, get: function() {
     return validate_12.KeywordCxt;
   } });
@@ -64923,7 +64987,7 @@ var dist$1 = { exports: {} };
   const ajv_12 = ajvExports;
   const codegen_12 = codegen;
   const code_12 = code$1;
-  const validate_12 = validate$1;
+  const validate_12 = validate$2;
   const errors_12 = errors;
   const names_12 = names$2;
   const keyword2 = "errorMessage";
@@ -66174,21 +66238,21 @@ var distExports = dist.exports;
 var __importDefault = commonjsGlobal$1 && commonjsGlobal$1.__importDefault || function(mod) {
   return mod && mod.__esModule ? mod : { "default": mod };
 };
-Object.defineProperty(validate$2, "__esModule", { value: true });
+Object.defineProperty(validate$3, "__esModule", { value: true });
 const ajv_1 = __importDefault(ajvExports);
 const ajv_errors_1 = __importDefault(distExports$1);
 const ajv_keywords_1 = __importDefault(distExports);
 const ajv = new ajv_1.default({ allErrors: true, $data: true });
 (0, ajv_errors_1.default)(ajv);
 (0, ajv_keywords_1.default)(ajv, "transform");
-const validate = (data, schema) => {
+const validate$1 = (data, schema) => {
   var _a;
   const v2 = ajv.compile(schema);
   const valid = v2(data);
   const errorMessages = (_a = v2.errors) === null || _a === void 0 ? void 0 : _a.map(({ message }) => message);
   return { valid, errors: errorMessages };
 };
-validate$2.default = validate;
+validate$3.default = validate$1;
 var validateNumber_schema = {};
 Object.defineProperty(validateNumber_schema, "__esModule", { value: true });
 const validNumberSchema = {
@@ -66211,7 +66275,7 @@ function requireUnits() {
     const display_number_1 = requireDisplayNumber();
     const numbers_1 = requireNumbers();
     const rounding_1 = requireRounding();
-    const validate_12 = __importDefault2(validate$2);
+    const validate_12 = __importDefault2(validate$3);
     const validate_number_schema_1 = __importDefault2(validateNumber_schema);
     exports.SEPARATOR = "|";
     const UNIT_RE = /^(-?[0-9., /]*?(?:e[-+]?[0-9]+)?)([^0-9-., /].*)?$/;
@@ -67031,7 +67095,7 @@ const button = "_button_oyr59_138";
 const menu = "_menu_oyr59_139";
 const active = "_active_oyr59_168";
 const alert = "_alert_oyr59_193";
-const styles$2 = {
+const styles$3 = {
   topbar,
   fixed,
   appSwitcher,
@@ -67050,7 +67114,7 @@ const styles$2 = {
   alert
 };
 const Warning = ({ warning: warning2 }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$2.alert, children: warning2 });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$3.alert, children: warning2 });
 };
 const AppSwitcher = ({
   icon: icon2,
@@ -67058,7 +67122,7 @@ const AppSwitcher = ({
   onClick
 }) => {
   const content = /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: icon2 });
-  return url ? /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: url, onClick, className: styles$2.appSwitcher, children: content }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { onClick, className: styles$2.appSwitcher, children: content });
+  return url ? /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: url, onClick, className: styles$3.appSwitcher, children: content }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { onClick, className: styles$3.appSwitcher, children: content });
 };
 const Title = ({
   label: label2,
@@ -67067,12 +67131,12 @@ const Title = ({
   version: version2,
   onClick
 }) => {
-  const content = /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$2.title, children: [
-    logo2 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$2.logo, children: logo2 }),
-    label2 && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$2.label, children: label2 }),
-    version2 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$2.version, children: version2 })
+  const content = /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$3.title, children: [
+    logo2 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$3.logo, children: logo2 }),
+    label2 && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$3.label, children: label2 }),
+    version2 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$3.version, children: version2 })
   ] });
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cx$2(styles$2.item, styles$2.brand), children: url ? /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: url, onClick, children: content }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { onClick, children: content }) });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cx$2(styles$3.item, styles$3.brand), children: url ? /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: url, onClick, children: content }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { onClick, children: content }) });
 };
 var ElementType = /* @__PURE__ */ ((ElementType2) => {
   ElementType2["LINK"] = "Link";
@@ -67101,7 +67165,7 @@ const Link = ({
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     Component2,
     {
-      className: cx$2(styles$2.link, active2 ? styles$2.active : ""),
+      className: cx$2(styles$3.link, active2 ? styles$3.active : ""),
       href: url || "#",
       to: url,
       onClick: handleClick2,
@@ -67110,7 +67174,7 @@ const Link = ({
       role: onClick && !url ? "button" : void 0,
       children: [
         icon2,
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$2.label, children: label2 })
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$3.label, children: label2 })
       ]
     }
   );
@@ -67118,7 +67182,7 @@ const Link = ({
 const Element$1 = ({ element }) => {
   switch (element.type) {
     case ElementType.LINK:
-      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$2.item, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$3.item, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         Link,
         {
           label: element.label,
@@ -67132,7 +67196,7 @@ const Element$1 = ({ element }) => {
         }
       ) });
     case ElementType.BUTTON:
-      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cx$2(styles$2.item, styles$2.button), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cx$2(styles$3.item, styles$3.button), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         Button$1,
         {
           label: element.label,
@@ -67145,7 +67209,7 @@ const Element$1 = ({ element }) => {
         }
       ) });
     case ElementType.MENU:
-      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cx$2(styles$2.item, styles$2.menu), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cx$2(styles$3.item, styles$3.menu), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         Menu,
         {
           maxHeight: "100%",
@@ -67166,7 +67230,7 @@ const Element$1 = ({ element }) => {
         }
       ) });
     case ElementType.COMPONENT:
-      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$2.item, children: element.component });
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$3.item, children: element.component });
     default:
       return null;
   }
@@ -67185,7 +67249,7 @@ const TopBar = ({
     /* @__PURE__ */ jsxRuntimeExports.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__ */ jsxRuntimeExports.jsx(
@@ -67196,7 +67260,7 @@ const TopBar = ({
               onClick: appSwitcher2.onClick
             }
           ),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$2.left, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$3.left, children: [
             title2 && /* @__PURE__ */ jsxRuntimeExports.jsx(
               Title,
               {
@@ -67214,7 +67278,7 @@ const TopBar = ({
               return null;
             })
           ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$2.right, children: contentRight.map((element, i) => {
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$3.right, children: contentRight.map((element, i) => {
             if (element) {
               return /* @__PURE__ */ jsxRuntimeExports.jsx(Element$1, { element }, i);
             }
@@ -75845,8 +75909,463 @@ function TreeInner(props, ref2) {
   );
 }
 reactExports.forwardRef(TreeInner);
-requireUnits();
-reactExports.createContext(null);
+const useRunAfterUpdate = () => {
+  const afterPaintRef = reactExports.useRef(null);
+  reactExports.useLayoutEffect(() => {
+    if (afterPaintRef.current) {
+      afterPaintRef.current();
+      afterPaintRef.current = null;
+    }
+  });
+  const runAfterUpdate = (fn) => {
+    afterPaintRef.current = fn;
+  };
+  return runAfterUpdate;
+};
+const usePrevious = (value) => {
+  const ref2 = reactExports.useRef();
+  reactExports.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' missing for '${unitkey}'. Using initial unit, value unit, or default.`
+    );
+    return dist$2.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 (doNotConvertValue) return stringValue;
+  if (toUnit && !isWrongValue(stringValue)) {
+    try {
+      const valueWithUnit = dist$2.isValueWithUnit(stringValue) ? stringValue : dist$2.withUnit(stringValue, defaultFromUnit);
+      const result = dist$2.convertSamePrecision(valueWithUnit, toUnit);
+      return dist$2.getValue(result);
+    } catch (e2) {
+    }
+  }
+  return stringValue;
+};
+const isValueWithUnknownUnit = (value) => {
+  if (!value) return false;
+  return Boolean(dist$2.getUnit(value));
+};
+const safeConvertValue = (value = "", toUnit, defaultFromUnit, doNotConvertValue) => {
+  if (doNotConvertValue) {
+    return value;
+  }
+  const isWithUnit = isValueWithUnknownUnit(value) || dist$2.isValueWithUnit(value);
+  const rawValue = dist$2.getValue(value);
+  const isInvalidInput = isWrongValue(rawValue);
+  if (isInvalidInput) {
+    return rawValue;
+  }
+  if (!isWithUnit) {
+    return value;
+  }
+  return convertUnit(rawValue, toUnit, defaultFromUnit, doNotConvertValue);
+};
+const getStringName = (name2) => {
+  if (lodashExports.isObject(name2) && !lodashExports.isArray(name2) && !lodashExports.isFunction(name2)) {
+    return lodashExports.get(name2, "fieldName", "");
+  }
+  return typeof name2 === "string" ? name2 : "";
+};
+const isErrorObject = (error2) => lodashExports.isObjectLike(error2) && lodashExports.has(error2, "message");
+const getErrorMessage = (error2) => {
+  if (typeof error2 === "string") {
+    return error2;
+  } else if (isErrorObject(error2)) {
+    return error2.message;
+  } else {
+    return null;
+  }
+};
+var unitsExports = requireUnits();
+const hasLeadingZeroes = (value) => {
+  return value.search(RegExp(/(^0{2}\.)|(^0+[1-9])/g)) === 0;
+};
+const validate = (value, options2) => {
+  var _a;
+  const {
+    allowEmpty = false,
+    autoValue,
+    placeholder,
+    disabledValidation = false
+  } = options2 || {};
+  const stringValue = String(value);
+  if (disabledValidation || autoValue || placeholder) {
+    return null;
+  }
+  const cleanValue = unitsExports.isValueWithUnit(stringValue) ? dist$2.getValue(stringValue) : stringValue;
+  if (allowEmpty && cleanValue === "") {
+    return null;
+  }
+  if (hasLeadingZeroes(cleanValue)) {
+    return "Invalid number format due to leading zeroes";
+  }
+  const validationErrors = dist$2.validateNumber(cleanValue);
+  if (!validationErrors.valid) {
+    const firstError = ((_a = validationErrors == null ? void 0 : validationErrors.errors) == null ? void 0 : _a[0]) ?? null;
+    return getErrorMessage(firstError);
+  }
+  return null;
+};
+const isUnitKnown = (unit = "") => {
+  var _a;
+  return (_a = dist$2.KNOWN_UNITS) == null ? void 0 : _a.includes(unit);
+};
+const isKnownUnit = (valueWithUnit, defaultUnit) => {
+  const unitFromValue = dist$2.getUnit(valueWithUnit || "");
+  return isUnitKnown(defaultUnit) && isUnitKnown(unitFromValue);
+};
+const UnitContext = reactExports.createContext(null);
+const WithUnitContext = ({ children }) => {
+  {
+    console.log("Context not initialized. Call initializeContext first.");
+    return children;
+  }
+};
+const predefinedMenuActive = "_predefinedMenuActive_1yvt4_1";
+const styles$2 = {
+  predefinedMenuActive
+};
+const UnitInputComponent = ({
+  name: name2,
+  placeholder = "",
+  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 context2 = reactExports.useContext(UnitContext);
+  console.log("context in component ->>>>", context2);
+  const runAfterUpdate = useRunAfterUpdate();
+  const [propValue = "", propUnit = ""] = value !== void 0 ? dist$2.split(value) : [];
+  const propAutoUnit = autoValue ? dist$2.getUnit(autoValue) : "";
+  const defaultUnit = reactExports.useMemo(
+    () => getPreferredUnit(unitkey, unitTemplate),
+    [unitkey, unitTemplate]
+  );
+  const knownUnit = isKnownUnit(value, defaultUnit);
+  const initDisplayUnit = initUnit || propUnit || defaultUnit;
+  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] = reactExports.useState(initDisplayLayer);
+  const [validationError, setValidationError] = reactExports.useState(null);
+  const [predefinedOptionsMenuState, setPredefinedOptionsMenuState] = reactExports.useState(
+    initialPredefinedOption ? PredefinedOptionsMenuState.PREDEFINED : PredefinedOptionsMenuState.CUSTOM
+  );
+  const isAutoValue = propValue === "" && autoValue;
+  const foundPredefinedMenuOption = predefinedOptions && predefinedOptions.find((el2) => {
+    if (!(el2 == null ? void 0 : el2.value)) return;
+    if (selectedPredefinedOptionKey) {
+      return selectedPredefinedOptionKey === el2.valueKey;
+    }
+    const predefinedMenuItemUnit = dist$2.isValueWithUnit(el2.value) ? dist$2.getUnit(el2.value) : "";
+    return dist$2.withUnit(
+      convertUnit(value, predefinedMenuItemUnit),
+      predefinedMenuItemUnit
+    ) === el2.value;
+  });
+  const getAlternativeUnits = () => {
+    if (unitkey) {
+      try {
+        const valueToList = isAutoValue ? autoValue : value ?? "";
+        let alternativeUnits2 = dist$2.altUnitsList(valueToList, unitkey);
+        if (dist$2.getValue(valueToList) === "") {
+          return alternativeUnits2.map((unitRow) => ["", unitRow[1]]);
+        }
+        return alternativeUnits2;
+      } catch (e2) {
+        return null;
+      }
+    }
+  };
+  const onSetValue = (evt) => {
+    const stringName2 = getStringName(name2);
+    const input2 = evt.target;
+    const { value: inputValue, selectionStart: currentCursorPosition } = input2;
+    const cleanInputValue = dist$2.cleanNumStr(
+      inputValue.replaceAll(" ", "").replaceAll("|", "")
+    );
+    const newValue = dist$2.withUnit(cleanInputValue, (displayLayer == null ? void 0 : displayLayer.unit) || "");
+    const rawValue = dist$2.getValue(newValue);
+    const validationResult = validate(rawValue, {
+      allowEmpty,
+      autoValue,
+      placeholder,
+      disabledValidation
+    });
+    if (validationResult === null) {
+      onChange({
+        target: {
+          value: newValue,
+          name: stringName2
+        }
+      });
+      const [val, u2] = dist$2.split(newValue);
+      setDisplayLayer({ value: val, unit: u2 });
+      setValidationError(null);
+      validationCallback(stringName2, null);
+    } else {
+      setDisplayLayer({ value: cleanInputValue, unit: displayLayer.unit });
+      setValidationError(validationResult);
+      validationCallback(stringName2, validationResult);
+    }
+    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);
+    }
+  };
+  reactExports.useEffect(() => {
+    if (initDisplayUnit) {
+      let newValue, newUnit = "";
+      if (previousInitUnit !== initDisplayUnit) {
+        newValue = safeConvertValue(
+          value,
+          initDisplayUnit,
+          propUnit,
+          doNotConvertValue
+        );
+        newUnit = initDisplayUnit;
+      } else if (dist$2.withUnit(displayLayer.value, displayLayer.unit) !== value) {
+        newValue = safeConvertValue(
+          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 = dist$2.checkAndCleanDecimalComma(propValue);
+    const errorMessage = validate(cleanValue, {
+      allowEmpty,
+      autoValue,
+      placeholder,
+      disabledValidation
+    });
+    setValidationError(errorMessage);
+  }, [initDisplayUnit, value, error2, shouldLinkAutomaticly]);
+  const alternativeUnits = getAlternativeUnits();
+  const displayUnitLabel = dist$2.label(displayLayer.unit) || displayLayer.unit || "";
+  const noConvert = noConversion || !alternativeUnits || alternativeUnits && alternativeUnits.length === 1;
+  const stringName = getStringName(name2);
+  let sectionsPredefinedMenu;
+  const createPredefinedOption = (el2) => {
+    const elementValue = (el2 == null ? void 0 : el2.value) ? el2.value : "";
+    const [value2 = "", unit = ""] = dist$2.isValueWithUnit(elementValue) ? dist$2.split(elementValue) : [elementValue];
+    return {
+      type: MenuType.OPTION,
+      inline: true,
+      onClick: () => {
+        const validation2 = dist$2.validateNumber(value2);
+        if (validation2.valid && !disabled2) {
+          setPredefinedOptionsMenuState(PredefinedOptionsMenuState.PREDEFINED);
+          onChange({
+            target: {
+              value: elementValue,
+              name: typeof name2 === "string" ? name2 : (name2 == null ? void 0 : name2.fieldName) || "",
+              predefinedSelected: true,
+              predefinedOption: el2
+            }
+          });
+        }
+      },
+      label: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { children: el2.label }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Spacer, { width: "20px", height: "0" })
+      ] }),
+      description: dist$2.isValueWithUnit(elementValue) ? `${value2} ${unit}` : elementValue,
+      selected: foundPredefinedMenuOption === el2 && predefinedOptionsMenuState === PredefinedOptionsMenuState.PREDEFINED
+    };
+  };
+  sectionsPredefinedMenu = [
+    {
+      type: MenuType.OPTION,
+      inline: true,
+      onClick: () => {
+        if (predefinedOptionsMenuState !== PredefinedOptionsMenuState.CUSTOM && !disabled2) {
+          onChange({
+            target: {
+              value: dist$2.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__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      className: predefinedOptionsMenuState === PredefinedOptionsMenuState.PREDEFINED ? cx$2(styles$2.predefinedMenuActive) : "",
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(InputGroup, { small: small2, width: width2, children: [
+        predefinedOptions && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Tooltip,
+          {
+            text: predefinedOptionsMenuState === PredefinedOptionsMenuState.PREDEFINED ? foundPredefinedMenuOption == null ? void 0 : foundPredefinedMenuOption.label : "",
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Menu,
+              {
+                maxHeight: 380,
+                groupOrder: "first",
+                testId: testId && `${testId}-predefined-menu`,
+                disabled: disabled2,
+                menu: {
+                  colored: true,
+                  trigger: "Component",
+                  component: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    Button$1,
+                    {
+                      groupOrder: "first",
+                      active: predefinedOptionsMenuState === PredefinedOptionsMenuState.PREDEFINED,
+                      icon: predefinedOptionsMenuState === PredefinedOptionsMenuState.PREDEFINED ? "link" : "unlink"
+                    }
+                  ),
+                  small: small2,
+                  sections: sectionsPredefinedMenu
+                }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Input,
+          {
+            type: "text",
+            name: stringName,
+            testId,
+            disabled: disabled2,
+            placeholder: isAutoValue ? safeConvertValue(
+              autoValue,
+              displayLayer.unit,
+              propAutoUnit,
+              doNotConvertValue
+            ) : placeholder,
+            value: displayLayer.value,
+            onChange: onSetValue,
+            onFocus,
+            error: error2 || validationError,
+            warning: warning2,
+            right: !left2
+          },
+          stringName
+        ),
+        displayUnitLabel && (noConvert || !knownUnit ? /* @__PURE__ */ jsxRuntimeExports.jsx(InputGroupAddon, { groupOrder: "last", children: displayUnitLabel }) : /* @__PURE__ */ jsxRuntimeExports.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}`
+                };
+              })
+            }
+          }
+        ))
+      ] })
+    }
+  );
+};
+WithUnitContext(UnitInputComponent);
 const Footer = () => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(Divider, {}),