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, d) {
    var u = null;
    if (d !== void 0 && (u = "" + d), s.key !== void 0 && (u = "" + s.key), "key" in s) {
      d = {};
      for (var c in s)
        c !== "key" && (d[c] = s[c]);
    } else d = s;
    return s = d.ref, {
      $$typeof: t,
      type: i,
      key: u,
      ref: s !== void 0 ? s : null,
      props: d
    };
  }
  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 j:
          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 x:
            var p = n.render;
            return n = n.displayName, n || (n = p.displayName || p.name || "", n = n !== "" ? "ForwardRef(" + n + ")" : "ForwardRef"), n;
          case R:
            return p = n.displayName || null, p !== null ? p : t(n.type) || "Memo";
          case I:
            p = n._payload, n = n._init;
            try {
              return t(n(p));
            } catch {
            }
        }
      return null;
    }
    function e(n) {
      return "" + n;
    }
    function r(n) {
      try {
        e(n);
        var p = !1;
      } catch {
        p = !0;
      }
      if (p) {
        p = console;
        var T = p.error, O = typeof Symbol == "function" && Symbol.toStringTag && n[Symbol.toStringTag] || n.constructor.name || "Object";
        return T.call(
          p,
          "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 === I)
        return "<...>";
      try {
        var p = t(n);
        return p ? "<" + p + ">" : "<...>";
      } catch {
        return "<...>";
      }
    }
    function s() {
      var n = F.A;
      return n === null ? null : n.getOwner();
    }
    function d() {
      return Error("react-stack-top-frame");
    }
    function u(n) {
      if (U.call(n, "key")) {
        var p = Object.getOwnPropertyDescriptor(n, "key").get;
        if (p && p.isReactWarning) return !1;
      }
      return n.key !== void 0;
    }
    function c(n, p) {
      function T() {
        $ || ($ = !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)",
          p
        ));
      }
      T.isReactWarning = !0, Object.defineProperty(n, "key", {
        get: T,
        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 h(n, p, T, O, P, A, G, Z) {
      return T = A.ref, n = {
        $$typeof: S,
        type: n,
        key: p,
        props: A,
        _owner: P
      }, (T !== void 0 ? T : 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 m(n, p, T, O, P, A, G, Z) {
      var _ = p.children;
      if (_ !== void 0)
        if (O)
          if (X(_)) {
            for (O = 0; O < _.length; O++)
              y(_[O]);
            Object.freeze && Object.freeze(_);
          } 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 y(_);
      if (U.call(p, "key")) {
        _ = t(n);
        var D = Object.keys(p).filter(function(Q) {
          return Q !== "key";
        });
        O = 0 < D.length ? "{key: someKey, " + D.join(": ..., ") + ": ...}" : "{key: someKey}", K[_ + O] || (D = 0 < D.length ? "{" + D.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,
          _,
          D,
          _
        ), K[_ + O] = !0);
      }
      if (_ = null, T !== void 0 && (r(T), _ = "" + T), u(p) && (r(p.key), _ = "" + p.key), "key" in p) {
        T = {};
        for (var te in p)
          te !== "key" && (T[te] = p[te]);
      } else T = p;
      return _ && c(
        T,
        typeof n == "function" ? n.displayName || n.name || "Unknown" : n
      ), h(
        n,
        _,
        A,
        P,
        s(),
        T,
        G,
        Z
      );
    }
    function y(n) {
      typeof n == "object" && n !== null && n.$$typeof === S && n._store && (n._store.validated = 1);
    }
    var w = 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"), x = Symbol.for("react.forward_ref"), v = Symbol.for("react.suspense"), j = Symbol.for("react.suspense_list"), R = Symbol.for("react.memo"), I = Symbol.for("react.lazy"), z = Symbol.for("react.activity"), L = Symbol.for("react.client.reference"), F = w.__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;
    };
    w = {
      "react-stack-bottom-frame": function(n) {
        return n();
      }
    };
    var $, q = {}, B = w["react-stack-bottom-frame"].bind(
      w,
      d
    )(), H = Y(i(d)), K = {};
    oe.Fragment = o, oe.jsx = function(n, p, T, O, P) {
      var A = 1e4 > F.recentlyCreatedOwnerStacks++;
      return m(
        n,
        p,
        T,
        !1,
        O,
        P,
        A ? Error("react-stack-top-frame") : B,
        A ? Y(i(n)) : H
      );
    }, oe.jsxs = function(n, p, T, O, P) {
      var A = 1e4 > F.recentlyCreatedOwnerStacks++;
      return m(
        n,
        p,
        T,
        !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 Ee(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 xe = Number.isNaN || function(e) {
  return typeof e == "number" && e !== e;
};
function Ke(t, e) {
  return !!(t === e || xe(t) && xe(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, d = !1;
  function u() {
    for (var c = [], f = 0; f < arguments.length; f++)
      c[f] = arguments[f];
    return d && r === this && e(c, i) || (s = t.apply(this, c), d = !0, r = this, i = c), s;
  }
  return u;
}
var Qe = typeof performance == "object" && typeof performance.now == "function", ye = Qe ? function() {
  return performance.now();
} : function() {
  return Date.now();
};
function je(t) {
  cancelAnimationFrame(t.id);
}
function et(t, e) {
  var r = ye();
  function i() {
    ye() - r >= e ? t.call(null) : s.id = requestAnimationFrame(i);
  }
  var s = {
    id: requestAnimationFrame(i)
  };
  return s;
}
var de = -1;
function we(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, d = t.getOffsetForIndexAndAlignment, u = t.getStartIndexForOffset, c = t.getStopIndexForStartIndex, f = t.initInstanceProps, h = t.shouldResetStyleCacheOnItemSizeChange, m = t.validateProps;
  return e = /* @__PURE__ */ function(y) {
    Xe(w, y);
    function w(g) {
      var o;
      return o = y.call(this, g) || this, o._instanceProps = f(o.props, Ee(o)), o._outerRef = void 0, o._resetIsScrollingTimeoutId = null, o.state = {
        instance: Ee(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, x = l.layout, v = o._getItemStyleCache(h && k, h && x, h && b), j;
        if (v.hasOwnProperty(a))
          j = v[a];
        else {
          var R = r(o.props, a, o._instanceProps), I = s(o.props, a, o._instanceProps), z = b === "horizontal" || x === "horizontal", L = b === "rtl", F = z ? R : 0;
          v[a] = j = {
            position: "absolute",
            left: L ? void 0 : F,
            right: L ? F : void 0,
            top: z ? 0 : R,
            height: z ? "100%" : I,
            width: z ? I : "100%"
          };
        }
        return j;
      }, 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, x = l.scrollWidth;
        o.setState(function(v) {
          if (v.scrollOffset === k)
            return null;
          var j = o.props.direction, R = k;
          if (j === "rtl")
            switch (Te()) {
              case "negative":
                R = -k;
                break;
              case "positive-descending":
                R = x - b - k;
                break;
            }
          return R = Math.max(0, Math.min(R, x - 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, x = l.scrollTop;
        o.setState(function(v) {
          if (v.scrollOffset === x)
            return null;
          var j = Math.max(0, Math.min(x, k - b));
          return {
            isScrolling: !0,
            scrollDirection: v.scrollOffset < j ? "forward" : "backward",
            scrollOffset: j,
            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 && je(o._resetIsScrollingTimeoutId), o._resetIsScrollingTimeoutId = et(o._resetIsScrolling, tt);
      }, o._resetIsScrolling = function() {
        o._resetIsScrollingTimeoutId = null, o.setState({
          isScrolling: !1
        }, function() {
          o._getItemStyleCache(-1, null);
        });
      }, o;
    }
    w.getDerivedStateFromProps = function(o, a) {
      return nt(o, a), m(o), null;
    };
    var S = w.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, x = this.state.scrollOffset;
      o = Math.max(0, Math.min(o, b - 1));
      var v = 0;
      if (this._outerRef) {
        var j = this._outerRef;
        k === "vertical" ? v = j.scrollWidth > j.clientWidth ? we() : 0 : v = j.scrollHeight > j.clientHeight ? we() : 0;
      }
      this.scrollTo(d(this.props, o, a, x, 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, x = b.scrollUpdateWasRequested;
      if (x && 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 j = v.clientWidth, R = v.scrollWidth;
                v.scrollLeft = R - j - k;
                break;
            }
          else
            v.scrollLeft = k;
        else
          v.scrollTop = k;
      }
      this._callPropsCallbacks();
    }, S.componentWillUnmount = function() {
      this._resetIsScrollingTimeoutId !== null && je(this._resetIsScrollingTimeoutId);
    }, S.render = function() {
      var o = this.props, a = o.children, l = o.className, b = o.direction, k = o.height, x = o.innerRef, v = o.innerElementType, j = o.innerTagName, R = o.itemCount, I = o.itemData, z = o.itemKey, L = z === void 0 ? rt : z, F = o.layout, U = o.outerElementType, X = o.outerTagName, Y = o.style, $ = o.useIsScrolling, q = o.width, B = this.state.isScrolling, H = b === "horizontal" || F === "horizontal", K = H ? this._onScrollHorizontal : this._onScrollVertical, n = this._getRangeToRender(), p = n[0], T = n[1], O = [];
      if (R > 0)
        for (var P = p; P <= T; P++)
          O.push(ce(a, {
            data: I,
            key: L(P, I),
            index: P,
            isScrolling: $ ? 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 || j || "div", {
        children: O,
        ref: x,
        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], x = a[3];
          this._callOnItemsRendered(l, b, k, x);
        }
      }
      if (typeof this.props.onScroll == "function") {
        var v = this.state, j = v.scrollDirection, R = v.scrollOffset, I = v.scrollUpdateWasRequested;
        this._callOnScroll(j, R, I);
      }
    }, S._getRangeToRender = function() {
      var o = this.props, a = o.itemCount, l = o.overscanCount, b = this.state, k = b.isScrolling, x = b.scrollDirection, v = b.scrollOffset;
      if (a === 0)
        return [0, 0, 0, 0];
      var j = u(this.props, v, this._instanceProps), R = c(this.props, j, v, this._instanceProps), I = !k || x === "backward" ? Math.max(1, l) : 1, z = !k || x === "forward" ? Math.max(1, l) : 1;
      return [Math.max(0, j - I), Math.max(0, Math.min(a - 1, R + z)), j, R];
    }, w;
  }(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, d = e.height, u = e.layout, c = e.innerTagName, f = e.outerTagName, h = e.width, m = r.instance;
  if (process.env.NODE_ENV !== "production") {
    (c != null || f != null) && se && !se.has(m) && (se.add(m), console.warn("The innerTagName and outerTagName props have been deprecated. Please use the innerElementType and outerElementType props instead."));
    var y = s === "horizontal" || u === "horizontal";
    switch (s) {
      case "horizontal":
      case "vertical":
        ie && !ie.has(m) && (ie.add(m), 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 (u) {
      case "horizontal":
      case "vertical":
        break;
      default:
        throw Error('An invalid "layout" prop has been specified. Value should be either "horizontal" or "vertical". ' + ('"' + u + '" 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 (y && typeof h != "number")
      throw Error('An invalid "width" prop has been specified. Horizontal lists must specify a number for width. ' + ('"' + (h === null ? "null" : typeof h) + '" was specified.'));
    if (!y && typeof d != "number")
      throw Error('An invalid "height" prop has been specified. Vertical lists must specify a number for height. ' + ('"' + (d === null ? "null" : typeof d) + '" 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, d, u) {
    var c = e.direction, f = e.height, h = e.itemCount, m = e.itemSize, y = e.layout, w = e.width, S = c === "horizontal" || y === "horizontal", g = S ? w : f, o = Math.max(0, h * m - g), a = Math.min(o, r * m), l = Math.max(0, r * m - g + m + u);
    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, d = e.height, u = e.itemCount, c = e.itemSize, f = e.layout, h = e.width, m = s === "horizontal" || f === "horizontal", y = r * c, w = m ? h : d, S = Math.ceil((w + i - y) / c);
    return Math.max(0, Math.min(
      u - 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 d = new Event("input", { bubbles: !0, cancelable: !0 });
  t.dispatchEvent(d);
}, 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
  }
}, Ie = {
  "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"
  }
) }), Et = () => {
  const t = J(null), e = J(!1), r = J(0), i = J(0), s = 0.1, d = He(() => {
    const u = t.current;
    u && (Math.abs(i.current - r.current) > 1 ? (i.current += (r.current - i.current) * s, u.scrollLeft = i.current, requestAnimationFrame(d)) : e.current = !1);
  }, []);
  return W(() => {
    const u = t.current;
    if (!u) return;
    const c = (f) => {
      f.preventDefault(), r.current += f.deltaY;
      const h = u.scrollWidth - u.clientWidth;
      r.current = Math.min(
        Math.max(r.current, 0),
        h
      ), e.current || (e.current = !0, d());
    };
    return u.addEventListener("wheel", c), () => {
      u.removeEventListener("wheel", c);
    };
  }, [d]), { containerRef: t };
}, xt = ({
  activeCategory: t,
  emojiJsonData: e,
  emojisPerRow: r,
  searchTerm: i,
  recentEmojis: s = [],
  recentEmojisLabel: d = "Recent"
}) => {
  const u = ae(() => {
    var y;
    if (t === d)
      return s;
    const f = (y = e.emojis) == null ? void 0 : y[t];
    if (!f) return [];
    const h = [];
    for (const w in f)
      h.push(...f[w]);
    if (!i.trim()) return h;
    const m = i.toLowerCase();
    return h.filter(
      (w) => w.name.toLowerCase().includes(m) || w.emoji.includes(m)
    );
  }, [
    e,
    t,
    i,
    s,
    d
  ]), c = ae(() => {
    const f = [];
    for (let h = 0; h < u.length; h += r)
      f.push({
        type: "emoji-row",
        emojis: u.slice(h, h + r)
      });
    return f;
  }, [u, r]);
  return { filteredEmojis: u, groupedAndFilteredEmojis: c };
}, yt = () => {
  const [t, e] = M(null), [r, i] = M(!1), s = J(
    null
  ), d = J(null);
  return {
    longPressEmoji: t,
    setLongPressEmoji: e,
    showSkinToneVariants: r,
    setShowSkinToneVariants: i,
    longPressTimeoutRef: s,
    skinToneVariantsRef: d,
    handleEmojiMouseDown: (h, m) => {
      h.hasSkinTones && h.skinToneVariants && (m.preventDefault(), s.current = setTimeout(() => {
        e(h), i(!0);
      }, 500));
    },
    handleEmojiMouseUp: () => {
      s.current && (clearTimeout(s.current), s.current = null);
    },
    handleEmojiMouseLeave: () => {
      s.current && (clearTimeout(s.current), s.current = null);
    }
  };
}, jt = ({
  onClose: t,
  pickerRef: e,
  setLongPressEmoji: r,
  setShowSkinToneVariants: i,
  showSkinToneVariants: s,
  skinToneVariantsRef: d
}) => {
  W(() => {
    const u = (c) => {
      const f = e.current, h = d.current, m = c.target;
      if (!(h && h.contains(m))) {
        if (s && f && f.contains(m)) {
          i(!1), r(null);
          return;
        }
        f && !f.contains(m) && t && t();
      }
    };
    return document.addEventListener("mousedown", u), () => {
      document.removeEventListener("mousedown", u);
    };
  }, [
    t,
    e,
    s,
    r,
    i,
    d
  ]);
}, wt = ({ 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: d,
  handleEmojiMouseUp: u,
  onEmojiButtonLongPress: c,
  item: f,
  emojisPerRow: h,
  style: m,
  styles: y
}) => {
  if (f.type !== "emoji-row") return null;
  const w = h - f.emojis.length;
  return /* @__PURE__ */ C.jsxs(
    "div",
    {
      style: { ...m, 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 && c && setTimeout(() => {
                  g.current && c(
                    g.current.getBoundingClientRect()
                  );
                }, 500);
              },
              onMouseUp: u,
              onMouseLeave: d,
              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,
                ...y.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: w }).map((S, g) => /* @__PURE__ */ C.jsx(
          "div",
          {
            className: t.emojiButton,
            style: {
              flex: 1,
              margin: "2px 2px",
              padding: "0px"
              // backgroundColor: "green",
            }
          },
          `empty-slot-${g}`
        ))
      ]
    }
  );
}, _e = "recent-emojis", Ot = 36, It = (t = !0) => {
  const [e, r] = M([]);
  return W(() => {
    if (t)
      try {
        const s = localStorage.getItem(_e);
        s && r(JSON.parse(s));
      } catch (s) {
        console.error("Error loading recent emojis:", s);
      }
  }, [t]), { recentEmojis: e, addRecentEmoji: (s) => {
    t && r((d) => {
      const u = d.filter((f) => f.emoji !== s.emoji), c = [s, ...u].slice(0, Ot);
      try {
        localStorage.setItem(_e, JSON.stringify(c));
      } catch (f) {
        console.error("Error saving recent emojis:", f);
      }
      return c;
    });
  } };
}, _t = ({
  inputRef: t,
  isLoading: e,
  pickerRef: r,
  emojiJsonData: i,
  onClose: s,
  onEmojiSelect: d,
  styles: u = {},
  classNames: c = {},
  config: f = {},
  initialCategory: h,
  theme: m = "light",
  lang: y = "en",
  enableTabsTitleEmoji: w = !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: x = ft,
    searchPlaceholder: v = y === "en" ? "Search emojis..." : "إبحث عن ايموجي...",
    noResultsMessage: j = y === "en" ? "No emojis found." : "لا يوجد ايموجي",
    applyEmojiFont: R = !0,
    themeConfig: I = ze,
    enableRecentEmojis: z = !0,
    recentEmojisLabel: L = y === "en" ? "Recent Emojis" : "ايموجي حديثا"
  } = f, { addRecentEmoji: F, recentEmojis: U } = It(z), [X, Y] = M(""), [$, q] = M(
    h || ""
  ), [B, H] = M(null), K = (E) => {
    H({
      top: E.top + window.scrollY,
      left: E.left + window.scrollX
    });
  }, {
    handleEmojiMouseDown: n,
    handleEmojiMouseLeave: p,
    handleEmojiMouseUp: T,
    longPressEmoji: O,
    setLongPressEmoji: P,
    setShowSkinToneVariants: A,
    showSkinToneVariants: G,
    skinToneVariantsRef: Z
  } = yt();
  jt({
    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 _ = ae(() => {
    if (!S) return i;
    const E = { ...i };
    return E.emojis = Object.fromEntries(
      Object.entries(i.emojis || {}).map(([V, le]) => [
        V,
        Object.fromEntries(
          Object.entries(le).map(([$e, De]) => [
            $e,
            De.filter(
              (We) => !g.includes(We.emoji)
            )
          ])
        )
      ])
    ), E;
  }, [i, S, g]), D = ae(() => {
    const E = Object.keys(_.emojis || {});
    return z && U.length > 0 ? [L, ...E] : E;
  }, [
    _,
    z,
    U.length,
    L
  ]);
  Pe();
  const { containerRef: te } = Et();
  Tt({
    activeCategory: $,
    allCategories: D,
    setActiveCategory: q
  });
  const { groupedAndFilteredEmojis: Q } = xt({
    activeCategory: $,
    emojiJsonData: S ? _ : i,
    emojisPerRow: o,
    searchTerm: X,
    recentEmojis: U,
    recentEmojisLabel: y === "en" ? "Recent Emojis" : "ايموجي حديثا"
  }), he = (E, V) => {
    d && d(E), t.current && (dt(t.current, E), R && (t.current.style.fontFamily = x)), z && V && F(V);
  };
  wt({ onClose: s, pickerRef: r });
  const Ae = ({
    index: E,
    style: V
  }) => {
    const le = Q[E];
    return /* @__PURE__ */ C.jsx(
      Rt,
      {
        classNames: c,
        emojiItemSize: a,
        emojisPerRow: o,
        fontFamily: x,
        handleEmojiClick: he,
        handleEmojiMouseDown: n,
        handleEmojiMouseLeave: p,
        handleEmojiMouseUp: T,
        onEmojiButtonLongPress: K,
        item: le,
        style: V,
        styles: u
      }
    );
  }, N = m === "light" || m === "dark" ? I[m] : I.custom && I.custom[m] ? I.custom[m] : I.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: x,
    ...u.container
  }, Me = {
    display: "flex",
    marginBottom: "8px",
    overflowX: "auto",
    fontFamily: x,
    ...u.tabs
  }, Fe = (E) => ({
    flexShrink: 0,
    padding: "6px 10px",
    marginRight: "4px",
    backgroundColor: E ? N.tabActiveBackgroundColor : "transparent",
    color: N.textColor,
    border: `1px solid ${E ? N.tabActiveBorderColor : N.borderColor}`,
    borderRadius: "6px",
    cursor: "pointer",
    fontWeight: E ? "bold" : "normal",
    fontSize: "1rem",
    whiteSpace: "nowrap",
    ...E ? u.activeTabButton : u.tabButton
  }), Le = {
    width: "90%",
    padding: "8px",
    marginBottom: "8px",
    border: `"1px solid ${N.inputBorderColor}`,
    borderRadius: "4px",
    backgroundColor: N.backgroundColor,
    color: N.textColor,
    ...u.searchInput
  }, pe = {
    textAlign: "center",
    color: N.noResultsTextColor,
    flexGrow: 1,
    ...u.noResultsMessage
  };
  return /* @__PURE__ */ C.jsxs(
    "div",
    {
      ref: r,
      style: Ne,
      className: `${c.container || ""} emoji-picker-theme-${m}`,
      "data-theme": m,
      "data-lang": y,
      dir: y === "en" ? "ltr" : "rtl",
      children: [
        /* @__PURE__ */ C.jsx("div", { style: Me, className: c.tabs, ref: te, children: D.map((E) => /* @__PURE__ */ C.jsx(
          "button",
          {
            onClick: () => q(E),
            style: Fe(E === $),
            className: E === $ ? c.activeTabButton : c.tabButton,
            children: w && Ie[E] ? Ie[E] : E
          },
          E
        )) }),
        /* @__PURE__ */ C.jsx(
          "input",
          {
            type: "text",
            placeholder: v,
            value: X,
            onChange: (E) => Y(E.target.value),
            style: Le,
            className: c.searchInput
          }
        ),
        e === "pending" && /* @__PURE__ */ C.jsx("div", { style: pe, children: /* @__PURE__ */ C.jsx(kt, {}) }),
        Q.length === 0 && e === "failed" && /* @__PURE__ */ C.jsx("div", { style: pe, className: c.noResultsMessage, children: j }),
        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((E, V) => /* @__PURE__ */ C.jsx(
              "button",
              {
                onClick: () => {
                  he(E.emoji), A(!1);
                },
                title: E.name,
                style: {
                  background: "none",
                  border: "none",
                  fontSize: "1.4rem",
                  margin: "2px 8px",
                  padding: "8px",
                  cursor: "pointer",
                  textAlign: "center",
                  fontFamily: x
                },
                children: E.emoji
              },
              `skin-tone-variant-${V}${E.name + E.code.join("-")}`
            ))
          }
        ),
        Q.length !== 0 && e === "success" && /* @__PURE__ */ C.jsx(
          it,
          {
            height: k,
            itemCount: Q.length,
            itemSize: a,
            width: "100%",
            style: u.emojiList,
            className: c.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: d } = t.current;
      i({
        width: s,
        height: d
      });
    }
  }, [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 = ({
  lang: t,
  showEmojiPicker: e
}) => {
  const [r, i] = M({ emojis: {} }), [s, d] = M("pending"), u = (c) => {
    const f = { ...c };
    return Object.keys(f.emojis).forEach((h) => {
      const m = f.emojis[h];
      Object.keys(m).forEach((y) => {
        const w = m[y], S = [], g = {};
        w.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]);
        }), m[y] = S;
      });
    }), f;
  };
  return W(() => {
    if (!e) return;
    let c = !1;
    return (async () => {
      d("pending");
      try {
        const m = await fetch(`https://cdn.jsdelivr.net/gh/Mahmoud-walid/react-emoji-toggle-button@emoji-lang-data/emoji-lang-data/categories.with.modifiers${t === "ar" ? "-ar" : ""}.json`);
        if (!m.ok)
          throw new Error(`Failed to load emoji data: ${m.status}`);
        const y = await m.json(), w = u(y);
        c || (i(w), d("success"));
      } catch (h) {
        console.error("Error loading emoji data:", h), c || d("failed");
      }
    })(), () => {
      c = !0;
    };
  }, [t, e]), { emojiData: r, isLoading: s };
}, Nt = ({
  lang: t,
  textInputRef: e
}) => {
  W(() => {
    e.current && (e.current.dir = t === "en" ? "ltr" : "rtl", e.current.placeholder = t === "en" ? "Type a message..." : "اكتب رسالة...");
  }, [t, e]);
}, Mt = () => {
  const [t, e] = M(!1), [r, i] = M("😀"), s = J(null);
  return {
    showEmojiPicker: t,
    setShowEmojiPicker: e,
    currentEmoji: r,
    setCurrentEmoji: i,
    pickerRef: s
  };
}, Ft = () => /* @__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;
  }
}

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