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
@@ -1,9 +1,8 @@
1
-
2
1
  import * as React from 'react';
3
2
  import classNames from 'classnames';
4
3
 
5
4
  interface IProps {
6
- illustration: 'headlines' | 'keywords' | 'optimise' | 'summary' | 'translate';
5
+ illustration: 'headlines' | 'keywords' | 'optimise' | 'summary' | 'translate';
7
6
  }
8
7
 
9
8
  export class SvgIconIllustration extends React.PureComponent<IProps> {
@@ -14,26 +13,90 @@ export class SvgIconIllustration extends React.PureComponent<IProps> {
14
13
  return (
15
14
  <svg width="64" height="32" viewBox="0 0 64 32" fill="none" xmlns="http://www.w3.org/2000/svg">
16
15
  <g clipPath="url(#clip0_1958_28602)">
17
- <path d="M26 14.5C26 14.2239 26.2239 14 26.5 14H32.5C32.7761 14 33 14.2239 33 14.5C33 14.7761 32.7761 15 32.5 15H26.5C26.2239 15 26 14.7761 26 14.5Z" fill="var(--color-text-lighter)" fillOpacity="0.5"/>
18
- <path d="M26 17.5C26 17.2239 26.2239 17 26.5 17H32.5C32.7761 17 33 17.2239 33 17.5C33 17.7761 32.7761 18 32.5 18H26.5C26.2239 18 26 17.7761 26 17.5Z" fill="var(--color-text-lighter)" fillOpacity="0.5"/>
19
- <path d="M35 17.5C35 17.2239 35.2239 17 35.5 17H41.5C41.7761 17 42 17.2239 42 17.5C42 17.7761 41.7761 18 41.5 18H35.5C35.2239 18 35 17.7761 35 17.5Z" fill="var(--color-text-lighter)" fillOpacity="0.5"/>
20
- <path d="M26.5 20C26.2239 20 26 20.2239 26 20.5C26 20.7761 26.2239 21 26.5 21H32.5C32.7761 21 33 20.7761 33 20.5C33 20.2239 32.7761 20 32.5 20H26.5Z" fill="var(--color-text-lighter)" fillOpacity="0.5"/>
21
- <path d="M35.5 20C35.2239 20 35 20.2239 35 20.5C35 20.7761 35.2239 21 35.5 21H41.5C41.7761 21 42 20.7761 42 20.5C42 20.2239 41.7761 20 41.5 20H35.5Z" fill="var(--color-text-lighter)" fillOpacity="0.5"/>
22
- <path d="M26 23.5C26 23.2239 26.2239 23 26.5 23H32.5C32.7761 23 33 23.2239 33 23.5C33 23.7761 32.7761 24 32.5 24H26.5C26.2239 24 26 23.7761 26 23.5Z" fill="var(--color-text-lighter)" fillOpacity="0.5"/>
23
- <path d="M34.998 23.5C34.998 23.2239 35.2219 23 35.498 23H41.498C41.7742 23 41.998 23.2239 41.998 23.5C41.998 23.7761 41.7742 24 41.498 24H35.498C35.2219 24 34.998 23.7761 34.998 23.5Z" fill="var(--color-text-lighter)" fillOpacity="0.5"/>
16
+ <path
17
+ d="M26 14.5C26 14.2239 26.2239 14 26.5 14H32.5C32.7761 14 33 14.2239 33 14.5C33 14.7761 32.7761 15 32.5 15H26.5C26.2239 15 26 14.7761 26 14.5Z"
18
+ fill="var(--color-text-lighter)"
19
+ fillOpacity="0.5"
20
+ />
21
+ <path
22
+ d="M26 17.5C26 17.2239 26.2239 17 26.5 17H32.5C32.7761 17 33 17.2239 33 17.5C33 17.7761 32.7761 18 32.5 18H26.5C26.2239 18 26 17.7761 26 17.5Z"
23
+ fill="var(--color-text-lighter)"
24
+ fillOpacity="0.5"
25
+ />
26
+ <path
27
+ d="M35 17.5C35 17.2239 35.2239 17 35.5 17H41.5C41.7761 17 42 17.2239 42 17.5C42 17.7761 41.7761 18 41.5 18H35.5C35.2239 18 35 17.7761 35 17.5Z"
28
+ fill="var(--color-text-lighter)"
29
+ fillOpacity="0.5"
30
+ />
31
+ <path
32
+ d="M26.5 20C26.2239 20 26 20.2239 26 20.5C26 20.7761 26.2239 21 26.5 21H32.5C32.7761 21 33 20.7761 33 20.5C33 20.2239 32.7761 20 32.5 20H26.5Z"
33
+ fill="var(--color-text-lighter)"
34
+ fillOpacity="0.5"
35
+ />
36
+ <path
37
+ d="M35.5 20C35.2239 20 35 20.2239 35 20.5C35 20.7761 35.2239 21 35.5 21H41.5C41.7761 21 42 20.7761 42 20.5C42 20.2239 41.7761 20 41.5 20H35.5Z"
38
+ fill="var(--color-text-lighter)"
39
+ fillOpacity="0.5"
40
+ />
41
+ <path
42
+ d="M26 23.5C26 23.2239 26.2239 23 26.5 23H32.5C32.7761 23 33 23.2239 33 23.5C33 23.7761 32.7761 24 32.5 24H26.5C26.2239 24 26 23.7761 26 23.5Z"
43
+ fill="var(--color-text-lighter)"
44
+ fillOpacity="0.5"
45
+ />
46
+ <path
47
+ d="M34.998 23.5C34.998 23.2239 35.2219 23 35.498 23H41.498C41.7742 23 41.998 23.2239 41.998 23.5C41.998 23.7761 41.7742 24 41.498 24H35.498C35.2219 24 34.998 23.7761 34.998 23.5Z"
48
+ fill="var(--color-text-lighter)"
49
+ fillOpacity="0.5"
50
+ />
24
51
  </g>
25
- <path opacity="0.6" fillRule="evenodd" clipRule="evenodd" d="M27 5C26.4477 5 26 5.44772 26 6V10C26 10.5523 26.4477 11 27 11H33V8.6C33 7.71634 33.7163 7 34.6 7H42V6C42 5.44772 41.5523 5 41 5H27Z" fill="var(--sd-colour-primary--active)"/>
26
- <path fillRule="evenodd" clipRule="evenodd" d="M21 5V2C21 0.981692 21.9378 0 23 0H45C46.1043 0 47 0.895715 47 2V7H45V2H23V27C23 27.5523 22.5523 28 22 28C21.4477 28 21 27.5523 21 27V7H19V28C19 29.0889 19.9118 30 21 30H43C44 30 45 29 45 28V17H47V28C47 29.0608 46.579 30.0782 45.8281 30.8281C45.0783 31.579 44.0608 32 43 32H21C19.9392 32 18.9218 31.579 18.1719 30.8281C17.421 30.0782 17 29.0608 17 28V6C17 5.5 17.4477 5 18 5H21Z" fill="var(--color-text-light)" fillOpacity="0.8"/>
27
- <rect x="35" y="9" width="16" height="6" rx="1" fill="var(--sd-colour-primary--active)"/>
28
- <path d="M53.25 10L54.8167 6.56667L58.25 5L54.8167 3.43333L53.25 0L51.6833 3.43333L48.25 5L51.6833 6.56667L53.25 10Z" fill="var(--sd-colour-primary--active)" fillOpacity="0.4"/>
29
- <path d="M58.25 14L58.8767 12.6267L60.25 12L58.8767 11.3733L58.25 10L57.6233 11.3733L56.25 12L57.6233 12.6267L58.25 14Z" fill="var(--sd-colour-primary--active)" fillOpacity="0.32"/>
30
- <path d="M59 23L59.94 20.94L62 20L59.94 19.06L59 17L58.06 19.06L56 20L58.06 20.94L59 23Z" fill="var(--sd-colour-primary--active)" fillOpacity="0.32"/>
31
- <path d="M5 15L5.94 12.94L8 12L5.94 11.06L5 9L4.06 11.06L2 12L4.06 12.94L5 15Z" fill="var(--sd-colour-primary--active)" fillOpacity="0.32"/>
32
- <path d="M10 9L11.2533 6.25333L14 5L11.2533 3.74667L10 1L8.74667 3.74667L6 5L8.74667 6.25333L10 9Z" fill="var(--sd-colour-primary--active)" fillOpacity="0.4"/>
33
- <path d="M10 19L10.6267 17.6267L12 17L10.6267 16.3733L10 15L9.37333 16.3733L8 17L9.37333 17.6267L10 19Z" fill="var(--sd-colour-primary--active)" fillOpacity="0.32"/>
52
+ <path
53
+ opacity="0.6"
54
+ fillRule="evenodd"
55
+ clipRule="evenodd"
56
+ d="M27 5C26.4477 5 26 5.44772 26 6V10C26 10.5523 26.4477 11 27 11H33V8.6C33 7.71634 33.7163 7 34.6 7H42V6C42 5.44772 41.5523 5 41 5H27Z"
57
+ fill="var(--sd-colour-primary--active)"
58
+ />
59
+ <path
60
+ fillRule="evenodd"
61
+ clipRule="evenodd"
62
+ d="M21 5V2C21 0.981692 21.9378 0 23 0H45C46.1043 0 47 0.895715 47 2V7H45V2H23V27C23 27.5523 22.5523 28 22 28C21.4477 28 21 27.5523 21 27V7H19V28C19 29.0889 19.9118 30 21 30H43C44 30 45 29 45 28V17H47V28C47 29.0608 46.579 30.0782 45.8281 30.8281C45.0783 31.579 44.0608 32 43 32H21C19.9392 32 18.9218 31.579 18.1719 30.8281C17.421 30.0782 17 29.0608 17 28V6C17 5.5 17.4477 5 18 5H21Z"
63
+ fill="var(--color-text-light)"
64
+ fillOpacity="0.8"
65
+ />
66
+ <rect x="35" y="9" width="16" height="6" rx="1" fill="var(--sd-colour-primary--active)" />
67
+ <path
68
+ d="M53.25 10L54.8167 6.56667L58.25 5L54.8167 3.43333L53.25 0L51.6833 3.43333L48.25 5L51.6833 6.56667L53.25 10Z"
69
+ fill="var(--sd-colour-primary--active)"
70
+ fillOpacity="0.4"
71
+ />
72
+ <path
73
+ d="M58.25 14L58.8767 12.6267L60.25 12L58.8767 11.3733L58.25 10L57.6233 11.3733L56.25 12L57.6233 12.6267L58.25 14Z"
74
+ fill="var(--sd-colour-primary--active)"
75
+ fillOpacity="0.32"
76
+ />
77
+ <path
78
+ d="M59 23L59.94 20.94L62 20L59.94 19.06L59 17L58.06 19.06L56 20L58.06 20.94L59 23Z"
79
+ fill="var(--sd-colour-primary--active)"
80
+ fillOpacity="0.32"
81
+ />
82
+ <path
83
+ d="M5 15L5.94 12.94L8 12L5.94 11.06L5 9L4.06 11.06L2 12L4.06 12.94L5 15Z"
84
+ fill="var(--sd-colour-primary--active)"
85
+ fillOpacity="0.32"
86
+ />
87
+ <path
88
+ d="M10 9L11.2533 6.25333L14 5L11.2533 3.74667L10 1L8.74667 3.74667L6 5L8.74667 6.25333L10 9Z"
89
+ fill="var(--sd-colour-primary--active)"
90
+ fillOpacity="0.4"
91
+ />
92
+ <path
93
+ d="M10 19L10.6267 17.6267L12 17L10.6267 16.3733L10 15L9.37333 16.3733L8 17L9.37333 17.6267L10 19Z"
94
+ fill="var(--sd-colour-primary--active)"
95
+ fillOpacity="0.32"
96
+ />
34
97
  <defs>
35
98
  <clipPath id="clip0_1958_28602">
36
- <rect width="16" height="10" fill="white" transform="translate(26 14)"/>
99
+ <rect width="16" height="10" fill="white" transform="translate(26 14)" />
37
100
  </clipPath>
38
101
  </defs>
39
102
  </svg>
@@ -43,46 +106,162 @@ export class SvgIconIllustration extends React.PureComponent<IProps> {
43
106
  <svg width="64" height="32" viewBox="0 0 64 32" fill="none" xmlns="http://www.w3.org/2000/svg">
44
107
  <g clipPath="url(#clip0_1814_54108)">
45
108
  <g clipPath="url(#clip1_1814_54108)">
46
- <rect x="21" y="5" width="22" height="5" rx="1" fill="var(--color-text-lighter)" fillOpacity="0.8"/>
47
- <path d="M21.5 13C21.2239 13 21 13.2239 21 13.5C21 13.7761 21.2239 14 21.5 14H30.5C30.7761 14 31 13.7761 31 13.5C31 13.2239 30.7761 13 30.5 13H21.5Z" fill="var(--color-text-lighter)" fillOpacity="0.5"/>
48
- <path d="M33.5 13C33.2239 13 33 13.2239 33 13.5C33 13.7761 33.2239 14 33.5 14H42.5C42.7761 14 43 13.7761 43 13.5C43 13.2239 42.7761 13 42.5 13H33.5Z" fill="var(--color-text-lighter)" fillOpacity="0.5"/>
49
- <path d="M21.5 16C21.2239 16 21 16.2239 21 16.5C21 16.7761 21.2239 17 21.5 17H30.5C30.7761 17 31 16.7761 31 16.5C31 16.2239 30.7761 16 30.5 16H21.5Z" fill="var(--color-text-lighter)" fillOpacity="0.5"/>
50
- <path d="M33.5 16C33.2239 16 33 16.2239 33 16.5C33 16.7761 33.2239 17 33.5 17H42.5C42.7761 17 43 16.7761 43 16.5C43 16.2239 42.7761 16 42.5 16H33.5Z" fill="var(--color-text-lighter)" fillOpacity="0.5"/>
51
- <path d="M21 19.5C21 19.2239 21.2239 19 21.5 19H30.5C30.7761 19 31 19.2239 31 19.5C31 19.7761 30.7761 20 30.5 20H21.5C21.2239 20 21 19.7761 21 19.5Z" fill="var(--color-text-lighter)" fillOpacity="0.5"/>
52
- <path d="M33 19.5C33 19.2239 33.2239 19 33.5 19H42.5C42.7761 19 43 19.2239 43 19.5C43 19.7761 42.7761 20 42.5 20H33.5C33.2239 20 33 19.7761 33 19.5Z" fill="var(--color-text-lighter)" fillOpacity="0.5"/>
53
- <path d="M21.5 22C21.2239 22 21 22.2239 21 22.5C21 22.7761 21.2239 23 21.5 23H30.5C30.7761 23 31 22.7761 31 22.5C31 22.2239 30.7761 22 30.5 22H21.5Z" fill="var(--color-text-lighter)" fillOpacity="0.5"/>
54
- <path d="M33.5 22C33.2239 22 33 22.2239 33 22.5C33 22.7761 33.2239 23 33.5 23H42.5C42.7761 23 43 22.7761 43 22.5C43 22.2239 42.7761 22 42.5 22H33.5Z" fill="var(--color-text-lighter)" fillOpacity="0.5"/>
55
- <path d="M21 25.5C21 25.2239 21.2239 25 21.5 25H30.5C30.7761 25 31 25.2239 31 25.5C31 25.7761 30.7761 26 30.5 26H21.5C21.2239 26 21 25.7761 21 25.5Z" fill="var(--color-text-lighter)" fillOpacity="0.5"/>
56
- <path d="M33 25.5C33 25.2239 33.2239 25 33.5 25H42.5C42.7761 25 43 25.2239 43 25.5C43 25.7761 42.7761 26 42.5 26H33.5C33.2239 26 33 25.7761 33 25.5Z" fill="var(--color-text-lighter)" fillOpacity="0.5"/>
109
+ <rect
110
+ x="21"
111
+ y="5"
112
+ width="22"
113
+ height="5"
114
+ rx="1"
115
+ fill="var(--color-text-lighter)"
116
+ fillOpacity="0.8"
117
+ />
118
+ <path
119
+ d="M21.5 13C21.2239 13 21 13.2239 21 13.5C21 13.7761 21.2239 14 21.5 14H30.5C30.7761 14 31 13.7761 31 13.5C31 13.2239 30.7761 13 30.5 13H21.5Z"
120
+ fill="var(--color-text-lighter)"
121
+ fillOpacity="0.5"
122
+ />
123
+ <path
124
+ d="M33.5 13C33.2239 13 33 13.2239 33 13.5C33 13.7761 33.2239 14 33.5 14H42.5C42.7761 14 43 13.7761 43 13.5C43 13.2239 42.7761 13 42.5 13H33.5Z"
125
+ fill="var(--color-text-lighter)"
126
+ fillOpacity="0.5"
127
+ />
128
+ <path
129
+ d="M21.5 16C21.2239 16 21 16.2239 21 16.5C21 16.7761 21.2239 17 21.5 17H30.5C30.7761 17 31 16.7761 31 16.5C31 16.2239 30.7761 16 30.5 16H21.5Z"
130
+ fill="var(--color-text-lighter)"
131
+ fillOpacity="0.5"
132
+ />
133
+ <path
134
+ d="M33.5 16C33.2239 16 33 16.2239 33 16.5C33 16.7761 33.2239 17 33.5 17H42.5C42.7761 17 43 16.7761 43 16.5C43 16.2239 42.7761 16 42.5 16H33.5Z"
135
+ fill="var(--color-text-lighter)"
136
+ fillOpacity="0.5"
137
+ />
138
+ <path
139
+ d="M21 19.5C21 19.2239 21.2239 19 21.5 19H30.5C30.7761 19 31 19.2239 31 19.5C31 19.7761 30.7761 20 30.5 20H21.5C21.2239 20 21 19.7761 21 19.5Z"
140
+ fill="var(--color-text-lighter)"
141
+ fillOpacity="0.5"
142
+ />
143
+ <path
144
+ d="M33 19.5C33 19.2239 33.2239 19 33.5 19H42.5C42.7761 19 43 19.2239 43 19.5C43 19.7761 42.7761 20 42.5 20H33.5C33.2239 20 33 19.7761 33 19.5Z"
145
+ fill="var(--color-text-lighter)"
146
+ fillOpacity="0.5"
147
+ />
148
+ <path
149
+ d="M21.5 22C21.2239 22 21 22.2239 21 22.5C21 22.7761 21.2239 23 21.5 23H30.5C30.7761 23 31 22.7761 31 22.5C31 22.2239 30.7761 22 30.5 22H21.5Z"
150
+ fill="var(--color-text-lighter)"
151
+ fillOpacity="0.5"
152
+ />
153
+ <path
154
+ d="M33.5 22C33.2239 22 33 22.2239 33 22.5C33 22.7761 33.2239 23 33.5 23H42.5C42.7761 23 43 22.7761 43 22.5C43 22.2239 42.7761 22 42.5 22H33.5Z"
155
+ fill="var(--color-text-lighter)"
156
+ fillOpacity="0.5"
157
+ />
158
+ <path
159
+ d="M21 25.5C21 25.2239 21.2239 25 21.5 25H30.5C30.7761 25 31 25.2239 31 25.5C31 25.7761 30.7761 26 30.5 26H21.5C21.2239 26 21 25.7761 21 25.5Z"
160
+ fill="var(--color-text-lighter)"
161
+ fillOpacity="0.5"
162
+ />
163
+ <path
164
+ d="M33 25.5C33 25.2239 33.2239 25 33.5 25H42.5C42.7761 25 43 25.2239 43 25.5C43 25.7761 42.7761 26 42.5 26H33.5C33.2239 26 33 25.7761 33 25.5Z"
165
+ fill="var(--color-text-lighter)"
166
+ fillOpacity="0.5"
167
+ />
57
168
  </g>
58
- <path fillRule="evenodd" clipRule="evenodd" d="M47 2H17V6H15V2C15 0.895431 15.8954 0 17 0H47C48.1046 0 49 0.895431 49 2V15H47V2ZM47 27V30H17V20H15V30C15 31.1046 15.8954 32 17 32H47C48.1046 32 49 31.1046 49 30V27H47Z" fill="var(--color-text-light)" fillOpacity="0.8"/>
59
- <rect x="45" y="17" width="19" height="8" rx="1" fill="var(--sd-colour-primary--active)"/>
60
- <path d="M48 19.5C48 19.2239 48.2239 19 48.5 19H51.5C51.7761 19 52 19.2239 52 19.5C52 19.7761 51.7761 20 51.5 20H48.5C48.2239 20 48 19.7761 48 19.5Z" fill="#F6F7F8"/>
61
- <path d="M48 22.5C48 22.2239 48.2239 22 48.5 22H53.5C53.7761 22 54 22.2239 54 22.5C54 22.7761 53.7761 23 53.5 23H48.5C48.2239 23 48 22.7761 48 22.5Z" fill="#F6F7F8"/>
62
- <path d="M53.5 19C53.2239 19 53 19.2239 53 19.5C53 19.7761 53.2239 20 53.5 20H54.5C54.7761 20 55 19.7761 55 19.5C55 19.2239 54.7761 19 54.5 19H53.5Z" fill="#F6F7F8"/>
63
- <path d="M56 19.5C56 19.2239 56.2239 19 56.5 19H60.5C60.7761 19 61 19.2239 61 19.5C61 19.7761 60.7761 20 60.5 20H56.5C56.2239 20 56 19.7761 56 19.5Z" fill="#F6F7F8"/>
64
- <path d="M55.5 22C55.2239 22 55 22.2239 55 22.5C55 22.7761 55.2239 23 55.5 23H57.5C57.7761 23 58 22.7761 58 22.5C58 22.2239 57.7761 22 57.5 22H55.5Z" fill="#F6F7F8"/>
65
- <rect y="8" width="19" height="10" rx="1" fill="var(--sd-colour-primary--active)"/>
66
- <path d="M3 11.5C3 11.2239 3.22386 11 3.5 11H6.5C6.77614 11 7 11.2239 7 11.5C7 11.7761 6.77614 12 6.5 12H3.5C3.22386 12 3 11.7761 3 11.5Z" fill="#F6F7F8"/>
67
- <path d="M3 14.5C3 14.2239 3.22386 14 3.5 14H8.5C8.77614 14 9 14.2239 9 14.5C9 14.7761 8.77614 15 8.5 15H3.5C3.22386 15 3 14.7761 3 14.5Z" fill="#F6F7F8"/>
68
- <path d="M8.5 11C8.22386 11 8 11.2239 8 11.5C8 11.7761 8.22386 12 8.5 12H9.5C9.77614 12 10 11.7761 10 11.5C10 11.2239 9.77614 11 9.5 11H8.5Z" fill="#F6F7F8"/>
69
- <path d="M11 11.5C11 11.2239 11.2239 11 11.5 11H15.5C15.7761 11 16 11.2239 16 11.5C16 11.7761 15.7761 12 15.5 12H11.5C11.2239 12 11 11.7761 11 11.5Z" fill="#F6F7F8"/>
70
- <path d="M10.5 14C10.2239 14 10 14.2239 10 14.5C10 14.7761 10.2239 15 10.5 15H12.5C12.7761 15 13 14.7761 13 14.5C13 14.2239 12.7761 14 12.5 14H10.5Z" fill="#F6F7F8"/>
71
- <path d="M55 9L56.2533 6.25333L59 5L56.2533 3.74667L55 1L53.7467 3.74667L51 5L53.7467 6.25333L55 9Z" fill="var(--sd-colour-primary--active)" fillOpacity="0.4"/>
72
- <path d="M5 32L6.25333 29.2533L9 28L6.25333 26.7467L5 24L3.74667 26.7467L1 28L3.74667 29.2533L5 32Z" fill="var(--sd-colour-primary--active)" fillOpacity="0.4"/>
73
- <path d="M59.5 32L60.1267 30.6267L61.5 30L60.1267 29.3733L59.5 28L58.8733 29.3733L57.5 30L58.8733 30.6267L59.5 32Z" fill="var(--sd-colour-primary--active)" fillOpacity="0.32"/>
74
- <path d="M53 15L53.6267 13.6267L55 13L53.6267 12.3733L53 11L52.3733 12.3733L51 13L52.3733 13.6267L53 15Z" fill="var(--sd-colour-primary--active)" fillOpacity="0.32"/>
75
- <path d="M11 25L11.6267 23.6267L13 23L11.6267 22.3733L11 21L10.3733 22.3733L9 23L10.3733 23.6267L11 25Z" fill="var(--sd-colour-primary--active)" fillOpacity="0.32"/>
76
- <path d="M2 4L2.62667 2.62667L4 2L2.62667 1.37333L2 0L1.37333 1.37333L0 2L1.37333 2.62667L2 4Z" fill="var(--sd-colour-primary--active)" fillOpacity="0.32"/>
77
- <path d="M60.5 15L61.44 12.94L63.5 12L61.44 11.06L60.5 9L59.56 11.06L57.5 12L59.56 12.94L60.5 15Z" fill="var(--sd-colour-primary--active)" fillOpacity="0.4"/>
78
- <path d="M10 6L10.94 3.94L13 3L10.94 2.06L10 0L9.06 2.06L7 3L9.06 3.94L10 6Z" fill="var(--sd-colour-primary--active)" fillOpacity="0.4"/>
169
+ <path
170
+ fillRule="evenodd"
171
+ clipRule="evenodd"
172
+ d="M47 2H17V6H15V2C15 0.895431 15.8954 0 17 0H47C48.1046 0 49 0.895431 49 2V15H47V2ZM47 27V30H17V20H15V30C15 31.1046 15.8954 32 17 32H47C48.1046 32 49 31.1046 49 30V27H47Z"
173
+ fill="var(--color-text-light)"
174
+ fillOpacity="0.8"
175
+ />
176
+ <rect x="45" y="17" width="19" height="8" rx="1" fill="var(--sd-colour-primary--active)" />
177
+ <path
178
+ d="M48 19.5C48 19.2239 48.2239 19 48.5 19H51.5C51.7761 19 52 19.2239 52 19.5C52 19.7761 51.7761 20 51.5 20H48.5C48.2239 20 48 19.7761 48 19.5Z"
179
+ fill="#F6F7F8"
180
+ />
181
+ <path
182
+ d="M48 22.5C48 22.2239 48.2239 22 48.5 22H53.5C53.7761 22 54 22.2239 54 22.5C54 22.7761 53.7761 23 53.5 23H48.5C48.2239 23 48 22.7761 48 22.5Z"
183
+ fill="#F6F7F8"
184
+ />
185
+ <path
186
+ d="M53.5 19C53.2239 19 53 19.2239 53 19.5C53 19.7761 53.2239 20 53.5 20H54.5C54.7761 20 55 19.7761 55 19.5C55 19.2239 54.7761 19 54.5 19H53.5Z"
187
+ fill="#F6F7F8"
188
+ />
189
+ <path
190
+ d="M56 19.5C56 19.2239 56.2239 19 56.5 19H60.5C60.7761 19 61 19.2239 61 19.5C61 19.7761 60.7761 20 60.5 20H56.5C56.2239 20 56 19.7761 56 19.5Z"
191
+ fill="#F6F7F8"
192
+ />
193
+ <path
194
+ d="M55.5 22C55.2239 22 55 22.2239 55 22.5C55 22.7761 55.2239 23 55.5 23H57.5C57.7761 23 58 22.7761 58 22.5C58 22.2239 57.7761 22 57.5 22H55.5Z"
195
+ fill="#F6F7F8"
196
+ />
197
+ <rect y="8" width="19" height="10" rx="1" fill="var(--sd-colour-primary--active)" />
198
+ <path
199
+ d="M3 11.5C3 11.2239 3.22386 11 3.5 11H6.5C6.77614 11 7 11.2239 7 11.5C7 11.7761 6.77614 12 6.5 12H3.5C3.22386 12 3 11.7761 3 11.5Z"
200
+ fill="#F6F7F8"
201
+ />
202
+ <path
203
+ d="M3 14.5C3 14.2239 3.22386 14 3.5 14H8.5C8.77614 14 9 14.2239 9 14.5C9 14.7761 8.77614 15 8.5 15H3.5C3.22386 15 3 14.7761 3 14.5Z"
204
+ fill="#F6F7F8"
205
+ />
206
+ <path
207
+ d="M8.5 11C8.22386 11 8 11.2239 8 11.5C8 11.7761 8.22386 12 8.5 12H9.5C9.77614 12 10 11.7761 10 11.5C10 11.2239 9.77614 11 9.5 11H8.5Z"
208
+ fill="#F6F7F8"
209
+ />
210
+ <path
211
+ d="M11 11.5C11 11.2239 11.2239 11 11.5 11H15.5C15.7761 11 16 11.2239 16 11.5C16 11.7761 15.7761 12 15.5 12H11.5C11.2239 12 11 11.7761 11 11.5Z"
212
+ fill="#F6F7F8"
213
+ />
214
+ <path
215
+ d="M10.5 14C10.2239 14 10 14.2239 10 14.5C10 14.7761 10.2239 15 10.5 15H12.5C12.7761 15 13 14.7761 13 14.5C13 14.2239 12.7761 14 12.5 14H10.5Z"
216
+ fill="#F6F7F8"
217
+ />
218
+ <path
219
+ d="M55 9L56.2533 6.25333L59 5L56.2533 3.74667L55 1L53.7467 3.74667L51 5L53.7467 6.25333L55 9Z"
220
+ fill="var(--sd-colour-primary--active)"
221
+ fillOpacity="0.4"
222
+ />
223
+ <path
224
+ d="M5 32L6.25333 29.2533L9 28L6.25333 26.7467L5 24L3.74667 26.7467L1 28L3.74667 29.2533L5 32Z"
225
+ fill="var(--sd-colour-primary--active)"
226
+ fillOpacity="0.4"
227
+ />
228
+ <path
229
+ d="M59.5 32L60.1267 30.6267L61.5 30L60.1267 29.3733L59.5 28L58.8733 29.3733L57.5 30L58.8733 30.6267L59.5 32Z"
230
+ fill="var(--sd-colour-primary--active)"
231
+ fillOpacity="0.32"
232
+ />
233
+ <path
234
+ d="M53 15L53.6267 13.6267L55 13L53.6267 12.3733L53 11L52.3733 12.3733L51 13L52.3733 13.6267L53 15Z"
235
+ fill="var(--sd-colour-primary--active)"
236
+ fillOpacity="0.32"
237
+ />
238
+ <path
239
+ d="M11 25L11.6267 23.6267L13 23L11.6267 22.3733L11 21L10.3733 22.3733L9 23L10.3733 23.6267L11 25Z"
240
+ fill="var(--sd-colour-primary--active)"
241
+ fillOpacity="0.32"
242
+ />
243
+ <path
244
+ d="M2 4L2.62667 2.62667L4 2L2.62667 1.37333L2 0L1.37333 1.37333L0 2L1.37333 2.62667L2 4Z"
245
+ fill="var(--sd-colour-primary--active)"
246
+ fillOpacity="0.32"
247
+ />
248
+ <path
249
+ d="M60.5 15L61.44 12.94L63.5 12L61.44 11.06L60.5 9L59.56 11.06L57.5 12L59.56 12.94L60.5 15Z"
250
+ fill="var(--sd-colour-primary--active)"
251
+ fillOpacity="0.4"
252
+ />
253
+ <path
254
+ d="M10 6L10.94 3.94L13 3L10.94 2.06L10 0L9.06 2.06L7 3L9.06 3.94L10 6Z"
255
+ fill="var(--sd-colour-primary--active)"
256
+ fillOpacity="0.4"
257
+ />
79
258
  </g>
80
259
  <defs>
81
260
  <clipPath id="clip0_1814_54108">
82
- <rect width="64" height="32" fill="white"/>
261
+ <rect width="64" height="32" fill="white" />
83
262
  </clipPath>
84
263
  <clipPath id="clip1_1814_54108">
85
- <rect width="22" height="21" fill="white" transform="translate(21 5)"/>
264
+ <rect width="22" height="21" fill="white" transform="translate(21 5)" />
86
265
  </clipPath>
87
266
  </defs>
88
267
  </svg>
@@ -92,38 +271,136 @@ export class SvgIconIllustration extends React.PureComponent<IProps> {
92
271
  <svg width="64" height="32" viewBox="0 0 64 32" fill="none" xmlns="http://www.w3.org/2000/svg">
93
272
  <g clipPath="url(#clip0_1814_54107)">
94
273
  <g clipPath="url(#clip1_1814_54107)">
95
- <path d="M37.0012 22C37.2658 22.3521 37.5531 22.6861 37.8609 23H30.5C30.2239 23 30 22.7761 30 22.5C30 22.2239 30.2239 22 30.5 22H37.0012Z" fill="var(--color-text-lighter)" fillOpacity="0.5"/>
96
- <path d="M35.4584 19C35.5658 19.3416 35.6911 19.6753 35.8331 20H30.5C30.2239 20 30 19.7761 30 19.5C30 19.2239 30.2239 19 30.5 19H35.4584Z" fill="var(--color-text-lighter)" fillOpacity="0.5"/>
97
- <path d="M35 16H30.5C30.2239 16 30 16.2239 30 16.5C30 16.7761 30.2239 17 30.5 17H35.0495C35.0167 16.6711 35 16.3375 35 16Z" fill="var(--color-text-lighter)" fillOpacity="0.5"/>
98
- <path d="M35.4584 13C35.3558 13.3265 35.2694 13.6601 35.2003 14H30.5C30.2239 14 30 13.7761 30 13.5C30 13.2239 30.2239 13 30.5 13H35.4584Z" fill="var(--color-text-lighter)" fillOpacity="0.5"/>
99
- <path d="M18 13.5C18 13.2239 18.2239 13 18.5 13H27.5C27.7761 13 28 13.2239 28 13.5C28 13.7761 27.7761 14 27.5 14H18.5C18.2239 14 18 13.7761 18 13.5Z" fill="var(--color-text-lighter)" fillOpacity="0.5"/>
100
- <path d="M18 16.5C18 16.2239 18.2239 16 18.5 16H27.5C27.7761 16 28 16.2239 28 16.5C28 16.7761 27.7761 17 27.5 17H18.5C18.2239 17 18 16.7761 18 16.5Z" fill="var(--color-text-lighter)" fillOpacity="0.5"/>
101
- <path d="M18.5 19C18.2239 19 18 19.2239 18 19.5C18 19.7761 18.2239 20 18.5 20H27.5C27.7761 20 28 19.7761 28 19.5C28 19.2239 27.7761 19 27.5 19H18.5Z" fill="var(--color-text-lighter)" fillOpacity="0.5"/>
102
- <path d="M18 22.5C18 22.2239 18.2239 22 18.5 22H27.5C27.7761 22 28 22.2239 28 22.5C28 22.7761 27.7761 23 27.5 23H18.5C18.2239 23 18 22.7761 18 22.5Z" fill="var(--color-text-lighter)" fillOpacity="0.5"/>
103
- <path d="M18.5 25C18.2239 25 18 25.2239 18 25.5C18 25.7761 18.2239 26 18.5 26H27.5C27.7761 26 28 25.7761 28 25.5C28 25.2239 27.7761 25 27.5 25H18.5Z" fill="var(--color-text-lighter)" fillOpacity="0.5"/>
104
- <path d="M30.5 25C30.2239 25 30 25.2239 30 25.5C30 25.7761 30.2239 26 30.5 26H39.5C39.7761 26 40 25.7761 40 25.5C40 25.2239 39.7761 25 39.5 25H30.5Z" fill="var(--color-text-lighter)" fillOpacity="0.5"/>
105
- <path fillRule="evenodd" clipRule="evenodd" d="M19 5C18.4477 5 18 5.44772 18 6V9C18 9.55228 18.4477 10 19 10H37.0012C37.8097 8.92425 38.83 8.01663 40 7.33929V6C40 5.44772 39.5523 5 39 5H19Z" fill="var(--color-text-lighter)" fillOpacity="0.8"/>
274
+ <path
275
+ d="M37.0012 22C37.2658 22.3521 37.5531 22.6861 37.8609 23H30.5C30.2239 23 30 22.7761 30 22.5C30 22.2239 30.2239 22 30.5 22H37.0012Z"
276
+ fill="var(--color-text-lighter)"
277
+ fillOpacity="0.5"
278
+ />
279
+ <path
280
+ d="M35.4584 19C35.5658 19.3416 35.6911 19.6753 35.8331 20H30.5C30.2239 20 30 19.7761 30 19.5C30 19.2239 30.2239 19 30.5 19H35.4584Z"
281
+ fill="var(--color-text-lighter)"
282
+ fillOpacity="0.5"
283
+ />
284
+ <path
285
+ d="M35 16H30.5C30.2239 16 30 16.2239 30 16.5C30 16.7761 30.2239 17 30.5 17H35.0495C35.0167 16.6711 35 16.3375 35 16Z"
286
+ fill="var(--color-text-lighter)"
287
+ fillOpacity="0.5"
288
+ />
289
+ <path
290
+ d="M35.4584 13C35.3558 13.3265 35.2694 13.6601 35.2003 14H30.5C30.2239 14 30 13.7761 30 13.5C30 13.2239 30.2239 13 30.5 13H35.4584Z"
291
+ fill="var(--color-text-lighter)"
292
+ fillOpacity="0.5"
293
+ />
294
+ <path
295
+ d="M18 13.5C18 13.2239 18.2239 13 18.5 13H27.5C27.7761 13 28 13.2239 28 13.5C28 13.7761 27.7761 14 27.5 14H18.5C18.2239 14 18 13.7761 18 13.5Z"
296
+ fill="var(--color-text-lighter)"
297
+ fillOpacity="0.5"
298
+ />
299
+ <path
300
+ d="M18 16.5C18 16.2239 18.2239 16 18.5 16H27.5C27.7761 16 28 16.2239 28 16.5C28 16.7761 27.7761 17 27.5 17H18.5C18.2239 17 18 16.7761 18 16.5Z"
301
+ fill="var(--color-text-lighter)"
302
+ fillOpacity="0.5"
303
+ />
304
+ <path
305
+ d="M18.5 19C18.2239 19 18 19.2239 18 19.5C18 19.7761 18.2239 20 18.5 20H27.5C27.7761 20 28 19.7761 28 19.5C28 19.2239 27.7761 19 27.5 19H18.5Z"
306
+ fill="var(--color-text-lighter)"
307
+ fillOpacity="0.5"
308
+ />
309
+ <path
310
+ d="M18 22.5C18 22.2239 18.2239 22 18.5 22H27.5C27.7761 22 28 22.2239 28 22.5C28 22.7761 27.7761 23 27.5 23H18.5C18.2239 23 18 22.7761 18 22.5Z"
311
+ fill="var(--color-text-lighter)"
312
+ fillOpacity="0.5"
313
+ />
314
+ <path
315
+ d="M18.5 25C18.2239 25 18 25.2239 18 25.5C18 25.7761 18.2239 26 18.5 26H27.5C27.7761 26 28 25.7761 28 25.5C28 25.2239 27.7761 25 27.5 25H18.5Z"
316
+ fill="var(--color-text-lighter)"
317
+ fillOpacity="0.5"
318
+ />
319
+ <path
320
+ d="M30.5 25C30.2239 25 30 25.2239 30 25.5C30 25.7761 30.2239 26 30.5 26H39.5C39.7761 26 40 25.7761 40 25.5C40 25.2239 39.7761 25 39.5 25H30.5Z"
321
+ fill="var(--color-text-lighter)"
322
+ fillOpacity="0.5"
323
+ />
324
+ <path
325
+ fillRule="evenodd"
326
+ clipRule="evenodd"
327
+ d="M19 5C18.4477 5 18 5.44772 18 6V9C18 9.55228 18.4477 10 19 10H37.0012C37.8097 8.92425 38.83 8.01663 40 7.33929V6C40 5.44772 39.5523 5 39 5H19Z"
328
+ fill="var(--color-text-lighter)"
329
+ fillOpacity="0.8"
330
+ />
106
331
  </g>
107
- <path fillRule="evenodd" clipRule="evenodd" d="M14 2H44V6.04946C44.3289 6.01675 44.6625 6 45 6C45.3375 6 45.6711 6.01675 46 6.04946V2C46 0.895431 45.1046 0 44 0H14C12.8954 0 12 0.895431 12 2V30C12 31.1046 12.8954 32 14 32H44C45.1046 32 46 31.1046 46 30V25.9505C45.6711 25.9833 45.3375 26 45 26C44.6625 26 44.3289 25.9833 44 25.9505V30H14L14 2Z" fill="var(--color-text-light)" fillOpacity="0.8"/>
108
- <circle cx="45" cy="16" r="7" fill="var(--color-bg-00)"/>
109
- <path fillRule="evenodd" clipRule="evenodd" d="M53 16C53 11.5848 49.4152 8 45 8C40.5848 8 37 11.5848 37 16C37 20.4152 40.5848 24 45 24C46.9918 24 48.8147 23.2704 50.2156 22.0642L52.7246 24.5732C52.5137 25.1115 52.6257 25.7471 53.0607 26.182L56.5962 29.7175C57.182 30.3033 58.1317 30.3033 58.7175 29.7175C59.3033 29.1317 59.3033 28.182 58.7175 27.5962L55.182 24.0607C54.747 23.6257 54.1114 23.5137 53.5732 23.7247L51.0641 21.2156C52.2704 19.8147 53 17.9919 53 16ZM51 16C51 12.6894 48.3106 10 45 10C41.6894 10 39 12.6894 39 16C39 19.3106 41.6894 22 45 22C48.3106 22 51 19.3106 51 16Z" fill="var(--sd-colour-primary--active)"/>
110
- <path fillRule="evenodd" clipRule="evenodd" d="M48.7046 13.2955C49.0937 13.6846 49.0937 14.3155 48.7046 14.7046L44.7046 18.7046C44.3155 19.0938 43.6846 19.0938 43.2954 18.7046L41.2954 16.7046C40.9063 16.3155 40.9063 15.6846 41.2954 15.2955C41.6846 14.9064 42.3155 14.9064 42.7046 15.2955L44 16.5909L47.2954 13.2955C47.6846 12.9064 48.3155 12.9064 48.7046 13.2955Z" fill="var(--sd-colour-primary--hover)"/>
111
- <path d="M53.75 9L55.0033 6.25333L57.75 5L55.0033 3.74667L53.75 1L52.4967 3.74667L49.75 5L52.4967 6.25333L53.75 9Z" fill="var(--sd-colour-primary--active)" fillOpacity="0.4"/>
112
- <path d="M3.75 13L5.00333 10.2533L7.75 9L5.00333 7.74667L3.75 5L2.49667 7.74667L-0.25 9L2.49667 10.2533L3.75 13Z" fill="var(--sd-colour-primary--active)" fillOpacity="0.4"/>
113
- <path d="M55.75 16L56.3767 14.6267L57.75 14L56.3767 13.3733L55.75 12L55.1233 13.3733L53.75 14L55.1233 14.6267L55.75 16Z" fill="var(--sd-colour-primary--active)" fillOpacity="0.32"/>
114
- <path d="M8.5 29L9.12667 27.6267L10.5 27L9.12667 26.3733L8.5 25L7.87333 26.3733L6.5 27L7.87333 27.6267L8.5 29Z" fill="var(--sd-colour-primary--active)" fillOpacity="0.32"/>
115
- <path d="M60.75 18L61.3767 16.6267L62.75 16L61.3767 15.3733L60.75 14L60.1233 15.3733L58.75 16L60.1233 16.6267L60.75 18Z" fill="var(--sd-colour-primary--active)" fillOpacity="0.32"/>
116
- <path d="M7.75 5L8.37667 3.62667L9.75 3L8.37667 2.37333L7.75 1L7.12333 2.37333L5.75 3L7.12333 3.62667L7.75 5Z" fill="var(--sd-colour-primary--active)" fillOpacity="0.32"/>
117
- <path d="M50.75 32L51.3767 30.6267L52.75 30L51.3767 29.3733L50.75 28L50.1233 29.3733L48.75 30L50.1233 30.6267L50.75 32Z" fill="var(--sd-colour-primary--active)" fillOpacity="0.32"/>
118
- <path d="M58.75 25L59.69 22.94L61.75 22L59.69 21.06L58.75 19L57.81 21.06L55.75 22L57.81 22.94L58.75 25Z" fill="var(--sd-colour-primary--active)" fillOpacity="0.4"/>
119
- <path d="M6.75 21L7.69 18.94L9.75 18L7.69 17.06L6.75 15L5.81 17.06L3.75 18L5.81 18.94L6.75 21Z" fill="var(--sd-colour-primary--active)" fillOpacity="0.4"/>
332
+ <path
333
+ fillRule="evenodd"
334
+ clipRule="evenodd"
335
+ d="M14 2H44V6.04946C44.3289 6.01675 44.6625 6 45 6C45.3375 6 45.6711 6.01675 46 6.04946V2C46 0.895431 45.1046 0 44 0H14C12.8954 0 12 0.895431 12 2V30C12 31.1046 12.8954 32 14 32H44C45.1046 32 46 31.1046 46 30V25.9505C45.6711 25.9833 45.3375 26 45 26C44.6625 26 44.3289 25.9833 44 25.9505V30H14L14 2Z"
336
+ fill="var(--color-text-light)"
337
+ fillOpacity="0.8"
338
+ />
339
+ <circle cx="45" cy="16" r="7" fill="var(--color-bg-00)" />
340
+ <path
341
+ fillRule="evenodd"
342
+ clipRule="evenodd"
343
+ d="M53 16C53 11.5848 49.4152 8 45 8C40.5848 8 37 11.5848 37 16C37 20.4152 40.5848 24 45 24C46.9918 24 48.8147 23.2704 50.2156 22.0642L52.7246 24.5732C52.5137 25.1115 52.6257 25.7471 53.0607 26.182L56.5962 29.7175C57.182 30.3033 58.1317 30.3033 58.7175 29.7175C59.3033 29.1317 59.3033 28.182 58.7175 27.5962L55.182 24.0607C54.747 23.6257 54.1114 23.5137 53.5732 23.7247L51.0641 21.2156C52.2704 19.8147 53 17.9919 53 16ZM51 16C51 12.6894 48.3106 10 45 10C41.6894 10 39 12.6894 39 16C39 19.3106 41.6894 22 45 22C48.3106 22 51 19.3106 51 16Z"
344
+ fill="var(--sd-colour-primary--active)"
345
+ />
346
+ <path
347
+ fillRule="evenodd"
348
+ clipRule="evenodd"
349
+ d="M48.7046 13.2955C49.0937 13.6846 49.0937 14.3155 48.7046 14.7046L44.7046 18.7046C44.3155 19.0938 43.6846 19.0938 43.2954 18.7046L41.2954 16.7046C40.9063 16.3155 40.9063 15.6846 41.2954 15.2955C41.6846 14.9064 42.3155 14.9064 42.7046 15.2955L44 16.5909L47.2954 13.2955C47.6846 12.9064 48.3155 12.9064 48.7046 13.2955Z"
350
+ fill="var(--sd-colour-primary--hover)"
351
+ />
352
+ <path
353
+ d="M53.75 9L55.0033 6.25333L57.75 5L55.0033 3.74667L53.75 1L52.4967 3.74667L49.75 5L52.4967 6.25333L53.75 9Z"
354
+ fill="var(--sd-colour-primary--active)"
355
+ fillOpacity="0.4"
356
+ />
357
+ <path
358
+ d="M3.75 13L5.00333 10.2533L7.75 9L5.00333 7.74667L3.75 5L2.49667 7.74667L-0.25 9L2.49667 10.2533L3.75 13Z"
359
+ fill="var(--sd-colour-primary--active)"
360
+ fillOpacity="0.4"
361
+ />
362
+ <path
363
+ d="M55.75 16L56.3767 14.6267L57.75 14L56.3767 13.3733L55.75 12L55.1233 13.3733L53.75 14L55.1233 14.6267L55.75 16Z"
364
+ fill="var(--sd-colour-primary--active)"
365
+ fillOpacity="0.32"
366
+ />
367
+ <path
368
+ d="M8.5 29L9.12667 27.6267L10.5 27L9.12667 26.3733L8.5 25L7.87333 26.3733L6.5 27L7.87333 27.6267L8.5 29Z"
369
+ fill="var(--sd-colour-primary--active)"
370
+ fillOpacity="0.32"
371
+ />
372
+ <path
373
+ d="M60.75 18L61.3767 16.6267L62.75 16L61.3767 15.3733L60.75 14L60.1233 15.3733L58.75 16L60.1233 16.6267L60.75 18Z"
374
+ fill="var(--sd-colour-primary--active)"
375
+ fillOpacity="0.32"
376
+ />
377
+ <path
378
+ d="M7.75 5L8.37667 3.62667L9.75 3L8.37667 2.37333L7.75 1L7.12333 2.37333L5.75 3L7.12333 3.62667L7.75 5Z"
379
+ fill="var(--sd-colour-primary--active)"
380
+ fillOpacity="0.32"
381
+ />
382
+ <path
383
+ d="M50.75 32L51.3767 30.6267L52.75 30L51.3767 29.3733L50.75 28L50.1233 29.3733L48.75 30L50.1233 30.6267L50.75 32Z"
384
+ fill="var(--sd-colour-primary--active)"
385
+ fillOpacity="0.32"
386
+ />
387
+ <path
388
+ d="M58.75 25L59.69 22.94L61.75 22L59.69 21.06L58.75 19L57.81 21.06L55.75 22L57.81 22.94L58.75 25Z"
389
+ fill="var(--sd-colour-primary--active)"
390
+ fillOpacity="0.4"
391
+ />
392
+ <path
393
+ d="M6.75 21L7.69 18.94L9.75 18L7.69 17.06L6.75 15L5.81 17.06L3.75 18L5.81 18.94L6.75 21Z"
394
+ fill="var(--sd-colour-primary--active)"
395
+ fillOpacity="0.4"
396
+ />
120
397
  </g>
121
398
  <defs>
122
399
  <clipPath id="clip0_1814_54107">
123
- <rect width="64" height="32" fill="white"/>
400
+ <rect width="64" height="32" fill="white" />
124
401
  </clipPath>
125
402
  <clipPath id="clip1_1814_54107">
126
- <rect width="22" height="21" fill="white" transform="translate(18 5)"/>
403
+ <rect width="22" height="21" fill="white" transform="translate(18 5)" />
127
404
  </clipPath>
128
405
  </defs>
129
406
  </svg>
@@ -133,27 +410,79 @@ export class SvgIconIllustration extends React.PureComponent<IProps> {
133
410
  <svg width="64" height="32" viewBox="0 0 64 32" fill="none" xmlns="http://www.w3.org/2000/svg">
134
411
  <g clipPath="url(#clip0_1814_54105)">
135
412
  <g clipPath="url(#clip1_1814_54105)">
136
- <path fillRule="evenodd" clipRule="evenodd" d="M41 6.34267V6C41 5.44772 40.5523 5 40 5H20C19.4477 5 19 5.44772 19 6V9C19 9.55228 19.4477 10 20 10H39.223C39.5322 8.63763 40.1504 7.39265 41 6.34267Z" fill="var(--color-text-lighter)" fillOpacity="0.8"/>
137
- <path fillRule="evenodd" clipRule="evenodd" d="M31.5 13H39.0549C39.0924 13.3394 39.1488 13.6731 39.223 14H31.5C31.2239 14 31 13.7761 31 13.5C31 13.2239 31.2239 13 31.5 13ZM31.5 16H39.9355C40.1077 16.3465 40.3016 16.6804 40.5154 16.9998L40.5 17H31.5C31.2239 17 31 16.7761 31 16.5C31 16.2239 31.2239 16 31.5 16ZM19.5 13C19.2239 13 19 13.2239 19 13.5C19 13.7761 19.2239 14 19.5 14H28.5C28.7761 14 29 13.7761 29 13.5C29 13.2239 28.7761 13 28.5 13H19.5ZM20.9291 20C20.8802 19.6581 20.8066 19.3241 20.7101 19H28.5C28.7761 19 29 19.2239 29 19.5C29 19.7761 28.7761 20 28.5 20H20.9291ZM20.7101 23C20.8066 22.6759 20.8802 22.3419 20.9291 22H28.5C28.7761 22 29 22.2239 29 22.5C29 22.7761 28.7761 23 28.5 23H20.7101ZM19.0978 16.2029C19.1889 16.0798 19.3351 16 19.5 16H28.5C28.7761 16 29 16.2239 29 16.5C29 16.7761 28.7761 17 28.5 17H19.7453C19.5489 16.7185 19.3324 16.4521 19.0978 16.2029ZM19.0978 25.7971C19.3324 25.5479 19.5489 25.2815 19.7453 25H28.5C28.7761 25 29 25.2239 29 25.5C29 25.7761 28.7761 26 28.5 26H19.5C19.3351 26 19.1889 25.9202 19.0978 25.7971ZM31 19.5C31 19.2239 31.2239 19 31.5 19H40.5C40.7761 19 41 19.2239 41 19.5C41 19.7761 40.7761 20 40.5 20H31.5C31.2239 20 31 19.7761 31 19.5ZM31.5 22C31.2239 22 31 22.2239 31 22.5C31 22.7761 31.2239 23 31.5 23H40.5C40.7761 23 41 22.7761 41 22.5C41 22.2239 40.7761 22 40.5 22H31.5ZM31 25.5C31 25.2239 31.2239 25 31.5 25H40.5C40.7761 25 41 25.2239 41 25.5C41 25.7761 40.7761 26 40.5 26H31.5C31.2239 26 31 25.7761 31 25.5Z" fill="var(--color-text-lighter)" fillOpacity="0.5"/>
413
+ <path
414
+ fillRule="evenodd"
415
+ clipRule="evenodd"
416
+ d="M41 6.34267V6C41 5.44772 40.5523 5 40 5H20C19.4477 5 19 5.44772 19 6V9C19 9.55228 19.4477 10 20 10H39.223C39.5322 8.63763 40.1504 7.39265 41 6.34267Z"
417
+ fill="var(--color-text-lighter)"
418
+ fillOpacity="0.8"
419
+ />
420
+ <path
421
+ fillRule="evenodd"
422
+ clipRule="evenodd"
423
+ d="M31.5 13H39.0549C39.0924 13.3394 39.1488 13.6731 39.223 14H31.5C31.2239 14 31 13.7761 31 13.5C31 13.2239 31.2239 13 31.5 13ZM31.5 16H39.9355C40.1077 16.3465 40.3016 16.6804 40.5154 16.9998L40.5 17H31.5C31.2239 17 31 16.7761 31 16.5C31 16.2239 31.2239 16 31.5 16ZM19.5 13C19.2239 13 19 13.2239 19 13.5C19 13.7761 19.2239 14 19.5 14H28.5C28.7761 14 29 13.7761 29 13.5C29 13.2239 28.7761 13 28.5 13H19.5ZM20.9291 20C20.8802 19.6581 20.8066 19.3241 20.7101 19H28.5C28.7761 19 29 19.2239 29 19.5C29 19.7761 28.7761 20 28.5 20H20.9291ZM20.7101 23C20.8066 22.6759 20.8802 22.3419 20.9291 22H28.5C28.7761 22 29 22.2239 29 22.5C29 22.7761 28.7761 23 28.5 23H20.7101ZM19.0978 16.2029C19.1889 16.0798 19.3351 16 19.5 16H28.5C28.7761 16 29 16.2239 29 16.5C29 16.7761 28.7761 17 28.5 17H19.7453C19.5489 16.7185 19.3324 16.4521 19.0978 16.2029ZM19.0978 25.7971C19.3324 25.5479 19.5489 25.2815 19.7453 25H28.5C28.7761 25 29 25.2239 29 25.5C29 25.7761 28.7761 26 28.5 26H19.5C19.3351 26 19.1889 25.9202 19.0978 25.7971ZM31 19.5C31 19.2239 31.2239 19 31.5 19H40.5C40.7761 19 41 19.2239 41 19.5C41 19.7761 40.7761 20 40.5 20H31.5C31.2239 20 31 19.7761 31 19.5ZM31.5 22C31.2239 22 31 22.2239 31 22.5C31 22.7761 31.2239 23 31.5 23H40.5C40.7761 23 41 22.7761 41 22.5C41 22.2239 40.7761 22 40.5 22H31.5ZM31 25.5C31 25.2239 31.2239 25 31.5 25H40.5C40.7761 25 41 25.2239 41 25.5C41 25.7761 40.7761 26 40.5 26H31.5C31.2239 26 31 25.7761 31 25.5Z"
424
+ fill="var(--color-text-lighter)"
425
+ fillOpacity="0.5"
426
+ />
138
427
  </g>
139
- <path fillRule="evenodd" clipRule="evenodd" d="M45 2H15V14.0709C14.6734 14.0242 14.3395 14 14 14C13.6605 14 13.3266 14.0242 13 14.0709V2C13 0.895431 13.8954 0 15 0H45C46.1046 0 47 0.895431 47 2V3.05493C46.3065 3.13159 45.6368 3.28703 45 3.51212V2ZM45 20.4879V30H15V27.9291C14.6734 27.9758 14.3395 28 14 28C13.6605 28 13.3266 27.9758 13 27.9291V30C13 31.1046 13.8954 32 15 32H45C46.1046 32 47 31.1046 47 30V20.9451C46.3065 20.8684 45.6368 20.713 45 20.4879Z" fill="var(--color-text-light)" fillOpacity="0.8"/>
140
- <circle cx="48" cy="12" r="7" fill="var(--sd-colour-primary--active)"/>
141
- <path fillRule="evenodd" clipRule="evenodd" d="M51.2043 9.67574C51.4386 9.91005 51.4386 10.2899 51.2043 10.5243L47.3614 14.3671C47.1271 14.6014 46.7472 14.6014 46.5129 14.3671L44.9757 12.83C44.7414 12.5957 44.7414 12.2158 44.9757 11.9814C45.21 11.7471 45.5899 11.7471 45.8243 11.9814L46.9371 13.0943L50.3557 9.67574C50.59 9.44142 50.9699 9.44142 51.2043 9.67574Z" fill="white"/>
142
- <circle cx="14" cy="21" r="5" fill="var(--sd-colour-primary--active)"/>
143
- <path fillRule="evenodd" clipRule="evenodd" d="M16.1743 19.3256C16.4086 19.56 16.4086 19.9399 16.1743 20.1742L13.6743 22.6742C13.4399 22.9085 13.06 22.9085 12.8257 22.6742L11.8257 21.6742C11.5914 21.4399 11.5914 21.06 11.8257 20.8256C12.06 20.5913 12.4399 20.5913 12.6743 20.8256L13.25 21.4014L15.3257 19.3256C15.56 19.0913 15.9399 19.0913 16.1743 19.3256Z" fill="white"/>
144
- <path d="M55.25 27L56.5033 24.2533L59.25 23L56.5033 21.7467L55.25 19L53.9967 21.7467L51.25 23L53.9967 24.2533L55.25 27Z" fill="var(--sd-colour-primary--active)" fillOpacity="0.4"/>
145
- <path d="M57.5 6L58.1267 4.62667L59.5 4L58.1267 3.37333L57.5 2L56.8733 3.37333L55.5 4L56.8733 4.62667L57.5 6Z" fill="var(--sd-colour-primary--active)" fillOpacity="0.32"/>
146
- <path d="M60.25 16L61.19 13.94L63.25 13L61.19 12.06L60.25 10L59.31 12.06L57.25 13L59.31 13.94L60.25 16Z" fill="var(--sd-colour-primary--active)" fillOpacity="0.32"/>
147
- <path d="M3 14L3.94 11.94L6 11L3.94 10.06L3 8L2.06 10.06L0 11L2.06 11.94L3 14Z" fill="var(--sd-colour-primary--active)" fillOpacity="0.32"/>
148
- <path d="M8 8L9.25333 5.25333L12 4L9.25333 2.74667L8 0L6.74667 2.74667L4 4L6.74667 5.25333L8 8Z" fill="var(--sd-colour-primary--active)" fillOpacity="0.4"/>
149
- <path d="M8 16L8.62667 14.6267L10 14L8.62667 13.3733L8 12L7.37333 13.3733L6 14L7.37333 14.6267L8 16Z" fill="var(--sd-colour-primary--active)" fillOpacity="0.32"/>
428
+ <path
429
+ fillRule="evenodd"
430
+ clipRule="evenodd"
431
+ d="M45 2H15V14.0709C14.6734 14.0242 14.3395 14 14 14C13.6605 14 13.3266 14.0242 13 14.0709V2C13 0.895431 13.8954 0 15 0H45C46.1046 0 47 0.895431 47 2V3.05493C46.3065 3.13159 45.6368 3.28703 45 3.51212V2ZM45 20.4879V30H15V27.9291C14.6734 27.9758 14.3395 28 14 28C13.6605 28 13.3266 27.9758 13 27.9291V30C13 31.1046 13.8954 32 15 32H45C46.1046 32 47 31.1046 47 30V20.9451C46.3065 20.8684 45.6368 20.713 45 20.4879Z"
432
+ fill="var(--color-text-light)"
433
+ fillOpacity="0.8"
434
+ />
435
+ <circle cx="48" cy="12" r="7" fill="var(--sd-colour-primary--active)" />
436
+ <path
437
+ fillRule="evenodd"
438
+ clipRule="evenodd"
439
+ d="M51.2043 9.67574C51.4386 9.91005 51.4386 10.2899 51.2043 10.5243L47.3614 14.3671C47.1271 14.6014 46.7472 14.6014 46.5129 14.3671L44.9757 12.83C44.7414 12.5957 44.7414 12.2158 44.9757 11.9814C45.21 11.7471 45.5899 11.7471 45.8243 11.9814L46.9371 13.0943L50.3557 9.67574C50.59 9.44142 50.9699 9.44142 51.2043 9.67574Z"
440
+ fill="white"
441
+ />
442
+ <circle cx="14" cy="21" r="5" fill="var(--sd-colour-primary--active)" />
443
+ <path
444
+ fillRule="evenodd"
445
+ clipRule="evenodd"
446
+ d="M16.1743 19.3256C16.4086 19.56 16.4086 19.9399 16.1743 20.1742L13.6743 22.6742C13.4399 22.9085 13.06 22.9085 12.8257 22.6742L11.8257 21.6742C11.5914 21.4399 11.5914 21.06 11.8257 20.8256C12.06 20.5913 12.4399 20.5913 12.6743 20.8256L13.25 21.4014L15.3257 19.3256C15.56 19.0913 15.9399 19.0913 16.1743 19.3256Z"
447
+ fill="white"
448
+ />
449
+ <path
450
+ d="M55.25 27L56.5033 24.2533L59.25 23L56.5033 21.7467L55.25 19L53.9967 21.7467L51.25 23L53.9967 24.2533L55.25 27Z"
451
+ fill="var(--sd-colour-primary--active)"
452
+ fillOpacity="0.4"
453
+ />
454
+ <path
455
+ d="M57.5 6L58.1267 4.62667L59.5 4L58.1267 3.37333L57.5 2L56.8733 3.37333L55.5 4L56.8733 4.62667L57.5 6Z"
456
+ fill="var(--sd-colour-primary--active)"
457
+ fillOpacity="0.32"
458
+ />
459
+ <path
460
+ d="M60.25 16L61.19 13.94L63.25 13L61.19 12.06L60.25 10L59.31 12.06L57.25 13L59.31 13.94L60.25 16Z"
461
+ fill="var(--sd-colour-primary--active)"
462
+ fillOpacity="0.32"
463
+ />
464
+ <path
465
+ d="M3 14L3.94 11.94L6 11L3.94 10.06L3 8L2.06 10.06L0 11L2.06 11.94L3 14Z"
466
+ fill="var(--sd-colour-primary--active)"
467
+ fillOpacity="0.32"
468
+ />
469
+ <path
470
+ d="M8 8L9.25333 5.25333L12 4L9.25333 2.74667L8 0L6.74667 2.74667L4 4L6.74667 5.25333L8 8Z"
471
+ fill="var(--sd-colour-primary--active)"
472
+ fillOpacity="0.4"
473
+ />
474
+ <path
475
+ d="M8 16L8.62667 14.6267L10 14L8.62667 13.3733L8 12L7.37333 13.3733L6 14L7.37333 14.6267L8 16Z"
476
+ fill="var(--sd-colour-primary--active)"
477
+ fillOpacity="0.32"
478
+ />
150
479
  </g>
151
480
  <defs>
152
481
  <clipPath id="clip0_1814_54105">
153
- <rect width="64" height="32" fill="white"/>
482
+ <rect width="64" height="32" fill="white" />
154
483
  </clipPath>
155
484
  <clipPath id="clip1_1814_54105">
156
- <rect width="22" height="21" fill="white" transform="translate(19 5)"/>
485
+ <rect width="22" height="21" fill="white" transform="translate(19 5)" />
157
486
  </clipPath>
158
487
  </defs>
159
488
  </svg>
@@ -161,16 +490,59 @@ export class SvgIconIllustration extends React.PureComponent<IProps> {
161
490
  case 'translate':
162
491
  return (
163
492
  <svg width="64" height="32" viewBox="0 0 64 32" fill="none" xmlns="http://www.w3.org/2000/svg">
164
- <path fillRule="evenodd" clipRule="evenodd" d="M28 20V25C28 26.1046 28.8954 27 30 27H45L50 32V11C50 9.89543 49.1046 9 48 9H34V11L48 11V27.1716L45.8284 25H30L30 20H28Z" fill="var(--color-text-light)" fillOpacity="0.8"/>
165
- <path fillRule="evenodd" clipRule="evenodd" d="M39 13.3C39.2943 13.3 39.5573 13.4842 39.6578 13.7608L41.654 19.2504L42.6499 21.7401C42.7935 22.099 42.6189 22.5064 42.26 22.65C41.901 22.7936 41.4936 22.619 41.3501 22.26L40.5261 20.2H37.4739L36.6499 22.26C36.5063 22.619 36.099 22.7936 35.74 22.65C35.3811 22.5064 35.2065 22.099 35.3501 21.7401L36.3459 19.2504L38.3421 13.7608C38.4427 13.4842 38.7056 13.3 39 13.3ZM37.9994 18.8H40.0006L39 16.0484L37.9994 18.8Z" fill="var(--color-text-light)"/>
166
- <path d="M49 8L50.2533 5.25333L53 4L50.2533 2.74667L49 0L47.7467 2.74667L45 4L47.7467 5.25333L49 8Z" fill="var(--sd-colour-primary--active)" fillOpacity="0.4"/>
167
- <path d="M59 5L59.6267 3.62667L61 3L59.6267 2.37333L59 1L58.3733 2.37333L57 3L58.3733 3.62667L59 5Z" fill="var(--sd-colour-primary--active)" fillOpacity="0.32"/>
168
- <path d="M10 2C10 0.89543 10.8954 0 12 0H30C31.1046 0 32 0.895431 32 2V16C32 17.1046 31.1046 18 30 18H15L10 23V2Z" fill="var(--sd-colour-primary--active)"/>
169
- <path fillRule="evenodd" clipRule="evenodd" d="M19.505 3.00507C19.7784 2.73171 20.2216 2.73171 20.495 3.00507L21.495 4.00507C21.7683 4.27844 21.7683 4.72166 21.495 4.99502C21.2216 5.26839 20.7784 5.26839 20.505 4.99502L19.505 3.99502C19.2316 3.72166 19.2316 3.27844 19.505 3.00507ZM16.3 6.50005C16.3 6.11345 16.6134 5.80005 17 5.80005H25C25.3866 5.80005 25.7 6.11345 25.7 6.50005C25.7 6.88665 25.3866 7.20005 25 7.20005H24.1474C23.9415 8.57972 23.1504 9.87026 22.1242 10.8808C23.055 11.4606 24.0746 11.8 25 11.8C25.3866 11.8 25.7 12.1134 25.7 12.5C25.7 12.8866 25.3866 13.2 25 13.2C23.6228 13.2 22.2014 12.6549 21 11.8152C19.7985 12.6549 18.3772 13.2 17 13.2C16.6134 13.2 16.3 12.8866 16.3 12.5C16.3 12.1134 16.6134 11.8 17 11.8C17.9254 11.8 18.945 11.4606 19.8757 10.8808C18.8495 9.87026 18.0584 8.57972 17.8526 7.20005H17C16.6134 7.20005 16.3 6.88665 16.3 6.50005ZM19.2749 7.20005C19.4819 8.1869 20.1062 9.18668 21 10.0193C21.8937 9.18668 22.5181 8.1869 22.7251 7.20005H19.2749Z" fill="white"/>
170
- <path d="M19 28L20.2533 25.2533L23 24L20.2533 22.7467L19 20L17.7467 22.7467L15 24L17.7467 25.2533L19 28Z" fill="var(--sd-colour-primary--active)" fillOpacity="0.4"/>
171
- <path d="M7 31L7.94 28.94L10 28L7.94 27.06L7 25L6.06 27.06L4 28L6.06 28.94L7 31Z" fill="var(--sd-colour-primary--active)" fillOpacity="0.32"/>
172
- <path d="M25 31L25.6267 29.6267L27 29L25.6267 28.3733L25 27L24.3733 28.3733L23 29L24.3733 29.6267L25 31Z" fill="var(--sd-colour-primary--active)" fillOpacity="0.32"/>
173
- <path d="M54 16L54.94 13.94L57 13L54.94 12.06L54 10L53.06 12.06L51 13L53.06 13.94L54 16Z" fill="var(--sd-colour-primary--active)" fillOpacity="0.32"/>
493
+ <path
494
+ fillRule="evenodd"
495
+ clipRule="evenodd"
496
+ d="M28 20V25C28 26.1046 28.8954 27 30 27H45L50 32V11C50 9.89543 49.1046 9 48 9H34V11L48 11V27.1716L45.8284 25H30L30 20H28Z"
497
+ fill="var(--color-text-light)"
498
+ fillOpacity="0.8"
499
+ />
500
+ <path
501
+ fillRule="evenodd"
502
+ clipRule="evenodd"
503
+ d="M39 13.3C39.2943 13.3 39.5573 13.4842 39.6578 13.7608L41.654 19.2504L42.6499 21.7401C42.7935 22.099 42.6189 22.5064 42.26 22.65C41.901 22.7936 41.4936 22.619 41.3501 22.26L40.5261 20.2H37.4739L36.6499 22.26C36.5063 22.619 36.099 22.7936 35.74 22.65C35.3811 22.5064 35.2065 22.099 35.3501 21.7401L36.3459 19.2504L38.3421 13.7608C38.4427 13.4842 38.7056 13.3 39 13.3ZM37.9994 18.8H40.0006L39 16.0484L37.9994 18.8Z"
504
+ fill="var(--color-text-light)"
505
+ />
506
+ <path
507
+ d="M49 8L50.2533 5.25333L53 4L50.2533 2.74667L49 0L47.7467 2.74667L45 4L47.7467 5.25333L49 8Z"
508
+ fill="var(--sd-colour-primary--active)"
509
+ fillOpacity="0.4"
510
+ />
511
+ <path
512
+ d="M59 5L59.6267 3.62667L61 3L59.6267 2.37333L59 1L58.3733 2.37333L57 3L58.3733 3.62667L59 5Z"
513
+ fill="var(--sd-colour-primary--active)"
514
+ fillOpacity="0.32"
515
+ />
516
+ <path
517
+ d="M10 2C10 0.89543 10.8954 0 12 0H30C31.1046 0 32 0.895431 32 2V16C32 17.1046 31.1046 18 30 18H15L10 23V2Z"
518
+ fill="var(--sd-colour-primary--active)"
519
+ />
520
+ <path
521
+ fillRule="evenodd"
522
+ clipRule="evenodd"
523
+ d="M19.505 3.00507C19.7784 2.73171 20.2216 2.73171 20.495 3.00507L21.495 4.00507C21.7683 4.27844 21.7683 4.72166 21.495 4.99502C21.2216 5.26839 20.7784 5.26839 20.505 4.99502L19.505 3.99502C19.2316 3.72166 19.2316 3.27844 19.505 3.00507ZM16.3 6.50005C16.3 6.11345 16.6134 5.80005 17 5.80005H25C25.3866 5.80005 25.7 6.11345 25.7 6.50005C25.7 6.88665 25.3866 7.20005 25 7.20005H24.1474C23.9415 8.57972 23.1504 9.87026 22.1242 10.8808C23.055 11.4606 24.0746 11.8 25 11.8C25.3866 11.8 25.7 12.1134 25.7 12.5C25.7 12.8866 25.3866 13.2 25 13.2C23.6228 13.2 22.2014 12.6549 21 11.8152C19.7985 12.6549 18.3772 13.2 17 13.2C16.6134 13.2 16.3 12.8866 16.3 12.5C16.3 12.1134 16.6134 11.8 17 11.8C17.9254 11.8 18.945 11.4606 19.8757 10.8808C18.8495 9.87026 18.0584 8.57972 17.8526 7.20005H17C16.6134 7.20005 16.3 6.88665 16.3 6.50005ZM19.2749 7.20005C19.4819 8.1869 20.1062 9.18668 21 10.0193C21.8937 9.18668 22.5181 8.1869 22.7251 7.20005H19.2749Z"
524
+ fill="white"
525
+ />
526
+ <path
527
+ d="M19 28L20.2533 25.2533L23 24L20.2533 22.7467L19 20L17.7467 22.7467L15 24L17.7467 25.2533L19 28Z"
528
+ fill="var(--sd-colour-primary--active)"
529
+ fillOpacity="0.4"
530
+ />
531
+ <path
532
+ d="M7 31L7.94 28.94L10 28L7.94 27.06L7 25L6.06 27.06L4 28L6.06 28.94L7 31Z"
533
+ fill="var(--sd-colour-primary--active)"
534
+ fillOpacity="0.32"
535
+ />
536
+ <path
537
+ d="M25 31L25.6267 29.6267L27 29L25.6267 28.3733L25 27L24.3733 28.3733L23 29L24.3733 29.6267L25 31Z"
538
+ fill="var(--sd-colour-primary--active)"
539
+ fillOpacity="0.32"
540
+ />
541
+ <path
542
+ d="M54 16L54.94 13.94L57 13L54.94 12.06L54 10L53.06 12.06L51 13L53.06 13.94L54 16Z"
543
+ fill="var(--sd-colour-primary--active)"
544
+ fillOpacity="0.32"
545
+ />
174
546
  </svg>
175
547
  );
176
548
  default:
@@ -180,7 +552,7 @@ export class SvgIconIllustration extends React.PureComponent<IProps> {
180
552
  /* tslint:enable */
181
553
  render() {
182
554
  let classes = classNames('svg-icon-illustration', {
183
- [`svg-icon-illustration--${this.props.illustration}`] : this.props.illustration,
555
+ [`svg-icon-illustration--${this.props.illustration}`]: this.props.illustration,
184
556
  });
185
557
  return (
186
558
  <figure className={classes} aria-hidden="true">