@cfx-dev/ui-components 4.5.21 → 5.0.1

package/dist/components/InfoPanel/InfoPanel.js

@@ -1,10 +1,10 @@
 import { jsxs as m, jsx as o } from "react/jsx-runtime";
 import u from "react";
 import { Icon as _ } from "../Icon/Icon.js";
-import { clsx as x } from "../../utils/clsx.js";
-const I = "cfxui__InfoPanel__rootUnset__7ca3f", p = "cfxui__InfoPanel__root__a19ad", P = "cfxui__InfoPanel__interactiveIcon__03510", v = "cfxui__InfoPanel__interactive__1b051", y = "cfxui__InfoPanel__icon__b2fca", d = "cfxui__InfoPanel__content__43082", n = {
-  rootUnset: I,
-  root: p,
+import { clsx as I } from "../../utils/clsx.js";
+const p = "cfxui__InfoPanel__rootUnset__7ca3f", x = "cfxui__InfoPanel__root__a19ad", P = "cfxui__InfoPanel__interactiveIcon__03510", v = "cfxui__InfoPanel__interactive__1b051", y = "cfxui__InfoPanel__icon__b2fca", d = "cfxui__InfoPanel__content__43082", n = {
+  rootUnset: p,
+  root: x,
   interactiveIcon: P,
   interactive: v,
   "type-neutral": "cfxui__InfoPanel__type-neutral__c4653",
@@ -19,13 +19,13 @@ const I = "cfxui__InfoPanel__rootUnset__7ca3f", p = "cfxui__InfoPanel__root__a19
 function b(a) {
   const {
     type: c = "neutral",
-    size: i = "normal",
+    size: i = "medium",
     className: s,
     onClick: e,
     ariaLabel: r,
     icon: t,
     children: l
-  } = a, f = x(
+  } = a, f = I(
     n.rootUnset,
     n.root,
     s,
@@ -43,14 +43,14 @@ function b(a) {
       onClick: e,
       "aria-label": r,
       children: [
-        t && /* @__PURE__ */ o(_, { size: "xxsmall", name: t, className: n.icon }),
+        t && /* @__PURE__ */ o(_, { size: "small", name: t, className: n.icon }),
         /* @__PURE__ */ o("div", { className: n.content, children: l }),
-        e && /* @__PURE__ */ o(_, { size: "xxsmall", name: "LeftArrow", className: n.interactiveIcon })
+        e && /* @__PURE__ */ o(_, { size: "small", name: "RightArrow", className: n.interactiveIcon })
       ]
     }
   );
 }
-const w = u.memo(b);
+const U = u.memo(b);
 export {
-  w as default
+  U as default
 };

package/dist/components/InfoPanel/InfoPanelShowcase.js

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

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

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 import { IconName } from '../Icon';
-import { ResponsiveValueType } from '../../utils/ui';
-import { InputSize, InputTheme } from './Input.types';
+import { StateType } from '../StyledInput/StyledInput';
+import { InputTheme } from './Input.types';
 
 type InputTypeSpecificProps = {
     type?: 'text' | 'password' | 'search';
@@ -18,7 +18,6 @@ type InputTypeSpecificProps = {
 export type InputProps = InputTypeSpecificProps & {
     name?: string;
     id?: string;
-    size?: ResponsiveValueType<InputSize>;
     theme?: InputTheme;
     tabIndex?: number;
     autofocus?: boolean;
@@ -28,6 +27,7 @@ export type InputProps = InputTypeSpecificProps & {
     containerClassName?: string;
     placeholder?: string;
     placeholderIcon?: IconName;
+    state?: StateType;
     disabled?: boolean;
     loading?: boolean;
     backdropBlur?: boolean;

package/dist/components/Input/Input.js

@@ -1,143 +1,130 @@
-import { jsxs as q, jsx as a } from "react/jsx-runtime";
-import i from "react";
+import { jsxs as q, jsx as o } from "react/jsx-runtime";
+import l from "react";
 import { Icon as H } from "../Icon/Icon.js";
 import J from "../IconButton/IconButton.js";
 import { Indicator as L } from "../Indicator/Indicator.js";
 import O from "../StyledInput/StyledInput.js";
-import { clsx as R } from "../../utils/clsx.js";
+import { clsx as w } from "../../utils/clsx.js";
 import { getValue as P } from "../../utils/getValue.js";
-import { ui as Q } from "../../utils/ui/ui.js";
-const U = "cfxui__Input__root__6392b", Y = "cfxui__Input__fullWidth__5a033", Z = "cfxui__Input__empty__3b36a", ee = "cfxui__Input__placeholderIcon__4d079", le = "cfxui__Input__input__07830", ae = "cfxui__Input__decorator__3b81f", te = "cfxui__Input__backdropBlur__fdde1", l = {
-  root: U,
-  fullWidth: Y,
-  empty: Z,
-  placeholderIcon: ee,
-  input: le,
-  decorator: ae,
-  backdropBlur: te,
-  "size-initial-large": "cfxui__Input__size-initial-large__61eb0",
-  "size-initial-small": "cfxui__Input__size-initial-small__f4fae",
-  "size-small-large": "cfxui__Input__size-small-large__6e2dd",
-  "size-small-small": "cfxui__Input__size-small-small__d0b97",
-  "size-small-medium-large": "cfxui__Input__size-small-medium-large__ea27c",
-  "size-small-medium-small": "cfxui__Input__size-small-medium-small__1272f",
-  "size-medium-large": "cfxui__Input__size-medium-large__5a941",
-  "size-medium-small": "cfxui__Input__size-medium-small__11d17",
-  "size-medium-large-large": "cfxui__Input__size-medium-large-large__47a52",
-  "size-medium-large-small": "cfxui__Input__size-medium-large-small__13d07",
-  "size-large-large": "cfxui__Input__size-large-large__70f5f",
-  "size-large-small": "cfxui__Input__size-large-small__3aa81",
-  "size-xlarge-large": "cfxui__Input__size-xlarge-large__2becf",
-  "size-xlarge-small": "cfxui__Input__size-xlarge-small__3bac0"
+const Q = "cfxui__Input__root__6392b", U = "cfxui__Input__fullWidth__5a033", Y = "cfxui__Input__empty__3b36a", Z = "cfxui__Input__placeholderIcon__4d079", ee = "cfxui__Input__input__07830", te = "cfxui__Input__decorator__3b81f", oe = "cfxui__Input__backdropBlur__fdde1", e = {
+  root: Q,
+  fullWidth: U,
+  empty: Y,
+  placeholderIcon: Z,
+  input: ee,
+  decorator: te,
+  backdropBlur: oe
 };
-function ie(_) {
+function ae(n) {
   const {
-    decorator: n,
-    loading: m,
-    type: d,
-    hasValue: t,
-    onCleare: u
-  } = _;
-  return m ? /* @__PURE__ */ a("div", { className: l.decorator, children: /* @__PURE__ */ a(L, {}) }) : n ? /* @__PURE__ */ a("div", { className: l.decorator, children: P(n) }) : d === "search" && t ? /* @__PURE__ */ a("div", { className: l.decorator, children: /* @__PURE__ */ a(J, { size: "xsmall", areaSize: "large", name: "Close", onClick: u }) }) : null;
+    decorator: u,
+    loading: f,
+    type: _,
+    hasValue: a,
+    onCleare: s
+  } = n;
+  return f ? /* @__PURE__ */ o("div", { className: e.decorator, children: /* @__PURE__ */ o(L, {}) }) : u ? /* @__PURE__ */ o("div", { className: e.decorator, children: P(u) }) : _ === "search" && a ? /* @__PURE__ */ o("div", { className: e.decorator, children: /* @__PURE__ */ o(J, { size: "xsmall", areaSize: "large", name: "Close", onClick: s }) }) : null;
 }
-function fe(_) {
+function fe(n) {
   const {
-    id: n,
-    name: m,
-    fullWidth: d = !1,
-    value: t,
-    defaultValue: u,
-    onChange: f,
+    id: u,
+    name: f,
+    fullWidth: _ = !1,
+    value: a,
+    defaultValue: s,
+    onChange: m,
     onSubmit: p,
-    onKeyDown: I,
-    pattern: g,
-    tabIndex: w,
-    loading: v = !1,
-    spellCheck: E = !0,
-    autofocus: V = !1,
+    onKeyDown: h,
+    pattern: I,
+    tabIndex: R,
+    loading: E = !1,
+    spellCheck: V = !0,
+    autofocus: v = !1,
     disabled: B = !1,
     className: S,
     containerClassName: W,
-    placeholder: o = "",
-    placeholderIcon: c,
-    type: z = "text",
-    size: h = "normal",
-    theme: b = "default",
-    decorator: D,
+    placeholder: i = "",
+    placeholderIcon: d,
+    state: D,
+    type: x = "text",
+    theme: C = "default",
+    decorator: A,
     backdropBlur: F = !1,
-    ref: A
-  } = _, [x, K] = i.useState(t || u), C = typeof x < "u" && x !== "" && x !== null || typeof t < "u" && t !== "" && t !== null;
-  let y, N, k;
-  if (_.type === "number") {
+    ref: K
+  } = n, [b, M] = l.useState(a || s), y = typeof b < "u" && b !== "" && b !== null || typeof a < "u" && a !== "" && a !== null;
+  let N, k, g;
+  if (n.type === "number") {
     const {
-      min: e,
-      max: s,
+      min: t,
+      max: c,
       step: $
-    } = _;
-    k = $ ?? 1, y = e ?? Number.MIN_SAFE_INTEGER, N = s ?? Number.MAX_SAFE_INTEGER;
+    } = n;
+    g = $ ?? 1, N = t ?? Number.MIN_SAFE_INTEGER, k = c ?? Number.MAX_SAFE_INTEGER;
   }
-  const r = i.useCallback((e) => {
-    K(e), f && f(e);
-  }, [f]), M = i.useCallback(
-    (e) => {
+  const r = l.useCallback((t) => {
+    M(t), m && m(t);
+  }, [m]), j = l.useCallback(
+    (t) => {
       const {
-        value: s
-      } = e.target;
-      if (g) {
-        g.test(s) && r(s);
+        value: c
+      } = t.target;
+      if (I) {
+        I.test(c) && r(c);
         return;
       }
-      r(s);
+      r(c);
     },
-    [r, g]
-  ), j = i.useCallback((e) => {
-    I && I(e), p && e.key === "Enter" && p();
-  }, [I, p]), G = i.useCallback(() => {
+    [r, I]
+  ), z = l.useCallback((t) => {
+    h && h(t), p && t.key === "Enter" && p();
+  }, [h, p]), G = l.useCallback(() => {
     r("");
-  }, [r]), T = R(
-    l.root,
-    l[b],
+  }, [r]), T = w(
+    e.root,
+    e[C],
     W,
-    Q.getResponsiveFlatClassnames("size", h).map((e) => l[e]),
     {
-      [l.fullWidth]: d,
-      [l.backdropBlur]: F,
-      [l.empty]: !C
+      [e.fullWidth]: _,
+      [e.backdropBlur]: F,
+      [e.empty]: !y
     }
-  ), X = i.useMemo(() => o ? c ? `     ${o.trim()}` : o.trim() : "", [o, c]);
+  ), X = l.useMemo(() => i ? d ? `     ${i.trim()}` : i.trim() : "", [i, d]);
   return /* @__PURE__ */ q("div", { className: T, children: [
-    /* @__PURE__ */ a(
+    /* @__PURE__ */ o(
       O,
       {
-        size: h,
-        theme: b,
-        id: n,
-        name: m,
-        ref: A,
-        type: z,
-        tabIndex: w,
-        className: R(l.input, S),
-        value: t,
+        theme: C,
+        id: u,
+        name: f,
+        ref: K,
+        type: x,
+        tabIndex: R,
+        className: w(
+          e.input,
+          S
+        ),
+        value: a,
         placeholder: X,
         disabled: B,
-        onChange: M,
-        onKeyDown: j,
-        spellCheck: E,
-        min: y,
-        max: N,
-        step: k,
-        defaultValue: u,
-        autoFocus: V
+        onChange: j,
+        onKeyDown: z,
+        spellCheck: V,
+        min: N,
+        max: k,
+        step: g,
+        defaultValue: s,
+        state: D,
+        autoFocus: v
       }
     ),
-    c && /* @__PURE__ */ a(H, { name: c, className: l.placeholderIcon }),
-    /* @__PURE__ */ a(
-      ie,
+    d && /* @__PURE__ */ o(H, { name: d, className: e.placeholderIcon }),
+    /* @__PURE__ */ o(
+      ae,
       {
-        decorator: D,
-        loading: v,
-        type: z,
-        hasValue: C,
+        decorator: A,
+        loading: E,
+        type: x,
+        hasValue: y,
         onCleare: G
       }
     )

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

@@ -1,2 +1,2 @@
-export type InputSize = 'small' | 'normal' | 'large';
+export type InputSize = 'small' | 'medium' | 'large';
 export type InputTheme = 'default' | 'onlight';

package/dist/components/Input/InputShowcase.js

@@ -1,120 +1,136 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import i from "react";
-import r from "../Flex/Flex.js";
-import { Text as a } from "../Text/Text.js";
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import d from "react";
+import l from "../Flex/Flex.js";
+import { FormField as a } from "../FormField/FormField.js";
+import { Text as c } from "../Text/Text.js";
 import "../../utils/ui/ui.js";
-import c from "./Input.js";
-const m = /^\+?[0-9]*$/;
-function s() {
-  const [o, n] = i.useState(""), [t, p] = i.useState(0), [d, h] = i.useState("");
-  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" }) })
+import i from "./Input.js";
+const s = /^\+?[0-9]*$/;
+function v() {
+  const [o, n] = d.useState(""), [u, p] = d.useState(0), [h, t] = d.useState("");
+  return /* @__PURE__ */ r(l, { gap: "large", vertical: !0, children: [
+    /* @__PURE__ */ r(l, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ e(c, { children: "Default" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(i, { placeholder: "Placeholder" }) })
     ] }),
-    /* @__PURE__ */ l(r, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(a, { children: "Normal" }),
-      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(c, { placeholder: "Placeholder" }) })
+    /* @__PURE__ */ r(l, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ e(c, { children: "Success" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
+        a,
+        {
+          state: "success",
+          message: "This is a success message",
+          children: /* @__PURE__ */ e(i, { placeholder: "Placeholder" })
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ r(l, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ e(c, { children: "Error" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(a, { state: "error", message: "This is an error message", children: /* @__PURE__ */ e(i, { placeholder: "Placeholder", state: "error" }) }) })
     ] }),
-    /* @__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__ */ r(l, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ e(c, { children: "Label" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
+        a,
+        {
+          label: "label",
+          icon: "MoreInfo",
+          required: !0,
+          title: "title",
+          children: /* @__PURE__ */ e(i, { placeholder: "Placeholder" })
+        }
+      ) })
     ] }),
-    /* @__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__ */ r(l, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ e(c, { children: "Disabled" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(i, { placeholder: "Placeholder", disabled: !0 }) }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(i, { placeholder: "Placeholder", 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__ */ r(l, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ e(c, { children: "With placrholder icon" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(i, { placeholder: "Placeholder", 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__ */ r(l, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ e(c, { children: "BackdropBlur" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(i, { backdropBlur: !0, placeholder: "Placeholder", 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__ */ r(l, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ e(c, { children: "Full width" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(i, { fullWidth: !0, placeholder: "Placeholder", 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__ */ r(l, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ e(c, { children: "Loading" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(i, { disabled: !0, loading: !0, placeholder: "Placeholder", placeholderIcon: "Tick" }) })
     ] }),
-    /* @__PURE__ */ l(r, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(a, { children: "With phone pattern Regex" }),
+    /* @__PURE__ */ r(l, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ e(c, { children: "With phone pattern Regex" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-        c,
+        i,
         {
-          pattern: m,
+          pattern: s,
           placeholder: "Placeholder",
-          size: "large",
           placeholderIcon: "Tick",
           value: o,
           onChange: n
         }
       ) })
     ] }),
-    /* @__PURE__ */ l(r, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(a, { children: "Decorator" }),
+    /* @__PURE__ */ r(l, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ e(c, { children: "Decorator" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-        c,
+        i,
         {
           placeholder: "Placeholder",
-          size: "large",
           placeholderIcon: "Tick",
-          decorator: /* @__PURE__ */ e(a, { size: "xxsmall", children: "Decorator" })
+          decorator: /* @__PURE__ */ e(c, { children: "Decorator" })
         }
       ) })
     ] }),
-    /* @__PURE__ */ l(r, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(a, { children: "Type Number input with min=1 max=100" }),
+    /* @__PURE__ */ r(l, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ e(c, { children: "Type Number input with min=1 max=100" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-        c,
+        i,
         {
           placeholder: "Placeholder",
-          size: "large",
           placeholderIcon: "Tick",
           type: "number",
           min: 1,
           max: 100,
-          value: t,
-          onChange: (u) => p(Number(u))
+          value: u,
+          onChange: (m) => p(Number(m))
         }
       ) })
     ] }),
-    /* @__PURE__ */ l(r, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(a, { children: "Type search" }),
+    /* @__PURE__ */ r(l, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ e(c, { children: "Type search" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-        c,
+        i,
         {
           placeholder: "Placeholder",
-          size: "large",
           placeholderIcon: "Search",
           type: "search",
-          value: d,
-          onChange: h
+          value: h,
+          onChange: t
         }
       ) })
     ] }),
-    /* @__PURE__ */ l(r, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(a, { children: "Theme onlight" }),
+    /* @__PURE__ */ r(l, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ e(c, { children: "Theme onlight" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-        c,
+        i,
         {
           placeholder: "Placeholder",
-          size: "large",
           placeholderIcon: "Search",
           type: "search",
-          value: d,
-          onChange: h,
+          value: h,
+          onChange: t,
           theme: "onlight"
         }
       ) })
     ] })
   ] });
 }
-const x = i.memo(s);
+const k = d.memo(v);
 export {
-  x as default
+  k as default
 };