@oliasoft-open-source/react-ui-library 4.15.2-beta-4 → 4.15.2-beta-6

package/dist/index.js

@@ -11,12 +11,12 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
 var _docChanged, _ignoreNextExit, _suggesters, _next, _prev, _handlerMatches, _ignored, _removed, _lastChangeFromAppend, _a;
 import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
 import * as React$4 from "react";
-import React__default, { useContext, isValidElement, useState, useRef, useEffect, useCallback as useCallback$1, createElement, forwardRef, useMemo as useMemo$1, useLayoutEffect as useLayoutEffect$1, createContext, useReducer, useDebugValue, Fragment as Fragment$2, Component as Component$1, useImperativeHandle, memo, cloneElement as cloneElement$1 } from "react";
+import React__default, { useContext, isValidElement, useState, useRef, useEffect, useCallback as useCallback$1, createElement, forwardRef, useMemo as useMemo$1, useLayoutEffect as useLayoutEffect$1, createContext, useReducer, useDebugValue, Fragment as Fragment$2, Component as Component$1, PureComponent, useImperativeHandle, memo, cloneElement as cloneElement$1 } from "react";
 import * as PropTypes from "prop-types";
 import PropTypes__default from "prop-types";
 import ReactDOM, { createPortal, unstable_batchedUpdates, render } from "react-dom";
 import { noop as noop$3, set, get as get$2, isString as isString$3, isNumber as isNumber$1, isBoolean as isBoolean$2, isFunction as isFunction$3, isEmpty, isArray as isArray$1, toNumber, debounce as debounce$2, isObject as isObject$5, isEqual as isEqual$4 } from "lodash";
-import { toString as toString$1, isScientificStringNum, roundToPrecision, toNum, validateNumber, cleanNumStr, stripLeadingZeros, roundToFixed, roundByMagnitude, unitFromQuantity, getUnit, KNOWN_UNITS, ALT_UNITS, isValueWithUnit, getValue as getValue$1, withUnit, convertSamePrecision, convertAndGetValue, split as split$1, label as label$9, isValidNum, getAltUnitsListByQuantity, altUnitsList, getUnitsForQuantity, roundByMagnitudeToFixed } from "@oliasoft-open-source/units";
+import { toString as toString$1, isScientificStringNum, roundToPrecision, toNum, validateNumber, cleanNumStr, stripLeadingZeros, roundToFixed, roundByMagnitude, unitFromQuantity, getUnit, KNOWN_UNITS, ALT_UNITS, isValueWithUnit, getValue as getValue$1, withUnit, convertSamePrecision, convertAndGetValue, split as split$1, label as label$b, isValidNum, getAltUnitsListByQuantity, altUnitsList, getUnitsForQuantity, roundByMagnitudeToFixed } from "@oliasoft-open-source/units";
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 function getDefaultExportFromCjs(x2) {
   return x2 && x2.__esModule && Object.prototype.hasOwnProperty.call(x2, "default") ? x2["default"] : x2;
@@ -186,7 +186,7 @@ var InputType = /* @__PURE__ */ ((InputType2) => {
 })(InputType || {});
 const chevron = "_chevron_1kw4m_1";
 const expanded$2 = "_expanded_1kw4m_9";
-const styles$S = {
+const styles$U = {
   chevron,
   expanded: expanded$2
 };
@@ -286,8 +286,8 @@ function __spreadArray$2(to2, from3, pack) {
   }
   return to2.concat(ar2 || Array.prototype.slice.call(from3));
 }
-typeof SuppressedError === "function" ? SuppressedError : function(error2, suppressed, message) {
-  var e2 = new Error(message);
+typeof SuppressedError === "function" ? SuppressedError : function(error2, suppressed, message2) {
+  var e2 = new Error(message2);
   return e2.name = "SuppressedError", e2.error = error2, e2.suppressed = suppressed, e2;
 };
 /*!
@@ -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$R = {
+const styles$T = {
   wrapper: wrapper$5,
   customSvg,
   customPng,
@@ -1544,8 +1544,8 @@ const Icon = ({
     "div",
     {
       className: cx$2(
-        styles$R.wrapper,
-        (clickable2 || onClick) && !disabledContext ? styles$R.clickable : ""
+        styles$T.wrapper,
+        (clickable2 || onClick) && !disabledContext ? styles$T.clickable : ""
       ),
       style: style2,
       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$R.customSvg,
+          className: styles$T.customSvg,
           beforeInjection: (svg) => {
             if (size2) {
               svg.setAttribute("width", String(size2));
@@ -1562,26 +1562,26 @@ const Icon = ({
           },
           src: icon2
         }
-      ) : typeof icon2 === "string" && (icon2.includes(".png") || icon2.includes("image/png")) ? /* @__PURE__ */ jsx("img", { alt: "icon", className: styles$R.customPng, src: icon2 }) : typeof icon2 === "string" ? /* @__PURE__ */ jsx(NamedIcon, { icon: icon2 }) : null
+      ) : typeof icon2 === "string" && (icon2.includes(".png") || icon2.includes("image/png")) ? /* @__PURE__ */ jsx("img", { alt: "icon", className: styles$T.customPng, src: icon2 }) : typeof icon2 === "string" ? /* @__PURE__ */ jsx(NamedIcon, { icon: icon2 }) : null
     }
   );
 };
 const Chevron = ({ expanded: expanded2 }) => {
-  return /* @__PURE__ */ jsx("span", { className: cx$2(styles$S.chevron, expanded2 ? styles$S.expanded : ""), children: /* @__PURE__ */ jsx(Icon, { icon: IconType.CHEVRON_RIGHT }) });
+  return /* @__PURE__ */ jsx("span", { className: cx$2(styles$U.chevron, expanded2 ? styles$U.expanded : ""), children: /* @__PURE__ */ jsx(Icon, { icon: IconType.CHEVRON_RIGHT }) });
 };
 const accordion = "_accordion_15p8j_1";
 const accordionHeader = "_accordionHeader_15p8j_5";
-const heading$5 = "_heading_15p8j_9";
+const heading$6 = "_heading_15p8j_9";
 const clickable$1 = "_clickable_15p8j_12";
 const bordered$4 = "_bordered_15p8j_18";
 const accordionContent = "_accordionContent_15p8j_18";
 const expanded$1 = "_expanded_15p8j_36";
 const padding$3 = "_padding_15p8j_44";
 const squareBottom = "_squareBottom_15p8j_47";
-const styles$Q = {
+const styles$S = {
   accordion,
   accordionHeader,
-  heading: heading$5,
+  heading: heading$6,
   clickable: clickable$1,
   bordered: bordered$4,
   accordionContent,
@@ -1603,21 +1603,21 @@ const AccordionBase = ({
     "div",
     {
       className: cx$2(
-        styles$Q.accordion,
-        bordered2 ? styles$Q.bordered : "",
-        expanded2 ? styles$Q.expanded : "",
-        squareBottom2 ? styles$Q.squareBottom : ""
+        styles$S.accordion,
+        bordered2 ? styles$S.bordered : "",
+        expanded2 ? styles$S.expanded : "",
+        squareBottom2 ? styles$S.squareBottom : ""
       ),
       children: [
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: cx$2(styles$Q.accordionHeader, onClick ? styles$Q.clickable : ""),
+            className: cx$2(styles$S.accordionHeader, onClick ? styles$S.clickable : ""),
             onClick,
             "data-testid": testId,
             children: [
               /* @__PURE__ */ jsx(Chevron, { expanded: expanded2 }),
-              /* @__PURE__ */ jsx("div", { className: styles$Q.heading, children: heading2 })
+              /* @__PURE__ */ jsx("div", { className: styles$S.heading, children: heading2 })
             ]
           }
         ),
@@ -1625,8 +1625,8 @@ const AccordionBase = ({
           "div",
           {
             className: cx$2(
-              styles$Q.accordionContent,
-              bordered2 && padding2 ? styles$Q.padding : ""
+              styles$S.accordionContent,
+              bordered2 && padding2 ? styles$S.padding : ""
             ),
             children
           }
@@ -1698,20 +1698,20 @@ const Accordion = ({
 };
 const checkbox = "_checkbox_1ybyr_1";
 const noLabel = "_noLabel_1ybyr_17";
-const small$b = "_small_1ybyr_20";
+const small$d = "_small_1ybyr_20";
 const checkmark = "_checkmark_1ybyr_43";
-const disabled$8 = "_disabled_1ybyr_67";
+const disabled$a = "_disabled_1ybyr_67";
 const noMargin$2 = "_noMargin_1ybyr_81";
-const isInTable$3 = "_isInTable_1ybyr_84";
+const isInTable$4 = "_isInTable_1ybyr_84";
 const helpIconEnabled$2 = "_helpIconEnabled_1ybyr_87";
-const styles$P = {
+const styles$R = {
   checkbox,
   noLabel,
-  small: small$b,
+  small: small$d,
   checkmark,
-  disabled: disabled$8,
+  disabled: disabled$a,
   noMargin: noMargin$2,
-  isInTable: isInTable$3,
+  isInTable: isInTable$4,
   helpIconEnabled: helpIconEnabled$2
 };
 var MapShim = function() {
@@ -2173,7 +2173,7 @@ var ResizeObserverSPI = (
   }()
 );
 var observers$1 = typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : new MapShim();
-var ResizeObserver$1 = (
+var ResizeObserver$2 = (
   /** @class */
   /* @__PURE__ */ function() {
     function ResizeObserver2(callback) {
@@ -2195,7 +2195,7 @@ var ResizeObserver$1 = (
   "unobserve",
   "disconnect"
 ].forEach(function(method) {
-  ResizeObserver$1.prototype[method] = function() {
+  ResizeObserver$2.prototype[method] = function() {
     var _a2;
     return (_a2 = observers$1.get(this))[method].apply(_a2, arguments);
   };
@@ -2204,15 +2204,15 @@ var index = function() {
   if (typeof global$1$1.ResizeObserver !== "undefined") {
     return global$1$1.ResizeObserver;
   }
-  return ResizeObserver$1;
+  return ResizeObserver$2;
 }();
 var isProduction$3 = process.env.NODE_ENV === "production";
-function warning$7(condition, message) {
+function warning$7(condition, message2) {
   if (!isProduction$3) {
     if (condition) {
       return;
     }
-    var text2 = "Warning: " + message;
+    var text2 = "Warning: " + message2;
     if (typeof console !== "undefined") {
       console.warn(text2);
     }
@@ -2659,7 +2659,7 @@ function getShouldCloseAccordingToChildren(registrations, event) {
   return true;
 }
 function useGroup(_ref2) {
-  var isOpen = _ref2.isOpen, onOutsideClick = _ref2.onOutsideClick, onParentClose = _ref2.onParentClose;
+  var isOpen2 = _ref2.isOpen, onOutsideClick = _ref2.onOutsideClick, onParentClose = _ref2.onParentClose;
   var trigger2 = useRef(null);
   var layer2 = useRef(null);
   var registrations = useRef(/* @__PURE__ */ new Set());
@@ -2693,7 +2693,7 @@ function useGroup(_ref2) {
   }, [possibleRegisterFn, shouldCloseWhenClickedOutside, onParentClose, registrations]);
   useEffect(function() {
     var isChild = typeof possibleRegisterFn === "function";
-    var shouldNotListen = !isOpen || !onOutsideClick || isChild;
+    var shouldNotListen = !isOpen2 || !onOutsideClick || isChild;
     if (shouldNotListen) {
       return;
     }
@@ -2706,15 +2706,15 @@ function useGroup(_ref2) {
     return function() {
       return document.removeEventListener("click", handleClick2, true);
     };
-  }, [isOpen, onOutsideClick, shouldCloseWhenClickedOutside, possibleRegisterFn]);
+  }, [isOpen2, onOutsideClick, shouldCloseWhenClickedOutside, possibleRegisterFn]);
   useEffect(function() {
-    if (!isOpen) {
+    if (!isOpen2) {
       registrations.current.forEach(function(_ref4) {
         var closeChild = _ref4.closeChild;
         return closeChild();
       });
     }
-  }, [isOpen]);
+  }, [isOpen2]);
   return {
     closeOnOutsideClickRefs: {
       trigger: trigger2,
@@ -3413,7 +3413,7 @@ var DEFAULT_OPTIONS$1 = {
 };
 function useLayer(_ref) {
   var _triggerBoundsRef$cur;
-  var _ref$isOpen = _ref.isOpen, isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen, _ref$overflowContaine = _ref.overflowContainer, overflowContainer = _ref$overflowContaine === void 0 ? DEFAULT_OPTIONS$1.overflowContainer : _ref$overflowContaine, _ref$environment = _ref.environment, environment2 = _ref$environment === void 0 ? typeof window !== "undefined" ? window : void 0 : _ref$environment, ResizeObserverPolyfill = _ref.ResizeObserver, _ref$placement = _ref.placement, placement = _ref$placement === void 0 ? DEFAULT_OPTIONS$1.placement : _ref$placement, _ref$possiblePlacemen = _ref.possiblePlacements, possiblePlacements = _ref$possiblePlacemen === void 0 ? DEFAULT_OPTIONS$1.possiblePlacements : _ref$possiblePlacemen, _ref$preferX = _ref.preferX, preferX = _ref$preferX === void 0 ? DEFAULT_OPTIONS$1.preferX : _ref$preferX, _ref$preferY = _ref.preferY, preferY = _ref$preferY === void 0 ? DEFAULT_OPTIONS$1.preferY : _ref$preferY, _ref$auto = _ref.auto, auto2 = _ref$auto === void 0 ? DEFAULT_OPTIONS$1.auto : _ref$auto, _ref$snap = _ref.snap, snap = _ref$snap === void 0 ? DEFAULT_OPTIONS$1.snap : _ref$snap, _ref$triggerOffset = _ref.triggerOffset, triggerOffset = _ref$triggerOffset === void 0 ? DEFAULT_OPTIONS$1.triggerOffset : _ref$triggerOffset, _ref$containerOffset = _ref.containerOffset, containerOffset = _ref$containerOffset === void 0 ? DEFAULT_OPTIONS$1.containerOffset : _ref$containerOffset, _ref$arrowOffset = _ref.arrowOffset, arrowOffset = _ref$arrowOffset === void 0 ? DEFAULT_OPTIONS$1.arrowOffset : _ref$arrowOffset, _ref$container = _ref.container, container2 = _ref$container === void 0 ? DEFAULT_OPTIONS$1.container : _ref$container, _ref$layerDimensions = _ref.layerDimensions, layerDimensions = _ref$layerDimensions === void 0 ? null : _ref$layerDimensions, onDisappear = _ref.onDisappear, onOutsideClick = _ref.onOutsideClick, onParentClose = _ref.onParentClose, triggerOption = _ref.trigger;
+  var _ref$isOpen = _ref.isOpen, isOpen2 = _ref$isOpen === void 0 ? false : _ref$isOpen, _ref$overflowContaine = _ref.overflowContainer, overflowContainer = _ref$overflowContaine === void 0 ? DEFAULT_OPTIONS$1.overflowContainer : _ref$overflowContaine, _ref$environment = _ref.environment, environment2 = _ref$environment === void 0 ? typeof window !== "undefined" ? window : void 0 : _ref$environment, ResizeObserverPolyfill = _ref.ResizeObserver, _ref$placement = _ref.placement, placement = _ref$placement === void 0 ? DEFAULT_OPTIONS$1.placement : _ref$placement, _ref$possiblePlacemen = _ref.possiblePlacements, possiblePlacements = _ref$possiblePlacemen === void 0 ? DEFAULT_OPTIONS$1.possiblePlacements : _ref$possiblePlacemen, _ref$preferX = _ref.preferX, preferX = _ref$preferX === void 0 ? DEFAULT_OPTIONS$1.preferX : _ref$preferX, _ref$preferY = _ref.preferY, preferY = _ref$preferY === void 0 ? DEFAULT_OPTIONS$1.preferY : _ref$preferY, _ref$auto = _ref.auto, auto2 = _ref$auto === void 0 ? DEFAULT_OPTIONS$1.auto : _ref$auto, _ref$snap = _ref.snap, snap = _ref$snap === void 0 ? DEFAULT_OPTIONS$1.snap : _ref$snap, _ref$triggerOffset = _ref.triggerOffset, triggerOffset = _ref$triggerOffset === void 0 ? DEFAULT_OPTIONS$1.triggerOffset : _ref$triggerOffset, _ref$containerOffset = _ref.containerOffset, containerOffset = _ref$containerOffset === void 0 ? DEFAULT_OPTIONS$1.containerOffset : _ref$containerOffset, _ref$arrowOffset = _ref.arrowOffset, arrowOffset = _ref$arrowOffset === void 0 ? DEFAULT_OPTIONS$1.arrowOffset : _ref$arrowOffset, _ref$container = _ref.container, container2 = _ref$container === void 0 ? DEFAULT_OPTIONS$1.container : _ref$container, _ref$layerDimensions = _ref.layerDimensions, layerDimensions = _ref$layerDimensions === void 0 ? null : _ref$layerDimensions, onDisappear = _ref.onDisappear, onOutsideClick = _ref.onOutsideClick, onParentClose = _ref.onParentClose, triggerOption = _ref.trigger;
   var _useState = useState(function() {
     return {
       layerSide: placement === "center" ? "center" : Placements.getSidesFromPlacementType(placement)[0].prop,
@@ -3432,7 +3432,7 @@ function useLayer(_ref) {
     };
   }), state = _useState[0], setState = _useState[1];
   var triggerBoundsRef = useRef(null);
-  var lastState = useLastState(state, isOpen);
+  var lastState = useLastState(state, isOpen2);
   var repositioningToken = useRef({
     cancelled: false
   });
@@ -3483,13 +3483,13 @@ function useLayer(_ref) {
   var _useTrackElements = useTrackElements({
     ResizeObserverPolyfill,
     environment: environment2,
-    enabled: isOpen,
+    enabled: isOpen2,
     overflowContainer,
     onChange: handlePositioning,
     triggerOption
   }), triggerRef = _useTrackElements.triggerRef, layerRef = _useTrackElements.layerRef, arrowRef = _useTrackElements.arrowRef, closestScrollContainer = _useTrackElements.closestScrollContainer;
   var _useGroup = useGroup({
-    isOpen,
+    isOpen: isOpen2,
     onOutsideClick,
     onParentClose
   }), closeOnOutsideClickRefs = _useGroup.closeOnOutsideClickRefs, registrations = _useGroup.registrations;
@@ -3507,7 +3507,7 @@ function useLayer(_ref) {
       layerSide: state.layerSide
     },
     layerSide: state.layerSide,
-    triggerBounds: isOpen ? triggerOption ? triggerOption.getBounds() : (_triggerBoundsRef$cur = triggerBoundsRef.current) == null ? void 0 : _triggerBoundsRef$cur.getBoundingClientRect() : null,
+    triggerBounds: isOpen2 ? triggerOption ? triggerOption.getBounds() : (_triggerBoundsRef$cur = triggerBoundsRef.current) == null ? void 0 : _triggerBoundsRef$cur.getBoundingClientRect() : null,
     renderLayer: function renderLayer(children) {
       return typeof document !== "undefined" ? createPortal(createElement(GroupProvider, {
         registrations,
@@ -3711,7 +3711,7 @@ function useHover(_temp) {
 const tooltip = "_tooltip_wli9z_1";
 const error$3 = "_error_wli9z_15";
 const warning$6 = "_warning_wli9z_19";
-const styles$O = {
+const styles$Q = {
   tooltip,
   error: error$3,
   warning: warning$6
@@ -3742,8 +3742,8 @@ const TooltipLayer = ({
     "div",
     {
       className: cx$2(
-        styles$O.tooltip,
-        error2 ? styles$O.error : warning2 ? styles$O.warning : ""
+        styles$Q.tooltip,
+        error2 ? styles$Q.error : warning2 ? styles$Q.warning : ""
       ),
       ...layerProps,
       children: [
@@ -3779,9 +3779,9 @@ const Tooltip = ({
     delayEnter: 100,
     delayLeave: 0
   });
-  const isOpen = !visible ? false : forceOpen ? true : isOver;
+  const isOpen2 = !visible ? false : forceOpen ? true : isOver;
   const { renderLayer, triggerProps, layerProps, arrowProps } = useLayer({
-    isOpen,
+    isOpen: isOpen2,
     overflowContainer: true,
     ResizeObserver: index,
     auto: true,
@@ -3791,7 +3791,7 @@ const Tooltip = ({
     onParentClose: forceClose
   });
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    isOpen && renderLayer(
+    isOpen2 && renderLayer(
       /* @__PURE__ */ jsx(
         TooltipLayer,
         {
@@ -3812,7 +3812,7 @@ const Tooltip = ({
 const helpIcon = "_helpIcon_hd0z2_1";
 const active$9 = "_active_hd0z2_9";
 const clickable = "_clickable_hd0z2_12";
-const styles$N = {
+const styles$P = {
   helpIcon,
   active: active$9,
   clickable
@@ -3843,9 +3843,9 @@ const HelpIcon = ({
     "div",
     {
       className: cx$2(
-        styles$N.helpIcon,
-        onClick ? styles$N.clickable : "",
-        active2 ? styles$N.active : ""
+        styles$P.helpIcon,
+        onClick ? styles$P.clickable : "",
+        active2 ? styles$P.active : ""
       ),
       onClick: onClickHelpIcon,
       "data-testid": testId,
@@ -3876,12 +3876,12 @@ const CheckBox = ({
     "div",
     {
       className: cx$2(
-        styles$P.checkbox,
-        noMargin2 && styles$P.noMargin,
-        isInTable2 && styles$P.isInTable,
-        isDisabled && styles$P.disabled,
-        small2 && styles$P.small,
-        !label2 && styles$P.noLabel
+        styles$R.checkbox,
+        noMargin2 && styles$R.noMargin,
+        isInTable2 && styles$R.isInTable,
+        isDisabled && styles$R.disabled,
+        small2 && styles$R.small,
+        !label2 && styles$R.noLabel
       ),
       "data-ix": dataix,
       onClick: (evt) => {
@@ -3913,10 +3913,10 @@ const CheckBox = ({
           }
         ),
         /* @__PURE__ */ jsxs("label", { htmlFor: name2, children: [
-          /* @__PURE__ */ jsx("span", { className: styles$P.checkmark, children: /* @__PURE__ */ jsx(Icon, { icon: IconType.CHECK }) }),
+          /* @__PURE__ */ jsx("span", { className: styles$R.checkmark, children: /* @__PURE__ */ jsx(Icon, { icon: IconType.CHECK }) }),
           label2
         ] }),
-        showHelp && /* @__PURE__ */ jsx("div", { className: styles$P.helpIconEnabled, onClick: onClickHelp, children: /* @__PURE__ */ jsx(HelpIcon, { text: helpText }) })
+        showHelp && /* @__PURE__ */ jsx("div", { className: styles$R.helpIconEnabled, onClick: onClickHelp, children: /* @__PURE__ */ jsx(HelpIcon, { text: helpText }) })
       ]
     }
   );
@@ -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$M = {
+const styles$O = {
   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$M.checkboxWrapper, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: styles$O.checkboxWrapper, children: /* @__PURE__ */ jsx(
       CheckBox,
       {
         label: toggleLabel,
@@ -3978,7 +3978,7 @@ const AccordionWithDefaultToggle = ({
         checked: state.defaultEnabled
       }
     ) }),
-    state.accordionExpanded && /* @__PURE__ */ jsx("div", { className: styles$M.contentWrapper, children })
+    state.accordionExpanded && /* @__PURE__ */ jsx("div", { className: styles$O.contentWrapper, children })
   ] });
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsx(
@@ -3991,61 +3991,61 @@ const AccordionWithDefaultToggle = ({
         onClick: () => dispatch({ type: AccordionActionType.TOGGLE_ACCORDION })
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: cx$2(styles$M.bordered, padding2 ? styles$M.padding : ""), children: content2 })
+    /* @__PURE__ */ jsx("div", { className: cx$2(styles$O.bordered, padding2 ? styles$O.padding : ""), children: content2 })
   ] });
 };
-const inputInTable$a = "_inputInTable_1m45a_1";
-const inputHover$a = "_inputHover_1m45a_13";
-const inputFocus$a = "_inputFocus_1m45a_18";
-const inputError$a = "_inputError_1m45a_25";
-const inputWarning$a = "_inputWarning_1m45a_26";
-const inputDisabled$a = "_inputDisabled_1m45a_61";
-const hideScrollbars$a = "_hideScrollbars_1m45a_67";
+const inputInTable$b = "_inputInTable_1m45a_1";
+const inputHover$b = "_inputHover_1m45a_13";
+const inputFocus$b = "_inputFocus_1m45a_18";
+const inputError$b = "_inputError_1m45a_25";
+const inputWarning$b = "_inputWarning_1m45a_26";
+const inputDisabled$b = "_inputDisabled_1m45a_61";
+const hideScrollbars$b = "_hideScrollbars_1m45a_67";
 const button$3 = "_button_1m45a_100";
 const active$8 = "_active_1m45a_135";
 const green$1 = "_green_1m45a_135";
 const red$1 = "_red_1m45a_135";
 const orange$1 = "_orange_1m45a_135";
-const icon$4 = "_icon_1m45a_147";
+const icon$5 = "_icon_1m45a_147";
 const iconOnly = "_iconOnly_1m45a_153";
 const basic = "_basic_1m45a_163";
 const muted$2 = "_muted_1m45a_169";
-const disabled$7 = "_disabled_1m45a_188";
-const small$a = "_small_1m45a_198";
+const disabled$9 = "_disabled_1m45a_188";
+const small$c = "_small_1m45a_198";
 const pill = "_pill_1m45a_203";
 const round = "_round_1m45a_204";
 const inverted$1 = "_inverted_1m45a_310";
-const groupOrderFirst$3 = "_groupOrderFirst_1m45a_340";
-const groupOrderMiddle$3 = "_groupOrderMiddle_1m45a_341";
-const groupOrderLast$3 = "_groupOrderLast_1m45a_342";
+const groupOrderFirst$4 = "_groupOrderFirst_1m45a_340";
+const groupOrderMiddle$4 = "_groupOrderMiddle_1m45a_341";
+const groupOrderLast$4 = "_groupOrderLast_1m45a_342";
 const buttonStyles = {
-  inputInTable: inputInTable$a,
-  inputHover: inputHover$a,
-  inputFocus: inputFocus$a,
-  inputError: inputError$a,
-  inputWarning: inputWarning$a,
-  inputDisabled: inputDisabled$a,
-  hideScrollbars: hideScrollbars$a,
+  inputInTable: inputInTable$b,
+  inputHover: inputHover$b,
+  inputFocus: inputFocus$b,
+  inputError: inputError$b,
+  inputWarning: inputWarning$b,
+  inputDisabled: inputDisabled$b,
+  hideScrollbars: hideScrollbars$b,
   button: button$3,
   active: active$8,
   green: green$1,
   red: red$1,
   orange: orange$1,
-  icon: icon$4,
+  icon: icon$5,
   iconOnly,
   basic,
   muted: muted$2,
-  disabled: disabled$7,
-  small: small$a,
+  disabled: disabled$9,
+  small: small$c,
   pill,
   round,
   inverted: inverted$1,
-  groupOrderFirst: groupOrderFirst$3,
-  groupOrderMiddle: groupOrderMiddle$3,
-  groupOrderLast: groupOrderLast$3
+  groupOrderFirst: groupOrderFirst$4,
+  groupOrderMiddle: groupOrderMiddle$4,
+  groupOrderLast: groupOrderLast$4
 };
 const spinner = "_spinner_156m4_1";
-const styles$L = {
+const styles$N = {
   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$L.spinner, style: { color: color2, fontSize } });
+  return /* @__PURE__ */ jsx("div", { className: styles$N.spinner, style: { color: color2, fontSize } });
 };
 var ButtonType = /* @__PURE__ */ ((ButtonType2) => {
   ButtonType2["SUBMIT"] = "submit";
@@ -4180,84 +4180,84 @@ const actions$2 = "_actions_1t7vd_1";
 const childComponent = "_childComponent_1t7vd_11";
 const actionComponentContainer = "_actionComponentContainer_1t7vd_14";
 const active$7 = "_active_1t7vd_36";
-const styles$K = {
+const styles$M = {
   actions: actions$2,
   childComponent,
   actionComponentContainer,
   active: active$7
 };
 const wrapper$4 = "_wrapper_8cxhw_1";
-const layer = "_layer_8cxhw_5";
-const layerContainer = "_layerContainer_8cxhw_8";
+const layer$1 = "_layer_8cxhw_5";
+const layerContainer$1 = "_layerContainer_8cxhw_8";
 const nested = "_nested_8cxhw_24";
 const fileInput$1 = "_fileInput_8cxhw_36";
-const trigger$1 = "_trigger_8cxhw_41";
+const trigger$2 = "_trigger_8cxhw_41";
 const middleAlignedInline = "_middleAlignedInline_8cxhw_50";
-const heading$4 = "_heading_8cxhw_56";
+const heading$5 = "_heading_8cxhw_56";
 const headingIcon = "_headingIcon_8cxhw_62";
-const option = "_option_8cxhw_74";
+const option$1 = "_option_8cxhw_74";
 const active$6 = "_active_8cxhw_93";
-const selected = "_selected_8cxhw_98";
-const optionContent = "_optionContent_8cxhw_105";
+const selected$1 = "_selected_8cxhw_98";
+const optionContent$1 = "_optionContent_8cxhw_105";
 const inline$4 = "_inline_8cxhw_109";
-const icon$3 = "_icon_8cxhw_114";
-const check = "_check_8cxhw_115";
+const icon$4 = "_icon_8cxhw_114";
+const check$1 = "_check_8cxhw_115";
 const text$3 = "_text_8cxhw_141";
-const label$8 = "_label_8cxhw_146";
+const label$a = "_label_8cxhw_146";
 const description = "_description_8cxhw_157";
 const arrow$1 = "_arrow_8cxhw_161";
 const divider$1 = "_divider_8cxhw_165";
 const deprecatedSemanticIcon = "_deprecatedSemanticIcon_8cxhw_169";
-const disabled$6 = "_disabled_8cxhw_173";
+const disabled$8 = "_disabled_8cxhw_173";
 const buttonLabel = "_buttonLabel_8cxhw_178";
 const buttonCaret = "_buttonCaret_8cxhw_184";
 const component = "_component_8cxhw_188";
-const right$6 = "_right_8cxhw_194";
+const right$7 = "_right_8cxhw_194";
 const actions$1 = "_actions_8cxhw_199";
-const styles$J = {
+const styles$L = {
   wrapper: wrapper$4,
-  layer,
-  layerContainer,
+  layer: layer$1,
+  layerContainer: layerContainer$1,
   nested,
   fileInput: fileInput$1,
-  trigger: trigger$1,
+  trigger: trigger$2,
   middleAlignedInline,
-  heading: heading$4,
+  heading: heading$5,
   headingIcon,
-  option,
+  option: option$1,
   active: active$6,
-  selected,
-  optionContent,
+  selected: selected$1,
+  optionContent: optionContent$1,
   inline: inline$4,
-  icon: icon$3,
-  check,
+  icon: icon$4,
+  check: check$1,
   text: text$3,
-  label: label$8,
+  label: label$a,
   description,
   arrow: arrow$1,
   divider: divider$1,
   deprecatedSemanticIcon,
-  disabled: disabled$6,
+  disabled: disabled$8,
   buttonLabel,
   buttonCaret,
   component,
-  right: right$6,
+  right: right$7,
   actions: actions$1
 };
-const Heading$2 = ({ label: label2, onClick, icon: icon2, testId }) => /* @__PURE__ */ jsxs(
+const Heading$3 = ({ label: label2, onClick, icon: icon2, testId }) => /* @__PURE__ */ jsxs(
   "div",
   {
     onClick: (evt) => evt.stopPropagation(),
-    className: styles$J.heading,
+    className: styles$L.heading,
     "data-testid": testId,
     children: [
       label2,
-      /* @__PURE__ */ jsx("span", { className: styles$J.headingIcon, onClick, children: icon2 })
+      /* @__PURE__ */ jsx("span", { className: styles$L.headingIcon, onClick, children: icon2 })
     ]
   }
 );
-const Divider$1 = () => /* @__PURE__ */ jsx("hr", { className: styles$J.divider });
-const Option$1 = ({
+const Divider$1 = () => /* @__PURE__ */ jsx("hr", { className: styles$L.divider });
+const Option$2 = ({
   actions: actions2,
   label: label2,
   url,
@@ -4309,30 +4309,30 @@ const Option$1 = ({
       href: url,
       to: url,
       className: cx$2(
-        styles$J.option,
-        disabled2 ? styles$J.disabled : "",
-        inline2 ? styles$J.inline : "",
-        selected2 ? styles$J.selected : ""
+        styles$L.option,
+        disabled2 ? styles$L.disabled : "",
+        inline2 ? styles$L.inline : "",
+        selected2 ? styles$L.selected : ""
       ),
       onClick: handleClick2,
       "data-testid": testId,
       children: [
-        icon2 ? /* @__PURE__ */ jsx("span", { className: styles$J.icon, children: /* @__PURE__ */ jsx(Icon, { icon: icon2 }) }) : null,
-        /* @__PURE__ */ jsxs("div", { className: styles$J.optionContent, children: [
+        icon2 ? /* @__PURE__ */ jsx("span", { className: styles$L.icon, children: /* @__PURE__ */ jsx(Icon, { icon: icon2 }) }) : null,
+        /* @__PURE__ */ jsxs("div", { className: styles$L.optionContent, children: [
           upload && /* @__PURE__ */ jsx(
             "input",
             {
               type: "file",
-              className: styles$J.fileInput,
+              className: styles$L.fileInput,
               onChange: handleFileChange
             }
           ),
-          /* @__PURE__ */ jsx("span", { className: styles$J.label, title: `${title2 || label2}`, children: label2 }),
-          /* @__PURE__ */ jsx("span", { className: styles$J.description, children: description2 })
+          /* @__PURE__ */ jsx("span", { className: styles$L.label, title: `${title2 || label2}`, children: label2 }),
+          /* @__PURE__ */ jsx("span", { className: styles$L.description, children: description2 })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: styles$J.right, children: [
-          selected2 && /* @__PURE__ */ jsx("span", { className: styles$J.check, children: /* @__PURE__ */ jsx(Icon, { icon: IconType.CHECK }) }),
-          !!(actions2 == null ? void 0 : actions2.length) && /* @__PURE__ */ jsx("div", { className: styles$J.actions, children: /* @__PURE__ */ jsx(Actions, { actions: actions2 }) })
+        /* @__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 }) })
         ] })
       ]
     }
@@ -4351,7 +4351,7 @@ var MenuCarat = /* @__PURE__ */ ((MenuCarat2) => {
   MenuCarat2["DOWN"] = "down";
   return MenuCarat2;
 })(MenuCarat || {});
-const Section = ({
+const Section$1 = ({
   section: section2,
   closeOnOptionClick,
   close: close2,
@@ -4364,7 +4364,7 @@ const Section = ({
   switch (section2.type) {
     case MenuType.HEADING:
       return /* @__PURE__ */ jsx(
-        Heading$2,
+        Heading$3,
         {
           label: (section2 == null ? void 0 : section2.label) ?? "",
           onClick: section2.onClick,
@@ -4376,7 +4376,7 @@ const Section = ({
       return /* @__PURE__ */ jsx(Divider$1, {});
     case MenuType.OPTION:
       return /* @__PURE__ */ jsx(
-        Option$1,
+        Option$2,
         {
           actions: section2.actions,
           label: (section2 == null ? void 0 : section2.label) ?? "",
@@ -4424,7 +4424,7 @@ const childPath = (path, sectionIndex) => `${path}.sections[${sectionIndex}]`.re
 const closePath = (path) => `${path}.close`.replace(/^\./, "");
 const siblings = (tree2, path) => get$2(tree2, parentPath(path), []);
 const registerClose = (tree2, path, close2) => set(tree2, closePath(path), close2);
-const Layer$1 = ({
+const Layer$2 = ({
   sections,
   isNested,
   width: width2,
@@ -4470,11 +4470,11 @@ const Layer$1 = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cx$2(styles$J.layer, isNested ? styles$J.nested : null),
+      className: cx$2(styles$L.layer, isNested ? styles$L.nested : null),
       style: { maxWidth: width2, maxHeight },
       "data-testid": testId,
       children: /* @__PURE__ */ jsx("ul", { children: localSections.map((section2, i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-        Section,
+        Section$1,
         {
           section: section2,
           closeOnOptionClick: section2.closeOnOptionClick,
@@ -4487,7 +4487,7 @@ const Layer$1 = ({
     }
   );
 };
-const placementOptions = (placement, isNested = false) => ({
+const placementOptions$1 = (placement, isNested = false) => ({
   auto: true,
   preferX: "right",
   preferY: "bottom",
@@ -4501,19 +4501,19 @@ const getType = (item2) => {
 };
 const wrapper$3 = "_wrapper_nwprz_1";
 const badge = "_badge_nwprz_5";
-const label$7 = "_label_nwprz_11";
+const label$9 = "_label_nwprz_11";
 const dark = "_dark_nwprz_23";
 const light = "_light_nwprz_26";
-const small$9 = "_small_nwprz_29";
+const small$b = "_small_nwprz_29";
 const dot$1 = "_dot_nwprz_33";
 const hasChildren = "_hasChildren_nwprz_39";
-const styles$I = {
+const styles$K = {
   wrapper: wrapper$3,
   badge,
-  label: label$7,
+  label: label$9,
   dark,
   light,
-  small: small$9,
+  small: small$b,
   dot: dot$1,
   hasChildren
 };
@@ -4535,16 +4535,16 @@ const Badge = ({
   small: small2 = false
 }) => {
   const visible = !(title2 === null && dot2 === false);
-  return /* @__PURE__ */ jsxs("div", { className: styles$I.wrapper, children: [
+  return /* @__PURE__ */ jsxs("div", { className: styles$K.wrapper, children: [
     visible && /* @__PURE__ */ jsx(
       "sup",
       {
         className: cx$2(
-          styles$I.badge,
-          isDark(color2) ? styles$I.dark : styles$I.light,
-          title2 !== null ? styles$I.label : styles$I.dot,
-          small2 ? styles$I.small : "",
-          children ? styles$I.hasChildren : ""
+          styles$K.badge,
+          isDark(color2) ? styles$K.dark : styles$K.light,
+          title2 !== null ? styles$K.label : styles$K.dot,
+          small2 ? styles$K.small : "",
+          children ? styles$K.hasChildren : ""
         ),
         style: {
           background: color2 || void 0,
@@ -4570,16 +4570,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$J.middleAlignedInline, children: [
-    /* @__PURE__ */ jsx("span", { className: styles$J.buttonLabel, children: label2 }),
-    /* @__PURE__ */ jsx("span", { className: styles$J.buttonCaret, children: /* @__PURE__ */ jsx(Icon, { icon: IconType.CHEVRON_DOWN }) })
+  const buttonLabel2 = trigger2 === TriggerType.BUTTON ? label2 : trigger2 === TriggerType.DROP_DOWN_BUTTON ? /* @__PURE__ */ jsxs("span", { className: styles$L.middleAlignedInline, children: [
+    /* @__PURE__ */ jsx("span", { className: styles$L.buttonLabel, children: label2 }),
+    /* @__PURE__ */ jsx("span", { className: styles$L.buttonCaret, children: /* @__PURE__ */ jsx(Icon, { icon: IconType.CHEVRON_DOWN }) })
   ] }) : null;
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: cx$2(
-        styles$J.trigger,
-        disabled2 || disabledContext ? styles$J.disabled : null
+        styles$L.trigger,
+        disabled2 || disabledContext ? styles$L.disabled : null
       ),
       style: { width: width2 },
       children: /* @__PURE__ */ jsx(
@@ -4607,7 +4607,7 @@ const Text$1 = ({
   title: title2,
   carat,
   disabled: disabled2,
-  isOpen,
+  isOpen: isOpen2,
   selected: selected2
 }) => {
   let titleText;
@@ -4620,14 +4620,14 @@ const Text$1 = ({
     "div",
     {
       className: cx$2(
-        styles$J.trigger,
-        disabled2 ? styles$J.disabled : null,
-        isOpen ? styles$J.active : null,
-        selected2 ? styles$J.selected : null
+        styles$L.trigger,
+        disabled2 ? styles$L.disabled : null,
+        isOpen2 ? styles$L.active : null,
+        selected2 ? styles$L.selected : null
       ),
       children: [
-        /* @__PURE__ */ jsx("span", { className: styles$J.label, title: titleText, children: label2 }),
-        carat && carat === MenuCarat.RIGHT ? /* @__PURE__ */ jsx("span", { className: styles$J.arrow, children: /* @__PURE__ */ jsx(Icon, { icon: IconType.CHEVRON_RIGHT }) }) : carat && carat === MenuCarat.DOWN ? /* @__PURE__ */ jsx("span", { className: styles$J.arrow, children: /* @__PURE__ */ jsx(Icon, { icon: IconType.CHEVRON_DOWN }) }) : null
+        /* @__PURE__ */ jsx("span", { className: styles$L.label, title: titleText, children: label2 }),
+        carat && carat === MenuCarat.RIGHT ? /* @__PURE__ */ jsx("span", { className: styles$L.arrow, children: /* @__PURE__ */ jsx(Icon, { icon: IconType.CHEVRON_RIGHT }) }) : carat && carat === MenuCarat.DOWN ? /* @__PURE__ */ jsx("span", { className: styles$L.arrow, children: /* @__PURE__ */ jsx(Icon, { icon: IconType.CHEVRON_DOWN }) }) : null
       ]
     }
   );
@@ -4640,7 +4640,7 @@ const Component = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cx$2(styles$J.component, disabled2 ? styles$J.disabled : null),
+      className: cx$2(styles$L.component, disabled2 ? styles$L.disabled : null),
       "data-testid": testId,
       children: component2
     }
@@ -4666,7 +4666,7 @@ const TriggerTooltip = ({
     }
   );
 };
-const Trigger = React__default.forwardRef(
+const Trigger$1 = React__default.forwardRef(
   ({
     isDisabled,
     badgeTitle,
@@ -4684,7 +4684,7 @@ const Trigger = React__default.forwardRef(
     component: component2,
     groupOrder,
     fullHeight,
-    isOpen,
+    isOpen: isOpen2,
     error: error2,
     warning: warning2,
     tooltip: tooltip2,
@@ -4705,7 +4705,7 @@ const Trigger = React__default.forwardRef(
         loading,
         error: error2,
         warning: warning2,
-        active: isOpen
+        active: isOpen2
       }
     ) : trigger2 === TriggerType.TEXT ? /* @__PURE__ */ jsx(
       Text$1,
@@ -4714,7 +4714,7 @@ const Trigger = React__default.forwardRef(
         title: title2,
         disabled: isDisabled,
         carat: !contextMenu ? isNested ? MenuCarat.RIGHT : MenuCarat.DOWN : void 0,
-        isOpen,
+        isOpen: isOpen2,
         selected: selected2
       }
     ) : trigger2 === TriggerType.COMPONENT ? /* @__PURE__ */ jsx(Component, { component: component2, disabled: isDisabled }) : null;
@@ -4723,7 +4723,7 @@ const Trigger = React__default.forwardRef(
       "div",
       {
         ref: ref2,
-        className: styles$J.wrapper,
+        className: styles$L.wrapper,
         style: width2 ? { width: width2 } : {
           ...fullHeight && {
             height: "100%",
@@ -4763,19 +4763,19 @@ const useContextMenu = ({
 }) => {
   const { hasMousePosition, resetMousePosition, handleMouseEvent, trigger: trigger2 } = useMousePositionAsTrigger();
   const close2 = resetMousePosition;
-  const isOpen = hasMousePosition;
+  const isOpen2 = hasMousePosition;
   const { layerProps, renderLayer } = useLayer({
-    isOpen,
+    isOpen: isOpen2,
     trigger: trigger2,
-    ...placementOptions(placement),
+    ...placementOptions$1(placement),
     possiblePlacements,
     ResizeObserver: index,
     onOutsideClick: close2,
     overflowContainer
   });
-  const layer2 = isOpen && renderLayer(
+  const layer2 = isOpen2 && renderLayer(
     /* @__PURE__ */ jsx("div", { ...layerProps, children: /* @__PURE__ */ jsx(
-      Layer$1,
+      Layer$2,
       {
         isNested: false,
         width: width2,
@@ -4830,7 +4830,7 @@ const ContextMenu = ({
   const isDisabled = disabled2 || isMenuEmpty(menu2) || disabledContext;
   return /* @__PURE__ */ jsxs("div", { onContextMenu, "data-testid": testId, children: [
     /* @__PURE__ */ jsx(
-      Trigger,
+      Trigger$1,
       {
         width: width2,
         fullHeight: fullHeightTrigger,
@@ -4887,12 +4887,12 @@ const DropDownMenu = ({
     showAllButton,
     possiblePlacements = ["bottom-start", "top-start"]
   } = menu2;
-  const [isOpen, setOpen] = isBoolean$2(openProp) && isFunction$3(setOpenProp) ? [openProp, setOpenProp] : useState(false);
+  const [isOpen2, setOpen] = isBoolean$2(openProp) && isFunction$3(setOpenProp) ? [openProp, setOpenProp] : useState(false);
   const close2 = () => setOpen(false);
   const open = () => setOpen(true);
   const { triggerProps, layerProps, renderLayer } = useLayer({
-    isOpen,
-    ...placementOptions(placement, isNested),
+    isOpen: isOpen2,
+    ...placementOptions$1(placement, isNested),
     possiblePlacements,
     ResizeObserver: index,
     onOutsideClick: close2,
@@ -4905,7 +4905,7 @@ const DropDownMenu = ({
     if (isDisabled) {
       return;
     }
-    if (isOpen) {
+    if (isOpen2) {
       close2();
       return;
     }
@@ -4918,7 +4918,7 @@ const DropDownMenu = ({
   };
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsx(
-      Trigger,
+      Trigger$1,
       {
         ref: triggerProps.ref,
         isDisabled,
@@ -4936,7 +4936,7 @@ const DropDownMenu = ({
         isNested,
         component: component2,
         groupOrder,
-        isOpen,
+        isOpen: isOpen2,
         tooltip: tooltip2,
         error: error2,
         warning: warning2,
@@ -4944,16 +4944,16 @@ const DropDownMenu = ({
         selected: selected2
       }
     ),
-    isOpen && renderLayer(
+    isOpen2 && renderLayer(
       /* @__PURE__ */ jsx(
         "div",
         {
           ...layerProps,
-          className: styles$J.layerContainer,
+          className: styles$L.layerContainer,
           "data-testid": menu2.testId,
           onClick: (evt) => evt.stopPropagation(),
           children: /* @__PURE__ */ jsx(
-            Layer$1,
+            Layer$2,
             {
               sections,
               isNested,
@@ -5018,7 +5018,7 @@ const SubmenuActions = (props) => {
 const Actions = (props) => {
   const disabledContext = useContext(DisabledContext);
   const { actions: actions2 = [], closeLayer } = props;
-  return /* @__PURE__ */ jsx("div", { className: cx$2(styles$K.actions), children: actions2.map((action2, index2) => {
+  return /* @__PURE__ */ jsx("div", { className: cx$2(styles$M.actions), children: actions2.map((action2, index2) => {
     const hidden2 = (action2 == null ? void 0 : action2.hidden) || !action2 || !Object.keys(action2).length;
     if (!hidden2) {
       if (action2.childComponent && React__default.isValidElement(action2.childComponent)) {
@@ -5026,7 +5026,7 @@ const Actions = (props) => {
           "div",
           {
             "data-testid": action2.testId,
-            className: styles$K.childComponent,
+            className: styles$M.childComponent,
             children: action2.childComponent
           },
           index2
@@ -5075,17 +5075,17 @@ const Actions = (props) => {
   }) });
 };
 const breadcrumb = "_breadcrumb_2k0cd_1";
-const small$8 = "_small_2k0cd_4";
+const small$a = "_small_2k0cd_4";
 const labelContainer = "_labelContainer_2k0cd_7";
 const active$5 = "_active_2k0cd_17";
-const disabled$5 = "_disabled_2k0cd_22";
+const disabled$7 = "_disabled_2k0cd_22";
 const separator = "_separator_2k0cd_27";
-const styles$H = {
+const styles$J = {
   breadcrumb,
-  small: small$8,
+  small: small$a,
   labelContainer,
   active: active$5,
-  disabled: disabled$5,
+  disabled: disabled$7,
   separator
 };
 var BreadcrumbLinkType = /* @__PURE__ */ ((BreadcrumbLinkType2) => {
@@ -5111,16 +5111,16 @@ const Link$2 = ({
     {
       onClick,
       className: cx$2(
-        styles$H.labelContainer,
-        active2 && styles$H.active,
-        (disabled2 || disabledContext) && styles$H.disabled
+        styles$J.labelContainer,
+        active2 && styles$J.active,
+        (disabled2 || disabledContext) && styles$J.disabled
       ),
       children: isLink ? /* @__PURE__ */ jsx("a", { href: url, children: label2 }) : isCustom ? element : label2
     }
   );
 };
 const Breadcrumb = ({ links, small: small2 = false }) => {
-  return /* @__PURE__ */ jsx("div", { className: cx$2(styles$H.breadcrumb, small2 && styles$H.small), children: links.map((link2, i) => {
+  return /* @__PURE__ */ jsx("div", { className: cx$2(styles$J.breadcrumb, small2 && styles$J.small), children: links.map((link2, i) => {
     const isFinal = links.length === i + 1;
     const { type, label: label2, url, onClick, active: active2, disabled: disabled2, element } = link2;
     return /* @__PURE__ */ jsxs("span", { children: [
@@ -5136,14 +5136,14 @@ const Breadcrumb = ({ links, small: small2 = false }) => {
           element
         }
       ),
-      !isFinal && /* @__PURE__ */ jsx("span", { className: styles$H.separator, children: "/" })
+      !isFinal && /* @__PURE__ */ jsx("span", { className: styles$J.separator, children: "/" })
     ] }, i);
   }) });
 };
-const label$6 = "_label_iu2wi_1";
+const label$8 = "_label_iu2wi_1";
 const buttonGroup = "_buttonGroup_iu2wi_11";
-const styles$G = {
-  label: label$6,
+const styles$I = {
+  label: label$8,
   buttonGroup
 };
 const ButtonGroup = (props) => {
@@ -5196,7 +5196,7 @@ const ButtonGroup = (props) => {
   };
   const renderHeader = () => {
     if (header2) {
-      return /* @__PURE__ */ jsx("label", { className: styles$G.label, children: header2 });
+      return /* @__PURE__ */ jsx("label", { className: styles$I.label, children: header2 });
     }
   };
   const renderButtons = () => {
@@ -5253,7 +5253,7 @@ const ButtonGroup = (props) => {
   };
   return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { children: [
     renderHeader(),
-    /* @__PURE__ */ jsx("div", { className: styles$G.buttonGroup, "data-testid": testId, children: renderButtons() })
+    /* @__PURE__ */ jsx("div", { className: styles$I.buttonGroup, "data-testid": testId, children: renderButtons() })
   ] }) });
 };
 const card = "_card_ucdeu_1";
@@ -5263,7 +5263,7 @@ const cardHeader = "_cardHeader_ucdeu_13";
 const cardContentBorderTop = "_cardContentBorderTop_ucdeu_19";
 const padding$1 = "_padding_ucdeu_22";
 const cardContent = "_cardContent_ucdeu_19";
-const styles$F = {
+const styles$H = {
   card,
   bordered: bordered$2,
   raised,
@@ -5284,20 +5284,20 @@ const Card = ({
     "div",
     {
       className: cx$2(
-        styles$F.card,
-        bordered2 ? styles$F.bordered : "",
-        raised2 ? styles$F.raised : ""
+        styles$H.card,
+        bordered2 ? styles$H.bordered : "",
+        raised2 ? styles$H.raised : ""
       ),
       style: { margin: margin2 },
       children: [
-        heading2 ? /* @__PURE__ */ jsx("div", { className: cx$2(styles$F.cardHeader), children: heading2 }) : null,
+        heading2 ? /* @__PURE__ */ jsx("div", { className: cx$2(styles$H.cardHeader), children: heading2 }) : null,
         /* @__PURE__ */ jsx(
           "div",
           {
             className: cx$2(
-              styles$F.cardContent,
-              heading2 ? styles$F.cardContentBorderTop : "",
-              padding2 ? styles$F.padding : ""
+              styles$H.cardContent,
+              heading2 ? styles$H.cardContentBorderTop : "",
+              padding2 ? styles$H.padding : ""
             ),
             children
           }
@@ -5325,8 +5325,8 @@ function __spreadArray$1(to2, from3, pack) {
   }
   return to2.concat(ar2 || Array.prototype.slice.call(from3));
 }
-typeof SuppressedError === "function" ? SuppressedError : function(error2, suppressed, message) {
-  var e2 = new Error(message);
+typeof SuppressedError === "function" ? SuppressedError : function(error2, suppressed, message2) {
+  var e2 = new Error(message2);
   return e2.name = "SuppressedError", e2.error = error2, e2.suppressed = suppressed, e2;
 };
 function memoize$1(fn) {
@@ -6497,7 +6497,7 @@ const Column = ({
 const divider = "_divider_2bfzh_1";
 const alignLeft = "_alignLeft_2bfzh_12";
 const alignRight = "_alignRight_2bfzh_15";
-const styles$E = {
+const styles$G = {
   divider,
   alignLeft,
   alignRight
@@ -6509,9 +6509,9 @@ const faint = "_faint_11ofj_10";
 const success$1 = "_success_11ofj_13";
 const warning$5 = "_warning_11ofj_16";
 const error$2 = "_error_11ofj_19";
-const small$7 = "_small_11ofj_22";
+const small$9 = "_small_11ofj_22";
 const link$1 = "_link_11ofj_25";
-const styles$D = {
+const styles$F = {
   bold: bold$1,
   center,
   muted: muted$1,
@@ -6519,7 +6519,7 @@ const styles$D = {
   success: success$1,
   warning: warning$5,
   error: error$2,
-  small: small$7,
+  small: small$9,
   link: link$1
 };
 const Text = ({
@@ -6539,16 +6539,16 @@ const Text = ({
     "span",
     {
       className: cx$2(
-        bold2 && styles$D.bold,
-        center2 && styles$D.center,
-        error2 && styles$D.error,
-        faint2 && styles$D.faint,
-        link2 && styles$D.link,
-        muted2 && styles$D.muted,
-        onClick && styles$D.clickable,
-        small2 && styles$D.small,
-        success2 && styles$D.success,
-        warning2 && styles$D.warning
+        bold2 && styles$F.bold,
+        center2 && styles$F.center,
+        error2 && styles$F.error,
+        faint2 && styles$F.faint,
+        link2 && styles$F.link,
+        muted2 && styles$F.muted,
+        onClick && styles$F.clickable,
+        small2 && styles$F.small,
+        success2 && styles$F.success,
+        warning2 && styles$F.warning
       ),
       onClick,
       children
@@ -6558,9 +6558,9 @@ const Text = ({
 const cssAlignClass = (align) => {
   switch (align) {
     case Align.LEFT:
-      return styles$E.alignLeft;
+      return styles$G.alignLeft;
     case Align.RIGHT:
-      return styles$E.alignRight;
+      return styles$G.alignRight;
     default:
       return "";
   }
@@ -6573,7 +6573,7 @@ const Divider = ({
 }) => /* @__PURE__ */ jsx(
   "div",
   {
-    className: `${styles$E.divider} ${cssAlignClass(align)}`,
+    className: `${styles$G.divider} ${cssAlignClass(align)}`,
     style: {
       marginTop: margin2,
       marginBottom: margin2,
@@ -6582,15 +6582,15 @@ const Divider = ({
     children: typeof children === "string" ? /* @__PURE__ */ jsx(Text, { muted: true, children }) : children
   }
 );
-const heading$3 = "_heading_yhdiy_1";
+const heading$4 = "_heading_yhdiy_1";
 const top$1 = "_top_yhdiy_10";
-const icons$1 = "_icons_yhdiy_20";
-const styles$C = {
-  heading: heading$3,
+const icons$2 = "_icons_yhdiy_20";
+const styles$E = {
+  heading: heading$4,
   top: top$1,
-  icons: icons$1
+  icons: icons$2
 };
-const Heading$1 = ({
+const Heading$2 = ({
   children,
   helpText,
   onClick,
@@ -6606,13 +6606,13 @@ const Heading$1 = ({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cx$2(styles$C.heading, top2 ? styles$C.top : ""),
+      className: cx$2(styles$E.heading, top2 ? styles$E.top : ""),
       style: { marginBottom },
       onClick,
       "data-testid": testId,
       children: [
         children,
-        /* @__PURE__ */ jsxs("div", { className: styles$C.icons, children: [
+        /* @__PURE__ */ jsxs("div", { className: styles$E.icons, children: [
           icon2 && /* @__PURE__ */ jsx(HelpIcon, { onClick: onIconClick, icon: icon2 }),
           isHelpIconDisplayed && /* @__PURE__ */ jsx(HelpIcon, { text: helpText, onClick: onClickHelp }),
           libraryIcon && /* @__PURE__ */ jsx(
@@ -6635,7 +6635,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$B = {
+const styles$D = {
   dialog,
   inline: inline$3,
   scroll: scroll$3,
@@ -6670,16 +6670,16 @@ const Dialog = ({ dialog: dialog2 }) => {
     "div",
     {
       className: cx$2(
-        styles$B.dialog,
-        width2 ? styles$B.inline : null,
-        scroll3 ? styles$B.scroll : null
+        styles$D.dialog,
+        width2 ? styles$D.inline : null,
+        scroll3 ? styles$D.scroll : null
       ),
       style: { width: width2, height: height2 },
       "data-testid": testId ?? null,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: styles$B.header, children: [
-          /* @__PURE__ */ jsx(Heading$1, { testId: testId && `${testId}-heading`, top: true, marginBottom: 0, children: heading2 }),
-          onClose ? /* @__PURE__ */ jsx("div", { className: styles$B.dismiss, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs("div", { className: styles$D.header, children: [
+          /* @__PURE__ */ jsx(Heading$2, { testId: testId && `${testId}-heading`, top: true, marginBottom: 0, children: heading2 }),
+          onClose ? /* @__PURE__ */ jsx("div", { className: styles$D.dismiss, children: /* @__PURE__ */ jsx(
             Button$1,
             {
               icon: IconType.CLOSE,
@@ -6696,7 +6696,7 @@ const Dialog = ({ dialog: dialog2 }) => {
           "div",
           {
             "data-testid": testId && `${testId}-content`,
-            className: styles$B.content,
+            className: styles$D.content,
             style: { padding: contentPadding2 },
             children: convertStringToJsx(content2)
           }
@@ -6705,7 +6705,7 @@ const Dialog = ({ dialog: dialog2 }) => {
           "div",
           {
             "data-testid": testId && `${testId}-footer`,
-            className: styles$B.footer,
+            className: styles$D.footer,
             children: footer2
           }
         )
@@ -6713,16 +6713,16 @@ const Dialog = ({ dialog: dialog2 }) => {
     }
   );
 };
-const inputInTable$9 = "_inputInTable_1f40p_1";
-const inputHover$9 = "_inputHover_1f40p_13";
-const inputFocus$9 = "_inputFocus_1f40p_18";
-const inputError$9 = "_inputError_1f40p_25";
-const inputWarning$9 = "_inputWarning_1f40p_26";
-const inputDisabled$9 = "_inputDisabled_1f40p_61";
-const hideScrollbars$9 = "_hideScrollbars_1f40p_67";
+const inputInTable$a = "_inputInTable_1f40p_1";
+const inputHover$a = "_inputHover_1f40p_13";
+const inputFocus$a = "_inputFocus_1f40p_18";
+const inputError$a = "_inputError_1f40p_25";
+const inputWarning$a = "_inputWarning_1f40p_26";
+const inputDisabled$a = "_inputDisabled_1f40p_61";
+const hideScrollbars$a = "_hideScrollbars_1f40p_67";
 const inline$2 = "_inline_1f40p_90";
 const left$2 = "_left_1f40p_93";
-const right$5 = "_right_1f40p_96";
+const right$6 = "_right_1f40p_96";
 const fixed$1 = "_fixed_1f40p_99";
 const border$1 = "_border_1f40p_111";
 const shadow = "_shadow_1f40p_117";
@@ -6735,20 +6735,20 @@ const toggleButtonOpen = "_toggleButtonOpen_1f40p_162";
 const tabs$1 = "_tabs_1f40p_165";
 const tab$1 = "_tab_1f40p_165";
 const active$4 = "_active_1f40p_197";
-const disabled$4 = "_disabled_1f40p_222";
+const disabled$6 = "_disabled_1f40p_222";
 const tabsContent = "_tabsContent_1f40p_229";
 const resizeHandle = "_resizeHandle_1f40p_235";
-const styles$A = {
-  inputInTable: inputInTable$9,
-  inputHover: inputHover$9,
-  inputFocus: inputFocus$9,
-  inputError: inputError$9,
-  inputWarning: inputWarning$9,
-  inputDisabled: inputDisabled$9,
-  hideScrollbars: hideScrollbars$9,
+const styles$C = {
+  inputInTable: inputInTable$a,
+  inputHover: inputHover$a,
+  inputFocus: inputFocus$a,
+  inputError: inputError$a,
+  inputWarning: inputWarning$a,
+  inputDisabled: inputDisabled$a,
+  hideScrollbars: hideScrollbars$a,
   inline: inline$2,
   left: left$2,
-  right: right$5,
+  right: right$6,
   fixed: fixed$1,
   border: border$1,
   shadow,
@@ -6761,7 +6761,7 @@ const styles$A = {
   tabs: tabs$1,
   tab: tab$1,
   active: active$4,
-  disabled: disabled$4,
+  disabled: disabled$6,
   tabsContent,
   resizeHandle
 };
@@ -6779,13 +6779,13 @@ const DrawerTabs = ({
   testId
 }) => {
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    /* @__PURE__ */ jsx("div", { className: styles$A.tabs, children: tabs2.map((tab2, index2) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: styles$C.tabs, children: tabs2.map((tab2, index2) => /* @__PURE__ */ jsx(
       "div",
       {
         className: cx$2(
-          styles$A.tab,
-          activeTab === index2 && open ? styles$A.active : "",
-          tab2.disabled ? styles$A.disabled : ""
+          styles$C.tab,
+          activeTab === index2 && open ? styles$C.active : "",
+          tab2.disabled ? styles$C.disabled : ""
         ),
         style: { background: background2 },
         onClick: !tab2.disabled ? () => handleTabClick(index2) : void 0,
@@ -6800,7 +6800,7 @@ const DrawerTabs = ({
         "div",
         {
           style: { width: typeof width2 === "number" ? `${width2}px` : width2 },
-          className: styles$A.tabsContent,
+          className: styles$C.tabsContent,
           "data-testid": testId && `${testId}-content-${index2}`,
           children: active2 && open && tab2.content
         },
@@ -8721,7 +8721,7 @@ const MIN_OPEN_WIDTH = 240;
 const ResizeHandle = forwardRef(
   (props, ref2) => {
     const { handleAxis, ...rest } = props;
-    return /* @__PURE__ */ jsx("div", { ref: ref2, className: styles$A.resizeHandle, ...rest, children: /* @__PURE__ */ jsx(Icon, { icon: IconType.DRAG }) });
+    return /* @__PURE__ */ jsx("div", { ref: ref2, className: styles$C.resizeHandle, ...rest, children: /* @__PURE__ */ jsx(Icon, { icon: IconType.DRAG }) });
   }
 );
 const DrawerResizeWrapper = ({
@@ -8747,7 +8747,7 @@ const DrawerResizeWrapper = ({
       handle: /* @__PURE__ */ jsx(ResizeHandle, {}),
       resizeHandles: right2 ? ["w"] : ["e"],
       axis: "x",
-      className: isResizing2 ? styles$A.isResizing : "",
+      className: isResizing2 ? styles$C.isResizing : "",
       onResizeStart: () => {
         if (setOpen) setOpen(true);
         if (onResize) onResize(width2);
@@ -8845,17 +8845,17 @@ const Drawer = ({
         "div",
         {
           className: cx$2(
-            styles$A.drawer,
-            shadow4 ? styles$A.shadow : "",
-            fixed2 ? styles$A.fixed : styles$A.inline,
-            right2 ? styles$A.right : styles$A.left
+            styles$C.drawer,
+            shadow4 ? styles$C.shadow : "",
+            fixed2 ? styles$C.fixed : styles$C.inline,
+            right2 ? styles$C.right : styles$C.left
           ),
           style: { top: top2 },
           children: [
             /* @__PURE__ */ jsx(
               "div",
               {
-                className: cx$2(styles$A.drawerContent, border2 && styles$A.border),
+                className: cx$2(styles$C.drawerContent, border2 && styles$C.border),
                 style: {
                   background: background2,
                   borderColor: typeof border2 === "string" ? border2 : void 0,
@@ -8881,9 +8881,9 @@ const Drawer = ({
               "span",
               {
                 className: cx$2(
-                  styles$A.toggleButton,
-                  localOpen && (isStandardButton || isCustomButton && buttonAnimate) ? styles$A.toggleButtonOpen : "",
-                  buttonPosition === "top" ? styles$A.top : styles$A.bottom
+                  styles$C.toggleButton,
+                  localOpen && (isStandardButton || isCustomButton && buttonAnimate) ? styles$C.toggleButtonOpen : "",
+                  buttonPosition === "top" ? styles$C.top : styles$C.bottom
                 ),
                 children: isCustomButton ? button2 : /* @__PURE__ */ jsx(
                   Button$1,
@@ -8903,7 +8903,7 @@ const Drawer = ({
 };
 const empty$2 = "_empty_fe425_1";
 const text$2 = "_text_fe425_11";
-const styles$z = {
+const styles$B = {
   empty: empty$2,
   text: text$2
 };
@@ -8917,7 +8917,7 @@ const Empty = ({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: styles$z.empty,
+      className: styles$B.empty,
       style: { width: width2, height: height2 },
       "data-testid": testId,
       children: [
@@ -8949,7 +8949,7 @@ const Empty = ({
             )
           ] })
         ] }) }),
-        text2 !== "" && /* @__PURE__ */ jsx("div", { className: styles$z.text, children: /* @__PURE__ */ jsx(Text, { faint: true, children: text2 }) }),
+        text2 !== "" && /* @__PURE__ */ jsx("div", { className: styles$B.text, children: /* @__PURE__ */ jsx(Text, { faint: true, children: text2 }) }),
         children
       ]
     }
@@ -9003,7 +9003,7 @@ const FileButton = ({
   ] });
 };
 const inputGroup = "_inputGroup_biuoa_1";
-const styles$y = {
+const styles$A = {
   inputGroup
 };
 const isDOMTypeElement = (element) => {
@@ -9028,43 +9028,43 @@ const InputGroup = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cx$2(styles$y.inputGroup),
+      className: cx$2(styles$A.inputGroup),
       style: { width: width2 },
       children: elements
     }
   );
 };
-const inputInTable$8 = "_inputInTable_1285q_1";
-const inputHover$8 = "_inputHover_1285q_13";
-const inputFocus$8 = "_inputFocus_1285q_18";
-const inputError$8 = "_inputError_1285q_25";
-const inputWarning$8 = "_inputWarning_1285q_26";
-const inputDisabled$8 = "_inputDisabled_1285q_61";
-const hideScrollbars$8 = "_hideScrollbars_1285q_67";
-const input = "_input_1285q_1";
-const isInTable$2 = "_isInTable_1285q_100";
-const small$6 = "_small_1285q_124";
-const right$4 = "_right_1285q_170";
-const groupOrderFirst$2 = "_groupOrderFirst_1285q_173";
-const groupOrderMiddle$2 = "_groupOrderMiddle_1285q_174";
-const groupOrderLast$2 = "_groupOrderLast_1285q_175";
-const styles$x = {
-  inputInTable: inputInTable$8,
-  inputHover: inputHover$8,
-  inputFocus: inputFocus$8,
-  inputError: inputError$8,
-  inputWarning: inputWarning$8,
-  inputDisabled: inputDisabled$8,
-  hideScrollbars: hideScrollbars$8,
-  input,
-  isInTable: isInTable$2,
-  small: small$6,
-  right: right$4,
-  groupOrderFirst: groupOrderFirst$2,
-  groupOrderMiddle: groupOrderMiddle$2,
-  groupOrderLast: groupOrderLast$2
+const inputInTable$9 = "_inputInTable_1285q_1";
+const inputHover$9 = "_inputHover_1285q_13";
+const inputFocus$9 = "_inputFocus_1285q_18";
+const inputError$9 = "_inputError_1285q_25";
+const inputWarning$9 = "_inputWarning_1285q_26";
+const inputDisabled$9 = "_inputDisabled_1285q_61";
+const hideScrollbars$9 = "_hideScrollbars_1285q_67";
+const input$1 = "_input_1285q_1";
+const isInTable$3 = "_isInTable_1285q_100";
+const small$8 = "_small_1285q_124";
+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 = {
+  inputInTable: inputInTable$9,
+  inputHover: inputHover$9,
+  inputFocus: inputFocus$9,
+  inputError: inputError$9,
+  inputWarning: inputWarning$9,
+  inputDisabled: inputDisabled$9,
+  hideScrollbars: hideScrollbars$9,
+  input: input$1,
+  isInTable: isInTable$3,
+  small: small$8,
+  right: right$5,
+  groupOrderFirst: groupOrderFirst$3,
+  groupOrderMiddle: groupOrderMiddle$3,
+  groupOrderLast: groupOrderLast$3
 };
-const Input = forwardRef(
+const Input$1 = forwardRef(
   ({
     error: error2 = null,
     tooltip: tooltip2 = null,
@@ -9100,11 +9100,11 @@ const Input = forwardRef(
       if (groupOrder) {
         switch (groupOrder) {
           case "first":
-            return styles$x.groupOrderFirst;
+            return styles$z.groupOrderFirst;
           case "last":
-            return styles$x.groupOrderLast;
+            return styles$z.groupOrderLast;
           default:
-            return styles$x.groupOrderMiddle;
+            return styles$z.groupOrderMiddle;
         }
       }
       return "";
@@ -9138,10 +9138,10 @@ const Input = forwardRef(
             autoComplete: "off",
             disabled: disabled2 || disabledContext,
             className: cx$2(
-              styles$x.input,
-              right2 ? styles$x.right : "",
-              small2 ? styles$x.small : "",
-              isInTable2 ? styles$x.isInTable : ""
+              styles$z.input,
+              right2 ? styles$z.right : "",
+              small2 ? styles$z.small : "",
+              isInTable2 ? styles$z.isInTable : ""
             ),
             style: { width: width2 },
             "data-error": error2 || null,
@@ -9154,7 +9154,7 @@ const Input = forwardRef(
   }
 );
 const fileInput = "_fileInput_1elar_1";
-const styles$w = {
+const styles$y = {
   fileInput
 };
 var InputReaderMethods = /* @__PURE__ */ ((InputReaderMethods2) => {
@@ -9232,7 +9232,7 @@ const FileInput = ({
   };
   return /* @__PURE__ */ jsxs("div", { onClick: handleClick2, style: { width: width2 }, children: [
     /* @__PURE__ */ jsxs(InputGroup, { children: [
-      /* @__PURE__ */ jsx(Input, { value: fileName || "", placeholder: placeholder3, disabled: true }),
+      /* @__PURE__ */ jsx(Input$1, { value: fileName || "", placeholder: placeholder3, disabled: true }),
       /* @__PURE__ */ jsx(
         Button$1,
         {
@@ -9248,7 +9248,7 @@ const FileInput = ({
       {
         name: name2,
         ref: inputRef,
-        className: styles$w.fileInput,
+        className: styles$y.fileInput,
         type: "file",
         accept,
         multiple: multi,
@@ -9258,13 +9258,13 @@ const FileInput = ({
     )
   ] });
 };
-const label$5 = "_label_18pfe_1";
+const label$7 = "_label_18pfe_1";
 const labelLeft$1 = "_labelLeft_18pfe_5";
-const icons = "_icons_18pfe_13";
-const styles$v = {
-  label: label$5,
+const icons$1 = "_icons_18pfe_13";
+const styles$x = {
+  label: label$7,
   labelLeft: labelLeft$1,
-  icons
+  icons: icons$1
 };
 const Label$2 = ({
   label: label2 = null,
@@ -9284,9 +9284,9 @@ const Label$2 = ({
   libraryIcon,
   labelLeft: labelLeft2 = false
 }) => {
-  return /* @__PURE__ */ jsx("div", { className: cx$2(styles$v.label, labelLeft2 ? styles$v.labelLeft : ""), children: /* @__PURE__ */ jsxs("label", { style: { width: width2 || "" }, children: [
+  return /* @__PURE__ */ jsx("div", { className: cx$2(styles$x.label, labelLeft2 ? styles$x.labelLeft : ""), children: /* @__PURE__ */ jsxs("label", { style: { width: width2 || "" }, children: [
     label2,
-    /* @__PURE__ */ jsxs("div", { className: styles$v.icons, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles$x.icons, children: [
       (helpText || onClickHelp) && /* @__PURE__ */ jsx(
         HelpIcon,
         {
@@ -9321,7 +9321,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$u = {
+const styles$w = {
   field,
   labelLeft,
   fieldInput,
@@ -9352,7 +9352,7 @@ const Field = ({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cx$2(styles$u.field, labelLeft2 ? styles$u.labelLeft : ""),
+      className: cx$2(styles$w.field, labelLeft2 ? styles$w.labelLeft : ""),
       "data-testid": testId,
       children: [
         (label2 || labelLeft2) && /* @__PURE__ */ jsx(
@@ -9369,7 +9369,7 @@ const Field = ({
             labelLeft: labelLeft2
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: styles$u.fieldInput, children })
+        /* @__PURE__ */ jsx("div", { className: styles$w.fieldInput, children })
       ]
     }
   );
@@ -9400,11 +9400,11 @@ const Flex = ({
   );
 };
 const formRow = "_formRow_odewu_1";
-const styles$t = {
+const styles$v = {
   formRow
 };
 const FormRow = ({ children }) => {
-  return /* @__PURE__ */ jsx("div", { className: styles$t.formRow, children });
+  return /* @__PURE__ */ jsx("div", { className: styles$v.formRow, children });
 };
 const getGapValue = (gap) => {
   if (typeof gap === "boolean") {
@@ -9460,16 +9460,16 @@ const Grid = ({
   );
 };
 const addon = "_addon_b4w53_1";
-const small$5 = "_small_b4w53_12";
-const groupOrderFirst$1 = "_groupOrderFirst_b4w53_16";
-const groupOrderMiddle$1 = "_groupOrderMiddle_b4w53_17";
-const groupOrderLast$1 = "_groupOrderLast_b4w53_21";
-const styles$s = {
+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 = {
   addon,
-  small: small$5,
-  groupOrderFirst: groupOrderFirst$1,
-  groupOrderMiddle: groupOrderMiddle$1,
-  groupOrderLast: groupOrderLast$1
+  small: small$7,
+  groupOrderFirst: groupOrderFirst$2,
+  groupOrderMiddle: groupOrderMiddle$2,
+  groupOrderLast: groupOrderLast$2
 };
 const InputGroupAddon = ({
   children,
@@ -9480,16 +9480,16 @@ const InputGroupAddon = ({
     if (groupOrder) {
       switch (groupOrder) {
         case GroupOrder.FIRST:
-          return styles$s.groupOrderFirst;
+          return styles$u.groupOrderFirst;
         case GroupOrder.LAST:
-          return styles$s.groupOrderLast;
+          return styles$u.groupOrderLast;
         default:
-          return styles$s.groupOrderMiddle;
+          return styles$u.groupOrderMiddle;
       }
     }
     return "";
   })();
-  return /* @__PURE__ */ jsx("span", { className: cx$2(styles$s.addon, order2, small2 ? styles$s.small : ""), children });
+  return /* @__PURE__ */ jsx("span", { className: cx$2(styles$u.addon, order2, small2 ? styles$u.small : ""), children });
 };
 function _typeof$2(o) {
   "@babel/helpers - typeof";
@@ -9551,7 +9551,7 @@ var $$observable = function() {
 var randomString = function randomString2() {
   return Math.random().toString(36).substring(7).split("").join(".");
 };
-var ActionTypes = {
+var ActionTypes$1 = {
   INIT: "@@redux/INIT" + randomString(),
   REPLACE: "@@redux/REPLACE" + randomString(),
   PROBE_UNKNOWN_ACTION: function PROBE_UNKNOWN_ACTION() {
@@ -9698,7 +9698,7 @@ function createStore$1(reducer2, preloadedState, enhancer) {
     }
     currentReducer = nextReducer;
     dispatch({
-      type: ActionTypes.REPLACE
+      type: ActionTypes$1.REPLACE
     });
   }
   function observable() {
@@ -9733,7 +9733,7 @@ function createStore$1(reducer2, preloadedState, enhancer) {
     }, _ref;
   }
   dispatch({
-    type: ActionTypes.INIT
+    type: ActionTypes$1.INIT
   });
   return _ref2 = {
     dispatch,
@@ -10895,12 +10895,12 @@ function isPlainObject$3(obj) {
   }
   return proto === baseProto;
 }
-function warning$4(message) {
+function warning$4(message2) {
   if (typeof console !== "undefined" && typeof console.error === "function") {
-    console.error(message);
+    console.error(message2);
   }
   try {
-    throw new Error(message);
+    throw new Error(message2);
   } catch (e2) {
   }
 }
@@ -11166,11 +11166,11 @@ var useMemo = useMemoOne;
 var useCallback = useCallbackOne;
 var isProduction$2 = process.env.NODE_ENV === "production";
 var prefix$2 = "Invariant failed";
-function invariant$4(condition, message) {
+function invariant$4(condition, message2) {
   if (isProduction$2) {
     throw new Error(prefix$2);
   }
-  var provided = typeof message === "function" ? message() : message;
+  var provided = typeof message2 === "function" ? message2() : message2;
   var value = provided ? "".concat(prefix$2, ": ").concat(provided) : prefix$2;
   throw new Error(value);
 }
@@ -11380,14 +11380,14 @@ var lineStartWithSpaces = /^[ \t]*/gm;
 var clean = function clean2(value) {
   return value.replace(spacesAndTabs, " ").replace(lineStartWithSpaces, "").trim();
 };
-var getDevMessage = function getDevMessage2(message) {
-  return clean("\n  %creact-beautiful-dnd\n\n  %c" + clean(message) + "\n\n  %c👷‍ This is a development only message. It will be removed in production builds.\n");
+var getDevMessage = function getDevMessage2(message2) {
+  return clean("\n  %creact-beautiful-dnd\n\n  %c" + clean(message2) + "\n\n  %c👷‍ This is a development only message. It will be removed in production builds.\n");
 };
-var getFormattedMessage = function getFormattedMessage2(message) {
-  return [getDevMessage(message), "color: #00C584; font-size: 1.2em; font-weight: bold;", "line-height: 1.5", "color: #723874;"];
+var getFormattedMessage = function getFormattedMessage2(message2) {
+  return [getDevMessage(message2), "color: #00C584; font-size: 1.2em; font-weight: bold;", "line-height: 1.5", "color: #723874;"];
 };
 var isDisabledFlag = "__react-beautiful-dnd-disable-dev-warnings";
-function log(type, message) {
+function log(type, message2) {
   var _console;
   if (isProduction$1) {
     return;
@@ -11395,7 +11395,7 @@ function log(type, message) {
   if (typeof window !== "undefined" && window[isDisabledFlag]) {
     return;
   }
-  (_console = console)[type].apply(_console, getFormattedMessage(message));
+  (_console = console)[type].apply(_console, getFormattedMessage(message2));
 }
 var warning$3 = log.bind(null, "warn");
 var error$1 = log.bind(null, "error");
@@ -11420,17 +11420,17 @@ function bindEvents(el2, bindings, sharedOptions) {
 }
 var isProduction$1$1 = process.env.NODE_ENV === "production";
 var prefix = "Invariant failed";
-function RbdInvariant(message) {
-  this.message = message;
+function RbdInvariant(message2) {
+  this.message = message2;
 }
 RbdInvariant.prototype.toString = function toString() {
   return this.message;
 };
-function invariant$3(condition, message) {
+function invariant$3(condition, message2) {
   if (isProduction$1$1) {
     throw new RbdInvariant(prefix);
   } else {
-    throw new RbdInvariant(prefix + ": " + (message || ""));
+    throw new RbdInvariant(prefix + ": " + (message2 || ""));
   }
 }
 var ErrorBoundary = function(_React$Component) {
@@ -13026,11 +13026,11 @@ var patchDroppableMap = function(droppables, updated) {
 var clearUnusedPlaceholder = function clearUnusedPlaceholder2(_ref) {
   var previousImpact = _ref.previousImpact, impact = _ref.impact, droppables = _ref.droppables;
   var last = whatIsDraggedOver(previousImpact);
-  var now = whatIsDraggedOver(impact);
+  var now2 = whatIsDraggedOver(impact);
   if (!last) {
     return droppables;
   }
-  if (last === now) {
+  if (last === now2) {
     return droppables;
   }
   var lastDroppable = droppables[last];
@@ -14094,7 +14094,7 @@ var getExpiringAnnounce = function(announce) {
   var timeoutId = setTimeout(function() {
     isExpired = true;
   });
-  var result = function result2(message) {
+  var result = function result2(message2) {
     if (wasCalled) {
       process.env.NODE_ENV !== "production" ? warning$3("Announcement already made. Not making a second announcement") : void 0;
       return;
@@ -14104,7 +14104,7 @@ var getExpiringAnnounce = function(announce) {
       return;
     }
     wasCalled = true;
-    announce(message);
+    announce(message2);
     clearTimeout(timeoutId);
   };
   result.wasCalled = function() {
@@ -14411,7 +14411,7 @@ var dimensionMarshalStopper = function(marshal) {
     };
   };
 };
-var focus = function(marshal) {
+var focus$1 = function(marshal) {
   var isWatching2 = false;
   return function() {
     return function(next2) {
@@ -14494,7 +14494,7 @@ var composeEnhancers = process.env.NODE_ENV !== "production" && typeof window !=
 }) : compose;
 var createStore = function(_ref) {
   var dimensionMarshal = _ref.dimensionMarshal, focusMarshal = _ref.focusMarshal, styleMarshal = _ref.styleMarshal, getResponders = _ref.getResponders, announce = _ref.announce, autoScroller = _ref.autoScroller;
-  return createStore$1(reducer$2, composeEnhancers(applyMiddleware(style(styleMarshal), dimensionMarshalStopper(dimensionMarshal), lift$1$1(dimensionMarshal), drop$1, dropAnimationFinish, dropAnimationFlushOnScroll, pendingDrop, autoScroll(autoScroller), scrollListener, focus(focusMarshal), responders(getResponders, announce))));
+  return createStore$1(reducer$2, composeEnhancers(applyMiddleware(style(styleMarshal), dimensionMarshalStopper(dimensionMarshal), lift$1$1(dimensionMarshal), drop$1, dropAnimationFinish, dropAnimationFlushOnScroll, pendingDrop, autoScroll(autoScroller), scrollListener, focus$1(focusMarshal), responders(getResponders, announce))));
 };
 var clean$1 = function clean3() {
   return {
@@ -14871,8 +14871,8 @@ var stopAt = config.durationDampening.stopDampeningAt;
 var dampenValueByTime = function(proposedScroll, dragStartTime) {
   var startOfRange = dragStartTime;
   var endOfRange = stopAt;
-  var now = Date.now();
-  var runTime = now - startOfRange;
+  var now2 = Date.now();
+  var runTime = now2 - startOfRange;
   if (runTime >= stopAt) {
     return proposedScroll;
   }
@@ -15518,11 +15518,11 @@ function useFocusMarshal(contextId) {
   }, [tryGiveFocus]);
   var tryRecordFocus = useCallback(function tryRecordFocus2(id2) {
     recordRef.current = null;
-    var focused = document.activeElement;
-    if (!focused) {
+    var focused2 = document.activeElement;
+    if (!focused2) {
       return;
     }
-    if (focused.getAttribute(dragHandle.draggableId) !== id2) {
+    if (focused2.getAttribute(dragHandle.draggableId) !== id2) {
       return;
     }
     recordRef.current = id2;
@@ -15722,13 +15722,13 @@ function useAnnouncer(contextId) {
       });
     };
   }, [id2]);
-  var announce = useCallback(function(message) {
+  var announce = useCallback(function(message2) {
     var el2 = ref2.current;
     if (el2) {
-      el2.textContent = message;
+      el2.textContent = message2;
       return;
     }
-    process.env.NODE_ENV !== "production" ? warning$3('\n      A screen reader message was trying to be announced but it was unable to do so.\n      This can occur if you unmount your <DragDropContext /> in your onDragEnd.\n      Consider calling provided.announce() before the unmount so that the instruction will\n      not be lost for users relying on a screen reader.\n\n      Message not passed to screen reader:\n\n      "' + message + '"\n    ') : void 0;
+    process.env.NODE_ENV !== "production" ? warning$3('\n      A screen reader message was trying to be announced but it was unable to do so.\n      This can occur if you unmount your <DragDropContext /> in your onDragEnd.\n      Consider calling provided.announce() before the unmount so that the instruction will\n      not be lost for users relying on a screen reader.\n\n      Message not passed to screen reader:\n\n      "' + message2 + '"\n    ') : void 0;
   }, []);
   return announce;
 }
@@ -18677,16 +18677,16 @@ var InfiniteScroll = (
     return InfiniteScroll2;
   }(Component$1)
 );
-const inputInTable$7 = "_inputInTable_1llou_1";
-const inputHover$7 = "_inputHover_1llou_13";
-const inputFocus$7 = "_inputFocus_1llou_18";
-const inputError$7 = "_inputError_1llou_25";
-const inputWarning$7 = "_inputWarning_1llou_26";
-const inputDisabled$7 = "_inputDisabled_1llou_61";
-const hideScrollbars$7 = "_hideScrollbars_1llou_67";
+const inputInTable$8 = "_inputInTable_1llou_1";
+const inputHover$8 = "_inputHover_1llou_13";
+const inputFocus$8 = "_inputFocus_1llou_18";
+const inputError$8 = "_inputError_1llou_25";
+const inputWarning$8 = "_inputWarning_1llou_26";
+const inputDisabled$8 = "_inputDisabled_1llou_61";
+const hideScrollbars$8 = "_hideScrollbars_1llou_67";
 const header$1 = "_header_1llou_77";
 const headerTitle = "_headerTitle_1llou_77";
-const heading$2 = "_heading_1llou_78";
+const heading$3 = "_heading_1llou_78";
 const itemHeader = "_itemHeader_1llou_78";
 const narrow = "_narrow_1llou_81";
 const stickyHeader = "_stickyHeader_1llou_85";
@@ -18702,31 +18702,31 @@ const item$4 = "_item_1llou_78";
 const action = "_action_1llou_192";
 const active$3 = "_active_1llou_195";
 const indented = "_indented_1llou_202";
-const disabled$3 = "_disabled_1llou_215";
-const label$4 = "_label_1llou_226";
-const details$1 = "_details_1llou_237";
+const disabled$5 = "_disabled_1llou_215";
+const label$6 = "_label_1llou_226";
+const details$2 = "_details_1llou_237";
 const metadata = "_metadata_1llou_238";
 const itemContent = "_itemContent_1llou_246";
 const indentIcon = "_indentIcon_1llou_253";
 const expandIcon = "_expandIcon_1llou_258";
 const expanded = "_expanded_1llou_265";
-const right$3 = "_right_1llou_268";
+const right$4 = "_right_1llou_268";
 const actions = "_actions_1llou_276";
 const scrollableList = "_scrollableList_1llou_281";
 const infiniteScrollContainer = "_infiniteScrollContainer_1llou_286";
 const hideScrollbar = "_hideScrollbar_1llou_67";
 const noPointerEvents = "_noPointerEvents_1llou_303";
 const listStyles = {
-  inputInTable: inputInTable$7,
-  inputHover: inputHover$7,
-  inputFocus: inputFocus$7,
-  inputError: inputError$7,
-  inputWarning: inputWarning$7,
-  inputDisabled: inputDisabled$7,
-  hideScrollbars: hideScrollbars$7,
+  inputInTable: inputInTable$8,
+  inputHover: inputHover$8,
+  inputFocus: inputFocus$8,
+  inputError: inputError$8,
+  inputWarning: inputWarning$8,
+  inputDisabled: inputDisabled$8,
+  hideScrollbars: hideScrollbars$8,
   header: header$1,
   headerTitle,
-  heading: heading$2,
+  heading: heading$3,
   itemHeader,
   narrow,
   stickyHeader,
@@ -18742,15 +18742,15 @@ const listStyles = {
   action,
   active: active$3,
   indented,
-  disabled: disabled$3,
-  label: label$4,
-  details: details$1,
+  disabled: disabled$5,
+  label: label$6,
+  details: details$2,
   metadata,
   itemContent,
   indentIcon,
   expandIcon,
   expanded,
-  right: right$3,
+  right: right$4,
   actions,
   scrollableList,
   infiniteScrollContainer,
@@ -18785,7 +18785,7 @@ const ListHeading = forwardRef(
               onClickToggleNarrow: onToggleNarrow
             }
           ),
-          name2 && /* @__PURE__ */ jsx("div", { className: listStyles.headerTitle, children: /* @__PURE__ */ jsx(Heading$1, { top: true, marginBottom: 0, children: name2 }) }),
+          name2 && /* @__PURE__ */ jsx("div", { className: listStyles.headerTitle, children: /* @__PURE__ */ jsx(Heading$2, { top: true, marginBottom: 0, children: name2 }) }),
           /* @__PURE__ */ jsx("div", { className: listStyles.right, children: /* @__PURE__ */ jsx("div", { className: listStyles.actions, children: /* @__PURE__ */ jsx(Actions, { actions: actions2 }) }) })
         ]
       }
@@ -18976,15 +18976,15 @@ const cover = "_cover_477i5_14";
 const dimmer = "_dimmer_477i5_21";
 const content$2 = "_content_477i5_44";
 const text$1 = "_text_477i5_49";
-const details = "_details_477i5_53";
-const styles$r = {
+const details$1 = "_details_477i5_53";
+const styles$t = {
   loader,
   fullViewPortSize,
   cover,
   dimmer,
   content: content$2,
   text: text$1,
-  details
+  details: details$1
 };
 const Loader = ({
   width: width2,
@@ -19002,22 +19002,22 @@ const Loader = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cx$2(styles$r.loader, cover2 ? styles$r.cover : "", {
-        [styles$r.fullViewPortSize]: fullViewPortSize2
+      className: cx$2(styles$t.loader, cover2 ? styles$t.cover : "", {
+        [styles$t.fullViewPortSize]: fullViewPortSize2
       }),
       style: { width: width2, height: height2 },
       "data-testid": testId,
-      children: /* @__PURE__ */ jsx("div", { className: styles$r.dimmer, style: { background: background2, color: color2 }, children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsx("div", { className: styles$t.dimmer, style: { background: background2, color: color2 }, children: /* @__PURE__ */ jsxs(
         "div",
         {
-          className: styles$r.content,
+          className: styles$t.content,
           "data-testid": testId && `${testId}-content`,
           children: [
             children,
             text2 && /* @__PURE__ */ jsx(
               "div",
               {
-                className: styles$r.text,
+                className: styles$t.text,
                 "data-testid": testId && `${testId}-text`,
                 children: text2
               }
@@ -19025,7 +19025,7 @@ const Loader = ({
             details2 && /* @__PURE__ */ jsx(
               "div",
               {
-                className: styles$r.details,
+                className: styles$t.details,
                 "data-testid": testId && `${testId}-details`,
                 children: details2
               }
@@ -19208,13 +19208,13 @@ const List = ({
     }
   );
 };
-const inputInTable$6 = "_inputInTable_1okhq_1";
-const inputHover$6 = "_inputHover_1okhq_13";
-const inputFocus$6 = "_inputFocus_1okhq_18";
-const inputError$6 = "_inputError_1okhq_25";
-const inputWarning$6 = "_inputWarning_1okhq_26";
-const inputDisabled$6 = "_inputDisabled_1okhq_61";
-const hideScrollbars$6 = "_hideScrollbars_1okhq_67";
+const inputInTable$7 = "_inputInTable_1okhq_1";
+const inputHover$7 = "_inputHover_1okhq_13";
+const inputFocus$7 = "_inputFocus_1okhq_18";
+const inputError$7 = "_inputError_1okhq_25";
+const inputWarning$7 = "_inputWarning_1okhq_26";
+const inputDisabled$7 = "_inputDisabled_1okhq_61";
+const hideScrollbars$7 = "_hideScrollbars_1okhq_67";
 const container$1 = "_container_1okhq_83";
 const block$1 = "_block_1okhq_101";
 const info = "_info_1okhq_104";
@@ -19222,21 +19222,21 @@ const success = "_success_1okhq_108";
 const warning$2 = "_warning_1okhq_112";
 const error = "_error_1okhq_116";
 const content$1 = "_content_1okhq_120";
-const heading$1 = "_heading_1okhq_124";
-const icon$2 = "_icon_1okhq_131";
+const heading$2 = "_heading_1okhq_124";
+const icon$3 = "_icon_1okhq_131";
 const dismiss$1 = "_dismiss_1okhq_139";
 const absolute = "_absolute_1okhq_143";
 const legendToggle = "_legendToggle_1okhq_155";
 const detailsText = "_detailsText_1okhq_165";
 const footer$1 = "_footer_1okhq_169";
-const styles$q = {
-  inputInTable: inputInTable$6,
-  inputHover: inputHover$6,
-  inputFocus: inputFocus$6,
-  inputError: inputError$6,
-  inputWarning: inputWarning$6,
-  inputDisabled: inputDisabled$6,
-  hideScrollbars: hideScrollbars$6,
+const styles$s = {
+  inputInTable: inputInTable$7,
+  inputHover: inputHover$7,
+  inputFocus: inputFocus$7,
+  inputError: inputError$7,
+  inputWarning: inputWarning$7,
+  inputDisabled: inputDisabled$7,
+  hideScrollbars: hideScrollbars$7,
   container: container$1,
   block: block$1,
   info,
@@ -19244,8 +19244,8 @@ const styles$q = {
   warning: warning$2,
   error,
   content: content$1,
-  heading: heading$1,
-  icon: icon$2,
+  heading: heading$2,
+  icon: icon$3,
   dismiss: dismiss$1,
   absolute,
   legendToggle,
@@ -19273,9 +19273,9 @@ const Dismiss = ({
     "div",
     {
       className: cx$2(
-        styles$q.dismiss,
-        isInToast ? styles$q.absolute : "",
-        type === MessageType.INFO ? styles$q.info : type === MessageType.SUCCESS ? styles$q.success : type === MessageType.WARNING ? styles$q.warning : type === MessageType.ERROR ? styles$q.error : null
+        styles$s.dismiss,
+        isInToast ? styles$s.absolute : "",
+        type === MessageType.INFO ? styles$s.info : type === MessageType.SUCCESS ? styles$s.success : type === MessageType.WARNING ? styles$s.warning : type === MessageType.ERROR ? styles$s.error : null
       ),
       children: /* @__PURE__ */ jsx(Icon, { icon: IconType.CLOSE, onClick: onClose, testId })
     }
@@ -19294,8 +19294,8 @@ const reducer$1 = (state, action2) => {
 };
 const Details = ({ details: details2, visible, dispatch }) => {
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("div", { className: cx$2(styles$q.legendToggle), onClick: dispatch, children: visible ? "Hide details" : "Show details" }),
-    visible ? /* @__PURE__ */ jsx("div", { className: styles$q.detailsText, children: details2 }) : null
+    /* @__PURE__ */ jsx("div", { className: cx$2(styles$s.legendToggle), onClick: dispatch, children: visible ? "Hide details" : "Show details" }),
+    visible ? /* @__PURE__ */ jsx("div", { className: styles$s.detailsText, children: details2 }) : null
   ] });
 };
 const DialogIcon = ({ type }) => {
@@ -19311,7 +19311,7 @@ const DialogIcon = ({ type }) => {
       return /* @__PURE__ */ jsx(Icon, { icon: IconType.INFO, size: size2 });
   }
 };
-const Message = ({ message }) => {
+const Message = ({ message: message2 }) => {
   const {
     visible,
     type = MessageType.INFO,
@@ -19325,7 +19325,7 @@ const Message = ({ message }) => {
     onClose,
     width: width2,
     maxHeight
-  } = message;
+  } = message2;
   const initialState2 = {
     detailsVisible
   };
@@ -19334,15 +19334,15 @@ const Message = ({ message }) => {
     "div",
     {
       className: cx$2(
-        styles$q.container,
-        width2 ? styles$q.block : null,
-        type === MessageType.SUCCESS ? styles$q.success : type === MessageType.WARNING ? styles$q.warning : type === MessageType.ERROR ? styles$q.error : styles$q.info
+        styles$s.container,
+        width2 ? styles$s.block : null,
+        type === MessageType.SUCCESS ? styles$s.success : type === MessageType.WARNING ? styles$s.warning : type === MessageType.ERROR ? styles$s.error : styles$s.info
       ),
       style: { width: width2, maxHeight },
       children: [
-        /* @__PURE__ */ jsx("div", { children: icon2 ? /* @__PURE__ */ jsx("div", { className: styles$q.icon, children: /* @__PURE__ */ jsx(DialogIcon, { type }) }) : null }),
-        /* @__PURE__ */ jsxs("div", { className: styles$q.content, children: [
-          heading2 ? /* @__PURE__ */ jsx("div", { className: styles$q.heading, children: heading2 }) : null,
+        /* @__PURE__ */ jsx("div", { children: icon2 ? /* @__PURE__ */ jsx("div", { className: styles$s.icon, children: /* @__PURE__ */ jsx(DialogIcon, { type }) }) : null }),
+        /* @__PURE__ */ jsxs("div", { className: styles$s.content, children: [
+          heading2 ? /* @__PURE__ */ jsx("div", { className: styles$s.heading, children: heading2 }) : null,
           /* @__PURE__ */ jsx("div", { children: content2 }),
           details2 ? /* @__PURE__ */ jsx(
             Details,
@@ -19352,7 +19352,7 @@ const Message = ({ message }) => {
               dispatch: () => dispatch({ type: MessageToggle.TOGGLE_DETAILS })
             }
           ) : null,
-          !!footer2 && /* @__PURE__ */ jsx("div", { className: styles$q.footer, children: footer2 })
+          !!footer2 && /* @__PURE__ */ jsx("div", { className: styles$s.footer, children: footer2 })
         ] }),
         withDismiss ? /* @__PURE__ */ jsx(Dismiss, { type, onClose }) : null
       ]
@@ -19384,7 +19384,7 @@ const wrapper$2 = "_wrapper_sb0hc_1";
 const contentContainer = "_contentContainer_sb0hc_15";
 const centered = "_centered_sb0hc_24";
 const newLine = "_newLine_sb0hc_28";
-const styles$p = {
+const styles$r = {
   wrapper: wrapper$2,
   contentContainer,
   centered,
@@ -19404,12 +19404,12 @@ const Wrapper = ({ children }) => {
       }
     }
   }, []);
-  return /* @__PURE__ */ jsx("div", { ref: wrapperRef, tabIndex: -1, className: cx$2(styles$p.wrapper), children });
+  return /* @__PURE__ */ jsx("div", { ref: wrapperRef, tabIndex: -1, className: cx$2(styles$r.wrapper), children });
 };
 const Content$2 = ({ children, width: width2, centered: centered2 }) => /* @__PURE__ */ jsx(
   "div",
   {
-    className: cx$2(styles$p.contentContainer, centered2 ? styles$p.centered : ""),
+    className: cx$2(styles$r.contentContainer, centered2 ? styles$r.centered : ""),
     style: { maxWidth: width2 },
     children
   }
@@ -19457,36 +19457,36 @@ const Modal = ({
 const menu$1 = "_menu_12x4u_1";
 const header = "_header_12x4u_11";
 const item$3 = "_item_12x4u_27";
-const heading = "_heading_12x4u_32";
-const styles$o = {
+const heading$1 = "_heading_12x4u_32";
+const styles$q = {
   menu: menu$1,
   header,
   item: item$3,
-  heading
+  heading: heading$1
 };
-const Option = ({
+const Option$1 = ({
   option: option2,
   onChange
 }) => {
   const { key: key2, label: label2, selected: selected2 } = option2;
-  return /* @__PURE__ */ jsx("div", { className: styles$o.item, children: /* @__PURE__ */ jsx(CheckBox, { label: label2, noMargin: true, checked: selected2, onChange }) }, key2);
+  return /* @__PURE__ */ jsx("div", { className: styles$q.item, children: /* @__PURE__ */ jsx(CheckBox, { label: label2, noMargin: true, checked: selected2, onChange }) }, key2);
 };
-const Heading = ({ label: label2 }) => /* @__PURE__ */ jsx("div", { className: styles$o.heading, children: label2 });
+const Heading$1 = ({ label: label2 }) => /* @__PURE__ */ jsx("div", { className: styles$q.heading, children: label2 });
 var DropdownType = /* @__PURE__ */ ((DropdownType2) => {
   DropdownType2["HEADING"] = "Heading";
   DropdownType2["DIVIDER"] = "Divider";
   DropdownType2["DEFAULT"] = "Default";
   return DropdownType2;
 })(DropdownType || {});
-const Layer = ({
+const Layer$1 = ({
   options,
   onChangeOptions,
   showHeader,
   maxHeight
 }) => {
-  return /* @__PURE__ */ jsxs("div", { className: cx$2("menu", styles$o.menu), style: { maxHeight }, children: [
+  return /* @__PURE__ */ jsxs("div", { className: cx$2("menu", styles$q.menu), style: { maxHeight }, children: [
     showHeader && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-      /* @__PURE__ */ jsxs("div", { className: styles$o.header, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles$q.header, children: [
         /* @__PURE__ */ jsx(
           "a",
           {
@@ -19532,12 +19532,12 @@ const Layer = ({
     options.map((option2, index2) => {
       switch (option2.type) {
         case DropdownType.HEADING:
-          return /* @__PURE__ */ jsx(Heading, { label: option2.label }, index2);
+          return /* @__PURE__ */ jsx(Heading$1, { label: option2.label }, index2);
         case DropdownType.DIVIDER:
           return /* @__PURE__ */ jsx(Divider, { margin: 0 }, index2);
         default:
           return /* @__PURE__ */ jsx(
-            Option,
+            Option$1,
             {
               option: option2,
               onChange: (evt) => {
@@ -19572,7 +19572,7 @@ const OptionDropdown = ({
         trigger: TriggerType.DROP_DOWN_BUTTON,
         possiblePlacements: ["top-start", "bottom-start"],
         sections: /* @__PURE__ */ jsx(
-          Layer,
+          Layer$1,
           {
             options,
             onChangeOptions: (evt, nextOptions) => {
@@ -19591,7 +19591,7 @@ const OptionDropdown = ({
 };
 const page = "_page_beskc_1";
 const scroll$1 = "_scroll_beskc_23";
-const styles$n = {
+const styles$p = {
   page,
   scroll: scroll$1
 };
@@ -19606,43 +19606,43 @@ const Page = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cx$2(styles$n.page, scroll3 ? styles$n.scroll : ""),
+      className: cx$2(styles$p.page, scroll3 ? styles$p.scroll : ""),
       style: { left: left2, padding: padding2, top: top2 },
       children
     }
   );
 };
-const inputInTable$5 = "_inputInTable_sl2b5_1";
-const inputHover$5 = "_inputHover_sl2b5_13";
-const inputFocus$5 = "_inputFocus_sl2b5_18";
-const inputError$5 = "_inputError_sl2b5_25";
-const inputWarning$5 = "_inputWarning_sl2b5_26";
-const inputDisabled$5 = "_inputDisabled_sl2b5_61";
-const hideScrollbars$5 = "_hideScrollbars_sl2b5_67";
+const inputInTable$6 = "_inputInTable_sl2b5_1";
+const inputHover$6 = "_inputHover_sl2b5_13";
+const inputFocus$6 = "_inputFocus_sl2b5_18";
+const inputError$6 = "_inputError_sl2b5_25";
+const inputWarning$6 = "_inputWarning_sl2b5_26";
+const inputDisabled$6 = "_inputDisabled_sl2b5_61";
+const hideScrollbars$6 = "_hideScrollbars_sl2b5_67";
 const select = "_select_sl2b5_77";
-const isInTable$1 = "_isInTable_sl2b5_121";
+const isInTable$2 = "_isInTable_sl2b5_121";
 const unSelected = "_unSelected_sl2b5_133";
-const small$4 = "_small_sl2b5_174";
-const right$2 = "_right_sl2b5_182";
-const groupOrderFirst = "_groupOrderFirst_sl2b5_193";
-const groupOrderMiddle = "_groupOrderMiddle_sl2b5_194";
-const groupOrderLast = "_groupOrderLast_sl2b5_198";
-const styles$m = {
-  inputInTable: inputInTable$5,
-  inputHover: inputHover$5,
-  inputFocus: inputFocus$5,
-  inputError: inputError$5,
-  inputWarning: inputWarning$5,
-  inputDisabled: inputDisabled$5,
-  hideScrollbars: hideScrollbars$5,
+const small$6 = "_small_sl2b5_174";
+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 = {
+  inputInTable: inputInTable$6,
+  inputHover: inputHover$6,
+  inputFocus: inputFocus$6,
+  inputError: inputError$6,
+  inputWarning: inputWarning$6,
+  inputDisabled: inputDisabled$6,
+  hideScrollbars: hideScrollbars$6,
   select,
-  isInTable: isInTable$1,
+  isInTable: isInTable$2,
   unSelected,
-  small: small$4,
-  right: right$2,
-  groupOrderFirst,
-  groupOrderMiddle,
-  groupOrderLast
+  small: small$6,
+  right: right$3,
+  groupOrderFirst: groupOrderFirst$1,
+  groupOrderMiddle: groupOrderMiddle$1,
+  groupOrderLast: groupOrderLast$1
 };
 const NativeSelect = ({
   disabled: disabled2 = false,
@@ -19710,11 +19710,11 @@ const NativeSelect = ({
     if (groupOrder) {
       switch (groupOrder) {
         case GroupOrder.FIRST:
-          return styles$m.groupOrderFirst;
+          return styles$o.groupOrderFirst;
         case GroupOrder.LAST:
-          return styles$m.groupOrderLast;
+          return styles$o.groupOrderLast;
         default:
-          return styles$m.groupOrderMiddle;
+          return styles$o.groupOrderMiddle;
       }
     }
     return "";
@@ -19732,11 +19732,11 @@ const NativeSelect = ({
         "select",
         {
           className: cx$2(
-            styles$m.select,
-            isUnselected ? styles$m.unSelected : "",
-            right2 ? styles$m.right : "",
-            small2 ? styles$m.small : "",
-            isInTable2 ? styles$m.isInTable : "",
+            styles$o.select,
+            isUnselected ? styles$o.unSelected : "",
+            right2 ? styles$o.right : "",
+            small2 ? styles$o.small : "",
+            isInTable2 ? styles$o.isInTable : "",
             order2
           ),
           style: {
@@ -19988,6 +19988,1018 @@ const useWindowWidth = () => {
   }, []);
   return width2;
 };
+function _assertThisInitialized(e2) {
+  if (void 0 === e2) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  return e2;
+}
+var hasNativePerformanceNow = typeof performance === "object" && typeof performance.now === "function";
+var now = hasNativePerformanceNow ? function() {
+  return performance.now();
+} : function() {
+  return Date.now();
+};
+function cancelTimeout(timeoutID) {
+  cancelAnimationFrame(timeoutID.id);
+}
+function requestTimeout(callback, delay) {
+  var start3 = now();
+  function tick() {
+    if (now() - start3 >= delay) {
+      callback.call(null);
+    } else {
+      timeoutID.id = requestAnimationFrame(tick);
+    }
+  }
+  var timeoutID = {
+    id: requestAnimationFrame(tick)
+  };
+  return timeoutID;
+}
+var size$1 = -1;
+function getScrollbarSize(recalculate) {
+  if (recalculate === void 0) {
+    recalculate = false;
+  }
+  if (size$1 === -1 || recalculate) {
+    var div = document.createElement("div");
+    var style2 = div.style;
+    style2.width = "50px";
+    style2.height = "50px";
+    style2.overflow = "scroll";
+    document.body.appendChild(div);
+    size$1 = div.offsetWidth - div.clientWidth;
+    document.body.removeChild(div);
+  }
+  return size$1;
+}
+var cachedRTLResult = null;
+function getRTLOffsetType(recalculate) {
+  if (recalculate === void 0) {
+    recalculate = false;
+  }
+  if (cachedRTLResult === null || recalculate) {
+    var outerDiv = document.createElement("div");
+    var outerStyle = outerDiv.style;
+    outerStyle.width = "50px";
+    outerStyle.height = "50px";
+    outerStyle.overflow = "scroll";
+    outerStyle.direction = "rtl";
+    var innerDiv = document.createElement("div");
+    var innerStyle = innerDiv.style;
+    innerStyle.width = "100px";
+    innerStyle.height = "100px";
+    outerDiv.appendChild(innerDiv);
+    document.body.appendChild(outerDiv);
+    if (outerDiv.scrollLeft > 0) {
+      cachedRTLResult = "positive-descending";
+    } else {
+      outerDiv.scrollLeft = 1;
+      if (outerDiv.scrollLeft === 0) {
+        cachedRTLResult = "negative";
+      } else {
+        cachedRTLResult = "positive-ascending";
+      }
+    }
+    document.body.removeChild(outerDiv);
+    return cachedRTLResult;
+  }
+  return cachedRTLResult;
+}
+if (process.env.NODE_ENV !== "production") ;
+var IS_SCROLLING_DEBOUNCE_INTERVAL$1 = 150;
+var defaultItemKey$1 = function defaultItemKey(index2, data) {
+  return index2;
+};
+var devWarningsDirection = null;
+var devWarningsTagName$1 = null;
+if (process.env.NODE_ENV !== "production") {
+  if (typeof window !== "undefined" && typeof window.WeakSet !== "undefined") {
+    devWarningsDirection = /* @__PURE__ */ new WeakSet();
+    devWarningsTagName$1 = /* @__PURE__ */ new WeakSet();
+  }
+}
+function createListComponent(_ref) {
+  var _class;
+  var getItemOffset2 = _ref.getItemOffset, getEstimatedTotalSize2 = _ref.getEstimatedTotalSize, getItemSize2 = _ref.getItemSize, getOffsetForIndexAndAlignment2 = _ref.getOffsetForIndexAndAlignment, getStartIndexForOffset2 = _ref.getStartIndexForOffset, getStopIndexForStartIndex2 = _ref.getStopIndexForStartIndex, initInstanceProps2 = _ref.initInstanceProps, shouldResetStyleCacheOnItemSizeChange = _ref.shouldResetStyleCacheOnItemSizeChange, validateProps2 = _ref.validateProps;
+  return _class = /* @__PURE__ */ function(_PureComponent) {
+    _inheritsLoose$3(List2, _PureComponent);
+    function List2(props) {
+      var _this;
+      _this = _PureComponent.call(this, props) || this;
+      _this._instanceProps = initInstanceProps2(_this.props, _assertThisInitialized(_this));
+      _this._outerRef = void 0;
+      _this._resetIsScrollingTimeoutId = null;
+      _this.state = {
+        instance: _assertThisInitialized(_this),
+        isScrolling: false,
+        scrollDirection: "forward",
+        scrollOffset: typeof _this.props.initialScrollOffset === "number" ? _this.props.initialScrollOffset : 0,
+        scrollUpdateWasRequested: false
+      };
+      _this._callOnItemsRendered = void 0;
+      _this._callOnItemsRendered = memoizeOne(function(overscanStartIndex, overscanStopIndex, visibleStartIndex, visibleStopIndex) {
+        return _this.props.onItemsRendered({
+          overscanStartIndex,
+          overscanStopIndex,
+          visibleStartIndex,
+          visibleStopIndex
+        });
+      });
+      _this._callOnScroll = void 0;
+      _this._callOnScroll = memoizeOne(function(scrollDirection, scrollOffset, scrollUpdateWasRequested) {
+        return _this.props.onScroll({
+          scrollDirection,
+          scrollOffset,
+          scrollUpdateWasRequested
+        });
+      });
+      _this._getItemStyle = void 0;
+      _this._getItemStyle = function(index2) {
+        var _this$props = _this.props, direction = _this$props.direction, itemSize = _this$props.itemSize, layout = _this$props.layout;
+        var itemStyleCache = _this._getItemStyleCache(shouldResetStyleCacheOnItemSizeChange && itemSize, shouldResetStyleCacheOnItemSizeChange && layout, shouldResetStyleCacheOnItemSizeChange && direction);
+        var style2;
+        if (itemStyleCache.hasOwnProperty(index2)) {
+          style2 = itemStyleCache[index2];
+        } else {
+          var _offset = getItemOffset2(_this.props, index2, _this._instanceProps);
+          var size2 = getItemSize2(_this.props, index2, _this._instanceProps);
+          var isHorizontal = direction === "horizontal" || layout === "horizontal";
+          var isRtl = direction === "rtl";
+          var offsetHorizontal = isHorizontal ? _offset : 0;
+          itemStyleCache[index2] = style2 = {
+            position: "absolute",
+            left: isRtl ? void 0 : offsetHorizontal,
+            right: isRtl ? offsetHorizontal : void 0,
+            top: !isHorizontal ? _offset : 0,
+            height: !isHorizontal ? size2 : "100%",
+            width: isHorizontal ? size2 : "100%"
+          };
+        }
+        return style2;
+      };
+      _this._getItemStyleCache = void 0;
+      _this._getItemStyleCache = memoizeOne(function(_2, __, ___) {
+        return {};
+      });
+      _this._onScrollHorizontal = function(event) {
+        var _event$currentTarget = event.currentTarget, clientWidth = _event$currentTarget.clientWidth, scrollLeft = _event$currentTarget.scrollLeft, scrollWidth = _event$currentTarget.scrollWidth;
+        _this.setState(function(prevState) {
+          if (prevState.scrollOffset === scrollLeft) {
+            return null;
+          }
+          var direction = _this.props.direction;
+          var scrollOffset = scrollLeft;
+          if (direction === "rtl") {
+            switch (getRTLOffsetType()) {
+              case "negative":
+                scrollOffset = -scrollLeft;
+                break;
+              case "positive-descending":
+                scrollOffset = scrollWidth - clientWidth - scrollLeft;
+                break;
+            }
+          }
+          scrollOffset = Math.max(0, Math.min(scrollOffset, scrollWidth - clientWidth));
+          return {
+            isScrolling: true,
+            scrollDirection: prevState.scrollOffset < scrollOffset ? "forward" : "backward",
+            scrollOffset,
+            scrollUpdateWasRequested: false
+          };
+        }, _this._resetIsScrollingDebounced);
+      };
+      _this._onScrollVertical = function(event) {
+        var _event$currentTarget2 = event.currentTarget, clientHeight = _event$currentTarget2.clientHeight, scrollHeight = _event$currentTarget2.scrollHeight, scrollTop = _event$currentTarget2.scrollTop;
+        _this.setState(function(prevState) {
+          if (prevState.scrollOffset === scrollTop) {
+            return null;
+          }
+          var scrollOffset = Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight));
+          return {
+            isScrolling: true,
+            scrollDirection: prevState.scrollOffset < scrollOffset ? "forward" : "backward",
+            scrollOffset,
+            scrollUpdateWasRequested: false
+          };
+        }, _this._resetIsScrollingDebounced);
+      };
+      _this._outerRefSetter = function(ref2) {
+        var outerRef = _this.props.outerRef;
+        _this._outerRef = ref2;
+        if (typeof outerRef === "function") {
+          outerRef(ref2);
+        } else if (outerRef != null && typeof outerRef === "object" && outerRef.hasOwnProperty("current")) {
+          outerRef.current = ref2;
+        }
+      };
+      _this._resetIsScrollingDebounced = function() {
+        if (_this._resetIsScrollingTimeoutId !== null) {
+          cancelTimeout(_this._resetIsScrollingTimeoutId);
+        }
+        _this._resetIsScrollingTimeoutId = requestTimeout(_this._resetIsScrolling, IS_SCROLLING_DEBOUNCE_INTERVAL$1);
+      };
+      _this._resetIsScrolling = function() {
+        _this._resetIsScrollingTimeoutId = null;
+        _this.setState({
+          isScrolling: false
+        }, function() {
+          _this._getItemStyleCache(-1, null);
+        });
+      };
+      return _this;
+    }
+    List2.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
+      validateSharedProps$1(nextProps, prevState);
+      validateProps2(nextProps);
+      return null;
+    };
+    var _proto = List2.prototype;
+    _proto.scrollTo = function scrollTo(scrollOffset) {
+      scrollOffset = Math.max(0, scrollOffset);
+      this.setState(function(prevState) {
+        if (prevState.scrollOffset === scrollOffset) {
+          return null;
+        }
+        return {
+          scrollDirection: prevState.scrollOffset < scrollOffset ? "forward" : "backward",
+          scrollOffset,
+          scrollUpdateWasRequested: true
+        };
+      }, this._resetIsScrollingDebounced);
+    };
+    _proto.scrollToItem = function scrollToItem(index2, align) {
+      if (align === void 0) {
+        align = "auto";
+      }
+      var _this$props2 = this.props, itemCount = _this$props2.itemCount, layout = _this$props2.layout;
+      var scrollOffset = this.state.scrollOffset;
+      index2 = Math.max(0, Math.min(index2, itemCount - 1));
+      var scrollbarSize = 0;
+      if (this._outerRef) {
+        var outerRef = this._outerRef;
+        if (layout === "vertical") {
+          scrollbarSize = outerRef.scrollWidth > outerRef.clientWidth ? getScrollbarSize() : 0;
+        } else {
+          scrollbarSize = outerRef.scrollHeight > outerRef.clientHeight ? getScrollbarSize() : 0;
+        }
+      }
+      this.scrollTo(getOffsetForIndexAndAlignment2(this.props, index2, align, scrollOffset, this._instanceProps, scrollbarSize));
+    };
+    _proto.componentDidMount = function componentDidMount() {
+      var _this$props3 = this.props, direction = _this$props3.direction, initialScrollOffset = _this$props3.initialScrollOffset, layout = _this$props3.layout;
+      if (typeof initialScrollOffset === "number" && this._outerRef != null) {
+        var outerRef = this._outerRef;
+        if (direction === "horizontal" || layout === "horizontal") {
+          outerRef.scrollLeft = initialScrollOffset;
+        } else {
+          outerRef.scrollTop = initialScrollOffset;
+        }
+      }
+      this._callPropsCallbacks();
+    };
+    _proto.componentDidUpdate = function componentDidUpdate() {
+      var _this$props4 = this.props, direction = _this$props4.direction, layout = _this$props4.layout;
+      var _this$state = this.state, scrollOffset = _this$state.scrollOffset, scrollUpdateWasRequested = _this$state.scrollUpdateWasRequested;
+      if (scrollUpdateWasRequested && this._outerRef != null) {
+        var outerRef = this._outerRef;
+        if (direction === "horizontal" || layout === "horizontal") {
+          if (direction === "rtl") {
+            switch (getRTLOffsetType()) {
+              case "negative":
+                outerRef.scrollLeft = -scrollOffset;
+                break;
+              case "positive-ascending":
+                outerRef.scrollLeft = scrollOffset;
+                break;
+              default:
+                var clientWidth = outerRef.clientWidth, scrollWidth = outerRef.scrollWidth;
+                outerRef.scrollLeft = scrollWidth - clientWidth - scrollOffset;
+                break;
+            }
+          } else {
+            outerRef.scrollLeft = scrollOffset;
+          }
+        } else {
+          outerRef.scrollTop = scrollOffset;
+        }
+      }
+      this._callPropsCallbacks();
+    };
+    _proto.componentWillUnmount = function componentWillUnmount() {
+      if (this._resetIsScrollingTimeoutId !== null) {
+        cancelTimeout(this._resetIsScrollingTimeoutId);
+      }
+    };
+    _proto.render = function render2() {
+      var _this$props5 = this.props, children = _this$props5.children, className = _this$props5.className, direction = _this$props5.direction, height2 = _this$props5.height, innerRef = _this$props5.innerRef, innerElementType = _this$props5.innerElementType, innerTagName = _this$props5.innerTagName, itemCount = _this$props5.itemCount, itemData = _this$props5.itemData, _this$props5$itemKey = _this$props5.itemKey, itemKey = _this$props5$itemKey === void 0 ? defaultItemKey$1 : _this$props5$itemKey, layout = _this$props5.layout, outerElementType = _this$props5.outerElementType, outerTagName = _this$props5.outerTagName, style2 = _this$props5.style, useIsScrolling = _this$props5.useIsScrolling, width2 = _this$props5.width;
+      var isScrolling = this.state.isScrolling;
+      var isHorizontal = direction === "horizontal" || layout === "horizontal";
+      var onScroll = isHorizontal ? this._onScrollHorizontal : this._onScrollVertical;
+      var _this$_getRangeToRend = this._getRangeToRender(), startIndex = _this$_getRangeToRend[0], stopIndex = _this$_getRangeToRend[1];
+      var items = [];
+      if (itemCount > 0) {
+        for (var _index = startIndex; _index <= stopIndex; _index++) {
+          items.push(createElement(children, {
+            data: itemData,
+            key: itemKey(_index, itemData),
+            index: _index,
+            isScrolling: useIsScrolling ? isScrolling : void 0,
+            style: this._getItemStyle(_index)
+          }));
+        }
+      }
+      var estimatedTotalSize = getEstimatedTotalSize2(this.props, this._instanceProps);
+      return createElement(outerElementType || outerTagName || "div", {
+        className,
+        onScroll,
+        ref: this._outerRefSetter,
+        style: _extends$4({
+          position: "relative",
+          height: height2,
+          width: width2,
+          overflow: "auto",
+          WebkitOverflowScrolling: "touch",
+          willChange: "transform",
+          direction
+        }, style2)
+      }, createElement(innerElementType || innerTagName || "div", {
+        children: items,
+        ref: innerRef,
+        style: {
+          height: isHorizontal ? "100%" : estimatedTotalSize,
+          pointerEvents: isScrolling ? "none" : void 0,
+          width: isHorizontal ? estimatedTotalSize : "100%"
+        }
+      }));
+    };
+    _proto._callPropsCallbacks = function _callPropsCallbacks() {
+      if (typeof this.props.onItemsRendered === "function") {
+        var itemCount = this.props.itemCount;
+        if (itemCount > 0) {
+          var _this$_getRangeToRend2 = this._getRangeToRender(), _overscanStartIndex = _this$_getRangeToRend2[0], _overscanStopIndex = _this$_getRangeToRend2[1], _visibleStartIndex = _this$_getRangeToRend2[2], _visibleStopIndex = _this$_getRangeToRend2[3];
+          this._callOnItemsRendered(_overscanStartIndex, _overscanStopIndex, _visibleStartIndex, _visibleStopIndex);
+        }
+      }
+      if (typeof this.props.onScroll === "function") {
+        var _this$state2 = this.state, _scrollDirection = _this$state2.scrollDirection, _scrollOffset = _this$state2.scrollOffset, _scrollUpdateWasRequested = _this$state2.scrollUpdateWasRequested;
+        this._callOnScroll(_scrollDirection, _scrollOffset, _scrollUpdateWasRequested);
+      }
+    };
+    _proto._getRangeToRender = function _getRangeToRender() {
+      var _this$props6 = this.props, itemCount = _this$props6.itemCount, overscanCount = _this$props6.overscanCount;
+      var _this$state3 = this.state, isScrolling = _this$state3.isScrolling, scrollDirection = _this$state3.scrollDirection, scrollOffset = _this$state3.scrollOffset;
+      if (itemCount === 0) {
+        return [0, 0, 0, 0];
+      }
+      var startIndex = getStartIndexForOffset2(this.props, scrollOffset, this._instanceProps);
+      var stopIndex = getStopIndexForStartIndex2(this.props, startIndex, scrollOffset, this._instanceProps);
+      var overscanBackward = !isScrolling || scrollDirection === "backward" ? Math.max(1, overscanCount) : 1;
+      var overscanForward = !isScrolling || scrollDirection === "forward" ? Math.max(1, overscanCount) : 1;
+      return [Math.max(0, startIndex - overscanBackward), Math.max(0, Math.min(itemCount - 1, stopIndex + overscanForward)), startIndex, stopIndex];
+    };
+    return List2;
+  }(PureComponent), _class.defaultProps = {
+    direction: "ltr",
+    itemData: void 0,
+    layout: "vertical",
+    overscanCount: 2,
+    useIsScrolling: false
+  }, _class;
+}
+var validateSharedProps$1 = function validateSharedProps(_ref2, _ref3) {
+  var children = _ref2.children, direction = _ref2.direction, height2 = _ref2.height, layout = _ref2.layout, innerTagName = _ref2.innerTagName, outerTagName = _ref2.outerTagName, width2 = _ref2.width;
+  var instance = _ref3.instance;
+  if (process.env.NODE_ENV !== "production") {
+    if (innerTagName != null || outerTagName != null) {
+      if (devWarningsTagName$1 && !devWarningsTagName$1.has(instance)) {
+        devWarningsTagName$1.add(instance);
+        console.warn("The innerTagName and outerTagName props have been deprecated. Please use the innerElementType and outerElementType props instead.");
+      }
+    }
+    var isHorizontal = direction === "horizontal" || layout === "horizontal";
+    switch (direction) {
+      case "horizontal":
+      case "vertical":
+        if (devWarningsDirection && !devWarningsDirection.has(instance)) {
+          devWarningsDirection.add(instance);
+          console.warn('The direction prop should be either "ltr" (default) or "rtl". Please use the layout prop to specify "vertical" (default) or "horizontal" orientation.');
+        }
+        break;
+      case "ltr":
+      case "rtl":
+        break;
+      default:
+        throw Error('An invalid "direction" prop has been specified. Value should be either "ltr" or "rtl". ' + ('"' + direction + '" was specified.'));
+    }
+    switch (layout) {
+      case "horizontal":
+      case "vertical":
+        break;
+      default:
+        throw Error('An invalid "layout" prop has been specified. Value should be either "horizontal" or "vertical". ' + ('"' + layout + '" was specified.'));
+    }
+    if (children == null) {
+      throw Error('An invalid "children" prop has been specified. Value should be a React component. ' + ('"' + (children === null ? "null" : typeof children) + '" was specified.'));
+    }
+    if (isHorizontal && typeof width2 !== "number") {
+      throw Error('An invalid "width" prop has been specified. Horizontal lists must specify a number for width. ' + ('"' + (width2 === null ? "null" : typeof width2) + '" was specified.'));
+    } else if (!isHorizontal && typeof height2 !== "number") {
+      throw Error('An invalid "height" prop has been specified. Vertical lists must specify a number for height. ' + ('"' + (height2 === null ? "null" : typeof height2) + '" was specified.'));
+    }
+  }
+};
+var FixedSizeList = /* @__PURE__ */ createListComponent({
+  getItemOffset: function getItemOffset(_ref, index2) {
+    var itemSize = _ref.itemSize;
+    return index2 * itemSize;
+  },
+  getItemSize: function getItemSize(_ref2, index2) {
+    var itemSize = _ref2.itemSize;
+    return itemSize;
+  },
+  getEstimatedTotalSize: function getEstimatedTotalSize(_ref3) {
+    var itemCount = _ref3.itemCount, itemSize = _ref3.itemSize;
+    return itemSize * itemCount;
+  },
+  getOffsetForIndexAndAlignment: function getOffsetForIndexAndAlignment(_ref4, index2, align, scrollOffset, instanceProps, scrollbarSize) {
+    var direction = _ref4.direction, height2 = _ref4.height, itemCount = _ref4.itemCount, itemSize = _ref4.itemSize, layout = _ref4.layout, width2 = _ref4.width;
+    var isHorizontal = direction === "horizontal" || layout === "horizontal";
+    var size2 = isHorizontal ? width2 : height2;
+    var lastItemOffset = Math.max(0, itemCount * itemSize - size2);
+    var maxOffset = Math.min(lastItemOffset, index2 * itemSize);
+    var minOffset = Math.max(0, index2 * itemSize - size2 + itemSize + scrollbarSize);
+    if (align === "smart") {
+      if (scrollOffset >= minOffset - size2 && scrollOffset <= maxOffset + size2) {
+        align = "auto";
+      } else {
+        align = "center";
+      }
+    }
+    switch (align) {
+      case "start":
+        return maxOffset;
+      case "end":
+        return minOffset;
+      case "center": {
+        var middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2);
+        if (middleOffset < Math.ceil(size2 / 2)) {
+          return 0;
+        } else if (middleOffset > lastItemOffset + Math.floor(size2 / 2)) {
+          return lastItemOffset;
+        } else {
+          return middleOffset;
+        }
+      }
+      case "auto":
+      default:
+        if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
+          return scrollOffset;
+        } else if (scrollOffset < minOffset) {
+          return minOffset;
+        } else {
+          return maxOffset;
+        }
+    }
+  },
+  getStartIndexForOffset: function getStartIndexForOffset(_ref5, offset3) {
+    var itemCount = _ref5.itemCount, itemSize = _ref5.itemSize;
+    return Math.max(0, Math.min(itemCount - 1, Math.floor(offset3 / itemSize)));
+  },
+  getStopIndexForStartIndex: function getStopIndexForStartIndex(_ref6, startIndex, scrollOffset) {
+    var direction = _ref6.direction, height2 = _ref6.height, itemCount = _ref6.itemCount, itemSize = _ref6.itemSize, layout = _ref6.layout, width2 = _ref6.width;
+    var isHorizontal = direction === "horizontal" || layout === "horizontal";
+    var offset3 = startIndex * itemSize;
+    var size2 = isHorizontal ? width2 : height2;
+    var numVisibleItems = Math.ceil((size2 + scrollOffset - offset3) / itemSize);
+    return Math.max(0, Math.min(
+      itemCount - 1,
+      startIndex + numVisibleItems - 1
+      // -1 is because stop index is inclusive
+    ));
+  },
+  initInstanceProps: function initInstanceProps(props) {
+  },
+  shouldResetStyleCacheOnItemSizeChange: true,
+  validateProps: function validateProps(_ref7) {
+    var itemSize = _ref7.itemSize;
+    if (process.env.NODE_ENV !== "production") {
+      if (typeof itemSize !== "number") {
+        throw Error('An invalid "itemSize" prop has been specified. Value should be a number. ' + ('"' + (itemSize === null ? "null" : typeof itemSize) + '" was specified.'));
+      }
+    }
+  }
+});
+const layerContainer = "_layerContainer_dw2pp_1";
+const layer = "_layer_dw2pp_1";
+const small$5 = "_small_dw2pp_23";
+const heading = "_heading_dw2pp_26";
+const option = "_option_dw2pp_27";
+const message = "_message_dw2pp_28";
+const focused = "_focused_dw2pp_64";
+const selected = "_selected_dw2pp_68";
+const disabled$4 = "_disabled_dw2pp_71";
+const check = "_check_dw2pp_75";
+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 = {
+  layerContainer,
+  layer,
+  small: small$5,
+  heading,
+  option,
+  message,
+  focused,
+  selected,
+  disabled: disabled$4,
+  check,
+  optionContent,
+  label: label$5,
+  icon: icon$2,
+  details
+};
+const Heading = ({ label: label2 }) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      onClick: (evt) => evt.stopPropagation(),
+      className: styles$n.heading,
+      children: label2
+    }
+  );
+};
+const Option = ({
+  details: details2,
+  label: label2,
+  icon: icon2,
+  disabled: disabled2 = false,
+  selected: selected2 = false,
+  focused: focused2 = false,
+  onSelectOption,
+  actions: actions2,
+  closeLayer,
+  testId
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx$2(
+        styles$n.option,
+        disabled2 ? styles$n.disabled : "",
+        selected2 ? styles$n.selected : "",
+        focused2 ? styles$n.focused : ""
+      ),
+      onClick: !disabled2 && onSelectOption ? onSelectOption : void 0,
+      "data-testid": testId,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: styles$n.optionContent, children: /* @__PURE__ */ jsxs("span", { className: styles$n.label, title: label2, children: [
+          label2,
+          icon2 && /* @__PURE__ */ jsx("span", { className: styles$n.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 })
+      ]
+    }
+  );
+};
+const Section = ({
+  section: section2,
+  selected: selected2,
+  focused: focused2,
+  onSelectOption,
+  closeLayer
+}) => {
+  const disabledContext = useContext(DisabledContext);
+  switch (section2.type) {
+    case MenuType.HEADING:
+      return /* @__PURE__ */ jsx(Heading, { label: section2.label });
+    case MenuType.OPTION:
+    default:
+      return /* @__PURE__ */ jsx(
+        Option,
+        {
+          closeLayer,
+          actions: section2.actions,
+          label: section2.label,
+          details: section2.details,
+          icon: section2.icon,
+          disabled: section2.disabled || disabledContext,
+          selected: selected2,
+          focused: focused2,
+          onSelectOption,
+          testId: section2.testId
+        }
+      );
+  }
+};
+const getTextWidth = (text2, font) => {
+  const element = document.createElement("canvas");
+  const context2 = element.getContext("2d");
+  if (!context2) {
+    return 0;
+  }
+  context2.font = font;
+  return context2.measureText(text2).width;
+};
+const FONT_SIZE = "13px";
+const FONT_SIZE_SMALL = "12px";
+const FONT_FAMILY = "Roobert";
+const FONT_FAMILY_FALLBACK = "sans-serif";
+const PADDING = 12;
+const PADDING_SMALL = 8;
+const TOGGLE_SIZE = 30;
+const TOGGLE_SIZE_SMALL = 24;
+const TAG_PADDING = 5;
+const TAG_PADDING_SMALL = 3;
+const TAG_BORDER_WIDTH = 1;
+const TAG_MARGIN = 2;
+const MAX_OPTIONS_LENGTH = 10;
+const getFont = (small2 = false, isFontLoaded = false) => {
+  const fontSize = small2 ? FONT_SIZE_SMALL : FONT_SIZE;
+  const fontFamily = isFontLoaded ? FONT_FAMILY : FONT_FAMILY_FALLBACK;
+  return `${fontSize} ${fontFamily}`;
+};
+const getExtraOptionWidth = (small2 = false, scrollbar = false) => {
+  const SCROLLBAR_WIDTH = 17;
+  return (small2 ? PADDING_SMALL : PADDING) + (small2 ? TOGGLE_SIZE_SMALL : TOGGLE_SIZE) + (scrollbar ? SCROLLBAR_WIDTH : 0);
+};
+const getWidestOptionWidth = (options, small2, isFontLoaded, placeholder3) => {
+  const font = getFont(small2, isFontLoaded);
+  const placeholderWidth = placeholder3 ? getTextWidth(placeholder3, font) : 0;
+  const widestTextWidth = Math.ceil(
+    options.reduce((acc, option2) => {
+      var _a2;
+      const optionActionsWidth = (((_a2 = option2 == null ? void 0 : option2.actions) == null ? void 0 : _a2.length) ?? 0) * 24;
+      const optionIconWidth = option2.icon ? (small2 ? parseInt(FONT_SIZE_SMALL) : parseInt(FONT_SIZE)) + 7 : 0;
+      const optionsText = `${option2.label} ${option2.details || ""}`;
+      const optionWidth = getTextWidth(optionsText, font) + optionActionsWidth + optionIconWidth;
+      acc = optionWidth > acc ? optionWidth : acc;
+      return acc;
+    }, placeholderWidth)
+  );
+  const extraWidth = getExtraOptionWidth(small2, true);
+  return widestTextWidth + extraWidth;
+};
+const getMultiOptionWidth = (option2, small2, isFontLoaded) => {
+  const font = getFont(true, isFontLoaded);
+  const textWidth = getTextWidth(option2.label, font);
+  const extraWidth = (small2 ? TAG_PADDING_SMALL : TAG_PADDING) * 2 + TAG_BORDER_WIDTH * 2 + TAG_MARGIN;
+  return Math.ceil(textWidth + extraWidth);
+};
+const Layer = ({
+  listRef,
+  isMulti: isMulti2,
+  sections,
+  selectedOptions,
+  onSelectOption,
+  focusedOptionIndex,
+  width: width2,
+  small: small2,
+  firstSelectedOptionIndex,
+  closeLayer,
+  testId
+}) => {
+  useEffect(() => {
+    if (firstSelectedOptionIndex !== void 0 && firstSelectedOptionIndex !== null && listRef.current !== null && typeof listRef.current.scrollToItem === "function") {
+      listRef.current.scrollToItem(firstSelectedOptionIndex, "start");
+    }
+  }, [firstSelectedOptionIndex, listRef]);
+  const optionHeight = small2 ? 24 : 30;
+  return /* @__PURE__ */ jsx(
+    "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(
+        FixedSizeList,
+        {
+          ref: listRef,
+          height: sections.length < MAX_OPTIONS_LENGTH ? optionHeight * sections.length : optionHeight * MAX_OPTIONS_LENGTH,
+          itemCount: sections.length,
+          itemSize: optionHeight,
+          width: width2,
+          children: ({ index: index2, style: style2 }) => {
+            var _a2;
+            return /* @__PURE__ */ jsx("div", { style: style2, children: /* @__PURE__ */ jsx(
+              Section,
+              {
+                closeLayer,
+                section: sections[index2],
+                selected: isMulti2 && sections[index2].type !== MenuType.HEADING && Array.isArray(selectedOptions) ? selectedOptions.some(
+                  (v2) => {
+                    var _a3;
+                    return v2 && (v2 == null ? void 0 : v2.value) === ((_a3 = sections == null ? void 0 : sections[index2]) == null ? void 0 : _a3.value);
+                  }
+                ) : !Array.isArray(selectedOptions) && ((_a2 = sections == null ? void 0 : sections[index2]) == null ? void 0 : _a2.value) === (selectedOptions == null ? void 0 : selectedOptions.value),
+                focused: focusedOptionIndex === index2,
+                onSelectOption: (evt) => onSelectOption(evt, sections[index2])
+              }
+            ) });
+          }
+        }
+      )
+    }
+  );
+};
+const inputInTable$5 = "_inputInTable_7uwhv_1";
+const inputHover$5 = "_inputHover_7uwhv_13";
+const inputFocus$5 = "_inputFocus_7uwhv_18";
+const inputError$5 = "_inputError_7uwhv_25";
+const inputWarning$5 = "_inputWarning_7uwhv_26";
+const inputDisabled$5 = "_inputDisabled_7uwhv_61";
+const hideScrollbars$5 = "_hideScrollbars_7uwhv_67";
+const trigger$1 = "_trigger_7uwhv_77";
+const isInTable$1 = "_isInTable_7uwhv_93";
+const input = "_input_7uwhv_1";
+const isOpen = "_isOpen_7uwhv_114";
+const disabled$3 = "_disabled_7uwhv_156";
+const icons = "_icons_7uwhv_162";
+const clearAll = "_clearAll_7uwhv_169";
+const iconOpen = "_iconOpen_7uwhv_170";
+const small$4 = "_small_7uwhv_181";
+const triggerInputContainer = "_triggerInputContainer_7uwhv_189";
+const right$2 = "_right_7uwhv_198";
+const multiOptions = "_multiOptions_7uwhv_211";
+const multiOption = "_multiOption_7uwhv_211";
+const label$4 = "_label_7uwhv_239";
+const closeMultiOption = "_closeMultiOption_7uwhv_242";
+const focus = "_focus_7uwhv_253";
+const selectedSingleValue = "_selectedSingleValue_7uwhv_257";
+const placeHolder = "_placeHolder_7uwhv_258";
+const groupOrderFirst = "_groupOrderFirst_7uwhv_297";
+const groupOrderMiddle = "_groupOrderMiddle_7uwhv_298";
+const groupOrderLast = "_groupOrderLast_7uwhv_302";
+const detailedLabel = "_detailedLabel_7uwhv_307";
+const styles$m = {
+  inputInTable: inputInTable$5,
+  inputHover: inputHover$5,
+  inputFocus: inputFocus$5,
+  inputError: inputError$5,
+  inputWarning: inputWarning$5,
+  inputDisabled: inputDisabled$5,
+  hideScrollbars: hideScrollbars$5,
+  trigger: trigger$1,
+  isInTable: isInTable$1,
+  input,
+  isOpen,
+  disabled: disabled$3,
+  icons,
+  clearAll,
+  iconOpen,
+  small: small$4,
+  triggerInputContainer,
+  right: right$2,
+  multiOptions,
+  multiOption,
+  label: label$4,
+  closeMultiOption,
+  focus,
+  selectedSingleValue,
+  placeHolder,
+  groupOrderFirst,
+  groupOrderMiddle,
+  groupOrderLast,
+  detailedLabel
+};
+const MultiSelectedOptions = ({
+  selectedOptions,
+  small: small2,
+  width: width2,
+  testId
+}) => {
+  const isFontLoaded = useFontsReady();
+  const [displayedOptions, setDisplayedOptions] = useState([]);
+  const [overflowOptions, setOverflowOptions] = useState([]);
+  useEffect(() => {
+    let displayed = [];
+    let overflow = [];
+    let usedWidth = 0;
+    selectedOptions.forEach((option2, index2) => {
+      usedWidth += getMultiOptionWidth(option2, small2, isFontLoaded);
+      if (index2 === selectedOptions.length - 1 && usedWidth < width2) {
+        displayed.push(option2);
+      } else if (usedWidth < width2 - 24) {
+        displayed.push(option2);
+      } else {
+        overflow.push(option2);
+      }
+    });
+    setDisplayedOptions(displayed);
+    setOverflowOptions(overflow);
+  }, [selectedOptions, isFontLoaded, width2]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: styles$m.multiOptions,
+      "data-testid": testId && `${testId}-value`,
+      children: [
+        displayedOptions.filter((option2) => option2 && option2.label).map((option2, index2) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: styles$m.multiOption,
+            onClick: (evt) => {
+              evt.stopPropagation();
+            },
+            children: option2.label
+          },
+          index2
+        )),
+        overflowOptions.length > 0 && /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            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` })
+          }
+        )
+      ]
+    }
+  );
+};
+const Input = ({
+  selectedOptions,
+  searchable = false,
+  searchValue,
+  onChange = noop$3,
+  inputRef,
+  error: error2,
+  placeholder: placeholder3 = "Select...",
+  small: small2,
+  testId
+}) => {
+  const containerRef = useRef(null);
+  const isMulti2 = Array.isArray(selectedOptions);
+  const hasSelectedValues = isMulti2 ? selectedOptions.length > 0 : !!selectedOptions;
+  const inputSize = searchValue ? searchValue.length + 1 : 1;
+  const getMultiOptionsWidth = () => {
+    var _a2, _b;
+    const containerWidth = ((_a2 = containerRef.current) == null ? void 0 : _a2.offsetWidth) || 0;
+    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) ? placeholder3 : "" }) : isMulti2 ? /* @__PURE__ */ jsx(
+      MultiSelectedOptions,
+      {
+        selectedOptions,
+        small: small2,
+        width: getMultiOptionsWidth(),
+        testId
+      }
+    ) : /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: styles$m.selectedSingleValue,
+        "data-testid": testId && `${testId}-value`,
+        children: !(searchValue == null ? void 0 : searchValue.length) ? selectedOptions == null ? void 0 : selectedOptions.label : ""
+      }
+    ),
+    searchable ? /* @__PURE__ */ jsx(
+      "input",
+      {
+        tabIndex: -1,
+        ref: inputRef,
+        size: inputSize,
+        className: styles$m.input,
+        value: searchValue,
+        onChange: (evt) => onChange(evt.target.value),
+        "data-error": error2 || null,
+        "data-testid": testId && `${testId}-input`
+      }
+    ) : null
+  ] });
+};
+const Trigger = ({
+  selectedOptions,
+  searchValue,
+  searchable,
+  clearable,
+  onClickTrigger,
+  element,
+  error: error2,
+  warning: warning2,
+  tooltip: tooltip2,
+  small: small2,
+  isInTable: isInTable2,
+  disabled: disabled2,
+  onChangeSearch,
+  onClickDeselect,
+  onClickClear,
+  tabIndex,
+  isOpen: isOpen2,
+  triggerRef,
+  clearAllIsFocused,
+  focusedSelectedOptionIndex,
+  onFocus,
+  onBlur,
+  groupOrder,
+  maxTooltipWidth,
+  placeholder: placeholder3,
+  right: right2,
+  testId
+}) => {
+  var _a2;
+  const [inputRef, setInputFocus] = useFocus();
+  const hasSelection2 = Array.isArray(selectedOptions) ? selectedOptions.length > 0 && ((_a2 = selectedOptions[0]) == null ? void 0 : _a2.value) : selectedOptions == null ? void 0 : selectedOptions.value;
+  const canClear = clearable && hasSelection2;
+  const order2 = (() => {
+    if (groupOrder) {
+      switch (groupOrder) {
+        case GroupOrder.FIRST:
+          return styles$m.groupOrderFirst;
+        case GroupOrder.LAST:
+          return styles$m.groupOrderLast;
+        default:
+          return styles$m.groupOrderMiddle;
+      }
+    }
+    return "";
+  })();
+  const selectedOptionsWithDetails = !Array.isArray(selectedOptions) && (selectedOptions == null ? void 0 : selectedOptions.details) ? {
+    ...selectedOptions,
+    label: /* @__PURE__ */ jsxs("div", { className: cx$2(styles$m.detailedLabel), children: [
+      /* @__PURE__ */ jsx(Text, { children: selectedOptions.label }),
+      /* @__PURE__ */ jsx(Text, { muted: true, children: selectedOptions.details })
+    ] })
+  } : selectedOptions;
+  const triggerInput = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    element,
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        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 : "",
+          order2
+        ),
+        onClick: (evt) => {
+          onClickTrigger(evt);
+          if (typeof setInputFocus === "function") {
+            requestAnimationFrame(() => setInputFocus());
+          }
+        },
+        onFocus,
+        onBlur,
+        "data-error": error2 || null,
+        "data-warning": warning2 || null,
+        "data-testid": testId,
+        children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              selectedOptions: selectedOptionsWithDetails,
+              placeholder: placeholder3,
+              searchable,
+              searchValue,
+              inputRef,
+              onChange: onChangeSearch,
+              error: error2,
+              small: small2,
+              testId
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: styles$m.icons, children: canClear ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cx$2(
+                styles$m.clearAll,
+                clearAllIsFocused ? styles$m.focus : ""
+              ),
+              onClick: (evt) => {
+                evt.stopPropagation();
+                if (onClickClear) {
+                  onClickClear(evt);
+                }
+              },
+              "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" }) }) })
+        ]
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      error: !!error2,
+      warning: !!warning2,
+      text: tooltip2 || error2 || warning2,
+      enabled: tooltip2 && isStringNumberOrNode(tooltip2) || error2 && isStringNumberOrNode(error2) || warning2 && isStringNumberOrNode(warning2) || false,
+      maxWidth: maxTooltipWidth,
+      placement: "bottom-center",
+      children: triggerInput
+    }
+  ) });
+};
 var ReducerAction = /* @__PURE__ */ ((ReducerAction2) => {
   ReducerAction2["SET_VISIBLE_OPTIONS"] = "SET_VISIBLE_OPTIONS";
   ReducerAction2["RESET_LAYER_FOCUS"] = "RESET_LAYER_FOCUS";
@@ -20019,6 +21031,17 @@ const initialLayerFocus = (options, firstSelectedOptionIndex) => {
     current: layerFocusOptions[layerFocusIndex]
   };
 };
+const nextLayerFocus = (direction, layerFocus) => {
+  const sign = direction === "up" ? -1 : 1;
+  const increment = layerFocus.currentIndex + sign;
+  const nextIndex = (increment < 0 ? layerFocus.options.length - 1 : increment) % layerFocus.options.length;
+  const next2 = layerFocus.options[nextIndex];
+  return {
+    ...layerFocus,
+    currentIndex: nextIndex,
+    current: next2
+  };
+};
 const nextTriggerFocus = (direction, selectedOptions, triggerFocus) => {
   const sign = direction === "left" ? -1 : 1;
   const nextOptions = selectedOptions && selectedOptions.length ? [
@@ -20029,12 +21052,12 @@ const nextTriggerFocus = (direction, selectedOptions, triggerFocus) => {
   const increment = triggerFocus.currentIndex + sign;
   const nextIndex = (increment < 0 ? nextOptions.length - 1 : increment) % nextOptions.length;
   const next2 = nextOptions[nextIndex];
-  const clearAll = next2 === "clearAll";
+  const clearAll2 = next2 === "clearAll";
   return {
     options: nextOptions,
     currentIndex: nextIndex,
     currentOption: next2,
-    clearAll
+    clearAll: clearAll2
   };
 };
 const blurTriggerFocus = () => initialTriggerFocus;
@@ -20129,6 +21152,25 @@ const reducer = (state, action2) => {
       return state;
   }
 };
+const placementOptions = {
+  auto: true,
+  possiblePlacements: ["bottom-start", "top-start"],
+  placement: "bottom-start",
+  preferX: "right",
+  preferY: "bottom"
+};
+var ActionTypes = /* @__PURE__ */ ((ActionTypes2) => {
+  ActionTypes2["CLOSE_LAYER"] = "CLOSE_LAYER";
+  ActionTypes2["OPEN_LAYER"] = "OPEN_LAYER";
+  ActionTypes2["SET_VISIBLE_OPTIONS"] = "SET_VISIBLE_OPTIONS";
+  ActionTypes2["CLEAR_SEARCH"] = "CLEAR_SEARCH";
+  ActionTypes2["RESET_LAYER_FOCUS"] = "RESET_LAYER_FOCUS";
+  ActionTypes2["FOCUS_LAYER_OPTIONS"] = "FOCUS_LAYER_OPTIONS";
+  ActionTypes2["BLUR_TRIGGER_INPUTS"] = "BLUR_TRIGGER_INPUTS";
+  ActionTypes2["FOCUS_TRIGGER_INPUTS"] = "FOCUS_TRIGGER_INPUTS";
+  ActionTypes2["ON_CHANGE_SEARCH"] = "ON_CHANGE_SEARCH";
+  return ActionTypes2;
+})(ActionTypes || {});
 var EventKey = /* @__PURE__ */ ((EventKey2) => {
   EventKey2["RIGHT"] = "right";
   EventKey2["LEFT"] = "left";
@@ -20139,6 +21181,239 @@ var EventKey = /* @__PURE__ */ ((EventKey2) => {
   EventKey2["TAB"] = "tab";
   return EventKey2;
 })(EventKey || {});
+const useCustomSelectLogic = ({
+  state,
+  dispatch,
+  options,
+  setTriggerFocus,
+  disabled: disabled2,
+  disabledContext,
+  onCreate,
+  onChange,
+  selectedOptions,
+  width: width2,
+  small: small2,
+  isFontLoaded,
+  placeholder: placeholder3,
+  firstSelectedOptionIndex,
+  createAble,
+  listRef,
+  autoLayerWidth
+}) => {
+  const closeLayer = () => {
+    if (state.isLayerOpen) {
+      dispatch({ type: ActionTypes.CLOSE_LAYER });
+    }
+    setTriggerFocus();
+  };
+  const openLayer = () => dispatch({ type: ActionTypes.OPEN_LAYER });
+  const isFirstRun = useRef(true);
+  useEffect(() => {
+    if (isFirstRun.current) {
+      isFirstRun.current = false;
+    } else {
+      dispatch({ type: ActionTypes.SET_VISIBLE_OPTIONS, options });
+    }
+  }, [options]);
+  const onSelectOption = (evt, option2, close2) => {
+    if (!(disabled2 || disabledContext)) {
+      if (close2) {
+        close2();
+      }
+      if (option2) {
+        if (option2.createAble && onCreate) {
+          onCreate(option2.value);
+        } else {
+          if (!option2.disabled) {
+            if (Array.isArray(selectedOptions)) {
+              const alreadySelected = selectedOptions.some(
+                (selectedOption) => selectedOption.label === option2.label
+              );
+              if (!alreadySelected) {
+                const newSelectedOptions = [...selectedOptions, option2];
+                if (onChange) {
+                  onChange(evt, newSelectedOptions);
+                }
+              } else {
+                const newSelectedOptions = selectedOptions.filter(
+                  (opt) => opt.label !== option2.label
+                );
+                if (onChange) {
+                  onChange(evt, newSelectedOptions);
+                }
+              }
+            } else {
+              if (onChange) {
+                onChange(evt, option2);
+              }
+            }
+          }
+        }
+      }
+      dispatch({ type: ActionTypes.CLEAR_SEARCH, options });
+      setTriggerFocus();
+    }
+  };
+  const getTriggerWidth = useCallback$1(() => {
+    if (!width2) return "100%";
+    if (width2 !== "auto") return width2;
+    return getWidestOptionWidth(options, small2, isFontLoaded, placeholder3);
+  }, [options, isFontLoaded]);
+  const getLayerWidth = useCallback$1(
+    (triggerBounds2) => {
+      if (!autoLayerWidth) return triggerBounds2 == null ? void 0 : triggerBounds2.width;
+      const layerWidth = Math.max(
+        getWidestOptionWidth(options, small2, isFontLoaded, placeholder3),
+        triggerBounds2 == null ? void 0 : triggerBounds2.width
+      );
+      return layerWidth;
+    },
+    [options, isFontLoaded]
+  );
+  const { renderLayer, layerProps, triggerProps, triggerBounds } = useLayer({
+    isOpen: (state == null ? void 0 : state.isLayerOpen) ?? false,
+    overflowContainer: true,
+    ...placementOptions,
+    ResizeObserver,
+    onOutsideClick: closeLayer,
+    onParentClose: closeLayer
+  });
+  const onClickTrigger = () => {
+    if (disabled2 || disabledContext) {
+      return;
+    }
+    if (state.isLayerOpen) {
+      closeLayer();
+      return;
+    }
+    dispatch({
+      type: ActionTypes.RESET_LAYER_FOCUS,
+      options,
+      firstSelectedOptionIndex
+    });
+    openLayer();
+  };
+  const isFirstRender = useRef(true);
+  useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+    } else {
+      if (!state.isLayerOpen) {
+        dispatch({ type: ActionTypes.CLEAR_SEARCH, options });
+      }
+    }
+  }, [state.isLayerOpen]);
+  const onClickDeselectOption = (evt, options2) => {
+    const newSelectedOptions = selectedOptions instanceof Array ? selectedOptions.filter((option2) => option2.value !== options2.value) : null;
+    if (onChange) {
+      onChange(evt, newSelectedOptions);
+    }
+  };
+  const onClickClearAll = (evt) => {
+    const newSelectedOptions = selectedOptions instanceof Array ? [] : { value: null };
+    if (onChange) {
+      onChange(evt, newSelectedOptions);
+    }
+  };
+  const onChangeSearch = (value) => dispatch({
+    type: ActionTypes.ON_CHANGE_SEARCH,
+    options,
+    value,
+    createAble
+  });
+  const clickTrigger = () => {
+    openLayer();
+    dispatch({ type: ActionTypes.BLUR_TRIGGER_INPUTS });
+  };
+  const scrollToItem = (index2) => {
+    if (listRef.current && Number.isInteger(index2)) {
+      listRef.current.scrollToItem(index2);
+    }
+  };
+  const focusNextLayerOption = (ICustomSelectDirection2) => {
+    const next2 = nextLayerFocus(ICustomSelectDirection2, state.layerFocus);
+    dispatch({
+      type: ActionTypes.FOCUS_LAYER_OPTIONS,
+      nextLayerFocus: next2
+    });
+    scrollToItem(next2.current);
+  };
+  const focusTriggerInputs = (ICustomSelectDirection2) => {
+    dispatch({
+      type: ActionTypes.FOCUS_TRIGGER_INPUTS,
+      ICustomSelectDirection: ICustomSelectDirection2,
+      selectedOptions
+    });
+  };
+  const clearAll2 = (evt) => onClickClearAll(evt);
+  const deselectIsFocused = selectedOptions && selectedOptions[state.triggerFocus.currentOption];
+  const deselectOption = (evt) => {
+    onClickDeselectOption(
+      evt,
+      selectedOptions[state.triggerFocus.currentOption]
+    );
+  };
+  const selectOption = (evt) => {
+    var _a2;
+    onSelectOption(
+      evt,
+      (_a2 = state == null ? void 0 : state.visibleOptions) == null ? void 0 : _a2[state.layerFocus.current],
+      closeLayer
+    );
+  };
+  const clearAllIsFocused = state.triggerFocus.clearAll;
+  const onKeyEvent = (key2, evt) => {
+    switch (key2) {
+      case EventKey.UP: {
+        focusNextLayerOption(key2);
+        break;
+      }
+      case EventKey.DOWN: {
+        if (state.isLayerOpen) {
+          focusNextLayerOption(key2);
+        } else {
+          clickTrigger();
+        }
+        break;
+      }
+      case EventKey.LEFT:
+      case EventKey.RIGHT: {
+        focusTriggerInputs(key2);
+        break;
+      }
+      case EventKey.ENTER: {
+        if (clearAllIsFocused) {
+          clearAll2(evt);
+        } else if (deselectIsFocused) {
+          deselectOption(evt);
+        } else {
+          selectOption(evt);
+        }
+        break;
+      }
+      case EventKey.ESC: {
+        closeLayer();
+        break;
+      }
+    }
+  };
+  return {
+    getTriggerWidth,
+    onKeyEvent,
+    clearAllIsFocused,
+    triggerProps,
+    onClickTrigger,
+    onChangeSearch,
+    onClickDeselectOption,
+    onClickClearAll,
+    renderLayer,
+    layerProps,
+    closeLayer,
+    onSelectOption,
+    getLayerWidth,
+    triggerBounds
+  };
+};
 const CustomSelect = (props) => {
   const {
     multi: isMulti2 = false,
@@ -20167,11 +21442,12 @@ const CustomSelect = (props) => {
     right: right2 = false,
     testId = void 0
   } = props;
-  useContext(DisabledContext);
-  useRef(null);
-  useFocus();
-  useFontsReady();
-  useReducer(
+  const disabledContext = useContext(DisabledContext);
+  const createAble = onCreate !== null;
+  const listRef = useRef(null);
+  const [triggerRef, setTriggerFocus] = useFocus();
+  const isFontLoaded = useFontsReady();
+  const [state, dispatch] = useReducer(
     reducer,
     // @ts-ignore: write explicit reason: write explicit reason
     { options, firstSelectedOptionIndex },
@@ -20184,7 +21460,96 @@ const CustomSelect = (props) => {
       isLayerOpen: false
     })
   );
-  return /* @__PURE__ */ jsx(Fragment$1, {});
+  const {
+    getTriggerWidth,
+    onKeyEvent,
+    clearAllIsFocused,
+    triggerProps,
+    onClickTrigger,
+    onChangeSearch,
+    onClickDeselectOption,
+    onClickClearAll,
+    renderLayer,
+    layerProps,
+    closeLayer,
+    onSelectOption,
+    getLayerWidth,
+    triggerBounds
+  } = useCustomSelectLogic({
+    ...props,
+    state,
+    dispatch,
+    setTriggerFocus,
+    disabledContext,
+    isFontLoaded,
+    createAble,
+    listRef
+  });
+  return /* @__PURE__ */ jsx("div", { style: { width: getTriggerWidth() }, children: /* @__PURE__ */ jsxs(
+    KeyboardEventHandler,
+    {
+      handleKeys: Object.values(EventKey),
+      onKeyEvent,
+      children: [
+        /* @__PURE__ */ jsx(
+          Trigger,
+          {
+            selectedOptions,
+            searchValue: state.searchValue,
+            isOpen: state.isLayerOpen,
+            focusedSelectedOptionIndex: state.triggerFocus.currentOption,
+            clearAllIsFocused,
+            searchable,
+            triggerRef: mergeRefs(triggerRef, triggerProps.ref),
+            error: error2,
+            warning: warning2,
+            tooltip: tooltip2,
+            small: small2,
+            isInTable: isInTable2,
+            disabled: disabled2 || disabledContext,
+            clearable,
+            tabIndex,
+            onClickTrigger,
+            onChangeSearch,
+            onClickDeselect: onClickDeselectOption,
+            onClickClear: onClickClearAll,
+            onFocus,
+            onBlur,
+            groupOrder,
+            maxTooltipWidth,
+            placeholder: placeholder3,
+            right: right2,
+            testId
+          }
+        ),
+        state.isLayerOpen && renderLayer(
+          /* @__PURE__ */ jsx("div", { ...layerProps, className: styles$n.layerContainer, children: /* @__PURE__ */ jsx(
+            Layer,
+            {
+              listRef,
+              isMulti: isMulti2,
+              sections: state.visibleOptions,
+              selectedOptions,
+              onSelectOption: (evt, option2) => {
+                const close2 = !isMulti2 ? closeLayer : void 0;
+                onSelectOption(evt, option2, close2);
+              },
+              closeLayer: () => {
+                if (closeOnOptionActionClick) {
+                  closeLayer();
+                }
+              },
+              width: getLayerWidth(triggerBounds),
+              small: small2,
+              focusedOptionIndex: state.layerFocus.current,
+              firstSelectedOptionIndex: firstSelectedOptionIndex ?? 0,
+              testId: testId && `${testId}-layer`
+            }
+          ) })
+        )
+      ]
+    }
+  ) });
 };
 const isEmptyNullOrUndefined = (value) => value === null || value === void 0 || value === "";
 const isMulti = (selectedOptions) => selectedOptions instanceof Array;
@@ -20485,7 +21850,7 @@ const Pagination = ({ pagination }) => {
     ),
     /* @__PURE__ */ jsxs(InputGroup, { small: small2, width: "auto", children: [
       /* @__PURE__ */ jsx(
-        Input,
+        Input$1,
         {
           right: true,
           value: unvalidatedSelectedPage,
@@ -20548,7 +21913,7 @@ const Popover = ({
   onToggle: externalOnToggle
 }) => {
   const disabledContext = useContext(DisabledContext);
-  const [isOpen, setOpen] = externalIsOpen !== void 0 ? [externalIsOpen, externalOnToggle] : useState(false);
+  const [isOpen2, setOpen] = externalIsOpen !== void 0 ? [externalIsOpen, externalOnToggle] : useState(false);
   const close2 = () => {
     if (!disabled2 && !disabledContext) {
       if (setOpen) {
@@ -20559,7 +21924,7 @@ const Popover = ({
   const toggle2 = () => {
     if (!(disabled2 || disabledContext)) {
       if (setOpen) {
-        setOpen(!isOpen);
+        setOpen(!isOpen2);
       }
     }
   };
@@ -20569,7 +21934,7 @@ const Popover = ({
     }
   }, [disabled2, disabledContext]);
   const { renderLayer, arrowProps, layerProps, triggerProps } = useLayer({
-    isOpen,
+    isOpen: isOpen2,
     placement,
     auto: true,
     triggerOffset: 6,
@@ -20579,7 +21944,7 @@ const Popover = ({
   });
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsx("div", { ref: triggerProps.ref, onClick: toggle2, "data-testid": testId, children }),
-    isOpen && renderLayer(
+    isOpen2 && renderLayer(
       /* @__PURE__ */ jsxs(
         "div",
         {
@@ -20856,11 +22221,11 @@ var makeError = { exports: {} };
       });
     };
   }
-  function BaseError(message) {
-    if (message !== void 0) {
+  function BaseError(message2) {
+    if (message2 !== void 0) {
       defineProperty2(this, "message", {
         configurable: true,
-        value: message,
+        value: message2,
         writable: true
       });
     }
@@ -21516,14 +22881,14 @@ function debounce$1(delay, atBegin, callback) {
 function Cast(value) {
   return value;
 }
-function assertGet(value, key2, message) {
+function assertGet(value, key2, message2) {
   const prop = value[key2];
-  assert(!isUndefined(prop), message);
+  assert(!isUndefined(prop), message2);
   return prop;
 }
-function assert(testValue, message) {
+function assert(testValue, message2) {
   if (!testValue) {
-    throw new AssertionError(message);
+    throw new AssertionError(message2);
   }
 }
 var AssertionError = class extends makeErrorExports.BaseError {
@@ -21798,8 +23163,8 @@ function isErrorConstant(code) {
   return isString$2(code) && includes(values(ErrorConstant), code);
 }
 function createErrorMessage(code, extraMessage) {
-  const message = errorMessageMap[code];
-  const prefix2 = message ? `${message}
+  const message2 = errorMessageMap[code];
+  const prefix2 = message2 ? `${message2}
 
 ` : "";
   const customMessage = extraMessage ? `${extraMessage}
@@ -21811,9 +23176,9 @@ var RemirrorError = class extends makeErrorExports.BaseError {
   /**
    * The constructor is intentionally kept private to prevent being extended from.
    */
-  constructor({ code, message, disableLogging = false } = {}) {
+  constructor({ code, message: message2, disableLogging = false } = {}) {
     const errorCode = isErrorConstant(code) ? code : ErrorConstant.CUSTOM;
-    super(createErrorMessage(errorCode, message));
+    super(createErrorMessage(errorCode, message2));
     this.errorCode = errorCode;
     this.url = `${ERROR_INFORMATION_URL}#${errorCode.toLowerCase()}`;
     if (!disableLogging) {
@@ -24534,16 +25899,16 @@ class NodeContext {
   }
 }
 class ParseContext {
-  constructor(parser2, options, isOpen) {
+  constructor(parser2, options, isOpen2) {
     this.parser = parser2;
     this.options = options;
-    this.isOpen = isOpen;
+    this.isOpen = isOpen2;
     this.open = 0;
     let topNode = options.topNode, topContext;
-    let topOptions = wsOptionsFor(null, options.preserveWhitespace, 0) | (isOpen ? OPT_OPEN_LEFT : 0);
+    let topOptions = wsOptionsFor(null, options.preserveWhitespace, 0) | (isOpen2 ? OPT_OPEN_LEFT : 0);
     if (topNode)
       topContext = new NodeContext(topNode.type, topNode.attrs, Mark$1.none, true, options.topMatch || topNode.type.contentMatch, topOptions);
-    else if (isOpen)
+    else if (isOpen2)
       topContext = new NodeContext(null, null, Mark$1.none, true, null, topOptions);
     else
       topContext = new NodeContext(parser2.schema.topNodeType, null, Mark$1.none, true, null, topOptions);
@@ -25485,8 +26850,8 @@ class StepResult {
   /**
   Create a failed step result.
   */
-  static fail(message) {
-    return new StepResult(null, message);
+  static fail(message2) {
+    return new StepResult(null, message2);
   }
   /**
   Call [`Node.replace`](https://prosemirror.net/docs/ref/#model.Node.replace) with the given
@@ -26632,8 +27997,8 @@ class DocAttrStep extends Step {
 Step.jsonID("docAttr", DocAttrStep);
 let TransformError = class extends Error {
 };
-TransformError = function TransformError2(message) {
-  let err = Error.call(this, message);
+TransformError = function TransformError2(message2) {
+  let err = Error.call(this, message2);
   err.__proto__ = TransformError2.prototype;
   return err;
 };
@@ -31033,10 +32398,10 @@ editHandlers.keydown = (view, _event) => {
   if (event.keyCode != 229)
     view.domObserver.forceFlush();
   if (ios && event.keyCode == 13 && !event.ctrlKey && !event.altKey && !event.metaKey) {
-    let now = Date.now();
-    view.input.lastIOSEnter = now;
+    let now2 = Date.now();
+    view.input.lastIOSEnter = now2;
     view.input.lastIOSEnterFallbackTimeout = setTimeout(() => {
-      if (view.input.lastIOSEnter == now) {
+      if (view.input.lastIOSEnter == now2) {
         view.someProp("handleKeyDown", (f2) => f2(view, keyEvent(13, "Enter")));
         view.input.lastIOSEnter = 0;
       }
@@ -31166,14 +32531,14 @@ handlers.mousedown = (view, _event) => {
   let event = _event;
   view.input.shiftKey = event.shiftKey;
   let flushed = forceDOMFlush(view);
-  let now = Date.now(), type = "singleClick";
-  if (now - view.input.lastClick.time < 500 && isNear$1(event, view.input.lastClick) && !event[selectNodeModifier]) {
+  let now2 = Date.now(), type = "singleClick";
+  if (now2 - view.input.lastClick.time < 500 && isNear$1(event, view.input.lastClick) && !event[selectNodeModifier]) {
     if (view.input.lastClick.type == "singleClick")
       type = "doubleClick";
     else if (view.input.lastClick.type == "doubleClick")
       type = "tripleClick";
   }
-  view.input.lastClick = { time: now, x: event.clientX, y: event.clientY, type };
+  view.input.lastClick = { time: now2, x: event.clientX, y: event.clientY, type };
   let pos = view.posAtCoords(eventCoords(event));
   if (!pos)
     return;
@@ -49143,7 +50508,7 @@ var moo = { exports: {} };
         return new LexerIterator(this);
       };
     }
-    Lexer2.prototype.formatError = function(token2, message) {
+    Lexer2.prototype.formatError = function(token2, message2) {
       if (token2 == null) {
         var text2 = this.buffer.slice(this.index);
         var token2 = {
@@ -49163,7 +50528,7 @@ var moo = { exports: {} };
         this.line - token2.line + numLinesAround + 1
       ).slice(0, 5);
       var errorLines = [];
-      errorLines.push(message + " at line " + token2.line + " col " + token2.col + ":");
+      errorLines.push(message2 + " at line " + token2.line + " col " + token2.col + ":");
       errorLines.push("");
       for (var i = 0; i < displayedLines.length; i++) {
         var line2 = displayedLines[i];
@@ -49498,14 +50863,14 @@ function processTokens(tokens, mapText) {
     ];
   });
 }
-function compileMessage(message, mapText = (v2) => v2) {
+function compileMessage(message2, mapText = (v2) => v2) {
   try {
-    return processTokens(parse_1(message), mapText);
+    return processTokens(parse_1(message2), mapText);
   } catch (e2) {
     console.error(`${e2.message} 
 
-Message: ${message}`);
-    return message;
+Message: ${message2}`);
+    return message2;
   }
 }
 const isString$1 = (s) => typeof s === "string";
@@ -49563,21 +50928,21 @@ const getDefaultFormats = (locale, passedLocales, formats = {}) => {
   const style2 = (format) => {
     return typeof format === "object" ? format : formats[format] || { style: format };
   };
-  const replaceOctothorpe = (value, message) => {
+  const replaceOctothorpe = (value, message2) => {
     const numberFormat = Object.keys(formats).length ? style2("number") : void 0;
     const valueStr = number$1(locales, value, numberFormat);
-    return message.replace(new RegExp(OCTOTHORPE_PH, "g"), valueStr);
+    return message2.replace(new RegExp(OCTOTHORPE_PH, "g"), valueStr);
   };
   return {
     plural: (value, cases) => {
       const { offset: offset3 = 0 } = cases;
-      const message = plural(locales, false, value, cases);
-      return replaceOctothorpe(value - offset3, message);
+      const message2 = plural(locales, false, value, cases);
+      return replaceOctothorpe(value - offset3, message2);
     },
     selectordinal: (value, cases) => {
       const { offset: offset3 = 0 } = cases;
-      const message = plural(locales, true, value, cases);
-      return replaceOctothorpe(value - offset3, message);
+      const message2 = plural(locales, true, value, cases);
+      return replaceOctothorpe(value - offset3, message2);
     },
     select: selectFormatter,
     number: (value, format) => number$1(locales, value, style2(format)),
@@ -49591,12 +50956,12 @@ function interpolate$1(translation, locale, locales) {
     const formatMessage = (tokens, replaceOctothorpe = false) => {
       if (!Array.isArray(tokens))
         return tokens;
-      return tokens.reduce((message, token2) => {
+      return tokens.reduce((message2, token2) => {
         if (token2 === "#" && replaceOctothorpe) {
-          return message + OCTOTHORPE_PH;
+          return message2 + OCTOTHORPE_PH;
         }
         if (isString$1(token2)) {
-          return message + token2;
+          return message2 + token2;
         }
         const [name2, type, format] = token2;
         let interpolatedFormat = {};
@@ -49620,9 +50985,9 @@ function interpolate$1(translation, locale, locales) {
           value = values2[name2];
         }
         if (value == null) {
-          return message;
+          return message2;
         }
-        return message + value;
+        return message2 + value;
       }, "");
     };
     const result = formatMessage(translation);
@@ -49769,13 +51134,13 @@ class I18n extends EventEmitter {
     this.emit("change");
   }
   _(id2, values2, options) {
-    let message = options == null ? void 0 : options.message;
+    let message2 = options == null ? void 0 : options.message;
     if (!id2) {
       id2 = "";
     }
     if (!isString$1(id2)) {
       values2 = id2.values || values2;
-      message = id2.message;
+      message2 = id2.message;
       id2 = id2.id;
     }
     const messageForId = this.messages[id2];
@@ -49787,7 +51152,7 @@ class I18n extends EventEmitter {
     if (messageMissing) {
       this.emit("missing", { id: id2, locale: this._locale });
     }
-    let translation = messageForId || message || id2;
+    let translation = messageForId || message2 || id2;
     if (process.env.NODE_ENV !== "production") {
       translation = isString$1(translation) ? compileMessage(translation) : translation;
     }
@@ -51305,13 +52670,13 @@ const styles$d = {
   icon: icon$1
 };
 const TooltipIcon = memo(
-  ({ isOpen, label: label2, icon: icon2, invalid }) => {
+  ({ isOpen: isOpen2, label: label2, icon: icon2, invalid }) => {
     return /* @__PURE__ */ jsxs(Fragment$1, { children: [
       /* @__PURE__ */ jsx(
         Tooltip,
         {
           text: label2,
-          enabled: !isOpen,
+          enabled: !isOpen2,
           placement: "right-center",
           possiblePlacements: ["right-center"],
           fontSize: 16,
@@ -51326,7 +52691,7 @@ const TooltipIcon = memo(
   (prevProps, nextProps) => isEqual$1(prevProps, nextProps)
 );
 const Link$1 = ({
-  isOpen,
+  isOpen: isOpen2,
   items,
   sectionIndex,
   onClick,
@@ -51351,7 +52716,7 @@ const Link$1 = ({
             label: link2.label,
             icon: link2.icon,
             invalid: link2.invalid,
-            isOpen
+            isOpen: isOpen2
           },
           key2
         )
@@ -51361,7 +52726,7 @@ const Link$1 = ({
   }) });
 };
 const Sections = ({
-  isOpen,
+  isOpen: isOpen2,
   sections,
   onClick
 }) => {
@@ -51370,7 +52735,7 @@ const Sections = ({
     /* @__PURE__ */ jsx(
       Link$1,
       {
-        isOpen,
+        isOpen: isOpen2,
         items: section2.items,
         sectionIndex: i,
         onClick,
@@ -51387,7 +52752,7 @@ const SideBar = memo(
     },
     top: top2
   }) => {
-    const [isOpen, setIsOpen] = useState(startOpen);
+    const [isOpen2, setIsOpen] = useState(startOpen);
     const onClick = (evt, value, label2, clickHandler) => {
       evt.preventDefault();
       if (typeof clickHandler === "function") {
@@ -51402,7 +52767,7 @@ const SideBar = memo(
       Drawer,
       {
         fixed: true,
-        open: isOpen,
+        open: isOpen2,
         top: top2,
         background: "var(--color-background-sidebar)",
         closedWidth: "var(--size-sidebar)",
@@ -51415,19 +52780,19 @@ const SideBar = memo(
               if (evt.shiftKey && onShiftClickToggleOpen) {
                 onShiftClickToggleOpen(evt);
               }
-              setIsOpen(!isOpen);
+              setIsOpen(!isOpen2);
             },
             colored: true,
             round: true,
             icon: IconType.LEFT
           }
         ),
-        children: /* @__PURE__ */ jsx("div", { className: cx$2(styles$d.sidebar, !isOpen ? styles$d.collapsed : ""), children: visible && /* @__PURE__ */ jsxs("div", { className: styles$d.inner, children: [
+        children: /* @__PURE__ */ jsx("div", { className: cx$2(styles$d.sidebar, !isOpen2 ? styles$d.collapsed : ""), children: visible && /* @__PURE__ */ jsxs("div", { className: styles$d.inner, children: [
           /* @__PURE__ */ jsx("h4", { className: styles$d.title, children: options.title }),
           /* @__PURE__ */ jsx(
             Sections,
             {
-              isOpen,
+              isOpen: isOpen2,
               sections: options.sections,
               onClick
             }
@@ -51497,21 +52862,21 @@ var preWarningFns = [];
 var preMessage = function preMessage2(fn) {
   preWarningFns.push(fn);
 };
-function warning$1(valid, message) {
+function warning$1(valid, message2) {
   if (process.env.NODE_ENV !== "production" && !valid && console !== void 0) {
     var finalMessage = preWarningFns.reduce(function(msg2, preMessageFn) {
       return preMessageFn(msg2 !== null && msg2 !== void 0 ? msg2 : "", "warning");
-    }, message);
+    }, message2);
     if (finalMessage) {
       console.error("Warning: ".concat(finalMessage));
     }
   }
 }
-function note(valid, message) {
+function note(valid, message2) {
   if (process.env.NODE_ENV !== "production" && !valid && console !== void 0) {
     var finalMessage = preWarningFns.reduce(function(msg2, preMessageFn) {
       return preMessageFn(msg2 !== null && msg2 !== void 0 ? msg2 : "", "note");
-    }, message);
+    }, message2);
     if (finalMessage) {
       console.warn("Note: ".concat(finalMessage));
     }
@@ -51520,17 +52885,17 @@ function note(valid, message) {
 function resetWarned() {
   warned$1 = {};
 }
-function call(method, valid, message) {
-  if (!valid && !warned$1[message]) {
-    method(false, message);
-    warned$1[message] = true;
+function call(method, valid, message2) {
+  if (!valid && !warned$1[message2]) {
+    method(false, message2);
+    warned$1[message2] = true;
   }
 }
-function warningOnce(valid, message) {
-  call(warning$1, valid, message);
+function warningOnce(valid, message2) {
+  call(warning$1, valid, message2);
 }
-function noteOnce(valid, message) {
-  call(note, valid, message);
+function noteOnce(valid, message2) {
+  call(note, valid, message2);
 }
 warningOnce.preMessage = preMessage;
 warningOnce.resetWarned = resetWarned;
@@ -54028,7 +55393,7 @@ const Title$1 = ({
     return /* @__PURE__ */ jsx("div", { children: actionsComponent });
   };
   return /* @__PURE__ */ jsxs("div", { className: styles$a.title, children: [
-    isNameDefined ? /* @__PURE__ */ jsx(Heading$1, { children: /* @__PURE__ */ jsx("span", { "data-testid": testId, children: name2 }) }) : null,
+    isNameDefined ? /* @__PURE__ */ jsx(Heading$2, { children: /* @__PURE__ */ jsx("span", { "data-testid": testId, children: name2 }) }) : null,
     actionsContainer()
   ] });
 };
@@ -54248,7 +55613,7 @@ const InputCell = ({
   type
 }) => {
   return /* @__PURE__ */ jsx(
-    Input,
+    Input$1,
     {
       name: cell2.name,
       value: cell2.value,
@@ -54417,7 +55782,7 @@ const NumberInput = ({
       handleKeys: [EventKey.ENTER],
       onKeyEvent: (_key, evt) => onChangeValue(evt),
       children: /* @__PURE__ */ jsx(
-        Input,
+        Input$1,
         {
           type: "text",
           name: stringName,
@@ -56484,11 +57849,11 @@ eventManager.on(
 );
 const toast = ({
   id: id2,
-  message = { type: MessageType.INFO, content: "" },
+  message: message2 = { type: MessageType.INFO, content: "" },
   autoClose = 6e3,
   onClose
 }) => {
-  const { type = MessageType.INFO } = message ?? {};
+  const { type = MessageType.INFO } = message2 ?? {};
   const CloseButton2 = ({
     closeToast
   }) => /* @__PURE__ */ jsx(
@@ -56504,7 +57869,7 @@ const toast = ({
     Message,
     {
       message: {
-        ...message,
+        ...message2,
         visible: true,
         width: "100%",
         maxHeight: "500px",
@@ -56513,7 +57878,7 @@ const toast = ({
     }
   );
   const toastType = (() => {
-    switch (message == null ? void 0 : message.type) {
+    switch (message2 == null ? void 0 : message2.type) {
       case MessageType.SUCCESS:
         return toast$1.TYPE.SUCCESS;
       case MessageType.WARNING:
@@ -60334,7 +61699,7 @@ var ResizeObserverController = function() {
   };
   return ResizeObserverController2;
 }();
-var ResizeObserver = function() {
+var ResizeObserver$1 = function() {
   function ResizeObserver2(callback) {
     if (arguments.length === 0) {
       throw new TypeError("Failed to construct 'ResizeObserver': 1 argument required, but only 0 present.");
@@ -60426,14 +61791,14 @@ var warning = function() {
 var invariant = function() {
 };
 if (process.env.NODE_ENV !== "production") {
-  warning = function(check2, message) {
+  warning = function(check2, message2) {
     if (!check2 && typeof console !== "undefined") {
-      console.warn(message);
+      console.warn(message2);
     }
   };
-  invariant = function(check2, message) {
+  invariant = function(check2, message2) {
     if (!check2) {
-      throw new Error(message);
+      throw new Error(message2);
     }
   };
 }
@@ -62610,11 +63975,11 @@ function useTapGesture(_a2) {
   useUnmountEffect(removePointerEndListener);
 }
 var warned = /* @__PURE__ */ new Set();
-function warnOnce(condition, message, element) {
-  if (condition || warned.has(message))
+function warnOnce(condition, message2, element) {
+  if (condition || warned.has(message2))
     return;
-  console.warn(message);
-  warned.add(message);
+  console.warn(message2);
+  warned.add(message2);
 }
 var observerCallbacks = /* @__PURE__ */ new WeakMap();
 var observers = /* @__PURE__ */ new WeakMap();
@@ -67604,7 +68969,7 @@ function AnimateHeight(props) {
     open: { opacity: 1, height: "auto" },
     close: { opacity: 0, height: 0 }
   } : _b, children = props.children;
-  var _c = useMeasure({ polyfill: ResizeObserver }), ref2 = _c[0], height2 = _c[1].height;
+  var _c = useMeasure({ polyfill: ResizeObserver$1 }), ref2 = _c[0], height2 = _c[1].height;
   var _d = useState(isVisible3), isVisibleChildren = _d[0], setIsVisibleChildren = _d[1];
   var _e2 = useState(isVisible3), isVisibleContainer = _e2[0], setIsVisibleContainer = _e2[1];
   var _f = useState(false), transition = _f[0], setTransition = _f[1];
@@ -68536,7 +69901,7 @@ const styles$1 = {
 const TreeItem = ({
   node: node2,
   depth,
-  isOpen,
+  isOpen: isOpen2,
   onToggle,
   hasChild,
   draggable: draggable2,
@@ -68569,7 +69934,7 @@ const TreeItem = ({
   const handleDragOver = (event) => {
     event.preventDefault();
     event.stopPropagation();
-    if (hasChild && !isOpen && (/* @__PURE__ */ new Date()).getTime() - dragOverStartTime > 200) {
+    if (hasChild && !isOpen2 && (/* @__PURE__ */ new Date()).getTime() - dragOverStartTime > 200) {
       handleToggle(event);
     }
   };
@@ -68617,10 +69982,10 @@ const TreeItem = ({
               Button$1,
               {
                 basic: true,
-                colored: isOpen ? true : Color.MUTED,
+                colored: isOpen2 ? true : Color.MUTED,
                 small: true,
                 round: true,
-                icon: isOpen ? (icons2 == null ? void 0 : icons2.collapse) || IconType.COLLAPSE : (icons2 == null ? void 0 : icons2.expand) || IconType.EXPAND,
+                icon: isOpen2 ? (icons2 == null ? void 0 : icons2.collapse) || IconType.COLLAPSE : (icons2 == null ? void 0 : icons2.expand) || IconType.EXPAND,
                 onClick: handleToggle
               }
             ) }),
@@ -68748,7 +70113,7 @@ const Tree = ({
               }
             },
             rootId: 0,
-            render: (node2, { depth, isOpen, onToggle, hasChild }) => {
+            render: (node2, { depth, isOpen: isOpen2, onToggle, hasChild }) => {
               var _a3;
               return /* @__PURE__ */ jsx(
                 TreeItem,
@@ -68756,9 +70121,9 @@ const Tree = ({
                   hasChild: itemHasChild ? itemHasChild(node2) : hasChild,
                   node: node2,
                   depth,
-                  isOpen,
+                  isOpen: isOpen2,
                   onToggle: () => {
-                    onItemToggle == null ? void 0 : onItemToggle(node2, !isOpen);
+                    onItemToggle == null ? void 0 : onItemToggle(node2, !isOpen2);
                     onToggle();
                   },
                   draggable: draggable2,
@@ -69107,7 +70472,7 @@ const UnitInput = ({
     }
   }, [initDisplayUnit, value, error2, shouldLinkAutomaticly]);
   const alternativeUnits = getAlternativeUnits();
-  const displayUnitLabel = label$9(displayLayer.unit) || displayLayer.unit || "";
+  const displayUnitLabel = label$b(displayLayer.unit) || displayLayer.unit || "";
   const noConvert = noConversion || !alternativeUnits || alternativeUnits && alternativeUnits.length === 1;
   const stringName = getStringName(name2);
   let sectionsPredefinedMenu;
@@ -69298,7 +70663,7 @@ const convertVisibleRows = ({
           type: CellType.SELECT,
           searchable: false,
           options: (_a2 = getUnitsForQuantity(unitKey)) == null ? void 0 : _a2.map((unit2) => ({
-            label: label$9(unit2),
+            label: label$b(unit2),
             value: unit2
           })),
           native: headerCell.native,
@@ -69610,11 +70975,11 @@ export {
   FormRow,
   Grid,
   GroupOrder,
-  Heading$1 as Heading,
+  Heading$2 as Heading,
   HelpIcon,
   Icon,
   IconType,
-  Input,
+  Input$1 as Input,
   InputGroup,
   InputGroupAddon,
   InputReaderMethods,