@dxc-technology/halstack-react 0.0.0-1f7dada → 0.0.0-1fb45b6

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 (363) hide show
  1. package/BackgroundColorContext.d.ts +1 -10
  2. package/BackgroundColorContext.js +5 -23
  3. package/HalstackContext.d.ts +1221 -0
  4. package/HalstackContext.js +310 -0
  5. package/README.md +47 -0
  6. package/accordion/Accordion.d.ts +1 -1
  7. package/accordion/Accordion.js +117 -193
  8. package/accordion/Accordion.stories.tsx +103 -120
  9. package/accordion/Accordion.test.js +56 -0
  10. package/accordion/types.d.ts +11 -22
  11. package/accordion-group/AccordionGroup.d.ts +5 -4
  12. package/accordion-group/AccordionGroup.js +38 -107
  13. package/accordion-group/AccordionGroup.stories.tsx +95 -68
  14. package/accordion-group/AccordionGroup.test.js +98 -0
  15. package/accordion-group/AccordionGroupAccordion.d.ts +4 -0
  16. package/accordion-group/AccordionGroupAccordion.js +31 -0
  17. package/accordion-group/types.d.ts +17 -22
  18. package/action-icon/ActionIcon.d.ts +4 -0
  19. package/action-icon/ActionIcon.js +47 -0
  20. package/action-icon/ActionIcon.stories.tsx +41 -0
  21. package/action-icon/ActionIcon.test.js +64 -0
  22. package/action-icon/types.d.ts +26 -0
  23. package/alert/Alert.js +23 -59
  24. package/alert/Alert.stories.tsx +28 -0
  25. package/alert/Alert.test.js +75 -0
  26. package/alert/types.d.ts +5 -5
  27. package/badge/Badge.d.ts +4 -0
  28. package/badge/Badge.js +142 -40
  29. package/badge/Badge.stories.tsx +210 -0
  30. package/badge/Badge.test.js +30 -0
  31. package/badge/types.d.ts +54 -0
  32. package/bleed/Bleed.d.ts +3 -0
  33. package/bleed/Bleed.js +43 -0
  34. package/bleed/Bleed.stories.tsx +342 -0
  35. package/bleed/types.d.ts +37 -0
  36. package/box/Box.d.ts +1 -1
  37. package/box/Box.js +30 -81
  38. package/box/Box.stories.tsx +38 -51
  39. package/box/Box.test.js +13 -0
  40. package/box/types.d.ts +3 -14
  41. package/bulleted-list/BulletedList.d.ts +7 -0
  42. package/bulleted-list/BulletedList.js +89 -0
  43. package/bulleted-list/BulletedList.stories.tsx +115 -0
  44. package/bulleted-list/types.d.ts +38 -0
  45. package/bulleted-list/types.js +5 -0
  46. package/button/Button.d.ts +1 -1
  47. package/button/Button.js +63 -122
  48. package/button/Button.stories.tsx +164 -96
  49. package/button/Button.test.js +38 -0
  50. package/button/types.d.ts +12 -12
  51. package/card/Card.d.ts +1 -1
  52. package/card/Card.js +58 -102
  53. package/card/Card.stories.tsx +13 -43
  54. package/card/Card.test.js +39 -0
  55. package/card/types.d.ts +6 -11
  56. package/checkbox/Checkbox.d.ts +2 -2
  57. package/checkbox/Checkbox.js +144 -182
  58. package/checkbox/Checkbox.stories.tsx +166 -136
  59. package/checkbox/Checkbox.test.js +199 -0
  60. package/checkbox/types.d.ts +19 -7
  61. package/chip/Chip.d.ts +1 -1
  62. package/chip/Chip.js +46 -124
  63. package/chip/Chip.stories.tsx +123 -30
  64. package/chip/Chip.test.js +41 -0
  65. package/chip/types.d.ts +8 -16
  66. package/common/OpenSans.css +68 -80
  67. package/common/coreTokens.d.ts +237 -0
  68. package/common/coreTokens.js +184 -0
  69. package/common/utils.d.ts +1 -0
  70. package/common/utils.js +6 -12
  71. package/common/variables.d.ts +1367 -0
  72. package/common/variables.js +1003 -1338
  73. package/container/Container.d.ts +4 -0
  74. package/container/Container.js +194 -0
  75. package/container/Container.stories.tsx +214 -0
  76. package/container/types.d.ts +74 -0
  77. package/container/types.js +5 -0
  78. package/date-input/Calendar.d.ts +4 -0
  79. package/date-input/Calendar.js +214 -0
  80. package/date-input/DateInput.js +173 -308
  81. package/date-input/DateInput.stories.tsx +203 -56
  82. package/date-input/DateInput.test.js +808 -0
  83. package/date-input/DatePicker.d.ts +4 -0
  84. package/date-input/DatePicker.js +115 -0
  85. package/date-input/Icons.d.ts +6 -0
  86. package/date-input/Icons.js +58 -0
  87. package/date-input/YearPicker.d.ts +4 -0
  88. package/date-input/YearPicker.js +100 -0
  89. package/date-input/types.d.ts +86 -22
  90. package/dialog/Dialog.d.ts +1 -1
  91. package/dialog/Dialog.js +68 -129
  92. package/dialog/Dialog.stories.tsx +320 -167
  93. package/dialog/Dialog.test.js +307 -0
  94. package/dialog/types.d.ts +18 -25
  95. package/dropdown/Dropdown.d.ts +1 -1
  96. package/dropdown/Dropdown.js +244 -327
  97. package/dropdown/Dropdown.stories.tsx +438 -0
  98. package/dropdown/Dropdown.test.js +599 -0
  99. package/dropdown/DropdownMenu.d.ts +4 -0
  100. package/dropdown/DropdownMenu.js +63 -0
  101. package/dropdown/DropdownMenuItem.d.ts +4 -0
  102. package/dropdown/DropdownMenuItem.js +67 -0
  103. package/dropdown/types.d.ts +36 -27
  104. package/file-input/FileInput.d.ts +2 -2
  105. package/file-input/FileInput.js +250 -292
  106. package/file-input/FileInput.stories.tsx +618 -0
  107. package/file-input/FileInput.test.js +459 -0
  108. package/file-input/FileItem.d.ts +4 -14
  109. package/file-input/FileItem.js +50 -99
  110. package/file-input/types.d.ts +25 -8
  111. package/flex/Flex.d.ts +4 -0
  112. package/flex/Flex.js +57 -0
  113. package/flex/Flex.stories.tsx +112 -0
  114. package/flex/types.d.ts +97 -0
  115. package/flex/types.js +5 -0
  116. package/footer/Footer.d.ts +1 -1
  117. package/footer/Footer.js +70 -192
  118. package/footer/Footer.stories.tsx +60 -19
  119. package/footer/Footer.test.js +85 -0
  120. package/footer/Icons.d.ts +3 -2
  121. package/footer/Icons.js +67 -8
  122. package/footer/types.d.ts +25 -26
  123. package/grid/Grid.d.ts +7 -0
  124. package/grid/Grid.js +76 -0
  125. package/grid/Grid.stories.tsx +219 -0
  126. package/grid/types.d.ts +115 -0
  127. package/grid/types.js +5 -0
  128. package/header/Header.d.ts +4 -3
  129. package/header/Header.js +99 -203
  130. package/header/Header.stories.tsx +152 -63
  131. package/header/Header.test.js +66 -0
  132. package/header/Icons.d.ts +2 -2
  133. package/header/Icons.js +4 -9
  134. package/header/types.d.ts +5 -19
  135. package/heading/Heading.js +10 -32
  136. package/heading/Heading.stories.tsx +3 -2
  137. package/heading/Heading.test.js +169 -0
  138. package/heading/types.d.ts +7 -7
  139. package/image/Image.d.ts +4 -0
  140. package/image/Image.js +70 -0
  141. package/image/Image.stories.tsx +127 -0
  142. package/image/types.d.ts +72 -0
  143. package/image/types.js +5 -0
  144. package/inset/Inset.d.ts +3 -0
  145. package/inset/Inset.js +43 -0
  146. package/inset/Inset.stories.tsx +230 -0
  147. package/inset/types.d.ts +37 -0
  148. package/inset/types.js +5 -0
  149. package/layout/ApplicationLayout.d.ts +16 -6
  150. package/layout/ApplicationLayout.js +83 -174
  151. package/layout/ApplicationLayout.stories.tsx +85 -94
  152. package/layout/Icons.d.ts +8 -0
  153. package/layout/Icons.js +51 -48
  154. package/layout/SidenavContext.d.ts +5 -0
  155. package/layout/SidenavContext.js +13 -0
  156. package/layout/types.d.ts +19 -35
  157. package/link/Link.d.ts +3 -2
  158. package/link/Link.js +64 -110
  159. package/link/Link.stories.tsx +159 -52
  160. package/link/Link.test.js +63 -0
  161. package/link/types.d.ts +15 -35
  162. package/main.d.ts +17 -18
  163. package/main.js +68 -120
  164. package/nav-tabs/NavTabs.d.ts +8 -0
  165. package/nav-tabs/NavTabs.js +93 -0
  166. package/nav-tabs/NavTabs.stories.tsx +276 -0
  167. package/nav-tabs/NavTabs.test.js +76 -0
  168. package/nav-tabs/Tab.d.ts +4 -0
  169. package/nav-tabs/Tab.js +118 -0
  170. package/nav-tabs/types.d.ts +52 -0
  171. package/nav-tabs/types.js +5 -0
  172. package/number-input/NumberInput.d.ts +7 -0
  173. package/number-input/NumberInput.js +27 -43
  174. package/number-input/NumberInput.stories.tsx +44 -28
  175. package/number-input/NumberInput.test.js +830 -0
  176. package/number-input/types.d.ts +28 -15
  177. package/package.json +46 -45
  178. package/paginator/Icons.d.ts +5 -0
  179. package/paginator/Icons.js +21 -47
  180. package/paginator/Paginator.js +34 -91
  181. package/paginator/Paginator.stories.tsx +24 -0
  182. package/paginator/Paginator.test.js +335 -0
  183. package/paginator/types.d.ts +3 -3
  184. package/paragraph/Paragraph.d.ts +5 -0
  185. package/paragraph/Paragraph.js +22 -0
  186. package/paragraph/Paragraph.stories.tsx +27 -0
  187. package/password-input/Icons.d.ts +6 -0
  188. package/password-input/Icons.js +35 -0
  189. package/password-input/PasswordInput.js +57 -123
  190. package/password-input/PasswordInput.stories.tsx +3 -35
  191. package/password-input/PasswordInput.test.js +198 -0
  192. package/password-input/types.d.ts +21 -17
  193. package/progress-bar/ProgressBar.js +65 -91
  194. package/progress-bar/ProgressBar.stories.tsx +93 -0
  195. package/progress-bar/ProgressBar.test.js +93 -0
  196. package/progress-bar/types.d.ts +3 -3
  197. package/quick-nav/QuickNav.d.ts +4 -0
  198. package/quick-nav/QuickNav.js +94 -0
  199. package/quick-nav/QuickNav.stories.tsx +356 -0
  200. package/quick-nav/types.d.ts +21 -0
  201. package/quick-nav/types.js +5 -0
  202. package/radio-group/Radio.d.ts +4 -0
  203. package/radio-group/Radio.js +124 -0
  204. package/radio-group/RadioGroup.d.ts +4 -0
  205. package/radio-group/RadioGroup.js +235 -0
  206. package/radio-group/RadioGroup.stories.tsx +214 -0
  207. package/radio-group/RadioGroup.test.js +756 -0
  208. package/radio-group/types.d.ts +114 -0
  209. package/radio-group/types.js +5 -0
  210. package/resultset-table/Icons.d.ts +7 -0
  211. package/resultset-table/Icons.js +47 -0
  212. package/{resultsetTable → resultset-table}/ResultsetTable.d.ts +1 -1
  213. package/resultset-table/ResultsetTable.js +165 -0
  214. package/{resultsetTable → resultset-table}/ResultsetTable.stories.tsx +75 -32
  215. package/resultset-table/ResultsetTable.test.js +305 -0
  216. package/{resultsetTable → resultset-table}/types.d.ts +13 -7
  217. package/resultset-table/types.js +5 -0
  218. package/select/Icons.d.ts +10 -0
  219. package/select/Icons.js +89 -0
  220. package/select/Listbox.d.ts +4 -0
  221. package/select/Listbox.js +143 -0
  222. package/select/Option.d.ts +4 -0
  223. package/select/Option.js +87 -0
  224. package/select/Select.d.ts +4 -0
  225. package/select/Select.js +230 -503
  226. package/select/Select.stories.tsx +603 -204
  227. package/select/Select.test.js +2370 -0
  228. package/select/types.d.ts +209 -0
  229. package/select/types.js +5 -0
  230. package/sidenav/Icons.d.ts +7 -0
  231. package/sidenav/Icons.js +47 -0
  232. package/sidenav/Sidenav.d.ts +6 -5
  233. package/sidenav/Sidenav.js +131 -71
  234. package/sidenav/Sidenav.stories.tsx +251 -134
  235. package/sidenav/Sidenav.test.js +37 -0
  236. package/sidenav/types.d.ts +52 -26
  237. package/slider/Slider.d.ts +2 -2
  238. package/slider/Slider.js +148 -180
  239. package/slider/Slider.test.js +254 -0
  240. package/slider/types.d.ts +11 -3
  241. package/spinner/Spinner.js +31 -75
  242. package/spinner/{Spinner.stories.jsx → Spinner.stories.tsx} +53 -26
  243. package/spinner/Spinner.test.js +55 -0
  244. package/spinner/types.d.ts +3 -3
  245. package/status-light/StatusLight.d.ts +4 -0
  246. package/status-light/StatusLight.js +51 -0
  247. package/status-light/StatusLight.stories.tsx +74 -0
  248. package/status-light/StatusLight.test.js +25 -0
  249. package/status-light/types.d.ts +17 -0
  250. package/status-light/types.js +5 -0
  251. package/switch/Switch.d.ts +2 -2
  252. package/switch/Switch.js +149 -114
  253. package/switch/Switch.stories.tsx +45 -68
  254. package/switch/Switch.test.js +180 -0
  255. package/switch/types.d.ts +13 -5
  256. package/table/Table.d.ts +1 -1
  257. package/table/Table.js +25 -32
  258. package/table/{Table.stories.jsx → Table.stories.tsx} +179 -1
  259. package/table/Table.test.js +21 -0
  260. package/table/types.d.ts +12 -6
  261. package/tabs/Tab.d.ts +4 -0
  262. package/tabs/Tab.js +116 -0
  263. package/tabs/Tabs.d.ts +1 -1
  264. package/tabs/Tabs.js +317 -146
  265. package/tabs/Tabs.stories.tsx +123 -18
  266. package/tabs/Tabs.test.js +294 -0
  267. package/tabs/types.d.ts +46 -24
  268. package/tag/Tag.d.ts +1 -1
  269. package/tag/Tag.js +43 -85
  270. package/tag/Tag.stories.tsx +38 -28
  271. package/tag/Tag.test.js +49 -0
  272. package/tag/types.d.ts +25 -16
  273. package/text-input/Icons.d.ts +8 -0
  274. package/text-input/Icons.js +56 -0
  275. package/text-input/Suggestion.d.ts +4 -0
  276. package/text-input/Suggestion.js +67 -0
  277. package/text-input/Suggestions.d.ts +4 -0
  278. package/text-input/Suggestions.js +84 -0
  279. package/text-input/TextInput.js +325 -539
  280. package/text-input/TextInput.stories.tsx +280 -271
  281. package/text-input/TextInput.test.js +1739 -0
  282. package/text-input/types.d.ts +71 -25
  283. package/textarea/Textarea.js +85 -135
  284. package/textarea/Textarea.stories.tsx +174 -0
  285. package/textarea/Textarea.test.js +406 -0
  286. package/textarea/types.d.ts +27 -16
  287. package/toggle-group/ToggleGroup.d.ts +2 -2
  288. package/toggle-group/ToggleGroup.js +95 -111
  289. package/toggle-group/ToggleGroup.stories.tsx +76 -36
  290. package/toggle-group/ToggleGroup.test.js +137 -0
  291. package/toggle-group/types.d.ts +66 -36
  292. package/typography/Typography.d.ts +4 -0
  293. package/typography/Typography.js +23 -0
  294. package/typography/Typography.stories.tsx +198 -0
  295. package/typography/types.d.ts +18 -0
  296. package/typography/types.js +5 -0
  297. package/useTheme.d.ts +1119 -1
  298. package/useTheme.js +4 -11
  299. package/useTranslatedLabels.d.ts +85 -0
  300. package/useTranslatedLabels.js +14 -0
  301. package/utils/BaseTypography.d.ts +21 -0
  302. package/utils/BaseTypography.js +94 -0
  303. package/utils/FocusLock.d.ts +13 -0
  304. package/utils/FocusLock.js +124 -0
  305. package/wizard/Wizard.d.ts +1 -1
  306. package/wizard/Wizard.js +70 -101
  307. package/wizard/Wizard.stories.tsx +48 -19
  308. package/wizard/Wizard.test.js +114 -0
  309. package/wizard/types.d.ts +12 -8
  310. package/ThemeContext.d.ts +0 -15
  311. package/ThemeContext.js +0 -243
  312. package/V3Select/V3Select.js +0 -455
  313. package/V3Select/index.d.ts +0 -27
  314. package/V3Textarea/V3Textarea.js +0 -260
  315. package/V3Textarea/index.d.ts +0 -27
  316. package/card/ice-cream.jpg +0 -0
  317. package/common/RequiredComponent.js +0 -32
  318. package/date/Date.js +0 -373
  319. package/date/index.d.ts +0 -27
  320. package/input-text/Icons.js +0 -22
  321. package/input-text/InputText.js +0 -611
  322. package/input-text/index.d.ts +0 -36
  323. package/list/List.d.ts +0 -8
  324. package/list/List.js +0 -47
  325. package/list/List.stories.tsx +0 -85
  326. package/number-input/NumberInputContext.d.ts +0 -4
  327. package/number-input/NumberInputContext.js +0 -19
  328. package/number-input/numberInputContextTypes.d.ts +0 -19
  329. package/progress-bar/ProgressBar.stories.jsx +0 -58
  330. package/radio/Radio.d.ts +0 -4
  331. package/radio/Radio.js +0 -174
  332. package/radio/Radio.stories.tsx +0 -192
  333. package/radio/types.d.ts +0 -54
  334. package/resultsetTable/ResultsetTable.js +0 -251
  335. package/row/Row.d.ts +0 -11
  336. package/row/Row.js +0 -124
  337. package/row/Row.stories.tsx +0 -223
  338. package/select/index.d.ts +0 -131
  339. package/slider/Slider.stories.tsx +0 -177
  340. package/stack/Stack.d.ts +0 -10
  341. package/stack/Stack.js +0 -94
  342. package/stack/Stack.stories.tsx +0 -150
  343. package/text/Text.d.ts +0 -7
  344. package/text/Text.js +0 -30
  345. package/text/Text.stories.tsx +0 -19
  346. package/textarea/Textarea.stories.jsx +0 -135
  347. package/toggle/Toggle.js +0 -186
  348. package/toggle/index.d.ts +0 -21
  349. package/upload/Upload.js +0 -201
  350. package/upload/buttons-upload/ButtonsUpload.js +0 -111
  351. package/upload/buttons-upload/Icons.js +0 -40
  352. package/upload/dragAndDropArea/DragAndDropArea.js +0 -225
  353. package/upload/dragAndDropArea/Icons.js +0 -39
  354. package/upload/file-upload/FileToUpload.js +0 -115
  355. package/upload/file-upload/Icons.js +0 -66
  356. package/upload/files-upload/FilesToUpload.js +0 -109
  357. package/upload/index.d.ts +0 -15
  358. package/upload/transaction/Icons.js +0 -160
  359. package/upload/transaction/Transaction.js +0 -104
  360. package/upload/transactions/Transactions.js +0 -94
  361. /package/{radio → action-icon}/types.js +0 -0
  362. /package/{resultsetTable → badge}/types.js +0 -0
  363. /package/{number-input/numberInputContextTypes.js → bleed/types.js} +0 -0
package/number-input/NumberInput.stories.tsx CHANGED
@@ -1,12 +1,10 @@
1
1
  import React from "react";
2
- import { BackgroundColorProvider } from "../BackgroundColorContext";
3
2
  import Title from "../../.storybook/components/Title";
4
3
  import ExampleContainer from "../../.storybook/components/ExampleContainer";
5
- import DarkContainer from "../../.storybook/components/DarkSection";
6
4
  import DxcNumberInput from "./NumberInput";
7
5
 
8
6
  export default {
9
- title: "Number input ",
7
+ title: "Number Input",
10
8
  component: DxcNumberInput,
11
9
  };
12
10
 
@@ -22,7 +20,7 @@ export const Chromatic = () => (
22
20
  </ExampleContainer>
23
21
  <ExampleContainer>
24
22
  <Title title="Helper text, optional and value" theme="light" level={4} />
25
- <DxcNumberInput label="Number input" value="12" helperText="Help message" optional />
23
+ <DxcNumberInput label="Number input" defaultValue="12" helperText="Help message" optional />
26
24
  </ExampleContainer>
27
25
  <ExampleContainer>
28
26
  <Title title="Disabled and placeholder" theme="light" level={4} />
@@ -30,7 +28,40 @@ export const Chromatic = () => (
30
28
  </ExampleContainer>
31
29
  <ExampleContainer>
32
30
  <Title title="Disabled, helper text, optional and value" theme="light" level={4} />
33
- <DxcNumberInput label="Disabled number input" helperText="Help message" disabled optional value="10" />
31
+ <DxcNumberInput label="Disabled number input" helperText="Help message" disabled optional defaultValue="10" />
32
+ </ExampleContainer>
33
+ <ExampleContainer>
34
+ <Title title="Read only" theme="light" level={4} />
35
+ <DxcNumberInput
36
+ label="Example label"
37
+ helperText="Help message"
38
+ readOnly
39
+ optional
40
+ prefix="€"
41
+ defaultValue="33"
42
+ />
43
+ </ExampleContainer>
44
+ <ExampleContainer pseudoState="pseudo-hover">
45
+ <Title title="Hovered read only" theme="light" level={4} />
46
+ <DxcNumberInput
47
+ label="Example label"
48
+ helperText="Help message"
49
+ readOnly
50
+ optional
51
+ prefix="€"
52
+ defaultValue="1"
53
+ />
54
+ </ExampleContainer>
55
+ <ExampleContainer pseudoState="pseudo-active">
56
+ <Title title="Active read only" theme="light" level={4} />
57
+ <DxcNumberInput
58
+ label="Example label"
59
+ helperText="Help message"
60
+ readOnly
61
+ optional
62
+ prefix="€"
63
+ placeholder="Placeholder"
64
+ />
34
65
  </ExampleContainer>
35
66
  <ExampleContainer>
36
67
  <Title title="Prefix" theme="light" level={4} />
@@ -42,29 +73,14 @@ export const Chromatic = () => (
42
73
  </ExampleContainer>
43
74
  <ExampleContainer>
44
75
  <Title title="Invalid" theme="light" level={4} />
45
- <DxcNumberInput label="Error number input" helperText="Help message" error="Error message." value="23" optional />
46
- </ExampleContainer>
47
- <BackgroundColorProvider color="#333333">
48
- <DarkContainer>
49
- <Title title="Dark" theme="dark" level={2} />
50
- <ExampleContainer>
51
- <Title title="Helper text, placeholder and optional" theme="dark" level={4} />
52
- <DxcNumberInput label="Number input" helperText="Help message" placeholder="Placeholder" optional />
53
- </ExampleContainer>
54
- <ExampleContainer>
55
- <Title title="Helper text, value and error" theme="dark" level={4} />
56
- <DxcNumberInput label="Number input" helperText="Help message" error="Error message." value="199" />
57
- </ExampleContainer>
58
- <ExampleContainer>
59
- <Title title="Disabled and placeholder" theme="dark" level={4} />
60
- <DxcNumberInput label="Disabled number input" disabled placeholder="Placeholder" />
61
- </ExampleContainer>
62
- <ExampleContainer>
63
- <Title title="Disabled, helper text, optional and value" theme="dark" level={4} />
64
- <DxcNumberInput label="Disabled number input" helperText="Help message" disabled optional value="1232454" />
65
- </ExampleContainer>
66
- </DarkContainer>
67
- </BackgroundColorProvider>
76
+ <DxcNumberInput
77
+ label="Error number input"
78
+ helperText="Help message"
79
+ error="Error message."
80
+ defaultValue="23"
81
+ optional
82
+ />
83
+ </ExampleContainer>
68
84
  <Title title="Margins" theme="light" level={2} />
69
85
  <ExampleContainer>
70
86
  <Title title="Xxsmall margin" theme="light" level={4} />