@dxc-technology/halstack-react 0.0.0-1bf97dd → 0.0.0-1bfe223

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 (366) 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 +283 -0
  9. package/accordion/Accordion.test.js +56 -0
  10. package/accordion/types.d.ts +12 -23
  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 +18 -23
  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 +47 -125
  63. package/chip/Chip.stories.tsx +123 -30
  64. package/chip/Chip.test.js +41 -0
  65. package/chip/types.d.ts +10 -18
  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 +1001 -1340
  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 +266 -298
  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 +51 -100
  110. package/file-input/types.d.ts +53 -11
  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 +72 -200
  118. package/footer/Footer.stories.tsx +57 -37
  119. package/footer/Footer.test.js +85 -0
  120. package/footer/Icons.d.ts +3 -0
  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 -0
  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/resultset-table/ResultsetTable.js +159 -0
  213. package/resultset-table/ResultsetTable.stories.tsx +300 -0
  214. package/resultset-table/ResultsetTable.test.js +305 -0
  215. package/{resultsetTable → resultset-table}/types.d.ts +8 -8
  216. package/resultset-table/types.js +5 -0
  217. package/select/Icons.d.ts +10 -0
  218. package/select/Icons.js +89 -0
  219. package/select/Listbox.d.ts +4 -0
  220. package/select/Listbox.js +143 -0
  221. package/select/Option.d.ts +4 -0
  222. package/select/Option.js +87 -0
  223. package/select/Select.d.ts +4 -0
  224. package/select/Select.js +230 -503
  225. package/select/Select.stories.tsx +603 -204
  226. package/select/Select.test.js +2370 -0
  227. package/select/types.d.ts +209 -0
  228. package/select/types.js +5 -0
  229. package/sidenav/Icons.d.ts +7 -0
  230. package/sidenav/Icons.js +47 -0
  231. package/sidenav/Sidenav.d.ts +6 -5
  232. package/sidenav/Sidenav.js +131 -71
  233. package/sidenav/Sidenav.stories.tsx +251 -134
  234. package/sidenav/Sidenav.test.js +37 -0
  235. package/sidenav/types.d.ts +52 -26
  236. package/slider/Slider.d.ts +2 -2
  237. package/slider/Slider.js +148 -180
  238. package/slider/Slider.test.js +254 -0
  239. package/slider/types.d.ts +11 -3
  240. package/spinner/Spinner.js +31 -75
  241. package/spinner/{Spinner.stories.jsx → Spinner.stories.tsx} +53 -26
  242. package/spinner/Spinner.test.js +55 -0
  243. package/spinner/types.d.ts +3 -3
  244. package/status-light/StatusLight.d.ts +4 -0
  245. package/status-light/StatusLight.js +51 -0
  246. package/status-light/StatusLight.stories.tsx +74 -0
  247. package/status-light/StatusLight.test.js +25 -0
  248. package/status-light/types.d.ts +17 -0
  249. package/status-light/types.js +5 -0
  250. package/switch/Switch.d.ts +2 -2
  251. package/switch/Switch.js +149 -114
  252. package/switch/Switch.stories.tsx +45 -68
  253. package/switch/Switch.test.js +180 -0
  254. package/switch/types.d.ts +13 -5
  255. package/table/Table.js +8 -30
  256. package/table/{Table.stories.jsx → Table.stories.tsx} +81 -1
  257. package/table/Table.test.js +21 -0
  258. package/table/types.d.ts +8 -8
  259. package/tabs/Tab.d.ts +4 -0
  260. package/tabs/Tab.js +116 -0
  261. package/tabs/Tabs.d.ts +1 -1
  262. package/tabs/Tabs.js +317 -146
  263. package/tabs/Tabs.stories.tsx +123 -18
  264. package/tabs/Tabs.test.js +294 -0
  265. package/tabs/types.d.ts +46 -24
  266. package/tag/Tag.d.ts +1 -1
  267. package/tag/Tag.js +43 -85
  268. package/tag/Tag.stories.tsx +38 -28
  269. package/tag/Tag.test.js +49 -0
  270. package/tag/types.d.ts +25 -16
  271. package/text-input/Icons.d.ts +8 -0
  272. package/text-input/Icons.js +56 -0
  273. package/text-input/Suggestion.d.ts +4 -0
  274. package/text-input/Suggestion.js +67 -0
  275. package/text-input/Suggestions.d.ts +4 -0
  276. package/text-input/Suggestions.js +84 -0
  277. package/text-input/TextInput.js +325 -539
  278. package/text-input/TextInput.stories.tsx +280 -271
  279. package/text-input/TextInput.test.js +1739 -0
  280. package/text-input/types.d.ts +71 -25
  281. package/textarea/Textarea.d.ts +4 -0
  282. package/textarea/Textarea.js +85 -165
  283. package/textarea/Textarea.stories.tsx +174 -0
  284. package/textarea/Textarea.test.js +406 -0
  285. package/textarea/types.d.ts +141 -0
  286. package/textarea/types.js +5 -0
  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 +122 -103
  307. package/wizard/{Wizard.stories.jsx → Wizard.stories.tsx} +48 -19
  308. package/wizard/Wizard.test.js +114 -0
  309. package/wizard/types.d.ts +14 -14
  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 -7
  324. package/list/List.js +0 -37
  325. package/list/List.stories.tsx +0 -70
  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/textarea/index.d.ts +0 -127
  348. package/toggle/Toggle.js +0 -186
  349. package/toggle/index.d.ts +0 -21
  350. package/upload/Upload.js +0 -201
  351. package/upload/buttons-upload/ButtonsUpload.js +0 -111
  352. package/upload/buttons-upload/Icons.js +0 -40
  353. package/upload/dragAndDropArea/DragAndDropArea.js +0 -225
  354. package/upload/dragAndDropArea/Icons.js +0 -39
  355. package/upload/file-upload/FileToUpload.js +0 -115
  356. package/upload/file-upload/Icons.js +0 -66
  357. package/upload/files-upload/FilesToUpload.js +0 -109
  358. package/upload/index.d.ts +0 -15
  359. package/upload/transaction/Icons.js +0 -160
  360. package/upload/transaction/Transaction.js +0 -104
  361. package/upload/transactions/Transactions.js +0 -94
  362. package/wizard/Icons.js +0 -65
  363. /package/{radio → action-icon}/types.js +0 -0
  364. /package/{resultsetTable → badge}/types.js +0 -0
  365. /package/{number-input/numberInputContextTypes.js → bleed/types.js} +0 -0
  366. /package/{resultsetTable → resultset-table}/ResultsetTable.d.ts +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} />