@beydesign/storybook 0.1.20 → 0.2.0
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/App.js +65 -8
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/stories/Agent/AgentCard.js +9 -9
- package/dist/stories/Agent/AgentCardSkeleton.js +1 -1
- package/dist/stories/Agent/CreateNewCard.js +4 -4
- package/dist/stories/Buttons/MainButton.js +51 -51
- package/dist/stories/Buttons/ToggleButtonGroup.js +4 -4
- package/dist/stories/Credits/CreditsCard.js +4 -4
- package/dist/stories/Credits/CreditsCardSkeleton.js +2 -2
- package/dist/stories/EntityCard/EntityCard.js +3 -3
- package/dist/stories/EntityCard/EntityCardSkeleton.js +1 -1
- package/dist/stories/Form/AutoComplete.js +10 -10
- package/dist/stories/Form/Checkbox.js +7 -7
- package/dist/stories/Form/Dropdown.js +16 -16
- package/dist/stories/Form/FileUpload/FileUpload.js +15 -15
- package/dist/stories/Form/FileUpload/FileUploading.js +8 -8
- package/dist/stories/Form/FileUpload/UploadedFile.js +2 -2
- package/dist/stories/Form/TextArea.js +7 -7
- package/dist/stories/Form/TextInput.js +10 -10
- package/dist/stories/Form/Toggle.js +5 -5
- package/dist/stories/Form/Toggle.stories.js +1 -1
- package/dist/stories/Foundations/Colors.js +69 -71
- package/dist/stories/Navigation/ComplexHeader.js +1 -1
- package/dist/stories/Navigation/Header.js +1 -1
- package/dist/stories/Navigation/NavItem.js +9 -9
- package/dist/stories/Navigation/NavItem.stories.js +2 -2
- package/dist/stories/Navigation/Sidebar.js +7 -8
- package/dist/stories/Navigation/Sidebar.stories.js +1 -1
- package/dist/stories/PlanCard/PlanCard.d.ts +3 -0
- package/dist/stories/PlanCard/PlanCard.js +13 -0
- package/dist/stories/PlanCard/PlanCard.stories.d.ts +9 -0
- package/dist/stories/PlanCard/PlanCard.stories.js +125 -0
- package/dist/stories/PlanCard/PlanCardSkeleton.d.ts +3 -0
- package/dist/stories/PlanCard/PlanCardSkeleton.js +6 -0
- package/dist/stories/PlanCard/PlanCardSkeleton.stories.d.ts +7 -0
- package/dist/stories/PlanCard/PlanCardSkeleton.stories.js +40 -0
- package/dist/stories/PlanCard/index.d.ts +3 -0
- package/dist/stories/PlanCard/index.js +3 -0
- package/dist/stories/PlanCard/types.d.ts +61 -0
- package/dist/stories/PlanCard/types.js +1 -0
- package/dist/stories/StripeProduct/StripeProduct.js +5 -7
- package/dist/stories/StripeProduct/StripeProductCardSkeleton.js +1 -1
- package/dist/stories/Typography/Typography.js +1 -1
- package/dist/stories/UI/Avatar.js +6 -6
- package/dist/stories/UI/Badge.js +4 -4
- package/dist/stories/UI/CheckIcon.d.ts +3 -0
- package/dist/stories/UI/CheckIcon.js +36 -0
- package/dist/stories/UI/CheckIcon.stories.d.ts +7 -0
- package/dist/stories/UI/CheckIcon.stories.js +48 -0
- package/dist/stories/UI/FeatureBanner.js +2 -2
- package/dist/stories/UI/HintBubble.js +3 -3
- package/dist/stories/UI/Logo.js +1 -1
- package/dist/stories/UI/Logo.stories.js +1 -1
- package/dist/stories/UI/Menu.js +10 -3
- package/dist/stories/UI/ProgressIndicator.js +1 -1
- package/dist/stories/UI/PromoBanner.js +6 -3
- package/dist/stories/UI/SkeletonLoader.js +1 -1
- package/dist/stories/UI/Stepper.js +12 -12
- package/dist/stories/UI/index.d.ts +1 -0
- package/dist/stories/UI/index.js +1 -0
- package/dist/stories/UI/types.d.ts +42 -0
- package/dist/stories/UI/types.js +30 -0
- package/package.json +2 -2
|
@@ -119,12 +119,12 @@ export const AutoComplete = ({ options, value, onChange, leadingIcon = 'Magnifyi
|
|
|
119
119
|
const sizeToken = getTypographySizeToken(TypographySize.TextS);
|
|
120
120
|
const weightToken = getTypographyWeightToken(TypographyWeight.Regular);
|
|
121
121
|
const { fontSize, fontWeight, fontFamily, lineHeight, letterSpacing, paragraphIndent, paragraphSpacing, textDecoration, textTransform, } = getTextStyles(sizeToken, weightToken);
|
|
122
|
-
return (_jsxs(Box, { display: 'flex', flexDirection: 'column', position: 'relative', width: "100%", children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', alignItems: 'center', justifyContent: 'center', border: `1px solid ${focused ? 'var(--
|
|
123
|
-
? 'var(--
|
|
124
|
-
: 'var(--
|
|
122
|
+
return (_jsxs(Box, { display: 'flex', flexDirection: 'column', position: 'relative', width: "100%", children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', alignItems: 'center', justifyContent: 'center', border: `1px solid ${focused ? 'var(--color-border-border-component-active)' : 'var(--color-border-border-component)'}`, borderRadius: '4px', bgcolor: disabled
|
|
123
|
+
? 'var(--color-background-bg-component-disabled)'
|
|
124
|
+
: 'var(--color-background-bg-component)', children: [getIconComponent(leadingIcon, {
|
|
125
125
|
width: '24px',
|
|
126
126
|
height: '24px',
|
|
127
|
-
color: 'var(--
|
|
127
|
+
color: 'var(--color-foreground-fg-quaternary)',
|
|
128
128
|
'aria-hidden': 'true',
|
|
129
129
|
}), _jsx("input", { ref: inputRef, type: "text", value: searchText, onChange: handleInputChange, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, style: {
|
|
130
130
|
flexGrow: 1,
|
|
@@ -140,24 +140,24 @@ export const AutoComplete = ({ options, value, onChange, leadingIcon = 'Magnifyi
|
|
|
140
140
|
textTransform: textTransform,
|
|
141
141
|
textDecoration: textDecoration,
|
|
142
142
|
color: disabled
|
|
143
|
-
? 'var(--
|
|
144
|
-
: 'var(--
|
|
143
|
+
? 'var(--color-text-text-disabled)'
|
|
144
|
+
: 'var(--color-text-text-title)',
|
|
145
145
|
backgroundColor: 'transparent',
|
|
146
146
|
}, onFocus: handleFocus, onBlur: handleBlur, "aria-autocomplete": "list", "aria-controls": focused ? 'autocomplete-options' : undefined, "aria-expanded": focused, role: "combobox" }), searchText &&
|
|
147
147
|
getIconComponent('X', {
|
|
148
148
|
width: '24px',
|
|
149
149
|
height: '24px',
|
|
150
|
-
color: 'var(--
|
|
150
|
+
color: 'var(--color-foreground-fg-quaternary)',
|
|
151
151
|
onClick: handleClear,
|
|
152
152
|
style: { cursor: disabled ? 'default' : 'pointer' },
|
|
153
153
|
'aria-label': 'Clear input',
|
|
154
|
-
})] }), focused && (_jsx(Box, { id: "autocomplete-options", ref: optionsContainerRef, position: 'absolute', top: '100%', left: 0, zIndex: 1000, bgcolor: 'var(--
|
|
154
|
+
})] }), focused && (_jsx(Box, { id: "autocomplete-options", ref: optionsContainerRef, position: 'absolute', top: '100%', left: 0, zIndex: 1000, bgcolor: 'var(--color-background-bg-component)', borderRadius: '4px', width: '100%', maxHeight: '200px', overflow: 'auto', boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1)', mt: '4px', role: "listbox", children: filteredOptions.length === 0 ? (_jsx(Box, { display: 'flex', flexDirection: 'row', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, children: "No results found" }) })) : (filteredOptions.map((option, index) => (_jsx(Box, { display: 'flex', flexDirection: 'row', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', onClick: () => handleOptionSelect(option), sx: {
|
|
155
155
|
cursor: 'pointer',
|
|
156
156
|
backgroundColor: highlightedIndex === index
|
|
157
|
-
? 'var(--
|
|
157
|
+
? 'var(--color-background-bg-page)'
|
|
158
158
|
: 'transparent',
|
|
159
159
|
'&:hover': {
|
|
160
|
-
backgroundColor: 'var(--
|
|
160
|
+
backgroundColor: 'var(--color-background-bg-page)',
|
|
161
161
|
},
|
|
162
162
|
}, role: "option", "aria-selected": highlightedIndex === index, tabIndex: -1, children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, children: option }) }, option)))) }))] }));
|
|
163
163
|
};
|
|
@@ -22,11 +22,11 @@ export const Checkbox = ({ type = CheckboxType.Checkbox, label, checked, disable
|
|
|
22
22
|
padding: 0,
|
|
23
23
|
'&.Mui-checked': {
|
|
24
24
|
color: disabled
|
|
25
|
-
? 'var(--
|
|
26
|
-
: 'var(--
|
|
25
|
+
? 'var(--color-background-bg-button-disabled)'
|
|
26
|
+
: 'var(--color-background-bg-brand-primary)',
|
|
27
27
|
borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)',
|
|
28
28
|
'&:hover': {
|
|
29
|
-
color: 'var(--
|
|
29
|
+
color: 'var(--color-background-bg-brand-primary-hover)',
|
|
30
30
|
},
|
|
31
31
|
},
|
|
32
32
|
} })) : type === CheckboxType.Radio ? (_jsx(Box, { onClick: handleRadioClick, sx: {
|
|
@@ -35,10 +35,10 @@ export const Checkbox = ({ type = CheckboxType.Checkbox, label, checked, disable
|
|
|
35
35
|
borderRadius: 'var(--spacing-tokens-size-in-px-radius-radius-full)',
|
|
36
36
|
border: checked ? '6px solid' : '1px solid',
|
|
37
37
|
borderColor: disabled
|
|
38
|
-
? 'var(--
|
|
38
|
+
? 'var(--color-background-bg-button-disabled)'
|
|
39
39
|
: checked
|
|
40
|
-
? 'var(--
|
|
41
|
-
: 'var(--
|
|
40
|
+
? 'var(--color-background-bg-brand-primary)'
|
|
41
|
+
: 'var(--color-background-bg-button-disabled)',
|
|
42
42
|
display: 'flex',
|
|
43
43
|
alignItems: 'center',
|
|
44
44
|
justifyContent: 'center',
|
|
@@ -49,7 +49,7 @@ export const Checkbox = ({ type = CheckboxType.Checkbox, label, checked, disable
|
|
|
49
49
|
transition: 'all 0.2s ease-in-out',
|
|
50
50
|
'&:hover': !disabled
|
|
51
51
|
? {
|
|
52
|
-
borderColor: 'var(--
|
|
52
|
+
borderColor: 'var(--color-background-bg-brand-primary-hover)',
|
|
53
53
|
}
|
|
54
54
|
: undefined,
|
|
55
55
|
'&::after': {
|
|
@@ -112,14 +112,14 @@ export const Dropdown = ({ disabled = false, placeholder = 'Select an option', l
|
|
|
112
112
|
return Array.isArray(props.value) && props.value.includes(option);
|
|
113
113
|
};
|
|
114
114
|
return (_jsx(ClickAwayListener, { onClickAway: () => setOpen(false), children: _jsxs(Box, { display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', position: 'relative', width: "100%", minWidth: '300px', children: [label && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, textStyle: { textAlign: 'left' }, required: required, children: label })), _jsxs(Box, { ref: anchorRef, display: 'flex', flexDirection: 'row', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', alignItems: 'center', justifyContent: 'space-between', border: `1px solid ${open
|
|
115
|
-
? 'var(--
|
|
116
|
-
: 'var(--
|
|
117
|
-
? 'var(--
|
|
118
|
-
: 'var(--
|
|
115
|
+
? 'var(--color-border-border-component-active)'
|
|
116
|
+
: 'var(--color-border-border-component)'}`, borderRadius: '4px', bgcolor: disabled
|
|
117
|
+
? 'var(--color-background-bg-component-disabled)'
|
|
118
|
+
: 'var(--color-background-bg-component)', position: 'relative', onClick: () => !disabled && setOpen((prev) => !prev), onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, "aria-haspopup": "listbox", "aria-expanded": open, "aria-disabled": disabled, role: "combobox", children: [_jsx(Box, { display: "flex", alignItems: "center", flexShrink: 0, children: showLeadingIcon &&
|
|
119
119
|
getIconComponent(leadingIcon, {
|
|
120
120
|
width: '24px',
|
|
121
121
|
height: '24px',
|
|
122
|
-
color: 'var(--
|
|
122
|
+
color: 'var(--color-foreground-fg-secondary)',
|
|
123
123
|
'aria-hidden': 'true',
|
|
124
124
|
}) }), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, textStyle: {
|
|
125
125
|
flexGrow: 1,
|
|
@@ -130,14 +130,14 @@ export const Dropdown = ({ disabled = false, placeholder = 'Select an option', l
|
|
|
130
130
|
whiteSpace: 'nowrap',
|
|
131
131
|
maxWidth: '100%',
|
|
132
132
|
}, color: value
|
|
133
|
-
? 'var(--
|
|
134
|
-
: 'var(--
|
|
133
|
+
? 'var(--color-text-text-title)'
|
|
134
|
+
: 'var(--color-text-text-placeholder)', children: value || placeholder }), _jsxs(Box, { display: "flex", alignItems: "center", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-sm)", flexShrink: 0, children: [!disabled &&
|
|
135
135
|
showClear &&
|
|
136
136
|
value &&
|
|
137
137
|
getIconComponent('X', {
|
|
138
138
|
width: '24px',
|
|
139
139
|
height: '24px',
|
|
140
|
-
color: 'var(--
|
|
140
|
+
color: 'var(--color-foreground-fg-secondary)',
|
|
141
141
|
onClick: handleClear,
|
|
142
142
|
'aria-label': 'Clear selection',
|
|
143
143
|
role: 'button',
|
|
@@ -152,23 +152,23 @@ export const Dropdown = ({ disabled = false, placeholder = 'Select an option', l
|
|
|
152
152
|
getIconComponent(open ? 'CaretUp' : 'CaretDown', {
|
|
153
153
|
width: '24px',
|
|
154
154
|
height: '24px',
|
|
155
|
-
color: 'var(--
|
|
155
|
+
color: 'var(--color-foreground-fg-secondary)',
|
|
156
156
|
'aria-hidden': 'true',
|
|
157
|
-
})] })] }), _jsx(Popper, { open: open, anchorEl: anchorRef.current, placement: "bottom-start", style: { width: anchorRef.current?.offsetWidth, zIndex: 1300 }, children: _jsx(Box, { ref: optionsContainerRef, bgcolor: 'var(--
|
|
158
|
-
border: '1px solid var(--
|
|
157
|
+
})] })] }), _jsx(Popper, { open: open, anchorEl: anchorRef.current, placement: "bottom-start", style: { width: anchorRef.current?.offsetWidth, zIndex: 1300 }, children: _jsx(Box, { ref: optionsContainerRef, bgcolor: 'var(--color-background-bg-component)', borderRadius: '4px', width: '100%', maxHeight: '200px', overflow: 'auto', boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1)', mt: '4px', role: "listbox", sx: {
|
|
158
|
+
border: '1px solid var(--color-border-border-component)',
|
|
159
159
|
}, children: options.length === 0 ? (_jsx(Box, { display: 'flex', flexDirection: 'row', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, children: "No options found" }) })) : (options.map((option, index) => (_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', onClick: () => handleOptionSelect(option), onMouseEnter: () => setHighlightedIndex(index), sx: {
|
|
160
160
|
cursor: 'pointer',
|
|
161
161
|
backgroundColor: highlightedIndex === index
|
|
162
|
-
? 'var(--
|
|
162
|
+
? 'var(--color-background-bg-page)'
|
|
163
163
|
: isOptionSelected(option)
|
|
164
|
-
? 'var(--
|
|
164
|
+
? 'var(--color-background-bg-element)'
|
|
165
165
|
: 'transparent',
|
|
166
166
|
'&:hover': {
|
|
167
|
-
backgroundColor: 'var(--
|
|
167
|
+
backgroundColor: 'var(--color-background-bg-card-highlight)',
|
|
168
168
|
},
|
|
169
169
|
width: '100%',
|
|
170
170
|
boxSizing: 'border-box',
|
|
171
|
-
}, role: "option", "aria-selected": isOptionSelected(option), children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', width: "calc(100% - 24px)", overflow: "hidden", children: [showCheckboxes && (_jsx(Box, { flexShrink: 0, children: _jsx(Checkbox, { checked: isOptionSelected(option), onChange: () => handleOptionSelect(option), style: { margin: 0, padding: 0 } }) })), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: "var(--
|
|
171
|
+
}, role: "option", "aria-selected": isOptionSelected(option), children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', width: "calc(100% - 24px)", overflow: "hidden", children: [showCheckboxes && (_jsx(Box, { flexShrink: 0, children: _jsx(Checkbox, { checked: isOptionSelected(option), onChange: () => handleOptionSelect(option), style: { margin: 0, padding: 0 } }) })), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: "var(--color-text-text-title)", textStyle: {
|
|
172
172
|
overflow: 'hidden',
|
|
173
173
|
textOverflow: 'ellipsis',
|
|
174
174
|
whiteSpace: 'nowrap',
|
|
@@ -178,6 +178,6 @@ export const Dropdown = ({ disabled = false, placeholder = 'Select an option', l
|
|
|
178
178
|
getIconComponent('Check', {
|
|
179
179
|
width: '16px',
|
|
180
180
|
height: '16px',
|
|
181
|
-
color: 'var(--
|
|
181
|
+
color: 'var(--color-foreground-fg-brand-primary)',
|
|
182
182
|
}) })] }, option)))) }) })] }) }));
|
|
183
183
|
};
|
|
@@ -107,22 +107,22 @@ export const FileUpload = ({ disabled, sx, acceptedFileTypes = '.pdf,.doc,.docx,
|
|
|
107
107
|
height: '20px',
|
|
108
108
|
width: '20px',
|
|
109
109
|
color: disabled
|
|
110
|
-
? 'var(--
|
|
111
|
-
: 'var(--
|
|
110
|
+
? 'var(--color-text-text-subtle)'
|
|
111
|
+
: 'var(--color-text-text-paragraph)',
|
|
112
112
|
};
|
|
113
|
-
return (_jsxs(Box, { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', border: `1.5px dashed ${isDragging ? 'var(--
|
|
114
|
-
? 'var(--
|
|
113
|
+
return (_jsxs(Box, { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', border: `1.5px dashed ${isDragging ? 'var(--color-background-bg-brand-primary-hover)' : 'var(--color-background-bg-brand-primary)'}`, bgcolor: disabled
|
|
114
|
+
? 'var(--color-background-bg-component-contrast-subtle)'
|
|
115
115
|
: isDragging
|
|
116
|
-
? 'var(--
|
|
117
|
-
: 'var(--
|
|
118
|
-
? 'var(--
|
|
116
|
+
? 'var(--color-background-bg-component-hover)'
|
|
117
|
+
: 'var(--color-background-bg-element)', sx: { cursor: disabled ? 'not-allowed' : 'pointer', ...sx }, onClick: handleClick, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [_jsx("input", { type: "file", ref: fileInputRef, style: { display: 'none' }, accept: acceptedFileTypes, onChange: handleInputChange, disabled: disabled }), _jsx(Box, { display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', border: `2px solid ${disabled
|
|
118
|
+
? 'var(--color-border-border-component)'
|
|
119
119
|
: isDragging
|
|
120
|
-
? 'var(--
|
|
121
|
-
: 'var(--
|
|
122
|
-
? 'var(--
|
|
123
|
-
: 'var(--
|
|
124
|
-
? 'var(--
|
|
125
|
-
: 'var(--
|
|
126
|
-
? 'var(--
|
|
127
|
-
: 'var(--
|
|
120
|
+
? 'var(--color-background-bg-brand-primary-hover)'
|
|
121
|
+
: 'var(--color-background-bg-brand-primary)'}`, borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', bgcolor: 'var(--color-background-bg-component)', children: _jsx(UploadSimple, { height: '20px', width: '20px', weight: "bold", color: disabled
|
|
122
|
+
? 'var(--color-foreground-fg-disabled)'
|
|
123
|
+
: 'var(--color-foreground-fg-brand-primary)' }) }), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', children: [_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: disabled
|
|
124
|
+
? 'var(--color-text-text-disabled)'
|
|
125
|
+
: 'var(--color-text-text-accent)', textStyle: { cursor: disabled ? 'not-allowed' : 'pointer' }, children: "Click to upload" }), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: disabled
|
|
126
|
+
? 'var(--color-text-text-subtle)'
|
|
127
|
+
: 'var(--color-text-text-paragraph)', children: "or drag and drop" }), _jsxs(Box, { display: 'flex', flexDirection: 'row', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', children: [fileIcons.map((Icon, index) => (_jsx(Icon, { ...iconProps }, index))), fileIcons.length === 0 && _jsx(FileCode, { ...iconProps })] })] })] }));
|
|
128
128
|
};
|
|
@@ -23,27 +23,27 @@ export const FileUploading = ({ uploadProgress, uploadingStatus, progressMode =
|
|
|
23
23
|
return 'FileTxt';
|
|
24
24
|
return 'File';
|
|
25
25
|
};
|
|
26
|
-
return (_jsxs(Box, { display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', border: `1px solid ${isError ? 'var(--
|
|
26
|
+
return (_jsxs(Box, { display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', border: `1px solid ${isError ? 'var(--color-border-border-error)' : 'var(--color-border-border-component)'}`, bgcolor: 'var(--color-background-bg-component-contrast-subtle)', minWidth: '300px', sx: { ...sx }, children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [getIconComponent(getFileIcon(), {
|
|
27
27
|
width: '24px',
|
|
28
28
|
height: '24px',
|
|
29
29
|
color: isError
|
|
30
|
-
? 'var(--
|
|
31
|
-
: 'var(--
|
|
30
|
+
? 'var(--color-text-text-error)'
|
|
31
|
+
: 'var(--color-foreground-fg-primary)',
|
|
32
32
|
}), _jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Regular, color: isError
|
|
33
|
-
? 'var(--
|
|
34
|
-
: 'var(--
|
|
33
|
+
? 'var(--color-text-text-error)'
|
|
34
|
+
: 'var(--color-text-text-title)', children: fileName })] }), _jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [showCancel &&
|
|
35
35
|
onCancel &&
|
|
36
36
|
isUploading &&
|
|
37
37
|
getIconComponent('X', {
|
|
38
38
|
width: '24px',
|
|
39
39
|
height: '24px',
|
|
40
|
-
color: 'var(--
|
|
40
|
+
color: 'var(--color-text-text-title)',
|
|
41
41
|
onClick: onCancel,
|
|
42
42
|
style: { cursor: 'pointer' },
|
|
43
43
|
}), isSuccess &&
|
|
44
44
|
getIconComponent('Check', {
|
|
45
45
|
width: '24px',
|
|
46
46
|
height: '24px',
|
|
47
|
-
color: 'var(--
|
|
48
|
-
})] })] }), _jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', width: '100%', children: [isUploading && isAnimationProgress && (_jsx(Player, { autoplay: true, loop: true, src: loadingAnimation, style: { height: '100%', width: '100%' } })), isUploading && isPercentageProgress && (_jsx(ProgressIndicator, { currentValue: uploadProgress || 0, maxValue: 100, mode: ProgressIndicatorMode.Percentage, style: { width: '100%', height: '100%' } })), isError && (_jsxs(Fragment, { children: [_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: 'var(--
|
|
47
|
+
color: 'var(--color-foreground-fg-success)',
|
|
48
|
+
})] })] }), _jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', width: '100%', children: [isUploading && isAnimationProgress && (_jsx(Player, { autoplay: true, loop: true, src: loadingAnimation, style: { height: '100%', width: '100%' } })), isUploading && isPercentageProgress && (_jsx(ProgressIndicator, { currentValue: uploadProgress || 0, maxValue: 100, mode: ProgressIndicatorMode.Percentage, style: { width: '100%', height: '100%' } })), isError && (_jsxs(Fragment, { children: [_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-error)', children: "Upload failed, please try again." }), showRetry && onRetry && (_jsx(Box, { onClick: onRetry, style: { cursor: 'pointer' }, children: _jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.SemiBold, color: 'var(--color-text-text-error)', children: "Try again" }) }))] }))] })] }));
|
|
49
49
|
};
|
|
@@ -7,6 +7,6 @@ import { ButtonDisplayMode, ButtonHierarchy, ButtonSize, MainButton, } from '../
|
|
|
7
7
|
export const UploadedFile = ({ type = FileType.Default, showDelete = true, onDelete, showDownload = true, onDownload, fileName, sx, }) => {
|
|
8
8
|
const isSampleFile = type === FileType.Sample;
|
|
9
9
|
return (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', paddingLeft: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', bgcolor: isSampleFile
|
|
10
|
-
? 'var(--
|
|
11
|
-
: 'var(--
|
|
10
|
+
? 'var(--color-background-bg-card-highlight)'
|
|
11
|
+
: 'var(--color-background-bg-component-contrast-subtle)', minWidth: '240px', minHeight: '36px', sx: { ...sx }, children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(File, { width: '24px', height: '24px', color: 'var(--color-foreground-fg-primary)' }), _jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Medium, color: 'var(--color-foreground-fg-primary)', children: fileName })] }), _jsxs(Box, { display: 'flex', flexDirection: 'row', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [showDownload && onDownload && (_jsx(MainButton, { hierarchy: ButtonHierarchy.Secondary, size: ButtonSize.xs, displayIconMode: ButtonDisplayMode.Only, displayIcon: "DownloadSimple", onClick: onDownload })), showDelete && onDelete && (_jsx(MainButton, { hierarchy: ButtonHierarchy.Secondary, size: ButtonSize.xs, displayIconMode: ButtonDisplayMode.Only, displayIcon: "X", onClick: onDelete }))] })] }));
|
|
12
12
|
};
|
|
@@ -5,19 +5,19 @@ import { Typography, TypographySize, TypographyWeight } from '../Typography';
|
|
|
5
5
|
import { HintBubble, HintBubbleSize } from '../UI';
|
|
6
6
|
export const TextArea = ({ label, value, onChange, placeholder, hintText, errorText, disabled, allowMaxLength = false, maxLength = 256, showMaxLengthIndicator = false, numberOfRows = 5, style, hintBubbleProps, hintBubbleText, required, labelTrailingElement, labelContainerStyle, }) => {
|
|
7
7
|
const [focused, setFocused] = useState(false);
|
|
8
|
-
return (_jsx(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: style, children: _jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', minWidth: '260px', children: [label && (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: labelContainerStyle, children: [_jsx(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, required: required, children: label }), labelTrailingElement] })), hintBubbleText && (_jsx(HintBubble, { text: hintBubbleText, size: HintBubbleSize.sm, ...hintBubbleProps })), _jsx(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', bgcolor: 'var(--
|
|
9
|
-
? 'var(--
|
|
8
|
+
return (_jsx(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: style, children: _jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', minWidth: '260px', children: [label && (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: labelContainerStyle, children: [_jsx(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, required: required, children: label }), labelTrailingElement] })), hintBubbleText && (_jsx(HintBubble, { text: hintBubbleText, size: HintBubbleSize.sm, ...hintBubbleProps })), _jsx(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', bgcolor: 'var(--color-background-bg-component)', border: `1px solid ${errorText
|
|
9
|
+
? 'var(--color-border-border-error)'
|
|
10
10
|
: focused
|
|
11
|
-
? 'var(--
|
|
12
|
-
: 'var(--
|
|
11
|
+
? 'var(--color-border-border-component-active)'
|
|
12
|
+
: 'var(--color-border-border-component)'}`, overflow: 'hidden', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', width: '100%', children: _jsx("textarea", { value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, disabled: disabled, rows: numberOfRows, style: {
|
|
13
13
|
border: 'none',
|
|
14
14
|
outline: 'none',
|
|
15
15
|
width: '100%',
|
|
16
16
|
height: '100%',
|
|
17
17
|
color: disabled
|
|
18
|
-
? 'var(--
|
|
19
|
-
: 'var(--
|
|
18
|
+
? 'var(--color-text-text-disabled)'
|
|
19
|
+
: 'var(--color-text-text-title)',
|
|
20
20
|
backgroundColor: 'transparent',
|
|
21
21
|
resize: 'none',
|
|
22
|
-
}, maxLength: allowMaxLength ? maxLength : undefined, onFocus: () => setFocused(true), onBlur: () => setFocused(false), required: required }) }), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', children: [errorText ? (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--
|
|
22
|
+
}, maxLength: allowMaxLength ? maxLength : undefined, onFocus: () => setFocused(true), onBlur: () => setFocused(false), required: required }) }), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', children: [errorText ? (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-error)', children: errorText })) : hintText ? (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-subtle)', children: hintText })) : (_jsx(Box, { style: { flex: 1 } })), showMaxLengthIndicator && allowMaxLength && maxLength && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-subtle)', children: `${maxLength - value.length}` }))] })] }) }));
|
|
23
23
|
};
|
|
@@ -22,21 +22,21 @@ export const TextInput = ({ label, value, onChange, placeholder, type = 'text',
|
|
|
22
22
|
setShowPassword((prev) => !prev);
|
|
23
23
|
};
|
|
24
24
|
const iconColor = disabled
|
|
25
|
-
? 'var(--
|
|
26
|
-
: 'var(--
|
|
27
|
-
return (_jsx(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: style, children: _jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', minWidth: '260px', children: [label && (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: labelContainerStyle, children: [_jsx(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, required: required, children: label }), labelTrailingElement] })), hintBubbleText && (_jsx(HintBubble, { text: hintBubbleText, size: HintBubbleSize.sm, ...hintBubbleProps })), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', bgcolor: 'var(--
|
|
25
|
+
? 'var(--color-text-text-disabled)'
|
|
26
|
+
: 'var(--color-foreground-fg-secondary)';
|
|
27
|
+
return (_jsx(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: style, children: _jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', minWidth: '260px', children: [label && (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: labelContainerStyle, children: [_jsx(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, required: required, children: label }), labelTrailingElement] })), hintBubbleText && (_jsx(HintBubble, { text: hintBubbleText, size: HintBubbleSize.sm, ...hintBubbleProps })), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', bgcolor: 'var(--color-background-bg-component)', border: errorText
|
|
28
28
|
? 'none'
|
|
29
|
-
: '1px solid var(--
|
|
30
|
-
? '1px solid var(--
|
|
29
|
+
: '1px solid var(--color-border-border-component)', overflow: 'hidden', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', width: '100%', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs) 0 0 var(--spacing-tokens-size-in-px-spacing-spacing-xs)', border: `${errorText
|
|
30
|
+
? '1px solid var(--color-border-border-error)'
|
|
31
31
|
: focused
|
|
32
|
-
? '1px solid var(--
|
|
32
|
+
? '1px solid var(--color-border-border-component-active)'
|
|
33
33
|
: 'transparent'}`, children: [_jsx("input", { type: inputType, value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, disabled: disabled, style: {
|
|
34
34
|
border: 'none',
|
|
35
35
|
outline: 'none',
|
|
36
36
|
width: '100%',
|
|
37
37
|
color: disabled
|
|
38
|
-
? 'var(--
|
|
39
|
-
: 'var(--
|
|
38
|
+
? 'var(--color-text-text-disabled)'
|
|
39
|
+
: 'var(--color-text-text-title)',
|
|
40
40
|
backgroundColor: 'transparent',
|
|
41
41
|
}, onFocus: () => setFocused(true), onBlur: () => setFocused(false), required: required }), enablePasswordToggle && (_jsx(Box, { component: 'button', type: 'button', onClick: togglePasswordVisibility, disabled: disabled, "aria-label": showPassword ? 'Hide password' : 'Show password', "aria-pressed": showPassword, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, sx: {
|
|
42
42
|
padding: 0,
|
|
@@ -45,7 +45,7 @@ export const TextInput = ({ label, value, onChange, placeholder, type = 'text',
|
|
|
45
45
|
backgroundColor: 'transparent',
|
|
46
46
|
cursor: disabled ? 'not-allowed' : 'pointer',
|
|
47
47
|
'&:focus-visible': {
|
|
48
|
-
outline: '2px solid var(--
|
|
48
|
+
outline: '2px solid var(--color-border-border-component-active)',
|
|
49
49
|
outlineOffset: '2px',
|
|
50
50
|
},
|
|
51
51
|
}, children: getIconComponent(showPassword ? 'EyeSlash' : 'Eye', {
|
|
@@ -53,5 +53,5 @@ export const TextInput = ({ label, value, onChange, placeholder, type = 'text',
|
|
|
53
53
|
height: '20px',
|
|
54
54
|
color: iconColor,
|
|
55
55
|
'aria-hidden': 'true',
|
|
56
|
-
}) }))] }), trailingText && (_jsx(Box, { display: 'flex', alignItems: 'center', height: '100%', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', borderLeft: '1px solid var(--
|
|
56
|
+
}) }))] }), trailingText && (_jsx(Box, { display: 'flex', alignItems: 'center', height: '100%', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', borderLeft: '1px solid var(--color-border-border-component)', children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-paragraph)', children: trailingText }) }))] }), errorText && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-error)', children: errorText })), hintText && !errorText && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-subtle)', children: hintText }))] }) }));
|
|
57
57
|
};
|
|
@@ -30,7 +30,7 @@ const IOSSwitch = styled((props) => (_jsx(Switch, { focusVisibleClassName: ".Mui
|
|
|
30
30
|
color: theme.palette.grey[100],
|
|
31
31
|
},
|
|
32
32
|
'&.Mui-disabled + .MuiSwitch-track': {
|
|
33
|
-
backgroundColor: 'var(--
|
|
33
|
+
backgroundColor: 'var(--color-background-bg-element)',
|
|
34
34
|
opacity: 0.7,
|
|
35
35
|
},
|
|
36
36
|
},
|
|
@@ -38,20 +38,20 @@ const IOSSwitch = styled((props) => (_jsx(Switch, { focusVisibleClassName: ".Mui
|
|
|
38
38
|
boxSizing: 'border-box',
|
|
39
39
|
width: 16,
|
|
40
40
|
height: 16,
|
|
41
|
-
backgroundColor: 'var(--
|
|
41
|
+
backgroundColor: 'var(--color-foreground-fg-white)',
|
|
42
42
|
},
|
|
43
43
|
'& .MuiSwitch-track': {
|
|
44
44
|
borderRadius: 26 / 2,
|
|
45
|
-
backgroundColor: 'var(--
|
|
45
|
+
backgroundColor: 'var(--color-background-bg-element)',
|
|
46
46
|
opacity: 1,
|
|
47
47
|
transition: theme.transitions.create(['background-color'], {
|
|
48
48
|
duration: 500,
|
|
49
49
|
}),
|
|
50
50
|
'&:hover': {
|
|
51
|
-
backgroundColor: 'var(--
|
|
51
|
+
backgroundColor: 'var(--color-border-border-component)',
|
|
52
52
|
},
|
|
53
53
|
},
|
|
54
54
|
}));
|
|
55
|
-
export const Toggle = ({ checked, onChange, text = 'Click me', title, disabled = false, togglePosition = TogglePosition.Left, style, textColor = 'var(--
|
|
55
|
+
export const Toggle = ({ checked, onChange, text = 'Click me', title, disabled = false, togglePosition = TogglePosition.Left, style, textColor = 'var(--color-text-text-title)', titleColor = '#475467', }) => {
|
|
56
56
|
return (_jsxs(Box, { display: "flex", alignItems: "flex-start", flexDirection: togglePosition === TogglePosition.Left ? 'row' : 'row-reverse', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', sx: style, children: [_jsx(IOSSwitch, { checked: checked, onChange: (e) => onChange(e.target.checked), disabled: disabled }), text && (_jsxs(Box, { display: "flex", flexDirection: "column", children: [_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: textColor, children: text }), title && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: titleColor, children: title }))] }))] }));
|
|
57
57
|
};
|