@koide-labs/ui 0.1.1 → 0.1.3

package/README.md

@@ -50,9 +50,12 @@ Then, include the necessary fonts.
 I highly recommend using TailwindCSS.
 
 ```css
-@import "tailwindcss" important;
 @import "@koide-labs/ui/integrations/tailwind.css";
 @import "@koide-labs/ui/styles/core.css";
+
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/preflight.css" layer(base);
+@import "tailwindcss/utilities.css" layer(utilities) important;
 ```
 
 ## Development

package/dist/collapse.css

@@ -1 +1 @@
-@layer base{._collapse_1x5eo_2{opacity:0;transition:height var(--transition-duration-chill) var(--transition-timing-function-chill),opacity var(--transition-duration-chill) var(--transition-timing-function-chill);height:0;overflow-y:hidden}._collapse_expand_1x5eo_13{opacity:1;height:var(--collapse-height)}._collapse_hidden_1x5eo_18{position:fixed;top:0;left:0;visibility:hidden;opacity:0;z-index:0;height:-moz-fit-content;height:fit-content;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}}
+@layer atom{._collapse_m77a0_2{opacity:0;transition:height var(--transition-duration-chill) var(--transition-timing-function-chill),opacity var(--transition-duration-chill) var(--transition-timing-function-chill);height:0;overflow-y:hidden}._collapse_expand_m77a0_13{opacity:1;height:var(--collapse-height)}._collapse_hidden_m77a0_18{position:fixed;top:0;left:0;visibility:hidden;opacity:0;z-index:0;height:-moz-fit-content;height:fit-content;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}}

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

@@ -1,7 +1,7 @@
 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-D9mMAtfI.js";
-import { u as v, D as y, a as I, b as T, c as b, d as O, e as w, s as n, f as N, g as S, h as k, i as A } from "../../dialog.module-DsbQRp-d.js";
+import { u as v, D as y, a as I, b as T, c as b, d as O, e as w, s as n, f as N, g as S, h as k, i as A } from "../../dialog.module-1PAL873u.js";
 import { Surface as B } from "../surface/surface.js";
 import { View as C } from "../view/view.js";
 import { Text as D } from "../text/text.js";

package/dist/components/badge/badge.js

@@ -1,6 +1,6 @@
 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-oCp-elli.js";
+import { T as _ } from "../../tooltip-BJQPwudf.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";

package/dist/components/collapse/collapse.js

@@ -2,7 +2,7 @@ import { c as p } from "../../clsx-OuTLNxxd.js";
 import { useRef as d, useState as i, useLayoutEffect as m } from "react";
 import { u } from "../../useRender-C3vlzS3t.js";
 import { m as _ } from "../../useRenderElement-DngNDu_P.js";
-import '../../collapse.css';const f = "_collapse_1x5eo_2", h = "_collapse_expand_1x5eo_13", x = "_collapse_hidden_1x5eo_18", t = {
+import '../../collapse.css';const f = "_collapse_m77a0_2", h = "_collapse_expand_m77a0_13", x = "_collapse_hidden_m77a0_18", o = {
   collapse: f,
   collapse_expand: h,
   collapse_hidden: x
@@ -10,22 +10,22 @@ import '../../collapse.css';const f = "_collapse_1x5eo_2", h = "_collapse_expand
 function b({
   expand: s = !0,
   render: l,
-  recalculate: c,
-  ...a
+  recalculate: a,
+  ...c
 }) {
-  const o = d(null), [n, r] = i(0);
+  const t = d(null), [n, r] = i(0);
   return m(() => {
-    if (!o.current)
+    if (!t.current)
       return;
-    const e = o.current.cloneNode(!0);
-    e.removeAttribute("style"), e.style.width = `${o.current.offsetWidth}px`, e.className = t.collapse_hidden, document.body.appendChild(e), r(e.offsetHeight), e.remove();
-  }, [c]), u({
+    const e = t.current.cloneNode(!0);
+    e.removeAttribute("style"), e.style.width = `${t.current.offsetWidth}px`, e.className = o.collapse_hidden, document.body.appendChild(e), r(e.offsetHeight), e.remove();
+  }, [a]), u({
     defaultTagName: "div",
     render: l,
-    ref: o,
-    props: _(a, {
+    ref: t,
+    props: _(c, {
       "aria-hidden": !s,
-      className: p(t.collapse, s && t.collapse_expand),
+      className: p(o.collapse, s && o.collapse_expand),
       style: { "--collapse-height": `${n}px` }
     })
   });

package/dist/components/command/command.js

@@ -10,7 +10,7 @@ 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-fh_wDZNf.js";
+import { S as rn } from "../../separator-DgY7BjjO.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

@@ -9,7 +9,7 @@ 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-fh_wDZNf.js";
+import { S as on, a as rn } from "../../separator-DgY7BjjO.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";

package/dist/components/dialog/dialog.js

@@ -1,7 +1,7 @@
 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-D9mMAtfI.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-DsbQRp-d.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-1PAL873u.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";

package/dist/components/number-input/number-input.js

@@ -6,7 +6,7 @@ import { Text as kt } from "../text/text.js";
 import { Input as Wt } from "../input/input.js";
 import { View as Ht } from "../view/view.js";
 import { IconButton as tt } from "../icon-button/icon-button.js";
-import { S as Gt } from "../../separator-fh_wDZNf.js";
+import { S as Gt } from "../../separator-DgY7BjjO.js";
 import { u as Bt } from "../../useControlled-Du4sJyMj.js";
 import { u as de } from "../../useStableCallback-DKZHlUAT.js";
 import { T as $t, u as Ke } from "../../useTimeout-BNni6aw5.js";

package/dist/components/popover/popover.js

@@ -1,6 +1,6 @@
 import { jsx as u, jsxs as Y } from "react/jsx-runtime";
 import { c as Re } from "../../clsx-OuTLNxxd.js";
-import { u as be, t as ae, T as Se } from "../../tooltip-oCp-elli.js";
+import { u as be, t as ae, T as Se } from "../../tooltip-BJQPwudf.js";
 import { R as ye, P as Oe, c as x, h as Ie, d as xe, e as de, u as Ne, i as Me, f as Fe, j as ke, k as _e, p as ee, t as we } from "../../transitions.module-D9mMAtfI.js";
 import { View as Ae } from "../view/view.js";
 import { Heading as De } from "../heading/heading.js";

package/dist/components/preview-card/preview-card.js

@@ -1,6 +1,6 @@
 import { jsx as P, jsxs as q } from "react/jsx-runtime";
 import { c as pe } from "../../clsx-OuTLNxxd.js";
-import { t as z, T as fe } from "../../tooltip-oCp-elli.js";
+import { t as z, T as fe } from "../../tooltip-BJQPwudf.js";
 import { d as me, e as Pe, f as Ce, p as U, t as ge } from "../../transitions.module-D9mMAtfI.js";
 import { Surface as we } from "../surface/surface.js";
 import * as e from "react";

package/dist/components/separator/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { S as a } from "../../separator-fh_wDZNf.js";
+import { S as a } from "../../separator-DgY7BjjO.js";
 export {
   a as Separator
 };

package/dist/components/separator/separator.js

@@ -1,6 +1,6 @@
 import "react/jsx-runtime";
 import "../../clsx-OuTLNxxd.js";
-import { S as a } from "../../separator-fh_wDZNf.js";
+import { S as a } from "../../separator-DgY7BjjO.js";
 export {
   a as Separator
 };

package/dist/components/stacked-avatars/stacked-avatars.js

@@ -1,6 +1,6 @@
 import { jsx as t, jsxs as c } from "react/jsx-runtime";
 import { c as v } from "../../clsx-OuTLNxxd.js";
-import { T as x } from "../../tooltip-oCp-elli.js";
+import { T as x } from "../../tooltip-BJQPwudf.js";
 import { View as r } from "../view/view.js";
 import { Avatar as o } from "../avatar/avatar.js";
 import { Text as k } from "../text/text.js";

package/dist/components/surface/surface.js

@@ -1,34 +1,34 @@
 import { jsx as a } from "react/jsx-runtime";
-import { c as u } from "../../clsx-OuTLNxxd.js";
+import { c as f } from "../../clsx-OuTLNxxd.js";
 import { createContext as i, useContext as h } from "react";
 import { View as l } from "../view/view.js";
-import '../../surface.css';const _ = "_surface_38ylh_2", s = {
+import '../../surface.css';const _ = "_surface_1ju4v_2", u = {
   surface: _,
-  "surface--root": "_surface--root_38ylh_6",
-  "surface--default": "_surface--default_38ylh_14",
-  "surface--higher": "_surface--higher_38ylh_22",
-  "surface--highest": "_surface--highest_38ylh_30"
-}, c = i(0);
-function p({ background: e, elevated: r, className: n, ...f }) {
-  let t = h(c);
-  return e ? t = m(e) : r && t++, /* @__PURE__ */ a(c.Provider, { value: t, children: /* @__PURE__ */ a(
+  "surface--root": "_surface--root_1ju4v_6",
+  "surface--default": "_surface--default_1ju4v_14",
+  "surface--higher": "_surface--higher_1ju4v_22",
+  "surface--highest": "_surface--highest_1ju4v_30"
+}, s = i(0);
+function p({ background: e, elevated: r, className: c, ...n }) {
+  let t = h(s);
+  return e ? t = v(e) : r && t++, /* @__PURE__ */ a(s.Provider, { value: t, children: /* @__PURE__ */ a(
     l,
     {
-      className: u(
-        s.surface,
-        s[`surface--${g(t)}`],
-        n
+      className: f(
+        u.surface,
+        u[`surface--${m(t)}`],
+        c
       ),
-      ...f
+      ...n
     }
   ) });
 }
 const o = ["root", "default", "higher", "highest"];
-function m(e = "root") {
+function v(e = "root") {
   const r = o.indexOf(e);
   return Math.min(Math.max(r, 0), o.length - 1);
 }
-function g(e = 0) {
+function m(e = 0) {
   return o[e] || "root";
 }
 export {

package/dist/components/tabs/tabs.js

@@ -6,7 +6,7 @@ import { tokens as it } from "../../styles/tokens.js";
 import { View as U } from "../view/view.js";
 import { Button as ut } from "../button/button.js";
 import { Icon as ct } from "../icon/icon.js";
-import { S as lt } from "../../separator-fh_wDZNf.js";
+import { S as lt } from "../../separator-DgY7BjjO.js";
 import { u as dt } from "../../useControlled-Du4sJyMj.js";
 import { u as F } from "../../useIsoLayoutEffect-CIDbvm3Q.js";
 import { u as k } from "../../useStableCallback-DKZHlUAT.js";

package/dist/components/text/text.js

@@ -1,36 +1,36 @@
-import { c as l } from "../../clsx-OuTLNxxd.js";
-import { s as r } from "../../view.module-Dj7wj0kk.js";
-import { u as i } from "../../useRender-C3vlzS3t.js";
-import { m as c } from "../../useRenderElement-DngNDu_P.js";
-import '../../text.css';const n = "_text_9ru3m_2", u = "_text_color_inherit_9ru3m_26", a = "_text_color_default_9ru3m_30", z = "_text_color_dimmer_9ru3m_34", d = "_text_color_dimmest_9ru3m_38", p = "_text_size_sm_9ru3m_43", f = "_text_size_md_9ru3m_49", g = "_text_size_lg_9ru3m_55", h = "_text_size_xl_9ru3m_61", y = "_text_size_2xl_9ru3m_67", $ = "_text_size_3xl_9ru3m_73", t = {
+import { c as i } from "../../clsx-OuTLNxxd.js";
+import { s as c } from "../../view.module-CjopAf_0.js";
+import { u as m } from "../../useRender-C3vlzS3t.js";
+import { m as r } from "../../useRenderElement-DngNDu_P.js";
+import '../../text.css';const n = "_text_b8h0u_2", u = "_text_color_inherit_b8h0u_26", a = "_text_color_default_b8h0u_30", z = "_text_color_dimmer_b8h0u_34", h = "_text_color_dimmest_b8h0u_38", d = "_text_size_sm_b8h0u_43", p = "_text_size_md_b8h0u_49", b = "_text_size_lg_b8h0u_55", f = "_text_size_xl_b8h0u_61", g = "_text_size_2xl_b8h0u_67", y = "_text_size_3xl_b8h0u_73", t = {
   text: n,
-  "text_clip-line": "_text_clip-line_9ru3m_9",
-  "text_clamp-lines": "_text_clamp-lines_9ru3m_16",
+  "text_clip-line": "_text_clip-line_b8h0u_9",
+  "text_clamp-lines": "_text_clamp-lines_b8h0u_16",
   text_color_inherit: u,
   text_color_default: a,
   text_color_dimmer: z,
-  text_color_dimmest: d,
-  text_size_sm: p,
-  text_size_md: f,
-  text_size_lg: g,
-  text_size_xl: h,
-  text_size_2xl: y,
-  text_size_3xl: $
+  text_color_dimmest: h,
+  text_size_sm: d,
+  text_size_md: p,
+  text_size_lg: b,
+  text_size_xl: f,
+  text_size_2xl: g,
+  text_size_3xl: y
 };
-function P({
+function M({
   color: s = "default",
   size: x = "md",
   maxLines: _ = 1,
   multiline: e,
   render: o,
-  ...m
+  ...l
 }) {
-  return i({
+  return m({
     defaultTagName: "span",
     render: o,
-    props: c(m, {
-      className: l(
-        r.view,
+    props: r(l, {
+      className: i(
+        c.view,
         t.text,
         t[`text_color_${s}`],
         t[`text_size_${x}`],
@@ -44,5 +44,5 @@ function P({
   });
 }
 export {
-  P as Text
+  M as Text
 };

package/dist/components/timestamp/timestamp.js

@@ -2,7 +2,7 @@ import { jsx as p } from "react/jsx-runtime";
 import { c as B } from "../../clsx-OuTLNxxd.js";
 import { useState as V } from "react";
 import { Text as J } from "../text/text.js";
-import { T as $ } from "../../tooltip-oCp-elli.js";
+import { T as $ } from "../../tooltip-BJQPwudf.js";
 import { View as z } from "../view/view.js";
 import '../../timestamp.css';const U = {
   lessThanXSeconds: {

package/dist/components/tooltip/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { T as t } from "../../tooltip-oCp-elli.js";
+import { T as t } from "../../tooltip-BJQPwudf.js";
 export {
   t as Tooltip
 };

package/dist/components/tooltip/tooltip.js

@@ -2,7 +2,7 @@ import "react/jsx-runtime";
 import "../../clsx-OuTLNxxd.js";
 import "../../-utils.js";
 import "../../transitions.module-D9mMAtfI.js";
-import { T as a } from "../../tooltip-oCp-elli.js";
+import { T as a } from "../../tooltip-BJQPwudf.js";
 import "../surface/surface.js";
 export {
   a as Tooltip

package/dist/components/view/view.js

@@ -1,41 +1,41 @@
 import { c as t } from "../../clsx-OuTLNxxd.js";
-import { s as n } from "../../view.module-Dj7wj0kk.js";
-import { u as v } from "../../useRender-C3vlzS3t.js";
-import { m as s } from "../../useRenderElement-DngNDu_P.js";
-import '../../view2.css';const y = "_view_colorway_ms6zs_2", g = "_view_colorway_static_ms6zs_20", m = "_view_colorway_outline_ms6zs_28", d = "_view_colorway_fill_ms6zs_98", l = {
-  view_colorway: y,
-  view_colorway_static: g,
-  view_colorway_outline: m,
-  "view_colorway_outline-static": "_view_colorway_outline-static_ms6zs_60",
-  "view_colorway_mute-static": "_view_colorway_mute-static_ms6zs_67",
-  "view_colorway_no-fill": "_view_colorway_no-fill_ms6zs_73",
+import { s as v } from "../../view.module-CjopAf_0.js";
+import { u as n } from "../../useRender-C3vlzS3t.js";
+import { m as y } from "../../useRenderElement-DngNDu_P.js";
+import '../../view2.css';const u = "_view_colorway_qhua6_2", s = "_view_colorway_static_qhua6_20", g = "_view_colorway_outline_qhua6_28", d = "_view_colorway_fill_qhua6_98", l = {
+  view_colorway: u,
+  view_colorway_static: s,
+  view_colorway_outline: g,
+  "view_colorway_outline-static": "_view_colorway_outline-static_qhua6_60",
+  "view_colorway_mute-static": "_view_colorway_mute-static_qhua6_67",
+  "view_colorway_no-fill": "_view_colorway_no-fill_qhua6_73",
   view_colorway_fill: d,
-  "view_colorway_fill-static": "_view_colorway_fill-static_ms6zs_123",
-  "view_colorway_fill-outline": "_view_colorway_fill-outline_ms6zs_129",
-  "view_colorway_color-primary": "_view_colorway_color-primary_ms6zs_163",
-  "view_colorway_color-positive": "_view_colorway_color-positive_ms6zs_171",
-  "view_colorway_color-negative": "_view_colorway_color-negative_ms6zs_179",
-  "view_colorway_color-warning": "_view_colorway_color-warning_ms6zs_187",
-  "view_colorway_color-red": "_view_colorway_color-red_ms6zs_195",
-  "view_colorway_color-orange": "_view_colorway_color-orange_ms6zs_203",
-  "view_colorway_color-yellow": "_view_colorway_color-yellow_ms6zs_211",
-  "view_colorway_color-green": "_view_colorway_color-green_ms6zs_219",
-  "view_colorway_color-teal": "_view_colorway_color-teal_ms6zs_227",
-  "view_colorway_color-blue": "_view_colorway_color-blue_ms6zs_235",
-  "view_colorway_color-blurple": "_view_colorway_color-blurple_ms6zs_243",
-  "view_colorway_color-purple": "_view_colorway_color-purple_ms6zs_251",
-  "view_colorway_color-magenta": "_view_colorway_color-magenta_ms6zs_259",
-  "view_colorway_color-pink": "_view_colorway_color-pink_ms6zs_267",
-  "view_colorway_color-grey": "_view_colorway_color-grey_ms6zs_275"
-}, u = "_view_interactive_1dhgl_2", f = "_view_interactive_fill_1dhgl_30", z = "_view_interactive_outline_1dhgl_69", c = {
-  view_interactive: u,
-  view_interactive_fill: f,
-  "view_interactive_no-fill": "_view_interactive_no-fill_1dhgl_50",
-  view_interactive_outline: z,
-  "view_interactive_fill-outline": "_view_interactive_fill-outline_1dhgl_89",
-  "view_interactive_list-item": "_view_interactive_list-item_1dhgl_110"
-}, h = "_view_loading_p1qhr_7", p = "_view_loading_foreground_p1qhr_12", b = "_loading_p1qhr_1", k = "_view_loading_background_p1qhr_25", w = {
-  view_loading: h,
+  "view_colorway_fill-static": "_view_colorway_fill-static_qhua6_123",
+  "view_colorway_fill-outline": "_view_colorway_fill-outline_qhua6_129",
+  "view_colorway_color-primary": "_view_colorway_color-primary_qhua6_163",
+  "view_colorway_color-positive": "_view_colorway_color-positive_qhua6_171",
+  "view_colorway_color-negative": "_view_colorway_color-negative_qhua6_179",
+  "view_colorway_color-warning": "_view_colorway_color-warning_qhua6_187",
+  "view_colorway_color-red": "_view_colorway_color-red_qhua6_195",
+  "view_colorway_color-orange": "_view_colorway_color-orange_qhua6_203",
+  "view_colorway_color-yellow": "_view_colorway_color-yellow_qhua6_211",
+  "view_colorway_color-green": "_view_colorway_color-green_qhua6_219",
+  "view_colorway_color-teal": "_view_colorway_color-teal_qhua6_227",
+  "view_colorway_color-blue": "_view_colorway_color-blue_qhua6_235",
+  "view_colorway_color-blurple": "_view_colorway_color-blurple_qhua6_243",
+  "view_colorway_color-purple": "_view_colorway_color-purple_qhua6_251",
+  "view_colorway_color-magenta": "_view_colorway_color-magenta_qhua6_259",
+  "view_colorway_color-pink": "_view_colorway_color-pink_qhua6_267",
+  "view_colorway_color-grey": "_view_colorway_color-grey_qhua6_275"
+}, f = "_view_interactive_r2alv_2", h = "_view_interactive_fill_r2alv_30", q = "_view_interactive_outline_r2alv_69", r = {
+  view_interactive: f,
+  view_interactive_fill: h,
+  "view_interactive_no-fill": "_view_interactive_no-fill_r2alv_50",
+  view_interactive_outline: q,
+  "view_interactive_fill-outline": "_view_interactive_fill-outline_r2alv_89",
+  "view_interactive_list-item": "_view_interactive_list-item_r2alv_110"
+}, m = "_view_loading_p1qhr_7", p = "_view_loading_foreground_p1qhr_12", b = "_loading_p1qhr_1", k = "_view_loading_background_p1qhr_25", c = {
+  view_loading: m,
   view_loading_foreground: p,
   loading: b,
   view_loading_background: k
@@ -44,20 +44,20 @@ function R({
   interactive: o,
   loading: i,
   color: e,
-  render: r,
-  ...a
+  render: a,
+  ...w
 }) {
   const _ = $({ interactive: o, loading: i });
-  return v({
+  return n({
     defaultTagName: "div",
-    render: r,
-    props: s(a, {
+    render: a,
+    props: y(w, {
       className: t(
-        n.view,
+        v.view,
         e && l[`view_colorway_color-${e}`],
         _.interactive && [
-          c.view_interactive,
-          c[`view_interactive_${_.interactive}`]
+          r.view_interactive,
+          r[`view_interactive_${_.interactive}`]
         ],
         _.colorway && [
           _.colorway[1].endsWith("static") ? l.view_colorway_static : l.view_colorway,
@@ -65,8 +65,8 @@ function R({
           l[`view_colorway_color-${_.colorway[0]}`]
         ],
         _.loading && [
-          w.view_loading,
-          w[`view_loading_${_.loading}`]
+          c.view_loading,
+          c[`view_loading_${_.loading}`]
         ]
       )
     })
@@ -75,8 +75,8 @@ function R({
 function $(o) {
   let i = null, e = null;
   o.interactive && typeof o.interactive == "boolean" ? i = "fill" : typeof o.interactive == "string" && (typeof o.interactive == "string" && o.interactive.includes("_") ? e = o.interactive.split("_") : i = o.interactive);
-  let r = null;
-  return o.loading && (r = typeof o.loading == "boolean" ? "foreground" : o.loading), { interactive: i, colorway: e, loading: r };
+  let a = null;
+  return o.loading && (a = typeof o.loading == "boolean" ? "foreground" : o.loading), { interactive: i, colorway: e, loading: a };
 }
 export {
   R as View

package/dist/dialog.css

@@ -1 +1 @@
-@layer base{._dialog__backdrop_3490s_2{position:fixed;z-index:50;inset:0;background-color:var(--background-overlay)}@supports (-webkit-touch-callout: none){._dialog__backdrop_3490s_2{position:absolute}}._dialog__popup_3490s_14{display:block;position:fixed;z-index:51;inset:0;isolation:isolate;padding:var(--space-16);height:100%;overflow:auto}._dialog__popup_centered_3490s_25{display:flex;place-items:center}@media screen and (min-width:512px){._dialog__popup_centered_3490s_25{padding:var(--space-32);padding-top:var(--space-64);padding-bottom:var(--space-64)}}._dialog__content_3490s_36{position:relative;flex-grow:1;flex-shrink:1;gap:var(--space-16);margin:0 auto;outline:none;box-shadow:var(--shadow-2);border:1px solid var(--outline-dimmest);border-radius:var(--border-radius-default);padding:var(--space-16);width:100%;height:auto;overflow:hidden}._dialog__content_width_sm_3490s_52{max-width:384px}._dialog__content_width_md_3490s_56{max-width:512px}._dialog__content_width_lg_3490s_60{max-width:872px}._dialog__header_3490s_64{gap:var(--space-4)}._dialog__close_3490s_68{position:absolute;top:var(--space-8);right:var(--space-8)}}
+@layer atom{._dialog__backdrop_1wc77_2{position:fixed;z-index:50;inset:0;background-color:var(--background-overlay)}@supports (-webkit-touch-callout: none){._dialog__backdrop_1wc77_2{position:absolute}}._dialog__popup_1wc77_14{display:block;position:fixed;z-index:51;inset:0;isolation:isolate;padding:var(--space-16);height:100%;overflow:auto}._dialog__popup_centered_1wc77_25{display:flex;place-items:center}@media screen and (min-width:512px){._dialog__popup_centered_1wc77_25{padding:var(--space-32);padding-top:var(--space-64);padding-bottom:var(--space-64)}}._dialog__content_1wc77_36{position:relative;flex-grow:1;flex-shrink:1;gap:var(--space-16);margin:0 auto;outline:none;box-shadow:var(--shadow-2);border:1px solid var(--outline-dimmest);border-radius:var(--border-radius-default);padding:var(--space-16);width:100%;height:auto;overflow:hidden}._dialog__content_width_sm_1wc77_52{max-width:384px}._dialog__content_width_md_1wc77_56{max-width:512px}._dialog__content_width_lg_1wc77_60{max-width:872px}._dialog__header_1wc77_64{gap:var(--space-4)}._dialog__close_1wc77_68{position:absolute;top:var(--space-8);right:var(--space-8)}}