@cfx-dev/ui-components 1.0.0 → 2.0.0

package/dist/components/Icons/cfxIconsBig.d.ts

@@ -0,0 +1,4 @@
+export { default as Like } from './cfx-icons-big/Like';
+export { default as Subscriptions } from './cfx-icons-big/Subscriptions';
+export { default as Upload } from './cfx-icons-big/Upload';
+export { default as Warni } from './cfx-icons-big/Warning';

package/dist/components/Icons/cfxIconsBig.js

@@ -0,0 +1,10 @@
+import { default as r } from "./cfx-icons-big/Like.js";
+import { default as t } from "./cfx-icons-big/Subscriptions.js";
+import { default as p } from "./cfx-icons-big/Upload.js";
+import { default as d } from "./cfx-icons-big/Warning.js";
+export {
+  r as Like,
+  t as Subscriptions,
+  p as Upload,
+  d as Warni
+};

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

@@ -0,0 +1,3 @@
+export * as Icons from './cfxIcons';
+export * as IconsBig from './cfxIconsBig';
+export type { IconName, IconBigName } from './Icons.types';

package/dist/components/Icons/index.js

@@ -0,0 +1,6 @@
+import { I as s } from "../../cfxIcons-BlbKR-zU.js";
+import { I as a } from "../../cfxIconsBig-CNY8zL27.js";
+export {
+  s as Icons,
+  a as IconsBig
+};

package/dist/components/InfoPanel/InfoPanel.d.ts

@@ -1,13 +1,16 @@
 import { default as React } from 'react';
+import { IconName } from '../Icon';
 
-export type InfoPanelType = 'default' | 'error' | 'success' | 'warning';
-export type InfoPanelSize = 'auto' | 'small' | 'normal' | 'large';
-export interface InfoPanelProps {
+export type InfoPanelType = 'neutral' | 'error' | 'success' | 'warning';
+export type InfoPanelSize = 'small' | 'normal' | 'large';
+export interface InfoPanelProps extends React.PropsWithChildren {
     type?: InfoPanelType;
     size?: InfoPanelSize;
-    icon?: React.ReactNode;
-    children?: React.ReactNode;
+    icon?: IconName;
     className?: string;
-    inline?: boolean;
+    onClick?: () => void;
+    ariaLabel?: string;
 }
-export declare function InfoPanel(props: InfoPanelProps): import("react/jsx-runtime").JSX.Element;
+declare function InfoPanel(props: InfoPanelProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof InfoPanel>;
+export default _default;

package/dist/components/InfoPanel/InfoPanel.js

@@ -1,34 +1,56 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { clsx as m } from "../../utils/clsx.js";
-import '../../assets/InfoPanel.css';const p = "_root_43rns_1", y = "_inline_43rns_37", d = "_icon_43rns_58", f = "_content_43rns_61", n = {
-  root: p,
-  "type-default": "_type-default_43rns_11",
-  "type-error": "_type-error_43rns_15",
-  "type-success": "_type-success_43rns_19",
-  "type-warning": "_type-warning_43rns_23",
-  "size-small": "_size-small_43rns_27",
-  "size-normal": "_size-normal_43rns_30",
-  "size-large": "_size-large_43rns_33",
-  inline: y,
+import { jsxs as p, jsx as o } from "react/jsx-runtime";
+import u from "react";
+import { Icon as l } from "../Icon/Icon.js";
+import { clsx as v } from "../../utils/clsx.js";
+import '../../assets/InfoPanel.css';const y = "_rootUnset_10ll9_1", f = "_root_10ll9_1", x = "_interactive_10ll9_19", z = "_interactiveIcon_10ll9_22", d = "_icon_10ll9_69", I = "_content_10ll9_73", t = {
+  rootUnset: y,
+  root: f,
+  interactive: x,
+  interactiveIcon: z,
+  "type-neutral": "_type-neutral_10ll9_34",
+  "type-error": "_type-error_10ll9_41",
+  "type-success": "_type-success_10ll9_48",
+  "type-warning": "_type-warning_10ll9_55",
+  "size-small": "_size-small_10ll9_62",
+  "size-large": "_size-large_10ll9_65",
   icon: d,
-  content: f
+  content: I
 };
-function N(o) {
+function N(s) {
   const {
-    type: t = "default",
-    size: r = "auto",
-    icon: s,
-    children: i,
-    className: _,
-    inline: c = !1
-  } = o, l = m(n.root, _, n[`type-${t}`], n[`size-${r}`], {
-    [n.inline]: c
-  });
-  return /* @__PURE__ */ a("div", { className: l, children: [
-    !!s && /* @__PURE__ */ e("div", { className: n.icon, children: s }),
-    /* @__PURE__ */ e("div", { className: n.content, children: i })
-  ] });
+    type: c = "neutral",
+    size: r = "normal",
+    className: a,
+    onClick: e,
+    ariaLabel: i,
+    icon: n,
+    children: _
+  } = s, m = v(
+    t.rootUnset,
+    t.root,
+    a,
+    t[`type-${c}`],
+    t[`size-${r}`],
+    {
+      [t.interactive]: !!e
+    }
+  );
+  return /* @__PURE__ */ p(
+    e ? "button" : "div",
+    {
+      type: e ? "button" : void 0,
+      className: m,
+      onClick: e,
+      "aria-label": i,
+      children: [
+        n && /* @__PURE__ */ o(l, { size: "xxsmall", name: n, className: t.icon }),
+        /* @__PURE__ */ o("div", { className: t.content, children: _ }),
+        e && /* @__PURE__ */ o(l, { size: "xxsmall", name: "LeftArrow", className: t.interactiveIcon })
+      ]
+    }
+  );
 }
+const R = u.memo(N);
 export {
-  N as InfoPanel
+  R as default
 };

package/dist/components/InfoPanel/InfoPanelShowcase.d.ts

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

package/dist/components/InfoPanel/InfoPanelShowcase.js

@@ -0,0 +1,47 @@
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
+import o from "react";
+import { Flex as n } from "../Layout/Flex/Flex.js";
+import { Text as i } from "../Text/Text.js";
+import { LOREM_IPSUM as t } from "../../utils/loremipsum.js";
+import l from "./InfoPanel.js";
+function c() {
+  return /* @__PURE__ */ r(i, { size: "small", children: t });
+}
+const a = () => {
+};
+function h() {
+  return /* @__PURE__ */ e(n, { gap: "large", vertical: !0, children: [
+    /* @__PURE__ */ e(n, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ r(i, { children: "Default" }),
+      /* @__PURE__ */ r(l, { onClick: a, icon: "Warning", children: /* @__PURE__ */ r(c, {}) })
+    ] }),
+    /* @__PURE__ */ e(n, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ r(i, { children: "Success" }),
+      /* @__PURE__ */ r(l, { onClick: a, type: "success", icon: "Close", children: /* @__PURE__ */ r(c, {}) })
+    ] }),
+    /* @__PURE__ */ e(n, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ r(i, { children: "Error" }),
+      /* @__PURE__ */ r(l, { onClick: a, type: "error", icon: "Users", children: /* @__PURE__ */ r(c, {}) })
+    ] }),
+    /* @__PURE__ */ e(n, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ r(i, { children: "Warning" }),
+      /* @__PURE__ */ r(l, { onClick: a, type: "warning", icon: "Search", children: /* @__PURE__ */ r(c, {}) })
+    ] }),
+    /* @__PURE__ */ e(n, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ r(i, { children: "Small" }),
+      /* @__PURE__ */ r(l, { onClick: a, size: "small", icon: "Warning", children: /* @__PURE__ */ r(c, {}) })
+    ] }),
+    /* @__PURE__ */ e(n, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ r(i, { children: "Large" }),
+      /* @__PURE__ */ r(l, { onClick: a, size: "large", icon: "Warning", children: /* @__PURE__ */ r(c, {}) })
+    ] }),
+    /* @__PURE__ */ e(n, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ r(i, { children: "Not interactive" }),
+      /* @__PURE__ */ r(l, { icon: "Warning", children: /* @__PURE__ */ r(c, {}) })
+    ] })
+  ] });
+}
+const f = o.memo(h);
+export {
+  f as default
+};

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

@@ -0,0 +1,2 @@
+export { default as InfoPanel } from './InfoPanel';
+export type { InfoPanelProps, InfoPanelType, InfoPanelSize, } from './InfoPanel';

package/dist/components/InfoPanel/index.js

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

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

@@ -1,37 +1,34 @@
 import { default as React } from 'react';
+import { IconName } from '../Icon';
 
 export type InputSize = 'small' | 'normal' | 'large';
-type TypeSpecific = {
+type InputTypeSpecificProps = {
     type?: 'text' | 'password' | 'search';
-    value: string;
-    onChange(value: string): void;
+    value?: string;
 } | {
     type: 'number';
     min?: number | string;
     max?: number | string;
-    value: number | string;
-    onChange(value: string): void;
+    value?: number | string;
 };
-export type InputProps = TypeSpecific & {
-    fullWidth?: boolean;
+export type InputProps = InputTypeSpecificProps & {
+    id?: string;
     size?: InputSize;
     tabIndex?: number;
-    disabled?: boolean;
     autofocus?: boolean;
     pattern?: RegExp;
+    fullWidth?: boolean;
     className?: string;
-    backdropBlur?: boolean;
-    inputClassName?: string;
-    inputRef?: React.Ref<HTMLInputElement>;
-    label?: React.ReactNode;
     placeholder?: string;
-    description?: React.ReactNode;
-    error?: boolean;
+    placeholderIcon?: IconName;
+    disabled?: boolean;
+    loading?: boolean;
+    backdropBlur?: boolean;
+    spellCheck?: boolean;
     decorator?: React.ReactNode | (() => React.ReactNode);
+    onChange?: (value: string) => void;
     onSubmit?: () => void;
-    onKeyDown?(event: React.KeyboardEvent<HTMLInputElement>): void | boolean;
-    showLoader?: boolean;
-    noSpellCheck?: boolean;
+    onKeyDown?(event: React.KeyboardEvent<HTMLInputElement>): void;
 };
-export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLDivElement>>;
-export {};
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export default Input;

package/dist/components/Input/Input.js

@@ -1,96 +1,88 @@
-import { jsxs as r, jsx as c } from "react/jsx-runtime";
-import n from "react";
-import { Indicator as q } from "../Indicator/Indicator.js";
-import { clsx as H } from "../../utils/clsx.js";
-import { getValue as J } from "../../utils/getValue.js";
-import { useDynamicRef as i } from "../../utils/hooks.js";
-import '../../assets/Input.css';const O = "_root_gmtev_1", P = "_input_gmtev_1", Q = "_small_gmtev_8", U = "_large_gmtev_12", Y = "_decorator_gmtev_60", Z = "_error_gmtev_68", $ = "_disabled_gmtev_72", ee = "_description_gmtev_106", e = {
-  root: O,
-  input: P,
-  small: Q,
-  large: U,
-  "full-width": "_full-width_gmtev_57",
-  decorator: Y,
-  error: Z,
-  disabled: $,
-  description: ee,
-  "backdrop-blur": "_backdrop-blur_gmtev_111"
-}, ce = n.forwardRef(function(t, g) {
+import { jsxs as h, jsx as f } from "react/jsx-runtime";
+import t from "react";
+import { Icon as j } from "../Icon/Icon.js";
+import { Indicator as G } from "../Indicator/Indicator.js";
+import { clsx as T } from "../../utils/clsx.js";
+import { getValue as z } from "../../utils/getValue.js";
+import '../../assets/Input.css';const B = "_root_osypq_1", W = "_input_osypq_1", X = "_small_osypq_5", $ = "_large_osypq_9", H = "_placeholderIcon_osypq_75", J = "_empty_osypq_151", L = "_decorator_osypq_156", e = {
+  root: B,
+  input: W,
+  small: X,
+  large: $,
+  placeholderIcon: H,
+  "full-width": "_full-width_osypq_145",
+  empty: J,
+  decorator: L,
+  "backdrop-blur": "_backdrop-blur_osypq_173"
+}, oe = t.forwardRef(function(a, b) {
   const {
-    label: d,
-    value: v,
-    onChange: N,
-    onSubmit: C,
-    onKeyDown: k = () => !1,
-    pattern: a,
-    tabIndex: w,
-    error: y = !1,
-    fullWidth: I = !1,
-    showLoader: u = !1,
-    noSpellCheck: R = !1,
-    autofocus: x = !1,
-    disabled: m = !1,
-    className: E = "",
-    placeholder: D = "",
-    inputClassName: S = "",
-    inputRef: F,
-    description: _ = "",
-    type: K = "text",
-    size: A = "normal",
-    decorator: l,
-    backdropBlur: j = !1
-  } = t, G = t.type === "number" && (t.min ?? Number.MIN_SAFE_INTEGER) || void 0, M = t.type === "number" && (t.max ?? Number.MAX_SAFE_INTEGER) || void 0, f = n.useId(), p = i(N), T = i(k), b = i(C), V = n.useCallback(
+    id: I,
+    fullWidth: N = !1,
+    value: l,
+    onChange: s,
+    onSubmit: c,
+    onKeyDown: u,
+    pattern: d,
+    tabIndex: g,
+    loading: y = !1,
+    spellCheck: k = !0,
+    autofocus: q = !1,
+    disabled: w = !1,
+    className: x = "",
+    placeholder: n = "",
+    placeholderIcon: r,
+    type: C = "text",
+    size: E = "normal",
+    decorator: i,
+    backdropBlur: v = !1
+  } = a, [m, R] = t.useState(l), V = typeof m < "u" && m !== "" && m !== null || typeof l < "u" && l !== "" && l !== null, S = a.type === "number" && (a.min ?? Number.MIN_SAFE_INTEGER) || void 0, A = a.type === "number" && (a.max ?? Number.MAX_SAFE_INTEGER) || void 0, p = t.useCallback((o) => {
+    R(o), s && s(o);
+  }, [s]), D = t.useCallback(
     (o) => {
       const {
-        value: s
+        value: _
       } = o.target;
-      if (a) {
-        a.test(s) && p.current(s);
+      if (d) {
+        d.test(_) && p(_);
         return;
       }
-      return p.current(s);
+      p(_);
     },
-    [a]
-  ), z = n.useCallback((o) => {
-    T.current(o) || b.current && o.key === "Enter" && b.current();
-  }, []), B = u || l ? /* @__PURE__ */ r("div", { className: e.decorator, children: [
-    !!u && /* @__PURE__ */ c(q, {}),
-    !!l && J(l)
-  ] }) : null, h = /* @__PURE__ */ r("div", { className: e.input, children: [
-    /* @__PURE__ */ c(
+    [p, d]
+  ), F = t.useCallback((o) => {
+    u && u(o), c && o.key === "Enter" && c();
+  }, [u, c]), K = T(e.root, e[E], x, {
+    [e["full-width"]]: N,
+    [e["backdrop-blur"]]: v,
+    [e.empty]: !V
+  }), M = t.useMemo(() => n ? r ? `     ${n.trim()}` : n.trim() : "", [n, r]);
+  return /* @__PURE__ */ h("div", { className: K, children: [
+    /* @__PURE__ */ f(
       "input",
       {
-        id: f,
-        ref: F,
-        type: K,
-        tabIndex: w,
-        autoFocus: x,
-        className: S,
-        value: v,
-        placeholder: D,
-        disabled: m,
-        onChange: V,
-        onKeyDown: z,
-        spellCheck: !R,
-        min: G,
-        max: M
+        id: I,
+        ref: b,
+        type: C,
+        tabIndex: g,
+        autoFocus: q,
+        className: e.input,
+        value: l,
+        placeholder: M,
+        disabled: w,
+        onChange: D,
+        onKeyDown: F,
+        spellCheck: k,
+        min: S,
+        max: A
       }
     ),
-    B
-  ] }), L = _ ? /* @__PURE__ */ c("div", { className: e.description, children: _ }) : null, W = d ? /* @__PURE__ */ r("label", { htmlFor: f, children: [
-    d,
-    h
-  ] }) : h, X = H(e.root, e[A], E, {
-    [e["full-width"]]: I,
-    [e.error]: y,
-    [e.disabled]: m,
-    [e["backdrop-blur"]]: j
-  });
-  return /* @__PURE__ */ r("div", { ref: g, className: X, children: [
-    W,
-    L
+    r && /* @__PURE__ */ f(j, { name: r, className: e.placeholderIcon }),
+    (y || !!i) && /* @__PURE__ */ h("div", { className: e.decorator, children: [
+      !!y && /* @__PURE__ */ f(G, {}),
+      !!i && z(i)
+    ] })
   ] });
 });
 export {
-  ce as Input
+  oe as default
 };

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

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

package/dist/components/Input/InputShowcase.js

@@ -0,0 +1,90 @@
+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 c from "./Input.js";
+const p = /^\+?[0-9]*$/;
+function u() {
+  const [d, o] = i.useState(""), [n, h] = i.useState(0);
+  return /* @__PURE__ */ l(r, { gap: "large", vertical: !0, children: [
+    /* @__PURE__ */ l(r, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(a, { children: "Small" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(c, { placeholder: "Placeholder", size: "small" }) })
+    ] }),
+    /* @__PURE__ */ l(r, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(a, { children: "Normal" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(c, { placeholder: "Placeholder" }) })
+    ] }),
+    /* @__PURE__ */ l(r, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(a, { children: "Large" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(c, { placeholder: "Placeholder", size: "large" }) })
+    ] }),
+    /* @__PURE__ */ l(r, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(a, { children: "Disabled" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(c, { placeholder: "Placeholder", size: "large", disabled: !0 }) }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(c, { placeholder: "Placeholder", size: "large", disabled: !0, value: "Some input value" }) })
+    ] }),
+    /* @__PURE__ */ l(r, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(a, { children: "With placrholder icon" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(c, { placeholder: "Placeholder", size: "large", placeholderIcon: "Tick" }) })
+    ] }),
+    /* @__PURE__ */ l(r, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(a, { children: "BackdropBlur" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(c, { backdropBlur: !0, placeholder: "Placeholder", size: "large", placeholderIcon: "Tick" }) })
+    ] }),
+    /* @__PURE__ */ l(r, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(a, { children: "Full width" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(c, { fullWidth: !0, placeholder: "Placeholder", size: "large", placeholderIcon: "Tick" }) })
+    ] }),
+    /* @__PURE__ */ l(r, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(a, { children: "Loading" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(c, { disabled: !0, loading: !0, placeholder: "Placeholder", size: "large", placeholderIcon: "Tick" }) })
+    ] }),
+    /* @__PURE__ */ l(r, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(a, { children: "With phone pattern Regex" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
+        c,
+        {
+          pattern: p,
+          placeholder: "Placeholder",
+          size: "large",
+          placeholderIcon: "Tick",
+          value: d,
+          onChange: o
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ l(r, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(a, { children: "Decorator" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
+        c,
+        {
+          placeholder: "Placeholder",
+          size: "large",
+          placeholderIcon: "Tick",
+          decorator: /* @__PURE__ */ e(a, { size: "xxsmall", children: "Decorator" })
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ l(r, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(a, { children: "Number input with min=1 max=100" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
+        c,
+        {
+          placeholder: "Placeholder",
+          size: "large",
+          placeholderIcon: "Tick",
+          type: "number",
+          min: 1,
+          max: 100,
+          value: n,
+          onChange: (t) => h(Number(t))
+        }
+      ) })
+    ] })
+  ] });
+}
+const z = i.memo(u);
+export {
+  z as default
+};

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

@@ -15,4 +15,5 @@ export interface RichInputProps {
     autoFocus?: boolean;
     withClearButton?: boolean;
 }
-export declare const RichInput: React.ForwardRefExoticComponent<RichInputProps & React.RefAttributes<HTMLDivElement>>;
+declare const RichInput: React.ForwardRefExoticComponent<RichInputProps & React.RefAttributes<HTMLDivElement>>;
+export default RichInput;

package/dist/components/Input/RichInput.js

@@ -1,63 +1,65 @@
-import { jsxs as B, jsx as o } from "react/jsx-runtime";
-import r from "react";
-import { Button as D } from "../Button/Button.js";
-import { I as F } from "../../Icons-BlBKvJD8.js";
-import { clsx as L } from "../../utils/clsx.js";
-import { useDynamicRef as i } from "../../utils/hooks.js";
-import '../../assets/RichInput.css';const T = "_root_16on4_1", j = "_renderer_16on4_1", z = "_small_16on4_8", E = "_large_16on4_13", H = "_clear_16on4_95", t = {
-  root: T,
-  renderer: j,
-  small: z,
+import { jsxs as D, jsx as n } from "react/jsx-runtime";
+import t from "react";
+import { Button as F } from "../Button/Button.js";
+import { clsx as I } from "../../utils/clsx.js";
+import { useDynamicRef as i } from "../../utils/hooks/useDynamicRef.js";
+import "../../utils/hooks/useGlobalKeyboardEvent.js";
+import "../../utils/hooks/useKeyboardClose.js";
+import "../../index-2hJuj4UN.js";
+import '../../assets/RichInput.css';const L = "_root_ttyw6_1", T = "_renderer_ttyw6_1", j = "_small_ttyw6_5", E = "_large_ttyw6_10", z = "_clear_ttyw6_144", o = {
+  root: L,
+  renderer: T,
+  small: j,
   large: E,
-  clear: H
-}, O = r.forwardRef(function(f, m) {
+  clear: z
+}, P = t.forwardRef(function(f, m) {
   const {
     size: d = "normal",
     value: c,
     onChange: p,
     onFocus: _,
     onBlur: h,
-    onSelect: g,
-    onKeyDown: C,
+    onSelect: C,
+    onKeyDown: g,
     className: R,
-    rendered: S,
-    placeholder: x,
-    autoFocus: k,
-    withClearButton: I = !1
-  } = f, s = r.useRef(null), n = r.useRef(null), a = i(p), u = i(g), N = r.useCallback((e) => {
+    rendered: w,
+    placeholder: y,
+    autoFocus: S,
+    withClearButton: k = !1
+  } = f, s = t.useRef(null), r = t.useRef(null), a = i(p), u = i(C), x = t.useCallback((e) => {
     a.current(e.target.value);
-  }, []), b = r.useCallback(() => {
+  }, []), N = t.useCallback(() => {
     var e;
     a.current(""), (e = s.current) == null || e.focus();
-  }, []), v = r.useCallback((e) => {
+  }, []), b = t.useCallback((e) => {
     if (!u.current || !(e.target instanceof HTMLInputElement))
       return;
     const l = e.target;
     u.current(l.selectionStart, l.selectionEnd, l.selectionDirection);
-  }, []), w = r.useCallback((e) => {
-    n.current && (n.current.scrollTop = e.target.scrollTop, n.current.scrollLeft = e.target.scrollLeft);
-  }, []), y = L(t.root, R, t[d]);
-  return /* @__PURE__ */ B("div", { ref: m, className: y, children: [
-    /* @__PURE__ */ o(
+  }, []), v = t.useCallback((e) => {
+    r.current && (r.current.scrollTop = e.target.scrollTop, r.current.scrollLeft = e.target.scrollLeft);
+  }, []), B = I(o.root, R, o[d]);
+  return /* @__PURE__ */ D("div", { ref: m, className: B, children: [
+    /* @__PURE__ */ n(
       "input",
       {
         ref: s,
-        autoFocus: k,
+        autoFocus: S,
         type: "text",
         value: c,
-        onChange: N,
-        placeholder: x,
+        onChange: x,
+        placeholder: y,
         onBlur: h,
         onFocus: _,
-        onScroll: w,
-        onSelect: v,
-        onKeyDown: C
+        onScroll: v,
+        onSelect: b,
+        onKeyDown: g
       }
     ),
-    /* @__PURE__ */ o("div", { ref: n, className: t.renderer, children: S }),
-    I && c && /* @__PURE__ */ o("div", { className: t.clear, children: /* @__PURE__ */ o(D, { size: "small", icon: F.exit, onClick: b }) })
+    /* @__PURE__ */ n("div", { ref: r, className: o.renderer, children: w }),
+    k && c && /* @__PURE__ */ n("div", { className: o.clear, children: /* @__PURE__ */ n(F, { icon: "Close", onClick: N }) })
   ] });
 });
 export {
-  O as RichInput
+  P as default
 };

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

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