@shmidko61/lc-ui-kit 0.13.0 → 0.16.0

package/dist/box.js

@@ -1,60 +1,215 @@
-import { jsx as bo } from "react/jsx-runtime";
-import { forwardRef as mo } from "react";
-import { a as H, c as po } from "./responsive-style.config-DFuATrIM.js";
-function Z({
-  background: t,
-  backgroundColor: o,
+import { jsx as xt } from "react/jsx-runtime";
+import { forwardRef as Bt, useMemo as kt } from "react";
+import { a as x, r as Rt, c as St } from "./responsive-style.config-DFuATrIM.js";
+import { n as V } from "./responsive-style.utils-D10sC561.js";
+function Ct(o) {
+  return [o.animation, ...x.map((t) => o[t]?.animation)].some(
+    (t) => t === "spin" || typeof t == "object" && t !== null && (Array.isArray(t.keyframes) || t.preset === "spin")
+  );
+}
+function U(o, t) {
+  if (typeof o == "number") return Number.isFinite(o) ? o : t;
+  if (o === void 0) return t;
+  const i = /^\s*(-?(?:\d+(?:\.\d*)?|\.\d+))(ms|s)\s*$/.exec(o);
+  return i ? Number(i[1]) * (i[2] === "s" ? 1e3 : 1) : t;
+}
+function tt(o, t, i) {
+  const n = x.map(
+    (e) => window.matchMedia("(min-width: " + Rt[e] + ")")
+  ), s = window.matchMedia("(prefers-reduced-motion: reduce)");
+  let r, d = "";
+  const u = () => {
+    let e = {};
+    const c = [
+      t.animation,
+      ...x.map(
+        (h, m) => n[m].matches ? t[h]?.animation : void 0
+      )
+    ];
+    for (const h of c)
+      if (h !== void 0)
+        if (h === "none") e = {};
+        else {
+          const m = h === "spin" ? { preset: "spin", keyframes: null } : h;
+          e = {
+            ...e,
+            ...m,
+            ...m.easing !== void 0 ? { timingFunction: m.easing } : {},
+            ...m.iterations !== void 0 ? { iterationCount: m.iterations === 1 / 0 ? "infinite" : m.iterations } : {}
+          };
+        }
+    const b = e.keyframes ?? (e.preset === "spin" ? [{ transform: "rotate(0deg)" }, { transform: "rotate(360deg)" }] : void 0), f = i?.animation !== void 0 || i?.animationName !== void 0 || s.matches && e.reducedMotion !== "keep", l = b?.map(
+      (h) => Object.fromEntries(
+        Object.entries(h).filter(
+          ([m]) => m === "offset" || m === "easing" || m === "composite" || !(m in (i ?? {}))
+        )
+      )
+    ), p = JSON.stringify([l, e, f]);
+    d !== p && (d = p, r?.cancel(), r = void 0, !(!l?.length || f || typeof o.animate != "function") && (r = o.animate(l, {
+      duration: Math.max(0, U(i?.animationDuration ?? e.duration, 1e3)),
+      delay: U(i?.animationDelay ?? e.delay, 0),
+      easing: i?.animationTimingFunction ?? e.timingFunction ?? "linear",
+      iterations: i?.animationIterationCount !== void 0 ? i.animationIterationCount === "infinite" ? 1 / 0 : Math.max(0, Number(i.animationIterationCount)) : e.iterationCount === "infinite" || e.iterationCount === void 0 ? 1 / 0 : Math.max(0, e.iterationCount),
+      direction: i?.animationDirection ?? e.direction ?? "normal",
+      fill: i?.animationFillMode ?? e.fillMode ?? "none"
+    }), (i?.animationPlayState ?? e.playState) === "paused" && r.pause()));
+  };
+  for (const e of [...n, s]) e.addEventListener("change", u);
+  return u(), () => {
+    for (const e of [...n, s]) e.removeEventListener("change", u);
+    r?.cancel();
+  };
+}
+function Wt(o, t, i) {
+  return (n) => {
+    if (typeof o == "function") {
+      const r = o(n);
+      if (!n) return;
+      const d = tt(n, t, i);
+      return () => {
+        d(), typeof r == "function" ? r() : o(null);
+      };
+    }
+    if (o && (o.current = n), !n) return;
+    const s = tt(n, t, i);
+    return () => {
+      s(), o && (o.current = null);
+    };
+  };
+}
+function zt(o, t, i) {
+  if (o.scrollbar === void 0 && x.every((r) => o[r]?.scrollbar === void 0))
+    return;
+  let n = {};
+  const s = [
+    { value: o.scrollbar, prefix: "", variable: "" },
+    ...x.map((r) => ({
+      value: o[r]?.scrollbar,
+      prefix: `${r}:`,
+      variable: `${r}-`
+    }))
+  ];
+  t.push("lc-scrollbar");
+  for (const [r, { value: d, prefix: u, variable: e }] of s.entries()) {
+    if (d !== void 0 && (n = d === null ? {} : {
+      ...n,
+      ...Object.fromEntries(Object.entries(d).filter(([, l]) => l !== void 0))
+    }), Object.entries(n).some(
+      ([l, p]) => l === "buttons" ? p === "hidden" : l !== "fallbackWidth" && p != null && (typeof p != "number" || Number.isFinite(p) && p >= 0)
+    )) {
+      const l = x[r], p = `${u}${l ? `max-${l}:` : ""}`;
+      t.push(`${p}lc-scrollbar-custom`);
+    }
+    if (d === void 0) continue;
+    const c = n.thumbColor, b = n.trackColor, f = {
+      size: K(n.size, "auto"),
+      "thumb-color": c == null ? "initial" : V(c),
+      "track-color": b == null ? "initial" : V(b),
+      "thumb-radius": K(n.thumbRadius, "initial"),
+      "track-radius": K(n.trackRadius, "initial"),
+      buttons: n.buttons === "hidden" ? "none" : "initial",
+      width: n.fallbackWidth ?? "auto",
+      // Стандартный API требует пару цветов; незаданный цвет берётся из системной палитры.
+      colors: c == null && b == null ? "auto" : `${c == null ? "CanvasText" : V(c)} ${b == null ? "Canvas" : V(b)}`
+    };
+    for (const [l, p] of Object.entries(f))
+      i[`--${e}scrollbar-${l}`] = p, t.push(`${u}[--lc-scrollbar-${l}:var(--${e}scrollbar-${l})]`);
+  }
+}
+function K(o, t) {
+  return o == null ? t : typeof o == "number" ? Number.isFinite(o) && o >= 0 ? `${o}px` : t : V(o);
+}
+function nt({
+  background: o,
+  backgroundColor: t,
   bg: i,
-  bgSize: a,
-  bgRepeat: n,
-  bgPosition: s,
-  border: p,
-  boxShadow: c,
-  color: r,
-  cursor: u,
-  opacity: l,
-  overflow: d,
-  overflowX: v,
-  overflowY: y,
-  pointerEvents: B,
-  aspectRatio: h,
-  transform: g,
-  transformOrigin: b,
+  bgSize: n,
+  bgRepeat: s,
+  bgPosition: r,
+  border: d,
+  boxShadow: u,
+  color: e,
+  cursor: c,
+  opacity: b,
+  overflow: f,
+  overflowX: l,
+  overflowY: p,
+  pointerEvents: h,
+  aspectRatio: m,
+  transform: y,
+  transformOrigin: g,
   p: S,
-  m: x,
+  m: C,
   outlineColor: k,
   outlineWidth: R,
   outlineOffset: W,
-  outlineStyle: L,
-  listStyle: C,
-  display: w,
-  position: m,
+  outlineStyle: T,
+  listStyle: z,
+  display: I,
+  position: $,
   width: P,
-  maxWidth: N,
-  minWidth: I,
-  height: j,
-  maxHeight: O,
+  maxWidth: j,
+  minWidth: O,
+  height: M,
+  maxHeight: A,
   minHeight: E
 }) {
-  const e = {};
-  return i !== void 0 ? wo(e, i) : t !== void 0 && (e.background = G(t)), o !== void 0 && (e.backgroundColor = G(o)), a !== void 0 && (e.backgroundSize = To(a)), n !== void 0 && (e.backgroundRepeat = Vo(n)), s !== void 0 && (e.backgroundPosition = Lo(s)), Ro(e, p), c !== void 0 && (e.boxShadow = $(c)), r !== void 0 && (e.color = $(r)), u !== void 0 && (e.cursor = u), l !== void 0 && (e.opacity = typeof l == "number" ? l : $(l)), d !== void 0 && (e.overflowX = d, e.overflowY = d), v !== void 0 && (e.overflowX = v), y !== void 0 && (e.overflowY = y), B !== void 0 && (e.pointerEvents = B), h !== void 0 && (e.aspectRatio = typeof h == "number" ? String(h) : $(h)), g !== void 0 && (e.transform = $(g)), b !== void 0 && (e.transformOrigin = $(b)), yo(e, S), ko(e, x), k !== void 0 && (e.outlineColor = $(k)), R !== void 0 && (e.outlineWidth = R), W !== void 0 && (e.outlineOffset = W), L !== void 0 && (e.outlineStyle = L), C?.position !== void 0 && (e.listStylePosition = C.position), C?.type !== void 0 && (e.listStyleType = C.type), w !== void 0 && (e.display = zo(w)), m?.type !== void 0 && (e.position = m.type), m?.top !== void 0 && (e.top = A(m.top)), m?.left !== void 0 && (e.left = A(m.left)), m?.right !== void 0 && (e.right = A(m.right)), m?.bottom !== void 0 && (e.bottom = A(m.bottom)), m?.zIndex !== void 0 && (e.zIndex = m.zIndex), P !== void 0 && (e.width = z(P)), N !== void 0 && (e.maxWidth = z(N)), I !== void 0 && (e.minWidth = z(I)), j !== void 0 && (e.height = z(j)), O !== void 0 && (e.maxHeight = z(O)), E !== void 0 && (e.minHeight = z(E)), Object.keys(e).length > 0 ? e : void 0;
-}
-function go(t) {
-  const o = [], i = {}, a = t.groupParent === !0;
-  K(t, o, i, { isGroupParent: a });
-  for (const n of H) {
-    const s = t[n];
-    s && K(s, o, i, {
-      classPrefix: `${n}:`,
-      variablePrefix: `${n}-`,
-      isGroupParent: a
+  const a = {};
+  return i !== void 0 ? Kt(a, i) : o !== void 0 && (a.background = H(o)), t !== void 0 && (a.backgroundColor = H(t)), n !== void 0 && (a.backgroundSize = Ht(n)), s !== void 0 && (a.backgroundRepeat = Gt(s)), r !== void 0 && (a.backgroundPosition = qt(r)), Ot(a, d), u !== void 0 && (a.boxShadow = B(u)), e !== void 0 && (a.color = B(e)), c !== void 0 && (a.cursor = c), b !== void 0 && (a.opacity = typeof b == "number" ? b : B(b)), f !== void 0 && (a.overflowX = f, a.overflowY = f), l !== void 0 && (a.overflowX = l), p !== void 0 && (a.overflowY = p), h !== void 0 && (a.pointerEvents = h), m !== void 0 && (a.aspectRatio = typeof m == "number" ? String(m) : B(m)), y !== void 0 && (a.transform = B(y)), g !== void 0 && (a.transformOrigin = B(g)), Pt(a, S), jt(a, C), k !== void 0 && (a.outlineColor = B(k)), R !== void 0 && (a.outlineWidth = R), W !== void 0 && (a.outlineOffset = W), T !== void 0 && (a.outlineStyle = T), z?.position !== void 0 && (a.listStylePosition = z.position), z?.type !== void 0 && (a.listStyleType = z.type), I !== void 0 && (a.display = Dt(I)), $?.type !== void 0 && (a.position = $.type), $?.top !== void 0 && (a.top = D($.top)), $?.left !== void 0 && (a.left = D($.left)), $?.right !== void 0 && (a.right = D($.right)), $?.bottom !== void 0 && (a.bottom = D($.bottom)), $?.zIndex !== void 0 && (a.zIndex = $.zIndex), P !== void 0 && (a.width = w(P)), j !== void 0 && (a.maxWidth = w(j)), O !== void 0 && (a.minWidth = w(O)), M !== void 0 && (a.height = w(M)), A !== void 0 && (a.maxHeight = w(A)), E !== void 0 && (a.minHeight = w(E)), Object.keys(a).length > 0 ? a : void 0;
+}
+function wt(o) {
+  const t = [], i = {}, n = o.groupParent === !0;
+  it(o, t, i, { isGroupParent: n });
+  for (const s of x) {
+    const r = o[s];
+    r && it(r, t, i, {
+      classPrefix: `${s}:`,
+      variablePrefix: `${s}-`,
+      isGroupParent: n
     });
   }
-  return ho(t, o, i), {
-    className: o.join(" "),
+  return zt(o, t, i), Tt(o, t, i), Lt(o, t, i), {
+    className: t.join(" "),
     style: Object.keys(i).length > 0 ? i : void 0
   };
 }
+function Tt(o, t, i) {
+  let n = {};
+  const s = [
+    { value: o.animation, prefix: "", variable: "" },
+    ...x.map((r) => ({
+      value: o[r]?.animation,
+      prefix: r + ":",
+      variable: r + "-"
+    }))
+  ];
+  for (const r of s)
+    if (r.value !== void 0) {
+      if (r.value === "none")
+        n = {}, i[`--${r.variable}animation`] = "none";
+      else {
+        const d = r.value === "spin" ? { preset: "spin", keyframes: null } : r.value;
+        n = {
+          ...n,
+          ...d,
+          ...d.easing !== void 0 ? { timingFunction: d.easing } : {},
+          ...d.iterations !== void 0 ? { iterationCount: d.iterations === 1 / 0 ? "infinite" : d.iterations } : {}
+        };
+        const u = n.keyframes || n.preset === "spin" ? "none" : n.preset ?? "none";
+        i[`--${r.variable}animation`] = [
+          u,
+          typeof n.duration == "number" ? n.duration + "ms" : n.duration ?? "1s",
+          n.timingFunction ?? "linear",
+          typeof n.delay == "number" ? n.delay + "ms" : n.delay ?? "0ms",
+          n.iterationCount ?? "infinite",
+          n.direction ?? "normal",
+          n.fillMode ?? "none",
+          n.playState ?? "running"
+        ].join(" ");
+      }
+      t.push(`${r.prefix}[animation:var(--${r.variable}animation)]`);
+    }
+}
 const X = [
   {
     prop: "hover",
@@ -77,114 +232,114 @@ const X = [
     variant: "[&:is(:disabled,[aria-disabled=true],[data-disabled=true]):is(:disabled,[aria-disabled=true],[data-disabled=true])]"
   }
 ];
-function ho(t, o, i) {
-  const a = [t, ...H.map((r) => t[r] ?? {})], n = /* @__PURE__ */ new Set();
-  for (const r of X)
-    for (const u of a)
-      Object.keys(F(u, r.prop)).forEach(
-        (l) => n.add(l)
-      ), r.prop === "hover" && u.hover === null && n.add("backgroundColor");
-  if (n.size === 0) return;
-  for (const r of n) {
-    const u = D(r);
-    for (const l of X)
-      o.push(`[--ui-state-${l.name}-${u}:initial]`);
+function Lt(o, t, i) {
+  const n = [o, ...x.map((e) => o[e] ?? {})], s = /* @__PURE__ */ new Set();
+  for (const e of X)
+    for (const c of n)
+      Object.keys(ot(c, e.prop)).forEach(
+        (b) => s.add(b)
+      ), e.prop === "hover" && c.hover === null && s.add("backgroundColor");
+  if (s.size === 0) return;
+  for (const e of s) {
+    const c = J(e);
+    for (const b of X)
+      t.push(`[--ui-state-${b.name}-${c}:initial]`);
   }
-  let s = {};
-  const p = /* @__PURE__ */ new Map(), c = /* @__PURE__ */ new Map();
-  a.forEach((r, u) => {
-    s = { ...s, ...Y(r) };
-    const l = u === 0 ? "" : `${H[u - 1]}:`;
-    for (const d of X) {
-      const v = p.get(d.name) ?? {}, y = F(r, d.prop), B = r[d.prop] === null ? {} : { ...v, ...y }, h = c.get(d.name) ?? /* @__PURE__ */ new Set();
-      Object.keys(y).forEach((g) => h.add(g)), d.prop === "hover" && r.hover === null && h.add("backgroundColor"), p.set(d.name, B), c.set(d.name, h);
-      for (const g of h) {
-        const b = D(g), S = s[g] ?? vo(g, u), x = `--ui-state-normal-${u}-${b}`;
-        i[x] = String(S);
-        const k = `--${d.name}-${u}-${b}`;
-        i[k] = String(B[g] ?? S);
-        const R = `--ui-state-value-${d.name}-${u}-${b}`;
-        i[R] = B[g] === void 0 ? "initial" : `var(${k})`;
-        const W = `var(--ui-state-disabled-${b},var(--ui-state-active-${b},var(--ui-state-focus-visible-${b},var(--ui-state-hover-${b},var(${x})))))`;
-        o.push(
-          `${l}${d.variant}:[--ui-state-${d.name}-${b}:var(${R})]`,
-          `${l}${d.variant}:[${b}:${W}]`
+  let r = {};
+  const d = /* @__PURE__ */ new Map(), u = /* @__PURE__ */ new Map();
+  n.forEach((e, c) => {
+    r = { ...r, ...Y(e) };
+    const b = c === 0 ? "" : `${x[c - 1]}:`;
+    for (const f of X) {
+      const l = d.get(f.name) ?? {}, p = ot(e, f.prop), h = e[f.prop] === null ? {} : { ...l, ...p }, m = u.get(f.name) ?? /* @__PURE__ */ new Set();
+      Object.keys(p).forEach((y) => m.add(y)), f.prop === "hover" && e.hover === null && m.add("backgroundColor"), d.set(f.name, h), u.set(f.name, m);
+      for (const y of m) {
+        const g = J(y), S = r[y] ?? Nt(y, c), C = `--ui-state-normal-${c}-${g}`;
+        i[C] = String(S);
+        const k = `--${f.name}-${c}-${g}`;
+        i[k] = String(h[y] ?? S);
+        const R = `--ui-state-value-${f.name}-${c}-${g}`;
+        i[R] = h[y] === void 0 ? "initial" : `var(${k})`;
+        const W = `var(--ui-state-disabled-${g},var(--ui-state-active-${g},var(--ui-state-focus-visible-${g},var(--ui-state-hover-${g},var(${C})))))`;
+        t.push(
+          `${b}${f.variant}:[--ui-state-${f.name}-${g}:var(${R})]`,
+          `${b}${f.variant}:[${g}:${W}]`
         );
       }
     }
   });
 }
-function F(t, o) {
-  const i = t[o];
-  return i ? o !== "hover" && "outlineWidth" in i && i.outlineStyle === void 0 ? Y({ ...i, outlineStyle: "solid" }) : Y(i) : {};
+function ot(o, t) {
+  const i = o[t];
+  return i ? t !== "hover" && "outlineWidth" in i && i.outlineStyle === void 0 ? Y({ ...i, outlineStyle: "solid" }) : Y(i) : {};
 }
-function vo(t, o) {
-  const i = t === "color" ? "inherit" : "initial";
-  if (t !== "background" && t !== "backgroundColor" && t !== "color")
+function Nt(o, t) {
+  const i = o === "color" ? "inherit" : "initial";
+  if (o !== "background" && o !== "backgroundColor" && o !== "color")
     return i;
-  const a = t === "color" ? "color" : "bg";
-  let n = `var(--button-${a},${i})`;
-  for (let s = 0; s < o; s += 1)
-    n = `var(--${H[s]}-button-${a},${n})`;
-  return n;
-}
-function Y(t) {
-  const o = { ...Z(t) };
-  if (o.borderWidth !== void 0) {
-    const i = String(o.borderWidth).split(/\s+(?![^()]*\))/), a = i[0], n = i[1] ?? a, s = i[2] ?? a, p = i[3] ?? n;
-    Object.assign(o, {
-      borderTopWidth: a,
-      borderRightWidth: n,
-      borderBottomWidth: s,
-      borderLeftWidth: p
-    }), delete o.borderWidth;
+  const n = o === "color" ? "color" : "bg";
+  let s = `var(--button-${n},${i})`;
+  for (let r = 0; r < t; r += 1)
+    s = `var(--${x[r]}-button-${n},${s})`;
+  return s;
+}
+function Y(o) {
+  const t = { ...nt(o) };
+  if (t.borderWidth !== void 0) {
+    const i = String(t.borderWidth).split(/\s+(?![^()]*\))/), n = i[0], s = i[1] ?? n, r = i[2] ?? n, d = i[3] ?? s;
+    Object.assign(t, {
+      borderTopWidth: n,
+      borderRightWidth: s,
+      borderBottomWidth: r,
+      borderLeftWidth: d
+    }), delete t.borderWidth;
   }
-  if (o.borderRadius !== void 0) {
-    const [i, a = i] = String(o.borderRadius).split("/"), n = (c) => {
-      const r = c.trim().split(/\s+(?![^()]*\))/);
+  if (t.borderRadius !== void 0) {
+    const [i, n = i] = String(t.borderRadius).split("/"), s = (u) => {
+      const e = u.trim().split(/\s+(?![^()]*\))/);
       return [
-        r[0],
-        r[1] ?? r[0],
-        r[2] ?? r[0],
-        r[3] ?? r[1] ?? r[0]
+        e[0],
+        e[1] ?? e[0],
+        e[2] ?? e[0],
+        e[3] ?? e[1] ?? e[0]
       ];
-    }, s = n(i), p = n(a);
-    ["TopLeft", "TopRight", "BottomRight", "BottomLeft"].forEach((c, r) => {
-      o[`border${c}Radius`] = `${s[r]} ${p[r]}`;
-    }), delete o.borderRadius;
+    }, r = s(i), d = s(n);
+    ["TopLeft", "TopRight", "BottomRight", "BottomLeft"].forEach((u, e) => {
+      t[`border${u}Radius`] = `${r[e]} ${d[e]}`;
+    }), delete t.borderRadius;
   }
-  return o;
+  return t;
 }
-function K(t, o, i, {
-  classPrefix: a = "",
-  variablePrefix: n = "",
-  isGroupParent: s = !1
+function it(o, t, i, {
+  classPrefix: n = "",
+  variablePrefix: s = "",
+  isGroupParent: r = !1
 } = {}) {
-  const p = Z(t);
-  for (const [c, r] of Object.entries(p ?? {})) {
-    if (r == null)
+  const d = nt(o);
+  for (const [u, e] of Object.entries(d ?? {})) {
+    if (e == null)
       continue;
-    const u = String(r), l = $o(c, u);
-    if (l) {
-      o.push(`${a}${l}`);
+    const c = String(e), b = Vt(u, c);
+    if (b) {
+      t.push(`${n}${b}`);
       continue;
     }
-    const d = `${n}${D(c)}`, v = Bo(c, d);
-    v && (i[`--${d}`] = u, o.push(`${a}${v}`));
+    const f = `${s}${J(u)}`, l = It(u, f);
+    l && (i[`--${f}`] = c, t.push(`${n}${l}`));
   }
-  if (t.bgGroup !== void 0) {
-    const c = `${n}group-background`;
-    i[`--${c}`] = G(t.bgGroup), o.push(`${a}group-hover:[background:var(--${c})]`), s && o.push(`${a}hover:[background:var(--${c})]`);
+  if (o.bgGroup !== void 0) {
+    const u = `${s}group-background`;
+    i[`--${u}`] = H(o.bgGroup), t.push(`${n}group-hover:[background:var(--${u})]`), r && t.push(`${n}hover:[background:var(--${u})]`);
   }
 }
-function $o(t, o) {
-  if (t === "display")
-    return o === "none" ? "hidden" : o;
-  if (t === "position")
-    return o === "inherit" ? "[position:inherit]" : o;
-  if (t === "cursor")
-    return `cursor-${o}`;
-  if (t === "backgroundRepeat")
+function Vt(o, t) {
+  if (o === "display")
+    return t === "none" ? "hidden" : t;
+  if (o === "position")
+    return t === "inherit" ? "[position:inherit]" : t;
+  if (o === "cursor")
+    return `cursor-${t}`;
+  if (o === "backgroundRepeat")
     return {
       "no-repeat": "bg-no-repeat",
       repeat: "bg-repeat",
@@ -192,14 +347,14 @@ function $o(t, o) {
       space: "bg-repeat-space",
       "repeat-x": "bg-repeat-x",
       "repeat-y": "bg-repeat-y"
-    }[o];
-  if (t === "backgroundSize")
+    }[t];
+  if (o === "backgroundSize")
     return {
       auto: "bg-auto",
       contain: "bg-contain",
       cover: "bg-cover"
-    }[o];
-  if (t === "backgroundPosition")
+    }[t];
+  if (o === "backgroundPosition")
     return {
       bottom: "bg-bottom",
       center: "bg-center",
@@ -210,18 +365,18 @@ function $o(t, o) {
       "right bottom": "bg-right-bottom",
       "right top": "bg-right-top",
       top: "bg-top"
-    }[o];
-  if (t === "borderStyle")
-    return o === "none" ? "border-none" : `border-${o}`;
-  if (t === "outlineStyle")
-    return o === "none" ? "outline-none" : `outline-${o}`;
-  if (t === "listStylePosition")
-    return `list-${o}`;
-  if (t === "listStyleType")
-    return `list-${o}`;
-}
-function Bo(t, o) {
-  const i = `var(--${o})`;
+    }[t];
+  if (o === "borderStyle")
+    return t === "none" ? "border-none" : `border-${t}`;
+  if (o === "outlineStyle")
+    return t === "none" ? "outline-none" : `outline-${t}`;
+  if (o === "listStylePosition")
+    return `list-${t}`;
+  if (o === "listStyleType")
+    return `list-${t}`;
+}
+function It(o, t) {
+  const i = `var(--${t})`;
   return {
     background: `[background:${i}]`,
     backgroundColor: `bg-[${i}]`,
@@ -271,82 +426,82 @@ function Bo(t, o) {
     transformOrigin: `[transform-origin:${i}]`,
     width: `w-[${i}]`,
     zIndex: `z-[${i}]`
-  }[t];
+  }[o];
 }
-function D(t) {
-  return t.replace(/[A-Z]/g, (o) => `-${o.toLowerCase()}`);
+function J(o) {
+  return o.replace(/[A-Z]/g, (t) => `-${t.toLowerCase()}`);
 }
-function yo(t, o) {
-  if (o !== void 0) {
-    if (Array.isArray(o)) {
-      t.padding = o.map(f).join(" ");
+function Pt(o, t) {
+  if (t !== void 0) {
+    if (Array.isArray(t)) {
+      o.padding = t.map(v).join(" ");
       return;
     }
-    if (typeof o != "object") {
-      t.padding = f(o);
+    if (typeof t != "object") {
+      o.padding = v(t);
       return;
     }
-    "px" in o && o.px !== void 0 && (t.paddingLeft = f(o.px), t.paddingRight = f(o.px)), "py" in o && o.py !== void 0 && (t.paddingTop = f(o.py), t.paddingBottom = f(o.py)), "pt" in o && o.pt !== void 0 && (t.paddingTop = f(o.pt)), "pb" in o && o.pb !== void 0 && (t.paddingBottom = f(o.pb)), "pl" in o && o.pl !== void 0 && (t.paddingLeft = f(o.pl)), "pr" in o && o.pr !== void 0 && (t.paddingRight = f(o.pr));
+    "px" in t && t.px !== void 0 && (o.paddingLeft = v(t.px), o.paddingRight = v(t.px)), "py" in t && t.py !== void 0 && (o.paddingTop = v(t.py), o.paddingBottom = v(t.py)), "pt" in t && t.pt !== void 0 && (o.paddingTop = v(t.pt)), "pb" in t && t.pb !== void 0 && (o.paddingBottom = v(t.pb)), "pl" in t && t.pl !== void 0 && (o.paddingLeft = v(t.pl)), "pr" in t && t.pr !== void 0 && (o.paddingRight = v(t.pr));
   }
 }
-function ko(t, o) {
-  if (o !== void 0) {
-    if (Array.isArray(o)) {
-      t.margin = o.map(f).join(" ");
+function jt(o, t) {
+  if (t !== void 0) {
+    if (Array.isArray(t)) {
+      o.margin = t.map(v).join(" ");
       return;
     }
-    if (typeof o != "object") {
-      t.margin = f(o);
+    if (typeof t != "object") {
+      o.margin = v(t);
       return;
     }
-    "mx" in o && o.mx !== void 0 && (t.marginLeft = f(o.mx), t.marginRight = f(o.mx)), "my" in o && o.my !== void 0 && (t.marginTop = f(o.my), t.marginBottom = f(o.my)), "mt" in o && o.mt !== void 0 && (t.marginTop = f(o.mt)), "mb" in o && o.mb !== void 0 && (t.marginBottom = f(o.mb)), "ml" in o && o.ml !== void 0 && (t.marginLeft = f(o.ml)), "mr" in o && o.mr !== void 0 && (t.marginRight = f(o.mr));
+    "mx" in t && t.mx !== void 0 && (o.marginLeft = v(t.mx), o.marginRight = v(t.mx)), "my" in t && t.my !== void 0 && (o.marginTop = v(t.my), o.marginBottom = v(t.my)), "mt" in t && t.mt !== void 0 && (o.marginTop = v(t.mt)), "mb" in t && t.mb !== void 0 && (o.marginBottom = v(t.mb)), "ml" in t && t.ml !== void 0 && (o.marginLeft = v(t.ml)), "mr" in t && t.mr !== void 0 && (o.marginRight = v(t.mr));
   }
 }
-function Ro(t, o) {
-  o && (o.radius !== void 0 && So(t, o.radius), o.color !== void 0 && (t.borderColor = $(o.color)), o.width !== void 0 && xo(t, o.width), o.style !== void 0 && (t.borderStyle = o.style));
+function Ot(o, t) {
+  t && (t.radius !== void 0 && Mt(o, t.radius), t.color !== void 0 && (o.borderColor = B(t.color)), t.width !== void 0 && At(o, t.width), t.style !== void 0 && (o.borderStyle = t.style));
 }
-function So(t, o) {
-  if (Wo(o)) {
-    o.topLeft !== void 0 && (t.borderTopLeftRadius = T(o.topLeft)), o.topRight !== void 0 && (t.borderTopRightRadius = T(o.topRight)), o.bottomLeft !== void 0 && (t.borderBottomLeftRadius = T(o.bottomLeft)), o.bottomRight !== void 0 && (t.borderBottomRightRadius = T(o.bottomRight));
+function Mt(o, t) {
+  if (Et(t)) {
+    t.topLeft !== void 0 && (o.borderTopLeftRadius = L(t.topLeft)), t.topRight !== void 0 && (o.borderTopRightRadius = L(t.topRight)), t.bottomLeft !== void 0 && (o.borderBottomLeftRadius = L(t.bottomLeft)), t.bottomRight !== void 0 && (o.borderBottomRightRadius = L(t.bottomRight));
     return;
   }
-  t.borderRadius = T(o);
+  o.borderRadius = L(t);
 }
-function xo(t, o) {
-  if (Co(o)) {
-    o.top !== void 0 && (t.borderTopWidth = V(o.top)), o.bottom !== void 0 && (t.borderBottomWidth = V(o.bottom)), o.left !== void 0 && (t.borderLeftWidth = V(o.left)), o.right !== void 0 && (t.borderRightWidth = V(o.right));
+function At(o, t) {
+  if (Ft(t)) {
+    t.top !== void 0 && (o.borderTopWidth = N(t.top)), t.bottom !== void 0 && (o.borderBottomWidth = N(t.bottom)), t.left !== void 0 && (o.borderLeftWidth = N(t.left)), t.right !== void 0 && (o.borderRightWidth = N(t.right));
     return;
   }
-  t.borderWidth = V(o);
+  o.borderWidth = N(t);
 }
-function Wo(t) {
-  return typeof t == "object";
+function Et(o) {
+  return typeof o == "object";
 }
-function Co(t) {
-  return typeof t == "object";
+function Ft(o) {
+  return typeof o == "object";
 }
-function T(t) {
-  return t.startsWith("--") ? `var(${t})` : t;
+function L(o) {
+  return o.startsWith("--") ? `var(${o})` : o;
 }
-function V(t) {
-  return t.startsWith("--") ? `var(${t})` : t;
+function N(o) {
+  return o.startsWith("--") ? `var(${o})` : o;
 }
-function zo(t) {
-  return t === "hidden" ? "none" : t;
+function Dt(o) {
+  return o === "hidden" ? "none" : o;
 }
-function A(t) {
-  return typeof t == "number" ? `${t}px` : t;
+function D(o) {
+  return typeof o == "number" ? `${o}px` : o;
 }
-function f(t) {
-  return typeof t == "number" ? `${t}px` : t;
+function v(o) {
+  return typeof o == "number" ? `${o}px` : o;
 }
-function z(t) {
-  return typeof t == "number" ? `${t}px` : t;
+function w(o) {
+  return typeof o == "number" ? `${o}px` : o;
 }
-function To(t) {
-  return typeof t == "number" ? `${t}px` : t;
+function Ht(o) {
+  return typeof o == "number" ? `${o}px` : o;
 }
-function Vo(t) {
+function Gt(o) {
   return {
     "no-repeat": "no-repeat",
     repeat: "repeat",
@@ -354,137 +509,151 @@ function Vo(t) {
     "repeat-space": "space",
     "repeat-x": "repeat-x",
     "repeat-y": "repeat-y"
-  }[t];
+  }[o];
 }
-function Lo(t) {
-  return t.replace("-", " ");
+function qt(o) {
+  return o.replace("-", " ");
 }
-function G(t) {
-  return $(t);
+function H(o) {
+  return B(o);
 }
-function wo(t, o) {
-  const i = G(o);
-  if (Po(o)) {
-    t.background = i;
+function Kt(o, t) {
+  const i = H(t);
+  if (Xt(t)) {
+    o.background = i;
     return;
   }
-  t.backgroundColor = i;
+  o.backgroundColor = i;
 }
-function Po(t) {
-  const o = t.trim().toLowerCase();
-  return o.includes("url(") || o.includes("gradient(") || o.includes("image-set(") || o.includes("cross-fade(") || o.includes("element(") || o.includes("paint(");
+function Xt(o) {
+  const t = o.trim().toLowerCase();
+  return t.includes("url(") || t.includes("gradient(") || t.includes("image-set(") || t.includes("cross-fade(") || t.includes("element(") || t.includes("paint(");
 }
-function $(t) {
-  return t.startsWith("--") ? `var(${t})` : t;
+function B(o) {
+  return o.startsWith("--") ? `var(${o})` : o;
 }
-function No(t, o) {
+function Yt(o, t) {
   const {
     as: i,
-    children: a,
-    className: n,
-    background: s,
-    backgroundColor: p,
-    bg: c,
-    bgSize: r,
-    bgRepeat: u,
-    bgGroup: l,
-    groupParent: d,
-    bgPosition: v,
-    border: y,
-    boxShadow: B,
-    color: h,
-    cursor: g,
-    opacity: b,
+    children: n,
+    className: s,
+    background: r,
+    backgroundColor: d,
+    bg: u,
+    bgSize: e,
+    bgRepeat: c,
+    bgGroup: b,
+    groupParent: f,
+    bgPosition: l,
+    border: p,
+    boxShadow: h,
+    color: m,
+    cursor: y,
+    opacity: g,
     overflow: S,
-    overflowX: x,
+    overflowX: C,
     overflowY: k,
-    pointerEvents: R,
-    aspectRatio: W,
-    transform: L,
-    transformOrigin: C,
-    p: w,
-    m,
-    outlineColor: P,
-    outlineWidth: N,
-    outlineOffset: I,
-    outlineStyle: j,
-    listStyle: O,
-    display: E,
-    position: e,
-    width: q,
-    maxWidth: J,
-    minWidth: Q,
-    height: U,
-    hover: oo,
-    focusVisible: to,
-    active: io,
-    disabledStyle: eo,
-    maxHeight: ro,
-    minHeight: no,
-    md: ao,
-    lg: so,
-    xl: fo,
-    style: _,
-    ...co
-  } = t, uo = i ?? "div", M = go({
-    hover: oo,
-    focusVisible: to,
-    active: io,
-    disabledStyle: eo,
-    background: s,
-    backgroundColor: p,
-    bg: c,
-    bgSize: r,
-    bgRepeat: u,
-    bgGroup: l,
-    groupParent: d,
-    bgPosition: v,
-    border: y,
-    boxShadow: B,
-    color: h,
-    cursor: g,
-    opacity: b,
+    scrollbar: R,
+    pointerEvents: W,
+    animation: T,
+    aspectRatio: z,
+    transform: I,
+    transformOrigin: $,
+    p: P,
+    m: j,
+    outlineColor: O,
+    outlineWidth: M,
+    outlineOffset: A,
+    outlineStyle: E,
+    listStyle: a,
+    display: et,
+    position: rt,
+    width: at,
+    maxWidth: st,
+    minWidth: dt,
+    height: ut,
+    hover: ct,
+    focusVisible: ft,
+    active: lt,
+    disabledStyle: mt,
+    maxHeight: bt,
+    minHeight: pt,
+    md: _,
+    lg: Z,
+    xl: Q,
+    style: F,
+    ...vt
+  } = o, ht = i ?? "div", G = {
+    hover: ct,
+    focusVisible: ft,
+    active: lt,
+    disabledStyle: mt,
+    background: r,
+    backgroundColor: d,
+    bg: u,
+    bgSize: e,
+    bgRepeat: c,
+    bgGroup: b,
+    groupParent: f,
+    bgPosition: l,
+    border: p,
+    boxShadow: h,
+    color: m,
+    cursor: y,
+    opacity: g,
     overflow: S,
-    overflowX: x,
+    overflowX: C,
     overflowY: k,
-    pointerEvents: R,
-    aspectRatio: W,
-    transform: L,
-    transformOrigin: C,
-    p: w,
-    m,
-    outlineColor: P,
-    outlineWidth: N,
-    outlineOffset: I,
-    outlineStyle: j,
-    listStyle: O,
-    display: E,
-    position: e,
-    width: q,
-    maxWidth: J,
-    minWidth: Q,
-    height: U,
-    maxHeight: ro,
-    minHeight: no,
-    md: ao,
-    lg: so,
-    xl: fo
-  }), lo = M.style || _ ? {
-    ...M.style,
-    ..._
+    scrollbar: R,
+    pointerEvents: W,
+    animation: T,
+    aspectRatio: z,
+    transform: I,
+    transformOrigin: $,
+    p: P,
+    m: j,
+    outlineColor: O,
+    outlineWidth: M,
+    outlineOffset: A,
+    outlineStyle: E,
+    listStyle: a,
+    display: et,
+    position: rt,
+    width: at,
+    maxWidth: st,
+    minWidth: dt,
+    height: ut,
+    maxHeight: bt,
+    minHeight: pt,
+    md: _,
+    lg: Z,
+    xl: Q
+  }, gt = JSON.stringify([
+    T,
+    _?.animation,
+    Z?.animation,
+    Q?.animation,
+    F
+  ]), $t = kt(
+    () => Wt(t, G, F),
+    // Значения захваченных настроек представлены стабильным ключом.
+    [t, gt]
+  ), q = wt(G), yt = q.style || F ? {
+    ...q.style,
+    ...F
   } : void 0;
-  return /* @__PURE__ */ bo(
-    uo,
+  return /* @__PURE__ */ xt(
+    ht,
     {
-      className: po(M.className, d && "group", n),
-      ref: o,
-      style: lo,
-      ...co,
-      children: a
+      className: St(q.className, f && "group", s),
+      ref: Ct(G) ? $t : t,
+      style: yt,
+      ...vt,
+      children: n
     }
   );
 }
-const Ao = mo(No);
+const Ut = Bt(Yt);
 export {
-  Ao as Box
+  Ut as Box
 };