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

package/dist/index.js

@@ -15,7 +15,7 @@ import React__default, { useContext, isValidElement, useState, useRef, useEffect
 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, isObject as isObject$5, isEqual as isEqual$4, debounce as debounce$2 } from "lodash";
+import { noop as noop$3, set, get as get$2, isString as isString$3, isNumber as isNumber$1, isBoolean as isBoolean$2, isFunction as isFunction$3, isEmpty, isArray as isArray$1, toNumber, debounce as debounce$2, isObject as isObject$5, isEqual as isEqual$4 } from "lodash";
 import { toString as toString$1, isScientificStringNum, roundToPrecision, toNum, validateNumber, cleanNumStr, stripLeadingZeros, roundToFixed, roundByMagnitude, unitFromQuantity, getUnit, KNOWN_UNITS, ALT_UNITS, isValueWithUnit, getValue as getValue$1, withUnit, convertSamePrecision, convertAndGetValue, split as split$1, label as label$9, isValidNum, getAltUnitsListByQuantity, altUnitsList, getUnitsForQuantity, roundByMagnitudeToFixed } from "@oliasoft-open-source/units";
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 function getDefaultExportFromCjs(x2) {
@@ -3936,7 +3936,7 @@ var AccordionActionType = /* @__PURE__ */ ((AccordionActionType2) => {
   AccordionActionType2["TOGGLE_ENABLE"] = "TOGGLE_ENABLE";
   return AccordionActionType2;
 })(AccordionActionType || {});
-const reducer$2 = (state, action2) => {
+const reducer$3 = (state, action2) => {
   switch (action2.type) {
     case AccordionActionType.TOGGLE_ACCORDION:
       return {
@@ -3962,7 +3962,7 @@ const AccordionWithDefaultToggle = ({
   padding: padding2 = true,
   children
 }) => {
-  const [state, dispatch] = useReducer(reducer$2, {
+  const [state, dispatch] = useReducer(reducer$3, {
     accordionExpanded: expanded2,
     defaultEnabled
   });
@@ -13383,7 +13383,7 @@ var idle = {
   completed: null,
   shouldFlush: false
 };
-var reducer$1 = function(state, action2) {
+var reducer$2 = function(state, action2) {
   if (state === void 0) {
     state = idle;
   }
@@ -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$1, composeEnhancers(applyMiddleware(style(styleMarshal), dimensionMarshalStopper(dimensionMarshal), lift$1$1(dimensionMarshal), drop$1, dropAnimationFinish, dropAnimationFlushOnScroll, pendingDrop, autoScroll(autoScroller), scrollListener, focus(focusMarshal), responders(getResponders, announce))));
+  return createStore$1(reducer$2, composeEnhancers(applyMiddleware(style(styleMarshal), dimensionMarshalStopper(dimensionMarshal), lift$1$1(dimensionMarshal), drop$1, dropAnimationFinish, dropAnimationFlushOnScroll, pendingDrop, autoScroll(autoScroller), scrollListener, focus(focusMarshal), responders(getResponders, announce))));
 };
 var clean$1 = function clean3() {
   return {
@@ -19281,7 +19281,7 @@ const Dismiss = ({
     }
   );
 };
-const reducer = (state, action2) => {
+const reducer$1 = (state, action2) => {
   switch (action2.type) {
     case MessageToggle.TOGGLE_DETAILS:
       return {
@@ -19329,7 +19329,7 @@ const Message = ({ message }) => {
   const initialState2 = {
     detailsVisible
   };
-  const [state, dispatch] = useReducer(reducer, initialState2);
+  const [state, dispatch] = useReducer(reducer$1, initialState2);
   return /* @__PURE__ */ jsx(Fragment$1, { children: visible ? /* @__PURE__ */ jsxs(
     "div",
     {
@@ -19612,6 +19612,580 @@ const Page = ({
     }
   );
 };
+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$1 = "_isInTable_sl2b5_121";
+const unSelected = "_unSelected_sl2b5_133";
+const small$4 = "_small_sl2b5_174";
+const right$2 = "_right_sl2b5_182";
+const groupOrderFirst = "_groupOrderFirst_sl2b5_193";
+const groupOrderMiddle = "_groupOrderMiddle_sl2b5_194";
+const groupOrderLast = "_groupOrderLast_sl2b5_198";
+const styles$m = {
+  inputInTable: inputInTable$5,
+  inputHover: inputHover$5,
+  inputFocus: inputFocus$5,
+  inputError: inputError$5,
+  inputWarning: inputWarning$5,
+  inputDisabled: inputDisabled$5,
+  hideScrollbars: hideScrollbars$5,
+  select,
+  isInTable: isInTable$1,
+  unSelected,
+  small: small$4,
+  right: right$2,
+  groupOrderFirst,
+  groupOrderMiddle,
+  groupOrderLast
+};
+const NativeSelect = ({
+  disabled: disabled2 = false,
+  error: error2 = null,
+  warning: warning2 = null,
+  tooltip: tooltip2 = null,
+  options,
+  onChange = noop$3,
+  onFocus = noop$3,
+  onBlur = noop$3,
+  right: right2 = false,
+  small: small2 = false,
+  tabIndex = 0,
+  selectedOption,
+  width: width2 = null,
+  groupOrder = null,
+  testId,
+  isInTable: isInTable2 = false,
+  clearable,
+  placeholder: placeholder3,
+  hasNonExistentValue,
+  maxTooltipWidth,
+  borderRadius
+}) => {
+  const disabledContext = useContext(DisabledContext);
+  const internalValue = selectedOption === null ? "unselected" : (selectedOption == null ? void 0 : selectedOption.value) === null ? "unselected" : selectedOption == null ? void 0 : selectedOption.value;
+  const isUnselected = internalValue === "unselected";
+  const viewOptions = (internalValue === "unselected" || clearable ? [
+    /* @__PURE__ */ jsx(
+      "option",
+      {
+        value: "unselected",
+        disabled: !clearable,
+        hidden: !clearable,
+        children: placeholder3 || "Select..."
+      },
+      "unselected"
+    )
+  ] : []).concat(
+    hasNonExistentValue ? [
+      /* @__PURE__ */ jsx(
+        "option",
+        {
+          value: selectedOption == null ? void 0 : selectedOption.value,
+          disabled: disabled2 || disabledContext,
+          children: selectedOption == null ? void 0 : selectedOption.label
+        },
+        "selectedNonExistentValue"
+      )
+    ] : []
+  ).concat(
+    options.map((option2, i) => {
+      return /* @__PURE__ */ jsx(
+        "option",
+        {
+          value: option2.value,
+          "data-testid": option2.testId,
+          children: option2.label
+        },
+        i
+      );
+    })
+  );
+  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 "";
+  })();
+  return /* @__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: /* @__PURE__ */ jsx(
+        "select",
+        {
+          className: cx$2(
+            styles$m.select,
+            isUnselected ? styles$m.unSelected : "",
+            right2 ? styles$m.right : "",
+            small2 ? styles$m.small : "",
+            isInTable2 ? styles$m.isInTable : "",
+            order2
+          ),
+          style: {
+            width: width2 || "",
+            borderRadius: borderRadius || ""
+          },
+          onChange: (evt) => {
+            const { value } = evt.target;
+            let nextValue;
+            if (value === "unselected") {
+              nextValue = { value: null };
+            } else {
+              const foundOption = options.find(
+                (o) => String(o.value) === String(value)
+              );
+              nextValue = foundOption || { value: null };
+            }
+            onChange(evt, nextValue);
+          },
+          onFocus,
+          onBlur,
+          tabIndex,
+          value: internalValue,
+          disabled: disabled2 || disabledContext,
+          "data-error": error2 || null,
+          "data-warning": warning2 || null,
+          "data-testid": testId,
+          children: viewOptions
+        }
+      )
+    }
+  );
+};
+var reactKeyboardEventHandler = { exports: {} };
+(function(module, exports) {
+  !function(e2, t) {
+    module.exports = t(React__default, PropTypes__default);
+  }(window, function(e2, t) {
+    return function(e3) {
+      var t2 = {};
+      function n2(r2) {
+        if (t2[r2]) return t2[r2].exports;
+        var o = t2[r2] = { i: r2, l: false, exports: {} };
+        return e3[r2].call(o.exports, o, o.exports, n2), o.l = true, o.exports;
+      }
+      return n2.m = e3, n2.c = t2, n2.d = function(e4, t3, r2) {
+        n2.o(e4, t3) || Object.defineProperty(e4, t3, { enumerable: true, get: r2 });
+      }, n2.r = function(e4) {
+        "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e4, Symbol.toStringTag, { value: "Module" }), Object.defineProperty(e4, "__esModule", { value: true });
+      }, n2.t = function(e4, t3) {
+        if (1 & t3 && (e4 = n2(e4)), 8 & t3) return e4;
+        if (4 & t3 && "object" == typeof e4 && e4 && e4.__esModule) return e4;
+        var r2 = /* @__PURE__ */ Object.create(null);
+        if (n2.r(r2), Object.defineProperty(r2, "default", { enumerable: true, value: e4 }), 2 & t3 && "string" != typeof e4) for (var o in e4) n2.d(r2, o, (function(t4) {
+          return e4[t4];
+        }).bind(null, o));
+        return r2;
+      }, n2.n = function(e4) {
+        var t3 = e4 && e4.__esModule ? function() {
+          return e4.default;
+        } : function() {
+          return e4;
+        };
+        return n2.d(t3, "a", t3), t3;
+      }, n2.o = function(e4, t3) {
+        return Object.prototype.hasOwnProperty.call(e4, t3);
+      }, n2.p = "", n2(n2.s = 0);
+    }([function(e3, t2, n2) {
+      Object.defineProperty(t2, "__esModule", { value: true });
+      var r2 = n2(1);
+      Object.defineProperty(t2, "default", { enumerable: true, get: function() {
+        return function(e4) {
+          return e4 && e4.__esModule ? e4 : { default: e4 };
+        }(r2).default;
+      } }), e3.exports = t2.default;
+    }, function(e3, t2, n2) {
+      Object.defineProperty(t2, "__esModule", { value: true });
+      var r2 = Object.assign || function(e4) {
+        for (var t3 = 1; t3 < arguments.length; t3++) {
+          var n3 = arguments[t3];
+          for (var r3 in n3) Object.prototype.hasOwnProperty.call(n3, r3) && (e4[r3] = n3[r3]);
+        }
+        return e4;
+      }, o = /* @__PURE__ */ function() {
+        function e4(e5, t3) {
+          for (var n3 = 0; n3 < t3.length; n3++) {
+            var r3 = t3[n3];
+            r3.enumerable = r3.enumerable || false, r3.configurable = true, "value" in r3 && (r3.writable = true), Object.defineProperty(e5, r3.key, r3);
+          }
+        }
+        return function(t3, n3, r3) {
+          return n3 && e4(t3.prototype, n3), r3 && e4(t3, r3), t3;
+        };
+      }(), i = l(n2(2)), u = l(n2(3)), a2 = n2(4);
+      function l(e4) {
+        return e4 && e4.__esModule ? e4 : { default: e4 };
+      }
+      var s = [], c2 = function(e4) {
+        function t3(e5) {
+          !function(e6, t4) {
+            if (!(e6 instanceof t4)) throw new TypeError("Cannot call a class as a function");
+          }(this, t3);
+          var n3 = function(e6, t4) {
+            if (!e6) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+            return !t4 || "object" != typeof t4 && "function" != typeof t4 ? e6 : t4;
+          }(this, (t3.__proto__ || Object.getPrototypeOf(t3)).call(this, e5));
+          return n3.handleKeyboardEvent = n3.handleKeyboardEvent.bind(n3), n3.registerExclusiveHandler = n3.registerExclusiveHandler.bind(n3), n3.deregisterExclusiveHandler = n3.deregisterExclusiveHandler.bind(n3), n3;
+        }
+        return function(e5, t4) {
+          if ("function" != typeof t4 && null !== t4) throw new TypeError("Super expression must either be null or a function, not " + typeof t4);
+          e5.prototype = Object.create(t4 && t4.prototype, { constructor: { value: e5, enumerable: false, writable: true, configurable: true } }), t4 && (Object.setPrototypeOf ? Object.setPrototypeOf(e5, t4) : e5.__proto__ = t4);
+        }(t3, i.default.Component), o(t3, [{ key: "componentDidMount", value: function() {
+          document.addEventListener("keydown", this.handleKeyboardEvent, false), document.addEventListener("keyup", this.handleKeyboardEvent, false), document.addEventListener("keypress", this.handleKeyboardEvent, false);
+          var e5 = this.props, t4 = e5.isExclusive, n3 = e5.isDisabled;
+          t4 && !n3 && this.registerExclusiveHandler();
+        } }, { key: "componentWillUnmount", value: function() {
+          document.removeEventListener("keydown", this.handleKeyboardEvent, false), document.removeEventListener("keyup", this.handleKeyboardEvent, false), document.removeEventListener("keypress", this.handleKeyboardEvent, false), this.deregisterExclusiveHandler();
+        } }, { key: "componentDidUpdate", value: function(e5) {
+          var t4 = e5.isExclusive, n3 = e5.isDisabled;
+          (this.props.isExclusive !== t4 || this.props.isDisabled !== n3) && (this.props.isExclusive && !this.props.isDisabled ? this.registerExclusiveHandler() : this.deregisterExclusiveHandler());
+        } }, { key: "registerExclusiveHandler", value: function() {
+          this.deregisterExclusiveHandler(), s.unshift(this);
+        } }, { key: "deregisterExclusiveHandler", value: function() {
+          var e5 = this;
+          s.includes(this) && (s = s.filter(function(t4) {
+            return t4 !== e5;
+          }));
+        } }, { key: "handleKeyboardEvent", value: function(e5) {
+          var t4 = this.props, n3 = t4.isDisabled, r3 = t4.handleKeys, o2 = t4.onKeyEvent, i2 = t4.handleEventType, u2 = t4.children, l2 = t4.handleFocusableElements;
+          if (n3) return false;
+          if (!(i2 === e5.type)) return false;
+          if (s.length > 0 && s[0] !== this) return false;
+          var c3 = e5.target === document.body || l2, d2 = this.childrenContainer && this.childrenContainer.contains(e5.target);
+          if (!(u2 ? d2 : c3)) return false;
+          var f2 = (0, a2.findMatchedKey)(e5, r3);
+          return !!f2 && (o2(f2, e5), true);
+        } }, { key: "render", value: function() {
+          var e5 = this, n3 = this.props.children, o2 = Object.assign({}, this.props), u2 = true, a3 = false, l2 = void 0;
+          try {
+            for (var s2, c3 = Object.keys(t3.propTypes)[Symbol.iterator](); !(u2 = (s2 = c3.next()).done); u2 = true) {
+              delete o2[s2.value];
+            }
+          } catch (e6) {
+            a3 = true, l2 = e6;
+          } finally {
+            try {
+              !u2 && c3.return && c3.return();
+            } finally {
+              if (a3) throw l2;
+            }
+          }
+          return n3 ? i.default.createElement("span", r2({ ref: function(t4) {
+            e5.childrenContainer = t4;
+          } }, o2), n3) : null;
+        } }]), t3;
+      }();
+      t2.default = c2, c2.propTypes = { handleKeys: u.default.array, handleEventType: u.default.oneOf(["keydown", "keyup", "keypress"]), handleFocusableElements: u.default.bool, onKeyEvent: u.default.func, isDisabled: u.default.bool, isExclusive: u.default.bool, children: u.default.any }, c2.defaultProps = { handleKeys: [], handleFocusableElements: false, handleEventType: "keydown", onKeyEvent: function() {
+        return null;
+      } }, e3.exports = t2.default;
+    }, function(t2, n2) {
+      t2.exports = e2;
+    }, function(e3, n2) {
+      e3.exports = t;
+    }, function(e3, t2, n2) {
+      function r2(e4, t3, n3) {
+        return t3 in e4 ? Object.defineProperty(e4, t3, { value: n3, enumerable: true, configurable: true, writable: true }) : e4[t3] = n3, e4;
+      }
+      Object.defineProperty(t2, "__esModule", { value: true }), t2.matchKeyEvent = p, t2.findMatchedKey = function(e4, t3) {
+        var n3 = t3.map(function(e5) {
+          var t4 = e5.toLowerCase(), n4 = f2[t4];
+          return n4 || [e5];
+        }).reduce(function(e5, t4) {
+          return e5.concat(t4);
+        }, []).find(function(t4) {
+          return p(e4, t4);
+        });
+        !n3 && t3.includes("all") && (n3 = "other");
+        return n3;
+      };
+      var o = { backspace: [8], del: [46], delete: [46], ins: [45], insert: [45], tab: [9], enter: [13], return: [13], esc: [27], space: [32], pageup: [33], pagedown: [34], end: [35], home: [36], left: [37], up: [38], right: [39], down: [40], shift: [16], ctrl: [17], alt: [18], cap: [20], num: [144], clear: [12], meta: [91], ";": [186, 59], "=": [187, 61], ",": [188, 44], "-": [189, 45, 173, 109], minus: [189, 45, 173, 109], ".": [190, 110], "/": [191, 111], "`": [192], "[": [219], "\\": [220], "]": [221], "*": [106], "+": [107], plus: [107], "'": [222], quote: [222] }, i = Object.keys(o).reduce(function(e4, t3) {
+        return Object.assign(e4, r2({}, t3.toUpperCase(), o[t3]));
+      }, {}), u = "0123456789".split("").reduce(function(e4, t3, n3) {
+        return Object.assign(e4, r2({}, t3, [n3 + 48, n3 + 96]));
+      }, {}), a2 = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("").reduce(function(e4, t3, n3) {
+        return Object.assign(e4, r2({}, t3.toLowerCase(), [n3 + 65]), r2({}, t3, [n3 + 65]));
+      }, {}), l = "1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19".split(",").reduce(function(e4, t3, n3) {
+        return Object.assign(e4, r2({}, "f" + t3, [n3 + 112]));
+      }, {}), s = { control: "ctrl", ctrl: "ctrl", shift: "shift", meta: "meta", cmd: "meta", command: "meta", option: "alt", alt: "alt" }, c2 = t2.AllKeys = Object.assign({}, o, i, u, a2, l), d2 = Object.assign({}, u, a2), f2 = { all: Object.keys(c2), alphanumeric: Object.keys(d2), numeric: Object.keys(u), alphabetic: Object.keys(a2), function: Object.keys(l) };
+      function p(e4, t3) {
+        var n3 = e4.which || e4.keyCode, r3 = e4.type, o2 = Object.keys(s).filter(function(t4) {
+          return e4[t4 + "Key"];
+        }).sort(), i2 = t3.toLowerCase().trim(), u2 = "+" === i2 ? ["+"] : i2.split(/\s?\+\s?/), a3 = u2.pop(), l2 = c2[a3], d3 = u2;
+        if ("keypress" === r3) return t3 == String.fromCharCode(n3).toLowerCase();
+        if (0 === d3.length && 0 === o2.length) return l2.indexOf(n3) >= 0;
+        if (d3.length > 0 && o2.length > 0) {
+          var f3 = d3.map(function(e5) {
+            return s[e5];
+          }).sort(), p2 = f3.length === o2.length && f3.every(function(e5, t4) {
+            return o2[t4] === e5;
+          });
+          return l2.indexOf(n3) >= 0 && p2;
+        }
+        return 0 == d3.length && 1 === o2.length && a3 === o2[0];
+      }
+    }]);
+  });
+})(reactKeyboardEventHandler);
+var reactKeyboardEventHandlerExports = reactKeyboardEventHandler.exports;
+const KeyboardEventHandler = /* @__PURE__ */ getDefaultExportFromCjs(reactKeyboardEventHandlerExports);
+const useFocus = () => {
+  const ref2 = useRef(null);
+  const setFocus = () => {
+    if (ref2.current) {
+      ref2.current.focus();
+    }
+  };
+  return [ref2, setFocus];
+};
+const useFontsReady = () => {
+  const [isFontLoaded, setFontLoaded] = useState(false);
+  const isMounted = useRef(true);
+  useEffect(() => {
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+  useEffect(() => {
+    const fontIsReady = async () => {
+      if (!document.fonts) return;
+      await document.fonts.ready.then(() => {
+        if (isMounted.current) {
+          setFontLoaded(true);
+        }
+      });
+    };
+    fontIsReady();
+  }, []);
+  return isFontLoaded;
+};
+const getWidth = () => window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+const useWindowWidth = () => {
+  const [width2, setWidth] = useState(getWidth());
+  const resizeListener = debounce$2(() => setWidth(getWidth()), 150);
+  useEffect(() => {
+    window.addEventListener("resize", resizeListener);
+    return () => {
+      window.removeEventListener("resize", resizeListener);
+    };
+  }, []);
+  return width2;
+};
+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 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 || []
+      };
+    }
+    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;
+  }
+};
+var EventKey = /* @__PURE__ */ ((EventKey2) => {
+  EventKey2["RIGHT"] = "right";
+  EventKey2["LEFT"] = "left";
+  EventKey2["UP"] = "up";
+  EventKey2["DOWN"] = "down";
+  EventKey2["ENTER"] = "enter";
+  EventKey2["ESC"] = "esc";
+  EventKey2["TAB"] = "tab";
+  return EventKey2;
+})(EventKey || {});
+const CustomSelect = (props) => {
+  const {
+    multi: isMulti2 = false,
+    disabled: disabled2 = false,
+    error: error2 = null,
+    warning: warning2 = null,
+    tooltip: tooltip2 = null,
+    options,
+    selectedOptions,
+    onCreate = null,
+    placeholder: placeholder3 = "",
+    small: small2 = false,
+    tabIndex = 0,
+    onFocus = () => {
+    },
+    onBlur = () => {
+    },
+    searchable = true,
+    clearable = false,
+    maxTooltipWidth,
+    closeOnOptionActionClick,
+    //private props (don't use)
+    isInTable: isInTable2 = false,
+    groupOrder,
+    firstSelectedOptionIndex = 0,
+    right: right2 = false,
+    testId = void 0
+  } = props;
+  useContext(DisabledContext);
+  useRef(null);
+  useFocus();
+  useFontsReady();
+  useReducer(
+    reducer,
+    // @ts-ignore: write explicit reason: write explicit reason
+    { options, firstSelectedOptionIndex },
+    ({ options: options2 }) => ({
+      searchValue: "",
+      visibleOptions: options2,
+      layerFocus: initialLayerFocus(options2, firstSelectedOptionIndex ?? 0),
+      //also gets reset when layer opens (because options can change)
+      triggerFocus: initialTriggerFocus,
+      isLayerOpen: false
+    })
+  );
+  return /* @__PURE__ */ jsx(Fragment$1, {});
+};
 const isEmptyNullOrUndefined = (value) => value === null || value === void 0 || value === "";
 const isMulti = (selectedOptions) => selectedOptions instanceof Array;
 const standardizeOptions = (options, simple) => {
@@ -19726,10 +20300,78 @@ const Select = (props) => {
     checkNonExistentValues
   );
   const canUseNative = !multi;
+  const useNative = native && canUseNative;
   if (native && !canUseNative) {
     console.warn("Native select does not support provided props (see stories)");
   }
-  return /* @__PURE__ */ jsx(Fragment$1, {});
+  const nonExistentWarning = "Value no longer available for re-selection";
+  const fullWarning = hasNonExistentValue && !disabled2 ? warning2 ? /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("div", { children: nonExistentWarning }),
+    /* @__PURE__ */ jsx("div", { children: warning2 })
+  ] }) : nonExistentWarning : warning2;
+  const fullError = hasNonExistentValue && error2 && !disabled2 ? /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("div", { children: nonExistentWarning }),
+    /* @__PURE__ */ jsx("div", { children: error2 })
+  ] }) : error2;
+  const onChangeSelectedValue = (evt, selectedOptions2) => {
+    if (deprecatedEventHandler) {
+      const newSelectedOptions = multi ? selectedOptions2.map(
+        (o) => simpleInputs ? o.value : o
+      ) : simpleInputs ? selectedOptions2.value : selectedOptions2;
+      if (newSelectedOptions) {
+        onChange(newSelectedOptions);
+      }
+    } else {
+      const isSyntheticEvent = !(evt instanceof Event);
+      const value = multi ? selectedOptions2 : selectedOptions2.value;
+      if (isSyntheticEvent) {
+        evt.target.name = name2;
+        evt.target.value = value;
+        if (!multi) {
+          evt.target.label = selectedOptions2.label;
+        }
+        onChange(evt);
+      } else {
+        const customEvent = {
+          ...evt,
+          target: {
+            ...evt.target,
+            name: name2,
+            value,
+            label: !multi ? selectedOptions2.label : void 0
+          }
+        };
+        onChange(customEvent);
+      }
+    }
+  };
+  return useNative ? /* @__PURE__ */ jsx(
+    NativeSelect,
+    {
+      ...props,
+      options,
+      selectedOption: selectedOptions,
+      onChange: onChangeSelectedValue,
+      hasNonExistentValue,
+      warning: fullWarning,
+      error: fullError,
+      testId
+    }
+  ) : /* @__PURE__ */ jsx(
+    CustomSelect,
+    {
+      ...props,
+      options,
+      selectedOptions,
+      onChange: onChangeSelectedValue,
+      multi,
+      firstSelectedOptionIndex,
+      warning: fullWarning,
+      error: fullError,
+      testId,
+      closeOnOptionActionClick
+    }
+  );
 };
 const selectedRowsPerPage = (options, value) => {
   return value || options && options.reduce((acc, row2) => {
@@ -19765,7 +20407,7 @@ const validateSelectedPage = (selectedPage, numPages, errorMessageTemplate = "Se
   return valid;
 };
 const paginationContainer = "_paginationContainer_1tmz4_1";
-const styles$m = {
+const styles$l = {
   paginationContainer
 };
 const Pagination = ({ pagination }) => {
@@ -19802,7 +20444,7 @@ const Pagination = ({ pagination }) => {
       onSelectPage(Number(value));
     }
   };
-  return /* @__PURE__ */ jsxs("div", { className: styles$m.paginationContainer, children: [
+  return /* @__PURE__ */ jsxs("div", { className: styles$l.paginationContainer, children: [
     rowsPerPage && /* @__PURE__ */ jsx("div", { style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx(
       Select,
       {
@@ -19887,7 +20529,7 @@ const Pagination = ({ pagination }) => {
 const toggleBox = "_toggleBox_lhie5_1";
 const fullWidthStyleFix = "_fullWidthStyleFix_lhie5_8";
 const dismiss = "_dismiss_lhie5_13";
-const styles$l = {
+const styles$k = {
   toggleBox,
   fullWidthStyleFix,
   dismiss
@@ -19941,7 +20583,7 @@ const Popover = ({
       /* @__PURE__ */ jsxs(
         "div",
         {
-          className: fullWidth ? cx$2(styles$l.toggleBox, styles$l.fullWidthStyleFix) : cx$2(styles$l.toggleBox),
+          className: fullWidth ? cx$2(styles$k.toggleBox, styles$k.fullWidthStyleFix) : cx$2(styles$k.toggleBox),
           ...layerProps,
           children: [
             /* @__PURE__ */ jsxs("div", { children: [
@@ -19949,7 +20591,7 @@ const Popover = ({
                 content2,
                 { close: close2 }
               ) : content2,
-              showCloseButton && /* @__PURE__ */ jsx("div", { className: styles$l.dismiss, children: /* @__PURE__ */ jsx(Button$1, { small: true, round: true, onClick: close2, icon: IconType.CLOSE }) })
+              showCloseButton && /* @__PURE__ */ jsx("div", { className: styles$k.dismiss, children: /* @__PURE__ */ jsx(Button$1, { small: true, round: true, onClick: close2, icon: IconType.CLOSE }) })
             ] }),
             /* @__PURE__ */ jsx(
               Arrow,
@@ -19968,7 +20610,7 @@ const Popover = ({
   ] });
 };
 const printHeader = "_printHeader_o7xxx_1";
-const styles$k = {
+const styles$j = {
   printHeader
 };
 const PrintHeader = ({
@@ -19980,7 +20622,7 @@ const PrintHeader = ({
   {
     src: logo2,
     alt,
-    className: styles$k.printHeader,
+    className: styles$j.printHeader,
     style: { width: logoWidth }
   }
 );
@@ -19994,7 +20636,7 @@ const orange = "_orange_23ror_30";
 const yellow = "_yellow_23ror_33";
 const green = "_green_23ror_36";
 const label$3 = "_label_23ror_39";
-const styles$j = {
+const styles$i = {
   progress: progress$1,
   inverted,
   bar,
@@ -20007,11 +20649,11 @@ const styles$j = {
   label: label$3
 };
 const getColor = (perct) => {
-  if (perct < 20) return styles$j.grey;
-  if (perct < 40) return styles$j.red;
-  if (perct < 60) return styles$j.orange;
-  if (perct < 80) return styles$j.yellow;
-  return styles$j.green;
+  if (perct < 20) return styles$i.grey;
+  if (perct < 40) return styles$i.red;
+  if (perct < 60) return styles$i.orange;
+  if (perct < 80) return styles$i.yellow;
+  return styles$i.green;
 };
 const ProgressBar$1 = ({
   width: width2 = "auto",
@@ -20024,21 +20666,21 @@ const ProgressBar$1 = ({
   return /* @__PURE__ */ jsx("div", { style: { width: width2 }, "data-percent": percentage, children: /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cx$2(styles$j.progress, inverted2 ? styles$j.inverted : ""),
+      className: cx$2(styles$i.progress, inverted2 ? styles$i.inverted : ""),
       style: { width: width2 },
       children: [
         /* @__PURE__ */ jsx(
           "div",
           {
             className: cx$2(
-              styles$j.bar,
-              showProgressColors ? getColor(percentage) : colored2 ? styles$j.colored : ""
+              styles$i.bar,
+              showProgressColors ? getColor(percentage) : colored2 ? styles$i.colored : ""
             ),
             style: { width: `${percentage}%` },
-            children: /* @__PURE__ */ jsx("div", { className: styles$j.label, children: !noLabel2 && `${percentage}%` })
+            children: /* @__PURE__ */ jsx("div", { className: styles$i.label, children: !noLabel2 && `${percentage}%` })
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: styles$j.label, children: !noLabel2 && `${percentage}%` })
+        /* @__PURE__ */ jsx("div", { className: styles$i.label, children: !noLabel2 && `${percentage}%` })
       ]
     }
   ) });
@@ -20047,20 +20689,20 @@ const wrapper$1 = "_wrapper_1fbik_1";
 const inline$1 = "_inline_1fbik_1";
 const radio = "_radio_1fbik_5";
 const labelMargin = "_labelMargin_1fbik_8";
-const small$4 = "_small_1fbik_27";
+const small$3 = "_small_1fbik_27";
 const noMargin$1 = "_noMargin_1fbik_32";
 const disabled$2 = "_disabled_1fbik_90";
-const isInTable$1 = "_isInTable_1fbik_106";
+const isInTable = "_isInTable_1fbik_106";
 const helpIconEnabled$1 = "_helpIconEnabled_1fbik_111";
-const styles$i = {
+const styles$h = {
   wrapper: wrapper$1,
   inline: inline$1,
   radio,
   labelMargin,
-  small: small$4,
+  small: small$3,
   noMargin: noMargin$1,
   disabled: disabled$2,
-  isInTable: isInTable$1,
+  isInTable,
   helpIconEnabled: helpIconEnabled$1
 };
 const RadioInput = ({
@@ -20081,10 +20723,10 @@ const RadioInput = ({
     "div",
     {
       className: cx$2(
-        styles$i.radio,
-        disabled2 ? styles$i.disabled : null,
-        small2 ? styles$i.small : null,
-        noMargin2 ? styles$i.noMargin : null
+        styles$h.radio,
+        disabled2 ? styles$h.disabled : null,
+        small2 ? styles$h.small : null,
+        noMargin2 ? styles$h.noMargin : null
       ),
       onClick: onChange,
       "data-testid": testId,
@@ -20101,7 +20743,7 @@ const RadioInput = ({
           }
         ),
         /* @__PURE__ */ jsx("label", { "data-name": name2, "data-value": value, children: label2 }),
-        showHelp && /* @__PURE__ */ jsx("div", { className: styles$i.helpIconEnabled, onClick: onClickHelp, children: /* @__PURE__ */ jsx(HelpIcon, { text: helpText }) })
+        showHelp && /* @__PURE__ */ jsx("div", { className: styles$h.helpIconEnabled, onClick: onClickHelp, children: /* @__PURE__ */ jsx(HelpIcon, { text: helpText }) })
       ]
     }
   );
@@ -20141,13 +20783,13 @@ const RadioButton = ({
     "div",
     {
       className: cx$2(
-        styles$i.wrapper,
-        inline2 ? styles$i.inline : null,
-        classForContainer === "inline fields" ? styles$i.inline : null
+        styles$h.wrapper,
+        inline2 ? styles$h.inline : null,
+        classForContainer === "inline fields" ? styles$h.inline : null
         //deprecated
       ),
       children: [
-        mainLabel && /* @__PURE__ */ jsx("label", { className: cx$2(inline2 && styles$i.labelMargin), children: label2 }),
+        mainLabel && /* @__PURE__ */ jsx("label", { className: cx$2(inline2 && styles$h.labelMargin), children: label2 }),
         options.map(
           (option2, index2) => {
             const selected2 = option2.checked || option2.value === selectedValue || false;
@@ -50373,7 +51015,7 @@ var interopRequireDefaultExports = interopRequireDefault.exports;
 const require$$2 = /* @__PURE__ */ getAugmentedNamespace(_extends$5);
 const richTextToolbar = "_richTextToolbar_1gbkk_1";
 const richTextToolbarContainer = "_richTextToolbarContainer_1gbkk_5";
-const styles$h = {
+const styles$g = {
   richTextToolbar,
   richTextToolbarContainer
 };
@@ -50425,8 +51067,8 @@ const RichTextToolbar = ({
       active: active2.orderedList()
     }
   ];
-  return /* @__PURE__ */ jsxs("div", { className: styles$h.richTextToolbarContainer, children: [
-    /* @__PURE__ */ jsx("div", { className: styles$h.richTextToolbar, children: items.map((item2, index2) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs("div", { className: styles$g.richTextToolbarContainer, children: [
+    /* @__PURE__ */ jsx("div", { className: styles$g.richTextToolbar, children: items.map((item2, index2) => /* @__PURE__ */ jsx(
       Button$1,
       {
         small: true,
@@ -50446,22 +51088,22 @@ const RichTextToolbar = ({
     toolbarComponent
   ] });
 };
-const inputInTable$5 = "_inputInTable_1fb4l_1";
-const inputHover$5 = "_inputHover_1fb4l_13";
-const inputFocus$5 = "_inputFocus_1fb4l_18";
-const inputError$5 = "_inputError_1fb4l_25";
-const inputWarning$5 = "_inputWarning_1fb4l_26";
-const inputDisabled$5 = "_inputDisabled_1fb4l_61";
-const hideScrollbars$5 = "_hideScrollbars_1fb4l_67";
+const inputInTable$4 = "_inputInTable_1fb4l_1";
+const inputHover$4 = "_inputHover_1fb4l_13";
+const inputFocus$4 = "_inputFocus_1fb4l_18";
+const inputError$4 = "_inputError_1fb4l_25";
+const inputWarning$4 = "_inputWarning_1fb4l_26";
+const inputDisabled$4 = "_inputDisabled_1fb4l_61";
+const hideScrollbars$4 = "_hideScrollbars_1fb4l_67";
 const richTextInput = "_richTextInput_1fb4l_77";
-const styles$g = {
-  inputInTable: inputInTable$5,
-  inputHover: inputHover$5,
-  inputFocus: inputFocus$5,
-  inputError: inputError$5,
-  inputWarning: inputWarning$5,
-  inputDisabled: inputDisabled$5,
-  hideScrollbars: hideScrollbars$5,
+const styles$f = {
+  inputInTable: inputInTable$4,
+  inputHover: inputHover$4,
+  inputFocus: inputFocus$4,
+  inputError: inputError$4,
+  inputWarning: inputWarning$4,
+  inputDisabled: inputDisabled$4,
+  hideScrollbars: hideScrollbars$4,
   richTextInput
 };
 const RichTextInput = forwardRef(
@@ -50490,7 +51132,7 @@ const RichTextInput = forwardRef(
       }
       setState(state2);
     };
-    return /* @__PURE__ */ jsx("div", { className: styles$g.richTextInput, children: /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx("div", { className: styles$f.richTextInput, children: /* @__PURE__ */ jsxs(
       Remirror,
       {
         manager,
@@ -50512,164 +51154,6 @@ const RichTextInput = forwardRef(
     ) });
   }
 );
-const inputInTable$4 = "_inputInTable_sl2b5_1";
-const inputHover$4 = "_inputHover_sl2b5_13";
-const inputFocus$4 = "_inputFocus_sl2b5_18";
-const inputError$4 = "_inputError_sl2b5_25";
-const inputWarning$4 = "_inputWarning_sl2b5_26";
-const inputDisabled$4 = "_inputDisabled_sl2b5_61";
-const hideScrollbars$4 = "_hideScrollbars_sl2b5_67";
-const select = "_select_sl2b5_77";
-const isInTable = "_isInTable_sl2b5_121";
-const unSelected = "_unSelected_sl2b5_133";
-const small$3 = "_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$f = {
-  inputInTable: inputInTable$4,
-  inputHover: inputHover$4,
-  inputFocus: inputFocus$4,
-  inputError: inputError$4,
-  inputWarning: inputWarning$4,
-  inputDisabled: inputDisabled$4,
-  hideScrollbars: hideScrollbars$4,
-  select,
-  isInTable,
-  unSelected,
-  small: small$3,
-  right: right$2,
-  groupOrderFirst,
-  groupOrderMiddle,
-  groupOrderLast
-};
-const NativeSelect = ({
-  disabled: disabled2 = false,
-  error: error2 = null,
-  warning: warning2 = null,
-  tooltip: tooltip2 = null,
-  options,
-  onChange = noop$3,
-  onFocus = noop$3,
-  onBlur = noop$3,
-  right: right2 = false,
-  small: small2 = false,
-  tabIndex = 0,
-  selectedOption,
-  width: width2 = null,
-  groupOrder = null,
-  testId,
-  isInTable: isInTable2 = false,
-  clearable,
-  placeholder: placeholder3,
-  hasNonExistentValue,
-  maxTooltipWidth,
-  borderRadius
-}) => {
-  const disabledContext = useContext(DisabledContext);
-  const internalValue = selectedOption === null ? "unselected" : (selectedOption == null ? void 0 : selectedOption.value) === null ? "unselected" : selectedOption == null ? void 0 : selectedOption.value;
-  const isUnselected = internalValue === "unselected";
-  const viewOptions = (internalValue === "unselected" || clearable ? [
-    /* @__PURE__ */ jsx(
-      "option",
-      {
-        value: "unselected",
-        disabled: !clearable,
-        hidden: !clearable,
-        children: placeholder3 || "Select..."
-      },
-      "unselected"
-    )
-  ] : []).concat(
-    hasNonExistentValue ? [
-      /* @__PURE__ */ jsx(
-        "option",
-        {
-          value: selectedOption == null ? void 0 : selectedOption.value,
-          disabled: disabled2 || disabledContext,
-          children: selectedOption == null ? void 0 : selectedOption.label
-        },
-        "selectedNonExistentValue"
-      )
-    ] : []
-  ).concat(
-    options.map((option2, i) => {
-      return /* @__PURE__ */ jsx(
-        "option",
-        {
-          value: option2.value,
-          "data-testid": option2.testId,
-          children: option2.label
-        },
-        i
-      );
-    })
-  );
-  const order2 = (() => {
-    if (groupOrder) {
-      switch (groupOrder) {
-        case GroupOrder.FIRST:
-          return styles$f.groupOrderFirst;
-        case GroupOrder.LAST:
-          return styles$f.groupOrderLast;
-        default:
-          return styles$f.groupOrderMiddle;
-      }
-    }
-    return "";
-  })();
-  return /* @__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: /* @__PURE__ */ jsx(
-        "select",
-        {
-          className: cx$2(
-            styles$f.select,
-            isUnselected ? styles$f.unSelected : "",
-            right2 ? styles$f.right : "",
-            small2 ? styles$f.small : "",
-            isInTable2 ? styles$f.isInTable : "",
-            order2
-          ),
-          style: {
-            width: width2 || "",
-            borderRadius: borderRadius || ""
-          },
-          onChange: (evt) => {
-            const { value } = evt.target;
-            let nextValue;
-            if (value === "unselected") {
-              nextValue = { value: null };
-            } else {
-              const foundOption = options.find(
-                (o) => String(o.value) === String(value)
-              );
-              nextValue = foundOption || { value: null };
-            }
-            onChange(evt, nextValue);
-          },
-          onFocus,
-          onBlur,
-          tabIndex,
-          value: internalValue,
-          disabled: disabled2 || disabledContext,
-          "data-error": error2 || null,
-          "data-warning": warning2 || null,
-          "data-testid": testId,
-          children: viewOptions
-        }
-      )
-    }
-  );
-};
 const row = "_row_n16je_1";
 const styles$e = {
   row
@@ -53800,192 +54284,6 @@ const roundNumberCosmetic = (value) => {
     roundToPrecision(toNum(value), COSMETIC_ROUNDING_DEFAULT_PRECISION)
   ) : value;
 };
-var reactKeyboardEventHandler = { exports: {} };
-(function(module, exports) {
-  !function(e2, t) {
-    module.exports = t(React__default, PropTypes__default);
-  }(window, function(e2, t) {
-    return function(e3) {
-      var t2 = {};
-      function n2(r2) {
-        if (t2[r2]) return t2[r2].exports;
-        var o = t2[r2] = { i: r2, l: false, exports: {} };
-        return e3[r2].call(o.exports, o, o.exports, n2), o.l = true, o.exports;
-      }
-      return n2.m = e3, n2.c = t2, n2.d = function(e4, t3, r2) {
-        n2.o(e4, t3) || Object.defineProperty(e4, t3, { enumerable: true, get: r2 });
-      }, n2.r = function(e4) {
-        "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e4, Symbol.toStringTag, { value: "Module" }), Object.defineProperty(e4, "__esModule", { value: true });
-      }, n2.t = function(e4, t3) {
-        if (1 & t3 && (e4 = n2(e4)), 8 & t3) return e4;
-        if (4 & t3 && "object" == typeof e4 && e4 && e4.__esModule) return e4;
-        var r2 = /* @__PURE__ */ Object.create(null);
-        if (n2.r(r2), Object.defineProperty(r2, "default", { enumerable: true, value: e4 }), 2 & t3 && "string" != typeof e4) for (var o in e4) n2.d(r2, o, (function(t4) {
-          return e4[t4];
-        }).bind(null, o));
-        return r2;
-      }, n2.n = function(e4) {
-        var t3 = e4 && e4.__esModule ? function() {
-          return e4.default;
-        } : function() {
-          return e4;
-        };
-        return n2.d(t3, "a", t3), t3;
-      }, n2.o = function(e4, t3) {
-        return Object.prototype.hasOwnProperty.call(e4, t3);
-      }, n2.p = "", n2(n2.s = 0);
-    }([function(e3, t2, n2) {
-      Object.defineProperty(t2, "__esModule", { value: true });
-      var r2 = n2(1);
-      Object.defineProperty(t2, "default", { enumerable: true, get: function() {
-        return function(e4) {
-          return e4 && e4.__esModule ? e4 : { default: e4 };
-        }(r2).default;
-      } }), e3.exports = t2.default;
-    }, function(e3, t2, n2) {
-      Object.defineProperty(t2, "__esModule", { value: true });
-      var r2 = Object.assign || function(e4) {
-        for (var t3 = 1; t3 < arguments.length; t3++) {
-          var n3 = arguments[t3];
-          for (var r3 in n3) Object.prototype.hasOwnProperty.call(n3, r3) && (e4[r3] = n3[r3]);
-        }
-        return e4;
-      }, o = /* @__PURE__ */ function() {
-        function e4(e5, t3) {
-          for (var n3 = 0; n3 < t3.length; n3++) {
-            var r3 = t3[n3];
-            r3.enumerable = r3.enumerable || false, r3.configurable = true, "value" in r3 && (r3.writable = true), Object.defineProperty(e5, r3.key, r3);
-          }
-        }
-        return function(t3, n3, r3) {
-          return n3 && e4(t3.prototype, n3), r3 && e4(t3, r3), t3;
-        };
-      }(), i = l(n2(2)), u = l(n2(3)), a2 = n2(4);
-      function l(e4) {
-        return e4 && e4.__esModule ? e4 : { default: e4 };
-      }
-      var s = [], c2 = function(e4) {
-        function t3(e5) {
-          !function(e6, t4) {
-            if (!(e6 instanceof t4)) throw new TypeError("Cannot call a class as a function");
-          }(this, t3);
-          var n3 = function(e6, t4) {
-            if (!e6) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-            return !t4 || "object" != typeof t4 && "function" != typeof t4 ? e6 : t4;
-          }(this, (t3.__proto__ || Object.getPrototypeOf(t3)).call(this, e5));
-          return n3.handleKeyboardEvent = n3.handleKeyboardEvent.bind(n3), n3.registerExclusiveHandler = n3.registerExclusiveHandler.bind(n3), n3.deregisterExclusiveHandler = n3.deregisterExclusiveHandler.bind(n3), n3;
-        }
-        return function(e5, t4) {
-          if ("function" != typeof t4 && null !== t4) throw new TypeError("Super expression must either be null or a function, not " + typeof t4);
-          e5.prototype = Object.create(t4 && t4.prototype, { constructor: { value: e5, enumerable: false, writable: true, configurable: true } }), t4 && (Object.setPrototypeOf ? Object.setPrototypeOf(e5, t4) : e5.__proto__ = t4);
-        }(t3, i.default.Component), o(t3, [{ key: "componentDidMount", value: function() {
-          document.addEventListener("keydown", this.handleKeyboardEvent, false), document.addEventListener("keyup", this.handleKeyboardEvent, false), document.addEventListener("keypress", this.handleKeyboardEvent, false);
-          var e5 = this.props, t4 = e5.isExclusive, n3 = e5.isDisabled;
-          t4 && !n3 && this.registerExclusiveHandler();
-        } }, { key: "componentWillUnmount", value: function() {
-          document.removeEventListener("keydown", this.handleKeyboardEvent, false), document.removeEventListener("keyup", this.handleKeyboardEvent, false), document.removeEventListener("keypress", this.handleKeyboardEvent, false), this.deregisterExclusiveHandler();
-        } }, { key: "componentDidUpdate", value: function(e5) {
-          var t4 = e5.isExclusive, n3 = e5.isDisabled;
-          (this.props.isExclusive !== t4 || this.props.isDisabled !== n3) && (this.props.isExclusive && !this.props.isDisabled ? this.registerExclusiveHandler() : this.deregisterExclusiveHandler());
-        } }, { key: "registerExclusiveHandler", value: function() {
-          this.deregisterExclusiveHandler(), s.unshift(this);
-        } }, { key: "deregisterExclusiveHandler", value: function() {
-          var e5 = this;
-          s.includes(this) && (s = s.filter(function(t4) {
-            return t4 !== e5;
-          }));
-        } }, { key: "handleKeyboardEvent", value: function(e5) {
-          var t4 = this.props, n3 = t4.isDisabled, r3 = t4.handleKeys, o2 = t4.onKeyEvent, i2 = t4.handleEventType, u2 = t4.children, l2 = t4.handleFocusableElements;
-          if (n3) return false;
-          if (!(i2 === e5.type)) return false;
-          if (s.length > 0 && s[0] !== this) return false;
-          var c3 = e5.target === document.body || l2, d2 = this.childrenContainer && this.childrenContainer.contains(e5.target);
-          if (!(u2 ? d2 : c3)) return false;
-          var f2 = (0, a2.findMatchedKey)(e5, r3);
-          return !!f2 && (o2(f2, e5), true);
-        } }, { key: "render", value: function() {
-          var e5 = this, n3 = this.props.children, o2 = Object.assign({}, this.props), u2 = true, a3 = false, l2 = void 0;
-          try {
-            for (var s2, c3 = Object.keys(t3.propTypes)[Symbol.iterator](); !(u2 = (s2 = c3.next()).done); u2 = true) {
-              delete o2[s2.value];
-            }
-          } catch (e6) {
-            a3 = true, l2 = e6;
-          } finally {
-            try {
-              !u2 && c3.return && c3.return();
-            } finally {
-              if (a3) throw l2;
-            }
-          }
-          return n3 ? i.default.createElement("span", r2({ ref: function(t4) {
-            e5.childrenContainer = t4;
-          } }, o2), n3) : null;
-        } }]), t3;
-      }();
-      t2.default = c2, c2.propTypes = { handleKeys: u.default.array, handleEventType: u.default.oneOf(["keydown", "keyup", "keypress"]), handleFocusableElements: u.default.bool, onKeyEvent: u.default.func, isDisabled: u.default.bool, isExclusive: u.default.bool, children: u.default.any }, c2.defaultProps = { handleKeys: [], handleFocusableElements: false, handleEventType: "keydown", onKeyEvent: function() {
-        return null;
-      } }, e3.exports = t2.default;
-    }, function(t2, n2) {
-      t2.exports = e2;
-    }, function(e3, n2) {
-      e3.exports = t;
-    }, function(e3, t2, n2) {
-      function r2(e4, t3, n3) {
-        return t3 in e4 ? Object.defineProperty(e4, t3, { value: n3, enumerable: true, configurable: true, writable: true }) : e4[t3] = n3, e4;
-      }
-      Object.defineProperty(t2, "__esModule", { value: true }), t2.matchKeyEvent = p, t2.findMatchedKey = function(e4, t3) {
-        var n3 = t3.map(function(e5) {
-          var t4 = e5.toLowerCase(), n4 = f2[t4];
-          return n4 || [e5];
-        }).reduce(function(e5, t4) {
-          return e5.concat(t4);
-        }, []).find(function(t4) {
-          return p(e4, t4);
-        });
-        !n3 && t3.includes("all") && (n3 = "other");
-        return n3;
-      };
-      var o = { backspace: [8], del: [46], delete: [46], ins: [45], insert: [45], tab: [9], enter: [13], return: [13], esc: [27], space: [32], pageup: [33], pagedown: [34], end: [35], home: [36], left: [37], up: [38], right: [39], down: [40], shift: [16], ctrl: [17], alt: [18], cap: [20], num: [144], clear: [12], meta: [91], ";": [186, 59], "=": [187, 61], ",": [188, 44], "-": [189, 45, 173, 109], minus: [189, 45, 173, 109], ".": [190, 110], "/": [191, 111], "`": [192], "[": [219], "\\": [220], "]": [221], "*": [106], "+": [107], plus: [107], "'": [222], quote: [222] }, i = Object.keys(o).reduce(function(e4, t3) {
-        return Object.assign(e4, r2({}, t3.toUpperCase(), o[t3]));
-      }, {}), u = "0123456789".split("").reduce(function(e4, t3, n3) {
-        return Object.assign(e4, r2({}, t3, [n3 + 48, n3 + 96]));
-      }, {}), a2 = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("").reduce(function(e4, t3, n3) {
-        return Object.assign(e4, r2({}, t3.toLowerCase(), [n3 + 65]), r2({}, t3, [n3 + 65]));
-      }, {}), l = "1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19".split(",").reduce(function(e4, t3, n3) {
-        return Object.assign(e4, r2({}, "f" + t3, [n3 + 112]));
-      }, {}), s = { control: "ctrl", ctrl: "ctrl", shift: "shift", meta: "meta", cmd: "meta", command: "meta", option: "alt", alt: "alt" }, c2 = t2.AllKeys = Object.assign({}, o, i, u, a2, l), d2 = Object.assign({}, u, a2), f2 = { all: Object.keys(c2), alphanumeric: Object.keys(d2), numeric: Object.keys(u), alphabetic: Object.keys(a2), function: Object.keys(l) };
-      function p(e4, t3) {
-        var n3 = e4.which || e4.keyCode, r3 = e4.type, o2 = Object.keys(s).filter(function(t4) {
-          return e4[t4 + "Key"];
-        }).sort(), i2 = t3.toLowerCase().trim(), u2 = "+" === i2 ? ["+"] : i2.split(/\s?\+\s?/), a3 = u2.pop(), l2 = c2[a3], d3 = u2;
-        if ("keypress" === r3) return t3 == String.fromCharCode(n3).toLowerCase();
-        if (0 === d3.length && 0 === o2.length) return l2.indexOf(n3) >= 0;
-        if (d3.length > 0 && o2.length > 0) {
-          var f3 = d3.map(function(e5) {
-            return s[e5];
-          }).sort(), p2 = f3.length === o2.length && f3.every(function(e5, t4) {
-            return o2[t4] === e5;
-          });
-          return l2.indexOf(n3) >= 0 && p2;
-        }
-        return 0 == d3.length && 1 === o2.length && a3 === o2[0];
-      }
-    }]);
-  });
-})(reactKeyboardEventHandler);
-var reactKeyboardEventHandlerExports = reactKeyboardEventHandler.exports;
-const KeyboardEventHandler = /* @__PURE__ */ getDefaultExportFromCjs(reactKeyboardEventHandlerExports);
-var EventKey = /* @__PURE__ */ ((EventKey2) => {
-  EventKey2["RIGHT"] = "right";
-  EventKey2["LEFT"] = "left";
-  EventKey2["UP"] = "up";
-  EventKey2["DOWN"] = "down";
-  EventKey2["ENTER"] = "enter";
-  EventKey2["ESC"] = "esc";
-  EventKey2["TAB"] = "tab";
-  return EventKey2;
-})(EventKey || {});
 const getStringName$1 = (name2) => {
   if (!name2) return "";
   if (typeof name2 === "string") {
@@ -69283,27 +69581,6 @@ const SmartUploadModal = ({
     }
   ) });
 };
-const useFocus = () => {
-  const ref2 = useRef(null);
-  const setFocus = () => {
-    if (ref2.current) {
-      ref2.current.focus();
-    }
-  };
-  return [ref2, setFocus];
-};
-const getWidth = () => window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
-const useWindowWidth = () => {
-  const [width2, setWidth] = useState(getWidth());
-  const resizeListener = debounce$2(() => setWidth(getWidth()), 150);
-  useEffect(() => {
-    window.addEventListener("resize", resizeListener);
-    return () => {
-      window.removeEventListener("resize", resizeListener);
-    };
-  }, []);
-  return width2;
-};
 export {
   Accordion,
   AccordionWithDefaultToggle,