@cfx-dev/ui-components 5.0.16 → 5.0.17

package/dist/assets/css/Flyout.css

@@ -1 +1 @@
-@keyframes cfxui__Flyout__holder-appearance-rtl__3ccf2{0%{opacity:0;transform:translate(calc(var(--quant) * 2.5))}to{opacity:1;transform:translate(0)}}@keyframes cfxui__Flyout__holder-appearance-btu__84100{0%{opacity:0;transform:translateY(calc(var(--quant) * 2.5))}to{opacity:1;transform:translateY(0)}}@keyframes cfxui__Flyout__backdrop-appearance-rtl__9f651{0%{opacity:0}to{opacity:1}}.cfxui__Flyout__root__eba04{position:fixed;z-index:1000;top:0;right:0;bottom:0;left:0;pointer-events:none}.cfxui__Flyout__root__eba04 .cfxui__Flyout__backdrop__57f9e{position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--color-overlay-backdrop-background);opacity:0;pointer-events:none}.cfxui__Flyout__root__eba04 .cfxui__Flyout__holder__d80b5{position:fixed;top:0;right:0;bottom:0;left:0;border-radius:0;background:rgba(var(--color-bg),1);opacity:0;transform:translate(calc(var(--quant) * 2.5));pointer-events:none}.cfxui__Flyout__root__eba04 .cfxui__Flyout__holder__d80b5 .cfxui__Flyout__content__04e42{width:100%;height:100%;overflow:hidden}@media (min-width: 640px){.cfxui__Flyout__root__eba04 .cfxui__Flyout__holder__d80b5{inset:0 0 0 calc(100vw - 420px);border-radius:var(--border-radius-medium) 0 0 var(--border-radius-medium)}}.cfxui__Flyout__root__eba04 .cfxui__Flyout__header__40009{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--quant) * 2)}.cfxui__Flyout__root__eba04 .cfxui__Flyout__header__40009 .cfxui__Flyout__title__b235a{flex-grow:1;width:1px;display:flex;align-items:center;gap:calc(var(--quant) * 2);font-size:var(--font-size-xxlarge)}.cfxui__Flyout__root__eba04.cfxui__Flyout__active__14a29 .cfxui__Flyout__backdrop__57f9e{opacity:1;pointer-events:all;animation:cfxui__Flyout__backdrop-appearance__d9564 .2s ease}.cfxui__Flyout__root__eba04.cfxui__Flyout__active__14a29 .cfxui__Flyout__mask__72713{opacity:1}.cfxui__Flyout__root__eba04.cfxui__Flyout__active__14a29 .cfxui__Flyout__holder__d80b5{opacity:1;transform:translate(0);pointer-events:all;animation:cfxui__Flyout__holder-appearance-btu__84100 .2s ease}@media (min-width: 640px){.cfxui__Flyout__root__eba04.cfxui__Flyout__active__14a29 .cfxui__Flyout__holder__d80b5{animation:cfxui__Flyout__holder-appearance-rtl__3ccf2 .2s ease}}.cfxui__Flyout__root__eba04.cfxui__Flyout__theme-legacy__a3452{--offset-flyout: calc((100vh - (var(--height) - var(--offset-safezone) * 2) * 1) * .5 - var(--quant) * 4);top:var(--offset-flyout, initial);bottom:var(--offset-flyout, initial);padding:calc((100vh - (var(--height) - var(--offset-safezone) * 2) * 1) * .5 - var(--offset-flyout, initial)) calc((100vw - (var(--width) - var(--offset-safezone) * 2) * 1) * .5) calc((100vh - (var(--height) - var(--offset-safezone) * 2) * 1) * .5 - var(--offset-flyout, initial)) calc(var(--quant) * 6);border-radius:var(--border-radius-large) 0 0 var(--border-radius-large);box-shadow:0 0 0 calc(var(--quant) * .25) var(--color-flyout-holder-border) inset,var(--shadow-large, initial)}.cfxui__Flyout__root__eba04.cfxui__Flyout__theme-legacy__a3452 .cfxui__Flyout__mask__72713{--mask-right: var(--viewport-right, initial);--mask-right-offset: calc(var(--mask-right, initial) - var(--quant) * 4);position:fixed;top:0;right:0;bottom:0;left:0;mask:linear-gradient(90deg,#000 0%,#000 var(--mask-right-offset, initial),transparent var(--mask-right, initial),transparent 100%);opacity:0;pointer-events:none}.cfxui__Flyout__root__eba04.cfxui__Flyout__theme-legacy__a3452.cfxui__Flyout__size-medium__1fc09 .cfxui__Flyout__holder__d80b5{left:32vw}.cfxui__Flyout__root__eba04.cfxui__Flyout__theme-legacy__a3452.cfxui__Flyout__size-small__038a5 .cfxui__Flyout__holder__d80b5{left:48vw}.cfxui__Flyout__root__eba04.cfxui__Flyout__theme-legacy__a3452.cfxui__Flyout__size-xsmall__839e8 .cfxui__Flyout__holder__d80b5{left:64vw}.cfxui__Flyout__root__eba04.cfxui__Flyout__theme-legacy__a3452.cfxui__Flyout__size-xxsmall__33712 .cfxui__Flyout__holder__d80b5{left:80vw;padding:calc(var(--quant) * 5) calc(var(--quant) * 3.75)}
+@keyframes cfxui__Flyout__backdrop-appearance__d9564{0%{opacity:0}to{opacity:1}}@keyframes cfxui__Flyout__backdrop-disappearance__bf898{0%{opacity:1}to{opacity:0}}@keyframes cfxui__Flyout__holder-appearance-rtl__3ccf2{0%{opacity:0;transform:translate(calc(var(--quant) * 2.5))}to{opacity:1;transform:translate(0)}}@keyframes cfxui__Flyout__holder-appearance-btu__84100{0%{opacity:0;transform:translateY(calc(var(--quant) * 2.5))}to{opacity:1;transform:translateY(0)}}@keyframes cfxui__Flyout__holder-appearance-ltr__83bd2{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(calc(var(--quant) * 2.5))}}@keyframes cfxui__Flyout__holder-appearance-utb__846eb{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(calc(var(--quant) * 2.5))}}.cfxui__Flyout__root__eba04{position:fixed;z-index:1000;top:0;right:0;bottom:0;left:0;pointer-events:none}.cfxui__Flyout__root__eba04 .cfxui__Flyout__backdrop__57f9e{position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--color-overlay-backdrop-background);opacity:0;pointer-events:none;animation:cfxui__Flyout__backdrop-disappearance__bf898 .2s ease}.cfxui__Flyout__root__eba04 .cfxui__Flyout__holder__d80b5{position:fixed;top:0;right:0;bottom:0;left:0;border-radius:0;background:rgba(var(--color-bg),1);opacity:0;transform:translate(calc(var(--quant) * 2.5));pointer-events:none;animation:cfxui__Flyout__holder-appearance-utb__846eb .2s ease}.cfxui__Flyout__root__eba04 .cfxui__Flyout__holder__d80b5 .cfxui__Flyout__content__04e42{width:100%;height:100%;overflow:hidden}@media (min-width: 640px){.cfxui__Flyout__root__eba04 .cfxui__Flyout__holder__d80b5{inset:0 0 0 calc(100vw - 420px);border-radius:var(--border-radius-medium) 0 0 var(--border-radius-medium);animation:cfxui__Flyout__holder-appearance-ltr__83bd2 .2s ease}}.cfxui__Flyout__root__eba04 .cfxui__Flyout__header__40009{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--quant) * 2)}.cfxui__Flyout__root__eba04 .cfxui__Flyout__header__40009 .cfxui__Flyout__title__b235a{flex-grow:1;width:1px;display:flex;align-items:center;gap:calc(var(--quant) * 2);font-size:var(--font-size-xxlarge)}.cfxui__Flyout__root__eba04.cfxui__Flyout__active__14a29 .cfxui__Flyout__backdrop__57f9e{opacity:1;pointer-events:all;animation:cfxui__Flyout__backdrop-appearance__d9564 .2s ease}.cfxui__Flyout__root__eba04.cfxui__Flyout__active__14a29 .cfxui__Flyout__mask__72713{opacity:1}.cfxui__Flyout__root__eba04.cfxui__Flyout__active__14a29 .cfxui__Flyout__holder__d80b5{opacity:1;transform:translate(0);pointer-events:all;animation:cfxui__Flyout__holder-appearance-btu__84100 .2s ease}@media (min-width: 640px){.cfxui__Flyout__root__eba04.cfxui__Flyout__active__14a29 .cfxui__Flyout__holder__d80b5{animation:cfxui__Flyout__holder-appearance-rtl__3ccf2 .2s ease}}.cfxui__Flyout__root__eba04.cfxui__Flyout__theme-legacy__a3452{--offset-flyout: calc((100vh - (var(--height) - var(--offset-safezone) * 2) * 1) * .5 - var(--quant) * 4);top:var(--offset-flyout, initial);bottom:var(--offset-flyout, initial);padding:calc((100vh - (var(--height) - var(--offset-safezone) * 2) * 1) * .5 - var(--offset-flyout, initial)) calc((100vw - (var(--width) - var(--offset-safezone) * 2) * 1) * .5) calc((100vh - (var(--height) - var(--offset-safezone) * 2) * 1) * .5 - var(--offset-flyout, initial)) calc(var(--quant) * 6);border-radius:var(--border-radius-large) 0 0 var(--border-radius-large);box-shadow:0 0 0 calc(var(--quant) * .25) var(--color-flyout-holder-border) inset,var(--shadow-large, initial)}.cfxui__Flyout__root__eba04.cfxui__Flyout__theme-legacy__a3452 .cfxui__Flyout__mask__72713{--mask-right: var(--viewport-right, initial);--mask-right-offset: calc(var(--mask-right, initial) - var(--quant) * 4);position:fixed;top:0;right:0;bottom:0;left:0;mask:linear-gradient(90deg,#000 0%,#000 var(--mask-right-offset, initial),transparent var(--mask-right, initial),transparent 100%);opacity:0;pointer-events:none}.cfxui__Flyout__root__eba04.cfxui__Flyout__theme-legacy__a3452.cfxui__Flyout__size-medium__1fc09 .cfxui__Flyout__holder__d80b5{left:32vw}.cfxui__Flyout__root__eba04.cfxui__Flyout__theme-legacy__a3452.cfxui__Flyout__size-small__038a5 .cfxui__Flyout__holder__d80b5{left:48vw}.cfxui__Flyout__root__eba04.cfxui__Flyout__theme-legacy__a3452.cfxui__Flyout__size-xsmall__839e8 .cfxui__Flyout__holder__d80b5{left:64vw}.cfxui__Flyout__root__eba04.cfxui__Flyout__theme-legacy__a3452.cfxui__Flyout__size-xxsmall__33712 .cfxui__Flyout__holder__d80b5{left:80vw;padding:calc(var(--quant) * 5) calc(var(--quant) * 3.75)}

package/dist/assets/css/Link.css

@@ -1 +1 @@
-.cfxui__Link__unsetAll__58fea{all:unset}.cfxui__Link__root__a29b3{display:inline-flex;border-radius:var(--border-radius-xsmall);color:var(--anchor-color)}.cfxui__Link__root__a29b3{transition:all .25s ease,outline-offset 0s,outline 0s}.cfxui__Link__root__a29b3:not([aria-disabled=true]){cursor:pointer;text-decoration:underline;text-decoration-color:currentcolor}.cfxui__Link__root__a29b3:not([aria-disabled=true]):hover{text-decoration-color:var(--anchor-decoration-color-hover)}.cfxui__Link__root__a29b3:not([aria-disabled=true]):focus-visible:not(:active,:hover){box-shadow:0 0 0 var(--anchor-outline-size, initial) var(--color-anchor-focus-outline)}.cfxui__Link__root__a29b3[aria-disabled=true]{cursor:not-allowed;opacity:.5}.cfxui__Link__root__a29b3[aria-disabled=true]:active{pointer-events:none}.cfxui__Link__root__a29b3.cfxui__Link__unstyled__f020c{text-decoration:none}
+.cfxui__Link__unsetAll__58fea{all:unset}.cfxui__Link__root__a29b3{display:inline-flex;border-radius:var(--border-radius-xsmall);color:var(--anchor-color)}.cfxui__Link__root__a29b3{transition:all .25s ease,outline-offset 0s,outline 0s}.cfxui__Link__root__a29b3:not([aria-disabled=true]){cursor:pointer;text-decoration:underline;text-decoration-color:currentcolor}.cfxui__Link__root__a29b3:not([aria-disabled=true]):hover{text-decoration-color:var(--anchor-color-hover);color:var(--anchor-color-hover)}.cfxui__Link__root__a29b3:not([aria-disabled=true]):focus-visible:not(:active,:hover){box-shadow:0 0 0 var(--anchor-outline-size, initial) var(--color-anchor-focus-outline)}.cfxui__Link__root__a29b3[aria-disabled=true]{cursor:not-allowed;opacity:.4}.cfxui__Link__root__a29b3[aria-disabled=true]:active{pointer-events:none}.cfxui__Link__root__a29b3.cfxui__Link__unstyled__f020c{text-decoration:none;color:inherit}.cfxui__Link__root__a29b3.cfxui__Link__unstyled__f020c:hover{color:inherit}

package/dist/assets/css/Text.css

@@ -1 +1 @@
-.cfxui__Text__root__2fe11{--trim-line-height: calc(var(--font-size-current) * var(--line-height-current));--trim-extra-height: calc(var(--trim-line-height) - 1cap);--trim-size: calc((var(--trim-extra-height) / 2) * -1)}.cfxui__Text__root__2fe11{transition:all .25s ease,outline-offset 0s,outline 0s}.cfxui__Text__root__2fe11:before{content:"";margin-bottom:calc(var(--trim-size) - .015cap);display:table}.cfxui__Text__root__2fe11:after{content:"";margin-top:calc(var(--trim-size) + .025cap);display:table}.cfxui__Text__root__2fe11.cfxui__Text__verticalTrimDisabled__34631:before,.cfxui__Text__root__2fe11.cfxui__Text__verticalTrimDisabled__34631:after{display:none;margin:0}.cfxui__Text__root__2fe11.cfxui__Text__centered__4d7bd{text-align:center}.cfxui__Text__root__2fe11.cfxui__Text__underlined__5860e{text-decoration:underline}.cfxui__Text__root__2fe11.cfxui__Text__strikethrough__e3ee3{text-decoration:line-through}.cfxui__Text__root__2fe11.cfxui__Text__truncated__417f4{width:100%;white-space:nowrap;overflow-x:clip;display:inline-block;mask:linear-gradient(90deg,rgba(var(--color-red),1),rgba(var(--color-red),1) calc(100% - 2ch),transparent)}.cfxui__Text__root__2fe11.cfxui__Text__typographic__d8155{overflow-wrap:break-word}.cfxui__Text__root__2fe11.cfxui__Text__typographic__d8155 li{margin-left:calc(var(--quant) * 4)}.cfxui__Text__root__2fe11:not(.cfxui__Text__typographic__d8155) a{color:inherit;text-decoration:none}.cfxui__Text__root__2fe11.cfxui__Text__block__cb1b6{max-width:100%}
+.cfxui__Text__root__2fe11{--trim-line-height: calc(var(--font-size-current) * var(--line-height-current));--trim-extra-height: calc(var(--trim-line-height) - 1cap);--trim-size: calc((var(--trim-extra-height) / 2) * -1)}.cfxui__Text__root__2fe11{transition:all .25s ease,outline-offset 0s,outline 0s}.cfxui__Text__root__2fe11:before{content:"";margin-bottom:calc(var(--trim-size) - .015cap);display:table}.cfxui__Text__root__2fe11:after{content:"";margin-top:calc(var(--trim-size) + .025cap);display:table}.cfxui__Text__root__2fe11.cfxui__Text__verticalTrimDisabled__34631:before,.cfxui__Text__root__2fe11.cfxui__Text__verticalTrimDisabled__34631:after{display:none;margin:0}.cfxui__Text__root__2fe11.cfxui__Text__centered__4d7bd{text-align:center}.cfxui__Text__root__2fe11.cfxui__Text__underlined__5860e{text-decoration:underline}.cfxui__Text__root__2fe11.cfxui__Text__strikethrough__e3ee3{text-decoration:line-through}.cfxui__Text__root__2fe11.cfxui__Text__truncated__417f4{width:100%;white-space:nowrap;overflow-x:clip;display:inline-block;mask:linear-gradient(90deg,rgba(var(--color-red),1),rgba(var(--color-red),1) calc(100% - 2ch),transparent)}.cfxui__Text__root__2fe11.cfxui__Text__typographic__d8155{overflow-wrap:break-word}.cfxui__Text__root__2fe11.cfxui__Text__typographic__d8155 li{margin-left:calc(var(--quant) * 4)}.cfxui__Text__root__2fe11:not(.cfxui__Text__typographic__d8155) a{color:inherit;text-decoration:none}.cfxui__Text__root__2fe11:not(.cfxui__Text__typographic__d8155) a:hover{color:inherit}.cfxui__Text__root__2fe11.cfxui__Text__block__cb1b6{max-width:100%}

package/dist/components/Flyout/Flyout.js

@@ -1,19 +1,22 @@
-import { jsx as o, jsxs as m } from "react/jsx-runtime";
+import { jsx as _, jsxs as u } from "react/jsx-runtime";
 import y from "react";
 import { F as x } from "../../Combination-N-vN9BB-.js";
 import F from "../Button/Button.js";
 import { clsx as c } from "../../utils/clsx.js";
 import "../../utils/links.js";
-import { Interactive as k } from "../Interactive/Interactive.js";
-import { noop as b } from "../../utils/functional.js";
+import { Interactive as b } from "../Interactive/Interactive.js";
+import { noop as k } from "../../utils/functional.js";
 import "../../utils/hooks/useGlobalKeyboardEvent.js";
 import { useKeyboardClose as N } from "../../utils/hooks/useKeyboardClose.js";
 import { useOutlet as C } from "../../utils/hooks/useOutlet.js";
 const v = "cfxui__Flyout__root__eba04", z = "cfxui__Flyout__backdrop__57f9e", O = "cfxui__Flyout__holder__d80b5", L = "cfxui__Flyout__content__04e42", T = "cfxui__Flyout__header__40009", I = "cfxui__Flyout__title__b235a", E = "cfxui__Flyout__active__14a29", U = "cfxui__Flyout__mask__72713", e = {
   root: v,
   backdrop: z,
+  "backdrop-disappearance": "cfxui__Flyout__backdrop-disappearance__bf898",
   holder: O,
+  "holder-appearance-utb": "cfxui__Flyout__holder-appearance-utb__846eb",
   content: L,
+  "holder-appearance-ltr": "cfxui__Flyout__holder-appearance-ltr__83bd2",
   header: T,
   title: I,
   active: E,
@@ -25,50 +28,49 @@ const v = "cfxui__Flyout__root__eba04", z = "cfxui__Flyout__backdrop__57f9e", O
   "size-medium": "cfxui__Flyout__size-medium__1fc09",
   "size-small": "cfxui__Flyout__size-small__038a5",
   "size-xsmall": "cfxui__Flyout__size-xsmall__839e8",
-  "size-xxsmall": "cfxui__Flyout__size-xxsmall__33712",
-  "backdrop-appearance-rtl": "cfxui__Flyout__backdrop-appearance-rtl__9f651"
+  "size-xxsmall": "cfxui__Flyout__size-xxsmall__33712"
 }, g = "flyout-outlet", H = "cfxui-root", n = "shrink";
 function S(i) {
   const {
-    disabled: t = !1,
+    disabled: o = !1,
     size: a = "medium",
-    theme: s = "default",
-    onClose: l = b,
-    children: r,
-    holderClassName: u,
+    theme: r = "default",
+    onClose: l = k,
+    children: s,
+    holderClassName: m,
     rootClassName: d,
-    maskClassName: f
-  } = i, p = C(g);
+    maskClassName: p
+  } = i, f = C(g);
   y.useEffect(() => {
-    if (t)
+    if (o)
       return;
-    const _ = document.getElementById(H);
-    return _ == null || _.classList.add(n), () => _ == null ? void 0 : _.classList.remove(n);
-  }, [t]), N(l);
+    const t = document.getElementById(H);
+    return t == null || t.classList.add(n), () => t == null ? void 0 : t.classList.remove(n);
+  }, [o]), N(l);
   const h = c(
     e.root,
     e[`size-${a}`],
-    e[`theme-${s}`],
+    e[`theme-${r}`],
     {
-      [e.active]: !t
+      [e.active]: !o
     },
     d
   );
-  return /* @__PURE__ */ o(p, { children: /* @__PURE__ */ m("div", { className: h, children: [
-    /* @__PURE__ */ o(k, { showPointer: !1, className: e.backdrop, onClick: l }),
-    /* @__PURE__ */ o("div", { className: c(e.mask, f), children: /* @__PURE__ */ o("div", { className: c(e.holder, u), children: /* @__PURE__ */ o(x, { disabled: t, className: e.content, children: r }) }) })
+  return /* @__PURE__ */ _(f, { children: /* @__PURE__ */ u("div", { className: h, children: [
+    /* @__PURE__ */ _(b, { showPointer: !1, className: e.backdrop, onClick: l }),
+    /* @__PURE__ */ _("div", { className: c(e.mask, p), children: /* @__PURE__ */ _("div", { className: c(e.holder, m), children: /* @__PURE__ */ _(x, { disabled: o, className: e.content, children: s }) }) })
   ] }) });
 }
-S.Header = function(t) {
+S.Header = function(o) {
   const {
     onClose: a,
-    children: s,
+    children: r,
     ref: l,
-    className: r
-  } = t;
-  return /* @__PURE__ */ m("div", { ref: l, className: c(e.header, r), children: [
-    /* @__PURE__ */ o("div", { className: e.title, children: s }),
-    !!a && /* @__PURE__ */ o(F, { icon: "Close", onClick: a })
+    className: s
+  } = o;
+  return /* @__PURE__ */ u("div", { ref: l, className: c(e.header, s), children: [
+    /* @__PURE__ */ _("div", { className: e.title, children: r }),
+    !!a && /* @__PURE__ */ _(F, { icon: "Close", onClick: a })
   ] });
 };
 export {

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

@@ -9,6 +9,7 @@ export interface IconButtonProps extends TextColorProps {
     areaSize?: IconButtonAreaSize;
     onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     className?: string;
+    iconClassName?: string;
     disabled?: boolean;
     ariaLabel?: string;
 }

package/dist/components/IconButton/IconButton.js

@@ -1,53 +1,55 @@
 import { jsx as t } from "react/jsx-runtime";
-import p from "react";
-import { Icon as x } from "../Icon/Icon.js";
-import { clsx as I } from "../../utils/clsx.js";
-const B = "cfxui__IconButton__unset__de209", b = "cfxui__IconButton__root__5af4a", y = "cfxui__IconButton__medium__52958", g = "cfxui__IconButton__large__6d5d8", o = {
-  unset: B,
-  root: b,
-  medium: y,
+import x from "react";
+import { Icon as I } from "../Icon/Icon.js";
+import { clsx as B } from "../../utils/clsx.js";
+const b = "cfxui__IconButton__unset__de209", y = "cfxui__IconButton__root__5af4a", N = "cfxui__IconButton__medium__52958", g = "cfxui__IconButton__large__6d5d8", o = {
+  unset: b,
+  root: y,
+  medium: N,
   large: g
 };
 function k(n) {
   const {
-    name: e,
-    onClick: a,
-    className: c,
+    name: a,
+    onClick: e,
+    className: s,
+    iconClassName: c,
     disabled: r,
-    ariaLabel: s,
-    areaSize: _ = "small",
-    size: u = "small",
-    color: m = "primary",
+    ariaLabel: _,
+    areaSize: m = "small",
+    size: l = "small",
+    color: u = "primary",
     colorToken: i,
-    opacity: l,
-    luminance: f,
-    ...d
+    opacity: f,
+    luminance: d,
+    ...p
   } = n;
   return /* @__PURE__ */ t(
     "button",
     {
       type: "button",
-      className: I(o.unset, o.root, c, o[_]),
-      onClick: a,
+      className: B(o.unset, o.root, s, o[m]),
+      onClick: e,
       disabled: r,
-      "aria-label": s,
-      ...d,
+      "aria-label": _,
+      ...p,
       children: /* @__PURE__ */ t(
-        x,
+        I,
         {
           as: "span",
-          name: e,
-          color: m,
-          size: u,
+          name: a,
+          color: u,
+          size: l,
           colorToken: i,
-          opacity: l,
-          luminance: f
+          opacity: f,
+          luminance: d,
+          className: c
         }
       )
     }
   );
 }
-const C = p.memo(k);
+const L = x.memo(k);
 export {
-  C as default
+  L as default
 };

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

@@ -3,6 +3,7 @@ import { ColorType } from '../../utils/ui';
 
 export interface LinkBaseProps {
     color?: ColorType;
+    theme?: 'default' | 'secondary';
     className?: string;
     disabled?: boolean;
     unstyled?: boolean;

package/dist/components/Link/Link.js

@@ -1,43 +1,44 @@
 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,
+import f from "react";
+import { clsx as _ } from "../../utils/clsx.js";
+import { getColor as r } from "../../utils/color.js";
+const d = "cfxui__Link__unsetAll__58fea", m = "cfxui__Link__root__a29b3", y = "cfxui__Link__unstyled__f020c", n = {
+  unsetAll: d,
   root: m,
   unstyled: y
 };
 function k(t) {
   const {
-    className: o,
-    disabled: n = !1,
-    unstyled: s = !1
+    className: e,
+    disabled: s = !1,
+    unstyled: o = !1
   } = t;
-  return d(e.unsetAll, e.root, {
-    [e.disabled]: n,
-    [e.unstyled]: s
-  }, o);
+  return _(n.unsetAll, n.root, {
+    [n.disabled]: s,
+    [n.unstyled]: o
+  }, e);
 }
 function x(t) {
   const {
-    color: o = "tertiary"
-  } = t;
+    color: e,
+    theme: s = "default"
+  } = t, o = () => e || (s === "default" ? "tertiary" : "primary");
   return {
-    "--anchor-color": a({ color: o }),
-    "--anchor-decoration-color-hover": a({
-      color: o,
-      opacity: 0.5
+    "--anchor-color": r({ color: o() }),
+    "--anchor-color-hover": r({
+      color: o(),
+      opacity: 0.6
     })
   };
 }
 function L(t) {
   const {
-    className: o,
-    children: n,
-    disabled: s = !1,
+    className: e,
+    children: s,
+    disabled: o = !1,
     ...l
   } = t, {
-    style: r
+    style: a
   } = l, c = k(t), i = x(t);
   return /* @__PURE__ */ u(
     "a",
@@ -45,18 +46,18 @@ function L(t) {
       ...l,
       style: {
         ...i,
-        ...r
+        ...a
       },
-      tabIndex: s ? -1 : 0,
-      "aria-disabled": s,
+      tabIndex: o ? -1 : 0,
+      "aria-disabled": o,
       className: c,
-      children: n
+      children: s
     }
   );
 }
-const g = _.memo(L);
+const A = f.memo(L);
 export {
-  g as default,
+  A as default,
   k as getLinkClassName,
   x as getLinkStyles
 };

package/dist/components/Link/LinkShowcase.js

@@ -1,32 +1,32 @@
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import n from "react";
+import t from "react";
 import d from "../Flex/Flex.js";
 import { Text as r } from "../Text/Text.js";
 import "../../utils/ui/ui.js";
-import t from "./ButtonLink.js";
+import n from "./ButtonLink.js";
 import l from "./Link.js";
 function c() {
   return /* @__PURE__ */ i(d, { gap: "large", vertical: !0, children: [
     /* @__PURE__ */ i(d, { gap: "medium", vertical: !0, children: [
-      /* @__PURE__ */ e(r, { children: "Color Default" }),
+      /* @__PURE__ */ e(r, { children: "Default Theme" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(l, { href: "/", children: "Link active" }) }),
-      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(l, { href: "/", disabled: !0, children: "Link disable" }) }),
-      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(l, { href: "/", unstyled: !0, children: "Link unstyled" }) })
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(l, { href: "/", disabled: !0, children: "Link disable" }) })
     ] }),
     /* @__PURE__ */ i(d, { gap: "medium", vertical: !0, children: [
-      /* @__PURE__ */ e(r, { children: "Color secondary" }),
+      /* @__PURE__ */ e(r, { children: "Secondary Theme" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(l, { href: "/", color: "secondary", children: "Link active" }) }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(l, { href: "/", color: "secondary", disabled: !0, children: "Link disable" }) })
     ] }),
     /* @__PURE__ */ i(d, { gap: "medium", vertical: !0, children: [
       /* @__PURE__ */ e(r, { children: "Color red" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(l, { href: "/", color: "red", children: "Link active" }) }),
-      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(l, { href: "/", color: "red", disabled: !0, children: "Link disable" }) })
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(l, { href: "/", color: "red", disabled: !0, children: "Link disable" }) }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(l, { href: "/", unstyled: !0, children: "This is an unstyled link" }) })
     ] }),
     /* @__PURE__ */ i(d, { gap: "medium", vertical: !0, children: [
       /* @__PURE__ */ e(r, { 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__ */ e("div", { children: /* @__PURE__ */ e(n, { children: "Link active" }) }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(n, { disabled: !0, children: "Link disable" }) })
     ] }),
     /* @__PURE__ */ i(d, { gap: "medium", vertical: !0, children: [
       /* @__PURE__ */ e(r, { children: "Inside text" }),
@@ -66,7 +66,7 @@ function c() {
     ] })
   ] });
 }
-const f = n.memo(c);
+const f = t.memo(c);
 export {
   f as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cfx-dev/ui-components",
   "private": false,
-  "version": "5.0.16",
+  "version": "5.0.17",
   "type": "module",
   "license": "MIT",
   "main": "dist/main.js",