@doist/reactist 25.0.0-beta.2 → 25.0.0-beta.3

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 (345) hide show
  1. package/README.md +35 -16
  2. package/dist/reactist.cjs.development.js +448 -422
  3. package/dist/reactist.cjs.development.js.map +1 -1
  4. package/dist/reactist.cjs.production.min.js +1 -1
  5. package/dist/reactist.cjs.production.min.js.map +1 -1
  6. package/es/alert/alert.js +13 -13
  7. package/es/alert/alert.js.map +1 -1
  8. package/es/alert/alert.module.css.js +1 -1
  9. package/es/avatar/avatar.js +6 -6
  10. package/es/avatar/avatar.js.map +1 -1
  11. package/es/avatar/avatar.module.css.js +1 -1
  12. package/es/avatar/utils.js.map +1 -1
  13. package/es/badge/badge.js +4 -4
  14. package/es/badge/badge.js.map +1 -1
  15. package/es/badge/badge.module.css.js +1 -1
  16. package/es/banner/banner.js +16 -16
  17. package/es/banner/banner.js.map +1 -1
  18. package/es/banner/banner.module.css.js +1 -1
  19. package/es/base-field/base-field.js +25 -25
  20. package/es/base-field/base-field.js.map +1 -1
  21. package/es/base-field/base-field.module.css.js +1 -1
  22. package/es/box/box.js +12 -12
  23. package/es/box/box.js.map +1 -1
  24. package/es/box/box.module.css.js +1 -1
  25. package/es/box/gap.module.css.js +1 -1
  26. package/es/box/margin.module.css.js +1 -1
  27. package/es/box/padding.module.css.js +1 -1
  28. package/es/box/width.module.css.js +1 -1
  29. package/es/button/button.js +19 -19
  30. package/es/button/button.js.map +1 -1
  31. package/es/button/button.module.css.js +1 -1
  32. package/es/checkbox-field/checkbox-field.js +16 -16
  33. package/es/checkbox-field/checkbox-field.js.map +1 -1
  34. package/es/checkbox-field/checkbox-field.module.css.js +1 -1
  35. package/es/checkbox-field/checkbox-icon.js +3 -3
  36. package/es/checkbox-field/checkbox-icon.js.map +1 -1
  37. package/es/checkbox-field/use-fork-ref.js.map +1 -1
  38. package/es/columns/columns.js +6 -6
  39. package/es/columns/columns.js.map +1 -1
  40. package/es/columns/columns.module.css.js +1 -1
  41. package/es/components/color-picker/color-picker.js +11 -11
  42. package/es/components/color-picker/color-picker.js.map +1 -1
  43. package/es/components/color-picker/index.js +1 -5
  44. package/es/components/color-picker/index.js.map +1 -1
  45. package/es/components/deprecated-button/deprecated-button.js +4 -4
  46. package/es/components/deprecated-button/deprecated-button.js.map +1 -1
  47. package/es/components/deprecated-button/index.js +1 -4
  48. package/es/components/deprecated-button/index.js.map +1 -1
  49. package/es/components/deprecated-dropdown/dropdown.js +11 -11
  50. package/es/components/deprecated-dropdown/dropdown.js.map +1 -1
  51. package/es/components/deprecated-dropdown/index.js +1 -4
  52. package/es/components/deprecated-dropdown/index.js.map +1 -1
  53. package/es/components/deprecated-input/index.js +1 -4
  54. package/es/components/deprecated-input/index.js.map +1 -1
  55. package/es/components/deprecated-input/input.js +3 -3
  56. package/es/components/deprecated-input/input.js.map +1 -1
  57. package/es/components/deprecated-select/index.js +1 -4
  58. package/es/components/deprecated-select/index.js.map +1 -1
  59. package/es/components/deprecated-select/select.js +3 -3
  60. package/es/components/deprecated-select/select.js.map +1 -1
  61. package/es/components/key-capturer/index.js +1 -5
  62. package/es/components/key-capturer/index.js.map +1 -1
  63. package/es/components/key-capturer/key-capturer.js +3 -3
  64. package/es/components/key-capturer/key-capturer.js.map +1 -1
  65. package/es/components/keyboard-shortcut/index.js +1 -4
  66. package/es/components/keyboard-shortcut/index.js.map +1 -1
  67. package/es/components/keyboard-shortcut/keyboard-shortcut.js +4 -4
  68. package/es/components/keyboard-shortcut/keyboard-shortcut.js.map +1 -1
  69. package/es/components/progress-bar/index.js +1 -4
  70. package/es/components/progress-bar/index.js.map +1 -1
  71. package/es/components/progress-bar/progress-bar.js +5 -5
  72. package/es/components/progress-bar/progress-bar.js.map +1 -1
  73. package/es/components/time/index.js +1 -4
  74. package/es/components/time/index.js.map +1 -1
  75. package/es/components/time/time-utils.js.map +1 -1
  76. package/es/components/time/time.js +5 -5
  77. package/es/components/time/time.js.map +1 -1
  78. package/es/divider/divider.js +4 -4
  79. package/es/divider/divider.js.map +1 -1
  80. package/es/divider/divider.module.css.js +1 -1
  81. package/es/heading/heading.js +5 -5
  82. package/es/heading/heading.js.map +1 -1
  83. package/es/heading/heading.module.css.js +1 -1
  84. package/es/hidden/hidden.js +5 -5
  85. package/es/hidden/hidden.js.map +1 -1
  86. package/es/hidden/hidden.module.css.js +1 -1
  87. package/es/hidden-visually/hidden-visually.js +4 -4
  88. package/es/hidden-visually/hidden-visually.js.map +1 -1
  89. package/es/hidden-visually/hidden-visually.module.css.js +1 -1
  90. package/es/icons/alert-icon.js +10 -10
  91. package/es/icons/alert-icon.js.map +1 -1
  92. package/es/icons/close-icon.js +3 -3
  93. package/es/icons/close-icon.js.map +1 -1
  94. package/es/icons/password-hidden-icon.js +6 -6
  95. package/es/icons/password-hidden-icon.js.map +1 -1
  96. package/es/icons/password-visible-icon.js +5 -5
  97. package/es/icons/password-visible-icon.js.map +1 -1
  98. package/es/index.js +13 -15
  99. package/es/index.js.map +1 -1
  100. package/es/inline/inline.js +2 -2
  101. package/es/inline/inline.js.map +1 -1
  102. package/es/loading/loading.js +3 -3
  103. package/es/loading/loading.js.map +1 -1
  104. package/es/menu/menu.js +32 -32
  105. package/es/menu/menu.js.map +1 -1
  106. package/es/modal/modal.js +45 -45
  107. package/es/modal/modal.js.map +1 -1
  108. package/es/modal/modal.module.css.js +1 -1
  109. package/es/notice/notice.js +8 -8
  110. package/es/notice/notice.js.map +1 -1
  111. package/es/notice/notice.module.css.js +1 -1
  112. package/es/password-field/password-field.js +7 -7
  113. package/es/password-field/password-field.js.map +1 -1
  114. package/es/prose/prose.js +4 -4
  115. package/es/prose/prose.js.map +1 -1
  116. package/es/prose/prose.module.css.js +1 -1
  117. package/es/select-field/select-field.js +11 -11
  118. package/es/select-field/select-field.js.map +1 -1
  119. package/es/select-field/select-field.module.css.js +1 -1
  120. package/es/spinner/spinner.js +9 -9
  121. package/es/spinner/spinner.js.map +1 -1
  122. package/es/spinner/spinner.module.css.js +1 -1
  123. package/es/stack/stack.js +4 -4
  124. package/es/stack/stack.js.map +1 -1
  125. package/es/switch-field/switch-field.js +18 -18
  126. package/es/switch-field/switch-field.js.map +1 -1
  127. package/es/switch-field/switch-field.module.css.js +1 -1
  128. package/es/tabs/tabs.js +23 -23
  129. package/es/tabs/tabs.js.map +1 -1
  130. package/es/tabs/tabs.module.css.js +1 -1
  131. package/es/text/text.js +5 -5
  132. package/es/text/text.js.map +1 -1
  133. package/es/text/text.module.css.js +1 -1
  134. package/es/text-area/text-area.js +14 -14
  135. package/es/text-area/text-area.js.map +1 -1
  136. package/es/text-area/text-area.module.css.js +1 -1
  137. package/es/text-field/text-field.js +13 -13
  138. package/es/text-field/text-field.js.map +1 -1
  139. package/es/text-field/text-field.module.css.js +1 -1
  140. package/es/text-link/text-link.js +5 -5
  141. package/es/text-link/text-link.js.map +1 -1
  142. package/es/text-link/text-link.module.css.js +1 -1
  143. package/es/toast/static-toast.js +5 -5
  144. package/es/toast/static-toast.js.map +1 -1
  145. package/es/toast/toast-animation.js.map +1 -1
  146. package/es/toast/toast.module.css.js +1 -1
  147. package/es/toast/use-toasts.js +4 -4
  148. package/es/toast/use-toasts.js.map +1 -1
  149. package/es/tooltip/tooltip.js +9 -9
  150. package/es/tooltip/tooltip.js.map +1 -1
  151. package/es/tooltip/tooltip.module.css.js +1 -1
  152. package/es/utils/common-helpers.js +2 -2
  153. package/es/utils/common-helpers.js.map +1 -1
  154. package/es/utils/polymorphism.js +2 -2
  155. package/es/utils/polymorphism.js.map +1 -1
  156. package/es/utils/responsive-props.js.map +1 -1
  157. package/lib/alert/alert.d.ts +3 -3
  158. package/lib/alert/alert.js +1 -1
  159. package/lib/alert/alert.js.map +1 -1
  160. package/lib/avatar/avatar.d.ts +2 -2
  161. package/lib/avatar/avatar.js +1 -1
  162. package/lib/avatar/avatar.js.map +1 -1
  163. package/lib/avatar/utils.js.map +1 -1
  164. package/lib/badge/badge.d.ts +2 -2
  165. package/lib/badge/badge.js +1 -1
  166. package/lib/badge/badge.js.map +1 -1
  167. package/lib/banner/banner.d.ts +2 -2
  168. package/lib/banner/banner.js +1 -1
  169. package/lib/banner/banner.js.map +1 -1
  170. package/lib/base-field/base-field.d.ts +9 -9
  171. package/lib/base-field/base-field.js +1 -1
  172. package/lib/base-field/base-field.js.map +1 -1
  173. package/lib/box/box.d.ts +15 -15
  174. package/lib/box/box.js +1 -1
  175. package/lib/box/box.js.map +1 -1
  176. package/lib/button/button.d.ts +4 -4
  177. package/lib/button/button.js +1 -1
  178. package/lib/button/button.js.map +1 -1
  179. package/lib/checkbox-field/checkbox-field.js +1 -1
  180. package/lib/checkbox-field/checkbox-field.js.map +1 -1
  181. package/lib/checkbox-field/checkbox-icon.d.ts +1 -1
  182. package/lib/checkbox-field/checkbox-icon.js +1 -1
  183. package/lib/checkbox-field/checkbox-icon.js.map +1 -1
  184. package/lib/checkbox-field/use-fork-ref.js.map +1 -1
  185. package/lib/columns/columns.d.ts +4 -4
  186. package/lib/columns/columns.js +1 -1
  187. package/lib/columns/columns.js.map +1 -1
  188. package/lib/components/color-picker/color-picker.d.ts +3 -3
  189. package/lib/components/color-picker/color-picker.js +1 -1
  190. package/lib/components/color-picker/color-picker.js.map +1 -1
  191. package/lib/components/deprecated-button/deprecated-button.d.ts +4 -4
  192. package/lib/components/deprecated-button/deprecated-button.js +1 -1
  193. package/lib/components/deprecated-button/deprecated-button.js.map +1 -1
  194. package/lib/components/deprecated-dropdown/dropdown.d.ts +5 -5
  195. package/lib/components/deprecated-dropdown/dropdown.js +1 -1
  196. package/lib/components/deprecated-dropdown/dropdown.js.map +1 -1
  197. package/lib/components/deprecated-input/input.js +1 -1
  198. package/lib/components/deprecated-input/input.js.map +1 -1
  199. package/lib/components/deprecated-select/select.d.ts +2 -2
  200. package/lib/components/deprecated-select/select.js +1 -1
  201. package/lib/components/deprecated-select/select.js.map +1 -1
  202. package/lib/components/key-capturer/key-capturer.d.ts +5 -5
  203. package/lib/components/key-capturer/key-capturer.js +1 -1
  204. package/lib/components/key-capturer/key-capturer.js.map +1 -1
  205. package/lib/components/keyboard-shortcut/keyboard-shortcut.d.ts +3 -3
  206. package/lib/components/keyboard-shortcut/keyboard-shortcut.js +1 -1
  207. package/lib/components/keyboard-shortcut/keyboard-shortcut.js.map +1 -1
  208. package/lib/components/progress-bar/progress-bar.d.ts +1 -1
  209. package/lib/components/progress-bar/progress-bar.js +1 -1
  210. package/lib/components/progress-bar/progress-bar.js.map +1 -1
  211. package/lib/components/time/time-utils.d.ts +1 -1
  212. package/lib/components/time/time-utils.js +1 -1
  213. package/lib/components/time/time-utils.js.map +1 -1
  214. package/lib/components/time/time.d.ts +2 -2
  215. package/lib/components/time/time.js +1 -1
  216. package/lib/components/time/time.js.map +1 -1
  217. package/lib/divider/divider.js +1 -1
  218. package/lib/divider/divider.js.map +1 -1
  219. package/lib/heading/heading.d.ts +2 -2
  220. package/lib/heading/heading.js +1 -1
  221. package/lib/heading/heading.js.map +1 -1
  222. package/lib/hidden/hidden.d.ts +4 -4
  223. package/lib/hidden/hidden.js +1 -1
  224. package/lib/hidden/hidden.js.map +1 -1
  225. package/lib/hidden-visually/hidden-visually.d.ts +1 -1
  226. package/lib/hidden-visually/hidden-visually.js +1 -1
  227. package/lib/hidden-visually/hidden-visually.js.map +1 -1
  228. package/lib/icons/alert-icon.js +1 -1
  229. package/lib/icons/alert-icon.js.map +1 -1
  230. package/lib/icons/close-icon.js +1 -1
  231. package/lib/icons/close-icon.js.map +1 -1
  232. package/lib/icons/password-hidden-icon.js +1 -1
  233. package/lib/icons/password-hidden-icon.js.map +1 -1
  234. package/lib/icons/password-visible-icon.js +1 -1
  235. package/lib/icons/password-visible-icon.js.map +1 -1
  236. package/lib/index.js +1 -1
  237. package/lib/inline/inline.d.ts +1 -1
  238. package/lib/inline/inline.js +1 -1
  239. package/lib/inline/inline.js.map +1 -1
  240. package/lib/loading/loading.d.ts +3 -3
  241. package/lib/loading/loading.js +1 -1
  242. package/lib/loading/loading.js.map +1 -1
  243. package/lib/menu/menu.d.ts +1 -1
  244. package/lib/menu/menu.js +1 -1
  245. package/lib/menu/menu.js.map +1 -1
  246. package/lib/modal/modal-stories-components.d.ts +2 -2
  247. package/lib/modal/modal.d.ts +4 -4
  248. package/lib/modal/modal.js +1 -1
  249. package/lib/modal/modal.js.map +1 -1
  250. package/lib/notice/notice.d.ts +1 -1
  251. package/lib/notice/notice.js +1 -1
  252. package/lib/notice/notice.js.map +1 -1
  253. package/lib/password-field/password-field.js +1 -1
  254. package/lib/password-field/password-field.js.map +1 -1
  255. package/lib/prose/prose.js +1 -1
  256. package/lib/prose/prose.js.map +1 -1
  257. package/lib/select-field/select-field.js +1 -1
  258. package/lib/select-field/select-field.js.map +1 -1
  259. package/lib/spinner/spinner.js +1 -1
  260. package/lib/spinner/spinner.js.map +1 -1
  261. package/lib/stack/stack.d.ts +1 -1
  262. package/lib/stack/stack.js +1 -1
  263. package/lib/stack/stack.js.map +1 -1
  264. package/lib/switch-field/switch-field.js +1 -1
  265. package/lib/switch-field/switch-field.js.map +1 -1
  266. package/lib/tabs/tabs.d.ts +5 -6
  267. package/lib/tabs/tabs.js +1 -1
  268. package/lib/tabs/tabs.js.map +1 -1
  269. package/lib/text/text.d.ts +1 -1
  270. package/lib/text/text.js +1 -1
  271. package/lib/text/text.js.map +1 -1
  272. package/lib/text-area/text-area.js +1 -1
  273. package/lib/text-area/text-area.js.map +1 -1
  274. package/lib/text-field/text-field.d.ts +1 -1
  275. package/lib/text-field/text-field.js +1 -1
  276. package/lib/text-field/text-field.js.map +1 -1
  277. package/lib/text-link/text-link.d.ts +1 -1
  278. package/lib/text-link/text-link.js +1 -1
  279. package/lib/text-link/text-link.js.map +1 -1
  280. package/lib/toast/static-toast.d.ts +2 -2
  281. package/lib/toast/static-toast.js +1 -1
  282. package/lib/toast/static-toast.js.map +1 -1
  283. package/lib/toast/toast-animation.d.ts +1 -1
  284. package/lib/toast/toast-animation.js.map +1 -1
  285. package/lib/toast/use-toasts.d.ts +3 -3
  286. package/lib/toast/use-toasts.js +1 -1
  287. package/lib/toast/use-toasts.js.map +1 -1
  288. package/lib/tooltip/tooltip.js +1 -1
  289. package/lib/tooltip/tooltip.js.map +1 -1
  290. package/lib/utils/common-helpers.js +1 -1
  291. package/lib/utils/common-helpers.js.map +1 -1
  292. package/lib/utils/common-types.d.ts +8 -8
  293. package/lib/utils/polymorphism.d.ts +9 -9
  294. package/lib/utils/polymorphism.js +1 -1
  295. package/lib/utils/polymorphism.js.map +1 -1
  296. package/lib/utils/responsive-props.d.ts +3 -3
  297. package/lib/utils/responsive-props.js.map +1 -1
  298. package/lib/utils/test-helpers.d.ts +1 -1
  299. package/package.json +13 -7
  300. package/lib/alert/alert.test.d.ts +0 -1
  301. package/lib/avatar/avatar.test.d.ts +0 -1
  302. package/lib/avatar/utils.test.d.ts +0 -1
  303. package/lib/badge/badge.test.d.ts +0 -1
  304. package/lib/banner/banner.test.d.ts +0 -1
  305. package/lib/box/box.test.d.ts +0 -1
  306. package/lib/button/button.test.d.ts +0 -1
  307. package/lib/checkbox-field/checkbox-field.test.d.ts +0 -1
  308. package/lib/columns/columns.test.d.ts +0 -1
  309. package/lib/components/color-picker/color-picker.test.d.ts +0 -1
  310. package/lib/components/deprecated-button/deprecated-button.test.d.ts +0 -1
  311. package/lib/components/deprecated-dropdown/dropdown.test.d.ts +0 -1
  312. package/lib/components/deprecated-input/input.test.d.ts +0 -1
  313. package/lib/components/deprecated-select/select.test.d.ts +0 -1
  314. package/lib/components/key-capturer/key-capturer.test.d.ts +0 -1
  315. package/lib/components/keyboard-shortcut/keyboard-shortcut.test.d.ts +0 -1
  316. package/lib/components/progress-bar/progress-bar.test.d.ts +0 -1
  317. package/lib/components/time/time-utils.test.d.ts +0 -1
  318. package/lib/components/time/time.test.d.ts +0 -1
  319. package/lib/heading/heading.test.d.ts +0 -1
  320. package/lib/hidden/hidden.test.d.ts +0 -1
  321. package/lib/hidden-visually/hidden-visually.test.d.ts +0 -1
  322. package/lib/inline/inline.test.d.ts +0 -1
  323. package/lib/loading/loading.test.d.ts +0 -1
  324. package/lib/menu/menu.test.d.ts +0 -1
  325. package/lib/modal/modal.test.d.ts +0 -1
  326. package/lib/notice/notice.test.d.ts +0 -1
  327. package/lib/password-field/password-field.test.d.ts +0 -1
  328. package/lib/prose/prose.test.d.ts +0 -1
  329. package/lib/select-field/select-field.test.d.ts +0 -1
  330. package/lib/stack/stack.test.d.ts +0 -1
  331. package/lib/switch-field/switch-field.test.d.ts +0 -1
  332. package/lib/tabs/tabs.test.d.ts +0 -1
  333. package/lib/text/text.test.d.ts +0 -1
  334. package/lib/text-area/text-area.test.d.ts +0 -1
  335. package/lib/text-field/text-field.test.d.ts +0 -1
  336. package/lib/toast/toast.test.d.ts +0 -1
  337. package/lib/tooltip/tooltip.test.d.ts +0 -1
  338. package/styles/color-picker.css +0 -9
  339. package/styles/deprecated-button.css +0 -7
  340. package/styles/dropdown.css +0 -8
  341. package/styles/progress-bar.css +0 -7
  342. package/styles/select.css +0 -1
  343. package/styles/time.css +0 -7
  344. /package/styles/{input.css → index.css} +0 -0
  345. /package/styles/{spinner.module.css.css → spinner.css} +0 -0
@@ -1,24 +1,24 @@
1
- import { createElement } from 'react';
2
- import styles from './spinner.module.css.js';
1
+ import * as React from 'react';
2
+ import modules_c7f5018f from './spinner.module.css.js';
3
3
 
4
4
  function Spinner({
5
5
  size = 24
6
6
  }) {
7
- return /*#__PURE__*/createElement("svg", {
7
+ return /*#__PURE__*/React.createElement("svg", {
8
8
  "aria-hidden": true,
9
9
  width: size,
10
10
  height: size,
11
11
  viewBox: "0 0 24 24",
12
- className: styles.svg,
12
+ className: modules_c7f5018f.svg,
13
13
  "data-chromatic": "ignore"
14
- }, /*#__PURE__*/createElement("g", {
14
+ }, /*#__PURE__*/React.createElement("g", {
15
15
  fill: "none",
16
16
  fillRule: "nonzero"
17
- }, /*#__PURE__*/createElement("path", {
18
- className: styles.tint,
17
+ }, /*#__PURE__*/React.createElement("path", {
18
+ className: modules_c7f5018f.tint,
19
19
  d: "M17.945 3.958A9.955 9.955 0 0 0 12 2c-2.19 0-4.217.705-5.865 1.9L5.131 2.16A11.945 11.945 0 0 1 12 0c2.59 0 4.99.82 6.95 2.217l-1.005 1.741z"
20
- }), /*#__PURE__*/createElement("path", {
21
- className: styles.fill,
20
+ }), /*#__PURE__*/React.createElement("path", {
21
+ className: modules_c7f5018f.fill,
22
22
  d: "M5.13 2.16L6.136 3.9A9.987 9.987 0 0 0 2 12c0 5.523 4.477 10 10 10s10-4.477 10-10a9.986 9.986 0 0 0-4.055-8.042l1.006-1.741A11.985 11.985 0 0 1 24 12c0 6.627-5.373 12-12 12S0 18.627 0 12c0-4.073 2.029-7.671 5.13-9.84z"
23
23
  })));
24
24
  }
@@ -1 +1 @@
1
- {"version":3,"file":"spinner.js","sources":["../../src/spinner/spinner.tsx"],"sourcesContent":["import * as React from 'react'\nimport styles from './spinner.module.css'\n\nfunction Spinner({ size = 24 }: { size?: number }) {\n return (\n <svg\n aria-hidden\n width={size}\n height={size}\n viewBox=\"0 0 24 24\"\n className={styles.svg}\n data-chromatic=\"ignore\"\n >\n <g fill=\"none\" fillRule=\"nonzero\">\n <path\n className={styles.tint}\n d=\"M17.945 3.958A9.955 9.955 0 0 0 12 2c-2.19 0-4.217.705-5.865 1.9L5.131 2.16A11.945 11.945 0 0 1 12 0c2.59 0 4.99.82 6.95 2.217l-1.005 1.741z\"\n />\n <path\n className={styles.fill}\n d=\"M5.13 2.16L6.136 3.9A9.987 9.987 0 0 0 2 12c0 5.523 4.477 10 10 10s10-4.477 10-10a9.986 9.986 0 0 0-4.055-8.042l1.006-1.741A11.985 11.985 0 0 1 24 12c0 6.627-5.373 12-12 12S0 18.627 0 12c0-4.073 2.029-7.671 5.13-9.84z\"\n />\n </g>\n </svg>\n )\n}\n\nexport { Spinner }\n"],"names":["Spinner","size","React","width","height","viewBox","className","styles","svg","fill","fillRule","tint","d"],"mappings":";;;AAGA,SAASA,OAAT,CAAiB;EAAEC,IAAI,GAAG;AAAT,CAAjB;EACI,oBACIC,aAAA,MAAA;;IAEIC,KAAK,EAAEF;IACPG,MAAM,EAAEH;IACRI,OAAO,EAAC;IACRC,SAAS,EAAEC,MAAM,CAACC;sBACH;GANnB,eAQIN,aAAA,IAAA;IAAGO,IAAI,EAAC;IAAOC,QAAQ,EAAC;GAAxB,eACIR,aAAA,OAAA;IACII,SAAS,EAAEC,MAAM,CAACI;IAClBC,CAAC,EAAC;GAFN,CADJ,eAKIV,aAAA,OAAA;IACII,SAAS,EAAEC,MAAM,CAACE;IAClBG,CAAC,EAAC;GAFN,CALJ,CARJ,CADJ;AAqBH;;;;"}
1
+ {"version":3,"file":"spinner.js","sources":["../../src/spinner/spinner.tsx"],"sourcesContent":["import * as React from 'react'\nimport styles from './spinner.module.css'\n\nfunction Spinner({ size = 24 }: { size?: number }) {\n return (\n <svg\n aria-hidden\n width={size}\n height={size}\n viewBox=\"0 0 24 24\"\n className={styles.svg}\n data-chromatic=\"ignore\"\n >\n <g fill=\"none\" fillRule=\"nonzero\">\n <path\n className={styles.tint}\n d=\"M17.945 3.958A9.955 9.955 0 0 0 12 2c-2.19 0-4.217.705-5.865 1.9L5.131 2.16A11.945 11.945 0 0 1 12 0c2.59 0 4.99.82 6.95 2.217l-1.005 1.741z\"\n />\n <path\n className={styles.fill}\n d=\"M5.13 2.16L6.136 3.9A9.987 9.987 0 0 0 2 12c0 5.523 4.477 10 10 10s10-4.477 10-10a9.986 9.986 0 0 0-4.055-8.042l1.006-1.741A11.985 11.985 0 0 1 24 12c0 6.627-5.373 12-12 12S0 18.627 0 12c0-4.073 2.029-7.671 5.13-9.84z\"\n />\n </g>\n </svg>\n )\n}\n\nexport { Spinner }\n"],"names":["Spinner","size","React","width","height","viewBox","className","styles","svg","createElement","fill","fillRule","tint","d"],"mappings":";;;AAGA,SAASA,OAAT,CAAiB;AAAEC,EAAAA,IAAI,GAAG,EAAA;AAAT,CAAjB,EAAiD;AAC7C,EAAA,oBACIC,mBAAA,MAAA;;AAEIC,IAAAA,KAAK,EAAEF;AACPG,IAAAA,MAAM,EAAEH;AACRI,IAAAA,OAAO,EAAC;IACRC,SAAS,EAAEC,gBAAM,CAACC;oBACH,EAAA,QAAA;GANnB,eAQIN,KAAA,CAAAO,aAAA,CAAA,GAAA,EAAA;AAAGC,IAAAA,IAAI,EAAC,MAAR;AAAeC,IAAAA,QAAQ,EAAC,SAAA;AAAxB,GAAA,eACIT,KACI,CAAAO,aADJ,CACI,MADJ,EACI;IAAAH,SAAS,EAAEC,gBAAM,CAACK,IAAlB;AACAC,IAAAA,CAAC,EAAC,8IAAA;AADF,GADJ,CADJ,eAKIX,KAAA,CAAAO,aAAA,CAAA,MAAA,EAAA;IACIH,SAAS,EAAEC,gBAAM,CAACG,IADtB;AAEIG,IAAAA,CAAC,EAAC,2NAAA;GAFN,CALJ,CARJ,CADJ,CAAA;AAqBH;;;;"}
@@ -1,4 +1,4 @@
1
1
  var modules_c7f5018f = {"svg":"_51539197","spinner":"_54fbe2b3","tint":"a0c466ed","fill":"_745b73d3"};
2
2
 
3
- export default modules_c7f5018f;
3
+ export { modules_c7f5018f as default };
4
4
  //# sourceMappingURL=spinner.module.css.js.map
package/es/stack/stack.js CHANGED
@@ -1,10 +1,10 @@
1
1
  import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
2
- import { createElement, Children, Fragment } from 'react';
2
+ import * as React from 'react';
3
+ import flattenChildren from 'react-keyed-flatten-children';
3
4
  import { polymorphicComponent } from '../utils/polymorphism.js';
4
5
  import { mapResponsiveProp } from '../utils/responsive-props.js';
5
6
  import { Box } from '../box/box.js';
6
7
  import { Divider } from '../divider/divider.js';
7
- import flattenChildren from 'react-keyed-flatten-children';
8
8
 
9
9
  const _excluded = ["as", "space", "align", "dividers", "width", "children", "exceptionallySetClassName"];
10
10
  const Stack = /*#__PURE__*/polymorphicComponent(function Stack(_ref, ref) {
@@ -20,7 +20,7 @@ const Stack = /*#__PURE__*/polymorphicComponent(function Stack(_ref, ref) {
20
20
  props = _objectWithoutProperties(_ref, _excluded);
21
21
 
22
22
  const alignItems = align === undefined ? undefined : mapResponsiveProp(align, align => align === 'start' ? 'flexStart' : align === 'end' ? 'flexEnd' : 'center');
23
- return /*#__PURE__*/createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
23
+ return /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
24
24
  display: "flex",
25
25
  flexDirection: "column",
26
26
  width: width,
@@ -29,7 +29,7 @@ const Stack = /*#__PURE__*/polymorphicComponent(function Stack(_ref, ref) {
29
29
  as: as,
30
30
  className: exceptionallySetClassName,
31
31
  ref: ref
32
- }), dividers !== 'none' ? Children.map(flattenChildren(children), (child, index) => index > 0 ? /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(Divider, {
32
+ }), dividers !== 'none' ? React.Children.map(flattenChildren(children), (child, index) => index > 0 ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider, {
33
33
  weight: dividers
34
34
  }), child) : child) : children);
35
35
  });
@@ -1 +1 @@
1
- {"version":3,"file":"stack.js","sources":["../../src/stack/stack.tsx"],"sourcesContent":["import * as React from 'react'\nimport flattenChildren from 'react-keyed-flatten-children'\nimport { polymorphicComponent } from '../utils/polymorphism'\nimport { mapResponsiveProp } from '../utils/responsive-props'\nimport { Box } from '../box'\nimport { Divider } from '../divider'\n\nimport type { ResponsiveProp } from '../utils/responsive-props'\nimport type { DividerWeight, Space } from '../utils/common-types'\nimport type { BoxProps, ReusableBoxProps } from '../box'\n\ntype Align = 'start' | 'center' | 'end'\n\ninterface StackProps extends ReusableBoxProps {\n /** Space between items */\n space?: ResponsiveProp<Space>\n /** Align items horizontally */\n align?: ResponsiveProp<Align>\n /** The weight of the dividers to add. Defaults to 'none', which means no dividers are added */\n dividers?: DividerWeight\n}\n\nconst Stack = polymorphicComponent<'div', StackProps>(function Stack(\n {\n as,\n space,\n align,\n dividers = 'none',\n width = 'full',\n children,\n exceptionallySetClassName,\n ...props\n },\n ref,\n) {\n const alignItems: BoxProps['alignItems'] =\n align === undefined\n ? undefined\n : mapResponsiveProp(align, (align) =>\n align === 'start' ? 'flexStart' : align === 'end' ? 'flexEnd' : 'center',\n )\n\n return (\n <Box\n {...props}\n display=\"flex\"\n flexDirection=\"column\"\n width={width}\n alignItems={alignItems}\n gap={space}\n as={as}\n className={exceptionallySetClassName}\n ref={ref}\n >\n {dividers !== 'none'\n ? React.Children.map(flattenChildren(children), (child, index) =>\n index > 0 ? (\n <>\n <Divider weight={dividers} />\n {child}\n </>\n ) : (\n child\n ),\n )\n : children}\n </Box>\n )\n})\n\nexport type { StackProps }\nexport { Stack }\n"],"names":["Stack","polymorphicComponent","ref","as","space","align","dividers","width","children","exceptionallySetClassName","props","alignItems","undefined","mapResponsiveProp","React","Box","display","flexDirection","gap","className","map","flattenChildren","child","index","Divider","weight"],"mappings":";;;;;;;;;MAsBMA,KAAK,gBAAGC,oBAAoB,CAAoB,SAASD,KAAT,OAWlDE,GAXkD;MAClD;IACIC,EADJ;IAEIC,KAFJ;IAGIC,KAHJ;IAIIC,QAAQ,GAAG,MAJf;IAKIC,KAAK,GAAG,MALZ;IAMIC,QANJ;IAOIC;;MACGC;;EAIP,MAAMC,UAAU,GACZN,KAAK,KAAKO,SAAV,GACMA,SADN,GAEMC,iBAAiB,CAACR,KAAD,EAASA,KAAD,IACrBA,KAAK,KAAK,OAAV,GAAoB,WAApB,GAAkCA,KAAK,KAAK,KAAV,GAAkB,SAAlB,GAA8B,QADnD,CAH3B;EAOA,oBACIS,aAAA,CAACC,GAAD,oCACQL,KADR;IAEIM,OAAO,EAAC,MAFZ;IAGIC,aAAa,EAAC,QAHlB;IAIIV,KAAK,EAAEA,KAJX;IAKII,UAAU,EAAEA,UALhB;IAMIO,GAAG,EAAEd,KANT;IAOID,EAAE,EAAEA,EAPR;IAQIgB,SAAS,EAAEV,yBARf;IASIP,GAAG,EAAEA;MAEJI,QAAQ,KAAK,MAAb,GACKQ,QAAA,CAAeM,GAAf,CAAmBC,eAAe,CAACb,QAAD,CAAlC,EAA8C,CAACc,KAAD,EAAQC,KAAR,KAC1CA,KAAK,GAAG,CAAR,gBACIT,aAAA,SAAA,MAAA,eACIA,aAAA,CAACU,OAAD;IAASC,MAAM,EAAEnB;GAAjB,CADJ,EAEKgB,KAFL,CADJ,GAMIA,KAPR,CADL,GAWKd,QAtBV,CADJ;AA0BH,CA9CiC;;;;"}
1
+ {"version":3,"file":"stack.js","sources":["../../src/stack/stack.tsx"],"sourcesContent":["import * as React from 'react'\nimport flattenChildren from 'react-keyed-flatten-children'\nimport { polymorphicComponent } from '../utils/polymorphism'\nimport { mapResponsiveProp } from '../utils/responsive-props'\nimport { Box } from '../box'\nimport { Divider } from '../divider'\n\nimport type { ResponsiveProp } from '../utils/responsive-props'\nimport type { DividerWeight, Space } from '../utils/common-types'\nimport type { BoxProps, ReusableBoxProps } from '../box'\n\ntype Align = 'start' | 'center' | 'end'\n\ninterface StackProps extends ReusableBoxProps {\n /** Space between items */\n space?: ResponsiveProp<Space>\n /** Align items horizontally */\n align?: ResponsiveProp<Align>\n /** The weight of the dividers to add. Defaults to 'none', which means no dividers are added */\n dividers?: DividerWeight\n}\n\nconst Stack = polymorphicComponent<'div', StackProps>(function Stack(\n {\n as,\n space,\n align,\n dividers = 'none',\n width = 'full',\n children,\n exceptionallySetClassName,\n ...props\n },\n ref,\n) {\n const alignItems: BoxProps['alignItems'] =\n align === undefined\n ? undefined\n : mapResponsiveProp(align, (align) =>\n align === 'start' ? 'flexStart' : align === 'end' ? 'flexEnd' : 'center',\n )\n\n return (\n <Box\n {...props}\n display=\"flex\"\n flexDirection=\"column\"\n width={width}\n alignItems={alignItems}\n gap={space}\n as={as}\n className={exceptionallySetClassName}\n ref={ref}\n >\n {dividers !== 'none'\n ? React.Children.map(flattenChildren(children), (child, index) =>\n index > 0 ? (\n <>\n <Divider weight={dividers} />\n {child}\n </>\n ) : (\n child\n ),\n )\n : children}\n </Box>\n )\n})\n\nexport type { StackProps }\nexport { Stack }\n"],"names":["Stack","polymorphicComponent","ref","as","space","align","dividers","width","children","exceptionallySetClassName","props","alignItems","undefined","mapResponsiveProp","React","createElement","Box","display","flexDirection","gap","className","Children","map","flattenChildren","child","index","Fragment","Divider","weight"],"mappings":";;;;;;;;;AAsBMA,MAAAA,KAAK,gBAAGC,oBAAoB,CAAoB,SAASD,KAAT,CAAA,IAAA,EAWlDE,GAXkD,EAW/C;EAAA,IAVH;IACIC,EADJ;IAEIC,KAFJ;IAGIC,KAHJ;AAIIC,IAAAA,QAAQ,GAAG,MAJf;AAKIC,IAAAA,KAAK,GAAG,MALZ;IAMIC,QANJ;AAOIC,IAAAA,yBAAAA;GAGD,GAAA,IAAA;AAAA,MAFIC,KAEJ,GAAA,wBAAA,CAAA,IAAA,EAAA,SAAA,CAAA,CAAA;;EAEH,MAAMC,UAAU,GACZN,KAAK,KAAKO,SAAV,GACMA,SADN,GAEMC,iBAAiB,CAACR,KAAD,EAASA,KAAD,IACrBA,KAAK,KAAK,OAAV,GAAoB,WAApB,GAAkCA,KAAK,KAAK,KAAV,GAAkB,SAAlB,GAA8B,QADnD,CAH3B,CAAA;AAOA,EAAA,oBACIS,KAAC,CAAAC,aAAD,CAACC,GAAD,oCACQN,KADR,CAAA,EAAA,EAAA,EAAA;AAEIO,IAAAA,OAAO,EAAC,MAFZ;AAGIC,IAAAA,aAAa,EAAC,QAHlB;AAIIX,IAAAA,KAAK,EAAEA,KAJX;AAKII,IAAAA,UAAU,EAAEA,UALhB;AAMIQ,IAAAA,GAAG,EAAEf,KANT;AAOID,IAAAA,EAAE,EAAEA,EAPR;AAQIiB,IAAAA,SAAS,EAAEX,yBARf;AASIP,IAAAA,GAAG,EAAEA,GAAAA;AATT,GAAA,CAAA,EAWKI,QAAQ,KAAK,MAAb,GACKQ,KAAK,CAACO,QAAN,CAAeC,GAAf,CAAmBC,eAAe,CAACf,QAAD,CAAlC,EAA8C,CAACgB,KAAD,EAAQC,KAAR,KAC1CA,KAAK,GAAG,CAAR,gBACIX,KAAA,CAAAC,aAAA,CAAAD,KAAA,CAAAY,QAAA,EAAA,IAAA,eACIZ,KAAA,CAAAC,aAAA,CAACY,OAAD,EAAQ;AAACC,IAAAA,MAAM,EAAEtB,QAAAA;GAAjB,CADJ,EAEKkB,KAFL,CADJ,GAMIA,KAPR,CADL,GAWKhB,QAtBV,CADJ,CAAA;AA0BH,CA9CiC;;;;"}
@@ -1,15 +1,15 @@
1
1
  import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
2
- import { forwardRef, useState, createElement } from 'react';
2
+ import * as React from 'react';
3
3
  import { Box } from '../box/box.js';
4
4
  import { Stack } from '../stack/stack.js';
5
- import { HiddenVisually } from '../hidden-visually/hidden-visually.js';
6
- import { useId } from '../utils/common-helpers.js';
7
5
  import { Text } from '../text/text.js';
6
+ import { HiddenVisually } from '../hidden-visually/hidden-visually.js';
8
7
  import { FieldHint } from '../base-field/base-field.js';
9
- import styles from './switch-field.module.css.js';
8
+ import { useId } from '../utils/common-helpers.js';
9
+ import modules_8e05f7c9 from './switch-field.module.css.js';
10
10
 
11
11
  const _excluded = ["label", "hint", "disabled", "hidden", "defaultChecked", "id", "aria-describedby", "aria-label", "aria-labelledby", "onChange"];
12
- const SwitchField = /*#__PURE__*/forwardRef(function SwitchField(_ref, ref) {
12
+ const SwitchField = /*#__PURE__*/React.forwardRef(function SwitchField(_ref, ref) {
13
13
  var _ref2, _props$checked, _props$checked2;
14
14
 
15
15
  let {
@@ -31,25 +31,25 @@ const SwitchField = /*#__PURE__*/forwardRef(function SwitchField(_ref, ref) {
31
31
  const ariaDescribedBy = originalAriaDescribedBy != null ? originalAriaDescribedBy : hint ? hintId : undefined;
32
32
  const ariaLabel = originalAriaLabel != null ? originalAriaLabel : undefined;
33
33
  const ariaLabelledBy = originalAriaLabelledby != null ? originalAriaLabelledby : undefined;
34
- const [keyFocused, setKeyFocused] = useState(false);
35
- const [checkedState, setChecked] = useState((_ref2 = (_props$checked = props.checked) != null ? _props$checked : defaultChecked) != null ? _ref2 : false);
34
+ const [keyFocused, setKeyFocused] = React.useState(false);
35
+ const [checkedState, setChecked] = React.useState((_ref2 = (_props$checked = props.checked) != null ? _props$checked : defaultChecked) != null ? _ref2 : false);
36
36
  const isChecked = (_props$checked2 = props.checked) != null ? _props$checked2 : checkedState;
37
- return /*#__PURE__*/createElement(Stack, {
37
+ return /*#__PURE__*/React.createElement(Stack, {
38
38
  space: "small",
39
39
  hidden: hidden
40
- }, /*#__PURE__*/createElement(Box, {
41
- className: [styles.container, disabled ? styles.disabled : null, isChecked ? styles.checked : null, keyFocused ? styles.keyFocused : null],
40
+ }, /*#__PURE__*/React.createElement(Box, {
41
+ className: [modules_8e05f7c9.container, disabled ? modules_8e05f7c9.disabled : null, isChecked ? modules_8e05f7c9.checked : null, keyFocused ? modules_8e05f7c9.keyFocused : null],
42
42
  as: "label",
43
43
  display: "flex",
44
44
  alignItems: "center"
45
- }, /*#__PURE__*/createElement(Box, {
45
+ }, /*#__PURE__*/React.createElement(Box, {
46
46
  position: "relative",
47
47
  display: "inlineBlock",
48
48
  overflow: "visible",
49
49
  marginRight: "small",
50
50
  flexShrink: 0,
51
- className: styles.toggle
52
- }, /*#__PURE__*/createElement(HiddenVisually, null, /*#__PURE__*/createElement("input", _objectSpread2(_objectSpread2({}, props), {}, {
51
+ className: modules_8e05f7c9.toggle
52
+ }, /*#__PURE__*/React.createElement(HiddenVisually, null, /*#__PURE__*/React.createElement("input", _objectSpread2(_objectSpread2({}, props), {}, {
53
53
  id: id,
54
54
  type: "checkbox",
55
55
  disabled: disabled,
@@ -73,11 +73,11 @@ const SwitchField = /*#__PURE__*/forwardRef(function SwitchField(_ref, ref) {
73
73
  setKeyFocused(true);
74
74
  props == null ? void 0 : props.onKeyUp == null ? void 0 : props.onKeyUp(event);
75
75
  }
76
- }))), /*#__PURE__*/createElement("span", {
77
- className: styles.handle
78
- })), /*#__PURE__*/createElement(Text, {
79
- exceptionallySetClassName: styles.label
80
- }, label)), hint ? /*#__PURE__*/createElement(FieldHint, {
76
+ }))), /*#__PURE__*/React.createElement("span", {
77
+ className: modules_8e05f7c9.handle
78
+ })), /*#__PURE__*/React.createElement(Text, {
79
+ exceptionallySetClassName: modules_8e05f7c9.label
80
+ }, label)), hint ? /*#__PURE__*/React.createElement(FieldHint, {
81
81
  id: hintId
82
82
  }, hint) : null);
83
83
  });
@@ -1 +1 @@
1
- {"version":3,"file":"switch-field.js","sources":["../../src/switch-field/switch-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { Stack } from '../stack'\nimport { Text } from '../text'\nimport { HiddenVisually } from '../hidden-visually'\nimport { FieldComponentProps, FieldHint } from '../base-field'\nimport { useId } from '../utils/common-helpers'\nimport styles from './switch-field.module.css'\n\ninterface SwitchFieldProps\n extends Omit<\n FieldComponentProps<HTMLInputElement>,\n | 'type'\n | 'secondaryLabel'\n | 'auxiliaryLabel'\n | 'maxWidth'\n | 'aria-describedby'\n | 'aria-label'\n | 'aria-labelledby'\n > {\n /**\n * Identifies the element (or elements) that describes the switch for assistive technologies.\n */\n 'aria-describedby'?: string\n\n /**\n * Defines a string value that labels the current switch for assistive technologies.\n */\n 'aria-label'?: string\n\n /**\n * Identifies the element (or elements) that labels the current switch for assistive technologies.\n */\n 'aria-labelledby'?: string\n}\n\nconst SwitchField = React.forwardRef<HTMLInputElement, SwitchFieldProps>(function SwitchField(\n {\n label,\n hint,\n disabled = false,\n hidden,\n defaultChecked,\n id: originalId,\n 'aria-describedby': originalAriaDescribedBy,\n 'aria-label': originalAriaLabel,\n 'aria-labelledby': originalAriaLabelledby,\n onChange,\n ...props\n },\n ref,\n) {\n const id = useId(originalId)\n const hintId = useId()\n\n const ariaDescribedBy = originalAriaDescribedBy ?? (hint ? hintId : undefined)\n const ariaLabel = originalAriaLabel ?? undefined\n const ariaLabelledBy = originalAriaLabelledby ?? undefined\n\n const [keyFocused, setKeyFocused] = React.useState(false)\n const [checkedState, setChecked] = React.useState(props.checked ?? defaultChecked ?? false)\n const isChecked = props.checked ?? checkedState\n\n return (\n <Stack space=\"small\" hidden={hidden}>\n <Box\n className={[\n styles.container,\n disabled ? styles.disabled : null,\n isChecked ? styles.checked : null,\n keyFocused ? styles.keyFocused : null,\n ]}\n as=\"label\"\n display=\"flex\"\n alignItems=\"center\"\n >\n <Box\n position=\"relative\"\n display=\"inlineBlock\"\n overflow=\"visible\"\n marginRight=\"small\"\n flexShrink={0}\n className={styles.toggle}\n >\n <HiddenVisually>\n <input\n {...props}\n id={id}\n type=\"checkbox\"\n disabled={disabled}\n aria-describedby={ariaDescribedBy}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n ref={ref}\n checked={isChecked}\n onChange={(event) => {\n onChange?.(event)\n if (!event.defaultPrevented) {\n setChecked(event.currentTarget.checked)\n }\n }}\n onBlur={(event) => {\n setKeyFocused(false)\n props?.onBlur?.(event)\n }}\n onKeyUp={(event) => {\n setKeyFocused(true)\n props?.onKeyUp?.(event)\n }}\n />\n </HiddenVisually>\n <span className={styles.handle} />\n </Box>\n <Text exceptionallySetClassName={styles.label}>{label}</Text>\n </Box>\n {hint ? <FieldHint id={hintId}>{hint}</FieldHint> : null}\n </Stack>\n )\n})\n\nexport { SwitchField }\nexport type { SwitchFieldProps }\n"],"names":["SwitchField","React","ref","label","hint","disabled","hidden","defaultChecked","id","originalId","originalAriaDescribedBy","originalAriaLabel","originalAriaLabelledby","onChange","props","useId","hintId","ariaDescribedBy","undefined","ariaLabel","ariaLabelledBy","keyFocused","setKeyFocused","checkedState","setChecked","checked","isChecked","Stack","space","Box","className","styles","container","as","display","alignItems","position","overflow","marginRight","flexShrink","toggle","HiddenVisually","type","event","defaultPrevented","currentTarget","onBlur","onKeyUp","handle","Text","exceptionallySetClassName","FieldHint"],"mappings":"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"}
1
+ {"version":3,"file":"switch-field.js","sources":["../../src/switch-field/switch-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { Stack } from '../stack'\nimport { Text } from '../text'\nimport { HiddenVisually } from '../hidden-visually'\nimport { FieldComponentProps, FieldHint } from '../base-field'\nimport { useId } from '../utils/common-helpers'\nimport styles from './switch-field.module.css'\n\ninterface SwitchFieldProps\n extends Omit<\n FieldComponentProps<HTMLInputElement>,\n | 'type'\n | 'secondaryLabel'\n | 'auxiliaryLabel'\n | 'maxWidth'\n | 'aria-describedby'\n | 'aria-label'\n | 'aria-labelledby'\n > {\n /**\n * Identifies the element (or elements) that describes the switch for assistive technologies.\n */\n 'aria-describedby'?: string\n\n /**\n * Defines a string value that labels the current switch for assistive technologies.\n */\n 'aria-label'?: string\n\n /**\n * Identifies the element (or elements) that labels the current switch for assistive technologies.\n */\n 'aria-labelledby'?: string\n}\n\nconst SwitchField = React.forwardRef<HTMLInputElement, SwitchFieldProps>(function SwitchField(\n {\n label,\n hint,\n disabled = false,\n hidden,\n defaultChecked,\n id: originalId,\n 'aria-describedby': originalAriaDescribedBy,\n 'aria-label': originalAriaLabel,\n 'aria-labelledby': originalAriaLabelledby,\n onChange,\n ...props\n },\n ref,\n) {\n const id = useId(originalId)\n const hintId = useId()\n\n const ariaDescribedBy = originalAriaDescribedBy ?? (hint ? hintId : undefined)\n const ariaLabel = originalAriaLabel ?? undefined\n const ariaLabelledBy = originalAriaLabelledby ?? undefined\n\n const [keyFocused, setKeyFocused] = React.useState(false)\n const [checkedState, setChecked] = React.useState(props.checked ?? defaultChecked ?? false)\n const isChecked = props.checked ?? checkedState\n\n return (\n <Stack space=\"small\" hidden={hidden}>\n <Box\n className={[\n styles.container,\n disabled ? styles.disabled : null,\n isChecked ? styles.checked : null,\n keyFocused ? styles.keyFocused : null,\n ]}\n as=\"label\"\n display=\"flex\"\n alignItems=\"center\"\n >\n <Box\n position=\"relative\"\n display=\"inlineBlock\"\n overflow=\"visible\"\n marginRight=\"small\"\n flexShrink={0}\n className={styles.toggle}\n >\n <HiddenVisually>\n <input\n {...props}\n id={id}\n type=\"checkbox\"\n disabled={disabled}\n aria-describedby={ariaDescribedBy}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n ref={ref}\n checked={isChecked}\n onChange={(event) => {\n onChange?.(event)\n if (!event.defaultPrevented) {\n setChecked(event.currentTarget.checked)\n }\n }}\n onBlur={(event) => {\n setKeyFocused(false)\n props?.onBlur?.(event)\n }}\n onKeyUp={(event) => {\n setKeyFocused(true)\n props?.onKeyUp?.(event)\n }}\n />\n </HiddenVisually>\n <span className={styles.handle} />\n </Box>\n <Text exceptionallySetClassName={styles.label}>{label}</Text>\n </Box>\n {hint ? <FieldHint id={hintId}>{hint}</FieldHint> : null}\n </Stack>\n )\n})\n\nexport { SwitchField }\nexport type { SwitchFieldProps }\n"],"names":["SwitchField","React","forwardRef","ref","label","hint","disabled","hidden","defaultChecked","id","originalId","originalAriaDescribedBy","originalAriaLabel","originalAriaLabelledby","onChange","props","useId","hintId","ariaDescribedBy","undefined","ariaLabel","ariaLabelledBy","keyFocused","setKeyFocused","useState","checkedState","setChecked","checked","isChecked","createElement","Stack","space","Box","className","styles","container","as","display","alignItems","position","overflow","marginRight","flexShrink","toggle","HiddenVisually","type","event","defaultPrevented","currentTarget","onBlur","onKeyUp","handle","Text","exceptionallySetClassName","FieldHint"],"mappings":";;;;;;;;;;;AAoCMA,MAAAA,WAAW,gBAAGC,KAAK,CAACC,UAAN,CAAqD,SAASF,WAAT,CAcrEG,IAAAA,EAAAA,GAdqE,EAclE;AAAA,EAAA,IAAA,KAAA,EAAA,cAAA,EAAA,eAAA,CAAA;;EAAA,IAbH;IACIC,KADJ;IAEIC,IAFJ;AAGIC,IAAAA,QAAQ,GAAG,KAHf;IAIIC,MAJJ;IAKIC,cALJ;AAMIC,IAAAA,EAAE,EAAEC,UANR;AAOI,IAAA,kBAAA,EAAoBC,uBAPxB;AAQI,IAAA,YAAA,EAAcC,iBARlB;AASI,IAAA,iBAAA,EAAmBC,sBATvB;AAUIC,IAAAA,QAAAA;GAGD,GAAA,IAAA;AAAA,MAFIC,KAEJ,GAAA,wBAAA,CAAA,IAAA,EAAA,SAAA,CAAA,CAAA;;AAEH,EAAA,MAAMN,EAAE,GAAGO,KAAK,CAACN,UAAD,CAAhB,CAAA;EACA,MAAMO,MAAM,GAAGD,KAAK,EAApB,CAAA;EAEA,MAAME,eAAe,GAAGP,uBAAH,IAAGA,IAAAA,GAAAA,uBAAH,GAA+BN,IAAI,GAAGY,MAAH,GAAYE,SAApE,CAAA;AACA,EAAA,MAAMC,SAAS,GAAGR,iBAAH,IAAGA,IAAAA,GAAAA,iBAAH,GAAwBO,SAAvC,CAAA;AACA,EAAA,MAAME,cAAc,GAAGR,sBAAH,IAAGA,IAAAA,GAAAA,sBAAH,GAA6BM,SAAjD,CAAA;EAEA,MAAM,CAACG,UAAD,EAAaC,aAAb,CAAA,GAA8BtB,KAAK,CAACuB,QAAN,CAAe,KAAf,CAApC,CAAA;AACA,EAAA,MAAM,CAACC,YAAD,EAAeC,UAAf,CAAA,GAA6BzB,KAAK,CAACuB,QAAN,CAAeT,CAAAA,KAAAA,GAAAA,CAAAA,cAAAA,GAAAA,KAAK,CAACY,OAArB,KAAA,IAAA,GAAA,cAAA,GAAgCnB,cAAhC,KAAA,IAAA,GAAA,KAAA,GAAkD,KAAlD,CAAnC,CAAA;AACA,EAAA,MAAMoB,SAAS,GAAGb,CAAAA,eAAAA,GAAAA,KAAK,CAACY,OAAT,8BAAoBF,YAAnC,CAAA;AAEA,EAAA,oBACIxB,KAAC,CAAA4B,aAAD,CAACC,KAAD,EAAO;AAAAC,IAAAA,KAAK,EAAC,OAAN;AAAcxB,IAAAA,MAAM,EAAEA,MAAAA;AAAtB,GAAP,eACIN,KAAC,CAAA4B,aAAD,CAACG,GAAD,EACI;AAAAC,IAAAA,SAAS,EAAE,CACPC,gBAAM,CAACC,SADA,EAEP7B,QAAQ,GAAG4B,gBAAM,CAAC5B,QAAV,GAAqB,IAFtB,EAGPsB,SAAS,GAAGM,gBAAM,CAACP,OAAV,GAAoB,IAHtB,EAIPL,UAAU,GAAGY,gBAAM,CAACZ,UAAV,GAAuB,IAJ1B,CAAX;AAMAc,IAAAA,EAAE,EAAC,OANH;AAOAC,IAAAA,OAAO,EAAC,MAPR;AAQAC,IAAAA,UAAU,EAAC,QAAA;AARX,GADJ,eAWIrC,KAAC,CAAA4B,aAAD,CAACG,GAAD,EACI;AAAAO,IAAAA,QAAQ,EAAC,UAAT;AACAF,IAAAA,OAAO,EAAC,aADR;AAEAG,IAAAA,QAAQ,EAAC,SAFT;AAGAC,IAAAA,WAAW,EAAC,OAHZ;AAIAC,IAAAA,UAAU,EAAE,CAJZ;IAKAT,SAAS,EAAEC,gBAAM,CAACS,MAAAA;AALlB,GADJ,eAQI1C,KAAA,CAAA4B,aAAA,CAACe,cAAD,EAAe,IAAf,eACI3C,KAAA,CAAA4B,aAAA,CAAA,OAAA,oCACQd,KADR,CAAA,EAAA,EAAA,EAAA;AAEIN,IAAAA,EAAE,EAAEA,EAFR;AAGIoC,IAAAA,IAAI,EAAC,UAHT;AAIIvC,IAAAA,QAAQ,EAAEA,QAJd;wBAKsBY,eALtB;AAKqC,IAAA,YAAA,EACrBE,SANhB;AAMyB,IAAA,iBAAA,EACJC,cAPrB;AAQIlB,IAAAA,GAAG,EAAEA,GART;AASIwB,IAAAA,OAAO,EAAEC,SATb;IAUId,QAAQ,EAAGgC,KAAD,IAAU;AAChBhC,MAAAA,QAAQ,IAAR,IAAA,GAAA,KAAA,CAAA,GAAAA,QAAQ,CAAGgC,KAAH,CAAR,CAAA;;AACA,MAAA,IAAI,CAACA,KAAK,CAACC,gBAAX,EAA6B;AACzBrB,QAAAA,UAAU,CAACoB,KAAK,CAACE,aAAN,CAAoBrB,OAArB,CAAV,CAAA;AACH,OAAA;KAdT;IAgBIsB,MAAM,EAAGH,KAAD,IAAU;MACdvB,aAAa,CAAC,KAAD,CAAb,CAAA;MACAR,KAAK,IAAA,IAAL,GAAAA,KAAAA,CAAAA,GAAAA,KAAK,CAAEkC,MAAP,oBAAAlC,KAAK,CAAEkC,MAAP,CAAgBH,KAAhB,CAAA,CAAA;KAlBR;IAoBII,OAAO,EAAGJ,KAAD,IAAU;MACfvB,aAAa,CAAC,IAAD,CAAb,CAAA;MACAR,KAAK,IAAA,IAAL,GAAAA,KAAAA,CAAAA,GAAAA,KAAK,CAAEmC,OAAP,oBAAAnC,KAAK,CAAEmC,OAAP,CAAiBJ,KAAjB,CAAA,CAAA;AACH,KAAA;AAvBL,GAAA,CAAA,CADJ,CARJ,eAmCI7C,KAAA,CAAA4B,aAAA,CAAA,MAAA,EAAA;IAAMI,SAAS,EAAEC,gBAAM,CAACiB,MAAAA;GAAxB,CAnCJ,CAXJ,eAgDIlD,KAAC,CAAA4B,aAAD,CAACuB,IAAD,EAAM;IAAAC,yBAAyB,EAAEnB,gBAAM,CAAC9B,KAAAA;AAAlC,GAAN,EAAgDA,KAAhD,CAhDJ,CADJ,EAmDKC,IAAI,gBAAGJ,mBAAA,CAACqD,SAAD,EAAU;AAAC7C,IAAAA,EAAE,EAAEQ,MAAAA;AAAL,GAAV,EAAwBZ,IAAxB,CAAH,GAA+C,IAnDxD,CADJ,CAAA;AAuDH,CAlFmB;;;;"}
@@ -1,4 +1,4 @@
1
1
  var modules_8e05f7c9 = {"container":"bae487be","disabled":"_408d32a0","checked":"_99b0ead7","toggle":"_5af09fb5","label":"a66e1846","handle":"_0dcf70ec","keyFocused":"_1f5e7fd4"};
2
2
 
3
- export default modules_8e05f7c9;
3
+ export { modules_8e05f7c9 as default };
4
4
  //# sourceMappingURL=switch-field.module.css.js.map
package/es/tabs/tabs.js CHANGED
@@ -1,14 +1,14 @@
1
1
  import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
2
- import { useMemo, createElement, forwardRef, useContext, useState, useEffect, createContext } from 'react';
2
+ import * as React from 'react';
3
3
  import classNames from 'classnames';
4
- import { Box } from '../box/box.js';
5
- import { Inline } from '../inline/inline.js';
6
4
  import { useTabStore, Tab as Tab$1, TabList as TabList$1, TabPanel as TabPanel$1 } from '@ariakit/react';
7
- import styles from './tabs.module.css.js';
5
+ import { Inline } from '../inline/inline.js';
6
+ import modules_40c67f5b from './tabs.module.css.js';
7
+ import { Box } from '../box/box.js';
8
8
 
9
9
  const _excluded = ["children", "space"],
10
10
  _excluded2 = ["children", "id", "renderMode"];
11
- const TabsContext = /*#__PURE__*/createContext(null);
11
+ const TabsContext = /*#__PURE__*/React.createContext(null);
12
12
  /**
13
13
  * Used to group components that compose a set of tabs. There can only be one active tab within the same `<Tabs>` group.
14
14
  */
@@ -26,7 +26,7 @@ function Tabs({
26
26
  setSelectedId: onSelectedIdChange
27
27
  });
28
28
  const actualSelectedId = tabStore.useState('selectedId');
29
- const memoizedTabState = useMemo(() => {
29
+ const memoizedTabState = React.useMemo(() => {
30
30
  var _ref;
31
31
 
32
32
  return {
@@ -35,7 +35,7 @@ function Tabs({
35
35
  selectedId: (_ref = selectedId != null ? selectedId : actualSelectedId) != null ? _ref : null
36
36
  };
37
37
  }, [variant, tabStore, selectedId, actualSelectedId]);
38
- return /*#__PURE__*/createElement(TabsContext.Provider, {
38
+ return /*#__PURE__*/React.createElement(TabsContext.Provider, {
39
39
  value: memoizedTabState
40
40
  }, children);
41
41
  }
@@ -44,21 +44,21 @@ function Tabs({
44
44
  */
45
45
 
46
46
 
47
- const Tab = /*#__PURE__*/forwardRef(function Tab({
47
+ const Tab = /*#__PURE__*/React.forwardRef(function Tab({
48
48
  children,
49
49
  id,
50
50
  exceptionallySetClassName,
51
51
  render,
52
52
  onClick
53
53
  }, ref) {
54
- const tabContextValue = useContext(TabsContext);
54
+ const tabContextValue = React.useContext(TabsContext);
55
55
  if (!tabContextValue) return null;
56
56
  const {
57
57
  variant,
58
58
  tabStore
59
59
  } = tabContextValue;
60
- const className = classNames(exceptionallySetClassName, styles.tab, styles["tab-" + variant]);
61
- return /*#__PURE__*/createElement(Tab$1, {
60
+ const className = classNames(exceptionallySetClassName, modules_40c67f5b.tab, modules_40c67f5b["tab-" + variant]);
61
+ return /*#__PURE__*/React.createElement(Tab$1, {
62
62
  id: id,
63
63
  ref: ref,
64
64
  store: tabStore,
@@ -78,7 +78,7 @@ function TabList(_ref2) {
78
78
  } = _ref2,
79
79
  props = _objectWithoutProperties(_ref2, _excluded);
80
80
 
81
- const tabContextValue = useContext(TabsContext);
81
+ const tabContextValue = React.useContext(TabsContext);
82
82
 
83
83
  if (!tabContextValue) {
84
84
  return null;
@@ -92,15 +92,15 @@ function TabList(_ref2) {
92
92
  /*#__PURE__*/
93
93
  // The extra <div> prevents <Inline>'s negative margins from collapsing when used in a flex container
94
94
  // which will render the track with the wrong height
95
- createElement("div", null, /*#__PURE__*/createElement(TabList$1, _objectSpread2({
95
+ React.createElement("div", null, /*#__PURE__*/React.createElement(TabList$1, _objectSpread2({
96
96
  store: tabStore,
97
- render: /*#__PURE__*/createElement(Box, {
97
+ render: /*#__PURE__*/React.createElement(Box, {
98
98
  position: "relative",
99
99
  width: "maxContent"
100
100
  })
101
- }, props), /*#__PURE__*/createElement(Box, {
102
- className: [styles.track, styles["track-" + variant]]
103
- }), /*#__PURE__*/createElement(Inline, {
101
+ }, props), /*#__PURE__*/React.createElement(Box, {
102
+ className: [modules_40c67f5b.track, modules_40c67f5b["track-" + variant]]
103
+ }), /*#__PURE__*/React.createElement(Inline, {
104
104
  space: space
105
105
  }, children)))
106
106
  );
@@ -111,7 +111,7 @@ function TabList(_ref2) {
111
111
  */
112
112
 
113
113
 
114
- const TabPanel = /*#__PURE__*/forwardRef(function TabPanel(_ref3, ref) {
114
+ const TabPanel = /*#__PURE__*/React.forwardRef(function TabPanel(_ref3, ref) {
115
115
  let {
116
116
  children,
117
117
  id,
@@ -119,11 +119,11 @@ const TabPanel = /*#__PURE__*/forwardRef(function TabPanel(_ref3, ref) {
119
119
  } = _ref3,
120
120
  props = _objectWithoutProperties(_ref3, _excluded2);
121
121
 
122
- const tabContextValue = useContext(TabsContext);
123
- const [tabRendered, setTabRendered] = useState(false);
122
+ const tabContextValue = React.useContext(TabsContext);
123
+ const [tabRendered, setTabRendered] = React.useState(false);
124
124
  const selectedId = tabContextValue == null ? void 0 : tabContextValue.tabStore.useState('selectedId');
125
125
  const tabIsActive = selectedId === id;
126
- useEffect(function trackTabRenderedState() {
126
+ React.useEffect(function trackTabRenderedState() {
127
127
  if (!tabRendered && tabIsActive) {
128
128
  setTabRendered(true);
129
129
  }
@@ -137,7 +137,7 @@ const TabPanel = /*#__PURE__*/forwardRef(function TabPanel(_ref3, ref) {
137
137
  tabStore
138
138
  } = tabContextValue;
139
139
  const shouldRender = renderMode === 'always' || renderMode === 'active' && tabIsActive || renderMode === 'lazy' && (tabIsActive || tabRendered);
140
- return shouldRender ? /*#__PURE__*/createElement(TabPanel$1, _objectSpread2(_objectSpread2({}, props), {}, {
140
+ return shouldRender ? /*#__PURE__*/React.createElement(TabPanel$1, _objectSpread2(_objectSpread2({}, props), {}, {
141
141
  tabId: id,
142
142
  store: tabStore,
143
143
  ref: ref
@@ -151,7 +151,7 @@ const TabPanel = /*#__PURE__*/forwardRef(function TabPanel(_ref3, ref) {
151
151
  function TabAwareSlot({
152
152
  children
153
153
  }) {
154
- const tabContextValue = useContext(TabsContext);
154
+ const tabContextValue = React.useContext(TabsContext);
155
155
  const selectedId = tabContextValue == null ? void 0 : tabContextValue.tabStore.useState('selectedId');
156
156
  return tabContextValue ? children({
157
157
  selectedId
@@ -1 +1 @@
1
- {"version":3,"file":"tabs.js","sources":["../../src/tabs/tabs.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport {\n useTabStore,\n Tab as BaseTab,\n TabList as BaseTabList,\n TabPanel as BaseTabPanel,\n TabPanelProps as BaseTabPanelProps,\n TabStore,\n RoleProps,\n} from '@ariakit/react'\nimport { Inline } from '../inline'\nimport type { ObfuscatedClassName, Space } from '../utils/common-types'\n\nimport styles from './tabs.module.css'\nimport { Box } from '../box'\n\ntype TabsContextValue = Required<Pick<TabsProps, 'variant'>> & {\n tabStore: TabStore\n}\n\nconst TabsContext = React.createContext<TabsContextValue | null>(null)\n\ninterface TabsProps {\n /**\n * The `<Tabs>` component must be composed from a `<TabList>` and corresponding `<TabPanel>`\n * components\n */\n children: React.ReactNode\n\n /**\n * Determines the look and feel of the tabs\n */\n variant?: 'themed' | 'neutral'\n\n /**\n * The id of the selected tab. Assigning a value makes this a controlled component\n */\n selectedId?: string | null\n\n /**\n * The tab to initially select. This can be used if the component should not\n * be a controlled component but needs to have a tab selected\n */\n defaultSelectedId?: string | null\n\n /**\n * Called with the tab id when a tab is selected\n */\n onSelectedIdChange?: (selectedId: string | null | undefined) => void\n}\n\n/**\n * Used to group components that compose a set of tabs. There can only be one active tab within the same `<Tabs>` group.\n */\nfunction Tabs({\n children,\n selectedId,\n defaultSelectedId,\n variant = 'neutral',\n onSelectedIdChange,\n}: TabsProps): React.ReactElement {\n const tabStore = useTabStore({\n defaultSelectedId,\n selectedId,\n setSelectedId: onSelectedIdChange,\n })\n const actualSelectedId = tabStore.useState('selectedId')\n\n const memoizedTabState = React.useMemo(\n () => ({ tabStore, variant, selectedId: selectedId ?? actualSelectedId ?? null }),\n [variant, tabStore, selectedId, actualSelectedId],\n )\n return <TabsContext.Provider value={memoizedTabState}>{children}</TabsContext.Provider>\n}\n\ninterface TabProps extends ObfuscatedClassName, Pick<RoleProps, 'render'> {\n /**\n * The content to render inside of the tab button\n */\n children: React.ReactNode\n\n /**\n * The tab's identifier. This must match its corresponding `<TabPanel>`'s id\n */\n id: string\n\n onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void\n}\n\n/**\n * Represents the individual tab elements within the group. Each `<Tab>` must have a corresponding `<TabPanel>` component.\n */\nconst Tab = React.forwardRef<HTMLButtonElement, TabProps>(function Tab(\n { children, id, exceptionallySetClassName, render, onClick },\n ref,\n): React.ReactElement | null {\n const tabContextValue = React.useContext(TabsContext)\n if (!tabContextValue) return null\n\n const { variant, tabStore } = tabContextValue\n const className = classNames(exceptionallySetClassName, styles.tab, styles[`tab-${variant}`])\n\n return (\n <BaseTab\n id={id}\n ref={ref}\n store={tabStore}\n render={render}\n className={className}\n onClick={onClick}\n >\n {children}\n </BaseTab>\n )\n})\n\ntype TabListProps = (\n | {\n /** Labels the tab list for assistive technologies. This must be provided if `aria-labelledby` is omitted. */\n 'aria-label': string\n }\n | {\n /**\n * One or more element IDs used to label the tab list for assistive technologies. Required if\n * `aria-label` is omitted.\n */\n 'aria-labelledby': string\n }\n | {\n /**\n * For cases where multiple instances of the tab list exists, the duplicates may be marked as aria-hidden\n */\n 'aria-hidden': boolean\n }\n) & {\n /**\n * A list of `<Tab>` elements\n */\n children: React.ReactNode\n\n /**\n * Controls the spacing between tabs\n */\n space?: Space\n}\n\n/**\n * A component used to group `<Tab>` elements together.\n */\nfunction TabList({ children, space, ...props }: TabListProps): React.ReactElement | null {\n const tabContextValue = React.useContext(TabsContext)\n\n if (!tabContextValue) {\n return null\n }\n\n const { tabStore, variant } = tabContextValue\n\n return (\n // The extra <div> prevents <Inline>'s negative margins from collapsing when used in a flex container\n // which will render the track with the wrong height\n <div>\n <BaseTabList\n store={tabStore}\n render={<Box position=\"relative\" width=\"maxContent\" />}\n {...props}\n >\n <Box className={[styles.track, styles[`track-${variant}`]]} />\n <Inline space={space}>{children}</Inline>\n </BaseTabList>\n </div>\n )\n}\n\ninterface TabPanelProps\n extends React.HTMLAttributes<HTMLDivElement>,\n Pick<BaseTabPanelProps, 'render'> {\n /** The content to be rendered inside the tab */\n children?: React.ReactNode\n\n /** The tabPanel's identifier. This must match its corresponding `<Tab>`'s id */\n id: string\n\n /**\n * By default, the tab panel's content is always rendered even when they are not active. This\n * behaviour can be changed to 'active', which renders only when the tab is active, and 'lazy',\n * meaning while inactive tab panels will not be rendered initially, they will remain mounted\n * once they are active until the entire Tabs tree is unmounted.\n */\n renderMode?: 'always' | 'active' | 'lazy'\n}\n\n/**\n * Used to define the content to be rendered when a tab is active. Each `<TabPanel>` must have a\n * corresponding `<Tab>` component.\n */\nconst TabPanel = React.forwardRef<HTMLDivElement, TabPanelProps>(function TabPanel(\n { children, id, renderMode = 'always', ...props },\n ref,\n): React.ReactElement | null {\n const tabContextValue = React.useContext(TabsContext)\n const [tabRendered, setTabRendered] = React.useState(false)\n const selectedId = tabContextValue?.tabStore.useState('selectedId')\n const tabIsActive = selectedId === id\n\n React.useEffect(\n function trackTabRenderedState() {\n if (!tabRendered && tabIsActive) {\n setTabRendered(true)\n }\n },\n [tabRendered, tabIsActive],\n )\n\n if (!tabContextValue) {\n return null\n }\n\n const { tabStore } = tabContextValue\n const shouldRender =\n renderMode === 'always' ||\n (renderMode === 'active' && tabIsActive) ||\n (renderMode === 'lazy' && (tabIsActive || tabRendered))\n\n return shouldRender ? (\n <BaseTabPanel {...props} tabId={id} store={tabStore} ref={ref}>\n {children}\n </BaseTabPanel>\n ) : null\n})\n\ntype TabAwareSlotProps = {\n /**\n * Render prop used to provide the content to be rendered inside the slot. The render prop will\n * be called with the current `selectedId`\n */\n children: (provided: { selectedId?: string | null }) => React.ReactElement | null\n}\n\n/**\n * Allows content to be rendered based on the current tab being selected while outside of the\n * TabPanel component. Can be placed freely within the main `<Tabs>` component.\n */\nfunction TabAwareSlot({ children }: TabAwareSlotProps): React.ReactElement | null {\n const tabContextValue = React.useContext(TabsContext)\n const selectedId = tabContextValue?.tabStore.useState('selectedId')\n return tabContextValue ? children({ selectedId }) : null\n}\n\nexport { Tab, Tabs, TabList, TabPanel, TabAwareSlot }\n"],"names":["TabsContext","React","Tabs","children","selectedId","defaultSelectedId","variant","onSelectedIdChange","tabStore","useTabStore","setSelectedId","actualSelectedId","useState","memoizedTabState","Provider","value","Tab","id","exceptionallySetClassName","render","onClick","ref","tabContextValue","className","classNames","styles","tab","BaseTab","store","TabList","space","props","BaseTabList","Box","position","width","track","Inline","TabPanel","renderMode","tabRendered","setTabRendered","tabIsActive","trackTabRenderedState","shouldRender","BaseTabPanel","tabId","TabAwareSlot"],"mappings":"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"}
1
+ {"version":3,"file":"tabs.js","sources":["../../src/tabs/tabs.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport {\n useTabStore,\n Tab as BaseTab,\n TabProps as BaseTabProps,\n TabList as BaseTabList,\n TabPanel as BaseTabPanel,\n TabPanelProps as BaseTabPanelProps,\n TabStore,\n} from '@ariakit/react'\nimport { Inline } from '../inline'\nimport type { ObfuscatedClassName, Space } from '../utils/common-types'\n\nimport styles from './tabs.module.css'\nimport { Box } from '../box'\n\ntype TabsContextValue = Required<Pick<TabsProps, 'variant'>> & {\n tabStore: TabStore\n}\n\nconst TabsContext = React.createContext<TabsContextValue | null>(null)\n\ninterface TabsProps {\n /**\n * The `<Tabs>` component must be composed from a `<TabList>` and corresponding `<TabPanel>`\n * components\n */\n children: React.ReactNode\n\n /**\n * Determines the look and feel of the tabs\n */\n variant?: 'themed' | 'neutral'\n\n /**\n * The id of the selected tab. Assigning a value makes this a controlled component\n */\n selectedId?: string | null\n\n /**\n * The tab to initially select. This can be used if the component should not\n * be a controlled component but needs to have a tab selected\n */\n defaultSelectedId?: string | null\n\n /**\n * Called with the tab id when a tab is selected\n */\n onSelectedIdChange?: (selectedId: string | null | undefined) => void\n}\n\n/**\n * Used to group components that compose a set of tabs. There can only be one active tab within the same `<Tabs>` group.\n */\nfunction Tabs({\n children,\n selectedId,\n defaultSelectedId,\n variant = 'neutral',\n onSelectedIdChange,\n}: TabsProps): React.ReactElement {\n const tabStore = useTabStore({\n defaultSelectedId,\n selectedId,\n setSelectedId: onSelectedIdChange,\n })\n const actualSelectedId = tabStore.useState('selectedId')\n\n const memoizedTabState = React.useMemo(\n () => ({ tabStore, variant, selectedId: selectedId ?? actualSelectedId ?? null }),\n [variant, tabStore, selectedId, actualSelectedId],\n )\n return <TabsContext.Provider value={memoizedTabState}>{children}</TabsContext.Provider>\n}\n\ninterface TabProps\n extends ObfuscatedClassName,\n Omit<BaseTabProps, 'store' | 'className' | 'children' | 'id'> {\n /**\n * The content to render inside of the tab button\n */\n children: React.ReactNode\n\n /**\n * The tab's identifier. This must match its corresponding `<TabPanel>`'s id\n */\n id: string\n}\n\n/**\n * Represents the individual tab elements within the group. Each `<Tab>` must have a corresponding `<TabPanel>` component.\n */\nconst Tab = React.forwardRef<HTMLButtonElement, TabProps>(function Tab(\n { children, id, exceptionallySetClassName, render, onClick },\n ref,\n): React.ReactElement | null {\n const tabContextValue = React.useContext(TabsContext)\n if (!tabContextValue) return null\n\n const { variant, tabStore } = tabContextValue\n const className = classNames(exceptionallySetClassName, styles.tab, styles[`tab-${variant}`])\n\n return (\n <BaseTab\n id={id}\n ref={ref}\n store={tabStore}\n render={render}\n className={className}\n onClick={onClick}\n >\n {children}\n </BaseTab>\n )\n})\n\ntype TabListProps = (\n | {\n /** Labels the tab list for assistive technologies. This must be provided if `aria-labelledby` is omitted. */\n 'aria-label': string\n }\n | {\n /**\n * One or more element IDs used to label the tab list for assistive technologies. Required if\n * `aria-label` is omitted.\n */\n 'aria-labelledby': string\n }\n | {\n /**\n * For cases where multiple instances of the tab list exists, the duplicates may be marked as aria-hidden\n */\n 'aria-hidden': boolean\n }\n) & {\n /**\n * A list of `<Tab>` elements\n */\n children: React.ReactNode\n\n /**\n * Controls the spacing between tabs\n */\n space?: Space\n}\n\n/**\n * A component used to group `<Tab>` elements together.\n */\nfunction TabList({ children, space, ...props }: TabListProps): React.ReactElement | null {\n const tabContextValue = React.useContext(TabsContext)\n\n if (!tabContextValue) {\n return null\n }\n\n const { tabStore, variant } = tabContextValue\n\n return (\n // The extra <div> prevents <Inline>'s negative margins from collapsing when used in a flex container\n // which will render the track with the wrong height\n <div>\n <BaseTabList\n store={tabStore}\n render={<Box position=\"relative\" width=\"maxContent\" />}\n {...props}\n >\n <Box className={[styles.track, styles[`track-${variant}`]]} />\n <Inline space={space}>{children}</Inline>\n </BaseTabList>\n </div>\n )\n}\n\ninterface TabPanelProps\n extends React.HTMLAttributes<HTMLDivElement>,\n Pick<BaseTabPanelProps, 'render'> {\n /** The content to be rendered inside the tab */\n children?: React.ReactNode\n\n /** The tabPanel's identifier. This must match its corresponding `<Tab>`'s id */\n id: string\n\n /**\n * By default, the tab panel's content is always rendered even when they are not active. This\n * behaviour can be changed to 'active', which renders only when the tab is active, and 'lazy',\n * meaning while inactive tab panels will not be rendered initially, they will remain mounted\n * once they are active until the entire Tabs tree is unmounted.\n */\n renderMode?: 'always' | 'active' | 'lazy'\n}\n\n/**\n * Used to define the content to be rendered when a tab is active. Each `<TabPanel>` must have a\n * corresponding `<Tab>` component.\n */\nconst TabPanel = React.forwardRef<HTMLDivElement, TabPanelProps>(function TabPanel(\n { children, id, renderMode = 'always', ...props },\n ref,\n): React.ReactElement | null {\n const tabContextValue = React.useContext(TabsContext)\n const [tabRendered, setTabRendered] = React.useState(false)\n const selectedId = tabContextValue?.tabStore.useState('selectedId')\n const tabIsActive = selectedId === id\n\n React.useEffect(\n function trackTabRenderedState() {\n if (!tabRendered && tabIsActive) {\n setTabRendered(true)\n }\n },\n [tabRendered, tabIsActive],\n )\n\n if (!tabContextValue) {\n return null\n }\n\n const { tabStore } = tabContextValue\n const shouldRender =\n renderMode === 'always' ||\n (renderMode === 'active' && tabIsActive) ||\n (renderMode === 'lazy' && (tabIsActive || tabRendered))\n\n return shouldRender ? (\n <BaseTabPanel {...props} tabId={id} store={tabStore} ref={ref}>\n {children}\n </BaseTabPanel>\n ) : null\n})\n\ntype TabAwareSlotProps = {\n /**\n * Render prop used to provide the content to be rendered inside the slot. The render prop will\n * be called with the current `selectedId`\n */\n children: (provided: { selectedId?: string | null }) => React.ReactElement | null\n}\n\n/**\n * Allows content to be rendered based on the current tab being selected while outside of the\n * TabPanel component. Can be placed freely within the main `<Tabs>` component.\n */\nfunction TabAwareSlot({ children }: TabAwareSlotProps): React.ReactElement | null {\n const tabContextValue = React.useContext(TabsContext)\n const selectedId = tabContextValue?.tabStore.useState('selectedId')\n return tabContextValue ? children({ selectedId }) : null\n}\n\nexport { Tab, Tabs, TabList, TabPanel, TabAwareSlot }\n"],"names":["TabsContext","React","createContext","Tabs","children","selectedId","defaultSelectedId","variant","onSelectedIdChange","tabStore","useTabStore","setSelectedId","actualSelectedId","useState","memoizedTabState","useMemo","createElement","Provider","value","Tab","forwardRef","id","exceptionallySetClassName","render","onClick","ref","tabContextValue","useContext","className","classNames","styles","tab","BaseTab","store","TabList","space","props","BaseTabList","_objectSpread","Box","position","width","track","Inline","TabPanel","renderMode","tabRendered","setTabRendered","tabIsActive","useEffect","trackTabRenderedState","shouldRender","BaseTabPanel","tabId","TabAwareSlot"],"mappings":"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"}
@@ -1,4 +1,4 @@
1
1
  var modules_40c67f5b = {"tab":"e96bf360","track":"_430e252d","tab-neutral":"f631ccbe","tab-themed":"_6ba96acc","track-neutral":"ef4cd8d3","track-themed":"_344b3b10"};
2
2
 
3
- export default modules_40c67f5b;
3
+ export { modules_40c67f5b as default };
4
4
  //# sourceMappingURL=tabs.module.css.js.map
package/es/text/text.js CHANGED
@@ -1,9 +1,9 @@
1
1
  import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
2
- import { createElement } from 'react';
3
- import { polymorphicComponent } from '../utils/polymorphism.js';
2
+ import * as React from 'react';
4
3
  import { getClassNames } from '../utils/responsive-props.js';
5
4
  import { Box } from '../box/box.js';
6
- import styles from './text.module.css.js';
5
+ import { polymorphicComponent } from '../utils/polymorphism.js';
6
+ import modules_a9637dd3 from './text.module.css.js';
7
7
 
8
8
  const _excluded = ["as", "size", "weight", "tone", "align", "children", "lineClamp", "exceptionallySetClassName"];
9
9
  const Text = /*#__PURE__*/polymorphicComponent(function Text(_ref, ref) {
@@ -20,9 +20,9 @@ const Text = /*#__PURE__*/polymorphicComponent(function Text(_ref, ref) {
20
20
  props = _objectWithoutProperties(_ref, _excluded);
21
21
 
22
22
  const lineClampMultipleLines = typeof lineClamp === 'string' ? Number(lineClamp) > 1 : (lineClamp != null ? lineClamp : 1) > 1;
23
- return /*#__PURE__*/createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
23
+ return /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
24
24
  as: as,
25
- className: [exceptionallySetClassName, styles.text, size !== 'body' ? getClassNames(styles, 'size', size) : null, weight !== 'regular' ? getClassNames(styles, 'weight', weight) : null, tone !== 'normal' ? getClassNames(styles, 'tone', tone) : null, lineClampMultipleLines ? styles.lineClampMultipleLines : null, lineClamp ? getClassNames(styles, 'lineClamp', lineClamp.toString()) : null],
25
+ className: [exceptionallySetClassName, modules_a9637dd3.text, size !== 'body' ? getClassNames(modules_a9637dd3, 'size', size) : null, weight !== 'regular' ? getClassNames(modules_a9637dd3, 'weight', weight) : null, tone !== 'normal' ? getClassNames(modules_a9637dd3, 'tone', tone) : null, lineClampMultipleLines ? modules_a9637dd3.lineClampMultipleLines : null, lineClamp ? getClassNames(modules_a9637dd3, 'lineClamp', lineClamp.toString()) : null],
26
26
  textAlign: align,
27
27
  // Prevents emojis from being cut-off
28
28
  // See https://github.com/Doist/reactist/pull/528
@@ -1 +1 @@
1
- {"version":3,"file":"text.js","sources":["../../src/text/text.tsx"],"sourcesContent":["import * as React from 'react'\nimport { getClassNames } from '../utils/responsive-props'\nimport { Box } from '../box'\nimport { polymorphicComponent } from '../utils/polymorphism'\n\nimport type { Tone } from '../utils/common-types'\nimport type { BoxProps } from '../box'\n\nimport styles from './text.module.css'\n\ntype TextProps = {\n children: React.ReactNode\n /**\n * The size of the text.\n *\n * The supported values, from smaller size to larger size, are:\n * 'caption', 'copy', 'body', and 'subtitle'\n *\n * @default 'body'\n */\n size?: 'caption' | 'copy' | 'body' | 'subtitle'\n /**\n * The weight of the text font.\n *\n * @default 'regular'\n */\n weight?: 'regular' | 'semibold' | 'bold'\n /**\n * The tone (semantic color) of the text.\n *\n * @default 'normal'\n */\n tone?: Tone\n /**\n * Used to truncate the text to a given number of lines.\n *\n * It will add an ellipsis (`…`) to the text at the end of the last line, only if the text was\n * truncated. If the text fits without it being truncated, no ellipsis is added.\n *\n * By default, the text is not truncated at all, no matter how many lines it takes to render it.\n *\n * @default undefined\n */\n lineClamp?: 1 | 2 | 3 | 4 | 5 | '1' | '2' | '3' | '4' | '5'\n /**\n * How to align the text horizontally.\n *\n * @default 'start'\n */\n align?: BoxProps['textAlign']\n}\n\nconst Text = polymorphicComponent<'div', TextProps>(function Text(\n {\n as,\n size = 'body',\n weight = 'regular',\n tone = 'normal',\n align,\n children,\n lineClamp,\n exceptionallySetClassName,\n ...props\n },\n ref,\n) {\n const lineClampMultipleLines =\n typeof lineClamp === 'string' ? Number(lineClamp) > 1 : (lineClamp ?? 1) > 1\n\n return (\n <Box\n {...props}\n as={as}\n className={[\n exceptionallySetClassName,\n styles.text,\n size !== 'body' ? getClassNames(styles, 'size', size) : null,\n weight !== 'regular' ? getClassNames(styles, 'weight', weight) : null,\n tone !== 'normal' ? getClassNames(styles, 'tone', tone) : null,\n lineClampMultipleLines ? styles.lineClampMultipleLines : null,\n lineClamp ? getClassNames(styles, 'lineClamp', lineClamp.toString()) : null,\n ]}\n textAlign={align}\n // Prevents emojis from being cut-off\n // See https://github.com/Doist/reactist/pull/528\n paddingRight={lineClamp ? 'xsmall' : undefined}\n ref={ref}\n >\n {children}\n </Box>\n )\n})\n\nexport type { TextProps }\nexport { Text }\n"],"names":["Text","polymorphicComponent","ref","as","size","weight","tone","align","children","lineClamp","exceptionallySetClassName","props","lineClampMultipleLines","Number","React","Box","className","styles","text","getClassNames","toString","textAlign","paddingRight","undefined"],"mappings":";;;;;;;;MAoDMA,IAAI,gBAAGC,oBAAoB,CAAmB,SAASD,IAAT,OAYhDE,GAZgD;MAChD;IACIC,EADJ;IAEIC,IAAI,GAAG,MAFX;IAGIC,MAAM,GAAG,SAHb;IAIIC,IAAI,GAAG,QAJX;IAKIC,KALJ;IAMIC,QANJ;IAOIC,SAPJ;IAQIC;;MACGC;;EAIP,MAAMC,sBAAsB,GACxB,OAAOH,SAAP,KAAqB,QAArB,GAAgCI,MAAM,CAACJ,SAAD,CAAN,GAAoB,CAApD,GAAwD,CAACA,SAAD,WAACA,SAAD,GAAc,CAAd,IAAmB,CAD/E;EAGA,oBACIK,aAAA,CAACC,GAAD,oCACQJ,KADR;IAEIR,EAAE,EAAEA,EAFR;IAGIa,SAAS,EAAE,CACPN,yBADO,EAEPO,MAAM,CAACC,IAFA,EAGPd,IAAI,KAAK,MAAT,GAAkBe,aAAa,CAACF,MAAD,EAAS,MAAT,EAAiBb,IAAjB,CAA/B,GAAwD,IAHjD,EAIPC,MAAM,KAAK,SAAX,GAAuBc,aAAa,CAACF,MAAD,EAAS,QAAT,EAAmBZ,MAAnB,CAApC,GAAiE,IAJ1D,EAKPC,IAAI,KAAK,QAAT,GAAoBa,aAAa,CAACF,MAAD,EAAS,MAAT,EAAiBX,IAAjB,CAAjC,GAA0D,IALnD,EAMPM,sBAAsB,GAAGK,MAAM,CAACL,sBAAV,GAAmC,IANlD,EAOPH,SAAS,GAAGU,aAAa,CAACF,MAAD,EAAS,WAAT,EAAsBR,SAAS,CAACW,QAAV,EAAtB,CAAhB,GAA8D,IAPhE,CAHf;IAYIC,SAAS,EAAEd,KAZf;;;IAeIe,YAAY,EAAEb,SAAS,GAAG,QAAH,GAAcc,SAfzC;IAgBIrB,GAAG,EAAEA;MAEJM,QAlBL,CADJ;AAsBH,CAvCgC;;;;"}
1
+ {"version":3,"file":"text.js","sources":["../../src/text/text.tsx"],"sourcesContent":["import * as React from 'react'\nimport { getClassNames } from '../utils/responsive-props'\nimport { Box } from '../box'\nimport { polymorphicComponent } from '../utils/polymorphism'\n\nimport type { Tone } from '../utils/common-types'\nimport type { BoxProps } from '../box'\n\nimport styles from './text.module.css'\n\ntype TextProps = {\n children: React.ReactNode\n /**\n * The size of the text.\n *\n * The supported values, from smaller size to larger size, are:\n * 'caption', 'copy', 'body', and 'subtitle'\n *\n * @default 'body'\n */\n size?: 'caption' | 'copy' | 'body' | 'subtitle'\n /**\n * The weight of the text font.\n *\n * @default 'regular'\n */\n weight?: 'regular' | 'semibold' | 'bold'\n /**\n * The tone (semantic color) of the text.\n *\n * @default 'normal'\n */\n tone?: Tone\n /**\n * Used to truncate the text to a given number of lines.\n *\n * It will add an ellipsis (`…`) to the text at the end of the last line, only if the text was\n * truncated. If the text fits without it being truncated, no ellipsis is added.\n *\n * By default, the text is not truncated at all, no matter how many lines it takes to render it.\n *\n * @default undefined\n */\n lineClamp?: 1 | 2 | 3 | 4 | 5 | '1' | '2' | '3' | '4' | '5'\n /**\n * How to align the text horizontally.\n *\n * @default 'start'\n */\n align?: BoxProps['textAlign']\n}\n\nconst Text = polymorphicComponent<'div', TextProps>(function Text(\n {\n as,\n size = 'body',\n weight = 'regular',\n tone = 'normal',\n align,\n children,\n lineClamp,\n exceptionallySetClassName,\n ...props\n },\n ref,\n) {\n const lineClampMultipleLines =\n typeof lineClamp === 'string' ? Number(lineClamp) > 1 : (lineClamp ?? 1) > 1\n\n return (\n <Box\n {...props}\n as={as}\n className={[\n exceptionallySetClassName,\n styles.text,\n size !== 'body' ? getClassNames(styles, 'size', size) : null,\n weight !== 'regular' ? getClassNames(styles, 'weight', weight) : null,\n tone !== 'normal' ? getClassNames(styles, 'tone', tone) : null,\n lineClampMultipleLines ? styles.lineClampMultipleLines : null,\n lineClamp ? getClassNames(styles, 'lineClamp', lineClamp.toString()) : null,\n ]}\n textAlign={align}\n // Prevents emojis from being cut-off\n // See https://github.com/Doist/reactist/pull/528\n paddingRight={lineClamp ? 'xsmall' : undefined}\n ref={ref}\n >\n {children}\n </Box>\n )\n})\n\nexport type { TextProps }\nexport { Text }\n"],"names":["Text","polymorphicComponent","ref","as","size","weight","tone","align","children","lineClamp","exceptionallySetClassName","props","lineClampMultipleLines","Number","React","createElement","Box","className","styles","text","getClassNames","toString","textAlign","paddingRight","undefined"],"mappings":";;;;;;;;AAoDMA,MAAAA,IAAI,gBAAGC,oBAAoB,CAAmB,SAASD,IAAT,CAAA,IAAA,EAYhDE,GAZgD,EAY7C;EAAA,IAXH;IACIC,EADJ;AAEIC,IAAAA,IAAI,GAAG,MAFX;AAGIC,IAAAA,MAAM,GAAG,SAHb;AAIIC,IAAAA,IAAI,GAAG,QAJX;IAKIC,KALJ;IAMIC,QANJ;IAOIC,SAPJ;AAQIC,IAAAA,yBAAAA;GAGD,GAAA,IAAA;AAAA,MAFIC,KAEJ,GAAA,wBAAA,CAAA,IAAA,EAAA,SAAA,CAAA,CAAA;;EAEH,MAAMC,sBAAsB,GACxB,OAAOH,SAAP,KAAqB,QAArB,GAAgCI,MAAM,CAACJ,SAAD,CAAN,GAAoB,CAApD,GAAwD,CAACA,SAAD,WAACA,SAAD,GAAc,CAAd,IAAmB,CAD/E,CAAA;AAGA,EAAA,oBACIK,KAAC,CAAAC,aAAD,CAACC,GAAD,oCACQL,KADR,CAAA,EAAA,EAAA,EAAA;AAEIR,IAAAA,EAAE,EAAEA,EAFR;AAGIc,IAAAA,SAAS,EAAE,CACPP,yBADO,EAEPQ,gBAAM,CAACC,IAFA,EAGPf,IAAI,KAAK,MAAT,GAAkBgB,aAAa,CAACF,gBAAD,EAAS,MAAT,EAAiBd,IAAjB,CAA/B,GAAwD,IAHjD,EAIPC,MAAM,KAAK,SAAX,GAAuBe,aAAa,CAACF,gBAAD,EAAS,QAAT,EAAmBb,MAAnB,CAApC,GAAiE,IAJ1D,EAKPC,IAAI,KAAK,QAAT,GAAoBc,aAAa,CAACF,gBAAD,EAAS,MAAT,EAAiBZ,IAAjB,CAAjC,GAA0D,IALnD,EAMPM,sBAAsB,GAAGM,gBAAM,CAACN,sBAAV,GAAmC,IANlD,EAOPH,SAAS,GAAGW,aAAa,CAACF,gBAAD,EAAS,WAAT,EAAsBT,SAAS,CAACY,QAAV,EAAtB,CAAhB,GAA8D,IAPhE,CAHf;AAYIC,IAAAA,SAAS,EAAEf,KAZf;AAaI;AACA;AACAgB,IAAAA,YAAY,EAAEd,SAAS,GAAG,QAAH,GAAce,SAfzC;AAgBItB,IAAAA,GAAG,EAAEA,GAAAA;AAhBT,GAAA,CAAA,EAkBKM,QAlBL,CADJ,CAAA;AAsBH,CAvCgC;;;;"}
@@ -1,4 +1,4 @@
1
1
  var modules_a9637dd3 = {"text":"a83bd4e0","size-caption":"_266d6623","size-copy":"a8d37c6e","size-subtitle":"_39f4eb1f","weight-semibold":"_7be5c531","weight-bold":"e214ff2e","tone-secondary":"_6a3e5ade","tone-danger":"_8f5b5f2b","tone-positive":"_9ae47ae4","lineClampMultipleLines":"_969f18f7","lineClamp-1":"_2f303ac3","lineClamp-2":"d3e04245","lineClamp-3":"_33411704","lineClamp-4":"bfc32640","lineClamp-5":"f813c82f"};
2
2
 
3
- export default modules_a9637dd3;
3
+ export { modules_a9637dd3 as default };
4
4
  //# sourceMappingURL=text.module.css.js.map
@@ -1,12 +1,12 @@
1
1
  import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
2
- import { forwardRef, useRef, useEffect, createElement } from 'react';
3
- import { Box } from '../box/box.js';
4
- import { BaseField } from '../base-field/base-field.js';
2
+ import * as React from 'react';
5
3
  import { useMergeRefs } from 'use-callback-ref';
6
- import styles from './text-area.module.css.js';
4
+ import { BaseField } from '../base-field/base-field.js';
5
+ import { Box } from '../box/box.js';
6
+ import modules_2728c236 from './text-area.module.css.js';
7
7
 
8
8
  const _excluded = ["variant", "id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "maxWidth", "hidden", "aria-describedby", "rows", "autoExpand"];
9
- const TextArea = /*#__PURE__*/forwardRef(function TextArea(_ref, ref) {
9
+ const TextArea = /*#__PURE__*/React.forwardRef(function TextArea(_ref, ref) {
10
10
  let {
11
11
  variant = 'default',
12
12
  id,
@@ -24,10 +24,10 @@ const TextArea = /*#__PURE__*/forwardRef(function TextArea(_ref, ref) {
24
24
  } = _ref,
25
25
  props = _objectWithoutProperties(_ref, _excluded);
26
26
 
27
- const containerRef = useRef(null);
28
- const internalRef = useRef(null);
27
+ const containerRef = React.useRef(null);
28
+ const internalRef = React.useRef(null);
29
29
  const combinedRef = useMergeRefs([ref, internalRef]);
30
- useEffect(function setupAutoExpand() {
30
+ React.useEffect(function setupAutoExpand() {
31
31
  const containerElement = containerRef.current;
32
32
 
33
33
  function handleAutoExpand(value) {
@@ -51,7 +51,7 @@ const TextArea = /*#__PURE__*/forwardRef(function TextArea(_ref, ref) {
51
51
  textAreaElement.addEventListener('input', handleInput);
52
52
  return () => textAreaElement.removeEventListener('input', handleInput);
53
53
  }, [autoExpand]);
54
- return /*#__PURE__*/createElement(BaseField, {
54
+ return /*#__PURE__*/React.createElement(BaseField, {
55
55
  variant: variant,
56
56
  id: id,
57
57
  label: label,
@@ -62,17 +62,17 @@ const TextArea = /*#__PURE__*/forwardRef(function TextArea(_ref, ref) {
62
62
  tone: tone,
63
63
  hidden: hidden,
64
64
  "aria-describedby": ariaDescribedBy,
65
- className: [styles.textAreaContainer, tone === 'error' ? styles.error : null, variant === 'bordered' ? styles.bordered : null],
65
+ className: [modules_2728c236.textAreaContainer, tone === 'error' ? modules_2728c236.error : null, variant === 'bordered' ? modules_2728c236.bordered : null],
66
66
  maxWidth: maxWidth
67
- }, extraProps => /*#__PURE__*/createElement(Box, {
67
+ }, extraProps => /*#__PURE__*/React.createElement(Box, {
68
68
  width: "full",
69
69
  display: "flex",
70
- className: styles.innerContainer,
70
+ className: modules_2728c236.innerContainer,
71
71
  ref: containerRef
72
- }, /*#__PURE__*/createElement("textarea", _objectSpread2(_objectSpread2(_objectSpread2({}, props), extraProps), {}, {
72
+ }, /*#__PURE__*/React.createElement("textarea", _objectSpread2(_objectSpread2(_objectSpread2({}, props), extraProps), {}, {
73
73
  ref: combinedRef,
74
74
  rows: rows,
75
- className: autoExpand ? styles.autoExpand : undefined
75
+ className: autoExpand ? modules_2728c236.autoExpand : undefined
76
76
  }))));
77
77
  });
78
78