@cfx-dev/ui-components 2.1.23 → 3.0.0

package/dist/components/Accordion/Accordion.js

@@ -4,7 +4,7 @@ import { Icon as C } from "../Icon/Icon.js";
 import { Flex as k } from "../Layout/Flex/Flex.js";
 import { Text as I } from "../Text/Text.js";
 import { clsx as h } from "../../utils/clsx.js";
-import '../../assets/Accordion.css';const D = "_root_1pwnk_1", y = "_item_1pwnk_5", F = "_header_1pwnk_5", N = "_triggerContainer_1pwnk_10", U = "_iconFlip_1pwnk_23", T = "_iconUp_1pwnk_26", R = "_iconDown_1pwnk_29", $ = "_iconLeft_1pwnk_32", E = "_iconRight_1pwnk_36", L = "_content_1pwnk_49", O = "_open_1pwnk_56", o = {
+const D = "_root_1pwnk_1", y = "_item_1pwnk_5", F = "_header_1pwnk_5", N = "_triggerContainer_1pwnk_10", U = "_iconFlip_1pwnk_23", T = "_iconUp_1pwnk_26", R = "_iconDown_1pwnk_29", $ = "_iconLeft_1pwnk_32", E = "_iconRight_1pwnk_36", L = "_content_1pwnk_49", O = "_open_1pwnk_56", o = {
   root: D,
   item: y,
   header: F,

package/dist/components/Avatar/Avatar.js

@@ -1,7 +1,7 @@
 import { jsx as l } from "react/jsx-runtime";
 import k from "react";
 import { clsx as P } from "../../utils/clsx.js";
-import '../../assets/Avatar.css';const S = "_root_1vrfs_1", e = "_rounded_1vrfs_7", A = {
+const S = "_root_1vrfs_1", e = "_rounded_1vrfs_7", A = {
   root: S,
   rounded: e,
   "size-small": "_size-small_1vrfs_10",

package/dist/components/Badge/Badge.js

@@ -2,7 +2,7 @@ import { jsxs as i, jsx as m } from "react/jsx-runtime";
 import h from "react";
 import { Icon as v } from "../Icon/Icon.js";
 import { clsx as u } from "../../utils/clsx.js";
-import '../../assets/Badge.css';const f = "_root_5qhvc_1", q = "_success_5qhvc_12", d = "_hoverable_5qhvc_16", x = "_neutral_5qhvc_19", b = "_warning_5qhvc_23", g = "_error_5qhvc_30", p = "_small_5qhvc_37", w = "_icon_5qhvc_41", o = {
+const f = "_root_5qhvc_1", q = "_success_5qhvc_12", d = "_hoverable_5qhvc_16", x = "_neutral_5qhvc_19", b = "_warning_5qhvc_23", g = "_error_5qhvc_30", p = "_small_5qhvc_37", w = "_icon_5qhvc_41", o = {
   root: f,
   success: q,
   hoverable: d,

package/dist/components/Button/Button.js

@@ -1,108 +1,109 @@
-import { jsx as u, jsxs as g, Fragment as B } from "react/jsx-runtime";
+import { jsx as r, jsxs as W, Fragment as g } from "react/jsx-runtime";
 import m from "react";
-import { Icon as q } from "../Icon/Icon.js";
-import { clsx as I } from "../../utils/clsx.js";
-import { noop as h } from "../../utils/functional.js";
-import '../../assets/Button.css';const M = "_root_1cisu_1", j = "_fullWidth_1cisu_33", w = "_primary_1cisu_53", F = "_secondary_1cisu_74", R = "_linked_1cisu_116", v = "_quicklink_1cisu_145", D = "_icon_1cisu_152", L = "_icononly_1cisu_177", U = "_decorator_1cisu_182", o = {
-  root: M,
-  fullWidth: j,
-  primary: w,
-  secondary: F,
-  "on-light": "_on-light_1cisu_95",
-  linked: R,
-  quicklink: v,
-  icon: D,
-  icononly: L,
-  decorator: U
+import { Icon as A } from "../Icon/Icon.js";
+import { clsx as B } from "../../utils/clsx.js";
+import { noop as y } from "../../utils/functional.js";
+const q = "_unsetAll_13zdy_1", I = "_root_13zdy_5", M = "_fullWidth_13zdy_38", j = "_primary_13zdy_58", w = "_secondary_13zdy_79", F = "_linked_13zdy_121", R = "_quicklink_13zdy_150", v = "_icon_13zdy_157", D = "_icononly_13zdy_182", L = "_decorator_13zdy_187", o = {
+  unsetAll: q,
+  root: I,
+  fullWidth: M,
+  primary: j,
+  secondary: w,
+  "on-light": "_on-light_13zdy_100",
+  linked: F,
+  quicklink: R,
+  icon: v,
+  icononly: D,
+  decorator: L
 };
-function z(l) {
+function U(c) {
   const {
     text: t = null,
-    icon: c,
+    icon: l,
     decorator: n = null
-  } = l;
-  return /* @__PURE__ */ g(B, { children: [
+  } = c;
+  return /* @__PURE__ */ W(g, { children: [
     t,
-    !!c && /* @__PURE__ */ u(q, { name: c, className: o.icon }),
-    !!n && /* @__PURE__ */ u("div", { className: o.decorator, children: n })
+    !!l && /* @__PURE__ */ r(A, { name: l, className: o.icon }),
+    !!n && /* @__PURE__ */ r("div", { className: o.decorator, children: n })
   ] });
 }
-function A(l) {
+function E(c) {
   const {
     text: t = null,
-    icon: c,
+    icon: l,
     theme: n = "default",
-    disabled: i = !1,
-    className: r = "",
-    autofocus: d = !1,
-    fullWidth: s = !1,
-    tabIndex: a
-  } = l;
-  return I(o.root, o[n], r, {
-    [o.disabled]: i,
-    [o.icononly]: !!c && (t === null || typeof t > "u"),
+    disabled: s = !1,
+    className: d = "",
+    autofocus: u = !1,
+    fullWidth: a = !1,
+    tabIndex: i
+  } = c;
+  return B(o.unsetAll, o.root, o[n], d, {
+    [o.disabled]: s,
+    [o.icononly]: !!l && (t === null || typeof t > "u"),
     [o.text]: !!t,
-    [o.autofocus]: d || typeof a < "u",
-    [o.fullWidth]: s
+    [o.autofocus]: u || typeof i < "u",
+    [o.fullWidth]: a
   });
 }
-const O = m.forwardRef(function(t, c) {
+const P = m.forwardRef(function(t, l) {
   const {
     text: n = null,
-    icon: i,
-    title: r = "",
-    type: d = "button",
-    className: s = "",
-    theme: a = "default",
+    icon: s,
+    title: d = "",
+    type: u = "button",
+    className: a = "",
+    theme: i = "default",
     disabled: e = !1,
-    onClick: k = h,
-    onMouseDown: p = h,
-    onMouseUp: b = h,
-    autofocus: f = !1,
-    tabIndex: _,
-    fullWidth: y = !1,
-    ariaLabel: x = ""
-  } = t, C = m.useMemo(() => A({
+    onClick: h = y,
+    onMouseDown: p = y,
+    onMouseUp: z = y,
+    autofocus: _ = !1,
+    tabIndex: f,
+    fullWidth: k = !1,
+    ariaLabel: b = ""
+  } = t, x = m.useMemo(() => E({
     text: n,
-    icon: i,
-    theme: a,
+    icon: s,
+    theme: i,
     disabled: e,
-    className: s,
-    autofocus: f,
-    fullWidth: y,
-    tabIndex: _
+    className: a,
+    autofocus: _,
+    fullWidth: k,
+    tabIndex: f
   }), [
-    f,
-    s,
-    y,
-    e,
-    i,
     _,
+    a,
+    k,
+    e,
+    s,
+    f,
     n,
-    a
-  ]), N = m.useCallback((W) => {
-    e || k(W);
-  }, [e, k]);
-  return /* @__PURE__ */ u(
+    i
+  ]), C = m.useCallback((N) => {
+    e || h(N);
+  }, [e, h]);
+  return /* @__PURE__ */ r(
     "button",
     {
-      ref: c,
+      ref: l,
       disabled: e,
-      className: C,
-      onClick: N,
+      className: x,
+      onClick: C,
       onMouseDown: p,
-      onMouseUp: b,
-      autoFocus: f,
-      tabIndex: _,
-      title: r,
-      type: d,
-      "aria-label": x,
-      children: /* @__PURE__ */ u(z, { ...t })
+      onMouseUp: z,
+      autoFocus: _,
+      tabIndex: f,
+      title: d,
+      type: u,
+      "aria-label": b,
+      children: /* @__PURE__ */ r(U, { ...t })
     }
   );
 });
 export {
-  O as Button,
-  z as ButtonContent,
-  A as getButtonClassName
+  P as Button,
+  U as ButtonContent,
+  E as getButtonClassName
 };

package/dist/components/Button/ButtonBar.js

@@ -1,6 +1,6 @@
 import { jsx as c } from "react/jsx-runtime";
 import { clsx as o } from "../../utils/clsx.js";
-import '../../assets/ButtonBar.css';const i = "_bar_4bu59_1", l = {
+const i = "_bar_4bu59_1", l = {
   bar: i
 }, t = {
   start: "flex-start",

package/dist/components/Button/ButtonShowcase.js

@@ -1,15 +1,16 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
 import l from "react";
 import { Flex as n } from "../Layout/Flex/Flex.js";
 import { Text as i } from "../Text/Text.js";
-import { Button as t } from "./Button.js";
-import { ButtonBar as c } from "./ButtonBar.js";
-function o() {
-  return /* @__PURE__ */ r(n, { gap: "large", vertical: !0, children: [
-    /* @__PURE__ */ r(n, { gap: "normal", vertical: !0, children: [
+import { Button as r } from "./Button.js";
+import { ButtonBar as o } from "./ButtonBar.js";
+import { LinkButton as c } from "./LinkButton.js";
+function a() {
+  return /* @__PURE__ */ t(n, { gap: "large", vertical: !0, children: [
+    /* @__PURE__ */ t(n, { gap: "normal", vertical: !0, children: [
       /* @__PURE__ */ e(i, { children: "Default" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-        t,
+        r,
         {
           text: "Sign In",
           theme: "default",
@@ -17,10 +18,10 @@ function o() {
         }
       ) })
     ] }),
-    /* @__PURE__ */ r(n, { gap: "normal", vertical: !0, children: [
+    /* @__PURE__ */ t(n, { gap: "normal", vertical: !0, children: [
       /* @__PURE__ */ e(i, { children: "Primary" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-        t,
+        r,
         {
           text: "Sign In",
           theme: "primary",
@@ -28,10 +29,10 @@ function o() {
         }
       ) })
     ] }),
-    /* @__PURE__ */ r(n, { gap: "normal", vertical: !0, children: [
+    /* @__PURE__ */ t(n, { gap: "normal", vertical: !0, children: [
       /* @__PURE__ */ e(i, { children: "Secondary" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-        t,
+        r,
         {
           text: "Sign In",
           theme: "secondary",
@@ -39,10 +40,10 @@ function o() {
         }
       ) })
     ] }),
-    /* @__PURE__ */ r(n, { gap: "normal", vertical: !0, children: [
+    /* @__PURE__ */ t(n, { gap: "normal", vertical: !0, children: [
       /* @__PURE__ */ e(i, { children: "On Light" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-        t,
+        r,
         {
           text: "Sign In",
           theme: "on-light",
@@ -50,10 +51,10 @@ function o() {
         }
       ) })
     ] }),
-    /* @__PURE__ */ r(n, { gap: "normal", vertical: !0, children: [
+    /* @__PURE__ */ t(n, { gap: "normal", vertical: !0, children: [
       /* @__PURE__ */ e(i, { children: "Quick Link" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-        t,
+        r,
         {
           text: "Sign In",
           theme: "quicklink",
@@ -61,20 +62,20 @@ function o() {
         }
       ) })
     ] }),
-    /* @__PURE__ */ r(n, { gap: "normal", vertical: !0, children: [
+    /* @__PURE__ */ t(n, { gap: "normal", vertical: !0, children: [
       /* @__PURE__ */ e(i, { children: "No Icon" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-        t,
+        r,
         {
           text: "Sign In",
           theme: "default"
         }
       ) })
     ] }),
-    /* @__PURE__ */ r(n, { gap: "normal", vertical: !0, children: [
+    /* @__PURE__ */ t(n, { gap: "normal", vertical: !0, children: [
       /* @__PURE__ */ e(i, { children: "Full Width" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-        t,
+        r,
         {
           text: "Sign In",
           theme: "default",
@@ -83,11 +84,11 @@ function o() {
         }
       ) })
     ] }),
-    /* @__PURE__ */ r(n, { gap: "normal", vertical: !0, children: [
+    /* @__PURE__ */ t(n, { gap: "normal", vertical: !0, children: [
       /* @__PURE__ */ e(i, { children: "Linked" }),
-      /* @__PURE__ */ r(n, { p: 4, style: { backgroundColor: "var(--color-modal-background)" }, children: [
+      /* @__PURE__ */ t(n, { p: 4, style: { backgroundColor: "var(--color-modal-background)" }, children: [
         /* @__PURE__ */ e(
-          t,
+          r,
           {
             text: "Sign In",
             theme: "linked",
@@ -95,7 +96,7 @@ function o() {
           }
         ),
         /* @__PURE__ */ e(
-          t,
+          r,
           {
             disabled: !0,
             text: "Copy",
@@ -105,19 +106,31 @@ function o() {
         )
       ] })
     ] }),
-    /* @__PURE__ */ r(n, { gap: "normal", vertical: !0, children: [
+    /* @__PURE__ */ t(n, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(i, { children: "LinkButton - look like button but its anchor" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
+        c,
+        {
+          to: "/",
+          text: "Sign In",
+          theme: "primary",
+          icon: "Users"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ t(n, { gap: "normal", vertical: !0, children: [
       /* @__PURE__ */ e(i, { children: "Button Bar" }),
-      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ r(c, { children: [
-        /* @__PURE__ */ e(t, { text: "Sign In", theme: "primary", icon: "Users" }),
-        /* @__PURE__ */ e(t, { text: "Register", theme: "secondary", icon: "Users" }),
-        /* @__PURE__ */ e(t, { text: "Sign Out", theme: "on-light", icon: "Users" }),
-        /* @__PURE__ */ e(t, { text: "Create Account", theme: "default", icon: "Users" })
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ t(o, { children: [
+        /* @__PURE__ */ e(r, { text: "Sign In", theme: "primary", icon: "Users" }),
+        /* @__PURE__ */ e(r, { text: "Register", theme: "secondary", icon: "Users" }),
+        /* @__PURE__ */ e(r, { text: "Sign Out", theme: "on-light", icon: "Users" }),
+        /* @__PURE__ */ e(r, { text: "Create Account", theme: "default", icon: "Users" })
       ] }) })
     ] }),
-    /* @__PURE__ */ r(n, { gap: "normal", vertical: !0, children: [
+    /* @__PURE__ */ t(n, { gap: "normal", vertical: !0, children: [
       /* @__PURE__ */ e(i, { children: "Long text" }),
       /* @__PURE__ */ e("div", { style: { maxWidth: "300px" }, children: /* @__PURE__ */ e(
-        t,
+        r,
         {
           text: "Long text that should wrap around",
           theme: "default",
@@ -127,7 +140,7 @@ function o() {
     ] })
   ] });
 }
-const g = l.memo(o);
+const x = l.memo(a);
 export {
-  g as default
+  x as default
 };

package/dist/components/Checkbox/Checkbox.js

@@ -50,7 +50,7 @@ import "../Icons/cfx-icons-big/Warning.js";
 import "../Icons/cfx-icons-big/Confirm.js";
 import { clsx as R } from "../../utils/clsx.js";
 import { getColor as q } from "../../utils/color.js";
-import '../../assets/Checkbox.css';function X(e, t) {
+function X(e, t) {
   return a.useReducer((n, o) => t[n][o] ?? n, e);
 }
 var I = (e) => {

package/dist/components/ClipboardButton/ClipboardButton.js

@@ -8,7 +8,7 @@ import "../../utils/hooks/useGlobalKeyboardEvent.js";
 import "../../utils/hooks/useKeyboardClose.js";
 import "../../index-2hJuj4UN.js";
 import { useClipboardComponent as k } from "../../utils/hooks/useClipboardComponent.js";
-import '../../assets/ClipboardButton.css';const b = "_root_185u8_1", h = "_copied_185u8_1", e = {
+const b = "_root_185u8_1", h = "_copied_185u8_1", e = {
   root: b,
   copied: h
 };

package/dist/components/ControlBox/ControlBox.js

@@ -1,7 +1,7 @@
 import { jsx as m } from "react/jsx-runtime";
 import c from "react";
 import { clsx as _ } from "../../utils/clsx.js";
-import '../../assets/ControlBox.css';const e = "_root_1ykga_1", f = "_small_1ykga_5", g = "_normal_1ykga_8", i = "_large_1ykga_11", o = {
+const e = "_root_1ykga_1", f = "_small_1ykga_5", g = "_normal_1ykga_8", i = "_large_1ykga_11", o = {
   root: e,
   small: f,
   normal: g,

package/dist/components/CountryFlag/CountryFlag.js

@@ -2,7 +2,7 @@ import { jsx as t } from "react/jsx-runtime";
 import f from "react";
 import { Title as l } from "../Title/Title.js";
 import { clsx as i } from "../../utils/clsx.js";
-import '../../assets/CountryFlag.css';const m = "_root_n4jzf_1", u = {
+const m = "_root_n4jzf_1", u = {
   root: m
 }, x = f.forwardRef(function(r, e) {
   const {

package/dist/components/Decorate/Decorate.js

@@ -1,7 +1,7 @@
 import { jsxs as m, jsx as l } from "react/jsx-runtime";
 import i from "react";
 import { clsx as t } from "../../utils/clsx.js";
-import '../../assets/Decorate.css';const _ = "_root_jt9ac_1", f = "_decorator_jt9ac_4", c = {
+const _ = "_root_jt9ac_1", f = "_decorator_jt9ac_4", c = {
   root: _,
   decorator: f
 }, u = i.forwardRef(function(o, a) {

package/dist/components/Dot/Dot.js

@@ -2,7 +2,7 @@ import { jsx as e } from "react/jsx-runtime";
 import l from "react";
 import { clsx as m } from "../../utils/clsx.js";
 import { getColor as i } from "../../utils/color.js";
-import '../../assets/Dot.css';const _ = "_root_8a36f_1", r = {
+const _ = "_root_8a36f_1", r = {
   root: _,
   "size-small": "_size-small_8a36f_6",
   "size-normal": "_size-normal_8a36f_10",

package/dist/components/Flyout/Flyout.js

@@ -8,7 +8,7 @@ import { noop as f } from "../../utils/functional.js";
 import "../../utils/hooks/useGlobalKeyboardEvent.js";
 import { useKeyboardClose as k } from "../../utils/hooks/useKeyboardClose.js";
 import { useOutlet as q } from "../../utils/hooks/useOutlet.js";
-import '../../assets/Flyout.css';const b = "_root_6qvdu_1", C = "_holder_6qvdu_6", N = "_active_6qvdu_15", z = "_backdrop_6qvdu_15", y = "_mask_6qvdu_28", F = "_content_6qvdu_90", L = "_header_6qvdu_95", x = "_title_6qvdu_101", e = {
+const b = "_root_6qvdu_1", C = "_holder_6qvdu_6", N = "_active_6qvdu_15", z = "_backdrop_6qvdu_15", y = "_mask_6qvdu_28", F = "_content_6qvdu_90", L = "_header_6qvdu_95", x = "_title_6qvdu_101", e = {
   root: b,
   "size-normal": "_size-normal_6qvdu_6",
   holder: C,

package/dist/components/Icon/Icon.js

@@ -10,7 +10,7 @@ import { getTextOpacity as h } from "../Text/Text.js";
 import { ui as t } from "../ui.js";
 import { clsx as y } from "../../utils/clsx.js";
 import { getColor as z } from "../../utils/color.js";
-import '../../assets/Icon.css';const S = "_root_sqbzn_1", _ = {
+const S = "_root_sqbzn_1", _ = {
   root: S
 }, A = l.forwardRef(function(r, i) {
   const {

package/dist/components/IconBig/IconBig.js

@@ -44,7 +44,7 @@ import { I as f } from "../../cfxIconsBig-BLJjMT-Y.js";
 import { getTextOpacity as g } from "../Text/Text.js";
 import { clsx as z } from "../../utils/clsx.js";
 import { getColor as y } from "../../utils/color.js";
-import '../../assets/IconBig.css';const C = "_root_b0cs1_1", r = {
+const C = "_root_b0cs1_1", r = {
   root: C,
   "size-small": "_size-small_b0cs1_6",
   "size-normal": "_size-normal_b0cs1_14",

package/dist/components/IconButton/IconButton.js

@@ -2,7 +2,7 @@ import { jsx as t } from "react/jsx-runtime";
 import _ from "react";
 import { Icon as p } from "../Icon/Icon.js";
 import { clsx as x } from "../../utils/clsx.js";
-import '../../assets/IconButton.css';const d = "_unset_1l0x5_1", f = "_root_1l0x5_5", b = "_medium_1l0x5_19", g = "_large_1l0x5_22", o = {
+const d = "_unset_1l0x5_1", f = "_root_1l0x5_5", b = "_medium_1l0x5_19", g = "_large_1l0x5_22", o = {
   unset: d,
   root: f,
   medium: b,

package/dist/components/Indicator/Indicator.js

@@ -1,7 +1,7 @@
 import { jsxs as n, jsx as o } from "react/jsx-runtime";
 import i from "react";
 import { clsx as a } from "../../utils/clsx.js";
-import '../../assets/Indicator.css';const s = "_root_2gp9n_1", e = "_indicator_2gp9n_1", r = {
+const s = "_root_2gp9n_1", e = "_indicator_2gp9n_1", r = {
   root: s,
   indicator: e
 }, c = { animationDelay: "0ms" }, m = { animationDelay: "50ms" }, d = { animationDelay: "100ms" }, l = { animationDelay: "150ms" }, v = i.memo(function({

package/dist/components/InfoPanel/InfoPanel.js

@@ -2,7 +2,7 @@ import { jsxs as p, jsx as o } from "react/jsx-runtime";
 import u from "react";
 import { Icon as r } from "../Icon/Icon.js";
 import { clsx as v } from "../../utils/clsx.js";
-import '../../assets/InfoPanel.css';const y = "_rootUnset_5rtl4_1", f = "_root_5rtl4_1", x = "_interactive_5rtl4_19", z = "_interactiveIcon_5rtl4_22", d = "_icon_5rtl4_70", I = "_content_5rtl4_74", t = {
+const y = "_rootUnset_5rtl4_1", f = "_root_5rtl4_1", x = "_interactive_5rtl4_19", z = "_interactiveIcon_5rtl4_22", d = "_icon_5rtl4_70", I = "_content_5rtl4_74", t = {
   rootUnset: y,
   root: f,
   interactive: x,

package/dist/components/Input/Input.js

@@ -5,7 +5,7 @@ import W from "../IconButton/IconButton.js";
 import { Indicator as X } from "../Indicator/Indicator.js";
 import { clsx as $ } from "../../utils/clsx.js";
 import { getValue as q } from "../../utils/getValue.js";
-import '../../assets/Input.css';const H = "_root_e1sis_1", J = "_input_e1sis_1", L = "_small_e1sis_5", O = "_large_e1sis_9", P = "_placeholderIcon_e1sis_72", Q = "_empty_e1sis_164", U = "_decorator_e1sis_169", Y = "_onlight_e1sis_186", e = {
+const H = "_root_e1sis_1", J = "_input_e1sis_1", L = "_small_e1sis_5", O = "_large_e1sis_9", P = "_placeholderIcon_e1sis_72", Q = "_empty_e1sis_164", U = "_decorator_e1sis_169", Y = "_onlight_e1sis_186", e = {
   root: H,
   input: J,
   small: L,

package/dist/components/Input/RichInput.js

@@ -6,7 +6,7 @@ import { useDynamicRef as i } from "../../utils/hooks/useDynamicRef.js";
 import "../../utils/hooks/useGlobalKeyboardEvent.js";
 import "../../utils/hooks/useKeyboardClose.js";
 import "../../index-2hJuj4UN.js";
-import '../../assets/RichInput.css';const L = "_root_1vnop_1", T = "_renderer_1vnop_1", j = "_small_1vnop_5", E = "_large_1vnop_10", z = "_clear_1vnop_157", o = {
+const L = "_root_1vnop_1", T = "_renderer_1vnop_1", j = "_small_1vnop_5", E = "_large_1vnop_10", z = "_clear_1vnop_157", o = {
   root: L,
   renderer: T,
   small: j,

package/dist/components/InputDropzone/InputDropzone.js

@@ -6,7 +6,7 @@ import { IconBig as Fr } from "../IconBig/IconBig.js";
 import { Text as Ue } from "../Text/Text.js";
 import { clsx as Er } from "../../utils/clsx.js";
 import Ye from "./ItemPreview.js";
-import '../../assets/InputDropzone.css';var _r = /* @__PURE__ */ new Map([
+var _r = /* @__PURE__ */ new Map([
   // https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
   ["aac", "audio/aac"],
   ["abw", "application/x-abiword"],

package/dist/components/InputDropzone/ItemPreview.js

@@ -3,7 +3,7 @@ import e from "react";
 import f from "../IconButton/IconButton.js";
 import { Text as d } from "../Text/Text.js";
 import { clsx as _ } from "../../utils/clsx.js";
-import '../../assets/ItemPreview.css';const h = "_root_1v0i1_1", p = "_failed_1v0i1_12", u = "_filePath_1v0i1_15", a = {
+const h = "_root_1v0i1_1", p = "_failed_1v0i1_12", u = "_filePath_1v0i1_15", a = {
   root: h,
   failed: p,
   filePath: u

package/dist/components/Interactive/Interactive.js

@@ -1,7 +1,7 @@
 import { jsx as a } from "react/jsx-runtime";
 import i from "react";
 import { clsx as m } from "../../utils/clsx.js";
-import '../../assets/Interactive.css';const f = "_root_1o2df_1", l = {
+const f = "_root_1o2df_1", l = {
   root: f
 }, h = i.forwardRef(function(o, t) {
   const {

package/dist/components/Island/Island.js

@@ -2,7 +2,7 @@ import { jsx as c } from "react/jsx-runtime";
 import b from "react";
 import { ui as p } from "../ui.js";
 import { clsx as h } from "../../utils/clsx.js";
-import '../../assets/Island.css';const w = "_root_mdgcu_1", R = "_grow_mdgcu_15", t = {
+const w = "_root_mdgcu_1", R = "_grow_mdgcu_15", t = {
   root: w,
   grow: R,
   "no-round-border-top-left": "_no-round-border-top-left_mdgcu_19",

package/dist/components/Layout/Box/Box.js

@@ -3,7 +3,7 @@ import c from "react";
 import { useContextualStyle as W } from "../../Style/Style.js";
 import { ui as a } from "../../ui.js";
 import { clsx as H } from "../../../utils/clsx.js";
-import '../../../assets/Box.css';const z = "_root_1rhjm_1", D = "_grow_1rhjm_16", t = {
+const z = "_root_1rhjm_1", D = "_grow_1rhjm_16", t = {
   root: z,
   "full-width": "_full-width_1rhjm_1",
   "fit-content-width": "_fit-content-width_1rhjm_4",

package/dist/components/Layout/Center/Center.js

@@ -1,7 +1,7 @@
 import { jsx as s } from "react/jsx-runtime";
 import i from "react";
 import { clsx as _ } from "../../../utils/clsx.js";
-import '../../../assets/Center.css';const f = "_root_gr1d9_1", m = "_vertical_gr1d9_4", d = "_horizontal_gr1d9_8", o = {
+const f = "_root_gr1d9_1", m = "_vertical_gr1d9_4", d = "_horizontal_gr1d9_8", o = {
   root: f,
   vertical: m,
   horizontal: d

package/dist/components/Layout/Flex/Flex.js

@@ -3,7 +3,7 @@ import f from "react";
 import { Box as u } from "../Box/Box.js";
 import { clsx as b } from "../../../utils/clsx.js";
 import { FlexRestricter as v } from "./FlexRestricter.js";
-import '../../../assets/Flex.css';const z = "_root_w5him_1", R = "_centered_w5him_11", F = "_vertical_w5him_30", C = "_repell_w5him_36", N = "_wrap_w5him_39", B = "_stretch_w5him_51", E = "_horizontal_w5him_57", e = {
+const z = "_root_w5him_1", R = "_centered_w5him_11", F = "_vertical_w5him_30", C = "_repell_w5him_36", N = "_wrap_w5him_39", B = "_stretch_w5him_51", E = "_horizontal_w5him_57", e = {
   root: z,
   "full-width": "_full-width_w5him_5",
   "full-height": "_full-height_w5him_8",

package/dist/components/Layout/Flex/FlexRestricter.js

@@ -1,7 +1,7 @@
 import { jsx as i } from "react/jsx-runtime";
 import l from "react";
 import { clsx as s } from "../../../utils/clsx.js";
-import '../../../assets/FlexRestricter.css';const n = "_root_1jvko_1", _ = "_vertical_1jvko_4", v = "_horizontal_1jvko_7", o = {
+const n = "_root_1jvko_1", _ = "_vertical_1jvko_4", v = "_horizontal_1jvko_7", o = {
   root: n,
   vertical: _,
   horizontal: v

package/dist/components/Layout/Flex/FlexShowcase.js

@@ -1,7 +1,7 @@
 import { jsx as e, jsxs as c } from "react/jsx-runtime";
 import l from "react";
 import { Flex as s } from "./Flex.js";
-import '../../../assets/FlexShowcase.css';const t = "_box_1118n_1", o = {
+const t = "_box_1118n_1", o = {
   box: t
 };
 function r(a) {