font-controls 1.1.0 → 1.3.0

package/dist/font-controls.js

@@ -1,6 +1,6 @@
-import Ie, { useState as me, useEffect as Xe } from "react";
+import Ie, { useState as me, useRef as St, useEffect as Xe } from "react";
 import st from "react-dom";
-function St(e) {
+function xt(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
 var Me = { exports: {} }, de = {};
@@ -14,7 +14,7 @@ var Me = { exports: {} }, de = {};
  * LICENSE file in the root directory of this source tree.
  */
 var qe;
-function xt() {
+function Tt() {
   if (qe) return de;
   qe = 1;
   var e = Symbol.for("react.transitional.element"), t = Symbol.for("react.fragment");
@@ -22,8 +22,8 @@ function xt() {
     var d = null;
     if (i !== void 0 && (d = "" + i), a.key !== void 0 && (d = "" + a.key), "key" in a) {
       i = {};
-      for (var u in a)
-        u !== "key" && (i[u] = a[u]);
+      for (var c in a)
+        c !== "key" && (i[c] = a[c]);
     } else i = a;
     return a = i.ref, {
       $$typeof: e,
@@ -46,7 +46,7 @@ var pe = {};
  * LICENSE file in the root directory of this source tree.
  */
 var Be;
-function Tt() {
+function Et() {
   return Be || (Be = 1, process.env.NODE_ENV !== "production" && function() {
     function e(n) {
       if (n == null) return null;
@@ -136,7 +136,7 @@ function Tt() {
       }
       return n.key !== void 0;
     }
-    function u(n, f) {
+    function c(n, f) {
       function y() {
         X || (X = !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)",
@@ -223,7 +223,7 @@ React keys must be passed directly to JSX without using spread:
         for (var D in f)
           D !== "key" && (y[D] = f[D]);
       } else y = f;
-      return b && u(
+      return b && c(
         y,
         typeof n == "function" ? n.displayName || n.name || "Unknown" : n
       ), g(
@@ -276,8 +276,8 @@ React keys must be passed directly to JSX without using spread:
     };
   }()), pe;
 }
-process.env.NODE_ENV === "production" ? Me.exports = xt() : Me.exports = Tt();
-var c = Me.exports, be = { exports: {} }, it = {}, ke = { exports: {} }, ye = { exports: {} }, M = {};
+process.env.NODE_ENV === "production" ? Me.exports = Tt() : Me.exports = Et();
+var u = Me.exports, be = { exports: {} }, it = {}, ke = { exports: {} }, ye = { exports: {} }, M = {};
 /** @license React v16.13.1
  * react-is.production.min.js
  *
@@ -287,10 +287,10 @@ var c = Me.exports, be = { exports: {} }, it = {}, ke = { exports: {} }, ye = {
  * LICENSE file in the root directory of this source tree.
  */
 var He;
-function Et() {
+function _t() {
   if (He) return M;
   He = 1;
-  var e = typeof Symbol == "function" && Symbol.for, t = e ? Symbol.for("react.element") : 60103, r = e ? Symbol.for("react.portal") : 60106, o = e ? Symbol.for("react.fragment") : 60107, a = e ? Symbol.for("react.strict_mode") : 60108, i = e ? Symbol.for("react.profiler") : 60114, d = e ? Symbol.for("react.provider") : 60109, u = e ? Symbol.for("react.context") : 60110, h = e ? Symbol.for("react.async_mode") : 60111, g = e ? Symbol.for("react.concurrent_mode") : 60111, v = e ? Symbol.for("react.forward_ref") : 60112, P = e ? Symbol.for("react.suspense") : 60113, A = e ? Symbol.for("react.suspense_list") : 60120, N = e ? Symbol.for("react.memo") : 60115, I = e ? Symbol.for("react.lazy") : 60116, $ = e ? Symbol.for("react.block") : 60121, T = e ? Symbol.for("react.fundamental") : 60117, _ = e ? Symbol.for("react.responder") : 60118, x = e ? Symbol.for("react.scope") : 60119;
+  var e = typeof Symbol == "function" && Symbol.for, t = e ? Symbol.for("react.element") : 60103, r = e ? Symbol.for("react.portal") : 60106, o = e ? Symbol.for("react.fragment") : 60107, a = e ? Symbol.for("react.strict_mode") : 60108, i = e ? Symbol.for("react.profiler") : 60114, d = e ? Symbol.for("react.provider") : 60109, c = e ? Symbol.for("react.context") : 60110, h = e ? Symbol.for("react.async_mode") : 60111, g = e ? Symbol.for("react.concurrent_mode") : 60111, v = e ? Symbol.for("react.forward_ref") : 60112, P = e ? Symbol.for("react.suspense") : 60113, A = e ? Symbol.for("react.suspense_list") : 60120, N = e ? Symbol.for("react.memo") : 60115, I = e ? Symbol.for("react.lazy") : 60116, $ = e ? Symbol.for("react.block") : 60121, T = e ? Symbol.for("react.fundamental") : 60117, _ = e ? Symbol.for("react.responder") : 60118, x = e ? Symbol.for("react.scope") : 60119;
   function E(s) {
     if (typeof s == "object" && s !== null) {
       var R = s.$$typeof;
@@ -306,7 +306,7 @@ function Et() {
               return s;
             default:
               switch (s = s && s.$$typeof, s) {
-                case u:
+                case c:
                 case v:
                 case I:
                 case N:
@@ -324,10 +324,10 @@ function Et() {
   function S(s) {
     return E(s) === g;
   }
-  return M.AsyncMode = h, M.ConcurrentMode = g, M.ContextConsumer = u, M.ContextProvider = d, M.Element = t, M.ForwardRef = v, M.Fragment = o, M.Lazy = I, M.Memo = N, M.Portal = r, M.Profiler = i, M.StrictMode = a, M.Suspense = P, M.isAsyncMode = function(s) {
+  return M.AsyncMode = h, M.ConcurrentMode = g, M.ContextConsumer = c, M.ContextProvider = d, M.Element = t, M.ForwardRef = v, M.Fragment = o, M.Lazy = I, M.Memo = N, M.Portal = r, M.Profiler = i, M.StrictMode = a, M.Suspense = P, M.isAsyncMode = function(s) {
     return S(s) || E(s) === h;
   }, M.isConcurrentMode = S, M.isContextConsumer = function(s) {
-    return E(s) === u;
+    return E(s) === c;
   }, M.isContextProvider = function(s) {
     return E(s) === d;
   }, M.isElement = function(s) {
@@ -349,7 +349,7 @@ function Et() {
   }, M.isSuspense = function(s) {
     return E(s) === P;
   }, M.isValidElementType = function(s) {
-    return typeof s == "string" || typeof s == "function" || s === o || s === g || s === i || s === a || s === P || s === A || typeof s == "object" && s !== null && (s.$$typeof === I || s.$$typeof === N || s.$$typeof === d || s.$$typeof === u || s.$$typeof === v || s.$$typeof === T || s.$$typeof === _ || s.$$typeof === x || s.$$typeof === $);
+    return typeof s == "string" || typeof s == "function" || s === o || s === g || s === i || s === a || s === P || s === A || typeof s == "object" && s !== null && (s.$$typeof === I || s.$$typeof === N || s.$$typeof === d || s.$$typeof === c || s.$$typeof === v || s.$$typeof === T || s.$$typeof === _ || s.$$typeof === x || s.$$typeof === $);
   }, M.typeOf = E, M;
 }
 var k = {};
@@ -362,12 +362,12 @@ var k = {};
  * LICENSE file in the root directory of this source tree.
  */
 var ze;
-function _t() {
+function wt() {
   return ze || (ze = 1, process.env.NODE_ENV !== "production" && function() {
-    var e = typeof Symbol == "function" && Symbol.for, t = e ? Symbol.for("react.element") : 60103, r = e ? Symbol.for("react.portal") : 60106, o = e ? Symbol.for("react.fragment") : 60107, a = e ? Symbol.for("react.strict_mode") : 60108, i = e ? Symbol.for("react.profiler") : 60114, d = e ? Symbol.for("react.provider") : 60109, u = e ? Symbol.for("react.context") : 60110, h = e ? Symbol.for("react.async_mode") : 60111, g = e ? Symbol.for("react.concurrent_mode") : 60111, v = e ? Symbol.for("react.forward_ref") : 60112, P = e ? Symbol.for("react.suspense") : 60113, A = e ? Symbol.for("react.suspense_list") : 60120, N = e ? Symbol.for("react.memo") : 60115, I = e ? Symbol.for("react.lazy") : 60116, $ = e ? Symbol.for("react.block") : 60121, T = e ? Symbol.for("react.fundamental") : 60117, _ = e ? Symbol.for("react.responder") : 60118, x = e ? Symbol.for("react.scope") : 60119;
+    var e = typeof Symbol == "function" && Symbol.for, t = e ? Symbol.for("react.element") : 60103, r = e ? Symbol.for("react.portal") : 60106, o = e ? Symbol.for("react.fragment") : 60107, a = e ? Symbol.for("react.strict_mode") : 60108, i = e ? Symbol.for("react.profiler") : 60114, d = e ? Symbol.for("react.provider") : 60109, c = e ? Symbol.for("react.context") : 60110, h = e ? Symbol.for("react.async_mode") : 60111, g = e ? Symbol.for("react.concurrent_mode") : 60111, v = e ? Symbol.for("react.forward_ref") : 60112, P = e ? Symbol.for("react.suspense") : 60113, A = e ? Symbol.for("react.suspense_list") : 60120, N = e ? Symbol.for("react.memo") : 60115, I = e ? Symbol.for("react.lazy") : 60116, $ = e ? Symbol.for("react.block") : 60121, T = e ? Symbol.for("react.fundamental") : 60117, _ = e ? Symbol.for("react.responder") : 60118, x = e ? Symbol.for("react.scope") : 60119;
     function E(p) {
       return typeof p == "string" || typeof p == "function" || // Note: its typeof might be other than 'symbol' or 'number' if it's a polyfill.
-      p === o || p === g || p === i || p === a || p === P || p === A || typeof p == "object" && p !== null && (p.$$typeof === I || p.$$typeof === N || p.$$typeof === d || p.$$typeof === u || p.$$typeof === v || p.$$typeof === T || p.$$typeof === _ || p.$$typeof === x || p.$$typeof === $);
+      p === o || p === g || p === i || p === a || p === P || p === A || typeof p == "object" && p !== null && (p.$$typeof === I || p.$$typeof === N || p.$$typeof === d || p.$$typeof === c || p.$$typeof === v || p.$$typeof === T || p.$$typeof === _ || p.$$typeof === x || p.$$typeof === $);
     }
     function S(p) {
       if (typeof p == "object" && p !== null) {
@@ -386,7 +386,7 @@ function _t() {
               default:
                 var Ue = ge && ge.$$typeof;
                 switch (Ue) {
-                  case u:
+                  case c:
                   case v:
                   case I:
                   case N:
@@ -401,7 +401,7 @@ function _t() {
         }
       }
     }
-    var s = h, R = g, L = u, U = d, Y = t, W = v, ne = o, oe = I, ae = N, K = r, se = i, X = a, V = P, Q = !1;
+    var s = h, R = g, L = c, U = d, Y = t, W = v, ne = o, oe = I, ae = N, K = r, se = i, X = a, V = P, Q = !1;
     function ie(p) {
       return Q || (Q = !0, console.warn("The ReactIs.isAsyncMode() alias has been deprecated, and will be removed in React 17+. Update your code to use ReactIs.isConcurrentMode() instead. It has the exact same API.")), l(p) || S(p) === h;
     }
@@ -409,7 +409,7 @@ function _t() {
       return S(p) === g;
     }
     function n(p) {
-      return S(p) === u;
+      return S(p) === c;
     }
     function f(p) {
       return S(p) === d;
@@ -446,7 +446,7 @@ function _t() {
 }
 var Ve;
 function lt() {
-  return Ve || (Ve = 1, process.env.NODE_ENV === "production" ? ye.exports = Et() : ye.exports = _t()), ye.exports;
+  return Ve || (Ve = 1, process.env.NODE_ENV === "production" ? ye.exports = _t() : ye.exports = wt()), ye.exports;
 }
 /*
 object-assign
@@ -454,7 +454,7 @@ object-assign
 @license MIT
 */
 var Ee, Ge;
-function wt() {
+function Ct() {
   if (Ge) return Ee;
   Ge = 1;
   var e = Object.getOwnPropertySymbols, t = Object.prototype.hasOwnProperty, r = Object.prototype.propertyIsEnumerable;
@@ -470,8 +470,8 @@ function wt() {
       var i = new String("abc");
       if (i[5] = "de", Object.getOwnPropertyNames(i)[0] === "5")
         return !1;
-      for (var d = {}, u = 0; u < 10; u++)
-        d["_" + String.fromCharCode(u)] = u;
+      for (var d = {}, c = 0; c < 10; c++)
+        d["_" + String.fromCharCode(c)] = c;
       var h = Object.getOwnPropertyNames(d).map(function(v) {
         return d[v];
       });
@@ -486,14 +486,14 @@ function wt() {
     }
   }
   return Ee = a() ? Object.assign : function(i, d) {
-    for (var u, h = o(i), g, v = 1; v < arguments.length; v++) {
-      u = Object(arguments[v]);
-      for (var P in u)
-        t.call(u, P) && (h[P] = u[P]);
+    for (var c, h = o(i), g, v = 1; v < arguments.length; v++) {
+      c = Object(arguments[v]);
+      for (var P in c)
+        t.call(c, P) && (h[P] = c[P]);
       if (e) {
-        g = e(u);
+        g = e(c);
         for (var A = 0; A < g.length; A++)
-          r.call(u, g[A]) && (h[g[A]] = u[g[A]]);
+          r.call(c, g[A]) && (h[g[A]] = c[g[A]]);
       }
     }
     return h;
@@ -511,7 +511,7 @@ function ct() {
   return Ke || (Ke = 1, we = Function.call.bind(Object.prototype.hasOwnProperty)), we;
 }
 var Ce, Ze;
-function Ct() {
+function Pt() {
   if (Ze) return Ce;
   Ze = 1;
   var e = function() {
@@ -527,7 +527,7 @@ function Ct() {
       }
     };
   }
-  function a(i, d, u, h, g) {
+  function a(i, d, c, h, g) {
     if (process.env.NODE_ENV !== "production") {
       for (var v in i)
         if (o(i, v)) {
@@ -535,21 +535,21 @@ function Ct() {
           try {
             if (typeof i[v] != "function") {
               var A = Error(
-                (h || "React class") + ": " + u + " type `" + v + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof i[v] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`."
+                (h || "React class") + ": " + c + " type `" + v + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof i[v] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`."
               );
               throw A.name = "Invariant Violation", A;
             }
-            P = i[v](d, v, h, u, null, t);
+            P = i[v](d, v, h, c, null, t);
           } catch (I) {
             P = I;
           }
           if (P && !(P instanceof Error) && e(
-            (h || "React class") + ": type specification of " + u + " `" + v + "` is invalid; the type checker function must return `null` or an `Error` but returned a " + typeof P + ". You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument)."
+            (h || "React class") + ": type specification of " + c + " `" + v + "` is invalid; the type checker function must return `null` or an `Error` but returned a " + typeof P + ". You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument)."
           ), P instanceof Error && !(P.message in r)) {
             r[P.message] = !0;
             var N = g ? g() : "";
             e(
-              "Failed " + u + " type: " + P.message + (N ?? "")
+              "Failed " + c + " type: " + P.message + (N ?? "")
             );
           }
         }
@@ -560,13 +560,13 @@ function Ct() {
   }, Ce = a, Ce;
 }
 var Pe, Qe;
-function Pt() {
+function jt() {
   if (Qe) return Pe;
   Qe = 1;
-  var e = lt(), t = wt(), r = Fe(), o = ct(), a = Ct(), i = function() {
+  var e = lt(), t = Ct(), r = Fe(), o = ct(), a = Pt(), i = function() {
   };
-  process.env.NODE_ENV !== "production" && (i = function(u) {
-    var h = "Warning: " + u;
+  process.env.NODE_ENV !== "production" && (i = function(c) {
+    var h = "Warning: " + c;
     typeof console < "u" && console.error(h);
     try {
       throw new Error(h);
@@ -576,7 +576,7 @@ function Pt() {
   function d() {
     return null;
   }
-  return Pe = function(u, h) {
+  return Pe = function(c, h) {
     var g = typeof Symbol == "function" && Symbol.iterator, v = "@@iterator";
     function P(l) {
       var n = l && (g && l[g] || l[v]);
@@ -672,7 +672,7 @@ function Pt() {
     function S() {
       function l(n, f, y, m, j) {
         var w = n[f];
-        if (!u(w)) {
+        if (!c(w)) {
           var b = X(w);
           return new $("Invalid " + m + " `" + j + "` of type " + ("`" + b + "` supplied to `" + y + "`, expected a single ReactElement."));
         }
@@ -819,7 +819,7 @@ Valid keys: ` + JSON.stringify(Object.keys(l), null, "  ")
         case "object":
           if (Array.isArray(l))
             return l.every(K);
-          if (l === null || u(l))
+          if (l === null || c(l))
             return !0;
           var n = P(l);
           if (n) {
@@ -881,7 +881,7 @@ Valid keys: ` + JSON.stringify(Object.keys(l), null, "  ")
   }, Pe;
 }
 var je, et;
-function jt() {
+function Rt() {
   if (et) return je;
   et = 1;
   var e = Fe();
@@ -890,7 +890,7 @@ function jt() {
   function r() {
   }
   return r.resetWarningCache = t, je = function() {
-    function o(d, u, h, g, v, P) {
+    function o(d, c, h, g, v, P) {
       if (P !== e) {
         var A = new Error(
           "Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types"
@@ -929,10 +929,10 @@ function jt() {
   }, je;
 }
 if (process.env.NODE_ENV !== "production") {
-  var Rt = lt(), Ot = !0;
-  ke.exports = Pt()(Rt.isElement, Ot);
+  var Ot = lt(), Dt = !0;
+  ke.exports = jt()(Ot.isElement, Dt);
 } else
-  ke.exports = jt()();
+  ke.exports = Rt()();
 var ut = ke.exports, $e = { exports: {} };
 function ft(e) {
   var t, r, o = "";
@@ -948,29 +948,29 @@ function tt() {
   return o;
 }
 $e.exports = tt, $e.exports.clsx = tt;
-var Dt = $e.exports, F = {}, te = {};
+var Nt = $e.exports, F = {}, te = {};
 Object.defineProperty(te, "__esModule", {
   value: !0
 });
-te.dontSetMe = $t;
-te.findInArray = Nt;
-te.int = kt;
-te.isFunction = At;
-te.isNum = Mt;
-function Nt(e, t) {
+te.dontSetMe = It;
+te.findInArray = At;
+te.int = $t;
+te.isFunction = Mt;
+te.isNum = kt;
+function At(e, t) {
   for (let r = 0, o = e.length; r < o; r++)
     if (t.apply(t, [e[r], r, e])) return e[r];
 }
-function At(e) {
+function Mt(e) {
   return typeof e == "function" || Object.prototype.toString.call(e) === "[object Function]";
 }
-function Mt(e) {
+function kt(e) {
   return typeof e == "number" && !isNaN(e);
 }
-function kt(e) {
+function $t(e) {
   return parseInt(e, 10);
 }
-function $t(e, t, r) {
+function It(e, t, r) {
   if (e[t])
     return new Error(`Invalid prop ${t} passed to ${r} - do not set this, set it on the child.`);
 }
@@ -979,7 +979,7 @@ Object.defineProperty(ue, "__esModule", {
   value: !0
 });
 ue.browserPrefixToKey = pt;
-ue.browserPrefixToStyle = It;
+ue.browserPrefixToStyle = Ft;
 ue.default = void 0;
 ue.getPrefix = dt;
 const Re = ["Moz", "Webkit", "O", "ms"];
@@ -994,12 +994,12 @@ function dt() {
   return "";
 }
 function pt(e, t) {
-  return t ? `${t}${Ft(e)}` : e;
+  return t ? `${t}${Yt(e)}` : e;
 }
-function It(e, t) {
+function Ft(e, t) {
   return t ? `-${t.toLowerCase()}-${e}` : e;
 }
-function Ft(e) {
+function Yt(e) {
   let t = "", r = !0;
   for (let o = 0; o < e.length; o++)
     r ? (t += e[o].toUpperCase(), r = !1) : e[o] === "-" ? r = !0 : t += e[o];
@@ -1010,35 +1010,35 @@ Object.defineProperty(F, "__esModule", {
   value: !0
 });
 F.addClassName = gt;
-F.addEvent = Wt;
-F.addUserSelectStyles = Kt;
-F.createCSSTransform = zt;
-F.createSVGTransform = Vt;
-F.getTouch = Gt;
-F.getTouchIdentifier = Jt;
+F.addEvent = Lt;
+F.addUserSelectStyles = Zt;
+F.createCSSTransform = Vt;
+F.createSVGTransform = Gt;
+F.getTouch = Jt;
+F.getTouchIdentifier = Kt;
 F.getTranslation = Ye;
-F.innerHeight = qt;
-F.innerWidth = Bt;
+F.innerHeight = Bt;
+F.innerWidth = Ht;
 F.matchesSelector = mt;
-F.matchesSelectorAndParentsTo = Yt;
-F.offsetXYFromParent = Ht;
-F.outerHeight = Ut;
-F.outerWidth = Xt;
+F.matchesSelectorAndParentsTo = Wt;
+F.offsetXYFromParent = zt;
+F.outerHeight = Xt;
+F.outerWidth = qt;
 F.removeClassName = yt;
-F.removeEvent = Lt;
-F.scheduleRemoveUserSelectStyles = Zt;
+F.removeEvent = Ut;
+F.scheduleRemoveUserSelectStyles = Qt;
 var J = te, rt = ht(ue);
 function ht(e, t) {
   if (typeof WeakMap == "function") var r = /* @__PURE__ */ new WeakMap(), o = /* @__PURE__ */ new WeakMap();
   return (ht = function(a, i) {
     if (!i && a && a.__esModule) return a;
-    var d, u, h = { __proto__: null, default: a };
+    var d, c, h = { __proto__: null, default: a };
     if (a === null || typeof a != "object" && typeof a != "function") return h;
     if (d = i ? o : r) {
       if (d.has(a)) return d.get(a);
       d.set(a, h);
     }
-    for (const g in a) g !== "default" && {}.hasOwnProperty.call(a, g) && ((u = (d = Object.defineProperty) && Object.getOwnPropertyDescriptor(a, g)) && (u.get || u.set) ? d(h, g, u) : h[g] = a[g]);
+    for (const g in a) g !== "default" && {}.hasOwnProperty.call(a, g) && ((c = (d = Object.defineProperty) && Object.getOwnPropertyDescriptor(a, g)) && (c.get || c.set) ? d(h, g, c) : h[g] = a[g]);
     return h;
   })(e, t);
 }
@@ -1048,7 +1048,7 @@ function mt(e, t) {
     return (0, J.isFunction)(e[r]);
   })), (0, J.isFunction)(e[ve]) ? e[ve](t) : !1;
 }
-function Yt(e, t, r) {
+function Wt(e, t, r) {
   let o = e;
   do {
     if (mt(o, t)) return !0;
@@ -1057,7 +1057,7 @@ function Yt(e, t, r) {
   } while (o);
   return !1;
 }
-function Wt(e, t, r, o) {
+function Lt(e, t, r, o) {
   if (!e) return;
   const a = {
     capture: !0,
@@ -1065,7 +1065,7 @@ function Wt(e, t, r, o) {
   };
   e.addEventListener ? e.addEventListener(t, r, a) : e.attachEvent ? e.attachEvent("on" + t, r) : e["on" + t] = r;
 }
-function Lt(e, t, r, o) {
+function Ut(e, t, r, o) {
   if (!e) return;
   const a = {
     capture: !0,
@@ -1073,27 +1073,27 @@ function Lt(e, t, r, o) {
   };
   e.removeEventListener ? e.removeEventListener(t, r, a) : e.detachEvent ? e.detachEvent("on" + t, r) : e["on" + t] = null;
 }
-function Ut(e) {
+function Xt(e) {
   let t = e.clientHeight;
   const r = e.ownerDocument.defaultView.getComputedStyle(e);
   return t += (0, J.int)(r.borderTopWidth), t += (0, J.int)(r.borderBottomWidth), t;
 }
-function Xt(e) {
+function qt(e) {
   let t = e.clientWidth;
   const r = e.ownerDocument.defaultView.getComputedStyle(e);
   return t += (0, J.int)(r.borderLeftWidth), t += (0, J.int)(r.borderRightWidth), t;
 }
-function qt(e) {
+function Bt(e) {
   let t = e.clientHeight;
   const r = e.ownerDocument.defaultView.getComputedStyle(e);
   return t -= (0, J.int)(r.paddingTop), t -= (0, J.int)(r.paddingBottom), t;
 }
-function Bt(e) {
+function Ht(e) {
   let t = e.clientWidth;
   const r = e.ownerDocument.defaultView.getComputedStyle(e);
   return t -= (0, J.int)(r.paddingLeft), t -= (0, J.int)(r.paddingRight), t;
 }
-function Ht(e, t, r) {
+function zt(e, t, r) {
   const a = t === t.ownerDocument.body ? {
     left: 0,
     top: 0
@@ -1103,13 +1103,13 @@ function Ht(e, t, r) {
     y: d
   };
 }
-function zt(e, t) {
+function Vt(e, t) {
   const r = Ye(e, t, "px");
   return {
     [(0, rt.browserPrefixToKey)("transform", rt.default)]: r
   };
 }
-function Vt(e, t) {
+function Gt(e, t) {
   return Ye(e, t, "");
 }
 function Ye(e, t, r) {
@@ -1118,26 +1118,26 @@ function Ye(e, t, r) {
     y: a
   } = e, i = `translate(${o}${r},${a}${r})`;
   if (t) {
-    const d = `${typeof t.x == "string" ? t.x : t.x + r}`, u = `${typeof t.y == "string" ? t.y : t.y + r}`;
-    i = `translate(${d}, ${u})` + i;
+    const d = `${typeof t.x == "string" ? t.x : t.x + r}`, c = `${typeof t.y == "string" ? t.y : t.y + r}`;
+    i = `translate(${d}, ${c})` + i;
   }
   return i;
 }
-function Gt(e, t) {
+function Jt(e, t) {
   return e.targetTouches && (0, J.findInArray)(e.targetTouches, (r) => t === r.identifier) || e.changedTouches && (0, J.findInArray)(e.changedTouches, (r) => t === r.identifier);
 }
-function Jt(e) {
+function Kt(e) {
   if (e.targetTouches && e.targetTouches[0]) return e.targetTouches[0].identifier;
   if (e.changedTouches && e.changedTouches[0]) return e.changedTouches[0].identifier;
 }
-function Kt(e) {
+function Zt(e) {
   if (!e) return;
   let t = e.getElementById("react-draggable-style-el");
   t || (t = e.createElement("style"), t.type = "text/css", t.id = "react-draggable-style-el", t.innerHTML = `.react-draggable-transparent-selection *::-moz-selection {all: inherit;}
 `, t.innerHTML += `.react-draggable-transparent-selection *::selection {all: inherit;}
 `, e.getElementsByTagName("head")[0].appendChild(t)), e.body && gt(e.body, "react-draggable-transparent-selection");
 }
-function Zt(e) {
+function Qt(e) {
   window.requestAnimationFrame ? window.requestAnimationFrame(() => {
     nt(e);
   }) : nt(e);
@@ -1164,29 +1164,29 @@ var re = {};
 Object.defineProperty(re, "__esModule", {
   value: !0
 });
-re.canDragX = tr;
-re.canDragY = rr;
-re.createCoreData = or;
-re.createDraggableData = ar;
-re.getBoundPosition = Qt;
-re.getControlPosition = nr;
-re.snapToGrid = er;
+re.canDragX = rr;
+re.canDragY = nr;
+re.createCoreData = ar;
+re.createDraggableData = sr;
+re.getBoundPosition = er;
+re.getControlPosition = or;
+re.snapToGrid = tr;
 var G = te, fe = F;
-function Qt(e, t, r) {
+function er(e, t, r) {
   if (!e.props.bounds) return [t, r];
   let {
     bounds: o
   } = e.props;
-  o = typeof o == "string" ? o : sr(o);
+  o = typeof o == "string" ? o : ir(o);
   const a = We(e);
   if (typeof o == "string") {
     const {
       ownerDocument: i
     } = a, d = i.defaultView;
-    let u;
-    if (o === "parent" ? u = a.parentNode : u = a.getRootNode().querySelector(o), !(u instanceof d.HTMLElement))
+    let c;
+    if (o === "parent" ? c = a.parentNode : c = a.getRootNode().querySelector(o), !(c instanceof d.HTMLElement))
       throw new Error('Bounds selector "' + o + '" could not find an element.');
-    const h = u, g = d.getComputedStyle(a), v = d.getComputedStyle(h);
+    const h = c, g = d.getComputedStyle(a), v = d.getComputedStyle(h);
     o = {
       left: -a.offsetLeft + (0, G.int)(v.paddingLeft) + (0, G.int)(g.marginLeft),
       top: -a.offsetTop + (0, G.int)(v.paddingTop) + (0, G.int)(g.marginTop),
@@ -1196,23 +1196,23 @@ function Qt(e, t, r) {
   }
   return (0, G.isNum)(o.right) && (t = Math.min(t, o.right)), (0, G.isNum)(o.bottom) && (r = Math.min(r, o.bottom)), (0, G.isNum)(o.left) && (t = Math.max(t, o.left)), (0, G.isNum)(o.top) && (r = Math.max(r, o.top)), [t, r];
 }
-function er(e, t, r) {
+function tr(e, t, r) {
   const o = Math.round(t / e[0]) * e[0], a = Math.round(r / e[1]) * e[1];
   return [o, a];
 }
-function tr(e) {
+function rr(e) {
   return e.props.axis === "both" || e.props.axis === "x";
 }
-function rr(e) {
+function nr(e) {
   return e.props.axis === "both" || e.props.axis === "y";
 }
-function nr(e, t, r) {
+function or(e, t, r) {
   const o = typeof t == "number" ? (0, fe.getTouch)(e, t) : null;
   if (typeof t == "number" && !o) return null;
   const a = We(r), i = r.props.offsetParent || a.offsetParent || a.ownerDocument.body;
   return (0, fe.offsetXYFromParent)(o || e, i, r.props.scale);
 }
-function or(e, t, r) {
+function ar(e, t, r) {
   const o = !(0, G.isNum)(e.lastX), a = We(e);
   return o ? {
     node: a,
@@ -1232,7 +1232,7 @@ function or(e, t, r) {
     y: r
   };
 }
-function ar(e, t) {
+function sr(e, t) {
   const r = e.props.scale;
   return {
     node: t.node,
@@ -1244,7 +1244,7 @@ function ar(e, t) {
     lastY: e.state.y
   };
 }
-function sr(e) {
+function ir(e) {
   return {
     left: e.left,
     top: e.top,
@@ -1262,14 +1262,14 @@ var Se = {}, xe = {};
 Object.defineProperty(xe, "__esModule", {
   value: !0
 });
-xe.default = ir;
-function ir() {
+xe.default = lr;
+function lr() {
 }
 Object.defineProperty(Se, "__esModule", {
   value: !0
 });
 Se.default = void 0;
-var Oe = vt(Ie), B = Le(ut), lr = Le(st), q = F, le = re, De = te, he = Le(xe);
+var Oe = vt(Ie), B = Le(ut), cr = Le(st), q = F, le = re, De = te, he = Le(xe);
 function Le(e) {
   return e && e.__esModule ? e : { default: e };
 }
@@ -1277,24 +1277,24 @@ function vt(e, t) {
   if (typeof WeakMap == "function") var r = /* @__PURE__ */ new WeakMap(), o = /* @__PURE__ */ new WeakMap();
   return (vt = function(a, i) {
     if (!i && a && a.__esModule) return a;
-    var d, u, h = { __proto__: null, default: a };
+    var d, c, h = { __proto__: null, default: a };
     if (a === null || typeof a != "object" && typeof a != "function") return h;
     if (d = i ? o : r) {
       if (d.has(a)) return d.get(a);
       d.set(a, h);
     }
-    for (const g in a) g !== "default" && {}.hasOwnProperty.call(a, g) && ((u = (d = Object.defineProperty) && Object.getOwnPropertyDescriptor(a, g)) && (u.get || u.set) ? d(h, g, u) : h[g] = a[g]);
+    for (const g in a) g !== "default" && {}.hasOwnProperty.call(a, g) && ((c = (d = Object.defineProperty) && Object.getOwnPropertyDescriptor(a, g)) && (c.get || c.set) ? d(h, g, c) : h[g] = a[g]);
     return h;
   })(e, t);
 }
 function H(e, t, r) {
-  return (t = cr(t)) in e ? Object.defineProperty(e, t, { value: r, enumerable: !0, configurable: !0, writable: !0 }) : e[t] = r, e;
+  return (t = ur(t)) in e ? Object.defineProperty(e, t, { value: r, enumerable: !0, configurable: !0, writable: !0 }) : e[t] = r, e;
 }
-function cr(e) {
-  var t = ur(e, "string");
+function ur(e) {
+  var t = fr(e, "string");
   return typeof t == "symbol" ? t : t + "";
 }
-function ur(e, t) {
+function fr(e, t) {
   if (typeof e != "object" || !e) return e;
   var r = e[Symbol.toPrimitive];
   if (r !== void 0) {
@@ -1335,9 +1335,9 @@ let ce = Z.mouse, Te = class extends Oe.Component {
       if (i == null) return;
       const {
         x: d,
-        y: u
-      } = i, h = (0, le.createCoreData)(this, d, u);
-      (0, he.default)("DraggableCore: handleDragStart: %j", h), (0, he.default)("calling", this.props.onStart), !(this.props.onStart(t, h) === !1 || this.mounted === !1) && (this.props.enableUserSelectHack && (0, q.addUserSelectStyles)(o), this.dragging = !0, this.lastX = d, this.lastY = u, (0, q.addEvent)(o, ce.move, this.handleDrag), (0, q.addEvent)(o, ce.stop, this.handleDragStop));
+        y: c
+      } = i, h = (0, le.createCoreData)(this, d, c);
+      (0, he.default)("DraggableCore: handleDragStart: %j", h), (0, he.default)("calling", this.props.onStart), !(this.props.onStart(t, h) === !1 || this.mounted === !1) && (this.props.enableUserSelectHack && (0, q.addUserSelectStyles)(o), this.dragging = !0, this.lastX = d, this.lastY = c, (0, q.addEvent)(o, ce.move, this.handleDrag), (0, q.addEvent)(o, ce.stop, this.handleDragStop));
     }), H(this, "handleDrag", (t) => {
       const r = (0, le.getControlPosition)(t, this.touchIdentifier, this);
       if (r == null) return;
@@ -1346,9 +1346,9 @@ let ce = Z.mouse, Te = class extends Oe.Component {
         y: a
       } = r;
       if (Array.isArray(this.props.grid)) {
-        let u = o - this.lastX, h = a - this.lastY;
-        if ([u, h] = (0, le.snapToGrid)(this.props.grid, u, h), !u && !h) return;
-        o = this.lastX + u, a = this.lastY + h;
+        let c = o - this.lastX, h = a - this.lastY;
+        if ([c, h] = (0, le.snapToGrid)(this.props.grid, c, h), !c && !h) return;
+        o = this.lastX + c, a = this.lastY + h;
       }
       const i = (0, le.createCoreData)(this, o, a);
       if ((0, he.default)("DraggableCore: handleDrag: %j", i), this.props.onDrag(t, i) === !1 || this.mounted === !1) {
@@ -1375,8 +1375,8 @@ let ce = Z.mouse, Te = class extends Oe.Component {
       }
       const i = (0, le.createCoreData)(this, o, a);
       if (this.props.onStop(t, i) === !1 || this.mounted === !1) return !1;
-      const u = this.findDOMNode();
-      u && this.props.enableUserSelectHack && (0, q.scheduleRemoveUserSelectStyles)(u.ownerDocument), (0, he.default)("DraggableCore: handleDragStop: %j", i), this.dragging = !1, this.lastX = NaN, this.lastY = NaN, u && ((0, he.default)("DraggableCore: Removing handlers"), (0, q.removeEvent)(u.ownerDocument, ce.move, this.handleDrag), (0, q.removeEvent)(u.ownerDocument, ce.stop, this.handleDragStop));
+      const c = this.findDOMNode();
+      c && this.props.enableUserSelectHack && (0, q.scheduleRemoveUserSelectStyles)(c.ownerDocument), (0, he.default)("DraggableCore: handleDragStop: %j", i), this.dragging = !1, this.lastX = NaN, this.lastY = NaN, c && ((0, he.default)("DraggableCore: Removing handlers"), (0, q.removeEvent)(c.ownerDocument, ce.move, this.handleDrag), (0, q.removeEvent)(c.ownerDocument, ce.stop, this.handleDragStop));
     }), H(this, "onMouseDown", (t) => (ce = Z.mouse, this.handleDragStart(t))), H(this, "onMouseUp", (t) => (ce = Z.mouse, this.handleDragStop(t))), H(this, "onTouchStart", (t) => (ce = Z.touch, this.handleDragStart(t))), H(this, "onTouchEnd", (t) => (ce = Z.touch, this.handleDragStop(t)));
   }
   componentDidMount() {
@@ -1402,7 +1402,7 @@ let ce = Z.mouse, Te = class extends Oe.Component {
   // the underlying DOM node ourselves. See the README for more information.
   findDOMNode() {
     var t, r, o;
-    return (t = this.props) != null && t.nodeRef ? (o = (r = this.props) == null ? void 0 : r.nodeRef) == null ? void 0 : o.current : lr.default.findDOMNode(this);
+    return (t = this.props) != null && t.nodeRef ? (o = (r = this.props) == null ? void 0 : r.nodeRef) == null ? void 0 : o.current : cr.default.findDOMNode(this);
   }
   render() {
     return /* @__PURE__ */ Oe.cloneElement(Oe.Children.only(this.props.children), {
@@ -1575,7 +1575,7 @@ H(Te, "defaultProps", {
       return h.default;
     }
   }), e.default = void 0;
-  var t = P(Ie), r = v(ut), o = v(st), a = Dt, i = F, d = re, u = te, h = v(Se), g = v(xe);
+  var t = P(Ie), r = v(ut), o = v(st), a = Nt, i = F, d = re, c = te, h = v(Se), g = v(xe);
   function v(_) {
     return _ && _.__esModule ? _ : { default: _ };
   }
@@ -1860,9 +1860,9 @@ H(Te, "defaultProps", {
     /**
      * These properties should be defined on the child, not here.
      */
-    className: u.dontSetMe,
-    style: u.dontSetMe,
-    transform: u.dontSetMe
+    className: c.dontSetMe,
+    style: c.dontSetMe,
+    transform: c.dontSetMe
   }), N(T, "defaultProps", {
     ...h.default.defaultProps,
     axis: "both",
@@ -1879,38 +1879,39 @@ H(Te, "defaultProps", {
 })(it);
 const {
   default: bt,
-  DraggableCore: fr
+  DraggableCore: dr
 } = it;
 be.exports = bt;
 be.exports.default = bt;
-be.exports.DraggableCore = fr;
-var dr = be.exports;
-const pr = /* @__PURE__ */ St(dr), hr = ({
+be.exports.DraggableCore = dr;
+var pr = be.exports;
+const hr = /* @__PURE__ */ xt(pr), mr = ({
   title: e,
   collapsed: t = !1,
   draggable: r = !0,
   position: o = { x: 20, y: 20 },
   children: a
 }) => {
-  const [i, d] = me(t);
-  return /* @__PURE__ */ c.jsx(
-    pr,
+  const [i, d] = me(t), c = St(null);
+  return /* @__PURE__ */ u.jsx(
+    hr,
     {
+      nodeRef: c,
       handle: ".font-controls-header",
       disabled: !r,
       defaultPosition: o,
       bounds: "parent",
-      children: /* @__PURE__ */ c.jsxs("div", { className: "font-controls-panel", children: [
-        /* @__PURE__ */ c.jsxs("div", { className: "font-controls-header", children: [
-          /* @__PURE__ */ c.jsx("h3", { className: "font-controls-title", children: e }),
-          /* @__PURE__ */ c.jsx(
+      children: /* @__PURE__ */ u.jsxs("div", { ref: c, className: "font-controls-panel", children: [
+        /* @__PURE__ */ u.jsxs("div", { className: "font-controls-header", children: [
+          /* @__PURE__ */ u.jsx("h3", { className: "font-controls-title", children: e }),
+          /* @__PURE__ */ u.jsx(
             "button",
             {
               className: `font-controls-toggle ${i ? "collapsed" : ""}`,
               onClick: () => d(!i),
               type: "button",
               "aria-label": i ? "Expand" : "Collapse",
-              children: /* @__PURE__ */ c.jsx(
+              children: /* @__PURE__ */ u.jsx(
                 "svg",
                 {
                   viewBox: "0 0 24 24",
@@ -1919,42 +1920,42 @@ const pr = /* @__PURE__ */ St(dr), hr = ({
                   strokeWidth: "2",
                   strokeLinecap: "round",
                   strokeLinejoin: "round",
-                  children: /* @__PURE__ */ c.jsx("polyline", { points: "6 9 12 15 18 9" })
+                  children: /* @__PURE__ */ u.jsx("polyline", { points: "6 9 12 15 18 9" })
                 }
               )
             }
           )
         ] }),
-        !i && /* @__PURE__ */ c.jsx("div", { className: "font-controls-content", children: a })
+        !i && /* @__PURE__ */ u.jsx("div", { className: "font-controls-content", children: a })
       ] })
     }
   );
-}, mr = ({
+}, gr = ({
   value: e,
   onChange: t,
   fontFamilies: r
-}) => /* @__PURE__ */ c.jsxs("div", { className: "font-control-group", children: [
-  /* @__PURE__ */ c.jsx("label", { className: "font-control-label", children: "Font Family" }),
-  /* @__PURE__ */ c.jsx(
+}) => /* @__PURE__ */ u.jsxs("div", { className: "font-control-group", children: [
+  /* @__PURE__ */ u.jsx("label", { className: "font-control-label", children: "Font Family" }),
+  /* @__PURE__ */ u.jsx(
     "select",
     {
       className: "font-control-input font-control-select",
       value: e,
       onChange: (o) => t(o.target.value),
       style: { fontFamily: e },
-      children: r.map((o) => /* @__PURE__ */ c.jsx("option", { value: o, style: { fontFamily: o }, children: o }, o))
+      children: r.map((o) => /* @__PURE__ */ u.jsx("option", { value: o, style: { fontFamily: o }, children: o }, o))
     }
   )
-] }), gr = ({
+] }), yr = ({
   value: e,
   onChange: t,
   min: r,
   max: o,
   step: a
-}) => /* @__PURE__ */ c.jsxs("div", { className: "font-control-group", children: [
-  /* @__PURE__ */ c.jsx("label", { className: "font-control-label", children: "Font Size" }),
-  /* @__PURE__ */ c.jsxs("div", { className: "font-control-slider-container", children: [
-    /* @__PURE__ */ c.jsx(
+}) => /* @__PURE__ */ u.jsxs("div", { className: "font-control-group", children: [
+  /* @__PURE__ */ u.jsx("label", { className: "font-control-label", children: "Font Size" }),
+  /* @__PURE__ */ u.jsxs("div", { className: "font-control-slider-container", children: [
+    /* @__PURE__ */ u.jsx(
       "input",
       {
         type: "range",
@@ -1966,7 +1967,7 @@ const pr = /* @__PURE__ */ St(dr), hr = ({
         onChange: (i) => t(Number(i.target.value))
       }
     ),
-    /* @__PURE__ */ c.jsx(
+    /* @__PURE__ */ u.jsx(
       "input",
       {
         type: "number",
@@ -1979,7 +1980,7 @@ const pr = /* @__PURE__ */ St(dr), hr = ({
       }
     )
   ] })
-] }), yr = [
+] }), vr = [
   { value: 100, label: "Thin" },
   { value: 200, label: "Extra Light" },
   { value: 300, label: "Light" },
@@ -1989,18 +1990,18 @@ const pr = /* @__PURE__ */ St(dr), hr = ({
   { value: 700, label: "Bold" },
   { value: 800, label: "Extra Bold" },
   { value: 900, label: "Black" }
-], vr = ({
+], br = ({
   value: e,
   onChange: t
-}) => /* @__PURE__ */ c.jsxs("div", { className: "font-control-group", children: [
-  /* @__PURE__ */ c.jsx("label", { className: "font-control-label", children: "Font Weight" }),
-  /* @__PURE__ */ c.jsx(
+}) => /* @__PURE__ */ u.jsxs("div", { className: "font-control-group", children: [
+  /* @__PURE__ */ u.jsx("label", { className: "font-control-label", children: "Font Weight" }),
+  /* @__PURE__ */ u.jsx(
     "select",
     {
       className: "font-control-input font-control-select",
       value: e,
       onChange: (r) => t(Number(r.target.value)),
-      children: yr.map((r) => /* @__PURE__ */ c.jsxs("option", { value: r.value, children: [
+      children: vr.map((r) => /* @__PURE__ */ u.jsxs("option", { value: r.value, children: [
         r.label,
         " (",
         r.value,
@@ -2008,13 +2009,13 @@ const pr = /* @__PURE__ */ St(dr), hr = ({
       ] }, r.value))
     }
   )
-] }), br = ({
+] }), Sr = ({
   value: e,
   onChange: t
-}) => /* @__PURE__ */ c.jsxs("div", { className: "font-control-group", children: [
-  /* @__PURE__ */ c.jsx("label", { className: "font-control-label", children: "Line Height" }),
-  /* @__PURE__ */ c.jsxs("div", { className: "font-control-slider-container", children: [
-    /* @__PURE__ */ c.jsx(
+}) => /* @__PURE__ */ u.jsxs("div", { className: "font-control-group", children: [
+  /* @__PURE__ */ u.jsx("label", { className: "font-control-label", children: "Line Height" }),
+  /* @__PURE__ */ u.jsxs("div", { className: "font-control-slider-container", children: [
+    /* @__PURE__ */ u.jsx(
       "input",
       {
         type: "range",
@@ -2026,7 +2027,7 @@ const pr = /* @__PURE__ */ St(dr), hr = ({
         onChange: (r) => t(Number(r.target.value))
       }
     ),
-    /* @__PURE__ */ c.jsx(
+    /* @__PURE__ */ u.jsx(
       "input",
       {
         type: "number",
@@ -2039,13 +2040,13 @@ const pr = /* @__PURE__ */ St(dr), hr = ({
       }
     )
   ] })
-] }), Sr = ({
+] }), xr = ({
   value: e,
   onChange: t
-}) => /* @__PURE__ */ c.jsxs("div", { className: "font-control-group", children: [
-  /* @__PURE__ */ c.jsx("label", { className: "font-control-label", children: "Letter Spacing" }),
-  /* @__PURE__ */ c.jsxs("div", { className: "font-control-slider-container", children: [
-    /* @__PURE__ */ c.jsx(
+}) => /* @__PURE__ */ u.jsxs("div", { className: "font-control-group", children: [
+  /* @__PURE__ */ u.jsx("label", { className: "font-control-label", children: "Letter Spacing" }),
+  /* @__PURE__ */ u.jsxs("div", { className: "font-control-slider-container", children: [
+    /* @__PURE__ */ u.jsx(
       "input",
       {
         type: "range",
@@ -2057,7 +2058,7 @@ const pr = /* @__PURE__ */ St(dr), hr = ({
         onChange: (r) => t(Number(r.target.value))
       }
     ),
-    /* @__PURE__ */ c.jsx(
+    /* @__PURE__ */ u.jsx(
       "input",
       {
         type: "number",
@@ -2070,32 +2071,32 @@ const pr = /* @__PURE__ */ St(dr), hr = ({
       }
     )
   ] })
-] }), xr = [
+] }), Tr = [
   { value: "none", label: "None" },
   { value: "uppercase", label: "UPPERCASE" },
   { value: "lowercase", label: "lowercase" },
   { value: "capitalize", label: "Capitalize" }
-], Tr = ({
+], Er = ({
   value: e,
   onChange: t
-}) => /* @__PURE__ */ c.jsxs("div", { className: "font-control-group", children: [
-  /* @__PURE__ */ c.jsx("label", { className: "font-control-label", children: "Text Transform" }),
-  /* @__PURE__ */ c.jsx(
+}) => /* @__PURE__ */ u.jsxs("div", { className: "font-control-group", children: [
+  /* @__PURE__ */ u.jsx("label", { className: "font-control-label", children: "Text Transform" }),
+  /* @__PURE__ */ u.jsx(
     "select",
     {
       className: "font-control-input font-control-select",
       value: e,
       onChange: (r) => t(r.target.value),
-      children: xr.map((r) => /* @__PURE__ */ c.jsx("option", { value: r.value, children: r.label }, r.value))
+      children: Tr.map((r) => /* @__PURE__ */ u.jsx("option", { value: r.value, children: r.label }, r.value))
     }
   )
-] }), Er = ({
+] }), _r = ({
   value: e,
   onChange: t
-}) => /* @__PURE__ */ c.jsxs("div", { className: "font-control-group", children: [
-  /* @__PURE__ */ c.jsx("label", { className: "font-control-label", children: "Text Color" }),
-  /* @__PURE__ */ c.jsxs("div", { className: "font-control-color-input", children: [
-    /* @__PURE__ */ c.jsx("div", { className: "font-control-color-preview", children: /* @__PURE__ */ c.jsx(
+}) => /* @__PURE__ */ u.jsxs("div", { className: "font-control-group", children: [
+  /* @__PURE__ */ u.jsx("label", { className: "font-control-label", children: "Text Color" }),
+  /* @__PURE__ */ u.jsxs("div", { className: "font-control-color-input", children: [
+    /* @__PURE__ */ u.jsx("div", { className: "font-control-color-preview", children: /* @__PURE__ */ u.jsx(
       "input",
       {
         type: "color",
@@ -2103,7 +2104,7 @@ const pr = /* @__PURE__ */ St(dr), hr = ({
         onChange: (r) => t(r.target.value)
       }
     ) }),
-    /* @__PURE__ */ c.jsx(
+    /* @__PURE__ */ u.jsx(
       "input",
       {
         type: "text",
@@ -2114,17 +2115,17 @@ const pr = /* @__PURE__ */ St(dr), hr = ({
       }
     )
   ] })
-] }), _r = [
+] }), wr = [
   { value: "left", icon: "⬅" },
   { value: "center", icon: "↔" },
   { value: "right", icon: "➡" },
   { value: "justify", icon: "⬌" }
-], wr = ({
+], Cr = ({
   value: e,
   onChange: t
-}) => /* @__PURE__ */ c.jsxs("div", { className: "font-control-group", children: [
-  /* @__PURE__ */ c.jsx("label", { className: "font-control-label", children: "Text Align" }),
-  /* @__PURE__ */ c.jsx("div", { className: "font-control-button-group", children: _r.map((r) => /* @__PURE__ */ c.jsx(
+}) => /* @__PURE__ */ u.jsxs("div", { className: "font-control-group", children: [
+  /* @__PURE__ */ u.jsx("label", { className: "font-control-label", children: "Text Align" }),
+  /* @__PURE__ */ u.jsx("div", { className: "font-control-button-group", children: wr.map((r) => /* @__PURE__ */ u.jsx(
     "button",
     {
       className: `font-control-button ${e === r.value ? "active" : ""}`,
@@ -2146,29 +2147,29 @@ const pr = /* @__PURE__ */ St(dr), hr = ({
       console.error("Failed to copy:", d);
     }
   };
-  return /* @__PURE__ */ c.jsxs("div", { className: "font-control-code-block", children: [
-    /* @__PURE__ */ c.jsxs("div", { className: "font-control-code-header", children: [
-      /* @__PURE__ */ c.jsx("span", { className: "font-control-code-title", children: e }),
-      /* @__PURE__ */ c.jsx(
+  return /* @__PURE__ */ u.jsxs("div", { className: "font-control-code-block", children: [
+    /* @__PURE__ */ u.jsxs("div", { className: "font-control-code-header", children: [
+      /* @__PURE__ */ u.jsx("span", { className: "font-control-code-title", children: e }),
+      /* @__PURE__ */ u.jsx(
         "button",
         {
           className: "font-control-copy-button",
           onClick: i,
           type: "button",
-          children: o ? /* @__PURE__ */ c.jsxs(c.Fragment, { children: [
-            /* @__PURE__ */ c.jsx(
+          children: o ? /* @__PURE__ */ u.jsxs(u.Fragment, { children: [
+            /* @__PURE__ */ u.jsx(
               "svg",
               {
                 viewBox: "0 0 24 24",
                 fill: "none",
                 stroke: "currentColor",
                 strokeWidth: "2",
-                children: /* @__PURE__ */ c.jsx("polyline", { points: "20 6 9 17 4 12" })
+                children: /* @__PURE__ */ u.jsx("polyline", { points: "20 6 9 17 4 12" })
               }
             ),
             "Copied!"
-          ] }) : /* @__PURE__ */ c.jsxs(c.Fragment, { children: [
-            /* @__PURE__ */ c.jsxs(
+          ] }) : /* @__PURE__ */ u.jsxs(u.Fragment, { children: [
+            /* @__PURE__ */ u.jsxs(
               "svg",
               {
                 viewBox: "0 0 24 24",
@@ -2176,8 +2177,8 @@ const pr = /* @__PURE__ */ St(dr), hr = ({
                 stroke: "currentColor",
                 strokeWidth: "2",
                 children: [
-                  /* @__PURE__ */ c.jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
-                  /* @__PURE__ */ c.jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+                  /* @__PURE__ */ u.jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
+                  /* @__PURE__ */ u.jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
                 ]
               }
             ),
@@ -2186,25 +2187,25 @@ const pr = /* @__PURE__ */ St(dr), hr = ({
         }
       )
     ] }),
-    /* @__PURE__ */ c.jsx("pre", { className: "font-control-code-content", children: /* @__PURE__ */ c.jsx("code", { className: `language-${r}`, children: t }) })
+    /* @__PURE__ */ u.jsx("pre", { className: "font-control-code-content", children: /* @__PURE__ */ u.jsx("code", { className: `language-${r}`, children: t }) })
   ] });
 }, ot = /* @__PURE__ */ new Set();
-function Cr(e) {
+function Pr(e) {
   if (ot.has(e))
     return;
   const t = document.createElement("link");
   t.rel = "stylesheet", t.href = `https://fonts.googleapis.com/css2?family=${e.replace(/ /g, "+")}:wght@100;200;300;400;500;600;700;800;900&display=swap`, document.head.appendChild(t), ot.add(e);
 }
-function Pr(e) {
+function jr(e) {
   if (!document.querySelector('link[href*="fonts.googleapis.com"]')) {
     const t = document.createElement("link");
     t.rel = "preconnect", t.href = "https://fonts.googleapis.com";
     const r = document.createElement("link");
     r.rel = "preconnect", r.href = "https://fonts.gstatic.com", r.crossOrigin = "anonymous", document.head.appendChild(t), document.head.appendChild(r);
   }
-  e.forEach(Cr);
+  e.forEach(Pr);
 }
-function jr(e) {
+function Rr(e) {
   return [
     "Arial",
     "Helvetica",
@@ -2216,7 +2217,7 @@ function jr(e) {
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="${`https://fonts.googleapis.com/css2?family=${e.replace(/ /g, "+")}:wght@100;200;300;400;500;600;700;800;900&display=swap`}" rel="stylesheet">`;
 }
-function Rr(e) {
+function Or(e) {
   return `<h1 style={{
   fontFamily: '${e.fontFamily}',
   fontSize: '${e.fontSize}px',
@@ -2230,7 +2231,7 @@ function Rr(e) {
   Your Text Here
 </h1>`;
 }
-function Or(e) {
+function Dr(e) {
   return `.my-text {
   font-family: '${e.fontFamily}', sans-serif;
   font-size: ${e.fontSize}px;
@@ -2242,7 +2243,7 @@ function Or(e) {
   text-align: ${e.textAlign};
 }`;
 }
-const Dr = [
+const Nr = [
   // Sans-serif - Modern & Clean
   "Inter",
   "Roboto",
@@ -2281,15 +2282,15 @@ const Dr = [
   textTransform: "none",
   color: "#000000",
   textAlign: "left"
-}, kr = ({
+}, $r = ({
   value: e,
   onChange: t,
-  fontFamilies: r = Dr,
+  fontFamilies: r = Nr,
   minFontSize: o = 8,
   maxFontSize: a = 120,
   fontSizeStep: i = 1,
   title: d = "Font Controls",
-  collapsed: u = !1,
+  collapsed: c = !1,
   draggable: h = !0,
   position: g
 }) => {
@@ -2300,7 +2301,7 @@ const Dr = [
   Xe(() => {
     e && P((T) => ({ ...T, ...e }));
   }, [e]), Xe(() => {
-    Pr(r);
+    jr(r);
   }, [r]);
   const I = (T, _) => {
     const x = { ...v, [T]: _ };
@@ -2308,24 +2309,24 @@ const Dr = [
   }, $ = () => {
     P(Ae), t == null || t(Ae);
   };
-  return /* @__PURE__ */ c.jsxs(
-    hr,
+  return /* @__PURE__ */ u.jsxs(
+    mr,
     {
       title: d,
-      collapsed: u,
+      collapsed: c,
       draggable: h,
       position: g,
       children: [
-        /* @__PURE__ */ c.jsx(
-          mr,
+        /* @__PURE__ */ u.jsx(
+          gr,
           {
             value: v.fontFamily,
             onChange: (T) => I("fontFamily", T),
             fontFamilies: r
           }
         ),
-        /* @__PURE__ */ c.jsx(
-          gr,
+        /* @__PURE__ */ u.jsx(
+          yr,
           {
             value: v.fontSize,
             onChange: (T) => I("fontSize", T),
@@ -2334,56 +2335,56 @@ const Dr = [
             step: i
           }
         ),
-        /* @__PURE__ */ c.jsx(
-          vr,
+        /* @__PURE__ */ u.jsx(
+          br,
           {
             value: v.fontWeight,
             onChange: (T) => I("fontWeight", T)
           }
         ),
-        /* @__PURE__ */ c.jsx(
-          br,
+        /* @__PURE__ */ u.jsx(
+          Sr,
           {
             value: v.lineHeight,
             onChange: (T) => I("lineHeight", T)
           }
         ),
-        /* @__PURE__ */ c.jsx(
-          Sr,
+        /* @__PURE__ */ u.jsx(
+          xr,
           {
             value: v.letterSpacing,
             onChange: (T) => I("letterSpacing", T)
           }
         ),
-        /* @__PURE__ */ c.jsx(
-          Tr,
+        /* @__PURE__ */ u.jsx(
+          Er,
           {
             value: v.textTransform,
             onChange: (T) => I("textTransform", T)
           }
         ),
-        /* @__PURE__ */ c.jsx(
-          Er,
+        /* @__PURE__ */ u.jsx(
+          _r,
           {
             value: v.color,
             onChange: (T) => I("color", T)
           }
         ),
-        /* @__PURE__ */ c.jsx(
-          wr,
+        /* @__PURE__ */ u.jsx(
+          Cr,
           {
             value: v.textAlign,
             onChange: (T) => I("textAlign", T)
           }
         ),
-        /* @__PURE__ */ c.jsxs(
+        /* @__PURE__ */ u.jsxs(
           "button",
           {
             className: "font-control-reset-button",
             onClick: $,
             type: "button",
             children: [
-              /* @__PURE__ */ c.jsxs(
+              /* @__PURE__ */ u.jsxs(
                 "svg",
                 {
                   viewBox: "0 0 24 24",
@@ -2393,9 +2394,9 @@ const Dr = [
                   strokeLinecap: "round",
                   strokeLinejoin: "round",
                   children: [
-                    /* @__PURE__ */ c.jsx("polyline", { points: "1 4 1 10 7 10" }),
-                    /* @__PURE__ */ c.jsx("polyline", { points: "23 20 23 14 17 14" }),
-                    /* @__PURE__ */ c.jsx("path", { d: "M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15" })
+                    /* @__PURE__ */ u.jsx("polyline", { points: "1 4 1 10 7 10" }),
+                    /* @__PURE__ */ u.jsx("polyline", { points: "23 20 23 14 17 14" }),
+                    /* @__PURE__ */ u.jsx("path", { d: "M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15" })
                   ]
                 }
               ),
@@ -2403,15 +2404,15 @@ const Dr = [
             ]
           }
         ),
-        /* @__PURE__ */ c.jsxs("div", { className: "font-control-export-section", children: [
-          /* @__PURE__ */ c.jsxs(
+        /* @__PURE__ */ u.jsxs("div", { className: "font-control-export-section", children: [
+          /* @__PURE__ */ u.jsxs(
             "button",
             {
               className: "font-control-export-toggle",
               onClick: () => N(!A),
               type: "button",
               children: [
-                /* @__PURE__ */ c.jsx(
+                /* @__PURE__ */ u.jsx(
                   "svg",
                   {
                     viewBox: "0 0 24 24",
@@ -2419,35 +2420,35 @@ const Dr = [
                     stroke: "currentColor",
                     strokeWidth: "2",
                     className: A ? "rotated" : "",
-                    children: /* @__PURE__ */ c.jsx("polyline", { points: "9 18 15 12 9 6" })
+                    children: /* @__PURE__ */ u.jsx("polyline", { points: "9 18 15 12 9 6" })
                   }
                 ),
                 "Export Configuration"
               ]
             }
           ),
-          A && /* @__PURE__ */ c.jsxs("div", { className: "font-control-export-content", children: [
-            /* @__PURE__ */ c.jsx(
+          A && /* @__PURE__ */ u.jsxs("div", { className: "font-control-export-content", children: [
+            /* @__PURE__ */ u.jsx(
               Ne,
               {
                 title: "1. Google Fonts Import (HTML)",
-                code: jr(v.fontFamily),
+                code: Rr(v.fontFamily),
                 language: "html"
               }
             ),
-            /* @__PURE__ */ c.jsx(
+            /* @__PURE__ */ u.jsx(
               Ne,
               {
                 title: "2. React/JSX Inline Styles",
-                code: Rr(v),
+                code: Or(v),
                 language: "tsx"
               }
             ),
-            /* @__PURE__ */ c.jsx(
+            /* @__PURE__ */ u.jsx(
               Ne,
               {
                 title: "3. CSS Class",
-                code: Or(v),
+                code: Dr(v),
                 language: "css"
               }
             )
@@ -2465,7 +2466,7 @@ const Dr = [
   textTransform: "none",
   color: "#000000",
   textAlign: "left"
-}, $r = (e) => {
+}, Ir = (e) => {
   const [t, r] = me({
     ...at,
     ...e
@@ -2474,7 +2475,7 @@ const Dr = [
     config: t,
     setConfig: r,
     updateConfig: (i, d) => {
-      r((u) => ({ ...u, [i]: d }));
+      r((c) => ({ ...c, [i]: d }));
     },
     resetConfig: () => {
       r({ ...at, ...e });
@@ -2482,8 +2483,8 @@ const Dr = [
   };
 };
 export {
-  kr as FontControls,
-  Pr as loadAllDefaultFonts,
-  Cr as loadGoogleFont,
-  $r as useFontControls
+  $r as FontControls,
+  jr as loadAllDefaultFonts,
+  Pr as loadGoogleFont,
+  Ir as useFontControls
 };