@cfx-dev/ui-components 4.2.20 → 4.2.22

package/dist/components/DropdownSelect/DropdownSelectShowcase.js

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

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

@@ -1 +1,2 @@
 export { DropdownSelect } from './DropdownSelect';
+export type { DropdownSelectProps } from './DropdownSelect';

package/dist/components/Flyout/Flyout.d.ts

@@ -1,9 +1,10 @@
 import { default as React } from 'react';
 
 export declare const FLYOUT_OUTLET_ID = "flyout-outlet";
+export type FlyoutSize = 'normal' | 'small' | 'xsmall';
 export interface FlyoutProps {
     disabled?: boolean;
-    size?: 'normal' | 'small' | 'xsmall';
+    size?: FlyoutSize;
     onClose?(): void;
     children?: React.ReactNode;
     holderClassName?: string;

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

@@ -0,0 +1,2 @@
+export { FLYOUT_OUTLET_ID, Flyout } from './Flyout';
+export type { FlyoutProps, FlyoutSize } from './Flyout';

package/dist/components/Flyout/index.js

@@ -0,0 +1,5 @@
+import { FLYOUT_OUTLET_ID as r, Flyout as t } from "./Flyout.js";
+export {
+  r as FLYOUT_OUTLET_ID,
+  t as Flyout
+};

package/dist/components/Icon/Icon.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 import { IconName } from '../Icons';
 import { TextColorProps, ResponsiveTextSize } from '../Text';
-import { ResponsiveValueType } from '../ui';
+import { ResponsiveValueType } from '../../utils/ui';
 
 export type IconSize = ResponsiveTextSize;
 export interface IconProps extends TextColorProps {

package/dist/components/Icon/Icon.js

@@ -7,7 +7,7 @@ import "../Icons/cfx-icons-big/Upload.js";
 import "../Icons/cfx-icons-big/Warning.js";
 import "../Icons/cfx-icons-big/Confirm.js";
 import { textSizeResponsiveValueFormatter as c, getTextOpacity as u } from "../Text/Text.js";
-import { ui as t } from "../ui.js";
+import { ui as t } from "../../utils/ui/ui.js";
 import { clsx as a } from "../../utils/clsx.js";
 import { getColor as h } from "../../utils/color.js";
 const C = "cfxui__Icon__root__6c380", d = {

package/dist/components/IconBig/IconBig.js

@@ -47,7 +47,7 @@ import "../Icons/cfx-icons/UpvotesBurst.js";
 import "../Icons/cfx-icons/UpvotesRecurring.js";
 import { I as f } from "../../cfxIconsBig-BLJjMT-Y.js";
 import { getTextOpacity as g } from "../Text/Text.js";
-import "../ui.js";
+import "../../utils/ui/ui.js";
 import { clsx as I } from "../../utils/clsx.js";
 import { getColor as x } from "../../utils/color.js";
 const z = "cfxui__IconBig__root__f259a", i = {

package/dist/components/IconButton/IconButton.d.ts

@@ -1,9 +1,8 @@
 import { default as React } from 'react';
-import { IconSize } from '../Icon';
-import { IconName } from '../Icons';
+import { IconSize, IconName } from '../Icon';
 import { TextColorProps } from '../Text';
 
-type IconButtonAreaSize = 'small' | 'medium' | 'large';
+export type IconButtonAreaSize = 'small' | 'medium' | 'large';
 export interface IconButtonProps extends TextColorProps {
     name: IconName;
     size?: IconSize;

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

@@ -1,2 +1,2 @@
 export { default as IconButton } from './IconButton';
-export type { IconButtonProps } from './IconButton';
+export type { IconButtonProps, IconButtonAreaSize } from './IconButton';

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

@@ -0,0 +1,2 @@
+export { Indicator } from './Indicator';
+export type { IndicatorProps } from './Indicator';

package/dist/components/Indicator/index.js

@@ -0,0 +1,4 @@
+import { Indicator as t } from "./Indicator.js";
+export {
+  t as Indicator
+};

package/dist/components/InfoPanel/InfoPanelShowcase.js

@@ -2,7 +2,7 @@ import { jsxs as e, jsx as r } from "react/jsx-runtime";
 import a from "react";
 import { Flex as n } from "../Layout/Flex/Flex.js";
 import { Text as i } from "../Text/Text.js";
-import "../ui.js";
+import "../../utils/ui/ui.js";
 import { LOREM_IPSUM as t } from "../../utils/loremipsum.js";
 import l from "./InfoPanel.js";
 function c() {

package/dist/components/Input/Input.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { IconName } from '../Icon';
-import { ResponsiveValueType } from '../ui';
+import { ResponsiveValueType } from '../../utils/ui';
 
 export type InputSize = 'small' | 'normal' | 'large';
 export type InputTheme = 'default' | 'onlight';

package/dist/components/Input/Input.js

@@ -3,9 +3,9 @@ import n from "react";
 import { Icon as T } from "../Icon/Icon.js";
 import W from "../IconButton/IconButton.js";
 import { Indicator as X } from "../Indicator/Indicator.js";
-import { ui as $ } from "../ui.js";
-import { clsx as q } from "../../utils/clsx.js";
-import { getValue as H } from "../../utils/getValue.js";
+import { clsx as $ } from "../../utils/clsx.js";
+import { getValue as q } from "../../utils/getValue.js";
+import { ui as H } from "../../utils/ui/ui.js";
 const J = "cfxui__Input__root__6392b", L = "cfxui__Input__input__07830", O = "cfxui__Input__empty__3b36a", P = "cfxui__Input__placeholderIcon__4d079", Q = "cfxui__Input__decorator__3b81f", U = "cfxui__Input__small__c1513", Y = "cfxui__Input__large__92d72", Z = "cfxui__Input__onlight__7d0b7", e = {
   root: J,
   "full-width": "cfxui__Input__full-width__587b3",
@@ -40,7 +40,7 @@ function ee(x) {
     hasValue: c,
     onCleare: a
   } = x;
-  return s ? /* @__PURE__ */ i("div", { className: e.decorator, children: /* @__PURE__ */ i(X, {}) }) : t ? /* @__PURE__ */ i("div", { className: e.decorator, children: H(t) }) : o === "search" && c ? /* @__PURE__ */ i("div", { className: e.decorator, children: /* @__PURE__ */ i(W, { size: "xsmall", areaSize: "large", name: "Close", onClick: a }) }) : null;
+  return s ? /* @__PURE__ */ i("div", { className: e.decorator, children: /* @__PURE__ */ i(X, {}) }) : t ? /* @__PURE__ */ i("div", { className: e.decorator, children: q(t) }) : o === "search" && c ? /* @__PURE__ */ i("div", { className: e.decorator, children: /* @__PURE__ */ i(W, { size: "xsmall", areaSize: "large", name: "Close", onClick: a }) }) : null;
 }
 const se = n.forwardRef(function(t, s) {
   const {
@@ -82,11 +82,11 @@ const se = n.forwardRef(function(t, s) {
     d && d(l), p && l.key === "Enter" && p();
   }, [d, p]), M = n.useCallback(() => {
     u("");
-  }, [u]), j = q(
+  }, [u]), j = $(
     e.root,
     e[E],
     v,
-    $.getResponsiveFlatClassnames("input-size", w).map((l) => e[l]),
+    H.getResponsiveFlatClassnames("input-size", w).map((l) => e[l]),
     {
       [e["full-width"]]: c,
       [e["backdrop-blur"]]: V,

package/dist/components/Input/InputShowcase.js

@@ -2,7 +2,7 @@ import { jsxs as l, jsx as e } from "react/jsx-runtime";
 import i 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 c from "./Input.js";
 const m = /^\+?[0-9]*$/;
 function s() {

package/dist/components/Input/RichInput.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { ResponsiveValueType } from '../ui';
+import { ResponsiveValueType } from '../../utils/ui';
 import { InputSize } from './Input';
 
 export interface RichInputProps {

package/dist/components/Input/RichInput.js

@@ -1,12 +1,12 @@
 import { jsxs as w, jsx as l } from "react/jsx-runtime";
 import i from "react";
 import { Button as y } from "../Button/Button.js";
-import { ui as B } from "../ui.js";
-import { clsx as D } from "../../utils/clsx.js";
+import { clsx as B } from "../../utils/clsx.js";
 import { useDynamicRef as _ } from "../../utils/hooks/useDynamicRef.js";
 import "../../utils/hooks/useGlobalKeyboardEvent.js";
 import "../../utils/hooks/useKeyboardClose.js";
 import "../../index-2hJuj4UN.js";
+import { ui as D } from "../../utils/ui/ui.js";
 const L = "cfxui__RichInput__root__57e6e", T = "cfxui__RichInput__renderer__8b298", j = "cfxui__RichInput__clear__5538b", c = {
   root: L,
   renderer: T,
@@ -51,10 +51,10 @@ const L = "cfxui__RichInput__root__57e6e", T = "cfxui__RichInput__renderer__8b29
     s.current(t.selectionStart, t.selectionEnd, t.selectionDirection);
   }, []), v = i.useCallback((e) => {
     r.current && (r.current.scrollTop = e.target.scrollTop, r.current.scrollLeft = e.target.scrollLeft);
-  }, []), F = D(
+  }, []), F = B(
     c.root,
     R,
-    B.getResponsiveFlatClassnames("richinput-size", p).map((e) => c[e])
+    D.getResponsiveFlatClassnames("richinput-size", p).map((e) => c[e])
   );
   return /* @__PURE__ */ w("div", { ref: m, className: F, children: [
     /* @__PURE__ */ l(

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

@@ -1,4 +1,4 @@
 export { default as Input } from './Input';
 export { default as RichInput } from './RichInput';
-export type { InputSize, InputProps } from './Input';
+export type { InputSize, InputProps, InputTheme, } from './Input';
 export type { RichInputProps } from './RichInput';

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

@@ -1,4 +1,4 @@
 export { default as InputDropzone } from './InputDropzone';
-export type { FileWithPath, InputDropzoneProps } from './InputDropzone';
-export { default as ItemPreview } from './ItemPreview';
-export type { ItemPreviewProps } from './ItemPreview';
+export type { FileWithPath as DropzoneFileWithPath, InputDropzoneProps } from './InputDropzone';
+export { default as DropzoneItemPreview } from './ItemPreview';
+export type { ItemPreviewProps as DropzoneItemPreviewProps } from './ItemPreview';

package/dist/components/InputDropzone/index.js

@@ -1,6 +1,6 @@
 import { default as r } from "./InputDropzone.js";
-import { default as a } from "./ItemPreview.js";
+import { default as p } from "./ItemPreview.js";
 export {
-  r as InputDropzone,
-  a as ItemPreview
+  p as DropzoneItemPreview,
+  r as InputDropzone
 };

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

@@ -0,0 +1,2 @@
+export { Interactive } from './Interactive';
+export type { InteractiveProps } from './Interactive';

package/dist/components/Interactive/index.js

@@ -0,0 +1,4 @@
+import { Interactive as t } from "./Interactive.js";
+export {
+  t as Interactive
+};

package/dist/components/Island/Island.js

@@ -1,7 +1,7 @@
 import { jsx as b } from "react/jsx-runtime";
 import g from "react";
-import { ui as p } from "../ui.js";
-import { clsx as h } from "../../utils/clsx.js";
+import { clsx as p } from "../../utils/clsx.js";
+import { ui as h } from "../../utils/ui/ui.js";
 const n = "cfxui__Island__root__24fd9", s = "cfxui__Island__grow__c1786", t = {
   root: n,
   grow: s,
@@ -18,7 +18,7 @@ const L = g.forwardRef(function(i, d) {
     straightCorner: r = 0,
     children: u,
     className: e
-  } = i, c = h(t.root, e, {
+  } = i, c = p(t.root, e, {
     [t.grow]: m,
     [t["no-round-border-top-left"]]: r & 1,
     [t["no-round-border-top-right"]]: r & 2,
@@ -26,7 +26,7 @@ const L = g.forwardRef(function(i, d) {
     [t["no-round-border-bottom-right"]]: r & 8
     /* BottomRight */
   }), f = {};
-  return _ > 0 && (f.width = p.q(_)), /* @__PURE__ */ b("div", { className: c, style: f, ref: d, children: u });
+  return _ > 0 && (f.width = h.q(_)), /* @__PURE__ */ b("div", { className: c, style: f, ref: d, children: u });
 });
 export {
   L as Island,

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

@@ -0,0 +1,2 @@
+export { Island, IslandCorner } from './Island';
+export type { IslandProps } from './Island';

package/dist/components/Island/index.js

@@ -0,0 +1,5 @@
+import { Island as o, IslandCorner as a } from "./Island.js";
+export {
+  o as Island,
+  a as IslandCorner
+};

package/dist/components/Layout/Box/Box.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { MPProps, ResponsiveValueType } from '../../ui';
+import { MPProps, ResponsiveValueType } from '../../../utils/ui';
 
 export interface BoxProps extends MPProps {
     noOverflow?: boolean;
@@ -15,4 +15,5 @@ export interface BoxProps extends MPProps {
     className?: string;
     style?: React.CSSProperties;
 }
+export declare const flexPropFormater: (val: string) => string;
 export declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,8 +1,8 @@
 import { jsx as R } from "react/jsx-runtime";
 import c from "react";
 import { useContextualStyle as S } from "../../Style/Style.js";
-import { ui as o } from "../../ui.js";
 import { clsx as C } from "../../../utils/clsx.js";
+import { ui as o } from "../../../utils/ui/ui.js";
 const k = "cfxui__Box__root__299ae", M = "cfxui__Box__grow__7ee8d", t = {
   root: k,
   "full-width": "cfxui__Box__full-width__2b253",
@@ -65,5 +65,6 @@ const k = "cfxui__Box__root__299ae", M = "cfxui__Box__grow__7ee8d", t = {
   );
 });
 export {
-  F as Box
+  F as Box,
+  N as flexPropFormater
 };

package/dist/components/Layout/Box/index.d.ts

@@ -0,0 +1,2 @@
+export { Box, flexPropFormater } from './Box';
+export type { BoxProps } from './Box';

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

@@ -0,0 +1,5 @@
+import { Box as e, flexPropFormater as x } from "./Box.js";
+export {
+  e as Box,
+  x as flexPropFormater
+};

package/dist/components/Layout/Center/index.d.ts

@@ -0,0 +1,2 @@
+export { Center } from './Center';
+export type { CenterProps } from './Center';

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

@@ -0,0 +1,4 @@
+import { Center as o } from "./Center.js";
+export {
+  o as Center
+};

package/dist/components/Layout/Flex/Flex.d.ts

@@ -1,10 +1,10 @@
 import { default as React } from 'react';
 import { BoxProps } from '../Box/Box';
-import { ResponsiveOffsetType, ResponsiveValueType } from '../../ui';
-import { FlexAlignItemsType, FlexDirectionType, FlexJustifyContentType, FlexWrapType } from './Flex.types';
+import { ResponsiveOffsetType, ResponsiveValueType } from '../../../utils/ui';
+import { FlexAlignItemsType, FlexCentredType, FlexDirectionType, FlexJustifyContentType, FlexWrapType } from './Flex.types';
 
 export interface FlexProps extends BoxProps {
-    centered?: boolean | 'axis' | 'cross-axis' | 'baseline-axis' | 'baseline-cross-axis';
+    centered?: FlexCentredType;
     vertical?: boolean;
     reverseOrder?: boolean;
     stretch?: boolean;
@@ -21,7 +21,7 @@ export interface FlexProps extends BoxProps {
 }
 export declare function flexWrapResponsiveFormatter(val: FlexWrapType | boolean): string;
 declare const FlexComponentReffed: React.ForwardRefExoticComponent<FlexProps & React.RefAttributes<HTMLDivElement>>;
-type FlexType = typeof FlexComponentReffed & {
+export type FlexType = typeof FlexComponentReffed & {
     Restricted: React.FC<{
         children?: React.ReactNode;
     }>;

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

@@ -1,8 +1,8 @@
 import { jsx as c } from "react/jsx-runtime";
 import d from "react";
 import { Box as y } from "../Box/Box.js";
-import { ui as s } from "../../ui.js";
 import { clsx as C } from "../../../utils/clsx.js";
+import { ui as s } from "../../../utils/ui/ui.js";
 import { FlexRestricter as S } from "./FlexRestricter.js";
 const j = "cfxui__Flex__root__d860a", z = "cfxui__Flex__centered__e911c", N = "cfxui__Flex__vertical__552db", B = "cfxui__Flex__repell__6ea3f", E = "cfxui__Flex__wrap__9d0d6", O = "cfxui__Flex__stretch__5c1ce", T = "cfxui__Flex__horizontal__d64f7", e = {
   root: j,

package/dist/components/Layout/Flex/Flex.types.d.ts

@@ -40,3 +40,10 @@ export declare enum FlexWrapEnum {
     'wrap-reverse' = "wrap-reverse"
 }
 export type FlexWrapType = keyof typeof FlexWrapEnum;
+export declare enum FlexCentredEnum {
+    axis = "axis",
+    'cross-axis' = "cross-axis",
+    'baseline-axis' = "baseline-axis",
+    'baseline-cross-axis' = "baseline-cross-axis"
+}
+export type FlexCentredType = keyof typeof FlexCentredEnum | boolean;

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

@@ -1,7 +1,8 @@
-var e = /* @__PURE__ */ ((r) => (r.row = "row", r.column = "column", r["row-reverse"] = "row-reverse", r["column-reverse"] = "column-reverse", r))(e || {}), a = /* @__PURE__ */ ((r) => (r.stretch = "stretch", r.center = "center", r.start = "start", r.end = "end", r.baseline = "baseline", r.unset = "unset", r["flex-start"] = "flex-start", r["flex-end"] = "flex-end", r["self-start"] = "self-start", r["self-end"] = "self-end", r["anchor-center"] = "anchor-center", r))(a || {}), c = /* @__PURE__ */ ((r) => (r.stretch = "stretch", r.center = "center", r.start = "start", r.end = "end", r.left = "left", r.right = "right", r.unset = "unset", r["flex-start"] = "flex-start", r["flex-end"] = "flex-end", r["space-between"] = "space-between", r["space-around"] = "space-around", r))(c || {}), s = /* @__PURE__ */ ((r) => (r.nowrap = "nowrap", r.wrap = "wrap", r.unset = "unset", r["wrap-reverse"] = "wrap-reverse", r))(s || {});
+var a = /* @__PURE__ */ ((r) => (r.row = "row", r.column = "column", r["row-reverse"] = "row-reverse", r["column-reverse"] = "column-reverse", r))(a || {}), s = /* @__PURE__ */ ((r) => (r.stretch = "stretch", r.center = "center", r.start = "start", r.end = "end", r.baseline = "baseline", r.unset = "unset", r["flex-start"] = "flex-start", r["flex-end"] = "flex-end", r["self-start"] = "self-start", r["self-end"] = "self-end", r["anchor-center"] = "anchor-center", r))(s || {}), e = /* @__PURE__ */ ((r) => (r.stretch = "stretch", r.center = "center", r.start = "start", r.end = "end", r.left = "left", r.right = "right", r.unset = "unset", r["flex-start"] = "flex-start", r["flex-end"] = "flex-end", r["space-between"] = "space-between", r["space-around"] = "space-around", r))(e || {}), c = /* @__PURE__ */ ((r) => (r.nowrap = "nowrap", r.wrap = "wrap", r.unset = "unset", r["wrap-reverse"] = "wrap-reverse", r))(c || {}), w = /* @__PURE__ */ ((r) => (r.axis = "axis", r["cross-axis"] = "cross-axis", r["baseline-axis"] = "baseline-axis", r["baseline-cross-axis"] = "baseline-cross-axis", r))(w || {});
 export {
-  a as FlexAlignItemsEnum,
-  e as FlexDirectionEnum,
-  c as FlexJustifyContentEnum,
-  s as FlexWrapEnum
+  s as FlexAlignItemsEnum,
+  w as FlexCentredEnum,
+  a as FlexDirectionEnum,
+  e as FlexJustifyContentEnum,
+  c as FlexWrapEnum
 };

package/dist/components/Layout/Flex/index.d.ts

@@ -0,0 +1,6 @@
+export { Flex } from './Flex';
+export type { FlexType, FlexProps } from './Flex';
+export type { FlexDirectionType, FlexAlignItemsType, FlexJustifyContentType, FlexWrapType, FlexCentredType, } from './Flex.types';
+export { FlexDirectionEnum, FlexAlignItemsEnum, FlexJustifyContentEnum, FlexWrapEnum, FlexCentredEnum, } from './Flex.types';
+export { FlexRestricter } from './FlexRestricter';
+export type { FlexRestricterProps } from './FlexRestricter';

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

@@ -0,0 +1,12 @@
+import { Flex as t } from "./Flex.js";
+import { FlexAlignItemsEnum as x, FlexCentredEnum as m, FlexDirectionEnum as l, FlexJustifyContentEnum as o, FlexWrapEnum as F } from "./Flex.types.js";
+import { FlexRestricter as i } from "./FlexRestricter.js";
+export {
+  t as Flex,
+  x as FlexAlignItemsEnum,
+  m as FlexCentredEnum,
+  l as FlexDirectionEnum,
+  o as FlexJustifyContentEnum,
+  i as FlexRestricter,
+  F as FlexWrapEnum
+};

package/dist/components/Layout/Pad/index.d.ts

@@ -0,0 +1,2 @@
+export { Pad } from './Pad';
+export type { PadProps } from './Pad';

package/dist/components/Layout/Pad/index.js

@@ -0,0 +1,4 @@
+import { Pad as a } from "./Pad.js";
+export {
+  a as Pad
+};

package/dist/components/Layout/Page/index.d.ts

@@ -0,0 +1,2 @@
+export { Page } from './Page';
+export type { PageProps } from './Page';

package/dist/components/Layout/Page/index.js

@@ -0,0 +1,4 @@
+import { Page as r } from "./Page.js";
+export {
+  r as Page
+};

package/dist/components/Layout/Scrollable/ScrollableShowcase.js

@@ -2,7 +2,7 @@ import { jsxs as l, jsx as r } from "react/jsx-runtime";
 import d from "react";
 import { Flex as i } from "../Flex/Flex.js";
 import { Text as t } from "../../Text/Text.js";
-import "../../ui.js";
+import "../../../utils/ui/ui.js";
 import { LOREM_IPSUM as e } from "../../../utils/loremipsum.js";
 import { Scrollable as o } from "./Scrollable.js";
 function c() {

package/dist/components/Link/ButtonLink.js

@@ -1,27 +1,32 @@
-import { jsx as r } from "react/jsx-runtime";
+import { jsx as i } from "react/jsx-runtime";
 import m from "react";
-import { getLinkClassName as i } from "./Link.js";
-function l(t) {
+import { getLinkClassName as c, getLinkStyles as d } from "./Link.js";
+function u(t) {
   const {
-    className: c,
-    children: e,
-    type: o = "button",
-    disabled: a = !1,
-    ...s
-  } = t, n = i(t);
-  return /* @__PURE__ */ r(
+    className: f,
+    children: s,
+    type: a = "button",
+    disabled: e = !1,
+    style: o,
+    ...n
+  } = t, l = c(t), r = d(t);
+  return /* @__PURE__ */ i(
     "button",
     {
-      ...s,
-      className: n,
-      type: o,
-      "aria-disabled": a,
-      tabIndex: a ? -1 : 0,
-      children: e
+      ...n,
+      style: {
+        ...r,
+        ...o
+      },
+      className: l,
+      type: a,
+      "aria-disabled": e,
+      tabIndex: e ? -1 : 0,
+      children: s
     }
   );
 }
-const b = m.memo(l);
+const L = m.memo(u);
 export {
-  b as default
+  L as default
 };

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

@@ -1,12 +1,14 @@
 import { default as React } from 'react';
+import { ColorType } from '../../utils/ui';
 
 export interface LinkBaseProps {
+    color?: ColorType;
     className?: string;
     disabled?: boolean;
     unstyled?: boolean;
-    theme?: 'default' | 'secondary';
 }
 export declare function getLinkClassName(props: LinkBaseProps): string;
+export declare function getLinkStyles(props: LinkBaseProps): React.CSSProperties;
 export type LinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & LinkBaseProps;
 declare function Link(props: LinkProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof Link>;

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
 };