react-animated-select 0.3.1 → 0.3.6

package/dist/index.es.js

@@ -1,149 +1,149 @@
-import _e, { createContext as De, useRef as re, useState as te, useEffect as z, useCallback as R, useMemo as ne, useId as Se, memo as Fe, forwardRef as Ye, useImperativeHandle as Ve, isValidElement as He, cloneElement as We, useContext as ze } from "react";
-import { CSSTransition as Re } from "react-transition-group";
-import './index.css';var ae = { exports: {} }, ie = {};
-var Ee;
-function Ue() {
-  if (Ee) return ie;
-  Ee = 1;
-  var t = /* @__PURE__ */ Symbol.for("react.transitional.element"), s = /* @__PURE__ */ Symbol.for("react.fragment");
-  function c(i, b, d) {
+import Fe, { createContext as He, memo as Ye, useRef as ce, useState as ae, useEffect as B, useCallback as T, useMemo as se, useId as Re, forwardRef as Qe, useImperativeHandle as Be, isValidElement as er, cloneElement as rr, useContext as we } from "react";
+import { CSSTransition as ke } from "react-transition-group";
+import './index.css';var ye = { exports: {} }, be = {};
+var Oe;
+function tr() {
+  if (Oe) return be;
+  Oe = 1;
+  var t = /* @__PURE__ */ Symbol.for("react.transitional.element"), n = /* @__PURE__ */ Symbol.for("react.fragment");
+  function o(s, f, c) {
     var p = null;
-    if (d !== void 0 && (p = "" + d), b.key !== void 0 && (p = "" + b.key), "key" in b) {
-      d = {};
-      for (var $ in b)
-        $ !== "key" && (d[$] = b[$]);
-    } else d = b;
-    return b = d.ref, {
+    if (c !== void 0 && (p = "" + c), f.key !== void 0 && (p = "" + f.key), "key" in f) {
+      c = {};
+      for (var v in f)
+        v !== "key" && (c[v] = f[v]);
+    } else c = f;
+    return f = c.ref, {
       $$typeof: t,
-      type: i,
+      type: s,
       key: p,
-      ref: b !== void 0 ? b : null,
-      props: d
+      ref: f !== void 0 ? f : null,
+      props: c
     };
   }
-  return ie.Fragment = s, ie.jsx = c, ie.jsxs = c, ie;
+  return be.Fragment = n, be.jsx = o, be.jsxs = o, be;
 }
-var le = {};
-var me;
-function Je() {
-  return me || (me = 1, process.env.NODE_ENV !== "production" && (function() {
+var me = {};
+var Ce;
+function nr() {
+  return Ce || (Ce = 1, process.env.NODE_ENV !== "production" && (function() {
     function t(e) {
       if (e == null) return null;
       if (typeof e == "function")
-        return e.$$typeof === m ? null : e.displayName || e.name || null;
+        return e.$$typeof === M ? null : e.displayName || e.name || null;
       if (typeof e == "string") return e;
       switch (e) {
-        case w:
+        case S:
           return "Fragment";
-        case C:
+        case D:
           return "Profiler";
-        case P:
+        case H:
           return "StrictMode";
-        case X:
+        case J:
           return "Suspense";
-        case I:
+        case U:
           return "SuspenseList";
-        case g:
+        case E:
           return "Activity";
       }
       if (typeof e == "object")
         switch (typeof e.tag == "number" && console.error(
           "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
         ), e.$$typeof) {
-          case _:
+          case F:
             return "Portal";
-          case u:
+          case d:
             return e.displayName || "Context";
-          case V:
+          case W:
             return (e._context.displayName || "Context") + ".Consumer";
-          case D:
-            var n = e.render;
-            return e = e.displayName, e || (e = n.displayName || n.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
-          case J:
-            return n = e.displayName || null, n !== null ? n : t(e.type) || "Memo";
-          case Y:
-            n = e._payload, e = e._init;
+          case I:
+            var r = e.render;
+            return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case z:
+            return r = e.displayName || null, r !== null ? r : t(e.type) || "Memo";
+          case g:
+            r = e._payload, e = e._init;
             try {
-              return t(e(n));
+              return t(e(r));
             } catch {
             }
         }
       return null;
     }
-    function s(e) {
+    function n(e) {
       return "" + e;
     }
-    function c(e) {
+    function o(e) {
       try {
-        s(e);
-        var n = !1;
+        n(e);
+        var r = !1;
       } catch {
-        n = !0;
+        r = !0;
       }
-      if (n) {
-        n = console;
-        var r = n.error, a = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
-        return r.call(
-          n,
+      if (r) {
+        r = console;
+        var l = r.error, a = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return l.call(
+          r,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
           a
-        ), s(e);
+        ), n(e);
       }
     }
-    function i(e) {
-      if (e === w) return "<>";
-      if (typeof e == "object" && e !== null && e.$$typeof === Y)
+    function s(e) {
+      if (e === S) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === g)
         return "<...>";
       try {
-        var n = t(e);
-        return n ? "<" + n + ">" : "<...>";
+        var r = t(e);
+        return r ? "<" + r + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
-    function b() {
-      var e = L.A;
+    function f() {
+      var e = O.A;
       return e === null ? null : e.getOwner();
     }
-    function d() {
+    function c() {
       return Error("react-stack-top-frame");
     }
     function p(e) {
-      if (x.call(e, "key")) {
-        var n = Object.getOwnPropertyDescriptor(e, "key").get;
-        if (n && n.isReactWarning) return !1;
+      if (Y.call(e, "key")) {
+        var r = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (r && r.isReactWarning) return !1;
       }
       return e.key !== void 0;
     }
-    function $(e, n) {
-      function r() {
-        K || (K = !0, console.error(
+    function v(e, r) {
+      function l() {
+        q || (q = !0, console.error(
           "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
-          n
+          r
         ));
       }
-      r.isReactWarning = !0, Object.defineProperty(e, "key", {
-        get: r,
+      l.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: l,
         configurable: !0
       });
     }
-    function y() {
+    function h() {
       var e = t(this.type);
-      return Q[e] || (Q[e] = !0, console.error(
+      return C[e] || (C[e] = !0, console.error(
         "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
       )), e = this.props.ref, e !== void 0 ? e : null;
     }
-    function N(e, n, r, a, E, j) {
-      var f = r.ref;
+    function x(e, r, l, a, j, _) {
+      var m = l.ref;
       return e = {
-        $$typeof: S,
+        $$typeof: R,
         type: e,
-        key: n,
-        props: r,
+        key: r,
+        props: l,
         _owner: a
-      }, (f !== void 0 ? f : null) !== null ? Object.defineProperty(e, "ref", {
+      }, (m !== void 0 ? m : null) !== null ? Object.defineProperty(e, "ref", {
         enumerable: !1,
-        get: y
+        get: h
       }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
         configurable: !1,
         enumerable: !1,
@@ -158,33 +158,33 @@ function Je() {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: E
+        value: j
       }), Object.defineProperty(e, "_debugTask", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: j
+        value: _
       }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
     }
-    function G(e, n, r, a, E, j) {
-      var f = n.children;
-      if (f !== void 0)
+    function P(e, r, l, a, j, _) {
+      var m = r.children;
+      if (m !== void 0)
         if (a)
-          if (q(f)) {
-            for (a = 0; a < f.length; a++)
-              U(f[a]);
-            Object.freeze && Object.freeze(f);
+          if (L(m)) {
+            for (a = 0; a < m.length; a++)
+              N(m[a]);
+            Object.freeze && Object.freeze(m);
           } else
             console.error(
               "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
             );
-        else U(f);
-      if (x.call(n, "key")) {
-        f = t(e);
-        var T = Object.keys(n).filter(function(H) {
-          return H !== "key";
+        else N(m);
+      if (Y.call(r, "key")) {
+        m = t(e);
+        var A = Object.keys(r).filter(function(b) {
+          return b !== "key";
         });
-        a = 0 < T.length ? "{key: someKey, " + T.join(": ..., ") + ": ...}" : "{key: someKey}", k[f + a] || (T = 0 < T.length ? "{" + T.join(": ..., ") + ": ...}" : "{}", console.error(
+        a = 0 < A.length ? "{key: someKey, " + A.join(": ..., ") + ": ...}" : "{key: someKey}", K[m + a] || (A = 0 < A.length ? "{" + A.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
@@ -192,75 +192,75 @@ React keys must be passed directly to JSX without using spread:
   let props = %s;
   <%s key={someKey} {...props} />`,
           a,
-          f,
-          T,
-          f
-        ), k[f + a] = !0);
+          m,
+          A,
+          m
+        ), K[m + a] = !0);
       }
-      if (f = null, r !== void 0 && (c(r), f = "" + r), p(n) && (c(n.key), f = "" + n.key), "key" in n) {
-        r = {};
-        for (var O in n)
-          O !== "key" && (r[O] = n[O]);
-      } else r = n;
-      return f && $(
-        r,
+      if (m = null, l !== void 0 && (o(l), m = "" + l), p(r) && (o(r.key), m = "" + r.key), "key" in r) {
+        l = {};
+        for (var i in r)
+          i !== "key" && (l[i] = r[i]);
+      } else l = r;
+      return m && v(
+        l,
         typeof e == "function" ? e.displayName || e.name || "Unknown" : e
-      ), N(
+      ), x(
         e,
-        f,
-        r,
-        b(),
-        E,
-        j
+        m,
+        l,
+        f(),
+        j,
+        _
       );
     }
-    function U(e) {
-      F(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === Y && (e._payload.status === "fulfilled" ? F(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    function N(e) {
+      $(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === g && (e._payload.status === "fulfilled" ? $(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
     }
-    function F(e) {
-      return typeof e == "object" && e !== null && e.$$typeof === S;
+    function $(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === R;
     }
-    var A = _e, S = /* @__PURE__ */ Symbol.for("react.transitional.element"), _ = /* @__PURE__ */ Symbol.for("react.portal"), w = /* @__PURE__ */ Symbol.for("react.fragment"), P = /* @__PURE__ */ Symbol.for("react.strict_mode"), C = /* @__PURE__ */ Symbol.for("react.profiler"), V = /* @__PURE__ */ Symbol.for("react.consumer"), u = /* @__PURE__ */ Symbol.for("react.context"), D = /* @__PURE__ */ Symbol.for("react.forward_ref"), X = /* @__PURE__ */ Symbol.for("react.suspense"), I = /* @__PURE__ */ Symbol.for("react.suspense_list"), J = /* @__PURE__ */ Symbol.for("react.memo"), Y = /* @__PURE__ */ Symbol.for("react.lazy"), g = /* @__PURE__ */ Symbol.for("react.activity"), m = /* @__PURE__ */ Symbol.for("react.client.reference"), L = A.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, x = Object.prototype.hasOwnProperty, q = Array.isArray, M = console.createTask ? console.createTask : function() {
+    var w = Fe, R = /* @__PURE__ */ Symbol.for("react.transitional.element"), F = /* @__PURE__ */ Symbol.for("react.portal"), S = /* @__PURE__ */ Symbol.for("react.fragment"), H = /* @__PURE__ */ Symbol.for("react.strict_mode"), D = /* @__PURE__ */ Symbol.for("react.profiler"), W = /* @__PURE__ */ Symbol.for("react.consumer"), d = /* @__PURE__ */ Symbol.for("react.context"), I = /* @__PURE__ */ Symbol.for("react.forward_ref"), J = /* @__PURE__ */ Symbol.for("react.suspense"), U = /* @__PURE__ */ Symbol.for("react.suspense_list"), z = /* @__PURE__ */ Symbol.for("react.memo"), g = /* @__PURE__ */ Symbol.for("react.lazy"), E = /* @__PURE__ */ Symbol.for("react.activity"), M = /* @__PURE__ */ Symbol.for("react.client.reference"), O = w.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, Y = Object.prototype.hasOwnProperty, L = Array.isArray, ee = console.createTask ? console.createTask : function() {
       return null;
     };
-    A = {
+    w = {
       react_stack_bottom_frame: function(e) {
         return e();
       }
     };
-    var K, Q = {}, l = A.react_stack_bottom_frame.bind(
-      A,
-      d
-    )(), v = M(i(d)), k = {};
-    le.Fragment = w, le.jsx = function(e, n, r) {
-      var a = 1e4 > L.recentlyCreatedOwnerStacks++;
-      return G(
+    var q, C = {}, re = w.react_stack_bottom_frame.bind(
+      w,
+      c
+    )(), oe = ee(s(c)), K = {};
+    me.Fragment = S, me.jsx = function(e, r, l) {
+      var a = 1e4 > O.recentlyCreatedOwnerStacks++;
+      return P(
         e,
-        n,
         r,
+        l,
         !1,
-        a ? Error("react-stack-top-frame") : l,
-        a ? M(i(e)) : v
+        a ? Error("react-stack-top-frame") : re,
+        a ? ee(s(e)) : oe
       );
-    }, le.jsxs = function(e, n, r) {
-      var a = 1e4 > L.recentlyCreatedOwnerStacks++;
-      return G(
+    }, me.jsxs = function(e, r, l) {
+      var a = 1e4 > O.recentlyCreatedOwnerStacks++;
+      return P(
         e,
-        n,
         r,
+        l,
         !0,
-        a ? Error("react-stack-top-frame") : l,
-        a ? M(i(e)) : v
+        a ? Error("react-stack-top-frame") : re,
+        a ? ee(s(e)) : oe
       );
     };
-  })()), le;
+  })()), me;
 }
-var je;
-function qe() {
-  return je || (je = 1, process.env.NODE_ENV === "production" ? ae.exports = Ue() : ae.exports = Je()), ae.exports;
+var Pe;
+function sr() {
+  return Pe || (Pe = 1, process.env.NODE_ENV === "production" ? ye.exports = tr() : ye.exports = nr()), ye.exports;
 }
-var h = qe();
-const Me = ({ className: t = "", ...s }) => /* @__PURE__ */ h.jsx(
+var u = sr();
+const ir = ({ className: t = "", ...n }) => /* @__PURE__ */ u.jsx(
   "svg",
   {
     className: t,
@@ -271,10 +271,10 @@ const Me = ({ className: t = "", ...s }) => /* @__PURE__ */ h.jsx(
     width: "1em",
     height: "1em",
     fill: "currentColor",
-    ...s,
-    children: /* @__PURE__ */ h.jsx("path", { d: "M310.6 361.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L160 301.3 54.6 406.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L114.7 256 9.4 150.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 210.7 265.4 105.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3L205.3 256l105.3 105.4z" })
+    ...n,
+    children: /* @__PURE__ */ u.jsx("path", { d: "M310.6 361.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L160 301.3 54.6 406.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L114.7 256 9.4 150.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 210.7 265.4 105.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3L205.3 256l105.3 105.4z" })
   }
-), Ge = ({ className: t = "", ...s }) => /* @__PURE__ */ h.jsx(
+), or = ({ className: t = "", ...n }) => /* @__PURE__ */ u.jsx(
   "svg",
   {
     className: t,
@@ -283,714 +283,856 @@ const Me = ({ className: t = "", ...s }) => /* @__PURE__ */ h.jsx(
     width: "1em",
     height: "1em",
     fill: "currentColor",
-    ...s,
-    children: /* @__PURE__ */ h.jsx("path", { d: "M34.9 289.5l175.9-175.8c9.4-9.4 24.6-9.4 33.9 0L420.1 289.5c15.1 15.1 4.4 41-17 41H51.9c-21.4 0-32.1-25.9-17-41z" })
+    ...n,
+    children: /* @__PURE__ */ u.jsx("path", { d: "M34.9 289.5l175.9-175.8c9.4-9.4 24.6-9.4 33.9 0L420.1 289.5c15.1 15.1 4.4 41-17 41H51.9c-21.4 0-32.1-25.9-17-41z" })
   }
-), $e = De(null), ce = (t, s = "invalid-option", c = "") => {
-  const i = c ? c.replace(/:/g, "") : "";
+), _e = (t, n = "invalid-option", o = "") => {
+  const s = o ? o.replace(/:/g, "") : "";
   if (typeof t != "string" || !t.trim())
-    return i ? `${s}-${i}` : `${s}-${Math.random().toString(36).slice(2, 8)}`;
-  const b = t.normalize("NFKD").replace(/[\u0300-\u036f]/g, "").replace(/\s+/g, "-").replace(/[^\p{L}\p{N}-]+/gu, "").toLowerCase();
-  return b ? b || `${s}-${Math.random().toString(36).slice(2, 8)}` : i ? `${s}-${i}` : `${s}-${Math.random().toString(36).slice(2, 8)}`;
-};
-function Xe({
+    return s ? `${n}-${s}` : `${n}-${Math.random().toString(36).slice(2, 8)}`;
+  const f = t.normalize("NFKD").replace(/[\u0300-\u036f]/g, "").replace(/\s+/g, "-").replace(/[^\p{L}\p{N}-]+/gu, "").toLowerCase();
+  return f ? f || `${n}-${Math.random().toString(36).slice(2, 8)}` : s ? `${n}-${s}` : `${n}-${Math.random().toString(36).slice(2, 8)}`;
+}, Te = He(null);
+function lr({
+  visibility: t,
+  children: n,
+  selectRef: o,
+  onAnimationDone: s,
+  unmount: f = !0,
+  duration: c,
+  easing: p,
+  offset: v,
+  animateOpacity: h
+}) {
+  const x = ce(null), [P, N] = ae(0);
+  B(() => {
+    if (!o?.current) return;
+    N(o.current.offsetHeight);
+    const I = new ResizeObserver((J) => {
+      for (let U of J) N(U.target.offsetHeight);
+    });
+    return I.observe(o.current), () => I.disconnect();
+  }, [o]);
+  const $ = `height ${c}ms ${p}${h ? `, opacity ${c}ms ${p}` : ""}`, w = {
+    position: "absolute",
+    top: `calc(100% + ${v}px)`,
+    left: "0",
+    width: "100%",
+    overflow: "hidden",
+    marginTop: "2px",
+    zIndex: "1",
+    height: t ? "auto" : "0px",
+    opacity: h ? t ? 1 : 0 : 1,
+    pointerEvents: t ? "all" : "none",
+    visibility: P ? "visible" : "hidden"
+  }, R = T(() => {
+    const d = x.current;
+    d && (d.style.height = "0px", h && (d.style.opacity = "0"), d.style.transition = "");
+  }, [h]), F = T(() => {
+    const d = x.current;
+    d && (d.style.transition = $, d.style.height = `${d.scrollHeight}px`, h && (d.style.opacity = "1"));
+  }, [$, h]), S = T(() => {
+    const d = x.current;
+    d && (d.style.height = "auto", d.style.transition = "", s && s());
+  }, [s]), H = T(() => {
+    const d = x.current;
+    d && (d.style.height = `${d.scrollHeight}px`, h && (d.style.opacity = "1"), d.offsetHeight, d.style.transition = $);
+  }, [$, h]), D = T(() => {
+    const d = x.current;
+    d && (d.style.height = "0px", h && (d.style.opacity = "0"));
+  }, [h]), W = T(() => {
+    const d = x.current;
+    d && (d.style.transition = "");
+  }, []);
+  return /* @__PURE__ */ u.jsx(
+    ke,
+    {
+      in: t,
+      timeout: c,
+      classNames: "rac-options",
+      unmountOnExit: f,
+      nodeRef: x,
+      onEnter: R,
+      onEntering: F,
+      onEntered: S,
+      onExit: H,
+      onExiting: D,
+      onExited: W,
+      children: /* @__PURE__ */ u.jsx(
+        "div",
+        {
+          ref: x,
+          className: "rac-options",
+          style: w,
+          children: n
+        }
+      )
+    }
+  );
+}
+const ar = Ye(lr, (t, n) => t.visibility === n.visibility && t.duration === n.duration && t.easing === n.easing && t.offset === n.offset && t.animateOpacity === n.animateOpacity && t.selectRef === n.selectRef && t.children === n.children);
+function Ee({
+  visibility: t,
+  children: n,
+  duration: o = 300,
+  unmount: s,
+  style: f
+}) {
+  const c = ce(null);
+  return /* @__PURE__ */ u.jsx(
+    ke,
+    {
+      in: t,
+      timeout: o,
+      classNames: "rac-slide-left",
+      unmountOnExit: !0,
+      nodeRef: c,
+      onEnter: () => c.current.style.width = "0px",
+      onEntering: () => c.current.style.width = c.current.scrollWidth + "px",
+      onEntered: () => c.current.style.width = "auto",
+      onExit: () => c.current.style.width = c.current.scrollWidth + "px",
+      onExiting: () => c.current.style.width = "0px",
+      onExited: () => s?.(),
+      children: /* @__PURE__ */ u.jsx(
+        "div",
+        {
+          ref: c,
+          style: {
+            ...f,
+            overflow: "hidden",
+            transition: `width ${o}ms ease`
+          },
+          children: n
+        }
+      )
+    }
+  );
+}
+const cr = Ye(({
+  selectRef: t,
+  selectId: n,
+  renderOptions: o,
+  selected: s,
+  title: f,
+  visibility: c,
+  active: p,
+  hasOptions: v,
+  hasActualValue: h,
+  disabled: x,
+  loading: P,
+  error: N,
+  registerOption: $,
+  unregisterOption: w,
+  handleBlur: R,
+  handleFocus: F,
+  handleToggle: S,
+  handleKeyDown: H,
+  handleListScroll: D,
+  setAnimationFinished: W,
+  clear: d,
+  children: I,
+  renderedDropdown: J,
+  placeholder: U,
+  className: z,
+  style: g,
+  duration: E,
+  easing: M,
+  offset: O,
+  animateOpacity: Y,
+  unmount: L,
+  ArrowIcon: ee,
+  ClearIcon: q,
+  renderIcon: C,
+  hasMore: re,
+  loadButton: oe
+}) => /* @__PURE__ */ u.jsxs(
+  Te.Provider,
+  {
+    value: { registerOption: $, unregisterOption: w },
+    children: [
+      I,
+      J,
+      /* @__PURE__ */ u.jsxs(
+        "div",
+        {
+          ref: t,
+          style: { "--rac-duration": `${E}ms`, ...g },
+          className: `rac-select
+                    ${z}
+                    ${!v || x ? "rac-disabled-style" : ""}
+                    ${P ? "rac-loading-style" : ""}
+                    ${N ? "rac-error-style" : ""}`,
+          tabIndex: p ? 0 : -1,
+          role: "combobox",
+          "aria-haspopup": "listbox",
+          "aria-expanded": c,
+          "aria-controls": `${n}-listbox`,
+          "aria-label": U,
+          "aria-disabled": x || !v,
+          ...p && {
+            onBlur: R,
+            onFocus: F,
+            onClick: S,
+            onKeyDown: H
+          },
+          children: [
+            /* @__PURE__ */ u.jsxs("div", { className: `rac-select-title ${!N && !P && s?.type === "boolean" ? s.raw ? "rac-true-option" : "rac-false-option" : ""}`, children: [
+              /* @__PURE__ */ u.jsx("span", { className: "rac-title-text", children: f }, f),
+              /* @__PURE__ */ u.jsx(Ee, { visibility: P && !N, duration: E, children: /* @__PURE__ */ u.jsxs("span", { className: "rac-loading-dots", children: [
+                /* @__PURE__ */ u.jsx("i", {}),
+                /* @__PURE__ */ u.jsx("i", {}),
+                /* @__PURE__ */ u.jsx("i", {})
+              ] }) })
+            ] }),
+            /* @__PURE__ */ u.jsxs("div", { className: "rac-select-buttons", children: [
+              /* @__PURE__ */ u.jsx(
+                Ee,
+                {
+                  visibility: h && v && !x && !P && !N,
+                  duration: E,
+                  style: { display: "grid" },
+                  children: C(q, {
+                    className: "rac-select-cancel",
+                    onMouseDown: (K) => {
+                      K.preventDefault(), K.stopPropagation();
+                    },
+                    onClick: d
+                  })
+                }
+              ),
+              /* @__PURE__ */ u.jsx(
+                Ee,
+                {
+                  visibility: p,
+                  duration: E,
+                  style: { display: "grid" },
+                  children: /* @__PURE__ */ u.jsx(
+                    "span",
+                    {
+                      className: `rac-select-arrow-wrapper ${c ? "--open" : ""}`,
+                      children: C(ee, {
+                        className: "rac-select-arrow-wrapper"
+                      })
+                    }
+                  )
+                }
+              )
+            ] }),
+            /* @__PURE__ */ u.jsx(
+              ar,
+              {
+                visibility: c,
+                selectRef: t,
+                onAnimationDone: () => W(!0),
+                unmount: L,
+                duration: E,
+                easing: M,
+                offset: O,
+                animateOpacity: Y,
+                children: /* @__PURE__ */ u.jsxs(
+                  "div",
+                  {
+                    onScroll: D,
+                    tabIndex: "-1",
+                    className: "rac-select-list",
+                    role: "listbox",
+                    "aria-label": "Options",
+                    children: [
+                      o,
+                      !oe && re && /* @__PURE__ */ u.jsxs(
+                        "div",
+                        {
+                          className: "rac-select-option rac-disabled-option rac-loading-option",
+                          onClick: (K) => K.stopPropagation(),
+                          children: [
+                            /* @__PURE__ */ u.jsx("span", { className: "rac-loading-option-title", children: "Loading" }),
+                            /* @__PURE__ */ u.jsxs("span", { className: "rac-loading-dots", children: [
+                              /* @__PURE__ */ u.jsx("i", {}),
+                              /* @__PURE__ */ u.jsx("i", {}),
+                              /* @__PURE__ */ u.jsx("i", {})
+                            ] })
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    ]
+  }
+));
+function ur({
   disabled: t,
-  isOpen: s,
-  setIsOpen: c,
-  options: i,
-  selectOption: b,
-  selected: d,
+  open: n,
+  setOpen: o,
+  options: s = [],
+  selectOption: f,
+  selected: c,
   hasMore: p,
-  loadMore: $,
-  loadButton: y,
-  loadButtonText: N,
-  setLoadingTitle: G,
-  loadOffset: U,
-  loadAhead: F
+  loadMore: v,
+  loadButton: h,
+  loadButtonText: x,
+  setLoadingTitle: P,
+  loadOffset: N,
+  loadAhead: $
 }) {
-  const A = re(!1), S = re(0), [_, w] = te(-1), P = re(!1), C = re(i?.length || 0);
-  z(() => {
-    i && i.length !== C.current && (P.current = !1, C.current = i.length, y && G(N));
-  }, [i]);
-  const V = R(() => {
-    !p || P.current || (P.current = !0, $());
-  }, [p, $]), u = R((g) => {
-    if (y || !p || P.current) return;
-    const { scrollTop: m, scrollHeight: L, clientHeight: x } = g.currentTarget, q = U;
-    L - m <= x + q && V();
-  }, [y, p, V]);
-  z(() => {
-    if (!y && s && p && _ >= 0) {
-      const g = F;
-      _ >= i.length - g && V();
-    }
-  }, [y, _, s, p, i.length, V]), z(() => {
+  const w = ce(!1), R = ce(0), F = ce(!1), [S, H] = ae(-1);
+  B(() => {
+    F.current = !1, h && P(x);
+  }, [s.length, p, h, x, P]);
+  const D = T(() => {
+    !p || F.current || (F.current = !0, v());
+  }, [p, v]), W = T((g) => {
+    if (h || !p || F.current) return;
+    const { scrollTop: E, scrollHeight: M, clientHeight: O } = g.currentTarget;
+    M - E <= O + N && D();
+  }, [h, p, N, D]);
+  B(() => {
+    !h && n && p && S >= s.length - $ && D();
+  }, [S, n, p, s.length, $, h, D]), B(() => {
     const g = () => {
-      S.current = Date.now();
+      R.current = Date.now();
     };
     return window.addEventListener("focus", g), () => window.removeEventListener("focus", g);
-  }, []), z(() => {
-    if (s) {
-      if (_ >= 0 && _ < i.length)
-        return;
-      let g = -1;
-      if (d) {
-        const m = i.findIndex((L) => L.id === d.id && !L.disabled);
-        m >= 0 && (g = m);
-      }
-      g === -1 && (g = i.findIndex((m) => !m.disabled)), w(g);
-    } else
-      w(-1);
-  }, [s, i]);
-  const D = R((g) => {
-    g.currentTarget.contains(g.relatedTarget) || c(!1);
-  }, [c]), X = R(() => {
-    t || document.hidden || Date.now() - S.current < 100 || s || (c(!0), A.current = !0, setTimeout(() => {
-      A.current = !1;
+  }, []), B(() => {
+    if (!n) {
+      H(-1);
+      return;
+    }
+    if (S >= 0 && S < s.length) return;
+    let g = -1;
+    c && (g = s.findIndex((E) => E.id === c.id && !E.disabled)), g === -1 && (g = s.findIndex((E) => !E.disabled)), H(g);
+  }, [n, s, c]);
+  const d = T((g, E) => {
+    const M = (L) => L && !L.disabled && !L.loading, O = s.length;
+    if (O === 0) return -1;
+    let Y = g;
+    for (let L = 0; L < O; L++) {
+      if (Y = (Y + E + O) % O, !h && p && (E > 0 && Y === 0 || E < 0 && Y === O - 1))
+        return g;
+      if (M(s[Y])) return Y;
+    }
+    return g;
+  }, [s, p, h]), I = T((g) => {
+    g.currentTarget.contains(g.relatedTarget) || o(!1);
+  }, [o]), J = T(() => {
+    t || document.hidden || Date.now() - R.current < 100 || n || (o(!0), w.current = !0, setTimeout(() => {
+      w.current = !1;
     }, 200));
-  }, [t, s, c]), I = R((g) => {
-    t || g.target.closest && g.target.closest(".rac-select-cancel") || A.current || c(!s);
-  }, [t, s, c]), J = (g, m) => {
-    const L = (M) => M && !M.disabled && !M.loading;
-    if (!i.some(L)) return -1;
-    let x = g, q = 0;
-    do {
-      if (x += m, x >= i.length) {
-        if (p && !y) return g;
-        x = 0;
-      }
-      if (x < 0) {
-        if (p && !y) return g;
-        x = i.length - 1;
-      }
-      q++;
-    } while (!L(i[x]) && q <= i.length);
-    return x;
-  }, Y = R((g) => {
+  }, [t, n, o]), U = T((g) => {
+    t || g.target.closest(".rac-select-cancel") || w.current || o(!n);
+  }, [t, n, o]), z = T((g) => {
     if (!t)
       switch (g.key) {
         case "Enter":
         case " ":
-          g.preventDefault(), s ? _ !== -1 && i[_] && b(i[_], g) : c(!0);
+          g.preventDefault(), n ? S !== -1 && s[S] && f(s[S], g) : o(!0);
           break;
         case "Escape":
-          g.preventDefault(), c(!1);
+          g.preventDefault(), o(!1);
           break;
         case "ArrowDown":
-          g.preventDefault(), s ? w((m) => J(m, 1)) : c(!0);
+          g.preventDefault(), n ? H((E) => d(E, 1)) : o(!0);
           break;
         case "ArrowUp":
-          g.preventDefault(), s ? w((m) => J(m, -1)) : c(!0);
+          g.preventDefault(), n ? H((E) => d(E, -1)) : o(!0);
           break;
         case "Tab":
-          s && c(!1);
+          n && o(!1);
           break;
       }
-  }, [t, s, c, _, i, b]);
-  return ne(() => ({
-    handleBlur: D,
-    handleFocus: X,
-    handleToggle: I,
-    handleKeyDown: Y,
-    highlightedIndex: _,
-    setHighlightedIndex: w,
-    handleListScroll: u
-  }), [D, X, I, Y, _, w]);
+  }, [t, n, o, S, s, f, d]);
+  return se(() => ({
+    handleBlur: I,
+    handleFocus: J,
+    handleToggle: U,
+    handleKeyDown: z,
+    highlightedIndex: S,
+    setHighlightedIndex: H,
+    handleListScroll: W
+  }), [I, J, U, z, S, W]);
 }
-function Ke({
+const dr = ["group", "disabled", "options", "items", "children"], De = ["name", "label", "id", "value"];
+function fr({
   options: t = [],
-  jsxOptions: s = [],
-  value: c,
-  defaultValue: i = void 0,
-  onChange: b,
-  disabled: d = !1,
+  jsxOptions: n = [],
+  value: o,
+  defaultValue: s = void 0,
+  onChange: f,
+  disabled: c = !1,
   loading: p = !1,
-  error: $ = !1,
-  placeholder: y = "Choose option",
-  emptyText: N = "No options",
-  disabledText: G = "Disabled",
-  loadingText: U = "Loading",
-  errorText: F = "Failed to load",
-  disabledOption: A = "Disabled option",
-  emptyOption: S = "Empty option",
-  invalidOption: _ = "Invalid option",
-  setVisibility: w,
-  hasMore: P,
-  loadButton: C,
-  setLoadingTitle: V,
-  loadingTitle: u,
-  loadMoreText: D,
-  loadMore: X,
-  childrenFirst: I
+  error: v = !1,
+  placeholder: h = "Choose option",
+  emptyText: x = "No options",
+  disabledText: P = "Disabled",
+  loadingText: N = "Loading",
+  errorText: $ = "Failed to load",
+  disabledOption: w = "Disabled option",
+  emptyOption: R = "Empty option",
+  invalidOption: F = "Invalid option",
+  setVisibility: S,
+  hasMore: H,
+  loadButton: D,
+  setLoadingTitle: W,
+  loadingTitle: d,
+  loadMoreText: I,
+  loadMore: J,
+  childrenFirst: U
 }) {
-  const J = Se(), Y = c !== void 0, [g, m] = te(null), L = (l) => !l || typeof l != "object" || Array.isArray(l) ? !1 : "id" in l || "value" in l || "name" in l || "label" in l || "disabled" in l, x = ne(() => {
-    const l = [], v = (r, a, E) => {
-      let j = E?.id ?? E?.value ?? a ?? r;
-      if (typeof a == "function") {
-        l.push({
-          key: `invalid-${l.length}`,
-          value: a,
-          userId: null,
-          disabled: !0,
-          invalid: !0,
-          label: _,
-          original: E
-        });
-        return;
-      }
-      if (a === "") {
-        l.push({
-          key: `empty-str-${l.length}`,
-          value: "",
-          userId: null,
-          disabled: !0,
-          label: S,
-          original: E
-        });
+  const z = Re(), g = o !== void 0, [E, M] = ae(null), O = T((r, l = !1) => {
+    const a = De.find((_) => r[_] !== void 0 && r[_] !== null && r[_] !== "");
+    if (a) return String(r[a]);
+    const j = Object.entries(r).find(
+      ([_, m]) => !dr.includes(_) && m != null && m !== ""
+    );
+    return j ? String(j[1]) : l;
+  }, []), Y = T((r, l, a = "normal", j = null, _ = !1) => {
+    let m = "", A = r, i = _, b = null, V = j;
+    return r == null || r === "" ? {
+      id: `${z}-${a}-${l}`,
+      userId: null,
+      name: R,
+      raw: null,
+      disabled: !0,
+      type: "normal",
+      group: V
+    } : typeof r == "function" ? {
+      id: `${z}-inv-${l}`,
+      userId: null,
+      name: F,
+      raw: r,
+      disabled: !0,
+      invalid: !0,
+      type: "normal",
+      group: V
+    } : (typeof r == "object" && !Array.isArray(r) ? (V || (V = r.group || null), i = i || !!r.disabled, b = r.id ?? r.value ?? r.name ?? r.label, A = r.value !== void 0 ? r.value : r.id !== void 0 ? r.id : r, m = O(r, i ? w : R), m === R && !i && (i = !0)) : (m = String(r), b = r, A = r), {
+      id: `${z}-${a}-${l}`,
+      userId: b,
+      name: m,
+      raw: A,
+      original: r,
+      disabled: i,
+      type: typeof A == "boolean" ? "boolean" : "normal",
+      group: V
+    });
+  }, [z, R, F, w, O]), [L, ee] = ae(/* @__PURE__ */ new Set()), q = T((r) => {
+    ee((l) => {
+      const a = new Set(l);
+      return a.has(r) ? a.delete(r) : a.add(r), a;
+    });
+  }, []), C = se(() => {
+    const r = [], l = (i, b, V = null, Z = !1) => {
+      if (i && typeof i == "object" && !Array.isArray(i) && "options" in i) {
+        const te = O(i, "Empty group", !0), le = Z || !!i.disabled, Q = i.options;
+        Array.isArray(Q) ? Q.forEach((ge, de) => l(ge, `${b}-${de}`, te, le)) : Q && typeof Q == "object" ? Object.entries(Q).forEach(([ge, de], xe) => l(de, `${b}-${xe}`, te, le)) : l(Q, `${b}-0`, te, le);
         return;
       }
-      if (a == null) {
-        l.push({
-          key: `empty-${l.length}`,
-          value: null,
-          userId: null,
-          disabled: !0,
-          label: S,
-          original: E
+      if (i && typeof i == "object" && !Array.isArray(i) && !De.some((te) => te in i) && !("group" in i)) {
+        Object.entries(i).forEach(([te, le], Q) => {
+          r.push(Y(le, `${b}-${Q}`, "normal", V, Z));
         });
         return;
       }
-      if (typeof a == "number" || typeof a == "boolean") {
-        l.push({
-          key: `${typeof a}-${a}-${l.length}`,
-          value: a,
-          userId: j,
-          label: String(a),
-          original: E
-        });
-        return;
-      } else
-        l.push({
-          key: r ?? `opt-${l.length}`,
-          value: a,
-          userId: j,
-          label: String(a ?? r),
-          original: E
-        });
+      r.push(Y(i, b, "normal", V, Z));
     };
-    Array.isArray(t) ? t.forEach((r, a) => {
-      if (r && typeof r == "object" && Object.keys(r).length === 1 && r.disabled === !0)
-        l.push({ key: `dis-${a}`, value: null, userId: null, disabled: !0, label: A, original: r });
-      else if (L(r)) {
-        const E = r.id ?? (typeof r.value != "object" ? r.value : r.label ?? r.name ?? r.value);
-        let j = r.name || r.label || r.id || r.value;
-        if (j == null || j === "") {
-          const O = Object.entries(r).find(
-            ([H, B]) => H !== "disabled" && B !== null && B !== void 0 && B !== ""
-          );
-          O && (j = O[1]);
-        }
-        const f = j == null || j === "", T = f ? S : String(j);
-        l.push({
-          key: r.id ?? r.value ?? r.name ?? `opt-${a}`,
-          value: r.value !== void 0 ? r.value : r.id !== void 0 ? r.id : r,
-          userId: E,
-          disabled: f || !!r.disabled,
-          label: T,
-          original: r
-        });
-      } else r && typeof r == "object" && !Array.isArray(r) ? Object.entries(r).forEach(([E, j]) => v(E, j, j)) : v(r, r, r);
-    }) : typeof t == "object" && t !== null && Object.entries(t).forEach(([r, a]) => v(r, a, a));
-    const k = l.map((r, a) => ({
-      id: `${J}-opt-${a}`,
-      userId: r.userId,
-      name: String(r.label),
-      raw: r.value,
-      original: r.original,
-      disabled: r.disabled,
-      invalid: r.invalid,
-      type: typeof r.value == "boolean" ? "boolean" : "normal"
-    })), e = s.map((r, a) => {
-      const E = r.value === null || r.value === void 0, j = r.label === null || r.label === void 0 || r.label === "", f = E && j;
+    Array.isArray(t) && t.forEach((i, b) => l(i, b));
+    const a = n.map((i) => {
+      if (i.isGroupMarker) return { ...i, type: "group-marker" };
+      const b = (i.value == null || i.value === "") && !i.label;
       return {
-        ...r,
-        id: `jsx-${J.replace(/:/g, "")}-${r.id}-${a}`,
-        userId: r.id,
-        raw: r.value,
-        original: r.value,
-        name: f ? S : r.label,
-        disabled: r.disabled || f,
-        type: typeof r.value == "boolean" ? "boolean" : "normal"
+        ...i,
+        id: `jsx-${i.id}`,
+        userId: i.id,
+        raw: i.value,
+        original: i.value,
+        name: b ? R : i.label,
+        disabled: !!i.disabled || b,
+        type: typeof i.value == "boolean" ? "boolean" : "normal",
+        group: i.group || null
       };
-    }), n = I ? [...e, ...k] : [...k, ...e];
-    if (P && C) {
-      const r = u === D;
-      n.push({
-        id: "special-load-more-id",
-        name: u,
-        loadMore: !0,
-        loading: r,
-        type: "special"
-      });
-    }
-    return n;
-  }, [t, s, J, S, A, P, C, u, D]), q = R((l) => {
-    if (l == null) return null;
-    const v = x.find((k) => k.original === l || k.raw === l);
-    if (v) return v.id;
-    if (typeof l == "object")
+    }), j = U ? [...a, ...r] : [...r, ...a], _ = [], m = /* @__PURE__ */ new Map(), A = [];
+    return j.forEach((i) => {
+      if (!i.group)
+        A.push({ type: "item", data: i });
+      else if (m.has(i.group) || (m.set(i.group, []), A.push({ type: "group", name: i.group })), !i.isGroupMarker) {
+        const b = L.has(i.group);
+        m.get(i.group).push({ ...i, hidden: !b });
+      }
+    }), A.forEach((i, b) => {
+      if (i.type === "item")
+        _.push(i.data);
+      else {
+        const V = L.has(i.name);
+        _.push({
+          id: `group-header-${i.name}-${b}`,
+          name: i.name,
+          disabled: !1,
+          groupHeader: !0,
+          expanded: V,
+          type: "group"
+        });
+        const Z = m.get(i.name);
+        _.push(...Z);
+      }
+    }), H && D && _.push({
+      id: "special-load-more-id",
+      name: d,
+      loadMore: !0,
+      loading: d === I,
+      type: "special"
+    }), _;
+  }, [t, n, z, Y, U, H, D, d, I, x, R, O]), re = T((r) => {
+    if (r == null) return null;
+    const l = C.find((a) => a.original === r || a.raw === r || a.userId === r);
+    if (l) return l.id;
+    if (typeof r == "object")
       try {
-        const k = JSON.stringify(l), e = x.find(
-          (n) => n.original && typeof n.original == "object" && JSON.stringify(n.original) === k
-        );
-        if (e) return e.id;
+        const a = JSON.stringify(r);
+        return C.find(
+          (j) => j.original && typeof j.original == "object" && JSON.stringify(j.original) === a
+        )?.id ?? null;
       } catch {
+        return null;
       }
-    return x.find((k) => k.userId === l)?.id ?? null;
-  }, [x]);
-  z(() => {
-    const l = Y ? c : i, v = x.find((e) => e.id === g);
-    v && (v.original === l || v.raw === l || v.userId === l) || m(q(l));
-  }, [c, i, Y, x, q]);
-  const M = ne(() => x.find((l) => l.id === g) ?? null, [g, x]), K = R((l, v) => {
-    if (l.disabled || l.loadMore) {
-      v?.stopPropagation(), v?.preventDefault(), u !== D && (V(D), X());
+    return null;
+  }, [C]);
+  B(() => {
+    const r = g ? o : s, l = C.find((j) => j.id === E);
+    l && (l.original === r || l.raw === r || l.userId === r) || M(re(r));
+  }, [o, s, g, C, re, E]);
+  const oe = se(
+    () => C.find((r) => r.id === E) ?? null,
+    [E, C]
+  ), K = T((r, l) => {
+    if (r.groupHeader) {
+      l?.stopPropagation(), l?.preventDefault(), q(r.name);
       return;
     }
-    m(l.id), b?.(l.original, l.userId), w(!1);
-  }, [b, w]), Q = R(() => {
-    m(null), b?.(null, null);
-  }, [b]);
+    if (r.disabled || r.loadMore) {
+      l?.stopPropagation(), l?.preventDefault(), r.loadMore && (W(I), J());
+      return;
+    }
+    M(r.id), f?.(r.original, r.userId), S(!1);
+  }, [f, S, J, I, W]), e = T(() => {
+    M(null), f?.(null, null);
+  }, [f]);
   return {
-    normalizedOptions: x,
-    selected: M,
+    normalizedOptions: C,
+    selected: oe,
     selectOption: K,
-    clear: Q,
-    hasOptions: x.length > 0,
-    active: !$ && !p && !d && x.length > 0,
-    selectedValue: c ?? i,
-    placeholder: y,
-    emptyText: N,
-    disabledText: G,
-    loadingText: U,
-    errorText: F,
-    disabledOption: A,
-    emptyOption: S,
-    invalidOption: _,
-    disabled: d,
+    clear: e,
+    hasOptions: C.length > 0,
+    active: !v && !p && !c && C.length > 0,
+    selectedValue: o ?? s,
+    placeholder: h,
+    emptyText: x,
+    disabledText: P,
+    loadingText: N,
+    errorText: $,
+    disabledOption: w,
+    emptyOption: R,
+    invalidOption: F,
+    disabled: c,
     loading: p,
-    error: $
+    error: v,
+    expandedGroups: L,
+    toggleGroup: q,
+    visibleOptions: C.filter((r) => !r.hidden)
   };
 }
-function Ze({
-  visibility: t,
-  children: s,
-  selectRef: c,
-  onAnimationDone: i,
-  unmount: b = !0,
-  duration: d,
-  easing: p,
-  offset: $,
-  animateOpacity: y
-}) {
-  const N = re(null), [G, U] = te(0);
-  z(() => {
-    if (!c?.current) return;
-    U(c.current.offsetHeight);
-    const D = new ResizeObserver((X) => {
-      for (let I of X) U(I.target.offsetHeight);
-    });
-    return D.observe(c.current), () => D.disconnect();
-  }, [c]);
-  const F = `height ${d}ms ${p}${y ? `, opacity ${d}ms ${p}` : ""}`, A = {
-    position: "absolute",
-    top: `calc(100% + ${$}px)`,
-    left: "0",
-    width: "100%",
-    overflow: "hidden",
-    marginTop: "2px",
-    zIndex: "1",
-    height: t ? "auto" : "0px",
-    opacity: y ? t ? 1 : 0 : 1,
-    pointerEvents: t ? "all" : "none",
-    visibility: G ? "visible" : "hidden"
-  }, S = R(() => {
-    const u = N.current;
-    u && (u.style.height = "0px", y && (u.style.opacity = "0"), u.style.transition = "");
-  }, [y]), _ = R(() => {
-    const u = N.current;
-    u && (u.style.transition = F, u.style.height = `${u.scrollHeight}px`, y && (u.style.opacity = "1"));
-  }, [F, y]), w = R(() => {
-    const u = N.current;
-    u && (u.style.height = "auto", u.style.transition = "", i && i());
-  }, [i]), P = R(() => {
-    const u = N.current;
-    u && (u.style.height = `${u.scrollHeight}px`, y && (u.style.opacity = "1"), u.offsetHeight, u.style.transition = F);
-  }, [F, y]), C = R(() => {
-    const u = N.current;
-    u && (u.style.height = "0px", y && (u.style.opacity = "0"));
-  }, [y]), V = R(() => {
-    const u = N.current;
-    u && (u.style.transition = "");
-  }, []);
-  return /* @__PURE__ */ h.jsx(
-    Re,
-    {
-      in: t,
-      timeout: d,
-      classNames: "rac-options",
-      unmountOnExit: b,
-      nodeRef: N,
-      onEnter: S,
-      onEntering: _,
-      onEntered: w,
-      onExit: P,
-      onExiting: C,
-      onExited: V,
-      children: /* @__PURE__ */ h.jsx(
-        "div",
-        {
-          ref: N,
-          className: "rac-options",
-          style: A,
-          children: s
-        }
-      )
-    }
-  );
-}
-const Qe = Fe(Ze, (t, s) => t.visibility === s.visibility && t.duration === s.duration && t.easing === s.easing && t.offset === s.offset && t.animateOpacity === s.animateOpacity && t.selectRef === s.selectRef && t.children === s.children);
-function oe({
-  visibility: t,
-  children: s,
-  duration: c = 300,
-  unmount: i,
-  style: b
-}) {
-  const d = re(null);
-  return /* @__PURE__ */ h.jsx(
-    Re,
+function gr({ visibility: t, children: n, duration: o = 300 }) {
+  const s = ce(null);
+  return /* @__PURE__ */ u.jsx(
+    ke,
     {
       in: t,
-      timeout: c,
-      classNames: "rac-slide-left",
+      timeout: 300,
+      classNames: "slideDown",
       unmountOnExit: !0,
-      nodeRef: d,
-      onEnter: () => d.current.style.width = "0px",
-      onEntering: () => d.current.style.width = d.current.scrollWidth + "px",
-      onEntered: () => d.current.style.width = "auto",
-      onExit: () => d.current.style.width = d.current.scrollWidth + "px",
-      onExiting: () => d.current.style.width = "0px",
-      onExited: () => i?.(),
-      children: /* @__PURE__ */ h.jsx(
+      nodeRef: s,
+      onEnter: () => s.current.style.height = "0px",
+      onEntering: () => s.current.style.height = s.current.scrollHeight + "px",
+      onEntered: () => s.current.style.height = "auto",
+      onExit: () => s.current.style.height = s.current.scrollHeight + "px",
+      onExiting: () => s.current.style.height = "0px",
+      children: /* @__PURE__ */ u.jsx(
         "div",
         {
-          ref: d,
+          ref: s,
           style: {
-            ...b,
             overflow: "hidden",
-            transition: `width ${c}ms ease`
+            transition: `height ${o}ms ease`,
+            paddingLeft: "1em"
           },
-          children: s
+          className: "slideDown-enter-done",
+          tabIndex: -1,
+          children: n
         }
       )
     }
   );
 }
-const we = (t, s) => {
+const Le = (t, n) => {
   if (!t) return null;
-  if (typeof t == "string")
-    return /* @__PURE__ */ h.jsx("img", { src: t, ...s, alt: "" });
-  if (He(t))
-    return We(t, s);
+  if (typeof t == "string") return /* @__PURE__ */ u.jsx("img", { src: t, ...n, alt: "" });
+  if (er(t)) return rr(t, n);
   if (typeof t == "function" || typeof t == "object" && t.$$typeof) {
-    const c = t;
-    return /* @__PURE__ */ h.jsx(c, { ...s });
+    const o = t;
+    return /* @__PURE__ */ u.jsx(o, { ...n });
   }
   return null;
-}, rr = Ye(({
+}, pr = (t, n, o, s, f, c, p) => t.groupHeader ? "rac-select-option rac-group-option" : [
+  "rac-select-option",
+  t.className,
+  s === t.id && "rac-selected",
+  n === o && "rac-highlighted",
+  (t.disabled || t.loading) && "rac-disabled-option",
+  (t.invalid || t.name === p) && "rac-invalid-option",
+  t.loadMore && f === c && "rac-loading-option",
+  typeof t.raw == "boolean" && (t.raw ? "rac-true-option" : "rac-false-option")
+].filter(Boolean).join(" "), mr = Qe(({
   unmount: t,
-  children: s,
-  renderedDropdown: c,
-  visibility: i,
-  ownBehavior: b = !1,
-  alwaysOpen: d = !1,
+  children: n,
+  renderedDropdown: o,
+  visibility: s,
+  ownBehavior: f = !1,
+  alwaysOpen: c = !1,
   duration: p = 300,
-  easing: $ = "ease-out",
-  offset: y = 2,
-  animateOpacity: N = !0,
-  style: G = {},
-  className: U = "",
-  ArrowIcon: F = Ge,
-  ClearIcon: A = Me,
-  hasMore: S = !1,
-  loadMore: _ = () => {
+  easing: v = "ease-out",
+  offset: h = 2,
+  animateOpacity: x = !0,
+  style: P = {},
+  className: N = "",
+  ArrowIcon: $ = or,
+  ClearIcon: w = ir,
+  hasMore: R = !1,
+  loadMore: F = () => {
+    console.warn("loadMore not implemented");
   },
-  loadButton: w = !1,
-  loadButtonText: P = "Load more",
-  loadMoreText: C = "Loading",
-  loadOffset: V = 100,
-  loadAhead: u = 3,
-  childrenFirst: D = !1,
-  ...X
-}, I) => {
-  const [J, Y] = te(w ? P : C);
-  z(() => {
-    Y(w ? P : C);
-  }, [w, P, C]);
-  const g = Se(), m = ne(() => g.replace(/:/g, ""), [g]), [L, x] = te([]), q = R((o) => {
-    x((W) => [...W, o]);
-  }, []), M = R((o) => {
-    x((W) => W.filter((ee) => ee.id !== o));
-  }, []), K = re(null);
-  z(() => {
-    I && (typeof I == "function" ? I(K.current) : I.current = K.current);
-  }, [I]), Ve(I, () => K.current);
-  const [Q, l] = te(!1), v = ne(() => d ? !0 : b ? !!i : Q, [d, b, i, Q]), k = R((o) => {
-    d || b || l((W) => typeof o == "function" ? o(W) : o);
-  }, [d, b]), { normalizedOptions: e, selected: n, selectOption: r, clear: a, hasOptions: E, active: j, selectedValue: f, disabled: T, loading: O, error: H, placeholder: B, invalidOption: ke, emptyText: de, disabledText: fe, loadingText: ge, errorText: he } = Ke({ ...X, setVisibility: k, jsxOptions: L, hasMore: S, loadButton: w, loadingTitle: J, loadMore: _, loadMoreText: C, setLoadingTitle: Y, childrenFirst: D }), { handleListScroll: Te, handleBlur: Ne, handleFocus: Ae, handleToggle: Pe, handleKeyDown: Ce, highlightedIndex: se, setHighlightedIndex: Ie } = Xe({
-    setLoadingTitle: Y,
-    loadButton: w,
-    loadButtonText: P,
-    hasMore: S,
-    loadMore: _,
-    disabled: T,
-    isOpen: v,
-    setIsOpen: k,
-    options: e,
-    selectOption: r,
-    selected: n,
-    loadOffset: V,
-    loadAhead: u
-  }), [be, pe] = te(!1);
-  z(() => {
-    v || pe(!1);
-  }, [v]), z(() => {
-    (H || T || O || !E) && k(!1);
-  }, [H, T, O, E]), z(() => {
-    if (v && be && se !== -1) {
-      const o = e[se];
-      if (o) {
-        const W = `opt-${m}-${ce(o.id)}`, ee = document.getElementById(W);
-        ee && ee.scrollIntoView({ block: "nearest" });
+  loadButton: S = !1,
+  loadButtonText: H = "Load more",
+  loadMoreText: D = "Loading",
+  loadOffset: W = 100,
+  loadAhead: d = 3,
+  childrenFirst: I = !1,
+  ...J
+}, U) => {
+  const z = Re(), g = se(() => z.replace(/:/g, ""), [z]), [E, M] = ae([]), [O, Y] = ae(!1), [L, ee] = ae(S ? H : D), [q, C] = ae(!1), re = ce(null), oe = T((k) => {
+    M((G) => {
+      const X = G.findIndex((ne) => ne.id === k.id);
+      if (X !== -1) {
+        const ne = G[X];
+        if (ne.label === k.label && ne.value === k.value && ne.disabled === k.disabled && ne.group === k.group)
+          return G;
+        const pe = [...G];
+        return pe[X] = k, pe;
       }
+      return [...G, k];
+    });
+  }, []), K = T((k) => {
+    M((G) => {
+      const X = G.filter((ne) => ne.id !== k);
+      return X.length === G.length ? G : X;
+    });
+  }, []), e = c ? !0 : f ? !!s : O, r = T((k) => {
+    c || f || Y(k);
+  }, [c, f]), l = fr({
+    ...J,
+    setVisibility: r,
+    jsxOptions: E,
+    hasMore: R,
+    loadButton: S,
+    loadingTitle: L,
+    loadMore: F,
+    loadMoreText: D,
+    setLoadingTitle: ee,
+    childrenFirst: I
+  }), { normalizedOptions: a, selected: j, selectOption: _, clear: m, hasOptions: A, active: i, selectedValue: b, disabled: V, loading: Z, error: ue, placeholder: te, invalidOption: le, emptyText: Q, disabledText: ge, loadingText: de, errorText: xe, expandedGroups: ve } = l, Ge = ur({ setLoadingTitle: ee, loadButton: S, loadButtonText: H, hasMore: R, loadMore: F, disabled: V, open: e, setOpen: r, options: a, selectOption: _, selected: j, loadOffset: W, loadAhead: d }), { handleListScroll: Ie, handleBlur: ze, handleFocus: Me, handleToggle: We, handleKeyDown: Je, highlightedIndex: fe, setHighlightedIndex: je } = Ge;
+  Be(U, () => re.current), B(() => {
+    e || C(!1);
+  }, [e]), B(() => {
+    (ue || V || Z || !A) && r(!1);
+  }, [ue, V, Z, A, r]), B(() => {
+    if (e && q && fe !== -1) {
+      const k = a[fe];
+      k && document.getElementById(`opt-${g}-${_e(k.id)}`)?.scrollIntoView({ block: "nearest" });
     }
-  }, [se, v, be, e, m]);
-  const ye = f != null && !(Array.isArray(f) && f.length === 0) && !(typeof f == "object" && Object.keys(f).length === 0), xe = ne(() => {
-    if (H) return he;
-    if (O) return ge;
-    if (T) return fe;
-    if (n) return n.jsx ?? n.name;
-    if (ye) {
-      const o = e.find((W) => W.raw === f);
-      return o ? o.name : typeof f == "object" && f !== null ? f.name ?? f.label ?? "Selected Object" : String(f);
+  }, [fe, e, q, a, g]);
+  const Se = se(() => b != null && !(Array.isArray(b) && b.length === 0) && !(typeof b == "object" && Object.keys(b).length === 0), [b]), Ue = se(() => {
+    if (ue) return xe;
+    if (Z) return de;
+    if (V) return ge;
+    if (j) return j.jsx ?? j.name;
+    if (Se) {
+      const k = a.find((G) => G.raw === b);
+      return k ? k.name : typeof b == "object" && b !== null ? b.name ?? b.label ?? "Selected Object" : String(b);
     }
-    return E ? B : de;
-  }, [T, O, H, E, n, f, B, he, ge, fe, de]), Le = `${m}-listbox`, Oe = ne(() => e?.map((o, W) => {
-    const ee = `opt-${m}-${ce(o.id)}`;
-    let Z = "rac-select-option";
-    return o.className && (Z += ` ${o.className}`), n?.id === o.id && (Z += " rac-selected"), W === se && (Z += " rac-highlighted"), (o.disabled || o.loading) && (Z += " rac-disabled-option"), o.invalid && (Z += " rac-invalid-option"), o.loadMore && J == C && (Z += " rac-loading-option"), typeof o.raw == "boolean" && (Z += o.raw ? " rac-true-option" : " rac-false-option"), o.name == ke && (Z += " rac-invalid-option"), /* @__PURE__ */ h.jsxs(
+    return A ? te : Q;
+  }, [V, Z, ue, A, j, b, te, xe, de, ge, Q, Se, a]), Xe = se(() => {
+    const k = [];
+    let G = [], X = null;
+    const ne = a.reduce((y, ie) => (ie.group && (y[ie.group] = (y[ie.group] || 0) + 1), y), {}), pe = (y) => {
+      y === null || G.length === 0 || (k.push(
+        /* @__PURE__ */ u.jsx(
+          gr,
+          {
+            visibility: ve.has(y),
+            children: G
+          },
+          `slide-${y}`
+        )
+      ), G = []);
+    }, Ne = (y, ie) => /* @__PURE__ */ u.jsxs(
       "div",
       {
-        className: Z,
-        onClick: (ve) => {
-          if (o.loading) {
-            ve.stopPropagation();
-            return;
-          }
-          r(o, ve);
-        },
-        onMouseEnter: () => !o.disabled && !o.loading && Ie(W),
-        id: ee,
+        id: `opt-${g}-${_e(y.id)}`,
         role: "option",
-        "aria-selected": n?.id === o.id,
-        "aria-disabled": o.disabled || o.loading,
-        "data-loading": o.loading,
+        "aria-selected": j?.id === y.id,
+        "aria-disabled": y.disabled || y.loading,
+        className: pr(y, ie, fe, j?.id, L, D, le),
+        onClick: (he) => !y.loading && _(y, he),
+        onMouseEnter: () => !y.disabled && !y.loading && je(ie),
         children: [
-          o.jsx ?? o.name,
-          o.loading && /* @__PURE__ */ h.jsxs("span", { className: "rac-loading-dots", children: [
-            /* @__PURE__ */ h.jsx("i", {}),
-            /* @__PURE__ */ h.jsx("i", {}),
-            /* @__PURE__ */ h.jsx("i", {})
+          y.jsx ?? y.name,
+          y.loading && /* @__PURE__ */ u.jsxs("span", { className: "rac-loading-dots", children: [
+            /* @__PURE__ */ u.jsx("i", {}),
+            /* @__PURE__ */ u.jsx("i", {}),
+            /* @__PURE__ */ u.jsx("i", {})
           ] })
         ]
       },
-      o.id
+      y.id
     );
-  }), [e, r, m, n, se]);
-  return /* @__PURE__ */ h.jsxs(
-    $e.Provider,
-    {
-      value: { registerOption: q, unregisterOption: M },
-      children: [
-        s,
-        c,
-        /* @__PURE__ */ h.jsxs(
-          "div",
-          {
-            style: {
-              "--rac-duration": `${p}ms`,
-              ...G
-            },
-            className: `rac-select
-                    ${U}
-                    ${!E || T ? "rac-disabled-style" : ""}
-                    ${O ? "rac-loading-style" : ""}
-                    ${H ? "rac-error-style" : ""}`,
-            tabIndex: j ? 0 : -1,
-            ref: K,
-            role: "combobox",
-            "aria-haspopup": "listbox",
-            "aria-expanded": v,
-            "aria-controls": Le,
-            "aria-label": B,
-            "aria-disabled": T || !E,
-            ...j && {
-              onBlur: Ne,
-              onFocus: Ae,
-              onClick: Pe,
-              onKeyDown: Ce
+    return a.forEach((y, ie) => {
+      const he = y.groupHeader, Ae = !!y.group;
+      if ((he || !Ae && X !== null) && (pe(X), he || (X = null)), he) {
+        X = y.name;
+        const qe = ve.has(y.name), Ke = ne[y.name] > 0;
+        k.push(
+          /* @__PURE__ */ u.jsxs(
+            "div",
+            {
+              className: "rac-group-header",
+              onClick: (Ze) => _(y, Ze),
+              children: [
+                /* @__PURE__ */ u.jsx("span", { className: "rac-group-title-text", children: y.name }),
+                /* @__PURE__ */ u.jsx(
+                  Ee,
+                  {
+                    visibility: Ke,
+                    duration: p,
+                    style: { display: "grid" },
+                    children: /* @__PURE__ */ u.jsx("span", { className: `rac-group-arrow-wrapper ${qe ? "--open" : ""}`, children: Le($, { className: "rac-select-arrow-wrapper" }) })
+                  }
+                )
+              ]
             },
-            children: [
-              /* @__PURE__ */ h.jsxs(
-                "div",
-                {
-                  className: `rac-select-title ${!H && !O && n?.type == "boolean" ? n.raw ? "rac-true-option" : "rac-false-option" : ""}`,
-                  children: [
-                    /* @__PURE__ */ h.jsx(
-                      "span",
-                      {
-                        className: "rac-title-text",
-                        children: xe
-                      },
-                      xe
-                    ),
-                    /* @__PURE__ */ h.jsx(
-                      oe,
-                      {
-                        visibility: O && !H,
-                        duration: p,
-                        children: /* @__PURE__ */ h.jsxs("span", { className: "rac-loading-dots", children: [
-                          /* @__PURE__ */ h.jsx("i", {}),
-                          /* @__PURE__ */ h.jsx("i", {}),
-                          /* @__PURE__ */ h.jsx("i", {})
-                        ] })
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ h.jsxs(
-                "div",
-                {
-                  className: "rac-select-buttons",
-                  children: [
-                    /* @__PURE__ */ h.jsx(
-                      oe,
-                      {
-                        visibility: ye && E && !T && !O && !H,
-                        duration: p,
-                        style: { display: "grid" },
-                        children: we(A, {
-                          className: "rac-select-cancel",
-                          onMouseDown: (o) => {
-                            o.preventDefault(), o.stopPropagation();
-                          },
-                          onClick: a
-                        })
-                      }
-                    ),
-                    /* @__PURE__ */ h.jsx(
-                      oe,
-                      {
-                        visibility: j,
-                        duration: p,
-                        style: { display: "grid" },
-                        children: /* @__PURE__ */ h.jsx(
-                          "span",
-                          {
-                            className: `rac-select-arrow-wrapper ${v ? "--open" : ""}`,
-                            children: we(F, {
-                              className: "rac-select-arrow-wrapper"
-                            })
-                          }
-                        )
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ h.jsx(
-                Qe,
-                {
-                  visibility: v,
-                  selectRef: K,
-                  onAnimationDone: () => pe(!0),
-                  unmount: t,
-                  duration: p,
-                  easing: $,
-                  offset: y,
-                  animateOpacity: N,
-                  children: /* @__PURE__ */ h.jsxs(
-                    "div",
-                    {
-                      onScroll: Te,
-                      tabIndex: "-1",
-                      className: "rac-select-list",
-                      role: "listbox",
-                      "aria-label": "Options",
-                      children: [
-                        Oe,
-                        !w && S ? /* @__PURE__ */ h.jsxs(
-                          "div",
-                          {
-                            onClick: (o) => o.stopPropagation(),
-                            onMouseEnter: (o) => o.preventDefault(),
-                            className: "rac-select-option rac-disabled-option rac-loading-option",
-                            children: [
-                              /* @__PURE__ */ h.jsx(
-                                "span",
-                                {
-                                  className: "rac-loading-option-title",
-                                  children: "Loading"
-                                }
-                              ),
-                              /* @__PURE__ */ h.jsxs("span", { className: "rac-loading-dots", children: [
-                                /* @__PURE__ */ h.jsx("i", {}),
-                                /* @__PURE__ */ h.jsx("i", {}),
-                                /* @__PURE__ */ h.jsx("i", {})
-                              ] })
-                            ]
-                          }
-                        ) : null
-                      ]
-                    }
-                  )
-                }
-              )
-            ]
-          }
-        )
-      ]
+            y.id
+          )
+        );
+      } else Ae ? G.push(Ne(y, ie)) : k.push(Ne(y, ie));
+    }), pe(X), k;
+  }, [
+    a,
+    _,
+    g,
+    j,
+    fe,
+    L,
+    D,
+    le,
+    je,
+    ve,
+    $
+  ]);
+  return /* @__PURE__ */ u.jsx(
+    cr,
+    {
+      selectRef: re,
+      selectId: g,
+      renderIcon: Le,
+      normalizedOptions: a,
+      renderOptions: Xe,
+      selected: j,
+      title: Ue,
+      visibility: e,
+      active: i,
+      hasOptions: A,
+      hasActualValue: Se,
+      highlightedIndex: fe,
+      animationFinished: q,
+      disabled: V,
+      loading: Z,
+      error: ue,
+      setVisibility: r,
+      setHighlightedIndex: je,
+      setAnimationFinished: C,
+      handleBlur: ze,
+      handleFocus: Me,
+      handleToggle: We,
+      handleKeyDown: Je,
+      handleListScroll: Ie,
+      selectOption: _,
+      clear: m,
+      registerOption: oe,
+      unregisterOption: K,
+      children: n,
+      renderedDropdown: o,
+      placeholder: te,
+      className: N,
+      style: P,
+      duration: p,
+      easing: v,
+      offset: h,
+      animateOpacity: x,
+      unmount: t,
+      ArrowIcon: $,
+      ClearIcon: w,
+      hasMore: R,
+      loadButton: S
     }
   );
-}), ue = (t) => t ? typeof t == "string" || typeof t == "number" ? String(t) : Array.isArray(t) ? t.map(ue).join(" ").replace(/\s+/g, " ").trim() : _e.isValidElement(t) ? ue(t.props.children) : "" : "";
-function tr({ value: t, id: s, className: c, children: i, disabled: b }) {
-  const d = ze($e);
-  return z(() => {
-    if (!d) return;
-    const p = ue(i), $ = typeof i == "string" && i !== "" ? i : p || String(t ?? s ?? ""), y = {
-      id: String(s ?? ce(String(p))),
-      value: t !== void 0 ? t : p,
-      label: $,
-      jsx: i,
-      className: c,
-      disabled: !!b
+}), Ve = He(null);
+function xr({ children: t, name: n, label: o, value: s, id: f, emptyGroupText: c = "Empty group" }) {
+  const p = we(Te), v = se(() => {
+    const x = n ?? o ?? s ?? f;
+    return x != null && x !== "" ? String(x) : c;
+  }, [n, o, s, f, c]), h = se(() => `group-marker-${_e(v)}`, [v]);
+  return B(() => {
+    if (!p) return;
+    const x = {
+      id: h,
+      group: v,
+      isGroupMarker: !0,
+      disabled: !0
     };
-    return d.registerOption(y), () => d.unregisterOption(y.id);
-  }, [s, t, i, c, b]), null;
+    return p.registerOption(x), () => p.unregisterOption(h);
+  }, [p.registerOption, p.unregisterOption, h, v]), /* @__PURE__ */ u.jsx(Ve.Provider, { value: v, children: t });
+}
+const $e = (t) => t ? typeof t == "string" || typeof t == "number" ? String(t) : Array.isArray(t) ? t.map($e).join(" ").replace(/\s+/g, " ").trim() : Fe.isValidElement(t) ? $e(t.props.children) : "" : "";
+function yr({ value: t, id: n, className: o, children: s, disabled: f, group: c }) {
+  const p = we(Te), v = we(Ve), h = p?.registerOption, x = p?.unregisterOption, P = Re(), N = se(() => n ? String(n) : P.replace(/:/g, ""), [n, P]);
+  return B(() => {
+    if (!h) return;
+    const $ = $e(s);
+    let w = "";
+    return typeof s == "string" && s !== "" ? w = s : $ ? w = $ : t != null && (w = String(t)), h({
+      id: N,
+      value: t !== void 0 ? t : $,
+      label: w,
+      jsx: s,
+      className: o,
+      disabled: !!f,
+      group: c || v || null
+    }), () => x(N);
+  }, [N, t, s, o, f, c, v, h, x]), null;
 }
 export {
-  tr as Option,
-  rr as Select
+  xr as OptGroup,
+  yr as Option,
+  mr as Select
 };