@oliasoft-open-source/react-ui-library 4.15.1-beta-11 → 4.15.1-beta-12

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, PureComponent, 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, 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$b, 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$9, 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$U = {
+const styles$S = {
   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, message2) {
-  var e2 = new Error(message2);
+typeof SuppressedError === "function" ? SuppressedError : function(error2, suppressed, message) {
+  var e2 = new Error(message);
   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$T = {
+const styles$R = {
   wrapper: wrapper$5,
   customSvg,
   customPng,
@@ -1544,8 +1544,8 @@ const Icon = ({
     "div",
     {
       className: cx$2(
-        styles$T.wrapper,
-        (clickable2 || onClick) && !disabledContext ? styles$T.clickable : ""
+        styles$R.wrapper,
+        (clickable2 || onClick) && !disabledContext ? styles$R.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$T.customSvg,
+          className: styles$R.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$T.customPng, src: icon2 }) : typeof icon2 === "string" ? /* @__PURE__ */ jsx(NamedIcon, { icon: icon2 }) : null
+      ) : typeof icon2 === "string" && (icon2.includes(".png") || icon2.includes("image/png")) ? /* @__PURE__ */ jsx("img", { alt: "icon", className: styles$R.customPng, src: icon2 }) : typeof icon2 === "string" ? /* @__PURE__ */ jsx(NamedIcon, { icon: icon2 }) : null
     }
   );
 };
 const Chevron = ({ expanded: expanded2 }) => {
-  return /* @__PURE__ */ jsx("span", { className: cx$2(styles$U.chevron, expanded2 ? styles$U.expanded : ""), children: /* @__PURE__ */ jsx(Icon, { icon: IconType.CHEVRON_RIGHT }) });
+  return /* @__PURE__ */ jsx("span", { className: cx$2(styles$S.chevron, expanded2 ? styles$S.expanded : ""), children: /* @__PURE__ */ jsx(Icon, { icon: IconType.CHEVRON_RIGHT }) });
 };
 const accordion = "_accordion_15p8j_1";
 const accordionHeader = "_accordionHeader_15p8j_5";
-const heading$6 = "_heading_15p8j_9";
+const heading$5 = "_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$S = {
+const styles$Q = {
   accordion,
   accordionHeader,
-  heading: heading$6,
+  heading: heading$5,
   clickable: clickable$1,
   bordered: bordered$4,
   accordionContent,
@@ -1603,21 +1603,21 @@ const AccordionBase = ({
     "div",
     {
       className: cx$2(
-        styles$S.accordion,
-        bordered2 ? styles$S.bordered : "",
-        expanded2 ? styles$S.expanded : "",
-        squareBottom2 ? styles$S.squareBottom : ""
+        styles$Q.accordion,
+        bordered2 ? styles$Q.bordered : "",
+        expanded2 ? styles$Q.expanded : "",
+        squareBottom2 ? styles$Q.squareBottom : ""
       ),
       children: [
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: cx$2(styles$S.accordionHeader, onClick ? styles$S.clickable : ""),
+            className: cx$2(styles$Q.accordionHeader, onClick ? styles$Q.clickable : ""),
             onClick,
             "data-testid": testId,
             children: [
               /* @__PURE__ */ jsx(Chevron, { expanded: expanded2 }),
-              /* @__PURE__ */ jsx("div", { className: styles$S.heading, children: heading2 })
+              /* @__PURE__ */ jsx("div", { className: styles$Q.heading, children: heading2 })
             ]
           }
         ),
@@ -1625,8 +1625,8 @@ const AccordionBase = ({
           "div",
           {
             className: cx$2(
-              styles$S.accordionContent,
-              bordered2 && padding2 ? styles$S.padding : ""
+              styles$Q.accordionContent,
+              bordered2 && padding2 ? styles$Q.padding : ""
             ),
             children
           }
@@ -1698,20 +1698,20 @@ const Accordion = ({
 };
 const checkbox = "_checkbox_1ybyr_1";
 const noLabel = "_noLabel_1ybyr_17";
-const small$d = "_small_1ybyr_20";
+const small$b = "_small_1ybyr_20";
 const checkmark = "_checkmark_1ybyr_43";
-const disabled$a = "_disabled_1ybyr_67";
+const disabled$8 = "_disabled_1ybyr_67";
 const noMargin$2 = "_noMargin_1ybyr_81";
-const isInTable$4 = "_isInTable_1ybyr_84";
+const isInTable$3 = "_isInTable_1ybyr_84";
 const helpIconEnabled$2 = "_helpIconEnabled_1ybyr_87";
-const styles$R = {
+const styles$P = {
   checkbox,
   noLabel,
-  small: small$d,
+  small: small$b,
   checkmark,
-  disabled: disabled$a,
+  disabled: disabled$8,
   noMargin: noMargin$2,
-  isInTable: isInTable$4,
+  isInTable: isInTable$3,
   helpIconEnabled: helpIconEnabled$2
 };
 var MapShim = function() {
@@ -2207,12 +2207,12 @@ var index = function() {
   return ResizeObserver$2;
 }();
 var isProduction$3 = process.env.NODE_ENV === "production";
-function warning$7(condition, message2) {
+function warning$7(condition, message) {
   if (!isProduction$3) {
     if (condition) {
       return;
     }
-    var text2 = "Warning: " + message2;
+    var text2 = "Warning: " + message;
     if (typeof console !== "undefined") {
       console.warn(text2);
     }
@@ -2659,7 +2659,7 @@ function getShouldCloseAccordingToChildren(registrations, event) {
   return true;
 }
 function useGroup(_ref2) {
-  var isOpen2 = _ref2.isOpen, onOutsideClick = _ref2.onOutsideClick, onParentClose = _ref2.onParentClose;
+  var isOpen = _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 = !isOpen2 || !onOutsideClick || isChild;
+    var shouldNotListen = !isOpen || !onOutsideClick || isChild;
     if (shouldNotListen) {
       return;
     }
@@ -2706,15 +2706,15 @@ function useGroup(_ref2) {
     return function() {
       return document.removeEventListener("click", handleClick2, true);
     };
-  }, [isOpen2, onOutsideClick, shouldCloseWhenClickedOutside, possibleRegisterFn]);
+  }, [isOpen, onOutsideClick, shouldCloseWhenClickedOutside, possibleRegisterFn]);
   useEffect(function() {
-    if (!isOpen2) {
+    if (!isOpen) {
       registrations.current.forEach(function(_ref4) {
         var closeChild = _ref4.closeChild;
         return closeChild();
       });
     }
-  }, [isOpen2]);
+  }, [isOpen]);
   return {
     closeOnOutsideClickRefs: {
       trigger: trigger2,
@@ -3413,7 +3413,7 @@ var DEFAULT_OPTIONS$1 = {
 };
 function useLayer(_ref) {
   var _triggerBoundsRef$cur;
-  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 _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 _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, isOpen2);
+  var lastState = useLastState(state, isOpen);
   var repositioningToken = useRef({
     cancelled: false
   });
@@ -3483,13 +3483,13 @@ function useLayer(_ref) {
   var _useTrackElements = useTrackElements({
     ResizeObserverPolyfill,
     environment: environment2,
-    enabled: isOpen2,
+    enabled: isOpen,
     overflowContainer,
     onChange: handlePositioning,
     triggerOption
   }), triggerRef = _useTrackElements.triggerRef, layerRef = _useTrackElements.layerRef, arrowRef = _useTrackElements.arrowRef, closestScrollContainer = _useTrackElements.closestScrollContainer;
   var _useGroup = useGroup({
-    isOpen: isOpen2,
+    isOpen,
     onOutsideClick,
     onParentClose
   }), closeOnOutsideClickRefs = _useGroup.closeOnOutsideClickRefs, registrations = _useGroup.registrations;
@@ -3507,7 +3507,7 @@ function useLayer(_ref) {
       layerSide: state.layerSide
     },
     layerSide: state.layerSide,
-    triggerBounds: isOpen2 ? triggerOption ? triggerOption.getBounds() : (_triggerBoundsRef$cur = triggerBoundsRef.current) == null ? void 0 : _triggerBoundsRef$cur.getBoundingClientRect() : null,
+    triggerBounds: isOpen ? 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$Q = {
+const styles$O = {
   tooltip,
   error: error$3,
   warning: warning$6
@@ -3742,8 +3742,8 @@ const TooltipLayer = ({
     "div",
     {
       className: cx$2(
-        styles$Q.tooltip,
-        error2 ? styles$Q.error : warning2 ? styles$Q.warning : ""
+        styles$O.tooltip,
+        error2 ? styles$O.error : warning2 ? styles$O.warning : ""
       ),
       ...layerProps,
       children: [
@@ -3779,9 +3779,9 @@ const Tooltip = ({
     delayEnter: 100,
     delayLeave: 0
   });
-  const isOpen2 = !visible ? false : forceOpen ? true : isOver;
+  const isOpen = !visible ? false : forceOpen ? true : isOver;
   const { renderLayer, triggerProps, layerProps, arrowProps } = useLayer({
-    isOpen: isOpen2,
+    isOpen,
     overflowContainer: true,
     ResizeObserver: index,
     auto: true,
@@ -3791,7 +3791,7 @@ const Tooltip = ({
     onParentClose: forceClose
   });
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    isOpen2 && renderLayer(
+    isOpen && 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$P = {
+const styles$N = {
   helpIcon,
   active: active$9,
   clickable
@@ -3843,9 +3843,9 @@ const HelpIcon = ({
     "div",
     {
       className: cx$2(
-        styles$P.helpIcon,
-        onClick ? styles$P.clickable : "",
-        active2 ? styles$P.active : ""
+        styles$N.helpIcon,
+        onClick ? styles$N.clickable : "",
+        active2 ? styles$N.active : ""
       ),
       onClick: onClickHelpIcon,
       "data-testid": testId,
@@ -3876,12 +3876,12 @@ const CheckBox = ({
     "div",
     {
       className: cx$2(
-        styles$R.checkbox,
-        noMargin2 && styles$R.noMargin,
-        isInTable2 && styles$R.isInTable,
-        isDisabled && styles$R.disabled,
-        small2 && styles$R.small,
-        !label2 && styles$R.noLabel
+        styles$P.checkbox,
+        noMargin2 && styles$P.noMargin,
+        isInTable2 && styles$P.isInTable,
+        isDisabled && styles$P.disabled,
+        small2 && styles$P.small,
+        !label2 && styles$P.noLabel
       ),
       "data-ix": dataix,
       onClick: (evt) => {
@@ -3913,10 +3913,10 @@ const CheckBox = ({
           }
         ),
         /* @__PURE__ */ jsxs("label", { htmlFor: name2, children: [
-          /* @__PURE__ */ jsx("span", { className: styles$R.checkmark, children: /* @__PURE__ */ jsx(Icon, { icon: IconType.CHECK }) }),
+          /* @__PURE__ */ jsx("span", { className: styles$P.checkmark, children: /* @__PURE__ */ jsx(Icon, { icon: IconType.CHECK }) }),
           label2
         ] }),
-        showHelp && /* @__PURE__ */ jsx("div", { className: styles$R.helpIconEnabled, onClick: onClickHelp, children: /* @__PURE__ */ jsx(HelpIcon, { text: helpText }) })
+        showHelp && /* @__PURE__ */ jsx("div", { className: styles$P.helpIconEnabled, onClick: onClickHelp, children: /* @__PURE__ */ jsx(HelpIcon, { text: helpText }) })
       ]
     }
   );
@@ -3925,7 +3925,7 @@ const bordered$3 = "_bordered_1cgsf_1";
 const checkboxWrapper = "_checkboxWrapper_1cgsf_7";
 const padding$2 = "_padding_1cgsf_13";
 const contentWrapper = "_contentWrapper_1cgsf_16";
-const styles$O = {
+const styles$M = {
   bordered: bordered$3,
   checkboxWrapper,
   padding: padding$2,
@@ -3967,7 +3967,7 @@ const AccordionWithDefaultToggle = ({
     defaultEnabled
   });
   const content2 = /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    /* @__PURE__ */ jsx("div", { className: styles$O.checkboxWrapper, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: styles$M.checkboxWrapper, children: /* @__PURE__ */ jsx(
       CheckBox,
       {
         label: toggleLabel,
@@ -3978,7 +3978,7 @@ const AccordionWithDefaultToggle = ({
         checked: state.defaultEnabled
       }
     ) }),
-    state.accordionExpanded && /* @__PURE__ */ jsx("div", { className: styles$O.contentWrapper, children })
+    state.accordionExpanded && /* @__PURE__ */ jsx("div", { className: styles$M.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$O.bordered, padding2 ? styles$O.padding : ""), children: content2 })
+    /* @__PURE__ */ jsx("div", { className: cx$2(styles$M.bordered, padding2 ? styles$M.padding : ""), children: content2 })
   ] });
 };
-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 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 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$5 = "_icon_1m45a_147";
+const icon$4 = "_icon_1m45a_147";
 const iconOnly = "_iconOnly_1m45a_153";
 const basic = "_basic_1m45a_163";
 const muted$2 = "_muted_1m45a_169";
-const disabled$9 = "_disabled_1m45a_188";
-const small$c = "_small_1m45a_198";
+const disabled$7 = "_disabled_1m45a_188";
+const small$a = "_small_1m45a_198";
 const pill = "_pill_1m45a_203";
 const round = "_round_1m45a_204";
 const inverted$1 = "_inverted_1m45a_310";
-const groupOrderFirst$4 = "_groupOrderFirst_1m45a_340";
-const groupOrderMiddle$4 = "_groupOrderMiddle_1m45a_341";
-const groupOrderLast$4 = "_groupOrderLast_1m45a_342";
+const groupOrderFirst$3 = "_groupOrderFirst_1m45a_340";
+const groupOrderMiddle$3 = "_groupOrderMiddle_1m45a_341";
+const groupOrderLast$3 = "_groupOrderLast_1m45a_342";
 const buttonStyles = {
-  inputInTable: inputInTable$b,
-  inputHover: inputHover$b,
-  inputFocus: inputFocus$b,
-  inputError: inputError$b,
-  inputWarning: inputWarning$b,
-  inputDisabled: inputDisabled$b,
-  hideScrollbars: hideScrollbars$b,
+  inputInTable: inputInTable$a,
+  inputHover: inputHover$a,
+  inputFocus: inputFocus$a,
+  inputError: inputError$a,
+  inputWarning: inputWarning$a,
+  inputDisabled: inputDisabled$a,
+  hideScrollbars: hideScrollbars$a,
   button: button$3,
   active: active$8,
   green: green$1,
   red: red$1,
   orange: orange$1,
-  icon: icon$5,
+  icon: icon$4,
   iconOnly,
   basic,
   muted: muted$2,
-  disabled: disabled$9,
-  small: small$c,
+  disabled: disabled$7,
+  small: small$a,
   pill,
   round,
   inverted: inverted$1,
-  groupOrderFirst: groupOrderFirst$4,
-  groupOrderMiddle: groupOrderMiddle$4,
-  groupOrderLast: groupOrderLast$4
+  groupOrderFirst: groupOrderFirst$3,
+  groupOrderMiddle: groupOrderMiddle$3,
+  groupOrderLast: groupOrderLast$3
 };
 const spinner = "_spinner_156m4_1";
-const styles$N = {
+const styles$L = {
   spinner
 };
 const Spinner$1 = ({
@@ -4056,7 +4056,7 @@ const Spinner$1 = ({
 }) => {
   const color2 = colored2 ? "var(--color-text-primary)" : dark2 ? "var(--color-text-muted)" : "white";
   const fontSize = small2 ? "var(--font-size)" : tiny ? "var(--font-size-xs)" : "var(--size)";
-  return /* @__PURE__ */ jsx("div", { className: styles$N.spinner, style: { color: color2, fontSize } });
+  return /* @__PURE__ */ jsx("div", { className: styles$L.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$M = {
+const styles$K = {
   actions: actions$2,
   childComponent,
   actionComponentContainer,
   active: active$7
 };
 const wrapper$4 = "_wrapper_8cxhw_1";
-const layer$1 = "_layer_8cxhw_5";
-const layerContainer$1 = "_layerContainer_8cxhw_8";
+const layer = "_layer_8cxhw_5";
+const layerContainer = "_layerContainer_8cxhw_8";
 const nested = "_nested_8cxhw_24";
 const fileInput$1 = "_fileInput_8cxhw_36";
-const trigger$2 = "_trigger_8cxhw_41";
+const trigger$1 = "_trigger_8cxhw_41";
 const middleAlignedInline = "_middleAlignedInline_8cxhw_50";
-const heading$5 = "_heading_8cxhw_56";
+const heading$4 = "_heading_8cxhw_56";
 const headingIcon = "_headingIcon_8cxhw_62";
-const option$1 = "_option_8cxhw_74";
+const option = "_option_8cxhw_74";
 const active$6 = "_active_8cxhw_93";
-const selected$1 = "_selected_8cxhw_98";
-const optionContent$1 = "_optionContent_8cxhw_105";
+const selected = "_selected_8cxhw_98";
+const optionContent = "_optionContent_8cxhw_105";
 const inline$4 = "_inline_8cxhw_109";
-const icon$4 = "_icon_8cxhw_114";
-const check$1 = "_check_8cxhw_115";
+const icon$3 = "_icon_8cxhw_114";
+const check = "_check_8cxhw_115";
 const text$3 = "_text_8cxhw_141";
-const label$a = "_label_8cxhw_146";
+const label$8 = "_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$8 = "_disabled_8cxhw_173";
+const disabled$6 = "_disabled_8cxhw_173";
 const buttonLabel = "_buttonLabel_8cxhw_178";
 const buttonCaret = "_buttonCaret_8cxhw_184";
 const component = "_component_8cxhw_188";
-const right$7 = "_right_8cxhw_194";
+const right$6 = "_right_8cxhw_194";
 const actions$1 = "_actions_8cxhw_199";
-const styles$L = {
+const styles$J = {
   wrapper: wrapper$4,
-  layer: layer$1,
-  layerContainer: layerContainer$1,
+  layer,
+  layerContainer,
   nested,
   fileInput: fileInput$1,
-  trigger: trigger$2,
+  trigger: trigger$1,
   middleAlignedInline,
-  heading: heading$5,
+  heading: heading$4,
   headingIcon,
-  option: option$1,
+  option,
   active: active$6,
-  selected: selected$1,
-  optionContent: optionContent$1,
+  selected,
+  optionContent,
   inline: inline$4,
-  icon: icon$4,
-  check: check$1,
+  icon: icon$3,
+  check,
   text: text$3,
-  label: label$a,
+  label: label$8,
   description,
   arrow: arrow$1,
   divider: divider$1,
   deprecatedSemanticIcon,
-  disabled: disabled$8,
+  disabled: disabled$6,
   buttonLabel,
   buttonCaret,
   component,
-  right: right$7,
+  right: right$6,
   actions: actions$1
 };
-const Heading$3 = ({ label: label2, onClick, icon: icon2, testId }) => /* @__PURE__ */ jsxs(
+const Heading$2 = ({ label: label2, onClick, icon: icon2, testId }) => /* @__PURE__ */ jsxs(
   "div",
   {
     onClick: (evt) => evt.stopPropagation(),
-    className: styles$L.heading,
+    className: styles$J.heading,
     "data-testid": testId,
     children: [
       label2,
-      /* @__PURE__ */ jsx("span", { className: styles$L.headingIcon, onClick, children: icon2 })
+      /* @__PURE__ */ jsx("span", { className: styles$J.headingIcon, onClick, children: icon2 })
     ]
   }
 );
-const Divider$1 = () => /* @__PURE__ */ jsx("hr", { className: styles$L.divider });
-const Option$2 = ({
+const Divider$1 = () => /* @__PURE__ */ jsx("hr", { className: styles$J.divider });
+const Option$1 = ({
   actions: actions2,
   label: label2,
   url,
@@ -4309,30 +4309,30 @@ const Option$2 = ({
       href: url,
       to: url,
       className: cx$2(
-        styles$L.option,
-        disabled2 ? styles$L.disabled : "",
-        inline2 ? styles$L.inline : "",
-        selected2 ? styles$L.selected : ""
+        styles$J.option,
+        disabled2 ? styles$J.disabled : "",
+        inline2 ? styles$J.inline : "",
+        selected2 ? styles$J.selected : ""
       ),
       onClick: handleClick2,
       "data-testid": testId,
       children: [
-        icon2 ? /* @__PURE__ */ jsx("span", { className: styles$L.icon, children: /* @__PURE__ */ jsx(Icon, { icon: icon2 }) }) : null,
-        /* @__PURE__ */ jsxs("div", { className: styles$L.optionContent, children: [
+        icon2 ? /* @__PURE__ */ jsx("span", { className: styles$J.icon, children: /* @__PURE__ */ jsx(Icon, { icon: icon2 }) }) : null,
+        /* @__PURE__ */ jsxs("div", { className: styles$J.optionContent, children: [
           upload && /* @__PURE__ */ jsx(
             "input",
             {
               type: "file",
-              className: styles$L.fileInput,
+              className: styles$J.fileInput,
               onChange: handleFileChange
             }
           ),
-          /* @__PURE__ */ jsx("span", { className: styles$L.label, title: `${title2 || label2}`, children: label2 }),
-          /* @__PURE__ */ jsx("span", { className: styles$L.description, children: description2 })
+          /* @__PURE__ */ jsx("span", { className: styles$J.label, title: `${title2 || label2}`, children: label2 }),
+          /* @__PURE__ */ jsx("span", { className: styles$J.description, children: description2 })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: styles$L.right, children: [
-          selected2 && /* @__PURE__ */ jsx("span", { className: styles$L.check, children: /* @__PURE__ */ jsx(Icon, { icon: IconType.CHECK }) }),
-          !!(actions2 == null ? void 0 : actions2.length) && /* @__PURE__ */ jsx("div", { className: styles$L.actions, children: /* @__PURE__ */ jsx(Actions, { actions: actions2 }) })
+        /* @__PURE__ */ jsxs("div", { className: styles$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 }) })
         ] })
       ]
     }
@@ -4351,7 +4351,7 @@ var MenuCarat = /* @__PURE__ */ ((MenuCarat2) => {
   MenuCarat2["DOWN"] = "down";
   return MenuCarat2;
 })(MenuCarat || {});
-const Section$1 = ({
+const Section = ({
   section: section2,
   closeOnOptionClick,
   close: close2,
@@ -4364,7 +4364,7 @@ const Section$1 = ({
   switch (section2.type) {
     case MenuType.HEADING:
       return /* @__PURE__ */ jsx(
-        Heading$3,
+        Heading$2,
         {
           label: (section2 == null ? void 0 : section2.label) ?? "",
           onClick: section2.onClick,
@@ -4376,7 +4376,7 @@ const Section$1 = ({
       return /* @__PURE__ */ jsx(Divider$1, {});
     case MenuType.OPTION:
       return /* @__PURE__ */ jsx(
-        Option$2,
+        Option$1,
         {
           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$2 = ({
+const Layer$1 = ({
   sections,
   isNested,
   width: width2,
@@ -4470,11 +4470,11 @@ const Layer$2 = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cx$2(styles$L.layer, isNested ? styles$L.nested : null),
+      className: cx$2(styles$J.layer, isNested ? styles$J.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$1,
+        Section,
         {
           section: section2,
           closeOnOptionClick: section2.closeOnOptionClick,
@@ -4501,19 +4501,19 @@ const getType = (item2) => {
 };
 const wrapper$3 = "_wrapper_nwprz_1";
 const badge = "_badge_nwprz_5";
-const label$9 = "_label_nwprz_11";
+const label$7 = "_label_nwprz_11";
 const dark = "_dark_nwprz_23";
 const light = "_light_nwprz_26";
-const small$b = "_small_nwprz_29";
+const small$9 = "_small_nwprz_29";
 const dot$1 = "_dot_nwprz_33";
 const hasChildren = "_hasChildren_nwprz_39";
-const styles$K = {
+const styles$I = {
   wrapper: wrapper$3,
   badge,
-  label: label$9,
+  label: label$7,
   dark,
   light,
-  small: small$b,
+  small: small$9,
   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$K.wrapper, children: [
+  return /* @__PURE__ */ jsxs("div", { className: styles$I.wrapper, children: [
     visible && /* @__PURE__ */ jsx(
       "sup",
       {
         className: cx$2(
-          styles$K.badge,
-          isDark(color2) ? styles$K.dark : styles$K.light,
-          title2 !== null ? styles$K.label : styles$K.dot,
-          small2 ? styles$K.small : "",
-          children ? styles$K.hasChildren : ""
+          styles$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 : ""
         ),
         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$L.middleAlignedInline, children: [
-    /* @__PURE__ */ jsx("span", { className: styles$L.buttonLabel, children: label2 }),
-    /* @__PURE__ */ jsx("span", { className: styles$L.buttonCaret, children: /* @__PURE__ */ jsx(Icon, { icon: IconType.CHEVRON_DOWN }) })
+  const buttonLabel2 = trigger2 === TriggerType.BUTTON ? label2 : trigger2 === TriggerType.DROP_DOWN_BUTTON ? /* @__PURE__ */ jsxs("span", { className: styles$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 }) })
   ] }) : null;
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: cx$2(
-        styles$L.trigger,
-        disabled2 || disabledContext ? styles$L.disabled : null
+        styles$J.trigger,
+        disabled2 || disabledContext ? styles$J.disabled : null
       ),
       style: { width: width2 },
       children: /* @__PURE__ */ jsx(
@@ -4607,7 +4607,7 @@ const Text$1 = ({
   title: title2,
   carat,
   disabled: disabled2,
-  isOpen: isOpen2,
+  isOpen,
   selected: selected2
 }) => {
   let titleText;
@@ -4620,14 +4620,14 @@ const Text$1 = ({
     "div",
     {
       className: cx$2(
-        styles$L.trigger,
-        disabled2 ? styles$L.disabled : null,
-        isOpen2 ? styles$L.active : null,
-        selected2 ? styles$L.selected : null
+        styles$J.trigger,
+        disabled2 ? styles$J.disabled : null,
+        isOpen ? styles$J.active : null,
+        selected2 ? styles$J.selected : null
       ),
       children: [
-        /* @__PURE__ */ jsx("span", { className: styles$L.label, title: titleText, children: label2 }),
-        carat && carat === MenuCarat.RIGHT ? /* @__PURE__ */ jsx("span", { className: styles$L.arrow, children: /* @__PURE__ */ jsx(Icon, { icon: IconType.CHEVRON_RIGHT }) }) : carat && carat === MenuCarat.DOWN ? /* @__PURE__ */ jsx("span", { className: styles$L.arrow, children: /* @__PURE__ */ jsx(Icon, { icon: IconType.CHEVRON_DOWN }) }) : null
+        /* @__PURE__ */ jsx("span", { className: styles$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
       ]
     }
   );
@@ -4640,7 +4640,7 @@ const Component = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cx$2(styles$L.component, disabled2 ? styles$L.disabled : null),
+      className: cx$2(styles$J.component, disabled2 ? styles$J.disabled : null),
       "data-testid": testId,
       children: component2
     }
@@ -4666,7 +4666,7 @@ const TriggerTooltip = ({
     }
   );
 };
-const Trigger$1 = React__default.forwardRef(
+const Trigger = React__default.forwardRef(
   ({
     isDisabled,
     badgeTitle,
@@ -4684,7 +4684,7 @@ const Trigger$1 = React__default.forwardRef(
     component: component2,
     groupOrder,
     fullHeight,
-    isOpen: isOpen2,
+    isOpen,
     error: error2,
     warning: warning2,
     tooltip: tooltip2,
@@ -4705,7 +4705,7 @@ const Trigger$1 = React__default.forwardRef(
         loading,
         error: error2,
         warning: warning2,
-        active: isOpen2
+        active: isOpen
       }
     ) : trigger2 === TriggerType.TEXT ? /* @__PURE__ */ jsx(
       Text$1,
@@ -4714,7 +4714,7 @@ const Trigger$1 = React__default.forwardRef(
         title: title2,
         disabled: isDisabled,
         carat: !contextMenu ? isNested ? MenuCarat.RIGHT : MenuCarat.DOWN : void 0,
-        isOpen: isOpen2,
+        isOpen,
         selected: selected2
       }
     ) : trigger2 === TriggerType.COMPONENT ? /* @__PURE__ */ jsx(Component, { component: component2, disabled: isDisabled }) : null;
@@ -4723,7 +4723,7 @@ const Trigger$1 = React__default.forwardRef(
       "div",
       {
         ref: ref2,
-        className: styles$L.wrapper,
+        className: styles$J.wrapper,
         style: width2 ? { width: width2 } : {
           ...fullHeight && {
             height: "100%",
@@ -4763,9 +4763,9 @@ const useContextMenu = ({
 }) => {
   const { hasMousePosition, resetMousePosition, handleMouseEvent, trigger: trigger2 } = useMousePositionAsTrigger();
   const close2 = resetMousePosition;
-  const isOpen2 = hasMousePosition;
+  const isOpen = hasMousePosition;
   const { layerProps, renderLayer } = useLayer({
-    isOpen: isOpen2,
+    isOpen,
     trigger: trigger2,
     ...placementOptions$1(placement),
     possiblePlacements,
@@ -4773,9 +4773,9 @@ const useContextMenu = ({
     onOutsideClick: close2,
     overflowContainer
   });
-  const layer2 = isOpen2 && renderLayer(
+  const layer2 = isOpen && renderLayer(
     /* @__PURE__ */ jsx("div", { ...layerProps, children: /* @__PURE__ */ jsx(
-      Layer$2,
+      Layer$1,
       {
         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$1,
+      Trigger,
       {
         width: width2,
         fullHeight: fullHeightTrigger,
@@ -4887,11 +4887,11 @@ const DropDownMenu = ({
     showAllButton,
     possiblePlacements = ["bottom-start", "top-start"]
   } = menu2;
-  const [isOpen2, setOpen] = isBoolean$2(openProp) && isFunction$3(setOpenProp) ? [openProp, setOpenProp] : useState(false);
+  const [isOpen, 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: isOpen2,
+    isOpen,
     ...placementOptions$1(placement, isNested),
     possiblePlacements,
     ResizeObserver: index,
@@ -4905,7 +4905,7 @@ const DropDownMenu = ({
     if (isDisabled) {
       return;
     }
-    if (isOpen2) {
+    if (isOpen) {
       close2();
       return;
     }
@@ -4918,7 +4918,7 @@ const DropDownMenu = ({
   };
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsx(
-      Trigger$1,
+      Trigger,
       {
         ref: triggerProps.ref,
         isDisabled,
@@ -4936,7 +4936,7 @@ const DropDownMenu = ({
         isNested,
         component: component2,
         groupOrder,
-        isOpen: isOpen2,
+        isOpen,
         tooltip: tooltip2,
         error: error2,
         warning: warning2,
@@ -4944,16 +4944,16 @@ const DropDownMenu = ({
         selected: selected2
       }
     ),
-    isOpen2 && renderLayer(
+    isOpen && renderLayer(
       /* @__PURE__ */ jsx(
         "div",
         {
           ...layerProps,
-          className: styles$L.layerContainer,
+          className: styles$J.layerContainer,
           "data-testid": menu2.testId,
           onClick: (evt) => evt.stopPropagation(),
           children: /* @__PURE__ */ jsx(
-            Layer$2,
+            Layer$1,
             {
               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$M.actions), children: actions2.map((action2, index2) => {
+  return /* @__PURE__ */ jsx("div", { className: cx$2(styles$K.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$M.childComponent,
+            className: styles$K.childComponent,
             children: action2.childComponent
           },
           index2
@@ -5075,17 +5075,17 @@ const Actions = (props) => {
   }) });
 };
 const breadcrumb = "_breadcrumb_2k0cd_1";
-const small$a = "_small_2k0cd_4";
+const small$8 = "_small_2k0cd_4";
 const labelContainer = "_labelContainer_2k0cd_7";
 const active$5 = "_active_2k0cd_17";
-const disabled$7 = "_disabled_2k0cd_22";
+const disabled$5 = "_disabled_2k0cd_22";
 const separator = "_separator_2k0cd_27";
-const styles$J = {
+const styles$H = {
   breadcrumb,
-  small: small$a,
+  small: small$8,
   labelContainer,
   active: active$5,
-  disabled: disabled$7,
+  disabled: disabled$5,
   separator
 };
 var BreadcrumbLinkType = /* @__PURE__ */ ((BreadcrumbLinkType2) => {
@@ -5111,16 +5111,16 @@ const Link$2 = ({
     {
       onClick,
       className: cx$2(
-        styles$J.labelContainer,
-        active2 && styles$J.active,
-        (disabled2 || disabledContext) && styles$J.disabled
+        styles$H.labelContainer,
+        active2 && styles$H.active,
+        (disabled2 || disabledContext) && styles$H.disabled
       ),
       children: isLink ? /* @__PURE__ */ jsx("a", { href: url, children: label2 }) : isCustom ? element : label2
     }
   );
 };
 const Breadcrumb = ({ links, small: small2 = false }) => {
-  return /* @__PURE__ */ jsx("div", { className: cx$2(styles$J.breadcrumb, small2 && styles$J.small), children: links.map((link2, i) => {
+  return /* @__PURE__ */ jsx("div", { className: cx$2(styles$H.breadcrumb, small2 && styles$H.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$J.separator, children: "/" })
+      !isFinal && /* @__PURE__ */ jsx("span", { className: styles$H.separator, children: "/" })
     ] }, i);
   }) });
 };
-const label$8 = "_label_iu2wi_1";
+const label$6 = "_label_iu2wi_1";
 const buttonGroup = "_buttonGroup_iu2wi_11";
-const styles$I = {
-  label: label$8,
+const styles$G = {
+  label: label$6,
   buttonGroup
 };
 const ButtonGroup = (props) => {
@@ -5196,7 +5196,7 @@ const ButtonGroup = (props) => {
   };
   const renderHeader = () => {
     if (header2) {
-      return /* @__PURE__ */ jsx("label", { className: styles$I.label, children: header2 });
+      return /* @__PURE__ */ jsx("label", { className: styles$G.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$I.buttonGroup, "data-testid": testId, children: renderButtons() })
+    /* @__PURE__ */ jsx("div", { className: styles$G.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$H = {
+const styles$F = {
   card,
   bordered: bordered$2,
   raised,
@@ -5284,20 +5284,20 @@ const Card = ({
     "div",
     {
       className: cx$2(
-        styles$H.card,
-        bordered2 ? styles$H.bordered : "",
-        raised2 ? styles$H.raised : ""
+        styles$F.card,
+        bordered2 ? styles$F.bordered : "",
+        raised2 ? styles$F.raised : ""
       ),
       style: { margin: margin2 },
       children: [
-        heading2 ? /* @__PURE__ */ jsx("div", { className: cx$2(styles$H.cardHeader), children: heading2 }) : null,
+        heading2 ? /* @__PURE__ */ jsx("div", { className: cx$2(styles$F.cardHeader), children: heading2 }) : null,
         /* @__PURE__ */ jsx(
           "div",
           {
             className: cx$2(
-              styles$H.cardContent,
-              heading2 ? styles$H.cardContentBorderTop : "",
-              padding2 ? styles$H.padding : ""
+              styles$F.cardContent,
+              heading2 ? styles$F.cardContentBorderTop : "",
+              padding2 ? styles$F.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, message2) {
-  var e2 = new Error(message2);
+typeof SuppressedError === "function" ? SuppressedError : function(error2, suppressed, message) {
+  var e2 = new Error(message);
   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$G = {
+const styles$E = {
   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$9 = "_small_11ofj_22";
+const small$7 = "_small_11ofj_22";
 const link$1 = "_link_11ofj_25";
-const styles$F = {
+const styles$D = {
   bold: bold$1,
   center,
   muted: muted$1,
@@ -6519,7 +6519,7 @@ const styles$F = {
   success: success$1,
   warning: warning$5,
   error: error$2,
-  small: small$9,
+  small: small$7,
   link: link$1
 };
 const Text = ({
@@ -6539,16 +6539,16 @@ const Text = ({
     "span",
     {
       className: cx$2(
-        bold2 && styles$F.bold,
-        center2 && styles$F.center,
-        error2 && styles$F.error,
-        faint2 && styles$F.faint,
-        link2 && styles$F.link,
-        muted2 && styles$F.muted,
-        onClick && styles$F.clickable,
-        small2 && styles$F.small,
-        success2 && styles$F.success,
-        warning2 && styles$F.warning
+        bold2 && styles$D.bold,
+        center2 && styles$D.center,
+        error2 && styles$D.error,
+        faint2 && styles$D.faint,
+        link2 && styles$D.link,
+        muted2 && styles$D.muted,
+        onClick && styles$D.clickable,
+        small2 && styles$D.small,
+        success2 && styles$D.success,
+        warning2 && styles$D.warning
       ),
       onClick,
       children
@@ -6558,9 +6558,9 @@ const Text = ({
 const cssAlignClass = (align) => {
   switch (align) {
     case Align.LEFT:
-      return styles$G.alignLeft;
+      return styles$E.alignLeft;
     case Align.RIGHT:
-      return styles$G.alignRight;
+      return styles$E.alignRight;
     default:
       return "";
   }
@@ -6573,7 +6573,7 @@ const Divider = ({
 }) => /* @__PURE__ */ jsx(
   "div",
   {
-    className: `${styles$G.divider} ${cssAlignClass(align)}`,
+    className: `${styles$E.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$4 = "_heading_yhdiy_1";
+const heading$3 = "_heading_yhdiy_1";
 const top$1 = "_top_yhdiy_10";
-const icons$2 = "_icons_yhdiy_20";
-const styles$E = {
-  heading: heading$4,
+const icons$1 = "_icons_yhdiy_20";
+const styles$C = {
+  heading: heading$3,
   top: top$1,
-  icons: icons$2
+  icons: icons$1
 };
-const Heading$2 = ({
+const Heading$1 = ({
   children,
   helpText,
   onClick,
@@ -6606,13 +6606,13 @@ const Heading$2 = ({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cx$2(styles$E.heading, top2 ? styles$E.top : ""),
+      className: cx$2(styles$C.heading, top2 ? styles$C.top : ""),
       style: { marginBottom },
       onClick,
       "data-testid": testId,
       children: [
         children,
-        /* @__PURE__ */ jsxs("div", { className: styles$E.icons, children: [
+        /* @__PURE__ */ jsxs("div", { className: styles$C.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$D = {
+const styles$B = {
   dialog,
   inline: inline$3,
   scroll: scroll$3,
@@ -6670,16 +6670,16 @@ const Dialog = ({ dialog: dialog2 }) => {
     "div",
     {
       className: cx$2(
-        styles$D.dialog,
-        width2 ? styles$D.inline : null,
-        scroll3 ? styles$D.scroll : null
+        styles$B.dialog,
+        width2 ? styles$B.inline : null,
+        scroll3 ? styles$B.scroll : null
       ),
       style: { width: width2, height: height2 },
       "data-testid": testId ?? null,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: styles$D.header, children: [
-          /* @__PURE__ */ jsx(Heading$2, { testId: testId && `${testId}-heading`, top: true, marginBottom: 0, children: heading2 }),
-          onClose ? /* @__PURE__ */ jsx("div", { className: styles$D.dismiss, children: /* @__PURE__ */ jsx(
+        /* @__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(
             Button$1,
             {
               icon: IconType.CLOSE,
@@ -6696,7 +6696,7 @@ const Dialog = ({ dialog: dialog2 }) => {
           "div",
           {
             "data-testid": testId && `${testId}-content`,
-            className: styles$D.content,
+            className: styles$B.content,
             style: { padding: contentPadding2 },
             children: convertStringToJsx(content2)
           }
@@ -6705,7 +6705,7 @@ const Dialog = ({ dialog: dialog2 }) => {
           "div",
           {
             "data-testid": testId && `${testId}-footer`,
-            className: styles$D.footer,
+            className: styles$B.footer,
             children: footer2
           }
         )
@@ -6713,16 +6713,16 @@ const Dialog = ({ dialog: dialog2 }) => {
     }
   );
 };
-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 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 inline$2 = "_inline_1f40p_90";
 const left$2 = "_left_1f40p_93";
-const right$6 = "_right_1f40p_96";
+const right$5 = "_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$6 = "_disabled_1f40p_222";
+const disabled$4 = "_disabled_1f40p_222";
 const tabsContent = "_tabsContent_1f40p_229";
 const resizeHandle = "_resizeHandle_1f40p_235";
-const styles$C = {
-  inputInTable: inputInTable$a,
-  inputHover: inputHover$a,
-  inputFocus: inputFocus$a,
-  inputError: inputError$a,
-  inputWarning: inputWarning$a,
-  inputDisabled: inputDisabled$a,
-  hideScrollbars: hideScrollbars$a,
+const styles$A = {
+  inputInTable: inputInTable$9,
+  inputHover: inputHover$9,
+  inputFocus: inputFocus$9,
+  inputError: inputError$9,
+  inputWarning: inputWarning$9,
+  inputDisabled: inputDisabled$9,
+  hideScrollbars: hideScrollbars$9,
   inline: inline$2,
   left: left$2,
-  right: right$6,
+  right: right$5,
   fixed: fixed$1,
   border: border$1,
   shadow,
@@ -6761,7 +6761,7 @@ const styles$C = {
   tabs: tabs$1,
   tab: tab$1,
   active: active$4,
-  disabled: disabled$6,
+  disabled: disabled$4,
   tabsContent,
   resizeHandle
 };
@@ -6779,13 +6779,13 @@ const DrawerTabs = ({
   testId
 }) => {
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    /* @__PURE__ */ jsx("div", { className: styles$C.tabs, children: tabs2.map((tab2, index2) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: styles$A.tabs, children: tabs2.map((tab2, index2) => /* @__PURE__ */ jsx(
       "div",
       {
         className: cx$2(
-          styles$C.tab,
-          activeTab === index2 && open ? styles$C.active : "",
-          tab2.disabled ? styles$C.disabled : ""
+          styles$A.tab,
+          activeTab === index2 && open ? styles$A.active : "",
+          tab2.disabled ? styles$A.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$C.tabsContent,
+          className: styles$A.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$C.resizeHandle, ...rest, children: /* @__PURE__ */ jsx(Icon, { icon: IconType.DRAG }) });
+    return /* @__PURE__ */ jsx("div", { ref: ref2, className: styles$A.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$C.isResizing : "",
+      className: isResizing2 ? styles$A.isResizing : "",
       onResizeStart: () => {
         if (setOpen) setOpen(true);
         if (onResize) onResize(width2);
@@ -8845,17 +8845,17 @@ const Drawer = ({
         "div",
         {
           className: cx$2(
-            styles$C.drawer,
-            shadow4 ? styles$C.shadow : "",
-            fixed2 ? styles$C.fixed : styles$C.inline,
-            right2 ? styles$C.right : styles$C.left
+            styles$A.drawer,
+            shadow4 ? styles$A.shadow : "",
+            fixed2 ? styles$A.fixed : styles$A.inline,
+            right2 ? styles$A.right : styles$A.left
           ),
           style: { top: top2 },
           children: [
             /* @__PURE__ */ jsx(
               "div",
               {
-                className: cx$2(styles$C.drawerContent, border2 && styles$C.border),
+                className: cx$2(styles$A.drawerContent, border2 && styles$A.border),
                 style: {
                   background: background2,
                   borderColor: typeof border2 === "string" ? border2 : void 0,
@@ -8881,9 +8881,9 @@ const Drawer = ({
               "span",
               {
                 className: cx$2(
-                  styles$C.toggleButton,
-                  localOpen && (isStandardButton || isCustomButton && buttonAnimate) ? styles$C.toggleButtonOpen : "",
-                  buttonPosition === "top" ? styles$C.top : styles$C.bottom
+                  styles$A.toggleButton,
+                  localOpen && (isStandardButton || isCustomButton && buttonAnimate) ? styles$A.toggleButtonOpen : "",
+                  buttonPosition === "top" ? styles$A.top : styles$A.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$B = {
+const styles$z = {
   empty: empty$2,
   text: text$2
 };
@@ -8917,7 +8917,7 @@ const Empty = ({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: styles$B.empty,
+      className: styles$z.empty,
       style: { width: width2, height: height2 },
       "data-testid": testId,
       children: [
@@ -8949,7 +8949,7 @@ const Empty = ({
             )
           ] })
         ] }) }),
-        text2 !== "" && /* @__PURE__ */ jsx("div", { className: styles$B.text, children: /* @__PURE__ */ jsx(Text, { faint: true, children: text2 }) }),
+        text2 !== "" && /* @__PURE__ */ jsx("div", { className: styles$z.text, children: /* @__PURE__ */ jsx(Text, { faint: true, children: text2 }) }),
         children
       ]
     }
@@ -9003,7 +9003,7 @@ const FileButton = ({
   ] });
 };
 const inputGroup = "_inputGroup_biuoa_1";
-const styles$A = {
+const styles$y = {
   inputGroup
 };
 const isDOMTypeElement = (element) => {
@@ -9028,43 +9028,43 @@ const InputGroup = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cx$2(styles$A.inputGroup),
+      className: cx$2(styles$y.inputGroup),
       style: { width: width2 },
       children: elements
     }
   );
 };
-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 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 Input$1 = forwardRef(
+const Input = forwardRef(
   ({
     error: error2 = null,
     tooltip: tooltip2 = null,
@@ -9100,11 +9100,11 @@ const Input$1 = forwardRef(
       if (groupOrder) {
         switch (groupOrder) {
           case "first":
-            return styles$z.groupOrderFirst;
+            return styles$x.groupOrderFirst;
           case "last":
-            return styles$z.groupOrderLast;
+            return styles$x.groupOrderLast;
           default:
-            return styles$z.groupOrderMiddle;
+            return styles$x.groupOrderMiddle;
         }
       }
       return "";
@@ -9138,10 +9138,10 @@ const Input$1 = forwardRef(
             autoComplete: "off",
             disabled: disabled2 || disabledContext,
             className: cx$2(
-              styles$z.input,
-              right2 ? styles$z.right : "",
-              small2 ? styles$z.small : "",
-              isInTable2 ? styles$z.isInTable : ""
+              styles$x.input,
+              right2 ? styles$x.right : "",
+              small2 ? styles$x.small : "",
+              isInTable2 ? styles$x.isInTable : ""
             ),
             style: { width: width2 },
             "data-error": error2 || null,
@@ -9154,7 +9154,7 @@ const Input$1 = forwardRef(
   }
 );
 const fileInput = "_fileInput_1elar_1";
-const styles$y = {
+const styles$w = {
   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$1, { value: fileName || "", placeholder: placeholder3, disabled: true }),
+      /* @__PURE__ */ jsx(Input, { value: fileName || "", placeholder: placeholder3, disabled: true }),
       /* @__PURE__ */ jsx(
         Button$1,
         {
@@ -9248,7 +9248,7 @@ const FileInput = ({
       {
         name: name2,
         ref: inputRef,
-        className: styles$y.fileInput,
+        className: styles$w.fileInput,
         type: "file",
         accept,
         multiple: multi,
@@ -9258,13 +9258,13 @@ const FileInput = ({
     )
   ] });
 };
-const label$7 = "_label_18pfe_1";
+const label$5 = "_label_18pfe_1";
 const labelLeft$1 = "_labelLeft_18pfe_5";
-const icons$1 = "_icons_18pfe_13";
-const styles$x = {
-  label: label$7,
+const icons = "_icons_18pfe_13";
+const styles$v = {
+  label: label$5,
   labelLeft: labelLeft$1,
-  icons: icons$1
+  icons
 };
 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$x.label, labelLeft2 ? styles$x.labelLeft : ""), children: /* @__PURE__ */ jsxs("label", { style: { width: width2 || "" }, children: [
+  return /* @__PURE__ */ jsx("div", { className: cx$2(styles$v.label, labelLeft2 ? styles$v.labelLeft : ""), children: /* @__PURE__ */ jsxs("label", { style: { width: width2 || "" }, children: [
     label2,
-    /* @__PURE__ */ jsxs("div", { className: styles$x.icons, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles$v.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$w = {
+const styles$u = {
   field,
   labelLeft,
   fieldInput,
@@ -9352,7 +9352,7 @@ const Field = ({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cx$2(styles$w.field, labelLeft2 ? styles$w.labelLeft : ""),
+      className: cx$2(styles$u.field, labelLeft2 ? styles$u.labelLeft : ""),
       "data-testid": testId,
       children: [
         (label2 || labelLeft2) && /* @__PURE__ */ jsx(
@@ -9369,7 +9369,7 @@ const Field = ({
             labelLeft: labelLeft2
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: styles$w.fieldInput, children })
+        /* @__PURE__ */ jsx("div", { className: styles$u.fieldInput, children })
       ]
     }
   );
@@ -9400,11 +9400,11 @@ const Flex = ({
   );
 };
 const formRow = "_formRow_odewu_1";
-const styles$v = {
+const styles$t = {
   formRow
 };
 const FormRow = ({ children }) => {
-  return /* @__PURE__ */ jsx("div", { className: styles$v.formRow, children });
+  return /* @__PURE__ */ jsx("div", { className: styles$t.formRow, children });
 };
 const getGapValue = (gap) => {
   if (typeof gap === "boolean") {
@@ -9460,16 +9460,16 @@ const Grid = ({
   );
 };
 const addon = "_addon_b4w53_1";
-const small$7 = "_small_b4w53_12";
-const groupOrderFirst$2 = "_groupOrderFirst_b4w53_16";
-const groupOrderMiddle$2 = "_groupOrderMiddle_b4w53_17";
-const groupOrderLast$2 = "_groupOrderLast_b4w53_21";
-const styles$u = {
+const 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 = {
   addon,
-  small: small$7,
-  groupOrderFirst: groupOrderFirst$2,
-  groupOrderMiddle: groupOrderMiddle$2,
-  groupOrderLast: groupOrderLast$2
+  small: small$5,
+  groupOrderFirst: groupOrderFirst$1,
+  groupOrderMiddle: groupOrderMiddle$1,
+  groupOrderLast: groupOrderLast$1
 };
 const InputGroupAddon = ({
   children,
@@ -9480,16 +9480,16 @@ const InputGroupAddon = ({
     if (groupOrder) {
       switch (groupOrder) {
         case GroupOrder.FIRST:
-          return styles$u.groupOrderFirst;
+          return styles$s.groupOrderFirst;
         case GroupOrder.LAST:
-          return styles$u.groupOrderLast;
+          return styles$s.groupOrderLast;
         default:
-          return styles$u.groupOrderMiddle;
+          return styles$s.groupOrderMiddle;
       }
     }
     return "";
   })();
-  return /* @__PURE__ */ jsx("span", { className: cx$2(styles$u.addon, order2, small2 ? styles$u.small : ""), children });
+  return /* @__PURE__ */ jsx("span", { className: cx$2(styles$s.addon, order2, small2 ? styles$s.small : ""), children });
 };
 function _typeof$2(o) {
   "@babel/helpers - typeof";
@@ -10895,12 +10895,12 @@ function isPlainObject$3(obj) {
   }
   return proto === baseProto;
 }
-function warning$4(message2) {
+function warning$4(message) {
   if (typeof console !== "undefined" && typeof console.error === "function") {
-    console.error(message2);
+    console.error(message);
   }
   try {
-    throw new Error(message2);
+    throw new Error(message);
   } 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, message2) {
+function invariant$4(condition, message) {
   if (isProduction$2) {
     throw new Error(prefix$2);
   }
-  var provided = typeof message2 === "function" ? message2() : message2;
+  var provided = typeof message === "function" ? message() : message;
   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(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 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 getFormattedMessage = function getFormattedMessage2(message2) {
-  return [getDevMessage(message2), "color: #00C584; font-size: 1.2em; font-weight: bold;", "line-height: 1.5", "color: #723874;"];
+var getFormattedMessage = function getFormattedMessage2(message) {
+  return [getDevMessage(message), "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, message2) {
+function log(type, message) {
   var _console;
   if (isProduction$1) {
     return;
@@ -11395,7 +11395,7 @@ function log(type, message2) {
   if (typeof window !== "undefined" && window[isDisabledFlag]) {
     return;
   }
-  (_console = console)[type].apply(_console, getFormattedMessage(message2));
+  (_console = console)[type].apply(_console, getFormattedMessage(message));
 }
 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(message2) {
-  this.message = message2;
+function RbdInvariant(message) {
+  this.message = message;
 }
 RbdInvariant.prototype.toString = function toString() {
   return this.message;
 };
-function invariant$3(condition, message2) {
+function invariant$3(condition, message) {
   if (isProduction$1$1) {
     throw new RbdInvariant(prefix);
   } else {
-    throw new RbdInvariant(prefix + ": " + (message2 || ""));
+    throw new RbdInvariant(prefix + ": " + (message || ""));
   }
 }
 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 now2 = whatIsDraggedOver(impact);
+  var now = whatIsDraggedOver(impact);
   if (!last) {
     return droppables;
   }
-  if (last === now2) {
+  if (last === now) {
     return droppables;
   }
   var lastDroppable = droppables[last];
@@ -14094,7 +14094,7 @@ var getExpiringAnnounce = function(announce) {
   var timeoutId = setTimeout(function() {
     isExpired = true;
   });
-  var result = function result2(message2) {
+  var result = function result2(message) {
     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(message2);
+    announce(message);
     clearTimeout(timeoutId);
   };
   result.wasCalled = function() {
@@ -14411,7 +14411,7 @@ var dimensionMarshalStopper = function(marshal) {
     };
   };
 };
-var focus$1 = function(marshal) {
+var focus = 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$1(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(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 now2 = Date.now();
-  var runTime = now2 - startOfRange;
+  var now = Date.now();
+  var runTime = now - startOfRange;
   if (runTime >= stopAt) {
     return proposedScroll;
   }
@@ -15518,11 +15518,11 @@ function useFocusMarshal(contextId) {
   }, [tryGiveFocus]);
   var tryRecordFocus = useCallback(function tryRecordFocus2(id2) {
     recordRef.current = null;
-    var focused2 = document.activeElement;
-    if (!focused2) {
+    var focused = document.activeElement;
+    if (!focused) {
       return;
     }
-    if (focused2.getAttribute(dragHandle.draggableId) !== id2) {
+    if (focused.getAttribute(dragHandle.draggableId) !== id2) {
       return;
     }
     recordRef.current = id2;
@@ -15722,13 +15722,13 @@ function useAnnouncer(contextId) {
       });
     };
   }, [id2]);
-  var announce = useCallback(function(message2) {
+  var announce = useCallback(function(message) {
     var el2 = ref2.current;
     if (el2) {
-      el2.textContent = message2;
+      el2.textContent = message;
       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      "' + message2 + '"\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      "' + message + '"\n    ') : void 0;
   }, []);
   return announce;
 }
@@ -18677,16 +18677,16 @@ var InfiniteScroll = (
     return InfiniteScroll2;
   }(Component$1)
 );
-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 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 header$1 = "_header_1llou_77";
 const headerTitle = "_headerTitle_1llou_77";
-const heading$3 = "_heading_1llou_78";
+const heading$2 = "_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$5 = "_disabled_1llou_215";
-const label$6 = "_label_1llou_226";
-const details$2 = "_details_1llou_237";
+const disabled$3 = "_disabled_1llou_215";
+const label$4 = "_label_1llou_226";
+const details$1 = "_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$4 = "_right_1llou_268";
+const right$3 = "_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$8,
-  inputHover: inputHover$8,
-  inputFocus: inputFocus$8,
-  inputError: inputError$8,
-  inputWarning: inputWarning$8,
-  inputDisabled: inputDisabled$8,
-  hideScrollbars: hideScrollbars$8,
+  inputInTable: inputInTable$7,
+  inputHover: inputHover$7,
+  inputFocus: inputFocus$7,
+  inputError: inputError$7,
+  inputWarning: inputWarning$7,
+  inputDisabled: inputDisabled$7,
+  hideScrollbars: hideScrollbars$7,
   header: header$1,
   headerTitle,
-  heading: heading$3,
+  heading: heading$2,
   itemHeader,
   narrow,
   stickyHeader,
@@ -18742,15 +18742,15 @@ const listStyles = {
   action,
   active: active$3,
   indented,
-  disabled: disabled$5,
-  label: label$6,
-  details: details$2,
+  disabled: disabled$3,
+  label: label$4,
+  details: details$1,
   metadata,
   itemContent,
   indentIcon,
   expandIcon,
   expanded,
-  right: right$4,
+  right: right$3,
   actions,
   scrollableList,
   infiniteScrollContainer,
@@ -18785,7 +18785,7 @@ const ListHeading = forwardRef(
               onClickToggleNarrow: onToggleNarrow
             }
           ),
-          name2 && /* @__PURE__ */ jsx("div", { className: listStyles.headerTitle, children: /* @__PURE__ */ jsx(Heading$2, { top: true, marginBottom: 0, children: name2 }) }),
+          name2 && /* @__PURE__ */ jsx("div", { className: listStyles.headerTitle, children: /* @__PURE__ */ jsx(Heading$1, { 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$1 = "_details_477i5_53";
-const styles$t = {
+const details = "_details_477i5_53";
+const styles$r = {
   loader,
   fullViewPortSize,
   cover,
   dimmer,
   content: content$2,
   text: text$1,
-  details: details$1
+  details
 };
 const Loader = ({
   width: width2,
@@ -19002,22 +19002,22 @@ const Loader = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cx$2(styles$t.loader, cover2 ? styles$t.cover : "", {
-        [styles$t.fullViewPortSize]: fullViewPortSize2
+      className: cx$2(styles$r.loader, cover2 ? styles$r.cover : "", {
+        [styles$r.fullViewPortSize]: fullViewPortSize2
       }),
       style: { width: width2, height: height2 },
       "data-testid": testId,
-      children: /* @__PURE__ */ jsx("div", { className: styles$t.dimmer, style: { background: background2, color: color2 }, children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsx("div", { className: styles$r.dimmer, style: { background: background2, color: color2 }, children: /* @__PURE__ */ jsxs(
         "div",
         {
-          className: styles$t.content,
+          className: styles$r.content,
           "data-testid": testId && `${testId}-content`,
           children: [
             children,
             text2 && /* @__PURE__ */ jsx(
               "div",
               {
-                className: styles$t.text,
+                className: styles$r.text,
                 "data-testid": testId && `${testId}-text`,
                 children: text2
               }
@@ -19025,7 +19025,7 @@ const Loader = ({
             details2 && /* @__PURE__ */ jsx(
               "div",
               {
-                className: styles$t.details,
+                className: styles$r.details,
                 "data-testid": testId && `${testId}-details`,
                 children: details2
               }
@@ -19208,13 +19208,13 @@ const List = ({
     }
   );
 };
-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 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 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$2 = "_heading_1okhq_124";
-const icon$3 = "_icon_1okhq_131";
+const heading$1 = "_heading_1okhq_124";
+const icon$2 = "_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$s = {
-  inputInTable: inputInTable$7,
-  inputHover: inputHover$7,
-  inputFocus: inputFocus$7,
-  inputError: inputError$7,
-  inputWarning: inputWarning$7,
-  inputDisabled: inputDisabled$7,
-  hideScrollbars: hideScrollbars$7,
+const styles$q = {
+  inputInTable: inputInTable$6,
+  inputHover: inputHover$6,
+  inputFocus: inputFocus$6,
+  inputError: inputError$6,
+  inputWarning: inputWarning$6,
+  inputDisabled: inputDisabled$6,
+  hideScrollbars: hideScrollbars$6,
   container: container$1,
   block: block$1,
   info,
@@ -19244,8 +19244,8 @@ const styles$s = {
   warning: warning$2,
   error,
   content: content$1,
-  heading: heading$2,
-  icon: icon$3,
+  heading: heading$1,
+  icon: icon$2,
   dismiss: dismiss$1,
   absolute,
   legendToggle,
@@ -19273,9 +19273,9 @@ const Dismiss = ({
     "div",
     {
       className: cx$2(
-        styles$s.dismiss,
-        isInToast ? styles$s.absolute : "",
-        type === MessageType.INFO ? styles$s.info : type === MessageType.SUCCESS ? styles$s.success : type === MessageType.WARNING ? styles$s.warning : type === MessageType.ERROR ? styles$s.error : null
+        styles$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
       ),
       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$s.legendToggle), onClick: dispatch, children: visible ? "Hide details" : "Show details" }),
-    visible ? /* @__PURE__ */ jsx("div", { className: styles$s.detailsText, children: details2 }) : null
+    /* @__PURE__ */ jsx("div", { className: cx$2(styles$q.legendToggle), onClick: dispatch, children: visible ? "Hide details" : "Show details" }),
+    visible ? /* @__PURE__ */ jsx("div", { className: styles$q.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: message2 }) => {
+const Message = ({ message }) => {
   const {
     visible,
     type = MessageType.INFO,
@@ -19325,7 +19325,7 @@ const Message = ({ message: message2 }) => {
     onClose,
     width: width2,
     maxHeight
-  } = message2;
+  } = message;
   const initialState2 = {
     detailsVisible
   };
@@ -19334,15 +19334,15 @@ const Message = ({ message: message2 }) => {
     "div",
     {
       className: cx$2(
-        styles$s.container,
-        width2 ? styles$s.block : null,
-        type === MessageType.SUCCESS ? styles$s.success : type === MessageType.WARNING ? styles$s.warning : type === MessageType.ERROR ? styles$s.error : styles$s.info
+        styles$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
       ),
       style: { width: width2, maxHeight },
       children: [
-        /* @__PURE__ */ jsx("div", { children: icon2 ? /* @__PURE__ */ jsx("div", { className: styles$s.icon, children: /* @__PURE__ */ jsx(DialogIcon, { type }) }) : null }),
-        /* @__PURE__ */ jsxs("div", { className: styles$s.content, children: [
-          heading2 ? /* @__PURE__ */ jsx("div", { className: styles$s.heading, children: heading2 }) : null,
+        /* @__PURE__ */ jsx("div", { children: icon2 ? /* @__PURE__ */ jsx("div", { className: styles$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: content2 }),
           details2 ? /* @__PURE__ */ jsx(
             Details,
@@ -19352,7 +19352,7 @@ const Message = ({ message: message2 }) => {
               dispatch: () => dispatch({ type: MessageToggle.TOGGLE_DETAILS })
             }
           ) : null,
-          !!footer2 && /* @__PURE__ */ jsx("div", { className: styles$s.footer, children: footer2 })
+          !!footer2 && /* @__PURE__ */ jsx("div", { className: styles$q.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$r = {
+const styles$p = {
   wrapper: wrapper$2,
   contentContainer,
   centered,
@@ -19404,12 +19404,12 @@ const Wrapper = ({ children }) => {
       }
     }
   }, []);
-  return /* @__PURE__ */ jsx("div", { ref: wrapperRef, tabIndex: -1, className: cx$2(styles$r.wrapper), children });
+  return /* @__PURE__ */ jsx("div", { ref: wrapperRef, tabIndex: -1, className: cx$2(styles$p.wrapper), children });
 };
 const Content$2 = ({ children, width: width2, centered: centered2 }) => /* @__PURE__ */ jsx(
   "div",
   {
-    className: cx$2(styles$r.contentContainer, centered2 ? styles$r.centered : ""),
+    className: cx$2(styles$p.contentContainer, centered2 ? styles$p.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$1 = "_heading_12x4u_32";
-const styles$q = {
+const heading = "_heading_12x4u_32";
+const styles$o = {
   menu: menu$1,
   header,
   item: item$3,
-  heading: heading$1
+  heading
 };
-const Option$1 = ({
+const Option = ({
   option: option2,
   onChange
 }) => {
   const { key: key2, label: label2, selected: selected2 } = option2;
-  return /* @__PURE__ */ jsx("div", { className: styles$q.item, children: /* @__PURE__ */ jsx(CheckBox, { label: label2, noMargin: true, checked: selected2, onChange }) }, key2);
+  return /* @__PURE__ */ jsx("div", { className: styles$o.item, children: /* @__PURE__ */ jsx(CheckBox, { label: label2, noMargin: true, checked: selected2, onChange }) }, key2);
 };
-const Heading$1 = ({ label: label2 }) => /* @__PURE__ */ jsx("div", { className: styles$q.heading, children: label2 });
+const Heading = ({ label: label2 }) => /* @__PURE__ */ jsx("div", { className: styles$o.heading, children: label2 });
 var DropdownType = /* @__PURE__ */ ((DropdownType2) => {
   DropdownType2["HEADING"] = "Heading";
   DropdownType2["DIVIDER"] = "Divider";
   DropdownType2["DEFAULT"] = "Default";
   return DropdownType2;
 })(DropdownType || {});
-const Layer$1 = ({
+const Layer = ({
   options,
   onChangeOptions,
   showHeader,
   maxHeight
 }) => {
-  return /* @__PURE__ */ jsxs("div", { className: cx$2("menu", styles$q.menu), style: { maxHeight }, children: [
+  return /* @__PURE__ */ jsxs("div", { className: cx$2("menu", styles$o.menu), style: { maxHeight }, children: [
     showHeader && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-      /* @__PURE__ */ jsxs("div", { className: styles$q.header, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles$o.header, children: [
         /* @__PURE__ */ jsx(
           "a",
           {
@@ -19532,12 +19532,12 @@ const Layer$1 = ({
     options.map((option2, index2) => {
       switch (option2.type) {
         case DropdownType.HEADING:
-          return /* @__PURE__ */ jsx(Heading$1, { label: option2.label }, index2);
+          return /* @__PURE__ */ jsx(Heading, { label: option2.label }, index2);
         case DropdownType.DIVIDER:
           return /* @__PURE__ */ jsx(Divider, { margin: 0 }, index2);
         default:
           return /* @__PURE__ */ jsx(
-            Option$1,
+            Option,
             {
               option: option2,
               onChange: (evt) => {
@@ -19570,7 +19570,7 @@ const OptionDropdown = ({
         trigger: TriggerType.DROP_DOWN_BUTTON,
         possiblePlacements: ["top-start", "bottom-start"],
         sections: /* @__PURE__ */ jsx(
-          Layer$1,
+          Layer,
           {
             options,
             onChangeOptions: (evt, nextOptions) => {
@@ -19589,7 +19589,7 @@ const OptionDropdown = ({
 };
 const page = "_page_beskc_1";
 const scroll$1 = "_scroll_beskc_23";
-const styles$p = {
+const styles$n = {
   page,
   scroll: scroll$1
 };
@@ -19604,43 +19604,43 @@ const Page = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cx$2(styles$p.page, scroll3 ? styles$p.scroll : ""),
+      className: cx$2(styles$n.page, scroll3 ? styles$n.scroll : ""),
       style: { left: left2, padding: padding2, top: top2 },
       children
     }
   );
 };
-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 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 select = "_select_sl2b5_77";
-const isInTable$2 = "_isInTable_sl2b5_121";
+const isInTable$1 = "_isInTable_sl2b5_121";
 const unSelected = "_unSelected_sl2b5_133";
-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,
+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,
   select,
-  isInTable: isInTable$2,
+  isInTable: isInTable$1,
   unSelected,
-  small: small$6,
-  right: right$3,
-  groupOrderFirst: groupOrderFirst$1,
-  groupOrderMiddle: groupOrderMiddle$1,
-  groupOrderLast: groupOrderLast$1
+  small: small$4,
+  right: right$2,
+  groupOrderFirst,
+  groupOrderMiddle,
+  groupOrderLast
 };
 const NativeSelect = ({
   disabled: disabled2 = false,
@@ -19708,11 +19708,11 @@ const NativeSelect = ({
     if (groupOrder) {
       switch (groupOrder) {
         case GroupOrder.FIRST:
-          return styles$o.groupOrderFirst;
+          return styles$m.groupOrderFirst;
         case GroupOrder.LAST:
-          return styles$o.groupOrderLast;
+          return styles$m.groupOrderLast;
         default:
-          return styles$o.groupOrderMiddle;
+          return styles$m.groupOrderMiddle;
       }
     }
     return "";
@@ -19730,11 +19730,11 @@ const NativeSelect = ({
         "select",
         {
           className: cx$2(
-            styles$o.select,
-            isUnselected ? styles$o.unSelected : "",
-            right2 ? styles$o.right : "",
-            small2 ? styles$o.small : "",
-            isInTable2 ? styles$o.isInTable : "",
+            styles$m.select,
+            isUnselected ? styles$m.unSelected : "",
+            right2 ? styles$m.right : "",
+            small2 ? styles$m.small : "",
+            isInTable2 ? styles$m.isInTable : "",
             order2
           ),
           style: {
@@ -19800,610 +19800,156 @@ 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();
+var ReducerAction = /* @__PURE__ */ ((ReducerAction2) => {
+  ReducerAction2["SET_VISIBLE_OPTIONS"] = "SET_VISIBLE_OPTIONS";
+  ReducerAction2["RESET_LAYER_FOCUS"] = "RESET_LAYER_FOCUS";
+  ReducerAction2["CLEAR_SEARCH"] = "CLEAR_SEARCH";
+  ReducerAction2["ON_CHANGE_SEARCH"] = "ON_CHANGE_SEARCH";
+  ReducerAction2["FOCUS_TRIGGER_INPUTS"] = "FOCUS_TRIGGER_INPUTS";
+  ReducerAction2["BLUR_TRIGGER_INPUTS"] = "BLUR_TRIGGER_INPUTS";
+  ReducerAction2["FOCUS_LAYER_OPTIONS"] = "FOCUS_LAYER_OPTIONS";
+  ReducerAction2["OPEN_LAYER"] = "OPEN_LAYER";
+  ReducerAction2["CLOSE_LAYER"] = "CLOSE_LAYER";
+  return ReducerAction2;
+})(ReducerAction || {});
+const initialTriggerFocus = {
+  options: ["none", "clearAll"],
+  currentIndex: 0,
+  currentOption: false,
+  clearAll: false
 };
-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;
+const initialLayerFocusIndex = (firstSelectedOptionIndex) => firstSelectedOptionIndex !== null ? firstSelectedOptionIndex + 1 : 0;
+const initialLayerFocus = (options, firstSelectedOptionIndex) => {
+  const layerFocusOptions = [
+    "none",
+    ...options.map((o, i) => o.type !== MenuType.HEADING ? i : null).filter((o) => o !== null)
+  ];
+  const layerFocusIndex = initialLayerFocusIndex(firstSelectedOptionIndex);
+  return {
+    options: layerFocusOptions,
+    currentIndex: layerFocusIndex,
+    current: layerFocusOptions[layerFocusIndex]
+  };
 };
-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;
-        }
+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 ? [
+    "none",
+    ...Array.from({ length: selectedOptions.length }, (_2, i) => i),
+    "clearAll"
+  ] : ["none", "clearAll"];
+  const increment = triggerFocus.currentIndex + sign;
+  const nextIndex = (increment < 0 ? nextOptions.length - 1 : increment) % nextOptions.length;
+  const next2 = nextOptions[nextIndex];
+  const clearAll = next2 === "clearAll";
+  return {
+    options: nextOptions,
+    currentIndex: nextIndex,
+    currentOption: next2,
+    clearAll
+  };
+};
+const blurTriggerFocus = () => initialTriggerFocus;
+const blurLayerFocus = (layerFocus) => ({
+  ...layerFocus,
+  currentIndex: 0,
+  current: "none"
+});
+const reducer = (state, action2) => {
+  switch (action2.type) {
+    case ReducerAction.SET_VISIBLE_OPTIONS: {
+      return {
+        ...state,
+        visibleOptions: action2.options || []
       };
-      _this._resetIsScrollingDebounced = function() {
-        if (_this._resetIsScrollingTimeoutId !== null) {
-          cancelTimeout(_this._resetIsScrollingTimeoutId);
-        }
-        _this._resetIsScrollingTimeoutId = requestTimeout(_this._resetIsScrolling, IS_SCROLLING_DEBOUNCE_INTERVAL$1);
+    }
+    case ReducerAction.RESET_LAYER_FOCUS: {
+      return {
+        ...state,
+        layerFocus: initialLayerFocus(
+          action2.options || [],
+          action2.firstSelectedOptionIndex || 0
+        )
       };
-      _this._resetIsScrolling = function() {
-        _this._resetIsScrollingTimeoutId = null;
-        _this.setState({
-          isScrolling: false
-        }, function() {
-          _this._getItemStyleCache(-1, null);
-        });
+    }
+    case ReducerAction.CLEAR_SEARCH: {
+      return {
+        ...state,
+        visibleOptions: action2.options || [],
+        searchValue: ""
       };
-      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.");
+    case ReducerAction.ON_CHANGE_SEARCH: {
+      const visibleOptions = (action2.options || []).filter(
+        (o) => (String(o.label) + (o.details ? String(o.details) : "")).toLowerCase().includes(String(action2.value || "").toLowerCase())
+      );
+      let newVisibleOptions = [...visibleOptions];
+      if (action2.createAble && action2.value && action2.value !== "") {
+        newVisibleOptions.push({
+          label: `Create "${action2.value}"`,
+          value: action2.value,
+          createAble: true
+        });
       }
+      return {
+        ...state,
+        searchValue: action2.value,
+        visibleOptions: newVisibleOptions,
+        layerFocus: blurLayerFocus(state.layerFocus)
+      };
     }
-    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";
-      }
+    case ReducerAction.FOCUS_TRIGGER_INPUTS: {
+      return {
+        ...state,
+        triggerFocus: nextTriggerFocus(
+          action2.direction || "right",
+          action2.selectedOptions || [],
+          state.triggerFocus
+        ),
+        layerFocus: blurLayerFocus(state.layerFocus)
+      };
     }
-    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;
-        }
+    case ReducerAction.BLUR_TRIGGER_INPUTS: {
+      return {
+        ...state,
+        triggerFocus: blurTriggerFocus()
+      };
     }
-  },
-  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.'));
+    case ReducerAction.FOCUS_LAYER_OPTIONS: {
+      if (!action2.nextLayerFocus) {
+        return state;
       }
+      return {
+        ...state,
+        layerFocus: action2.nextLayerFocus,
+        triggerFocus: blurTriggerFocus()
+      };
     }
-  }
-});
-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
+    case ReducerAction.OPEN_LAYER: {
+      return {
+        ...state,
+        isLayerOpen: true
+      };
     }
-  );
-};
-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 })
-      ]
+    case ReducerAction.CLOSE_LAYER: {
+      return {
+        ...state,
+        isLayerOpen: false
+      };
     }
-  );
-};
-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
-        }
-      );
+      return state;
   }
 };
 const getTextWidth = (text2, font) => {
@@ -20423,11 +19969,6 @@ 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;
@@ -20454,523 +19995,6 @@ const getWidestOptionWidth = (options, small2, isFontLoaded, placeholder3) => {
   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,
-  isMounted,
-  testId
-}) => {
-  useEffect(() => {
-    if (!isMounted.current) return;
-    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,
-  isMounted,
-  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(() => {
-              if (isMounted == null ? void 0 : isMounted.current) {
-                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";
-  ReducerAction2["CLEAR_SEARCH"] = "CLEAR_SEARCH";
-  ReducerAction2["ON_CHANGE_SEARCH"] = "ON_CHANGE_SEARCH";
-  ReducerAction2["FOCUS_TRIGGER_INPUTS"] = "FOCUS_TRIGGER_INPUTS";
-  ReducerAction2["BLUR_TRIGGER_INPUTS"] = "BLUR_TRIGGER_INPUTS";
-  ReducerAction2["FOCUS_LAYER_OPTIONS"] = "FOCUS_LAYER_OPTIONS";
-  ReducerAction2["OPEN_LAYER"] = "OPEN_LAYER";
-  ReducerAction2["CLOSE_LAYER"] = "CLOSE_LAYER";
-  return ReducerAction2;
-})(ReducerAction || {});
-const initialTriggerFocus = {
-  options: ["none", "clearAll"],
-  currentIndex: 0,
-  currentOption: false,
-  clearAll: false
-};
-const initialLayerFocusIndex = (firstSelectedOptionIndex) => firstSelectedOptionIndex !== null ? firstSelectedOptionIndex + 1 : 0;
-const initialLayerFocus = (options, firstSelectedOptionIndex) => {
-  const layerFocusOptions = [
-    "none",
-    ...options.map((o, i) => o.type !== MenuType.HEADING ? i : null).filter((o) => o !== null)
-  ];
-  const layerFocusIndex = initialLayerFocusIndex(firstSelectedOptionIndex);
-  return {
-    options: layerFocusOptions,
-    currentIndex: layerFocusIndex,
-    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 ? [
-    "none",
-    ...Array.from({ length: selectedOptions.length }, (_2, i) => i),
-    "clearAll"
-  ] : ["none", "clearAll"];
-  const increment = triggerFocus.currentIndex + sign;
-  const nextIndex = (increment < 0 ? nextOptions.length - 1 : increment) % nextOptions.length;
-  const next2 = nextOptions[nextIndex];
-  const clearAll2 = next2 === "clearAll";
-  return {
-    options: nextOptions,
-    currentIndex: nextIndex,
-    currentOption: next2,
-    clearAll: clearAll2
-  };
-};
-const blurTriggerFocus = () => initialTriggerFocus;
-const blurLayerFocus = (layerFocus) => ({
-  ...layerFocus,
-  currentIndex: 0,
-  current: "none"
-});
-const reducer = (state, action2) => {
-  switch (action2.type) {
-    case ReducerAction.SET_VISIBLE_OPTIONS: {
-      return {
-        ...state,
-        visibleOptions: action2.options || []
-      };
-    }
-    case ReducerAction.RESET_LAYER_FOCUS: {
-      return {
-        ...state,
-        layerFocus: initialLayerFocus(
-          action2.options || [],
-          action2.firstSelectedOptionIndex || 0
-        )
-      };
-    }
-    case ReducerAction.CLEAR_SEARCH: {
-      return {
-        ...state,
-        visibleOptions: action2.options || [],
-        searchValue: ""
-      };
-    }
-    case ReducerAction.ON_CHANGE_SEARCH: {
-      const visibleOptions = (action2.options || []).filter(
-        (o) => (String(o.label) + (o.details ? String(o.details) : "")).toLowerCase().includes(String(action2.value || "").toLowerCase())
-      );
-      let newVisibleOptions = [...visibleOptions];
-      if (action2.createAble && action2.value && action2.value !== "") {
-        newVisibleOptions.push({
-          label: `Create "${action2.value}"`,
-          value: action2.value,
-          createAble: true
-        });
-      }
-      return {
-        ...state,
-        searchValue: action2.value,
-        visibleOptions: newVisibleOptions,
-        layerFocus: blurLayerFocus(state.layerFocus)
-      };
-    }
-    case ReducerAction.FOCUS_TRIGGER_INPUTS: {
-      return {
-        ...state,
-        triggerFocus: nextTriggerFocus(
-          action2.direction || "right",
-          action2.selectedOptions || [],
-          state.triggerFocus
-        ),
-        layerFocus: blurLayerFocus(state.layerFocus)
-      };
-    }
-    case ReducerAction.BLUR_TRIGGER_INPUTS: {
-      return {
-        ...state,
-        triggerFocus: blurTriggerFocus()
-      };
-    }
-    case ReducerAction.FOCUS_LAYER_OPTIONS: {
-      if (!action2.nextLayerFocus) {
-        return state;
-      }
-      return {
-        ...state,
-        layerFocus: action2.nextLayerFocus,
-        triggerFocus: blurTriggerFocus()
-      };
-    }
-    case ReducerAction.OPEN_LAYER: {
-      return {
-        ...state,
-        isLayerOpen: true
-      };
-    }
-    case ReducerAction.CLOSE_LAYER: {
-      return {
-        ...state,
-        isLayerOpen: false
-      };
-    }
-    default:
-      return state;
-  }
-};
 const placementOptions = {
   auto: true,
   possiblePlacements: ["bottom-start", "top-start"],
@@ -21034,11 +20058,15 @@ const useCustomSelectLogic = ({
   const openLayer = () => safeDispatch({ type: ActionTypes.OPEN_LAYER });
   const isFirstRun = useRef(true);
   useEffect(() => {
+    console.log("isFirstRun mounted");
     if (isFirstRun.current) {
       isFirstRun.current = false;
     } else {
       safeDispatch({ type: ActionTypes.SET_VISIBLE_OPTIONS, options });
     }
+    return () => {
+      console.log("isFirstRun unmounted");
+    };
   }, [options]);
   const onSelectOption = (evt, option2, close2) => {
     if (!(disabled2 || disabledContext)) {
@@ -21120,6 +20148,7 @@ const useCustomSelectLogic = ({
   };
   const isFirstRender = useRef(true);
   useEffect(() => {
+    console.log("isFirstRender mounted");
     if (isFirstRender.current) {
       isFirstRender.current = false;
     } else {
@@ -21127,6 +20156,9 @@ const useCustomSelectLogic = ({
         safeDispatch({ type: ActionTypes.CLEAR_SEARCH, options });
       }
     }
+    return () => {
+      console.log("isFirstRender unmounted");
+    };
   }, [state.isLayerOpen]);
   const onClickDeselectOption = (evt, options2) => {
     const newSelectedOptions = selectedOptions instanceof Array ? selectedOptions.filter((option2) => option2.value !== options2.value) : null;
@@ -21170,7 +20202,7 @@ const useCustomSelectLogic = ({
       selectedOptions
     });
   };
-  const clearAll2 = (evt) => onClickClearAll(evt);
+  const clearAll = (evt) => onClickClearAll(evt);
   const deselectIsFocused = selectedOptions && selectedOptions[state.triggerFocus.currentOption];
   const deselectOption = (evt) => {
     onClickDeselectOption(
@@ -21208,7 +20240,7 @@ const useCustomSelectLogic = ({
       }
       case EventKey.ENTER: {
         if (clearAllIsFocused) {
-          clearAll2(evt);
+          clearAll(evt);
         } else if (deselectIsFocused) {
           deselectOption(evt);
         } else {
@@ -21317,66 +20349,7 @@ const CustomSelect = (props) => {
     listRef,
     isMounted
   });
-  return /* @__PURE__ */ jsxs("div", { style: { width: getTriggerWidth() }, 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,
-        isMounted
-      }
-    ),
-    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,
-          isMounted,
-          testId: testId && `${testId}-layer`
-        }
-      ) })
-    )
-  ] });
+  return /* @__PURE__ */ jsx("div", { style: { width: getTriggerWidth() } });
 };
 const isEmptyNullOrUndefined = (value) => value === null || value === void 0 || value === "";
 const isMulti = (selectedOptions) => selectedOptions instanceof Array;
@@ -21677,7 +20650,7 @@ const Pagination = ({ pagination }) => {
     ),
     /* @__PURE__ */ jsxs(InputGroup, { small: small2, width: "auto", children: [
       /* @__PURE__ */ jsx(
-        Input$1,
+        Input,
         {
           right: true,
           value: unvalidatedSelectedPage,
@@ -21740,7 +20713,7 @@ const Popover = ({
   onToggle: externalOnToggle
 }) => {
   const disabledContext = useContext(DisabledContext);
-  const [isOpen2, setOpen] = externalIsOpen !== void 0 ? [externalIsOpen, externalOnToggle] : useState(false);
+  const [isOpen, setOpen] = externalIsOpen !== void 0 ? [externalIsOpen, externalOnToggle] : useState(false);
   const close2 = () => {
     if (!disabled2 && !disabledContext) {
       if (setOpen) {
@@ -21751,7 +20724,7 @@ const Popover = ({
   const toggle2 = () => {
     if (!(disabled2 || disabledContext)) {
       if (setOpen) {
-        setOpen(!isOpen2);
+        setOpen(!isOpen);
       }
     }
   };
@@ -21761,7 +20734,7 @@ const Popover = ({
     }
   }, [disabled2, disabledContext]);
   const { renderLayer, arrowProps, layerProps, triggerProps } = useLayer({
-    isOpen: isOpen2,
+    isOpen,
     placement,
     auto: true,
     triggerOffset: 6,
@@ -21771,7 +20744,7 @@ const Popover = ({
   });
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsx("div", { ref: triggerProps.ref, onClick: toggle2, "data-testid": testId, children }),
-    isOpen2 && renderLayer(
+    isOpen && renderLayer(
       /* @__PURE__ */ jsxs(
         "div",
         {
@@ -22048,11 +21021,11 @@ var makeError = { exports: {} };
       });
     };
   }
-  function BaseError(message2) {
-    if (message2 !== void 0) {
+  function BaseError(message) {
+    if (message !== void 0) {
       defineProperty2(this, "message", {
         configurable: true,
-        value: message2,
+        value: message,
         writable: true
       });
     }
@@ -22708,14 +21681,14 @@ function debounce$1(delay, atBegin, callback) {
 function Cast(value) {
   return value;
 }
-function assertGet(value, key2, message2) {
+function assertGet(value, key2, message) {
   const prop = value[key2];
-  assert(!isUndefined(prop), message2);
+  assert(!isUndefined(prop), message);
   return prop;
 }
-function assert(testValue, message2) {
+function assert(testValue, message) {
   if (!testValue) {
-    throw new AssertionError(message2);
+    throw new AssertionError(message);
   }
 }
 var AssertionError = class extends makeErrorExports.BaseError {
@@ -22990,8 +21963,8 @@ function isErrorConstant(code) {
   return isString$2(code) && includes(values(ErrorConstant), code);
 }
 function createErrorMessage(code, extraMessage) {
-  const message2 = errorMessageMap[code];
-  const prefix2 = message2 ? `${message2}
+  const message = errorMessageMap[code];
+  const prefix2 = message ? `${message}
 
 ` : "";
   const customMessage = extraMessage ? `${extraMessage}
@@ -23003,9 +21976,9 @@ var RemirrorError = class extends makeErrorExports.BaseError {
   /**
    * The constructor is intentionally kept private to prevent being extended from.
    */
-  constructor({ code, message: message2, disableLogging = false } = {}) {
+  constructor({ code, message, disableLogging = false } = {}) {
     const errorCode = isErrorConstant(code) ? code : ErrorConstant.CUSTOM;
-    super(createErrorMessage(errorCode, message2));
+    super(createErrorMessage(errorCode, message));
     this.errorCode = errorCode;
     this.url = `${ERROR_INFORMATION_URL}#${errorCode.toLowerCase()}`;
     if (!disableLogging) {
@@ -25726,16 +24699,16 @@ class NodeContext {
   }
 }
 class ParseContext {
-  constructor(parser2, options, isOpen2) {
+  constructor(parser2, options, isOpen) {
     this.parser = parser2;
     this.options = options;
-    this.isOpen = isOpen2;
+    this.isOpen = isOpen;
     this.open = 0;
     let topNode = options.topNode, topContext;
-    let topOptions = wsOptionsFor(null, options.preserveWhitespace, 0) | (isOpen2 ? OPT_OPEN_LEFT : 0);
+    let topOptions = wsOptionsFor(null, options.preserveWhitespace, 0) | (isOpen ? 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 (isOpen2)
+    else if (isOpen)
       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);
@@ -26677,8 +25650,8 @@ class StepResult {
   /**
   Create a failed step result.
   */
-  static fail(message2) {
-    return new StepResult(null, message2);
+  static fail(message) {
+    return new StepResult(null, message);
   }
   /**
   Call [`Node.replace`](https://prosemirror.net/docs/ref/#model.Node.replace) with the given
@@ -27824,8 +26797,8 @@ class DocAttrStep extends Step {
 Step.jsonID("docAttr", DocAttrStep);
 let TransformError = class extends Error {
 };
-TransformError = function TransformError2(message2) {
-  let err = Error.call(this, message2);
+TransformError = function TransformError2(message) {
+  let err = Error.call(this, message);
   err.__proto__ = TransformError2.prototype;
   return err;
 };
@@ -32225,10 +31198,10 @@ editHandlers.keydown = (view, _event) => {
   if (event.keyCode != 229)
     view.domObserver.forceFlush();
   if (ios && event.keyCode == 13 && !event.ctrlKey && !event.altKey && !event.metaKey) {
-    let now2 = Date.now();
-    view.input.lastIOSEnter = now2;
+    let now = Date.now();
+    view.input.lastIOSEnter = now;
     view.input.lastIOSEnterFallbackTimeout = setTimeout(() => {
-      if (view.input.lastIOSEnter == now2) {
+      if (view.input.lastIOSEnter == now) {
         view.someProp("handleKeyDown", (f2) => f2(view, keyEvent(13, "Enter")));
         view.input.lastIOSEnter = 0;
       }
@@ -32358,14 +31331,14 @@ handlers.mousedown = (view, _event) => {
   let event = _event;
   view.input.shiftKey = event.shiftKey;
   let flushed = forceDOMFlush(view);
-  let now2 = Date.now(), type = "singleClick";
-  if (now2 - view.input.lastClick.time < 500 && isNear$1(event, view.input.lastClick) && !event[selectNodeModifier]) {
+  let now = Date.now(), type = "singleClick";
+  if (now - 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: now2, x: event.clientX, y: event.clientY, type };
+  view.input.lastClick = { time: now, x: event.clientX, y: event.clientY, type };
   let pos = view.posAtCoords(eventCoords(event));
   if (!pos)
     return;
@@ -50335,7 +49308,7 @@ var moo = { exports: {} };
         return new LexerIterator(this);
       };
     }
-    Lexer2.prototype.formatError = function(token2, message2) {
+    Lexer2.prototype.formatError = function(token2, message) {
       if (token2 == null) {
         var text2 = this.buffer.slice(this.index);
         var token2 = {
@@ -50355,7 +49328,7 @@ var moo = { exports: {} };
         this.line - token2.line + numLinesAround + 1
       ).slice(0, 5);
       var errorLines = [];
-      errorLines.push(message2 + " at line " + token2.line + " col " + token2.col + ":");
+      errorLines.push(message + " at line " + token2.line + " col " + token2.col + ":");
       errorLines.push("");
       for (var i = 0; i < displayedLines.length; i++) {
         var line2 = displayedLines[i];
@@ -50690,14 +49663,14 @@ function processTokens(tokens, mapText) {
     ];
   });
 }
-function compileMessage(message2, mapText = (v2) => v2) {
+function compileMessage(message, mapText = (v2) => v2) {
   try {
-    return processTokens(parse_1(message2), mapText);
+    return processTokens(parse_1(message), mapText);
   } catch (e2) {
     console.error(`${e2.message} 
 
-Message: ${message2}`);
-    return message2;
+Message: ${message}`);
+    return message;
   }
 }
 const isString$1 = (s) => typeof s === "string";
@@ -50755,21 +49728,21 @@ const getDefaultFormats = (locale, passedLocales, formats = {}) => {
   const style2 = (format) => {
     return typeof format === "object" ? format : formats[format] || { style: format };
   };
-  const replaceOctothorpe = (value, message2) => {
+  const replaceOctothorpe = (value, message) => {
     const numberFormat = Object.keys(formats).length ? style2("number") : void 0;
     const valueStr = number$1(locales, value, numberFormat);
-    return message2.replace(new RegExp(OCTOTHORPE_PH, "g"), valueStr);
+    return message.replace(new RegExp(OCTOTHORPE_PH, "g"), valueStr);
   };
   return {
     plural: (value, cases) => {
       const { offset: offset3 = 0 } = cases;
-      const message2 = plural(locales, false, value, cases);
-      return replaceOctothorpe(value - offset3, message2);
+      const message = plural(locales, false, value, cases);
+      return replaceOctothorpe(value - offset3, message);
     },
     selectordinal: (value, cases) => {
       const { offset: offset3 = 0 } = cases;
-      const message2 = plural(locales, true, value, cases);
-      return replaceOctothorpe(value - offset3, message2);
+      const message = plural(locales, true, value, cases);
+      return replaceOctothorpe(value - offset3, message);
     },
     select: selectFormatter,
     number: (value, format) => number$1(locales, value, style2(format)),
@@ -50783,12 +49756,12 @@ function interpolate$1(translation, locale, locales) {
     const formatMessage = (tokens, replaceOctothorpe = false) => {
       if (!Array.isArray(tokens))
         return tokens;
-      return tokens.reduce((message2, token2) => {
+      return tokens.reduce((message, token2) => {
         if (token2 === "#" && replaceOctothorpe) {
-          return message2 + OCTOTHORPE_PH;
+          return message + OCTOTHORPE_PH;
         }
         if (isString$1(token2)) {
-          return message2 + token2;
+          return message + token2;
         }
         const [name2, type, format] = token2;
         let interpolatedFormat = {};
@@ -50812,9 +49785,9 @@ function interpolate$1(translation, locale, locales) {
           value = values2[name2];
         }
         if (value == null) {
-          return message2;
+          return message;
         }
-        return message2 + value;
+        return message + value;
       }, "");
     };
     const result = formatMessage(translation);
@@ -50961,13 +49934,13 @@ class I18n extends EventEmitter {
     this.emit("change");
   }
   _(id2, values2, options) {
-    let message2 = options == null ? void 0 : options.message;
+    let message = options == null ? void 0 : options.message;
     if (!id2) {
       id2 = "";
     }
     if (!isString$1(id2)) {
       values2 = id2.values || values2;
-      message2 = id2.message;
+      message = id2.message;
       id2 = id2.id;
     }
     const messageForId = this.messages[id2];
@@ -50979,7 +49952,7 @@ class I18n extends EventEmitter {
     if (messageMissing) {
       this.emit("missing", { id: id2, locale: this._locale });
     }
-    let translation = messageForId || message2 || id2;
+    let translation = messageForId || message || id2;
     if (process.env.NODE_ENV !== "production") {
       translation = isString$1(translation) ? compileMessage(translation) : translation;
     }
@@ -52497,13 +51470,13 @@ const styles$d = {
   icon: icon$1
 };
 const TooltipIcon = memo(
-  ({ isOpen: isOpen2, label: label2, icon: icon2, invalid }) => {
+  ({ isOpen, label: label2, icon: icon2, invalid }) => {
     return /* @__PURE__ */ jsxs(Fragment$1, { children: [
       /* @__PURE__ */ jsx(
         Tooltip,
         {
           text: label2,
-          enabled: !isOpen2,
+          enabled: !isOpen,
           placement: "right-center",
           possiblePlacements: ["right-center"],
           fontSize: 16,
@@ -52518,7 +51491,7 @@ const TooltipIcon = memo(
   (prevProps, nextProps) => isEqual$1(prevProps, nextProps)
 );
 const Link$1 = ({
-  isOpen: isOpen2,
+  isOpen,
   items,
   sectionIndex,
   onClick,
@@ -52543,7 +51516,7 @@ const Link$1 = ({
             label: link2.label,
             icon: link2.icon,
             invalid: link2.invalid,
-            isOpen: isOpen2
+            isOpen
           },
           key2
         )
@@ -52553,7 +51526,7 @@ const Link$1 = ({
   }) });
 };
 const Sections = ({
-  isOpen: isOpen2,
+  isOpen,
   sections,
   onClick
 }) => {
@@ -52562,7 +51535,7 @@ const Sections = ({
     /* @__PURE__ */ jsx(
       Link$1,
       {
-        isOpen: isOpen2,
+        isOpen,
         items: section2.items,
         sectionIndex: i,
         onClick,
@@ -52579,7 +51552,7 @@ const SideBar = memo(
     },
     top: top2
   }) => {
-    const [isOpen2, setIsOpen] = useState(startOpen);
+    const [isOpen, setIsOpen] = useState(startOpen);
     const onClick = (evt, value, label2, clickHandler) => {
       evt.preventDefault();
       if (typeof clickHandler === "function") {
@@ -52594,7 +51567,7 @@ const SideBar = memo(
       Drawer,
       {
         fixed: true,
-        open: isOpen2,
+        open: isOpen,
         top: top2,
         background: "var(--color-background-sidebar)",
         closedWidth: "var(--size-sidebar)",
@@ -52607,19 +51580,19 @@ const SideBar = memo(
               if (evt.shiftKey && onShiftClickToggleOpen) {
                 onShiftClickToggleOpen(evt);
               }
-              setIsOpen(!isOpen2);
+              setIsOpen(!isOpen);
             },
             colored: true,
             round: true,
             icon: IconType.LEFT
           }
         ),
-        children: /* @__PURE__ */ jsx("div", { className: cx$2(styles$d.sidebar, !isOpen2 ? styles$d.collapsed : ""), children: visible && /* @__PURE__ */ jsxs("div", { className: styles$d.inner, children: [
+        children: /* @__PURE__ */ jsx("div", { className: cx$2(styles$d.sidebar, !isOpen ? 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: isOpen2,
+              isOpen,
               sections: options.sections,
               onClick
             }
@@ -52689,21 +51662,21 @@ var preWarningFns = [];
 var preMessage = function preMessage2(fn) {
   preWarningFns.push(fn);
 };
-function warning$1(valid, message2) {
+function warning$1(valid, message) {
   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");
-    }, message2);
+    }, message);
     if (finalMessage) {
       console.error("Warning: ".concat(finalMessage));
     }
   }
 }
-function note(valid, message2) {
+function note(valid, message) {
   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");
-    }, message2);
+    }, message);
     if (finalMessage) {
       console.warn("Note: ".concat(finalMessage));
     }
@@ -52712,17 +51685,17 @@ function note(valid, message2) {
 function resetWarned() {
   warned$1 = {};
 }
-function call(method, valid, message2) {
-  if (!valid && !warned$1[message2]) {
-    method(false, message2);
-    warned$1[message2] = true;
+function call(method, valid, message) {
+  if (!valid && !warned$1[message]) {
+    method(false, message);
+    warned$1[message] = true;
   }
 }
-function warningOnce(valid, message2) {
-  call(warning$1, valid, message2);
+function warningOnce(valid, message) {
+  call(warning$1, valid, message);
 }
-function noteOnce(valid, message2) {
-  call(note, valid, message2);
+function noteOnce(valid, message) {
+  call(note, valid, message);
 }
 warningOnce.preMessage = preMessage;
 warningOnce.resetWarned = resetWarned;
@@ -55220,7 +54193,7 @@ const Title$1 = ({
     return /* @__PURE__ */ jsx("div", { children: actionsComponent });
   };
   return /* @__PURE__ */ jsxs("div", { className: styles$a.title, children: [
-    isNameDefined ? /* @__PURE__ */ jsx(Heading$2, { children: /* @__PURE__ */ jsx("span", { "data-testid": testId, children: name2 }) }) : null,
+    isNameDefined ? /* @__PURE__ */ jsx(Heading$1, { children: /* @__PURE__ */ jsx("span", { "data-testid": testId, children: name2 }) }) : null,
     actionsContainer()
   ] });
 };
@@ -55440,7 +54413,7 @@ const InputCell = ({
   type
 }) => {
   return /* @__PURE__ */ jsx(
-    Input$1,
+    Input,
     {
       name: cell2.name,
       value: cell2.value,
@@ -55785,7 +54758,7 @@ const NumberInput = ({
       handleKeys: [EventKey.ENTER],
       onKeyEvent: (_key, evt) => onChangeValue(evt),
       children: /* @__PURE__ */ jsx(
-        Input$1,
+        Input,
         {
           type: "text",
           name: stringName,
@@ -57852,11 +56825,11 @@ eventManager.on(
 );
 const toast = ({
   id: id2,
-  message: message2 = { type: MessageType.INFO, content: "" },
+  message = { type: MessageType.INFO, content: "" },
   autoClose = 6e3,
   onClose
 }) => {
-  const { type = MessageType.INFO } = message2 ?? {};
+  const { type = MessageType.INFO } = message ?? {};
   const CloseButton2 = ({
     closeToast
   }) => /* @__PURE__ */ jsx(
@@ -57872,7 +56845,7 @@ const toast = ({
     Message,
     {
       message: {
-        ...message2,
+        ...message,
         visible: true,
         width: "100%",
         maxHeight: "500px",
@@ -57881,7 +56854,7 @@ const toast = ({
     }
   );
   const toastType = (() => {
-    switch (message2 == null ? void 0 : message2.type) {
+    switch (message == null ? void 0 : message.type) {
       case MessageType.SUCCESS:
         return toast$1.TYPE.SUCCESS;
       case MessageType.WARNING:
@@ -61794,14 +60767,14 @@ var warning = function() {
 var invariant = function() {
 };
 if (process.env.NODE_ENV !== "production") {
-  warning = function(check2, message2) {
+  warning = function(check2, message) {
     if (!check2 && typeof console !== "undefined") {
-      console.warn(message2);
+      console.warn(message);
     }
   };
-  invariant = function(check2, message2) {
+  invariant = function(check2, message) {
     if (!check2) {
-      throw new Error(message2);
+      throw new Error(message);
     }
   };
 }
@@ -63978,11 +62951,11 @@ function useTapGesture(_a2) {
   useUnmountEffect(removePointerEndListener);
 }
 var warned = /* @__PURE__ */ new Set();
-function warnOnce(condition, message2, element) {
-  if (condition || warned.has(message2))
+function warnOnce(condition, message, element) {
+  if (condition || warned.has(message))
     return;
-  console.warn(message2);
-  warned.add(message2);
+  console.warn(message);
+  warned.add(message);
 }
 var observerCallbacks = /* @__PURE__ */ new WeakMap();
 var observers = /* @__PURE__ */ new WeakMap();
@@ -69904,7 +68877,7 @@ const styles$1 = {
 const TreeItem = ({
   node: node2,
   depth,
-  isOpen: isOpen2,
+  isOpen,
   onToggle,
   hasChild,
   draggable: draggable2,
@@ -69937,7 +68910,7 @@ const TreeItem = ({
   const handleDragOver = (event) => {
     event.preventDefault();
     event.stopPropagation();
-    if (hasChild && !isOpen2 && (/* @__PURE__ */ new Date()).getTime() - dragOverStartTime > 200) {
+    if (hasChild && !isOpen && (/* @__PURE__ */ new Date()).getTime() - dragOverStartTime > 200) {
       handleToggle(event);
     }
   };
@@ -69985,10 +68958,10 @@ const TreeItem = ({
               Button$1,
               {
                 basic: true,
-                colored: isOpen2 ? true : Color.MUTED,
+                colored: isOpen ? true : Color.MUTED,
                 small: true,
                 round: true,
-                icon: isOpen2 ? (icons2 == null ? void 0 : icons2.collapse) || IconType.COLLAPSE : (icons2 == null ? void 0 : icons2.expand) || IconType.EXPAND,
+                icon: isOpen ? (icons2 == null ? void 0 : icons2.collapse) || IconType.COLLAPSE : (icons2 == null ? void 0 : icons2.expand) || IconType.EXPAND,
                 onClick: handleToggle
               }
             ) }),
@@ -70116,7 +69089,7 @@ const Tree = ({
               }
             },
             rootId: 0,
-            render: (node2, { depth, isOpen: isOpen2, onToggle, hasChild }) => {
+            render: (node2, { depth, isOpen, onToggle, hasChild }) => {
               var _a3;
               return /* @__PURE__ */ jsx(
                 TreeItem,
@@ -70124,9 +69097,9 @@ const Tree = ({
                   hasChild: itemHasChild ? itemHasChild(node2) : hasChild,
                   node: node2,
                   depth,
-                  isOpen: isOpen2,
+                  isOpen,
                   onToggle: () => {
-                    onItemToggle == null ? void 0 : onItemToggle(node2, !isOpen2);
+                    onItemToggle == null ? void 0 : onItemToggle(node2, !isOpen);
                     onToggle();
                   },
                   draggable: draggable2,
@@ -70475,7 +69448,7 @@ const UnitInput = ({
     }
   }, [initDisplayUnit, value, error2, shouldLinkAutomaticly]);
   const alternativeUnits = getAlternativeUnits();
-  const displayUnitLabel = label$b(displayLayer.unit) || displayLayer.unit || "";
+  const displayUnitLabel = label$9(displayLayer.unit) || displayLayer.unit || "";
   const noConvert = noConversion || !alternativeUnits || alternativeUnits && alternativeUnits.length === 1;
   const stringName = getStringName(name2);
   let sectionsPredefinedMenu;
@@ -70666,7 +69639,7 @@ const convertVisibleRows = ({
           type: CellType.SELECT,
           searchable: false,
           options: (_a2 = getUnitsForQuantity(unitKey)) == null ? void 0 : _a2.map((unit2) => ({
-            label: label$b(unit2),
+            label: label$9(unit2),
             value: unit2
           })),
           native: headerCell.native,
@@ -70978,11 +69951,11 @@ export {
   FormRow,
   Grid,
   GroupOrder,
-  Heading$2 as Heading,
+  Heading$1 as Heading,
   HelpIcon,
   Icon,
   IconType,
-  Input$1 as Input,
+  Input,
   InputGroup,
   InputGroupAddon,
   InputReaderMethods,