@strapi/design-system 1.4.0-beta.0 → 1.4.0-beta.2

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 (307) hide show
  1. package/dist/Accordion/Accordion.cjs +8 -8
  2. package/dist/Accordion/Accordion.js +11 -12
  3. package/dist/Accordion/AccordionContent.cjs +1 -1
  4. package/dist/Accordion/AccordionContent.js +37 -17
  5. package/dist/Accordion/AccordionToggle.cjs +6 -6
  6. package/dist/Accordion/AccordionToggle.js +96 -75
  7. package/dist/Alert/Alert.cjs +12 -12
  8. package/dist/Alert/Alert.js +102 -83
  9. package/dist/Badge/Badge.cjs +4 -1
  10. package/dist/Badge/Badge.js +56 -26
  11. package/dist/BaseButton/BaseButton.cjs +3 -3
  12. package/dist/BaseButton/BaseButton.js +42 -20
  13. package/dist/BaseCheckbox/BaseCheckbox.cjs +6 -6
  14. package/dist/BaseCheckbox/BaseCheckbox.js +56 -36
  15. package/dist/BaseLink/BaseLink.cjs +2 -2
  16. package/dist/BaseLink/BaseLink.js +43 -21
  17. package/dist/BaseRadio/BaseRadio.cjs +8 -8
  18. package/dist/BaseRadio/BaseRadio.js +51 -31
  19. package/dist/BaseRadio/RadioGroup.cjs +1 -1
  20. package/dist/BaseRadio/RadioGroup.js +44 -24
  21. package/dist/Box/BoxProps.cjs +1 -1
  22. package/dist/Box/BoxProps.js +19 -10
  23. package/dist/Breadcrumbs/Breadcrumbs.cjs +4 -4
  24. package/dist/Breadcrumbs/Breadcrumbs.js +50 -29
  25. package/dist/Button/Button.cjs +14 -14
  26. package/dist/Button/Button.js +73 -53
  27. package/dist/Card/Card.cjs +1 -1
  28. package/dist/Card/Card.js +37 -17
  29. package/dist/Card/CardAsset.cjs +4 -4
  30. package/dist/Card/CardAsset.js +42 -19
  31. package/dist/Card/CardBadge.cjs +3 -3
  32. package/dist/Card/CardBadge.js +18 -9
  33. package/dist/Card/CardBody.cjs +1 -1
  34. package/dist/Card/CardBody.js +19 -8
  35. package/dist/Card/CardCheckbox.cjs +1 -1
  36. package/dist/Card/CardCheckbox.js +22 -12
  37. package/dist/Card/CardContent.cjs +2 -2
  38. package/dist/Card/CardContent.js +32 -11
  39. package/dist/Card/CardHeader.cjs +2 -2
  40. package/dist/Card/CardHeader.js +19 -9
  41. package/dist/Card/CardTimer.cjs +2 -2
  42. package/dist/Card/CardTimer.js +42 -20
  43. package/dist/Card/CardTitle.cjs +1 -1
  44. package/dist/Card/CardTitle.js +27 -16
  45. package/dist/CarouselInput/Carousel.cjs +6 -6
  46. package/dist/CarouselInput/Carousel.js +107 -77
  47. package/dist/CarouselInput/CarouselActions.cjs +1 -1
  48. package/dist/CarouselInput/CarouselActions.js +17 -7
  49. package/dist/CarouselInput/CarouselImage.cjs +3 -3
  50. package/dist/CarouselInput/CarouselImage.js +38 -26
  51. package/dist/CarouselInput/CarouselInput.cjs +1 -1
  52. package/dist/CarouselInput/CarouselInput.js +84 -49
  53. package/dist/CarouselInput/CarouselSlide.cjs +2 -2
  54. package/dist/CarouselInput/CarouselSlide.js +42 -20
  55. package/dist/Checkbox/Checkbox.cjs +2 -2
  56. package/dist/Checkbox/Checkbox.js +63 -44
  57. package/dist/Combobox/Combobox.cjs +1 -1
  58. package/dist/Combobox/Combobox.js +262 -194
  59. package/dist/Combobox/ComboboxList.cjs +1 -1
  60. package/dist/Combobox/ComboboxList.js +5 -5
  61. package/dist/Combobox/ComboboxOption.cjs +1 -1
  62. package/dist/Combobox/ComboboxOption.js +47 -25
  63. package/dist/Combobox/components.cjs +2 -2
  64. package/dist/Combobox/components.js +1 -1
  65. package/dist/Combobox/utils.cjs +1 -1
  66. package/dist/Combobox/utils.js +21 -21
  67. package/dist/DatePicker/DatePicker.cjs +1 -1
  68. package/dist/DatePicker/DatePicker.js +110 -80
  69. package/dist/DatePicker/DatePickerCalendar.cjs +1 -1
  70. package/dist/DatePicker/DatePickerCalendar.js +18 -13
  71. package/dist/DatePicker/DatePickerTd.cjs +4 -4
  72. package/dist/DatePicker/DatePickerTd.js +42 -23
  73. package/dist/DatePicker/DatePickerTh.cjs +3 -3
  74. package/dist/DatePicker/DatePickerTh.js +44 -23
  75. package/dist/DatePicker/utils/getYears.cjs +1 -1
  76. package/dist/DatePicker/utils/getYears.js +7 -6
  77. package/dist/DateTimePicker/DateTimePicker.cjs +1 -1
  78. package/dist/DateTimePicker/DateTimePicker.js +124 -89
  79. package/dist/DateTimePicker/DateTimePickerProps.cjs +1 -1
  80. package/dist/DateTimePicker/DateTimePickerProps.js +19 -10
  81. package/dist/Dialog/Dialog.cjs +5 -5
  82. package/dist/Dialog/Dialog.js +58 -39
  83. package/dist/Dialog/DialogBody.cjs +2 -2
  84. package/dist/Dialog/DialogBody.js +14 -11
  85. package/dist/DismissibleLayer/DismissibleLayer.cjs +1 -1
  86. package/dist/DismissibleLayer/DismissibleLayer.js +22 -27
  87. package/dist/Divider/Divider.cjs +2 -2
  88. package/dist/Divider/Divider.js +38 -15
  89. package/dist/Field/Field.cjs +1 -1
  90. package/dist/Field/Field.js +38 -19
  91. package/dist/Field/FieldAction.cjs +2 -2
  92. package/dist/Field/FieldAction.js +35 -13
  93. package/dist/Field/FieldInput.cjs +6 -6
  94. package/dist/Field/FieldInput.js +67 -47
  95. package/dist/Field/FieldLabel.cjs +3 -3
  96. package/dist/Field/FieldLabel.js +45 -25
  97. package/dist/Flex/FlexProps.cjs +1 -1
  98. package/dist/Flex/FlexProps.js +20 -10
  99. package/dist/FocusTrap/ExampleComponent.cjs +1 -1
  100. package/dist/FocusTrap/ExampleComponent.js +3 -2
  101. package/dist/FocusTrap/FocusTrap.cjs +1 -1
  102. package/dist/FocusTrap/FocusTrap.js +56 -35
  103. package/dist/Grid/Grid.cjs +3 -3
  104. package/dist/Grid/Grid.js +42 -20
  105. package/dist/Grid/GridItem.cjs +2 -2
  106. package/dist/Grid/GridItem.js +41 -22
  107. package/dist/Icon/Icon.cjs +2 -2
  108. package/dist/Icon/Icon.js +27 -17
  109. package/dist/IconButton/IconButton.cjs +4 -4
  110. package/dist/IconButton/IconButton.js +68 -49
  111. package/dist/KeyboardNavigable/KeyboardNavigable.cjs +1 -1
  112. package/dist/KeyboardNavigable/KeyboardNavigable.js +58 -38
  113. package/dist/Layout/HeaderLayout.cjs +2 -2
  114. package/dist/Layout/HeaderLayout.js +96 -78
  115. package/dist/Link/Link.cjs +6 -6
  116. package/dist/Link/Link.js +59 -37
  117. package/dist/LinkButton/LinkButton.cjs +10 -10
  118. package/dist/LinkButton/LinkButton.js +71 -49
  119. package/dist/Loader/Loader.cjs +4 -4
  120. package/dist/Loader/Loader.js +47 -25
  121. package/dist/Main/Main.cjs +2 -2
  122. package/dist/Main/Main.js +35 -15
  123. package/dist/MainNav/MainNav.cjs +2 -2
  124. package/dist/MainNav/MainNav.js +39 -17
  125. package/dist/MainNav/NavCondense.cjs +3 -3
  126. package/dist/MainNav/NavCondense.js +40 -20
  127. package/dist/MainNav/NavLink.cjs +9 -9
  128. package/dist/MainNav/NavLink.js +72 -53
  129. package/dist/MainNav/NavSection.cjs +1 -1
  130. package/dist/MainNav/NavSection.js +67 -46
  131. package/dist/MainNav/NavSections.cjs +1 -1
  132. package/dist/MainNav/NavSections.js +40 -18
  133. package/dist/MainNav/NavUser.cjs +2 -2
  134. package/dist/MainNav/NavUser.js +51 -31
  135. package/dist/ModalLayout/ModalBody.cjs +2 -2
  136. package/dist/ModalLayout/ModalBody.js +19 -9
  137. package/dist/ModalLayout/ModalLayout.cjs +3 -3
  138. package/dist/ModalLayout/ModalLayout.js +52 -30
  139. package/dist/NumberInput/NumberInput.cjs +6 -6
  140. package/dist/NumberInput/NumberInput.js +149 -117
  141. package/dist/Pagination/components.cjs +7 -7
  142. package/dist/Pagination/components.js +88 -65
  143. package/dist/Popover/Popover.cjs +3 -3
  144. package/dist/Popover/Popover.js +93 -66
  145. package/dist/Portal/Portal.cjs +1 -1
  146. package/dist/Portal/Portal.js +12 -11
  147. package/dist/ProgressBar/ProgressBar.cjs +2 -2
  148. package/dist/ProgressBar/ProgressBar.js +49 -27
  149. package/dist/Radio/Radio.cjs +2 -2
  150. package/dist/Radio/Radio.js +40 -19
  151. package/dist/RawTable/RawCell.cjs +1 -1
  152. package/dist/RawTable/RawCell.js +97 -62
  153. package/dist/RawTable/RawTable.cjs +1 -1
  154. package/dist/RawTable/RawTable.js +67 -46
  155. package/dist/RawTable/RawTableContext.cjs +1 -1
  156. package/dist/RawTable/RawTableContext.js +1 -1
  157. package/dist/RawTable/RawTbody.cjs +1 -1
  158. package/dist/RawTable/RawTbody.js +30 -11
  159. package/dist/RawTable/RawThead.cjs +1 -1
  160. package/dist/RawTable/RawThead.js +29 -10
  161. package/dist/RawTable/RawTr.cjs +1 -1
  162. package/dist/RawTable/RawTr.js +34 -14
  163. package/dist/Searchbar/SearchForm.cjs +1 -1
  164. package/dist/Searchbar/SearchForm.js +16 -5
  165. package/dist/Searchbar/Searchbar.cjs +7 -7
  166. package/dist/Searchbar/Searchbar.js +65 -45
  167. package/dist/Select/MultiSelectNested.cjs +1 -1
  168. package/dist/Select/MultiSelectNested.js +45 -23
  169. package/dist/Select/OptGroup.cjs +1 -1
  170. package/dist/Select/OptGroup.js +35 -15
  171. package/dist/Select/Option.cjs +7 -7
  172. package/dist/Select/Option.js +57 -37
  173. package/dist/Select/Select.cjs +2 -2
  174. package/dist/Select/Select.js +187 -148
  175. package/dist/Select/SelectButton.cjs +2 -2
  176. package/dist/Select/SelectButton.js +53 -33
  177. package/dist/SimpleMenu/SimpleMenu.cjs +7 -7
  178. package/dist/SimpleMenu/SimpleMenu.js +143 -102
  179. package/dist/Stack/Stack.cjs +3 -3
  180. package/dist/Stack/Stack.js +50 -29
  181. package/dist/Status/Status.cjs +4 -4
  182. package/dist/Status/Status.js +50 -30
  183. package/dist/SubNav/SubNav.cjs +3 -3
  184. package/dist/SubNav/SubNav.js +37 -15
  185. package/dist/SubNav/SubNavHeader.cjs +2 -2
  186. package/dist/SubNav/SubNavHeader.js +44 -43
  187. package/dist/SubNav/SubNavLink.cjs +6 -6
  188. package/dist/SubNav/SubNavLink.js +61 -40
  189. package/dist/SubNav/SubNavLinkSection.cjs +4 -4
  190. package/dist/SubNav/SubNavLinkSection.js +8 -7
  191. package/dist/SubNav/SubNavSection.cjs +2 -2
  192. package/dist/SubNav/SubNavSection.js +11 -10
  193. package/dist/SubNav/SubNavSectionLabel.cjs +1 -1
  194. package/dist/SubNav/SubNavSectionLabel.js +1 -1
  195. package/dist/SubNav/SubNavSections.cjs +1 -1
  196. package/dist/SubNav/SubNavSections.js +39 -17
  197. package/dist/Switch/Switch.cjs +5 -5
  198. package/dist/Switch/Switch.js +57 -35
  199. package/dist/Table/Cell.cjs +3 -3
  200. package/dist/Table/Cell.js +40 -20
  201. package/dist/Table/TFooter.cjs +3 -3
  202. package/dist/Table/TFooter.js +50 -28
  203. package/dist/Table/Table.cjs +5 -5
  204. package/dist/Table/Table.js +59 -36
  205. package/dist/Table/Tbody.cjs +2 -2
  206. package/dist/Table/Tbody.js +17 -8
  207. package/dist/Table/Thead.cjs +2 -2
  208. package/dist/Table/Thead.js +17 -8
  209. package/dist/Table/Tr.cjs +2 -2
  210. package/dist/Table/Tr.js +17 -8
  211. package/dist/Tabs/TabGroup.cjs +1 -1
  212. package/dist/Tabs/TabGroup.js +46 -27
  213. package/dist/Tabs/TabPanels.cjs +1 -1
  214. package/dist/Tabs/TabPanels.js +43 -24
  215. package/dist/Tabs/Tabs.cjs +2 -2
  216. package/dist/Tabs/Tabs.js +112 -94
  217. package/dist/Tabs/useTabsFocus.cjs +1 -1
  218. package/dist/Tabs/useTabsFocus.js +12 -11
  219. package/dist/Tag/Tag.cjs +4 -4
  220. package/dist/Tag/Tag.js +50 -27
  221. package/dist/TextButton/TextButton.cjs +6 -6
  222. package/dist/TextButton/TextButton.js +59 -39
  223. package/dist/TextInput/TextInput.cjs +1 -1
  224. package/dist/TextInput/TextInput.js +69 -49
  225. package/dist/Textarea/Textarea.cjs +3 -3
  226. package/dist/Textarea/Textarea.js +63 -43
  227. package/dist/Textarea/TextareaInput.cjs +4 -4
  228. package/dist/Textarea/TextareaInput.js +49 -29
  229. package/dist/TimePicker/TimePicker.cjs +3 -3
  230. package/dist/TimePicker/TimePicker.js +93 -60
  231. package/dist/ToggleCheckbox/ToggleCheckbox.cjs +8 -8
  232. package/dist/ToggleCheckbox/ToggleCheckbox.js +75 -53
  233. package/dist/ToggleInput/ToggleInput.cjs +3 -3
  234. package/dist/ToggleInput/ToggleInput.js +98 -66
  235. package/dist/Tooltip/Tooltip.cjs +2 -2
  236. package/dist/Tooltip/Tooltip.js +57 -38
  237. package/dist/Tooltip/hooks/useTooltipLayout.cjs +1 -1
  238. package/dist/Tooltip/hooks/useTooltipLayout.js +9 -9
  239. package/dist/Typography/TypographyProps.cjs +1 -1
  240. package/dist/Typography/TypographyProps.js +22 -13
  241. package/dist/helpers/getDefaultLocale.cjs +1 -1
  242. package/dist/helpers/getDefaultLocale.js +1 -1
  243. package/dist/helpers/handleResponsiveValues.cjs +5 -5
  244. package/dist/helpers/handleResponsiveValues.js +14 -14
  245. package/dist/helpers/useIntersection.cjs +1 -1
  246. package/dist/helpers/useIntersection.js +13 -11
  247. package/dist/helpers/useResizeObserver.cjs +1 -1
  248. package/dist/helpers/useResizeObserver.js +10 -8
  249. package/dist/hooks/useControllableState.cjs +1 -0
  250. package/dist/hooks/useControllableState.js +25 -0
  251. package/dist/index.cjs +1 -1
  252. package/dist/index.js +285 -284
  253. package/dist/themes/ColorButton.cjs +2 -2
  254. package/dist/themes/ColorButton.js +4 -4
  255. package/dist/themes/darkTheme/index.cjs +1 -1
  256. package/dist/themes/darkTheme/index.js +18 -8
  257. package/dist/themes/extendTheme.cjs +5 -5
  258. package/dist/themes/extendTheme.js +30 -19
  259. package/dist/themes/lightTheme/index.cjs +1 -1
  260. package/dist/themes/lightTheme/index.js +18 -8
  261. package/dist/themes/sizes.cjs +1 -1
  262. package/dist/themes/sizes.js +4 -0
  263. package/dist/v2/Breadcrumbs/Breadcrumbs.cjs +2 -2
  264. package/dist/v2/Breadcrumbs/Breadcrumbs.js +43 -23
  265. package/dist/v2/Breadcrumbs/Crumb.cjs +1 -1
  266. package/dist/v2/Breadcrumbs/Crumb.js +44 -22
  267. package/dist/v2/Breadcrumbs/CrumbLink.cjs +2 -2
  268. package/dist/v2/Breadcrumbs/CrumbLink.js +35 -14
  269. package/dist/v2/Breadcrumbs/CrumbSimpleMenu.cjs +2 -2
  270. package/dist/v2/Breadcrumbs/CrumbSimpleMenu.js +41 -19
  271. package/dist/v2/Link/Link.cjs +5 -5
  272. package/dist/v2/Link/Link.js +64 -42
  273. package/dist/v2/LinkButton/LinkButton.cjs +10 -10
  274. package/dist/v2/LinkButton/LinkButton.js +77 -53
  275. package/dist/v2/MainNav/MainNav.cjs +2 -2
  276. package/dist/v2/MainNav/MainNav.js +39 -17
  277. package/dist/v2/MainNav/NavBrand.cjs +3 -3
  278. package/dist/v2/MainNav/NavBrand.js +78 -57
  279. package/dist/v2/MainNav/NavCondense.cjs +3 -3
  280. package/dist/v2/MainNav/NavCondense.js +40 -20
  281. package/dist/v2/MainNav/NavLink.cjs +9 -9
  282. package/dist/v2/MainNav/NavLink.js +77 -56
  283. package/dist/v2/MainNav/NavSection.cjs +1 -1
  284. package/dist/v2/MainNav/NavSection.js +67 -46
  285. package/dist/v2/MainNav/NavSections.cjs +1 -1
  286. package/dist/v2/MainNav/NavSections.js +40 -18
  287. package/dist/v2/MainNav/NavUser.cjs +2 -2
  288. package/dist/v2/MainNav/NavUser.js +51 -31
  289. package/dist/v2/Pagination/components.cjs +7 -7
  290. package/dist/v2/Pagination/components.js +89 -65
  291. package/dist/v2/SimpleMenu/SimpleMenu.cjs +7 -7
  292. package/dist/v2/SimpleMenu/SimpleMenu.js +155 -120
  293. package/dist/v2/SubNav/SubNav.cjs +3 -3
  294. package/dist/v2/SubNav/SubNav.js +37 -15
  295. package/dist/v2/SubNav/SubNavHeader.cjs +2 -2
  296. package/dist/v2/SubNav/SubNavHeader.js +44 -43
  297. package/dist/v2/SubNav/SubNavLink.cjs +6 -6
  298. package/dist/v2/SubNav/SubNavLink.js +64 -43
  299. package/dist/v2/SubNav/SubNavLinkSection.cjs +4 -4
  300. package/dist/v2/SubNav/SubNavLinkSection.js +8 -8
  301. package/dist/v2/SubNav/SubNavSection.cjs +2 -2
  302. package/dist/v2/SubNav/SubNavSection.js +1 -1
  303. package/dist/v2/SubNav/SubNavSectionLabel.cjs +1 -1
  304. package/dist/v2/SubNav/SubNavSectionLabel.js +1 -1
  305. package/dist/v2/SubNav/SubNavSections.cjs +1 -1
  306. package/dist/v2/SubNav/SubNavSections.js +39 -17
  307. package/package.json +8 -15
@@ -1,12 +1,32 @@
1
- import r from "react";
2
- import o from "prop-types";
3
- import i from "styled-components";
4
- import g from "@strapi/icons/Dot";
5
- import { Box as l } from "../../Box/Box.js";
6
- import { Typography as s } from "../../Typography/Typography.js";
7
- import { Flex as a } from "../../Flex/Flex.js";
8
- import { BaseLink as y } from "../../BaseLink/BaseLink.js";
9
- const $ = i(l)`
1
+ var w = Object.defineProperty;
2
+ var n = Object.getOwnPropertySymbols;
3
+ var d = Object.prototype.hasOwnProperty, u = Object.prototype.propertyIsEnumerable;
4
+ var m = (e, r, o) => r in e ? w(e, r, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[r] = o, f = (e, r) => {
5
+ for (var o in r || (r = {}))
6
+ d.call(r, o) && m(e, o, r[o]);
7
+ if (n)
8
+ for (var o of n(r))
9
+ u.call(r, o) && m(e, o, r[o]);
10
+ return e;
11
+ };
12
+ var g = (e, r) => {
13
+ var o = {};
14
+ for (var t in e)
15
+ d.call(e, t) && r.indexOf(t) < 0 && (o[t] = e[t]);
16
+ if (e != null && n)
17
+ for (var t of n(e))
18
+ r.indexOf(t) < 0 && u.call(e, t) && (o[t] = e[t]);
19
+ return o;
20
+ };
21
+ import l from "react";
22
+ import i from "prop-types";
23
+ import s from "styled-components";
24
+ import x from "@strapi/icons/Dot";
25
+ import { Box as a } from "../../Box/Box.js";
26
+ import { Typography as b } from "../../Typography/Typography.js";
27
+ import { Flex as y } from "../../Flex/Flex.js";
28
+ import { BaseLink as S } from "../../BaseLink/BaseLink.js";
29
+ const k = s(a)`
10
30
  display: flex;
11
31
  align-items: center;
12
32
  justify-content: space-between;
@@ -23,7 +43,7 @@ const $ = i(l)`
23
43
  svg > * {
24
44
  fill: ${e.colors.primary700};
25
45
  }
26
- ${s} {
46
+ ${b} {
27
47
  color: ${e.colors.primary700};
28
48
  font-weight: 500;
29
49
  }
@@ -33,51 +53,52 @@ const $ = i(l)`
33
53
  &:focus-visible {
34
54
  outline-offset: -2px;
35
55
  }
36
- `, p = i(g)`
56
+ `, $ = s(x)`
37
57
  width: ${12 / 16}rem;
38
58
  height: ${4 / 16}rem;
39
59
  * {
40
- fill: ${({ theme: e, $active: t }) => t ? e.colors.primary600 : e.colors.neutral600};
60
+ fill: ${({ theme: e, $active: r }) => r ? e.colors.primary600 : e.colors.neutral600};
41
61
  }
42
- `, b = i.div`
62
+ `, B = s.div`
43
63
  svg {
44
64
  height: ${12 / 16}rem;
45
65
  width: ${12 / 16}rem;
46
66
  }
47
- `, n = r.forwardRef(({ children: e, icon: t, withBullet: c, as: m, isSubSectionChild: d, ...u }, f) => /* @__PURE__ */ r.createElement($, {
48
- as: m,
49
- icon: t,
50
- background: "neutral100",
51
- paddingLeft: d ? 9 : 7,
52
- paddingBottom: 2,
53
- paddingTop: 2,
54
- ref: f,
55
- ...u
56
- }, /* @__PURE__ */ r.createElement(a, null, t ? /* @__PURE__ */ r.createElement(b, null, t) : /* @__PURE__ */ r.createElement(p, null), /* @__PURE__ */ r.createElement(l, {
57
- paddingLeft: 2
58
- }, /* @__PURE__ */ r.createElement(s, {
59
- as: "span"
60
- }, e))), c && /* @__PURE__ */ r.createElement(l, {
61
- as: a,
62
- paddingRight: 4
63
- }, /* @__PURE__ */ r.createElement(p, {
64
- $active: !0
65
- }))));
66
- n.displayName = "SubNavLink";
67
- n.defaultProps = {
68
- as: y,
67
+ `, p = l.forwardRef((L, E) => {
68
+ var c = L, { children: e, icon: r, withBullet: o, as: t, isSubSectionChild: h } = c, v = g(c, ["children", "icon", "withBullet", "as", "isSubSectionChild"]);
69
+ return /* @__PURE__ */ l.createElement(k, f({
70
+ as: t,
71
+ icon: r,
72
+ background: "neutral100",
73
+ paddingLeft: h ? 9 : 7,
74
+ paddingBottom: 2,
75
+ paddingTop: 2,
76
+ ref: E
77
+ }, v), /* @__PURE__ */ l.createElement(y, null, r ? /* @__PURE__ */ l.createElement(B, null, r) : /* @__PURE__ */ l.createElement($, null), /* @__PURE__ */ l.createElement(a, {
78
+ paddingLeft: 2
79
+ }, /* @__PURE__ */ l.createElement(b, {
80
+ as: "span"
81
+ }, e))), o && /* @__PURE__ */ l.createElement(a, {
82
+ as: y,
83
+ paddingRight: 4
84
+ }, /* @__PURE__ */ l.createElement($, {
85
+ $active: !0
86
+ })));
87
+ });
88
+ p.displayName = "SubNavLink";
89
+ p.defaultProps = {
90
+ as: S,
69
91
  icon: null,
70
92
  isSubSectionChild: !1,
71
93
  withBullet: !1
72
94
  };
73
- n.propTypes = {
74
- as: o.elementType,
75
- children: o.node,
76
- icon: o.element,
77
- isSubSectionChild: o.bool,
78
- link: o.element,
79
- withBullet: o.bool
95
+ p.propTypes = {
96
+ as: i.elementType,
97
+ children: i.node.isRequired,
98
+ icon: i.element,
99
+ isSubSectionChild: i.bool,
100
+ withBullet: i.bool
80
101
  };
81
102
  export {
82
- n as SubNavLink
103
+ p as SubNavLink
83
104
  };
@@ -1,19 +1,19 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react"),m=require("prop-types"),h=require("styled-components"),x=require("@strapi/icons/CarretDown"),d=require("../../Box/Box.cjs"),b=require("../../Flex/Flex.cjs"),S=require("../../Typography/Typography.cjs"),_=require("../../helpers/useId.cjs"),n=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=n(l),o=n(m),s=n(h),v=n(x),E=s.default(d.Box)`
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react"),m=require("prop-types"),h=require("styled-components"),x=require("@strapi/icons/CarretDown"),d=require("../../Box/Box.cjs"),b=require("../../Flex/Flex.cjs"),S=require("../../Typography/Typography.cjs"),_=require("../../helpers/useId.cjs"),n=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=n(l),o=n(m),s=n(h),q=n(x),v=s.default(d.Box)`
2
2
  svg {
3
3
  height: ${4/16}rem;
4
4
  path {
5
5
  fill: ${({theme:e})=>e.colors.neutral700};
6
6
  }
7
7
  }
8
- `,k=s.default.button`
8
+ `,E=s.default.button`
9
9
  border: none;
10
10
  padding: 0;
11
11
  background: transparent;
12
12
  display: flex;
13
13
  align-items: center;
14
- `,q=s.default.div`
14
+ `,k=s.default.div`
15
15
  display: flex;
16
16
  align-items: center;
17
17
  width: ${12/16}rem;
18
18
  transform: rotateX(${({rotated:e})=>e?"0deg":"180deg"});
19
- `,i=({label:e,children:c,id:p})=>{const[a,f]=l.useState(!0),u=_.useId("subnav-list",p),g=()=>{f(r=>!r)};return t.default.createElement(d.Box,null,t.default.createElement(E,{paddingLeft:7,paddingTop:2,paddingBottom:2,paddingRight:4},t.default.createElement(b.Flex,{justifyContent:"space-between"},t.default.createElement(k,{onClick:g,"aria-expanded":a,"aria-controls":u},t.default.createElement(q,{rotated:a},t.default.createElement(v.default,{"aria-hidden":!0})),t.default.createElement(d.Box,{paddingLeft:2},t.default.createElement(S.Typography,{as:"span",fontWeight:"semiBold",textColor:"neutral800"},e))))),a&&t.default.createElement("ul",{id:u},l.Children.map(c,(r,y)=>t.default.createElement("li",{key:y},r))))};i.defaultProps={id:void 0};i.propTypes={children:o.default.node,id:o.default.string,label:o.default.string.isRequired};exports.SubNavLinkSection=i;
19
+ `,i=({label:e,children:c,id:p})=>{const[a,f]=l.useState(!0),u=_.useId("subnav-list",p),g=()=>{f(r=>!r)};return t.default.createElement(d.Box,null,t.default.createElement(v,{paddingLeft:7,paddingTop:2,paddingBottom:2,paddingRight:4},t.default.createElement(b.Flex,{justifyContent:"space-between"},t.default.createElement(E,{onClick:g,"aria-expanded":a,"aria-controls":u},t.default.createElement(k,{rotated:a},t.default.createElement(q.default,{"aria-hidden":!0})),t.default.createElement(d.Box,{paddingLeft:2},t.default.createElement(S.Typography,{as:"span",fontWeight:"semiBold",textColor:"neutral800"},e))))),a&&t.default.createElement("ul",{id:u},l.Children.map(c,(r,y)=>t.default.createElement("li",{key:y},r))))};i.defaultProps={id:void 0};i.propTypes={children:o.default.node.isRequired,id:o.default.string,label:o.default.string.isRequired};exports.SubNavLinkSection=i;
@@ -24,8 +24,8 @@ const k = a(i)`
24
24
  align-items: center;
25
25
  width: ${12 / 16}rem;
26
26
  transform: rotateX(${({ rotated: t }) => t ? "0deg" : "180deg"});
27
- `, d = ({ label: t, children: p, id: s }) => {
28
- const [r, m] = f(!0), l = y("subnav-list", s), c = () => {
27
+ `, l = ({ label: t, children: p, id: s }) => {
28
+ const [r, m] = f(!0), d = y("subnav-list", s), c = () => {
29
29
  m((n) => !n);
30
30
  };
31
31
  return /* @__PURE__ */ e.createElement(i, null, /* @__PURE__ */ e.createElement(k, {
@@ -38,7 +38,7 @@ const k = a(i)`
38
38
  }, /* @__PURE__ */ e.createElement(v, {
39
39
  onClick: c,
40
40
  "aria-expanded": r,
41
- "aria-controls": l
41
+ "aria-controls": d
42
42
  }, /* @__PURE__ */ e.createElement(x, {
43
43
  rotated: r
44
44
  }, /* @__PURE__ */ e.createElement(h, {
@@ -50,19 +50,19 @@ const k = a(i)`
50
50
  fontWeight: "semiBold",
51
51
  textColor: "neutral800"
52
52
  }, t))))), r && /* @__PURE__ */ e.createElement("ul", {
53
- id: l
53
+ id: d
54
54
  }, g.map(p, (n, u) => /* @__PURE__ */ e.createElement("li", {
55
55
  key: u
56
56
  }, n))));
57
57
  };
58
- d.defaultProps = {
58
+ l.defaultProps = {
59
59
  id: void 0
60
60
  };
61
- d.propTypes = {
62
- children: o.node,
61
+ l.propTypes = {
62
+ children: o.node.isRequired,
63
63
  id: o.string,
64
64
  label: o.string.isRequired
65
65
  };
66
66
  export {
67
- d as SubNavLinkSection
67
+ l as SubNavLinkSection
68
68
  };
@@ -1,8 +1,8 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react"),m=require("prop-types"),v=require("styled-components"),u=require("../../Box/Box.cjs"),y=require("../../Badge/Badge.cjs"),h=require("../../Stack/Stack.cjs"),B=require("./SubNavSectionLabel.cjs"),k=require("../../helpers/useId.cjs"),r=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=r(n),a=r(m),q=r(v),_=q.default(u.Box)`
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react"),m=require("prop-types"),v=require("styled-components"),u=require("../../Box/Box.cjs"),y=require("../../Badge/Badge.cjs"),h=require("../../Stack/Stack.cjs"),q=require("./SubNavSectionLabel.cjs"),B=require("../../helpers/useId.cjs"),r=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=r(n),a=r(m),k=r(v),_=k.default(u.Box)`
2
2
  svg {
3
3
  height: ${4/16}rem;
4
4
  path {
5
5
  fill: ${({theme:e})=>e.colors.neutral500};
6
6
  }
7
7
  }
8
- `,s=({collapsable:e,label:c,badgeLabel:l,children:p,id:f})=>{const[i,g]=n.useState(!0),d=k.useId("subnav-list",f),S=()=>{g(o=>!o)};return t.default.createElement(h.Stack,{spacing:1},t.default.createElement(_,{paddingLeft:6,paddingTop:2,paddingBottom:2,paddingRight:4},t.default.createElement(u.Box,{position:"relative",paddingRight:l?6:0},t.default.createElement(B.SubNavSectionLabel,{onClick:S,ariaExpanded:i,ariaControls:d,collapsable:e,label:c}),l&&t.default.createElement(y.Badge,{backgroundColor:"neutral150",textColor:"neutral600",position:"absolute",right:0,top:"50%",transform:"translateY(-50%)"},l))),(!e||i)&&t.default.createElement("ol",{id:d},n.Children.map(p,(o,b)=>t.default.createElement("li",{key:b},o))))};s.defaultProps={badgeLabel:null,collapsable:!1,id:void 0};s.propTypes={badgeLabel:a.default.string,children:a.default.node,collapsable:a.default.bool,id:a.default.string,label:a.default.string.isRequired};exports.SubNavSection=s;
8
+ `,s=({collapsable:e,label:c,badgeLabel:l,children:p,id:f})=>{const[i,g]=n.useState(!0),d=B.useId("subnav-list",f),S=()=>{g(o=>!o)};return t.default.createElement(h.Stack,{spacing:1},t.default.createElement(_,{paddingLeft:6,paddingTop:2,paddingBottom:2,paddingRight:4},t.default.createElement(u.Box,{position:"relative",paddingRight:l?6:0},t.default.createElement(q.SubNavSectionLabel,{onClick:S,ariaExpanded:i,ariaControls:d,collapsable:e,label:c}),l&&t.default.createElement(y.Badge,{backgroundColor:"neutral150",textColor:"neutral600",position:"absolute",right:0,top:"50%",transform:"translateY(-50%)"},l))),(!e||i)&&t.default.createElement("ol",{id:d},n.Children.map(p,(o,b)=>t.default.createElement("li",{key:b},o))))};s.defaultProps={badgeLabel:null,collapsable:!1,id:void 0};s.propTypes={badgeLabel:a.default.string,children:a.default.node.isRequired,collapsable:a.default.bool,id:a.default.string,label:a.default.string.isRequired};exports.SubNavSection=s;
@@ -53,7 +53,7 @@ p.defaultProps = {
53
53
  };
54
54
  p.propTypes = {
55
55
  badgeLabel: t.string,
56
- children: t.node,
56
+ children: t.node.isRequired,
57
57
  collapsable: t.bool,
58
58
  id: t.string,
59
59
  label: t.string.isRequired
@@ -6,4 +6,4 @@
6
6
  display: flex;
7
7
  align-items: center;
8
8
  transform: rotateX(${({rotated:e})=>e?"0deg":"180deg"});
9
- `,o=({collapsable:e,label:l,onClick:i,ariaExpanded:n,ariaControls:p})=>e?t.default.createElement(s,{as:"button",onClick:i,"aria-expanded":n,"aria-controls":p,textAlign:"left"},t.default.createElement(d.Box,{paddingRight:1},t.default.createElement(u.Typography,{variant:"sigma",textColor:"neutral600"},l)),e&&t.default.createElement(_,{rotated:n},t.default.createElement(m.default,{"aria-hidden":!0}))):t.default.createElement(s,null,t.default.createElement(d.Box,{paddingRight:1},t.default.createElement(u.Typography,{variant:"sigma",textColor:"neutral600"},l)));o.defaultProps={ariaControls:null,ariaExpanded:null,collapsable:!1,onClick:()=>{}};o.propTypes={ariaControls:a.default.string,ariaExpanded:a.default.bool,collapsable:a.default.bool,label:a.default.string.isRequired,onClick:a.default.func};exports.SubNavSectionLabel=o;
9
+ `,o=({collapsable:e,label:l,onClick:i,ariaExpanded:n,ariaControls:p})=>e?t.default.createElement(s,{as:"button",onClick:i,"aria-expanded":n,"aria-controls":p,textAlign:"left"},t.default.createElement(d.Box,{paddingRight:1},t.default.createElement(u.Typography,{variant:"sigma",textColor:"neutral600"},l)),e&&t.default.createElement(_,{rotated:n},t.default.createElement(m.default,{"aria-hidden":!0}))):t.default.createElement(s,null,t.default.createElement(d.Box,{paddingRight:1},t.default.createElement(u.Typography,{variant:"sigma",textColor:"neutral600"},l)));o.defaultProps={ariaControls:null,ariaExpanded:null,collapsable:!1,onClick(){}};o.propTypes={ariaControls:a.default.string,ariaExpanded:a.default.bool,collapsable:a.default.bool,label:a.default.string.isRequired,onClick:a.default.func};exports.SubNavSectionLabel=o;
@@ -38,7 +38,7 @@ m.defaultProps = {
38
38
  ariaControls: null,
39
39
  ariaExpanded: null,
40
40
  collapsable: !1,
41
- onClick: () => {
41
+ onClick() {
42
42
  }
43
43
  };
44
44
  m.propTypes = {
@@ -1 +1 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react"),s=require("prop-types"),l=require("../../Stack/Stack.cjs"),i=require("../../Box/Box.cjs"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=a(o),d=a(s),r=({children:e,...c})=>t.default.createElement(i.Box,{paddingTop:2,paddingBottom:4},t.default.createElement(l.Stack,{as:"ol",spacing:2,...c},o.Children.map(e,(n,u)=>t.default.createElement("li",{key:u},n))));r.propTypes={children:d.default.node.isRequired};exports.SubNavSections=r;
1
+ "use strict";var _=Object.defineProperty;var r=Object.getOwnPropertySymbols;var u=Object.prototype.hasOwnProperty,s=Object.prototype.propertyIsEnumerable;var n=(e,t,o)=>t in e?_(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,l=(e,t)=>{for(var o in t||(t={}))u.call(t,o)&&n(e,o,t[o]);if(r)for(var o of r(t))s.call(t,o)&&n(e,o,t[o]);return e};var i=(e,t)=>{var o={};for(var a in e)u.call(e,a)&&t.indexOf(a)<0&&(o[a]=e[a]);if(e!=null&&r)for(var a of r(e))t.indexOf(a)<0&&s.call(e,a)&&(o[a]=e[a]);return o};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react"),g=require("prop-types"),m=require("../../Stack/Stack.cjs"),b=require("../../Box/Box.cjs"),p=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},c=p(d),k=p(g),f=o=>{var a=o,{children:e}=a,t=i(a,["children"]);return c.default.createElement(b.Box,{paddingTop:2,paddingBottom:4},c.default.createElement(m.Stack,l({as:"ol",spacing:2},t),d.Children.map(e,(S,y)=>c.default.createElement("li",{key:y},S))))};f.propTypes={children:k.default.node.isRequired};exports.SubNavSections=f;
@@ -1,20 +1,42 @@
1
- import e, { Children as i } from "react";
2
- import m from "prop-types";
3
- import { Stack as n } from "../../Stack/Stack.js";
4
- import { Box as a } from "../../Box/Box.js";
5
- const c = ({ children: r, ...t }) => /* @__PURE__ */ e.createElement(a, {
6
- paddingTop: 2,
7
- paddingBottom: 4
8
- }, /* @__PURE__ */ e.createElement(n, {
9
- as: "ol",
10
- spacing: 2,
11
- ...t
12
- }, i.map(r, (o, p) => /* @__PURE__ */ e.createElement("li", {
13
- key: p
14
- }, o))));
15
- c.propTypes = {
16
- children: m.node.isRequired
1
+ var f = Object.defineProperty;
2
+ var p = Object.getOwnPropertySymbols;
3
+ var n = Object.prototype.hasOwnProperty, a = Object.prototype.propertyIsEnumerable;
4
+ var m = (e, r, t) => r in e ? f(e, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[r] = t, c = (e, r) => {
5
+ for (var t in r || (r = {}))
6
+ n.call(r, t) && m(e, t, r[t]);
7
+ if (p)
8
+ for (var t of p(r))
9
+ a.call(r, t) && m(e, t, r[t]);
10
+ return e;
11
+ };
12
+ var d = (e, r) => {
13
+ var t = {};
14
+ for (var o in e)
15
+ n.call(e, o) && r.indexOf(o) < 0 && (t[o] = e[o]);
16
+ if (e != null && p)
17
+ for (var o of p(e))
18
+ r.indexOf(o) < 0 && a.call(e, o) && (t[o] = e[o]);
19
+ return t;
20
+ };
21
+ import i, { Children as u } from "react";
22
+ import g from "prop-types";
23
+ import { Stack as y } from "../../Stack/Stack.js";
24
+ import { Box as E } from "../../Box/Box.js";
25
+ const S = (t) => {
26
+ var o = t, { children: e } = o, r = d(o, ["children"]);
27
+ return /* @__PURE__ */ i.createElement(E, {
28
+ paddingTop: 2,
29
+ paddingBottom: 4
30
+ }, /* @__PURE__ */ i.createElement(y, c({
31
+ as: "ol",
32
+ spacing: 2
33
+ }, r), u.map(e, (l, s) => /* @__PURE__ */ i.createElement("li", {
34
+ key: s
35
+ }, l))));
36
+ };
37
+ S.propTypes = {
38
+ children: g.node.isRequired
17
39
  };
18
40
  export {
19
- c as SubNavSections
41
+ S as SubNavSections
20
42
  };
package/package.json CHANGED
@@ -1,8 +1,9 @@
1
1
  {
2
2
  "name": "@strapi/design-system",
3
- "version": "1.4.0-beta.0",
3
+ "version": "1.4.0-beta.2",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
+ "sideEffects": false,
6
7
  "main": "./dist/index.cjs",
7
8
  "module": "./dist/index.js",
8
9
  "exports": {
@@ -15,10 +16,10 @@
15
16
  "files": [
16
17
  "dist"
17
18
  ],
18
- "sideEffects": false,
19
19
  "dependencies": {
20
20
  "@floating-ui/react-dom": "^1.0.0",
21
21
  "@internationalized/number": "^3.1.1",
22
+ "@radix-ui/react-use-callback-ref": "^1.0.0",
22
23
  "compute-scroll-into-view": "^1.0.17",
23
24
  "prop-types": "^15.7.2"
24
25
  },
@@ -30,23 +31,17 @@
30
31
  "@storybook/addon-essentials": "^6.5.13",
31
32
  "@storybook/addon-links": "^6.5.13",
32
33
  "@storybook/react": "^6.5.13",
33
- "@strapi/icons": "^1.4.0-beta.0",
34
+ "@strapi/icons": "^1.4.0-beta.2",
34
35
  "@swc/core": "^1.3.11",
35
36
  "@swc/jest": "^0.2.23",
36
- "@testing-library/jest-dom": "^5.16.5",
37
- "@testing-library/react": "^11.2.5",
37
+ "@testing-library/jest-dom": "5.16.5",
38
+ "@testing-library/react": "12.1.4",
38
39
  "axe-playwright": "^1.1.11",
39
40
  "cross-env": "^7.0.3",
40
- "eslint": "^7.20.0",
41
- "eslint-config-prettier": "^7.2.0",
42
- "eslint-plugin-mdx": "^1.17.0",
43
- "eslint-plugin-prettier": "^3.3.1",
44
- "eslint-plugin-react": "^7.22.0",
45
41
  "intl": "^1.2.5",
46
42
  "jest": "^29.2.2",
47
43
  "jest-environment-jsdom": "^29.2.2",
48
44
  "jest-styled-components": "^7.1.1",
49
- "prettier": "^2.7.1",
50
45
  "qs": "^6.10.3",
51
46
  "react": "^17.0.1",
52
47
  "react-copy-to-clipboard": "^5.0.4",
@@ -56,7 +51,7 @@
56
51
  "styled-components": "^5.2.1"
57
52
  },
58
53
  "peerDependencies": {
59
- "@strapi/icons": "^1.2.8",
54
+ "@strapi/icons": "^1.3.1",
60
55
  "react": "^17.0.1",
61
56
  "react-dom": "^17.0.1",
62
57
  "react-router-dom": "^5.2.0",
@@ -68,8 +63,6 @@
68
63
  "build": "yarn build:prod",
69
64
  "build:prod": "vite build",
70
65
  "build-storybook": "build-storybook",
71
- "lint": "eslint . --ext .js,.jsx,.mdx --fix",
72
- "lint-staged": "eslint --fix",
73
66
  "storybook": "start-storybook -p 6006",
74
67
  "test": "jest -c jest.config.js",
75
68
  "test:watch": "jest -c jest.config.js --watchAll",
@@ -78,5 +71,5 @@
78
71
  "test:e2e:watch": "chokidar '**/__tests__/*.e2e.js' -c 'npm run test:e2e -- --retries=0 {path}'",
79
72
  "test:e2e:debug": "cross-env PWDEBUG=1 playwright test"
80
73
  },
81
- "gitHead": "c389b0fff23a308d473243c5600e27ba900214e6"
74
+ "gitHead": "55fb4e9e0ce47e86387205a922e7cf936df94fc8"
82
75
  }