@cfx-dev/ui-components 2.1.23 → 3.0.0

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

@@ -1,6 +1,6 @@
 import { jsx as m } from "react/jsx-runtime";
 import { clsx as u } from "../../../utils/clsx.js";
-import '../../../assets/Pad.css';const i = "_root_1aquh_1", o = {
+const i = "_root_1aquh_1", o = {
   root: i,
   "offset-none": "_offset-none_1aquh_1",
   "offset-hairthin": "_offset-hairthin_1aquh_4",

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

@@ -1,6 +1,6 @@
 import { jsxs as c, jsx as l } from "react/jsx-runtime";
 import { clsx as n } from "../../../utils/clsx.js";
-import '../../../assets/Page.css';const d = "_root_18k7e_1", _ = "_loader_18k7e_8", m = "_wtf_18k7e_1", o = {
+const d = "_root_18k7e_1", _ = "_loader_18k7e_8", m = "_wtf_18k7e_1", o = {
   root: d,
   loader: _,
   wtf: m

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

@@ -3,7 +3,7 @@ import "react";
 import "../../Interactive/Interactive.js";
 import "../../../utils/clsx.js";
 import "../../../utils/math.js";
-import { R } from "../../../Rail-nVRissv6.js";
+import { R } from "../../../Rail-XT5PwAlx.js";
 export {
   R as Rail
 };

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

@@ -3,7 +3,7 @@ import r from "react";
 import { useContextualStyle as W } from "../../Style/Style.js";
 import { clsx as b } from "../../../utils/clsx.js";
 import { mergeRefs as k } from "../../../utils/mergeRefs.js";
-import { s as o, R as w } from "../../../Rail-nVRissv6.js";
+import { s as o, R as w } from "../../../Rail-XT5PwAlx.js";
 const N = {
   size: 0,
   scrollPos: 0,

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

@@ -3,7 +3,7 @@ import N, { createElement as k, PureComponent as re } from "react";
 import { _ as ie, a as ne } from "../../../inheritsLoose-CyjgKRgL.js";
 import { clsx as oe } from "../../../utils/clsx.js";
 import { Scrollable as le } from "./Scrollable.js";
-import { s as se } from "../../../Rail-nVRissv6.js";
+import { s as se } from "../../../Rail-XT5PwAlx.js";
 function $(r) {
   if (r === void 0) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
   return r;

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

@@ -1,4 +1,4 @@
-import { R as o } from "../../../Rail-nVRissv6.js";
+import { R as o } from "../../../Rail-XT5PwAlx.js";
 import { Scrollable as e } from "./Scrollable.js";
 import { VirtualScrollable as f } from "./VirtualScrollable.js";
 export {

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

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { LinkBaseProps } from './Link';
+
+export type LinkProps = React.ButtonHTMLAttributes<HTMLButtonElement> & LinkBaseProps & {
+    type?: HTMLButtonElement['type'];
+};
+declare function ButtonLink(props: LinkProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof ButtonLink>;
+export default _default;

package/dist/components/Link/ButtonLink.js

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

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

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+
+export interface LinkBaseProps {
+    className?: string;
+    disabled?: boolean;
+    unstyled?: boolean;
+    theme?: 'default' | 'secondary';
+}
+export declare function getLinkClassName(props: LinkBaseProps): string;
+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>;
+export default _default;

package/dist/components/Link/Link.js

@@ -0,0 +1,35 @@
+import { jsx as r } from "react/jsx-runtime";
+import c from "react";
+import { clsx as d } from "../../utils/clsx.js";
+const u = "_unsetAll_6pbf7_1", f = "_root_6pbf7_5", i = "_unstyled_6pbf7_30", m = "_secondary_6pbf7_33", s = {
+  unsetAll: u,
+  root: f,
+  unstyled: i,
+  secondary: m
+};
+function _(t) {
+  const {
+    className: n,
+    disabled: e = !1,
+    unstyled: o = !1,
+    theme: l = "default"
+  } = t;
+  return d(s.unsetAll, s.root, s[l], {
+    [s.disabled]: e,
+    [s.unstyled]: o
+  }, n);
+}
+function y(t) {
+  const {
+    className: n,
+    children: e,
+    disabled: o = !1,
+    ...l
+  } = t, a = _(t);
+  return /* @__PURE__ */ r("a", { ...l, "aria-disabled": o, className: a, children: e });
+}
+const A = c.memo(y);
+export {
+  A as default,
+  _ as getLinkClassName
+};

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

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+
+declare function LinkShowcase(): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof LinkShowcase>;
+export default _default;

package/dist/components/Link/LinkShowcase.js

@@ -0,0 +1,62 @@
+import { jsxs as i, 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 l from "./ButtonLink.js";
+import t 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: [
+        "Out of link text. ",
+        /* @__PURE__ */ e(t, { 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: [
+        "Out of link text. ",
+        /* @__PURE__ */ e(t, { href: "/", children: "Link text" })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ i(n, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(r, { 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: [
+        "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: [
+        "Out of link text. ",
+        /* @__PURE__ */ e("a", { href: "/", children: "Link text" })
+      ] }) })
+    ] })
+  ] });
+}
+const f = d.memo(c);
+export {
+  f as default
+};

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

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

package/dist/components/Link/index.js

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

package/dist/components/Loaf/Loaf.js

@@ -1,7 +1,7 @@
 import { jsx as c } from "react/jsx-runtime";
 import i from "react";
 import { clsx as m } from "../../utils/clsx.js";
-import '../../assets/Loaf.css';const n = "_root_gg27t_1", f = "_bright_gg27t_14", o = {
+const n = "_root_gg27t_1", f = "_bright_gg27t_14", o = {
   root: n,
   "color-normal": "_color-normal_gg27t_10",
   bright: f,

package/dist/components/Modal/Modal.js

@@ -1,60 +1,60 @@
-import { jsxs as i, jsx as a } from "react/jsx-runtime";
+import { jsxs as n, jsx as a } from "react/jsx-runtime";
 import N from "react";
 import "../Button/Button.js";
 import { ButtonBar as k } from "../Button/ButtonBar.js";
 import "../Button/LinkButton.js";
 import y from "../IconButton/IconButton.js";
 import { Overlay as c } from "../Overlay/Overlay.js";
-import { Text as d } from "../Text/Text.js";
-import { clsx as s } from "../../utils/clsx.js";
+import { Text as m } from "../Text/Text.js";
+import { clsx as l } from "../../utils/clsx.js";
 import "../../utils/hooks/useGlobalKeyboardEvent.js";
-import { useKeyboardClose as w } from "../../utils/hooks/useKeyboardClose.js";
+import { useKeyboardClose as z } from "../../utils/hooks/useKeyboardClose.js";
 import "../../index-2hJuj4UN.js";
-import '../../assets/Modal.css';const B = "_root_lmrwf_1", v = "_close_lmrwf_36", x = "_header_lmrwf_42", g = "_footer_lmrwf_52", r = {
+const B = "_root_zn44h_1", v = "_close_zn44h_37", x = "_header_zn44h_43", g = "_footer_zn44h_53", r = {
   root: B,
-  "modal-appearance": "_modal-appearance_lmrwf_1",
+  "modal-appearance": "_modal-appearance_zn44h_1",
   close: v,
   header: x,
   footer: g
 };
-function f(t) {
+function p(t) {
   const {
     onClose: e,
-    children: l,
+    children: s,
     className: o,
-    overlayClassName: p,
-    backdropClassName: _,
-    contentClassName: b,
-    ariaDescribedby: h,
+    overlayClassName: f,
+    backdropClassName: h,
+    contentClassName: _,
+    ariaDescribedby: b,
     ariaLabelledby: u,
-    disableBackdropClose: n = !1,
+    disableBackdropClose: i = !1,
     disableFocusLock: C = !1
-  } = t, m = N.useCallback(() => {
-    n || !e || e();
-  }, [e, n]);
-  return w(m), /* @__PURE__ */ i(c, { className: s(r.overlay, p), children: [
+  } = t, d = N.useCallback(() => {
+    i || !e || e();
+  }, [e, i]);
+  return z(d), /* @__PURE__ */ n(c, { className: l(r.overlay, f), children: [
     /* @__PURE__ */ a(
       c.Backdrop,
       {
-        onClick: m,
-        className: s(r.backdrop, _)
+        onClick: d,
+        className: l(r.backdrop, h)
       }
     ),
     /* @__PURE__ */ a(
       c.Content,
       {
-        className: b,
+        className: _,
         disableFocusLock: C,
-        children: /* @__PURE__ */ i(
+        children: /* @__PURE__ */ n(
           "div",
           {
             role: "dialog",
-            "aria-describedby": h,
+            "aria-describedby": b,
             "aria-labelledby": u,
-            className: s(r.root, o),
+            className: l(r.root, o),
             children: [
               !!e && /* @__PURE__ */ a(y, { areaSize: "large", className: r.close, name: "Close", onClick: e }),
-              l
+              s
             ]
           }
         )
@@ -62,22 +62,22 @@ function f(t) {
     )
   ] });
 }
-f.Header = function(e) {
+p.Header = function(e) {
   const {
-    title: l,
+    title: s,
     description: o
   } = e;
-  return /* @__PURE__ */ i("div", { className: r.header, children: [
+  return /* @__PURE__ */ n("div", { className: r.header, children: [
     /* @__PURE__ */ a(
-      d,
+      m,
       {
         weight: "bold",
         size: "large",
-        children: l
+        children: s
       }
     ),
     o && /* @__PURE__ */ a(
-      d,
+      m,
       {
         size: "small",
         color: "secondary",
@@ -86,13 +86,13 @@ f.Header = function(e) {
     )
   ] });
 };
-f.Footer = function(e) {
+p.Footer = function(e) {
   const {
-    className: l,
+    className: s,
     ...o
   } = e;
-  return /* @__PURE__ */ a(k, { ...o, className: s(r.footer, l) });
+  return /* @__PURE__ */ a(k, { ...o, className: l(r.footer, s) });
 };
 export {
-  f as Modal
+  p as Modal
 };

package/dist/components/NavList/NavList.js

@@ -4,7 +4,7 @@ import { Interactive as d } from "../Interactive/Interactive.js";
 import { clsx as _ } from "../../utils/clsx.js";
 import { noop as f } from "../../utils/functional.js";
 import { getValue as i } from "../../utils/getValue.js";
-import '../../assets/NavList.css';const p = "_root_u7cv2_1", u = "_item_u7cv2_5", N = "_active_u7cv2_20", h = "_icon_u7cv2_30", c = {
+const p = "_root_u7cv2_1", u = "_item_u7cv2_5", N = "_active_u7cv2_20", h = "_icon_u7cv2_30", c = {
   root: p,
   item: u,
   active: N,

package/dist/components/Overlay/Overlay.js

@@ -6,7 +6,7 @@ import { clsx as n } from "../../utils/clsx.js";
 import "../../utils/hooks/useGlobalKeyboardEvent.js";
 import "../../utils/hooks/useKeyboardClose.js";
 import { useOutlet as _ } from "../../utils/hooks/useOutlet.js";
-import '../../assets/Overlay.css';const f = "_root_17xdt_1", p = "_backdrop_17xdt_9", u = "_content_17xdt_27", a = {
+const f = "_root_17xdt_1", p = "_backdrop_17xdt_9", u = "_content_17xdt_27", a = {
   root: f,
   backdrop: p,
   "backdrop-appearance": "_backdrop-appearance_17xdt_1",

package/dist/components/Popover/Popover.js

@@ -2,7 +2,7 @@ import { jsxs as d, jsx as u } from "react/jsx-runtime";
 import N from "react";
 import { Interactive as x } from "../Interactive/Interactive.js";
 import { clsx as t } from "../../utils/clsx.js";
-import '../../assets/Popover.css';const C = "_root_3gp1h_1", w = "_active_3gp1h_4", M = "_popover_3gp1h_4", P = "_appearance_3gp1h_1", o = {
+const C = "_root_3gp1h_1", w = "_active_3gp1h_4", M = "_popover_3gp1h_4", P = "_appearance_3gp1h_1", o = {
   root: C,
   active: w,
   popover: M,

package/dist/components/Popover/PopoverShowcase.js

@@ -8,7 +8,7 @@ import "../../utils/hooks/useGlobalKeyboardEvent.js";
 import "../../utils/hooks/useKeyboardClose.js";
 import "../../index-2hJuj4UN.js";
 import { Popover as l } from "./Popover.js";
-import '../../assets/PopoverShowcase.css';const v = "_popover_1s88x_1", u = {
+const v = "_popover_1s88x_1", u = {
   popover: v
 };
 function c() {

package/dist/components/PremiumBadge/PremiumBadge.js

@@ -2,7 +2,7 @@ import { jsx as e } from "react/jsx-runtime";
 import a from "react";
 import { Title as m } from "../Title/Title.js";
 import { clsx as s } from "../../utils/clsx.js";
-import '../../assets/PremiumBadge.css';const g = "_root_137v5_1", c = {
+const g = "_root_137v5_1", c = {
   root: g
 }, t = {
   ag: {

package/dist/components/Prose/Prose.js

@@ -1,5 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
-import '../../assets/Prose.css';const r = "_root_n8l9t_1", s = {
+const r = "_root_n8l9t_1", s = {
   root: r
 };
 function c({

package/dist/components/Radio/Radio.js

@@ -1,7 +1,7 @@
 import { jsxs as g, jsx as o } from "react/jsx-runtime";
 import s from "react";
 import { clsx as h } from "../../utils/clsx.js";
-import '../../assets/Radio.css';const u = "_root_1yglr_1", p = "_indicator_1yglr_29", x = "_disabled_1yglr_44", e = {
+const u = "_root_1yglr_1", p = "_indicator_1yglr_29", x = "_disabled_1yglr_44", e = {
   root: u,
   "size-normal": "_size-normal_1yglr_19",
   "size-large": "_size-large_1yglr_22",

package/dist/components/Select/Select.js

@@ -7,7 +7,7 @@ import { f as fn, _ as xe, c as Io } from "../../tslib.es6-CBKHJX9H.js";
 import { a as _o, u as Mo } from "../../medium-JVtzoF2c.js";
 import { Icon as Lo } from "../Icon/Icon.js";
 import { clsx as Vt } from "../../utils/clsx.js";
-import '../../assets/Select.css';var pn = function(e) {
+var pn = function(e) {
   var t = e.sideCar, n = fn(e, ["sideCar"]);
   if (!t)
     throw new Error("Sidecar: please provide `sideCar` property to import the right car");

package/dist/components/Separator/Separator.js

@@ -1,6 +1,6 @@
 import { jsxs as _, jsx as t } from "react/jsx-runtime";
 import { clsx as l } from "../../utils/clsx.js";
-import '../../assets/Separator.css';const p = "_root_dsunb_1", i = "_separator_dsunb_4", c = "_content_dsunb_42", d = "_thin_dsunb_45", m = "_vertical_dsunb_51", u = "_text_dsunb_98", s = {
+const p = "_root_dsunb_1", i = "_separator_dsunb_4", c = "_content_dsunb_42", d = "_thin_dsunb_45", m = "_vertical_dsunb_51", u = "_text_dsunb_98", s = {
   root: p,
   "separator-offset-none": "_separator-offset-none_dsunb_4",
   "separator-offset-hairthin": "_separator-offset-hairthin_dsunb_7",

package/dist/components/Shroud/Shroud.js

@@ -6,7 +6,7 @@ import "../../utils/hooks/useGlobalKeyboardEvent.js";
 import "../../utils/hooks/useKeyboardClose.js";
 import { useWindowResize as v } from "../../utils/hooks/useWindowResize.js";
 import { useOutlet as x } from "../../utils/hooks/useOutlet.js";
-import '../../assets/Shroud.css';const b = "_root_7v6x1_1", g = "_tile_7v6x1_6", e = {
+const b = "_root_7v6x1_1", g = "_tile_7v6x1_6", e = {
   root: b,
   tile: g
 }, P = r.forwardRef(function(c, n) {

package/dist/components/Skeleton/Skeleton.js

@@ -1,7 +1,7 @@
 import { jsx as m } from "react/jsx-runtime";
 import n from "react";
 import { TextSizeEnum as l } from "../Text/Text.types.js";
-import '../../assets/Skeleton.css';const r = "_skeleton_fx7ao_1", i = "_shimmer_fx7ao_1", f = {
+const r = "_skeleton_fx7ao_1", i = "_shimmer_fx7ao_1", f = {
   skeleton: r,
   shimmer: i
 };

package/dist/components/Spacer/Spacer.js

@@ -1,6 +1,6 @@
 import { jsx as o } from "react/jsx-runtime";
 import { clsx as l } from "../../utils/clsx.js";
-import '../../assets/Spacer.css';const r = "_root_x8a9c_1", z = "_horizontal_x8a9c_1", c = "_vertical_x8a9c_37", e = {
+const r = "_root_x8a9c_1", z = "_horizontal_x8a9c_1", c = "_vertical_x8a9c_37", e = {
   root: r,
   horizontal: z,
   "size-none": "_size-none_x8a9c_4",

package/dist/components/Switch/Switch.js

@@ -3,7 +3,7 @@ import * as a from "react";
 import U from "react";
 import { c as B, u as H, a as I, P as _, b as M, d as j, e as q } from "../../index-CjWRnNpt.js";
 import { clsx as C } from "../../utils/clsx.js";
-import '../../assets/Switch.css';var S = "Switch", [z, Y] = B(S), [A, O] = z(S), P = a.forwardRef(
+var S = "Switch", [z, Y] = B(S), [A, O] = z(S), P = a.forwardRef(
   (t, s) => {
     const {
       __scopeSwitch: e,

package/dist/components/Table/Table.d.ts

@@ -27,6 +27,7 @@ export interface TableProps {
     sortBy?: string;
     sortOrder?: 'asc' | 'desc';
     onSortChange?: (sortBy: string, sortOrder: 'asc' | 'desc') => void;
+    className?: string;
 }
-export declare function Table({ headers, data, includeRadio, loading, onSelectChange, dataContainer, selectedRow: outerSelectedRow, sortBy: outerSortBy, sortOrder: outerSortOrder, onSortChange, }: TableProps): import("react/jsx-runtime").JSX.Element;
+export declare function Table({ headers, data, includeRadio, loading, onSelectChange, dataContainer, selectedRow: outerSelectedRow, sortBy: outerSortBy, sortOrder: outerSortOrder, onSortChange, className, }: TableProps): import("react/jsx-runtime").JSX.Element;
 export {};