@arc-ui/components 11.7.0 → 11.9.0

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 (249) hide show
  1. package/dist/Alert/Alert.cjs.d.ts +1 -1
  2. package/dist/Alert/Alert.cjs.js +10 -89
  3. package/dist/Alert/Alert.esm.d.ts +1 -1
  4. package/dist/Alert/Alert.esm.js +3 -82
  5. package/dist/Badge/Badge.cjs.d.ts +4 -0
  6. package/dist/Badge/Badge.cjs.js +4 -4
  7. package/dist/Badge/Badge.esm.d.ts +4 -0
  8. package/dist/Badge/Badge.esm.js +5 -5
  9. package/dist/Box/Box.cjs.d.ts +40 -1
  10. package/dist/Box/Box.cjs.js +25 -6
  11. package/dist/Box/Box.esm.d.ts +40 -1
  12. package/dist/Box/Box.esm.js +24 -5
  13. package/dist/Breadcrumbs/Breadcrumbs.cjs.d.ts +1 -1
  14. package/dist/Breadcrumbs/Breadcrumbs.cjs.js +2 -2
  15. package/dist/Breadcrumbs/Breadcrumbs.esm.d.ts +1 -1
  16. package/dist/Breadcrumbs/Breadcrumbs.esm.js +2 -2
  17. package/dist/Button/Button.cjs.d.ts +1 -1
  18. package/dist/Button/Button.cjs.js +1 -1
  19. package/dist/Button/Button.esm.d.ts +1 -1
  20. package/dist/Button/Button.esm.js +1 -1
  21. package/dist/Card/Card.cjs.d.ts +1 -1
  22. package/dist/Card/Card.cjs.js +2 -2
  23. package/dist/Card/Card.esm.d.ts +1 -1
  24. package/dist/Card/Card.esm.js +2 -2
  25. package/dist/Checkbox/Checkbox.cjs.d.ts +1 -1
  26. package/dist/Checkbox/Checkbox.cjs.js +4 -4
  27. package/dist/Checkbox/Checkbox.esm.d.ts +1 -1
  28. package/dist/Checkbox/Checkbox.esm.js +4 -4
  29. package/dist/Columns/Columns.cjs.d.ts +1 -1
  30. package/dist/Columns/Columns.esm.d.ts +1 -1
  31. package/dist/Curve/Curve.cjs.d.ts +1 -1
  32. package/dist/Curve/Curve.cjs.js +1 -1
  33. package/dist/Curve/Curve.esm.d.ts +1 -1
  34. package/dist/Curve/Curve.esm.js +1 -1
  35. package/dist/Disclosure/Disclosure.cjs.d.ts +1 -1
  36. package/dist/Disclosure/Disclosure.cjs.js +1 -1
  37. package/dist/Disclosure/Disclosure.esm.d.ts +1 -1
  38. package/dist/Disclosure/Disclosure.esm.js +1 -1
  39. package/dist/DisclosureMini/DisclosureMini.cjs.d.ts +1 -1
  40. package/dist/DisclosureMini/DisclosureMini.cjs.js +2 -2
  41. package/dist/DisclosureMini/DisclosureMini.esm.d.ts +1 -1
  42. package/dist/DisclosureMini/DisclosureMini.esm.js +2 -2
  43. package/dist/FormControl/FormControl.cjs.d.ts +1 -1
  44. package/dist/FormControl/FormControl.cjs.js +3 -3
  45. package/dist/FormControl/FormControl.esm.d.ts +1 -1
  46. package/dist/FormControl/FormControl.esm.js +3 -3
  47. package/dist/Heading/Heading.cjs.d.ts +1 -1
  48. package/dist/Heading/Heading.cjs.js +1 -1
  49. package/dist/Heading/Heading.esm.d.ts +1 -1
  50. package/dist/Heading/Heading.esm.js +1 -1
  51. package/dist/Modal/Modal.cjs.d.ts +31 -9
  52. package/dist/Modal/Modal.cjs.js +450 -161
  53. package/dist/Modal/Modal.esm.d.ts +31 -9
  54. package/dist/Modal/Modal.esm.js +423 -134
  55. package/dist/Pagination/Pagination.cjs.js +4 -4
  56. package/dist/Pagination/Pagination.esm.js +4 -4
  57. package/dist/PaginationSimple/PaginationSimple.cjs.js +4 -4
  58. package/dist/PaginationSimple/PaginationSimple.esm.js +4 -4
  59. package/dist/ProgressBar/ProgressBar.cjs.js +5 -5
  60. package/dist/ProgressBar/ProgressBar.esm.js +6 -6
  61. package/dist/ProgressStepper/ProgressStepper.cjs.d.ts +1 -89
  62. package/dist/ProgressStepper/ProgressStepper.cjs.js +10 -144
  63. package/dist/ProgressStepper/ProgressStepper.esm.d.ts +1 -89
  64. package/dist/ProgressStepper/ProgressStepper.esm.js +9 -143
  65. package/dist/RadioGroup/RadioGroup.cjs.d.ts +1 -1
  66. package/dist/RadioGroup/RadioGroup.cjs.js +4 -4
  67. package/dist/RadioGroup/RadioGroup.esm.d.ts +1 -1
  68. package/dist/RadioGroup/RadioGroup.esm.js +4 -4
  69. package/dist/Select/Select.cjs.d.ts +1 -1
  70. package/dist/Select/Select.cjs.js +995 -60
  71. package/dist/Select/Select.esm.d.ts +1 -1
  72. package/dist/Select/Select.esm.js +948 -32
  73. package/dist/SiteFooter/SiteFooter.cjs.d.ts +1 -1
  74. package/dist/SiteFooter/SiteFooter.cjs.js +2 -2
  75. package/dist/SiteFooter/SiteFooter.esm.d.ts +1 -1
  76. package/dist/SiteFooter/SiteFooter.esm.js +3 -3
  77. package/dist/SiteHeader/SiteHeader.cjs.d.ts +1 -1
  78. package/dist/SiteHeader/SiteHeader.cjs.js +3 -3
  79. package/dist/SiteHeader/SiteHeader.esm.d.ts +1 -1
  80. package/dist/SiteHeader/SiteHeader.esm.js +3 -3
  81. package/dist/Switch/Switch.cjs.d.ts +1 -1
  82. package/dist/Switch/Switch.cjs.js +241 -18
  83. package/dist/Switch/Switch.esm.d.ts +1 -1
  84. package/dist/Switch/Switch.esm.js +234 -11
  85. package/dist/Tabs/Tabs.cjs.d.ts +1 -0
  86. package/dist/Tabs/Tabs.cjs.js +20 -0
  87. package/dist/Tabs/Tabs.esm.d.ts +1 -0
  88. package/dist/Tabs/Tabs.esm.js +12 -0
  89. package/dist/Tabs/package.json +7 -0
  90. package/dist/Text/Text.cjs.d.ts +1 -1
  91. package/dist/Text/Text.cjs.js +1 -1
  92. package/dist/Text/Text.esm.d.ts +1 -1
  93. package/dist/Text/Text.esm.js +1 -1
  94. package/dist/TextArea/TextArea.cjs.d.ts +4 -1
  95. package/dist/TextArea/TextArea.cjs.js +30 -17
  96. package/dist/TextArea/TextArea.esm.d.ts +4 -1
  97. package/dist/TextArea/TextArea.esm.js +30 -17
  98. package/dist/TextInput/TextInput.cjs.d.ts +1 -1
  99. package/dist/TextInput/TextInput.cjs.js +4 -4
  100. package/dist/TextInput/TextInput.esm.d.ts +1 -1
  101. package/dist/TextInput/TextInput.esm.js +4 -4
  102. package/dist/Toast/Toast.cjs.d.ts +1 -0
  103. package/dist/Toast/Toast.cjs.js +23 -0
  104. package/dist/Toast/Toast.esm.d.ts +1 -0
  105. package/dist/Toast/Toast.esm.js +15 -0
  106. package/dist/Toast/package.json +7 -0
  107. package/dist/Truncate/Truncate.cjs.js +3 -2
  108. package/dist/Truncate/Truncate.esm.js +3 -2
  109. package/dist/_shared/cjs/{Breadcrumbs-9f580f69.js → Breadcrumbs-0906dd10.js} +9 -9
  110. package/dist/_shared/cjs/BtIconTick-42fcc5ec.js +91 -0
  111. package/dist/_shared/{esm/Button-9c3b0b11.d.ts → cjs/Button-5aaa6776.d.ts} +4 -0
  112. package/dist/_shared/cjs/{Button-b4d6ccc8.js → Button-5aaa6776.js} +2 -2
  113. package/dist/_shared/cjs/{Card-f1108bfe.js → Card-fd189ba8.js} +1 -1
  114. package/dist/_shared/cjs/{Checkbox-c927b62f.js → Checkbox-02c546ca.js} +1 -1
  115. package/dist/_shared/cjs/Columns-e90798f8.d.ts +1 -1
  116. package/dist/_shared/cjs/{Curve-b05589d8.d.ts → Curve-781ef633.d.ts} +5 -2
  117. package/dist/_shared/cjs/{Curve-b05589d8.js → Curve-781ef633.js} +5 -2
  118. package/dist/_shared/cjs/{DisclosureMini-2a10006e.js → DisclosureMini-52706ee6.js} +1 -1
  119. package/dist/_shared/cjs/{FormControl-78b007b7.js → FormControl-1e1bf2bf.js} +1 -1
  120. package/dist/_shared/cjs/{Heading-ed1cb455.d.ts → Heading-e3332dcf.d.ts} +4 -0
  121. package/dist/_shared/cjs/{Heading-ed1cb455.js → Heading-e3332dcf.js} +2 -2
  122. package/dist/{MediaCard/MediaCard.cjs.d.ts → _shared/cjs/MediaCard-9483ad5f.d.ts} +3 -4
  123. package/dist/_shared/cjs/ProgressStepper-f740d7bb.d.ts +89 -0
  124. package/dist/_shared/cjs/ProgressStepper-f740d7bb.js +149 -0
  125. package/dist/_shared/{esm/RadioGroup-65b8c8bf.d.ts → cjs/RadioGroup-d7664b0c.d.ts} +1 -1
  126. package/dist/_shared/cjs/{RadioGroup-8e17de70.js → RadioGroup-d7664b0c.js} +1 -1
  127. package/dist/_shared/cjs/{SiteFooter-9f7f9c2d.js → SiteFooter-5da774e1.js} +1 -1
  128. package/dist/_shared/cjs/SiteHeader-c25ee36e.d.ts +2 -2
  129. package/dist/_shared/cjs/{SiteHeader.rehydrator-ccbebde6.js → SiteHeader.rehydrator-acc9d8c4.js} +2 -2
  130. package/dist/_shared/cjs/Tabs-fda49692.d.ts +75 -0
  131. package/dist/_shared/cjs/Tabs-fda49692.js +510 -0
  132. package/dist/_shared/{esm/Text-14deb70e.d.ts → cjs/Text-fa447e2d.d.ts} +4 -0
  133. package/dist/_shared/cjs/{Text-555a29a4.js → Text-fa447e2d.js} +2 -2
  134. package/dist/_shared/cjs/{TextInput-7ed03a48.d.ts → TextInput-13050538.d.ts} +3 -1
  135. package/dist/_shared/{esm/TextInput-62bb7dee.d.ts → cjs/TextInput-f4549637.d.ts} +1 -1
  136. package/dist/_shared/cjs/{TextInput-b768e346.js → TextInput-f4549637.js} +1 -1
  137. package/dist/_shared/cjs/Toast-0cb23cae.d.ts +52 -0
  138. package/dist/_shared/cjs/Toast-0cb23cae.js +739 -0
  139. package/dist/_shared/cjs/extends-bb8ffacd.js +21 -0
  140. package/dist/_shared/cjs/index-27b53d49.js +174 -0
  141. package/dist/_shared/cjs/index-699086a7.d.ts +1 -1
  142. package/dist/_shared/cjs/index-74488a9f.d.ts +1 -1
  143. package/dist/_shared/cjs/{index.module-9b87a34d.js → index-952918c9.js} +141 -33
  144. package/dist/_shared/cjs/index-96c4d581.js +289 -0
  145. package/dist/_shared/cjs/index-c81c9401.d.ts +3 -3
  146. package/dist/_shared/cjs/index-e340924e.d.ts +1 -1
  147. package/dist/_shared/cjs/index-e6d20018.d.ts +1 -1
  148. package/dist/_shared/cjs/index-eb06f640.d.ts +1 -1
  149. package/dist/_shared/cjs/{index-31fbb076.js → index-ec260f5e.js} +0 -547
  150. package/dist/_shared/cjs/index-f419cf04.d.ts +1 -1
  151. package/dist/_shared/cjs/index-fb4b8fda.js +47 -0
  152. package/dist/_shared/cjs/index.module-bbcc4e18.js +126 -0
  153. package/dist/_shared/esm/{Breadcrumbs-5dc0afa7.js → Breadcrumbs-dafa8dde.js} +9 -9
  154. package/dist/_shared/esm/BtIconTick-5fe50cc7.js +83 -0
  155. package/dist/_shared/{cjs/Button-b4d6ccc8.d.ts → esm/Button-d1dbcf79.d.ts} +4 -0
  156. package/dist/_shared/esm/{Button-9c3b0b11.js → Button-d1dbcf79.js} +2 -2
  157. package/dist/_shared/esm/{Card-79b6eae0.js → Card-e62c3ff6.js} +1 -1
  158. package/dist/_shared/esm/{Checkbox-2d144384.js → Checkbox-d8891198.js} +1 -1
  159. package/dist/_shared/esm/Columns-8704515b.d.ts +1 -1
  160. package/dist/_shared/esm/{Curve-3e87b1bc.d.ts → Curve-bbc5589c.d.ts} +5 -2
  161. package/dist/_shared/esm/{Curve-3e87b1bc.js → Curve-bbc5589c.js} +5 -2
  162. package/dist/_shared/esm/{DisclosureMini-78a8f392.js → DisclosureMini-9b819941.js} +1 -1
  163. package/dist/_shared/esm/{FormControl-2fa7aae5.js → FormControl-f18e2f59.js} +1 -1
  164. package/dist/_shared/esm/{Heading-ee6bec51.d.ts → Heading-0f629151.d.ts} +4 -0
  165. package/dist/_shared/esm/{Heading-ee6bec51.js → Heading-0f629151.js} +2 -2
  166. package/dist/{MediaCard/MediaCard.esm.d.ts → _shared/esm/MediaCard-9483ad5f.d.ts} +3 -4
  167. package/dist/_shared/esm/ProgressStepper-7ab88f4c.d.ts +89 -0
  168. package/dist/_shared/esm/ProgressStepper-7ab88f4c.js +143 -0
  169. package/dist/_shared/{cjs/RadioGroup-8e17de70.d.ts → esm/RadioGroup-be16d5d3.d.ts} +1 -1
  170. package/dist/_shared/esm/{RadioGroup-65b8c8bf.js → RadioGroup-be16d5d3.js} +1 -1
  171. package/dist/_shared/esm/{SiteFooter-51bdc7df.js → SiteFooter-a182cb18.js} +1 -1
  172. package/dist/_shared/esm/SiteHeader-c25ee36e.d.ts +2 -2
  173. package/dist/_shared/esm/{SiteHeader.rehydrator-382d1c03.js → SiteHeader.rehydrator-023b7b76.js} +2 -2
  174. package/dist/_shared/esm/Tabs-5af0b940.d.ts +75 -0
  175. package/dist/_shared/esm/Tabs-5af0b940.js +504 -0
  176. package/dist/_shared/{cjs/Text-555a29a4.d.ts → esm/Text-40457811.d.ts} +4 -0
  177. package/dist/_shared/esm/{Text-14deb70e.js → Text-40457811.js} +2 -2
  178. package/dist/_shared/esm/{TextInput-7ed03a48.d.ts → TextInput-13050538.d.ts} +3 -1
  179. package/dist/_shared/{cjs/TextInput-b768e346.d.ts → esm/TextInput-4424c195.d.ts} +3 -3
  180. package/dist/_shared/esm/{TextInput-62bb7dee.js → TextInput-4424c195.js} +1 -1
  181. package/dist/_shared/esm/Toast-43795e91.d.ts +52 -0
  182. package/dist/_shared/esm/Toast-43795e91.js +733 -0
  183. package/dist/_shared/esm/extends-4575346e.js +19 -0
  184. package/dist/_shared/esm/{index.module-216016b5.js → index-22aad354.js} +138 -29
  185. package/dist/_shared/esm/{index-4fa635bd.js → index-369dce7f.js} +2 -541
  186. package/dist/_shared/esm/index-699086a7.d.ts +1 -1
  187. package/dist/_shared/esm/index-74488a9f.d.ts +1 -1
  188. package/dist/_shared/esm/index-8000d9e3.js +168 -0
  189. package/dist/_shared/esm/index-94ecc5f8.js +280 -0
  190. package/dist/_shared/esm/index-bed18a88.js +26 -0
  191. package/dist/_shared/esm/index-c81c9401.d.ts +3 -3
  192. package/dist/_shared/esm/index-e340924e.d.ts +1 -1
  193. package/dist/_shared/esm/index-e6d20018.d.ts +1 -1
  194. package/dist/_shared/esm/index-eb06f640.d.ts +1 -1
  195. package/dist/_shared/esm/index-f419cf04.d.ts +1 -1
  196. package/dist/_shared/esm/index.module-5ed90b21.js +122 -0
  197. package/dist/index.es.js +5036 -1358
  198. package/dist/index.es.js.map +1 -1
  199. package/dist/index.js +5358 -1668
  200. package/dist/index.js.map +1 -1
  201. package/dist/styles.css +1 -1
  202. package/dist/types/components/Badge/Badge.d.ts +4 -0
  203. package/dist/types/components/Button/Button.d.ts +4 -0
  204. package/dist/types/components/Columns/Columns.d.ts +1 -1
  205. package/dist/types/components/Columns/index.d.ts +1 -1
  206. package/dist/types/components/Curve/Curve.d.ts +5 -2
  207. package/dist/types/components/Heading/Heading.d.ts +4 -0
  208. package/dist/types/components/Modal/Modal.d.ts +31 -9
  209. package/dist/types/components/Tabs/Tab/Tab.d.ts +22 -0
  210. package/dist/types/components/Tabs/Tab/index.d.ts +1 -0
  211. package/dist/types/components/Tabs/TabContent/TabContent.d.ts +12 -0
  212. package/dist/types/components/Tabs/TabContent/index.d.ts +1 -0
  213. package/dist/types/components/Tabs/Tabs.d.ts +27 -0
  214. package/dist/types/components/Tabs/TabsList/TabsList.d.ts +20 -0
  215. package/dist/types/components/Tabs/TabsList/index.d.ts +1 -0
  216. package/dist/types/components/Tabs/index.d.ts +1 -0
  217. package/dist/types/components/Text/Text.d.ts +4 -0
  218. package/dist/types/components/TextArea/TextArea.d.ts +3 -0
  219. package/dist/types/components/TextInput/TextInput.d.ts +2 -0
  220. package/dist/types/components/Toast/Toast.d.ts +14 -0
  221. package/dist/types/components/Toast/ToastNotification.d.ts +39 -0
  222. package/dist/types/components/Toast/index.d.ts +1 -0
  223. package/dist/types/components/index.d.ts +18 -6
  224. package/dist/types/styles.d.ts +3 -2
  225. package/package.json +8 -6
  226. package/dist/MediaCard/MediaCard.cjs.js +0 -31
  227. package/dist/MediaCard/MediaCard.esm.js +0 -23
  228. package/dist/MediaCard/package.json +0 -7
  229. package/dist/_shared/cjs/Box-ebe2b7be.d.ts +0 -39
  230. package/dist/_shared/cjs/Box-ebe2b7be.js +0 -30
  231. package/dist/_shared/cjs/index.module-5ea728f4.js +0 -23
  232. package/dist/_shared/esm/Box-06d99d8a.d.ts +0 -39
  233. package/dist/_shared/esm/Box-06d99d8a.js +0 -24
  234. package/dist/_shared/esm/index.module-88179159.js +0 -21
  235. package/dist/types/components/Modal/Modal.stories-wip.d.ts +0 -9
  236. /package/dist/_shared/cjs/{Breadcrumbs-9f580f69.d.ts → Breadcrumbs-0906dd10.d.ts} +0 -0
  237. /package/dist/_shared/cjs/{Card-f1108bfe.d.ts → Card-fd189ba8.d.ts} +0 -0
  238. /package/dist/_shared/cjs/{Checkbox-c927b62f.d.ts → Checkbox-02c546ca.d.ts} +0 -0
  239. /package/dist/_shared/cjs/{DisclosureMini-2a10006e.d.ts → DisclosureMini-52706ee6.d.ts} +0 -0
  240. /package/dist/_shared/cjs/{FormControl-78b007b7.d.ts → FormControl-1e1bf2bf.d.ts} +0 -0
  241. /package/dist/_shared/cjs/{SiteFooter-9f7f9c2d.d.ts → SiteFooter-5da774e1.d.ts} +0 -0
  242. /package/dist/_shared/cjs/{SiteHeader.rehydrator-ccbebde6.d.ts → SiteHeader.rehydrator-acc9d8c4.d.ts} +0 -0
  243. /package/dist/_shared/esm/{Breadcrumbs-5dc0afa7.d.ts → Breadcrumbs-dafa8dde.d.ts} +0 -0
  244. /package/dist/_shared/esm/{Card-79b6eae0.d.ts → Card-e62c3ff6.d.ts} +0 -0
  245. /package/dist/_shared/esm/{Checkbox-2d144384.d.ts → Checkbox-d8891198.d.ts} +0 -0
  246. /package/dist/_shared/esm/{DisclosureMini-78a8f392.d.ts → DisclosureMini-9b819941.d.ts} +0 -0
  247. /package/dist/_shared/esm/{FormControl-2fa7aae5.d.ts → FormControl-f18e2f59.d.ts} +0 -0
  248. /package/dist/_shared/esm/{SiteFooter-51bdc7df.d.ts → SiteFooter-a182cb18.d.ts} +0 -0
  249. /package/dist/_shared/esm/{SiteHeader.rehydrator-382d1c03.d.ts → SiteHeader.rehydrator-023b7b76.d.ts} +0 -0
@@ -22,4 +22,8 @@ export interface BadgeProps {
22
22
  * Aria label for accessibility
23
23
  */
24
24
  ariaLabel?: string;
25
+ /**
26
+ * Aria Role for accessibility
27
+ */
28
+ ariaRole?: "status" | "alert";
25
29
  }
@@ -26,6 +26,10 @@ interface ButtonElementProps {
26
26
  * be inferred. Type 'reset' deliberately excluded.
27
27
  */
28
28
  type?: "button" | "submit";
29
+ /**
30
+ * Refers to the id of a form so it can be submitted if the button exists outside of it.
31
+ */
32
+ form?: string;
29
33
  }
30
34
  interface LinkElementProps {
31
35
  /**
@@ -6,7 +6,7 @@ export declare const Columns: FC<ColumnsProps> & {
6
6
  Col: typeof Col;
7
7
  };
8
8
  export declare const Col: FC<ColProps>;
9
- declare type Span = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
9
+ export declare type Span = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
10
10
  declare type Offset = "0" | "24" | "48" | "72" | "96" | "120" | "144" | "168" | "192" | "216" | "240" | "264" | "288" | "312" | "336" | "360" | "384";
11
11
  export interface ColProps {
12
12
  /**
@@ -1 +1 @@
1
- export { Columns } from "./Columns";
1
+ export { Columns, Span } from "./Columns";
@@ -1,8 +1,11 @@
1
1
  import { FC } from "react";
2
2
  import { backgroundsBT } from "../Surface";
3
3
  /**
4
- * Use `Curve` sparingly to soften edges and create a more natural, less rigid
5
- * look and feel.
4
+ #### Deprecation Notice
5
+
6
+ The `Curve` component is an outdated brand feature and is being deprecated from Arc as a standalone component or sub-component within other components. Do not use Curve for any new work, and prepare to update any design that features it to remove it.
7
+
8
+ `Curve` will be removed from Arc in a subsequent release
6
9
  */
7
10
  export declare const Curve: FC<CurveProps>;
8
11
  export declare const sizes: readonly ["s", "m", "l"];
@@ -33,6 +33,10 @@ export interface HeadingProps {
33
33
  * The color of the Heading.
34
34
  */
35
35
  color?: HeadingColor;
36
+ /**
37
+ * Id for the Heading.
38
+ */
39
+ id?: string;
36
40
  /**
37
41
  * HTML section heading level. If not provided, the Heading will render as
38
42
  * a span.
@@ -1,28 +1,50 @@
1
1
  import React, { FC } from "react";
2
+ import { ButtonProps } from "../Button/Button";
3
+ /** Use `Modal` to focus a user's attention to an urgent or required prompt for interaction or input. */
2
4
  export declare const Modal: FC<ModalProps>;
3
5
  export interface ModalProps {
4
6
  /**
5
- * title for the modal dialog, announced when opened
7
+ * Title for the modal. This will be announced by screen readers when the modal opens.
6
8
  */
7
9
  title: string;
8
10
  /**
9
- * description for the modal dialog, announced when opened
11
+ * Role for the modal. use alertdialog if explicit user input is required e.g deleting an account. role alertdialog will remove the ability to close the modal by either the esc key being pressed, clicking the cross icon or clicking outside.
10
12
  */
11
- description: string;
13
+ role?: "dialog" | "alertdialog";
12
14
  /**
13
- * Function to be called when the modal has been requested to close.
15
+ * Whether to return focus to the element that was focused before the modal opened. True by default.
14
16
  */
15
- onClose: () => void;
17
+ shouldReturnFocus?: boolean;
16
18
  /**
17
- * determines whether the description is visible. If set to false it will be visually hidden, but will still be announaced by screen readers. Set to true by default.
19
+ * Description for the modal. This will be announced by screen readers when the modal opens.
18
20
  */
19
- showDescription?: boolean;
21
+ description?: string;
20
22
  /**
21
- * Set modal open or closed
23
+ * ID for the element description to be announced by screenreaders in addition to the title.
24
+ */
25
+ ariaDescribedBy?: string;
26
+ /**
27
+ * Configurable actions for the modal.
28
+ */
29
+ actions?: Pick<ButtonProps, "form" | "type" | "fill" | "icon" | "iconPosition" | "href" | "id" | "label" | "onClick" | "isDisabled" | "ariaLabel" | "rel">[];
30
+ /**
31
+ * Function to be called when the modal has been requested to close by either the esc key being pressed, outside the dialog being clicked or the close button being clicked. The callback must set the open state of the modal to false. This function is ignored if the `role` prop is set to `alertdialog`. You can prevent this behavior with the `dialog` role by ommitting this prop.
32
+ */
33
+ onRequestClose?: () => void;
34
+ /**
35
+ * Size of the modal dialog.
36
+ */
37
+ size?: "s" | "m" | "l";
38
+ /**
39
+ * Set modal open or closed.
22
40
  */
23
41
  isOpen?: boolean;
24
42
  /**
25
- * content for the modal
43
+ * Enables the dialog content to be scrolled internally.
44
+ */
45
+ isContentScrollable?: boolean;
46
+ /**
47
+ * Custom content for `Modal`.
26
48
  */
27
49
  children?: React.ReactNode;
28
50
  }
@@ -0,0 +1,22 @@
1
+ import { FC } from "react";
2
+ import { ArcIcon } from "../../../types/arc-icon";
3
+ export declare const Tab: FC<TabProps>;
4
+ interface TabProps {
5
+ /**
6
+ * Label to display on the Tab
7
+ */
8
+ label: string;
9
+ /**
10
+ * Value to link `Tab` to `TabContent`
11
+ */
12
+ value: string;
13
+ /**
14
+ * Determine what icon to display within the Tab.
15
+ */
16
+ icon?: ArcIcon;
17
+ /**
18
+ * Determine what to display when `Tab` is active
19
+ */
20
+ iconActive?: ArcIcon;
21
+ }
22
+ export {};
@@ -0,0 +1 @@
1
+ export { Tab } from "./Tab";
@@ -0,0 +1,12 @@
1
+ import { FC, ReactNode } from "react";
2
+ export declare const TabContent: FC<TabContentProps>;
3
+ export interface TabContentProps {
4
+ /**
5
+ * Content to display
6
+ */
7
+ children: ReactNode;
8
+ /**
9
+ * This value links the `TabContent` with `Tab`
10
+ */
11
+ value: string;
12
+ }
@@ -0,0 +1 @@
1
+ export { TabContent } from "./TabContent";
@@ -0,0 +1,27 @@
1
+ import { FC, ReactNode } from "react";
2
+ import { Tab } from "./Tab/Tab";
3
+ import { TabContent } from "./TabContent";
4
+ import { TabsList } from "./TabsList";
5
+ export declare const Tabs: FC<TabsProps> & {
6
+ Tab: typeof Tab;
7
+ Content: typeof TabContent;
8
+ List: typeof TabsList;
9
+ };
10
+ export interface TabsProps {
11
+ /**
12
+ * Render children
13
+ */
14
+ children: ReactNode;
15
+ /**
16
+ * Default to an inital value of a tab. If this is left blank it is possible for there to be no active tabs
17
+ */
18
+ defaultValue?: string;
19
+ /**
20
+ * Event handler called when the value changes.
21
+ */
22
+ onValueChange?: (value: string) => void;
23
+ /**
24
+ * When automatic, tabs are activated when receiving focus. When manual, tabs are activated when clicked.
25
+ */
26
+ activationMode?: "automatic" | "manual";
27
+ }
@@ -0,0 +1,20 @@
1
+ import { FC, ReactNode } from "react";
2
+ export declare const TabsList: FC<TabsListProps>;
3
+ export interface TabsListProps {
4
+ /**
5
+ * Contents of the `Tabs` Should contain `Tab`
6
+ */
7
+ children: ReactNode;
8
+ /**
9
+ * Determine if `Tabs` should be justified
10
+ */
11
+ isJustified?: boolean;
12
+ /**
13
+ * Determine the type of `Tabs`. Default is standard
14
+ */
15
+ type?: "standard" | "contained";
16
+ /**
17
+ * Determine a accessible label for `Tabs`
18
+ */
19
+ ariaLabel?: string;
20
+ }
@@ -0,0 +1 @@
1
+ export { TabsList } from "./TabsList";
@@ -0,0 +1 @@
1
+ export { Tabs } from "./Tabs";
@@ -30,4 +30,8 @@ export interface TextProps {
30
30
  * Visual emphasis of the Text.
31
31
  */
32
32
  tone?: Tone;
33
+ /**
34
+ * Id for the Text.
35
+ */
36
+ id?: string;
33
37
  }
@@ -1,11 +1,14 @@
1
1
  import React from "react";
2
2
  import { FormControlProps } from "../FormControl/FormControl";
3
3
  declare type EventType = React.ChangeEvent<HTMLTextAreaElement>;
4
+ /** Use `TextArea` to allow custom user text entry via keyboard, for long-form and multi-line descriptions */
4
5
  export declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
5
6
  export interface TextAreaProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "helperUnderLabel"> {
6
7
  /**
7
8
  * Uncontrolled default value of the TextArea. If the TextArea is controlled
8
9
  * via `value`/`onChange`, `defaultValue` will be ignored.
10
+ *
11
+ * `defaultValue` is not to be used instead of helper text.
9
12
  */
10
13
  defaultValue?: string;
11
14
  /**
@@ -9,6 +9,8 @@ export interface TextInputProps extends Omit<FormControlProps, "children" | "ele
9
9
  /**
10
10
  * Uncontrolled default value of the TextInput. If the TextInput is controlled
11
11
  * via `value`/`onChange`, `defaultValue` will be ignored.
12
+ *
13
+ * `defaultValue` is not to be used instead of helper text.
12
14
  */
13
15
  defaultValue?: string;
14
16
  /**
@@ -0,0 +1,14 @@
1
+ import React, { FC } from "react";
2
+ import { ToastNotification } from "./ToastNotification";
3
+ /** Use `Toast` to display temporary messages at the bottom of the viewport. */
4
+ export declare const Toast: FC<ToastProps> & {
5
+ Notification: typeof ToastNotification;
6
+ };
7
+ interface ToastProps {
8
+ children: React.ReactNode;
9
+ /**
10
+ * Colour scheme for `Toast` - Use 'default' in almost all cases.
11
+ */
12
+ colorScheme?: "default" | "alternative";
13
+ }
14
+ export {};
@@ -0,0 +1,39 @@
1
+ import { FC } from "react";
2
+ export declare const ToastNotification: FC<ToastNotificationProps>;
3
+ declare type ToastStatus = "general" | "error" | "warning" | "success";
4
+ export interface ToastNotificationProps {
5
+ /**
6
+ * Title for `<Toast />`
7
+ */
8
+ title: string;
9
+ /**
10
+ * Set open state for `<Toast />`
11
+ */
12
+ isOpen: boolean;
13
+ /**
14
+ * Function to call when the open state of `<Toast />` changes. This needs to be supplied in order for the auto dismiss and the close button to work.
15
+ */
16
+ onOpenChange: (isOpen: boolean) => void;
17
+ /**
18
+ * Set whether close button shows
19
+ */
20
+ isCloseButtonVisible?: boolean;
21
+ /**
22
+ * Set whether to include a status icon
23
+ */
24
+ isStatusIconVisible?: boolean;
25
+ /**
26
+ * Link for `<Toast />`
27
+ */
28
+ link?: {
29
+ text: string;
30
+ ariaLabel?: string;
31
+ href?: string;
32
+ onClick?: () => void;
33
+ };
34
+ /**
35
+ * Status of `<Toast />`
36
+ */
37
+ status?: ToastStatus;
38
+ }
39
+ export {};
@@ -0,0 +1 @@
1
+ export { Toast } from "./Toast";
@@ -1,7 +1,10 @@
1
1
  export { Align } from "./Align";
2
+ export { Alert } from "./Alert";
3
+ export { Badge } from "./Badge";
2
4
  export { Base } from "./Base";
3
- export { Breadcrumbs } from "./Breadcrumbs/Breadcrumbs";
4
- export { BrandLogo } from "./BrandLogo/BrandLogo";
5
+ export { Box } from "./Box";
6
+ export { BrandLogo } from "./BrandLogo";
7
+ export { Breadcrumbs } from "./Breadcrumbs";
5
8
  export { Button } from "./Button";
6
9
  export { Card } from "./Card";
7
10
  export { Checkbox } from "./Checkbox";
@@ -9,29 +12,38 @@ export { Clock, ClockRehydrator } from "./Clock";
9
12
  export { Columns } from "./Columns";
10
13
  export { Curve } from "./Curve";
11
14
  export { Disclosure } from "./Disclosure";
15
+ export { DisclosureMini } from "./DisclosureMini";
12
16
  export { Elevation } from "./Elevation";
13
- export { FormControl } from "./FormControl";
14
17
  export { Filter } from "./Filter";
18
+ export { FormControl } from "./FormControl";
15
19
  export { Group } from "./Group";
16
20
  export { Heading } from "./Heading";
17
21
  export { Icon } from "./Icon";
18
22
  export { Image } from "./Image";
19
23
  export { Markup } from "./Markup";
20
- export { UniversalHeader } from "./UniversalHeader";
24
+ export { MediaCard } from "./MediaCard";
25
+ export { Modal } from "./Modal";
26
+ export { Pagination } from "./Pagination";
27
+ export { PaginationSimple } from "./PaginationSimple";
21
28
  export { Poster } from "./Poster";
29
+ export { ProgressBar } from "./ProgressBar";
30
+ export { ProgressStepper } from "./ProgressStepper";
22
31
  export { RadioGroup } from "./RadioGroup";
23
32
  export { Rule } from "./Rule";
33
+ export { ScrollToTop } from "./ScrollToTop";
24
34
  export { Section } from "./Section";
25
35
  export { Select } from "./Select";
26
36
  export { SiteFooter, SiteFooterRehydrator } from "./SiteFooter";
27
37
  export { SiteHeader, SiteHeaderRehydrator } from "./SiteHeader";
28
38
  export { Surface, SurfaceContext } from "./Surface";
29
39
  export { Switch } from "./Switch";
30
- export { Badge } from "./Badge";
40
+ export { Tabs } from "./Tabs";
31
41
  export { Tag } from "./Tag";
32
42
  export { Text } from "./Text";
33
- export { TextInput } from "./TextInput";
34
43
  export { TextArea } from "./TextArea";
44
+ export { TextInput } from "./TextInput";
45
+ export { Toast } from "./Toast";
35
46
  export { Truncate } from "./Truncate";
47
+ export { UniversalHeader } from "./UniversalHeader";
36
48
  export { VerticalSpace } from "./VerticalSpace";
37
49
  export { VisuallyHidden } from "./VisuallyHidden";
@@ -35,6 +35,7 @@ import "./components/Select/Select.css";
35
35
  import "./components/SiteFooter/SiteFooter.css";
36
36
  import "./components/SiteHeader/SiteHeader.css";
37
37
  import "./components/Surface/Surface.css";
38
+ import "./components/Tabs/Tabs.css";
38
39
  import "./components/Tag/Tag.css";
39
40
  import "./components/Text/Text.css";
40
41
  import "./components/TextArea/TextArea.css";
@@ -65,10 +66,10 @@ import "./components/Select/Select.bt.css";
65
66
  import "./components/SiteFooter/SiteFooter.bt.css";
66
67
  import "./components/SiteHeader/SiteHeader.bt.css";
67
68
  import "./components/Surface/Surface.bt.css";
69
+ import "./components/Tabs/Tabs.css";
68
70
  import "./components/Text/Text.bt.css";
69
71
  import "./components/TextInput/TextInput.bt.css";
70
72
  import "./components/UniversalHeader/UniversalHeader.bt.css";
71
73
  import "./components/Switch/Switch.bt.css";
72
- import "./components/Modal/Modal.css";
73
- import "./components/ProgressBar/ProgressBar.css";
74
+ import "./components/Toast/Toast.css";
74
75
  import "./components/ProgressStepper/ProgressStepper.css";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@arc-ui/components",
3
- "version": "11.7.0",
3
+ "version": "11.9.0",
4
4
  "homepage": "https://ui.digital-ent-int.bt.com",
5
5
  "author": "BT Enterprise Digital UI Team <ui-digital-ent-int@bt.com>",
6
6
  "main": "./dist/index.js",
@@ -26,15 +26,17 @@
26
26
  "react": "^18.0.0"
27
27
  },
28
28
  "dependencies": {
29
- "@radix-ui/react-dialog": "1.0.2",
29
+ "@radix-ui/react-dialog": "1.0.4",
30
30
  "@radix-ui/react-label": "2.0.0",
31
31
  "@radix-ui/react-select": "1.1.2",
32
- "@radix-ui/react-switch": "^1.0.1"
32
+ "@radix-ui/react-switch": "1.0.1",
33
+ "@radix-ui/react-tabs": "1.0.4",
34
+ "@radix-ui/react-toast": "1.1.4"
33
35
  },
34
36
  "devDependencies": {
35
- "@arc-ui/fonts": "^11.7.0",
36
- "@arc-ui/icons": "^11.7.0",
37
- "@arc-ui/tokens": "^11.7.0",
37
+ "@arc-ui/fonts": "^11.9.0",
38
+ "@arc-ui/icons": "^11.9.0",
39
+ "@arc-ui/tokens": "^11.9.0",
38
40
  "@babel/core": "^7.14.3",
39
41
  "@babel/helper-define-map": "^7.14.3",
40
42
  "@storybook/addon-essentials": "^6.3.6",
@@ -1,31 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var filterDataAttrs = require('../_shared/cjs/filter-data-attrs-a30dcf5f.js');
6
- var Image = require('../_shared/cjs/Image-0e393cbf.js');
7
- var React = require('react');
8
- var Box = require('../_shared/cjs/Box-ebe2b7be.js');
9
- require('../_shared/cjs/index-45bfb67b.js');
10
- require('../_shared/cjs/suffix-modifier-1ee2da04.js');
11
- require('../_shared/cjs/Surface-b7c51b2b.js');
12
-
13
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
14
-
15
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
16
-
17
- // Update tests for box surface
18
- /**
19
- * Use `MediaCard` to contain content and an image about a single subject.
20
- */
21
- var MediaCard = function (_a) {
22
- var isBorderRadius = _a.isBorderRadius, isFullHeight = _a.isFullHeight, cardFooter = _a.cardFooter, borderWidth = _a.borderWidth, surface = _a.surface, elevationLevel = _a.elevationLevel, imageSrc = _a.imageSrc, imageAlt = _a.imageAlt, imageLoading = _a.imageLoading, imageSizes = _a.imageSizes, imageSrcSet = _a.imageSrcSet, children = _a.children, props = filterDataAttrs.__rest(_a, ["isBorderRadius", "isFullHeight", "cardFooter", "borderWidth", "surface", "elevationLevel", "imageSrc", "imageAlt", "imageLoading", "imageSizes", "imageSrcSet", "children"]);
23
- return (React__default["default"].createElement(Box.Box, filterDataAttrs.__assign({ isFullHeight: isFullHeight, surface: surface, elevationLevel: elevationLevel, isBorderRadius: isBorderRadius, borderWidth: borderWidth }, filterDataAttrs.filterDataAttrs(props)),
24
- React__default["default"].createElement("div", { className: "arc-MediaCard-wrapper" },
25
- React__default["default"].createElement("div", { className: "arc-MediaCard-imageContainer" },
26
- React__default["default"].createElement(Image.Image, { alt: imageAlt, loading: imageLoading, sizes: imageSizes, src: imageSrc, srcSet: imageSrcSet })),
27
- React__default["default"].createElement("div", { className: "arc-MediaCard-section" }, children),
28
- cardFooter && (React__default["default"].createElement("div", { className: "arc-MediaCard-section" }, cardFooter)))));
29
- };
30
-
31
- exports.MediaCard = MediaCard;
@@ -1,23 +0,0 @@
1
- import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/filter-data-attrs-afdb7d32.js';
2
- import { I as Image } from '../_shared/esm/Image-3ed3863c.js';
3
- import React__default from 'react';
4
- import { B as Box } from '../_shared/esm/Box-06d99d8a.js';
5
- import '../_shared/esm/index-2ae58626.js';
6
- import '../_shared/esm/suffix-modifier-7e640670.js';
7
- import '../_shared/esm/Surface-dde51789.js';
8
-
9
- // Update tests for box surface
10
- /**
11
- * Use `MediaCard` to contain content and an image about a single subject.
12
- */
13
- var MediaCard = function (_a) {
14
- var isBorderRadius = _a.isBorderRadius, isFullHeight = _a.isFullHeight, cardFooter = _a.cardFooter, borderWidth = _a.borderWidth, surface = _a.surface, elevationLevel = _a.elevationLevel, imageSrc = _a.imageSrc, imageAlt = _a.imageAlt, imageLoading = _a.imageLoading, imageSizes = _a.imageSizes, imageSrcSet = _a.imageSrcSet, children = _a.children, props = __rest(_a, ["isBorderRadius", "isFullHeight", "cardFooter", "borderWidth", "surface", "elevationLevel", "imageSrc", "imageAlt", "imageLoading", "imageSizes", "imageSrcSet", "children"]);
15
- return (React__default.createElement(Box, __assign({ isFullHeight: isFullHeight, surface: surface, elevationLevel: elevationLevel, isBorderRadius: isBorderRadius, borderWidth: borderWidth }, filterDataAttrs(props)),
16
- React__default.createElement("div", { className: "arc-MediaCard-wrapper" },
17
- React__default.createElement("div", { className: "arc-MediaCard-imageContainer" },
18
- React__default.createElement(Image, { alt: imageAlt, loading: imageLoading, sizes: imageSizes, src: imageSrc, srcSet: imageSrcSet })),
19
- React__default.createElement("div", { className: "arc-MediaCard-section" }, children),
20
- cardFooter && (React__default.createElement("div", { className: "arc-MediaCard-section" }, cardFooter)))));
21
- };
22
-
23
- export { MediaCard };
@@ -1,7 +0,0 @@
1
- {
2
- "name": "@arc-ui/mediacard",
3
- "types": "./MediaCard.esm.d.ts",
4
- "main": "./MediaCard.cjs.js",
5
- "module": "./MediaCard.esm.js",
6
- "private": true
7
- }
@@ -1,39 +0,0 @@
1
- /// <reference types="react" />
2
- import React from "react";
3
- import { FC } from "react";
4
- import { SurfaceBackgroundColor, SurfacePadding } from "./Surface-b7c51b2b";
5
- /**
6
- * Use `Box` as a simple way to group bespoke content and interactive elements together.
7
- */
8
- declare const Box: FC<BoxProps>;
9
- interface BoxProps {
10
- /**
11
- * Contents of the Box.
12
- */
13
- children: React.ReactNode;
14
- /**
15
- * Set Box to fill parent element.
16
- */
17
- isFullHeight?: boolean;
18
- /**
19
- * Add rounded corners to the box.
20
- */
21
- isBorderRadius?: boolean;
22
- /**
23
- * The border width of the box.
24
- */
25
- borderWidth?: "thin" | "medium";
26
- /**
27
- * Box shadow for the box.
28
- */
29
- elevationLevel?: "1" | "2";
30
- /**
31
- * Padding for the box.
32
- */
33
- padding?: SurfacePadding;
34
- /**
35
- * Background color for the box.
36
- */
37
- surface?: SurfaceBackgroundColor;
38
- }
39
- export { Box, BoxProps };
@@ -1,30 +0,0 @@
1
- 'use strict';
2
-
3
- var filterDataAttrs = require('./filter-data-attrs-a30dcf5f.js');
4
- var React = require('react');
5
- var index = require('./index-45bfb67b.js');
6
- var Surface = require('./Surface-b7c51b2b.js');
7
-
8
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
9
-
10
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
11
-
12
- // Do equal height boxes story
13
- /**
14
- * Use `Box` as a simple way to group bespoke content and interactive elements together.
15
- */
16
- var Box = function (_a) {
17
- var _b;
18
- var children = _a.children, borderWidth = _a.borderWidth, elevationLevel = _a.elevationLevel, padding = _a.padding, _c = _a.isFullHeight, isFullHeight = _c === void 0 ? false : _c, _d = _a.isBorderRadius, isBorderRadius = _d === void 0 ? false : _d, _e = _a.surface, surface = _e === void 0 ? "white" : _e, props = filterDataAttrs.__rest(_a, ["children", "borderWidth", "elevationLevel", "padding", "isFullHeight", "isBorderRadius", "surface"]);
19
- return (React__default["default"].createElement("div", filterDataAttrs.__assign({ className: index.classNames("arc-Box", (_b = {},
20
- _b["arc-Box--fullHeight"] = isFullHeight,
21
- _b["arc-Box--borderRadius"] = isBorderRadius,
22
- _b["arc-Box--borderThin"] = borderWidth === "thin",
23
- _b["arc-Box--borderMedium"] = borderWidth === "medium",
24
- _b["arc-Box--elevation1"] = elevationLevel === "1",
25
- _b["arc-Box--elevation2"] = elevationLevel === "2",
26
- _b)) }, filterDataAttrs.filterDataAttrs(props)),
27
- React__default["default"].createElement(Surface.Surface, { padding: padding, background: surface }, children)));
28
- };
29
-
30
- exports.Box = Box;
@@ -1,23 +0,0 @@
1
- 'use strict';
2
-
3
- var React = require('react');
4
-
5
- function $010c2913dbd2fe3d$export$5cae361ad82dce8b(value) {
6
- const ref = React.useRef({
7
- value: value,
8
- previous: value
9
- }); // We compare values before making an update to ensure that
10
- // a change has been made. This ensures the previous value is
11
- // persisted correctly between renders.
12
- return React.useMemo(()=>{
13
- if (ref.current.value !== value) {
14
- ref.current.previous = ref.current.value;
15
- ref.current.value = value;
16
- }
17
- return ref.current.previous;
18
- }, [
19
- value
20
- ]);
21
- }
22
-
23
- exports.$010c2913dbd2fe3d$export$5cae361ad82dce8b = $010c2913dbd2fe3d$export$5cae361ad82dce8b;
@@ -1,39 +0,0 @@
1
- /// <reference types="react" />
2
- import React from "react";
3
- import { FC } from "react";
4
- import { SurfaceBackgroundColor, SurfacePadding } from "./Surface-dde51789";
5
- /**
6
- * Use `Box` as a simple way to group bespoke content and interactive elements together.
7
- */
8
- declare const Box: FC<BoxProps>;
9
- interface BoxProps {
10
- /**
11
- * Contents of the Box.
12
- */
13
- children: React.ReactNode;
14
- /**
15
- * Set Box to fill parent element.
16
- */
17
- isFullHeight?: boolean;
18
- /**
19
- * Add rounded corners to the box.
20
- */
21
- isBorderRadius?: boolean;
22
- /**
23
- * The border width of the box.
24
- */
25
- borderWidth?: "thin" | "medium";
26
- /**
27
- * Box shadow for the box.
28
- */
29
- elevationLevel?: "1" | "2";
30
- /**
31
- * Padding for the box.
32
- */
33
- padding?: SurfacePadding;
34
- /**
35
- * Background color for the box.
36
- */
37
- surface?: SurfaceBackgroundColor;
38
- }
39
- export { Box, BoxProps };