@pismo/marola 0.0.1-alpha.23 → 0.0.1-alpha.25

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 (32) hide show
  1. package/dist/Group-CS_qGuuW.js +26 -0
  2. package/dist/Toggle-Cs5nKfr-.js +140 -0
  3. package/dist/assets/Advice.css +1 -1
  4. package/dist/assets/Group.css +1 -0
  5. package/dist/assets/Toggle.css +1 -1
  6. package/dist/assets/Toggle2.css +1 -0
  7. package/dist/components/Advice/Advice.d.ts +5 -3
  8. package/dist/components/Advice/Advice.js +36 -28
  9. package/dist/components/Advice/Advice.stories.d.ts +3 -1
  10. package/dist/components/Button/Button.d.ts +1 -1
  11. package/dist/components/Button/Button.stories.d.ts +1 -1
  12. package/dist/components/Chip/Chip.js +9 -104
  13. package/dist/components/Snackbar/Snackbar.d.ts +3 -1
  14. package/dist/components/Snackbar/Snackbar.js +81 -79
  15. package/dist/components/Snackbar/Snackbar.stories.d.ts +2 -1
  16. package/dist/components/Snackbar/SnackbarProvider.d.ts +10 -0
  17. package/dist/components/Snackbar/SnackbarProvider.js +49 -0
  18. package/dist/components/Snackbar/SnackbarProvider.stories.d.ts +21 -0
  19. package/dist/components/Toggle/Toggle.js +1 -1
  20. package/dist/components/ToggleGroup/Group.d.ts +18 -0
  21. package/dist/components/ToggleGroup/Group.js +7 -0
  22. package/dist/components/ToggleGroup/Group.test.d.ts +1 -0
  23. package/dist/components/ToggleGroup/Toggle.d.ts +15 -0
  24. package/dist/components/ToggleGroup/Toggle.js +15 -0
  25. package/dist/components/ToggleGroup/Toggle.test.d.ts +1 -0
  26. package/dist/components/ToggleGroup/ToggleGroup.d.ts +2 -0
  27. package/dist/components/ToggleGroup/ToggleGroup.js +6 -0
  28. package/dist/components/ToggleGroup/ToggleGroup.stories.d.ts +25 -0
  29. package/dist/main.d.ts +1 -0
  30. package/dist/main.js +50 -47
  31. package/package.json +2 -2
  32. package/dist/assets/Chip.css +0 -1
package/dist/Group-CS_qGuuW.js ADDED
@@ -0,0 +1,26 @@
1
+ import './assets/Group.css';
2
+ import { jsxs as l, jsx as t } from "react/jsx-runtime";
3
+ import { forwardRef as a } from "react";
4
+ import { Icon as i } from "./components/Icon/Icon.js";
5
+ const d = "_toggle__input_1hgsq_1", n = "_toggle__label_1hgsq_8", o = {
6
+ toggle__input: d,
7
+ toggle__label: n,
8
+ "toggle__label--selected": "_toggle__label--selected_1hgsq_15",
9
+ "toggle-group__fieldset": "_toggle-group__fieldset_1hgsq_20",
10
+ "toggle-group__options": "_toggle-group__options_1hgsq_23",
11
+ "toggle-group__error": "_toggle-group__error_1hgsq_27"
12
+ }, h = a((e, r) => {
13
+ const { children: s, legend: g, error: _ } = e;
14
+ return /* @__PURE__ */ l("fieldset", { ref: r, "data-testid": e["data-testid"], className: o["toggle-group__fieldset"], children: [
15
+ g && /* @__PURE__ */ t("legend", { "data-testid": `${e["data-testid"]}-legend`, children: g }),
16
+ /* @__PURE__ */ t("div", { className: o["toggle-group__options"], children: s }),
17
+ _ && /* @__PURE__ */ l("div", { className: o["toggle-group__error"], "data-testid": `${e["data-testid"]}-error`, children: [
18
+ /* @__PURE__ */ t(i, { icon: "circle-exclamation", size: 24, color: "var(--alert)" }),
19
+ _
20
+ ] })
21
+ ] });
22
+ });
23
+ export {
24
+ h as G,
25
+ o as s
26
+ };
package/dist/Toggle-Cs5nKfr-.js ADDED
@@ -0,0 +1,140 @@
1
+ import './assets/Toggle.css';
2
+ import { jsx as r, jsxs as u } from "react/jsx-runtime";
3
+ import { forwardRef as c, cloneElement as m } from "react";
4
+ import { c as _ } from "./clsx-DB4S2d7J.js";
5
+ import "./components/Button/Button.js";
6
+ import { Icon as b } from "./components/Icon/Icon.js";
7
+ import "./components/Dialog/Backdrop.js";
8
+ import { Typography as j } from "./components/Typography/Typography.js";
9
+ import "./components/IconButton/IconButton.js";
10
+ import "./components/Select/Select.js";
11
+ import { Skeleton as f } from "./components/Skeleton/Skeleton.js";
12
+ import "./components/Table/Table.js";
13
+ import "./components/Tabs/Tabs.js";
14
+ import { s as d } from "./Group-CS_qGuuW.js";
15
+ import { B as k } from "./Button-2b1peDFT.js";
16
+ const x = "_chip_1j9h1_60", C = "_chip__adornment_1j9h1_114", N = "_chip__remove_1j9h1_119", s = {
17
+ "u-typography-h1": "_u-typography-h1_1j9h1_1",
18
+ "u-typography-h2": "_u-typography-h2_1j9h1_8",
19
+ "u-typography-h3": "_u-typography-h3_1j9h1_15",
20
+ "u-typography-h4": "_u-typography-h4_1j9h1_22",
21
+ "u-typography-h5": "_u-typography-h5_1j9h1_29",
22
+ "u-typography-h6": "_u-typography-h6_1j9h1_36",
23
+ "u-typography-base": "_u-typography-base_1j9h1_43",
24
+ "u-typography-base--xxl": "_u-typography-base--xxl_1j9h1_48",
25
+ "u-typography-base--xl": "_u-typography-base--xl_1j9h1_52",
26
+ "u-typography-base--lg": "_u-typography-base--lg_1j9h1_56",
27
+ "u-typography-base--sm": "_u-typography-base--sm_1j9h1_60",
28
+ chip: x,
29
+ "u-typography-base--bold": "_u-typography-base--bold_1j9h1_64",
30
+ "u-typography-base--strikethrough": "_u-typography-base--strikethrough_1j9h1_67",
31
+ "u-typography-base--underlined": "_u-typography-base--underlined_1j9h1_70",
32
+ "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_1j9h1_73",
33
+ "chip--button": "_chip--button_1j9h1_89",
34
+ "chip--outlined": "_chip--outlined_1j9h1_102",
35
+ "chip--contained": "_chip--contained_1j9h1_108",
36
+ chip__adornment: C,
37
+ chip__remove: N,
38
+ "chip__remove--disabled": "_chip__remove--disabled_1j9h1_130"
39
+ }, v = c((t, a) => {
40
+ const { children: i, onClickContent: e, disabled: h, className: p, variant: l } = t;
41
+ let o = _(
42
+ s.chip,
43
+ { [s["chip--outlined"]]: l === "outlined" },
44
+ { [s["chip--contained"]]: l === "contained" },
45
+ p
46
+ );
47
+ return e ? (o += ` ${s["chip--button"]}`, /* @__PURE__ */ r(
48
+ k,
49
+ {
50
+ onClick: e,
51
+ disabled: h,
52
+ "data-testid": t["data-testid"],
53
+ ref: a,
54
+ className: o,
55
+ children: i
56
+ }
57
+ )) : /* @__PURE__ */ r("span", { "data-testid": t["data-testid"], ref: a, className: o, children: i });
58
+ }), T = (t) => {
59
+ const { icon: a, disabled: i = !1, className: e } = t;
60
+ if (a) {
61
+ const h = _(s.chip__adornment, e), p = i ? m(a, { color: "rgb(var(--gray-95-rgb), 0.4)" }) : a;
62
+ return /* @__PURE__ */ r("span", { className: h, children: p });
63
+ }
64
+ return null;
65
+ }, F = c((t, a) => {
66
+ const {
67
+ label: i,
68
+ className: e,
69
+ onClickContent: h,
70
+ leftAdornment: p,
71
+ loading: l = !1,
72
+ disabled: o = !1,
73
+ variant: g = "default",
74
+ onClickRemove: y
75
+ } = t;
76
+ return l ? /* @__PURE__ */ r(
77
+ f,
78
+ {
79
+ style: { width: "6rem", height: "2rem", borderRadius: "4rem", display: "inline-flex" },
80
+ "data-testid": t["data-testid-skeleton"]
81
+ }
82
+ ) : /* @__PURE__ */ u(
83
+ v,
84
+ {
85
+ ref: a,
86
+ "data-testid": t["data-testid"],
87
+ onClickContent: h,
88
+ disabled: o,
89
+ className: e,
90
+ variant: g,
91
+ children: [
92
+ p && /* @__PURE__ */ r(T, { ...p, disabled: o }),
93
+ i,
94
+ y && /* @__PURE__ */ r(
95
+ "span",
96
+ {
97
+ className: _(s.chip__remove, { [s["chip__remove--disabled"]]: o }),
98
+ role: "button",
99
+ tabIndex: o ? -1 : 0,
100
+ "aria-label": "remove",
101
+ onClick: (n) => {
102
+ n == null || n.stopPropagation(), n == null || n.nativeEvent.stopImmediatePropagation(), y();
103
+ },
104
+ "aria-disabled": o,
105
+ children: /* @__PURE__ */ r(b, { icon: "circle-xmark", size: "1.125rem", color: "rgba(var(--gray-95-rgb), 0.45)" })
106
+ }
107
+ )
108
+ ]
109
+ }
110
+ );
111
+ }), G = c((t, a) => {
112
+ const { text: i, isSelected: e = !1, value: h, onChange: p } = t;
113
+ return /* @__PURE__ */ u(
114
+ "label",
115
+ {
116
+ className: _([d.toggle__label], { [d["toggle__label--selected"]]: e }),
117
+ "data-testid": t["data-testid"],
118
+ children: [
119
+ /* @__PURE__ */ r(
120
+ "input",
121
+ {
122
+ className: _([d.toggle__input]),
123
+ type: "radio",
124
+ ref: a,
125
+ value: h.toString(),
126
+ onChange: () => p(h),
127
+ role: "radio",
128
+ checked: e,
129
+ "aria-checked": e
130
+ }
131
+ ),
132
+ /* @__PURE__ */ r(j, { bold: !0, children: i })
133
+ ]
134
+ }
135
+ );
136
+ });
137
+ export {
138
+ F as C,
139
+ G as T
140
+ };
package/dist/assets/Advice.css CHANGED
@@ -1 +1 @@
1
- ._u-typography-h1_954or_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_954or_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_954or_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_954or_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_954or_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_954or_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_954or_43{font-size:var(--base-font-size);font-weight:var(--base-weight);line-height:var(--base-line-height)}._u-typography-base--xxl_954or_48{font-size:var(--base-font-size-xxl);line-height:var(--base-line-height-xxl)}._u-typography-base--xl_954or_52{font-size:var(--base-font-size-xl);line-height:var(--base-line-height-xl)}._u-typography-base--lg_954or_56,._advice_954or_56 ._content_954or_56,._advice_954or_56 p{font-size:var(--base-font-size-lg);line-height:var(--base-line-height-lg)}._u-typography-base--sm_954or_61{font-size:var(--base-font-size-sm);line-height:var(--base-line-height-sm)}._u-typography-base--bold_954or_65,._advice_954or_56 ._content_954or_56,._advice_954or_56 p{font-weight:var(--base-bold)}._u-typography-base--strikethrough_954or_69{text-decoration:line-through}._u-typography-base--underlined_954or_72{text-decoration:underline}._u-typography-base--strikethrough-underlined_954or_75{text-decoration:underline line-through}._advice_954or_56{display:flex;flex-direction:column;align-items:center;padding:2rem}._advice_954or_56 ._content_954or_56,._advice_954or_56 p{margin:0;color:var(--gray-75)}
1
+ ._u-typography-h1_42bqv_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_42bqv_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_42bqv_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_42bqv_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_42bqv_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_42bqv_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_42bqv_43{font-size:var(--base-font-size);font-weight:var(--base-weight);line-height:var(--base-line-height)}._u-typography-base--xxl_42bqv_48{font-size:var(--base-font-size-xxl);line-height:var(--base-line-height-xxl)}._u-typography-base--xl_42bqv_52{font-size:var(--base-font-size-xl);line-height:var(--base-line-height-xl)}._u-typography-base--lg_42bqv_56,._advice_42bqv_56 ._content_42bqv_56,._advice_42bqv_56 p{font-size:var(--base-font-size-lg);line-height:var(--base-line-height-lg)}._u-typography-base--sm_42bqv_61{font-size:var(--base-font-size-sm);line-height:var(--base-line-height-sm)}._u-typography-base--bold_42bqv_65,._advice_42bqv_56 ._content_42bqv_56,._advice_42bqv_56 p{font-weight:var(--base-bold)}._u-typography-base--strikethrough_42bqv_69{text-decoration:line-through}._u-typography-base--underlined_42bqv_72{text-decoration:underline}._u-typography-base--strikethrough-underlined_42bqv_75{text-decoration:underline line-through}._advice_42bqv_56{display:flex;flex-direction:column;align-items:center;padding:2rem}._advice_42bqv_56 ._content_42bqv_56,._advice_42bqv_56 p{margin:0;color:var(--gray-75)}._advice_42bqv_56 ._content-no-items_42bqv_90{display:flex;flex-direction:column;align-items:center;max-width:477px}._advice_42bqv_56 ._content-no-items_42bqv_90 h3{font-size:1.5rem;font-weight:700;color:#838192;padding:0;margin:1rem 0 0}._advice_42bqv_56 ._content-no-items_42bqv_90 p{font-size:1rem;color:#838192;font-weight:400;text-align:center;margin-bottom:1.5rem}
package/dist/assets/Group.css ADDED
@@ -0,0 +1 @@
1
+ ._toggle__input_1hgsq_1{position:absolute;opacity:0;width:0;height:0;margin:0}._toggle__label_1hgsq_8{border-radius:6px;border:solid 1px var(--gray-25);padding:.5rem 1rem;flex-grow:1;text-align:center}._toggle__label--selected_1hgsq_15{color:var(--accent);border-color:var(--accent)}._toggle-group__fieldset_1hgsq_20{border:none}._toggle-group__options_1hgsq_23{display:flex;gap:.5rem}._toggle-group__error_1hgsq_27{color:var(--alert);display:flex;gap:.5rem;margin-top:.5rem}
package/dist/assets/Toggle.css CHANGED
@@ -1 +1 @@
1
- ._u-typography-h1_1rzg2_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_1rzg2_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_1rzg2_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_1rzg2_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_1rzg2_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_1rzg2_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_1rzg2_43,._toggle__label_1rzg2_43{font-size:var(--base-font-size);font-weight:var(--base-weight);line-height:var(--base-line-height)}._u-typography-base--xxl_1rzg2_48{font-size:var(--base-font-size-xxl);line-height:var(--base-line-height-xxl)}._u-typography-base--xl_1rzg2_52{font-size:var(--base-font-size-xl);line-height:var(--base-line-height-xl)}._u-typography-base--lg_1rzg2_56{font-size:var(--base-font-size-lg);line-height:var(--base-line-height-lg)}._u-typography-base--sm_1rzg2_60{font-size:var(--base-font-size-sm);line-height:var(--base-line-height-sm)}._u-typography-base--bold_1rzg2_64{font-weight:var(--base-bold)}._u-typography-base--strikethrough_1rzg2_67{text-decoration:line-through}._u-typography-base--underlined_1rzg2_70{text-decoration:underline}._u-typography-base--strikethrough-underlined_1rzg2_73{text-decoration:underline line-through}._toggle_1rzg2_43{position:relative;display:flex;gap:1rem;align-items:center;cursor:pointer}._toggle__toggle-el-wrapper_1rzg2_84{width:2.25rem;height:1.5rem}._toggle_1rzg2_43 ._input_1rzg2_88{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;margin:0;cursor:inherit;opacity:0}._toggle_1rzg2_43 ._thumb_1rzg2_99{position:relative;top:.375rem;left:.375rem;display:block;width:.75rem;height:.75rem;background-color:var(--gray-90);border-radius:.75rem;opacity:.4;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.12s;transition-property:all}._toggle_1rzg2_43 ._track_1rzg2_113{position:absolute;display:block;width:2.25rem;height:1.5rem;background:var(--white-100);border-radius:1.5rem;box-shadow:inset 0 0 0 .25rem var(--gray-50);opacity:.4}._toggle--focus-visible_1rzg2_123._toggle__toggle-el-wrapper_1rzg2_84 ._track_1rzg2_113{border:1px solid var(--black-100);opacity:1}._toggle--checked_1rzg2_127._toggle__toggle-el-wrapper_1rzg2_84 ._thumb_1rzg2_99{left:1.125rem;background-color:var(--accent);opacity:1}._toggle--checked_1rzg2_127._toggle__toggle-el-wrapper_1rzg2_84 ._track_1rzg2_113{background:var(--accent);box-shadow:none;opacity:.4}._toggle__label_1rzg2_43{color:var(--gray-75)}._toggle__toggle-el-wrapper_1rzg2_84:hover:not(._toggle--focus-visible_1rzg2_123,._toggle--checked_1rzg2_127,._toggle--disabled_1rzg2_140) ._track_1rzg2_113{border-color:var(--gray-90);opacity:1}._toggle__toggle-el-wrapper_1rzg2_84:hover:not(._toggle--focus-visible_1rzg2_123,._toggle--checked_1rzg2_127,._toggle--disabled_1rzg2_140) ._thumb_1rzg2_99{opacity:1}._toggle_1rzg2_43:has(._toggle__toggle-el-wrapper_1rzg2_84:hover:not(._toggle--focus-visible_1rzg2_123,._toggle--checked_1rzg2_127,._toggle--disabled_1rzg2_140)) ._toggle__label_1rzg2_43{color:var(--black-100)}._toggle_1rzg2_43:has(._toggle--disabled_1rzg2_140) ._toggle__label_1rzg2_43{color:var(--gray-50)}._toggle_1rzg2_43:has(._toggle--disabled_1rzg2_140) ._track_1rzg2_113{border-color:#dbdae266}._toggle_1rzg2_43:has(._toggle--disabled_1rzg2_140) ._thumb_1rzg2_99{background-color:var(--gray-25);opacity:1}._toggle_1rzg2_43:has(._toggle--disabled_1rzg2_140) ._toggle--checked_1rzg2_127 ._toggle__label_1rzg2_43{font-weight:900;color:var(--accent)}._toggle_1rzg2_43:has(._toggle--disabled_1rzg2_140) ._toggle--checked_1rzg2_127 ._thumb_1rzg2_99{left:1.125rem;background-color:var(--accent);opacity:1}._toggle_1rzg2_43:has(._toggle--disabled_1rzg2_140) ._toggle--checked_1rzg2_127 ._track_1rzg2_113{background:var(--accent);box-shadow:none;opacity:.4}._toggle_1rzg2_43:has(._toggle--checked_1rzg2_127) ._toggle__label_1rzg2_43{font-weight:900;color:var(--accent)}._toggle_1rzg2_43:has(._toggle--focus-visible_1rzg2_123) ._toggle__label_1rzg2_43{color:var(--black-100)}
1
+ ._u-typography-h1_1j9h1_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_1j9h1_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_1j9h1_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_1j9h1_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_1j9h1_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_1j9h1_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_1j9h1_43{font-size:var(--base-font-size);font-weight:var(--base-weight);line-height:var(--base-line-height)}._u-typography-base--xxl_1j9h1_48{font-size:var(--base-font-size-xxl);line-height:var(--base-line-height-xxl)}._u-typography-base--xl_1j9h1_52{font-size:var(--base-font-size-xl);line-height:var(--base-line-height-xl)}._u-typography-base--lg_1j9h1_56{font-size:var(--base-font-size-lg);line-height:var(--base-line-height-lg)}._u-typography-base--sm_1j9h1_60,._chip_1j9h1_60{font-size:var(--base-font-size-sm);line-height:var(--base-line-height-sm)}._u-typography-base--bold_1j9h1_64,._chip_1j9h1_60{font-weight:var(--base-bold)}._u-typography-base--strikethrough_1j9h1_67{text-decoration:line-through}._u-typography-base--underlined_1j9h1_70{text-decoration:underline}._u-typography-base--strikethrough-underlined_1j9h1_73{text-decoration:underline line-through}._chip_1j9h1_60{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_1j9h1_60:not(:disabled){color:rgb(var(--gray-95-rgb) .65)}._chip--button_1j9h1_89{cursor:pointer;border-color:transparent}._chip--button_1j9h1_89:disabled{cursor:initial}._chip--button_1j9h1_89:focus-visible{outline:none}._chip--button_1j9h1_89:focus{outline:2px solid var(--black-100)}._chip--outlined_1j9h1_102{padding:.3125rem .5rem;background-color:var(--white-100);border:1px solid var(--border);border-radius:calc(var(--border-radius-soft) * 4)}._chip--contained_1j9h1_108{padding:.3125rem .5rem;border:1px solid var(--border);border-color:var(--accent);border-radius:calc(var(--border-radius-soft) * 4)}._chip__adornment_1j9h1_114{display:flex;align-items:center;margin-right:.5rem}._chip__remove_1j9h1_119{display:flex;margin-left:.5rem}._chip__remove_1j9h1_119:focus-visible{outline:none}._chip__remove_1j9h1_119:focus:not(:disabled){border-radius:calc(var(--border-radius-soft) * 4);outline:2px solid var(--black-100)}._chip__remove--disabled_1j9h1_130{cursor:default}
package/dist/assets/Toggle2.css ADDED
@@ -0,0 +1 @@
1
+ ._u-typography-h1_1rzg2_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_1rzg2_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_1rzg2_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_1rzg2_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_1rzg2_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_1rzg2_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_1rzg2_43,._toggle__label_1rzg2_43{font-size:var(--base-font-size);font-weight:var(--base-weight);line-height:var(--base-line-height)}._u-typography-base--xxl_1rzg2_48{font-size:var(--base-font-size-xxl);line-height:var(--base-line-height-xxl)}._u-typography-base--xl_1rzg2_52{font-size:var(--base-font-size-xl);line-height:var(--base-line-height-xl)}._u-typography-base--lg_1rzg2_56{font-size:var(--base-font-size-lg);line-height:var(--base-line-height-lg)}._u-typography-base--sm_1rzg2_60{font-size:var(--base-font-size-sm);line-height:var(--base-line-height-sm)}._u-typography-base--bold_1rzg2_64{font-weight:var(--base-bold)}._u-typography-base--strikethrough_1rzg2_67{text-decoration:line-through}._u-typography-base--underlined_1rzg2_70{text-decoration:underline}._u-typography-base--strikethrough-underlined_1rzg2_73{text-decoration:underline line-through}._toggle_1rzg2_43{position:relative;display:flex;gap:1rem;align-items:center;cursor:pointer}._toggle__toggle-el-wrapper_1rzg2_84{width:2.25rem;height:1.5rem}._toggle_1rzg2_43 ._input_1rzg2_88{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;margin:0;cursor:inherit;opacity:0}._toggle_1rzg2_43 ._thumb_1rzg2_99{position:relative;top:.375rem;left:.375rem;display:block;width:.75rem;height:.75rem;background-color:var(--gray-90);border-radius:.75rem;opacity:.4;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.12s;transition-property:all}._toggle_1rzg2_43 ._track_1rzg2_113{position:absolute;display:block;width:2.25rem;height:1.5rem;background:var(--white-100);border-radius:1.5rem;box-shadow:inset 0 0 0 .25rem var(--gray-50);opacity:.4}._toggle--focus-visible_1rzg2_123._toggle__toggle-el-wrapper_1rzg2_84 ._track_1rzg2_113{border:1px solid var(--black-100);opacity:1}._toggle--checked_1rzg2_127._toggle__toggle-el-wrapper_1rzg2_84 ._thumb_1rzg2_99{left:1.125rem;background-color:var(--accent);opacity:1}._toggle--checked_1rzg2_127._toggle__toggle-el-wrapper_1rzg2_84 ._track_1rzg2_113{background:var(--accent);box-shadow:none;opacity:.4}._toggle__label_1rzg2_43{color:var(--gray-75)}._toggle__toggle-el-wrapper_1rzg2_84:hover:not(._toggle--focus-visible_1rzg2_123,._toggle--checked_1rzg2_127,._toggle--disabled_1rzg2_140) ._track_1rzg2_113{border-color:var(--gray-90);opacity:1}._toggle__toggle-el-wrapper_1rzg2_84:hover:not(._toggle--focus-visible_1rzg2_123,._toggle--checked_1rzg2_127,._toggle--disabled_1rzg2_140) ._thumb_1rzg2_99{opacity:1}._toggle_1rzg2_43:has(._toggle__toggle-el-wrapper_1rzg2_84:hover:not(._toggle--focus-visible_1rzg2_123,._toggle--checked_1rzg2_127,._toggle--disabled_1rzg2_140)) ._toggle__label_1rzg2_43{color:var(--black-100)}._toggle_1rzg2_43:has(._toggle--disabled_1rzg2_140) ._toggle__label_1rzg2_43{color:var(--gray-50)}._toggle_1rzg2_43:has(._toggle--disabled_1rzg2_140) ._track_1rzg2_113{border-color:#dbdae266}._toggle_1rzg2_43:has(._toggle--disabled_1rzg2_140) ._thumb_1rzg2_99{background-color:var(--gray-25);opacity:1}._toggle_1rzg2_43:has(._toggle--disabled_1rzg2_140) ._toggle--checked_1rzg2_127 ._toggle__label_1rzg2_43{font-weight:900;color:var(--accent)}._toggle_1rzg2_43:has(._toggle--disabled_1rzg2_140) ._toggle--checked_1rzg2_127 ._thumb_1rzg2_99{left:1.125rem;background-color:var(--accent);opacity:1}._toggle_1rzg2_43:has(._toggle--disabled_1rzg2_140) ._toggle--checked_1rzg2_127 ._track_1rzg2_113{background:var(--accent);box-shadow:none;opacity:.4}._toggle_1rzg2_43:has(._toggle--checked_1rzg2_127) ._toggle__label_1rzg2_43{font-weight:900;color:var(--accent)}._toggle_1rzg2_43:has(._toggle--focus-visible_1rzg2_123) ._toggle__label_1rzg2_43{color:var(--black-100)}
package/dist/components/Advice/Advice.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { Icon } from '../Icon/Icon';
2
2
  import { ReactNode } from 'react';
3
3
 
4
- export type AdviceTypes = 'without-results' | 'no-permission';
4
+ export type AdviceTypes = 'without-results' | 'no-permission' | 'no-items' | 'error-page';
5
5
  export type AdviceProps = {
6
6
  /** Advice icon.
7
7
  * This property uses the Icon Component Props
@@ -14,7 +14,9 @@ export type AdviceProps = {
14
14
  /** Type of advice */
15
15
  type?: AdviceTypes;
16
16
  /** Advice content message */
17
- content: ReactNode;
17
+ content?: ReactNode;
18
+ title?: string;
19
+ description?: string;
18
20
  /** Space seperated list of CSS classes to apply */
19
21
  className?: string;
20
22
  /** ID that tests can use to get this component from the DOM */
@@ -24,5 +26,5 @@ export type AdviceProps = {
24
26
  * Advice component provide HTML with an icon and a message.
25
27
  * Is commonly used to indicate No Permission and No Results.
26
28
  */
27
- declare const Advice: ({ icon, type, content, className, IconSvg, ...rest }: AdviceProps) => import("react/jsx-runtime").JSX.Element;
29
+ declare const Advice: ({ icon, type, content, title, description, className, IconSvg, ...rest }: AdviceProps) => import("react/jsx-runtime").JSX.Element;
28
30
  export { Advice };
package/dist/components/Advice/Advice.js CHANGED
@@ -1,40 +1,48 @@
1
1
  import '../../assets/Advice.css';
2
- import { jsxs as u, jsx as p } from "react/jsx-runtime";
3
- import { c as g } from "../../clsx-DB4S2d7J.js";
4
- import { Icon as l } from "../Icon/Icon.js";
5
- const d = "_advice_954or_56", i = "_content_954or_56", e = {
6
- "u-typography-h1": "_u-typography-h1_954or_1",
7
- "u-typography-h2": "_u-typography-h2_954or_8",
8
- "u-typography-h3": "_u-typography-h3_954or_15",
9
- "u-typography-h4": "_u-typography-h4_954or_22",
10
- "u-typography-h5": "_u-typography-h5_954or_29",
11
- "u-typography-h6": "_u-typography-h6_954or_36",
12
- "u-typography-base": "_u-typography-base_954or_43",
13
- "u-typography-base--xxl": "_u-typography-base--xxl_954or_48",
14
- "u-typography-base--xl": "_u-typography-base--xl_954or_52",
15
- "u-typography-base--lg": "_u-typography-base--lg_954or_56",
2
+ import { jsxs as y, jsx as a } from "react/jsx-runtime";
3
+ import { c as l } from "../../clsx-DB4S2d7J.js";
4
+ import { Icon as i } from "../Icon/Icon.js";
5
+ const d = "_advice_42bqv_56", n = "_content_42bqv_56", s = {
6
+ "u-typography-h1": "_u-typography-h1_42bqv_1",
7
+ "u-typography-h2": "_u-typography-h2_42bqv_8",
8
+ "u-typography-h3": "_u-typography-h3_42bqv_15",
9
+ "u-typography-h4": "_u-typography-h4_42bqv_22",
10
+ "u-typography-h5": "_u-typography-h5_42bqv_29",
11
+ "u-typography-h6": "_u-typography-h6_42bqv_36",
12
+ "u-typography-base": "_u-typography-base_42bqv_43",
13
+ "u-typography-base--xxl": "_u-typography-base--xxl_42bqv_48",
14
+ "u-typography-base--xl": "_u-typography-base--xl_42bqv_52",
15
+ "u-typography-base--lg": "_u-typography-base--lg_42bqv_56",
16
16
  advice: d,
17
- content: i,
18
- "u-typography-base--sm": "_u-typography-base--sm_954or_61",
19
- "u-typography-base--bold": "_u-typography-base--bold_954or_65",
20
- "u-typography-base--strikethrough": "_u-typography-base--strikethrough_954or_69",
21
- "u-typography-base--underlined": "_u-typography-base--underlined_954or_72",
22
- "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_954or_75"
17
+ content: n,
18
+ "u-typography-base--sm": "_u-typography-base--sm_42bqv_61",
19
+ "u-typography-base--bold": "_u-typography-base--bold_42bqv_65",
20
+ "u-typography-base--strikethrough": "_u-typography-base--strikethrough_42bqv_69",
21
+ "u-typography-base--underlined": "_u-typography-base--underlined_42bqv_72",
22
+ "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_42bqv_75",
23
+ "content-no-items": "_content-no-items_42bqv_90"
23
24
  }, h = {
24
25
  "no-permission": "eye-slash",
26
+ "no-items": "",
27
+ "error-page": "circle-exclamation",
25
28
  "without-results": "folder-magnifying-glass"
26
- }, c = ({ icon: r, type: a, content: y, className: s, IconSvg: t, ..._ }) => {
29
+ }, q = ({ icon: r, type: e, content: t, title: _, description: g, className: u, IconSvg: p, ...b }) => {
27
30
  const o = {
28
- color: (r == null ? void 0 : r.color) || "var(--accent)",
31
+ color: r != null && r.color ? r == null ? void 0 : r.color : e !== "error-page" ? "var(--accent)" : "var(--secondary-orange)",
29
32
  size: (r == null ? void 0 : r.size) || "3.375rem",
30
- icon: h[a] || (r == null ? void 0 : r.icon) || "",
31
- iconFamily: h[a] ? "fa/duotone" : (r == null ? void 0 : r.iconFamily) || "fa/duotone"
33
+ icon: h[e] || (r == null ? void 0 : r.icon) || "",
34
+ iconFamily: h[e] ? "fa/duotone" : (r == null ? void 0 : r.iconFamily) || "fa/duotone"
32
35
  };
33
- return /* @__PURE__ */ u("div", { className: g(e.advice, s), ..._, children: [
34
- t ? /* @__PURE__ */ p(t, { style: { color: o.color, height: o.size, width: o.size } }) : /* @__PURE__ */ p(l, { ...o }),
35
- typeof y == "string" ? /* @__PURE__ */ p("p", { children: y }) : /* @__PURE__ */ p("div", { className: e.content, children: y })
36
+ return /* @__PURE__ */ y("div", { className: l(s.advice, u), ...b, children: [
37
+ p && e !== "no-items" && e !== "error-page" && /* @__PURE__ */ a(p, { style: { color: o.color, height: o.size, width: o.size } }),
38
+ !p && e !== "no-items" && /* @__PURE__ */ a(i, { ...o }),
39
+ e !== "error-page" && e !== "no-items" ? typeof t == "string" ? /* @__PURE__ */ a("p", { children: t }) : /* @__PURE__ */ a("div", { className: s.content, children: t }) : /* @__PURE__ */ y("div", { className: s["content-no-items"], children: [
40
+ /* @__PURE__ */ a("h3", { children: _ }),
41
+ /* @__PURE__ */ a("p", { children: g }),
42
+ t
43
+ ] })
36
44
  ] });
37
45
  };
38
46
  export {
39
- c as Advice
47
+ q as Advice
40
48
  };
package/dist/components/Advice/Advice.stories.d.ts CHANGED
@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react';
2
2
 
3
3
  declare const meta: {
4
4
  title: string;
5
- component: ({ icon, type, content, className, IconSvg, ...rest }: import('./Advice').AdviceProps) => import("react/jsx-runtime").JSX.Element;
5
+ component: ({ icon, type, content, title, description, className, IconSvg, ...rest }: import('./Advice').AdviceProps) => import("react/jsx-runtime").JSX.Element;
6
6
  tags: string[];
7
7
  parameters: {
8
8
  layout: string;
@@ -14,3 +14,5 @@ export declare const WithoutResults: Story;
14
14
  export declare const NoPermission: Story;
15
15
  export declare const CustomIcon: Story;
16
16
  export declare const CustomIconSVG: Story;
17
+ export declare const NoItems: Story;
18
+ export declare const ErrorPage: Story;
package/dist/components/Button/Button.d.ts CHANGED
@@ -23,7 +23,7 @@ interface ButtonPropsWithLink extends ButtonCoreProps {
23
23
  }
24
24
  interface ButtonPropsWithOnClick extends ButtonCoreProps {
25
25
  /** functionality to perform once clicked */
26
- onClick: () => void;
26
+ onClick?: () => void;
27
27
  /** HTML type of button */
28
28
  type?: HTMLButtonElement['type'];
29
29
  }
package/dist/components/Button/Button.stories.d.ts CHANGED
@@ -17,7 +17,7 @@ declare const meta: {
17
17
  ref?: import('react').LegacyRef<HTMLButtonElement> | undefined;
18
18
  key?: import('react').Key | null | undefined;
19
19
  } | {
20
- onClick: () => void;
20
+ onClick?: (() => void) | undefined;
21
21
  type?: "button" | "submit" | "reset" | undefined;
22
22
  loading?: boolean | undefined;
23
23
  disabled?: boolean | undefined;
package/dist/components/Chip/Chip.js CHANGED
@@ -1,113 +1,18 @@
1
- import '../../assets/Chip.css';
2
- import { jsx as e, jsxs as u } from "react/jsx-runtime";
3
- import { forwardRef as d, cloneElement as m } from "react";
4
- import { c as l } from "../../clsx-DB4S2d7J.js";
5
- import { Icon as g } from "../Icon/Icon.js";
1
+ import "react/jsx-runtime";
2
+ import "react";
3
+ import "../../clsx-DB4S2d7J.js";
4
+ import "../Icon/Icon.js";
6
5
  import "../Button/Button.js";
6
+ import { C as g } from "../../Toggle-Cs5nKfr-.js";
7
7
  import "../Dialog/Backdrop.js";
8
8
  import "../Typography/Typography.js";
9
9
  import "../IconButton/IconButton.js";
10
10
  import "../Select/Select.js";
11
- import { Skeleton as b } from "../Skeleton/Skeleton.js";
11
+ import "../Skeleton/Skeleton.js";
12
12
  import "../Table/Table.js";
13
13
  import "../Tabs/Tabs.js";
14
- import { B as j } from "../../Button-2b1peDFT.js";
15
- const f = "_chip_1j9h1_60", x = "_chip__adornment_1j9h1_114", k = "_chip__remove_1j9h1_119", r = {
16
- "u-typography-h1": "_u-typography-h1_1j9h1_1",
17
- "u-typography-h2": "_u-typography-h2_1j9h1_8",
18
- "u-typography-h3": "_u-typography-h3_1j9h1_15",
19
- "u-typography-h4": "_u-typography-h4_1j9h1_22",
20
- "u-typography-h5": "_u-typography-h5_1j9h1_29",
21
- "u-typography-h6": "_u-typography-h6_1j9h1_36",
22
- "u-typography-base": "_u-typography-base_1j9h1_43",
23
- "u-typography-base--xxl": "_u-typography-base--xxl_1j9h1_48",
24
- "u-typography-base--xl": "_u-typography-base--xl_1j9h1_52",
25
- "u-typography-base--lg": "_u-typography-base--lg_1j9h1_56",
26
- "u-typography-base--sm": "_u-typography-base--sm_1j9h1_60",
27
- chip: f,
28
- "u-typography-base--bold": "_u-typography-base--bold_1j9h1_64",
29
- "u-typography-base--strikethrough": "_u-typography-base--strikethrough_1j9h1_67",
30
- "u-typography-base--underlined": "_u-typography-base--underlined_1j9h1_70",
31
- "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_1j9h1_73",
32
- "chip--button": "_chip--button_1j9h1_89",
33
- "chip--outlined": "_chip--outlined_1j9h1_102",
34
- "chip--contained": "_chip--contained_1j9h1_108",
35
- chip__adornment: x,
36
- chip__remove: k,
37
- "chip__remove--disabled": "_chip__remove--disabled_1j9h1_130"
38
- }, C = d((t, o) => {
39
- const { children: h, onClickContent: p, disabled: _, className: i, variant: n } = t;
40
- let a = l(
41
- r.chip,
42
- { [r["chip--outlined"]]: n === "outlined" },
43
- { [r["chip--contained"]]: n === "contained" },
44
- i
45
- );
46
- return p ? (a += ` ${r["chip--button"]}`, /* @__PURE__ */ e(
47
- j,
48
- {
49
- onClick: p,
50
- disabled: _,
51
- "data-testid": t["data-testid"],
52
- ref: o,
53
- className: a,
54
- children: h
55
- }
56
- )) : /* @__PURE__ */ e("span", { "data-testid": t["data-testid"], ref: o, className: a, children: h });
57
- }), N = (t) => {
58
- const { icon: o, disabled: h = !1, className: p } = t;
59
- if (o) {
60
- const _ = l(r.chip__adornment, p), i = h ? m(o, { color: "rgb(var(--gray-95-rgb), 0.4)" }) : o;
61
- return /* @__PURE__ */ e("span", { className: _, children: i });
62
- }
63
- return null;
64
- }, $ = d((t, o) => {
65
- const {
66
- label: h,
67
- className: p,
68
- onClickContent: _,
69
- leftAdornment: i,
70
- loading: n = !1,
71
- disabled: a = !1,
72
- variant: y = "default",
73
- onClickRemove: c
74
- } = t;
75
- return n ? /* @__PURE__ */ e(
76
- b,
77
- {
78
- style: { width: "6rem", height: "2rem", borderRadius: "4rem", display: "inline-flex" },
79
- "data-testid": t["data-testid-skeleton"]
80
- }
81
- ) : /* @__PURE__ */ u(
82
- C,
83
- {
84
- ref: o,
85
- "data-testid": t["data-testid"],
86
- onClickContent: _,
87
- disabled: a,
88
- className: p,
89
- variant: y,
90
- children: [
91
- i && /* @__PURE__ */ e(N, { ...i, disabled: a }),
92
- h,
93
- c && /* @__PURE__ */ e(
94
- "span",
95
- {
96
- className: l(r.chip__remove, { [r["chip__remove--disabled"]]: a }),
97
- role: "button",
98
- tabIndex: a ? -1 : 0,
99
- "aria-label": "remove",
100
- onClick: (s) => {
101
- s == null || s.stopPropagation(), s == null || s.nativeEvent.stopImmediatePropagation(), c();
102
- },
103
- "aria-disabled": a,
104
- children: /* @__PURE__ */ e(g, { icon: "circle-xmark", size: "1.125rem", color: "rgba(var(--gray-95-rgb), 0.45)" })
105
- }
106
- )
107
- ]
108
- }
109
- );
110
- });
14
+ import "../../Group-CS_qGuuW.js";
15
+ import "../../Button-2b1peDFT.js";
111
16
  export {
112
- $ as Chip
17
+ g as Chip
113
18
  };
package/dist/components/Snackbar/Snackbar.d.ts CHANGED
@@ -16,10 +16,12 @@ export type SnackbarProps = InputHTMLAttributes<HTMLInputElement> & {
16
16
  autoHideDuration?: number;
17
17
  /** Callback for when close is clicked */
18
18
  onClose?: () => void;
19
+ /** Callback for when closed */
20
+ onClosed?: () => void;
19
21
  };
20
22
  /**
21
23
  * Snackbars (also known as toasts) are used for
22
24
  * brief notification of processes that
23
25
  * have been or will be performed.
24
26
  * */
25
- export declare const Snackbar: ({ snackbarMessage, variant, autoHideDuration, open, onClose, classNameWrapper, "data-testid": dataTestId, }: SnackbarProps) => import("react/jsx-runtime").JSX.Element;
27
+ export declare const Snackbar: ({ snackbarMessage, variant, autoHideDuration, open, onClose, onClosed, classNameWrapper, "data-testid": dataTestId, }: SnackbarProps) => import("react/jsx-runtime").JSX.Element;
package/dist/components/Snackbar/Snackbar.js CHANGED
@@ -1,14 +1,14 @@
1
1
  import '../../assets/Snackbar.css';
2
2
  import { jsx as E, jsxs as Y } from "react/jsx-runtime";
3
- import * as N from "react";
4
- import S, { useState as V, useRef as X } from "react";
5
- import { c as O } from "../../clsx-DB4S2d7J.js";
3
+ import * as S from "react";
4
+ import C, { useState as V, useRef as X } from "react";
5
+ import { c as N } from "../../clsx-DB4S2d7J.js";
6
6
  import { Icon as K } from "../Icon/Icon.js";
7
- import { g as $, a as z, b as D, f as H, _ as j, c as U, P as n, d as J, e as Q } from "../../index-CH45lKw7.js";
7
+ import { g as $, a as z, b as R, f as H, _ as j, c as U, P as n, d as J, e as Q } from "../../index-CH45lKw7.js";
8
8
  import { u as Z } from "../../useTimeout-DxF9kiZL.js";
9
9
  import { u as I } from "../../useEventCallback-xTG9piMa.js";
10
10
  import { C as B } from "../../ClickAwayListener-BSW-Nd-y.js";
11
- import { R } from "../../index-CjW42-M-.js";
11
+ import { R as P } from "../../index-CjW42-M-.js";
12
12
  const W = "Snackbar";
13
13
  function ee(u) {
14
14
  return $(W, u);
@@ -22,58 +22,58 @@ function te(u = {}) {
22
22
  open: t,
23
23
  resumeHideDuration: e
24
24
  } = u, o = Z();
25
- N.useEffect(() => {
25
+ S.useEffect(() => {
26
26
  if (!t)
27
27
  return;
28
- function l(p) {
29
- p.defaultPrevented || (p.key === "Escape" || p.key === "Esc") && (r == null || r(p, "escapeKeyDown"));
28
+ function l(c) {
29
+ c.defaultPrevented || (c.key === "Escape" || c.key === "Esc") && (r == null || r(c, "escapeKeyDown"));
30
30
  }
31
31
  return document.addEventListener("keydown", l), () => {
32
32
  document.removeEventListener("keydown", l);
33
33
  };
34
34
  }, [t, r]);
35
- const a = I((l, p) => {
36
- r == null || r(l, p);
37
- }), c = I((l) => {
35
+ const a = I((l, c) => {
36
+ r == null || r(l, c);
37
+ }), p = I((l) => {
38
38
  !r || l == null || o.start(l, () => {
39
39
  a(null, "timeout");
40
40
  });
41
41
  });
42
- N.useEffect(() => (t && c(s), o.clear), [t, s, c, o]);
42
+ S.useEffect(() => (t && p(s), o.clear), [t, s, p, o]);
43
43
  const h = (l) => {
44
44
  r == null || r(l, "clickaway");
45
- }, d = o.clear, m = N.useCallback(() => {
46
- s != null && c(e ?? s * 0.5);
47
- }, [s, e, c]), y = (l) => (p) => {
45
+ }, d = o.clear, m = S.useCallback(() => {
46
+ s != null && p(e ?? s * 0.5);
47
+ }, [s, e, p]), y = (l) => (c) => {
48
48
  const f = l.onBlur;
49
- f == null || f(p), m();
50
- }, k = (l) => (p) => {
49
+ f == null || f(c), m();
50
+ }, T = (l) => (c) => {
51
51
  const f = l.onFocus;
52
- f == null || f(p), d();
53
- }, T = (l) => (p) => {
52
+ f == null || f(c), d();
53
+ }, k = (l) => (c) => {
54
54
  const f = l.onMouseEnter;
55
- f == null || f(p), d();
56
- }, P = (l) => (p) => {
55
+ f == null || f(c), d();
56
+ }, O = (l) => (c) => {
57
57
  const f = l.onMouseLeave;
58
- f == null || f(p), m();
58
+ f == null || f(c), m();
59
59
  };
60
- return N.useEffect(() => {
60
+ return S.useEffect(() => {
61
61
  if (!i && t)
62
62
  return window.addEventListener("focus", m), window.addEventListener("blur", d), () => {
63
63
  window.removeEventListener("focus", m), window.removeEventListener("blur", d);
64
64
  };
65
65
  }, [i, t, m, d]), {
66
66
  getRootProps: (l = {}) => {
67
- const p = D({}, H(u), H(l));
68
- return D({
67
+ const c = R({}, H(u), H(l));
68
+ return R({
69
69
  // ClickAwayListener adds an `onClick` prop which results in the alert not being announced.
70
70
  // See https://github.com/mui/material-ui/issues/29080
71
71
  role: "presentation"
72
- }, l, p, {
73
- onBlur: y(p),
74
- onFocus: k(p),
75
- onMouseEnter: T(p),
76
- onMouseLeave: P(p)
72
+ }, l, c, {
73
+ onBlur: y(c),
74
+ onFocus: T(c),
75
+ onMouseEnter: k(c),
76
+ onMouseLeave: O(c)
77
77
  });
78
78
  },
79
79
  onClickAway: h
@@ -81,46 +81,46 @@ function te(u = {}) {
81
81
  }
82
82
  const ne = ["autoHideDuration", "children", "disableWindowBlurListener", "exited", "onBlur", "onClose", "onFocus", "onMouseEnter", "onMouseLeave", "open", "resumeHideDuration", "slotProps", "slots"], oe = () => J({
83
83
  root: ["root"]
84
- }, Q(ee)), q = /* @__PURE__ */ N.forwardRef(function(s, i) {
84
+ }, Q(ee)), q = /* @__PURE__ */ S.forwardRef(function(s, i) {
85
85
  const {
86
86
  autoHideDuration: r = null,
87
87
  children: t,
88
88
  disableWindowBlurListener: e = !1,
89
89
  exited: o = !0,
90
90
  onClose: a,
91
- open: c,
91
+ open: p,
92
92
  resumeHideDuration: h,
93
93
  slotProps: d = {},
94
94
  slots: m = {}
95
- } = s, y = j(s, ne), k = oe(), {
96
- getRootProps: T,
97
- onClickAway: P
98
- } = te(D({}, s, {
95
+ } = s, y = j(s, ne), T = oe(), {
96
+ getRootProps: k,
97
+ onClickAway: O
98
+ } = te(R({}, s, {
99
99
  autoHideDuration: r,
100
100
  disableWindowBlurListener: e,
101
101
  onClose: a,
102
- open: c,
102
+ open: p,
103
103
  resumeHideDuration: h
104
- })), L = s, l = m.root || "div", p = U({
104
+ })), L = s, l = m.root || "div", c = U({
105
105
  elementType: l,
106
- getSlotProps: T,
106
+ getSlotProps: k,
107
107
  externalForwardedProps: y,
108
108
  externalSlotProps: d.root,
109
109
  additionalProps: {
110
110
  ref: i
111
111
  },
112
112
  ownerState: L,
113
- className: k.root
113
+ className: T.root
114
114
  }), f = U({
115
115
  elementType: B,
116
116
  externalSlotProps: d.clickAwayListener,
117
117
  additionalProps: {
118
- onClickAway: P
118
+ onClickAway: O
119
119
  },
120
120
  ownerState: L
121
121
  });
122
- return delete f.ownerState, !c && o ? null : /* @__PURE__ */ E(B, D({}, f, {
123
- children: /* @__PURE__ */ E(l, D({}, p, {
122
+ return delete f.ownerState, !p && o ? null : /* @__PURE__ */ E(B, R({}, f, {
123
+ children: /* @__PURE__ */ E(l, R({}, c, {
124
124
  children: t
125
125
  }))
126
126
  }));
@@ -225,22 +225,22 @@ process.env.NODE_ENV !== "production" && n.oneOfType([n.string, n.shape({
225
225
  exitDone: n.string,
226
226
  exitActive: n.string
227
227
  })]);
228
- const G = S.createContext(null);
228
+ const G = C.createContext(null);
229
229
  var ae = function(s) {
230
230
  return s.scrollTop;
231
- }, C = "unmounted", g = "exited", x = "entering", w = "entered", A = "exiting", b = /* @__PURE__ */ function(u) {
231
+ }, D = "unmounted", g = "exited", x = "entering", w = "entered", A = "exiting", b = /* @__PURE__ */ function(u) {
232
232
  re(s, u);
233
233
  function s(r, t) {
234
234
  var e;
235
235
  e = u.call(this, r, t) || this;
236
- var o = t, a = o && !o.isMounting ? r.enter : r.appear, c;
237
- return e.appearStatus = null, r.in ? a ? (c = g, e.appearStatus = x) : c = w : r.unmountOnExit || r.mountOnEnter ? c = C : c = g, e.state = {
238
- status: c
236
+ var o = t, a = o && !o.isMounting ? r.enter : r.appear, p;
237
+ return e.appearStatus = null, r.in ? a ? (p = g, e.appearStatus = x) : p = w : r.unmountOnExit || r.mountOnEnter ? p = D : p = g, e.state = {
238
+ status: p
239
239
  }, e.nextCallback = null, e;
240
240
  }
241
241
  s.getDerivedStateFromProps = function(t, e) {
242
242
  var o = t.in;
243
- return o && e.status === C ? {
243
+ return o && e.status === D ? {
244
244
  status: g
245
245
  } : null;
246
246
  };
@@ -267,7 +267,7 @@ var ae = function(s) {
267
267
  if (t === void 0 && (t = !1), e !== null)
268
268
  if (this.cancelNextCallback(), e === x) {
269
269
  if (this.props.unmountOnExit || this.props.mountOnEnter) {
270
- var o = this.props.nodeRef ? this.props.nodeRef.current : R.findDOMNode(this);
270
+ var o = this.props.nodeRef ? this.props.nodeRef.current : P.findDOMNode(this);
271
271
  o && ae(o);
272
272
  }
273
273
  this.performEnter(t);
@@ -275,10 +275,10 @@ var ae = function(s) {
275
275
  this.performExit();
276
276
  else
277
277
  this.props.unmountOnExit && this.state.status === g && this.setState({
278
- status: C
278
+ status: D
279
279
  });
280
280
  }, i.performEnter = function(t) {
281
- var e = this, o = this.props.enter, a = this.context ? this.context.isMounting : t, c = this.props.nodeRef ? [a] : [R.findDOMNode(this), a], h = c[0], d = c[1], m = this.getTimeouts(), y = a ? m.appear : m.enter;
281
+ var e = this, o = this.props.enter, a = this.context ? this.context.isMounting : t, p = this.props.nodeRef ? [a] : [P.findDOMNode(this), a], h = p[0], d = p[1], m = this.getTimeouts(), y = a ? m.appear : m.enter;
282
282
  if (!t && !o || F.disabled) {
283
283
  this.safeSetState({
284
284
  status: w
@@ -299,7 +299,7 @@ var ae = function(s) {
299
299
  });
300
300
  });
301
301
  }, i.performExit = function() {
302
- var t = this, e = this.props.exit, o = this.getTimeouts(), a = this.props.nodeRef ? void 0 : R.findDOMNode(this);
302
+ var t = this, e = this.props.exit, o = this.getTimeouts(), a = this.props.nodeRef ? void 0 : P.findDOMNode(this);
303
303
  if (!e || F.disabled) {
304
304
  this.safeSetState({
305
305
  status: g
@@ -332,31 +332,31 @@ var ae = function(s) {
332
332
  }, this.nextCallback;
333
333
  }, i.onTransitionEnd = function(t, e) {
334
334
  this.setNextCallback(e);
335
- var o = this.props.nodeRef ? this.props.nodeRef.current : R.findDOMNode(this), a = t == null && !this.props.addEndListener;
335
+ var o = this.props.nodeRef ? this.props.nodeRef.current : P.findDOMNode(this), a = t == null && !this.props.addEndListener;
336
336
  if (!o || a) {
337
337
  setTimeout(this.nextCallback, 0);
338
338
  return;
339
339
  }
340
340
  if (this.props.addEndListener) {
341
- var c = this.props.nodeRef ? [this.nextCallback] : [o, this.nextCallback], h = c[0], d = c[1];
341
+ var p = this.props.nodeRef ? [this.nextCallback] : [o, this.nextCallback], h = p[0], d = p[1];
342
342
  this.props.addEndListener(h, d);
343
343
  }
344
344
  t != null && setTimeout(this.nextCallback, t);
345
345
  }, i.render = function() {
346
346
  var t = this.state.status;
347
- if (t === C)
347
+ if (t === D)
348
348
  return null;
349
349
  var e = this.props, o = e.children;
350
350
  e.in, e.mountOnEnter, e.unmountOnExit, e.appear, e.enter, e.exit, e.timeout, e.addEndListener, e.onEnter, e.onEntering, e.onEntered, e.onExit, e.onExiting, e.onExited, e.nodeRef;
351
351
  var a = j(e, ["children", "in", "mountOnEnter", "unmountOnExit", "appear", "enter", "exit", "timeout", "addEndListener", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "nodeRef"]);
352
352
  return (
353
353
  // allows for nested Transitions
354
- /* @__PURE__ */ S.createElement(G.Provider, {
354
+ /* @__PURE__ */ C.createElement(G.Provider, {
355
355
  value: null
356
- }, typeof o == "function" ? o(t, a) : S.cloneElement(S.Children.only(o), a))
356
+ }, typeof o == "function" ? o(t, a) : C.cloneElement(C.Children.only(o), a))
357
357
  );
358
358
  }, s;
359
- }(S.Component);
359
+ }(C.Component);
360
360
  b.contextType = G;
361
361
  b.propTypes = process.env.NODE_ENV !== "production" ? {
362
362
  /**
@@ -543,7 +543,7 @@ b.defaultProps = {
543
543
  onExiting: _,
544
544
  onExited: _
545
545
  };
546
- b.UNMOUNTED = C;
546
+ b.UNMOUNTED = D;
547
547
  b.EXITED = g;
548
548
  b.ENTERING = x;
549
549
  b.ENTERED = w;
@@ -579,28 +579,29 @@ const ie = "_snackbar_1w4kg_56", ue = "_bottomToTop_1w4kg_1", v = {
579
579
  autoHideDuration: i = 5e3,
580
580
  open: r = !0,
581
581
  onClose: t,
582
- classNameWrapper: e,
583
- "data-testid": o
582
+ onClosed: e,
583
+ classNameWrapper: o,
584
+ "data-testid": a
584
585
  }) => {
585
- const [a, c] = V(!0), h = X(null), d = {
586
+ const [p, h] = V(!0), d = X(null), m = {
586
587
  entering: "translateY(0)",
587
588
  entered: "translateY(0)",
588
589
  exiting: "translateY(80px)",
589
590
  exited: "translateY(80px)",
590
591
  unmounted: "translateY(80px)"
591
- }, m = () => {
592
- c(!1);
593
592
  }, y = () => {
594
- c(!0);
593
+ h(!1);
594
+ }, T = () => {
595
+ h(!0);
595
596
  };
596
- return /* @__PURE__ */ E("div", { className: O(v.snackbar, e), children: /* @__PURE__ */ E(
597
+ return /* @__PURE__ */ E("div", { className: N(v.snackbar, o), children: /* @__PURE__ */ E(
597
598
  q,
598
599
  {
599
600
  autoHideDuration: i,
600
601
  open: r,
601
- onClose: (k, T) => T !== "clickaway" && (t == null ? void 0 : t()),
602
- exited: a,
603
- className: O(v["snackbar__snackbar-el-wrapper"]),
602
+ onClose: (k, O) => O !== "clickaway" && (t == null ? void 0 : t()),
603
+ exited: p,
604
+ className: N(v["snackbar__snackbar-el-wrapper"]),
604
605
  children: /* @__PURE__ */ E(
605
606
  b,
606
607
  {
@@ -608,22 +609,23 @@ const ie = "_snackbar_1w4kg_56", ue = "_bottomToTop_1w4kg_1", v = {
608
609
  in: r,
609
610
  appear: !0,
610
611
  unmountOnExit: !0,
611
- onEnter: m,
612
- onExited: y,
613
- nodeRef: h,
612
+ onEnter: y,
613
+ onExited: T,
614
+ onExit: e,
615
+ nodeRef: d,
614
616
  children: (k) => /* @__PURE__ */ Y(
615
617
  "div",
616
618
  {
617
- className: O(v["snackbar--content"], v[`snackbar--${s}`]),
619
+ className: N(v["snackbar--content"], v[`snackbar--${s}`]),
618
620
  style: {
619
- transform: d[k],
621
+ transform: m[k],
620
622
  transition: "transform 300ms ease"
621
623
  },
622
- ref: h,
623
- "data-testid": o,
624
+ ref: d,
625
+ "data-testid": a,
624
626
  children: [
625
- /* @__PURE__ */ E("div", { className: O(v["snackbar--message"]), children: /* @__PURE__ */ E("p", { children: u }) }),
626
- /* @__PURE__ */ E("div", { className: O(v["snackbar--action"]), children: /* @__PURE__ */ E("a", { onClick: t, children: /* @__PURE__ */ E(K, { icon: "xmark", color: "var(--white-100)", size: "1.5rem" }) }) })
627
+ /* @__PURE__ */ E("div", { className: N(v["snackbar--message"]), children: /* @__PURE__ */ E("p", { children: u }) }),
628
+ /* @__PURE__ */ E("div", { className: N(v["snackbar--action"]), children: /* @__PURE__ */ E("a", { onClick: t, children: /* @__PURE__ */ E(K, { icon: "xmark", color: "var(--white-100)", size: "1.5rem" }) }) })
627
629
  ]
628
630
  }
629
631
  )
package/dist/components/Snackbar/Snackbar.stories.d.ts CHANGED
@@ -3,7 +3,7 @@ import { StoryObj } from '@storybook/react';
3
3
 
4
4
  declare const meta: {
5
5
  title: string;
6
- component: ({ snackbarMessage, variant, autoHideDuration, open, onClose, classNameWrapper, "data-testid": dataTestId, }: SnackbarProps) => import("react/jsx-runtime").JSX.Element;
6
+ component: ({ snackbarMessage, variant, autoHideDuration, open, onClose, onClosed, classNameWrapper, "data-testid": dataTestId, }: SnackbarProps) => import("react/jsx-runtime").JSX.Element;
7
7
  tags: string[];
8
8
  decorators: ((Story: import('@storybook/types').PartialStoryFn<import('@storybook/react').ReactRenderer, {
9
9
  accept?: string | undefined;
@@ -309,6 +309,7 @@ declare const meta: {
309
309
  classNameWrapper?: string | undefined;
310
310
  autoHideDuration?: number | undefined;
311
311
  onClose?: (() => void) | undefined;
312
+ onClosed?: (() => void) | undefined;
312
313
  }>) => import("react/jsx-runtime").JSX.Element)[];
313
314
  };
314
315
  export default meta;
package/dist/components/Snackbar/SnackbarProvider.d.ts ADDED
@@ -0,0 +1,10 @@
1
+ import { SnackbarProps } from './Snackbar';
2
+
3
+ export type SnackbarContextProps = {
4
+ showMessage: (message: string, variant?: SnackbarProps['variant'], duration?: number) => void;
5
+ };
6
+ export type SnackbarProviderProps = {
7
+ children: React.ReactNode;
8
+ };
9
+ export declare const SnackbarProvider: ({ children }: SnackbarProviderProps) => import("react/jsx-runtime").JSX.Element;
10
+ export declare const useSnackbar: () => SnackbarContextProps;
package/dist/components/Snackbar/SnackbarProvider.js ADDED
@@ -0,0 +1,49 @@
1
+ import { jsx as n, jsxs as l, Fragment as g } from "react/jsx-runtime";
2
+ import { createContext as m, useState as p, useCallback as f, useContext as C } from "react";
3
+ import { Snackbar as b } from "./Snackbar.js";
4
+ const o = m({
5
+ showMessage: () => {
6
+ }
7
+ }), s = { message: "", variant: "success", duration: 5e3, open: !1 }, h = ({ children: r }) => {
8
+ const [e, t] = p(s), i = f(
9
+ (a = s.message, u = s.variant, d = s.duration) => {
10
+ t({
11
+ id: `${(/* @__PURE__ */ new Date()).getTime()}-${a}`,
12
+ message: a,
13
+ variant: u,
14
+ duration: d,
15
+ open: !0
16
+ });
17
+ },
18
+ [t]
19
+ ), c = () => {
20
+ t((a) => ({ ...a, open: !1 }));
21
+ };
22
+ return /* @__PURE__ */ n(
23
+ o.Provider,
24
+ {
25
+ value: {
26
+ showMessage: i
27
+ },
28
+ children: /* @__PURE__ */ l(g, { children: [
29
+ r,
30
+ /* @__PURE__ */ n(
31
+ b,
32
+ {
33
+ autoHideDuration: e.duration,
34
+ variant: e.variant,
35
+ open: e.open,
36
+ snackbarMessage: e.message,
37
+ onClose: c,
38
+ "data-testid": "snackbar"
39
+ },
40
+ e.id
41
+ )
42
+ ] })
43
+ }
44
+ );
45
+ }, S = () => C(o);
46
+ export {
47
+ h as SnackbarProvider,
48
+ S as useSnackbar
49
+ };
package/dist/components/Snackbar/SnackbarProvider.stories.d.ts ADDED
@@ -0,0 +1,21 @@
1
+ import { SnackbarProviderProps } from './SnackbarProvider';
2
+ import { StoryObj } from '@storybook/react';
3
+
4
+ declare const meta: {
5
+ title: string;
6
+ component: ({ children }: SnackbarProviderProps) => import("react/jsx-runtime").JSX.Element;
7
+ parameters: {
8
+ docs: {
9
+ description: {
10
+ component: string;
11
+ };
12
+ };
13
+ };
14
+ tags: string[];
15
+ decorators: ((Story: import('@storybook/types').PartialStoryFn<import('@storybook/react').ReactRenderer, {
16
+ [x: string]: any;
17
+ }>) => import("react/jsx-runtime").JSX.Element)[];
18
+ };
19
+ export default meta;
20
+ type Story = StoryObj<typeof meta>;
21
+ export declare const Provider: Story;
package/dist/components/Toggle/Toggle.js CHANGED
@@ -1,4 +1,4 @@
1
- import '../../assets/Toggle.css';
1
+ import '../../assets/Toggle2.css';
2
2
  import { jsxs as j, jsx as P } from "react/jsx-runtime";
3
3
  import { c as O } from "../../clsx-DB4S2d7J.js";
4
4
  import { u as E, b as k, g as v, a as U, _ as q, c as C, P as e, d as H, e as M } from "../../index-CH45lKw7.js";
package/dist/components/ToggleGroup/Group.d.ts ADDED
@@ -0,0 +1,18 @@
1
+ import { ToggleGroupItemProps } from './Toggle.tsx';
2
+ import { ReactElement, ReactNode } from 'react';
3
+
4
+ export type ToggleGroupProps = {
5
+ /** Optional title and description content */
6
+ legend?: ReactNode;
7
+ /** Optional any errors to display */
8
+ error?: ReactNode;
9
+ /** ToggleGroupItems to display; options to toggle between */
10
+ children: Array<ReactElement<ToggleGroupItemProps<string | number>>>;
11
+ /**
12
+ * Dataset test id only used for tests to reach in and grab the rendered DOM nodes base value is used for fieldset
13
+ * error and legend append their names e.g. {data-testid}-error and {data-testid}-legend
14
+ * */
15
+ 'data-testid'?: string;
16
+ };
17
+ declare const Group: import('react').ForwardRefExoticComponent<ToggleGroupProps & import('react').RefAttributes<HTMLFieldSetElement>>;
18
+ export default Group;
package/dist/components/ToggleGroup/Group.js ADDED
@@ -0,0 +1,7 @@
1
+ import "react/jsx-runtime";
2
+ import "react";
3
+ import "../Icon/Icon.js";
4
+ import { G as i } from "../../Group-CS_qGuuW.js";
5
+ export {
6
+ i as default
7
+ };
package/dist/components/ToggleGroup/Group.test.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/components/ToggleGroup/Toggle.d.ts ADDED
@@ -0,0 +1,15 @@
1
+ /// <reference types="react" />
2
+ export type ToggleGroupItemProps<T extends string | number> = {
3
+ /** The display text to show for this option */
4
+ text: string;
5
+ /** The underlining value of this option */
6
+ value: T;
7
+ /** Whether this radio button is selected */
8
+ isSelected?: boolean;
9
+ /** callback for selection change */
10
+ onChange: (value: T | '') => void;
11
+ /** Dataset test id only used for tests to reach in and grab the rendered DOM node of the label */
12
+ 'data-testid'?: string;
13
+ };
14
+ declare const Toggle: import('react').ForwardRefExoticComponent<ToggleGroupItemProps<string | number> & import('react').RefAttributes<HTMLInputElement>>;
15
+ export default Toggle;
package/dist/components/ToggleGroup/Toggle.js ADDED
@@ -0,0 +1,15 @@
1
+ import "react/jsx-runtime";
2
+ import "react";
3
+ import "../../clsx-DB4S2d7J.js";
4
+ import "../Button/Button.js";
5
+ import { T as x } from "../../Toggle-Cs5nKfr-.js";
6
+ import "../Dialog/Backdrop.js";
7
+ import "../Typography/Typography.js";
8
+ import "../IconButton/IconButton.js";
9
+ import "../Select/Select.js";
10
+ import "../Table/Table.js";
11
+ import "../Tabs/Tabs.js";
12
+ import "../../Group-CS_qGuuW.js";
13
+ export {
14
+ x as default
15
+ };
package/dist/components/ToggleGroup/Toggle.test.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/components/ToggleGroup/ToggleGroup.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { default as ToggleGroupItem } from './Toggle';
2
+ export { default as ToggleGroup } from './Group';
package/dist/components/ToggleGroup/ToggleGroup.js ADDED
@@ -0,0 +1,6 @@
1
+ import { T as e } from "../../Toggle-Cs5nKfr-.js";
2
+ import { G as p } from "../../Group-CS_qGuuW.js";
3
+ export {
4
+ p as ToggleGroup,
5
+ e as ToggleGroupItem
6
+ };
package/dist/components/ToggleGroup/ToggleGroup.stories.d.ts ADDED
@@ -0,0 +1,25 @@
1
+ import { ToggleGroupProps } from './Group.tsx';
2
+ import { StoryObj } from '@storybook/react';
3
+ import { FunctionComponent } from 'react';
4
+
5
+ declare const meta: {
6
+ title: string;
7
+ component: import('react').ForwardRefExoticComponent<ToggleGroupProps & import('react').RefAttributes<HTMLFieldSetElement>>;
8
+ tags: string[];
9
+ decorators: ((Story: import('@storybook/types').PartialStoryFn<import('@storybook/react').ReactRenderer, {
10
+ legend?: import('react').ReactNode;
11
+ error?: import('react').ReactNode;
12
+ children: import('react').ReactElement<import('./Toggle.tsx').ToggleGroupItemProps<string | number>, string | import('react').JSXElementConstructor<any>>[];
13
+ 'data-testid'?: string | undefined;
14
+ ref?: import('react').LegacyRef<HTMLFieldSetElement> | undefined;
15
+ key?: import('react').Key | null | undefined;
16
+ }>) => import("react/jsx-runtime").JSX.Element)[];
17
+ subcomponents: {
18
+ ToggleGroupItem: FunctionComponent<unknown>;
19
+ };
20
+ };
21
+ export default meta;
22
+ type Story = StoryObj<typeof meta>;
23
+ export declare const Simple: Story;
24
+ export declare const NoLegend: Story;
25
+ export declare const WithError: Story;
package/dist/main.d.ts CHANGED
@@ -23,5 +23,6 @@ export * from './components/Table/Table';
23
23
  export * from './components/Tabs/Tabs';
24
24
  export * from './components/TextDisplay/TextDisplay';
25
25
  export * from './components/Toggle/Toggle';
26
+ export * from './components/ToggleGroup/ToggleGroup';
26
27
  export * from './components/Tooltip/Tooltip';
27
28
  export * from './components/Typography/Typography';
package/dist/main.js CHANGED
@@ -1,48 +1,49 @@
1
1
  import { Advice as e } from "./components/Advice/Advice.js";
2
2
  import { Button as p } from "./components/Button/Button.js";
3
3
  import { Checkbox as f } from "./components/Checkbox/Checkbox.js";
4
- import { Chip as m } from "./components/Chip/Chip.js";
5
- import { Dialog as l } from "./components/Dialog/Dialog.js";
6
- import { FamilyAndIcons as T, Icon as s } from "./components/Icon/Icon.js";
7
- import { IconButton as d } from "./components/IconButton/IconButton.js";
8
- import { Input as g } from "./components/Input/Input.js";
9
- import { InputSearch as b } from "./components/InputSearch/InputSearch.js";
4
+ import { C as x, T as n } from "./Toggle-Cs5nKfr-.js";
5
+ import { Dialog as T } from "./components/Dialog/Dialog.js";
6
+ import { FamilyAndIcons as s, Icon as g } from "./components/Icon/Icon.js";
7
+ import { IconButton as u } from "./components/IconButton/IconButton.js";
8
+ import { Input as S } from "./components/Input/Input.js";
9
+ import { InputSearch as I } from "./components/InputSearch/InputSearch.js";
10
10
  import { LoadingSpinner as k } from "./components/LoadingSpinner/LoadingSpinner.js";
11
- import { PageHeader as D } from "./components/PageHeader/PageHeader.js";
12
- import { Pagination as C, paginationDefaultTranslations as A } from "./components/Pagination/Pagination.js";
11
+ import { PageHeader as C } from "./components/PageHeader/PageHeader.js";
12
+ import { Pagination as A, paginationDefaultTranslations as B } from "./components/Pagination/Pagination.js";
13
13
  import { Select as P, SelectOption as H } from "./components/Select/Select.js";
14
14
  import { Skeleton as F, SkeletonCircle as L, SkeletonTable as O } from "./components/Skeleton/Skeleton.js";
15
15
  import { Snackbar as q } from "./components/Snackbar/Snackbar.js";
16
16
  import { SortTooltip as z, sortTooltipDefaultTranslations as E } from "./components/SortTooltip/SortTooltip.js";
17
- import { Stepper as J } from "./components/Stepper/Stepper.js";
18
- import { TBody as M, THead as N, Table as Q, Td as R, Th as U, Tr as V } from "./components/Table/Table.js";
19
- import { Tabs as X } from "./components/Tabs/Tabs.js";
20
- import { TextDisplay as Z } from "./components/TextDisplay/TextDisplay.js";
21
- import { Toggle as $ } from "./components/Toggle/Toggle.js";
22
- import { Tooltip as ro } from "./components/Tooltip/Tooltip.js";
23
- import { Typography as to } from "./components/Typography/Typography.js";
24
- import { default as ao } from "./components/Dialog/DialogTitle.js";
25
- import { default as xo } from "./components/Dialog/Content.js";
26
- import { default as no } from "./components/Dialog/Actions.js";
27
- import { Tab as io } from "./components/Tabs/Tab.js";
28
- import { TabPanel as so } from "./components/Tabs/TabPanel.js";
17
+ import { Stepper as K } from "./components/Stepper/Stepper.js";
18
+ import { TBody as N, THead as Q, Table as R, Td as U, Th as V, Tr as W } from "./components/Table/Table.js";
19
+ import { Tabs as Y } from "./components/Tabs/Tabs.js";
20
+ import { TextDisplay as _ } from "./components/TextDisplay/TextDisplay.js";
21
+ import { Toggle as oo } from "./components/Toggle/Toggle.js";
22
+ import { G as eo } from "./Group-CS_qGuuW.js";
23
+ import { Tooltip as po } from "./components/Tooltip/Tooltip.js";
24
+ import { Typography as fo } from "./components/Typography/Typography.js";
25
+ import { default as xo } from "./components/Dialog/DialogTitle.js";
26
+ import { default as lo } from "./components/Dialog/Content.js";
27
+ import { default as io } from "./components/Dialog/Actions.js";
28
+ import { Tab as go } from "./components/Tabs/Tab.js";
29
+ import { TabPanel as uo } from "./components/Tabs/TabPanel.js";
29
30
  export {
30
- no as Actions,
31
+ io as Actions,
31
32
  e as Advice,
32
33
  p as Button,
33
34
  f as Checkbox,
34
- m as Chip,
35
- xo as Content,
36
- l as Dialog,
37
- ao as DialogTitle,
38
- T as FamilyAndIcons,
39
- s as Icon,
40
- d as IconButton,
41
- g as Input,
42
- b as InputSearch,
35
+ x as Chip,
36
+ lo as Content,
37
+ T as Dialog,
38
+ xo as DialogTitle,
39
+ s as FamilyAndIcons,
40
+ g as Icon,
41
+ u as IconButton,
42
+ S as Input,
43
+ I as InputSearch,
43
44
  k as LoadingSpinner,
44
- D as PageHeader,
45
- C as Pagination,
45
+ C as PageHeader,
46
+ A as Pagination,
46
47
  P as Select,
47
48
  H as SelectOption,
48
49
  F as Skeleton,
@@ -50,20 +51,22 @@ export {
50
51
  O as SkeletonTable,
51
52
  q as Snackbar,
52
53
  z as SortTooltip,
53
- J as Stepper,
54
- M as TBody,
55
- N as THead,
56
- io as Tab,
57
- so as TabPanel,
58
- Q as Table,
59
- X as Tabs,
60
- R as Td,
61
- Z as TextDisplay,
62
- U as Th,
63
- $ as Toggle,
64
- ro as Tooltip,
65
- V as Tr,
66
- to as Typography,
67
- A as paginationDefaultTranslations,
54
+ K as Stepper,
55
+ N as TBody,
56
+ Q as THead,
57
+ go as Tab,
58
+ uo as TabPanel,
59
+ R as Table,
60
+ Y as Tabs,
61
+ U as Td,
62
+ _ as TextDisplay,
63
+ V as Th,
64
+ oo as Toggle,
65
+ eo as ToggleGroup,
66
+ n as ToggleGroupItem,
67
+ po as Tooltip,
68
+ W as Tr,
69
+ fo as Typography,
70
+ B as paginationDefaultTranslations,
68
71
  E as sortTooltipDefaultTranslations
69
72
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@pismo/marola",
3
3
  "description": "CDX tribe component library",
4
- "version": "0.0.1-alpha.23",
4
+ "version": "0.0.1-alpha.25",
5
5
  "type": "module",
6
6
  "main": "dist/main.js",
7
7
  "types": "dist/main.d.ts",
@@ -91,4 +91,4 @@
91
91
  "@mui/base": "^5.0.0-beta.40",
92
92
  "@mui/material": "^5.15.15"
93
93
  }
94
- }
94
+ }
package/dist/assets/Chip.css DELETED
@@ -1 +0,0 @@
1
- ._u-typography-h1_1j9h1_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_1j9h1_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_1j9h1_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_1j9h1_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_1j9h1_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_1j9h1_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_1j9h1_43{font-size:var(--base-font-size);font-weight:var(--base-weight);line-height:var(--base-line-height)}._u-typography-base--xxl_1j9h1_48{font-size:var(--base-font-size-xxl);line-height:var(--base-line-height-xxl)}._u-typography-base--xl_1j9h1_52{font-size:var(--base-font-size-xl);line-height:var(--base-line-height-xl)}._u-typography-base--lg_1j9h1_56{font-size:var(--base-font-size-lg);line-height:var(--base-line-height-lg)}._u-typography-base--sm_1j9h1_60,._chip_1j9h1_60{font-size:var(--base-font-size-sm);line-height:var(--base-line-height-sm)}._u-typography-base--bold_1j9h1_64,._chip_1j9h1_60{font-weight:var(--base-bold)}._u-typography-base--strikethrough_1j9h1_67{text-decoration:line-through}._u-typography-base--underlined_1j9h1_70{text-decoration:underline}._u-typography-base--strikethrough-underlined_1j9h1_73{text-decoration:underline line-through}._chip_1j9h1_60{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_1j9h1_60:not(:disabled){color:rgb(var(--gray-95-rgb) .65)}._chip--button_1j9h1_89{cursor:pointer;border-color:transparent}._chip--button_1j9h1_89:disabled{cursor:initial}._chip--button_1j9h1_89:focus-visible{outline:none}._chip--button_1j9h1_89:focus{outline:2px solid var(--black-100)}._chip--outlined_1j9h1_102{padding:.3125rem .5rem;background-color:var(--white-100);border:1px solid var(--border);border-radius:calc(var(--border-radius-soft) * 4)}._chip--contained_1j9h1_108{padding:.3125rem .5rem;border:1px solid var(--border);border-color:var(--accent);border-radius:calc(var(--border-radius-soft) * 4)}._chip__adornment_1j9h1_114{display:flex;align-items:center;margin-right:.5rem}._chip__remove_1j9h1_119{display:flex;margin-left:.5rem}._chip__remove_1j9h1_119:focus-visible{outline:none}._chip__remove_1j9h1_119:focus:not(:disabled){border-radius:calc(var(--border-radius-soft) * 4);outline:2px solid var(--black-100)}._chip__remove--disabled_1j9h1_130{cursor:default}