@salutejs/sdds-cs 0.314.0-canary.1947.14664713311.0 → 0.314.0-dev.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/components/Autocomplete/Autocomplete.config.js +1 -1
- package/components/Autocomplete/Autocomplete.d.ts +1 -275
- package/components/Avatar/Avatar.config.d.ts +7 -0
- package/components/Avatar/Avatar.config.js +13 -6
- package/components/Avatar/Avatar.d.ts +21 -0
- package/components/Button/Button.config.d.ts +0 -3
- package/components/Button/Button.config.js +6 -9
- package/components/Button/Button.d.ts +0 -9
- package/components/ButtonGroup/ButtonGroup.config.js +2 -2
- package/components/Checkbox/Checkbox.config.js +2 -2
- package/components/Chip/Chip.config.d.ts +0 -6
- package/components/Chip/Chip.config.js +5 -11
- package/components/Chip/Chip.d.ts +0 -6
- package/components/Combobox/Combobox.config.js +1 -1
- package/components/Combobox/Combobox.d.ts +99 -99
- package/components/Combobox/index.d.ts +1 -1
- package/components/DatePicker/DatePicker.config.js +1 -1
- package/components/DatePicker/DatePicker.d.ts +6 -4
- package/components/IconButton/IconButton.config.d.ts +0 -6
- package/components/IconButton/IconButton.config.js +5 -11
- package/components/IconButton/IconButton.d.ts +0 -6
- package/components/Pagination/Pagination.config.js +1 -1
- package/components/Radiobox/Radiobox.config.js +1 -1
- package/components/Select/Select.config.js +1 -1
- package/components/Slider/Slider.config.d.ts +0 -1
- package/components/Slider/Slider.config.js +5 -6
- package/components/Slider/Slider.d.ts +0 -1
- package/components/Tabs/horizontal/HorizontalTabItem.config.js +4 -4
- package/components/Tabs/vertical/VerticalTabItem.config.js +1 -1
- package/components/TextArea/TextArea.config.js +1 -1
- package/components/TextField/TextField.config.js +1 -1
- package/components/Tree/Tree.config.js +1 -1
- package/emotion/cjs/components/Autocomplete/Autocomplete.config.js +1 -1
- package/emotion/cjs/components/Avatar/Avatar.config.js +13 -6
- package/emotion/cjs/components/Avatar/Avatar.stories.tsx +31 -1
- package/emotion/cjs/components/Button/Button.config.js +6 -9
- package/emotion/cjs/components/Button/Button.stories.tsx +1 -1
- package/emotion/cjs/components/ButtonGroup/ButtonGroup.config.js +2 -2
- package/emotion/cjs/components/Checkbox/Checkbox.config.js +2 -2
- package/emotion/cjs/components/Checkbox/Checkbox.stories.tsx +1 -0
- package/emotion/cjs/components/Chip/Chip.config.js +5 -11
- package/emotion/cjs/components/Chip/Chip.stories.tsx +11 -4
- package/emotion/cjs/components/Combobox/Combobox.config.js +1 -1
- package/emotion/cjs/components/DatePicker/DatePicker.config.js +1 -1
- package/emotion/cjs/components/DatePicker/DatePicker.stories.tsx +7 -10
- package/emotion/cjs/components/IconButton/IconButton.config.js +5 -11
- package/emotion/cjs/components/Notification/Notification.stories.tsx +4 -0
- package/emotion/cjs/components/Pagination/Pagination.config.js +1 -1
- package/emotion/cjs/components/Radiobox/Radiobox.config.js +1 -1
- package/emotion/cjs/components/Select/Select.config.js +1 -1
- package/emotion/cjs/components/Select/Select.stories.tsx +0 -1
- package/emotion/cjs/components/Slider/Slider.config.js +5 -6
- package/emotion/cjs/components/Slider/Slider.stories.tsx +10 -13
- package/emotion/cjs/components/Tabs/horizontal/HorizontalTabItem.config.js +4 -4
- package/emotion/cjs/components/Tabs/vertical/VerticalTabItem.config.js +1 -1
- package/emotion/cjs/components/TextArea/TextArea.config.js +1 -1
- package/emotion/cjs/components/TextField/TextField.config.js +1 -1
- package/emotion/cjs/components/Tree/Tree.config.js +1 -1
- package/emotion/es/components/Autocomplete/Autocomplete.config.js +1 -1
- package/emotion/es/components/Avatar/Avatar.config.js +13 -6
- package/emotion/es/components/Avatar/Avatar.stories.tsx +31 -1
- package/emotion/es/components/Button/Button.config.js +6 -9
- package/emotion/es/components/Button/Button.stories.tsx +1 -1
- package/emotion/es/components/ButtonGroup/ButtonGroup.config.js +2 -2
- package/emotion/es/components/Checkbox/Checkbox.config.js +2 -2
- package/emotion/es/components/Checkbox/Checkbox.stories.tsx +1 -0
- package/emotion/es/components/Chip/Chip.config.js +5 -11
- package/emotion/es/components/Chip/Chip.stories.tsx +11 -4
- package/emotion/es/components/Combobox/Combobox.config.js +1 -1
- package/emotion/es/components/DatePicker/DatePicker.config.js +1 -1
- package/emotion/es/components/DatePicker/DatePicker.stories.tsx +7 -10
- package/emotion/es/components/IconButton/IconButton.config.js +5 -11
- package/emotion/es/components/Notification/Notification.stories.tsx +4 -0
- package/emotion/es/components/Pagination/Pagination.config.js +1 -1
- package/emotion/es/components/Radiobox/Radiobox.config.js +1 -1
- package/emotion/es/components/Select/Select.config.js +1 -1
- package/emotion/es/components/Select/Select.stories.tsx +0 -1
- package/emotion/es/components/Slider/Slider.config.js +6 -7
- package/emotion/es/components/Slider/Slider.stories.tsx +10 -13
- package/emotion/es/components/Tabs/horizontal/HorizontalTabItem.config.js +4 -4
- package/emotion/es/components/Tabs/vertical/VerticalTabItem.config.js +1 -1
- package/emotion/es/components/TextArea/TextArea.config.js +1 -1
- package/emotion/es/components/TextField/TextField.config.js +1 -1
- package/emotion/es/components/Tree/Tree.config.js +1 -1
- package/es/components/Autocomplete/Autocomplete.config.js +1 -1
- package/es/components/Avatar/Avatar.config.js +13 -6
- package/es/components/Button/Button.config.js +6 -9
- package/es/components/ButtonGroup/ButtonGroup.config.js +2 -2
- package/es/components/Checkbox/Checkbox.config.js +2 -2
- package/es/components/Chip/Chip.config.js +5 -11
- package/es/components/Combobox/Combobox.config.js +1 -1
- package/es/components/DatePicker/DatePicker.config.js +1 -1
- package/es/components/IconButton/IconButton.config.js +5 -11
- package/es/components/Pagination/Pagination.config.js +1 -1
- package/es/components/Radiobox/Radiobox.config.js +1 -1
- package/es/components/Select/Select.config.js +1 -1
- package/es/components/Slider/Slider.config.js +6 -7
- package/es/components/Tabs/horizontal/HorizontalTabItem.config.js +4 -4
- package/es/components/Tabs/vertical/VerticalTabItem.config.js +1 -1
- package/es/components/TextArea/TextArea.config.js +1 -1
- package/es/components/TextField/TextField.config.js +1 -1
- package/es/components/Tree/Tree.config.js +1 -1
- package/package.json +5 -5
|
@@ -9,6 +9,7 @@ import { IconButton } from '../IconButton/IconButton';
|
|
|
9
9
|
import { DatePicker, DatePickerRange } from './DatePicker';
|
|
10
10
|
|
|
11
11
|
const onChangeValue = action('onChangeValue');
|
|
12
|
+
const onCommitDate = action('onCommitDate');
|
|
12
13
|
const onBlur = action('onBlur');
|
|
13
14
|
const onFocus = action('onFocus');
|
|
14
15
|
|
|
@@ -107,10 +108,8 @@ const StoryDefault = ({
|
|
|
107
108
|
onBlur={onBlur}
|
|
108
109
|
onFocus={onFocus}
|
|
109
110
|
onToggle={(is) => setIsOpen(is)}
|
|
110
|
-
onChangeValue={
|
|
111
|
-
|
|
112
|
-
}}
|
|
113
|
-
onCommitDate={() => setIsOpen(false)}
|
|
111
|
+
onChangeValue={onChangeValue}
|
|
112
|
+
onCommitDate={onCommitDate}
|
|
114
113
|
{...rest}
|
|
115
114
|
/>
|
|
116
115
|
);
|
|
@@ -141,6 +140,7 @@ export const Default: StoryObj<StoryPropsDefault> = {
|
|
|
141
140
|
labelPlacement: 'outer',
|
|
142
141
|
defaultDate: new Date(2024, 5, 14),
|
|
143
142
|
renderFromDate: new Date(2024, 4, 14),
|
|
143
|
+
includeEdgeDates: true,
|
|
144
144
|
min: new Date(2024, 1, 1),
|
|
145
145
|
max: new Date(2024, 12, 29),
|
|
146
146
|
maskWithFormat: false,
|
|
@@ -236,12 +236,8 @@ const StoryRange = ({
|
|
|
236
236
|
showDefaultTextBefore ? secondTextfieldTextBefore || 'ПО' : secondTextfieldTextBefore
|
|
237
237
|
}
|
|
238
238
|
onToggle={(is) => setIsOpen(is)}
|
|
239
|
-
onChangeFirstValue={
|
|
240
|
-
|
|
241
|
-
}}
|
|
242
|
-
onChangeSecondValue={(e, currentValue) => {
|
|
243
|
-
onChangeSecondValue(e, currentValue);
|
|
244
|
-
}}
|
|
239
|
+
onChangeFirstValue={onChangeFirstValue}
|
|
240
|
+
onChangeSecondValue={onChangeSecondValue}
|
|
245
241
|
{...dividerIconProps}
|
|
246
242
|
{...rest}
|
|
247
243
|
/>
|
|
@@ -273,6 +269,7 @@ export const Range: StoryObj<StoryPropsRange> = {
|
|
|
273
269
|
closeAfterDateSelect: true,
|
|
274
270
|
isDoubleCalendar: false,
|
|
275
271
|
dividerVariant: 'dash',
|
|
272
|
+
includeEdgeDates: true,
|
|
276
273
|
min: new Date(2024, 1, 1),
|
|
277
274
|
max: new Date(2024, 12, 29),
|
|
278
275
|
renderFromDate: new Date(2024, 4, 14),
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.config = void 0;
|
|
7
7
|
var _emotion = /*#__PURE__*/require("@salutejs/plasma-new-hope/emotion");
|
|
8
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7
|
|
8
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
|
|
9
9
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
10
10
|
var config = exports.config = {
|
|
11
11
|
defaults: {
|
|
@@ -20,20 +20,14 @@ var config = exports.config = {
|
|
|
20
20
|
clear: /*#__PURE__*/(0, _emotion.css)(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-accent);\n ", ": var(--surface-clear);\n ", ": var(--surface-transparent-accent);\n ", ": var(--surface-transparent-accent);\n ", ": var(--surface-transparent-accent-active);\n "])), _emotion.iconButtonTokens.iconButtonColor, _emotion.iconButtonTokens.iconButtonBackgroundColor, _emotion.iconButtonTokens.iconButtonLoadingBackgroundColor, _emotion.iconButtonTokens.iconButtonBackgroundColorHover, _emotion.iconButtonTokens.iconButtonBackgroundColorActive)
|
|
21
21
|
},
|
|
22
22
|
size: {
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
m: /*#__PURE__*/(0, _emotion.css)(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 3rem;\n ", ": 3rem;\n ", ": 1.25rem;\n ", ": 0.75rem;\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-bold-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": 1.375rem;\n ", ": inherit;\n "])), _emotion.iconButtonTokens.iconButtonHeight, _emotion.iconButtonTokens.iconButtonWidth, _emotion.iconButtonTokens.iconButtonPadding, _emotion.iconButtonTokens.iconButtonRadius, _emotion.iconButtonTokens.iconButtonFontFamily, _emotion.iconButtonTokens.iconButtonFontSize, _emotion.iconButtonTokens.iconButtonFontStyle, _emotion.iconButtonTokens.iconButtonFontWeight, _emotion.iconButtonTokens.iconButtonLetterSpacing, _emotion.iconButtonTokens.iconButtonLineHeight, _emotion.iconButtonTokens.iconButtonSpinnerSize, _emotion.iconButtonTokens.iconButtonSpinnerColor),
|
|
26
|
-
mr: /*#__PURE__*/(0, _emotion.css)(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 3rem;\n ", ": 3rem;\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-bold-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": 1.375rem;\n ", ": inherit;\n "])), _emotion.iconButtonTokens.iconButtonHeight, _emotion.iconButtonTokens.iconButtonWidth, _emotion.iconButtonTokens.iconButtonFontFamily, _emotion.iconButtonTokens.iconButtonFontSize, _emotion.iconButtonTokens.iconButtonFontStyle, _emotion.iconButtonTokens.iconButtonFontWeight, _emotion.iconButtonTokens.iconButtonLetterSpacing, _emotion.iconButtonTokens.iconButtonLineHeight, _emotion.iconButtonTokens.iconButtonSpinnerSize, _emotion.iconButtonTokens.iconButtonSpinnerColor),
|
|
27
|
-
s: /*#__PURE__*/(0, _emotion.css)(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 2.5rem;\n ", ": 2.5rem;\n ", ": 1rem;\n ", ": 0.625rem;\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-bold-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n\n ", ": 1.375rem;\n ", ": inherit;\n "])), _emotion.iconButtonTokens.iconButtonHeight, _emotion.iconButtonTokens.iconButtonWidth, _emotion.iconButtonTokens.iconButtonPadding, _emotion.iconButtonTokens.iconButtonRadius, _emotion.iconButtonTokens.iconButtonFontFamily, _emotion.iconButtonTokens.iconButtonFontSize, _emotion.iconButtonTokens.iconButtonFontStyle, _emotion.iconButtonTokens.iconButtonFontWeight, _emotion.iconButtonTokens.iconButtonLetterSpacing, _emotion.iconButtonTokens.iconButtonLineHeight, _emotion.iconButtonTokens.iconButtonSpinnerSize, _emotion.iconButtonTokens.iconButtonSpinnerColor),
|
|
28
|
-
sr: /*#__PURE__*/(0, _emotion.css)(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 2.5rem;\n ", ": 2.5rem;\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-bold-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n\n ", ": 1.375rem;\n ", ": inherit;\n "])), _emotion.iconButtonTokens.iconButtonHeight, _emotion.iconButtonTokens.iconButtonWidth, _emotion.iconButtonTokens.iconButtonFontFamily, _emotion.iconButtonTokens.iconButtonFontSize, _emotion.iconButtonTokens.iconButtonFontStyle, _emotion.iconButtonTokens.iconButtonFontWeight, _emotion.iconButtonTokens.iconButtonLetterSpacing, _emotion.iconButtonTokens.iconButtonLineHeight, _emotion.iconButtonTokens.iconButtonSpinnerSize, _emotion.iconButtonTokens.iconButtonSpinnerColor),
|
|
29
|
-
xs: /*#__PURE__*/(0, _emotion.css)(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 2rem;\n ", ": 2rem;\n ", ": 0.75rem;\n ", ": 0.5rem;\n ", ": var(--plasma-typo-body-xs-font-family);\n ", ": var(--plasma-typo-body-xs-font-size);\n ", ": var(--plasma-typo-body-xs-font-style);\n ", ": var(--plasma-typo-body-xs-bold-font-weight);\n ", ": var(--plasma-typo-body-xs-letter-spacing);\n ", ": var(--plasma-typo-body-xs-line-height);\n\n ", ": 1rem;\n ", ": inherit;\n "])), _emotion.iconButtonTokens.iconButtonHeight, _emotion.iconButtonTokens.iconButtonWidth, _emotion.iconButtonTokens.iconButtonPadding, _emotion.iconButtonTokens.iconButtonRadius, _emotion.iconButtonTokens.iconButtonFontFamily, _emotion.iconButtonTokens.iconButtonFontSize, _emotion.iconButtonTokens.iconButtonFontStyle, _emotion.iconButtonTokens.iconButtonFontWeight, _emotion.iconButtonTokens.iconButtonLetterSpacing, _emotion.iconButtonTokens.iconButtonLineHeight, _emotion.iconButtonTokens.iconButtonSpinnerSize, _emotion.iconButtonTokens.iconButtonSpinnerColor),
|
|
30
|
-
xsr: /*#__PURE__*/(0, _emotion.css)(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 2rem;\n ", ": 2rem;\n ", ": var(--plasma-typo-body-xs-font-family);\n ", ": var(--plasma-typo-body-xs-font-size);\n ", ": var(--plasma-typo-body-xs-font-style);\n ", ": var(--plasma-typo-body-xs-bold-font-weight);\n ", ": var(--plasma-typo-body-xs-letter-spacing);\n ", ": var(--plasma-typo-body-xs-line-height);\n\n ", ": 1rem;\n ", ": inherit;\n "])), _emotion.iconButtonTokens.iconButtonHeight, _emotion.iconButtonTokens.iconButtonWidth, _emotion.iconButtonTokens.iconButtonFontFamily, _emotion.iconButtonTokens.iconButtonFontSize, _emotion.iconButtonTokens.iconButtonFontStyle, _emotion.iconButtonTokens.iconButtonFontWeight, _emotion.iconButtonTokens.iconButtonLetterSpacing, _emotion.iconButtonTokens.iconButtonLineHeight, _emotion.iconButtonTokens.iconButtonSpinnerSize, _emotion.iconButtonTokens.iconButtonSpinnerColor)
|
|
23
|
+
s: /*#__PURE__*/(0, _emotion.css)(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 2.5rem;\n ", ": 2.5rem;\n ", ": 1rem;\n ", ": 0.75rem;\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-bold-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n\n ", ": 1.375rem;\n ", ": inherit;\n "])), _emotion.iconButtonTokens.iconButtonHeight, _emotion.iconButtonTokens.iconButtonWidth, _emotion.iconButtonTokens.iconButtonPadding, _emotion.iconButtonTokens.iconButtonRadius, _emotion.iconButtonTokens.iconButtonFontFamily, _emotion.iconButtonTokens.iconButtonFontSize, _emotion.iconButtonTokens.iconButtonFontStyle, _emotion.iconButtonTokens.iconButtonFontWeight, _emotion.iconButtonTokens.iconButtonLetterSpacing, _emotion.iconButtonTokens.iconButtonLineHeight, _emotion.iconButtonTokens.iconButtonSpinnerSize, _emotion.iconButtonTokens.iconButtonSpinnerColor),
|
|
24
|
+
sr: /*#__PURE__*/(0, _emotion.css)(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 2.5rem;\n ", ": 2.5rem;\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-bold-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n\n ", ": 1.375rem;\n ", ": inherit;\n "])), _emotion.iconButtonTokens.iconButtonHeight, _emotion.iconButtonTokens.iconButtonWidth, _emotion.iconButtonTokens.iconButtonFontFamily, _emotion.iconButtonTokens.iconButtonFontSize, _emotion.iconButtonTokens.iconButtonFontStyle, _emotion.iconButtonTokens.iconButtonFontWeight, _emotion.iconButtonTokens.iconButtonLetterSpacing, _emotion.iconButtonTokens.iconButtonLineHeight, _emotion.iconButtonTokens.iconButtonSpinnerSize, _emotion.iconButtonTokens.iconButtonSpinnerColor)
|
|
31
25
|
},
|
|
32
26
|
disabled: {
|
|
33
|
-
"true": /*#__PURE__*/(0, _emotion.css)(
|
|
27
|
+
"true": /*#__PURE__*/(0, _emotion.css)(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.4;\n "])), _emotion.iconButtonTokens.iconButtonDisabledOpacity)
|
|
34
28
|
},
|
|
35
29
|
focused: {
|
|
36
|
-
"true": /*#__PURE__*/(0, _emotion.css)(
|
|
30
|
+
"true": /*#__PURE__*/(0, _emotion.css)(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--surface-accent);\n "])), _emotion.iconButtonTokens.iconButtonFocusColor)
|
|
37
31
|
}
|
|
38
32
|
}
|
|
39
33
|
};
|
|
@@ -3,6 +3,7 @@ import type { ComponentProps } from 'react';
|
|
|
3
3
|
import type { StoryObj, Meta } from '@storybook/react';
|
|
4
4
|
import { IconSber } from '@salutejs/plasma-icons';
|
|
5
5
|
import { disableProps, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
|
|
6
|
+
import { action } from '@storybook/addon-actions';
|
|
6
7
|
|
|
7
8
|
import { Button } from '../Button/Button';
|
|
8
9
|
import { Modal } from '../Modal/Modal';
|
|
@@ -42,6 +43,9 @@ const getNotificationProps = (i: number) => ({
|
|
|
42
43
|
children: texts[i % 3],
|
|
43
44
|
size: size[i % 2],
|
|
44
45
|
iconPlacement: iconPlacement[i % 2] as NotificationIconPlacement,
|
|
46
|
+
onTimeoutClose: () => {
|
|
47
|
+
action('onTimeoutClose')('Callback, вызываемый при автоматическом закрытии по timeout.');
|
|
48
|
+
},
|
|
45
49
|
});
|
|
46
50
|
|
|
47
51
|
const placements = ['top', 'left'];
|
|
@@ -21,7 +21,7 @@ var config = exports.config = {
|
|
|
21
21
|
"default": /*#__PURE__*/(0, _emotion.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--surface-solid-primary);\n ", ": var(--text-primary);\n ", ": var(--surface-solid-primary);\n ", ": var(--text-primary);\n ", ": var(--surface-solid-primary);\n "])), _emotion.paginationTokens.paginationCurrentButtonColor, _emotion.paginationTokens.paginationCurrentButtonBackgroundColor, _emotion.paginationTokens.paginationCurrentButtonHoverColor, _emotion.paginationTokens.paginationCurrentButtonHoverBackgroundColor, _emotion.paginationTokens.paginationCurrentButtonActiveColor, _emotion.paginationTokens.paginationCurrentButtonActiveBackgroundColor)
|
|
22
22
|
},
|
|
23
23
|
size: {
|
|
24
|
-
s: /*#__PURE__*/(0, _emotion.css)(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": 2.5rem;\n ", ": 2.5rem;\n ", ": 1.75rem;\n ", ": 3rem;\n ", ": 0.
|
|
24
|
+
s: /*#__PURE__*/(0, _emotion.css)(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": 2.5rem;\n ", ": 2.5rem;\n ", ": 1.75rem;\n ", ": 3rem;\n ", ": 0.75rem;\n ", ": 0.9rem;\n ", ": 1.15rem;\n ", ": 0 -0.125rem 0 0.25rem;\n\n ", ": auto;\n ", ": 0.125rem;\n ", ": 0.125rem;\n ", ": 0.125rem;\n ", ": 0.125rem;\n\n ", ": 1.5rem;\n ", ": 0.5rem 0.75rem 0.5rem 0.75rem;\n ", ": 1.75rem;\n ", ": transparent;\n\n ", ": 0.75rem;\n ", ": 1rem 0 1rem;\n ", ": 0.5rem;\n ", ": 0.375rem;\n\n ", ": 0.625rem;\n ", ": 3rem;\n ", ": 2.5rem;\n ", ": 0 0.625rem;\n ", ": 0.125rem;\n "])), _emotion.paginationTokens.paginationFontFamily, _emotion.paginationTokens.paginationFontSize, _emotion.paginationTokens.paginationFontStyle, _emotion.paginationTokens.paginationFontWeight, _emotion.paginationTokens.paginationLetterSpacing, _emotion.paginationTokens.paginationLineHeight, _emotion.paginationTokens.buttonHeight, _emotion.paginationTokens.buttonWidth, _emotion.paginationTokens.buttonWidthShorter, _emotion.paginationTokens.paginationInputWidth, _emotion.paginationTokens.buttonRadius, _emotion.paginationTokens.paginationIconSize, _emotion.paginationTokens.paginationIconDoubleSize, _emotion.paginationTokens.buttonArrowMargin, _emotion.paginationTokens.selectHeight, _emotion.paginationTokens.selectPaddingTop, _emotion.paginationTokens.selectPaddingRight, _emotion.paginationTokens.selectPaddingBottom, _emotion.paginationTokens.selectPaddingLeft, _emotion.paginationTokens.selectItemHeight, _emotion.paginationTokens.selectItemPadding, _emotion.paginationTokens.selectItemContentLeftWidth, _emotion.paginationTokens.selectItemBackground, _emotion.paginationTokens.selectTargetArrowRight, _emotion.paginationTokens.selectTargetPadding, _emotion.paginationTokens.selectTargetInnerTop, _emotion.paginationTokens.selectTargetLabelInnerTop, _emotion.paginationTokens.inputBorderRadius, _emotion.paginationTokens.inputWidth, _emotion.paginationTokens.inputHeight, _emotion.paginationTokens.inputPadding, _emotion.paginationTokens.inputBorderWidth)
|
|
25
25
|
},
|
|
26
26
|
type: {
|
|
27
27
|
compact: /*#__PURE__*/(0, _emotion.css)(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral([""]))),
|
|
@@ -24,7 +24,7 @@ var config = exports.config = {
|
|
|
24
24
|
* Вид контрола.
|
|
25
25
|
*/
|
|
26
26
|
view: {
|
|
27
|
-
accent: /*#__PURE__*/(0, _emotion.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-accent);\n ", ": var(--on-dark-text-primary);\n ", ": var(--text-secondary);\n ", ": var(--surface-solid-card);\n ", ": var(--outline-accent);\n "])), _emotion.radioboxTokens.fillColor, _emotion.radioboxTokens.ellipseColor, _emotion.radioboxTokens.descriptionColor, _emotion.radioboxTokens.triggerBackgroundColor, _emotion.radioboxTokens.triggerBorderColor)
|
|
27
|
+
accent: /*#__PURE__*/(0, _emotion.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-accent);\n ", ": var(--on-dark-text-primary);\n ", ": var(--text-secondary);\n ", ": var(--surface-solid-card);\n ", ": var(--outline-accent);\n ", ": transparent;\n "])), _emotion.radioboxTokens.fillColor, _emotion.radioboxTokens.ellipseColor, _emotion.radioboxTokens.descriptionColor, _emotion.radioboxTokens.triggerBackgroundColor, _emotion.radioboxTokens.triggerBorderColor, _emotion.radioboxTokens.triggerBorderCheckedColor)
|
|
28
28
|
},
|
|
29
29
|
disabled: {
|
|
30
30
|
"true": /*#__PURE__*/(0, _emotion.css)(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.4;\n "])), _emotion.radioboxTokens.disabledOpacity)
|
|
@@ -21,7 +21,7 @@ var config = exports.config = {
|
|
|
21
21
|
negative: /*#__PURE__*/(0, _emotion.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": var(--surface-solid-card);\n ", ": var(--surface-solid-card);\n ", ": var(--text-primary);\n ", ": var(--text-negative);\n ", ": var(--text-secondary);\n ", ": var(--outline-negative);\n ", ": var(--outline-negative-hover);\n ", ": var(--outline-accent);\n\n ", ": var(--surface-negative);\n ", ": var(--text-tertiary);\n\n ", ": var(--text-accent);\n ", ": #1A9E32;\n ", ": var(--text-accent-active);\n ", ": var(--text-primary);\n ", ": var(--text-primary-hover);\n ", ": var(--text-primary-hover);\n ", ": var(--surface-solid-primary);\n ", ": var(--surface-solid-primary-hover);\n ", ": var(--surface-solid-primary-active);\n\n ", ": var(--text-accent);\n ", ": #1A9E32;\n ", ": var(--surface-transparent-accent);\n\n ", ": var(--outline-solid-primary);\n ", ": var(--text-accent);\n "])), _emotion.selectTokens.textFieldColor, _emotion.selectTokens.textFieldPlaceholderColor, _emotion.selectTokens.textFieldBackgroundColor, _emotion.selectTokens.textFieldBackgroundColorFocus, _emotion.selectTokens.textFieldLabelColor, _emotion.selectTokens.textFieldLeftHelperColor, _emotion.selectTokens.textFieldContentSlotColor, _emotion.selectTokens.textFieldBorderColor, _emotion.selectTokens.textFieldBorderColorHover, _emotion.selectTokens.textFieldBorderColorFocus, _plasmaNewHope.selectTokens.textFieldIndicatorColor, _plasmaNewHope.selectTokens.textFieldOptionalColor, _emotion.selectTokens.buttonColor, _emotion.selectTokens.buttonColorHover, _emotion.selectTokens.buttonColorActive, _emotion.selectTokens.buttonArrowColor, _emotion.selectTokens.buttonArrowColorHover, _emotion.selectTokens.buttonArrowColorActive, _emotion.selectTokens.buttonBackgroundColor, _emotion.selectTokens.buttonBackgroundColorHover, _emotion.selectTokens.buttonBackgroundColorActive, _emotion.selectTokens.disclosureIconColor, _emotion.selectTokens.disclosureIconColorHover, _emotion.selectTokens.itemBackgroundHover, _emotion.selectTokens.dropdownBorderColor, _emotion.selectTokens.checkboxIconColor)
|
|
22
22
|
},
|
|
23
23
|
size: {
|
|
24
|
-
s: /*#__PURE__*/(0, _emotion.css)(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 2.5rem;\n ", ": 0.6875rem 0.875rem 0.6875rem 0.875rem;\n ", ": 0.375rem;\n ", ": 0.
|
|
24
|
+
s: /*#__PURE__*/(0, _emotion.css)(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 2.5rem;\n ", ": 0.6875rem 0.875rem 0.6875rem 0.875rem;\n ", ": 0.375rem;\n ", ": 0.75rem;\n ", ": 0.125rem;\n\n ", ": -0.1875rem 0.25rem -0.1875rem -0.125rem;\n ", ": -0.1875rem -0.125rem -0.1875rem 0.75rem;\n\n ", ": 0 0.25rem 0 0;\n ", ": 0 0 0 0.25rem;\n\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": 0.5rem;\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n\n ", ": 0.25rem;\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n\n ", ": 0.3125rem 0 0 0;\n ", ": 1.0625rem 0 0.3125rem 0;\n\n ", ": 0.375rem;\n ", ": 0.375rem;\n ", ": 0 0 0 0;\n ", ": 0.3125rem auto auto -0.6875rem;\n ", ": 0 0 auto auto;\n ", ": 0.25rem -0.625rem auto auto;\n ", ": 1.063rem auto auto -0.75rem;\n ", ": 1.063rem -0.75rem auto auto;\n ", ": 1.063rem -2.125rem auto auto;\n\n ", ": 0.25rem;\n ", ": 0.25rem;\n ", ": auto;\n ", ": 1.75rem;\n ", ": 0 0.5rem 0 0.75rem;\n ", ": 0.375rem;\n ", ": 0rem;\n ", ": 1rem;\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n\n ", ": 0 -0.125rem 0 0.25rem;\n ", ": 2.5rem;\n ", ": 1rem 0 1rem;\n\n ", ": 0.125rem;\n ", ": 0.75rem;\n\n ", ": 0.125rem;\n\n ", ": 1.5rem;\n ", ": 0.5rem 0.75rem;\n ", ": 0.25rem 0.75rem;\n ", ": 0.5rem;\n ", ": 1.5rem;\n ", ": 1rem;\n ", ": 0 0.375rem 0 0;\n\n ", ": 0rem;\n ", ": 0rem;\n ", ": 0rem;\n ", ": 0rem;\n ", ": 0.125rem;\n ", ": 0.375rem;\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": 1.25rem;\n ", ": 0.875rem;\n ", ": 0.375rem;\n ", ": 0.25rem;\n ", ": var(--text-accent);\n ", ": var(--on-dark-text-primary);\n ", ": var(--outline-accent);\n ", ": transparent;\n ", ": 0.125rem;\n\n ", ": 0.375rem;\n "])), _plasmaNewHope.selectTokens.textFieldHeight, _plasmaNewHope.selectTokens.textFieldPadding, _plasmaNewHope.selectTokens.textFieldPaddingWithChips, _plasmaNewHope.selectTokens.textFieldBorderRadius, _plasmaNewHope.selectTokens.textFieldBorderWidth, _plasmaNewHope.selectTokens.textFieldLeftContentMargin, _plasmaNewHope.selectTokens.textFieldRightContentMargin, _plasmaNewHope.selectTokens.textFieldTextBeforeMargin, _plasmaNewHope.selectTokens.textFieldTextAfterMargin, _plasmaNewHope.selectTokens.textFieldFontFamily, _plasmaNewHope.selectTokens.textFieldFontSize, _plasmaNewHope.selectTokens.textFieldFontStyle, _plasmaNewHope.selectTokens.textFieldFontWeight, _plasmaNewHope.selectTokens.textFieldLetterSpacing, _plasmaNewHope.selectTokens.textFieldLineHeight, _plasmaNewHope.selectTokens.textFieldLabelOffset, _plasmaNewHope.selectTokens.textFieldLabelFontFamily, _plasmaNewHope.selectTokens.textFieldLabelFontSize, _plasmaNewHope.selectTokens.textFieldLabelFontStyle, _plasmaNewHope.selectTokens.textFieldLabelFontWeight, _plasmaNewHope.selectTokens.textFieldLabelLetterSpacing, _plasmaNewHope.selectTokens.textFieldLabelLineHeight, _plasmaNewHope.selectTokens.textFieldLeftHelperOffset, _plasmaNewHope.selectTokens.textFieldLeftHelperFontFamily, _plasmaNewHope.selectTokens.textFieldLeftHelperFontSize, _plasmaNewHope.selectTokens.textFieldLeftHelperFontStyle, _plasmaNewHope.selectTokens.textFieldLeftHelperFontWeight, _plasmaNewHope.selectTokens.textFieldLeftHelperLetterSpacing, _plasmaNewHope.selectTokens.textFieldLeftHelperLineHeight, _plasmaNewHope.selectTokens.textFieldLabelInnerPadding, _plasmaNewHope.selectTokens.textFieldContentLabelInnerPadding, _plasmaNewHope.selectTokens.textFieldIndicatorSizeInner, _plasmaNewHope.selectTokens.textFieldIndicatorSizeOuter, _plasmaNewHope.selectTokens.textFieldIndicatorLabelPlacementInner, _plasmaNewHope.selectTokens.textFieldIndicatorLabelPlacementOuter, _plasmaNewHope.selectTokens.textFieldIndicatorLabelPlacementInnerRight, _plasmaNewHope.selectTokens.textFieldIndicatorLabelPlacementOuterRight, _plasmaNewHope.selectTokens.textFieldClearIndicatorLabelPlacementInner, _plasmaNewHope.selectTokens.textFieldClearIndicatorLabelPlacementInnerRight, _plasmaNewHope.selectTokens.textFieldClearIndicatorHintInnerRight, _plasmaNewHope.selectTokens.textFieldChipGap, _plasmaNewHope.selectTokens.textFieldChipBorderRadius, _plasmaNewHope.selectTokens.textFieldChipWidth, _plasmaNewHope.selectTokens.textFieldChipHeight, _plasmaNewHope.selectTokens.textFieldChipPadding, _plasmaNewHope.selectTokens.textFieldChipClearContentMarginLeft, _plasmaNewHope.selectTokens.textFieldChipClearContentMarginRight, _plasmaNewHope.selectTokens.textFieldChipCloseIconSize, _plasmaNewHope.selectTokens.textFieldChipFontFamily, _plasmaNewHope.selectTokens.textFieldChipFontSize, _plasmaNewHope.selectTokens.textFieldChipFontStyle, _plasmaNewHope.selectTokens.textFieldChipFontWeight, _plasmaNewHope.selectTokens.textFieldChipLetterSpacing, _plasmaNewHope.selectTokens.textFieldChipLineHeight, _plasmaNewHope.selectTokens.buttonArrowMargin, _plasmaNewHope.selectTokens.targetHeight, _plasmaNewHope.selectTokens.buttonPadding, _plasmaNewHope.selectTokens.padding, _plasmaNewHope.selectTokens.borderRadius, _plasmaNewHope.selectTokens.dropdownBorderWidth, _plasmaNewHope.selectTokens.itemHeight, _plasmaNewHope.selectTokens.itemPadding, _plasmaNewHope.selectTokens.itemPaddingTight, _plasmaNewHope.selectTokens.itemBorderRadius, _plasmaNewHope.selectTokens.itemIconSize, _plasmaNewHope.selectTokens.itemIconSizeTight, _plasmaNewHope.selectTokens.itemIconMargin, _plasmaNewHope.selectTokens.cellPadding, _plasmaNewHope.selectTokens.cellPaddingLeftContent, _plasmaNewHope.selectTokens.cellPaddingContent, _plasmaNewHope.selectTokens.cellPaddingRightContent, _plasmaNewHope.selectTokens.cellTextboxGap, _plasmaNewHope.selectTokens.cellGap, _plasmaNewHope.selectTokens.cellTitleFontFamily, _plasmaNewHope.selectTokens.cellTitleFontSize, _plasmaNewHope.selectTokens.cellTitleFontStyle, _plasmaNewHope.selectTokens.cellTitleFontWeight, _plasmaNewHope.selectTokens.cellTitleLetterSpacing, _plasmaNewHope.selectTokens.cellTitleLineHeight, _plasmaNewHope.selectTokens.fontFamily, _plasmaNewHope.selectTokens.fontSize, _plasmaNewHope.selectTokens.fontStyle, _plasmaNewHope.selectTokens.fontWeight, _plasmaNewHope.selectTokens.fontLetterSpacing, _plasmaNewHope.selectTokens.fontLineHeight, _plasmaNewHope.selectTokens.checkboxTriggerSize, _plasmaNewHope.selectTokens.checkboxTriggerSizeTight, _plasmaNewHope.selectTokens.checkboxTriggerBorderRadius, _plasmaNewHope.selectTokens.checkboxTriggerBorderRadiusTight, _plasmaNewHope.selectTokens.checkboxFillColor, _plasmaNewHope.selectTokens.checkboxIconColor, _plasmaNewHope.selectTokens.checkboxTriggerBorderColor, _plasmaNewHope.selectTokens.checkboxTriggerBorderCheckedColor, _plasmaNewHope.selectTokens.checkboxTriggerBorderWidth, _plasmaNewHope.selectTokens.indicatorSize)
|
|
25
25
|
},
|
|
26
26
|
labelPlacement: {
|
|
27
27
|
inner: /*#__PURE__*/(0, _emotion.css)(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--plasma-input-label-color, var(--plasma-input-placeholder-color, var(--plasma-colors-secondary)));\n ", ": var(--plasma-typo-body-xs-font-family);\n ", ": var(--plasma-typo-body-xs-font-size);\n ", ": var(--plasma-typo-body-xs-font-style);\n ", ": var(--plasma-typo-body-xs-font-weight);\n ", ": var(--plasma-typo-body-xs-letter-spacing);\n ", ": var(--plasma-typo-body-xs-line-height);\n "])), _plasmaNewHope.selectTokens.textFieldPlaceholderColor, _plasmaNewHope.selectTokens.textFieldLabelInnerFontFamily, _plasmaNewHope.selectTokens.textFieldLabelInnerFontSize, _plasmaNewHope.selectTokens.textFieldLabelInnerFontStyle, _plasmaNewHope.selectTokens.textFieldLabelInnerFontWeight, _plasmaNewHope.selectTokens.textFieldLabelInnerLetterSpacing, _plasmaNewHope.selectTokens.textFieldLabelInnerLineHeight),
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.config = void 0;
|
|
7
7
|
var _emotion = /*#__PURE__*/require("@salutejs/plasma-new-hope/emotion");
|
|
8
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4
|
|
8
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
9
9
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
10
10
|
var config = exports.config = {
|
|
11
11
|
defaults: {
|
|
@@ -14,15 +14,14 @@ var config = exports.config = {
|
|
|
14
14
|
},
|
|
15
15
|
variations: {
|
|
16
16
|
view: {
|
|
17
|
-
"default": /*#__PURE__*/(0, _emotion.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n\n ", ": var(--text-secondary);\n\n ", ": var(--surface-solid-tertiary);\n ", ": var(--on-light-surface-solid-card);\n ", ": var(--surface-solid-default);\n\n ", ": var(--surface-solid-primary);\n\n ", ": var(--surface-solid-default);\n\n ", ": var(--text-secondary);\n ", ": var(--surface-
|
|
18
|
-
accent: /*#__PURE__*/(0, _emotion.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n\n ", ": var(--text-secondary);\n\n ", ": var(--surface-solid-tertiary);\n ", ": var(--on-light-surface-solid-card);\n ", ": var(--surface-accent);\n\n ", ": var(--surface-solid-primary);\n\n ", ": var(--surface-accent);\n\n ", ": var(--text-secondary);\n ", ": var(--surface-
|
|
19
|
-
gradient: /*#__PURE__*/(0, _emotion.css)(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n\n ", ": var(--text-secondary);\n\n ", ": var(--surface-solid-tertiary);\n ", ": var(--on-light-surface-solid-card);\n ", ": var(--surface-accent-gradient);\n\n ", ": var(--surface-solid-primary);\n\n ", ": var(--surface-accent-gradient);\n\n ", ": var(--text-secondary);\n ", ": var(--surface-transparent-primary);\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": var(--text-primary);\n ", ": var(--text-primary);\n "])), _emotion.sliderTokens.labelColor, _emotion.sliderTokens.rangeValueColor, _emotion.sliderTokens.thumbBorderColor, _emotion.sliderTokens.thumbBackgroundColor, _emotion.sliderTokens.thumbFocusBorderColor, _emotion.sliderTokens.railBackgroundColor, _emotion.sliderTokens.fillColor, _emotion.sliderTokens.textFieldColor, _emotion.sliderTokens.textFieldBackgroundColor, _emotion.sliderTokens.textFieldCaretColor, _emotion.sliderTokens.textFieldPlaceholderColor, _emotion.sliderTokens.textFiledFocusColor, _emotion.sliderTokens.textFieldActiveColor)
|
|
17
|
+
"default": /*#__PURE__*/(0, _emotion.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n\n ", ": var(--text-secondary);\n\n ", ": var(--surface-solid-tertiary);\n ", ": var(--on-light-surface-solid-card);\n ", ": var(--surface-solid-default);\n\n ", ": var(--surface-solid-primary);\n\n ", ": var(--surface-solid-default);\n\n ", ": var(--text-secondary);\n ", ": var(--surface-solid-card);\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": var(--text-primary);\n ", ": var(--text-primary);\n\n // TODO: \u041D\u0430 \u043E\u0431\u0441\u0443\u0436\u0434\u0435\u043D\u0438\u0435, \u043F\u0440\u044F\u043C\u043E\u0435 \u043F\u0435\u0440\u0435\u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u0438\u0435 \u0442\u043E\u043A\u0435\u043D\u043E\u0432 \u043E\u0442 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0430 TextField\n ", ": var(--on-light-outline-solid-primary);\n ", ": var(--outline-accent);\n "])), _emotion.sliderTokens.labelColor, _emotion.sliderTokens.rangeValueColor, _emotion.sliderTokens.thumbBorderColor, _emotion.sliderTokens.thumbBackgroundColor, _emotion.sliderTokens.thumbFocusBorderColor, _emotion.sliderTokens.railBackgroundColor, _emotion.sliderTokens.fillColor, _emotion.sliderTokens.textFieldColor, _emotion.sliderTokens.textFieldBackgroundColor, _emotion.sliderTokens.textFieldCaretColor, _emotion.sliderTokens.textFieldPlaceholderColor, _emotion.sliderTokens.textFiledFocusColor, _emotion.sliderTokens.textFieldActiveColor, _emotion.textFieldTokens.borderColor, _emotion.textFieldTokens.borderColorFocus),
|
|
18
|
+
accent: /*#__PURE__*/(0, _emotion.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n\n ", ": var(--text-secondary);\n\n ", ": var(--surface-solid-tertiary);\n ", ": var(--on-light-surface-solid-card);\n ", ": var(--surface-accent);\n\n ", ": var(--surface-solid-primary);\n\n ", ": var(--surface-accent);\n\n ", ": var(--text-secondary);\n\n ", ": var(--surface-solid-card);\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": var(--text-primary);\n ", ": var(--text-primary);\n\n ", ": var(--on-light-outline-solid-primary);\n ", ": var(--outline-accent);\n "])), _emotion.sliderTokens.labelColor, _emotion.sliderTokens.rangeValueColor, _emotion.sliderTokens.thumbBorderColor, _emotion.sliderTokens.thumbBackgroundColor, _emotion.sliderTokens.thumbFocusBorderColor, _emotion.sliderTokens.railBackgroundColor, _emotion.sliderTokens.fillColor, _emotion.sliderTokens.textFieldColor, _emotion.sliderTokens.textFieldBackgroundColor, _emotion.sliderTokens.textFieldCaretColor, _emotion.sliderTokens.textFieldPlaceholderColor, _emotion.sliderTokens.textFiledFocusColor, _emotion.sliderTokens.textFieldActiveColor, _emotion.textFieldTokens.borderColor, _emotion.textFieldTokens.borderColorFocus)
|
|
20
19
|
},
|
|
21
20
|
size: {
|
|
22
|
-
s: /*#__PURE__*/(0, _emotion.css)(
|
|
21
|
+
s: /*#__PURE__*/(0, _emotion.css)(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 1rem;\n ", ": 0.375rem;\n\n ", ": 0.25rem;\n ", ": 0.25rem;\n ", ": 1rem;\n ", ": 0.625rem;\n ", ": 0.625rem;\n\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n\n ", ": 0.5rem;\n ", ": 0.625rem;\n ", ": 0.625rem;\n ", ": 0.5rem;\n\n ", ": var(--plasma-typo-body-xs-font-family);\n ", ": var(--plasma-typo-body-xs-font-size);\n ", ": var(--plasma-typo-body-xs-font-style);\n ", ": var(--plasma-typo-body-xs-font-weight);\n ", ": var(--plasma-typo-body-xs-letter-spacing);\n ", ": var(--plasma-typo-body-xs-line-height);\n\n ", ": 1rem;\n ", ": 1.25rem;\n ", ": 0.0625rem solid;\n\n ", ": 1.25rem;\n\n ", ": 0.25rem;\n ", ": 0.125rem;\n ", ": 0.75rem;\n\n ", ": 0.125rem;\n\n ", ": 2.5rem;\n ", ": 0.5rem 1rem 0.5rem 1rem;\n ", ": 0.625rem;\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n\n ", ": 0.125rem;\n "])), _emotion.sliderTokens.size, _emotion.sliderTokens.doubleWrapperGap, _emotion.sliderTokens.labelWrapperGap, _emotion.sliderTokens.labelWrapperMarginBottom, _emotion.sliderTokens.labelWrapperMarginRight, _emotion.sliderTokens.labelWrapperOnlyIconMarginRight, _emotion.sliderTokens.labelWrapperVerticalMargin, _emotion.sliderTokens.labelFontFamily, _emotion.sliderTokens.labelFontSize, _emotion.sliderTokens.labelFontStyle, _emotion.sliderTokens.labelFontWeight, _emotion.sliderTokens.labelLetterSpacing, _emotion.sliderTokens.labelLineHeight, _emotion.sliderTokens.rangeValueHorizontalMargin, _emotion.sliderTokens.rangeValueBottomOffset, _emotion.sliderTokens.rangeValueHorizontalOffset, _emotion.sliderTokens.rangeValueVerticalMargin, _emotion.sliderTokens.valueFontFamily, _emotion.sliderTokens.valueFontSize, _emotion.sliderTokens.valueFontStyle, _emotion.sliderTokens.valueFontWeight, _emotion.sliderTokens.valueLetterSpacing, _emotion.sliderTokens.valueLineHeight, _emotion.sliderTokens.thumbSize, _emotion.sliderTokens.thumbSizeLarge, _emotion.sliderTokens.thumbBorder, _emotion.sliderTokens.currentValueTopOffset, _emotion.sliderTokens.railThickness, _emotion.sliderTokens.railBorderRadius, _emotion.sliderTokens.railIndent, _emotion.sliderTokens.textFieldWrapperGap, _emotion.sliderTokens.textFieldHeight, _emotion.sliderTokens.textFieldPadding, _emotion.sliderTokens.textFieldBorderRadius, _emotion.sliderTokens.textFieldFontFamily, _emotion.sliderTokens.textFieldFontSize, _emotion.sliderTokens.textFieldFontStyle, _emotion.sliderTokens.textFieldFontWeight, _emotion.sliderTokens.textFieldLetterSpacing, _emotion.sliderTokens.textFieldLineHeight, _emotion.textFieldTokens.borderWidth)
|
|
23
22
|
},
|
|
24
23
|
disabled: {
|
|
25
|
-
"true": /*#__PURE__*/(0, _emotion.css)(
|
|
24
|
+
"true": /*#__PURE__*/(0, _emotion.css)(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.4;\n "])), _emotion.sliderTokens.disabledOpacity)
|
|
26
25
|
}
|
|
27
26
|
}
|
|
28
27
|
};
|
|
@@ -1,15 +1,16 @@
|
|
|
1
1
|
import React, { useState } from 'react';
|
|
2
2
|
import type { ComponentProps } from 'react';
|
|
3
3
|
import styled from 'styled-components';
|
|
4
|
-
import { InSpacingDecorator, disableProps } from '@salutejs/plasma-sb-utils';
|
|
4
|
+
import { InSpacingDecorator, disableProps, getConfigVariations } from '@salutejs/plasma-sb-utils';
|
|
5
5
|
import type { StoryObj, Meta } from '@storybook/react';
|
|
6
6
|
import { IconMic } from '@salutejs/plasma-icons';
|
|
7
7
|
|
|
8
8
|
import { Slider } from './Slider';
|
|
9
|
+
import { config } from './Slider.config';
|
|
10
|
+
|
|
11
|
+
const { views } = getConfigVariations(config);
|
|
9
12
|
|
|
10
|
-
const sizes = ['s'];
|
|
11
13
|
const pointerSizes = ['small', 'none'];
|
|
12
|
-
const views = ['default', 'accent', 'gradient'];
|
|
13
14
|
const sliderAligns = ['center', 'left', 'right', 'none'];
|
|
14
15
|
const labelPlacements = ['top', 'left'];
|
|
15
16
|
const scaleAligns = ['side', 'bottom'];
|
|
@@ -27,12 +28,6 @@ const meta: Meta<typeof Slider> = {
|
|
|
27
28
|
type: 'select',
|
|
28
29
|
},
|
|
29
30
|
},
|
|
30
|
-
size: {
|
|
31
|
-
options: sizes,
|
|
32
|
-
control: {
|
|
33
|
-
type: 'inline-radio',
|
|
34
|
-
},
|
|
35
|
-
},
|
|
36
31
|
pointerSize: {
|
|
37
32
|
options: pointerSizes,
|
|
38
33
|
control: {
|
|
@@ -80,8 +75,12 @@ type StorySingle = StoryObj<StorySingleProps>;
|
|
|
80
75
|
type StoryDouble = StoryObj<StoryProps>;
|
|
81
76
|
|
|
82
77
|
const SliderWrapper = styled.div<{ isVertical?: boolean }>`
|
|
83
|
-
|
|
78
|
+
padding: 1rem;
|
|
79
|
+
|
|
80
|
+
width: calc(100% - 2rem);
|
|
84
81
|
height: ${({ isVertical }) => (isVertical ? '25rem' : 'auto')};
|
|
82
|
+
|
|
83
|
+
background-color: rgb(232, 238, 242, 0.4);
|
|
85
84
|
`;
|
|
86
85
|
|
|
87
86
|
const StoryDefault = (args: StorySingleProps) => {
|
|
@@ -171,7 +170,6 @@ export const Default: StorySingle = {
|
|
|
171
170
|
},
|
|
172
171
|
args: {
|
|
173
172
|
view: 'default',
|
|
174
|
-
size: 's',
|
|
175
173
|
pointerSize: 'small',
|
|
176
174
|
pointerVisibility: 'always',
|
|
177
175
|
min: 0,
|
|
@@ -246,7 +244,6 @@ const StoryMultipleValues = (args: StoryProps) => {
|
|
|
246
244
|
export const MultipleValues: StoryDouble = {
|
|
247
245
|
args: {
|
|
248
246
|
view: 'default',
|
|
249
|
-
size: 's',
|
|
250
247
|
pointerSize: 'small',
|
|
251
248
|
min: 0,
|
|
252
249
|
max: 100,
|
|
@@ -259,7 +256,7 @@ export const MultipleValues: StoryDouble = {
|
|
|
259
256
|
pointerSize: {
|
|
260
257
|
options: ['small', 'large'],
|
|
261
258
|
control: {
|
|
262
|
-
type: '
|
|
259
|
+
type: 'select',
|
|
263
260
|
},
|
|
264
261
|
},
|
|
265
262
|
...disableProps(['size', 'orientation']),
|
|
@@ -14,10 +14,10 @@ var config = exports.config = {
|
|
|
14
14
|
},
|
|
15
15
|
variations: {
|
|
16
16
|
view: {
|
|
17
|
-
clear: /*#__PURE__*/(0, _emotion.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-secondary);\n ", ": var(--text-tertiary);\n ", ": transparent;\n ", ": var(--text-secondary-hover);\n ", ": var(--text-secondary);\n ", ": var(--text-secondary-active);\n ", ": var(--text-secondary);\n ", ": transparent;\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": transparent;\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": transparent;\n ", ": background-color 0.3s ease-in-out;\n\n ", ": 0;\n ", ": 0;\n\n ", ": var(--surface-accent);\n\n ", ": 0rem;\n ", ": var(--surface-solid-default);\n ", ": var(--surface-solid-default-hover);\n "])), _emotion.tabsTokens.itemColor, _emotion.tabsTokens.itemValueColor, _emotion.tabsTokens.itemBackgroundColor, _emotion.tabsTokens.itemColorHover, _emotion.tabsTokens.itemValueColorHover, _emotion.tabsTokens.itemColorActive, _emotion.tabsTokens.itemValueColorActive, _emotion.tabsTokens.itemBackgroundColorHover, _emotion.tabsTokens.itemSelectedColor, _emotion.tabsTokens.itemSelectedValueColor, _emotion.tabsTokens.itemSelectedBackgroundColor, _emotion.tabsTokens.itemSelectedColorHover, _emotion.tabsTokens.itemSelectedValueColorHover, _emotion.tabsTokens.itemSelectedBackgroundColorHover, _emotion.tabsTokens.itemBackgroundTransition, _emotion.tabsTokens.itemPaddingClear, _emotion.tabsTokens.itemContentPaddingClear, _emotion.tabsTokens.outlineFocusColor, _emotion.tabsTokens.itemSelectedDividerHeight, _emotion.tabsTokens.itemSelectedDividerColor, _emotion.tabsTokens.itemSelectedDividerColorHover),
|
|
18
|
-
secondary: /*#__PURE__*/(0, _emotion.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": transparent;\n ", ": var(--text-secondary-hover);\n ", ": var(--text-secondary);\n ", ": var(--text-secondary-active);\n ", ": var(--text-secondary);\n ", ": transparent;\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": var(--surface-transparent-card);\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": var(--surface-transparent-card);\n ", ": background-color 0.3s ease-in-out;\n\n ", ": 0.125rem;\n\n ", ": var(--surface-accent);\n\n ", ": 0rem;\n ", ": var(--surface-solid-default);\n ", ": var(--surface-solid-default-hover);\n "])), _emotion.tabsTokens.itemColor, _emotion.tabsTokens.itemValueColor, _emotion.tabsTokens.itemBackgroundColor, _emotion.tabsTokens.itemColorHover, _emotion.tabsTokens.itemValueColorHover, _emotion.tabsTokens.itemColorActive, _emotion.tabsTokens.itemValueColorActive, _emotion.tabsTokens.itemBackgroundColorHover, _emotion.tabsTokens.itemSelectedColor, _emotion.tabsTokens.itemSelectedValueColor, _emotion.tabsTokens.itemSelectedBackgroundColor, _emotion.tabsTokens.itemSelectedColorHover, _emotion.tabsTokens.itemSelectedValueColorHover, _emotion.tabsTokens.itemSelectedBackgroundColorHover, _emotion.tabsTokens.itemBackgroundTransition, _emotion.tabsTokens.itemMarginLeftFilled, _emotion.tabsTokens.outlineFocusColor, _emotion.tabsTokens.itemSelectedDividerHeight, _emotion.tabsTokens.itemSelectedDividerColor, _emotion.tabsTokens.itemSelectedDividerColorHover),
|
|
19
|
-
divider: /*#__PURE__*/(0, _emotion.css)(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-accent);\n ", ": var(--text-secondary);\n ", ": transparent;\n ", ": #1A9E32;\n ", ": var(--text-secondary);\n ", ": var(--text-accent-active);\n ", ": var(--text-secondary);\n ", ": transparent;\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": transparent;\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": transparent;\n ", ": background-color 0.3s ease-in-out;\n\n ", ": 0;\n ", ": 0;\n\n ", ": var(--surface-accent);\n\n ", ": 0.125rem;\n ", ": var(--surface-solid-default);\n ", ": var(--surface-solid-default-hover);\n "])), _emotion.tabsTokens.itemColor, _emotion.tabsTokens.itemValueColor, _emotion.tabsTokens.itemBackgroundColor, _emotion.tabsTokens.itemColorHover, _emotion.tabsTokens.itemValueColorHover, _emotion.tabsTokens.itemColorActive, _emotion.tabsTokens.itemValueColorActive, _emotion.tabsTokens.itemBackgroundColorHover, _emotion.tabsTokens.itemSelectedColor, _emotion.tabsTokens.itemSelectedValueColor, _emotion.tabsTokens.itemSelectedBackgroundColor, _emotion.tabsTokens.itemSelectedColorHover, _emotion.tabsTokens.itemSelectedValueColorHover, _emotion.tabsTokens.itemSelectedBackgroundColorHover, _emotion.tabsTokens.itemBackgroundTransition, _emotion.tabsTokens.itemPaddingClear, _emotion.tabsTokens.itemContentPaddingClear, _emotion.tabsTokens.outlineFocusColor, _emotion.tabsTokens.itemSelectedDividerHeight, _emotion.tabsTokens.itemSelectedDividerColor, _emotion.tabsTokens.itemSelectedDividerColorHover),
|
|
20
|
-
"default": /*#__PURE__*/(0, _emotion.css)(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": transparent;\n ", ": var(--text-secondary-hover);\n ", ": var(--text-secondary);\n ", ": var(--text-secondary-active);\n ", ": var(--text-secondary);\n ", ": transparent;\n ", ": var(--inverse-text-primary);\n ", ": var(--on-dark-text-secondary);\n ", ": var(--surface-solid-default);\n ", ": var(--inverse-text-primary);\n ", ": var(--on-dark-text-secondary);\n ", ": var(--surface-solid-default);\n ", ": background-color 0.3s ease-in-out;\n\n ", ": 0.125rem;\n\n ", ": var(--surface-accent);\n\n ", ": 0rem;\n ", ": var(--surface-solid-default);\n ", ": var(--surface-solid-default-hover);\n "])), _emotion.tabsTokens.itemColor, _emotion.tabsTokens.itemValueColor, _emotion.tabsTokens.itemBackgroundColor, _emotion.tabsTokens.itemColorHover, _emotion.tabsTokens.itemValueColorHover, _emotion.tabsTokens.itemColorActive, _emotion.tabsTokens.itemValueColorActive, _emotion.tabsTokens.itemBackgroundColorHover, _emotion.tabsTokens.itemSelectedColor, _emotion.tabsTokens.itemSelectedValueColor, _emotion.tabsTokens.itemSelectedBackgroundColor, _emotion.tabsTokens.itemSelectedColorHover, _emotion.tabsTokens.itemSelectedValueColorHover, _emotion.tabsTokens.itemSelectedBackgroundColorHover, _emotion.tabsTokens.itemBackgroundTransition, _emotion.tabsTokens.itemMarginLeftFilled, _emotion.tabsTokens.outlineFocusColor, _emotion.tabsTokens.itemSelectedDividerHeight, _emotion.tabsTokens.itemSelectedDividerColor, _emotion.tabsTokens.itemSelectedDividerColorHover)
|
|
17
|
+
clear: /*#__PURE__*/(0, _emotion.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-secondary);\n ", ": var(--text-tertiary);\n ", ": transparent;\n ", ": var(--text-secondary-hover);\n ", ": var(--text-secondary);\n ", ": var(--text-secondary-active);\n ", ": var(--text-secondary);\n ", ": transparent;\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": transparent;\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": transparent;\n ", ": background-color 0.3s ease-in-out;\n\n ", ": 0;\n ", ": 0;\n\n ", ": var(--surface-accent);\n\n ", ": 0rem;\n ", ": var(--surface-solid-default);\n ", ": var(--surface-solid-default-hover);\n\n ", ": default;\n "])), _emotion.tabsTokens.itemColor, _emotion.tabsTokens.itemValueColor, _emotion.tabsTokens.itemBackgroundColor, _emotion.tabsTokens.itemColorHover, _emotion.tabsTokens.itemValueColorHover, _emotion.tabsTokens.itemColorActive, _emotion.tabsTokens.itemValueColorActive, _emotion.tabsTokens.itemBackgroundColorHover, _emotion.tabsTokens.itemSelectedColor, _emotion.tabsTokens.itemSelectedValueColor, _emotion.tabsTokens.itemSelectedBackgroundColor, _emotion.tabsTokens.itemSelectedColorHover, _emotion.tabsTokens.itemSelectedValueColorHover, _emotion.tabsTokens.itemSelectedBackgroundColorHover, _emotion.tabsTokens.itemBackgroundTransition, _emotion.tabsTokens.itemPaddingClear, _emotion.tabsTokens.itemContentPaddingClear, _emotion.tabsTokens.outlineFocusColor, _emotion.tabsTokens.itemSelectedDividerHeight, _emotion.tabsTokens.itemSelectedDividerColor, _emotion.tabsTokens.itemSelectedDividerColorHover, _emotion.tabsTokens.itemCursor),
|
|
18
|
+
secondary: /*#__PURE__*/(0, _emotion.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": transparent;\n ", ": var(--text-secondary-hover);\n ", ": var(--text-secondary);\n ", ": var(--text-secondary-active);\n ", ": var(--text-secondary);\n ", ": transparent;\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": var(--surface-transparent-card);\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": var(--surface-transparent-card);\n ", ": background-color 0.3s ease-in-out;\n\n ", ": 0.125rem;\n\n ", ": var(--surface-accent);\n\n ", ": 0rem;\n ", ": var(--surface-solid-default);\n ", ": var(--surface-solid-default-hover);\n\n ", ": default;\n "])), _emotion.tabsTokens.itemColor, _emotion.tabsTokens.itemValueColor, _emotion.tabsTokens.itemBackgroundColor, _emotion.tabsTokens.itemColorHover, _emotion.tabsTokens.itemValueColorHover, _emotion.tabsTokens.itemColorActive, _emotion.tabsTokens.itemValueColorActive, _emotion.tabsTokens.itemBackgroundColorHover, _emotion.tabsTokens.itemSelectedColor, _emotion.tabsTokens.itemSelectedValueColor, _emotion.tabsTokens.itemSelectedBackgroundColor, _emotion.tabsTokens.itemSelectedColorHover, _emotion.tabsTokens.itemSelectedValueColorHover, _emotion.tabsTokens.itemSelectedBackgroundColorHover, _emotion.tabsTokens.itemBackgroundTransition, _emotion.tabsTokens.itemMarginLeftFilled, _emotion.tabsTokens.outlineFocusColor, _emotion.tabsTokens.itemSelectedDividerHeight, _emotion.tabsTokens.itemSelectedDividerColor, _emotion.tabsTokens.itemSelectedDividerColorHover, _emotion.tabsTokens.itemCursor),
|
|
19
|
+
divider: /*#__PURE__*/(0, _emotion.css)(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-accent);\n ", ": var(--text-secondary);\n ", ": transparent;\n ", ": #1A9E32;\n ", ": var(--text-secondary);\n ", ": var(--text-accent-active);\n ", ": var(--text-secondary);\n ", ": transparent;\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": transparent;\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": transparent;\n ", ": background-color 0.3s ease-in-out;\n\n ", ": 0;\n ", ": 0;\n\n ", ": var(--surface-accent);\n\n ", ": 0.125rem;\n ", ": var(--surface-solid-default);\n ", ": var(--surface-solid-default-hover);\n\n ", ": default;\n "])), _emotion.tabsTokens.itemColor, _emotion.tabsTokens.itemValueColor, _emotion.tabsTokens.itemBackgroundColor, _emotion.tabsTokens.itemColorHover, _emotion.tabsTokens.itemValueColorHover, _emotion.tabsTokens.itemColorActive, _emotion.tabsTokens.itemValueColorActive, _emotion.tabsTokens.itemBackgroundColorHover, _emotion.tabsTokens.itemSelectedColor, _emotion.tabsTokens.itemSelectedValueColor, _emotion.tabsTokens.itemSelectedBackgroundColor, _emotion.tabsTokens.itemSelectedColorHover, _emotion.tabsTokens.itemSelectedValueColorHover, _emotion.tabsTokens.itemSelectedBackgroundColorHover, _emotion.tabsTokens.itemBackgroundTransition, _emotion.tabsTokens.itemPaddingClear, _emotion.tabsTokens.itemContentPaddingClear, _emotion.tabsTokens.outlineFocusColor, _emotion.tabsTokens.itemSelectedDividerHeight, _emotion.tabsTokens.itemSelectedDividerColor, _emotion.tabsTokens.itemSelectedDividerColorHover, _emotion.tabsTokens.itemCursor),
|
|
20
|
+
"default": /*#__PURE__*/(0, _emotion.css)(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": transparent;\n ", ": var(--text-secondary-hover);\n ", ": var(--text-secondary);\n ", ": var(--text-secondary-active);\n ", ": var(--text-secondary);\n ", ": transparent;\n ", ": var(--inverse-text-primary);\n ", ": var(--on-dark-text-secondary);\n ", ": var(--surface-solid-default);\n ", ": var(--inverse-text-primary);\n ", ": var(--on-dark-text-secondary);\n ", ": var(--surface-solid-default);\n ", ": background-color 0.3s ease-in-out;\n\n ", ": 0.125rem;\n\n ", ": var(--surface-accent);\n\n ", ": 0rem;\n ", ": var(--surface-solid-default);\n ", ": var(--surface-solid-default-hover);\n\n ", ": default;\n "])), _emotion.tabsTokens.itemColor, _emotion.tabsTokens.itemValueColor, _emotion.tabsTokens.itemBackgroundColor, _emotion.tabsTokens.itemColorHover, _emotion.tabsTokens.itemValueColorHover, _emotion.tabsTokens.itemColorActive, _emotion.tabsTokens.itemValueColorActive, _emotion.tabsTokens.itemBackgroundColorHover, _emotion.tabsTokens.itemSelectedColor, _emotion.tabsTokens.itemSelectedValueColor, _emotion.tabsTokens.itemSelectedBackgroundColor, _emotion.tabsTokens.itemSelectedColorHover, _emotion.tabsTokens.itemSelectedValueColorHover, _emotion.tabsTokens.itemSelectedBackgroundColorHover, _emotion.tabsTokens.itemBackgroundTransition, _emotion.tabsTokens.itemMarginLeftFilled, _emotion.tabsTokens.outlineFocusColor, _emotion.tabsTokens.itemSelectedDividerHeight, _emotion.tabsTokens.itemSelectedDividerColor, _emotion.tabsTokens.itemSelectedDividerColorHover, _emotion.tabsTokens.itemCursor)
|
|
21
21
|
},
|
|
22
22
|
size: {
|
|
23
23
|
s: /*#__PURE__*/(0, _emotion.css)(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.5rem;\n ", ": auto;\n ", ": 2.5rem;\n ", ": 0 0.625rem;\n ", ": 0 0.5rem;\n ", ": 1.75rem;\n ", ": 0.25rem;\n ", ": 0.125rem;\n\n ", ": var(--plasma-typo-body-m-bold-font-family);\n ", ": var(--plasma-typo-body-m-bold-font-size);\n ", ": var(--plasma-typo-body-m-bold-font-style);\n ", ": var(--plasma-typo-body-m-bold-font-weight);\n ", ": var(--plasma-typo-body-m-bold-letter-spacing);\n ", ": var(--plasma-typo-body-m-bold-line-height);\n\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n "])), _emotion.tabsTokens.itemBorderRadius, _emotion.tabsTokens.itemWidth, _emotion.tabsTokens.itemHeight, _emotion.tabsTokens.itemPadding, _emotion.tabsTokens.itemPaddingPilled, _emotion.tabsTokens.itemMarginLeft, _emotion.tabsTokens.itemContentGap, _emotion.tabsTokens.itemContentPadding, _emotion.tabsTokens.fontFamily, _emotion.tabsTokens.fontSize, _emotion.tabsTokens.fontStyle, _emotion.tabsTokens.fontWeight, _emotion.tabsTokens.letterSpacing, _emotion.tabsTokens.lineHeight, _emotion.tabsTokens.valueFontFamily, _emotion.tabsTokens.valueFontSize, _emotion.tabsTokens.valueFontStyle, _emotion.tabsTokens.valueFontWeight, _emotion.tabsTokens.valueLetterSpacing, _emotion.tabsTokens.valueLineHeight)
|
|
@@ -14,7 +14,7 @@ var config = exports.config = {
|
|
|
14
14
|
},
|
|
15
15
|
variations: {
|
|
16
16
|
view: {
|
|
17
|
-
divider: /*#__PURE__*/(0, _emotion.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-accent);\n ", ": var(--text-secondary);\n ", ": transparent;\n ", ": #1A9E32;\n ", ": var(--text-secondary);\n ", ": var(--text-accent-active);\n ", ": var(--text-secondary);\n ", ": transparent;\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": transparent;\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": transparent;\n ", ": background-color 0.3s ease-in-out;\n\n ", ": 0;\n ", ": 0;\n\n ", ": var(--surface-accent);\n\n ", ": 0.125rem;\n ", ": 0.125rem;\n ", ": var(--surface-solid-default);\n ", ": var(--text-primary);\n "])), _emotion.tabsTokens.itemColor, _emotion.tabsTokens.itemValueColor, _emotion.tabsTokens.itemBackgroundColor, _emotion.tabsTokens.itemColorHover, _emotion.tabsTokens.itemValueColorHover, _emotion.tabsTokens.itemColorActive, _emotion.tabsTokens.itemValueColorActive, _emotion.tabsTokens.itemBackgroundColorHover, _emotion.tabsTokens.itemSelectedColor, _emotion.tabsTokens.itemSelectedValueColor, _emotion.tabsTokens.itemSelectedBackgroundColor, _emotion.tabsTokens.itemSelectedColorHover, _emotion.tabsTokens.itemSelectedValueColorHover, _emotion.tabsTokens.itemSelectedBackgroundColorHover, _emotion.tabsTokens.itemBackgroundTransition, _emotion.tabsTokens.itemPaddingClear, _emotion.tabsTokens.itemContentPaddingClear, _emotion.tabsTokens.outlineFocusColor, _emotion.tabsTokens.itemSelectedDividerWidth, _emotion.tabsTokens.itemSelectedDividerHeight, _emotion.tabsTokens.itemSelectedDividerColor, _emotion.tabsTokens.itemSelectedDividerColorHover)
|
|
17
|
+
divider: /*#__PURE__*/(0, _emotion.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-accent);\n ", ": var(--text-secondary);\n ", ": transparent;\n ", ": #1A9E32;\n ", ": var(--text-secondary);\n ", ": var(--text-accent-active);\n ", ": var(--text-secondary);\n ", ": transparent;\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": transparent;\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": transparent;\n ", ": background-color 0.3s ease-in-out;\n\n ", ": 0;\n ", ": 0;\n\n ", ": var(--surface-accent);\n\n ", ": 0.125rem;\n ", ": 0.125rem;\n ", ": var(--surface-solid-default);\n ", ": var(--text-primary);\n\n ", ": default;\n "])), _emotion.tabsTokens.itemColor, _emotion.tabsTokens.itemValueColor, _emotion.tabsTokens.itemBackgroundColor, _emotion.tabsTokens.itemColorHover, _emotion.tabsTokens.itemValueColorHover, _emotion.tabsTokens.itemColorActive, _emotion.tabsTokens.itemValueColorActive, _emotion.tabsTokens.itemBackgroundColorHover, _emotion.tabsTokens.itemSelectedColor, _emotion.tabsTokens.itemSelectedValueColor, _emotion.tabsTokens.itemSelectedBackgroundColor, _emotion.tabsTokens.itemSelectedColorHover, _emotion.tabsTokens.itemSelectedValueColorHover, _emotion.tabsTokens.itemSelectedBackgroundColorHover, _emotion.tabsTokens.itemBackgroundTransition, _emotion.tabsTokens.itemPaddingClear, _emotion.tabsTokens.itemContentPaddingClear, _emotion.tabsTokens.outlineFocusColor, _emotion.tabsTokens.itemSelectedDividerWidth, _emotion.tabsTokens.itemSelectedDividerHeight, _emotion.tabsTokens.itemSelectedDividerColor, _emotion.tabsTokens.itemSelectedDividerColorHover, _emotion.tabsTokens.itemCursor)
|
|
18
18
|
},
|
|
19
19
|
size: {
|
|
20
20
|
s: /*#__PURE__*/(0, _emotion.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.5rem;\n ", ": auto;\n ", ": 2.5rem;\n ", ": 0 0.625rem;\n ", ": 0 0.5rem;\n ", ": 0.5rem 1rem;\n ", ": 0.75rem;\n ", ": 0.25rem;\n ", ": 0.125rem;\n\n ", ": var(--plasma-typo-body-m-bold-font-family);\n ", ": var(--plasma-typo-body-m-bold-font-size);\n ", ": var(--plasma-typo-body-m-bold-font-style);\n ", ": var(--plasma-typo-body-m-bold-font-weight);\n ", ": var(--plasma-typo-body-m-bold-letter-spacing);\n ", ": var(--plasma-typo-body-m-bold-line-height);\n\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n "])), _emotion.tabsTokens.itemBorderRadius, _emotion.tabsTokens.itemWidth, _emotion.tabsTokens.itemHeight, _emotion.tabsTokens.itemPadding, _emotion.tabsTokens.itemPaddingPilled, _emotion.tabsTokens.itemPaddingOrientationVertical, _emotion.tabsTokens.itemMarginLeft, _emotion.tabsTokens.itemContentGap, _emotion.tabsTokens.itemContentPadding, _emotion.tabsTokens.fontFamily, _emotion.tabsTokens.fontSize, _emotion.tabsTokens.fontStyle, _emotion.tabsTokens.fontWeight, _emotion.tabsTokens.letterSpacing, _emotion.tabsTokens.lineHeight, _emotion.tabsTokens.valueFontFamily, _emotion.tabsTokens.valueFontSize, _emotion.tabsTokens.valueFontStyle, _emotion.tabsTokens.valueFontWeight, _emotion.tabsTokens.valueLetterSpacing, _emotion.tabsTokens.valueLineHeight)
|
|
@@ -15,7 +15,7 @@ var config = exports.config = {
|
|
|
15
15
|
},
|
|
16
16
|
variations: {
|
|
17
17
|
size: {
|
|
18
|
-
s: /*#__PURE__*/(0, _emotion.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 100%;\n ", ": 7.187rem;\n ", ": 0.625rem;\n ", ": 0.
|
|
18
|
+
s: /*#__PURE__*/(0, _emotion.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 100%;\n ", ": 7.187rem;\n ", ": 0.625rem;\n ", ": 0.75rem;\n ", ": 0.125rem;\n ", ": 0.625rem 0.625rem 0 0;\n ", ": 0.688rem;\n ", ": 0.875rem;\n ", ": 3.125rem;\n ", ": 2rem;\n ", ": 0.75rem;\n ", ": 0.875rem;\n ", ": 0.75rem;\n ", ": 0.25rem;\n ", ": 0.875rem;\n ", ": 0.75rem;\n ", ": 0.875rem;\n ", ": 0rem;\n ", ": 0.688rem;\n ", ": 0.75rem;\n ", ": 1.25rem;\n ", ": 0.25rem;\n ", ": 0.5rem;\n ", ": 0.25rem;\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n ", ": 0.375rem;\n ", ": 0.125rem;\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n\n ", ": 0.375rem;\n ", ": 0.375rem;\n ", ": 0 0 0 0;\n /* stylelint-disable-next-line number-max-precision */\n ", ": 0.3125rem auto auto -0.6875rem;\n ", ": 0 0 auto auto;\n ", ": 0.25rem -0.625rem auto auto;\n ", ": 1.063rem auto auto -0.75rem;\n ", ": 1.063rem -0.75rem auto auto;\n ", ": 1.063rem -2.125rem auto auto;\n\n ", ": 0.375rem;\n ", ": 0.125rem;\n\n ", ": -0.688rem -0.5rem;\n ", ": 2.375rem;\n ", ": -0.751rem -2rem auto auto;\n ", ": 0.062rem -2.063rem auto auto;\n\n ", ": 0.25rem;\n ", ": var(--plasma-typo-body-xs-font-family);\n ", ": var(--plasma-typo-body-xs-font-size);\n ", ": var(--plasma-typo-body-xs-font-style);\n ", ": var(--plasma-typo-body-xs-font-weight);\n ", ": var(--plasma-typo-body-xs-letter-spacing);\n ", ": var(--plasma-typo-body-xs-line-height);\n "])), _emotion.textAreaTokens.inputWidth, _emotion.textAreaTokens.inputHeight, _emotion.textAreaTokens.inputMinHeight, _emotion.textAreaTokens.borderRadius, _emotion.textAreaTokens.borderSize, _emotion.textAreaTokens.borderRadiusWithHelpers, _emotion.textAreaTokens.inputPaddingTop, _emotion.textAreaTokens.inputPaddingRight, _emotion.textAreaTokens.inputPaddingRightWithRightContent, _emotion.textAreaTokens.clearInputPaddingRightWithRightContent, _emotion.textAreaTokens.inputPaddingBottom, _emotion.textAreaTokens.inputPaddingLeft, _emotion.textAreaTokens.helpersPaddingTop, _emotion.textAreaTokens.clearHelpersPaddingTop, _emotion.textAreaTokens.helpersPaddingRight, _emotion.textAreaTokens.helpersPaddingBottom, _emotion.textAreaTokens.helpersPaddingLeft, _emotion.textAreaTokens.helpersOffset, _emotion.textAreaTokens.rightContentTop, _emotion.textAreaTokens.rightContentRight, _emotion.textAreaTokens.rightContentHeight, _emotion.textAreaTokens.clearLabelMarginBottom, _emotion.textAreaTokens.labelMarginBottom, _emotion.textAreaTokens.clearLabelMarginBottom, _emotion.textAreaTokens.labelOuterFontSize, _emotion.textAreaTokens.labelInnerFontFamily, _emotion.textAreaTokens.labelInnerFontSize, _emotion.textAreaTokens.labelInnerFontStyle, _emotion.textAreaTokens.labelInnerFontWeight, _emotion.textAreaTokens.labelInnerLetterSpacing, _emotion.textAreaTokens.labelInnerLineHeight, _emotion.textAreaTokens.labelInnerTop, _emotion.textAreaTokens.labelInnerMarginBottom, _emotion.textAreaTokens.inputFontFamily, _emotion.textAreaTokens.inputFontSize, _emotion.textAreaTokens.inputFontStyle, _emotion.textAreaTokens.inputFontWeight, _emotion.textAreaTokens.inputLetterSpacing, _emotion.textAreaTokens.inputLineHeight, _emotion.textAreaTokens.helpersFontFamily, _emotion.textAreaTokens.helpersFontSize, _emotion.textAreaTokens.helpersFontStyle, _emotion.textAreaTokens.helpersFontWeight, _emotion.textAreaTokens.helpersLetterSpacing, _emotion.textAreaTokens.helpersLineHeight, _emotion.textAreaTokens.indicatorSizeInner, _emotion.textAreaTokens.indicatorSizeOuter, _emotion.textAreaTokens.indicatorLabelPlacementInner, _emotion.textAreaTokens.indicatorLabelPlacementOuter, _emotion.textAreaTokens.indicatorLabelPlacementInnerRight, _emotion.textAreaTokens.indicatorLabelPlacementOuterRight, _emotion.textAreaTokens.clearIndicatorLabelPlacementInner, _emotion.textAreaTokens.clearIndicatorLabelPlacementInnerRight, _emotion.textAreaTokens.clearIndicatorHintInnerRight, _emotion.textAreaTokens.scrollbarWidth, _emotion.textAreaTokens.scrollbarBorderWidth, _emotion.textAreaTokens.hintMargin, _emotion.textAreaTokens.hintTargetSize, _emotion.textAreaTokens.hintInnerLabelPlacementOffset, _emotion.textAreaTokens.clearHintInnerLabelPlacementOffset, _emotion.textAreaTokens.titleCaptionInnerLabelOffset, _emotion.textAreaTokens.titleCaptionFontFamily, _emotion.textAreaTokens.titleCaptionFontSize, _emotion.textAreaTokens.titleCaptionFontStyle, _emotion.textAreaTokens.titleCaptionFontWeight, _emotion.textAreaTokens.titleCaptionLetterSpacing, _emotion.textAreaTokens.titleCaptionLineHeight)
|
|
19
19
|
},
|
|
20
20
|
view: {
|
|
21
21
|
"default": /*#__PURE__*/(0, _emotion.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--outline-solid-primary);\n ", ": var(--outline-solid-primary-hover);\n ", ": var(--outline-accent);\n ", ": var(--surface-solid-card);\n ", ": var(--surface-solid-card-hover);\n ", ": var(--surface-solid-card-active);\n ", ": var(--surface-solid-card);\n ", ": var(--text-primary);\n ", ": var(--text-primary);\n ", ": var(--text-primary);\n ", ": var(--text-accent);\n ", ": var(--text-secondary);\n ", ": var(--text-secondary);\n ", ": var(--text-secondary);\n ", ": var(--text-tertiary);\n ", ": var(--text-secondary);\n ", ": var(--text-secondary);\n ", ": var(--text-negative);\n ", ": var(--text-secondary);\n ", ": var(--text-accent);\n\n ", ": var(--surface-solid-default);\n ", ": var(--surface-solid-default-hover);\n ", ": var(--surface-solid-default-active);\n ", ": var(--surface-solid-primary);\n ", ": var(--surface-solid-primary-active);\n ", ": var(--surface-solid-primary-hover);\n\n ", ": var(--outline-solid-primary);\n ", ": var(--text-secondary);\n ", ": var(--surface-accent);\n ", ": var(--text-secondary);\n ", ": var(--text-secondary);\n "])), _emotion.textAreaTokens.borderColor, _emotion.textAreaTokens.borderColorHover, _emotion.textAreaTokens.borderColorFocus, _emotion.textAreaTokens.backgroundColor, _emotion.textAreaTokens.backgroundColorHover, _emotion.textAreaTokens.backgroundColorActive, _emotion.textAreaTokens.backgroundColorFocus, _emotion.textAreaTokens.inputColor, _emotion.textAreaTokens.clearInputColor, _emotion.textAreaTokens.inputColorFocus, _emotion.textAreaTokens.inputCaretColor, _emotion.textAreaTokens.placeholderColor, _emotion.textAreaTokens.placeholderColorFocus, _emotion.textAreaTokens.clearPlaceholderColor, _emotion.textAreaTokens.clearPlaceholderColorFocus, _emotion.textAreaTokens.leftHelperColor, _emotion.textAreaTokens.rightHelperColor, _emotion.textAreaTokens.indicatorColor, _emotion.textAreaTokens.optionalColor, _emotion.textAreaTokens.rightContentColor, _emotion.textAreaTokens.scrollbarThumbBackgroundColor, _emotion.textAreaTokens.scrollbarThumbBackgroundColorHover, _emotion.textAreaTokens.scrollbarThumbBackgroundColorActive, _emotion.textAreaTokens.scrollbarTrackBackgroundColor, _emotion.textAreaTokens.scrollbarTrackBackgroundColorActive, _emotion.textAreaTokens.scrollbarTrackBackgroundColorHover, _emotion.textAreaTokens.dividerColor, _emotion.textAreaTokens.dividerColorHover, _emotion.textAreaTokens.dividerColorFocus, _emotion.textAreaTokens.titleCaptionColor, _emotion.textAreaTokens.hintIconColor),
|
|
@@ -19,7 +19,7 @@ var config = exports.config = {
|
|
|
19
19
|
negative: /*#__PURE__*/(0, _emotion.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--text-negative);\n ", ": var(--surface-solid-card);\n ", ": var(--surface-solid-card-active);\n ", ": var(--text-accent);\n ", ": var(--text-secondary);\n ", ": var(--text-negative);\n ", ": var(--text-tertiary);\n ", ": var(--text-negative);\n ", ": var(--text-secondary);\n ", ": var(--text-secondary);\n ", ": var(--text-primary);\n ", ": var(--text-negative);\n ", ": var(--text-secondary);\n ", ": var(--text-secondary);\n\n ", ": var(--surface-negative);\n ", ": var(--surface-negative);\n ", ": var(--surface-accent);\n\n ", ": var(--text-secondary);\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-secondary);\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-secondary-hover);\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-secondary-active);\n ", ": var(--surface-transparent-secondary);\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-secondary);\n ", ": var(--text-primary);\n ", ": 0.72;\n\n ", ": var(--text-negative);\n ", ": var(--text-negative);\n ", ": var(--surface-negative);\n ", ": var(--text-tertiary);\n "])), _emotion.textFieldTokens.color, _emotion.textFieldTokens.clearColor, _emotion.textFieldTokens.backgroundColor, _emotion.textFieldTokens.backgroundColorFocus, _emotion.textFieldTokens.caretColor, _emotion.textFieldTokens.placeholderColor, _emotion.textFieldTokens.clearPlaceholderColor, _emotion.textFieldTokens.placeholderColorFocus, _emotion.textFieldTokens.clearPlaceholderColorFocus, _emotion.textFieldTokens.textBeforeColor, _emotion.textFieldTokens.textAfterColor, _emotion.textFieldTokens.labelColor, _emotion.textFieldTokens.leftHelperColor, _emotion.textFieldTokens.titleCaptionColor, _emotion.textFieldTokens.hintIconColor, _emotion.textFieldTokens.dividerColor, _emotion.textFieldTokens.dividerColorHover, _emotion.textFieldTokens.dividerColorFocus, _emotion.textFieldTokens.chipCloseIconColor, _emotion.textFieldTokens.chipColor, _emotion.textFieldTokens.chipBackground, _emotion.textFieldTokens.chipColorHover, _emotion.textFieldTokens.chipBackgroundHover, _emotion.textFieldTokens.chipColorActive, _emotion.textFieldTokens.chipBackgroundActive, _emotion.textFieldTokens.chipBackgroundReadOnly, _emotion.textFieldTokens.chipColorReadOnly, _emotion.textFieldTokens.chipBackgroundReadOnlyHover, _emotion.textFieldTokens.chipColorReadOnlyHover, _emotion.textFieldTokens.chipOpacityReadonly, _emotion.textFieldTokens.borderColor, _emotion.textFieldTokens.focusColor, _emotion.textFieldTokens.indicatorColor, _emotion.textFieldTokens.optionalColor)
|
|
20
20
|
},
|
|
21
21
|
size: {
|
|
22
|
-
s: /*#__PURE__*/(0, _emotion.css)(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 2.5rem;\n ", ": 0.6875rem 0.75rem 0.6875rem 0.75rem;\n ", ": 0.375rem;\n ", ": 0.
|
|
22
|
+
s: /*#__PURE__*/(0, _emotion.css)(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 2.5rem;\n ", ": 0.6875rem 0.75rem 0.6875rem 0.75rem;\n ", ": 0.375rem;\n ", ": 0.75rem;\n ", ": 0.125rem;\n\n ", ": -0.1875rem 0.25rem -0.1875rem -0.125rem;\n ", ": -0.1875rem -0.125rem -0.1875rem 0.75rem;\n\n ", ": 0 0.25rem 0 0;\n ", ": 0 0 0 0.25rem;\n\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": 0.5rem;\n ", ": 0.5rem;\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n\n ", ": -0.688rem -0.5rem;\n ", ": 2.375rem;\n ", ": -0.751rem -2rem auto auto;\n ", ": 0.062rem -2.063rem auto auto;\n\n ", ": 0.25rem;\n ", ": var(--plasma-typo-body-xs-font-family);\n ", ": var(--plasma-typo-body-xs-font-size);\n ", ": var(--plasma-typo-body-xs-font-style);\n ", ": var(--plasma-typo-body-xs-font-weight);\n ", ": var(--plasma-typo-body-xs-letter-spacing);\n ", ": var(--plasma-typo-body-xs-line-height);\n\n ", ": 0.25rem;\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n\n ", ": 0.3125rem 0 0 0;\n ", ": 1.0625rem 0 0.3125rem 0;\n\n ", ": 0.25rem;\n ", ": 0.25rem;\n ", ": auto;\n ", ": 1.75rem;\n ", ": 0 0.5rem 0 0.75rem;\n ", ": 0.375rem;\n ", ": 0rem;\n ", ": 1rem;\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n\n ", ": 0.375rem;\n ", ": 0.375rem;\n ", ": 0 0 0 0;\n ", ": 0.3125rem auto auto -0.6875rem;\n ", ": 0 0 auto auto;\n ", ": 0.25rem -0.625rem auto auto;\n ", ": 1.063rem auto auto -0.75rem;\n ", ": 1.063rem -0.75rem auto auto;\n "])), _emotion.textFieldTokens.height, _emotion.textFieldTokens.padding, _emotion.textFieldTokens.paddingWithChips, _emotion.textFieldTokens.borderRadius, _emotion.textFieldTokens.borderWidth, _emotion.textFieldTokens.leftContentMargin, _emotion.textFieldTokens.rightContentMargin, _emotion.textFieldTokens.textBeforeMargin, _emotion.textFieldTokens.textAfterMargin, _emotion.textFieldTokens.fontFamily, _emotion.textFieldTokens.fontSize, _emotion.textFieldTokens.fontStyle, _emotion.textFieldTokens.fontWeight, _emotion.textFieldTokens.letterSpacing, _emotion.textFieldTokens.lineHeight, _emotion.textFieldTokens.labelOffset, _emotion.textFieldTokens.clearLabelOffset, _emotion.textFieldTokens.labelFontFamily, _emotion.textFieldTokens.labelFontSize, _emotion.textFieldTokens.labelFontStyle, _emotion.textFieldTokens.labelFontWeight, _emotion.textFieldTokens.labelLetterSpacing, _emotion.textFieldTokens.labelLineHeight, _emotion.textFieldTokens.hintMargin, _emotion.textFieldTokens.hintTargetSize, _emotion.textFieldTokens.hintInnerLabelPlacementOffset, _emotion.textFieldTokens.clearHintInnerLabelPlacementOffset, _emotion.textFieldTokens.titleCaptionInnerLabelOffset, _emotion.textFieldTokens.titleCaptionFontFamily, _emotion.textFieldTokens.titleCaptionFontSize, _emotion.textFieldTokens.titleCaptionFontStyle, _emotion.textFieldTokens.titleCaptionFontWeight, _emotion.textFieldTokens.titleCaptionLetterSpacing, _emotion.textFieldTokens.titleCaptionLineHeight, _emotion.textFieldTokens.leftHelperOffset, _emotion.textFieldTokens.leftHelperFontFamily, _emotion.textFieldTokens.leftHelperFontSize, _emotion.textFieldTokens.leftHelperFontStyle, _emotion.textFieldTokens.leftHelperFontWeight, _emotion.textFieldTokens.leftHelperLetterSpacing, _emotion.textFieldTokens.leftHelperLineHeight, _emotion.textFieldTokens.labelInnerPadding, _emotion.textFieldTokens.contentLabelInnerPadding, _emotion.textFieldTokens.chipGap, _emotion.textFieldTokens.chipBorderRadius, _emotion.textFieldTokens.chipWidth, _emotion.textFieldTokens.chipHeight, _emotion.textFieldTokens.chipPadding, _emotion.textFieldTokens.chipClearContentMarginLeft, _emotion.textFieldTokens.chipClearContentMarginRight, _emotion.textFieldTokens.chipCloseIconSize, _emotion.textFieldTokens.chipFontFamily, _emotion.textFieldTokens.chipFontSize, _emotion.textFieldTokens.chipFontStyle, _emotion.textFieldTokens.chipFontWeight, _emotion.textFieldTokens.chipLetterSpacing, _emotion.textFieldTokens.chipLineHeight, _emotion.textFieldTokens.indicatorSizeInner, _emotion.textFieldTokens.indicatorSizeOuter, _emotion.textFieldTokens.indicatorLabelPlacementInner, _emotion.textFieldTokens.indicatorLabelPlacementOuter, _emotion.textFieldTokens.indicatorLabelPlacementInnerRight, _emotion.textFieldTokens.indicatorLabelPlacementOuterRight, _emotion.textFieldTokens.clearIndicatorLabelPlacementInner, _emotion.textFieldTokens.clearIndicatorLabelPlacementInnerRight)
|
|
23
23
|
},
|
|
24
24
|
labelPlacement: {
|
|
25
25
|
outer: /*#__PURE__*/(0, _emotion.css)(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral([""])))
|
|
@@ -14,7 +14,7 @@ var config = exports.config = {
|
|
|
14
14
|
},
|
|
15
15
|
variations: {
|
|
16
16
|
view: {
|
|
17
|
-
"default": /*#__PURE__*/(0, _emotion.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--text-accent);\n ", ": var(--text-accent-hover);\n ", ": var(--text-accent-active);\n ", ": var(--text-primary);\n ", ": var(--text-primary);\n ", ": var(--surface-solid-primary);\n ", ": var(--surface-transparent-accent
|
|
17
|
+
"default": /*#__PURE__*/(0, _emotion.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--text-accent);\n ", ": var(--text-accent-hover);\n ", ": var(--text-accent-active);\n ", ": var(--text-primary);\n ", ": var(--text-primary);\n ", ": var(--surface-solid-primary);\n ", ": var(--surface-transparent-accent);\n ", ": var(--surface-solid-primary-active);\n ", ": var(--text-accent);\n ", ": var(--text-accent);\n ", ": 1;\n ", ": var(--text-secondary);\n ", ": var(--text-secondary);\n "])), _emotion.treeTokens.iconFolderColor, _emotion.treeTokens.arrowColor, _emotion.treeTokens.arrowColorHover, _emotion.treeTokens.arrowColorActive, _emotion.treeTokens.color, _emotion.treeTokens.colorSelected, _emotion.treeTokens.itemBackgroundColor, _emotion.treeTokens.itemBackgroundColorHover, _emotion.treeTokens.itemBackgroundColorActive, _emotion.treeTokens.checkboxBorderColor, _emotion.treeTokens.checkboxBackgroundColor, _emotion.treeTokens.itemDisabledOpacity, _emotion.treeTokens.itemDisabledBorderColor, _emotion.treeTokens.itemDisabledColor)
|
|
18
18
|
},
|
|
19
19
|
size: {
|
|
20
20
|
s: /*#__PURE__*/(0, _emotion.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 2.5rem;\n ", ": 0.75rem;\n ", ": 0.25rem;\n ", ": 1.875rem;\n ", ": 0.5rem;\n ", ": 0rem;\n ", ": 0rem;\n ", ": 0 0.375rem 0 0.5rem;\n ", ": 0 0 0 0;\n ", ": 0 0 0 0;\n ", ": 1.5rem;\n ", ": 0 0 0 0.5rem;\n ", ": 1.5rem;\n ", ": 1.25rem;\n ", ": 0.375rem;\n\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n "])), _emotion.treeTokens.itemHeight, _emotion.treeTokens.itemPadding, _emotion.treeTokens.itemPaddingTight, _emotion.treeTokens.itemIndent, _emotion.treeTokens.itemBorderRadius, _emotion.treeTokens.itemTop, _emotion.treeTokens.itemBottom, _emotion.treeTokens.iconFolderMargin, _emotion.treeTokens.switcherMargin, _emotion.treeTokens.switcherMarginInverted, _emotion.treeTokens.switcherSize, _emotion.treeTokens.checkboxMargin, _emotion.treeTokens.checkboxSize, _emotion.treeTokens.checkboxInnerSize, _emotion.treeTokens.checkboxBorderRadius, _emotion.treeTokens.fontFamily, _emotion.treeTokens.fontSize, _emotion.treeTokens.fontStyle, _emotion.treeTokens.fontWeight, _emotion.treeTokens.letterSpacing, _emotion.treeTokens.lineHeight)
|