@pismo/marola 1.0.0-beta.9 → 1.0.0

package/dist/assets/Tabs.css

@@ -1 +1 @@
-._tabs_18ymz_1{gap:8px;width:100%}._tabs__tab_18ymz_5{min-width:94px;height:48px;padding:0 8px 0 0;color:var(--gray-75);cursor:pointer;background-color:var(--white-100);border:none}._tabs__tab_18ymz_5:hover{color:var(--hover);border-bottom:2px solid var(--hover)}._tabs__tab_18ymz_5:active{color:var(--active);border-bottom:2px solid var(--active)}._tabs__tab--disabled_18ymz_22{color:#00000040;cursor:default;border-bottom:2px solid rgba(0,0,0,.25)}._tabs__tab--disabled_18ymz_22:focus,._tabs__tab--disabled_18ymz_22:active,._tabs__tab--disabled_18ymz_22:hover{color:#00000040;border-bottom:2px solid rgba(0,0,0,.25)}._tabs__tab--selected_18ymz_31{color:var(--accent);border-bottom:2px solid var(--accent)}._tabs__tab-panel_18ymz_35{width:100%;margin-top:16px}
+._tabs_1xfbu_1{gap:8px;width:100%}._tabs__tab_1xfbu_5{min-width:94px;height:48px;padding:0 8px 0 0;color:var(--gray-75);cursor:pointer;background-color:transparent;border:none;border-bottom:2px solid transparent}._tabs__tab_1xfbu_5:hover{color:var(--hover);border-bottom:2px solid var(--hover)}._tabs__tab_1xfbu_5:active{color:var(--active);border-bottom:2px solid var(--active)}._tabs__tab--disabled_1xfbu_23{color:#00000040;cursor:default;border-bottom:2px solid rgba(0,0,0,.25)}._tabs__tab--disabled_1xfbu_23:focus,._tabs__tab--disabled_1xfbu_23:active,._tabs__tab--disabled_1xfbu_23:hover{color:#00000040;border-bottom:2px solid rgba(0,0,0,.25)}._tabs__tab--selected_1xfbu_32{color:var(--accent);border-bottom:2px solid var(--accent)}._tabs__tab-panel_1xfbu_36{width:100%;margin-top:16px}

package/dist/assets/Toggle2.css

@@ -1 +1 @@
-._u-typography-h1_1qd8i_1{font-size:var(--heading-font-size-1);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-1);margin:0}._u-typography-h2_1qd8i_8{font-size:var(--heading-font-size-2);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-2);margin:0}._u-typography-h3_1qd8i_15{font-size:var(--heading-font-size-3);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-3);margin:0}._u-typography-h4_1qd8i_22{font-size:var(--heading-font-size-4);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-4);margin:0}._u-typography-h5_1qd8i_29{font-size:var(--heading-font-size-5);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-5);margin:0}._u-typography-h6_1qd8i_36{font-size:var(--heading-font-size-6);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-6);margin:0}._u-typography-base_1qd8i_43{margin:0;font-size:var(--base-font-size);font-weight:var(--base-weight);line-height:var(--base-line-height)}._u-typography-base--xxl_1qd8i_49{font-size:var(--base-font-size-xxl);line-height:var(--base-line-height-xxl)}._u-typography-base--xl_1qd8i_53{font-size:var(--base-font-size-xl);line-height:var(--base-line-height-xl)}._u-typography-base--lg_1qd8i_57{font-size:var(--base-font-size-lg);line-height:var(--base-line-height-lg)}._u-typography-base--sm_1qd8i_61,._chip_1qd8i_61{font-size:var(--base-font-size-sm);line-height:var(--base-line-height-sm)}._u-typography-base--bold_1qd8i_65,._chip_1qd8i_61{font-weight:var(--base-bold)}._u-typography-base--strikethrough_1qd8i_68{text-decoration:line-through}._u-typography-base--underlined_1qd8i_71{text-decoration:underline}._u-typography-base--strikethrough-underlined_1qd8i_74{text-decoration:underline line-through}._chip_1qd8i_61{display:flex;align-items:center;width:fit-content;padding:.375rem .5rem;background-color:var(--cream);border-width:1px;border-radius:calc(var(--border-radius-soft) * 4)}._chip_1qd8i_61:not(:disabled){color:rgb(var(--gray-95-rgb) .65)}._chip--button_1qd8i_90{cursor:pointer;border-color:transparent}._chip--button_1qd8i_90:disabled{cursor:initial}._chip--button_1qd8i_90:focus-visible{outline:none}._chip--button_1qd8i_90:focus{outline:2px solid var(--black-100)}._chip--outlined_1qd8i_103{padding:.3125rem .5rem;background-color:var(--white-100);border:1px solid var(--border);border-radius:calc(var(--border-radius-soft) * 4)}._chip--contained_1qd8i_109{padding:.3125rem .5rem;border:1px solid var(--border);border-color:var(--accent);border-radius:calc(var(--border-radius-soft) * 4)}._chip__adornment_1qd8i_115{display:flex;align-items:center;margin-right:.5rem}._chip__remove_1qd8i_120{display:flex;margin-left:.5rem}._chip__remove_1qd8i_120:focus-visible{outline:none}._chip__remove_1qd8i_120:focus:not(:disabled){border-radius:calc(var(--border-radius-soft) * 4);outline:2px solid var(--black-100)}._chip__remove--disabled_1qd8i_131{cursor:default}._chip-loading_1qd8i_135{display:inline-flex;width:6rem;height:2rem;border-radius:4rem}._row-item_ag6tb_1{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;border:1px solid var(--gray-10);border-radius:6px}._row-item_ag6tb_1:focus-visible{outline:none}._row-item_ag6tb_1:focus{outline:2px solid var(--black-100)}._row-item--clickable_ag6tb_15{cursor:pointer}._row-item__content_ag6tb_18{display:flex;flex-grow:1;align-items:center;justify-content:space-between;padding-right:1rem;padding-left:1rem;margin:0;text-align:center}._row-item__content_ag6tb_18:focus-visible{outline:none}._row-item__content_ag6tb_18:focus{outline:2px solid var(--black-100)}
+._u-typography-h1_1wvod_1{font-size:var(--heading-font-size-1);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-1);margin:0}._u-typography-h2_1wvod_8{font-size:var(--heading-font-size-2);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-2);margin:0}._u-typography-h3_1wvod_15{font-size:var(--heading-font-size-3);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-3);margin:0}._u-typography-h4_1wvod_22{font-size:var(--heading-font-size-4);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-4);margin:0}._u-typography-h5_1wvod_29{font-size:var(--heading-font-size-5);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-5);margin:0}._u-typography-h6_1wvod_36{font-size:var(--heading-font-size-6);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-6);margin:0}._u-typography-base_1wvod_43{margin:0;font-size:var(--base-font-size);font-weight:var(--base-weight);line-height:var(--base-line-height)}._u-typography-base--xxl_1wvod_49{font-size:var(--base-font-size-xxl);line-height:var(--base-line-height-xxl)}._u-typography-base--xl_1wvod_53{font-size:var(--base-font-size-xl);line-height:var(--base-line-height-xl)}._u-typography-base--lg_1wvod_57{font-size:var(--base-font-size-lg);line-height:var(--base-line-height-lg)}._u-typography-base--sm_1wvod_61,._chip_1wvod_61{font-size:var(--base-font-size-sm);line-height:var(--base-line-height-sm)}._u-typography-base--bold_1wvod_65,._chip_1wvod_61{font-weight:var(--base-bold)}._u-typography-base--strikethrough_1wvod_68{text-decoration:line-through}._u-typography-base--underlined_1wvod_71{text-decoration:underline}._u-typography-base--strikethrough-underlined_1wvod_74{text-decoration:underline line-through}._chip_1wvod_61{display:flex;align-items:center;width:fit-content;padding:.375rem .5rem;background-color:var(--cream);border-width:1px;border-radius:calc(var(--border-radius-soft) * 4)}._chip_1wvod_61:not(:disabled){color:rgb(var(--gray-95-rgb) .65)}._chip--button_1wvod_90{cursor:pointer;border-color:transparent}._chip--button_1wvod_90:disabled{pointer-events:none;cursor:initial}._chip--button_1wvod_90:focus-visible{outline:none}._chip--button_1wvod_90:focus{outline:2px solid var(--black-100)}._chip--outlined_1wvod_104{padding:.3125rem .5rem;background-color:var(--white-100);border:1px solid var(--border);border-radius:calc(var(--border-radius-soft) * 4)}._chip--contained_1wvod_110{padding:.3125rem .5rem;border:1px solid var(--border);border-color:var(--accent);border-radius:calc(var(--border-radius-soft) * 4)}._chip__adornment_1wvod_116{display:flex;align-items:center;margin-right:.5rem}._chip__remove_1wvod_121{display:flex;margin-left:.5rem;cursor:pointer}._chip__remove_1wvod_121:focus-visible{outline:none}._chip__remove_1wvod_121:focus:not(:disabled){border-radius:calc(var(--border-radius-soft) * 4);outline:2px solid var(--black-100)}._chip__remove--disabled_1wvod_133{cursor:default}._chip-loading_1wvod_137{display:inline-flex;min-width:6rem;height:2rem;border-radius:4rem}._row-item_8z1a0_1{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;border:1px solid var(--gray-10);border-radius:6px;outline:none}._row-item_8z1a0_1:focus-visible{outline:none}._row-item--clickable_8z1a0_13{cursor:pointer}._row-item--clickable_8z1a0_13:focus{outline:2px solid var(--black-100)}._row-item--disabled_8z1a0_19{cursor:not-allowed}._row-item__content_8z1a0_22{display:flex;flex-grow:1;align-items:center;justify-content:space-between;padding-right:1rem;padding-left:1rem;margin:0;text-align:center}._row-item__content_8z1a0_22:focus-visible{outline:none}._row-item__content_8z1a0_22:focus{outline:2px solid var(--black-100)}

package/dist/{combineHooksSlotProps-BtBYUV_B.js → combineHooksSlotProps-C-zYvfnF.js}

@@ -1,4 +1,4 @@
-import { f as E, b as a } from "./useSlotProps-kRhf7Gil.js";
+import { f as E, b as a } from "./useSlotProps-C_I1kEHr.js";
 import * as r from "react";
 const f = {
   blur: "list:blur",

package/dist/components/Adornment/Adornment.d.ts

@@ -1,11 +1,20 @@
 import { IconProps } from '../Icon/Icon.tsx';
+import { Either } from '../../types/helpers';
+import { ReactNode } from 'react';
 
-export type AdornmentSlotProps = IconProps & {
+export type AdornmentSlotProps = {
     /** Any additional classes to apply to the adornment */
     className?: string;
     /** Dataset test id only used for tests to reach in and grab the rendered DOM node of the adornment */
     'data-testid'?: string;
+};
+export type MarolaIconAdornment = AdornmentSlotProps & Partial<IconProps> & {
     /** Whether to render in a disabled state */
     disabled?: boolean;
 };
-export declare const Adornment: (props: AdornmentSlotProps) => import("react/jsx-runtime").JSX.Element;
+export type CustomIconAdornment = AdornmentSlotProps & {
+    /** Render a complete custom icon outside of Marola icon system */
+    customIcon: ReactNode;
+};
+export type AdornmentProps = Either<CustomIconAdornment, MarolaIconAdornment>;
+export declare const Adornment: (props: AdornmentProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Adornment/Adornment.js

@@ -1,12 +1,12 @@
 import '../../assets/Adornment.css';
-import { jsx as r } from "react/jsx-runtime";
-import { c as t } from "../../clsx-DB4S2d7J.js";
-import { Icon as m } from "../Icon/Icon.js";
+import { jsx as n } from "react/jsx-runtime";
+import { c } from "../../clsx-DB4S2d7J.js";
+import { Icon as d } from "../Icon/Icon.js";
 const l = "_adornment_1bwrg_1", i = {
   adornment: l
-}, g = (o) => {
-  const { color: s, disabled: n = !1, className: a, ...e } = o, c = t(a), d = n ? "rgb(var(--gray-95-rgb), 0.4)" : s;
-  return /* @__PURE__ */ r("span", { className: t(i.adornment, c), "data-testid": o["data-testid"], children: /* @__PURE__ */ r(m, { color: d, ...e }) });
+}, g = (t) => {
+  const e = c(t.className), { disabled: a, icon: m } = t, o = a ? "rgb(var(--gray-95-rgb), 0.4)" : t == null ? void 0 : t.color;
+  return /* @__PURE__ */ n("span", { className: c(i.adornment, e), "data-testid": t["data-testid"], children: t != null && t.customIcon ? t == null ? void 0 : t.customIcon : /* @__PURE__ */ n(d, { color: o, icon: m, size: t.size }) });
 };
 export {
   g as Adornment

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

@@ -0,0 +1,14 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: (props: import('./Adornment').AdornmentProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const WithMarolaIcon: Story;
+export declare const WithCustomIcon: Story;

package/dist/components/Adornment/adornment.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Advice/Advice.d.ts

@@ -5,11 +5,11 @@ import { ReactNode } from 'react';
 export type AdviceType = 'without-results' | 'no-permission' | 'no-items' | 'error-page';
 type AdviceCommonProps = {
     /** Advice title message */
-    title?: string;
+    title?: ReactNode;
     /** Advice title message props */
     titleProps?: Omit<TypographyProps, 'children'>;
     /** Advice description message */
-    description?: string;
+    description?: ReactNode;
     /** Advice description message props */
     descriptionProps?: Omit<TypographyProps, 'children'>;
     /** Advice content message */

package/dist/components/Alert/Alert.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+
+type AlertType = 'success' | 'error' | 'info' | 'warning' | 'default';
+type AlertProps = {
+    type?: AlertType;
+    children: ReactNode;
+    'data-testid'?: string;
+    onClose?: () => void;
+};
+export declare const Alert: ({ type, children, "data-testid": dataTestId, onClose }: AlertProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Alert/Alert.js

@@ -0,0 +1,46 @@
+import '../../assets/Alert.css';
+import { jsxs as _, jsx as a } from "react/jsx-runtime";
+import { c as y } from "../../clsx-DB4S2d7J.js";
+import { Icon as s } from "../Icon/Icon.js";
+const h = "_container_9p2mz_78", t = {
+  "u-typography-h1": "_u-typography-h1_9p2mz_1",
+  "u-typography-h2": "_u-typography-h2_9p2mz_8",
+  "u-typography-h3": "_u-typography-h3_9p2mz_15",
+  "u-typography-h4": "_u-typography-h4_9p2mz_22",
+  "u-typography-h5": "_u-typography-h5_9p2mz_29",
+  "u-typography-h6": "_u-typography-h6_9p2mz_36",
+  "u-typography-base": "_u-typography-base_9p2mz_43",
+  "u-typography-base--xxl": "_u-typography-base--xxl_9p2mz_49",
+  "u-typography-base--xl": "_u-typography-base--xl_9p2mz_53",
+  "u-typography-base--lg": "_u-typography-base--lg_9p2mz_57",
+  "u-typography-base--sm": "_u-typography-base--sm_9p2mz_61",
+  "u-typography-base--bold": "_u-typography-base--bold_9p2mz_65",
+  "u-typography-base--strikethrough": "_u-typography-base--strikethrough_9p2mz_68",
+  "u-typography-base--underlined": "_u-typography-base--underlined_9p2mz_71",
+  "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_9p2mz_74",
+  container: h,
+  "container--success": "_container--success_9p2mz_84",
+  "container--warning": "_container--warning_9p2mz_88",
+  "container--error": "_container--error_9p2mz_92",
+  "container--info": "_container--info_9p2mz_96",
+  "container--default": "_container--default_9p2mz_100",
+  "container--close-icon": "_container--close-icon_9p2mz_104",
+  "container--content": "_container--content_9p2mz_109"
+}, g = ({ type: r = "default", children: e, "data-testid": p, onClose: o }) => {
+  const n = y(t.container, t[`container--${r}`]);
+  return /* @__PURE__ */ _("div", { "data-testid": p, className: n, children: [
+    /* @__PURE__ */ a("div", { className: t["container--content"], children: e }),
+    !!o && /* @__PURE__ */ a(
+      "div",
+      {
+        "data-testid": `${p}-close-button`,
+        onClick: () => o(),
+        className: t["container--close-icon"],
+        children: /* @__PURE__ */ a(s, { icon: "xmark" })
+      }
+    )
+  ] });
+};
+export {
+  g as Alert
+};

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

@@ -0,0 +1,24 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ type, children, "data-testid": dataTestId, onClose }: {
+        type?: ("default" | "error" | "success" | "info" | "warning") | undefined;
+        children: import('react').ReactNode;
+        'data-testid'?: string | undefined;
+        onClose?: (() => void) | undefined;
+    }) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const General: Story;
+export declare const Success: Story;
+export declare const Error: Story;
+export declare const Warning: Story;
+export declare const Info: Story;
+export declare const WithCloseButton: Story;
+export declare const WithCustomAction: Story;

package/dist/components/Alert/Alert.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -1,50 +1,20 @@
-import { InputHTMLAttributes, ReactNode, SyntheticEvent } from 'react';
+import { InputProps } from '../Input/Input.tsx';
+import { SyntheticEvent } from 'react';
 
-type AutocompleteProps<T> = InputHTMLAttributes<HTMLInputElement> & {
-    /** Label text */
-    label?: string;
+export type AutocompleteProps<T> = Omit<InputProps, 'onChange' | 'value'> & {
+    /** Object key to be used as label when options are an array of object */
+    labelKey?: T extends object ? keyof T : never;
+    /** Object key to be used as value when options are an array of object */
+    valueKey?: T extends object ? keyof T : never;
+    /** Value */
+    value?: T;
     /** Options array */
     options?: Array<T>;
     /** callback for new option selected */
     onChange?: (event: SyntheticEvent<Element, Event>, newValue: T) => void;
-    /** Info message text */
-    infoMessage?: string;
-    /** Error message text */
-    errorMessage?: string;
-    /** Left icon element */
-    leftIcon?: ReactNode;
-    /** Right icon element */
-    rightIcon?: ReactNode;
-    /** Input type. Default: text */
-    type?: 'text' | 'password' | 'search';
-    /** Hide the chars counter */
-    hideCharsCounter?: boolean;
-    /** CSS classes to be applied on the container element */
-    classNameWrapper?: string;
-    /** CSS classes to be applied on the label element */
-    classNameLabel?: string;
-    /** CSS classes to be applied on the input element */
-    classNameInput?: string;
-    /** CSS classes to be applied on the info message element */
-    classNameInfoMessage?: string;
-    /** CSS classes to be applied on the error message element */
-    classNameErrorMessage?: string;
-    /** CSS classes to be applied on the chars counter element */
-    classNameCharsCounter?: string;
+    /** callback when characters are entered into the input box */
+    onInputChange?: (event: SyntheticEvent<Element, Event>, newValue: string) => void;
     /** Id to be applied as `data-testid` on the container element */
     'data-testid-wrapper'?: string;
-    /** Id to be applied as `data-testid` on the label element */
-    'data-testid-label'?: string;
-    /** Id to be applied as `data-testid` on the input element */
-    'data-testid-input'?: string;
-    /** Id to be applied as `data-testid` on the info message element */
-    'data-testid-infoMessage'?: string;
-    /** Id to be applied as `data-testid` on the error message element */
-    'data-testid-errorMessage'?: string;
-    /** Id to be applied as `data-testid` on the chars counter element */
-    'data-testid-charsCounter'?: string;
 };
-export declare const Autocomplete: <T extends string | (object & {
-    label: string;
-})>({ label, type, options, infoMessage, errorMessage, leftIcon, rightIcon, id, disabled, maxLength, onChange, classNameLabel, classNameInput, classNameErrorMessage, classNameInfoMessage, "data-testid-label": testIdLabel, "data-testid-input": testIdInput, "data-testid-infoMessage": testIdInfoMessage, "data-testid-errorMessage": testIdErrorMessage, ...rest }: AutocompleteProps<T>) => import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const Autocomplete: <T extends string | object>({ labelKey, valueKey, options, type, value, onChange, onInputChange, "data-testid-wrapper": dataTestId, ...props }: AutocompleteProps<T>) => import("react/jsx-runtime").JSX.Element;