@salutejs/plasma-new-hope 0.122.0-canary.1352.10385331882.0 → 0.122.0-canary.1355.10409432870.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Autocomplete/Autocomplete.css +9 -10
- package/cjs/components/DatePicker/RangeDate/RangeDate.css +9 -10
- package/cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.css +9 -10
- package/cjs/components/DatePicker/SingleDate/SingleDate.css +9 -10
- package/cjs/components/Range/Range.css +9 -10
- package/cjs/components/Slider/Slider.css +9 -10
- package/cjs/components/Slider/components/Double/Double.css +9 -10
- package/cjs/components/TextArea/TextArea.js +3 -17
- package/cjs/components/TextArea/TextArea.js.map +1 -1
- package/cjs/components/TextArea/TextArea.styles.js +1 -7
- package/cjs/components/TextArea/TextArea.styles.js.map +1 -1
- package/cjs/components/TextArea/{TextArea.styles_wt773g.css → TextArea.styles_1bv40vw.css} +1 -2
- package/cjs/components/TextArea/TextArea.tokens.js +1 -8
- package/cjs/components/TextArea/TextArea.tokens.js.map +1 -1
- package/cjs/components/TextField/TextField.js +7 -23
- package/cjs/components/TextField/TextField.js.map +1 -1
- package/cjs/components/TextField/TextField.styles.js +1 -7
- package/cjs/components/TextField/TextField.styles.js.map +1 -1
- package/cjs/components/TextField/{TextField.styles_x7rboj.css → TextField.styles_9fkr1l.css} +1 -2
- package/cjs/components/TextField/TextField.tokens.js +1 -8
- package/cjs/components/TextField/TextField.tokens.js.map +1 -1
- package/cjs/components/TextField/TextField_wctd2m.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_qtoism.css +1 -0
- package/cjs/index.css +18 -20
- package/emotion/cjs/components/TextArea/TextArea.js +4 -18
- package/emotion/cjs/components/TextArea/TextArea.styles.js +19 -23
- package/emotion/cjs/components/TextArea/TextArea.template-doc.mdx +3 -29
- package/emotion/cjs/components/TextArea/TextArea.tokens.js +1 -8
- package/emotion/cjs/components/TextArea/variations/_size/tokens.json +1 -7
- package/emotion/cjs/components/TextField/TextField.js +11 -27
- package/emotion/cjs/components/TextField/TextField.styles.js +21 -33
- package/emotion/cjs/components/TextField/TextField.template-doc.mdx +1 -27
- package/emotion/cjs/components/TextField/TextField.tokens.js +1 -8
- package/emotion/cjs/components/TextField/variations/_label-placement/base.js +1 -1
- package/emotion/cjs/components/TextField/variations/_size/tokens.json +0 -6
- package/emotion/cjs/examples/plasma_b2c/components/Dropdown/Dropdown.config.js +5 -5
- package/emotion/cjs/examples/plasma_b2c/components/Popover/Popover.config.js +1 -1
- package/emotion/cjs/examples/plasma_b2c/components/Tabs/TabItem.config.js +15 -15
- package/emotion/cjs/examples/plasma_b2c/components/Tabs/Tabs.config.js +15 -15
- package/emotion/cjs/examples/plasma_b2c/components/TextField/TextField.config.js +12 -12
- package/emotion/cjs/examples/plasma_web/components/Dropdown/Dropdown.config.js +5 -5
- package/emotion/cjs/examples/plasma_web/components/Popover/Popover.config.js +1 -1
- package/emotion/cjs/examples/plasma_web/components/Tabs/TabItem.config.js +15 -15
- package/emotion/cjs/examples/plasma_web/components/Tabs/Tabs.config.js +15 -15
- package/emotion/cjs/examples/plasma_web/components/TextArea/TextArea.config.js +9 -12
- package/emotion/cjs/examples/plasma_web/components/TextArea/TextArea.stories.tsx +0 -45
- package/emotion/cjs/examples/plasma_web/components/TextField/TextField.config.js +12 -15
- package/emotion/cjs/examples/plasma_web/components/TextField/TextField.stories.tsx +0 -43
- package/emotion/es/components/TextArea/TextArea.js +5 -19
- package/emotion/es/components/TextArea/TextArea.styles.js +18 -22
- package/emotion/es/components/TextArea/TextArea.template-doc.mdx +3 -29
- package/emotion/es/components/TextArea/TextArea.tokens.js +1 -8
- package/emotion/es/components/TextArea/variations/_size/tokens.json +1 -7
- package/emotion/es/components/TextField/TextField.js +10 -26
- package/emotion/es/components/TextField/TextField.styles.js +20 -32
- package/emotion/es/components/TextField/TextField.template-doc.mdx +1 -27
- package/emotion/es/components/TextField/TextField.tokens.js +1 -8
- package/emotion/es/components/TextField/variations/_label-placement/base.js +1 -1
- package/emotion/es/components/TextField/variations/_size/tokens.json +0 -6
- package/emotion/es/examples/plasma_b2c/components/Dropdown/Dropdown.config.js +5 -5
- package/emotion/es/examples/plasma_b2c/components/Popover/Popover.config.js +1 -1
- package/emotion/es/examples/plasma_b2c/components/Tabs/TabItem.config.js +15 -15
- package/emotion/es/examples/plasma_b2c/components/Tabs/Tabs.config.js +15 -15
- package/emotion/es/examples/plasma_b2c/components/TextField/TextField.config.js +12 -12
- package/emotion/es/examples/plasma_web/components/Dropdown/Dropdown.config.js +5 -5
- package/emotion/es/examples/plasma_web/components/Popover/Popover.config.js +1 -1
- package/emotion/es/examples/plasma_web/components/Tabs/TabItem.config.js +15 -15
- package/emotion/es/examples/plasma_web/components/Tabs/Tabs.config.js +15 -15
- package/emotion/es/examples/plasma_web/components/TextArea/TextArea.config.js +9 -12
- package/emotion/es/examples/plasma_web/components/TextArea/TextArea.stories.tsx +0 -45
- package/emotion/es/examples/plasma_web/components/TextField/TextField.config.js +12 -15
- package/emotion/es/examples/plasma_web/components/TextField/TextField.stories.tsx +0 -43
- package/es/components/Autocomplete/Autocomplete.css +9 -10
- package/es/components/DatePicker/RangeDate/RangeDate.css +9 -10
- package/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.css +9 -10
- package/es/components/DatePicker/SingleDate/SingleDate.css +9 -10
- package/es/components/Range/Range.css +9 -10
- package/es/components/Slider/Slider.css +9 -10
- package/es/components/Slider/components/Double/Double.css +9 -10
- package/es/components/TextArea/TextArea.js +4 -18
- package/es/components/TextArea/TextArea.js.map +1 -1
- package/es/components/TextArea/TextArea.styles.js +2 -7
- package/es/components/TextArea/TextArea.styles.js.map +1 -1
- package/es/components/TextArea/{TextArea.styles_wt773g.css → TextArea.styles_1bv40vw.css} +1 -2
- package/es/components/TextArea/TextArea.tokens.js +1 -8
- package/es/components/TextArea/TextArea.tokens.js.map +1 -1
- package/es/components/TextField/TextField.js +8 -24
- package/es/components/TextField/TextField.js.map +1 -1
- package/es/components/TextField/TextField.styles.js +2 -7
- package/es/components/TextField/TextField.styles.js.map +1 -1
- package/es/components/TextField/{TextField.styles_x7rboj.css → TextField.styles_9fkr1l.css} +1 -2
- package/es/components/TextField/TextField.tokens.js +1 -8
- package/es/components/TextField/TextField.tokens.js.map +1 -1
- package/es/components/TextField/TextField_wctd2m.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_qtoism.css +1 -0
- package/es/index.css +18 -20
- package/package.json +4 -4
- package/styled-components/cjs/components/TextArea/TextArea.js +3 -17
- package/styled-components/cjs/components/TextArea/TextArea.styles.js +3 -6
- package/styled-components/cjs/components/TextArea/TextArea.template-doc.mdx +3 -29
- package/styled-components/cjs/components/TextArea/TextArea.tokens.js +1 -8
- package/styled-components/cjs/components/TextArea/variations/_size/tokens.json +1 -7
- package/styled-components/cjs/components/TextField/TextField.js +7 -23
- package/styled-components/cjs/components/TextField/TextField.styles.js +3 -6
- package/styled-components/cjs/components/TextField/TextField.template-doc.mdx +1 -27
- package/styled-components/cjs/components/TextField/TextField.tokens.js +1 -8
- package/styled-components/cjs/components/TextField/variations/_label-placement/base.js +1 -1
- package/styled-components/cjs/components/TextField/variations/_size/tokens.json +0 -6
- package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Dropdown.config.js +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Popover/Popover.config.js +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Tabs/TabItem.config.js +4 -4
- package/styled-components/cjs/examples/plasma_b2c/components/Tabs/Tabs.config.js +3 -3
- package/styled-components/cjs/examples/plasma_b2c/components/TextField/TextField.config.js +4 -4
- package/styled-components/cjs/examples/plasma_web/components/Dropdown/Dropdown.config.js +1 -1
- package/styled-components/cjs/examples/plasma_web/components/Popover/Popover.config.js +1 -1
- package/styled-components/cjs/examples/plasma_web/components/Tabs/TabItem.config.js +4 -4
- package/styled-components/cjs/examples/plasma_web/components/Tabs/Tabs.config.js +3 -3
- package/styled-components/cjs/examples/plasma_web/components/TextArea/TextArea.config.js +4 -7
- package/styled-components/cjs/examples/plasma_web/components/TextArea/TextArea.stories.tsx +0 -45
- package/styled-components/cjs/examples/plasma_web/components/TextField/TextField.config.js +6 -9
- package/styled-components/cjs/examples/plasma_web/components/TextField/TextField.stories.tsx +0 -43
- package/styled-components/es/components/TextArea/TextArea.js +4 -18
- package/styled-components/es/components/TextArea/TextArea.styles.js +2 -5
- package/styled-components/es/components/TextArea/TextArea.template-doc.mdx +3 -29
- package/styled-components/es/components/TextArea/TextArea.tokens.js +1 -8
- package/styled-components/es/components/TextArea/variations/_size/tokens.json +1 -7
- package/styled-components/es/components/TextField/TextField.js +6 -22
- package/styled-components/es/components/TextField/TextField.styles.js +2 -5
- package/styled-components/es/components/TextField/TextField.template-doc.mdx +1 -27
- package/styled-components/es/components/TextField/TextField.tokens.js +1 -8
- package/styled-components/es/components/TextField/variations/_label-placement/base.js +1 -1
- package/styled-components/es/components/TextField/variations/_size/tokens.json +0 -6
- package/styled-components/es/examples/plasma_b2c/components/Dropdown/Dropdown.config.js +1 -1
- package/styled-components/es/examples/plasma_b2c/components/Popover/Popover.config.js +1 -1
- package/styled-components/es/examples/plasma_b2c/components/Tabs/TabItem.config.js +4 -4
- package/styled-components/es/examples/plasma_b2c/components/Tabs/Tabs.config.js +3 -3
- package/styled-components/es/examples/plasma_b2c/components/TextField/TextField.config.js +4 -4
- package/styled-components/es/examples/plasma_web/components/Dropdown/Dropdown.config.js +1 -1
- package/styled-components/es/examples/plasma_web/components/Popover/Popover.config.js +1 -1
- package/styled-components/es/examples/plasma_web/components/Tabs/TabItem.config.js +4 -4
- package/styled-components/es/examples/plasma_web/components/Tabs/Tabs.config.js +3 -3
- package/styled-components/es/examples/plasma_web/components/TextArea/TextArea.config.js +4 -7
- package/styled-components/es/examples/plasma_web/components/TextArea/TextArea.stories.tsx +0 -45
- package/styled-components/es/examples/plasma_web/components/TextField/TextField.config.js +6 -9
- package/styled-components/es/examples/plasma_web/components/TextField/TextField.stories.tsx +0 -43
- package/types/components/Autocomplete/ui/TextField/TextField.styles.d.ts +0 -4
- package/types/components/Autocomplete/ui/TextField/TextField.styles.d.ts.map +1 -1
- package/types/components/DatePicker/SingleDate/SingleDate.styles.d.ts +0 -4
- package/types/components/DatePicker/SingleDate/SingleDate.styles.d.ts.map +1 -1
- package/types/components/Range/Range.styles.d.ts +0 -4
- package/types/components/Range/Range.styles.d.ts.map +1 -1
- package/types/components/Slider/components/Double/Double.styles.d.ts +0 -4
- package/types/components/Slider/components/Double/Double.styles.d.ts.map +1 -1
- package/types/components/TextArea/TextArea.d.ts +0 -4
- package/types/components/TextArea/TextArea.d.ts.map +1 -1
- package/types/components/TextArea/TextArea.styles.d.ts +0 -1
- package/types/components/TextArea/TextArea.styles.d.ts.map +1 -1
- package/types/components/TextArea/TextArea.tokens.d.ts +0 -7
- package/types/components/TextArea/TextArea.tokens.d.ts.map +1 -1
- package/types/components/TextArea/TextArea.types.d.ts +0 -9
- package/types/components/TextArea/TextArea.types.d.ts.map +1 -1
- package/types/components/TextField/TextField.d.ts +0 -4
- package/types/components/TextField/TextField.d.ts.map +1 -1
- package/types/components/TextField/TextField.styles.d.ts +0 -1
- package/types/components/TextField/TextField.styles.d.ts.map +1 -1
- package/types/components/TextField/TextField.tokens.d.ts +0 -7
- package/types/components/TextField/TextField.tokens.d.ts.map +1 -1
- package/types/components/TextField/TextField.types.d.ts +0 -9
- 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/examples/plasma_b2c/components/TextField/TextField.d.ts +0 -4
- package/types/examples/plasma_b2c/components/TextField/TextField.d.ts.map +1 -1
- package/types/examples/plasma_web/components/TextArea/TextArea.config.d.ts +0 -3
- package/types/examples/plasma_web/components/TextArea/TextArea.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/TextArea/TextArea.d.ts +0 -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 +0 -3
- package/types/examples/plasma_web/components/TextField/TextField.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/TextField/TextField.d.ts +0 -7
- package/types/examples/plasma_web/components/TextField/TextField.d.ts.map +1 -1
- package/types/examples/sds_engineer/components/TextField/TextField.d.ts +0 -4
- package/types/examples/sds_engineer/components/TextField/TextField.d.ts.map +1 -1
- package/cjs/components/TextArea/variations/_required/base.js +0 -9
- package/cjs/components/TextArea/variations/_required/base.js.map +0 -1
- package/cjs/components/TextArea/variations/_required/base_x642ct.css +0 -1
- package/cjs/components/TextField/TextField_1lzb2r1.css +0 -1
- package/cjs/components/TextField/variations/_label-placement/base_1ch19bp.css +0 -1
- package/cjs/components/TextField/variations/_required/base.js +0 -9
- package/cjs/components/TextField/variations/_required/base.js.map +0 -1
- package/cjs/components/TextField/variations/_required/base_x642ct.css +0 -1
- package/emotion/cjs/components/TextArea/variations/_required/base.js +0 -8
- package/emotion/cjs/components/TextArea/variations/_required/tokens.json +0 -1
- package/emotion/cjs/components/TextField/variations/_required/base.js +0 -8
- package/emotion/cjs/components/TextField/variations/_required/tokens.json +0 -1
- package/emotion/es/components/TextArea/variations/_required/base.js +0 -2
- package/emotion/es/components/TextArea/variations/_required/tokens.json +0 -1
- package/emotion/es/components/TextField/variations/_required/base.js +0 -2
- package/emotion/es/components/TextField/variations/_required/tokens.json +0 -1
- package/es/components/TextArea/variations/_required/base.js +0 -5
- package/es/components/TextArea/variations/_required/base.js.map +0 -1
- package/es/components/TextArea/variations/_required/base_x642ct.css +0 -1
- package/es/components/TextField/TextField_1lzb2r1.css +0 -1
- package/es/components/TextField/variations/_label-placement/base_1ch19bp.css +0 -1
- package/es/components/TextField/variations/_required/base.js +0 -5
- package/es/components/TextField/variations/_required/base.js.map +0 -1
- package/es/components/TextField/variations/_required/base_x642ct.css +0 -1
- package/styled-components/cjs/components/TextArea/variations/_required/base.js +0 -8
- package/styled-components/cjs/components/TextArea/variations/_required/tokens.json +0 -1
- package/styled-components/cjs/components/TextField/variations/_required/base.js +0 -8
- package/styled-components/cjs/components/TextField/variations/_required/tokens.json +0 -1
- package/styled-components/es/components/TextArea/variations/_required/base.js +0 -2
- package/styled-components/es/components/TextArea/variations/_required/tokens.json +0 -1
- package/styled-components/es/components/TextField/variations/_required/base.js +0 -2
- package/styled-components/es/components/TextField/variations/_required/tokens.json +0 -1
- package/types/components/TextArea/variations/_required/base.d.ts +0 -2
- package/types/components/TextArea/variations/_required/base.d.ts.map +0 -1
- package/types/components/TextField/variations/_required/base.d.ts +0 -2
- package/types/components/TextField/variations/_required/base.d.ts.map +0 -1
|
@@ -13,10 +13,10 @@ var config = exports.config = {
|
|
|
13
13
|
},
|
|
14
14
|
variations: {
|
|
15
15
|
size: {
|
|
16
|
-
xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":100%;", ":7.312rem;", ":0.625rem;", ":0.5rem;", ":0.5rem;", ":0.5625rem;", ":0.625rem;", ":2.125rem;", ":0.563rem;", ":0.563rem;", ":0.625rem;", ":0.25rem;", ":0rem;", ":0rem;", ":0rem;", ":0.375rem;", ":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);"
|
|
17
|
-
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":100%;", ":7.187rem;", ":0.625rem;", ":0.625rem;", ":0.625rem;", ":0.6875rem;", ":0.875rem;", ":3.125rem;", ":0.75rem;", ":0.75rem;", ":0.875rem;", ":0.25rem;", ":0rem;", ":0rem;", ":0rem;", ":0.375rem;", ":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);"
|
|
18
|
-
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":100%;", ":7rem;", ":1.125rem;", ":0.75rem;", ":0.75rem;", ":0.875rem;", ":1rem;", ":3.375rem;", ":0.75rem;", ":0.75rem;", ":1rem;", ":0.25rem;", ":0rem;", ":0rem;", ":0rem;", ":0.375rem;", ":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);"
|
|
19
|
-
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":100%;", ":6.812rem;", ":1.625rem;", ":0.875rem;", ":0.875rem;", ":1rem;", ":1.125rem;", ":3.625rem;", ":0.75rem;", ":0.75rem;", ":1.125rem;", ":0.25rem;", ":0rem;", ":0rem;", ":0rem;", ":0.375rem;", ":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);"
|
|
16
|
+
xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":100%;", ":7.312rem;", ":0.625rem;", ":0.5rem;", ":0.5rem;", ":0.5625rem;", ":0.625rem;", ":2.125rem;", ":0.563rem;", ":0.563rem;", ":0.625rem;", ":0.25rem;", ":0rem;", ":0rem;", ":0rem;", ":0.375rem;", ":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);"], _TextArea.textAreaTokens.inputWidth, _TextArea.textAreaTokens.inputHeight, _TextArea.textAreaTokens.inputMinHeight, _TextArea.textAreaTokens.borderRadius, _TextArea.textAreaTokens.borderRadiusWithHelpers, _TextArea.textAreaTokens.inputPaddingTop, _TextArea.textAreaTokens.inputPaddingRight, _TextArea.textAreaTokens.inputPaddingRightWithRightContent, _TextArea.textAreaTokens.inputPaddingBottom, _TextArea.textAreaTokens.inputPaddingBottomWithHelpers, _TextArea.textAreaTokens.inputPaddingLeft, _TextArea.textAreaTokens.helpersPaddingTop, _TextArea.textAreaTokens.helpersPaddingRight, _TextArea.textAreaTokens.helpersPaddingBottom, _TextArea.textAreaTokens.helpersPaddingLeft, _TextArea.textAreaTokens.helpersOffset, _TextArea.textAreaTokens.rightContentTop, _TextArea.textAreaTokens.rightContentRight, _TextArea.textAreaTokens.rightContentHeight, _TextArea.textAreaTokens.labelMarginBottom, _TextArea.textAreaTokens.labelInnerFontFamily, _TextArea.textAreaTokens.labelInnerFontSize, _TextArea.textAreaTokens.labelInnerFontStyle, _TextArea.textAreaTokens.labelInnerFontWeight, _TextArea.textAreaTokens.labelInnerLetterSpacing, _TextArea.textAreaTokens.labelInnerLineHeight, _TextArea.textAreaTokens.labelInnerTop, _TextArea.textAreaTokens.labelInnerMarginBottom, _TextArea.textAreaTokens.inputFontFamily, _TextArea.textAreaTokens.inputFontSize, _TextArea.textAreaTokens.inputFontStyle, _TextArea.textAreaTokens.inputFontWeight, _TextArea.textAreaTokens.inputLetterSpacing, _TextArea.textAreaTokens.inputLineHeight, _TextArea.textAreaTokens.helpersFontFamily, _TextArea.textAreaTokens.helpersFontSize, _TextArea.textAreaTokens.helpersFontStyle, _TextArea.textAreaTokens.helpersFontWeight, _TextArea.textAreaTokens.helpersLetterSpacing, _TextArea.textAreaTokens.helpersLineHeight),
|
|
17
|
+
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":100%;", ":7.187rem;", ":0.625rem;", ":0.625rem;", ":0.625rem;", ":0.6875rem;", ":0.875rem;", ":3.125rem;", ":0.75rem;", ":0.75rem;", ":0.875rem;", ":0.25rem;", ":0rem;", ":0rem;", ":0rem;", ":0.375rem;", ":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);"], _TextArea.textAreaTokens.inputWidth, _TextArea.textAreaTokens.inputHeight, _TextArea.textAreaTokens.inputMinHeight, _TextArea.textAreaTokens.borderRadius, _TextArea.textAreaTokens.borderRadiusWithHelpers, _TextArea.textAreaTokens.inputPaddingTop, _TextArea.textAreaTokens.inputPaddingRight, _TextArea.textAreaTokens.inputPaddingRightWithRightContent, _TextArea.textAreaTokens.inputPaddingBottom, _TextArea.textAreaTokens.inputPaddingBottomWithHelpers, _TextArea.textAreaTokens.inputPaddingLeft, _TextArea.textAreaTokens.helpersPaddingTop, _TextArea.textAreaTokens.helpersPaddingRight, _TextArea.textAreaTokens.helpersPaddingBottom, _TextArea.textAreaTokens.helpersPaddingLeft, _TextArea.textAreaTokens.helpersOffset, _TextArea.textAreaTokens.rightContentTop, _TextArea.textAreaTokens.rightContentRight, _TextArea.textAreaTokens.rightContentHeight, _TextArea.textAreaTokens.labelMarginBottom, _TextArea.textAreaTokens.labelInnerFontFamily, _TextArea.textAreaTokens.labelInnerFontSize, _TextArea.textAreaTokens.labelInnerFontStyle, _TextArea.textAreaTokens.labelInnerFontWeight, _TextArea.textAreaTokens.labelInnerLetterSpacing, _TextArea.textAreaTokens.labelInnerLineHeight, _TextArea.textAreaTokens.labelInnerTop, _TextArea.textAreaTokens.labelInnerMarginBottom, _TextArea.textAreaTokens.inputFontFamily, _TextArea.textAreaTokens.inputFontSize, _TextArea.textAreaTokens.inputFontStyle, _TextArea.textAreaTokens.inputFontWeight, _TextArea.textAreaTokens.inputLetterSpacing, _TextArea.textAreaTokens.inputLineHeight, _TextArea.textAreaTokens.helpersFontFamily, _TextArea.textAreaTokens.helpersFontSize, _TextArea.textAreaTokens.helpersFontStyle, _TextArea.textAreaTokens.helpersFontWeight, _TextArea.textAreaTokens.helpersLetterSpacing, _TextArea.textAreaTokens.helpersLineHeight),
|
|
18
|
+
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":100%;", ":7rem;", ":1.125rem;", ":0.75rem;", ":0.75rem;", ":0.875rem;", ":1rem;", ":3.375rem;", ":0.75rem;", ":0.75rem;", ":1rem;", ":0.25rem;", ":0rem;", ":0rem;", ":0rem;", ":0.375rem;", ":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);"], _TextArea.textAreaTokens.inputWidth, _TextArea.textAreaTokens.inputHeight, _TextArea.textAreaTokens.inputMinHeight, _TextArea.textAreaTokens.borderRadius, _TextArea.textAreaTokens.borderRadiusWithHelpers, _TextArea.textAreaTokens.inputPaddingTop, _TextArea.textAreaTokens.inputPaddingRight, _TextArea.textAreaTokens.inputPaddingRightWithRightContent, _TextArea.textAreaTokens.inputPaddingBottom, _TextArea.textAreaTokens.inputPaddingBottomWithHelpers, _TextArea.textAreaTokens.inputPaddingLeft, _TextArea.textAreaTokens.helpersPaddingTop, _TextArea.textAreaTokens.helpersPaddingRight, _TextArea.textAreaTokens.helpersPaddingBottom, _TextArea.textAreaTokens.helpersPaddingLeft, _TextArea.textAreaTokens.helpersOffset, _TextArea.textAreaTokens.rightContentTop, _TextArea.textAreaTokens.rightContentRight, _TextArea.textAreaTokens.rightContentHeight, _TextArea.textAreaTokens.labelMarginBottom, _TextArea.textAreaTokens.labelInnerFontFamily, _TextArea.textAreaTokens.labelInnerFontSize, _TextArea.textAreaTokens.labelInnerFontStyle, _TextArea.textAreaTokens.labelInnerFontWeight, _TextArea.textAreaTokens.labelInnerLetterSpacing, _TextArea.textAreaTokens.labelInnerLineHeight, _TextArea.textAreaTokens.labelInnerTop, _TextArea.textAreaTokens.labelInnerMarginBottom, _TextArea.textAreaTokens.inputFontFamily, _TextArea.textAreaTokens.inputFontSize, _TextArea.textAreaTokens.inputFontStyle, _TextArea.textAreaTokens.inputFontWeight, _TextArea.textAreaTokens.inputLetterSpacing, _TextArea.textAreaTokens.inputLineHeight, _TextArea.textAreaTokens.helpersFontFamily, _TextArea.textAreaTokens.helpersFontSize, _TextArea.textAreaTokens.helpersFontStyle, _TextArea.textAreaTokens.helpersFontWeight, _TextArea.textAreaTokens.helpersLetterSpacing, _TextArea.textAreaTokens.helpersLineHeight),
|
|
19
|
+
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":100%;", ":6.812rem;", ":1.625rem;", ":0.875rem;", ":0.875rem;", ":1rem;", ":1.125rem;", ":3.625rem;", ":0.75rem;", ":0.75rem;", ":1.125rem;", ":0.25rem;", ":0rem;", ":0rem;", ":0rem;", ":0.375rem;", ":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);"], _TextArea.textAreaTokens.inputWidth, _TextArea.textAreaTokens.inputHeight, _TextArea.textAreaTokens.inputMinHeight, _TextArea.textAreaTokens.borderRadius, _TextArea.textAreaTokens.borderRadiusWithHelpers, _TextArea.textAreaTokens.inputPaddingTop, _TextArea.textAreaTokens.inputPaddingRight, _TextArea.textAreaTokens.inputPaddingRightWithRightContent, _TextArea.textAreaTokens.inputPaddingBottom, _TextArea.textAreaTokens.inputPaddingBottomWithHelpers, _TextArea.textAreaTokens.inputPaddingLeft, _TextArea.textAreaTokens.helpersPaddingTop, _TextArea.textAreaTokens.helpersPaddingRight, _TextArea.textAreaTokens.helpersPaddingBottom, _TextArea.textAreaTokens.helpersPaddingLeft, _TextArea.textAreaTokens.helpersOffset, _TextArea.textAreaTokens.rightContentTop, _TextArea.textAreaTokens.rightContentRight, _TextArea.textAreaTokens.rightContentHeight, _TextArea.textAreaTokens.labelMarginBottom, _TextArea.textAreaTokens.labelInnerFontFamily, _TextArea.textAreaTokens.labelInnerFontSize, _TextArea.textAreaTokens.labelInnerFontStyle, _TextArea.textAreaTokens.labelInnerFontWeight, _TextArea.textAreaTokens.labelInnerLetterSpacing, _TextArea.textAreaTokens.labelInnerLineHeight, _TextArea.textAreaTokens.labelInnerTop, _TextArea.textAreaTokens.labelInnerMarginBottom, _TextArea.textAreaTokens.inputFontFamily, _TextArea.textAreaTokens.inputFontSize, _TextArea.textAreaTokens.inputFontStyle, _TextArea.textAreaTokens.inputFontWeight, _TextArea.textAreaTokens.inputLetterSpacing, _TextArea.textAreaTokens.inputLineHeight, _TextArea.textAreaTokens.helpersFontFamily, _TextArea.textAreaTokens.helpersFontSize, _TextArea.textAreaTokens.helpersFontStyle, _TextArea.textAreaTokens.helpersFontWeight, _TextArea.textAreaTokens.helpersLetterSpacing, _TextArea.textAreaTokens.helpersLineHeight)
|
|
20
20
|
},
|
|
21
21
|
view: {
|
|
22
22
|
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-tertiary);", ":var(--text-tertiary-hover);", ":var(--text-tertiary-hover);", ":var(--text-accent);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-secondary);", ":var(--text-secondary);"], _TextArea.textAreaTokens.inputBorderColor, _TextArea.textAreaTokens.inputBorderColorHover, _TextArea.textAreaTokens.inputBorderColorActive, _TextArea.textAreaTokens.inputBorderColorFocus, _TextArea.textAreaTokens.inputColor, _TextArea.textAreaTokens.inputColorFocus, _TextArea.textAreaTokens.inputCaretColor, _TextArea.textAreaTokens.placeholderColor, _TextArea.textAreaTokens.placeholderColorFocus, _TextArea.textAreaTokens.leftHelperColor, _TextArea.textAreaTokens.rightHelperColor),
|
|
@@ -26,9 +26,6 @@ var config = exports.config = {
|
|
|
26
26
|
},
|
|
27
27
|
disabled: {
|
|
28
28
|
"true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;", ":var(--text-secondary);"], _TextArea.textAreaTokens.disabledOpacity, _TextArea.textAreaTokens.inputColorDisabled)
|
|
29
|
-
},
|
|
30
|
-
required: {
|
|
31
|
-
"true": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-negative);"], _TextArea.textAreaTokens.indicatorColor)
|
|
32
29
|
}
|
|
33
30
|
}
|
|
34
31
|
};
|
|
@@ -71,47 +71,6 @@ const IconPlaceholder = styled.div`
|
|
|
71
71
|
background: ${tertiary};
|
|
72
72
|
`;
|
|
73
73
|
|
|
74
|
-
const StoryRequired = (props: StoryTextAreaProps) => {
|
|
75
|
-
const [value, setValue] = useState('Значение поля');
|
|
76
|
-
|
|
77
|
-
return (
|
|
78
|
-
<div
|
|
79
|
-
style={{
|
|
80
|
-
display: 'grid',
|
|
81
|
-
gap: '1.5rem',
|
|
82
|
-
}}
|
|
83
|
-
>
|
|
84
|
-
<TextArea
|
|
85
|
-
value={value}
|
|
86
|
-
label="Лейбл"
|
|
87
|
-
required
|
|
88
|
-
contentRight={props.enableContentRight ? <IconPlaceholder /> : undefined}
|
|
89
|
-
onChange={(e) => {
|
|
90
|
-
setValue(e.target.value);
|
|
91
|
-
onChange(e);
|
|
92
|
-
}}
|
|
93
|
-
onFocus={onFocus}
|
|
94
|
-
onBlur={onBlur}
|
|
95
|
-
{...props}
|
|
96
|
-
/>
|
|
97
|
-
<TextArea
|
|
98
|
-
value={value}
|
|
99
|
-
label="Лейбл"
|
|
100
|
-
required
|
|
101
|
-
requiredAlign="right"
|
|
102
|
-
contentRight={props.enableContentRight ? <IconPlaceholder /> : undefined}
|
|
103
|
-
onChange={(e) => {
|
|
104
|
-
setValue(e.target.value);
|
|
105
|
-
onChange(e);
|
|
106
|
-
}}
|
|
107
|
-
onFocus={onFocus}
|
|
108
|
-
onBlur={onBlur}
|
|
109
|
-
{...props}
|
|
110
|
-
/>
|
|
111
|
-
</div>
|
|
112
|
-
);
|
|
113
|
-
};
|
|
114
|
-
|
|
115
74
|
const StoryDefault = (props: StoryTextAreaProps) => {
|
|
116
75
|
const [value, setValue] = useState('Значение поля');
|
|
117
76
|
|
|
@@ -130,10 +89,6 @@ const StoryDefault = (props: StoryTextAreaProps) => {
|
|
|
130
89
|
);
|
|
131
90
|
};
|
|
132
91
|
|
|
133
|
-
export const Required: StoryObj<StoryTextAreaProps> = {
|
|
134
|
-
render: (args) => <StoryRequired {...args} />,
|
|
135
|
-
};
|
|
136
|
-
|
|
137
92
|
export const Default: StoryObj<StoryTextAreaProps> = {
|
|
138
93
|
render: (args) => <StoryDefault {...args} />,
|
|
139
94
|
};
|
|
@@ -14,27 +14,24 @@ var config = exports.config = {
|
|
|
14
14
|
},
|
|
15
15
|
variations: {
|
|
16
16
|
view: {
|
|
17
|
-
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-transparent-tertiary);", ":var(--
|
|
17
|
+
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-transparent-tertiary);", ":var(--text-secondary);", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);"], _TextField.textFieldTokens.color, _TextField.textFieldTokens.backgroundColor, _TextField.textFieldTokens.caretColor, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.labelColor, _TextField.textFieldTokens.leftHelperColor, _TextField.textFieldTokens.borderColor, _TextField.textFieldTokens.borderColorHover, _TextField.textFieldTokens.borderColorFocus, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipOpacityReadonly, _TextField.textFieldTokens.focusColor),
|
|
18
18
|
positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-positive);", ":var(--surface-positive);", ":var(--surface-positive);", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);"], _TextField.textFieldTokens.color, _TextField.textFieldTokens.backgroundColor, _TextField.textFieldTokens.caretColor, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.labelColor, _TextField.textFieldTokens.leftHelperColor, _TextField.textFieldTokens.borderColor, _TextField.textFieldTokens.borderColorHover, _TextField.textFieldTokens.borderColorFocus, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipOpacityReadonly, _TextField.textFieldTokens.focusColor),
|
|
19
19
|
warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-warning);", ":var(--surface-warning);", ":var(--surface-warning);", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);"], _TextField.textFieldTokens.color, _TextField.textFieldTokens.backgroundColor, _TextField.textFieldTokens.caretColor, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.labelColor, _TextField.textFieldTokens.leftHelperColor, _TextField.textFieldTokens.borderColor, _TextField.textFieldTokens.borderColorHover, _TextField.textFieldTokens.borderColorFocus, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipOpacityReadonly, _TextField.textFieldTokens.focusColor),
|
|
20
20
|
negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-negative);", ":var(--surface-negative);", ":var(--surface-negative);", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);"], _TextField.textFieldTokens.color, _TextField.textFieldTokens.backgroundColor, _TextField.textFieldTokens.caretColor, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.labelColor, _TextField.textFieldTokens.leftHelperColor, _TextField.textFieldTokens.borderColor, _TextField.textFieldTokens.borderColorHover, _TextField.textFieldTokens.borderColorFocus, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipOpacityReadonly, _TextField.textFieldTokens.focusColor)
|
|
21
21
|
},
|
|
22
22
|
size: {
|
|
23
|
-
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":3.5rem;", ":1.0625rem 1.125rem 1.0625rem 1.125rem;", ":0.375rem;", ":0.875rem;", ":0.0625rem;", ":-0.0625rem 0.5rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 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.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);"
|
|
24
|
-
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":3rem;", ":0.875rem 1rem 0.875rem 1rem;", ":0.375rem;", ":0.75rem;", ":0.0625rem;", ":-0.125rem 0.375rem -0.125rem -0.125rem;", ":-0.125rem -0.125rem -0.125rem 0.75rem;", ":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);"
|
|
25
|
-
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.5rem;", ":0.6875rem 0.875rem 0.6875rem 0.875rem;", ":0.375rem;", ":0.625rem;", ":0.0625rem;", ":-0.1875rem 0.25rem -0.1875rem -0.125rem;", ":-0.1875rem -0.125rem -0.1875rem 0.75rem;", ":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);"
|
|
26
|
-
xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":2rem;", ":0.5625rem 0.625rem 0.5625rem 0.625rem;", ":0.375rem;", ":0.5rem;", ":0.0625rem;", ":-0.0625rem 0.25rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 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.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);"
|
|
23
|
+
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":3.5rem;", ":1.0625rem 1.125rem 1.0625rem 1.125rem;", ":0.375rem;", ":0.875rem;", ":0.0625rem;", ":-0.0625rem 0.5rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 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.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);"], _TextField.textFieldTokens.height, _TextField.textFieldTokens.padding, _TextField.textFieldTokens.paddingWithChips, _TextField.textFieldTokens.borderRadius, _TextField.textFieldTokens.borderWidth, _TextField.textFieldTokens.leftContentMargin, _TextField.textFieldTokens.rightContentMargin, _TextField.textFieldTokens.fontFamily, _TextField.textFieldTokens.fontSize, _TextField.textFieldTokens.fontStyle, _TextField.textFieldTokens.fontWeight, _TextField.textFieldTokens.letterSpacing, _TextField.textFieldTokens.lineHeight, _TextField.textFieldTokens.labelOffset, _TextField.textFieldTokens.labelFontFamily, _TextField.textFieldTokens.labelFontSize, _TextField.textFieldTokens.labelFontStyle, _TextField.textFieldTokens.labelFontWeight, _TextField.textFieldTokens.labelLetterSpacing, _TextField.textFieldTokens.labelLineHeight, _TextField.textFieldTokens.leftHelperOffset, _TextField.textFieldTokens.leftHelperFontFamily, _TextField.textFieldTokens.leftHelperFontSize, _TextField.textFieldTokens.leftHelperFontStyle, _TextField.textFieldTokens.leftHelperFontWeight, _TextField.textFieldTokens.leftHelperLetterSpacing, _TextField.textFieldTokens.leftHelperLineHeight, _TextField.textFieldTokens.labelInnerPadding, _TextField.textFieldTokens.contentLabelInnerPadding, _TextField.textFieldTokens.chipGap, _TextField.textFieldTokens.chipBorderRadius, _TextField.textFieldTokens.chipWidth, _TextField.textFieldTokens.chipHeight, _TextField.textFieldTokens.chipPaddingRight, _TextField.textFieldTokens.chipPaddingLeft, _TextField.textFieldTokens.chipClearContentMarginLeft, _TextField.textFieldTokens.chipClearContentMarginRight, _TextField.textFieldTokens.chipCloseIconSize, _TextField.textFieldTokens.chipFontFamily, _TextField.textFieldTokens.chipFontSize, _TextField.textFieldTokens.chipFontStyle, _TextField.textFieldTokens.chipFontWeight, _TextField.textFieldTokens.chipLetterSpacing, _TextField.textFieldTokens.chipLineHeight),
|
|
24
|
+
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":3rem;", ":0.875rem 1rem 0.875rem 1rem;", ":0.375rem;", ":0.75rem;", ":0.0625rem;", ":-0.125rem 0.375rem -0.125rem -0.125rem;", ":-0.125rem -0.125rem -0.125rem 0.75rem;", ":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);"], _TextField.textFieldTokens.height, _TextField.textFieldTokens.padding, _TextField.textFieldTokens.paddingWithChips, _TextField.textFieldTokens.borderRadius, _TextField.textFieldTokens.borderWidth, _TextField.textFieldTokens.leftContentMargin, _TextField.textFieldTokens.rightContentMargin, _TextField.textFieldTokens.fontFamily, _TextField.textFieldTokens.fontSize, _TextField.textFieldTokens.fontStyle, _TextField.textFieldTokens.fontWeight, _TextField.textFieldTokens.letterSpacing, _TextField.textFieldTokens.lineHeight, _TextField.textFieldTokens.labelOffset, _TextField.textFieldTokens.labelFontFamily, _TextField.textFieldTokens.labelFontSize, _TextField.textFieldTokens.labelFontStyle, _TextField.textFieldTokens.labelFontWeight, _TextField.textFieldTokens.labelLetterSpacing, _TextField.textFieldTokens.labelLineHeight, _TextField.textFieldTokens.leftHelperOffset, _TextField.textFieldTokens.leftHelperFontFamily, _TextField.textFieldTokens.leftHelperFontSize, _TextField.textFieldTokens.leftHelperFontStyle, _TextField.textFieldTokens.leftHelperFontWeight, _TextField.textFieldTokens.leftHelperLetterSpacing, _TextField.textFieldTokens.leftHelperLineHeight, _TextField.textFieldTokens.labelInnerPadding, _TextField.textFieldTokens.contentLabelInnerPadding, _TextField.textFieldTokens.chipGap, _TextField.textFieldTokens.chipBorderRadius, _TextField.textFieldTokens.chipWidth, _TextField.textFieldTokens.chipHeight, _TextField.textFieldTokens.chipPaddingRight, _TextField.textFieldTokens.chipPaddingLeft, _TextField.textFieldTokens.chipClearContentMarginLeft, _TextField.textFieldTokens.chipClearContentMarginRight, _TextField.textFieldTokens.chipCloseIconSize, _TextField.textFieldTokens.chipFontFamily, _TextField.textFieldTokens.chipFontSize, _TextField.textFieldTokens.chipFontStyle, _TextField.textFieldTokens.chipFontWeight, _TextField.textFieldTokens.chipLetterSpacing, _TextField.textFieldTokens.chipLineHeight),
|
|
25
|
+
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.5rem;", ":0.6875rem 0.875rem 0.6875rem 0.875rem;", ":0.375rem;", ":0.625rem;", ":0.0625rem;", ":-0.1875rem 0.25rem -0.1875rem -0.125rem;", ":-0.1875rem -0.125rem -0.1875rem 0.75rem;", ":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);"], _TextField.textFieldTokens.height, _TextField.textFieldTokens.padding, _TextField.textFieldTokens.paddingWithChips, _TextField.textFieldTokens.borderRadius, _TextField.textFieldTokens.borderWidth, _TextField.textFieldTokens.leftContentMargin, _TextField.textFieldTokens.rightContentMargin, _TextField.textFieldTokens.fontFamily, _TextField.textFieldTokens.fontSize, _TextField.textFieldTokens.fontStyle, _TextField.textFieldTokens.fontWeight, _TextField.textFieldTokens.letterSpacing, _TextField.textFieldTokens.lineHeight, _TextField.textFieldTokens.labelOffset, _TextField.textFieldTokens.labelFontFamily, _TextField.textFieldTokens.labelFontSize, _TextField.textFieldTokens.labelFontStyle, _TextField.textFieldTokens.labelFontWeight, _TextField.textFieldTokens.labelLetterSpacing, _TextField.textFieldTokens.labelLineHeight, _TextField.textFieldTokens.leftHelperOffset, _TextField.textFieldTokens.leftHelperFontFamily, _TextField.textFieldTokens.leftHelperFontSize, _TextField.textFieldTokens.leftHelperFontStyle, _TextField.textFieldTokens.leftHelperFontWeight, _TextField.textFieldTokens.leftHelperLetterSpacing, _TextField.textFieldTokens.leftHelperLineHeight, _TextField.textFieldTokens.labelInnerPadding, _TextField.textFieldTokens.contentLabelInnerPadding, _TextField.textFieldTokens.chipGap, _TextField.textFieldTokens.chipBorderRadius, _TextField.textFieldTokens.chipWidth, _TextField.textFieldTokens.chipHeight, _TextField.textFieldTokens.chipPaddingRight, _TextField.textFieldTokens.chipPaddingLeft, _TextField.textFieldTokens.chipClearContentMarginLeft, _TextField.textFieldTokens.chipClearContentMarginRight, _TextField.textFieldTokens.chipCloseIconSize, _TextField.textFieldTokens.chipFontFamily, _TextField.textFieldTokens.chipFontSize, _TextField.textFieldTokens.chipFontStyle, _TextField.textFieldTokens.chipFontWeight, _TextField.textFieldTokens.chipLetterSpacing, _TextField.textFieldTokens.chipLineHeight),
|
|
26
|
+
xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":2rem;", ":0.5625rem 0.625rem 0.5625rem 0.625rem;", ":0.375rem;", ":0.5rem;", ":0.0625rem;", ":-0.0625rem 0.25rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 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.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);"], _TextField.textFieldTokens.height, _TextField.textFieldTokens.padding, _TextField.textFieldTokens.paddingWithChips, _TextField.textFieldTokens.borderRadius, _TextField.textFieldTokens.borderWidth, _TextField.textFieldTokens.leftContentMargin, _TextField.textFieldTokens.rightContentMargin, _TextField.textFieldTokens.fontFamily, _TextField.textFieldTokens.fontSize, _TextField.textFieldTokens.fontStyle, _TextField.textFieldTokens.fontWeight, _TextField.textFieldTokens.letterSpacing, _TextField.textFieldTokens.lineHeight, _TextField.textFieldTokens.labelOffset, _TextField.textFieldTokens.labelFontFamily, _TextField.textFieldTokens.labelFontSize, _TextField.textFieldTokens.labelFontStyle, _TextField.textFieldTokens.labelFontWeight, _TextField.textFieldTokens.labelLetterSpacing, _TextField.textFieldTokens.labelLineHeight, _TextField.textFieldTokens.leftHelperOffset, _TextField.textFieldTokens.leftHelperFontFamily, _TextField.textFieldTokens.leftHelperFontSize, _TextField.textFieldTokens.leftHelperFontStyle, _TextField.textFieldTokens.leftHelperFontWeight, _TextField.textFieldTokens.leftHelperLetterSpacing, _TextField.textFieldTokens.leftHelperLineHeight, _TextField.textFieldTokens.labelInnerPadding, _TextField.textFieldTokens.contentLabelInnerPadding, _TextField.textFieldTokens.chipGap, _TextField.textFieldTokens.chipBorderRadius, _TextField.textFieldTokens.chipWidth, _TextField.textFieldTokens.chipHeight, _TextField.textFieldTokens.chipPaddingRight, _TextField.textFieldTokens.chipPaddingLeft, _TextField.textFieldTokens.chipClearContentMarginLeft, _TextField.textFieldTokens.chipClearContentMarginRight, _TextField.textFieldTokens.chipCloseIconSize, _TextField.textFieldTokens.chipFontFamily, _TextField.textFieldTokens.chipFontSize, _TextField.textFieldTokens.chipFontStyle, _TextField.textFieldTokens.chipFontWeight, _TextField.textFieldTokens.chipLetterSpacing, _TextField.textFieldTokens.chipLineHeight)
|
|
27
27
|
},
|
|
28
28
|
labelPlacement: {
|
|
29
|
-
inner: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-input-label-color,var(--plasma-input-placeholder-color,var(--
|
|
29
|
+
inner: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-input-label-color,var(--plasma-input-placeholder-color,var(--text-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);"], _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.labelInnerFontFamily, _TextField.textFieldTokens.labelInnerFontSize, _TextField.textFieldTokens.labelInnerFontStyle, _TextField.textFieldTokens.labelInnerFontWeight, _TextField.textFieldTokens.labelInnerLetterSpacing, _TextField.textFieldTokens.labelInnerLineHeight),
|
|
30
30
|
outer: /*#__PURE__*/(0, _styledComponents.css)([""])
|
|
31
31
|
},
|
|
32
32
|
disabled: {
|
|
33
33
|
"true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _TextField.textFieldTokens.disabledOpacity)
|
|
34
34
|
},
|
|
35
|
-
required: {
|
|
36
|
-
"true": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-negative)"], _TextField.textFieldTokens.indicatorColor)
|
|
37
|
-
},
|
|
38
35
|
readOnly: {
|
|
39
36
|
"true": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--surface-transparent-tertiary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);"], _TextField.textFieldTokens.colorReadOnly, _TextField.textFieldTokens.backgroundColorReadOnly, _TextField.textFieldTokens.borderColorReadOnly, _TextField.textFieldTokens.placeholderColorReadOnly, _TextField.textFieldTokens.leftHelperColorReadOnly, _TextField.textFieldTokens.labelColorReadOnly)
|
|
40
37
|
}
|
package/styled-components/cjs/examples/plasma_web/components/TextField/TextField.stories.tsx
CHANGED
|
@@ -138,49 +138,6 @@ type StoryPropsChips = Omit<
|
|
|
138
138
|
enableContentRight: boolean;
|
|
139
139
|
};
|
|
140
140
|
|
|
141
|
-
const StoryRequired = ({ view, ...rest }: StoryPropsDefault) => {
|
|
142
|
-
const [text, setText] = useState('Значение поля');
|
|
143
|
-
|
|
144
|
-
return (
|
|
145
|
-
<div style={{ display: 'grid', gap: '1.5rem' }}>
|
|
146
|
-
<TextField
|
|
147
|
-
{...rest}
|
|
148
|
-
value={text}
|
|
149
|
-
required
|
|
150
|
-
view={view}
|
|
151
|
-
onChange={(e) => {
|
|
152
|
-
setText(e.target.value);
|
|
153
|
-
onChange(e.target.value);
|
|
154
|
-
}}
|
|
155
|
-
onFocus={onFocus}
|
|
156
|
-
onBlur={onBlur}
|
|
157
|
-
onChangeChips={onChipsChange}
|
|
158
|
-
/>
|
|
159
|
-
<TextField
|
|
160
|
-
{...rest}
|
|
161
|
-
value={text}
|
|
162
|
-
required
|
|
163
|
-
requiredAlign="right"
|
|
164
|
-
view={view}
|
|
165
|
-
onChange={(e) => {
|
|
166
|
-
setText(e.target.value);
|
|
167
|
-
onChange(e.target.value);
|
|
168
|
-
}}
|
|
169
|
-
onFocus={onFocus}
|
|
170
|
-
onBlur={onBlur}
|
|
171
|
-
onChangeChips={onChipsChange}
|
|
172
|
-
/>
|
|
173
|
-
</div>
|
|
174
|
-
);
|
|
175
|
-
};
|
|
176
|
-
|
|
177
|
-
export const Required: StoryObj<StoryPropsDefault> = {
|
|
178
|
-
args: {
|
|
179
|
-
...Default.args,
|
|
180
|
-
},
|
|
181
|
-
render: (args) => <StoryRequired {...args} />,
|
|
182
|
-
};
|
|
183
|
-
|
|
184
141
|
const StoryChips = ({ enableContentLeft, enableContentRight, view, ...rest }: StoryPropsChips) => {
|
|
185
142
|
const [text, setText] = useState('Значение поля');
|
|
186
143
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
-
var _excluded = ["helperText", "status", "resize", "rightHelper", "leftHelper", "contentRight", "autoResize", "minAuto", "maxAuto", "label", "labelPlacement", "placeholder", "defaultValue", "height", "width", "value", "disabled", "
|
|
2
|
+
var _excluded = ["helperText", "status", "resize", "rightHelper", "leftHelper", "contentRight", "autoResize", "minAuto", "maxAuto", "label", "labelPlacement", "placeholder", "defaultValue", "height", "width", "value", "disabled", "size", "view", "id", "style", "className", "readOnly", "rows", "cols", "onChange"];
|
|
3
3
|
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); }
|
|
4
4
|
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
5
5
|
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
@@ -24,12 +24,11 @@ import { useResizeObserver } from '@salutejs/plasma-core';
|
|
|
24
24
|
import { cx } from '../../utils';
|
|
25
25
|
import { applyDynamicLabel } from './mixins';
|
|
26
26
|
import { useAutoResize, ROOT_FONT_SIZE } from './hooks';
|
|
27
|
-
import { StyledContent, StyledHelpers, StyledLeftHelper, StyledRightHelper, StyledLabel, StyledPlaceholder, StyledTextArea, StyledTextAreaWrapper, StyledContainer
|
|
27
|
+
import { StyledContent, StyledHelpers, StyledLeftHelper, StyledRightHelper, StyledLabel, StyledPlaceholder, StyledTextArea, StyledTextAreaWrapper, StyledContainer } from './TextArea.styles';
|
|
28
28
|
import { classes } from './TextArea.tokens';
|
|
29
29
|
import { base as viewCSS } from './variations/_view/base';
|
|
30
30
|
import { base as sizeCSS } from './variations/_size/base';
|
|
31
31
|
import { base as disabledCSS } from './variations/_disabled/base';
|
|
32
|
-
import { base as requiredCSS } from './variations/_required/base';
|
|
33
32
|
var innerPlaceholderUp = classes.innerPlaceholderUp,
|
|
34
33
|
focusedOuterPlaceholderColor = classes.focusedOuterPlaceholderColor,
|
|
35
34
|
hidePlaceHolder = classes.hidePlaceHolder,
|
|
@@ -90,8 +89,6 @@ export var textAreaRoot = function textAreaRoot(Root) {
|
|
|
90
89
|
width = props.width,
|
|
91
90
|
value = props.value,
|
|
92
91
|
disabled = props.disabled,
|
|
93
|
-
required = props.required,
|
|
94
|
-
requiredAlign = props.requiredAlign,
|
|
95
92
|
size = props.size,
|
|
96
93
|
view = props.view,
|
|
97
94
|
id = props.id,
|
|
@@ -120,8 +117,6 @@ export var textAreaRoot = function textAreaRoot(Root) {
|
|
|
120
117
|
var textareaHelperId = id ? "".concat(id, "-helper") : undefined;
|
|
121
118
|
var applyCustomWidth = resize !== 'horizontal' && resize !== 'both' && !cols;
|
|
122
119
|
var placeLabel = labelPlacement === 'inner' && label && size !== 'xs' ? label : placeholder;
|
|
123
|
-
var hasOuterLabel = Boolean(label && labelPlacement === 'outer');
|
|
124
|
-
var requiredAlignClass = requiredAlign === 'right' ? 'align-right ' : undefined;
|
|
125
120
|
useResizeObserver(outerRef, function (currentElement) {
|
|
126
121
|
var inlineWidth = currentElement.style.width;
|
|
127
122
|
if (inlineWidth || cols) {
|
|
@@ -160,21 +155,16 @@ export var textAreaRoot = function textAreaRoot(Root) {
|
|
|
160
155
|
size: size,
|
|
161
156
|
disabled: disabled,
|
|
162
157
|
readOnly: readOnly,
|
|
163
|
-
required: required,
|
|
164
158
|
style: _objectSpread({
|
|
165
159
|
width: helperWidth
|
|
166
160
|
}, style),
|
|
167
161
|
className: className
|
|
168
|
-
},
|
|
169
|
-
className: cx('placement-outer', requiredAlignClass)
|
|
170
|
-
}), label), /*#__PURE__*/React.createElement(StyledContainer, {
|
|
162
|
+
}, label && labelPlacement === 'outer' && /*#__PURE__*/React.createElement(StyledLabel, null, label), /*#__PURE__*/React.createElement(StyledContainer, {
|
|
171
163
|
className: cx.apply(void 0, [styledContainer].concat(_toConsumableArray(dynamicLabelClasses))),
|
|
172
164
|
width: helperWidth,
|
|
173
165
|
onFocus: onFocusHandler,
|
|
174
166
|
onBlur: onBlurHandler
|
|
175
|
-
},
|
|
176
|
-
className: cx('placement-inner', requiredAlignClass)
|
|
177
|
-
}), contentRight && /*#__PURE__*/React.createElement(StyledContent, null, contentRight), /*#__PURE__*/React.createElement(StyledTextAreaWrapper, {
|
|
167
|
+
}, contentRight && /*#__PURE__*/React.createElement(StyledContent, null, contentRight), /*#__PURE__*/React.createElement(StyledTextAreaWrapper, {
|
|
178
168
|
className: styledTextAreaWrapper,
|
|
179
169
|
hasHelper: hasHelper
|
|
180
170
|
}, /*#__PURE__*/React.createElement(StyledTextArea, _extends({
|
|
@@ -222,10 +212,6 @@ export var textAreaConfig = {
|
|
|
222
212
|
css: disabledCSS,
|
|
223
213
|
attrs: true
|
|
224
214
|
},
|
|
225
|
-
required: {
|
|
226
|
-
css: requiredCSS,
|
|
227
|
-
attrs: true
|
|
228
|
-
},
|
|
229
215
|
readOnly: {
|
|
230
216
|
attrs: true
|
|
231
217
|
}
|
|
@@ -3,7 +3,7 @@ import { applyEllipsis } from '../../mixins';
|
|
|
3
3
|
import { tokens } from './TextArea.tokens';
|
|
4
4
|
export var StyledLabel = /*#__PURE__*/styled.div.withConfig({
|
|
5
5
|
componentId: "plasma-new-hope__sc-pxxv3p-0"
|
|
6
|
-
})(["
|
|
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
7
|
export var StyledTextAreaWrapper = /*#__PURE__*/styled.div.withConfig({
|
|
8
8
|
componentId: "plasma-new-hope__sc-pxxv3p-1"
|
|
9
9
|
})(["background-color:var(", ");padding-top:var(", ");padding-bottom:", ";border-radius:", ";"], tokens.inputBackgroundColor, tokens.inputPaddingTop, function (_ref) {
|
|
@@ -67,7 +67,4 @@ export var StyledPlaceholder = /*#__PURE__*/styled.label.withConfig({
|
|
|
67
67
|
})(["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
68
|
var hasContentRight = _ref13.hasContentRight;
|
|
69
69
|
return hasContentRight ? "var(".concat(tokens.inputPaddingRightWithRightContent, ")") : "var(".concat(tokens.inputPaddingRight, ")");
|
|
70
|
-
}, tokens.inputFontFamily, tokens.inputFontSize, tokens.inputFontStyle, tokens.inputFontWeight, tokens.inputLetterSpacing, tokens.inputLineHeight);
|
|
71
|
-
export var StyledIndicator = /*#__PURE__*/styled.div.withConfig({
|
|
72
|
-
componentId: "plasma-new-hope__sc-pxxv3p-9"
|
|
73
|
-
})(["position:absolute;border-radius:50%;background-color:var(", ");&.placement-outer{width:var(", ");height:var(", ");inset:var(", ");&.align-right{inset:var(", ");}}&.placement-inner{width:var(", ");height:var(", ");inset:var(", ");&.align-right{inset:var(", ");}}"], tokens.indicatorColor, tokens.indicatorSizeOuter, tokens.indicatorSizeOuter, tokens.indicatorLabelPlacementOuter, tokens.indicatorLabelPlacementOuterRight, tokens.indicatorSizeInner, tokens.indicatorSizeInner, tokens.indicatorLabelPlacementInner, tokens.indicatorLabelPlacementInnerRight);
|
|
70
|
+
}, tokens.inputFontFamily, tokens.inputFontSize, tokens.inputFontStyle, tokens.inputFontWeight, tokens.inputLetterSpacing, tokens.inputLineHeight);
|
|
@@ -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,30 +123,4 @@ export function App() {
|
|
|
123
123
|
</div>
|
|
124
124
|
);
|
|
125
125
|
}
|
|
126
|
-
```
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
### Обязательность поля
|
|
130
|
-
Обязательность поля задаётся с помощью свойств `required` и `requiredAlign`. Где `requiredAlign` отвечает за выравнивание и принимает значения `"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
|
-
requiredAlign="right"
|
|
148
|
-
/>
|
|
149
|
-
</div>
|
|
150
|
-
);
|
|
151
|
-
}
|
|
152
|
-
```
|
|
126
|
+
```
|
|
@@ -146,12 +146,5 @@ export var tokens = {
|
|
|
146
146
|
/** Прозрачность для всего компонента в состоянии disabled */
|
|
147
147
|
disabledOpacity: '--plasma-textarea-disabled-opacity',
|
|
148
148
|
/** Цвет текста для элемента textarea в состоянии disabled */
|
|
149
|
-
inputColorDisabled: '--plasma-textarea-input-color-disabled'
|
|
150
|
-
indicatorColor: '--plasma-textarea-indicator-color',
|
|
151
|
-
indicatorSizeInner: '--plasma-textarea-indicator-size-inner',
|
|
152
|
-
indicatorSizeOuter: '--plasma-textarea-indicator-size-outer',
|
|
153
|
-
indicatorLabelPlacementInner: '--plasma-textarea-indicator-placement-inner',
|
|
154
|
-
indicatorLabelPlacementOuter: '--plasma-textarea-indicator-placement-outer',
|
|
155
|
-
indicatorLabelPlacementInnerRight: '--plasma-textarea-indicator-placement-inner-right',
|
|
156
|
-
indicatorLabelPlacementOuterRight: '--plasma-textarea-indicator-placement-outer-right'
|
|
149
|
+
inputColorDisabled: '--plasma-textarea-input-color-disabled'
|
|
157
150
|
};
|
|
@@ -36,11 +36,5 @@
|
|
|
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"
|
|
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"
|
|
39
|
+
"--plasma-textarea-helpers-line-height"
|
|
46
40
|
]
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var _excluded = ["id", "className", "style", "contentLeft", "contentRight", "label", "labelPlacement", "textBefore", "textAfter", "placeholder", "leftHelper", "enumerationType", "
|
|
1
|
+
var _excluded = ["id", "className", "style", "contentLeft", "contentRight", "label", "labelPlacement", "textBefore", "textAfter", "placeholder", "leftHelper", "enumerationType", "view", "size", "readOnly", "disabled", "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."); }
|
|
@@ -16,13 +16,12 @@ import { base as sizeCSS } from './variations/_size/base';
|
|
|
16
16
|
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
|
-
import { base as requiredCSS } from './variations/_required/base';
|
|
20
19
|
import { base as labelPlacementCSS } from './variations/_label-placement/base';
|
|
21
|
-
import { Input, LeftHelper, Label, InputWrapper, InputLabelWrapper, StyledContentLeft, StyledContentRight, StyledChips, StyledTextBefore, StyledTextAfter
|
|
20
|
+
import { Input, LeftHelper, Label, InputWrapper, InputLabelWrapper, StyledContentLeft, StyledContentRight, StyledChips, StyledTextBefore, StyledTextAfter } from './TextField.styles';
|
|
22
21
|
import { classes } from './TextField.tokens';
|
|
23
22
|
import { TextFieldChip } from './ui';
|
|
24
23
|
import { useKeyNavigation } from './hooks';
|
|
25
|
-
export var base = /*#__PURE__*/css(["display:block;"]);
|
|
24
|
+
export var base = /*#__PURE__*/css(["display:block;overflow:hidden;"]);
|
|
26
25
|
export var textFieldRoot = function textFieldRoot(Root) {
|
|
27
26
|
return /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
28
27
|
var id = _ref.id,
|
|
@@ -38,16 +37,12 @@ export var textFieldRoot = function textFieldRoot(Root) {
|
|
|
38
37
|
leftHelper = _ref.leftHelper,
|
|
39
38
|
_ref$enumerationType = _ref.enumerationType,
|
|
40
39
|
enumerationType = _ref$enumerationType === void 0 ? 'plain' : _ref$enumerationType,
|
|
41
|
-
_ref$requiredAlign = _ref.requiredAlign,
|
|
42
|
-
requiredAlign = _ref$requiredAlign === void 0 ? 'left' : _ref$requiredAlign,
|
|
43
40
|
view = _ref.view,
|
|
44
41
|
size = _ref.size,
|
|
45
42
|
_ref$readOnly = _ref.readOnly,
|
|
46
43
|
readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
|
|
47
44
|
_ref$disabled = _ref.disabled,
|
|
48
45
|
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
49
|
-
_ref$required = _ref.required,
|
|
50
|
-
required = _ref$required === void 0 ? false : _ref$required,
|
|
51
46
|
values = _ref.chips,
|
|
52
47
|
onChange = _ref.onChange,
|
|
53
48
|
onChangeChips = _ref.onChangeChips,
|
|
@@ -77,8 +72,6 @@ export var textFieldRoot = function textFieldRoot(Root) {
|
|
|
77
72
|
var innerLabelPlacementValue = hideLabel ? 'outer' : labelPlacement;
|
|
78
73
|
var innerPlaceholderValue = hideLabel ? label : placeholder;
|
|
79
74
|
var innerLabelValue = hideLabel ? undefined : label;
|
|
80
|
-
var hasOuterLabel = Boolean(!labelInside && innerLabelValue);
|
|
81
|
-
var requiredAlignClass = requiredAlign === 'right' ? 'align-right ' : undefined;
|
|
82
75
|
var hideLabelClass = hideLabel && label ? classes.hideLabel : undefined;
|
|
83
76
|
var labelPlacementClass = classes["".concat(labelPlacement, "LabelPlacement")];
|
|
84
77
|
var isChipsVisible = isChipEnumeration && (chips === null || chips === void 0 ? void 0 : chips.length);
|
|
@@ -154,22 +147,17 @@ export var textFieldRoot = function textFieldRoot(Root) {
|
|
|
154
147
|
view: view,
|
|
155
148
|
size: size,
|
|
156
149
|
disabled: disabled,
|
|
157
|
-
required: required,
|
|
158
150
|
readOnly: !disabled && readOnly,
|
|
159
151
|
labelPlacement: innerLabelPlacementValue,
|
|
160
152
|
onClick: handleInputFocus,
|
|
161
153
|
className: cx(labelPlacementClass, hideLabelClass, className),
|
|
162
154
|
style: style
|
|
163
|
-
},
|
|
155
|
+
}, labelInside || innerLabelValue && /*#__PURE__*/React.createElement(Label, {
|
|
164
156
|
id: labelId,
|
|
165
157
|
htmlFor: id
|
|
166
|
-
},
|
|
167
|
-
className: cx('placement-outer', requiredAlignClass)
|
|
168
|
-
}), innerLabelValue), /*#__PURE__*/React.createElement(InputWrapper, {
|
|
158
|
+
}, innerLabelValue), /*#__PURE__*/React.createElement(InputWrapper, {
|
|
169
159
|
className: cx(withHasChips, wrapperWithoutLeftContent, wrapperWithoutRightContent)
|
|
170
|
-
},
|
|
171
|
-
className: cx('placement-inner', requiredAlignClass)
|
|
172
|
-
}), contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), /*#__PURE__*/React.createElement(InputLabelWrapper, {
|
|
160
|
+
}, contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), /*#__PURE__*/React.createElement(InputLabelWrapper, {
|
|
173
161
|
tabIndex: -1,
|
|
174
162
|
ref: contentRef,
|
|
175
163
|
onKeyDown: handleContentKeyDown,
|
|
@@ -233,10 +221,6 @@ export var textFieldConfig = {
|
|
|
233
221
|
css: readOnlyCSS,
|
|
234
222
|
attrs: true
|
|
235
223
|
},
|
|
236
|
-
required: {
|
|
237
|
-
css: requiredCSS,
|
|
238
|
-
attrs: true
|
|
239
|
-
},
|
|
240
224
|
labelPlacement: {
|
|
241
225
|
css: labelPlacementCSS
|
|
242
226
|
}
|
|
@@ -14,7 +14,7 @@ export var Input = /*#__PURE__*/styled.input.withConfig({
|
|
|
14
14
|
})(["box-sizing:border-box;appearance:none;border:0;padding:0;background-color:transparent;outline:none;flex:1;min-width:60%;"]);
|
|
15
15
|
export var Label = /*#__PURE__*/styled.label.withConfig({
|
|
16
16
|
componentId: "plasma-new-hope__sc-g4vxbb-4"
|
|
17
|
-
})(["
|
|
17
|
+
})([""]);
|
|
18
18
|
export var StyledContentLeft = /*#__PURE__*/styled.div.withConfig({
|
|
19
19
|
componentId: "plasma-new-hope__sc-g4vxbb-5"
|
|
20
20
|
})(["margin:var(", ");line-height:0;"], tokens.leftContentMargin);
|
|
@@ -29,7 +29,4 @@ export var StyledTextBefore = /*#__PURE__*/styled.div.withConfig({
|
|
|
29
29
|
})([""]);
|
|
30
30
|
export var StyledTextAfter = /*#__PURE__*/styled.div.withConfig({
|
|
31
31
|
componentId: "plasma-new-hope__sc-g4vxbb-9"
|
|
32
|
-
})([""]);
|
|
33
|
-
export var StyledIndicator = /*#__PURE__*/styled.div.withConfig({
|
|
34
|
-
componentId: "plasma-new-hope__sc-g4vxbb-10"
|
|
35
|
-
})(["position:absolute;border-radius:50%;background-color:var(", ");&.placement-outer{width:var(", ");height:var(", ");inset:var(", ");&.align-right{inset:var(", ");}}&.placement-inner{width:var(", ");height:var(", ");inset:var(", ");&.align-right{inset:var(", ");}}"], tokens.indicatorColor, tokens.indicatorSizeOuter, tokens.indicatorSizeOuter, tokens.indicatorLabelPlacementOuter, tokens.indicatorLabelPlacementOuterRight, tokens.indicatorSizeInner, tokens.indicatorSizeInner, tokens.indicatorLabelPlacementInner, tokens.indicatorLabelPlacementInnerRight);
|
|
32
|
+
})([""]);
|