@cfx-dev/ui-components 4.2.21 → 4.2.23

package/dist/components/Link/Link.js

@@ -1,44 +1,62 @@
-import { jsx as _ } from "react/jsx-runtime";
-import c from "react";
-import { clsx as i } from "../../utils/clsx.js";
-const r = "cfxui__Link__unsetAll__58fea", d = "cfxui__Link__root__a29b3", u = "cfxui__Link__unstyled__f020c", f = "cfxui__Link__secondary__1e0f9", s = {
-  unsetAll: r,
-  root: d,
-  unstyled: u,
-  secondary: f
+import { jsx as u } from "react/jsx-runtime";
+import _ from "react";
+import { clsx as d } from "../../utils/clsx.js";
+import { getColor as a } from "../../utils/color.js";
+const f = "cfxui__Link__unsetAll__58fea", m = "cfxui__Link__root__a29b3", y = "cfxui__Link__unstyled__f020c", e = {
+  unsetAll: f,
+  root: m,
+  unstyled: y
 };
-function m(e) {
+function k(t) {
   const {
-    className: a,
+    className: o,
     disabled: n = !1,
-    unstyled: t = !1,
-    theme: o = "default"
-  } = e;
-  return i(s.unsetAll, s.root, s[o], {
-    [s.disabled]: n,
-    [s.unstyled]: t
-  }, a);
+    unstyled: s = !1
+  } = t;
+  return d(e.unsetAll, e.root, {
+    [e.disabled]: n,
+    [e.unstyled]: s
+  }, o);
 }
-function y(e) {
+function x(t) {
   const {
-    className: a,
+    color: o = "tertiary"
+  } = t;
+  return {
+    "--anchor-color": a({ color: o }),
+    "--anchor-decoration-color-hover": a({
+      color: o,
+      opacity: 0.5
+    })
+  };
+}
+function L(t) {
+  const {
+    className: o,
     children: n,
-    disabled: t = !1,
-    ...o
-  } = e, l = m(e);
-  return /* @__PURE__ */ _(
+    disabled: s = !1,
+    ...l
+  } = t, {
+    style: r
+  } = l, c = k(t), i = x(t);
+  return /* @__PURE__ */ u(
     "a",
     {
-      ...o,
-      tabIndex: t ? -1 : 0,
-      "aria-disabled": t,
-      className: l,
+      ...l,
+      style: {
+        ...i,
+        ...r
+      },
+      tabIndex: s ? -1 : 0,
+      "aria-disabled": s,
+      className: c,
       children: n
     }
   );
 }
-const b = c.memo(y);
+const g = _.memo(L);
 export {
-  b as default,
-  m as getLinkClassName
+  g as default,
+  k as getLinkClassName,
+  x as getLinkStyles
 };

package/dist/components/Link/LinkShowcase.js

@@ -1,63 +1,68 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
 import d from "react";
-import { Flex as n } from "../Layout/Flex/Flex.js";
-import { Text as r } from "../Text/Text.js";
-import "../ui.js";
-import l from "./ButtonLink.js";
-import t from "./Link.js";
+import { Flex as l } from "../Layout/Flex/Flex.js";
+import { Text as i } from "../Text/Text.js";
+import "../../utils/ui/ui.js";
+import t from "./ButtonLink.js";
+import n from "./Link.js";
 function c() {
-  return /* @__PURE__ */ i(n, { gap: "large", vertical: !0, children: [
-    /* @__PURE__ */ i(n, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(r, { children: "Theme Default" }),
-      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(t, { href: "/", children: "Link active" }) }),
-      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(t, { href: "/", disabled: !0, children: "Link disable" }) }),
-      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(t, { href: "/", unstyled: !0, children: "Link unstyled" }) })
-    ] }),
-    /* @__PURE__ */ i(n, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(r, { children: "Theme secondary" }),
-      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(t, { href: "/", theme: "secondary", children: "Link active" }) }),
-      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(t, { href: "/", theme: "secondary", disabled: !0, children: "Link disable" }) })
-    ] }),
-    /* @__PURE__ */ i(n, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(r, { children: "ButtonLink - look like link but its button" }),
-      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(l, { children: "Link active" }) }),
-      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(l, { disabled: !0, children: "Link disable" }) })
-    ] }),
-    /* @__PURE__ */ i(n, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(r, { children: "Inside text" }),
-      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ i(r, { size: "large", as: "h2", children: [
+  return /* @__PURE__ */ r(l, { gap: "large", vertical: !0, children: [
+    /* @__PURE__ */ r(l, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(i, { children: "Color Default" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(n, { href: "/", children: "Link active" }) }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(n, { href: "/", disabled: !0, children: "Link disable" }) }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(n, { href: "/", unstyled: !0, children: "Link unstyled" }) })
+    ] }),
+    /* @__PURE__ */ r(l, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(i, { children: "Color secondary" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(n, { href: "/", color: "secondary", children: "Link active" }) }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(n, { href: "/", color: "secondary", disabled: !0, children: "Link disable" }) })
+    ] }),
+    /* @__PURE__ */ r(l, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(i, { children: "Color red" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(n, { href: "/", color: "red", children: "Link active" }) }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(n, { href: "/", color: "red", disabled: !0, children: "Link disable" }) })
+    ] }),
+    /* @__PURE__ */ r(l, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(i, { children: "ButtonLink - look like link but its button" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(t, { children: "Link active" }) }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(t, { disabled: !0, children: "Link disable" }) })
+    ] }),
+    /* @__PURE__ */ r(l, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(i, { children: "Inside text" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ r(i, { size: "large", as: "h2", children: [
         "Out of link text. ",
-        /* @__PURE__ */ e(t, { href: "/", children: "Link text" })
+        /* @__PURE__ */ e(n, { href: "/", children: "Link text" })
       ] }) })
     ] }),
-    /* @__PURE__ */ i(n, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(r, { children: "Inside typographic text" }),
-      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ i(r, { size: "large", as: "h2", typographic: !0, children: [
+    /* @__PURE__ */ r(l, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(i, { children: "Inside typographic text" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ r(i, { size: "large", as: "h2", typographic: !0, children: [
         "Out of link text. ",
-        /* @__PURE__ */ e(t, { href: "/", children: "Link text" })
+        /* @__PURE__ */ e(n, { href: "/", children: "Link text" })
       ] }) })
     ] }),
-    /* @__PURE__ */ i(n, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(r, { children: "Row a tag" }),
+    /* @__PURE__ */ r(l, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(i, { children: "Row a tag" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e("a", { href: "/", children: "Link text" }) })
     ] }),
-    /* @__PURE__ */ i(n, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(r, { children: "Row a in text" }),
-      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ i(r, { size: "large", as: "h2", children: [
+    /* @__PURE__ */ r(l, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(i, { children: "Row a in text" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ r(i, { size: "large", as: "h2", children: [
         "Out of link text. ",
         /* @__PURE__ */ e("a", { href: "/", children: "Link text" })
       ] }) })
     ] }),
-    /* @__PURE__ */ i(n, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(r, { children: "Row a in typographic text" }),
-      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ i(r, { size: "large", as: "h2", typographic: !0, children: [
+    /* @__PURE__ */ r(l, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(i, { children: "Row a in typographic text" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ r(i, { size: "large", as: "h2", typographic: !0, children: [
         "Out of link text. ",
         /* @__PURE__ */ e("a", { href: "/", children: "Link text" })
       ] }) })
     ] })
   ] });
 }
-const f = d.memo(c);
+const k = d.memo(c);
 export {
-  f as default
+  k as default
 };

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

@@ -1,3 +1,3 @@
-export { default as Link, getLinkClassName } from './Link';
+export { default as Link, getLinkClassName, getLinkStyles, } from './Link';
 export { default as ButtonLink } from './ButtonLink';
 export type { LinkBaseProps, LinkProps } from './Link';

package/dist/components/Link/index.js

@@ -1,7 +1,8 @@
-import { default as e, getLinkClassName as o } from "./Link.js";
-import { default as n } from "./ButtonLink.js";
+import { default as a, getLinkClassName as n, getLinkStyles as o } from "./Link.js";
+import { default as f } from "./ButtonLink.js";
 export {
-  n as ButtonLink,
-  e as Link,
-  o as getLinkClassName
+  f as ButtonLink,
+  a as Link,
+  n as getLinkClassName,
+  o as getLinkStyles
 };

package/dist/components/Logos/LogosShowcase.js

@@ -4,7 +4,7 @@ import { Island as c } from "../Island/Island.js";
 import { Flex as m } from "../Layout/Flex/Flex.js";
 import { Pad as l } from "../Layout/Pad/Pad.js";
 import { Text as a } from "../Text/Text.js";
-import "../ui.js";
+import "../../utils/ui/ui.js";
 import { Logos as p } from "./index.js";
 function h() {
   const s = Object.entries(p).map(([r, i]) => ({

package/dist/components/Modal/Modal.js

@@ -6,7 +6,7 @@ import "../Button/LinkButton.js";
 import x from "../IconButton/IconButton.js";
 import { Overlay as t } from "../Overlay/Overlay.js";
 import { Text as m } from "../Text/Text.js";
-import "../ui.js";
+import "../../utils/ui/ui.js";
 import { clsx as s } from "../../utils/clsx.js";
 import "../../utils/hooks/useGlobalKeyboardEvent.js";
 import { useKeyboardClose as y } from "../../utils/hooks/useKeyboardClose.js";

package/dist/components/Select/Select.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { InputSize } from '../Input';
-import { ResponsiveValueType } from '../ui';
+import { ResponsiveValueType } from '../../utils/ui';
 
 export interface SelectOption<T> {
     value: T;

package/dist/components/Select/Select.js

@@ -11,8 +11,8 @@ import { u as Bn } from "../../index-BZPx6jYI.js";
 import { f as ht, _ as ce, c as Fn } from "../../tslib.es6-CBKHJX9H.js";
 import { c as Wn, u as zn } from "../../medium-BA3EQDZW.js";
 import { Icon as Vn } from "../Icon/Icon.js";
-import { ui as Hn } from "../ui.js";
 import { clsx as Me } from "../../utils/clsx.js";
+import { ui as Hn } from "../../utils/ui/ui.js";
 var vt = function(e) {
   var t = e.sideCar, n = ht(e, ["sideCar"]);
   if (!t)

package/dist/components/Select/SelectShowcase.js

@@ -2,7 +2,7 @@ import { jsxs as l, jsx as e } from "react/jsx-runtime";
 import o from "react";
 import { Flex as a } from "../Layout/Flex/Flex.js";
 import { Text as i } from "../Text/Text.js";
-import "../ui.js";
+import "../../utils/ui/ui.js";
 import { Select as n } from "./Select.js";
 const t = [
   {

package/dist/components/Separator/Separator.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { MPProps, OffsetType } from '../ui';
+import { MPProps, OffsetType } from '../../utils/ui';
 
 export interface SeparatorProps extends MPProps {
     thin?: boolean;

package/dist/components/Separator/Separator.js

@@ -1,7 +1,7 @@
 import { jsxs as n, jsx as t } from "react/jsx-runtime";
 import l from "react";
-import { ui as s } from "../ui.js";
 import { clsx as x } from "../../utils/clsx.js";
+import { ui as s } from "../../utils/ui/ui.js";
 const m = "cfxui__Separator__root__3aea3", u = "cfxui__Separator__separator__5dbbd", d = "cfxui__Separator__content__7ade9", S = "cfxui__Separator__thin__628fd", h = "cfxui__Separator__vertical__8bd90", v = "cfxui__Separator__text__d02da", a = {
   root: m,
   "separator-offset-none": "cfxui__Separator__separator-offset-none__f2b70",

package/dist/components/Shroud/Shroud.js

@@ -1,18 +1,18 @@
 import { jsx as t, jsxs as h } from "react/jsx-runtime";
 import r from "react";
 import { TITLE_OUTLET_ID as _ } from "../Title/Title.js";
-import { ui as p } from "../ui.js";
 import "../../utils/hooks/useGlobalKeyboardEvent.js";
 import "../../utils/hooks/useKeyboardClose.js";
-import { useWindowResize as b } from "../../utils/hooks/useWindowResize.js";
-import { useOutlet as x } from "../../utils/hooks/useOutlet.js";
+import { useWindowResize as p } from "../../utils/hooks/useWindowResize.js";
+import { useOutlet as b } from "../../utils/hooks/useOutlet.js";
+import { ui as x } from "../../utils/ui/ui.js";
 const g = "cfxui__Shroud__root__99944", v = "cfxui__Shroud__tile__db55f", e = {
   root: g,
   tile: v
 }, P = r.forwardRef(function(l, n) {
   const {
     forRef: s
-  } = l, [u, d] = r.useState({}), f = x(_, "before"), i = r.useCallback(() => {
+  } = l, [u, d] = r.useState({}), f = b(_, "before"), i = r.useCallback(() => {
     if (!s.current)
       return;
     const o = s.current.getBoundingClientRect(), m = {
@@ -26,13 +26,13 @@ const g = "cfxui__Shroud__root__99944", v = "cfxui__Shroud__tile__db55f", e = {
     d(
       Object.fromEntries(
         Object.entries(m).flatMap(([a, c]) => [
-          [`--${a}`, p.px(c)],
+          [`--${a}`, x.px(c)],
           [`--${a}-raw`, c]
         ])
       )
     );
   }, []);
-  return r.useEffect(i, []), b(i), /* @__PURE__ */ t(f, { children: /* @__PURE__ */ h("div", { ref: n, className: e.root, style: u, children: [
+  return r.useEffect(i, []), p(i), /* @__PURE__ */ t(f, { children: /* @__PURE__ */ h("div", { ref: n, className: e.root, style: u, children: [
     /* @__PURE__ */ t("div", { className: e.tile, "data-top": !0 }),
     /* @__PURE__ */ t("div", { className: e.tile, "data-left": !0 }),
     /* @__PURE__ */ t("div", { className: e.tile, "data-right": !0 }),

package/dist/components/Skeleton/Skeleton.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 import { BoxProps } from '../Layout/Box/Box';
 import { ResponsiveTextSize } from '../Text';
-import { BorderRadiusType, ResponsiveValueType } from '../ui';
+import { BorderRadiusType, ResponsiveValueType } from '../../utils/ui';
 
 export interface SkeletonProps extends BoxProps {
     borderRadius?: BorderRadiusType;

package/dist/components/Skeleton/Skeleton.js

@@ -2,7 +2,7 @@ import { jsx as _ } from "react/jsx-runtime";
 import r from "react";
 import { Box as f } from "../Layout/Box/Box.js";
 import { textSizeResponsiveValueFormatter as u } from "../Text/Text.js";
-import { ui as s } from "../ui.js";
+import { ui as s } from "../../utils/ui/ui.js";
 import { clsx as d } from "../../utils/clsx.js";
 const p = "cfxui__Skeleton__skeleton__d700e", h = "cfxui__Skeleton__shimmer__d72f5", k = {
   skeleton: p,

package/dist/components/Skeleton/SkeletonShowcase.js

@@ -5,7 +5,7 @@ import { Button as p } from "../Button/Button.js";
 import "../Button/LinkButton.js";
 import { Flex as m } from "../Layout/Flex/Flex.js";
 import { Text as r } from "../Text/Text.js";
-import "../ui.js";
+import "../../utils/ui/ui.js";
 import c from "./Skeleton.js";
 import { Table as x } from "../Table/Table.js";
 const g = [

package/dist/components/Slider/SliderShowcase.js

@@ -2,7 +2,7 @@ import { jsxs as r, jsx as e } from "react/jsx-runtime";
 import i from "react";
 import { Flex as a } from "../Layout/Flex/Flex.js";
 import { Text as t } from "../Text/Text.js";
-import "../ui.js";
+import "../../utils/ui/ui.js";
 import { Slider as l } from "./Slider.js";
 const c = "cfxui__SliderShowcase__track__9ceda", o = {
   track: c

package/dist/components/Spacer/Spacer.d.ts

@@ -1,4 +1,4 @@
-import { OffsetType } from '../ui';
+import { OffsetType } from '../../utils/ui';
 
 export interface SpacerProps {
     size?: OffsetType;

package/dist/components/Table/Table.js

@@ -3,7 +3,7 @@ import l, { useState as k } from "react";
 import I from "../Checkbox/Checkbox.js";
 import $ from "../IconButton/IconButton.js";
 import { Text as S } from "../Text/Text.js";
-import "../ui.js";
+import "../../utils/ui/ui.js";
 import { clsx as u } from "../../utils/clsx.js";
 const j = "cfxui__Table__tableIcon__f8e96", z = "cfxui__Table__iconButton__ac6da", A = "cfxui__Table__root__591ed", E = "cfxui__Table__radio__70dd7", O = "cfxui__Table__radioContent__35cef", g = "cfxui__Table__pointer__7b6a4", F = "cfxui__Table__selectedRow__f7130", H = "cfxui__Table__headerText__02722", V = "cfxui__Table__headerContent__f0e66", q = "cfxui__Table__hidden__e4ac6", c = {
   tableIcon: j,

package/dist/components/Table/TableShowcase.js

@@ -6,7 +6,7 @@ import "../Interactive/Interactive.js";
 import { Scrollable as c } from "../Layout/Scrollable/Scrollable.js";
 import "../Layout/Scrollable/VirtualScrollable.js";
 import { Text as r } from "../Text/Text.js";
-import "../ui.js";
+import "../../utils/ui/ui.js";
 import { Table as o } from "./Table.js";
 const i = [
   [

package/dist/components/Tabular/Tabular.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { ResponsiveValueType } from '../ui';
+import { ResponsiveValueType } from '../../utils/ui';
 
 export type TabularTheme = 'light' | 'dark';
 export type TabularRole = 'tablist' | 'navigation';

package/dist/components/Tabular/Tabular.js

@@ -1,8 +1,8 @@
 import { jsx as m, jsxs as h } from "react/jsx-runtime";
 import d, { createElement as N } from "react";
 import { Dot as p } from "../Dot/Dot.js";
-import { ui as C } from "../ui.js";
 import { clsx as n } from "../../utils/clsx.js";
+import { ui as C } from "../../utils/ui/ui.js";
 const v = "cfxui__Tabular__reset__b1dbc", k = "cfxui__Tabular__item__98cc3", I = "cfxui__Tabular__root__0ff05", R = "cfxui__Tabular__active__1ae95", y = "cfxui__Tabular__hasNotification__c372f", j = "cfxui__Tabular__content__3a95a", l = {
   reset: v,
   "tabular-size-initial-large": "cfxui__Tabular__tabular-size-initial-large__9451f",

package/dist/components/Tabular/TabularShowcase.js

@@ -2,7 +2,7 @@ import { jsxs as t, jsx as e } from "react/jsx-runtime";
 import o from "react";
 import { Flex as i } from "../Layout/Flex/Flex.js";
 import { Text as l } from "../Text/Text.js";
-import "../ui.js";
+import "../../utils/ui/ui.js";
 import { Tabular as m } from "./Tabular.js";
 const c = [
   {

package/dist/components/Text/Text.js

@@ -1,8 +1,9 @@
-import { jsx as l } from "react/jsx-runtime";
-import f from "react";
-import { ui as t, TextSizeEnum as _ } from "../ui.js";
+import { jsx as f } from "react/jsx-runtime";
+import l from "react";
 import { clsx as w } from "../../utils/clsx.js";
 import { getColor as A } from "../../utils/color.js";
+import { ui as t } from "../../utils/ui/ui.js";
+import { TextSizeEnum as _ } from "../../utils/ui/ui.types.js";
 const E = "cfxui__Text__root__2fe11", O = "cfxui__Text__centered__4d7bd", F = "cfxui__Text__underlined__5860e", H = "cfxui__Text__strikethrough__e3ee3", N = "cfxui__Text__truncated__417f4", $ = "cfxui__Text__typographic__d8155", B = "cfxui__Text__block__cb1b6", n = {
   root: E,
   centered: O,
@@ -27,14 +28,14 @@ const E = "cfxui__Text__root__2fe11", O = "cfxui__Text__centered__4d7bd", F = "c
 }, L = (e, o = 1) => {
   const r = typeof e == "string" && D[e];
   return typeof r == "string" || typeof r == "number" ? r : o;
-}, M = "primary", V = f.forwardRef(function(o, r) {
+}, M = "primary", V = l.forwardRef(function(o, r) {
   const {
     family: c,
     size: i = "normal",
     weight: u = "normal",
-    letterSpacing: h = "normal",
+    letterSpacing: p = "normal",
     as: s = "span",
-    centered: p = !1,
+    centered: h = !1,
     truncated: m = !1,
     typographic: g = !1,
     uppercase: d = !1,
@@ -51,7 +52,7 @@ const E = "cfxui__Text__root__2fe11", O = "cfxui__Text__centered__4d7bd", F = "c
     t.getResponsiveClassnames("line-height", i),
     {
       [n.block]: S,
-      [n.centered]: p,
+      [n.centered]: h,
       [n.truncated]: m,
       [n.underlined]: y,
       [n.strikethrough]: T,
@@ -66,21 +67,21 @@ const E = "cfxui__Text__root__2fe11", O = "cfxui__Text__centered__4d7bd", F = "c
     color: v,
     fontFamily: `var(--font-family-${z})`,
     lineHeight: `var(--line-height-${i})`,
-    letterSpacing: `var(--letter-spacing-${h})`,
+    letterSpacing: `var(--letter-spacing-${p})`,
     fontWeight: `var(--font-weight-${u})`,
     ...t.getResponsiveStyles("font-size", i, P),
     ...t.getResponsiveStyles("line-height", i, q),
     ...R
   };
-  return d && (a.textTransform = "uppercase"), /* @__PURE__ */ l(s, { ref: r, dir: "auto", className: C, style: a, children: b });
-}), J = f.forwardRef(function(o, r) {
-  return /* @__PURE__ */ l(V, { ref: r, ...o, as: "div" });
+  return d && (a.textTransform = "uppercase"), /* @__PURE__ */ f(s, { ref: r, dir: "auto", className: C, style: a, children: b });
+}), K = l.forwardRef(function(o, r) {
+  return /* @__PURE__ */ f(V, { ref: r, ...o, as: "div" });
 });
 export {
   M as DEFAULT_TEXT_COLOR,
   D as TEXT_OPACITY_MAP,
   V as Text,
-  J as TextBlock,
+  K as TextBlock,
   L as getTextOpacity,
   q as lineHeightResponsiveValueFormatter,
   P as textSizeResponsiveValueFormatter

package/dist/components/Text/Text.types.d.ts

@@ -1,5 +1,5 @@
-import { ResponsiveValueType, TextSize as RawTextSize } from '../ui';
 import { GetColorProps } from '../../utils/color';
+import { ResponsiveValueType, TextSize as RawTextSize } from '../../utils/ui';
 
 export type TextSize = RawTextSize;
 export type ResponsiveTextSize = TextSize | string | number;

package/dist/components/Text/TextShowcase.js

@@ -5,17 +5,14 @@ import { Separator as d } from "../Separator/Separator.js";
 const h = "cfxui__TextShowcase__root__a3632", _ = {
   root: h
 }, f = "The quick brown fox jumps over the lazy dog.", T = "How vexingly quick daft zebras jump.";
-function u() {
+function m() {
   return /* @__PURE__ */ t(e, { children: [
     f,
     /* @__PURE__ */ o("br", {}),
     T
   ] });
 }
-const x = {
-  color: "secondary"
-};
-function m(a) {
+function u(a) {
   const {
     items: l
   } = a;
@@ -23,24 +20,24 @@ function m(a) {
     /* @__PURE__ */ t("div", { children: [
       /* @__PURE__ */ o(c, { ...r.textProps, children: r.title }),
       /* @__PURE__ */ o("br", {}),
-      /* @__PURE__ */ t(c, { ...x, children: [
-        r.descriptions.map((s, n) => /* @__PURE__ */ t(e, { children: [
-          s,
-          n < r.descriptions.length - 1 && /* @__PURE__ */ o("br", {})
+      /* @__PURE__ */ t(c, { color: "secondary", children: [
+        r.descriptions.map((n, s) => /* @__PURE__ */ t(e, { children: [
+          n,
+          s < r.descriptions.length - 1 && /* @__PURE__ */ o("br", {})
         ] })),
-        Object.entries(r.textProps).map(([s, n], i) => /* @__PURE__ */ t(e, { children: [
+        Object.entries(r.textProps).map(([n, s], i) => /* @__PURE__ */ t(e, { children: [
           r.descriptions.length > 0 && i === 0 && /* @__PURE__ */ o(d, { content: "props", offset: "large" }),
-          s,
+          n,
           ": ",
-          n.toString(),
+          s.toString(),
           i < r.descriptions.length - 1 && /* @__PURE__ */ o("br", {})
         ] }))
       ] })
     ] }),
-    /* @__PURE__ */ o(c, { ...r.textProps, children: /* @__PURE__ */ o(u, {}) })
+    /* @__PURE__ */ o(c, { ...r.textProps, children: /* @__PURE__ */ o(m, {}) })
   ] })) });
 }
-const E = p.memo(m);
+const w = p.memo(u);
 export {
-  E as default
+  w as default
 };

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

@@ -1,3 +1,3 @@
 export { Text, TextBlock, TEXT_OPACITY_MAP, DEFAULT_TEXT_COLOR, getTextOpacity, textSizeResponsiveValueFormatter, } from './Text';
-export { TextSizeEnum } from '../ui';
+export { TextSizeEnum } from '../../utils/ui';
 export type { TextSize, TextWeight, TextOpacity, TextAs, TextLetterSpacing, TextProps, TextColorProps, ResponsiveTextSize, TextFamaly, } from './Text.types';

package/dist/components/Text/index.js

@@ -1,11 +1,12 @@
-import { DEFAULT_TEXT_COLOR as T, TEXT_OPACITY_MAP as o, Text as x, TextBlock as r, getTextOpacity as i, textSizeResponsiveValueFormatter as m } from "./Text.js";
-import { TextSizeEnum as E } from "../ui.js";
+import { DEFAULT_TEXT_COLOR as o, TEXT_OPACITY_MAP as r, Text as x, TextBlock as i, getTextOpacity as m, textSizeResponsiveValueFormatter as p } from "./Text.js";
+import "../../utils/ui/ui.js";
+import { TextSizeEnum as O } from "../../utils/ui/ui.types.js";
 export {
-  T as DEFAULT_TEXT_COLOR,
-  o as TEXT_OPACITY_MAP,
+  o as DEFAULT_TEXT_COLOR,
+  r as TEXT_OPACITY_MAP,
   x as Text,
-  r as TextBlock,
-  E as TextSizeEnum,
-  i as getTextOpacity,
-  m as textSizeResponsiveValueFormatter
+  i as TextBlock,
+  O as TextSizeEnum,
+  m as getTextOpacity,
+  p as textSizeResponsiveValueFormatter
 };

package/dist/components/Title/TitleShowcase.js

@@ -2,7 +2,7 @@ import { jsx as e, jsxs as t } from "react/jsx-runtime";
 import i from "react";
 import { Flex as r } from "../Layout/Flex/Flex.js";
 import { Text as o } from "../Text/Text.js";
-import "../ui.js";
+import "../../utils/ui/ui.js";
 import { Title as l } from "./Title.js";
 function m() {
   return /* @__PURE__ */ e(r, { gap: "large", vertical: !0, children: /* @__PURE__ */ t(r, { gap: "normal", vertical: !0, children: [

package/dist/components/ToggleGroup/ToggleGroupShowcase.js

@@ -2,7 +2,7 @@ import { jsxs as l, jsx as e } from "react/jsx-runtime";
 import u from "react";
 import { Flex as r } from "../Layout/Flex/Flex.js";
 import { Text as a } from "../Text/Text.js";
-import "../ui.js";
+import "../../utils/ui/ui.js";
 import { ToggleGroup as i } from "./ToggleGroup.js";
 const n = [
   {