@konstructio/ui 0.0.2 → 0.0.3

package/dist/components/Toast/Toast.js

@@ -1,31 +1,31 @@
-import { jsxs as k, jsx as c, Fragment as ne } from "react/jsx-runtime";
+import { jsxs as D, jsx as c, Fragment as ne } from "react/jsx-runtime";
 import * as s from "react";
 import { useState as xe, useRef as Re, useEffect as be, useMemo as te, isValidElement as oe, useCallback as ge } from "react";
-import { r as Se } from "../../index-2hJuj4UN.js";
-import { c as Ie, a as Ne, b as X, d as b, u as Ae } from "../../index-8vgf-x5i.js";
-import { u as se, S as j } from "../../index-CCavb-1K.js";
-import { c as Fe } from "../../index-BqM_XclQ.js";
-import { B as _e, R as De, P as Le } from "../../index-2K8qjK4R.js";
-import { P as Oe } from "../../index-B_GWswUP.js";
-import { P as D, d as Me } from "../../index-BJ7FQg17.js";
-import { V as ae, X as ke } from "../../index-4qm4jAkj.js";
+import { P as L, r as Se, d as Ie } from "../../index-OOfdXoxx.js";
+import { c as Ne, a as Ae, b as X, d as b, u as Fe } from "../../index-8vgf-x5i.js";
+import { u as se, S as j } from "../../index-DoOsnuB6.js";
+import { c as _e } from "../../index-BBjak_0p.js";
+import { B as De, R as Le, P as Oe } from "../../index-O3j1K921.js";
+import { P as Me } from "../../index-D4Q2rMby.js";
+import { V as ae, R as ke } from "../../index-ffjBR8Av.js";
 import "../../contexts/theme.context.js";
 import { useTheme as Ve } from "../../contexts/theme.hook.js";
 import "../../js.cookie-OLEfuq_g.js";
 import { toastVariants as Ke, closeToastVariants as He, viewportToastVariants as We } from "./Toast.variants.js";
-var Q = "ToastProvider", [Z, Xe, Ue] = Fe("Toast"), [ie, bt] = Ie("Toast", [Ue]), [$e, U] = ie(Q), ce = (e) => {
+import { X as Xe } from "../../x-CRBgmX1Q.js";
+var Q = "ToastProvider", [Z, $e, Ue] = _e("Toast"), [ie, gt] = Ne("Toast", [Ue]), [Ye, $] = ie(Q), ce = (e) => {
   const {
     __scopeToast: r,
     label: o = "Notification",
     duration: t = 5e3,
     swipeDirection: u = "right",
     swipeThreshold: d = 50,
-    children: f
+    children: p
   } = e, [m, v] = s.useState(null), [n, w] = s.useState(0), E = s.useRef(!1), I = s.useRef(!1);
   return o.trim() || console.error(
     `Invalid prop \`label\` supplied to \`${Q}\`. Expected non-empty \`string\`.`
   ), /* @__PURE__ */ c(Z.Provider, { scope: r, children: /* @__PURE__ */ c(
-    $e,
+    Ye,
     {
       scope: r,
       label: o,
@@ -39,19 +39,19 @@ var Q = "ToastProvider", [Z, Xe, Ue] = Fe("Toast"), [ie, bt] = Ie("Toast", [Ue])
       onToastRemove: s.useCallback(() => w((R) => R - 1), []),
       isFocusedToastEscapeKeyDownRef: E,
       isClosePausedRef: I,
-      children: f
+      children: p
     }
   ) });
 };
 ce.displayName = Q;
-var ue = "ToastViewport", Ye = ["F8"], z = "toast.viewportPause", G = "toast.viewportResume", le = s.forwardRef(
+var ue = "ToastViewport", Be = ["F8"], z = "toast.viewportPause", G = "toast.viewportResume", le = s.forwardRef(
   (e, r) => {
     const {
       __scopeToast: o,
-      hotkey: t = Ye,
+      hotkey: t = Be,
       label: u = "Notifications ({hotkey})",
       ...d
-    } = e, f = U(ue, o), m = Xe(o), v = s.useRef(null), n = s.useRef(null), w = s.useRef(null), E = s.useRef(null), I = se(r, E, f.onViewportChange), R = t.join("+").replace(/Key/g, "").replace(/Digit/g, ""), g = f.toastCount > 0;
+    } = e, p = $(ue, o), m = $e(o), v = s.useRef(null), n = s.useRef(null), w = s.useRef(null), E = s.useRef(null), I = se(r, E, p.onViewportChange), R = t.join("+").replace(/Key/g, "").replace(/Digit/g, ""), g = p.toastCount > 0;
     s.useEffect(() => {
       const a = (P) => {
         var T;
@@ -61,56 +61,56 @@ var ue = "ToastViewport", Ye = ["F8"], z = "toast.viewportPause", G = "toast.vie
     }, [t]), s.useEffect(() => {
       const a = v.current, P = E.current;
       if (g && a && P) {
-        const p = () => {
-          if (!f.isClosePausedRef.current) {
+        const f = () => {
+          if (!p.isClosePausedRef.current) {
             const C = new CustomEvent(z);
-            P.dispatchEvent(C), f.isClosePausedRef.current = !0;
+            P.dispatchEvent(C), p.isClosePausedRef.current = !0;
           }
         }, T = () => {
-          if (f.isClosePausedRef.current) {
+          if (p.isClosePausedRef.current) {
             const C = new CustomEvent(G);
-            P.dispatchEvent(C), f.isClosePausedRef.current = !1;
+            P.dispatchEvent(C), p.isClosePausedRef.current = !1;
           }
         }, h = (C) => {
           !a.contains(C.relatedTarget) && T();
         }, y = () => {
           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", f), a.addEventListener("focusout", h), a.addEventListener("pointermove", f), a.addEventListener("pointerleave", y), window.addEventListener("blur", f), window.addEventListener("focus", T), () => {
+          a.removeEventListener("focusin", f), a.removeEventListener("focusout", h), a.removeEventListener("pointermove", f), a.removeEventListener("pointerleave", y), window.removeEventListener("blur", f), window.removeEventListener("focus", T);
         };
       }
-    }, [g, f.isClosePausedRef]);
+    }, [g, p.isClosePausedRef]);
     const l = s.useCallback(
       ({ tabbingDirection: a }) => {
-        const p = m().map((T) => {
-          const h = T.ref.current, y = [h, ...nt(h)];
+        const f = m().map((T) => {
+          const h = T.ref.current, y = [h, ...st(h)];
           return a === "forwards" ? y : y.reverse();
         });
-        return (a === "forwards" ? p.reverse() : p).flat();
+        return (a === "forwards" ? f.reverse() : f).flat();
       },
       [m]
     );
     return s.useEffect(() => {
       const a = E.current;
       if (a) {
-        const P = (p) => {
+        const P = (f) => {
           var y, C, N;
-          const T = p.altKey || p.ctrlKey || p.metaKey;
-          if (p.key === "Tab" && !T) {
-            const L = document.activeElement, F = p.shiftKey;
-            if (p.target === a && F) {
+          const T = f.altKey || f.ctrlKey || f.metaKey;
+          if (f.key === "Tab" && !T) {
+            const O = document.activeElement, F = f.shiftKey;
+            if (f.target === a && F) {
               (y = n.current) == null || y.focus();
               return;
             }
-            const A = l({ tabbingDirection: F ? "backwards" : "forwards" }), V = A.findIndex((i) => i === L);
-            q(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 === O);
+            q(A.slice(V + 1)) ? f.preventDefault() : F ? (C = n.current) == null || C.focus() : (N = w.current) == null || N.focus();
           }
         };
         return a.addEventListener("keydown", P), () => a.removeEventListener("keydown", P);
       }
-    }, [m, l]), /* @__PURE__ */ k(
-      _e,
+    }, [m, l]), /* @__PURE__ */ D(
+      De,
       {
         ref: v,
         role: "region",
@@ -130,7 +130,7 @@ var ue = "ToastViewport", Ye = ["F8"], z = "toast.viewportPause", G = "toast.vie
               }
             }
           ),
-          /* @__PURE__ */ c(Z.Slot, { scope: o, children: /* @__PURE__ */ c(D.ol, { tabIndex: -1, ...d, ref: I }) }),
+          /* @__PURE__ */ c(Z.Slot, { scope: o, children: /* @__PURE__ */ c(L.ol, { tabIndex: -1, ...d, ref: I }) }),
           g && /* @__PURE__ */ c(
             J,
             {
@@ -151,7 +151,7 @@ var ue = "ToastViewport", Ye = ["F8"], z = "toast.viewportPause", G = "toast.vie
 le.displayName = ue;
 var de = "ToastFocusProxy", J = s.forwardRef(
   (e, r) => {
-    const { __scopeToast: o, onFocusFromOutsideViewport: t, ...u } = e, d = U(de, o);
+    const { __scopeToast: o, onFocusFromOutsideViewport: t, ...u } = e, d = $(de, o);
     return /* @__PURE__ */ c(
       ae,
       {
@@ -160,9 +160,9 @@ var de = "ToastFocusProxy", J = s.forwardRef(
         ...u,
         ref: r,
         style: { position: "fixed" },
-        onFocus: (f) => {
+        onFocus: (p) => {
           var n;
-          const m = f.relatedTarget;
+          const m = p.relatedTarget;
           !((n = d.viewport) != null && n.contains(m)) && t();
         }
       }
@@ -170,18 +170,18 @@ var de = "ToastFocusProxy", J = s.forwardRef(
   }
 );
 J.displayName = de;
-var $ = "Toast", Be = "toast.swipeStart", je = "toast.swipeMove", qe = "toast.swipeCancel", ze = "toast.swipeEnd", fe = 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] = Ne({
+    const { forceMount: o, open: t, defaultOpen: u, onOpenChange: d, ...p } = e, [m = !0, v] = Ae({
       prop: t,
       defaultProp: u,
       onChange: d
     });
-    return /* @__PURE__ */ c(Oe, { present: o || m, children: /* @__PURE__ */ c(
-      Qe,
+    return /* @__PURE__ */ c(Me, { present: o || m, children: /* @__PURE__ */ c(
+      Ze,
       {
         open: m,
-        ...f,
+        ...p,
         ref: r,
         onClose: () => v(!1),
         onPause: X(e.onPause),
@@ -204,18 +204,18 @@ var $ = "Toast", Be = "toast.swipeStart", je = "toast.swipeMove", qe = "toast.sw
     ) });
   }
 );
-fe.displayName = $;
-var [Ge, Je] = ie($, {
+pe.displayName = U;
+var [Je, Qe] = ie(U, {
   onClose() {
   }
-}), Qe = s.forwardRef(
+}), Ze = s.forwardRef(
   (e, r) => {
     const {
       __scopeToast: o,
       type: t = "foreground",
       duration: u,
       open: d,
-      onClose: f,
+      onClose: p,
       onEscapeKeyDown: m,
       onPause: v,
       onResume: n,
@@ -224,12 +224,12 @@ var [Ge, Je] = ie($, {
       onSwipeCancel: I,
       onSwipeEnd: R,
       ...g
-    } = e, l = U($, o), [a, P] = s.useState(null), p = se(r, (i) => P(i)), T = s.useRef(null), h = s.useRef(null), y = u || l.duration, C = s.useRef(0), N = s.useRef(y), L = s.useRef(0), { onToastAdd: F, onToastRemove: Y } = l, _ = X(() => {
+    } = e, l = $(U, o), [a, P] = s.useState(null), f = se(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(() => {
       var x;
-      (a == null ? void 0 : a.contains(document.activeElement)) && ((x = l.viewport) == null || x.focus()), f();
+      (a == null ? void 0 : a.contains(document.activeElement)) && ((x = l.viewport) == null || x.focus()), p();
     }), A = s.useCallback(
       (i) => {
-        !i || i === 1 / 0 || (window.clearTimeout(L.current), C.current = (/* @__PURE__ */ new Date()).getTime(), L.current = window.setTimeout(_, i));
+        !i || i === 1 / 0 || (window.clearTimeout(O.current), C.current = (/* @__PURE__ */ new Date()).getTime(), O.current = window.setTimeout(_, i));
       },
       [_]
     );
@@ -239,8 +239,8 @@ var [Ge, Je] = ie($, {
         const x = () => {
           A(N.current), n == null || n();
         }, S = () => {
-          const O = (/* @__PURE__ */ new Date()).getTime() - C.current;
-          N.current = N.current - O, window.clearTimeout(L.current), v == null || v();
+          const M = (/* @__PURE__ */ new Date()).getTime() - C.current;
+          N.current = N.current - M, window.clearTimeout(O.current), v == null || v();
         };
         return i.addEventListener(z, S), i.addEventListener(G, x), () => {
           i.removeEventListener(z, S), i.removeEventListener(G, x);
@@ -250,9 +250,9 @@ var [Ge, Je] = ie($, {
       d && !l.isClosePausedRef.current && A(y);
     }, [d, y, l.isClosePausedRef, A]), s.useEffect(() => (F(), () => Y()), [F, Y]);
     const V = s.useMemo(() => a ? ye(a) : null, [a]);
-    return l.viewport ? /* @__PURE__ */ k(ne, { children: [
+    return l.viewport ? /* @__PURE__ */ D(ne, { children: [
       V && /* @__PURE__ */ c(
-        Ze,
+        et,
         {
           __scopeToast: o,
           role: "status",
@@ -261,16 +261,16 @@ var [Ge, Je] = ie($, {
           children: V
         }
       ),
-      /* @__PURE__ */ c(Ge, { scope: o, onClose: _, children: Se.createPortal(
+      /* @__PURE__ */ c(Je, { scope: o, onClose: _, children: Se.createPortal(
         /* @__PURE__ */ c(Z.ItemSlot, { scope: o, children: /* @__PURE__ */ c(
-          De,
+          Le,
           {
             asChild: !0,
             onEscapeKeyDown: b(m, () => {
               l.isFocusedToastEscapeKeyDownRef.current || _(), l.isFocusedToastEscapeKeyDownRef.current = !1;
             }),
             children: /* @__PURE__ */ c(
-              D.li,
+              L.li,
               {
                 role: "status",
                 "aria-live": "off",
@@ -279,7 +279,7 @@ var [Ge, Je] = ie($, {
                 "data-state": d ? "open" : "closed",
                 "data-swipe-direction": l.swipeDirection,
                 ...g,
-                ref: p,
+                ref: f,
                 style: { userSelect: "none", touchAction: "none", ...e.style },
                 onKeyDown: b(e.onKeyDown, (i) => {
                   i.key === "Escape" && (m == null || m(i.nativeEvent), i.nativeEvent.defaultPrevented || (l.isFocusedToastEscapeKeyDownRef.current = !0, _()));
@@ -289,27 +289,27 @@ var [Ge, Je] = ie($, {
                 }),
                 onPointerMove: b(e.onPointerMove, (i) => {
                   if (!T.current) return;
-                  const x = i.clientX - T.current.x, S = i.clientY - T.current.y, O = !!h.current, M = ["left", "right"].includes(l.swipeDirection), K = ["left", "up"].includes(l.swipeDirection) ? Math.min : Math.max, Pe = M ? K(0, x) : 0, Ce = M ? 0 : K(0, S), B = i.pointerType === "touch" ? 10 : 2, H = { x: Pe, y: Ce }, ee = { originalEvent: i, delta: H };
-                  O ? (h.current = H, W(je, E, ee, {
+                  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, Pe = k ? K(0, x) : 0, Ce = k ? 0 : K(0, S), B = i.pointerType === "touch" ? 10 : 2, H = { x: Pe, y: Ce }, ee = { originalEvent: i, delta: H };
+                  M ? (h.current = H, W(qe, E, ee, {
                     discrete: !1
-                  })) : re(H, l.swipeDirection, B) ? (h.current = H, W(Be, w, ee, {
+                  })) : re(H, l.swipeDirection, B) ? (h.current = H, W(je, w, ee, {
                     discrete: !1
                   }), i.target.setPointerCapture(i.pointerId)) : (Math.abs(x) > B || Math.abs(S) > 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 O = i.currentTarget, M = { originalEvent: i, delta: x };
-                    re(x, l.swipeDirection, l.swipeThreshold) ? W(ze, R, M, {
+                    const M = i.currentTarget, k = { originalEvent: i, delta: x };
+                    re(x, l.swipeDirection, l.swipeThreshold) ? W(Ge, R, k, {
                       discrete: !0
                     }) : W(
-                      qe,
+                      ze,
                       I,
-                      M,
+                      k,
                       {
                         discrete: !0
                       }
-                    ), O.addEventListener("click", (K) => K.preventDefault(), {
+                    ), M.addEventListener("click", (K) => K.preventDefault(), {
                       once: !0
                     });
                   }
@@ -322,30 +322,30 @@ var [Ge, Je] = ie($, {
       ) })
     ] }) : null;
   }
-), Ze = (e) => {
-  const { __scopeToast: r, children: o, ...t } = e, u = U($, r), [d, f] = s.useState(!1), [m, v] = s.useState(!1);
-  return ot(() => f(!0)), s.useEffect(() => {
+), et = (e) => {
+  const { __scopeToast: r, children: o, ...t } = e, u = $(U, r), [d, p] = s.useState(!1), [m, v] = s.useState(!1);
+  return rt(() => p(!0)), s.useEffect(() => {
     const n = window.setTimeout(() => v(!0), 1e3);
     return () => window.clearTimeout(n);
-  }, []), m ? null : /* @__PURE__ */ c(Le, { asChild: !0, children: /* @__PURE__ */ c(ae, { ...t, children: d && /* @__PURE__ */ k(ne, { children: [
+  }, []), m ? null : /* @__PURE__ */ c(Oe, { asChild: !0, children: /* @__PURE__ */ c(ae, { ...t, children: d && /* @__PURE__ */ D(ne, { children: [
     u.label,
     " ",
     o
   ] }) }) });
-}, et = "ToastTitle", pe = s.forwardRef(
+}, tt = "ToastTitle", fe = s.forwardRef(
   (e, r) => {
     const { __scopeToast: o, ...t } = e;
-    return /* @__PURE__ */ c(D.div, { ...t, ref: r });
+    return /* @__PURE__ */ c(L.div, { ...t, ref: r });
   }
 );
-pe.displayName = et;
-var tt = "ToastDescription", me = s.forwardRef(
+fe.displayName = tt;
+var ot = "ToastDescription", me = s.forwardRef(
   (e, r) => {
     const { __scopeToast: o, ...t } = e;
-    return /* @__PURE__ */ c(D.div, { ...t, ref: r });
+    return /* @__PURE__ */ c(L.div, { ...t, ref: r });
   }
 );
-me.displayName = tt;
+me.displayName = ot;
 var Te = "ToastAction", ve = s.forwardRef(
   (e, r) => {
     const { altText: o, ...t } = e;
@@ -357,9 +357,9 @@ var Te = "ToastAction", ve = s.forwardRef(
 ve.displayName = Te;
 var we = "ToastClose", Ee = s.forwardRef(
   (e, r) => {
-    const { __scopeToast: o, ...t } = e, u = Je(we, o);
+    const { __scopeToast: o, ...t } = e, u = Qe(we, o);
     return /* @__PURE__ */ c(he, { asChild: !0, children: /* @__PURE__ */ c(
-      D.button,
+      L.button,
       {
         type: "button",
         ...t,
@@ -373,7 +373,7 @@ Ee.displayName = we;
 var he = s.forwardRef((e, r) => {
   const { __scopeToast: o, altText: t, ...u } = e;
   return /* @__PURE__ */ c(
-    D.div,
+    L.div,
     {
       "data-radix-toast-announce-exclude": "",
       "data-radix-toast-announce-alt": t || void 0,
@@ -385,12 +385,12 @@ var he = s.forwardRef((e, r) => {
 function ye(e) {
   const r = [];
   return Array.from(e.childNodes).forEach((t) => {
-    if (t.nodeType === t.TEXT_NODE && t.textContent && r.push(t.textContent), rt(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);
+          const p = t.dataset.radixToastAnnounceAlt;
+          p && r.push(p);
         } else
           r.push(...ye(t));
     }
@@ -398,26 +398,26 @@ function ye(e) {
 }
 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 ? Me(u, d) : u.dispatchEvent(d);
+  r && u.addEventListener(e, r, { once: !0 }), t ? Ie(u, d) : u.dispatchEvent(d);
 }
 var re = (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 ot(e = () => {
+function rt(e = () => {
 }) {
   const r = X(e);
-  Ae(() => {
+  Fe(() => {
     let o = 0, t = 0;
     return o = window.requestAnimationFrame(() => t = window.requestAnimationFrame(r)), () => {
       window.cancelAnimationFrame(o), window.cancelAnimationFrame(t);
     };
   }, [r]);
 }
-function rt(e) {
+function nt(e) {
   return e.nodeType === e.ELEMENT_NODE;
 }
-function nt(e) {
+function st(e) {
   const r = [], o = document.createTreeWalker(e, NodeFilter.SHOW_ELEMENT, {
     acceptNode: (t) => {
       const u = t.tagName === "INPUT" && t.type === "hidden";
@@ -431,41 +431,44 @@ function q(e) {
   const r = document.activeElement;
   return e.some((o) => o === r ? !0 : (o.focus(), document.activeElement !== r));
 }
-var st = ce, at = le, it = fe, ct = pe, ut = me, lt = ve;
-const gt = ({
+var at = ce, it = le, ct = pe, ut = fe, lt = me, dt = ve;
+const St = ({
   title: e,
   duration: r = 5e3,
   titleClassName: o,
   descriptionClassName: t,
   description: u,
   children: d,
-  theme: f,
+  theme: p,
   showCloseButton: m = !0,
   className: v
 }) => {
-  const [n, w] = xe(!1), E = Re(0), { theme: I } = Ve(), R = f ?? I;
+  const [n, w] = xe(!1), E = Re(0), { theme: I } = Ve(), R = p ?? I;
   be(() => () => clearTimeout(E.current), []);
   const g = te(() => oe(e) ? /* @__PURE__ */ c(j, { className: o, children: e }) : /* @__PURE__ */ c("h6", { className: o, children: e }), [e, o]), l = te(() => oe(u) ? /* @__PURE__ */ c(j, { className: t, children: u }) : /* @__PURE__ */ c("h6", { className: t, children: u }), [u, t]), a = ge(() => {
     w(!1), E.current = window.setTimeout(() => w(!0), 100);
   }, []);
-  return /* @__PURE__ */ k(st, { swipeDirection: "right", duration: r, children: [
+  return /* @__PURE__ */ D(at, { swipeDirection: "right", duration: r, children: [
     /* @__PURE__ */ c(j, { onClick: a, children: d }),
-    /* @__PURE__ */ k(
-      it,
+    /* @__PURE__ */ D(
+      ct,
       {
         className: Ke({ theme: R, className: v }),
         open: n,
         onOpenChange: w,
         children: [
-          /* @__PURE__ */ c(ct, { asChild: !0, className: "text-lg mb-2 font-semibold", children: g }),
-          /* @__PURE__ */ c(ut, { asChild: !0, children: l }),
-          m && /* @__PURE__ */ c(lt, { className: "absolute", asChild: !0, altText: "Close the toast", children: /* @__PURE__ */ c(ke, { className: He({ theme: R }) }) })
+          /* @__PURE__ */ c(ut, { asChild: !0, className: "text-lg mb-2 font-semibold", children: g }),
+          /* @__PURE__ */ c(lt, { asChild: !0, children: l }),
+          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(Xe, { className: He({ theme: R }) }),
+            /* @__PURE__ */ c(ke, { children: "Close toast" })
+          ] }) })
         ]
       }
     ),
-    /* @__PURE__ */ c(at, { className: We({ theme: R }) })
+    /* @__PURE__ */ c(it, { className: We({ theme: R }) })
   ] });
 };
 export {
-  gt as Toast
+  St as Toast
 };

package/dist/components/Toast/Toast.variants.d.ts

@@ -1,9 +1,9 @@
 export declare const toastVariants: (props?: ({
-    theme?: "kubefirst" | "konstruct" | "colony" | null | undefined;
+    theme?: "kubefirst" | "colony" | "civo" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const viewportToastVariants: (props?: ({
-    theme?: "kubefirst" | "konstruct" | "colony" | null | undefined;
+    theme?: "kubefirst" | "colony" | "civo" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const closeToastVariants: (props?: ({
-    theme?: "kubefirst" | "konstruct" | "colony" | null | undefined;
+    theme?: "kubefirst" | "colony" | "civo" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

@@ -1,5 +1,5 @@
-import { c as t } from "../../index-BwYCDOHZ.js";
-const a = t(
+import { c as e } from "../../index-BNmRGtA6.js";
+const a = e(
   [
     "bg-white",
     "rounded-md",
@@ -20,15 +20,15 @@ const a = t(
     variants: {
       theme: {
         kubefirst: ["shadow-purple-200", "border-purple-100"],
-        konstruct: ["shadow-orange-200", "border-orange-100"],
-        colony: ["shadow-red-200", "border-red-100"]
+        colony: ["shadow-red-200", "border-red-100"],
+        civo: ""
       }
     },
     defaultVariants: {
       theme: "kubefirst"
     }
   }
-), r = t(
+), r = e(
   [
     "fixed",
     "bottom-0",
@@ -47,20 +47,20 @@ const a = t(
     variants: {
       theme: {
         kubefirst: "",
-        konstruct: "",
-        colony: ""
+        colony: "",
+        civo: ""
       }
     },
     defaultVariants: {
       theme: "kubefirst"
     }
   }
-), o = t(["top-2", "right-2", "w-4", "h-4"], {
+), i = e(["top-2", "right-2", "w-4", "h-4"], {
   variants: {
     theme: {
-      kubefirst: ["text-kubefirst-purple-light"],
-      konstruct: ["text-orange-400"],
-      colony: ["text-red-400"]
+      kubefirst: ["text-kubefirst-primary"],
+      colony: ["text-red-400"],
+      civo: ""
     }
   },
   defaultVariants: {
@@ -68,7 +68,7 @@ const a = t(
   }
 });
 export {
-  o as closeToastVariants,
+  i as closeToastVariants,
   a as toastVariants,
   r as viewportToastVariants
 };

package/dist/components/Tooltip/Tooltip.js

@@ -1,6 +1,6 @@
 import { jsx as e, jsxs as s } from "react/jsx-runtime";
 import { forwardRef as N, useRef as v, useImperativeHandle as w, useMemo as R, isValidElement as T } from "react";
-import { S as i } from "../../index-CCavb-1K.js";
+import { S as i } from "../../index-DoOsnuB6.js";
 import "../../contexts/theme.context.js";
 import { useTheme as V } from "../../contexts/theme.hook.js";
 import "../../js.cookie-OLEfuq_g.js";

package/dist/components/Tooltip/Tooltip.variants.d.ts

@@ -1,8 +1,8 @@
 export declare const tooltipVariants: (props?: ({
-    theme?: "kubefirst" | "konstruct" | "colony" | null | undefined;
+    theme?: "kubefirst" | "colony" | "civo" | null | undefined;
     position?: "left" | "right" | "top" | "bottom" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const arrowVariants: (props?: ({
-    theme?: "kubefirst" | "konstruct" | "colony" | null | undefined;
+    theme?: "kubefirst" | "colony" | "civo" | null | undefined;
     position?: "left" | "right" | "top" | "bottom" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/Tooltip/Tooltip.variants.js

@@ -1,4 +1,4 @@
-import { c as r } from "../../index-BwYCDOHZ.js";
+import { c as r } from "../../index-BNmRGtA6.js";
 const e = r(
   [
     "absolute",
@@ -16,13 +16,13 @@ const e = r(
   {
     variants: {
       theme: {
-        kubefirst: "bg-kubefirst-purple-light",
-        konstruct: "bg-orange-500",
-        colony: "bg-red-700"
+        kubefirst: "bg-kubefirst-primary",
+        colony: "bg-red-700",
+        civo: ""
       },
       position: {
-        top: ["-top-[110%]", "left-[50%]", "-translate-x-1/2"],
-        bottom: ["-bottom-[110%]", "right-[50%]", "translate-x-1/2"],
+        top: ["-top-[120%]", "left-[50%]", "-translate-x-1/2"],
+        bottom: ["-bottom-[120%]", "right-[50%]", "translate-x-1/2"],
         right: ["top-1/2", "ml-1", "left-[100%]", "-translate-y-2/4"],
         left: ["top-1/2", "mr-1", "right-[100%]", "-translate-y-2/4"]
       }
@@ -35,9 +35,9 @@ const e = r(
 ), o = r(["absolute", "w-0", "h-0"], {
   variants: {
     theme: {
-      kubefirst: "border-kubefirst-purple-light",
-      konstruct: "border-orange-500",
-      colony: "border-red-700"
+      kubefirst: "border-kubefirst-primary",
+      colony: "border-red-700",
+      civo: ""
     },
     position: {
       top: [

package/dist/components/Tooltip/hooks/useTooltip.d.ts

@@ -1,4 +1,4 @@
 export declare const useTooltip: () => {
     isVisible: boolean;
-    componentRef: import('react').RefObject<HTMLElement>;
+    componentRef: import('react').RefObject<HTMLElement | null>;
 };

package/dist/components/index.js

@@ -5,7 +5,7 @@ import { Button as a } from "./Button/Button.js";
 import { Checkbox as u } from "./Checkbox/Checkbox.js";
 import { Dropdown as d } from "./Dropdown/Dropdown.js";
 import { Input as i } from "./Input/Input.js";
-import { M as T } from "../Modal-CO0_SnXD.js";
+import { M as T } from "../Modal-Bg9UG35z.js";
 import { NumberInput as b } from "./NumberInput/NumberInput.js";
 import { ProgressBar as B } from "./ProgressBar/ProgressBar.js";
 import { Radio as h } from "./Radio/Radio.js";

package/dist/contexts/theme.context.d.ts

@@ -1,4 +1,4 @@
-export type Theme = 'kubefirst' | 'konstruct' | 'colony' | undefined;
+export type Theme = 'kubefirst' | 'colony' | 'civo' | undefined;
 export type ThemeContextType = {
     theme: Theme;
     setTheme: (theme: Theme) => void;