@cfx-dev/ui-components 4.0.1 → 4.1.1

package/dist/components/DropdownSelect/DropdownSelectShowcase.js

@@ -1,7 +1,8 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
 import r from "react";
-import { Flex as t } from "../Layout/Flex/Flex.js";
+import { Flex as l } from "../Layout/Flex/Flex.js";
 import { Text as o } from "../Text/Text.js";
+import "../ui.js";
 import { DropdownSelect as a } from "./DropdownSelect.js";
 const c = [
   {
@@ -18,20 +19,20 @@ const c = [
   }
 ];
 function d() {
-  const [n, i] = r.useState(void 0), [u, s] = r.useState(void 0);
-  return /* @__PURE__ */ l(t, { gap: "large", vertical: !0, pb: 20, children: [
-    /* @__PURE__ */ l(t, { gap: "normal", vertical: !0, children: [
+  const [i, n] = r.useState(void 0), [u, s] = r.useState(void 0);
+  return /* @__PURE__ */ t(l, { gap: "large", vertical: !0, pb: 20, children: [
+    /* @__PURE__ */ t(l, { gap: "normal", vertical: !0, children: [
       /* @__PURE__ */ e(o, { children: "Default Select Input" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
         a,
         {
           options: c,
-          onChange: i,
-          value: n
+          onChange: n,
+          value: i
         }
       ) })
     ] }),
-    /* @__PURE__ */ l(t, { gap: "normal", vertical: !0, children: [
+    /* @__PURE__ */ t(l, { gap: "normal", vertical: !0, children: [
       /* @__PURE__ */ e(o, { children: "Full Width Select Input" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
         a,
@@ -46,7 +47,7 @@ function d() {
     ] })
   ] });
 }
-const f = r.memo(d);
+const g = r.memo(d);
 export {
-  f as default
+  g as default
 };

package/dist/components/Flyout/Flyout.js

@@ -1,6 +1,6 @@
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
 import n from "react";
-import { F as f } from "../../Combination-BRUj3CHE.js";
+import { F as f } from "../../Combination-Cbiw1XRb.js";
 import { Button as p } from "../Button/Button.js";
 import { Interactive as h } from "../Interactive/Interactive.js";
 import { clsx as l } from "../../utils/clsx.js";

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

@@ -1,11 +1,12 @@
 import { default as React } from 'react';
 import { IconName } from '../Icons';
-import { TextColorProps, TextSize } from '../Text';
+import { TextColorProps, ResponsiveTextSize } from '../Text';
+import { ResponsiveValueType } from '../ui';
 
-export type IconSize = TextSize;
+export type IconSize = ResponsiveTextSize;
 export interface IconProps extends TextColorProps {
     as?: React.ElementType;
-    size?: IconSize;
+    size?: ResponsiveValueType<IconSize>;
     className?: string;
     name: IconName;
 }

package/dist/components/Icon/Icon.js

@@ -1,37 +1,39 @@
-import { jsx as n } from "react/jsx-runtime";
-import l from "react";
-import { I as _ } from "../../cfxIcons-BNd1WgpX.js";
+import { jsx as r } from "react/jsx-runtime";
+import i from "react";
+import { I as g } from "../../cfxIcons-BNd1WgpX.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 "../Icons/cfx-icons-big/Confirm.js";
-import { getTextOpacity as d } from "../Text/Text.js";
+import { textSizeResponsiveValueFormatter as c, getTextOpacity as u } from "../Text/Text.js";
 import { ui as t } from "../ui.js";
-import { clsx as h } from "../../utils/clsx.js";
-import { getColor as y } from "../../utils/color.js";
-const I = "cfxui__Icon__root__6c380", S = {
-  root: I
-}, A = l.forwardRef(function(r, i) {
+import { clsx as a } from "../../utils/clsx.js";
+import { getColor as h } from "../../utils/color.js";
+const C = "cfxui__Icon__root__6c380", d = {
+  root: C
+}, k = i.forwardRef(function(e, p) {
   const {
-    as: c = "div",
+    as: l = "div",
     size: o = "normal",
-    opacity: e,
-    className: m,
-    name: s
-  } = r, p = {
-    color: y({
-      ...r,
-      opacity: d(e)
+    opacity: m,
+    className: f,
+    name: y
+  } = e, n = a(
+    t.getResponsiveClassnames("width", o),
+    t.getResponsiveClassnames("height", o)
+  ), s = i.useMemo(() => ({
+    ...t.getResponsiveStyles("width", o, c),
+    ...t.getResponsiveStyles("height", o, c)
+  }), [o]), R = i.useMemo(() => ({
+    color: h({
+      ...e,
+      opacity: u(m)
     }),
-    width: t.fontSize(o),
-    height: t.fontSize(o)
-  }, f = {
-    width: t.fontSize(o),
-    height: t.fontSize(o)
-  }, a = _[s];
-  return /* @__PURE__ */ n(c, { ref: i, style: p, className: h(S.root, m), children: /* @__PURE__ */ n(a, { style: f }) });
+    ...s
+  }), [m, e, s]), _ = g[y];
+  return /* @__PURE__ */ r(l, { ref: p, style: R, className: a(d.root, f, n), children: /* @__PURE__ */ r(_, { className: n, style: s }) });
 });
 export {
-  A as Icon
+  k as Icon
 };

package/dist/components/IconBig/IconBig.js

@@ -47,6 +47,7 @@ import "../Icons/cfx-icons/UpvotesBurst.js";
 import "../Icons/cfx-icons/UpvotesRecurring.js";
 import { I as f } from "../../cfxIconsBig-BLJjMT-Y.js";
 import { getTextOpacity as g } from "../Text/Text.js";
+import "../ui.js";
 import { clsx as I } from "../../utils/clsx.js";
 import { getColor as x } from "../../utils/color.js";
 const z = "cfxui__IconBig__root__f259a", i = {
@@ -54,7 +55,7 @@ const z = "cfxui__IconBig__root__f259a", i = {
   "size-small": "cfxui__IconBig__size-small__4e0b8",
   "size-normal": "cfxui__IconBig__size-normal__6ab6d",
   "size-large": "cfxui__IconBig__size-large__753d2"
-}, Bo = l.forwardRef(function(o, r) {
+}, uo = l.forwardRef(function(o, r) {
   const {
     as: m = "div",
     size: p = "normal",
@@ -70,5 +71,5 @@ const z = "cfxui__IconBig__root__f259a", i = {
   return /* @__PURE__ */ t(m, { ref: r, style: e, className: _, children: /* @__PURE__ */ t(a, {}) });
 });
 export {
-  Bo as IconBig
+  uo as IconBig
 };

package/dist/components/InfoPanel/InfoPanelShowcase.js

@@ -1,39 +1,40 @@
 import { jsxs as e, jsx as r } from "react/jsx-runtime";
-import o from "react";
+import a from "react";
 import { Flex as n } from "../Layout/Flex/Flex.js";
 import { Text as i } from "../Text/Text.js";
+import "../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 });
 }
-const a = () => {
+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: a, icon: "Warning", children: /* @__PURE__ */ r(c, {}) })
+      /* @__PURE__ */ r(l, { onClick: o, 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__ */ r(l, { onClick: o, 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__ */ r(l, { onClick: o, 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__ */ r(l, { onClick: o, 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__ */ r(l, { onClick: o, 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__ */ r(l, { onClick: o, size: "large", icon: "Warning", children: /* @__PURE__ */ r(c, {}) })
     ] }),
     /* @__PURE__ */ e(n, { gap: "normal", vertical: !0, children: [
       /* @__PURE__ */ r(i, { children: "Not interactive" }),
@@ -41,7 +42,7 @@ function h() {
     ] })
   ] });
 }
-const f = o.memo(h);
+const v = a.memo(h);
 export {
-  f as default
+  v as default
 };

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

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
 import { IconName } from '../Icon';
+import { ResponsiveValueType } from '../ui';
 
 export type InputSize = 'small' | 'normal' | 'large';
 export type InputTheme = 'default' | 'onlight';
@@ -14,7 +15,7 @@ type InputTypeSpecificProps = {
 };
 export type InputProps = InputTypeSpecificProps & {
     id?: string;
-    size?: InputSize;
+    size?: ResponsiveValueType<InputSize>;
     theme?: InputTheme;
     tabIndex?: number;
     autofocus?: boolean;

package/dist/components/Input/Input.js

@@ -1,110 +1,131 @@
-import { jsxs as G, jsx as o } from "react/jsx-runtime";
-import l from "react";
+import { jsxs as G, jsx as i } from "react/jsx-runtime";
+import n from "react";
 import { Icon as T } from "../Icon/Icon.js";
 import W from "../IconButton/IconButton.js";
 import { Indicator as X } from "../Indicator/Indicator.js";
-import { clsx as $ } from "../../utils/clsx.js";
-import { getValue as q } from "../../utils/getValue.js";
-const H = "cfxui__Input__root__6392b", J = "cfxui__Input__input__07830", L = "cfxui__Input__small__c1513", O = "cfxui__Input__large__92d72", P = "cfxui__Input__placeholderIcon__4d079", Q = "cfxui__Input__onlight__7d0b7", U = "cfxui__Input__empty__3b36a", Y = "cfxui__Input__decorator__3b81f", e = {
-  root: H,
-  input: J,
-  small: L,
-  large: O,
-  placeholderIcon: P,
-  onlight: Q,
+import { ui as $ } from "../ui.js";
+import { clsx as q } from "../../utils/clsx.js";
+import { getValue as H } from "../../utils/getValue.js";
+const J = "cfxui__Input__root__6392b", L = "cfxui__Input__input__07830", O = "cfxui__Input__empty__3b36a", P = "cfxui__Input__placeholderIcon__4d079", Q = "cfxui__Input__decorator__3b81f", U = "cfxui__Input__small__c1513", Y = "cfxui__Input__large__92d72", Z = "cfxui__Input__onlight__7d0b7", e = {
+  root: J,
   "full-width": "cfxui__Input__full-width__587b3",
-  empty: U,
-  decorator: Y,
-  "backdrop-blur": "cfxui__Input__backdrop-blur__6922f"
+  input: L,
+  empty: O,
+  placeholderIcon: P,
+  decorator: Q,
+  small: U,
+  large: Y,
+  onlight: Z,
+  "backdrop-blur": "cfxui__Input__backdrop-blur__6922f",
+  "input-size-initial-large": "cfxui__Input__input-size-initial-large__41d16",
+  "input-size-initial-small": "cfxui__Input__input-size-initial-small__5c106",
+  "input-size-small-large": "cfxui__Input__input-size-small-large__908ed",
+  "input-size-small-small": "cfxui__Input__input-size-small-small__936ed",
+  "input-size-small-medium-large": "cfxui__Input__input-size-small-medium-large__d2cf3",
+  "input-size-small-medium-small": "cfxui__Input__input-size-small-medium-small__50768",
+  "input-size-medium-large": "cfxui__Input__input-size-medium-large__9e343",
+  "input-size-medium-small": "cfxui__Input__input-size-medium-small__5ec16",
+  "input-size-medium-large-large": "cfxui__Input__input-size-medium-large-large__5a58f",
+  "input-size-medium-large-small": "cfxui__Input__input-size-medium-large-small__f4e31",
+  "input-size-large-large": "cfxui__Input__input-size-large-large__bd0f0",
+  "input-size-large-small": "cfxui__Input__input-size-large-small__05100",
+  "input-size-xlarge-large": "cfxui__Input__input-size-xlarge-large__38b57",
+  "input-size-xlarge-small": "cfxui__Input__input-size-xlarge-small__00b5b"
 };
-function Z(b) {
+function ee(x) {
   const {
     decorator: t,
     loading: s,
-    type: i,
-    hasValue: _,
-    onCleare: n
-  } = b;
-  return s ? /* @__PURE__ */ o("div", { className: e.decorator, children: /* @__PURE__ */ o(X, {}) }) : t ? /* @__PURE__ */ o("div", { className: e.decorator, children: q(t) }) : i === "search" && _ ? /* @__PURE__ */ o("div", { className: e.decorator, children: /* @__PURE__ */ o(W, { size: "xsmall", areaSize: "large", name: "Close", onClick: n }) }) : null;
+    type: o,
+    hasValue: c,
+    onCleare: a
+  } = x;
+  return s ? /* @__PURE__ */ i("div", { className: e.decorator, children: /* @__PURE__ */ i(X, {}) }) : t ? /* @__PURE__ */ i("div", { className: e.decorator, children: H(t) }) : o === "search" && c ? /* @__PURE__ */ i("div", { className: e.decorator, children: /* @__PURE__ */ i(W, { size: "xsmall", areaSize: "large", name: "Close", onClick: a }) }) : null;
 }
-const ce = l.forwardRef(function(t, s) {
+const se = n.forwardRef(function(t, s) {
   const {
-    id: i,
-    fullWidth: _ = !1,
-    value: n,
-    onChange: d,
-    onSubmit: f,
-    onKeyDown: m,
-    pattern: p,
-    tabIndex: y,
+    id: o,
+    fullWidth: c = !1,
+    value: a,
+    onChange: m,
+    onSubmit: p,
+    onKeyDown: d,
+    pattern: f,
+    tabIndex: b,
     loading: C = !1,
-    spellCheck: N = !0,
-    autofocus: k = !1,
-    disabled: w = !1,
+    spellCheck: y = !0,
+    autofocus: N = !1,
+    disabled: k = !1,
     className: v = "",
-    placeholder: c = "",
-    placeholderIcon: u,
-    type: x = "text",
-    size: E = "normal",
-    theme: R = "default",
-    decorator: V,
-    backdropBlur: S = !1
-  } = t, [h, D] = l.useState(n), g = typeof h < "u" && h !== "" && h !== null || typeof n < "u" && n !== "" && n !== null, z = t.type === "number" && (t.min ?? Number.MIN_SAFE_INTEGER) || void 0, A = t.type === "number" && (t.max ?? Number.MAX_SAFE_INTEGER) || void 0, r = l.useCallback((a) => {
-    D(a), d && d(a);
-  }, [d]), F = l.useCallback(
-    (a) => {
+    placeholder: _ = "",
+    placeholderIcon: r,
+    type: z = "text",
+    size: w = "normal",
+    theme: E = "default",
+    decorator: R,
+    backdropBlur: V = !1
+  } = t, [g, S] = n.useState(a), h = typeof g < "u" && g !== "" && g !== null || typeof a < "u" && a !== "" && a !== null, D = t.type === "number" && (t.min ?? Number.MIN_SAFE_INTEGER) || void 0, F = t.type === "number" && (t.max ?? Number.MAX_SAFE_INTEGER) || void 0, u = n.useCallback((l) => {
+    S(l), m && m(l);
+  }, [m]), A = n.useCallback(
+    (l) => {
       const {
         value: I
-      } = a.target;
-      if (p) {
-        p.test(I) && r(I);
+      } = l.target;
+      if (f) {
+        f.test(I) && u(I);
         return;
       }
-      r(I);
+      u(I);
     },
-    [r, p]
-  ), K = l.useCallback((a) => {
-    m && m(a), f && a.key === "Enter" && f();
-  }, [m, f]), M = l.useCallback(() => {
-    r("");
-  }, [r]), j = $(e.root, e[E], e[R], v, {
-    [e["full-width"]]: _,
-    [e["backdrop-blur"]]: S,
-    [e.empty]: !g
-  }), B = l.useMemo(() => c ? u ? `     ${c.trim()}` : c.trim() : "", [c, u]);
+    [u, f]
+  ), K = n.useCallback((l) => {
+    d && d(l), p && l.key === "Enter" && p();
+  }, [d, p]), M = n.useCallback(() => {
+    u("");
+  }, [u]), j = q(
+    e.root,
+    e[E],
+    v,
+    $.getResponsiveFlatClassnames("input-size", w).map((l) => e[l]),
+    {
+      [e["full-width"]]: c,
+      [e["backdrop-blur"]]: V,
+      [e.empty]: !h
+    }
+  ), B = n.useMemo(() => _ ? r ? `     ${_.trim()}` : _.trim() : "", [_, r]);
   return /* @__PURE__ */ G("div", { className: j, children: [
-    /* @__PURE__ */ o(
+    /* @__PURE__ */ i(
       "input",
       {
-        id: i,
+        id: o,
         ref: s,
-        type: x,
-        tabIndex: y,
-        autoFocus: k,
+        type: z,
+        tabIndex: b,
+        autoFocus: N,
         className: e.input,
-        value: n,
+        value: a,
         placeholder: B,
-        disabled: w,
-        onChange: F,
+        disabled: k,
+        onChange: A,
         onKeyDown: K,
-        spellCheck: N,
-        min: z,
-        max: A
+        spellCheck: y,
+        min: D,
+        max: F
       }
     ),
-    u && /* @__PURE__ */ o(T, { name: u, className: e.placeholderIcon }),
-    /* @__PURE__ */ o(
-      Z,
+    r && /* @__PURE__ */ i(T, { name: r, className: e.placeholderIcon }),
+    /* @__PURE__ */ i(
+      ee,
       {
-        decorator: V,
+        decorator: R,
         loading: C,
-        type: x,
-        hasValue: g,
+        type: z,
+        hasValue: h,
         onCleare: M
       }
     )
   ] });
 });
 export {
-  ce as default
+  se as default
 };

package/dist/components/Input/InputShowcase.js

@@ -2,10 +2,11 @@ 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 "../ui.js";
 import c from "./Input.js";
 const m = /^\+?[0-9]*$/;
 function s() {
-  const [d, h] = i.useState(""), [o, n] = i.useState(0), [t, p] = i.useState("");
+  const [d, o] = i.useState(""), [h, n] = i.useState(0), [t, p] = i.useState("");
   return /* @__PURE__ */ l(r, { gap: "large", vertical: !0, children: [
     /* @__PURE__ */ l(r, { gap: "normal", vertical: !0, children: [
       /* @__PURE__ */ e(a, { children: "Small" }),
@@ -50,7 +51,7 @@ function s() {
           size: "large",
           placeholderIcon: "Tick",
           value: d,
-          onChange: h
+          onChange: o
         }
       ) })
     ] }),
@@ -77,7 +78,7 @@ function s() {
           type: "number",
           min: 1,
           max: 100,
-          value: o,
+          value: h,
           onChange: (u) => n(Number(u))
         }
       ) })
@@ -98,7 +99,7 @@ function s() {
     ] })
   ] });
 }
-const x = i.memo(s);
+const I = i.memo(s);
 export {
-  x as default
+  I as default
 };

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

@@ -1,8 +1,9 @@
 import { default as React } from 'react';
+import { ResponsiveValueType } from '../ui';
 import { InputSize } from './Input';
 
 export interface RichInputProps {
-    size?: InputSize;
+    size?: ResponsiveValueType<InputSize>;
     value: string;
     onChange(value: string): void;
     onFocus?(): void;

package/dist/components/Input/RichInput.js

@@ -1,63 +1,80 @@
-import { jsxs as B, jsx as n } from "react/jsx-runtime";
-import r from "react";
-import { Button as D } from "../Button/Button.js";
-import { clsx as F } from "../../utils/clsx.js";
-import { useDynamicRef as i } from "../../utils/hooks/useDynamicRef.js";
+import { jsxs as w, jsx as l } from "react/jsx-runtime";
+import i from "react";
+import { Button as y } from "../Button/Button.js";
+import { ui as B } from "../ui.js";
+import { clsx as D } from "../../utils/clsx.js";
+import { useDynamicRef as _ } from "../../utils/hooks/useDynamicRef.js";
 import "../../utils/hooks/useGlobalKeyboardEvent.js";
 import "../../utils/hooks/useKeyboardClose.js";
 import "../../index-2hJuj4UN.js";
-const L = "cfxui__RichInput__root__57e6e", T = "cfxui__RichInput__renderer__8b298", j = "cfxui__RichInput__small__cd3d1", E = "cfxui__RichInput__large__74aed", z = "cfxui__RichInput__clear__5538b", c = {
+const L = "cfxui__RichInput__root__57e6e", T = "cfxui__RichInput__renderer__8b298", j = "cfxui__RichInput__clear__5538b", c = {
   root: L,
   renderer: T,
-  small: j,
-  large: E,
-  clear: z
-}, P = r.forwardRef(function(f, _) {
+  clear: j,
+  "richinput-size-initial-large": "cfxui__RichInput__richinput-size-initial-large__cdc8c",
+  "richinput-size-initial-small": "cfxui__RichInput__richinput-size-initial-small__c3ec0",
+  "richinput-size-small-large": "cfxui__RichInput__richinput-size-small-large__1e06d",
+  "richinput-size-small-small": "cfxui__RichInput__richinput-size-small-small__f3518",
+  "richinput-size-small-medium-large": "cfxui__RichInput__richinput-size-small-medium-large__92eec",
+  "richinput-size-small-medium-small": "cfxui__RichInput__richinput-size-small-medium-small__8df57",
+  "richinput-size-medium-large": "cfxui__RichInput__richinput-size-medium-large__43539",
+  "richinput-size-medium-small": "cfxui__RichInput__richinput-size-medium-small__4d0ff",
+  "richinput-size-medium-large-large": "cfxui__RichInput__richinput-size-medium-large-large__df4e3",
+  "richinput-size-medium-large-small": "cfxui__RichInput__richinput-size-medium-large-small__af8ce",
+  "richinput-size-large-large": "cfxui__RichInput__richinput-size-large-large__1dc6d",
+  "richinput-size-large-small": "cfxui__RichInput__richinput-size-large-small__bd0d0",
+  "richinput-size-xlarge-large": "cfxui__RichInput__richinput-size-xlarge-large__ae9e6",
+  "richinput-size-xlarge-small": "cfxui__RichInput__richinput-size-xlarge-small__41461"
+}, P = i.forwardRef(function(o, m) {
   const {
-    size: d = "normal",
-    value: l,
-    onChange: m,
-    onFocus: p,
-    onBlur: h,
-    onSelect: R,
-    onKeyDown: C,
-    className: g,
+    size: p = "normal",
+    value: n,
+    onChange: h,
+    onFocus: f,
+    onBlur: d,
+    onSelect: g,
+    onKeyDown: z,
+    className: R,
     rendered: x,
     placeholder: I,
-    autoFocus: S,
+    autoFocus: C,
     withClearButton: b = !1
-  } = f, a = r.useRef(null), t = r.useRef(null), s = i(m), u = i(R), k = r.useCallback((e) => {
-    s.current(e.target.value);
-  }, []), N = r.useCallback(() => {
+  } = o, u = i.useRef(null), r = i.useRef(null), a = _(h), s = _(g), S = i.useCallback((e) => {
+    a.current(e.target.value);
+  }, []), k = i.useCallback(() => {
     var e;
-    s.current(""), (e = a.current) == null || e.focus();
-  }, []), v = r.useCallback((e) => {
-    if (!u.current || !(e.target instanceof HTMLInputElement))
+    a.current(""), (e = u.current) == null || e.focus();
+  }, []), N = i.useCallback((e) => {
+    if (!s.current || !(e.target instanceof HTMLInputElement))
       return;
-    const o = e.target;
-    u.current(o.selectionStart, o.selectionEnd, o.selectionDirection);
-  }, []), w = r.useCallback((e) => {
-    t.current && (t.current.scrollTop = e.target.scrollTop, t.current.scrollLeft = e.target.scrollLeft);
-  }, []), y = F(c.root, g, c[d]);
-  return /* @__PURE__ */ B("div", { ref: _, className: y, children: [
-    /* @__PURE__ */ n(
+    const t = e.target;
+    s.current(t.selectionStart, t.selectionEnd, t.selectionDirection);
+  }, []), v = i.useCallback((e) => {
+    r.current && (r.current.scrollTop = e.target.scrollTop, r.current.scrollLeft = e.target.scrollLeft);
+  }, []), F = D(
+    c.root,
+    R,
+    B.getResponsiveFlatClassnames("richinput-size", p).map((e) => c[e])
+  );
+  return /* @__PURE__ */ w("div", { ref: m, className: F, children: [
+    /* @__PURE__ */ l(
       "input",
       {
-        ref: a,
-        autoFocus: S,
+        ref: u,
+        autoFocus: C,
         type: "text",
-        value: l,
-        onChange: k,
+        value: n,
+        onChange: S,
         placeholder: I,
-        onBlur: h,
-        onFocus: p,
-        onScroll: w,
-        onSelect: v,
-        onKeyDown: C
+        onBlur: d,
+        onFocus: f,
+        onScroll: v,
+        onSelect: N,
+        onKeyDown: z
       }
     ),
-    /* @__PURE__ */ n("div", { ref: t, className: c.renderer, children: x }),
-    b && l && /* @__PURE__ */ n("div", { className: c.clear, children: /* @__PURE__ */ n(D, { icon: "Close", onClick: N }) })
+    /* @__PURE__ */ l("div", { ref: r, className: c.renderer, children: x }),
+    b && n && /* @__PURE__ */ l("div", { className: c.clear, children: /* @__PURE__ */ l(y, { icon: "Close", onClick: k }) })
   ] });
 });
 export {