react-emoji-toggle-button/build/index.mjs

A flexible and reusable React package to use an emoji picker and connect it with a text input using Ref. Toggle emoji button for React apps.

import Ue, { createElement as ce, PureComponent as Be, useEffect as W, useRef as J, useCallback as He, useMemo as ae, useState as M, createRef as Ve, useLayoutEffect as Ye } from "react";
var ne = { exports: {} }, re = {};
/**
 * @license React
 * react-jsx-runtime.production.js
 *
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
var ve;
function qe() {
  if (ve) return re;
  ve = 1;
  var t = Symbol.for("react.transitional.element"), e = Symbol.for("react.fragment");
  function r(i, s, u) {
    var c = null;
    if (u !== void 0 && (c = "" + u), s.key !== void 0 && (c = "" + s.key), "key" in s) {
      u = {};
      for (var d in s)
        d !== "key" && (u[d] = s[d]);
    } else u = s;
    return s = u.ref, {
      $$typeof: t,
      type: i,
      key: c,
      ref: s !== void 0 ? s : null,
      props: u
    };
  }
  return re.Fragment = e, re.jsx = r, re.jsxs = r, re;
}
var oe = {};
/**
 * @license React
 * react-jsx-runtime.development.js
 *
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
var Se;
function Ge() {
  return Se || (Se = 1, process.env.NODE_ENV !== "production" && function() {
    function t(n) {
      if (n == null) return null;
      if (typeof n == "function")
        return n.$$typeof === L ? null : n.displayName || n.name || null;
      if (typeof n == "string") return n;
      switch (n) {
        case o:
          return "Fragment";
        case l:
          return "Profiler";
        case a:
          return "StrictMode";
        case v:
          return "Suspense";
        case w:
          return "SuspenseList";
        case z:
          return "Activity";
      }
      if (typeof n == "object")
        switch (typeof n.tag == "number" && console.error(
          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
        ), n.$$typeof) {
          case g:
            return "Portal";
          case k:
            return (n.displayName || "Context") + ".Provider";
          case b:
            return (n._context.displayName || "Context") + ".Consumer";
          case E:
            var h = n.render;
            return n = n.displayName, n || (n = h.displayName || h.name || "", n = n !== "" ? "ForwardRef(" + n + ")" : "ForwardRef"), n;
          case R:
            return h = n.displayName || null, h !== null ? h : t(n.type) || "Memo";
          case _:
            h = n._payload, n = n._init;
            try {
              return t(n(h));
            } catch {
            }
        }
      return null;
    }
    function e(n) {
      return "" + n;
    }
    function r(n) {
      try {
        e(n);
        var h = !1;
      } catch {
        h = !0;
      }
      if (h) {
        h = console;
        var j = h.error, O = typeof Symbol == "function" && Symbol.toStringTag && n[Symbol.toStringTag] || n.constructor.name || "Object";
        return j.call(
          h,
          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
          O
        ), e(n);
      }
    }
    function i(n) {
      if (n === o) return "<>";
      if (typeof n == "object" && n !== null && n.$$typeof === _)
        return "<...>";
      try {
        var h = t(n);
        return h ? "<" + h + ">" : "<...>";
      } catch {
        return "<...>";
      }
    }
    function s() {
      var n = F.A;
      return n === null ? null : n.getOwner();
    }
    function u() {
      return Error("react-stack-top-frame");
    }
    function c(n) {
      if (U.call(n, "key")) {
        var h = Object.getOwnPropertyDescriptor(n, "key").get;
        if (h && h.isReactWarning) return !1;
      }
      return n.key !== void 0;
    }
    function d(n, h) {
      function j() {
        D || (D = !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)",
          h
        ));
      }
      j.isReactWarning = !0, Object.defineProperty(n, "key", {
        get: j,
        configurable: !0
      });
    }
    function f() {
      var n = t(this.type);
      return q[n] || (q[n] = !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."
      )), n = this.props.ref, n !== void 0 ? n : null;
    }
    function m(n, h, j, O, P, A, G, Z) {
      return j = A.ref, n = {
        $$typeof: S,
        type: n,
        key: h,
        props: A,
        _owner: P
      }, (j !== void 0 ? j : null) !== null ? Object.defineProperty(n, "ref", {
        enumerable: !1,
        get: f
      }) : Object.defineProperty(n, "ref", { enumerable: !1, value: null }), n._store = {}, Object.defineProperty(n._store, "validated", {
        configurable: !1,
        enumerable: !1,
        writable: !0,
        value: 0
      }), Object.defineProperty(n, "_debugInfo", {
        configurable: !1,
        enumerable: !1,
        writable: !0,
        value: null
      }), Object.defineProperty(n, "_debugStack", {
        configurable: !1,
        enumerable: !1,
        writable: !0,
        value: G
      }), Object.defineProperty(n, "_debugTask", {
        configurable: !1,
        enumerable: !1,
        writable: !0,
        value: Z
      }), Object.freeze && (Object.freeze(n.props), Object.freeze(n)), n;
    }
    function p(n, h, j, O, P, A, G, Z) {
      var I = h.children;
      if (I !== void 0)
        if (O)
          if (X(I)) {
            for (O = 0; O < I.length; O++)
              x(I[O]);
            Object.freeze && Object.freeze(I);
          } 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 x(I);
      if (U.call(h, "key")) {
        I = t(n);
        var $ = Object.keys(h).filter(function(Q) {
          return Q !== "key";
        });
        O = 0 < $.length ? "{key: someKey, " + $.join(": ..., ") + ": ...}" : "{key: someKey}", K[I + O] || ($ = 0 < $.length ? "{" + $.join(": ..., ") + ": ...}" : "{}", console.error(
          `A props object containing a "key" prop is being spread into JSX:
  let props = %s;
  <%s {...props} />
React keys must be passed directly to JSX without using spread:
  let props = %s;
  <%s key={someKey} {...props} />`,
          O,
          I,
          $,
          I
        ), K[I + O] = !0);
      }
      if (I = null, j !== void 0 && (r(j), I = "" + j), c(h) && (r(h.key), I = "" + h.key), "key" in h) {
        j = {};
        for (var te in h)
          te !== "key" && (j[te] = h[te]);
      } else j = h;
      return I && d(
        j,
        typeof n == "function" ? n.displayName || n.name || "Unknown" : n
      ), m(
        n,
        I,
        A,
        P,
        s(),
        j,
        G,
        Z
      );
    }
    function x(n) {
      typeof n == "object" && n !== null && n.$$typeof === S && n._store && (n._store.validated = 1);
    }
    var T = Ue, S = Symbol.for("react.transitional.element"), g = Symbol.for("react.portal"), o = Symbol.for("react.fragment"), a = Symbol.for("react.strict_mode"), l = Symbol.for("react.profiler"), b = Symbol.for("react.consumer"), k = Symbol.for("react.context"), E = Symbol.for("react.forward_ref"), v = Symbol.for("react.suspense"), w = Symbol.for("react.suspense_list"), R = Symbol.for("react.memo"), _ = Symbol.for("react.lazy"), z = Symbol.for("react.activity"), L = Symbol.for("react.client.reference"), F = T.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, U = Object.prototype.hasOwnProperty, X = Array.isArray, Y = console.createTask ? console.createTask : function() {
      return null;
    };
    T = {
      "react-stack-bottom-frame": function(n) {
        return n();
      }
    };
    var D, q = {}, B = T["react-stack-bottom-frame"].bind(
      T,
      u
    )(), H = Y(i(u)), K = {};
    oe.Fragment = o, oe.jsx = function(n, h, j, O, P) {
      var A = 1e4 > F.recentlyCreatedOwnerStacks++;
      return p(
        n,
        h,
        j,
        !1,
        O,
        P,
        A ? Error("react-stack-top-frame") : B,
        A ? Y(i(n)) : H
      );
    }, oe.jsxs = function(n, h, j, O, P) {
      var A = 1e4 > F.recentlyCreatedOwnerStacks++;
      return p(
        n,
        h,
        j,
        !0,
        O,
        P,
        A ? Error("react-stack-top-frame") : B,
        A ? Y(i(n)) : H
      );
    };
  }()), oe;
}
var ke;
function Je() {
  return ke || (ke = 1, process.env.NODE_ENV === "production" ? ne.exports = qe() : ne.exports = Ge()), ne.exports;
}
var C = Je();
function fe() {
  return fe = Object.assign ? Object.assign.bind() : function(t) {
    for (var e = 1; e < arguments.length; e++) {
      var r = arguments[e];
      for (var i in r) ({}).hasOwnProperty.call(r, i) && (t[i] = r[i]);
    }
    return t;
  }, fe.apply(null, arguments);
}
function ye(t) {
  if (t === void 0) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
  return t;
}
function me(t, e) {
  return me = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(r, i) {
    return r.__proto__ = i, r;
  }, me(t, e);
}
function Xe(t, e) {
  t.prototype = Object.create(e.prototype), t.prototype.constructor = t, me(t, e);
}
var Ee = Number.isNaN || function(e) {
  return typeof e == "number" && e !== e;
};
function Ke(t, e) {
  return !!(t === e || Ee(t) && Ee(e));
}
function Ze(t, e) {
  if (t.length !== e.length)
    return !1;
  for (var r = 0; r < t.length; r++)
    if (!Ke(t[r], e[r]))
      return !1;
  return !0;
}
function ue(t, e) {
  e === void 0 && (e = Ze);
  var r, i = [], s, u = !1;
  function c() {
    for (var d = [], f = 0; f < arguments.length; f++)
      d[f] = arguments[f];
    return u && r === this && e(d, i) || (s = t.apply(this, d), u = !0, r = this, i = d), s;
  }
  return c;
}
var Qe = typeof performance == "object" && typeof performance.now == "function", xe = Qe ? function() {
  return performance.now();
} : function() {
  return Date.now();
};
function we(t) {
  cancelAnimationFrame(t.id);
}
function et(t, e) {
  var r = xe();
  function i() {
    xe() - r >= e ? t.call(null) : s.id = requestAnimationFrame(i);
  }
  var s = {
    id: requestAnimationFrame(i)
  };
  return s;
}
var de = -1;
function je(t) {
  if (t === void 0 && (t = !1), de === -1 || t) {
    var e = document.createElement("div"), r = e.style;
    r.width = "50px", r.height = "50px", r.overflow = "scroll", document.body.appendChild(e), de = e.offsetWidth - e.clientWidth, document.body.removeChild(e);
  }
  return de;
}
var ee = null;
function Te(t) {
  if (t === void 0 && (t = !1), ee === null || t) {
    var e = document.createElement("div"), r = e.style;
    r.width = "50px", r.height = "50px", r.overflow = "scroll", r.direction = "rtl";
    var i = document.createElement("div"), s = i.style;
    return s.width = "100px", s.height = "100px", e.appendChild(i), document.body.appendChild(e), e.scrollLeft > 0 ? ee = "positive-descending" : (e.scrollLeft = 1, e.scrollLeft === 0 ? ee = "negative" : ee = "positive-ascending"), document.body.removeChild(e), ee;
  }
  return ee;
}
process.env.NODE_ENV;
var tt = 150, rt = function(e, r) {
  return e;
}, ie = null, se = null;
process.env.NODE_ENV !== "production" && typeof window < "u" && typeof window.WeakSet < "u" && (ie = /* @__PURE__ */ new WeakSet(), se = /* @__PURE__ */ new WeakSet());
function ot(t) {
  var e, r = t.getItemOffset, i = t.getEstimatedTotalSize, s = t.getItemSize, u = t.getOffsetForIndexAndAlignment, c = t.getStartIndexForOffset, d = t.getStopIndexForStartIndex, f = t.initInstanceProps, m = t.shouldResetStyleCacheOnItemSizeChange, p = t.validateProps;
  return e = /* @__PURE__ */ function(x) {
    Xe(T, x);
    function T(g) {
      var o;
      return o = x.call(this, g) || this, o._instanceProps = f(o.props, ye(o)), o._outerRef = void 0, o._resetIsScrollingTimeoutId = null, o.state = {
        instance: ye(o),
        isScrolling: !1,
        scrollDirection: "forward",
        scrollOffset: typeof o.props.initialScrollOffset == "number" ? o.props.initialScrollOffset : 0,
        scrollUpdateWasRequested: !1
      }, o._callOnItemsRendered = void 0, o._callOnItemsRendered = ue(function(a, l, b, k) {
        return o.props.onItemsRendered({
          overscanStartIndex: a,
          overscanStopIndex: l,
          visibleStartIndex: b,
          visibleStopIndex: k
        });
      }), o._callOnScroll = void 0, o._callOnScroll = ue(function(a, l, b) {
        return o.props.onScroll({
          scrollDirection: a,
          scrollOffset: l,
          scrollUpdateWasRequested: b
        });
      }), o._getItemStyle = void 0, o._getItemStyle = function(a) {
        var l = o.props, b = l.direction, k = l.itemSize, E = l.layout, v = o._getItemStyleCache(m && k, m && E, m && b), w;
        if (v.hasOwnProperty(a))
          w = v[a];
        else {
          var R = r(o.props, a, o._instanceProps), _ = s(o.props, a, o._instanceProps), z = b === "horizontal" || E === "horizontal", L = b === "rtl", F = z ? R : 0;
          v[a] = w = {
            position: "absolute",
            left: L ? void 0 : F,
            right: L ? F : void 0,
            top: z ? 0 : R,
            height: z ? "100%" : _,
            width: z ? _ : "100%"
          };
        }
        return w;
      }, o._getItemStyleCache = void 0, o._getItemStyleCache = ue(function(a, l, b) {
        return {};
      }), o._onScrollHorizontal = function(a) {
        var l = a.currentTarget, b = l.clientWidth, k = l.scrollLeft, E = l.scrollWidth;
        o.setState(function(v) {
          if (v.scrollOffset === k)
            return null;
          var w = o.props.direction, R = k;
          if (w === "rtl")
            switch (Te()) {
              case "negative":
                R = -k;
                break;
              case "positive-descending":
                R = E - b - k;
                break;
            }
          return R = Math.max(0, Math.min(R, E - b)), {
            isScrolling: !0,
            scrollDirection: v.scrollOffset < R ? "forward" : "backward",
            scrollOffset: R,
            scrollUpdateWasRequested: !1
          };
        }, o._resetIsScrollingDebounced);
      }, o._onScrollVertical = function(a) {
        var l = a.currentTarget, b = l.clientHeight, k = l.scrollHeight, E = l.scrollTop;
        o.setState(function(v) {
          if (v.scrollOffset === E)
            return null;
          var w = Math.max(0, Math.min(E, k - b));
          return {
            isScrolling: !0,
            scrollDirection: v.scrollOffset < w ? "forward" : "backward",
            scrollOffset: w,
            scrollUpdateWasRequested: !1
          };
        }, o._resetIsScrollingDebounced);
      }, o._outerRefSetter = function(a) {
        var l = o.props.outerRef;
        o._outerRef = a, typeof l == "function" ? l(a) : l != null && typeof l == "object" && l.hasOwnProperty("current") && (l.current = a);
      }, o._resetIsScrollingDebounced = function() {
        o._resetIsScrollingTimeoutId !== null && we(o._resetIsScrollingTimeoutId), o._resetIsScrollingTimeoutId = et(o._resetIsScrolling, tt);
      }, o._resetIsScrolling = function() {
        o._resetIsScrollingTimeoutId = null, o.setState({
          isScrolling: !1
        }, function() {
          o._getItemStyleCache(-1, null);
        });
      }, o;
    }
    T.getDerivedStateFromProps = function(o, a) {
      return nt(o, a), p(o), null;
    };
    var S = T.prototype;
    return S.scrollTo = function(o) {
      o = Math.max(0, o), this.setState(function(a) {
        return a.scrollOffset === o ? null : {
          scrollDirection: a.scrollOffset < o ? "forward" : "backward",
          scrollOffset: o,
          scrollUpdateWasRequested: !0
        };
      }, this._resetIsScrollingDebounced);
    }, S.scrollToItem = function(o, a) {
      a === void 0 && (a = "auto");
      var l = this.props, b = l.itemCount, k = l.layout, E = this.state.scrollOffset;
      o = Math.max(0, Math.min(o, b - 1));
      var v = 0;
      if (this._outerRef) {
        var w = this._outerRef;
        k === "vertical" ? v = w.scrollWidth > w.clientWidth ? je() : 0 : v = w.scrollHeight > w.clientHeight ? je() : 0;
      }
      this.scrollTo(u(this.props, o, a, E, this._instanceProps, v));
    }, S.componentDidMount = function() {
      var o = this.props, a = o.direction, l = o.initialScrollOffset, b = o.layout;
      if (typeof l == "number" && this._outerRef != null) {
        var k = this._outerRef;
        a === "horizontal" || b === "horizontal" ? k.scrollLeft = l : k.scrollTop = l;
      }
      this._callPropsCallbacks();
    }, S.componentDidUpdate = function() {
      var o = this.props, a = o.direction, l = o.layout, b = this.state, k = b.scrollOffset, E = b.scrollUpdateWasRequested;
      if (E && this._outerRef != null) {
        var v = this._outerRef;
        if (a === "horizontal" || l === "horizontal")
          if (a === "rtl")
            switch (Te()) {
              case "negative":
                v.scrollLeft = -k;
                break;
              case "positive-ascending":
                v.scrollLeft = k;
                break;
              default:
                var w = v.clientWidth, R = v.scrollWidth;
                v.scrollLeft = R - w - k;
                break;
            }
          else
            v.scrollLeft = k;
        else
          v.scrollTop = k;
      }
      this._callPropsCallbacks();
    }, S.componentWillUnmount = function() {
      this._resetIsScrollingTimeoutId !== null && we(this._resetIsScrollingTimeoutId);
    }, S.render = function() {
      var o = this.props, a = o.children, l = o.className, b = o.direction, k = o.height, E = o.innerRef, v = o.innerElementType, w = o.innerTagName, R = o.itemCount, _ = o.itemData, z = o.itemKey, L = z === void 0 ? rt : z, F = o.layout, U = o.outerElementType, X = o.outerTagName, Y = o.style, D = o.useIsScrolling, q = o.width, B = this.state.isScrolling, H = b === "horizontal" || F === "horizontal", K = H ? this._onScrollHorizontal : this._onScrollVertical, n = this._getRangeToRender(), h = n[0], j = n[1], O = [];
      if (R > 0)
        for (var P = h; P <= j; P++)
          O.push(ce(a, {
            data: _,
            key: L(P, _),
            index: P,
            isScrolling: D ? B : void 0,
            style: this._getItemStyle(P)
          }));
      var A = i(this.props, this._instanceProps);
      return ce(U || X || "div", {
        className: l,
        onScroll: K,
        ref: this._outerRefSetter,
        style: fe({
          position: "relative",
          height: k,
          width: q,
          overflow: "auto",
          WebkitOverflowScrolling: "touch",
          willChange: "transform",
          direction: b
        }, Y)
      }, ce(v || w || "div", {
        children: O,
        ref: E,
        style: {
          height: H ? "100%" : A,
          pointerEvents: B ? "none" : void 0,
          width: H ? A : "100%"
        }
      }));
    }, S._callPropsCallbacks = function() {
      if (typeof this.props.onItemsRendered == "function") {
        var o = this.props.itemCount;
        if (o > 0) {
          var a = this._getRangeToRender(), l = a[0], b = a[1], k = a[2], E = a[3];
          this._callOnItemsRendered(l, b, k, E);
        }
      }
      if (typeof this.props.onScroll == "function") {
        var v = this.state, w = v.scrollDirection, R = v.scrollOffset, _ = v.scrollUpdateWasRequested;
        this._callOnScroll(w, R, _);
      }
    }, S._getRangeToRender = function() {
      var o = this.props, a = o.itemCount, l = o.overscanCount, b = this.state, k = b.isScrolling, E = b.scrollDirection, v = b.scrollOffset;
      if (a === 0)
        return [0, 0, 0, 0];
      var w = c(this.props, v, this._instanceProps), R = d(this.props, w, v, this._instanceProps), _ = !k || E === "backward" ? Math.max(1, l) : 1, z = !k || E === "forward" ? Math.max(1, l) : 1;
      return [Math.max(0, w - _), Math.max(0, Math.min(a - 1, R + z)), w, R];
    }, T;
  }(Be), e.defaultProps = {
    direction: "ltr",
    itemData: void 0,
    layout: "vertical",
    overscanCount: 2,
    useIsScrolling: !1
  }, e;
}
var nt = function(e, r) {
  var i = e.children, s = e.direction, u = e.height, c = e.layout, d = e.innerTagName, f = e.outerTagName, m = e.width, p = r.instance;
  if (process.env.NODE_ENV !== "production") {
    (d != null || f != null) && se && !se.has(p) && (se.add(p), console.warn("The innerTagName and outerTagName props have been deprecated. Please use the innerElementType and outerElementType props instead."));
    var x = s === "horizontal" || c === "horizontal";
    switch (s) {
      case "horizontal":
      case "vertical":
        ie && !ie.has(p) && (ie.add(p), console.warn('The direction prop should be either "ltr" (default) or "rtl". Please use the layout prop to specify "vertical" (default) or "horizontal" orientation.'));
        break;
      case "ltr":
      case "rtl":
        break;
      default:
        throw Error('An invalid "direction" prop has been specified. Value should be either "ltr" or "rtl". ' + ('"' + s + '" was specified.'));
    }
    switch (c) {
      case "horizontal":
      case "vertical":
        break;
      default:
        throw Error('An invalid "layout" prop has been specified. Value should be either "horizontal" or "vertical". ' + ('"' + c + '" was specified.'));
    }
    if (i == null)
      throw Error('An invalid "children" prop has been specified. Value should be a React component. ' + ('"' + (i === null ? "null" : typeof i) + '" was specified.'));
    if (x && typeof m != "number")
      throw Error('An invalid "width" prop has been specified. Horizontal lists must specify a number for width. ' + ('"' + (m === null ? "null" : typeof m) + '" was specified.'));
    if (!x && typeof u != "number")
      throw Error('An invalid "height" prop has been specified. Vertical lists must specify a number for height. ' + ('"' + (u === null ? "null" : typeof u) + '" was specified.'));
  }
}, it = /* @__PURE__ */ ot({
  getItemOffset: function(e, r) {
    var i = e.itemSize;
    return r * i;
  },
  getItemSize: function(e, r) {
    var i = e.itemSize;
    return i;
  },
  getEstimatedTotalSize: function(e) {
    var r = e.itemCount, i = e.itemSize;
    return i * r;
  },
  getOffsetForIndexAndAlignment: function(e, r, i, s, u, c) {
    var d = e.direction, f = e.height, m = e.itemCount, p = e.itemSize, x = e.layout, T = e.width, S = d === "horizontal" || x === "horizontal", g = S ? T : f, o = Math.max(0, m * p - g), a = Math.min(o, r * p), l = Math.max(0, r * p - g + p + c);
    switch (i === "smart" && (s >= l - g && s <= a + g ? i = "auto" : i = "center"), i) {
      case "start":
        return a;
      case "end":
        return l;
      case "center": {
        var b = Math.round(l + (a - l) / 2);
        return b < Math.ceil(g / 2) ? 0 : b > o + Math.floor(g / 2) ? o : b;
      }
      case "auto":
      default:
        return s >= l && s <= a ? s : s < l ? l : a;
    }
  },
  getStartIndexForOffset: function(e, r) {
    var i = e.itemCount, s = e.itemSize;
    return Math.max(0, Math.min(i - 1, Math.floor(r / s)));
  },
  getStopIndexForStartIndex: function(e, r, i) {
    var s = e.direction, u = e.height, c = e.itemCount, d = e.itemSize, f = e.layout, m = e.width, p = s === "horizontal" || f === "horizontal", x = r * d, T = p ? m : u, S = Math.ceil((T + i - x) / d);
    return Math.max(0, Math.min(
      c - 1,
      r + S - 1
      // -1 is because stop index is inclusive
    ));
  },
  initInstanceProps: function(e) {
  },
  shouldResetStyleCacheOnItemSizeChange: !0,
  validateProps: function(e) {
    var r = e.itemSize;
    if (process.env.NODE_ENV !== "production" && typeof r != "number")
      throw Error('An invalid "itemSize" prop has been specified. Value should be a number. ' + ('"' + (r === null ? "null" : typeof r) + '" was specified.'));
  }
});
const st = '"Twemoji Mozilla","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji","EmojiOne Color","Android Emoji",sans-serif';
function at() {
  const t = document.createElement("canvas");
  t.width = t.height = 1;
  const e = t.getContext("2d", { willReadFrequently: !0 });
  return e.textBaseline = "top", e.font = `100px ${st}`, e.scale(0.01, 0.01), e;
}
function Ce(t, e, r) {
  return t.clearRect(0, 0, 100, 100), t.fillStyle = r, t.fillText(e, 0, 0), t.getImageData(0, 0, 1, 1).data.join(",");
}
function Re(t) {
  const e = at(), r = Ce(e, t, "#fff"), i = Ce(e, t, "#000");
  return i === r && !i.startsWith("0,0,0,");
}
function lt(t = "Twemoji Country Flags", e = "https://cdn.jsdelivr.net/npm/country-flag-emoji-polyfill@0.1/dist/TwemojiCountryFlags.woff2") {
  if (typeof window < "u" && Re("😊") && !Re("🇨🇭")) {
    const r = document.createElement("style");
    return r.textContent = `@font-face {
      font-family: "${t}";
      unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067,
        U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
      src: url('${e}') format('woff2');
      font-display: swap;
    }`, document.head.appendChild(r), !0;
  }
  return !1;
}
const Pe = () => {
  W(() => {
    lt();
  }, []);
}, Oe = [
  "😀",
  "😎",
  "🥳",
  "😍",
  "🤩",
  "😐",
  "😫",
  "😓",
  "🙂‍↔️",
  "🙂‍↕️",
  "🥹",
  "😖",
  "😞",
  "😵",
  "😰",
  "😭",
  "😂",
  "🥰",
  "😵‍💫",
  "🤣",
  "🤐",
  "🤑",
  "🥵",
  "😡",
  "🤯",
  "😬"
], ct = ({
  setCurrentEmoji: t,
  showEmojiPicker: e
}) => {
  if (!e) {
    const r = Math.floor(Math.random() * Oe.length);
    t(Oe[r]);
  }
}, ut = ({
  position: t,
  pickerWidth: e,
  pickerHeight: r
}) => {
  switch (console.log(t, e, r), t) {
    case "top-right":
      return {
        bottom: `calc(100% + ${r}px)`,
        right: `-calc(100% + ${e}px)`
      };
    case "top-left":
      return {
        bottom: `calc(100% + ${r}px)`,
        right: `calc(100% + ${e}px)`
      };
    case "bottom-right":
      return { top: "100%", right: `-calc(100% + ${e}px)` };
    case "bottom-left":
      return { top: "100%", right: `calc(100% + ${e}px)` };
    default:
      return { top: "100%", left: "50%", transform: "translateX(-50%)" };
  }
}, ze = {
  light: {
    backgroundColor: "#fff",
    textColor: "#222",
    borderColor: "#ccc",
    tabActiveBackgroundColor: "#eee",
    tabActiveBorderColor: "#ccc",
    tabHoverBackgroundColor: "#f5f5f5",
    scrollbarThumbColor: "#c1c1c1",
    scrollbarThumbHoverColor: "#a8a8a8",
    inputBorderColor: "#eee",
    boxShadowColor: "rgba(0,0,0,0.1)",
    noResultsTextColor: "#777"
  },
  dark: {
    backgroundColor: "#222",
    textColor: "#f5f5f5",
    borderColor: "#444",
    tabActiveBackgroundColor: "#444",
    tabActiveBorderColor: "#555",
    tabHoverBackgroundColor: "#333",
    scrollbarThumbColor: "#555",
    scrollbarThumbHoverColor: "#666",
    inputBorderColor: "#444",
    boxShadowColor: "rgba(0,0,0,0.3)",
    noResultsTextColor: "#aaa"
  }
}, dt = (t, e) => {
  if (!t) return;
  const r = t.selectionStart || 0, i = t.selectionEnd || 0, s = t.value;
  t.value = s.substring(0, r) + e + s.substring(i), t.focus(), t.setSelectionRange(r + e.length, r + e.length);
  const u = new Event("input", { bubbles: !0, cancelable: !0 });
  t.dispatchEvent(u);
}, ft = '"Twemoji Country Flags", "Helvetica", "Comic Sans", serif', mt = 6, ht = 40, pt = 320, gt = 420, bt = 330, vt = [
  "🖕",
  "🖕🏻",
  "🖕🏼",
  "🖕🏽",
  "🖕🏾",
  "🖕🏿",
  "🫃",
  "🫃🏻",
  "🫃🏼",
  "🫃🏽",
  "🫃🏾",
  "🫃🏿",
  "🫄",
  "🫄🏻",
  "🫄🏼",
  "🫄🏽",
  "🫄🏾",
  "🫄🏿",
  "✡️",
  "⚧️",
  "🇮🇱",
  "🏳️‍🌈",
  "🏳️‍⚧️"
], St = {
  sm: {
    emojiItemSize: 28,
    pickerWidth: 260,
    pickerHeight: 320,
    listHeight: 220
  },
  md: {
    emojiItemSize: 36,
    pickerWidth: 320,
    pickerHeight: 380,
    listHeight: 280
  },
  lg: {
    emojiItemSize: 44,
    pickerWidth: 400,
    pickerHeight: 480,
    listHeight: 370
  }
}, _e = {
  "Recent Emojis": "🕒",
  "Smileys & Emotion": "😂",
  "People & Body": "👋",
  Component: "🏽",
  "Animals & Nature": "🐄",
  "Food & Drink": "🍹",
  "Travel & Places": "🚃",
  Activities: "⚽",
  Objects: "🛠️",
  Symbols: "🔅",
  Flags: "🚩"
}, kt = () => /* @__PURE__ */ C.jsx("svg", { className: "emoji-picker-spinner", viewBox: "25 25 50 50", children: /* @__PURE__ */ C.jsx(
  "circle",
  {
    className: "emoji-picker-spinner-path",
    r: "20",
    cy: "50",
    cx: "50"
  }
) }), yt = () => {
  const t = J(null), e = J(!1), r = J(0), i = J(0), s = 0.1, u = He(() => {
    const c = t.current;
    c && (Math.abs(i.current - r.current) > 1 ? (i.current += (r.current - i.current) * s, c.scrollLeft = i.current, requestAnimationFrame(u)) : e.current = !1);
  }, []);
  return W(() => {
    const c = t.current;
    if (!c) return;
    const d = (f) => {
      f.preventDefault(), r.current += f.deltaY;
      const m = c.scrollWidth - c.clientWidth;
      r.current = Math.min(
        Math.max(r.current, 0),
        m
      ), e.current || (e.current = !0, u());
    };
    return c.addEventListener("wheel", d), () => {
      c.removeEventListener("wheel", d);
    };
  }, [u]), { containerRef: t };
}, Et = ({
  activeCategory: t,
  emojiJsonData: e,
  emojisPerRow: r,
  searchTerm: i,
  recentEmojis: s = [],
  recentEmojisLabel: u = "Recent"
}) => {
  const c = ae(() => {
    var x;
    if (t === u)
      return s;
    const f = (x = e.emojis) == null ? void 0 : x[t];
    if (!f) return [];
    const m = [];
    for (const T in f)
      m.push(...f[T]);
    if (!i.trim()) return m;
    const p = i.toLowerCase();
    return m.filter(
      (T) => T.name.toLowerCase().includes(p) || T.emoji.includes(p)
    );
  }, [
    e,
    t,
    i,
    s,
    u
  ]), d = ae(() => {
    const f = [];
    for (let m = 0; m < c.length; m += r)
      f.push({
        type: "emoji-row",
        emojis: c.slice(m, m + r)
      });
    return f;
  }, [c, r]);
  return { filteredEmojis: c, groupedAndFilteredEmojis: d };
}, xt = () => {
  const [t, e] = M(null), [r, i] = M(!1), s = J(
    null
  ), u = J(null);
  return {
    longPressEmoji: t,
    setLongPressEmoji: e,
    showSkinToneVariants: r,
    setShowSkinToneVariants: i,
    longPressTimeoutRef: s,
    skinToneVariantsRef: u,
    handleEmojiMouseDown: (m, p) => {
      m.hasSkinTones && m.skinToneVariants && (p.preventDefault(), s.current = setTimeout(() => {
        e(m), i(!0);
      }, 500));
    },
    handleEmojiMouseUp: () => {
      s.current && (clearTimeout(s.current), s.current = null);
    },
    handleEmojiMouseLeave: () => {
      s.current && (clearTimeout(s.current), s.current = null);
    }
  };
}, wt = ({
  onClose: t,
  pickerRef: e,
  setLongPressEmoji: r,
  setShowSkinToneVariants: i,
  showSkinToneVariants: s,
  skinToneVariantsRef: u
}) => {
  W(() => {
    const c = (d) => {
      const f = e.current, m = u.current, p = d.target;
      if (!(m && m.contains(p))) {
        if (s && f && f.contains(p)) {
          i(!1), r(null);
          return;
        }
        f && !f.contains(p) && t && t();
      }
    };
    return document.addEventListener("mousedown", c), () => {
      document.removeEventListener("mousedown", c);
    };
  }, [
    t,
    e,
    s,
    r,
    i,
    u
  ]);
}, jt = ({ onClose: t, pickerRef: e }) => {
  W(() => {
    const r = (i) => {
      e.current && !e.current.contains(i.target) && t && t();
    };
    return document.addEventListener("mousedown", r), () => {
      document.removeEventListener("mousedown", r);
    };
  }, [t, e]);
}, Tt = ({
  activeCategory: t,
  allCategories: e,
  setActiveCategory: r
}) => {
  W(() => {
    e.length > 0 && !t && r(e[0]);
  }, [e, t, r]);
}, Ct = ({
  pickerRef: t,
  setLongPressEmoji: e,
  showSkinToneVariants: r
}) => {
  W(() => {
    t.current && (r || e(null));
  }, [r, t, e]);
}, Rt = ({
  classNames: t,
  emojiItemSize: e,
  fontFamily: r,
  handleEmojiClick: i,
  handleEmojiMouseDown: s,
  handleEmojiMouseLeave: u,
  handleEmojiMouseUp: c,
  onEmojiButtonLongPress: d,
  item: f,
  emojisPerRow: m,
  style: p,
  styles: x
}) => {
  if (f.type !== "emoji-row") return null;
  const T = m - f.emojis.length;
  return /* @__PURE__ */ C.jsxs(
    "div",
    {
      style: { ...p, display: "flex", height: e },
      className: t.emojiRow,
      children: [
        f.emojis.map((S) => {
          const g = Ve();
          return /* @__PURE__ */ C.jsxs(
            "button",
            {
              ref: g,
              onClick: () => i(S.emoji, S),
              onMouseDown: (o) => {
                s(S, o), S.hasSkinTones && d && setTimeout(() => {
                  g.current && d(
                    g.current.getBoundingClientRect()
                  );
                }, 500);
              },
              onMouseUp: c,
              onMouseLeave: u,
              title: S.name,
              style: {
                background: "none",
                border: "none",
                fontSize: "1.4rem",
                margin: "2px 2px",
                padding: "0px",
                cursor: "pointer",
                flex: 1,
                textAlign: "center",
                position: "relative",
                fontFamily: r,
                ...x.emojiButton
              },
              className: t.emojiButton,
              children: [
                S.emoji,
                S.hasSkinTones && /* @__PURE__ */ C.jsx(
                  "span",
                  {
                    style: {
                      position: "absolute",
                      bottom: "2px",
                      right: "2px",
                      width: "6px",
                      height: "6px",
                      backgroundColor: "#888",
                      borderRadius: "50%"
                    }
                  }
                )
              ]
            },
            S.name + S.code.join("")
          );
        }),
        Array.from({ length: T }).map((S, g) => /* @__PURE__ */ C.jsx(
          "div",
          {
            className: t.emojiButton,
            style: {
              flex: 1,
              margin: "2px 2px",
              padding: "0px"
              // backgroundColor: "green",
            }
          },
          `empty-slot-${g}`
        ))
      ]
    }
  );
}, Ie = "recent-emojis", Ot = 36, _t = (t = !0) => {
  const [e, r] = M([]);
  return W(() => {
    if (t)
      try {
        const s = localStorage.getItem(Ie);
        s && r(JSON.parse(s));
      } catch (s) {
        console.error("Error loading recent emojis:", s);
      }
  }, [t]), { recentEmojis: e, addRecentEmoji: (s) => {
    t && r((u) => {
      const c = u.filter((f) => f.emoji !== s.emoji), d = [s, ...c].slice(0, Ot);
      try {
        localStorage.setItem(Ie, JSON.stringify(d));
      } catch (f) {
        console.error("Error saving recent emojis:", f);
      }
      return d;
    });
  } };
}, It = ({
  inputRef: t,
  isLoading: e,
  pickerRef: r,
  emojiJsonData: i,
  onClose: s,
  onEmojiSelect: u,
  styles: c = {},
  classNames: d = {},
  config: f = {},
  initialCategory: m,
  theme: p = "light",
  lang: x = "en",
  enableTabsTitleEmoji: T = !0,
  preventBadEmojis: S = !0,
  badEmojiList: g = []
}) => {
  var ge, be;
  const {
    emojisPerRow: o = mt,
    emojiItemSize: a = ht,
    pickerWidth: l = pt,
    pickerHeight: b = gt,
    listHeight: k = bt,
    fontFamily: E = ft,
    searchPlaceholder: v = x === "en" ? "Search emojis..." : "إبحث عن ايموجي...",
    noResultsMessage: w = x === "en" ? "No emojis found." : "لا يوجد ايموجي",
    applyEmojiFont: R = !0,
    themeConfig: _ = ze,
    enableRecentEmojis: z = !0,
    recentEmojisLabel: L = x === "en" ? "Recent Emojis" : "ايموجي حديثا"
  } = f, { addRecentEmoji: F, recentEmojis: U } = _t(z), [X, Y] = M(""), [D, q] = M(
    m || ""
  ), [B, H] = M(null), K = (y) => {
    H({
      top: y.top + window.scrollY,
      left: y.left + window.scrollX
    });
  }, {
    handleEmojiMouseDown: n,
    handleEmojiMouseLeave: h,
    handleEmojiMouseUp: j,
    longPressEmoji: O,
    setLongPressEmoji: P,
    setShowSkinToneVariants: A,
    showSkinToneVariants: G,
    skinToneVariantsRef: Z
  } = xt();
  wt({
    onClose: s,
    pickerRef: r,
    setLongPressEmoji: P,
    setShowSkinToneVariants: A,
    showSkinToneVariants: G,
    skinToneVariantsRef: Z
  }), Ct({
    pickerRef: r,
    setLongPressEmoji: P,
    showSkinToneVariants: G
  }), console.log("picker width: ", (ge = r.current) == null ? void 0 : ge.offsetWidth), console.log("picker height: ", (be = r.current) == null ? void 0 : be.offsetHeight);
  const I = ae(() => {
    if (!S) return i;
    const y = { ...i };
    return y.emojis = Object.fromEntries(
      Object.entries(i.emojis || {}).map(([V, le]) => [
        V,
        Object.fromEntries(
          Object.entries(le).map(([De, $e]) => [
            De,
            $e.filter(
              (We) => !g.includes(We.emoji)
            )
          ])
        )
      ])
    ), y;
  }, [i, S, g]), $ = ae(() => {
    const y = Object.keys(I.emojis || {});
    return z && U.length > 0 ? [L, ...y] : y;
  }, [
    I,
    z,
    U.length,
    L
  ]);
  Pe();
  const { containerRef: te } = yt();
  Tt({
    activeCategory: D,
    allCategories: $,
    setActiveCategory: q
  });
  const { groupedAndFilteredEmojis: Q } = Et({
    activeCategory: D,
    emojiJsonData: S ? I : i,
    emojisPerRow: o,
    searchTerm: X,
    recentEmojis: U,
    recentEmojisLabel: x === "en" ? "Recent Emojis" : "ايموجي حديثا"
  }), he = (y, V) => {
    u && u(y), t.current && (dt(t.current, y), R && (t.current.style.fontFamily = E)), z && V && F(V);
  };
  jt({ onClose: s, pickerRef: r });
  const Ae = ({
    index: y,
    style: V
  }) => {
    const le = Q[y];
    return /* @__PURE__ */ C.jsx(
      Rt,
      {
        classNames: d,
        emojiItemSize: a,
        emojisPerRow: o,
        fontFamily: E,
        handleEmojiClick: he,
        handleEmojiMouseDown: n,
        handleEmojiMouseLeave: h,
        handleEmojiMouseUp: j,
        onEmojiButtonLongPress: K,
        item: le,
        style: V,
        styles: c
      }
    );
  }, N = p === "light" || p === "dark" ? _[p] : _.custom && _.custom[p] ? _.custom[p] : _.light, Ne = {
    border: "1px solid #ccc",
    borderRadius: "8px",
    padding: "10px",
    width: l,
    height: b,
    backgroundColor: N.backgroundColor,
    color: N.textColor,
    boxShadow: `0 4px 12px ${N.boxShadowColor}`,
    position: "absolute",
    zIndex: 1e3,
    display: "flex",
    flexDirection: "column",
    fontFamily: E,
    ...c.container
  }, Me = {
    display: "flex",
    marginBottom: "8px",
    overflowX: "auto",
    fontFamily: E,
    ...c.tabs
  }, Fe = (y) => ({
    flexShrink: 0,
    padding: "6px 10px",
    marginRight: "4px",
    backgroundColor: y ? N.tabActiveBackgroundColor : "transparent",
    color: N.textColor,
    border: `1px solid ${y ? N.tabActiveBorderColor : N.borderColor}`,
    borderRadius: "6px",
    cursor: "pointer",
    fontWeight: y ? "bold" : "normal",
    fontSize: "1rem",
    whiteSpace: "nowrap",
    ...y ? c.activeTabButton : c.tabButton
  }), Le = {
    width: "90%",
    padding: "8px",
    marginBottom: "8px",
    border: `"1px solid ${N.inputBorderColor}`,
    borderRadius: "4px",
    backgroundColor: N.backgroundColor,
    color: N.textColor,
    ...c.searchInput
  }, pe = {
    textAlign: "center",
    color: N.noResultsTextColor,
    flexGrow: 1,
    ...c.noResultsMessage
  };
  return /* @__PURE__ */ C.jsxs(
    "div",
    {
      ref: r,
      style: Ne,
      className: `${d.container || ""} emoji-picker-theme-${p}`,
      "data-theme": p,
      "data-lang": x,
      dir: x === "en" ? "ltr" : "rtl",
      children: [
        /* @__PURE__ */ C.jsx("div", { style: Me, className: d.tabs, ref: te, children: $.map((y) => /* @__PURE__ */ C.jsx(
          "button",
          {
            onClick: () => q(y),
            style: Fe(y === D),
            className: y === D ? d.activeTabButton : d.tabButton,
            children: T && _e[y] ? _e[y] : y
          },
          y
        )) }),
        /* @__PURE__ */ C.jsx(
          "input",
          {
            type: "text",
            placeholder: v,
            value: X,
            onChange: (y) => Y(y.target.value),
            style: Le,
            className: d.searchInput
          }
        ),
        e && /* @__PURE__ */ C.jsx("div", { style: pe, children: /* @__PURE__ */ C.jsx(kt, {}) }),
        Q.length === 0 && !e && /* @__PURE__ */ C.jsx("div", { style: pe, className: d.noResultsMessage, children: w }),
        G && O && O.skinToneVariants && /* @__PURE__ */ C.jsx(
          "div",
          {
            ref: Z,
            style: {
              position: "absolute",
              zIndex: 1001,
              backgroundColor: N.backgroundColor,
              border: `1px solid ${N.borderColor}`,
              borderRadius: "8px",
              padding: "8px",
              boxShadow: `0 4px 12px ${N.boxShadowColor}`,
              display: "flex",
              flexDirection: "row",
              top: B ? `${B.top}px` : "50%",
              left: "50%",
              transform: "translate(-50%, -190%)"
            },
            children: O.skinToneVariants.map((y, V) => /* @__PURE__ */ C.jsx(
              "button",
              {
                onClick: () => {
                  he(y.emoji), A(!1);
                },
                title: y.name,
                style: {
                  background: "none",
                  border: "none",
                  fontSize: "1.4rem",
                  margin: "2px 8px",
                  padding: "8px",
                  cursor: "pointer",
                  textAlign: "center",
                  fontFamily: E
                },
                children: y.emoji
              },
              `skin-tone-variant-${V}${y.name + y.code.join("-")}`
            ))
          }
        ),
        Q.length !== 0 && !e && /* @__PURE__ */ C.jsx(
          it,
          {
            height: k,
            itemCount: Q.length,
            itemSize: a,
            width: "100%",
            style: c.emojiList,
            className: d.emojiList,
            children: Ae
          }
        )
      ]
    }
  );
}, Pt = ({
  pickerRef: t,
  showEmojiPicker: e
}) => {
  const [r, i] = M({ width: 0, height: 0 });
  return Ye(() => {
    if (e && t.current) {
      const { offsetWidth: s, offsetHeight: u } = t.current;
      i({
        width: s,
        height: u
      });
    }
  }, [e, t]), { pickerSize: r };
}, zt = ({
  currentEmoji: t,
  setCurrentEmoji: e,
  setShowEmojiPicker: r,
  showEmojiPicker: i,
  theme: s = "light"
}) => /* @__PURE__ */ C.jsx(
  "button",
  {
    "aria-label": i ? "Close-Picker" : "Open-Picker",
    "aria-expanded": i,
    type: "button",
    className: `emoji-button ${i ? "active" : ""} emoji-button-theme-${s}`,
    onClick: () => r(!i),
    onMouseEnter: () => ct({ setCurrentEmoji: e, showEmojiPicker: i }),
    "data-theme": s,
    children: t
  },
  i ? "Close-Picker" : "Open-Picker"
), At = (t, e, r) => {
  const i = t[e];
  return i ? typeof i == "function" ? i() : Promise.resolve(i) : new Promise((s, u) => {
    (typeof queueMicrotask == "function" ? queueMicrotask : setTimeout)(
      u.bind(
        null,
        new Error(
          "Unknown variable dynamic import: " + e + (e.split("/").length !== r ? ". Note that variables only represent file names one level deep." : "")
        )
      )
    );
  });
}, Nt = ({
  lang: t,
  showEmojiPicker: e
}) => {
  const [r, i] = M({ emojis: {} }), [s, u] = M(!1), c = (d) => {
    const f = { ...d };
    return Object.keys(f.emojis).forEach((m) => {
      const p = f.emojis[m];
      Object.keys(p).forEach((x) => {
        const T = p[x], S = [], g = {};
        T.forEach((o) => {
          if (o.name.includes("skin tone")) {
            const a = o.name.split(":")[0].trim();
            g[a] || (g[a] = []), g[a].push(o);
          } else
            g[o.name] || (g[o.name] = []), g[o.name].unshift(o);
        }), Object.keys(g).forEach((o) => {
          const a = g[o];
          if (a.length > 1) {
            const l = {
              ...a[0],
              skinToneVariants: a,
              hasSkinTones: !0
            };
            S.push(l);
          } else
            S.push(a[0]);
        }), p[x] = S;
      });
    }), f;
  };
  return W(() => {
    if (!e) return;
    (async () => {
      u(!0);
      const f = await At(/* @__PURE__ */ Object.assign({ "../data/categories.with.modifiers-ar.json": () => import("./categories.with.modifiers-ar-BTQDkeZo.js"), "../data/categories.with.modifiers.json": () => import("./categories.with.modifiers-SUuCChv0.js") }), `../data/categories.with.modifiers${t === "ar" ? "-ar" : ""}.json`, 3), m = c(f.default);
      i(m), u(!1);
    })();
  }, [t, e]), { emojiData: r, isLoading: s };
}, Mt = ({
  lang: t,
  textInputRef: e
}) => {
  W(() => {
    e.current && (e.current.dir = t === "en" ? "ltr" : "rtl", e.current.placeholder = t === "en" ? "Type a message..." : "اكتب رسالة...");
  }, [t, e]);
}, Ft = () => {
  const [t, e] = M(!1), [r, i] = M("😀"), s = J(null);
  return {
    showEmojiPicker: t,
    setShowEmojiPicker: e,
    currentEmoji: r,
    setCurrentEmoji: i,
    pickerRef: s
  };
}, Lt = () => /* @__PURE__ */ C.jsx("style", { children: `
        .emoji-picker-container {
  position: relative;
  user-select: none;
}

.emoji-picker-container *::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

/* Light theme scrollbar */
.emoji-picker-theme-light *::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 10px;
}

.emoji-picker-theme-light *::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* Dark theme scrollbar */
.emoji-picker-theme-dark *::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 10px;
}

.emoji-picker-theme-dark *::-webkit-scrollbar-thumb:hover {
  background: #666;
}

/* Hide scrollbar track for both themes */
.emoji-picker-theme-light *::-webkit-scrollbar-track,
.emoji-picker-theme-dark *::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 0;
}

/* For Firefox */
.emoji-picker-container * {
  scrollbar-width: thin;
}

.emoji-picker-theme-light * {
  scrollbar-color: #c1c1c1 transparent;
}

.emoji-picker-theme-dark * {
  scrollbar-color: #555 transparent;
}

/* ====================================== */

.emoji-button {
  background-color: transparent;
  border: 2px solid #e0e0e0;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Light theme button */
.emoji-button-theme-light {
  border-color: #e0e0e0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Dark theme button */
.emoji-button-theme-dark {
  border-color: #444;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.emoji-button:hover {
  border-color: #ffcc00;
  box-shadow: 0 5px 15px rgba(255, 204, 0, 0.3);
  animation: pulse 1s infinite;
}

.emoji-button.active {
  color: white;
  transform: rotate(360deg);
  transition: transform 0.5s ease-in-out, background-color 0.3s ease;
}

.emoji-picker-wrapper {
  transform-origin: top center;
  z-index: 1;
}

/* Add support for custom themes */
[data-theme]:not([data-theme="light"]):not([data-theme="dark"]) {
  /* Custom themes will be handled via inline styles */
}

/* Spinner styles for loading */
svg.emoji-picker-spinner {
  width: 3.25em;
  transform-origin: center;
  animation: rotate4 2s linear infinite;
}

circle.emoji-picker-spinner-path {
  fill: none;
  stroke: hsl(214, 97%, 59%);
  stroke-width: 2;
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  animation: dash4 1.5s ease-in-out infinite;
}

@keyframes rotate4 {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dash4 {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 90, 200;
    stroke-dashoffset: -35px;
  }

  100% {
    stroke-dashoffset: -125px;
  }
}

        ` }), Wt = ({
  textInputRef: t,
  classNames: e,
  config: r,
  initialCategory: i,
  onEmojiSelect: s,
  styles: u,
  position: c = "top-left",
  theme: d = "light",
  themeConfig: f = ze,
  lang: m = "en",
  enableRecentEmojis: p = !0,
  sizes: x = {},
  size: T = "md",
  enableTabsTitleEmoji: S = !0,
  preventBadEmojis: g = !0,
  badEmojiList: o = vt
}) => {
  const {
    currentEmoji: a,
    pickerRef: l,
    setCurrentEmoji: b,
    setShowEmojiPicker: k,
    showEmojiPicker: E
  } = Ft();
  Pe();
  const { pickerSize: v } = Pt({ pickerRef: l, showEmojiPicker: E }), w = {
    ...r,
    themeConfig: f,
    enableRecentEmojis: p,
    ...x,
    ...St[T]
  }, { emojiData: R, isLoading: _ } = Nt({ lang: m, showEmojiPicker: E });
  return console.log("isLoading", _), Mt({ lang: m, textInputRef: t }), /* @__PURE__ */ C.jsxs(C.Fragment, { children: [
    /* @__PURE__ */ C.jsx(Lt, {}),
    /* @__PURE__ */ C.jsxs(
      "div",
      {
        className: `emoji-picker-container emoji-picker-theme-${d}`,
        style: {
          fontFamily: '"Twemoji Country Flags", "Helvetica", "Comic Sans", serif'
        },
        "data-theme": d,
        children: [
          /* @__PURE__