@salutejs/plasma-new-hope 0.322.0-canary.1941.14638918350.0 → 0.322.0-canary.1944.14660891986.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 (99) hide show
  1. package/emotion/cjs/components/Accordion/Accordion.template-doc.mdx +99 -71
  2. package/emotion/cjs/components/Autocomplete/Autocomplete.template-doc.mdx +523 -454
  3. package/emotion/cjs/components/Checkbox/Checkbox.template-doc.mdx +3 -3
  4. package/emotion/cjs/components/Combobox/Combobox.template-doc.mdx +58 -27
  5. package/emotion/cjs/components/DatePicker/DatePicker.template-doc.mdx +5 -0
  6. package/emotion/cjs/components/Dropdown/Dropdown.template-doc.mdx +10 -10
  7. package/emotion/cjs/components/Flow/Flow.template-doc.mdx +2 -2
  8. package/emotion/cjs/components/Notification/Notification.template-doc.mdx +10 -1
  9. package/emotion/cjs/components/NumberFormat/NumberFormat.template-doc.mdx +4 -4
  10. package/emotion/cjs/components/Radiobox/Radiobox.template-doc.mdx +10 -11
  11. package/emotion/cjs/components/Range/Range.template-doc.mdx +5 -1
  12. package/emotion/cjs/components/Segment/Segment.template-doc.mdx +3 -3
  13. package/emotion/cjs/components/Select/Select.template-doc.mdx +27 -27
  14. package/emotion/cjs/components/Slider/Slider.template-doc.mdx +2 -2
  15. package/emotion/cjs/components/Switch/Switch.template-doc.mdx +3 -3
  16. package/emotion/cjs/components/Table/Table.template-doc.mdx +2 -2
  17. package/emotion/cjs/components/Tabs/Tabs.template-doc.mdx +11 -7
  18. package/emotion/cjs/components/TextArea/TextArea.template-doc.mdx +9 -2
  19. package/emotion/cjs/components/TextField/TextField.template-doc.mdx +117 -32
  20. package/emotion/cjs/components/Toast/Toast.template-doc.mdx +48 -2
  21. package/emotion/cjs/components/Tooltip/Tooltip.template-doc.mdx +19 -4
  22. package/emotion/cjs/components/Tree/Tree.template-doc.mdx +0 -1
  23. package/emotion/es/components/Accordion/Accordion.template-doc.mdx +99 -71
  24. package/emotion/es/components/Autocomplete/Autocomplete.template-doc.mdx +523 -454
  25. package/emotion/es/components/Checkbox/Checkbox.template-doc.mdx +3 -3
  26. package/emotion/es/components/Combobox/Combobox.template-doc.mdx +58 -27
  27. package/emotion/es/components/DatePicker/DatePicker.template-doc.mdx +5 -0
  28. package/emotion/es/components/Dropdown/Dropdown.template-doc.mdx +10 -10
  29. package/emotion/es/components/Flow/Flow.template-doc.mdx +2 -2
  30. package/emotion/es/components/Notification/Notification.template-doc.mdx +10 -1
  31. package/emotion/es/components/NumberFormat/NumberFormat.template-doc.mdx +4 -4
  32. package/emotion/es/components/Radiobox/Radiobox.template-doc.mdx +10 -11
  33. package/emotion/es/components/Range/Range.template-doc.mdx +5 -1
  34. package/emotion/es/components/Segment/Segment.template-doc.mdx +3 -3
  35. package/emotion/es/components/Select/Select.template-doc.mdx +27 -27
  36. package/emotion/es/components/Slider/Slider.template-doc.mdx +2 -2
  37. package/emotion/es/components/Switch/Switch.template-doc.mdx +3 -3
  38. package/emotion/es/components/Table/Table.template-doc.mdx +2 -2
  39. package/emotion/es/components/Tabs/Tabs.template-doc.mdx +11 -7
  40. package/emotion/es/components/TextArea/TextArea.template-doc.mdx +9 -2
  41. package/emotion/es/components/TextField/TextField.template-doc.mdx +117 -32
  42. package/emotion/es/components/Toast/Toast.template-doc.mdx +48 -2
  43. package/emotion/es/components/Tooltip/Tooltip.template-doc.mdx +19 -4
  44. package/emotion/es/components/Tree/Tree.template-doc.mdx +0 -1
  45. package/package.json +4 -4
  46. package/styled-components/cjs/components/Accordion/Accordion.template-doc.mdx +99 -71
  47. package/styled-components/cjs/components/Autocomplete/Autocomplete.template-doc.mdx +523 -454
  48. package/styled-components/cjs/components/Checkbox/Checkbox.template-doc.mdx +3 -3
  49. package/styled-components/cjs/components/Combobox/Combobox.template-doc.mdx +58 -27
  50. package/styled-components/cjs/components/DatePicker/DatePicker.template-doc.mdx +5 -0
  51. package/styled-components/cjs/components/Dropdown/Dropdown.template-doc.mdx +10 -10
  52. package/styled-components/cjs/components/Flow/Flow.template-doc.mdx +2 -2
  53. package/styled-components/cjs/components/Notification/Notification.template-doc.mdx +10 -1
  54. package/styled-components/cjs/components/NumberFormat/NumberFormat.template-doc.mdx +4 -4
  55. package/styled-components/cjs/components/Radiobox/Radiobox.template-doc.mdx +10 -11
  56. package/styled-components/cjs/components/Range/Range.template-doc.mdx +5 -1
  57. package/styled-components/cjs/components/Segment/Segment.template-doc.mdx +3 -3
  58. package/styled-components/cjs/components/Select/Select.template-doc.mdx +27 -27
  59. package/styled-components/cjs/components/Slider/Slider.template-doc.mdx +2 -2
  60. package/styled-components/cjs/components/Switch/Switch.template-doc.mdx +3 -3
  61. package/styled-components/cjs/components/Table/Table.template-doc.mdx +2 -2
  62. package/styled-components/cjs/components/Tabs/Tabs.template-doc.mdx +11 -7
  63. package/styled-components/cjs/components/TextArea/TextArea.template-doc.mdx +9 -2
  64. package/styled-components/cjs/components/TextField/TextField.template-doc.mdx +117 -32
  65. package/styled-components/cjs/components/Toast/Toast.template-doc.mdx +48 -2
  66. package/styled-components/cjs/components/Tooltip/Tooltip.template-doc.mdx +19 -4
  67. package/styled-components/cjs/components/Tree/Tree.template-doc.mdx +0 -1
  68. package/styled-components/es/components/Accordion/Accordion.template-doc.mdx +99 -71
  69. package/styled-components/es/components/Autocomplete/Autocomplete.template-doc.mdx +523 -454
  70. package/styled-components/es/components/Checkbox/Checkbox.template-doc.mdx +3 -3
  71. package/styled-components/es/components/Combobox/Combobox.template-doc.mdx +58 -27
  72. package/styled-components/es/components/DatePicker/DatePicker.template-doc.mdx +5 -0
  73. package/styled-components/es/components/Dropdown/Dropdown.template-doc.mdx +10 -10
  74. package/styled-components/es/components/Flow/Flow.template-doc.mdx +2 -2
  75. package/styled-components/es/components/Notification/Notification.template-doc.mdx +10 -1
  76. package/styled-components/es/components/NumberFormat/NumberFormat.template-doc.mdx +4 -4
  77. package/styled-components/es/components/Radiobox/Radiobox.template-doc.mdx +10 -11
  78. package/styled-components/es/components/Range/Range.template-doc.mdx +5 -1
  79. package/styled-components/es/components/Segment/Segment.template-doc.mdx +3 -3
  80. package/styled-components/es/components/Select/Select.template-doc.mdx +27 -27
  81. package/styled-components/es/components/Slider/Slider.template-doc.mdx +2 -2
  82. package/styled-components/es/components/Switch/Switch.template-doc.mdx +3 -3
  83. package/styled-components/es/components/Table/Table.template-doc.mdx +2 -2
  84. package/styled-components/es/components/Tabs/Tabs.template-doc.mdx +11 -7
  85. package/styled-components/es/components/TextArea/TextArea.template-doc.mdx +9 -2
  86. package/styled-components/es/components/TextField/TextField.template-doc.mdx +117 -32
  87. package/styled-components/es/components/Toast/Toast.template-doc.mdx +48 -2
  88. package/styled-components/es/components/Tooltip/Tooltip.template-doc.mdx +19 -4
  89. package/styled-components/es/components/Tree/Tree.template-doc.mdx +0 -1
  90. package/emotion/cjs/components/CodeField/CodeField.types.js +0 -5
  91. package/emotion/es/components/CodeField/CodeField.types.js +0 -1
  92. package/styled-components/cjs/components/CodeField/CodeField.types.js +0 -5
  93. package/styled-components/es/components/CodeField/CodeField.types.js +0 -1
  94. package/types/components/CodeField/CodeField.types.d.ts +0 -56
  95. package/types/components/CodeField/CodeField.types.d.ts.map +0 -1
  96. /package/emotion/cjs/components/Combobox/ComboboxOld/{Combobox.template-doc.mdx → Combobox.doc.mdx} +0 -0
  97. /package/emotion/es/components/Combobox/ComboboxOld/{Combobox.template-doc.mdx → Combobox.doc.mdx} +0 -0
  98. /package/styled-components/cjs/components/Combobox/ComboboxOld/{Combobox.template-doc.mdx → Combobox.doc.mdx} +0 -0
  99. /package/styled-components/es/components/Combobox/ComboboxOld/{Combobox.template-doc.mdx → Combobox.doc.mdx} +0 -0
@@ -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,78 +61,106 @@ 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>
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>
104
82
  </div>
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 }}';
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>
131
+ </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 }}';
113
141
 
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>
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>
131
151
  </div>
132
- );
133
- }
134
- ```
135
- </TabItem>
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>
158
+ </div>
159
+ </div>
160
+ );
161
+ }
162
+ ```
163
+ </TabItem>
136
164
  </Tabs>
137
165
 
138
166
  ### Использование Accordion в Controlled варианте