@koide-labs/ui 0.1.3 → 0.1.4

package/dist/components/spinner/spinner.js

@@ -1,12 +1,12 @@
 import { jsx as n } from "react/jsx-runtime";
-import { c as o } from "../../clsx-OuTLNxxd.js";
-import { View as i } from "../view/view.js";
-import { Icon as s } from "../icon/icon.js";
-import '../../spinner.css';const m = "_spinner_16nxb_2", p = {
+import { c as e } from "../../clsx-OuTLNxxd.js";
+import { View as s } from "../view/view.js";
+import { Icon as i } from "../icon/icon.js";
+import '../../spinner.css';const m = "_spinner_s5ov8_3", p = {
   spinner: m
 };
-function f({ className: r, ...e }) {
-  return /* @__PURE__ */ n(i, { className: o(p.spinner, r), ...e, children: /* @__PURE__ */ n(s, { name: "loader-2-line" }) });
+function f({ className: r, ...o }) {
+  return /* @__PURE__ */ n(s, { className: e(p.spinner, r), ...o, children: /* @__PURE__ */ n(i, { name: "loader-2-line" }) });
 }
 export {
   f as Spinner

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

@@ -1,42 +1,42 @@
-import { jsx as t, jsxs as c } from "react/jsx-runtime";
+import { jsx as t, jsxs as l } from "react/jsx-runtime";
 import { c as v } from "../../clsx-OuTLNxxd.js";
-import { T as x } from "../../tooltip-BJQPwudf.js";
+import { T as b } from "../../tooltip-JPnUwFFR.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";
 import '../../stacked-avatars.css';const a = {
-  "stacked-avatars": "_stacked-avatars_qhxl3_2",
-  "stacked-avatars__avatar": "_stacked-avatars__avatar_qhxl3_8",
-  "stacked-avatars__avatar_color": "_stacked-avatars__avatar_color_qhxl3_13",
-  "stacked-avatars__visible": "_stacked-avatars__visible_qhxl3_17",
-  "stacked-avatars__visible_size_sm": "_stacked-avatars__visible_size_sm_qhxl3_35",
-  "stacked-avatars__visible_size_md": "_stacked-avatars__visible_size_md_qhxl3_39",
-  "stacked-avatars__visible_size_lg": "_stacked-avatars__visible_size_lg_qhxl3_43",
-  "stacked-avatars__visible_size_xl": "_stacked-avatars__visible_size_xl_qhxl3_47",
-  "stacked-avatars__visible_size_2xl": "_stacked-avatars__visible_size_2xl_qhxl3_51",
-  "stacked-avatars__visible_size_3xl": "_stacked-avatars__visible_size_3xl_qhxl3_55",
-  "stacked-avatars__tooltip-content": "_stacked-avatars__tooltip-content_qhxl3_60",
-  "stacked-avatars__tooltip-user": "_stacked-avatars__tooltip-user_qhxl3_70",
-  "stacked-avatars__tooltip-text": "_stacked-avatars__tooltip-text_qhxl3_78"
+  "stacked-avatars": "_stacked-avatars_1bugq_3",
+  "stacked-avatars__avatar": "_stacked-avatars__avatar_1bugq_9",
+  "stacked-avatars__avatar_color": "_stacked-avatars__avatar_color_1bugq_14",
+  "stacked-avatars__visible": "_stacked-avatars__visible_1bugq_18",
+  "stacked-avatars__visible_size_sm": "_stacked-avatars__visible_size_sm_1bugq_36",
+  "stacked-avatars__visible_size_md": "_stacked-avatars__visible_size_md_1bugq_40",
+  "stacked-avatars__visible_size_lg": "_stacked-avatars__visible_size_lg_1bugq_44",
+  "stacked-avatars__visible_size_xl": "_stacked-avatars__visible_size_xl_1bugq_48",
+  "stacked-avatars__visible_size_2xl": "_stacked-avatars__visible_size_2xl_1bugq_52",
+  "stacked-avatars__visible_size_3xl": "_stacked-avatars__visible_size_3xl_1bugq_56",
+  "stacked-avatars__tooltip-content": "_stacked-avatars__tooltip-content_1bugq_61",
+  "stacked-avatars__tooltip-user": "_stacked-avatars__tooltip-user_1bugq_71",
+  "stacked-avatars__tooltip-text": "_stacked-avatars__tooltip-text_1bugq_79"
 };
-function f({
+function q({
   users: s,
   visibleUsers: e = 3,
   size: d = "md"
 }) {
   return /* @__PURE__ */ t(
-    x,
+    b,
     {
       className: a["stacked-avatars__tooltip-content"],
-      trigger: /* @__PURE__ */ c(r, { className: a["stacked-avatars"], children: [
-        s.slice(0, e).map(({ color: l, className: i, ..._ }, m) => /* @__PURE__ */ t(r, { color: l, children: /* @__PURE__ */ t(
+      trigger: /* @__PURE__ */ l(r, { className: a["stacked-avatars"], children: [
+        s.slice(0, e).map(({ color: i, className: c, ..._ }, m) => /* @__PURE__ */ t(r, { color: i, children: /* @__PURE__ */ t(
           o,
           {
             size: d,
             className: v(
               a["stacked-avatars__avatar"],
               a["stacked-avatars__avatar_color"],
-              i
+              c
             ),
             style: { zIndex: m },
             ..._
@@ -50,23 +50,23 @@ function f({
               a[`stacked-avatars__visible_size_${d}`]
             ),
             style: { zIndex: e + 1 },
-            children: /* @__PURE__ */ c(k, { size: "sm", children: [
+            children: /* @__PURE__ */ l(k, { size: "sm", children: [
               "+",
               s.length - e
             ] })
           }
         )
       ] }),
-      children: s.map(({ color: l, className: i, ..._ }) => /* @__PURE__ */ c(
+      children: s.map(({ color: i, className: c, ..._ }) => /* @__PURE__ */ l(
         r,
         {
-          color: l,
+          color: i,
           className: a["stacked-avatars__tooltip-user"],
           children: [
             /* @__PURE__ */ t(
               o,
               {
-                className: v(a["stacked-avatars__avatar_color"], i),
+                className: v(a["stacked-avatars__avatar_color"], c),
                 ..._,
                 size: "sm"
               },
@@ -88,5 +88,5 @@ function f({
   );
 }
 export {
-  f as StackedAvatars
+  q as StackedAvatars
 };

package/dist/components/status-banner/status-banner.js

@@ -3,16 +3,16 @@ import { c as b } from "../../clsx-OuTLNxxd.js";
 import { View as i } from "../view/view.js";
 import { Icon as d } from "../icon/icon.js";
 import { Heading as p } from "../heading/heading.js";
-import { Text as y } from "../text/text.js";
+import { Text as x } from "../text/text.js";
 import '../../status-banner.css';const t = {
-  "status-banner": "_status-banner_1ci6y_2",
-  "status-banner_variant_neutral": "_status-banner_variant_neutral_1ci6y_15",
-  "status-banner_variant_colorway": "_status-banner_variant_colorway_1ci6y_21",
-  "status-banner_size_md": "_status-banner_size_md_1ci6y_27",
-  "status-banner_size_lg": "_status-banner_size_lg_1ci6y_33",
-  "status-banner__content": "_status-banner__content_1ci6y_39",
-  "status-banner__description": "_status-banner__description_1ci6y_45",
-  "status-banner__close": "_status-banner__close_1ci6y_50"
+  "status-banner": "_status-banner_x87er_3",
+  "status-banner_variant_neutral": "_status-banner_variant_neutral_x87er_16",
+  "status-banner_variant_colorway": "_status-banner_variant_colorway_x87er_22",
+  "status-banner_size_md": "_status-banner_size_md_x87er_28",
+  "status-banner_size_lg": "_status-banner_size_lg_x87er_34",
+  "status-banner__content": "_status-banner__content_x87er_40",
+  "status-banner__description": "_status-banner__description_x87er_46",
+  "status-banner__close": "_status-banner__close_x87er_51"
 }, a = {
   md: {
     icon: "md",
@@ -25,40 +25,40 @@ import '../../status-banner.css';const t = {
     description: "md"
   }
 };
-function w({
+function y({
   color: e,
   icon: r,
-  title: c,
-  description: o,
+  title: o,
+  description: l,
   size: n = "lg",
-  render: l,
-  className: u,
+  render: u,
+  className: c,
   ...m
 }) {
   return /* @__PURE__ */ _(
     i,
     {
-      render: l,
+      render: u,
       ...m,
       color: e,
       className: b(
         t["status-banner"],
         t[`status-banner_size_${n}`],
         e ? t["status-banner_variant_colorway"] : t["status-banner_variant_neutral"],
-        u
+        c
       ),
       children: [
         r ? /* @__PURE__ */ s(d, { name: r, size: a[n].icon }) : null,
         /* @__PURE__ */ _(i, { className: t["status-banner__content"], children: [
-          /* @__PURE__ */ s(p, { level: 1, size: a[n].title, color: "inherit", children: c }),
+          /* @__PURE__ */ s(p, { level: 1, size: a[n].title, color: "inherit", children: o }),
           /* @__PURE__ */ s(
-            y,
+            x,
             {
               className: t["status-banner__description"],
               multiline: !0,
               size: a[n].description,
               color: "inherit",
-              children: o
+              children: l
             }
           )
         ] })
@@ -67,5 +67,5 @@ function w({
   );
 }
 export {
-  w as StatusBanner
+  y as StatusBanner
 };

package/dist/components/surface/surface.js

@@ -1,36 +1,36 @@
 import { jsx as a } from "react/jsx-runtime";
-import { c as f } from "../../clsx-OuTLNxxd.js";
+import { c as u } 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_1ju4v_2", u = {
-  surface: _,
-  "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(
+import '../../surface.css';const m = "_surface_4hgme_3", s = {
+  surface: m,
+  "surface--root": "_surface--root_4hgme_7",
+  "surface--default": "_surface--default_4hgme_15",
+  "surface--higher": "_surface--higher_4hgme_23",
+  "surface--highest": "_surface--highest_4hgme_31"
+}, c = i(0);
+function C({ background: e, elevated: r, className: n, ...f }) {
+  let t = h(c);
+  return e ? t = _(e) : r && t++, /* @__PURE__ */ a(c.Provider, { value: t, children: /* @__PURE__ */ a(
     l,
     {
-      className: f(
-        u.surface,
-        u[`surface--${m(t)}`],
-        c
+      className: u(
+        s.surface,
+        s[`surface--${g(t)}`],
+        n
       ),
-      ...n
+      ...f
     }
   ) });
 }
 const o = ["root", "default", "higher", "highest"];
-function v(e = "root") {
+function _(e = "root") {
   const r = o.indexOf(e);
   return Math.min(Math.max(r, 0), o.length - 1);
 }
-function m(e = 0) {
+function g(e = 0) {
   return o[e] || "root";
 }
 export {
-  p as Surface
+  C as Surface
 };

package/dist/components/switch/switch.js

@@ -172,8 +172,8 @@ const L = /* @__PURE__ */ s.forwardRef(function(i, m) {
   });
 });
 process.env.NODE_ENV !== "production" && (L.displayName = "SwitchThumb");
-const _e = "_switch__thumb_m68cc_25", F = {
-  switch: "_switch_m68cc_2",
+const _e = "_switch__thumb_ap37s_26", F = {
+  switch: "_switch_ap37s_3",
   switch__thumb: _e
 };
 function Ue({ color: e = "primary", ...i }) {

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-DgY7BjjO.js";
+import { S as lt } from "../../separator-Or-BDQYZ.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";
@@ -18,8 +18,8 @@ import { u as et } from "../../useBaseUiId-B7WyxtIE.js";
 import { u as _t, A as gt, C as vt } from "../../CompositeRoot-CCgh2M64.js";
 import { o as J } from "../../owner-rKN292Q9.js";
 import { c as Q, n as X } from "../../createBaseUIEventDetails-CCSfZ2vM.js";
-import { u as ht } from "../../useButton-d3_JgBNr.js";
-import { d as Tt, f as Ct } from "../../element-u5WgOZX1.js";
+import { u as Tt } from "../../useButton-d3_JgBNr.js";
+import { d as ht, f as Ct } from "../../element-u5WgOZX1.js";
 import '../../tabs.css';const K = /* @__PURE__ */ n.createContext(void 0);
 process.env.NODE_ENV !== "production" && (K.displayName = "TabsRootContext");
 function Y() {
@@ -44,13 +44,13 @@ const W = {
     render: _,
     value: b,
     ...v
-  } = o, h = mt(), E = Object.hasOwn(o, "defaultValue"), R = n.useRef([]), [x, l] = n.useState(() => /* @__PURE__ */ new Map()), [d, T] = dt({
+  } = o, T = mt(), E = Object.hasOwn(o, "defaultValue"), R = n.useRef([]), [x, l] = n.useState(() => /* @__PURE__ */ new Map()), [d, h] = dt({
     controlled: b,
     default: e,
     name: "Tabs",
     state: "value"
   }), N = b !== void 0, [i, P] = n.useState(() => /* @__PURE__ */ new Map()), [D, I] = n.useState("none"), M = k((s, m) => {
-    c?.(s, m), !m.isCanceled && (T(s), I(m.activationDirection));
+    c?.(s, m), !m.isCanceled && (h(s), I(m.activationDirection));
   }), p = k((s, m) => {
     l((r) => {
       if (r.get(s) === m)
@@ -77,7 +77,7 @@ const W = {
         return m;
     return null;
   }, [i]), y = n.useMemo(() => ({
-    direction: h,
+    direction: T,
     getTabElementBySelectedValue: w,
     getTabIdByPanelValue: O,
     getTabPanelIdByValue: V,
@@ -88,7 +88,7 @@ const W = {
     unregisterMountedTabPanel: A,
     tabActivationDirection: D,
     value: d
-  }), [h, w, O, V, M, a, p, P, A, D, d]), S = n.useMemo(() => {
+  }), [T, w, O, V, M, a, p, P, A, D, d]), S = n.useMemo(() => {
     for (const s of i.values())
       if (s != null && s.value === d)
         return s;
@@ -104,8 +104,8 @@ const W = {
     if (E && s && d === e || !s && !m)
       return;
     const C = L ?? null;
-    d !== C && (T(C), I("none"));
-  }, [e, L, E, N, S, I, T, i, d]);
+    d !== C && (h(C), I("none"));
+  }, [e, L, E, N, S, I, h, i, d]);
   const H = $("div", o, {
     state: {
       orientation: a,
@@ -142,14 +142,14 @@ const ot = /* @__PURE__ */ n.forwardRef(function(o, u) {
     nativeButton: b = !0,
     ...v
   } = o, {
-    value: h,
+    value: T,
     getTabPanelIdByValue: E,
     orientation: R
   } = Y(), {
     activateOnFocus: x,
     highlightedTabIndex: l,
     onTabActivation: d,
-    setHighlightedTabIndex: T,
+    setHighlightedTabIndex: h,
     tabsListElement: N
   } = Mt(), i = et(_), P = n.useMemo(() => ({
     disabled: e,
@@ -163,7 +163,7 @@ const ot = /* @__PURE__ */ n.forwardRef(function(o, u) {
     // because the index is needed for Tab internals
   } = _t({
     metadata: P
-  }), p = a === h, A = n.useRef(!1);
+  }), p = a === T, A = n.useRef(!1);
   F(() => {
     if (A.current) {
       A.current = !1;
@@ -173,16 +173,16 @@ const ot = /* @__PURE__ */ n.forwardRef(function(o, u) {
       return;
     const r = N;
     if (r != null) {
-      const C = Tt(J(r));
+      const C = ht(J(r));
       if (C && Ct(r, C))
         return;
     }
-    e || T(M);
-  }, [p, M, l, T, e, N]);
+    e || h(M);
+  }, [p, M, l, h, e, N]);
   const {
     getButtonProps: V,
     buttonRef: O
-  } = ht({
+  } = Tt({
     disabled: e,
     native: b,
     focusableWhenDisabled: !0
@@ -193,7 +193,7 @@ const ot = /* @__PURE__ */ n.forwardRef(function(o, u) {
     }));
   }
   function G(r) {
-    p || (M > -1 && !e && T(M), !e && x && (!y.current || // keyboard or touch focus
+    p || (M > -1 && !e && h(M), !e && x && (!y.current || // keyboard or touch focus
     y.current && S.current) && d(a, Q(X, r.nativeEvent, void 0, {
       activationDirection: "none"
     })));
@@ -246,7 +246,7 @@ const at = /* @__PURE__ */ n.forwardRef(function(o, u) {
   } = o, {
     value: b,
     getTabIdByPanelValue: v,
-    orientation: h,
+    orientation: T,
     tabActivationDirection: E,
     registerMountedTabPanel: R,
     unregisterMountedTabPanel: x
@@ -254,17 +254,17 @@ const at = /* @__PURE__ */ n.forwardRef(function(o, u) {
     id: l,
     value: e
   }), [l, e]), {
-    ref: T,
+    ref: h,
     index: N
   } = pt({
     metadata: d
   }), i = e !== b, P = v(e), D = n.useMemo(() => ({
     hidden: i,
-    orientation: h,
+    orientation: T,
     tabActivationDirection: E
-  }), [i, h, E]), I = $("div", o, {
+  }), [i, T, E]), I = $("div", o, {
     state: D,
-    ref: [u, T],
+    ref: [u, h],
     props: [{
       "aria-labelledby": P,
       hidden: i,
@@ -293,15 +293,15 @@ const st = /* @__PURE__ */ n.forwardRef(function(o, u) {
   } = o, {
     getTabElementBySelectedValue: b,
     onValueChange: v,
-    orientation: h,
+    orientation: T,
     value: E,
     setTabMap: R,
     tabActivationDirection: x
-  } = Y(), [l, d] = n.useState(0), [T, N] = n.useState(null), i = Rt(
+  } = Y(), [l, d] = n.useState(0), [h, N] = n.useState(null), i = Rt(
     E,
     // the old value
-    h,
     T,
+    h,
     b
   ), P = k((p, A) => {
     if (p !== E) {
@@ -309,19 +309,19 @@ const st = /* @__PURE__ */ n.forwardRef(function(o, u) {
       A.activationDirection = V, v(p, A);
     }
   }), D = n.useMemo(() => ({
-    orientation: h,
+    orientation: T,
     tabActivationDirection: x
-  }), [h, x]), I = {
-    "aria-orientation": h === "vertical" ? "vertical" : void 0,
+  }), [T, x]), I = {
+    "aria-orientation": T === "vertical" ? "vertical" : void 0,
     role: "tablist"
   }, M = n.useMemo(() => ({
     activateOnFocus: f,
     highlightedTabIndex: l,
     onTabActivation: P,
     setHighlightedTabIndex: d,
-    tabsListElement: T,
+    tabsListElement: h,
     value: E
-  }), [f, l, P, d, T, E]);
+  }), [f, l, P, d, h, E]);
   return /* @__PURE__ */ g(q.Provider, {
     value: M,
     children: /* @__PURE__ */ g(vt, {
@@ -334,7 +334,7 @@ const st = /* @__PURE__ */ n.forwardRef(function(o, u) {
       highlightedIndex: l,
       enableHomeAndEndKeys: !0,
       loopFocus: c,
-      orientation: h,
+      orientation: T,
       onHighlightedIndexChange: d,
       onMapChange: R,
       disabledIndices: ft
@@ -402,15 +402,15 @@ function Rt(t, o, u, f) {
     return "none";
   }, [f, o, e, u, t]);
 }
-const Nt = "_tabs_ndch5_6", Pt = "_tabs__list_ndch5_10", Dt = "_tabs_variant_default_ndch5_17", It = "_tabs__separator_ndch5_22", At = "_tabs__trigger_ndch5_26", St = "_tabs_variant_progress_ndch5_48", B = {
+const Nt = "_tabs_1t4sr_7", Pt = "_tabs__list_1t4sr_11", Dt = "_tabs_variant_default_1t4sr_18", It = "_tabs__separator_1t4sr_23", At = "_tabs__trigger_1t4sr_27", St = "_tabs_variant_progress_1t4sr_49", B = {
   tabs: Nt,
   tabs__list: Pt,
   tabs_variant_default: Dt,
   tabs__separator: It,
   tabs__trigger: At,
   tabs_variant_progress: St,
-  "tabs__trigger-complete": "_tabs__trigger-complete_ndch5_72",
-  "tabs_variant_button-group": "_tabs_variant_button-group_ndch5_84"
+  "tabs__trigger-complete": "_tabs__trigger-complete_1t4sr_73",
+  "tabs_variant_button-group": "_tabs_variant_button-group_1t4sr_85"
 }, Vt = /* @__PURE__ */ new Set(["default", "progress"]);
 function yt({
   variant: t = "default",

package/dist/components/text/text.js

@@ -1,20 +1,20 @@
-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_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: h,
-  text_size_sm: d,
-  text_size_md: p,
-  text_size_lg: b,
-  text_size_xl: f,
-  text_size_2xl: g,
+import { c as l } from "../../clsx-OuTLNxxd.js";
+import { s as i } from "../../view.module-j3ylJCCE.js";
+import { u as n } from "../../useRender-C3vlzS3t.js";
+import { m as c } from "../../useRenderElement-DngNDu_P.js";
+import '../../text.css';const r = "_text_1qm2n_3", a = "_text_color_inherit_1qm2n_27", z = "_text_color_default_1qm2n_31", d = "_text_color_dimmer_1qm2n_35", p = "_text_color_dimmest_1qm2n_39", q = "_text_size_sm_1qm2n_44", f = "_text_size_md_1qm2n_50", u = "_text_size_lg_1qm2n_56", g = "_text_size_xl_1qm2n_62", h = "_text_size_2xl_1qm2n_68", y = "_text_size_3xl_1qm2n_74", t = {
+  text: r,
+  "text_clip-line": "_text_clip-line_1qm2n_10",
+  "text_clamp-lines": "_text_clamp-lines_1qm2n_17",
+  text_color_inherit: a,
+  text_color_default: z,
+  text_color_dimmer: d,
+  text_color_dimmest: p,
+  text_size_sm: q,
+  text_size_md: f,
+  text_size_lg: u,
+  text_size_xl: g,
+  text_size_2xl: h,
   text_size_3xl: y
 };
 function M({
@@ -23,14 +23,14 @@ function M({
   maxLines: _ = 1,
   multiline: e,
   render: o,
-  ...l
+  ...m
 }) {
-  return m({
+  return n({
     defaultTagName: "span",
     render: o,
-    props: r(l, {
-      className: i(
-        c.view,
+    props: c(m, {
+      className: l(
+        i.view,
         t.text,
         t[`text_color_${s}`],
         t[`text_size_${x}`],