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

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.
Files changed (23) hide show
  1. package/dist/Dialog.module-HFAN4mAD.js +30 -0
  2. package/dist/Toggle-BQPzu8NV.js +181 -0
  3. package/dist/assets/Dialog.css +1 -1
  4. package/dist/assets/ResultWithChips.css +1 -0
  5. package/dist/assets/Toggle2.css +1 -1
  6. package/dist/components/Chip/Chip.d.ts +4 -2
  7. package/dist/components/Chip/Chip.js +1 -1
  8. package/dist/components/Chip/Chip.stories.d.ts +1 -13
  9. package/dist/components/Dialog/Actions.js +1 -1
  10. package/dist/components/Dialog/Backdrop.js +1 -1
  11. package/dist/components/Dialog/CloseIconButton.js +1 -1
  12. package/dist/components/Dialog/Dialog.js +63 -62
  13. package/dist/components/Dialog/DialogTitle.js +1 -1
  14. package/dist/components/ResultWithChips/ResultWithChips.d.ts +12 -0
  15. package/dist/components/ResultWithChips/ResultWithChips.js +33 -0
  16. package/dist/components/RowItem/RowItem.js +1 -1
  17. package/dist/components/ToggleGroup/Toggle.js +1 -1
  18. package/dist/components/ToggleGroup/ToggleGroup.js +1 -1
  19. package/dist/main.d.ts +1 -0
  20. package/dist/main.js +59 -57
  21. package/package.json +1 -1
  22. package/dist/Dialog.module-DFcZsVAd.js +0 -30
  23. package/dist/Toggle-uBAGft1J.js +0 -181
package/dist/Dialog.module-HFAN4mAD.js ADDED
@@ -0,0 +1,30 @@
1
+ import './assets/Dialog.css';
2
+ const _ = "_dialog__subtitle_1qs0q_53", a = "_dialog_1qs0q_53", o = "_dialog__backdrop_1qs0q_88", s = "_dialog__panel_1qs0q_96", p = "_dialog__title_1qs0q_57", t = "_dialog__divider_1qs0q_122", g = "_dialog__actions_1qs0q_135", y = {
3
+ "u-typography-h1": "_u-typography-h1_1qs0q_1",
4
+ "u-typography-h2": "_u-typography-h2_1qs0q_8",
5
+ "u-typography-h3": "_u-typography-h3_1qs0q_15",
6
+ "u-typography-h4": "_u-typography-h4_1qs0q_22",
7
+ "u-typography-h5": "_u-typography-h5_1qs0q_29",
8
+ "u-typography-h6": "_u-typography-h6_1qs0q_36",
9
+ "u-typography-base": "_u-typography-base_1qs0q_43",
10
+ "u-typography-base--xxl": "_u-typography-base--xxl_1qs0q_49",
11
+ "u-typography-base--xl": "_u-typography-base--xl_1qs0q_53",
12
+ dialog__subtitle: _,
13
+ "u-typography-base--lg": "_u-typography-base--lg_1qs0q_57",
14
+ "dialog__title--small": "_dialog__title--small_1qs0q_57",
15
+ "u-typography-base--sm": "_u-typography-base--sm_1qs0q_61",
16
+ "u-typography-base--bold": "_u-typography-base--bold_1qs0q_65",
17
+ "u-typography-base--strikethrough": "_u-typography-base--strikethrough_1qs0q_68",
18
+ "u-typography-base--underlined": "_u-typography-base--underlined_1qs0q_71",
19
+ "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_1qs0q_74",
20
+ dialog: a,
21
+ dialog__backdrop: o,
22
+ dialog__panel: s,
23
+ dialog__title: p,
24
+ dialog__divider: t,
25
+ "dialog__close-icon": "_dialog__close-icon_1qs0q_126",
26
+ dialog__actions: g
27
+ };
28
+ export {
29
+ y as s
30
+ };
package/dist/Toggle-BQPzu8NV.js ADDED
@@ -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
+ };
package/dist/assets/Dialog.css CHANGED
@@ -1 +1 @@
1
- ._u-typography-h1_1u858_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_1u858_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_1u858_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_1u858_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_1u858_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_1u858_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_1u858_43{margin:0;font-size:var(--base-font-size);font-weight:var(--base-weight);line-height:var(--base-line-height)}._u-typography-base--xxl_1u858_49{font-size:var(--base-font-size-xxl);line-height:var(--base-line-height-xxl)}._u-typography-base--xl_1u858_53,._dialog__subtitle_1u858_53{font-size:var(--base-font-size-xl);line-height:var(--base-line-height-xl)}._u-typography-base--lg_1u858_57,._dialog__title--small_1u858_57{font-size:var(--base-font-size-lg);line-height:var(--base-line-height-lg)}._u-typography-base--sm_1u858_61{font-size:var(--base-font-size-sm);line-height:var(--base-line-height-sm)}._u-typography-base--bold_1u858_65{font-weight:var(--base-bold)}._u-typography-base--strikethrough_1u858_68{text-decoration:line-through}._u-typography-base--underlined_1u858_71{text-decoration:underline}._u-typography-base--strikethrough-underlined_1u858_74{text-decoration:underline line-through}._dialog_1u858_53{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1300;display:flex;align-items:center;justify-content:center;-webkit-box-align:center;-webkit-box-pack:center}._dialog__backdrop_1u858_88{position:fixed;z-index:-1;width:100%;height:100%;background-color:rgb(var(--black-100-rgb),.05);-webkit-tap-highlight-color:transparent}._dialog__panel_1u858_96{position:relative;display:flex;flex-direction:column;gap:8px;width:680px;padding:24px;overflow:hidden;font-weight:500;color:var(--gray-75);text-align:start;background-color:var(--white-100);border:1px solid rgb(218,226,237);border-radius:8px;box-shadow:0 10px 20px rgb(var(--black-100-rgb),.2)}._dialog__title_1u858_57{padding-top:8px;padding-bottom:8px}._dialog__subtitle_1u858_53{font-family:Lato,sans-serif;color:var(--secondary-orange-dark);text-align:left;letter-spacing:0}._dialog__divider_1u858_122{width:100%;border-top:1px solid var(--gray-10)}._dialog__close-icon_1u858_126{position:absolute;top:27px;right:16px;padding:0;margin:0;background:none;border:none}._dialog__actions_1u858_135{display:flex;gap:8px;justify-content:center;margin-bottom:16px}
1
+ ._u-typography-h1_1qs0q_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_1qs0q_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_1qs0q_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_1qs0q_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_1qs0q_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_1qs0q_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_1qs0q_43{margin:0;font-size:var(--base-font-size);font-weight:var(--base-weight);line-height:var(--base-line-height)}._u-typography-base--xxl_1qs0q_49{font-size:var(--base-font-size-xxl);line-height:var(--base-line-height-xxl)}._u-typography-base--xl_1qs0q_53,._dialog__subtitle_1qs0q_53{font-size:var(--base-font-size-xl);line-height:var(--base-line-height-xl)}._u-typography-base--lg_1qs0q_57,._dialog__title--small_1qs0q_57{font-size:var(--base-font-size-lg);line-height:var(--base-line-height-lg)}._u-typography-base--sm_1qs0q_61{font-size:var(--base-font-size-sm);line-height:var(--base-line-height-sm)}._u-typography-base--bold_1qs0q_65{font-weight:var(--base-bold)}._u-typography-base--strikethrough_1qs0q_68{text-decoration:line-through}._u-typography-base--underlined_1qs0q_71{text-decoration:underline}._u-typography-base--strikethrough-underlined_1qs0q_74{text-decoration:underline line-through}._dialog_1qs0q_53{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1300;display:flex;align-items:center;justify-content:center;-webkit-box-align:center;-webkit-box-pack:center}._dialog__backdrop_1qs0q_88{position:fixed;z-index:-1;width:100%;height:100%;background-color:rgb(var(--black-100-rgb),.05);-webkit-tap-highlight-color:transparent}._dialog__panel_1qs0q_96{position:relative;display:flex;flex-direction:column;gap:8px;width:680px;padding:2rem;overflow:hidden;font-weight:500;color:var(--gray-75);text-align:start;background-color:var(--white-100);border:1px solid rgb(218,226,237);border-radius:8px;box-shadow:0 10px 20px rgb(var(--black-100-rgb),.2)}._dialog__title_1qs0q_57{padding-bottom:1rem}._dialog__subtitle_1qs0q_53{margin-top:1rem;font-family:Lato,sans-serif;color:var(--secondary-orange-dark);text-align:left;letter-spacing:0}._dialog__divider_1qs0q_122{width:100%;border-top:1px solid var(--gray-10)}._dialog__close-icon_1qs0q_126{position:absolute;top:27px;right:16px;padding:0;margin:0;background:none;border:none}._dialog__actions_1qs0q_135{display:flex;gap:.5rem;justify-content:center;margin-top:1.5rem}
package/dist/assets/ResultWithChips.css ADDED
@@ -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}
package/dist/assets/Toggle2.css CHANGED
@@ -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)}
package/dist/components/Chip/Chip.d.ts CHANGED
@@ -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 {};
package/dist/components/Chip/Chip.js CHANGED
@@ -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";
package/dist/components/Chip/Chip.stories.d.ts CHANGED
@@ -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;
package/dist/components/Dialog/Actions.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { jsx as o } from "react/jsx-runtime";
2
- import { s as t } from "../../Dialog.module-DFcZsVAd.js";
2
+ import { s as t } from "../../Dialog.module-HFAN4mAD.js";
3
3
  const i = ({ children: s }) => /* @__PURE__ */ o("div", { className: t.dialog__actions, children: s });
4
4
  export {
5
5
  i as default
package/dist/components/Dialog/Backdrop.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsx as a } from "react/jsx-runtime";
2
2
  import { forwardRef as t } from "react";
3
- import { s as e } from "../../Dialog.module-DFcZsVAd.js";
3
+ import { s as e } from "../../Dialog.module-HFAN4mAD.js";
4
4
  const i = t((o, r) => {
5
5
  const { open: m, className: p, ...s } = o;
6
6
  return /* @__PURE__ */ a("div", { className: e.dialog__backdrop, ref: r, ...s });
package/dist/components/Dialog/CloseIconButton.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsx as s } from "react/jsx-runtime";
2
2
  import { Icon as r } from "../Icon/Icon.js";
3
- import { s as t } from "../../Dialog.module-DFcZsVAd.js";
3
+ import { s as t } from "../../Dialog.module-HFAN4mAD.js";
4
4
  import { B as a } from "../../Button-DiLqcAJG.js";
5
5
  const d = ({ handleOnClose: i, className: o }) => {
6
6
  const l = o != null ? t["dialog__close-icon "] + o : t["dialog__close-icon"];
package/dist/components/Dialog/Dialog.js CHANGED
@@ -1,16 +1,17 @@
1
1
  import { jsxs as $, jsx as S } from "react/jsx-runtime";
2
- import { default as Ye } from "./Actions.js";
3
- import oe from "./Backdrop.js";
4
- import re from "./CloseIconButton.js";
5
- import { default as Ge } from "./Content.js";
6
- import { s as q } from "../../Dialog.module-DFcZsVAd.js";
7
- import se from "./DialogTitle.js";
8
- import { u as Z, P as i, f as ie, b as C, g as ae, a as le, _ as ce, c as z, d as de, e as ue } from "../../useSlotProps-kRhf7Gil.js";
2
+ import { c as oe } from "../../clsx-DB4S2d7J.js";
3
+ import { default as Ge } from "./Actions.js";
4
+ import re from "./Backdrop.js";
5
+ import se from "./CloseIconButton.js";
6
+ import { default as Je } from "./Content.js";
7
+ import { s as q } from "../../Dialog.module-HFAN4mAD.js";
8
+ import ie from "./DialogTitle.js";
9
+ import { u as Z, P as i, f as ae, b as C, g as le, a as ce, _ as de, c as z, d as ue, e as fe } from "../../useSlotProps-kRhf7Gil.js";
9
10
  import * as f from "react";
10
11
  import { o as w, e as ee } from "../../ownerDocument-B61GUaFs.js";
11
12
  import { u as G } from "../../useEventCallback-BAQJJ3ye.js";
12
- import { P as fe, H as pe } from "../../Portal-B_Es6eUL.js";
13
- import { e as be } from "../../index-D3Wj0eid.js";
13
+ import { P as pe, H as be } from "../../Portal-B_Es6eUL.js";
14
+ import { e as he } from "../../index-D3Wj0eid.js";
14
15
  function X(...e) {
15
16
  return e.reduce((t, o) => o == null ? t : function(...s) {
16
17
  t.apply(this, s), o.apply(this, s);
@@ -20,37 +21,37 @@ function X(...e) {
20
21
  function Y(e) {
21
22
  return w(e).defaultView || window;
22
23
  }
23
- function he(e) {
24
+ function me(e) {
24
25
  const t = e.documentElement.clientWidth;
25
26
  return Math.abs(window.innerWidth - t);
26
27
  }
27
- const me = ["input", "select", "textarea", "a[href]", "button", "[tabindex]", "audio[controls]", "video[controls]", '[contenteditable]:not([contenteditable="false"])'].join(",");
28
- function ge(e) {
28
+ const ge = ["input", "select", "textarea", "a[href]", "button", "[tabindex]", "audio[controls]", "video[controls]", '[contenteditable]:not([contenteditable="false"])'].join(",");
29
+ function Ee(e) {
29
30
  const t = parseInt(e.getAttribute("tabindex") || "", 10);
30
31
  return Number.isNaN(t) ? e.contentEditable === "true" || (e.nodeName === "AUDIO" || e.nodeName === "VIDEO" || e.nodeName === "DETAILS") && e.getAttribute("tabindex") === null ? 0 : e.tabIndex : t;
31
32
  }
32
- function Ee(e) {
33
+ function Te(e) {
33
34
  if (e.tagName !== "INPUT" || e.type !== "radio" || !e.name)
34
35
  return !1;
35
36
  const t = (n) => e.ownerDocument.querySelector(`input[type="radio"]${n}`);
36
37
  let o = t(`[name="${e.name}"]:checked`);
37
38
  return o || (o = t(`[name="${e.name}"]`)), o !== e;
38
39
  }
39
- function Te(e) {
40
- return !(e.disabled || e.tagName === "INPUT" && e.type === "hidden" || Ee(e));
41
- }
42
40
  function ye(e) {
41
+ return !(e.disabled || e.tagName === "INPUT" && e.type === "hidden" || Te(e));
42
+ }
43
+ function xe(e) {
43
44
  const t = [], o = [];
44
- return Array.from(e.querySelectorAll(me)).forEach((n, s) => {
45
- const r = ge(n);
46
- r === -1 || !Te(n) || (r === 0 ? t.push(n) : o.push({
45
+ return Array.from(e.querySelectorAll(ge)).forEach((n, s) => {
46
+ const r = Ee(n);
47
+ r === -1 || !ye(n) || (r === 0 ? t.push(n) : o.push({
47
48
  documentOrder: s,
48
49
  tabIndex: r,
49
50
  node: n
50
51
  }));
51
52
  }), o.sort((n, s) => n.tabIndex === s.tabIndex ? n.documentOrder - s.documentOrder : n.tabIndex - s.tabIndex).map((n) => n.node).concat(t);
52
53
  }
53
- function xe() {
54
+ function Re() {
54
55
  return !0;
55
56
  }
56
57
  function W(e) {
@@ -59,8 +60,8 @@ function W(e) {
59
60
  disableAutoFocus: o = !1,
60
61
  disableEnforceFocus: n = !1,
61
62
  disableRestoreFocus: s = !1,
62
- getTabbable: r = ye,
63
- isEnabled: a = xe,
63
+ getTabbable: r = xe,
64
+ isEnabled: a = Re,
64
65
  open: d
65
66
  } = e, p = f.useRef(!1), x = f.useRef(null), h = f.useRef(null), m = f.useRef(null), R = f.useRef(null), g = f.useRef(!1), c = f.useRef(null), O = Z(t.ref, c), I = f.useRef(null);
66
67
  f.useEffect(() => {
@@ -188,8 +189,8 @@ process.env.NODE_ENV !== "production" && (W.propTypes = {
188
189
  */
189
190
  open: i.bool.isRequired
190
191
  });
191
- process.env.NODE_ENV !== "production" && (W.propTypes = be(W.propTypes));
192
- function Re(e) {
192
+ process.env.NODE_ENV !== "production" && (W.propTypes = he(W.propTypes));
193
+ function ve(e) {
193
194
  const t = w(e);
194
195
  return t.body === e ? Y(e).innerWidth > t.documentElement.clientWidth : e.scrollHeight > e.clientHeight;
195
196
  }
@@ -199,14 +200,14 @@ function K(e, t) {
199
200
  function J(e) {
200
201
  return parseInt(Y(e).getComputedStyle(e).paddingRight, 10) || 0;
201
202
  }
202
- function ve(e) {
203
+ function ke(e) {
203
204
  const o = ["TEMPLATE", "SCRIPT", "STYLE", "LINK", "MAP", "META", "NOSCRIPT", "PICTURE", "COL", "COLGROUP", "PARAM", "SLOT", "SOURCE", "TRACK"].indexOf(e.tagName) !== -1, n = e.tagName === "INPUT" && e.getAttribute("type") === "hidden";
204
205
  return o || n;
205
206
  }
206
207
  function Q(e, t, o, n, s) {
207
208
  const r = [t, o, ...n];
208
209
  [].forEach.call(e.children, (a) => {
209
- const d = r.indexOf(a) === -1, p = !ve(a);
210
+ const d = r.indexOf(a) === -1, p = !ke(a);
210
211
  d && p && K(a, s);
211
212
  });
212
213
  }
@@ -214,11 +215,11 @@ function V(e, t) {
214
215
  let o = -1;
215
216
  return e.some((n, s) => t(n) ? (o = s, !0) : !1), o;
216
217
  }
217
- function ke(e, t) {
218
+ function Pe(e, t) {
218
219
  const o = [], n = e.container;
219
220
  if (!t.disableScrollLock) {
220
- if (Re(n)) {
221
- const a = he(w(n));
221
+ if (ve(n)) {
222
+ const a = me(w(n));
222
223
  o.push({
223
224
  value: n.style.paddingRight,
224
225
  property: "padding-right",
@@ -264,13 +265,13 @@ function ke(e, t) {
264
265
  });
265
266
  };
266
267
  }
267
- function Pe(e) {
268
+ function Ne(e) {
268
269
  const t = [];
269
270
  return [].forEach.call(e.children, (o) => {
270
271
  o.getAttribute("aria-hidden") === "true" && t.push(o);
271
272
  }), t;
272
273
  }
273
- class Ne {
274
+ class Ce {
274
275
  constructor() {
275
276
  this.containers = void 0, this.modals = void 0, this.modals = [], this.containers = [];
276
277
  }
@@ -279,7 +280,7 @@ class Ne {
279
280
  if (n !== -1)
280
281
  return n;
281
282
  n = this.modals.length, this.modals.push(t), t.modalRef && K(t.modalRef, !1);
282
- const s = Pe(o);
283
+ const s = Ne(o);
283
284
  Q(o, t.mount, t.modalRef, s, !0);
284
285
  const r = V(this.containers, (a) => a.container === o);
285
286
  return r !== -1 ? (this.containers[r].modals.push(t), n) : (this.containers.push({
@@ -291,7 +292,7 @@ class Ne {
291
292
  }
292
293
  mount(t, o) {
293
294
  const n = V(this.containers, (r) => r.modals.indexOf(t) !== -1), s = this.containers[n];
294
- s.restore || (s.restore = ke(s, o));
295
+ s.restore || (s.restore = Pe(s, o));
295
296
  }
296
297
  remove(t, o = !0) {
297
298
  const n = this.modals.indexOf(t);
@@ -310,20 +311,20 @@ class Ne {
310
311
  return this.modals.length > 0 && this.modals[this.modals.length - 1] === t;
311
312
  }
312
313
  }
313
- function Ce(e) {
314
+ function Ie(e) {
314
315
  return typeof e == "function" ? e() : e;
315
316
  }
316
- function Ie(e) {
317
+ function Fe(e) {
317
318
  return e ? e.props.hasOwnProperty("in") : !1;
318
319
  }
319
- const Fe = new Ne();
320
- function Se(e) {
320
+ const Se = new Ce();
321
+ function we(e) {
321
322
  const {
322
323
  container: t,
323
324
  disableEscapeKeyDown: o = !1,
324
325
  disableScrollLock: n = !1,
325
326
  // @ts-ignore internal logic - Base UI supports the manager as a prop too
326
- manager: s = Fe,
327
+ manager: s = Se,
327
328
  closeAfterTransition: r = !1,
328
329
  onTransitionEnter: a,
329
330
  onTransitionExited: d,
@@ -331,7 +332,7 @@ function Se(e) {
331
332
  onClose: x,
332
333
  open: h,
333
334
  rootRef: m
334
- } = e, R = f.useRef({}), g = f.useRef(null), c = f.useRef(null), O = Z(c, m), [I, A] = f.useState(!h), N = Ie(p);
335
+ } = e, R = f.useRef({}), g = f.useRef(null), c = f.useRef(null), O = Z(c, m), [I, A] = f.useState(!h), N = Fe(p);
335
336
  let l = !0;
336
337
  (e["aria-hidden"] === "false" || e["aria-hidden"] === !1) && (l = !1);
337
338
  const v = () => w(g.current), k = () => (R.current.modalRef = c.current, R.current.mount = g.current, R.current), D = () => {
@@ -339,7 +340,7 @@ function Se(e) {
339
340
  disableScrollLock: n
340
341
  }), c.current && (c.current.scrollTop = 0);
341
342
  }, E = G(() => {
342
- const b = Ce(t) || v().body;
343
+ const b = Ie(t) || v().body;
343
344
  s.add(k(), b), c.current && D();
344
345
  }), T = f.useCallback(() => s.isTopModal(k()), [s]), L = G((b) => {
345
346
  g.current = b, b && (h && T() ? D() : c.current && K(c.current, l));
@@ -361,7 +362,7 @@ function Se(e) {
361
362
  };
362
363
  return {
363
364
  getRootProps: (b = {}) => {
364
- const u = ie(e);
365
+ const u = ae(e);
365
366
  delete u.onTransitionEnter, delete u.onTransitionExited;
366
367
  const P = C({}, u, b);
367
368
  return C({
@@ -399,19 +400,19 @@ function Se(e) {
399
400
  };
400
401
  }
401
402
  const te = "Modal";
402
- function we(e) {
403
- return ae(te, e);
403
+ function Oe(e) {
404
+ return le(te, e);
404
405
  }
405
- le(te, ["root", "hidden", "backdrop"]);
406
- const Oe = ["children", "closeAfterTransition", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "onKeyDown", "open", "onTransitionEnter", "onTransitionExited", "slotProps", "slots"], Ae = (e) => {
406
+ ce(te, ["root", "hidden", "backdrop"]);
407
+ const Ae = ["children", "closeAfterTransition", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "onKeyDown", "open", "onTransitionEnter", "onTransitionExited", "slotProps", "slots"], Me = (e) => {
407
408
  const {
408
409
  open: t,
409
410
  exited: o
410
411
  } = e;
411
- return de({
412
+ return ue({
412
413
  root: ["root", !t && o && "hidden"],
413
414
  backdrop: ["backdrop"]
414
- }, ue(we));
415
+ }, fe(Oe));
415
416
  }, ne = /* @__PURE__ */ f.forwardRef(function(t, o) {
416
417
  var n;
417
418
  const {
@@ -430,7 +431,7 @@ const Oe = ["children", "closeAfterTransition", "container", "disableAutoFocus",
430
431
  open: I,
431
432
  slotProps: A = {},
432
433
  slots: N = {}
433
- } = t, l = ce(t, Oe), v = C({}, t, {
434
+ } = t, l = de(t, Ae), v = C({}, t, {
434
435
  closeAfterTransition: r,
435
436
  disableAutoFocus: d,
436
437
  disableEnforceFocus: p,
@@ -448,12 +449,12 @@ const Oe = ["children", "closeAfterTransition", "container", "disableAutoFocus",
448
449
  isTopModal: L,
449
450
  exited: y,
450
451
  hasTransition: M
451
- } = Se(C({}, v, {
452
+ } = we(C({}, v, {
452
453
  rootRef: o
453
454
  })), F = C({}, v, {
454
455
  exited: y,
455
456
  hasTransition: M
456
- }), H = Ae(F), _ = {};
457
+ }), H = Me(F), _ = {};
457
458
  if (s.props.tabIndex === void 0 && (_.tabIndex = "-1"), M) {
458
459
  const {
459
460
  onEnter: B,
@@ -479,7 +480,7 @@ const Oe = ["children", "closeAfterTransition", "container", "disableAutoFocus",
479
480
  className: H.backdrop,
480
481
  ownerState: F
481
482
  });
482
- return !c && !I && (!M || y) ? null : /* @__PURE__ */ S(fe, {
483
+ return !c && !I && (!M || y) ? null : /* @__PURE__ */ S(pe, {
483
484
  ref: T,
484
485
  container: a,
485
486
  disablePortal: h,
@@ -519,7 +520,7 @@ process.env.NODE_ENV !== "production" && (ne.propTypes = {
519
520
  * By default, it uses the body of the top-level document object,
520
521
  * so it's simply `document.body` most of the time.
521
522
  */
522
- container: i.oneOfType([pe, i.func]),
523
+ container: i.oneOfType([be, i.func]),
523
524
  /**
524
525
  * If `true`, the modal will not automatically shift focus to itself when it opens, and
525
526
  * replace it to the last focused element when it closes.
@@ -614,7 +615,7 @@ process.env.NODE_ENV !== "production" && (ne.propTypes = {
614
615
  root: i.elementType
615
616
  })
616
617
  });
617
- const qe = ({
618
+ const $e = ({
618
619
  children: e,
619
620
  dialogTitle: t,
620
621
  dialogSubtitle: o,
@@ -626,22 +627,22 @@ const qe = ({
626
627
  ne,
627
628
  {
628
629
  onClose: s,
629
- slots: { backdrop: oe },
630
+ slots: { backdrop: re },
630
631
  ...r,
631
- className: q.dialog,
632
+ className: oe(q.dialog, r.className),
632
633
  "aria-labelledby": "alert-dialog-title",
633
634
  "aria-describedby": "alert-dialog-description",
634
635
  children: /* @__PURE__ */ $("section", { className: q.dialog__panel, children: [
635
- !!s && /* @__PURE__ */ S(re, { handleOnClose: s, className: q.dialog__close }),
636
- /* @__PURE__ */ S(se, { title: t, subTitle: o }),
636
+ !!s && /* @__PURE__ */ S(se, { handleOnClose: s, className: q.dialog__close }),
637
+ /* @__PURE__ */ S(ie, { title: t, subTitle: o }),
637
638
  e
638
639
  ] })
639
640
  }
640
641
  );
641
642
  export {
642
- Ye as Actions,
643
- Ge as Content,
644
- qe as Dialog,
645
- se as DialogTitle,
646
- qe as default
643
+ Ge as Actions,
644
+ Je as Content,
645
+ $e as Dialog,
646
+ ie as DialogTitle,
647
+ $e as default
647
648
  };
package/dist/components/Dialog/DialogTitle.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsxs as l, Fragment as o, jsx as e } from "react/jsx-runtime";
2
2
  import { Typography as r } from "../Typography/Typography.js";
3
- import { s as a } from "../../Dialog.module-DFcZsVAd.js";
3
+ import { s as a } from "../../Dialog.module-HFAN4mAD.js";
4
4
  const n = ({ title: t, subTitle: i }) => /* @__PURE__ */ l(o, { children: [
5
5
  /* @__PURE__ */ e(
6
6
  r,
package/dist/components/ResultWithChips/ResultWithChips.d.ts ADDED
@@ -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 };
package/dist/components/ResultWithChips/ResultWithChips.js ADDED
@@ -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
+ };
package/dist/components/RowItem/RowItem.js CHANGED
@@ -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";
package/dist/components/ToggleGroup/Toggle.js CHANGED
@@ -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";
package/dist/components/ToggleGroup/ToggleGroup.js CHANGED
@@ -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.16",
5
5
  "type": "module",
6
6
  "main": "dist/main.js",
7
7
  "types": "dist/main.d.ts",
package/dist/Dialog.module-DFcZsVAd.js DELETED
@@ -1,30 +0,0 @@
1
- import './assets/Dialog.css';
2
- const _ = "_dialog__subtitle_1u858_53", a = "_dialog_1u858_53", o = "_dialog__backdrop_1u858_88", p = "_dialog__panel_1u858_96", t = "_dialog__title_1u858_57", u = "_dialog__divider_1u858_122", g = "_dialog__actions_1u858_135", y = {
3
- "u-typography-h1": "_u-typography-h1_1u858_1",
4
- "u-typography-h2": "_u-typography-h2_1u858_8",
5
- "u-typography-h3": "_u-typography-h3_1u858_15",
6
- "u-typography-h4": "_u-typography-h4_1u858_22",
7
- "u-typography-h5": "_u-typography-h5_1u858_29",
8
- "u-typography-h6": "_u-typography-h6_1u858_36",
9
- "u-typography-base": "_u-typography-base_1u858_43",
10
- "u-typography-base--xxl": "_u-typography-base--xxl_1u858_49",
11
- "u-typography-base--xl": "_u-typography-base--xl_1u858_53",
12
- dialog__subtitle: _,
13
- "u-typography-base--lg": "_u-typography-base--lg_1u858_57",
14
- "dialog__title--small": "_dialog__title--small_1u858_57",
15
- "u-typography-base--sm": "_u-typography-base--sm_1u858_61",
16
- "u-typography-base--bold": "_u-typography-base--bold_1u858_65",
17
- "u-typography-base--strikethrough": "_u-typography-base--strikethrough_1u858_68",
18
- "u-typography-base--underlined": "_u-typography-base--underlined_1u858_71",
19
- "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_1u858_74",
20
- dialog: a,
21
- dialog__backdrop: o,
22
- dialog__panel: p,
23
- dialog__title: t,
24
- dialog__divider: u,
25
- "dialog__close-icon": "_dialog__close-icon_1u858_126",
26
- dialog__actions: g
27
- };
28
- export {
29
- y as s
30
- };
package/dist/Toggle-uBAGft1J.js DELETED
@@ -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
- };