@salutejs/plasma-new-hope 0.321.1-canary.1931.14570122322.0 → 0.321.1-canary.1937.14653374486.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 (144) hide show
  1. package/cjs/components/Autocomplete/Autocomplete.css +22 -22
  2. package/cjs/components/Combobox/ComboboxNew/Combobox.css +22 -22
  3. package/cjs/components/DatePicker/RangeDate/RangeDate.css +22 -22
  4. package/cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.css +22 -22
  5. package/cjs/components/DatePicker/SingleDate/SingleDate.css +22 -22
  6. package/cjs/components/Pagination/Pagination.css +22 -22
  7. package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +22 -22
  8. package/cjs/components/Range/Range.css +22 -22
  9. package/cjs/components/Select/Select.css +22 -22
  10. package/cjs/components/Select/ui/Target/Target.css +22 -22
  11. package/cjs/components/Select/ui/Target/ui/Textfield/Textfield.css +22 -22
  12. package/cjs/components/Slider/Slider.css +22 -22
  13. package/cjs/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.css +22 -22
  14. package/cjs/components/Table/Table.css +22 -22
  15. package/cjs/components/Table/ui/Cell/Cell.css +22 -22
  16. package/cjs/components/Table/ui/EditableCell/EditableCell.css +22 -22
  17. package/cjs/components/Table/ui/HeadCell/HeadCell.css +22 -22
  18. package/cjs/components/Table/ui/HeadCell/ui/Filter/Filter.css +22 -22
  19. package/cjs/components/TextField/TextField.styles.js +17 -17
  20. package/cjs/components/TextField/TextField.styles.js.map +1 -1
  21. package/cjs/components/TextField/{TextField.styles_1cdp5eg.css → TextField.styles_1895ept.css} +1 -1
  22. package/cjs/components/TextField/ui/Hint/Hint.css +20 -20
  23. package/cjs/index.css +22 -22
  24. package/emotion/cjs/components/Accordion/Accordion.template-doc.mdx +71 -99
  25. package/emotion/cjs/components/Autocomplete/Autocomplete.template-doc.mdx +454 -523
  26. package/emotion/cjs/components/Checkbox/Checkbox.template-doc.mdx +3 -3
  27. package/emotion/cjs/components/Combobox/Combobox.template-doc.mdx +27 -58
  28. package/emotion/cjs/components/DatePicker/DatePicker.template-doc.mdx +0 -5
  29. package/emotion/cjs/components/Dropdown/Dropdown.template-doc.mdx +10 -10
  30. package/emotion/cjs/components/Flow/Flow.template-doc.mdx +2 -2
  31. package/emotion/cjs/components/Notification/Notification.template-doc.mdx +1 -10
  32. package/emotion/cjs/components/NumberFormat/NumberFormat.template-doc.mdx +4 -4
  33. package/emotion/cjs/components/Radiobox/Radiobox.template-doc.mdx +11 -10
  34. package/emotion/cjs/components/Range/Range.template-doc.mdx +1 -5
  35. package/emotion/cjs/components/Segment/Segment.template-doc.mdx +3 -3
  36. package/emotion/cjs/components/Select/Select.template-doc.mdx +27 -27
  37. package/emotion/cjs/components/Slider/Slider.template-doc.mdx +2 -2
  38. package/emotion/cjs/components/Switch/Switch.template-doc.mdx +3 -3
  39. package/emotion/cjs/components/Table/Table.template-doc.mdx +2 -2
  40. package/emotion/cjs/components/Tabs/Tabs.template-doc.mdx +7 -11
  41. package/emotion/cjs/components/TextArea/TextArea.template-doc.mdx +2 -9
  42. package/emotion/cjs/components/TextField/TextField.styles.js +23 -30
  43. package/emotion/cjs/components/TextField/TextField.template-doc.mdx +32 -117
  44. package/emotion/cjs/components/Toast/Toast.template-doc.mdx +2 -48
  45. package/emotion/cjs/components/Tooltip/Tooltip.template-doc.mdx +4 -19
  46. package/emotion/cjs/components/Tree/Tree.template-doc.mdx +1 -0
  47. package/emotion/es/components/Accordion/Accordion.template-doc.mdx +71 -99
  48. package/emotion/es/components/Autocomplete/Autocomplete.template-doc.mdx +454 -523
  49. package/emotion/es/components/Checkbox/Checkbox.template-doc.mdx +3 -3
  50. package/emotion/es/components/Combobox/Combobox.template-doc.mdx +27 -58
  51. package/emotion/es/components/DatePicker/DatePicker.template-doc.mdx +0 -5
  52. package/emotion/es/components/Dropdown/Dropdown.template-doc.mdx +10 -10
  53. package/emotion/es/components/Flow/Flow.template-doc.mdx +2 -2
  54. package/emotion/es/components/Notification/Notification.template-doc.mdx +1 -10
  55. package/emotion/es/components/NumberFormat/NumberFormat.template-doc.mdx +4 -4
  56. package/emotion/es/components/Radiobox/Radiobox.template-doc.mdx +11 -10
  57. package/emotion/es/components/Range/Range.template-doc.mdx +1 -5
  58. package/emotion/es/components/Segment/Segment.template-doc.mdx +3 -3
  59. package/emotion/es/components/Select/Select.template-doc.mdx +27 -27
  60. package/emotion/es/components/Slider/Slider.template-doc.mdx +2 -2
  61. package/emotion/es/components/Switch/Switch.template-doc.mdx +3 -3
  62. package/emotion/es/components/Table/Table.template-doc.mdx +2 -2
  63. package/emotion/es/components/Tabs/Tabs.template-doc.mdx +7 -11
  64. package/emotion/es/components/TextArea/TextArea.template-doc.mdx +2 -9
  65. package/emotion/es/components/TextField/TextField.styles.js +23 -30
  66. package/emotion/es/components/TextField/TextField.template-doc.mdx +32 -117
  67. package/emotion/es/components/Toast/Toast.template-doc.mdx +2 -48
  68. package/emotion/es/components/Tooltip/Tooltip.template-doc.mdx +4 -19
  69. package/emotion/es/components/Tree/Tree.template-doc.mdx +1 -0
  70. package/es/components/Autocomplete/Autocomplete.css +22 -22
  71. package/es/components/Combobox/ComboboxNew/Combobox.css +22 -22
  72. package/es/components/DatePicker/RangeDate/RangeDate.css +22 -22
  73. package/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.css +22 -22
  74. package/es/components/DatePicker/SingleDate/SingleDate.css +22 -22
  75. package/es/components/Pagination/Pagination.css +22 -22
  76. package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +22 -22
  77. package/es/components/Range/Range.css +22 -22
  78. package/es/components/Select/Select.css +22 -22
  79. package/es/components/Select/ui/Target/Target.css +22 -22
  80. package/es/components/Select/ui/Target/ui/Textfield/Textfield.css +22 -22
  81. package/es/components/Slider/Slider.css +22 -22
  82. package/es/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.css +22 -22
  83. package/es/components/Table/Table.css +22 -22
  84. package/es/components/Table/ui/Cell/Cell.css +22 -22
  85. package/es/components/Table/ui/EditableCell/EditableCell.css +22 -22
  86. package/es/components/Table/ui/HeadCell/HeadCell.css +22 -22
  87. package/es/components/Table/ui/HeadCell/ui/Filter/Filter.css +22 -22
  88. package/es/components/TextField/TextField.styles.js +17 -17
  89. package/es/components/TextField/TextField.styles.js.map +1 -1
  90. package/es/components/TextField/{TextField.styles_1cdp5eg.css → TextField.styles_1895ept.css} +1 -1
  91. package/es/components/TextField/ui/Hint/Hint.css +20 -20
  92. package/es/index.css +22 -22
  93. package/package.json +4 -4
  94. package/styled-components/cjs/components/Accordion/Accordion.template-doc.mdx +71 -99
  95. package/styled-components/cjs/components/Autocomplete/Autocomplete.template-doc.mdx +454 -523
  96. package/styled-components/cjs/components/Checkbox/Checkbox.template-doc.mdx +3 -3
  97. package/styled-components/cjs/components/Combobox/Combobox.template-doc.mdx +27 -58
  98. package/styled-components/cjs/components/DatePicker/DatePicker.template-doc.mdx +0 -5
  99. package/styled-components/cjs/components/Dropdown/Dropdown.template-doc.mdx +10 -10
  100. package/styled-components/cjs/components/Flow/Flow.template-doc.mdx +2 -2
  101. package/styled-components/cjs/components/Notification/Notification.template-doc.mdx +1 -10
  102. package/styled-components/cjs/components/NumberFormat/NumberFormat.template-doc.mdx +4 -4
  103. package/styled-components/cjs/components/Radiobox/Radiobox.template-doc.mdx +11 -10
  104. package/styled-components/cjs/components/Range/Range.template-doc.mdx +1 -5
  105. package/styled-components/cjs/components/Segment/Segment.template-doc.mdx +3 -3
  106. package/styled-components/cjs/components/Select/Select.template-doc.mdx +27 -27
  107. package/styled-components/cjs/components/Slider/Slider.template-doc.mdx +2 -2
  108. package/styled-components/cjs/components/Switch/Switch.template-doc.mdx +3 -3
  109. package/styled-components/cjs/components/Table/Table.template-doc.mdx +2 -2
  110. package/styled-components/cjs/components/Tabs/Tabs.template-doc.mdx +7 -11
  111. package/styled-components/cjs/components/TextArea/TextArea.template-doc.mdx +2 -9
  112. package/styled-components/cjs/components/TextField/TextField.styles.js +2 -1
  113. package/styled-components/cjs/components/TextField/TextField.template-doc.mdx +32 -117
  114. package/styled-components/cjs/components/Toast/Toast.template-doc.mdx +2 -48
  115. package/styled-components/cjs/components/Tooltip/Tooltip.template-doc.mdx +4 -19
  116. package/styled-components/cjs/components/Tree/Tree.template-doc.mdx +1 -0
  117. package/styled-components/es/components/Accordion/Accordion.template-doc.mdx +71 -99
  118. package/styled-components/es/components/Autocomplete/Autocomplete.template-doc.mdx +454 -523
  119. package/styled-components/es/components/Checkbox/Checkbox.template-doc.mdx +3 -3
  120. package/styled-components/es/components/Combobox/Combobox.template-doc.mdx +27 -58
  121. package/styled-components/es/components/DatePicker/DatePicker.template-doc.mdx +0 -5
  122. package/styled-components/es/components/Dropdown/Dropdown.template-doc.mdx +10 -10
  123. package/styled-components/es/components/Flow/Flow.template-doc.mdx +2 -2
  124. package/styled-components/es/components/Notification/Notification.template-doc.mdx +1 -10
  125. package/styled-components/es/components/NumberFormat/NumberFormat.template-doc.mdx +4 -4
  126. package/styled-components/es/components/Radiobox/Radiobox.template-doc.mdx +11 -10
  127. package/styled-components/es/components/Range/Range.template-doc.mdx +1 -5
  128. package/styled-components/es/components/Segment/Segment.template-doc.mdx +3 -3
  129. package/styled-components/es/components/Select/Select.template-doc.mdx +27 -27
  130. package/styled-components/es/components/Slider/Slider.template-doc.mdx +2 -2
  131. package/styled-components/es/components/Switch/Switch.template-doc.mdx +3 -3
  132. package/styled-components/es/components/Table/Table.template-doc.mdx +2 -2
  133. package/styled-components/es/components/Tabs/Tabs.template-doc.mdx +7 -11
  134. package/styled-components/es/components/TextArea/TextArea.template-doc.mdx +2 -9
  135. package/styled-components/es/components/TextField/TextField.styles.js +2 -1
  136. package/styled-components/es/components/TextField/TextField.template-doc.mdx +32 -117
  137. package/styled-components/es/components/Toast/Toast.template-doc.mdx +2 -48
  138. package/styled-components/es/components/Tooltip/Tooltip.template-doc.mdx +4 -19
  139. package/styled-components/es/components/Tree/Tree.template-doc.mdx +1 -0
  140. package/types/components/TextField/TextField.styles.d.ts.map +1 -1
  141. /package/emotion/cjs/components/Combobox/ComboboxOld/{Combobox.doc.mdx → Combobox.template-doc.mdx} +0 -0
  142. /package/emotion/es/components/Combobox/ComboboxOld/{Combobox.doc.mdx → Combobox.template-doc.mdx} +0 -0
  143. /package/styled-components/cjs/components/Combobox/ComboboxOld/{Combobox.doc.mdx → Combobox.template-doc.mdx} +0 -0
  144. /package/styled-components/es/components/Combobox/ComboboxOld/{Combobox.doc.mdx → Combobox.template-doc.mdx} +0 -0
package/cjs/index.css CHANGED
@@ -189,28 +189,28 @@
189
189
 
190
190
  .base_z7a2uf_b10o15xy__b340e41b .base_z7a2uf_hgy0im1__b340e41b{--plasma-tooltip-padding-top:var(--plasma-textfield__tooltip-padding-top);--plasma-tooltip-padding-right:var(--plasma-textfield__tooltip-padding-right);--plasma-tooltip-padding-bottom:var(--plasma-textfield__tooltip-padding-bottom);--plasma-tooltip-padding-left:var(--plasma-textfield__tooltip-padding-left);--plasma-tooltip-min-height:var(--plasma-textfield__tooltip-min-height);--plasma-tooltip-border-radius:var(--plasma-textfield__tooltip-border-radius);--plasma-tooltip-text-font-family:var(--plasma-textfield__tooltip-text-font-family);--plasma-tooltip-text-font-size:var(--plasma-textfield__tooltip-text-font-size);--plasma-tooltip-text-font-style:var(--plasma-textfield__tooltip-text-font-style);--plasma-tooltip-text-font-weight:var(--plasma-textfield__tooltip-text-font-weight);--plasma-tooltip-text-font-letter-spacing:var(--plasma-textfield__tooltip-text-font-letter-spacing);--plasma-tooltip-text-font-line-height:var(--plasma-textfield__tooltip-text-font-line-height);--plasma-tooltip-content-left-margin:var(--plasma-textfield__tooltip-content-left-margin);--plasma-tooltip-arrow-mask-width:var(--plasma-textfield__tooltip-arrow-mask-width);--plasma-tooltip-arrow-mask-height:var(--plasma-textfield__tooltip-arrow-mask-height);--plasma-tooltip-arrow-mask-image:var(--plasma-textfield__tooltip-arrow-mask-image);--plasma-tooltip-arrow-height:var(--plasma-textfield__tooltip-arrow-height);--plasma-tooltip-arrow-edge-margin:var(--plasma-textfield__tooltip-arrow-edge-margin);--plasma-tooltip-arrow-background:var(--plasma-textfield__tooltip-arrow-background);}
191
191
 
192
- .TextField_styles_1cdp5eg_iq39zt5__dcbef05d{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;}
193
- .TextField_styles_1cdp5eg_i1j28rg8__dcbef05d{-webkit-flex:1;-ms-flex:1;flex:1;overflow:scroll;position:relative;width:100%;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;overscroll-behavior:contain;}.TextField_styles_1cdp5eg_i1j28rg8__dcbef05d::-webkit-scrollbar{display:none;}.TextField_styles_1cdp5eg_i1j28rg8__dcbef05d.TextField_styles_1cdp5eg_hasChips__dcbef05d{height:var(--plasma-textfield__chip-height);border-radius:var(--plasma-textfield__chip-border-radius);}
194
- .TextField_styles_1cdp5eg_s13zudoe__dcbef05d{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--plasma-textfield__chip-gap);margin-right:var(--plasma-textfield__chip-margin-right,var(--plasma-textfield__chip-gap));-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
195
- .TextField_styles_1cdp5eg_io4bpie__dcbef05d{box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;padding:0;background-color:transparent;outline:none;width:100%;z-index:1;}.TextField_styles_1cdp5eg_io4bpie__dcbef05d::-webkit-input-placeholder{opacity:0;}.TextField_styles_1cdp5eg_io4bpie__dcbef05d::-moz-placeholder{opacity:0;}.TextField_styles_1cdp5eg_io4bpie__dcbef05d:-ms-input-placeholder{opacity:0;}.TextField_styles_1cdp5eg_io4bpie__dcbef05d::placeholder{opacity:0;}
196
- .TextField_styles_1cdp5eg_i13qvwoy__dcbef05d{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;min-width:var(--i13qvwoy-0);}.TextField_styles_1cdp5eg_i13qvwoy__dcbef05d .TextField_styles_1cdp5eg_io4bpie__dcbef05d{max-width:var(--i13qvwoy-1);}
197
- .TextField_styles_1cdp5eg_i19ry60d__dcbef05d{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;white-space:nowrap;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font:inherit;-webkit-letter-spacing:inherit;-moz-letter-spacing:inherit;-ms-letter-spacing:inherit;letter-spacing:inherit;line-height:inherit;color:var(--plasma-textfield__placeholder-color);padding:var(--i19ry60d-0);}
198
- .TextField_styles_1cdp5eg_obt1ohz__dcbef05d{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;white-space:var(--obt1ohz-0);margin-bottom:var(--obt1ohz-1);}
199
- .TextField_styles_1cdp5eg_tlv9av6__dcbef05d{display:inline-block;margin-left:auto;}
200
- .TextField_styles_1cdp5eg_s600610__dcbef05d{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
201
- .TextField_styles_1cdp5eg_luk2zst__dcbef05d{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}
202
- .TextField_styles_1cdp5eg_s1gjsnfi__dcbef05d{margin:var(--plasma-textfield__left-content-margin);color:var(--s1gjsnfi-0);line-height:0;}
203
- .TextField_styles_1cdp5eg_ssv2kwg__dcbef05d{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
204
- .TextField_styles_1cdp5eg_s190z894__dcbef05d{line-height:0;margin:var(--plasma-textfield__right-content-margin);color:var(--plasma-textfield-content-right-slot-color,var(--plasma-textfield-content-slot-color));}.TextField_styles_1cdp5eg_s190z894__dcbef05d:hover{color:var(--plasma-textfield-content-right-slot-color-hover,var(--plasma-textfield-content-slot-color-hover));cursor:pointer;}.TextField_styles_1cdp5eg_s190z894__dcbef05d:active{color:var(--plasma-textfield-content-right-slot-color-active,var(--plasma-textfield-content-slot-color-active));}
205
-
206
- .TextField_styles_1cdp5eg_s7hnwwb__dcbef05d{visibility:var(--s7hnwwb-0);}
207
-
208
- .TextField_styles_1cdp5eg_s14qvple__dcbef05d{color:var(--plasma-textfield__optional-color);}
209
- .TextField_styles_1cdp5eg_s16itze4__dcbef05d{display:inline-block;line-height:0;}.TextField_styles_1cdp5eg_s16itze4__dcbef05d.TextField_styles_1cdp5eg_labelPlacementInner__dcbef05d{position:absolute;margin:0;inset:var(--plasma-textfield__hint-inner-label-placement-offset);}
210
- .TextField_styles_1cdp5eg_h1skqnhr__dcbef05d{color:var(--plasma-textfield__hint-icon-color);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
211
- .TextField_styles_1cdp5eg_hgy0im1__dcbef05d .TextField_styles_1cdp5eg_h1skqnhr__dcbef05d .TextField_styles_1cdp5eg_popoverRoot__dcbef05d{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;}
212
- .TextField_styles_1cdp5eg_h8yezh4__dcbef05d{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
213
- .TextField_styles_1cdp5eg_szsveq4__dcbef05d{position:absolute;border-radius:50%;background-color:var(--plasma-textfield__indicator-color);}.TextField_styles_1cdp5eg_szsveq4__dcbef05d.TextField_styles_1cdp5eg_labelPlacementOuter__dcbef05d{width:var(--plasma-textfield__indicator-size-outer);height:var(--plasma-textfield__indicator-size-outer);inset:var(--plasma-textfield__indicator-placement-outer);}.TextField_styles_1cdp5eg_szsveq4__dcbef05d.TextField_styles_1cdp5eg_labelPlacementOuter__dcbef05d.TextField_styles_1cdp5eg_requiredAlignRight__dcbef05d{inset:var(--plasma-textfield__indicator-placement-outer-right);}.TextField_styles_1cdp5eg_szsveq4__dcbef05d.TextField_styles_1cdp5eg_labelPlacementOuter__dcbef05d.TextField_styles_1cdp5eg_requiredAlignRight__dcbef05d.TextField_styles_1cdp5eg_textfieldHasHint__dcbef05d{right:calc( -1 * var(--plasma-textfield__indicator-size-outer) + var(--plasma-textfield__indicator-hint-placement-outer-right,0px) );}.TextField_styles_1cdp5eg_szsveq4__dcbef05d.TextField_styles_1cdp5eg_labelPlacementInner__dcbef05d{width:var(--plasma-textfield__indicator-size-inner);height:var(--plasma-textfield__indicator-size-inner);inset:var(--plasma-textfield__indicator-placement-inner);}.TextField_styles_1cdp5eg_szsveq4__dcbef05d.TextField_styles_1cdp5eg_labelPlacementInner__dcbef05d.TextField_styles_1cdp5eg_requiredAlignRight__dcbef05d{inset:var(--plasma-textfield__indicator-placement-inner-right);}
192
+ .TextField_styles_1895ept_iq39zt5__ebba80b9{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;}
193
+ .TextField_styles_1895ept_i1j28rg8__ebba80b9{-webkit-flex:1;-ms-flex:1;flex:1;overflow:scroll;position:relative;width:100%;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;overscroll-behavior:contain;}.TextField_styles_1895ept_i1j28rg8__ebba80b9::-webkit-scrollbar{display:none;}.TextField_styles_1895ept_i1j28rg8__ebba80b9.TextField_styles_1895ept_hasChips__ebba80b9{height:var(--plasma-textfield__chip-height);border-radius:var(--plasma-textfield__chip-border-radius);}
194
+ .TextField_styles_1895ept_s13zudoe__ebba80b9{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--plasma-textfield__chip-gap);margin-right:var(--plasma-textfield__chip-margin-right,var(--plasma-textfield__chip-gap));-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
195
+ .TextField_styles_1895ept_io4bpie__ebba80b9{box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;padding:0;background-color:transparent;outline:none;width:100%;z-index:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.TextField_styles_1895ept_io4bpie__ebba80b9::-webkit-input-placeholder{opacity:0;}.TextField_styles_1895ept_io4bpie__ebba80b9::-moz-placeholder{opacity:0;}.TextField_styles_1895ept_io4bpie__ebba80b9:-ms-input-placeholder{opacity:0;}.TextField_styles_1895ept_io4bpie__ebba80b9::placeholder{opacity:0;}
196
+ .TextField_styles_1895ept_i13qvwoy__ebba80b9{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;min-width:var(--i13qvwoy-0);}.TextField_styles_1895ept_i13qvwoy__ebba80b9 .TextField_styles_1895ept_io4bpie__ebba80b9{max-width:var(--i13qvwoy-1);}
197
+ .TextField_styles_1895ept_i19ry60d__ebba80b9{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;white-space:nowrap;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font:inherit;-webkit-letter-spacing:inherit;-moz-letter-spacing:inherit;-ms-letter-spacing:inherit;letter-spacing:inherit;line-height:inherit;color:var(--plasma-textfield__placeholder-color);padding:var(--i19ry60d-0);}
198
+ .TextField_styles_1895ept_obt1ohz__ebba80b9{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;white-space:var(--obt1ohz-0);margin-bottom:var(--obt1ohz-1);}
199
+ .TextField_styles_1895ept_tlv9av6__ebba80b9{display:inline-block;margin-left:auto;}
200
+ .TextField_styles_1895ept_s600610__ebba80b9{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
201
+ .TextField_styles_1895ept_luk2zst__ebba80b9{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}
202
+ .TextField_styles_1895ept_s1gjsnfi__ebba80b9{margin:var(--plasma-textfield__left-content-margin);color:var(--s1gjsnfi-0);line-height:0;}
203
+ .TextField_styles_1895ept_ssv2kwg__ebba80b9{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
204
+ .TextField_styles_1895ept_s190z894__ebba80b9{line-height:0;margin:var(--plasma-textfield__right-content-margin);color:var(--plasma-textfield-content-right-slot-color,var(--plasma-textfield-content-slot-color));}.TextField_styles_1895ept_s190z894__ebba80b9:hover{color:var(--plasma-textfield-content-right-slot-color-hover,var(--plasma-textfield-content-slot-color-hover));cursor:pointer;}.TextField_styles_1895ept_s190z894__ebba80b9:active{color:var(--plasma-textfield-content-right-slot-color-active,var(--plasma-textfield-content-slot-color-active));}
205
+
206
+ .TextField_styles_1895ept_s7hnwwb__ebba80b9{visibility:var(--s7hnwwb-0);}
207
+
208
+ .TextField_styles_1895ept_s14qvple__ebba80b9{color:var(--plasma-textfield__optional-color);}
209
+ .TextField_styles_1895ept_s16itze4__ebba80b9{display:inline-block;line-height:0;}.TextField_styles_1895ept_s16itze4__ebba80b9.TextField_styles_1895ept_labelPlacementInner__ebba80b9{position:absolute;margin:0;inset:var(--plasma-textfield__hint-inner-label-placement-offset);}
210
+ .TextField_styles_1895ept_h1skqnhr__ebba80b9{color:var(--plasma-textfield__hint-icon-color);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
211
+ .TextField_styles_1895ept_hgy0im1__ebba80b9 .TextField_styles_1895ept_h1skqnhr__ebba80b9 .TextField_styles_1895ept_popoverRoot__ebba80b9{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;}
212
+ .TextField_styles_1895ept_h8yezh4__ebba80b9{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
213
+ .TextField_styles_1895ept_szsveq4__ebba80b9{position:absolute;border-radius:50%;background-color:var(--plasma-textfield__indicator-color);}.TextField_styles_1895ept_szsveq4__ebba80b9.TextField_styles_1895ept_labelPlacementOuter__ebba80b9{width:var(--plasma-textfield__indicator-size-outer);height:var(--plasma-textfield__indicator-size-outer);inset:var(--plasma-textfield__indicator-placement-outer);}.TextField_styles_1895ept_szsveq4__ebba80b9.TextField_styles_1895ept_labelPlacementOuter__ebba80b9.TextField_styles_1895ept_requiredAlignRight__ebba80b9{inset:var(--plasma-textfield__indicator-placement-outer-right);}.TextField_styles_1895ept_szsveq4__ebba80b9.TextField_styles_1895ept_labelPlacementOuter__ebba80b9.TextField_styles_1895ept_requiredAlignRight__ebba80b9.TextField_styles_1895ept_textfieldHasHint__ebba80b9{right:calc( -1 * var(--plasma-textfield__indicator-size-outer) + var(--plasma-textfield__indicator-hint-placement-outer-right,0px) );}.TextField_styles_1895ept_szsveq4__ebba80b9.TextField_styles_1895ept_labelPlacementInner__ebba80b9{width:var(--plasma-textfield__indicator-size-inner);height:var(--plasma-textfield__indicator-size-inner);inset:var(--plasma-textfield__indicator-placement-inner);}.TextField_styles_1895ept_szsveq4__ebba80b9.TextField_styles_1895ept_labelPlacementInner__ebba80b9.TextField_styles_1895ept_requiredAlignRight__ebba80b9{inset:var(--plasma-textfield__indicator-placement-inner-right);}
214
214
 
215
215
  .TextFieldChip_styles_hep428_s32p7ut__9a731a0d{--plasma-chip-color:var(--plasma-textfield__chip-color);--plasma-chip-background:var(--plasma-textfield__chip-background);--plasma-chip-color-hover:var(--plasma-textfield__chip-color-hover);--plasma-chip-background-hover:var(--plasma-textfield__chip-background-hover);--plasma-chip-color-active:var(--plasma-textfield__chip-color-active);--plasma-chip-background-active:var(--plasma-textfield__chip-background-active);--plasma-chip-background-readonly:var(--plasma-textfield__chip-background-readonly);--plasma-chip-color-readonly:var(--plasma-textfield__chip-color-readonly);--plasma-chip-background-readonly-hover:var(--plasma-textfield__chip-background-readonly-hover);--plasma-chip-color-readonly-hover:var(--plasma-textfield__chip-color-readonly-hover);--plasma-chip-border-radius:var(--plasma-textfield__chip-border-radius);--plasma-chip-width:var(--plasma-textfield__chip-width);--plasma-chip-height:var(--plasma-textfield__chip-height);--plasma-chip-padding:var(--plasma-textfield__chip-padding);--plasma-chip-font-family:var(--plasma-textfield__chip-font-family);--plasma-chip-font-size:var(--plasma-textfield__chip-font-size);--plasma-chip-font-style:var(--plasma-textfield__chip-font-style);--plasma-chip-font-weight:var(--plasma-textfield__chip-font-weight);--plasma-chip-letter-spacing:var(--plasma-textfield__chip-letter-spacing);--plasma-chip-lineheight:var(--plasma-textfield__chip-line-height);--plasma-chip-clear-content-margin-left:var(--plasma-textfield__chip-clear-content-margin-left);--plasma-chip-clear-content-margin-right:var(--plasma-textfield__chip-clear-content-margin-right);--plasma-chip-scale-hover:var(--plasma-textfield__chip-scale-hover);--plasma-chip-scale-active:var(--plasma-textfield__chip-scale-active);--plasma-chip-close-icon-size:var(--plasma-textfield__chip-close-icon-size);--plasma-chip-close-icon-color:var(--plasma-textfield__chip-close-icon-color);--plasma-chip-focus-color:var(--plasma-textfield-focus-color);-webkit-scroll-snap-align:center;-moz-scroll-snap-align:center;-ms-scroll-snap-align:center;scroll-snap-align:center;-webkit-scroll-snap-stop:normal;-moz-scroll-snap-stop:normal;-ms-scroll-snap-stop:normal;scroll-snap-stop:normal;position:relative;}.TextFieldChip_styles_hep428_s32p7ut__9a731a0d::before{content:'';position:absolute;top:0.0625rem;left:0.0625rem;right:0.0625rem;bottom:0.0625rem;z-index:1;display:block;box-sizing:content-box;border:0.0625rem solid transparent;border-radius:calc(var(--plasma-textfield__chip-border-radius) - 0.1rem);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.TextFieldChip_styles_hep428_s32p7ut__9a731a0d.TextFieldChip_styles_hep428_focusVisible__9a731a0d:focus::before,.TextFieldChip_styles_hep428_s32p7ut__9a731a0d[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.0625rem var(--plasma-textfield-focus-color);}.TextFieldChip_styles_hep428_s32p7ut__9a731a0d[readonly]{opacity:var(--plasma-textfield__chip-opacity-readonly);}
216
216
  .TextFieldChip_styles_hep428_t4nir3h__9a731a0d{display:block;-webkit-flex:none;-ms-flex:none;flex:none;background:none;border:none;outline:none;padding:0;white-space:nowrap;cursor:pointer;font-family:var(--plasma-textfield-font-family);font-size:var(--plasma-textfield-font-size);font-style:var(--plasma-textfield-font-style);font-weight:var(--plasma-textfield-font-weight);-webkit-letter-spacing:var(--plasma-textfield-letter-spacing);-moz-letter-spacing:var(--plasma-textfield-letter-spacing);-ms-letter-spacing:var(--plasma-textfield-letter-spacing);letter-spacing:var(--plasma-textfield-letter-spacing);line-height:var(--plasma-textfield-line-height);color:var(--plasma-textfield-color);position:relative;}.TextFieldChip_styles_hep428_t4nir3h__9a731a0d::before{content:'';position:absolute;top:0.0625rem;left:0.0625rem;right:0.0625rem;bottom:0.0625rem;z-index:1;display:block;box-sizing:content-box;border:0.0625rem solid transparent;border-radius:calc(var(--plasma-textfield__chip-border-radius) - 0.1rem);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.TextFieldChip_styles_hep428_t4nir3h__9a731a0d.TextFieldChip_styles_hep428_focusVisible__9a731a0d:focus::before,.TextFieldChip_styles_hep428_t4nir3h__9a731a0d[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.0625rem var(--plasma-textfield-focus-color);}.TextFieldChip_styles_hep428_t4nir3h__9a731a0d:after{content:',';}.TextFieldChip_styles_hep428_t4nir3h__9a731a0d:last-child:after{content:'';}
@@ -15,7 +15,7 @@ import TabItem from '@theme/TabItem';
15
15
  Компонент выпадающей информации
16
16
  <PropsTable name="AccordionItem" exclude={['value']} />
17
17
 
18
- Компонент представляет собой заголовок и контент, который раскрывается при нажатии.
18
+ Компонент представляет собой заголовок и контент, который раскрывается при нажатии.
19
19
 
20
20
  ## Примеры Accordion
21
21
 
@@ -35,10 +35,10 @@ import TabItem from '@theme/TabItem';
35
35
  </Accordion>
36
36
  </div>
37
37
  );
38
- }
38
+ }
39
39
  ```
40
40
  </TabItem>
41
- <TabItem value="view" label="View">
41
+ <TabItem value="view" label="View">
42
42
  ```tsx live
43
43
  import React from 'react';
44
44
  import { Accordion, AccordionItem } from '@salutejs/{{ package }}';
@@ -61,106 +61,78 @@ import TabItem from '@theme/TabItem';
61
61
  </Accordion>
62
62
  </div>
63
63
  </div>
64
- );
65
- }
66
- ```
67
- </TabItem>
68
- <TabItem value="size" label="Size">
69
- ```tsx live
70
- import React from 'react';
71
- import { Accordion, AccordionItem } from '@salutejs/{{ package }}';
64
+ );
65
+ }
66
+ ```
67
+ </TabItem>
68
+ <TabItem value="size" label="Size">
69
+ ```tsx live
70
+ import React from 'react';
71
+ import { Accordion, AccordionItem } from '@salutejs/{{ package }}';
72
72
 
73
- export function App() {
74
- return (
75
- <div style=\{{"width": "100%", "display": "flex", "flex-direction": "column"}}>
76
- <div style=\{{"width": "100%"}}>
77
- <Accordion size="xs">
78
- <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
79
- <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
80
- <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
81
- </Accordion>
82
- </div>
83
- <div style=\{{"width": "100%"}}>
84
- <Accordion size="s">
85
- <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
86
- <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
87
- <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
88
- </Accordion>
89
- </div>
90
- <div style=\{{"width": "100%"}}>
91
- <Accordion size="m">
92
- <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
93
- <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
94
- <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
95
- </Accordion>
96
- </div>
97
- <div style=\{{"width": "100%"}}>
98
- <Accordion size="l">
99
- <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
100
- <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
101
- <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
102
- </Accordion>
103
- </div>
104
- <div style=\{{"width": "100%"}}>
105
- <Accordion size="h2">
106
- <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
107
- <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
108
- <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
109
- </Accordion>
110
- </div>
111
- <div style=\{{"width": "100%"}}>
112
- <Accordion size="h3">
113
- <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
114
- <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
115
- <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
116
- </Accordion>
117
- </div>
118
- <div style=\{{"width": "100%"}}>
119
- <Accordion size="h4">
120
- <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
121
- <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
122
- <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
123
- </Accordion>
124
- </div>
125
- <div style=\{{"width": "100%"}}>
126
- <Accordion size="h5">
127
- <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
128
- <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
129
- <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
130
- </Accordion>
73
+ export function App() {
74
+ return (
75
+ <div style=\{{"width": "100%", "display": "flex", "flex-direction": "column"}}>
76
+ <div style=\{{"width": "100%"}}>
77
+ <Accordion size="xs">
78
+ <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
79
+ <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
80
+ <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
81
+ </Accordion>
82
+ </div>
83
+ <div style=\{{"width": "100%"}}>
84
+ <Accordion size="s">
85
+ <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
86
+ <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
87
+ <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
88
+ </Accordion>
89
+ </div>
90
+ <div style=\{{"width": "100%"}}>
91
+ <Accordion size="m">
92
+ <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
93
+ <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
94
+ <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
95
+ </Accordion>
96
+ </div>
97
+ <div style=\{{"width": "100%"}}>
98
+ <Accordion size="l">
99
+ <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
100
+ <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
101
+ <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
102
+ </Accordion>
103
+ </div>
131
104
  </div>
132
- </div>
133
- );
134
- }
135
- ```
136
- </TabItem>
137
- <TabItem value="stretching" label="Stretching">
138
- ```tsx live
139
- import React from 'react';
140
- import { Accordion, AccordionItem } from '@salutejs/{{ package }}';
105
+ );
106
+ }
107
+ ```
108
+ </TabItem>
109
+ <TabItem value="stretching" label="Stretching">
110
+ ```tsx live
111
+ import React from 'react';
112
+ import { Accordion, AccordionItem } from '@salutejs/{{ package }}';
141
113
 
142
- export function App() {
143
- return (
144
- <div style=\{{"width": "100%", "display": "flex", "flex-direction": "column"}}>
145
- <div style=\{{"width": "100%"}}>
146
- <Accordion>
147
- <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
148
- <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
149
- <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
150
- </Accordion>
151
- </div>
152
- <div style=\{{"width": "100%"}}>
153
- <Accordion stretching="fixed">
154
- <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
155
- <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
156
- <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
157
- </Accordion>
114
+ export function App() {
115
+ return (
116
+ <div style=\{{"width": "100%", "display": "flex", "flex-direction": "column"}}>
117
+ <div style=\{{"width": "100%"}}>
118
+ <Accordion>
119
+ <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
120
+ <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
121
+ <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
122
+ </Accordion>
123
+ </div>
124
+ <div style=\{{"width": "100%"}}>
125
+ <Accordion stretching="fixed">
126
+ <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
127
+ <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
128
+ <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
129
+ </Accordion>
130
+ </div>
158
131
  </div>
159
- </div>
160
- );
161
- }
162
- ```
163
- </TabItem>
132
+ );
133
+ }
134
+ ```
135
+ </TabItem>
164
136
  </Tabs>
165
137
 
166
138
  ### Использование Accordion в Controlled варианте