@heliux-org/design-system-core 0.0.185 → 0.0.188

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 (426) hide show
  1. package/dist/GridCol.js +44 -36
  2. package/dist/GridCol.js.map +1 -1
  3. package/dist/GridContainer.js +44 -36
  4. package/dist/GridContainer.js.map +1 -1
  5. package/dist/GridRow.js +44 -36
  6. package/dist/GridRow.js.map +1 -1
  7. package/dist/PageHeader.js +49 -1
  8. package/dist/PageHeader.js.map +1 -1
  9. package/dist/SegmentControlCell.css +1 -1
  10. package/dist/SegmentControlCell.css.map +1 -1
  11. package/dist/SegmentControlCell.js +1 -1
  12. package/dist/SegmentControlCell.js.map +1 -1
  13. package/dist/SegmentControlList.css +1 -1
  14. package/dist/SegmentControlList.css.map +1 -1
  15. package/dist/SegmentControlList.js +1 -1
  16. package/dist/SegmentControlList.js.map +1 -1
  17. package/dist/components/GridSystem/GridSystem.js +79 -90
  18. package/dist/components/GridSystem/GridSystem.js.map +1 -1
  19. package/dist/components/PageHeader/PageHeader.js +2 -2
  20. package/dist/components/PageHeader/PageHeader.js.map +1 -1
  21. package/dist/components/SegmentControl/SegmentControlCell/SegmentControlCell.js +3 -3
  22. package/dist/components/SegmentControl/SegmentControlCell/SegmentControlCell.js.map +1 -1
  23. package/dist/components/SegmentControl/SegmentControlList/SegmentControlList.js +5 -5
  24. package/dist/components/SegmentControl/SegmentControlList/SegmentControlList.js.map +1 -1
  25. package/dist/esm/components/GridSystem/GridSystem.d.ts +4 -5
  26. package/dist/esm/components/GridSystem/GridSystem.d.ts.map +1 -1
  27. package/dist/esm/components/PageHeader/PageHeader.d.ts.map +1 -1
  28. package/dist/esm/components/SegmentControl/SegmentControlCell/SegmentControlCell.d.ts +3 -1
  29. package/dist/esm/components/SegmentControl/SegmentControlCell/SegmentControlCell.d.ts.map +1 -1
  30. package/dist/esm/components/SegmentControl/SegmentControlList/SegmentControlList.d.ts +2 -0
  31. package/dist/esm/components/SegmentControl/SegmentControlList/SegmentControlList.d.ts.map +1 -1
  32. package/dist/esm/src/components/Accordion/Accordion/Accordion.module.scss.js +1 -1
  33. package/dist/esm/src/components/AlertBanner/AlertBanner.module.scss.js +1 -1
  34. package/dist/esm/src/components/AlertBanner/AlertBannerButton/AlertBannerButton.module.scss.js +1 -1
  35. package/dist/esm/src/components/AlertBanner/AlertBannerLink/AlertBannerLink.module.scss.js +1 -1
  36. package/dist/esm/src/components/AlertBanner/AlertBannerText/AlertBannerText.module.scss.js +1 -1
  37. package/dist/esm/src/components/AttentionBox/AttentionBox.module.scss.js +1 -1
  38. package/dist/esm/src/components/AttentionBox/AttentionBoxLink/AttentionBoxLink.module.scss.js +1 -1
  39. package/dist/esm/src/components/Avatar/Avatar.module.scss.js +1 -1
  40. package/dist/esm/src/components/Avatar/AvatarBadge.module.scss.js +1 -1
  41. package/dist/esm/src/components/Avatar/AvatarContent.module.scss.js +1 -1
  42. package/dist/esm/src/components/AvatarGroup/AvatarGroup.module.scss.js +1 -1
  43. package/dist/esm/src/components/AvatarGroup/AvatarGroupCounter.module.scss.js +1 -1
  44. package/dist/esm/src/components/AvatarGroup/AvatarGroupCounterTooltipContent.module.scss.js +1 -1
  45. package/dist/esm/src/components/AvatarGroup/AvatarGroupCounterTooltipContentVirtualizedList.module.scss.js +1 -1
  46. package/dist/esm/src/components/Badge/Badge.module.scss.js +1 -1
  47. package/dist/esm/src/components/Badge/Indicator/Indicator.module.scss.js +1 -1
  48. package/dist/esm/src/components/Box/Box.module.scss.js +1 -1
  49. package/dist/esm/src/components/BreadcrumbsBar/BreadcrumbItem/BreadcrumbContent/BreadcrumbContent.module.scss.js +1 -1
  50. package/dist/esm/src/components/BreadcrumbsBar/BreadcrumbItem/BreadcrumbItem.module.scss.js +1 -1
  51. package/dist/esm/src/components/BreadcrumbsBar/BreadcrumbsBar.module.scss.js +1 -1
  52. package/dist/esm/src/components/Button/Button.module.scss.js +1 -1
  53. package/dist/esm/src/components/ButtonGroup/ButtonGroup.module.scss.js +1 -1
  54. package/dist/esm/src/components/Checkbox/Checkbox.module.scss.js +1 -1
  55. package/dist/esm/src/components/Clickable/Clickable.module.scss.js +1 -1
  56. package/dist/esm/src/components/ColorPicker/ColorPicker.module.scss.js +1 -1
  57. package/dist/esm/src/components/ColorPicker/components/ColorPickerContent/ColorPickerClearButton.module.scss.js +1 -1
  58. package/dist/esm/src/components/ColorPicker/components/ColorPickerContent/ColorPickerColorsGrid.module.scss.js +1 -1
  59. package/dist/esm/src/components/ColorPicker/components/ColorPickerItemComponent/ColorPickerItemComponent.module.scss.js +1 -1
  60. package/dist/esm/src/components/Combobox/Combobox.module.scss.js +1 -1
  61. package/dist/esm/src/components/Combobox/ComboboxHelpers/ComboboxHelpers.module.scss.js +1 -1
  62. package/dist/esm/src/components/Combobox/components/ComboboxCategory/ComboboxCategory.module.scss.js +1 -1
  63. package/dist/esm/src/components/Combobox/components/ComboboxItems/ComboboxItems.module.scss.js +1 -1
  64. package/dist/esm/src/components/Combobox/components/ComboboxOption/ComboboxOption.module.scss.js +1 -1
  65. package/dist/esm/src/components/Combobox/components/StickyCategoryHeader/StickyCategoryHeader.module.scss.js +1 -1
  66. package/dist/esm/src/components/Comments/comments.scss.js +1 -1
  67. package/dist/esm/src/components/Counter/Counter.module.scss.js +1 -1
  68. package/dist/esm/src/components/DatePicker/DateNavigationItem/DateNavigationItem.module.scss.js +1 -1
  69. package/dist/esm/src/components/DatePicker/DatePicker.module.scss.js +1 -1
  70. package/dist/esm/src/components/DatePicker/DatePickerHeader/DatePickerHeader.module.scss.js +1 -1
  71. package/dist/esm/src/components/DatePicker/YearPicker/YearPicker.module.scss.js +1 -1
  72. package/dist/esm/src/components/Dialog/Dialog.module.scss.js +1 -1
  73. package/dist/esm/src/components/Dialog/DialogContent/DialogContent.module.scss.js +1 -1
  74. package/dist/esm/src/components/DialogContentContainer/DialogContentContainer.module.scss.js +1 -1
  75. package/dist/esm/src/components/Divider/Divider.module.scss.js +1 -1
  76. package/dist/esm/src/components/Dropdown/Dropdown.module.scss.js +1 -1
  77. package/dist/esm/src/components/Dropdown/components/ChildrenContent/ChildrenContent.module.scss.js +1 -1
  78. package/dist/esm/src/components/Dropdown/components/ClearIndicator/ClearIndicator.module.scss.js +1 -1
  79. package/dist/esm/src/components/Dropdown/components/MultiValueContainer/MultiValueContainer.module.scss.js +1 -1
  80. package/dist/esm/src/components/Dropdown/components/menu/menu.module.scss.js +1 -1
  81. package/dist/esm/src/components/Dropdown/components/option/option.module.scss.js +1 -1
  82. package/dist/esm/src/components/Dropdown/components/singleValue/singleValue.module.scss.js +1 -1
  83. package/dist/esm/src/components/EditableHeading/EditableHeading.module.scss.js +1 -1
  84. package/dist/esm/src/components/EditableInput/EditableInput.module.scss.js +1 -1
  85. package/dist/esm/src/components/EditableText/EditableText.module.scss.js +1 -1
  86. package/dist/esm/src/components/EditableTypography/EditableTypography.module.scss.js +1 -1
  87. package/dist/esm/src/components/ExpandCollapse/ExpandCollapse.module.scss.js +1 -1
  88. package/dist/esm/src/components/FieldLabel/FieldLabel.module.scss.js +1 -1
  89. package/dist/esm/src/components/Flex/Flex.module.scss.js +1 -1
  90. package/dist/esm/src/components/FormattedNumber/FormattedNumber.module.scss.js +1 -1
  91. package/dist/esm/src/components/GridSystem/GridSystem.js +1 -1
  92. package/dist/esm/src/components/GridSystem/GridSystem.js.map +1 -1
  93. package/dist/esm/src/components/HeaderActions/HeaderActions.module.scss.js +1 -1
  94. package/dist/esm/src/components/Heading/Heading.module.scss.js +1 -1
  95. package/dist/esm/src/components/HiddenText/HiddenText.module.scss.js +1 -1
  96. package/dist/esm/src/components/Icon/Icon.module.scss.js +1 -1
  97. package/dist/esm/src/components/IconButton/IconButton.module.scss.js +1 -1
  98. package/dist/esm/src/components/InlineEdit/InlineEdit.module.scss.js +1 -1
  99. package/dist/esm/src/components/Label/Label.module.scss.js +1 -1
  100. package/dist/esm/src/components/LegacyEditableHeading/LegacyEditableHeading.module.scss.js +1 -1
  101. package/dist/esm/src/components/LegacyHeading/LegacyHeading.module.scss.js +1 -1
  102. package/dist/esm/src/components/Link/Link.module.scss.js +1 -1
  103. package/dist/esm/src/components/List/List.module.scss.js +1 -1
  104. package/dist/esm/src/components/List/VirtualizedListItems/VirtualizedListItems.module.scss.js +1 -1
  105. package/dist/esm/src/components/ListItem/ListItem.module.scss.js +1 -1
  106. package/dist/esm/src/components/ListItemAvatar/ListItemAvatar.module.scss.js +1 -1
  107. package/dist/esm/src/components/ListItemIcon/ListItemIcon.module.scss.js +1 -1
  108. package/dist/esm/src/components/ListTitle/ListTitle.module.scss.js +1 -1
  109. package/dist/esm/src/components/Loader/Loader.module.scss.js +1 -1
  110. package/dist/esm/src/components/Menu/Menu/Menu.module.scss.js +1 -1
  111. package/dist/esm/src/components/Menu/MenuDivider/MenuDivider.module.scss.js +1 -1
  112. package/dist/esm/src/components/Menu/MenuItem/MenuItem.module.scss.js +1 -1
  113. package/dist/esm/src/components/Menu/MenuItemButton/MenuItemButton.module.scss.js +1 -1
  114. package/dist/esm/src/components/Menu/MenuTitle/MenuTitle.module.scss.js +1 -1
  115. package/dist/esm/src/components/MenuButton/MenuButton.module.scss.js +1 -1
  116. package/dist/esm/src/components/Modal/Modal.module.scss.js +1 -1
  117. package/dist/esm/src/components/Modal/ModalContent/ModalContent.module.scss.js +1 -1
  118. package/dist/esm/src/components/Modal/ModalFooter/ModalFooter.module.scss.js +1 -1
  119. package/dist/esm/src/components/Modal/ModalHeader/ModalHeader.module.scss.js +1 -1
  120. package/dist/esm/src/components/MultiStepIndicator/MultiStepIndicator.module.scss.js +1 -1
  121. package/dist/esm/src/components/MultiStepIndicator/components/StepIndicator/StepIndicator.module.scss.js +1 -1
  122. package/dist/esm/src/components/NewTable/Table.module.scss.js +1 -1
  123. package/dist/esm/src/components/NewTable/components/Cell/Cell.module.scss.js +1 -1
  124. package/dist/esm/src/components/NewTable/components/Cell/HeaderCell/HeaderCell.module.scss.js +1 -1
  125. package/dist/esm/src/components/NewTable/components/ExpandedContent/ExpandedContent.module.scss.js +1 -1
  126. package/dist/esm/src/components/NewTable/components/Row/Row.module.scss.js +1 -1
  127. package/dist/esm/src/components/NewTable/components/TableHead/TableHead.module.scss.js +1 -1
  128. package/dist/esm/src/components/NewTable/components/TableHeader/TableHeader.module.scss.js +1 -1
  129. package/dist/esm/src/components/NewTable/components/ToggleExpandedIcon/ToggleExpandedIcon.module.scss.js +1 -1
  130. package/dist/esm/src/components/NewTable/components/newComponents/pagination/Pagination.module.scss.js +1 -1
  131. package/dist/esm/src/components/NewTable/components/useLeafyGreenTable/useLeafyGreenTable.module.scss.js +1 -1
  132. package/dist/esm/src/components/NumericField/NumericField.module.scss.js +1 -1
  133. package/dist/esm/src/components/PageHeader/PageHeader.js +1 -1
  134. package/dist/esm/src/components/PageHeader/PageHeader.js.map +1 -1
  135. package/dist/esm/src/components/PageHeader/PageHeader.module.scss.js +1 -1
  136. package/dist/esm/src/components/Panel/Panel.module.scss.js +1 -1
  137. package/dist/esm/src/components/ProcessingToast/ProcessingToast.module.scss.js +1 -1
  138. package/dist/esm/src/components/ProgressBars/LinearProgressBar/Bar/Bar.module.scss.js +1 -1
  139. package/dist/esm/src/components/ProgressBars/LinearProgressBar/LinearProgressBar.module.scss.js +1 -1
  140. package/dist/esm/src/components/ProgressBars/PercentageLabel/PercentageLabel.module.scss.js +1 -1
  141. package/dist/esm/src/components/RadioButton/RadioButton.module.scss.js +1 -1
  142. package/dist/esm/src/components/ResponsiveList/ResponsiveList.module.scss.js +1 -1
  143. package/dist/esm/src/components/ScrollableContainer/scrollableContainer.scss.js +1 -1
  144. package/dist/esm/src/components/Search/Search.module.scss.js +1 -1
  145. package/dist/esm/src/components/SectionHeader/SectionHeader.module.scss.js +1 -1
  146. package/dist/esm/src/components/SegmentControl/SegmentControlCell/SegmentControlCell.js +1 -1
  147. package/dist/esm/src/components/SegmentControl/SegmentControlCell/SegmentControlCell.js.map +1 -1
  148. package/dist/esm/src/components/SegmentControl/SegmentControlCell/SegmentControlCell.module.scss.js +1 -1
  149. package/dist/esm/src/components/SegmentControl/SegmentControlList/SegmentControlList.js +1 -1
  150. package/dist/esm/src/components/SegmentControl/SegmentControlList/SegmentControlList.js.map +1 -1
  151. package/dist/esm/src/components/SegmentControl/SegmentControlList/SegmentControlList.module.scss.js +1 -1
  152. package/dist/esm/src/components/Sidebar/Sidebar.module.scss.js +1 -1
  153. package/dist/esm/src/components/Skeleton/Skeleton.module.scss.js +1 -1
  154. package/dist/esm/src/components/Slider/SelectionIndicator.module.scss.js +1 -1
  155. package/dist/esm/src/components/Slider/Slider.module.scss.js +1 -1
  156. package/dist/esm/src/components/Slider/SliderBase/SliderBase.module.scss.js +1 -1
  157. package/dist/esm/src/components/Slider/SliderBase/SliderFilledTrack.module.scss.js +1 -1
  158. package/dist/esm/src/components/Slider/SliderBase/SliderRail.module.scss.js +1 -1
  159. package/dist/esm/src/components/Slider/SliderBase/SliderThumb.module.scss.js +1 -1
  160. package/dist/esm/src/components/Slider/SliderBase/SliderTrack.module.scss.js +1 -1
  161. package/dist/esm/src/components/Slider/SliderInfix.module.scss.js +1 -1
  162. package/dist/esm/src/components/SplitButton/SplitButton.module.scss.js +1 -1
  163. package/dist/esm/src/components/Steps/Steps.module.scss.js +1 -1
  164. package/dist/esm/src/components/Steps/StepsCommand.module.scss.js +1 -1
  165. package/dist/esm/src/components/Steps/StepsDot.module.scss.js +1 -1
  166. package/dist/esm/src/components/Steps/StepsGalleryHeader.module.scss.js +1 -1
  167. package/dist/esm/src/components/Steps/StepsHeader.module.scss.js +1 -1
  168. package/dist/esm/src/components/Steps/StepsNumbersHeader.module.scss.js +1 -1
  169. package/dist/esm/src/components/Switch/Switch.module.scss.js +1 -1
  170. package/dist/esm/src/components/Table/TableHeader.module.scss.js +1 -1
  171. package/dist/esm/src/components/Table/styling/column-filter.scss.js +1 -1
  172. package/dist/esm/src/components/Table/styling/paginator.scss.js +1 -1
  173. package/dist/esm/src/components/Table/styling/table_base.scss.js +1 -1
  174. package/dist/esm/src/components/Table/table.scss.js +1 -1
  175. package/dist/esm/src/components/Tabs/Tab/Tab.module.scss.js +1 -1
  176. package/dist/esm/src/components/Tabs/TabList/TabList.module.scss.js +1 -1
  177. package/dist/esm/src/components/Tabs/TabPanel/TabPanel.module.scss.js +1 -1
  178. package/dist/esm/src/components/Tabs/TabPanels/TabPanels.module.scss.js +1 -1
  179. package/dist/esm/src/components/Tags/Tags.module.scss.js +1 -1
  180. package/dist/esm/src/components/Text/Text.module.scss.js +1 -1
  181. package/dist/esm/src/components/TextAreaField/TextAreaField.module.scss.js +1 -1
  182. package/dist/esm/src/components/TextField/TextField.module.scss.js +1 -1
  183. package/dist/esm/src/components/TextWithHighlight/TextWithHighlight.module.scss.js +1 -1
  184. package/dist/esm/src/components/Timeline/Timeline/Timeline.module.scss.js +1 -1
  185. package/dist/esm/src/components/Timeline/TimelineRow/TimelineRow.module.scss.js +1 -1
  186. package/dist/esm/src/components/Tipseen/Tipseen.module.scss.js +1 -1
  187. package/dist/esm/src/components/Tipseen/TipseenBasicContent.module.scss.js +1 -1
  188. package/dist/esm/src/components/Tipseen/TipseenContent.module.scss.js +1 -1
  189. package/dist/esm/src/components/Tipseen/TipseenImage.module.scss.js +1 -1
  190. package/dist/esm/src/components/Tipseen/TipseenMedia/TipseenMedia.module.scss.js +1 -1
  191. package/dist/esm/src/components/Tipseen/TipseenTitle.module.scss.js +1 -1
  192. package/dist/esm/src/components/Tipseen/TipseenWizard.module.scss.js +1 -1
  193. package/dist/esm/src/components/Toast/Toast.module.scss.js +1 -1
  194. package/dist/esm/src/components/Toast/ToastLink/ToastLink.module.scss.js +1 -1
  195. package/dist/esm/src/components/Toggle/MockToggle.module.scss.js +1 -1
  196. package/dist/esm/src/components/Toggle/Toggle.module.scss.js +1 -1
  197. package/dist/esm/src/components/Toggle/ToggleText.module.scss.js +1 -1
  198. package/dist/esm/src/components/Tooltip/Tooltip.module.scss.js +1 -1
  199. package/dist/esm/src/components/TopNavigationBar/TopNavigationBar.module.scss.js +1 -1
  200. package/dist/esm/src/components/TopNavigationBar/components/Notification/Notification.module.scss.js +1 -1
  201. package/dist/esm/src/components/TopNavigationBar/components/NotificationItem/NotificationItem.module.scss.js +1 -1
  202. package/dist/esm/src/components/Tree/components/TreeFile/TreeFile.scss.js +1 -1
  203. package/dist/esm/src/components/Tree/components/TreeFileIcon/TreeFileIcon.scss.js +1 -1
  204. package/dist/esm/src/components/Tree/components/TreeFolder/TreeFolder.scss.js +1 -1
  205. package/dist/esm/src/components/Tree/components/TreeFolderIcon/TreeFolderIcon.scss.js +1 -1
  206. package/dist/esm/src/components/Tree/components/TreeStatusIcon/TreeStatusIcon.scss.js +1 -1
  207. package/dist/esm/src/components/Tree/components/expand/expand.scss.js +1 -1
  208. package/dist/esm/src/components/Typography/Typography.module.scss.js +1 -1
  209. package/dist/esm/src/components/Uploader/Uploader.scss.js +1 -1
  210. package/dist/esm/src/components/VirtualizedGrid/VirtualizedGrid.module.scss.js +1 -1
  211. package/dist/esm/src/components/VirtualizedList/VirtualizedList.module.scss.js +1 -1
  212. package/dist/esm/src/components/Workflow/workflow.scss.js +1 -1
  213. package/dist/esm/style/dist/index.min.css.js +1 -1
  214. package/dist/main.css +2 -2
  215. package/dist/main.css.map +1 -1
  216. package/dist/main.js +45 -37
  217. package/dist/main.js.map +1 -1
  218. package/dist/mocked_classnames_esm/components/GridSystem/GridSystem.d.ts +4 -5
  219. package/dist/mocked_classnames_esm/components/GridSystem/GridSystem.d.ts.map +1 -1
  220. package/dist/mocked_classnames_esm/components/PageHeader/PageHeader.d.ts.map +1 -1
  221. package/dist/mocked_classnames_esm/components/SegmentControl/SegmentControlCell/SegmentControlCell.d.ts +3 -1
  222. package/dist/mocked_classnames_esm/components/SegmentControl/SegmentControlCell/SegmentControlCell.d.ts.map +1 -1
  223. package/dist/mocked_classnames_esm/components/SegmentControl/SegmentControlList/SegmentControlList.d.ts +2 -0
  224. package/dist/mocked_classnames_esm/components/SegmentControl/SegmentControlList/SegmentControlList.d.ts.map +1 -1
  225. package/dist/mocked_classnames_esm/src/components/Accordion/Accordion/Accordion.module.scss.js +1 -1
  226. package/dist/mocked_classnames_esm/src/components/AlertBanner/AlertBanner.module.scss.js +1 -1
  227. package/dist/mocked_classnames_esm/src/components/AlertBanner/AlertBannerButton/AlertBannerButton.module.scss.js +1 -1
  228. package/dist/mocked_classnames_esm/src/components/AlertBanner/AlertBannerLink/AlertBannerLink.module.scss.js +1 -1
  229. package/dist/mocked_classnames_esm/src/components/AlertBanner/AlertBannerText/AlertBannerText.module.scss.js +1 -1
  230. package/dist/mocked_classnames_esm/src/components/AttentionBox/AttentionBox.module.scss.js +1 -1
  231. package/dist/mocked_classnames_esm/src/components/AttentionBox/AttentionBoxLink/AttentionBoxLink.module.scss.js +1 -1
  232. package/dist/mocked_classnames_esm/src/components/Avatar/Avatar.module.scss.js +1 -1
  233. package/dist/mocked_classnames_esm/src/components/Avatar/AvatarBadge.module.scss.js +1 -1
  234. package/dist/mocked_classnames_esm/src/components/Avatar/AvatarContent.module.scss.js +1 -1
  235. package/dist/mocked_classnames_esm/src/components/AvatarGroup/AvatarGroup.module.scss.js +1 -1
  236. package/dist/mocked_classnames_esm/src/components/AvatarGroup/AvatarGroupCounter.module.scss.js +1 -1
  237. package/dist/mocked_classnames_esm/src/components/AvatarGroup/AvatarGroupCounterTooltipContent.module.scss.js +1 -1
  238. package/dist/mocked_classnames_esm/src/components/AvatarGroup/AvatarGroupCounterTooltipContentVirtualizedList.module.scss.js +1 -1
  239. package/dist/mocked_classnames_esm/src/components/Badge/Badge.module.scss.js +1 -1
  240. package/dist/mocked_classnames_esm/src/components/Badge/Indicator/Indicator.module.scss.js +1 -1
  241. package/dist/mocked_classnames_esm/src/components/Box/Box.module.scss.js +1 -1
  242. package/dist/mocked_classnames_esm/src/components/BreadcrumbsBar/BreadcrumbItem/BreadcrumbContent/BreadcrumbContent.module.scss.js +1 -1
  243. package/dist/mocked_classnames_esm/src/components/BreadcrumbsBar/BreadcrumbItem/BreadcrumbItem.module.scss.js +1 -1
  244. package/dist/mocked_classnames_esm/src/components/BreadcrumbsBar/BreadcrumbsBar.module.scss.js +1 -1
  245. package/dist/mocked_classnames_esm/src/components/Button/Button.module.scss.js +1 -1
  246. package/dist/mocked_classnames_esm/src/components/ButtonGroup/ButtonGroup.module.scss.js +1 -1
  247. package/dist/mocked_classnames_esm/src/components/Checkbox/Checkbox.module.scss.js +1 -1
  248. package/dist/mocked_classnames_esm/src/components/Clickable/Clickable.module.scss.js +1 -1
  249. package/dist/mocked_classnames_esm/src/components/ColorPicker/ColorPicker.module.scss.js +1 -1
  250. package/dist/mocked_classnames_esm/src/components/ColorPicker/components/ColorPickerContent/ColorPickerClearButton.module.scss.js +1 -1
  251. package/dist/mocked_classnames_esm/src/components/ColorPicker/components/ColorPickerContent/ColorPickerColorsGrid.module.scss.js +1 -1
  252. package/dist/mocked_classnames_esm/src/components/ColorPicker/components/ColorPickerItemComponent/ColorPickerItemComponent.module.scss.js +1 -1
  253. package/dist/mocked_classnames_esm/src/components/Combobox/Combobox.module.scss.js +1 -1
  254. package/dist/mocked_classnames_esm/src/components/Combobox/ComboboxHelpers/ComboboxHelpers.module.scss.js +1 -1
  255. package/dist/mocked_classnames_esm/src/components/Combobox/components/ComboboxCategory/ComboboxCategory.module.scss.js +1 -1
  256. package/dist/mocked_classnames_esm/src/components/Combobox/components/ComboboxItems/ComboboxItems.module.scss.js +1 -1
  257. package/dist/mocked_classnames_esm/src/components/Combobox/components/ComboboxOption/ComboboxOption.module.scss.js +1 -1
  258. package/dist/mocked_classnames_esm/src/components/Combobox/components/StickyCategoryHeader/StickyCategoryHeader.module.scss.js +1 -1
  259. package/dist/mocked_classnames_esm/src/components/Comments/comments.scss.js +1 -1
  260. package/dist/mocked_classnames_esm/src/components/Counter/Counter.module.scss.js +1 -1
  261. package/dist/mocked_classnames_esm/src/components/DatePicker/DateNavigationItem/DateNavigationItem.module.scss.js +1 -1
  262. package/dist/mocked_classnames_esm/src/components/DatePicker/DatePicker.module.scss.js +1 -1
  263. package/dist/mocked_classnames_esm/src/components/DatePicker/DatePickerHeader/DatePickerHeader.module.scss.js +1 -1
  264. package/dist/mocked_classnames_esm/src/components/DatePicker/YearPicker/YearPicker.module.scss.js +1 -1
  265. package/dist/mocked_classnames_esm/src/components/Dialog/Dialog.module.scss.js +1 -1
  266. package/dist/mocked_classnames_esm/src/components/Dialog/DialogContent/DialogContent.module.scss.js +1 -1
  267. package/dist/mocked_classnames_esm/src/components/DialogContentContainer/DialogContentContainer.module.scss.js +1 -1
  268. package/dist/mocked_classnames_esm/src/components/Divider/Divider.module.scss.js +1 -1
  269. package/dist/mocked_classnames_esm/src/components/Dropdown/Dropdown.module.scss.js +1 -1
  270. package/dist/mocked_classnames_esm/src/components/Dropdown/components/ChildrenContent/ChildrenContent.module.scss.js +1 -1
  271. package/dist/mocked_classnames_esm/src/components/Dropdown/components/ClearIndicator/ClearIndicator.module.scss.js +1 -1
  272. package/dist/mocked_classnames_esm/src/components/Dropdown/components/MultiValueContainer/MultiValueContainer.module.scss.js +1 -1
  273. package/dist/mocked_classnames_esm/src/components/Dropdown/components/menu/menu.module.scss.js +1 -1
  274. package/dist/mocked_classnames_esm/src/components/Dropdown/components/option/option.module.scss.js +1 -1
  275. package/dist/mocked_classnames_esm/src/components/Dropdown/components/singleValue/singleValue.module.scss.js +1 -1
  276. package/dist/mocked_classnames_esm/src/components/EditableHeading/EditableHeading.module.scss.js +1 -1
  277. package/dist/mocked_classnames_esm/src/components/EditableInput/EditableInput.module.scss.js +1 -1
  278. package/dist/mocked_classnames_esm/src/components/EditableText/EditableText.module.scss.js +1 -1
  279. package/dist/mocked_classnames_esm/src/components/EditableTypography/EditableTypography.module.scss.js +1 -1
  280. package/dist/mocked_classnames_esm/src/components/ExpandCollapse/ExpandCollapse.module.scss.js +1 -1
  281. package/dist/mocked_classnames_esm/src/components/FieldLabel/FieldLabel.module.scss.js +1 -1
  282. package/dist/mocked_classnames_esm/src/components/Flex/Flex.module.scss.js +1 -1
  283. package/dist/mocked_classnames_esm/src/components/FormattedNumber/FormattedNumber.module.scss.js +1 -1
  284. package/dist/mocked_classnames_esm/src/components/GridSystem/GridSystem.js +1 -1
  285. package/dist/mocked_classnames_esm/src/components/GridSystem/GridSystem.js.map +1 -1
  286. package/dist/mocked_classnames_esm/src/components/HeaderActions/HeaderActions.module.scss.js +1 -1
  287. package/dist/mocked_classnames_esm/src/components/Heading/Heading.module.scss.js +1 -1
  288. package/dist/mocked_classnames_esm/src/components/HiddenText/HiddenText.module.scss.js +1 -1
  289. package/dist/mocked_classnames_esm/src/components/Icon/Icon.module.scss.js +1 -1
  290. package/dist/mocked_classnames_esm/src/components/IconButton/IconButton.module.scss.js +1 -1
  291. package/dist/mocked_classnames_esm/src/components/InlineEdit/InlineEdit.module.scss.js +1 -1
  292. package/dist/mocked_classnames_esm/src/components/Label/Label.module.scss.js +1 -1
  293. package/dist/mocked_classnames_esm/src/components/LegacyEditableHeading/LegacyEditableHeading.module.scss.js +1 -1
  294. package/dist/mocked_classnames_esm/src/components/LegacyHeading/LegacyHeading.module.scss.js +1 -1
  295. package/dist/mocked_classnames_esm/src/components/Link/Link.module.scss.js +1 -1
  296. package/dist/mocked_classnames_esm/src/components/List/List.module.scss.js +1 -1
  297. package/dist/mocked_classnames_esm/src/components/List/VirtualizedListItems/VirtualizedListItems.module.scss.js +1 -1
  298. package/dist/mocked_classnames_esm/src/components/ListItem/ListItem.module.scss.js +1 -1
  299. package/dist/mocked_classnames_esm/src/components/ListItemAvatar/ListItemAvatar.module.scss.js +1 -1
  300. package/dist/mocked_classnames_esm/src/components/ListItemIcon/ListItemIcon.module.scss.js +1 -1
  301. package/dist/mocked_classnames_esm/src/components/ListTitle/ListTitle.module.scss.js +1 -1
  302. package/dist/mocked_classnames_esm/src/components/Loader/Loader.module.scss.js +1 -1
  303. package/dist/mocked_classnames_esm/src/components/Menu/Menu/Menu.module.scss.js +1 -1
  304. package/dist/mocked_classnames_esm/src/components/Menu/MenuDivider/MenuDivider.module.scss.js +1 -1
  305. package/dist/mocked_classnames_esm/src/components/Menu/MenuItem/MenuItem.module.scss.js +1 -1
  306. package/dist/mocked_classnames_esm/src/components/Menu/MenuItemButton/MenuItemButton.module.scss.js +1 -1
  307. package/dist/mocked_classnames_esm/src/components/Menu/MenuTitle/MenuTitle.module.scss.js +1 -1
  308. package/dist/mocked_classnames_esm/src/components/MenuButton/MenuButton.module.scss.js +1 -1
  309. package/dist/mocked_classnames_esm/src/components/Modal/Modal.module.scss.js +1 -1
  310. package/dist/mocked_classnames_esm/src/components/Modal/ModalContent/ModalContent.module.scss.js +1 -1
  311. package/dist/mocked_classnames_esm/src/components/Modal/ModalFooter/ModalFooter.module.scss.js +1 -1
  312. package/dist/mocked_classnames_esm/src/components/Modal/ModalHeader/ModalHeader.module.scss.js +1 -1
  313. package/dist/mocked_classnames_esm/src/components/MultiStepIndicator/MultiStepIndicator.module.scss.js +1 -1
  314. package/dist/mocked_classnames_esm/src/components/MultiStepIndicator/components/StepIndicator/StepIndicator.module.scss.js +1 -1
  315. package/dist/mocked_classnames_esm/src/components/NewTable/Table.module.scss.js +1 -1
  316. package/dist/mocked_classnames_esm/src/components/NewTable/components/Cell/Cell.module.scss.js +1 -1
  317. package/dist/mocked_classnames_esm/src/components/NewTable/components/Cell/HeaderCell/HeaderCell.module.scss.js +1 -1
  318. package/dist/mocked_classnames_esm/src/components/NewTable/components/ExpandedContent/ExpandedContent.module.scss.js +1 -1
  319. package/dist/mocked_classnames_esm/src/components/NewTable/components/Row/Row.module.scss.js +1 -1
  320. package/dist/mocked_classnames_esm/src/components/NewTable/components/TableHead/TableHead.module.scss.js +1 -1
  321. package/dist/mocked_classnames_esm/src/components/NewTable/components/TableHeader/TableHeader.module.scss.js +1 -1
  322. package/dist/mocked_classnames_esm/src/components/NewTable/components/ToggleExpandedIcon/ToggleExpandedIcon.module.scss.js +1 -1
  323. package/dist/mocked_classnames_esm/src/components/NewTable/components/newComponents/pagination/Pagination.module.scss.js +1 -1
  324. package/dist/mocked_classnames_esm/src/components/NewTable/components/useLeafyGreenTable/useLeafyGreenTable.module.scss.js +1 -1
  325. package/dist/mocked_classnames_esm/src/components/NumericField/NumericField.module.scss.js +1 -1
  326. package/dist/mocked_classnames_esm/src/components/PageHeader/PageHeader.js +1 -1
  327. package/dist/mocked_classnames_esm/src/components/PageHeader/PageHeader.js.map +1 -1
  328. package/dist/mocked_classnames_esm/src/components/PageHeader/PageHeader.module.scss.js +1 -1
  329. package/dist/mocked_classnames_esm/src/components/Panel/Panel.module.scss.js +1 -1
  330. package/dist/mocked_classnames_esm/src/components/ProcessingToast/ProcessingToast.module.scss.js +1 -1
  331. package/dist/mocked_classnames_esm/src/components/ProgressBars/LinearProgressBar/Bar/Bar.module.scss.js +1 -1
  332. package/dist/mocked_classnames_esm/src/components/ProgressBars/LinearProgressBar/LinearProgressBar.module.scss.js +1 -1
  333. package/dist/mocked_classnames_esm/src/components/ProgressBars/PercentageLabel/PercentageLabel.module.scss.js +1 -1
  334. package/dist/mocked_classnames_esm/src/components/RadioButton/RadioButton.module.scss.js +1 -1
  335. package/dist/mocked_classnames_esm/src/components/ResponsiveList/ResponsiveList.module.scss.js +1 -1
  336. package/dist/mocked_classnames_esm/src/components/ScrollableContainer/scrollableContainer.scss.js +1 -1
  337. package/dist/mocked_classnames_esm/src/components/Search/Search.module.scss.js +1 -1
  338. package/dist/mocked_classnames_esm/src/components/SectionHeader/SectionHeader.module.scss.js +1 -1
  339. package/dist/mocked_classnames_esm/src/components/SegmentControl/SegmentControlCell/SegmentControlCell.js +1 -1
  340. package/dist/mocked_classnames_esm/src/components/SegmentControl/SegmentControlCell/SegmentControlCell.js.map +1 -1
  341. package/dist/mocked_classnames_esm/src/components/SegmentControl/SegmentControlCell/SegmentControlCell.module.scss.js +1 -1
  342. package/dist/mocked_classnames_esm/src/components/SegmentControl/SegmentControlList/SegmentControlList.js +1 -1
  343. package/dist/mocked_classnames_esm/src/components/SegmentControl/SegmentControlList/SegmentControlList.js.map +1 -1
  344. package/dist/mocked_classnames_esm/src/components/SegmentControl/SegmentControlList/SegmentControlList.module.scss.js +1 -1
  345. package/dist/mocked_classnames_esm/src/components/Sidebar/Sidebar.module.scss.js +1 -1
  346. package/dist/mocked_classnames_esm/src/components/Skeleton/Skeleton.module.scss.js +1 -1
  347. package/dist/mocked_classnames_esm/src/components/Slider/SelectionIndicator.module.scss.js +1 -1
  348. package/dist/mocked_classnames_esm/src/components/Slider/Slider.module.scss.js +1 -1
  349. package/dist/mocked_classnames_esm/src/components/Slider/SliderBase/SliderBase.module.scss.js +1 -1
  350. package/dist/mocked_classnames_esm/src/components/Slider/SliderBase/SliderFilledTrack.module.scss.js +1 -1
  351. package/dist/mocked_classnames_esm/src/components/Slider/SliderBase/SliderRail.module.scss.js +1 -1
  352. package/dist/mocked_classnames_esm/src/components/Slider/SliderBase/SliderThumb.module.scss.js +1 -1
  353. package/dist/mocked_classnames_esm/src/components/Slider/SliderBase/SliderTrack.module.scss.js +1 -1
  354. package/dist/mocked_classnames_esm/src/components/Slider/SliderInfix.module.scss.js +1 -1
  355. package/dist/mocked_classnames_esm/src/components/SplitButton/SplitButton.module.scss.js +1 -1
  356. package/dist/mocked_classnames_esm/src/components/Steps/Steps.module.scss.js +1 -1
  357. package/dist/mocked_classnames_esm/src/components/Steps/StepsCommand.module.scss.js +1 -1
  358. package/dist/mocked_classnames_esm/src/components/Steps/StepsDot.module.scss.js +1 -1
  359. package/dist/mocked_classnames_esm/src/components/Steps/StepsGalleryHeader.module.scss.js +1 -1
  360. package/dist/mocked_classnames_esm/src/components/Steps/StepsHeader.module.scss.js +1 -1
  361. package/dist/mocked_classnames_esm/src/components/Steps/StepsNumbersHeader.module.scss.js +1 -1
  362. package/dist/mocked_classnames_esm/src/components/Switch/Switch.module.scss.js +1 -1
  363. package/dist/mocked_classnames_esm/src/components/Table/TableHeader.module.scss.js +1 -1
  364. package/dist/mocked_classnames_esm/src/components/Table/styling/column-filter.scss.js +1 -1
  365. package/dist/mocked_classnames_esm/src/components/Table/styling/paginator.scss.js +1 -1
  366. package/dist/mocked_classnames_esm/src/components/Table/styling/table_base.scss.js +1 -1
  367. package/dist/mocked_classnames_esm/src/components/Table/table.scss.js +1 -1
  368. package/dist/mocked_classnames_esm/src/components/Tabs/Tab/Tab.module.scss.js +1 -1
  369. package/dist/mocked_classnames_esm/src/components/Tabs/TabList/TabList.module.scss.js +1 -1
  370. package/dist/mocked_classnames_esm/src/components/Tabs/TabPanel/TabPanel.module.scss.js +1 -1
  371. package/dist/mocked_classnames_esm/src/components/Tabs/TabPanels/TabPanels.module.scss.js +1 -1
  372. package/dist/mocked_classnames_esm/src/components/Tags/Tags.module.scss.js +1 -1
  373. package/dist/mocked_classnames_esm/src/components/Text/Text.module.scss.js +1 -1
  374. package/dist/mocked_classnames_esm/src/components/TextAreaField/TextAreaField.module.scss.js +1 -1
  375. package/dist/mocked_classnames_esm/src/components/TextField/TextField.module.scss.js +1 -1
  376. package/dist/mocked_classnames_esm/src/components/TextWithHighlight/TextWithHighlight.module.scss.js +1 -1
  377. package/dist/mocked_classnames_esm/src/components/Timeline/Timeline/Timeline.module.scss.js +1 -1
  378. package/dist/mocked_classnames_esm/src/components/Timeline/TimelineRow/TimelineRow.module.scss.js +1 -1
  379. package/dist/mocked_classnames_esm/src/components/Tipseen/Tipseen.module.scss.js +1 -1
  380. package/dist/mocked_classnames_esm/src/components/Tipseen/TipseenBasicContent.module.scss.js +1 -1
  381. package/dist/mocked_classnames_esm/src/components/Tipseen/TipseenContent.module.scss.js +1 -1
  382. package/dist/mocked_classnames_esm/src/components/Tipseen/TipseenImage.module.scss.js +1 -1
  383. package/dist/mocked_classnames_esm/src/components/Tipseen/TipseenMedia/TipseenMedia.module.scss.js +1 -1
  384. package/dist/mocked_classnames_esm/src/components/Tipseen/TipseenTitle.module.scss.js +1 -1
  385. package/dist/mocked_classnames_esm/src/components/Tipseen/TipseenWizard.module.scss.js +1 -1
  386. package/dist/mocked_classnames_esm/src/components/Toast/Toast.module.scss.js +1 -1
  387. package/dist/mocked_classnames_esm/src/components/Toast/ToastLink/ToastLink.module.scss.js +1 -1
  388. package/dist/mocked_classnames_esm/src/components/Toggle/MockToggle.module.scss.js +1 -1
  389. package/dist/mocked_classnames_esm/src/components/Toggle/Toggle.module.scss.js +1 -1
  390. package/dist/mocked_classnames_esm/src/components/Toggle/ToggleText.module.scss.js +1 -1
  391. package/dist/mocked_classnames_esm/src/components/Tooltip/Tooltip.module.scss.js +1 -1
  392. package/dist/mocked_classnames_esm/src/components/TopNavigationBar/TopNavigationBar.module.scss.js +1 -1
  393. package/dist/mocked_classnames_esm/src/components/TopNavigationBar/components/Notification/Notification.module.scss.js +1 -1
  394. package/dist/mocked_classnames_esm/src/components/TopNavigationBar/components/NotificationItem/NotificationItem.module.scss.js +1 -1
  395. package/dist/mocked_classnames_esm/src/components/Tree/components/TreeFile/TreeFile.scss.js +1 -1
  396. package/dist/mocked_classnames_esm/src/components/Tree/components/TreeFileIcon/TreeFileIcon.scss.js +1 -1
  397. package/dist/mocked_classnames_esm/src/components/Tree/components/TreeFolder/TreeFolder.scss.js +1 -1
  398. package/dist/mocked_classnames_esm/src/components/Tree/components/TreeFolderIcon/TreeFolderIcon.scss.js +1 -1
  399. package/dist/mocked_classnames_esm/src/components/Tree/components/TreeStatusIcon/TreeStatusIcon.scss.js +1 -1
  400. package/dist/mocked_classnames_esm/src/components/Tree/components/expand/expand.scss.js +1 -1
  401. package/dist/mocked_classnames_esm/src/components/Typography/Typography.module.scss.js +1 -1
  402. package/dist/mocked_classnames_esm/src/components/Uploader/Uploader.scss.js +1 -1
  403. package/dist/mocked_classnames_esm/src/components/VirtualizedGrid/VirtualizedGrid.module.scss.js +1 -1
  404. package/dist/mocked_classnames_esm/src/components/VirtualizedList/VirtualizedList.module.scss.js +1 -1
  405. package/dist/mocked_classnames_esm/src/components/Workflow/workflow.scss.js +1 -1
  406. package/dist/mocked_classnames_esm/style/dist/index.min.css.js +1 -1
  407. package/dist/types/components/GridSystem/GridSystem.d.ts +4 -5
  408. package/dist/types/components/GridSystem/GridSystem.d.ts.map +1 -1
  409. package/dist/types/components/PageHeader/PageHeader.d.ts.map +1 -1
  410. package/dist/types/components/SegmentControl/SegmentControlCell/SegmentControlCell.d.ts +3 -1
  411. package/dist/types/components/SegmentControl/SegmentControlCell/SegmentControlCell.d.ts.map +1 -1
  412. package/dist/types/components/SegmentControl/SegmentControlList/SegmentControlList.d.ts +2 -0
  413. package/dist/types/components/SegmentControl/SegmentControlList/SegmentControlList.d.ts.map +1 -1
  414. package/package.json +2 -2
  415. package/src/components/GridSystem/GridSystem.tsx +94 -122
  416. package/src/components/GridSystem/__stories__/GridSystem.mdx +8 -8
  417. package/src/components/GridSystem/__stories__/GridSystem.stories.jsx +7 -7
  418. package/src/components/PageHeader/PageHeader.tsx +18 -21
  419. package/src/components/ScrollableContainer/__stories__/ScrollableContainer.mdx +7 -1
  420. package/src/components/ScrollableContainer/__stories__/ScrollableContainer.stories.js +151 -1
  421. package/src/components/SegmentControl/SegmentControlCell/SegmentControlCell.module.scss +25 -6
  422. package/src/components/SegmentControl/SegmentControlCell/SegmentControlCell.tsx +8 -5
  423. package/src/components/SegmentControl/SegmentControlList/SegmentControlList.module.scss +29 -6
  424. package/src/components/SegmentControl/SegmentControlList/SegmentControlList.tsx +12 -13
  425. package/src/components/SegmentControl/__stories__/SegmentControl.mdx +6 -0
  426. package/src/components/SegmentControl/__stories__/SegmentControl.stories.tsx +62 -0
@@ -1,13 +1,7 @@
1
1
  import React, { ReactNode, useEffect, useRef, useState } from 'react';
2
- import { css, jsx } from '@emotion/react';
2
+ import styled from '@emotion/styled';
3
3
 
4
4
  import { PropsWithChildren } from 'react';
5
- import { Interpolation, Theme } from '@emotion/react';
6
-
7
- type EmotionProps = {
8
- css?: Interpolation<Theme>;
9
- };
10
-
11
5
 
12
6
  type ContainerProps = PropsWithChildren<{
13
7
  fluid?: boolean;
@@ -18,7 +12,8 @@ type ContainerProps = PropsWithChildren<{
18
12
  marginBottom?: string | number;
19
13
  marginLeft?: string | number;
20
14
  className?: string;
21
- }> & EmotionProps;
15
+ debug?: boolean;
16
+ }>;
22
17
 
23
18
  interface RowProps {
24
19
  children: ReactNode;
@@ -31,6 +26,7 @@ interface RowProps {
31
26
  marginLeft?: string | number;
32
27
  fullHeight?: boolean;
33
28
  childrenMargin?: number;
29
+ debug?: boolean;
34
30
  [key: string]: any;
35
31
  }
36
32
 
@@ -43,6 +39,7 @@ interface ColProps {
43
39
  xl?: number;
44
40
  offset?: number;
45
41
  className?: string;
42
+ debug?: boolean;
46
43
  [key: string]: any;
47
44
  }
48
45
 
@@ -65,69 +62,58 @@ const getColumnWidth = (span: number): string => {
65
62
  return `${width}%`;
66
63
  };
67
64
 
68
- const GridContainer: React.FC<ContainerProps> = ({
69
- children,
70
- fluid = false,
71
- fullWidth = false,
72
- margin,
73
- marginTop,
74
- marginRight,
75
- marginBottom,
76
- marginLeft,
77
- className = '',
78
- ...props
79
- }) => {
80
- const marginTopValue = parseMarginValue(marginTop || margin);
81
- const marginRightValue = parseMarginValue(marginRight || margin);
82
- const marginBottomValue = parseMarginValue(marginBottom || margin);
83
- const marginLeftValue = parseMarginValue(marginLeft || margin);
84
-
85
- const containerStyles = css`
86
- box-sizing: border-box;
87
- width: ${fullWidth ? `calc(100% - ${marginLeftValue} - ${marginRightValue})` : '100%'};
88
- max-width: ${fluid ? 'none' : '1860px'};
89
- margin-top: ${marginTopValue};
90
- margin-right: ${marginRightValue};
91
- margin-bottom: ${marginBottomValue};
92
- margin-left: ${marginLeftValue};
93
- padding-left: 15px;
94
- padding-right: 15px;
95
- `;
96
-
65
+ const StyledContainer = styled.div<ContainerProps>`
66
+ box-sizing: border-box;
67
+ width: ${props => props.fullWidth ? `calc(100% - ${parseMarginValue(props.marginLeft || props.margin)} - ${parseMarginValue(props.marginRight || props.margin)})` : '100%'};
68
+ max-width: ${props => props.fluid ? 'none' : '1860px'};
69
+ margin-top: ${props => parseMarginValue(props.marginTop || props.margin)};
70
+ margin-right: ${props => parseMarginValue(props.marginRight || props.margin)};
71
+ margin-bottom: ${props => parseMarginValue(props.marginBottom || props.margin)};
72
+ margin-left: ${props => parseMarginValue(props.marginLeft || props.margin)};
73
+ padding-left: 15px;
74
+ padding-right: 15px;
75
+ ${props => props.debug && 'background-color: rgba(0,0,0,0.1);'}
76
+
77
+ @media (min-width: 1860px) {
78
+ margin-left: auto;
79
+ margin-right: auto;
80
+ }
81
+ `;
82
+
83
+ const GridContainer: React.FC<ContainerProps> = (props) => {
97
84
  return (
98
- <div css={containerStyles} className={`container ${className}`} {...props}>
99
- {children}
100
- </div>
85
+ <StyledContainer className={`container ${props.className || ''}`} {...props}>
86
+ {props.children}
87
+ </StyledContainer>
101
88
  );
102
89
  };
103
90
 
104
- const GridRow: React.FC<RowProps> = ({
105
- children,
106
- className = '',
107
- nogutter = false,
108
- margin,
109
- marginTop,
110
- marginRight,
111
- marginBottom,
112
- marginLeft,
113
- fullHeight = false,
114
- childrenMargin = 0,
115
- ...props
116
- }) => {
91
+ const StyledRow = styled.div<RowProps>`
92
+ display: flex;
93
+ flex-wrap: wrap;
94
+ margin-top: ${props => parseMarginValue(props.marginTop || props.margin)};
95
+ margin-right: ${props => props.nogutter ? parseMarginValue(props.marginRight || props.margin) : `calc(${parseMarginValue(props.marginRight || props.margin)} - 15px)`};
96
+ margin-bottom: ${props => parseMarginValue(props.marginBottom || props.margin)};
97
+ margin-left: ${props => props.nogutter ? parseMarginValue(props.marginLeft || props.margin) : `calc(${parseMarginValue(props.marginLeft || props.margin)} - 15px)`};
98
+ ${props => props.fullHeight && `
99
+ height: ${props.remainingHeight};
100
+ > * {
101
+ margin: ${parseMarginValue(props.marginBottom || props.margin)}px;
102
+ }
103
+ `}
104
+ ${props => props.debug && 'background-color: rgba(0,0,0,0.2);'}
105
+ `;
106
+
107
+ const GridRow: React.FC<RowProps> = (props) => {
117
108
  const rowRef = useRef<HTMLDivElement>(null);
118
109
  const [remainingHeight, setRemainingHeight] = useState('100vh');
119
110
 
120
- const marginTopValue = parseMarginValue(marginTop || margin);
121
- const marginRightValue = parseMarginValue(marginRight || margin);
122
- const marginBottomValue = parseMarginValue(marginBottom || margin);
123
- const marginLeftValue = parseMarginValue(marginLeft || margin);
124
-
125
111
  useEffect(() => {
126
- if (fullHeight && rowRef.current) {
112
+ if (props.fullHeight && rowRef.current) {
127
113
  const updateHeight = () => {
128
114
  const rowTop = rowRef.current?.getBoundingClientRect().top || 0;
129
115
  const windowHeight = window.innerHeight;
130
- const newRemainingHeight = windowHeight - rowTop - parseFloat(marginBottomValue);
116
+ const newRemainingHeight = windowHeight - rowTop - parseFloat(parseMarginValue(props.marginBottom || props.margin));
131
117
  setRemainingHeight(`${newRemainingHeight}px`);
132
118
  };
133
119
 
@@ -135,83 +121,69 @@ const GridRow: React.FC<RowProps> = ({
135
121
  window.addEventListener('resize', updateHeight);
136
122
  return () => window.removeEventListener('resize', updateHeight);
137
123
  }
138
- }, [fullHeight, marginBottomValue]);
139
-
140
- const rowStyles = css`
141
- display: flex;
142
- flex-wrap: wrap;
143
- margin-top: ${marginTopValue};
144
- margin-right: ${nogutter ? marginRightValue : `calc(${marginRightValue} - 15px)`};
145
- margin-bottom: ${marginBottomValue};
146
- margin-left: ${nogutter ? marginLeftValue : `calc(${marginLeftValue} - 15px)`};
147
- ${fullHeight && `
148
- height: ${remainingHeight};
149
- > * {
150
- margin: ${marginBottomValue}px;
151
- }
152
- `}
153
- `;
124
+ }, [props.fullHeight, props.margin, props.marginBottom]);
154
125
 
155
126
  return (
156
- <div ref={rowRef} css={rowStyles} className={`row ${className}`} {...props}>
157
- {children}
158
- </div>
127
+ <StyledRow ref={rowRef} className={`row ${props.className || ''}`} {...props} remainingHeight={remainingHeight}>
128
+ {props.children}
129
+ </StyledRow>
159
130
  );
160
131
  };
161
132
 
162
- const GridCol: React.FC<ColProps> = ({ xs, sm, md, lg, xl, children, className = '', ...props }) => {
163
- const columnStyles = css`
164
- flex: 0 0 auto;
165
- padding-right: 15px;
166
- padding-left: 15px;
167
-
168
- ${xs !== undefined && `
169
- flex-basis: ${getColumnWidth(xs)};
170
- max-width: ${getColumnWidth(xs)};
133
+ const StyledCol = styled.div<ColProps>`
134
+ flex: 0 0 auto;
135
+ padding-right: 15px;
136
+ padding-left: 15px;
137
+ ${props => props.debug && 'background-color: rgba(0,0,0,0.4);'}
138
+
139
+ ${props => props.xs !== undefined && `
140
+ flex-basis: ${getColumnWidth(props.xs)};
141
+ max-width: ${getColumnWidth(props.xs)};
142
+ `}
143
+
144
+ @media (min-width: ${breakpoints.sm}px) {
145
+ ${props => props.sm !== undefined && `
146
+ flex-basis: ${getColumnWidth(props.sm)};
147
+ max-width: ${getColumnWidth(props.sm)};
171
148
  `}
149
+ }
172
150
 
173
- @media (min-width: ${breakpoints.sm}px) {
174
- ${sm !== undefined && `
175
- flex-basis: ${getColumnWidth(sm)};
176
- max-width: ${getColumnWidth(sm)};
177
- `}
178
- }
179
-
180
- @media (min-width: ${breakpoints.md}px) {
181
- ${md !== undefined && `
182
- flex-basis: ${getColumnWidth(md)};
183
- max-width: ${getColumnWidth(md)};
184
- `}
185
- }
151
+ @media (min-width: ${breakpoints.md}px) {
152
+ ${props => props.md !== undefined && `
153
+ flex-basis: ${getColumnWidth(props.md)};
154
+ max-width: ${getColumnWidth(props.md)};
155
+ `}
156
+ }
186
157
 
187
- @media (min-width: ${breakpoints.lg}px) {
188
- ${lg !== undefined && `
189
- flex-basis: ${getColumnWidth(lg)};
190
- max-width: ${getColumnWidth(lg)};
191
- `}
192
- }
158
+ @media (min-width: ${breakpoints.lg}px) {
159
+ ${props => props.lg !== undefined && `
160
+ flex-basis: ${getColumnWidth(props.lg)};
161
+ max-width: ${getColumnWidth(props.lg)};
162
+ `}
163
+ }
193
164
 
194
- @media (min-width: ${breakpoints.xl}px) {
195
- ${xl !== undefined && `
196
- flex-basis: ${getColumnWidth(xl)};
197
- max-width: ${getColumnWidth(xl)};
198
- `}
199
- }
200
- `;
165
+ @media (min-width: ${breakpoints.xl}px) {
166
+ ${props => props.xl !== undefined && `
167
+ flex-basis: ${getColumnWidth(props.xl)};
168
+ max-width: ${getColumnWidth(props.xl)};
169
+ `}
170
+ }
171
+ `;
201
172
 
173
+ const GridCol: React.FC<ColProps> = (props) => {
202
174
  return (
203
- <div css={columnStyles} className={className} {...props}>
204
- {children}
205
- </div>
175
+ <StyledCol className={props.className} {...props}>
176
+ {props.children}
177
+ </StyledCol>
206
178
  );
207
179
  };
208
180
 
209
181
  const GridExample: React.FC = () => (
210
- <GridContainer fullWidth margin={8}>
211
- <GridRow margin={16}>
212
- <GridCol xs={12} md={6} lg={4}>Column 1</GridCol>
213
- <GridCol xs={12} md={6} lg={4}>Column 2</GridCol>
214
- <GridCol xs={12} md={12} lg={4}>Column 3</GridCol>
182
+ <GridContainer fullWidth margin={8} debug>
183
+ <GridRow margin={16} debug>
184
+ <GridCol xs={12} md={6} lg={4} debug>Column 1</GridCol>
185
+ <GridCol xs={12} md={6} lg={4} debug>Column 2</GridCol>
186
+ <GridCol xs={12} md={12} lg={4} debug>Column 3</GridCol>
215
187
  </GridRow>
216
188
  </GridContainer>
217
189
  );
@@ -16,18 +16,18 @@ We are using a custom grid component
16
16
  </Canvas>
17
17
 
18
18
  ```js
19
- import { GridCol, GridContainer, GridRow } from "../Grid";
19
+ import { GridCol, GridContainer, GridRow } from "../GridSystem";
20
20
 
21
21
  const GridLayout = {
22
22
  render: () => {
23
23
  return (
24
- <GridContainer fullWidth margin={8}>
25
- <GridRow margin={16}>
26
- <GridCol xs={12} md={6} lg={4}>Column 1</GridCol>
27
- <GridCol xs={12} md={6} lg={4}>Column 2</GridCol>
28
- <GridCol xs={12} md={12} lg={4}>Column 3</GridCol>
29
- </GridRow>
30
- </GridContainer>
24
+ <GridContainer fullWidth margin={8} debug>
25
+ <GridRow margin={16} debug>
26
+ <GridCol xs={12} md={6} lg={4} debug>Column 1</GridCol>
27
+ <GridCol xs={12} md={6} lg={4} debug>Column 2</GridCol>
28
+ <GridCol xs={12} md={12} lg={4} debug>Column 3</GridCol>
29
+ </GridRow>
30
+ </GridContainer>
31
31
  );
32
32
  },
33
33
 
@@ -10,13 +10,13 @@ export default meta;
10
10
  export const GridLayout = {
11
11
  render: () => {
12
12
  return (
13
- <GridContainer fullWidth margin={8}>
14
- <GridRow margin={16}>
15
- <GridCol xs={12} md={6} lg={4}>Column 1</GridCol>
16
- <GridCol xs={12} md={6} lg={4}>Column 2</GridCol>
17
- <GridCol xs={12} md={12} lg={4}>Column 3</GridCol>
18
- </GridRow>
19
- </GridContainer>
13
+ <GridContainer fullWidth margin={8} debug>
14
+ <GridRow margin={16} debug>
15
+ <GridCol xs={12} md={6} lg={4} debug>Column 1</GridCol>
16
+ <GridCol xs={12} md={6} lg={4} debug>Column 2</GridCol>
17
+ <GridCol xs={12} md={12} lg={4} debug>Column 3</GridCol>
18
+ </GridRow>
19
+ </GridContainer>
20
20
  );
21
21
  },
22
22
 
@@ -2,21 +2,15 @@ import cx from "classnames";
2
2
  import React, { useState } from "react";
3
3
  import { camelCase } from "lodash-es";
4
4
  import { getStyle } from "../../helpers/typesciptCssModulesHelper";
5
-
6
5
  import { PageHeaderType } from "./PageHeaderConstants";
7
-
8
6
  import { ComponentDefaultTestId, getTestId } from "../../tests/test-ids-utils";
9
7
  import { backwardCompatibilityForProperties } from "../../helpers/backwardCompatibilityForProperties";
10
-
11
8
  import Divider from "../Divider/Divider";
12
9
  import Flex from "../Flex/Flex";
13
10
  import TabList from "../Tabs/TabList/TabList";
14
11
  import Heading from "../Heading/Heading";
15
-
16
- import { Container, Row, Col } from "react-grid-system";
17
-
12
+ import { GridContainer } from "../GridSystem/GridSystem";
18
13
  import { VibeComponentProps, withStaticProps } from "../../types";
19
-
20
14
  import styles from "./PageHeader.module.scss";
21
15
  import Text from "../Text/Text";
22
16
  import InlineEdit from "../InlineEdit/InlineEdit";
@@ -84,19 +78,22 @@ const PageHeader: React.FC<PageHeaderProps> & {
84
78
  ]);
85
79
 
86
80
  return (
87
- <aside
88
- className={cx(
89
- styles.PageHeader,
90
- getStyle(styles, camelCase(`type-${type}`)),
91
- overrideClassName
92
- )}
93
- role="alert"
94
- data-testid={
95
- dataTestId ||
96
- getTestId(ComponentDefaultTestId.ATTENTION_BOX, id)
97
- }
98
- >
99
- <Container className-={styles.PageHeader}>
81
+ <aside className={cx(
82
+ styles.PageHeader,
83
+ getStyle(styles, camelCase(`type-${type}`)),
84
+ overrideClassName
85
+ )}
86
+ role="alert"
87
+ data-testid={
88
+ dataTestId ||
89
+ getTestId(ComponentDefaultTestId.ATTENTION_BOX, id)
90
+ }
91
+ >
92
+ <GridContainer
93
+ fullWidth
94
+ margin={8}
95
+ className-={styles.PageHeader}
96
+ >
100
97
  <Flex>{breadcrumb}</Flex>
101
98
  <Flex gap={5}>
102
99
  {secondaryTitle && (
@@ -173,7 +170,7 @@ const PageHeader: React.FC<PageHeaderProps> & {
173
170
  </Flex>
174
171
  </div>
175
172
  )}
176
- </Container>
173
+ </GridContainer>
177
174
  {divider ? (
178
175
  <Divider className={styles.PageHeaderDivider} />
179
176
  ) : (
@@ -18,4 +18,10 @@ import * as ScrollableContainerStories from "./ScrollableContainer.stories";
18
18
 
19
19
  ## Props
20
20
 
21
- <PropsTable />
21
+ <PropsTable />
22
+
23
+ ## Example in a container
24
+
25
+ <Canvas>
26
+ <Story of={ScrollableContainerStories.ContainerDemo} />
27
+ </Canvas>
@@ -1,6 +1,11 @@
1
1
  import ScrollableContainer from "../ScrollableContainer";
2
2
  import { createStoryMetaSettingsDecorator } from "../../../storybook";
3
-
3
+ import Box from '../../Box/Box';
4
+ import { GridContainer } from "../../GridSystem/GridSystem";
5
+ import Accordion from "../../Accordion/Accordion/Accordion";
6
+ import AccordionItem from "../../Accordion/AccordionItem/AccordionItem";
7
+ import Button from "../../Button/Button";
8
+ import { head } from "lodash";
4
9
  const metaSettings = createStoryMetaSettingsDecorator({
5
10
  component: ScrollableContainer,
6
11
  });
@@ -38,3 +43,148 @@ export const Overview = {
38
43
  }
39
44
  }
40
45
  };
46
+
47
+
48
+ export const ContainerDemo = {
49
+ render: () => {
50
+ return (
51
+ <GridContainer fullWidth marginBottom={20} marginTop={0} margin={0}>
52
+ <Box
53
+ shadow={Box.shadows.XS}
54
+ rounded={Box.roundeds.MEDIUM}
55
+ padding={Box.paddings.SMALL}
56
+ border={Box.borders.DEFAULT}
57
+ style={{ maxHeight: "500px"}}
58
+ className={"box-pageheader"}
59
+ backgroundColor={Box.backgroundColors.PRIMARY_BACKGROUND_COLOR}
60
+ >
61
+ <ScrollableContainer allowVerticalScrolling>
62
+ <div style={{ maxHeight: "500px"}}>
63
+ <Button size={Button.sizes.MEDIUM}>Medium</Button>
64
+ <Accordion
65
+ className="monday-storybook-accordion_small-wrapepr"
66
+ defaultIndex={[1]}
67
+ >
68
+ <AccordionItem title="Notifications">
69
+ <div className="monday-storybook-accordion_small-box" />
70
+ </AccordionItem>
71
+ <AccordionItem title="Setting">
72
+ <div className="monday-storybook-accordion_small-box" />
73
+ </AccordionItem>
74
+ <AccordionItem title="Info">
75
+ <div className="monday-storybook-accordion_small-box" />
76
+ </AccordionItem>
77
+ <AccordionItem title="Profile">
78
+ <div className="monday-storybook-accordion_small-box" />
79
+ </AccordionItem>
80
+ <AccordionItem title="Permissions">
81
+ <div className="monday-storybook-accordion_small-box" />
82
+ </AccordionItem>
83
+ <AccordionItem title="Security">
84
+ <div className="monday-storybook-accordion_small-box" />
85
+ </AccordionItem>
86
+ <AccordionItem title="Connectivity">
87
+ <div className="monday-storybook-accordion_small-box" />
88
+ </AccordionItem>
89
+ <AccordionItem title="Integration">
90
+ <div className="monday-storybook-accordion_small-box" />
91
+ </AccordionItem>
92
+ <AccordionItem title="Assets">
93
+ <div className="monday-storybook-accordion_small-box" />
94
+ </AccordionItem>
95
+ </Accordion>
96
+
97
+ <p>
98
+ Lorem ipsum dolor sit amet, consectetur adipiscing
99
+ elit. Donec vel turpis vitae nulla mollis cursus.
100
+ Integer nec dapibus risus. Curabitur vel dolor eu
101
+ ligula feugiat malesuada. Phasellus bibendum dui in
102
+ velit vehicula, a tempor massa vestibulum. Duis ut
103
+ eros nec libero dignissim convallis. Fusce gravida
104
+ nunc ut erat scelerisque, a pharetra nisi tempus.
105
+ Sed ac bibendum libero. Nulla facilisi.
106
+ </p>
107
+ <p>
108
+ Lorem ipsum dolor sit amet, consectetur adipiscing
109
+ elit. Donec vel turpis vitae nulla mollis cursus.
110
+ Integer nec dapibus risus. Curabitur vel dolor eu
111
+ ligula feugiat malesuada. Phasellus bibendum dui in
112
+ velit vehicula, a tempor massa vestibulum. Duis ut
113
+ eros nec libero dignissim convallis. Fusce gravida
114
+ nunc ut erat scelerisque, a pharetra nisi tempus.
115
+ Sed ac bibendum libero. Nulla facilisi.
116
+ </p>
117
+ <p>
118
+ Lorem ipsum dolor sit amet, consectetur adipiscing
119
+ elit. Donec vel turpis vitae nulla mollis cursus.
120
+ Integer nec dapibus risus. Curabitur vel dolor eu
121
+ ligula feugiat malesuada. Phasellus bibendum dui in
122
+ velit vehicula, a tempor massa vestibulum. Duis ut
123
+ eros nec libero dignissim convallis. Fusce gravida
124
+ nunc ut erat scelerisque, a pharetra nisi tempus.
125
+ Sed ac bibendum libero. Nulla facilisi.
126
+ </p>
127
+ <p>
128
+ Lorem ipsum dolor sit amet, consectetur adipiscing
129
+ elit. Donec vel turpis vitae nulla mollis cursus.
130
+ Integer nec dapibus risus. Curabitur vel dolor eu
131
+ ligula feugiat malesuada. Phasellus bibendum dui in
132
+ velit vehicula, a tempor massa vestibulum. Duis ut
133
+ eros nec libero dignissim convallis. Fusce gravida
134
+ nunc ut erat scelerisque, a pharetra nisi tempus.
135
+ Sed ac bibendum libero. Nulla facilisi.
136
+ </p>
137
+ <p>
138
+ Lorem ipsum dolor sit amet, consectetur adipiscing
139
+ elit. Donec vel turpis vitae nulla mollis cursus.
140
+ Integer nec dapibus risus. Curabitur vel dolor eu
141
+ ligula feugiat malesuada. Phasellus bibendum dui in
142
+ velit vehicula, a tempor massa vestibulum. Duis ut
143
+ eros nec libero dignissim convallis. Fusce gravida
144
+ nunc ut erat scelerisque, a pharetra nisi tempus.
145
+ Sed ac bibendum libero. Nulla facilisi.
146
+ </p>
147
+ <p>
148
+ Lorem ipsum dolor sit amet, consectetur adipiscing
149
+ elit. Donec vel turpis vitae nulla mollis cursus.
150
+ Integer nec dapibus risus. Curabitur vel dolor eu
151
+ ligula feugiat malesuada. Phasellus bibendum dui in
152
+ velit vehicula, a tempor massa vestibulum. Duis ut
153
+ eros nec libero dignissim convallis. Fusce gravida
154
+ nunc ut erat scelerisque, a pharetra nisi tempus.
155
+ Sed ac bibendum libero. Nulla facilisi.
156
+ </p>
157
+ <p>
158
+ Vivamus et orci et purus elementum posuere.
159
+ Suspendisse ac justo ac sapien suscipit auctor.
160
+ Integer commodo convallis orci, a elementum libero.
161
+ Vivamus nec tristique nisi. Vestibulum ut sem a mi
162
+ sagittis gravida. Donec id orci sed justo tincidunt
163
+ suscipit sit amet in dui. Praesent vitae dictum leo,
164
+ sed facilisis augue.
165
+ </p>
166
+ <p>
167
+ Vivamus et orci et purus elementum posuere.
168
+ Suspendisse ac justo ac sapien suscipit auctor.
169
+ Integer commodo convallis orci, a elementum libero.
170
+ Vivamus nec tristique nisi. Vestibulum ut sem a mi
171
+ sagittis gravida. Donec id orci sed justo tincidunt
172
+ suscipit sit amet in dui. Praesent vitae dictum leo,
173
+ sed facilisis augue.
174
+ </p>
175
+ </div>
176
+ </ScrollableContainer>
177
+ </Box>
178
+
179
+ </GridContainer>
180
+ );
181
+ },
182
+ name: "ContainerDemo",
183
+ parameters: {
184
+ docs: {
185
+ story: {
186
+ height: "200px"
187
+ }
188
+ }
189
+ }
190
+ };
@@ -1,9 +1,9 @@
1
1
  @import "~@heliux-org/ui-style/dist/mixins";
2
2
  @import "../../../styles/typography";
3
3
  @import "../../../styles/states";
4
+
4
5
  .segmentControlCell {
5
6
  cursor: pointer;
6
- padding: var(--spacing-xs) var(--spacing-medium);
7
7
  text-align: center;
8
8
  transition: background-color 0.3s;
9
9
  color: var(--text-secondary);
@@ -20,16 +20,35 @@
20
20
  box-shadow: 0px 1px 1px 0px #00000014;
21
21
  }
22
22
 
23
- &.stretched {
24
- flex: 1;
25
- }
26
-
27
23
  &:not(.active):hover {
28
- background-color: var(--surface-level-200);
24
+ background-color: var(--surface-level-300);
25
+ color: var(--text-primary);
29
26
  }
30
27
 
31
28
  &.disabled {
32
29
  cursor: not-allowed;
33
30
  opacity: 0.5;
34
31
  }
32
+
33
+ &.stretched {
34
+ flex: 1;
35
+ }
36
+ }
37
+
38
+ .small {
39
+ padding: 0 var(--spacing-xs);
40
+ height: 20px;
41
+ font-size: 12px;
35
42
  }
43
+
44
+ .medium {
45
+ padding: 0 var(--spacing-small);
46
+ height: 28px;
47
+ font-size: 14px;
48
+ }
49
+
50
+ .large {
51
+ padding: 0 var(--spacing-medium);
52
+ height: 36px;
53
+ font-size: 16px;
54
+ }
@@ -3,14 +3,16 @@ import cx from "classnames";
3
3
  import styles from "./SegmentControlCell.module.scss";
4
4
  import { SubIcon } from "../../../types";
5
5
  import Icon from "../../Icon/Icon";
6
+ import { SegmentControlSize } from "../SegmentControlList/SegmentControlList";
6
7
 
7
8
  export interface SegmentControlCellProps {
8
9
  value: number;
9
10
  active?: boolean;
10
11
  onClick?: (value: number) => void;
11
- stretched?: boolean;
12
12
  disabled?: boolean;
13
13
  icon?: SubIcon;
14
+ size?: SegmentControlSize;
15
+ stretched?: boolean;
14
16
  children?: React.ReactNode;
15
17
  }
16
18
 
@@ -18,9 +20,10 @@ const SegmentControlCell: FC<SegmentControlCellProps> = ({
18
20
  value,
19
21
  active = false,
20
22
  onClick,
21
- stretched = false,
22
23
  disabled = false,
23
24
  icon,
25
+ size = 'medium',
26
+ stretched = false,
24
27
  children,
25
28
  }) => {
26
29
  const handleClick = () => {
@@ -29,10 +32,10 @@ const SegmentControlCell: FC<SegmentControlCellProps> = ({
29
32
 
30
33
  return (
31
34
  <li
32
- className={cx(styles.segmentControlCell, {
35
+ className={cx(styles.segmentControlCell, styles[size], {
33
36
  [styles.active]: active,
34
- [styles.stretched]: stretched,
35
37
  [styles.disabled]: disabled,
38
+ [styles.stretched]: stretched,
36
39
  })}
37
40
  role="tab"
38
41
  aria-selected={active}
@@ -45,4 +48,4 @@ const SegmentControlCell: FC<SegmentControlCellProps> = ({
45
48
  );
46
49
  };
47
50
 
48
- export default SegmentControlCell;
51
+ export default SegmentControlCell;