@salutejs/sdds-cs 0.245.0-canary.1736.13132113365.0 → 0.245.0-canary.1737.13142463404.0
Sign up to get free protection for your applications and to get access to all the features.
- package/components/Autocomplete/Autocomplete.config.js +1 -1
- package/components/Combobox/Combobox.config.js +1 -1
- package/components/DatePicker/DatePicker.config.js +1 -1
- package/components/Range/Range.config.js +1 -1
- package/components/Select/Select.config.js +1 -1
- package/components/TextField/TextField.config.js +2 -2
- package/emotion/cjs/components/Autocomplete/Autocomplete.config.js +1 -1
- package/emotion/cjs/components/Autocomplete/Autocomplete.stories.tsx +117 -23
- package/emotion/cjs/components/Combobox/Combobox.config.js +1 -1
- package/emotion/cjs/components/Combobox/Combobox.stories.tsx +12 -5
- package/emotion/cjs/components/DatePicker/DatePicker.config.js +1 -1
- package/emotion/cjs/components/DatePicker/DatePicker.stories.tsx +2 -1
- package/emotion/cjs/components/Range/Range.config.js +1 -1
- package/emotion/cjs/components/Range/Range.stories.tsx +2 -1
- package/emotion/cjs/components/Select/Select.config.js +1 -1
- package/emotion/cjs/components/Select/Select.stories.tsx +5 -4
- package/emotion/cjs/components/TextField/TextField.config.js +2 -2
- package/emotion/cjs/components/TextField/TextField.stories.tsx +4 -4
- package/emotion/es/components/Autocomplete/Autocomplete.config.js +1 -1
- package/emotion/es/components/Autocomplete/Autocomplete.stories.tsx +117 -23
- package/emotion/es/components/Combobox/Combobox.config.js +1 -1
- package/emotion/es/components/Combobox/Combobox.stories.tsx +12 -5
- package/emotion/es/components/DatePicker/DatePicker.config.js +1 -1
- package/emotion/es/components/DatePicker/DatePicker.stories.tsx +2 -1
- package/emotion/es/components/Range/Range.config.js +1 -1
- package/emotion/es/components/Range/Range.stories.tsx +2 -1
- package/emotion/es/components/Select/Select.config.js +1 -1
- package/emotion/es/components/Select/Select.stories.tsx +5 -4
- package/emotion/es/components/TextField/TextField.config.js +2 -2
- package/emotion/es/components/TextField/TextField.stories.tsx +4 -4
- package/es/components/Autocomplete/Autocomplete.config.js +1 -1
- package/es/components/Combobox/Combobox.config.js +1 -1
- package/es/components/DatePicker/DatePicker.config.js +1 -1
- package/es/components/Range/Range.config.js +1 -1
- package/es/components/Select/Select.config.js +1 -1
- package/es/components/TextField/TextField.config.js +2 -2
- package/package.json +3 -3
|
@@ -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-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)
|
|
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.625rem;\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
|
|
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.625rem;\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\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.625rem;\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 ", ": var(--text-secondary);\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.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.checkboxTriggerBorderColor, _emotion.comboboxNewTokens.indicatorSize, _emotion.comboboxNewTokens.dropdownBorderWidth)
|
|
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),
|
|
@@ -1,16 +1,17 @@
|
|
|
1
1
|
import React, { useState } from 'react';
|
|
2
2
|
import type { ComponentProps } from 'react';
|
|
3
3
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
4
|
-
import { disableProps, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
|
|
4
|
+
import { disableProps, InSpacingDecorator, getConfigVariations } from '@salutejs/plasma-sb-utils';
|
|
5
5
|
import { IconDone } from '@salutejs/plasma-icons';
|
|
6
6
|
|
|
7
7
|
import { Combobox } from './Combobox';
|
|
8
|
+
import { config } from './Combobox.config';
|
|
8
9
|
|
|
9
10
|
type StorySelectProps = ComponentProps<typeof Combobox> & {
|
|
10
11
|
enableContentLeft?: boolean;
|
|
11
12
|
};
|
|
12
13
|
|
|
13
|
-
const
|
|
14
|
+
const { views } = getConfigVariations(config);
|
|
14
15
|
const chip = ['default', 'secondary', 'accent'];
|
|
15
16
|
const variant = ['normal', 'tight'];
|
|
16
17
|
|
|
@@ -20,7 +21,7 @@ const meta: Meta<StorySelectProps> = {
|
|
|
20
21
|
component: Combobox,
|
|
21
22
|
argTypes: {
|
|
22
23
|
view: {
|
|
23
|
-
options:
|
|
24
|
+
options: views,
|
|
24
25
|
control: {
|
|
25
26
|
type: 'select',
|
|
26
27
|
},
|
|
@@ -353,13 +354,12 @@ const items = [
|
|
|
353
354
|
{
|
|
354
355
|
value: 'africa',
|
|
355
356
|
label: 'Африка',
|
|
356
|
-
|
|
357
|
+
disabled: true,
|
|
357
358
|
},
|
|
358
359
|
];
|
|
359
360
|
|
|
360
361
|
const SingleStory = (args: StorySelectProps) => {
|
|
361
362
|
const [value, setValue] = useState('');
|
|
362
|
-
|
|
363
363
|
return (
|
|
364
364
|
<div style={{ width: '400px' }}>
|
|
365
365
|
<Combobox
|
|
@@ -368,6 +368,7 @@ const SingleStory = (args: StorySelectProps) => {
|
|
|
368
368
|
value={value}
|
|
369
369
|
onChange={setValue}
|
|
370
370
|
contentLeft={args.enableContentLeft ? <IconDone size="s" /> : undefined}
|
|
371
|
+
onToggle={(e) => console.log(e)}
|
|
371
372
|
/>
|
|
372
373
|
</div>
|
|
373
374
|
);
|
|
@@ -375,6 +376,9 @@ const SingleStory = (args: StorySelectProps) => {
|
|
|
375
376
|
|
|
376
377
|
export const Single: StoryObj<StorySelectProps> = {
|
|
377
378
|
render: (args) => <SingleStory {...args} />,
|
|
379
|
+
args: {
|
|
380
|
+
closeAfterSelect: true,
|
|
381
|
+
},
|
|
378
382
|
parameters: {
|
|
379
383
|
controls: {
|
|
380
384
|
exclude: ['isTargetAmount'],
|
|
@@ -401,4 +405,7 @@ const MultipleStory = (args: StorySelectProps) => {
|
|
|
401
405
|
|
|
402
406
|
export const Multiple: StoryObj<StorySelectProps> = {
|
|
403
407
|
render: (args) => <MultipleStory {...args} />,
|
|
408
|
+
args: {
|
|
409
|
+
closeAfterSelect: false,
|
|
410
|
+
},
|
|
404
411
|
};
|
|
@@ -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(--surface-solid-card);\n ", ": var(--outline-solid-primary);\n ", ": var(--outline-solid-primary-hover);\n ", ": var(--outline-accent);\n ", ": var(--outline-negative);\n ", ": var(--outline-accent);\n\n ", ": var(--text-primary);\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": var(--text-tertiary);\n ", ": var(--text-accent);\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 ", ": var(--surface-negative);\n\n ", ": var(--outline-solid-primary);\n ", ": var(--outline-solid-primary-hover);\n ", ": var(--outline-accent);\n ", ": var(--outline-negative);\n ", ": var(--outline-negative);\n ", ": var(--outline-accent);\n ", ": var(--outline-accent);\n ", ": var(--surface-solid-card);\n ", ": var(--text-secondary);\n\n ", ": var(--text-secondary);\n ", ": var(--text-secondary);\n\n ", ": var(--text-accent);\n\n ", ": var(--shadow-down-soft-s);\n ", ": var(--surface-transparent-secondary);\n ", ": var(--surface-solid-card);\n ", ": var(--surface-accent);\n ", ": var(--inverse-text-primary);\n ", ": var(--surface-transparent-accent);\n ", ": var(--surface-solid-default);\n ", ": transparent;\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-accent);\n ", ": var(--surface-accent);\n ", ": var(--inverse-text-primary);\n ", ": var(--surface-accent);\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-accent);\n ", ": var(--surface-accent);\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": var(--text-accent);\n ", ": var(--outline-solid-primary);\n ", ": var(--text-secondary);\n\n ", ": var(--text-accent);\n ", ": var(--surface-clear);\n ", ": var(--text-primary-hover);\n ", ": var(--surface-clear);\n ", ": var(--text-primary-hover);\n ", ": var(--surface-clear);\n ", ": var(--surface-accent);\n\n ", ": var(--text-accent);\n ", ": #1A9E32;\n "])), _emotion.datePickerTokens.background, _emotion.datePickerTokens.borderColor, _emotion.datePickerTokens.borderColorHover, _emotion.datePickerTokens.borderColorFocus, _emotion.datePickerTokens.borderColorError, _emotion.datePickerTokens.borderColorSuccess, _emotion.datePickerTokens.dividerColor, _emotion.datePickerTokens.labelColor, _emotion.datePickerTokens.leftHelperColor, _emotion.datePickerTokens.textFieldColor, _emotion.datePickerTokens.textFieldPlaceholderColor, _emotion.datePickerTokens.textFieldPlaceholderColorFocus, _emotion.datePickerTokens.textFieldCaretColor, _emotion.datePickerTokens.labelInnerFontFamily, _emotion.datePickerTokens.labelInnerFontSize, _emotion.datePickerTokens.labelInnerFontStyle, _emotion.datePickerTokens.labelInnerFontWeight, _emotion.datePickerTokens.labelInnerLetterSpacing, _emotion.datePickerTokens.labelInnerLineHeight, _emotion.datePickerTokens.indicatorColor, _emotion.datePickerTokens.textFieldBorderColor, _emotion.datePickerTokens.textFieldBorderColorHover, _emotion.datePickerTokens.textFieldBorderColorFocus, _emotion.datePickerTokens.textFieldBorderColorError, _emotion.datePickerTokens.textFieldBorderColorErrorFocus, _emotion.datePickerTokens.textFieldBorderColorSuccess, _emotion.datePickerTokens.textFieldBorderColorSuccessFocus, _emotion.datePickerTokens.textFieldBackgroundColor, _emotion.datePickerTokens.textFieldContentSlotColor, _emotion.datePickerTokens.textFieldTextBeforeColor, _emotion.datePickerTokens.textFieldTextAfterColor, _emotion.datePickerTokens.focusColor, _emotion.datePickerTokens.calendarShadow, _emotion.datePickerTokens.calendarSeparatorBackground, _emotion.datePickerTokens.calendarBackgroundColor, _emotion.datePickerTokens.calendarSelectedItemBackground, _emotion.datePickerTokens.calendarSelectedItemColor, _emotion.datePickerTokens.calendarSelectableItemBackgroundHover, _emotion.datePickerTokens.calendarCurrentItemBorderColor, _emotion.datePickerTokens.calendarCurrentItemBackgroundHover, _emotion.datePickerTokens.calendarCurrentItemColorHover, _emotion.datePickerTokens.calendarCurrentItemChildBackgroundHover, _emotion.datePickerTokens.calendarActiveItemBackground, _emotion.datePickerTokens.calendarActiveItemColor, _emotion.datePickerTokens.calendarHoveredItemBackground, _emotion.datePickerTokens.calendarHoveredItemColor, _emotion.datePickerTokens.calendarRangeBackground, _emotion.datePickerTokens.calendarOutlineFocusColor, _emotion.datePickerTokens.calendarContentPrimaryColor, _emotion.datePickerTokens.calendarContentSecondaryColor, _emotion.datePickerTokens.calendarHeaderArrowColor, _emotion.datePickerTokens.calendarBorderColor, _emotion.datePickerTokens.calendarDayOfWeekColor, _emotion.datePickerTokens.iconButtonColor, _emotion.datePickerTokens.iconButtonBackgroundColor, _emotion.datePickerTokens.iconButtonColorHover, _emotion.datePickerTokens.iconButtonBackgroundColorHover, _emotion.datePickerTokens.iconButtonColorActive, _emotion.datePickerTokens.iconButtonBackgroundColorActive, _emotion.datePickerTokens.iconButtonFocusColor, _emotion.datePickerTokens.textFieldContentRightSlotColor, _emotion.datePickerTokens.textFieldContentRightSlotColorHover)
|
|
17
|
+
"default": /*#__PURE__*/(0, _emotion.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--surface-solid-card);\n ", ": var(--outline-solid-primary);\n ", ": var(--outline-solid-primary-hover);\n ", ": var(--outline-accent);\n ", ": var(--outline-negative);\n ", ": var(--outline-accent);\n\n ", ": var(--text-primary);\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": var(--text-negative);\n ", ": var(--text-positive);\n\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": var(--text-tertiary);\n ", ": var(--text-accent);\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 ", ": var(--surface-negative);\n\n ", ": var(--outline-solid-primary);\n ", ": var(--outline-solid-primary-hover);\n ", ": var(--outline-accent);\n ", ": var(--outline-negative);\n ", ": var(--outline-negative);\n ", ": var(--outline-accent);\n ", ": var(--outline-accent);\n ", ": var(--surface-solid-card);\n ", ": var(--text-secondary);\n\n ", ": var(--text-secondary);\n ", ": var(--text-secondary);\n\n ", ": var(--text-accent);\n\n ", ": var(--shadow-down-soft-s);\n ", ": var(--surface-transparent-secondary);\n ", ": var(--surface-solid-card);\n ", ": var(--surface-accent);\n ", ": var(--inverse-text-primary);\n ", ": var(--surface-transparent-accent);\n ", ": var(--surface-solid-default);\n ", ": transparent;\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-accent);\n ", ": var(--surface-accent);\n ", ": var(--inverse-text-primary);\n ", ": var(--surface-accent);\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-accent);\n ", ": var(--surface-accent);\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": var(--text-accent);\n ", ": var(--outline-solid-primary);\n ", ": var(--text-secondary);\n\n ", ": var(--text-accent);\n ", ": var(--surface-clear);\n ", ": var(--text-primary-hover);\n ", ": var(--surface-clear);\n ", ": var(--text-primary-hover);\n ", ": var(--surface-clear);\n ", ": var(--surface-accent);\n\n ", ": var(--text-accent);\n ", ": #1A9E32;\n "])), _emotion.datePickerTokens.background, _emotion.datePickerTokens.borderColor, _emotion.datePickerTokens.borderColorHover, _emotion.datePickerTokens.borderColorFocus, _emotion.datePickerTokens.borderColorError, _emotion.datePickerTokens.borderColorSuccess, _emotion.datePickerTokens.dividerColor, _emotion.datePickerTokens.labelColor, _emotion.datePickerTokens.leftHelperColor, _emotion.datePickerTokens.leftHelperColorError, _emotion.datePickerTokens.leftHelperColorSuccess, _emotion.datePickerTokens.textFieldColor, _emotion.datePickerTokens.textFieldPlaceholderColor, _emotion.datePickerTokens.textFieldPlaceholderColorFocus, _emotion.datePickerTokens.textFieldCaretColor, _emotion.datePickerTokens.labelInnerFontFamily, _emotion.datePickerTokens.labelInnerFontSize, _emotion.datePickerTokens.labelInnerFontStyle, _emotion.datePickerTokens.labelInnerFontWeight, _emotion.datePickerTokens.labelInnerLetterSpacing, _emotion.datePickerTokens.labelInnerLineHeight, _emotion.datePickerTokens.indicatorColor, _emotion.datePickerTokens.textFieldBorderColor, _emotion.datePickerTokens.textFieldBorderColorHover, _emotion.datePickerTokens.textFieldBorderColorFocus, _emotion.datePickerTokens.textFieldBorderColorError, _emotion.datePickerTokens.textFieldBorderColorErrorFocus, _emotion.datePickerTokens.textFieldBorderColorSuccess, _emotion.datePickerTokens.textFieldBorderColorSuccessFocus, _emotion.datePickerTokens.textFieldBackgroundColor, _emotion.datePickerTokens.textFieldContentSlotColor, _emotion.datePickerTokens.textFieldTextBeforeColor, _emotion.datePickerTokens.textFieldTextAfterColor, _emotion.datePickerTokens.focusColor, _emotion.datePickerTokens.calendarShadow, _emotion.datePickerTokens.calendarSeparatorBackground, _emotion.datePickerTokens.calendarBackgroundColor, _emotion.datePickerTokens.calendarSelectedItemBackground, _emotion.datePickerTokens.calendarSelectedItemColor, _emotion.datePickerTokens.calendarSelectableItemBackgroundHover, _emotion.datePickerTokens.calendarCurrentItemBorderColor, _emotion.datePickerTokens.calendarCurrentItemBackgroundHover, _emotion.datePickerTokens.calendarCurrentItemColorHover, _emotion.datePickerTokens.calendarCurrentItemChildBackgroundHover, _emotion.datePickerTokens.calendarActiveItemBackground, _emotion.datePickerTokens.calendarActiveItemColor, _emotion.datePickerTokens.calendarHoveredItemBackground, _emotion.datePickerTokens.calendarHoveredItemColor, _emotion.datePickerTokens.calendarRangeBackground, _emotion.datePickerTokens.calendarOutlineFocusColor, _emotion.datePickerTokens.calendarContentPrimaryColor, _emotion.datePickerTokens.calendarContentSecondaryColor, _emotion.datePickerTokens.calendarHeaderArrowColor, _emotion.datePickerTokens.calendarBorderColor, _emotion.datePickerTokens.calendarDayOfWeekColor, _emotion.datePickerTokens.iconButtonColor, _emotion.datePickerTokens.iconButtonBackgroundColor, _emotion.datePickerTokens.iconButtonColorHover, _emotion.datePickerTokens.iconButtonBackgroundColorHover, _emotion.datePickerTokens.iconButtonColorActive, _emotion.datePickerTokens.iconButtonBackgroundColorActive, _emotion.datePickerTokens.iconButtonFocusColor, _emotion.datePickerTokens.textFieldContentRightSlotColor, _emotion.datePickerTokens.textFieldContentRightSlotColorHover)
|
|
18
18
|
},
|
|
19
19
|
size: {
|
|
20
20
|
s: /*#__PURE__*/(0, _emotion.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 19.5rem;\n ", ": 0.625rem;\n ", ": 0.125rem;\n\n ", ": 0 0.375rem;\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-size);\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 0 0 0.75rem;\n ", ": 0;\n\n ", ": 0.5rem;\n ", ": 0.3125rem 0 0 0;\n ", ": 1.0625rem 0 0.3125rem 0;\n\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-size);\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\n ", ": 2.5rem;\n ", ": 0.625rem;\n ", ": 0.125rem;\n ", ": 0.6875rem 0.75rem 0.6875rem 0.75rem;\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-size);\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.25rem 0 0 0;\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-size);\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.1875rem 0.25rem -0.1875rem -0.125rem;\n ", ": -0.1875rem -0.125rem -0.1875rem 0.75rem;\n ", ": 0 0.25rem 0 0;\n ", ": 0 0 0 0.25rem;\n\n ", ": 0.125rem;\n ", ": 19.5rem;\n ", ": 0.875rem;\n\n ", ": 0.5rem 1rem 0.875rem 1rem;\n ", ": 0.5rem;\n ", ": 5.5rem;\n ", ": 3.5rem;\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-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-bold-font-weight);\n\n ", ": 0.5rem 0.5rem 0 0.5rem;\n ", ": 0.5rem;\n ", ": 8.25rem;\n ", ": 7rem;\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-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-bold-font-weight);\n\n ", ": 0.5rem 1rem 0.875rem 1rem;\n ", ": 0.5rem;\n ", ": 5.5rem;\n ", ": 3.5rem;\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-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-bold-font-weight);\n\n ", ": 0.5rem 1rem 0.875rem 1rem;\n ", ": 0.5rem;\n ", ": 2.5rem;\n ", ": 2rem;\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-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-bold-font-weight);\n\n ", ": 0.125rem;\n\n ", ": 0.75rem 1rem 0 1rem;\n ", ": 0.5rem;\n\n ", ": 0 0 0 0.5rem;\n ", ": 0.25rem;\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-letter-spacing);\n ", ": var(--plasma-typo-body-m-bold-line-height);\n ", ": var(--plasma-typo-body-m-bold-font-weight);\n ", ": var(--plasma-typo-body-m-bold-font-weight);\n\n ", ": 2rem;\n ", ": 2rem;\n ", ": 0.75rem;\n ", ": 0.5rem;\n "])), _emotion.datePickerTokens.width, _emotion.datePickerTokens.borderRadius, _emotion.datePickerTokens.borderWidth, _emotion.datePickerTokens.dividerPadding, _emotion.datePickerTokens.dividerFontFamily, _emotion.datePickerTokens.dividerFontStyle, _emotion.datePickerTokens.dividerFontSize, _emotion.datePickerTokens.dividerFontWeight, _emotion.datePickerTokens.dividerLetterSpacing, _emotion.datePickerTokens.dividerLineHeight, _emotion.datePickerTokens.leftContentMargin, _emotion.datePickerTokens.rightContentMargin, _emotion.datePickerTokens.labelOffset, _emotion.datePickerTokens.labelInnerPadding, _emotion.datePickerTokens.contentLabelInnerPadding, _emotion.datePickerTokens.labelFontFamily, _emotion.datePickerTokens.labelFontStyle, _emotion.datePickerTokens.labelFontSize, _emotion.datePickerTokens.labelFontWeight, _emotion.datePickerTokens.labelLetterSpacing, _emotion.datePickerTokens.labelLineHeight, _emotion.datePickerTokens.indicatorSize, _emotion.datePickerTokens.indicatorSizeOuter, _emotion.datePickerTokens.indicatorPlacement, _emotion.datePickerTokens.indicatorOuterPlacement, _emotion.datePickerTokens.indicatorPlacementRight, _emotion.datePickerTokens.indicatorOuterPlacementRight, _emotion.datePickerTokens.textFieldHeight, _emotion.datePickerTokens.textFieldBorderRadius, _emotion.datePickerTokens.textFieldBorderWidth, _emotion.datePickerTokens.textFieldPadding, _emotion.datePickerTokens.textFieldFontFamily, _emotion.datePickerTokens.textFieldFontStyle, _emotion.datePickerTokens.textFieldFontSize, _emotion.datePickerTokens.textFieldFontWeight, _emotion.datePickerTokens.textFieldLetterSpacing, _emotion.datePickerTokens.textFieldLineHeight, _emotion.datePickerTokens.leftHelperOffset, _emotion.datePickerTokens.leftHelperFontFamily, _emotion.datePickerTokens.leftHelperFontStyle, _emotion.datePickerTokens.leftHelperFontSize, _emotion.datePickerTokens.leftHelperFontWeight, _emotion.datePickerTokens.leftHelperLetterSpacing, _emotion.datePickerTokens.leftHelperLineHeight, _emotion.datePickerTokens.textFieldLeftContentMargin, _emotion.datePickerTokens.textFieldRightContentMargin, _emotion.datePickerTokens.textFieldTextBeforeMargin, _emotion.datePickerTokens.textFieldTextAfterMargin, _emotion.datePickerTokens.calendarBorderWidth, _emotion.datePickerTokens.calendarWidth, _emotion.datePickerTokens.calendarBorderRadius, _emotion.datePickerTokens.calendarYearsPadding, _emotion.datePickerTokens.calendarYearItemBorderRadius, _emotion.datePickerTokens.calendarYearItemWidth, _emotion.datePickerTokens.calendarYearItemHeight, _emotion.datePickerTokens.calendarYearFontFamily, _emotion.datePickerTokens.calendarYearFontSize, _emotion.datePickerTokens.calendarYearFontStyle, _emotion.datePickerTokens.calendarYearFontLetterSpacing, _emotion.datePickerTokens.calendarYearFontLineHeight, _emotion.datePickerTokens.calendarYearFontWeight, _emotion.datePickerTokens.calendarYearSelectedFontWeight, _emotion.datePickerTokens.calendarQuartersPadding, _emotion.datePickerTokens.calendarQuarterItemBorderRadius, _emotion.datePickerTokens.calendarQuarterItemWidth, _emotion.datePickerTokens.calendarQuarterItemHeight, _emotion.datePickerTokens.calendarQuarterFontFamily, _emotion.datePickerTokens.calendarQuarterFontSize, _emotion.datePickerTokens.calendarQuarterFontStyle, _emotion.datePickerTokens.calendarQuarterFontLetterSpacing, _emotion.datePickerTokens.calendarQuarterFontLineHeight, _emotion.datePickerTokens.calendarQuarterFontWeight, _emotion.datePickerTokens.calendarQuarterSelectedFontWeight, _emotion.datePickerTokens.calendarMonthsPadding, _emotion.datePickerTokens.calendarMonthItemBorderRadius, _emotion.datePickerTokens.calendarMonthItemWidth, _emotion.datePickerTokens.calendarMonthItemHeight, _emotion.datePickerTokens.calendarMonthFontFamily, _emotion.datePickerTokens.calendarMonthFontSize, _emotion.datePickerTokens.calendarMonthFontStyle, _emotion.datePickerTokens.calendarMonthFontLetterSpacing, _emotion.datePickerTokens.calendarMonthFontLineHeight, _emotion.datePickerTokens.calendarMonthFontWeight, _emotion.datePickerTokens.calendarMonthSelectedFontWeight, _emotion.datePickerTokens.calendarDaysPadding, _emotion.datePickerTokens.calendarDayItemBorderRadius, _emotion.datePickerTokens.calendarDayItemWidth, _emotion.datePickerTokens.calendarDayItemHeight, _emotion.datePickerTokens.calendarDayFontFamily, _emotion.datePickerTokens.calendarDayFontSize, _emotion.datePickerTokens.calendarDayFontStyle, _emotion.datePickerTokens.calendarDayFontLetterSpacing, _emotion.datePickerTokens.calendarDayFontLineHeight, _emotion.datePickerTokens.calendarDayFontWeight, _emotion.datePickerTokens.calendarDaySelectedFontWeight, _emotion.datePickerTokens.calendarCurrentItemBorderWidth, _emotion.datePickerTokens.calendarHeaderWrapperPadding, _emotion.datePickerTokens.calendarHeaderArrowGap, _emotion.datePickerTokens.calendarHeaderPadding, _emotion.datePickerTokens.calendarHeaderDateGap, _emotion.datePickerTokens.calendarHeaderFontFamily, _emotion.datePickerTokens.calendarHeaderFontSize, _emotion.datePickerTokens.calendarHeaderFontStyle, _emotion.datePickerTokens.calendarHeaderFontLetterSpacing, _emotion.datePickerTokens.calendarHeaderFontLineHeight, _emotion.datePickerTokens.calendarHeaderFontWeight, _emotion.datePickerTokens.calendarHeaderFontWeightBold, _emotion.datePickerTokens.iconButtonHeight, _emotion.datePickerTokens.iconButtonWidth, _emotion.datePickerTokens.iconButtonPadding, _emotion.datePickerTokens.iconButtonRadius)
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { ComponentProps, useRef, useState } from 'react';
|
|
2
2
|
import type { StoryObj, Meta } from '@storybook/react';
|
|
3
3
|
import { action } from '@storybook/addon-actions';
|
|
4
|
-
import { IconPlaceholder, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
|
|
4
|
+
import { disableProps, IconPlaceholder, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
|
|
5
5
|
import { IconPlasma, IconCalendarOutline } from '@salutejs/plasma-icons';
|
|
6
6
|
|
|
7
7
|
import { IconButton } from '../IconButton/IconButton';
|
|
@@ -66,6 +66,7 @@ const meta: Meta = {
|
|
|
66
66
|
},
|
|
67
67
|
if: { arg: 'required', truthy: true },
|
|
68
68
|
},
|
|
69
|
+
...disableProps(['view']),
|
|
69
70
|
},
|
|
70
71
|
};
|
|
71
72
|
|
|
@@ -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(--surface-solid-card);\n ", ": var(--outline-solid-primary);\n ", ": var(--outline-negative);\n ", ": var(--outline-accent);\n\n ", ": var(--text-primary);\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n\n ", ": var(--surface-negative);\n\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": var(--text-tertiary);\n ", ": var(--text-accent);\n\n ", ": var(--outline-accent);\n ", ": var(--outline-negative);\n ", ": var(--outline-negative);\n ", ": var(--outline-accent);\n ", ": var(--outline-accent);\n\n ", ": var(--text-accent);\n ", ": var(--text-secondary);\n ", ": var(--text-secondary);\n "])), _emotion.rangeTokens.background, _emotion.rangeTokens.borderColor, _emotion.rangeTokens.borderColorError, _emotion.rangeTokens.borderColorSuccess, _emotion.rangeTokens.dividerColor, _emotion.rangeTokens.labelColor, _emotion.rangeTokens.leftHelperColor, _emotion.rangeTokens.indicatorColor, _emotion.rangeTokens.textFieldColor, _emotion.rangeTokens.textFieldPlaceholderColor, _emotion.rangeTokens.textFieldPlaceholderColorFocus, _emotion.rangeTokens.textFieldCaretColor, _emotion.rangeTokens.textFieldBorderColorFocus, _emotion.rangeTokens.textFieldBorderColorError, _emotion.rangeTokens.textFieldBorderColorErrorFocus, _emotion.rangeTokens.textFieldBorderColorSuccess, _emotion.rangeTokens.textFieldBorderColorSuccessFocus, _emotion.rangeTokens.focusColor, _emotion.rangeTokens.textFieldTextAfterColor, _emotion.rangeTokens.textFieldTextBeforeColor)
|
|
17
|
+
"default": /*#__PURE__*/(0, _emotion.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--surface-solid-card);\n ", ": var(--outline-solid-primary);\n ", ": var(--outline-negative);\n ", ": var(--outline-accent);\n\n ", ": var(--text-primary);\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": var(--text-negative);\n ", ": var(--text-positive);\n\n ", ": var(--surface-negative);\n\n ", ": var(--text-primary);\n ", ": var(--text-secondary);\n ", ": var(--text-tertiary);\n ", ": var(--text-accent);\n\n ", ": var(--outline-accent);\n ", ": var(--outline-negative);\n ", ": var(--outline-negative);\n ", ": var(--outline-accent);\n ", ": var(--outline-accent);\n\n ", ": var(--text-accent);\n ", ": var(--text-secondary);\n ", ": var(--text-secondary);\n "])), _emotion.rangeTokens.background, _emotion.rangeTokens.borderColor, _emotion.rangeTokens.borderColorError, _emotion.rangeTokens.borderColorSuccess, _emotion.rangeTokens.dividerColor, _emotion.rangeTokens.labelColor, _emotion.rangeTokens.leftHelperColor, _emotion.rangeTokens.leftHelperColorError, _emotion.rangeTokens.leftHelperColorSuccess, _emotion.rangeTokens.indicatorColor, _emotion.rangeTokens.textFieldColor, _emotion.rangeTokens.textFieldPlaceholderColor, _emotion.rangeTokens.textFieldPlaceholderColorFocus, _emotion.rangeTokens.textFieldCaretColor, _emotion.rangeTokens.textFieldBorderColorFocus, _emotion.rangeTokens.textFieldBorderColorError, _emotion.rangeTokens.textFieldBorderColorErrorFocus, _emotion.rangeTokens.textFieldBorderColorSuccess, _emotion.rangeTokens.textFieldBorderColorSuccessFocus, _emotion.rangeTokens.focusColor, _emotion.rangeTokens.textFieldTextAfterColor, _emotion.rangeTokens.textFieldTextBeforeColor)
|
|
18
18
|
},
|
|
19
19
|
size: {
|
|
20
20
|
s: /*#__PURE__*/(0, _emotion.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.625rem;\n ", ": 0.125rem;\n\n ", ": 0 0.375rem;\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-size);\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 ", ": 0 0.375rem 0 0.75rem;\n ", ": 0;\n\n ", ": 0.5rem;\n\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-size);\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\n ", ": 2.5rem;\n ", ": 0.625rem;\n ", ": 0.125rem;\n ", ": 0.6875rem 0.75rem 0.6875rem 0.75rem;\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-size);\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.25rem 0 0 0;\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-size);\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.1875rem 0.25rem -0.1875rem -0.125rem;\n ", ": -0.1875rem -0.125rem -0.1875rem 0.75rem;\n ", ": 0 0.25rem 0 0;\n ", ": 0 0 0 0.25rem;\n "])), _emotion.rangeTokens.borderRadius, _emotion.rangeTokens.borderWidth, _emotion.rangeTokens.dividerPadding, _emotion.rangeTokens.dividerFontFamily, _emotion.rangeTokens.dividerFontStyle, _emotion.rangeTokens.dividerFontSize, _emotion.rangeTokens.dividerFontWeight, _emotion.rangeTokens.dividerLetterSpacing, _emotion.rangeTokens.dividerLineHeight, _emotion.rangeTokens.leftContentMargin, _emotion.rangeTokens.rightContentMargin, _emotion.rangeTokens.labelOffset, _emotion.rangeTokens.labelFontFamily, _emotion.rangeTokens.labelFontStyle, _emotion.rangeTokens.labelFontSize, _emotion.rangeTokens.labelFontWeight, _emotion.rangeTokens.labelLetterSpacing, _emotion.rangeTokens.labelLineHeight, _emotion.rangeTokens.indicatorSize, _emotion.rangeTokens.indicatorSizeOuter, _emotion.rangeTokens.indicatorPlacement, _emotion.rangeTokens.indicatorOuterPlacement, _emotion.rangeTokens.indicatorPlacementRight, _emotion.rangeTokens.indicatorOuterPlacementRight, _emotion.rangeTokens.textFieldHeight, _emotion.rangeTokens.textFieldBorderRadius, _emotion.rangeTokens.textFieldBorderWidth, _emotion.rangeTokens.textFieldPadding, _emotion.rangeTokens.textFieldFontFamily, _emotion.rangeTokens.textFieldFontStyle, _emotion.rangeTokens.textFieldFontSize, _emotion.rangeTokens.textFieldFontWeight, _emotion.rangeTokens.textFieldLetterSpacing, _emotion.rangeTokens.textFieldLineHeight, _emotion.rangeTokens.leftHelperOffset, _emotion.rangeTokens.leftHelperFontFamily, _emotion.rangeTokens.leftHelperFontStyle, _emotion.rangeTokens.leftHelperFontSize, _emotion.rangeTokens.leftHelperFontWeight, _emotion.rangeTokens.leftHelperLetterSpacing, _emotion.rangeTokens.leftHelperLineHeight, _emotion.rangeTokens.textFieldLeftContentMargin, _emotion.rangeTokens.textFieldRightContentMargin, _emotion.rangeTokens.textFieldTextBeforeMargin, _emotion.rangeTokens.textFieldTextAfterMargin)
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { ChangeEvent, ComponentProps, Dispatch, SetStateAction, useState } from 'react';
|
|
2
2
|
import type { StoryObj, Meta } from '@storybook/react';
|
|
3
3
|
import { action } from '@storybook/addon-actions';
|
|
4
|
-
import { InSpacingDecorator } from '@salutejs/plasma-sb-utils';
|
|
4
|
+
import { disableProps, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
|
|
5
5
|
import { IconSearch, IconSber, IconArrowRight } from '@salutejs/plasma-icons';
|
|
6
6
|
|
|
7
7
|
import { IconButton } from '../IconButton/IconButton';
|
|
@@ -46,6 +46,7 @@ const meta: Meta<typeof Range> = {
|
|
|
46
46
|
},
|
|
47
47
|
if: { arg: 'required', truthy: true },
|
|
48
48
|
},
|
|
49
|
+
...disableProps(['view']),
|
|
49
50
|
},
|
|
50
51
|
};
|
|
51
52
|
|
|
@@ -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.625rem;\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
|
|
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.625rem;\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\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.625rem;\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\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.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.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),
|
|
@@ -1,18 +1,19 @@
|
|
|
1
1
|
import React, { useState } from 'react';
|
|
2
2
|
import type { ComponentProps } from 'react';
|
|
3
3
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
4
|
-
import { disableProps, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
|
|
4
|
+
import { disableProps, InSpacingDecorator, getConfigVariations } from '@salutejs/plasma-sb-utils';
|
|
5
5
|
import { IconPlasma } from '@salutejs/plasma-icons';
|
|
6
6
|
|
|
7
7
|
import './style.css';
|
|
8
8
|
|
|
9
9
|
import { Select } from './Select';
|
|
10
|
+
import { config } from './Select.config';
|
|
10
11
|
|
|
11
12
|
type StorySelectProps = ComponentProps<typeof Select> & {
|
|
12
13
|
enableContentLeft?: boolean;
|
|
13
14
|
};
|
|
14
15
|
|
|
15
|
-
const
|
|
16
|
+
const { views } = getConfigVariations(config);
|
|
16
17
|
const variant = ['normal', 'tight'];
|
|
17
18
|
|
|
18
19
|
const meta: Meta<StorySelectProps> = {
|
|
@@ -25,8 +26,8 @@ const meta: Meta<StorySelectProps> = {
|
|
|
25
26
|
options: ['button-like', 'textfield-like'],
|
|
26
27
|
},
|
|
27
28
|
view: {
|
|
28
|
-
control: '
|
|
29
|
-
options:
|
|
29
|
+
control: 'inline-radio',
|
|
30
|
+
options: views,
|
|
30
31
|
},
|
|
31
32
|
variant: {
|
|
32
33
|
control: 'select',
|
|
@@ -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.625rem;\n ", ": 0.125rem;\n\n ", ": -0.1875rem 0.25rem -0.1875rem -0.125rem;\n ", ": -0.1875rem -0.125rem -0.1875rem 0.75rem;\n
|
|
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.625rem;\n ", ": 0.125rem;\n\n ", ": -0.1875rem 0.25rem -0.1875rem -0.125rem;\n ", ": -0.1875rem -0.125rem -0.1875rem 0.75rem;\n ", ": 1.625rem;\n ", ": 1.815rem;\n\n\n\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 calc(-0.25rem - var(", ")) 0 auto;\n ", ": 0 calc(0.25rem - var(", ")) 0 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\n\n ", ": 0 0.25rem 0 0;\n ", ": 0 0 0 0.25rem;\n "])), _emotion.textFieldTokens.height, _emotion.textFieldTokens.padding, _emotion.textFieldTokens.paddingWithChips, _emotion.textFieldTokens.borderRadius, _emotion.textFieldTokens.borderWidth, _emotion.textFieldTokens.leftContentMargin, _emotion.textFieldTokens.rightContentMargin, _emotion.textFieldTokens.rightContentWithInnerHintMarginRight, _emotion.textFieldTokens.clearRightContentWithInnerHintMarginRight, _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.hintTargetSize, _emotion.textFieldTokens.clearHintInnerLabelPlacementOffset, _emotion.textFieldTokens.hintTargetSize, _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, _emotion.textFieldTokens.textBeforeMargin, _emotion.textFieldTokens.textAfterMargin)
|
|
23
23
|
},
|
|
24
24
|
labelPlacement: {
|
|
25
25
|
outer: /*#__PURE__*/(0, _emotion.css)(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral([""])))
|
|
@@ -29,7 +29,7 @@ var config = exports.config = {
|
|
|
29
29
|
},
|
|
30
30
|
hintView: {
|
|
31
31
|
// TODO: заменить тень на токен https://github.com/salute-developers/plasma/issues/1131
|
|
32
|
-
"default": /*#__PURE__*/(0, _emotion.css)(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--surface-solid-card-brightness);\n ", ": 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08);\n ", ": var(--text-primary);\n ", ": var(--surface-solid-card-brightness);\n "])), _emotion.textFieldTokens.tooltipBackgroundColor, _emotion.textFieldTokens.tooltipBoxShadow, _emotion.textFieldTokens.tooltipColor, _emotion.textFieldTokens.tooltipArrowBackground)
|
|
32
|
+
"default": /*#__PURE__*/(0, _emotion.css)(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--surface-solid-card-brightness);\n ", ": var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08));\n ", ": var(--text-primary);\n ", ": var(--surface-solid-card-brightness);\n "])), _emotion.textFieldTokens.tooltipBackgroundColor, _emotion.textFieldTokens.tooltipBoxShadow, _emotion.textFieldTokens.tooltipColor, _emotion.textFieldTokens.tooltipArrowBackground)
|
|
33
33
|
},
|
|
34
34
|
hintSize: {
|
|
35
35
|
m: /*#__PURE__*/(0, _emotion.css)(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.6875rem;\n ", ": 0.875rem;\n ", ": 0.6875rem;\n ", ": 0.875rem;\n\n ", ": 2.5rem;\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.375rem;\n\n ", ": 1.25rem;\n ", ": 1.25rem;\n ", ": url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg==\");\n ", ": 0.5rem;\n ", ": 0.625rem;\n "])), _emotion.textFieldTokens.tooltipPaddingTop, _emotion.textFieldTokens.tooltipPaddingRight, _emotion.textFieldTokens.tooltipPaddingBottom, _emotion.textFieldTokens.tooltipPaddingLeft, _emotion.textFieldTokens.tooltipMinHeight, _emotion.textFieldTokens.tooltipBorderRadius, _emotion.textFieldTokens.tooltipTextFontFamily, _emotion.textFieldTokens.tooltipTextFontSize, _emotion.textFieldTokens.tooltipTextFontStyle, _emotion.textFieldTokens.tooltipTextFontWeight, _emotion.textFieldTokens.tooltipTextFontLetterSpacing, _emotion.textFieldTokens.tooltipTextFontLineHeight, _emotion.textFieldTokens.tooltipContentLeftMargin, _emotion.textFieldTokens.tooltipArrowMaskWidth, _emotion.textFieldTokens.tooltipArrowMaskHeight, _emotion.textFieldTokens.tooltipArrowMaskImage, _emotion.textFieldTokens.tooltipArrowHeight, _emotion.textFieldTokens.tooltipArrowEdgeMargin),
|
|
@@ -2,18 +2,18 @@ import React, { useState } from 'react';
|
|
|
2
2
|
import type { ComponentProps } from 'react';
|
|
3
3
|
import type { StoryObj, Meta } from '@storybook/react';
|
|
4
4
|
import { action } from '@storybook/addon-actions';
|
|
5
|
-
import { InSpacingDecorator, disableProps } from '@salutejs/plasma-sb-utils';
|
|
5
|
+
import { InSpacingDecorator, disableProps, getConfigVariations } from '@salutejs/plasma-sb-utils';
|
|
6
6
|
import { IconPlasma } from '@salutejs/plasma-icons';
|
|
7
7
|
|
|
8
|
-
import { TextField } from '
|
|
8
|
+
import { TextField } from './TextField';
|
|
9
|
+
import { config } from './TextField.config';
|
|
9
10
|
|
|
10
11
|
const onChange = action('onChange');
|
|
11
12
|
const onFocus = action('onFocus');
|
|
12
13
|
const onBlur = action('onBlur');
|
|
13
14
|
const onSearch = action('onSearch');
|
|
14
15
|
|
|
15
|
-
const sizes =
|
|
16
|
-
const views = ['default', 'negative'];
|
|
16
|
+
const { views, sizes } = getConfigVariations(config);
|
|
17
17
|
const labelPlacements = ['outer'];
|
|
18
18
|
|
|
19
19
|
const meta: Meta<typeof TextField> = {
|
|
@@ -13,7 +13,7 @@ export var config = {
|
|
|
13
13
|
negative: /*#__PURE__*/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(--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-accent);\n ", ": var(--surface-negative);\n ", ": var(--text-tertiary);\n\n ", ": var(--outline-negative);\n ", ": var(--outline-negative-hover);\n ", ": var(--outline-accent);\n\n ", ": var(--surface-solid-card);\n ", ": 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04);\n ", ": var(--plasma-colors-transparent);\n ", ": var(--surface-transparent-accent);\n ", ": var(--text-primary);\n\n ", ": var(--text-primary);\n\n ", ": var(--surface-solid-primary);\n "])), tokens.textFieldColor, tokens.textFieldClearColor, tokens.textFieldPlaceholderColor, tokens.textFieldPlaceholderColorFocus, tokens.textFieldClearPlaceholderColor, tokens.textFieldClearPlaceholderColorFocus, tokens.textFieldBackgroundColor, tokens.textFieldBackgroundColorFocus, tokens.textFieldCaretColor, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.textFieldLabelColor, tokens.textFieldLeftHelperColor, tokens.textFieldFocusColor, tokens.textFieldContentSlotColor, tokens.textFieldContentSlotColorHover, tokens.textFieldContentSlotColorActive, tokens.textFieldContentSlotRightColor, tokens.textFieldContentSlotRightColorHover, tokens.textFieldContentSlotRightColorActive, tokens.focusColor, tokens.textFieldIndicatorColor, tokens.textFieldOptionalColor, tokens.textFieldBorderColor, tokens.textFieldBorderColorHover, tokens.textFieldBorderColorFocus, tokens.background, tokens.boxShadow, tokens.itemBackground, tokens.itemBackgroundHover, tokens.itemColor, tokens.infiniteLoaderSpinnerColor, tokens.dropdownBorderColor)
|
|
14
14
|
},
|
|
15
15
|
size: {
|
|
16
|
-
s: /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 2.5rem;\n ", ": 0.6875rem 0.75rem 0.6875rem 0.75rem;\n ", ": 0.625rem;\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
|
|
16
|
+
s: /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 2.5rem;\n ", ": 0.6875rem 0.75rem 0.6875rem 0.75rem;\n ", ": 0.625rem;\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\n ", ": 0.625rem;\n ", ": 0.125rem;\n ", ": 0.6875rem 0.75rem;\n ", ": 0.5rem;\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.375rem 0.625rem 0.625rem 0.625rem;\n ", ": 0.25rem;\n\n ", ": 1.5rem;\n ", ": 0.25rem;\n\n ", ": 0.125rem;\n "])), tokens.textFieldHeight, tokens.textFieldPadding, tokens.textFieldBorderRadius, tokens.textFieldBorderWidth, tokens.textFieldLeftContentMargin, tokens.textFieldRightContentMargin, tokens.textFieldTextBeforeMargin, tokens.textFieldTextAfterMargin, tokens.textFieldFontFamily, tokens.textFieldFontSize, tokens.textFieldFontStyle, tokens.textFieldFontWeight, tokens.textFieldLetterSpacing, tokens.textFieldLineHeight, tokens.textFieldLabelOffset, tokens.textFieldLabelFontFamily, tokens.textFieldLabelFontSize, tokens.textFieldLabelFontStyle, tokens.textFieldLabelFontWeight, tokens.textFieldLabelLetterSpacing, tokens.textFieldLabelLineHeight, tokens.textFieldLeftHelperOffset, tokens.textFieldLeftHelperFontFamily, tokens.textFieldLeftHelperFontSize, tokens.textFieldLeftHelperFontStyle, tokens.textFieldLeftHelperFontWeight, tokens.textFieldLeftHelperLetterSpacing, tokens.textFieldLeftHelperLineHeight, tokens.textFieldLabelInnerPadding, tokens.textFieldContentLabelInnerPadding, tokens.textFieldIndicatorSizeInner, tokens.textFieldIndicatorSizeOuter, tokens.textFieldIndicatorLabelPlacementInner, tokens.textFieldIndicatorLabelPlacementOuter, tokens.textFieldIndicatorLabelPlacementInnerRight, tokens.textFieldIndicatorLabelPlacementOuterRight, tokens.textFieldClearIndicatorLabelPlacementInner, tokens.textFieldClearIndicatorLabelPlacementInnerRight, tokens.borderRadius, tokens.padding, tokens.itemPadding, tokens.itemBorderRadius, tokens.itemFontFamily, tokens.itemFontSize, tokens.itemFontStyle, tokens.itemFontWeight, tokens.itemFontLetterSpacing, tokens.itemFontLineHeight, tokens.emptyStatePadding, tokens.emptyStateGap, tokens.infiniteLoaderSpinnerSize, tokens.infiniteLoaderGap, tokens.dropdownBorderWidth)
|
|
17
17
|
},
|
|
18
18
|
labelPlacement: {
|
|
19
19
|
inner: /*#__PURE__*/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 "])), tokens.textFieldPlaceholderColor, tokens.textFieldLabelInnerFontFamily, tokens.textFieldLabelInnerFontSize, tokens.textFieldLabelInnerFontStyle, tokens.textFieldLabelInnerFontWeight, tokens.textFieldLabelInnerLetterSpacing, tokens.textFieldLabelInnerLineHeight),
|