@pismo/marola 1.0.0-beta.14 → 1.0.0-beta.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,181 @@
1
+ import './assets/Toggle2.css';
2
+ import { jsx as i, jsxs as j } from "react/jsx-runtime";
3
+ import { forwardRef as y } from "react";
4
+ import { c as r } from "./clsx-DB4S2d7J.js";
5
+ import { Icon as N } from "./components/Icon/Icon.js";
6
+ import { Typography as w } from "./components/Typography/Typography.js";
7
+ import "./components/Button/Button.js";
8
+ import { Adornment as C } from "./components/Adornment/Adornment.js";
9
+ import "./components/Dialog/Backdrop.js";
10
+ import "./components/IconButton/IconButton.js";
11
+ import "./components/Select/Select.js";
12
+ import "./components/Table/Table.js";
13
+ import "./components/Tabs/Tabs.js";
14
+ import { s as k } from "./Group-B3p31ftp.js";
15
+ import "./contexts/SnackbarProvider/SnackbarProvider.js";
16
+ import { Skeleton as f } from "./components/Skeleton/Skeleton.js";
17
+ import { B as x } from "./Button-DiLqcAJG.js";
18
+ const I = "_chip_k90cj_61", P = "_chip__adornment_k90cj_115", z = "_chip__remove_k90cj_120", n = {
19
+ "u-typography-h1": "_u-typography-h1_k90cj_1",
20
+ "u-typography-h2": "_u-typography-h2_k90cj_8",
21
+ "u-typography-h3": "_u-typography-h3_k90cj_15",
22
+ "u-typography-h4": "_u-typography-h4_k90cj_22",
23
+ "u-typography-h5": "_u-typography-h5_k90cj_29",
24
+ "u-typography-h6": "_u-typography-h6_k90cj_36",
25
+ "u-typography-base": "_u-typography-base_k90cj_43",
26
+ "u-typography-base--xxl": "_u-typography-base--xxl_k90cj_49",
27
+ "u-typography-base--xl": "_u-typography-base--xl_k90cj_53",
28
+ "u-typography-base--lg": "_u-typography-base--lg_k90cj_57",
29
+ "u-typography-base--sm": "_u-typography-base--sm_k90cj_61",
30
+ chip: I,
31
+ "u-typography-base--bold": "_u-typography-base--bold_k90cj_65",
32
+ "u-typography-base--strikethrough": "_u-typography-base--strikethrough_k90cj_68",
33
+ "u-typography-base--underlined": "_u-typography-base--underlined_k90cj_71",
34
+ "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_k90cj_74",
35
+ "chip--button": "_chip--button_k90cj_90",
36
+ "chip--outlined": "_chip--outlined_k90cj_103",
37
+ "chip--contained": "_chip--contained_k90cj_109",
38
+ chip__adornment: P,
39
+ chip__remove: z,
40
+ "chip__remove--disabled": "_chip__remove--disabled_k90cj_131",
41
+ "chip-loading": "_chip-loading_k90cj_135"
42
+ }, S = y((o, s) => {
43
+ const { children: _, onClickContent: t, disabled: c, className: a, variant: d } = o;
44
+ let e = r(
45
+ n.chip,
46
+ { [n["chip--outlined"]]: d === "outlined" },
47
+ { [n["chip--contained"]]: d === "contained" },
48
+ a
49
+ );
50
+ return t ? (e += ` ${n["chip--button"]}`, /* @__PURE__ */ i(
51
+ x,
52
+ {
53
+ onClick: t,
54
+ disabled: c,
55
+ "data-testid": o["data-testid"],
56
+ ref: s,
57
+ className: e,
58
+ children: _
59
+ }
60
+ )) : /* @__PURE__ */ i("span", { "data-testid": o["data-testid"], ref: s, className: e, children: _ });
61
+ }), M = y((o, s) => {
62
+ const {
63
+ label: _,
64
+ className: t,
65
+ onClickContent: c,
66
+ leftAdornment: a,
67
+ loading: d = !1,
68
+ disabled: e = !1,
69
+ variant: u = "default",
70
+ onClickRemove: m
71
+ } = o;
72
+ if (d)
73
+ return /* @__PURE__ */ i(
74
+ f,
75
+ {
76
+ className: r(n["chip-loading"], o["className-skeleton"]),
77
+ "data-testid": o["data-testid-skeleton"]
78
+ }
79
+ );
80
+ const g = r(a == null ? void 0 : a.className, n.chip__adornment), b = a != null && a.customIcon ? { ...a, className: g } : { ...a, disabled: e, className: g };
81
+ return /* @__PURE__ */ j(
82
+ S,
83
+ {
84
+ ref: s,
85
+ "data-testid": o["data-testid"],
86
+ onClickContent: c,
87
+ disabled: e,
88
+ className: t,
89
+ variant: u,
90
+ children: [
91
+ a && /* @__PURE__ */ i(C, { ...b }),
92
+ _,
93
+ m && /* @__PURE__ */ i(
94
+ "span",
95
+ {
96
+ className: r(n.chip__remove, { [n["chip__remove--disabled"]]: e }),
97
+ role: "button",
98
+ tabIndex: e ? -1 : 0,
99
+ "aria-label": "remove",
100
+ onClick: (l) => {
101
+ l == null || l.stopPropagation(), l == null || l.nativeEvent.stopImmediatePropagation(), m();
102
+ },
103
+ "aria-disabled": e,
104
+ children: /* @__PURE__ */ i(N, { icon: "circle-xmark", size: "1.125rem", color: "rgba(var(--gray-95-rgb), 0.45)" })
105
+ }
106
+ )
107
+ ]
108
+ }
109
+ );
110
+ }), h = {
111
+ "row-item": "_row-item_8z1a0_1",
112
+ "row-item--clickable": "_row-item--clickable_8z1a0_13",
113
+ "row-item--disabled": "_row-item--disabled_8z1a0_19",
114
+ "row-item__content": "_row-item__content_8z1a0_22"
115
+ }, O = y((o, s) => {
116
+ const { children: _, leftAdornment: t, disabled: c, onClick: a, buttons: d, ariaLabel: e, className: u } = o, m = r(t == null ? void 0 : t.className, h["row-item__adornment"]), b = {
117
+ onClick: (p) => {
118
+ c || a && a(p);
119
+ },
120
+ tabIndex: 0,
121
+ "aria-label": e,
122
+ role: "button"
123
+ }, l = t != null && t.customIcon ? t : { size: "1rem", ...t };
124
+ return /* @__PURE__ */ j(
125
+ "div",
126
+ {
127
+ "data-testid": o["data-testid"],
128
+ className: r(
129
+ h["row-item"],
130
+ a && h["row-item--clickable"],
131
+ a && c && h["row-item--disabled"],
132
+ u
133
+ ),
134
+ ...!!a && b,
135
+ ref: s,
136
+ children: [
137
+ t && /* @__PURE__ */ i(C, { ...l, className: m, disabled: c }),
138
+ /* @__PURE__ */ i("span", { className: r(h["row-item__content"]), children: _ }),
139
+ d && /* @__PURE__ */ i(
140
+ "div",
141
+ {
142
+ onClick: (p) => {
143
+ p == null || p.stopPropagation(), p == null || p.nativeEvent.stopImmediatePropagation();
144
+ },
145
+ children: d
146
+ }
147
+ )
148
+ ]
149
+ }
150
+ );
151
+ }), Q = y((o, s) => {
152
+ const { text: _, isSelected: t = !1, value: c, onChange: a } = o;
153
+ return /* @__PURE__ */ j(
154
+ "label",
155
+ {
156
+ className: r([k.toggle__label], { [k["toggle__label--selected"]]: t }),
157
+ "data-testid": o["data-testid"],
158
+ children: [
159
+ /* @__PURE__ */ i(
160
+ "input",
161
+ {
162
+ className: r([k.toggle__input]),
163
+ type: "radio",
164
+ ref: s,
165
+ value: c.toString(),
166
+ onChange: () => a(c),
167
+ role: "radio",
168
+ checked: t,
169
+ "aria-checked": t
170
+ }
171
+ ),
172
+ /* @__PURE__ */ i(w, { bold: !0, children: _ })
173
+ ]
174
+ }
175
+ );
176
+ });
177
+ export {
178
+ M as C,
179
+ O as R,
180
+ Q as T
181
+ };
@@ -0,0 +1 @@
1
+ ._container_hgp0p_1{position:relative;padding:1.5rem 1rem;background:var(--white-100);border:1px solid var(--gray-50);border-radius:.375rem}._container_hgp0p_1 ._chip-item-wrapper_hgp0p_8{display:flex;gap:.5rem}._container_hgp0p_1:not(first-child){min-height:4.125rem;padding:1rem;margin-top:1.5rem}._container_hgp0p_1 ._label_hgp0p_17{position:absolute;top:-1px;left:1.18rem;display:flex;align-items:center;justify-content:center;padding:0 .25rem;font-family:Lato;font-size:.6875rem;font-style:normal;font-weight:400;line-height:1rem;color:var(--gray-75);background:var(--white-100);transform:translateY(-50%)}._chips-container_hgp0p_35{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}._chip-content_hgp0p_42{display:block;font-family:Lato;font-size:.6875rem;font-style:normal;line-height:1rem;color:var(--gray-90)}._chip-label_hgp0p_51{font-weight:700}
@@ -1 +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_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)}
1
+ ._u-typography-h1_k90cj_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_k90cj_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_k90cj_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_k90cj_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_k90cj_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_k90cj_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_k90cj_43{margin:0;font-size:var(--base-font-size);font-weight:var(--base-weight);line-height:var(--base-line-height)}._u-typography-base--xxl_k90cj_49{font-size:var(--base-font-size-xxl);line-height:var(--base-line-height-xxl)}._u-typography-base--xl_k90cj_53{font-size:var(--base-font-size-xl);line-height:var(--base-line-height-xl)}._u-typography-base--lg_k90cj_57{font-size:var(--base-font-size-lg);line-height:var(--base-line-height-lg)}._u-typography-base--sm_k90cj_61,._chip_k90cj_61{font-size:var(--base-font-size-sm);line-height:var(--base-line-height-sm)}._u-typography-base--bold_k90cj_65,._chip_k90cj_61{font-weight:var(--base-bold)}._u-typography-base--strikethrough_k90cj_68{text-decoration:line-through}._u-typography-base--underlined_k90cj_71{text-decoration:underline}._u-typography-base--strikethrough-underlined_k90cj_74{text-decoration:underline line-through}._chip_k90cj_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_k90cj_61:not(:disabled){color:rgb(var(--gray-95-rgb) .65)}._chip--button_k90cj_90{cursor:pointer;border-color:transparent}._chip--button_k90cj_90:disabled{cursor:initial}._chip--button_k90cj_90:focus-visible{outline:none}._chip--button_k90cj_90:focus{outline:2px solid var(--black-100)}._chip--outlined_k90cj_103{padding:.3125rem .5rem;background-color:var(--white-100);border:1px solid var(--border);border-radius:calc(var(--border-radius-soft) * 4)}._chip--contained_k90cj_109{padding:.3125rem .5rem;border:1px solid var(--border);border-color:var(--accent);border-radius:calc(var(--border-radius-soft) * 4)}._chip__adornment_k90cj_115{display:flex;align-items:center;margin-right:.5rem}._chip__remove_k90cj_120{display:flex;margin-left:.5rem}._chip__remove_k90cj_120:focus-visible{outline:none}._chip__remove_k90cj_120:focus:not(:disabled){border-radius:calc(var(--border-radius-soft) * 4);outline:2px solid var(--black-100)}._chip__remove--disabled_k90cj_131{cursor:default}._chip-loading_k90cj_135{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)}
@@ -2,7 +2,7 @@ import { AdornmentProps } from '../../main';
2
2
  import { ReactNode } from 'react';
3
3
 
4
4
  export type Variant = 'default' | 'contained' | 'outlined';
5
- type ChipProps = {
5
+ export type ChipProps = {
6
6
  /** Main content to display, typically just some text */
7
7
  label: ReactNode;
8
8
  /** Whether to show loading state (skeleton) */
@@ -27,5 +27,7 @@ type ChipProps = {
27
27
  /** Dataset test id only used for tests, used to hook onto the loading skeleton component for this chip */
28
28
  'data-testid-skeleton'?: string;
29
29
  };
30
+ export type ChipWrapperProps = Pick<ChipProps, 'data-testid' | 'onClickContent' | 'disabled' | 'className' | 'variant'> & {
31
+ children?: ReactNode;
32
+ };
30
33
  export declare const Chip: import('react').ForwardRefExoticComponent<ChipProps & import('react').RefAttributes<unknown>>;
31
- export {};
@@ -5,7 +5,7 @@ import "../Adornment/Adornment.js";
5
5
  import "../Icon/Icon.js";
6
6
  import "../Typography/Typography.js";
7
7
  import "../Button/Button.js";
8
- import { C as k } from "../../Toggle-uBAGft1J.js";
8
+ import { C as k } from "../../Toggle-BQPzu8NV.js";
9
9
  import "../Dialog/Backdrop.js";
10
10
  import "../IconButton/IconButton.js";
11
11
  import "../Select/Select.js";
@@ -2,19 +2,7 @@ import { StoryObj } from '@storybook/react';
2
2
 
3
3
  declare const meta: {
4
4
  title: string;
5
- component: import('react').ForwardRefExoticComponent<{
6
- label: import('react').ReactNode;
7
- loading?: boolean | undefined;
8
- leftAdornment?: import('../Adornment/Adornment').AdornmentProps | undefined;
9
- 'data-testid'?: string | undefined;
10
- onClickContent?: (() => void) | undefined;
11
- onClickRemove?: (() => void) | undefined;
12
- disabled?: boolean | undefined;
13
- className?: string | undefined;
14
- 'className-skeleton'?: string | undefined;
15
- variant?: import('./Chip').Variant | undefined;
16
- 'data-testid-skeleton'?: string | undefined;
17
- } & import('react').RefAttributes<unknown>>;
5
+ component: import('react').ForwardRefExoticComponent<import('./Chip').ChipProps & import('react').RefAttributes<unknown>>;
18
6
  tags: string[];
19
7
  decorators: ((Story: import('@storybook/types').PartialStoryFn<import('@storybook/react').ReactRenderer, {
20
8
  label: import('react').ReactNode;
@@ -0,0 +1,12 @@
1
+ import { ChipProps } from '../Chip/Chip';
2
+
3
+ type ResultWithChipsProps = {
4
+ chips: Array<Partial<ChipProps> & {
5
+ joinLabel?: string | React.ReactNode;
6
+ key?: string;
7
+ }>;
8
+ title: string;
9
+ className?: string;
10
+ };
11
+ declare const ResultWithChips: ({ chips, title, className, ...rest }: ResultWithChipsProps) => import("react/jsx-runtime").JSX.Element;
12
+ export { ResultWithChips };
@@ -0,0 +1,33 @@
1
+ import '../../assets/ResultWithChips.css';
2
+ import { jsxs as i, jsx as e } from "react/jsx-runtime";
3
+ import { C as t } from "../../Toggle-BQPzu8NV.js";
4
+ const r = "_container_hgp0p_1", o = "_label_hgp0p_17", a = {
5
+ container: r,
6
+ "chip-item-wrapper": "_chip-item-wrapper_hgp0p_8",
7
+ label: o,
8
+ "chips-container": "_chips-container_hgp0p_35",
9
+ "chip-content": "_chip-content_hgp0p_42",
10
+ "chip-label": "_chip-label_hgp0p_51"
11
+ }, b = ({ chips: c, title: p, className: s, ...h }) => /* @__PURE__ */ i("div", { ...h, className: [a.container, s || ""].join(" ").trim(), children: [
12
+ /* @__PURE__ */ e("span", { className: a.label, children: p }),
13
+ /* @__PURE__ */ e("div", { className: a["chips-container"], "data-testid": "chips-container", children: c.map((l, n) => /* @__PURE__ */ i("span", { className: a["chip-item-wrapper"], children: [
14
+ /* @__PURE__ */ e(
15
+ t,
16
+ {
17
+ ...l,
18
+ label: /* @__PURE__ */ e("span", { className: a["chip-content"], children: typeof l.label == "string" ? /* @__PURE__ */ e("strong", { className: a["chip-label"], children: l.label }) : l.label })
19
+ },
20
+ `chip-${n}`
21
+ ),
22
+ l.joinLabel && n < c.length - 1 && /* @__PURE__ */ e(
23
+ t,
24
+ {
25
+ label: /* @__PURE__ */ e("span", { className: a["chip-content"], children: /* @__PURE__ */ e("strong", { className: a["chip-label"], children: l.joinLabel }) })
26
+ },
27
+ `join-${n}`
28
+ )
29
+ ] }, `full-chip-${n}`)) })
30
+ ] });
31
+ export {
32
+ b as ResultWithChips
33
+ };
@@ -5,7 +5,7 @@ import "../Adornment/Adornment.js";
5
5
  import "../Icon/Icon.js";
6
6
  import "../Typography/Typography.js";
7
7
  import "../Button/Button.js";
8
- import { R as I, R as b } from "../../Toggle-uBAGft1J.js";
8
+ import { R as I, R as b } from "../../Toggle-BQPzu8NV.js";
9
9
  import "../Dialog/Backdrop.js";
10
10
  import "../IconButton/IconButton.js";
11
11
  import "../Select/Select.js";
@@ -4,7 +4,7 @@ import "../../clsx-DB4S2d7J.js";
4
4
  import "../Icon/Icon.js";
5
5
  import "../Typography/Typography.js";
6
6
  import "../Button/Button.js";
7
- import { T as b } from "../../Toggle-uBAGft1J.js";
7
+ import { T as b } from "../../Toggle-BQPzu8NV.js";
8
8
  import "../Dialog/Backdrop.js";
9
9
  import "../IconButton/IconButton.js";
10
10
  import "../Select/Select.js";
@@ -1,4 +1,4 @@
1
- import { T as e } from "../../Toggle-uBAGft1J.js";
1
+ import { T as e } from "../../Toggle-BQPzu8NV.js";
2
2
  import { G as p } from "../../Group-B3p31ftp.js";
3
3
  export {
4
4
  p as ToggleGroup,
package/dist/main.d.ts CHANGED
@@ -17,6 +17,7 @@ export * from './components/InputSearch/InputSearch';
17
17
  export * from './components/LoadingSpinner/LoadingSpinner';
18
18
  export * from './components/PageHeader/PageHeader';
19
19
  export * from './components/Pagination/Pagination';
20
+ export * from './components/ResultWithChips/ResultWithChips';
20
21
  export * from './components/RowItem/RowItem';
21
22
  export * from './components/Select/Select';
22
23
  export * from './components/Skeleton/Skeleton';
package/dist/main.js CHANGED
@@ -3,83 +3,85 @@ import { Advice as p } from "./components/Advice/Advice.js";
3
3
  import { Autocomplete as f } from "./components/Autocomplete/Autocomplete.js";
4
4
  import { Button as x } from "./components/Button/Button.js";
5
5
  import { Checkbox as l } from "./components/Checkbox/Checkbox.js";
6
- import { C as T, R as s, T as c } from "./Toggle-uBAGft1J.js";
7
- import { Dialog as S } from "./components/Dialog/Dialog.js";
6
+ import { C as T, R as s, T as c } from "./Toggle-BQPzu8NV.js";
7
+ import { Dialog as u } from "./components/Dialog/Dialog.js";
8
8
  import { EllipsisTooltip as d } from "./components/EllipsisTooltip/EllipsisTooltip.js";
9
9
  import { Icon as k } from "./components/Icon/Icon.js";
10
- import { IconButton as I } from "./components/IconButton/IconButton.js";
10
+ import { IconButton as C } from "./components/IconButton/IconButton.js";
11
11
  import { Input as D } from "./components/Input/Input.js";
12
12
  import { InputSearch as A } from "./components/InputSearch/InputSearch.js";
13
13
  import { LoadingSpinner as v } from "./components/LoadingSpinner/LoadingSpinner.js";
14
14
  import { PageHeader as G } from "./components/PageHeader/PageHeader.js";
15
- import { Pagination as R, paginationDefaultTranslations as w } from "./components/Pagination/Pagination.js";
16
- import { Select as L, SelectOption as N } from "./components/Select/Select.js";
17
- import { Skeleton as j, SkeletonCircle as q, SkeletonTable as z } from "./components/Skeleton/Skeleton.js";
18
- import { Snackbar as J } from "./components/Snackbar/Snackbar.js";
19
- import { SortTooltip as M, sortTooltipDefaultTranslations as Q } from "./components/SortTooltip/SortTooltip.js";
20
- import { Stepper as V } from "./components/Stepper/Stepper.js";
21
- import { StepperNavigator as X } from "./components/StepperNavigator/StepperNavigator.js";
22
- import { TBody as Z, THead as _, Table as $, Td as oo, Th as ro, Tr as eo } from "./components/Table/Table.js";
23
- import { Tabs as po } from "./components/Tabs/Tabs.js";
24
- import { TextDisplay as fo } from "./components/TextDisplay/TextDisplay.js";
25
- import { Toggle as xo } from "./components/Toggle/Toggle.js";
26
- import { G as lo } from "./Group-B3p31ftp.js";
27
- import { Tooltip as To } from "./components/Tooltip/Tooltip.js";
28
- import { Text as co, Typography as go } from "./components/Typography/Typography.js";
29
- import { SnackbarContext as uo, SnackbarProvider as bo, useSnackbar as ko } from "./contexts/SnackbarProvider/SnackbarProvider.js";
30
- import { default as Io } from "./components/Dialog/DialogTitle.js";
31
- import { default as Do } from "./components/Dialog/Content.js";
32
- import { default as Ao } from "./components/Dialog/Actions.js";
33
- import { Tab as vo } from "./components/Tabs/Tab.js";
34
- import { TabPanel as Go } from "./components/Tabs/TabPanel.js";
15
+ import { Pagination as H, paginationDefaultTranslations as w } from "./components/Pagination/Pagination.js";
16
+ import { ResultWithChips as L } from "./components/ResultWithChips/ResultWithChips.js";
17
+ import { Select as O, SelectOption as W } from "./components/Select/Select.js";
18
+ import { Skeleton as q, SkeletonCircle as z, SkeletonTable as F } from "./components/Skeleton/Skeleton.js";
19
+ import { Snackbar as K } from "./components/Snackbar/Snackbar.js";
20
+ import { SortTooltip as Q, sortTooltipDefaultTranslations as U } from "./components/SortTooltip/SortTooltip.js";
21
+ import { Stepper as X } from "./components/Stepper/Stepper.js";
22
+ import { StepperNavigator as Z } from "./components/StepperNavigator/StepperNavigator.js";
23
+ import { TBody as $, THead as oo, Table as ro, Td as eo, Th as to, Tr as po } from "./components/Table/Table.js";
24
+ import { Tabs as fo } from "./components/Tabs/Tabs.js";
25
+ import { TextDisplay as xo } from "./components/TextDisplay/TextDisplay.js";
26
+ import { Toggle as lo } from "./components/Toggle/Toggle.js";
27
+ import { G as To } from "./Group-B3p31ftp.js";
28
+ import { Tooltip as co } from "./components/Tooltip/Tooltip.js";
29
+ import { Text as uo, Typography as So } from "./components/Typography/Typography.js";
30
+ import { SnackbarContext as ko, SnackbarProvider as ho, useSnackbar as Co } from "./contexts/SnackbarProvider/SnackbarProvider.js";
31
+ import { default as Do } from "./components/Dialog/DialogTitle.js";
32
+ import { default as Ao } from "./components/Dialog/Content.js";
33
+ import { default as vo } from "./components/Dialog/Actions.js";
34
+ import { Tab as Go } from "./components/Tabs/Tab.js";
35
+ import { TabPanel as Ho } from "./components/Tabs/TabPanel.js";
35
36
  export {
36
- Ao as Actions,
37
+ vo as Actions,
37
38
  e as Adornment,
38
39
  p as Advice,
39
40
  f as Autocomplete,
40
41
  x as Button,
41
42
  l as Checkbox,
42
43
  T as Chip,
43
- Do as Content,
44
- S as Dialog,
45
- Io as DialogTitle,
44
+ Ao as Content,
45
+ u as Dialog,
46
+ Do as DialogTitle,
46
47
  d as EllipsisTooltip,
47
48
  k as Icon,
48
- I as IconButton,
49
+ C as IconButton,
49
50
  D as Input,
50
51
  A as InputSearch,
51
52
  v as LoadingSpinner,
52
53
  G as PageHeader,
53
- R as Pagination,
54
+ H as Pagination,
55
+ L as ResultWithChips,
54
56
  s as RowItem,
55
- L as Select,
56
- N as SelectOption,
57
- j as Skeleton,
58
- q as SkeletonCircle,
59
- z as SkeletonTable,
60
- J as Snackbar,
61
- uo as SnackbarContext,
62
- bo as SnackbarProvider,
63
- M as SortTooltip,
64
- V as Stepper,
65
- X as StepperNavigator,
66
- Z as TBody,
67
- _ as THead,
68
- vo as Tab,
69
- Go as TabPanel,
70
- $ as Table,
71
- po as Tabs,
72
- oo as Td,
73
- co as Text,
74
- fo as TextDisplay,
75
- ro as Th,
76
- xo as Toggle,
77
- lo as ToggleGroup,
57
+ O as Select,
58
+ W as SelectOption,
59
+ q as Skeleton,
60
+ z as SkeletonCircle,
61
+ F as SkeletonTable,
62
+ K as Snackbar,
63
+ ko as SnackbarContext,
64
+ ho as SnackbarProvider,
65
+ Q as SortTooltip,
66
+ X as Stepper,
67
+ Z as StepperNavigator,
68
+ $ as TBody,
69
+ oo as THead,
70
+ Go as Tab,
71
+ Ho as TabPanel,
72
+ ro as Table,
73
+ fo as Tabs,
74
+ eo as Td,
75
+ uo as Text,
76
+ xo as TextDisplay,
77
+ to as Th,
78
+ lo as Toggle,
79
+ To as ToggleGroup,
78
80
  c as ToggleGroupItem,
79
- To as Tooltip,
80
- eo as Tr,
81
- go as Typography,
81
+ co as Tooltip,
82
+ po as Tr,
83
+ So as Typography,
82
84
  w as paginationDefaultTranslations,
83
- Q as sortTooltipDefaultTranslations,
84
- ko as useSnackbar
85
+ U as sortTooltipDefaultTranslations,
86
+ Co as useSnackbar
85
87
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@pismo/marola",
3
3
  "description": "CDX tribe component library",
4
- "version": "1.0.0-beta.14",
4
+ "version": "1.0.0-beta.15",
5
5
  "type": "module",
6
6
  "main": "dist/main.js",
7
7
  "types": "dist/main.d.ts",
@@ -1,181 +0,0 @@
1
- import './assets/Toggle2.css';
2
- import { jsx as e, jsxs as q } from "react/jsx-runtime";
3
- import { forwardRef as y } from "react";
4
- import { c as s } from "./clsx-DB4S2d7J.js";
5
- import { Icon as N } from "./components/Icon/Icon.js";
6
- import { Typography as w } from "./components/Typography/Typography.js";
7
- import "./components/Button/Button.js";
8
- import { Adornment as C } from "./components/Adornment/Adornment.js";
9
- import "./components/Dialog/Backdrop.js";
10
- import "./components/IconButton/IconButton.js";
11
- import "./components/Select/Select.js";
12
- import "./components/Table/Table.js";
13
- import "./components/Tabs/Tabs.js";
14
- import { s as k } from "./Group-B3p31ftp.js";
15
- import "./contexts/SnackbarProvider/SnackbarProvider.js";
16
- import { Skeleton as f } from "./components/Skeleton/Skeleton.js";
17
- import { B as x } from "./Button-DiLqcAJG.js";
18
- const I = "_chip_1qd8i_61", P = "_chip__adornment_1qd8i_115", z = "_chip__remove_1qd8i_120", p = {
19
- "u-typography-h1": "_u-typography-h1_1qd8i_1",
20
- "u-typography-h2": "_u-typography-h2_1qd8i_8",
21
- "u-typography-h3": "_u-typography-h3_1qd8i_15",
22
- "u-typography-h4": "_u-typography-h4_1qd8i_22",
23
- "u-typography-h5": "_u-typography-h5_1qd8i_29",
24
- "u-typography-h6": "_u-typography-h6_1qd8i_36",
25
- "u-typography-base": "_u-typography-base_1qd8i_43",
26
- "u-typography-base--xxl": "_u-typography-base--xxl_1qd8i_49",
27
- "u-typography-base--xl": "_u-typography-base--xl_1qd8i_53",
28
- "u-typography-base--lg": "_u-typography-base--lg_1qd8i_57",
29
- "u-typography-base--sm": "_u-typography-base--sm_1qd8i_61",
30
- chip: I,
31
- "u-typography-base--bold": "_u-typography-base--bold_1qd8i_65",
32
- "u-typography-base--strikethrough": "_u-typography-base--strikethrough_1qd8i_68",
33
- "u-typography-base--underlined": "_u-typography-base--underlined_1qd8i_71",
34
- "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_1qd8i_74",
35
- "chip--button": "_chip--button_1qd8i_90",
36
- "chip--outlined": "_chip--outlined_1qd8i_103",
37
- "chip--contained": "_chip--contained_1qd8i_109",
38
- chip__adornment: P,
39
- chip__remove: z,
40
- "chip__remove--disabled": "_chip__remove--disabled_1qd8i_131",
41
- "chip-loading": "_chip-loading_1qd8i_135"
42
- }, S = y((i, c) => {
43
- const { children: _, onClickContent: t, disabled: r, className: a, variant: n } = i;
44
- let o = s(
45
- p.chip,
46
- { [p["chip--outlined"]]: n === "outlined" },
47
- { [p["chip--contained"]]: n === "contained" },
48
- a
49
- );
50
- return t ? (o += ` ${p["chip--button"]}`, /* @__PURE__ */ e(
51
- x,
52
- {
53
- onClick: t,
54
- disabled: r,
55
- "data-testid": i["data-testid"],
56
- ref: c,
57
- className: o,
58
- children: _
59
- }
60
- )) : /* @__PURE__ */ e("span", { "data-testid": i["data-testid"], ref: c, className: o, children: _ });
61
- }), M = y((i, c) => {
62
- const {
63
- label: _,
64
- className: t,
65
- onClickContent: r,
66
- leftAdornment: a,
67
- loading: n = !1,
68
- disabled: o = !1,
69
- variant: u = "default",
70
- onClickRemove: m
71
- } = i;
72
- if (n)
73
- return /* @__PURE__ */ e(
74
- f,
75
- {
76
- className: s(p["chip-loading"], i["className-skeleton"]),
77
- "data-testid": i["data-testid-skeleton"]
78
- }
79
- );
80
- const g = s(a == null ? void 0 : a.className, p.chip__adornment), b = a != null && a.customIcon ? { ...a, className: g } : { ...a, disabled: o, className: g };
81
- return /* @__PURE__ */ q(
82
- S,
83
- {
84
- ref: c,
85
- "data-testid": i["data-testid"],
86
- onClickContent: r,
87
- disabled: o,
88
- className: t,
89
- variant: u,
90
- children: [
91
- a && /* @__PURE__ */ e(C, { ...b }),
92
- _,
93
- m && /* @__PURE__ */ e(
94
- "span",
95
- {
96
- className: s(p.chip__remove, { [p["chip__remove--disabled"]]: o }),
97
- role: "button",
98
- tabIndex: o ? -1 : 0,
99
- "aria-label": "remove",
100
- onClick: (d) => {
101
- d == null || d.stopPropagation(), d == null || d.nativeEvent.stopImmediatePropagation(), m();
102
- },
103
- "aria-disabled": o,
104
- children: /* @__PURE__ */ e(N, { icon: "circle-xmark", size: "1.125rem", color: "rgba(var(--gray-95-rgb), 0.45)" })
105
- }
106
- )
107
- ]
108
- }
109
- );
110
- }), h = {
111
- "row-item": "_row-item_8z1a0_1",
112
- "row-item--clickable": "_row-item--clickable_8z1a0_13",
113
- "row-item--disabled": "_row-item--disabled_8z1a0_19",
114
- "row-item__content": "_row-item__content_8z1a0_22"
115
- }, O = y((i, c) => {
116
- const { children: _, leftAdornment: t, disabled: r, onClick: a, buttons: n, ariaLabel: o, className: u } = i, m = s(t == null ? void 0 : t.className, h["row-item__adornment"]), b = {
117
- onClick: (l) => {
118
- r || a && a(l);
119
- },
120
- tabIndex: 0,
121
- "aria-label": o,
122
- role: "button"
123
- }, d = t != null && t.customIcon ? t : { size: "1rem", ...t };
124
- return /* @__PURE__ */ q(
125
- "div",
126
- {
127
- "data-testid": i["data-testid"],
128
- className: s(
129
- h["row-item"],
130
- a && h["row-item--clickable"],
131
- a && r && h["row-item--disabled"],
132
- u
133
- ),
134
- ...!!a && b,
135
- ref: c,
136
- children: [
137
- t && /* @__PURE__ */ e(C, { ...d, className: m, disabled: r }),
138
- /* @__PURE__ */ e("span", { className: s(h["row-item__content"]), children: _ }),
139
- n && /* @__PURE__ */ e(
140
- "div",
141
- {
142
- onClick: (l) => {
143
- l == null || l.stopPropagation(), l == null || l.nativeEvent.stopImmediatePropagation();
144
- },
145
- children: n
146
- }
147
- )
148
- ]
149
- }
150
- );
151
- }), Q = y((i, c) => {
152
- const { text: _, isSelected: t = !1, value: r, onChange: a } = i;
153
- return /* @__PURE__ */ q(
154
- "label",
155
- {
156
- className: s([k.toggle__label], { [k["toggle__label--selected"]]: t }),
157
- "data-testid": i["data-testid"],
158
- children: [
159
- /* @__PURE__ */ e(
160
- "input",
161
- {
162
- className: s([k.toggle__input]),
163
- type: "radio",
164
- ref: c,
165
- value: r.toString(),
166
- onChange: () => a(r),
167
- role: "radio",
168
- checked: t,
169
- "aria-checked": t
170
- }
171
- ),
172
- /* @__PURE__ */ e(w, { bold: !0, children: _ })
173
- ]
174
- }
175
- );
176
- });
177
- export {
178
- M as C,
179
- O as R,
180
- Q as T
181
- };