@salutejs/plasma-new-hope 0.193.1-canary.1561.11839785759.0 → 0.194.0-canary.1558.11852073996.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Modal/Modal.css +6 -0
- package/cjs/components/Modal/Modal.js +27 -13
- package/cjs/components/Modal/Modal.js.map +1 -1
- package/cjs/components/Modal/Modal.styles.js +27 -0
- package/cjs/components/Modal/Modal.styles.js.map +1 -0
- package/cjs/components/Modal/Modal.styles_tqsxxy.css +3 -0
- package/cjs/components/Modal/Modal.tokens.js +7 -1
- package/cjs/components/Modal/Modal.tokens.js.map +1 -1
- package/cjs/components/Pagination/Pagination.css +2 -2
- package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +2 -2
- package/cjs/components/Select/Select.css +2 -2
- package/cjs/components/Select/Select.js +4 -11
- package/cjs/components/Select/Select.js.map +1 -1
- package/cjs/components/Select/Select.tokens.js +1 -11
- package/cjs/components/Select/Select.tokens.js.map +1 -1
- package/cjs/components/Select/ui/Inner/Inner.css +2 -2
- package/cjs/components/Select/ui/Inner/ui/Item/Item.css +2 -2
- package/cjs/components/Select/ui/Target/Target.css +2 -2
- package/cjs/components/Select/ui/Target/Target.js +4 -5
- package/cjs/components/Select/ui/Target/Target.js.map +1 -1
- package/cjs/components/Select/ui/Target/ui/Textfield/Textfield.css +2 -2
- package/cjs/components/Select/ui/Target/ui/Textfield/Textfield.js +2 -3
- package/cjs/components/Select/ui/Target/ui/Textfield/Textfield.js.map +1 -1
- package/cjs/components/Select/ui/Target/ui/Textfield/Textfield.styles.js +7 -7
- package/cjs/components/Select/ui/Target/ui/Textfield/Textfield.styles.js.map +1 -1
- package/cjs/components/Select/ui/Target/ui/Textfield/Textfield.styles_q4kc1p.css +3 -0
- package/cjs/index.css +6 -2
- package/emotion/cjs/components/Modal/Modal.js +26 -12
- package/emotion/cjs/components/Modal/Modal.styles.js +27 -0
- package/emotion/cjs/components/Modal/Modal.template-doc.mdx +47 -0
- package/emotion/cjs/components/Modal/Modal.tokens.js +7 -1
- package/emotion/cjs/components/Select/Select.js +4 -11
- package/emotion/cjs/components/Select/Select.tokens.js +1 -11
- package/emotion/cjs/components/Select/ui/Target/Target.js +4 -5
- package/emotion/cjs/components/Select/ui/Target/ui/Textfield/Textfield.js +2 -3
- package/emotion/cjs/components/Select/ui/Target/ui/Textfield/Textfield.styles.js +3 -3
- package/emotion/cjs/examples/plasma_b2c/components/Modal/Modal.config.js +1 -1
- package/emotion/cjs/examples/plasma_b2c/components/Modal/Modal.stories.tsx +90 -1
- package/emotion/cjs/examples/plasma_b2c/components/Select/Select.config.js +20 -20
- package/emotion/cjs/examples/plasma_b2c/components/Select/Select.stories.tsx +0 -25
- package/emotion/cjs/examples/plasma_web/components/Modal/Modal.config.js +1 -1
- package/emotion/cjs/examples/plasma_web/components/Modal/Modal.stories.tsx +90 -1
- package/emotion/cjs/examples/plasma_web/components/Select/Select.config.js +20 -20
- package/emotion/cjs/examples/plasma_web/components/Select/Select.stories.tsx +0 -24
- package/emotion/es/components/Modal/Modal.js +26 -12
- package/emotion/es/components/Modal/Modal.styles.js +20 -0
- package/emotion/es/components/Modal/Modal.template-doc.mdx +47 -0
- package/emotion/es/components/Modal/Modal.tokens.js +7 -1
- package/emotion/es/components/Select/Select.js +4 -11
- package/emotion/es/components/Select/Select.tokens.js +1 -11
- package/emotion/es/components/Select/ui/Target/Target.js +4 -5
- package/emotion/es/components/Select/ui/Target/ui/Textfield/Textfield.js +2 -3
- package/emotion/es/components/Select/ui/Target/ui/Textfield/Textfield.styles.js +3 -3
- package/emotion/es/examples/plasma_b2c/components/Modal/Modal.config.js +1 -1
- package/emotion/es/examples/plasma_b2c/components/Modal/Modal.stories.tsx +90 -1
- package/emotion/es/examples/plasma_b2c/components/Select/Select.config.js +20 -20
- package/emotion/es/examples/plasma_b2c/components/Select/Select.stories.tsx +0 -25
- package/emotion/es/examples/plasma_web/components/Modal/Modal.config.js +1 -1
- package/emotion/es/examples/plasma_web/components/Modal/Modal.stories.tsx +90 -1
- package/emotion/es/examples/plasma_web/components/Select/Select.config.js +20 -20
- package/emotion/es/examples/plasma_web/components/Select/Select.stories.tsx +0 -24
- package/es/components/Modal/Modal.css +6 -0
- package/es/components/Modal/Modal.js +27 -13
- package/es/components/Modal/Modal.js.map +1 -1
- package/es/components/Modal/Modal.styles.js +21 -0
- package/es/components/Modal/Modal.styles.js.map +1 -0
- package/es/components/Modal/Modal.styles_tqsxxy.css +3 -0
- package/es/components/Modal/Modal.tokens.js +7 -1
- package/es/components/Modal/Modal.tokens.js.map +1 -1
- package/es/components/Pagination/Pagination.css +2 -2
- package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +2 -2
- package/es/components/Select/Select.css +2 -2
- package/es/components/Select/Select.js +4 -11
- package/es/components/Select/Select.js.map +1 -1
- package/es/components/Select/Select.tokens.js +1 -11
- package/es/components/Select/Select.tokens.js.map +1 -1
- package/es/components/Select/ui/Inner/Inner.css +2 -2
- package/es/components/Select/ui/Inner/ui/Item/Item.css +2 -2
- package/es/components/Select/ui/Target/Target.css +2 -2
- package/es/components/Select/ui/Target/Target.js +4 -5
- package/es/components/Select/ui/Target/Target.js.map +1 -1
- package/es/components/Select/ui/Target/ui/Textfield/Textfield.css +2 -2
- package/es/components/Select/ui/Target/ui/Textfield/Textfield.js +2 -3
- package/es/components/Select/ui/Target/ui/Textfield/Textfield.js.map +1 -1
- package/es/components/Select/ui/Target/ui/Textfield/Textfield.styles.js +7 -7
- package/es/components/Select/ui/Target/ui/Textfield/Textfield.styles.js.map +1 -1
- package/es/components/Select/ui/Target/ui/Textfield/Textfield.styles_q4kc1p.css +3 -0
- package/es/index.css +6 -2
- package/package.json +2 -2
- package/styled-components/cjs/components/Modal/Modal.js +26 -12
- package/styled-components/cjs/components/Modal/Modal.styles.js +24 -0
- package/styled-components/cjs/components/Modal/Modal.template-doc.mdx +47 -0
- package/styled-components/cjs/components/Modal/Modal.tokens.js +7 -1
- package/styled-components/cjs/components/Select/Select.js +4 -11
- package/styled-components/cjs/components/Select/Select.tokens.js +1 -11
- package/styled-components/cjs/components/Select/ui/Target/Target.js +4 -5
- package/styled-components/cjs/components/Select/ui/Target/ui/Textfield/Textfield.js +2 -3
- package/styled-components/cjs/components/Select/ui/Target/ui/Textfield/Textfield.styles.js +2 -2
- package/styled-components/cjs/examples/plasma_b2c/components/Modal/Modal.config.js +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Modal/Modal.stories.tsx +90 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Select/Select.config.js +8 -8
- package/styled-components/cjs/examples/plasma_b2c/components/Select/Select.stories.tsx +0 -25
- package/styled-components/cjs/examples/plasma_web/components/Modal/Modal.config.js +1 -1
- package/styled-components/cjs/examples/plasma_web/components/Modal/Modal.stories.tsx +90 -1
- package/styled-components/cjs/examples/plasma_web/components/Select/Select.config.js +8 -8
- package/styled-components/cjs/examples/plasma_web/components/Select/Select.stories.tsx +0 -24
- package/styled-components/es/components/Modal/Modal.js +26 -12
- package/styled-components/es/components/Modal/Modal.styles.js +17 -0
- package/styled-components/es/components/Modal/Modal.template-doc.mdx +47 -0
- package/styled-components/es/components/Modal/Modal.tokens.js +7 -1
- package/styled-components/es/components/Select/Select.js +4 -11
- package/styled-components/es/components/Select/Select.tokens.js +1 -11
- package/styled-components/es/components/Select/ui/Target/Target.js +4 -5
- package/styled-components/es/components/Select/ui/Target/ui/Textfield/Textfield.js +2 -3
- package/styled-components/es/components/Select/ui/Target/ui/Textfield/Textfield.styles.js +2 -2
- package/styled-components/es/examples/plasma_b2c/components/Modal/Modal.config.js +1 -1
- package/styled-components/es/examples/plasma_b2c/components/Modal/Modal.stories.tsx +90 -1
- package/styled-components/es/examples/plasma_b2c/components/Select/Select.config.js +8 -8
- package/styled-components/es/examples/plasma_b2c/components/Select/Select.stories.tsx +0 -25
- package/styled-components/es/examples/plasma_web/components/Modal/Modal.config.js +1 -1
- package/styled-components/es/examples/plasma_web/components/Modal/Modal.stories.tsx +90 -1
- package/styled-components/es/examples/plasma_web/components/Select/Select.config.js +8 -8
- package/styled-components/es/examples/plasma_web/components/Select/Select.stories.tsx +0 -24
- package/types/components/Modal/Modal.d.ts.map +1 -1
- package/types/components/Modal/Modal.styles.d.ts +5 -0
- package/types/components/Modal/Modal.styles.d.ts.map +1 -0
- package/types/components/Modal/Modal.tokens.d.ts +6 -0
- package/types/components/Modal/Modal.tokens.d.ts.map +1 -1
- package/types/components/Modal/Modal.types.d.ts +21 -1
- package/types/components/Modal/Modal.types.d.ts.map +1 -1
- package/types/components/Modal/index.d.ts +1 -1
- package/types/components/Modal/index.d.ts.map +1 -1
- package/types/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.styles.d.ts +0 -96
- package/types/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.styles.d.ts.map +1 -1
- package/types/components/Select/Select.d.ts.map +1 -1
- package/types/components/Select/Select.tokens.d.ts +1 -11
- package/types/components/Select/Select.tokens.d.ts.map +1 -1
- package/types/components/Select/Select.types.d.ts +2 -4
- package/types/components/Select/Select.types.d.ts.map +1 -1
- package/types/components/Select/ui/Target/Target.d.ts +1 -2
- package/types/components/Select/ui/Target/Target.d.ts.map +1 -1
- package/types/components/Select/ui/Target/Target.types.d.ts +2 -3
- package/types/components/Select/ui/Target/Target.types.d.ts.map +1 -1
- package/types/components/Select/ui/Target/ui/Textfield/Textfield.d.ts.map +1 -1
- package/types/components/Select/ui/Target/ui/Textfield/Textfield.styles.d.ts.map +1 -1
- package/types/components/Select/ui/Target/ui/Textfield/Textfield.types.d.ts +1 -1
- package/types/components/Select/ui/Target/ui/Textfield/Textfield.types.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Modal/Modal.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Modal/Modal.d.ts +7 -1
- package/types/examples/plasma_b2c/components/Modal/Modal.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Select/Select.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Select/Select.d.ts +0 -96
- package/types/examples/plasma_b2c/components/Select/Select.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Modal/Modal.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Modal/Modal.d.ts +7 -1
- package/types/examples/plasma_web/components/Modal/Modal.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Select/Select.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Select/Select.d.ts +0 -96
- package/types/examples/plasma_web/components/Select/Select.d.ts.map +1 -1
- package/cjs/components/Select/ui/Target/ui/Textfield/Textfield.styles_1b7iij0.css +0 -3
- package/es/components/Select/ui/Target/ui/Textfield/Textfield.styles_1b7iij0.css +0 -3
@@ -3,6 +3,7 @@ import { useForkRef } from '@salutejs/plasma-core';
|
|
3
3
|
import { Button, Textfield } from './ui';
|
4
4
|
export var Target = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
5
5
|
var value = _ref.value,
|
6
|
+
target = _ref.target,
|
6
7
|
opened = _ref.opened,
|
7
8
|
valueToItemMap = _ref.valueToItemMap,
|
8
9
|
label = _ref.label,
|
@@ -25,8 +26,7 @@ export var Target = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
25
26
|
onChange = _ref.onChange,
|
26
27
|
labelToItemMap = _ref.labelToItemMap,
|
27
28
|
chipView = _ref.chipView,
|
28
|
-
separator = _ref.separator
|
29
|
-
requiredProps = _ref.requiredProps;
|
29
|
+
separator = _ref.separator;
|
30
30
|
var buttonRef = useForkRef(ref, inputWrapperRef);
|
31
31
|
if (selectProps.renderTarget) {
|
32
32
|
return /*#__PURE__*/React.createElement("div", {
|
@@ -35,7 +35,7 @@ export var Target = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
35
35
|
return valueToItemMap.get(value);
|
36
36
|
}) : valueToItemMap.get(value)));
|
37
37
|
}
|
38
|
-
return
|
38
|
+
return target === 'button-like' ? /*#__PURE__*/React.createElement(Button, {
|
39
39
|
ref: buttonRef,
|
40
40
|
opened: opened,
|
41
41
|
value: value,
|
@@ -72,7 +72,6 @@ export var Target = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
72
72
|
renderValue: renderValue,
|
73
73
|
onChange: onChange,
|
74
74
|
labelToItemMap: labelToItemMap,
|
75
|
-
chipView: chipView
|
76
|
-
requiredProps: requiredProps
|
75
|
+
chipView: chipView
|
77
76
|
});
|
78
77
|
});
|
@@ -26,8 +26,7 @@ export var Textfield = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
26
26
|
renderValue = _ref.renderValue,
|
27
27
|
onChange = _ref.onChange,
|
28
28
|
labelToItemMap = _ref.labelToItemMap,
|
29
|
-
chipView = _ref.chipView
|
30
|
-
requiredProps = _ref.requiredProps;
|
29
|
+
chipView = _ref.chipView;
|
31
30
|
var withArrowInverse = opened ? classes.arrowInverse : undefined;
|
32
31
|
var getChips = function getChips() {
|
33
32
|
if (multiselect && Array.isArray(value)) {
|
@@ -93,5 +92,5 @@ export var Textfield = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
93
92
|
// TODO: #1547
|
94
93
|
,
|
95
94
|
_forceChipManipulationWithReadonly: true
|
96
|
-
}
|
95
|
+
}));
|
97
96
|
});
|
@@ -7,7 +7,7 @@ var mergedConfig = /*#__PURE__*/mergeConfig(textFieldConfig);
|
|
7
7
|
var TextField = /*#__PURE__*/component(mergedConfig);
|
8
8
|
export var StyledTextField = /*#__PURE__*/styled(TextField).withConfig({
|
9
9
|
componentId: "plasma-new-hope__sc-1akl2tk-0"
|
10
|
-
})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":", ";", ":", ";", ":var(", ");", ":var(", ");", ":", ";", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ")
|
10
|
+
})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":", ";", ":", ";", ":var(", ");", ":var(", ");", ":", ";", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");& div.input-wrapper:focus-within{background-color:var(", ");}"], textFieldTokens.color, tokens.textFieldColor, textFieldTokens.backgroundColor, tokens.textFieldBackgroundColor, textFieldTokens.borderColor, tokens.textFieldBorderColor, textFieldTokens.placeholderColor, tokens.textFieldPlaceholderColor, textFieldTokens.labelColor, tokens.textFieldLabelColor, textFieldTokens.leftHelperColor, tokens.textFieldLeftHelperColor, textFieldTokens.colorReadOnly, tokens.textFieldColor, textFieldTokens.backgroundColorReadOnly, function (_ref) {
|
11
11
|
var opened = _ref.opened;
|
12
12
|
return opened ? "var(".concat(tokens.textFieldBackgroundColorFocus, ")") : "var(".concat(tokens.textFieldBackgroundColor, ")");
|
13
13
|
}, textFieldTokens.placeholderColorReadOnly, function (_ref2) {
|
@@ -16,7 +16,7 @@ export var StyledTextField = /*#__PURE__*/styled(TextField).withConfig({
|
|
16
16
|
}, textFieldTokens.leftHelperColorReadOnly, tokens.textFieldLeftHelperColor, textFieldTokens.labelColorReadOnly, tokens.textFieldLabelColor, textFieldTokens.borderColorReadOnly, function (_ref3) {
|
17
17
|
var opened = _ref3.opened;
|
18
18
|
return opened ? "var(".concat(tokens.textFieldBorderColorFocus, ")") : "var(".concat(tokens.textFieldBorderColor, ")");
|
19
|
-
}, textFieldTokens.placeholderColor, tokens.textFieldPlaceholderColor, textFieldTokens.borderColorHover, tokens.textFieldBorderColorHover, textFieldTokens.borderColorFocus, tokens.textFieldBorderColorFocus, textFieldTokens.optionalColor, tokens.textFieldOptionalColor, textFieldTokens.height, tokens.textFieldHeight, textFieldTokens.borderWidth, tokens.textFieldBorderWidth, textFieldTokens.borderRadius, tokens.textFieldBorderRadius, textFieldTokens.padding, tokens.textFieldPadding, textFieldTokens.paddingWithChips, tokens.textFieldPaddingWithChips, textFieldTokens.leftContentMargin, tokens.textFieldLeftContentMargin, textFieldTokens.rightContentMargin, tokens.textFieldRightContentMargin, textFieldTokens.fontFamily, tokens.textFieldFontFamily, textFieldTokens.fontStyle, tokens.textFieldFontStyle, textFieldTokens.fontSize, tokens.textFieldFontSize, textFieldTokens.fontWeight, tokens.textFieldFontWeight, textFieldTokens.letterSpacing, tokens.textFieldLetterSpacing, textFieldTokens.lineHeight, tokens.textFieldLineHeight, textFieldTokens.contentSlotColor, tokens.textFieldContentSlotColor, textFieldTokens.contentSlotColorHover, tokens.textFieldContentSlotColorHover, textFieldTokens.contentSlotColorActive, tokens.textFieldContentSlotColorActive, textFieldTokens.contentSlotRightColor, tokens.textFieldContentSlotRightColor, textFieldTokens.contentSlotRightColorHover, tokens.textFieldContentSlotRightColorHover, textFieldTokens.contentSlotRightColorActive, tokens.textFieldContentSlotRightColorActive, textFieldTokens.labelOffset, tokens.textFieldLabelOffset, textFieldTokens.labelFontFamily, tokens.textFieldLabelFontFamily, textFieldTokens.labelFontStyle, tokens.textFieldLabelFontStyle, textFieldTokens.labelFontSize, tokens.textFieldLabelFontSize, textFieldTokens.labelFontWeight, tokens.textFieldLabelFontWeight, textFieldTokens.labelLetterSpacing, tokens.textFieldLabelLetterSpacing, textFieldTokens.labelLineHeight, tokens.textFieldLabelLineHeight, textFieldTokens.labelInnerFontFamily, tokens.textFieldLabelInnerFontFamily, textFieldTokens.labelInnerFontStyle, tokens.textFieldLabelInnerFontStyle, textFieldTokens.labelInnerFontSize, tokens.textFieldLabelInnerFontSize, textFieldTokens.labelInnerFontWeight, tokens.textFieldLabelInnerFontWeight, textFieldTokens.labelInnerLetterSpacing, tokens.textFieldLabelInnerLetterSpacing, textFieldTokens.labelInnerLineHeight, tokens.textFieldLabelInnerLineHeight, textFieldTokens.labelInnerPadding, tokens.textFieldLabelInnerPadding, textFieldTokens.contentLabelInnerPadding, tokens.textFieldContentLabelInnerPadding, textFieldTokens.titleCaptionColor, tokens.textFieldTitleCaptionColor, textFieldTokens.titleCaptionInnerLabelOffset, tokens.textFieldTitleCaptionInnerLabelOffset, textFieldTokens.titleCaptionFontFamily, tokens.textFieldTitleCaptionFontFamily, textFieldTokens.titleCaptionFontStyle, tokens.textFieldTitleCaptionFontStyle, textFieldTokens.titleCaptionFontSize, tokens.textFieldTitleCaptionFontSize, textFieldTokens.titleCaptionFontWeight, tokens.textFieldTitleCaptionFontWeight, textFieldTokens.titleCaptionLetterSpacing, tokens.textFieldTitleCaptionLetterSpacing, textFieldTokens.titleCaptionLineHeight, tokens.textFieldTitleCaptionLineHeight, textFieldTokens.leftHelperOffset, tokens.textFieldLeftHelperOffset, textFieldTokens.leftHelperFontFamily, tokens.textFieldLeftHelperFontFamily, textFieldTokens.leftHelperFontStyle, tokens.textFieldLeftHelperFontStyle, textFieldTokens.leftHelperFontSize, tokens.textFieldLeftHelperFontSize, textFieldTokens.leftHelperFontWeight, tokens.textFieldLeftHelperFontWeight, textFieldTokens.leftHelperLetterSpacing, tokens.textFieldLeftHelperLetterSpacing, textFieldTokens.leftHelperLineHeight, tokens.textFieldLeftHelperLineHeight, textFieldTokens.textBeforeColor, tokens.textFieldTextBeforeColor, textFieldTokens.textAfterColor, tokens.textFieldTextAfterColor, textFieldTokens.textBeforeMargin, tokens.textFieldTextBeforeMargin, textFieldTokens.textAfterMargin, tokens.textFieldTextAfterMargin, textFieldTokens.disabledOpacity, tokens.textFieldDisabledOpacity, textFieldTokens.chipHeight, tokens.textFieldChipHeight, textFieldTokens.chipBorderRadius, tokens.textFieldChipBorderRadius, textFieldTokens.chipGap, tokens.textFieldChipGap, textFieldTokens.chipColor, tokens.textFieldChipColor, textFieldTokens.chipColorHover, tokens.textFieldChipColorHover, textFieldTokens.chipScaleHover, tokens.textFieldChipScaleHover, textFieldTokens.chipBackground, tokens.textFieldChipBackground, textFieldTokens.chipBackgroundActive, tokens.textFieldChipBackgroundActive, textFieldTokens.chipColorActive, tokens.textFieldChipColorActive, textFieldTokens.chipScaleActive, tokens.textFieldChipScaleActive, textFieldTokens.chipCloseIconColor, tokens.textFieldChipCloseIconColor, textFieldTokens.chipOutlineSize, tokens.textFieldChipOutlineSize, textFieldTokens.chipWidth, tokens.textFieldChipWidth, textFieldTokens.chipPaddingTop, tokens.textFieldChipPaddingTop, textFieldTokens.chipPaddingRight, tokens.textFieldChipPaddingRight, textFieldTokens.chipPaddingBottom, tokens.textFieldChipPaddingBottom, textFieldTokens.chipPaddingLeft, tokens.textFieldChipPaddingLeft, textFieldTokens.chipCloseIconSize, tokens.textFieldChipCloseIconSize, textFieldTokens.chipFontFamily, tokens.textFieldChipFontFamily, textFieldTokens.chipFontSize, tokens.textFieldChipFontSize, textFieldTokens.chipFontStyle, tokens.textFieldChipFontStyle, textFieldTokens.chipFontWeight, tokens.textFieldChipFontWeight, textFieldTokens.chipLetterSpacing, tokens.textFieldChipLetterSpacing, textFieldTokens.chipLineHeight, tokens.textFieldChipLineHeight, textFieldTokens.chipColorReadOnly, tokens.textFieldChipColor, textFieldTokens.chipColorReadOnlyHover, tokens.textFieldChipColor, textFieldTokens.chipBackgroundReadOnly, tokens.textFieldChipBackground, textFieldTokens.chipBackgroundReadOnlyHover, tokens.textFieldChipBackgroundHover, textFieldTokens.chipClearContentMarginLeft, tokens.textFieldChipClearContentMarginLeft, textFieldTokens.chipClearContentMarginRight, tokens.textFieldChipClearContentMarginRight, textFieldTokens.
|
19
|
+
}, textFieldTokens.placeholderColor, tokens.textFieldPlaceholderColor, textFieldTokens.borderColorHover, tokens.textFieldBorderColorHover, textFieldTokens.borderColorFocus, tokens.textFieldBorderColorFocus, textFieldTokens.optionalColor, tokens.textFieldOptionalColor, textFieldTokens.height, tokens.textFieldHeight, textFieldTokens.borderWidth, tokens.textFieldBorderWidth, textFieldTokens.borderRadius, tokens.textFieldBorderRadius, textFieldTokens.padding, tokens.textFieldPadding, textFieldTokens.paddingWithChips, tokens.textFieldPaddingWithChips, textFieldTokens.leftContentMargin, tokens.textFieldLeftContentMargin, textFieldTokens.rightContentMargin, tokens.textFieldRightContentMargin, textFieldTokens.fontFamily, tokens.textFieldFontFamily, textFieldTokens.fontStyle, tokens.textFieldFontStyle, textFieldTokens.fontSize, tokens.textFieldFontSize, textFieldTokens.fontWeight, tokens.textFieldFontWeight, textFieldTokens.letterSpacing, tokens.textFieldLetterSpacing, textFieldTokens.lineHeight, tokens.textFieldLineHeight, textFieldTokens.contentSlotColor, tokens.textFieldContentSlotColor, textFieldTokens.contentSlotColorHover, tokens.textFieldContentSlotColorHover, textFieldTokens.contentSlotColorActive, tokens.textFieldContentSlotColorActive, textFieldTokens.contentSlotRightColor, tokens.textFieldContentSlotRightColor, textFieldTokens.contentSlotRightColorHover, tokens.textFieldContentSlotRightColorHover, textFieldTokens.contentSlotRightColorActive, tokens.textFieldContentSlotRightColorActive, textFieldTokens.labelOffset, tokens.textFieldLabelOffset, textFieldTokens.labelFontFamily, tokens.textFieldLabelFontFamily, textFieldTokens.labelFontStyle, tokens.textFieldLabelFontStyle, textFieldTokens.labelFontSize, tokens.textFieldLabelFontSize, textFieldTokens.labelFontWeight, tokens.textFieldLabelFontWeight, textFieldTokens.labelLetterSpacing, tokens.textFieldLabelLetterSpacing, textFieldTokens.labelLineHeight, tokens.textFieldLabelLineHeight, textFieldTokens.labelInnerFontFamily, tokens.textFieldLabelInnerFontFamily, textFieldTokens.labelInnerFontStyle, tokens.textFieldLabelInnerFontStyle, textFieldTokens.labelInnerFontSize, tokens.textFieldLabelInnerFontSize, textFieldTokens.labelInnerFontWeight, tokens.textFieldLabelInnerFontWeight, textFieldTokens.labelInnerLetterSpacing, tokens.textFieldLabelInnerLetterSpacing, textFieldTokens.labelInnerLineHeight, tokens.textFieldLabelInnerLineHeight, textFieldTokens.labelInnerPadding, tokens.textFieldLabelInnerPadding, textFieldTokens.contentLabelInnerPadding, tokens.textFieldContentLabelInnerPadding, textFieldTokens.titleCaptionColor, tokens.textFieldTitleCaptionColor, textFieldTokens.titleCaptionInnerLabelOffset, tokens.textFieldTitleCaptionInnerLabelOffset, textFieldTokens.titleCaptionFontFamily, tokens.textFieldTitleCaptionFontFamily, textFieldTokens.titleCaptionFontStyle, tokens.textFieldTitleCaptionFontStyle, textFieldTokens.titleCaptionFontSize, tokens.textFieldTitleCaptionFontSize, textFieldTokens.titleCaptionFontWeight, tokens.textFieldTitleCaptionFontWeight, textFieldTokens.titleCaptionLetterSpacing, tokens.textFieldTitleCaptionLetterSpacing, textFieldTokens.titleCaptionLineHeight, tokens.textFieldTitleCaptionLineHeight, textFieldTokens.leftHelperOffset, tokens.textFieldLeftHelperOffset, textFieldTokens.leftHelperFontFamily, tokens.textFieldLeftHelperFontFamily, textFieldTokens.leftHelperFontStyle, tokens.textFieldLeftHelperFontStyle, textFieldTokens.leftHelperFontSize, tokens.textFieldLeftHelperFontSize, textFieldTokens.leftHelperFontWeight, tokens.textFieldLeftHelperFontWeight, textFieldTokens.leftHelperLetterSpacing, tokens.textFieldLeftHelperLetterSpacing, textFieldTokens.leftHelperLineHeight, tokens.textFieldLeftHelperLineHeight, textFieldTokens.textBeforeColor, tokens.textFieldTextBeforeColor, textFieldTokens.textAfterColor, tokens.textFieldTextAfterColor, textFieldTokens.textBeforeMargin, tokens.textFieldTextBeforeMargin, textFieldTokens.textAfterMargin, tokens.textFieldTextAfterMargin, textFieldTokens.disabledOpacity, tokens.textFieldDisabledOpacity, textFieldTokens.chipHeight, tokens.textFieldChipHeight, textFieldTokens.chipBorderRadius, tokens.textFieldChipBorderRadius, textFieldTokens.chipGap, tokens.textFieldChipGap, textFieldTokens.chipColor, tokens.textFieldChipColor, textFieldTokens.chipColorHover, tokens.textFieldChipColorHover, textFieldTokens.chipScaleHover, tokens.textFieldChipScaleHover, textFieldTokens.chipBackground, tokens.textFieldChipBackground, textFieldTokens.chipBackgroundActive, tokens.textFieldChipBackgroundActive, textFieldTokens.chipColorActive, tokens.textFieldChipColorActive, textFieldTokens.chipScaleActive, tokens.textFieldChipScaleActive, textFieldTokens.chipCloseIconColor, tokens.textFieldChipCloseIconColor, textFieldTokens.chipOutlineSize, tokens.textFieldChipOutlineSize, textFieldTokens.chipWidth, tokens.textFieldChipWidth, textFieldTokens.chipPaddingTop, tokens.textFieldChipPaddingTop, textFieldTokens.chipPaddingRight, tokens.textFieldChipPaddingRight, textFieldTokens.chipPaddingBottom, tokens.textFieldChipPaddingBottom, textFieldTokens.chipPaddingLeft, tokens.textFieldChipPaddingLeft, textFieldTokens.chipCloseIconSize, tokens.textFieldChipCloseIconSize, textFieldTokens.chipFontFamily, tokens.textFieldChipFontFamily, textFieldTokens.chipFontSize, tokens.textFieldChipFontSize, textFieldTokens.chipFontStyle, tokens.textFieldChipFontStyle, textFieldTokens.chipFontWeight, tokens.textFieldChipFontWeight, textFieldTokens.chipLetterSpacing, tokens.textFieldChipLetterSpacing, textFieldTokens.chipLineHeight, tokens.textFieldChipLineHeight, textFieldTokens.chipColorReadOnly, tokens.textFieldChipColor, textFieldTokens.chipColorReadOnlyHover, tokens.textFieldChipColor, textFieldTokens.chipBackgroundReadOnly, tokens.textFieldChipBackground, textFieldTokens.chipBackgroundReadOnlyHover, tokens.textFieldChipBackgroundHover, textFieldTokens.chipClearContentMarginLeft, tokens.textFieldChipClearContentMarginLeft, textFieldTokens.chipClearContentMarginRight, tokens.textFieldChipClearContentMarginRight, textFieldTokens.focusColor, tokens.textFieldFocusColor, tokens.textFieldBackgroundColorFocus);
|
20
20
|
export var IconArrowWrapper = /*#__PURE__*/styled.div.withConfig({
|
21
21
|
componentId: "plasma-new-hope__sc-1akl2tk-1"
|
22
22
|
})(["line-height:0;color:var(", ");cursor:", ";.", "{transform:rotate(-180deg);}&:hover,&:active{color:", ";}"], tokens.disclosureIconColor, function (_ref4) {
|
@@ -6,7 +6,7 @@ export var config = {
|
|
6
6
|
},
|
7
7
|
variations: {
|
8
8
|
view: {
|
9
|
-
"default": /*#__PURE__*/css(["", ":var(--overlay-blur);", ":var(--overlay-soft);"], modalTokens.modalOverlayWithBlurColor, modalTokens.modalOverlayColor)
|
9
|
+
"default": /*#__PURE__*/css(["", ":var(--overlay-blur);", ":var(--overlay-soft);", ":var(--surface-solid-card);", ":1.25rem;", ":2rem;", ":0.625rem;", ":0.375rem;", ":var(--surface-accent);"], modalTokens.modalOverlayWithBlurColor, modalTokens.modalOverlayColor, modalTokens.modalBodyBackground, modalTokens.modalBodyBorderRadius, modalTokens.modalBodyPadding, modalTokens.modalContentPadding, modalTokens.modalCloseButtonRadius, modalTokens.modalOutlineFocusColor)
|
10
10
|
}
|
11
11
|
}
|
12
12
|
};
|
@@ -3,6 +3,7 @@ import styled from 'styled-components';
|
|
3
3
|
import type { ComponentProps } from 'react';
|
4
4
|
import type { StoryObj, Meta } from '@storybook/react';
|
5
5
|
import { SSRProvider } from '@salutejs/plasma-core';
|
6
|
+
import { disableProps } from '@salutejs/plasma-sb-utils';
|
6
7
|
|
7
8
|
import { PopupProvider, popupClasses } from '../Popup/Popup';
|
8
9
|
import { Button } from '../Button/Button';
|
@@ -18,6 +19,7 @@ export default {
|
|
18
19
|
docs: { story: { inline: false, iframeHeight: '30rem' } },
|
19
20
|
},
|
20
21
|
argTypes: {
|
22
|
+
...disableProps(['hasBody']),
|
21
23
|
placement: {
|
22
24
|
options: [
|
23
25
|
'center',
|
@@ -75,6 +77,7 @@ type StoryModalProps = ComponentProps<typeof Modal> & {
|
|
75
77
|
closeOnEsc: boolean;
|
76
78
|
closeOnOverlayClick: boolean;
|
77
79
|
withBlur: boolean;
|
80
|
+
hasClose?: boolean;
|
78
81
|
};
|
79
82
|
|
80
83
|
const StyledButton = styled(Button)`
|
@@ -135,6 +138,72 @@ const StoryModalDemo = ({ placement, offsetX, offsetY, ...rest }: StoryModalProp
|
|
135
138
|
const [isOpenB, setIsOpenB] = useState(false);
|
136
139
|
const [isOpenC, setIsOpenC] = useState(false);
|
137
140
|
|
141
|
+
return (
|
142
|
+
<SSRProvider>
|
143
|
+
<StyledWrapper>
|
144
|
+
<PopupProvider>
|
145
|
+
<ButtonWrapper>
|
146
|
+
<StyledButton text="Открыть A" onClick={() => setIsOpenA(true)} />
|
147
|
+
</ButtonWrapper>
|
148
|
+
<StyledModal
|
149
|
+
id="modalA"
|
150
|
+
frame="theme-root"
|
151
|
+
withAnimation
|
152
|
+
onClose={() => setIsOpenA(false)}
|
153
|
+
opened={isOpenA}
|
154
|
+
placement={placement}
|
155
|
+
offset={[offsetX, offsetY]}
|
156
|
+
hasBody
|
157
|
+
{...rest}
|
158
|
+
>
|
159
|
+
<Button onClick={() => setIsOpenA(false)}>Close</Button>
|
160
|
+
<ButtonWrapper>
|
161
|
+
<StyledButton text="Открыть B" onClick={() => setIsOpenB(true)} />
|
162
|
+
</ButtonWrapper>
|
163
|
+
<Modal
|
164
|
+
id="modalB"
|
165
|
+
frame="theme-root"
|
166
|
+
onClose={() => setIsOpenB(false)}
|
167
|
+
opened={isOpenB}
|
168
|
+
placement="left"
|
169
|
+
offset={[offsetX, offsetY]}
|
170
|
+
hasBody
|
171
|
+
{...rest}
|
172
|
+
>
|
173
|
+
<Button style={{ marginRight: '1rem' }} onClick={() => setIsOpenB(false)}>
|
174
|
+
Close
|
175
|
+
</Button>
|
176
|
+
<ButtonWrapper>
|
177
|
+
<StyledButton text="Открыть C" onClick={() => setIsOpenC(true)} />
|
178
|
+
</ButtonWrapper>
|
179
|
+
<Modal
|
180
|
+
id="modalC"
|
181
|
+
frame="theme-root"
|
182
|
+
onClose={() => setIsOpenC(false)}
|
183
|
+
opened={isOpenC}
|
184
|
+
placement="top"
|
185
|
+
offset={[offsetX, offsetY]}
|
186
|
+
hasBody
|
187
|
+
{...rest}
|
188
|
+
>
|
189
|
+
<Button style={{ marginRight: '1rem' }} onClick={() => setIsOpenC(false)}>
|
190
|
+
Close
|
191
|
+
</Button>
|
192
|
+
<>Content</>
|
193
|
+
</Modal>
|
194
|
+
</Modal>
|
195
|
+
</StyledModal>
|
196
|
+
</PopupProvider>
|
197
|
+
</StyledWrapper>
|
198
|
+
</SSRProvider>
|
199
|
+
);
|
200
|
+
};
|
201
|
+
|
202
|
+
const StoryCustomModalDemo = ({ placement, offsetX, offsetY, ...rest }: StoryModalProps) => {
|
203
|
+
const [isOpenA, setIsOpenA] = useState(false);
|
204
|
+
const [isOpenB, setIsOpenB] = useState(false);
|
205
|
+
const [isOpenC, setIsOpenC] = useState(false);
|
206
|
+
|
138
207
|
return (
|
139
208
|
<SSRProvider>
|
140
209
|
<StyledWrapper>
|
@@ -199,7 +268,7 @@ const StoryModalDemo = ({ placement, offsetX, offsetY, ...rest }: StoryModalProp
|
|
199
268
|
);
|
200
269
|
};
|
201
270
|
|
202
|
-
export const
|
271
|
+
export const Default: StoryObj<StoryModalProps> = {
|
203
272
|
args: {
|
204
273
|
placement: 'center',
|
205
274
|
withBlur: false,
|
@@ -207,10 +276,30 @@ export const ModalDemo: StoryObj<StoryModalProps> = {
|
|
207
276
|
closeOnOverlayClick: true,
|
208
277
|
offsetX: 0,
|
209
278
|
offsetY: 0,
|
279
|
+
hasClose: true,
|
280
|
+
},
|
281
|
+
argTypes: {
|
282
|
+
hasClose: {
|
283
|
+
control: {
|
284
|
+
type: 'boolean',
|
285
|
+
},
|
286
|
+
},
|
210
287
|
},
|
211
288
|
render: (args) => <StoryModalDemo {...args} />,
|
212
289
|
};
|
213
290
|
|
291
|
+
export const CustomModalDemo: StoryObj<StoryModalProps> = {
|
292
|
+
args: {
|
293
|
+
placement: 'center',
|
294
|
+
withBlur: false,
|
295
|
+
closeOnEsc: true,
|
296
|
+
closeOnOverlayClick: true,
|
297
|
+
offsetX: 0,
|
298
|
+
offsetY: 0,
|
299
|
+
},
|
300
|
+
render: (args) => <StoryCustomModalDemo {...args} />,
|
301
|
+
};
|
302
|
+
|
214
303
|
const StyledModalAnimation = styled(Modal)`
|
215
304
|
/* stylelint-disable */
|
216
305
|
&& .${popupClasses.root} {
|
@@ -9,10 +9,10 @@ export var config = {
|
|
9
9
|
},
|
10
10
|
variations: {
|
11
11
|
view: {
|
12
|
-
"default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--
|
13
|
-
positive: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-active);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-positive);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--
|
14
|
-
warning: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--surface-transparent-warning);", ":var(--surface-transparent-warning-active);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-warning);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--
|
15
|
-
negative: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-active);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-negative);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--
|
12
|
+
"default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--inverse-text-primary);", ":var(--inverse-text-primary-hover);", ":var(--inverse-text-primary-active);", ":var(--inverse-text-secondary);", ":var(--inverse-text-secondary-hover);", ":var(--inverse-text-secondary-hover);", ":var(--surface-solid-default);", ":var(--surface-solid-default-hover);", ":var(--surface-solid-default-hover);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--surface-transparent-secondary);"], tokens.textFieldColor, tokens.textFieldPlaceholderColor, tokens.textFieldPlaceholderColorFocus, tokens.textFieldBackgroundColor, tokens.textFieldBackgroundColorFocus, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.textFieldLabelColor, tokens.textFieldLeftHelperColor, tokens.textFieldFocusColor, tokens.textFieldContentSlotColor, tokens.textFieldContentSlotColorHover, tokens.textFieldContentSlotColorActive, tokens.buttonColor, tokens.buttonColorHover, tokens.buttonColorActive, tokens.buttonArrowColor, tokens.buttonArrowColorHover, tokens.buttonArrowColorActive, tokens.buttonBackgroundColor, tokens.buttonBackgroundColorHover, tokens.buttonBackgroundColorActive, tokens.disclosureIconColor, tokens.disclosureIconColorHover, tokens.itemBackgroundHover),
|
13
|
+
positive: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-active);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-positive);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-primary-hover);", ":var(--on-dark-text-primary-active);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary-hover);", ":var(--on-dark-text-secondary-hover);", ":var(--surface-positive);", ":var(--surface-positive-hover);", ":var(--surface-positive-active);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--surface-transparent-secondary);"], tokens.textFieldColor, tokens.textFieldPlaceholderColor, tokens.textFieldPlaceholderColorFocus, tokens.textFieldBackgroundColor, tokens.textFieldBackgroundColorFocus, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.textFieldLabelColor, tokens.textFieldLeftHelperColor, tokens.textFieldFocusColor, tokens.textFieldContentSlotColor, tokens.textFieldContentSlotColorHover, tokens.textFieldContentSlotColorActive, tokens.buttonColor, tokens.buttonColorHover, tokens.buttonColorActive, tokens.buttonArrowColor, tokens.buttonArrowColorHover, tokens.buttonArrowColorActive, tokens.buttonBackgroundColor, tokens.buttonBackgroundColorHover, tokens.buttonBackgroundColorActive, tokens.disclosureIconColor, tokens.disclosureIconColorHover, tokens.itemBackgroundHover),
|
14
|
+
warning: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--surface-transparent-warning);", ":var(--surface-transparent-warning-active);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-warning);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-primary-hover);", ":var(--on-dark-text-primary-active);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary-hover);", ":var(--on-dark-text-secondary-hover);", ":var(--surface-warning);", ":var(--surface-warning-hover);", ":var(--surface-warning-active);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--surface-transparent-secondary);"], tokens.textFieldColor, tokens.textFieldPlaceholderColor, tokens.textFieldPlaceholderColorFocus, tokens.textFieldBackgroundColor, tokens.textFieldBackgroundColorFocus, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.textFieldLabelColor, tokens.textFieldLeftHelperColor, tokens.textFieldFocusColor, tokens.textFieldContentSlotColor, tokens.textFieldContentSlotColorHover, tokens.textFieldContentSlotColorActive, tokens.buttonColor, tokens.buttonColorHover, tokens.buttonColorActive, tokens.buttonArrowColor, tokens.buttonArrowColorHover, tokens.buttonArrowColorActive, tokens.buttonBackgroundColor, tokens.buttonBackgroundColorHover, tokens.buttonBackgroundColorActive, tokens.disclosureIconColor, tokens.disclosureIconColorHover, tokens.itemBackgroundHover),
|
15
|
+
negative: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-active);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-negative);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--on-dark-text-primary);", ":var(--on-dark-text-primary-hover);", ":var(--on-dark-text-primary-active);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary-hover);", ":var(--on-dark-text-secondary-hover);", ":var(--surface-negative);", ":var(--surface-negative-hover);", ":var(--surface-negative-active);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--surface-transparent-secondary);"], tokens.textFieldColor, tokens.textFieldPlaceholderColor, tokens.textFieldPlaceholderColorFocus, tokens.textFieldBackgroundColor, tokens.textFieldBackgroundColorFocus, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.textFieldLabelColor, tokens.textFieldLeftHelperColor, tokens.textFieldFocusColor, tokens.textFieldContentSlotColor, tokens.textFieldContentSlotColorHover, tokens.textFieldContentSlotColorActive, tokens.buttonColor, tokens.buttonColorHover, tokens.buttonColorActive, tokens.buttonArrowColor, tokens.buttonArrowColorHover, tokens.buttonArrowColorActive, tokens.buttonBackgroundColor, tokens.buttonBackgroundColorHover, tokens.buttonBackgroundColorActive, tokens.disclosureIconColor, tokens.disclosureIconColorHover, tokens.itemBackgroundHover),
|
16
16
|
accent: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-primary-hover);", ":var(--on-dark-text-primary-active);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary-hover);", ":var(--on-dark-text-secondary-hover);", ":var(--surface-accent);", ":var(--surface-accent-hover);", ":var(--surface-accent-active);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--surface-transparent-secondary);"], tokens.buttonColor, tokens.buttonColorHover, tokens.buttonColorActive, tokens.buttonArrowColor, tokens.buttonArrowColorHover, tokens.buttonArrowColorActive, tokens.buttonBackgroundColor, tokens.buttonBackgroundColorHover, tokens.buttonBackgroundColorActive, tokens.disclosureIconColor, tokens.disclosureIconColorHover, tokens.itemBackgroundHover),
|
17
17
|
secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-primary-hover);", ":var(--text-primary-active);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-hover);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary-hover);", ":var(--surface-transparent-secondary-active);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--surface-transparent-secondary);"], tokens.buttonColor, tokens.buttonColorHover, tokens.buttonColorActive, tokens.buttonArrowColor, tokens.buttonArrowColorHover, tokens.buttonArrowColorActive, tokens.buttonBackgroundColor, tokens.buttonBackgroundColorHover, tokens.buttonBackgroundColorActive, tokens.disclosureIconColor, tokens.disclosureIconColorHover, tokens.itemBackgroundHover),
|
18
18
|
clear: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-primary-hover);", ":var(--text-primary-active);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-clear);", ":var(--surface-clear);", ":var(--surface-clear);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--surface-transparent-secondary);"], tokens.buttonColor, tokens.buttonColorHover, tokens.buttonColorActive, tokens.buttonArrowColor, tokens.buttonArrowColorHover, tokens.buttonArrowColorActive, tokens.buttonBackgroundColor, tokens.buttonBackgroundColorHover, tokens.buttonBackgroundColorActive, tokens.disclosureIconColor, tokens.disclosureIconColorHover, tokens.itemBackgroundHover),
|
@@ -21,10 +21,10 @@ export var config = {
|
|
21
21
|
white: /*#__PURE__*/css(["", ":var(--on-light-text-primary);", ":var(--on-light-text-primary-hover);", ":var(--on-light-text-primary-active);", ":var(--on-light-text-secondary);", ":var(--on-light-text-secondary-hover);", ":var(--on-light-text-secondary-active);", ":var(--on-dark-surface-solid-default);", ":var(--on-dark-surface-solid-default-hover);", ":var(--on-dark-surface-solid-default-active);", ":var(--surface-transparent-secondary);", ":var(--text-secondary);", ":var(--text-secondary-hover);"], tokens.buttonColor, tokens.buttonColorHover, tokens.buttonColorActive, tokens.buttonArrowColor, tokens.buttonArrowColorHover, tokens.buttonArrowColorActive, tokens.buttonBackgroundColor, tokens.buttonBackgroundColorHover, tokens.buttonBackgroundColorActive, tokens.itemBackgroundHover, tokens.disclosureIconColor, tokens.disclosureIconColorHover)
|
22
22
|
},
|
23
23
|
size: {
|
24
|
-
l: /*#__PURE__*/css(["", ":3.5rem;", ":1.0625rem 1.125rem 1.0625rem 1.125rem;", ":0.375rem;", ":0.875rem;", ":-0.0625rem 0.5rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.5625rem 0 0.125rem 0;", ":1.5625rem 0 0.5625rem 0;", ":0.
|
25
|
-
m: /*#__PURE__*/css(["", ":3rem;", ":0.875rem 1rem 0.875rem 1rem;", ":0.375rem;", ":0.75rem;", ":-0.125rem 0.375rem -0.125rem -0.125rem;", ":-0.125rem -0.125rem -0.125rem 0.75rem;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.625rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.375rem 0 0.125rem 0;", ":1.375rem 0 0.375rem 0;", ":0.
|
26
|
-
s: /*#__PURE__*/css(["", ":2.5rem;", ":0.6875rem 0.875rem 0.6875rem 0.875rem;", ":0.375rem;", ":0.625rem;", ":-0.1875rem 0.25rem -0.1875rem -0.125rem;", ":-0.1875rem -0.125rem -0.1875rem 0.75rem;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.3125rem 0 0 0;", ":1.0625rem 0 0.3125rem 0;", ":0.
|
27
|
-
xs: /*#__PURE__*/css(["", ":2rem;", ":0.5625rem 0.625rem 0.5625rem 0.625rem;", ":0.375rem;", ":0.5rem;", ":-0.0625rem 0.25rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.375rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.3125rem 0 0 0;", ":1.0625rem 0 0.3125rem 0;", ":0.
|
24
|
+
l: /*#__PURE__*/css(["", ":3.5rem;", ":1.0625rem 1.125rem 1.0625rem 1.125rem;", ":0.375rem;", ":0.875rem;", ":-0.0625rem 0.5rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.5625rem 0 0.125rem 0;", ":1.5625rem 0 0.5625rem 0;", ":0.25rem;", ":0.5rem;", ":auto;", ":2.75rem;", ":0.75rem;", ":1rem;", ":0.625rem;", ":0rem;", ":1.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0 -0.125rem 0 0.5rem;", ":3.5rem;", ":1.5rem 0 1.5rem;", ":0.125rem;", ":0.875rem;", ":1.5rem;", ":1rem 1.125rem;", ":0.75rem 1.125rem;", ":0.75rem;", ":0 0.5rem 0 0;", ":1.5rem;", ":1.5rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":0.375rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1.25rem;", ":1.25rem;", ":0.375rem;", ":0.375rem;", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":0.375rem;"], tokens.textFieldHeight, tokens.textFieldPadding, tokens.textFieldPaddingWithChips, tokens.textFieldBorderRadius, 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.textFieldChipGap, tokens.textFieldChipBorderRadius, tokens.textFieldChipWidth, tokens.textFieldChipHeight, tokens.textFieldChipPaddingRight, tokens.textFieldChipPaddingLeft, tokens.textFieldChipClearContentMarginLeft, tokens.textFieldChipClearContentMarginRight, tokens.textFieldChipCloseIconSize, tokens.textFieldChipFontFamily, tokens.textFieldChipFontSize, tokens.textFieldChipFontStyle, tokens.textFieldChipFontWeight, tokens.textFieldChipLetterSpacing, tokens.textFieldChipLineHeight, tokens.buttonArrowMargin, tokens.targetHeight, tokens.buttonPadding, tokens.padding, tokens.borderRadius, tokens.itemHeight, tokens.itemPadding, tokens.itemPaddingTight, tokens.itemBorderRadius, tokens.itemIconMargin, tokens.itemIconSize, tokens.itemIconSizeTight, tokens.cellPadding, tokens.cellPaddingLeftContent, tokens.cellPaddingContent, tokens.cellPaddingRightContent, tokens.cellTextboxGap, tokens.cellGap, tokens.cellTitleFontFamily, tokens.cellTitleFontSize, tokens.cellTitleFontStyle, tokens.cellTitleFontWeight, tokens.cellTitleLetterSpacing, tokens.cellTitleLineHeight, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.fontLetterSpacing, tokens.fontLineHeight, tokens.checkboxTriggerSize, tokens.checkboxTriggerSizeTight, tokens.checkboxTriggerBorderRadius, tokens.checkboxTriggerBorderRadiusTight, tokens.checkboxFillColor, tokens.checkboxIconColor, tokens.checkboxTriggerBorderColor, tokens.indicatorSize),
|
25
|
+
m: /*#__PURE__*/css(["", ":3rem;", ":0.875rem 1rem 0.875rem 1rem;", ":0.375rem;", ":0.75rem;", ":-0.125rem 0.375rem -0.125rem -0.125rem;", ":-0.125rem -0.125rem -0.125rem 0.75rem;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.625rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.375rem 0 0.125rem 0;", ":1.375rem 0 0.375rem 0;", ":0.25rem;", ":0.375rem;", ":auto;", ":2.25rem;", ":0.625rem;", ":0.875rem;", ":0.5rem;", ":0rem;", ":1.25rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0 -0.125rem 0 0.375rem;", ":3rem;", ":1.25rem 0 1.25rem;", ":0.125rem;", ":0.75rem;", ":1.5rem;", ":0.75rem 0.875rem;", ":0.5rem 0.875rem;", ":0.625rem;", ":0 0.375rem 0 0;", ":1.5rem;", ":1.5rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":0.375rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1.25rem;", ":1.25rem;", ":0.375rem;", ":0.375rem;", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":0.375rem;"], tokens.textFieldHeight, tokens.textFieldPadding, tokens.textFieldPaddingWithChips, tokens.textFieldBorderRadius, 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.textFieldChipGap, tokens.textFieldChipBorderRadius, tokens.textFieldChipWidth, tokens.textFieldChipHeight, tokens.textFieldChipPaddingRight, tokens.textFieldChipPaddingLeft, tokens.textFieldChipClearContentMarginLeft, tokens.textFieldChipClearContentMarginRight, tokens.textFieldChipCloseIconSize, tokens.textFieldChipFontFamily, tokens.textFieldChipFontSize, tokens.textFieldChipFontStyle, tokens.textFieldChipFontWeight, tokens.textFieldChipLetterSpacing, tokens.textFieldChipLineHeight, tokens.buttonArrowMargin, tokens.targetHeight, tokens.buttonPadding, tokens.padding, tokens.borderRadius, tokens.itemHeight, tokens.itemPadding, tokens.itemPaddingTight, tokens.itemBorderRadius, tokens.itemIconMargin, tokens.itemIconSize, tokens.itemIconSizeTight, tokens.cellPadding, tokens.cellPaddingLeftContent, tokens.cellPaddingContent, tokens.cellPaddingRightContent, tokens.cellTextboxGap, tokens.cellGap, tokens.cellTitleFontFamily, tokens.cellTitleFontSize, tokens.cellTitleFontStyle, tokens.cellTitleFontWeight, tokens.cellTitleLetterSpacing, tokens.cellTitleLineHeight, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.fontLetterSpacing, tokens.fontLineHeight, tokens.checkboxTriggerSize, tokens.checkboxTriggerSizeTight, tokens.checkboxTriggerBorderRadius, tokens.checkboxTriggerBorderRadiusTight, tokens.checkboxFillColor, tokens.checkboxIconColor, tokens.checkboxTriggerBorderColor, tokens.indicatorSize),
|
26
|
+
s: /*#__PURE__*/css(["", ":2.5rem;", ":0.6875rem 0.875rem 0.6875rem 0.875rem;", ":0.375rem;", ":0.625rem;", ":-0.1875rem 0.25rem -0.1875rem -0.125rem;", ":-0.1875rem -0.125rem -0.1875rem 0.75rem;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.3125rem 0 0 0;", ":1.0625rem 0 0.3125rem 0;", ":0.25rem;", ":0.25rem;", ":auto;", ":1.75rem;", ":0.5rem;", ":0.75rem;", ":0.375rem;", ":0rem;", ":1rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0 -0.125rem 0 0.25rem;", ":2.5rem;", ":1rem 0 1rem;", ":0.125rem;", ":0.625rem;", ":1.5rem;", ":0.5rem 0.75rem;", ":0.25rem 0.75rem;", ":0.5rem;", ":1.5rem;", ":1rem;", ":0 0.375rem 0 0;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":0.375rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.25rem;", ":0.875rem;", ":0.375rem;", ":0.25rem;", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":0.375rem;"], tokens.textFieldHeight, tokens.textFieldPadding, tokens.textFieldPaddingWithChips, tokens.textFieldBorderRadius, 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.textFieldChipGap, tokens.textFieldChipBorderRadius, tokens.textFieldChipWidth, tokens.textFieldChipHeight, tokens.textFieldChipPaddingRight, tokens.textFieldChipPaddingLeft, tokens.textFieldChipClearContentMarginLeft, tokens.textFieldChipClearContentMarginRight, tokens.textFieldChipCloseIconSize, tokens.textFieldChipFontFamily, tokens.textFieldChipFontSize, tokens.textFieldChipFontStyle, tokens.textFieldChipFontWeight, tokens.textFieldChipLetterSpacing, tokens.textFieldChipLineHeight, tokens.buttonArrowMargin, tokens.targetHeight, tokens.buttonPadding, tokens.padding, tokens.borderRadius, tokens.itemHeight, tokens.itemPadding, tokens.itemPaddingTight, tokens.itemBorderRadius, tokens.itemIconSize, tokens.itemIconSizeTight, tokens.itemIconMargin, tokens.cellPadding, tokens.cellPaddingLeftContent, tokens.cellPaddingContent, tokens.cellPaddingRightContent, tokens.cellTextboxGap, tokens.cellGap, tokens.cellTitleFontFamily, tokens.cellTitleFontSize, tokens.cellTitleFontStyle, tokens.cellTitleFontWeight, tokens.cellTitleLetterSpacing, tokens.cellTitleLineHeight, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.fontLetterSpacing, tokens.fontLineHeight, tokens.checkboxTriggerSize, tokens.checkboxTriggerSizeTight, tokens.checkboxTriggerBorderRadius, tokens.checkboxTriggerBorderRadiusTight, tokens.checkboxFillColor, tokens.checkboxIconColor, tokens.checkboxTriggerBorderColor, tokens.indicatorSize),
|
27
|
+
xs: /*#__PURE__*/css(["", ":2rem;", ":0.5625rem 0.625rem 0.5625rem 0.625rem;", ":0.375rem;", ":0.5rem;", ":-0.0625rem 0.25rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.375rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.3125rem 0 0 0;", ":1.0625rem 0 0.3125rem 0;", ":0.25rem;", ":0.125rem;", ":auto;", ":1.25rem;", ":0.375rem;", ":0.625rem;", ":0.25rem;", ":0rem;", ":0.75rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0 -0.125rem 0 0.25rem;", ":2rem;", ":0.75rem 0 0.75rem;", ":0.125rem;", ":0.5rem;", ":1rem;", ":0.5rem;", ":0.25rem 0.5rem;", ":0.375rem;", ":1rem;", ":1rem;", ":0 0.25rem 0 0;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.875rem;", ":0.875rem;", ":0.25rem;", ":0.25rem;", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":0.375rem;"], tokens.textFieldHeight, tokens.textFieldPadding, tokens.textFieldPaddingWithChips, tokens.textFieldBorderRadius, 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.textFieldChipGap, tokens.textFieldChipBorderRadius, tokens.textFieldChipWidth, tokens.textFieldChipHeight, tokens.textFieldChipPaddingRight, tokens.textFieldChipPaddingLeft, tokens.textFieldChipClearContentMarginLeft, tokens.textFieldChipClearContentMarginRight, tokens.textFieldChipCloseIconSize, tokens.textFieldChipFontFamily, tokens.textFieldChipFontSize, tokens.textFieldChipFontStyle, tokens.textFieldChipFontWeight, tokens.textFieldChipLetterSpacing, tokens.textFieldChipLineHeight, tokens.buttonArrowMargin, tokens.targetHeight, tokens.buttonPadding, tokens.padding, tokens.borderRadius, tokens.itemHeight, tokens.itemPadding, tokens.itemPaddingTight, tokens.itemBorderRadius, tokens.itemIconSize, tokens.itemIconSizeTight, tokens.itemIconMargin, tokens.cellPadding, tokens.cellPaddingLeftContent, tokens.cellPaddingContent, tokens.cellPaddingRightContent, tokens.cellTextboxGap, tokens.cellGap, tokens.cellTitleFontFamily, tokens.cellTitleFontSize, tokens.cellTitleFontStyle, tokens.cellTitleFontWeight, tokens.cellTitleLetterSpacing, tokens.cellTitleLineHeight, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.fontLetterSpacing, tokens.fontLineHeight, tokens.checkboxTriggerSize, tokens.checkboxTriggerSizeTight, tokens.checkboxTriggerBorderRadius, tokens.checkboxTriggerBorderRadiusTight, tokens.checkboxFillColor, tokens.checkboxIconColor, tokens.checkboxTriggerBorderColor, tokens.indicatorSize)
|
28
28
|
},
|
29
29
|
labelPlacement: {
|
30
30
|
inner: /*#__PURE__*/css(["", ":var(--plasma-input-label-color,var(--plasma-input-placeholder-color,var(--plasma-colors-secondary)));", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], tokens.textFieldPlaceholderColor, tokens.textFieldLabelInnerFontFamily, tokens.textFieldLabelInnerFontSize, tokens.textFieldLabelInnerFontStyle, tokens.textFieldLabelInnerFontWeight, tokens.textFieldLabelInnerLetterSpacing, tokens.textFieldLabelInnerLineHeight),
|
@@ -79,25 +79,6 @@ const meta: Meta<StorySelectProps> = {
|
|
79
79
|
eq: 'textfield-like',
|
80
80
|
},
|
81
81
|
},
|
82
|
-
requiredPlacement: {
|
83
|
-
options: ['left', 'right'],
|
84
|
-
control: {
|
85
|
-
type: 'select',
|
86
|
-
},
|
87
|
-
if: { arg: 'required', truthy: true },
|
88
|
-
},
|
89
|
-
required: {
|
90
|
-
control: {
|
91
|
-
type: 'boolean',
|
92
|
-
},
|
93
|
-
if: { arg: 'optional', truthy: false },
|
94
|
-
},
|
95
|
-
optional: {
|
96
|
-
control: {
|
97
|
-
type: 'boolean',
|
98
|
-
},
|
99
|
-
if: { arg: 'required', truthy: false },
|
100
|
-
},
|
101
82
|
},
|
102
83
|
args: {
|
103
84
|
target: 'textfield-like',
|
@@ -112,9 +93,6 @@ const meta: Meta<StorySelectProps> = {
|
|
112
93
|
isTargetAmount: false,
|
113
94
|
variant: 'normal',
|
114
95
|
disabled: false,
|
115
|
-
optional: false,
|
116
|
-
required: false,
|
117
|
-
requiredPlacement: 'right',
|
118
96
|
},
|
119
97
|
parameters: {
|
120
98
|
controls: {
|
@@ -135,9 +113,6 @@ const meta: Meta<StorySelectProps> = {
|
|
135
113
|
'listWidth',
|
136
114
|
'listOverflow',
|
137
115
|
'listHeight',
|
138
|
-
'optional',
|
139
|
-
'required',
|
140
|
-
'requiredPlacement',
|
141
116
|
],
|
142
117
|
},
|
143
118
|
},
|
@@ -6,7 +6,7 @@ export var config = {
|
|
6
6
|
},
|
7
7
|
variations: {
|
8
8
|
view: {
|
9
|
-
"default": /*#__PURE__*/css(["", ":var(--overlay-blur);", ":var(--overlay-soft);"], modalTokens.modalOverlayWithBlurColor, modalTokens.modalOverlayColor)
|
9
|
+
"default": /*#__PURE__*/css(["", ":var(--overlay-blur);", ":var(--overlay-soft);", ":var(--surface-solid-card);", ":1.25rem;", ":2rem;", ":0.625rem;", ":0.375rem;", ":var(--surface-accent);"], modalTokens.modalOverlayWithBlurColor, modalTokens.modalOverlayColor, modalTokens.modalBodyBackground, modalTokens.modalBodyBorderRadius, modalTokens.modalBodyPadding, modalTokens.modalContentPadding, modalTokens.modalCloseButtonRadius, modalTokens.modalOutlineFocusColor)
|
10
10
|
}
|
11
11
|
}
|
12
12
|
};
|
@@ -3,6 +3,7 @@ import styled from 'styled-components';
|
|
3
3
|
import type { ComponentProps } from 'react';
|
4
4
|
import type { StoryObj, Meta } from '@storybook/react';
|
5
5
|
import { SSRProvider } from '@salutejs/plasma-core';
|
6
|
+
import { disableProps } from '@salutejs/plasma-sb-utils';
|
6
7
|
|
7
8
|
import { PopupProvider, popupClasses } from '../Popup/Popup';
|
8
9
|
import { Button } from '../Button/Button';
|
@@ -18,6 +19,7 @@ export default {
|
|
18
19
|
docs: { story: { inline: false, iframeHeight: '30rem' } },
|
19
20
|
},
|
20
21
|
argTypes: {
|
22
|
+
...disableProps(['hasBody']),
|
21
23
|
placement: {
|
22
24
|
options: [
|
23
25
|
'center',
|
@@ -75,6 +77,7 @@ type StoryModalProps = ComponentProps<typeof Modal> & {
|
|
75
77
|
closeOnEsc: boolean;
|
76
78
|
closeOnOverlayClick: boolean;
|
77
79
|
withBlur: boolean;
|
80
|
+
hasClose?: boolean;
|
78
81
|
};
|
79
82
|
|
80
83
|
const StyledButton = styled(Button)`
|
@@ -135,6 +138,72 @@ const StoryModalDemo = ({ placement, offsetX, offsetY, ...rest }: StoryModalProp
|
|
135
138
|
const [isOpenB, setIsOpenB] = useState(false);
|
136
139
|
const [isOpenC, setIsOpenC] = useState(false);
|
137
140
|
|
141
|
+
return (
|
142
|
+
<SSRProvider>
|
143
|
+
<StyledWrapper>
|
144
|
+
<PopupProvider>
|
145
|
+
<ButtonWrapper>
|
146
|
+
<StyledButton text="Открыть A" onClick={() => setIsOpenA(true)} />
|
147
|
+
</ButtonWrapper>
|
148
|
+
<StyledModal
|
149
|
+
id="modalA"
|
150
|
+
frame="theme-root"
|
151
|
+
withAnimation
|
152
|
+
onClose={() => setIsOpenA(false)}
|
153
|
+
opened={isOpenA}
|
154
|
+
placement={placement}
|
155
|
+
offset={[offsetX, offsetY]}
|
156
|
+
hasBody
|
157
|
+
{...rest}
|
158
|
+
>
|
159
|
+
<Button onClick={() => setIsOpenA(false)}>Close</Button>
|
160
|
+
<ButtonWrapper>
|
161
|
+
<StyledButton text="Открыть B" onClick={() => setIsOpenB(true)} />
|
162
|
+
</ButtonWrapper>
|
163
|
+
<Modal
|
164
|
+
id="modalB"
|
165
|
+
frame="theme-root"
|
166
|
+
onClose={() => setIsOpenB(false)}
|
167
|
+
opened={isOpenB}
|
168
|
+
placement="left"
|
169
|
+
offset={[offsetX, offsetY]}
|
170
|
+
hasBody
|
171
|
+
{...rest}
|
172
|
+
>
|
173
|
+
<Button style={{ marginRight: '1rem' }} onClick={() => setIsOpenB(false)}>
|
174
|
+
Close
|
175
|
+
</Button>
|
176
|
+
<ButtonWrapper>
|
177
|
+
<StyledButton text="Открыть C" onClick={() => setIsOpenC(true)} />
|
178
|
+
</ButtonWrapper>
|
179
|
+
<Modal
|
180
|
+
id="modalC"
|
181
|
+
frame="theme-root"
|
182
|
+
onClose={() => setIsOpenC(false)}
|
183
|
+
opened={isOpenC}
|
184
|
+
placement="top"
|
185
|
+
offset={[offsetX, offsetY]}
|
186
|
+
hasBody
|
187
|
+
{...rest}
|
188
|
+
>
|
189
|
+
<Button style={{ marginRight: '1rem' }} onClick={() => setIsOpenC(false)}>
|
190
|
+
Close
|
191
|
+
</Button>
|
192
|
+
<>Content</>
|
193
|
+
</Modal>
|
194
|
+
</Modal>
|
195
|
+
</StyledModal>
|
196
|
+
</PopupProvider>
|
197
|
+
</StyledWrapper>
|
198
|
+
</SSRProvider>
|
199
|
+
);
|
200
|
+
};
|
201
|
+
|
202
|
+
const StoryCustomModalDemo = ({ placement, offsetX, offsetY, ...rest }: StoryModalProps) => {
|
203
|
+
const [isOpenA, setIsOpenA] = useState(false);
|
204
|
+
const [isOpenB, setIsOpenB] = useState(false);
|
205
|
+
const [isOpenC, setIsOpenC] = useState(false);
|
206
|
+
|
138
207
|
return (
|
139
208
|
<SSRProvider>
|
140
209
|
<StyledWrapper>
|
@@ -199,7 +268,7 @@ const StoryModalDemo = ({ placement, offsetX, offsetY, ...rest }: StoryModalProp
|
|
199
268
|
);
|
200
269
|
};
|
201
270
|
|
202
|
-
export const
|
271
|
+
export const Default: StoryObj<StoryModalProps> = {
|
203
272
|
args: {
|
204
273
|
placement: 'center',
|
205
274
|
withBlur: false,
|
@@ -207,10 +276,30 @@ export const ModalDemo: StoryObj<StoryModalProps> = {
|
|
207
276
|
closeOnOverlayClick: true,
|
208
277
|
offsetX: 0,
|
209
278
|
offsetY: 0,
|
279
|
+
hasClose: true,
|
280
|
+
},
|
281
|
+
argTypes: {
|
282
|
+
hasClose: {
|
283
|
+
control: {
|
284
|
+
type: 'boolean',
|
285
|
+
},
|
286
|
+
},
|
210
287
|
},
|
211
288
|
render: (args) => <StoryModalDemo {...args} />,
|
212
289
|
};
|
213
290
|
|
291
|
+
export const CustomModalDemo: StoryObj<StoryModalProps> = {
|
292
|
+
args: {
|
293
|
+
placement: 'center',
|
294
|
+
withBlur: false,
|
295
|
+
closeOnEsc: true,
|
296
|
+
closeOnOverlayClick: true,
|
297
|
+
offsetX: 0,
|
298
|
+
offsetY: 0,
|
299
|
+
},
|
300
|
+
render: (args) => <StoryCustomModalDemo {...args} />,
|
301
|
+
};
|
302
|
+
|
214
303
|
const StyledModalAnimation = styled(Modal)`
|
215
304
|
/* stylelint-disable */
|
216
305
|
&& .${popupClasses.root} {
|