@darajs/core 1.9.4 → 1.9.5

package/dist/umd/dara.core.umd.js

@@ -15588,7 +15588,7 @@ var __privateWrapper = (obj, member, setter, getter) => ({
     var allProps = _objectSpread2$1(_objectSpread2$1({}, defaultProps$5), props);
     var iconArgs = allProps.icon, maskArgs = allProps.mask, symbol = allProps.symbol, className = allProps.className, title = allProps.title, titleId = allProps.titleId, maskId = allProps.maskId;
     var iconLookup = normalizeIconArgs(iconArgs);
-    var classes = objectWithKey("classes", [].concat(_toConsumableArray$2(classList(allProps)), _toConsumableArray$2(className.split(" "))));
+    var classes = objectWithKey("classes", [].concat(_toConsumableArray$2(classList(allProps)), _toConsumableArray$2((className || "").split(" "))));
     var transform = objectWithKey("transform", typeof allProps.transform === "string" ? parse$1$1.transform(allProps.transform) : allProps.transform);
     var mask = objectWithKey("mask", normalizeIconArgs(maskArgs));
     var renderedIcon = icon(iconLookup, _objectSpread2$1(_objectSpread2$1(_objectSpread2$1(_objectSpread2$1({}, classes), transform), mask), {}, {
@@ -15881,10 +15881,8 @@ var __privateWrapper = (obj, member, setter, getter) => ({
     color: ${(props) => props.theme.colors.grey5};
     transition: transform 0.1s linear;
 `;
-  function Chevron$1(props, ref) {
-    return jsxRuntime.exports.jsx(Icon$2, { angles: props.angles, className: props.className, disabled: props.disabled, isOpen: props.isOpen, onClick: props.onClick, ref, style: props.style });
-  }
-  const Chevron$2 = React__namespace.forwardRef(Chevron$1);
+  const Chevron$1 = React__namespace.forwardRef((props, ref) => jsxRuntime.exports.jsx(Icon$2, { angles: props.angles, className: props.className, disabled: props.disabled, isOpen: props.isOpen, onClick: props.onClick, ref, style: props.style }));
+  const Chevron$2 = React__namespace.memo(Chevron$1);
   styled__default.default.label`
     margin-bottom: 0;
     font-size: 11px;
@@ -15901,33 +15899,18 @@ var __privateWrapper = (obj, member, setter, getter) => ({
 
     border: 1px solid ${(props) => props.theme.colors.grey3};
 `;
-  const ListItem = styled__default.default.span`
-    cursor: pointer;
-    user-select: none;
-
-    overflow: hidden;
+  const NoItemsLabel = styled__default.default.span`
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    justify-content: center;
 
-    width: 100%;
-    min-height: 2rem;
-    padding: 0.25rem 1rem;
+    height: 2rem;
 
-    font-size: ${(props) => props.size ? `${props.size}rem` : "1rem"};
-    font-weight: 300;
+    font-size: 1rem;
     color: ${(props) => props.theme.colors.text};
-    text-overflow: ellipsis;
-    white-space: nowrap;
-
-    background-color: ${(props) => props.hovered ? props.theme.colors.grey2 : props.theme.colors.blue1};
-    border-bottom: 1px solid ${(props) => props.theme.colors.grey3};
-
-    :active {
-        color: ${(props) => props.theme.colors.blue1};
-        background-color: ${(props) => props.theme.colors.primary};
-    }
 
-    &:last-child {
-        border-bottom: none;
-    }
+    background-color: ${(props) => props.theme.colors.blue1};
 `;
   globalThis && globalThis.__awaiter || function(thisArg, _arguments, P, generator) {
     function adopt(value) {
@@ -16187,7 +16170,7 @@ var __privateWrapper = (obj, member, setter, getter) => ({
     module2.exports = lib.exports;
   })(shortid$1);
   const shortid = /* @__PURE__ */ getDefaultExportFromCjs(shortid$1.exports);
-  var __awaiter$1 = globalThis && globalThis.__awaiter || function(thisArg, _arguments, P, generator) {
+  var __awaiter$2 = globalThis && globalThis.__awaiter || function(thisArg, _arguments, P, generator) {
     function adopt(value) {
       return value instanceof P ? value : new P(function(resolve) {
         resolve(value);
@@ -16226,7 +16209,7 @@ var __privateWrapper = (obj, member, setter, getter) => ({
     return res.status >= 100 && res.status < 400;
   };
   function validateResponse(res, fallbackMessage, requestParams) {
-    return __awaiter$1(this, void 0, void 0, function* () {
+    return __awaiter$2(this, void 0, void 0, function* () {
       if (!isValidResponse(res)) {
         let message = fallbackMessage;
         try {
@@ -20155,48 +20138,38 @@ var __privateWrapper = (obj, member, setter, getter) => ({
     border-radius: ${(props) => props.height ? `${props.height / 2}px` : "1rem"};
 `;
   function _extends$1() {
-    _extends$1 = Object.assign ? Object.assign.bind() : function(target) {
-      for (var i2 = 1; i2 < arguments.length; i2++) {
-        var source = arguments[i2];
-        for (var key in source) {
-          if (Object.prototype.hasOwnProperty.call(source, key)) {
-            target[key] = source[key];
-          }
-        }
+    return _extends$1 = Object.assign ? Object.assign.bind() : function(n2) {
+      for (var e3 = 1; e3 < arguments.length; e3++) {
+        var t2 = arguments[e3];
+        for (var r2 in t2)
+          ({}).hasOwnProperty.call(t2, r2) && (n2[r2] = t2[r2]);
       }
-      return target;
-    };
-    return _extends$1.apply(this, arguments);
+      return n2;
+    }, _extends$1.apply(null, arguments);
   }
-  function _assertThisInitialized$4(self2) {
-    if (self2 === void 0) {
+  function _assertThisInitialized$4(e3) {
+    if (void 0 === e3)
       throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-    }
-    return self2;
+    return e3;
   }
-  function _setPrototypeOf$3(o2, p2) {
-    _setPrototypeOf$3 = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf2(o3, p3) {
-      o3.__proto__ = p3;
-      return o3;
-    };
-    return _setPrototypeOf$3(o2, p2);
+  function _setPrototypeOf$3(t2, e3) {
+    return _setPrototypeOf$3 = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(t3, e4) {
+      return t3.__proto__ = e4, t3;
+    }, _setPrototypeOf$3(t2, e3);
   }
-  function _inheritsLoose$1(subClass, superClass) {
-    subClass.prototype = Object.create(superClass.prototype);
-    subClass.prototype.constructor = subClass;
-    _setPrototypeOf$3(subClass, superClass);
+  function _inheritsLoose$1(t2, o2) {
+    t2.prototype = Object.create(o2.prototype), t2.prototype.constructor = t2, _setPrototypeOf$3(t2, o2);
   }
-  function _getPrototypeOf$3(o2) {
-    _getPrototypeOf$3 = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf2(o3) {
-      return o3.__proto__ || Object.getPrototypeOf(o3);
-    };
-    return _getPrototypeOf$3(o2);
+  function _getPrototypeOf$3(t2) {
+    return _getPrototypeOf$3 = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(t3) {
+      return t3.__proto__ || Object.getPrototypeOf(t3);
+    }, _getPrototypeOf$3(t2);
   }
-  function _isNativeFunction$1(fn) {
+  function _isNativeFunction$1(t2) {
     try {
-      return Function.toString.call(fn).indexOf("[native code]") !== -1;
-    } catch (e3) {
-      return typeof fn === "function";
+      return -1 !== Function.toString.call(t2).indexOf("[native code]");
+    } catch (n2) {
+      return "function" == typeof t2;
     }
   }
   function _isNativeReflectConstruct$3() {
@@ -20217,33 +20190,30 @@ var __privateWrapper = (obj, member, setter, getter) => ({
     var p2 = new (t2.bind.apply(t2, o2))();
     return r2 && _setPrototypeOf$3(p2, r2.prototype), p2;
   }
-  function _wrapNativeSuper$1(Class) {
-    var _cache = typeof Map === "function" ? /* @__PURE__ */ new Map() : void 0;
-    _wrapNativeSuper$1 = function _wrapNativeSuper2(Class2) {
-      if (Class2 === null || !_isNativeFunction$1(Class2))
-        return Class2;
-      if (typeof Class2 !== "function") {
+  function _wrapNativeSuper$1(t2) {
+    var r2 = "function" == typeof Map ? /* @__PURE__ */ new Map() : void 0;
+    return _wrapNativeSuper$1 = function _wrapNativeSuper2(t3) {
+      if (null === t3 || !_isNativeFunction$1(t3))
+        return t3;
+      if ("function" != typeof t3)
         throw new TypeError("Super expression must either be null or a function");
-      }
-      if (typeof _cache !== "undefined") {
-        if (_cache.has(Class2))
-          return _cache.get(Class2);
-        _cache.set(Class2, Wrapper2);
+      if (void 0 !== r2) {
+        if (r2.has(t3))
+          return r2.get(t3);
+        r2.set(t3, Wrapper2);
       }
       function Wrapper2() {
-        return _construct$1(Class2, arguments, _getPrototypeOf$3(this).constructor);
+        return _construct$1(t3, arguments, _getPrototypeOf$3(this).constructor);
       }
-      Wrapper2.prototype = Object.create(Class2.prototype, {
+      return Wrapper2.prototype = Object.create(t3.prototype, {
         constructor: {
           value: Wrapper2,
           enumerable: false,
           writable: true,
           configurable: true
         }
-      });
-      return _setPrototypeOf$3(Wrapper2, Class2);
-    };
-    return _wrapNativeSuper$1(Class);
+      }), _setPrototypeOf$3(Wrapper2, t3);
+    }, _wrapNativeSuper$1(t2);
   }
   var PolishedError$1 = /* @__PURE__ */ function(_Error) {
     _inheritsLoose$1(PolishedError2, _Error);
@@ -20736,7 +20706,7 @@ var __privateWrapper = (obj, member, setter, getter) => ({
     var _a;
     return jsxRuntime.exports.jsxs(Wrapper$8, { className: props.className, style: props.style, children: [jsxRuntime.exports.jsxs(Loader, { color: props.color, size: props.size, children: [jsxRuntime.exports.jsx("div", { className: "sk-chase-dot" }), jsxRuntime.exports.jsx("div", { className: "sk-chase-dot" }), jsxRuntime.exports.jsx("div", { className: "sk-chase-dot" }), jsxRuntime.exports.jsx("div", { className: "sk-chase-dot" }), jsxRuntime.exports.jsx("div", { className: "sk-chase-dot" }), jsxRuntime.exports.jsx("div", { className: "sk-chase-dot" })] }), (props.showText || props.text) && jsxRuntime.exports.jsx(LoadingText, { color: props.color, children: (_a = props.text) !== null && _a !== void 0 ? _a : "LOADING" })] });
   }
-  var __rest$5 = globalThis && globalThis.__rest || function(s, e3) {
+  var __rest$7 = globalThis && globalThis.__rest || function(s, e3) {
     var t2 = {};
     for (var p2 in s)
       if (Object.prototype.hasOwnProperty.call(s, p2) && e3.indexOf(p2) < 0)
@@ -20842,7 +20812,7 @@ var __privateWrapper = (obj, member, setter, getter) => ({
     secondary: SecondaryButton
   };
   function Button(_a, ref) {
-    var { autoFocus, children, className, disabled: disabled2, download, href, loading, id, onClick, outline = false, style, styling = "primary", type = "button" } = _a, props = __rest$5(_a, ["autoFocus", "children", "className", "disabled", "download", "href", "loading", "id", "onClick", "outline", "style", "styling", "type"]);
+    var { autoFocus, children, className, disabled: disabled2, download, href, loading, id, onClick, outline = false, style, styling = "primary", type = "button" } = _a, props = __rest$7(_a, ["autoFocus", "children", "className", "disabled", "download", "href", "loading", "id", "onClick", "outline", "style", "styling", "type"]);
     const currentTheme = useClTheme();
     const Component = stylingMap[styling];
     const content = loading ? jsxRuntime.exports.jsx(StyledLoading, { color: outline ? currentTheme.colors.grey2 : currentTheme.colors.blue1 }) : children;
@@ -34182,7 +34152,7 @@ var __privateWrapper = (obj, member, setter, getter) => ({
       return jsxRuntime.exports.jsx(CheckboxWrapper, { "aria-disabled": props.disabled, children: jsxRuntime.exports.jsx(Checkbox, { disabled: isSelectPermitted ? props.disabled : ((_a = checkedState.find((option) => option.value === item.value)) === null || _a === void 0 ? void 0 : _a.state) === false, id: index2, isListStyle: props.isListStyle, label: item.label ? item.label : item.value, onChange: (checked, e3) => onChangeValue(e3), selected: (_b = checkedState.find((option) => option.value === item.value)) === null || _b === void 0 ? void 0 : _b.state }) }, `item-${index2}`);
     })] });
   }
-  var __rest$4 = globalThis && globalThis.__rest || function(s, e3) {
+  var __rest$6 = globalThis && globalThis.__rest || function(s, e3) {
     var t2 = {};
     for (var p2 in s)
       if (Object.prototype.hasOwnProperty.call(s, p2) && e3.indexOf(p2) < 0)
@@ -34238,7 +34208,7 @@ var __privateWrapper = (obj, member, setter, getter) => ({
     color: ${(props) => props.theme.colors.error};
 `;
   const Input$1 = React.forwardRef((_a, ref) => {
-    var { type = "text" } = _a, props = __rest$4(_a, ["type"]);
+    var { type = "text" } = _a, props = __rest$6(_a, ["type"]);
     const onChange2 = (e3) => {
       const target = e3.target;
       if (props.onChange) {
@@ -34412,18 +34382,17 @@ var __privateWrapper = (obj, member, setter, getter) => ({
       setPreviousFilter(filterValue);
     }, children: "Apply" })] });
   }
-  function _objectWithoutPropertiesLoose$2(source, excluded) {
-    if (source == null)
+  function _objectWithoutPropertiesLoose$2(r2, e3) {
+    if (null == r2)
       return {};
-    var target = {};
-    for (var key in source) {
-      if (Object.prototype.hasOwnProperty.call(source, key)) {
-        if (excluded.indexOf(key) >= 0)
+    var t2 = {};
+    for (var n2 in r2)
+      if ({}.hasOwnProperty.call(r2, n2)) {
+        if (e3.indexOf(n2) >= 0)
           continue;
-        target[key] = source[key];
+        t2[n2] = r2[n2];
       }
-    }
-    return target;
+    return t2;
   }
   var reactIs = { exports: {} };
   var reactIs_production_min = {};
@@ -34598,25 +34567,6 @@ var __privateWrapper = (obj, member, setter, getter) => ({
     }
     return D2;
   };
-  var extendStatics = function(d2, b2) {
-    extendStatics = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function(d3, b3) {
-      d3.__proto__ = b3;
-    } || function(d3, b3) {
-      for (var p2 in b3)
-        if (Object.prototype.hasOwnProperty.call(b3, p2))
-          d3[p2] = b3[p2];
-    };
-    return extendStatics(d2, b2);
-  };
-  function __extends(d2, b2) {
-    if (typeof b2 !== "function" && b2 !== null)
-      throw new TypeError("Class extends value " + String(b2) + " is not a constructor or null");
-    extendStatics(d2, b2);
-    function __() {
-      this.constructor = d2;
-    }
-    d2.prototype = b2 === null ? Object.create(b2) : (__.prototype = b2.prototype, new __());
-  }
   var __assign = function() {
     __assign = Object.assign || function __assign2(t2) {
       for (var s, i2 = 1, n2 = arguments.length; i2 < n2; i2++) {
@@ -34629,7 +34579,7 @@ var __privateWrapper = (obj, member, setter, getter) => ({
     };
     return __assign.apply(this, arguments);
   };
-  function __awaiter(thisArg, _arguments, P, generator) {
+  function __awaiter$1(thisArg, _arguments, P, generator) {
     function adopt(value) {
       return value instanceof P ? value : new P(function(resolve) {
         resolve(value);
@@ -34656,7 +34606,7 @@ var __privateWrapper = (obj, member, setter, getter) => ({
       step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
   }
-  function __generator(thisArg, body) {
+  function __generator$1(thisArg, body) {
     var _ = { label: 0, sent: function() {
       if (t2[0] & 1)
         throw t2[1];
@@ -34732,21 +34682,7 @@ var __privateWrapper = (obj, member, setter, getter) => ({
       return { value: op[0] ? op[1] : void 0, done: true };
     }
   }
-  function __values(o2) {
-    var s = typeof Symbol === "function" && Symbol.iterator, m2 = s && o2[s], i2 = 0;
-    if (m2)
-      return m2.call(o2);
-    if (o2 && typeof o2.length === "number")
-      return {
-        next: function() {
-          if (o2 && i2 >= o2.length)
-            o2 = void 0;
-          return { value: o2 && o2[i2++], done: !o2 };
-        }
-      };
-    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
-  }
-  function __read(o2, n2) {
+  function __read$1(o2, n2) {
     var m2 = typeof Symbol === "function" && o2[Symbol.iterator];
     if (!m2)
       return o2;
@@ -34769,79 +34705,9 @@ var __privateWrapper = (obj, member, setter, getter) => ({
   }
   function __spread() {
     for (var ar = [], i2 = 0; i2 < arguments.length; i2++)
-      ar = ar.concat(__read(arguments[i2]));
+      ar = ar.concat(__read$1(arguments[i2]));
     return ar;
   }
-  function __spreadArray(to, from2, pack) {
-    if (pack || arguments.length === 2)
-      for (var i2 = 0, l2 = from2.length, ar; i2 < l2; i2++) {
-        if (ar || !(i2 in from2)) {
-          if (!ar)
-            ar = Array.prototype.slice.call(from2, 0, i2);
-          ar[i2] = from2[i2];
-        }
-      }
-    return to.concat(ar || Array.prototype.slice.call(from2));
-  }
-  function __await(v2) {
-    return this instanceof __await ? (this.v = v2, this) : new __await(v2);
-  }
-  function __asyncGenerator(thisArg, _arguments, generator) {
-    if (!Symbol.asyncIterator)
-      throw new TypeError("Symbol.asyncIterator is not defined.");
-    var g2 = generator.apply(thisArg, _arguments || []), i2, q2 = [];
-    return i2 = {}, verb("next"), verb("throw"), verb("return"), i2[Symbol.asyncIterator] = function() {
-      return this;
-    }, i2;
-    function verb(n2) {
-      if (g2[n2])
-        i2[n2] = function(v2) {
-          return new Promise(function(a2, b2) {
-            q2.push([n2, v2, a2, b2]) > 1 || resume(n2, v2);
-          });
-        };
-    }
-    function resume(n2, v2) {
-      try {
-        step(g2[n2](v2));
-      } catch (e3) {
-        settle(q2[0][3], e3);
-      }
-    }
-    function step(r2) {
-      r2.value instanceof __await ? Promise.resolve(r2.value.v).then(fulfill, reject) : settle(q2[0][2], r2);
-    }
-    function fulfill(value) {
-      resume("next", value);
-    }
-    function reject(value) {
-      resume("throw", value);
-    }
-    function settle(f2, v2) {
-      if (f2(v2), q2.shift(), q2.length)
-        resume(q2[0][0], q2[0][1]);
-    }
-  }
-  function __asyncValues(o2) {
-    if (!Symbol.asyncIterator)
-      throw new TypeError("Symbol.asyncIterator is not defined.");
-    var m2 = o2[Symbol.asyncIterator], i2;
-    return m2 ? m2.call(o2) : (o2 = typeof __values === "function" ? __values(o2) : o2[Symbol.iterator](), i2 = {}, verb("next"), verb("throw"), verb("return"), i2[Symbol.asyncIterator] = function() {
-      return this;
-    }, i2);
-    function verb(n2) {
-      i2[n2] = o2[n2] && function(v2) {
-        return new Promise(function(resolve, reject) {
-          v2 = o2[n2](v2), settle(resolve, reject, v2.done, v2.value);
-        });
-      };
-    }
-    function settle(resolve, reject, d2, v2) {
-      Promise.resolve(v2).then(function(v3) {
-        resolve({ value: v3, done: d2 });
-      }, reject);
-    }
-  }
   typeof SuppressedError === "function" ? SuppressedError : function(error, suppressed, message) {
     var e3 = new Error(message);
     return e3.name = "SuppressedError", e3.error = error, e3.suppressed = suppressed, e3;
@@ -36537,6 +36403,118 @@ var __privateWrapper = (obj, member, setter, getter) => ({
     keyNavigationNext: "ArrowRight",
     keyNavigationPrevious: "ArrowLeft"
   });
+  var __rest$5 = globalThis && globalThis.__rest || function(s, e3) {
+    var t2 = {};
+    for (var p2 in s)
+      if (Object.prototype.hasOwnProperty.call(s, p2) && e3.indexOf(p2) < 0)
+        t2[p2] = s[p2];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+      for (var i2 = 0, p2 = Object.getOwnPropertySymbols(s); i2 < p2.length; i2++) {
+        if (e3.indexOf(p2[i2]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p2[i2]))
+          t2[p2[i2]] = s[p2[i2]];
+      }
+    return t2;
+  };
+  const StyledChevronButton = styled__default.default(Button$1).attrs((attrs2) => Object.assign(Object.assign({}, attrs2), { styling: "ghost" }))`
+    min-width: 0;
+    height: auto;
+    margin: 0;
+    padding: 0 0.25rem;
+
+    background-color: transparent !important;
+`;
+  const ChevronButton = (_a) => {
+    var { getToggleButtonProps, disabled: disabled2, isOpen } = _a, props = __rest$5(_a, ["getToggleButtonProps", "disabled", "isOpen"]);
+    return jsxRuntime.exports.jsx(StyledChevronButton, Object.assign({}, getToggleButtonProps(), props, { children: jsxRuntime.exports.jsx(Chevron$2, { disabled: disabled2, isOpen }) }));
+  };
+  const ChevronButton$1 = React__default.default.memo(ChevronButton);
+  var __rest$4 = globalThis && globalThis.__rest || function(s, e3) {
+    var t2 = {};
+    for (var p2 in s)
+      if (Object.prototype.hasOwnProperty.call(s, p2) && e3.indexOf(p2) < 0)
+        t2[p2] = s[p2];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+      for (var i2 = 0, p2 = Object.getOwnPropertySymbols(s); i2 < p2.length; i2++) {
+        if (e3.indexOf(p2[i2]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p2[i2]))
+          t2[p2[i2]] = s[p2[i2]];
+      }
+    return t2;
+  };
+  const StyledListItem = styled__default.default.span`
+    cursor: pointer;
+    user-select: none;
+
+    overflow: hidden;
+
+    width: 100%;
+    min-height: 2rem;
+    padding: 0.25rem 1rem;
+
+    font-size: ${(props) => props.size ? `${props.size}rem` : "1rem"};
+    font-weight: 300;
+    color: ${(props) => props.theme.colors.text};
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    background-color: ${(props) => {
+    if (props.isSelected) {
+      return props.theme.colors.blue3;
+    }
+    if (props.isHighlighted) {
+      return props.theme.colors.grey2;
+    }
+    return props.theme.colors.blue1;
+  }};
+    border-bottom: 1px solid ${(props) => props.theme.colors.grey3};
+
+    :hover {
+        background-color: ${(props) => props.theme.colors.grey2};
+    }
+
+    :active {
+        color: ${(props) => props.theme.colors.blue1};
+        background-color: ${(props) => props.theme.colors.blue4};
+    }
+
+    &:last-child {
+        border-bottom: none;
+    }
+`;
+  const ListItem = ({ size: size2, title, item, index: index2, getItemProps, itemClass, children, isHighlighted, isSelected }) => {
+    const _a = getItemProps({ index: index2, item }), { itemClassName } = _a, itemProps = __rest$4(_a, ["itemClassName"]);
+    return jsxRuntime.exports.jsx(StyledListItem, Object.assign({}, itemProps, { className: itemClass ? `${itemClassName} ${itemClass}` : itemClassName, title, size: size2, item, isHighlighted, isSelected, children }));
+  };
+  ListItem.displayName = "ListItem";
+  const ListItem$1 = React__default.default.memo(ListItem);
+  const StyledDropdownList$1 = styled__default.default(List)`
+    border-radius: 0 0 0.25rem 0.25rem;
+    outline: 0;
+    box-shadow: ${(props) => props.theme.shadow.light};
+`;
+  const DropdownList = React__default.default.forwardRef(({ items, getItemProps, getFloatingProps, isOpen, getMenuProps, size: size2, style, maxItems, itemClass, className, children, selectedItem, kbdHighlightIdx }, ref) => jsxRuntime.exports.jsx(StyledDropdownList$1, Object.assign({}, getMenuProps ? getMenuProps({ ref }) : { ref }, getFloatingProps(), { isOpen, maxItems, style: Object.assign(Object.assign({}, style), { zIndex: 9999 }), className, children: !lodash$2.exports.isEmpty(items) ? items.map((item, index2) => {
+    const isSelected = (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.label) === item.label;
+    return children ? children(item, index2) : jsxRuntime.exports.jsx(ListItem$1, { getItemProps, size: size2, title: item.label, item, index: index2, itemClass, isHighlighted: isOpen && kbdHighlightIdx !== void 0 && kbdHighlightIdx === index2, isSelected, children: item.label }, `item-${index2}-${isOpen && isSelected}`);
+  }) : jsxRuntime.exports.jsx(NoItemsLabel, { children: "No Items" }) })));
+  DropdownList.displayName = "DropdownList";
+  const DropdownList$1 = React__default.default.memo(DropdownList);
+  const { stateChangeTypes: useSelectChangeTypes } = useSelect;
+  const { stateChangeTypes: useComboboxChangeTypes } = useCombobox;
+  const setTypes = /* @__PURE__ */ new Set([
+    useSelectChangeTypes.ToggleButtonKeyDownArrowDown,
+    useSelectChangeTypes.ToggleButtonKeyDownArrowUp,
+    useComboboxChangeTypes.InputKeyDownArrowDown,
+    useComboboxChangeTypes.InputKeyDownArrowUp
+  ]);
+  const syncKbdHighlightIdx = (setKbdHighlightIdx) => ({
+    onHighlightedIndexChange: ({ highlightedIndex, type }) => {
+      if (setTypes.has(type)) {
+        setKbdHighlightIdx(highlightedIndex);
+      }
+      if (type === useSelectChangeTypes.ItemMouseMove) {
+        setKbdHighlightIdx(void 0);
+      }
+    }
+  });
   const Wrapper$6 = styled__default.default.div`
     display: inline-flex;
 
@@ -36615,36 +36593,6 @@ var __privateWrapper = (obj, member, setter, getter) => ({
         cursor: not-allowed;
         color: ${(props) => props.theme.colors.grey2};
     }
-`;
-  const NoItemsLabel = styled__default.default.span`
-    display: flex;
-    flex: 1 1 auto;
-    align-items: center;
-    justify-content: center;
-
-    height: 2rem;
-
-    font-size: 1rem;
-    color: ${(props) => props.theme.colors.text};
-
-    background-color: ${(props) => props.theme.colors.blue1};
-`;
-  styled__default.default(List)`
-    margin-left: -1px;
-    border-radius: 0 0 0.25rem 0.25rem;
-    box-shadow: ${(props) => props.theme.shadow.light};
-`;
-  const ChevronButton = styled__default.default(Button$1).attrs((attrs2) => Object.assign(Object.assign({}, attrs2), { styling: "ghost" }))`
-    min-width: 0;
-    height: auto;
-    margin: 0;
-    padding: 0 0.25rem;
-
-    background-color: transparent !important;
-`;
-  styled__default.default(List)`
-    overflow-y: auto;
-    box-shadow: ${(props) => props.theme.shadow.light};
 `;
   var dateFormats$1 = {
     full: "EEEE, d MMMM yyyy",
@@ -43277,7 +43225,7 @@ var __privateWrapper = (obj, member, setter, getter) => ({
         }
     }
 `;
-  const DatepickerListItem = styled__default.default.span`
+  const StyledDatepickerListItem = styled__default.default.span`
     cursor: pointer;
     user-select: none;
 
@@ -43289,22 +43237,27 @@ var __privateWrapper = (obj, member, setter, getter) => ({
     min-height: 2rem;
     padding: 0.25rem 1.5rem;
 
-    font-size: ${(props) => props.size ? `${props.size}rem` : props.theme.font.size};
+    font-size: 0.75rem;
     font-weight: 300;
     color: ${(props) => props.isSelected ? "#FFF" : props.theme.colors.text};
     text-overflow: ellipsis;
     white-space: nowrap;
+    border-radius: 0.25rem;
 
     background-color: ${(props) => {
     if (props.isSelected) {
       return props.theme.colors.primary;
     }
-    if (props.hovered) {
+    if (props.isHighlighted) {
       return props.theme.colors.grey2;
     }
     return props.theme.colors.grey1;
   }};
 
+    :hover {
+        background-color: ${(props) => props.isSelected ? props.theme.colors.primary : props.theme.colors.grey2};
+    }
+
     :active {
         background-color: ${(props) => props.theme.colors.grey1};
     }
@@ -43313,39 +43266,41 @@ var __privateWrapper = (obj, member, setter, getter) => ({
         border-bottom: none;
     }
 `;
-  const DropdownList$1 = styled__default.default.div`
+  const DatepickerListItem = React__namespace.memo(({ item, index: index2, getItemProps, isSelected, size: size2, isHighlighted }) => {
+    const _a = getItemProps({ index: index2, item }), itemProps = __rest$3(_a, ["itemClassName"]);
+    return jsxRuntime.exports.jsx(StyledDatepickerListItem, Object.assign({}, itemProps, { isSelected, title: item.label, item, index: index2, size: size2, isHighlighted, children: item.label }));
+  });
+  const StyledDropdownList = React__namespace.memo(styled__default.default(DropdownList$1)`
     overflow-y: auto;
     display: ${(props) => props.isOpen ? "flex" : "none"};
     flex-direction: column;
     gap: 0.125rem;
 
-    max-height: calc(${(props) => (props.maxItems || 5) * 2}em + 2px);
+    width: 16.25rem;
+    max-height: calc(
+        ${(props) => (props.maxItems || 5) * 2}em + 2px + (${(props) => (props.maxItems || 5) - 1}) * 0.125em
+    );
     margin-left: ${(props) => props.displacement}rem;
 
     background-color: ${(props) => props.theme.colors.grey1};
     border: none;
-    outline: 0;
-`;
+    box-shadow: none;
+`);
+  const DatepickerSelectButtonPrimary = React__namespace.memo(({ disabled: disabled2, getToggleButtonProps, setReference, getReferenceProps, size: size2, isOpen, selectedItem }) => jsxRuntime.exports.jsxs(SelectButtonPrimary, Object.assign({ disabled: disabled2 }, getToggleButtonProps({ disabled: disabled2, ref: setReference }), getReferenceProps(), { type: "button", children: [jsxRuntime.exports.jsx(SelectedItem$1, { size: size2, children: selectedItem ? selectedItem.label : "Select" }), jsxRuntime.exports.jsx(Chevron$2, { disabled: disabled2, isOpen })] })));
   function DatepickerSelect(props) {
     var _a;
-    const [pendingHighlight, setPendingHighlight] = React.useState(null);
-    const { isOpen, selectedItem, getToggleButtonProps, getMenuProps, highlightedIndex, getItemProps, setHighlightedIndex } = useSelect(Object.assign({ initialSelectedItem: props.initialValue, itemToString: (item) => item.label, items: props.items, onSelectedItemChange: (changes) => {
+    const [kbdHighlightIdx, setKbdHighlightIdx] = React__namespace.useState();
+    const { isOpen, selectedItem, getToggleButtonProps, getMenuProps, getItemProps } = useSelect(Object.assign(Object.assign(Object.assign({ initialSelectedItem: props.initialValue, itemToString: (item) => item.label, items: props.items, onSelectedItemChange: (changes) => {
       const selected = changes.selectedItem;
       if (props.onSelect) {
         props.onSelect(selected);
       }
-    }, stateReducer: (state, { changes, type }) => {
-      if (type === stateChangeTypes$1.ToggleButtonClick) {
-        setPendingHighlight(changes.selectedItem ? props.items.findIndex((i2) => i2.value === changes.selectedItem.value) : 0);
+    } }, syncKbdHighlightIdx(setKbdHighlightIdx)), { stateReducer: (state, { changes, type }) => {
+      if (type === stateChangeTypes$1.ToggleButtonClick && (changes === null || changes === void 0 ? void 0 : changes.isOpen) && props.selectedItem) {
+        return Object.assign(Object.assign({}, changes), { highlightedIndex: props.items.findIndex((i2) => i2.value === changes.selectedItem.value) });
       }
       return changes;
-    } }, props.selectedItem && { selectedItem: props.selectedItem }));
-    React.useEffect(() => {
-      if (isOpen && pendingHighlight !== null) {
-        setHighlightedIndex(pendingHighlight);
-        setPendingHighlight(null);
-      }
-    }, [isOpen, pendingHighlight, setHighlightedIndex]);
+    } }), props.selectedItem && { selectedItem: props.selectedItem }));
     const { refs, floatingStyles, context: context2 } = useFloating({
       open: isOpen,
       placement: props.placement || "bottom-start",
@@ -43354,19 +43309,15 @@ var __privateWrapper = (obj, member, setter, getter) => ({
     });
     const role = useRole(context2, { role: "listbox" });
     const { getReferenceProps, getFloatingProps } = useInteractions([role]);
-    const menuProps = getMenuProps();
-    const setMenuRef = menuProps.ref;
     const setFloatingRef = refs.setFloating;
     const { dropdownRef } = props;
     const mergedDropdownRef = React__namespace.useCallback((node) => {
       setFloatingRef(node);
-      setMenuRef(node);
       dropdownRef === null || dropdownRef === void 0 ? void 0 : dropdownRef(node);
-    }, [setFloatingRef, setMenuRef, dropdownRef]);
-    return jsxRuntime.exports.jsx(Tooltip, { content: props.errorMsg, disabled: !props.errorMsg, styling: "error", children: jsxRuntime.exports.jsxs(Wrapper$5, { className: props.className, isDisabled: props.disabled, isErrored: !!props.errorMsg, onClick: props.onClick, style: props.style, children: [jsxRuntime.exports.jsxs(SelectButtonPrimary, Object.assign({ disabled: props.disabled }, getToggleButtonProps({ disabled: props.disabled, ref: refs.setReference }), getReferenceProps(), { type: "button", children: [jsxRuntime.exports.jsx(SelectedItem$1, { size: props.size, children: selectedItem ? selectedItem.label : "Select" }), jsxRuntime.exports.jsx(Chevron$2, { disabled: props.disabled, isOpen })] })), ReactDOM__default.default.createPortal(jsxRuntime.exports.jsx(DropdownList$1, Object.assign({}, menuProps, getFloatingProps(), { ref: mergedDropdownRef, className: `${(_a = menuProps === null || menuProps === void 0 ? void 0 : menuProps.className) !== null && _a !== void 0 ? _a : ""} ${props.itemClass}`, displacement: props.displacement, isOpen, maxItems: 7, style: Object.assign(Object.assign({}, floatingStyles), { width: "16.25rem", zIndex: 9999 }), children: props.items.map((item, index2) => {
-      const _a2 = getItemProps({ index: index2, item }), { itemClassName } = _a2, itemProps = __rest$3(_a2, ["itemClassName"]);
-      return React.createElement(DatepickerListItem, Object.assign({}, itemProps, { "aria-selected": selectedItem.label === item.label, className: `${itemClassName} ${props.itemClass}`, hovered: index2 === highlightedIndex, isSelected: selectedItem.label === item.label, key: `item-${index2}`, size: props.size, title: item.label }), item.label);
-    }) })), document.body)] }) });
+    }, [setFloatingRef, dropdownRef]);
+    const menuProps = React__namespace.useMemo(() => getMenuProps({ ref: mergedDropdownRef }), [mergedDropdownRef, getMenuProps]);
+    const renderListItem = React__namespace.useCallback((item, index2) => jsxRuntime.exports.jsx(DatepickerListItem, { item, index: index2, getItemProps, isSelected: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.label) === item.label, isHighlighted: isOpen && kbdHighlightIdx !== void 0 && kbdHighlightIdx === index2 }, `item-${index2}-${isOpen && (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.label) === item.label}`), [getItemProps, selectedItem, isOpen, kbdHighlightIdx]);
+    return jsxRuntime.exports.jsx(Tooltip, { content: props.errorMsg, disabled: !props.errorMsg, styling: "error", children: jsxRuntime.exports.jsxs(Wrapper$5, { className: props.className, isDisabled: props.disabled, isErrored: !!props.errorMsg, onClick: props.onClick, style: props.style, children: [jsxRuntime.exports.jsx(DatepickerSelectButtonPrimary, { disabled: props.disabled, getToggleButtonProps, setReference: refs.setReference, getReferenceProps, size: props.size, isOpen, selectedItem }), ReactDOM__default.default.createPortal(jsxRuntime.exports.jsx(StyledDropdownList, { items: props.items, getItemProps, getFloatingProps, style: floatingStyles, isOpen, getMenuProps, size: props.size, className: `${(_a = menuProps === null || menuProps === void 0 ? void 0 : menuProps.className) !== null && _a !== void 0 ? _a : ""} ${props.itemClass}`, itemClass: props.itemClass, displacement: props.displacement, maxItems: 7, ref: mergedDropdownRef, kbdHighlightIdx, children: renderListItem }), document.body)] }) });
   }
   function getMonths() {
     const months = [];
@@ -43987,8 +43938,8 @@ var __privateWrapper = (obj, member, setter, getter) => ({
     "Thumbs.db"
   ];
   function fromEvent(evt) {
-    return __awaiter(this, void 0, void 0, function() {
-      return __generator(this, function(_a) {
+    return __awaiter$1(this, void 0, void 0, function() {
+      return __generator$1(this, function(_a) {
         return [2, isDragEvt(evt) && evt.dataTransfer ? getDataTransferFiles(evt.dataTransfer, evt.type) : getInputFiles(evt)];
       });
     });
@@ -44006,9 +43957,9 @@ var __privateWrapper = (obj, member, setter, getter) => ({
     return value !== null;
   }
   function getDataTransferFiles(dt2, type) {
-    return __awaiter(this, void 0, void 0, function() {
+    return __awaiter$1(this, void 0, void 0, function() {
       var items, files;
-      return __generator(this, function(_a) {
+      return __generator$1(this, function(_a) {
         switch (_a.label) {
           case 0:
             if (!dt2.items)
@@ -44068,8 +44019,8 @@ var __privateWrapper = (obj, member, setter, getter) => ({
     return Promise.resolve(fwp);
   }
   function fromEntry(entry) {
-    return __awaiter(this, void 0, void 0, function() {
-      return __generator(this, function(_a) {
+    return __awaiter$1(this, void 0, void 0, function() {
+      return __generator$1(this, function(_a) {
         return [2, entry.isDirectory ? fromDirEntry(entry) : fromFileEntry(entry)];
       });
     });
@@ -44081,9 +44032,9 @@ var __privateWrapper = (obj, member, setter, getter) => ({
       function readEntries() {
         var _this = this;
         reader.readEntries(function(batch) {
-          return __awaiter(_this, void 0, void 0, function() {
+          return __awaiter$1(_this, void 0, void 0, function() {
             var files, err_12, items;
-            return __generator(this, function(_a) {
+            return __generator$1(this, function(_a) {
               switch (_a.label) {
                 case 0:
                   if (!!batch.length)
@@ -44120,8 +44071,8 @@ var __privateWrapper = (obj, member, setter, getter) => ({
     });
   }
   function fromFileEntry(entry) {
-    return __awaiter(this, void 0, void 0, function() {
-      return __generator(this, function(_a) {
+    return __awaiter$1(this, void 0, void 0, function() {
+      return __generator$1(this, function(_a) {
         return [2, new Promise(function(resolve, reject) {
           entry.file(function(file) {
             var fwp = toFileWithPath(file, entry.fullPath);
@@ -45140,44 +45091,6 @@ var __privateWrapper = (obj, member, setter, getter) => ({
     text-overflow: ellipsis;
     white-space: nowrap;
 `;
-  styled__default.default.span`
-    display: flex;
-    flex: 1 1 auto;
-    align-items: center;
-    justify-content: center;
-
-    height: 2rem;
-
-    font-size: 1rem;
-    color: ${(props) => props.theme.colors.grey4};
-
-    background-color: ${(props) => props.theme.colors.blue1};
-`;
-  styled__default.default(List)`
-    border-radius: 0 0 0.25rem 0.25rem;
-    outline: 0;
-    box-shadow: ${(props) => props.theme.shadow.light};
-`;
-  styled__default.default(Button$1).attrs((attrs2) => Object.assign(Object.assign({}, attrs2), { styling: "ghost" }))`
-    min-width: 0;
-    height: auto;
-    margin: 0;
-    padding: 0 0.25rem;
-
-    background-color: transparent !important;
-`;
-  var __rest$2 = globalThis && globalThis.__rest || function(s, e3) {
-    var t2 = {};
-    for (var p2 in s)
-      if (Object.prototype.hasOwnProperty.call(s, p2) && e3.indexOf(p2) < 0)
-        t2[p2] = s[p2];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-      for (var i2 = 0, p2 = Object.getOwnPropertySymbols(s); i2 < p2.length; i2++) {
-        if (e3.indexOf(p2[i2]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p2[i2]))
-          t2[p2[i2]] = s[p2[i2]];
-      }
-    return t2;
-  };
   const SelectedItem = styled__default.default.div`
     overflow: hidden;
 
@@ -45258,21 +45171,16 @@ var __privateWrapper = (obj, member, setter, getter) => ({
             color: ${(props) => props.theme.colors.grey2};
         }
     }
-`;
-  const DropdownList = styled__default.default(List)`
-    margin-left: -1px;
-    border-radius: 0 0 0.25rem 0.25rem;
-    outline: 0;
-    box-shadow: ${(props) => props.theme.shadow.light};
 `;
   function Select(props) {
     var _a, _b, _c;
     const { applySameWidthModifier = true } = props;
-    const { isOpen, selectedItem, getToggleButtonProps, getMenuProps, highlightedIndex, getItemProps } = useSelect(Object.assign({ initialIsOpen: props.initialIsOpen, initialSelectedItem: props.initialValue, itemToString: (item) => item.label, items: props.items, onSelectedItemChange: (changes) => {
+    const [kbdHighlightIdx, setKbdHighlightIdx] = React__namespace.useState();
+    const { isOpen, selectedItem, getToggleButtonProps, getMenuProps, getItemProps } = useSelect(Object.assign(Object.assign({ initialIsOpen: props.initialIsOpen, initialSelectedItem: props.initialValue, itemToString: (item) => item.label, items: props.items, onSelectedItemChange: (changes) => {
       var _a2;
       const selected = changes.selectedItem;
       (_a2 = props.onSelect) === null || _a2 === void 0 ? void 0 : _a2.call(props, selected);
-    } }, "selectedItem" in props && { selectedItem: props.selectedItem }));
+    } }, syncKbdHighlightIdx(setKbdHighlightIdx)), "selectedItem" in props && { selectedItem: props.selectedItem }));
     const { refs, floatingStyles, context: context2 } = useFloating({
       open: isOpen,
       placement: props.placement || "bottom-start",
@@ -45289,10 +45197,8 @@ var __privateWrapper = (obj, member, setter, getter) => ({
     }, [setFloatingRef, dropdownRef]);
     const menuProps = React__namespace.useMemo(() => getMenuProps({ ref: mergedDropdownRef }), [mergedDropdownRef, getMenuProps]);
     const toggleButtonProps = React__namespace.useMemo(() => getToggleButtonProps({ disabled: props.disabled, ref: refs.setReference }), [props.disabled, refs.setReference, getToggleButtonProps]);
-    return jsxRuntime.exports.jsx(Tooltip, { content: props.errorMsg, disabled: !props.errorMsg, styling: "error", children: jsxRuntime.exports.jsxs(Wrapper$4, { className: props.className, isDisabled: props.disabled, isErrored: !!props.errorMsg, isOpen, onClick: props.onClick, style: props.style, children: [jsxRuntime.exports.jsxs(SelectButton, Object.assign({ disabled: props.disabled, isOpen }, toggleButtonProps, getReferenceProps(), { type: "button", children: [jsxRuntime.exports.jsx(SelectedItem, { size: props.size, children: (_b = (_a = selectedItem === null ? props.placeholder : selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.label) !== null && _a !== void 0 ? _a : props.placeholder) !== null && _b !== void 0 ? _b : "Select" }), jsxRuntime.exports.jsx(Chevron$2, { disabled: props.disabled, isOpen })] })), ReactDOM__default.default.createPortal(jsxRuntime.exports.jsx(DropdownList, Object.assign({}, menuProps, getFloatingProps(), { className: `${(_c = menuProps === null || menuProps === void 0 ? void 0 : menuProps.className) !== null && _c !== void 0 ? _c : ""} ${props.itemClass}`, isOpen, maxItems: props.maxItems, style: Object.assign(Object.assign({}, floatingStyles), { zIndex: 9999 }), children: props.items.map((item, index2) => {
-      const _a2 = getItemProps({ index: index2, item }), { itemClassName } = _a2, itemProps = __rest$2(_a2, ["itemClassName"]);
-      return React.createElement(ListItem, Object.assign({}, itemProps, { className: `${itemClassName} ${props.itemClass}`, hovered: index2 === highlightedIndex, key: `item-${index2}`, size: props.size, title: item.label }), item.label);
-    }) })), document.body)] }) });
+    const dropdownStyle = React__namespace.useMemo(() => Object.assign(Object.assign({}, floatingStyles), { marginLeft: -1 }), [floatingStyles]);
+    return jsxRuntime.exports.jsx(Tooltip, { content: props.errorMsg, disabled: !props.errorMsg, styling: "error", children: jsxRuntime.exports.jsxs(Wrapper$4, { className: props.className, isDisabled: props.disabled, isErrored: !!props.errorMsg, isOpen, onClick: props.onClick, style: props.style, children: [jsxRuntime.exports.jsxs(SelectButton, Object.assign({ disabled: props.disabled, isOpen }, toggleButtonProps, getReferenceProps(), { type: "button", children: [jsxRuntime.exports.jsx(SelectedItem, { size: props.size, children: (_b = (_a = selectedItem === null ? props.placeholder : selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.label) !== null && _a !== void 0 ? _a : props.placeholder) !== null && _b !== void 0 ? _b : "Select" }), jsxRuntime.exports.jsx(Chevron$2, { disabled: props.disabled, isOpen })] })), ReactDOM__default.default.createPortal(jsxRuntime.exports.jsx(DropdownList$1, { items: props.items, getItemProps, getFloatingProps, style: dropdownStyle, isOpen, getMenuProps, size: props.size, ref: refs.setFloating, className: `${(_c = menuProps === null || menuProps === void 0 ? void 0 : menuProps.className) !== null && _c !== void 0 ? _c : ""} ${props.itemClass}`, itemClass: props.itemClass, maxItems: props.maxItems, selectedItem, kbdHighlightIdx }), document.body)] }) });
   }
   const StyledSelect$1 = styled__default.default(Select)`
     margin: 1px solid ${(props) => props.theme.colors.background};
@@ -45830,22 +45736,29 @@ var __privateWrapper = (obj, member, setter, getter) => ({
         display: none;
     }
 `;
+  var __rest$2 = globalThis && globalThis.__rest || function(s, e3) {
+    var t2 = {};
+    for (var p2 in s)
+      if (Object.prototype.hasOwnProperty.call(s, p2) && e3.indexOf(p2) < 0)
+        t2[p2] = s[p2];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+      for (var i2 = 0, p2 = Object.getOwnPropertySymbols(s); i2 < p2.length; i2++) {
+        if (e3.indexOf(p2[i2]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p2[i2]))
+          t2[p2[i2]] = s[p2[i2]];
+      }
+    return t2;
+  };
   const { stateChangeTypes } = useCombobox;
-  const ListWrapper = styled__default.default(List)`
-    margin-left: -1px;
-    border-radius: 0 0 0.25rem 0.25rem;
-    box-shadow: ${(props) => props.theme.shadow.light};
-`;
-  const getTextColor = (heading, selected, theme2) => {
+  const getTextColor = (heading, isSelected, theme2) => {
     if (heading) {
       return theme2.colors.text;
     }
-    if (selected) {
+    if (isSelected) {
       return theme2.colors.primary;
     }
     return theme2.colors.text;
   };
-  const ListItemSpan = styled__default.default(ListItem)`
+  const ListItemSpan = styled__default.default(StyledListItem)`
     cursor: ${(props) => (props === null || props === void 0 ? void 0 : props.heading) ? "text" : "pointer"};
     user-select: ${(props) => (props === null || props === void 0 ? void 0 : props.heading) ? "text" : "none"};
 
@@ -45857,7 +45770,7 @@ var __privateWrapper = (obj, member, setter, getter) => ({
     padding-right: 0.7rem;
 
     font-weight: ${(props) => (props === null || props === void 0 ? void 0 : props.heading) ? "bold" : "normal"};
-    color: ${(props) => getTextColor(props === null || props === void 0 ? void 0 : props.heading, props.selected, props.theme)};
+    color: ${(props) => getTextColor(props === null || props === void 0 ? void 0 : props.heading, props.isSelected, props.theme)};
 
     ${(props) => {
     if (props.heading) {
@@ -45883,14 +45796,22 @@ var __privateWrapper = (obj, member, setter, getter) => ({
       return [...acc, item];
     }, []);
   }
+  const SectionedListItem = ({ item, index: index2, getItemProps, isSelected, isHighlighted }) => {
+    const theme2 = useClTheme();
+    const _a = getItemProps({ index: index2, item }), itemProps = __rest$2(_a, ["itemClassName"]);
+    if (item.heading) {
+      delete itemProps.onClick;
+    }
+    return jsxRuntime.exports.jsxs(ListItemSpan, Object.assign({}, itemProps, { heading: item.heading, section: item.section, isSelected, title: item.label, item, index: index2, isHighlighted, children: [item.label || item.section, item.badge && jsxRuntime.exports.jsx(Badge, { color: item.badge.color || theme2.colors.primary, children: item.badge.label })] }));
+  };
   function SectionedList(props) {
     var _a, _b, _c;
-    const theme2 = useClTheme();
     const unpackedItems = React.useMemo(() => unpackSectionedList(props.items), [props.items]);
     const [pendingHighlight, setPendingHighlight] = React.useState(null);
     const [items, setItems] = React.useState(unpackedItems);
     const [inputValue, setInputValue] = React.useState((_b = (_a = props.selectedItem) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : "");
-    const { selectedItem, isOpen, getMenuProps, getInputProps, getToggleButtonProps, highlightedIndex, getItemProps, setHighlightedIndex } = useCombobox(Object.assign({ initialIsOpen: false, initialSelectedItem: (_c = props.initialValue) !== null && _c !== void 0 ? _c : props.selectedItem, itemToString: (item) => item ? item.label : "", items, onInputValueChange: (change) => {
+    const [kbdHighlightIdx, setKbdHighlightIdx] = React__default.default.useState();
+    const { selectedItem, isOpen, getMenuProps, getInputProps, getToggleButtonProps, getItemProps, setHighlightedIndex } = useCombobox(Object.assign(Object.assign(Object.assign({ initialIsOpen: false, initialSelectedItem: (_c = props.initialValue) !== null && _c !== void 0 ? _c : props.selectedItem, itemToString: (item) => item ? item.label : "", items, onInputValueChange: (change) => {
       setInputValue(change.inputValue);
       if (!change.inputValue) {
         setItems(unpackedItems);
@@ -45923,7 +45844,7 @@ var __privateWrapper = (obj, member, setter, getter) => ({
           props.onSelect(changes.selectedItem);
         }
       }
-    }, stateReducer: (state, { changes, type }) => {
+    } }, syncKbdHighlightIdx(setKbdHighlightIdx)), { stateReducer: (state, { changes, type }) => {
       var _a2, _b2, _c2;
       if (type === stateChangeTypes.ControlledPropUpdatedSelectedItem) {
         return Object.assign(Object.assign({}, changes), { inputValue: "" });
@@ -45948,7 +45869,7 @@ var __privateWrapper = (obj, member, setter, getter) => ({
         return Object.assign(Object.assign({}, changes), { highlightedIndex: changes.highlightedIndex + 1 === items.length ? 0 : changes.highlightedIndex + 1 });
       }
       return changes;
-    } }, "selectedItem" in props && { selectedItem: props.selectedItem }));
+    } }), "selectedItem" in props && { selectedItem: props.selectedItem }));
     React.useEffect(() => {
       if (isOpen && pendingHighlight !== null) {
         setHighlightedIndex(pendingHighlight);
@@ -45968,25 +45889,9 @@ var __privateWrapper = (obj, member, setter, getter) => ({
     });
     const role = useRole(context2, { role: "listbox" });
     const { getReferenceProps, getFloatingProps } = useInteractions([role]);
-    const menuProps = getMenuProps();
-    const setMenuRef = menuProps.ref;
-    const setFloatingRef = refs.setFloating;
-    const mergedRefs = React.useCallback((node) => {
-      setFloatingRef(node);
-      setMenuRef(node);
-    }, [setFloatingRef, setMenuRef]);
-    return jsxRuntime.exports.jsxs(Wrapper$6, { className: props.className, isDisabled: props.disabled, isErrored: false, isOpen, style: props.style, children: [jsxRuntime.exports.jsxs(InputWrapper$2, { disabled: props.disabled, isOpen, ref: refs.setReference, children: [jsxRuntime.exports.jsx(Input, Object.assign({}, getInputProps({ value: inputValue }), getReferenceProps())), jsxRuntime.exports.jsx(ChevronButton, Object.assign({}, getToggleButtonProps(), { children: jsxRuntime.exports.jsx(Chevron$2, { disabled: props.disabled, isOpen }) }))] }), ReactDOM__default.default.createPortal(jsxRuntime.exports.jsxs(ListWrapper, Object.assign({}, menuProps, getFloatingProps(), { ref: mergedRefs, isOpen, style: Object.assign(Object.assign({}, floatingStyles), { zIndex: 9999 }), children: [items.length > 0 && items.map((item, index2) => {
-      const itemProps = getItemProps({ index: index2, item });
-      if (item.heading) {
-        delete itemProps.onClick;
-      }
-      return React.createElement(
-        ListItemSpan,
-        Object.assign({}, itemProps, { heading: item.heading, hovered: index2 === highlightedIndex, key: `item-${index2}`, section: item.section, selected: item.value === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value), title: item.label }),
-        item.label || item.section,
-        item.badge && jsxRuntime.exports.jsx(Badge, { color: item.badge.color || theme2.colors.primary, children: item.badge.label })
-      );
-    }), items.length === 0 && jsxRuntime.exports.jsx(NoItemsLabel, { children: "No Items" })] })), document.body)] });
+    const dropdownStyle = React__default.default.useMemo(() => Object.assign(Object.assign({}, floatingStyles), { marginLeft: -1 }), [floatingStyles]);
+    const renderListItem = React.useCallback((item, index2) => jsxRuntime.exports.jsx(SectionedListItem, { item, index: index2, getItemProps, isSelected: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) === item.value, isHighlighted: isOpen && kbdHighlightIdx !== void 0 && kbdHighlightIdx === index2 }, `item-${index2}-${isOpen && (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.label) === item.label}`), [getItemProps, selectedItem, isOpen, kbdHighlightIdx]);
+    return jsxRuntime.exports.jsxs(Wrapper$6, { className: props.className, isDisabled: props.disabled, isErrored: false, isOpen, style: props.style, children: [jsxRuntime.exports.jsxs(InputWrapper$2, { disabled: props.disabled, isOpen, ref: refs.setReference, children: [jsxRuntime.exports.jsx(Input, Object.assign({}, getInputProps({ value: inputValue }), getReferenceProps())), jsxRuntime.exports.jsx(ChevronButton$1, { disabled: props.disabled, isOpen, getToggleButtonProps })] }), ReactDOM__default.default.createPortal(jsxRuntime.exports.jsx(DropdownList$1, { items, getItemProps, getFloatingProps, style: dropdownStyle, isOpen, getMenuProps, ref: refs.setFloating, kbdHighlightIdx, children: renderListItem }), document.body)] });
   }
   var toNumber = toNumber_1;
   var INFINITY$2 = 1 / 0, MAX_INTEGER = 17976931348623157e292;
@@ -50180,31 +50085,6 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
     var nextStyle = nextProps.style, nextRest = _objectWithoutPropertiesLoose$6(nextProps, _excluded2);
     return !shallowDiffers(prevStyle, nextStyle) && !shallowDiffers(prevRest, nextRest);
   }
-  const GlobalStyle = styled.createGlobalStyle`
-    body {
-        /* stylelint-disable-next-line -- external classname */
-        .DatetimeFilterSelect {
-            background-color: ${(props) => props.theme.colors.grey1};
-
-            span {
-                background-color: ${(props) => props.theme.colors.grey1};
-                border-bottom: 1px solid ${(props) => props.theme.colors.grey1};
-
-                &[aria-selected="true"] {
-                    background-color: ${(props) => props.theme.colors.primary};
-                }
-
-                :hover {
-                    background-color: ${(props) => props.theme.colors.grey3};
-                }
-
-                :active {
-                    background-color: ${(props) => props.theme.colors.grey4};
-                }
-            }
-        }
-    }
-`;
   const DatetimeFilterWrapper = styled__default.default(FilterWrapper)`
     gap: 0;
 `;
@@ -50330,7 +50210,7 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
       }
       return false;
     }, [props.disabled, previousFilter, filteredValues, dateValues, selected]);
-    return jsxRuntime.exports.jsxs(DatetimeFilterWrapper, { className: props.className, children: [jsxRuntime.exports.jsx(GlobalStyle, {}), jsxRuntime.exports.jsxs(FilterHeader, { children: [jsxRuntime.exports.jsx(StyledSelect, { dropdownRef: (element) => {
+    return jsxRuntime.exports.jsxs(DatetimeFilterWrapper, { className: props.className, children: [jsxRuntime.exports.jsxs(FilterHeader, { children: [jsxRuntime.exports.jsx(StyledSelect, { dropdownRef: (element) => {
       if (props.portalsRef) {
         props.portalsRef.current[2] = element;
       }
@@ -51276,6 +51156,237 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
     text-overflow: ellipsis;
     white-space: nowrap;
 `;
+  var extendStatics = function(d2, b2) {
+    extendStatics = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function(d3, b3) {
+      d3.__proto__ = b3;
+    } || function(d3, b3) {
+      for (var p2 in b3)
+        if (Object.prototype.hasOwnProperty.call(b3, p2))
+          d3[p2] = b3[p2];
+    };
+    return extendStatics(d2, b2);
+  };
+  function __extends(d2, b2) {
+    if (typeof b2 !== "function" && b2 !== null)
+      throw new TypeError("Class extends value " + String(b2) + " is not a constructor or null");
+    extendStatics(d2, b2);
+    function __() {
+      this.constructor = d2;
+    }
+    d2.prototype = b2 === null ? Object.create(b2) : (__.prototype = b2.prototype, new __());
+  }
+  function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) {
+      return value instanceof P ? value : new P(function(resolve) {
+        resolve(value);
+      });
+    }
+    return new (P || (P = Promise))(function(resolve, reject) {
+      function fulfilled(value) {
+        try {
+          step(generator.next(value));
+        } catch (e3) {
+          reject(e3);
+        }
+      }
+      function rejected(value) {
+        try {
+          step(generator["throw"](value));
+        } catch (e3) {
+          reject(e3);
+        }
+      }
+      function step(result) {
+        result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+      }
+      step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+  }
+  function __generator(thisArg, body) {
+    var _ = { label: 0, sent: function() {
+      if (t2[0] & 1)
+        throw t2[1];
+      return t2[1];
+    }, trys: [], ops: [] }, f2, y2, t2, g2;
+    return g2 = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g2[Symbol.iterator] = function() {
+      return this;
+    }), g2;
+    function verb(n2) {
+      return function(v2) {
+        return step([n2, v2]);
+      };
+    }
+    function step(op) {
+      if (f2)
+        throw new TypeError("Generator is already executing.");
+      while (g2 && (g2 = 0, op[0] && (_ = 0)), _)
+        try {
+          if (f2 = 1, y2 && (t2 = op[0] & 2 ? y2["return"] : op[0] ? y2["throw"] || ((t2 = y2["return"]) && t2.call(y2), 0) : y2.next) && !(t2 = t2.call(y2, op[1])).done)
+            return t2;
+          if (y2 = 0, t2)
+            op = [op[0] & 2, t2.value];
+          switch (op[0]) {
+            case 0:
+            case 1:
+              t2 = op;
+              break;
+            case 4:
+              _.label++;
+              return { value: op[1], done: false };
+            case 5:
+              _.label++;
+              y2 = op[1];
+              op = [0];
+              continue;
+            case 7:
+              op = _.ops.pop();
+              _.trys.pop();
+              continue;
+            default:
+              if (!(t2 = _.trys, t2 = t2.length > 0 && t2[t2.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                _ = 0;
+                continue;
+              }
+              if (op[0] === 3 && (!t2 || op[1] > t2[0] && op[1] < t2[3])) {
+                _.label = op[1];
+                break;
+              }
+              if (op[0] === 6 && _.label < t2[1]) {
+                _.label = t2[1];
+                t2 = op;
+                break;
+              }
+              if (t2 && _.label < t2[2]) {
+                _.label = t2[2];
+                _.ops.push(op);
+                break;
+              }
+              if (t2[2])
+                _.ops.pop();
+              _.trys.pop();
+              continue;
+          }
+          op = body.call(thisArg, _);
+        } catch (e3) {
+          op = [6, e3];
+          y2 = 0;
+        } finally {
+          f2 = t2 = 0;
+        }
+      if (op[0] & 5)
+        throw op[1];
+      return { value: op[0] ? op[1] : void 0, done: true };
+    }
+  }
+  function __values(o2) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m2 = s && o2[s], i2 = 0;
+    if (m2)
+      return m2.call(o2);
+    if (o2 && typeof o2.length === "number")
+      return {
+        next: function() {
+          if (o2 && i2 >= o2.length)
+            o2 = void 0;
+          return { value: o2 && o2[i2++], done: !o2 };
+        }
+      };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+  }
+  function __read(o2, n2) {
+    var m2 = typeof Symbol === "function" && o2[Symbol.iterator];
+    if (!m2)
+      return o2;
+    var i2 = m2.call(o2), r2, ar = [], e3;
+    try {
+      while ((n2 === void 0 || n2-- > 0) && !(r2 = i2.next()).done)
+        ar.push(r2.value);
+    } catch (error) {
+      e3 = { error };
+    } finally {
+      try {
+        if (r2 && !r2.done && (m2 = i2["return"]))
+          m2.call(i2);
+      } finally {
+        if (e3)
+          throw e3.error;
+      }
+    }
+    return ar;
+  }
+  function __spreadArray(to, from2, pack) {
+    if (pack || arguments.length === 2)
+      for (var i2 = 0, l2 = from2.length, ar; i2 < l2; i2++) {
+        if (ar || !(i2 in from2)) {
+          if (!ar)
+            ar = Array.prototype.slice.call(from2, 0, i2);
+          ar[i2] = from2[i2];
+        }
+      }
+    return to.concat(ar || Array.prototype.slice.call(from2));
+  }
+  function __await(v2) {
+    return this instanceof __await ? (this.v = v2, this) : new __await(v2);
+  }
+  function __asyncGenerator(thisArg, _arguments, generator) {
+    if (!Symbol.asyncIterator)
+      throw new TypeError("Symbol.asyncIterator is not defined.");
+    var g2 = generator.apply(thisArg, _arguments || []), i2, q2 = [];
+    return i2 = {}, verb("next"), verb("throw"), verb("return"), i2[Symbol.asyncIterator] = function() {
+      return this;
+    }, i2;
+    function verb(n2) {
+      if (g2[n2])
+        i2[n2] = function(v2) {
+          return new Promise(function(a2, b2) {
+            q2.push([n2, v2, a2, b2]) > 1 || resume(n2, v2);
+          });
+        };
+    }
+    function resume(n2, v2) {
+      try {
+        step(g2[n2](v2));
+      } catch (e3) {
+        settle(q2[0][3], e3);
+      }
+    }
+    function step(r2) {
+      r2.value instanceof __await ? Promise.resolve(r2.value.v).then(fulfill, reject) : settle(q2[0][2], r2);
+    }
+    function fulfill(value) {
+      resume("next", value);
+    }
+    function reject(value) {
+      resume("throw", value);
+    }
+    function settle(f2, v2) {
+      if (f2(v2), q2.shift(), q2.length)
+        resume(q2[0][0], q2[0][1]);
+    }
+  }
+  function __asyncValues(o2) {
+    if (!Symbol.asyncIterator)
+      throw new TypeError("Symbol.asyncIterator is not defined.");
+    var m2 = o2[Symbol.asyncIterator], i2;
+    return m2 ? m2.call(o2) : (o2 = typeof __values === "function" ? __values(o2) : o2[Symbol.iterator](), i2 = {}, verb("next"), verb("throw"), verb("return"), i2[Symbol.asyncIterator] = function() {
+      return this;
+    }, i2);
+    function verb(n2) {
+      i2[n2] = o2[n2] && function(v2) {
+        return new Promise(function(resolve, reject) {
+          v2 = o2[n2](v2), settle(resolve, reject, v2.done, v2.value);
+        });
+      };
+    }
+    function settle(resolve, reject, d2, v2) {
+      Promise.resolve(v2).then(function(v3) {
+        resolve({ value: v3, done: d2 });
+      }, reject);
+    }
+  }
+  typeof SuppressedError === "function" ? SuppressedError : function(error, suppressed, message) {
+    var e3 = new Error(message);
+    return e3.name = "SuppressedError", e3.error = error, e3.suppressed = suppressed, e3;
+  };
   function isFunction(value) {
     return typeof value === "function";
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@darajs/core",
-  "version": "1.9.4",
+  "version": "1.9.5",
   "description": "Dara Framework core",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -37,9 +37,9 @@
     "@babel/preset-env": "^7.23.0",
     "@babel/preset-react": "^7.22.15",
     "@babel/preset-typescript": "^7.23.0",
-    "@darajs/eslint-config": "~1.9.4",
-    "@darajs/prettier-config": "~1.9.4",
-    "@darajs/stylelint-config": "~1.9.4",
+    "@darajs/eslint-config": "~1.9.6",
+    "@darajs/prettier-config": "~1.9.6",
+    "@darajs/stylelint-config": "~1.9.6",
     "@rollup/plugin-inject": "^4.0.4",
     "@testing-library/dom": "^9.3.0",
     "@testing-library/jest-dom": "^5.16.5",
@@ -79,10 +79,10 @@
     "whatwg-fetch": "^3.6.2"
   },
   "dependencies": {
-    "@darajs/styled-components": "~1.9.5",
-    "@darajs/ui-components": "~1.9.5",
-    "@darajs/ui-notifications": "~1.9.5",
-    "@darajs/ui-utils": "~1.9.5",
+    "@darajs/styled-components": "~1.9.6",
+    "@darajs/ui-components": "~1.9.6",
+    "@darajs/ui-notifications": "~1.9.6",
+    "@darajs/ui-utils": "~1.9.6",
     "@fortawesome/fontawesome-free": "~6.4.0",
     "@recoiljs/refine": "^0.1.1",
     "@tanstack/query-core": "^4.0.0",
@@ -118,5 +118,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "93bfab036ab085ffb04bdede295927c1b58bea2b"
+  "gitHead": "3087b94fd77c2da3f985242eee14a8bff14074dd"
 }