@salutejs/plasma-new-hope 0.329.1-canary.2074.16163189225.0 → 0.329.1-canary.2078.16193701703.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (80) hide show
  1. package/cjs/components/Drawer/Drawer.css +2 -2
  2. package/cjs/components/Drawer/Drawer.styles.js +1 -1
  3. package/cjs/components/Drawer/Drawer.styles.js.map +1 -1
  4. package/cjs/components/Drawer/Drawer.styles_11rwbjh.css +2 -0
  5. package/cjs/components/TextArea/TextArea.js +22 -8
  6. package/cjs/components/TextArea/TextArea.js.map +1 -1
  7. package/cjs/components/TextArea/TextArea.styles.js +101 -64
  8. package/cjs/components/TextArea/TextArea.styles.js.map +1 -1
  9. package/cjs/components/TextArea/TextArea.styles_exqsyh.css +24 -0
  10. package/cjs/components/TextArea/TextArea.tokens.js +3 -1
  11. package/cjs/components/TextArea/TextArea.tokens.js.map +1 -1
  12. package/cjs/components/TextArea/TextArea_c31ipk.css +1 -0
  13. package/cjs/components/TextArea/ui/Hint/Hint.css +22 -18
  14. package/cjs/components/TextArea/variations/_clear/base.js +1 -1
  15. package/cjs/components/TextArea/variations/_clear/base_1vo4ba5.css +1 -0
  16. package/cjs/components/TextArea/variations/_disabled/base.js +1 -1
  17. package/cjs/components/TextArea/variations/_disabled/base_s6ttw.css +1 -0
  18. package/cjs/components/TextArea/variations/_read-only/base.js +1 -1
  19. package/cjs/components/TextArea/variations/_read-only/{base_1v0syh0.css → base_vk912g.css} +1 -1
  20. package/cjs/index.css +29 -25
  21. package/emotion/cjs/components/Drawer/Drawer.styles.js +5 -5
  22. package/emotion/cjs/components/TextArea/TextArea.js +20 -8
  23. package/emotion/cjs/components/TextArea/TextArea.styles.js +78 -41
  24. package/emotion/cjs/components/TextArea/TextArea.tokens.js +3 -1
  25. package/emotion/cjs/components/TextArea/mixins/applyDynamicLabel.js +2 -2
  26. package/emotion/es/components/Drawer/Drawer.styles.js +5 -5
  27. package/emotion/es/components/TextArea/TextArea.js +21 -9
  28. package/emotion/es/components/TextArea/TextArea.styles.js +66 -41
  29. package/emotion/es/components/TextArea/TextArea.tokens.js +3 -1
  30. package/emotion/es/components/TextArea/mixins/applyDynamicLabel.js +2 -2
  31. package/es/components/Drawer/Drawer.css +2 -2
  32. package/es/components/Drawer/Drawer.styles.js +1 -1
  33. package/es/components/Drawer/Drawer.styles.js.map +1 -1
  34. package/es/components/Drawer/Drawer.styles_11rwbjh.css +2 -0
  35. package/es/components/TextArea/TextArea.js +23 -9
  36. package/es/components/TextArea/TextArea.js.map +1 -1
  37. package/es/components/TextArea/TextArea.styles.js +100 -65
  38. package/es/components/TextArea/TextArea.styles.js.map +1 -1
  39. package/es/components/TextArea/TextArea.styles_exqsyh.css +24 -0
  40. package/es/components/TextArea/TextArea.tokens.js +3 -1
  41. package/es/components/TextArea/TextArea.tokens.js.map +1 -1
  42. package/es/components/TextArea/TextArea_c31ipk.css +1 -0
  43. package/es/components/TextArea/ui/Hint/Hint.css +22 -18
  44. package/es/components/TextArea/variations/_clear/base.js +1 -1
  45. package/es/components/TextArea/variations/_clear/base_1vo4ba5.css +1 -0
  46. package/es/components/TextArea/variations/_disabled/base.js +1 -1
  47. package/es/components/TextArea/variations/_disabled/base_s6ttw.css +1 -0
  48. package/es/components/TextArea/variations/_read-only/base.js +1 -1
  49. package/es/components/TextArea/variations/_read-only/{base_1v0syh0.css → base_vk912g.css} +1 -1
  50. package/es/index.css +29 -25
  51. package/package.json +4 -4
  52. package/styled-components/cjs/components/Drawer/Drawer.styles.js +3 -3
  53. package/styled-components/cjs/components/TextArea/TextArea.js +19 -7
  54. package/styled-components/cjs/components/TextArea/TextArea.styles.js +76 -28
  55. package/styled-components/cjs/components/TextArea/TextArea.tokens.js +3 -1
  56. package/styled-components/cjs/components/TextArea/mixins/applyDynamicLabel.js +2 -2
  57. package/styled-components/es/components/Drawer/Drawer.styles.js +3 -3
  58. package/styled-components/es/components/TextArea/TextArea.js +20 -8
  59. package/styled-components/es/components/TextArea/TextArea.styles.js +64 -28
  60. package/styled-components/es/components/TextArea/TextArea.tokens.js +3 -1
  61. package/styled-components/es/components/TextArea/mixins/applyDynamicLabel.js +2 -2
  62. package/types/components/Drawer/Drawer.styles.d.ts.map +1 -1
  63. package/types/components/TextArea/TextArea.d.ts.map +1 -1
  64. package/types/components/TextArea/TextArea.styles.d.ts +10 -1
  65. package/types/components/TextArea/TextArea.styles.d.ts.map +1 -1
  66. package/types/components/TextArea/TextArea.tokens.d.ts +2 -0
  67. package/types/components/TextArea/TextArea.tokens.d.ts.map +1 -1
  68. package/types/components/TextArea/TextArea.types.d.ts +5 -0
  69. package/types/components/TextArea/TextArea.types.d.ts.map +1 -1
  70. package/types/components/TextArea/mixins/applyDynamicLabel.d.ts.map +1 -1
  71. package/cjs/components/Drawer/Drawer.styles_1wcuvns.css +0 -2
  72. package/cjs/components/TextArea/TextArea.styles_1r7xix5.css +0 -20
  73. package/cjs/components/TextArea/TextArea_e0xkpd.css +0 -1
  74. package/cjs/components/TextArea/variations/_clear/base_16hm89e.css +0 -1
  75. package/cjs/components/TextArea/variations/_disabled/base_1bn0zc9.css +0 -1
  76. package/es/components/Drawer/Drawer.styles_1wcuvns.css +0 -2
  77. package/es/components/TextArea/TextArea.styles_1r7xix5.css +0 -20
  78. package/es/components/TextArea/TextArea_e0xkpd.css +0 -1
  79. package/es/components/TextArea/variations/_clear/base_16hm89e.css +0 -1
  80. package/es/components/TextArea/variations/_disabled/base_1bn0zc9.css +0 -1
@@ -9,6 +9,12 @@ function _export(target, all) {
9
9
  });
10
10
  }
11
11
  _export(exports, {
12
+ get Divider () {
13
+ return Divider;
14
+ },
15
+ get DividerWrapper () {
16
+ return DividerWrapper;
17
+ },
12
18
  get Hint () {
13
19
  return Hint;
14
20
  },
@@ -27,6 +33,12 @@ _export(exports, {
27
33
  get StyledContent () {
28
34
  return StyledContent;
29
35
  },
36
+ get StyledContentWrapper () {
37
+ return StyledContentWrapper;
38
+ },
39
+ get StyledHeaderSlot () {
40
+ return StyledHeaderSlot;
41
+ },
30
42
  get StyledHelpers () {
31
43
  return StyledHelpers;
32
44
  },
@@ -84,13 +96,13 @@ var mergedConfig = (0, _engines.mergeConfig)(_Tooltip.tooltipConfig);
84
96
  var Tooltip = (0, _engines.component)(mergedConfig);
85
97
  var Hint = (0, _styledcomponents.default)(Tooltip).withConfig({
86
98
  displayName: "TextArea.styles__Hint",
87
- componentId: "sc-2ff414ff-0"
99
+ componentId: "sc-5fcd62a1-0"
88
100
  })([
89
101
  ""
90
102
  ]);
91
103
  var OuterLabelWrapper = _styledcomponents.default.div.withConfig({
92
104
  displayName: "TextArea.styles__OuterLabelWrapper",
93
- componentId: "sc-2ff414ff-1"
105
+ componentId: "sc-5fcd62a1-1"
94
106
  })([
95
107
  "display:flex;align-items:center;max-width:",
96
108
  ";margin-bottom:",
@@ -104,7 +116,7 @@ var OuterLabelWrapper = _styledcomponents.default.div.withConfig({
104
116
  });
105
117
  var StyledLabel = _styledcomponents.default.div.withConfig({
106
118
  displayName: "TextArea.styles__StyledLabel",
107
- componentId: "sc-2ff414ff-2"
119
+ componentId: "sc-5fcd62a1-2"
108
120
  })([
109
121
  "position:relative;display:inline-flex;color:var(",
110
122
  ",var(",
@@ -124,7 +136,7 @@ var StyledLabel = _styledcomponents.default.div.withConfig({
124
136
  ], _TextAreatokens.tokens.labelOuterColor, _TextAreatokens.tokens.inputColor, _TextAreatokens.tokens.labelOuterFontFamily, _TextAreatokens.tokens.inputFontFamily, _TextAreatokens.tokens.labelOuterFontSize, _TextAreatokens.tokens.inputFontSize, _TextAreatokens.tokens.labelOuterFontStyle, _TextAreatokens.tokens.inputFontStyle, _TextAreatokens.tokens.labelOuterFontWeight, _TextAreatokens.tokens.inputFontWeight, _TextAreatokens.tokens.labelOuterLetterSpacing, _TextAreatokens.tokens.inputLetterSpacing, _TextAreatokens.tokens.labelOuterLineHeight, _TextAreatokens.tokens.inputLineHeight);
125
137
  var TitleCaption = _styledcomponents.default.div.withConfig({
126
138
  displayName: "TextArea.styles__TitleCaption",
127
- componentId: "sc-2ff414ff-3"
139
+ componentId: "sc-5fcd62a1-3"
128
140
  })([
129
141
  "display:inline-block;margin-left:auto;font-family:var(",
130
142
  ");font-size:var(",
@@ -136,13 +148,13 @@ var TitleCaption = _styledcomponents.default.div.withConfig({
136
148
  ], _TextAreatokens.tokens.titleCaptionFontFamily, _TextAreatokens.tokens.titleCaptionFontSize, _TextAreatokens.tokens.titleCaptionFontStyle, _TextAreatokens.tokens.titleCaptionFontWeight, _TextAreatokens.tokens.titleCaptionLetterSpacing, _TextAreatokens.tokens.titleCaptionLineHeight);
137
149
  var StyledIndicatorWrapper = _styledcomponents.default.div.withConfig({
138
150
  displayName: "TextArea.styles__StyledIndicatorWrapper",
139
- componentId: "sc-2ff414ff-4"
151
+ componentId: "sc-5fcd62a1-4"
140
152
  })([
141
153
  "position:relative;display:inline-flex;align-items:center;"
142
154
  ]);
143
155
  var StyledOptionalText = _styledcomponents.default.span.withConfig({
144
156
  displayName: "TextArea.styles__StyledOptionalText",
145
- componentId: "sc-2ff414ff-5"
157
+ componentId: "sc-5fcd62a1-5"
146
158
  })([
147
159
  "color:var(",
148
160
  ");font-family:",
@@ -173,7 +185,7 @@ var StyledOptionalText = _styledcomponents.default.span.withConfig({
173
185
  });
174
186
  var StyledHintWrapper = _styledcomponents.default.div.withConfig({
175
187
  displayName: "TextArea.styles__StyledHintWrapper",
176
- componentId: "sc-2ff414ff-6"
188
+ componentId: "sc-5fcd62a1-6"
177
189
  })([
178
190
  "display:inline-flex;line-height:0;margin:var(",
179
191
  ");&.",
@@ -182,7 +194,7 @@ var StyledHintWrapper = _styledcomponents.default.div.withConfig({
182
194
  ], _TextAreatokens.tokens.hintMargin, _TextAreatokens.classes.innerLabelPlacement, _TextAreatokens.tokens.hintInnerLabelPlacementOffset);
183
195
  var HintTargetWrapper = _styledcomponents.default.div.withConfig({
184
196
  displayName: "TextArea.styles__HintTargetWrapper",
185
- componentId: "sc-2ff414ff-7"
197
+ componentId: "sc-5fcd62a1-7"
186
198
  })([
187
199
  "color:var(",
188
200
  ");width:var(",
@@ -191,40 +203,76 @@ var HintTargetWrapper = _styledcomponents.default.div.withConfig({
191
203
  ], _TextAreatokens.tokens.hintIconColor, _TextAreatokens.tokens.hintTargetSize, _TextAreatokens.tokens.hintTargetSize);
192
204
  var HintIconWrapper = _styledcomponents.default.div.withConfig({
193
205
  displayName: "TextArea.styles__HintIconWrapper",
194
- componentId: "sc-2ff414ff-8"
206
+ componentId: "sc-5fcd62a1-8"
195
207
  })([
196
208
  ""
197
209
  ]);
198
210
  var StyledTextAreaWrapper = _styledcomponents.default.div.withConfig({
199
211
  displayName: "TextArea.styles__StyledTextAreaWrapper",
200
- componentId: "sc-2ff414ff-9"
212
+ componentId: "sc-5fcd62a1-9"
201
213
  })([
202
- "background-color:var(",
203
- ");padding-top:var(",
204
- ");padding-bottom:",
214
+ "display:flex;flex-direction:column;background-color:var(",
215
+ ");padding-top:",
216
+ ";padding-bottom:",
205
217
  ";border-radius:",
206
218
  ";"
207
- ], _TextAreatokens.tokens.inputBackgroundColor, _TextAreatokens.tokens.inputPaddingTop, function(param) {
219
+ ], _TextAreatokens.tokens.inputBackgroundColor, function(param) {
220
+ var hasHeader = param.hasHeader;
221
+ return hasHeader ? 'unset' : "var(".concat(_TextAreatokens.tokens.inputPaddingTop, ")");
222
+ }, function(param) {
208
223
  var hasHelper = param.hasHelper;
209
224
  return hasHelper ? "var(".concat(_TextAreatokens.tokens.inputPaddingBottomWithHelpers, ")") : "var(".concat(_TextAreatokens.tokens.inputPaddingBottom, ")");
210
225
  }, function(param) {
211
226
  var hasHelper = param.hasHelper;
212
227
  return hasHelper ? "var(".concat(_TextAreatokens.tokens.borderRadiusWithHelpers, ")") : "var(".concat(_TextAreatokens.tokens.borderRadius, ")");
213
228
  });
229
+ var StyledContentWrapper = _styledcomponents.default.div.withConfig({
230
+ displayName: "TextArea.styles__StyledContentWrapper",
231
+ componentId: "sc-5fcd62a1-10"
232
+ })([
233
+ "position:relative;width:100%;height:0;padding-top:",
234
+ ";"
235
+ ], function(param) {
236
+ var hasHeader = param.hasHeader;
237
+ return hasHeader ? "var(".concat(_TextAreatokens.tokens.inputPaddingTop, ")") : 'unset';
238
+ });
214
239
  var StyledContent = _styledcomponents.default.div.withConfig({
215
240
  displayName: "TextArea.styles__StyledContent",
216
- componentId: "sc-2ff414ff-10"
241
+ componentId: "sc-5fcd62a1-11"
217
242
  })([
218
- "position:absolute;display:flex;align-items:center;bottom:0;z-index:1;color:var(",
243
+ "position:absolute;display:flex;align-items:center;z-index:1;color:var(",
219
244
  ",var(",
220
- "));top:var(",
221
- ");right:var(",
245
+ "));top:",
246
+ ";right:var(",
222
247
  ");height:var(",
223
248
  ");"
224
- ], _TextAreatokens.tokens.rightContentColor, _TextAreatokens.tokens.inputColor, _TextAreatokens.tokens.rightContentTop, _TextAreatokens.tokens.rightContentRight, _TextAreatokens.tokens.rightContentHeight);
249
+ ], _TextAreatokens.tokens.rightContentColor, _TextAreatokens.tokens.inputColor, function(param) {
250
+ var hasHeader = param.hasHeader;
251
+ return hasHeader ? "var(".concat(_TextAreatokens.tokens.inputPaddingTop, ")") : "var(".concat(_TextAreatokens.tokens.rightContentTop, ")");
252
+ }, _TextAreatokens.tokens.rightContentRight, _TextAreatokens.tokens.rightContentHeight);
253
+ var StyledHeaderSlot = _styledcomponents.default.div.withConfig({
254
+ displayName: "TextArea.styles__StyledHeaderSlot",
255
+ componentId: "sc-5fcd62a1-12"
256
+ })([
257
+ "display:flex;flex-direction:column;"
258
+ ]);
259
+ var DividerWrapper = _styledcomponents.default.div.withConfig({
260
+ displayName: "TextArea.styles__DividerWrapper",
261
+ componentId: "sc-5fcd62a1-13"
262
+ })([
263
+ "background:var(",
264
+ ");"
265
+ ], _TextAreatokens.tokens.backgroundColor);
266
+ var Divider = _styledcomponents.default.div.withConfig({
267
+ displayName: "TextArea.styles__Divider",
268
+ componentId: "sc-5fcd62a1-14"
269
+ })([
270
+ "height:0.0625rem;background:var(",
271
+ ");"
272
+ ], _TextAreatokens.tokens.dividerColor);
225
273
  var StyledContainer = _styledcomponents.default.div.withConfig({
226
274
  displayName: "TextArea.styles__StyledContainer",
227
- componentId: "sc-2ff414ff-11"
275
+ componentId: "sc-5fcd62a1-15"
228
276
  })([
229
277
  "display:inline-flex;flex-direction:column;width:",
230
278
  ";position:relative;"
@@ -234,7 +282,7 @@ var StyledContainer = _styledcomponents.default.div.withConfig({
234
282
  });
235
283
  var StyledTextArea = _styledcomponents.default.textarea.withConfig({
236
284
  displayName: "TextArea.styles__StyledTextArea",
237
- componentId: "sc-2ff414ff-12"
285
+ componentId: "sc-5fcd62a1-16"
238
286
  })([
239
287
  "display:block;box-sizing:border-box;outline:none;border:none;-webkit-appearance:none;background-color:transparent;color:var(",
240
288
  ");caret-color:var(",
@@ -297,7 +345,7 @@ var StyledTextArea = _styledcomponents.default.textarea.withConfig({
297
345
  }, _TextAreatokens.tokens.inputFontFamily, _TextAreatokens.tokens.inputFontSize, _TextAreatokens.tokens.inputFontStyle, _TextAreatokens.tokens.inputFontWeight, _TextAreatokens.tokens.inputLetterSpacing, _TextAreatokens.tokens.inputLineHeight, _TextAreatokens.tokens.inputColorFocus, _TextAreatokens.tokens.scrollbarWidth, _TextAreatokens.tokens.scrollbarThumbBackgroundColor, _TextAreatokens.tokens.scrollbarBorderWidth, _TextAreatokens.tokens.scrollbarTrackBackgroundColor, _TextAreatokens.tokens.scrollbarBorderWidth);
298
346
  var StyledHiddenTextArea = _styledcomponents.default.textarea.withConfig({
299
347
  displayName: "TextArea.styles__StyledHiddenTextArea",
300
- componentId: "sc-2ff414ff-13"
348
+ componentId: "sc-5fcd62a1-17"
301
349
  })([
302
350
  "max-height:none !important;min-height:var(",
303
351
  ") !important;visibility:hidden !important;overflow:hidden !important;position:absolute !important;z-index:-1000 !important;top:0 !important;left:0 !important;right:0.0625rem !important;border-width:0;padding-right:",
@@ -315,7 +363,7 @@ var StyledHiddenTextArea = _styledcomponents.default.textarea.withConfig({
315
363
  }, _TextAreatokens.tokens.inputPaddingLeft, _TextAreatokens.tokens.inputFontFamily, _TextAreatokens.tokens.inputFontSize, _TextAreatokens.tokens.inputFontStyle, _TextAreatokens.tokens.inputFontWeight, _TextAreatokens.tokens.inputLetterSpacing, _TextAreatokens.tokens.inputLineHeight);
316
364
  var StyledHelpers = _styledcomponents.default.div.withConfig({
317
365
  displayName: "TextArea.styles__StyledHelpers",
318
- componentId: "sc-2ff414ff-14"
366
+ componentId: "sc-5fcd62a1-18"
319
367
  })([
320
368
  "box-sizing:border-box;display:flex;justify-content:space-between;transition:background-color 0.1s ease-in-out;background-color:var(",
321
369
  ");padding-top:var(",
@@ -328,14 +376,14 @@ var StyledHelpers = _styledcomponents.default.div.withConfig({
328
376
  ], _TextAreatokens.tokens.helpersBackgroundColor, _TextAreatokens.tokens.helpersPaddingTop, _TextAreatokens.tokens.helpersPaddingRight, _TextAreatokens.tokens.helpersPaddingBottom, _TextAreatokens.tokens.helpersPaddingLeft, _TextAreatokens.tokens.borderRadius, _TextAreatokens.tokens.borderRadius);
329
377
  var StyledOutsideHelpersWrapper = _styledcomponents.default.div.withConfig({
330
378
  displayName: "TextArea.styles__StyledOutsideHelpersWrapper",
331
- componentId: "sc-2ff414ff-15"
379
+ componentId: "sc-5fcd62a1-19"
332
380
  })([
333
381
  "box-sizing:border-box;display:flex;justify-content:space-between;padding-top:var(",
334
382
  ");"
335
383
  ], _TextAreatokens.tokens.clearHelpersPaddingTop);
336
384
  var StyledLeftHelper = _styledcomponents.default.span.withConfig({
337
385
  displayName: "TextArea.styles__StyledLeftHelper",
338
- componentId: "sc-2ff414ff-16"
386
+ componentId: "sc-5fcd62a1-20"
339
387
  })([
340
388
  "",
341
389
  ";display:block;font-family:var(",
@@ -349,14 +397,14 @@ var StyledLeftHelper = _styledcomponents.default.span.withConfig({
349
397
  ], (0, _mixins.applyEllipsis)(), _TextAreatokens.tokens.helpersFontFamily, _TextAreatokens.tokens.helpersFontSize, _TextAreatokens.tokens.helpersFontStyle, _TextAreatokens.tokens.helpersFontWeight, _TextAreatokens.tokens.helpersLetterSpacing, _TextAreatokens.tokens.helpersLineHeight, _TextAreatokens.tokens.leftHelperColor);
350
398
  var StyledRightHelper = (0, _styledcomponents.default)(StyledLeftHelper).withConfig({
351
399
  displayName: "TextArea.styles__StyledRightHelper",
352
- componentId: "sc-2ff414ff-17"
400
+ componentId: "sc-5fcd62a1-21"
353
401
  })([
354
402
  "color:var(",
355
403
  ");margin-left:auto;"
356
404
  ], _TextAreatokens.tokens.rightHelperColor);
357
405
  var StyledPlaceholder = _styledcomponents.default.label.withConfig({
358
406
  displayName: "TextArea.styles__StyledPlaceholder",
359
- componentId: "sc-2ff414ff-18"
407
+ componentId: "sc-5fcd62a1-22"
360
408
  })([
361
409
  "box-sizing:border-box;position:absolute;pointer-events:none;display:inline-flex;align-items:center;transition:all 0.1s ease-in-out;transform-origin:top left;color:var(",
362
410
  ");width:100%;height:auto;top:var(",
@@ -375,7 +423,7 @@ var StyledPlaceholder = _styledcomponents.default.label.withConfig({
375
423
  }, _TextAreatokens.tokens.inputFontFamily, _TextAreatokens.tokens.inputFontSize, _TextAreatokens.tokens.inputFontStyle, _TextAreatokens.tokens.inputFontWeight, _TextAreatokens.tokens.inputLetterSpacing, _TextAreatokens.tokens.inputLineHeight);
376
424
  var StyledIndicator = _styledcomponents.default.div.withConfig({
377
425
  displayName: "TextArea.styles__StyledIndicator",
378
- componentId: "sc-2ff414ff-19"
426
+ componentId: "sc-5fcd62a1-23"
379
427
  })([
380
428
  "position:absolute;border-radius:50%;background-color:var(",
381
429
  ");&.",
@@ -32,7 +32,9 @@ var classes = {
32
32
  hasHint: 'textarea-has-hint',
33
33
  hasRightContent: 'textarea-has-right-content',
34
34
  hasDivider: 'textarea-has-divider',
35
- requiredAlignRight: 'required-align-right'
35
+ requiredAlignRight: 'required-align-right',
36
+ hasHeaderSlot: 'textarea-has-header-slot',
37
+ styledContentWrapper: 'textarea-content-wrapper'
36
38
  };
37
39
  var tokens = {
38
40
  /** Цвет фона для всего компонента */ backgroundColor: '--plasma-textarea-background-color',
@@ -9,5 +9,5 @@ Object.defineProperty(exports, "applyDynamicLabel", {
9
9
  }
10
10
  });
11
11
  var _TextAreatokens = require("../TextArea.tokens");
12
- var innerPlaceholderUp = _TextAreatokens.classes.innerPlaceholderUp, hidePlaceHolder = _TextAreatokens.classes.hidePlaceHolder, focusedOuterPlaceholderColor = _TextAreatokens.classes.focusedOuterPlaceholderColor, styledTextArea = _TextAreatokens.classes.styledTextArea, styledTextAreaWrapper = _TextAreatokens.classes.styledTextAreaWrapper, styledPlaceholder = _TextAreatokens.classes.styledPlaceholder;
13
- var applyDynamicLabel = "\n .".concat(innerPlaceholderUp, " {\n .").concat(styledTextArea, " {\n height: calc(var(--plasma_private-textarea-input-actual-height) - var(").concat(_TextAreatokens.tokens.labelInnerTop, ") - var(").concat(_TextAreatokens.tokens.labelInnerTopHelper, ", 0px));\n }\n\n .").concat(styledTextAreaWrapper, " {\n padding-top: calc(calc(var(").concat(_TextAreatokens.tokens.labelInnerTop, ") + var(").concat(_TextAreatokens.tokens.labelInnerFontSize, ")) + var(").concat(_TextAreatokens.tokens.labelInnerMarginBottom, "));\n }\n\n .").concat(styledPlaceholder, " {\n font-family: var(").concat(_TextAreatokens.tokens.labelInnerFontFamily, ");\n font-size: var(").concat(_TextAreatokens.tokens.labelInnerFontSize, ");\n font-style: var(").concat(_TextAreatokens.tokens.labelInnerFontStyle, ");\n font-weight: var(").concat(_TextAreatokens.tokens.labelInnerFontWeight, ");\n letter-spacing: var(").concat(_TextAreatokens.tokens.labelInnerLetterSpacing, ");\n line-height: var(").concat(_TextAreatokens.tokens.labelInnerLineHeight, ");\n top: var(").concat(_TextAreatokens.tokens.labelInnerTop, ");\n }\n }\n\n .").concat(hidePlaceHolder, " .").concat(styledPlaceholder, " {\n display: none;\n }\n\n .").concat(focusedOuterPlaceholderColor, " .").concat(styledPlaceholder, " {\n color: var(").concat(_TextAreatokens.tokens.placeholderColorFocus, ");\n }\n");
12
+ var innerPlaceholderUp = _TextAreatokens.classes.innerPlaceholderUp, hidePlaceHolder = _TextAreatokens.classes.hidePlaceHolder, focusedOuterPlaceholderColor = _TextAreatokens.classes.focusedOuterPlaceholderColor, styledTextArea = _TextAreatokens.classes.styledTextArea, styledTextAreaWrapper = _TextAreatokens.classes.styledTextAreaWrapper, styledPlaceholder = _TextAreatokens.classes.styledPlaceholder, hasHeaderSlot = _TextAreatokens.classes.hasHeaderSlot, styledContentWrapper = _TextAreatokens.classes.styledContentWrapper;
13
+ var applyDynamicLabel = "\n .".concat(innerPlaceholderUp, " {\n .").concat(styledTextArea, " {\n height: calc(var(--plasma_private-textarea-input-actual-height) - var(").concat(_TextAreatokens.tokens.labelInnerTop, ") - var(").concat(_TextAreatokens.tokens.labelInnerTopHelper, ", 0px));\n }\n\n .").concat(styledTextAreaWrapper, " {\n padding-top: calc(calc(var(").concat(_TextAreatokens.tokens.labelInnerTop, ") + var(").concat(_TextAreatokens.tokens.labelInnerFontSize, ")) + var(").concat(_TextAreatokens.tokens.labelInnerMarginBottom, "));\n }\n \n .").concat(hasHeaderSlot, " {\n padding-top: unset;\n\n .").concat(styledContentWrapper, " {\n padding-top: calc(calc(var(").concat(_TextAreatokens.tokens.labelInnerTop, ") + var(").concat(_TextAreatokens.tokens.labelInnerFontSize, ")) + var(").concat(_TextAreatokens.tokens.labelInnerMarginBottom, "));\n }\n }\n\n .").concat(styledPlaceholder, " {\n font-family: var(").concat(_TextAreatokens.tokens.labelInnerFontFamily, ");\n font-size: var(").concat(_TextAreatokens.tokens.labelInnerFontSize, ");\n font-style: var(").concat(_TextAreatokens.tokens.labelInnerFontStyle, ");\n font-weight: var(").concat(_TextAreatokens.tokens.labelInnerFontWeight, ");\n letter-spacing: var(").concat(_TextAreatokens.tokens.labelInnerLetterSpacing, ");\n line-height: var(").concat(_TextAreatokens.tokens.labelInnerLineHeight, ");\n top: var(").concat(_TextAreatokens.tokens.labelInnerTop, ");\n }\n }\n\n .").concat(hidePlaceHolder, " .").concat(styledPlaceholder, " {\n display: none;\n }\n\n .").concat(focusedOuterPlaceholderColor, " .").concat(styledPlaceholder, " {\n color: var(").concat(_TextAreatokens.tokens.placeholderColorFocus, ");\n }\n");
@@ -59,7 +59,7 @@ var getAnimationStyles = function() {
59
59
  };
60
60
  export var StyledPanel = styled(Panel).withConfig({
61
61
  displayName: "Drawer.styles__StyledPanel",
62
- componentId: "sc-45831f2a-0"
62
+ componentId: "sc-8f0d02f6-0"
63
63
  })([
64
64
  "",
65
65
  ":var(",
@@ -67,10 +67,10 @@ export var StyledPanel = styled(Panel).withConfig({
67
67
  ], panelTokens.closeColor, tokens.closeIconColor);
68
68
  export var StyledPopup = styled(Popup).withConfig({
69
69
  displayName: "Drawer.styles__StyledPopup",
70
- componentId: "sc-45831f2a-1"
70
+ componentId: "sc-8f0d02f6-1"
71
71
  })([
72
72
  "&&.",
73
- "{animation:fadeIn 0.2s forwards;padding-right:17px;@supports (scrollbar-gutter:stable){padding-right:0;scrollbar-gutter:stable;}}&&.",
73
+ "{animation:fadeIn 0.2s forwards;}&&.",
74
74
  " .",
75
75
  "{animation:fadeOut 0.2s forwards;}@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}@keyframes fadeOut{from{opacity:1;}to{opacity:0;}}&& .",
76
76
  ",&& .",
@@ -118,7 +118,7 @@ import { cx, mergeRefs } from "../../utils";
118
118
  import { useOutsideClick } from "../../hooks";
119
119
  import { applyDynamicLabel } from "./mixins";
120
120
  import { useAutoResize, ROOT_FONT_SIZE } from "./hooks";
121
- import { StyledContent, StyledHelpers, StyledLeftHelper, StyledRightHelper, StyledLabel, StyledPlaceholder, StyledTextArea, StyledTextAreaWrapper, StyledContainer, StyledIndicator, StyledOptionalText, OuterLabelWrapper, StyledIndicatorWrapper, StyledHintWrapper, TitleCaption, StyledOutsideHelpersWrapper, StyledHiddenTextArea } from "./TextArea.styles";
121
+ import { StyledContent, StyledHelpers, StyledLeftHelper, StyledRightHelper, StyledLabel, StyledPlaceholder, StyledTextArea, StyledTextAreaWrapper, StyledContainer, StyledIndicator, StyledOptionalText, OuterLabelWrapper, StyledIndicatorWrapper, StyledHintWrapper, TitleCaption, StyledOutsideHelpersWrapper, StyledHiddenTextArea, StyledContentWrapper, StyledHeaderSlot } from "./TextArea.styles";
122
122
  import { classes } from "./TextArea.tokens";
123
123
  import { base as viewCSS } from "./variations/_view/base";
124
124
  import { base as sizeCSS } from "./variations/_size/base";
@@ -128,7 +128,7 @@ import { base as disabledCSS } from "./variations/_disabled/base";
128
128
  import { base as hintViewCSS } from "./variations/_hint-view/base";
129
129
  import { base as hintSizeCSS } from "./variations/_hint-size/base";
130
130
  import { HintComponent } from "./ui/Hint/Hint";
131
- var innerPlaceholderUp = classes.innerPlaceholderUp, focusedOuterPlaceholderColor = classes.focusedOuterPlaceholderColor, hidePlaceHolder = classes.hidePlaceHolder, styledContainer = classes.styledContainer, styledTextArea = classes.styledTextArea, styledTextAreaWrapper = classes.styledTextAreaWrapper, styledPlaceholder = classes.styledPlaceholder, styledHelpers = classes.styledHelpers;
131
+ var innerPlaceholderUp = classes.innerPlaceholderUp, focusedOuterPlaceholderColor = classes.focusedOuterPlaceholderColor, hidePlaceHolder = classes.hidePlaceHolder, styledContainer = classes.styledContainer, styledTextArea = classes.styledTextArea, styledTextAreaWrapper = classes.styledTextAreaWrapper, styledPlaceholder = classes.styledPlaceholder, styledHelpers = classes.styledHelpers, hasHeaderSlot = classes.hasHeaderSlot, styledContentWrapper = classes.styledContentWrapper;
132
132
  var optionalText = 'optional';
133
133
  var base = css([
134
134
  "",
@@ -162,10 +162,11 @@ export var getDynamicLabelClasses = function(props, focused) {
162
162
  };
163
163
  export var textAreaRoot = function(Root) {
164
164
  return /*#__PURE__*/ forwardRef(function(props, innerRef) {
165
- var helperText = props.helperText, status = props.status, resize = props.resize, rightHelper = props.rightHelper, leftHelper = props.leftHelper, _props_leftHelperPlacement = props.leftHelperPlacement, leftHelperPlacement = _props_leftHelperPlacement === void 0 ? 'inner' : _props_leftHelperPlacement, contentRight = props.contentRight, _props_autoResize = props.autoResize, autoResize = _props_autoResize === void 0 ? false : _props_autoResize, _props_minAuto = props.minAuto, minAuto = _props_minAuto === void 0 ? 0 : _props_minAuto, maxAuto = props.maxAuto, label = props.label, _props_labelPlacement = props.labelPlacement, labelPlacement = _props_labelPlacement === void 0 ? 'inner' : _props_labelPlacement, titleCaption = props.titleCaption, placeholder = props.placeholder, defaultValue = props.defaultValue, height = props.height, width = props.width, value = props.value, disabled = props.disabled, _props_required = props.required, required = _props_required === void 0 ? false : _props_required, _props_requiredPlacement = props.requiredPlacement, requiredPlacement = _props_requiredPlacement === void 0 ? 'right' : _props_requiredPlacement, _props_hasRequiredIndicator = props.hasRequiredIndicator, hasRequiredIndicator = _props_hasRequiredIndicator === void 0 ? true : _props_hasRequiredIndicator, _props_optional = props.optional, optional = _props_optional === void 0 ? false : _props_optional, clear = props.clear, hasDivider = props.hasDivider, size = props.size, view = props.view, id = props.id, style = props.style, className = props.className, readOnly = props.readOnly, rows = props.rows, cols = props.cols, _props_hintTrigger = props.hintTrigger, hintTrigger = _props_hintTrigger === void 0 ? 'hover' : _props_hintTrigger, hintText = props.hintText, _props_hintView = props.hintView, hintView = _props_hintView === void 0 ? 'default' : _props_hintView, _props_hintSize = props.hintSize, hintSize = _props_hintSize === void 0 ? 'm' : _props_hintSize, hintTargetIcon = props.hintTargetIcon, _props_hintPlacement = props.hintPlacement, hintPlacement = _props_hintPlacement === void 0 ? 'auto' : _props_hintPlacement, hintHasArrow = props.hintHasArrow, _props_hintOffset = props.hintOffset, hintOffset = _props_hintOffset === void 0 ? HINT_DEFAULT_OFFSET : _props_hintOffset, hintWidth = props.hintWidth, hintContentLeft = props.hintContentLeft, onChange = props.onChange, rest = _object_without_properties(props, [
165
+ var helperText = props.helperText, status = props.status, resize = props.resize, headerSlot = props.headerSlot, rightHelper = props.rightHelper, leftHelper = props.leftHelper, _props_leftHelperPlacement = props.leftHelperPlacement, leftHelperPlacement = _props_leftHelperPlacement === void 0 ? 'inner' : _props_leftHelperPlacement, contentRight = props.contentRight, _props_autoResize = props.autoResize, autoResize = _props_autoResize === void 0 ? false : _props_autoResize, _props_minAuto = props.minAuto, minAuto = _props_minAuto === void 0 ? 0 : _props_minAuto, maxAuto = props.maxAuto, label = props.label, _props_labelPlacement = props.labelPlacement, labelPlacement = _props_labelPlacement === void 0 ? 'inner' : _props_labelPlacement, titleCaption = props.titleCaption, placeholder = props.placeholder, defaultValue = props.defaultValue, height = props.height, width = props.width, value = props.value, disabled = props.disabled, _props_required = props.required, required = _props_required === void 0 ? false : _props_required, _props_requiredPlacement = props.requiredPlacement, requiredPlacement = _props_requiredPlacement === void 0 ? 'right' : _props_requiredPlacement, _props_hasRequiredIndicator = props.hasRequiredIndicator, hasRequiredIndicator = _props_hasRequiredIndicator === void 0 ? true : _props_hasRequiredIndicator, _props_optional = props.optional, optional = _props_optional === void 0 ? false : _props_optional, clear = props.clear, hasDivider = props.hasDivider, size = props.size, view = props.view, id = props.id, style = props.style, className = props.className, readOnly = props.readOnly, rows = props.rows, cols = props.cols, _props_hintTrigger = props.hintTrigger, hintTrigger = _props_hintTrigger === void 0 ? 'hover' : _props_hintTrigger, hintText = props.hintText, _props_hintView = props.hintView, hintView = _props_hintView === void 0 ? 'default' : _props_hintView, _props_hintSize = props.hintSize, hintSize = _props_hintSize === void 0 ? 'm' : _props_hintSize, hintTargetIcon = props.hintTargetIcon, _props_hintPlacement = props.hintPlacement, hintPlacement = _props_hintPlacement === void 0 ? 'auto' : _props_hintPlacement, hintHasArrow = props.hintHasArrow, _props_hintOffset = props.hintOffset, hintOffset = _props_hintOffset === void 0 ? HINT_DEFAULT_OFFSET : _props_hintOffset, hintWidth = props.hintWidth, hintContentLeft = props.hintContentLeft, onChange = props.onChange, rest = _object_without_properties(props, [
166
166
  "helperText",
167
167
  "status",
168
168
  "resize",
169
+ "headerSlot",
169
170
  "rightHelper",
170
171
  "leftHelper",
171
172
  "leftHelperPlacement",
@@ -229,6 +230,7 @@ export var textAreaRoot = function(Root) {
229
230
  var hasOuterLabel = Boolean(label && labelPlacement === 'outer');
230
231
  var hasInnerLabel = Boolean(label && labelPlacement === 'inner' && size !== 'xs');
231
232
  var hasPlaceholderOptional = innerOptional && !hasOuterLabel;
233
+ var hasHeader = Boolean(headerSlot) && !clear;
232
234
  var overriddenView = status !== undefined ? fallbackStatusMap[status] : view;
233
235
  var textareaHelperId = id ? "".concat(id, "-helper") : undefined;
234
236
  var applyCustomWidth = resize !== 'horizontal' && resize !== 'both' && !cols;
@@ -365,10 +367,20 @@ export var textAreaRoot = function(Root) {
365
367
  handleHintHide: handleHintHide,
366
368
  handleHintClick: handleHintClick,
367
369
  isInnerLabel: true
368
- }))), contentRight && /*#__PURE__*/ React.createElement(StyledContent, null, contentRight), /*#__PURE__*/ React.createElement(StyledTextAreaWrapper, {
369
- className: cx(styledTextAreaWrapper),
370
- hasHelper: hasHelper
371
- }, /*#__PURE__*/ React.createElement(StyledTextArea, _object_spread({
370
+ }))), /*#__PURE__*/ React.createElement(StyledTextAreaWrapper, {
371
+ className: cx(styledTextAreaWrapper, hasHeader && hasHeaderSlot),
372
+ hasHelper: hasHelper,
373
+ hasHeader: hasHeader
374
+ }, headerSlot && !clear && /*#__PURE__*/ React.createElement(StyledHeaderSlot, null, headerSlot), contentRight && !hasHeader && /*#__PURE__*/ React.createElement(StyledContent, null, contentRight), hasHeader && /*#__PURE__*/ React.createElement(StyledContentWrapper, {
375
+ className: styledContentWrapper,
376
+ hasHeader: hasHeader
377
+ }, contentRight && /*#__PURE__*/ React.createElement(StyledContent, {
378
+ hasHeader: hasHeader
379
+ }, contentRight), headerSlot && placeholderLabel && /*#__PURE__*/ React.createElement(StyledPlaceholder, {
380
+ hasContentRight: Boolean(contentRight),
381
+ className: styledPlaceholder,
382
+ htmlFor: id
383
+ }, placeholderLabel, !hasOuterLabel && optionalTextNode)), /*#__PURE__*/ React.createElement(StyledTextArea, _object_spread({
372
384
  className: cx(styledTextArea, hasRightContentClass),
373
385
  id: id,
374
386
  hasContentRight: Boolean(contentRight),
@@ -400,7 +412,7 @@ export var textAreaRoot = function(Root) {
400
412
  id: textareaHelperId
401
413
  }, isInnerLeftHelperPlacement && (leftHelper || helperText) && /*#__PURE__*/ React.createElement(StyledLeftHelper, null, leftHelper || helperText), rightHelper && /*#__PURE__*/ React.createElement(StyledRightHelper, {
402
414
  "data-root": true
403
- }, rightHelper)), placeholderLabel && /*#__PURE__*/ React.createElement(StyledPlaceholder, {
415
+ }, rightHelper)), !hasHeader && placeholderLabel && /*#__PURE__*/ React.createElement(StyledPlaceholder, {
404
416
  hasContentRight: Boolean(contentRight),
405
417
  className: styledPlaceholder,
406
418
  htmlFor: id
@@ -7,13 +7,13 @@ var mergedConfig = mergeConfig(tooltipConfig);
7
7
  var Tooltip = component(mergedConfig);
8
8
  export var Hint = styled(Tooltip).withConfig({
9
9
  displayName: "TextArea.styles__Hint",
10
- componentId: "sc-2ff414ff-0"
10
+ componentId: "sc-5fcd62a1-0"
11
11
  })([
12
12
  ""
13
13
  ]);
14
14
  export var OuterLabelWrapper = styled.div.withConfig({
15
15
  displayName: "TextArea.styles__OuterLabelWrapper",
16
- componentId: "sc-2ff414ff-1"
16
+ componentId: "sc-5fcd62a1-1"
17
17
  })([
18
18
  "display:flex;align-items:center;max-width:",
19
19
  ";margin-bottom:",
@@ -27,7 +27,7 @@ export var OuterLabelWrapper = styled.div.withConfig({
27
27
  });
28
28
  export var StyledLabel = styled.div.withConfig({
29
29
  displayName: "TextArea.styles__StyledLabel",
30
- componentId: "sc-2ff414ff-2"
30
+ componentId: "sc-5fcd62a1-2"
31
31
  })([
32
32
  "position:relative;display:inline-flex;color:var(",
33
33
  ",var(",
@@ -47,7 +47,7 @@ export var StyledLabel = styled.div.withConfig({
47
47
  ], tokens.labelOuterColor, tokens.inputColor, tokens.labelOuterFontFamily, tokens.inputFontFamily, tokens.labelOuterFontSize, tokens.inputFontSize, tokens.labelOuterFontStyle, tokens.inputFontStyle, tokens.labelOuterFontWeight, tokens.inputFontWeight, tokens.labelOuterLetterSpacing, tokens.inputLetterSpacing, tokens.labelOuterLineHeight, tokens.inputLineHeight);
48
48
  export var TitleCaption = styled.div.withConfig({
49
49
  displayName: "TextArea.styles__TitleCaption",
50
- componentId: "sc-2ff414ff-3"
50
+ componentId: "sc-5fcd62a1-3"
51
51
  })([
52
52
  "display:inline-block;margin-left:auto;font-family:var(",
53
53
  ");font-size:var(",
@@ -59,13 +59,13 @@ export var TitleCaption = styled.div.withConfig({
59
59
  ], tokens.titleCaptionFontFamily, tokens.titleCaptionFontSize, tokens.titleCaptionFontStyle, tokens.titleCaptionFontWeight, tokens.titleCaptionLetterSpacing, tokens.titleCaptionLineHeight);
60
60
  export var StyledIndicatorWrapper = styled.div.withConfig({
61
61
  displayName: "TextArea.styles__StyledIndicatorWrapper",
62
- componentId: "sc-2ff414ff-4"
62
+ componentId: "sc-5fcd62a1-4"
63
63
  })([
64
64
  "position:relative;display:inline-flex;align-items:center;"
65
65
  ]);
66
66
  export var StyledOptionalText = styled.span.withConfig({
67
67
  displayName: "TextArea.styles__StyledOptionalText",
68
- componentId: "sc-2ff414ff-5"
68
+ componentId: "sc-5fcd62a1-5"
69
69
  })([
70
70
  "color:var(",
71
71
  ");font-family:",
@@ -96,7 +96,7 @@ export var StyledOptionalText = styled.span.withConfig({
96
96
  });
97
97
  export var StyledHintWrapper = styled.div.withConfig({
98
98
  displayName: "TextArea.styles__StyledHintWrapper",
99
- componentId: "sc-2ff414ff-6"
99
+ componentId: "sc-5fcd62a1-6"
100
100
  })([
101
101
  "display:inline-flex;line-height:0;margin:var(",
102
102
  ");&.",
@@ -105,7 +105,7 @@ export var StyledHintWrapper = styled.div.withConfig({
105
105
  ], tokens.hintMargin, classes.innerLabelPlacement, tokens.hintInnerLabelPlacementOffset);
106
106
  export var HintTargetWrapper = styled.div.withConfig({
107
107
  displayName: "TextArea.styles__HintTargetWrapper",
108
- componentId: "sc-2ff414ff-7"
108
+ componentId: "sc-5fcd62a1-7"
109
109
  })([
110
110
  "color:var(",
111
111
  ");width:var(",
@@ -114,40 +114,76 @@ export var HintTargetWrapper = styled.div.withConfig({
114
114
  ], tokens.hintIconColor, tokens.hintTargetSize, tokens.hintTargetSize);
115
115
  export var HintIconWrapper = styled.div.withConfig({
116
116
  displayName: "TextArea.styles__HintIconWrapper",
117
- componentId: "sc-2ff414ff-8"
117
+ componentId: "sc-5fcd62a1-8"
118
118
  })([
119
119
  ""
120
120
  ]);
121
121
  export var StyledTextAreaWrapper = styled.div.withConfig({
122
122
  displayName: "TextArea.styles__StyledTextAreaWrapper",
123
- componentId: "sc-2ff414ff-9"
123
+ componentId: "sc-5fcd62a1-9"
124
124
  })([
125
- "background-color:var(",
126
- ");padding-top:var(",
127
- ");padding-bottom:",
125
+ "display:flex;flex-direction:column;background-color:var(",
126
+ ");padding-top:",
127
+ ";padding-bottom:",
128
128
  ";border-radius:",
129
129
  ";"
130
- ], tokens.inputBackgroundColor, tokens.inputPaddingTop, function(param) {
130
+ ], tokens.inputBackgroundColor, function(param) {
131
+ var hasHeader = param.hasHeader;
132
+ return hasHeader ? 'unset' : "var(".concat(tokens.inputPaddingTop, ")");
133
+ }, function(param) {
131
134
  var hasHelper = param.hasHelper;
132
135
  return hasHelper ? "var(".concat(tokens.inputPaddingBottomWithHelpers, ")") : "var(".concat(tokens.inputPaddingBottom, ")");
133
136
  }, function(param) {
134
137
  var hasHelper = param.hasHelper;
135
138
  return hasHelper ? "var(".concat(tokens.borderRadiusWithHelpers, ")") : "var(".concat(tokens.borderRadius, ")");
136
139
  });
140
+ export var StyledContentWrapper = styled.div.withConfig({
141
+ displayName: "TextArea.styles__StyledContentWrapper",
142
+ componentId: "sc-5fcd62a1-10"
143
+ })([
144
+ "position:relative;width:100%;height:0;padding-top:",
145
+ ";"
146
+ ], function(param) {
147
+ var hasHeader = param.hasHeader;
148
+ return hasHeader ? "var(".concat(tokens.inputPaddingTop, ")") : 'unset';
149
+ });
137
150
  export var StyledContent = styled.div.withConfig({
138
151
  displayName: "TextArea.styles__StyledContent",
139
- componentId: "sc-2ff414ff-10"
152
+ componentId: "sc-5fcd62a1-11"
140
153
  })([
141
- "position:absolute;display:flex;align-items:center;bottom:0;z-index:1;color:var(",
154
+ "position:absolute;display:flex;align-items:center;z-index:1;color:var(",
142
155
  ",var(",
143
- "));top:var(",
144
- ");right:var(",
156
+ "));top:",
157
+ ";right:var(",
145
158
  ");height:var(",
146
159
  ");"
147
- ], tokens.rightContentColor, tokens.inputColor, tokens.rightContentTop, tokens.rightContentRight, tokens.rightContentHeight);
160
+ ], tokens.rightContentColor, tokens.inputColor, function(param) {
161
+ var hasHeader = param.hasHeader;
162
+ return hasHeader ? "var(".concat(tokens.inputPaddingTop, ")") : "var(".concat(tokens.rightContentTop, ")");
163
+ }, tokens.rightContentRight, tokens.rightContentHeight);
164
+ export var StyledHeaderSlot = styled.div.withConfig({
165
+ displayName: "TextArea.styles__StyledHeaderSlot",
166
+ componentId: "sc-5fcd62a1-12"
167
+ })([
168
+ "display:flex;flex-direction:column;"
169
+ ]);
170
+ export var DividerWrapper = styled.div.withConfig({
171
+ displayName: "TextArea.styles__DividerWrapper",
172
+ componentId: "sc-5fcd62a1-13"
173
+ })([
174
+ "background:var(",
175
+ ");"
176
+ ], tokens.backgroundColor);
177
+ export var Divider = styled.div.withConfig({
178
+ displayName: "TextArea.styles__Divider",
179
+ componentId: "sc-5fcd62a1-14"
180
+ })([
181
+ "height:0.0625rem;background:var(",
182
+ ");"
183
+ ], tokens.dividerColor);
148
184
  export var StyledContainer = styled.div.withConfig({
149
185
  displayName: "TextArea.styles__StyledContainer",
150
- componentId: "sc-2ff414ff-11"
186
+ componentId: "sc-5fcd62a1-15"
151
187
  })([
152
188
  "display:inline-flex;flex-direction:column;width:",
153
189
  ";position:relative;"
@@ -157,7 +193,7 @@ export var StyledContainer = styled.div.withConfig({
157
193
  });
158
194
  export var StyledTextArea = styled.textarea.withConfig({
159
195
  displayName: "TextArea.styles__StyledTextArea",
160
- componentId: "sc-2ff414ff-12"
196
+ componentId: "sc-5fcd62a1-16"
161
197
  })([
162
198
  "display:block;box-sizing:border-box;outline:none;border:none;-webkit-appearance:none;background-color:transparent;color:var(",
163
199
  ");caret-color:var(",
@@ -220,7 +256,7 @@ export var StyledTextArea = styled.textarea.withConfig({
220
256
  }, tokens.inputFontFamily, tokens.inputFontSize, tokens.inputFontStyle, tokens.inputFontWeight, tokens.inputLetterSpacing, tokens.inputLineHeight, tokens.inputColorFocus, tokens.scrollbarWidth, tokens.scrollbarThumbBackgroundColor, tokens.scrollbarBorderWidth, tokens.scrollbarTrackBackgroundColor, tokens.scrollbarBorderWidth);
221
257
  export var StyledHiddenTextArea = styled.textarea.withConfig({
222
258
  displayName: "TextArea.styles__StyledHiddenTextArea",
223
- componentId: "sc-2ff414ff-13"
259
+ componentId: "sc-5fcd62a1-17"
224
260
  })([
225
261
  "max-height:none !important;min-height:var(",
226
262
  ") !important;visibility:hidden !important;overflow:hidden !important;position:absolute !important;z-index:-1000 !important;top:0 !important;left:0 !important;right:0.0625rem !important;border-width:0;padding-right:",
@@ -238,7 +274,7 @@ export var StyledHiddenTextArea = styled.textarea.withConfig({
238
274
  }, tokens.inputPaddingLeft, tokens.inputFontFamily, tokens.inputFontSize, tokens.inputFontStyle, tokens.inputFontWeight, tokens.inputLetterSpacing, tokens.inputLineHeight);
239
275
  export var StyledHelpers = styled.div.withConfig({
240
276
  displayName: "TextArea.styles__StyledHelpers",
241
- componentId: "sc-2ff414ff-14"
277
+ componentId: "sc-5fcd62a1-18"
242
278
  })([
243
279
  "box-sizing:border-box;display:flex;justify-content:space-between;transition:background-color 0.1s ease-in-out;background-color:var(",
244
280
  ");padding-top:var(",
@@ -251,14 +287,14 @@ export var StyledHelpers = styled.div.withConfig({
251
287
  ], tokens.helpersBackgroundColor, tokens.helpersPaddingTop, tokens.helpersPaddingRight, tokens.helpersPaddingBottom, tokens.helpersPaddingLeft, tokens.borderRadius, tokens.borderRadius);
252
288
  export var StyledOutsideHelpersWrapper = styled.div.withConfig({
253
289
  displayName: "TextArea.styles__StyledOutsideHelpersWrapper",
254
- componentId: "sc-2ff414ff-15"
290
+ componentId: "sc-5fcd62a1-19"
255
291
  })([
256
292
  "box-sizing:border-box;display:flex;justify-content:space-between;padding-top:var(",
257
293
  ");"
258
294
  ], tokens.clearHelpersPaddingTop);
259
295
  export var StyledLeftHelper = styled.span.withConfig({
260
296
  displayName: "TextArea.styles__StyledLeftHelper",
261
- componentId: "sc-2ff414ff-16"
297
+ componentId: "sc-5fcd62a1-20"
262
298
  })([
263
299
  "",
264
300
  ";display:block;font-family:var(",
@@ -272,14 +308,14 @@ export var StyledLeftHelper = styled.span.withConfig({
272
308
  ], applyEllipsis(), tokens.helpersFontFamily, tokens.helpersFontSize, tokens.helpersFontStyle, tokens.helpersFontWeight, tokens.helpersLetterSpacing, tokens.helpersLineHeight, tokens.leftHelperColor);
273
309
  export var StyledRightHelper = styled(StyledLeftHelper).withConfig({
274
310
  displayName: "TextArea.styles__StyledRightHelper",
275
- componentId: "sc-2ff414ff-17"
311
+ componentId: "sc-5fcd62a1-21"
276
312
  })([
277
313
  "color:var(",
278
314
  ");margin-left:auto;"
279
315
  ], tokens.rightHelperColor);
280
316
  export var StyledPlaceholder = styled.label.withConfig({
281
317
  displayName: "TextArea.styles__StyledPlaceholder",
282
- componentId: "sc-2ff414ff-18"
318
+ componentId: "sc-5fcd62a1-22"
283
319
  })([
284
320
  "box-sizing:border-box;position:absolute;pointer-events:none;display:inline-flex;align-items:center;transition:all 0.1s ease-in-out;transform-origin:top left;color:var(",
285
321
  ");width:100%;height:auto;top:var(",
@@ -298,7 +334,7 @@ export var StyledPlaceholder = styled.label.withConfig({
298
334
  }, tokens.inputFontFamily, tokens.inputFontSize, tokens.inputFontStyle, tokens.inputFontWeight, tokens.inputLetterSpacing, tokens.inputLineHeight);
299
335
  export var StyledIndicator = styled.div.withConfig({
300
336
  displayName: "TextArea.styles__StyledIndicator",
301
- componentId: "sc-2ff414ff-19"
337
+ componentId: "sc-5fcd62a1-23"
302
338
  })([
303
339
  "position:absolute;border-radius:50%;background-color:var(",
304
340
  ");&.",
@@ -14,7 +14,9 @@ export var classes = {
14
14
  hasHint: 'textarea-has-hint',
15
15
  hasRightContent: 'textarea-has-right-content',
16
16
  hasDivider: 'textarea-has-divider',
17
- requiredAlignRight: 'required-align-right'
17
+ requiredAlignRight: 'required-align-right',
18
+ hasHeaderSlot: 'textarea-has-header-slot',
19
+ styledContentWrapper: 'textarea-content-wrapper'
18
20
  };
19
21
  export var tokens = {
20
22
  /** Цвет фона для всего компонента */ backgroundColor: '--plasma-textarea-background-color',
@@ -1,3 +1,3 @@
1
1
  import { classes, tokens } from "../TextArea.tokens";
2
- var innerPlaceholderUp = classes.innerPlaceholderUp, hidePlaceHolder = classes.hidePlaceHolder, focusedOuterPlaceholderColor = classes.focusedOuterPlaceholderColor, styledTextArea = classes.styledTextArea, styledTextAreaWrapper = classes.styledTextAreaWrapper, styledPlaceholder = classes.styledPlaceholder;
3
- export var applyDynamicLabel = "\n .".concat(innerPlaceholderUp, " {\n .").concat(styledTextArea, " {\n height: calc(var(--plasma_private-textarea-input-actual-height) - var(").concat(tokens.labelInnerTop, ") - var(").concat(tokens.labelInnerTopHelper, ", 0px));\n }\n\n .").concat(styledTextAreaWrapper, " {\n padding-top: calc(calc(var(").concat(tokens.labelInnerTop, ") + var(").concat(tokens.labelInnerFontSize, ")) + var(").concat(tokens.labelInnerMarginBottom, "));\n }\n\n .").concat(styledPlaceholder, " {\n font-family: var(").concat(tokens.labelInnerFontFamily, ");\n font-size: var(").concat(tokens.labelInnerFontSize, ");\n font-style: var(").concat(tokens.labelInnerFontStyle, ");\n font-weight: var(").concat(tokens.labelInnerFontWeight, ");\n letter-spacing: var(").concat(tokens.labelInnerLetterSpacing, ");\n line-height: var(").concat(tokens.labelInnerLineHeight, ");\n top: var(").concat(tokens.labelInnerTop, ");\n }\n }\n\n .").concat(hidePlaceHolder, " .").concat(styledPlaceholder, " {\n display: none;\n }\n\n .").concat(focusedOuterPlaceholderColor, " .").concat(styledPlaceholder, " {\n color: var(").concat(tokens.placeholderColorFocus, ");\n }\n");
2
+ var innerPlaceholderUp = classes.innerPlaceholderUp, hidePlaceHolder = classes.hidePlaceHolder, focusedOuterPlaceholderColor = classes.focusedOuterPlaceholderColor, styledTextArea = classes.styledTextArea, styledTextAreaWrapper = classes.styledTextAreaWrapper, styledPlaceholder = classes.styledPlaceholder, hasHeaderSlot = classes.hasHeaderSlot, styledContentWrapper = classes.styledContentWrapper;
3
+ export var applyDynamicLabel = "\n .".concat(innerPlaceholderUp, " {\n .").concat(styledTextArea, " {\n height: calc(var(--plasma_private-textarea-input-actual-height) - var(").concat(tokens.labelInnerTop, ") - var(").concat(tokens.labelInnerTopHelper, ", 0px));\n }\n\n .").concat(styledTextAreaWrapper, " {\n padding-top: calc(calc(var(").concat(tokens.labelInnerTop, ") + var(").concat(tokens.labelInnerFontSize, ")) + var(").concat(tokens.labelInnerMarginBottom, "));\n }\n \n .").concat(hasHeaderSlot, " {\n padding-top: unset;\n\n .").concat(styledContentWrapper, " {\n padding-top: calc(calc(var(").concat(tokens.labelInnerTop, ") + var(").concat(tokens.labelInnerFontSize, ")) + var(").concat(tokens.labelInnerMarginBottom, "));\n }\n }\n\n .").concat(styledPlaceholder, " {\n font-family: var(").concat(tokens.labelInnerFontFamily, ");\n font-size: var(").concat(tokens.labelInnerFontSize, ");\n font-style: var(").concat(tokens.labelInnerFontStyle, ");\n font-weight: var(").concat(tokens.labelInnerFontWeight, ");\n letter-spacing: var(").concat(tokens.labelInnerLetterSpacing, ");\n line-height: var(").concat(tokens.labelInnerLineHeight, ");\n top: var(").concat(tokens.labelInnerTop, ");\n }\n }\n\n .").concat(hidePlaceHolder, " .").concat(styledPlaceholder, " {\n display: none;\n }\n\n .").concat(focusedOuterPlaceholderColor, " .").concat(styledPlaceholder, " {\n color: var(").concat(tokens.placeholderColorFocus, ");\n }\n");
@@ -1 +1 @@
1
- {"version":3,"file":"Drawer.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.styles.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AA8FtD,eAAO,MAAM,WAAW,0OAEvB,CAAC;AAEF,eAAO,MAAM,WAAW;eACT,eAAe;YAClB,MAAM,GAAG,MAAM;aACd,MAAM,GAAG,MAAM;kFA2C3B,CAAC"}
1
+ {"version":3,"file":"Drawer.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.styles.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AA8FtD,eAAO,MAAM,WAAW,0OAEvB,CAAC;AAEF,eAAO,MAAM,WAAW;eACT,eAAe;YAClB,MAAM,GAAG,MAAM;aACd,MAAM,GAAG,MAAM;kFAoC3B,CAAC"}