@salutejs/sdds-cs 0.317.1-canary.2008.15410012369.0 → 0.317.1-canary.2013.15560496949.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/Accordion/Accordion.d.ts +9 -10
- package/components/Attach/Attach.d.ts +158 -159
- package/components/Autocomplete/Autocomplete.d.ts +352 -353
- package/components/Avatar/Avatar.d.ts +46 -47
- package/components/AvatarGroup/AvatarGroup.d.ts +1 -2
- package/components/Badge/Badge.d.ts +40 -41
- package/components/Breadcrumbs/Breadcrumbs.d.ts +3 -4
- package/components/Button/Button.d.ts +71 -71
- package/components/ButtonGroup/ButtonGroup.d.ts +0 -1
- package/components/Card/Card.d.ts +5 -6
- package/components/Carousel/Carousel.config.d.ts +14 -0
- package/components/Carousel/Carousel.config.js +23 -0
- package/components/Carousel/Carousel.d.ts +9 -0
- package/components/Carousel/Carousel.js +10 -0
- package/components/Carousel/index.d.ts +2 -0
- package/components/Carousel/index.js +19 -0
- package/components/Cell/Cell.d.ts +19 -20
- package/components/Checkbox/Checkbox.d.ts +1 -1
- package/components/Chip/Chip.d.ts +0 -1
- package/components/ChipGroup/ChipGroup.d.ts +0 -1
- package/components/Combobox/Combobox.config.js +3 -3
- package/components/Combobox/Combobox.d.ts +975 -951
- package/components/Counter/Counter.d.ts +0 -1
- package/components/DatePicker/DatePicker.d.ts +52 -54
- package/components/Divider/Divider.d.ts +0 -1
- package/components/Drawer/Drawer.d.ts +18 -19
- package/components/Dropdown/Dropdown.d.ts +52 -52
- package/components/Dropzone/Dropzone.d.ts +15 -16
- package/components/EmptyState/EmptyState.d.ts +0 -1
- package/components/Flow/Flow.d.ts +1 -2
- package/components/Grid/Grid.d.ts +0 -1
- package/components/IconButton/IconButton.d.ts +35 -36
- package/components/Image/Image.d.ts +3 -4
- package/components/Indicator/Indicator.d.ts +0 -1
- package/components/Link/Link.d.ts +1 -2
- package/components/Mask/Mask.d.ts +224 -225
- package/components/Notification/Notification.d.ts +7 -6
- package/components/Notification/Notification.js +3 -21
- package/components/Notification/index.d.ts +3 -2
- package/components/Notification/index.js +4 -3
- package/components/NumberFormat/NumberFormat.d.ts +1 -1
- package/components/NumberInput/NumberInput.d.ts +38 -39
- package/components/Pagination/Pagination.d.ts +0 -1
- package/components/Popover/Popover.d.ts +0 -1
- package/components/Price/Price.d.ts +0 -1
- package/components/Progress/Progress.d.ts +0 -1
- package/components/Radiobox/Radiobox.d.ts +1 -1
- package/components/Range/Range.d.ts +105 -106
- package/components/Rating/Rating.d.ts +13 -14
- package/components/Segment/Segment.d.ts +8 -9
- package/components/Select/Select.config.js +3 -3
- package/components/Select/Select.d.ts +247 -244
- package/components/Sheet/Sheet.d.ts +0 -1
- package/components/Skeleton/Skeleton.d.ts +4 -5
- package/components/Slider/Slider.d.ts +96 -105
- package/components/Spinner/Spinner.d.ts +9 -14
- package/components/Steps/Steps.d.ts +0 -1
- package/components/Switch/Switch.d.ts +1 -1
- package/components/Table/Table.config.js +3 -3
- package/components/Table/Table.d.ts +0 -1
- package/components/Tabs/TabItem.d.ts +23 -23
- package/components/Tabs/Tabs.d.ts +1 -1
- package/components/TextArea/TextArea.d.ts +205 -206
- package/components/TextField/TextField.d.ts +224 -225
- package/components/Toast/Toast.d.ts +0 -1
- package/components/ToastNew/ToastNew.d.ts +1 -1
- package/components/Tokens/Colors/Colors.styles.d.ts +25 -26
- package/components/Tokens/Typography/Typography.styles.d.ts +23 -24
- package/components/Toolbar/Toolbar.d.ts +5 -6
- package/components/Tree/Tree.d.ts +0 -1
- package/components/Typography/Typography.d.ts +204 -205
- package/components/ViewContainer/ViewContainer.d.ts +0 -1
- package/emotion/cjs/components/Carousel/Carousel.config.js +23 -0
- package/emotion/cjs/components/Carousel/Carousel.js +10 -0
- package/emotion/cjs/components/Carousel/Carousel.stories.tsx +138 -0
- package/emotion/cjs/components/Carousel/index.js +19 -0
- package/emotion/cjs/components/Combobox/Combobox.config.js +3 -3
- package/emotion/cjs/components/Combobox/Combobox.stories.tsx +186 -0
- package/emotion/cjs/components/DatePicker/DatePicker.stories.tsx +10 -2
- package/emotion/cjs/components/Notification/Notification.js +3 -21
- package/emotion/cjs/components/Notification/Notification.stories.tsx +3 -8
- package/emotion/cjs/components/Notification/index.js +4 -3
- package/emotion/cjs/components/Select/Select.config.js +3 -3
- package/emotion/cjs/components/Select/Select.stories.tsx +186 -0
- package/emotion/cjs/components/Table/Table.config.js +3 -3
- package/emotion/cjs/index.js +11 -0
- package/emotion/es/components/Carousel/Carousel.config.js +17 -0
- package/emotion/es/components/Carousel/Carousel.js +5 -0
- package/emotion/es/components/Carousel/Carousel.stories.tsx +138 -0
- package/emotion/es/components/Carousel/index.js +2 -0
- package/emotion/es/components/Combobox/Combobox.config.js +3 -3
- package/emotion/es/components/Combobox/Combobox.stories.tsx +186 -0
- package/emotion/es/components/DatePicker/DatePicker.stories.tsx +10 -2
- package/emotion/es/components/Notification/Notification.js +4 -5
- package/emotion/es/components/Notification/Notification.stories.tsx +3 -8
- package/emotion/es/components/Notification/index.js +2 -1
- package/emotion/es/components/Select/Select.config.js +3 -3
- package/emotion/es/components/Select/Select.stories.tsx +186 -0
- package/emotion/es/components/Table/Table.config.js +3 -3
- package/emotion/es/index.js +1 -0
- package/es/components/Carousel/Carousel.config.js +17 -0
- package/es/components/Carousel/Carousel.js +5 -0
- package/es/components/Carousel/index.js +2 -0
- package/es/components/Combobox/Combobox.config.js +3 -3
- package/es/components/Notification/Notification.js +4 -5
- package/es/components/Notification/index.js +2 -1
- package/es/components/Select/Select.config.js +3 -3
- package/es/components/Table/Table.config.js +3 -3
- package/es/index.js +1 -0
- package/index.d.ts +1 -0
- package/index.js +11 -0
- package/mixins/index.d.ts +1 -2
- package/package.json +7 -7
@@ -0,0 +1,23 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.config = void 0;
|
7
|
+
var _emotion = /*#__PURE__*/require("@salutejs/plasma-new-hope/emotion");
|
8
|
+
var _templateObject, _templateObject2;
|
9
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
10
|
+
var config = exports.config = {
|
11
|
+
defaults: {
|
12
|
+
view: 'default',
|
13
|
+
size: 's'
|
14
|
+
},
|
15
|
+
variations: {
|
16
|
+
view: {
|
17
|
+
"default": /*#__PURE__*/(0, _emotion.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--surface-transparent-tertiary);\n ", ": var(--surface-solid-default);\n "])), _emotion.carouselNewTokens.paginationDotBackground, _emotion.carouselNewTokens.paginationDotActiveBackground)
|
18
|
+
},
|
19
|
+
size: {
|
20
|
+
s: /*#__PURE__*/(0, _emotion.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral([""])))
|
21
|
+
}
|
22
|
+
}
|
23
|
+
};
|
@@ -0,0 +1,10 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.Carousel = void 0;
|
7
|
+
var _emotion = /*#__PURE__*/require("@salutejs/plasma-new-hope/emotion");
|
8
|
+
var _Carousel = /*#__PURE__*/require("./Carousel.config");
|
9
|
+
var mergedConfig = /*#__PURE__*/(0, _emotion.mergeConfig)(_emotion.carouselNewConfig, _Carousel.config);
|
10
|
+
var Carousel = exports.Carousel = /*#__PURE__*/(0, _emotion.component)(mergedConfig);
|
@@ -0,0 +1,138 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import type { ComponentProps } from 'react';
|
3
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
4
|
+
import styled from 'styled-components';
|
5
|
+
import { getConfigVariations, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
|
6
|
+
|
7
|
+
import { config } from './Carousel.config';
|
8
|
+
import { Carousel } from './Carousel';
|
9
|
+
|
10
|
+
import { CarouselItem } from './index';
|
11
|
+
|
12
|
+
type StoryCarouselProps = ComponentProps<typeof Carousel> & {
|
13
|
+
slides: number;
|
14
|
+
visibleDots: number;
|
15
|
+
paginationDisabled: boolean;
|
16
|
+
paginationCentered: boolean;
|
17
|
+
};
|
18
|
+
|
19
|
+
const { views, sizes } = getConfigVariations(config);
|
20
|
+
|
21
|
+
const meta: Meta<StoryCarouselProps> = {
|
22
|
+
title: 'Navigation/Carousel',
|
23
|
+
component: Carousel,
|
24
|
+
decorators: [InSpacingDecorator],
|
25
|
+
argTypes: {
|
26
|
+
view: {
|
27
|
+
options: views,
|
28
|
+
control: {
|
29
|
+
type: 'select',
|
30
|
+
},
|
31
|
+
},
|
32
|
+
size: {
|
33
|
+
options: sizes,
|
34
|
+
control: {
|
35
|
+
type: 'inline-radio',
|
36
|
+
},
|
37
|
+
},
|
38
|
+
align: {
|
39
|
+
options: ['start', 'center', 'end', 'activeDirection'],
|
40
|
+
control: {
|
41
|
+
type: 'inline-radio',
|
42
|
+
},
|
43
|
+
},
|
44
|
+
slides: {
|
45
|
+
control: 'number',
|
46
|
+
},
|
47
|
+
visibleDots: {
|
48
|
+
control: 'number',
|
49
|
+
},
|
50
|
+
controlArrowsDisabled: {
|
51
|
+
control: 'boolean',
|
52
|
+
},
|
53
|
+
paginationDisabled: {
|
54
|
+
control: 'boolean',
|
55
|
+
},
|
56
|
+
paginationCentered: {
|
57
|
+
control: 'boolean',
|
58
|
+
},
|
59
|
+
},
|
60
|
+
args: {
|
61
|
+
view: 'default',
|
62
|
+
size: 's',
|
63
|
+
align: 'center',
|
64
|
+
slides: 10,
|
65
|
+
controlArrowsDisabled: false,
|
66
|
+
paginationDisabled: false,
|
67
|
+
paginationCentered: false,
|
68
|
+
},
|
69
|
+
parameters: {
|
70
|
+
controls: {
|
71
|
+
include: [
|
72
|
+
'align',
|
73
|
+
'visibleDots',
|
74
|
+
'slides',
|
75
|
+
'controlArrowsDisabled',
|
76
|
+
'paginationDisabled',
|
77
|
+
'paginationCentered',
|
78
|
+
'gap',
|
79
|
+
],
|
80
|
+
},
|
81
|
+
},
|
82
|
+
};
|
83
|
+
|
84
|
+
export default meta;
|
85
|
+
|
86
|
+
const StyledCard = styled.div`
|
87
|
+
display: flex;
|
88
|
+
align-items: center;
|
89
|
+
justify-content: center;
|
90
|
+
position: relative;
|
91
|
+
border-radius: 8px;
|
92
|
+
width: 400px;
|
93
|
+
height: 370px;
|
94
|
+
background-color: #add8e6;
|
95
|
+
font-size: 30px;
|
96
|
+
`;
|
97
|
+
|
98
|
+
const StoryDefault = ({
|
99
|
+
align,
|
100
|
+
visibleDots,
|
101
|
+
slides,
|
102
|
+
paginationDisabled,
|
103
|
+
paginationCentered,
|
104
|
+
...rest
|
105
|
+
}: StoryCarouselProps) => {
|
106
|
+
const items = Array(slides)
|
107
|
+
.fill(1)
|
108
|
+
.map((_, i) => ({
|
109
|
+
id: i,
|
110
|
+
title: i,
|
111
|
+
}));
|
112
|
+
|
113
|
+
return (
|
114
|
+
<>
|
115
|
+
<div style={{ width: '600px' }}>
|
116
|
+
<Carousel
|
117
|
+
scrollAlign={align}
|
118
|
+
paginationOptions={{
|
119
|
+
disabled: paginationDisabled,
|
120
|
+
visibleDots,
|
121
|
+
centered: paginationCentered,
|
122
|
+
}}
|
123
|
+
{...rest}
|
124
|
+
>
|
125
|
+
{items.map((item, i) => (
|
126
|
+
<CarouselItem key={i}>
|
127
|
+
<StyledCard>{item.title}</StyledCard>
|
128
|
+
</CarouselItem>
|
129
|
+
))}
|
130
|
+
</Carousel>
|
131
|
+
</div>
|
132
|
+
</>
|
133
|
+
);
|
134
|
+
};
|
135
|
+
|
136
|
+
export const Default: StoryObj<StoryCarouselProps> = {
|
137
|
+
render: (args) => <StoryDefault {...args} />,
|
138
|
+
};
|
@@ -0,0 +1,19 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
Object.defineProperty(exports, "Carousel", {
|
7
|
+
enumerable: true,
|
8
|
+
get: function get() {
|
9
|
+
return _Carousel.Carousel;
|
10
|
+
}
|
11
|
+
});
|
12
|
+
Object.defineProperty(exports, "CarouselItem", {
|
13
|
+
enumerable: true,
|
14
|
+
get: function get() {
|
15
|
+
return _emotion.CarouselItem;
|
16
|
+
}
|
17
|
+
});
|
18
|
+
var _emotion = /*#__PURE__*/require("@salutejs/plasma-new-hope/emotion");
|
19
|
+
var _Carousel = /*#__PURE__*/require("./Carousel");
|
@@ -15,11 +15,11 @@ var config = exports.config = {
|
|
15
15
|
},
|
16
16
|
variations: {
|
17
17
|
view: {
|
18
|
-
"default": /*#__PURE__*/(0, _emotion.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--text-primary);\n\n ", ": var(--text-secondary);\n ", ": var(--text-tertiary);\n ", ": var(--text-secondary);\n ", ": var(--text-tertiary);\n\n ", ": var(--surface-solid-card);\n ", ": var(--surface-solid-card);\n ", ": var(--text-accent);\n ", ": var(--text-secondary);\n ", ": var(--text-secondary);\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": var(--text-accent);\n\n ", ": var(--outline-solid-primary);\n ", ": var(--outline-solid-primary-hover);\n ", ": var(--outline-accent);\n\n ", ": var(--text-secondary);\n ", ": var(--text-secondary-hover);\n ", ": var(--text-secondary-active);\n ", ": var(--text-accent);\n ", ": #1A9E32;\n ", ": var(--text-accent-active);\n\n ", ": var(--surface-negative);\n ", ": var(--text-tertiary);\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 ", ": var(--surface-solid-primary);\n\n ", ": var(--text-accent);\n ", ": #1A9E32;\n ", ": var(--surface-transparent-accent);\n "])), _emotion.comboboxNewTokens.textFieldColor, _emotion.comboboxNewTokens.textFieldClearColor, _emotion.comboboxNewTokens.textFieldPlaceholderColor, _emotion.comboboxNewTokens.textFieldPlaceholderColorFocus, _emotion.comboboxNewTokens.textFieldClearPlaceholderColor, _emotion.comboboxNewTokens.textFieldClearPlaceholderColorFocus, _emotion.comboboxNewTokens.textFieldBackgroundColor, _emotion.comboboxNewTokens.textFieldBackgroundColorFocus, _emotion.comboboxNewTokens.textFieldCaretColor, _emotion.comboboxNewTokens.textFieldTextBeforeColor, _emotion.comboboxNewTokens.textFieldTextAfterColor, _emotion.comboboxNewTokens.textFieldLabelColor, _emotion.comboboxNewTokens.textFieldLeftHelperColor, _emotion.comboboxNewTokens.textFieldFocusColor, _emotion.comboboxNewTokens.textFieldBorderColor, _emotion.comboboxNewTokens.textFieldBorderColorHover, _emotion.comboboxNewTokens.textFieldBorderColorFocus, _emotion.comboboxNewTokens.textFieldContentSlotColor, _emotion.comboboxNewTokens.textFieldContentSlotColorHover, _emotion.comboboxNewTokens.textFieldContentSlotColorActive, _emotion.comboboxNewTokens.textFieldContentSlotRightColor, _emotion.comboboxNewTokens.textFieldContentSlotRightColorHover, _emotion.comboboxNewTokens.textFieldContentSlotRightColorActive, _emotion.comboboxNewTokens.textFieldIndicatorColor, _emotion.comboboxNewTokens.textFieldOptionalColor, _emotion.comboboxNewTokens.textFieldChipCloseIconColor, _emotion.comboboxNewTokens.textFieldChipColor, _emotion.comboboxNewTokens.textFieldChipBackground, _emotion.comboboxNewTokens.textFieldChipColorHover, _emotion.comboboxNewTokens.textFieldChipBackgroundHover, _emotion.comboboxNewTokens.textFieldChipColorActive, _emotion.comboboxNewTokens.textFieldChipBackgroundActive, _emotion.comboboxNewTokens.textFieldChipBackgroundReadOnly, _emotion.comboboxNewTokens.textFieldChipColorReadOnly, _emotion.comboboxNewTokens.textFieldChipBackgroundReadOnlyHover, _emotion.comboboxNewTokens.textFieldChipColorReadOnlyHover, _emotion.comboboxNewTokens.textFieldChipOpacityReadonly, _emotion.comboboxNewTokens.dropdownBorderColor, _emotion.comboboxNewTokens.disclosureIconColor, _emotion.comboboxNewTokens.disclosureIconColorHover, _emotion.comboboxNewTokens.itemBackgroundHover),
|
19
|
-
negative: /*#__PURE__*/(0, _emotion.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--text-primary);\n\n ", ": var(--text-secondary);\n ", ": var(--text-tertiary);\n ", ": var(--text-secondary);\n ", ": var(--text-tertiary);\n\n ", ": var(--surface-solid-card);\n ", ": var(--surface-solid-card);\n ", ": var(--text-accent);\n ", ": var(--text-secondary);\n ", ": var(--text-secondary);\n ", ": var(--text-primary);\n ", ": var(--text-negative);\n ", ": var(--text-accent);\n\n ", ": var(--outline-negative);\n ", ": var(--outline-negative-hover);\n ", ": var(--outline-accent);\n\n ", ": var(--text-secondary);\n ", ": var(--text-secondary-hover);\n ", ": var(--text-secondary-active);\n ", ": var(--text-accent);\n ", ": #1A9E32;\n ", ": var(--text-accent-active);\n\n ", ": var(--surface-negative);\n ", ": var(--text-tertiary);\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 ", ": var(--surface-solid-primary);\n\n ", ": var(--text-accent);\n ", ": #1A9E32;\n ", ": var(--surface-transparent-accent);\n "])), _emotion.comboboxNewTokens.textFieldColor, _emotion.comboboxNewTokens.textFieldClearColor, _emotion.comboboxNewTokens.textFieldPlaceholderColor, _emotion.comboboxNewTokens.textFieldPlaceholderColorFocus, _emotion.comboboxNewTokens.textFieldClearPlaceholderColor, _emotion.comboboxNewTokens.textFieldClearPlaceholderColorFocus, _emotion.comboboxNewTokens.textFieldBackgroundColor, _emotion.comboboxNewTokens.textFieldBackgroundColorFocus, _emotion.comboboxNewTokens.textFieldCaretColor, _emotion.comboboxNewTokens.textFieldTextBeforeColor, _emotion.comboboxNewTokens.textFieldTextAfterColor, _emotion.comboboxNewTokens.textFieldLabelColor, _emotion.comboboxNewTokens.textFieldLeftHelperColor, _emotion.comboboxNewTokens.textFieldFocusColor, _emotion.comboboxNewTokens.textFieldBorderColor, _emotion.comboboxNewTokens.textFieldBorderColorHover, _emotion.comboboxNewTokens.textFieldBorderColorFocus, _emotion.comboboxNewTokens.textFieldContentSlotColor, _emotion.comboboxNewTokens.textFieldContentSlotColorHover, _emotion.comboboxNewTokens.textFieldContentSlotColorActive, _emotion.comboboxNewTokens.textFieldContentSlotRightColor, _emotion.comboboxNewTokens.textFieldContentSlotRightColorHover, _emotion.comboboxNewTokens.textFieldContentSlotRightColorActive, _emotion.comboboxNewTokens.textFieldIndicatorColor, _emotion.comboboxNewTokens.textFieldOptionalColor, _emotion.comboboxNewTokens.textFieldChipCloseIconColor, _emotion.comboboxNewTokens.textFieldChipColor, _emotion.comboboxNewTokens.textFieldChipBackground, _emotion.comboboxNewTokens.textFieldChipColorHover, _emotion.comboboxNewTokens.textFieldChipBackgroundHover, _emotion.comboboxNewTokens.textFieldChipColorActive, _emotion.comboboxNewTokens.textFieldChipBackgroundActive, _emotion.comboboxNewTokens.textFieldChipBackgroundReadOnly, _emotion.comboboxNewTokens.textFieldChipColorReadOnly, _emotion.comboboxNewTokens.textFieldChipBackgroundReadOnlyHover, _emotion.comboboxNewTokens.textFieldChipColorReadOnlyHover, _emotion.comboboxNewTokens.textFieldChipOpacityReadonly, _emotion.comboboxNewTokens.dropdownBorderColor, _emotion.comboboxNewTokens.disclosureIconColor, _emotion.comboboxNewTokens.disclosureIconColorHover, _emotion.comboboxNewTokens.itemBackgroundHover)
|
18
|
+
"default": /*#__PURE__*/(0, _emotion.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--text-primary);\n\n ", ": var(--text-secondary);\n ", ": var(--text-tertiary);\n ", ": var(--text-secondary);\n ", ": var(--text-tertiary);\n\n ", ": var(--surface-solid-card);\n ", ": var(--surface-solid-card);\n ", ": var(--text-accent);\n ", ": var(--text-secondary);\n ", ": var(--text-secondary);\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": var(--text-accent);\n\n ", ": var(--outline-solid-primary);\n ", ": var(--outline-solid-primary-hover);\n ", ": var(--outline-accent);\n\n ", ": var(--text-secondary);\n ", ": var(--text-secondary-hover);\n ", ": var(--text-secondary-active);\n ", ": var(--text-accent);\n ", ": #1A9E32;\n ", ": var(--text-accent-active);\n\n ", ": var(--surface-negative);\n ", ": var(--text-tertiary);\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 ", ": var(--surface-solid-primary);\n\n ", ": var(--text-accent);\n ", ": #1A9E32;\n ", ": var(--surface-transparent-accent);\n\n ", ": var(--surface-solid-primary);\n "])), _emotion.comboboxNewTokens.textFieldColor, _emotion.comboboxNewTokens.textFieldClearColor, _emotion.comboboxNewTokens.textFieldPlaceholderColor, _emotion.comboboxNewTokens.textFieldPlaceholderColorFocus, _emotion.comboboxNewTokens.textFieldClearPlaceholderColor, _emotion.comboboxNewTokens.textFieldClearPlaceholderColorFocus, _emotion.comboboxNewTokens.textFieldBackgroundColor, _emotion.comboboxNewTokens.textFieldBackgroundColorFocus, _emotion.comboboxNewTokens.textFieldCaretColor, _emotion.comboboxNewTokens.textFieldTextBeforeColor, _emotion.comboboxNewTokens.textFieldTextAfterColor, _emotion.comboboxNewTokens.textFieldLabelColor, _emotion.comboboxNewTokens.textFieldLeftHelperColor, _emotion.comboboxNewTokens.textFieldFocusColor, _emotion.comboboxNewTokens.textFieldBorderColor, _emotion.comboboxNewTokens.textFieldBorderColorHover, _emotion.comboboxNewTokens.textFieldBorderColorFocus, _emotion.comboboxNewTokens.textFieldContentSlotColor, _emotion.comboboxNewTokens.textFieldContentSlotColorHover, _emotion.comboboxNewTokens.textFieldContentSlotColorActive, _emotion.comboboxNewTokens.textFieldContentSlotRightColor, _emotion.comboboxNewTokens.textFieldContentSlotRightColorHover, _emotion.comboboxNewTokens.textFieldContentSlotRightColorActive, _emotion.comboboxNewTokens.textFieldIndicatorColor, _emotion.comboboxNewTokens.textFieldOptionalColor, _emotion.comboboxNewTokens.textFieldChipCloseIconColor, _emotion.comboboxNewTokens.textFieldChipColor, _emotion.comboboxNewTokens.textFieldChipBackground, _emotion.comboboxNewTokens.textFieldChipColorHover, _emotion.comboboxNewTokens.textFieldChipBackgroundHover, _emotion.comboboxNewTokens.textFieldChipColorActive, _emotion.comboboxNewTokens.textFieldChipBackgroundActive, _emotion.comboboxNewTokens.textFieldChipBackgroundReadOnly, _emotion.comboboxNewTokens.textFieldChipColorReadOnly, _emotion.comboboxNewTokens.textFieldChipBackgroundReadOnlyHover, _emotion.comboboxNewTokens.textFieldChipColorReadOnlyHover, _emotion.comboboxNewTokens.textFieldChipOpacityReadonly, _emotion.comboboxNewTokens.dropdownBorderColor, _emotion.comboboxNewTokens.disclosureIconColor, _emotion.comboboxNewTokens.disclosureIconColorHover, _emotion.comboboxNewTokens.itemBackgroundHover, _emotion.comboboxNewTokens.dividerColor),
|
19
|
+
negative: /*#__PURE__*/(0, _emotion.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--text-primary);\n\n ", ": var(--text-secondary);\n ", ": var(--text-tertiary);\n ", ": var(--text-secondary);\n ", ": var(--text-tertiary);\n\n ", ": var(--surface-solid-card);\n ", ": var(--surface-solid-card);\n ", ": var(--text-accent);\n ", ": var(--text-secondary);\n ", ": var(--text-secondary);\n ", ": var(--text-primary);\n ", ": var(--text-negative);\n ", ": var(--text-accent);\n\n ", ": var(--outline-negative);\n ", ": var(--outline-negative-hover);\n ", ": var(--outline-accent);\n\n ", ": var(--text-secondary);\n ", ": var(--text-secondary-hover);\n ", ": var(--text-secondary-active);\n ", ": var(--text-accent);\n ", ": #1A9E32;\n ", ": var(--text-accent-active);\n\n ", ": var(--surface-negative);\n ", ": var(--text-tertiary);\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 ", ": var(--surface-solid-primary);\n\n ", ": var(--text-accent);\n ", ": #1A9E32;\n ", ": var(--surface-transparent-accent);\n\n ", ": var(--surface-solid-primary);\n "])), _emotion.comboboxNewTokens.textFieldColor, _emotion.comboboxNewTokens.textFieldClearColor, _emotion.comboboxNewTokens.textFieldPlaceholderColor, _emotion.comboboxNewTokens.textFieldPlaceholderColorFocus, _emotion.comboboxNewTokens.textFieldClearPlaceholderColor, _emotion.comboboxNewTokens.textFieldClearPlaceholderColorFocus, _emotion.comboboxNewTokens.textFieldBackgroundColor, _emotion.comboboxNewTokens.textFieldBackgroundColorFocus, _emotion.comboboxNewTokens.textFieldCaretColor, _emotion.comboboxNewTokens.textFieldTextBeforeColor, _emotion.comboboxNewTokens.textFieldTextAfterColor, _emotion.comboboxNewTokens.textFieldLabelColor, _emotion.comboboxNewTokens.textFieldLeftHelperColor, _emotion.comboboxNewTokens.textFieldFocusColor, _emotion.comboboxNewTokens.textFieldBorderColor, _emotion.comboboxNewTokens.textFieldBorderColorHover, _emotion.comboboxNewTokens.textFieldBorderColorFocus, _emotion.comboboxNewTokens.textFieldContentSlotColor, _emotion.comboboxNewTokens.textFieldContentSlotColorHover, _emotion.comboboxNewTokens.textFieldContentSlotColorActive, _emotion.comboboxNewTokens.textFieldContentSlotRightColor, _emotion.comboboxNewTokens.textFieldContentSlotRightColorHover, _emotion.comboboxNewTokens.textFieldContentSlotRightColorActive, _emotion.comboboxNewTokens.textFieldIndicatorColor, _emotion.comboboxNewTokens.textFieldOptionalColor, _emotion.comboboxNewTokens.textFieldChipCloseIconColor, _emotion.comboboxNewTokens.textFieldChipColor, _emotion.comboboxNewTokens.textFieldChipBackground, _emotion.comboboxNewTokens.textFieldChipColorHover, _emotion.comboboxNewTokens.textFieldChipBackgroundHover, _emotion.comboboxNewTokens.textFieldChipColorActive, _emotion.comboboxNewTokens.textFieldChipBackgroundActive, _emotion.comboboxNewTokens.textFieldChipBackgroundReadOnly, _emotion.comboboxNewTokens.textFieldChipColorReadOnly, _emotion.comboboxNewTokens.textFieldChipBackgroundReadOnlyHover, _emotion.comboboxNewTokens.textFieldChipColorReadOnlyHover, _emotion.comboboxNewTokens.textFieldChipOpacityReadonly, _emotion.comboboxNewTokens.dropdownBorderColor, _emotion.comboboxNewTokens.disclosureIconColor, _emotion.comboboxNewTokens.disclosureIconColorHover, _emotion.comboboxNewTokens.itemBackgroundHover, _emotion.comboboxNewTokens.dividerColor)
|
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.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.625rem 0.875rem 0.625rem 0.875rem;\n ", ": 0.125rem;\n ", ": 0.75rem;\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 ", ": 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 ", ": 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 ", ": 1.25rem;\n ", ": 0.875rem;\n ", ": 0.375rem;\n ", ": 0.25rem;\n ", ": var(--text-accent);\n ", ": var(--on-dark-text-primary);\n ", ": none;\n ", ": 0.125rem;\n ", ": var(--outline-accent);\n\n ", ": 0.375rem;\n ", ": 0.0625rem;\n "])), _emotion.comboboxNewTokens.textFieldHeight, _emotion.comboboxNewTokens.textFieldPadding, _emotion.comboboxNewTokens.textFieldPaddingWithChips, _emotion.comboboxNewTokens.textFieldBorderRadius, _emotion.comboboxNewTokens.textFieldBorderWidth, _emotion.comboboxNewTokens.textFieldLeftContentMargin, _emotion.comboboxNewTokens.textFieldRightContentMargin, _emotion.comboboxNewTokens.textFieldTextBeforeMargin, _emotion.comboboxNewTokens.textFieldTextAfterMargin, _emotion.comboboxNewTokens.textFieldFontFamily, _emotion.comboboxNewTokens.textFieldFontSize, _emotion.comboboxNewTokens.textFieldFontStyle, _emotion.comboboxNewTokens.textFieldFontWeight, _emotion.comboboxNewTokens.textFieldLetterSpacing, _emotion.comboboxNewTokens.textFieldLineHeight, _emotion.comboboxNewTokens.textFieldLabelOffset, _emotion.comboboxNewTokens.textFieldLabelFontFamily, _emotion.comboboxNewTokens.textFieldLabelFontSize, _emotion.comboboxNewTokens.textFieldLabelFontStyle, _emotion.comboboxNewTokens.textFieldLabelFontWeight, _emotion.comboboxNewTokens.textFieldLabelLetterSpacing, _emotion.comboboxNewTokens.textFieldLabelLineHeight, _emotion.comboboxNewTokens.textFieldLeftHelperOffset, _emotion.comboboxNewTokens.textFieldLeftHelperFontFamily, _emotion.comboboxNewTokens.textFieldLeftHelperFontSize, _emotion.comboboxNewTokens.textFieldLeftHelperFontStyle, _emotion.comboboxNewTokens.textFieldLeftHelperFontWeight, _emotion.comboboxNewTokens.textFieldLeftHelperLetterSpacing, _emotion.comboboxNewTokens.textFieldLeftHelperLineHeight, _emotion.comboboxNewTokens.textFieldLabelInnerPadding, _emotion.comboboxNewTokens.textFieldContentLabelInnerPadding, _emotion.comboboxNewTokens.textFieldIndicatorSizeInner, _emotion.comboboxNewTokens.textFieldIndicatorSizeOuter, _emotion.comboboxNewTokens.textFieldIndicatorLabelPlacementInner, _emotion.comboboxNewTokens.textFieldIndicatorLabelPlacementOuter, _emotion.comboboxNewTokens.textFieldIndicatorLabelPlacementInnerRight, _emotion.comboboxNewTokens.textFieldIndicatorLabelPlacementOuterRight, _emotion.comboboxNewTokens.textFieldClearIndicatorLabelPlacementInner, _emotion.comboboxNewTokens.textFieldClearIndicatorLabelPlacementInnerRight, _emotion.comboboxNewTokens.textFieldClearIndicatorHintInnerRight, _emotion.comboboxNewTokens.textFieldChipGap, _emotion.comboboxNewTokens.textFieldChipBorderRadius, _emotion.comboboxNewTokens.textFieldChipWidth, _emotion.comboboxNewTokens.textFieldChipHeight, _emotion.comboboxNewTokens.textFieldChipPadding, _emotion.comboboxNewTokens.textFieldChipClearContentMarginLeft, _emotion.comboboxNewTokens.textFieldChipClearContentMarginRight, _emotion.comboboxNewTokens.textFieldChipCloseIconSize, _emotion.comboboxNewTokens.textFieldChipFontFamily, _emotion.comboboxNewTokens.textFieldChipFontSize, _emotion.comboboxNewTokens.textFieldChipFontStyle, _emotion.comboboxNewTokens.textFieldChipFontWeight, _emotion.comboboxNewTokens.textFieldChipLetterSpacing, _emotion.comboboxNewTokens.textFieldChipLineHeight, _emotion.comboboxNewTokens.emptyStatePadding, _emotion.comboboxNewTokens.padding, _emotion.comboboxNewTokens.borderRadius, _emotion.comboboxNewTokens.itemHeight, _emotion.comboboxNewTokens.itemPadding, _emotion.comboboxNewTokens.itemPaddingTight, _emotion.comboboxNewTokens.itemBorderRadius, _emotion.comboboxNewTokens.itemIconSize, _emotion.comboboxNewTokens.itemIconSizeTight, _emotion.comboboxNewTokens.itemIconMargin, _emotion.comboboxNewTokens.fontFamily, _emotion.comboboxNewTokens.fontSize, _emotion.comboboxNewTokens.fontStyle, _emotion.comboboxNewTokens.fontWeight, _emotion.comboboxNewTokens.fontLetterSpacing, _emotion.comboboxNewTokens.fontLineHeight, _emotion.comboboxNewTokens.cellPadding, _emotion.comboboxNewTokens.cellPaddingLeftContent, _emotion.comboboxNewTokens.cellPaddingContent, _emotion.comboboxNewTokens.cellPaddingRightContent, _emotion.comboboxNewTokens.cellTextboxGap, _emotion.comboboxNewTokens.cellGap, _emotion.comboboxNewTokens.cellTitleFontFamily, _emotion.comboboxNewTokens.cellTitleFontSize, _emotion.comboboxNewTokens.cellTitleFontStyle, _emotion.comboboxNewTokens.cellTitleFontWeight, _emotion.comboboxNewTokens.cellTitleLetterSpacing, _emotion.comboboxNewTokens.cellTitleLineHeight, _emotion.comboboxNewTokens.checkboxTriggerSize, _emotion.comboboxNewTokens.checkboxTriggerSizeTight, _emotion.comboboxNewTokens.checkboxTriggerBorderRadius, _emotion.comboboxNewTokens.checkboxTriggerBorderRadiusTight, _emotion.comboboxNewTokens.checkboxFillColor, _emotion.comboboxNewTokens.checkboxIconColor, _emotion.comboboxNewTokens.checkboxTriggerBorderCheckedColor, _emotion.comboboxNewTokens.checkboxTriggerBorderWidth, _emotion.comboboxNewTokens.checkboxTriggerBorderColor, _emotion.comboboxNewTokens.indicatorSize, _emotion.comboboxNewTokens.dropdownBorderWidth)
|
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 ", ": 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.625rem 0.875rem 0.625rem 0.875rem;\n ", ": 0.125rem;\n ", ": 0.75rem;\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 ", ": 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 ", ": 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 ", ": 1.25rem;\n ", ": 0.875rem;\n ", ": 0.375rem;\n ", ": 0.25rem;\n ", ": var(--text-accent);\n ", ": var(--on-dark-text-primary);\n ", ": none;\n ", ": 0.125rem;\n ", ": var(--outline-accent);\n\n ", ": 0.375rem;\n ", ": 0.0625rem;\n\n ", ": 0.375rem;\n ", ": 0.75rem;\n ", ": 0.375rem;\n ", ": 0.75rem;\n ", ": 0.25rem;\n ", ": 0.25rem;\n "])), _emotion.comboboxNewTokens.textFieldHeight, _emotion.comboboxNewTokens.textFieldPadding, _emotion.comboboxNewTokens.textFieldPaddingWithChips, _emotion.comboboxNewTokens.textFieldBorderRadius, _emotion.comboboxNewTokens.textFieldBorderWidth, _emotion.comboboxNewTokens.textFieldLeftContentMargin, _emotion.comboboxNewTokens.textFieldRightContentMargin, _emotion.comboboxNewTokens.textFieldTextBeforeMargin, _emotion.comboboxNewTokens.textFieldTextAfterMargin, _emotion.comboboxNewTokens.textFieldFontFamily, _emotion.comboboxNewTokens.textFieldFontSize, _emotion.comboboxNewTokens.textFieldFontStyle, _emotion.comboboxNewTokens.textFieldFontWeight, _emotion.comboboxNewTokens.textFieldLetterSpacing, _emotion.comboboxNewTokens.textFieldLineHeight, _emotion.comboboxNewTokens.textFieldLabelOffset, _emotion.comboboxNewTokens.textFieldLabelFontFamily, _emotion.comboboxNewTokens.textFieldLabelFontSize, _emotion.comboboxNewTokens.textFieldLabelFontStyle, _emotion.comboboxNewTokens.textFieldLabelFontWeight, _emotion.comboboxNewTokens.textFieldLabelLetterSpacing, _emotion.comboboxNewTokens.textFieldLabelLineHeight, _emotion.comboboxNewTokens.textFieldLeftHelperOffset, _emotion.comboboxNewTokens.textFieldLeftHelperFontFamily, _emotion.comboboxNewTokens.textFieldLeftHelperFontSize, _emotion.comboboxNewTokens.textFieldLeftHelperFontStyle, _emotion.comboboxNewTokens.textFieldLeftHelperFontWeight, _emotion.comboboxNewTokens.textFieldLeftHelperLetterSpacing, _emotion.comboboxNewTokens.textFieldLeftHelperLineHeight, _emotion.comboboxNewTokens.textFieldLabelInnerPadding, _emotion.comboboxNewTokens.textFieldContentLabelInnerPadding, _emotion.comboboxNewTokens.textFieldIndicatorSizeInner, _emotion.comboboxNewTokens.textFieldIndicatorSizeOuter, _emotion.comboboxNewTokens.textFieldIndicatorLabelPlacementInner, _emotion.comboboxNewTokens.textFieldIndicatorLabelPlacementOuter, _emotion.comboboxNewTokens.textFieldIndicatorLabelPlacementInnerRight, _emotion.comboboxNewTokens.textFieldIndicatorLabelPlacementOuterRight, _emotion.comboboxNewTokens.textFieldClearIndicatorLabelPlacementInner, _emotion.comboboxNewTokens.textFieldClearIndicatorLabelPlacementInnerRight, _emotion.comboboxNewTokens.textFieldClearIndicatorHintInnerRight, _emotion.comboboxNewTokens.textFieldChipGap, _emotion.comboboxNewTokens.textFieldChipBorderRadius, _emotion.comboboxNewTokens.textFieldChipWidth, _emotion.comboboxNewTokens.textFieldChipHeight, _emotion.comboboxNewTokens.textFieldChipPadding, _emotion.comboboxNewTokens.textFieldChipClearContentMarginLeft, _emotion.comboboxNewTokens.textFieldChipClearContentMarginRight, _emotion.comboboxNewTokens.textFieldChipCloseIconSize, _emotion.comboboxNewTokens.textFieldChipFontFamily, _emotion.comboboxNewTokens.textFieldChipFontSize, _emotion.comboboxNewTokens.textFieldChipFontStyle, _emotion.comboboxNewTokens.textFieldChipFontWeight, _emotion.comboboxNewTokens.textFieldChipLetterSpacing, _emotion.comboboxNewTokens.textFieldChipLineHeight, _emotion.comboboxNewTokens.emptyStatePadding, _emotion.comboboxNewTokens.padding, _emotion.comboboxNewTokens.borderRadius, _emotion.comboboxNewTokens.itemHeight, _emotion.comboboxNewTokens.itemPadding, _emotion.comboboxNewTokens.itemPaddingTight, _emotion.comboboxNewTokens.itemBorderRadius, _emotion.comboboxNewTokens.itemIconSize, _emotion.comboboxNewTokens.itemIconSizeTight, _emotion.comboboxNewTokens.itemIconMargin, _emotion.comboboxNewTokens.fontFamily, _emotion.comboboxNewTokens.fontSize, _emotion.comboboxNewTokens.fontStyle, _emotion.comboboxNewTokens.fontWeight, _emotion.comboboxNewTokens.fontLetterSpacing, _emotion.comboboxNewTokens.fontLineHeight, _emotion.comboboxNewTokens.cellPadding, _emotion.comboboxNewTokens.cellPaddingLeftContent, _emotion.comboboxNewTokens.cellPaddingContent, _emotion.comboboxNewTokens.cellPaddingRightContent, _emotion.comboboxNewTokens.cellTextboxGap, _emotion.comboboxNewTokens.cellGap, _emotion.comboboxNewTokens.cellTitleFontFamily, _emotion.comboboxNewTokens.cellTitleFontSize, _emotion.comboboxNewTokens.cellTitleFontStyle, _emotion.comboboxNewTokens.cellTitleFontWeight, _emotion.comboboxNewTokens.cellTitleLetterSpacing, _emotion.comboboxNewTokens.cellTitleLineHeight, _emotion.comboboxNewTokens.checkboxTriggerSize, _emotion.comboboxNewTokens.checkboxTriggerSizeTight, _emotion.comboboxNewTokens.checkboxTriggerBorderRadius, _emotion.comboboxNewTokens.checkboxTriggerBorderRadiusTight, _emotion.comboboxNewTokens.checkboxFillColor, _emotion.comboboxNewTokens.checkboxIconColor, _emotion.comboboxNewTokens.checkboxTriggerBorderCheckedColor, _emotion.comboboxNewTokens.checkboxTriggerBorderWidth, _emotion.comboboxNewTokens.checkboxTriggerBorderColor, _emotion.comboboxNewTokens.indicatorSize, _emotion.comboboxNewTokens.dropdownBorderWidth, _emotion.comboboxNewTokens.dividerMarginTop, _emotion.comboboxNewTokens.dividerMarginRight, _emotion.comboboxNewTokens.dividerMarginBottom, _emotion.comboboxNewTokens.dividerMarginLeft, _emotion.comboboxNewTokens.dividerMarginTopTight, _emotion.comboboxNewTokens.dividerMarginBottomTight)
|
23
23
|
},
|
24
24
|
labelPlacement: {
|
25
25
|
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 "])), _emotion.comboboxNewTokens.textFieldPlaceholderColor, _emotion.comboboxNewTokens.textFieldLabelInnerFontFamily, _emotion.comboboxNewTokens.textFieldLabelInnerFontSize, _emotion.comboboxNewTokens.textFieldLabelInnerFontStyle, _emotion.comboboxNewTokens.textFieldLabelInnerFontWeight, _emotion.comboboxNewTokens.textFieldLabelInnerLetterSpacing, _emotion.comboboxNewTokens.textFieldLabelInnerLineHeight),
|
@@ -8,6 +8,8 @@ import { Combobox } from './Combobox';
|
|
8
8
|
|
9
9
|
type StorySelectProps = ComponentProps<typeof Combobox> & {
|
10
10
|
enableContentLeft?: boolean;
|
11
|
+
selectAllLabel?: string;
|
12
|
+
selectAllSticky?: boolean;
|
11
13
|
};
|
12
14
|
|
13
15
|
const view = ['default', 'negative'];
|
@@ -416,3 +418,187 @@ const MultipleStory = (args: StorySelectProps) => {
|
|
416
418
|
export const Multiple: StoryObj<StorySelectProps> = {
|
417
419
|
render: (args) => <MultipleStory {...args} />,
|
418
420
|
};
|
421
|
+
|
422
|
+
const flatItems = [
|
423
|
+
{
|
424
|
+
value: 'north_america',
|
425
|
+
label: 'Северная Америка',
|
426
|
+
},
|
427
|
+
{
|
428
|
+
value: 'rio_de_janeiro',
|
429
|
+
label: 'Рио-де-Жанейро',
|
430
|
+
},
|
431
|
+
{
|
432
|
+
value: 'sao_paulo',
|
433
|
+
label: 'Сан-Паулу',
|
434
|
+
},
|
435
|
+
{
|
436
|
+
value: 'buenos_aires',
|
437
|
+
label: 'Буэнос-Айрес',
|
438
|
+
},
|
439
|
+
{
|
440
|
+
value: 'cordoba',
|
441
|
+
label: 'Кордова',
|
442
|
+
},
|
443
|
+
{
|
444
|
+
value: 'bogota',
|
445
|
+
label: 'Богота',
|
446
|
+
},
|
447
|
+
{
|
448
|
+
value: 'medellin',
|
449
|
+
label: 'Медельин',
|
450
|
+
},
|
451
|
+
{
|
452
|
+
value: 'paris',
|
453
|
+
label: 'Париж',
|
454
|
+
},
|
455
|
+
{
|
456
|
+
value: 'lyon',
|
457
|
+
label: 'Лион',
|
458
|
+
},
|
459
|
+
{
|
460
|
+
value: 'berlin',
|
461
|
+
label: 'Берлин',
|
462
|
+
},
|
463
|
+
{
|
464
|
+
value: 'munich',
|
465
|
+
label: 'Мюнхен',
|
466
|
+
},
|
467
|
+
{
|
468
|
+
value: 'rome',
|
469
|
+
label: 'Рим',
|
470
|
+
},
|
471
|
+
{
|
472
|
+
value: 'milan',
|
473
|
+
label: 'Милан',
|
474
|
+
},
|
475
|
+
{
|
476
|
+
value: 'madrid',
|
477
|
+
label: 'Мадрид',
|
478
|
+
},
|
479
|
+
{
|
480
|
+
value: 'barcelona',
|
481
|
+
label: 'Барселона',
|
482
|
+
},
|
483
|
+
{
|
484
|
+
value: 'london',
|
485
|
+
label: 'Лондон',
|
486
|
+
},
|
487
|
+
{
|
488
|
+
value: 'manchester',
|
489
|
+
label: 'Манчестер',
|
490
|
+
},
|
491
|
+
{
|
492
|
+
value: 'beijing',
|
493
|
+
label: 'Пекин',
|
494
|
+
},
|
495
|
+
{
|
496
|
+
value: 'shanghai',
|
497
|
+
label: 'Шанхай',
|
498
|
+
},
|
499
|
+
{
|
500
|
+
value: 'tokyo',
|
501
|
+
label: 'Токио',
|
502
|
+
},
|
503
|
+
{
|
504
|
+
value: 'osaka',
|
505
|
+
label: 'Осака',
|
506
|
+
},
|
507
|
+
{
|
508
|
+
value: 'delhi',
|
509
|
+
label: 'Дели',
|
510
|
+
},
|
511
|
+
{
|
512
|
+
value: 'mumbai',
|
513
|
+
label: 'Мумбаи',
|
514
|
+
},
|
515
|
+
{
|
516
|
+
value: 'seoul',
|
517
|
+
label: 'Сеул',
|
518
|
+
},
|
519
|
+
{
|
520
|
+
value: 'busan',
|
521
|
+
label: 'Пусан',
|
522
|
+
},
|
523
|
+
{
|
524
|
+
value: 'bangkok',
|
525
|
+
label: 'Бангкок',
|
526
|
+
},
|
527
|
+
{
|
528
|
+
value: 'phuket',
|
529
|
+
label: 'Пхукет',
|
530
|
+
},
|
531
|
+
{
|
532
|
+
value: 'africa',
|
533
|
+
label: 'Африка',
|
534
|
+
},
|
535
|
+
];
|
536
|
+
|
537
|
+
const SelectAllStory = (args: StorySelectProps) => {
|
538
|
+
const [value, setValue] = useState([]);
|
539
|
+
const [checked, setChecked] = useState(false);
|
540
|
+
const [indeterminate, setIndeterminate] = useState(false);
|
541
|
+
|
542
|
+
const handleClick = () => {
|
543
|
+
if (checked && !indeterminate) {
|
544
|
+
setValue([]);
|
545
|
+
} else {
|
546
|
+
setValue(flatItems.map((item) => item.value));
|
547
|
+
}
|
548
|
+
};
|
549
|
+
|
550
|
+
React.useEffect(() => {
|
551
|
+
if (value.length === 0) {
|
552
|
+
setChecked(false);
|
553
|
+
setIndeterminate(false);
|
554
|
+
} else if (value.length === flatItems.length) {
|
555
|
+
setChecked(true);
|
556
|
+
setIndeterminate(false);
|
557
|
+
} else {
|
558
|
+
setChecked(true);
|
559
|
+
setIndeterminate(true);
|
560
|
+
}
|
561
|
+
}, [value]);
|
562
|
+
|
563
|
+
return (
|
564
|
+
<div style={{ width: '400px' }}>
|
565
|
+
<Combobox
|
566
|
+
placeholder="Placeholder"
|
567
|
+
multiple
|
568
|
+
items={flatItems}
|
569
|
+
value={value}
|
570
|
+
onChange={setValue}
|
571
|
+
listOverflow="auto"
|
572
|
+
listMaxHeight="300px"
|
573
|
+
selectAllOptions={{
|
574
|
+
sticky: args?.selectAllSticky || false,
|
575
|
+
label: args?.selectAllLabel,
|
576
|
+
checked,
|
577
|
+
indeterminate,
|
578
|
+
onClick: handleClick,
|
579
|
+
}}
|
580
|
+
/>
|
581
|
+
</div>
|
582
|
+
);
|
583
|
+
};
|
584
|
+
|
585
|
+
export const SelectAll: StoryObj<StorySelectProps> = {
|
586
|
+
render: (args) => <SelectAllStory {...args} />,
|
587
|
+
argTypes: {
|
588
|
+
selectAllSticky: {
|
589
|
+
control: 'boolean',
|
590
|
+
},
|
591
|
+
selectAllLabel: {
|
592
|
+
control: 'text',
|
593
|
+
},
|
594
|
+
},
|
595
|
+
args: {
|
596
|
+
selectAllSticky: false,
|
597
|
+
selectAllLabel: 'Выбрать все',
|
598
|
+
},
|
599
|
+
parameters: {
|
600
|
+
controls: {
|
601
|
+
include: ['selectAllSticky', 'selectAllLabel'],
|
602
|
+
},
|
603
|
+
},
|
604
|
+
};
|
@@ -107,7 +107,10 @@ const StoryDefault = ({
|
|
107
107
|
contentRight={enableContentRight ? <IconCalendarOutline size={iconSize} /> : undefined}
|
108
108
|
onBlur={onBlur}
|
109
109
|
onFocus={onFocus}
|
110
|
-
onToggle={(is) =>
|
110
|
+
onToggle={(is) => {
|
111
|
+
setIsOpen(is);
|
112
|
+
onToggle(is);
|
113
|
+
}}
|
111
114
|
onChangeValue={onChangeValue}
|
112
115
|
onCommitDate={onCommitDate}
|
113
116
|
{...rest}
|
@@ -143,6 +146,7 @@ export const Default: StoryObj<StoryPropsDefault> = {
|
|
143
146
|
includeEdgeDates: true,
|
144
147
|
min: new Date(2024, 1, 1),
|
145
148
|
max: new Date(2024, 12, 29),
|
149
|
+
closeAfterDateSelect: true,
|
146
150
|
maskWithFormat: false,
|
147
151
|
required: false,
|
148
152
|
requiredPlacement: 'right',
|
@@ -238,7 +242,10 @@ const StoryRange = ({
|
|
238
242
|
secondTextfieldTextBefore={
|
239
243
|
showDefaultTextBefore ? secondTextfieldTextBefore || 'ПО' : secondTextfieldTextBefore
|
240
244
|
}
|
241
|
-
onToggle={(is) =>
|
245
|
+
onToggle={(is) => {
|
246
|
+
setIsOpen(is);
|
247
|
+
onToggle(is);
|
248
|
+
}}
|
242
249
|
onChangeFirstValue={onChangeFirstValue}
|
243
250
|
onChangeSecondValue={onChangeSecondValue}
|
244
251
|
{...dividerIconProps}
|
@@ -275,6 +282,7 @@ export const Range: StoryObj<StoryPropsRange> = {
|
|
275
282
|
includeEdgeDates: true,
|
276
283
|
min: new Date(2024, 1, 1),
|
277
284
|
max: new Date(2024, 12, 29),
|
285
|
+
closeAfterDateSelect: true,
|
278
286
|
renderFromDate: new Date(2024, 4, 14),
|
279
287
|
maskWithFormat: false,
|
280
288
|
required: false,
|
@@ -3,32 +3,14 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
exports.NotificationsProvider = exports.Notification = void 0;
|
7
|
-
Object.defineProperty(exports, "addNotification", {
|
8
|
-
enumerable: true,
|
9
|
-
get: function get() {
|
10
|
-
return _emotion.addNotification;
|
11
|
-
}
|
12
|
-
});
|
13
|
-
Object.defineProperty(exports, "closeNotification", {
|
14
|
-
enumerable: true,
|
15
|
-
get: function get() {
|
16
|
-
return _emotion.closeNotification;
|
17
|
-
}
|
18
|
-
});
|
19
|
-
Object.defineProperty(exports, "modalClasses", {
|
20
|
-
enumerable: true,
|
21
|
-
get: function get() {
|
22
|
-
return _Modal.modalClasses;
|
23
|
-
}
|
24
|
-
});
|
6
|
+
exports.NotificationsProvider = exports.NotificationNewHope = exports.Notification = void 0;
|
25
7
|
var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
|
26
8
|
var _emotion = /*#__PURE__*/require("@salutejs/plasma-new-hope/emotion");
|
27
9
|
var _Notification = /*#__PURE__*/require("./Notification.config");
|
28
|
-
var _Modal = /*#__PURE__*/require("../Modal");
|
29
10
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
30
11
|
var mergedConfig = /*#__PURE__*/(0, _emotion.mergeConfig)(_emotion.notificationConfig, _Notification.config);
|
31
|
-
var
|
12
|
+
var NotificationNewHope = exports.NotificationNewHope = /*#__PURE__*/(0, _emotion.component)(mergedConfig);
|
13
|
+
var Notification = exports.Notification = NotificationNewHope;
|
32
14
|
var NotificationsProvider = exports.NotificationsProvider = function NotificationsProvider(_ref) {
|
33
15
|
var children = _ref.children,
|
34
16
|
_ref$frame = _ref.frame,
|
@@ -4,19 +4,14 @@ import type { StoryObj, Meta } from '@storybook/react';
|
|
4
4
|
import { IconDisclosureRight, IconSber } from '@salutejs/plasma-icons';
|
5
5
|
import { disableProps, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
|
6
6
|
import { action } from '@storybook/addon-actions';
|
7
|
+
import { addNotification } from '@salutejs/plasma-new-hope';
|
8
|
+
import type { NotificationIconPlacement, NotificationLayout } from '@salutejs/plasma-new-hope';
|
7
9
|
|
8
10
|
import { Button } from '../Button/Button';
|
9
11
|
import { Modal } from '../Modal/Modal';
|
10
12
|
import { PopupProvider } from '../Popup';
|
11
13
|
|
12
|
-
import {
|
13
|
-
Notification,
|
14
|
-
NotificationsProvider,
|
15
|
-
NotificationPlacement,
|
16
|
-
NotificationIconPlacement,
|
17
|
-
NotificationLayout,
|
18
|
-
addNotification,
|
19
|
-
} from './Notification';
|
14
|
+
import { Notification, NotificationsProvider, NotificationPlacement } from './Notification';
|
20
15
|
|
21
16
|
const titles = ['Выполнено', 'Внимание', 'Ошибка'];
|
22
17
|
const texts = ['SSH ключ успешно скопирован', 'Нельзя скопировать SSH ключ', 'Не удалось скопировать SSH ключ'];
|
@@ -18,13 +18,14 @@ Object.defineProperty(exports, "NotificationsProvider", {
|
|
18
18
|
Object.defineProperty(exports, "addNotification", {
|
19
19
|
enumerable: true,
|
20
20
|
get: function get() {
|
21
|
-
return
|
21
|
+
return _emotion.addNotification;
|
22
22
|
}
|
23
23
|
});
|
24
24
|
Object.defineProperty(exports, "closeNotification", {
|
25
25
|
enumerable: true,
|
26
26
|
get: function get() {
|
27
|
-
return
|
27
|
+
return _emotion.closeNotification;
|
28
28
|
}
|
29
29
|
});
|
30
|
-
var _Notification = /*#__PURE__*/require("./Notification");
|
30
|
+
var _Notification = /*#__PURE__*/require("./Notification");
|
31
|
+
var _emotion = /*#__PURE__*/require("@salutejs/plasma-new-hope/emotion");
|