@koide-labs/ui 0.1.7 → 0.1.8

package/dist/components/accordion/accordion.js

@@ -1,9 +1,9 @@
 import { jsx as k, jsxs as ne } from "react/jsx-runtime";
 import { c as Ce } from "../../clsx-OuTLNxxd.js";
 import { textify as te } from "../../-utils.js";
-import { Surface as Ne } from "../surface/surface.js";
+import { Icon as Ne } from "../icon/icon.js";
+import { Surface as Oe } from "../surface/surface.js";
 import { View as oe } from "../view/view.js";
-import { Icon as Oe } from "../icon/icon.js";
 import * as r from "react";
 import { u as ae } from "../../useControlled-Du4sJyMj.js";
 import { u as L } from "../../useStableCallback-DKZHlUAT.js";
@@ -661,7 +661,7 @@ function en({
 }) {
   return /* @__PURE__ */ ne(ge, { className: U.accordion, ...I, children: [
     /* @__PURE__ */ k(be, { className: U.accordion__header, children: /* @__PURE__ */ k(
-      Ne,
+      Oe,
       {
         elevated: !0,
         render: /* @__PURE__ */ ne(
@@ -677,7 +677,7 @@ function en({
             children: [
               te(n),
               /* @__PURE__ */ k(
-                Oe,
+                Ne,
                 {
                   name: "close-line",
                   className: U["accordion__trigger-icon"]

package/dist/components/alert-dialog/alert-dialog.js

@@ -1,11 +1,11 @@
 import { jsx as o, jsxs as u } from "react/jsx-runtime";
 import { c as _ } from "../../clsx-OuTLNxxd.js";
-import { t as h } from "../../transitions.module-SSNmQfsR.js";
-import { u as v, D as y, a as I, b as T, c as b, d as O, e as N, s as n, f as S, g as k, h as w, i as A } from "../../dialog.module-CRiRBcbM.js";
-import { Surface as B } from "../surface/surface.js";
+import { Button as v } from "../button/button.js";
+import { Surface as y } from "../surface/surface.js";
+import { Text as h } from "../text/text.js";
 import { View as C } from "../view/view.js";
-import { Text as D } from "../text/text.js";
-import { Button as j } from "../button/button.js";
+import { t as D } from "../../transitions.module-SSNmQfsR.js";
+import { u as I, D as T, a as b, b as O, c as N, d as S, e as k, s as n, f as w, g as A, h as B, i as j } from "../../dialog.module-CRiRBcbM.js";
 import * as V from "react";
 import { a as $ } from "../../useRenderElement-DngNDu_P.js";
 import '../../alert-dialog.css';function z(t) {
@@ -19,7 +19,7 @@ import '../../alert-dialog.css';function z(t) {
     handle: f,
     triggerId: l,
     defaultTriggerId: c = null
-  } = t, d = v(), g = !!d, e = $(() => f?.store ?? new y({
+  } = t, d = I(), g = !!d, e = $(() => f?.store ?? new T({
     open: i ?? a,
     activeTriggerId: l !== void 0 ? l : c,
     modal: !0,
@@ -29,7 +29,7 @@ import '../../alert-dialog.css';function z(t) {
   })).current;
   e.useControlledProp("open", i, a), e.useControlledProp("activeTriggerId", l, c), e.useSyncedValue("nested", g), e.useContextCallback("onOpenChange", s), e.useContextCallback("onOpenChangeComplete", p);
   const P = e.useState("payload");
-  I({
+  b({
     store: e,
     actionsRef: m,
     parentContext: d?.store.context
@@ -37,7 +37,7 @@ import '../../alert-dialog.css';function z(t) {
   const R = V.useMemo(() => ({
     store: e
   }), [e]);
-  return /* @__PURE__ */ o(T.Provider, {
+  return /* @__PURE__ */ o(O.Provider, {
     value: R,
     children: typeof r == "function" ? r({
       payload: P
@@ -60,27 +60,27 @@ function W({
   ...c
 }) {
   return a.length < 2 && console.error("You must have at least two actions."), /* @__PURE__ */ u(z, { ...c, children: [
-    s ? /* @__PURE__ */ o(b, { render: s }) : null,
-    /* @__PURE__ */ u(O, { children: [
+    s ? /* @__PURE__ */ o(N, { render: s }) : null,
+    /* @__PURE__ */ u(S, { children: [
       /* @__PURE__ */ o(
-        N,
+        k,
         {
           className: _(
             n.dialog__backdrop,
-            h.transition_opacity
+            D.transition_opacity
           )
         }
       ),
       /* @__PURE__ */ o(
-        S,
+        w,
         {
           className: _(
             n.dialog__popup,
             f && n.dialog__popup_centered,
-            h.transition_scale
+            D.transition_scale
           ),
           children: /* @__PURE__ */ u(
-            B,
+            y,
             {
               background: m,
               className: _(
@@ -90,13 +90,13 @@ function W({
               ),
               children: [
                 t || r ? /* @__PURE__ */ u(C, { className: n.dialog__header, children: [
-                  t ? /* @__PURE__ */ o(D, { render: /* @__PURE__ */ o(k, {}), size: "2xl", children: t }) : null,
+                  t ? /* @__PURE__ */ o(h, { render: /* @__PURE__ */ o(A, {}), size: "2xl", children: t }) : null,
                   r ? /* @__PURE__ */ o(
-                    D,
+                    h,
                     {
                       multiline: !0,
                       color: "dimmer",
-                      render: /* @__PURE__ */ o(w, {}),
+                      render: /* @__PURE__ */ o(B, {}),
                       children: r
                     }
                   ) : null
@@ -119,7 +119,7 @@ function W({
   ] });
 }
 function x(t) {
-  return /* @__PURE__ */ o(A, { render: /* @__PURE__ */ o(j, { ...t }) });
+  return /* @__PURE__ */ o(j, { render: /* @__PURE__ */ o(v, { ...t }) });
 }
 function Y(t, r) {
   return r ? {

package/dist/components/badge/badge.js

@@ -1,9 +1,9 @@
 import { jsx as e, jsxs as p, Fragment as g } from "react/jsx-runtime";
 import { c as f } from "../../clsx-OuTLNxxd.js";
-import { T as _ } from "../../tooltip-JPnUwFFR.js";
+import { Icon as _ } from "../icon/icon.js";
 import { Text as b } from "../text/text.js";
-import { View as h } from "../view/view.js";
-import { Icon as u } from "../icon/icon.js";
+import { T as h } from "../../tooltip-CpyPanwd.js";
+import { View as u } from "../view/view.js";
 import { u as y } from "../../useRender-C3vlzS3t.js";
 import { m as x } from "../../useRenderElement-DngNDu_P.js";
 import '../../badge.css';const T = "_badge_1m3yi_3", j = "_badge_shiny_1m3yi_18", s = {
@@ -30,12 +30,12 @@ function V({
         d
       ),
       children: /* @__PURE__ */ p(g, { children: [
-        r ? /* @__PURE__ */ e(u, { name: r }) : null,
+        r ? /* @__PURE__ */ e(_, { name: r }) : null,
         i
       ] })
     })
-  }), o = /* @__PURE__ */ e(h, { color: t, children: c });
-  return m ? /* @__PURE__ */ e(_, { trigger: o, children: /* @__PURE__ */ e(b, { size: "sm", multiline: !0, children: m }) }) : o;
+  }), o = /* @__PURE__ */ e(u, { color: t, children: c });
+  return m ? /* @__PURE__ */ e(h, { trigger: o, children: /* @__PURE__ */ e(b, { size: "sm", multiline: !0, children: m }) }) : o;
 }
 export {
   V as Badge

package/dist/components/button/button.js

@@ -1,8 +1,8 @@
 import { jsxs as l, jsx as _ } from "react/jsx-runtime";
 import { c as g } from "../../clsx-OuTLNxxd.js";
 import { textify as m } from "../../-utils.js";
-import { View as r } from "../view/view.js";
 import { Icon as e } from "../icon/icon.js";
+import { View as r } from "../view/view.js";
 import { B as s } from "../../Button-BmcVHRRW.js";
 import '../../button.css';const c = "_button_17tw0_3", x = "_button_height_sm_17tw0_16", a = "_button_height_md_17tw0_21", d = "_button_height_lg_17tw0_26", f = "_button_height_xl_17tw0_31", w = "_button_height_2xl_17tw0_36", p = "_button_height_3xl_17tw0_41", i = {
   button: c,

package/dist/components/checkbox/checkbox.js

@@ -1,7 +1,7 @@
 import { jsxs as A, jsx as m } from "react/jsx-runtime";
-import { View as we } from "../view/view.js";
-import { Icon as Fe } from "../icon/icon.js";
-import { Text as Te } from "../text/text.js";
+import { Icon as we } from "../icon/icon.js";
+import { Text as Fe } from "../text/text.js";
+import { View as Te } from "../view/view.js";
 import * as r from "react";
 import { f as ee } from "../../formatErrorMessage-BqPuTBN-.js";
 import { N as je, d as qe, m as Ue, E as De, u as te } from "../../useRenderElement-DngNDu_P.js";
@@ -250,18 +250,18 @@ const it = "_checkbox__label_1o5lj_3", st = "_checkbox_1o5lj_3", ct = "_checkbox
 };
 function yt({ color: e, label: n, ...k }) {
   const x = /* @__PURE__ */ m(
-    we,
+    Te,
     {
       color: e,
       interactive: "fill-outline",
       render: /* @__PURE__ */ m(ae, { "aria-label": n, ...k }),
       className: j.checkbox,
-      children: /* @__PURE__ */ m(ie, { className: j.checkbox__indicator, children: /* @__PURE__ */ m(Fe, { name: "check-line", size: "sm" }) })
+      children: /* @__PURE__ */ m(ie, { className: j.checkbox__indicator, children: /* @__PURE__ */ m(we, { name: "check-line", size: "sm" }) })
     }
   );
   return n ? /* @__PURE__ */ A("label", { className: j.checkbox__label, children: [
     x,
-    /* @__PURE__ */ m(Te, { children: n })
+    /* @__PURE__ */ m(Fe, { children: n })
   ] }) : x;
 }
 export {

package/dist/components/code/code.js

@@ -1,9 +1,9 @@
 import { jsxs as re, jsx as P } from "react/jsx-runtime";
 import { c as J } from "../../clsx-OuTLNxxd.js";
 import { useMemo as ie } from "react";
-import { View as se } from "../view/view.js";
 import { Surface as V } from "../surface/surface.js";
-import { Text as ue } from "../text/text.js";
+import { Text as se } from "../text/text.js";
+import { View as ue } from "../view/view.js";
 import '../../code.css';var K = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
 function le(b) {
   return b && b.__esModule && Object.prototype.hasOwnProperty.call(b, "default") ? b.default : b;
@@ -1181,8 +1181,8 @@ function we({
     ),
     [j, b]
   );
-  return /* @__PURE__ */ re(se, { className: J(L.code__root, g), children: [
-    i ? /* @__PURE__ */ P(V, { elevated: !0, className: L.code__title, children: /* @__PURE__ */ P(ue, { size: "sm", color: "dimmer", children: i }) }) : null,
+  return /* @__PURE__ */ re(ue, { className: J(L.code__root, g), children: [
+    i ? /* @__PURE__ */ P(V, { elevated: !0, className: L.code__title, children: /* @__PURE__ */ P(se, { size: "sm", color: "dimmer", children: i }) }) : null,
     /* @__PURE__ */ P(
       V,
       {

package/dist/components/command/command.js

@@ -7,10 +7,10 @@ import en from "react-dom";
 import { c as We } from "../../clsx-OuTLNxxd.js";
 import { textify as tn } from "../../-utils.js";
 import { Dialog as nn } from "../dialog/dialog.js";
-import { View as ye } from "../view/view.js";
 import { Icon as vt } from "../icon/icon.js";
-import { Text as pt } from "../text/text.js";
 import { S as rn } from "../../separator-Or-BDQYZ.js";
+import { Text as pt } from "../text/text.js";
+import { View as ye } from "../view/view.js";
 import '../../command.css';var Je = 1, on = 0.9, an = 0.8, cn = 0.17, Ne = 0.1, Oe = 0.999, un = 0.9999, sn = 0.99, ln = /[\\\/_+.#"@\[\(\{&]/, dn = /[\\\/_+.#"@\[\(\{&]/g, fn = /[\s-]/, ht = /[\s-]/g;
 function Be(e, t, n, r, o, i, u) {
   if (i === t.length) return o === e.length ? Je : sn;

package/dist/components/context-menu/context-menu.js

@@ -4,12 +4,12 @@ import * as t from "react";
 import { createContext as Wt, useContext as Xt } from "react";
 import { textify as Ce } from "../../-utils.js";
 import { tokens as st } from "../../styles/tokens.js";
-import { p as it, k as jt, R as $t, P as qt, c as U, m as zt, j as Jt, u as Qt, d as Zt, e as at, h as en, f as tn, i as nn, t as ut } from "../../transitions.module-SSNmQfsR.js";
-import { Surface as ct } from "../surface/surface.js";
-import { View as Re } from "../view/view.js";
 import { Icon as ce } from "../icon/icon.js";
-import { Text as lt } from "../text/text.js";
-import { S as on, a as rn } from "../../separator-Or-BDQYZ.js";
+import { S as jt, a as $t } from "../../separator-Or-BDQYZ.js";
+import { Surface as it } from "../surface/surface.js";
+import { Text as at } from "../text/text.js";
+import { View as Re } from "../view/view.js";
+import { p as ut, k as qt, R as zt, P as Jt, c as U, m as Qt, j as Zt, u as en, d as tn, e as ct, h as nn, f as on, i as rn, t as lt } from "../../transitions.module-SSNmQfsR.js";
 import { u as dt } from "../../useControlled-Du4sJyMj.js";
 import { u as le } from "../../useStableCallback-DKZHlUAT.js";
 import { f as J } from "../../formatErrorMessage-BqPuTBN-.js";
@@ -326,7 +326,7 @@ const Rt = /* @__PURE__ */ t.forwardRef(function(o, i) {
 });
 process.env.NODE_ENV !== "production" && (Rt.displayName = "MenuItem");
 const Zn = {
-  ...it,
+  ...ut,
   ...mt
 }, Ae = /* @__PURE__ */ t.forwardRef(function(o, i) {
   const {
@@ -522,7 +522,7 @@ const Fe = /* @__PURE__ */ t.forwardRef(function(o, i) {
     nodeId: T.context.nodeId
   }), [T.side, T.align, T.arrowRef, T.arrowUncentered, T.arrowStyles, T.context.nodeId]), se = Y("div", o, {
     state: $,
-    stateAttributesMapping: it,
+    stateAttributesMapping: ut,
     ref: [i, s.useStateSetter("positionerElement")],
     props: [te, u]
   }), ie = D && n.type !== "menu" && (n.type !== "menubar" && G && x !== xe || n.type === "menubar" && n.context.modal);
@@ -533,7 +533,7 @@ const Fe = /* @__PURE__ */ t.forwardRef(function(o, i) {
       ref: n.type === "context-menu" || n.type === "nested-context-menu" ? n.context.internalBackdropRef : null,
       inert: Bn(!p),
       cutout: Z
-    }), /* @__PURE__ */ c(jt, {
+    }), /* @__PURE__ */ c(qt, {
       id: m,
       children: /* @__PURE__ */ c(Kn, {
         elementsRef: s.context.itemDomElements,
@@ -719,7 +719,7 @@ const ro = {
       return e.parent.store.select("keyboardEventRelay");
   })
 };
-class He extends $t {
+class He extends zt {
   constructor(o) {
     super({
       ...so(),
@@ -742,7 +742,7 @@ class He extends $t {
       triggerFocusTargetRef: /* @__PURE__ */ t.createRef(),
       beforeContentFocusGuardRef: /* @__PURE__ */ t.createRef(),
       onOpenChangeComplete: void 0,
-      triggerElements: new qt()
+      triggerElements: new Jt()
     }, ro), this.observe(U((i) => i.allowMouseEnter), (i, C) => {
       this.state.parent.type === "menu" && i !== C && this.state.parent.store.set("allowMouseEnter", i);
     }), this.unsubscribeParentListener = this.observe("parent", (i) => {
@@ -781,7 +781,7 @@ function so() {
     hoverEnabled: !0,
     instantType: void 0,
     openChangeReason: null,
-    floatingTreeRoot: new zt(),
+    floatingTreeRoot: new Qt(),
     floatingNodeId: void 0,
     floatingParentNodeId: null,
     itemProps: un,
@@ -824,7 +824,7 @@ function Nt(e) {
     type: void 0
   }, [h, u, s, _]), n = He.useStore(I?.store, {
     parent: O
-  }), A = n.useState("floatingTreeRoot"), y = Jt(A), D = Qt();
+  }), A = n.useState("floatingTreeRoot"), y = Zt(A), D = en();
   Te(() => {
     h && !u ? n.update({
       parent: {
@@ -937,7 +937,7 @@ function Nt(e) {
       X?.off("setOpen", M);
     };
   }, [X, V]);
-  const kt = Zt(re, {
+  const kt = tn(re, {
     enabled: !N,
     bubbles: b && v.type === "menu",
     outsidePress() {
@@ -977,7 +977,7 @@ function Nt(e) {
     getFloatingProps: Xe,
     getItemProps: je,
     getTriggerProps: $e
-  } = at([kt, _t, Vt, Ut]), Lt = t.useMemo(() => {
+  } = ct([kt, _t, Vt, Ut]), Lt = t.useMemo(() => {
     const M = Se(We(), {
       onMouseEnter() {
         n.set("hoverEnabled", !0);
@@ -1024,7 +1024,7 @@ function Nt(e) {
       payload: Q
     }) : o
   });
-  return v.type === void 0 || v.type === "context-menu" ? /* @__PURE__ */ c(en, {
+  return v.type === void 0 || v.type === "context-menu" ? /* @__PURE__ */ c(nn, {
     externalTree: A,
     children: ze
   }) : ze;
@@ -1108,7 +1108,7 @@ const St = /* @__PURE__ */ t.forwardRef(function(o, i) {
     toggle: !a,
     ignoreMouse: a,
     stickIfOpen: !1
-  }), W = at([K]), X = l.useState("triggerProps", !0);
+  }), W = ct([K]), X = l.useState("triggerProps", !0);
   delete X.id;
   const T = t.useMemo(() => ({
     disabled: N,
@@ -1117,7 +1117,7 @@ const St = /* @__PURE__ */ t.forwardRef(function(o, i) {
   }), [N, w, u]);
   return Y("div", o, {
     state: T,
-    stateAttributesMapping: tn,
+    stateAttributesMapping: on,
     props: [W.getReferenceProps(), ne, X, G, {
       tabIndex: u || w ? 0 : -1,
       onBlur() {
@@ -1252,7 +1252,7 @@ const rt = 500, Tt = /* @__PURE__ */ t.forwardRef(function(o, i) {
         WebkitTouchCallout: "none"
       }
     }, d],
-    stateAttributesMapping: nn
+    stateAttributesMapping: rn
   });
 });
 process.env.NODE_ENV !== "production" && (Tt.displayName = "ContextMenuTrigger");
@@ -1276,10 +1276,10 @@ function uo({
     /* @__PURE__ */ c(Le, { children: /* @__PURE__ */ c(Fe, { children: /* @__PURE__ */ c(
       Ae,
       {
-        render: /* @__PURE__ */ c(ct, { background: o }),
+        render: /* @__PURE__ */ c(it, { background: o }),
         className: de(
           H["context-menu"],
-          ut["transition_fade-out"],
+          lt["transition_fade-out"],
           i
         ),
         style: E,
@@ -1305,7 +1305,7 @@ function co({
         e ? /* @__PURE__ */ c(ce, { name: e, className: H["context-menu__item-icon"] }) : null,
         Ce(C),
         o ? /* @__PURE__ */ c(
-          lt,
+          at,
           {
             className: H["context-menu__item-shortcut"],
             color: "dimmest",
@@ -1318,7 +1318,7 @@ function co({
   );
 }
 function lo(e) {
-  return /* @__PURE__ */ c(on, { render: /* @__PURE__ */ c(rn, {}), ...e });
+  return /* @__PURE__ */ c(jt, { render: /* @__PURE__ */ c($t, {}), ...e });
 }
 function po({
   label: e,
@@ -1327,7 +1327,7 @@ function po({
 }) {
   return /* @__PURE__ */ ee(Mt, { ...i, children: [
     e ? /* @__PURE__ */ c(
-      lt,
+      at,
       {
         render: /* @__PURE__ */ c(Ct, {}),
         className: H["context-menu__label"],
@@ -1419,10 +1419,10 @@ function ho({
     /* @__PURE__ */ c(Le, { children: /* @__PURE__ */ c(Fe, { alignOffset: -4, sideOffset: -4, children: /* @__PURE__ */ c(
       Ae,
       {
-        render: /* @__PURE__ */ c(ct, { background: R }),
+        render: /* @__PURE__ */ c(it, { background: R }),
         className: de(
           H["context-menu"],
-          ut.transition_scale,
+          lt.transition_scale,
           C
         ),
         style: E,

package/dist/components/dialog/dialog.js

@@ -1,12 +1,12 @@
 import { jsx as e, jsxs as c } from "react/jsx-runtime";
 import { c as f } from "../../clsx-OuTLNxxd.js";
-import { t as h } from "../../transitions.module-SSNmQfsR.js";
-import { u as y, D as T, a as b, b as O, c as k, d as v, e as N, s as n, f as S, g as w, h as B, i as P } from "../../dialog.module-CRiRBcbM.js";
-import { Surface as j } from "../surface/surface.js";
-import { View as V } from "../view/view.js";
-import { Text as x } from "../text/text.js";
-import { IconButton as $ } from "../icon-button/icon-button.js";
-import { Button as z } from "../button/button.js";
+import { Button as y } from "../button/button.js";
+import { IconButton as T } from "../icon-button/icon-button.js";
+import { Surface as b } from "../surface/surface.js";
+import { Text as h } from "../text/text.js";
+import { View as O } from "../view/view.js";
+import { t as x } from "../../transitions.module-SSNmQfsR.js";
+import { u as k, D as v, a as N, b as S, c as w, d as B, e as j, s as n, f as V, g as $, h as z, i as P } from "../../dialog.module-CRiRBcbM.js";
 import * as M from "react";
 import { a as W } from "../../useRenderElement-DngNDu_P.js";
 function q(t) {
@@ -22,7 +22,7 @@ function q(t) {
     handle: g,
     triggerId: m,
     defaultTriggerId: C = null
-  } = t, D = y(!0), _ = !!D, o = W(() => g?.store ?? new T({
+  } = t, D = k(!0), _ = !!D, o = W(() => g?.store ?? new v({
     open: r ?? l,
     activeTriggerId: m !== void 0 ? m : C,
     modal: s,
@@ -35,7 +35,7 @@ function q(t) {
     modal: s
   }), o.useContextCallback("onOpenChange", d), o.useContextCallback("onOpenChangeComplete", u);
   const R = o.useState("payload");
-  b({
+  N({
     store: o,
     actionsRef: p,
     parentContext: D?.store.context
@@ -43,7 +43,7 @@ function q(t) {
   const I = M.useMemo(() => ({
     store: o
   }), [o]);
-  return /* @__PURE__ */ e(O.Provider, {
+  return /* @__PURE__ */ e(S.Provider, {
     value: I,
     children: typeof a == "function" ? a({
       payload: R
@@ -63,27 +63,27 @@ function A({
   ...g
 }) {
   return /* @__PURE__ */ c(q, { ...g, children: [
-    r ? /* @__PURE__ */ e(k, { render: r }) : null,
-    /* @__PURE__ */ c(v, { children: [
+    r ? /* @__PURE__ */ e(w, { render: r }) : null,
+    /* @__PURE__ */ c(B, { children: [
       /* @__PURE__ */ e(
-        N,
+        j,
         {
           className: f(
             n.dialog__backdrop,
-            h.transition_opacity
+            x.transition_opacity
           )
         }
       ),
       /* @__PURE__ */ e(
-        S,
+        V,
         {
           className: f(
             n.dialog__popup,
             u && n.dialog__popup_centered,
-            h.transition_scale
+            x.transition_scale
           ),
           children: /* @__PURE__ */ c(
-            j,
+            b,
             {
               background: d,
               className: f(
@@ -92,14 +92,14 @@ function A({
                 p
               ),
               children: [
-                t || a ? /* @__PURE__ */ c(V, { className: n.dialog__header, children: [
-                  t ? /* @__PURE__ */ e(x, { render: /* @__PURE__ */ e(w, {}), size: "2xl", children: t }) : null,
+                t || a ? /* @__PURE__ */ c(O, { className: n.dialog__header, children: [
+                  t ? /* @__PURE__ */ e(h, { render: /* @__PURE__ */ e($, {}), size: "2xl", children: t }) : null,
                   a ? /* @__PURE__ */ e(
-                    x,
+                    h,
                     {
                       multiline: !0,
                       color: "dimmer",
-                      render: /* @__PURE__ */ e(B, {}),
+                      render: /* @__PURE__ */ e(z, {}),
                       children: a
                     }
                   ) : null
@@ -111,7 +111,7 @@ function A({
                     "data-framework-close": !0,
                     className: n.dialog__close,
                     render: /* @__PURE__ */ e(
-                      $,
+                      T,
                       {
                         size: "sm",
                         icon: "close-line",
@@ -130,7 +130,7 @@ function A({
   ] });
 }
 function E(t) {
-  return /* @__PURE__ */ e(P, { render: /* @__PURE__ */ e(z, { ...t }) });
+  return /* @__PURE__ */ e(P, { render: /* @__PURE__ */ e(y, { ...t }) });
 }
 const Z = Object.assign(A, {
   Close: E

package/dist/components/icon/icon.d.ts

@@ -2,13 +2,13 @@ import { ComponentProps } from 'react';
 import { ColorToken, Size } from '../../styles/tokens';
 import { IconName } from './icon.types';
 interface IconProps extends Omit<ComponentProps<"svg">, "name"> {
+    /** Icon name */
+    name: IconName;
     /**
      * Overrides the icon size provider.
      * Defaults to "md".
      */
     size?: Size;
-    /** Icon name */
-    name: IconName;
     /**
      * Icon fill color
      * You probably should provide a color token, but we allow any color
@@ -19,8 +19,14 @@ interface IconProps extends Omit<ComponentProps<"svg">, "name"> {
      * Leave empty if icon is purely decorative.
      */
     alt?: string;
+    /**
+     * Should the icon spin (useful for loaders)
+     * You can also specify a duration in seconds, but we recommend the default or using the Spinner component for consistency
+     * Defaults to false.
+     */
+    spin?: boolean | number;
 }
-declare function Icon({ size, name, color, alt, className, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
+declare function Icon({ name, size, color, alt, className, spin, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
 export { Icon };
 export declare namespace Icon {
     type Props = IconProps;