@salutejs/plasma-new-hope 0.84.2-canary.1217.9223107446.0 → 0.85.0-canary.1208.9245279695.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (200) hide show
  1. package/cjs/components/Checkbox/Checkbox.styles.js.map +1 -1
  2. package/cjs/components/Range/Range.css +63 -0
  3. package/cjs/components/Range/Range.js +146 -0
  4. package/cjs/components/Range/Range.js.map +1 -0
  5. package/cjs/components/Range/Range.styles.js +63 -0
  6. package/cjs/components/Range/Range.styles.js.map +1 -0
  7. package/cjs/components/Range/Range.styles_mc4w65.css +8 -0
  8. package/cjs/components/Range/Range.tokens.js +106 -0
  9. package/cjs/components/Range/Range.tokens.js.map +1 -0
  10. package/cjs/components/Range/utils/index.js +24 -0
  11. package/cjs/components/Range/utils/index.js.map +1 -0
  12. package/cjs/components/Range/variations/_disabled/base.js +9 -0
  13. package/cjs/components/Range/variations/_disabled/base.js.map +1 -0
  14. package/cjs/components/Range/variations/_disabled/base_1ufizo4.css +1 -0
  15. package/cjs/components/Range/variations/_readonly/base.js +9 -0
  16. package/cjs/components/Range/variations/_readonly/base.js.map +1 -0
  17. package/cjs/components/Range/variations/_readonly/base_tzdxy8.css +1 -0
  18. package/cjs/components/Range/variations/_size/base.js +9 -0
  19. package/cjs/components/Range/variations/_size/base.js.map +1 -0
  20. package/cjs/components/Range/variations/_size/base_16xiubi.css +1 -0
  21. package/cjs/components/Range/variations/_view/base.js +9 -0
  22. package/cjs/components/Range/variations/_view/base.js.map +1 -0
  23. package/cjs/components/Range/variations/_view/base_5iz3nr.css +1 -0
  24. package/cjs/components/Slider/Slider.css +11 -9
  25. package/cjs/components/Slider/components/Double/Double.css +11 -9
  26. package/cjs/components/TextField/TextField.js +10 -10
  27. package/cjs/components/TextField/TextField.js.map +1 -1
  28. package/cjs/components/TextField/TextField.styles.js +13 -1
  29. package/cjs/components/TextField/TextField.styles.js.map +1 -1
  30. package/cjs/components/TextField/{TextField.styles_1b1mddp.css → TextField.styles_aqmut.css} +2 -0
  31. package/cjs/components/TextField/TextField.tokens.js +5 -0
  32. package/cjs/components/TextField/TextField.tokens.js.map +1 -1
  33. package/cjs/components/TextField/variations/_label-placement/inner.js +1 -1
  34. package/cjs/components/TextField/variations/_label-placement/inner.js.map +1 -1
  35. package/cjs/components/TextField/variations/_label-placement/inner_7c08qb.css +1 -0
  36. package/cjs/components/TextField/variations/_size/base.js +1 -1
  37. package/cjs/components/TextField/variations/_size/base.js.map +1 -1
  38. package/{es/components/TextField/variations/_size/base_1khzr9t.css → cjs/components/TextField/variations/_size/base_ntoddv.css} +1 -1
  39. package/cjs/components/TextField/variations/_view/base.js +1 -1
  40. package/cjs/components/TextField/variations/_view/base.js.map +1 -1
  41. package/{es/components/TextField/variations/_view/base_1qd77x6.css → cjs/components/TextField/variations/_view/base_19gxyva.css} +1 -1
  42. package/cjs/index.css +28 -9
  43. package/cjs/index.js +5 -0
  44. package/cjs/index.js.map +1 -1
  45. package/es/components/Checkbox/Checkbox.styles.js.map +1 -1
  46. package/es/components/Range/Range.css +63 -0
  47. package/es/components/Range/Range.js +141 -0
  48. package/es/components/Range/Range.js.map +1 -0
  49. package/es/components/Range/Range.styles.js +52 -0
  50. package/es/components/Range/Range.styles.js.map +1 -0
  51. package/es/components/Range/Range.styles_mc4w65.css +8 -0
  52. package/es/components/Range/Range.tokens.js +101 -0
  53. package/es/components/Range/Range.tokens.js.map +1 -0
  54. package/es/components/Range/utils/index.js +19 -0
  55. package/es/components/Range/utils/index.js.map +1 -0
  56. package/es/components/Range/variations/_disabled/base.js +5 -0
  57. package/es/components/Range/variations/_disabled/base.js.map +1 -0
  58. package/es/components/Range/variations/_disabled/base_1ufizo4.css +1 -0
  59. package/es/components/Range/variations/_readonly/base.js +5 -0
  60. package/es/components/Range/variations/_readonly/base.js.map +1 -0
  61. package/es/components/Range/variations/_readonly/base_tzdxy8.css +1 -0
  62. package/es/components/Range/variations/_size/base.js +5 -0
  63. package/es/components/Range/variations/_size/base.js.map +1 -0
  64. package/es/components/Range/variations/_size/base_16xiubi.css +1 -0
  65. package/es/components/Range/variations/_view/base.js +5 -0
  66. package/es/components/Range/variations/_view/base.js.map +1 -0
  67. package/es/components/Range/variations/_view/base_5iz3nr.css +1 -0
  68. package/es/components/Slider/Slider.css +11 -9
  69. package/es/components/Slider/components/Double/Double.css +11 -9
  70. package/es/components/TextField/TextField.js +11 -11
  71. package/es/components/TextField/TextField.js.map +1 -1
  72. package/es/components/TextField/TextField.styles.js +12 -2
  73. package/es/components/TextField/TextField.styles.js.map +1 -1
  74. package/es/components/TextField/{TextField.styles_1b1mddp.css → TextField.styles_aqmut.css} +2 -0
  75. package/es/components/TextField/TextField.tokens.js +5 -0
  76. package/es/components/TextField/TextField.tokens.js.map +1 -1
  77. package/es/components/TextField/variations/_label-placement/inner.js +1 -1
  78. package/es/components/TextField/variations/_label-placement/inner.js.map +1 -1
  79. package/es/components/TextField/variations/_label-placement/inner_7c08qb.css +1 -0
  80. package/es/components/TextField/variations/_size/base.js +1 -1
  81. package/es/components/TextField/variations/_size/base.js.map +1 -1
  82. package/{cjs/components/TextField/variations/_size/base_1khzr9t.css → es/components/TextField/variations/_size/base_ntoddv.css} +1 -1
  83. package/es/components/TextField/variations/_view/base.js +1 -1
  84. package/es/components/TextField/variations/_view/base.js.map +1 -1
  85. package/{cjs/components/TextField/variations/_view/base_1qd77x6.css → es/components/TextField/variations/_view/base_19gxyva.css} +1 -1
  86. package/es/index.css +28 -9
  87. package/es/index.js +2 -0
  88. package/es/index.js.map +1 -1
  89. package/package.json +2 -2
  90. package/styled-components/cjs/components/Range/Range.js +148 -0
  91. package/styled-components/cjs/components/Range/Range.styles.js +39 -0
  92. package/styled-components/cjs/components/Range/Range.template-doc.mdx +323 -0
  93. package/styled-components/cjs/components/Range/Range.tokens.js +104 -0
  94. package/styled-components/cjs/components/Range/Range.types.js +5 -0
  95. package/styled-components/cjs/components/Range/index.js +25 -0
  96. package/styled-components/cjs/components/Range/utils/index.js +22 -0
  97. package/styled-components/cjs/components/Range/variations/_disabled/base.js +9 -0
  98. package/styled-components/cjs/components/Range/variations/_disabled/tokens.json +4 -0
  99. package/styled-components/cjs/components/Range/variations/_readonly/base.js +10 -0
  100. package/styled-components/cjs/components/Range/variations/_readonly/tokens.json +4 -0
  101. package/styled-components/cjs/components/Range/variations/_size/base.js +10 -0
  102. package/styled-components/cjs/components/Range/variations/_size/tokens.json +26 -0
  103. package/styled-components/cjs/components/Range/variations/_view/base.js +10 -0
  104. package/styled-components/cjs/components/Range/variations/_view/tokens.json +6 -0
  105. package/styled-components/cjs/components/TextField/TextField.js +10 -10
  106. package/styled-components/cjs/components/TextField/TextField.styles.js +7 -1
  107. package/styled-components/cjs/components/TextField/TextField.tokens.js +5 -0
  108. package/styled-components/cjs/components/TextField/variations/_label-placement/inner.js +1 -1
  109. package/styled-components/cjs/components/TextField/variations/_size/base.js +1 -1
  110. package/styled-components/cjs/components/TextField/variations/_view/base.js +1 -1
  111. package/styled-components/cjs/examples/plasma_b2c/components/Range/Range.config.js +31 -0
  112. package/styled-components/cjs/examples/plasma_b2c/components/Range/Range.js +11 -0
  113. package/styled-components/cjs/examples/plasma_b2c/components/Range/Range.stories.tsx +312 -0
  114. package/styled-components/cjs/examples/plasma_b2c/components/TextField/TextField.config.js +8 -8
  115. package/styled-components/cjs/examples/plasma_b2c/components/TextField/TextField.stories.tsx +2 -0
  116. package/styled-components/cjs/examples/plasma_web/components/Range/Range.config.js +31 -0
  117. package/styled-components/cjs/examples/plasma_web/components/Range/Range.js +11 -0
  118. package/styled-components/cjs/examples/plasma_web/components/Range/Range.stories.tsx +312 -0
  119. package/styled-components/cjs/index.js +11 -0
  120. package/styled-components/es/components/Range/Range.js +139 -0
  121. package/styled-components/es/components/Range/Range.styles.js +31 -0
  122. package/styled-components/es/components/Range/Range.template-doc.mdx +323 -0
  123. package/styled-components/es/components/Range/Range.tokens.js +98 -0
  124. package/styled-components/es/components/Range/Range.types.js +1 -0
  125. package/styled-components/es/components/Range/index.js +2 -0
  126. package/styled-components/es/components/Range/utils/index.js +16 -0
  127. package/styled-components/es/components/Range/variations/_disabled/base.js +3 -0
  128. package/styled-components/es/components/Range/variations/_disabled/tokens.json +4 -0
  129. package/styled-components/es/components/Range/variations/_readonly/base.js +4 -0
  130. package/styled-components/es/components/Range/variations/_readonly/tokens.json +4 -0
  131. package/styled-components/es/components/Range/variations/_size/base.js +4 -0
  132. package/styled-components/es/components/Range/variations/_size/tokens.json +26 -0
  133. package/styled-components/es/components/Range/variations/_view/base.js +4 -0
  134. package/styled-components/es/components/Range/variations/_view/tokens.json +6 -0
  135. package/styled-components/es/components/TextField/TextField.js +11 -11
  136. package/styled-components/es/components/TextField/TextField.styles.js +6 -0
  137. package/styled-components/es/components/TextField/TextField.tokens.js +5 -0
  138. package/styled-components/es/components/TextField/variations/_label-placement/inner.js +2 -2
  139. package/styled-components/es/components/TextField/variations/_size/base.js +2 -2
  140. package/styled-components/es/components/TextField/variations/_view/base.js +2 -2
  141. package/styled-components/es/examples/plasma_b2c/components/Range/Range.config.js +25 -0
  142. package/styled-components/es/examples/plasma_b2c/components/Range/Range.js +5 -0
  143. package/styled-components/es/examples/plasma_b2c/components/Range/Range.stories.tsx +312 -0
  144. package/styled-components/es/examples/plasma_b2c/components/TextField/TextField.config.js +8 -8
  145. package/styled-components/es/examples/plasma_b2c/components/TextField/TextField.stories.tsx +2 -0
  146. package/styled-components/es/examples/plasma_web/components/Range/Range.config.js +25 -0
  147. package/styled-components/es/examples/plasma_web/components/Range/Range.js +5 -0
  148. package/styled-components/es/examples/plasma_web/components/Range/Range.stories.tsx +312 -0
  149. package/styled-components/es/index.js +2 -1
  150. package/types/components/Range/Range.d.ts +31 -0
  151. package/types/components/Range/Range.d.ts.map +1 -0
  152. package/types/components/Range/Range.styles.d.ts +48 -0
  153. package/types/components/Range/Range.styles.d.ts.map +1 -0
  154. package/types/components/Range/Range.tokens.d.ts +99 -0
  155. package/types/components/Range/Range.tokens.d.ts.map +1 -0
  156. package/types/components/Range/Range.types.d.ts +143 -0
  157. package/types/components/Range/Range.types.d.ts.map +1 -0
  158. package/types/components/Range/index.d.ts +4 -0
  159. package/types/components/Range/index.d.ts.map +1 -0
  160. package/types/components/Range/utils/index.d.ts +5 -0
  161. package/types/components/Range/utils/index.d.ts.map +1 -0
  162. package/types/components/Range/variations/_disabled/base.d.ts +2 -0
  163. package/types/components/Range/variations/_disabled/base.d.ts.map +1 -0
  164. package/types/components/Range/variations/_readonly/base.d.ts +2 -0
  165. package/types/components/Range/variations/_readonly/base.d.ts.map +1 -0
  166. package/types/components/Range/variations/_size/base.d.ts +2 -0
  167. package/types/components/Range/variations/_size/base.d.ts.map +1 -0
  168. package/types/components/Range/variations/_view/base.d.ts +2 -0
  169. package/types/components/Range/variations/_view/base.d.ts.map +1 -0
  170. package/types/components/Slider/components/Double/Double.styles.d.ts +4 -0
  171. package/types/components/Slider/components/Double/Double.styles.d.ts.map +1 -1
  172. package/types/components/TextField/TextField.d.ts.map +1 -1
  173. package/types/components/TextField/TextField.styles.d.ts +2 -0
  174. package/types/components/TextField/TextField.styles.d.ts.map +1 -1
  175. package/types/components/TextField/TextField.tokens.d.ts +5 -0
  176. package/types/components/TextField/TextField.tokens.d.ts.map +1 -1
  177. package/types/components/TextField/TextField.types.d.ts +8 -0
  178. package/types/components/TextField/TextField.types.d.ts.map +1 -1
  179. package/types/components/TextField/variations/_label-placement/inner.d.ts.map +1 -1
  180. package/types/components/TextField/variations/_size/base.d.ts.map +1 -1
  181. package/types/components/TextField/variations/_view/base.d.ts.map +1 -1
  182. package/types/examples/plasma_b2c/components/Range/Range.config.d.ts +24 -0
  183. package/types/examples/plasma_b2c/components/Range/Range.config.d.ts.map +1 -0
  184. package/types/examples/plasma_b2c/components/Range/Range.d.ts +127 -0
  185. package/types/examples/plasma_b2c/components/Range/Range.d.ts.map +1 -0
  186. package/types/examples/plasma_b2c/components/TextField/TextField.config.d.ts.map +1 -1
  187. package/types/examples/plasma_b2c/components/TextField/TextField.d.ts +4 -0
  188. package/types/examples/plasma_b2c/components/TextField/TextField.d.ts.map +1 -1
  189. package/types/examples/plasma_web/components/Range/Range.config.d.ts +24 -0
  190. package/types/examples/plasma_web/components/Range/Range.config.d.ts.map +1 -0
  191. package/types/examples/plasma_web/components/Range/Range.d.ts +127 -0
  192. package/types/examples/plasma_web/components/Range/Range.d.ts.map +1 -0
  193. package/types/examples/plasma_web/components/TextField/TextField.d.ts +4 -0
  194. package/types/examples/plasma_web/components/TextField/TextField.d.ts.map +1 -1
  195. package/types/examples/sds_engineer/components/TextField/TextField.d.ts +4 -0
  196. package/types/examples/sds_engineer/components/TextField/TextField.d.ts.map +1 -1
  197. package/types/index.d.ts +1 -0
  198. package/types/index.d.ts.map +1 -1
  199. package/cjs/components/TextField/variations/_label-placement/inner_gqlcj2.css +0 -1
  200. package/es/components/TextField/variations/_label-placement/inner_gqlcj2.css +0 -1
@@ -68,6 +68,11 @@ var tokens = exports.tokens = {
68
68
  leftHelperFontWeight: '--plasma-textfield__left-helper-font-weight',
69
69
  leftHelperLetterSpacing: '--plasma-textfield__left-helper-letter-spacing',
70
70
  leftHelperLineHeight: '--plasma-textfield__left-helper-line-height',
71
+ /** Токены вспомогательного текста */
72
+ textBeforeColor: '--plasma-textfield__before-text-color',
73
+ textAfterColor: '--plasma-textfield__after-text-color',
74
+ textBeforeMargin: '--plasma-textfield__before-text-margin',
75
+ textAfterMargin: '--plasma-textfield__after-text-margin',
71
76
  /** Прозрачность для всего компонента в состоянии disabled */
72
77
  disabledOpacity: '--plasma-textfield-disabled-opacity',
73
78
  /** Токены чипа */
@@ -7,4 +7,4 @@ exports.labelPlacement_inner = void 0;
7
7
  var _styledComponents = /*#__PURE__*/require("styled-components");
8
8
  var _TextField = /*#__PURE__*/require("../../TextField.styles");
9
9
  var _TextField2 = /*#__PURE__*/require("../../TextField.tokens");
10
- var labelPlacement_inner = exports.labelPlacement_inner = /*#__PURE__*/(0, _styledComponents.css)(["", "{padding:var(", ");}", ":focus ~ ", ",", ":not(:placeholder-shown) ~ ", "{height:auto;padding:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", ":not(:focus)::placeholder{color:transparent;}", ":focus::placeholder{color:transparent;}", "{color:var(", ");pointer-events:none;position:absolute;top:0;display:flex;align-items:center;box-sizing:border-box;transition:padding 0.1s ease-in-out,height 0s;height:var(", ");padding-top:calc(var(", ") / 4);padding-bottom:calc(var(", ") / 4);}"], _TextField.Input, _TextField2.tokens.contentLabelInnerPadding, _TextField.Input, _TextField.Label, _TextField.Input, _TextField.Label, _TextField2.tokens.labelInnerPadding, _TextField2.tokens.labelInnerFontFamily, _TextField2.tokens.labelInnerFontSize, _TextField2.tokens.labelInnerFontStyle, _TextField2.tokens.labelInnerFontWeight, _TextField2.tokens.labelInnerLetterSpacing, _TextField2.tokens.labelInnerLineHeight, _TextField.Input, _TextField.Input, _TextField.Label, _TextField2.tokens.placeholderColor, _TextField2.tokens.height, _TextField2.tokens.height, _TextField2.tokens.height);
10
+ var labelPlacement_inner = exports.labelPlacement_inner = /*#__PURE__*/(0, _styledComponents.css)(["", "{padding:var(", ");}", ",", "{padding:var(", ");}", ":focus ~ ", ",", ":not(:placeholder-shown) ~ ", "{height:auto;padding:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", ":not(:focus)::placeholder{color:transparent;}", ":focus::placeholder{color:transparent;}", "{color:var(", ");pointer-events:none;position:absolute;top:0;display:flex;align-items:center;box-sizing:border-box;transition:padding 0.1s ease-in-out,height 0s;height:var(", ");padding-top:calc(var(", ") / 4);padding-bottom:calc(var(", ") / 4);}"], _TextField.Input, _TextField2.tokens.contentLabelInnerPadding, _TextField.StyledTextAfter, _TextField.StyledTextBefore, _TextField2.tokens.contentLabelInnerPadding, _TextField.Input, _TextField.Label, _TextField.Input, _TextField.Label, _TextField2.tokens.labelInnerPadding, _TextField2.tokens.labelInnerFontFamily, _TextField2.tokens.labelInnerFontSize, _TextField2.tokens.labelInnerFontStyle, _TextField2.tokens.labelInnerFontWeight, _TextField2.tokens.labelInnerLetterSpacing, _TextField2.tokens.labelInnerLineHeight, _TextField.Input, _TextField.Input, _TextField.Label, _TextField2.tokens.placeholderColor, _TextField2.tokens.height, _TextField2.tokens.height, _TextField2.tokens.height);
@@ -7,4 +7,4 @@ exports.base = void 0;
7
7
  var _styledComponents = /*#__PURE__*/require("styled-components");
8
8
  var _TextField = /*#__PURE__*/require("../../TextField.tokens");
9
9
  var _TextField2 = /*#__PURE__*/require("../../TextField.styles");
10
- var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["", "{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(", ");}"], _TextField2.Input, _TextField.tokens.fontFamily, _TextField.tokens.fontSize, _TextField.tokens.fontStyle, _TextField.tokens.fontWeight, _TextField.tokens.letterSpacing, _TextField.tokens.lineHeight, _TextField2.InputWrapper, _TextField.tokens.height, _TextField.tokens.borderRadius, _TextField.tokens.padding, _TextField.classes.hasChips, _TextField.tokens.paddingWithChips, _TextField.tokens.paddingWithChips, _TextField.classes.hasEmptyContentLeft, _TextField.tokens.paddingWithChips, _TextField.classes.hasEmptyContentRight, _TextField.tokens.paddingWithChips, _TextField2.Label, _TextField.tokens.labelFontFamily, _TextField.tokens.labelFontSize, _TextField.tokens.labelFontStyle, _TextField.tokens.labelFontWeight, _TextField.tokens.labelLetterSpacing, _TextField.tokens.labelLineHeight, _TextField2.LeftHelper, _TextField.tokens.leftHelperOffset, _TextField.tokens.leftHelperFontFamily, _TextField.tokens.leftHelperFontSize, _TextField.tokens.leftHelperFontStyle, _TextField.tokens.leftHelperFontWeight, _TextField.tokens.leftHelperLetterSpacing, _TextField.tokens.leftHelperLineHeight);
10
+ var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["", "{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(", ");}"], _TextField2.Input, _TextField.tokens.fontFamily, _TextField.tokens.fontSize, _TextField.tokens.fontStyle, _TextField.tokens.fontWeight, _TextField.tokens.letterSpacing, _TextField.tokens.lineHeight, _TextField2.InputWrapper, _TextField.tokens.height, _TextField.tokens.borderRadius, _TextField.tokens.padding, _TextField.classes.hasChips, _TextField.tokens.paddingWithChips, _TextField.tokens.paddingWithChips, _TextField.classes.hasEmptyContentLeft, _TextField.tokens.paddingWithChips, _TextField.classes.hasEmptyContentRight, _TextField.tokens.paddingWithChips, _TextField2.Label, _TextField.tokens.labelFontFamily, _TextField.tokens.labelFontSize, _TextField.tokens.labelFontStyle, _TextField.tokens.labelFontWeight, _TextField.tokens.labelLetterSpacing, _TextField.tokens.labelLineHeight, _TextField2.LeftHelper, _TextField.tokens.leftHelperOffset, _TextField.tokens.leftHelperFontFamily, _TextField.tokens.leftHelperFontSize, _TextField.tokens.leftHelperFontStyle, _TextField.tokens.leftHelperFontWeight, _TextField.tokens.leftHelperLetterSpacing, _TextField.tokens.leftHelperLineHeight, _TextField2.StyledTextBefore, _TextField2.StyledTextAfter, _TextField.tokens.fontFamily, _TextField.tokens.fontSize, _TextField.tokens.fontStyle, _TextField.tokens.fontWeight, _TextField.tokens.letterSpacing, _TextField.tokens.lineHeight, _TextField2.StyledTextBefore, _TextField.tokens.textBeforeMargin, _TextField2.StyledTextAfter, _TextField.tokens.textAfterMargin);
@@ -7,4 +7,4 @@ exports.base = void 0;
7
7
  var _styledComponents = /*#__PURE__*/require("styled-components");
8
8
  var _TextField = /*#__PURE__*/require("../../TextField.tokens");
9
9
  var _TextField2 = /*#__PURE__*/require("../../TextField.styles");
10
- var base = exports.base = /*#__PURE__*/(0, _styledComponents.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(", ") );}", "::placeholder{color:var(", ");}", "{color:var(", ");}", "{color:var(", ");}"], _TextField2.InputWrapper, /*#__PURE__*/String(_TextField.tokens.borderColor), /*#__PURE__*/String(_TextField.tokens.backgroundColor), _TextField.tokens.color, _TextField.tokens.borderWidth, _TextField.tokens.caretColor, _TextField2.InputWrapper, _TextField.tokens.borderColorHover, /*#__PURE__*/String(_TextField.tokens.borderColor), _TextField.tokens.backgroundColorHover, /*#__PURE__*/String(_TextField.tokens.backgroundColor), _TextField2.InputWrapper, _TextField.tokens.borderColorFocus, /*#__PURE__*/String(_TextField.tokens.borderColor), _TextField.tokens.backgroundColorFocus, /*#__PURE__*/String(_TextField.tokens.backgroundColor), _TextField2.Input, _TextField.tokens.placeholderColor, _TextField2.Input, _TextField.tokens.color, _TextField2.LeftHelper, _TextField.tokens.leftHelperColor);
10
+ var base = exports.base = /*#__PURE__*/(0, _styledComponents.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(", ") );}", "::placeholder{color:var(", ");}", "{color:var(", ");}", "{color:var(", ");}", "{color:var(", ");}", "{color:var(", ");}"], _TextField2.InputWrapper, /*#__PURE__*/String(_TextField.tokens.borderColor), /*#__PURE__*/String(_TextField.tokens.backgroundColor), _TextField.tokens.color, _TextField.tokens.borderWidth, _TextField.tokens.caretColor, _TextField2.InputWrapper, _TextField.tokens.borderColorHover, /*#__PURE__*/String(_TextField.tokens.borderColor), _TextField.tokens.backgroundColorHover, /*#__PURE__*/String(_TextField.tokens.backgroundColor), _TextField2.InputWrapper, _TextField.tokens.borderColorFocus, /*#__PURE__*/String(_TextField.tokens.borderColor), _TextField.tokens.backgroundColorFocus, /*#__PURE__*/String(_TextField.tokens.backgroundColor), _TextField2.Input, _TextField.tokens.placeholderColor, _TextField2.Input, _TextField.tokens.color, _TextField2.LeftHelper, _TextField.tokens.leftHelperColor, _TextField2.StyledTextBefore, _TextField.tokens.textBeforeColor, _TextField2.StyledTextAfter, _TextField.tokens.textAfterColor);
@@ -0,0 +1,31 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.config = void 0;
7
+ var _styledComponents = /*#__PURE__*/require("styled-components");
8
+ var _Range = /*#__PURE__*/require("../../../../components/Range");
9
+ var config = exports.config = {
10
+ defaults: {
11
+ view: 'default',
12
+ size: 'l'
13
+ },
14
+ variations: {
15
+ view: {
16
+ "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-transparent-primary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-positive);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-accent);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-active);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-active);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-accent);"], _Range.rangeTokens.background, _Range.rangeTokens.backgroundError, _Range.rangeTokens.backgroundSuccess, _Range.rangeTokens.dividerColor, _Range.rangeTokens.labelColor, _Range.rangeTokens.leftHelperColor, _Range.rangeTokens.textFieldColor, _Range.rangeTokens.textFieldPlaceholderColor, _Range.rangeTokens.textFieldCaretColor, _Range.rangeTokens.textFieldBackgroundColorFocus, _Range.rangeTokens.textFieldBackgroundErrorColor, _Range.rangeTokens.textFieldBackgroundErrorColorFocus, _Range.rangeTokens.textFieldBackgroundSuccessColor, _Range.rangeTokens.textFieldBackgroundSuccessColorFocus, _Range.rangeTokens.textFieldTextBeforeColor, _Range.rangeTokens.textFieldTextAfterColor, _Range.rangeTokens.focusColor)
17
+ },
18
+ size: {
19
+ l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.875rem;", ":0 0.375rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0 0.375rem 0 1rem;", ":0;", ":0 0 0.75rem 0;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":3.5rem;", ":0.875rem;", ":1.0625rem 1.125rem 1.0625rem 1.125rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.25rem 0 0 0;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.0625rem 0.5rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;"], _Range.rangeTokens.borderRadius, _Range.rangeTokens.dividerPadding, _Range.rangeTokens.dividerFontFamily, _Range.rangeTokens.dividerFontStyle, _Range.rangeTokens.dividerFontSize, _Range.rangeTokens.dividerFontWeight, _Range.rangeTokens.dividerLetterSpacing, _Range.rangeTokens.dividerLineHeight, _Range.rangeTokens.leftContentMargin, _Range.rangeTokens.rightContentMargin, _Range.rangeTokens.labelOffset, _Range.rangeTokens.labelFontFamily, _Range.rangeTokens.labelFontStyle, _Range.rangeTokens.labelFontSize, _Range.rangeTokens.labelFontWeight, _Range.rangeTokens.labelLetterSpacing, _Range.rangeTokens.labelLineHeight, _Range.rangeTokens.textFieldHeight, _Range.rangeTokens.textFieldBorderRadius, _Range.rangeTokens.textFieldPadding, _Range.rangeTokens.textFieldFontFamily, _Range.rangeTokens.textFieldFontStyle, _Range.rangeTokens.textFieldFontSize, _Range.rangeTokens.textFieldFontWeight, _Range.rangeTokens.textFieldLetterSpacing, _Range.rangeTokens.textFieldLineHeight, _Range.rangeTokens.leftHelperOffset, _Range.rangeTokens.leftHelperFontFamily, _Range.rangeTokens.leftHelperFontStyle, _Range.rangeTokens.leftHelperFontSize, _Range.rangeTokens.leftHelperFontWeight, _Range.rangeTokens.leftHelperLetterSpacing, _Range.rangeTokens.leftHelperLineHeight, _Range.rangeTokens.textFieldLeftContentMargin, _Range.rangeTokens.textFieldRightContentMargin, _Range.rangeTokens.textFieldTextBeforeMargin, _Range.rangeTokens.textFieldTextAfterMargin),
20
+ m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":0 0.375rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0 0.375rem 0 0.875rem;", ":0;", ":0 0 0.625rem 0;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":3rem;", ":0.75rem;", ":0.875rem 1rem 0.875rem 1rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.25rem 0 0 0;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.125rem 0.375rem -0.125rem -0.125rem;", ":-0.125rem -0.125rem -0.125rem 0.75rem;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;"], _Range.rangeTokens.borderRadius, _Range.rangeTokens.dividerPadding, _Range.rangeTokens.dividerFontFamily, _Range.rangeTokens.dividerFontStyle, _Range.rangeTokens.dividerFontSize, _Range.rangeTokens.dividerFontWeight, _Range.rangeTokens.dividerLetterSpacing, _Range.rangeTokens.dividerLineHeight, _Range.rangeTokens.leftContentMargin, _Range.rangeTokens.rightContentMargin, _Range.rangeTokens.labelOffset, _Range.rangeTokens.labelFontFamily, _Range.rangeTokens.labelFontStyle, _Range.rangeTokens.labelFontSize, _Range.rangeTokens.labelFontWeight, _Range.rangeTokens.labelLetterSpacing, _Range.rangeTokens.labelLineHeight, _Range.rangeTokens.textFieldHeight, _Range.rangeTokens.textFieldBorderRadius, _Range.rangeTokens.textFieldPadding, _Range.rangeTokens.textFieldFontFamily, _Range.rangeTokens.textFieldFontStyle, _Range.rangeTokens.textFieldFontSize, _Range.rangeTokens.textFieldFontWeight, _Range.rangeTokens.textFieldLetterSpacing, _Range.rangeTokens.textFieldLineHeight, _Range.rangeTokens.leftHelperOffset, _Range.rangeTokens.leftHelperFontFamily, _Range.rangeTokens.leftHelperFontStyle, _Range.rangeTokens.leftHelperFontSize, _Range.rangeTokens.leftHelperFontWeight, _Range.rangeTokens.leftHelperLetterSpacing, _Range.rangeTokens.leftHelperLineHeight, _Range.rangeTokens.textFieldLeftContentMargin, _Range.rangeTokens.textFieldRightContentMargin, _Range.rangeTokens.textFieldTextBeforeMargin, _Range.rangeTokens.textFieldTextAfterMargin),
21
+ s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.625rem;", ":0 0.375rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0 0.375rem 0 0.75rem;", ":0;", ":0 0 0.5rem 0;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":2.5rem;", ":0.625rem;", ":0.6875rem 0.875rem 0.6875rem 0.875rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.25rem 0 0 0;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.1875rem 0.25rem -0.1875rem -0.125rem;", ":-0.1875rem -0.125rem -0.1875rem 0.75rem;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;"], _Range.rangeTokens.borderRadius, _Range.rangeTokens.dividerPadding, _Range.rangeTokens.dividerFontFamily, _Range.rangeTokens.dividerFontStyle, _Range.rangeTokens.dividerFontSize, _Range.rangeTokens.dividerFontWeight, _Range.rangeTokens.dividerLetterSpacing, _Range.rangeTokens.dividerLineHeight, _Range.rangeTokens.leftContentMargin, _Range.rangeTokens.rightContentMargin, _Range.rangeTokens.labelOffset, _Range.rangeTokens.labelFontFamily, _Range.rangeTokens.labelFontStyle, _Range.rangeTokens.labelFontSize, _Range.rangeTokens.labelFontWeight, _Range.rangeTokens.labelLetterSpacing, _Range.rangeTokens.labelLineHeight, _Range.rangeTokens.textFieldHeight, _Range.rangeTokens.textFieldBorderRadius, _Range.rangeTokens.textFieldPadding, _Range.rangeTokens.textFieldFontFamily, _Range.rangeTokens.textFieldFontStyle, _Range.rangeTokens.textFieldFontSize, _Range.rangeTokens.textFieldFontWeight, _Range.rangeTokens.textFieldLetterSpacing, _Range.rangeTokens.textFieldLineHeight, _Range.rangeTokens.leftHelperOffset, _Range.rangeTokens.leftHelperFontFamily, _Range.rangeTokens.leftHelperFontStyle, _Range.rangeTokens.leftHelperFontSize, _Range.rangeTokens.leftHelperFontWeight, _Range.rangeTokens.leftHelperLetterSpacing, _Range.rangeTokens.leftHelperLineHeight, _Range.rangeTokens.textFieldLeftContentMargin, _Range.rangeTokens.textFieldRightContentMargin, _Range.rangeTokens.textFieldTextBeforeMargin, _Range.rangeTokens.textFieldTextAfterMargin),
22
+ xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":0 0.375rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0 0.25rem 0 0.5rem;", ":0;", ":0 0 0.375rem 0;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":2rem;", ":0.5rem;", ":0.5625rem 0.625rem 0.5625rem 0.625rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.25rem 0 0 0;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.0625rem 0.25rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;"], _Range.rangeTokens.borderRadius, _Range.rangeTokens.dividerPadding, _Range.rangeTokens.dividerFontFamily, _Range.rangeTokens.dividerFontStyle, _Range.rangeTokens.dividerFontSize, _Range.rangeTokens.dividerFontWeight, _Range.rangeTokens.dividerLetterSpacing, _Range.rangeTokens.dividerLineHeight, _Range.rangeTokens.leftContentMargin, _Range.rangeTokens.rightContentMargin, _Range.rangeTokens.labelOffset, _Range.rangeTokens.labelFontFamily, _Range.rangeTokens.labelFontStyle, _Range.rangeTokens.labelFontSize, _Range.rangeTokens.labelFontWeight, _Range.rangeTokens.labelLetterSpacing, _Range.rangeTokens.labelLineHeight, _Range.rangeTokens.textFieldHeight, _Range.rangeTokens.textFieldBorderRadius, _Range.rangeTokens.textFieldPadding, _Range.rangeTokens.textFieldFontFamily, _Range.rangeTokens.textFieldFontStyle, _Range.rangeTokens.textFieldFontSize, _Range.rangeTokens.textFieldFontWeight, _Range.rangeTokens.textFieldLetterSpacing, _Range.rangeTokens.textFieldLineHeight, _Range.rangeTokens.leftHelperOffset, _Range.rangeTokens.leftHelperFontFamily, _Range.rangeTokens.leftHelperFontStyle, _Range.rangeTokens.leftHelperFontSize, _Range.rangeTokens.leftHelperFontWeight, _Range.rangeTokens.leftHelperLetterSpacing, _Range.rangeTokens.leftHelperLineHeight, _Range.rangeTokens.textFieldLeftContentMargin, _Range.rangeTokens.textFieldRightContentMargin, _Range.rangeTokens.textFieldTextBeforeMargin, _Range.rangeTokens.textFieldTextAfterMargin)
23
+ },
24
+ disabled: {
25
+ "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Range.rangeTokens.disabledOpacity)
26
+ },
27
+ readOnly: {
28
+ "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-transparent-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Range.rangeTokens.backgroundReadOnly, _Range.rangeTokens.labelColorReadOnly, _Range.rangeTokens.leftHelperColorReadOnly, _Range.rangeTokens.dividerColorReadOnly, _Range.rangeTokens.textFieldColorReadOnly, _Range.rangeTokens.textFieldBackgroundColorReadOnly, _Range.rangeTokens.textFieldPlaceholderColorReadOnly)
29
+ }
30
+ }
31
+ };
@@ -0,0 +1,11 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.Range = void 0;
7
+ var _engines = /*#__PURE__*/require("../../../../engines");
8
+ var _Range = /*#__PURE__*/require("../../../../components/Range");
9
+ var _Range2 = /*#__PURE__*/require("./Range.config");
10
+ var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Range.rangeConfig, _Range2.config);
11
+ var Range = exports.Range = /*#__PURE__*/(0, _engines.component)(mergedConfig);
@@ -0,0 +1,312 @@
1
+ import React, { ChangeEvent, ComponentProps, Dispatch, SetStateAction, useState } from 'react';
2
+ import type { StoryObj, Meta } from '@storybook/react';
3
+ import { action } from '@storybook/addon-actions';
4
+ import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
5
+
6
+ import { WithTheme } from '../../../_helpers';
7
+ import { IconChevronLeft } from '../../../../components/_Icon';
8
+ import { IconButton } from '../IconButton/IconButton';
9
+
10
+ import { Range } from './Range';
11
+
12
+ const onChangeFirstValue = action('onChangeFirstValue');
13
+ const onChangeSecondValue = action('onChangeSecondValue');
14
+ const onSearchFirstValue = action('onSearchFirstValue');
15
+ const onSearchSecondValue = action('onSearchSecondValue');
16
+ const onFocusFirstTextfield = action('onFocusFirstTextfield');
17
+ const onFocusSecondTextfield = action('onFocusSecondTextfield');
18
+ const onBlurFirstTextfield = action('onBlurFirstTextfield');
19
+ const onBlurSecondTextfield = action('onBlurSecondTextfield');
20
+
21
+ const sizes = ['l', 'm', 's', 'xs'];
22
+ const views = ['default'];
23
+ const dividers = ['none', 'dash', 'icon'];
24
+
25
+ const meta: Meta<typeof Range> = {
26
+ title: 'plasma_b2c/Range',
27
+ component: Range,
28
+ decorators: [WithTheme],
29
+ argTypes: {
30
+ view: {
31
+ options: views,
32
+ control: {
33
+ type: 'inline-radio',
34
+ },
35
+ },
36
+ size: {
37
+ options: sizes,
38
+ control: {
39
+ type: 'inline-radio',
40
+ },
41
+ },
42
+ },
43
+ };
44
+
45
+ export default meta;
46
+
47
+ type StoryPropsDefault = ComponentProps<typeof Range> & {
48
+ enableContentLeft: boolean;
49
+ enableContentRight: boolean;
50
+ enableFirstTextfieldContentLeft: boolean;
51
+ enableSecondTextfieldContentLeft: boolean;
52
+ enableFirstTextfieldContentRight: boolean;
53
+ enableSecondTextfieldContentRight: boolean;
54
+ };
55
+
56
+ const getSizeForIcon = (size) => {
57
+ const map = {
58
+ m: 's',
59
+ l: 's',
60
+ s: 's',
61
+ xs: 'xs',
62
+ };
63
+ if (map[size]) {
64
+ return map[size];
65
+ }
66
+
67
+ return size;
68
+ };
69
+
70
+ const ActionButton = ({ size }) => {
71
+ return (
72
+ <IconButton view="clear" size={size}>
73
+ <IconChevronLeft color="inherit" size={getSizeForIcon(size)} />
74
+ </IconButton>
75
+ );
76
+ };
77
+
78
+ const StoryDefault = ({
79
+ dividerVariant,
80
+ enableContentLeft,
81
+ enableContentRight,
82
+ firstTextfieldTextBefore,
83
+ secondTextfieldTextBefore,
84
+ enableFirstTextfieldContentLeft,
85
+ enableSecondTextfieldContentLeft,
86
+ enableFirstTextfieldContentRight,
87
+ enableSecondTextfieldContentRight,
88
+ size,
89
+ ...rest
90
+ }: StoryPropsDefault) => {
91
+ const [firstValue, setFirstValue] = useState('');
92
+ const [secondValue, setSecondValue] = useState('');
93
+
94
+ const iconSize = size === 'xs' ? 'xs' : 's';
95
+ const showDividerIcon = dividerVariant === 'icon';
96
+ const showDefaultTextBefore = dividerVariant === 'none';
97
+
98
+ const dividerIconProps = {
99
+ dividerIcon: showDividerIcon ? <IconPlaceholder size="s" /> : null,
100
+ dividerVariant,
101
+ };
102
+
103
+ return (
104
+ <Range
105
+ size={size}
106
+ firstValue={firstValue}
107
+ secondValue={secondValue}
108
+ contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
109
+ contentRight={enableContentRight ? <ActionButton size={size} /> : undefined}
110
+ firstTextfieldContentLeft={
111
+ enableFirstTextfieldContentLeft ? <IconPlaceholder size={iconSize} /> : undefined
112
+ }
113
+ firstTextfieldContentRight={
114
+ enableFirstTextfieldContentRight ? <IconPlaceholder size={iconSize} /> : undefined
115
+ }
116
+ secondTextfieldContentLeft={
117
+ enableSecondTextfieldContentLeft ? <IconPlaceholder size={iconSize} /> : undefined
118
+ }
119
+ secondTextfieldContentRight={
120
+ enableSecondTextfieldContentRight ? <IconPlaceholder size={iconSize} /> : undefined
121
+ }
122
+ firstTextfieldTextBefore={
123
+ showDefaultTextBefore ? firstTextfieldTextBefore || 'С' : firstTextfieldTextBefore
124
+ }
125
+ secondTextfieldTextBefore={
126
+ showDefaultTextBefore ? secondTextfieldTextBefore || 'ПО' : secondTextfieldTextBefore
127
+ }
128
+ onChangeFirstValue={(e) => {
129
+ setFirstValue(e.target.value);
130
+ onChangeFirstValue(e, e.target.value);
131
+ }}
132
+ onChangeSecondValue={(e) => {
133
+ setSecondValue(e.target.value);
134
+ onChangeSecondValue(e, e.target.value);
135
+ }}
136
+ onSearchFirstValue={onSearchFirstValue}
137
+ onSearchSecondValue={onSearchSecondValue}
138
+ onFocusFirstTextfield={onFocusFirstTextfield}
139
+ onFocusSecondTextfield={onFocusSecondTextfield}
140
+ onBlurFirstTextfield={onBlurFirstTextfield}
141
+ onBlurSecondTextfield={onBlurSecondTextfield}
142
+ {...dividerIconProps}
143
+ {...rest}
144
+ />
145
+ );
146
+ };
147
+
148
+ export const Default: StoryObj<StoryPropsDefault> = {
149
+ argTypes: {
150
+ dividerVariant: {
151
+ options: dividers,
152
+ control: {
153
+ type: 'inline-radio',
154
+ },
155
+ },
156
+ },
157
+ args: {
158
+ label: 'Лейбл',
159
+ leftHelper: 'Подсказка к полю',
160
+ firstPlaceholder: 'Заполните поле 1',
161
+ secondPlaceholder: 'Заполните поле 2',
162
+ size: 'l',
163
+ view: 'default',
164
+ disabled: false,
165
+ readOnly: false,
166
+ firstTextfieldTextBefore: 'С',
167
+ secondTextfieldTextBefore: 'ПО',
168
+ enableContentLeft: true,
169
+ enableContentRight: true,
170
+ dividerVariant: 'dash',
171
+ enableFirstTextfieldContentLeft: false,
172
+ enableFirstTextfieldContentRight: false,
173
+ enableSecondTextfieldContentLeft: false,
174
+ enableSecondTextfieldContentRight: false,
175
+ firstValueError: false,
176
+ secondValueError: false,
177
+ firstValueSuccess: false,
178
+ secondValueSuccess: false,
179
+ },
180
+ render: (args) => <StoryDefault {...args} />,
181
+ };
182
+
183
+ const StoryDemo = ({ enableContentLeft, enableContentRight, size, ...rest }: StoryPropsDefault) => {
184
+ const [firstValue, setFirstValue] = useState('');
185
+ const [secondValue, setSecondValue] = useState('');
186
+
187
+ const [firstValueError, setFirstValueError] = useState(false);
188
+ const [secondValueError, setSecondValueError] = useState(false);
189
+
190
+ const [firstValueSuccess, setFirstValueSuccess] = useState(false);
191
+ const [secondValueSuccess, setSecondValueSuccess] = useState(false);
192
+
193
+ const checkValue = (value: string) => /^([1-9][0-9]*|)$/.test(value);
194
+
195
+ const handleChangeValue = (
196
+ e: ChangeEvent<HTMLInputElement>,
197
+ setter: Dispatch<SetStateAction<string>>,
198
+ error: boolean,
199
+ errorSetter: Dispatch<SetStateAction<boolean>>,
200
+ success: boolean,
201
+ successSetter: Dispatch<SetStateAction<boolean>>,
202
+ ) => {
203
+ const { value } = e.target;
204
+ if (!checkValue(value)) {
205
+ return;
206
+ }
207
+
208
+ if (error) {
209
+ errorSetter(false);
210
+ }
211
+
212
+ if (success) {
213
+ successSetter(false);
214
+ }
215
+
216
+ setter(value);
217
+ };
218
+
219
+ const firstValueConstraint = (value: number) =>
220
+ value <= 0 || value >= 9 || (secondValue && value >= Number(secondValue) && !secondValueError);
221
+ const secondValueConstraint = (value: number) =>
222
+ value <= 0 || value > 10 || (firstValue && value <= Number(firstValue) && !firstValueError);
223
+
224
+ const handleCommitValue = (
225
+ value: string,
226
+ constraint: (currentValue: number) => boolean,
227
+ errorSetter: Dispatch<SetStateAction<boolean>>,
228
+ successSetter: Dispatch<SetStateAction<boolean>>,
229
+ ) => {
230
+ if (!value) {
231
+ return;
232
+ }
233
+
234
+ if (!checkValue(value)) {
235
+ return errorSetter(true);
236
+ }
237
+
238
+ if (constraint(Number(value))) {
239
+ return errorSetter(true);
240
+ }
241
+
242
+ successSetter(true);
243
+ };
244
+
245
+ const iconSize = size === 'xs' ? 'xs' : 's';
246
+
247
+ return (
248
+ <Range
249
+ dividerVariant="dash"
250
+ size={size}
251
+ firstValue={firstValue}
252
+ secondValue={secondValue}
253
+ firstValueError={firstValueError}
254
+ secondValueError={secondValueError}
255
+ firstValueSuccess={firstValueSuccess}
256
+ secondValueSuccess={secondValueSuccess}
257
+ contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
258
+ contentRight={enableContentRight ? <ActionButton size={size} /> : undefined}
259
+ onChangeFirstValue={(e) => {
260
+ handleChangeValue(
261
+ e,
262
+ setFirstValue,
263
+ firstValueError,
264
+ setFirstValueError,
265
+ firstValueSuccess,
266
+ setFirstValueSuccess,
267
+ );
268
+ }}
269
+ onChangeSecondValue={(e) => {
270
+ handleChangeValue(
271
+ e,
272
+ setSecondValue,
273
+ secondValueError,
274
+ setSecondValueError,
275
+ secondValueSuccess,
276
+ setSecondValueSuccess,
277
+ );
278
+ }}
279
+ onSearchFirstValue={(e) => {
280
+ const { value } = e.target as HTMLInputElement;
281
+ handleCommitValue(value, firstValueConstraint, setFirstValueError, setFirstValueSuccess);
282
+ }}
283
+ onSearchSecondValue={(e) => {
284
+ const { value } = e.target as HTMLInputElement;
285
+ handleCommitValue(value, secondValueConstraint, setSecondValueError, setSecondValueSuccess);
286
+ }}
287
+ onFocusFirstTextfield={onFocusFirstTextfield}
288
+ onFocusSecondTextfield={onFocusSecondTextfield}
289
+ onBlurFirstTextfield={onBlurFirstTextfield}
290
+ onBlurSecondTextfield={onBlurSecondTextfield}
291
+ {...rest}
292
+ />
293
+ );
294
+ };
295
+
296
+ export const Demo: StoryObj<StoryPropsDefault> = {
297
+ args: {
298
+ label: 'Введите кол-во товара',
299
+ leftHelper: 'Кол-во товара не может быть меньше 1 и превышать 10',
300
+ firstPlaceholder: '1',
301
+ secondPlaceholder: '5',
302
+ size: 'l',
303
+ view: 'default',
304
+ disabled: false,
305
+ readOnly: false,
306
+ firstTextfieldTextBefore: '',
307
+ secondTextfieldTextBefore: '',
308
+ enableContentLeft: true,
309
+ enableContentRight: true,
310
+ },
311
+ render: (args) => <StoryDemo {...args} />,
312
+ };
@@ -14,19 +14,19 @@ var config = exports.config = {
14
14
  },
15
15
  variations: {
16
16
  view: {
17
- "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-secondary);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":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.backgroundColorFocus, _TextField.textFieldTokens.caretColor, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.labelColor, _TextField.textFieldTokens.leftHelperColor, _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),
17
+ "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-secondary);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-secondary);", ":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.backgroundColorFocus, _TextField.textFieldTokens.caretColor, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.textBeforeColor, _TextField.textFieldTokens.textAfterColor, _TextField.textFieldTokens.labelColor, _TextField.textFieldTokens.leftHelperColor, _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
  // TODO заменить --surface-transparent-positive на корректный токен
19
- positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-colors-primary);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-positive);", ":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.backgroundColorFocus, _TextField.textFieldTokens.caretColor, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.labelColor, _TextField.textFieldTokens.leftHelperColor, _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
+ positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-colors-primary);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-positive);", ":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.backgroundColorFocus, _TextField.textFieldTokens.caretColor, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.textBeforeColor, _TextField.textFieldTokens.textAfterColor, _TextField.textFieldTokens.labelColor, _TextField.textFieldTokens.leftHelperColor, _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
  // // TODO заменить --surface-transparent-warning на корректный токен
21
- warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-colors-primary);", ":var(--surface-transparent-warning);", ":var(--surface-transparent-warning-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-warning);", ":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.backgroundColorFocus, _TextField.textFieldTokens.caretColor, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.labelColor, _TextField.textFieldTokens.leftHelperColor, _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
+ warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-colors-primary);", ":var(--surface-transparent-warning);", ":var(--surface-transparent-warning-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-warning);", ":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.backgroundColorFocus, _TextField.textFieldTokens.caretColor, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.textBeforeColor, _TextField.textFieldTokens.textAfterColor, _TextField.textFieldTokens.labelColor, _TextField.textFieldTokens.leftHelperColor, _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),
22
22
  // // TODO заменить --surface-transparent-negative на корректный токен
23
- negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-colors-primary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-negative);", ":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.backgroundColorFocus, _TextField.textFieldTokens.caretColor, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.labelColor, _TextField.textFieldTokens.leftHelperColor, _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)
23
+ negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-colors-primary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-negative);", ":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.backgroundColorFocus, _TextField.textFieldTokens.caretColor, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.textBeforeColor, _TextField.textFieldTokens.textAfterColor, _TextField.textFieldTokens.labelColor, _TextField.textFieldTokens.leftHelperColor, _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)
24
24
  },
25
25
  size: {
26
- l: /*#__PURE__*/(0, _styledComponents.css)(["", ":3.5rem;", ":1.0625rem 1.125rem 1.0625rem 1.125rem;", ":0.375rem;", ":0.875rem;", ":-0.0625rem 0.5rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":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.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
- m: /*#__PURE__*/(0, _styledComponents.css)(["", ":3rem;", ":0.875rem 1rem 0.875rem 1rem;", ":0.375rem;", ":0.75rem;", ":-0.125rem 0.375rem -0.125rem -0.125rem;", ":-0.125rem -0.125rem -0.125rem 0.75rem;", ":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.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),
28
- s: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.5rem;", ":0.6875rem 0.875rem 0.6875rem 0.875rem;", ":0.375rem;", ":0.625rem;", ":-0.1875rem 0.25rem -0.1875rem -0.125rem;", ":-0.1875rem -0.125rem -0.1875rem 0.75rem;", ":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.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),
29
- xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":2rem;", ":0.5625rem 0.625rem 0.5625rem 0.625rem;", ":0.375rem;", ":0.5rem;", ":-0.0625rem 0.25rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":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.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
+ l: /*#__PURE__*/(0, _styledComponents.css)(["", ":3.5rem;", ":1.0625rem 1.125rem 1.0625rem 1.125rem;", ":0.375rem;", ":0.875rem;", ":-0.0625rem 0.5rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.5625rem 0 0.125rem 0;", ":1.5625rem 0 0.5625rem 0;", ":0.25rem;", ":0.5rem;", ":auto;", ":2.75rem;", ":0.75rem;", ":1rem;", ":0.625rem;", ":0rem;", ":1.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], _TextField.textFieldTokens.height, _TextField.textFieldTokens.padding, _TextField.textFieldTokens.paddingWithChips, _TextField.textFieldTokens.borderRadius, _TextField.textFieldTokens.leftContentMargin, _TextField.textFieldTokens.rightContentMargin, _TextField.textFieldTokens.textBeforeMargin, _TextField.textFieldTokens.textAfterMargin, _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
+ m: /*#__PURE__*/(0, _styledComponents.css)(["", ":3rem;", ":0.875rem 1rem 0.875rem 1rem;", ":0.375rem;", ":0.75rem;", ":-0.125rem 0.375rem -0.125rem -0.125rem;", ":-0.125rem -0.125rem -0.125rem 0.75rem;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.625rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.375rem 0 0.125rem 0;", ":1.375rem 0 0.375rem 0;", ":0.25rem;", ":0.375rem;", ":auto;", ":2.25rem;", ":0.625rem;", ":0.875rem;", ":0.5rem;", ":0rem;", ":1.25rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], _TextField.textFieldTokens.height, _TextField.textFieldTokens.padding, _TextField.textFieldTokens.paddingWithChips, _TextField.textFieldTokens.borderRadius, _TextField.textFieldTokens.leftContentMargin, _TextField.textFieldTokens.rightContentMargin, _TextField.textFieldTokens.textBeforeMargin, _TextField.textFieldTokens.textAfterMargin, _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),
28
+ s: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.5rem;", ":0.6875rem 0.875rem 0.6875rem 0.875rem;", ":0.375rem;", ":0.625rem;", ":-0.1875rem 0.25rem -0.1875rem -0.125rem;", ":-0.1875rem -0.125rem -0.1875rem 0.75rem;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.3125rem 0 0 0;", ":1.0625rem 0 0.3125rem 0;", ":0.25rem;", ":0.25rem;", ":auto;", ":1.75rem;", ":0.5rem;", ":0.75rem;", ":0.375rem;", ":0rem;", ":1rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], _TextField.textFieldTokens.height, _TextField.textFieldTokens.padding, _TextField.textFieldTokens.paddingWithChips, _TextField.textFieldTokens.borderRadius, _TextField.textFieldTokens.leftContentMargin, _TextField.textFieldTokens.rightContentMargin, _TextField.textFieldTokens.textBeforeMargin, _TextField.textFieldTokens.textAfterMargin, _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),
29
+ xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":2rem;", ":0.5625rem 0.625rem 0.5625rem 0.625rem;", ":0.375rem;", ":0.5rem;", ":-0.0625rem 0.25rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.375rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.3125rem 0 0 0;", ":1.0625rem 0 0.3125rem 0;", ":0.25rem;", ":0.125rem;", ":auto;", ":1.25rem;", ":0.375rem;", ":0.625rem;", ":0.25rem;", ":0rem;", ":0.75rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], _TextField.textFieldTokens.height, _TextField.textFieldTokens.padding, _TextField.textFieldTokens.paddingWithChips, _TextField.textFieldTokens.borderRadius, _TextField.textFieldTokens.leftContentMargin, _TextField.textFieldTokens.rightContentMargin, _TextField.textFieldTokens.textBeforeMargin, _TextField.textFieldTokens.textAfterMargin, _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)
30
30
  },
31
31
  labelPlacement: {
32
32
  inner: [_TextField.textField_labelPlacement_inner, /*#__PURE__*/(0, _styledComponents.css)(["&.", "{", ":var(--plasma-input-label-color,var(--plasma-input-placeholder-color,var(--plasma-colors-secondary)));", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);}"], _TextField.textField_labelPlacement_inner, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.labelInnerFontFamily, _TextField.textFieldTokens.labelInnerFontSize, _TextField.textFieldTokens.labelInnerFontStyle, _TextField.textFieldTokens.labelInnerFontWeight, _TextField.textFieldTokens.labelInnerLetterSpacing, _TextField.textFieldTokens.labelInnerLineHeight)],
@@ -105,6 +105,8 @@ export const Default: StoryObj<StoryPropsDefault> = {
105
105
  view: 'default',
106
106
  label: 'Лейбл',
107
107
  labelPlacement: 'outer',
108
+ textBefore: '',
109
+ textAfter: '',
108
110
  placeholder: 'Заполните поле',
109
111
  leftHelper: 'Подсказка к полю',
110
112
  disabled: false,