superdesk-ui-framework 4.0.47 → 4.0.49

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 (575) hide show
  1. package/.eslintrc.js +0 -1
  2. package/.eslintrc.json +2 -5
  3. package/.github/workflows/test.yml +22 -26
  4. package/.prettierignore +3 -0
  5. package/.prettierrc.js +9 -0
  6. package/.travis.yml +4 -4
  7. package/README.md +14 -1
  8. package/app/styles/_time.scss +28 -0
  9. package/app/styles/app.scss +1 -0
  10. package/app/styles/design-tokens/_design-tokens-general.scss +6 -3
  11. package/app/styles/form-elements/_forms-general.scss +0 -4
  12. package/app-typescript/components/Alert.tsx +12 -16
  13. package/app-typescript/components/Autocomplete.tsx +53 -42
  14. package/app-typescript/components/Badge.tsx +1 -1
  15. package/app-typescript/components/Button.tsx +5 -11
  16. package/app-typescript/components/ButtonGroup.tsx +15 -10
  17. package/app-typescript/components/Carousel.tsx +25 -26
  18. package/app-typescript/components/CheckButtonGroup.tsx +6 -10
  19. package/app-typescript/components/Checkbox.tsx +16 -10
  20. package/app-typescript/components/CheckboxButton.tsx +22 -13
  21. package/app-typescript/components/ContentDivider.tsx +6 -7
  22. package/app-typescript/components/CreateButton.tsx +8 -6
  23. package/app-typescript/components/DatePicker.tsx +59 -55
  24. package/app-typescript/components/DateTimePicker.tsx +51 -48
  25. package/app-typescript/components/Divider.tsx +2 -4
  26. package/app-typescript/components/DonutChart.tsx +11 -6
  27. package/app-typescript/components/DragHandle.tsx +10 -6
  28. package/app-typescript/components/DragHandleDots.tsx +1 -3
  29. package/app-typescript/components/DropZone.tsx +27 -25
  30. package/app-typescript/components/Dropdown.tsx +61 -102
  31. package/app-typescript/components/DropdownFirst.tsx +57 -69
  32. package/app-typescript/components/DurationInput.tsx +64 -54
  33. package/app-typescript/components/Editor/EditorButton.tsx +4 -3
  34. package/app-typescript/components/EmptyState.tsx +10 -14
  35. package/app-typescript/components/Form/FormGroup.tsx +9 -16
  36. package/app-typescript/components/Form/FormItem.tsx +1 -5
  37. package/app-typescript/components/Form/FormLabel.tsx +0 -1
  38. package/app-typescript/components/Form/FormRow.tsx +12 -19
  39. package/app-typescript/components/Form/FormRowNew.tsx +9 -16
  40. package/app-typescript/components/Form/FormText.tsx +1 -5
  41. package/app-typescript/components/Form/InputBase.tsx +12 -11
  42. package/app-typescript/components/Form/InputNew.tsx +11 -12
  43. package/app-typescript/components/Form/InputWrapper.tsx +9 -18
  44. package/app-typescript/components/Form/index.tsx +9 -9
  45. package/app-typescript/components/FormLabel.tsx +1 -5
  46. package/app-typescript/components/GridItem.tsx +38 -69
  47. package/app-typescript/components/GridList.tsx +2 -6
  48. package/app-typescript/components/HeadingText.tsx +4 -5
  49. package/app-typescript/components/IconButton.tsx +4 -10
  50. package/app-typescript/components/IconLabel.tsx +5 -5
  51. package/app-typescript/components/IconPicker.tsx +128 -126
  52. package/app-typescript/components/IllustrationButton.tsx +2 -8
  53. package/app-typescript/components/Input.tsx +2 -2
  54. package/app-typescript/components/Label.tsx +11 -7
  55. package/app-typescript/components/Layouts/AuthorinInnerSideBar.tsx +1 -5
  56. package/app-typescript/components/Layouts/AuthoringContainer.tsx +4 -6
  57. package/app-typescript/components/Layouts/AuthoringFrame.tsx +4 -20
  58. package/app-typescript/components/Layouts/AuthoringFrameContainer.tsx +1 -5
  59. package/app-typescript/components/Layouts/AuthoringFrameLeftBar.tsx +1 -5
  60. package/app-typescript/components/Layouts/AuthoringFrameMain.tsx +1 -5
  61. package/app-typescript/components/Layouts/AuthoringFrameNavBar.tsx +1 -5
  62. package/app-typescript/components/Layouts/AuthoringFrameOverlay.tsx +1 -5
  63. package/app-typescript/components/Layouts/AuthoringFrameRightBar.tsx +1 -5
  64. package/app-typescript/components/Layouts/AuthoringFrameSidePanel.tsx +1 -5
  65. package/app-typescript/components/Layouts/AuthoringFrameSidePanelOverlay.tsx +1 -3
  66. package/app-typescript/components/Layouts/AuthoringInnerBody.tsx +3 -6
  67. package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +5 -5
  68. package/app-typescript/components/Layouts/AuthoringMain.tsx +3 -4
  69. package/app-typescript/components/Layouts/AuthoringMainContainer.tsx +1 -5
  70. package/app-typescript/components/Layouts/AuthoringMainContent.tsx +1 -5
  71. package/app-typescript/components/Layouts/AuthoringMainToolBar.tsx +1 -6
  72. package/app-typescript/components/Layouts/BottomBarAction.tsx +8 -10
  73. package/app-typescript/components/Layouts/Container.tsx +13 -8
  74. package/app-typescript/components/Layouts/ContentSplitter.tsx +2 -6
  75. package/app-typescript/components/Layouts/CoreLayout.tsx +5 -12
  76. package/app-typescript/components/Layouts/CoreLayoutContainer.tsx +1 -1
  77. package/app-typescript/components/Layouts/CoreLayoutFooter.tsx +1 -5
  78. package/app-typescript/components/Layouts/CoreLayoutMain.tsx +4 -4
  79. package/app-typescript/components/Layouts/CoreLayoutOverlay.tsx +1 -5
  80. package/app-typescript/components/Layouts/CoreLayoutSlideInMenu.tsx +2 -4
  81. package/app-typescript/components/Layouts/CoreLayoutTopMenu.tsx +8 -9
  82. package/app-typescript/components/Layouts/HamburgerButton.tsx +13 -14
  83. package/app-typescript/components/Layouts/HeaderPanel.tsx +1 -5
  84. package/app-typescript/components/Layouts/Layout.tsx +10 -16
  85. package/app-typescript/components/Layouts/LayoutContainer.tsx +2 -7
  86. package/app-typescript/components/Layouts/LeftPanel.tsx +4 -11
  87. package/app-typescript/components/Layouts/MainMenu.tsx +18 -32
  88. package/app-typescript/components/Layouts/MainPanel.tsx +10 -11
  89. package/app-typescript/components/Layouts/NotificationPanel.tsx +20 -29
  90. package/app-typescript/components/Layouts/OverlayPanel.tsx +3 -5
  91. package/app-typescript/components/Layouts/PageLayout.tsx +4 -21
  92. package/app-typescript/components/Layouts/Panel.tsx +45 -81
  93. package/app-typescript/components/Layouts/index.tsx +39 -39
  94. package/app-typescript/components/LeftMenu.tsx +51 -53
  95. package/app-typescript/components/ListItemLoader.tsx +1 -1
  96. package/app-typescript/components/Lists/BoxedList.tsx +16 -41
  97. package/app-typescript/components/Lists/CalendarWeekDayItem.tsx +2 -10
  98. package/app-typescript/components/Lists/ContentList.tsx +68 -62
  99. package/app-typescript/components/Lists/SimpleList.tsx +13 -12
  100. package/app-typescript/components/Lists/TableList.tsx +169 -217
  101. package/app-typescript/components/Lists/index.tsx +2 -2
  102. package/app-typescript/components/Loader.tsx +1 -3
  103. package/app-typescript/components/Menu.tsx +2 -4
  104. package/app-typescript/components/Modal.tsx +21 -21
  105. package/app-typescript/components/MultiSelect.tsx +6 -6
  106. package/app-typescript/components/NavButton.tsx +10 -8
  107. package/app-typescript/components/Navigation/BottomNav.tsx +21 -17
  108. package/app-typescript/components/Navigation/QuickNavBar.tsx +40 -37
  109. package/app-typescript/components/Navigation/SideBarMenu.tsx +21 -17
  110. package/app-typescript/components/Navigation/SideBarTabs.tsx +13 -19
  111. package/app-typescript/components/Navigation/index.tsx +3 -3
  112. package/app-typescript/components/Popover.tsx +19 -21
  113. package/app-typescript/components/PropsList.tsx +2 -4
  114. package/app-typescript/components/RadioButtonGroup.tsx +48 -45
  115. package/app-typescript/components/RadioGroup.tsx +9 -8
  116. package/app-typescript/components/ResizablePanels.tsx +2 -3
  117. package/app-typescript/components/ResizeObserverComponent.tsx +1 -5
  118. package/app-typescript/components/SearchBar.tsx +53 -45
  119. package/app-typescript/components/Select.tsx +6 -8
  120. package/app-typescript/components/SelectGrid.tsx +32 -40
  121. package/app-typescript/components/SelectPreview.tsx +31 -25
  122. package/app-typescript/components/SelectWithTemplate.tsx +10 -11
  123. package/app-typescript/components/ShowPopup.tsx +32 -46
  124. package/app-typescript/components/SidebarMenu.tsx +19 -18
  125. package/app-typescript/components/Skeleton.tsx +12 -11
  126. package/app-typescript/components/SlidingToolbar.tsx +1 -6
  127. package/app-typescript/components/Spinner.tsx +2 -6
  128. package/app-typescript/components/StrechBar.tsx +1 -5
  129. package/app-typescript/components/SubNav.tsx +10 -8
  130. package/app-typescript/components/SvgIconIllustration.tsx +477 -105
  131. package/app-typescript/components/Switch.tsx +14 -12
  132. package/app-typescript/components/SwitchGroup.tsx +10 -10
  133. package/app-typescript/components/TabCustom.tsx +28 -35
  134. package/app-typescript/components/TabList.tsx +13 -10
  135. package/app-typescript/components/Tag.tsx +21 -24
  136. package/app-typescript/components/TagInput.tsx +4 -11
  137. package/app-typescript/components/Text/Heading.tsx +21 -41
  138. package/app-typescript/components/Text/Text.tsx +16 -12
  139. package/app-typescript/components/Text/Time.tsx +14 -10
  140. package/app-typescript/components/ThemeSelector.tsx +15 -14
  141. package/app-typescript/components/TimePicker.tsx +60 -6
  142. package/app-typescript/components/TimePickerPopover.tsx +274 -0
  143. package/app-typescript/components/TimePickerV2.tsx +20 -20
  144. package/app-typescript/components/Toast.tsx +11 -7
  145. package/app-typescript/components/ToastMessage.tsx +3 -14
  146. package/app-typescript/components/ToastText.tsx +30 -32
  147. package/app-typescript/components/ToastWrapper.tsx +76 -74
  148. package/app-typescript/components/ToggleBox/CustomHeaderToggleBox.tsx +30 -45
  149. package/app-typescript/components/ToggleBox/SimpleToggleBox.tsx +31 -33
  150. package/app-typescript/components/ToggleBox/index.tsx +3 -7
  151. package/app-typescript/components/Tooltip.tsx +1 -1
  152. package/app-typescript/components/TreeMenu.tsx +72 -81
  153. package/app-typescript/components/TreeSelect/KeyboardNavigation.tsx +1 -5
  154. package/app-typescript/components/TreeSelect/TreeSelect.tsx +221 -238
  155. package/app-typescript/components/TreeSelect/TreeSelectItem.tsx +20 -24
  156. package/app-typescript/components/TreeSelect/TreeSelectPill.tsx +12 -15
  157. package/app-typescript/components/WithPagination.tsx +34 -39
  158. package/app-typescript/components/WithPopover.tsx +0 -1
  159. package/app-typescript/components/WithPortal.tsx +4 -7
  160. package/app-typescript/components/WithSizeObserver.tsx +2 -6
  161. package/app-typescript/components/_Positioner.tsx +26 -26
  162. package/app-typescript/components/avatar/avatar-action-add.tsx +1 -6
  163. package/app-typescript/components/avatar/avatar-group.tsx +49 -68
  164. package/app-typescript/components/avatar/avatar-image.tsx +18 -12
  165. package/app-typescript/components/avatar/avatar-placeholder.tsx +3 -15
  166. package/app-typescript/components/avatar/avatar-text.tsx +1 -4
  167. package/app-typescript/components/avatar/avatar-wrapper.tsx +18 -30
  168. package/app-typescript/components/avatar/avatar.tsx +5 -8
  169. package/app-typescript/components/with-pagination.spec.tsx +8 -27
  170. package/app-typescript/helpers.tsx +2 -2
  171. package/app-typescript/index.ts +111 -100
  172. package/app-typescript/utils/time.tsx +31 -0
  173. package/declarations.d.ts +1 -1
  174. package/dist/components/Alerts.tsx +171 -78
  175. package/dist/components/Autocomplete.tsx +187 -78
  176. package/dist/components/Avatar.tsx +52 -112
  177. package/dist/components/Badges.tsx +111 -67
  178. package/dist/components/BigIconFont.tsx +29 -17
  179. package/dist/components/BoxedList.tsx +244 -114
  180. package/dist/components/ButtonGroups.tsx +213 -147
  181. package/dist/components/Buttons.tsx +409 -137
  182. package/dist/components/Card.tsx +6 -7
  183. package/dist/components/Carousel.tsx +126 -39
  184. package/dist/components/Checkboxs.tsx +446 -105
  185. package/dist/components/Container.tsx +95 -48
  186. package/dist/components/ContentDivider.tsx +110 -63
  187. package/dist/components/ContentList.tsx +577 -253
  188. package/dist/components/CreateButton.tsx +71 -21
  189. package/dist/components/DatePicker.tsx +102 -26
  190. package/dist/components/DateTimePicker.tsx +49 -11
  191. package/dist/components/DragHandleDocs.tsx +56 -26
  192. package/dist/components/DropZone.tsx +67 -29
  193. package/dist/components/Dropdowns.tsx +220 -131
  194. package/dist/components/DurationInput.tsx +92 -32
  195. package/dist/components/EmptyStates.tsx +61 -26
  196. package/dist/components/GridItem.tsx +190 -91
  197. package/dist/components/GridList.tsx +37 -17
  198. package/dist/components/Heading.tsx +81 -35
  199. package/dist/components/IconButtons.tsx +125 -32
  200. package/dist/components/IconFont.tsx +24 -12
  201. package/dist/components/IconLabels.tsx +146 -39
  202. package/dist/components/IconPicker.tsx +30 -13
  203. package/dist/components/IllustrationButton.tsx +40 -20
  204. package/dist/components/Index.tsx +128 -114
  205. package/dist/components/Inputs.tsx +153 -51
  206. package/dist/components/Labels.tsx +191 -117
  207. package/dist/components/LeftNavigations.tsx +327 -100
  208. package/dist/components/ListItems.tsx +8 -9
  209. package/dist/components/Loader.tsx +5 -4
  210. package/dist/components/Menu.tsx +48 -26
  211. package/dist/components/Modal.tsx +298 -104
  212. package/dist/components/MultiSelect.tsx +189 -53
  213. package/dist/components/NavButtons.tsx +86 -30
  214. package/dist/components/Panel.tsx +367 -120
  215. package/dist/components/Popover.tsx +37 -17
  216. package/dist/components/QuickNavigationBar.tsx +222 -86
  217. package/dist/components/RadioGroup.tsx +375 -137
  218. package/dist/components/ResizablePanels.tsx +8 -14
  219. package/dist/components/SelectGrid.tsx +79 -38
  220. package/dist/components/SelectWithTemplate.tsx +23 -14
  221. package/dist/components/Selects.tsx +94 -29
  222. package/dist/components/SimpleList.tsx +91 -41
  223. package/dist/components/SubNav.tsx +57 -37
  224. package/dist/components/Switch.tsx +168 -42
  225. package/dist/components/TableList.tsx +220 -66
  226. package/dist/components/Tabs.tsx +149 -64
  227. package/dist/components/TagInputDocs.tsx +73 -17
  228. package/dist/components/Tags.tsx +104 -73
  229. package/dist/components/Text.tsx +108 -58
  230. package/dist/components/TimePicker.tsx +76 -22
  231. package/dist/components/Toasts.tsx +162 -80
  232. package/dist/components/Togglebox.tsx +164 -62
  233. package/dist/components/Tooltips.tsx +27 -15
  234. package/dist/components/TreeMenu.tsx +95 -59
  235. package/dist/components/TreeSelect.tsx +297 -162
  236. package/dist/components/WithPaginationDocs.tsx +15 -16
  237. package/dist/components/WithSizeObserver.tsx +9 -9
  238. package/dist/components/tree-select/TreeSelect.tsx +126 -77
  239. package/dist/components/tree-select/example-1.tsx +8 -12
  240. package/dist/components/tree-select/example-2.tsx +2 -5
  241. package/dist/components/utilities/BorderRadiusUtilities.tsx +28 -13
  242. package/dist/components/utilities/BorderUtilities.tsx +31 -32
  243. package/dist/components/utilities/DisplayUtilities.tsx +4 -5
  244. package/dist/components/utilities/FlexAndGridUtilities.tsx +38 -38
  245. package/dist/components/utilities/ObjectFitUtilities.tsx +4 -6
  246. package/dist/components/utilities/ObjectPositionUtilities.tsx +3 -4
  247. package/dist/components/utilities/OpacityUtilities.tsx +4 -7
  248. package/dist/components/utilities/OverflowUtilities.tsx +4 -5
  249. package/dist/components/utilities/PositionUtilities.tsx +4 -5
  250. package/dist/components/utilities/ShadowUtilities.tsx +15 -16
  251. package/dist/components/utilities/SpacingUtilities.tsx +483 -178
  252. package/dist/components/utilities/TextUtilities.tsx +109 -60
  253. package/dist/design-patterns/Index.tsx +8 -11
  254. package/dist/design-patterns/ThreePaneLayoutPattern.tsx +92 -76
  255. package/dist/examples.bundle.css +1257 -1155
  256. package/dist/examples.bundle.js +7904 -7035
  257. package/dist/playgrounds/dummy-data/items.ts +9 -8
  258. package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +559 -277
  259. package/dist/playgrounds/react-playgrounds/EditorTest.tsx +387 -204
  260. package/dist/playgrounds/react-playgrounds/FirstPlayground.tsx +74 -52
  261. package/dist/playgrounds/react-playgrounds/Index.tsx +11 -11
  262. package/dist/playgrounds/react-playgrounds/Multiedit.tsx +294 -218
  263. package/dist/playgrounds/react-playgrounds/PageLayoutTest.tsx +151 -105
  264. package/dist/playgrounds/react-playgrounds/PersonalProfile.tsx +481 -261
  265. package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +261 -149
  266. package/dist/playgrounds/react-playgrounds/Rundowns.tsx +757 -395
  267. package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +173 -91
  268. package/dist/playgrounds/react-playgrounds/TestGround.tsx +1364 -818
  269. package/dist/playgrounds/react-playgrounds/UiPlayground.tsx +178 -86
  270. package/dist/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +6 -7
  271. package/dist/playgrounds/react-playgrounds/components/AuthoringContent.tsx +42 -42
  272. package/dist/playgrounds/react-playgrounds/components/ContentSplitter.tsx +5 -8
  273. package/dist/playgrounds/react-playgrounds/components/GraphicButton.tsx +11 -11
  274. package/dist/playgrounds/react-playgrounds/components/GraphicButtonsGroup.tsx +2 -6
  275. package/dist/playgrounds/react-playgrounds/components/HeaderPanel.tsx +1 -5
  276. package/dist/playgrounds/react-playgrounds/components/Index.tsx +19 -21
  277. package/dist/playgrounds/react-playgrounds/components/Layout.tsx +11 -17
  278. package/dist/playgrounds/react-playgrounds/components/LayoutContainer.tsx +1 -1
  279. package/dist/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -12
  280. package/dist/playgrounds/react-playgrounds/components/OverlayPanel.tsx +3 -5
  281. package/dist/playgrounds/react-playgrounds/components/Panel.tsx +6 -7
  282. package/dist/playgrounds/react-playgrounds/components/PanelContent.tsx +1 -5
  283. package/dist/playgrounds/react-playgrounds/components/PanelContentBlock.tsx +1 -6
  284. package/dist/playgrounds/react-playgrounds/components/PanelHeader.tsx +3 -3
  285. package/dist/playgrounds/react-playgrounds/components/SearchBar.tsx +16 -12
  286. package/dist/playgrounds/react-playgrounds/components/SidebarMenu.tsx +23 -14
  287. package/dist/playgrounds/react-playgrounds/components/SubNav.tsx +1 -5
  288. package/dist/playgrounds/react-playgrounds/components/ThemeDropdown.tsx +14 -11
  289. package/dist/playgrounds/react-playgrounds/tsconfig.json +1 -1
  290. package/dist/superdesk-ui.bundle.css +25 -4
  291. package/dist/superdesk-ui.bundle.js +3072 -2903
  292. package/dist/vendor.bundle.js +18 -18
  293. package/examples/css/docs-page.css +1135 -1116
  294. package/examples/css/reset.css +124 -43
  295. package/examples/css/vendor.css +125 -125
  296. package/examples/index.js +138 -139
  297. package/examples/js/doc.js +41 -40
  298. package/examples/js/react.js +82 -48
  299. package/examples/pages/components/Alerts.tsx +171 -78
  300. package/examples/pages/components/Autocomplete.tsx +187 -78
  301. package/examples/pages/components/Avatar.tsx +52 -112
  302. package/examples/pages/components/Badges.tsx +111 -67
  303. package/examples/pages/components/BigIconFont.tsx +29 -17
  304. package/examples/pages/components/BoxedList.tsx +244 -114
  305. package/examples/pages/components/ButtonGroups.tsx +213 -147
  306. package/examples/pages/components/Buttons.tsx +409 -137
  307. package/examples/pages/components/Card.tsx +6 -7
  308. package/examples/pages/components/Carousel.tsx +126 -39
  309. package/examples/pages/components/Checkboxs.tsx +446 -105
  310. package/examples/pages/components/Container.tsx +95 -48
  311. package/examples/pages/components/ContentDivider.tsx +110 -63
  312. package/examples/pages/components/ContentList.tsx +577 -253
  313. package/examples/pages/components/CreateButton.tsx +71 -21
  314. package/examples/pages/components/DatePicker.tsx +102 -26
  315. package/examples/pages/components/DateTimePicker.tsx +49 -11
  316. package/examples/pages/components/DragHandleDocs.tsx +56 -26
  317. package/examples/pages/components/DropZone.tsx +67 -29
  318. package/examples/pages/components/Dropdowns.tsx +220 -131
  319. package/examples/pages/components/DurationInput.tsx +92 -32
  320. package/examples/pages/components/EmptyStates.tsx +61 -26
  321. package/examples/pages/components/GridItem.tsx +190 -91
  322. package/examples/pages/components/GridList.tsx +37 -17
  323. package/examples/pages/components/Heading.tsx +81 -35
  324. package/examples/pages/components/IconButtons.tsx +125 -32
  325. package/examples/pages/components/IconFont.tsx +24 -12
  326. package/examples/pages/components/IconLabels.tsx +146 -39
  327. package/examples/pages/components/IconPicker.tsx +30 -13
  328. package/examples/pages/components/IllustrationButton.tsx +40 -20
  329. package/examples/pages/components/Index.tsx +128 -114
  330. package/examples/pages/components/Inputs.tsx +153 -51
  331. package/examples/pages/components/Labels.tsx +191 -117
  332. package/examples/pages/components/LeftNavigations.tsx +327 -100
  333. package/examples/pages/components/ListItems.tsx +8 -9
  334. package/examples/pages/components/Loader.tsx +5 -4
  335. package/examples/pages/components/Menu.tsx +48 -26
  336. package/examples/pages/components/Modal.tsx +298 -104
  337. package/examples/pages/components/MultiSelect.tsx +189 -53
  338. package/examples/pages/components/NavButtons.tsx +86 -30
  339. package/examples/pages/components/Panel.tsx +367 -120
  340. package/examples/pages/components/Popover.tsx +37 -17
  341. package/examples/pages/components/QuickNavigationBar.tsx +222 -86
  342. package/examples/pages/components/RadioGroup.tsx +375 -137
  343. package/examples/pages/components/ResizablePanels.tsx +8 -14
  344. package/examples/pages/components/SelectGrid.tsx +79 -38
  345. package/examples/pages/components/SelectWithTemplate.tsx +23 -14
  346. package/examples/pages/components/Selects.tsx +94 -29
  347. package/examples/pages/components/SimpleList.tsx +91 -41
  348. package/examples/pages/components/SubNav.tsx +57 -37
  349. package/examples/pages/components/Switch.tsx +168 -42
  350. package/examples/pages/components/TableList.tsx +220 -66
  351. package/examples/pages/components/Tabs.tsx +149 -64
  352. package/examples/pages/components/TagInputDocs.tsx +73 -17
  353. package/examples/pages/components/Tags.tsx +104 -73
  354. package/examples/pages/components/Text.tsx +108 -58
  355. package/examples/pages/components/TimePicker.tsx +76 -22
  356. package/examples/pages/components/Toasts.tsx +162 -80
  357. package/examples/pages/components/Togglebox.tsx +164 -62
  358. package/examples/pages/components/Tooltips.tsx +27 -15
  359. package/examples/pages/components/TreeMenu.tsx +95 -59
  360. package/examples/pages/components/TreeSelect.tsx +297 -162
  361. package/examples/pages/components/WithPaginationDocs.tsx +15 -16
  362. package/examples/pages/components/WithSizeObserver.tsx +9 -9
  363. package/examples/pages/components/tree-select/TreeSelect.tsx +126 -77
  364. package/examples/pages/components/tree-select/example-1.tsx +8 -12
  365. package/examples/pages/components/tree-select/example-2.tsx +2 -5
  366. package/examples/pages/components/utilities/BorderRadiusUtilities.tsx +28 -13
  367. package/examples/pages/components/utilities/BorderUtilities.tsx +31 -32
  368. package/examples/pages/components/utilities/DisplayUtilities.tsx +4 -5
  369. package/examples/pages/components/utilities/FlexAndGridUtilities.tsx +38 -38
  370. package/examples/pages/components/utilities/ObjectFitUtilities.tsx +4 -6
  371. package/examples/pages/components/utilities/ObjectPositionUtilities.tsx +3 -4
  372. package/examples/pages/components/utilities/OpacityUtilities.tsx +4 -7
  373. package/examples/pages/components/utilities/OverflowUtilities.tsx +4 -5
  374. package/examples/pages/components/utilities/PositionUtilities.tsx +4 -5
  375. package/examples/pages/components/utilities/ShadowUtilities.tsx +15 -16
  376. package/examples/pages/components/utilities/SpacingUtilities.tsx +483 -178
  377. package/examples/pages/components/utilities/TextUtilities.tsx +109 -60
  378. package/examples/pages/design-patterns/Index.tsx +8 -11
  379. package/examples/pages/design-patterns/ThreePaneLayoutPattern.tsx +92 -76
  380. package/examples/pages/playgrounds/dummy-data/items.ts +9 -8
  381. package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +559 -277
  382. package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +387 -204
  383. package/examples/pages/playgrounds/react-playgrounds/FirstPlayground.tsx +74 -52
  384. package/examples/pages/playgrounds/react-playgrounds/Index.tsx +11 -11
  385. package/examples/pages/playgrounds/react-playgrounds/Multiedit.tsx +294 -218
  386. package/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.tsx +151 -105
  387. package/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx +481 -261
  388. package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +261 -149
  389. package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +757 -395
  390. package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +173 -91
  391. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +1364 -818
  392. package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx +178 -86
  393. package/examples/pages/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +6 -7
  394. package/examples/pages/playgrounds/react-playgrounds/components/AuthoringContent.tsx +42 -42
  395. package/examples/pages/playgrounds/react-playgrounds/components/ContentSplitter.tsx +5 -8
  396. package/examples/pages/playgrounds/react-playgrounds/components/GraphicButton.tsx +11 -11
  397. package/examples/pages/playgrounds/react-playgrounds/components/GraphicButtonsGroup.tsx +2 -6
  398. package/examples/pages/playgrounds/react-playgrounds/components/HeaderPanel.tsx +1 -5
  399. package/examples/pages/playgrounds/react-playgrounds/components/Index.tsx +19 -21
  400. package/examples/pages/playgrounds/react-playgrounds/components/Layout.tsx +11 -17
  401. package/examples/pages/playgrounds/react-playgrounds/components/LayoutContainer.tsx +1 -1
  402. package/examples/pages/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -12
  403. package/examples/pages/playgrounds/react-playgrounds/components/OverlayPanel.tsx +3 -5
  404. package/examples/pages/playgrounds/react-playgrounds/components/Panel.tsx +6 -7
  405. package/examples/pages/playgrounds/react-playgrounds/components/PanelContent.tsx +1 -5
  406. package/examples/pages/playgrounds/react-playgrounds/components/PanelContentBlock.tsx +1 -6
  407. package/examples/pages/playgrounds/react-playgrounds/components/PanelHeader.tsx +3 -3
  408. package/examples/pages/playgrounds/react-playgrounds/components/SearchBar.tsx +16 -12
  409. package/examples/pages/playgrounds/react-playgrounds/components/SidebarMenu.tsx +23 -14
  410. package/examples/pages/playgrounds/react-playgrounds/components/SubNav.tsx +1 -5
  411. package/examples/pages/playgrounds/react-playgrounds/components/ThemeDropdown.tsx +14 -11
  412. package/examples/pages/playgrounds/react-playgrounds/tsconfig.json +1 -1
  413. package/globals.d.ts +1 -1
  414. package/mocha-setup.ts +3 -3
  415. package/package.json +119 -117
  416. package/react/components/Alert.js +6 -9
  417. package/react/components/Autocomplete.js +15 -23
  418. package/react/components/Badge.js +1 -1
  419. package/react/components/Button.js +4 -6
  420. package/react/components/ButtonGroup.js +1 -1
  421. package/react/components/Carousel.js +3 -3
  422. package/react/components/CheckButtonGroup.js +3 -6
  423. package/react/components/CheckboxButton.js +2 -4
  424. package/react/components/ContentDivider.js +1 -1
  425. package/react/components/DatePicker.js +29 -26
  426. package/react/components/DateTimePicker.d.ts +8 -4
  427. package/react/components/DateTimePicker.js +6 -8
  428. package/react/components/Divider.js +1 -1
  429. package/react/components/DonutChart.js +1 -1
  430. package/react/components/DragHandle.js +1 -1
  431. package/react/components/DragHandleDots.js +1 -1
  432. package/react/components/DropZone.js +6 -8
  433. package/react/components/Dropdown.d.ts +1 -1
  434. package/react/components/Dropdown.js +34 -38
  435. package/react/components/DropdownFirst.d.ts +11 -11
  436. package/react/components/DropdownFirst.js +20 -24
  437. package/react/components/DurationInput.js +37 -34
  438. package/react/components/EmptyState.js +5 -5
  439. package/react/components/Form/FormGroup.js +1 -1
  440. package/react/components/Form/FormItem.js +1 -1
  441. package/react/components/Form/FormRow.js +1 -1
  442. package/react/components/Form/FormRowNew.js +3 -3
  443. package/react/components/Form/FormText.js +1 -1
  444. package/react/components/Form/InputNew.js +3 -3
  445. package/react/components/Form/InputWrapper.js +7 -10
  446. package/react/components/GridItem.d.ts +1 -1
  447. package/react/components/GridItem.js +16 -16
  448. package/react/components/GridList.js +1 -1
  449. package/react/components/HeadingText.js +4 -5
  450. package/react/components/IconLabel.js +3 -5
  451. package/react/components/IconPicker.d.ts +1 -1
  452. package/react/components/IconPicker.js +111 -104
  453. package/react/components/IllustrationButton.js +1 -1
  454. package/react/components/Input.js +1 -1
  455. package/react/components/Layouts/AuthorinInnerSideBar.js +1 -1
  456. package/react/components/Layouts/AuthoringContainer.js +1 -1
  457. package/react/components/Layouts/AuthoringFrame.js +4 -4
  458. package/react/components/Layouts/AuthoringFrameContainer.js +1 -1
  459. package/react/components/Layouts/AuthoringFrameLeftBar.js +1 -1
  460. package/react/components/Layouts/AuthoringFrameMain.js +1 -1
  461. package/react/components/Layouts/AuthoringFrameNavBar.js +1 -1
  462. package/react/components/Layouts/AuthoringFrameOverlay.js +1 -1
  463. package/react/components/Layouts/AuthoringFrameRightBar.js +1 -1
  464. package/react/components/Layouts/AuthoringFrameSidePanel.js +1 -1
  465. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.js +1 -1
  466. package/react/components/Layouts/AuthoringMainContainer.js +1 -1
  467. package/react/components/Layouts/AuthoringMainContent.js +1 -1
  468. package/react/components/Layouts/AuthoringMainToolBar.js +1 -1
  469. package/react/components/Layouts/BottomBarAction.js +2 -2
  470. package/react/components/Layouts/ContentSplitter.js +1 -1
  471. package/react/components/Layouts/CoreLayout.js +2 -2
  472. package/react/components/Layouts/CoreLayoutContainer.js +1 -1
  473. package/react/components/Layouts/CoreLayoutFooter.js +1 -1
  474. package/react/components/Layouts/CoreLayoutOverlay.js +1 -1
  475. package/react/components/Layouts/CoreLayoutSlideInMenu.js +2 -2
  476. package/react/components/Layouts/CoreLayoutTopMenu.js +3 -3
  477. package/react/components/Layouts/HamburgerButton.js +1 -1
  478. package/react/components/Layouts/HeaderPanel.js +1 -1
  479. package/react/components/Layouts/Layout.d.ts +1 -1
  480. package/react/components/Layouts/Layout.js +9 -9
  481. package/react/components/Layouts/LayoutContainer.js +1 -1
  482. package/react/components/Layouts/LeftPanel.js +1 -1
  483. package/react/components/Layouts/MainMenu.js +8 -10
  484. package/react/components/Layouts/MainPanel.js +1 -1
  485. package/react/components/Layouts/NotificationPanel.d.ts +1 -1
  486. package/react/components/Layouts/NotificationPanel.js +7 -7
  487. package/react/components/Layouts/OverlayPanel.js +3 -3
  488. package/react/components/Layouts/PageLayout.js +2 -2
  489. package/react/components/Layouts/Panel.d.ts +1 -1
  490. package/react/components/Layouts/Panel.js +12 -18
  491. package/react/components/LeftMenu.d.ts +3 -3
  492. package/react/components/LeftMenu.js +11 -13
  493. package/react/components/Lists/BoxedList.js +6 -6
  494. package/react/components/Lists/CalendarWeekDayItem.js +2 -2
  495. package/react/components/Lists/ContentList.js +24 -26
  496. package/react/components/Lists/TableList.d.ts +1 -1
  497. package/react/components/Lists/TableList.js +59 -79
  498. package/react/components/Loader.js +1 -1
  499. package/react/components/Menu.js +1 -1
  500. package/react/components/Modal.d.ts +1 -1
  501. package/react/components/MultiSelect.d.ts +1 -1
  502. package/react/components/MultiSelect.js +2 -2
  503. package/react/components/NavButton.js +2 -4
  504. package/react/components/Navigation/BottomNav.js +9 -8
  505. package/react/components/Navigation/QuickNavBar.js +17 -20
  506. package/react/components/Navigation/SideBarMenu.js +11 -9
  507. package/react/components/Navigation/SideBarTabs.js +9 -8
  508. package/react/components/Popover.js +1 -1
  509. package/react/components/RadioButtonGroup.js +15 -23
  510. package/react/components/ResizablePanels.js +1 -3
  511. package/react/components/ResizeObserverComponent.js +1 -3
  512. package/react/components/SearchBar.js +14 -16
  513. package/react/components/Select.js +3 -3
  514. package/react/components/SelectGrid.js +15 -20
  515. package/react/components/SelectPreview.js +13 -13
  516. package/react/components/SelectWithTemplate.js +3 -5
  517. package/react/components/ShowPopup.d.ts +1 -0
  518. package/react/components/ShowPopup.js +7 -10
  519. package/react/components/Skeleton.js +1 -1
  520. package/react/components/SlidingToolbar.js +1 -1
  521. package/react/components/Spinner.js +1 -1
  522. package/react/components/StrechBar.js +1 -1
  523. package/react/components/SubNav.js +1 -1
  524. package/react/components/Switch.js +4 -6
  525. package/react/components/SwitchGroup.js +1 -1
  526. package/react/components/TabCustom.js +6 -4
  527. package/react/components/TabList.js +4 -8
  528. package/react/components/Tag.js +13 -17
  529. package/react/components/TagInput.js +1 -1
  530. package/react/components/Text/Heading.js +6 -6
  531. package/react/components/ThemeSelector.js +1 -1
  532. package/react/components/TimePicker.d.ts +9 -2
  533. package/react/components/TimePicker.js +29 -4
  534. package/react/components/TimePickerPopover.d.ts +19 -0
  535. package/react/components/TimePickerPopover.js +225 -0
  536. package/react/components/TimePickerV2.js +17 -17
  537. package/react/components/Toast.js +3 -3
  538. package/react/components/ToastMessage.d.ts +1 -1
  539. package/react/components/ToastMessage.js +1 -1
  540. package/react/components/ToastText.js +5 -8
  541. package/react/components/ToastWrapper.js +3 -5
  542. package/react/components/ToggleBox/CustomHeaderToggleBox.d.ts +1 -1
  543. package/react/components/ToggleBox/CustomHeaderToggleBox.js +7 -7
  544. package/react/components/ToggleBox/SimpleToggleBox.d.ts +1 -1
  545. package/react/components/ToggleBox/SimpleToggleBox.js +5 -5
  546. package/react/components/ToggleBox/index.js +3 -3
  547. package/react/components/TreeMenu.d.ts +1 -1
  548. package/react/components/TreeMenu.js +38 -44
  549. package/react/components/TreeSelect/TreeSelect.d.ts +2 -2
  550. package/react/components/TreeSelect/TreeSelect.js +105 -127
  551. package/react/components/TreeSelect/TreeSelectItem.d.ts +1 -1
  552. package/react/components/TreeSelect/TreeSelectItem.js +10 -13
  553. package/react/components/TreeSelect/TreeSelectPill.d.ts +1 -1
  554. package/react/components/TreeSelect/TreeSelectPill.js +8 -9
  555. package/react/components/WithPagination.js +18 -21
  556. package/react/components/WithPortal.d.ts +1 -1
  557. package/react/components/WithPortal.js +2 -1
  558. package/react/components/WithSizeObserver.js +1 -3
  559. package/react/components/_Positioner.js +11 -11
  560. package/react/components/avatar/avatar-action-add.js +1 -1
  561. package/react/components/avatar/avatar-group.js +11 -14
  562. package/react/components/avatar/avatar-image.js +6 -4
  563. package/react/components/avatar/avatar-placeholder.js +1 -1
  564. package/react/components/avatar/avatar-wrapper.js +2 -4
  565. package/react/components/avatar/avatar.js +4 -3
  566. package/react/helpers.js +2 -2
  567. package/react/index.d.ts +1 -1
  568. package/react/utils/time.d.ts +5 -0
  569. package/react/utils/time.js +36 -0
  570. package/tasks/webpack.dev.js +1 -1
  571. package/tasks/webpack.js +5 -5
  572. package/tasks/webpack.prod.js +1 -5
  573. package/tsconfig.json +2 -5
  574. package/tslint.json +6 -12
  575. package/webpack.config.js +2 -5
package/dist/components/utilities/SpacingUtilities.tsx CHANGED
@@ -7,10 +7,11 @@ class SpacingUtilitiesDoc extends React.Component {
7
7
  <section className="docs-page__container">
8
8
  <h2 className="docs-page__h2">Spacing</h2>
9
9
  <p className="docs-page__paragraph">
10
- The Superdesk UI Framework provides various spacing utility classes to modify the positioning and look of elements.
11
- All values are set in multiples of the <code>--base-increment</code> CSS variable, which is equivalent to 0.8rem (or 8px in our context), to ensure consistency.
10
+ The Superdesk UI Framework provides various spacing utility classes to modify the positioning and
11
+ look of elements. All values are set in multiples of the <code>--base-increment</code> CSS variable,
12
+ which is equivalent to 0.8rem (or 8px in our context), to ensure consistency.
12
13
  </p>
13
- <div className='docs-page__container-block--padding'>
14
+ <div className="docs-page__container-block--padding">
14
15
  <h3 className="docs-page__h3">Padding</h3>
15
16
  <div className="utilities-table__container">
16
17
  <table className="table utilities-table">
@@ -21,7 +22,7 @@ class SpacingUtilitiesDoc extends React.Component {
21
22
  </tr>
22
23
  </thead>
23
24
  <tbody>
24
- <tr className='utilities-table__divider-row'>
25
+ <tr className="utilities-table__divider-row">
25
26
  <td>all</td>
26
27
  <td></td>
27
28
  </tr>
@@ -31,34 +32,55 @@ class SpacingUtilitiesDoc extends React.Component {
31
32
  </tr>
32
33
  <tr>
33
34
  <td>p-0-5</td>
34
- <td>{'padding: calc(0.5 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 4px */</span></td>
35
+ <td>
36
+ {'padding: calc(0.5 * var(--base-increment)) !important;'}{' '}
37
+ <span className="doc-text--highlight">/* 4px */</span>
38
+ </td>
35
39
  </tr>
36
40
  <tr>
37
41
  <td>p-1</td>
38
- <td>{'padding: calc(1 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 8px */</span></td>
42
+ <td>
43
+ {'padding: calc(1 * var(--base-increment)) !important;'}{' '}
44
+ <span className="doc-text--highlight">/* 8px */</span>
45
+ </td>
39
46
  </tr>
40
47
  <tr>
41
48
  <td>p-1-5</td>
42
- <td>{'padding: calc(1.5 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 12px */</span></td>
49
+ <td>
50
+ {'padding: calc(1.5 * var(--base-increment)) !important;'}{' '}
51
+ <span className="doc-text--highlight">/* 12px */</span>
52
+ </td>
43
53
  </tr>
44
54
  <tr>
45
55
  <td>p-2</td>
46
- <td>{'padding: calc(2 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 16px */</span></td>
56
+ <td>
57
+ {'padding: calc(2 * var(--base-increment)) !important;'}{' '}
58
+ <span className="doc-text--highlight">/* 16px */</span>
59
+ </td>
47
60
  </tr>
48
61
  <tr>
49
62
  <td>p-3</td>
50
- <td>{'padding: calc(3 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 24px */</span></td>
63
+ <td>
64
+ {'padding: calc(3 * var(--base-increment)) !important;'}{' '}
65
+ <span className="doc-text--highlight">/* 24px */</span>
66
+ </td>
51
67
  </tr>
52
68
  <tr>
53
69
  <td>p-4</td>
54
- <td>{'padding: calc(4 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 32px */</span></td>
70
+ <td>
71
+ {'padding: calc(4 * var(--base-increment)) !important;'}{' '}
72
+ <span className="doc-text--highlight">/* 32px */</span>
73
+ </td>
55
74
  </tr>
56
75
  <tr>
57
76
  <td>p-5</td>
58
- <td>{'padding: calc(5 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 40px */</span></td>
77
+ <td>
78
+ {'padding: calc(5 * var(--base-increment)) !important;'}{' '}
79
+ <span className="doc-text--highlight">/* 40px */</span>
80
+ </td>
59
81
  </tr>
60
82
  {/* //-----------Inline--------// */}
61
- <tr className='utilities-table__divider-row'>
83
+ <tr className="utilities-table__divider-row">
62
84
  <td>inline start (left)</td>
63
85
  <td></td>
64
86
  </tr>
@@ -69,34 +91,55 @@ class SpacingUtilitiesDoc extends React.Component {
69
91
  </tr>
70
92
  <tr>
71
93
  <td>ps-0-5</td>
72
- <td>{'padding-inline-start: calc(0.5 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 4px */</span></td>
94
+ <td>
95
+ {'padding-inline-start: calc(0.5 * var(--base-increment)) !important;'}{' '}
96
+ <span className="doc-text--highlight">/* 4px */</span>
97
+ </td>
73
98
  </tr>
74
99
  <tr>
75
100
  <td>ps-1</td>
76
- <td>{'padding-inline-start: calc(1 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 8px */</span></td>
101
+ <td>
102
+ {'padding-inline-start: calc(1 * var(--base-increment)) !important;'}{' '}
103
+ <span className="doc-text--highlight">/* 8px */</span>
104
+ </td>
77
105
  </tr>
78
106
  <tr>
79
107
  <td>ps-1-5</td>
80
- <td>{'padding-inline-start: calc(1.5 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 12px */</span></td>
108
+ <td>
109
+ {'padding-inline-start: calc(1.5 * var(--base-increment)) !important;'}{' '}
110
+ <span className="doc-text--highlight">/* 12px */</span>
111
+ </td>
81
112
  </tr>
82
113
  <tr>
83
114
  <td>ps-2</td>
84
- <td>{'padding-inline-start: calc(2 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 16px */</span></td>
115
+ <td>
116
+ {'padding-inline-start: calc(2 * var(--base-increment)) !important;'}{' '}
117
+ <span className="doc-text--highlight">/* 16px */</span>
118
+ </td>
85
119
  </tr>
86
120
  <tr>
87
121
  <td>ps-3</td>
88
- <td>{'padding-inline-start: calc(3 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 24px */</span></td>
122
+ <td>
123
+ {'padding-inline-start: calc(3 * var(--base-increment)) !important;'}{' '}
124
+ <span className="doc-text--highlight">/* 24px */</span>
125
+ </td>
89
126
  </tr>
90
127
  <tr>
91
128
  <td>ps-4</td>
92
- <td>{'padding-inline-start: calc(4 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 32px */</span></td>
129
+ <td>
130
+ {'padding-inline-start: calc(4 * var(--base-increment)) !important;'}{' '}
131
+ <span className="doc-text--highlight">/* 32px */</span>
132
+ </td>
93
133
  </tr>
94
134
  <tr>
95
135
  <td>ps-5</td>
96
- <td>{'padding-inline-start: calc(5 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 40px */</span></td>
136
+ <td>
137
+ {'padding-inline-start: calc(5 * var(--base-increment)) !important;'}{' '}
138
+ <span className="doc-text--highlight">/* 40px */</span>
139
+ </td>
97
140
  </tr>
98
141
 
99
- <tr className='utilities-table__divider-row'>
142
+ <tr className="utilities-table__divider-row">
100
143
  <td>inline end (right)</td>
101
144
  <td></td>
102
145
  </tr>
@@ -107,34 +150,55 @@ class SpacingUtilitiesDoc extends React.Component {
107
150
  </tr>
108
151
  <tr>
109
152
  <td>pe-0-5</td>
110
- <td>{'padding-inline-end: calc(0.5 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 4px */</span></td>
153
+ <td>
154
+ {'padding-inline-end: calc(0.5 * var(--base-increment)) !important;'}{' '}
155
+ <span className="doc-text--highlight">/* 4px */</span>
156
+ </td>
111
157
  </tr>
112
158
  <tr>
113
159
  <td>pe-1</td>
114
- <td>{'padding-inline-end: calc(1 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 8px */</span></td>
160
+ <td>
161
+ {'padding-inline-end: calc(1 * var(--base-increment)) !important;'}{' '}
162
+ <span className="doc-text--highlight">/* 8px */</span>
163
+ </td>
115
164
  </tr>
116
165
  <tr>
117
166
  <td>pe-1-5</td>
118
- <td>{'padding-inline-end: calc(1.5 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 12px */</span></td>
167
+ <td>
168
+ {'padding-inline-end: calc(1.5 * var(--base-increment)) !important;'}{' '}
169
+ <span className="doc-text--highlight">/* 12px */</span>
170
+ </td>
119
171
  </tr>
120
172
  <tr>
121
173
  <td>pe-2</td>
122
- <td>{'padding-inline-end: calc(2 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 16px */</span></td>
174
+ <td>
175
+ {'padding-inline-end: calc(2 * var(--base-increment)) !important;'}{' '}
176
+ <span className="doc-text--highlight">/* 16px */</span>
177
+ </td>
123
178
  </tr>
124
179
  <tr>
125
180
  <td>pe-3</td>
126
- <td>{'padding-inline-end: calc(3 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 24px */</span></td>
181
+ <td>
182
+ {'padding-inline-end: calc(3 * var(--base-increment)) !important;'}{' '}
183
+ <span className="doc-text--highlight">/* 24px */</span>
184
+ </td>
127
185
  </tr>
128
186
  <tr>
129
187
  <td>pe-4</td>
130
- <td>{'padding-inline-end: calc(4 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 32px */</span></td>
188
+ <td>
189
+ {'padding-inline-end: calc(4 * var(--base-increment)) !important;'}{' '}
190
+ <span className="doc-text--highlight">/* 32px */</span>
191
+ </td>
131
192
  </tr>
132
193
  <tr>
133
194
  <td>pe-5</td>
134
- <td>{'padding-inline-end: calc(5 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 40px */</span></td>
195
+ <td>
196
+ {'padding-inline-end: calc(5 * var(--base-increment)) !important;'}{' '}
197
+ <span className="doc-text--highlight">/* 40px */</span>
198
+ </td>
135
199
  </tr>
136
200
 
137
- <tr className='utilities-table__divider-row'>
201
+ <tr className="utilities-table__divider-row">
138
202
  <td>inline (x)</td>
139
203
  <td></td>
140
204
  </tr>
@@ -142,61 +206,83 @@ class SpacingUtilitiesDoc extends React.Component {
142
206
  <tr>
143
207
  <td>px-0</td>
144
208
  <td>
145
- {'padding-inline-start: 0 !important;'}<br />
209
+ {'padding-inline-start: 0 !important;'}
210
+ <br />
146
211
  {'padding-inline-end: 0 !important;'}
147
212
  </td>
148
213
  </tr>
149
214
  <tr>
150
215
  <td>px-0-5</td>
151
216
  <td>
152
- {'padding-inline-start: calc(0.5 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 4px */</span><br />
153
- {'padding-inline-end: calc(0.5 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 4px */</span>
217
+ {'padding-inline-start: calc(0.5 * var(--base-increment)) !important;'}{' '}
218
+ <span className="doc-text--highlight">/* 4px */</span>
219
+ <br />
220
+ {'padding-inline-end: calc(0.5 * var(--base-increment)) !important;'}{' '}
221
+ <span className="doc-text--highlight">/* 4px */</span>
154
222
  </td>
155
223
  </tr>
156
224
  <tr>
157
225
  <td>px-1</td>
158
226
  <td>
159
- {'padding-inline-start: calc(1 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 8px */</span><br />
160
- {'padding-inline-end: calc(1 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 8px */</span>
227
+ {'padding-inline-start: calc(1 * var(--base-increment)) !important;'}{' '}
228
+ <span className="doc-text--highlight">/* 8px */</span>
229
+ <br />
230
+ {'padding-inline-end: calc(1 * var(--base-increment)) !important;'}{' '}
231
+ <span className="doc-text--highlight">/* 8px */</span>
161
232
  </td>
162
233
  </tr>
163
234
  <tr>
164
235
  <td>px-1-5</td>
165
236
  <td>
166
- {'padding-inline-start: calc(1.5 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 12px */</span><br />
167
- {'padding-inline-end: calc(1.5 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 12px */</span>
237
+ {'padding-inline-start: calc(1.5 * var(--base-increment)) !important;'}{' '}
238
+ <span className="doc-text--highlight">/* 12px */</span>
239
+ <br />
240
+ {'padding-inline-end: calc(1.5 * var(--base-increment)) !important;'}{' '}
241
+ <span className="doc-text--highlight">/* 12px */</span>
168
242
  </td>
169
243
  </tr>
170
244
  <tr>
171
245
  <td>px-2</td>
172
246
  <td>
173
- {'padding-inline-start: calc(2 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 16px */</span><br />
174
- {'padding-inline-end: calc(2 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 16px */</span>
247
+ {'padding-inline-start: calc(2 * var(--base-increment)) !important;'}{' '}
248
+ <span className="doc-text--highlight">/* 16px */</span>
249
+ <br />
250
+ {'padding-inline-end: calc(2 * var(--base-increment)) !important;'}{' '}
251
+ <span className="doc-text--highlight">/* 16px */</span>
175
252
  </td>
176
253
  </tr>
177
254
  <tr>
178
255
  <td>px-3</td>
179
256
  <td>
180
- {'padding-inline-start: calc(3 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 24px */</span><br />
181
- {'padding-inline-end: calc(3 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 24px */</span>
257
+ {'padding-inline-start: calc(3 * var(--base-increment)) !important;'}{' '}
258
+ <span className="doc-text--highlight">/* 24px */</span>
259
+ <br />
260
+ {'padding-inline-end: calc(3 * var(--base-increment)) !important;'}{' '}
261
+ <span className="doc-text--highlight">/* 24px */</span>
182
262
  </td>
183
263
  </tr>
184
264
  <tr>
185
265
  <td>px-4</td>
186
266
  <td>
187
- {'padding-inline-start: calc(4 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 32px */</span><br />
188
- {'padding-inline-end: calc(4 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 32px */</span>
267
+ {'padding-inline-start: calc(4 * var(--base-increment)) !important;'}{' '}
268
+ <span className="doc-text--highlight">/* 32px */</span>
269
+ <br />
270
+ {'padding-inline-end: calc(4 * var(--base-increment)) !important;'}{' '}
271
+ <span className="doc-text--highlight">/* 32px */</span>
189
272
  </td>
190
273
  </tr>
191
274
  <tr>
192
275
  <td>px-5</td>
193
276
  <td>
194
- {'padding-inline-start: calc(5 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 40px */</span><br />
195
- {'padding-inline-end: calc(5 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 40px */</span>
277
+ {'padding-inline-start: calc(5 * var(--base-increment)) !important;'}{' '}
278
+ <span className="doc-text--highlight">/* 40px */</span>
279
+ <br />
280
+ {'padding-inline-end: calc(5 * var(--base-increment)) !important;'}{' '}
281
+ <span className="doc-text--highlight">/* 40px */</span>
196
282
  </td>
197
283
  </tr>
198
284
  {/* //-----------Block--------// */}
199
- <tr className='utilities-table__divider-row'>
285
+ <tr className="utilities-table__divider-row">
200
286
  <td>block start (top)</td>
201
287
  <td></td>
202
288
  </tr>
@@ -206,34 +292,55 @@ class SpacingUtilitiesDoc extends React.Component {
206
292
  </tr>
207
293
  <tr>
208
294
  <td>pt-0-5</td>
209
- <td>{'padding-block-start: calc(0.5 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 4px */</span></td>
295
+ <td>
296
+ {'padding-block-start: calc(0.5 * var(--base-increment)) !important;'}{' '}
297
+ <span className="doc-text--highlight">/* 4px */</span>
298
+ </td>
210
299
  </tr>
211
300
  <tr>
212
301
  <td>pt-1</td>
213
- <td>{'padding-block-start: calc(1 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 8px */</span></td>
302
+ <td>
303
+ {'padding-block-start: calc(1 * var(--base-increment)) !important;'}{' '}
304
+ <span className="doc-text--highlight">/* 8px */</span>
305
+ </td>
214
306
  </tr>
215
307
  <tr>
216
308
  <td>pt-1-5</td>
217
- <td>{'padding-block-start: calc(1.5 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 12px */</span></td>
309
+ <td>
310
+ {'padding-block-start: calc(1.5 * var(--base-increment)) !important;'}{' '}
311
+ <span className="doc-text--highlight">/* 12px */</span>
312
+ </td>
218
313
  </tr>
219
314
  <tr>
220
315
  <td>pt-2</td>
221
- <td>{'padding-block-start: calc(2 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 16px */</span></td>
316
+ <td>
317
+ {'padding-block-start: calc(2 * var(--base-increment)) !important;'}{' '}
318
+ <span className="doc-text--highlight">/* 16px */</span>
319
+ </td>
222
320
  </tr>
223
321
  <tr>
224
322
  <td>pt-3</td>
225
- <td>{'padding-block-start: calc(3 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 24px */</span></td>
323
+ <td>
324
+ {'padding-block-start: calc(3 * var(--base-increment)) !important;'}{' '}
325
+ <span className="doc-text--highlight">/* 24px */</span>
326
+ </td>
226
327
  </tr>
227
328
  <tr>
228
329
  <td>pt-4</td>
229
- <td>{'padding-block-start: calc(4 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 32px */</span></td>
330
+ <td>
331
+ {'padding-block-start: calc(4 * var(--base-increment)) !important;'}{' '}
332
+ <span className="doc-text--highlight">/* 32px */</span>
333
+ </td>
230
334
  </tr>
231
335
  <tr>
232
336
  <td>pt-5</td>
233
- <td>{'padding-block-start: calc(5 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 40px */</span></td>
337
+ <td>
338
+ {'padding-block-start: calc(5 * var(--base-increment)) !important;'}{' '}
339
+ <span className="doc-text--highlight">/* 40px */</span>
340
+ </td>
234
341
  </tr>
235
342
 
236
- <tr className='utilities-table__divider-row'>
343
+ <tr className="utilities-table__divider-row">
237
344
  <td>block end (bottom)</td>
238
345
  <td></td>
239
346
  </tr>
@@ -244,34 +351,55 @@ class SpacingUtilitiesDoc extends React.Component {
244
351
  </tr>
245
352
  <tr>
246
353
  <td>pb-0-5</td>
247
- <td>{'padding-block-end: calc(0.5 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 4px */</span></td>
354
+ <td>
355
+ {'padding-block-end: calc(0.5 * var(--base-increment)) !important;'}{' '}
356
+ <span className="doc-text--highlight">/* 4px */</span>
357
+ </td>
248
358
  </tr>
249
359
  <tr>
250
360
  <td>pb-1</td>
251
- <td>{'padding-block-end: calc(1 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 8px */</span></td>
361
+ <td>
362
+ {'padding-block-end: calc(1 * var(--base-increment)) !important;'}{' '}
363
+ <span className="doc-text--highlight">/* 8px */</span>
364
+ </td>
252
365
  </tr>
253
366
  <tr>
254
367
  <td>pb-1-5</td>
255
- <td>{'padding-block-end: calc(1.5 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 12px */</span></td>
368
+ <td>
369
+ {'padding-block-end: calc(1.5 * var(--base-increment)) !important;'}{' '}
370
+ <span className="doc-text--highlight">/* 12px */</span>
371
+ </td>
256
372
  </tr>
257
373
  <tr>
258
374
  <td>pb-2</td>
259
- <td>{'padding-block-end: calc(2 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 16px */</span></td>
375
+ <td>
376
+ {'padding-block-end: calc(2 * var(--base-increment)) !important;'}{' '}
377
+ <span className="doc-text--highlight">/* 16px */</span>
378
+ </td>
260
379
  </tr>
261
380
  <tr>
262
381
  <td>pe-3</td>
263
- <td>{'padding-block-end: calc(3 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 24px */</span></td>
382
+ <td>
383
+ {'padding-block-end: calc(3 * var(--base-increment)) !important;'}{' '}
384
+ <span className="doc-text--highlight">/* 24px */</span>
385
+ </td>
264
386
  </tr>
265
387
  <tr>
266
388
  <td>pb-4</td>
267
- <td>{'padding-block-end: calc(4 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 32px */</span></td>
389
+ <td>
390
+ {'padding-block-end: calc(4 * var(--base-increment)) !important;'}{' '}
391
+ <span className="doc-text--highlight">/* 32px */</span>
392
+ </td>
268
393
  </tr>
269
394
  <tr>
270
395
  <td>pb-5</td>
271
- <td>{'padding-block-end: calc(5 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 40px */</span></td>
396
+ <td>
397
+ {'padding-block-end: calc(5 * var(--base-increment)) !important;'}{' '}
398
+ <span className="doc-text--highlight">/* 40px */</span>
399
+ </td>
272
400
  </tr>
273
401
 
274
- <tr className='utilities-table__divider-row'>
402
+ <tr className="utilities-table__divider-row">
275
403
  <td>block (y)</td>
276
404
  <td></td>
277
405
  </tr>
@@ -279,57 +407,79 @@ class SpacingUtilitiesDoc extends React.Component {
279
407
  <tr>
280
408
  <td>py-0</td>
281
409
  <td>
282
- {'padding-block-start: 0 !important;'}<br />
410
+ {'padding-block-start: 0 !important;'}
411
+ <br />
283
412
  {'padding-block-end: 0 !important;'}
284
413
  </td>
285
414
  </tr>
286
415
  <tr>
287
416
  <td>py-0-5</td>
288
417
  <td>
289
- {'padding-block-start: calc(0.5 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 4px */</span><br />
290
- {'padding-block-end: calc(0.5 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 4px */</span>
418
+ {'padding-block-start: calc(0.5 * var(--base-increment)) !important;'}{' '}
419
+ <span className="doc-text--highlight">/* 4px */</span>
420
+ <br />
421
+ {'padding-block-end: calc(0.5 * var(--base-increment)) !important;'}{' '}
422
+ <span className="doc-text--highlight">/* 4px */</span>
291
423
  </td>
292
424
  </tr>
293
425
  <tr>
294
426
  <td>py-1</td>
295
427
  <td>
296
- {'padding-block-start: calc(1 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 8px */</span><br />
297
- {'padding-block-end: calc(1 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 8px */</span>
428
+ {'padding-block-start: calc(1 * var(--base-increment)) !important;'}{' '}
429
+ <span className="doc-text--highlight">/* 8px */</span>
430
+ <br />
431
+ {'padding-block-end: calc(1 * var(--base-increment)) !important;'}{' '}
432
+ <span className="doc-text--highlight">/* 8px */</span>
298
433
  </td>
299
434
  </tr>
300
435
  <tr>
301
436
  <td>py-1-5</td>
302
437
  <td>
303
- {'padding-block-start: calc(1.5 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 12px */</span><br />
304
- {'padding-block-end: calc(1.5 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 12px */</span>
438
+ {'padding-block-start: calc(1.5 * var(--base-increment)) !important;'}{' '}
439
+ <span className="doc-text--highlight">/* 12px */</span>
440
+ <br />
441
+ {'padding-block-end: calc(1.5 * var(--base-increment)) !important;'}{' '}
442
+ <span className="doc-text--highlight">/* 12px */</span>
305
443
  </td>
306
444
  </tr>
307
445
  <tr>
308
446
  <td>py-2</td>
309
447
  <td>
310
- {'padding-block-start: calc(2 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 16px */</span><br />
311
- {'padding-block-end: calc(2 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 16px */</span>
448
+ {'padding-block-start: calc(2 * var(--base-increment)) !important;'}{' '}
449
+ <span className="doc-text--highlight">/* 16px */</span>
450
+ <br />
451
+ {'padding-block-end: calc(2 * var(--base-increment)) !important;'}{' '}
452
+ <span className="doc-text--highlight">/* 16px */</span>
312
453
  </td>
313
454
  </tr>
314
455
  <tr>
315
456
  <td>py-3</td>
316
457
  <td>
317
- {'padding-block-start: calc(3 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 24px */</span><br />
318
- {'padding-block-end: calc(3 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 24px */</span>
458
+ {'padding-block-start: calc(3 * var(--base-increment)) !important;'}{' '}
459
+ <span className="doc-text--highlight">/* 24px */</span>
460
+ <br />
461
+ {'padding-block-end: calc(3 * var(--base-increment)) !important;'}{' '}
462
+ <span className="doc-text--highlight">/* 24px */</span>
319
463
  </td>
320
464
  </tr>
321
465
  <tr>
322
466
  <td>py-4</td>
323
467
  <td>
324
- {'padding-block-start: calc(4 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 32px */</span><br />
325
- {'padding-block-end: calc(4 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 32px */</span>
468
+ {'padding-block-start: calc(4 * var(--base-increment)) !important;'}{' '}
469
+ <span className="doc-text--highlight">/* 32px */</span>
470
+ <br />
471
+ {'padding-block-end: calc(4 * var(--base-increment)) !important;'}{' '}
472
+ <span className="doc-text--highlight">/* 32px */</span>
326
473
  </td>
327
474
  </tr>
328
475
  <tr>
329
476
  <td>py-5</td>
330
477
  <td>
331
- {'padding-block-start: calc(5 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 40px */</span><br />
332
- {'padding-block-end: calc(5 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 40px */</span>
478
+ {'padding-block-start: calc(5 * var(--base-increment)) !important;'}{' '}
479
+ <span className="doc-text--highlight">/* 40px */</span>
480
+ <br />
481
+ {'padding-block-end: calc(5 * var(--base-increment)) !important;'}{' '}
482
+ <span className="doc-text--highlight">/* 40px */</span>
333
483
  </td>
334
484
  </tr>
335
485
  </tbody>
@@ -337,7 +487,7 @@ class SpacingUtilitiesDoc extends React.Component {
337
487
  </div>
338
488
  </div>
339
489
 
340
- <div className='docs-page__container-block--margin'>
490
+ <div className="docs-page__container-block--margin">
341
491
  <h3 className="docs-page__h3">Margin</h3>
342
492
  <div className="utilities-table__container">
343
493
  <table className="table utilities-table">
@@ -348,7 +498,7 @@ class SpacingUtilitiesDoc extends React.Component {
348
498
  </tr>
349
499
  </thead>
350
500
  <tbody>
351
- <tr className='utilities-table__divider-row'>
501
+ <tr className="utilities-table__divider-row">
352
502
  <td>all</td>
353
503
  <td></td>
354
504
  </tr>
@@ -358,34 +508,55 @@ class SpacingUtilitiesDoc extends React.Component {
358
508
  </tr>
359
509
  <tr>
360
510
  <td>m-0-5</td>
361
- <td>{'margin: calc(0.5 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 4px */</span></td>
511
+ <td>
512
+ {'margin: calc(0.5 * var(--base-increment)) !important;'}{' '}
513
+ <span className="doc-text--highlight">/* 4px */</span>
514
+ </td>
362
515
  </tr>
363
516
  <tr>
364
517
  <td>m-1</td>
365
- <td>{'margin: calc(1 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 8px */</span></td>
518
+ <td>
519
+ {'margin: calc(1 * var(--base-increment)) !important;'}{' '}
520
+ <span className="doc-text--highlight">/* 8px */</span>
521
+ </td>
366
522
  </tr>
367
523
  <tr>
368
524
  <td>m-1-5</td>
369
- <td>{'margin: calc(1.5 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 12px */</span></td>
525
+ <td>
526
+ {'margin: calc(1.5 * var(--base-increment)) !important;'}{' '}
527
+ <span className="doc-text--highlight">/* 12px */</span>
528
+ </td>
370
529
  </tr>
371
530
  <tr>
372
531
  <td>m-2</td>
373
- <td>{'margin: calc(2 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 16px */</span></td>
532
+ <td>
533
+ {'margin: calc(2 * var(--base-increment)) !important;'}{' '}
534
+ <span className="doc-text--highlight">/* 16px */</span>
535
+ </td>
374
536
  </tr>
375
537
  <tr>
376
538
  <td>m-3</td>
377
- <td>{'margin: calc(3 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 24px */</span></td>
539
+ <td>
540
+ {'margin: calc(3 * var(--base-increment)) !important;'}{' '}
541
+ <span className="doc-text--highlight">/* 24px */</span>
542
+ </td>
378
543
  </tr>
379
544
  <tr>
380
545
  <td>m-4</td>
381
- <td>{'margin: calc(4 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 32px */</span></td>
546
+ <td>
547
+ {'margin: calc(4 * var(--base-increment)) !important;'}{' '}
548
+ <span className="doc-text--highlight">/* 32px */</span>
549
+ </td>
382
550
  </tr>
383
551
  <tr>
384
552
  <td>m-5</td>
385
- <td>{'margin: calc(5 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 40px */</span></td>
553
+ <td>
554
+ {'margin: calc(5 * var(--base-increment)) !important;'}{' '}
555
+ <span className="doc-text--highlight">/* 40px */</span>
556
+ </td>
386
557
  </tr>
387
558
  {/* //-----------Inline--------// */}
388
- <tr className='utilities-table__divider-row'>
559
+ <tr className="utilities-table__divider-row">
389
560
  <td>inline start (left)</td>
390
561
  <td></td>
391
562
  </tr>
@@ -396,34 +567,55 @@ class SpacingUtilitiesDoc extends React.Component {
396
567
  </tr>
397
568
  <tr>
398
569
  <td>ms-0-5</td>
399
- <td>{'margin-inline-start: calc(0.5 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 4px */</span></td>
570
+ <td>
571
+ {'margin-inline-start: calc(0.5 * var(--base-increment)) !important;'}{' '}
572
+ <span className="doc-text--highlight">/* 4px */</span>
573
+ </td>
400
574
  </tr>
401
575
  <tr>
402
576
  <td>ms-1</td>
403
- <td>{'margin-inline-start: calc(1 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 8px */</span></td>
577
+ <td>
578
+ {'margin-inline-start: calc(1 * var(--base-increment)) !important;'}{' '}
579
+ <span className="doc-text--highlight">/* 8px */</span>
580
+ </td>
404
581
  </tr>
405
582
  <tr>
406
583
  <td>ms-1-5</td>
407
- <td>{'margin-inline-start: calc(1.5 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 12px */</span></td>
584
+ <td>
585
+ {'margin-inline-start: calc(1.5 * var(--base-increment)) !important;'}{' '}
586
+ <span className="doc-text--highlight">/* 12px */</span>
587
+ </td>
408
588
  </tr>
409
589
  <tr>
410
590
  <td>ms-2</td>
411
- <td>{'margin-inline-start: calc(2 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 16px */</span></td>
591
+ <td>
592
+ {'margin-inline-start: calc(2 * var(--base-increment)) !important;'}{' '}
593
+ <span className="doc-text--highlight">/* 16px */</span>
594
+ </td>
412
595
  </tr>
413
596
  <tr>
414
597
  <td>ms-3</td>
415
- <td>{'margin-inline-start: calc(3 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 24px */</span></td>
598
+ <td>
599
+ {'margin-inline-start: calc(3 * var(--base-increment)) !important;'}{' '}
600
+ <span className="doc-text--highlight">/* 24px */</span>
601
+ </td>
416
602
  </tr>
417
603
  <tr>
418
604
  <td>ms-4</td>
419
- <td>{'margin-inline-start: calc(4 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 32px */</span></td>
605
+ <td>
606
+ {'margin-inline-start: calc(4 * var(--base-increment)) !important;'}{' '}
607
+ <span className="doc-text--highlight">/* 32px */</span>
608
+ </td>
420
609
  </tr>
421
610
  <tr>
422
611
  <td>ms-5</td>
423
- <td>{'margin-inline-start: calc(5 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 40px */</span></td>
612
+ <td>
613
+ {'margin-inline-start: calc(5 * var(--base-increment)) !important;'}{' '}
614
+ <span className="doc-text--highlight">/* 40px */</span>
615
+ </td>
424
616
  </tr>
425
617
 
426
- <tr className='utilities-table__divider-row'>
618
+ <tr className="utilities-table__divider-row">
427
619
  <td>inline end (right)</td>
428
620
  <td></td>
429
621
  </tr>
@@ -434,34 +626,55 @@ class SpacingUtilitiesDoc extends React.Component {
434
626
  </tr>
435
627
  <tr>
436
628
  <td>me-0-5</td>
437
- <td>{'margin-inline-end: calc(0.5 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 4px */</span></td>
629
+ <td>
630
+ {'margin-inline-end: calc(0.5 * var(--base-increment)) !important;'}{' '}
631
+ <span className="doc-text--highlight">/* 4px */</span>
632
+ </td>
438
633
  </tr>
439
634
  <tr>
440
635
  <td>me-1</td>
441
- <td>{'margin-inline-end: calc(1 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 8px */</span></td>
636
+ <td>
637
+ {'margin-inline-end: calc(1 * var(--base-increment)) !important;'}{' '}
638
+ <span className="doc-text--highlight">/* 8px */</span>
639
+ </td>
442
640
  </tr>
443
641
  <tr>
444
642
  <td>me-1-5</td>
445
- <td>{'margin-inline-end: calc(1.5 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 12px */</span></td>
643
+ <td>
644
+ {'margin-inline-end: calc(1.5 * var(--base-increment)) !important;'}{' '}
645
+ <span className="doc-text--highlight">/* 12px */</span>
646
+ </td>
446
647
  </tr>
447
648
  <tr>
448
649
  <td>me-2</td>
449
- <td>{'margin-inline-end: calc(2 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 16px */</span></td>
650
+ <td>
651
+ {'margin-inline-end: calc(2 * var(--base-increment)) !important;'}{' '}
652
+ <span className="doc-text--highlight">/* 16px */</span>
653
+ </td>
450
654
  </tr>
451
655
  <tr>
452
656
  <td>me-3</td>
453
- <td>{'margin-inline-end: calc(3 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 24px */</span></td>
657
+ <td>
658
+ {'margin-inline-end: calc(3 * var(--base-increment)) !important;'}{' '}
659
+ <span className="doc-text--highlight">/* 24px */</span>
660
+ </td>
454
661
  </tr>
455
662
  <tr>
456
663
  <td>me-4</td>
457
- <td>{'margin-inline-end: calc(4 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 32px */</span></td>
664
+ <td>
665
+ {'margin-inline-end: calc(4 * var(--base-increment)) !important;'}{' '}
666
+ <span className="doc-text--highlight">/* 32px */</span>
667
+ </td>
458
668
  </tr>
459
669
  <tr>
460
670
  <td>me-5</td>
461
- <td>{'margin-inline-end: calc(5 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 40px */</span></td>
671
+ <td>
672
+ {'margin-inline-end: calc(5 * var(--base-increment)) !important;'}{' '}
673
+ <span className="doc-text--highlight">/* 40px */</span>
674
+ </td>
462
675
  </tr>
463
676
 
464
- <tr className='utilities-table__divider-row'>
677
+ <tr className="utilities-table__divider-row">
465
678
  <td>inline (x)</td>
466
679
  <td></td>
467
680
  </tr>
@@ -469,61 +682,83 @@ class SpacingUtilitiesDoc extends React.Component {
469
682
  <tr>
470
683
  <td>mx-0</td>
471
684
  <td>
472
- {'margin-inline-start: 0 !important;'}<br />
685
+ {'margin-inline-start: 0 !important;'}
686
+ <br />
473
687
  {'margin-inline-end: 0 !important;'}
474
688
  </td>
475
689
  </tr>
476
690
  <tr>
477
691
  <td>mx-0-5</td>
478
692
  <td>
479
- {'margin-inline-start: calc(0.5 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 4px */</span><br />
480
- {'margin-inline-end: calc(0.5 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 4px */</span>
693
+ {'margin-inline-start: calc(0.5 * var(--base-increment)) !important;'}{' '}
694
+ <span className="doc-text--highlight">/* 4px */</span>
695
+ <br />
696
+ {'margin-inline-end: calc(0.5 * var(--base-increment)) !important;'}{' '}
697
+ <span className="doc-text--highlight">/* 4px */</span>
481
698
  </td>
482
699
  </tr>
483
700
  <tr>
484
701
  <td>mx-1</td>
485
702
  <td>
486
- {'margin-inline-start: calc(1 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 8px */</span><br />
487
- {'margin-inline-end: calc(1 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 8px */</span>
703
+ {'margin-inline-start: calc(1 * var(--base-increment)) !important;'}{' '}
704
+ <span className="doc-text--highlight">/* 8px */</span>
705
+ <br />
706
+ {'margin-inline-end: calc(1 * var(--base-increment)) !important;'}{' '}
707
+ <span className="doc-text--highlight">/* 8px */</span>
488
708
  </td>
489
709
  </tr>
490
710
  <tr>
491
711
  <td>mx-1-5</td>
492
712
  <td>
493
- {'margin-inline-start: calc(1.5 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 12px */</span><br />
494
- {'margin-inline-end: calc(1.5 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 12px */</span>
713
+ {'margin-inline-start: calc(1.5 * var(--base-increment)) !important;'}{' '}
714
+ <span className="doc-text--highlight">/* 12px */</span>
715
+ <br />
716
+ {'margin-inline-end: calc(1.5 * var(--base-increment)) !important;'}{' '}
717
+ <span className="doc-text--highlight">/* 12px */</span>
495
718
  </td>
496
719
  </tr>
497
720
  <tr>
498
721
  <td>mx-2</td>
499
722
  <td>
500
- {'margin-inline-start: calc(2 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 16px */</span><br />
501
- {'margin-inline-end: calc(2 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 16px */</span>
723
+ {'margin-inline-start: calc(2 * var(--base-increment)) !important;'}{' '}
724
+ <span className="doc-text--highlight">/* 16px */</span>
725
+ <br />
726
+ {'margin-inline-end: calc(2 * var(--base-increment)) !important;'}{' '}
727
+ <span className="doc-text--highlight">/* 16px */</span>
502
728
  </td>
503
729
  </tr>
504
730
  <tr>
505
731
  <td>mx-3</td>
506
732
  <td>
507
- {'margin-inline-start: calc(3 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 24px */</span><br />
508
- {'margin-inline-end: calc(3 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 24px */</span>
733
+ {'margin-inline-start: calc(3 * var(--base-increment)) !important;'}{' '}
734
+ <span className="doc-text--highlight">/* 24px */</span>
735
+ <br />
736
+ {'margin-inline-end: calc(3 * var(--base-increment)) !important;'}{' '}
737
+ <span className="doc-text--highlight">/* 24px */</span>
509
738
  </td>
510
739
  </tr>
511
740
  <tr>
512
741
  <td>mx-4</td>
513
742
  <td>
514
- {'margin-inline-start: calc(4 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 32px */</span><br />
515
- {'margin-inline-end: calc(4 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 32px */</span>
743
+ {'margin-inline-start: calc(4 * var(--base-increment)) !important;'}{' '}
744
+ <span className="doc-text--highlight">/* 32px */</span>
745
+ <br />
746
+ {'margin-inline-end: calc(4 * var(--base-increment)) !important;'}{' '}
747
+ <span className="doc-text--highlight">/* 32px */</span>
516
748
  </td>
517
749
  </tr>
518
750
  <tr>
519
751
  <td>mx-5</td>
520
752
  <td>
521
- {'margin-inline-start: calc(5 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 40px */</span><br />
522
- {'margin-inline-end: calc(5 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 40px */</span>
753
+ {'margin-inline-start: calc(5 * var(--base-increment)) !important;'}{' '}
754
+ <span className="doc-text--highlight">/* 40px */</span>
755
+ <br />
756
+ {'margin-inline-end: calc(5 * var(--base-increment)) !important;'}{' '}
757
+ <span className="doc-text--highlight">/* 40px */</span>
523
758
  </td>
524
759
  </tr>
525
760
  {/* //-----------Block--------// */}
526
- <tr className='utilities-table__divider-row'>
761
+ <tr className="utilities-table__divider-row">
527
762
  <td>block start (top)</td>
528
763
  <td></td>
529
764
  </tr>
@@ -533,34 +768,55 @@ class SpacingUtilitiesDoc extends React.Component {
533
768
  </tr>
534
769
  <tr>
535
770
  <td>mt-0-5</td>
536
- <td>{'margin-block-start: calc(0.5 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 4px */</span></td>
771
+ <td>
772
+ {'margin-block-start: calc(0.5 * var(--base-increment)) !important;'}{' '}
773
+ <span className="doc-text--highlight">/* 4px */</span>
774
+ </td>
537
775
  </tr>
538
776
  <tr>
539
777
  <td>mt-1</td>
540
- <td>{'margin-block-start: calc(1 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 8px */</span></td>
778
+ <td>
779
+ {'margin-block-start: calc(1 * var(--base-increment)) !important;'}{' '}
780
+ <span className="doc-text--highlight">/* 8px */</span>
781
+ </td>
541
782
  </tr>
542
783
  <tr>
543
784
  <td>mt-1-5</td>
544
- <td>{'margin-block-start: calc(1.5 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 12px */</span></td>
785
+ <td>
786
+ {'margin-block-start: calc(1.5 * var(--base-increment)) !important;'}{' '}
787
+ <span className="doc-text--highlight">/* 12px */</span>
788
+ </td>
545
789
  </tr>
546
790
  <tr>
547
791
  <td>mt-2</td>
548
- <td>{'margin-block-start: calc(2 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 16px */</span></td>
792
+ <td>
793
+ {'margin-block-start: calc(2 * var(--base-increment)) !important;'}{' '}
794
+ <span className="doc-text--highlight">/* 16px */</span>
795
+ </td>
549
796
  </tr>
550
797
  <tr>
551
798
  <td>mt-3</td>
552
- <td>{'margin-block-start: calc(3 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 24px */</span></td>
799
+ <td>
800
+ {'margin-block-start: calc(3 * var(--base-increment)) !important;'}{' '}
801
+ <span className="doc-text--highlight">/* 24px */</span>
802
+ </td>
553
803
  </tr>
554
804
  <tr>
555
805
  <td>mt-4</td>
556
- <td>{'margin-block-start: calc(4 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 32px */</span></td>
806
+ <td>
807
+ {'margin-block-start: calc(4 * var(--base-increment)) !important;'}{' '}
808
+ <span className="doc-text--highlight">/* 32px */</span>
809
+ </td>
557
810
  </tr>
558
811
  <tr>
559
812
  <td>mt-5</td>
560
- <td>{'margin-block-start: calc(5 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 40px */</span></td>
813
+ <td>
814
+ {'margin-block-start: calc(5 * var(--base-increment)) !important;'}{' '}
815
+ <span className="doc-text--highlight">/* 40px */</span>
816
+ </td>
561
817
  </tr>
562
818
 
563
- <tr className='utilities-table__divider-row'>
819
+ <tr className="utilities-table__divider-row">
564
820
  <td>block end (bottom)</td>
565
821
  <td></td>
566
822
  </tr>
@@ -571,34 +827,55 @@ class SpacingUtilitiesDoc extends React.Component {
571
827
  </tr>
572
828
  <tr>
573
829
  <td>mb-0-5</td>
574
- <td>{'margin-block-end: calc(0.5 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 4px */</span></td>
830
+ <td>
831
+ {'margin-block-end: calc(0.5 * var(--base-increment)) !important;'}{' '}
832
+ <span className="doc-text--highlight">/* 4px */</span>
833
+ </td>
575
834
  </tr>
576
835
  <tr>
577
836
  <td>mb-1</td>
578
- <td>{'margin-block-end: calc(1 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 8px */</span></td>
837
+ <td>
838
+ {'margin-block-end: calc(1 * var(--base-increment)) !important;'}{' '}
839
+ <span className="doc-text--highlight">/* 8px */</span>
840
+ </td>
579
841
  </tr>
580
842
  <tr>
581
843
  <td>mb-1-5</td>
582
- <td>{'margin-block-end: calc(1.5 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 12px */</span></td>
844
+ <td>
845
+ {'margin-block-end: calc(1.5 * var(--base-increment)) !important;'}{' '}
846
+ <span className="doc-text--highlight">/* 12px */</span>
847
+ </td>
583
848
  </tr>
584
849
  <tr>
585
850
  <td>mb-2</td>
586
- <td>{'margin-block-end: calc(2 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 16px */</span></td>
851
+ <td>
852
+ {'margin-block-end: calc(2 * var(--base-increment)) !important;'}{' '}
853
+ <span className="doc-text--highlight">/* 16px */</span>
854
+ </td>
587
855
  </tr>
588
856
  <tr>
589
857
  <td>me-3</td>
590
- <td>{'margin-block-end: calc(3 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 24px */</span></td>
858
+ <td>
859
+ {'margin-block-end: calc(3 * var(--base-increment)) !important;'}{' '}
860
+ <span className="doc-text--highlight">/* 24px */</span>
861
+ </td>
591
862
  </tr>
592
863
  <tr>
593
864
  <td>mb-4</td>
594
- <td>{'margin-block-end: calc(4 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 32px */</span></td>
865
+ <td>
866
+ {'margin-block-end: calc(4 * var(--base-increment)) !important;'}{' '}
867
+ <span className="doc-text--highlight">/* 32px */</span>
868
+ </td>
595
869
  </tr>
596
870
  <tr>
597
871
  <td>mb-5</td>
598
- <td>{'margin-block-end: calc(5 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 40px */</span></td>
872
+ <td>
873
+ {'margin-block-end: calc(5 * var(--base-increment)) !important;'}{' '}
874
+ <span className="doc-text--highlight">/* 40px */</span>
875
+ </td>
599
876
  </tr>
600
877
 
601
- <tr className='utilities-table__divider-row'>
878
+ <tr className="utilities-table__divider-row">
602
879
  <td>block (y)</td>
603
880
  <td></td>
604
881
  </tr>
@@ -606,61 +883,83 @@ class SpacingUtilitiesDoc extends React.Component {
606
883
  <tr>
607
884
  <td>my-0</td>
608
885
  <td>
609
- {'margin-block-start: 0 !important;'}<br />
886
+ {'margin-block-start: 0 !important;'}
887
+ <br />
610
888
  {'margin-block-end: 0 !important;'}
611
889
  </td>
612
890
  </tr>
613
891
  <tr>
614
892
  <td>my-0-5</td>
615
893
  <td>
616
- {'margin-block-start: calc(0.5 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 4px */</span><br />
617
- {'margin-block-end: calc(0.5 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 4px */</span>
894
+ {'margin-block-start: calc(0.5 * var(--base-increment)) !important;'}{' '}
895
+ <span className="doc-text--highlight">/* 4px */</span>
896
+ <br />
897
+ {'margin-block-end: calc(0.5 * var(--base-increment)) !important;'}{' '}
898
+ <span className="doc-text--highlight">/* 4px */</span>
618
899
  </td>
619
900
  </tr>
620
901
  <tr>
621
902
  <td>my-1</td>
622
903
  <td>
623
- {'margin-block-start: calc(1 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 8px */</span><br />
624
- {'margin-block-end: calc(1 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 8px */</span>
904
+ {'margin-block-start: calc(1 * var(--base-increment)) !important;'}{' '}
905
+ <span className="doc-text--highlight">/* 8px */</span>
906
+ <br />
907
+ {'margin-block-end: calc(1 * var(--base-increment)) !important;'}{' '}
908
+ <span className="doc-text--highlight">/* 8px */</span>
625
909
  </td>
626
910
  </tr>
627
911
  <tr>
628
912
  <td>my-1-5</td>
629
913
  <td>
630
- {'margin-block-start: calc(1.5 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 12px */</span><br />
631
- {'margin-block-end: calc(1.5 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 12px */</span>
914
+ {'margin-block-start: calc(1.5 * var(--base-increment)) !important;'}{' '}
915
+ <span className="doc-text--highlight">/* 12px */</span>
916
+ <br />
917
+ {'margin-block-end: calc(1.5 * var(--base-increment)) !important;'}{' '}
918
+ <span className="doc-text--highlight">/* 12px */</span>
632
919
  </td>
633
920
  </tr>
634
921
  <tr>
635
922
  <td>my-2</td>
636
923
  <td>
637
- {'margin-block-start: calc(2 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 16px */</span><br />
638
- {'margin-block-end: calc(2 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 16px */</span>
924
+ {'margin-block-start: calc(2 * var(--base-increment)) !important;'}{' '}
925
+ <span className="doc-text--highlight">/* 16px */</span>
926
+ <br />
927
+ {'margin-block-end: calc(2 * var(--base-increment)) !important;'}{' '}
928
+ <span className="doc-text--highlight">/* 16px */</span>
639
929
  </td>
640
930
  </tr>
641
931
  <tr>
642
932
  <td>my-3</td>
643
933
  <td>
644
- {'margin-block-start: calc(3 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 24px */</span><br />
645
- {'margin-block-end: calc(3 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 24px */</span>
934
+ {'margin-block-start: calc(3 * var(--base-increment)) !important;'}{' '}
935
+ <span className="doc-text--highlight">/* 24px */</span>
936
+ <br />
937
+ {'margin-block-end: calc(3 * var(--base-increment)) !important;'}{' '}
938
+ <span className="doc-text--highlight">/* 24px */</span>
646
939
  </td>
647
940
  </tr>
648
941
  <tr>
649
942
  <td>my-4</td>
650
943
  <td>
651
- {'margin-block-start: calc(4 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 32px */</span><br />
652
- {'margin-block-end: calc(4 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 32px */</span>
944
+ {'margin-block-start: calc(4 * var(--base-increment)) !important;'}{' '}
945
+ <span className="doc-text--highlight">/* 32px */</span>
946
+ <br />
947
+ {'margin-block-end: calc(4 * var(--base-increment)) !important;'}{' '}
948
+ <span className="doc-text--highlight">/* 32px */</span>
653
949
  </td>
654
950
  </tr>
655
951
  <tr>
656
952
  <td>my-5</td>
657
953
  <td>
658
- {'margin-block-start: calc(5 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 40px */</span><br />
659
- {'margin-block-end: calc(5 * var(--base-increment)) !important;'} <span className="doc-text--highlight">/* 40px */</span>
954
+ {'margin-block-start: calc(5 * var(--base-increment)) !important;'}{' '}
955
+ <span className="doc-text--highlight">/* 40px */</span>
956
+ <br />
957
+ {'margin-block-end: calc(5 * var(--base-increment)) !important;'}{' '}
958
+ <span className="doc-text--highlight">/* 40px */</span>
660
959
  </td>
661
960
  </tr>
662
961
 
663
- <tr className='utilities-table__divider-row'>
962
+ <tr className="utilities-table__divider-row">
664
963
  <td>auto</td>
665
964
  <td></td>
666
965
  </tr>
@@ -670,51 +969,42 @@ class SpacingUtilitiesDoc extends React.Component {
670
969
  </tr>
671
970
  <tr>
672
971
  <td>ms-auto</td>
673
- <td>
674
- {'margin-inline-start: auto !important;'}
675
- </td>
972
+ <td>{'margin-inline-start: auto !important;'}</td>
676
973
  </tr>
677
974
  <tr>
678
975
  <td>me-auto</td>
679
- <td>
680
- {'margin-inline-end: auto !important;'}
681
- </td>
976
+ <td>{'margin-inline-end: auto !important;'}</td>
682
977
  </tr>
683
978
  <tr>
684
979
  <td>mt-auto</td>
685
- <td>
686
- {'margin-block-start: auto !important;'}
687
- </td>
980
+ <td>{'margin-block-start: auto !important;'}</td>
688
981
  </tr>
689
982
  <tr>
690
983
  <td>mb-auto</td>
691
- <td>
692
- {'margin-block-end: auto !important;'}
693
- </td>
984
+ <td>{'margin-block-end: auto !important;'}</td>
694
985
  </tr>
695
986
  <tr>
696
987
  <td>mx-auto</td>
697
988
  <td>
698
- {'margin-inline-start: auto !important;'}<br />
989
+ {'margin-inline-start: auto !important;'}
990
+ <br />
699
991
  {'margin-inline-end: auto !important;'}
700
992
  </td>
701
993
  </tr>
702
994
  <tr>
703
995
  <td>my-auto</td>
704
996
  <td>
705
- {'margin-block-start: auto !important;'}<br />
997
+ {'margin-block-start: auto !important;'}
998
+ <br />
706
999
  {'margin-block-end: auto !important;'}
707
1000
  </td>
708
1001
  </tr>
709
-
710
-
711
-
712
1002
  </tbody>
713
1003
  </table>
714
1004
  </div>
715
1005
  </div>
716
1006
 
717
- <div className='docs-page__container-block--gap'>
1007
+ <div className="docs-page__container-block--gap">
718
1008
  <h3 className="docs-page__h3">Gap</h3>
719
1009
  <div className="utilities-table__container">
720
1010
  <table className="table utilities-table">
@@ -731,44 +1021,59 @@ class SpacingUtilitiesDoc extends React.Component {
731
1021
  </tr> */}
732
1022
  <tr>
733
1023
  <td>gap-0</td>
734
- <td>{'gap: var(--gap-0);'} <span className="doc-text--highlight">/* 0px */</span></td>
1024
+ <td>
1025
+ {'gap: var(--gap-0);'} <span className="doc-text--highlight">/* 0px */</span>
1026
+ </td>
735
1027
  </tr>
736
1028
  <tr>
737
1029
  <td>gap-0-5</td>
738
- <td>{'gap: var(--gap-0-5);'} <span className="doc-text--highlight">/* 4px */</span></td>
1030
+ <td>
1031
+ {'gap: var(--gap-0-5);'} <span className="doc-text--highlight">/* 4px */</span>
1032
+ </td>
739
1033
  </tr>
740
1034
  <tr>
741
1035
  <td>gap-1</td>
742
- <td>{'gap: var(--gap-1);'} <span className="doc-text--highlight">/* 8px */</span></td>
1036
+ <td>
1037
+ {'gap: var(--gap-1);'} <span className="doc-text--highlight">/* 8px */</span>
1038
+ </td>
743
1039
  </tr>
744
1040
  <tr>
745
1041
  <td>gap-1-5</td>
746
- <td>{'gap: var(--gap-1-5);'} <span className="doc-text--highlight">/* 12px */</span></td>
1042
+ <td>
1043
+ {'gap: var(--gap-1-5);'} <span className="doc-text--highlight">/* 12px */</span>
1044
+ </td>
747
1045
  </tr>
748
1046
  <tr>
749
1047
  <td>gap-2</td>
750
- <td>{'gap: var(--gap-2);'} <span className="doc-text--highlight">/* 16px */</span></td>
1048
+ <td>
1049
+ {'gap: var(--gap-2);'} <span className="doc-text--highlight">/* 16px */</span>
1050
+ </td>
751
1051
  </tr>
752
1052
  <tr>
753
1053
  <td>gap-3</td>
754
- <td>{'gap: var(--gap-3);'} <span className="doc-text--highlight">/* 24px */</span></td>
1054
+ <td>
1055
+ {'gap: var(--gap-3);'} <span className="doc-text--highlight">/* 24px */</span>
1056
+ </td>
755
1057
  </tr>
756
1058
  <tr>
757
1059
  <td>gap-4</td>
758
- <td>{'gap: var(--gap-4);'} <span className="doc-text--highlight">/* 32px */</span></td>
1060
+ <td>
1061
+ {'gap: var(--gap-4);'} <span className="doc-text--highlight">/* 32px */</span>
1062
+ </td>
759
1063
  </tr>
760
1064
  <tr>
761
1065
  <td>gap-5</td>
762
- <td>{'gap: var(--gap-5);'} <span className="doc-text--highlight">/* 40px */</span></td>
1066
+ <td>
1067
+ {'gap: var(--gap-5);'} <span className="doc-text--highlight">/* 40px */</span>
1068
+ </td>
763
1069
  </tr>
764
1070
  </tbody>
765
1071
  </table>
766
1072
  </div>
767
1073
  </div>
768
-
769
1074
  </section>
770
- )
1075
+ );
771
1076
  }
772
1077
  }
773
1078
 
774
- export { SpacingUtilitiesDoc };
1079
+ export {SpacingUtilitiesDoc};