quirk-ui 0.0.275 → 0.0.277

package/dist/assets/index29.css

@@ -1 +1 @@
-._carousel_1nskp_1{width:100%;overflow-x:hidden}@media (max-width: 767px){._carousel_1nskp_1{padding:0 var(--spacing-lg)}}._noPointerEvents_1nskp_10 *{pointer-events:none!important}._trackContainer_1nskp_14{overflow:hidden;width:100%}@media (max-width: 767px){._trackContainer_1nskp_14{overflow:visible}}._track_1nskp_14{display:flex;transition:transform .3s ease;will-change:transform}._page_1nskp_29{display:flex;gap:var(--spacing-md)}@media (max-wdith: 767px){._page_1nskp_29{justify-content:center;padding:0 var(--spacing-sm)}}._controls_1nskp_39{display:flex;justify-content:space-between;align-items:center;margin-top:var(--spacing-md);margin-left:auto;margin-right:auto;padding:0 var(--spacing-md);width:100%}._indicators_1nskp_50{display:flex;flex-wrap:wrap;max-width:125px;gap:var(--spacing-xs)}._indicator_1nskp_50{width:10px;height:10px;border-radius:50%;background-color:#e0e0e0;border:1px solid #fff;cursor:pointer;transition:background-color .3s}._indicator_1nskp_50._active_1nskp_67{background-color:var(--color-primary-100)}._buttons_1nskp_71{display:flex;gap:var(--spacing-md)}._prev_1nskp_76._disabled_1nskp_76,._next_1nskp_77._disabled_1nskp_76{opacity:.5;pointer-events:none}._buttons_1nskp_71 button:not(._disabled_1nskp_76):hover{background-color:var(--color-primary-100);color:#fff}._prev_1nskp_76,._next_1nskp_77{background-color:#e0e0e0;color:var(--color-text-primary);border:1px solid #fff;padding:var(--spacing-sm);cursor:pointer;transition:background-color .3s,color .3s;border-radius:50%;width:40px;height:40px;display:flex;justify-content:center;align-items:center}
+._carousel_t51gu_1{width:100%;overflow-x:hidden}@media (max-width: 767px){._carousel_t51gu_1{padding:0 var(--spacing-lg)}}._noPointerEvents_t51gu_10 *{pointer-events:none!important}._trackContainer_t51gu_14{overflow:hidden;width:100%}@media (max-width: 767px){._trackContainer_t51gu_14{overflow:visible}}._track_t51gu_14{display:flex;transition:transform .3s ease;will-change:transform}._page_t51gu_29{display:flex;gap:var(--spacing-md)}@media (max-width: 767px){._page_t51gu_29{justify-content:center;padding:0 var(--spacing-sm)}}._controls_t51gu_39{display:flex;justify-content:space-between;align-items:center;margin-top:var(--spacing-md);margin-left:auto;margin-right:auto;padding:0 var(--spacing-md);width:100%}._indicators_t51gu_50{display:flex;flex-wrap:wrap;max-width:125px;gap:var(--spacing-xs)}._indicator_t51gu_50{width:10px;height:10px;border-radius:50%;background-color:#e0e0e0;border:1px solid #fff;cursor:pointer;transition:background-color .3s}._indicator_t51gu_50._active_t51gu_67{background-color:var(--color-primary-100)}._buttons_t51gu_71{display:flex;gap:var(--spacing-md)}._prev_t51gu_76._disabled_t51gu_76,._next_t51gu_77._disabled_t51gu_76{opacity:.5;pointer-events:none}._buttons_t51gu_71 button:not(._disabled_t51gu_76):hover{background-color:var(--color-primary-100);color:#fff}._prev_t51gu_76,._next_t51gu_77{background-color:#e0e0e0;color:var(--color-text-primary);border:1px solid #fff;padding:var(--spacing-sm);cursor:pointer;transition:background-color .3s,color .3s;border-radius:50%;width:40px;height:40px;display:flex;justify-content:center;align-items:center}

package/dist/components/Carousel/index.js

@@ -1,14 +1,14 @@
 import { jsxs as P, jsx as r } from "react/jsx-runtime";
-import { useState as o, useRef as X, useEffect as y, useLayoutEffect as Ct, useCallback as bt } from "react";
-import { A as $t, a as xt } from "../../arrow-right-CnuUc2oD.js";
-import '../../assets/index29.css';const Et = "_carousel_1nskp_1", Xt = "_noPointerEvents_1nskp_10", yt = "_trackContainer_1nskp_14", It = "_track_1nskp_14", Nt = "_page_1nskp_29", Tt = "_controls_1nskp_39", Wt = "_indicators_1nskp_50", At = "_indicator_1nskp_50", Dt = "_active_1nskp_67", Lt = "_buttons_1nskp_71", St = "_prev_1nskp_76", Pt = "_disabled_1nskp_76", Rt = "_next_1nskp_77", c = {
-  carousel: Et,
-  noPointerEvents: Xt,
-  trackContainer: yt,
+import { useState as o, useRef as y, useEffect as k, useLayoutEffect as bt, useCallback as xt } from "react";
+import { A as $t, a as Et } from "../../arrow-right-CnuUc2oD.js";
+import '../../assets/index29.css';const Xt = "_carousel_t51gu_1", yt = "_noPointerEvents_t51gu_10", kt = "_trackContainer_t51gu_14", It = "_track_t51gu_14", Nt = "_page_t51gu_29", Wt = "_controls_t51gu_39", Tt = "_indicators_t51gu_50", At = "_indicator_t51gu_50", Dt = "_active_t51gu_67", Lt = "_buttons_t51gu_71", St = "_prev_t51gu_76", Pt = "_disabled_t51gu_76", Rt = "_next_t51gu_77", c = {
+  carousel: Xt,
+  noPointerEvents: yt,
+  trackContainer: kt,
   track: It,
   page: Nt,
-  controls: Tt,
-  indicators: Wt,
+  controls: Wt,
+  indicators: Tt,
   indicator: At,
   active: Dt,
   buttons: Lt,
@@ -17,50 +17,50 @@ import '../../assets/index29.css';const Et = "_carousel_1nskp_1", Xt = "_noPoint
   next: Rt
 };
 function jt({
-  items: w,
-  itemsPerPage: d = 9,
+  items: m,
+  itemsPerPage: u = 9,
   itemsPerRow: V = 3,
   autoplay: Z = !1,
   autoplayInterval: R = 3,
   className: tt,
   externalRef: et,
-  siblingRef: u,
+  siblingRef: h,
   isSplit: z = !1
 }) {
-  const [h, f] = o(0), [l, b] = o(0), [p, I] = o(0), [v, nt] = o(d), [_, st] = o(!1), [Y, ot] = o(Z), [$, ct] = o(!1), rt = X(null), i = X(null), M = X(null), x = et, [k, N] = o(!1), [B, j] = o(null), [E, U] = o(null), [G, H] = o(null), [at, O] = o(!1), [g, q] = o(null), [T, F] = o(null), lt = (t) => {
-    Math.abs((T ?? 0) - (g ?? 0)) > 25 && (t.stopPropagation(), t.preventDefault());
+  const [f, p] = o(0), [a, x] = o(0), [v, I] = o(0), [i, nt] = o(u), [_, st] = o(!1), [Y, ot] = o(Z), [$, ct] = o(!1), rt = y(null), d = y(null), w = y(null), E = et, [M, N] = o(!1), [B, j] = o(null), [X, U] = o(null), [G, H] = o(null), [at, O] = o(!1), [C, q] = o(null), [W, F] = o(null), lt = (t) => {
+    Math.abs((W ?? 0) - (C ?? 0)) > 25 && (t.stopPropagation(), t.preventDefault());
   }, it = (t) => {
     q(t.clientX);
   }, dt = (t) => {
-    g !== null && Math.abs(t.clientX - g) > 5 && (O(!0), F(t.clientX));
+    C !== null && Math.abs(t.clientX - C) > 5 && (O(!0), F(t.clientX));
   }, ut = () => {
-    if (!g || !T) {
-      W();
+    if (!C || !W) {
+      T();
       return;
     }
-    const t = g - T;
-    Math.abs(t) > 50 && (t > 0 ? L() : S()), W();
+    const t = C - W;
+    Math.abs(t) > 50 && (t > 0 ? L() : S()), T();
   }, ht = () => {
-    W();
-  }, W = () => {
+    T();
+  }, T = () => {
     O(!1), q(null), F(null);
   }, ft = (t) => {
     U(t.touches[0].clientX), j(t.touches[0].clientY), N(!1);
-  }, J = X(null);
-  y(() => {
+  }, J = y(null);
+  k(() => {
     const t = J.current;
     if (!t) return;
     const e = (n) => {
-      const s = n.touches[0].clientX - (E ?? 0), a = n.touches[0].clientY - (B ?? 0);
-      !k && Math.abs(s) > Math.abs(a) && N(!0), k && (n.preventDefault(), H(n.touches[0].clientX));
+      const s = n.touches[0].clientX - (X ?? 0), l = n.touches[0].clientY - (B ?? 0);
+      !M && Math.abs(s) > Math.abs(l) && N(!0), M && (n.preventDefault(), H(n.touches[0].clientX));
     };
     return t.addEventListener("touchmove", e), () => {
       t.removeEventListener("touchmove", e);
     };
-  }, [k, E, B]);
+  }, [M, X, B]);
   const pt = () => {
-    if (E === null || G === null) return;
-    const t = E - G;
+    if (X === null || G === null) return;
+    const t = X - G;
     Math.abs(t) > 50 && (t > 0 ? L() : S()), U(null), H(null), j(null), N(!1);
   }, vt = (t, e) => {
     const n = [];
@@ -68,76 +68,76 @@ function jt({
       n.push(t.slice(s, s + e));
     return n;
   };
-  Ct(() => {
+  bt(() => {
     if (typeof window < "u") {
       const t = () => {
-        const e = window.innerWidth < 768, n = e ? 1 : d;
-        st(e), nt(e ? 1 : d), f(
-          (s) => Math.min(s, Math.ceil(w.length / n) - 1)
+        const e = window.innerWidth < 768, n = e ? 1 : u;
+        st(e), nt(e ? 1 : u), p(
+          (s) => Math.min(s, Math.ceil(m.length / n) - 1)
         );
       };
       return t(), window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
     }
-  }, [d]);
-  const A = Math.ceil(v / V), K = vt(w, v), m = K.length, _t = 3 * 16, mt = 3 * 16, wt = bt(
+  }, [u]);
+  const A = Math.ceil(i / V), K = vt(m, i), g = K.length, _t = 3 * 16, gt = 3 * 16, mt = xt(
     (t) => {
       if (t && !$) {
         const e = t.getBoundingClientRect().width;
-        e > 0 && e !== p && (I(e), ct(!0));
+        e > 0 && e !== v && (I(e), ct(!0));
       }
     },
-    [p, $]
+    [v, $]
   );
-  y(() => {
+  k(() => {
     var t, e, n, s;
-    if ($ && l > 0 && i.current && ((e = (t = i.current.children[0]) == null ? void 0 : t.children[0]) != null && e.children[0])) {
-      const C = ((s = (n = i.current.children[0]) == null ? void 0 : n.children[0]) == null ? void 0 : s.children[0]).getBoundingClientRect().width;
-      C > 0 && C !== p && I(C);
+    if ($ && a > 0 && d.current && ((e = (t = d.current.children[0]) == null ? void 0 : t.children[0]) != null && e.children[0])) {
+      const b = ((s = (n = d.current.children[0]) == null ? void 0 : n.children[0]) == null ? void 0 : s.children[0]).getBoundingClientRect().width;
+      b > 0 && b !== v && I(b);
     }
-  }, [l, $, p]), y(() => {
+  }, [a, $, v]), k(() => {
     const t = new ResizeObserver((e) => {
       var n, s;
-      for (let a of e)
-        if (a.contentRect) {
-          _ ? b(a.contentRect.width - mt) : z ? u != null && u.current ? b(
-            a.contentRect.width - ((n = u == null ? void 0 : u.current) == null ? void 0 : n.offsetWidth) - _t
-          ) : b(a.contentRect.width) : (b(a.contentRect.width), I(
-            ((s = i == null ? void 0 : i.current) == null ? void 0 : s.children[0].children[0].children[0].getBoundingClientRect().width) ?? 0
+      for (let l of e)
+        if (l.contentRect) {
+          _ ? x(l.contentRect.width - gt) : z ? h != null && h.current ? x(
+            l.contentRect.width - ((n = h == null ? void 0 : h.current) == null ? void 0 : n.offsetWidth) - _t
+          ) : x(l.contentRect.width) : (x(l.contentRect.width), I(
+            ((s = d == null ? void 0 : d.current) == null ? void 0 : s.children[0].children[0].children[0].getBoundingClientRect().width) ?? 0
           ));
-          const C = _ ? 1 : d;
-          f(
-            (gt) => Math.min(gt, Math.ceil(w.length / C) - 1)
+          const b = _ ? 1 : u;
+          p(
+            (Ct) => Math.min(Ct, Math.ceil(m.length / b) - 1)
           );
         }
     });
-    return x != null && x.current && t.observe(x.current), () => t.disconnect();
-  }, [_, z, w]);
+    return E != null && E.current && t.observe(E.current), () => t.disconnect();
+  }, [_, z, m]);
   const D = () => {
-    M.current && clearInterval(M.current), ot(!1);
+    w.current && clearInterval(w.current), ot(!1);
   }, L = () => {
-    D(), f((t) => Math.min(t + 1, m - 1));
+    D(), p((t) => Math.min(t + 1, g - 1));
   }, S = () => {
-    D(), f((t) => Math.max(t - 1, 0));
-  }, Mt = (t) => {
-    D(), f(t);
-  }, kt = () => l ? `translateX(-${h * l}px)` : "translateX(0px)", Q = () => {
-    f((t) => t >= m - 1 ? 0 : t + 1);
+    D(), p((t) => Math.max(t - 1, 0));
+  }, wt = (t) => {
+    D(), p(t);
+  }, Mt = () => a ? `translateX(-${f * a}px)` : "translateX(0px)", Q = () => {
+    p((t) => t >= g - 1 ? 0 : t + 1);
   };
-  return y(() => (Y && (M.current = setInterval(
+  return k(() => (Y && (w.current = setInterval(
     Q,
     R * 1e3
   )), () => {
-    M.current && clearInterval(M.current);
+    w.current && clearInterval(w.current);
   }), [Y, R, Q]), /* @__PURE__ */ P("div", { className: `${tt ?? ""} ${c.carousel}`, ref: rt, children: [
     /* @__PURE__ */ r(
       "div",
       {
         ref: J,
-        className: `${c.trackContainer} ${at || k ? c.noPointerEvents : ""}
+        className: `${c.trackContainer} ${at || M ? c.noPointerEvents : ""}
           `,
         style: {
-          maxWidth: `${l}px`,
-          touchAction: k ? "none" : "pan-y"
+          maxWidth: `${a}px`,
+          touchAction: M ? "none" : "pan-y"
         },
         onTouchStart: ft,
         onTouchEnd: pt,
@@ -148,9 +148,9 @@ function jt({
         children: /* @__PURE__ */ r(
           "div",
           {
-            ref: i,
+            ref: d,
             className: c.track,
-            style: { width: `${m * 100}%`, transform: kt() },
+            style: { width: `${g * 100}%`, transform: Mt() },
             children: K.map((t, e) => /* @__PURE__ */ r(
               "div",
               {
@@ -158,19 +158,21 @@ function jt({
                 style: {
                   display: A > 1 ? "grid" : "flex",
                   gridTemplateColumns: `repeat(${Math.ceil(
-                    v / A
+                    i / A
                   )}, 1fr)`,
                   gridTemplateRows: `repeat(${A}, auto)`,
-                  width: `${l}px`
+                  width: `${a}px`
                 },
                 children: t.map((n, s) => /* @__PURE__ */ r(
                   "div",
                   {
-                    ref: e === 0 && s === 0 ? wt : null,
+                    ref: e === 0 && s === 0 ? mt : null,
                     onClickCapture: lt,
                     style: {
-                      flexBasis: _ ? "100%" : `${100 / v}%`,
-                      width: _ ? `${l / v - 16}px` : "unset"
+                      flexBasis: _ ? "100%" : "unset",
+                      width: _ ? `${a / i - 16}px` : "unset",
+                      maxWidth: `${(a - (i - 1) * 16) / i}px`
+                      //Container minus gaps (dynamicItemsPerPage - 1 * gap size) divided by dynamicItemsPerPage
                     },
                     children: n
                   },
@@ -183,19 +185,19 @@ function jt({
         )
       }
     ),
-    m > 1 && /* @__PURE__ */ P(
+    g > 1 && /* @__PURE__ */ P(
       "div",
       {
         className: c.controls,
         style: {
-          maxWidth: p > 0 && d === 1 && !_ ? `${p}px` : "unset"
+          maxWidth: v > 0 && u === 1 && !_ ? `${v}px` : "unset"
         },
         children: [
-          /* @__PURE__ */ r("div", { className: c.indicators, children: Array.from({ length: m }).map((t, e) => /* @__PURE__ */ r(
+          /* @__PURE__ */ r("div", { className: c.indicators, children: Array.from({ length: g }).map((t, e) => /* @__PURE__ */ r(
             "button",
             {
-              className: `${c.indicator} ${e === h ? c.active : ""}`,
-              onClick: () => Mt(e),
+              className: `${c.indicator} ${e === f ? c.active : ""}`,
+              onClick: () => wt(e),
               "aria-label": `Go to group ${e + 1}`
             },
             e
@@ -205,9 +207,9 @@ function jt({
               "button",
               {
                 "aria-label": "Previous slide",
-                className: `${c.prev} ${h === 0 ? c.disabled : ""}`,
+                className: `${c.prev} ${f === 0 ? c.disabled : ""}`,
                 onClick: S,
-                disabled: h === 0,
+                disabled: f === 0,
                 children: /* @__PURE__ */ r($t, { size: 36 })
               }
             ),
@@ -215,10 +217,10 @@ function jt({
               "button",
               {
                 "aria-label": "Next slide",
-                className: `${c.next} ${h >= m - 1 ? c.disabled : ""}`,
+                className: `${c.next} ${f >= g - 1 ? c.disabled : ""}`,
                 onClick: L,
-                disabled: h >= w.length - v,
-                children: /* @__PURE__ */ r(xt, { size: 36 })
+                disabled: f >= m.length - i,
+                children: /* @__PURE__ */ r(Et, { size: 36 })
               }
             )
           ] })

package/dist/styles.css

@@ -26,7 +26,7 @@ ul._list_1fin2_1{list-style-type:none;padding:0;margin:0}ol._list_1fin2_1{list-s
 ._notification_1elr1_1{display:flex;align-items:center;padding:var(--spacing-md);background-color:var(--color-secondary-100);color:var(--color-text-primaray);box-shadow:0 4px 8px #0000001a;border-radius:var(--radius-md);font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);gap:var(--spacing-sm);animation:_slideIn_1elr1_1 .3s ease forwards;opacity:1;transform-origin:right center;width:fit-content}._enter_1elr1_18{opacity:1;transform:translate(0)}._exiting_1elr1_23{animation:_slideOut_1elr1_1 .3s ease forwards}._info_1elr1_27{background-color:var(--color-info-bg);color:var(--color-info-text)}._success_1elr1_32{background-color:var(--color-success-bg);color:var(--color-success-text)}._warning_1elr1_37{background-color:var(--color-warning-bg);color:var(--color-warning-text)}._error_1elr1_42{background-color:var(--color-error-bg);color:var(--color-error-text)}._closeButton_1elr1_47{background:none;border:none;cursor:pointer;color:#fff;padding:0;margin-left:auto;display:flex;align-items:center}@keyframes _slideIn_1elr1_1{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes _slideOut_1elr1_1{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}
 ._container_61msx_1{position:fixed;bottom:1rem;right:1rem;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;gap:.5rem;z-index:1000}
 ._progressBarContainer_pna67_1{display:flex;align-items:center;justify-content:center;gap:.25rem;width:100%}._progressBar_pna67_1{flex:1;height:12px;background-color:var(--color-secondary-25);border-radius:4px;overflow:hidden;position:relative}._fill_pna67_18{height:100%;transition:width .3s ease;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;border-radius:4px}._primary_pna67_29 ._fill_pna67_18{background-color:var(--color-primary-100)}._success_pna67_33 ._fill_pna67_18{background-color:var(--color-success)}._warning_pna67_37 ._fill_pna67_18{background-color:var(--color-warning)}._danger_pna67_41 ._fill_pna67_18{background-color:var(--color-error)}._label_pna67_45{flex:.1;position:relative;width:auto;text-align:center;color:var(--color-text-primary);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold)}
-._carousel_1nskp_1{width:100%;overflow-x:hidden}@media (max-width: 767px){._carousel_1nskp_1{padding:0 var(--spacing-lg)}}._noPointerEvents_1nskp_10 *{pointer-events:none!important}._trackContainer_1nskp_14{overflow:hidden;width:100%}@media (max-width: 767px){._trackContainer_1nskp_14{overflow:visible}}._track_1nskp_14{display:flex;transition:transform .3s ease;will-change:transform}._page_1nskp_29{display:flex;gap:var(--spacing-md)}@media (max-wdith: 767px){._page_1nskp_29{justify-content:center;padding:0 var(--spacing-sm)}}._controls_1nskp_39{display:flex;justify-content:space-between;align-items:center;margin-top:var(--spacing-md);margin-left:auto;margin-right:auto;padding:0 var(--spacing-md);width:100%}._indicators_1nskp_50{display:flex;flex-wrap:wrap;max-width:125px;gap:var(--spacing-xs)}._indicator_1nskp_50{width:10px;height:10px;border-radius:50%;background-color:#e0e0e0;border:1px solid #fff;cursor:pointer;transition:background-color .3s}._indicator_1nskp_50._active_1nskp_67{background-color:var(--color-primary-100)}._buttons_1nskp_71{display:flex;gap:var(--spacing-md)}._prev_1nskp_76._disabled_1nskp_76,._next_1nskp_77._disabled_1nskp_76{opacity:.5;pointer-events:none}._buttons_1nskp_71 button:not(._disabled_1nskp_76):hover{background-color:var(--color-primary-100);color:#fff}._prev_1nskp_76,._next_1nskp_77{background-color:#e0e0e0;color:var(--color-text-primary);border:1px solid #fff;padding:var(--spacing-sm);cursor:pointer;transition:background-color .3s,color .3s;border-radius:50%;width:40px;height:40px;display:flex;justify-content:center;align-items:center}
+._carousel_t51gu_1{width:100%;overflow-x:hidden}@media (max-width: 767px){._carousel_t51gu_1{padding:0 var(--spacing-lg)}}._noPointerEvents_t51gu_10 *{pointer-events:none!important}._trackContainer_t51gu_14{overflow:hidden;width:100%}@media (max-width: 767px){._trackContainer_t51gu_14{overflow:visible}}._track_t51gu_14{display:flex;transition:transform .3s ease;will-change:transform}._page_t51gu_29{display:flex;gap:var(--spacing-md)}@media (max-width: 767px){._page_t51gu_29{justify-content:center;padding:0 var(--spacing-sm)}}._controls_t51gu_39{display:flex;justify-content:space-between;align-items:center;margin-top:var(--spacing-md);margin-left:auto;margin-right:auto;padding:0 var(--spacing-md);width:100%}._indicators_t51gu_50{display:flex;flex-wrap:wrap;max-width:125px;gap:var(--spacing-xs)}._indicator_t51gu_50{width:10px;height:10px;border-radius:50%;background-color:#e0e0e0;border:1px solid #fff;cursor:pointer;transition:background-color .3s}._indicator_t51gu_50._active_t51gu_67{background-color:var(--color-primary-100)}._buttons_t51gu_71{display:flex;gap:var(--spacing-md)}._prev_t51gu_76._disabled_t51gu_76,._next_t51gu_77._disabled_t51gu_76{opacity:.5;pointer-events:none}._buttons_t51gu_71 button:not(._disabled_t51gu_76):hover{background-color:var(--color-primary-100);color:#fff}._prev_t51gu_76,._next_t51gu_77{background-color:#e0e0e0;color:var(--color-text-primary);border:1px solid #fff;padding:var(--spacing-sm);cursor:pointer;transition:background-color .3s,color .3s;border-radius:50%;width:40px;height:40px;display:flex;justify-content:center;align-items:center}
 ._drawer_55xty_1{position:fixed;background-color:var(--color-background);transition:transform .3s ease-in-out;z-index:1000;width:300px;height:100%;box-shadow:0 0 10px #00000026;padding:var(--spacing-md)}._right_55xty_12{top:0;right:0;transform:translate(100%)}._left_55xty_18{top:0;left:0;transform:translate(-100%)}._top_55xty_24{top:0;left:0;width:100%;height:auto;transform:translateY(-100%)}._bottom_55xty_32{bottom:0;left:0;width:100%;height:auto;transform:translateY(100%)}._open_55xty_40._right_55xty_12,._open_55xty_40._left_55xty_18{transform:translate(0)}._open_55xty_40._top_55xty_24,._open_55xty_40._bottom_55xty_32{transform:translateY(0)}._overlay_55xty_50{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#0000004d;opacity:0;pointer-events:none;transition:opacity .3s ease-in-out;z-index:999}._overlay_55xty_50._show_55xty_60{opacity:1;pointer-events:all}
 ._tabs_tu4lq_1{display:flex;flex-direction:column;width:100%}._tabsList_tu4lq_7{display:flex;width:100%;background-color:var(--color-secondary-10);border-radius:calc(var(--radius-md) + 5px);position:relative;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}._tabsList_tu4lq_7::-webkit-scrollbar{display:none}._horizontal_tu4lq_24{flex-direction:column}._horizontal_tu4lq_24 ._tabsPanel_tu4lq_26{padding:var(--spacing-lg) var(--spacing-md)}._vertical_tu4lq_31{flex-direction:row;align-items:flex-start;gap:3rem}._vertical_tu4lq_31 ._tabsList_tu4lq_7{flex-direction:column;overflow-x:visible;flex:.25 0 150px}._vertical_tu4lq_31 ._tabsTrigger_tu4lq_42{white-space:normal;text-align:left}._vertical_tu4lq_31 ._tabsPanelWrapper_tu4lq_47{flex:1;width:100%}@media (max-width: 767px){._vertical_tu4lq_31{flex-direction:column}}._left_tu4lq_58{justify-content:flex-start}._center_tu4lq_62{justify-content:center}._right_tu4lq_66{justify-content:flex-end}._indicator_tu4lq_70{position:absolute;left:0;top:0;border-radius:var(--radius-md);transition:transform .3s ease-in-out,width .3s ease-in-out;z-index:0;border:5px solid var(--color-secondary-10)}._indicator_tu4lq_70:after{content:"";border-radius:var(--radius-md);background-color:var(--color-secondary-100);display:block;position:absolute;width:100%;height:100%}._tabsTrigger_tu4lq_42{padding:var(--spacing-md);border:none;background:none;cursor:pointer;color:var(--color-text-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);transition:color .3s ease;position:relative;z-index:1;white-space:nowrap;text-align:center;width:100%}._tabsTrigger_tu4lq_42._active_tu4lq_117{color:#fff}@media (max-width: 767px){._tabsList_tu4lq_7{flex-direction:column;overflow-x:visible}._tabsTrigger_tu4lq_42{white-space:normal;text-align:left}}._tabsPanelWrapper_tu4lq_47{position:relative;overflow:hidden;height:auto;transition:height .3s ease-in-out}._tabsPanel_tu4lq_26{animation:_fadeSlide_tu4lq_1 .3s ease both;position:relative;width:100%;color:var(--color-text-primary)}@keyframes _fadeSlide_tu4lq_1{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}._default_tu4lq_161{background-color:transparent}._dark_tu4lq_165{background-color:var(--color-tab-background)}._dark_tu4lq_165 ._indicator_tu4lq_70{border:5px solid transparent}._dark_tu4lq_165 ._tabsTrigger_tu4lq_42{color:var(--color-primary-25)}._light_tu4lq_177{background-color:#fff}._light_tu4lq_177 ._indicator_tu4lq_70{border:5px solid transparent}._light_tu4lq_177 ._tabsList_tu4lq_7{background-color:#fff}._light_tu4lq_177 ._tabsTrigger_tu4lq_42{color:var(--color-text-primary)}._light_tu4lq_177 ._tabsTrigger_tu4lq_42:hover{color:var(--color-primary-100)}._light_tu4lq_177 ._tabsTrigger_tu4lq_42._active_tu4lq_117{color:#fff}._transparent_tu4lq_201{background-color:transparent}._transparent_tu4lq_201 ._indicator_tu4lq_70{border:5px solid transparent}._transparent_tu4lq_201 ._tabsList_tu4lq_7{background-color:transparent}._transparent_tu4lq_201 ._tabsTrigger_tu4lq_42{color:var(--color-text-primary)}._transparent_tu4lq_201 ._tabsTrigger_tu4lq_42:hover{color:var(--color-primary-100)}._transparent_tu4lq_201 ._tabsTrigger_tu4lq_42._active_tu4lq_117{color:#fff}
 ._breadcrumbs_qx9xp_1{display:block;font-size:var(--font-size-sm);line-height:1.5}._list_qx9xp_7{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:0}._item_qx9xp_15{display:flex;align-items:center}._separator_qx9xp_20{margin:0 var(--spacing-xs);color:var(--color-primary-25)}._link_qx9xp_25{color:var(--color-primary-25);text-decoration:none;transition:color .3s ease}._link_qx9xp_25:hover{color:var(--color-primary-100)}._label_qx9xp_35{color:var(--color-primary-25)}._active_qx9xp_39{font-weight:var(--font-weight-bold);color:var(--color-primary-100)}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "quirk-ui",
   "private": false,
-  "version": "0.0.275",
+  "version": "0.0.277",
   "type": "module",
   "exports": {
     ".": {