@salutejs/plasma-new-hope 0.138.0-dev.0 → 0.139.0-canary.1352.10697708497.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Autocomplete/Autocomplete.css +16 -12
- package/cjs/components/DatePicker/RangeDate/RangeDate.css +16 -12
- package/cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.css +16 -12
- package/cjs/components/DatePicker/SingleDate/SingleDate.css +16 -12
- package/cjs/components/Range/Range.css +16 -12
- package/cjs/components/Slider/Slider.css +16 -12
- package/cjs/components/Slider/components/Double/Double.css +16 -12
- package/cjs/components/TextArea/TextArea.js +24 -7
- package/cjs/components/TextArea/TextArea.js.map +1 -1
- package/cjs/components/TextArea/TextArea.styles.js +47 -35
- package/cjs/components/TextArea/TextArea.styles.js.map +1 -1
- package/cjs/components/TextArea/TextArea.styles_1fyj8ox.css +11 -0
- package/cjs/components/TextArea/TextArea.tokens.js +13 -2
- package/cjs/components/TextArea/TextArea.tokens.js.map +1 -1
- package/cjs/components/TextField/TextField.js +46 -20
- package/cjs/components/TextField/TextField.js.map +1 -1
- package/cjs/components/TextField/TextField.styles.js +31 -7
- package/cjs/components/TextField/TextField.styles.js.map +1 -1
- package/cjs/components/TextField/TextField.styles_u6pm7v.css +14 -0
- package/cjs/components/TextField/TextField.tokens.js +10 -1
- package/cjs/components/TextField/TextField.tokens.js.map +1 -1
- package/cjs/components/TextField/TextField_1lzb2r1.css +1 -0
- package/cjs/components/TextField/variations/_label-placement/base.js +1 -1
- package/cjs/components/TextField/variations/_label-placement/base.js.map +1 -1
- package/cjs/components/TextField/variations/_label-placement/base_1dbnupp.css +1 -0
- package/cjs/components/TextField/variations/_read-only/base.js +1 -1
- package/cjs/components/TextField/variations/_read-only/base.js.map +1 -1
- package/cjs/components/TextField/variations/_read-only/base_4tqave.css +1 -0
- package/cjs/components/TextField/variations/_size/base.js +1 -1
- package/cjs/components/TextField/variations/_size/base.js.map +1 -1
- package/cjs/components/TextField/variations/_size/base_uk56yo.css +1 -0
- package/cjs/components/TextField/variations/_view/base.js +1 -1
- package/cjs/components/TextField/variations/_view/base.js.map +1 -1
- package/cjs/components/TextField/variations/_view/{base_18ea6z7.css → base_uszjx8.css} +1 -1
- package/cjs/index.css +27 -21
- package/emotion/cjs/components/TextArea/TextArea.js +25 -8
- package/emotion/cjs/components/TextArea/TextArea.styles.js +27 -19
- package/emotion/cjs/components/TextArea/TextArea.template-doc.mdx +29 -3
- package/emotion/cjs/components/TextArea/TextArea.tokens.js +13 -2
- package/emotion/cjs/components/TextArea/variations/_size/tokens.json +7 -1
- package/emotion/cjs/components/TextField/TextField.js +50 -24
- package/emotion/cjs/components/TextField/TextField.styles.js +57 -25
- package/emotion/cjs/components/TextField/TextField.template-doc.mdx +27 -1
- package/emotion/cjs/components/TextField/TextField.tokens.js +10 -1
- package/emotion/cjs/components/TextField/variations/_label-placement/base.js +1 -1
- package/emotion/cjs/components/TextField/variations/_read-only/base.js +1 -1
- package/emotion/cjs/components/TextField/variations/_size/base.js +1 -1
- package/emotion/cjs/components/TextField/variations/_size/tokens.json +6 -0
- package/emotion/cjs/components/TextField/variations/_view/base.js +1 -1
- package/emotion/cjs/examples/plasma_b2c/components/TextArea/TextArea.config.js +9 -9
- package/emotion/cjs/examples/plasma_b2c/components/TextArea/TextArea.stories.tsx +21 -0
- package/emotion/cjs/examples/plasma_b2c/components/TextField/TextField.config.js +12 -12
- package/emotion/cjs/examples/plasma_b2c/components/TextField/TextField.stories.tsx +21 -1
- package/emotion/cjs/examples/plasma_web/components/TextArea/TextArea.config.js +9 -9
- package/emotion/cjs/examples/plasma_web/components/TextArea/TextArea.stories.tsx +22 -0
- package/emotion/cjs/examples/plasma_web/components/TextField/TextField.config.js +12 -12
- package/emotion/cjs/examples/plasma_web/components/TextField/TextField.stories.tsx +22 -0
- package/emotion/es/components/TextArea/TextArea.js +26 -9
- package/emotion/es/components/TextArea/TextArea.styles.js +27 -19
- package/emotion/es/components/TextArea/TextArea.template-doc.mdx +29 -3
- package/emotion/es/components/TextArea/TextArea.tokens.js +13 -2
- package/emotion/es/components/TextArea/variations/_size/tokens.json +7 -1
- package/emotion/es/components/TextField/TextField.js +51 -25
- package/emotion/es/components/TextField/TextField.styles.js +56 -24
- package/emotion/es/components/TextField/TextField.template-doc.mdx +27 -1
- package/emotion/es/components/TextField/TextField.tokens.js +10 -1
- package/emotion/es/components/TextField/variations/_label-placement/base.js +2 -2
- package/emotion/es/components/TextField/variations/_read-only/base.js +2 -2
- package/emotion/es/components/TextField/variations/_size/base.js +2 -2
- package/emotion/es/components/TextField/variations/_size/tokens.json +6 -0
- package/emotion/es/components/TextField/variations/_view/base.js +2 -2
- package/emotion/es/examples/plasma_b2c/components/TextArea/TextArea.config.js +9 -9
- package/emotion/es/examples/plasma_b2c/components/TextArea/TextArea.stories.tsx +21 -0
- package/emotion/es/examples/plasma_b2c/components/TextField/TextField.config.js +12 -12
- package/emotion/es/examples/plasma_b2c/components/TextField/TextField.stories.tsx +21 -1
- package/emotion/es/examples/plasma_web/components/TextArea/TextArea.config.js +9 -9
- package/emotion/es/examples/plasma_web/components/TextArea/TextArea.stories.tsx +22 -0
- package/emotion/es/examples/plasma_web/components/TextField/TextField.config.js +12 -12
- package/emotion/es/examples/plasma_web/components/TextField/TextField.stories.tsx +22 -0
- package/es/components/Autocomplete/Autocomplete.css +16 -12
- package/es/components/DatePicker/RangeDate/RangeDate.css +16 -12
- package/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.css +16 -12
- package/es/components/DatePicker/SingleDate/SingleDate.css +16 -12
- package/es/components/Range/Range.css +16 -12
- package/es/components/Slider/Slider.css +16 -12
- package/es/components/Slider/components/Double/Double.css +16 -12
- package/es/components/TextArea/TextArea.js +25 -8
- package/es/components/TextArea/TextArea.js.map +1 -1
- package/es/components/TextArea/TextArea.styles.js +46 -36
- package/es/components/TextArea/TextArea.styles.js.map +1 -1
- package/es/components/TextArea/TextArea.styles_1fyj8ox.css +11 -0
- package/es/components/TextArea/TextArea.tokens.js +13 -2
- package/es/components/TextArea/TextArea.tokens.js.map +1 -1
- package/es/components/TextField/TextField.js +47 -21
- package/es/components/TextField/TextField.js.map +1 -1
- package/es/components/TextField/TextField.styles.js +28 -8
- package/es/components/TextField/TextField.styles.js.map +1 -1
- package/es/components/TextField/TextField.styles_u6pm7v.css +14 -0
- package/es/components/TextField/TextField.tokens.js +10 -1
- package/es/components/TextField/TextField.tokens.js.map +1 -1
- package/es/components/TextField/TextField_1lzb2r1.css +1 -0
- package/es/components/TextField/variations/_label-placement/base.js +1 -1
- package/es/components/TextField/variations/_label-placement/base.js.map +1 -1
- package/es/components/TextField/variations/_label-placement/base_1dbnupp.css +1 -0
- package/es/components/TextField/variations/_read-only/base.js +1 -1
- package/es/components/TextField/variations/_read-only/base.js.map +1 -1
- package/es/components/TextField/variations/_read-only/base_4tqave.css +1 -0
- package/es/components/TextField/variations/_size/base.js +1 -1
- package/es/components/TextField/variations/_size/base.js.map +1 -1
- package/es/components/TextField/variations/_size/base_uk56yo.css +1 -0
- package/es/components/TextField/variations/_view/base.js +1 -1
- package/es/components/TextField/variations/_view/base.js.map +1 -1
- package/es/components/TextField/variations/_view/{base_18ea6z7.css → base_uszjx8.css} +1 -1
- package/es/index.css +27 -21
- package/package.json +2 -2
- package/styled-components/cjs/components/TextArea/TextArea.js +24 -7
- package/styled-components/cjs/components/TextArea/TextArea.styles.js +17 -11
- package/styled-components/cjs/components/TextArea/TextArea.template-doc.mdx +29 -3
- package/styled-components/cjs/components/TextArea/TextArea.tokens.js +13 -2
- package/styled-components/cjs/components/TextArea/variations/_size/tokens.json +7 -1
- package/styled-components/cjs/components/TextField/TextField.js +46 -20
- package/styled-components/cjs/components/TextField/TextField.styles.js +22 -10
- package/styled-components/cjs/components/TextField/TextField.template-doc.mdx +27 -1
- package/styled-components/cjs/components/TextField/TextField.tokens.js +10 -1
- package/styled-components/cjs/components/TextField/variations/_label-placement/base.js +1 -1
- package/styled-components/cjs/components/TextField/variations/_read-only/base.js +1 -1
- package/styled-components/cjs/components/TextField/variations/_size/base.js +1 -1
- package/styled-components/cjs/components/TextField/variations/_size/tokens.json +6 -0
- package/styled-components/cjs/components/TextField/variations/_view/base.js +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/TextArea/TextArea.config.js +7 -7
- package/styled-components/cjs/examples/plasma_b2c/components/TextArea/TextArea.stories.tsx +21 -0
- package/styled-components/cjs/examples/plasma_b2c/components/TextField/TextField.config.js +8 -8
- package/styled-components/cjs/examples/plasma_b2c/components/TextField/TextField.stories.tsx +21 -1
- package/styled-components/cjs/examples/plasma_web/components/TextArea/TextArea.config.js +8 -8
- package/styled-components/cjs/examples/plasma_web/components/TextArea/TextArea.stories.tsx +22 -0
- package/styled-components/cjs/examples/plasma_web/components/TextField/TextField.config.js +8 -8
- package/styled-components/cjs/examples/plasma_web/components/TextField/TextField.stories.tsx +22 -0
- package/styled-components/es/components/TextArea/TextArea.js +25 -8
- package/styled-components/es/components/TextArea/TextArea.styles.js +17 -11
- package/styled-components/es/components/TextArea/TextArea.template-doc.mdx +29 -3
- package/styled-components/es/components/TextArea/TextArea.tokens.js +13 -2
- package/styled-components/es/components/TextArea/variations/_size/tokens.json +7 -1
- package/styled-components/es/components/TextField/TextField.js +47 -21
- package/styled-components/es/components/TextField/TextField.styles.js +21 -9
- package/styled-components/es/components/TextField/TextField.template-doc.mdx +27 -1
- package/styled-components/es/components/TextField/TextField.tokens.js +10 -1
- package/styled-components/es/components/TextField/variations/_label-placement/base.js +2 -2
- package/styled-components/es/components/TextField/variations/_read-only/base.js +2 -2
- package/styled-components/es/components/TextField/variations/_size/base.js +2 -2
- package/styled-components/es/components/TextField/variations/_size/tokens.json +6 -0
- package/styled-components/es/components/TextField/variations/_view/base.js +2 -2
- package/styled-components/es/examples/plasma_b2c/components/TextArea/TextArea.config.js +7 -7
- package/styled-components/es/examples/plasma_b2c/components/TextArea/TextArea.stories.tsx +21 -0
- package/styled-components/es/examples/plasma_b2c/components/TextField/TextField.config.js +8 -8
- package/styled-components/es/examples/plasma_b2c/components/TextField/TextField.stories.tsx +21 -1
- package/styled-components/es/examples/plasma_web/components/TextArea/TextArea.config.js +8 -8
- package/styled-components/es/examples/plasma_web/components/TextArea/TextArea.stories.tsx +22 -0
- package/styled-components/es/examples/plasma_web/components/TextField/TextField.config.js +8 -8
- package/styled-components/es/examples/plasma_web/components/TextField/TextField.stories.tsx +22 -0
- package/types/components/Autocomplete/Autocomplete.d.ts +2 -2
- package/types/components/Autocomplete/Autocomplete.d.ts.map +1 -1
- package/types/components/Autocomplete/Autocomplete.types.d.ts +1 -1
- package/types/components/Autocomplete/Autocomplete.types.d.ts.map +1 -1
- package/types/components/Autocomplete/ui/TextField/TextField.styles.d.ts +60 -2
- package/types/components/Autocomplete/ui/TextField/TextField.styles.d.ts.map +1 -1
- package/types/components/DatePicker/SingleDate/SingleDate.styles.d.ts +60 -2
- package/types/components/DatePicker/SingleDate/SingleDate.styles.d.ts.map +1 -1
- package/types/components/Range/Range.styles.d.ts +60 -2
- package/types/components/Range/Range.styles.d.ts.map +1 -1
- package/types/components/Slider/components/Double/Double.styles.d.ts +60 -2
- package/types/components/Slider/components/Double/Double.styles.d.ts.map +1 -1
- package/types/components/TextArea/TextArea.d.ts.map +1 -1
- package/types/components/TextArea/TextArea.styles.d.ts +2 -0
- package/types/components/TextArea/TextArea.styles.d.ts.map +1 -1
- package/types/components/TextArea/TextArea.tokens.d.ts +11 -0
- package/types/components/TextArea/TextArea.tokens.d.ts.map +1 -1
- package/types/components/TextArea/TextArea.types.d.ts +30 -5
- package/types/components/TextArea/TextArea.types.d.ts.map +1 -1
- package/types/components/TextField/TextField.d.ts.map +1 -1
- package/types/components/TextField/TextField.styles.d.ts +4 -0
- package/types/components/TextField/TextField.styles.d.ts.map +1 -1
- package/types/components/TextField/TextField.tokens.d.ts +9 -0
- package/types/components/TextField/TextField.tokens.d.ts.map +1 -1
- package/types/components/TextField/TextField.types.d.ts +27 -2
- package/types/components/TextField/TextField.types.d.ts.map +1 -1
- package/types/components/TextField/variations/_label-placement/base.d.ts.map +1 -1
- package/types/components/TextField/variations/_size/base.d.ts.map +1 -1
- package/types/components/TextField/variations/_view/base.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Autocomplete/Autocomplete.d.ts +1 -1
- package/types/examples/plasma_b2c/components/Autocomplete/Autocomplete.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/TextArea/TextArea.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/TextArea/TextArea.d.ts +135 -3
- package/types/examples/plasma_b2c/components/TextArea/TextArea.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/TextField/TextField.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/TextField/TextField.d.ts +60 -2
- package/types/examples/plasma_b2c/components/TextField/TextField.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Autocomplete/Autocomplete.d.ts +1 -1
- package/types/examples/plasma_web/components/Autocomplete/Autocomplete.d.ts.map +1 -1
- package/types/examples/plasma_web/components/TextArea/TextArea.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/TextArea/TextArea.d.ts +135 -3
- package/types/examples/plasma_web/components/TextArea/TextArea.d.ts.map +1 -1
- package/types/examples/plasma_web/components/TextField/TextField.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/TextField/TextField.d.ts +60 -2
- package/types/examples/plasma_web/components/TextField/TextField.d.ts.map +1 -1
- package/cjs/components/TextArea/TextArea.styles_1bv40vw.css +0 -9
- package/cjs/components/TextField/TextField.styles_9fkr1l.css +0 -10
- package/cjs/components/TextField/TextField_wctd2m.css +0 -1
- package/cjs/components/TextField/variations/_label-placement/base_170eaex.css +0 -1
- package/cjs/components/TextField/variations/_read-only/base_1vu13zn.css +0 -1
- package/cjs/components/TextField/variations/_size/base_orwx1f.css +0 -1
- package/es/components/TextArea/TextArea.styles_1bv40vw.css +0 -9
- package/es/components/TextField/TextField.styles_9fkr1l.css +0 -10
- package/es/components/TextField/TextField_wctd2m.css +0 -1
- package/es/components/TextField/variations/_label-placement/base_170eaex.css +0 -1
- package/es/components/TextField/variations/_read-only/base_1vu13zn.css +0 -1
- package/es/components/TextField/variations/_size/base_orwx1f.css +0 -1
@@ -1,11 +1,14 @@
|
|
1
1
|
import styled from 'styled-components';
|
2
2
|
import { applyEllipsis } from '../../mixins';
|
3
|
-
import { tokens } from './TextArea.tokens';
|
3
|
+
import { classes, tokens } from './TextArea.tokens';
|
4
4
|
export var StyledLabel = /*#__PURE__*/styled.div.withConfig({
|
5
5
|
componentId: "plasma-new-hope__sc-pxxv3p-0"
|
6
|
-
})(["margin-bottom:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], tokens.labelMarginBottom, tokens.inputFontFamily, tokens.inputFontSize, tokens.inputFontStyle, tokens.inputFontWeight, tokens.inputLetterSpacing, tokens.inputLineHeight);
|
7
|
-
export var
|
6
|
+
})(["position:relative;display:inline-flex;margin-bottom:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], tokens.labelMarginBottom, tokens.inputFontFamily, tokens.inputFontSize, tokens.inputFontStyle, tokens.inputFontWeight, tokens.inputLetterSpacing, tokens.inputLineHeight);
|
7
|
+
export var StyledOptionalText = /*#__PURE__*/styled.span.withConfig({
|
8
8
|
componentId: "plasma-new-hope__sc-pxxv3p-1"
|
9
|
+
})(["color:var(", ");"], tokens.optionalColor);
|
10
|
+
export var StyledTextAreaWrapper = /*#__PURE__*/styled.div.withConfig({
|
11
|
+
componentId: "plasma-new-hope__sc-pxxv3p-2"
|
9
12
|
})(["background-color:var(", ");padding-top:var(", ");padding-bottom:", ";border-radius:", ";"], tokens.inputBackgroundColor, tokens.inputPaddingTop, function (_ref) {
|
10
13
|
var hasHelper = _ref.hasHelper;
|
11
14
|
return hasHelper ? "var(".concat(tokens.inputPaddingBottomWithHelpers, ")") : "var(".concat(tokens.inputPaddingBottom, ")");
|
@@ -14,16 +17,16 @@ export var StyledTextAreaWrapper = /*#__PURE__*/styled.div.withConfig({
|
|
14
17
|
return hasHelper ? "var(".concat(tokens.borderRadiusWithHelpers, ")") : "var(".concat(tokens.borderRadius, ")");
|
15
18
|
});
|
16
19
|
export var StyledContent = /*#__PURE__*/styled.div.withConfig({
|
17
|
-
componentId: "plasma-new-hope__sc-pxxv3p-
|
20
|
+
componentId: "plasma-new-hope__sc-pxxv3p-3"
|
18
21
|
})(["position:absolute;display:flex;align-items:center;bottom:0;z-index:1;top:var(", ");right:var(", ");height:var(", ");"], tokens.rightContentTop, tokens.rightContentRight, tokens.rightContentHeight);
|
19
22
|
export var StyledContainer = /*#__PURE__*/styled.div.withConfig({
|
20
|
-
componentId: "plasma-new-hope__sc-pxxv3p-
|
23
|
+
componentId: "plasma-new-hope__sc-pxxv3p-4"
|
21
24
|
})(["display:inline-flex;flex-direction:column;width:", ";position:relative;"], function (_ref3) {
|
22
25
|
var width = _ref3.width;
|
23
26
|
return width;
|
24
27
|
});
|
25
28
|
export var StyledTextArea = /*#__PURE__*/styled.textarea.withConfig({
|
26
|
-
componentId: "plasma-new-hope__sc-pxxv3p-
|
29
|
+
componentId: "plasma-new-hope__sc-pxxv3p-5"
|
27
30
|
})(["display:block;box-sizing:border-box;outline:none;border:none;-webkit-appearance:none;background-color:transparent;color:var(", ");caret-color:var(", ");resize:", ";--plasma_private-textarea-height:", ";--plasma_private-textarea-width:", ";--plasma_private-textarea-computed-height:", ";--plasma_private-textarea-computed-width:", ";height:var(--plasma_private-textarea-computed-height);width:var(--plasma_private-textarea-computed-width);min-width:", ";max-width:", ";min-height:var(", ");padding-right:", ";padding-left:var(", ");padding-top:0;padding-bottom:0;--plasma_private-textarea-helpers-computed-height:calc( var(", ") + var(", ") + var(", ") );--plasma_private-textarea-input-with-helpers-height:calc( var(--plasma_private-textarea-height) - var(--plasma_private-textarea-helpers-computed-height) + var(", ") );--plasma_private-textarea-input-without-helpers-height:calc( var(--plasma_private-textarea-computed-height) - var(", ") );--plasma_private-textarea-input-actual-height:", ";height:var(--plasma_private-textarea-input-actual-height);font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");&::placeholder{opacity:0;}&:read-only{cursor:default;}&:focus:not(:disabled){color:var(", ");}"], tokens.inputColor, tokens.inputCaretColor, function (_ref4) {
|
28
31
|
var resize = _ref4.resize;
|
29
32
|
return resize || 'none';
|
@@ -54,17 +57,20 @@ export var StyledTextArea = /*#__PURE__*/styled.textarea.withConfig({
|
|
54
57
|
return hasHelper && !rows ? 'var(--plasma_private-textarea-input-with-helpers-height)' : 'var(--plasma_private-textarea-input-without-helpers-height)';
|
55
58
|
}, tokens.inputFontFamily, tokens.inputFontSize, tokens.inputFontStyle, tokens.inputFontWeight, tokens.inputLetterSpacing, tokens.inputLineHeight, tokens.inputColorFocus);
|
56
59
|
export var StyledHelpers = /*#__PURE__*/styled.div.withConfig({
|
57
|
-
componentId: "plasma-new-hope__sc-pxxv3p-
|
60
|
+
componentId: "plasma-new-hope__sc-pxxv3p-6"
|
58
61
|
})(["box-sizing:border-box;display:flex;justify-content:space-between;transition:background-color 0.1s ease-in-out;background-color:var(", ");padding-top:var(", ");padding-right:var(", ");padding-bottom:var(", ");padding-left:var(", ");border-bottom-left-radius:var(", ");border-bottom-right-radius:var(", ");"], tokens.helpersBackgroundColor, tokens.helpersPaddingTop, tokens.helpersPaddingRight, tokens.helpersPaddingBottom, tokens.helpersPaddingLeft, tokens.borderRadius, tokens.borderRadius);
|
59
62
|
export var StyledLeftHelper = /*#__PURE__*/styled.span.withConfig({
|
60
|
-
componentId: "plasma-new-hope__sc-pxxv3p-
|
63
|
+
componentId: "plasma-new-hope__sc-pxxv3p-7"
|
61
64
|
})(["", ";display:block;font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");color:var(", ");"], /*#__PURE__*/applyEllipsis(), tokens.helpersFontFamily, tokens.helpersFontSize, tokens.helpersFontStyle, tokens.helpersFontWeight, tokens.helpersLetterSpacing, tokens.helpersLineHeight, tokens.leftHelperColor);
|
62
65
|
export var StyledRightHelper = /*#__PURE__*/styled(StyledLeftHelper).withConfig({
|
63
|
-
componentId: "plasma-new-hope__sc-pxxv3p-
|
66
|
+
componentId: "plasma-new-hope__sc-pxxv3p-8"
|
64
67
|
})(["color:var(", ");margin-left:auto;"], tokens.rightHelperColor);
|
65
68
|
export var StyledPlaceholder = /*#__PURE__*/styled.label.withConfig({
|
66
|
-
componentId: "plasma-new-hope__sc-pxxv3p-
|
69
|
+
componentId: "plasma-new-hope__sc-pxxv3p-9"
|
67
70
|
})(["box-sizing:border-box;position:absolute;pointer-events:none;display:inline-flex;align-items:center;transition:all 0.1s ease-in-out;transform-origin:top left;color:var(", ");width:100%;height:auto;top:var(", ");padding-left:var(", ");padding-right:", ";font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], tokens.placeholderColor, tokens.inputPaddingTop, tokens.inputPaddingLeft, function (_ref13) {
|
68
71
|
var hasContentRight = _ref13.hasContentRight;
|
69
72
|
return hasContentRight ? "var(".concat(tokens.inputPaddingRightWithRightContent, ")") : "var(".concat(tokens.inputPaddingRight, ")");
|
70
|
-
}, tokens.inputFontFamily, tokens.inputFontSize, tokens.inputFontStyle, tokens.inputFontWeight, tokens.inputLetterSpacing, tokens.inputLineHeight);
|
73
|
+
}, tokens.inputFontFamily, tokens.inputFontSize, tokens.inputFontStyle, tokens.inputFontWeight, tokens.inputLetterSpacing, tokens.inputLineHeight);
|
74
|
+
export var StyledIndicator = /*#__PURE__*/styled.div.withConfig({
|
75
|
+
componentId: "plasma-new-hope__sc-pxxv3p-10"
|
76
|
+
})(["position:absolute;border-radius:50%;background-color:var(", ");&.", "{width:var(", ");height:var(", ");inset:var(", ");&.align-right{inset:var(", ");}}&.", "{width:var(", ");height:var(", ");inset:var(", ");&.align-right{inset:var(", ");}}"], tokens.indicatorColor, classes.outerLabelPlacement, tokens.indicatorSizeOuter, tokens.indicatorSizeOuter, tokens.indicatorLabelPlacementOuter, tokens.indicatorLabelPlacementOuterRight, classes.innerLabelPlacement, tokens.indicatorSizeInner, tokens.indicatorSizeInner, tokens.indicatorLabelPlacementInner, tokens.indicatorLabelPlacementInnerRight);
|
@@ -32,7 +32,7 @@ export function App() {
|
|
32
32
|
```
|
33
33
|
|
34
34
|
### Размеры компонента
|
35
|
-
Высоту и ширину можно регулировать с помощью свойств `height` и `width`,
|
35
|
+
Высоту и ширину можно регулировать с помощью свойств `height` и `width`,
|
36
36
|
указав значения в `rem` или соответствующие свойствам css значения.
|
37
37
|
`height` и `width` отвечают за **всю** высоту и ширину компонента.
|
38
38
|
|
@@ -76,7 +76,7 @@ export function App() {
|
|
76
76
|
|
77
77
|
### Autoresize
|
78
78
|
Также можно включить автоматическое регулирование высоты поля ввода по длине контента внутри (параметра `value`).
|
79
|
-
Для этого необходимо использовать свойство `autoResize`.
|
79
|
+
Для этого необходимо использовать свойство `autoResize`.
|
80
80
|
|
81
81
|
Свойства `minAuto`, `maxAuto` указываются в абсолютных единицах и отвечают за минимальное и максимальное количество строк.
|
82
82
|
|
@@ -123,4 +123,30 @@ export function App() {
|
|
123
123
|
</div>
|
124
124
|
);
|
125
125
|
}
|
126
|
-
```
|
126
|
+
```
|
127
|
+
|
128
|
+
|
129
|
+
### Обязательность поля
|
130
|
+
Обязательность поля задаётся с помощью свойств `required` и `requiredPlacement`. Где `requiredPlacement` отвечает за выравнивание и принимает значения `"left"` и `"right"`:
|
131
|
+
|
132
|
+
```tsx live
|
133
|
+
import React from 'react';
|
134
|
+
import { TextField } from '@salutejs/{{ package }}';
|
135
|
+
|
136
|
+
export function App() {
|
137
|
+
return (
|
138
|
+
<div>
|
139
|
+
<TextArea
|
140
|
+
placeholder="Введите значение"
|
141
|
+
required
|
142
|
+
/>
|
143
|
+
<TextArea
|
144
|
+
placeholder="Введите значение"
|
145
|
+
label="Заголовок"
|
146
|
+
required
|
147
|
+
requiredPlacement="right"
|
148
|
+
/>
|
149
|
+
</div>
|
150
|
+
);
|
151
|
+
}
|
152
|
+
```
|
@@ -14,7 +14,9 @@ export var classes = {
|
|
14
14
|
/** Класс для компонента `StyledPlaceholder` */
|
15
15
|
styledPlaceholder: 'textarea-placeholder',
|
16
16
|
/** Класс для компонента `StyledHelpers` */
|
17
|
-
styledHelpers: 'textarea-helpers'
|
17
|
+
styledHelpers: 'textarea-helpers',
|
18
|
+
innerLabelPlacement: 'label-placement-inner',
|
19
|
+
outerLabelPlacement: 'label-placement-outer'
|
18
20
|
};
|
19
21
|
export var tokens = {
|
20
22
|
/** Цвет фона для элемента textarea */
|
@@ -51,6 +53,8 @@ export var tokens = {
|
|
51
53
|
placeholderColor: '--plasma-textarea-placeholder-color',
|
52
54
|
/** Цвет элемента placeholder в состоянии focus */
|
53
55
|
placeholderColorFocus: '--plasma-textarea-placeholder-color-focus',
|
56
|
+
/** Цвет элемента optional */
|
57
|
+
optionalColor: '--plasma-textarea__optional-color',
|
54
58
|
/** Цвет текста для левой подписи снизу */
|
55
59
|
leftHelperColor: '--plasma-textarea-left-helper-color',
|
56
60
|
/** Цвет текста для правой подписи снизу */
|
@@ -146,5 +150,12 @@ export var tokens = {
|
|
146
150
|
/** Прозрачность для всего компонента в состоянии disabled */
|
147
151
|
disabledOpacity: '--plasma-textarea-disabled-opacity',
|
148
152
|
/** Цвет текста для элемента textarea в состоянии disabled */
|
149
|
-
inputColorDisabled: '--plasma-textarea-input-color-disabled'
|
153
|
+
inputColorDisabled: '--plasma-textarea-input-color-disabled',
|
154
|
+
indicatorColor: '--plasma-textarea-indicator-color',
|
155
|
+
indicatorSizeInner: '--plasma-textarea-indicator-size-inner',
|
156
|
+
indicatorSizeOuter: '--plasma-textarea-indicator-size-outer',
|
157
|
+
indicatorLabelPlacementInner: '--plasma-textarea-indicator-placement-inner',
|
158
|
+
indicatorLabelPlacementOuter: '--plasma-textarea-indicator-placement-outer',
|
159
|
+
indicatorLabelPlacementInnerRight: '--plasma-textarea-indicator-placement-inner-right',
|
160
|
+
indicatorLabelPlacementOuterRight: '--plasma-textarea-indicator-placement-outer-right'
|
150
161
|
};
|
@@ -36,5 +36,11 @@
|
|
36
36
|
"--plasma-textarea-helpers-font-style",
|
37
37
|
"--plasma-textarea-helpers-font-weight",
|
38
38
|
"--plasma-textarea-helpers-letter-spacing",
|
39
|
-
"--plasma-textarea-helpers-line-height"
|
39
|
+
"--plasma-textarea-helpers-line-height",
|
40
|
+
"--plasma-textarea-indicator-size-inner",
|
41
|
+
"--plasma-textarea-indicator-size-outer",
|
42
|
+
"--plasma-textarea-indicator-placement-inner",
|
43
|
+
"--plasma-textarea-indicator-placement-outer",
|
44
|
+
"--plasma-textarea-indicator-placement-inner-right",
|
45
|
+
"--plasma-textarea-indicator-placement-outer-right"
|
40
46
|
]
|
@@ -1,4 +1,4 @@
|
|
1
|
-
var _excluded = ["id", "className", "style", "contentLeft", "contentRight", "label", "labelPlacement", "textBefore", "textAfter", "placeholder", "leftHelper", "enumerationType", "view", "size", "readOnly", "disabled", "chips", "onChange", "onChangeChips", "onSearch", "onKeyDown"];
|
1
|
+
var _excluded = ["id", "className", "style", "contentLeft", "contentRight", "label", "labelPlacement", "textBefore", "textAfter", "placeholder", "leftHelper", "enumerationType", "requiredPlacement", "view", "size", "readOnly", "disabled", "required", "optional", "chips", "onChange", "onChangeChips", "onSearch", "onKeyDown"];
|
2
2
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
3
3
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
4
4
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
@@ -17,11 +17,12 @@ import { base as viewCSS } from './variations/_view/base';
|
|
17
17
|
import { base as disabledCSS } from './variations/_disabled/base';
|
18
18
|
import { base as readOnlyCSS } from './variations/_read-only/base';
|
19
19
|
import { base as labelPlacementCSS } from './variations/_label-placement/base';
|
20
|
-
import { Input, LeftHelper, Label, InputWrapper, InputLabelWrapper, StyledContentLeft, StyledContentRight, StyledChips, StyledTextBefore, StyledTextAfter } from './TextField.styles';
|
20
|
+
import { Input, InputContainer, LeftHelper, Label, InputWrapper, InputLabelWrapper, StyledContentLeft, StyledContentRight, StyledChips, StyledTextBefore, StyledTextAfter, StyledIndicator, StyledOptionalText, InputPlaceholder } from './TextField.styles';
|
21
21
|
import { classes } from './TextField.tokens';
|
22
22
|
import { TextFieldChip } from './ui';
|
23
23
|
import { useKeyNavigation } from './hooks';
|
24
|
-
|
24
|
+
var optionalText = 'optional';
|
25
|
+
export var base = /*#__PURE__*/css(["display:block;"]);
|
25
26
|
export var textFieldRoot = function textFieldRoot(Root) {
|
26
27
|
return /*#__PURE__*/forwardRef(function (_ref, ref) {
|
27
28
|
var id = _ref.id,
|
@@ -37,12 +38,17 @@ export var textFieldRoot = function textFieldRoot(Root) {
|
|
37
38
|
leftHelper = _ref.leftHelper,
|
38
39
|
_ref$enumerationType = _ref.enumerationType,
|
39
40
|
enumerationType = _ref$enumerationType === void 0 ? 'plain' : _ref$enumerationType,
|
41
|
+
_ref$requiredPlacemen = _ref.requiredPlacement,
|
42
|
+
requiredPlacement = _ref$requiredPlacemen === void 0 ? 'right' : _ref$requiredPlacemen,
|
40
43
|
view = _ref.view,
|
41
44
|
size = _ref.size,
|
42
45
|
_ref$readOnly = _ref.readOnly,
|
43
46
|
readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
|
44
47
|
_ref$disabled = _ref.disabled,
|
45
48
|
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
49
|
+
_ref$required = _ref.required,
|
50
|
+
required = _ref$required === void 0 ? false : _ref$required,
|
51
|
+
optional = _ref.optional,
|
46
52
|
values = _ref.chips,
|
47
53
|
onChange = _ref.onChange,
|
48
54
|
onChangeChips = _ref.onChangeChips,
|
@@ -58,26 +64,37 @@ export var textFieldRoot = function textFieldRoot(Root) {
|
|
58
64
|
inputRef: inputRef,
|
59
65
|
chipsRefs: chipsRefs
|
60
66
|
};
|
61
|
-
var _useState = useState(
|
67
|
+
var _useState = useState(!!rest.value),
|
62
68
|
_useState2 = _slicedToArray(_useState, 2),
|
63
|
-
|
64
|
-
|
69
|
+
hasValue = _useState2[0],
|
70
|
+
setHasValue = _useState2[1];
|
71
|
+
var _useState3 = useState([]),
|
72
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
73
|
+
chips = _useState4[0],
|
74
|
+
setChips = _useState4[1];
|
65
75
|
var uniqId = safeUseId();
|
66
76
|
var innerId = id || uniqId;
|
67
77
|
var labelId = safeUseId();
|
68
78
|
var helperTextId = safeUseId();
|
69
79
|
var isChipEnumeration = enumerationType === 'chip';
|
70
|
-
var
|
71
|
-
var labelInside = size !== 'xs' && labelPlacement === 'inner';
|
72
|
-
var innerLabelPlacementValue = hideLabel ? 'outer' : labelPlacement;
|
73
|
-
var innerPlaceholderValue = hideLabel ? label : placeholder;
|
74
|
-
var innerLabelValue = hideLabel ? undefined : label;
|
75
|
-
var hideLabelClass = hideLabel && label ? classes.hideLabel : undefined;
|
76
|
-
var labelPlacementClass = classes["".concat(labelPlacement, "LabelPlacement")];
|
77
|
-
var isChipsVisible = isChipEnumeration && (chips === null || chips === void 0 ? void 0 : chips.length);
|
80
|
+
var isChipsVisible = isChipEnumeration && !!(chips !== null && chips !== void 0 && chips.length);
|
78
81
|
var withHasChips = isChipsVisible ? classes.hasChips : undefined;
|
82
|
+
var hasLabelValue = !!label;
|
83
|
+
var hasInnerLabel = size !== 'xs' && labelPlacement === 'inner' && !isChipsVisible && hasLabelValue;
|
84
|
+
var hasOuterLabel = labelPlacement === 'outer' && hasLabelValue;
|
85
|
+
var hasPlaceholder = !!placeholder && !hasInnerLabel;
|
86
|
+
var innerLabelValue = hasInnerLabel || hasOuterLabel ? label : undefined;
|
87
|
+
var innerLabelPlacementValue = labelPlacement === 'inner' && !hasInnerLabel ? undefined : labelPlacement;
|
88
|
+
var innerPlaceholderValue = hasPlaceholder ? placeholder : undefined;
|
89
|
+
var placeholderShown = !!innerPlaceholderValue && !hasValue;
|
90
|
+
var requiredPlacementClass = requiredPlacement === 'right' ? 'align-right ' : undefined;
|
91
|
+
var labelPlacementClass = innerLabelPlacementValue ? classes["".concat(innerLabelPlacementValue, "LabelPlacement")] : undefined;
|
92
|
+
var hasValueClass = hasValue ? classes.hasValue : undefined;
|
79
93
|
var wrapperWithoutLeftContent = !contentLeft && isChipsVisible ? classes.hasEmptyContentLeft : undefined;
|
80
94
|
var wrapperWithoutRightContent = !contentRight && isChipsVisible ? classes.hasEmptyContentRight : undefined;
|
95
|
+
var handleInput = function handleInput(event) {
|
96
|
+
setHasValue(!!event.target.value);
|
97
|
+
};
|
81
98
|
var handleChange = function handleChange(event) {
|
82
99
|
if (disabled || readOnly) {
|
83
100
|
return;
|
@@ -143,6 +160,9 @@ export var textFieldRoot = function textFieldRoot(Root) {
|
|
143
160
|
})) || [];
|
144
161
|
setChips(newChips);
|
145
162
|
}, [isChipEnumeration, values]);
|
163
|
+
var innerOptional = Boolean(required ? false : optional);
|
164
|
+
var hasPlaceholderOptional = innerOptional && !innerLabelValue && !hasOuterLabel;
|
165
|
+
var optionalTextNode = innerOptional ? /*#__PURE__*/React.createElement(StyledOptionalText, null, Boolean(hasPlaceholderOptional ? innerPlaceholderValue : innerLabelValue) && '\xa0', optionalText) : null;
|
146
166
|
return /*#__PURE__*/React.createElement(Root, {
|
147
167
|
view: view,
|
148
168
|
size: size,
|
@@ -150,14 +170,18 @@ export var textFieldRoot = function textFieldRoot(Root) {
|
|
150
170
|
readOnly: !disabled && readOnly,
|
151
171
|
labelPlacement: innerLabelPlacementValue,
|
152
172
|
onClick: handleInputFocus,
|
153
|
-
className: cx(labelPlacementClass,
|
173
|
+
className: cx(labelPlacementClass, classes.textFieldGroupItem, className),
|
154
174
|
style: style
|
155
|
-
},
|
175
|
+
}, hasOuterLabel && /*#__PURE__*/React.createElement(Label, {
|
156
176
|
id: labelId,
|
157
177
|
htmlFor: id
|
158
|
-
},
|
178
|
+
}, required && /*#__PURE__*/React.createElement(StyledIndicator, {
|
179
|
+
className: cx(classes.outerLabelPlacement, requiredPlacementClass)
|
180
|
+
}), innerLabelValue, optionalTextNode), /*#__PURE__*/React.createElement(InputWrapper, {
|
159
181
|
className: cx(withHasChips, wrapperWithoutLeftContent, wrapperWithoutRightContent)
|
160
|
-
},
|
182
|
+
}, !hasOuterLabel && required && /*#__PURE__*/React.createElement(StyledIndicator, {
|
183
|
+
className: cx(classes.innerLabelPlacement, requiredPlacementClass)
|
184
|
+
}), contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), /*#__PURE__*/React.createElement(InputLabelWrapper, {
|
161
185
|
tabIndex: -1,
|
162
186
|
ref: contentRef,
|
163
187
|
onKeyDown: handleContentKeyDown,
|
@@ -183,20 +207,22 @@ export var textFieldRoot = function textFieldRoot(Root) {
|
|
183
207
|
},
|
184
208
|
onClick: onChipClick
|
185
209
|
});
|
186
|
-
})), /*#__PURE__*/React.createElement(Input, _extends({
|
210
|
+
})), /*#__PURE__*/React.createElement(InputContainer, null, /*#__PURE__*/React.createElement(Input, _extends({
|
187
211
|
ref: inputForkRef,
|
188
212
|
id: innerId,
|
189
213
|
"aria-labelledby": labelId,
|
190
214
|
"aria-describedby": helperTextId,
|
191
215
|
placeholder: innerPlaceholderValue,
|
216
|
+
className: cx(hasValueClass),
|
192
217
|
disabled: disabled,
|
193
218
|
readOnly: !disabled && readOnly,
|
219
|
+
onInput: handleInput,
|
194
220
|
onChange: handleChange,
|
195
221
|
onKeyDown: handleOnKeyDown
|
196
|
-
}, rest)),
|
222
|
+
}, rest)), hasInnerLabel && /*#__PURE__*/React.createElement(Label, {
|
197
223
|
id: labelId,
|
198
224
|
htmlFor: innerId
|
199
|
-
}, innerLabelValue), textAfter && /*#__PURE__*/React.createElement(StyledTextAfter, null, textAfter)), contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight)), leftHelper && /*#__PURE__*/React.createElement(LeftHelper, {
|
225
|
+
}, innerLabelValue, optionalTextNode), placeholderShown && /*#__PURE__*/React.createElement(InputPlaceholder, null, innerPlaceholderValue, hasPlaceholderOptional && optionalTextNode)), textAfter && /*#__PURE__*/React.createElement(StyledTextAfter, null, textAfter)), contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight)), leftHelper && /*#__PURE__*/React.createElement(LeftHelper, {
|
200
226
|
id: helperTextId
|
201
227
|
}, leftHelper));
|
202
228
|
});
|
@@ -11,22 +11,34 @@ export var StyledChips = /*#__PURE__*/styled.div.withConfig({
|
|
11
11
|
})(["display:flex;gap:var(", ");margin-right:var(", ");user-select:none;"], tokens.chipGap, tokens.chipGap);
|
12
12
|
export var Input = /*#__PURE__*/styled.input.withConfig({
|
13
13
|
componentId: "plasma-new-hope__sc-g4vxbb-3"
|
14
|
-
})(["box-sizing:border-box;appearance:none;border:0;padding:0;background-color:transparent;outline:none;
|
15
|
-
export var
|
14
|
+
})(["box-sizing:border-box;appearance:none;border:0;padding:0;background-color:transparent;outline:none;width:100%;z-index:1;&::placeholder{opacity:0;}"]);
|
15
|
+
export var InputContainer = /*#__PURE__*/styled.div.withConfig({
|
16
16
|
componentId: "plasma-new-hope__sc-g4vxbb-4"
|
17
|
-
})([""]);
|
18
|
-
export var
|
17
|
+
})(["position:relative;flex:1;min-width:60%;"]);
|
18
|
+
export var InputPlaceholder = /*#__PURE__*/styled.div.withConfig({
|
19
19
|
componentId: "plasma-new-hope__sc-g4vxbb-5"
|
20
|
+
})(["position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;white-space:nowrap;pointer-events:none;user-select:none;font:inherit;letter-spacing:inherit;line-height:inherit;color:var(", ");"], tokens.placeholderColor);
|
21
|
+
export var Label = /*#__PURE__*/styled.label.withConfig({
|
22
|
+
componentId: "plasma-new-hope__sc-g4vxbb-6"
|
23
|
+
})(["position:relative;display:inline-flex;"]);
|
24
|
+
export var StyledContentLeft = /*#__PURE__*/styled.div.withConfig({
|
25
|
+
componentId: "plasma-new-hope__sc-g4vxbb-7"
|
20
26
|
})(["margin:var(", ");line-height:0;"], tokens.leftContentMargin);
|
21
27
|
export var StyledContentRight = /*#__PURE__*/styled.div.withConfig({
|
22
|
-
componentId: "plasma-new-hope__sc-g4vxbb-
|
28
|
+
componentId: "plasma-new-hope__sc-g4vxbb-8"
|
23
29
|
})(["margin:var(", ");line-height:0;"], tokens.rightContentMargin);
|
24
30
|
export var LeftHelper = /*#__PURE__*/styled.div.withConfig({
|
25
|
-
componentId: "plasma-new-hope__sc-g4vxbb-
|
31
|
+
componentId: "plasma-new-hope__sc-g4vxbb-9"
|
26
32
|
})([""]);
|
27
33
|
export var StyledTextBefore = /*#__PURE__*/styled.div.withConfig({
|
28
|
-
componentId: "plasma-new-hope__sc-g4vxbb-
|
34
|
+
componentId: "plasma-new-hope__sc-g4vxbb-10"
|
29
35
|
})([""]);
|
30
36
|
export var StyledTextAfter = /*#__PURE__*/styled.div.withConfig({
|
31
|
-
componentId: "plasma-new-hope__sc-g4vxbb-
|
32
|
-
})([""]);
|
37
|
+
componentId: "plasma-new-hope__sc-g4vxbb-11"
|
38
|
+
})([""]);
|
39
|
+
export var StyledOptionalText = /*#__PURE__*/styled.span.withConfig({
|
40
|
+
componentId: "plasma-new-hope__sc-g4vxbb-12"
|
41
|
+
})(["color:var(", ");"], tokens.optionalColor);
|
42
|
+
export var StyledIndicator = /*#__PURE__*/styled.div.withConfig({
|
43
|
+
componentId: "plasma-new-hope__sc-g4vxbb-13"
|
44
|
+
})(["position:absolute;border-radius:50%;background-color:var(", ");&.", "{width:var(", ");height:var(", ");inset:var(", ");&.align-right{inset:var(", ");}}&.", "{width:var(", ");height:var(", ");inset:var(", ");&.align-right{inset:var(", ");}}"], tokens.indicatorColor, classes.outerLabelPlacement, tokens.indicatorSizeOuter, tokens.indicatorSizeOuter, tokens.indicatorLabelPlacementOuter, tokens.indicatorLabelPlacementOuterRight, classes.innerLabelPlacement, tokens.indicatorSizeInner, tokens.indicatorSizeInner, tokens.indicatorLabelPlacementInner, tokens.indicatorLabelPlacementInnerRight);
|
@@ -112,7 +112,7 @@ export function App() {
|
|
112
112
|
```
|
113
113
|
|
114
114
|
### Режим ввода
|
115
|
-
С помощью свойства `enumarationType` можно вводить элементы как теги.
|
115
|
+
С помощью свойства `enumarationType` можно вводить элементы как теги.
|
116
116
|
По нажатию Enter, после ввода нужного текста, он преобразуется в Chip:
|
117
117
|
|
118
118
|
```tsx live
|
@@ -134,3 +134,29 @@ export function App() {
|
|
134
134
|
);
|
135
135
|
}
|
136
136
|
```
|
137
|
+
|
138
|
+
|
139
|
+
### Обязательность поля
|
140
|
+
Обязательность поля задаётся с помощью свойств `required` и `requiredPlacement`. Где `requiredPlacement` отвечает за выравнивание и принимает значения `"left"` и `"right"`:
|
141
|
+
|
142
|
+
```tsx live
|
143
|
+
import React from 'react';
|
144
|
+
import { TextField } from '@salutejs/{{ package }}';
|
145
|
+
|
146
|
+
export function App() {
|
147
|
+
return (
|
148
|
+
<div>
|
149
|
+
<TextField
|
150
|
+
placeholder="Введите значение"
|
151
|
+
required
|
152
|
+
/>
|
153
|
+
<TextField
|
154
|
+
placeholder="Введите значение"
|
155
|
+
label="Заголовок"
|
156
|
+
required
|
157
|
+
requiredPlacement="right"
|
158
|
+
/>
|
159
|
+
</div>
|
160
|
+
);
|
161
|
+
}
|
162
|
+
```
|
@@ -1,5 +1,6 @@
|
|
1
1
|
export var classes = {
|
2
2
|
hasChips: 'has-chips',
|
3
|
+
hasValue: 'has-value',
|
3
4
|
hasEmptyContentLeft: 'has-empty-content-left',
|
4
5
|
hasEmptyContentRight: 'has-empty-content-right',
|
5
6
|
innerLabelPlacement: 'label-placement-inner',
|
@@ -23,6 +24,7 @@ export var tokens = {
|
|
23
24
|
/** Цвет каретки */
|
24
25
|
caretColor: '--plasma-textfield__caret-color',
|
25
26
|
placeholderColor: '--plasma-textfield__placeholder-color',
|
27
|
+
optionalColor: '--plasma-textfield__optional-color',
|
26
28
|
height: '--plasma-textfield-height',
|
27
29
|
borderWidth: '--plasma-textfield-border-width',
|
28
30
|
borderRadius: '--plasma-textfield-border-radius',
|
@@ -107,5 +109,12 @@ export var tokens = {
|
|
107
109
|
chipClearContentMarginLeft: '--plasma-textfield__chip-clear-content-margin-left',
|
108
110
|
chipClearContentMarginRight: '--plasma-textfield__chip-clear-content-margin-right',
|
109
111
|
chipOpacityReadonly: '--plasma-textfield__chip-opacity-readonly',
|
110
|
-
focusColor: '--plasma-textfield-focus-color'
|
112
|
+
focusColor: '--plasma-textfield-focus-color',
|
113
|
+
indicatorColor: '--plasma-textfield__indicator-color',
|
114
|
+
indicatorSizeInner: '--plasma-textfield__indicator-size-inner',
|
115
|
+
indicatorSizeOuter: '--plasma-textfield__indicator-size-outer',
|
116
|
+
indicatorLabelPlacementInner: '--plasma-textfield__indicator-placement-inner',
|
117
|
+
indicatorLabelPlacementOuter: '--plasma-textfield__indicator-placement-outer',
|
118
|
+
indicatorLabelPlacementInnerRight: '--plasma-textfield__indicator-placement-inner-right',
|
119
|
+
indicatorLabelPlacementOuterRight: '--plasma-textfield__indicator-placement-outer-right'
|
111
120
|
};
|
@@ -1,4 +1,4 @@
|
|
1
1
|
import { css } from 'styled-components';
|
2
2
|
import { classes, tokens } from '../../TextField.tokens';
|
3
|
-
import { Input, Label, StyledTextAfter, StyledTextBefore } from '../../TextField.styles';
|
4
|
-
export var base = /*#__PURE__*/css(["&.", "{", "{display:block;margin-bottom:var(", ");color:var(", ");}}&.", "{
|
3
|
+
import { Input, InputContainer, Label, StyledTextAfter, StyledTextBefore } from '../../TextField.styles';
|
4
|
+
export var base = /*#__PURE__*/css(["&.", "{", "{position:relative;display:inline-block;margin-bottom:var(", ");color:var(", ");}}&.", "{", "{padding:var(", ");}", ",", "{padding:var(", ");}", ":focus ~ ", ",", ".", " ~ ", "{align-items:flex-start;padding:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{color:var(", ");pointer-events:none;position:absolute;top:0;display:flex;align-items:center;box-sizing:border-box;height:var(", ");padding-top:calc(calc(var(", ") - var(", ")) / 2);padding-bottom:calc(calc(var(", ") - var(", ")) / 2);}}"], classes.outerLabelPlacement, Label, tokens.labelOffset, tokens.labelColor, classes.innerLabelPlacement, InputContainer, tokens.contentLabelInnerPadding, StyledTextAfter, StyledTextBefore, tokens.contentLabelInnerPadding, Input, Label, Input, classes.hasValue, Label, tokens.labelInnerPadding, tokens.labelInnerFontFamily, tokens.labelInnerFontSize, tokens.labelInnerFontStyle, tokens.labelInnerFontWeight, tokens.labelInnerLetterSpacing, tokens.labelInnerLineHeight, Label, tokens.placeholderColor, tokens.height, tokens.height, tokens.labelLineHeight, tokens.height, tokens.labelLineHeight);
|
@@ -1,4 +1,4 @@
|
|
1
1
|
import { css } from 'styled-components';
|
2
2
|
import { tokens } from '../../TextField.tokens';
|
3
|
-
import { Input, InputWrapper, Label, LeftHelper } from '../../TextField.styles';
|
4
|
-
export var base = /*#__PURE__*/css(["&[readonly]{", "{color:var(", ");background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");}", ":hover{background-color:var(", ");}", "
|
3
|
+
import { Input, InputPlaceholder, InputWrapper, Label, LeftHelper } from '../../TextField.styles';
|
4
|
+
export var base = /*#__PURE__*/css(["&[readonly]{", "{color:var(", ");background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");}", ":hover{background-color:var(", ");}", "{color:var(", ");}", "{color:var(", ");cursor:default;min-width:unset;}", "{color:var(", ");}", "{color:var(", ");}}"], InputWrapper, tokens.colorReadOnly, /*#__PURE__*/String(tokens.backgroundColorReadOnly), /*#__PURE__*/String(tokens.borderWidth), /*#__PURE__*/String(tokens.borderColorReadOnly), InputWrapper, tokens.backgroundColorReadOnly, InputPlaceholder, tokens.placeholderColorReadOnly, Input, tokens.colorReadOnly, LeftHelper, tokens.leftHelperColorReadOnly, Label, tokens.labelColorReadOnly);
|
@@ -1,4 +1,4 @@
|
|
1
1
|
import { css } from 'styled-components';
|
2
2
|
import { classes, tokens } from '../../TextField.tokens';
|
3
|
-
import { Input, InputWrapper, Label, LeftHelper, StyledTextAfter, StyledTextBefore } from '../../TextField.styles';
|
4
|
-
export var base = /*#__PURE__*/css(["", "{width:100%;font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{height:var(", ");border-radius:var(", ");padding:var(", ");&.", "{padding-top:var(", ");padding-bottom:var(", ");}&.", "{padding-left:var(", ");}&.", "{padding-right:var(", ");}}", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{margin-top:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", ",", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{margin:var(", ");}", "{margin:var(", ");}"], Input, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, InputWrapper, tokens.height, tokens.borderRadius, tokens.padding, classes.hasChips, tokens.paddingWithChips, tokens.paddingWithChips, classes.hasEmptyContentLeft, tokens.paddingWithChips, classes.hasEmptyContentRight, tokens.paddingWithChips, Label, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, LeftHelper, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, StyledTextBefore, StyledTextAfter, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, StyledTextBefore, tokens.textBeforeMargin, StyledTextAfter, tokens.textAfterMargin);
|
3
|
+
import { Input, InputContainer, InputWrapper, Label, LeftHelper, StyledTextAfter, StyledTextBefore } from '../../TextField.styles';
|
4
|
+
export var base = /*#__PURE__*/css(["", "{width:100%;font:inherit;letter-spacing:inherit;line-height:inherit;}", "{width:100%;font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{height:var(", ");border-radius:var(", ");padding:var(", ");&.", "{padding-top:var(", ");padding-bottom:var(", ");}&.", "{padding-left:var(", ");}&.", "{padding-right:var(", ");}}", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{margin-top:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", ",", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{margin:var(", ");}", "{margin:var(", ");}"], Input, InputContainer, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, InputWrapper, tokens.height, tokens.borderRadius, tokens.padding, classes.hasChips, tokens.paddingWithChips, tokens.paddingWithChips, classes.hasEmptyContentLeft, tokens.paddingWithChips, classes.hasEmptyContentRight, tokens.paddingWithChips, Label, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, LeftHelper, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, StyledTextBefore, StyledTextAfter, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, StyledTextBefore, tokens.textBeforeMargin, StyledTextAfter, tokens.textAfterMargin);
|
@@ -2,5 +2,11 @@
|
|
2
2
|
"--plasma-textfield-height",
|
3
3
|
"--plasma-textfield-padding",
|
4
4
|
"--plasma-textfield-radius",
|
5
|
+
"--plasma-textfield-indicator-size-inner",
|
6
|
+
"--plasma-textfield-indicator-size-outer",
|
7
|
+
"--plasma-textfield-indicator-placement-inner",
|
8
|
+
"--plasma-textfield-indicator-placement-outer",
|
9
|
+
"--plasma-textfield-indicator-placement-inner-right",
|
10
|
+
"--plasma-textfield-indicator-placement-outer-right",
|
5
11
|
{ "name": "typography", "type": "enum", "value": "typo:body" }
|
6
12
|
]
|
@@ -1,4 +1,4 @@
|
|
1
1
|
import { css } from 'styled-components';
|
2
2
|
import { tokens } from '../../TextField.tokens';
|
3
|
-
import { Input, InputWrapper, LeftHelper, StyledTextAfter, StyledTextBefore } from '../../TextField.styles';
|
4
|
-
export var base = /*#__PURE__*/css(["", "{--plasma_private-textfield-border-color:var(", ");--plasma_private-textfield-bg-color:var(", ");color:var(", ");background-color:var(--plasma_private-textfield-bg-color);box-shadow:inset 0 0 0 var(", ") var(--plasma_private-textfield-border-color);caret-color:var(", ");transition:background-color 0.1s ease-in,color 0.1s ease-in,box-shadow 0.1s ease-in;}", ":hover{--plasma_private-textfield-border-color:var(", ",var(", "));--plasma_private-textfield-bg-color:var( ", ",var(", ") );}", ":focus-within{--plasma_private-textfield-border-color:var(", ",var(", "));--plasma_private-textfield-bg-color:var( ", ",var(", ") );}", "
|
3
|
+
import { Input, InputPlaceholder, InputWrapper, LeftHelper, StyledTextAfter, StyledTextBefore } from '../../TextField.styles';
|
4
|
+
export var base = /*#__PURE__*/css(["", "{--plasma_private-textfield-border-color:var(", ");--plasma_private-textfield-bg-color:var(", ");color:var(", ");background-color:var(--plasma_private-textfield-bg-color);box-shadow:inset 0 0 0 var(", ") var(--plasma_private-textfield-border-color);caret-color:var(", ");transition:background-color 0.1s ease-in,color 0.1s ease-in,box-shadow 0.1s ease-in;}", ":hover{--plasma_private-textfield-border-color:var(", ",var(", "));--plasma_private-textfield-bg-color:var( ", ",var(", ") );}", ":focus-within{--plasma_private-textfield-border-color:var(", ",var(", "));--plasma_private-textfield-bg-color:var( ", ",var(", ") );}", "{color:var(", ");}", "{color:var(", ");}", "{color:var(", ");}", "{color:var(", ");}", "{color:var(", ");}"], InputWrapper, /*#__PURE__*/String(tokens.borderColor), /*#__PURE__*/String(tokens.backgroundColor), tokens.color, tokens.borderWidth, tokens.caretColor, InputWrapper, tokens.borderColorHover, /*#__PURE__*/String(tokens.borderColor), tokens.backgroundColorHover, /*#__PURE__*/String(tokens.backgroundColor), InputWrapper, tokens.borderColorFocus, /*#__PURE__*/String(tokens.borderColor), tokens.backgroundColorFocus, /*#__PURE__*/String(tokens.backgroundColor), InputPlaceholder, tokens.placeholderColor, Input, tokens.color, LeftHelper, tokens.leftHelperColor, StyledTextBefore, tokens.textBeforeColor, StyledTextAfter, tokens.textAfterColor);
|
@@ -8,15 +8,15 @@ export var config = {
|
|
8
8
|
variations: {
|
9
9
|
size: {
|
10
10
|
xs: /*#__PURE__*/css(["", ":100%;", ":7.312rem;", ":0.625rem;", ":0.5rem;", ":0.5rem 0.5rem 0 0;", ":0.563rem;", ":0.625rem;", ":2.125rem;", ":0.563rem;", ":0.625rem;", ":0.5rem;", ":0.625rem;", ":0.563rem;", ":0.625rem;", ":0rem;", ":0.563rem;", ":0.5rem;", ":1.25rem;", ":0.375rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);", ":0rem;", ":0rem;", ":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);"], textAreaTokens.inputWidth, textAreaTokens.inputHeight, textAreaTokens.inputMinHeight, textAreaTokens.borderRadius, textAreaTokens.borderRadiusWithHelpers, textAreaTokens.inputPaddingTop, textAreaTokens.inputPaddingRight, textAreaTokens.inputPaddingRightWithRightContent, textAreaTokens.inputPaddingBottom, textAreaTokens.inputPaddingLeft, textAreaTokens.helpersPaddingTop, textAreaTokens.helpersPaddingRight, textAreaTokens.helpersPaddingBottom, textAreaTokens.helpersPaddingLeft, textAreaTokens.helpersOffset, textAreaTokens.rightContentTop, textAreaTokens.rightContentRight, textAreaTokens.rightContentHeight, textAreaTokens.labelMarginBottom, textAreaTokens.labelInnerFontFamily, textAreaTokens.labelInnerFontSize, textAreaTokens.labelInnerFontStyle, textAreaTokens.labelInnerFontWeight, textAreaTokens.labelInnerLetterSpacing, textAreaTokens.labelInnerLineHeight, textAreaTokens.labelInnerTop, textAreaTokens.labelInnerMarginBottom, textAreaTokens.inputFontFamily, textAreaTokens.inputFontSize, textAreaTokens.inputFontStyle, textAreaTokens.inputFontWeight, textAreaTokens.inputLetterSpacing, textAreaTokens.inputLineHeight, textAreaTokens.helpersFontFamily, textAreaTokens.helpersFontSize, textAreaTokens.helpersFontStyle, textAreaTokens.helpersFontWeight, textAreaTokens.helpersLetterSpacing, textAreaTokens.helpersLineHeight),
|
11
|
-
s: /*#__PURE__*/css(["", ":100%;", ":7.187rem;", ":0.625rem;", ":0.625rem;", ":0.625rem 0.625rem 0 0;", ":0.688rem;", ":0.875rem;", ":3.125rem;", ":0.75rem;", ":0.875rem;", ":0.75rem;", ":0.875rem;", ":0.75rem;", ":0.875rem;", ":0rem;", ":0.688rem;", ":0.75rem;", ":1.25rem;", ":0.5rem;", ":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.125rem;", ":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-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);"], textAreaTokens.inputWidth, textAreaTokens.inputHeight, textAreaTokens.inputMinHeight, textAreaTokens.borderRadius, textAreaTokens.borderRadiusWithHelpers, textAreaTokens.inputPaddingTop, textAreaTokens.inputPaddingRight, textAreaTokens.inputPaddingRightWithRightContent, textAreaTokens.inputPaddingBottom, textAreaTokens.inputPaddingLeft, textAreaTokens.helpersPaddingTop, textAreaTokens.helpersPaddingRight, textAreaTokens.helpersPaddingBottom, textAreaTokens.helpersPaddingLeft, textAreaTokens.helpersOffset, textAreaTokens.rightContentTop, textAreaTokens.rightContentRight, textAreaTokens.rightContentHeight, textAreaTokens.labelMarginBottom, textAreaTokens.labelInnerFontFamily, textAreaTokens.labelInnerFontSize, textAreaTokens.labelInnerFontStyle, textAreaTokens.labelInnerFontWeight, textAreaTokens.labelInnerLetterSpacing, textAreaTokens.labelInnerLineHeight, textAreaTokens.labelInnerTop, textAreaTokens.labelInnerMarginBottom, textAreaTokens.inputFontFamily, textAreaTokens.inputFontSize, textAreaTokens.inputFontStyle, textAreaTokens.inputFontWeight, textAreaTokens.inputLetterSpacing, textAreaTokens.inputLineHeight, textAreaTokens.helpersFontFamily, textAreaTokens.helpersFontSize, textAreaTokens.helpersFontStyle, textAreaTokens.helpersFontWeight, textAreaTokens.helpersLetterSpacing, textAreaTokens.helpersLineHeight),
|
12
|
-
m: /*#__PURE__*/css(["", ":100%;", ":7rem;", ":1.125rem;", ":0.75rem;", ":0.75rem 0.75rem 0 0;", ":0.875rem;", ":1rem;", ":3.375rem;", ":0.75rem;", ":1rem;", ":0.75rem;", ":1rem;", ":0.75rem;", ":1rem;", ":0rem;", ":0.875rem;", ":0.875rem;", ":1.25rem;", ":0.625rem;", ":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.125rem;", ":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-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);"], textAreaTokens.inputWidth, textAreaTokens.inputHeight, textAreaTokens.inputMinHeight, textAreaTokens.borderRadius, textAreaTokens.borderRadiusWithHelpers, textAreaTokens.inputPaddingTop, textAreaTokens.inputPaddingRight, textAreaTokens.inputPaddingRightWithRightContent, textAreaTokens.inputPaddingBottom, textAreaTokens.inputPaddingLeft, textAreaTokens.helpersPaddingTop, textAreaTokens.helpersPaddingRight, textAreaTokens.helpersPaddingBottom, textAreaTokens.helpersPaddingLeft, textAreaTokens.helpersOffset, textAreaTokens.rightContentTop, textAreaTokens.rightContentRight, textAreaTokens.rightContentHeight, textAreaTokens.labelMarginBottom, textAreaTokens.labelInnerFontFamily, textAreaTokens.labelInnerFontSize, textAreaTokens.labelInnerFontStyle, textAreaTokens.labelInnerFontWeight, textAreaTokens.labelInnerLetterSpacing, textAreaTokens.labelInnerLineHeight, textAreaTokens.labelInnerTop, textAreaTokens.labelInnerMarginBottom, textAreaTokens.inputFontFamily, textAreaTokens.inputFontSize, textAreaTokens.inputFontStyle, textAreaTokens.inputFontWeight, textAreaTokens.inputLetterSpacing, textAreaTokens.inputLineHeight, textAreaTokens.helpersFontFamily, textAreaTokens.helpersFontSize, textAreaTokens.helpersFontStyle, textAreaTokens.helpersFontWeight, textAreaTokens.helpersLetterSpacing, textAreaTokens.helpersLineHeight),
|
13
|
-
l: /*#__PURE__*/css(["", ":100%;", ":6.812rem;", ":1.625rem;", ":0.875rem;", ":0.875rem 0.875rem 0 0;", ":1.063rem;", ":1.125rem;", ":3.625rem;", ":0.75rem;", ":1.125rem;", ":0.75rem;", ":1.125rem;", ":0.75rem;", ":1.125rem;", ":0rem;", ":1.063rem;", ":1rem;", ":1.25rem;", ":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.5625rem;", ":0.125rem;", ":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-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);"], textAreaTokens.inputWidth, textAreaTokens.inputHeight, textAreaTokens.inputMinHeight, textAreaTokens.borderRadius, textAreaTokens.borderRadiusWithHelpers, textAreaTokens.inputPaddingTop, textAreaTokens.inputPaddingRight, textAreaTokens.inputPaddingRightWithRightContent, textAreaTokens.inputPaddingBottom, textAreaTokens.inputPaddingLeft, textAreaTokens.helpersPaddingTop, textAreaTokens.helpersPaddingRight, textAreaTokens.helpersPaddingBottom, textAreaTokens.helpersPaddingLeft, textAreaTokens.helpersOffset, textAreaTokens.rightContentTop, textAreaTokens.rightContentRight, textAreaTokens.rightContentHeight, textAreaTokens.labelMarginBottom, textAreaTokens.labelInnerFontFamily, textAreaTokens.labelInnerFontSize, textAreaTokens.labelInnerFontStyle, textAreaTokens.labelInnerFontWeight, textAreaTokens.labelInnerLetterSpacing, textAreaTokens.labelInnerLineHeight, textAreaTokens.labelInnerTop, textAreaTokens.labelInnerMarginBottom, textAreaTokens.inputFontFamily, textAreaTokens.inputFontSize, textAreaTokens.inputFontStyle, textAreaTokens.inputFontWeight, textAreaTokens.inputLetterSpacing, textAreaTokens.inputLineHeight, textAreaTokens.helpersFontFamily, textAreaTokens.helpersFontSize, textAreaTokens.helpersFontStyle, textAreaTokens.helpersFontWeight, textAreaTokens.helpersLetterSpacing, textAreaTokens.helpersLineHeight)
|
11
|
+
s: /*#__PURE__*/css(["", ":100%;", ":7.187rem;", ":0.625rem;", ":0.625rem;", ":0.625rem 0.625rem 0 0;", ":0.688rem;", ":0.875rem;", ":3.125rem;", ":0.75rem;", ":0.875rem;", ":0.75rem;", ":0.875rem;", ":0.75rem;", ":0.875rem;", ":0rem;", ":0.688rem;", ":0.75rem;", ":1.25rem;", ":0.5rem;", ":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.125rem;", ":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-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.375rem;", ":0 0 0 0;", ":0.375rem auto auto -0.675rem;", ":0 0 auto auto;", ":0.25rem -0.625rem auto auto;"], textAreaTokens.inputWidth, textAreaTokens.inputHeight, textAreaTokens.inputMinHeight, textAreaTokens.borderRadius, textAreaTokens.borderRadiusWithHelpers, textAreaTokens.inputPaddingTop, textAreaTokens.inputPaddingRight, textAreaTokens.inputPaddingRightWithRightContent, textAreaTokens.inputPaddingBottom, textAreaTokens.inputPaddingLeft, textAreaTokens.helpersPaddingTop, textAreaTokens.helpersPaddingRight, textAreaTokens.helpersPaddingBottom, textAreaTokens.helpersPaddingLeft, textAreaTokens.helpersOffset, textAreaTokens.rightContentTop, textAreaTokens.rightContentRight, textAreaTokens.rightContentHeight, textAreaTokens.labelMarginBottom, textAreaTokens.labelInnerFontFamily, textAreaTokens.labelInnerFontSize, textAreaTokens.labelInnerFontStyle, textAreaTokens.labelInnerFontWeight, textAreaTokens.labelInnerLetterSpacing, textAreaTokens.labelInnerLineHeight, textAreaTokens.labelInnerTop, textAreaTokens.labelInnerMarginBottom, textAreaTokens.inputFontFamily, textAreaTokens.inputFontSize, textAreaTokens.inputFontStyle, textAreaTokens.inputFontWeight, textAreaTokens.inputLetterSpacing, textAreaTokens.inputLineHeight, textAreaTokens.helpersFontFamily, textAreaTokens.helpersFontSize, textAreaTokens.helpersFontStyle, textAreaTokens.helpersFontWeight, textAreaTokens.helpersLetterSpacing, textAreaTokens.helpersLineHeight, textAreaTokens.indicatorSizeInner, textAreaTokens.indicatorSizeOuter, textAreaTokens.indicatorLabelPlacementInner, textAreaTokens.indicatorLabelPlacementOuter, textAreaTokens.indicatorLabelPlacementInnerRight, textAreaTokens.indicatorLabelPlacementOuterRight),
|
12
|
+
m: /*#__PURE__*/css(["", ":100%;", ":7rem;", ":1.125rem;", ":0.75rem;", ":0.75rem 0.75rem 0 0;", ":0.875rem;", ":1rem;", ":3.375rem;", ":0.75rem;", ":1rem;", ":0.75rem;", ":1rem;", ":0.75rem;", ":1rem;", ":0rem;", ":0.875rem;", ":0.875rem;", ":1.25rem;", ":0.625rem;", ":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.125rem;", ":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-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.5rem;", ":0.375rem;", ":0 0 0 0;", ":0.4375rem auto auto -0.675rem;", ":0 0 auto auto;", ":0.1875rem -0.625rem auto auto;"], textAreaTokens.inputWidth, textAreaTokens.inputHeight, textAreaTokens.inputMinHeight, textAreaTokens.borderRadius, textAreaTokens.borderRadiusWithHelpers, textAreaTokens.inputPaddingTop, textAreaTokens.inputPaddingRight, textAreaTokens.inputPaddingRightWithRightContent, textAreaTokens.inputPaddingBottom, textAreaTokens.inputPaddingLeft, textAreaTokens.helpersPaddingTop, textAreaTokens.helpersPaddingRight, textAreaTokens.helpersPaddingBottom, textAreaTokens.helpersPaddingLeft, textAreaTokens.helpersOffset, textAreaTokens.rightContentTop, textAreaTokens.rightContentRight, textAreaTokens.rightContentHeight, textAreaTokens.labelMarginBottom, textAreaTokens.labelInnerFontFamily, textAreaTokens.labelInnerFontSize, textAreaTokens.labelInnerFontStyle, textAreaTokens.labelInnerFontWeight, textAreaTokens.labelInnerLetterSpacing, textAreaTokens.labelInnerLineHeight, textAreaTokens.labelInnerTop, textAreaTokens.labelInnerMarginBottom, textAreaTokens.inputFontFamily, textAreaTokens.inputFontSize, textAreaTokens.inputFontStyle, textAreaTokens.inputFontWeight, textAreaTokens.inputLetterSpacing, textAreaTokens.inputLineHeight, textAreaTokens.helpersFontFamily, textAreaTokens.helpersFontSize, textAreaTokens.helpersFontStyle, textAreaTokens.helpersFontWeight, textAreaTokens.helpersLetterSpacing, textAreaTokens.helpersLineHeight, textAreaTokens.indicatorSizeInner, textAreaTokens.indicatorSizeOuter, textAreaTokens.indicatorLabelPlacementInner, textAreaTokens.indicatorLabelPlacementOuter, textAreaTokens.indicatorLabelPlacementInnerRight, textAreaTokens.indicatorLabelPlacementOuterRight),
|
13
|
+
l: /*#__PURE__*/css(["", ":100%;", ":6.812rem;", ":1.625rem;", ":0.875rem;", ":0.875rem 0.875rem 0 0;", ":1.063rem;", ":1.125rem;", ":3.625rem;", ":0.75rem;", ":1.125rem;", ":0.75rem;", ":1.125rem;", ":0.75rem;", ":1.125rem;", ":0rem;", ":1.063rem;", ":1rem;", ":1.25rem;", ":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.5625rem;", ":0.125rem;", ":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-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.5rem;", ":0.375rem;", ":0 0 0 0;", ":0.5rem auto auto -0.675rem;", ":0 0 auto auto;", ":0.25rem -0.625rem auto auto;"], textAreaTokens.inputWidth, textAreaTokens.inputHeight, textAreaTokens.inputMinHeight, textAreaTokens.borderRadius, textAreaTokens.borderRadiusWithHelpers, textAreaTokens.inputPaddingTop, textAreaTokens.inputPaddingRight, textAreaTokens.inputPaddingRightWithRightContent, textAreaTokens.inputPaddingBottom, textAreaTokens.inputPaddingLeft, textAreaTokens.helpersPaddingTop, textAreaTokens.helpersPaddingRight, textAreaTokens.helpersPaddingBottom, textAreaTokens.helpersPaddingLeft, textAreaTokens.helpersOffset, textAreaTokens.rightContentTop, textAreaTokens.rightContentRight, textAreaTokens.rightContentHeight, textAreaTokens.labelMarginBottom, textAreaTokens.labelInnerFontFamily, textAreaTokens.labelInnerFontSize, textAreaTokens.labelInnerFontStyle, textAreaTokens.labelInnerFontWeight, textAreaTokens.labelInnerLetterSpacing, textAreaTokens.labelInnerLineHeight, textAreaTokens.labelInnerTop, textAreaTokens.labelInnerMarginBottom, textAreaTokens.inputFontFamily, textAreaTokens.inputFontSize, textAreaTokens.inputFontStyle, textAreaTokens.inputFontWeight, textAreaTokens.inputLetterSpacing, textAreaTokens.inputLineHeight, textAreaTokens.helpersFontFamily, textAreaTokens.helpersFontSize, textAreaTokens.helpersFontStyle, textAreaTokens.helpersFontWeight, textAreaTokens.helpersLetterSpacing, textAreaTokens.helpersLineHeight, textAreaTokens.indicatorSizeInner, textAreaTokens.indicatorSizeOuter, textAreaTokens.indicatorLabelPlacementInner, textAreaTokens.indicatorLabelPlacementOuter, textAreaTokens.indicatorLabelPlacementInnerRight, textAreaTokens.indicatorLabelPlacementOuterRight)
|
14
14
|
},
|
15
15
|
view: {
|
16
|
-
"default": /*#__PURE__*/css(["", ":var(--surface-transparent-primary);", ":var(--surface-transparent-primary-hover);", ":var(--surface-transparent-primary-active);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-primary-hover);", ":var(--surface-transparent-primary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-secondary);", ":var(--text-secondary);"], textAreaTokens.inputBackgroundColor, textAreaTokens.inputBackgroundColorHover, textAreaTokens.inputBackgroundColorActive, textAreaTokens.inputBackgroundColorFocus, textAreaTokens.helpersBackgroundColor, textAreaTokens.helpersBackgroundColorHover, textAreaTokens.helpersBackgroundColorActive, textAreaTokens.helpersBackgroundColorFocus, textAreaTokens.inputColor, textAreaTokens.inputColorFocus, textAreaTokens.inputCaretColor, textAreaTokens.placeholderColor, textAreaTokens.placeholderColorFocus, textAreaTokens.leftHelperColor, textAreaTokens.rightHelperColor),
|
17
|
-
positive: /*#__PURE__*/css(["", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-hover);", ":var(--surface-transparent-positive-active);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-hover);", ":var(--surface-transparent-positive-active);", ":var(--surface-transparent-positive);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-positive);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-positive);", ":var(--text-secondary);"], textAreaTokens.inputBackgroundColor, textAreaTokens.inputBackgroundColorHover, textAreaTokens.inputBackgroundColorActive, textAreaTokens.inputBackgroundColorFocus, textAreaTokens.helpersBackgroundColor, textAreaTokens.helpersBackgroundColorHover, textAreaTokens.helpersBackgroundColorActive, textAreaTokens.helpersBackgroundColorFocus, textAreaTokens.inputColor, textAreaTokens.inputColorFocus, textAreaTokens.inputCaretColor, textAreaTokens.placeholderColor, textAreaTokens.placeholderColorFocus, textAreaTokens.leftHelperColor, textAreaTokens.rightHelperColor),
|
18
|
-
warning: /*#__PURE__*/css(["", ":var(--surface-transparent-warning);", ":var(--surface-transparent-warning-hover);", ":var(--surface-transparent-warning-active);", ":var(--surface-transparent-warning);", ":var(--surface-transparent-warning);", ":var(--surface-transparent-warning-hover);", ":var(--surface-transparent-warning-active);", ":var(--surface-transparent-warning);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-warning);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-warning);", ":var(--text-secondary);"], textAreaTokens.inputBackgroundColor, textAreaTokens.inputBackgroundColorHover, textAreaTokens.inputBackgroundColorActive, textAreaTokens.inputBackgroundColorFocus, textAreaTokens.helpersBackgroundColor, textAreaTokens.helpersBackgroundColorHover, textAreaTokens.helpersBackgroundColorActive, textAreaTokens.helpersBackgroundColorFocus, textAreaTokens.inputColor, textAreaTokens.inputColorFocus, textAreaTokens.inputCaretColor, textAreaTokens.placeholderColor, textAreaTokens.placeholderColorFocus, textAreaTokens.leftHelperColor, textAreaTokens.rightHelperColor),
|
19
|
-
negative: /*#__PURE__*/css(["", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-hover);", ":var(--surface-transparent-negative-active);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-hover);", ":var(--surface-transparent-negative-active);", ":var(--surface-transparent-negative);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-negative);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-negative);", ":var(--text-secondary);"], textAreaTokens.inputBackgroundColor, textAreaTokens.inputBackgroundColorHover, textAreaTokens.inputBackgroundColorActive, textAreaTokens.inputBackgroundColorFocus, textAreaTokens.helpersBackgroundColor, textAreaTokens.helpersBackgroundColorHover, textAreaTokens.helpersBackgroundColorActive, textAreaTokens.helpersBackgroundColorFocus, textAreaTokens.inputColor, textAreaTokens.inputColorFocus, textAreaTokens.inputCaretColor, textAreaTokens.placeholderColor, textAreaTokens.placeholderColorFocus, textAreaTokens.leftHelperColor, textAreaTokens.rightHelperColor)
|
16
|
+
"default": /*#__PURE__*/css(["", ":var(--surface-transparent-primary);", ":var(--surface-transparent-primary-hover);", ":var(--surface-transparent-primary-active);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-primary-hover);", ":var(--surface-transparent-primary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--surface-negative);", ":var(--text-tertiary);"], textAreaTokens.inputBackgroundColor, textAreaTokens.inputBackgroundColorHover, textAreaTokens.inputBackgroundColorActive, textAreaTokens.inputBackgroundColorFocus, textAreaTokens.helpersBackgroundColor, textAreaTokens.helpersBackgroundColorHover, textAreaTokens.helpersBackgroundColorActive, textAreaTokens.helpersBackgroundColorFocus, textAreaTokens.inputColor, textAreaTokens.inputColorFocus, textAreaTokens.inputCaretColor, textAreaTokens.placeholderColor, textAreaTokens.placeholderColorFocus, textAreaTokens.leftHelperColor, textAreaTokens.rightHelperColor, textAreaTokens.indicatorColor, textAreaTokens.optionalColor),
|
17
|
+
positive: /*#__PURE__*/css(["", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-hover);", ":var(--surface-transparent-positive-active);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-hover);", ":var(--surface-transparent-positive-active);", ":var(--surface-transparent-positive);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-positive);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-positive);", ":var(--text-secondary);", ":var(--surface-negative);", ":var(--text-tertiary);"], textAreaTokens.inputBackgroundColor, textAreaTokens.inputBackgroundColorHover, textAreaTokens.inputBackgroundColorActive, textAreaTokens.inputBackgroundColorFocus, textAreaTokens.helpersBackgroundColor, textAreaTokens.helpersBackgroundColorHover, textAreaTokens.helpersBackgroundColorActive, textAreaTokens.helpersBackgroundColorFocus, textAreaTokens.inputColor, textAreaTokens.inputColorFocus, textAreaTokens.inputCaretColor, textAreaTokens.placeholderColor, textAreaTokens.placeholderColorFocus, textAreaTokens.leftHelperColor, textAreaTokens.rightHelperColor, textAreaTokens.indicatorColor, textAreaTokens.optionalColor),
|
18
|
+
warning: /*#__PURE__*/css(["", ":var(--surface-transparent-warning);", ":var(--surface-transparent-warning-hover);", ":var(--surface-transparent-warning-active);", ":var(--surface-transparent-warning);", ":var(--surface-transparent-warning);", ":var(--surface-transparent-warning-hover);", ":var(--surface-transparent-warning-active);", ":var(--surface-transparent-warning);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-warning);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-warning);", ":var(--text-secondary);", ":var(--surface-negative);", ":var(--text-tertiary);"], textAreaTokens.inputBackgroundColor, textAreaTokens.inputBackgroundColorHover, textAreaTokens.inputBackgroundColorActive, textAreaTokens.inputBackgroundColorFocus, textAreaTokens.helpersBackgroundColor, textAreaTokens.helpersBackgroundColorHover, textAreaTokens.helpersBackgroundColorActive, textAreaTokens.helpersBackgroundColorFocus, textAreaTokens.inputColor, textAreaTokens.inputColorFocus, textAreaTokens.inputCaretColor, textAreaTokens.placeholderColor, textAreaTokens.placeholderColorFocus, textAreaTokens.leftHelperColor, textAreaTokens.rightHelperColor, textAreaTokens.indicatorColor, textAreaTokens.optionalColor),
|
19
|
+
negative: /*#__PURE__*/css(["", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-hover);", ":var(--surface-transparent-negative-active);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-hover);", ":var(--surface-transparent-negative-active);", ":var(--surface-transparent-negative);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-negative);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-negative);", ":var(--text-secondary);", ":var(--surface-negative);", ":var(--text-tertiary);"], textAreaTokens.inputBackgroundColor, textAreaTokens.inputBackgroundColorHover, textAreaTokens.inputBackgroundColorActive, textAreaTokens.inputBackgroundColorFocus, textAreaTokens.helpersBackgroundColor, textAreaTokens.helpersBackgroundColorHover, textAreaTokens.helpersBackgroundColorActive, textAreaTokens.helpersBackgroundColorFocus, textAreaTokens.inputColor, textAreaTokens.inputColorFocus, textAreaTokens.inputCaretColor, textAreaTokens.placeholderColor, textAreaTokens.placeholderColorFocus, textAreaTokens.leftHelperColor, textAreaTokens.rightHelperColor, textAreaTokens.indicatorColor, textAreaTokens.optionalColor)
|
20
20
|
},
|
21
21
|
disabled: {
|
22
22
|
"true": /*#__PURE__*/css(["", ":0.4;", ":var(--text-secondary);"], textAreaTokens.disabledOpacity, textAreaTokens.inputColorDisabled)
|