@cfx-dev/ui-components 0.0.26 → 2.0.0

package/dist/components/Checkbox/Checkbox.js

@@ -1,42 +1,254 @@
-import { jsxs as b, jsx as a } from "react/jsx-runtime";
-import s from "react";
-import { clsx as h } from "../../utils/clsx.js";
-import '../../assets/Checkbox.css';const u = "_root_ucpv2_1", p = "_indicator_ucpv2_32", v = "_disabled_ucpv2_51", e = {
-  root: u,
-  "size-normal": "_size-normal_ucpv2_22",
-  "size-large": "_size-large_ucpv2_25",
-  indicator: p,
-  disabled: v,
-  "with-label": "_with-label_ucpv2_61"
-}, g = s.memo(function(n) {
-  const {
-    value: o,
-    onChange: l,
-    label: c,
-    size: r = "normal",
-    disabled: i = !1,
-    className: d
-  } = n, t = s.useId(), _ = s.useCallback(() => {
-    l(!o);
-  }, [o, l]), m = h(e.root, d, e[`size-${r}`], {
-    [e.disabled]: i,
-    [e["with-label"]]: !!c
+import { jsxs as z, jsx as f } from "react/jsx-runtime";
+import * as a from "react";
+import L from "react";
+import { u as S, f as y, c as j, a as W, P as O, b as A, d as B, e as H } from "../../index-CjWRnNpt.js";
+import { r as K } from "../../index-2hJuj4UN.js";
+import "../Icons/cfx-icons/Close.js";
+import "../Icons/cfx-icons/Controller.js";
+import "../Icons/cfx-icons/Copy.js";
+import "../Icons/cfx-icons/DownArrow.js";
+import "../Icons/cfx-icons/DownChevron.js";
+import "../Icons/cfx-icons/Download.js";
+import "../Icons/cfx-icons/Expand.js";
+import "../Icons/cfx-icons/ExternalLink.js";
+import "../Icons/cfx-icons/Heart.js";
+import "../Icons/cfx-icons/HeartFilled.js";
+import "../Icons/cfx-icons/Help.js";
+import "../Icons/cfx-icons/LeftArrow.js";
+import "../Icons/cfx-icons/LeftChevron.js";
+import "../Icons/cfx-icons/Map.js";
+import "../Icons/cfx-icons/Menu.js";
+import "../Icons/cfx-icons/Minus.js";
+import "../Icons/cfx-icons/More.js";
+import "../Icons/cfx-icons/MoreInfo.js";
+import "../Icons/cfx-icons/Pencil.js";
+import "../Icons/cfx-icons/Play.js";
+import "../Icons/cfx-icons/Plus.js";
+import "../Icons/cfx-icons/Refresh.js";
+import "../Icons/cfx-icons/RightArrow.js";
+import "../Icons/cfx-icons/RightChevron.js";
+import "../Icons/cfx-icons/Search.js";
+import "../Icons/cfx-icons/Sort.js";
+import "../Icons/cfx-icons/Square.js";
+import "../Icons/cfx-icons/SquareCheck.js";
+import "../Icons/cfx-icons/Stop.js";
+import $ from "../Icons/cfx-icons/Tick.js";
+import "../Icons/cfx-icons/Transfer.js";
+import "../Icons/cfx-icons/Trash.js";
+import "../Icons/cfx-icons/Undo.js";
+import "../Icons/cfx-icons/UpArrow.js";
+import "../Icons/cfx-icons/UpChevron.js";
+import "../Icons/cfx-icons/Upload.js";
+import "../Icons/cfx-icons/Users.js";
+import "../Icons/cfx-icons/Visibility.js";
+import "../Icons/cfx-icons/VisibilityOff.js";
+import "../Icons/cfx-icons/Warning.js";
+import "../Icons/cfx-icons-big/Like.js";
+import "../Icons/cfx-icons-big/Subscriptions.js";
+import "../Icons/cfx-icons-big/Upload.js";
+import "../Icons/cfx-icons-big/Warning.js";
+import { clsx as R } from "../../utils/clsx.js";
+import { getColor as q } from "../../utils/color.js";
+import '../../assets/Checkbox.css';function X(e, t) {
+  return a.useReducer((n, o) => t[n][o] ?? n, e);
+}
+var I = (e) => {
+  const { present: t, children: n } = e, o = F(t), s = typeof n == "function" ? n({ present: o.isPresent }) : a.Children.only(n), c = S(o.ref, G(s));
+  return typeof n == "function" || o.isPresent ? a.cloneElement(s, { ref: c }) : null;
+};
+I.displayName = "Presence";
+function F(e) {
+  const [t, n] = a.useState(), o = a.useRef({}), s = a.useRef(e), c = a.useRef("none"), l = e ? "mounted" : "unmounted", [u, m] = X(l, {
+    mounted: {
+      UNMOUNT: "unmounted",
+      ANIMATION_OUT: "unmountSuspended"
+    },
+    unmountSuspended: {
+      MOUNT: "mounted",
+      ANIMATION_END: "unmounted"
+    },
+    unmounted: {
+      MOUNT: "mounted"
+    }
   });
-  return /* @__PURE__ */ b("label", { className: m, htmlFor: t, children: [
-    /* @__PURE__ */ a(
-      "input",
+  return a.useEffect(() => {
+    const r = _(o.current);
+    c.current = u === "mounted" ? r : "none";
+  }, [u]), y(() => {
+    const r = o.current, p = s.current;
+    if (p !== e) {
+      const C = c.current, N = _(r);
+      e ? m("MOUNT") : N === "none" || (r == null ? void 0 : r.display) === "none" ? m("UNMOUNT") : m(p && C !== N ? "ANIMATION_OUT" : "UNMOUNT"), s.current = e;
+    }
+  }, [e, m]), y(() => {
+    if (t) {
+      const r = (i) => {
+        const N = _(o.current).includes(i.animationName);
+        i.target === t && N && K.flushSync(() => m("ANIMATION_END"));
+      }, p = (i) => {
+        i.target === t && (c.current = _(o.current));
+      };
+      return t.addEventListener("animationstart", p), t.addEventListener("animationcancel", r), t.addEventListener("animationend", r), () => {
+        t.removeEventListener("animationstart", p), t.removeEventListener("animationcancel", r), t.removeEventListener("animationend", r);
+      };
+    } else
+      m("ANIMATION_END");
+  }, [t, m]), {
+    isPresent: ["mounted", "unmountSuspended"].includes(u),
+    ref: a.useCallback((r) => {
+      r && (o.current = getComputedStyle(r)), n(r);
+    }, [])
+  };
+}
+function _(e) {
+  return (e == null ? void 0 : e.animationName) || "none";
+}
+function G(e) {
+  var o, s;
+  let t = (o = Object.getOwnPropertyDescriptor(e.props, "ref")) == null ? void 0 : o.get, n = t && "isReactWarning" in t && t.isReactWarning;
+  return n ? e.ref : (t = (s = Object.getOwnPropertyDescriptor(e, "ref")) == null ? void 0 : s.get, n = t && "isReactWarning" in t && t.isReactWarning, n ? e.props.ref : e.props.ref || e.ref);
+}
+var x = "Checkbox", [J, tt] = j(x), [Q, V] = J(x), M = a.forwardRef(
+  (e, t) => {
+    const {
+      __scopeCheckbox: n,
+      name: o,
+      checked: s,
+      defaultChecked: c,
+      required: l,
+      disabled: u,
+      value: m = "on",
+      onCheckedChange: r,
+      ...p
+    } = e, [i, C] = a.useState(null), N = S(t, (d) => C(d)), v = a.useRef(!1), P = i ? !!i.closest("form") : !0, [b = !1, E] = W({
+      prop: s,
+      defaultProp: c,
+      onChange: r
+    }), D = a.useRef(b);
+    return a.useEffect(() => {
+      const d = i == null ? void 0 : i.form;
+      if (d) {
+        const k = () => E(D.current);
+        return d.addEventListener("reset", k), () => d.removeEventListener("reset", k);
+      }
+    }, [i, E]), /* @__PURE__ */ z(Q, { scope: n, state: b, disabled: u, children: [
+      /* @__PURE__ */ f(
+        O.button,
+        {
+          type: "button",
+          role: "checkbox",
+          "aria-checked": h(b) ? "mixed" : b,
+          "aria-required": l,
+          "data-state": w(b),
+          "data-disabled": u ? "" : void 0,
+          disabled: u,
+          value: m,
+          ...p,
+          ref: N,
+          onKeyDown: A(e.onKeyDown, (d) => {
+            d.key === "Enter" && d.preventDefault();
+          }),
+          onClick: A(e.onClick, (d) => {
+            E((k) => h(k) ? !0 : !k), P && (v.current = d.isPropagationStopped(), v.current || d.stopPropagation());
+          })
+        }
+      ),
+      P && /* @__PURE__ */ f(
+        Y,
+        {
+          control: i,
+          bubbles: !v.current,
+          name: o,
+          value: m,
+          checked: b,
+          required: l,
+          disabled: u,
+          style: { transform: "translateX(-100%)" }
+        }
+      )
+    ] });
+  }
+);
+M.displayName = x;
+var T = "CheckboxIndicator", U = a.forwardRef(
+  (e, t) => {
+    const { __scopeCheckbox: n, forceMount: o, ...s } = e, c = V(T, n);
+    return /* @__PURE__ */ f(I, { present: o || h(c.state) || c.state === !0, children: /* @__PURE__ */ f(
+      O.span,
       {
-        type: "checkbox",
-        checked: o,
-        disabled: i,
-        onChange: _,
-        id: t
+        "data-state": w(c.state),
+        "data-disabled": c.disabled ? "" : void 0,
+        ...s,
+        ref: t,
+        style: { pointerEvents: "none", ...e.style }
+      }
+    ) });
+  }
+);
+U.displayName = T;
+var Y = (e) => {
+  const { control: t, checked: n, bubbles: o = !0, ...s } = e, c = a.useRef(null), l = B(n), u = H(t);
+  return a.useEffect(() => {
+    const m = c.current, r = window.HTMLInputElement.prototype, i = Object.getOwnPropertyDescriptor(r, "checked").set;
+    if (l !== n && i) {
+      const C = new Event("click", { bubbles: o });
+      m.indeterminate = h(n), i.call(m, h(n) ? !1 : n), m.dispatchEvent(C);
+    }
+  }, [l, n, o]), /* @__PURE__ */ f(
+    "input",
+    {
+      type: "checkbox",
+      "aria-hidden": !0,
+      defaultChecked: h(n) ? !1 : n,
+      ...s,
+      tabIndex: -1,
+      ref: c,
+      style: {
+        ...e.style,
+        ...u,
+        position: "absolute",
+        pointerEvents: "none",
+        opacity: 0,
+        margin: 0
       }
-    ),
-    /* @__PURE__ */ a("div", { className: e.indicator }),
-    /* @__PURE__ */ a("div", { className: e.label, children: c })
-  ] });
-});
+    }
+  );
+};
+function h(e) {
+  return e === "indeterminate";
+}
+function w(e) {
+  return h(e) ? "indeterminate" : e ? "checked" : "unchecked";
+}
+var Z = M, ee = U;
+const te = "_rootUnset_1i045_1", ne = "_root_1i045_1", oe = "_indicator_1i045_20", g = {
+  rootUnset: te,
+  root: ne,
+  indicator: oe,
+  "size-small": "_size-small_1i045_26",
+  "size-normal": "_size-normal_1i045_41",
+  "size-large": "_size-large_1i045_56"
+};
+function re(e) {
+  const {
+    id: t,
+    size: n = "normal",
+    rootClassName: o,
+    indicatorClassName: s,
+    colorToken: c,
+    color: l,
+    opacity: u,
+    luminance: m,
+    ...r
+  } = e, p = R(
+    g.root,
+    g.rootUnset,
+    g[`size-${n}`],
+    o
+  ), i = q(e);
+  return /* @__PURE__ */ f(Z, { ...r, id: t, style: { color: i }, className: p, children: /* @__PURE__ */ f(ee, { className: R(g.indicator, s), children: /* @__PURE__ */ f($, {}) }) });
+}
+const nt = L.memo(re);
 export {
-  g as Checkbox
+  nt as default
 };

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

@@ -0,0 +1,2 @@
+export { default as Checkbox } from './Checkbox';
+export type { CheckboxSize, CheckboxProps } from './Checkbox';

package/dist/components/Checkbox/index.js

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

package/dist/components/ClipboardButton/ClipboardButton.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { ButtonProps } from '../Button/Button';
+import { FixedOn } from '../Title/Title';
+
+export declare const CLIPBOARD_TITLE_APPEARANCE = 1000;
+export interface ClipboardButtonOnlyProps {
+    hoverTitle?: string;
+    copiedTitle: string;
+    textToCopy: string;
+    titleAppearanceTimeout?: number;
+}
+export type ClipboardButtonProps = ButtonProps & ClipboardButtonOnlyProps & {
+    fixedOn?: FixedOn;
+};
+declare const _default: React.NamedExoticComponent<ClipboardButtonProps>;
+export default _default;

package/dist/components/ClipboardButton/ClipboardButton.js

@@ -0,0 +1,50 @@
+import { jsx as u } from "react/jsx-runtime";
+import t from "react";
+import { Button as R } from "../Button/Button.js";
+import { Title as x } from "../Title/Title.js";
+import { clsx as A } from "../../utils/clsx.js";
+import { noop as E } from "../../utils/functional.js";
+import '../../assets/ClipboardButton.css';const h = "_root_185u8_1", P = "_copied_185u8_1", s = {
+  root: h,
+  copied: P
+}, k = 1e3;
+function w(p) {
+  const {
+    hoverTitle: a,
+    copiedTitle: f,
+    textToCopy: r,
+    titleAppearanceTimeout: n = k,
+    fixedOn: m,
+    onClick: i = E,
+    ...d
+  } = p, [c, l] = t.useState(!1), o = t.useRef(null), e = t.useRef(null), C = t.useCallback((b) => {
+    if (i(b), e.current === null)
+      throw new Error("Clipboard API is not supported in this browser");
+    e.current.writeText(r), o.current !== null && clearTimeout(o.current), o.current = setTimeout(() => {
+      o.current = null, l(!1);
+    }, n), l(!0);
+  }, [i, r, n]);
+  t.useEffect(() => ("clipboard" in navigator && (e.current = navigator.clipboard), () => {
+    e.current = null;
+  }), []), t.useEffect(
+    () => () => {
+      o.current !== null && clearTimeout(o.current);
+    },
+    []
+  );
+  const T = c ? f : a, _ = A(s.root, { [s.copied]: c });
+  return /* @__PURE__ */ u(
+    x,
+    {
+      title: T,
+      fixedOn: m,
+      rootClassName: _,
+      children: /* @__PURE__ */ u(R, { ...d, onClick: C })
+    }
+  );
+}
+const O = t.memo(w);
+export {
+  k as CLIPBOARD_TITLE_APPEARANCE,
+  O as default
+};

package/dist/components/ClipboardButton/index.js

@@ -0,0 +1 @@
+

package/dist/components/Dot/Dot.d.ts

@@ -1,6 +1,9 @@
 import { default as React } from 'react';
+import { GetColorProps } from '../../utils/color';
 
-export interface DotProps {
-    color?: 'primary';
+export type DotSize = 'small' | 'normal' | 'large';
+export interface DotProps extends GetColorProps {
+    size?: DotSize;
+    className?: string;
 }
 export declare const Dot: React.ForwardRefExoticComponent<DotProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Dot/Dot.js

@@ -1,14 +1,29 @@
-import { jsx as m } from "react/jsx-runtime";
-import a from "react";
-import { clsx as n } from "../../utils/clsx.js";
-import '../../assets/Dot.css';const e = "_root_pb33j_1", o = {
-  root: e
-}, _ = a.forwardRef(function(r, t) {
+import { jsx as e } from "react/jsx-runtime";
+import l from "react";
+import { clsx as m } from "../../utils/clsx.js";
+import { getColor as i } from "../../utils/color.js";
+import '../../assets/Dot.css';const _ = "_root_8a36f_1", r = {
+  root: _,
+  "size-small": "_size-small_8a36f_6",
+  "size-normal": "_size-normal_8a36f_10",
+  "size-large": "_size-large_8a36f_14"
+}, g = l.forwardRef(function(o, t) {
   const {
-    color: s = "primary"
-  } = r, c = n(o.root, o[`color-${s}`]);
-  return /* @__PURE__ */ m("div", { ref: t, className: c });
+    size: a = "normal",
+    className: s
+  } = o;
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      ref: t,
+      className: m(r.root, r[`size-${a}`], s),
+      style: { backgroundColor: i({
+        ...o,
+        color: o.color || "primary"
+      }) }
+    }
+  );
 });
 export {
-  _ as Dot
+  g as Dot
 };

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

@@ -0,0 +1,2 @@
+export { Dot } from './Dot';
+export type { DotProps, DotSize } from './Dot';

package/dist/components/Dot/index.js

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

package/dist/components/Flyout/Flyout.js

@@ -1,60 +1,61 @@
-import { jsxs as i, jsx as s } from "react/jsx-runtime";
-import _ from "react";
-import { F as p } from "../../Combination-Dp_plIQU.js";
-import { Button as h } from "../Button/Button.js";
-import { Interactive as f } from "../Interactive/Interactive.js";
-import { I as u } from "../../Icons-BlBKvJD8.js";
-import { clsx as l } from "../../utils/clsx.js";
-import { noop as v } from "../../utils/functional.js";
-import { useOutlet as b, useKeyboardClose as z } from "../../utils/hooks.js";
-import '../../assets/Flyout.css';const N = "_root_11ks7_1", C = "_holder_11ks7_6", y = "_active_11ks7_15", F = "_backdrop_11ks7_15", x = "_mask_11ks7_28", I = "_content_11ks7_90", L = "_header_11ks7_95", O = "_title_11ks7_101", e = {
-  root: N,
-  "size-normal": "_size-normal_11ks7_6",
+import { jsxs as d, jsx as o } from "react/jsx-runtime";
+import i from "react";
+import { F as p } from "../../Combination-BRUj3CHE.js";
+import { Button as v } from "../Button/Button.js";
+import { Interactive as h } from "../Interactive/Interactive.js";
+import { clsx as c } from "../../utils/clsx.js";
+import { noop as f } from "../../utils/functional.js";
+import "../../utils/hooks/useGlobalKeyboardEvent.js";
+import { useKeyboardClose as k } from "../../utils/hooks/useKeyboardClose.js";
+import { useOutlet as q } from "../../utils/hooks/useOutlet.js";
+import '../../assets/Flyout.css';const b = "_root_6qvdu_1", C = "_holder_6qvdu_6", N = "_active_6qvdu_15", z = "_backdrop_6qvdu_15", y = "_mask_6qvdu_28", F = "_content_6qvdu_90", L = "_header_6qvdu_95", x = "_title_6qvdu_101", e = {
+  root: b,
+  "size-normal": "_size-normal_6qvdu_6",
   holder: C,
-  "size-small": "_size-small_11ks7_9",
-  "size-xsmall": "_size-xsmall_11ks7_12",
-  active: y,
-  backdrop: F,
-  "backdrop-appearance": "_backdrop-appearance_11ks7_1",
-  mask: x,
-  "holder-appearance": "_holder-appearance_11ks7_1",
-  content: I,
+  "size-small": "_size-small_6qvdu_9",
+  "size-xsmall": "_size-xsmall_6qvdu_12",
+  active: N,
+  backdrop: z,
+  "backdrop-appearance": "_backdrop-appearance_6qvdu_1",
+  mask: y,
+  "holder-appearance": "_holder-appearance_6qvdu_1",
+  content: F,
   header: L,
-  title: O
-}, E = "flyout-outlet";
-function T(c) {
+  title: x
+}, O = "flyout-outlet";
+function E(n) {
   const {
-    disabled: o = !1,
+    disabled: t = !1,
     size: a = "normal",
-    onClose: r = v,
-    children: n,
-    holderClassName: d
-  } = c, m = b(E);
-  _.useEffect(() => {
-    if (o)
+    onClose: r = f,
+    children: l,
+    holderClassName: m
+  } = n, _ = q(O);
+  i.useEffect(() => {
+    if (t)
       return;
-    const t = document.getElementById("cfxui-root");
-    return t == null || t.classList.add("shrink"), () => t == null ? void 0 : t.classList.remove("shrink");
-  }, [o]), z(r);
-  const k = l(e.root, e[`size-${a}`], {
-    [e.active]: !o
+    const s = document.getElementById("cfxui-root");
+    return s == null || s.classList.add("shrink"), () => s == null ? void 0 : s.classList.remove("shrink");
+  }, [t]), k(r);
+  const u = c(e.root, e[`size-${a}`], {
+    [e.active]: !t
   });
-  return /* @__PURE__ */ s(m, { children: /* @__PURE__ */ i("div", { className: k, children: [
-    /* @__PURE__ */ s(f, { showPointer: !1, className: e.backdrop, onClick: r }),
-    /* @__PURE__ */ s("div", { className: e.mask, children: /* @__PURE__ */ s("div", { className: l(e.holder, d), children: /* @__PURE__ */ s(p, { disabled: !!o, className: e.content, children: n }) }) })
+  return /* @__PURE__ */ o(_, { children: /* @__PURE__ */ d("div", { className: u, children: [
+    /* @__PURE__ */ o(h, { showPointer: !1, className: e.backdrop, onClick: r }),
+    /* @__PURE__ */ o("div", { className: e.mask, children: /* @__PURE__ */ o("div", { className: c(e.holder, m), children: /* @__PURE__ */ o(p, { disabled: !!t, className: e.content, children: l }) }) })
   ] }) });
 }
-T.Header = _.forwardRef(function(o, a) {
+E.Header = i.forwardRef(function(t, a) {
   const {
     onClose: r,
-    children: n
-  } = o;
-  return /* @__PURE__ */ i("div", { ref: a, className: e.header, children: [
-    /* @__PURE__ */ s("div", { className: e.title, children: n }),
-    !!r && /* @__PURE__ */ s(h, { size: "large", icon: u.exit, onClick: r })
+    children: l
+  } = t;
+  return /* @__PURE__ */ d("div", { ref: a, className: e.header, children: [
+    /* @__PURE__ */ o("div", { className: e.title, children: l }),
+    !!r && /* @__PURE__ */ o(v, { icon: "Close", onClick: r })
   ] });
 });
 export {
-  E as FLYOUT_OUTLET_ID,
-  T as Flyout
+  O as FLYOUT_OUTLET_ID,
+  E as Flyout
 };

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

@@ -1,11 +1,12 @@
 import { default as React } from 'react';
-import { TextColor, TextOpacity, TextSize } from '../Text/Text.types';
+import { IconName } from '../Icons';
+import { TextColorProps, TextSize } from '../Text';
 
-export interface IconProps {
-    color?: TextColor;
-    size?: TextSize;
-    opacity?: TextOpacity;
+export type IconSize = TextSize;
+export interface IconProps extends TextColorProps {
+    as?: React.ElementType;
+    size?: IconSize;
     className?: string;
-    children: React.ReactNode;
+    name: IconName;
 }
 export declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Icon/Icon.js

@@ -1,24 +1,36 @@
-import { jsx as f } from "react/jsx-runtime";
+import { jsx as n } from "react/jsx-runtime";
 import l from "react";
-import { TEXT_OPACITY_MAP as p } from "../Text/Text.js";
-import { ui as o } from "../ui.js";
-import { clsx as _ } from "../../utils/clsx.js";
-import '../../assets/Icon.css';const d = "_root_sqbzn_1", u = {
-  root: d
-}, h = l.forwardRef(function(t, r) {
+import { I as d } from "../../cfxIcons-BlbKR-zU.js";
+import "../Icons/cfx-icons-big/Like.js";
+import "../Icons/cfx-icons-big/Subscriptions.js";
+import "../Icons/cfx-icons-big/Upload.js";
+import "../Icons/cfx-icons-big/Warning.js";
+import { getTextOpacity as h } from "../Text/Text.js";
+import { ui as t } from "../ui.js";
+import { clsx as y } from "../../utils/clsx.js";
+import { getColor as z } from "../../utils/color.js";
+import '../../assets/Icon.css';const S = "_root_sqbzn_1", _ = {
+  root: S
+}, k = l.forwardRef(function(r, e) {
   const {
-    color: c = "inherit",
-    size: s = "normal",
-    opacity: n = "100",
-    className: i,
-    children: e
-  } = t, m = _(u.root, i), a = {
-    color: o.color(c),
-    fontSize: o.fontSize(s),
-    opacity: p[n]
-  };
-  return /* @__PURE__ */ f("div", { ref: r, style: a, className: m, children: e });
+    as: i = "div",
+    size: o = "normal",
+    opacity: m,
+    className: c,
+    name: s
+  } = r, p = {
+    color: z({
+      ...r,
+      opacity: h(m)
+    }),
+    width: t.fontSize(o),
+    height: t.fontSize(o)
+  }, a = {
+    width: t.fontSize(o),
+    height: t.fontSize(o)
+  }, f = d[s];
+  return /* @__PURE__ */ n(i, { ref: e, style: p, className: y(_.root, c), children: /* @__PURE__ */ n(f, { style: a }) });
 });
 export {
-  h as Icon
+  k as Icon
 };

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

@@ -0,0 +1,3 @@
+export { Icon } from './Icon';
+export type { IconProps, IconSize } from './Icon';
+export type { IconName } from '../Icons';

package/dist/components/Icon/index.js

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

package/dist/components/IconBig/IconBig.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { IconBigName } from '../Icons';
+import { TextColorProps } from '../Text';
+
+export type IconBigSize = 'small' | 'normal' | 'large';
+export interface IconBigProps extends TextColorProps {
+    as?: React.ElementType;
+    size?: IconBigSize;
+    className?: string;
+    name: IconBigName;
+}
+export declare const IconBig: React.ForwardRefExoticComponent<IconBigProps & React.RefAttributes<HTMLDivElement>>;