@pismo/marola 2.1.55 → 2.1.57

package/dist/assets/TransactionRow.css

@@ -1 +1 @@
-._container_1wc4o_1{width:100%;height:56px;border-top:1px solid var(--border-secondary)}._container-grid_1wc4o_6{display:grid;grid-template-columns:1fr 1.5fr .5fr 4.5fr 2.5fr 2fr;align-items:center;justify-content:space-between;padding:12px 16px}._container-pending_1wc4o_13{display:flex;align-items:center;justify-content:flex-start;padding:12px 16px}._container-pending--right_1wc4o_19{margin-left:auto}._container_1wc4o_1 :hover{cursor:pointer;background-color:var(--border-secondary)}._info-section_1wc4o_27,._info-section--content_1wc4o_31{width:100%;overflow:hidden}._info-section--item_1wc4o_35{display:inline-flex;flex-shrink:0;padding-left:8px}._info-section--item_1wc4o_35:not(:last-child){flex-shrink:0}._info-section--item_1wc4o_35:last-child{flex-shrink:1;min-width:0;overflow:hidden}._info-section--item_1wc4o_35:not(:first-child){margin-left:8px;border-left:1px solid var(--border-secondary)}._info-section--right_1wc4o_52{display:flex;justify-content:flex-end}._info-section_1wc4o_27 ._truncate-text_1wc4o_56{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._info-section_1wc4o_27 ._separator_1wc4o_63{display:inline-block;width:1px;height:16px;margin:0 8px;vertical-align:middle;background-color:var(--border-secondary)}
+._container_1a6p1_1{width:100%;min-height:56px;border-top:1px solid var(--border-secondary)}._container__grid_1a6p1_6{display:grid;grid-template-columns:1fr 1.5fr .5fr 4.5fr 2.5fr 2fr;align-items:center;justify-content:space-between;height:56px;padding:12px 16px}._container--pending_1a6p1_14{display:flex;align-items:center;justify-content:flex-start;height:66px;padding:12px 16px}._container__pending-right_1a6p1_21{margin-left:auto}._container--two-line_1a6p1_24{display:flex;gap:1rem;align-items:center;justify-content:space-between;min-height:72px;padding:16px}._container_1a6p1_1 :hover{cursor:pointer;background-color:var(--border-secondary)}._container__icon-wrapper_1a6p1_36{position:relative;display:inline-block}._container__pending-indicator_1a6p1_40{position:absolute;right:-6px;bottom:-6px;display:flex;align-items:center;justify-content:center;width:18px;height:18px;pointer-events:none;background-color:var(--colors-brand-primary-color-primary-bg);border-radius:50%}._container__two-line-content_1a6p1_53{display:flex;flex-direction:column;flex-grow:1;gap:0;min-width:0}._container__two-line-primary_1a6p1_60{font-weight:600;color:var(--gray-95)}._container__two-line-secondary_1a6p1_64{font-size:.875rem;color:var(--gray-75)}._container__two-line-right_1a6p1_68{display:flex;flex-direction:column;flex-shrink:0;gap:.25rem;align-items:flex-end;margin-left:auto}._container__two-line-right-primary_1a6p1_76{font-weight:600;color:var(--gray-95)}._container__two-line-right-secondary_1a6p1_80{font-size:.875rem;color:var(--gray-75)}._container__info-section_1a6p1_84,._container__info-section--content_1a6p1_88{width:100%;overflow:hidden}._container__info-section--item_1a6p1_92{display:inline-flex;flex-shrink:0;padding-left:8px}._container__info-section--item_1a6p1_92:not(:last-child){flex-shrink:0}._container__info-section--item_1a6p1_92:last-child{flex-shrink:1;min-width:0;overflow:hidden}._container__info-section--item_1a6p1_92:not(:first-child){margin-left:8px;border-left:1px solid var(--border-secondary)}._container__info-section--right_1a6p1_109{display:flex;justify-content:flex-end}._container__truncate-text_1a6p1_113{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._container__separator_1a6p1_120{display:inline-block;width:1px;height:16px;margin:0 8px;vertical-align:middle;background-color:var(--border-secondary)}

package/dist/components/Input/Input.js

@@ -1,59 +1,59 @@
-import { jsxs as D, jsx as M } from "react/jsx-runtime";
+import { jsxs as M, jsx as H } from "react/jsx-runtime";
 import * as E from "react";
-import { forwardRef as xe, useState as we, useId as Ne, useMemo as ue } from "react";
-import { formatDecimalValue as me, allowOnlyIntegerNumbers as Ce, allowOnlyNumbers as ve, parseToInteger as Pe } from "../../utils/inputNumberAsText.js";
+import { forwardRef as xe, useState as we, useId as Ne, useRef as Ce, useMemo as ue } from "react";
+import { formatDecimalValue as me, allowOnlyIntegerNumbers as ve, allowOnlyNumbers as Pe, parseToInteger as Re } from "../../utils/inputNumberAsText.js";
 import { c as U } from "../../clsx-OuTLNxxd.js";
-import { Icon as Re } from "../Icon/Icon.js";
+import { Icon as Ee } from "../Icon/Icon.js";
 import { Typography as se } from "../Typography/Typography.js";
-import { g as Ee, a as Ve, u as Fe, f as de, _ as w, b as Se, c as _e, i as Oe, d as Te, e as Ie, P as n } from "../../useSlotProps-CYHDC4TN.js";
-import '../../assets/Input.css';function Be(r) {
+import { g as Ve, a as Fe, u as Se, f as de, _ as w, b as Oe, c as _e, i as Te, d as Ie, e as Be, P as n } from "../../useSlotProps-CYHDC4TN.js";
+import '../../assets/Input.css';function Ue(r) {
   let u = "https://mui.com/production-error/?code=" + r;
   for (let _ = 1; _ < arguments.length; _ += 1)
     u += "&args[]=" + encodeURIComponent(arguments[_]);
   return "Minified MUI error #" + r + "; visit " + u + " for the full message.";
 }
 const be = "Input";
-function Ue(r) {
-  return Ee(be, r);
+function je(r) {
+  return Ve(be, r);
 }
-Ve(be, ["root", "formControl", "focused", "disabled", "error", "multiline", "input", "inputMultiline", "inputTypeSearch", "adornedStart", "adornedEnd"]);
+Fe(be, ["root", "formControl", "focused", "disabled", "error", "multiline", "input", "inputMultiline", "inputTypeSearch", "adornedStart", "adornedEnd"]);
 const ge = /* @__PURE__ */ E.createContext(void 0);
 process.env.NODE_ENV !== "production" && (ge.displayName = "FormControlContext");
-function je() {
+function Ae() {
   return E.useContext(ge);
 }
-function Ae(r = {}) {
+function ke(r = {}) {
   const {
     defaultValue: u,
     disabled: _ = !1,
     error: p = !1,
     onBlur: b,
-    onChange: g,
+    onChange: h,
     onFocus: V,
     required: F = !1,
     value: f,
     inputRef: S
-  } = r, o = je();
-  let h, s, N, y, C;
+  } = r, o = Ae();
+  let y, s, N, x, C;
   if (o) {
-    var j, i, O;
-    if (h = void 0, s = (j = o.disabled) != null ? j : !1, N = (i = o.error) != null ? i : !1, y = (O = o.required) != null ? O : !1, C = o.value, process.env.NODE_ENV !== "production") {
+    var j, i, v;
+    if (y = void 0, s = (j = o.disabled) != null ? j : !1, N = (i = o.error) != null ? i : !1, x = (v = o.required) != null ? v : !1, C = o.value, process.env.NODE_ENV !== "production") {
       const e = ["defaultValue", "disabled", "error", "required", "value"].filter((a) => r[a] !== void 0);
       e.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: ${e.join(", ")}`].join(`
 `));
     }
   } else
-    h = u, s = _, N = p, y = F, C = f;
+    y = u, s = _, N = p, x = F, C = f;
   const {
-    current: H
-  } = E.useRef(C != null), K = E.useCallback((e) => {
+    current: K
+  } = E.useRef(C != null), q = E.useCallback((e) => {
     process.env.NODE_ENV !== "production" && e && e.nodeName !== "INPUT" && !e.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(`
 `));
-  }, []), R = E.useRef(null), A = Fe(R, S, K), [T, I] = E.useState(!1);
+  }, []), R = E.useRef(null), A = Se(R, S, q), [O, T] = E.useState(!1);
   E.useEffect(() => {
-    !o && s && T && (I(!1), b == null || b());
-  }, [o, s, T, b]);
-  const q = (e) => (a) => {
+    !o && s && O && (T(!1), b == null || b());
+  }, [o, s, O, b]);
+  const D = (e) => (a) => {
     var l;
     if (o != null && o.disabled) {
       a.stopPropagation();
@@ -63,15 +63,15 @@ function Ae(r = {}) {
       var d;
       o == null || (d = o.onFocus) == null || d.call(o);
     } else
-      I(!0);
+      T(!0);
   }, $ = (e) => (a) => {
     var l;
-    (l = e.onBlur) == null || l.call(e, a), o && o.onBlur ? o.onBlur() : I(!1);
+    (l = e.onBlur) == null || l.call(e, a), o && o.onBlur ? o.onBlur() : T(!1);
   }, Y = (e) => (a, ...l) => {
-    var d, B;
-    if (!H && (a.target || R.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." : Be(17));
-    o == null || (d = o.onChange) == null || d.call(o, a), (B = e.onChange) == null || B.call(e, a, ...l);
+    var d, I;
+    if (!K && (a.target || R.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." : Ue(17));
+    o == null || (d = o.onChange) == null || d.call(o, a), (I = e.onChange) == null || I.call(e, a, ...l);
   }, L = (e) => (a) => {
     var l;
     R.current && a.currentTarget === a.target && R.current.focus(), (l = e.onClick) == null || l.call(e, a);
@@ -79,23 +79,23 @@ function Ae(r = {}) {
   return {
     disabled: s,
     error: N,
-    focused: T,
+    focused: O,
     formControlContext: o,
     getInputProps: (e = {}) => {
       const l = w({}, {
         onBlur: b,
-        onChange: g,
+        onChange: h,
         onFocus: V
       }, de(e)), d = w({}, l, {
         onBlur: $(l),
         onChange: Y(l),
-        onFocus: q(l)
+        onFocus: D(l)
       });
       return w({}, d, {
         "aria-invalid": N || void 0,
-        defaultValue: h,
+        defaultValue: y,
         value: C,
-        required: y,
+        required: x,
         disabled: s
       }, e, {
         ref: A
@@ -108,82 +108,82 @@ function Ae(r = {}) {
       });
     },
     inputRef: A,
-    required: y,
+    required: x,
     value: C
   };
 }
-const ke = ["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"], De = (r) => {
+const Me = ["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"], He = (r) => {
   const {
     disabled: u,
     error: _,
     focused: p,
     formControlContext: b,
-    multiline: g,
+    multiline: h,
     startAdornment: V,
     endAdornment: F
   } = r;
-  return Te({
-    root: ["root", u && "disabled", _ && "error", p && "focused", !!b && "formControl", g && "multiline", !!V && "adornedStart", !!F && "adornedEnd"],
-    input: ["input", u && "disabled", g && "multiline"]
-  }, Ie(Ue));
+  return Ie({
+    root: ["root", u && "disabled", _ && "error", p && "focused", !!b && "formControl", h && "multiline", !!V && "adornedStart", !!F && "adornedEnd"],
+    input: ["input", u && "disabled", h && "multiline"]
+  }, Be(je));
 }, he = /* @__PURE__ */ E.forwardRef(function(u, _) {
-  var p, b, g;
+  var p, b, h;
   const {
     "aria-describedby": V,
     "aria-label": F,
     "aria-labelledby": f,
     autoComplete: S,
     autoFocus: o,
-    className: h,
+    className: y,
     defaultValue: s,
     disabled: N,
-    endAdornment: y,
+    endAdornment: x,
     error: C,
     id: j,
     multiline: i = !1,
-    name: O,
-    onClick: H,
-    onChange: K,
+    name: v,
+    onClick: K,
+    onChange: q,
     onKeyDown: R,
     onKeyUp: A,
-    onFocus: T,
-    onBlur: I,
-    placeholder: q,
+    onFocus: O,
+    onBlur: T,
+    placeholder: D,
     readOnly: $,
     required: Y,
     startAdornment: L,
-    value: X,
+    value: Z,
     type: W,
     rows: e,
     slotProps: a = {},
     slots: l = {},
     minRows: d,
-    maxRows: B
-  } = u, z = Se(u, ke), {
+    maxRows: I
+  } = u, z = Oe(u, Me), {
     getRootProps: G,
-    getInputProps: le,
-    focused: Z,
-    formControlContext: ae,
+    getInputProps: J,
+    focused: ae,
+    formControlContext: ee,
     error: re,
     disabled: ie
-  } = Ae({
+  } = ke({
     disabled: N,
     defaultValue: s,
     error: C,
-    onBlur: I,
-    onClick: H,
-    onChange: K,
-    onFocus: T,
+    onBlur: T,
+    onClick: K,
+    onChange: q,
+    onFocus: O,
     required: Y,
-    value: X
-  }), ee = i ? void 0 : W ?? "text", J = w({}, u, {
+    value: Z
+  }), ne = i ? void 0 : W ?? "text", Q = w({}, u, {
     disabled: ie,
     error: re,
-    focused: Z,
-    formControlContext: ae,
+    focused: ae,
+    formControlContext: ee,
     multiline: i,
-    type: ee
-  }), Q = De(J), ne = {
+    type: ne
+  }), te = He(Q), oe = {
     "aria-describedby": V,
     "aria-label": F,
     "aria-labelledby": f,
@@ -192,35 +192,35 @@ const ke = ["aria-describedby", "aria-label", "aria-labelledby", "autoComplete",
     id: j,
     onKeyDown: R,
     onKeyUp: A,
-    name: O,
-    placeholder: q,
+    name: v,
+    placeholder: D,
     readOnly: $,
-    type: ee
-  }, t = (p = l.root) != null ? p : "div", x = _e({
-    elementType: t,
+    type: ne
+  }, X = (p = l.root) != null ? p : "div", t = _e({
+    elementType: X,
     getSlotProps: G,
     externalSlotProps: a.root,
     externalForwardedProps: z,
     additionalProps: {
       ref: _
     },
-    ownerState: J,
-    className: [Q.root, h]
-  }), v = i ? (b = l.textarea) != null ? b : "textarea" : (g = l.input) != null ? g : "input", P = _e({
-    elementType: v,
-    getSlotProps: (te) => le(w({}, ne, te)),
+    ownerState: Q,
+    className: [te.root, y]
+  }), g = i ? (b = l.textarea) != null ? b : "textarea" : (h = l.input) != null ? h : "input", B = _e({
+    elementType: g,
+    getSlotProps: (P) => J(w({}, oe, P)),
     externalSlotProps: a.input,
     additionalProps: w({
       rows: i ? e : void 0
-    }, i && !Oe(v) && {
+    }, i && !Te(g) && {
       minRows: e || d,
-      maxRows: e || B
+      maxRows: e || I
     }),
-    ownerState: J,
-    className: Q.input
+    ownerState: Q,
+    className: te.input
   });
-  return process.env.NODE_ENV !== "production" && i && e && (d || B) && console.warn("MUI: You can not use the `minRows` or `maxRows` props when the input `rows` prop is set."), /* @__PURE__ */ D(t, w({}, x, {
-    children: [L, /* @__PURE__ */ M(v, w({}, P)), y]
+  return process.env.NODE_ENV !== "production" && i && e && (d || I) && console.warn("MUI: You can not use the `minRows` or `maxRows` props when the input `rows` prop is set."), /* @__PURE__ */ M(X, w({}, t, {
+    children: [L, /* @__PURE__ */ H(g, w({}, B)), x]
   }));
 });
 process.env.NODE_ENV !== "production" && (he.propTypes = {
@@ -373,11 +373,11 @@ process.env.NODE_ENV !== "production" && (he.propTypes = {
    */
   value: n.any
 });
-const Me = "_input_1cxiy_58", He = "_input__label_1cxiy_85", m = {
+const Ke = "_input_1cxiy_58", qe = "_input__label_1cxiy_85", m = {
   "input__input-el": "_input__input-el_1cxiy_58",
-  input: Me,
+  input: Ke,
   "input__messages-wrapper": "_input__messages-wrapper_1cxiy_82",
-  input__label: He,
+  input__label: qe,
   "input__input-el-wrapper": "_input__input-el-wrapper_1cxiy_90",
   "input__left-icon": "_input__left-icon_1cxiy_115",
   "input__right-icon": "_input__right-icon_1cxiy_115",
@@ -387,88 +387,88 @@ const Me = "_input_1cxiy_58", He = "_input__label_1cxiy_85", m = {
   "input--disabled": "_input--disabled_1cxiy_157",
   "input--focused": "_input--focused_1cxiy_163",
   "input--error": "_input--error_1cxiy_166"
-};
-let ce;
-const Ge = xe(
+}, Je = xe(
   ({
     label: r,
     infoMessage: u,
     error: _,
     errorMessage: p,
     leftIcon: b,
-    rightIcon: g,
+    rightIcon: h,
     id: V,
     disabled: F,
     type: f = "text",
     maxLength: S,
     allowLeadingZeros: o = !1,
-    isInteger: h,
+    isInteger: y,
     useCommaInDecimal: s,
     allowNegativeNumbers: N = !1,
-    decimalLength: y = 10,
+    decimalLength: x = 10,
     hideCharsCounter: C = !1,
     required: j,
     onChange: i,
-    triggerDelay: O,
-    classNameWrapper: H,
-    classNameLabel: K,
+    triggerDelay: v,
+    classNameWrapper: K,
+    classNameLabel: q,
     classNameInput: R,
     classNameInfoMessage: A,
-    classNameErrorMessage: T,
-    classNameCharsCounter: I,
-    "data-testid-wrapper": q,
+    classNameErrorMessage: O,
+    classNameCharsCounter: T,
+    "data-testid-wrapper": D,
     "data-testid-label": $,
     "data-testid-input": Y,
     "data-testid-infoMessage": L,
-    "data-testid-errorMessage": X,
+    "data-testid-errorMessage": Z,
     "data-testid-charsCounter": W,
     ...e
   }, a) => {
-    var Q, ne;
+    var oe, X;
     const [l, d] = we(
-      ((Q = e.value) == null ? void 0 : Q.length) || ((ne = e.defaultValue) == null ? void 0 : ne.length) || 0
-    ), B = Ne(), z = V || `input_${B}`;
+      ((oe = e.value) == null ? void 0 : oe.length) || ((X = e.defaultValue) == null ? void 0 : X.length) || 0
+    ), I = Ne(), z = V || `input_${I}`;
     Object.assign(e, { "data-testid": Y });
-    const G = S && !C, le = (t) => {
-      ce && clearTimeout(ce), ce = setTimeout(() => Z(t), O);
-    }, Z = (t) => {
-      var x, v, P, te;
+    const G = S && !C, J = Ce(), ae = (t) => {
+      J.current && clearTimeout(J.current), J.current = setTimeout(() => {
+        ee(t);
+      }, v);
+    }, ee = (t) => {
+      var g, B, P, ce;
       if (f === "number-as-text") {
-        let c = h ? Pe(t.target.value, o) : s ? t.target.value.replace(".", ",") : t.target.value.replace(",", ".");
-        if (!h && y > 0) {
+        let c = y ? Re(t.target.value, o) : s ? t.target.value.replace(".", ",") : t.target.value.replace(",", ".");
+        if (!y && x > 0) {
           const pe = String(c), [ye, fe] = pe.split(/,|\./);
-          pe !== "" && fe && (c = [ye, fe.slice(0, y)].join(s ? "," : "."));
+          pe !== "" && fe && (c = [ye, fe.slice(0, x)].join(s ? "," : "."));
         }
         t.target.value = String(c);
-        const oe = !isNaN(Number(String(c).replace(",", "."))), k = String(c).length ? String(c).replace(",", ".") : "";
+        const le = !isNaN(Number(String(c).replace(",", "."))), k = String(c).length ? String(c).replace(",", ".") : "";
         i == null || i({
           ...t,
           target: {
             ...t.target,
             value: k,
-            valueAsNumber: oe && String(c).length ? Number(String(c).replace(",", ".")) : NaN
+            valueAsNumber: le && String(c).length ? Number(String(c).replace(",", ".")) : NaN
           }
-        }), G && d((v = (x = t == null ? void 0 : t.target) == null ? void 0 : x.value) == null ? void 0 : v.length);
+        }), G && d((B = (g = t == null ? void 0 : t.target) == null ? void 0 : g.value) == null ? void 0 : B.length);
         return;
       }
       if (f === "number") {
         let c = String(t.target.value);
-        const [oe, k] = c.split(".");
-        c !== "" && (k != null && k.length ? c = [Number(oe), k.slice(0, y)].join(".") : c = String(Number(oe))), t.target.value = c;
+        const [le, k] = c.split(".");
+        c !== "" && (k != null && k.length ? c = [Number(le), k.slice(0, x)].join(".") : c = String(Number(le))), t.target.value = c;
       }
-      G && d((te = (P = t == null ? void 0 : t.target) == null ? void 0 : P.value) == null ? void 0 : te.length), i && i(t);
-    }, ae = (t) => {
-      var x;
-      f === "number-as-text" && (h ? Ce(t, N) : ve(t, N)), (x = e == null ? void 0 : e.onKeyDown) == null || x.call(e, t);
+      G && d((ce = (P = t == null ? void 0 : t.target) == null ? void 0 : P.value) == null ? void 0 : ce.length), i && i(t);
     }, re = (t) => {
-      var x;
+      var g;
+      f === "number-as-text" && (y ? ve(t, N) : Pe(t, N)), (g = e == null ? void 0 : e.onKeyDown) == null || g.call(e, t);
+    }, ie = (t) => {
+      var g;
       if (f === "number-as-text" && t.target.value.length) {
-        const v = h ? t.target.value.replace(/(,\.)/gi, "") : t.target.value.replace(",", ".");
-        let P = String(o ? v : Number(v));
+        const B = y ? t.target.value.replace(/(,\.)/gi, "") : t.target.value.replace(",", ".");
+        let P = String(o ? B : Number(B));
         isNaN(Number(P)) && (P = ""), t.target.value = s ? P.replace(".", ",") : P;
       }
-      (x = e == null ? void 0 : e.onBlur) == null || x.call(e, t);
-    }, ie = ue(() => e.multiline !== !0 ? {
+      (g = e == null ? void 0 : e.onBlur) == null || g.call(e, t);
+    }, ne = ue(() => e.multiline !== !0 ? {
       type: f === "number-as-text" ? "text" : f,
       multiline: e.multiline
     } : {
@@ -477,23 +477,29 @@ const Ge = xe(
       rows: (e == null ? void 0 : e.rows) || 5,
       minRows: e == null ? void 0 : e.minRows,
       maxRows: e == null ? void 0 : e.maxRows
-    }, [e]), ee = ue(() => f === "number-as-text" && (e != null && e.defaultValue) ? me(e == null ? void 0 : e.defaultValue, s) : e == null ? void 0 : e.defaultValue, [e.defaultValue]), J = ue(() => f === "number-as-text" && (e != null && e.value) ? me(e == null ? void 0 : e.value, s) : e == null ? void 0 : e.value, [e.value]);
-    return /* @__PURE__ */ D("div", { className: U(m.input, H), "data-testid": q, children: [
-      r && /* @__PURE__ */ D(
+    }, [e]), Q = ue(() => {
+      const t = v ? (e == null ? void 0 : e.value) ?? (e == null ? void 0 : e.defaultValue) : e == null ? void 0 : e.defaultValue;
+      return f === "number-as-text" && t ? me(t, s) : t;
+    }, [e.defaultValue]), te = ue(() => {
+      if (!v)
+        return f === "number-as-text" && (e != null && e.value) ? me(e == null ? void 0 : e.value, s) : e == null ? void 0 : e.value;
+    }, [e.value]);
+    return /* @__PURE__ */ M("div", { className: U(m.input, K), "data-testid": D, children: [
+      r && /* @__PURE__ */ M(
         se,
         {
           bold: !0,
           element: "label",
           elementProps: { htmlFor: z },
-          className: U(m.input__label, K),
+          className: U(m.input__label, q),
           "data-testid": $,
           children: [
             r,
-            j && /* @__PURE__ */ M("span", { children: "*" })
+            j && /* @__PURE__ */ H("span", { children: "*" })
           ]
         }
       ),
-      /* @__PURE__ */ M(
+      /* @__PURE__ */ H(
         he,
         {
           id: z,
@@ -512,35 +518,35 @@ const Ge = xe(
               ref: a,
               className: U(m["input__input-el"], R),
               maxLength: S,
-              onChange: O ? le : Z,
+              onChange: v ? ae : ee,
               ...e,
-              onKeyDown: ae,
-              onBlur: re,
-              defaultValue: ee,
-              value: J
+              onKeyDown: re,
+              onBlur: ie,
+              defaultValue: Q,
+              value: te
             }
           },
-          startAdornment: b && /* @__PURE__ */ M("span", { className: m["input__left-icon"], children: b }),
-          endAdornment: g && /* @__PURE__ */ M("span", { className: m["input__right-icon"], children: g }),
-          ...ie
+          startAdornment: b && /* @__PURE__ */ H("span", { className: m["input__left-icon"], children: b }),
+          endAdornment: h && /* @__PURE__ */ H("span", { className: m["input__right-icon"], children: h }),
+          ...ne
         }
       ),
-      /* @__PURE__ */ D("div", { className: m["input__messages-wrapper"], children: [
-        (p || u) && /* @__PURE__ */ D(
+      /* @__PURE__ */ M("div", { className: m["input__messages-wrapper"], children: [
+        (p || u) && /* @__PURE__ */ M(
           se,
           {
-            className: p ? U(m["input__error-message"], T) : U(m["input__info-message"], A),
-            "data-testid": p ? X : L,
+            className: p ? U(m["input__error-message"], O) : U(m["input__info-message"], A),
+            "data-testid": p ? Z : L,
             children: [
-              /* @__PURE__ */ M(Re, { icon: p ? "circle-exclamation" : "circle-info" }),
+              /* @__PURE__ */ H(Ee, { icon: p ? "circle-exclamation" : "circle-info" }),
               p || u
             ]
           }
         ),
-        G && /* @__PURE__ */ D(
+        G && /* @__PURE__ */ M(
           se,
           {
-            className: U(m["input__chars-counter"], I),
+            className: U(m["input__chars-counter"], T),
             "data-testid": W,
             children: [
               l,
@@ -554,5 +560,5 @@ const Ge = xe(
   }
 );
 export {
-  Ge as Input
+  Je as Input
 };

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

@@ -4,15 +4,22 @@ type TransactionRowProps = {
     month?: React.ReactNode;
     category?: React.ReactNode;
     categoryType?: React.ReactNode;
-    name: React.ReactNode;
+    name?: React.ReactNode;
     type?: React.ReactNode;
     icon?: IconName;
-    amount: React.ReactNode;
+    amount?: React.ReactNode;
     installments?: React.ReactNode;
     onClick?: () => void;
-    isPendingTransaction?: boolean;
     isLoading?: boolean;
     'data-testid'?: string;
+    isPendingTransaction?: boolean;
+    variant?: 'default' | 'two-line';
+    primaryContent?: React.ReactNode;
+    secondaryContent?: React.ReactNode;
+    rightPrimaryContent?: React.ReactNode;
+    rightSecondaryContent?: React.ReactNode;
+    colorVariant?: 'danger' | 'success' | 'primary';
+    pendingItem?: boolean;
 };
-export declare const TransactionRow: ({ dateTime, category, categoryType, name, type, installments, amount, month, icon, onClick, isPendingTransaction, isLoading, "data-testid": dataTestId, }: TransactionRowProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TransactionRow: ({ dateTime, category, categoryType, name, type, installments, amount, month, icon, onClick, pendingItem, isLoading, isPendingTransaction, "data-testid": dataTestId, variant, primaryContent, secondaryContent, rightPrimaryContent, rightSecondaryContent, colorVariant, }: TransactionRowProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/TransactionRow/TransactionRow.js

@@ -1,89 +1,170 @@
-import { jsx as e, jsxs as c, Fragment as s } 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_1wc4o_1", k = "_separator_1wc4o_63", n = {
-  container: b,
-  "container-grid": "_container-grid_1wc4o_6",
-  "container-pending": "_container-pending_1wc4o_13",
-  "container-pending--right": "_container-pending--right_1wc4o_19",
-  "info-section": "_info-section_1wc4o_27",
-  "info-section--content": "_info-section--content_1wc4o_31",
-  "info-section--item": "_info-section--item_1wc4o_35",
-  "info-section--right": "_info-section--right_1wc4o_52",
-  "truncate-text": "_truncate-text_1wc4o_56",
-  separator: k
-}, D = ({
-  dateTime: g,
-  category: l,
-  categoryType: d,
-  name: h,
-  type: w,
-  installments: m,
-  amount: p,
-  month: N,
-  icon: v,
-  onClick: o,
-  isPendingTransaction: $,
-  isLoading: i = !1,
-  "data-testid": t = "Description"
-}) => $ ? /* @__PURE__ */ e("div", { className: n.container, children: /* @__PURE__ */ c("div", { className: n["container-pending"], onClick: () => o == null ? void 0 : o(), children: [
-  i ? /* @__PURE__ */ e(f, { size: "32px", "data-testid": `${t}-skeletonIcon` }) : /* @__PURE__ */ e(_, { type: "icon", children: /* @__PURE__ */ e(y, { icon: v || "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: p }) })
-] }) }) : /* @__PURE__ */ e("div", { className: n.container, children: /* @__PURE__ */ c("div", { onClick: () => o == null ? void 0 : o(), 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: N }) }),
-  /* @__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: v || "coin" }) }),
-  /* @__PURE__ */ e("div", { className: n["info-section"], children: /* @__PURE__ */ e("div", { className: n["info-section--content"], children: i ? /* @__PURE__ */ c(s, { 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,
+import { jsx as e, jsxs as i, Fragment as _ } from "react/jsx-runtime";
+import { Avatar as y } from "../Avatar/Avatar.js";
+import { Icon as d } from "../Icon/Icon.js";
+import { SkeletonCircle as w, Skeleton as a } from "../Skeleton/Skeleton.js";
+import { Typography as o } from "../Typography/Typography.js";
+import '../../assets/TransactionRow.css';const F = "_container_1a6p1_1", M = "_container__grid_1a6p1_6", R = "_container__separator_1a6p1_120", n = {
+  container: F,
+  container__grid: M,
+  "container--pending": "_container--pending_1a6p1_14",
+  "container__pending-right": "_container__pending-right_1a6p1_21",
+  "container--two-line": "_container--two-line_1a6p1_24",
+  "container__icon-wrapper": "_container__icon-wrapper_1a6p1_36",
+  "container__pending-indicator": "_container__pending-indicator_1a6p1_40",
+  "container__two-line-content": "_container__two-line-content_1a6p1_53",
+  "container__two-line-primary": "_container__two-line-primary_1a6p1_60",
+  "container__two-line-secondary": "_container__two-line-secondary_1a6p1_64",
+  "container__two-line-right": "_container__two-line-right_1a6p1_68",
+  "container__two-line-right-primary": "_container__two-line-right-primary_1a6p1_76",
+  "container__two-line-right-secondary": "_container__two-line-right-secondary_1a6p1_80",
+  "container__info-section": "_container__info-section_1a6p1_84",
+  "container__info-section--content": "_container__info-section--content_1a6p1_88",
+  "container__info-section--item": "_container__info-section--item_1a6p1_92",
+  "container__info-section--right": "_container__info-section--right_1a6p1_109",
+  "container__truncate-text": "_container__truncate-text_1a6p1_113",
+  container__separator: R
+}, K = ({
+  dateTime: k,
+  category: g,
+  categoryType: f,
+  name: N,
+  type: z,
+  installments: l,
+  amount: $,
+  month: A,
+  icon: p,
+  onClick: c,
+  pendingItem: h = !1,
+  isLoading: t = !1,
+  isPendingTransaction: D = !1,
+  "data-testid": r = "Description",
+  variant: j = "default",
+  primaryContent: b,
+  secondaryContent: u,
+  rightPrimaryContent: m,
+  rightSecondaryContent: v,
+  colorVariant: x
+}) => {
+  const s = (() => {
+    if (!x) return "var(--gray-95)";
+    switch (x) {
+      case "danger":
+        return "var(--colors-brand-error-color-error-active)";
+      case "success":
+        return "var(--colors-brand-success-color-success-active)";
+      case "primary":
+        return "var(--colors-brand-primary-color-primary-text)";
+      default:
+        return;
+    }
+  })();
+  return j === "two-line" ? /* @__PURE__ */ e("div", { className: n.container, onClick: () => c == null ? void 0 : c(), children: /* @__PURE__ */ i("div", { className: n["container--two-line"], children: [
+    t ? /* @__PURE__ */ e(w, { size: "32px", "data-testid": `${r}-skeletonIcon` }) : /* @__PURE__ */ i("div", { className: n["container__icon-wrapper"], children: [
+      /* @__PURE__ */ e(y, { type: "icon", children: /* @__PURE__ */ e(d, { icon: p || "coin", color: s }) }),
+      h && /* @__PURE__ */ e("div", { className: n["container__pending-indicator"], children: /* @__PURE__ */ e(d, { icon: "clock-rotate-left", color: "var(--colors-brand-primary-color-primary)", size: "0.75rem" }) })
+    ] }),
+    /* @__PURE__ */ e("div", { className: n["container__two-line-content"], children: t ? /* @__PURE__ */ i(_, { children: [
+      /* @__PURE__ */ e(a, { style: { width: 140 }, "data-testid": `${r}-skeletonName` }),
+      /* @__PURE__ */ e(a, { style: { width: 100, marginTop: "4px" }, "data-testid": `${r}-skeletonDate` })
+    ] }) : /* @__PURE__ */ i(_, { children: [
+      b && /* @__PURE__ */ e(
+        o,
+        {
+          color: "var(--gray-95)",
+          variant: "base",
+          className: n["container__two-line-primary"],
+          "data-testid": `${r}-name`,
+          children: b
+        }
+      ),
+      u && /* @__PURE__ */ e(o, { color: "var(--gray-75)", variant: "base", className: n["container__two-line-secondary"], children: u })
+    ] }) }),
+    (m || v || h || t) && /* @__PURE__ */ e("div", { className: n["container__two-line-right"], children: t ? /* @__PURE__ */ i(_, { children: [
+      /* @__PURE__ */ e(a, { style: { width: 60 }, "data-testid": `${r}-skeletonType` }),
+      /* @__PURE__ */ e(a, { style: { width: 50, marginTop: "4px" }, "data-testid": `${r}-skeletonAmount` })
+    ] }) : /* @__PURE__ */ i(_, { children: [
+      m && /* @__PURE__ */ e(
+        o,
+        {
+          color: s || "var(--gray-95)",
+          variant: "base",
+          className: n["container__two-line-right-primary"],
+          children: m
+        }
+      ),
+      (v || l || h) && /* @__PURE__ */ i(
+        o,
+        {
+          color: "var(--gray-75)",
+          variant: "base",
+          className: n["container__two-line-right-secondary"],
+          children: [
+            l && /* @__PURE__ */ i(_, { children: [
+              l,
+              " . "
+            ] }),
+            v || "Pending"
+          ]
+        }
+      )
+    ] }) })
+  ] }) }) : D ? /* @__PURE__ */ e("div", { className: n.container, children: /* @__PURE__ */ i("div", { className: n["container--pending"], onClick: () => c == null ? void 0 : c(), children: [
+    t ? /* @__PURE__ */ e(w, { size: "32px", "data-testid": `${r}-skeletonIcon` }) : /* @__PURE__ */ e(y, { type: "icon", children: /* @__PURE__ */ e(d, { icon: p || "coin", color: s }) }),
+    /* @__PURE__ */ e("div", { className: n["container__info-section"], children: /* @__PURE__ */ e("div", { className: n["container__info-section--item"], children: t ? /* @__PURE__ */ e(a, { style: { width: 140 }, "data-testid": `${r}-skeletonName` }) : /* @__PURE__ */ e(o, { color: "var(--gray-95)", variant: "base", "data-testid": `${r}-content`, children: N }) }) }),
+    /* @__PURE__ */ e("div", { className: n["container__pending-right"], children: t ? /* @__PURE__ */ e(a, { style: { width: 70 }, "data-testid": `${r}-skeletonAmount` }) : /* @__PURE__ */ e(o, { bold: !0, color: "var(--gray-95)", variant: "base", children: $ }) })
+  ] }) }) : /* @__PURE__ */ e("div", { className: n.container, children: /* @__PURE__ */ i("div", { onClick: () => c == null ? void 0 : c(), className: n.container__grid, children: [
+    /* @__PURE__ */ e("div", { children: t ? /* @__PURE__ */ e(a, { style: { width: 50 }, "data-testid": `${r}-skeletonMonth` }) : /* @__PURE__ */ e(o, { color: "var(--gray-95)", variant: "base", children: A }) }),
+    /* @__PURE__ */ e("div", { children: t ? /* @__PURE__ */ e(a, { style: { width: 90 }, "data-testid": `${r}-skeletonDate` }) : /* @__PURE__ */ e(o, { color: "var(--gray-95)", variant: "base", children: k }) }),
+    t ? /* @__PURE__ */ e(w, { size: "32px", "data-testid": `${r}-skeletonIcon` }) : /* @__PURE__ */ e(y, { type: "icon", children: /* @__PURE__ */ e(d, { icon: p || "coin", color: s }) }),
+    /* @__PURE__ */ e("div", { className: n["container__info-section"], children: /* @__PURE__ */ e("div", { className: n["container__info-section--content"], children: t ? /* @__PURE__ */ i(_, { children: [
+      /* @__PURE__ */ e(
+        a,
+        {
+          style: { width: 70, display: "inline-block", marginLeft: "8px" },
+          "data-testid": `${r}-skeletonName`
+        }
+      ),
+      /* @__PURE__ */ e(
+        a,
+        {
+          style: { width: 70, display: "inline-block", marginLeft: "8px" },
+          "data-testid": `${r}-skeletonCategory`
+        }
+      ),
+      /* @__PURE__ */ e(
+        a,
+        {
+          style: { width: 70, display: "inline-block", marginLeft: "8px" },
+          "data-testid": `${r}-skeletonCategoryType`
+        }
+      )
+    ] }) : /* @__PURE__ */ i(
+      o,
       {
-        style: { width: 70, display: "inline-block", marginLeft: "8px" },
-        "data-testid": `${t}-skeletonCategoryType`
+        color: "var(--gray-95)",
+        variant: "base",
+        className: n["container__truncate-text"],
+        "data-testid": `${r}-content`,
+        children: [
+          /* @__PURE__ */ e("span", { "data-testid": `${r}-name`, children: N }),
+          g && /* @__PURE__ */ i(_, { children: [
+            /* @__PURE__ */ e("span", { className: n.container__separator }),
+            /* @__PURE__ */ e("span", { "data-testid": `${r}-category`, children: g })
+          ] }),
+          f && /* @__PURE__ */ i(_, { children: [
+            /* @__PURE__ */ e("span", { className: n.container__separator }),
+            /* @__PURE__ */ e("span", { "data-testid": `${r}-categoryType`, children: f })
+          ] })
+        ]
       }
-    )
-  ] }) : /* @__PURE__ */ c(
-    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__ */ c(s, { children: [
-          /* @__PURE__ */ e("span", { className: n.separator }),
-          /* @__PURE__ */ e("span", { "data-testid": `${t}-category`, children: l })
-        ] }),
-        d && /* @__PURE__ */ c(s, { children: [
-          /* @__PURE__ */ e("span", { className: n.separator }),
-          /* @__PURE__ */ e("span", { "data-testid": `${t}-categoryType`, children: d })
-        ] })
-      ]
-    }
-  ) }) }),
-  /* @__PURE__ */ c("div", { className: n["info-section--right"], children: [
-    m && /* @__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: m }) }),
-    /* @__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: w }) })
-  ] }),
-  /* @__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: p }) })
-] }) });
+    ) }) }),
+    /* @__PURE__ */ i("div", { className: n["container__info-section--right"], children: [
+      l && /* @__PURE__ */ e("div", { className: n["container__info-section--item"], children: t ? /* @__PURE__ */ e(a, { style: { width: 70 }, "data-testid": `${r}-skeletonInstallments` }) : /* @__PURE__ */ e(o, { color: "var(--gray-95)", variant: "base", children: l }) }),
+      /* @__PURE__ */ e("div", { className: n["container__info-section--item"], children: t ? /* @__PURE__ */ e(a, { style: { width: 70 }, "data-testid": `${r}-skeletonType` }) : /* @__PURE__ */ e(o, { color: "var(--gray-95)", variant: "base", children: z }) })
+    ] }),
+    /* @__PURE__ */ e("div", { className: n["container__info-section--right"], children: t ? /* @__PURE__ */ e(a, { style: { width: 140 }, "data-testid": `${r}-skeletonAmount` }) : /* @__PURE__ */ e(o, { bold: !0, variant: "base", children: $ }) })
+  ] }) });
+};
 export {
-  D as TransactionRow
+  K as TransactionRow
 };

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

@@ -1,20 +1,27 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ dateTime, category, categoryType, name, type, installments, amount, month, icon, onClick, isPendingTransaction, isLoading, "data-testid": dataTestId, }: {
+    component: ({ dateTime, category, categoryType, name, type, installments, amount, month, icon, onClick, pendingItem, isLoading, isPendingTransaction, "data-testid": dataTestId, variant, primaryContent, secondaryContent, rightPrimaryContent, rightSecondaryContent, colorVariant, }: {
         dateTime?: import('react').ReactNode;
         month?: import('react').ReactNode;
         category?: import('react').ReactNode;
         categoryType?: import('react').ReactNode;
-        name: import('react').ReactNode;
+        name?: import('react').ReactNode;
         type?: import('react').ReactNode;
         icon?: import('../Icon/types').IconName | undefined;
-        amount: import('react').ReactNode;
+        amount?: import('react').ReactNode;
         installments?: import('react').ReactNode;
         onClick?: (() => void) | undefined;
-        isPendingTransaction?: boolean | undefined;
         isLoading?: boolean | undefined;
         'data-testid'?: string | undefined;
+        isPendingTransaction?: boolean | undefined;
+        variant?: "default" | "two-line" | undefined;
+        primaryContent?: import('react').ReactNode;
+        secondaryContent?: import('react').ReactNode;
+        rightPrimaryContent?: import('react').ReactNode;
+        rightSecondaryContent?: import('react').ReactNode;
+        colorVariant?: "success" | "primary" | "danger" | undefined;
+        pendingItem?: boolean | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {
@@ -34,3 +41,9 @@ export declare const WithLargeAmount: Story;
 export declare const IsPending: Story;
 export declare const IsPendingLoading: Story;
 export declare const LongTitleAndCategory: Story;
+export declare const TwoLine: Story;
+export declare const TwoLineWithClick: Story;
+export declare const TwoLineMultipleExamples: Story;
+export declare const TwoLineWithColorVariants: Story;
+export declare const DefaultWithColorVariants: Story;
+export declare const TwoLineWithPendingIndicator: Story;

package/dist/marola.css

@@ -1 +1 @@
-:root{--secondary-orange: #ffa945;--secondary-orange-rgb: 255, 169, 69;--secondary-orange-dark: #fe8d53;--secondary-orange-dark-rgb: 254, 141, 83;--secondary-orange-light: #525061;--secondary-orange-light-rgb: 82, 80, 97;--secondary-green: #99dec3;--secondary-green-rgb: 153, 222, 195;--secondary-green-dark: #6acbb1;--secondary-green-dark-rgb: 106, 203, 177;--secondary-green-darker: #31aa7e;--secondary-green-darker-rgb: 49, 170, 126;--secondary-green-light: #baedd9;--secondary-green-light-rgb: 186, 237, 217;--accent: #1897f3;--accent-rgb: 24, 151, 243;--accent-dark: #1672c7;--accent-dark-rgb: 22, 114, 199;--accent-light: #4fb1f9;--accent-light-rgb: 79, 177, 249;--accent-lighter: #8ae1fd;--accent-lighter-rgb: 138, 225, 253;--alert: #df4561;--alert-rgb: 223, 69, 97;--alert-dark: #bb2b45;--alert-dark-rgb: 187, 43, 69;--accent-alert-light: #f37c91;--accent-alert-light-rgb: 243, 124, 145;--cream: #fafafa;--cream-rgb: 250, 250, 250;--hover: #42b7ff;--hover-rgb: 66, 183, 255;--active: #0a75cc;--active-rgb: 10, 117, 204;--border: #d9d9d9;--border-rgb: 217, 217, 217;--border-secondary: #f0f0f0;--border-secondary-rgb: 240, 240, 240;--error-background: #fff2f0;--error-background-rgb: 255, 242, 240;--error-border: #ffccc7;--error-border-rgb: 255, 204, 199;--error-text: #d9363e;--error-text-rgb: 217, 54, 62;--success-text: #045440;--success-text-rgb: 4, 84, 64;--warning-text: #874d00;--warning-text-rgb: 135, 77, 0;--warning: #faad14;--warning-rgb: 250, 173, 20;--info-text: #003e80;--info-text-rgb: 0, 62, 128;--avatar-background: rgba(63, 61, 75, .2509803922);--avatar-background-rgb: 63, 61, 75}:root{--gray-100: #16161e;--gray-100-rgb: 22, 22, 30;--gray-95: #3f3d4b;--gray-95-rgb: 63, 61, 75;--gray-90: #525061;--gray-90-rgb: 82, 80, 97;--gray-75: #838192;--gray-75-rgb: 131, 129, 146;--gray-50: #bcbac8;--gray-50-rgb: 188, 186, 200;--gray-25: #dbdae2;--gray-25-rgb: 219, 218, 226;--gray-10: #ebeaf0;--gray-10-rgb: 235, 234, 240;--gray-5: #f7f7fc;--gray-5-rgb: 247, 247, 252;--black-100: #000000;--black-100-rgb: 0, 0, 0;--black-75: #616161;--black-75-rgb: 97, 97, 97;--black-50: #838192;--black-50-rgb: 131, 129, 146;--black-25: #bcbac8;--black-25-rgb: 188, 186, 200;--black-10: #ebeaf0;--black-10-rgb: 235, 234, 240;--white-100: #ffffff;--white-100-rgb: 255, 255, 255;--green-1: #f0fff7;--green-1-rgb: 240, 255, 247;--green-3: #a1edcb;--green-3-rgb: 161, 237, 203;--green-6: #28c88f;--green-6-rgb: 40, 200, 143;--blue-1: #e6f9ff;--blue-1-rgb: 230, 249, 255;--blue-3: #94ddff;--blue-3-rgb: 148, 221, 255;--blue-6: #1897f3;--blue-6-rgb: 24, 151, 243;--gold-1: #fffbe6;--gold-1-rgb: 255, 251, 230;--gold-3: #ffe58f;--gold-3-rgb: 255, 229, 143;--gold-6: #faad14;--gold-6-rgb: 250, 173, 20;--magenta-1: #fff0f6;--magenta-1-rgb: 255, 240, 246;--magenta-3: #ffadd2;--magenta-3-rgb: 255, 173, 210;--magenta-6: #eb2f96;--magenta-6-rgb: 235, 47, 150;--cyan-1: #e6fffb;--cyan-1-rgb: 230, 255, 251;--cyan-3: #87e8de;--cyan-3-rgb: 135, 232, 222;--cyan-6: #13c2c2;--cyan-6-rgb: 19, 194, 194;--geek-blue-1: #f0f5ff;--geek-blue-1-rgb: 240, 245, 255;--geek-blue-3: #adc6ff;--geek-blue-3-rgb: 173, 198, 255;--geek-blue-5: #597ef7;--geek-blue-5-rgb: 89, 126, 247;--geek-blue-6: #2f54eb;--geek-blue-6-rgb: 47, 84, 235;--lime-1: #fcffe6;--lime-1-rgb: 252, 255, 230;--lime-3: #eaff8f;--lime-3-rgb: 234, 255, 143;--lime-6: #a0d911;--lime-6-rgb: 160, 217, 17;--orange-1: #fffaf0;--orange-1-rgb: 255, 250, 240;--orange-3: #ffe8bf;--orange-3-rgb: 255, 232, 191;--orange-6: #ffa945;--orange-6-rgb: 255, 169, 69;--purple-1: #f9f0ff;--purple-1-rgb: 249, 240, 255;--purple-3: #d3adf7;--purple-3-rgb: 211, 173, 247;--purple-6: #722ed1;--purple-6-rgb: 114, 46, 209;--red-1: #fff0f0;--red-1-rgb: 255, 240, 240;--red-3: #fcbdc3;--red-3-rgb: 252, 189, 195;--red-6: #d53a56;--red-6-rgb: 213, 58, 86;--volcano-1: #fff2e8;--volcano-1-rgb: 255, 242, 232;--volcano-3: #ffbb96;--volcano-3-rgb: 255, 187, 150;--volcano-6: #fa541c;--volcano-6-rgb: 250, 84, 28}:root{--heading-font-weight: 700;--heading-font-size-1: 3.75rem;--heading-line-height-1: 4.875rem;--heading-font-size-2: 3rem;--heading-line-height-2: 4rem;--heading-font-size-3: 2.25rem;--heading-line-height-3: 2.875rem;--heading-font-size-4: 1.875rem;--heading-line-height-4: 2.375rem;--heading-font-size-5: 1.5rem;--heading-line-height-5: 2rem;--heading-font-size-6: 1.25rem;--heading-line-height-6: 1.75rem;--base-font-size: .875rem;--base-line-height: 1.375rem;--base-weight: 400;--base-bold: 700;--base-font-size-sm: .75rem;--base-line-height-sm: 1.25rem;--base-font-size-lg: 1rem;--base-line-height-lg: 1.5rem;--base-font-size-xl: 1.25rem;--base-line-height-xl: 1.75rem;--base-font-size-xxl: 1.5rem;--base-line-height-xxl: 2rem}:root{--heading-font-weight: 700;--heading-font-size-xl: 3.75rem;--heading-line-height-xl: 4.875rem;--heading-font-size-l: 3rem;--heading-line-height-l: 3.9375rem;--heading-font-size: 2.25rem;--heading-line-height: 2.875rem;--heading-font-size-s: 1.5rem;--heading-line-height-s: 2rem;--body-font-size: 1rem;--body-line-height: 1.3125rem;--body-weight: normal;--body-bold: bold;--body-font-size-large: 1.5rem;--body-line-height-large: 1.625rem;--body-font-size-medium: 1.125;--body-line-height-medium: 1rem;--body-font-size-small: .875rem;--body-line-height-small: 1.125rem;--body-font-size-tiny: .75rem;--body-line-height-tiny: 1rem;--quote-font-size-large: 1.5rem;--quote-line-height-large: 2rem;--quote-font-weight-large: normal;--quote-font-size: 1rem;--quote-line-height: 1.3125rem;--quote-font-weight: normal;--form-input-font-size: 1rem;--form-input-line-height: 1.3125rem;--form-input-font-weight: bold;--form-hint-font-size: .875rem;--form-hint-line-height: 1.3125rem;--form-hint-font-weight: normal;--form-label-font-size: .875rem;--form-label-line-height: 1.3125rem;--form-label-font-weight: normal;--form-dropdown-font-size: 1rem;--form-dropdown-line-height: 1.3125rem;--form-dropdown-font-weight: normal;--table-font-size: .875rem;--table-line-height: 1.0625rem;--table-header-font-weight: bold;--table-body-font-weight: normal;--table-body-secondary-line-height: 1.3125rem;--button-font-size: 1rem;--button-line-height: 1.25rem;--button-font-weight: bold;--font-size-small: .75rem;--font-weight-small: 400;--font-line-height-small: 1.25rem;--font-weight-700: 700}:root{--spacing: 8px;--border-radius: 6px;--border-radius-soft: 4px;--transition-soft: .3s;--transition-long: .75s}*{box-sizing:border-box}:root{--border-radius-border-radius: .375rem;--size-base-size: 1rem;--size-base-size-sm: .75rem;--colors-base-green-3: #a1edcb;--colors-brand-success-color-success-border: var(--colors-base-green-3);--colors-base-green-1: #f0fff7;--colors-brand-success-color-success-bg: var(--colors-base-green-1);--colors-brand-error-color-error-border: #ffccc7;--colors-brand-error-color-error-bg: #fff2f0;--colors-brand-error-color-error-hover: #ff7875;--colors-brand-error-color-error-active: #d9363e;--colors-brand-error-color-error: #ff4d4f;--colors-base-gold-3: #ffe58f;--colors-brand-warning-color-warning-border: var(--colors-base-gold-3);--colors-base-gold-1: #fffbe6;--colors-brand-warning-color-warning-bg: var(--colors-base-gold-1);--colors-base-blue-3: #94ddff;--colors-brand-primary-color-primary-border: var(--colors-base-blue-3);--colors-brand-info-color-info-border: var(--colors-brand-primary-color-primary-border);--colors-brand-info-color-info-bg: var(--colors-brand-primary-color-primary-bg);--colors-base-blue-6: #1897f3;--colors-brand-primary-color-primary: var(--colors-base-blue-6);--colors-base-blue-4: #6bcbff;--colors-brand-primary-color-primary-border-hover: var(--colors-base-blue-4);--colors-base-blue-7: #0a75cc;--colors-brand-primary-color-primary-active: var(--colors-base-blue-7);--colors-neutral-border-color-border: #d9d9d9;--colors-neutral-text-color-text: rgba(63, 61, 75, .8784313725);--colors-neutral-text-color-text-tertiary: rgba(63, 61, 75, .4509803922);--colors-neutral-text-color-text-description: var(--colors-neutral-text-color-text-tertiary);--colors-neutral-text-color-text-quaternary: rgba(63, 61, 75, .2509803922);--colors-neutral-text-color-text-disabled: var(--colors-neutral-text-color-text-quaternary);--colors-neutral-fill-color-fill: rgba(0, 0, 0, .1490196078);--colors-base-green-6: #28c88f;--colors-brand-success-color-success: var(--colors-base-green-6);--colors-base-blue-1: #e6f9ff;--colors-brand-primary-color-primary-bg: var(--colors-base-blue-1);--colors-neutral-text-color-text-secondary: rgba(63, 61, 75, .6509803922);--colors-neutral-bg-color-bg-layout: #fafafa}
+:root{--secondary-orange: #ffa945;--secondary-orange-rgb: 255, 169, 69;--secondary-orange-dark: #fe8d53;--secondary-orange-dark-rgb: 254, 141, 83;--secondary-orange-light: #525061;--secondary-orange-light-rgb: 82, 80, 97;--secondary-green: #99dec3;--secondary-green-rgb: 153, 222, 195;--secondary-green-dark: #6acbb1;--secondary-green-dark-rgb: 106, 203, 177;--secondary-green-darker: #31aa7e;--secondary-green-darker-rgb: 49, 170, 126;--secondary-green-light: #baedd9;--secondary-green-light-rgb: 186, 237, 217;--accent: #1897f3;--accent-rgb: 24, 151, 243;--accent-dark: #1672c7;--accent-dark-rgb: 22, 114, 199;--accent-light: #4fb1f9;--accent-light-rgb: 79, 177, 249;--accent-lighter: #8ae1fd;--accent-lighter-rgb: 138, 225, 253;--alert: #df4561;--alert-rgb: 223, 69, 97;--alert-dark: #bb2b45;--alert-dark-rgb: 187, 43, 69;--accent-alert-light: #f37c91;--accent-alert-light-rgb: 243, 124, 145;--cream: #fafafa;--cream-rgb: 250, 250, 250;--hover: #42b7ff;--hover-rgb: 66, 183, 255;--active: #0a75cc;--active-rgb: 10, 117, 204;--border: #d9d9d9;--border-rgb: 217, 217, 217;--border-secondary: #f0f0f0;--border-secondary-rgb: 240, 240, 240;--error-background: #fff2f0;--error-background-rgb: 255, 242, 240;--error-border: #ffccc7;--error-border-rgb: 255, 204, 199;--error-text: #d9363e;--error-text-rgb: 217, 54, 62;--success-text: #045440;--success-text-rgb: 4, 84, 64;--warning-text: #874d00;--warning-text-rgb: 135, 77, 0;--warning: #faad14;--warning-rgb: 250, 173, 20;--info-text: #003e80;--info-text-rgb: 0, 62, 128;--avatar-background: rgba(63, 61, 75, .2509803922);--avatar-background-rgb: 63, 61, 75}:root{--gray-100: #16161e;--gray-100-rgb: 22, 22, 30;--gray-95: #3f3d4b;--gray-95-rgb: 63, 61, 75;--gray-90: #525061;--gray-90-rgb: 82, 80, 97;--gray-75: #838192;--gray-75-rgb: 131, 129, 146;--gray-50: #bcbac8;--gray-50-rgb: 188, 186, 200;--gray-25: #dbdae2;--gray-25-rgb: 219, 218, 226;--gray-10: #ebeaf0;--gray-10-rgb: 235, 234, 240;--gray-5: #f7f7fc;--gray-5-rgb: 247, 247, 252;--black-100: #000000;--black-100-rgb: 0, 0, 0;--black-75: #616161;--black-75-rgb: 97, 97, 97;--black-50: #838192;--black-50-rgb: 131, 129, 146;--black-25: #bcbac8;--black-25-rgb: 188, 186, 200;--black-10: #ebeaf0;--black-10-rgb: 235, 234, 240;--white-100: #ffffff;--white-100-rgb: 255, 255, 255;--green-1: #f0fff7;--green-1-rgb: 240, 255, 247;--green-3: #a1edcb;--green-3-rgb: 161, 237, 203;--green-6: #28c88f;--green-6-rgb: 40, 200, 143;--blue-1: #e6f9ff;--blue-1-rgb: 230, 249, 255;--blue-3: #94ddff;--blue-3-rgb: 148, 221, 255;--blue-6: #1897f3;--blue-6-rgb: 24, 151, 243;--gold-1: #fffbe6;--gold-1-rgb: 255, 251, 230;--gold-3: #ffe58f;--gold-3-rgb: 255, 229, 143;--gold-6: #faad14;--gold-6-rgb: 250, 173, 20;--magenta-1: #fff0f6;--magenta-1-rgb: 255, 240, 246;--magenta-3: #ffadd2;--magenta-3-rgb: 255, 173, 210;--magenta-6: #eb2f96;--magenta-6-rgb: 235, 47, 150;--cyan-1: #e6fffb;--cyan-1-rgb: 230, 255, 251;--cyan-3: #87e8de;--cyan-3-rgb: 135, 232, 222;--cyan-6: #13c2c2;--cyan-6-rgb: 19, 194, 194;--geek-blue-1: #f0f5ff;--geek-blue-1-rgb: 240, 245, 255;--geek-blue-3: #adc6ff;--geek-blue-3-rgb: 173, 198, 255;--geek-blue-5: #597ef7;--geek-blue-5-rgb: 89, 126, 247;--geek-blue-6: #2f54eb;--geek-blue-6-rgb: 47, 84, 235;--lime-1: #fcffe6;--lime-1-rgb: 252, 255, 230;--lime-3: #eaff8f;--lime-3-rgb: 234, 255, 143;--lime-6: #a0d911;--lime-6-rgb: 160, 217, 17;--orange-1: #fffaf0;--orange-1-rgb: 255, 250, 240;--orange-3: #ffe8bf;--orange-3-rgb: 255, 232, 191;--orange-6: #ffa945;--orange-6-rgb: 255, 169, 69;--purple-1: #f9f0ff;--purple-1-rgb: 249, 240, 255;--purple-3: #d3adf7;--purple-3-rgb: 211, 173, 247;--purple-6: #722ed1;--purple-6-rgb: 114, 46, 209;--red-1: #fff0f0;--red-1-rgb: 255, 240, 240;--red-3: #fcbdc3;--red-3-rgb: 252, 189, 195;--red-6: #d53a56;--red-6-rgb: 213, 58, 86;--volcano-1: #fff2e8;--volcano-1-rgb: 255, 242, 232;--volcano-3: #ffbb96;--volcano-3-rgb: 255, 187, 150;--volcano-6: #fa541c;--volcano-6-rgb: 250, 84, 28}:root{--heading-font-weight: 700;--heading-font-size-1: 3.75rem;--heading-line-height-1: 4.875rem;--heading-font-size-2: 3rem;--heading-line-height-2: 4rem;--heading-font-size-3: 2.25rem;--heading-line-height-3: 2.875rem;--heading-font-size-4: 1.875rem;--heading-line-height-4: 2.375rem;--heading-font-size-5: 1.5rem;--heading-line-height-5: 2rem;--heading-font-size-6: 1.25rem;--heading-line-height-6: 1.75rem;--base-font-size: .875rem;--base-line-height: 1.375rem;--base-weight: 400;--base-bold: 700;--base-font-size-sm: .75rem;--base-line-height-sm: 1.25rem;--base-font-size-lg: 1rem;--base-line-height-lg: 1.5rem;--base-font-size-xl: 1.25rem;--base-line-height-xl: 1.75rem;--base-font-size-xxl: 1.5rem;--base-line-height-xxl: 2rem}:root{--heading-font-weight: 700;--heading-font-size-xl: 3.75rem;--heading-line-height-xl: 4.875rem;--heading-font-size-l: 3rem;--heading-line-height-l: 3.9375rem;--heading-font-size: 2.25rem;--heading-line-height: 2.875rem;--heading-font-size-s: 1.5rem;--heading-line-height-s: 2rem;--body-font-size: 1rem;--body-line-height: 1.3125rem;--body-weight: normal;--body-bold: bold;--body-font-size-large: 1.5rem;--body-line-height-large: 1.625rem;--body-font-size-medium: 1.125;--body-line-height-medium: 1rem;--body-font-size-small: .875rem;--body-line-height-small: 1.125rem;--body-font-size-tiny: .75rem;--body-line-height-tiny: 1rem;--quote-font-size-large: 1.5rem;--quote-line-height-large: 2rem;--quote-font-weight-large: normal;--quote-font-size: 1rem;--quote-line-height: 1.3125rem;--quote-font-weight: normal;--form-input-font-size: 1rem;--form-input-line-height: 1.3125rem;--form-input-font-weight: bold;--form-hint-font-size: .875rem;--form-hint-line-height: 1.3125rem;--form-hint-font-weight: normal;--form-label-font-size: .875rem;--form-label-line-height: 1.3125rem;--form-label-font-weight: normal;--form-dropdown-font-size: 1rem;--form-dropdown-line-height: 1.3125rem;--form-dropdown-font-weight: normal;--table-font-size: .875rem;--table-line-height: 1.0625rem;--table-header-font-weight: bold;--table-body-font-weight: normal;--table-body-secondary-line-height: 1.3125rem;--button-font-size: 1rem;--button-line-height: 1.25rem;--button-font-weight: bold;--font-size-small: .75rem;--font-weight-small: 400;--font-line-height-small: 1.25rem;--font-weight-700: 700}:root{--spacing: 8px;--border-radius: 6px;--border-radius-soft: 4px;--transition-soft: .3s;--transition-long: .75s}*{box-sizing:border-box}:root{--border-radius-border-radius: .375rem;--size-base-size: 1rem;--size-base-size-sm: .75rem;--colors-base-green-3: #a1edcb;--colors-brand-success-color-success-border: var(--colors-base-green-3);--colors-base-green-1: #f0fff7;--colors-brand-success-color-success-bg: var(--colors-base-green-1);--colors-brand-error-color-error-border: #ffccc7;--colors-brand-error-color-error-bg: #fff2f0;--colors-brand-error-color-error-hover: #ff7875;--colors-brand-error-color-error-active: #d9363e;--colors-brand-error-color-error: #ff4d4f;--colors-base-gold-3: #ffe58f;--colors-brand-warning-color-warning-border: var(--colors-base-gold-3);--colors-base-gold-1: #fffbe6;--colors-brand-warning-color-warning-bg: var(--colors-base-gold-1);--colors-base-blue-3: #94ddff;--colors-brand-primary-color-primary-border: var(--colors-base-blue-3);--colors-brand-info-color-info-border: var(--colors-brand-primary-color-primary-border);--colors-brand-info-color-info-bg: var(--colors-brand-primary-color-primary-bg);--colors-base-blue-6: #1897f3;--colors-brand-primary-color-primary: var(--colors-base-blue-6);--colors-base-blue-4: #6bcbff;--colors-brand-primary-color-primary-border-hover: var(--colors-base-blue-4);--colors-base-blue-7: #0a75cc;--colors-brand-primary-color-primary-active: var(--colors-base-blue-7);--colors-neutral-border-color-border: #d9d9d9;--colors-neutral-text-color-text: rgba(63, 61, 75, .8784313725);--colors-neutral-text-color-text-tertiary: rgba(63, 61, 75, .4509803922);--colors-neutral-text-color-text-description: var(--colors-neutral-text-color-text-tertiary);--colors-neutral-text-color-text-quaternary: rgba(63, 61, 75, .2509803922);--colors-neutral-text-color-text-disabled: var(--colors-neutral-text-color-text-quaternary);--colors-neutral-fill-color-fill: rgba(0, 0, 0, .1490196078);--colors-base-green-6: #28c88f;--colors-brand-success-color-success: var(--colors-base-green-6);--colors-base-blue-1: #e6f9ff;--colors-brand-primary-color-primary-bg: var(--colors-base-blue-1);--colors-neutral-text-color-text-secondary: rgba(63, 61, 75, .6509803922);--colors-neutral-bg-color-bg-layout: #fafafa;--colors-base-green-7: #18a175;--colors-brand-success-color-success-active: var(--colors-base-green-7);--colors-base-blue-9: #003e80;--colors-brand-primary-color-primary-text: var(--colors-base-blue-9)}

package/package.json

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