@pismo/marola 0.0.1-alpha.5 → 0.0.1-alpha.7

package/dist/components/IconButton/IconButton.js

@@ -1,78 +1,67 @@
 import '../../assets/IconButton.css';
-import { jsx as n, jsxs as q } from "react/jsx-runtime";
-import { forwardRef as h, useMemo as k } from "react";
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import { forwardRef as q, useMemo as a } from "react";
+import { c } from "../../clsx-DB4S2d7J.js";
 import { LoadingSpinner as m } from "../LoadingSpinner/LoadingSpinner.js";
-import { c as v } from "../../clsx-DB4S2d7J.js";
-import { B as y } from "../../Button-D--uN90N.js";
-const f = "_h1_1v5kq_1", p = "_h2_1v5kq_11", g = "_h3_1v5kq_21", w = "_h4_1v5kq_31", x = "_body_1v5kq_41", N = "_quote_1v5kq_75", B = "_form__input_1v5kq_86", j = "_form__hint_1v5kq_91", C = "_form__label_1v5kq_96", I = "_form__dropdown_1v5kq_101", L = "_table__header_1v5kq_107", M = "_table__body_1v5kq_112", R = "_button_1v5kq_123", o = {
-  h1: f,
-  "h1--bold": "_h1--bold_1v5kq_7",
+import { B as g } from "../../Button-B1umG8kJ.js";
+const k = "_h1_8qiyf_1", p = "_h2_8qiyf_11", w = "_h3_8qiyf_21", x = "_h4_8qiyf_31", N = "_body_8qiyf_41", v = "_quote_8qiyf_75", B = "_form__input_8qiyf_98", j = "_form__hint_8qiyf_103", C = "_form__label_8qiyf_108", I = "_form__dropdown_8qiyf_113", L = "_table__header_8qiyf_131", M = "_table__body_8qiyf_136", R = "_button_8qiyf_159", o = {
+  h1: k,
+  "h1--bold": "_h1--bold_8qiyf_7",
   h2: p,
-  "h2--bold": "_h2--bold_1v5kq_17",
-  h3: g,
-  "h3--bold": "_h3--bold_1v5kq_27",
-  h4: w,
-  "h4--bold": "_h4--bold_1v5kq_37",
-  body: x,
-  "body--large": "_body--large_1v5kq_46",
-  "body--medium": "_body--medium_1v5kq_50",
-  "body--small": "_body--small_1v5kq_54",
-  "body--tiny": "_body--tiny_1v5kq_58",
-  "body--bold": "_body--bold_1v5kq_62",
-  "body--strikethrough": "_body--strikethrough_1v5kq_65",
-  "body--underlined": "_body--underlined_1v5kq_68",
-  "body--strikethrough-underlined": "_body--strikethrough-underlined_1v5kq_71",
-  quote: N,
-  "quote--large": "_quote--large_1v5kq_80",
+  "h2--bold": "_h2--bold_8qiyf_17",
+  h3: w,
+  "h3--bold": "_h3--bold_8qiyf_27",
+  h4: x,
+  "h4--bold": "_h4--bold_8qiyf_37",
+  body: N,
+  "body--large": "_body--large_8qiyf_46",
+  "body--medium": "_body--medium_8qiyf_50",
+  "body--small": "_body--small_8qiyf_54",
+  "body--tiny": "_body--tiny_8qiyf_58",
+  "body--bold": "_body--bold_8qiyf_62",
+  "body--strikethrough": "_body--strikethrough_8qiyf_65",
+  "body--underlined": "_body--underlined_8qiyf_68",
+  "body--strikethrough-underlined": "_body--strikethrough-underlined_8qiyf_71",
+  quote: v,
+  "quote--large": "_quote--large_8qiyf_80",
+  "quote--bold": "_quote--bold_8qiyf_85",
+  "quote--strikethrough": "_quote--strikethrough_8qiyf_88",
+  "quote--underlined": "_quote--underlined_8qiyf_91",
+  "quote--strikethrough-underlined": "_quote--strikethrough-underlined_8qiyf_94",
   form__input: B,
   form__hint: j,
   form__label: C,
   form__dropdown: I,
+  "form--bold": "_form--bold_8qiyf_118",
+  "form--strikethrough": "_form--strikethrough_8qiyf_121",
+  "form--underlined": "_form--underlined_8qiyf_124",
+  "form--strikethrough-underlined": "_form--strikethrough-underlined_8qiyf_127",
   table__header: L,
   table__body: M,
-  "table__body--secondary": "_table__body--secondary_1v5kq_117",
+  "table__body--secondary": "_table__body--secondary_8qiyf_141",
+  "table--bold": "_table--bold_8qiyf_146",
+  "table--strikethrough": "_table--strikethrough_8qiyf_149",
+  "table--underlined": "_table--underlined_8qiyf_152",
+  "table--strikethrough-underlined": "_table--strikethrough-underlined_8qiyf_155",
   button: R,
-  "icon-button": "_icon-button_1v5kq_130",
-  "icon-button--primary": "_icon-button--primary_1v5kq_142",
-  "icon-button--square": "_icon-button--square_1v5kq_164",
-  "icon-button__container": "_icon-button__container_1v5kq_180"
-}, E = h(
-  (r, e) => {
-    const {
-      onClick: d,
-      icon: b,
-      link: i,
-      loading: l,
-      children: a,
-      type: s = "button",
-      disabled: c,
-      className: t,
-      variant: _ = "primary"
-    } = r, u = k(
-      () => v([
-        o["icon-button"],
-        o[`icon-button--${_}`],
-        t
-      ]),
-      [t, _]
-    );
-    return /* @__PURE__ */ n(
-      y,
-      {
-        type: s,
-        href: i,
-        onClick: d,
-        disabled: c,
-        className: u,
-        ref: e,
-        children: /* @__PURE__ */ q("div", { className: o["icon-button__container"], children: [
-          l ? /* @__PURE__ */ n(m, { invert: !0 }) : b,
-          _ !== "square" && a
-        ] })
-      }
-    );
-  }
-);
+  "button--bold": "_button--bold_8qiyf_165",
+  "button--strikethrough": "_button--strikethrough_8qiyf_168",
+  "button--underlined": "_button--underlined_8qiyf_171",
+  "button--strikethrough-underlined": "_button--strikethrough-underlined_8qiyf_174",
+  "icon-button": "_icon-button_8qiyf_178",
+  "icon-button--primary": "_icon-button--primary_8qiyf_190",
+  "icon-button--square": "_icon-button--square_8qiyf_212",
+  "icon-button__container": "_icon-button__container_8qiyf_228"
+}, E = q((i, r) => {
+  const { onClick: n, icon: d, link: u, loading: b, children: l, type: y = "button", disabled: f, className: t, variant: _ = "primary" } = i, h = a(
+    () => c([o["icon-button"], o[`icon-button--${_}`], t]),
+    [t, _]
+  );
+  return /* @__PURE__ */ e(g, { type: y, href: u, onClick: n, disabled: f, className: h, ref: r, children: /* @__PURE__ */ s("div", { className: o["icon-button__container"], children: [
+    b ? /* @__PURE__ */ e(m, { invert: !0 }) : d,
+    _ !== "square" && l
+  ] }) });
+});
 export {
   E as IconButton,
   E as default

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

@@ -0,0 +1,44 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+
+type InputProps = InputHTMLAttributes<HTMLInputElement> & {
+    /** Label text */
+    label?: string;
+    /** Info message text */
+    infoMessage?: string;
+    /** Error message text */
+    errorMessage?: string;
+    /** Left icon element */
+    leftIcon?: ReactNode;
+    /** Right icon element */
+    rightIcon?: ReactNode;
+    /** Input type. Default: text */
+    type?: 'text' | 'password';
+    /** Hide the chars counter. Default: false */
+    hideCharsCounter?: boolean;
+    /** CSS classes to be applied on the container element */
+    classNameWrapper?: string;
+    /** CSS classes to be applied on the label element */
+    classNameLabel?: string;
+    /** CSS classes to be applied on the input element */
+    classNameInput?: string;
+    /** CSS classes to be applied on the info message element */
+    classNameInfoMessage?: string;
+    /** CSS classes to be applied on the error message element */
+    classNameErrorMessage?: string;
+    /** CSS classes to be applied on the chars counter element */
+    classNameCharsCounter?: string;
+    /** Id to be applied as `data-testid` on the container element */
+    'data-testid-wrapper'?: string;
+    /** Id to be applied as `data-testid` on the label element */
+    'data-testid-label'?: string;
+    /** Id to be applied as `data-testid` on the input element */
+    'data-testid-input'?: string;
+    /** Id to be applied as `data-testid` on the info message element */
+    'data-testid-infoMessage'?: string;
+    /** Id to be applied as `data-testid` on the error message element */
+    'data-testid-errorMessage'?: string;
+    /** Id to be applied as `data-testid` on the chars counter element */
+    'data-testid-charsCounter'?: string;
+};
+export declare const Input: ({ 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 }: InputProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Input/Input.js

@@ -0,0 +1,497 @@
+import '../../assets/Input.css';
+import { jsxs as H, jsx as B } from "react/jsx-runtime";
+import * as f from "react";
+import { useState as pe, useId as ce } from "react";
+import { c as F } from "../../clsx-DB4S2d7J.js";
+import { Typography as L } from "../Typography/Typography.js";
+import { a as _, _ as me } from "../../objectWithoutPropertiesLoose-D7Cp0Pg_.js";
+import { g as fe, a as _e, u as he, e as z, b as Q, i as be, P as e, c as ge, d as Ce } from "../../index-CqjC7P5Y.js";
+function ye(s) {
+  let l = "https://mui.com/production-error/?code=" + s;
+  for (let a = 1; a < arguments.length; a += 1)
+    l += "&args[]=" + encodeURIComponent(arguments[a]);
+  return "Minified MUI error #" + s + "; visit " + l + " for the full message.";
+}
+const X = /* @__PURE__ */ f.createContext(void 0);
+process.env.NODE_ENV !== "production" && (X.displayName = "FormControlContext");
+function we() {
+  return f.useContext(X);
+}
+const Z = "Input";
+function ve(s) {
+  return fe(Z, s);
+}
+_e(Z, ["root", "formControl", "focused", "disabled", "error", "multiline", "input", "inputMultiline", "inputTypeSearch", "adornedStart", "adornedEnd"]);
+function Ne(s = {}) {
+  const {
+    defaultValue: l,
+    disabled: a = !1,
+    error: h = !1,
+    onBlur: u,
+    onChange: b,
+    onFocus: P,
+    required: x = !1,
+    value: C,
+    inputRef: V
+  } = s, n = we();
+  let E, m, y, w, g;
+  if (n) {
+    var I, d, q;
+    if (E = void 0, m = (I = n.disabled) != null ? I : !1, y = (d = n.error) != null ? d : !1, w = (q = n.required) != null ? q : !1, g = n.value, process.env.NODE_ENV !== "production") {
+      const t = ["defaultValue", "disabled", "error", "required", "value"].filter((r) => s[r] !== void 0);
+      t.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: ${t.join(", ")}`].join(`
+`));
+    }
+  } else
+    E = l, m = a, y = h, w = x, g = C;
+  const {
+    current: U
+  } = f.useRef(g != null), M = f.useCallback((t) => {
+    process.env.NODE_ENV !== "production" && t && t.nodeName !== "INPUT" && !t.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(`
+`));
+  }, []), v = f.useRef(null), O = he(v, V, M), [N, R] = f.useState(!1);
+  f.useEffect(() => {
+    !n && m && N && (R(!1), u == null || u());
+  }, [n, m, N, u]);
+  const k = (t) => (r) => {
+    var o;
+    if (n != null && n.disabled) {
+      r.stopPropagation();
+      return;
+    }
+    if ((o = t.onFocus) == null || o.call(t, r), n && n.onFocus) {
+      var c;
+      n == null || (c = n.onFocus) == null || c.call(n);
+    } else
+      R(!0);
+  }, A = (t) => (r) => {
+    var o;
+    (o = t.onBlur) == null || o.call(t, r), n && n.onBlur ? n.onBlur() : R(!1);
+  }, T = (t) => (r, ...o) => {
+    var c, j;
+    if (!U && (r.target || v.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." : ye(17));
+    n == null || (c = n.onChange) == null || c.call(n, r), (j = t.onChange) == null || j.call(t, r, ...o);
+  }, D = (t) => (r) => {
+    var o;
+    v.current && r.currentTarget === r.target && v.current.focus(), (o = t.onClick) == null || o.call(t, r);
+  };
+  return {
+    disabled: m,
+    error: y,
+    focused: N,
+    formControlContext: n,
+    getInputProps: (t = {}) => {
+      const o = _({}, {
+        onBlur: u,
+        onChange: b,
+        onFocus: P
+      }, z(t)), c = _({}, o, {
+        onBlur: A(o),
+        onChange: T(o),
+        onFocus: k(o)
+      });
+      return _({}, c, {
+        "aria-invalid": y || void 0,
+        defaultValue: E,
+        value: g,
+        required: w,
+        disabled: m
+      }, t, {
+        ref: O
+      }, c);
+    },
+    getRootProps: (t = {}) => {
+      const r = z(s, ["onBlur", "onChange", "onFocus"]), o = _({}, r, z(t));
+      return _({}, t, o, {
+        onClick: D(o)
+      });
+    },
+    inputRef: O,
+    required: w,
+    value: g
+  };
+}
+const Pe = ["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"], xe = (s) => {
+  const {
+    disabled: l,
+    error: a,
+    focused: h,
+    formControlContext: u,
+    multiline: b,
+    startAdornment: P,
+    endAdornment: x
+  } = s;
+  return ge({
+    root: ["root", l && "disabled", a && "error", h && "focused", !!u && "formControl", b && "multiline", !!P && "adornedStart", !!x && "adornedEnd"],
+    input: ["input", l && "disabled", b && "multiline"]
+  }, Ce(ve));
+}, ee = /* @__PURE__ */ f.forwardRef(function(l, a) {
+  var h, u, b;
+  const {
+    "aria-describedby": P,
+    "aria-label": x,
+    "aria-labelledby": C,
+    autoComplete: V,
+    autoFocus: n,
+    className: E,
+    defaultValue: m,
+    disabled: y,
+    endAdornment: w,
+    error: g,
+    id: I,
+    multiline: d = !1,
+    name: q,
+    onClick: U,
+    onChange: M,
+    onKeyDown: v,
+    onKeyUp: O,
+    onFocus: N,
+    onBlur: R,
+    placeholder: k,
+    readOnly: A,
+    required: T,
+    startAdornment: D,
+    value: p,
+    type: S,
+    rows: t,
+    slotProps: r = {},
+    slots: o = {},
+    minRows: c,
+    maxRows: j
+  } = l, Y = me(l, Pe), {
+    getRootProps: te,
+    getInputProps: ne,
+    focused: oe,
+    formControlContext: re,
+    error: se,
+    disabled: ae
+  } = Ne({
+    disabled: y,
+    defaultValue: m,
+    error: g,
+    onBlur: R,
+    onClick: U,
+    onChange: M,
+    onFocus: N,
+    required: T,
+    value: p
+  }), W = d ? void 0 : S ?? "text", $ = _({}, l, {
+    disabled: ae,
+    error: se,
+    focused: oe,
+    formControlContext: re,
+    multiline: d,
+    type: W
+  }), G = xe($), le = {
+    "aria-describedby": P,
+    "aria-label": x,
+    "aria-labelledby": C,
+    autoComplete: V,
+    autoFocus: n,
+    id: I,
+    onKeyDown: v,
+    onKeyUp: O,
+    name: q,
+    placeholder: k,
+    readOnly: A,
+    type: W
+  }, J = (h = o.root) != null ? h : "div", ie = Q({
+    elementType: J,
+    getSlotProps: te,
+    externalSlotProps: r.root,
+    externalForwardedProps: Y,
+    additionalProps: {
+      ref: a
+    },
+    ownerState: $,
+    className: [G.root, E]
+  }), K = d ? (u = o.textarea) != null ? u : "textarea" : (b = o.input) != null ? b : "input", ue = Q({
+    elementType: K,
+    getSlotProps: (de) => ne(_({}, le, de)),
+    externalSlotProps: r.input,
+    additionalProps: _({
+      rows: d ? t : void 0
+    }, d && !be(K) && {
+      minRows: t || c,
+      maxRows: t || j
+    }),
+    ownerState: $,
+    className: G.input
+  });
+  return process.env.NODE_ENV !== "production" && d && t && (c || j) && console.warn("MUI: You can not use the `minRows` or `maxRows` props when the input `rows` prop is set."), /* @__PURE__ */ H(J, _({}, ie, {
+    children: [D, /* @__PURE__ */ B(K, _({}, ue)), w]
+  }));
+});
+process.env.NODE_ENV !== "production" && (ee.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 Ee = (s) => /* @__PURE__ */ f.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__ */ f.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" })), Re = "_input_hm5q2_1", Fe = "_input__label_hm5q2_4", i = {
+  input: Re,
+  input__label: Fe,
+  "input__input-el-wrapper": "_input__input-el-wrapper_hm5q2_9",
+  "input__input-el": "_input__input-el_hm5q2_9",
+  "input__left-icon": "_input__left-icon_hm5q2_30",
+  "input__right-icon": "_input__right-icon_hm5q2_33",
+  "input__messages-wrapper": "_input__messages-wrapper_hm5q2_36",
+  "input__info-message": "_input__info-message_hm5q2_44",
+  "input__error-message": "_input__error-message_hm5q2_44",
+  "input__chars-counter": "_input__chars-counter_hm5q2_55",
+  "input--disabled": "_input--disabled_hm5q2_59",
+  "input--focused": "_input--focused_hm5q2_65",
+  "input--error": "_input--error_hm5q2_68"
+}, Ve = ({
+  label: s,
+  infoMessage: l,
+  errorMessage: a,
+  leftIcon: h,
+  rightIcon: u,
+  id: b,
+  disabled: P,
+  type: x = "text",
+  maxLength: C,
+  hideCharsCounter: V = !1,
+  onChange: n,
+  classNameWrapper: E,
+  classNameLabel: m,
+  classNameInput: y,
+  classNameInfoMessage: w,
+  classNameErrorMessage: g,
+  classNameCharsCounter: I,
+  "data-testid-wrapper": d,
+  "data-testid-label": q,
+  "data-testid-input": U,
+  "data-testid-infoMessage": M,
+  "data-testid-errorMessage": v,
+  "data-testid-charsCounter": O,
+  ...N
+}) => {
+  const [R, k] = pe(0), A = ce(), T = b || `input_${A}`;
+  Object.assign(N, { "data-testid": U });
+  const D = (p) => {
+    var S, t;
+    k((t = (S = p == null ? void 0 : p.target) == null ? void 0 : S.value) == null ? void 0 : t.length), n && n(p);
+  };
+  return /* @__PURE__ */ H("div", { className: F(i.input, E), "data-testid": d, children: [
+    s && /* @__PURE__ */ B(
+      L,
+      {
+        element: "label",
+        variant: "form-label",
+        elementProps: { htmlFor: T },
+        className: F(i.input__label, m),
+        "data-testid": q,
+        children: s
+      }
+    ),
+    /* @__PURE__ */ B(
+      ee,
+      {
+        id: T,
+        type: x,
+        disabled: P,
+        error: !!a,
+        "aria-label": s,
+        slotProps: {
+          root: (p) => ({
+            className: F(i["input__input-el-wrapper"], {
+              [i["input--disabled"]]: p.disabled,
+              [i["input--focused"]]: p.focused,
+              [i["input--error"]]: p.error
+            })
+          }),
+          input: {
+            className: F(i["input__input-el"], y),
+            maxLength: C,
+            onChange: D,
+            ...N
+          }
+        },
+        startAdornment: h && /* @__PURE__ */ B("span", { className: i["input__left-icon"], children: h }),
+        endAdornment: u && /* @__PURE__ */ B("span", { className: i["input__right-icon"], children: u })
+      }
+    ),
+    /* @__PURE__ */ H("div", { className: i["input__messages-wrapper"], children: [
+      (a || l) && /* @__PURE__ */ H(
+        L,
+        {
+          variant: "form-hint",
+          className: a ? F(i["input__error-message"], g) : F(i["input__info-message"], w),
+          "data-testid": a ? v : M,
+          children: [
+            /* @__PURE__ */ B(Ee, {}),
+            a || l
+          ]
+        }
+      ),
+      C && !V && /* @__PURE__ */ H(
+        L,
+        {
+          variant: "form-hint",
+          className: F(i["input__chars-counter"], I),
+          "data-testid": O,
+          children: [
+            R,
+            " / ",
+            C
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  Ve as Input
+};