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

package/dist/assets/{index-6b425392.js → index-9914ac27.js}

@@ -9260,7 +9260,7 @@ var IconType = /* @__PURE__ */ ((IconType2) => {
 })(IconType || {});
 const chevron = "_chevron_1kw4m_1";
 const expanded$2 = "_expanded_1kw4m_9";
-const styles$V = {
+const styles$W = {
   chevron,
   expanded: expanded$2
 };
@@ -9922,7 +9922,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$U = {
+const styles$V = {
   wrapper: wrapper$5,
   customSvg,
   customPng,
@@ -10526,8 +10526,8 @@ const Icon = ({
     "div",
     {
       className: cx$2(
-        styles$U.wrapper,
-        (clickable2 || onClick) && !disabledContext ? styles$U.clickable : ""
+        styles$V.wrapper,
+        (clickable2 || onClick) && !disabledContext ? styles$V.clickable : ""
       ),
       style,
       onClick: (evt) => onClick && !disabledContext ? onClick(evt) : void 0,
@@ -10535,7 +10535,7 @@ const Icon = ({
       children: reactExports.isValidElement(icon2) ? icon2 : typeof icon2 === "string" && (icon2.includes(".svg") || icon2.includes("image/svg")) ? /* @__PURE__ */ jsxRuntimeExports.jsx(
         ReactSVG,
         {
-          className: styles$U.customSvg,
+          className: styles$V.customSvg,
           beforeInjection: (svg) => {
             if (size2) {
               svg.setAttribute("width", String(size2));
@@ -10544,7 +10544,7 @@ const Icon = ({
           },
           src: icon2
         }
-      ) : typeof icon2 === "string" && (icon2.includes(".png") || icon2.includes("image/png")) ? /* @__PURE__ */ jsxRuntimeExports.jsx("img", { alt: "icon", className: styles$U.customPng, src: icon2 }) : typeof icon2 === "string" ? /* @__PURE__ */ jsxRuntimeExports.jsx(NamedIcon, { icon: icon2 }) : null
+      ) : typeof icon2 === "string" && (icon2.includes(".png") || icon2.includes("image/png")) ? /* @__PURE__ */ jsxRuntimeExports.jsx("img", { alt: "icon", className: styles$V.customPng, src: icon2 }) : typeof icon2 === "string" ? /* @__PURE__ */ jsxRuntimeExports.jsx(NamedIcon, { icon: icon2 }) : null
     }
   );
 };
@@ -10557,7 +10557,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$T = {
+const styles$U = {
   accordion,
   accordionHeader,
   heading: heading$6,
@@ -10576,7 +10576,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$S = {
+const styles$T = {
   checkbox,
   noLabel,
   small: small$d,
@@ -12582,7 +12582,7 @@ function useHover(_temp) {
 const tooltip = "_tooltip_wli9z_1";
 const error$r = "_error_wli9z_15";
 const warning$9 = "_warning_wli9z_19";
-const styles$R = {
+const styles$S = {
   tooltip,
   error: error$r,
   warning: warning$9
@@ -12613,8 +12613,8 @@ const TooltipLayer = ({
     "div",
     {
       className: cx$2(
-        styles$R.tooltip,
-        error2 ? styles$R.error : warning2 ? styles$R.warning : ""
+        styles$S.tooltip,
+        error2 ? styles$S.error : warning2 ? styles$S.warning : ""
       ),
       ...layerProps,
       children: [
@@ -12683,7 +12683,7 @@ const Tooltip = ({
 const helpIcon = "_helpIcon_hd0z2_1";
 const active$9 = "_active_hd0z2_9";
 const clickable = "_clickable_hd0z2_12";
-const styles$Q = {
+const styles$R = {
   helpIcon,
   active: active$9,
   clickable
@@ -12714,9 +12714,9 @@ const HelpIcon = ({
     "div",
     {
       className: cx$2(
-        styles$Q.helpIcon,
-        onClick ? styles$Q.clickable : "",
-        active2 ? styles$Q.active : ""
+        styles$R.helpIcon,
+        onClick ? styles$R.clickable : "",
+        active2 ? styles$R.active : ""
       ),
       onClick: onClickHelpIcon,
       "data-testid": testId,
@@ -12728,7 +12728,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$P = {
+const styles$Q = {
   bordered: bordered$3,
   checkboxWrapper,
   padding: padding$2,
@@ -18271,7 +18271,7 @@ const buttonStyles = {
   groupOrderLast: groupOrderLast$4
 };
 const spinner = "_spinner_156m4_1";
-const styles$O = {
+const styles$P = {
   spinner
 };
 const Spinner = ({
@@ -18282,7 +18282,7 @@ const Spinner = ({
 }) => {
   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__ */ jsxRuntimeExports.jsx("div", { className: styles$O.spinner, style: { color: color2, fontSize } });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$P.spinner, style: { color: color2, fontSize } });
 };
 var ButtonType = /* @__PURE__ */ ((ButtonType2) => {
   ButtonType2["SUBMIT"] = "submit";
@@ -18322,7 +18322,7 @@ const Button$1 = ({
   error: error2,
   warning: warning2,
   testId,
-  tooltip: tooltipProp,
+  tooltip: tooltip2,
   inverted: inverted2 = false
   // *Deprecated*
 }) => {
@@ -18357,7 +18357,6 @@ const Button$1 = ({
     }
     return "";
   })();
-  const tooltip2 = tooltipProp || (round2 ? title2 : void 0);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonTooltipWrapper, { tooltip: tooltip2, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "button",
     {
@@ -18402,7 +18401,7 @@ const Button$1 = ({
 const actions$2 = "_actions_1nid8_1";
 const actionComponentContainer = "_actionComponentContainer_1nid8_11";
 const active$7 = "_active_1nid8_33";
-const styles$N = {
+const styles$O = {
   actions: actions$2,
   actionComponentContainer,
   active: active$7
@@ -18435,7 +18434,7 @@ const buttonCaret = "_buttonCaret_uioq1_178";
 const component = "_component_uioq1_182";
 const right$7 = "_right_uioq1_188";
 const actions$1 = "_actions_uioq1_193";
-const styles$M = {
+const styles$N = {
   wrapper: wrapper$4,
   layer: layer$1,
   layerContainer: layerContainer$1,
@@ -18469,15 +18468,15 @@ const Heading$1 = ({ label: label2, onClick, icon: icon2, testId }) => /* @__PUR
   "div",
   {
     onClick: (evt) => evt.stopPropagation(),
-    className: styles$M.heading,
+    className: styles$N.heading,
     "data-testid": testId,
     children: [
       label2,
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$M.headingIcon, onClick, children: icon2 })
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$N.headingIcon, onClick, children: icon2 })
     ]
   }
 );
-const Divider$1 = () => /* @__PURE__ */ jsxRuntimeExports.jsx("hr", { className: styles$M.divider });
+const Divider$1 = () => /* @__PURE__ */ jsxRuntimeExports.jsx("hr", { className: styles$N.divider });
 const Option = ({
   actions: actions2,
   label: label2,
@@ -18513,31 +18512,31 @@ const Option = ({
     {
       href: url,
       className: cx$2(
-        styles$M.option,
-        disabled2 ? styles$M.disabled : "",
-        inline2 ? styles$M.inline : "",
-        selected2 ? styles$M.selected : ""
+        styles$N.option,
+        disabled2 ? styles$N.disabled : "",
+        inline2 ? styles$N.inline : "",
+        selected2 ? styles$N.selected : ""
       ),
       onClick: handleClick2,
       "data-testid": testId,
       children: [
-        icon2 ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$M.icon, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: icon2 }) }) : null,
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$M.optionContent, children: [
+        icon2 ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$N.icon, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: icon2 }) }) : null,
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$N.optionContent, children: [
           upload && /* @__PURE__ */ jsxRuntimeExports.jsx(
             "input",
             {
               type: "file",
-              className: styles$M.fileInput,
+              className: styles$N.fileInput,
               onChange: (evt) => {
                 onChange == null ? void 0 : onChange(evt.target.files);
                 close2 == null ? void 0 : close2();
               }
             }
           ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$M.label, title: `${title2 || label2}`, children: label2 }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$M.right, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$M.description, children: description2 }),
-            !!(actions2 == null ? void 0 : actions2.length) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$M.actions, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Actions, { actions: actions2 }) })
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$N.label, title: `${title2 || label2}`, children: label2 }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$N.right, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$N.description, children: description2 }),
+            !!(actions2 == null ? void 0 : actions2.length) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$N.actions, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Actions, { actions: actions2 }) })
           ] })
         ] })
       ]
@@ -18670,7 +18669,7 @@ const Layer = ({
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
-      className: cx$2(styles$M.layer, isNested ? styles$M.nested : null),
+      className: cx$2(styles$N.layer, isNested ? styles$N.nested : null),
       style: { maxWidth: width2, maxHeight },
       "data-testid": testId,
       children: /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { children: localSections.map((section2, i) => /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -18704,7 +18703,7 @@ const light = "_light_nwprz_26";
 const small$b = "_small_nwprz_29";
 const dot = "_dot_nwprz_33";
 const hasChildren = "_hasChildren_nwprz_39";
-const styles$L = {
+const styles$M = {
   wrapper: wrapper$3,
   badge,
   label: label$9,
@@ -18732,16 +18731,16 @@ const Badge = ({
   small: small2 = false
 }) => {
   const visible = !(title2 === null && dot2 === false);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$L.wrapper, children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$M.wrapper, children: [
     visible && /* @__PURE__ */ jsxRuntimeExports.jsx(
       "sup",
       {
         className: cx$2(
-          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 : ""
+          styles$M.badge,
+          isDark(color2) ? styles$M.dark : styles$M.light,
+          title2 !== null ? styles$M.label : styles$M.dot,
+          small2 ? styles$M.small : "",
+          children ? styles$M.hasChildren : ""
         ),
         style: {
           background: color2 || void 0,
@@ -18767,16 +18766,16 @@ const Button = ({
   active: active2
 }) => {
   const disabledContext = reactExports.useContext(DisabledContext);
-  const buttonLabel2 = trigger2 === TriggerType.BUTTON ? label2 : trigger2 === TriggerType.DROP_DOWN_BUTTON ? /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: styles$M.middleAlignedInline, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$M.buttonLabel, children: label2 }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$M.buttonCaret, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: IconType.CHEVRON_DOWN }) })
+  const buttonLabel2 = trigger2 === TriggerType.BUTTON ? label2 : trigger2 === TriggerType.DROP_DOWN_BUTTON ? /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: styles$N.middleAlignedInline, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$N.buttonLabel, children: label2 }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$N.buttonCaret, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: IconType.CHEVRON_DOWN }) })
   ] }) : null;
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
       className: cx$2(
-        styles$M.trigger,
-        disabled2 || disabledContext ? styles$M.disabled : null
+        styles$N.trigger,
+        disabled2 || disabledContext ? styles$N.disabled : null
       ),
       style: { width: width2 },
       children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -18816,13 +18815,13 @@ const Text$1 = ({
     "div",
     {
       className: cx$2(
-        styles$M.trigger,
-        disabled2 ? styles$M.disabled : null,
-        isOpen2 ? styles$M.active : null
+        styles$N.trigger,
+        disabled2 ? styles$N.disabled : null,
+        isOpen2 ? styles$N.active : null
       ),
       children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$M.label, title: titleText, children: label2 }),
-        carat && carat === MenuCarat.RIGHT ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$M.arrow, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: IconType.CHEVRON_RIGHT }) }) : carat && carat === MenuCarat.DOWN ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$M.arrow, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: IconType.CHEVRON_DOWN }) }) : null
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$N.label, title: titleText, children: label2 }),
+        carat && carat === MenuCarat.RIGHT ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$N.arrow, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: IconType.CHEVRON_RIGHT }) }) : carat && carat === MenuCarat.DOWN ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$N.arrow, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: IconType.CHEVRON_DOWN }) }) : null
       ]
     }
   );
@@ -18835,7 +18834,7 @@ const Component = ({
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
-      className: cx$2(styles$M.component, disabled2 ? styles$M.disabled : null),
+      className: cx$2(styles$N.component, disabled2 ? styles$N.disabled : null),
       "data-testid": testId,
       children: component2
     }
@@ -18916,7 +18915,7 @@ const Trigger = React$4.forwardRef(
       "div",
       {
         ref: ref2,
-        className: styles$M.wrapper,
+        className: styles$N.wrapper,
         style: width2 ? { width: width2 } : {
           ...fullHeight && {
             height: "100%",
@@ -19138,7 +19137,7 @@ const DropDownMenu = ({
         "div",
         {
           ...layerProps,
-          className: styles$M.layerContainer,
+          className: styles$N.layerContainer,
           "data-testid": menu2.testId,
           onClick: (evt) => evt.stopPropagation(),
           children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -19206,9 +19205,8 @@ const SubmenuActions = (props) => {
 const Actions = (props) => {
   const disabledContext = reactExports.useContext(DisabledContext);
   const { actions: actions2 = [], closeLayer } = props;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cx$2(styles$N.actions), children: actions2.map((action2, index2) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cx$2(styles$O.actions), children: actions2.map((action2, index2) => {
     const hidden2 = (action2 == null ? void 0 : action2.hidden) || !action2 || !Object.keys(action2).length;
-    const tooltip2 = (action2 == null ? void 0 : action2.tooltip) || (action2 == null ? void 0 : action2.label);
     if (!hidden2) {
       if (action2.childComponent && React$4.isValidElement(action2.childComponent)) {
         return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { "data-testid": action2.testId, children: action2.childComponent }, index2);
@@ -19220,7 +19218,7 @@ const Actions = (props) => {
             primary: action2.primary,
             subMenuIcon: action2.icon,
             testId: action2.testId,
-            tooltip: tooltip2
+            tooltip: action2.tooltip
           },
           index2
         );
@@ -19247,7 +19245,7 @@ const Actions = (props) => {
               }
             },
             testId: action2.testId,
-            tooltip: tooltip2
+            tooltip: action2.tooltip
           },
           index2
         );
@@ -19261,7 +19259,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$K = {
+const styles$L = {
   breadcrumb,
   small: small$a,
   labelContainer,
@@ -19271,7 +19269,7 @@ const styles$K = {
 };
 const label$8 = "_label_iu2wi_1";
 const buttonGroup = "_buttonGroup_iu2wi_11";
-const styles$J = {
+const styles$K = {
   label: label$8,
   buttonGroup
 };
@@ -19282,7 +19280,7 @@ const cardHeader = "_cardHeader_ucdeu_13";
 const cardContentBorderTop = "_cardContentBorderTop_ucdeu_19";
 const padding$1 = "_padding_ucdeu_22";
 const cardContent = "_cardContent_ucdeu_19";
-const styles$I = {
+const styles$J = {
   card,
   bordered: bordered$2,
   raised,
@@ -19303,20 +19301,20 @@ const Card = ({
     "div",
     {
       className: cx$2(
-        styles$I.card,
-        bordered2 ? styles$I.bordered : "",
-        raised2 ? styles$I.raised : ""
+        styles$J.card,
+        bordered2 ? styles$J.bordered : "",
+        raised2 ? styles$J.raised : ""
       ),
       style: { margin: margin2 },
       children: [
-        heading2 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cx$2(styles$I.cardHeader), children: heading2 }) : null,
+        heading2 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cx$2(styles$J.cardHeader), children: heading2 }) : null,
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "div",
           {
             className: cx$2(
-              styles$I.cardContent,
-              heading2 ? styles$I.cardContentBorderTop : "",
-              padding2 ? styles$I.padding : ""
+              styles$J.cardContent,
+              heading2 ? styles$J.cardContentBorderTop : "",
+              padding2 ? styles$J.padding : ""
             ),
             children
           }
@@ -20468,7 +20466,7 @@ st$1.div`
 const divider = "_divider_2bfzh_1";
 const alignLeft = "_alignLeft_2bfzh_12";
 const alignRight = "_alignRight_2bfzh_15";
-const styles$H = {
+const styles$I = {
   divider,
   alignLeft,
   alignRight
@@ -20482,7 +20480,7 @@ const warning$7 = "_warning_11ofj_16";
 const error$p = "_error_11ofj_19";
 const small$9 = "_small_11ofj_22";
 const link$2 = "_link_11ofj_25";
-const styles$G = {
+const styles$H = {
   bold: bold$1,
   center,
   muted: muted$1,
@@ -20510,16 +20508,16 @@ const Text = ({
     "span",
     {
       className: cx$2(
-        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
+        bold2 && styles$H.bold,
+        center2 && styles$H.center,
+        error2 && styles$H.error,
+        faint2 && styles$H.faint,
+        link2 && styles$H.link,
+        muted2 && styles$H.muted,
+        onClick && styles$H.clickable,
+        small2 && styles$H.small,
+        success2 && styles$H.success,
+        warning2 && styles$H.warning
       ),
       onClick,
       children
@@ -20529,9 +20527,9 @@ const Text = ({
 const cssAlignClass = (align) => {
   switch (align) {
     case Align.LEFT:
-      return styles$H.alignLeft;
+      return styles$I.alignLeft;
     case Align.RIGHT:
-      return styles$H.alignRight;
+      return styles$I.alignRight;
     default:
       return "";
   }
@@ -20544,7 +20542,7 @@ const Divider = ({
 }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
   "div",
   {
-    className: `${styles$H.divider} ${cssAlignClass(align)}`,
+    className: `${styles$I.divider} ${cssAlignClass(align)}`,
     style: {
       marginTop: margin2,
       marginBottom: margin2,
@@ -20556,7 +20554,7 @@ const Divider = ({
 const heading$4 = "_heading_yhdiy_1";
 const top$1 = "_top_yhdiy_10";
 const icons$2 = "_icons_yhdiy_20";
-const styles$F = {
+const styles$G = {
   heading: heading$4,
   top: top$1,
   icons: icons$2
@@ -20577,13 +20575,13 @@ const Heading = ({
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
-      className: cx$2(styles$F.heading, top2 ? styles$F.top : ""),
+      className: cx$2(styles$G.heading, top2 ? styles$G.top : ""),
       style: { marginBottom },
       onClick,
       "data-testid": testId,
       children: [
         children,
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$F.icons, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$G.icons, children: [
           icon2 && /* @__PURE__ */ jsxRuntimeExports.jsx(HelpIcon, { onClick: onIconClick, icon: icon2 }),
           isHelpIconDisplayed && /* @__PURE__ */ jsxRuntimeExports.jsx(HelpIcon, { text: helpText, onClick: onClickHelp }),
           libraryIcon && /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -20606,7 +20604,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$E = {
+const styles$F = {
   dialog,
   inline: inline$3,
   scroll: scroll$3,
@@ -20640,7 +20638,7 @@ const active$4 = "_active_khmhl_197";
 const disabled$6 = "_disabled_khmhl_222";
 const tabsContent = "_tabsContent_khmhl_229";
 const resizeHandle = "_resizeHandle_khmhl_235";
-const styles$D = {
+const styles$E = {
   inputInTable: inputInTable$a,
   inputHover: inputHover$a,
   inputFocus: inputFocus$a,
@@ -20682,13 +20680,13 @@ const DrawerTabs = ({
   testId
 }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$D.tabs, children: tabs2.map((tab2, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$E.tabs, children: tabs2.map((tab2, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
         className: cx$2(
-          styles$D.tab,
-          activeTab === index2 && open ? styles$D.active : "",
-          tab2.disabled ? styles$D.disabled : ""
+          styles$E.tab,
+          activeTab === index2 && open ? styles$E.active : "",
+          tab2.disabled ? styles$E.disabled : ""
         ),
         style: { background: background2 },
         onClick: !tab2.disabled ? () => handleTabClick(index2) : void 0,
@@ -20703,7 +20701,7 @@ const DrawerTabs = ({
         "div",
         {
           style: { width: typeof width2 === "number" ? `${width2}px` : width2 },
-          className: styles$D.tabsContent,
+          className: styles$E.tabsContent,
           "data-testid": testId && `${testId}-content-${index2}`,
           children: active2 && open && tab2.content
         },
@@ -22695,7 +22693,7 @@ const MIN_OPEN_WIDTH = 240;
 const ResizeHandle = reactExports.forwardRef(
   (props, ref2) => {
     const { handleAxis, ...rest } = props;
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: ref2, className: styles$D.resizeHandle, ...rest, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: IconType.DRAG }) });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: ref2, className: styles$E.resizeHandle, ...rest, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: IconType.DRAG }) });
   }
 );
 const DrawerResizeWrapper = ({
@@ -22722,7 +22720,7 @@ const DrawerResizeWrapper = ({
       handle: /* @__PURE__ */ jsxRuntimeExports.jsx(ResizeHandle, {}),
       resizeHandles: right2 ? ["w"] : ["e"],
       axis: "x",
-      className: isResizing2 ? styles$D.isResizing : "",
+      className: isResizing2 ? styles$E.isResizing : "",
       onResizeStart: () => {
         if (setOpen)
           setOpen(true);
@@ -22823,17 +22821,17 @@ const Drawer = ({
         "div",
         {
           className: cx$2(
-            styles$D.drawer,
-            shadow4 ? styles$D.shadow : "",
-            fixed2 ? styles$D.fixed : styles$D.inline,
-            right2 ? styles$D.right : styles$D.left
+            styles$E.drawer,
+            shadow4 ? styles$E.shadow : "",
+            fixed2 ? styles$E.fixed : styles$E.inline,
+            right2 ? styles$E.right : styles$E.left
           ),
           style: { top: top2 },
           children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               "div",
               {
-                className: cx$2(styles$D.drawerContent, border2 && styles$D.border),
+                className: cx$2(styles$E.drawerContent, border2 && styles$E.border),
                 style: {
                   background: background2,
                   borderColor: typeof border2 === "string" ? border2 : void 0,
@@ -22859,9 +22857,9 @@ const Drawer = ({
               "span",
               {
                 className: cx$2(
-                  styles$D.toggleButton,
-                  localOpen && (isStandardButton || isCustomButton && buttonAnimate) ? styles$D.toggleButtonOpen : "",
-                  buttonPosition === "top" ? styles$D.top : styles$D.bottom
+                  styles$E.toggleButton,
+                  localOpen && (isStandardButton || isCustomButton && buttonAnimate) ? styles$E.toggleButtonOpen : "",
+                  buttonPosition === "top" ? styles$E.top : styles$E.bottom
                 ),
                 children: isCustomButton ? button2 : /* @__PURE__ */ jsxRuntimeExports.jsx(
                   Button$1,
@@ -22881,12 +22879,12 @@ const Drawer = ({
 };
 const empty$2 = "_empty_fe425_1";
 const text$2 = "_text_fe425_11";
-const styles$C = {
+const styles$D = {
   empty: empty$2,
   text: text$2
 };
 const inputGroup = "_inputGroup_biuoa_1";
-const styles$B = {
+const styles$C = {
   inputGroup
 };
 const inputInTable$9 = "_inputInTable_jnwnh_1";
@@ -22905,7 +22903,7 @@ const right$5 = "_right_jnwnh_170";
 const groupOrderFirst$3 = "_groupOrderFirst_jnwnh_173";
 const groupOrderMiddle$3 = "_groupOrderMiddle_jnwnh_174";
 const groupOrderLast$3 = "_groupOrderLast_jnwnh_175";
-const styles$A = {
+const styles$B = {
   inputInTable: inputInTable$9,
   inputHover: inputHover$9,
   inputFocus: inputFocus$9,
@@ -22960,11 +22958,11 @@ reactExports.forwardRef(
       if (groupOrder) {
         switch (groupOrder) {
           case "first":
-            return styles$A.groupOrderFirst;
+            return styles$B.groupOrderFirst;
           case "last":
-            return styles$A.groupOrderLast;
+            return styles$B.groupOrderLast;
           default:
-            return styles$A.groupOrderMiddle;
+            return styles$B.groupOrderMiddle;
         }
       }
       return "";
@@ -22998,11 +22996,11 @@ reactExports.forwardRef(
             autoComplete: "off",
             disabled: disabled2 || disabledContext,
             className: cx$2(
-              styles$A.input,
-              error2 ? styles$A.error : warning2 ? styles$A.warning : "",
-              right2 ? styles$A.right : "",
-              small2 ? styles$A.small : "",
-              isInTable2 ? styles$A.isInTable : ""
+              styles$B.input,
+              error2 ? styles$B.error : warning2 ? styles$B.warning : "",
+              right2 ? styles$B.right : "",
+              small2 ? styles$B.small : "",
+              isInTable2 ? styles$B.isInTable : ""
             ),
             style: { width: width2 },
             "data-testid": testId
@@ -23013,13 +23011,13 @@ reactExports.forwardRef(
   }
 );
 const fileInput = "_fileInput_1elar_1";
-const styles$z = {
+const styles$A = {
   fileInput
 };
 const label$7 = "_label_18pfe_1";
 const labelLeft$1 = "_labelLeft_18pfe_5";
 const icons$1 = "_icons_18pfe_13";
-const styles$y = {
+const styles$z = {
   label: label$7,
   labelLeft: labelLeft$1,
   icons: icons$1
@@ -23029,7 +23027,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$x = {
+const styles$y = {
   field,
   labelLeft,
   fieldInput,
@@ -23063,7 +23061,7 @@ const Flex = ({
   );
 };
 const formRow = "_formRow_odewu_1";
-const styles$w = {
+const styles$x = {
   formRow
 };
 const getGapValue = (gap) => {
@@ -23124,7 +23122,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$v = {
+const styles$w = {
   addon,
   small: small$7,
   groupOrderFirst: groupOrderFirst$2,
@@ -26258,7 +26256,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$u = {
+const styles$v = {
   loader,
   fullViewPortSize,
   cover,
@@ -26288,7 +26286,7 @@ const absolute = "_absolute_s49vk_143";
 const legendToggle = "_legendToggle_s49vk_155";
 const detailsText = "_detailsText_s49vk_165";
 const footer$1 = "_footer_s49vk_169";
-const styles$t = {
+const styles$u = {
   inputInTable: inputInTable$7,
   inputHover: inputHover$7,
   inputFocus: inputFocus$7,
@@ -26315,7 +26313,7 @@ const wrapper$2 = "_wrapper_sb0hc_1";
 const contentContainer = "_contentContainer_sb0hc_15";
 const centered = "_centered_sb0hc_24";
 const newLine = "_newLine_sb0hc_28";
-const styles$s = {
+const styles$t = {
   wrapper: wrapper$2,
   contentContainer,
   centered,
@@ -26325,7 +26323,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$r = {
+const styles$s = {
   menu: menu$1,
   header,
   item: item$3,
@@ -26333,7 +26331,7 @@ const styles$r = {
 };
 const page = "_page_beskc_1";
 const scroll$1 = "_scroll_beskc_23";
-const styles$q = {
+const styles$r = {
   page,
   scroll: scroll$1
 };
@@ -26348,7 +26346,7 @@ const Page$1 = ({
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
-      className: cx$2(styles$q.page, scroll3 ? styles$q.scroll : ""),
+      className: cx$2(styles$r.page, scroll3 ? styles$r.scroll : ""),
       style: { left: left2, padding: padding2, top: top2 },
       children
     }
@@ -26371,7 +26369,7 @@ const right$3 = "_right_2ynxq_182";
 const groupOrderFirst$1 = "_groupOrderFirst_2ynxq_193";
 const groupOrderMiddle$1 = "_groupOrderMiddle_2ynxq_194";
 const groupOrderLast$1 = "_groupOrderLast_2ynxq_198";
-const styles$p = {
+const styles$q = {
   inputInTable: inputInTable$6,
   inputHover: inputHover$6,
   inputFocus: inputFocus$6,
@@ -26594,7 +26592,7 @@ const optionContent = "_optionContent_1lbvo_92";
 const label$5 = "_label_1lbvo_97";
 const icon$2 = "_icon_1lbvo_104";
 const details = "_details_1lbvo_109";
-const styles$o = {
+const styles$p = {
   layerContainer,
   layer,
   small: small$5,
@@ -26641,7 +26639,7 @@ const groupOrderFirst = "_groupOrderFirst_1qfoj_297";
 const groupOrderMiddle = "_groupOrderMiddle_1qfoj_298";
 const groupOrderLast = "_groupOrderLast_1qfoj_302";
 const detailedLabel = "_detailedLabel_1qfoj_307";
-const styles$n = {
+const styles$o = {
   inputInTable: inputInTable$5,
   inputHover: inputHover$5,
   inputFocus: inputFocus$5,
@@ -26675,19 +26673,19 @@ const styles$n = {
   detailedLabel
 };
 const paginationContainer = "_paginationContainer_1tmz4_1";
-const styles$m = {
+const styles$n = {
   paginationContainer
 };
 const toggleBox = "_toggleBox_lhie5_1";
 const fullWidthStyleFix = "_fullWidthStyleFix_lhie5_8";
 const dismiss = "_dismiss_lhie5_13";
-const styles$l = {
+const styles$m = {
   toggleBox,
   fullWidthStyleFix,
   dismiss
 };
 const printHeader = "_printHeader_o7xxx_1";
-const styles$k = {
+const styles$l = {
   printHeader
 };
 const progress$1 = "_progress_23ror_1";
@@ -26700,7 +26698,7 @@ const orange = "_orange_23ror_30";
 const yellow = "_yellow_23ror_33";
 const green = "_green_23ror_36";
 const label$3 = "_label_23ror_39";
-const styles$j = {
+const styles$k = {
   progress: progress$1,
   inverted,
   bar,
@@ -26721,7 +26719,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$i = {
+const styles$j = {
   wrapper: wrapper$1,
   inline: inline$1,
   radio,
@@ -55944,7 +55942,7 @@ function Remirror(props) {
 const all = "";
 const richTextToolbar = "_richTextToolbar_1gbkk_1";
 const richTextToolbarContainer = "_richTextToolbarContainer_1gbkk_5";
-const styles$h = {
+const styles$i = {
   richTextToolbar,
   richTextToolbarContainer
 };
@@ -55996,8 +55994,8 @@ const RichTextToolbar = ({
       active: active2.orderedList()
     }
   ];
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$h.richTextToolbarContainer, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$h.richTextToolbar, children: items2.map((item2, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$i.richTextToolbarContainer, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$i.richTextToolbar, children: items2.map((item2, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
       Button$1,
       {
         small: true,
@@ -56025,7 +56023,7 @@ const inputWarning$4 = "_inputWarning_ta5ga_26";
 const inputDisabled$4 = "_inputDisabled_ta5ga_61";
 const hideScrollbars$4 = "_hideScrollbars_ta5ga_67";
 const richTextInput = "_richTextInput_ta5ga_77";
-const styles$g = {
+const styles$h = {
   inputInTable: inputInTable$4,
   inputHover: inputHover$4,
   inputFocus: inputFocus$4,
@@ -56061,7 +56059,7 @@ reactExports.forwardRef(
       }
       setState(state2);
     };
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$g.richTextInput, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$h.richTextInput, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
       Remirror,
       {
         manager,
@@ -56084,7 +56082,7 @@ reactExports.forwardRef(
   }
 );
 const row = "_row_n16je_1";
-const styles$f = {
+const styles$g = {
   row
 };
 var hasElementType = typeof Element !== "undefined";
@@ -56195,7 +56193,7 @@ const item$2 = "_item_1ube5_140";
 const experimental = "_experimental_1ube5_155";
 const active$2 = "_active_1ube5_159";
 const icon$1 = "_icon_1ube5_163";
-const styles$e = {
+const styles$f = {
   inputInTable: inputInTable$3,
   inputHover: inputHover$3,
   inputFocus: inputFocus$3,
@@ -56228,10 +56226,10 @@ const TooltipIcon = reactExports.memo(
           fontSize: 16,
           padding: "var(--padding-sm)",
           display: "block",
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$e.icon, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { small: true, title: invalid ? "!" : void 0, margin: 4, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: icon2 }) }) })
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$f.icon, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { small: true, title: invalid ? "!" : void 0, margin: 4, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: icon2 }) }) })
         }
       ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$e.label, children: label2 })
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$f.label, children: label2 })
     ] });
   },
   (prevProps, nextProps) => isEqual4(prevProps, nextProps)
@@ -56243,16 +56241,16 @@ const Link$1 = ({
   onClick,
   testId
 }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$e.list, children: items2.map((link2, i) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$f.list, children: items2.map((link2, i) => {
     const key2 = `${sectionIndex}_${i}`;
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "a",
       {
         href: link2.value,
         className: cx$2(
-          styles$e.item,
-          link2.isActive ? styles$e.active : "",
-          link2.isExperimental ? styles$e.experimental : ""
+          styles$f.item,
+          link2.isActive ? styles$f.active : "",
+          link2.isExperimental ? styles$f.experimental : ""
         ),
         onClick: (evt) => onClick(evt, link2.value, link2.label, link2.onClick),
         "data-testid": testId,
@@ -56277,7 +56275,7 @@ const Sections = ({
   onClick
 }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: sections.map((section2, i) => /* @__PURE__ */ jsxRuntimeExports.jsxs(React$4.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("h5", { className: styles$e.subtitle, children: section2.heading.toUpperCase() }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("h5", { className: styles$f.subtitle, children: section2.heading.toUpperCase() }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       Link$1,
       {
@@ -56333,8 +56331,8 @@ reactExports.memo(
             icon: IconType.LEFT
           }
         ),
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cx$2(styles$e.sidebar, !isOpen2 ? styles$e.collapsed : ""), children: visible && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$e.inner, children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: styles$e.title, children: options2.title }),
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cx$2(styles$f.sidebar, !isOpen2 ? styles$f.collapsed : ""), children: visible && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$f.inner, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: styles$f.title, children: options2.title }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             Sections,
             {
@@ -57145,7 +57143,7 @@ const vertical = "_vertical_1a936_13";
 const hasArrows = "_hasArrows_1a936_17";
 const button$1 = "_button_1a936_21";
 const label$1 = "_label_1a936_24";
-const styles$d = {
+const styles$e = {
   container: container$1,
   small: small$2,
   hasMarks,
@@ -57191,7 +57189,7 @@ const bordered = "_bordered_y9car_93";
 const scroll2 = "_scroll_y9car_98";
 const table = "_table_y9car_108";
 const striped = "_striped_y9car_188";
-const styles$c = {
+const styles$d = {
   inputInTable: inputInTable$2,
   inputHover: inputHover$2,
   inputFocus: inputFocus$2,
@@ -57206,12 +57204,12 @@ const styles$c = {
   striped
 };
 const title$2 = "_title_11pbp_1";
-const styles$b = {
+const styles$c = {
   title: title$2
 };
 const footer = "_footer_4sumy_1";
 const section = "_section_4sumy_7";
-const styles$a = {
+const styles$b = {
   footer,
   section
 };
@@ -57222,7 +57220,7 @@ const expandableRow = "_expandableRow_11d5t_8";
 const flush = "_flush_11d5t_8";
 const dragIconCell = "_dragIconCell_11d5t_28";
 const dragIcon = "_dragIcon_11d5t_28";
-const styles$9 = {
+const styles$a = {
   clickableRow,
   hoverableRow,
   rowActive,
@@ -57260,7 +57258,7 @@ const centerAligned = "_centerAligned_u3xdj_192";
 const leftAligned = "_leftAligned_u3xdj_198";
 const popover = "_popover_u3xdj_201";
 const disabledPointerEvents = "_disabledPointerEvents_u3xdj_204";
-const styles$8 = {
+const styles$9 = {
   inputInTable: inputInTable$1,
   inputHover: inputHover$1,
   inputFocus: inputFocus$1,
@@ -68328,7 +68326,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$7 = {
+const styles$8 = {
   tabs,
   padding,
   margin,
@@ -68361,7 +68359,7 @@ const small$1 = "_small_66zck_116";
 const error = "_error_66zck_121";
 const warning$1 = "_warning_66zck_138";
 const monospace = "_monospace_66zck_155";
-const styles$6 = {
+const styles$7 = {
   inputInTable,
   inputHover,
   inputFocus,
@@ -68658,7 +68656,7 @@ const small = "_small_1mo1i_25";
 const disabled = "_disabled_1mo1i_102";
 const noMargin = "_noMargin_1mo1i_113";
 const helpIconEnabled = "_helpIconEnabled_1mo1i_116";
-const styles$5 = {
+const styles$6 = {
   toggle: toggle$1,
   small,
   disabled,
@@ -68681,7 +68679,7 @@ const button = "_button_gmfjn_139";
 const menu = "_menu_gmfjn_140";
 const active = "_active_gmfjn_168";
 const alert = "_alert_gmfjn_193";
-const styles$4 = {
+const styles$5 = {
   topbar,
   fixed,
   appSwitcher,
@@ -68700,7 +68698,7 @@ const styles$4 = {
   alert
 };
 const Warning = ({ warning: warning2 }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$4.alert, children: warning2 });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$5.alert, children: warning2 });
 };
 const AppSwitcher = ({
   icon: icon2,
@@ -68708,7 +68706,7 @@ const AppSwitcher = ({
   onClick
 }) => {
   const content2 = /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: icon2 });
-  return url ? /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: url, onClick, className: styles$4.appSwitcher, children: content2 }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { onClick, className: styles$4.appSwitcher, children: content2 });
+  return url ? /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: url, onClick, className: styles$5.appSwitcher, children: content2 }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { onClick, className: styles$5.appSwitcher, children: content2 });
 };
 const Title = ({
   label: label2,
@@ -68717,12 +68715,12 @@ const Title = ({
   version: version2,
   onClick
 }) => {
-  const content2 = /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$4.title, children: [
-    logo2 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$4.logo, children: logo2 }),
-    label2 && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$4.label, children: label2 }),
-    version2 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$4.version, children: version2 })
+  const content2 = /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$5.title, children: [
+    logo2 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$5.logo, children: logo2 }),
+    label2 && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$5.label, children: label2 }),
+    version2 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$5.version, children: version2 })
   ] });
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cx$2(styles$4.item, styles$4.brand), children: url ? /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: url, onClick, children: content2 }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { onClick, children: content2 }) });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cx$2(styles$5.item, styles$5.brand), children: url ? /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: url, onClick, children: content2 }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { onClick, children: content2 }) });
 };
 var ElementType = /* @__PURE__ */ ((ElementType2) => {
   ElementType2["LINK"] = "Link";
@@ -68750,7 +68748,7 @@ const Link = ({
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "a",
     {
-      className: cx$2(styles$4.link, active2 ? styles$4.active : ""),
+      className: cx$2(styles$5.link, active2 ? styles$5.active : ""),
       href: url || "#",
       onClick: handleClick2,
       "aria-disabled": disabled2 || disabledContext,
@@ -68758,7 +68756,7 @@ const Link = ({
       role: onClick && !url ? "button" : void 0,
       children: [
         icon2,
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$4.label, children: label2 })
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$5.label, children: label2 })
       ]
     }
   );
@@ -68766,7 +68764,7 @@ const Link = ({
 const Element$1 = ({ element }) => {
   switch (element.type) {
     case ElementType.LINK:
-      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$4.item, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$5.item, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         Link,
         {
           label: element.label,
@@ -68779,7 +68777,7 @@ const Element$1 = ({ element }) => {
         }
       ) });
     case ElementType.BUTTON:
-      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cx$2(styles$4.item, styles$4.button), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cx$2(styles$5.item, styles$5.button), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         Button$1,
         {
           label: element.label,
@@ -68792,7 +68790,7 @@ const Element$1 = ({ element }) => {
         }
       ) });
     case ElementType.MENU:
-      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cx$2(styles$4.item, styles$4.menu), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cx$2(styles$5.item, styles$5.menu), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         Menu,
         {
           maxHeight: "100%",
@@ -68813,7 +68811,7 @@ const Element$1 = ({ element }) => {
         }
       ) });
     case ElementType.COMPONENT:
-      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$4.item, children: element.component });
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$5.item, children: element.component });
     default:
       return null;
   }
@@ -68832,7 +68830,7 @@ const TopBar = ({
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
-        className: cx$2(styles$4.topbar, fixedPosition ? styles$4.fixed : ""),
+        className: cx$2(styles$5.topbar, fixedPosition ? styles$5.fixed : ""),
         style: { height: height2 },
         children: [
           !!appSwitcher2 && /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -68843,7 +68841,7 @@ const TopBar = ({
               onClick: appSwitcher2.onClick
             }
           ),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$4.left, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$5.left, children: [
             title2 && /* @__PURE__ */ jsxRuntimeExports.jsx(
               Title,
               {
@@ -68861,7 +68859,7 @@ const TopBar = ({
               return null;
             })
           ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$4.right, children: contentRight.map((element, i) => {
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$5.right, children: contentRight.map((element, i) => {
             if (element) {
               return /* @__PURE__ */ jsxRuntimeExports.jsx(Element$1, { element }, i);
             }
@@ -68875,7 +68873,7 @@ const TopBar = ({
 const popConfirm = "_popConfirm_1x6ye_1";
 const content = "_content_1x6ye_7";
 const buttons = "_buttons_1x6ye_13";
-const styles$3 = {
+const styles$4 = {
   popConfirm,
   content,
   buttons
@@ -77529,7 +77527,7 @@ const dropTarget = "_dropTarget_1lv9u_11";
 const draggingSource = "_draggingSource_1lv9u_14";
 const placeholderContainer = "_placeholderContainer_1lv9u_17";
 const placeholder = "_placeholder_1lv9u_17";
-const styles$2 = {
+const styles$3 = {
   tree,
   toggle,
   dropTarget,
@@ -77537,6 +77535,10 @@ const styles$2 = {
   placeholderContainer,
   placeholder
 };
+const predefinedMenuActive = "_predefinedMenuActive_1yvt4_1";
+const styles$2 = {
+  predefinedMenuActive
+};
 const Footer = () => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(Divider, {}),