@koide-labs/ui 0.0.11 → 0.0.12

package/dist/components/anchor/index.js

@@ -8,16 +8,13 @@ function p({ external: e, render: r, ...n }) {
   return o({
     defaultTagName: "a",
     render: r,
-    props: t(
-      {
-        className: s.anchor,
-        ...e ? {
-          target: "_blank",
-          rel: "noreferrer"
-        } : {}
-      },
-      n
-    )
+    props: t(n, {
+      className: s.anchor,
+      ...e ? {
+        target: "_blank",
+        rel: "noreferrer"
+      } : {}
+    })
   });
 }
 export {

package/dist/components/badge/index.d.ts

@@ -13,4 +13,4 @@ export interface BadgeProps extends Omit<useRender.ComponentProps<"span">, "chil
     /** Tagline of badge. */
     tagline?: string;
 }
-export declare function Badge({ icon, name, color, shiny, tagline, render, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export declare function Badge({ icon, name, color, shiny, tagline, render, className, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/badge/index.js

@@ -1,41 +1,43 @@
 "use client";
-import { jsx as e, jsxs as c, Fragment as g } from "react/jsx-runtime";
-import { c as p } from "../../clsx-OuTLNxxd.js";
-import { Icon as f } from "../icon/index.js";
-import { Text as u } from "../text/index.js";
-import { Tooltip as _ } from "../tooltip/index.js";
-import { View as b } from "../view/index.js";
-import { u as h } from "../../useRender-CLx7dR_1.js";
-import { m as x } from "../../useRenderElement-DwToLA61.js";
-import '../../index8.css';const y = "_badge_sf2gl_1", T = "_badge_shiny_sf2gl_16", t = {
-  badge: y,
-  badge_shiny: T
+import { jsx as e, jsxs as g, Fragment as p } from "react/jsx-runtime";
+import { c as f } from "../../clsx-OuTLNxxd.js";
+import { Icon as u } from "../icon/index.js";
+import { Text as _ } from "../text/index.js";
+import { Tooltip as b } from "../tooltip/index.js";
+import { View as h } from "../view/index.js";
+import { u as x } from "../../useRender-CLx7dR_1.js";
+import { m as y } from "../../useRenderElement-DwToLA61.js";
+import '../../index8.css';const T = "_badge_sf2gl_1", j = "_badge_shiny_sf2gl_16", t = {
+  badge: T,
+  badge_shiny: j
 };
-function R({
+function V({
   icon: r,
   name: m,
   color: n,
   shiny: i,
   tagline: s,
   render: a,
-  ...l
+  className: l,
+  ...d
 }) {
-  const d = h({
+  const c = x({
     defaultTagName: "span",
     render: a,
-    props: x(
-      {
-        className: p(t.badge, i && t.badge_shiny),
-        children: /* @__PURE__ */ c(g, { children: [
-          r ? /* @__PURE__ */ e(f, { name: r }) : null,
-          m
-        ] })
-      },
-      l
-    )
-  }), o = /* @__PURE__ */ e(b, { color: n, children: d });
-  return s ? /* @__PURE__ */ e(_, { trigger: o, children: /* @__PURE__ */ e(u, { size: "sm", multiline: !0, children: s }) }) : o;
+    props: y(d, {
+      className: f(
+        t.badge,
+        i && t.badge_shiny,
+        l
+      ),
+      children: /* @__PURE__ */ g(p, { children: [
+        r ? /* @__PURE__ */ e(u, { name: r }) : null,
+        m
+      ] })
+    })
+  }), o = /* @__PURE__ */ e(h, { color: n, children: c });
+  return s ? /* @__PURE__ */ e(b, { trigger: o, children: /* @__PURE__ */ e(_, { size: "sm", multiline: !0, children: s }) }) : o;
 }
 export {
-  R as Badge
+  V as Badge
 };

package/dist/components/collapse/index.js

@@ -24,17 +24,11 @@ function R({
     defaultTagName: "div",
     render: o,
     ref: l,
-    props: _(
-      {
-        "aria-hidden": !s,
-        className: p(
-          t.collapse,
-          s && t.collapse_expand
-        ),
-        style: { "--collapse-height": `${n}px` }
-      },
-      a
-    )
+    props: _(a, {
+      "aria-hidden": !s,
+      className: p(t.collapse, s && t.collapse_expand),
+      style: { "--collapse-height": `${n}px` }
+    })
   });
 }
 export {

package/dist/components/heading/index.js

@@ -24,12 +24,7 @@ function _({
   const l = i(s), a = d(e || l), u = c({
     defaultTagName: `h${a}`,
     render: o,
-    props: g(
-      {
-        className: v.heading
-      },
-      r
-    )
+    props: g(r, { className: v.heading })
   });
   return /* @__PURE__ */ m(
     x,

package/dist/components/text/index.js

@@ -29,22 +29,19 @@ function P({
   return m({
     defaultTagName: "span",
     render: x,
-    props: r(
-      {
-        className: i(
-          c.view,
-          t.text,
-          t[`text_color_${l}`],
-          t[`text_size_${s}`],
-          !e && t["text_clip-line"],
-          !e && _ > 1 && t["text_clamp-lines"]
-        ),
-        style: {
-          "--text-max-lines": Math.max(_, 1)
-        }
-      },
-      o
-    )
+    props: r(o, {
+      className: i(
+        c.view,
+        t.text,
+        t[`text_color_${l}`],
+        t[`text_size_${s}`],
+        !e && t["text_clip-line"],
+        !e && _ > 1 && t["text_clamp-lines"]
+      ),
+      style: {
+        "--text-max-lines": Math.max(_, 1)
+      }
+    })
   });
 }
 export {

package/dist/components/toast/toast.js

@@ -3,13 +3,13 @@ import { c as rt } from "../../clsx-OuTLNxxd.js";
 import { Button as st } from "../button/index.js";
 import { Heading as ot } from "../heading/index.js";
 import { IconButton as it } from "../icon-button/index.js";
-import { Surface as at } from "../surface/index.js";
-import { Text as ct } from "../text/index.js";
+import { Surface as ct } from "../surface/index.js";
+import { Text as at } from "../text/index.js";
 import { View as xe } from "../view/index.js";
 import { T as ut, a as Re, u as lt } from "../../use-toast-manager-Dq-44AuW.js";
 import * as e from "react";
 import { o as ne } from "../../owner-rKN292Q9.js";
-import { u as U } from "../../useStableCallback-CkTrVkNX.js";
+import { u as j } from "../../useStableCallback-CkTrVkNX.js";
 import { T as Pe } from "../../useTimeout-CflX-kz3.js";
 import { h as de, f as se, m as Ee, e as be } from "../../element-CZEOj04G.js";
 import { F as ft } from "../../FloatingPortalLite-DVyq6YhV.js";
@@ -17,13 +17,13 @@ import { v as dt } from "../../visuallyHidden-CpJ-mhai.js";
 import { F as Te } from "../../FloatingPortal-tWyuKRSN.js";
 import { u as ie } from "../../useRenderElement-DwToLA61.js";
 import { d as Oe } from "../../floating-ui.utils.dom-C7FS5id0.js";
-import * as mt from "react-dom";
-import { i as pt } from "../../inertValue-BCYGsdmf.js";
+import * as pt from "react-dom";
+import { i as mt } from "../../inertValue-BCYGsdmf.js";
 import { u as Se } from "../../useIsoLayoutEffect-CIDbvm3Q.js";
 import { f as ht } from "../../formatErrorMessage-BqPuTBN-.js";
 import { a as gt, t as vt } from "../../useOpenChangeComplete-Dse9kY9E.js";
-import { u as _t } from "../../useId-C5kyn6tA.js";
-import { u as wt } from "../../useButton-DfIwsdb8.js";
+import { u as wt } from "../../useId-C5kyn6tA.js";
+import { u as _t } from "../../useButton-DfIwsdb8.js";
 import '../../toast.css';let Ce = 0;
 function yt(f) {
   return Ce += 1, `${f}-${Math.random().toString(36).slice(2, 6)}-${Ce}`;
@@ -41,32 +41,32 @@ function De(f, d) {
   }
   return f;
 }
-const Ie = function(d) {
+const Le = function(d) {
   const {
     children: v,
     timeout: s = 5e3,
-    limit: z = 3,
+    limit: V = 3,
     toastManager: P
-  } = d, [w, c] = e.useState([]), [_, r] = e.useState(!1), [p, y] = e.useState(!1), [u, R] = e.useState(null);
-  w.length === 0 && (_ && r(!1), p && y(!1));
-  const S = _ || p, M = e.useRef(/* @__PURE__ */ new Map()), Y = e.useRef(null), C = e.useRef(!0), X = e.useRef(!1);
-  function j(t) {
-    const m = de(ne(Y.current));
-    if (!Y.current || !se(Y.current, m) || !Ee(m))
+  } = d, [_, a] = e.useState([]), [w, r] = e.useState(!1), [m, y] = e.useState(!1), [u, R] = e.useState(null);
+  _.length === 0 && (w && r(!1), m && y(!1));
+  const S = w || m, M = e.useRef(/* @__PURE__ */ new Map()), z = e.useRef(null), C = e.useRef(!0), X = e.useRef(!1);
+  function W(t) {
+    const p = de(ne(z.current));
+    if (!z.current || !se(z.current, p) || !Ee(p))
       return;
-    const g = w.findIndex((n) => n.id === t);
+    const g = _.findIndex((n) => n.id === t);
     let o = null, h = g + 1;
-    for (; h < w.length; ) {
-      if (w[h].transitionStatus !== "ending") {
-        o = w[h];
+    for (; h < _.length; ) {
+      if (_[h].transitionStatus !== "ending") {
+        o = _[h];
         break;
       }
       h += 1;
     }
     if (!o)
       for (h = g - 1; h >= 0; ) {
-        if (w[h].transitionStatus !== "ending") {
-          o = w[h];
+        if (_[h].transitionStatus !== "ending") {
+          o = _[h];
           break;
         }
         h -= 1;
@@ -75,22 +75,22 @@ const Ie = function(d) {
       preventScroll: !0
     });
   }
-  const D = U(() => {
+  const D = j(() => {
     X.current || (X.current = !0, M.current.forEach((t) => {
       if (t.timeout) {
         t.timeout.clear();
-        const m = Date.now() - t.start, g = t.delay - m;
+        const p = Date.now() - t.start, g = t.delay - p;
         t.remaining = g > 0 ? g : 0;
       }
     }));
-  }), F = U(() => {
-    X.current && (X.current = !1, M.current.forEach((t, m) => {
+  }), F = j(() => {
+    X.current && (X.current = !1, M.current.forEach((t, p) => {
       t.remaining = t.remaining > 0 ? t.remaining : t.delay, t.timeout ??= Pe.create(), t.timeout.start(t.remaining, () => {
-        M.current.delete(m), t.callback();
+        M.current.delete(p), t.callback();
       }), t.start = Date.now();
     }));
-  }), k = U((t) => {
-    c((o) => {
+  }), I = j((t) => {
+    a((o) => {
       const h = o.map((l) => l.id === t ? {
         ...l,
         transitionStatus: "ending",
@@ -99,43 +99,43 @@ const Ie = function(d) {
       return h.map((l) => {
         if (l.transitionStatus === "ending")
           return l;
-        const x = n.indexOf(l) >= z;
+        const x = n.indexOf(l) >= V;
         return {
           ...l,
           limited: x
         };
       });
     });
-    const m = M.current.get(t);
-    m && m.timeout && (m.timeout.clear(), M.current.delete(t)), w.find((o) => o.id === t)?.onClose?.(), j(t), w.length === 1 && (r(!1), y(!1));
-  }), q = U((t) => {
-    c((g) => g.filter((o) => o.id !== t)), w.find((g) => g.id === t)?.onRemove?.();
-  }), V = U((t, m, g) => {
-    const o = Date.now(), h = C.current && !_ && !p, n = h ? Pe.create() : void 0;
-    n?.start(m, () => {
+    const p = M.current.get(t);
+    p && p.timeout && (p.timeout.clear(), M.current.delete(t)), _.find((o) => o.id === t)?.onClose?.(), W(t), _.length === 1 && (r(!1), y(!1));
+  }), q = j((t) => {
+    a((g) => g.filter((o) => o.id !== t)), _.find((g) => g.id === t)?.onRemove?.();
+  }), $ = j((t, p, g) => {
+    const o = Date.now(), h = C.current && !w && !m, n = h ? Pe.create() : void 0;
+    n?.start(p, () => {
       M.current.delete(t), g();
     }), M.current.set(t, {
       timeout: n,
       start: h ? o : 0,
-      delay: m,
-      remaining: m,
+      delay: p,
+      remaining: p,
       callback: g
     });
-  }), G = U((t) => {
-    const m = t.id || yt("toast"), g = {
+  }), G = j((t) => {
+    const p = t.id || yt("toast"), g = {
       ...t,
-      id: m,
+      id: p,
       transitionStatus: "starting"
     };
-    c((h) => {
+    a((h) => {
       const n = [g, ...h], l = n.filter((x) => x.transitionStatus !== "ending");
-      if (l.length > z) {
-        const x = l.length - z, T = l.slice(-x);
-        return n.map((I) => T.some((Z) => Z.id === I.id) ? {
-          ...I,
+      if (l.length > V) {
+        const x = l.length - V, T = l.slice(-x);
+        return n.map((L) => T.some((Z) => Z.id === L.id) ? {
+          ...L,
           limited: !0
         } : {
-          ...I,
+          ...L,
           limited: !1
         });
       }
@@ -145,34 +145,34 @@ const Ie = function(d) {
       }));
     });
     const o = g.timeout ?? s;
-    return g.type !== "loading" && o > 0 && V(m, o, () => k(m)), (_ || p || !C.current) && D(), m;
-  }), K = U((t, m) => {
-    c((g) => g.map((o) => o.id === t ? {
+    return g.type !== "loading" && o > 0 && $(p, o, () => I(p)), (w || m || !C.current) && D(), p;
+  }), K = j((t, p) => {
+    a((g) => g.map((o) => o.id === t ? {
       ...o,
-      ...m
+      ...p
     } : o));
-  }), O = U((t, m) => {
-    const g = De(m.loading), o = G({
+  }), O = j((t, p) => {
+    const g = De(p.loading), o = G({
       ...g,
       type: "loading"
     }), h = t.then((n) => {
-      const l = De(m.success, n);
+      const l = De(p.success, n);
       K(o, {
         ...l,
         type: "success"
       });
       const x = l.timeout ?? s;
-      return x > 0 && V(o, x, () => k(o)), (_ || p || !C.current) && D(), n;
+      return x > 0 && $(o, x, () => I(o)), (w || m || !C.current) && D(), n;
     }).catch((n) => {
-      const l = De(m.error, n);
+      const l = De(p.error, n);
       K(o, {
         ...l,
         type: "error"
       });
       const x = l.timeout ?? s;
-      return x > 0 && V(o, x, () => k(o)), (_ || p || !C.current) && D(), Promise.reject(n);
+      return x > 0 && $(o, x, () => I(o)), (w || m || !C.current) && D(), Promise.reject(n);
     });
-    return {}.hasOwnProperty.call(m, "setPromise") && m.setPromise(h), h;
+    return {}.hasOwnProperty.call(p, "setPromise") && p.setPromise(h), h;
   });
   e.useEffect(function() {
     return P ? P[" subscribe"](({
@@ -180,19 +180,19 @@ const Ie = function(d) {
       options: o
     }) => {
       const h = o.id;
-      g === "promise" && o.promise ? O(o.promise, o) : g === "update" && h ? K(h, o) : g === "close" && h ? k(h) : G(o);
+      g === "promise" && o.promise ? O(o.promise, o) : g === "update" && h ? K(h, o) : g === "close" && h ? I(h) : G(o);
     }) : void 0;
-  }, [G, K, V, s, P, O, k]);
+  }, [G, K, $, s, P, O, I]);
   const J = e.useMemo(() => ({
-    toasts: w,
-    setToasts: c,
-    hovering: _,
+    toasts: _,
+    setToasts: a,
+    hovering: w,
     setHovering: r,
-    focused: p,
+    focused: m,
     setFocused: y,
     expanded: S,
     add: G,
-    close: k,
+    close: I,
     remove: q,
     update: K,
     promise: O,
@@ -200,64 +200,64 @@ const Ie = function(d) {
     resumeTimers: F,
     prevFocusElement: u,
     setPrevFocusElement: R,
-    viewportRef: Y,
-    scheduleTimer: V,
+    viewportRef: z,
+    scheduleTimer: $,
     windowFocusedRef: C
-  }), [G, k, p, _, S, D, u, O, q, F, V, w, K]);
+  }), [G, I, m, w, S, D, u, O, q, F, $, _, K]);
   return /* @__PURE__ */ E(ut.Provider, {
     value: J,
     children: v
   });
 };
-process.env.NODE_ENV !== "production" && (Ie.displayName = "ToastProvider");
-const Le = /* @__PURE__ */ e.createContext(void 0);
-process.env.NODE_ENV !== "production" && (Le.displayName = "ToastViewportContext");
+process.env.NODE_ENV !== "production" && (Le.displayName = "ToastProvider");
+const He = /* @__PURE__ */ e.createContext(void 0);
+process.env.NODE_ENV !== "production" && (He.displayName = "ToastViewportContext");
 let xt = /* @__PURE__ */ (function(f) {
   return f.frontmostHeight = "--toast-frontmost-height", f;
 })({});
-const He = /* @__PURE__ */ e.forwardRef(function(d, v) {
+const ke = /* @__PURE__ */ e.forwardRef(function(d, v) {
   const {
     render: s,
-    className: z,
+    className: V,
     children: P,
-    ...w
+    ..._
   } = d, {
-    toasts: c,
-    pauseTimers: _,
+    toasts: a,
+    pauseTimers: w,
     resumeTimers: r,
-    setHovering: p,
+    setHovering: m,
     setFocused: y,
     viewportRef: u,
     windowFocusedRef: R,
     prevFocusElement: S,
     setPrevFocusElement: M,
-    expanded: Y,
+    expanded: z,
     focused: C
-  } = Re(), X = e.useRef(!1), j = e.useRef(!1), D = c.length, F = c[0]?.height ?? 0, k = e.useMemo(() => c.some((n) => n.transitionStatus === "ending"), [c]);
+  } = Re(), X = e.useRef(!1), W = e.useRef(!1), D = a.length, F = a[0]?.height ?? 0, I = e.useMemo(() => a.some((n) => n.transitionStatus === "ending"), [a]);
   e.useEffect(() => {
     if (!u.current)
       return;
     function n(x) {
       D !== 0 && x.key === "F6" && x.target !== u.current && (x.preventDefault(), M(de(ne(u.current))), u.current?.focus({
         preventScroll: !0
-      }), _(), y(!0));
+      }), w(), y(!0));
     }
     const l = Oe(u.current);
     return l.addEventListener("keydown", n), () => {
       l.removeEventListener("keydown", n);
     };
-  }, [_, y, M, D, u]), e.useEffect(() => {
+  }, [w, y, M, D, u]), e.useEffect(() => {
     if (!u.current || !D)
       return;
     const n = Oe(u.current);
     function l(T) {
-      T.target === n && (R.current = !1, _());
+      T.target === n && (R.current = !1, w());
     }
     function x(T) {
       if (T.relatedTarget || T.target === n)
         return;
-      const I = be(T), Z = de(ne(u.current));
-      (!se(u.current, I) || !Ee(Z)) && r(), setTimeout(() => {
+      const L = be(T), Z = de(ne(u.current));
+      (!se(u.current, L) || !Ee(Z)) && r(), setTimeout(() => {
         R.current = !0;
       });
     }
@@ -265,7 +265,7 @@ const He = /* @__PURE__ */ e.forwardRef(function(d, v) {
       n.removeEventListener("blur", l, !0), n.removeEventListener("focus", x, !0);
     };
   }, [
-    _,
+    w,
     r,
     u,
     R,
@@ -283,38 +283,38 @@ const He = /* @__PURE__ */ e.forwardRef(function(d, v) {
     function x(T) {
       if (T.pointerType !== "touch")
         return;
-      const I = be(T);
-      se(n, I) || (r(), p(!1), y(!1));
+      const L = be(T);
+      se(n, L) || (r(), m(!1), y(!1));
     }
     return l.addEventListener("pointerdown", x, !0), () => {
       l.removeEventListener("pointerdown", x, !0);
     };
-  }, [D, r, y, p, u]);
+  }, [D, r, y, m, u]);
   function q(n) {
-    u.current && (X.current = !0, n.relatedTarget === u.current ? c[0]?.ref?.current?.focus() : S?.focus({
+    u.current && (X.current = !0, n.relatedTarget === u.current ? a[0]?.ref?.current?.focus() : S?.focus({
       preventScroll: !0
     }));
   }
-  function V(n) {
+  function $(n) {
     n.key === "Tab" && n.shiftKey && n.target === u.current && (n.preventDefault(), S?.focus({
       preventScroll: !0
     }), r());
   }
   e.useEffect(() => {
-    !R.current || k || !j.current || (r(), p(!1), j.current = !1);
-  }, [k, r, p, R]);
+    !R.current || I || !W.current || (r(), m(!1), W.current = !1);
+  }, [I, r, m, R]);
   function G() {
-    _(), p(!0), j.current = !1;
+    w(), m(!0), W.current = !1;
   }
   function K() {
-    c.some((n) => n.transitionStatus === "ending") ? j.current = !0 : (r(), p(!1));
+    a.some((n) => n.transitionStatus === "ending") ? W.current = !0 : (r(), m(!1));
   }
   function O() {
     if (X.current) {
       X.current = !1;
       return;
     }
-    C || Ee(ne(u.current).activeElement) && (y(!0), _());
+    C || Ee(ne(u.current).activeElement) && (y(!0), w());
   }
   function J(n) {
     !C || se(u.current, n.relatedTarget) || (y(!1), r());
@@ -331,18 +331,18 @@ const He = /* @__PURE__ */ e.forwardRef(function(d, v) {
     onMouseLeave: K,
     onFocus: O,
     onBlur: J,
-    onKeyDown: V,
+    onKeyDown: $,
     onClick: O
-  }, m = e.useMemo(() => ({
-    expanded: Y
-  }), [Y]), g = ie("div", d, {
+  }, p = e.useMemo(() => ({
+    expanded: z
+  }), [z]), g = ie("div", d, {
     ref: [v, u],
-    state: m,
+    state: p,
     props: [t, {
       style: {
         [xt.frontmostHeight]: F ? `${F}px` : void 0
       }
-    }, w, {
+    }, _, {
       children: /* @__PURE__ */ re(e.Fragment, {
         children: [D > 0 && S && /* @__PURE__ */ E(Te, {
           onFocus: q
@@ -353,8 +353,8 @@ const He = /* @__PURE__ */ e.forwardRef(function(d, v) {
     }]
   }), o = e.useMemo(() => ({
     viewportRef: u
-  }), [u]), h = e.useMemo(() => c.filter((n) => n.priority === "high"), [c]);
-  return /* @__PURE__ */ re(Le.Provider, {
+  }), [u]), h = e.useMemo(() => a.filter((n) => n.priority === "high"), [a]);
+  return /* @__PURE__ */ re(He.Provider, {
     value: o,
     children: [D > 0 && S && /* @__PURE__ */ E(Te, {
       onFocus: q
@@ -372,10 +372,10 @@ const He = /* @__PURE__ */ e.forwardRef(function(d, v) {
     })]
   });
 });
-process.env.NODE_ENV !== "production" && (He.displayName = "ToastViewport");
+process.env.NODE_ENV !== "production" && (ke.displayName = "ToastViewport");
 const Me = /* @__PURE__ */ e.createContext(void 0);
 process.env.NODE_ENV !== "production" && (Me.displayName = "ToastRootContext");
-function me() {
+function pe() {
   const f = e.useContext(Me);
   if (!f)
     throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: ToastRootContext is missing. Toast parts must be used within <Toast.Root>." : ht(66));
@@ -408,57 +408,57 @@ function Fe(f, d, v) {
 }
 function bt(f) {
   const v = window.getComputedStyle(f).transform;
-  let s = 0, z = 0, P = 1;
+  let s = 0, V = 0, P = 1;
   if (v && v !== "none") {
-    const w = v.match(/matrix(?:3d)?\(([^)]+)\)/);
-    if (w) {
-      const c = w[1].split(", ").map(parseFloat);
-      c.length === 6 ? (s = c[4], z = c[5], P = Math.sqrt(c[0] * c[0] + c[1] * c[1])) : c.length === 16 && (s = c[12], z = c[13], P = c[0]);
+    const _ = v.match(/matrix(?:3d)?\(([^)]+)\)/);
+    if (_) {
+      const a = _[1].split(", ").map(parseFloat);
+      a.length === 6 ? (s = a[4], V = a[5], P = Math.sqrt(a[0] * a[0] + a[1] * a[1])) : a.length === 16 && (s = a[12], V = a[13], P = a[0]);
     }
   }
   return {
     x: s,
-    y: z,
+    y: V,
     scale: P
   };
 }
-const ze = /* @__PURE__ */ e.forwardRef(function(d, v) {
+const Ve = /* @__PURE__ */ e.forwardRef(function(d, v) {
   const {
     toast: s,
-    render: z,
+    render: V,
     className: P,
-    swipeDirection: w = ["down", "right"],
-    ...c
-  } = d, _ = s.positionerProps?.anchor !== void 0;
+    swipeDirection: _ = ["down", "right"],
+    ...a
+  } = d, w = s.positionerProps?.anchor !== void 0;
   let r = [];
-  _ || (r = Array.isArray(w) ? w : [w]);
-  const p = r.length > 0, {
+  w || (r = Array.isArray(_) ? _ : [_]);
+  const m = r.length > 0, {
     toasts: y,
     focused: u,
     close: R,
     remove: S,
     setToasts: M,
-    pauseTimers: Y,
+    pauseTimers: z,
     expanded: C,
     setHovering: X
-  } = Re(), [j, D] = e.useState(void 0), [F, k] = e.useState(!1), [q, V] = e.useState(!1), [G, K] = e.useState(!1), [O, J] = e.useState({
+  } = Re(), [W, D] = e.useState(void 0), [F, I] = e.useState(!1), [q, $] = e.useState(!1), [G, K] = e.useState(!1), [O, J] = e.useState({
     x: 0,
     y: 0
-  }), [t, m] = e.useState({
+  }), [t, p] = e.useState({
     x: 0,
     y: 0,
     scale: 1
-  }), [g, o] = e.useState(), [h, n] = e.useState(), [l, x] = e.useState(null), T = e.useRef(null), I = e.useRef({
+  }), [g, o] = e.useState(), [h, n] = e.useState(), [l, x] = e.useState(null), T = e.useRef(null), L = e.useRef({
     x: 0,
     y: 0
   }), Z = e.useRef({
     x: 0,
     y: 0,
     scale: 1
-  }), ae = e.useRef(void 0), pe = e.useRef(0), ce = e.useRef(!1), $ = e.useRef({
+  }), ce = e.useRef(void 0), me = e.useRef(0), ae = e.useRef(!1), A = e.useRef({
     x: 0,
     y: 0
-  }), he = e.useRef(!1), ge = e.useMemo(() => y.indexOf(s), [s, y]), ve = e.useMemo(() => y.filter((i) => i.transitionStatus !== "ending").indexOf(s), [s, y]), Be = e.useMemo(() => y.slice(0, y.indexOf(s)).reduce((i, a) => i + (a.height || 0), 0), [y, s]);
+  }), he = e.useRef(!1), ge = e.useMemo(() => y.indexOf(s), [s, y]), ve = e.useMemo(() => y.filter((i) => i.transitionStatus !== "ending").indexOf(s), [s, y]), Ye = e.useMemo(() => y.slice(0, y.indexOf(s)).reduce((i, c) => i + (c.height || 0), 0), [y, s]);
   gt({
     open: s.transitionStatus !== "ending",
     ref: T,
@@ -466,28 +466,28 @@ const ze = /* @__PURE__ */ e.forwardRef(function(d, v) {
       s.transitionStatus === "ending" && S(s.id);
     }
   });
-  const ue = U((i = !1) => {
-    const a = T.current;
-    if (!a)
+  const ue = j((i = !1) => {
+    const c = T.current;
+    if (!c)
       return;
-    const b = a.style.height;
-    a.style.height = "auto";
-    const N = a.offsetHeight;
-    a.style.height = b;
-    function A() {
-      M((L) => L.map((H) => H.id === s.id ? {
-        ...H,
+    const b = c.style.height;
+    c.style.height = "auto";
+    const N = c.offsetHeight;
+    c.style.height = b;
+    function B() {
+      M((H) => H.map((k) => k.id === s.id ? {
+        ...k,
         ref: T,
         height: N,
         transitionStatus: void 0
-      } : H));
+      } : k));
     }
-    i ? mt.flushSync(A) : A();
+    i ? pt.flushSync(B) : B();
   });
   Se(ue, [ue]);
-  function Ye(i, a) {
-    let b = i, N = a;
-    return !r.includes("left") && !r.includes("right") ? b = i > 0 ? i ** Q : -(Math.abs(i) ** Q) : (!r.includes("right") && i > 0 && (b = i ** Q), !r.includes("left") && i < 0 && (b = -(Math.abs(i) ** Q))), !r.includes("up") && !r.includes("down") ? N = a > 0 ? a ** Q : -(Math.abs(a) ** Q) : (!r.includes("down") && a > 0 && (N = a ** Q), !r.includes("up") && a < 0 && (N = -(Math.abs(a) ** Q))), {
+  function ze(i, c) {
+    let b = i, N = c;
+    return !r.includes("left") && !r.includes("right") ? b = i > 0 ? i ** Q : -(Math.abs(i) ** Q) : (!r.includes("right") && i > 0 && (b = i ** Q), !r.includes("left") && i < 0 && (b = -(Math.abs(i) ** Q))), !r.includes("up") && !r.includes("down") ? N = c > 0 ? c ** Q : -(Math.abs(c) ** Q) : (!r.includes("down") && c > 0 && (N = c ** Q), !r.includes("up") && c < 0 && (N = -(Math.abs(c) ** Q))), {
       x: b,
       y: N
     };
@@ -495,96 +495,96 @@ const ze = /* @__PURE__ */ e.forwardRef(function(d, v) {
   function Xe(i) {
     if (i.button !== 0)
       return;
-    i.pointerType === "touch" && Y();
-    const a = be(i.nativeEvent);
-    if (!(a && a.closest('button,a,input,textarea,[role="button"],[data-swipe-ignore]'))) {
-      if (ce.current = !1, ae.current = void 0, pe.current = 0, I.current = {
+    i.pointerType === "touch" && z();
+    const c = be(i.nativeEvent);
+    if (!(c && c.closest('button,a,input,textarea,[role="button"],[data-swipe-ignore]'))) {
+      if (ae.current = !1, ce.current = void 0, me.current = 0, L.current = {
         x: i.clientX,
         y: i.clientY
-      }, $.current = I.current, T.current) {
+      }, A.current = L.current, T.current) {
         const N = bt(T.current);
-        Z.current = N, m(N), J({
+        Z.current = N, p(N), J({
           x: N.x,
           y: N.y
         });
       }
-      X(!0), k(!0), V(!1), x(null), he.current = !0, T.current?.setPointerCapture(i.pointerId);
+      X(!0), I(!0), $(!1), x(null), he.current = !0, T.current?.setPointerCapture(i.pointerId);
     }
   }
   function Ge(i) {
     if (!F)
       return;
-    i.preventDefault(), he.current && (I.current = {
+    i.preventDefault(), he.current && (L.current = {
       x: i.clientX,
       y: i.clientY
     }, he.current = !1);
     const {
-      clientY: a,
+      clientY: c,
       clientX: b,
       movementX: N,
-      movementY: A
+      movementY: B
     } = i;
-    (A < 0 && a > $.current.y || A > 0 && a < $.current.y) && ($.current = {
-      x: $.current.x,
-      y: a
-    }), (N < 0 && b > $.current.x || N > 0 && b < $.current.x) && ($.current = {
+    (B < 0 && c > A.current.y || B > 0 && c < A.current.y) && (A.current = {
+      x: A.current.x,
+      y: c
+    }), (N < 0 && b > A.current.x || N > 0 && b < A.current.x) && (A.current = {
       x: b,
-      y: $.current.y
+      y: A.current.y
     });
-    const L = b - I.current.x, H = a - I.current.y, Qe = a - $.current.y, Ze = b - $.current.x;
-    if (!q && Math.sqrt(L * L + H * H) >= Et && (V(!0), l === null)) {
+    const H = b - L.current.x, k = c - L.current.y, Qe = c - A.current.y, Ze = b - A.current.x;
+    if (!q && Math.sqrt(H * H + k * k) >= Et && ($(!0), l === null)) {
       const fe = r.includes("left") || r.includes("right"), et = r.includes("up") || r.includes("down");
       if (fe && et) {
-        const tt = Math.abs(L), nt = Math.abs(H);
+        const tt = Math.abs(H), nt = Math.abs(k);
         x(tt > nt ? "horizontal" : "vertical");
       }
     }
-    let B;
-    if (!ae.current)
-      l === "vertical" ? H > 0 ? B = "down" : H < 0 && (B = "up") : l === "horizontal" ? L > 0 ? B = "right" : L < 0 && (B = "left") : Math.abs(L) >= Math.abs(H) ? B = L > 0 ? "right" : "left" : B = H > 0 ? "down" : "up", B && r.includes(B) && (ae.current = B, pe.current = Fe(B, L, H), D(B));
+    let Y;
+    if (!ce.current)
+      l === "vertical" ? k > 0 ? Y = "down" : k < 0 && (Y = "up") : l === "horizontal" ? H > 0 ? Y = "right" : H < 0 && (Y = "left") : Math.abs(H) >= Math.abs(k) ? Y = H > 0 ? "right" : "left" : Y = k > 0 ? "down" : "up", Y && r.includes(Y) && (ce.current = Y, me.current = Fe(Y, H, k), D(Y));
     else {
-      const ye = ae.current, fe = Fe(ye, Ze, Qe);
-      fe > oe ? (ce.current = !1, D(ye)) : !(r.includes("left") && r.includes("right")) && !(r.includes("up") && r.includes("down")) && pe.current - fe >= Dt && (ce.current = !0);
+      const ye = ce.current, fe = Fe(ye, Ze, Qe);
+      fe > oe ? (ae.current = !1, D(ye)) : !(r.includes("left") && r.includes("right")) && !(r.includes("up") && r.includes("down")) && me.current - fe >= Dt && (ae.current = !0);
     }
-    const le = Ye(L, H);
-    let _e = Z.current.x, we = Z.current.y;
-    l === "horizontal" ? (r.includes("left") || r.includes("right")) && (_e += le.x) : (l === "vertical" || (r.includes("left") || r.includes("right")) && (_e += le.x), (r.includes("up") || r.includes("down")) && (we += le.y)), J({
-      x: _e,
-      y: we
+    const le = ze(H, k);
+    let we = Z.current.x, _e = Z.current.y;
+    l === "horizontal" ? (r.includes("left") || r.includes("right")) && (we += le.x) : (l === "vertical" || (r.includes("left") || r.includes("right")) && (we += le.x), (r.includes("up") || r.includes("down")) && (_e += le.y)), J({
+      x: we,
+      y: _e
     });
   }
   function Ke(i) {
     if (!F)
       return;
-    if (k(!1), V(!1), x(null), T.current?.releasePointerCapture(i.pointerId), ce.current) {
+    if (I(!1), $(!1), x(null), T.current?.releasePointerCapture(i.pointerId), ae.current) {
       J({
         x: t.x,
         y: t.y
       }), D(void 0);
       return;
     }
-    let a = !1;
+    let c = !1;
     const b = O.x - t.x, N = O.y - t.y;
-    let A;
-    for (const L of r) {
-      switch (L) {
+    let B;
+    for (const H of r) {
+      switch (H) {
         case "right":
-          b > oe && (a = !0, A = "right");
+          b > oe && (c = !0, B = "right");
           break;
         case "left":
-          b < -oe && (a = !0, A = "left");
+          b < -oe && (c = !0, B = "left");
           break;
         case "down":
-          N > oe && (a = !0, A = "down");
+          N > oe && (c = !0, B = "down");
           break;
         case "up":
-          N < -oe && (a = !0, A = "up");
+          N < -oe && (c = !0, B = "up");
           break;
       }
-      if (a)
+      if (c)
         break;
     }
-    a ? (D(A), K(!0), R(s.id)) : (J({
+    c ? (D(B), K(!0), R(s.id)) : (J({
       x: t.x,
       y: t.y
     }), D(void 0));
@@ -597,34 +597,34 @@ const ze = /* @__PURE__ */ e.forwardRef(function(d, v) {
     }
   }
   e.useEffect(() => {
-    if (!p)
+    if (!m)
       return;
     const i = T.current;
     if (!i)
       return;
-    function a(b) {
+    function c(b) {
       se(i, b.target) && b.preventDefault();
     }
-    return i.addEventListener("touchmove", a, {
+    return i.addEventListener("touchmove", c, {
       passive: !1
     }), () => {
-      i.removeEventListener("touchmove", a);
+      i.removeEventListener("touchmove", c);
     };
-  }, [p]);
+  }, [m]);
   function je() {
     if (!F && O.x === t.x && O.y === t.y && !G)
       return {
         [ee.swipeMovementX]: "0px",
         [ee.swipeMovementY]: "0px"
       };
-    const i = O.x - t.x, a = O.y - t.y;
+    const i = O.x - t.x, c = O.y - t.y;
     return {
       transition: F ? "none" : void 0,
       // While swiping, freeze the element at its current visual transform so it doesn't snap to the
       // end position.
       transform: F ? `translateX(${O.x}px) translateY(${O.y}px) scale(${t.scale})` : void 0,
       [ee.swipeMovementX]: `${i}px`,
-      [ee.swipeMovementY]: `${a}px`
+      [ee.swipeMovementY]: `${c}px`
     };
   }
   const Ne = s.priority === "high", Ue = {
@@ -634,15 +634,15 @@ const ze = /* @__PURE__ */ e.forwardRef(function(d, v) {
     "aria-labelledby": g,
     "aria-describedby": h,
     "aria-hidden": Ne && !u ? !0 : void 0,
-    onPointerDown: p ? Xe : void 0,
-    onPointerMove: p ? Ge : void 0,
-    onPointerUp: p ? Ke : void 0,
+    onPointerDown: m ? Xe : void 0,
+    onPointerMove: m ? Ge : void 0,
+    onPointerUp: m ? Ke : void 0,
     onKeyDown: We,
-    inert: pt(s.limited),
+    inert: mt(s.limited),
     style: {
       ...je(),
       [ee.index]: s.transitionStatus === "ending" ? ge : ve,
-      [ee.offsetY]: `${Be}px`,
+      [ee.offsetY]: `${Ye}px`,
       [ee.height]: s.height ? `${s.height}px` : void 0
     }
   }, te = e.useMemo(() => ({
@@ -653,12 +653,12 @@ const ze = /* @__PURE__ */ e.forwardRef(function(d, v) {
     descriptionId: h,
     setDescriptionId: n,
     swiping: F,
-    swipeDirection: j,
+    swipeDirection: W,
     recalculateHeight: ue,
     index: ge,
     visibleIndex: ve,
     expanded: C
-  }), [s, g, h, F, j, ue, ge, ve, C]), qe = e.useMemo(() => ({
+  }), [s, g, h, F, W, ue, ge, ve, C]), qe = e.useMemo(() => ({
     transitionStatus: s.transitionStatus,
     expanded: C,
     limited: s.limited || !1,
@@ -669,29 +669,29 @@ const ze = /* @__PURE__ */ e.forwardRef(function(d, v) {
     ref: [v, te.rootRef],
     state: qe,
     stateAttributesMapping: Tt,
-    props: [Ue, c]
+    props: [Ue, a]
   });
   return /* @__PURE__ */ E(Me.Provider, {
     value: te,
     children: Je
   });
 });
-process.env.NODE_ENV !== "production" && (ze.displayName = "ToastRoot");
-const Ve = /* @__PURE__ */ e.forwardRef(function(d, v) {
+process.env.NODE_ENV !== "production" && (Ve.displayName = "ToastRoot");
+const $e = /* @__PURE__ */ e.forwardRef(function(d, v) {
   const {
     render: s,
-    className: z,
+    className: V,
     ...P
   } = d, {
-    visibleIndex: w,
-    expanded: c,
-    recalculateHeight: _
-  } = me(), r = e.useRef(null);
+    visibleIndex: _,
+    expanded: a,
+    recalculateHeight: w
+  } = pe(), r = e.useRef(null);
   Se(() => {
     const R = r.current;
-    if (!R || (_(), typeof ResizeObserver != "function" || typeof MutationObserver != "function"))
+    if (!R || (w(), typeof ResizeObserver != "function" || typeof MutationObserver != "function"))
       return;
-    const S = new ResizeObserver(() => _(!0)), M = new MutationObserver(() => _(!0));
+    const S = new ResizeObserver(() => w(!0)), M = new MutationObserver(() => w(!0));
     return S.observe(R), M.observe(R, {
       childList: !0,
       subtree: !0,
@@ -699,78 +699,78 @@ const Ve = /* @__PURE__ */ e.forwardRef(function(d, v) {
     }), () => {
       S.disconnect(), M.disconnect();
     };
-  }, [_]);
-  const p = w > 0, y = e.useMemo(() => ({
-    expanded: c,
-    behind: p
-  }), [c, p]);
+  }, [w]);
+  const m = _ > 0, y = e.useMemo(() => ({
+    expanded: a,
+    behind: m
+  }), [a, m]);
   return ie("div", d, {
     ref: [v, r],
     state: y,
     props: P
   });
 });
-process.env.NODE_ENV !== "production" && (Ve.displayName = "ToastContent");
-const $e = /* @__PURE__ */ e.forwardRef(function(d, v) {
+process.env.NODE_ENV !== "production" && ($e.displayName = "ToastContent");
+const Ae = /* @__PURE__ */ e.forwardRef(function(d, v) {
   const {
     render: s,
-    className: z,
+    className: V,
     id: P,
-    children: w,
-    ...c
+    children: _,
+    ...a
   } = d, {
-    toast: _
-  } = me(), r = w ?? _.description, p = !!r, y = _t(P), {
+    toast: w
+  } = pe(), r = _ ?? w.description, m = !!r, y = wt(P), {
     setDescriptionId: u
-  } = me();
+  } = pe();
   Se(() => {
-    if (p)
+    if (m)
       return u(y), () => {
         u(void 0);
       };
-  }, [p, y, u]);
+  }, [m, y, u]);
   const R = e.useMemo(() => ({
-    type: _.type
-  }), [_.type]), S = ie("p", d, {
+    type: w.type
+  }), [w.type]), S = ie("p", d, {
     ref: v,
     state: R,
     props: {
-      ...c,
+      ...a,
       id: y,
       children: r
     }
   });
-  return p ? S : null;
+  return m ? S : null;
 });
-process.env.NODE_ENV !== "production" && ($e.displayName = "ToastDescription");
-const Ae = /* @__PURE__ */ e.forwardRef(function(d, v) {
+process.env.NODE_ENV !== "production" && (Ae.displayName = "ToastDescription");
+const Be = /* @__PURE__ */ e.forwardRef(function(d, v) {
   const {
     render: s,
-    className: z,
+    className: V,
     disabled: P,
-    nativeButton: w = !0,
-    ...c
+    nativeButton: _ = !0,
+    ...a
   } = d, {
-    close: _,
+    close: w,
     expanded: r
   } = Re(), {
-    toast: p
-  } = me(), [y, u] = e.useState(!1), {
+    toast: m
+  } = pe(), [y, u] = e.useState(!1), {
     getButtonProps: R,
     buttonRef: S
-  } = wt({
+  } = _t({
     disabled: P,
-    native: w
+    native: _
   }), M = e.useMemo(() => ({
-    type: p.type
-  }), [p.type]);
+    type: m.type
+  }), [m.type]);
   return ie("button", d, {
     ref: [v, S],
     state: M,
     props: [{
       "aria-hidden": !r && !y,
       onClick() {
-        _(p.id);
+        w(m.id);
       },
       onFocus() {
         u(!0);
@@ -778,11 +778,11 @@ const Ae = /* @__PURE__ */ e.forwardRef(function(d, v) {
       onBlur() {
         u(!1);
       }
-    }, c, R]
+    }, a, R]
   });
 });
-process.env.NODE_ENV !== "production" && (Ae.displayName = "ToastClose");
-const Rt = ft, St = "_toast__viewport_km0zn_1", Mt = "_toast_km0zn_1", Nt = "_toast_variant_neutral_km0zn_109", Pt = "_toast_variant_colorway_km0zn_115", Ot = "_toast__content_km0zn_121", Ct = "_toast__header_km0zn_139", Ft = "_toast__row_km0zn_144", kt = "_toast__title_km0zn_151", It = "_toast__description_km0zn_155", Lt = "_toast__close_km0zn_159", W = {
+process.env.NODE_ENV !== "production" && (Be.displayName = "ToastClose");
+const Rt = ft, St = "_toast__viewport_1if9c_1", Mt = "_toast_1if9c_1", Nt = "_toast_variant_neutral_1if9c_109", Pt = "_toast_variant_colorway_1if9c_115", Ot = "_toast__content_1if9c_121", Ct = "_toast__header_1if9c_139", Ft = "_toast__row_1if9c_144", It = "_toast__title_1if9c_151", Lt = "_toast__description_1if9c_155", U = {
   toast__viewport: St,
   toast: Mt,
   toast_variant_neutral: Nt,
@@ -790,63 +790,61 @@ const Rt = ft, St = "_toast__viewport_km0zn_1", Mt = "_toast_km0zn_1", Nt = "_to
   toast__content: Ot,
   toast__header: Ct,
   toast__row: Ft,
-  toast__title: kt,
-  toast__description: It,
-  toast__close: Lt
-}, un = Ie, ke = {
+  toast__title: It,
+  toast__description: Lt
+}, an = Le, Ie = {
   info: "blue",
   error: "red",
   warning: "yellow",
   success: "green"
 };
-function ln() {
-  return /* @__PURE__ */ E(Rt, { children: /* @__PURE__ */ E(He, { className: W.toast__viewport, children: /* @__PURE__ */ E(Ht, {}) }) });
+function un() {
+  return /* @__PURE__ */ E(Rt, { children: /* @__PURE__ */ E(ke, { className: U.toast__viewport, children: /* @__PURE__ */ E(Ht, {}) }) });
 }
 function Ht() {
   return lt().toasts.map((d) => {
-    const v = d.type && d.type in ke ? ke[d.type] : void 0;
+    const v = d.type && d.type in Ie ? Ie[d.type] : void 0;
     return /* @__PURE__ */ E(
-      ze,
+      Ve,
       {
         toast: d,
         className: rt(
-          W.toast,
-          v ? W.toast_variant_colorway : W.toast_variant_neutral
+          U.toast,
+          v ? U.toast_variant_colorway : U.toast_variant_neutral
         ),
-        render: /* @__PURE__ */ E(at, { background: "default", color: v }),
+        render: /* @__PURE__ */ E(ct, { background: "default", color: v }),
         children: /* @__PURE__ */ re(
           xe,
           {
-            render: /* @__PURE__ */ E(Ve, {}),
-            className: W.toast__content,
+            render: /* @__PURE__ */ E($e, {}),
+            className: U.toast__content,
             children: [
-              /* @__PURE__ */ re(xe, { className: W.toast__row, children: [
-                /* @__PURE__ */ re(xe, { className: W.toast__header, children: [
+              /* @__PURE__ */ re(xe, { className: U.toast__row, children: [
+                /* @__PURE__ */ re(xe, { className: U.toast__header, children: [
                   d.title ? /* @__PURE__ */ E(
                     ot,
                     {
                       level: 2,
                       size: "lg",
                       color: "inherit",
-                      className: W.toast__title,
+                      className: U.toast__title,
                       children: d.title
                     }
                   ) : null,
                   /* @__PURE__ */ E(
-                    $e,
+                    Ae,
                     {
-                      render: /* @__PURE__ */ E(ct, { multiline: !0, color: v ? "inherit" : "dimmer" }),
-                      className: W.toast__description
+                      render: /* @__PURE__ */ E(at, { multiline: !0, color: v ? "inherit" : "dimmer" }),
+                      className: U.toast__description
                     }
                   )
                 ] }),
                 /* @__PURE__ */ E(
-                  Ae,
+                  Be,
                   {
                     render: /* @__PURE__ */ E(
                       it,
                       {
-                        className: d.title ? W.toast__close : void 0,
                         interactive: v ? `${v}_no-fill` : "no-fill",
                         icon: "close-line",
                         size: "sm",
@@ -873,6 +871,6 @@ function Ht() {
   });
 }
 export {
-  un as ToastProvider,
-  ln as ToastViewport
+  an as ToastProvider,
+  un as ToastViewport
 };

package/dist/components/view/index.js

@@ -51,28 +51,25 @@ import '../../index21.css';const g = "_view_colorway_ldhog_1", d = "_view_colorw
   return v({
     defaultTagName: "div",
     render: r,
-    props: y(
-      {
-        className: t(
-          n.view,
-          e && l[`view_colorway_color-${e}`],
-          _.interactive && [
-            c.view_interactive,
-            c[`view_interactive_${_.interactive}`]
-          ],
-          _.colorway && [
-            _.colorway[1].endsWith("static") ? l.view_colorway_static : l.view_colorway,
-            l[`view_colorway_${_.colorway[1]}`],
-            l[`view_colorway_color-${_.colorway[0]}`]
-          ],
-          _.loading && [
-            w.view_loading,
-            w[`view_loading_${_.loading}`]
-          ]
-        )
-      },
-      a
-    )
+    props: y(a, {
+      className: t(
+        n.view,
+        e && l[`view_colorway_color-${e}`],
+        _.interactive && [
+          c.view_interactive,
+          c[`view_interactive_${_.interactive}`]
+        ],
+        _.colorway && [
+          _.colorway[1].endsWith("static") ? l.view_colorway_static : l.view_colorway,
+          l[`view_colorway_${_.colorway[1]}`],
+          l[`view_colorway_color-${_.colorway[0]}`]
+        ],
+        _.loading && [
+          w.view_loading,
+          w[`view_loading_${_.loading}`]
+        ]
+      )
+    })
   });
 }, k = (o) => {
   let i = null, e = null;

package/dist/toast.css

@@ -1 +1 @@
-._toast__viewport_km0zn_1{position:fixed;z-index:1;margin:0 auto;inset:auto var(--space-8) var(--space-8) auto;width:var(--space-256)}@media(min-width:512px){._toast__viewport_km0zn_1{right:var(--space-16);bottom:var(--space-16)}}._toast_km0zn_1{--toast-custom-gap: var(--space-12);--toast-custom-peek: var(--space-12);--toast-custom-scale: max(0, 1 - (var(--toast-index) * .1)) ;--toast-custom-shrink: calc(1 - var(--toast-custom-scale));--toast-custom-height: var(--toast-frontmost-height, var(--toast-height));--toast-custom-offset-y: calc( var(--toast-offset-y) * -1 + (var(--toast-index) * var(--toast-custom-gap) * -1) + var(--toast-swipe-movement-y) );display:flex;position:absolute;right:0;bottom:0;left:auto;flex-direction:row;align-items:center;gap:var(--space-8);transform:translate(var(--toast-swipe-movement-x)) translateY(calc(var(--toast-swipe-movement-y) - (var(--toast-index) * var(--toast-custom-peek)) - (var(--toast-custom-shrink) * var(--toast-custom-height)))) scale(var(--toast-custom-scale));transform-origin:bottom center;z-index:calc(1000 - var(--toast-index));transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .6s,height var(--transition-duration-snappy);cursor:default;box-sizing:border-box;margin:0 0 0 auto;border-width:1px;border-style:solid;border-radius:var(--border-radius-default);background-clip:padding-box;width:100%;height:var(--toast-custom-height);-webkit-user-select:none;-moz-user-select:none;user-select:none}._toast_km0zn_1[data-expanded]{transform:translate(var(--toast-swipe-movement-x)) translateY(var(--toast-custom-offset-y));height:var(--toast-height)}._toast_km0zn_1[data-starting-style],._toast_km0zn_1[data-ending-style]{transform:translateY(150%)}._toast_km0zn_1[data-limited],._toast_km0zn_1[data-ending-style]{opacity:0}._toast_km0zn_1[data-ending-style][data-swipe-direction=up]{transform:translateY(calc(var(--toast-swipe-movement-y) - 50%))}._toast_km0zn_1[data-ending-style][data-swipe-direction=left]{transform:translate(calc(var(--toast-swipe-movement-x) - 50%)) translateY(var(--toast-custom-offset-y))}._toast_km0zn_1[data-ending-style][data-swipe-direction=right]{transform:translate(calc(var(--toast-swipe-movement-x) + 50%)) translateY(var(--toast-custom-offset-y))}._toast_km0zn_1[data-ending-style][data-swipe-direction=down]{transform:translateY(calc(var(--toast-swipe-movement-y) + 50%))}._toast_km0zn_1:after{display:block;position:absolute;top:100%;left:0;width:100%;height:calc(var(--toast-custom-gap) + 1px);content:""}._toast_variant_neutral_km0zn_109{border-color:var(--surface-interactive-border);background:var(--surface-background);color:var(--foreground-default)}._toast_variant_colorway_km0zn_115{border-color:var(--view-colorway-dimmer);background:var(--view-colorway-dimmest);color:var(--view-colorway-strongest)}._toast__content_km0zn_121{flex-grow:1;flex-shrink:1;gap:var(--space-16);transition:opacity var(--transition-duration-snappy) var(--transition-timing-function-snappy);padding:var(--space-12);overflow:hidden}._toast__content_km0zn_121[data-behind]{opacity:0}._toast__content_km0zn_121[data-expanded]{opacity:1}._toast__header_km0zn_139{flex:1 1 auto;gap:var(--space-4)}._toast__row_km0zn_144{flex:1 1 auto;flex-direction:row;justify-content:space-between;gap:var(--space-4)}._toast__title_km0zn_151,._toast__description_km0zn_155{flex:1 1 auto}._toast__close_km0zn_159{position:absolute;top:0;right:0}
+._toast__viewport_1if9c_1{position:fixed;z-index:1;margin:0 auto;inset:auto var(--space-8) var(--space-8) auto;width:var(--space-256)}@media(min-width:512px){._toast__viewport_1if9c_1{right:var(--space-16);bottom:var(--space-16)}}._toast_1if9c_1{--toast-custom-gap: var(--space-12);--toast-custom-peek: var(--space-12);--toast-custom-scale: max(0, 1 - (var(--toast-index) * .1)) ;--toast-custom-shrink: calc(1 - var(--toast-custom-scale));--toast-custom-height: var(--toast-frontmost-height, var(--toast-height));--toast-custom-offset-y: calc( var(--toast-offset-y) * -1 + (var(--toast-index) * var(--toast-custom-gap) * -1) + var(--toast-swipe-movement-y) );display:flex;position:absolute;right:0;bottom:0;left:auto;flex-direction:row;align-items:center;gap:var(--space-8);transform:translate(var(--toast-swipe-movement-x)) translateY(calc(var(--toast-swipe-movement-y) - (var(--toast-index) * var(--toast-custom-peek)) - (var(--toast-custom-shrink) * var(--toast-custom-height)))) scale(var(--toast-custom-scale));transform-origin:bottom center;z-index:calc(1000 - var(--toast-index));transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .6s,height var(--transition-duration-snappy);cursor:default;box-sizing:border-box;margin:0 0 0 auto;border-width:1px;border-style:solid;border-radius:var(--border-radius-default);background-clip:padding-box;width:100%;height:var(--toast-custom-height);-webkit-user-select:none;-moz-user-select:none;user-select:none}._toast_1if9c_1[data-expanded]{transform:translate(var(--toast-swipe-movement-x)) translateY(var(--toast-custom-offset-y));height:var(--toast-height)}._toast_1if9c_1[data-starting-style],._toast_1if9c_1[data-ending-style]{transform:translateY(150%)}._toast_1if9c_1[data-limited],._toast_1if9c_1[data-ending-style]{opacity:0}._toast_1if9c_1[data-ending-style][data-swipe-direction=up]{transform:translateY(calc(var(--toast-swipe-movement-y) - 50%))}._toast_1if9c_1[data-ending-style][data-swipe-direction=left]{transform:translate(calc(var(--toast-swipe-movement-x) - 50%)) translateY(var(--toast-custom-offset-y))}._toast_1if9c_1[data-ending-style][data-swipe-direction=right]{transform:translate(calc(var(--toast-swipe-movement-x) + 50%)) translateY(var(--toast-custom-offset-y))}._toast_1if9c_1[data-ending-style][data-swipe-direction=down]{transform:translateY(calc(var(--toast-swipe-movement-y) + 50%))}._toast_1if9c_1:after{display:block;position:absolute;top:100%;left:0;width:100%;height:calc(var(--toast-custom-gap) + 1px);content:""}._toast_variant_neutral_1if9c_109{border-color:var(--surface-interactive-border);background:var(--surface-background);color:var(--foreground-default)}._toast_variant_colorway_1if9c_115{border-color:var(--view-colorway-dimmer);background:var(--view-colorway-dimmest);color:var(--view-colorway-strongest)}._toast__content_1if9c_121{flex-grow:1;flex-shrink:1;gap:var(--space-16);transition:opacity var(--transition-duration-snappy) var(--transition-timing-function-snappy);padding:var(--space-12);overflow:hidden}._toast__content_1if9c_121[data-behind]{opacity:0}._toast__content_1if9c_121[data-expanded]{opacity:1}._toast__header_1if9c_139{flex:1 1 auto;gap:var(--space-4)}._toast__row_1if9c_144{flex:1 1 auto;flex-direction:row;justify-content:space-between;gap:var(--space-4)}._toast__title_1if9c_151,._toast__description_1if9c_155{flex:1 1 auto}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koide-labs/ui",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "type": "module",
   "main": "./dist/index.js",
   "exports": {