@veritone-ce/design-system 2.0.0-next.0 → 2.0.0-next.1
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/esm-next/Alert/styles.module.scss.js +1 -1
- package/dist/esm-next/Button/styles.module.scss.js +1 -1
- package/dist/esm-next/Checkbox/styles.module.scss.js +1 -1
- package/dist/esm-next/CircularProgress/styles.module.scss.js +1 -1
- package/dist/esm-next/Dialog/styles.module.scss.js +1 -1
- package/dist/esm-next/IconButton/styles.module.scss.js +1 -1
- package/dist/esm-next/Input/styles.module.scss.js +1 -1
- package/dist/esm-next/Menu/index.js +103 -31
- package/dist/esm-next/Menu/styles.module.scss.js +1 -1
- package/dist/esm-next/RadioButton/styles.module.scss.js +1 -1
- package/dist/esm-next/Select/controlled.js +82 -76
- package/dist/esm-next/Select/index.js +47 -33
- package/dist/esm-next/Select/styles.module.scss.js +1 -1
- package/dist/esm-next/Textarea/styles.module.scss.js +1 -1
- package/dist/esm-next/Tooltip/styles.module.scss.js +1 -1
- package/dist/esm-next/Typography/variants.module.scss.js +1 -1
- package/dist/esm-next/index.js +1 -1
- package/dist/esm-next/styles/scss/_index.scss +1 -0
- package/dist/esm-next/styles/scss/functions.scss +4 -1
- package/dist/esm-next/styles/scss/mixins.scss +7 -5
- package/dist/esm-next/styles/scss/theme.generated.scss +116 -0
- package/dist/esm-next/styles.css +13 -13
- package/dist/types/src-next/Menu/index.d.ts +15 -4
- package/dist/types/src-next/Select/controlled.d.ts +6 -21
- package/dist/types/src-next/Select/index.d.ts +8 -13
- package/dist/types/src-next/Select/types.d.ts +22 -0
- package/package.json +5 -3
- package/dist/esm-next/utils/controlled.js +0 -17
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
var modules_efc4e723 = {"alert":"
|
|
1
|
+
var modules_efc4e723 = {"alert":"vt_ce_Alert_alert__4a21b95f","alert-stripe":"vt_ce_Alert_alertStripe__4a21b95f","alert-icon":"vt_ce_Alert_alertIcon__4a21b95f","alert-content":"vt_ce_Alert_alertContent__4a21b95f","alert-label":"vt_ce_Alert_alertLabel__4a21b95f","alert-text":"vt_ce_Alert_alertText__4a21b95f","spacer":"vt_ce_Alert_spacer__4a21b95f","alert-action":"vt_ce_Alert_alertAction__4a21b95f","alert-close":"vt_ce_Alert_alertClose__4a21b95f"};
|
|
2
2
|
|
|
3
3
|
export { modules_efc4e723 as default };
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
var modules_efc4e723 = {"button":"
|
|
1
|
+
var modules_efc4e723 = {"button":"vt_ce_Button_button__337f1a71","primary":"vt_ce_Button_primary__337f1a71","secondary":"vt_ce_Button_secondary__337f1a71","tertiary":"vt_ce_Button_tertiary__337f1a71","inner-container":"vt_ce_Button_innerContainer__337f1a71","loading-container":"vt_ce_Button_loadingContainer__337f1a71","button-icon":"vt_ce_Button_buttonIcon__337f1a71"};
|
|
2
2
|
|
|
3
3
|
export { modules_efc4e723 as default };
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
var modules_efc4e723 = {"checkbox":"
|
|
1
|
+
var modules_efc4e723 = {"checkbox":"vt_ce_Checkbox_checkbox__3a746cfc","checkbox-svg-path":"vt_ce_Checkbox_checkboxSvgPath__3a746cfc","passthrough-label-container":"vt_ce_Checkbox_passthroughLabelContainer__3a746cfc","invisible-checkbox":"vt_ce_Checkbox_invisibleCheckbox__3a746cfc","visible-label":"vt_ce_Checkbox_visibleLabel__3a746cfc","icon-container":"vt_ce_Checkbox_iconContainer__3a746cfc"};
|
|
2
2
|
|
|
3
3
|
export { modules_efc4e723 as default };
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
var modules_efc4e723 = {"dialog-overlay":"
|
|
1
|
+
var modules_efc4e723 = {"dialog-overlay":"vt_ce_Dialog_dialogOverlay__4b764cfb","dialog":"vt_ce_Dialog_dialog__4b764cfb","dialog-heading":"vt_ce_Dialog_dialogHeading__4b764cfb","dialog-content":"vt_ce_Dialog_dialogContent__4b764cfb","dialog-typography":"vt_ce_Dialog_dialogTypography__4b764cfb","dialog-actions":"vt_ce_Dialog_dialogActions__4b764cfb"};
|
|
2
2
|
|
|
3
3
|
export { modules_efc4e723 as default };
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
var modules_efc4e723 = {"button":"
|
|
1
|
+
var modules_efc4e723 = {"button":"vt_ce_IconButton_button__db6cbe79","inner-icon":"vt_ce_IconButton_innerIcon__db6cbe79","loading-container":"vt_ce_IconButton_loadingContainer__db6cbe79"};
|
|
2
2
|
|
|
3
3
|
export { modules_efc4e723 as default };
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
var modules_efc4e723 = {"input":"
|
|
1
|
+
var modules_efc4e723 = {"input":"vt_ce_Input_input__d76cf435","label":"vt_ce_Input_label__d76cf435","inner-input-container":"vt_ce_Input_innerInputContainer__d76cf435","inner-input":"vt_ce_Input_innerInput__d76cf435","input-icon":"vt_ce_Input_inputIcon__d76cf435","help-label":"vt_ce_Input_helpLabel__d76cf435","error-label":"vt_ce_Input_errorLabel__d76cf435"};
|
|
2
2
|
|
|
3
3
|
export { modules_efc4e723 as default };
|
|
@@ -5,23 +5,29 @@ import '@mui/system';
|
|
|
5
5
|
import { cx } from '../styles/cx.js';
|
|
6
6
|
import '../styles/defaultTheme.js';
|
|
7
7
|
import '../styles/styled.js';
|
|
8
|
+
import { useListItem, useMergeRefs, useFloating, offset, flip, shift, size, autoUpdate, useRole, useDismiss, useListNavigation, useTypeahead, useInteractions, FloatingList, FloatingFocusManager } from '@floating-ui/react';
|
|
8
9
|
import modules_efc4e723 from './styles.module.scss.js';
|
|
9
|
-
import { useFloating, shift, flip, useDismiss, useInteractions } from '@floating-ui/react';
|
|
10
10
|
import { resolvePopoverAnchor } from '../popover/utils.js';
|
|
11
11
|
|
|
12
12
|
function Menu({
|
|
13
|
-
open,
|
|
13
|
+
open: isOpen,
|
|
14
|
+
role: assumeRole = "menu",
|
|
14
15
|
placement = "bottom-start",
|
|
16
|
+
enableTypeahead = true,
|
|
17
|
+
matchAnchorWidth = false,
|
|
15
18
|
options,
|
|
16
19
|
dismissEnabled = true,
|
|
17
20
|
className,
|
|
18
21
|
...props
|
|
19
22
|
}) {
|
|
20
23
|
const anchor = resolvePopoverAnchor(props.anchor);
|
|
21
|
-
const
|
|
22
|
-
|
|
24
|
+
const [activeIndex, setActiveIndex] = React__default.useState(null);
|
|
25
|
+
const elementsRef = React__default.useRef([]);
|
|
26
|
+
const labelsRef = React__default.useRef([]);
|
|
27
|
+
const { floatingStyles, refs, context } = useFloating({
|
|
28
|
+
open: isOpen,
|
|
23
29
|
onOpenChange(newOpen) {
|
|
24
|
-
if (!newOpen) {
|
|
30
|
+
if (!newOpen && dismissEnabled) {
|
|
25
31
|
props.onDismiss?.();
|
|
26
32
|
}
|
|
27
33
|
},
|
|
@@ -29,36 +35,102 @@ function Menu({
|
|
|
29
35
|
reference: anchor
|
|
30
36
|
},
|
|
31
37
|
placement,
|
|
32
|
-
middleware: [
|
|
38
|
+
middleware: [
|
|
39
|
+
offset({
|
|
40
|
+
mainAxis: 4,
|
|
41
|
+
alignmentAxis: 0
|
|
42
|
+
}),
|
|
43
|
+
flip(),
|
|
44
|
+
shift(),
|
|
45
|
+
size({
|
|
46
|
+
apply({ rects, elements }) {
|
|
47
|
+
if (matchAnchorWidth) {
|
|
48
|
+
Object.assign(elements.floating.style, {
|
|
49
|
+
width: `${rects.reference.width}px`
|
|
50
|
+
});
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
})
|
|
54
|
+
],
|
|
55
|
+
whileElementsMounted: autoUpdate
|
|
33
56
|
});
|
|
34
|
-
const
|
|
35
|
-
const
|
|
36
|
-
|
|
37
|
-
|
|
57
|
+
const role = useRole(context, { role: assumeRole });
|
|
58
|
+
const dismiss = useDismiss(context, {
|
|
59
|
+
enabled: dismissEnabled,
|
|
60
|
+
bubbles: false
|
|
61
|
+
});
|
|
62
|
+
const listNavigation = useListNavigation(context, {
|
|
63
|
+
listRef: elementsRef,
|
|
64
|
+
activeIndex,
|
|
65
|
+
nested: false,
|
|
66
|
+
onNavigate: setActiveIndex
|
|
67
|
+
});
|
|
68
|
+
const typeahead = useTypeahead(context, {
|
|
69
|
+
enabled: enableTypeahead,
|
|
70
|
+
listRef: labelsRef,
|
|
71
|
+
onMatch: isOpen ? setActiveIndex : void 0,
|
|
72
|
+
activeIndex
|
|
73
|
+
});
|
|
74
|
+
const { getFloatingProps, getItemProps } = useInteractions([
|
|
75
|
+
role,
|
|
76
|
+
dismiss,
|
|
77
|
+
listNavigation,
|
|
78
|
+
typeahead
|
|
79
|
+
]);
|
|
80
|
+
return /* @__PURE__ */ React__default.createElement(FloatingList, { elementsRef, labelsRef }, isOpen && /* @__PURE__ */ React__default.createElement(
|
|
81
|
+
FloatingFocusManager,
|
|
38
82
|
{
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
"
|
|
42
|
-
style: {
|
|
43
|
-
...floatingStyles,
|
|
44
|
-
...props.style
|
|
45
|
-
},
|
|
46
|
-
...getFloatingProps(),
|
|
47
|
-
className: cx(modules_efc4e723["menu"], className)
|
|
83
|
+
context,
|
|
84
|
+
modal: false,
|
|
85
|
+
order: ["reference", "content"]
|
|
48
86
|
},
|
|
49
|
-
|
|
50
|
-
"
|
|
87
|
+
/* @__PURE__ */ React__default.createElement(
|
|
88
|
+
"div",
|
|
51
89
|
{
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
90
|
+
ref: refs.setFloating,
|
|
91
|
+
tabIndex: 0,
|
|
92
|
+
"aria-labelledby": anchor?.id || props.anchorId,
|
|
93
|
+
style: {
|
|
94
|
+
...floatingStyles,
|
|
95
|
+
...props.style
|
|
96
|
+
},
|
|
97
|
+
...getFloatingProps(),
|
|
98
|
+
className: cx(modules_efc4e723["menu"], className)
|
|
57
99
|
},
|
|
58
|
-
option
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
100
|
+
options.map((option, i) => /* @__PURE__ */ React__default.createElement(
|
|
101
|
+
MenuItem,
|
|
102
|
+
{
|
|
103
|
+
key: i,
|
|
104
|
+
role: "menuitem",
|
|
105
|
+
isActive: i === activeIndex,
|
|
106
|
+
...getItemProps({
|
|
107
|
+
onClick(event) {
|
|
108
|
+
option.onSelect(event);
|
|
109
|
+
}
|
|
110
|
+
}),
|
|
111
|
+
label: option.label,
|
|
112
|
+
icon: option.icon
|
|
113
|
+
}
|
|
114
|
+
))
|
|
115
|
+
)
|
|
116
|
+
));
|
|
62
117
|
}
|
|
118
|
+
const MenuItem = React__default.forwardRef(({ label, disabled, isActive, ...props }, forwardedRef) => {
|
|
119
|
+
const item = useListItem({ label: disabled ? null : label });
|
|
120
|
+
return /* @__PURE__ */ React__default.createElement(
|
|
121
|
+
"button",
|
|
122
|
+
{
|
|
123
|
+
...props,
|
|
124
|
+
ref: useMergeRefs([item.ref, forwardedRef]),
|
|
125
|
+
type: "button",
|
|
126
|
+
role: "menuitem",
|
|
127
|
+
className: modules_efc4e723["option"],
|
|
128
|
+
tabIndex: isActive ? 0 : -1,
|
|
129
|
+
disabled
|
|
130
|
+
},
|
|
131
|
+
props.icon && /* @__PURE__ */ React__default.createElement("span", { className: modules_efc4e723["option-icon"] }, props.icon),
|
|
132
|
+
/* @__PURE__ */ React__default.createElement("span", { className: modules_efc4e723["option-label"] }, label)
|
|
133
|
+
);
|
|
134
|
+
});
|
|
63
135
|
|
|
64
|
-
export { Menu as default };
|
|
136
|
+
export { MenuItem, Menu as default };
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
var modules_efc4e723 = {"menu":"
|
|
1
|
+
var modules_efc4e723 = {"menu":"vt_ce_Menu_menu__a15c691c","option":"vt_ce_Menu_option__a15c691c","option-icon":"vt_ce_Menu_optionIcon__a15c691c","option-label":"vt_ce_Menu_optionLabel__a15c691c"};
|
|
2
2
|
|
|
3
3
|
export { modules_efc4e723 as default };
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
var modules_efc4e723 = {"radio":"
|
|
1
|
+
var modules_efc4e723 = {"radio":"vt_ce_RadioButton_radio__5d0a694f","radio-circle-outer":"vt_ce_RadioButton_radioCircleOuter__5d0a694f","radio-circle-inner":"vt_ce_RadioButton_radioCircleInner__5d0a694f","passthrough-label-container":"vt_ce_RadioButton_passthroughLabelContainer__5d0a694f","invisible-radio":"vt_ce_RadioButton_invisibleRadio__5d0a694f","visible-label":"vt_ce_RadioButton_visibleLabel__5d0a694f","icon-container":"vt_ce_RadioButton_iconContainer__5d0a694f"};
|
|
2
2
|
|
|
3
3
|
export { modules_efc4e723 as default };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
'use client';
|
|
3
|
-
import React__default, {
|
|
3
|
+
import React__default, { useId, useRef, useState } from 'react';
|
|
4
4
|
import '@mui/system';
|
|
5
5
|
import { cx } from '../styles/cx.js';
|
|
6
6
|
import '../styles/defaultTheme.js';
|
|
@@ -13,90 +13,96 @@ import '../Icon/factory.js';
|
|
|
13
13
|
|
|
14
14
|
const DefaultEndIcon = adaptMuiSvgIcon(ArrowDropDown);
|
|
15
15
|
const DefaultUnsetIcon = adaptMuiSvgIcon(Close);
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
);
|
|
33
|
-
|
|
16
|
+
function ControlledSelect({
|
|
17
|
+
ref,
|
|
18
|
+
endIcon = /* @__PURE__ */ React__default.createElement(DefaultEndIcon, null),
|
|
19
|
+
placeholder = "Select...",
|
|
20
|
+
...props
|
|
21
|
+
}) {
|
|
22
|
+
const anchorId = useId();
|
|
23
|
+
const anchorRef = useRef(null);
|
|
24
|
+
const [activeAnchor, setActiveAnchor] = useState(null);
|
|
25
|
+
const open = Boolean(activeAnchor);
|
|
26
|
+
const unsetIcon = /* @__PURE__ */ React__default.createElement(DefaultUnsetIcon, null);
|
|
27
|
+
const selectedOption = props.options.find(
|
|
28
|
+
(option) => option.value === props.value
|
|
29
|
+
);
|
|
30
|
+
let filteredOptions = props.options;
|
|
31
|
+
if (props.filterOptions) {
|
|
32
|
+
filteredOptions = props.filterOptions(filteredOptions);
|
|
33
|
+
}
|
|
34
|
+
filteredOptions = filteredOptions.filter(
|
|
35
|
+
(option) => option.label.toLowerCase().includes(props.inputValue.toLowerCase())
|
|
36
|
+
);
|
|
37
|
+
return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
|
|
38
|
+
"span",
|
|
39
|
+
{
|
|
40
|
+
id: anchorId,
|
|
41
|
+
ref: anchorRef,
|
|
42
|
+
className: cx(modules_efc4e723["select"], props.className),
|
|
43
|
+
style: props.style,
|
|
44
|
+
onClick: () => setActiveAnchor(anchorRef.current)
|
|
45
|
+
},
|
|
46
|
+
/* @__PURE__ */ React__default.createElement("label", { className: modules_efc4e723["label"] }, props.label),
|
|
47
|
+
/* @__PURE__ */ React__default.createElement(
|
|
34
48
|
"span",
|
|
35
49
|
{
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
className:
|
|
39
|
-
style: props.style,
|
|
40
|
-
onClick: () => setActiveAnchor(anchorRef.current)
|
|
50
|
+
"data-disabled": props.disabled ?? false,
|
|
51
|
+
"data-error": props.error !== void 0,
|
|
52
|
+
className: modules_efc4e723["inner-input-container"]
|
|
41
53
|
},
|
|
42
|
-
/* @__PURE__ */ React__default.createElement("
|
|
54
|
+
props.startIcon && /* @__PURE__ */ React__default.createElement("span", { className: modules_efc4e723["select-icon"] }, props.startIcon),
|
|
43
55
|
/* @__PURE__ */ React__default.createElement(
|
|
56
|
+
"input",
|
|
57
|
+
{
|
|
58
|
+
ref,
|
|
59
|
+
type: "text",
|
|
60
|
+
placeholder,
|
|
61
|
+
value: selectedOption?.label ?? props.inputValue,
|
|
62
|
+
disabled: props.disabled,
|
|
63
|
+
onChange: (e) => props.onInputChange(e, e.target.value),
|
|
64
|
+
className: modules_efc4e723["inner-input"]
|
|
65
|
+
}
|
|
66
|
+
),
|
|
67
|
+
selectedOption && /* @__PURE__ */ React__default.createElement(
|
|
44
68
|
"span",
|
|
45
69
|
{
|
|
46
|
-
"
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
props.startIcon && /* @__PURE__ */ React__default.createElement("span", { className: modules_efc4e723["select-icon"] }, props.startIcon),
|
|
51
|
-
/* @__PURE__ */ React__default.createElement(
|
|
52
|
-
"input",
|
|
53
|
-
{
|
|
54
|
-
ref,
|
|
55
|
-
type: "text",
|
|
56
|
-
placeholder,
|
|
57
|
-
value: selectedOption?.label ?? props.inputValue,
|
|
58
|
-
disabled: props.disabled,
|
|
59
|
-
onChange: (e) => props.onInputChange(e.target.value),
|
|
60
|
-
className: modules_efc4e723["inner-input"]
|
|
70
|
+
className: modules_efc4e723["select-icon"],
|
|
71
|
+
onClick: (e) => {
|
|
72
|
+
props.onChange?.(e, null);
|
|
73
|
+
props.onInputChange(e, "");
|
|
61
74
|
}
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
"span",
|
|
65
|
-
{
|
|
66
|
-
className: modules_efc4e723["select-icon"],
|
|
67
|
-
onClick: () => {
|
|
68
|
-
props.onChange?.("");
|
|
69
|
-
props.onInputChange("");
|
|
70
|
-
}
|
|
71
|
-
},
|
|
72
|
-
unsetIcon
|
|
73
|
-
),
|
|
74
|
-
endIcon && /* @__PURE__ */ React__default.createElement("span", { className: modules_efc4e723["select-icon"] }, endIcon)
|
|
75
|
+
},
|
|
76
|
+
unsetIcon
|
|
75
77
|
),
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
78
|
+
endIcon && /* @__PURE__ */ React__default.createElement("span", { className: modules_efc4e723["select-icon"] }, endIcon)
|
|
79
|
+
),
|
|
80
|
+
props.helpLabel && /* @__PURE__ */ React__default.createElement("span", { className: modules_efc4e723["help-label"] }, props.helpLabel),
|
|
81
|
+
props.error && /* @__PURE__ */ React__default.createElement("span", { className: modules_efc4e723["error-label"] }, /* @__PURE__ */ React__default.createElement(IndicatorCircle, null), /* @__PURE__ */ React__default.createElement("span", null, props.error))
|
|
82
|
+
), /* @__PURE__ */ React__default.createElement(
|
|
83
|
+
Menu,
|
|
84
|
+
{
|
|
85
|
+
role: "select",
|
|
86
|
+
anchorId,
|
|
87
|
+
anchor: activeAnchor,
|
|
88
|
+
enableTypeahead: false,
|
|
89
|
+
matchAnchorWidth: true,
|
|
90
|
+
open,
|
|
91
|
+
onDismiss: () => {
|
|
92
|
+
setActiveAnchor(null);
|
|
93
|
+
},
|
|
94
|
+
options: filteredOptions.map((option) => ({
|
|
95
|
+
label: option.label,
|
|
96
|
+
icon: option.icon,
|
|
97
|
+
onSelect(e) {
|
|
98
|
+
props.onChange(e, option.value);
|
|
99
|
+
props.onInputChange(e, option.label);
|
|
85
100
|
setActiveAnchor(null);
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
props.onChange(option.value);
|
|
92
|
-
props.onInputChange(option.label);
|
|
93
|
-
setActiveAnchor(null);
|
|
94
|
-
}
|
|
95
|
-
}))
|
|
96
|
-
}
|
|
97
|
-
));
|
|
98
|
-
}
|
|
99
|
-
);
|
|
101
|
+
}
|
|
102
|
+
}))
|
|
103
|
+
}
|
|
104
|
+
));
|
|
105
|
+
}
|
|
100
106
|
const IndicatorCircle = () => /* @__PURE__ */ React__default.createElement(
|
|
101
107
|
"svg",
|
|
102
108
|
{
|
|
@@ -1,40 +1,54 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
'use client';
|
|
3
|
-
import React__default, {
|
|
4
|
-
import { useManagedStateSwitch } from '../utils/controlled.js';
|
|
3
|
+
import React__default, { useState } from 'react';
|
|
5
4
|
import ControlledSelect from './controlled.js';
|
|
6
5
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
6
|
+
function Select({
|
|
7
|
+
ref,
|
|
8
|
+
defaultValue = null,
|
|
9
|
+
value: propsValue,
|
|
10
|
+
inputValue: propsInputValue,
|
|
11
|
+
onChange: propsOnChange,
|
|
12
|
+
onInputChange: propsOnInputChange,
|
|
13
|
+
...props
|
|
14
|
+
}) {
|
|
15
|
+
const [uncontrolled, setUncontrolled] = useState(defaultValue);
|
|
16
|
+
const [value, onChange] = propsValue !== void 0 ? [
|
|
17
|
+
propsValue,
|
|
18
|
+
(e, newValue) => {
|
|
19
|
+
propsOnChange?.(e, newValue);
|
|
20
|
+
}
|
|
21
|
+
] : [
|
|
22
|
+
uncontrolled,
|
|
23
|
+
(e, newValue) => {
|
|
24
|
+
setUncontrolled(newValue);
|
|
25
|
+
propsOnChange?.(e, newValue);
|
|
26
|
+
}
|
|
27
|
+
];
|
|
28
|
+
const [uncontrolledInputValue, setUncontrolledInputValue] = useState("");
|
|
29
|
+
const [inputValue, onInputChange] = propsInputValue !== void 0 ? [
|
|
30
|
+
propsInputValue,
|
|
31
|
+
(e, newValue) => {
|
|
32
|
+
propsOnInputChange?.(e, newValue);
|
|
33
|
+
}
|
|
34
|
+
] : [
|
|
35
|
+
uncontrolledInputValue,
|
|
36
|
+
(e, newValue) => {
|
|
37
|
+
setUncontrolledInputValue(newValue);
|
|
38
|
+
propsOnInputChange?.(e, newValue);
|
|
39
|
+
}
|
|
40
|
+
];
|
|
41
|
+
return /* @__PURE__ */ React__default.createElement(
|
|
42
|
+
ControlledSelect,
|
|
43
|
+
{
|
|
44
|
+
ref,
|
|
45
|
+
...props,
|
|
46
|
+
value,
|
|
18
47
|
onChange,
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
""
|
|
25
|
-
);
|
|
26
|
-
return /* @__PURE__ */ React__default.createElement(
|
|
27
|
-
ControlledSelect,
|
|
28
|
-
{
|
|
29
|
-
ref,
|
|
30
|
-
...props,
|
|
31
|
-
value,
|
|
32
|
-
onChange: setValue,
|
|
33
|
-
inputValue,
|
|
34
|
-
onInputChange: setInputValue
|
|
35
|
-
}
|
|
36
|
-
);
|
|
37
|
-
}
|
|
38
|
-
);
|
|
48
|
+
inputValue,
|
|
49
|
+
onInputChange
|
|
50
|
+
}
|
|
51
|
+
);
|
|
52
|
+
}
|
|
39
53
|
|
|
40
54
|
export { Select as default };
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
var modules_efc4e723 = {"select":"
|
|
1
|
+
var modules_efc4e723 = {"select":"vt_ce_Select_select__41767ed6","label":"vt_ce_Select_label__41767ed6","inner-input-container":"vt_ce_Select_innerInputContainer__41767ed6","inner-input":"vt_ce_Select_innerInput__41767ed6","select-icon":"vt_ce_Select_selectIcon__41767ed6","help-label":"vt_ce_Select_helpLabel__41767ed6","error-label":"vt_ce_Select_errorLabel__41767ed6"};
|
|
2
2
|
|
|
3
3
|
export { modules_efc4e723 as default };
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
var modules_efc4e723 = {"textarea":"
|
|
1
|
+
var modules_efc4e723 = {"textarea":"vt_ce_Textarea_textarea__38180680","label":"vt_ce_Textarea_label__38180680","inner-textarea-container":"vt_ce_Textarea_innerTextareaContainer__38180680","inner-textarea":"vt_ce_Textarea_innerTextarea__38180680","help-label":"vt_ce_Textarea_helpLabel__38180680","error-label":"vt_ce_Textarea_errorLabel__38180680"};
|
|
2
2
|
|
|
3
3
|
export { modules_efc4e723 as default };
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
var modules_b5c3b63b = {"t-h4":"
|
|
1
|
+
var modules_b5c3b63b = {"t-h4":"vt_ce_Typography_tH4__c74f55aa","t-label":"vt_ce_Typography_tLabel__c74f55aa","t-paragraph1":"vt_ce_Typography_tParagraph1__c74f55aa","t-paragraph2":"vt_ce_Typography_tParagraph2__c74f55aa","t-paragraph3":"vt_ce_Typography_tParagraph3__c74f55aa","t-button":"vt_ce_Typography_tButton__c74f55aa","t-buttonSmall":"vt_ce_Typography_tButtonSmall__c74f55aa","c-primary":"vt_ce_Typography_cPrimary__c74f55aa","c-secondary":"vt_ce_Typography_cSecondary__c74f55aa","c-tertiary":"vt_ce_Typography_cTertiary__c74f55aa","c-disabled":"vt_ce_Typography_cDisabled__c74f55aa"};
|
|
2
2
|
|
|
3
3
|
export { modules_b5c3b63b as default };
|
package/dist/esm-next/index.js
CHANGED
|
@@ -22,7 +22,7 @@ export { adaptMuiSvgIcon, adaptSvgIcon } from './Icon/wrappers.js';
|
|
|
22
22
|
export { createIconComponent } from './Icon/factory.js';
|
|
23
23
|
export { default as IconButton } from './IconButton/index.js';
|
|
24
24
|
export { default as Input } from './Input/index.js';
|
|
25
|
-
export { default as Menu } from './Menu/index.js';
|
|
25
|
+
export { default as Menu, MenuItem } from './Menu/index.js';
|
|
26
26
|
export { default as RadioButton } from './RadioButton/index.js';
|
|
27
27
|
export { default as Select } from './Select/index.js';
|
|
28
28
|
export { default as Textarea } from './Textarea/index.js';
|
|
@@ -1,7 +1,9 @@
|
|
|
1
|
+
@import './functions';
|
|
2
|
+
|
|
1
3
|
@mixin theme-typography($variant) {
|
|
2
|
-
font-family: var(
|
|
3
|
-
font-size: var(
|
|
4
|
-
font-style: var(
|
|
5
|
-
font-weight: var(
|
|
6
|
-
line-height: var(
|
|
4
|
+
font-family: theme-var(typography-#{$variant}-font-family);
|
|
5
|
+
font-size: theme-var(typography-#{$variant}-font-size);
|
|
6
|
+
font-style: theme-var(typography-#{$variant}-font-style);
|
|
7
|
+
font-weight: theme-var(typography-#{$variant}-font-weight);
|
|
8
|
+
line-height: theme-var(typography-#{$variant}-line-height);
|
|
7
9
|
}
|
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
// Code generated by yarn generate:scss:theme; DO NOT EDIT.
|
|
2
|
+
$default-theme: (
|
|
3
|
+
"palette-text-primary": (#2A323C),
|
|
4
|
+
"palette-text-secondary": (#5C6269),
|
|
5
|
+
"palette-text-tertiary": (#465364),
|
|
6
|
+
"palette-action-primary": (#1871E8),
|
|
7
|
+
"palette-action-hover": (#335B89),
|
|
8
|
+
"palette-action-on": (#FFFFFF),
|
|
9
|
+
"palette-action-destructive": (#EB0000),
|
|
10
|
+
"palette-action-destructive-hover": (#a63737),
|
|
11
|
+
"palette-indicator-success": (#28BA3F),
|
|
12
|
+
"palette-indicator-info": (#335B89),
|
|
13
|
+
"palette-indicator-warning": (#FFBB0A),
|
|
14
|
+
"palette-indicator-error": (#EB0000),
|
|
15
|
+
"palette-background": (#FFFFFF),
|
|
16
|
+
"palette-background-alt": (#E0E8F0),
|
|
17
|
+
"palette-row-hover": (#EAF1FA),
|
|
18
|
+
"palette-disabled": (#7C848D),
|
|
19
|
+
"palette-disabled-background": (#FAFAFA),
|
|
20
|
+
"typography-font-family": (Nunito Sans, Helvetica, sans-serif),
|
|
21
|
+
"typography-font-weight-regular": (400),
|
|
22
|
+
"typography-font-weight-medium": (600),
|
|
23
|
+
"typography-font-weight-bold": (700),
|
|
24
|
+
"typography-h4-font-family": (Nunito Sans, Helvetica, sans-serif),
|
|
25
|
+
"typography-h4-font-style": (normal),
|
|
26
|
+
"typography-h4-font-weight": (600),
|
|
27
|
+
"typography-h4-font-size": (18px),
|
|
28
|
+
"typography-h4-line-height": (24px),
|
|
29
|
+
"typography-label-font-family": (Nunito Sans, Helvetica, sans-serif),
|
|
30
|
+
"typography-label-font-style": (normal),
|
|
31
|
+
"typography-label-font-weight": (600),
|
|
32
|
+
"typography-label-font-size": (14px),
|
|
33
|
+
"typography-label-line-height": (17px),
|
|
34
|
+
"typography-paragraph-1-font-family": (Nunito Sans, Helvetica, sans-serif),
|
|
35
|
+
"typography-paragraph-1-font-style": (normal),
|
|
36
|
+
"typography-paragraph-1-font-weight": (400),
|
|
37
|
+
"typography-paragraph-1-font-size": (16px),
|
|
38
|
+
"typography-paragraph-1-line-height": (24px),
|
|
39
|
+
"typography-paragraph-2-font-family": (Nunito Sans, Helvetica, sans-serif),
|
|
40
|
+
"typography-paragraph-2-font-style": (normal),
|
|
41
|
+
"typography-paragraph-2-font-weight": (400),
|
|
42
|
+
"typography-paragraph-2-font-size": (14px),
|
|
43
|
+
"typography-paragraph-2-line-height": (20px),
|
|
44
|
+
"typography-paragraph-3-font-family": (Nunito Sans, Helvetica, sans-serif),
|
|
45
|
+
"typography-paragraph-3-font-style": (normal),
|
|
46
|
+
"typography-paragraph-3-font-weight": (400),
|
|
47
|
+
"typography-paragraph-3-font-size": (12px),
|
|
48
|
+
"typography-paragraph-3-line-height": (18px),
|
|
49
|
+
"typography-button-font-family": (Nunito Sans, Helvetica, sans-serif),
|
|
50
|
+
"typography-button-font-style": (normal),
|
|
51
|
+
"typography-button-font-weight": (600),
|
|
52
|
+
"typography-button-font-size": (14px),
|
|
53
|
+
"typography-button-line-height": (20px),
|
|
54
|
+
"typography-button-small-font-family": (Nunito Sans, Helvetica, sans-serif),
|
|
55
|
+
"typography-button-small-font-style": (normal),
|
|
56
|
+
"typography-button-small-font-weight": (600),
|
|
57
|
+
"typography-button-small-font-size": (12px),
|
|
58
|
+
"typography-button-small-line-height": (18px)
|
|
59
|
+
);
|
|
60
|
+
|
|
61
|
+
$theme-palette-text-primary: var(--vt-ce-theme-palette-text-primary, (#2A323C));
|
|
62
|
+
$theme-palette-text-secondary: var(--vt-ce-theme-palette-text-secondary, (#5C6269));
|
|
63
|
+
$theme-palette-text-tertiary: var(--vt-ce-theme-palette-text-tertiary, (#465364));
|
|
64
|
+
$theme-palette-action-primary: var(--vt-ce-theme-palette-action-primary, (#1871E8));
|
|
65
|
+
$theme-palette-action-hover: var(--vt-ce-theme-palette-action-hover, (#335B89));
|
|
66
|
+
$theme-palette-action-on: var(--vt-ce-theme-palette-action-on, (#FFFFFF));
|
|
67
|
+
$theme-palette-action-destructive: var(--vt-ce-theme-palette-action-destructive, (#EB0000));
|
|
68
|
+
$theme-palette-action-destructive-hover: var(--vt-ce-theme-palette-action-destructive-hover, (#a63737));
|
|
69
|
+
$theme-palette-indicator-success: var(--vt-ce-theme-palette-indicator-success, (#28BA3F));
|
|
70
|
+
$theme-palette-indicator-info: var(--vt-ce-theme-palette-indicator-info, (#335B89));
|
|
71
|
+
$theme-palette-indicator-warning: var(--vt-ce-theme-palette-indicator-warning, (#FFBB0A));
|
|
72
|
+
$theme-palette-indicator-error: var(--vt-ce-theme-palette-indicator-error, (#EB0000));
|
|
73
|
+
$theme-palette-background: var(--vt-ce-theme-palette-background, (#FFFFFF));
|
|
74
|
+
$theme-palette-background-alt: var(--vt-ce-theme-palette-background-alt, (#E0E8F0));
|
|
75
|
+
$theme-palette-row-hover: var(--vt-ce-theme-palette-row-hover, (#EAF1FA));
|
|
76
|
+
$theme-palette-disabled: var(--vt-ce-theme-palette-disabled, (#7C848D));
|
|
77
|
+
$theme-palette-disabled-background: var(--vt-ce-theme-palette-disabled-background, (#FAFAFA));
|
|
78
|
+
$theme-typography-font-family: var(--vt-ce-theme-typography-font-family, (Nunito Sans, Helvetica, sans-serif));
|
|
79
|
+
$theme-typography-font-weight-regular: var(--vt-ce-theme-typography-font-weight-regular, (400));
|
|
80
|
+
$theme-typography-font-weight-medium: var(--vt-ce-theme-typography-font-weight-medium, (600));
|
|
81
|
+
$theme-typography-font-weight-bold: var(--vt-ce-theme-typography-font-weight-bold, (700));
|
|
82
|
+
$theme-typography-h4-font-family: var(--vt-ce-theme-typography-h4-font-family, (Nunito Sans, Helvetica, sans-serif));
|
|
83
|
+
$theme-typography-h4-font-style: var(--vt-ce-theme-typography-h4-font-style, (normal));
|
|
84
|
+
$theme-typography-h4-font-weight: var(--vt-ce-theme-typography-h4-font-weight, (600));
|
|
85
|
+
$theme-typography-h4-font-size: var(--vt-ce-theme-typography-h4-font-size, (18px));
|
|
86
|
+
$theme-typography-h4-line-height: var(--vt-ce-theme-typography-h4-line-height, (24px));
|
|
87
|
+
$theme-typography-label-font-family: var(--vt-ce-theme-typography-label-font-family, (Nunito Sans, Helvetica, sans-serif));
|
|
88
|
+
$theme-typography-label-font-style: var(--vt-ce-theme-typography-label-font-style, (normal));
|
|
89
|
+
$theme-typography-label-font-weight: var(--vt-ce-theme-typography-label-font-weight, (600));
|
|
90
|
+
$theme-typography-label-font-size: var(--vt-ce-theme-typography-label-font-size, (14px));
|
|
91
|
+
$theme-typography-label-line-height: var(--vt-ce-theme-typography-label-line-height, (17px));
|
|
92
|
+
$theme-typography-paragraph-1-font-family: var(--vt-ce-theme-typography-paragraph-1-font-family, (Nunito Sans, Helvetica, sans-serif));
|
|
93
|
+
$theme-typography-paragraph-1-font-style: var(--vt-ce-theme-typography-paragraph-1-font-style, (normal));
|
|
94
|
+
$theme-typography-paragraph-1-font-weight: var(--vt-ce-theme-typography-paragraph-1-font-weight, (400));
|
|
95
|
+
$theme-typography-paragraph-1-font-size: var(--vt-ce-theme-typography-paragraph-1-font-size, (16px));
|
|
96
|
+
$theme-typography-paragraph-1-line-height: var(--vt-ce-theme-typography-paragraph-1-line-height, (24px));
|
|
97
|
+
$theme-typography-paragraph-2-font-family: var(--vt-ce-theme-typography-paragraph-2-font-family, (Nunito Sans, Helvetica, sans-serif));
|
|
98
|
+
$theme-typography-paragraph-2-font-style: var(--vt-ce-theme-typography-paragraph-2-font-style, (normal));
|
|
99
|
+
$theme-typography-paragraph-2-font-weight: var(--vt-ce-theme-typography-paragraph-2-font-weight, (400));
|
|
100
|
+
$theme-typography-paragraph-2-font-size: var(--vt-ce-theme-typography-paragraph-2-font-size, (14px));
|
|
101
|
+
$theme-typography-paragraph-2-line-height: var(--vt-ce-theme-typography-paragraph-2-line-height, (20px));
|
|
102
|
+
$theme-typography-paragraph-3-font-family: var(--vt-ce-theme-typography-paragraph-3-font-family, (Nunito Sans, Helvetica, sans-serif));
|
|
103
|
+
$theme-typography-paragraph-3-font-style: var(--vt-ce-theme-typography-paragraph-3-font-style, (normal));
|
|
104
|
+
$theme-typography-paragraph-3-font-weight: var(--vt-ce-theme-typography-paragraph-3-font-weight, (400));
|
|
105
|
+
$theme-typography-paragraph-3-font-size: var(--vt-ce-theme-typography-paragraph-3-font-size, (12px));
|
|
106
|
+
$theme-typography-paragraph-3-line-height: var(--vt-ce-theme-typography-paragraph-3-line-height, (18px));
|
|
107
|
+
$theme-typography-button-font-family: var(--vt-ce-theme-typography-button-font-family, (Nunito Sans, Helvetica, sans-serif));
|
|
108
|
+
$theme-typography-button-font-style: var(--vt-ce-theme-typography-button-font-style, (normal));
|
|
109
|
+
$theme-typography-button-font-weight: var(--vt-ce-theme-typography-button-font-weight, (600));
|
|
110
|
+
$theme-typography-button-font-size: var(--vt-ce-theme-typography-button-font-size, (14px));
|
|
111
|
+
$theme-typography-button-line-height: var(--vt-ce-theme-typography-button-line-height, (20px));
|
|
112
|
+
$theme-typography-button-small-font-family: var(--vt-ce-theme-typography-button-small-font-family, (Nunito Sans, Helvetica, sans-serif));
|
|
113
|
+
$theme-typography-button-small-font-style: var(--vt-ce-theme-typography-button-small-font-style, (normal));
|
|
114
|
+
$theme-typography-button-small-font-weight: var(--vt-ce-theme-typography-button-small-font-weight, (600));
|
|
115
|
+
$theme-typography-button-small-font-size: var(--vt-ce-theme-typography-button-small-font-size, (12px));
|
|
116
|
+
$theme-typography-button-small-line-height: var(--vt-ce-theme-typography-button-small-line-height, (18px))
|
package/dist/esm-next/styles.css
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
.
|
|
2
|
-
.
|
|
3
|
-
.
|
|
4
|
-
.
|
|
5
|
-
.
|
|
6
|
-
.
|
|
7
|
-
.
|
|
1
|
+
.vt_ce_Checkbox_checkbox__3a746cfc{align-items:center;color:var(--vt-ce-theme-palette-text-secondary,#5c6269);cursor:pointer;display:inline-flex}.vt_ce_Checkbox_checkbox__3a746cfc .vt_ce_Checkbox_checkboxSvgPath__3a746cfc{fill:var(--vt-ce-theme-palette-text-secondary,#5c6269)}.vt_ce_Checkbox_checkbox__3a746cfc:hover .vt_ce_Checkbox_checkboxSvgPath__3a746cfc{fill:var(--vt-ce-theme-palette-action-hover,#335b89)}.vt_ce_Checkbox_checkbox__3a746cfc[aria-checked=mixed] .vt_ce_Checkbox_checkboxSvgPath__3a746cfc,.vt_ce_Checkbox_checkbox__3a746cfc[aria-checked=true] .vt_ce_Checkbox_checkboxSvgPath__3a746cfc{fill:var(--vt-ce-theme-palette-action-primary,#1871e8)}.vt_ce_Checkbox_checkbox__3a746cfc[aria-checked=mixed]:hover .vt_ce_Checkbox_checkboxSvgPath__3a746cfc,.vt_ce_Checkbox_checkbox__3a746cfc[aria-checked=true]:hover .vt_ce_Checkbox_checkboxSvgPath__3a746cfc{fill:var(--vt-ce-theme-palette-action-hover,#335b89)}.vt_ce_Checkbox_checkbox__3a746cfc[aria-disabled=true] .vt_ce_Checkbox_checkboxSvgPath__3a746cfc,.vt_ce_Checkbox_checkbox__3a746cfc[aria-disabled=true]:hover .vt_ce_Checkbox_checkboxSvgPath__3a746cfc{fill:var(--vt-ce-theme-palette-disabled,#7c848d)}.vt_ce_Checkbox_passthroughLabelContainer__3a746cfc{cursor:pointer;display:inline-block;height:40px;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:40px}.vt_ce_Checkbox_invisibleCheckbox__3a746cfc{cursor:pointer;height:0;opacity:0;position:absolute;width:0}.vt_ce_Checkbox_visibleLabel__3a746cfc{font-family:var(--vt-ce-theme-typography-paragraph-1-font-family,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-paragraph-1-font-size,16px);font-style:var(--vt-ce-theme-typography-paragraph-1-font-style,normal);font-weight:var(--vt-ce-theme-typography-paragraph-1-font-weight,400);line-height:var(--vt-ce-theme-typography-paragraph-1-line-height,24px);margin-left:5px}.vt_ce_Checkbox_iconContainer__3a746cfc{align-items:center;bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0;z-index:1}
|
|
2
|
+
.vt_ce_Dialog_dialogOverlay__4b764cfb{background:rgba(0,0,0,.54);display:grid;place-items:center}.vt_ce_Dialog_dialog__4b764cfb{background-color:var(--vt-ce-theme-palette-background,#fff);border-radius:4px;color:var(--vt-ce-theme-palette-text-primary,#2a323c);display:flex;flex-direction:column;margin:15px;max-height:calc(100% - 64px);max-width:calc(100% - 64px);padding:15px 0}.vt_ce_Dialog_dialogHeading__4b764cfb{flex:0 0 auto;font-size:18px;line-height:24px;margin:15px 0 0;padding:0 30px}.vt_ce_Dialog_dialogContent__4b764cfb{flex:1 1 auto;--webkit-overflow-scrolling:touch;overflow-y:auto;padding:0 30px}.vt_ce_Dialog_dialogTypography__4b764cfb{margin:15px 0}.vt_ce_Dialog_dialogActions__4b764cfb{align-items:center;display:flex;flex:0 0 auto;gap:10px;justify-content:flex-end;margin:15px 0;padding:0 30px}
|
|
3
|
+
.vt_ce_Input_input__d76cf435{display:inline-flex;flex-direction:column;gap:3px}.vt_ce_Input_label__d76cf435{color:var(--vt-ce-theme-palette-text-secondary,#5c6269);font-family:var(--vt-ce-theme-typography-label-font-family,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-label-font-size,14px);font-style:var(--vt-ce-theme-typography-label-font-style,normal);font-weight:var(--vt-ce-theme-typography-label-font-weight,600);line-height:var(--vt-ce-theme-typography-label-line-height,17px)}.vt_ce_Input_innerInputContainer__d76cf435{align-items:center;align-self:stretch;background:var(--vt-ce-theme-palette-background,#fff);border-radius:4px;color:var(--vt-ce-theme-palette-text-primary,#2a323c);display:flex;gap:10px;margin-bottom:1px;margin-top:1px;outline-color:var(--vt-ce-theme-palette-text-secondary,#5c6269);outline-style:solid;outline-width:1px;padding:0 8px}.vt_ce_Input_innerInputContainer__d76cf435:focus-within{outline-color:var(--vt-ce-theme-palette-action-hover,#335b89);outline-width:2px}.vt_ce_Input_innerInputContainer__d76cf435:hover{outline-color:var(--vt-ce-theme-palette-action-hover,#335b89);outline-width:2px}.vt_ce_Input_innerInputContainer__d76cf435[data-disabled=true]{background-color:var(--vt-ce-theme-palette-disabled-background,#fafafa);color:var(--vt-ce-theme-palette-disabled,#7c848d);outline-color:var(--vt-ce-theme-palette-background-alt,#e0e8f0)}.vt_ce_Input_innerInputContainer__d76cf435[data-disabled=true]:focus-within{outline-color:var(--vt-ce-theme-palette-background-alt,#e0e8f0);outline-width:1px}.vt_ce_Input_innerInputContainer__d76cf435[data-disabled=true]:hover{outline-color:var(--vt-ce-theme-palette-background-alt,#e0e8f0);outline-width:1px}.vt_ce_Input_innerInputContainer__d76cf435[data-error=true]{outline-color:var(--vt-ce-theme-palette-indicator-error,#eb0000)}.vt_ce_Input_innerInput__d76cf435{background:none;border:none;color:inherit;flex-grow:1;font-family:var(--vt-ce-theme-typography-paragraph-2-font-family,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-paragraph-2-font-size,14px);font-style:var(--vt-ce-theme-typography-paragraph-2-font-style,normal);font-weight:var(--vt-ce-theme-typography-paragraph-2-font-weight,400);line-height:var(--vt-ce-theme-typography-paragraph-2-line-height,20px);outline:none;padding:8px 0}.vt_ce_Input_innerInput__d76cf435::-moz-placeholder{color:var(--vt-ce-theme-palette-disabled,#7c848d)}.vt_ce_Input_innerInput__d76cf435::placeholder{color:var(--vt-ce-theme-palette-disabled,#7c848d)}.vt_ce_Input_inputIcon__d76cf435{align-items:center;display:inline-flex;flex-shrink:0;justify-content:center;padding:8px 0;--vt-ce-icon-size:18px}.vt_ce_Input_helpLabel__d76cf435{color:var(--vt-ce-theme-palette-text-secondary,#5c6269)}.vt_ce_Input_errorLabel__d76cf435,.vt_ce_Input_helpLabel__d76cf435{font-family:var(--vt-ce-theme-typography-paragraph-3-font-family,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-paragraph-3-font-size,12px);font-style:var(--vt-ce-theme-typography-paragraph-3-font-style,normal);font-weight:var(--vt-ce-theme-typography-paragraph-3-font-weight,400);line-height:var(--vt-ce-theme-typography-paragraph-3-line-height,18px)}.vt_ce_Input_errorLabel__d76cf435{align-items:center;color:var(--vt-ce-theme-palette-indicator-error,#eb0000);display:flex;gap:3px}
|
|
4
|
+
.vt_ce_RadioButton_radio__5d0a694f{align-items:center;color:var(--vt-ce-theme-palette-text-secondary,#5c6269);cursor:pointer;display:flex}.vt_ce_RadioButton_radio__5d0a694f .vt_ce_RadioButton_radioCircleOuter__5d0a694f{fill:none;stroke:var(--vt-ce-theme-palette-text-tertiary,#465364)}.vt_ce_RadioButton_radio__5d0a694f .vt_ce_RadioButton_radioCircleInner__5d0a694f{fill:none}.vt_ce_RadioButton_radio__5d0a694f:hover .vt_ce_RadioButton_radioCircleOuter__5d0a694f{fill:none;stroke:var(--vt-ce-theme-palette-text-tertiary,#465364)}.vt_ce_RadioButton_radio__5d0a694f:hover .vt_ce_RadioButton_radioCircleInner__5d0a694f{fill:var(--vt-ce-theme-palette-action-hover,#335b89)}.vt_ce_RadioButton_radio__5d0a694f[aria-checked=true] .vt_ce_RadioButton_radioCircleInner__5d0a694f{fill:var(--vt-ce-theme-palette-action-primary,#1871e8)}.vt_ce_RadioButton_radio__5d0a694f[aria-checked=true]:hover .vt_ce_RadioButton_radioCircleInner__5d0a694f{fill:var(--vt-ce-theme-palette-action-hover,#335b89)}.vt_ce_RadioButton_radio__5d0a694f[aria-disabled=true]{color:var(--vt-ce-theme-palette-disabled,#7c848d);fill:none}.vt_ce_RadioButton_radio__5d0a694f[aria-disabled=true] .vt_ce_RadioButton_radioCircleOuter__5d0a694f{stroke:var(--vt-ce-theme-palette-disabled,#7c848d)}.vt_ce_RadioButton_radio__5d0a694f[aria-disabled=true][aria-checked=true] .vt_ce_RadioButton_radioCircleInner__5d0a694f{fill:var(--vt-ce-theme-palette-disabled,#7c848d)}.vt_ce_RadioButton_radio__5d0a694f[aria-disabled=true]:hover{fill:none}.vt_ce_RadioButton_radio__5d0a694f[aria-disabled=true]:hover .vt_ce_RadioButton_radioCircleOuter__5d0a694f{stroke:var(--vt-ce-theme-palette-disabled,#7c848d)}.vt_ce_RadioButton_radio__5d0a694f[aria-disabled=true]:hover[aria-checked=true] .vt_ce_RadioButton_radioCircleInner__5d0a694f{fill:var(--vt-ce-theme-palette-disabled,#7c848d)}.vt_ce_RadioButton_passthroughLabelContainer__5d0a694f{cursor:pointer;display:inline-block;height:40px;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:40px}.vt_ce_RadioButton_invisibleRadio__5d0a694f{cursor:pointer;height:0;opacity:0;position:absolute;width:0}.vt_ce_RadioButton_visibleLabel__5d0a694f{font-family:var(--vt-ce-theme-typography-paragraph-1-font-family,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-paragraph-1-font-size,16px);font-style:var(--vt-ce-theme-typography-paragraph-1-font-style,normal);font-weight:var(--vt-ce-theme-typography-paragraph-1-font-weight,400);line-height:var(--vt-ce-theme-typography-paragraph-1-line-height,24px);margin-left:5px}.vt_ce_RadioButton_iconContainer__5d0a694f{align-items:center;bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0;z-index:1}
|
|
5
|
+
.vt_ce_Menu_menu__a15c691c{border:1px solid var(--vt-ce-theme-palette-disabled,#7c848d);border-radius:0 0 4px 4px;display:block;outline:0;padding-bottom:5px;padding-top:5px}.vt_ce_Menu_menu__a15c691c,.vt_ce_Menu_option__a15c691c{background-color:var(--vt-ce-theme-palette-background,#fff)}.vt_ce_Menu_option__a15c691c{align-items:center;border:none;color:var(--vt-ce-theme-palette-text-primary,#2a323c);cursor:pointer;display:flex;font-family:var(--vt-ce-theme-typography-paragraph-2-font-family,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-paragraph-2-font-size,14px);font-style:var(--vt-ce-theme-typography-paragraph-2-font-style,normal);font-weight:var(--vt-ce-theme-typography-paragraph-2-font-weight,400);line-height:var(--vt-ce-theme-typography-paragraph-2-line-height,20px);padding:5px 10px;width:100%}.vt_ce_Menu_option__a15c691c:focus{background-color:var(--vt-ce-theme-palette-row-hover,#eaf1fa);outline:none}.vt_ce_Menu_optionIcon__a15c691c{align-items:center;display:inline-flex;justify-content:center;margin-inline-end:10px;--vt-ce-icon-size:14px}.vt_ce_Menu_optionLabel__a15c691c{text-align:start}
|
|
6
|
+
.vt_ce_Textarea_textarea__38180680{display:inline-flex;flex-direction:column;gap:3px}.vt_ce_Textarea_label__38180680{color:var(--vt-ce-theme-palette-text-secondary,#5c6269);font-family:var(--vt-ce-theme-typography-label-font-family,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-label-font-size,14px);font-style:var(--vt-ce-theme-typography-label-font-style,normal);font-weight:var(--vt-ce-theme-typography-label-font-weight,600);line-height:var(--vt-ce-theme-typography-label-line-height,17px)}.vt_ce_Textarea_innerTextareaContainer__38180680{align-items:center;align-self:stretch;background:var(--vt-ce-theme-palette-background,#fff);border-radius:4px;color:var(--vt-ce-theme-palette-text-primary,#2a323c);display:flex;gap:10px;margin-bottom:1px;margin-top:1px;outline-color:unset;outline-style:solid;outline-width:1px;padding:8px}.vt_ce_Textarea_innerTextareaContainer__38180680:focus-within{outline-color:unset;outline-width:2px}.vt_ce_Textarea_innerTextareaContainer__38180680[data-disabled=true]{background-color:var(--vt-ce-theme-palette-disabled-background,#fafafa);color:var(--vt-ce-theme-palette-disabled,#7c848d);outline-color:var(--vt-ce-theme-palette-background-alt,#e0e8f0)}.vt_ce_Textarea_innerTextareaContainer__38180680[data-disabled=true]:focus-within{outline-color:var(--vt-ce-theme-palette-background-alt,#e0e8f0);outline-width:1px}.vt_ce_Textarea_innerTextareaContainer__38180680[data-disabled=true]:hover{outline-color:var(--vt-ce-theme-palette-background-alt,#e0e8f0);outline-width:1px}.vt_ce_Textarea_innerTextareaContainer__38180680[data-error=true]{outline-color:var(--vt-ce-theme-palette-indicator-error,#eb0000)}.vt_ce_Textarea_innerTextarea__38180680{background:none;border:none;color:inherit;flex-grow:1;font-family:var(--vt-ce-theme-typography-paragraph-2-font-family,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-paragraph-2-font-size,14px);font-style:var(--vt-ce-theme-typography-paragraph-2-font-style,normal);font-weight:var(--vt-ce-theme-typography-paragraph-2-font-weight,400);line-height:var(--vt-ce-theme-typography-paragraph-2-line-height,20px);outline:none}.vt_ce_Textarea_innerTextarea__38180680::-moz-placeholder{color:var(--vt-ce-theme-palette-disabled,#7c848d)}.vt_ce_Textarea_innerTextarea__38180680::placeholder{color:var(--vt-ce-theme-palette-disabled,#7c848d)}.vt_ce_Textarea_helpLabel__38180680{color:var(--vt-ce-theme-palette-text-secondary,#5c6269)}.vt_ce_Textarea_errorLabel__38180680,.vt_ce_Textarea_helpLabel__38180680{font-family:var(--vt-ce-theme-typography-paragraph-3-font-family,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-paragraph-3-font-size,12px);font-style:var(--vt-ce-theme-typography-paragraph-3-font-style,normal);font-weight:var(--vt-ce-theme-typography-paragraph-3-font-weight,400);line-height:var(--vt-ce-theme-typography-paragraph-3-line-height,18px)}.vt_ce_Textarea_errorLabel__38180680{align-items:center;color:var(--vt-ce-theme-palette-indicator-error,#eb0000);display:flex;gap:3px}
|
|
7
|
+
.vt_ce_Alert_alert__4a21b95f{--alert-color:var(--vt-ce-theme-palette-indicator-success,#28ba3f);align-items:stretch;background-color:var(--vt-ce-theme-palette-background,#fff);border-color:var(--vt-ce-theme-palette-disabled,#7c848d);border-radius:4px;border-style:solid;border-width:1px;display:flex;width:415px}.vt_ce_Alert_alertStripe__4a21b95f{background-color:var(--alert-color);width:4px}.vt_ce_Alert_alertIcon__4a21b95f{align-items:center;color:var(--alert-color);display:flex;margin:10px;--vt-ce-icon-size:24px}.vt_ce_Alert_alertContent__4a21b95f{align-items:baseline;color:var(--vt-ce-theme-palette-text-primary,#2a323c);display:flex;flex-wrap:wrap;margin:14px 0}.vt_ce_Alert_alertLabel__4a21b95f{font-weight:var(--vt-ce-theme-typography-paragraph-3-font-weight,400);font-weight:700}.vt_ce_Alert_alertLabel__4a21b95f,.vt_ce_Alert_alertText__4a21b95f{display:inline-block;font-family:var(--vt-ce-theme-typography-paragraph-3-font-family,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-paragraph-3-font-size,12px);font-style:var(--vt-ce-theme-typography-paragraph-3-font-style,normal);line-height:var(--vt-ce-theme-typography-paragraph-3-line-height,18px);margin-right:2px;white-space:pre}.vt_ce_Alert_alertText__4a21b95f{font-weight:var(--vt-ce-theme-typography-paragraph-3-font-weight,400)}.vt_ce_Alert_spacer__4a21b95f{flex-grow:1}.vt_ce_Alert_alertAction__4a21b95f{flex-shrink:0}.vt_ce_Alert_alertClose__4a21b95f{align-items:center;color:var(--vt-ce-theme-palette-text-primary,#2a323c);display:flex;margin-right:10px}
|
|
8
8
|
/*! modern-normalize v2.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */*,:after,:before{box-sizing:border-box}html{font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;line-height:1.15;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{margin:0}hr{color:inherit;height:0}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}
|
|
9
|
-
.
|
|
10
|
-
.
|
|
11
|
-
.
|
|
12
|
-
.
|
|
13
|
-
.
|
|
9
|
+
.vt_ce_CircularProgress_container__ea033e1c{--circular-progress-color:var(--vt-ce-theme-palette-action-primary,#1871e8);align-items:baseline;color:var(--circular-progress-color);display:inline-flex;justify-content:center}.vt_ce_CircularProgress_container__ea033e1c[data-fill-parent-height=true],.vt_ce_CircularProgress_container__ea033e1c[data-fill-parent-height=true] svg{height:100%}
|
|
10
|
+
.vt_ce_Button_button__337f1a71{align-items:center;border:1px solid transparent;border-radius:4px;cursor:pointer;display:inline-flex;gap:5px;justify-content:center;position:relative}.vt_ce_Button_button__337f1a71[data-size=large]{font-family:var(--vt-ce-theme-typography-button-font-family,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-button-font-size,14px);font-style:var(--vt-ce-theme-typography-button-font-style,normal);font-weight:var(--vt-ce-theme-typography-button-font-weight,600);line-height:var(--vt-ce-theme-typography-button-line-height,20px);min-height:36px;padding:7px 15px}.vt_ce_Button_button__337f1a71[data-size=small]{font-family:var(--vt-ce-theme-typography-button-small-font-family,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-button-small-font-size,12px);font-style:var(--vt-ce-theme-typography-button-small-font-style,normal);font-weight:var(--vt-ce-theme-typography-button-small-font-weight,600);line-height:var(--vt-ce-theme-typography-button-small-line-height,18px);min-height:26px;padding:3px 15px}.vt_ce_Button_button__337f1a71.vt_ce_Button_primary__337f1a71{background-color:var(--vt-ce-theme-palette-action-primary,#1871e8);color:var(--vt-ce-theme-palette-action-on,#fff)}.vt_ce_Button_button__337f1a71.vt_ce_Button_primary__337f1a71:hover{background-color:var(--vt-ce-theme-palette-action-hover,#335b89)}.vt_ce_Button_button__337f1a71.vt_ce_Button_primary__337f1a71:disabled{background-color:var(--vt-ce-theme-palette-disabled-background,#fafafa);border-color:var(--vt-ce-theme-palette-background-alt,#e0e8f0);color:var(--vt-ce-theme-palette-disabled,#7c848d)}.vt_ce_Button_button__337f1a71.vt_ce_Button_primary__337f1a71[data-destructive=true]{background-color:var(--vt-ce-theme-palette-action-destructive,#eb0000)}.vt_ce_Button_button__337f1a71.vt_ce_Button_primary__337f1a71[data-destructive=true]:hover{background-color:var(--vt-ce-theme-palette-action-destructive-hover,#a63737)}.vt_ce_Button_button__337f1a71.vt_ce_Button_primary__337f1a71[data-loading=true]:disabled{color:var(--vt-ce-theme-palette-action-primary,#1871e8)}.vt_ce_Button_button__337f1a71.vt_ce_Button_secondary__337f1a71{background-color:var(--vt-ce-theme-palette-background,#fff);border-color:var(--vt-ce-theme-palette-text-secondary,#5c6269);color:var(--vt-ce-theme-palette-text-secondary,#5c6269)}.vt_ce_Button_button__337f1a71.vt_ce_Button_secondary__337f1a71:hover{background-color:var(--vt-ce-theme-palette-background,#fff);border-color:var(--vt-ce-theme-palette-action-hover,#335b89);color:var(--vt-ce-theme-palette-action-hover,#335b89)}.vt_ce_Button_button__337f1a71.vt_ce_Button_secondary__337f1a71:disabled{background-color:var(--vt-ce-theme-palette-disabled-background,#fafafa);border-color:var(--vt-ce-theme-palette-background-alt,#e0e8f0);color:var(--vt-ce-theme-palette-disabled,#7c848d)}.vt_ce_Button_button__337f1a71.vt_ce_Button_secondary__337f1a71[data-destructive=true]{background-color:var(--vt-ce-theme-palette-background,#fff);border-color:var(--vt-ce-theme-palette-action-destructive,#eb0000);color:var(--vt-ce-theme-palette-action-destructive,#eb0000)}.vt_ce_Button_button__337f1a71.vt_ce_Button_secondary__337f1a71[data-destructive=true]:hover{background-color:var(--vt-ce-theme-palette-background,#fff);border-color:var(--vt-ce-theme-palette-action-destructive-hover,#a63737);color:var(--vt-ce-theme-palette-action-destructive-hover,#a63737)}.vt_ce_Button_button__337f1a71.vt_ce_Button_secondary__337f1a71[data-loading=true]:disabled{color:var(--vt-ce-theme-palette-action-primary,#1871e8)}.vt_ce_Button_button__337f1a71.vt_ce_Button_tertiary__337f1a71{background-color:transparent;color:var(--vt-ce-theme-palette-text-tertiary,#465364)}.vt_ce_Button_button__337f1a71.vt_ce_Button_tertiary__337f1a71:hover{color:var(--vt-ce-theme-palette-action-hover,#335b89)}.vt_ce_Button_button__337f1a71.vt_ce_Button_tertiary__337f1a71:disabled{color:var(--vt-ce-theme-palette-disabled,#7c848d)}.vt_ce_Button_button__337f1a71.vt_ce_Button_tertiary__337f1a71[data-destructive=true]{color:var(--vt-ce-theme-palette-action-destructive,#eb0000)}.vt_ce_Button_button__337f1a71.vt_ce_Button_tertiary__337f1a71[data-destructive=true]:hover{color:var(--vt-ce-theme-palette-action-destructive-hover,#a63737)}.vt_ce_Button_button__337f1a71.vt_ce_Button_tertiary__337f1a71[data-loading=true]:disabled{color:var(--vt-ce-theme-palette-action-primary,#1871e8)}.vt_ce_Button_button__337f1a71[data-loading=true] .vt_ce_Button_innerContainer__337f1a71{visibility:hidden}.vt_ce_Button_loadingContainer__337f1a71{align-items:center;bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}.vt_ce_Button_innerContainer__337f1a71{align-items:center;display:inline-flex;gap:5px;justify-content:center;visibility:visible}.vt_ce_Button_buttonIcon__337f1a71{align-items:center;display:inline-flex;justify-content:center;--vt-ce-icon-size:18px}
|
|
11
|
+
.vt_ce_IconButton_button__db6cbe79{background-color:transparent;border-style:none;color:var(--vt-ce-theme-palette-text-tertiary,#465364);cursor:pointer;display:inline-block;font-size:0;padding:7px;position:relative}.vt_ce_IconButton_button__db6cbe79:hover{color:var(--vt-ce-theme-palette-action-hover,#335b89)}.vt_ce_IconButton_button__db6cbe79:disabled{color:var(--vt-ce-theme-palette-disabled,#7c848d)}.vt_ce_IconButton_button__db6cbe79[data-destructive=true]{color:var(--vt-ce-theme-palette-action-destructive,#eb0000)}.vt_ce_IconButton_button__db6cbe79[data-destructive=true]:hover{color:var(--vt-ce-theme-palette-action-destructive-hover,#a63737)}.vt_ce_IconButton_button__db6cbe79[data-loading=true]:disabled{color:var(--vt-ce-theme-palette-action-primary,#1871e8)}.vt_ce_IconButton_button__db6cbe79[data-loading=true] .vt_ce_IconButton_innerIcon__db6cbe79{visibility:hidden}.vt_ce_IconButton_loadingContainer__db6cbe79{bottom:7px;left:7px;position:absolute;right:7px;top:7px}
|
|
12
|
+
.vt_ce_Tooltip_tooltipBody__624a060e{background-color:var(--vt-ce-theme-palette-background,#fff);border-color:var(--vt-ce-theme-palette-background-alt,#e0e8f0);border-radius:4px;border-style:solid;border-width:1px;color:var(--vt-ce-theme-palette-text-primary,#2a323c);font-family:var(--vt-ce-theme-typography-label-font-family,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-label-font-size,14px);font-style:var(--vt-ce-theme-typography-label-font-style,normal);font-weight:var(--vt-ce-theme-typography-label-font-weight,600);line-height:var(--vt-ce-theme-typography-label-line-height,17px);margin:10px;padding:4px 10px}
|
|
13
|
+
.vt_ce_Typography_tH4__c74f55aa{font-family:var(--vt-ce-theme-typography-h4-font-family,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-h4-font-size,18px);font-style:var(--vt-ce-theme-typography-h4-font-style,normal);font-weight:var(--vt-ce-theme-typography-h4-font-weight,600);line-height:var(--vt-ce-theme-typography-h4-line-height,24px)}.vt_ce_Typography_tLabel__c74f55aa{font-family:var(--vt-ce-theme-typography-label-font-family,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-label-font-size,14px);font-style:var(--vt-ce-theme-typography-label-font-style,normal);font-weight:var(--vt-ce-theme-typography-label-font-weight,600);line-height:var(--vt-ce-theme-typography-label-line-height,17px)}.vt_ce_Typography_tParagraph1__c74f55aa{font-family:var(--vt-ce-theme-typography-paragraph-1-font-family,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-paragraph-1-font-size,16px);font-style:var(--vt-ce-theme-typography-paragraph-1-font-style,normal);font-weight:var(--vt-ce-theme-typography-paragraph-1-font-weight,400);line-height:var(--vt-ce-theme-typography-paragraph-1-line-height,24px)}.vt_ce_Typography_tParagraph2__c74f55aa{font-family:var(--vt-ce-theme-typography-paragraph-2-font-family,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-paragraph-2-font-size,14px);font-style:var(--vt-ce-theme-typography-paragraph-2-font-style,normal);font-weight:var(--vt-ce-theme-typography-paragraph-2-font-weight,400);line-height:var(--vt-ce-theme-typography-paragraph-2-line-height,20px)}.vt_ce_Typography_tParagraph3__c74f55aa{font-family:var(--vt-ce-theme-typography-paragraph-3-font-family,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-paragraph-3-font-size,12px);font-style:var(--vt-ce-theme-typography-paragraph-3-font-style,normal);font-weight:var(--vt-ce-theme-typography-paragraph-3-font-weight,400);line-height:var(--vt-ce-theme-typography-paragraph-3-line-height,18px)}.vt_ce_Typography_tButton__c74f55aa{font-family:var(--vt-ce-theme-typography-button-font-family,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-button-font-size,14px);font-style:var(--vt-ce-theme-typography-button-font-style,normal);font-weight:var(--vt-ce-theme-typography-button-font-weight,600);line-height:var(--vt-ce-theme-typography-button-line-height,20px)}.vt_ce_Typography_tButtonSmall__c74f55aa{font-family:var(--vt-ce-theme-typography-button-small-font-family,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-button-small-font-size,12px);font-style:var(--vt-ce-theme-typography-button-small-font-style,normal);font-weight:var(--vt-ce-theme-typography-button-small-font-weight,600);line-height:var(--vt-ce-theme-typography-button-small-line-height,18px)}.vt_ce_Typography_cPrimary__c74f55aa{color:var(--vt-ce-theme-palette-text-primary,#2a323c)}.vt_ce_Typography_cSecondary__c74f55aa{color:var(--vt-ce-theme-palette-text-secondary,#5c6269)}.vt_ce_Typography_cTertiary__c74f55aa{color:var(--vt-ce-theme-palette-text-tertiary,#465364)}.vt_ce_Typography_cDisabled__c74f55aa{color:var(--vt-ce-theme-palette-disabled,#7c848d)}
|
|
14
14
|
.vt_ce_Icon_icon__5881e2e1{display:inline-block;height:var(--vt-ce-icon-size,18px);width:var(--vt-ce-icon-size,18px)}.vt_ce_Icon_icon__5881e2e1 svg{height:var(--vt-ce-icon-size,18px);vertical-align:baseline;width:var(--vt-ce-icon-size,18px)}.vt_ce_Icon_icon__5881e2e1[data-size=large],.vt_ce_Icon_icon__5881e2e1[data-size=large] svg{height:24px;width:24px}.vt_ce_Icon_icon__5881e2e1[data-size=medium],.vt_ce_Icon_icon__5881e2e1[data-size=medium] svg{height:18px;width:18px}.vt_ce_Icon_icon__5881e2e1[data-size=small],.vt_ce_Icon_icon__5881e2e1[data-size=small] svg{height:14px;width:14px}.vt_ce_Icon_icon__5881e2e1[data-size=inherit],.vt_ce_Icon_icon__5881e2e1[data-size=inherit] svg{font-size:1em;height:1em;width:1em}
|
|
15
|
-
.
|
|
15
|
+
.vt_ce_Select_select__41767ed6{cursor:pointer;display:inline-flex;flex-direction:column;gap:3px}.vt_ce_Select_label__41767ed6{color:var(--vt-ce-theme-palette-text-secondary,#5c6269);font-family:var(--vt-ce-theme-typography-label-font-family,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-label-font-size,14px);font-style:var(--vt-ce-theme-typography-label-font-style,normal);font-weight:var(--vt-ce-theme-typography-label-font-weight,600);line-height:var(--vt-ce-theme-typography-label-line-height,17px)}.vt_ce_Select_innerInputContainer__41767ed6{align-items:center;align-self:stretch;background:var(--vt-ce-theme-palette-background,#fff);border-radius:4px;color:var(--vt-ce-theme-palette-text-primary,#2a323c);display:flex;gap:10px;margin-bottom:1px;margin-top:1px;outline-color:var(--vt-ce-theme-palette-text-secondary,#5c6269);outline-style:solid;outline-width:1px;padding:0 8px}.vt_ce_Select_innerInputContainer__41767ed6:focus-within{outline-color:var(--vt-ce-theme-palette-action-hover,#335b89);outline-width:2px}.vt_ce_Select_innerInputContainer__41767ed6:hover{outline-color:var(--vt-ce-theme-palette-action-hover,#335b89);outline-width:2px}.vt_ce_Select_innerInputContainer__41767ed6[data-disabled=true]{background-color:var(--vt-ce-theme-palette-disabled-background,#fafafa);color:var(--vt-ce-theme-palette-disabled,#7c848d);outline-color:var(--vt-ce-theme-palette-background-alt,#e0e8f0)}.vt_ce_Select_innerInputContainer__41767ed6[data-disabled=true]:focus-within{outline-color:var(--vt-ce-theme-palette-background-alt,#e0e8f0);outline-width:1px}.vt_ce_Select_innerInputContainer__41767ed6[data-disabled=true]:hover{outline-color:var(--vt-ce-theme-palette-background-alt,#e0e8f0);outline-width:1px}.vt_ce_Select_innerInputContainer__41767ed6[data-error=true]{outline-color:var(--vt-ce-theme-palette-indicator-error,#eb0000)}.vt_ce_Select_innerInput__41767ed6{background:none;border:none;color:inherit;flex-grow:1;font-family:var(--vt-ce-theme-typography-paragraph-2-font-family,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-paragraph-2-font-size,14px);font-style:var(--vt-ce-theme-typography-paragraph-2-font-style,normal);font-weight:var(--vt-ce-theme-typography-paragraph-2-font-weight,400);line-height:var(--vt-ce-theme-typography-paragraph-2-line-height,20px);outline:none;padding:8px 0}.vt_ce_Select_innerInput__41767ed6::-moz-placeholder{color:var(--vt-ce-theme-palette-disabled,#7c848d)}.vt_ce_Select_innerInput__41767ed6::placeholder{color:var(--vt-ce-theme-palette-disabled,#7c848d)}.vt_ce_Select_selectIcon__41767ed6{align-items:center;display:inline-flex;flex-shrink:0;justify-content:center;padding:8px 0;--vt-ce-icon-size:18px}.vt_ce_Select_helpLabel__41767ed6{color:var(--vt-ce-theme-palette-text-secondary,#5c6269)}.vt_ce_Select_errorLabel__41767ed6,.vt_ce_Select_helpLabel__41767ed6{font-family:var(--vt-ce-theme-typography-paragraph-3-font-family,Nunito Sans,Helvetica,sans-serif);font-size:var(--vt-ce-theme-typography-paragraph-3-font-size,12px);font-style:var(--vt-ce-theme-typography-paragraph-3-font-style,normal);font-weight:var(--vt-ce-theme-typography-paragraph-3-font-weight,400);line-height:var(--vt-ce-theme-typography-paragraph-3-line-height,18px)}.vt_ce_Select_errorLabel__41767ed6{align-items:center;color:var(--vt-ce-theme-palette-indicator-error,#eb0000);display:flex;gap:3px}
|
|
@@ -1,20 +1,31 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { type PopoverAnchor, type PopoverPlacement } from '../popover/index.js';
|
|
3
3
|
export type MenuOption = {
|
|
4
|
-
label:
|
|
5
|
-
icon?: React.
|
|
6
|
-
onSelect(): void;
|
|
4
|
+
label: string;
|
|
5
|
+
icon?: React.ReactNode;
|
|
6
|
+
onSelect(e: React.MouseEvent<HTMLButtonElement>): void;
|
|
7
7
|
};
|
|
8
|
+
export type MenuRole = 'tooltip' | 'dialog' | 'alertdialog' | 'menu' | 'listbox' | 'grid' | 'tree' | 'select' | 'label' | 'combobox';
|
|
8
9
|
export type MenuProps = {
|
|
9
10
|
anchor?: PopoverAnchor;
|
|
10
11
|
anchorId?: string;
|
|
11
12
|
open: boolean;
|
|
13
|
+
role?: MenuRole;
|
|
12
14
|
placement?: PopoverPlacement;
|
|
15
|
+
enableTypeahead?: boolean;
|
|
16
|
+
matchAnchorWidth?: boolean;
|
|
13
17
|
options: MenuOption[];
|
|
14
18
|
dismissEnabled?: boolean;
|
|
15
19
|
onDismiss?: () => void;
|
|
16
20
|
style?: React.CSSProperties;
|
|
17
21
|
className?: string;
|
|
18
22
|
};
|
|
19
|
-
declare function Menu({ open, placement, options, dismissEnabled, className, ...props }: MenuProps):
|
|
23
|
+
declare function Menu({ open: isOpen, role: assumeRole, placement, enableTypeahead, matchAnchorWidth, options, dismissEnabled, className, ...props }: MenuProps): React.JSX.Element;
|
|
24
|
+
export type MenuItemProps = {
|
|
25
|
+
label?: string;
|
|
26
|
+
icon?: React.ReactNode;
|
|
27
|
+
isActive: boolean;
|
|
28
|
+
disabled?: boolean;
|
|
29
|
+
};
|
|
30
|
+
export declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
|
|
20
31
|
export default Menu;
|
|
@@ -1,25 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
icon?: React.ReactElement;
|
|
6
|
-
};
|
|
7
|
-
export type ControlledSelectProps = {
|
|
8
|
-
label?: React.ReactNode;
|
|
9
|
-
placeholder?: string | undefined;
|
|
10
|
-
value: string;
|
|
2
|
+
import type { CommonSelectProps, SelectValue } from './types.js';
|
|
3
|
+
export type ControlledSelectProps<OptionValue> = CommonSelectProps<OptionValue> & {
|
|
4
|
+
value: SelectValue<OptionValue>;
|
|
11
5
|
inputValue: string;
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
error?: React.ReactNode;
|
|
15
|
-
startIcon?: React.ReactNode;
|
|
16
|
-
endIcon?: React.ReactNode;
|
|
17
|
-
onChange(newValue: string): void;
|
|
18
|
-
onInputChange(newValue: string): void;
|
|
19
|
-
options: SelectOption[];
|
|
20
|
-
filterOptions?: (options: SelectOption[]) => SelectOption[];
|
|
21
|
-
style?: React.CSSProperties;
|
|
22
|
-
className?: string;
|
|
6
|
+
onChange(event: React.SyntheticEvent<HTMLElement>, newValue: SelectValue<OptionValue>): void;
|
|
7
|
+
onInputChange(event: React.SyntheticEvent<HTMLElement>, newValue: string): void;
|
|
23
8
|
};
|
|
24
|
-
declare
|
|
9
|
+
declare function ControlledSelect<OptionValue>({ ref, endIcon, placeholder, ...props }: ControlledSelectProps<OptionValue>): React.JSX.Element;
|
|
25
10
|
export default ControlledSelect;
|
|
@@ -1,17 +1,12 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
3
|
-
export type
|
|
4
|
-
|
|
5
|
-
|
|
2
|
+
import type { CommonSelectProps, SelectValue } from './types.js';
|
|
3
|
+
export type { SelectOption, SelectOptions, SelectValue } from './types.js';
|
|
4
|
+
export type SelectProps<OptionValue> = CommonSelectProps<OptionValue> & {
|
|
5
|
+
defaultValue?: SelectValue<OptionValue>;
|
|
6
|
+
value?: SelectValue<OptionValue>;
|
|
6
7
|
inputValue?: string;
|
|
7
|
-
onChange?(newValue:
|
|
8
|
-
onInputChange?(newValue: string): void;
|
|
8
|
+
onChange?(event: React.SyntheticEvent<HTMLElement>, newValue: SelectValue<OptionValue>): void;
|
|
9
|
+
onInputChange?(event: React.SyntheticEvent<HTMLElement>, newValue: string): void;
|
|
9
10
|
};
|
|
10
|
-
declare
|
|
11
|
-
defaultValue?: string | undefined;
|
|
12
|
-
value?: string | undefined;
|
|
13
|
-
inputValue?: string | undefined;
|
|
14
|
-
onChange?(newValue: string): void;
|
|
15
|
-
onInputChange?(newValue: string): void;
|
|
16
|
-
} & React.RefAttributes<HTMLInputElement>>;
|
|
11
|
+
declare function Select<OptionValue>({ ref, defaultValue, value: propsValue, inputValue: propsInputValue, onChange: propsOnChange, onInputChange: propsOnInputChange, ...props }: SelectProps<OptionValue>): React.JSX.Element;
|
|
17
12
|
export default Select;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export type SelectOption<OptionValue> = {
|
|
3
|
+
value: OptionValue;
|
|
4
|
+
label: string;
|
|
5
|
+
icon?: React.ReactElement;
|
|
6
|
+
};
|
|
7
|
+
export type SelectOptions<OptionValue> = SelectOption<OptionValue>[];
|
|
8
|
+
export type SelectValue<Value> = Value | null;
|
|
9
|
+
export type CommonSelectProps<OptionValue> = {
|
|
10
|
+
ref?: React.Ref<HTMLInputElement>;
|
|
11
|
+
label?: React.ReactNode;
|
|
12
|
+
placeholder?: string | undefined;
|
|
13
|
+
disabled?: boolean;
|
|
14
|
+
helpLabel?: React.ReactNode;
|
|
15
|
+
error?: React.ReactNode;
|
|
16
|
+
startIcon?: React.ReactNode;
|
|
17
|
+
endIcon?: React.ReactNode;
|
|
18
|
+
options: SelectOptions<OptionValue>;
|
|
19
|
+
filterOptions?: (options: SelectOptions<OptionValue>) => SelectOptions<OptionValue>;
|
|
20
|
+
style?: React.CSSProperties;
|
|
21
|
+
className?: string;
|
|
22
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@veritone-ce/design-system",
|
|
3
|
-
"version": "2.0.0-next.
|
|
3
|
+
"version": "2.0.0-next.1",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Design System for Veritone CE",
|
|
6
6
|
"keywords": [
|
|
@@ -67,11 +67,12 @@
|
|
|
67
67
|
"transpile:esm": "babel src --config-file ./build.babel.config.cjs --extensions '.js,.jsx,.ts,.tsx' --out-dir dist/esm && tsc-alias --outDir=dist/esm",
|
|
68
68
|
"transpile:cjs": "BABEL_MODULES=\"cjs\" babel src --config-file ./build.babel.config.cjs --extensions '.js,.jsx,.ts,.tsx' --out-dir dist/cjs && tsc-alias --outDir=dist/cjs",
|
|
69
69
|
"transpile:next": "yarn transpile:next:esm",
|
|
70
|
-
"transpile:next:esm": "rollup -c",
|
|
70
|
+
"transpile:next:esm": "yarn generate:scss:theme && rollup -c",
|
|
71
71
|
"types:check": "tsc --noEmit",
|
|
72
72
|
"types:check:build": "tsc --project tsconfig.build.json --noEmit",
|
|
73
73
|
"types:emit": "tsc --project tsconfig.build.json --declaration --emitDeclarationOnly --declarationDir dist/types --noEmit false",
|
|
74
|
-
"publish:local": "yarn build && npx yalc publish"
|
|
74
|
+
"publish:local": "yarn build && npx yalc publish",
|
|
75
|
+
"generate:scss:theme": "node ./scripts/virtual-scss-theme/generator.cjs"
|
|
75
76
|
},
|
|
76
77
|
"lint-staged": {
|
|
77
78
|
"*.{js,jsx,ts,tsx}": "eslint --cache --fix",
|
|
@@ -136,6 +137,7 @@
|
|
|
136
137
|
"cssnano": "^6.0.3",
|
|
137
138
|
"cz-conventional-changelog": "^3.3.0",
|
|
138
139
|
"esbuild": "^0.19.11",
|
|
140
|
+
"esbuild-runner": "^2.2.2",
|
|
139
141
|
"eslint": "^8.49.0",
|
|
140
142
|
"eslint-config-prettier": "^9.0.0",
|
|
141
143
|
"eslint-plugin-import": "^2.29.1",
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
import { useState } from 'react';
|
|
3
|
-
|
|
4
|
-
function useManagedStateSwitch(controlled, setControlled, uncontrolledDefault) {
|
|
5
|
-
const [uncontrolled, setUncontrolled] = useState(uncontrolledDefault);
|
|
6
|
-
return [
|
|
7
|
-
controlled === void 0 ? uncontrolled : controlled,
|
|
8
|
-
(u) => {
|
|
9
|
-
if (controlled === void 0) {
|
|
10
|
-
setUncontrolled(u);
|
|
11
|
-
}
|
|
12
|
-
setControlled?.(u);
|
|
13
|
-
}
|
|
14
|
-
];
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
export { useManagedStateSwitch };
|