@pismo/marola 1.0.0-beta.29 → 1.0.0-beta.30

package/dist/assets/Input.css

@@ -1 +1 @@
-._u-typography-h1_1lq2e_1{font-size:var(--heading-font-size-1);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-1);margin:0}._u-typography-h2_1lq2e_8{font-size:var(--heading-font-size-2);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-2);margin:0}._u-typography-h3_1lq2e_15{font-size:var(--heading-font-size-3);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-3);margin:0}._u-typography-h4_1lq2e_22{font-size:var(--heading-font-size-4);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-4);margin:0}._u-typography-h5_1lq2e_29{font-size:var(--heading-font-size-5);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-5);margin:0}._u-typography-h6_1lq2e_36{font-size:var(--heading-font-size-6);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-6);margin:0}._u-typography-base_1lq2e_43{margin:0;font-size:var(--base-font-size);font-weight:var(--base-weight);line-height:var(--base-line-height)}._u-typography-base--xxl_1lq2e_49{font-size:var(--base-font-size-xxl);line-height:var(--base-line-height-xxl)}._u-typography-base--xl_1lq2e_53{font-size:var(--base-font-size-xl);line-height:var(--base-line-height-xl)}._u-typography-base--lg_1lq2e_57,._input__input-el_1lq2e_57{font-size:var(--base-font-size-lg);line-height:var(--base-line-height-lg)}._u-typography-base--sm_1lq2e_61{font-size:var(--base-font-size-sm);line-height:var(--base-line-height-sm)}._u-typography-base--bold_1lq2e_65,._input__input-el_1lq2e_57{font-weight:var(--base-bold)}._u-typography-base--strikethrough_1lq2e_68{text-decoration:line-through}._u-typography-base--underlined_1lq2e_71{text-decoration:underline}._u-typography-base--strikethrough-underlined_1lq2e_74{text-decoration:underline line-through}._input__label_1lq2e_78{display:block;margin-bottom:.3125rem;color:var(--gray-75)}._input__input-el-wrapper_1lq2e_83{display:flex;align-items:center;border:solid .0625rem var(--gray-25);border-radius:.375rem;transition:all .3s}._input__input-el_1lq2e_57{all:unset;width:100%;height:2.5rem;padding:0 1rem;color:var(--gray-90);outline:none}._input__input-el_1lq2e_57::placeholder{color:var(--gray-50)}._input__left-icon_1lq2e_101,._input__right-icon_1lq2e_101{display:flex;align-items:center;justify-content:center;height:1rem}._input__left-icon_1lq2e_101{padding-left:1rem}._input__right-icon_1lq2e_101{padding-right:1rem}._input__messages-wrapper_1lq2e_113{display:flex;align-items:center;justify-content:space-between}._input__messages-wrapper_1lq2e_113:not(:empty){margin-top:.3125rem}._input__info-message_1lq2e_121,._input__error-message_1lq2e_121{display:flex;gap:.375rem;align-items:center}._input__info-message_1lq2e_121{color:var(--gray-75)}._input__error-message_1lq2e_121{color:var(--alert)}._input__chars-counter_1lq2e_132{margin-left:auto;color:var(--gray-75)}._input--disabled_1lq2e_136 ._input__input-el_1lq2e_57{color:var(--gray-50)}._input_1lq2e_57:has(._input--disabled_1lq2e_136) ._input__label_1lq2e_78{color:var(--gray-25)}._input--focused_1lq2e_142._input__input-el-wrapper_1lq2e_83{border-color:var(--accent)}._input--error_1lq2e_145._input__input-el-wrapper_1lq2e_83{border-color:var(--alert)}._input__input-el-wrapper_1lq2e_83:hover:not(._input--disabled_1lq2e_136,._input--focused_1lq2e_142,._input--error_1lq2e_145){border-color:var(--gray-75)}
+._u-typography-h1_1r054_1{font-size:var(--heading-font-size-1);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-1);margin:0}._u-typography-h2_1r054_8{font-size:var(--heading-font-size-2);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-2);margin:0}._u-typography-h3_1r054_15{font-size:var(--heading-font-size-3);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-3);margin:0}._u-typography-h4_1r054_22{font-size:var(--heading-font-size-4);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-4);margin:0}._u-typography-h5_1r054_29{font-size:var(--heading-font-size-5);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-5);margin:0}._u-typography-h6_1r054_36{font-size:var(--heading-font-size-6);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-6);margin:0}._u-typography-base_1r054_43{margin:0;font-size:var(--base-font-size);font-weight:var(--base-weight);line-height:var(--base-line-height)}._u-typography-base--xxl_1r054_49{font-size:var(--base-font-size-xxl);line-height:var(--base-line-height-xxl)}._u-typography-base--xl_1r054_53{font-size:var(--base-font-size-xl);line-height:var(--base-line-height-xl)}._u-typography-base--lg_1r054_57,._input__input-el_1r054_57{font-size:var(--base-font-size-lg);line-height:var(--base-line-height-lg)}._u-typography-base--sm_1r054_61{font-size:var(--base-font-size-sm);line-height:var(--base-line-height-sm)}._u-typography-base--bold_1r054_65,._input__input-el_1r054_57{font-weight:var(--base-bold)}._u-typography-base--strikethrough_1r054_68{text-decoration:line-through}._u-typography-base--underlined_1r054_71{text-decoration:underline}._u-typography-base--strikethrough-underlined_1r054_74{text-decoration:underline line-through}._input__label_1r054_78{display:block;margin-bottom:.3125rem;color:var(--gray-75)}._input__input-el-wrapper_1r054_83{display:flex;align-items:center;border:solid .0625rem var(--gray-25);border-radius:.375rem;transition:all .3s}._input__input-el_1r054_57{all:unset;width:100%;height:2.5rem;padding:0 1rem;color:var(--gray-90);outline:none}._input__input-el_1r054_57::placeholder{color:var(--gray-50)}._input__left-icon_1r054_101,._input__right-icon_1r054_101{display:flex;align-items:center;justify-content:center;height:1rem}._input__left-icon_1r054_101{padding-left:1rem}._input__right-icon_1r054_101{padding-right:1rem}._input__messages-wrapper_1r054_113{display:flex;align-items:center;justify-content:space-between}._input__messages-wrapper_1r054_113:not(:empty){margin-top:.3125rem}._input__info-message_1r054_121,._input__error-message_1r054_121{display:flex;gap:.375rem;align-items:center}._input__info-message_1r054_121{color:var(--gray-75)}._input__error-message_1r054_121{color:var(--alert)}._input__chars-counter_1r054_132{margin-left:auto;color:var(--gray-75)}._input--disabled_1r054_136 ._input__input-el_1r054_57{color:var(--gray-50)}._input_1r054_57:has(._input--disabled_1r054_136) ._input__label_1r054_78{color:var(--gray-25)}._input--focused_1r054_142._input__input-el-wrapper_1r054_83{border-color:var(--accent)}._input--error_1r054_145._input__input-el-wrapper_1r054_83{border-color:var(--alert)}._input__input-el-wrapper_1r054_83:hover:not(._input--disabled_1r054_136,._input--focused_1r054_142,._input--error_1r054_145){border-color:var(--gray-75)}textarea._input__input-el_1r054_57{resize:vertical;padding:.5rem 1rem;height:auto}

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

@@ -87,13 +87,13 @@ declare const meta: {
         content?: string | undefined;
         dir?: string | undefined;
         hidden?: boolean | undefined;
-        id?: string | undefined;
         onChange?: import('react').FormEventHandler<HTMLDivElement> | undefined;
         accessKey?: string | undefined;
         autoFocus?: boolean | undefined;
         contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
         contextMenu?: string | undefined;
         draggable?: (boolean | "true" | "false") | undefined;
+        id?: string | undefined;
         lang?: string | undefined;
         nonce?: string | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;

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

@@ -2,7 +2,7 @@ import { HTMLInputTypeAttribute, InputHTMLAttributes, ReactNode } from 'react';
 
 type ExcludedInputTypes = 'checkbox' | 'radio' | 'submit';
 type CustomInputTypeAttribute = Exclude<HTMLInputTypeAttribute, ExcludedInputTypes>;
-export type InputProps = InputHTMLAttributes<HTMLInputElement> & {
+export type SingleInputProps = InputHTMLAttributes<HTMLInputElement> & {
     /** Label text */
     label?: string;
     /** Info message text */
@@ -11,6 +11,8 @@ export type InputProps = InputHTMLAttributes<HTMLInputElement> & {
     error?: boolean;
     /** Error message text, if has "errorMessage", the "error" props will be "true" */
     errorMessage?: string;
+    /** If "true", a "textarea" element is rendered. */
+    multiline?: false;
     /** Left icon element */
     leftIcon?: ReactNode;
     /** Right icon element */
@@ -44,46 +46,18 @@ export type InputProps = InputHTMLAttributes<HTMLInputElement> & {
     /** Id to be applied as `data-testid` on the chars counter element */
     'data-testid-charsCounter'?: string;
 };
-export declare const Input: import('react').ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & {
-    /** Label text */
-    label?: string | undefined;
-    /** Info message text */
-    infoMessage?: string | undefined;
-    /** Show the field layout as an error */
-    error?: boolean | undefined;
-    /** Error message text, if has "errorMessage", the "error" props will be "true" */
-    errorMessage?: string | undefined;
-    /** Left icon element */
-    leftIcon?: ReactNode;
-    /** Right icon element */
-    rightIcon?: ReactNode;
-    /** Input type. Default: text */
-    type?: CustomInputTypeAttribute | undefined;
-    /** Hide the chars counter */
-    hideCharsCounter?: boolean | undefined;
-    /** CSS classes to be applied on the container element */
-    classNameWrapper?: string | undefined;
-    /** CSS classes to be applied on the label element */
-    classNameLabel?: string | undefined;
-    /** CSS classes to be applied on the input element */
-    classNameInput?: string | undefined;
-    /** CSS classes to be applied on the info message element */
-    classNameInfoMessage?: string | undefined;
-    /** CSS classes to be applied on the error message element */
-    classNameErrorMessage?: string | undefined;
-    /** CSS classes to be applied on the chars counter element */
-    classNameCharsCounter?: string | undefined;
-    /** Id to be applied as `data-testid` on the container element */
-    'data-testid-wrapper'?: string | undefined;
-    /** Id to be applied as `data-testid` on the label element */
-    'data-testid-label'?: string | undefined;
-    /** Id to be applied as `data-testid` on the input element */
-    'data-testid-input'?: string | undefined;
-    /** Id to be applied as `data-testid` on the info message element */
-    'data-testid-infoMessage'?: string | undefined;
-    /** Id to be applied as `data-testid` on the error message element */
-    'data-testid-errorMessage'?: string | undefined;
-    /** Id to be applied as `data-testid` on the chars counter element */
-    'data-testid-charsCounter'?: string | undefined;
-} & import('react').RefAttributes<HTMLInputElement>>;
+type MultilineInputProps = Omit<SingleInputProps, 'multiline'> & {
+    /** If "true", a "textarea" element is rendered. */
+    multiline: true;
+    /** Minimum number of rows to display when multiline option is set to true. */
+    minRows?: number;
+    /** Maximum number of rows to display when multiline option is set to true. */
+    maxRows?: number;
+    /** Number of rows to display when multiline option is set to true.
+     * The prop defaults to the value (5)
+     */
+    rows?: number;
+};
+export type InputProps = SingleInputProps | MultilineInputProps;
+export declare const Input: import('react').ForwardRefExoticComponent<InputProps & import('react').RefAttributes<HTMLInputElement>>;
 export {};

package/dist/components/Input/Input.js

@@ -1,225 +1,225 @@
 import '../../assets/Input.css';
-import { jsxs as H, jsx as T } from "react/jsx-runtime";
+import { jsxs as q, jsx as S } from "react/jsx-runtime";
 import * as f from "react";
-import { forwardRef as de, useState as ce, useId as _e } from "react";
+import { forwardRef as de, useState as ce, useId as _e, useMemo as me } from "react";
 import { c as E } from "../../clsx-DB4S2d7J.js";
 import { Typography as L } from "../Typography/Typography.js";
-import { g as he, a as fe, u as me, f as z, b as m, _ as ye, c as Q, i as ge, P as e, d as be, e as Ce } from "../../useSlotProps-C_I1kEHr.js";
-function we(a) {
-  let s = "https://mui.com/production-error/?code=" + a;
-  for (let u = 1; u < arguments.length; u += 1)
-    s += "&args[]=" + encodeURIComponent(arguments[u]);
-  return "Minified MUI error #" + a + "; visit " + s + " for the full message.";
+import { g as he, a as fe, u as ye, f as z, b as y, _ as ge, c as Q, i as be, P as e, d as we, e as Ce } from "../../useSlotProps-C_I1kEHr.js";
+function xe(s) {
+  let l = "https://mui.com/production-error/?code=" + s;
+  for (let p = 1; p < arguments.length; p += 1)
+    l += "&args[]=" + encodeURIComponent(arguments[p]);
+  return "Minified MUI error #" + s + "; visit " + l + " for the full message.";
 }
 const X = "Input";
-function ve(a) {
-  return he(X, a);
+function ve(s) {
+  return he(X, s);
 }
 fe(X, ["root", "formControl", "focused", "disabled", "error", "multiline", "input", "inputMultiline", "inputTypeSearch", "adornedStart", "adornedEnd"]);
 const Z = /* @__PURE__ */ f.createContext(void 0);
 process.env.NODE_ENV !== "production" && (Z.displayName = "FormControlContext");
-function xe() {
+function Pe() {
   return f.useContext(Z);
 }
-function qe(a = {}) {
+function Ne(s = {}) {
   const {
-    defaultValue: s,
-    disabled: u = !1,
-    error: i = !1,
-    onBlur: p,
-    onChange: _,
-    onFocus: x,
-    required: q = !1,
-    value: R,
+    defaultValue: l,
+    disabled: p = !1,
+    error: d = !1,
+    onBlur: c,
+    onChange: m,
+    onFocus: v,
+    required: P = !1,
+    value: F,
     inputRef: N
-  } = a, o = xe();
-  let g, h, b, C, y;
-  if (o) {
-    var F, d, I;
-    if (g = void 0, h = (F = o.disabled) != null ? F : !1, b = (d = o.error) != null ? d : !1, C = (I = o.required) != null ? I : !1, y = o.value, process.env.NODE_ENV !== "production") {
-      const t = ["defaultValue", "disabled", "error", "required", "value"].filter((r) => a[r] !== void 0);
+  } = s, n = Pe();
+  let b, h, w, C, g;
+  if (n) {
+    var I, _, O;
+    if (b = void 0, h = (I = n.disabled) != null ? I : !1, w = (_ = n.error) != null ? _ : !1, C = (O = n.required) != null ? O : !1, g = n.value, process.env.NODE_ENV !== "production") {
+      const t = ["defaultValue", "disabled", "error", "required", "value"].filter((o) => s[o] !== 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
-    g = s, h = u, b = i, C = q, y = R;
+    b = l, h = p, w = d, C = P, g = F;
   const {
-    current: S
-  } = f.useRef(y != null), k = f.useCallback((t) => {
+    current: k
+  } = f.useRef(g != null), B = 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(`
 `));
-  }, []), w = f.useRef(null), O = me(w, N, k), [P, v] = f.useState(!1);
+  }, []), x = f.useRef(null), T = ye(x, N, B), [R, a] = f.useState(!1);
   f.useEffect(() => {
-    !o && h && P && (v(!1), p == null || p());
-  }, [o, h, P, p]);
-  const B = (t) => (r) => {
-    var n;
-    if (o != null && o.disabled) {
-      r.stopPropagation();
+    !n && h && R && (a(!1), c == null || c());
+  }, [n, h, R, c]);
+  const V = (t) => (o) => {
+    var r;
+    if (n != null && n.disabled) {
+      o.stopPropagation();
       return;
     }
-    if ((n = t.onFocus) == null || n.call(t, r), o && o.onFocus) {
-      var c;
-      o == null || (c = o.onFocus) == null || c.call(o);
+    if ((r = t.onFocus) == null || r.call(t, o), n && n.onFocus) {
+      var i;
+      n == null || (i = n.onFocus) == null || i.call(n);
     } else
-      v(!0);
-  }, V = (t) => (r) => {
-    var n;
-    (n = t.onBlur) == null || n.call(t, r), o && o.onBlur ? o.onBlur() : v(!1);
-  }, U = (t) => (r, ...n) => {
-    var c, j;
-    if (!S && (r.target || w.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." : we(17));
-    o == null || (c = o.onChange) == null || c.call(o, r), (j = t.onChange) == null || j.call(t, r, ...n);
-  }, M = (t) => (r) => {
-    var n;
-    w.current && r.currentTarget === r.target && w.current.focus(), (n = t.onClick) == null || n.call(t, r);
+      a(!0);
+  }, M = (t) => (o) => {
+    var r;
+    (r = t.onBlur) == null || r.call(t, o), n && n.onBlur ? n.onBlur() : a(!1);
+  }, U = (t) => (o, ...r) => {
+    var i, H;
+    if (!k && (o.target || x.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." : xe(17));
+    n == null || (i = n.onChange) == null || i.call(n, o), (H = t.onChange) == null || H.call(t, o, ...r);
+  }, A = (t) => (o) => {
+    var r;
+    x.current && o.currentTarget === o.target && x.current.focus(), (r = t.onClick) == null || r.call(t, o);
   };
   return {
     disabled: h,
-    error: b,
-    focused: P,
-    formControlContext: o,
+    error: w,
+    focused: R,
+    formControlContext: n,
     getInputProps: (t = {}) => {
-      const n = m({}, {
-        onBlur: p,
-        onChange: _,
-        onFocus: x
-      }, z(t)), c = m({}, n, {
-        onBlur: V(n),
-        onChange: U(n),
-        onFocus: B(n)
+      const r = y({}, {
+        onBlur: c,
+        onChange: m,
+        onFocus: v
+      }, z(t)), i = y({}, r, {
+        onBlur: M(r),
+        onChange: U(r),
+        onFocus: V(r)
       });
-      return m({}, c, {
-        "aria-invalid": b || void 0,
-        defaultValue: g,
-        value: y,
+      return y({}, i, {
+        "aria-invalid": w || void 0,
+        defaultValue: b,
+        value: g,
         required: C,
         disabled: h
       }, t, {
-        ref: O
-      }, c);
+        ref: T
+      }, i);
     },
     getRootProps: (t = {}) => {
-      const r = z(a, ["onBlur", "onChange", "onFocus"]), n = m({}, r, z(t));
-      return m({}, t, n, {
-        onClick: M(n)
+      const o = z(s, ["onBlur", "onChange", "onFocus"]), r = y({}, o, z(t));
+      return y({}, t, r, {
+        onClick: A(r)
       });
     },
-    inputRef: O,
+    inputRef: T,
     required: C,
-    value: y
+    value: g
   };
 }
-const Ne = ["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"], Pe = (a) => {
+const Re = ["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"], Ee = (s) => {
   const {
-    disabled: s,
-    error: u,
-    focused: i,
-    formControlContext: p,
-    multiline: _,
-    startAdornment: x,
-    endAdornment: q
-  } = a;
-  return be({
-    root: ["root", s && "disabled", u && "error", i && "focused", !!p && "formControl", _ && "multiline", !!x && "adornedStart", !!q && "adornedEnd"],
-    input: ["input", s && "disabled", _ && "multiline"]
+    disabled: l,
+    error: p,
+    focused: d,
+    formControlContext: c,
+    multiline: m,
+    startAdornment: v,
+    endAdornment: P
+  } = s;
+  return we({
+    root: ["root", l && "disabled", p && "error", d && "focused", !!c && "formControl", m && "multiline", !!v && "adornedStart", !!P && "adornedEnd"],
+    input: ["input", l && "disabled", m && "multiline"]
   }, Ce(ve));
-}, ee = /* @__PURE__ */ f.forwardRef(function(s, u) {
-  var i, p, _;
+}, ee = /* @__PURE__ */ f.forwardRef(function(l, p) {
+  var d, c, m;
   const {
-    "aria-describedby": x,
-    "aria-label": q,
-    "aria-labelledby": R,
+    "aria-describedby": v,
+    "aria-label": P,
+    "aria-labelledby": F,
     autoComplete: N,
-    autoFocus: o,
-    className: g,
+    autoFocus: n,
+    className: b,
     defaultValue: h,
-    disabled: b,
+    disabled: w,
     endAdornment: C,
-    error: y,
-    id: F,
-    multiline: d = !1,
-    name: I,
-    onClick: S,
-    onChange: k,
-    onKeyDown: w,
-    onKeyUp: O,
-    onFocus: P,
-    onBlur: v,
-    placeholder: B,
-    readOnly: V,
+    error: g,
+    id: I,
+    multiline: _ = !1,
+    name: O,
+    onClick: k,
+    onChange: B,
+    onKeyDown: x,
+    onKeyUp: T,
+    onFocus: R,
+    onBlur: a,
+    placeholder: V,
+    readOnly: M,
     required: U,
-    startAdornment: M,
-    value: A,
-    type: D,
+    startAdornment: A,
+    value: D,
+    type: j,
     rows: t,
-    slotProps: r = {},
-    slots: n = {},
-    minRows: c,
-    maxRows: j
-  } = s, Y = ye(s, Ne), {
+    slotProps: o = {},
+    slots: r = {},
+    minRows: i,
+    maxRows: H
+  } = l, Y = ge(l, Re), {
     getRootProps: te,
     getInputProps: oe,
     focused: ne,
     formControlContext: re,
     error: ae,
     disabled: se
-  } = qe({
-    disabled: b,
+  } = Ne({
+    disabled: w,
     defaultValue: h,
-    error: y,
-    onBlur: v,
-    onClick: S,
-    onChange: k,
-    onFocus: P,
+    error: g,
+    onBlur: a,
+    onClick: k,
+    onChange: B,
+    onFocus: R,
     required: U,
-    value: A
-  }), W = d ? void 0 : D ?? "text", $ = m({}, s, {
+    value: D
+  }), W = _ ? void 0 : j ?? "text", $ = y({}, l, {
     disabled: se,
     error: ae,
     focused: ne,
     formControlContext: re,
-    multiline: d,
+    multiline: _,
     type: W
-  }), G = Pe($), le = {
-    "aria-describedby": x,
-    "aria-label": q,
-    "aria-labelledby": R,
+  }), G = Ee($), le = {
+    "aria-describedby": v,
+    "aria-label": P,
+    "aria-labelledby": F,
     autoComplete: N,
-    autoFocus: o,
-    id: F,
-    onKeyDown: w,
-    onKeyUp: O,
-    name: I,
-    placeholder: B,
-    readOnly: V,
+    autoFocus: n,
+    id: I,
+    onKeyDown: x,
+    onKeyUp: T,
+    name: O,
+    placeholder: V,
+    readOnly: M,
     type: W
-  }, J = (i = n.root) != null ? i : "div", ue = Q({
+  }, J = (d = r.root) != null ? d : "div", ie = Q({
     elementType: J,
     getSlotProps: te,
-    externalSlotProps: r.root,
+    externalSlotProps: o.root,
     externalForwardedProps: Y,
     additionalProps: {
-      ref: u
+      ref: p
     },
     ownerState: $,
-    className: [G.root, g]
-  }), K = d ? (p = n.textarea) != null ? p : "textarea" : (_ = n.input) != null ? _ : "input", ie = Q({
+    className: [G.root, b]
+  }), K = _ ? (c = r.textarea) != null ? c : "textarea" : (m = r.input) != null ? m : "input", ue = Q({
     elementType: K,
-    getSlotProps: (pe) => oe(m({}, le, pe)),
-    externalSlotProps: r.input,
-    additionalProps: m({
-      rows: d ? t : void 0
-    }, d && !ge(K) && {
-      minRows: t || c,
-      maxRows: t || j
+    getSlotProps: (pe) => oe(y({}, le, pe)),
+    externalSlotProps: o.input,
+    additionalProps: y({
+      rows: _ ? t : void 0
+    }, _ && !be(K) && {
+      minRows: t || i,
+      maxRows: t || H
     }),
     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, m({}, ue, {
-    children: [M, /* @__PURE__ */ T(K, m({}, ie)), C]
+  return process.env.NODE_ENV !== "production" && _ && t && (i || H) && console.warn("MUI: You can not use the `minRows` or `maxRows` props when the input `rows` prop is set."), /* @__PURE__ */ q(J, y({}, ie, {
+    children: [A, /* @__PURE__ */ S(K, y({}, ue)), C]
   }));
 });
 process.env.NODE_ENV !== "production" && (ee.propTypes = {
@@ -372,132 +372,141 @@ process.env.NODE_ENV !== "production" && (ee.propTypes = {
    */
   value: e.any
 });
-const Ee = (a) => /* @__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: {
+const Fe = (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"
-}, ...a }, /* @__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__label_1lq2e_78", Fe = "_input_1lq2e_57", l = {
-  "u-typography-h1": "_u-typography-h1_1lq2e_1",
-  "u-typography-h2": "_u-typography-h2_1lq2e_8",
-  "u-typography-h3": "_u-typography-h3_1lq2e_15",
-  "u-typography-h4": "_u-typography-h4_1lq2e_22",
-  "u-typography-h5": "_u-typography-h5_1lq2e_29",
-  "u-typography-h6": "_u-typography-h6_1lq2e_36",
-  "u-typography-base": "_u-typography-base_1lq2e_43",
-  "u-typography-base--xxl": "_u-typography-base--xxl_1lq2e_49",
-  "u-typography-base--xl": "_u-typography-base--xl_1lq2e_53",
-  "u-typography-base--lg": "_u-typography-base--lg_1lq2e_57",
-  "input__input-el": "_input__input-el_1lq2e_57",
-  "u-typography-base--sm": "_u-typography-base--sm_1lq2e_61",
-  "u-typography-base--bold": "_u-typography-base--bold_1lq2e_65",
-  "u-typography-base--strikethrough": "_u-typography-base--strikethrough_1lq2e_68",
-  "u-typography-base--underlined": "_u-typography-base--underlined_1lq2e_71",
-  "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_1lq2e_74",
-  input__label: Re,
-  "input__input-el-wrapper": "_input__input-el-wrapper_1lq2e_83",
-  "input__left-icon": "_input__left-icon_1lq2e_101",
-  "input__right-icon": "_input__right-icon_1lq2e_101",
-  "input__messages-wrapper": "_input__messages-wrapper_1lq2e_113",
-  "input__info-message": "_input__info-message_1lq2e_121",
-  "input__error-message": "_input__error-message_1lq2e_121",
-  "input__chars-counter": "_input__chars-counter_1lq2e_132",
-  "input--disabled": "_input--disabled_1lq2e_136",
-  input: Fe,
-  "input--focused": "_input--focused_1lq2e_142",
-  "input--error": "_input--error_1lq2e_145"
-}, Be = de(
+}, ...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" })), Ie = "_input__label_1r054_78", Oe = "_input_1r054_57", u = {
+  "u-typography-h1": "_u-typography-h1_1r054_1",
+  "u-typography-h2": "_u-typography-h2_1r054_8",
+  "u-typography-h3": "_u-typography-h3_1r054_15",
+  "u-typography-h4": "_u-typography-h4_1r054_22",
+  "u-typography-h5": "_u-typography-h5_1r054_29",
+  "u-typography-h6": "_u-typography-h6_1r054_36",
+  "u-typography-base": "_u-typography-base_1r054_43",
+  "u-typography-base--xxl": "_u-typography-base--xxl_1r054_49",
+  "u-typography-base--xl": "_u-typography-base--xl_1r054_53",
+  "u-typography-base--lg": "_u-typography-base--lg_1r054_57",
+  "input__input-el": "_input__input-el_1r054_57",
+  "u-typography-base--sm": "_u-typography-base--sm_1r054_61",
+  "u-typography-base--bold": "_u-typography-base--bold_1r054_65",
+  "u-typography-base--strikethrough": "_u-typography-base--strikethrough_1r054_68",
+  "u-typography-base--underlined": "_u-typography-base--underlined_1r054_71",
+  "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_1r054_74",
+  input__label: Ie,
+  "input__input-el-wrapper": "_input__input-el-wrapper_1r054_83",
+  "input__left-icon": "_input__left-icon_1r054_101",
+  "input__right-icon": "_input__right-icon_1r054_101",
+  "input__messages-wrapper": "_input__messages-wrapper_1r054_113",
+  "input__info-message": "_input__info-message_1r054_121",
+  "input__error-message": "_input__error-message_1r054_121",
+  "input__chars-counter": "_input__chars-counter_1r054_132",
+  "input--disabled": "_input--disabled_1r054_136",
+  input: Oe,
+  "input--focused": "_input--focused_1r054_142",
+  "input--error": "_input--error_1r054_145"
+}, Me = de(
   ({
-    label: a,
-    infoMessage: s,
-    error: u,
-    errorMessage: i,
-    leftIcon: p,
-    rightIcon: _,
-    id: x,
-    disabled: q,
-    type: R = "text",
+    label: s,
+    infoMessage: l,
+    error: p,
+    errorMessage: d,
+    leftIcon: c,
+    rightIcon: m,
+    id: v,
+    disabled: P,
+    type: F = "text",
     maxLength: N,
-    hideCharsCounter: o = !1,
-    onChange: g,
+    hideCharsCounter: n = !1,
+    onChange: b,
     classNameWrapper: h,
-    classNameLabel: b,
+    classNameLabel: w,
     classNameInput: C,
-    classNameInfoMessage: y,
-    classNameErrorMessage: F,
-    classNameCharsCounter: d,
-    "data-testid-wrapper": I,
-    "data-testid-label": S,
-    "data-testid-input": k,
-    "data-testid-infoMessage": w,
-    "data-testid-errorMessage": O,
-    "data-testid-charsCounter": P,
-    ...v
-  }, B) => {
-    const [V, U] = ce(0), M = _e(), A = x || `input_${M}`;
-    Object.assign(v, { "data-testid": k });
-    const D = (t) => {
-      var r, n;
-      U((n = (r = t == null ? void 0 : t.target) == null ? void 0 : r.value) == null ? void 0 : n.length), g && g(t);
-    };
-    return /* @__PURE__ */ H("div", { className: E(l.input, h), "data-testid": I, children: [
-      a && /* @__PURE__ */ T(
+    classNameInfoMessage: g,
+    classNameErrorMessage: I,
+    classNameCharsCounter: _,
+    "data-testid-wrapper": O,
+    "data-testid-label": k,
+    "data-testid-input": B,
+    "data-testid-infoMessage": x,
+    "data-testid-errorMessage": T,
+    "data-testid-charsCounter": R,
+    ...a
+  }, V) => {
+    const [M, U] = ce(0), A = _e(), D = v || `input_${A}`;
+    Object.assign(a, { "data-testid": B });
+    const j = (o) => {
+      var r, i;
+      U((i = (r = o == null ? void 0 : o.target) == null ? void 0 : r.value) == null ? void 0 : i.length), b && b(o);
+    }, t = me(() => a.multiline !== !0 ? {
+      type: F,
+      multiline: a.multiline
+    } : {
+      type: void 0,
+      multiline: a.multiline,
+      rows: (a == null ? void 0 : a.rows) || 5,
+      minRows: a == null ? void 0 : a.minRows,
+      maxRows: a == null ? void 0 : a.maxRows
+    }, [a]);
+    return /* @__PURE__ */ q("div", { className: E(u.input, h), "data-testid": O, children: [
+      s && /* @__PURE__ */ S(
         L,
         {
           element: "label",
-          elementProps: { htmlFor: A },
-          className: E(l.input__label, b),
-          "data-testid": S,
-          children: a
+          elementProps: { htmlFor: D },
+          className: E(u.input__label, w),
+          "data-testid": k,
+          children: s
         }
       ),
-      /* @__PURE__ */ T(
+      /* @__PURE__ */ S(
         ee,
         {
-          id: A,
-          type: R,
-          disabled: q,
-          error: typeof u == "boolean" ? u : !!i,
-          "aria-label": a,
+          id: D,
+          disabled: P,
+          error: typeof p == "boolean" ? p : !!d,
+          "aria-label": s,
           slotProps: {
-            root: (t) => ({
-              className: E(l["input__input-el-wrapper"], {
-                [l["input--disabled"]]: t.disabled,
-                [l["input--focused"]]: t.focused,
-                [l["input--error"]]: t.error
+            root: (o) => ({
+              className: E(u["input__input-el-wrapper"], {
+                [u["input--disabled"]]: o.disabled,
+                [u["input--focused"]]: o.focused,
+                [u["input--error"]]: o.error
               })
             }),
             input: {
-              ref: B,
-              className: E(l["input__input-el"], C),
+              ref: V,
+              className: E(u["input__input-el"], C),
               maxLength: N,
-              onChange: D,
-              ...v
+              onChange: j,
+              ...a
             }
           },
-          startAdornment: p && /* @__PURE__ */ T("span", { className: l["input__left-icon"], children: p }),
-          endAdornment: _ && /* @__PURE__ */ T("span", { className: l["input__right-icon"], children: _ })
+          startAdornment: c && /* @__PURE__ */ S("span", { className: u["input__left-icon"], children: c }),
+          endAdornment: m && /* @__PURE__ */ S("span", { className: u["input__right-icon"], children: m }),
+          ...t
         }
       ),
-      /* @__PURE__ */ H("div", { className: l["input__messages-wrapper"], children: [
-        (i || s) && /* @__PURE__ */ H(
+      /* @__PURE__ */ q("div", { className: u["input__messages-wrapper"], children: [
+        (d || l) && /* @__PURE__ */ q(
           L,
           {
-            className: i ? E(l["input__error-message"], F) : E(l["input__info-message"], y),
-            "data-testid": i ? O : w,
+            className: d ? E(u["input__error-message"], I) : E(u["input__info-message"], g),
+            "data-testid": d ? T : x,
             children: [
-              /* @__PURE__ */ T(Ee, {}),
-              i || s
+              /* @__PURE__ */ S(Fe, {}),
+              d || l
             ]
           }
         ),
-        N && !o && /* @__PURE__ */ H(
+        N && !n && /* @__PURE__ */ q(
           L,
           {
-            className: E(l["input__chars-counter"], d),
-            "data-testid": P,
+            className: E(u["input__chars-counter"], _),
+            "data-testid": R,
             children: [
-              V,
+              M,
               " / ",
               N
             ]
@@ -508,5 +517,5 @@ const Ee = (a) => /* @__PURE__ */ f.createElement("svg", { xmlns: "http://www.w3
   }
 );
 export {
-  Be as Input
+  Me as Input
 };

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

@@ -2,28 +2,7 @@ import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;
-    component: import('react').ForwardRefExoticComponent<import('react').InputHTMLAttributes<HTMLInputElement> & {
-        label?: string | undefined;
-        infoMessage?: string | undefined;
-        error?: boolean | undefined;
-        errorMessage?: string | undefined;
-        leftIcon?: import('react').ReactNode;
-        rightIcon?: import('react').ReactNode;
-        type?: ("number" | "url" | "file" | "color" | "search" | (string & {}) | "button" | "time" | "image" | "text" | "reset" | "tel" | "email" | "date" | "hidden" | "range" | "datetime-local" | "month" | "password" | "week") | 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').RefAttributes<HTMLInputElement>>;
+    component: import('react').ForwardRefExoticComponent<import('./Input').InputProps & import('react').RefAttributes<HTMLInputElement>>;
     tags: string[];
     parameters: {
         layout: string;
@@ -42,3 +21,4 @@ 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;

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

@@ -4,28 +4,7 @@ declare const meta: {
     title: string;
     component: ({ classNameWrapper, triggerDelay, value, onChange, ...rest }: {
         triggerDelay?: number | undefined;
-    } & import('react').InputHTMLAttributes<HTMLInputElement> & {
-        label?: string | undefined;
-        infoMessage?: string | undefined;
-        error?: boolean | undefined;
-        errorMessage?: string | undefined;
-        leftIcon?: import('react').ReactNode;
-        rightIcon?: import('react').ReactNode;
-        type?: ("number" | "url" | "file" | "color" | "search" | (string & {}) | "button" | "time" | "image" | "text" | "reset" | "tel" | "email" | "date" | "hidden" | "range" | "datetime-local" | "month" | "password" | "week") | 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').RefAttributes<HTMLInputElement>) => import("react/jsx-runtime").JSX.Element;
+    } & (import('../Input/Input').InputProps & import('react').RefAttributes<HTMLInputElement>)) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {
         layout: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pismo/marola",
   "description": "CDX tribe component library",
-  "version": "1.0.0-beta.29",
+  "version": "1.0.0-beta.30",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",
@@ -60,8 +60,8 @@
     "@types/react-dom": "^18.2.22",
     "@typescript-eslint/eslint-plugin": "^7.6.0",
     "@typescript-eslint/parser": "^7.6.0",
-    "@vitest/coverage-v8": "^1.4.0",
     "@vitejs/plugin-react": "^4.2.1",
+    "@vitest/coverage-v8": "^1.4.0",
     "clsx": "^2.1.0",
     "commitlint": "^19.2.1",
     "cypress": "^13.8.1",
@@ -97,4 +97,4 @@
     "@mui/base": "^5.0.0-beta.40",
     "@mui/material": "^5.15.15"
   }
-}
+}