@pismo/marola 0.0.1-alpha.24 → 0.0.1-alpha.26
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.
- package/dist/Group-CS_qGuuW.js +26 -0
- package/dist/Toggle-9cd68he4.js +141 -0
- package/dist/assets/Group.css +1 -0
- package/dist/assets/Toggle.css +1 -1
- package/dist/assets/Toggle2.css +1 -0
- package/dist/components/Button/Button.d.ts +1 -1
- package/dist/components/Button/Button.stories.d.ts +1 -1
- package/dist/components/Chip/Chip.js +10 -104
- package/dist/components/Snackbar/Snackbar.d.ts +3 -1
- package/dist/components/Snackbar/Snackbar.js +81 -79
- package/dist/components/Snackbar/Snackbar.stories.d.ts +2 -1
- package/dist/components/Toggle/Toggle.js +1 -1
- package/dist/components/ToggleGroup/Group.d.ts +18 -0
- package/dist/components/ToggleGroup/Group.js +7 -0
- package/dist/components/ToggleGroup/Group.test.d.ts +1 -0
- package/dist/components/ToggleGroup/Toggle.d.ts +15 -0
- package/dist/components/ToggleGroup/Toggle.js +16 -0
- package/dist/components/ToggleGroup/Toggle.test.d.ts +1 -0
- package/dist/components/ToggleGroup/ToggleGroup.d.ts +2 -0
- package/dist/components/ToggleGroup/ToggleGroup.js +6 -0
- package/dist/components/ToggleGroup/ToggleGroup.stories.d.ts +25 -0
- package/dist/contexts/SnackbarProvider/SnackbarProvider.d.ts +11 -0
- package/dist/contexts/SnackbarProvider/SnackbarProvider.js +50 -0
- package/dist/contexts/SnackbarProvider/SnackbarProvider.stories.d.ts +21 -0
- package/dist/main.d.ts +2 -0
- package/dist/main.js +58 -51
- package/package.json +1 -1
- package/dist/assets/Chip.css +0 -1
|
@@ -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
|
+
};
|
|
@@ -0,0 +1,141 @@
|
|
|
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 "./contexts/SnackbarProvider/SnackbarProvider.js";
|
|
16
|
+
import { B as k } from "./Button-2b1peDFT.js";
|
|
17
|
+
const x = "_chip_1j9h1_60", C = "_chip__adornment_1j9h1_114", N = "_chip__remove_1j9h1_119", s = {
|
|
18
|
+
"u-typography-h1": "_u-typography-h1_1j9h1_1",
|
|
19
|
+
"u-typography-h2": "_u-typography-h2_1j9h1_8",
|
|
20
|
+
"u-typography-h3": "_u-typography-h3_1j9h1_15",
|
|
21
|
+
"u-typography-h4": "_u-typography-h4_1j9h1_22",
|
|
22
|
+
"u-typography-h5": "_u-typography-h5_1j9h1_29",
|
|
23
|
+
"u-typography-h6": "_u-typography-h6_1j9h1_36",
|
|
24
|
+
"u-typography-base": "_u-typography-base_1j9h1_43",
|
|
25
|
+
"u-typography-base--xxl": "_u-typography-base--xxl_1j9h1_48",
|
|
26
|
+
"u-typography-base--xl": "_u-typography-base--xl_1j9h1_52",
|
|
27
|
+
"u-typography-base--lg": "_u-typography-base--lg_1j9h1_56",
|
|
28
|
+
"u-typography-base--sm": "_u-typography-base--sm_1j9h1_60",
|
|
29
|
+
chip: x,
|
|
30
|
+
"u-typography-base--bold": "_u-typography-base--bold_1j9h1_64",
|
|
31
|
+
"u-typography-base--strikethrough": "_u-typography-base--strikethrough_1j9h1_67",
|
|
32
|
+
"u-typography-base--underlined": "_u-typography-base--underlined_1j9h1_70",
|
|
33
|
+
"u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_1j9h1_73",
|
|
34
|
+
"chip--button": "_chip--button_1j9h1_89",
|
|
35
|
+
"chip--outlined": "_chip--outlined_1j9h1_102",
|
|
36
|
+
"chip--contained": "_chip--contained_1j9h1_108",
|
|
37
|
+
chip__adornment: C,
|
|
38
|
+
chip__remove: N,
|
|
39
|
+
"chip__remove--disabled": "_chip__remove--disabled_1j9h1_130"
|
|
40
|
+
}, v = c((t, a) => {
|
|
41
|
+
const { children: i, onClickContent: e, disabled: h, className: p, variant: l } = t;
|
|
42
|
+
let o = _(
|
|
43
|
+
s.chip,
|
|
44
|
+
{ [s["chip--outlined"]]: l === "outlined" },
|
|
45
|
+
{ [s["chip--contained"]]: l === "contained" },
|
|
46
|
+
p
|
|
47
|
+
);
|
|
48
|
+
return e ? (o += ` ${s["chip--button"]}`, /* @__PURE__ */ r(
|
|
49
|
+
k,
|
|
50
|
+
{
|
|
51
|
+
onClick: e,
|
|
52
|
+
disabled: h,
|
|
53
|
+
"data-testid": t["data-testid"],
|
|
54
|
+
ref: a,
|
|
55
|
+
className: o,
|
|
56
|
+
children: i
|
|
57
|
+
}
|
|
58
|
+
)) : /* @__PURE__ */ r("span", { "data-testid": t["data-testid"], ref: a, className: o, children: i });
|
|
59
|
+
}), T = (t) => {
|
|
60
|
+
const { icon: a, disabled: i = !1, className: e } = t;
|
|
61
|
+
if (a) {
|
|
62
|
+
const h = _(s.chip__adornment, e), p = i ? m(a, { color: "rgb(var(--gray-95-rgb), 0.4)" }) : a;
|
|
63
|
+
return /* @__PURE__ */ r("span", { className: h, children: p });
|
|
64
|
+
}
|
|
65
|
+
return null;
|
|
66
|
+
}, G = c((t, a) => {
|
|
67
|
+
const {
|
|
68
|
+
label: i,
|
|
69
|
+
className: e,
|
|
70
|
+
onClickContent: h,
|
|
71
|
+
leftAdornment: p,
|
|
72
|
+
loading: l = !1,
|
|
73
|
+
disabled: o = !1,
|
|
74
|
+
variant: g = "default",
|
|
75
|
+
onClickRemove: y
|
|
76
|
+
} = t;
|
|
77
|
+
return l ? /* @__PURE__ */ r(
|
|
78
|
+
f,
|
|
79
|
+
{
|
|
80
|
+
style: { width: "6rem", height: "2rem", borderRadius: "4rem", display: "inline-flex" },
|
|
81
|
+
"data-testid": t["data-testid-skeleton"]
|
|
82
|
+
}
|
|
83
|
+
) : /* @__PURE__ */ u(
|
|
84
|
+
v,
|
|
85
|
+
{
|
|
86
|
+
ref: a,
|
|
87
|
+
"data-testid": t["data-testid"],
|
|
88
|
+
onClickContent: h,
|
|
89
|
+
disabled: o,
|
|
90
|
+
className: e,
|
|
91
|
+
variant: g,
|
|
92
|
+
children: [
|
|
93
|
+
p && /* @__PURE__ */ r(T, { ...p, disabled: o }),
|
|
94
|
+
i,
|
|
95
|
+
y && /* @__PURE__ */ r(
|
|
96
|
+
"span",
|
|
97
|
+
{
|
|
98
|
+
className: _(s.chip__remove, { [s["chip__remove--disabled"]]: o }),
|
|
99
|
+
role: "button",
|
|
100
|
+
tabIndex: o ? -1 : 0,
|
|
101
|
+
"aria-label": "remove",
|
|
102
|
+
onClick: (n) => {
|
|
103
|
+
n == null || n.stopPropagation(), n == null || n.nativeEvent.stopImmediatePropagation(), y();
|
|
104
|
+
},
|
|
105
|
+
"aria-disabled": o,
|
|
106
|
+
children: /* @__PURE__ */ r(b, { icon: "circle-xmark", size: "1.125rem", color: "rgba(var(--gray-95-rgb), 0.45)" })
|
|
107
|
+
}
|
|
108
|
+
)
|
|
109
|
+
]
|
|
110
|
+
}
|
|
111
|
+
);
|
|
112
|
+
}), H = c((t, a) => {
|
|
113
|
+
const { text: i, isSelected: e = !1, value: h, onChange: p } = t;
|
|
114
|
+
return /* @__PURE__ */ u(
|
|
115
|
+
"label",
|
|
116
|
+
{
|
|
117
|
+
className: _([d.toggle__label], { [d["toggle__label--selected"]]: e }),
|
|
118
|
+
"data-testid": t["data-testid"],
|
|
119
|
+
children: [
|
|
120
|
+
/* @__PURE__ */ r(
|
|
121
|
+
"input",
|
|
122
|
+
{
|
|
123
|
+
className: _([d.toggle__input]),
|
|
124
|
+
type: "radio",
|
|
125
|
+
ref: a,
|
|
126
|
+
value: h.toString(),
|
|
127
|
+
onChange: () => p(h),
|
|
128
|
+
role: "radio",
|
|
129
|
+
checked: e,
|
|
130
|
+
"aria-checked": e
|
|
131
|
+
}
|
|
132
|
+
),
|
|
133
|
+
/* @__PURE__ */ r(j, { bold: !0, children: i })
|
|
134
|
+
]
|
|
135
|
+
}
|
|
136
|
+
);
|
|
137
|
+
});
|
|
138
|
+
export {
|
|
139
|
+
G as C,
|
|
140
|
+
H as T
|
|
141
|
+
};
|
|
@@ -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-
|
|
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}
|
|
@@ -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)}
|
|
@@ -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
|
|
26
|
+
onClick?: () => void;
|
|
27
27
|
/** HTML type of button */
|
|
28
28
|
type?: HTMLButtonElement['type'];
|
|
29
29
|
}
|
|
@@ -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
|
|
20
|
+
onClick?: (() => void) | undefined;
|
|
21
21
|
type?: "button" | "submit" | "reset" | undefined;
|
|
22
22
|
loading?: boolean | undefined;
|
|
23
23
|
disabled?: boolean | undefined;
|
|
@@ -1,113 +1,19 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
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 j } from "../../Toggle-9cd68he4.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
|
|
11
|
+
import "../Skeleton/Skeleton.js";
|
|
12
12
|
import "../Table/Table.js";
|
|
13
13
|
import "../Tabs/Tabs.js";
|
|
14
|
-
import
|
|
15
|
-
|
|
16
|
-
|
|
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 "../../contexts/SnackbarProvider/SnackbarProvider.js";
|
|
16
|
+
import "../../Button-2b1peDFT.js";
|
|
111
17
|
export {
|
|
112
|
-
|
|
18
|
+
j as Chip
|
|
113
19
|
};
|
|
@@ -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;
|
|
@@ -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
|
|
4
|
-
import
|
|
5
|
-
import { c as
|
|
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
|
|
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
|
-
|
|
25
|
+
S.useEffect(() => {
|
|
26
26
|
if (!t)
|
|
27
27
|
return;
|
|
28
|
-
function l(
|
|
29
|
-
|
|
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,
|
|
36
|
-
r == null || r(l,
|
|
37
|
-
}),
|
|
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
|
-
|
|
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 =
|
|
46
|
-
s != null &&
|
|
47
|
-
}, [s, e,
|
|
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(
|
|
50
|
-
},
|
|
49
|
+
f == null || f(c), m();
|
|
50
|
+
}, T = (l) => (c) => {
|
|
51
51
|
const f = l.onFocus;
|
|
52
|
-
f == null || f(
|
|
53
|
-
},
|
|
52
|
+
f == null || f(c), d();
|
|
53
|
+
}, k = (l) => (c) => {
|
|
54
54
|
const f = l.onMouseEnter;
|
|
55
|
-
f == null || f(
|
|
56
|
-
},
|
|
55
|
+
f == null || f(c), d();
|
|
56
|
+
}, O = (l) => (c) => {
|
|
57
57
|
const f = l.onMouseLeave;
|
|
58
|
-
f == null || f(
|
|
58
|
+
f == null || f(c), m();
|
|
59
59
|
};
|
|
60
|
-
return
|
|
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
|
|
68
|
-
return
|
|
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,
|
|
73
|
-
onBlur: y(
|
|
74
|
-
onFocus:
|
|
75
|
-
onMouseEnter:
|
|
76
|
-
onMouseLeave:
|
|
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__ */
|
|
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:
|
|
91
|
+
open: p,
|
|
92
92
|
resumeHideDuration: h,
|
|
93
93
|
slotProps: d = {},
|
|
94
94
|
slots: m = {}
|
|
95
|
-
} = s, y = j(s, ne),
|
|
96
|
-
getRootProps:
|
|
97
|
-
onClickAway:
|
|
98
|
-
} = te(
|
|
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:
|
|
102
|
+
open: p,
|
|
103
103
|
resumeHideDuration: h
|
|
104
|
-
})), L = s, l = m.root || "div",
|
|
104
|
+
})), L = s, l = m.root || "div", c = U({
|
|
105
105
|
elementType: l,
|
|
106
|
-
getSlotProps:
|
|
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:
|
|
113
|
+
className: T.root
|
|
114
114
|
}), f = U({
|
|
115
115
|
elementType: B,
|
|
116
116
|
externalSlotProps: d.clickAwayListener,
|
|
117
117
|
additionalProps: {
|
|
118
|
-
onClickAway:
|
|
118
|
+
onClickAway: O
|
|
119
119
|
},
|
|
120
120
|
ownerState: L
|
|
121
121
|
});
|
|
122
|
-
return delete f.ownerState, !
|
|
123
|
-
children: /* @__PURE__ */ E(l,
|
|
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 =
|
|
228
|
+
const G = C.createContext(null);
|
|
229
229
|
var ae = function(s) {
|
|
230
230
|
return s.scrollTop;
|
|
231
|
-
},
|
|
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,
|
|
237
|
-
return e.appearStatus = null, r.in ? a ? (
|
|
238
|
-
status:
|
|
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 ===
|
|
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 :
|
|
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:
|
|
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,
|
|
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 :
|
|
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 :
|
|
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
|
|
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 ===
|
|
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__ */
|
|
354
|
+
/* @__PURE__ */ C.createElement(G.Provider, {
|
|
355
355
|
value: null
|
|
356
|
-
}, typeof o == "function" ? o(t, a) :
|
|
356
|
+
}, typeof o == "function" ? o(t, a) : C.cloneElement(C.Children.only(o), a))
|
|
357
357
|
);
|
|
358
358
|
}, s;
|
|
359
|
-
}(
|
|
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 =
|
|
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
|
-
|
|
583
|
-
|
|
582
|
+
onClosed: e,
|
|
583
|
+
classNameWrapper: o,
|
|
584
|
+
"data-testid": a
|
|
584
585
|
}) => {
|
|
585
|
-
const [
|
|
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
|
-
|
|
593
|
+
h(!1);
|
|
594
|
+
}, T = () => {
|
|
595
|
+
h(!0);
|
|
595
596
|
};
|
|
596
|
-
return /* @__PURE__ */ E("div", { className:
|
|
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,
|
|
602
|
-
exited:
|
|
603
|
-
className:
|
|
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:
|
|
612
|
-
onExited:
|
|
613
|
-
|
|
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:
|
|
619
|
+
className: N(v["snackbar--content"], v[`snackbar--${s}`]),
|
|
618
620
|
style: {
|
|
619
|
-
transform:
|
|
621
|
+
transform: m[k],
|
|
620
622
|
transition: "transform 300ms ease"
|
|
621
623
|
},
|
|
622
|
-
ref:
|
|
623
|
-
"data-testid":
|
|
624
|
+
ref: d,
|
|
625
|
+
"data-testid": a,
|
|
624
626
|
children: [
|
|
625
|
-
/* @__PURE__ */ E("div", { className:
|
|
626
|
-
/* @__PURE__ */ E("div", { className:
|
|
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
|
)
|
|
@@ -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;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import '../../assets/
|
|
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";
|
|
@@ -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;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -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;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import "react/jsx-runtime";
|
|
2
|
+
import "react";
|
|
3
|
+
import "../../clsx-DB4S2d7J.js";
|
|
4
|
+
import "../Button/Button.js";
|
|
5
|
+
import { T } from "../../Toggle-9cd68he4.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
|
+
import "../../contexts/SnackbarProvider/SnackbarProvider.js";
|
|
14
|
+
export {
|
|
15
|
+
T as default
|
|
16
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -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;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { SnackbarProps } from '../../components/Snackbar/Snackbar';
|
|
2
|
+
|
|
3
|
+
export type SnackbarContextProps = {
|
|
4
|
+
showMessage: (message: string, variant?: SnackbarProps['variant'], duration?: number) => void;
|
|
5
|
+
};
|
|
6
|
+
export declare const SnackbarContext: import('react').Context<SnackbarContextProps>;
|
|
7
|
+
export type SnackbarProviderProps = {
|
|
8
|
+
children: React.ReactNode;
|
|
9
|
+
};
|
|
10
|
+
export declare const SnackbarProvider: ({ children }: SnackbarProviderProps) => import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export declare const useSnackbar: () => SnackbarContextProps;
|
|
@@ -0,0 +1,50 @@
|
|
|
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 "../../components/Snackbar/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
|
+
o as SnackbarContext,
|
|
48
|
+
h as SnackbarProvider,
|
|
49
|
+
S as useSnackbar
|
|
50
|
+
};
|
|
@@ -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/main.d.ts
CHANGED
|
@@ -23,5 +23,7 @@ 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';
|
|
29
|
+
export * from './contexts/SnackbarProvider/SnackbarProvider';
|
package/dist/main.js
CHANGED
|
@@ -1,69 +1,76 @@
|
|
|
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 {
|
|
5
|
-
import { Dialog as
|
|
6
|
-
import { FamilyAndIcons as
|
|
7
|
-
import { IconButton as
|
|
8
|
-
import { Input as
|
|
9
|
-
import { InputSearch as
|
|
10
|
-
import { LoadingSpinner as
|
|
11
|
-
import { PageHeader as
|
|
12
|
-
import { Pagination as
|
|
13
|
-
import { Select as
|
|
4
|
+
import { C as m, T as n } from "./Toggle-9cd68he4.js";
|
|
5
|
+
import { Dialog as i } from "./components/Dialog/Dialog.js";
|
|
6
|
+
import { FamilyAndIcons as s, Icon as c } from "./components/Icon/Icon.js";
|
|
7
|
+
import { IconButton as S } from "./components/IconButton/IconButton.js";
|
|
8
|
+
import { Input as d } from "./components/Input/Input.js";
|
|
9
|
+
import { InputSearch as k } from "./components/InputSearch/InputSearch.js";
|
|
10
|
+
import { LoadingSpinner as I } from "./components/LoadingSpinner/LoadingSpinner.js";
|
|
11
|
+
import { PageHeader as y } from "./components/PageHeader/PageHeader.js";
|
|
12
|
+
import { Pagination as P, paginationDefaultTranslations as A } from "./components/Pagination/Pagination.js";
|
|
13
|
+
import { Select as G, SelectOption as v } 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
|
|
18
|
-
import { TBody as
|
|
19
|
-
import { Tabs as
|
|
20
|
-
import { TextDisplay as
|
|
21
|
-
import { Toggle as
|
|
22
|
-
import {
|
|
23
|
-
import {
|
|
24
|
-
import {
|
|
25
|
-
import {
|
|
26
|
-
import { default as
|
|
27
|
-
import {
|
|
28
|
-
import {
|
|
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 { SnackbarContext as mo, SnackbarProvider as no, useSnackbar as lo } from "./contexts/SnackbarProvider/SnackbarProvider.js";
|
|
26
|
+
import { default as To } from "./components/Dialog/DialogTitle.js";
|
|
27
|
+
import { default as co } from "./components/Dialog/Content.js";
|
|
28
|
+
import { default as So } from "./components/Dialog/Actions.js";
|
|
29
|
+
import { Tab as bo } from "./components/Tabs/Tab.js";
|
|
30
|
+
import { TabPanel as Co } from "./components/Tabs/TabPanel.js";
|
|
29
31
|
export {
|
|
30
|
-
|
|
32
|
+
So as Actions,
|
|
31
33
|
e as Advice,
|
|
32
34
|
p as Button,
|
|
33
35
|
f as Checkbox,
|
|
34
36
|
m as Chip,
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
37
|
+
co as Content,
|
|
38
|
+
i as Dialog,
|
|
39
|
+
To as DialogTitle,
|
|
40
|
+
s as FamilyAndIcons,
|
|
41
|
+
c as Icon,
|
|
42
|
+
S as IconButton,
|
|
43
|
+
d as Input,
|
|
44
|
+
k as InputSearch,
|
|
45
|
+
I as LoadingSpinner,
|
|
46
|
+
y as PageHeader,
|
|
47
|
+
P as Pagination,
|
|
48
|
+
G as Select,
|
|
49
|
+
v as SelectOption,
|
|
48
50
|
F as Skeleton,
|
|
49
51
|
L as SkeletonCircle,
|
|
50
52
|
O as SkeletonTable,
|
|
51
53
|
q as Snackbar,
|
|
54
|
+
mo as SnackbarContext,
|
|
55
|
+
no as SnackbarProvider,
|
|
52
56
|
z as SortTooltip,
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
57
|
+
K as Stepper,
|
|
58
|
+
N as TBody,
|
|
59
|
+
Q as THead,
|
|
60
|
+
bo as Tab,
|
|
61
|
+
Co as TabPanel,
|
|
62
|
+
R as Table,
|
|
63
|
+
Y as Tabs,
|
|
64
|
+
U as Td,
|
|
65
|
+
_ as TextDisplay,
|
|
66
|
+
V as Th,
|
|
67
|
+
oo as Toggle,
|
|
68
|
+
eo as ToggleGroup,
|
|
69
|
+
n as ToggleGroupItem,
|
|
70
|
+
po as Tooltip,
|
|
71
|
+
W as Tr,
|
|
72
|
+
fo as Typography,
|
|
67
73
|
A as paginationDefaultTranslations,
|
|
68
|
-
E as sortTooltipDefaultTranslations
|
|
74
|
+
E as sortTooltipDefaultTranslations,
|
|
75
|
+
lo as useSnackbar
|
|
69
76
|
};
|
package/package.json
CHANGED
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}
|