@react-hive/honey-layout 2.8.0 → 3.0.1

package/dist/index.js

@@ -1,5 +1,5 @@
-import Re, { css as ye, useTheme as hr, ThemeProvider as gr, ThemeContext as cn } from "styled-components";
-import vr, { createContext as yr, forwardRef as mr, useMemo as _t, useContext as Xt, Fragment as un, useState as xt, useEffect as pe, useRef as Le, useCallback as Ae } from "react";
+import Re, { css as pe, useTheme as hr, ThemeProvider as gr, ThemeContext as cn } from "styled-components";
+import vr, { createContext as yr, forwardRef as mr, useMemo as _t, useContext as Xt, Fragment as un, useState as xt, useEffect as he, useRef as Le, useCallback as Ae } from "react";
 const ln = [
   'a[href]:not([tabindex="-1"])',
   'button:not([disabled]):not([tabindex="-1"])',
@@ -21,16 +21,16 @@ var dn = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|def
   /* Z+1 */
 );
 const Zn = (n, o) => typeof o == "string" ? pn(n) : !0, hn = (n) => n.replace(/[A-Z]/g, (o) => `-${o.toLowerCase()}`), or = (n) => n.split(" ").filter((o) => o), Vt = (n, o = 16) => `${n / o}rem`, gn = (n, o, i, s) => {
-  const f = i - n, c = s - o;
-  return Math.sqrt(f ** 2 + c ** 2);
+  const l = i - n, c = s - o;
+  return Math.sqrt(l ** 2 + c ** 2);
 }, ir = (n, o) => Math.abs(n / o), ar = (n, o) => n * o / 100, vn = (n, o) => {
   if (o < 0 || o > 1)
     throw new Error(`[honey-layout]: Alpha "${o}" is not a valid hex format.`);
   const i = /^#?([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/, s = n.match(i);
   if (!s)
     throw new Error("[honey-layout]: Invalid hex format.");
-  const f = s[1], c = f.length === 3 ? f[0] + f[0] + f[1] + f[1] + f[2] + f[2] : f, l = Math.round(o * 255).toString(16).toUpperCase().padStart(2, "0");
-  return `#${c + l}`;
+  const l = s[1], c = l.length === 3 ? l[0] + l[0] + l[1] + l[1] + l[2] + l[2] : l, f = Math.round(o * 255).toString(16).toUpperCase().padStart(2, "0");
+  return `#${c + f}`;
 }, sr = (n) => `@media ${n.map((i) => {
   const s = [
     i.width && ["width", i.width],
@@ -44,8 +44,8 @@ const Zn = (n, o) => typeof o == "string" ? pn(n) : !0, hn = (n) => n.replace(/[
     i.maxResolution && ["max-resolution", i.maxResolution],
     i.resolution && ["resolution", i.resolution],
     i.update && ["update", i.update]
-  ].filter(Boolean).map((l) => l && `(${l[0]}: ${l[1]})`).join(" and "), f = i.operator ? `${i.operator} ` : "", c = s ? ` and ${s}` : "";
-  return `${f}${i.mediaType ?? "screen"}${c}`;
+  ].filter(Boolean).map((f) => f && `(${f[0]}: ${f[1]})`).join(" and "), l = i.operator ? `${i.operator} ` : "", c = s ? ` and ${s}` : "";
+  return `${l}${i.mediaType ?? "screen"}${c}`;
 }).join(", ")}`, br = (n) => {
   const s = window.getComputedStyle(n).getPropertyValue("transform").match(/^matrix\((.+)\)$/);
   if (!s)
@@ -53,20 +53,20 @@ const Zn = (n, o) => typeof o == "string" ? pn(n) : !0, hn = (n) => n.replace(/[
       translateX: 0,
       translateY: 0
     };
-  const f = s[1].split(", "), c = parseFloat(f[4]), l = parseFloat(f[5]);
+  const l = s[1].split(", "), c = parseFloat(l[4]), f = parseFloat(l[5]);
   return {
     translateX: c,
-    translateY: l
+    translateY: f
   };
-}, yn = (n, o, i, s = [], f = void 0, c = 0) => (n == null || n.forEach((l) => {
-  const { [i]: g, ...p } = l, b = l[i], v = Array.isArray(b);
+}, yn = (n, o, i, s = [], l = void 0, c = 0) => (n == null || n.forEach((f) => {
+  const { [i]: g, ...p } = f, b = f[i], v = Array.isArray(b);
   if (s.push({
     ...p,
-    parentId: f,
+    parentId: l,
     depthLevel: c,
     totalNestedItems: v ? b.length : 0
   }), v) {
-    const y = l[o];
+    const y = f[o];
     yn(
       b,
       o,
@@ -79,29 +79,29 @@ const Zn = (n, o) => typeof o == "string" ? pn(n) : !0, hn = (n) => n.replace(/[
 }), s), Qn = (n, o, i) => n.filter(
   (s) => s.parentId === o && (!i || i(s))
 ), eo = (n, o, i, s) => {
-  const f = or(s.toLowerCase());
-  if (!f.length)
+  const l = or(s.toLowerCase());
+  if (!l.length)
     return n;
   const c = n.reduce(
-    (l, g, p) => (l[g[o]] = p, l),
+    (f, g, p) => (f[g[o]] = p, f),
     {}
   );
   return n.reduce(
-    (l, g) => {
+    (f, g) => {
       const p = g[i];
-      if (!p || l.some(
+      if (!p || f.some(
         (y) => y[o] === g[o]
       ))
-        return l;
+        return f;
       const b = or(p.toLowerCase());
-      if (f.every(
+      if (l.every(
         (y) => b.some((E) => E.startsWith(y))
       ))
         if (g.parentId === void 0) {
-          l.push(g);
+          f.push(g);
           const y = (E) => {
             E.totalNestedItems && n.forEach((j) => {
-              j.parentId === E[o] && (l.push(j), y(j));
+              j.parentId === E[o] && (f.push(j), y(j));
             });
           };
           y(g);
@@ -109,16 +109,16 @@ const Zn = (n, o) => typeof o == "string" ? pn(n) : !0, hn = (n) => n.replace(/[
           const y = (E) => {
             const j = c[E.parentId], M = n[j];
             M.parentId !== void 0 && y(M);
-            const W = l.length ? l[l.length - 1].parentId : null;
+            const W = f.length ? f[f.length - 1].parentId : null;
             if (W === null || W !== E.parentId) {
               if (!M)
                 throw new Error("[honey-layout]: Parent item was not found.");
-              l.push(M);
+              f.push(M);
             }
           };
-          y(g), l.push(g);
+          y(g), f.push(g);
         }
-      return l;
+      return f;
     },
     []
   );
@@ -158,21 +158,21 @@ const Zn = (n, o) => typeof o == "string" ? pn(n) : !0, hn = (n) => n.replace(/[
   const n = Date.now().toString(), o = Math.floor(Math.random() * 1e4).toString().padStart(4, "0");
   return `${n}${o}`;
 }, Tt = (n, o = "px", i = "base") => ({ theme: s }) => {
-  const f = s.spacings[i] ?? 0;
+  const l = s.spacings[i] ?? 0;
   if (typeof n == "number") {
-    const l = n * f;
-    return o ? `${l}${o}` : l;
+    const f = n * l;
+    return o ? `${f}${o}` : f;
   }
-  return n.map((l) => {
-    const g = l * f;
+  return n.map((f) => {
+    const g = f * l;
     return o ? `${g}${o}` : g;
   }).join(" ");
 }, bt = (n, o) => ({ theme: i }) => {
-  const [s, f] = n.split("."), c = i.colors[s][f];
+  const [s, l] = n.split("."), c = i.colors[s][l];
   return o !== void 0 ? vn(c, o) : c;
 }, xn = (n) => ({ theme: o }) => {
   const i = o.fonts[n];
-  return ye`
+  return pe`
       font-family: ${i.family};
       font-size: ${Vt(i.size)};
       font-weight: ${i.weight};
@@ -185,13 +185,13 @@ const Zn = (n, o) => typeof o == "string" ? pn(n) : !0, hn = (n) => n.replace(/[
     return En(n) && (typeof s == "number" || Array.isArray(s)) ? Tt(s, "px") : Sn(n) && typeof s == "string" && wn(s) ? bt(s) : s;
 }, Cn = (n, o) => Object.entries(n).filter(
   ([i, s]) => _r(i) && o === "xs" || s && typeof s == "object" && o in s
-), xr = (n) => ({ theme: o, ...i }) => ye`
-    ${Cn(i, n).map(([s, f]) => {
+), xr = (n) => ({ theme: o, ...i }) => pe`
+    ${Cn(i, n).map(([s, l]) => {
   const c = s.slice(1);
-  return ye`
+  return pe`
         ${hn(c)}: ${Rn(
     c,
-    f,
+    l,
     n
   )};
       `;
@@ -200,10 +200,10 @@ const Zn = (n, o) => typeof o == "string" ? pn(n) : !0, hn = (n) => n.replace(/[
   ([i, s]) => _r(i) && typeof s == "object" && n in s
 ), Tr = (n, o = {}) => {
   const i = (c) => {
-    const l = c.breakpoints[n];
-    if (!l)
+    const f = c.breakpoints[n];
+    if (!f)
       throw new Error(`[honey-layout]: Setup for breakpoint "${n}" was not found.`);
-    return l;
+    return f;
   };
   return {
     down: ({ theme: c }) => sr([
@@ -219,7 +219,7 @@ const Zn = (n, o) => typeof o == "string" ? pn(n) : !0, hn = (n) => n.replace(/[
       }
     ])
   };
-}, yt = (n) => ({ theme: o, ...i }) => !o.breakpoints[n] || !On(n, i) ? null : ye`
+}, yt = (n) => ({ theme: o, ...i }) => !o.breakpoints[n] || !On(n, i) ? null : pe`
       ${Tr(n).up} {
         ${xr(n)};
       }
@@ -235,10 +235,10 @@ const Zn = (n, o) => typeof o == "string" ? pn(n) : !0, hn = (n) => n.replace(/[
       isLg: !1,
       isXl: !1
     };
-  const f = Object.entries(n).sort(([, l], [, g]) => l - g).map(([l]) => l), c = f.find((l) => {
-    const g = n[l];
+  const l = Object.entries(n).sort(([, f], [, g]) => f - g).map(([f]) => f), c = l.find((f) => {
+    const g = n[f];
     return g ? window.innerWidth < g : !1;
-  }) ?? f.pop();
+  }) ?? l.pop();
   return {
     isPortrait: i,
     isLandscape: s,
@@ -249,7 +249,7 @@ const Zn = (n, o) => typeof o == "string" ? pn(n) : !0, hn = (n) => n.replace(/[
     isXl: c === "xl"
   };
 }, Et = Re.div`
-  ${({ modifiers: n }) => ye`
+  ${({ effects: n }) => pe`
     ${n};
 
     ${xr("xs")};
@@ -282,15 +282,15 @@ var ur;
 function Pn() {
   if (ur) return Qe;
   ur = 1;
-  var n = vr, o = Symbol.for("react.element"), i = Symbol.for("react.fragment"), s = Object.prototype.hasOwnProperty, f = n.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, c = { key: !0, ref: !0, __self: !0, __source: !0 };
-  function l(g, p, b) {
+  var n = vr, o = Symbol.for("react.element"), i = Symbol.for("react.fragment"), s = Object.prototype.hasOwnProperty, l = n.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, c = { key: !0, ref: !0, __self: !0, __source: !0 };
+  function f(g, p, b) {
     var v, y = {}, E = null, j = null;
     b !== void 0 && (E = "" + b), p.key !== void 0 && (E = "" + p.key), p.ref !== void 0 && (j = p.ref);
     for (v in p) s.call(p, v) && !c.hasOwnProperty(v) && (y[v] = p[v]);
     if (g && g.defaultProps) for (v in p = g.defaultProps, p) y[v] === void 0 && (y[v] = p[v]);
-    return { $$typeof: o, type: g, key: E, ref: j, props: y, _owner: f.current };
+    return { $$typeof: o, type: g, key: E, ref: j, props: y, _owner: l.current };
   }
-  return Qe.Fragment = i, Qe.jsx = l, Qe.jsxs = l, Qe;
+  return Qe.Fragment = i, Qe.jsx = f, Qe.jsxs = f, Qe;
 }
 var et = {};
 /**
@@ -305,7 +305,7 @@ var et = {};
 var lr;
 function jn() {
   return lr || (lr = 1, process.env.NODE_ENV !== "production" && function() {
-    var n = vr, o = Symbol.for("react.element"), i = Symbol.for("react.portal"), s = Symbol.for("react.fragment"), f = Symbol.for("react.strict_mode"), c = Symbol.for("react.profiler"), l = Symbol.for("react.provider"), g = Symbol.for("react.context"), p = Symbol.for("react.forward_ref"), b = Symbol.for("react.suspense"), v = Symbol.for("react.suspense_list"), y = Symbol.for("react.memo"), E = Symbol.for("react.lazy"), j = Symbol.for("react.offscreen"), M = Symbol.iterator, W = "@@iterator";
+    var n = vr, o = Symbol.for("react.element"), i = Symbol.for("react.portal"), s = Symbol.for("react.fragment"), l = Symbol.for("react.strict_mode"), c = Symbol.for("react.profiler"), f = Symbol.for("react.provider"), g = Symbol.for("react.context"), p = Symbol.for("react.forward_ref"), b = Symbol.for("react.suspense"), v = Symbol.for("react.suspense_list"), y = Symbol.for("react.memo"), E = Symbol.for("react.lazy"), j = Symbol.for("react.offscreen"), M = Symbol.iterator, W = "@@iterator";
     function X(t) {
       if (t === null || typeof t != "object")
         return null;
@@ -330,10 +330,10 @@ function jn() {
         L.unshift("Warning: " + u), Function.prototype.apply.call(console[t], console, L);
       }
     }
-    var he = !1, x = !1, _ = !1, C = !1, K = !1, ne;
+    var ge = !1, x = !1, _ = !1, C = !1, K = !1, ne;
     ne = Symbol.for("react.module.reference");
     function be(t) {
-      return !!(typeof t == "string" || typeof t == "function" || t === s || t === c || K || t === f || t === b || t === v || C || t === j || he || x || _ || typeof t == "object" && t !== null && (t.$$typeof === E || t.$$typeof === y || t.$$typeof === l || t.$$typeof === g || t.$$typeof === p || // This needs to include all possible module reference object
+      return !!(typeof t == "string" || typeof t == "function" || t === s || t === c || K || t === l || t === b || t === v || C || t === j || ge || x || _ || typeof t == "object" && t !== null && (t.$$typeof === E || t.$$typeof === y || t.$$typeof === f || t.$$typeof === g || t.$$typeof === p || // This needs to include all possible module reference object
       // types supported by any Flight configuration anywhere since
       // we don't know which Flight build this will end up being used
       // with.
@@ -363,7 +363,7 @@ function jn() {
           return "Portal";
         case c:
           return "Profiler";
-        case f:
+        case l:
           return "StrictMode";
         case b:
           return "Suspense";
@@ -375,7 +375,7 @@ function jn() {
           case g:
             var u = t;
             return B(u) + ".Consumer";
-          case l:
+          case f:
             var d = t;
             return B(d._context) + ".Provider";
           case p:
@@ -394,14 +394,14 @@ function jn() {
         }
       return null;
     }
-    var q = Object.assign, le = 0, fe, _e, xe, $e, ke, Ce, ge;
+    var q = Object.assign, le = 0, fe, _e, xe, $e, ke, Ce, ve;
     function O() {
     }
     O.__reactDisabledLog = !0;
     function He() {
       {
         if (le === 0) {
-          fe = console.log, _e = console.info, xe = console.warn, $e = console.error, ke = console.group, Ce = console.groupCollapsed, ge = console.groupEnd;
+          fe = console.log, _e = console.info, xe = console.warn, $e = console.error, ke = console.group, Ce = console.groupCollapsed, ve = console.groupEnd;
           var t = {
             configurable: !0,
             enumerable: !0,
@@ -449,7 +449,7 @@ function jn() {
               value: Ce
             }),
             groupEnd: q({}, t, {
-              value: ge
+              value: ve
             })
           });
         }
@@ -662,7 +662,7 @@ function jn() {
         We[d] || (A('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref', U(Pe.current.type), t.ref), We[d] = !0);
       }
     }
-    function ve(t, u) {
+    function ye(t, u) {
       {
         var d = function() {
           Ve || (Ve = !0, A("%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://reactjs.org/link/special-props)", u));
@@ -726,7 +726,7 @@ function jn() {
         }
         if (T || Y) {
           var H = typeof t == "function" ? t.displayName || t.name || "Unknown" : t;
-          T && ve(S, H), Y && ze(S, H);
+          T && ye(S, H), Y && ze(S, H);
         }
         return Pt(t, T, Y, R, m, Pe.current, S);
       }
@@ -902,12 +902,12 @@ function Ln() {
 }
 var G = Ln();
 const Sr = Re(St)`
-  ${({ columns: n, takeColumns: o = 1, spacing: i = 0, applyMaxWidth: s, theme: f }) => {
-  const c = 100 / n, l = Tt(i, null)({ theme: f }), g = o * c, p = (n - o) * (l / n), b = `calc(${g}% - ${p}px)`;
-  return ye`
+  ${({ columns: n, takeColumns: o = 1, spacing: i = 0, applyMaxWidth: s, theme: l }) => {
+  const c = 100 / n, f = Tt(i, null)({ theme: l }), g = o * c, p = (n - o) * (f / n), b = `calc(${g}% - ${p}px)`;
+  return pe`
       flex-basis: ${b};
 
-      ${s && ye`
+      ${s && pe`
         ${Tr(s).up} {
           max-width: ${b};
         }
@@ -915,7 +915,7 @@ const Sr = Re(St)`
     `;
 }}
 `, wr = Re(Et)`
-  ${({ columnHeight: n, minColumnHeight: o, spacing: i = 0 }) => ye`
+  ${({ columnHeight: n, minColumnHeight: o, spacing: i = 0 }) => pe`
     display: flex;
     gap: ${Tt(i)};
 
@@ -929,17 +929,17 @@ wr.defaultProps = {
   $flexWrap: "wrap"
 };
 const Rr = yr(void 0), to = mr(
-  ({ children: n, columns: o, spacing: i, isColumnGrowing: s = !0, applyColumnMaxWidth: f = !1, ...c }, l) => {
+  ({ children: n, columns: o, spacing: i, isColumnGrowing: s = !0, applyColumnMaxWidth: l = !1, ...c }, f) => {
     const g = _t(
       () => ({
         columns: o,
         spacing: i,
         isColumnGrowing: s,
-        applyColumnMaxWidth: f
+        applyColumnMaxWidth: l
       }),
-      [o, i, s, f]
+      [o, i, s, l]
     );
-    return /* @__PURE__ */ G.jsx(Rr.Provider, { value: g, children: /* @__PURE__ */ G.jsx(wr, { ref: l, spacing: i, "data-testid": "honey-grid", ...c, children: n }) });
+    return /* @__PURE__ */ G.jsx(Rr.Provider, { value: g, children: /* @__PURE__ */ G.jsx(wr, { ref: f, spacing: i, "data-testid": "honey-grid", ...c, children: n }) });
   }
 ), An = () => {
   const n = Xt(Rr);
@@ -952,14 +952,14 @@ const Rr = yr(void 0), to = mr(
   children: n,
   ...o
 }) => {
-  const { columns: i, spacing: s, isColumnGrowing: f, applyColumnMaxWidth: c } = An();
+  const { columns: i, spacing: s, isColumnGrowing: l, applyColumnMaxWidth: c } = An();
   return /* @__PURE__ */ G.jsx(
     Sr,
     {
       columns: i,
       spacing: s,
       applyMaxWidth: c,
-      $flexGrow: f ? 1 : 0,
+      $flexGrow: l ? 1 : 0,
       "data-testid": "honey-grid-column",
       ...o,
       children: n
@@ -970,19 +970,19 @@ const Rr = yr(void 0), to = mr(
   isLoading: o = !1,
   isError: i = !1,
   isNoContent: s = !1,
-  loadingContent: f = null,
+  loadingContent: l = null,
   errorContent: c = null,
-  noContent: l = null
-}) => i ? c : o ? f : s ? l : n, kn = Re(St)`
+  noContent: f = null
+}) => i ? c : o ? l : s ? f : n, kn = Re(St)`
   overflow: hidden auto;
 `, Hn = ({
   children: n,
   items: o,
   itemKey: i,
   isLoading: s,
-  loadingContent: f,
+  loadingContent: l,
   isError: c,
-  errorContent: l,
+  errorContent: f,
   noContent: g,
   ...p
 }, b) => /* @__PURE__ */ G.jsx(
@@ -997,9 +997,9 @@ const Rr = yr(void 0), to = mr(
       $n,
       {
         isLoading: s,
-        loadingContent: f,
+        loadingContent: l,
         isError: c,
-        errorContent: l,
+        errorContent: f,
         isNoContent: (o == null ? void 0 : o.length) === 0,
         noContent: g,
         children: o == null ? void 0 : o.map((v, y, E) => /* @__PURE__ */ G.jsx(un, { children: n(v, y, E) }, String(Cr(v, i, y))))
@@ -1011,20 +1011,20 @@ var Gt, dr;
 function In() {
   if (dr) return Gt;
   dr = 1;
-  var n = "Expected a function", o = NaN, i = "[object Symbol]", s = /^\s+|\s+$/g, f = /^[-+]0x[0-9a-f]+$/i, c = /^0b[01]+$/i, l = /^0o[0-7]+$/i, g = parseInt, p = typeof we == "object" && we && we.Object === Object && we, b = typeof self == "object" && self && self.Object === Object && self, v = p || b || Function("return this")(), y = Object.prototype, E = y.toString, j = Math.max, M = Math.min, W = function() {
+  var n = "Expected a function", o = NaN, i = "[object Symbol]", s = /^\s+|\s+$/g, l = /^[-+]0x[0-9a-f]+$/i, c = /^0b[01]+$/i, f = /^0o[0-7]+$/i, g = parseInt, p = typeof we == "object" && we && we.Object === Object && we, b = typeof self == "object" && self && self.Object === Object && self, v = p || b || Function("return this")(), y = Object.prototype, E = y.toString, j = Math.max, M = Math.min, W = function() {
     return v.Date.now();
   };
   function X(x, _, C) {
     var K, ne, be, ue, B, U, q = 0, le = !1, fe = !1, _e = !0;
     if (typeof x != "function")
       throw new TypeError(n);
-    _ = he(_) || 0, z(C) && (le = !!C.leading, fe = "maxWait" in C, be = fe ? j(he(C.maxWait) || 0, _) : be, _e = "trailing" in C ? !!C.trailing : _e);
+    _ = ge(_) || 0, z(C) && (le = !!C.leading, fe = "maxWait" in C, be = fe ? j(ge(C.maxWait) || 0, _) : be, _e = "trailing" in C ? !!C.trailing : _e);
     function xe(k) {
       var N = K, ee = ne;
       return K = ne = void 0, q = k, ue = x.apply(ee, N), ue;
     }
     function $e(k) {
-      return q = k, B = setTimeout(ge, _), le ? xe(k) : ue;
+      return q = k, B = setTimeout(ve, _), le ? xe(k) : ue;
     }
     function ke(k) {
       var N = k - U, ee = k - q, oe = _ - N;
@@ -1034,11 +1034,11 @@ function In() {
       var N = k - U, ee = k - q;
       return U === void 0 || N >= _ || N < 0 || fe && ee >= be;
     }
-    function ge() {
+    function ve() {
       var k = W();
       if (Ce(k))
         return O(k);
-      B = setTimeout(ge, ke(k));
+      B = setTimeout(ve, ke(k));
     }
     function O(k) {
       return B = void 0, _e && K ? xe(k) : (K = ne = void 0, ue);
@@ -1055,9 +1055,9 @@ function In() {
         if (B === void 0)
           return $e(U);
         if (fe)
-          return B = setTimeout(ge, _), xe(U);
+          return B = setTimeout(ve, _), xe(U);
       }
-      return B === void 0 && (B = setTimeout(ge, _)), ue;
+      return B === void 0 && (B = setTimeout(ve, _)), ue;
     }
     return Z.cancel = He, Z.flush = Ue, Z;
   }
@@ -1071,7 +1071,7 @@ function In() {
   function me(x) {
     return typeof x == "symbol" || A(x) && E.call(x) == i;
   }
-  function he(x) {
+  function ge(x) {
     if (typeof x == "number")
       return x;
     if (me(x))
@@ -1084,7 +1084,7 @@ function In() {
       return x === 0 ? x : +x;
     x = x.replace(s, "");
     var C = c.test(x);
-    return C || l.test(x) ? g(x.slice(2), C ? 2 : 8) : f.test(x) ? o : +x;
+    return C || f.test(x) ? g(x.slice(2), C ? 2 : 8) : l.test(x) ? o : +x;
   }
   return Gt = X, Gt;
 }
@@ -1093,24 +1093,24 @@ const Mn = /* @__PURE__ */ Er(Dn), Fn = ({
   delay: n = 0,
   overrideScreenState: o
 } = {}) => {
-  const i = hr(), [s, f] = xt(() => ({
+  const i = hr(), [s, l] = xt(() => ({
     ...cr(i.breakpoints),
     ...o
   }));
-  return pe(() => {
+  return he(() => {
     const c = Mn(() => {
-      f({ ...cr(i.breakpoints), ...o });
+      l({ ...cr(i.breakpoints), ...o });
     }, n);
     return c(), window.addEventListener("resize", c), window.screen.orientation.addEventListener("change", c), () => {
       c.cancel(), window.removeEventListener("resize", c), window.screen.orientation.removeEventListener("change", c);
     };
   }, []), s;
-}, Or = (n, { onMoveDrag: o, onStartDrag: i, onEndDrag: s }, { isEnabled: f = !0 } = {}) => {
-  pe(() => {
+}, Or = (n, { onMoveDrag: o, onStartDrag: i, onEndDrag: s }, { isEnabled: l = !0 } = {}) => {
+  he(() => {
     const c = n.current;
-    if (!f || !c)
+    if (!l || !c)
       return;
-    const l = o(c);
+    const f = o(c);
     let g = !1, p = 0, b = 0, v = 0, y = 0, E = 0;
     const j = (_, C) => {
       i && i(c) === !1 || (g = !0, p = _, b = C, v = _, y = C, E = Date.now());
@@ -1129,11 +1129,11 @@ const Mn = /* @__PURE__ */ Er(Dn), Fn = ({
         }, c);
       }
     }, W = () => {
-      M(), window.removeEventListener("mousemove", he), window.removeEventListener("mouseup", W);
+      M(), window.removeEventListener("mousemove", ge), window.removeEventListener("mouseup", W);
     }, X = (_, C) => {
       if (!g)
         return;
-      if (l({
+      if (f({
         get deltaX() {
           return _ - v;
         },
@@ -1163,10 +1163,10 @@ const Mn = /* @__PURE__ */ Er(Dn), Fn = ({
       X(C.clientX, C.clientY);
     }, me = () => {
       g = !1;
-    }, he = (_) => {
+    }, ge = (_) => {
       X(_.clientX, _.clientY);
     }, x = (_) => {
-      _.stopPropagation(), j(_.clientX, _.clientY), window.addEventListener("mousemove", he), window.addEventListener("mouseup", W);
+      _.stopPropagation(), j(_.clientX, _.clientY), window.addEventListener("mousemove", ge), window.addEventListener("mouseup", W);
     };
     return c.addEventListener("touchstart", z, {
       passive: !0
@@ -1175,10 +1175,10 @@ const Mn = /* @__PURE__ */ Er(Dn), Fn = ({
     }), c.addEventListener("touchend", M), c.addEventListener("touchcancel", me), c.addEventListener("mousedown", x), () => {
       c.removeEventListener("touchstart", z), c.removeEventListener("touchmove", A), c.removeEventListener("touchend", M), c.removeEventListener("touchcancel", me), c.removeEventListener("mousedown", x);
     };
-  }, [f, i, o, s]);
+  }, [l, i, o, s]);
 }, oo = (n, o) => {
-  const i = Le(null), s = Le(null), f = Le(null), c = (p, b) => {
-    if (i.current = p, f.current = b, !!p)
+  const i = Le(null), s = Le(null), l = Le(null), c = (p, b) => {
+    if (i.current = p, l.current = b, !!p)
       if (b) {
         const v = ([y]) => {
           y.isIntersecting && o();
@@ -1189,9 +1189,9 @@ const Mn = /* @__PURE__ */ Er(Dn), Fn = ({
           threshold: 0
         }), s.current.observe(b);
       } else s.current && (s.current.disconnect(), s.current = null);
-  }, l = Ae(
+  }, f = Ae(
     (p) => {
-      c(p, f.current);
+      c(p, l.current);
     },
     []
   ), g = Ae(
@@ -1201,7 +1201,7 @@ const Mn = /* @__PURE__ */ Er(Dn), Fn = ({
     [i, o]
   );
   return {
-    scrollableContainerRef: l,
+    scrollableContainerRef: f,
     targetRef: g
   };
 }, io = (n, {
@@ -1209,8 +1209,8 @@ const Mn = /* @__PURE__ */ Er(Dn), Fn = ({
   onStartDrag: i,
   onEndDrag: s
 } = {}) => {
-  const f = Ae(
-    (c) => ({ deltaX: l, deltaY: g }) => {
+  const l = Ae(
+    (c) => ({ deltaX: f, deltaY: g }) => {
       const p = c.scrollWidth - c.clientWidth, b = c.scrollHeight - c.clientHeight;
       if (p <= 0 && b <= 0)
         return;
@@ -1220,32 +1220,32 @@ const Mn = /* @__PURE__ */ Er(Dn), Fn = ({
       ), y = ar(
         c.clientHeight,
         o
-      ), { translateX: E, translateY: j } = br(c), M = E + l, W = j + g;
+      ), { translateX: E, translateY: j } = br(c), M = E + f, W = j + g;
       let X = !1, z = E, A = j;
-      (l < 0 && M >= (p + v) * -1 || l > 0 && M <= v) && (z = M, X = !0), (g < 0 && W >= (b + y) * -1 || g > 0 && W <= y) && (A = W, X = !0), X && (c.style.transform = `translate(${z}px, ${A}px)`);
+      (f < 0 && M >= (p + v) * -1 || f > 0 && M <= v) && (z = M, X = !0), (g < 0 && W >= (b + y) * -1 || g > 0 && W <= y) && (A = W, X = !0), X && (c.style.transform = `translate(${z}px, ${A}px)`);
     },
     [o]
   );
   Or(n, {
     onStartDrag: i,
-    onMoveDrag: f,
+    onMoveDrag: l,
     onEndDrag: s
-  }), pe(() => {
+  }), he(() => {
     const c = () => {
-      var l;
-      (l = n.current) == null || l.style.removeProperty("transform");
+      var f;
+      (f = n.current) == null || f.style.removeProperty("transform");
     };
     return window.addEventListener("resize", c), () => {
       window.removeEventListener("resize", c);
     };
   }, []);
 }, ao = (n, o, { isEnabled: i = !0 } = {}) => {
-  pe(() => {
+  he(() => {
     if (!i)
       return;
-    const s = (f) => {
-      const c = f.code;
-      o.includes(c) && (f.preventDefault(), n(c, f));
+    const s = (l) => {
+      const c = l.code;
+      o.includes(c) && (l.preventDefault(), n(c, l));
     };
     return document.addEventListener("keyup", s), () => {
       document.removeEventListener("keyup", s);
@@ -1259,21 +1259,21 @@ const Mn = /* @__PURE__ */ Er(Dn), Fn = ({
     );
   return n;
 }, Wn = (n, o) => {
-  const { registerOverlay: i, unregisterOverlay: s } = jr(), f = Le(null);
-  return pe(() => {
+  const { registerOverlay: i, unregisterOverlay: s } = jr(), l = Le(null);
+  return he(() => {
     if (!n)
       return;
     const c = i(o);
-    return f.current = c, () => {
-      f.current = null, s(c.id);
+    return l.current = c, () => {
+      l.current = null, s(c.id);
     };
-  }, [n, o.onKeyUp]), f.current;
+  }, [n, o.onKeyUp]), l.current;
 }, so = (n, { onKeyUp: o } = {}) => {
   const { overlays: i } = jr(), s = _t(
-    () => i.find((f) => f.id === n),
+    () => i.find((l) => l.id === n),
     [i, n]
   );
-  return pe(() => {
+  return he(() => {
     if (!(!s || !o))
       return s.addListener("keyup", o), () => {
         s.removeListener("keyup", o);
@@ -1286,25 +1286,25 @@ const Mn = /* @__PURE__ */ Er(Dn), Fn = ({
   items: o,
   itemKey: i,
   activeItemIndex: s,
-  direction: f = "vertical",
+  direction: l = "vertical",
   ...c
 }) => {
-  const [l, g] = xt(o), p = Le(null);
-  Le(-1), l == null || l.length;
+  const [f, g] = xt(o), p = Le(null);
+  Le(-1), f == null || f.length;
   const b = Ae((v) => (v.parentElement.clientHeight / 2, ({ deltaX: E, deltaY: j }) => {
-    const { translateX: M, translateY: W } = br(v), X = f === "horizontal" ? M + E : 0, z = f === "vertical" ? W + j : 0;
+    const { translateX: M, translateY: W } = br(v), X = l === "horizontal" ? M + E : 0, z = l === "vertical" ? W + j : 0;
     v.style.transform = `translate(${X}px, ${z}px)`;
   }), []);
   return Or(p, {
     onMoveDrag: b
-  }), pe(() => {
-  }, []), pe(() => {
+  }), he(() => {
+  }, []), he(() => {
     const v = p.current;
     if (!v)
       return;
     const y = v.children[s];
     v.parentElement.clientHeight / 2, y.offsetTop + y.clientHeight / 2;
-  }, []), /* @__PURE__ */ G.jsx(Et, { $overflow: "hidden", "data-testid": "honey-looping-list-container", ...c, children: /* @__PURE__ */ G.jsx(Lr, { ref: p, "data-testid": "honey-looping-list", children: l == null ? void 0 : l.map((v, y, E) => {
+  }, []), /* @__PURE__ */ G.jsx(Et, { $overflow: "hidden", "data-testid": "honey-looping-list-container", ...c, children: /* @__PURE__ */ G.jsx(Lr, { ref: p, "data-testid": "honey-looping-list", children: f == null ? void 0 : f.map((v, y, E) => {
     const j = Cr(v, i, y);
     return /* @__PURE__ */ G.jsx(
       zn,
@@ -1358,13 +1358,13 @@ const Mn = /* @__PURE__ */ Er(Dn), Fn = ({
   isMount: o,
   unmountDelay: i,
   isAlwaysMounted: s = !1,
-  isKeepAfterMount: f = !1
+  isKeepAfterMount: l = !1
 }) => {
-  const [c, l] = xt(s || o), g = Le(void 0);
-  return pe(() => {
+  const [c, f] = xt(s || o), g = Le(void 0);
+  return he(() => {
     if (!(!o || s))
-      return clearTimeout(g.current), l(!0), () => {
-        f || (g.current = setTimeout(() => l(!1), i));
+      return clearTimeout(g.current), f(!0), () => {
+        l || (g.current = setTimeout(() => f(!1), i));
       };
   }, [o]), c ? n : null;
 }, lo = ({
@@ -1372,35 +1372,35 @@ const Mn = /* @__PURE__ */ Er(Dn), Fn = ({
   isActive: o,
   overlayId: i,
   onDeactivate: s,
-  ...f
+  ...l
 }) => {
   const c = Wn(o, {
     id: i,
     onKeyUp: Ae(
-      (l) => {
-        l === "Escape" && s();
+      (f) => {
+        f === "Escape" && s();
       },
       [s]
     )
   });
-  return /* @__PURE__ */ G.jsx(St, { ref: c == null ? void 0 : c.setContainerRef, "aria-hidden": !o, ...f, children: typeof n == "function" ? n({
+  return /* @__PURE__ */ G.jsx(St, { ref: c == null ? void 0 : c.setContainerRef, "aria-hidden": !o, ...l, children: typeof n == "function" ? n({
     overlay: c,
     deactivateOverlay: s
   }) : n });
 }, Yn = () => {
   const [n, o] = xt([]);
-  pe(() => {
+  he(() => {
     if (!n.length)
       return;
-    const f = (c) => {
+    const l = (c) => {
       n[n.length - 1].notifyListeners("keyup", c.code, c);
     };
-    return document.addEventListener("keyup", f), () => {
-      document.removeEventListener("keyup", f);
+    return document.addEventListener("keyup", l), () => {
+      document.removeEventListener("keyup", l);
     };
   }, [n]);
-  const i = Ae((f) => {
-    const c = f.id ?? _n(), l = [["keyup", f.onKeyUp]], g = {
+  const i = Ae((l) => {
+    const c = l.id ?? _n(), f = [["keyup", l.onKeyUp]], g = {
       current: null
     }, p = {
       containerRef: g,
@@ -1409,25 +1409,25 @@ const Mn = /* @__PURE__ */ Er(Dn), Fn = ({
         g.current = b;
       },
       addListener: (b, v) => {
-        l.push([b, v]);
+        f.push([b, v]);
       },
       removeListener: (b, v) => {
-        const y = l.findIndex(
+        const y = f.findIndex(
           ([E, j]) => E === b && j === v
         );
-        y !== -1 && l.splice(y, 1);
+        y !== -1 && f.splice(y, 1);
       },
       notifyListeners: (b, v, y) => {
         var E;
-        (!((E = f.listenKeys) != null && E.length) || f.listenKeys.includes(v)) && (y.preventDefault(), l.forEach(([j, M]) => {
+        (!((E = l.listenKeys) != null && E.length) || l.listenKeys.includes(v)) && (y.preventDefault(), f.forEach(([j, M]) => {
           j === b && M(v, p, y);
         }));
       }
     };
     return o((b) => [...b, p]), p;
-  }, []), s = Ae((f) => {
+  }, []), s = Ae((l) => {
     o(
-      (c) => c.filter((l) => l.id !== f)
+      (c) => c.filter((f) => f.id !== l)
     );
   }, []);
   return {
@@ -1439,19 +1439,19 @@ const Mn = /* @__PURE__ */ Er(Dn), Fn = ({
   children: n,
   mediaQueryOptions: o
 }) => {
-  const i = hr(), s = Fn(o), { overlays: f, registerOverlay: c, unregisterOverlay: l } = Yn(), g = _t(
+  const i = hr(), s = Fn(o), { overlays: l, registerOverlay: c, unregisterOverlay: f } = Yn(), g = _t(
     () => ({
       theme: i,
       screenState: s,
-      overlays: f,
+      overlays: l,
       registerOverlay: c,
-      unregisterOverlay: l,
+      unregisterOverlay: f,
       resolveSpacing: (...p) => Tt(...p)({ theme: i }),
       resolveColor: (...p) => bt(...p)({ theme: i }),
       resolveFont: (...p) => xn(...p)({ theme: i }),
       resolveDimension: (...p) => Tn(...p)({ theme: i })
     }),
-    [i, s, f, c, l]
+    [i, s, l, c, f]
   );
   return /* @__PURE__ */ G.jsx(Pr.Provider, { value: g, children: n });
 }, fo = ({
@@ -1463,8 +1463,8 @@ tt.exports;
 var pr;
 function Vn() {
   return pr || (pr = 1, function(n, o) {
-    var i = 200, s = "__lodash_hash_undefined__", f = 800, c = 16, l = 9007199254740991, g = "[object Arguments]", p = "[object Array]", b = "[object AsyncFunction]", v = "[object Boolean]", y = "[object Date]", E = "[object Error]", j = "[object Function]", M = "[object GeneratorFunction]", W = "[object Map]", X = "[object Number]", z = "[object Null]", A = "[object Object]", me = "[object Proxy]", he = "[object RegExp]", x = "[object Set]", _ = "[object String]", C = "[object Undefined]", K = "[object WeakMap]", ne = "[object ArrayBuffer]", be = "[object DataView]", ue = "[object Float32Array]", B = "[object Float64Array]", U = "[object Int8Array]", q = "[object Int16Array]", le = "[object Int32Array]", fe = "[object Uint8Array]", _e = "[object Uint8ClampedArray]", xe = "[object Uint16Array]", $e = "[object Uint32Array]", ke = /[\\^$.*+?()[\]{}|]/g, Ce = /^\[object .+?Constructor\]$/, ge = /^(?:0|[1-9]\d*)$/, O = {};
-    O[ue] = O[B] = O[U] = O[q] = O[le] = O[fe] = O[_e] = O[xe] = O[$e] = !0, O[g] = O[p] = O[ne] = O[v] = O[be] = O[y] = O[E] = O[j] = O[W] = O[X] = O[A] = O[he] = O[x] = O[_] = O[K] = !1;
+    var i = 200, s = "__lodash_hash_undefined__", l = 800, c = 16, f = 9007199254740991, g = "[object Arguments]", p = "[object Array]", b = "[object AsyncFunction]", v = "[object Boolean]", y = "[object Date]", E = "[object Error]", j = "[object Function]", M = "[object GeneratorFunction]", W = "[object Map]", X = "[object Number]", z = "[object Null]", A = "[object Object]", me = "[object Proxy]", ge = "[object RegExp]", x = "[object Set]", _ = "[object String]", C = "[object Undefined]", K = "[object WeakMap]", ne = "[object ArrayBuffer]", be = "[object DataView]", ue = "[object Float32Array]", B = "[object Float64Array]", U = "[object Int8Array]", q = "[object Int16Array]", le = "[object Int32Array]", fe = "[object Uint8Array]", _e = "[object Uint8ClampedArray]", xe = "[object Uint16Array]", $e = "[object Uint32Array]", ke = /[\\^$.*+?()[\]{}|]/g, Ce = /^\[object .+?Constructor\]$/, ve = /^(?:0|[1-9]\d*)$/, O = {};
+    O[ue] = O[B] = O[U] = O[q] = O[le] = O[fe] = O[_e] = O[xe] = O[$e] = !0, O[g] = O[p] = O[ne] = O[v] = O[be] = O[y] = O[E] = O[j] = O[W] = O[X] = O[A] = O[ge] = O[x] = O[_] = O[K] = !1;
     var He = typeof we == "object" && we && we.Object === Object && we, Ue = typeof self == "object" && self && self.Object === Object && self, Z = He || Ue || Function("return this")(), k = o && !o.nodeType && o, N = k && !0 && n && !n.nodeType && n, ee = N && N.exports === k, oe = ee && He.process, rt = function() {
       try {
         var e = N && N.require && N.require("util").types;
@@ -1510,7 +1510,7 @@ function Vn() {
       "^" + Te.call(de).replace(ke, "\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, "$1.*?") + "$"
     ), Fe = ee ? Z.Buffer : void 0, Ve = Z.Symbol, Ge = Z.Uint8Array;
     Fe && Fe.allocUnsafe;
-    var We = nt(Object.getPrototypeOf, Object), st = Object.create, Ct = Me.propertyIsEnumerable, Ot = ot.splice, ve = Ve ? Ve.toStringTag : void 0, ze = function() {
+    var We = nt(Object.getPrototypeOf, Object), st = Object.create, Ct = Me.propertyIsEnumerable, Ot = ot.splice, ye = Ve ? Ve.toStringTag : void 0, ze = function() {
       try {
         var e = Mt(Object, "defineProperty");
         return e({}, "", {}), e;
@@ -1679,7 +1679,7 @@ function Vn() {
     }
     var V = Nr();
     function Se(e) {
-      return e == null ? e === void 0 ? C : z : ve && ve in Object(e) ? Yr(e) : Kr(e);
+      return e == null ? e === void 0 ? C : z : ye && ye in Object(e) ? Yr(e) : Kr(e);
     }
     function ht(e) {
       return Je(e) && Se(e) == g;
@@ -1790,21 +1790,21 @@ function Vn() {
       return Dt(a) ? a : void 0;
     }
     function Yr(e) {
-      var r = de.call(e, ve), a = e[ve];
+      var r = de.call(e, ye), a = e[ye];
       try {
-        e[ve] = void 0;
+        e[ye] = void 0;
         var h = !0;
       } catch {
       }
       var w = Be.call(e);
-      return h && (r ? e[ve] = a : delete e[ve]), w;
+      return h && (r ? e[ye] = a : delete e[ye]), w;
     }
     function Br(e) {
       return typeof e.constructor == "function" && !Jt(e) ? Ke(We(e)) : {};
     }
     function Kt(e, r) {
       var a = typeof e;
-      return r = r ?? l, !!r && (a == "number" || a != "symbol" && ge.test(e)) && e > -1 && e % 1 == 0 && e < r;
+      return r = r ?? f, !!r && (a == "number" || a != "symbol" && ve.test(e)) && e > -1 && e % 1 == 0 && e < r;
     }
     function Vr(e, r, a) {
       if (!je(a))
@@ -1853,7 +1853,7 @@ function Vn() {
       return function() {
         var h = Xe(), w = c - (h - a);
         if (a = h, w > 0) {
-          if (++r >= f)
+          if (++r >= l)
             return arguments[0];
         } else
           r = 0;
@@ -1895,7 +1895,7 @@ function Vn() {
       return r == j || r == M || r == b || r == me;
     }
     function Qt(e) {
-      return typeof e == "number" && e > -1 && e % 1 == 0 && e <= l;
+      return typeof e == "number" && e > -1 && e % 1 == 0 && e <= f;
     }
     function je(e) {
       var r = typeof e;
@@ -1944,13 +1944,20 @@ const Xn = /* @__PURE__ */ Er(Gn), po = ({
 }) => {
   const i = Xt(cn), s = _t(() => Xn(i, n), [i, n]);
   return /* @__PURE__ */ G.jsx(gr, { theme: s, ...o });
-}, ho = ({ durationMs: n, timingFunction: o = "ease-in-out", extraProperties: i = [] }) => ({ isActive: s = !1 }) => ye`
-    opacity: ${s ? 1 : 0};
-    visibility: ${s ? "visible" : "hidden"};
+}, ho = ({ durationMs: n, timingFunction: o = "ease-in-out", extraProperties: i = [], activeClassName: s }) => ({ isActive: l = !1 }) => pe`
+    opacity: ${l ? 1 : 0};
+    visibility: ${l ? "visible" : "hidden"};
 
     transition-property: ${["opacity", "visibility", ...i].join(", ")};
     transition-duration: ${n}ms;
     transition-timing-function: ${Array.isArray(o) ? o.join(", ") : o};
+
+    ${s && pe`
+      &.${s} {
+        opacity: 1;
+        visibility: visible;
+      }
+    `}
   `;
 export {
   Et as HoneyBox,
@@ -1983,7 +1990,7 @@ export {
   Jn as getFocusableHTMLElements,
   Cr as getHoneyListItemId,
   br as getTransformationValues,
-  ho as honeyVisibilityTransitionModifier,
+  ho as honeyVisibilityTransitionEffect,
   sr as media,
   Vt as pxToRem,
   bt as resolveColor,