@shmidko61/lc-ui-kit 0.12.0 → 0.15.0

package/dist/box.js

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