@pismo/marola 2.1.2 → 2.1.4

package/dist/Group-DJz1rK2n.js

@@ -0,0 +1,39 @@
+import { jsxs as g, jsx as o } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+import { c } from "./clsx-OuTLNxxd.js";
+import { Icon as p } from "./components/Icon/Icon.js";
+import { Typography as m } from "./components/Typography/Typography.js";
+import './assets/Group.css';const u = "_toggle__input_1jlyx_1", x = "_toggle__label_1jlyx_11", t = {
+  toggle__input: u,
+  toggle__label: x,
+  "toggle__label--selected": "_toggle__label--selected_1jlyx_24",
+  "toggle__label--disabled": "_toggle__label--disabled_1jlyx_24",
+  "toggle-group__fieldset": "_toggle-group__fieldset_1jlyx_38",
+  "toggle-group__options": "_toggle-group__options_1jlyx_43",
+  "toggle-group__options-same-width": "_toggle-group__options-same-width_1jlyx_47",
+  "toggle-group__error": "_toggle-group__error_1jlyx_50"
+}, w = n((e, r) => {
+  const { children: s, legend: l, error: _, equalWidth: a } = e, i = e["data-testid"] ? `${e["data-testid"]}-legend` : void 0, d = e["data-testid"] ? `${e["data-testid"]}-error` : void 0;
+  return /* @__PURE__ */ g("fieldset", { ref: r, "data-testid": e["data-testid"], className: t["toggle-group__fieldset"], children: [
+    l && /* @__PURE__ */ o("legend", { "data-testid": i, children: l }),
+    /* @__PURE__ */ o(
+      "div",
+      {
+        className: c(
+          t["toggle-group__options"],
+          a && t["toggle-group__options-same-width"],
+          e.classNameForOptions
+        ),
+        children: s
+      }
+    ),
+    _ && /* @__PURE__ */ g(m, { className: t["toggle-group__error"], "data-testid": d, children: [
+      /* @__PURE__ */ o(p, { icon: "circle-exclamation" }),
+      _
+    ] })
+  ] });
+});
+export {
+  w as G,
+  t as s
+};

package/dist/{Toggle-DeMSbC0N.js → Toggle-Dp20f7qn.js}

@@ -16,7 +16,7 @@ import "./components/Select/Select.js";
 import "./components/Popover/Popover.js";
 import "./components/Table/Table.js";
 import "./components/Tabs/Tabs.js";
-import { s as y } from "./Group-Cyc1W1kV.js";
+import { s as y } from "./Group-DJz1rK2n.js";
 import "./contexts/SnackbarProvider/SnackbarProvider.js";
 import { B as x } from "./Button-Bh6rpTyY.js";
 import './assets/Toggle2.css';const I = "_chip_1wvod_61", P = "_chip__adornment_1wvod_116", z = "_chip__remove_1wvod_121", n = {

package/dist/assets/Group.css

@@ -1 +1 @@
-._toggle__input_1fdw4_1{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;visibility:hidden;opacity:0}._toggle__label_1fdw4_11{position:relative;flex-grow:1;padding:.5rem 1rem;color:var(--accent);text-align:center;cursor:pointer;background-color:rgb(var(--accent-rgb),.1);border-radius:6px}._toggle__label_1fdw4_11:hover:not(._toggle__label--selected_1fdw4_21,._toggle__label--disabled_1fdw4_21){border-color:var(--gray-75);opacity:.9}._toggle__label--selected_1fdw4_21{color:var(--white-100);background-color:var(--accent)}._toggle__label--disabled_1fdw4_21{color:rgb(var(--black-100-rgb),.25);cursor:default;background-color:rgb(var(--black-100-rgb),.04)}._toggle-group__fieldset_1fdw4_35{padding:0;margin:0;border:none}._toggle-group__options_1fdw4_40{display:flex;gap:.5rem}._toggle-group__options-same-width_1fdw4_44>*{flex:1}._toggle-group__error_1fdw4_47{display:flex;gap:.375rem;align-items:center;margin-top:.3125rem;color:var(--alert)}._toggle-group__error_1fdw4_47 svg{min-width:1rem;min-height:1rem}
+._toggle__input_1jlyx_1{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;visibility:hidden;opacity:0}._toggle__label_1jlyx_11{position:relative;display:flex;flex-grow:1;align-items:center;justify-content:center;padding:.5rem 1rem;color:var(--gray-90);text-align:center;cursor:pointer;border:solid 1px var(--gray-25);border-radius:6px}._toggle__label_1jlyx_11:hover:not(._toggle__label--selected_1jlyx_24,._toggle__label--disabled_1jlyx_24){border-color:var(--gray-75);opacity:.9}._toggle__label--selected_1jlyx_24{color:var(--accent);border-color:var(--accent)}._toggle__label--disabled_1jlyx_24{color:rgb(var(--black-100-rgb),.25);cursor:default;background-color:rgb(var(--black-100-rgb),.04)}._toggle-group__fieldset_1jlyx_38{padding:0;margin:0;border:none}._toggle-group__options_1jlyx_43{display:flex;gap:.5rem}._toggle-group__options-same-width_1jlyx_47>*{flex:1}._toggle-group__error_1jlyx_50{display:flex;gap:.375rem;align-items:center;margin-top:.3125rem;color:var(--alert)}._toggle-group__error_1jlyx_50 svg{min-width:1rem;min-height:1rem}

package/dist/assets/TransactionRow.css

@@ -1 +1 @@
-._container_1zn5j_1{width:100%;height:56px;border-top:1px solid var(--border-secondary)}._container-grid_1zn5j_6{display:grid;grid-template-columns:1fr 2fr .5fr 4fr 2fr 2fr;align-items:center;justify-content:space-between;padding:12px 16px}._container-pending_1zn5j_13{display:flex;align-items:center;justify-content:flex-start;padding:12px 16px}._container-pending--right_1zn5j_19{margin-left:auto}._container_1zn5j_1 :hover{background-color:var(--border-secondary)}._info-section_1zn5j_26{display:flex}._info-section--item_1zn5j_29{padding-left:8px}._info-section--item_1zn5j_29:not(:first-child){margin-left:8px;border-left:1px solid var(--border-secondary)}._info-section--right_1zn5j_36{display:flex;justify-content:flex-end}
+._container_1apn3_1{width:100%;height:56px;border-top:1px solid var(--border-secondary)}._container-grid_1apn3_6{display:grid;grid-template-columns:1fr 2fr .5fr 4fr 2fr 2fr;align-items:center;justify-content:space-between;padding:12px 16px}._container-pending_1apn3_13{display:flex;align-items:center;justify-content:flex-start;padding:12px 16px}._container-pending--right_1apn3_19{margin-left:auto}._container_1apn3_1 :hover{cursor:pointer;background-color:var(--border-secondary)}._info-section_1apn3_27{display:flex}._info-section--item_1apn3_30{padding-left:8px}._info-section--item_1apn3_30:not(:first-child){margin-left:8px;border-left:1px solid var(--border-secondary)}._info-section--right_1apn3_37{display:flex;justify-content:flex-end}

package/dist/components/Chip/Chip.js

@@ -7,7 +7,7 @@ import "../Typography/Typography.js";
 import "../Input/Input.js";
 import "../Avatar/Avatar.js";
 import "../Button/Button.js";
-import { C as v } from "../../Toggle-DeMSbC0N.js";
+import { C as v } from "../../Toggle-Dp20f7qn.js";
 import "../Dialog/Dialog.js";
 import "../DatePicker/DatePicker.js";
 import "../Skeleton/Skeleton.js";
@@ -17,7 +17,7 @@ import "../Select/Select.js";
 import "../Popover/Popover.js";
 import "../Table/Table.js";
 import "../Tabs/Tabs.js";
-import "../../Group-Cyc1W1kV.js";
+import "../../Group-DJz1rK2n.js";
 import "../../contexts/SnackbarProvider/SnackbarProvider.js";
 import "../../Button-Bh6rpTyY.js";
 export {

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

@@ -3,7 +3,7 @@ declare const meta: {
     title: string;
     component: import('react').ForwardRefExoticComponent<import('./Chip').ChipProps & import('react').RefAttributes<unknown>>;
     tags: string[];
-    decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+    decorators: ((Story: import('@storybook/core/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
         label: import('react').ReactNode;
         loading?: boolean | undefined;
         leftAdornment?: import('../Adornment/Adornment').AdornmentProps | undefined;

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

@@ -4,7 +4,7 @@ declare const meta: {
     title: string;
     component: ({ open, onClose, title, subtitle, content, cancelAction, confirmAction, confirmLabel, cancelLabel, }: ConfirmationDialogProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
-    decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+    decorators: ((Story: import('@storybook/core/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
         open: boolean;
         onClose: () => void;
         title?: import('react').ReactNode;

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

@@ -17,7 +17,7 @@ declare const meta: {
         navigatorInput?: boolean | undefined;
     }>;
     tags: string[];
-    decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+    decorators: ((Story: import('@storybook/core/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
         mode: "range" | "single";
         viewMode: "month" | "day" | "year";
         locale?: string | undefined;

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

@@ -13,7 +13,7 @@ declare const meta: {
         Actions: import('react').FunctionComponent<import('./Actions').DialogActionProps>;
     };
     tags: string[];
-    decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+    decorators: ((Story: import('@storybook/core/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
         color?: string | undefined;
         children: import('react').ReactElement<any, string | import('react').JSXElementConstructor<any>> & import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<unknown>>;
         title?: string | undefined;

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

@@ -7,7 +7,7 @@ declare const meta: {
     parameters: {
         layout: string;
     };
-    decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+    decorators: ((Story: import('@storybook/core/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
         children: import('react').ReactNode;
         title?: import('react').ReactNode;
         style?: import('react').CSSProperties | undefined;

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

@@ -3,7 +3,7 @@ declare const meta: {
     title: string;
     component: ({ invert, classNames }: import('./LoadingSpinner').LoadingSpinnerProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
-    decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+    decorators: ((Story: import('@storybook/core/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
         invert?: boolean | undefined;
         classNames?: string | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];

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

@@ -24,7 +24,7 @@ declare const meta: {
         };
     };
     tags: string[];
-    decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+    decorators: ((Story: import('@storybook/core/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
         [x: string]: any;
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };

package/dist/components/RadioButton/RadioButton.js

@@ -7,7 +7,7 @@ import { Typography as Me } from "../Typography/Typography.js";
 import "../Input/Input.js";
 import "../Avatar/Avatar.js";
 import "../Button/Button.js";
-import "../../Toggle-DeMSbC0N.js";
+import "../../Toggle-Dp20f7qn.js";
 import "../Dialog/Dialog.js";
 import "../DatePicker/DatePicker.js";
 import "../IconButton/IconButton.js";
@@ -16,7 +16,7 @@ import "../Select/Select.js";
 import "../Popover/Popover.js";
 import "../Table/Table.js";
 import "../Tabs/Tabs.js";
-import "../../Group-Cyc1W1kV.js";
+import "../../Group-DJz1rK2n.js";
 import "../../contexts/SnackbarProvider/SnackbarProvider.js";
 import { u as ne, C as Te, e as Y, b as oe, m as G, D as xe, c as _e, g as Ae, h as ce, j as Pe, r as ke, R as ve, i as He, s as P } from "../../RadioButton.module-VF7v9SuY.js";
 import { P as d } from "../../useSlotProps-C7dqSmdM.js";

package/dist/components/RadioButton/RadioOption.js

@@ -6,7 +6,7 @@ import * as a from "react";
 import "../Input/Input.js";
 import "../Avatar/Avatar.js";
 import "../Button/Button.js";
-import "../../Toggle-DeMSbC0N.js";
+import "../../Toggle-Dp20f7qn.js";
 import "../Dialog/Dialog.js";
 import "../DatePicker/DatePicker.js";
 import "../IconButton/IconButton.js";
@@ -16,7 +16,7 @@ import "../Popover/Popover.js";
 import { u as v, a as j, b as E, c as U, d as w, e as F, m as I, f as q, g as V, h as M, r as z, i as J, N as Q, s as N } from "../../RadioButton.module-VF7v9SuY.js";
 import "../Table/Table.js";
 import "../Tabs/Tabs.js";
-import "../../Group-Cyc1W1kV.js";
+import "../../Group-DJz1rK2n.js";
 import "../../contexts/SnackbarProvider/SnackbarProvider.js";
 import { P as s } from "../../useSlotProps-C7dqSmdM.js";
 import { r as W } from "../../index-Bppuplgd.js";

package/dist/components/ResultWithChips/ResultWithChips.js

@@ -1,5 +1,5 @@
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { C as t } from "../../Toggle-DeMSbC0N.js";
+import { C as t } from "../../Toggle-Dp20f7qn.js";
 import '../../assets/ResultWithChips.css';const r = "_container_hgp0p_1", o = "_label_hgp0p_17", a = {
   container: r,
   "chip-item-wrapper": "_chip-item-wrapper_hgp0p_8",

package/dist/components/RowItem/RowItem.js

@@ -7,7 +7,7 @@ import "../Typography/Typography.js";
 import "../Input/Input.js";
 import "../Avatar/Avatar.js";
 import "../Button/Button.js";
-import { R as j, R as k } from "../../Toggle-DeMSbC0N.js";
+import { R as j, R as k } from "../../Toggle-Dp20f7qn.js";
 import "../Dialog/Dialog.js";
 import "../DatePicker/DatePicker.js";
 import "../IconButton/IconButton.js";
@@ -16,7 +16,7 @@ import "../Select/Select.js";
 import "../Popover/Popover.js";
 import "../Table/Table.js";
 import "../Tabs/Tabs.js";
-import "../../Group-Cyc1W1kV.js";
+import "../../Group-DJz1rK2n.js";
 import "../../contexts/SnackbarProvider/SnackbarProvider.js";
 export {
   j as RowItem,

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

@@ -4,7 +4,7 @@ declare const meta: {
     title: string;
     component: ({ snackbarMessage, variant, autoHideDuration, open, onClose, onClosed, classNameWrapper, "data-testid": dataTestId, }: SnackbarProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
-    decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+    decorators: ((Story: import('@storybook/core/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
         accept?: string | undefined;
         alt?: string | undefined;
         autoComplete?: import('react').HTMLInputAutoCompleteAttribute | undefined;

package/dist/components/ToggleGroup/Group.js

@@ -3,7 +3,7 @@ import "react";
 import "../../clsx-OuTLNxxd.js";
 import "../Icon/Icon.js";
 import "../Typography/Typography.js";
-import { G as e } from "../../Group-Cyc1W1kV.js";
+import { G as e } from "../../Group-DJz1rK2n.js";
 export {
   e as default
 };

package/dist/components/ToggleGroup/Toggle.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export type ToggleGroupItemProps<T extends string | number> = {
     /** The display text to show for this option */
-    text: string;
+    text: React.ReactNode;
     /** The underlining value of this option */
     value: T;
     /** Whether this radio button is selected */

package/dist/components/ToggleGroup/Toggle.js

@@ -6,7 +6,7 @@ import "../Typography/Typography.js";
 import "../Input/Input.js";
 import "../Avatar/Avatar.js";
 import "../Button/Button.js";
-import { T as k } from "../../Toggle-DeMSbC0N.js";
+import { T as k } from "../../Toggle-Dp20f7qn.js";
 import "../Dialog/Dialog.js";
 import "../DatePicker/DatePicker.js";
 import "../IconButton/IconButton.js";
@@ -15,7 +15,7 @@ import "../Select/Select.js";
 import "../Popover/Popover.js";
 import "../Table/Table.js";
 import "../Tabs/Tabs.js";
-import "../../Group-Cyc1W1kV.js";
+import "../../Group-DJz1rK2n.js";
 import "../../contexts/SnackbarProvider/SnackbarProvider.js";
 export {
   k as default

package/dist/components/ToggleGroup/ToggleGroup.js

@@ -1,5 +1,5 @@
-import { T as e } from "../../Toggle-DeMSbC0N.js";
-import { G as p } from "../../Group-Cyc1W1kV.js";
+import { T as e } from "../../Toggle-Dp20f7qn.js";
+import { G as p } from "../../Group-DJz1rK2n.js";
 export {
   p as ToggleGroup,
   e as ToggleGroupItem

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

@@ -5,7 +5,7 @@ declare const meta: {
     title: string;
     component: import('react').ForwardRefExoticComponent<ToggleGroupProps & import('react').RefAttributes<HTMLFieldSetElement>>;
     tags: string[];
-    decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+    decorators: ((Story: import('@storybook/core/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
         legend?: import('react').ReactNode;
         error?: import('react').ReactNode;
         children: import('react').ReactElement<import('./Toggle.tsx').ToggleGroupItemProps<string | number>, string | import('react').JSXElementConstructor<any>>[];
@@ -25,3 +25,4 @@ export declare const Simple: Story;
 export declare const NoLegend: Story;
 export declare const WithError: Story;
 export declare const ItemsWithEqualWidth: Story;
+export declare const ItemsWithCustomText: Story;

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

@@ -7,7 +7,7 @@ declare const meta: {
     parameters: {
         layout: string;
     };
-    decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+    decorators: ((Story: import('@storybook/core/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
         children: import('react').ReactNode;
         title?: import('react').ReactNode;
         content: import('react').ReactNode;

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

@@ -3,6 +3,7 @@ type TransactionRowProps = {
     dateTime?: React.ReactNode;
     month?: React.ReactNode;
     category?: React.ReactNode;
+    categoryType?: React.ReactNode;
     name: React.ReactNode;
     type?: React.ReactNode;
     icon?: IconName;
@@ -10,6 +11,8 @@ type TransactionRowProps = {
     installments?: React.ReactNode;
     onClick?: () => void;
     isPendingTransaction?: boolean;
+    isLoading?: boolean;
+    'data-testid'?: string;
 };
-export declare const TransactionRow: ({ dateTime, category, name, type, installments, amount, month, icon, onClick, isPendingTransaction, }: TransactionRowProps) => import("react/jsx-runtime").JSX.Element;
+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 {};

package/dist/components/TransactionRow/TransactionRow.js

@@ -1,43 +1,48 @@
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { Avatar as l } from "../Avatar/Avatar.js";
-import { Icon as h } from "../Icon/Icon.js";
-import { Typography as r } from "../Typography/Typography.js";
-import '../../assets/TransactionRow.css';const f = "_container_1zn5j_1", n = {
-  container: f,
-  "container-grid": "_container-grid_1zn5j_6",
-  "container-pending": "_container-pending_1zn5j_13",
-  "container-pending--right": "_container-pending--right_1zn5j_19",
-  "info-section": "_info-section_1zn5j_26",
-  "info-section--item": "_info-section--item_1zn5j_29",
-  "info-section--right": "_info-section--right_1zn5j_36"
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+import { Avatar as p } 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 $ = "_container_1apn3_1", i = {
+  container: $,
+  "container-grid": "_container-grid_1apn3_6",
+  "container-pending": "_container-pending_1apn3_13",
+  "container-pending--right": "_container-pending--right_1apn3_19",
+  "info-section": "_info-section_1apn3_27",
+  "info-section--item": "_info-section--item_1apn3_30",
+  "info-section--right": "_info-section--right_1apn3_37"
 }, j = ({
-  dateTime: v,
-  category: c,
-  name: o,
-  type: m,
-  installments: t,
-  amount: s,
+  dateTime: _,
+  category: s,
+  categoryType: l,
+  name: d,
+  type: N,
+  installments: h,
+  amount: v,
   month: g,
-  icon: d,
-  onClick: e,
-  isPendingTransaction: _
-}) => _ ? /* @__PURE__ */ i("div", { className: n.container, children: /* @__PURE__ */ a("div", { className: n["container-pending"], onClick: () => e == null ? void 0 : e(), children: [
-  /* @__PURE__ */ i(l, { type: "icon", children: /* @__PURE__ */ i(h, { icon: d || "clock" }) }),
-  /* @__PURE__ */ i("div", { className: n["info-section"], children: /* @__PURE__ */ i("div", { className: n["info-section--item"], children: /* @__PURE__ */ i(r, { color: "var(--gray-95)", variant: "base", children: o }) }) }),
-  /* @__PURE__ */ i("div", { className: n["container-pending--right"], children: /* @__PURE__ */ i(r, { bold: !0, color: "var(--gray-95)", variant: "base", children: s }) })
-] }) }) : /* @__PURE__ */ i("div", { className: n.container, children: /* @__PURE__ */ a("div", { onClick: () => e == null ? void 0 : e(), className: n["container-grid"], children: [
-  /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i(r, { color: "var(--gray-95)", variant: "base", children: g }) }),
-  /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i(r, { color: "var(--gray-95)", variant: "base", children: v }) }),
-  /* @__PURE__ */ i(l, { type: "icon", children: /* @__PURE__ */ i(h, { icon: d || "coin" }) }),
-  /* @__PURE__ */ a("div", { className: n["info-section"], children: [
-    /* @__PURE__ */ i("div", { className: n["info-section--item"], children: /* @__PURE__ */ i(r, { color: "var(--gray-95)", variant: "base", children: o }) }),
-    c && /* @__PURE__ */ i("div", { className: n["info-section--item"], children: /* @__PURE__ */ i(r, { color: "var(--gray-95)", variant: "base", children: c }) })
+  icon: m,
+  onClick: o,
+  isPendingTransaction: b,
+  isLoading: n = !1,
+  "data-testid": t = "Description"
+}) => b ? /* @__PURE__ */ e("div", { className: i.container, children: /* @__PURE__ */ c("div", { className: i["container-pending"], onClick: () => o == null ? void 0 : o(), children: [
+  n ? /* @__PURE__ */ e(f, { size: "32px", "data-testid": `${t}-skeletonIcon` }) : /* @__PURE__ */ e(p, { type: "icon", children: /* @__PURE__ */ e(y, { icon: m || "clock" }) }),
+  /* @__PURE__ */ e("div", { className: i["info-section"], children: /* @__PURE__ */ e("div", { className: i["info-section--item"], children: n ? /* @__PURE__ */ e(r, { style: { width: 140 }, "data-testid": `${t}-skeletonName` }) : /* @__PURE__ */ e(a, { color: "var(--gray-95)", variant: "base", children: d }) }) }),
+  /* @__PURE__ */ e("div", { className: i["container-pending--right"], children: n ? /* @__PURE__ */ e(r, { style: { width: 70 }, "data-testid": `${t}-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: n ? /* @__PURE__ */ e(r, { style: { width: 50 }, "data-testid": `${t}-skeletonMonth` }) : /* @__PURE__ */ e(a, { color: "var(--gray-95)", variant: "base", children: g }) }),
+  /* @__PURE__ */ e("div", { children: n ? /* @__PURE__ */ e(r, { style: { width: 90 }, "data-testid": `${t}-skeletonDate` }) : /* @__PURE__ */ e(a, { color: "var(--gray-95)", variant: "base", children: _ }) }),
+  n ? /* @__PURE__ */ e(f, { size: "32px", "data-testid": `${t}-skeletonIcon` }) : /* @__PURE__ */ e(p, { type: "icon", children: /* @__PURE__ */ e(y, { icon: m || "coin" }) }),
+  /* @__PURE__ */ c("div", { className: i["info-section"], children: [
+    /* @__PURE__ */ e("div", { className: i["info-section--item"], children: n ? /* @__PURE__ */ e(r, { style: { width: 70 }, "data-testid": `${t}-skeletonName` }) : /* @__PURE__ */ e(a, { color: "var(--gray-95)", variant: "base", children: d }) }),
+    s && /* @__PURE__ */ e("div", { className: i["info-section--item"], children: n ? /* @__PURE__ */ e(r, { style: { width: 70 }, "data-testid": `${t}-skeletonCategory` }) : /* @__PURE__ */ e(a, { color: "var(--gray-95)", variant: "base", children: s }) }),
+    l && /* @__PURE__ */ e("div", { className: i["info-section--item"], children: n ? /* @__PURE__ */ e(r, { style: { width: 70 }, "data-testid": `${t}-skeletonCategoryType` }) : /* @__PURE__ */ e(a, { color: "var(--gray-95)", variant: "base", children: l }) })
   ] }),
-  /* @__PURE__ */ a("div", { className: n["info-section--right"], children: [
-    t && /* @__PURE__ */ i("div", { className: n["info-section--item"], children: /* @__PURE__ */ i(r, { color: "var(--gray-95)", variant: "base", children: t }) }),
-    /* @__PURE__ */ i("div", { className: n["info-section--item"], children: /* @__PURE__ */ i(r, { color: "var(--gray-95)", variant: "base", children: m }) })
+  /* @__PURE__ */ c("div", { className: i["info-section--right"], children: [
+    h && /* @__PURE__ */ e("div", { className: i["info-section--item"], children: n ? /* @__PURE__ */ e(r, { style: { width: 70 }, "data-testid": `${t}-skeletonInstallments` }) : /* @__PURE__ */ e(a, { color: "var(--gray-95)", variant: "base", children: h }) }),
+    /* @__PURE__ */ e("div", { className: i["info-section--item"], children: n ? /* @__PURE__ */ e(r, { style: { width: 70 }, "data-testid": `${t}-skeletonType` }) : /* @__PURE__ */ e(a, { color: "var(--gray-95)", variant: "base", children: N }) })
   ] }),
-  /* @__PURE__ */ i("div", { className: n["info-section--right"], children: /* @__PURE__ */ i(r, { bold: !0, variant: "base", children: s }) })
+  /* @__PURE__ */ e("div", { className: i["info-section--right"], children: n ? /* @__PURE__ */ e(r, { style: { width: 140 }, "data-testid": `${t}-skeletonAmount` }) : /* @__PURE__ */ e(a, { bold: !0, variant: "base", children: v }) })
 ] }) });
 export {
   j as TransactionRow

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

@@ -1,10 +1,11 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ dateTime, category, name, type, installments, amount, month, icon, onClick, isPendingTransaction, }: {
+    component: ({ dateTime, category, categoryType, name, type, installments, amount, month, icon, onClick, isPendingTransaction, isLoading, "data-testid": dataTestId, }: {
         dateTime?: import('react').ReactNode;
         month?: import('react').ReactNode;
         category?: import('react').ReactNode;
+        categoryType?: import('react').ReactNode;
         name: import('react').ReactNode;
         type?: import('react').ReactNode;
         icon?: import('../Icon/types').IconName | undefined;
@@ -12,6 +13,8 @@ declare const meta: {
         installments?: import('react').ReactNode;
         onClick?: (() => void) | undefined;
         isPendingTransaction?: boolean | undefined;
+        isLoading?: boolean | undefined;
+        'data-testid'?: string | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {
@@ -23,7 +26,10 @@ type Story = StoryObj<typeof meta>;
 export declare const Simple: Story;
 export declare const WithMonth: Story;
 export declare const WithInstallments: Story;
+export declare const WithCategoryType: Story;
+export declare const Loading: Story;
 export declare const WithoutCategory: Story;
 export declare const WithTwoCurrencies: Story;
 export declare const WithLargeAmount: Story;
 export declare const IsPending: Story;
+export declare const IsPendingLoading: Story;

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

@@ -11,7 +11,7 @@ declare const meta: {
             };
         };
     };
-    decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+    decorators: ((Story: import('@storybook/core/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
         children: import('react').ReactNode;
         element?: import('react').ElementType | undefined;
         variant?: import('./Typography').VariantType | undefined;

package/dist/contexts/SnackbarProvider/SnackbarProvider.stories.d.ts

@@ -11,7 +11,7 @@ declare const meta: {
         };
     };
     tags: string[];
-    decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+    decorators: ((Story: import('@storybook/core/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
         [x: string]: any;
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };

package/dist/main.js

@@ -8,7 +8,7 @@ import { BankCard as g } from "./components/BankCard/BankCard.js";
 import { Button as u } from "./components/Button/Button.js";
 import { Calendar as C } from "./components/Calendar/Calendar.js";
 import { Checkbox as k } from "./components/Checkbox/Checkbox.js";
-import { C as D, R as A, T as B } from "./Toggle-DeMSbC0N.js";
+import { C as D, R as A, T as B } from "./Toggle-Dp20f7qn.js";
 import { ConfirmationDialog as v } from "./components/ConfirmationDialog/ConfirmationDialog.js";
 import "./components/DatePicker/DatePicker.js";
 import { Description as R } from "./components/Description/Description.js";
@@ -36,7 +36,7 @@ import { Tag as yo } from "./components/Tag/Tag.js";
 import { TextDisplay as wo } from "./components/TextDisplay/TextDisplay.js";
 import { ToastCard as Eo } from "./components/ToastCard/ToastCard.js";
 import { Toggle as No } from "./components/Toggle/Toggle.js";
-import { G as Wo } from "./Group-Cyc1W1kV.js";
+import { G as Wo } from "./Group-DJz1rK2n.js";
 import { Tooltip as qo } from "./components/Tooltip/Tooltip.js";
 import { TransactionRow as Fo } from "./components/TransactionRow/TransactionRow.js";
 import { Text as Ko, Typography as Mo } from "./components/Typography/Typography.js";

package/package.json

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

package/dist/Group-Cyc1W1kV.js

@@ -1,39 +0,0 @@
-import { jsxs as l, jsx as o } from "react/jsx-runtime";
-import { forwardRef as n } from "react";
-import { c } from "./clsx-OuTLNxxd.js";
-import { Icon as f } from "./components/Icon/Icon.js";
-import { Typography as p } from "./components/Typography/Typography.js";
-import './assets/Group.css';const m = "_toggle__input_1fdw4_1", u = "_toggle__label_1fdw4_11", t = {
-  toggle__input: m,
-  toggle__label: u,
-  "toggle__label--selected": "_toggle__label--selected_1fdw4_21",
-  "toggle__label--disabled": "_toggle__label--disabled_1fdw4_21",
-  "toggle-group__fieldset": "_toggle-group__fieldset_1fdw4_35",
-  "toggle-group__options": "_toggle-group__options_1fdw4_40",
-  "toggle-group__options-same-width": "_toggle-group__options-same-width_1fdw4_44",
-  "toggle-group__error": "_toggle-group__error_1fdw4_47"
-}, v = n((e, d) => {
-  const { children: r, legend: _, error: g, equalWidth: s } = e, a = e["data-testid"] ? `${e["data-testid"]}-legend` : void 0, i = e["data-testid"] ? `${e["data-testid"]}-error` : void 0;
-  return /* @__PURE__ */ l("fieldset", { ref: d, "data-testid": e["data-testid"], className: t["toggle-group__fieldset"], children: [
-    _ && /* @__PURE__ */ o("legend", { "data-testid": a, children: _ }),
-    /* @__PURE__ */ o(
-      "div",
-      {
-        className: c(
-          t["toggle-group__options"],
-          s && t["toggle-group__options-same-width"],
-          e.classNameForOptions
-        ),
-        children: r
-      }
-    ),
-    g && /* @__PURE__ */ l(p, { className: t["toggle-group__error"], "data-testid": i, children: [
-      /* @__PURE__ */ o(f, { icon: "circle-exclamation" }),
-      g
-    ] })
-  ] });
-});
-export {
-  v as G,
-  t as s
-};