@cfx-dev/ui-components 4.2.23 → 4.3.0

package/dist/components/DropdownSelect/DropdownSelectShowcase.js

@@ -1,6 +1,6 @@
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
 import r from "react";
-import { Flex as l } from "../Layout/Flex/Flex.js";
+import l from "../Layout/Flex/Flex.js";
 import { Text as o } from "../Text/Text.js";
 import "../../utils/ui/ui.js";
 import { DropdownSelect as a } from "./DropdownSelect.js";

package/dist/components/Flyout/Flyout.d.ts

@@ -11,9 +11,10 @@ export interface FlyoutProps {
 }
 export declare function Flyout(props: FlyoutProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Flyout {
-    var Header: React.ForwardRefExoticComponent<FlyoutHeaderProps & React.RefAttributes<HTMLDivElement>>;
+    var Header: (props: FlyoutHeaderProps) => import("react/jsx-runtime").JSX.Element;
 }
 export interface FlyoutHeaderProps {
     onClose?(): void;
     children: React.ReactNode;
+    ref?: React.Ref<HTMLDivElement>;
 }

package/dist/components/Flyout/Flyout.js

@@ -1,10 +1,11 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import n from "react";
-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 { jsx as e, jsxs as i } from "react/jsx-runtime";
+import d from "react";
+import { F as f } from "../../Combination-N-vN9BB-.js";
+import p from "../Button/Button.js";
 import { clsx as l } from "../../utils/clsx.js";
-import { noop as y } from "../../utils/functional.js";
+import { noop as h } from "../../utils/functional.js";
+import "../../utils/links.js";
+import { Interactive as y } from "../Interactive/Interactive.js";
 import "../../utils/hooks/useGlobalKeyboardEvent.js";
 import { useKeyboardClose as F } from "../../utils/hooks/useKeyboardClose.js";
 import { useOutlet as x } from "../../utils/hooks/useOutlet.js";
@@ -26,35 +27,36 @@ const k = "cfxui__Flyout__root__eba04", b = "cfxui__Flyout__holder__d80b5", v =
 function I(c) {
   const {
     disabled: t = !1,
-    size: a = "normal",
-    onClose: s = y,
-    children: r,
-    holderClassName: d
-  } = c, u = x(E);
-  n.useEffect(() => {
+    size: s = "normal",
+    onClose: r = h,
+    children: a,
+    holderClassName: n
+  } = c, m = x(E);
+  d.useEffect(() => {
     if (t)
       return;
     const _ = document.getElementById("cfxui-root");
     return _ == null || _.classList.add("shrink"), () => _ == null ? void 0 : _.classList.remove("shrink");
-  }, [t]), F(s);
-  const m = l(o.root, o[`size-${a}`], {
+  }, [t]), F(r);
+  const u = l(o.root, o[`size-${s}`], {
     [o.active]: !t
   });
-  return /* @__PURE__ */ e(u, { children: /* @__PURE__ */ i("div", { className: m, children: [
-    /* @__PURE__ */ e(h, { showPointer: !1, className: o.backdrop, onClick: s }),
-    /* @__PURE__ */ e("div", { className: o.mask, children: /* @__PURE__ */ e("div", { className: l(o.holder, d), children: /* @__PURE__ */ e(f, { disabled: !!t, className: o.content, children: r }) }) })
+  return /* @__PURE__ */ e(m, { children: /* @__PURE__ */ i("div", { className: u, children: [
+    /* @__PURE__ */ e(y, { showPointer: !1, className: o.backdrop, onClick: r }),
+    /* @__PURE__ */ e("div", { className: o.mask, children: /* @__PURE__ */ e("div", { className: l(o.holder, n), children: /* @__PURE__ */ e(f, { disabled: !!t, className: o.content, children: a }) }) })
   ] }) });
 }
-I.Header = n.forwardRef(function(t, a) {
+I.Header = function(t) {
   const {
     onClose: s,
-    children: r
+    children: r,
+    ref: a
   } = t;
   return /* @__PURE__ */ i("div", { ref: a, className: o.header, children: [
     /* @__PURE__ */ e("div", { className: o.title, children: r }),
     !!s && /* @__PURE__ */ e(p, { icon: "Close", onClick: s })
   ] });
-});
+};
 export {
   E as FLYOUT_OUTLET_ID,
   I as Flyout

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

@@ -8,6 +8,7 @@ export interface IconProps extends TextColorProps {
     as?: React.ElementType;
     size?: ResponsiveValueType<IconSize>;
     className?: string;
+    ref?: React.Ref<HTMLDivElement>;
     name: IconName;
 }
-export declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLDivElement>>;
+export declare function Icon(props: IconProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Icon/Icon.js

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

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

@@ -7,6 +7,7 @@ export interface IconBigProps extends TextColorProps {
     as?: React.ElementType;
     size?: IconBigSize;
     className?: string;
+    ref?: React.Ref<HTMLDivElement>;
     name: IconBigName;
 }
-export declare const IconBig: React.ForwardRefExoticComponent<IconBigProps & React.RefAttributes<HTMLDivElement>>;
+export declare function IconBig(props: IconBigProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/IconBig/IconBig.js

@@ -1,5 +1,4 @@
 import { jsx as t } from "react/jsx-runtime";
-import l from "react";
 import "../Icons/cfx-icons/Close.js";
 import "../Icons/cfx-icons/Controller.js";
 import "../Icons/cfx-icons/Copy.js";
@@ -21,6 +20,7 @@ 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/Radio.js";
 import "../Icons/cfx-icons/Refresh.js";
 import "../Icons/cfx-icons/RightArrow.js";
 import "../Icons/cfx-icons/RightChevron.js";
@@ -45,31 +45,33 @@ import "../Icons/cfx-icons/User.js";
 import "../Icons/cfx-icons/Verified.js";
 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 { I as l } from "../../cfxIconsBig-BLJjMT-Y.js";
+import { getTextOpacity as f } from "../Text/Text.js";
 import "../../utils/ui/ui.js";
-import { clsx as I } from "../../utils/clsx.js";
+import { clsx as g } from "../../utils/clsx.js";
 import { getColor as x } from "../../utils/color.js";
 const z = "cfxui__IconBig__root__f259a", i = {
   root: z,
   "size-small": "cfxui__IconBig__size-small__4e0b8",
   "size-normal": "cfxui__IconBig__size-normal__6ab6d",
   "size-large": "cfxui__IconBig__size-large__753d2"
-}, uo = l.forwardRef(function(o, r) {
+};
+function Io(o) {
   const {
-    as: m = "div",
-    size: p = "normal",
-    opacity: c,
+    as: r = "div",
+    size: m = "normal",
+    opacity: p,
     className: s,
-    name: n
+    name: c,
+    ref: n
   } = o, e = {
     color: x({
       ...o,
-      opacity: g(c)
+      opacity: f(p)
     })
-  }, _ = I(i.root, i[`size-${p}`], s), a = f[n];
-  return /* @__PURE__ */ t(m, { ref: r, style: e, className: _, children: /* @__PURE__ */ t(a, {}) });
-});
+  }, _ = g(i.root, i[`size-${m}`], s), a = l[c];
+  return /* @__PURE__ */ t(r, { ref: n, style: e, className: _, children: /* @__PURE__ */ t(a, {}) });
+}
 export {
-  uo as IconBig
+  Io as IconBig
 };

package/dist/components/Icons/IconsShowcase.js

@@ -1,5 +1,5 @@
 import { jsxs as n, jsx as e } from "react/jsx-runtime";
-import { I as s } from "../../cfxIcons-BNd1WgpX.js";
+import { I as s } from "../../cfxIcons-B9nzO6TW.js";
 import { I as c } from "../../cfxIconsBig-BLJjMT-Y.js";
 function d() {
   const l = Object.entries(s).map(([i, t]) => ({

package/dist/components/Icons/cfx-icons/Radio.d.ts

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

package/dist/components/Icons/cfx-icons/Radio.js

@@ -0,0 +1,36 @@
+import { jsxs as t, jsx as o } from "react/jsx-runtime";
+import e from "react";
+function n(r) {
+  return /* @__PURE__ */ t(
+    "svg",
+    {
+      viewBox: "0 0 16 16",
+      fill: "currentColor",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...r,
+      children: [
+        /* @__PURE__ */ o(
+          "path",
+          {
+            d: "M12.5 2H3.5C2.67157 2 2 2.67157 2 3.5V12.5C2 13.3284 2.67157 14 3.5 14H12.5C13.3284 14 14 13.3284 14 12.5V3.5C14 2.67157 13.3284 2 12.5 2Z",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ o(
+          "path",
+          {
+            d: "M10.25 5H5.75C5.33579 5 5 5.33579 5 5.75V10.25C5 10.6642 5.33579 11 5.75 11H10.25C10.6642 11 11 10.6642 11 10.25V5.75C11 5.33579 10.6642 5 10.25 5Z",
+            fill: "currentColor"
+          }
+        )
+      ]
+    }
+  );
+}
+const l = e.memo(n);
+export {
+  l as default
+};

package/dist/components/Icons/cfx-icons/Square.js

@@ -1,18 +1,24 @@
-import { jsx as t } from "react/jsx-runtime";
-import r from "react";
-function o(e) {
-  return /* @__PURE__ */ t(
+import { jsx as r } from "react/jsx-runtime";
+import t from "react";
+function e(o) {
+  return /* @__PURE__ */ r(
     "svg",
     {
-      viewBox: "0 0 16 16",
+      viewBox: "0 0 64 64",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
-      ...e,
-      children: /* @__PURE__ */ t("rect", { x: "2.75", y: "2.75", width: "10.5", height: "10.5", rx: "0.75", stroke: "white", strokeWidth: "1.5" })
+      ...o,
+      children: /* @__PURE__ */ r(
+        "path",
+        {
+          d: "M48.5 54H15.5C12.47 54 10 51.53 10 48.5V15.5C10 12.47 12.47 10 15.5 10H48.5C51.53 10 54 12.47 54 15.5V48.5C54 51.53 51.53 54 48.5 54ZM15.5 14C14.67 14 14 14.67 14 15.5V48.5C14 49.33 14.67 50 15.5 50H48.5C49.33 50 50 49.33 50 48.5V15.5C50 14.67 49.33 14 48.5 14H15.5Z",
+          fill: "currentColor"
+        }
+      )
     }
   );
 }
-const s = r.memo(o);
+const C = t.memo(e);
 export {
-  s as default
+  C as default
 };

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

@@ -19,6 +19,7 @@ export { default as MoreInfo } from './cfx-icons/MoreInfo';
 export { default as Pencil } from './cfx-icons/Pencil';
 export { default as Play } from './cfx-icons/Play';
 export { default as Plus } from './cfx-icons/Plus';
+export { default as Radio } from './cfx-icons/Radio';
 export { default as Refresh } from './cfx-icons/Refresh';
 export { default as RightArrow } from './cfx-icons/RightArrow';
 export { default as RightChevron } from './cfx-icons/RightChevron';

package/dist/components/Icons/cfxIcons.js

@@ -1,16 +1,16 @@
 import { default as o } from "./cfx-icons/Close.js";
-import { default as a } from "./cfx-icons/Controller.js";
+import { default as t } from "./cfx-icons/Controller.js";
 import { default as l } from "./cfx-icons/Copy.js";
 import { default as p } from "./cfx-icons/DownArrow.js";
-import { default as d } from "./cfx-icons/DownChevron.js";
+import { default as u } from "./cfx-icons/DownChevron.js";
 import { default as m } from "./cfx-icons/Download.js";
-import { default as i } from "./cfx-icons/Expand.js";
+import { default as n } from "./cfx-icons/Expand.js";
 import { default as C } from "./cfx-icons/ExternalLink.js";
 import { default as w } from "./cfx-icons/Heart.js";
 import { default as c } from "./cfx-icons/HeartFilled.js";
-import { default as S } from "./cfx-icons/Help.js";
-import { default as y } from "./cfx-icons/LeftArrow.js";
-import { default as R } from "./cfx-icons/LeftChevron.js";
+import { default as R } from "./cfx-icons/Help.js";
+import { default as g } from "./cfx-icons/LeftArrow.js";
+import { default as A } from "./cfx-icons/LeftChevron.js";
 import { default as D } from "./cfx-icons/Map.js";
 import { default as L } from "./cfx-icons/Menu.js";
 import { default as T } from "./cfx-icons/Minus.js";
@@ -19,45 +19,46 @@ import { default as E } from "./cfx-icons/MoreInfo.js";
 import { default as F } from "./cfx-icons/Pencil.js";
 import { default as O } from "./cfx-icons/Play.js";
 import { default as j } from "./cfx-icons/Plus.js";
-import { default as G } from "./cfx-icons/Refresh.js";
-import { default as K } from "./cfx-icons/RightArrow.js";
-import { default as Q } from "./cfx-icons/RightChevron.js";
-import { default as Y } from "./cfx-icons/Search.js";
-import { default as _ } from "./cfx-icons/Sort.js";
-import { default as rr } from "./cfx-icons/Square.js";
-import { default as or } from "./cfx-icons/SquareCheck.js";
-import { default as ar } from "./cfx-icons/Stop.js";
-import { default as lr } from "./cfx-icons/Tick.js";
-import { default as pr } from "./cfx-icons/Transfer.js";
-import { default as dr } from "./cfx-icons/Trash.js";
-import { default as mr } from "./cfx-icons/Undo.js";
-import { default as ir } from "./cfx-icons/UpArrow.js";
-import { default as Cr } from "./cfx-icons/UpChevron.js";
-import { default as wr } from "./cfx-icons/Upload.js";
-import { default as cr } from "./cfx-icons/Users.js";
-import { default as Sr } from "./cfx-icons/Visibility.js";
-import { default as yr } from "./cfx-icons/VisibilityOff.js";
-import { default as Rr } from "./cfx-icons/Warning.js";
-import { default as Dr } from "./cfx-icons/Cart.js";
-import { default as Lr } from "./cfx-icons/User.js";
-import { default as Tr } from "./cfx-icons/Verified.js";
-import { default as br } from "./cfx-icons/UpvotesBurst.js";
-import { default as Er } from "./cfx-icons/UpvotesRecurring.js";
+import { default as G } from "./cfx-icons/Radio.js";
+import { default as K } from "./cfx-icons/Refresh.js";
+import { default as Q } from "./cfx-icons/RightArrow.js";
+import { default as Y } from "./cfx-icons/RightChevron.js";
+import { default as _ } from "./cfx-icons/Search.js";
+import { default as rr } from "./cfx-icons/Sort.js";
+import { default as or } from "./cfx-icons/Square.js";
+import { default as tr } from "./cfx-icons/SquareCheck.js";
+import { default as lr } from "./cfx-icons/Stop.js";
+import { default as pr } from "./cfx-icons/Tick.js";
+import { default as ur } from "./cfx-icons/Transfer.js";
+import { default as mr } from "./cfx-icons/Trash.js";
+import { default as nr } from "./cfx-icons/Undo.js";
+import { default as Cr } from "./cfx-icons/UpArrow.js";
+import { default as wr } from "./cfx-icons/UpChevron.js";
+import { default as cr } from "./cfx-icons/Upload.js";
+import { default as Rr } from "./cfx-icons/Users.js";
+import { default as gr } from "./cfx-icons/Visibility.js";
+import { default as Ar } from "./cfx-icons/VisibilityOff.js";
+import { default as Dr } from "./cfx-icons/Warning.js";
+import { default as Lr } from "./cfx-icons/Cart.js";
+import { default as Tr } from "./cfx-icons/User.js";
+import { default as br } from "./cfx-icons/Verified.js";
+import { default as Er } from "./cfx-icons/UpvotesBurst.js";
+import { default as Fr } from "./cfx-icons/UpvotesRecurring.js";
 export {
-  Dr as Cart,
+  Lr as Cart,
   o as Close,
-  a as Controller,
+  t as Controller,
   l as Copy,
   p as DownArrow,
-  d as DownChevron,
+  u as DownChevron,
   m as Download,
-  i as Expand,
+  n as Expand,
   C as ExternalLink,
   w as Heart,
   c as HeartFilled,
-  S as Help,
-  y as LeftArrow,
-  R as LeftChevron,
+  R as Help,
+  g as LeftArrow,
+  A as LeftChevron,
   D as Map,
   L as Menu,
   T as Minus,
@@ -66,27 +67,28 @@ export {
   F as Pencil,
   O as Play,
   j as Plus,
-  G as Refresh,
-  K as RightArrow,
-  Q as RightChevron,
-  Y as Search,
-  _ as Sort,
-  rr as Square,
-  or as SquareCheck,
-  ar as Stop,
-  lr as Tick,
-  pr as Transfer,
-  dr as Trash,
-  mr as Undo,
-  ir as UpArrow,
-  Cr as UpChevron,
-  wr as Upload,
-  br as UpvotesBurst,
-  Er as UpvotesRecurring,
-  Lr as User,
-  cr as Users,
-  Tr as Verified,
-  Sr as Visibility,
-  yr as VisibilityOff,
-  Rr as Warning
+  G as Radio,
+  K as Refresh,
+  Q as RightArrow,
+  Y as RightChevron,
+  _ as Search,
+  rr as Sort,
+  or as Square,
+  tr as SquareCheck,
+  lr as Stop,
+  pr as Tick,
+  ur as Transfer,
+  mr as Trash,
+  nr as Undo,
+  Cr as UpArrow,
+  wr as UpChevron,
+  cr as Upload,
+  Er as UpvotesBurst,
+  Fr as UpvotesRecurring,
+  Tr as User,
+  Rr as Users,
+  br as Verified,
+  gr as Visibility,
+  Ar as VisibilityOff,
+  Dr as Warning
 };

package/dist/components/Icons/index.js

@@ -1,4 +1,4 @@
-import { I as s } from "../../cfxIcons-BNd1WgpX.js";
+import { I as s } from "../../cfxIcons-B9nzO6TW.js";
 import { I as a } from "../../cfxIconsBig-BLJjMT-Y.js";
 export {
   s as Icons,

package/dist/components/Indicator/Indicator.js

@@ -1,19 +1,18 @@
-import { jsxs as i, jsx as o } from "react/jsx-runtime";
-import a from "react";
+import { jsxs as a, jsx as o } from "react/jsx-runtime";
+import i from "react";
 import { clsx as n } from "../../utils/clsx.js";
-const c = "cfxui__Indicator__root__71ac4", s = "cfxui__Indicator__indicator__9d908", r = {
-  root: c,
-  indicator: s
-}, d = { animationDelay: "0ms" }, e = { animationDelay: "50ms" }, m = { animationDelay: "100ms" }, l = { animationDelay: "150ms" }, u = a.memo(function({
+const s = "cfxui__Indicator__root__71ac4", e = {
+  root: s
+}, c = { animationDelay: "0ms" }, m = { animationDelay: "50ms" }, r = { animationDelay: "100ms" }, l = { animationDelay: "150ms" }, v = i.memo(function({
   className: t
 }) {
-  return /* @__PURE__ */ i("div", { className: n(r.root, t), children: [
-    /* @__PURE__ */ o("div", { style: d }),
-    /* @__PURE__ */ o("div", { style: e }),
+  return /* @__PURE__ */ a("div", { className: n(e.root, t), children: [
+    /* @__PURE__ */ o("div", { style: c }),
     /* @__PURE__ */ o("div", { style: m }),
+    /* @__PURE__ */ o("div", { style: r }),
     /* @__PURE__ */ o("div", { style: l })
   ] });
 });
 export {
-  u as Indicator
+  v as Indicator
 };

package/dist/components/InfoPanel/InfoPanelShowcase.js

@@ -1,6 +1,6 @@
 import { jsxs as e, jsx as r } from "react/jsx-runtime";
 import a from "react";
-import { Flex as n } from "../Layout/Flex/Flex.js";
+import n from "../Layout/Flex/Flex.js";
 import { Text as i } from "../Text/Text.js";
 import "../../utils/ui/ui.js";
 import { LOREM_IPSUM as t } from "../../utils/loremipsum.js";

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

@@ -11,6 +11,7 @@ type InputTypeSpecificProps = {
     type: 'number';
     min?: number | string;
     max?: number | string;
+    step?: number | string;
     value?: number | string;
 };
 export type InputProps = InputTypeSpecificProps & {
@@ -22,6 +23,7 @@ export type InputProps = InputTypeSpecificProps & {
     pattern?: RegExp;
     fullWidth?: boolean;
     className?: string;
+    containerClassName?: string;
     placeholder?: string;
     placeholderIcon?: IconName;
     disabled?: boolean;
@@ -29,9 +31,10 @@ export type InputProps = InputTypeSpecificProps & {
     backdropBlur?: boolean;
     spellCheck?: boolean;
     decorator?: React.ReactNode | (() => React.ReactNode);
+    ref?: React.Ref<HTMLInputElement>;
     onChange?: (value: string) => void;
     onSubmit?: () => void;
     onKeyDown?(event: React.KeyboardEvent<HTMLInputElement>): void;
 };
-declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+declare function Input(props: InputProps): import("react/jsx-runtime").JSX.Element;
 export default Input;