@konstructio/ui 0.0.12-alpha.1 → 0.0.12-alpha.10

package/dist/components/Toast/Toast.js

@@ -1,18 +1,18 @@
-import { jsxs as D, jsx as c, Fragment as se } from "react/jsx-runtime";
-import { u as ae, S as j } from "../../index-DoOsnuB6.js";
+import { jsx as c, jsxs as D, Fragment as se } from "react/jsx-runtime";
+import { u as ae, S as j } from "../../index-B_6_jmOO.js";
 import * as s from "react";
-import { useState as Re, useRef as be, useEffect as ge, useMemo as oe, isValidElement as re, useCallback as Se } from "react";
-import { P as L, r as Ie, d as Ne } from "../../index-1GLoikpT.js";
-import { c as Ae, a as Fe, b as X, d as b, u as _e } from "../../index-8vgf-x5i.js";
-import { c as De } from "../../index-BBjak_0p.js";
-import { B as Le, R as Oe, P as Me } from "../../index-CoqDsznq.js";
-import { P as ke } from "../../index-D4Q2rMby.js";
-import { V as ie, R as Ve } from "../../index-KEdwcThH.js";
+import { useRef as Re, useEffect as be, useMemo as oe, isValidElement as re, useCallback as ge } from "react";
+import { P as L, r as Se, d as Ie } from "../../index-D7QNmo_D.js";
+import { c as Ne, a as Ae, b, d as X, u as Fe } from "../../index-Cva-e5M4.js";
+import { c as _e } from "../../index-BbsJ0VIJ.js";
+import { B as De, R as Le, P as Me } from "../../index-D_76wh4w.js";
+import { P as Oe } from "../../index-Dj1pom3_.js";
+import { V as ie, R as ke } from "../../index-CbTU3cnP.js";
 import { cn as q } from "../../utils/index.js";
-import { toastVariants as Ke, closeToastVariants as He, viewportToastVariants as We } from "./Toast.variants.js";
-import { X as Xe } from "../../x-DU-Zw-L_.js";
-import { useTheme as $e } from "../../contexts/theme.hook.js";
-var Z = "ToastProvider", [ee, Ue, Ye] = De("Toast"), [ce, gt] = Ae("Toast", [Ye]), [Be, $] = ce(Z), ue = (e) => {
+import { closeToastVariants as Ve, toastVariants as Ke, viewportToastVariants as He } from "./Toast.variants.js";
+import { X as We } from "../../x-DU-Zw-L_.js";
+import { useTheme as Xe } from "../../contexts/theme.hook.js";
+var Z = "ToastProvider", [ee, $e, Ue] = _e("Toast"), [ce, bt] = Ne("Toast", [Ue]), [Ye, $] = ce(Z), ue = (e) => {
   const {
     __scopeToast: r,
     label: o = "Notification",
@@ -20,11 +20,11 @@ var Z = "ToastProvider", [ee, Ue, Ye] = De("Toast"), [ce, gt] = Ae("Toast", [Ye]
     swipeDirection: u = "right",
     swipeThreshold: d = 50,
     children: f
-  } = e, [m, v] = s.useState(null), [n, w] = s.useState(0), E = s.useRef(!1), I = s.useRef(!1);
+  } = e, [m, v] = s.useState(null), [n, y] = s.useState(0), w = s.useRef(!1), S = s.useRef(!1);
   return o.trim() || console.error(
     `Invalid prop \`label\` supplied to \`${Z}\`. Expected non-empty \`string\`.`
   ), /* @__PURE__ */ c(ee.Provider, { scope: r, children: /* @__PURE__ */ c(
-    Be,
+    Ye,
     {
       scope: r,
       label: o,
@@ -34,90 +34,90 @@ var Z = "ToastProvider", [ee, Ue, Ye] = De("Toast"), [ce, gt] = Ae("Toast", [Ye]
       toastCount: n,
       viewport: m,
       onViewportChange: v,
-      onToastAdd: s.useCallback(() => w((R) => R + 1), []),
-      onToastRemove: s.useCallback(() => w((R) => R - 1), []),
-      isFocusedToastEscapeKeyDownRef: E,
-      isClosePausedRef: I,
+      onToastAdd: s.useCallback(() => y((g) => g + 1), []),
+      onToastRemove: s.useCallback(() => y((g) => g - 1), []),
+      isFocusedToastEscapeKeyDownRef: w,
+      isClosePausedRef: S,
       children: f
     }
   ) });
 };
 ue.displayName = Z;
-var le = "ToastViewport", je = ["F8"], G = "toast.viewportPause", J = "toast.viewportResume", de = s.forwardRef(
+var le = "ToastViewport", Be = ["F8"], G = "toast.viewportPause", J = "toast.viewportResume", de = s.forwardRef(
   (e, r) => {
     const {
       __scopeToast: o,
-      hotkey: t = je,
+      hotkey: t = Be,
       label: u = "Notifications ({hotkey})",
       ...d
-    } = e, f = $(le, o), m = Ue(o), v = s.useRef(null), n = s.useRef(null), w = s.useRef(null), E = s.useRef(null), I = ae(r, E, f.onViewportChange), R = t.join("+").replace(/Key/g, "").replace(/Digit/g, ""), g = f.toastCount > 0;
+    } = e, f = $(le, o), m = $e(o), v = s.useRef(null), n = s.useRef(null), y = s.useRef(null), w = s.useRef(null), S = ae(r, w, f.onViewportChange), g = t.join("+").replace(/Key/g, "").replace(/Digit/g, ""), R = f.toastCount > 0;
     s.useEffect(() => {
-      const a = (P) => {
+      const a = (h) => {
         var T;
-        t.length !== 0 && t.every((h) => P[h] || P.code === h) && ((T = E.current) == null || T.focus());
+        t.length !== 0 && t.every((E) => h[E] || h.code === E) && ((T = w.current) == null || T.focus());
       };
       return document.addEventListener("keydown", a), () => document.removeEventListener("keydown", a);
     }, [t]), s.useEffect(() => {
-      const a = v.current, P = E.current;
-      if (g && a && P) {
+      const a = v.current, h = w.current;
+      if (R && a && h) {
         const p = () => {
           if (!f.isClosePausedRef.current) {
-            const C = new CustomEvent(G);
-            P.dispatchEvent(C), f.isClosePausedRef.current = !0;
+            const P = new CustomEvent(G);
+            h.dispatchEvent(P), f.isClosePausedRef.current = !0;
           }
         }, T = () => {
           if (f.isClosePausedRef.current) {
-            const C = new CustomEvent(J);
-            P.dispatchEvent(C), f.isClosePausedRef.current = !1;
+            const P = new CustomEvent(J);
+            h.dispatchEvent(P), f.isClosePausedRef.current = !1;
           }
-        }, h = (C) => {
-          !a.contains(C.relatedTarget) && T();
-        }, y = () => {
+        }, E = (P) => {
+          !a.contains(P.relatedTarget) && T();
+        }, C = () => {
           a.contains(document.activeElement) || T();
         };
-        return a.addEventListener("focusin", p), a.addEventListener("focusout", h), a.addEventListener("pointermove", p), a.addEventListener("pointerleave", y), window.addEventListener("blur", p), window.addEventListener("focus", T), () => {
-          a.removeEventListener("focusin", p), a.removeEventListener("focusout", h), a.removeEventListener("pointermove", p), a.removeEventListener("pointerleave", y), window.removeEventListener("blur", p), window.removeEventListener("focus", T);
+        return a.addEventListener("focusin", p), a.addEventListener("focusout", E), a.addEventListener("pointermove", p), a.addEventListener("pointerleave", C), window.addEventListener("blur", p), window.addEventListener("focus", T), () => {
+          a.removeEventListener("focusin", p), a.removeEventListener("focusout", E), a.removeEventListener("pointermove", p), a.removeEventListener("pointerleave", C), window.removeEventListener("blur", p), window.removeEventListener("focus", T);
         };
       }
-    }, [g, f.isClosePausedRef]);
+    }, [R, f.isClosePausedRef]);
     const l = s.useCallback(
       ({ tabbingDirection: a }) => {
         const p = m().map((T) => {
-          const h = T.ref.current, y = [h, ...at(h)];
-          return a === "forwards" ? y : y.reverse();
+          const E = T.ref.current, C = [E, ...st(E)];
+          return a === "forwards" ? C : C.reverse();
         });
         return (a === "forwards" ? p.reverse() : p).flat();
       },
       [m]
     );
     return s.useEffect(() => {
-      const a = E.current;
+      const a = w.current;
       if (a) {
-        const P = (p) => {
-          var y, C, N;
+        const h = (p) => {
+          var C, P, N;
           const T = p.altKey || p.ctrlKey || p.metaKey;
           if (p.key === "Tab" && !T) {
-            const O = document.activeElement, F = p.shiftKey;
+            const M = document.activeElement, F = p.shiftKey;
             if (p.target === a && F) {
-              (y = n.current) == null || y.focus();
+              (C = n.current) == null || C.focus();
               return;
             }
-            const A = l({ tabbingDirection: F ? "backwards" : "forwards" }), V = A.findIndex((i) => i === O);
-            z(A.slice(V + 1)) ? p.preventDefault() : F ? (C = n.current) == null || C.focus() : (N = w.current) == null || N.focus();
+            const A = l({ tabbingDirection: F ? "backwards" : "forwards" }), V = A.findIndex((i) => i === M);
+            z(A.slice(V + 1)) ? p.preventDefault() : F ? (P = n.current) == null || P.focus() : (N = y.current) == null || N.focus();
           }
         };
-        return a.addEventListener("keydown", P), () => a.removeEventListener("keydown", P);
+        return a.addEventListener("keydown", h), () => a.removeEventListener("keydown", h);
       }
     }, [m, l]), /* @__PURE__ */ D(
-      Le,
+      De,
       {
         ref: v,
         role: "region",
-        "aria-label": u.replace("{hotkey}", R),
+        "aria-label": u.replace("{hotkey}", g),
         tabIndex: -1,
-        style: { pointerEvents: g ? void 0 : "none" },
+        style: { pointerEvents: R ? void 0 : "none" },
         children: [
-          g && /* @__PURE__ */ c(
+          R && /* @__PURE__ */ c(
             Q,
             {
               ref: n,
@@ -129,11 +129,11 @@ var le = "ToastViewport", je = ["F8"], G = "toast.viewportPause", J = "toast.vie
               }
             }
           ),
-          /* @__PURE__ */ c(ee.Slot, { scope: o, children: /* @__PURE__ */ c(L.ol, { tabIndex: -1, ...d, ref: I }) }),
-          g && /* @__PURE__ */ c(
+          /* @__PURE__ */ c(ee.Slot, { scope: o, children: /* @__PURE__ */ c(L.ol, { tabIndex: -1, ...d, ref: S }) }),
+          R && /* @__PURE__ */ c(
             Q,
             {
-              ref: w,
+              ref: y,
               onFocusFromOutsideViewport: () => {
                 const a = l({
                   tabbingDirection: "backwards"
@@ -169,15 +169,15 @@ var fe = "ToastFocusProxy", Q = s.forwardRef(
   }
 );
 Q.displayName = fe;
-var U = "Toast", qe = "toast.swipeStart", ze = "toast.swipeMove", Ge = "toast.swipeCancel", Je = "toast.swipeEnd", pe = s.forwardRef(
+var U = "Toast", je = "toast.swipeStart", qe = "toast.swipeMove", ze = "toast.swipeCancel", Ge = "toast.swipeEnd", pe = s.forwardRef(
   (e, r) => {
-    const { forceMount: o, open: t, defaultOpen: u, onOpenChange: d, ...f } = e, [m = !0, v] = Fe({
+    const { forceMount: o, open: t, defaultOpen: u, onOpenChange: d, ...f } = e, [m = !0, v] = Ae({
       prop: t,
       defaultProp: u,
       onChange: d
     });
-    return /* @__PURE__ */ c(ke, { present: o || m, children: /* @__PURE__ */ c(
-      et,
+    return /* @__PURE__ */ c(Oe, { present: o || m, children: /* @__PURE__ */ c(
+      Ze,
       {
         open: m,
         ...f,
@@ -189,25 +189,25 @@ var U = "Toast", qe = "toast.swipeStart", ze = "toast.swipeMove", Ge = "toast.sw
           n.currentTarget.setAttribute("data-swipe", "start");
         }),
         onSwipeMove: b(e.onSwipeMove, (n) => {
-          const { x: w, y: E } = n.detail.delta;
-          n.currentTarget.setAttribute("data-swipe", "move"), n.currentTarget.style.setProperty("--radix-toast-swipe-move-x", `${w}px`), n.currentTarget.style.setProperty("--radix-toast-swipe-move-y", `${E}px`);
+          const { x: y, y: w } = n.detail.delta;
+          n.currentTarget.setAttribute("data-swipe", "move"), n.currentTarget.style.setProperty("--radix-toast-swipe-move-x", `${y}px`), n.currentTarget.style.setProperty("--radix-toast-swipe-move-y", `${w}px`);
         }),
         onSwipeCancel: b(e.onSwipeCancel, (n) => {
           n.currentTarget.setAttribute("data-swipe", "cancel"), n.currentTarget.style.removeProperty("--radix-toast-swipe-move-x"), n.currentTarget.style.removeProperty("--radix-toast-swipe-move-y"), n.currentTarget.style.removeProperty("--radix-toast-swipe-end-x"), n.currentTarget.style.removeProperty("--radix-toast-swipe-end-y");
         }),
         onSwipeEnd: b(e.onSwipeEnd, (n) => {
-          const { x: w, y: E } = n.detail.delta;
-          n.currentTarget.setAttribute("data-swipe", "end"), n.currentTarget.style.removeProperty("--radix-toast-swipe-move-x"), n.currentTarget.style.removeProperty("--radix-toast-swipe-move-y"), n.currentTarget.style.setProperty("--radix-toast-swipe-end-x", `${w}px`), n.currentTarget.style.setProperty("--radix-toast-swipe-end-y", `${E}px`), v(!1);
+          const { x: y, y: w } = n.detail.delta;
+          n.currentTarget.setAttribute("data-swipe", "end"), n.currentTarget.style.removeProperty("--radix-toast-swipe-move-x"), n.currentTarget.style.removeProperty("--radix-toast-swipe-move-y"), n.currentTarget.style.setProperty("--radix-toast-swipe-end-x", `${y}px`), n.currentTarget.style.setProperty("--radix-toast-swipe-end-y", `${w}px`), v(!1);
         })
       }
     ) });
   }
 );
 pe.displayName = U;
-var [Qe, Ze] = ce(U, {
+var [Je, Qe] = ce(U, {
   onClose() {
   }
-}), et = s.forwardRef(
+}), Ze = s.forwardRef(
   (e, r) => {
     const {
       __scopeToast: o,
@@ -218,17 +218,17 @@ var [Qe, Ze] = ce(U, {
       onEscapeKeyDown: m,
       onPause: v,
       onResume: n,
-      onSwipeStart: w,
-      onSwipeMove: E,
-      onSwipeCancel: I,
-      onSwipeEnd: R,
-      ...g
-    } = e, l = $(U, o), [a, P] = s.useState(null), p = ae(r, (i) => P(i)), T = s.useRef(null), h = s.useRef(null), y = u || l.duration, C = s.useRef(0), N = s.useRef(y), O = s.useRef(0), { onToastAdd: F, onToastRemove: Y } = l, _ = X(() => {
+      onSwipeStart: y,
+      onSwipeMove: w,
+      onSwipeCancel: S,
+      onSwipeEnd: g,
+      ...R
+    } = e, l = $(U, o), [a, h] = s.useState(null), p = ae(r, (i) => h(i)), T = s.useRef(null), E = s.useRef(null), C = u || l.duration, P = s.useRef(0), N = s.useRef(C), M = s.useRef(0), { onToastAdd: F, onToastRemove: Y } = l, _ = X(() => {
       var x;
       (a == null ? void 0 : a.contains(document.activeElement)) && ((x = l.viewport) == null || x.focus()), f();
     }), A = s.useCallback(
       (i) => {
-        !i || i === 1 / 0 || (window.clearTimeout(O.current), C.current = (/* @__PURE__ */ new Date()).getTime(), O.current = window.setTimeout(_, i));
+        !i || i === 1 / 0 || (window.clearTimeout(M.current), P.current = (/* @__PURE__ */ new Date()).getTime(), M.current = window.setTimeout(_, i));
       },
       [_]
     );
@@ -237,21 +237,21 @@ var [Qe, Ze] = ce(U, {
       if (i) {
         const x = () => {
           A(N.current), n == null || n();
-        }, S = () => {
-          const M = (/* @__PURE__ */ new Date()).getTime() - C.current;
-          N.current = N.current - M, window.clearTimeout(O.current), v == null || v();
+        }, I = () => {
+          const O = (/* @__PURE__ */ new Date()).getTime() - P.current;
+          N.current = N.current - O, window.clearTimeout(M.current), v == null || v();
         };
-        return i.addEventListener(G, S), i.addEventListener(J, x), () => {
-          i.removeEventListener(G, S), i.removeEventListener(J, x);
+        return i.addEventListener(G, I), i.addEventListener(J, x), () => {
+          i.removeEventListener(G, I), i.removeEventListener(J, x);
         };
       }
-    }, [l.viewport, y, v, n, A]), s.useEffect(() => {
-      d && !l.isClosePausedRef.current && A(y);
-    }, [d, y, l.isClosePausedRef, A]), s.useEffect(() => (F(), () => Y()), [F, Y]);
-    const V = s.useMemo(() => a ? Pe(a) : null, [a]);
+    }, [l.viewport, C, v, n, A]), s.useEffect(() => {
+      d && !l.isClosePausedRef.current && A(C);
+    }, [d, C, l.isClosePausedRef, A]), s.useEffect(() => (F(), () => Y()), [F, Y]);
+    const V = s.useMemo(() => a ? Ce(a) : null, [a]);
     return l.viewport ? /* @__PURE__ */ D(se, { children: [
       V && /* @__PURE__ */ c(
-        tt,
+        et,
         {
           __scopeToast: o,
           role: "status",
@@ -260,9 +260,9 @@ var [Qe, Ze] = ce(U, {
           children: V
         }
       ),
-      /* @__PURE__ */ c(Qe, { scope: o, onClose: _, children: Ie.createPortal(
+      /* @__PURE__ */ c(Je, { scope: o, onClose: _, children: Se.createPortal(
         /* @__PURE__ */ c(ee.ItemSlot, { scope: o, children: /* @__PURE__ */ c(
-          Oe,
+          Le,
           {
             asChild: !0,
             onEscapeKeyDown: b(m, () => {
@@ -277,7 +277,7 @@ var [Qe, Ze] = ce(U, {
                 tabIndex: 0,
                 "data-state": d ? "open" : "closed",
                 "data-swipe-direction": l.swipeDirection,
-                ...g,
+                ...R,
                 ref: p,
                 style: { userSelect: "none", touchAction: "none", ...e.style },
                 onKeyDown: b(e.onKeyDown, (i) => {
@@ -288,27 +288,27 @@ var [Qe, Ze] = ce(U, {
                 }),
                 onPointerMove: b(e.onPointerMove, (i) => {
                   if (!T.current) return;
-                  const x = i.clientX - T.current.x, S = i.clientY - T.current.y, M = !!h.current, k = ["left", "right"].includes(l.swipeDirection), K = ["left", "up"].includes(l.swipeDirection) ? Math.min : Math.max, Ce = k ? K(0, x) : 0, xe = k ? 0 : K(0, S), B = i.pointerType === "touch" ? 10 : 2, H = { x: Ce, y: xe }, te = { originalEvent: i, delta: H };
-                  M ? (h.current = H, W(ze, E, te, {
+                  const x = i.clientX - T.current.x, I = i.clientY - T.current.y, O = !!E.current, k = ["left", "right"].includes(l.swipeDirection), K = ["left", "up"].includes(l.swipeDirection) ? Math.min : Math.max, Pe = k ? K(0, x) : 0, xe = k ? 0 : K(0, I), B = i.pointerType === "touch" ? 10 : 2, H = { x: Pe, y: xe }, te = { originalEvent: i, delta: H };
+                  O ? (E.current = H, W(qe, w, te, {
                     discrete: !1
-                  })) : ne(H, l.swipeDirection, B) ? (h.current = H, W(qe, w, te, {
+                  })) : ne(H, l.swipeDirection, B) ? (E.current = H, W(je, y, te, {
                     discrete: !1
-                  }), i.target.setPointerCapture(i.pointerId)) : (Math.abs(x) > B || Math.abs(S) > B) && (T.current = null);
+                  }), i.target.setPointerCapture(i.pointerId)) : (Math.abs(x) > B || Math.abs(I) > B) && (T.current = null);
                 }),
                 onPointerUp: b(e.onPointerUp, (i) => {
-                  const x = h.current, S = i.target;
-                  if (S.hasPointerCapture(i.pointerId) && S.releasePointerCapture(i.pointerId), h.current = null, T.current = null, x) {
-                    const M = i.currentTarget, k = { originalEvent: i, delta: x };
-                    ne(x, l.swipeDirection, l.swipeThreshold) ? W(Je, R, k, {
+                  const x = E.current, I = i.target;
+                  if (I.hasPointerCapture(i.pointerId) && I.releasePointerCapture(i.pointerId), E.current = null, T.current = null, x) {
+                    const O = i.currentTarget, k = { originalEvent: i, delta: x };
+                    ne(x, l.swipeDirection, l.swipeThreshold) ? W(Ge, g, k, {
                       discrete: !0
                     }) : W(
-                      Ge,
-                      I,
+                      ze,
+                      S,
                       k,
                       {
                         discrete: !0
                       }
-                    ), M.addEventListener("click", (K) => K.preventDefault(), {
+                    ), O.addEventListener("click", (K) => K.preventDefault(), {
                       once: !0
                     });
                   }
@@ -321,9 +321,9 @@ var [Qe, Ze] = ce(U, {
       ) })
     ] }) : null;
   }
-), tt = (e) => {
+), et = (e) => {
   const { __scopeToast: r, children: o, ...t } = e, u = $(U, r), [d, f] = s.useState(!1), [m, v] = s.useState(!1);
-  return nt(() => f(!0)), s.useEffect(() => {
+  return rt(() => f(!0)), s.useEffect(() => {
     const n = window.setTimeout(() => v(!0), 1e3);
     return () => window.clearTimeout(n);
   }, []), m ? null : /* @__PURE__ */ c(Me, { asChild: !0, children: /* @__PURE__ */ c(ie, { ...t, children: d && /* @__PURE__ */ D(se, { children: [
@@ -331,20 +331,20 @@ var [Qe, Ze] = ce(U, {
     " ",
     o
   ] }) }) });
-}, ot = "ToastTitle", me = s.forwardRef(
+}, tt = "ToastTitle", me = s.forwardRef(
   (e, r) => {
     const { __scopeToast: o, ...t } = e;
     return /* @__PURE__ */ c(L.div, { ...t, ref: r });
   }
 );
-me.displayName = ot;
-var rt = "ToastDescription", Te = s.forwardRef(
+me.displayName = tt;
+var ot = "ToastDescription", Te = s.forwardRef(
   (e, r) => {
     const { __scopeToast: o, ...t } = e;
     return /* @__PURE__ */ c(L.div, { ...t, ref: r });
   }
 );
-Te.displayName = rt;
+Te.displayName = ot;
 var ve = "ToastAction", we = s.forwardRef(
   (e, r) => {
     const { altText: o, ...t } = e;
@@ -356,7 +356,7 @@ var ve = "ToastAction", we = s.forwardRef(
 we.displayName = ve;
 var Ee = "ToastClose", he = s.forwardRef(
   (e, r) => {
-    const { __scopeToast: o, ...t } = e, u = Ze(Ee, o);
+    const { __scopeToast: o, ...t } = e, u = Qe(Ee, o);
     return /* @__PURE__ */ c(ye, { asChild: !0, children: /* @__PURE__ */ c(
       L.button,
       {
@@ -381,42 +381,42 @@ var ye = s.forwardRef((e, r) => {
     }
   );
 });
-function Pe(e) {
+function Ce(e) {
   const r = [];
   return Array.from(e.childNodes).forEach((t) => {
-    if (t.nodeType === t.TEXT_NODE && t.textContent && r.push(t.textContent), st(t)) {
+    if (t.nodeType === t.TEXT_NODE && t.textContent && r.push(t.textContent), nt(t)) {
       const u = t.ariaHidden || t.hidden || t.style.display === "none", d = t.dataset.radixToastAnnounceExclude === "";
       if (!u)
         if (d) {
           const f = t.dataset.radixToastAnnounceAlt;
           f && r.push(f);
         } else
-          r.push(...Pe(t));
+          r.push(...Ce(t));
     }
   }), r;
 }
 function W(e, r, o, { discrete: t }) {
   const u = o.originalEvent.currentTarget, d = new CustomEvent(e, { bubbles: !0, cancelable: !0, detail: o });
-  r && u.addEventListener(e, r, { once: !0 }), t ? Ne(u, d) : u.dispatchEvent(d);
+  r && u.addEventListener(e, r, { once: !0 }), t ? Ie(u, d) : u.dispatchEvent(d);
 }
 var ne = (e, r, o = 0) => {
   const t = Math.abs(e.x), u = Math.abs(e.y), d = t > u;
   return r === "left" || r === "right" ? d && t > o : !d && u > o;
 };
-function nt(e = () => {
+function rt(e = () => {
 }) {
   const r = X(e);
-  _e(() => {
+  Fe(() => {
     let o = 0, t = 0;
     return o = window.requestAnimationFrame(() => t = window.requestAnimationFrame(r)), () => {
       window.cancelAnimationFrame(o), window.cancelAnimationFrame(t);
     };
   }, [r]);
 }
-function st(e) {
+function nt(e) {
   return e.nodeType === e.ELEMENT_NODE;
 }
-function at(e) {
+function st(e) {
   const r = [], o = document.createTreeWalker(e, NodeFilter.SHOW_ELEMENT, {
     acceptNode: (t) => {
       const u = t.tagName === "INPUT" && t.type === "hidden";
@@ -430,8 +430,8 @@ function z(e) {
   const r = document.activeElement;
   return e.some((o) => o === r ? !0 : (o.focus(), document.activeElement !== r));
 }
-var it = ue, ct = de, ut = pe, lt = me, dt = Te, ft = we;
-const St = ({
+var at = ue, it = de, ct = pe, ut = me, lt = Te, dt = we;
+const gt = ({
   title: e,
   duration: r = 5e3,
   titleClassName: o,
@@ -440,39 +440,52 @@ const St = ({
   children: d,
   theme: f,
   showCloseButton: m = !0,
-  className: v
+  closeButtonClassName: v,
+  className: n,
+  open: y = !1,
+  setOpen: w
 }) => {
-  const [n, w] = Re(!1), E = be(0), { theme: I } = $e(), R = f ?? I;
-  ge(() => () => clearTimeout(E.current), []);
-  const g = oe(() => re(e) ? /* @__PURE__ */ c(j, { className: o, children: e }) : /* @__PURE__ */ c("h6", { className: o, children: e }), [e, o]), l = oe(() => re(u) ? /* @__PURE__ */ c(j, { className: t, children: u }) : /* @__PURE__ */ c("h6", { className: t, children: u }), [u, t]), a = Se(() => {
-    w(!1), E.current = window.setTimeout(() => w(!0), 100);
-  }, []);
-  return /* @__PURE__ */ D(it, { swipeDirection: "right", duration: r, children: [
-    /* @__PURE__ */ c(j, { onClick: a, children: d }),
+  const S = Re(0), { theme: g } = Xe(), R = f ?? g;
+  be(() => () => clearTimeout(S.current), []);
+  const l = oe(() => re(e) ? /* @__PURE__ */ c(j, { className: o, children: e }) : e, [e, o]), a = oe(() => re(u) ? /* @__PURE__ */ c(j, { className: t, children: u }) : u, [u, t]), h = ge(() => {
+    w(!1), S.current = window.setTimeout(() => w(!0), 100);
+  }, [w]);
+  return /* @__PURE__ */ D(at, { swipeDirection: "right", duration: r, children: [
+    /* @__PURE__ */ c(j, { onClick: h, children: d }),
     /* @__PURE__ */ D(
-      ut,
+      ct,
       {
-        className: q(Ke({ theme: R, className: v })),
-        open: n,
+        className: q(Ke({ theme: R, className: n })),
+        open: y,
         onOpenChange: w,
         children: [
-          /* @__PURE__ */ c(lt, { asChild: !0, className: "text-lg mb-2 font-semibold", children: g }),
-          /* @__PURE__ */ c(dt, { asChild: !0, children: l }),
-          m && /* @__PURE__ */ c(ft, { asChild: !0, altText: "Close the toast", children: /* @__PURE__ */ D("button", { type: "button", className: "absolute right-1.5 top-1.5", children: [
-            /* @__PURE__ */ c(Xe, { className: q(He({ theme: R })) }),
-            /* @__PURE__ */ c(Ve, { children: "Close toast" })
+          /* @__PURE__ */ c(ut, { asChild: !0, className: o, children: l }),
+          a && /* @__PURE__ */ c(lt, { asChild: !0, children: a }),
+          m && /* @__PURE__ */ c(dt, { asChild: !0, altText: "Close the toast", children: /* @__PURE__ */ D("button", { type: "button", className: "absolute right-1.5 top-1.5", children: [
+            /* @__PURE__ */ c(
+              We,
+              {
+                className: q(
+                  Ve({
+                    theme: R,
+                    className: v
+                  })
+                )
+              }
+            ),
+            /* @__PURE__ */ c(ke, { children: "Close toast" })
           ] }) })
         ]
       }
     ),
     /* @__PURE__ */ c(
-      ct,
+      it,
       {
-        className: q(We({ theme: R }))
+        className: q(He({ theme: R }))
       }
     )
   ] });
 };
 export {
-  St as Toast
+  gt as Toast
 };

package/dist/components/Toast/Toast.variants.js

@@ -1,7 +1,6 @@
 import { c as e } from "../../index-BNmRGtA6.js";
 const a = e(
   [
-    "bg-white",
     "rounded-md",
     "shadow-md",
     "p-4",
@@ -55,7 +54,7 @@ const a = e(
       theme: "kubefirst"
     }
   }
-), i = e(["top-2", "right-2", "w-4", "h-4"], {
+), o = e(["top-2", "right-2", "w-4", "h-4"], {
   variants: {
     theme: {
       kubefirst: ["text-kubefirst-primary"],
@@ -68,7 +67,7 @@ const a = e(
   }
 });
 export {
-  i as closeToastVariants,
+  o as closeToastVariants,
   a as toastVariants,
   r as viewportToastVariants
 };

package/dist/components/Tooltip/Tooltip.js

@@ -1,8 +1,8 @@
 import { jsx as e, jsxs as i } from "react/jsx-runtime";
 import { forwardRef as N, useRef as w, useImperativeHandle as x, useMemo as R, isValidElement as T } from "react";
-import { S as a } from "../../index-DoOsnuB6.js";
+import { S as a } from "../../index-B_6_jmOO.js";
 import { cn as o } from "../../utils/index.js";
-import { tooltipVariants as V, arrowVariants as b } from "./Tooltip.variants.js";
+import { arrowVariants as V, tooltipVariants as b } from "./Tooltip.variants.js";
 import { useTooltip as j } from "./hooks/useTooltip.js";
 import { useTheme as C } from "../../contexts/theme.hook.js";
 const q = N(
@@ -19,13 +19,13 @@ const q = N(
         "div",
         {
           ref: d,
-          className: o(V({ theme: m, position: s })),
+          className: o(b({ theme: m, position: s })),
           "data-visible": u,
           children: [
             /* @__PURE__ */ e(
               "span",
               {
-                className: o(b({ theme: m, position: s }))
+                className: o(V({ theme: m, position: s }))
               }
             ),
             /* @__PURE__ */ e(a, { children: l })

package/dist/components/Typography/Typography.js

@@ -0,0 +1,31 @@
+import { jsx as c } from "react/jsx-runtime";
+import { useId as d } from "react";
+import { typographyVariants as f } from "./Typography.variants.js";
+import { useTheme as n } from "../../contexts/theme.hook.js";
+const u = ({
+  className: e,
+  theme: m,
+  children: p,
+  variant: o,
+  component: s,
+  ...t
+}) => {
+  const r = d(), { theme: h } = n(), y = s ?? (o != null && o.includes("h") ? o : "p");
+  return /* @__PURE__ */ c(
+    y,
+    {
+      id: r,
+      className: f({
+        className: e,
+        theme: m ?? h,
+        variant: o
+      }),
+      ...t,
+      children: p
+    }
+  );
+};
+u.displayName = "Typography";
+export {
+  u as Typography
+};