@cfx-dev/ui-components 4.2.21 → 4.2.22

package/dist/components/Accordion/Accordion.js

@@ -2,7 +2,7 @@ import { jsx as c, jsxs as v } from "react/jsx-runtime";
 import e from "react";
 import { Icon as A } from "../Icon/Icon.js";
 import { Text as b } from "../Text/Text.js";
-import { ui as I } from "../ui.js";
+import { ui as I } from "../../utils/ui/ui.js";
 import { clsx as w } from "../../utils/clsx.js";
 import { debounce as R } from "../../utils/execution.js";
 import { minmax as y } from "../../utils/math.js";

package/dist/components/Accordion/AccordionShowcase.js

@@ -2,7 +2,7 @@ import { jsx as e, jsxs as t } from "react/jsx-runtime";
 import h from "react";
 import { Flex as a } from "../Layout/Flex/Flex.js";
 import { Text as c } from "../Text/Text.js";
-import "../ui.js";
+import "../../utils/ui/ui.js";
 import { Accordion as l, AccordionItem as o, AccordionHeader as i, AccordionTrigger as n, AccordionContent as r } from "./Accordion.js";
 function s() {
   return /* @__PURE__ */ e(a, { fullWidth: !0, vertical: !0, children: /* @__PURE__ */ t(a, { fullWidth: !0, vertical: !0, children: [

package/dist/components/Avatar/AvatarShowcase.js

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

package/dist/components/Badge/Badge.d.ts

@@ -1,10 +1,17 @@
 import { default as React } from 'react';
 import { IconName } from '../Icon';
+import { ColorType } from '../../utils/ui';
 
-export type BadgeColor = 'success' | 'neutral' | 'warning' | 'error';
+export declare enum BadgeColorEnum {
+    success = "success",
+    neutral = "neutral",
+    warning = "warning",
+    error = "error"
+}
+export type BadgeColor = keyof typeof BadgeColorEnum;
 export type BadgeSize = 'small' | 'normal';
 export interface BadgeProps {
-    color?: BadgeColor;
+    color?: BadgeColor | ColorType;
     size?: BadgeSize;
     icon?: IconName;
     children?: React.ReactNode;

package/dist/components/Badge/Badge.js

@@ -1,30 +1,57 @@
-import { jsxs as i, jsx as f } from "react/jsx-runtime";
-import m from "react";
-import { Icon as u } from "../Icon/Icon.js";
-import { clsx as d } from "../../utils/clsx.js";
-const x = "cfxui__Badge__root__73dcc", g = "cfxui__Badge__success__b5ae3", B = "cfxui__Badge__hoverable__4b089", b = "cfxui__Badge__neutral__6ac4e", h = "cfxui__Badge__warning__72699", v = "cfxui__Badge__error__7e5f9", p = "cfxui__Badge__small__a1a55", w = "cfxui__Badge__icon__4e25f", o = {
-  root: x,
-  success: g,
-  hoverable: B,
-  neutral: b,
-  warning: h,
-  error: v,
-  small: p,
-  icon: w
-}, I = m.forwardRef(function(e, c) {
+import { jsxs as x, jsx as b } from "react/jsx-runtime";
+import p from "react";
+import { Icon as v } from "../Icon/Icon.js";
+import { clsx as h } from "../../utils/clsx.js";
+import { getColor as c } from "../../utils/color.js";
+import { isInEnum as a } from "../../utils/enum.js";
+import "../../utils/ui/ui.js";
+import { ColorEnum as B } from "../../utils/ui/ui.types.js";
+const w = "cfxui__Badge__root__73dcc", N = "cfxui__Badge__hoverable__4b089", y = "cfxui__Badge__success__b5ae3", j = "cfxui__Badge__neutral__6ac4e", z = "cfxui__Badge__warning__72699", I = "cfxui__Badge__error__7e5f9", R = "cfxui__Badge__small__a1a55", C = "cfxui__Badge__icon__4e25f", e = {
+  root: w,
+  hoverable: N,
+  success: y,
+  neutral: j,
+  warning: z,
+  error: I,
+  small: R,
+  icon: C
+};
+var _ = /* @__PURE__ */ ((o) => (o.success = "success", o.neutral = "neutral", o.warning = "warning", o.error = "error", o))(_ || {});
+const K = p.forwardRef(function(n, t) {
   const {
-    color: s = "success",
-    size: a = "normal",
-    children: r,
-    icon: _,
-    className: n,
-    hoverable: t = !1
-  } = e, l = d(o.root, n, o[s], o[a], { [o.hoverable]: t });
-  return /* @__PURE__ */ i("div", { ref: c, className: l, children: [
-    r,
-    !!_ && /* @__PURE__ */ f(u, { size: "xxsmall", name: _, className: o.icon })
+    color: r = "success",
+    size: i = "normal",
+    children: l,
+    icon: s,
+    className: m,
+    hoverable: f = !1
+  } = n, u = a(r, _) ? e[r] : void 0, g = a(r, B) ? {
+    "--badge-color": c({
+      color: r
+    }),
+    "--badge-bg-color": c({
+      color: r,
+      opacity: 0.2
+    }),
+    "--badge-bg-hover-color": c({
+      color: r,
+      opacity: 0.4
+    })
+  } : {}, d = h(
+    e.root,
+    m,
+    u,
+    e[i],
+    {
+      [e.hoverable]: f
+    }
+  );
+  return /* @__PURE__ */ x("div", { ref: t, className: d, style: g, children: [
+    l,
+    !!s && /* @__PURE__ */ b(v, { size: "xxsmall", name: s, className: e.icon })
   ] });
 });
 export {
-  I as Badge
+  K as Badge,
+  _ as BadgeColorEnum
 };

package/dist/components/Badge/BadgeShowcase.js

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

package/dist/components/BurgerMenu/BurgerMenu.js

@@ -4,7 +4,7 @@ import { Icon as k } from "../Icon/Icon.js";
 import { Interactive as m } from "../Interactive/Interactive.js";
 import { Flex as r } from "../Layout/Flex/Flex.js";
 import { Text as w } from "../Text/Text.js";
-import "../ui.js";
+import "../../utils/ui/ui.js";
 import { clsx as h } from "../../utils/clsx.js";
 import { s as l } from "../../BurgerMenu.module-CyY93Y4u.js";
 function K({

package/dist/components/BurgerMenu/BurgerMenuShowcase.js

@@ -2,7 +2,7 @@ import { jsx as r, jsxs as i } from "react/jsx-runtime";
 import a, { useState as s, useCallback as u } from "react";
 import { Flex as t } from "../Layout/Flex/Flex.js";
 import { Text as m } from "../Text/Text.js";
-import "../ui.js";
+import "../../utils/ui/ui.js";
 import { BurgerMenu as c } from "./BurgerMenu.js";
 import { BurgerMenuButton as g } from "./BurgerMenuButton.js";
 const d = [

package/dist/components/Button/ButtonShowcase.js

@@ -2,7 +2,7 @@ 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 "../ui.js";
+import "../../utils/ui/ui.js";
 import { Button as r } from "./Button.js";
 import { ButtonBar as o } from "./ButtonBar.js";
 import { LinkButton as c } from "./LinkButton.js";

package/dist/components/Checkbox/Checkbox.d.ts

@@ -2,7 +2,7 @@ import { default as React } from 'react';
 import { GetColorProps } from '../../utils/color';
 import * as CheckboxUi from '@radix-ui/react-checkbox';
 export type CheckboxSize = 'small' | 'normal' | 'large';
-export interface CheckboxProps extends CheckboxUi.CheckboxProps, GetColorProps {
+export interface CheckboxProps extends Omit<CheckboxUi.CheckboxProps, 'color'>, GetColorProps {
     id?: string;
     size?: CheckboxSize;
     rootClassName?: string;

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

@@ -2,7 +2,7 @@ import { default as React } from 'react';
 import { IconSize } from '../Icon';
 import { InputSize } from '../Input';
 import { SelectOption } from '../Select';
-import { ResponsiveValueType } from '../ui';
+import { ResponsiveValueType } from '../../utils/ui';
 
 export declare const ICON_SIZE_MAP: Record<InputSize, IconSize>;
 export interface DropdownSelectProps<T = string> {

package/dist/components/DropdownSelect/DropdownSelect.js

@@ -9,9 +9,9 @@ import { u as Vn, a as Hn, b as Yn, o as Xn, s as jn, l as Zn, f as Qn, c as qn,
 import { _ as H, f as Mt, c as rr } from "../../tslib.es6-CBKHJX9H.js";
 import { Icon as or } from "../Icon/Icon.js";
 import { Flex as ar } from "../Layout/Flex/Flex.js";
-import { ui as ct } from "../ui.js";
-import { clsx as st } from "../../utils/clsx.js";
+import { clsx as ct } from "../../utils/clsx.js";
 import { mergeRefs as ir } from "../../utils/mergeRefs.js";
+import { ui as st } from "../../utils/ui/ui.js";
 var Pt = a.forwardRef((e, t) => {
   const { children: n, ...r } = e, o = a.Children.toArray(n), i = o.find(sr);
   if (i) {
@@ -2125,7 +2125,7 @@ const ii = "cfxui__DropdownSelect__trigger__c03df", ci = "cfxui__DropdownSelect_
   Kn(() => {
     c && m.current && w(m.current.offsetWidth);
   }, [c]);
-  const h = ct.getResponsiveFlatClassnames("dropdownselect-size", s).map((g) => G[g]), l = st(
+  const h = st.getResponsiveFlatClassnames("dropdownselect-size", s).map((g) => G[g]), l = ct(
     G.trigger,
     h,
     {
@@ -2133,7 +2133,7 @@ const ii = "cfxui__DropdownSelect__trigger__c03df", ci = "cfxui__DropdownSelect_
       [G.fullWidth]: c,
       [G.onlight]: f
     }
-  ), E = st(
+  ), E = ct(
     G.content,
     h,
     {
@@ -2161,7 +2161,7 @@ const ii = "cfxui__DropdownSelect__trigger__c03df", ci = "cfxui__DropdownSelect_
         className: E,
         style: {
           width: v,
-          zIndex: ct.zindex("max")
+          zIndex: st.zindex("max")
         },
         children: r.map((g) => /* @__PURE__ */ d(
           ai,

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

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",

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

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { BoxProps } from '../Box/Box';
-import { ResponsiveOffsetType, ResponsiveValueType } from '../../ui';
+import { ResponsiveOffsetType, ResponsiveValueType } from '../../../utils/ui';
 import { FlexAlignItemsType, FlexCentredType, FlexDirectionType, FlexJustifyContentType, FlexWrapType } from './Flex.types';
 
 export interface FlexProps extends BoxProps {

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/index.d.ts

@@ -1,5 +1,6 @@
 export { Flex } from './Flex';
 export type { FlexType, FlexProps } from './Flex';
-export type { FlexDirectionType, FlexAlignItemsType, FlexJustifyContentType, FlexWrapType, FlexCentredType, FlexDirectionEnum, FlexAlignItemsEnum, FlexJustifyContentEnum, FlexWrapEnum, FlexCentredEnum, } from './Flex.types';
+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

@@ -1,6 +1,12 @@
-import { Flex as o } from "./Flex.js";
-import { FlexRestricter as x } from "./FlexRestricter.js";
+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 {
-  o as Flex,
-  x as FlexRestricter
+  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/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>;