@pismo/marola 2.1.14 → 2.1.16

package/dist/assets/TransactionRow.css

@@ -1 +1 @@
-._container_kdqr0_1{width:100%;height:56px;border-top:1px solid var(--border-secondary)}._container-grid_kdqr0_6{display:grid;grid-template-columns:1fr 1.5fr .5fr 5fr 2fr 2fr;align-items:center;justify-content:space-between;padding:12px 16px}._container-pending_kdqr0_13{display:flex;align-items:center;justify-content:flex-start;padding:12px 16px}._container-pending--right_kdqr0_19{margin-left:auto}._container_kdqr0_1 :hover{cursor:pointer;background-color:var(--border-secondary)}._info-section_kdqr0_27{display:flex}._info-section--item_kdqr0_30{padding-left:8px}._info-section--item_kdqr0_30:not(:first-child){margin-left:8px;border-left:1px solid var(--border-secondary)}._info-section--right_kdqr0_37{display:flex;justify-content:flex-end}
+._container_sv3th_1{width:100%;height:56px;border-top:1px solid var(--border-secondary)}._container-grid_sv3th_6{display:grid;grid-template-columns:1fr 1.5fr .5fr 5fr 2fr 2fr;align-items:center;justify-content:space-between;padding:12px 16px}._container-pending_sv3th_13{display:flex;align-items:center;justify-content:flex-start;padding:12px 16px}._container-pending--right_sv3th_19{margin-left:auto}._container_sv3th_1 :hover{cursor:pointer;background-color:var(--border-secondary)}._info-section_sv3th_27,._info-section--content_sv3th_31{width:100%;overflow:hidden}._info-section--item_sv3th_35{display:inline-flex;flex-shrink:0;padding-left:8px}._info-section--item_sv3th_35:not(:last-child){flex-shrink:0}._info-section--item_sv3th_35:last-child{flex-shrink:1;min-width:0;overflow:hidden}._info-section--item_sv3th_35:not(:first-child){margin-left:8px;border-left:1px solid var(--border-secondary)}._info-section--right_sv3th_52{display:flex;justify-content:flex-end}._info-section_sv3th_27 ._truncate-text_sv3th_56{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._info-section_sv3th_27 ._separator_sv3th_63{display:inline-block;width:1px;height:16px;margin:0 8px;vertical-align:middle;background-color:var(--border-secondary)}

package/dist/components/Autocomplete/Autocomplete.d.ts

@@ -15,9 +15,15 @@ export type AutocompleteProps<T> = Omit<InputProps, 'onChange' | 'value'> & {
     options?: Array<T>;
     /** CSS classes to be applied on the input container element */
     classNameInputWrapper?: string;
-    /** callback for new option selected */
+    /** Callback for new option selected */
     onChange?: (event: SyntheticEvent<Element, Event>, newValue: T) => void;
-    /** callback when characters are entered into the input box */
+    /** Callback when characters are entered into the input box */
     onInputChange?: (event: SyntheticEvent<Element, Event>, newValue: string) => void;
+    /** Control programmatically the state of the autocomplete list. Using this prop will disable the auto open/close handling and you must provide the behavior for yourself. */
+    open?: boolean;
+    /** Callback when the autocomplete list is opened */
+    onOpen?: () => void;
+    /** Callback when the autocomplete list is closed */
+    onClose?: () => void;
 };
-export declare const Autocomplete: <T extends string | object>({ labelKey, valueKey, renderOption, customSelectedOptionLabel, options, type, value, onChange, onInputChange, classNameWrapper, "data-testid-wrapper": dataTestId, classNameInputWrapper, ...props }: AutocompleteProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const Autocomplete: <T extends string | object>({ labelKey, valueKey, renderOption, customSelectedOptionLabel, options, type, value, onChange, onInputChange, classNameWrapper, "data-testid-wrapper": dataTestId, classNameInputWrapper, open, onOpen, onClose, ...props }: AutocompleteProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Autocomplete/Autocomplete.js

@@ -6,8 +6,8 @@ import { Icon as ct } from "../Icon/Icon.js";
 import { Input as ft } from "../Input/Input.js";
 import { s as dt, b as Me } from "../../useSlotProps-C7dqSmdM.js";
 import { u as pt } from "../../useId-BW-oWmul.js";
-import { u as we } from "../../useControlled-CCMYYdCM.js";
-import { u as fe } from "../../useEventCallback-BAQJJ3ye.js";
+import { u as Ee } from "../../useControlled-CCMYYdCM.js";
+import { u as pe } from "../../useEventCallback-BAQJJ3ye.js";
 import '../../assets/Autocomplete.css';const gt = (c) => {
   const h = g.useRef({});
   return g.useEffect(() => {
@@ -21,25 +21,25 @@ function ht(c = {}) {
   const {
     ignoreAccents: h = !0,
     ignoreCase: m = !0,
-    limit: $,
-    matchFrom: N = "any",
-    stringify: B,
+    limit: A,
+    matchFrom: v = "any",
+    stringify: j,
     trim: V = !1
   } = c;
-  return (P, {
+  return (D, {
     inputValue: M,
     getOptionLabel: b
   }) => {
     let k = V ? M.trim() : M;
     m && (k = k.toLowerCase()), h && (k = Re(k));
-    const U = k ? P.filter((K) => {
-      let w = (B || b)(K);
-      return m && (w = w.toLowerCase()), h && (w = Re(w)), N === "start" ? w.indexOf(k) === 0 : w.indexOf(k) > -1;
-    }) : P;
-    return typeof $ == "number" ? U.slice(0, $) : U;
+    const B = k ? D.filter((J) => {
+      let w = (j || b)(J);
+      return m && (w = w.toLowerCase()), h && (w = Re(w)), v === "start" ? w.indexOf(k) === 0 : w.indexOf(k) > -1;
+    }) : D;
+    return typeof A == "number" ? B.slice(0, A) : B;
   };
 }
-function de(c, h) {
+function ge(c, h) {
   for (let m = 0; m < c.length; m += 1)
     if (h(c[m]))
       return m;
@@ -55,50 +55,50 @@ function yt(c) {
     unstable_isActiveElementInListbox: h = xt,
     // eslint-disable-next-line @typescript-eslint/naming-convention
     unstable_classNamePrefix: m = "Mui",
-    autoComplete: $ = !1,
-    autoHighlight: N = !1,
-    autoSelect: B = !1,
+    autoComplete: A = !1,
+    autoHighlight: v = !1,
+    autoSelect: j = !1,
     blurOnSelect: V = !1,
-    clearOnBlur: P = !c.freeSolo,
+    clearOnBlur: D = !c.freeSolo,
     clearOnEscape: M = !1,
     componentName: b = "useAutocomplete",
     defaultValue: k = c.multiple ? [] : null,
-    disableClearable: U = !1,
-    disableCloseOnSelect: K = !1,
+    disableClearable: B = !1,
+    disableCloseOnSelect: J = !1,
     disabled: w,
-    disabledItemsFocusable: pe = !1,
-    disableListWrap: ee = !1,
-    filterOptions: ge = mt,
-    filterSelectedOptions: te = !1,
-    freeSolo: v = !1,
-    getOptionDisabled: R,
-    getOptionKey: ne,
-    getOptionLabel: re = (t) => {
+    disabledItemsFocusable: he = !1,
+    disableListWrap: W = !1,
+    filterOptions: me = mt,
+    filterSelectedOptions: ee = !1,
+    freeSolo: L = !1,
+    getOptionDisabled: U,
+    getOptionKey: te,
+    getOptionLabel: ne = (t) => {
       var e;
       return (e = t.label) != null ? e : t;
     },
-    groupBy: i,
-    handleHomeEndKeys: x = !c.freeSolo,
-    id: W,
-    includeInputInList: H = !1,
-    inputValue: L,
-    isOptionEqualToValue: A = (t, e) => t === e,
+    groupBy: R,
+    handleHomeEndKeys: re = !c.freeSolo,
+    id: be,
+    includeInputInList: i = !1,
+    inputValue: y,
+    isOptionEqualToValue: E = (t, e) => t === e,
     multiple: l = !1,
-    onChange: Se,
-    onClose: ke,
-    onHighlightChange: Ee,
-    onInputChange: F,
+    onChange: T,
+    onClose: oe,
+    onHighlightChange: se,
+    onInputChange: H,
     onOpen: Te,
     open: He,
     openOnFocus: Fe = !1,
-    options: he,
+    options: xe,
     readOnly: Y = !1,
     selectOnFocus: qe = !c.freeSolo,
     value: je
-  } = c, E = pt(W);
-  let O = re;
+  } = c, _ = pt(be);
+  let O = ne;
   O = (t) => {
-    const e = re(t);
+    const e = ne(t);
     if (typeof e != "string") {
       if (process.env.NODE_ENV !== "production") {
         const n = e === void 0 ? "undefined" : `${typeof e} (${e})`;
@@ -108,17 +108,17 @@ function yt(c) {
     }
     return e;
   };
-  const me = g.useRef(!1), be = g.useRef(!0), d = g.useRef(null), T = g.useRef(null), [oe, Be] = g.useState(null), [_, xe] = g.useState(-1), _e = N ? 0 : -1, y = g.useRef(_e), [r, Ue] = we({
+  const ye = g.useRef(!1), Oe = g.useRef(!0), d = g.useRef(null), $ = g.useRef(null), [ie, Be] = g.useState(null), [P, Ie] = g.useState(-1), _e = v ? 0 : -1, x = g.useRef(_e), [r, Ue] = Ee({
     controlled: je,
     default: k,
     name: b
-  }), [u, se] = we({
-    controlled: L,
+  }), [u, le] = Ee({
+    controlled: y,
     default: "",
     name: b,
     state: "inputValue"
-  }), [ie, $e] = g.useState(!1), le = g.useCallback((t, e) => {
-    if (!(l ? r.length < e.length : e !== null) && !P)
+  }), [ae, $e] = g.useState(!1), ue = g.useCallback((t, e) => {
+    if (!(l ? r.length < e.length : e !== null) && !D)
       return;
     let o;
     if (l)
@@ -129,75 +129,75 @@ function yt(c) {
       const s = O(e);
       o = typeof s == "string" ? s : "";
     }
-    u !== o && (se(o), F && F(t, o, "reset"));
-  }, [O, u, l, F, se, P, r]), [z, Pe] = we({
+    u !== o && (le(o), H && H(t, o, "reset"));
+  }, [O, u, l, H, le, D, r]), [K, Pe] = Ee({
     controlled: He,
     default: !1,
     name: b,
     state: "open"
-  }), [Ke, Ae] = g.useState(!0), De = !l && r != null && u === O(r), S = z && !Y, f = S ? ge(
-    he.filter((t) => !(te && (l ? r : [r]).some((e) => e !== null && A(t, e)))),
+  }), [Ke, Ae] = g.useState(!0), De = !l && r != null && u === O(r), S = K && !Y, f = S ? me(
+    xe.filter((t) => !(ee && (l ? r : [r]).some((e) => e !== null && E(t, e)))),
     // we use the empty string to manipulate `filterOptions` to not filter any options
     // i.e. the filter predicate always returns true
     {
       inputValue: De && Ke ? "" : u,
       getOptionLabel: O
     }
-  ) : [], D = gt({
+  ) : [], C = gt({
     filteredOptions: f,
     value: r,
     inputValue: u
   });
   g.useEffect(() => {
-    const t = r !== D.value;
-    ie && !t || v && !t || le(null, r);
-  }, [r, le, ie, D.value, v]);
-  const ye = z && f.length > 0 && !Y;
-  if (process.env.NODE_ENV !== "production" && r !== null && !v && he.length > 0) {
-    const t = (l ? r : [r]).filter((e) => !he.some((n) => A(n, e)));
+    const t = r !== C.value;
+    ae && !t || L && !t || ue(null, r);
+  }, [r, ue, ae, C.value, L]);
+  const we = K && f.length > 0 && !Y;
+  if (process.env.NODE_ENV !== "production" && r !== null && !L && xe.length > 0) {
+    const t = (l ? r : [r]).filter((e) => !xe.some((n) => E(n, e)));
     t.length > 0 && console.warn([`MUI: The value provided to ${b} is invalid.`, `None of the options match with \`${t.length > 1 ? JSON.stringify(t) : JSON.stringify(t[0])}\`.`, "You can use the `isOptionEqualToValue` prop to customize the equality test."].join(`
 `));
   }
-  const ae = fe((t) => {
-    t === -1 ? d.current.focus() : oe.querySelector(`[data-tag-index="${t}"]`).focus();
+  const ce = pe((t) => {
+    t === -1 ? d.current.focus() : ie.querySelector(`[data-tag-index="${t}"]`).focus();
   });
   g.useEffect(() => {
-    l && _ > r.length - 1 && (xe(-1), ae(-1));
-  }, [r, l, _, ae]);
+    l && P > r.length - 1 && (Ie(-1), ce(-1));
+  }, [r, l, P, ce]);
   function ze(t, e) {
-    if (!T.current || t < 0 || t >= f.length)
+    if (!$.current || t < 0 || t >= f.length)
       return -1;
     let n = t;
     for (; ; ) {
-      const o = T.current.querySelector(`[data-option-index="${n}"]`), s = pe ? !1 : !o || o.disabled || o.getAttribute("aria-disabled") === "true";
+      const o = $.current.querySelector(`[data-option-index="${n}"]`), s = he ? !1 : !o || o.disabled || o.getAttribute("aria-disabled") === "true";
       if (o && o.hasAttribute("tabindex") && !s)
         return n;
       if (e === "next" ? n = (n + 1) % f.length : n = (n - 1 + f.length) % f.length, n === t)
         return -1;
     }
   }
-  const q = fe(({
+  const F = pe(({
     event: t,
     index: e,
     reason: n = "auto"
   }) => {
-    if (y.current = e, e === -1 ? d.current.removeAttribute("aria-activedescendant") : d.current.setAttribute("aria-activedescendant", `${E}-option-${e}`), Ee && Ee(t, e === -1 ? null : f[e], n), !T.current)
+    if (x.current = e, e === -1 ? d.current.removeAttribute("aria-activedescendant") : d.current.setAttribute("aria-activedescendant", `${_}-option-${e}`), se && se(t, e === -1 ? null : f[e], n), !$.current)
       return;
-    const o = T.current.querySelector(`[role="option"].${m}-focused`);
+    const o = $.current.querySelector(`[role="option"].${m}-focused`);
     o && (o.classList.remove(`${m}-focused`), o.classList.remove(`${m}-focusVisible`));
-    let s = T.current;
-    if (T.current.getAttribute("role") !== "listbox" && (s = T.current.parentElement.querySelector('[role="listbox"]')), !s)
+    let s = $.current;
+    if ($.current.getAttribute("role") !== "listbox" && (s = $.current.parentElement.querySelector('[role="listbox"]')), !s)
       return;
     if (e === -1) {
       s.scrollTop = 0;
       return;
     }
-    const a = T.current.querySelector(`[data-option-index="${e}"]`);
+    const a = $.current.querySelector(`[data-option-index="${e}"]`);
     if (a && (a.classList.add(`${m}-focused`), n === "keyboard" && a.classList.add(`${m}-focusVisible`), s.scrollHeight > s.clientHeight && n !== "mouse" && n !== "touch")) {
-      const p = a, I = s.clientHeight + s.scrollTop, ce = p.offsetTop + p.offsetHeight;
-      ce > I ? s.scrollTop = ce - s.clientHeight : p.offsetTop - p.offsetHeight * (i ? 1.3 : 0) < s.scrollTop && (s.scrollTop = p.offsetTop - p.offsetHeight * (i ? 1.3 : 0));
+      const p = a, I = s.clientHeight + s.scrollTop, de = p.offsetTop + p.offsetHeight;
+      de > I ? s.scrollTop = de - s.clientHeight : p.offsetTop - p.offsetHeight * (R ? 1.3 : 0) < s.scrollTop && (s.scrollTop = p.offsetTop - p.offsetHeight * (R ? 1.3 : 0));
     }
-  }), C = fe(({
+  }), N = pe(({
     event: t,
     diff: e,
     direction: n = "next",
@@ -213,14 +213,14 @@ function yt(c) {
         return 0;
       if (e === "end")
         return p;
-      const I = y.current + e;
-      return I < 0 ? I === -1 && H ? -1 : ee && y.current !== -1 || Math.abs(e) > 1 ? 0 : p : I > p ? I === p + 1 && H ? -1 : ee || Math.abs(e) > 1 ? p : 0 : I;
+      const I = x.current + e;
+      return I < 0 ? I === -1 && i ? -1 : W && x.current !== -1 || Math.abs(e) > 1 ? 0 : p : I > p ? I === p + 1 && i ? -1 : W || Math.abs(e) > 1 ? p : 0 : I;
     })(), n);
-    if (q({
+    if (F({
       index: a,
       reason: o,
       event: t
-    }), $ && e !== "reset")
+    }), A && e !== "reset")
       if (a === -1)
         d.current.value = u;
       else {
@@ -232,48 +232,48 @@ function yt(c) {
       const o = e ? O(e) : "", s = n ? O(n) : "";
       return o === s;
     };
-    if (y.current !== -1 && D.filteredOptions && D.filteredOptions.length !== f.length && D.inputValue === u && (l ? r.length === D.value.length && D.value.every((e, n) => O(r[n]) === O(e)) : t(D.value, r))) {
-      const e = D.filteredOptions[y.current];
+    if (x.current !== -1 && C.filteredOptions && C.filteredOptions.length !== f.length && C.inputValue === u && (l ? r.length === C.value.length && C.value.every((e, n) => O(r[n]) === O(e)) : t(C.value, r))) {
+      const e = C.filteredOptions[x.current];
       if (e)
-        return de(f, (n) => O(n) === O(e));
+        return ge(f, (n) => O(n) === O(e));
     }
     return -1;
-  }, Oe = g.useCallback(() => {
+  }, Se = g.useCallback(() => {
     if (!S)
       return;
     const t = Je();
     if (t !== -1) {
-      y.current = t;
+      x.current = t;
       return;
     }
     const e = l ? r[0] : r;
     if (f.length === 0 || e == null) {
-      C({
+      N({
         diff: "reset"
       });
       return;
     }
-    if (T.current) {
+    if ($.current) {
       if (e != null) {
-        const n = f[y.current];
-        if (l && n && de(r, (s) => A(n, s)) !== -1)
+        const n = f[x.current];
+        if (l && n && ge(r, (s) => E(n, s)) !== -1)
           return;
-        const o = de(f, (s) => A(s, e));
-        o === -1 ? C({
+        const o = ge(f, (s) => E(s, e));
+        o === -1 ? N({
           diff: "reset"
-        }) : q({
+        }) : F({
           index: o
         });
         return;
       }
-      if (y.current >= f.length - 1) {
-        q({
+      if (x.current >= f.length - 1) {
+        F({
           index: f.length - 1
         });
         return;
       }
-      q({
-        index: y.current
+      F({
+        index: x.current
       });
     }
   }, [
@@ -282,47 +282,47 @@ function yt(c) {
     // Don't sync the highlighted index with the value when multiple
     // eslint-disable-next-line react-hooks/exhaustive-deps
     l ? !1 : r,
-    te,
-    C,
-    q,
+    ee,
+    N,
+    F,
     S,
     u,
     l
-  ]), We = fe((t) => {
-    dt(T, t), t && Oe();
+  ]), We = pe((t) => {
+    dt($, t), t && Se();
   });
   process.env.NODE_ENV !== "production" && g.useEffect(() => {
     (!d.current || d.current.nodeName !== "INPUT") && (d.current && d.current.nodeName === "TEXTAREA" ? console.warn([`A textarea element was provided to ${b} where input was expected.`, "This is not a supported scenario but it may work under certain conditions.", "A textarea keyboard navigation may conflict with Autocomplete controls (for example enter and arrow keys).", "Make sure to test keyboard navigation and add custom event handlers if necessary."].join(`
 `)) : console.error([`MUI: Unable to find the input element. It was resolved to ${d.current} while an HTMLInputElement was expected.`, `Instead, ${b} expects an input element.`, "", b === "useAutocomplete" ? "Make sure you have bound getInputProps correctly and that the normal ref/effect resolutions order is guaranteed." : "Make sure you have customized the input component correctly."].join(`
 `)));
   }, [b]), g.useEffect(() => {
-    Oe();
-  }, [Oe]);
-  const j = (t) => {
-    z || (Pe(!0), Ae(!0), Te && Te(t));
+    Se();
+  }, [Se]);
+  const q = (t) => {
+    K || (Pe(!0), Ae(!0), Te && Te(t));
   }, X = (t, e) => {
-    z && (Pe(!1), ke && ke(t, e));
-  }, J = (t, e, n, o) => {
+    K && (Pe(!1), oe && oe(t, e));
+  }, z = (t, e, n, o) => {
     if (l) {
       if (r.length === e.length && r.every((s, a) => s === e[a]))
         return;
     } else if (r === e)
       return;
-    Se && Se(t, e, n, o), Ue(e);
-  }, ue = g.useRef(!1), G = (t, e, n = "selectOption", o = "options") => {
+    T && T(t, e, n, o), Ue(e);
+  }, fe = g.useRef(!1), G = (t, e, n = "selectOption", o = "options") => {
     let s = n, a = e;
     if (l) {
       if (a = Array.isArray(r) ? r.slice() : [], process.env.NODE_ENV !== "production") {
-        const I = a.filter((ce) => A(e, ce));
+        const I = a.filter((de) => E(e, de));
         I.length > 1 && console.error([`MUI: The \`isOptionEqualToValue\` method of ${b} does not handle the arguments correctly.`, `The component expects a single value to match a given option but found ${I.length} matches.`].join(`
 `));
       }
-      const p = de(a, (I) => A(e, I));
+      const p = ge(a, (I) => E(e, I));
       p === -1 ? a.push(e) : o !== "freeSolo" && (a.splice(p, 1), s = "removeOption");
     }
-    le(t, a), J(t, a, s, {
+    ue(t, a), z(t, a, s, {
       option: e
-    }), !K && (!t || !t.ctrlKey && !t.metaKey) && X(t, s), (V === !0 || V === "touch" && ue.current || V === "mouse" && !ue.current) && d.current.blur();
+    }), !J && (!t || !t.ctrlKey && !t.metaKey) && X(t, s), (V === !0 || V === "touch" && fe.current || V === "mouse" && !fe.current) && d.current.blur();
   };
   function Ye(t, e) {
     if (t === -1)
@@ -331,7 +331,7 @@ function yt(c) {
     for (; ; ) {
       if (e === "next" && n === r.length || e === "previous" && n === -1)
         return -1;
-      const o = oe.querySelector(`[data-tag-index="${n}"]`);
+      const o = ie.querySelector(`[data-tag-index="${n}"]`);
       if (!o || !o.hasAttribute("tabindex") || o.disabled || o.getAttribute("aria-disabled") === "true")
         n += e === "next" ? 1 : -1;
       else
@@ -342,15 +342,15 @@ function yt(c) {
     if (!l)
       return;
     u === "" && X(t, "toggleInput");
-    let n = _;
-    _ === -1 ? u === "" && e === "previous" && (n = r.length - 1) : (n += e === "next" ? 1 : -1, n < 0 && (n = 0), n === r.length && (n = -1)), n = Ye(n, e), xe(n), ae(n);
+    let n = P;
+    P === -1 ? u === "" && e === "previous" && (n = r.length - 1) : (n += e === "next" ? 1 : -1, n < 0 && (n = 0), n === r.length && (n = -1)), n = Ye(n, e), Ie(n), ce(n);
   }, Ne = (t) => {
-    me.current = !0, se(""), F && F(t, "", "clear"), J(t, l ? [] : null, "clear");
+    ye.current = !0, le(""), H && H(t, "", "clear"), z(t, l ? [] : null, "clear");
   }, Xe = (t) => (e) => {
-    if (t.onKeyDown && t.onKeyDown(e), !e.defaultMuiPrevented && (_ !== -1 && ["ArrowLeft", "ArrowRight"].indexOf(e.key) === -1 && (xe(-1), ae(-1)), e.which !== 229))
+    if (t.onKeyDown && t.onKeyDown(e), !e.defaultMuiPrevented && (P !== -1 && ["ArrowLeft", "ArrowRight"].indexOf(e.key) === -1 && (Ie(-1), ce(-1)), e.which !== 229))
       switch (e.key) {
         case "Home":
-          S && x && (e.preventDefault(), C({
+          S && re && (e.preventDefault(), N({
             diff: "start",
             direction: "next",
             reason: "keyboard",
@@ -358,7 +358,7 @@ function yt(c) {
           }));
           break;
         case "End":
-          S && x && (e.preventDefault(), C({
+          S && re && (e.preventDefault(), N({
             diff: "end",
             direction: "previous",
             reason: "keyboard",
@@ -366,36 +366,36 @@ function yt(c) {
           }));
           break;
         case "PageUp":
-          e.preventDefault(), C({
+          e.preventDefault(), N({
             diff: -5,
             direction: "previous",
             reason: "keyboard",
             event: e
-          }), j(e);
+          }), q(e);
           break;
         case "PageDown":
-          e.preventDefault(), C({
+          e.preventDefault(), N({
             diff: bt,
             direction: "next",
             reason: "keyboard",
             event: e
-          }), j(e);
+          }), q(e);
           break;
         case "ArrowDown":
-          e.preventDefault(), C({
+          e.preventDefault(), N({
             diff: 1,
             direction: "next",
             reason: "keyboard",
             event: e
-          }), j(e);
+          }), q(e);
           break;
         case "ArrowUp":
-          e.preventDefault(), C({
+          e.preventDefault(), N({
             diff: -1,
             direction: "previous",
             reason: "keyboard",
             event: e
-          }), j(e);
+          }), q(e);
           break;
         case "ArrowLeft":
           Ce(e, "previous");
@@ -404,82 +404,82 @@ function yt(c) {
           Ce(e, "next");
           break;
         case "Enter":
-          if (y.current !== -1 && S) {
-            const n = f[y.current], o = R ? R(n) : !1;
+          if (x.current !== -1 && S) {
+            const n = f[x.current], o = U ? U(n) : !1;
             if (e.preventDefault(), o)
               return;
-            G(e, n, "selectOption"), $ && d.current.setSelectionRange(d.current.value.length, d.current.value.length);
-          } else v && u !== "" && De === !1 && (l && e.preventDefault(), G(e, u, "createOption", "freeSolo"));
+            G(e, n, "selectOption"), A && d.current.setSelectionRange(d.current.value.length, d.current.value.length);
+          } else L && u !== "" && De === !1 && (l && e.preventDefault(), G(e, u, "createOption", "freeSolo"));
           break;
         case "Escape":
           S ? (e.preventDefault(), e.stopPropagation(), X(e, "escape")) : M && (u !== "" || l && r.length > 0) && (e.preventDefault(), e.stopPropagation(), Ne(e));
           break;
         case "Backspace":
           if (l && !Y && u === "" && r.length > 0) {
-            const n = _ === -1 ? r.length - 1 : _, o = r.slice();
-            o.splice(n, 1), J(e, o, "removeOption", {
+            const n = P === -1 ? r.length - 1 : P, o = r.slice();
+            o.splice(n, 1), z(e, o, "removeOption", {
               option: r[n]
             });
           }
           break;
         case "Delete":
-          if (l && !Y && u === "" && r.length > 0 && _ !== -1) {
-            const n = _, o = r.slice();
-            o.splice(n, 1), J(e, o, "removeOption", {
+          if (l && !Y && u === "" && r.length > 0 && P !== -1) {
+            const n = P, o = r.slice();
+            o.splice(n, 1), z(e, o, "removeOption", {
               option: r[n]
             });
           }
           break;
       }
   }, Ge = (t) => {
-    $e(!0), Fe && !me.current && j(t);
+    $e(!0), Fe && !ye.current && q(t);
   }, ve = (t) => {
-    if (h(T)) {
+    if (h($)) {
       d.current.focus();
       return;
     }
-    $e(!1), be.current = !0, me.current = !1, B && y.current !== -1 && S ? G(t, f[y.current], "blur") : B && v && u !== "" ? G(t, u, "blur", "freeSolo") : P && le(t, r), X(t, "blur");
+    $e(!1), Oe.current = !0, ye.current = !1, j && x.current !== -1 && S ? G(t, f[x.current], "blur") : j && L && u !== "" ? G(t, u, "blur", "freeSolo") : D && ue(t, r), X(t, "blur");
   }, Qe = (t) => {
     const e = t.target.value;
-    u !== e && (se(e), Ae(!1), F && F(t, e, "input")), e === "" ? !U && !l && J(t, null, "clear") : j(t);
+    u !== e && (le(e), Ae(!1), H && H(t, e, "input")), e === "" ? !B && !l && z(t, null, "clear") : q(t);
   }, Ze = (t) => {
     const e = Number(t.currentTarget.getAttribute("data-option-index"));
-    y.current !== e && q({
+    x.current !== e && F({
       event: t,
       index: e,
       reason: "mouse"
     });
   }, et = (t) => {
-    q({
+    F({
       event: t,
       index: Number(t.currentTarget.getAttribute("data-option-index")),
       reason: "touch"
-    }), ue.current = !0;
+    }), fe.current = !0;
   }, tt = (t) => {
     const e = Number(t.currentTarget.getAttribute("data-option-index"));
-    G(t, f[e], "selectOption"), ue.current = !1;
+    G(t, f[e], "selectOption"), fe.current = !1;
   }, nt = (t) => (e) => {
     const n = r.slice();
-    n.splice(t, 1), J(e, n, "removeOption", {
+    n.splice(t, 1), z(e, n, "removeOption", {
       option: r[t]
     });
   }, Le = (t) => {
-    z ? X(t, "toggleInput") : j(t);
+    K ? X(t, "toggleInput") : q(t);
   }, rt = (t) => {
-    t.currentTarget.contains(t.target) && t.target.getAttribute("id") !== E && t.preventDefault();
+    t.currentTarget.contains(t.target) && t.target.getAttribute("id") !== _ && t.preventDefault();
   }, ot = (t) => {
-    t.currentTarget.contains(t.target) && (d.current.focus(), qe && be.current && d.current.selectionEnd - d.current.selectionStart === 0 && d.current.select(), be.current = !1);
+    t.currentTarget.contains(t.target) && (d.current.focus(), qe && Oe.current && d.current.selectionEnd - d.current.selectionStart === 0 && d.current.select(), Oe.current = !1);
   }, st = (t) => {
-    !w && (u === "" || !z) && Le(t);
+    !w && (u === "" || !K) && Le(t);
   };
-  let Ie = v && u.length > 0;
-  Ie = Ie || (l ? r.length > 0 : r !== null);
+  let ke = L && u.length > 0;
+  ke = ke || (l ? r.length > 0 : r !== null);
   let Ve = f;
-  if (i) {
+  if (R) {
     const t = /* @__PURE__ */ new Map();
     let e = !1;
     Ve = f.reduce((n, o, s) => {
-      const a = i(o);
+      const a = R(o);
       return n.length > 0 && n[n.length - 1].group === a ? n[n.length - 1].options.push(o) : (process.env.NODE_ENV !== "production" && (t.get(a) && !e && (console.warn(`MUI: The options provided combined with the \`groupBy\` method of ${b} returns duplicated headers.`, "You can solve the issue by sorting the options with the output of `groupBy`."), e = !0), t.set(a, !0)), n.push({
         key: s,
         index: s,
@@ -488,20 +488,20 @@ function yt(c) {
       })), n;
     }, []);
   }
-  return w && ie && ve(), {
+  return w && ae && ve(), {
     getRootProps: (t = {}) => Me({
-      "aria-owns": ye ? `${E}-listbox` : null
+      "aria-owns": we ? `${_}-listbox` : null
     }, t, {
       onKeyDown: Xe(t),
       onMouseDown: rt,
       onClick: ot
     }),
     getInputLabelProps: () => ({
-      id: `${E}-label`,
-      htmlFor: E
+      id: `${_}-label`,
+      htmlFor: _
     }),
     getInputProps: () => ({
-      id: E,
+      id: _,
       value: u,
       onBlur: ve,
       onFocus: Ge,
@@ -510,9 +510,9 @@ function yt(c) {
       // if open then this is handled imperatively so don't let react override
       // only have an opinion about this when closed
       "aria-activedescendant": S ? "" : null,
-      "aria-autocomplete": $ ? "both" : "list",
-      "aria-controls": ye ? `${E}-listbox` : void 0,
-      "aria-expanded": ye,
+      "aria-autocomplete": A ? "both" : "list",
+      "aria-controls": we ? `${_}-listbox` : void 0,
+      "aria-expanded": we,
       // Disable browser's suggestion that might overlap with the popup.
       // Handle autocomplete but not autofill.
       autoComplete: "off",
@@ -543,8 +543,8 @@ function yt(c) {
     }),
     getListboxProps: () => ({
       role: "listbox",
-      id: `${E}-listbox`,
-      "aria-labelledby": `${E}-label`,
+      id: `${_}-listbox`,
+      "aria-labelledby": `${_}-label`,
       ref: We,
       onMouseDown: (t) => {
         t.preventDefault();
@@ -555,12 +555,12 @@ function yt(c) {
       option: e
     }) => {
       var n;
-      const o = (l ? r : [r]).some((a) => a != null && A(e, a)), s = R ? R(e) : !1;
+      const o = (l ? r : [r]).some((a) => a != null && E(e, a)), s = U ? U(e) : !1;
       return {
-        key: (n = ne == null ? void 0 : ne(e)) != null ? n : O(e),
+        key: (n = te == null ? void 0 : te(e)) != null ? n : O(e),
         tabIndex: -1,
         role: "option",
-        id: `${E}-option-${t}`,
+        id: `${_}-option-${t}`,
         onMouseMove: Ze,
         onClick: tt,
         onTouchStart: et,
@@ -569,16 +569,16 @@ function yt(c) {
         "aria-selected": o
       };
     },
-    id: E,
+    id: _,
     inputValue: u,
     value: r,
-    dirty: Ie,
-    expanded: S && oe,
+    dirty: ke,
+    expanded: S && ie,
     popupOpen: S,
-    focused: ie || _ !== -1,
-    anchorEl: oe,
+    focused: ae || P !== -1,
+    anchorEl: ie,
     setAnchorEl: Be,
-    focusedTag: _,
+    focusedTag: P,
     groupedOptions: Ve
   };
 }
@@ -591,66 +591,84 @@ const Ot = "_autocomplete_mj65r_65", Z = {
   labelKey: c,
   valueKey: h,
   renderOption: m,
-  customSelectedOptionLabel: $,
-  options: N,
-  type: B,
+  customSelectedOptionLabel: A,
+  options: v,
+  type: j,
   value: V,
-  onChange: P,
+  onChange: D,
   onInputChange: M,
   classNameWrapper: b,
   "data-testid-wrapper": k,
-  classNameInputWrapper: U,
-  ...K
+  classNameInputWrapper: B,
+  open: J = void 0,
+  onOpen: w = void 0,
+  onClose: he = void 0,
+  ...W
 }) => {
-  const w = lt(), [pe, ee] = at("");
-  (N != null && N.some((i) => typeof i != "string") && !c && !m || !h) && console.error(
+  const me = lt(), [ee, L] = at("");
+  v != null && v.some((i) => typeof i != "string") && (!c && !m || !h) && console.error(
     '[autocomplete] When options is a list of objects, you must provide the "labelKey" or "renderOption" and "valueKey" parameters.'
   );
-  const { getRootProps: ge, getInputProps: te, getOptionProps: v, groupedOptions: R, getListboxProps: ne } = yt({
-    id: `autocomplete_${w}`,
-    options: N,
-    getOptionLabel: (i) => typeof i == "string" ? i : $ ? $(i) : String(i[c || "label"]),
+  const { getRootProps: U, getInputProps: te, getOptionProps: ne, groupedOptions: R, getListboxProps: re } = yt({
+    id: `autocomplete_${me}`,
+    options: v,
+    open: J,
+    onOpen: w,
+    onClose: he,
+    getOptionLabel: (i) => typeof i == "string" ? i : A ? A(i) : String(i[c || "label"]),
     value: V,
-    inputValue: pe,
-    isOptionEqualToValue: (i, x) => typeof i == "string" ? String(i) === String(x) : String(i[h || "id"]) === String(x[h || "id"]),
+    inputValue: ee,
+    isOptionEqualToValue: (i, y) => typeof i == "string" ? String(i) === String(y) : String(i[h || "id"]) === String(y[h || "id"]),
     getOptionKey(i) {
       return String(typeof i == "string" ? i : i[h || "id"]);
     },
-    onChange: (i, x) => {
-      P && P(i, x);
+    onChange: (i, y) => {
+      D && D(i, y);
     },
-    onInputChange: (i, x) => {
-      M && M(i, x), ee(x);
+    onInputChange: (i, y) => {
+      M && M(i, y), L(y);
     },
-    onHighlightChange: (i, x, W) => {
-      var H;
-      if (W === "keyboard") {
-        const L = document.querySelector("#autocomplete-list"), A = (i == null ? void 0 : i.target).getAttribute("aria-activedescendant");
-        L == null || L.querySelectorAll("li").forEach((l) => l.classList.remove(Z["option-focused"])), (H = L == null ? void 0 : L.querySelector(`[id="${A}"]`)) == null || H.classList.add(Z["option-focused"]);
+    onHighlightChange: (i, y, E) => {
+      var l;
+      if (E === "keyboard") {
+        const T = document.querySelector("#autocomplete-list"), oe = (i == null ? void 0 : i.target).getAttribute("aria-activedescendant");
+        T == null || T.querySelectorAll("li").forEach((se) => se.classList.remove(Z["option-focused"])), (l = T == null ? void 0 : T.querySelector(`[id="${oe}"]`)) == null || l.classList.add(Z["option-focused"]);
       }
     }
-  }), re = {
+  }), be = {
     ...te(),
-    ...K,
-    classNameWrapper: U
+    ...W,
+    classNameWrapper: B
   };
-  return /* @__PURE__ */ Q("div", { className: ut(Z.autocomplete, b), "data-testid": k, children: /* @__PURE__ */ it("div", { ...ge(), children: [
+  return /* @__PURE__ */ Q("div", { className: ut(Z.autocomplete, b), "data-testid": k, children: /* @__PURE__ */ it("div", { ...U(), children: [
     /* @__PURE__ */ Q(
       ft,
       {
-        rightIcon: B === "search" && /* @__PURE__ */ Q(ct, { color: "var(--accent)", icon: "magnifying-glass" }),
-        ...re
+        rightIcon: j === "search" && /* @__PURE__ */ Q(ct, { color: "var(--accent)", icon: "magnifying-glass" }),
+        ...be
       }
     ),
-    R.length > 0 && !K.disabled && /* @__PURE__ */ Q(
+    R.length > 0 && !W.disabled && /* @__PURE__ */ Q(
       "ul",
       {
-        ...ne(),
+        ...re(),
         id: "autocomplete-list",
         className: Z["autocomplete__dropdown-list"],
-        children: R.map((i, x) => {
-          const W = v({ option: i, index: x }), H = typeof i == "string" ? i : m ? m(i) : String(i[c || "label"]);
-          return /* @__PURE__ */ Q("li", { tabIndex: x, className: Z["autocomplete__dropdown-item"], ...W, children: H });
+        children: R.map((i, y) => {
+          const { key: E, ...l } = ne({
+            option: i,
+            index: y
+          }), T = typeof i == "string" ? i : m ? m(i) : String(i[c || "label"]);
+          return /* @__PURE__ */ Q(
+            "li",
+            {
+              tabIndex: y,
+              className: Z["autocomplete__dropdown-item"],
+              ...l,
+              children: T
+            },
+            E
+          );
         })
       }
     )

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

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: <T extends string | object>({ labelKey, valueKey, renderOption, customSelectedOptionLabel, options, type, value, onChange, onInputChange, classNameWrapper, "data-testid-wrapper": dataTestId, classNameInputWrapper, ...props }: import('./Autocomplete.tsx').AutocompleteProps<T>) => import("react/jsx-runtime").JSX.Element;
+    component: <T extends string | object>({ labelKey, valueKey, renderOption, customSelectedOptionLabel, options, type, value, onChange, onInputChange, classNameWrapper, "data-testid-wrapper": dataTestId, classNameInputWrapper, open, onOpen, onClose, ...props }: import('./Autocomplete.tsx').AutocompleteProps<T>) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {
         layout: string;
@@ -22,3 +22,4 @@ export declare const WithLeftIcon: Story;
 export declare const WithBothIcons: Story;
 export declare const WithInfoMessage: Story;
 export declare const WithErrorMessage: Story;
+export declare const HandleOpenCloseState: Story;

package/dist/components/TransactionRow/TransactionRow.js

@@ -1,49 +1,89 @@
-import { jsx as e, jsxs as c } from "react/jsx-runtime";
-import { Avatar as y } from "../Avatar/Avatar.js";
-import { Icon as f } from "../Icon/Icon.js";
-import { SkeletonCircle as _, Skeleton as r } from "../Skeleton/Skeleton.js";
+import { jsx as e, jsxs as s, Fragment as o } from "react/jsx-runtime";
+import { Avatar as _ } from "../Avatar/Avatar.js";
+import { Icon as y } from "../Icon/Icon.js";
+import { SkeletonCircle as f, Skeleton as r } from "../Skeleton/Skeleton.js";
 import { Typography as a } from "../Typography/Typography.js";
-import '../../assets/TransactionRow.css';const b = "_container_kdqr0_1", i = {
-  container: b,
-  "container-grid": "_container-grid_kdqr0_6",
-  "container-pending": "_container-pending_kdqr0_13",
-  "container-pending--right": "_container-pending--right_kdqr0_19",
-  "info-section": "_info-section_kdqr0_27",
-  "info-section--item": "_info-section--item_kdqr0_30",
-  "info-section--right": "_info-section--right_kdqr0_37"
-}, A = ({
-  dateTime: p,
-  category: s,
-  categoryType: l,
-  name: d,
+import '../../assets/TransactionRow.css';const k = "_container_sv3th_1", w = "_separator_sv3th_63", n = {
+  container: k,
+  "container-grid": "_container-grid_sv3th_6",
+  "container-pending": "_container-pending_sv3th_13",
+  "container-pending--right": "_container-pending--right_sv3th_19",
+  "info-section": "_info-section_sv3th_27",
+  "info-section--content": "_info-section--content_sv3th_31",
+  "info-section--item": "_info-section--item_sv3th_35",
+  "info-section--right": "_info-section--right_sv3th_52",
+  "truncate-text": "_truncate-text_sv3th_56",
+  separator: w
+}, D = ({
+  dateTime: g,
+  category: l,
+  categoryType: d,
+  name: h,
   type: N,
-  installments: h,
-  amount: v,
-  month: g,
-  icon: m,
-  onClick: o,
-  isPendingTransaction: k,
-  isLoading: t = !1,
-  "data-testid": n = "Description"
-}) => k ? /* @__PURE__ */ e("div", { className: i.container, children: /* @__PURE__ */ c("div", { className: i["container-pending"], onClick: () => o == null ? void 0 : o(), children: [
-  t ? /* @__PURE__ */ e(_, { size: "32px", "data-testid": `${n}-skeletonIcon` }) : /* @__PURE__ */ e(y, { type: "icon", children: /* @__PURE__ */ e(f, { icon: m || "clock" }) }),
-  /* @__PURE__ */ e("div", { className: i["info-section"], children: /* @__PURE__ */ e("div", { className: i["info-section--item"], children: t ? /* @__PURE__ */ e(r, { style: { width: 140 }, "data-testid": `${n}-skeletonName` }) : /* @__PURE__ */ e(a, { color: "var(--gray-95)", variant: "base", children: d }) }) }),
-  /* @__PURE__ */ e("div", { className: i["container-pending--right"], children: t ? /* @__PURE__ */ e(r, { style: { width: 70 }, "data-testid": `${n}-skeletonAmount` }) : /* @__PURE__ */ e(a, { bold: !0, color: "var(--gray-95)", variant: "base", children: v }) })
-] }) }) : /* @__PURE__ */ e("div", { className: i.container, children: /* @__PURE__ */ c("div", { onClick: () => o == null ? void 0 : o(), className: i["container-grid"], children: [
-  /* @__PURE__ */ e("div", { children: t ? /* @__PURE__ */ e(r, { style: { width: 50 }, "data-testid": `${n}-skeletonMonth` }) : /* @__PURE__ */ e(a, { color: "var(--gray-95)", variant: "base", children: g }) }),
-  /* @__PURE__ */ e("div", { children: t ? /* @__PURE__ */ e(r, { style: { width: 90 }, "data-testid": `${n}-skeletonDate` }) : /* @__PURE__ */ e(a, { color: "var(--gray-95)", variant: "base", children: p }) }),
-  t ? /* @__PURE__ */ e(_, { size: "32px", "data-testid": `${n}-skeletonIcon` }) : /* @__PURE__ */ e(y, { type: "icon", children: /* @__PURE__ */ e(f, { icon: m || "coin" }) }),
-  /* @__PURE__ */ c("div", { className: i["info-section"], children: [
-    /* @__PURE__ */ e("div", { className: i["info-section--item"], children: t ? /* @__PURE__ */ e(r, { style: { width: 70 }, "data-testid": `${n}-skeletonName` }) : /* @__PURE__ */ e(a, { color: "var(--gray-95)", variant: "base", children: d }) }),
-    s && /* @__PURE__ */ e("div", { className: i["info-section--item"], children: t ? /* @__PURE__ */ e(r, { style: { width: 70 }, "data-testid": `${n}-skeletonCategory` }) : /* @__PURE__ */ e(a, { color: "var(--gray-95)", variant: "base", children: s }) }),
-    l && /* @__PURE__ */ e("div", { className: i["info-section--item"], children: t ? /* @__PURE__ */ e(r, { style: { width: 70 }, "data-testid": `${n}-skeletonCategoryType` }) : /* @__PURE__ */ e(a, { color: "var(--gray-95)", variant: "base", children: l }) })
+  installments: v,
+  amount: m,
+  month: $,
+  icon: p,
+  onClick: c,
+  isPendingTransaction: b,
+  isLoading: i = !1,
+  "data-testid": t = "Description"
+}) => b ? /* @__PURE__ */ e("div", { className: n.container, children: /* @__PURE__ */ s("div", { className: n["container-pending"], onClick: () => c == null ? void 0 : c(), children: [
+  i ? /* @__PURE__ */ e(f, { size: "32px", "data-testid": `${t}-skeletonIcon` }) : /* @__PURE__ */ e(_, { type: "icon", children: /* @__PURE__ */ e(y, { icon: p || "clock" }) }),
+  /* @__PURE__ */ e("div", { className: n["info-section"], children: /* @__PURE__ */ e("div", { className: n["info-section--item"], children: i ? /* @__PURE__ */ e(r, { style: { width: 140 }, "data-testid": `${t}-skeletonName` }) : /* @__PURE__ */ e(a, { color: "var(--gray-95)", variant: "base", "data-testid": `${t}-content`, children: h }) }) }),
+  /* @__PURE__ */ e("div", { className: n["container-pending--right"], children: i ? /* @__PURE__ */ e(r, { style: { width: 70 }, "data-testid": `${t}-skeletonAmount` }) : /* @__PURE__ */ e(a, { bold: !0, color: "var(--gray-95)", variant: "base", children: m }) })
+] }) }) : /* @__PURE__ */ e("div", { className: n.container, children: /* @__PURE__ */ s("div", { onClick: () => c == null ? void 0 : c(), className: n["container-grid"], children: [
+  /* @__PURE__ */ e("div", { children: i ? /* @__PURE__ */ e(r, { style: { width: 50 }, "data-testid": `${t}-skeletonMonth` }) : /* @__PURE__ */ e(a, { color: "var(--gray-95)", variant: "base", children: $ }) }),
+  /* @__PURE__ */ e("div", { children: i ? /* @__PURE__ */ e(r, { style: { width: 90 }, "data-testid": `${t}-skeletonDate` }) : /* @__PURE__ */ e(a, { color: "var(--gray-95)", variant: "base", children: g }) }),
+  i ? /* @__PURE__ */ e(f, { size: "32px", "data-testid": `${t}-skeletonIcon` }) : /* @__PURE__ */ e(_, { type: "icon", children: /* @__PURE__ */ e(y, { icon: p || "coin" }) }),
+  /* @__PURE__ */ e("div", { className: n["info-section"], children: /* @__PURE__ */ e("div", { className: n["info-section--content"], children: i ? /* @__PURE__ */ s(o, { children: [
+    /* @__PURE__ */ e(
+      r,
+      {
+        style: { width: 70, display: "inline-block", marginLeft: "8px" },
+        "data-testid": `${t}-skeletonName`
+      }
+    ),
+    /* @__PURE__ */ e(
+      r,
+      {
+        style: { width: 70, display: "inline-block", marginLeft: "8px" },
+        "data-testid": `${t}-skeletonCategory`
+      }
+    ),
+    /* @__PURE__ */ e(
+      r,
+      {
+        style: { width: 70, display: "inline-block", marginLeft: "8px" },
+        "data-testid": `${t}-skeletonCategoryType`
+      }
+    )
+  ] }) : /* @__PURE__ */ s(
+    a,
+    {
+      color: "var(--gray-95)",
+      variant: "base",
+      className: n["truncate-text"],
+      "data-testid": `${t}-content`,
+      children: [
+        /* @__PURE__ */ e("span", { "data-testid": `${t}-name`, children: h }),
+        l && /* @__PURE__ */ s(o, { children: [
+          /* @__PURE__ */ e("span", { className: n.separator }),
+          /* @__PURE__ */ e("span", { "data-testid": `${t}-category`, children: l })
+        ] }),
+        d && /* @__PURE__ */ s(o, { children: [
+          /* @__PURE__ */ e("span", { className: n.separator }),
+          /* @__PURE__ */ e("span", { "data-testid": `${t}-categoryType`, children: d })
+        ] })
+      ]
+    }
+  ) }) }),
+  /* @__PURE__ */ s("div", { className: n["info-section--right"], children: [
+    v && /* @__PURE__ */ e("div", { className: n["info-section--item"], children: i ? /* @__PURE__ */ e(r, { style: { width: 70 }, "data-testid": `${t}-skeletonInstallments` }) : /* @__PURE__ */ e(a, { color: "var(--gray-95)", variant: "base", children: v }) }),
+    /* @__PURE__ */ e("div", { className: n["info-section--item"], children: i ? /* @__PURE__ */ e(r, { style: { width: 70 }, "data-testid": `${t}-skeletonType` }) : /* @__PURE__ */ e(a, { color: "var(--gray-95)", variant: "base", children: N }) })
   ] }),
-  /* @__PURE__ */ c("div", { className: i["info-section--right"], children: [
-    h && /* @__PURE__ */ e("div", { className: i["info-section--item"], children: t ? /* @__PURE__ */ e(r, { style: { width: 70 }, "data-testid": `${n}-skeletonInstallments` }) : /* @__PURE__ */ e(a, { color: "var(--gray-95)", variant: "base", children: h }) }),
-    /* @__PURE__ */ e("div", { className: i["info-section--item"], children: t ? /* @__PURE__ */ e(r, { style: { width: 70 }, "data-testid": `${n}-skeletonType` }) : /* @__PURE__ */ e(a, { color: "var(--gray-95)", variant: "base", children: N }) })
-  ] }),
-  /* @__PURE__ */ e("div", { className: i["info-section--right"], children: t ? /* @__PURE__ */ e(r, { style: { width: 140 }, "data-testid": `${n}-skeletonAmount` }) : /* @__PURE__ */ e(a, { bold: !0, variant: "base", children: v }) })
+  /* @__PURE__ */ e("div", { className: n["info-section--right"], children: i ? /* @__PURE__ */ e(r, { style: { width: 140 }, "data-testid": `${t}-skeletonAmount` }) : /* @__PURE__ */ e(a, { bold: !0, variant: "base", children: m }) })
 ] }) });
 export {
-  A as TransactionRow
+  D as TransactionRow
 };

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

@@ -33,3 +33,4 @@ export declare const WithTwoCurrencies: Story;
 export declare const WithLargeAmount: Story;
 export declare const IsPending: Story;
 export declare const IsPendingLoading: Story;
+export declare const LongTitleAndCategory: Story;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pismo/marola",
   "description": "CDX tribe component library",
-  "version": "2.1.14",
+  "version": "2.1.16",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",