@pismo/marola 1.0.0-beta.69 → 1.0.0-beta.8

package/dist/components/Input/Input.js

@@ -1,523 +1,111 @@
-import '../../assets/Input.css';
-import { jsxs as K, jsx as j } from "react/jsx-runtime";
-import * as x from "react";
-import { forwardRef as de, useState as ce, useId as _e, useMemo as he } from "react";
-import { c as T } from "../../clsx-DB4S2d7J.js";
-import { Icon as me } from "../Icon/Icon.js";
-import { Typography as G } from "../Typography/Typography.js";
-import { g as fe, a as ye, u as ge, f as J, b as f, _ as be, c as ee, i as Ce, P as e, d as we, e as xe } from "../../useSlotProps-C_I1kEHr.js";
-function Ne(l) {
-  let i = "https://mui.com/production-error/?code=" + l;
-  for (let d = 1; d < arguments.length; d += 1)
-    i += "&args[]=" + encodeURIComponent(arguments[d]);
-  return "Minified MUI error #" + l + "; visit " + i + " for the full message.";
-}
-const ne = "Input";
-function Pe(l) {
-  return fe(ne, l);
-}
-ye(ne, ["root", "formControl", "focused", "disabled", "error", "multiline", "input", "inputMultiline", "inputTypeSearch", "adornedStart", "adornedEnd"]);
-const te = /* @__PURE__ */ x.createContext(void 0);
-process.env.NODE_ENV !== "production" && (te.displayName = "FormControlContext");
-function ve() {
-  return x.useContext(te);
-}
-function Re(l = {}) {
-  const {
-    defaultValue: i,
-    disabled: d = !1,
-    error: u = !1,
-    onBlur: c,
-    onChange: m,
-    onFocus: N,
-    required: P = !1,
-    value: v,
-    inputRef: R
-  } = l, t = ve();
-  let E, _, g, b, y;
-  if (t) {
-    var k, h, S;
-    if (E = void 0, _ = (k = t.disabled) != null ? k : !1, g = (h = t.error) != null ? h : !1, b = (S = t.required) != null ? S : !1, y = t.value, process.env.NODE_ENV !== "production") {
-      const n = ["defaultValue", "disabled", "error", "required", "value"].filter((r) => l[r] !== void 0);
-      n.length > 0 && console.warn(["MUI: You have set props on an input that is inside a FormControl.", "Set these props on a FormControl instead. Otherwise they will be ignored.", `Ignored props: ${n.join(", ")}`].join(`
-`));
-    }
-  } else
-    E = i, _ = d, g = u, b = P, y = v;
-  const {
-    current: A
-  } = x.useRef(y != null), D = x.useCallback((n) => {
-    process.env.NODE_ENV !== "production" && n && n.nodeName !== "INPUT" && !n.focus && console.error(["MUI: You have provided a `slots.input` to the input component", "that does not correctly handle the `ref` prop.", "Make sure the `ref` prop is called with a HTMLInputElement."].join(`
-`));
-  }, []), C = x.useRef(null), B = ge(C, R, D), [F, I] = x.useState(!1);
-  x.useEffect(() => {
-    !t && _ && F && (I(!1), c == null || c());
-  }, [t, _, F, c]);
-  const s = (n) => (r) => {
-    var o;
-    if (t != null && t.disabled) {
-      r.stopPropagation();
-      return;
-    }
-    if ((o = n.onFocus) == null || o.call(n, r), t && t.onFocus) {
-      var a;
-      t == null || (a = t.onFocus) == null || a.call(t);
-    } else
-      I(!0);
-  }, M = (n) => (r) => {
-    var o;
-    (o = n.onBlur) == null || o.call(n, r), t && t.onBlur ? t.onBlur() : I(!1);
-  }, H = (n) => (r, ...o) => {
-    var a, w;
-    if (!A && (r.target || C.current) == null)
-      throw new Error(process.env.NODE_ENV !== "production" ? "MUI: Expected valid input target. Did you use a custom `slots.input` and forget to forward refs? See https://mui.com/r/input-component-ref-interface for more info." : Ne(17));
-    t == null || (a = t.onChange) == null || a.call(t, r), (w = n.onChange) == null || w.call(n, r, ...o);
-  }, q = (n) => (r) => {
-    var o;
-    C.current && r.currentTarget === r.target && C.current.focus(), (o = n.onClick) == null || o.call(n, r);
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import * as g from "react";
+import { useState as V, useId as k } from "react";
+import { c as a } from "../../clsx-DB4S2d7J.js";
+import { Typography as c } from "../Typography/Typography.js";
+import { s as t, I as q } from "../../Input.module-iOYlI_1w.js";
+const D = (s) => /* @__PURE__ */ g.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", "data-waves-icon": "fa/solid/circle-exclamation", fill: "currentColor", color: "currentColor", width: "1em", height: "1em", style: {
+  fill: "currentcolor",
+  color: "currentcolor",
+  width: "1em",
+  height: "1em"
+}, ...s }, /* @__PURE__ */ g.createElement("path", { d: "M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM232 152C232 138.8 242.8 128 256 128s24 10.75 24 24v128c0 13.25-10.75 24-24 24S232 293.3 232 280V152zM256 400c-17.36 0-31.44-14.08-31.44-31.44c0-17.36 14.07-31.44 31.44-31.44s31.44 14.08 31.44 31.44C287.4 385.9 273.4 400 256 400z" })), M = ({
+  label: s,
+  infoMessage: d,
+  errorMessage: i,
+  leftIcon: o,
+  rightIcon: p,
+  id: w,
+  disabled: C,
+  type: N = "text",
+  maxLength: l,
+  hideCharsCounter: x = !1,
+  onChange: m,
+  classNameWrapper: b,
+  classNameLabel: v,
+  classNameInput: y,
+  classNameInfoMessage: I,
+  classNameErrorMessage: j,
+  classNameCharsCounter: z,
+  "data-testid-wrapper": E,
+  "data-testid-label": A,
+  "data-testid-input": P,
+  "data-testid-infoMessage": S,
+  "data-testid-errorMessage": $,
+  "data-testid-charsCounter": B,
+  ...u
+}) => {
+  const [F, O] = V(0), R = k(), h = w || `input_${R}`;
+  Object.assign(u, { "data-testid": P });
+  const T = (e) => {
+    var _, f;
+    O((f = (_ = e == null ? void 0 : e.target) == null ? void 0 : _.value) == null ? void 0 : f.length), m && m(e);
   };
-  return {
-    disabled: _,
-    error: g,
-    focused: F,
-    formControlContext: t,
-    getInputProps: (n = {}) => {
-      const o = f({}, {
-        onBlur: c,
-        onChange: m,
-        onFocus: N
-      }, J(n)), a = f({}, o, {
-        onBlur: M(o),
-        onChange: H(o),
-        onFocus: s(o)
-      });
-      return f({}, a, {
-        "aria-invalid": g || void 0,
-        defaultValue: E,
-        value: y,
-        required: b,
-        disabled: _
-      }, n, {
-        ref: B
-      }, a);
-    },
-    getRootProps: (n = {}) => {
-      const r = J(l, ["onBlur", "onChange", "onFocus"]), o = f({}, r, J(n));
-      return f({}, n, o, {
-        onClick: q(o)
-      });
-    },
-    inputRef: B,
-    required: b,
-    value: y
-  };
-}
-const Ee = ["aria-describedby", "aria-label", "aria-labelledby", "autoComplete", "autoFocus", "className", "defaultValue", "disabled", "endAdornment", "error", "id", "multiline", "name", "onClick", "onChange", "onKeyDown", "onKeyUp", "onFocus", "onBlur", "placeholder", "readOnly", "required", "startAdornment", "value", "type", "rows", "slotProps", "slots", "minRows", "maxRows"], Fe = (l) => {
-  const {
-    disabled: i,
-    error: d,
-    focused: u,
-    formControlContext: c,
-    multiline: m,
-    startAdornment: N,
-    endAdornment: P
-  } = l;
-  return we({
-    root: ["root", i && "disabled", d && "error", u && "focused", !!c && "formControl", m && "multiline", !!N && "adornedStart", !!P && "adornedEnd"],
-    input: ["input", i && "disabled", m && "multiline"]
-  }, xe(Pe));
-}, oe = /* @__PURE__ */ x.forwardRef(function(i, d) {
-  var u, c, m;
-  const {
-    "aria-describedby": N,
-    "aria-label": P,
-    "aria-labelledby": v,
-    autoComplete: R,
-    autoFocus: t,
-    className: E,
-    defaultValue: _,
-    disabled: g,
-    endAdornment: b,
-    error: y,
-    id: k,
-    multiline: h = !1,
-    name: S,
-    onClick: A,
-    onChange: D,
-    onKeyDown: C,
-    onKeyUp: B,
-    onFocus: F,
-    onBlur: I,
-    placeholder: s,
-    readOnly: M,
-    required: H,
-    startAdornment: q,
-    value: L,
-    type: U,
-    rows: n,
-    slotProps: r = {},
-    slots: o = {},
-    minRows: a,
-    maxRows: w
-  } = i, $ = be(i, Ee), {
-    getRootProps: O,
-    getInputProps: Y,
-    focused: V,
-    formControlContext: re,
-    error: ae,
-    disabled: se
-  } = Re({
-    disabled: g,
-    defaultValue: _,
-    error: y,
-    onBlur: I,
-    onClick: A,
-    onChange: D,
-    onFocus: F,
-    required: H,
-    value: L
-  }), Q = h ? void 0 : U ?? "text", W = f({}, i, {
-    disabled: se,
-    error: ae,
-    focused: V,
-    formControlContext: re,
-    multiline: h,
-    type: Q
-  }), X = Fe(W), le = {
-    "aria-describedby": N,
-    "aria-label": P,
-    "aria-labelledby": v,
-    autoComplete: R,
-    autoFocus: t,
-    id: k,
-    onKeyDown: C,
-    onKeyUp: B,
-    name: S,
-    placeholder: s,
-    readOnly: M,
-    type: Q
-  }, Z = (u = o.root) != null ? u : "div", ie = ee({
-    elementType: Z,
-    getSlotProps: O,
-    externalSlotProps: r.root,
-    externalForwardedProps: $,
-    additionalProps: {
-      ref: d
-    },
-    ownerState: W,
-    className: [X.root, E]
-  }), z = h ? (c = o.textarea) != null ? c : "textarea" : (m = o.input) != null ? m : "input", ue = ee({
-    elementType: z,
-    getSlotProps: (pe) => Y(f({}, le, pe)),
-    externalSlotProps: r.input,
-    additionalProps: f({
-      rows: h ? n : void 0
-    }, h && !Ce(z) && {
-      minRows: n || a,
-      maxRows: n || w
-    }),
-    ownerState: W,
-    className: X.input
-  });
-  return process.env.NODE_ENV !== "production" && h && n && (a || w) && console.warn("MUI: You can not use the `minRows` or `maxRows` props when the input `rows` prop is set."), /* @__PURE__ */ K(Z, f({}, ie, {
-    children: [q, /* @__PURE__ */ j(z, f({}, ue)), b]
-  }));
-});
-process.env.NODE_ENV !== "production" && (oe.propTypes = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
-  // └─────────────────────────────────────────────────────────────────────┘
-  /**
-   * @ignore
-   */
-  "aria-describedby": e.string,
-  /**
-   * @ignore
-   */
-  "aria-label": e.string,
-  /**
-   * @ignore
-   */
-  "aria-labelledby": e.string,
-  /**
-   * This prop helps users to fill forms faster, especially on mobile devices.
-   * The name can be confusing, as it's more like an autofill.
-   * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
-   */
-  autoComplete: e.string,
-  /**
-   * If `true`, the `input` element is focused during the first mount.
-   */
-  autoFocus: e.bool,
-  /**
-   * Class name applied to the root element.
-   */
-  className: e.string,
-  /**
-   * The default value. Use when the component is not controlled.
-   */
-  defaultValue: e.any,
-  /**
-   * If `true`, the component is disabled.
-   * The prop defaults to the value (`false`) inherited from the parent FormControl component.
-   */
-  disabled: e.bool,
-  /**
-   * Trailing adornment for this input.
-   */
-  endAdornment: e.node,
-  /**
-   * If `true`, the `input` will indicate an error by setting the `aria-invalid` attribute on the input and the `baseui--error` class on the root element.
-   * The prop defaults to the value (`false`) inherited from the parent FormControl component.
-   */
-  error: e.bool,
-  /**
-   * The id of the `input` element.
-   */
-  id: e.string,
-  /**
-   * @ignore
-   */
-  inputRef: e.oneOfType([e.func, e.shape({
-    current: e.object
-  })]),
-  /**
-   * Maximum number of rows to display when multiline option is set to true.
-   */
-  maxRows: e.number,
-  /**
-   * Minimum number of rows to display when multiline option is set to true.
-   */
-  minRows: e.number,
-  /**
-   * If `true`, a `textarea` element is rendered.
-   * @default false
-   */
-  multiline: e.bool,
-  /**
-   * Name attribute of the `input` element.
-   */
-  name: e.string,
-  /**
-   * @ignore
-   */
-  onBlur: e.func,
-  /**
-   * @ignore
-   */
-  onChange: e.func,
-  /**
-   * @ignore
-   */
-  onClick: e.func,
-  /**
-   * @ignore
-   */
-  onFocus: e.func,
-  /**
-   * @ignore
-   */
-  onKeyDown: e.func,
-  /**
-   * @ignore
-   */
-  onKeyUp: e.func,
-  /**
-   * The short hint displayed in the `input` before the user enters a value.
-   */
-  placeholder: e.string,
-  /**
-   * It prevents the user from changing the value of the field
-   * (not from interacting with the field).
-   */
-  readOnly: e.bool,
-  /**
-   * If `true`, the `input` element is required.
-   * The prop defaults to the value (`false`) inherited from the parent FormControl component.
-   */
-  required: e.bool,
-  /**
-   * Number of rows to display when multiline option is set to true.
-   */
-  rows: e.number,
-  /**
-   * The props used for each slot inside the Input.
-   * @default {}
-   */
-  slotProps: e.shape({
-    input: e.oneOfType([e.func, e.object]),
-    root: e.oneOfType([e.func, e.object])
-  }),
-  /**
-   * The components used for each slot inside the InputBase.
-   * Either a string to use a HTML element or a component.
-   * @default {}
-   */
-  slots: e.shape({
-    input: e.elementType,
-    root: e.elementType,
-    textarea: e.elementType
-  }),
-  /**
-   * Leading adornment for this input.
-   */
-  startAdornment: e.node,
-  /**
-   * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).
-   * @default 'text'
-   */
-  type: e.oneOf(["button", "checkbox", "color", "date", "datetime-local", "email", "file", "hidden", "image", "month", "number", "password", "radio", "range", "reset", "search", "submit", "tel", "text", "time", "url", "week"]),
-  /**
-   * The value of the `input` element, required for a controlled component.
-   */
-  value: e.any
-});
-const Ie = "_input_3n32h_57", Oe = "_input__label_3n32h_84", p = {
-  "u-typography-h1": "_u-typography-h1_3n32h_1",
-  "u-typography-h2": "_u-typography-h2_3n32h_8",
-  "u-typography-h3": "_u-typography-h3_3n32h_15",
-  "u-typography-h4": "_u-typography-h4_3n32h_22",
-  "u-typography-h5": "_u-typography-h5_3n32h_29",
-  "u-typography-h6": "_u-typography-h6_3n32h_36",
-  "u-typography-base": "_u-typography-base_3n32h_43",
-  "u-typography-base--xxl": "_u-typography-base--xxl_3n32h_49",
-  "u-typography-base--xl": "_u-typography-base--xl_3n32h_53",
-  "u-typography-base--lg": "_u-typography-base--lg_3n32h_57",
-  "input__input-el": "_input__input-el_3n32h_57",
-  "u-typography-base--sm": "_u-typography-base--sm_3n32h_61",
-  "u-typography-base--bold": "_u-typography-base--bold_3n32h_65",
-  "u-typography-base--strikethrough": "_u-typography-base--strikethrough_3n32h_68",
-  "u-typography-base--underlined": "_u-typography-base--underlined_3n32h_71",
-  "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_3n32h_74",
-  input: Ie,
-  "input__messages-wrapper": "_input__messages-wrapper_3n32h_81",
-  input__label: Oe,
-  "input__input-el-wrapper": "_input__input-el-wrapper_3n32h_89",
-  "input__left-icon": "_input__left-icon_3n32h_108",
-  "input__right-icon": "_input__right-icon_3n32h_108",
-  "input__info-message": "_input__info-message_3n32h_134",
-  "input__error-message": "_input__error-message_3n32h_134",
-  "input__chars-counter": "_input__chars-counter_3n32h_145",
-  "input--disabled": "_input--disabled_3n32h_150",
-  "input--focused": "_input--focused_3n32h_156",
-  "input--error": "_input--error_3n32h_159"
-}, je = de(
-  ({
-    label: l,
-    infoMessage: i,
-    error: d,
-    errorMessage: u,
-    leftIcon: c,
-    rightIcon: m,
-    id: N,
-    disabled: P,
-    type: v = "text",
-    maxLength: R,
-    decimalLength: t = 10,
-    hideCharsCounter: E = !1,
-    onChange: _,
-    classNameWrapper: g,
-    classNameLabel: b,
-    classNameInput: y,
-    classNameInfoMessage: k,
-    classNameErrorMessage: h,
-    classNameCharsCounter: S,
-    "data-testid-wrapper": A,
-    "data-testid-label": D,
-    "data-testid-input": C,
-    "data-testid-infoMessage": B,
-    "data-testid-errorMessage": F,
-    "data-testid-charsCounter": I,
-    ...s
-  }, M) => {
-    const [H, q] = ce(0), L = _e(), U = N || `input_${L}`;
-    Object.assign(s, { "data-testid": C });
-    const n = R && !E, r = (a) => {
-      var w, $;
-      if (v === "number") {
-        let O = String(a.target.value);
-        const [Y, V] = O.split(".");
-        O !== "" && (V != null && V.length ? O = [Number(Y), V.slice(0, t)].join(".") : O = String(Number(Y))), a.target.value = O;
+  return /* @__PURE__ */ n("div", { className: a(t.input, b), "data-testid": E, children: [
+    s && /* @__PURE__ */ r(
+      c,
+      {
+        element: "label",
+        elementProps: { htmlFor: h },
+        className: a(t.input__label, v),
+        "data-testid": A,
+        children: s
+      }
+    ),
+    /* @__PURE__ */ r(
+      q,
+      {
+        id: h,
+        type: N,
+        disabled: C,
+        error: !!i,
+        "aria-label": s,
+        slotProps: {
+          root: (e) => ({
+            className: a(t["input__input-el-wrapper"], {
+              [t["input--disabled"]]: e.disabled,
+              [t["input--focused"]]: e.focused,
+              [t["input--error"]]: e.error
+            })
+          }),
+          input: {
+            className: a(t["input__input-el"], y),
+            maxLength: l,
+            onChange: T,
+            ...u
+          }
+        },
+        startAdornment: o && /* @__PURE__ */ r("span", { className: t["input__left-icon"], children: o }),
+        endAdornment: p && /* @__PURE__ */ r("span", { className: t["input__right-icon"], children: p })
       }
-      n && q(($ = (w = a == null ? void 0 : a.target) == null ? void 0 : w.value) == null ? void 0 : $.length), _ && _(a);
-    }, o = he(() => s.multiline !== !0 ? {
-      type: v,
-      multiline: s.multiline
-    } : {
-      type: void 0,
-      multiline: s.multiline,
-      rows: (s == null ? void 0 : s.rows) || 5,
-      minRows: s == null ? void 0 : s.minRows,
-      maxRows: s == null ? void 0 : s.maxRows
-    }, [s]);
-    return /* @__PURE__ */ K("div", { className: T(p.input, g), "data-testid": A, children: [
-      l && /* @__PURE__ */ j(
-        G,
+    ),
+    /* @__PURE__ */ n("div", { className: t["input__messages-wrapper"], children: [
+      (i || d) && /* @__PURE__ */ n(
+        c,
         {
-          element: "label",
-          elementProps: { htmlFor: U },
-          className: T(p.input__label, b),
-          "data-testid": D,
-          children: l
+          className: i ? a(t["input__error-message"], j) : a(t["input__info-message"], I),
+          "data-testid": i ? $ : S,
+          children: [
+            /* @__PURE__ */ r(D, {}),
+            i || d
+          ]
         }
       ),
-      /* @__PURE__ */ j(
-        oe,
+      l && !x && /* @__PURE__ */ n(
+        c,
         {
-          id: U,
-          disabled: P,
-          error: typeof d == "boolean" ? d : !!u,
-          "aria-label": l,
-          slotProps: {
-            root: (a) => ({
-              className: T(p["input__input-el-wrapper"], {
-                [p["input--disabled"]]: a.disabled,
-                [p["input--focused"]]: a.focused,
-                [p["input--error"]]: a.error
-              })
-            }),
-            input: {
-              ref: M,
-              className: T(p["input__input-el"], y),
-              maxLength: R,
-              onChange: r,
-              ...s
-            }
-          },
-          startAdornment: c && /* @__PURE__ */ j("span", { className: p["input__left-icon"], children: c }),
-          endAdornment: m && /* @__PURE__ */ j("span", { className: p["input__right-icon"], children: m }),
-          ...o
+          className: a(t["input__chars-counter"], z),
+          "data-testid": B,
+          children: [
+            F,
+            " / ",
+            l
+          ]
         }
-      ),
-      /* @__PURE__ */ K("div", { className: p["input__messages-wrapper"], children: [
-        (u || i) && /* @__PURE__ */ K(
-          G,
-          {
-            className: u ? T(p["input__error-message"], h) : T(p["input__info-message"], k),
-            "data-testid": u ? F : B,
-            children: [
-              /* @__PURE__ */ j(me, { icon: u ? "circle-exclamation" : "circle-info" }),
-              u || i
-            ]
-          }
-        ),
-        n && /* @__PURE__ */ K(
-          G,
-          {
-            className: T(p["input__chars-counter"], S),
-            "data-testid": I,
-            children: [
-              H,
-              " / ",
-              R
-            ]
-          }
-        )
-      ] })
-    ] });
-  }
-);
+      )
+    ] })
+  ] });
+};
 export {
-  je as Input
+  M as Input
 };

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

@@ -2,7 +2,27 @@ import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;
-    component: import('react').ForwardRefExoticComponent<import('./Input').InputProps & import('react').RefAttributes<HTMLInputElement>>;
+    component: ({ label, infoMessage, errorMessage, leftIcon, rightIcon, id, disabled, type, maxLength, hideCharsCounter, onChange, classNameWrapper, classNameLabel, classNameInput, classNameInfoMessage, classNameErrorMessage, classNameCharsCounter, "data-testid-wrapper": testIdWrapper, "data-testid-label": testIdLabel, "data-testid-input": testIdInput, "data-testid-infoMessage": testIdInfoMessage, "data-testid-errorMessage": testIdErrorMessage, "data-testid-charsCounter": testIdCharsCounter, ...rest }: import('react').InputHTMLAttributes<HTMLInputElement> & {
+        label?: string | undefined;
+        infoMessage?: string | undefined;
+        errorMessage?: string | undefined;
+        leftIcon?: import('react').ReactNode;
+        rightIcon?: import('react').ReactNode;
+        type?: "search" | "text" | "password" | undefined;
+        hideCharsCounter?: boolean | undefined;
+        classNameWrapper?: string | undefined;
+        classNameLabel?: string | undefined;
+        classNameInput?: string | undefined;
+        classNameInfoMessage?: string | undefined;
+        classNameErrorMessage?: string | undefined;
+        classNameCharsCounter?: string | undefined;
+        'data-testid-wrapper'?: string | undefined;
+        'data-testid-label'?: string | undefined;
+        'data-testid-input'?: string | undefined;
+        'data-testid-infoMessage'?: string | undefined;
+        'data-testid-errorMessage'?: string | undefined;
+        'data-testid-charsCounter'?: string | undefined;
+    }) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {
         layout: string;
@@ -21,4 +41,3 @@ export declare const WithRightIconAndClickEvent: Story;
 export declare const WithBothIcons: Story;
 export declare const WithInfoMessage: Story;
 export declare const WithErrorMessage: Story;
-export declare const Textarea: Story;