@oliasoft-open-source/react-ui-library 4.19.0-beta-2 → 4.19.0-beta-4

package/dist/index.js

@@ -186,7 +186,7 @@ var InputType = /* @__PURE__ */ ((InputType2) => {
 })(InputType || {});
 const chevron = "_chevron_1kw4m_1";
 const expanded$2 = "_expanded_1kw4m_9";
-const styles$U = {
+const styles$V = {
   chevron,
   expanded: expanded$2
 };
@@ -869,7 +869,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$T = {
+const styles$U = {
   wrapper: wrapper$5,
   customSvg,
   customPng,
@@ -1544,8 +1544,8 @@ const Icon = ({
     "div",
     {
       className: cx$2(
-        styles$T.wrapper,
-        (clickable2 || onClick) && !disabledContext ? styles$T.clickable : ""
+        styles$U.wrapper,
+        (clickable2 || onClick) && !disabledContext ? styles$U.clickable : ""
       ),
       style,
       onClick: (evt) => onClick && !disabledContext ? onClick(evt) : void 0,
@@ -1553,7 +1553,7 @@ const Icon = ({
       children: isValidElement(icon2) ? icon2 : typeof icon2 === "string" && (icon2.includes(".svg") || icon2.includes("image/svg")) ? /* @__PURE__ */ jsx(
         ReactSVG,
         {
-          className: styles$T.customSvg,
+          className: styles$U.customSvg,
           beforeInjection: (svg) => {
             if (size2) {
               svg.setAttribute("width", String(size2));
@@ -1562,12 +1562,12 @@ const Icon = ({
           },
           src: icon2
         }
-      ) : 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
+      ) : typeof icon2 === "string" && (icon2.includes(".png") || icon2.includes("image/png")) ? /* @__PURE__ */ jsx("img", { alt: "icon", className: styles$U.customPng, src: icon2 }) : typeof icon2 === "string" ? /* @__PURE__ */ jsx(NamedIcon, { icon: icon2 }) : null
     }
   );
 };
 const Chevron = ({ expanded: expanded2 }) => {
-  return /* @__PURE__ */ jsx("span", { className: cx$2(styles$U.chevron, expanded2 ? styles$U.expanded : ""), children: /* @__PURE__ */ jsx(Icon, { icon: IconType.CHEVRON_RIGHT }) });
+  return /* @__PURE__ */ jsx("span", { className: cx$2(styles$V.chevron, expanded2 ? styles$V.expanded : ""), children: /* @__PURE__ */ jsx(Icon, { icon: IconType.CHEVRON_RIGHT }) });
 };
 const accordion = "_accordion_15p8j_1";
 const accordionHeader = "_accordionHeader_15p8j_5";
@@ -1578,7 +1578,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$S = {
+const styles$T = {
   accordion,
   accordionHeader,
   heading: heading$6,
@@ -1603,21 +1603,21 @@ const AccordionBase = ({
     "div",
     {
       className: cx$2(
-        styles$S.accordion,
-        bordered2 ? styles$S.bordered : "",
-        expanded2 ? styles$S.expanded : "",
-        squareBottom2 ? styles$S.squareBottom : ""
+        styles$T.accordion,
+        bordered2 ? styles$T.bordered : "",
+        expanded2 ? styles$T.expanded : "",
+        squareBottom2 ? styles$T.squareBottom : ""
       ),
       children: [
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: cx$2(styles$S.accordionHeader, onClick ? styles$S.clickable : ""),
+            className: cx$2(styles$T.accordionHeader, onClick ? styles$T.clickable : ""),
             onClick,
             "data-testid": testId,
             children: [
               /* @__PURE__ */ jsx(Chevron, { expanded: expanded2 }),
-              /* @__PURE__ */ jsx("div", { className: styles$S.heading, children: heading2 })
+              /* @__PURE__ */ jsx("div", { className: styles$T.heading, children: heading2 })
             ]
           }
         ),
@@ -1625,8 +1625,8 @@ const AccordionBase = ({
           "div",
           {
             className: cx$2(
-              styles$S.accordionContent,
-              bordered2 && padding2 ? styles$S.padding : ""
+              styles$T.accordionContent,
+              bordered2 && padding2 ? styles$T.padding : ""
             ),
             children
           }
@@ -1704,7 +1704,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$R = {
+const styles$S = {
   checkbox,
   noLabel,
   small: small$d,
@@ -3711,7 +3711,7 @@ function useHover(_temp) {
 const tooltip = "_tooltip_wli9z_1";
 const error$2 = "_error_wli9z_15";
 const warning$4 = "_warning_wli9z_19";
-const styles$Q = {
+const styles$R = {
   tooltip,
   error: error$2,
   warning: warning$4
@@ -3742,8 +3742,8 @@ const TooltipLayer = ({
     "div",
     {
       className: cx$2(
-        styles$Q.tooltip,
-        error2 ? styles$Q.error : warning2 ? styles$Q.warning : ""
+        styles$R.tooltip,
+        error2 ? styles$R.error : warning2 ? styles$R.warning : ""
       ),
       ...layerProps,
       children: [
@@ -3812,7 +3812,7 @@ const Tooltip = ({
 const helpIcon = "_helpIcon_hd0z2_1";
 const active$9 = "_active_hd0z2_9";
 const clickable = "_clickable_hd0z2_12";
-const styles$P = {
+const styles$Q = {
   helpIcon,
   active: active$9,
   clickable
@@ -3843,9 +3843,9 @@ const HelpIcon = ({
     "div",
     {
       className: cx$2(
-        styles$P.helpIcon,
-        onClick ? styles$P.clickable : "",
-        active2 ? styles$P.active : ""
+        styles$Q.helpIcon,
+        onClick ? styles$Q.clickable : "",
+        active2 ? styles$Q.active : ""
       ),
       onClick: onClickHelpIcon,
       "data-testid": testId,
@@ -3876,12 +3876,12 @@ const CheckBox = ({
     "div",
     {
       className: cx$2(
-        styles$R.checkbox,
-        noMargin2 && styles$R.noMargin,
-        isInTable2 && styles$R.isInTable,
-        isDisabled && styles$R.disabled,
-        small2 && styles$R.small,
-        !label2 && styles$R.noLabel
+        styles$S.checkbox,
+        noMargin2 && styles$S.noMargin,
+        isInTable2 && styles$S.isInTable,
+        isDisabled && styles$S.disabled,
+        small2 && styles$S.small,
+        !label2 && styles$S.noLabel
       ),
       "data-ix": dataix,
       onClick: (evt) => {
@@ -3913,10 +3913,10 @@ const CheckBox = ({
           }
         ),
         /* @__PURE__ */ jsxs("label", { htmlFor: name2, children: [
-          /* @__PURE__ */ jsx("span", { className: styles$R.checkmark, children: /* @__PURE__ */ jsx(Icon, { icon: IconType.CHECK }) }),
+          /* @__PURE__ */ jsx("span", { className: styles$S.checkmark, children: /* @__PURE__ */ jsx(Icon, { icon: IconType.CHECK }) }),
           label2
         ] }),
-        showHelp && /* @__PURE__ */ jsx("div", { className: styles$R.helpIconEnabled, onClick: onClickHelp, children: /* @__PURE__ */ jsx(HelpIcon, { text: helpText }) })
+        showHelp && /* @__PURE__ */ jsx("div", { className: styles$S.helpIconEnabled, onClick: onClickHelp, children: /* @__PURE__ */ jsx(HelpIcon, { text: helpText }) })
       ]
     }
   );
@@ -3925,7 +3925,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$O = {
+const styles$P = {
   bordered: bordered$3,
   checkboxWrapper,
   padding: padding$2,
@@ -3967,7 +3967,7 @@ const AccordionWithDefaultToggle = ({
     defaultEnabled
   });
   const content2 = /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    /* @__PURE__ */ jsx("div", { className: styles$O.checkboxWrapper, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: styles$P.checkboxWrapper, children: /* @__PURE__ */ jsx(
       CheckBox,
       {
         label: toggleLabel,
@@ -3978,7 +3978,7 @@ const AccordionWithDefaultToggle = ({
         checked: state.defaultEnabled
       }
     ) }),
-    state.accordionExpanded && /* @__PURE__ */ jsx("div", { className: styles$O.contentWrapper, children })
+    state.accordionExpanded && /* @__PURE__ */ jsx("div", { className: styles$P.contentWrapper, children })
   ] });
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsx(
@@ -3991,7 +3991,7 @@ const AccordionWithDefaultToggle = ({
         onClick: () => dispatch({ type: AccordionActionType.TOGGLE_ACCORDION })
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: cx$2(styles$O.bordered, padding2 ? styles$O.padding : ""), children: content2 })
+    /* @__PURE__ */ jsx("div", { className: cx$2(styles$P.bordered, padding2 ? styles$P.padding : ""), children: content2 })
   ] });
 };
 const inputInTable$b = "_inputInTable_1m45a_1";
@@ -4045,7 +4045,7 @@ const buttonStyles = {
   groupOrderLast: groupOrderLast$4
 };
 const spinner = "_spinner_156m4_1";
-const styles$N = {
+const styles$O = {
   spinner
 };
 const Spinner$1 = ({
@@ -4056,7 +4056,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$N.spinner, style: { color: color2, fontSize } });
+  return /* @__PURE__ */ jsx("div", { className: styles$O.spinner, style: { color: color2, fontSize } });
 };
 var ButtonType = /* @__PURE__ */ ((ButtonType2) => {
   ButtonType2["SUBMIT"] = "submit";
@@ -4182,7 +4182,7 @@ const actions$2 = "_actions_1t7vd_1";
 const childComponent = "_childComponent_1t7vd_11";
 const actionComponentContainer = "_actionComponentContainer_1t7vd_14";
 const active$7 = "_active_1t7vd_36";
-const styles$M = {
+const styles$N = {
   actions: actions$2,
   childComponent,
   actionComponentContainer,
@@ -4216,7 +4216,7 @@ const buttonCaret = "_buttonCaret_8cxhw_184";
 const component = "_component_8cxhw_188";
 const right$7 = "_right_8cxhw_194";
 const actions$1 = "_actions_8cxhw_199";
-const styles$L = {
+const styles$M = {
   wrapper: wrapper$4,
   layer: layer$1,
   layerContainer: layerContainer$1,
@@ -4250,15 +4250,15 @@ const Heading$3 = ({ label: label2, onClick, icon: icon2, testId }) => /* @__PUR
   "div",
   {
     onClick: (evt) => evt.stopPropagation(),
-    className: styles$L.heading,
+    className: styles$M.heading,
     "data-testid": testId,
     children: [
       label2,
-      /* @__PURE__ */ jsx("span", { className: styles$L.headingIcon, onClick, children: icon2 })
+      /* @__PURE__ */ jsx("span", { className: styles$M.headingIcon, onClick, children: icon2 })
     ]
   }
 );
-const Divider$1 = () => /* @__PURE__ */ jsx("hr", { className: styles$L.divider });
+const Divider$1 = () => /* @__PURE__ */ jsx("hr", { className: styles$M.divider });
 const Option$2 = ({
   actions: actions2,
   label: label2,
@@ -4311,30 +4311,30 @@ const Option$2 = ({
       href: url,
       to: url,
       className: cx$2(
-        styles$L.option,
-        disabled2 ? styles$L.disabled : "",
-        inline2 ? styles$L.inline : "",
-        selected2 ? styles$L == null ? void 0 : styles$L.selected : ""
+        styles$M.option,
+        disabled2 ? styles$M.disabled : "",
+        inline2 ? styles$M.inline : "",
+        selected2 ? styles$M == null ? void 0 : styles$M.selected : ""
       ),
       onClick: handleClick2,
       "data-testid": testId,
       children: [
-        icon2 ? /* @__PURE__ */ jsx("span", { className: styles$L.icon, children: /* @__PURE__ */ jsx(Icon, { icon: icon2 }) }) : null,
-        /* @__PURE__ */ jsxs("div", { className: styles$L.optionContent, children: [
+        icon2 ? /* @__PURE__ */ jsx("span", { className: styles$M.icon, children: /* @__PURE__ */ jsx(Icon, { icon: icon2 }) }) : null,
+        /* @__PURE__ */ jsxs("div", { className: styles$M.optionContent, children: [
           upload && /* @__PURE__ */ jsx(
             "input",
             {
               type: "file",
-              className: styles$L.fileInput,
+              className: styles$M.fileInput,
               onChange: handleFileChange
             }
           ),
-          /* @__PURE__ */ jsx("span", { className: styles$L.label, title: `${title2 || label2}`, children: label2 }),
-          /* @__PURE__ */ jsx("span", { className: styles$L.description, children: description2 })
+          /* @__PURE__ */ jsx("span", { className: styles$M.label, title: `${title2 || label2}`, children: label2 }),
+          /* @__PURE__ */ jsx("span", { className: styles$M.description, children: description2 })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: styles$L.right, children: [
-          selected2 && /* @__PURE__ */ jsx("span", { className: styles$L.check, children: /* @__PURE__ */ jsx(Icon, { icon: IconType.CHECK }) }),
-          !!(actions2 == null ? void 0 : actions2.length) && /* @__PURE__ */ jsx("div", { className: styles$L.actions, children: /* @__PURE__ */ jsx(Actions, { actions: actions2 }) })
+        /* @__PURE__ */ jsxs("div", { className: styles$M.right, children: [
+          selected2 && /* @__PURE__ */ jsx("span", { className: styles$M.check, children: /* @__PURE__ */ jsx(Icon, { icon: IconType.CHECK }) }),
+          !!(actions2 == null ? void 0 : actions2.length) && /* @__PURE__ */ jsx("div", { className: styles$M.actions, children: /* @__PURE__ */ jsx(Actions, { actions: actions2 }) })
         ] })
       ]
     }
@@ -4472,7 +4472,7 @@ const Layer$2 = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cx$2(styles$L.layer, isNested ? styles$L.nested : null),
+      className: cx$2(styles$M.layer, isNested ? styles$M.nested : null),
       style: { maxWidth: width2, maxHeight },
       "data-testid": testId,
       children: /* @__PURE__ */ jsx("ul", { children: localSections.map((section2, i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
@@ -4509,7 +4509,7 @@ const light = "_light_nwprz_26";
 const small$b = "_small_nwprz_29";
 const dot$1 = "_dot_nwprz_33";
 const hasChildren = "_hasChildren_nwprz_39";
-const styles$K = {
+const styles$L = {
   wrapper: wrapper$3,
   badge,
   label: label$9,
@@ -4537,16 +4537,16 @@ const Badge = ({
   small: small2 = false
 }) => {
   const visible = !(title2 === null && dot2 === false);
-  return /* @__PURE__ */ jsxs("div", { className: styles$K.wrapper, children: [
+  return /* @__PURE__ */ jsxs("div", { className: styles$L.wrapper, children: [
     visible && /* @__PURE__ */ jsx(
       "sup",
       {
         className: cx$2(
-          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 : ""
+          styles$L.badge,
+          isDark(color2) ? styles$L.dark : styles$L.light,
+          title2 !== null ? styles$L.label : styles$L.dot,
+          small2 ? styles$L.small : "",
+          children ? styles$L.hasChildren : ""
         ),
         style: {
           background: color2 || void 0,
@@ -4572,16 +4572,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$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 }) })
+  const buttonLabel2 = trigger2 === TriggerType.BUTTON ? label2 : trigger2 === TriggerType.DROP_DOWN_BUTTON ? /* @__PURE__ */ jsxs("span", { className: styles$M.middleAlignedInline, children: [
+    /* @__PURE__ */ jsx("span", { className: styles$M.buttonLabel, children: label2 }),
+    /* @__PURE__ */ jsx("span", { className: styles$M.buttonCaret, children: /* @__PURE__ */ jsx(Icon, { icon: IconType.CHEVRON_DOWN }) })
   ] }) : null;
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: cx$2(
-        styles$L.trigger,
-        disabled2 || disabledContext ? styles$L.disabled : null
+        styles$M.trigger,
+        disabled2 || disabledContext ? styles$M.disabled : null
       ),
       style: { width: width2 },
       children: /* @__PURE__ */ jsx(
@@ -4622,14 +4622,14 @@ const Text$1 = ({
     "div",
     {
       className: cx$2(
-        styles$L.trigger,
-        disabled2 ? styles$L.disabled : null,
-        isOpen2 ? styles$L.active : null,
-        selected2 ? styles$L == null ? void 0 : styles$L.selected : null
+        styles$M.trigger,
+        disabled2 ? styles$M.disabled : null,
+        isOpen2 ? styles$M.active : null,
+        selected2 ? styles$M == null ? void 0 : styles$M.selected : null
       ),
       children: [
-        /* @__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
+        /* @__PURE__ */ jsx("span", { className: styles$M.label, title: titleText, children: label2 }),
+        carat && carat === MenuCarat.RIGHT ? /* @__PURE__ */ jsx("span", { className: styles$M.arrow, children: /* @__PURE__ */ jsx(Icon, { icon: IconType.CHEVRON_RIGHT }) }) : carat && carat === MenuCarat.DOWN ? /* @__PURE__ */ jsx("span", { className: styles$M.arrow, children: /* @__PURE__ */ jsx(Icon, { icon: IconType.CHEVRON_DOWN }) }) : null
       ]
     }
   );
@@ -4642,7 +4642,7 @@ const Component = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cx$2(styles$L.component, disabled2 ? styles$L.disabled : null),
+      className: cx$2(styles$M.component, disabled2 ? styles$M.disabled : null),
       "data-testid": testId,
       children: component2
     }
@@ -4725,7 +4725,7 @@ const Trigger$1 = React__default.forwardRef(
       "div",
       {
         ref,
-        className: styles$L.wrapper,
+        className: styles$M.wrapper,
         style: width2 ? { width: width2 } : {
           ...fullHeight && {
             height: "100%",
@@ -4951,7 +4951,7 @@ const DropDownMenu = ({
         "div",
         {
           ...layerProps,
-          className: styles$L.layerContainer,
+          className: styles$M.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$M.actions), children: actions2.map((action2, index2) => {
+  return /* @__PURE__ */ jsx("div", { className: cx$2(styles$N.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)) {
@@ -5028,7 +5028,7 @@ const Actions = (props) => {
           "div",
           {
             "data-testid": action2.testId,
-            className: styles$M.childComponent,
+            className: styles$N.childComponent,
             children: action2.childComponent
           },
           index2
@@ -5082,7 +5082,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$J = {
+const styles$K = {
   breadcrumb,
   small: small$a,
   labelContainer,
@@ -5113,16 +5113,16 @@ const Link$2 = ({
     {
       onClick,
       className: cx$2(
-        styles$J.labelContainer,
-        active2 && styles$J.active,
-        (disabled2 || disabledContext) && styles$J.disabled
+        styles$K.labelContainer,
+        active2 && styles$K.active,
+        (disabled2 || disabledContext) && styles$K.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$J.breadcrumb, small2 && styles$J.small), children: links.map((link2, i) => {
+  return /* @__PURE__ */ jsx("div", { className: cx$2(styles$K.breadcrumb, small2 && styles$K.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: [
@@ -5138,13 +5138,13 @@ const Breadcrumb = ({ links, small: small2 = false }) => {
           element
         }
       ),
-      !isFinal && /* @__PURE__ */ jsx("span", { className: styles$J.separator, children: "/" })
+      !isFinal && /* @__PURE__ */ jsx("span", { className: styles$K.separator, children: "/" })
     ] }, i);
   }) });
 };
 const label$8 = "_label_iu2wi_1";
 const buttonGroup = "_buttonGroup_iu2wi_11";
-const styles$I = {
+const styles$J = {
   label: label$8,
   buttonGroup
 };
@@ -5198,7 +5198,7 @@ const ButtonGroup = (props) => {
   };
   const renderHeader = () => {
     if (header2) {
-      return /* @__PURE__ */ jsx("label", { className: styles$I.label, children: header2 });
+      return /* @__PURE__ */ jsx("label", { className: styles$J.label, children: header2 });
     }
   };
   const renderButtons = () => {
@@ -5222,7 +5222,6 @@ const ButtonGroup = (props) => {
             maxWidth: maxTooltipWidth,
             display: "block",
             enabled: tooltip2 && isStringNumberOrNode(tooltip2) || error2 && isStringNumberOrNode(error2) || warning2 && isStringNumberOrNode(warning2) || false,
-            placement: "bottom-center",
             children: /* @__PURE__ */ jsx(
               Button$1,
               {
@@ -5255,7 +5254,7 @@ const ButtonGroup = (props) => {
   };
   return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { children: [
     renderHeader(),
-    /* @__PURE__ */ jsx("div", { className: styles$I.buttonGroup, "data-testid": testId, children: renderButtons() })
+    /* @__PURE__ */ jsx("div", { className: styles$J.buttonGroup, "data-testid": testId, children: renderButtons() })
   ] }) });
 };
 const card = "_card_ucdeu_1";
@@ -5265,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$H = {
+const styles$I = {
   card,
   bordered: bordered$2,
   raised,
@@ -5286,20 +5285,20 @@ const Card = ({
     "div",
     {
       className: cx$2(
-        styles$H.card,
-        bordered2 ? styles$H.bordered : "",
-        raised2 ? styles$H.raised : ""
+        styles$I.card,
+        bordered2 ? styles$I.bordered : "",
+        raised2 ? styles$I.raised : ""
       ),
       style: { margin: margin2 },
       children: [
-        heading2 ? /* @__PURE__ */ jsx("div", { className: cx$2(styles$H.cardHeader), children: heading2 }) : null,
+        heading2 ? /* @__PURE__ */ jsx("div", { className: cx$2(styles$I.cardHeader), children: heading2 }) : null,
         /* @__PURE__ */ jsx(
           "div",
           {
             className: cx$2(
-              styles$H.cardContent,
-              heading2 ? styles$H.cardContentBorderTop : "",
-              padding2 ? styles$H.padding : ""
+              styles$I.cardContent,
+              heading2 ? styles$I.cardContentBorderTop : "",
+              padding2 ? styles$I.padding : ""
             ),
             children
           }
@@ -6499,7 +6498,7 @@ const Column = ({
 const divider = "_divider_2bfzh_1";
 const alignLeft = "_alignLeft_2bfzh_12";
 const alignRight = "_alignRight_2bfzh_15";
-const styles$G = {
+const styles$H = {
   divider,
   alignLeft,
   alignRight
@@ -6513,7 +6512,7 @@ const warning$3 = "_warning_11ofj_16";
 const error$1 = "_error_11ofj_19";
 const small$9 = "_small_11ofj_22";
 const link$1 = "_link_11ofj_25";
-const styles$F = {
+const styles$G = {
   bold: bold$1,
   center,
   muted: muted$1,
@@ -6541,16 +6540,16 @@ const Text = ({
     "span",
     {
       className: cx$2(
-        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
+        bold2 && styles$G.bold,
+        center2 && styles$G.center,
+        error2 && styles$G.error,
+        faint2 && styles$G.faint,
+        link2 && styles$G.link,
+        muted2 && styles$G.muted,
+        onClick && styles$G.clickable,
+        small2 && styles$G.small,
+        success2 && styles$G.success,
+        warning2 && styles$G.warning
       ),
       onClick,
       children
@@ -6560,9 +6559,9 @@ const Text = ({
 const cssAlignClass = (align) => {
   switch (align) {
     case Align.LEFT:
-      return styles$G.alignLeft;
+      return styles$H.alignLeft;
     case Align.RIGHT:
-      return styles$G.alignRight;
+      return styles$H.alignRight;
     default:
       return "";
   }
@@ -6575,7 +6574,7 @@ const Divider = ({
 }) => /* @__PURE__ */ jsx(
   "div",
   {
-    className: `${styles$G.divider} ${cssAlignClass(align)}`,
+    className: `${styles$H.divider} ${cssAlignClass(align)}`,
     style: {
       marginTop: margin2,
       marginBottom: margin2,
@@ -6587,7 +6586,7 @@ const Divider = ({
 const heading$4 = "_heading_yhdiy_1";
 const top$1 = "_top_yhdiy_10";
 const icons$2 = "_icons_yhdiy_20";
-const styles$E = {
+const styles$F = {
   heading: heading$4,
   top: top$1,
   icons: icons$2
@@ -6608,13 +6607,13 @@ const Heading$2 = ({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cx$2(styles$E.heading, top2 ? styles$E.top : ""),
+      className: cx$2(styles$F.heading, top2 ? styles$F.top : ""),
       style: { marginBottom },
       onClick,
       "data-testid": testId,
       children: [
         children,
-        /* @__PURE__ */ jsxs("div", { className: styles$E.icons, children: [
+        /* @__PURE__ */ jsxs("div", { className: styles$F.icons, children: [
           icon2 && /* @__PURE__ */ jsx(HelpIcon, { onClick: onIconClick, icon: icon2 }),
           isHelpIconDisplayed && /* @__PURE__ */ jsx(HelpIcon, { text: helpText, onClick: onClickHelp }),
           libraryIcon && /* @__PURE__ */ jsx(
@@ -6637,7 +6636,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$D = {
+const styles$E = {
   dialog,
   inline: inline$3,
   scroll: scroll$2,
@@ -6672,16 +6671,16 @@ const Dialog = ({ dialog: dialog2 }) => {
     "div",
     {
       className: cx$2(
-        styles$D.dialog,
-        width2 ? styles$D.inline : null,
-        scroll2 ? styles$D.scroll : null
+        styles$E.dialog,
+        width2 ? styles$E.inline : null,
+        scroll2 ? styles$E.scroll : null
       ),
       style: { width: width2, height: height2 },
       "data-testid": testId ?? null,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: styles$D.header, children: [
+        /* @__PURE__ */ jsxs("div", { className: styles$E.header, children: [
           /* @__PURE__ */ jsx(Heading$2, { testId: testId && `${testId}-heading`, top: true, marginBottom: 0, children: heading2 }),
-          onClose ? /* @__PURE__ */ jsx("div", { className: styles$D.dismiss, children: /* @__PURE__ */ jsx(
+          onClose ? /* @__PURE__ */ jsx("div", { className: styles$E.dismiss, children: /* @__PURE__ */ jsx(
             Button$1,
             {
               icon: IconType.CLOSE,
@@ -6699,7 +6698,7 @@ const Dialog = ({ dialog: dialog2 }) => {
           "div",
           {
             "data-testid": testId && `${testId}-content`,
-            className: styles$D.content,
+            className: styles$E.content,
             style: { padding: contentPadding2 },
             children: convertStringToJsx(content2)
           }
@@ -6708,7 +6707,7 @@ const Dialog = ({ dialog: dialog2 }) => {
           "div",
           {
             "data-testid": testId && `${testId}-footer`,
-            className: styles$D.footer,
+            className: styles$E.footer,
             children: footer2
           }
         )
@@ -6741,7 +6740,7 @@ const active$4 = "_active_1f40p_197";
 const disabled$6 = "_disabled_1f40p_222";
 const tabsContent = "_tabsContent_1f40p_229";
 const resizeHandle = "_resizeHandle_1f40p_235";
-const styles$C = {
+const styles$D = {
   inputInTable: inputInTable$a,
   inputHover: inputHover$a,
   inputFocus: inputFocus$a,
@@ -6782,13 +6781,13 @@ const DrawerTabs = ({
   testId
 }) => {
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    /* @__PURE__ */ jsx("div", { className: styles$C.tabs, children: tabs2.map((tab2, index2) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: styles$D.tabs, children: tabs2.map((tab2, index2) => /* @__PURE__ */ jsx(
       "div",
       {
         className: cx$2(
-          styles$C.tab,
-          activeTab === index2 && open ? styles$C.active : "",
-          tab2.disabled ? styles$C.disabled : ""
+          styles$D.tab,
+          activeTab === index2 && open ? styles$D.active : "",
+          tab2.disabled ? styles$D.disabled : ""
         ),
         style: { background: background2 },
         onClick: !tab2.disabled ? () => handleTabClick(index2) : void 0,
@@ -6803,7 +6802,7 @@ const DrawerTabs = ({
         "div",
         {
           style: { width: typeof width2 === "number" ? `${width2}px` : width2 },
-          className: styles$C.tabsContent,
+          className: styles$D.tabsContent,
           "data-testid": testId && `${testId}-content-${index2}`,
           children: active2 && open && tab2.content
         },
@@ -8724,7 +8723,7 @@ const MIN_OPEN_WIDTH = 240;
 const ResizeHandle = forwardRef(
   (props, ref) => {
     const { handleAxis, ...rest } = props;
-    return /* @__PURE__ */ jsx("div", { ref, className: styles$C.resizeHandle, ...rest, children: /* @__PURE__ */ jsx(Icon, { icon: IconType.DRAG }) });
+    return /* @__PURE__ */ jsx("div", { ref, className: styles$D.resizeHandle, ...rest, children: /* @__PURE__ */ jsx(Icon, { icon: IconType.DRAG }) });
   }
 );
 const DrawerResizeWrapper = ({
@@ -8750,7 +8749,7 @@ const DrawerResizeWrapper = ({
       handle: /* @__PURE__ */ jsx(ResizeHandle, {}),
       resizeHandles: right2 ? ["w"] : ["e"],
       axis: "x",
-      className: isResizing2 ? styles$C.isResizing : "",
+      className: isResizing2 ? styles$D.isResizing : "",
       onResizeStart: () => {
         if (setOpen) setOpen(true);
         if (onResize) onResize(width2);
@@ -8848,17 +8847,17 @@ const Drawer = ({
         "div",
         {
           className: cx$2(
-            styles$C.drawer,
-            shadow4 ? styles$C.shadow : "",
-            fixed2 ? styles$C.fixed : styles$C.inline,
-            right2 ? styles$C.right : styles$C.left
+            styles$D.drawer,
+            shadow4 ? styles$D.shadow : "",
+            fixed2 ? styles$D.fixed : styles$D.inline,
+            right2 ? styles$D.right : styles$D.left
           ),
           style: { top: top2 },
           children: [
             /* @__PURE__ */ jsx(
               "div",
               {
-                className: cx$2(styles$C.drawerContent, border2 && styles$C.border),
+                className: cx$2(styles$D.drawerContent, border2 && styles$D.border),
                 style: {
                   background: background2,
                   borderColor: typeof border2 === "string" ? border2 : void 0,
@@ -8884,9 +8883,9 @@ const Drawer = ({
               "span",
               {
                 className: cx$2(
-                  styles$C.toggleButton,
-                  localOpen && (isStandardButton || isCustomButton && buttonAnimate) ? styles$C.toggleButtonOpen : "",
-                  buttonPosition === "top" ? styles$C.top : styles$C.bottom
+                  styles$D.toggleButton,
+                  localOpen && (isStandardButton || isCustomButton && buttonAnimate) ? styles$D.toggleButtonOpen : "",
+                  buttonPosition === "top" ? styles$D.top : styles$D.bottom
                 ),
                 children: isCustomButton ? button2 : /* @__PURE__ */ jsx(
                   Button$1,
@@ -8906,7 +8905,7 @@ const Drawer = ({
 };
 const empty$1 = "_empty_fe425_1";
 const text$2 = "_text_fe425_11";
-const styles$B = {
+const styles$C = {
   empty: empty$1,
   text: text$2
 };
@@ -8920,7 +8919,7 @@ const Empty = ({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: styles$B.empty,
+      className: styles$C.empty,
       style: { width: width2, height: height2 },
       "data-testid": testId,
       children: [
@@ -8952,7 +8951,7 @@ const Empty = ({
             )
           ] })
         ] }) }),
-        text2 !== "" && /* @__PURE__ */ jsx("div", { className: styles$B.text, children: /* @__PURE__ */ jsx(Text, { faint: true, children: text2 }) }),
+        text2 !== "" && /* @__PURE__ */ jsx("div", { className: styles$C.text, children: /* @__PURE__ */ jsx(Text, { faint: true, children: text2 }) }),
         children
       ]
     }
@@ -9006,7 +9005,7 @@ const FileButton = ({
   ] });
 };
 const inputGroup = "_inputGroup_biuoa_1";
-const styles$A = {
+const styles$B = {
   inputGroup
 };
 const isDOMTypeElement = (element) => {
@@ -9031,7 +9030,7 @@ const InputGroup = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cx$2(styles$A.inputGroup),
+      className: cx$2(styles$B.inputGroup),
       style: { width: width2 },
       children: elements
     }
@@ -9051,7 +9050,7 @@ const right$5 = "_right_1285q_170";
 const groupOrderFirst$3 = "_groupOrderFirst_1285q_173";
 const groupOrderMiddle$3 = "_groupOrderMiddle_1285q_174";
 const groupOrderLast$3 = "_groupOrderLast_1285q_175";
-const styles$z = {
+const styles$A = {
   inputInTable: inputInTable$9,
   inputHover: inputHover$9,
   inputFocus: inputFocus$9,
@@ -9104,11 +9103,11 @@ const Input$1 = forwardRef(
       if (groupOrder) {
         switch (groupOrder) {
           case "first":
-            return styles$z.groupOrderFirst;
+            return styles$A.groupOrderFirst;
           case "last":
-            return styles$z.groupOrderLast;
+            return styles$A.groupOrderLast;
           default:
-            return styles$z.groupOrderMiddle;
+            return styles$A.groupOrderMiddle;
         }
       }
       return "";
@@ -9129,7 +9128,6 @@ const Input$1 = forwardRef(
         enabled: tooltip2 && isStringNumberOrNode(tooltip2) || error2 && isStringNumberOrNode(error2) || warning2 && isStringNumberOrNode(warning2) || false,
         maxWidth: maxTooltipWidth,
         display: "block",
-        placement: "bottom-center",
         children: /* @__PURE__ */ jsx(
           "input",
           {
@@ -9148,10 +9146,10 @@ const Input$1 = forwardRef(
             autoComplete: "off",
             disabled: disabled2 || disabledContext,
             className: cx$2(
-              styles$z.input,
-              right2 ? styles$z.right : "",
-              small2 ? styles$z.small : "",
-              isInTable2 ? styles$z.isInTable : ""
+              styles$A.input,
+              right2 ? styles$A.right : "",
+              small2 ? styles$A.small : "",
+              isInTable2 ? styles$A.isInTable : ""
             ),
             style: { width: width2 },
             "data-error": error2 || null,
@@ -9164,7 +9162,7 @@ const Input$1 = forwardRef(
   }
 );
 const fileInput = "_fileInput_1elar_1";
-const styles$y = {
+const styles$z = {
   fileInput
 };
 var InputReaderMethods = /* @__PURE__ */ ((InputReaderMethods2) => {
@@ -9258,7 +9256,7 @@ const FileInput = ({
       {
         name: name2,
         ref: inputRef,
-        className: styles$y.fileInput,
+        className: styles$z.fileInput,
         type: "file",
         accept,
         multiple: multi,
@@ -9271,7 +9269,7 @@ const FileInput = ({
 const label$7 = "_label_18pfe_1";
 const labelLeft$1 = "_labelLeft_18pfe_5";
 const icons$1 = "_icons_18pfe_13";
-const styles$x = {
+const styles$y = {
   label: label$7,
   labelLeft: labelLeft$1,
   icons: icons$1
@@ -9294,9 +9292,9 @@ const Label$2 = ({
   libraryIcon,
   labelLeft: labelLeft2 = false
 }) => {
-  return /* @__PURE__ */ jsx("div", { className: cx$2(styles$x.label, labelLeft2 ? styles$x.labelLeft : ""), children: /* @__PURE__ */ jsxs("label", { style: { width: width2 || "" }, children: [
+  return /* @__PURE__ */ jsx("div", { className: cx$2(styles$y.label, labelLeft2 ? styles$y.labelLeft : ""), children: /* @__PURE__ */ jsxs("label", { style: { width: width2 || "" }, children: [
     label2,
-    /* @__PURE__ */ jsxs("div", { className: styles$x.icons, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles$y.icons, children: [
       (helpText || onClickHelp) && /* @__PURE__ */ jsx(
         HelpIcon,
         {
@@ -9331,7 +9329,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$w = {
+const styles$x = {
   field,
   labelLeft,
   fieldInput,
@@ -9362,7 +9360,7 @@ const Field = ({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cx$2(styles$w.field, labelLeft2 ? styles$w.labelLeft : ""),
+      className: cx$2(styles$x.field, labelLeft2 ? styles$x.labelLeft : ""),
       "data-testid": testId,
       children: [
         (label2 || labelLeft2) && /* @__PURE__ */ jsx(
@@ -9379,7 +9377,7 @@ const Field = ({
             labelLeft: labelLeft2
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: styles$w.fieldInput, children })
+        /* @__PURE__ */ jsx("div", { className: styles$x.fieldInput, children })
       ]
     }
   );
@@ -9410,11 +9408,11 @@ const Flex = ({
   );
 };
 const formRow = "_formRow_odewu_1";
-const styles$v = {
+const styles$w = {
   formRow
 };
 const FormRow = ({ children }) => {
-  return /* @__PURE__ */ jsx("div", { className: styles$v.formRow, children });
+  return /* @__PURE__ */ jsx("div", { className: styles$w.formRow, children });
 };
 const getGapValue = (gap) => {
   if (typeof gap === "boolean") {
@@ -9474,7 +9472,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$u = {
+const styles$v = {
   addon,
   small: small$7,
   groupOrderFirst: groupOrderFirst$2,
@@ -9490,16 +9488,16 @@ const InputGroupAddon = ({
     if (groupOrder) {
       switch (groupOrder) {
         case GroupOrder.FIRST:
-          return styles$u.groupOrderFirst;
+          return styles$v.groupOrderFirst;
         case GroupOrder.LAST:
-          return styles$u.groupOrderLast;
+          return styles$v.groupOrderLast;
         default:
-          return styles$u.groupOrderMiddle;
+          return styles$v.groupOrderMiddle;
       }
     }
     return "";
   })();
-  return /* @__PURE__ */ jsx("span", { className: cx$2(styles$u.addon, order2, small2 ? styles$u.small : ""), children });
+  return /* @__PURE__ */ jsx("span", { className: cx$2(styles$v.addon, order2, small2 ? styles$v.small : ""), children });
 };
 const inputInTable$8 = "_inputInTable_1wss1_1";
 const inputHover$8 = "_inputHover_1wss1_13";
@@ -13886,7 +13884,7 @@ const ListDragWrapper = ({
     const { active: active2, over } = event;
     const from3 = active2 == null ? void 0 : active2.id;
     const to2 = over == null ? void 0 : over.id;
-    if (from3 !== to2) {
+    if (to2 !== void 0 && from3 !== to2) {
       onListReorder({
         from: Number(from3),
         to: Number(to2)
@@ -14687,38 +14685,28 @@ const ListScrollWrapper = ({
     triggerScrollToActiveItem,
     infiniteScroll
   } = scrollDetails;
-  if (!infiniteScroll) {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cx$2(
-          listStyles.listContent,
-          scrollable ? listStyles.scrollableList : "",
-          hideScrollbar2 ? listStyles.hideScrollbar : ""
-        ),
-        children: /* @__PURE__ */ jsx("div", { children: children({}) })
-      }
-    );
-  }
   const listContainerRef = useRef(null);
   const estimateItemHeight = () => {
-    let height2 = 37;
+    const LINE_HEIGHT = 20;
+    const PADDING2 = 8;
+    const BORDER_WIDTH = 1;
+    let height2 = LINE_HEIGHT + PADDING2 * 2 + BORDER_WIDTH;
     if (items.length > 0) {
       const item2 = items[items.length - 1];
-      if (item2.details) height2 += 20;
-      if (item2.metadata) height2 += 20;
+      if (item2.details) height2 += LINE_HEIGHT;
+      if (item2.metadata) height2 += LINE_HEIGHT;
     }
     return height2;
   };
-  const virtualizer = useVirtualizer({
+  const virtualizer = infiniteScroll ? useVirtualizer({
     count: items.length,
     getScrollElement: () => listContainerRef.current,
     estimateSize: useCallback(estimateItemHeight, []),
     overscan: 5
-  });
+  }) : void 0;
   const findFirstActiveItemIndex = (items2) => items2.findIndex((item2) => item2.active === true);
   const setScrollToActiveItem = (activeItemIndex) => {
-    if (activeItemIndex >= 0) {
+    if (virtualizer && activeItemIndex >= 0) {
       virtualizer.scrollToIndex(activeItemIndex, {
         align: "center",
         behavior: "smooth"
@@ -14726,28 +14714,27 @@ const ListScrollWrapper = ({
     }
   };
   useEffect(() => {
-    if (triggerScrollToActiveItem) {
+    if (triggerScrollToActiveItem && virtualizer) {
       const activeItemIndex = findFirstActiveItemIndex(items);
       setScrollToActiveItem(activeItemIndex);
     }
   }, [triggerScrollToActiveItem]);
+  const getVirtualListStyle = () => {
+    if (!virtualizer) return {};
+    return {
+      height: `${virtualizer.getTotalSize()}px`
+    };
+  };
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: cx$2(
         listStyles.listContent,
-        listStyles.scrollableList,
+        scrollable || infiniteScroll ? listStyles.scrollableList : "",
         hideScrollbar2 ? listStyles.hideScrollbar : ""
       ),
       ref: listContainerRef,
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: listStyles.virtualRows,
-          style: { height: `${virtualizer.getTotalSize()}px` },
-          children: children({ virtualizer })
-        }
-      )
+      children: /* @__PURE__ */ jsx("div", { className: listStyles.virtualRows, style: getVirtualListStyle(), children: children({ virtualizer }) })
     }
   );
 };
@@ -14847,7 +14834,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$t = {
+const styles$u = {
   loader,
   fullViewPortSize,
   cover,
@@ -14872,22 +14859,22 @@ const Loader = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cx$2(styles$t.loader, cover2 ? styles$t.cover : "", {
-        [styles$t.fullViewPortSize]: fullViewPortSize2
+      className: cx$2(styles$u.loader, cover2 ? styles$u.cover : "", {
+        [styles$u.fullViewPortSize]: fullViewPortSize2
       }),
       style: { width: width2, height: height2 },
       "data-testid": testId,
-      children: /* @__PURE__ */ jsx("div", { className: styles$t.dimmer, style: { background: background2, color: color2 }, children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsx("div", { className: styles$u.dimmer, style: { background: background2, color: color2 }, children: /* @__PURE__ */ jsxs(
         "div",
         {
-          className: styles$t.content,
+          className: styles$u.content,
           "data-testid": testId && `${testId}-content`,
           children: [
             children,
             text2 && /* @__PURE__ */ jsx(
               "div",
               {
-                className: styles$t.text,
+                className: styles$u.text,
                 "data-testid": testId && `${testId}-text`,
                 children: text2
               }
@@ -14895,7 +14882,7 @@ const Loader = ({
             details2 && /* @__PURE__ */ jsx(
               "div",
               {
-                className: styles$t.details,
+                className: styles$u.details,
                 "data-testid": testId && `${testId}-details`,
                 children: details2
               }
@@ -14927,7 +14914,7 @@ const absolute = "_absolute_1okhq_143";
 const legendToggle = "_legendToggle_1okhq_155";
 const detailsText = "_detailsText_1okhq_165";
 const footer$1 = "_footer_1okhq_169";
-const styles$s = {
+const styles$t = {
   inputInTable: inputInTable$7,
   inputHover: inputHover$7,
   inputFocus: inputFocus$7,
@@ -14971,9 +14958,9 @@ const Dismiss = ({
     "div",
     {
       className: cx$2(
-        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
+        styles$t.dismiss,
+        isInToast ? styles$t.absolute : "",
+        type === MessageType.INFO ? styles$t.info : type === MessageType.SUCCESS ? styles$t.success : type === MessageType.WARNING ? styles$t.warning : type === MessageType.ERROR ? styles$t.error : null
       ),
       children: /* @__PURE__ */ jsx(Icon, { icon: IconType.CLOSE, onClick: onClose, testId })
     }
@@ -14992,8 +14979,8 @@ const reducer$1 = (state, action2) => {
 };
 const Details = ({ details: details2, visible, dispatch }) => {
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__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
+    /* @__PURE__ */ jsx("div", { className: cx$2(styles$t.legendToggle), onClick: dispatch, children: visible ? "Hide details" : "Show details" }),
+    visible ? /* @__PURE__ */ jsx("div", { className: styles$t.detailsText, children: details2 }) : null
   ] });
 };
 const DialogIcon = ({ type }) => {
@@ -15032,15 +15019,15 @@ const Message = ({ message: message2 }) => {
     "div",
     {
       className: cx$2(
-        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
+        styles$t.container,
+        width2 ? styles$t.block : null,
+        type === MessageType.SUCCESS ? styles$t.success : type === MessageType.WARNING ? styles$t.warning : type === MessageType.ERROR ? styles$t.error : styles$t.info
       ),
       style: { width: width2, maxHeight },
       children: [
-        /* @__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: icon2 ? /* @__PURE__ */ jsx("div", { className: styles$t.icon, children: /* @__PURE__ */ jsx(DialogIcon, { type }) }) : null }),
+        /* @__PURE__ */ jsxs("div", { className: styles$t.content, children: [
+          heading2 ? /* @__PURE__ */ jsx("div", { className: styles$t.heading, children: heading2 }) : null,
           /* @__PURE__ */ jsx("div", { children: content2 }),
           details2 ? /* @__PURE__ */ jsx(
             Details,
@@ -15050,7 +15037,7 @@ const Message = ({ message: message2 }) => {
               dispatch: () => dispatch({ type: MessageToggle.TOGGLE_DETAILS })
             }
           ) : null,
-          !!footer2 && /* @__PURE__ */ jsx("div", { className: styles$s.footer, children: footer2 })
+          !!footer2 && /* @__PURE__ */ jsx("div", { className: styles$t.footer, children: footer2 })
         ] }),
         withDismiss ? /* @__PURE__ */ jsx(Dismiss, { type, onClose }) : null
       ]
@@ -15082,7 +15069,7 @@ const wrapper$2 = "_wrapper_sb0hc_1";
 const contentContainer = "_contentContainer_sb0hc_15";
 const centered = "_centered_sb0hc_24";
 const newLine = "_newLine_sb0hc_28";
-const styles$r = {
+const styles$s = {
   wrapper: wrapper$2,
   contentContainer,
   centered,
@@ -15102,12 +15089,12 @@ const Wrapper = ({ children }) => {
       }
     }
   }, []);
-  return /* @__PURE__ */ jsx("div", { ref: wrapperRef, tabIndex: -1, className: cx$2(styles$r.wrapper), children });
+  return /* @__PURE__ */ jsx("div", { ref: wrapperRef, tabIndex: -1, className: cx$2(styles$s.wrapper), children });
 };
 const Content$2 = ({ children, width: width2, centered: centered2 }) => /* @__PURE__ */ jsx(
   "div",
   {
-    className: cx$2(styles$r.contentContainer, centered2 ? styles$r.centered : ""),
+    className: cx$2(styles$s.contentContainer, centered2 ? styles$s.centered : ""),
     style: { maxWidth: width2 },
     children
   }
@@ -15156,7 +15143,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$q = {
+const styles$r = {
   menu: menu$1,
   header,
   item: item$3,
@@ -15167,9 +15154,9 @@ const Option$1 = ({
   onChange
 }) => {
   const { key: key2, label: label2, selected: selected2 } = option2 ?? {};
-  return /* @__PURE__ */ jsx("div", { className: styles$q.item, children: /* @__PURE__ */ jsx(CheckBox, { label: label2, noMargin: true, checked: selected2, onChange }) }, key2);
+  return /* @__PURE__ */ jsx("div", { className: styles$r.item, children: /* @__PURE__ */ jsx(CheckBox, { label: label2, noMargin: true, checked: selected2, onChange }) }, key2);
 };
-const Heading$1 = ({ label: label2 }) => /* @__PURE__ */ jsx("div", { className: styles$q.heading, children: label2 });
+const Heading$1 = ({ label: label2 }) => /* @__PURE__ */ jsx("div", { className: styles$r.heading, children: label2 });
 var DropdownType = /* @__PURE__ */ ((DropdownType2) => {
   DropdownType2["HEADING"] = "Heading";
   DropdownType2["DIVIDER"] = "Divider";
@@ -15182,9 +15169,9 @@ const Layer$1 = ({
   showHeader,
   maxHeight
 }) => {
-  return /* @__PURE__ */ jsxs("div", { className: cx$2("menu", styles$q.menu), style: { maxHeight }, children: [
+  return /* @__PURE__ */ jsxs("div", { className: cx$2("menu", styles$r.menu), style: { maxHeight }, children: [
     showHeader && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-      /* @__PURE__ */ jsxs("div", { className: styles$q.header, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles$r.header, children: [
         /* @__PURE__ */ jsx(
           "a",
           {
@@ -15288,7 +15275,7 @@ const OptionDropdown = ({
 };
 const page = "_page_beskc_1";
 const scroll$1 = "_scroll_beskc_23";
-const styles$p = {
+const styles$q = {
   page,
   scroll: scroll$1
 };
@@ -15303,7 +15290,7 @@ const Page = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cx$2(styles$p.page, scroll2 ? styles$p.scroll : ""),
+      className: cx$2(styles$q.page, scroll2 ? styles$q.scroll : ""),
       style: { left: left2, padding: padding2, top: top2 },
       children
     }
@@ -15324,7 +15311,7 @@ const right$3 = "_right_sl2b5_182";
 const groupOrderFirst$1 = "_groupOrderFirst_sl2b5_193";
 const groupOrderMiddle$1 = "_groupOrderMiddle_sl2b5_194";
 const groupOrderLast$1 = "_groupOrderLast_sl2b5_198";
-const styles$o = {
+const styles$p = {
   inputInTable: inputInTable$6,
   inputHover: inputHover$6,
   inputFocus: inputFocus$6,
@@ -15407,11 +15394,11 @@ const NativeSelect = ({
     if (groupOrder) {
       switch (groupOrder) {
         case GroupOrder.FIRST:
-          return styles$o.groupOrderFirst;
+          return styles$p.groupOrderFirst;
         case GroupOrder.LAST:
-          return styles$o.groupOrderLast;
+          return styles$p.groupOrderLast;
         default:
-          return styles$o.groupOrderMiddle;
+          return styles$p.groupOrderMiddle;
       }
     }
     return "";
@@ -15424,16 +15411,15 @@ const NativeSelect = ({
       text: tooltip2 || error2 || warning2,
       enabled: tooltip2 && isStringNumberOrNode(tooltip2) || error2 && isStringNumberOrNode(error2) || warning2 && isStringNumberOrNode(warning2) || false,
       maxWidth: maxTooltipWidth,
-      placement: "bottom-center",
       children: /* @__PURE__ */ jsx(
         "select",
         {
           className: cx$2(
-            styles$o.select,
-            isUnselected ? styles$o.unSelected : "",
-            right2 ? styles$o.right : "",
-            small2 ? styles$o.small : "",
-            isInTable2 ? styles$o.isInTable : "",
+            styles$p.select,
+            isUnselected ? styles$p.unSelected : "",
+            right2 ? styles$p.right : "",
+            small2 ? styles$p.small : "",
+            isInTable2 ? styles$p.isInTable : "",
             order2
           ),
           style: {
@@ -16247,7 +16233,7 @@ const optionContent = "_optionContent_dw2pp_92";
 const label$5 = "_label_dw2pp_97";
 const icon$2 = "_icon_dw2pp_104";
 const details = "_details_dw2pp_109";
-const styles$n = {
+const styles$o = {
   layerContainer,
   layer,
   small: small$5,
@@ -16268,7 +16254,7 @@ const Heading = ({ label: label2 }) => {
     "div",
     {
       onClick: (evt) => evt.stopPropagation(),
-      className: styles$n.heading,
+      className: styles$o.heading,
       children: label2
     }
   );
@@ -16289,21 +16275,21 @@ const Option = ({
     "div",
     {
       className: cx$2(
-        styles$n.option,
-        disabled2 ? styles$n.disabled : "",
-        selected2 ? styles$n == null ? void 0 : styles$n.selected : "",
-        focused2 ? styles$n.focused : ""
+        styles$o.option,
+        disabled2 ? styles$o.disabled : "",
+        selected2 ? styles$o == null ? void 0 : styles$o.selected : "",
+        focused2 ? styles$o.focused : ""
       ),
       onClick: !disabled2 && onSelectOption ? onSelectOption : void 0,
       "data-testid": testId,
       children: [
-        /* @__PURE__ */ jsx("div", { className: styles$n.optionContent, children: /* @__PURE__ */ jsxs("span", { className: styles$n.label, title: label2, children: [
+        /* @__PURE__ */ jsx("div", { className: styles$o.optionContent, children: /* @__PURE__ */ jsxs("span", { className: styles$o.label, title: label2, children: [
           label2,
-          icon2 && /* @__PURE__ */ jsx("span", { className: styles$n.icon, children: icon2 })
+          icon2 && /* @__PURE__ */ jsx("span", { className: styles$o.icon, children: icon2 })
         ] }) }),
-        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 })
+        details2 && /* @__PURE__ */ jsx("div", { className: cx$2(styles$o.details), children: /* @__PURE__ */ jsx(Text, { faint: true, children: details2 }) }),
+        !!(actions2 == null ? void 0 : actions2.length) && /* @__PURE__ */ jsx("div", { className: cx$2(styles$o.actions), children: /* @__PURE__ */ jsx(Actions, { actions: actions2, closeLayer }) }),
+        /* @__PURE__ */ jsx("span", { className: styles$o.check, children: selected2 ? /* @__PURE__ */ jsx(Icon, { icon: IconType.CHECK }) : null })
       ]
     }
   );
@@ -16415,8 +16401,8 @@ const Layer = ({
     "div",
     {
       "data-testid": testId,
-      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(
+      className: cx$2(styles$o.layer, small2 && styles$o.small),
+      children: !sections.length ? /* @__PURE__ */ jsx("ul", { children: /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("div", { className: styles$o.message, style: { width: width2 }, children: "No matches" }) }) }) : /* @__PURE__ */ jsx(
         FixedSizeList,
         {
           ref: listRef,
@@ -16476,7 +16462,7 @@ const groupOrderFirst = "_groupOrderFirst_7uwhv_297";
 const groupOrderMiddle = "_groupOrderMiddle_7uwhv_298";
 const groupOrderLast = "_groupOrderLast_7uwhv_302";
 const detailedLabel = "_detailedLabel_7uwhv_307";
-const styles$m = {
+const styles$n = {
   inputInTable: inputInTable$5,
   inputHover: inputHover$5,
   inputFocus: inputFocus$5,
@@ -16536,13 +16522,13 @@ const MultiSelectedOptions = ({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: styles$m.multiOptions,
+      className: styles$n.multiOptions,
       "data-testid": testId && `${testId}-value`,
       children: [
         displayedOptions.filter((option2) => option2 && option2.label).map((option2, index2) => /* @__PURE__ */ jsx(
           "span",
           {
-            className: styles$m.multiOption,
+            className: styles$n.multiOption,
             onClick: (evt) => {
               evt.stopPropagation();
             },
@@ -16555,7 +16541,7 @@ const MultiSelectedOptions = ({
           {
             text: overflowOptions.map((option2, index2) => /* @__PURE__ */ jsx("div", { children: option2.label }, index2)),
             display: "inline-flex",
-            children: /* @__PURE__ */ jsx("span", { className: styles$m.multiOption, children: displayedOptions.length ? `+${overflowOptions.length}` : `${overflowOptions.length} items` })
+            children: /* @__PURE__ */ jsx("span", { className: styles$n.multiOption, children: displayedOptions.length ? `+${overflowOptions.length}` : `${overflowOptions.length} items` })
           }
         )
       ]
@@ -16583,8 +16569,8 @@ const Input = ({
     const inputWidth = ((_b = inputRef.current) == null ? void 0 : _b.offsetWidth) || 0;
     return containerWidth - inputWidth;
   };
-  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) ? placeholder2 : "" }) : isMulti2 ? /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs("div", { className: styles$n.triggerInputContainer, ref: containerRef, children: [
+    !hasSelectedValues ? /* @__PURE__ */ jsx("span", { className: styles$n.placeHolder, children: !(searchValue == null ? void 0 : searchValue.length) ? placeholder2 : "" }) : isMulti2 ? /* @__PURE__ */ jsx(
       MultiSelectedOptions,
       {
         selectedOptions,
@@ -16595,7 +16581,7 @@ const Input = ({
     ) : /* @__PURE__ */ jsx(
       "span",
       {
-        className: styles$m.selectedSingleValue,
+        className: styles$n.selectedSingleValue,
         "data-testid": testId && `${testId}-value`,
         children: !(searchValue == null ? void 0 : searchValue.length) ? selectedOptions == null ? void 0 : selectedOptions.label : ""
       }
@@ -16606,7 +16592,7 @@ const Input = ({
         tabIndex: -1,
         ref: inputRef,
         size: inputSize,
-        className: styles$m.input,
+        className: styles$n.input,
         value: searchValue,
         onChange: (evt) => onChange(evt.target.value),
         "data-error": error2 || null,
@@ -16652,18 +16638,18 @@ const Trigger = ({
     if (groupOrder) {
       switch (groupOrder) {
         case GroupOrder.FIRST:
-          return styles$m.groupOrderFirst;
+          return styles$n.groupOrderFirst;
         case GroupOrder.LAST:
-          return styles$m.groupOrderLast;
+          return styles$n.groupOrderLast;
         default:
-          return styles$m.groupOrderMiddle;
+          return styles$n.groupOrderMiddle;
       }
     }
     return "";
   })();
   const selectedOptionsWithDetails = !Array.isArray(selectedOptions) && (selectedOptions == null ? void 0 : selectedOptions.details) ? {
     ...selectedOptions,
-    label: /* @__PURE__ */ jsxs("div", { className: cx$2(styles$m.detailedLabel), children: [
+    label: /* @__PURE__ */ jsxs("div", { className: cx$2(styles$n.detailedLabel), children: [
       /* @__PURE__ */ jsx(Text, { children: selectedOptions.label }),
       /* @__PURE__ */ jsx(Text, { muted: true, children: selectedOptions.details })
     ] })
@@ -16676,12 +16662,12 @@ const Trigger = ({
         ref: triggerRef,
         tabIndex,
         className: cx$2(
-          styles$m.trigger,
-          isOpen2 ? styles$m.isOpen : "",
-          disabled2 ? styles$m.disabled : "",
-          small2 ? styles$m.small : "",
-          isInTable2 ? styles$m.isInTable : "",
-          right2 ? styles$m.right : "",
+          styles$n.trigger,
+          isOpen2 ? styles$n.isOpen : "",
+          disabled2 ? styles$n.disabled : "",
+          small2 ? styles$n.small : "",
+          isInTable2 ? styles$n.isInTable : "",
+          right2 ? styles$n.right : "",
           order2
         ),
         onClick: (evt) => {
@@ -16713,12 +16699,12 @@ const Trigger = ({
               testId
             }
           ),
-          /* @__PURE__ */ jsx("span", { className: styles$m.icons, children: canClear ? /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("span", { className: styles$n.icons, children: canClear ? /* @__PURE__ */ jsx(
             "span",
             {
               className: cx$2(
-                styles$m.clearAll,
-                clearAllIsFocused ? styles$m.focus : ""
+                styles$n.clearAll,
+                clearAllIsFocused ? styles$n.focus : ""
               ),
               onClick: (evt) => {
                 evt.stopPropagation();
@@ -16729,7 +16715,7 @@ const Trigger = ({
               "data-testid": testId && `${testId}-clear`,
               children: /* @__PURE__ */ jsx(Icon, { icon: IconType.CLOSE })
             }
-          ) : /* @__PURE__ */ jsx("span", { className: cx$2(styles$m.iconOpen), children: /* @__PURE__ */ jsx(Icon, { icon: "chevron down" }) }) })
+          ) : /* @__PURE__ */ jsx("span", { className: cx$2(styles$n.iconOpen), children: /* @__PURE__ */ jsx(Icon, { icon: "chevron down" }) }) })
         ]
       }
     )
@@ -16742,7 +16728,6 @@ const Trigger = ({
       text: tooltip2 || error2 || warning2,
       enabled: tooltip2 && isStringNumberOrNode(tooltip2) || error2 && isStringNumberOrNode(error2) || warning2 && isStringNumberOrNode(warning2) || false,
       maxWidth: maxTooltipWidth,
-      placement: "bottom-center",
       children: triggerInput
     }
   ) });
@@ -17270,7 +17255,7 @@ const CustomSelect = (props) => {
           }
         ),
         state.isLayerOpen && renderLayer(
-          /* @__PURE__ */ jsx("div", { ...layerProps, className: styles$n.layerContainer, children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("div", { ...layerProps, className: styles$o.layerContainer, children: /* @__PURE__ */ jsx(
             Layer,
             {
               listRef,
@@ -17519,7 +17504,7 @@ const validateSelectedPage = (selectedPage, numPages, errorMessageTemplate = "Se
   return valid;
 };
 const paginationContainer = "_paginationContainer_1tmz4_1";
-const styles$l = {
+const styles$m = {
   paginationContainer
 };
 const Pagination = ({ pagination }) => {
@@ -17556,7 +17541,7 @@ const Pagination = ({ pagination }) => {
       onSelectPage(Number(value));
     }
   };
-  return /* @__PURE__ */ jsxs("div", { className: styles$l.paginationContainer, children: [
+  return /* @__PURE__ */ jsxs("div", { className: styles$m.paginationContainer, children: [
     rowsPerPage && /* @__PURE__ */ jsx("div", { style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx(
       Select,
       {
@@ -17641,7 +17626,7 @@ const Pagination = ({ pagination }) => {
 const toggleBox = "_toggleBox_lhie5_1";
 const fullWidthStyleFix = "_fullWidthStyleFix_lhie5_8";
 const dismiss = "_dismiss_lhie5_13";
-const styles$k = {
+const styles$l = {
   toggleBox,
   fullWidthStyleFix,
   dismiss
@@ -17695,7 +17680,7 @@ const Popover = ({
       /* @__PURE__ */ jsxs(
         "div",
         {
-          className: fullWidth ? cx$2(styles$k.toggleBox, styles$k.fullWidthStyleFix) : cx$2(styles$k.toggleBox),
+          className: fullWidth ? cx$2(styles$l.toggleBox, styles$l.fullWidthStyleFix) : cx$2(styles$l.toggleBox),
           ...layerProps,
           children: [
             /* @__PURE__ */ jsxs("div", { children: [
@@ -17703,7 +17688,7 @@ const Popover = ({
                 content2,
                 { close: close2 }
               ) : content2,
-              showCloseButton && /* @__PURE__ */ jsx("div", { className: styles$k.dismiss, children: /* @__PURE__ */ jsx(Button$1, { small: true, round: true, onClick: close2, icon: IconType.CLOSE }) })
+              showCloseButton && /* @__PURE__ */ jsx("div", { className: styles$l.dismiss, children: /* @__PURE__ */ jsx(Button$1, { small: true, round: true, onClick: close2, icon: IconType.CLOSE }) })
             ] }),
             /* @__PURE__ */ jsx(
               Arrow,
@@ -17722,7 +17707,7 @@ const Popover = ({
   ] });
 };
 const printHeader = "_printHeader_o7xxx_1";
-const styles$j = {
+const styles$k = {
   printHeader
 };
 const PrintHeader = ({
@@ -17734,7 +17719,7 @@ const PrintHeader = ({
   {
     src: logo2,
     alt,
-    className: styles$j.printHeader,
+    className: styles$k.printHeader,
     style: { width: logoWidth }
   }
 );
@@ -17748,7 +17733,7 @@ const orange = "_orange_23ror_30";
 const yellow = "_yellow_23ror_33";
 const green = "_green_23ror_36";
 const label$3 = "_label_23ror_39";
-const styles$i = {
+const styles$j = {
   progress: progress$1,
   inverted,
   bar,
@@ -17761,11 +17746,11 @@ const styles$i = {
   label: label$3
 };
 const getColor = (perct) => {
-  if (perct < 20) return styles$i.grey;
-  if (perct < 40) return styles$i.red;
-  if (perct < 60) return styles$i.orange;
-  if (perct < 80) return styles$i.yellow;
-  return styles$i.green;
+  if (perct < 20) return styles$j.grey;
+  if (perct < 40) return styles$j.red;
+  if (perct < 60) return styles$j.orange;
+  if (perct < 80) return styles$j.yellow;
+  return styles$j.green;
 };
 const ProgressBar$1 = ({
   width: width2 = "auto",
@@ -17778,21 +17763,21 @@ const ProgressBar$1 = ({
   return /* @__PURE__ */ jsx("div", { style: { width: width2 }, "data-percent": percentage, children: /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cx$2(styles$i.progress, inverted2 ? styles$i.inverted : ""),
+      className: cx$2(styles$j.progress, inverted2 ? styles$j.inverted : ""),
       style: { width: width2 },
       children: [
         /* @__PURE__ */ jsx(
           "div",
           {
             className: cx$2(
-              styles$i.bar,
-              showProgressColors ? getColor(percentage) : colored2 ? styles$i.colored : ""
+              styles$j.bar,
+              showProgressColors ? getColor(percentage) : colored2 ? styles$j.colored : ""
             ),
             style: { width: `${percentage}%` },
-            children: /* @__PURE__ */ jsx("div", { className: styles$i.label, children: !noLabel2 && `${percentage}%` })
+            children: /* @__PURE__ */ jsx("div", { className: styles$j.label, children: !noLabel2 && `${percentage}%` })
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: styles$i.label, children: !noLabel2 && `${percentage}%` })
+        /* @__PURE__ */ jsx("div", { className: styles$j.label, children: !noLabel2 && `${percentage}%` })
       ]
     }
   ) });
@@ -17806,7 +17791,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$h = {
+const styles$i = {
   wrapper: wrapper$1,
   inline: inline$1,
   radio,
@@ -17835,10 +17820,10 @@ const RadioInput = ({
     "div",
     {
       className: cx$2(
-        styles$h.radio,
-        disabled2 ? styles$h.disabled : null,
-        small2 ? styles$h.small : null,
-        noMargin2 ? styles$h.noMargin : null
+        styles$i.radio,
+        disabled2 ? styles$i.disabled : null,
+        small2 ? styles$i.small : null,
+        noMargin2 ? styles$i.noMargin : null
       ),
       onClick: onChange,
       "data-testid": testId,
@@ -17855,7 +17840,7 @@ const RadioInput = ({
           }
         ),
         /* @__PURE__ */ jsx("label", { "data-name": name2, "data-value": value, children: label2 }),
-        showHelp && /* @__PURE__ */ jsx("div", { className: styles$h.helpIconEnabled, onClick: onClickHelp, children: /* @__PURE__ */ jsx(HelpIcon, { text: helpText }) })
+        showHelp && /* @__PURE__ */ jsx("div", { className: styles$i.helpIconEnabled, onClick: onClickHelp, children: /* @__PURE__ */ jsx(HelpIcon, { text: helpText }) })
       ]
     }
   );
@@ -17895,13 +17880,13 @@ const RadioButton = ({
     "div",
     {
       className: cx$2(
-        styles$h.wrapper,
-        inline2 ? styles$h.inline : null,
-        classForContainer === "inline fields" ? styles$h.inline : null
+        styles$i.wrapper,
+        inline2 ? styles$i.inline : null,
+        classForContainer === "inline fields" ? styles$i.inline : null
         //deprecated
       ),
       children: [
-        mainLabel && /* @__PURE__ */ jsx("label", { className: cx$2(inline2 && styles$h.labelMargin), children: label2 }),
+        mainLabel && /* @__PURE__ */ jsx("label", { className: cx$2(inline2 && styles$i.labelMargin), children: label2 }),
         options.map(
           (option2, index2) => {
             const selected2 = (option2 == null ? void 0 : option2.checked) || (option2 == null ? void 0 : option2.value) === selectedValue || false;
@@ -48149,7 +48134,7 @@ var interopRequireDefaultExports = interopRequireDefault.exports;
 const require$$2 = /* @__PURE__ */ getAugmentedNamespace(_extends$5);
 const richTextToolbar = "_richTextToolbar_1gbkk_1";
 const richTextToolbarContainer = "_richTextToolbarContainer_1gbkk_5";
-const styles$g = {
+const styles$h = {
   richTextToolbar,
   richTextToolbarContainer
 };
@@ -48201,8 +48186,8 @@ const RichTextToolbar = ({
       active: active2.orderedList()
     }
   ];
-  return /* @__PURE__ */ jsxs("div", { className: styles$g.richTextToolbarContainer, children: [
-    /* @__PURE__ */ jsx("div", { className: styles$g.richTextToolbar, children: items.map((item2, index2) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs("div", { className: styles$h.richTextToolbarContainer, children: [
+    /* @__PURE__ */ jsx("div", { className: styles$h.richTextToolbar, children: items.map((item2, index2) => /* @__PURE__ */ jsx(
       Button$1,
       {
         small: true,
@@ -48230,7 +48215,7 @@ const inputWarning$4 = "_inputWarning_1fb4l_26";
 const inputDisabled$4 = "_inputDisabled_1fb4l_61";
 const hideScrollbars$4 = "_hideScrollbars_1fb4l_67";
 const richTextInput = "_richTextInput_1fb4l_77";
-const styles$f = {
+const styles$g = {
   inputInTable: inputInTable$4,
   inputHover: inputHover$4,
   inputFocus: inputFocus$4,
@@ -48266,7 +48251,7 @@ const RichTextInput = forwardRef(
       }
       setState(state2);
     };
-    return /* @__PURE__ */ jsx("div", { className: styles$f.richTextInput, children: /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx("div", { className: styles$g.richTextInput, children: /* @__PURE__ */ jsxs(
       Remirror,
       {
         manager,
@@ -48289,7 +48274,7 @@ const RichTextInput = forwardRef(
   }
 );
 const row = "_row_n16je_1";
-const styles$e = {
+const styles$f = {
   row
 };
 const Row$1 = ({
@@ -48310,7 +48295,7 @@ const Row$1 = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cx$2(styles$e.row),
+      className: cx$2(styles$f.row),
       style: {
         alignItems,
         justifyContent,
@@ -48418,7 +48403,7 @@ const item$2 = "_item_1oy1z_140";
 const experimental = "_experimental_1oy1z_155";
 const active$2 = "_active_1oy1z_159";
 const icon$1 = "_icon_1oy1z_163";
-const styles$d = {
+const styles$e = {
   inputInTable: inputInTable$3,
   inputHover: inputHover$3,
   inputFocus: inputFocus$3,
@@ -48451,10 +48436,10 @@ const TooltipIcon = memo$1(
           fontSize: 16,
           padding: "var(--padding-sm)",
           display: "block",
-          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 }) }) })
+          children: /* @__PURE__ */ jsx("span", { className: styles$e.icon, children: /* @__PURE__ */ jsx(Badge, { small: true, title: invalid ? "!" : void 0, margin: 4, children: /* @__PURE__ */ jsx(Icon, { icon: icon2 }) }) })
         }
       ),
-      /* @__PURE__ */ jsx("span", { className: styles$d.label, children: label2 })
+      /* @__PURE__ */ jsx("span", { className: styles$e.label, children: label2 })
     ] });
   },
   (prevProps, nextProps) => isEqual$1(prevProps, nextProps)
@@ -48466,16 +48451,16 @@ const Link$1 = ({
   onClick,
   testId
 }) => {
-  return /* @__PURE__ */ jsx("div", { className: styles$d.list, children: items.map((link2, i) => {
+  return /* @__PURE__ */ jsx("div", { className: styles$e.list, children: items.map((link2, i) => {
     const key2 = `${sectionIndex}_${i}`;
     return /* @__PURE__ */ jsx(
       "a",
       {
         href: link2.value,
         className: cx$2(
-          styles$d.item,
-          link2.isActive ? styles$d.active : "",
-          link2.isExperimental ? styles$d.experimental : ""
+          styles$e.item,
+          link2.isActive ? styles$e.active : "",
+          link2.isExperimental ? styles$e.experimental : ""
         ),
         onClick: (evt) => onClick(evt, link2.value, link2.label, link2.onClick),
         "data-testid": testId,
@@ -48500,7 +48485,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$d.subtitle, children: section2.heading.toUpperCase() }),
+    /* @__PURE__ */ jsx("h5", { className: styles$e.subtitle, children: section2.heading.toUpperCase() }),
     /* @__PURE__ */ jsx(
       Link$1,
       {
@@ -48556,8 +48541,8 @@ const SideBar = memo$1(
             icon: IconType.LEFT
           }
         ),
-        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 }),
+        children: /* @__PURE__ */ jsx("div", { className: cx$2(styles$e.sidebar, !isOpen2 ? styles$e.collapsed : ""), children: visible && /* @__PURE__ */ jsxs("div", { className: styles$e.inner, children: [
+          /* @__PURE__ */ jsx("h4", { className: styles$e.title, children: options.title }),
           /* @__PURE__ */ jsx(
             Sections,
             {
@@ -50994,7 +50979,7 @@ const hasArrows = "_hasArrows_1bhdk_14";
 const button$1 = "_button_1bhdk_18";
 const label$1 = "_label_1bhdk_21";
 const dot = "_dot_1bhdk_29";
-const styles$c = {
+const styles$d = {
   container,
   small: small$2,
   vertical,
@@ -51013,7 +50998,7 @@ const formatMarkers = (marks) => {
           tooltip2 ? ": " : "",
           label2 ?? value
         ] }),
-        children: /* @__PURE__ */ jsx("div", { className: styles$c.dot })
+        children: /* @__PURE__ */ jsx("div", { className: styles$d.dot })
       }
     );
     return acc;
@@ -51056,7 +51041,7 @@ const Slider = ({
       }
     });
   };
-  const ButtonMin = () => /* @__PURE__ */ jsx("div", { className: styles$c.button, children: /* @__PURE__ */ jsx(
+  const ButtonMin = () => /* @__PURE__ */ jsx("div", { className: styles$d.button, children: /* @__PURE__ */ jsx(
     Button$1,
     {
       basic: true,
@@ -51067,7 +51052,7 @@ const Slider = ({
       icon: IconType.FAST_BACKWARD
     }
   ) });
-  const ButtonMax = () => /* @__PURE__ */ jsx("div", { className: styles$c.button, children: /* @__PURE__ */ jsx(
+  const ButtonMax = () => /* @__PURE__ */ jsx("div", { className: styles$d.button, children: /* @__PURE__ */ jsx(
     Button$1,
     {
       basic: true,
@@ -51090,9 +51075,9 @@ const Slider = ({
     "div",
     {
       className: cx$2(
-        styles$c.container,
-        small2 ? styles$c.small : "",
-        vertical2.enabled ? styles$c.vertical : ""
+        styles$d.container,
+        small2 ? styles$d.small : "",
+        vertical2.enabled ? styles$d.vertical : ""
       ),
       style: vertical2.enabled ? { width: vertical2.width, height: vertical2.height } : { width: width2 },
       children: [
@@ -51103,8 +51088,8 @@ const Slider = ({
             range: range2,
             allowCross: false,
             className: cx$2(
-              (disabled2 || disabledContext) && styles$c.rcSliderDisabled,
-              showArrows && styles$c.hasArrows
+              (disabled2 || disabledContext) && styles$d.rcSliderDisabled,
+              showArrows && styles$d.hasArrows
             ),
             value,
             max,
@@ -51118,7 +51103,7 @@ const Slider = ({
           }
         ),
         showArrows && (vertical2.enabled ? /* @__PURE__ */ jsx(ButtonMin, {}) : /* @__PURE__ */ jsx(ButtonMax, {})),
-        label2 && /* @__PURE__ */ jsx("label", { className: styles$c.label, style: { width: labelWidth }, children: label2 })
+        label2 && /* @__PURE__ */ jsx("label", { className: styles$d.label, style: { width: labelWidth }, children: label2 })
       ]
     }
   );
@@ -51152,7 +51137,7 @@ const scroll = "_scroll_xkoxm_98";
 const table = "_table_xkoxm_109";
 const dragOverlay = "_dragOverlay_xkoxm_145";
 const striped = "_striped_xkoxm_194";
-const styles$b = {
+const styles$c = {
   inputInTable: inputInTable$2,
   inputHover: inputHover$2,
   inputFocus: inputFocus$2,
@@ -51168,7 +51153,7 @@ const styles$b = {
   striped
 };
 const title$1 = "_title_zn5s7_1";
-const styles$a = {
+const styles$b = {
   title: title$1
 };
 const Title$1 = ({
@@ -51192,14 +51177,14 @@ const Title$1 = ({
     }
     return /* @__PURE__ */ jsx("div", { children: actionsComponent });
   };
-  return /* @__PURE__ */ jsxs("div", { className: styles$a.title, children: [
+  return /* @__PURE__ */ jsxs("div", { className: styles$b.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$9 = {
+const styles$a = {
   footer,
   section
 };
@@ -51225,11 +51210,11 @@ const Footer = ({
   return showFooter ? /* @__PURE__ */ jsxs(
     "div",
     {
-      className: styles$9.footer,
+      className: styles$a.footer,
       "data-testid": `${testId ?? "pagination"}-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: [
+        hasContent ? /* @__PURE__ */ jsx("div", { className: styles$a.section, children: /* @__PURE__ */ jsx("div", { children: content2 }) }) : null,
+        hasActions2 || hasPagination() ? /* @__PURE__ */ jsxs("div", { className: styles$a.section, children: [
           hasPagination() ? /* @__PURE__ */ jsx(Pagination, { pagination }) : /* @__PURE__ */ jsx("div", {}),
           hasActions2 && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Actions, { actions: actions2 }) })
         ] }) : null
@@ -51264,7 +51249,7 @@ const expandableRow = "_expandableRow_10f34_8";
 const flush = "_flush_10f34_8";
 const dragIconCell = "_dragIconCell_10f34_34";
 const dragIcon = "_dragIcon_10f34_34";
-const styles$8 = {
+const styles$9 = {
   clickableRow,
   hoverableRow,
   rowActive,
@@ -51282,7 +51267,7 @@ const ExpandedContentRow = ({
     "td",
     {
       colSpan,
-      className: cx$2(styles$8.expandableRow, flush2 ? styles$8.flush : ""),
+      className: cx$2(styles$9.expandableRow, flush2 ? styles$9.flush : ""),
       children
     }
   ) });
@@ -51354,7 +51339,7 @@ const centerAligned = "_centerAligned_ie6ng_199";
 const leftAligned = "_leftAligned_ie6ng_205";
 const popover = "_popover_ie6ng_208";
 const disabledPointerEvents = "_disabledPointerEvents_ie6ng_211";
-const styles$7 = {
+const styles$8 = {
   inputInTable: inputInTable$1,
   inputHover: inputHover$1,
   inputFocus: inputFocus$1,
@@ -51673,8 +51658,8 @@ const InputCellWrapper = ({
     "div",
     {
       className: cx$2(
-        styles$7.inputWrapper,
-        cell2.type === "NumberInput" ? styles$7.numberInputWrapper : ""
+        styles$8.inputWrapper,
+        cell2.type === "NumberInput" ? styles$8.numberInputWrapper : ""
       ),
       children: cell2.type === "Input" ? /* @__PURE__ */ jsx(
         InputCell,
@@ -51707,7 +51692,7 @@ const LinkCell = ({ cell: cell2, testId }) => {
   const isTooltipEnabled = (text2) => {
     return isStringNumberOrNode(text2);
   };
-  return /* @__PURE__ */ jsx("div", { className: styles$7.inputWrapper, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: styles$8.inputWrapper, children: /* @__PURE__ */ jsx(
     Tooltip,
     {
       error: !!error2,
@@ -51715,18 +51700,17 @@ const LinkCell = ({ cell: cell2, testId }) => {
       text: tooltip2 || error2 || warning2,
       enabled: isTooltipEnabled(tooltip2) || isTooltipEnabled(error2) || isTooltipEnabled(warning2) || false,
       maxWidth: maxTooltipWidth,
-      placement: "bottom-center",
       children: /* @__PURE__ */ jsx(
         "div",
         {
-          className: styles$7.staticCellContent,
+          className: styles$8.staticCellContent,
           "data-error": error2 || null,
           "data-warning": warning2 || null,
           children: /* @__PURE__ */ jsx(
             "a",
             {
               className: cx$2(
-                (cell2.disabled || disabledContext) && styles$7.disabledLink
+                (cell2.disabled || disabledContext) && styles$8.disabledLink
               ),
               onClick: cell2.disabled || disabledContext ? void 0 : (evt) => {
                 var _a2;
@@ -51757,7 +51741,7 @@ const CheckBoxCell = ({ cell: cell2, testId }) => {
   );
 };
 const SliderCell = ({ cell: cell2 }) => {
-  return /* @__PURE__ */ jsx("div", { className: styles$7.inputWrapper, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: styles$8.inputWrapper, children: /* @__PURE__ */ jsx(
     Slider,
     {
       label: cell2.label,
@@ -51776,7 +51760,7 @@ const SliderCell = ({ cell: cell2 }) => {
 };
 const IconCell = ({ cell: cell2 }) => {
   const { tooltip: tooltip2, icon: icon2 } = cell2;
-  return /* @__PURE__ */ jsx("div", { className: styles$7.iconCellWrapper, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: styles$8.iconCellWrapper, children: /* @__PURE__ */ jsx(
     Tooltip,
     {
       text: tooltip2,
@@ -51792,11 +51776,11 @@ const ActionsCell = ({ cell: cell2 }) => {
 };
 const CellHelpIcon = ({ cell: cell2 }) => {
   const { helpIcon: helpIcon2 } = cell2;
-  return helpIcon2 ? /* @__PURE__ */ jsx("div", { className: styles$7.icon, children: /* @__PURE__ */ jsx(HelpIcon, { onClick: helpIcon2.onClick, text: helpIcon2.tooltip }) }) : null;
+  return helpIcon2 ? /* @__PURE__ */ jsx("div", { className: styles$8.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$7.icon, children: /* @__PURE__ */ jsx(
+  return libraryIcon ? /* @__PURE__ */ jsx("div", { className: styles$8.icon, children: /* @__PURE__ */ jsx(
     HelpIcon,
     {
       onClick: libraryIcon.onClick,
@@ -51807,7 +51791,7 @@ const CellLibraryIcon = ({ cell: cell2 }) => {
 };
 const Sort = ({ cell: cell2 }) => {
   const { hasSort, sort: sort2, sortPriority } = cell2;
-  return hasSort ? /* @__PURE__ */ jsxs("span", { className: styles$7.sortingCellIcon, children: [
+  return hasSort ? /* @__PURE__ */ jsxs("span", { className: styles$8.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;
@@ -51818,8 +51802,8 @@ const StaticCell = ({ cell: cell2, isHeader, testId }) => {
     "div",
     {
       className: cx$2(
-        styles$7.staticCellContent,
-        type === "Unit" ? styles$7.unit : ""
+        styles$8.staticCellContent,
+        type === "Unit" ? styles$8.unit : ""
       ),
       onClick: hasSort ? (evt) => onSort && onSort(evt) : () => {
       },
@@ -51836,7 +51820,7 @@ const StaticCell = ({ cell: cell2, isHeader, testId }) => {
       ]
     }
   );
-  return /* @__PURE__ */ jsx("div", { className: styles$7.inputWrapper, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: styles$8.inputWrapper, children: /* @__PURE__ */ jsx(
     Tooltip,
     {
       error: !!error2,
@@ -51845,7 +51829,6 @@ const StaticCell = ({ cell: cell2, isHeader, testId }) => {
       enabled: tooltip2 && isStringNumberOrNode(tooltip2) || error2 && isStringNumberOrNode(error2) || warning2 && isStringNumberOrNode(warning2) || false,
       maxWidth: maxTooltipWidth,
       display: "block",
-      placement: "bottom-center",
       children: field2
     }
   ) });
@@ -51859,7 +51842,7 @@ const PopoverCell = ({ cell: cell2, testId }) => {
       fullWidth,
       closeOnOutsideClick,
       disabled: disabled2,
-      children: /* @__PURE__ */ jsx("div", { className: styles$7.popover, children: /* @__PURE__ */ jsx(StaticCell, { cell: cell2, testId }) })
+      children: /* @__PURE__ */ jsx("div", { className: styles$8.popover, children: /* @__PURE__ */ jsx(StaticCell, { cell: cell2, testId }) })
     }
   );
 };
@@ -51926,15 +51909,15 @@ const Cell = ({
     headerAlignment: columnHeaderAlignment,
     isHeader
   };
-  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 cellAlignmentStyle = getCellAlignment(alignment, styles$8);
+  const cellAlignmentText = getCellAlignment(alignment, styles$8, true);
+  const cellTypeClassName = cell2.type === CellType.INPUT || cell2.type === CellType.NUMBER_INPUT || cell2.type === CellType.SELECT || cell2.type === CellType.POPOVER ? styles$8.inputCell : cell2.type === CellType.SLIDER ? styles$8.sliderCell : cell2.type === CellType.CHECKBOX ? styles$8.checkBoxCell : cell2.type === CellType.ACTIONS ? styles$8.actionsCell : styles$8.staticCell;
   const className = cx$2(
-    styles$7.cell,
+    styles$8.cell,
     cellTypeClassName,
-    cell2.hasSort ? styles$7.sortingCell : null,
+    cell2.hasSort ? styles$8.sortingCell : null,
     cellAlignmentStyle,
-    cell2.breakWord ? styles$7.breakWord : ""
+    cell2.breakWord ? styles$8.breakWord : ""
   );
   const width2 = cellWidthProp ?? columnWidthProp ?? void 0;
   const style = { width: width2, minWidth: width2, ...styleProp };
@@ -52036,7 +52019,7 @@ const Row = ({
     if (row2.noDrag) {
       return /* @__PURE__ */ jsx("td", { "aria-labelledby": "unique-label-id" });
     }
-    return /* @__PURE__ */ jsx("td", { className: styles$8.dragIconCell, children: /* @__PURE__ */ jsx("div", { className: styles$8.dragIcon, ...attributes, ...listeners, children: /* @__PURE__ */ jsx(Icon, { icon: IconType.DRAG }) }) });
+    return /* @__PURE__ */ jsx("td", { className: styles$9.dragIconCell, children: /* @__PURE__ */ jsx("div", { className: styles$9.dragIcon, ...attributes, ...listeners, children: /* @__PURE__ */ jsx(Icon, { icon: IconType.DRAG }) }) });
   };
   return isHeader ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsxs(
@@ -52047,8 +52030,8 @@ const Row = ({
         onMouseLeave: onRowMouseLeave,
         onFocus: onRowFocus,
         className: cx$2(
-          onRowClick ? styles$8.clickableRow : null,
-          onRowMouseEnter ? styles$8.hoverableRow : null
+          onRowClick ? styles$9.clickableRow : null,
+          onRowMouseEnter ? styles$9.hoverableRow : null
         ),
         children: [
           draggableTable ? (
@@ -52080,9 +52063,9 @@ const Row = ({
         onMouseLeave: onRowMouseLeave,
         onFocus: onRowFocus,
         className: cx$2(
-          onRowClick && !onRowClick.noStyle ? styles$8.clickableRow : null,
-          onRowMouseEnter && !onRowMouseEnter.noStyle ? styles$8.hoverableRow : null,
-          active2 ? styles$8.rowActive : null
+          onRowClick && !onRowClick.noStyle ? styles$9.clickableRow : null,
+          onRowMouseEnter && !onRowMouseEnter.noStyle ? styles$9.hoverableRow : null,
+          active2 ? styles$9.rowActive : null
         ),
         "data-error": error2 || null,
         "data-warning": warning2 || null,
@@ -52122,7 +52105,6 @@ const TableDragWrapper = (props) => {
     tbodyRef
   } = props;
   const [dragIndex, setDragIndex] = useState(null);
-  if (!draggable) return children;
   const itemIds = useMemo(
     () => rows.map((_2, index2) => index2.toString()),
     [rows]
@@ -52151,6 +52133,7 @@ const TableDragWrapper = (props) => {
     widths.shift();
     return widths;
   };
+  if (!draggable) return children;
   return /* @__PURE__ */ jsxs(
     DndContext$1,
     {
@@ -52160,7 +52143,7 @@ const TableDragWrapper = (props) => {
       children: [
         /* @__PURE__ */ jsx(SortableContext, { items: itemIds, strategy: verticalListSortingStrategy, children }),
         !!dragIndex && createPortal(
-          /* @__PURE__ */ jsx(DragOverlay, { dropAnimation: null, children: /* @__PURE__ */ jsx("table", { className: cx$2(styles$b.table, styles$b.dragOverlay), children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(DragOverlay, { dropAnimation: null, children: /* @__PURE__ */ jsx("table", { className: cx$2(styles$c.table, styles$c.dragOverlay), children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx(
             Row,
             {
               rowIndex: Number(dragIndex),
@@ -52184,30 +52167,32 @@ const TableScrollWrapper = ({
   theadRef,
   children
 }) => {
-  var _a2, _b;
+  var _a2;
   const { infiniteScroll = false } = table2;
-  if (!infiniteScroll) {
-    return /* @__PURE__ */ jsx("div", { id: "scrollWrapper", className: styles$b.scroll, children: children({}) });
-  }
   const containerRef = useRef(null);
-  const MIN_ITEM_HEIGHT = 31;
-  const virtualizer = useVirtualizer({
+  const MIN_ITEM_HEIGHT = 30;
+  const BORDER_WIDTH = 1;
+  const virtualizer = infiniteScroll ? useVirtualizer({
     count: ((_a2 = table2.rows) == null ? void 0 : _a2.length) ?? 0,
     getScrollElement: () => containerRef.current,
-    estimateSize: () => MIN_ITEM_HEIGHT,
+    estimateSize: () => MIN_ITEM_HEIGHT + BORDER_WIDTH,
     overscan: 10
-  });
-  const theadHeight = ((_b = theadRef.current) == null ? void 0 : _b.clientHeight) ?? 0;
-  const totalHeight = virtualizer.getTotalSize() + theadHeight;
-  const items = virtualizer.getVirtualItems();
-  const paddingTop = items.length > 0 ? items[0].start : 0;
-  const paddingBottom = items.length > 0 ? virtualizer.getTotalSize() - items[items.length - 1].end : 0;
-  const tableStyle = {
-    "--virtualPaddingTop": paddingTop + "px",
-    "--virtualPaddingBottom": paddingBottom + "px",
-    height: totalHeight
+  }) : void 0;
+  const getVirtualTableStyle = () => {
+    var _a3;
+    if (!virtualizer) return {};
+    const theadHeight = ((_a3 = theadRef.current) == null ? void 0 : _a3.clientHeight) ?? 0;
+    const totalHeight = virtualizer.getTotalSize() + theadHeight;
+    const items = virtualizer.getVirtualItems();
+    const paddingTop = items.length > 0 ? items[0].start : 0;
+    const paddingBottom = items.length > 0 ? virtualizer.getTotalSize() - items[items.length - 1].end : 0;
+    return {
+      "--virtualPaddingTop": paddingTop + "px",
+      "--virtualPaddingBottom": paddingBottom + "px",
+      height: totalHeight
+    };
   };
-  return /* @__PURE__ */ jsx("div", { id: "scrollWrapper", className: styles$b.scroll, ref: containerRef, children: children({ virtualizer, tableStyle }) });
+  return /* @__PURE__ */ jsx("div", { id: "scrollWrapper", className: styles$c.scroll, ref: containerRef, children: children({ virtualizer, tableStyle: getVirtualTableStyle() }) });
 };
 const Table = (props) => {
   var _a2, _b, _c, _d, _e2, _f, _g;
@@ -52276,7 +52261,7 @@ const Table = (props) => {
     ...propTable,
     rows
   };
-  const wrapperClass = cx$2(styles$b.wrapper, bordered2 ? styles$b.bordered : "");
+  const wrapperClass = cx$2(styles$c.wrapper, bordered2 ? styles$c.bordered : "");
   const wrapperStyles = {
     maxHeight,
     width: width2,
@@ -52308,7 +52293,7 @@ const Table = (props) => {
           return /* @__PURE__ */ jsxs(
             "table",
             {
-              className: cx$2(styles$b.table, striped2 ? styles$b.striped : ""),
+              className: cx$2(styles$c.table, striped2 ? styles$c.striped : ""),
               "data-testid": testId,
               style: tableStyle,
               children: [
@@ -52384,7 +52369,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$6 = {
+const styles$7 = {
   tabs,
   padding,
   margin,
@@ -52417,11 +52402,11 @@ const Label = ({
       id: label2 == null ? void 0 : label2.toString(),
       href: url,
       className: cx$2(
-        styles$6.item,
-        active2 ? styles$6.active : "",
-        disabled2 ? styles$6.disabled : "",
-        hidden2 && !active2 ? styles$6.hidden : "",
-        right2 ? styles$6.right : styles$6.left
+        styles$7.item,
+        active2 ? styles$7.active : "",
+        disabled2 ? styles$7.disabled : "",
+        hidden2 && !active2 ? styles$7.hidden : "",
+        right2 ? styles$7.right : styles$7.left
       ),
       onClick,
       "data-testid": testId,
@@ -52434,7 +52419,7 @@ const Content$1 = ({
   activeTabIndex,
   contentPadding: contentPadding2
 }) => {
-  return Array.isArray(children) ? /* @__PURE__ */ jsx("div", { className: cx$2(contentPadding2 ? styles$6.contentPadding : ""), children: children.map((child, index2) => activeTabIndex === index2 && child) }) : null;
+  return Array.isArray(children) ? /* @__PURE__ */ jsx("div", { className: cx$2(contentPadding2 ? styles$7.contentPadding : ""), children: children.map((child, index2) => activeTabIndex === index2 && child) }) : null;
 };
 const Tabs = ({
   name: name2 = void 0,
@@ -52524,9 +52509,9 @@ const Tabs = ({
         "div",
         {
           className: cx$2(
-            styles$6.tabs,
-            padding2 ? styles$6.padding : "",
-            margin2 ? styles$6.margin : ""
+            styles$7.tabs,
+            padding2 ? styles$7.padding : "",
+            margin2 ? styles$7.margin : ""
           ),
           "data-testid": testId,
           children: tabs2.map(renderTab)
@@ -52574,7 +52559,7 @@ const hideScrollbars = "_hideScrollbars_q0tl0_67";
 const textarea = "_textarea_q0tl0_77";
 const small$1 = "_small_q0tl0_116";
 const monospace = "_monospace_q0tl0_155";
-const styles$5 = {
+const styles$6 = {
   inputInTable,
   inputHover,
   inputFocus,
@@ -52611,10 +52596,10 @@ const TextArea = ({
     "textarea",
     {
       className: cx$2(
-        styles$5.textarea,
-        error2 ? styles$5.error : "",
-        warning2 ? styles$5.warning : "",
-        monospace2 ? styles$5.monospace : ""
+        styles$6.textarea,
+        error2 ? styles$6.error : "",
+        warning2 ? styles$6.warning : "",
+        monospace2 ? styles$6.monospace : ""
       ),
       name: name2,
       value,
@@ -52641,7 +52626,6 @@ const TextArea = ({
       text: tooltip2 || error2 || warning2,
       enabled: tooltip2 && isStringNumberOrNode(tooltip2) || error2 && isStringNumberOrNode(error2) || warning2 && isStringNumberOrNode(warning2) || false,
       maxWidth: maxTooltipWidth,
-      placement: "bottom-center",
       children: textarea2
     }
   );
@@ -53739,7 +53723,7 @@ const small = "_small_1mo1i_25";
 const disabled = "_disabled_1mo1i_102";
 const noMargin = "_noMargin_1mo1i_113";
 const helpIconEnabled = "_helpIconEnabled_1mo1i_116";
-const styles$4 = {
+const styles$5 = {
   toggle: toggle$1,
   small,
   disabled,
@@ -53766,10 +53750,10 @@ const Toggle = ({
     "div",
     {
       className: cx$2(
-        styles$4.toggle,
-        isDisabled ? styles$4.disabled : null,
-        small2 ? styles$4.small : null,
-        noMargin2 ? styles$4.noMargin : null
+        styles$5.toggle,
+        isDisabled ? styles$5.disabled : null,
+        small2 ? styles$5.small : null,
+        noMargin2 ? styles$5.noMargin : null
       ),
       style: { display },
       onClick: (evt) => {
@@ -53795,7 +53779,7 @@ const Toggle = ({
           }
         ),
         /* @__PURE__ */ jsx("label", { children: label2 }),
-        showHelp && /* @__PURE__ */ jsx("div", { className: styles$4.helpIconEnabled, onClick: onClickHelp, children: /* @__PURE__ */ jsx(HelpIcon, { text: helpText }) })
+        showHelp && /* @__PURE__ */ jsx("div", { className: styles$5.helpIconEnabled, onClick: onClickHelp, children: /* @__PURE__ */ jsx(HelpIcon, { text: helpText }) })
       ]
     }
   );
@@ -53816,7 +53800,7 @@ const button = "_button_oyr59_138";
 const menu = "_menu_oyr59_139";
 const active = "_active_oyr59_168";
 const alert = "_alert_oyr59_193";
-const styles$3 = {
+const styles$4 = {
   topbar,
   fixed,
   appSwitcher,
@@ -53835,7 +53819,7 @@ const styles$3 = {
   alert
 };
 const Warning = ({ warning: warning2 }) => {
-  return /* @__PURE__ */ jsx("div", { className: styles$3.alert, children: warning2 });
+  return /* @__PURE__ */ jsx("div", { className: styles$4.alert, children: warning2 });
 };
 const AppSwitcher = ({
   icon: icon2,
@@ -53843,7 +53827,7 @@ const AppSwitcher = ({
   onClick
 }) => {
   const content2 = /* @__PURE__ */ jsx(Icon, { icon: icon2 });
-  return url ? /* @__PURE__ */ jsx("a", { href: url, onClick, className: styles$3.appSwitcher, children: content2 }) : /* @__PURE__ */ jsx("div", { onClick, className: styles$3.appSwitcher, children: content2 });
+  return url ? /* @__PURE__ */ jsx("a", { href: url, onClick, className: styles$4.appSwitcher, children: content2 }) : /* @__PURE__ */ jsx("div", { onClick, className: styles$4.appSwitcher, children: content2 });
 };
 const Title = ({
   label: label2,
@@ -53852,12 +53836,12 @@ const Title = ({
   version: version2,
   onClick
 }) => {
-  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 })
+  const content2 = /* @__PURE__ */ jsxs("div", { className: styles$4.title, children: [
+    logo2 && /* @__PURE__ */ jsx("div", { className: styles$4.logo, children: logo2 }),
+    label2 && /* @__PURE__ */ jsx("span", { className: styles$4.label, children: label2 }),
+    version2 && /* @__PURE__ */ jsx("div", { className: styles$4.version, children: version2 })
   ] });
-  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 }) });
+  return /* @__PURE__ */ jsx("div", { className: cx$2(styles$4.item, styles$4.brand), children: url ? /* @__PURE__ */ jsx("a", { href: url, onClick, children: content2 }) : /* @__PURE__ */ jsx("div", { onClick, children: content2 }) });
 };
 var ElementType = /* @__PURE__ */ ((ElementType2) => {
   ElementType2["LINK"] = "Link";
@@ -53886,7 +53870,7 @@ const Link = ({
   return /* @__PURE__ */ jsxs(
     Component2,
     {
-      className: cx$2(styles$3.link, active2 ? styles$3.active : ""),
+      className: cx$2(styles$4.link, active2 ? styles$4.active : ""),
       href: url || "#",
       to: url,
       onClick: handleClick2,
@@ -53895,7 +53879,7 @@ const Link = ({
       role: onClick && !url ? "button" : void 0,
       children: [
         icon2,
-        /* @__PURE__ */ jsx("span", { className: styles$3.label, children: label2 })
+        /* @__PURE__ */ jsx("span", { className: styles$4.label, children: label2 })
       ]
     }
   );
@@ -53903,7 +53887,7 @@ const Link = ({
 const Element$1 = ({ element }) => {
   switch (element.type) {
     case ElementType.LINK:
-      return /* @__PURE__ */ jsx("div", { className: styles$3.item, children: /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx("div", { className: styles$4.item, children: /* @__PURE__ */ jsx(
         Link,
         {
           label: element.label,
@@ -53917,7 +53901,7 @@ const Element$1 = ({ element }) => {
         }
       ) });
     case ElementType.BUTTON:
-      return /* @__PURE__ */ jsx("div", { className: cx$2(styles$3.item, styles$3.button), children: /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx("div", { className: cx$2(styles$4.item, styles$4.button), children: /* @__PURE__ */ jsx(
         Button$1,
         {
           label: element.label,
@@ -53930,7 +53914,7 @@ const Element$1 = ({ element }) => {
         }
       ) });
     case ElementType.MENU:
-      return /* @__PURE__ */ jsx("div", { className: cx$2(styles$3.item, styles$3.menu), children: /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx("div", { className: cx$2(styles$4.item, styles$4.menu), children: /* @__PURE__ */ jsx(
         Menu,
         {
           maxHeight: "100%",
@@ -53951,7 +53935,7 @@ const Element$1 = ({ element }) => {
         }
       ) });
     case ElementType.COMPONENT:
-      return /* @__PURE__ */ jsx("div", { className: styles$3.item, children: element.component });
+      return /* @__PURE__ */ jsx("div", { className: styles$4.item, children: element.component });
     default:
       return null;
   }
@@ -53970,7 +53954,7 @@ const TopBar = ({
     /* @__PURE__ */ jsxs(
       "div",
       {
-        className: cx$2(styles$3.topbar, fixedPosition ? styles$3.fixed : ""),
+        className: cx$2(styles$4.topbar, fixedPosition ? styles$4.fixed : ""),
         style: { height: height2 },
         children: [
           !!appSwitcher2 && /* @__PURE__ */ jsx(
@@ -53981,7 +53965,7 @@ const TopBar = ({
               onClick: appSwitcher2.onClick
             }
           ),
-          /* @__PURE__ */ jsxs("div", { className: styles$3.left, children: [
+          /* @__PURE__ */ jsxs("div", { className: styles$4.left, children: [
             title2 && /* @__PURE__ */ jsx(
               Title,
               {
@@ -53999,7 +53983,7 @@ const TopBar = ({
               return null;
             })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: styles$3.right, children: contentRight.map((element, i) => {
+          /* @__PURE__ */ jsx("div", { className: styles$4.right, children: contentRight.map((element, i) => {
             if (element) {
               return /* @__PURE__ */ jsx(Element$1, { element }, i);
             }
@@ -54013,7 +53997,7 @@ const TopBar = ({
 const popConfirm = "_popConfirm_1x6ye_1";
 const content = "_content_1x6ye_7";
 const buttons = "_buttons_1x6ye_13";
-const styles$2 = {
+const styles$3 = {
   popConfirm,
   content,
   buttons
@@ -54027,9 +54011,9 @@ const Content = ({
   onClickCancel,
   close: close2,
   testId
-}) => /* @__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__ */ jsxs("div", { className: styles$3.popConfirm, children: [
+  title2 && /* @__PURE__ */ jsx("div", { className: styles$3.content, children: /* @__PURE__ */ jsx(Text, { small: true, children: title2 }) }),
+  /* @__PURE__ */ jsxs("div", { className: styles$3.buttons, children: [
     /* @__PURE__ */ jsx(
       Button$1,
       {
@@ -65910,7 +65894,7 @@ const dropTarget = "_dropTarget_15yn1_11";
 const draggingSource = "_draggingSource_15yn1_26";
 const placeholderContainer = "_placeholderContainer_15yn1_29";
 const placeholder = "_placeholder_15yn1_29";
-const styles$1 = {
+const styles$2 = {
   tree,
   toggle,
   dropTarget,
@@ -65998,7 +65982,7 @@ const TreeItem = ({
             isDragOver ? listStyles.noPointerEvents : ""
           ),
           children: [
-            hasChild && /* @__PURE__ */ jsx("div", { className: styles$1.toggle, children: /* @__PURE__ */ jsx(
+            hasChild && /* @__PURE__ */ jsx("div", { className: styles$2.toggle, children: /* @__PURE__ */ jsx(
               Button$1,
               {
                 basic: true,
@@ -66018,7 +66002,7 @@ const TreeItem = ({
     }
   );
 };
-const TreePlaceholder = ({ depth }) => /* @__PURE__ */ jsx("div", { className: styles$1.placeholder, style: { left: depth * 24 } });
+const TreePlaceholder = ({ depth }) => /* @__PURE__ */ jsx("div", { className: styles$2.placeholder, style: { left: depth * 24 } });
 const Tree = ({
   list: list2,
   draggable = false,
@@ -66160,10 +66144,10 @@ const Tree = ({
             listComponent: "div",
             listItemComponent: "div",
             classes: {
-              root: styles$1.tree,
-              draggingSource: styles$1.draggingSource,
-              dropTarget: styles$1.dropTarget,
-              placeholder: styles$1.placeholderContainer
+              root: styles$2.tree,
+              draggingSource: styles$2.draggingSource,
+              dropTarget: styles$2.dropTarget,
+              placeholder: styles$2.placeholderContainer
             },
             initialOpen: isInitialOpen
           }
@@ -66344,7 +66328,7 @@ const safeRoundNumbers = (value) => {
 };
 const predefinedMenuActive = "_predefinedMenuActive_ye9w9_1";
 const inputWrapper = "_inputWrapper_ye9w9_4";
-const styles = {
+const styles$1 = {
   predefinedMenuActive,
   inputWrapper
 };
@@ -66596,7 +66580,7 @@ const UnitInput = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: predefinedOptionsMenuState === PredefinedOptionsMenuState.PREDEFINED ? cx$2(styles.predefinedMenuActive) : "",
+      className: predefinedOptionsMenuState === PredefinedOptionsMenuState.PREDEFINED ? cx$2(styles$1.predefinedMenuActive) : "",
       children: /* @__PURE__ */ jsxs(InputGroup, { small: small2, width: width2, children: [
         predefinedOptions && /* @__PURE__ */ jsx(
           Tooltip,
@@ -66627,7 +66611,7 @@ const UnitInput = ({
             )
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: styles.inputWrapper, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: styles$1.inputWrapper, children: /* @__PURE__ */ jsx(
           NumberInput,
           {
             name: stringName,
@@ -67001,20 +66985,31 @@ const SmartUploadModal = ({
     }
   ) });
 };
+const settingField = "_settingField_1x02n_1";
+const styles = {
+  settingField
+};
 const SettingField = ({
   helpText,
-  active: active2 = true,
+  disabled: disabled2 = false,
   children,
   noPermission = false,
   selectedOption,
   handleSelectChange
 }) => {
+  const renderHelpText = (text2) => {
+    const textWithNewlines = text2.replace(/\\n/g, "\n");
+    return textWithNewlines.split(/\n/).map((line2, index2) => /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+      line2,
+      /* @__PURE__ */ jsx("br", {})
+    ] }, index2));
+  };
   const options = [
     { label: "All users", value: "all_users" },
     { label: "Admin only", value: "superusers_admin" }
   ];
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", children: [
+  return /* @__PURE__ */ jsxs("div", { className: styles.settingField, children: [
+    /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", wrap: false, children: [
       children,
       !noPermission && /* @__PURE__ */ jsx(
         Select,
@@ -67024,7 +67019,7 @@ const SettingField = ({
           name: "userType",
           options,
           value: selectedOption,
-          disabled: !active2,
+          disabled: disabled2,
           onChange: handleSelectChange ? (e2) => handleSelectChange(
             e2.target.value
           ) : void 0,
@@ -67033,7 +67028,7 @@ const SettingField = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx(Text, { muted: true, children: helpText })
+    helpText && /* @__PURE__ */ jsx(Text, { muted: true, children: renderHelpText(helpText) })
   ] });
 };
 export {