@cambly/syntax-core 20.7.0 → 21.1.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 (276) hide show
  1. package/dist/RichSelect/RichSelectList.css +11 -8
  2. package/dist/RichSelect/RichSelectList.css.map +1 -1
  3. package/dist/RichSelect/RichSelectList.js +3 -3
  4. package/dist/SelectList/SelectList.js +2 -2
  5. package/dist/TabButton/TabButton.css +11 -8
  6. package/dist/TabButton/TabButton.css.map +1 -1
  7. package/dist/TabButton/TabButton.js +2 -2
  8. package/dist/TapArea/TapArea.css +11 -8
  9. package/dist/TapArea/TapArea.css.map +1 -1
  10. package/dist/TapArea/TapArea.d.ts +4 -0
  11. package/dist/TapArea/TapArea.js +1 -1
  12. package/dist/__chunks/{WCHW3AYL.js → EOWYHIIV.js} +2 -2
  13. package/dist/__chunks/{XMSJWQLW.js → L6DEFAVZ.js} +2 -2
  14. package/dist/__chunks/{WIKMZ7QF.js → RAYMYVIO.js} +3 -3
  15. package/dist/__chunks/{77FFPQY6.js → S3C44SBB.js} +5 -2
  16. package/dist/__chunks/S3C44SBB.js.map +1 -0
  17. package/dist/__chunks/{JGDLN47H.js → SGGPK2H4.js} +1 -1
  18. package/dist/__chunks/{JGDLN47H.js.map → SGGPK2H4.js.map} +1 -1
  19. package/dist/index.css +11 -8
  20. package/dist/index.css.map +1 -1
  21. package/dist/index.js +5 -5
  22. package/package.json +5 -5
  23. package/dist/Avatar/Avatar.cjs +0 -16
  24. package/dist/Avatar/Avatar.cjs.map +0 -1
  25. package/dist/AvatarGroup/AvatarGroup.cjs +0 -17
  26. package/dist/AvatarGroup/AvatarGroup.cjs.map +0 -1
  27. package/dist/Badge/Badge.cjs +0 -17
  28. package/dist/Badge/Badge.cjs.map +0 -1
  29. package/dist/Box/Box.cjs +0 -14
  30. package/dist/Box/Box.cjs.map +0 -1
  31. package/dist/Button/Button.cjs +0 -25
  32. package/dist/Button/Button.cjs.map +0 -1
  33. package/dist/Button/constants/iconSize.cjs +0 -11
  34. package/dist/Button/constants/iconSize.cjs.map +0 -1
  35. package/dist/Button/constants/loadingIconSize.cjs +0 -9
  36. package/dist/Button/constants/loadingIconSize.cjs.map +0 -1
  37. package/dist/Button/constants/textVariant.cjs +0 -9
  38. package/dist/Button/constants/textVariant.cjs.map +0 -1
  39. package/dist/ButtonGroup/ButtonGroup.cjs +0 -9
  40. package/dist/ButtonGroup/ButtonGroup.cjs.map +0 -1
  41. package/dist/Card/Card.cjs +0 -15
  42. package/dist/Card/Card.cjs.map +0 -1
  43. package/dist/Checkbox/Checkbox.cjs +0 -16
  44. package/dist/Checkbox/Checkbox.cjs.map +0 -1
  45. package/dist/Chip/Chip.cjs +0 -18
  46. package/dist/Chip/Chip.cjs.map +0 -1
  47. package/dist/Dialog/Dialog.cjs +0 -19
  48. package/dist/Dialog/Dialog.cjs.map +0 -1
  49. package/dist/Dialog/ModalDialog.cjs +0 -32
  50. package/dist/Dialog/ModalDialog.cjs.map +0 -1
  51. package/dist/Divider/Divider.cjs +0 -11
  52. package/dist/Divider/Divider.cjs.map +0 -1
  53. package/dist/Heading/Heading.cjs +0 -13
  54. package/dist/Heading/Heading.cjs.map +0 -1
  55. package/dist/Icon/Icon.cjs +0 -11
  56. package/dist/Icon/Icon.cjs.map +0 -1
  57. package/dist/IconButton/IconButton.cjs +0 -22
  58. package/dist/IconButton/IconButton.cjs.map +0 -1
  59. package/dist/IconLinkButton/IconLinkButton.cjs +0 -17
  60. package/dist/IconLinkButton/IconLinkButton.cjs.map +0 -1
  61. package/dist/LinkButton/LinkButton.cjs +0 -21
  62. package/dist/LinkButton/LinkButton.cjs.map +0 -1
  63. package/dist/Modal/FocusTrap.cjs +0 -10
  64. package/dist/Modal/FocusTrap.cjs.map +0 -1
  65. package/dist/Modal/Layer.cjs +0 -15
  66. package/dist/Modal/Layer.cjs.map +0 -1
  67. package/dist/Modal/Modal.cjs +0 -29
  68. package/dist/Modal/Modal.cjs.map +0 -1
  69. package/dist/Modal/StopScroll.cjs +0 -9
  70. package/dist/Modal/StopScroll.cjs.map +0 -1
  71. package/dist/Popover/Popover.cjs +0 -34
  72. package/dist/Popover/Popover.cjs.map +0 -1
  73. package/dist/RadioButton/RadioButton.cjs +0 -20
  74. package/dist/RadioButton/RadioButton.cjs.map +0 -1
  75. package/dist/RichSelect/RichSelectBox.cjs +0 -42
  76. package/dist/RichSelect/RichSelectBox.cjs.map +0 -1
  77. package/dist/RichSelect/RichSelectChip.cjs +0 -20
  78. package/dist/RichSelect/RichSelectChip.cjs.map +0 -1
  79. package/dist/RichSelect/RichSelectItem.cjs +0 -12
  80. package/dist/RichSelect/RichSelectItem.cjs.map +0 -1
  81. package/dist/RichSelect/RichSelectList.cjs +0 -51
  82. package/dist/RichSelect/RichSelectList.cjs.map +0 -1
  83. package/dist/RichSelect/RichSelectRadioButton.cjs +0 -22
  84. package/dist/RichSelect/RichSelectRadioButton.cjs.map +0 -1
  85. package/dist/RichSelect/RichSelectSection.cjs +0 -16
  86. package/dist/RichSelect/RichSelectSection.cjs.map +0 -1
  87. package/dist/SelectList/SelectList.cjs +0 -22
  88. package/dist/SelectList/SelectList.cjs.map +0 -1
  89. package/dist/SelectList/SelectOption.cjs +0 -9
  90. package/dist/SelectList/SelectOption.cjs.map +0 -1
  91. package/dist/TabButton/TabButton.cjs +0 -22
  92. package/dist/TabButton/TabButton.cjs.map +0 -1
  93. package/dist/TabLink/TabLink.cjs +0 -20
  94. package/dist/TabLink/TabLink.cjs.map +0 -1
  95. package/dist/Tabs/TabInternal.cjs +0 -17
  96. package/dist/Tabs/TabInternal.cjs.map +0 -1
  97. package/dist/Tabs/Tabs.cjs +0 -16
  98. package/dist/Tabs/Tabs.cjs.map +0 -1
  99. package/dist/TapArea/TapArea.cjs +0 -11
  100. package/dist/TapArea/TapArea.cjs.map +0 -1
  101. package/dist/TextArea/TextArea.cjs +0 -19
  102. package/dist/TextArea/TextArea.cjs.map +0 -1
  103. package/dist/TextField/TextField.cjs +0 -20
  104. package/dist/TextField/TextField.cjs.map +0 -1
  105. package/dist/ThemeProvider/ThemeProvider.cjs +0 -9
  106. package/dist/ThemeProvider/ThemeProvider.cjs.map +0 -1
  107. package/dist/Tooltip/Tooltip.cjs +0 -24
  108. package/dist/Tooltip/Tooltip.cjs.map +0 -1
  109. package/dist/Typography/Typography.cjs +0 -12
  110. package/dist/Typography/Typography.cjs.map +0 -1
  111. package/dist/WordConfetti/WordConfetti.cjs +0 -17
  112. package/dist/WordConfetti/WordConfetti.cjs.map +0 -1
  113. package/dist/__chunks/2D3DOVVZ.cjs +0 -37
  114. package/dist/__chunks/2D3DOVVZ.cjs.map +0 -1
  115. package/dist/__chunks/2XIVACBM.cjs +0 -9
  116. package/dist/__chunks/2XIVACBM.cjs.map +0 -1
  117. package/dist/__chunks/36JMUQOL.cjs +0 -205
  118. package/dist/__chunks/36JMUQOL.cjs.map +0 -1
  119. package/dist/__chunks/3P2PWHOU.cjs +0 -14
  120. package/dist/__chunks/3P2PWHOU.cjs.map +0 -1
  121. package/dist/__chunks/3UEOKPM2.cjs +0 -136
  122. package/dist/__chunks/3UEOKPM2.cjs.map +0 -1
  123. package/dist/__chunks/3ULBWSHT.cjs +0 -169
  124. package/dist/__chunks/3ULBWSHT.cjs.map +0 -1
  125. package/dist/__chunks/4QUXUGJP.cjs +0 -47
  126. package/dist/__chunks/4QUXUGJP.cjs.map +0 -1
  127. package/dist/__chunks/4TYOP5XM.cjs +0 -64
  128. package/dist/__chunks/4TYOP5XM.cjs.map +0 -1
  129. package/dist/__chunks/4UT6BROB.cjs +0 -141
  130. package/dist/__chunks/4UT6BROB.cjs.map +0 -1
  131. package/dist/__chunks/5ITNEIMC.cjs +0 -109
  132. package/dist/__chunks/5ITNEIMC.cjs.map +0 -1
  133. package/dist/__chunks/5JUNB754.cjs +0 -15
  134. package/dist/__chunks/5JUNB754.cjs.map +0 -1
  135. package/dist/__chunks/6KSVCCCB.cjs +0 -38
  136. package/dist/__chunks/6KSVCCCB.cjs.map +0 -1
  137. package/dist/__chunks/77FFPQY6.js.map +0 -1
  138. package/dist/__chunks/7DGFMDT7.cjs +0 -9
  139. package/dist/__chunks/7DGFMDT7.cjs.map +0 -1
  140. package/dist/__chunks/7KH536I2.cjs +0 -32
  141. package/dist/__chunks/7KH536I2.cjs.map +0 -1
  142. package/dist/__chunks/7VI7DO7P.cjs +0 -13
  143. package/dist/__chunks/7VI7DO7P.cjs.map +0 -1
  144. package/dist/__chunks/A3B4YKGN.cjs +0 -28
  145. package/dist/__chunks/A3B4YKGN.cjs.map +0 -1
  146. package/dist/__chunks/AFOQ6JVB.cjs +0 -211
  147. package/dist/__chunks/AFOQ6JVB.cjs.map +0 -1
  148. package/dist/__chunks/AHM6QK6U.cjs +0 -133
  149. package/dist/__chunks/AHM6QK6U.cjs.map +0 -1
  150. package/dist/__chunks/AVJQ2E2G.cjs +0 -37
  151. package/dist/__chunks/AVJQ2E2G.cjs.map +0 -1
  152. package/dist/__chunks/B3JRSVBD.cjs +0 -35
  153. package/dist/__chunks/B3JRSVBD.cjs.map +0 -1
  154. package/dist/__chunks/BVNFNAUO.cjs +0 -149
  155. package/dist/__chunks/BVNFNAUO.cjs.map +0 -1
  156. package/dist/__chunks/CHDS4D44.cjs +0 -9
  157. package/dist/__chunks/CHDS4D44.cjs.map +0 -1
  158. package/dist/__chunks/DDWGNNLC.cjs +0 -101
  159. package/dist/__chunks/DDWGNNLC.cjs.map +0 -1
  160. package/dist/__chunks/DHXH7ZSG.cjs +0 -130
  161. package/dist/__chunks/DHXH7ZSG.cjs.map +0 -1
  162. package/dist/__chunks/E5P6WRJD.cjs +0 -32
  163. package/dist/__chunks/E5P6WRJD.cjs.map +0 -1
  164. package/dist/__chunks/F3SUJGZL.cjs +0 -56
  165. package/dist/__chunks/F3SUJGZL.cjs.map +0 -1
  166. package/dist/__chunks/FXLAQKAB.cjs +0 -67
  167. package/dist/__chunks/FXLAQKAB.cjs.map +0 -1
  168. package/dist/__chunks/FZLDJPVT.cjs +0 -65
  169. package/dist/__chunks/FZLDJPVT.cjs.map +0 -1
  170. package/dist/__chunks/GEXK47GR.cjs +0 -42
  171. package/dist/__chunks/GEXK47GR.cjs.map +0 -1
  172. package/dist/__chunks/GQUBAKFO.cjs +0 -139
  173. package/dist/__chunks/GQUBAKFO.cjs.map +0 -1
  174. package/dist/__chunks/HRTHCEIF.cjs +0 -37
  175. package/dist/__chunks/HRTHCEIF.cjs.map +0 -1
  176. package/dist/__chunks/HUIHS6RN.cjs +0 -19
  177. package/dist/__chunks/HUIHS6RN.cjs.map +0 -1
  178. package/dist/__chunks/IFPLOCSV.cjs +0 -143
  179. package/dist/__chunks/IFPLOCSV.cjs.map +0 -1
  180. package/dist/__chunks/IJHKE2Y3.cjs +0 -144
  181. package/dist/__chunks/IJHKE2Y3.cjs.map +0 -1
  182. package/dist/__chunks/IL22HCBF.cjs +0 -9
  183. package/dist/__chunks/IL22HCBF.cjs.map +0 -1
  184. package/dist/__chunks/J2QDHB6I.cjs +0 -34
  185. package/dist/__chunks/J2QDHB6I.cjs.map +0 -1
  186. package/dist/__chunks/J5XNUGR3.cjs +0 -76
  187. package/dist/__chunks/J5XNUGR3.cjs.map +0 -1
  188. package/dist/__chunks/JVGX637E.cjs +0 -26
  189. package/dist/__chunks/JVGX637E.cjs.map +0 -1
  190. package/dist/__chunks/K4AUV2VK.cjs +0 -16
  191. package/dist/__chunks/K4AUV2VK.cjs.map +0 -1
  192. package/dist/__chunks/KFNK5PLG.cjs +0 -122
  193. package/dist/__chunks/KFNK5PLG.cjs.map +0 -1
  194. package/dist/__chunks/LLFHCGRA.cjs +0 -19
  195. package/dist/__chunks/LLFHCGRA.cjs.map +0 -1
  196. package/dist/__chunks/MENEINOO.cjs +0 -91
  197. package/dist/__chunks/MENEINOO.cjs.map +0 -1
  198. package/dist/__chunks/MF7LLV7V.cjs +0 -9
  199. package/dist/__chunks/MF7LLV7V.cjs.map +0 -1
  200. package/dist/__chunks/NOELZTQX.cjs +0 -96
  201. package/dist/__chunks/NOELZTQX.cjs.map +0 -1
  202. package/dist/__chunks/O7M2NMNZ.cjs +0 -50
  203. package/dist/__chunks/O7M2NMNZ.cjs.map +0 -1
  204. package/dist/__chunks/OKT24L6D.cjs +0 -80
  205. package/dist/__chunks/OKT24L6D.cjs.map +0 -1
  206. package/dist/__chunks/PLUVW6AM.cjs +0 -9
  207. package/dist/__chunks/PLUVW6AM.cjs.map +0 -1
  208. package/dist/__chunks/PMNFDB6C.cjs +0 -121
  209. package/dist/__chunks/PMNFDB6C.cjs.map +0 -1
  210. package/dist/__chunks/QODNNCT2.cjs +0 -236
  211. package/dist/__chunks/QODNNCT2.cjs.map +0 -1
  212. package/dist/__chunks/QR3HKPXF.cjs +0 -84
  213. package/dist/__chunks/QR3HKPXF.cjs.map +0 -1
  214. package/dist/__chunks/R7BL4JYZ.cjs +0 -83
  215. package/dist/__chunks/R7BL4JYZ.cjs.map +0 -1
  216. package/dist/__chunks/RHJARLXB.cjs +0 -160
  217. package/dist/__chunks/RHJARLXB.cjs.map +0 -1
  218. package/dist/__chunks/RXQBNEFR.cjs +0 -47
  219. package/dist/__chunks/RXQBNEFR.cjs.map +0 -1
  220. package/dist/__chunks/RYUXG4AS.cjs +0 -53
  221. package/dist/__chunks/RYUXG4AS.cjs.map +0 -1
  222. package/dist/__chunks/RZSHTFXZ.cjs +0 -289
  223. package/dist/__chunks/RZSHTFXZ.cjs.map +0 -1
  224. package/dist/__chunks/TH4TA3JN.cjs +0 -9
  225. package/dist/__chunks/TH4TA3JN.cjs.map +0 -1
  226. package/dist/__chunks/THM3NAFO.cjs +0 -76
  227. package/dist/__chunks/THM3NAFO.cjs.map +0 -1
  228. package/dist/__chunks/TOAI3Z5M.cjs +0 -75
  229. package/dist/__chunks/TOAI3Z5M.cjs.map +0 -1
  230. package/dist/__chunks/UEY7FXLX.cjs +0 -22
  231. package/dist/__chunks/UEY7FXLX.cjs.map +0 -1
  232. package/dist/__chunks/UKQIAZA5.cjs +0 -9
  233. package/dist/__chunks/UKQIAZA5.cjs.map +0 -1
  234. package/dist/__chunks/VDLYCYDQ.cjs +0 -53
  235. package/dist/__chunks/VDLYCYDQ.cjs.map +0 -1
  236. package/dist/__chunks/VVRMCACE.cjs +0 -102
  237. package/dist/__chunks/VVRMCACE.cjs.map +0 -1
  238. package/dist/__chunks/WFVGNGEP.cjs +0 -2
  239. package/dist/__chunks/WFVGNGEP.cjs.map +0 -1
  240. package/dist/__chunks/WKADTHRK.cjs +0 -40
  241. package/dist/__chunks/WKADTHRK.cjs.map +0 -1
  242. package/dist/__chunks/X2SDR4SD.cjs +0 -39
  243. package/dist/__chunks/X2SDR4SD.cjs.map +0 -1
  244. package/dist/__chunks/XLUVINJW.cjs +0 -9
  245. package/dist/__chunks/XLUVINJW.cjs.map +0 -1
  246. package/dist/__chunks/XUDOYOWH.cjs +0 -117
  247. package/dist/__chunks/XUDOYOWH.cjs.map +0 -1
  248. package/dist/colors/allColors.cjs +0 -80
  249. package/dist/colors/allColors.cjs.map +0 -1
  250. package/dist/colors/backgroundColor.cjs +0 -11
  251. package/dist/colors/backgroundColor.cjs.map +0 -1
  252. package/dist/colors/border.cjs +0 -11
  253. package/dist/colors/border.cjs.map +0 -1
  254. package/dist/colors/foregroundColor.cjs +0 -11
  255. package/dist/colors/foregroundColor.cjs.map +0 -1
  256. package/dist/colors/textColors.cjs +0 -11
  257. package/dist/colors/textColors.cjs.map +0 -1
  258. package/dist/constants.cjs +0 -22
  259. package/dist/constants.cjs.map +0 -1
  260. package/dist/index.cjs +0 -166
  261. package/dist/index.cjs.map +0 -1
  262. package/dist/react-aria-utils/OverlayVisibility.cjs +0 -9
  263. package/dist/react-aria-utils/OverlayVisibility.cjs.map +0 -1
  264. package/dist/react-aria-utils/Triggerable.cjs +0 -10
  265. package/dist/react-aria-utils/Triggerable.cjs.map +0 -1
  266. package/dist/react-aria-utils/placement.cjs +0 -9
  267. package/dist/react-aria-utils/placement.cjs.map +0 -1
  268. package/dist/react-aria-utils/useDomRefSyntheticEventBridge.cjs +0 -9
  269. package/dist/react-aria-utils/useDomRefSyntheticEventBridge.cjs.map +0 -1
  270. package/dist/useFocusVisible.cjs +0 -9
  271. package/dist/useFocusVisible.cjs.map +0 -1
  272. package/dist/useIsHydrated.cjs +0 -9
  273. package/dist/useIsHydrated.cjs.map +0 -1
  274. /package/dist/__chunks/{WCHW3AYL.js.map → EOWYHIIV.js.map} +0 -0
  275. /package/dist/__chunks/{XMSJWQLW.js.map → L6DEFAVZ.js.map} +0 -0
  276. /package/dist/__chunks/{WIKMZ7QF.js.map → RAYMYVIO.js.map} +0 -0
@@ -1,211 +0,0 @@
1
- "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
2
-
3
-
4
- var _6KSVCCCBcjs = require('./6KSVCCCB.cjs');
5
-
6
-
7
- var _BVNFNAUOcjs = require('./BVNFNAUO.cjs');
8
-
9
-
10
- var _A3B4YKGNcjs = require('./A3B4YKGN.cjs');
11
-
12
-
13
- var _VDLYCYDQcjs = require('./VDLYCYDQ.cjs');
14
-
15
-
16
- var _WKADTHRKcjs = require('./WKADTHRK.cjs');
17
-
18
-
19
- var _J2QDHB6Icjs = require('./J2QDHB6I.cjs');
20
-
21
-
22
-
23
- var _RYUXG4AScjs = require('./RYUXG4AS.cjs');
24
-
25
-
26
- var _QODNNCT2cjs = require('./QODNNCT2.cjs');
27
-
28
- // src/RichSelect/RichSelectBox.tsx
29
-
30
-
31
-
32
-
33
-
34
-
35
-
36
- var _react = require('react');
37
- var _reactariacomponents = require('react-aria-components');
38
- var _utils = require('@react-stately/utils');
39
- var _jsxruntime = require('react/jsx-runtime');
40
- function isString(val) {
41
- return typeof val === "string";
42
- }
43
- function isEqualSelection(set1, set2) {
44
- if (set1 === set2)
45
- return true;
46
- if (!set1 && !set2)
47
- return true;
48
- if (!set1 || !set2)
49
- return false;
50
- if (isString(set1))
51
- return set1 === set2;
52
- if (isString(set2))
53
- return false;
54
- if (set1.size !== set2.size)
55
- return false;
56
- for (const item of set1) {
57
- if (!set2.has(item))
58
- return false;
59
- }
60
- return true;
61
- }
62
- function convertSelection(selection, defaultValue) {
63
- if (!selection)
64
- return defaultValue;
65
- if (selection === "all")
66
- return "all";
67
- return new Set(selection);
68
- }
69
- var RichSelectBoxContext = _react.createContext.call(void 0, {});
70
- var RichSelectBox = _react.forwardRef.call(void 0,
71
- function RichSelectBox2(props, ref) {
72
- const {
73
- accessibilityLabel,
74
- autosave,
75
- children,
76
- "data-testid": dataTestId,
77
- multiple = false,
78
- onChange,
79
- primaryButtonText,
80
- primaryButtonAccessibilityLabel,
81
- secondaryButtonText,
82
- secondaryButtonAccessibilityLabel,
83
- selectedValues: selectedValuesProp,
84
- defaultSelectedValues: defaultSelectedValuesProp
85
- } = props;
86
- const selectedKeysProp = _react.useMemo.call(void 0,
87
- () => convertSelection(selectedValuesProp),
88
- [selectedValuesProp]
89
- );
90
- const defaultSelectedKeys = _react.useMemo.call(void 0,
91
- () => convertSelection(defaultSelectedValuesProp, /* @__PURE__ */ new Set()),
92
- [defaultSelectedValuesProp]
93
- );
94
- const [selectedKeys, setSelectedKeys] = _utils.useControlledState.call(void 0,
95
- selectedKeysProp,
96
- // eslint-disable-line @typescript-eslint/no-non-null-assertion -- there is a bug in the typedef for useControlledState from react-stately. Internally they rely on value (first arg) able to be undefined
97
- defaultSelectedKeys,
98
- (value) => {
99
- if (isEqualSelection(value, selectedKeys))
100
- return;
101
- if (value === "all")
102
- return onChange("all");
103
- onChange([...value].map(String));
104
- }
105
- );
106
- const [stagedKeys, setStagedKeys] = _react.useState.call(void 0,
107
- selectedKeys
108
- );
109
- const saveChanges = () => setSelectedKeys(stagedKeys);
110
- const clearChanges = () => setStagedKeys(/* @__PURE__ */ new Set());
111
- const stageChanges = (selectedValues) => {
112
- setStagedKeys(selectedValues);
113
- if (autosave)
114
- setSelectedKeys(selectedValues);
115
- };
116
- const [disabledKeysComposed, setDisabledKeysComposed] = _react.useState.call(void 0,
117
- /* @__PURE__ */ new Set()
118
- );
119
- const disableKey = _react.useCallback.call(void 0, (key, _disabled) => {
120
- setDisabledKeysComposed((keys) => {
121
- if (keys.has(key) === _disabled)
122
- return keys;
123
- _disabled ? keys.add(key) : keys.delete(key);
124
- return new Set(keys);
125
- });
126
- }, []);
127
- const { autoFocus } = _react.useContext.call(void 0, RichSelectBoxContext);
128
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _RYUXG4AScjs.RichSelectItemContext.Provider, { value: { disableKey }, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _QODNNCT2cjs.Box_default, { children: [
129
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
130
- _reactariacomponents.ListBox,
131
- {
132
- ref,
133
- "aria-label": accessibilityLabel,
134
- autoFocus,
135
- selectionMode: multiple ? "multiple" : "single",
136
- selectionBehavior: multiple ? "toggle" : "replace",
137
- shouldFocusWrap: true,
138
- orientation: "horizontal",
139
- selectedKeys: stagedKeys,
140
- onSelectionChange: stageChanges,
141
- disabledKeys: disabledKeysComposed,
142
- className: _RYUXG4AScjs.RichSelect_module_default.richSelectBox,
143
- children
144
- }
145
- ),
146
- !autosave && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
147
- _QODNNCT2cjs.Box_default,
148
- {
149
- backgroundColor: "white",
150
- display: "flex",
151
- direction: "column",
152
- gap: 5,
153
- marginTop: 5,
154
- justifyContent: "end",
155
- position: "sticky",
156
- dangerouslySetInlineStyle: {
157
- __style: {
158
- bottom: 0
159
- }
160
- },
161
- children: [
162
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _QODNNCT2cjs.Box_default, { flex: "grow", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _A3B4YKGNcjs.Divider, {}) }),
163
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
164
- _QODNNCT2cjs.Box_default,
165
- {
166
- paddingY: 5,
167
- marginTop: -5,
168
- display: "flex",
169
- justifyContent: "end",
170
- children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _6KSVCCCBcjs.ButtonGroup_default, { orientation: "horizontal", children: [
171
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
172
- _BVNFNAUOcjs.Button_default,
173
- {
174
- onClick: clearChanges,
175
- color: "secondary",
176
- text: secondaryButtonText,
177
- accessibilityLabel: secondaryButtonAccessibilityLabel,
178
- "data-testid": [dataTestId, "secondary-button"].filter(Boolean).join("-")
179
- }
180
- ),
181
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
182
- _BVNFNAUOcjs.Button_default,
183
- {
184
- onClick: saveChanges,
185
- text: primaryButtonText,
186
- accessibilityLabel: primaryButtonAccessibilityLabel,
187
- color: "primary",
188
- "data-testid": [dataTestId, "primary-button"].filter(Boolean).join("-")
189
- }
190
- )
191
- ] })
192
- }
193
- )
194
- ]
195
- }
196
- )
197
- ] }) });
198
- }
199
- );
200
- var RichSelectBox_default = Object.assign(RichSelectBox, {
201
- Section: _VDLYCYDQcjs.RichSelectSection_default,
202
- Chip: _J2QDHB6Icjs.RichSelectChip_default,
203
- RadioButton: _WKADTHRKcjs.RichSelectRadioButton_default
204
- });
205
-
206
-
207
-
208
-
209
-
210
- exports.convertSelection = convertSelection; exports.RichSelectBoxContext = RichSelectBoxContext; exports.RichSelectBox_default = RichSelectBox_default;
211
- //# sourceMappingURL=AFOQ6JVB.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/RichSelect/RichSelectBox.tsx"],"names":["RichSelectBox"],"mappings":"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","sourcesContent":["import React, {\n forwardRef,\n type ReactElement,\n useContext,\n useState,\n useCallback,\n createContext,\n useMemo,\n} from \"react\";\nimport { ListBox as ReactAriaListBox } from \"react-aria-components\";\nimport { type Key } from \"react-aria\";\nimport { type Selection } from \"react-stately\";\nimport { useControlledState } from \"@react-stately/utils\";\nimport { RichSelectItemContext } from \"./RichSelectItem\";\nimport ButtonGroup from \"../ButtonGroup/ButtonGroup\";\nimport Button from \"../Button/Button\";\nimport styles from \"./RichSelect.module.css\";\nimport Box from \"../Box/Box\";\nimport Divider from \"../Divider/Divider\";\nimport RichSelectSection from \"./RichSelectSection\";\nimport RichSelectChip from \"./RichSelectChip\";\nimport RichSelectRadioButton from \"./RichSelectRadioButton\";\n\ntype RichSelectChild =\n | ReactElement<typeof RichSelectChip>\n | ReactElement<typeof RichSelectRadioButton>\n | ReactElement<typeof RichSelectSection>;\n\nfunction isString(val: unknown): val is string {\n return typeof val === \"string\";\n}\n\nfunction isEqualSelection(set1?: Selection, set2?: Selection): boolean {\n if (set1 === set2) return true;\n if (!set1 && !set2) return true;\n if (!set1 || !set2) return false;\n if (isString(set1)) return set1 === set2;\n if (isString(set2)) return false;\n if (set1.size !== set2.size) return false;\n for (const item of set1) {\n if (!set2.has(item)) return false;\n }\n return true;\n}\n\nexport function convertSelection(\n selection: \"all\" | Iterable<Key> | undefined,\n defaultValue?: \"all\" | Set<Key>,\n): \"all\" | Set<Key> | undefined {\n if (!selection) return defaultValue;\n if (selection === \"all\") return \"all\";\n return new Set(selection);\n}\n\nexport type RichSelectBoxProps = {\n /** aria-label for the list box */\n accessibilityLabel: string;\n /** Automatically saves changes when true, shows save/clear buttons when not true */\n autosave?: boolean;\n /** Test id for the list box element */\n \"data-testid\"?: string;\n /** One or more RichSelectList.<Chip|RadioButton|Section|...> components. */\n children: RichSelectChild | RichSelectChild[];\n /** Default selected values */\n defaultSelectedValues?: Set<Key> | string[] | \"all\";\n /** Enables multiple selection (multiselect) */\n multiple?: boolean;\n /** The callback to be called when options are selected / committed */\n onChange: (selectedValues: string[] | \"all\") => void;\n /** Text for primary button (Save). Required: string must be translated */\n primaryButtonText: string;\n /** accessibilityLabel for primary Button component (Save). Required: string must be translated */\n primaryButtonAccessibilityLabel: string;\n /** Text for primary button (Clear). Required: string must be translated */\n secondaryButtonText: string;\n /** accessibilityLabel for secondary Button component (Clear). Required: string must be translated */\n secondaryButtonAccessibilityLabel: string;\n /** Value of the currently selected options */\n selectedValues?: Set<Key> | string[] | \"all\";\n};\n\ntype RichSelectBoxContextType = {\n /** Automatically focuses RichSelectBox on mount when enabled */\n autoFocus?: boolean;\n};\nexport const RichSelectBoxContext = createContext<RichSelectBoxContextType>({});\n\n/**\n * [RichSelectBox](https://cambly-syntax.vercel.app/?path=/docs/components-richselectbox--docs) is an element that allows users to select one or multiple options from a list.\n *\n * Example Usage:\n ```\n <RichSelectBox\n label=\"My Label\"\n multiple\n onChange={() => { ... }}\n primaryButtonText=\"Save\"\n primaryButtonAccessibilityLabel=\"Save\"\n secondaryButtonText=\"Clear\"\n secondaryButtonAccessibilityLabel=\"Clear\"\n >\n <RichSelectBox.Section label=\"Cities\">\n <RichSelectBox.Chip label=\"San Francisco\" value=\"sf\" />\n <RichSelectBox.Chip label=\"New York\" value=\"ny\" disabled />\n <RichSelectBox.Chip label=\"Tulsa\" value=\"tulsa\" />\n <RichSelectBox.Chip label=\"Chicago\" value=\"chicago\" disabled />\n </RichSelectBox.Section>\n </RichSelectBox>\n ```\n */\nconst RichSelectBox = forwardRef<HTMLDivElement, RichSelectBoxProps>(\n function RichSelectBox(props, ref): ReactElement {\n const {\n accessibilityLabel,\n autosave,\n children,\n \"data-testid\": dataTestId,\n multiple = false,\n onChange,\n primaryButtonText,\n primaryButtonAccessibilityLabel,\n secondaryButtonText,\n secondaryButtonAccessibilityLabel,\n selectedValues: selectedValuesProp,\n defaultSelectedValues: defaultSelectedValuesProp,\n } = props;\n\n const selectedKeysProp = useMemo(\n () => convertSelection(selectedValuesProp),\n [selectedValuesProp],\n );\n const defaultSelectedKeys = useMemo(\n () => convertSelection(defaultSelectedValuesProp, new Set()),\n [defaultSelectedValuesProp],\n );\n const [selectedKeys, setSelectedKeys] = useControlledState(\n selectedKeysProp!, // eslint-disable-line @typescript-eslint/no-non-null-assertion -- there is a bug in the typedef for useControlledState from react-stately. Internally they rely on value (first arg) able to be undefined\n defaultSelectedKeys,\n (value) => {\n if (isEqualSelection(value, selectedKeys)) return;\n // Notify parent about the changes\n if (value === \"all\") return onChange(\"all\");\n onChange([...value].map(String));\n },\n );\n const [stagedKeys, setStagedKeys] = useState<Set<Key> | \"all\">(\n selectedKeys,\n );\n\n const saveChanges = () => setSelectedKeys(stagedKeys);\n const clearChanges = () => setStagedKeys(new Set());\n const stageChanges = (selectedValues: Selection) => {\n setStagedKeys(selectedValues);\n if (autosave) setSelectedKeys(selectedValues);\n };\n\n // inject method into context so children can disable themselves\n // by adding `disabled` attribute (through RichSelectItem)\n const [disabledKeysComposed, setDisabledKeysComposed] = useState<Set<Key>>(\n new Set(),\n );\n const disableKey = useCallback((key: Key, _disabled: boolean) => {\n setDisabledKeysComposed((keys) => {\n if (keys.has(key) === _disabled) return keys;\n _disabled ? keys.add(key) : keys.delete(key);\n return new Set(keys);\n });\n }, []);\n\n // higher level context for autoFocus behavior (parent sets when rendering RichSelectBox in overlay)\n const { autoFocus } = useContext(RichSelectBoxContext);\n\n return (\n <RichSelectItemContext.Provider value={{ disableKey }}>\n <Box>\n <ReactAriaListBox\n ref={ref}\n aria-label={accessibilityLabel}\n autoFocus={autoFocus}\n selectionMode={multiple ? \"multiple\" : \"single\"}\n selectionBehavior={multiple ? \"toggle\" : \"replace\"}\n shouldFocusWrap={true}\n orientation=\"horizontal\"\n selectedKeys={stagedKeys}\n onSelectionChange={stageChanges}\n disabledKeys={disabledKeysComposed}\n className={styles.richSelectBox}\n >\n {children}\n </ReactAriaListBox>\n {!autosave && (\n <Box\n backgroundColor=\"white\"\n display=\"flex\"\n direction=\"column\"\n gap={5}\n marginTop={5}\n justifyContent=\"end\"\n position=\"sticky\"\n dangerouslySetInlineStyle={{\n __style: {\n bottom: 0,\n },\n }}\n >\n <Box flex=\"grow\">\n <Divider />\n </Box>\n <Box\n paddingY={5}\n marginTop={-5}\n display=\"flex\"\n justifyContent=\"end\"\n >\n <ButtonGroup orientation=\"horizontal\">\n <Button\n onClick={clearChanges}\n color={\"secondary\"}\n text={secondaryButtonText}\n accessibilityLabel={secondaryButtonAccessibilityLabel}\n data-testid={[dataTestId, \"secondary-button\"]\n .filter(Boolean)\n .join(\"-\")}\n />\n <Button\n onClick={saveChanges}\n text={primaryButtonText}\n accessibilityLabel={primaryButtonAccessibilityLabel}\n color=\"primary\"\n data-testid={[dataTestId, \"primary-button\"]\n .filter(Boolean)\n .join(\"-\")}\n />\n </ButtonGroup>\n </Box>\n </Box>\n )}\n </Box>\n </RichSelectItemContext.Provider>\n );\n },\n);\n\nexport default Object.assign(RichSelectBox, {\n Section: RichSelectSection,\n Chip: RichSelectChip,\n RadioButton: RichSelectRadioButton,\n});\n"]}
@@ -1,133 +0,0 @@
1
- "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
2
-
3
-
4
- var _O7M2NMNZcjs = require('./O7M2NMNZ.cjs');
5
-
6
-
7
- var _HUIHS6RNcjs = require('./HUIHS6RN.cjs');
8
-
9
-
10
- var _7KH536I2cjs = require('./7KH536I2.cjs');
11
-
12
-
13
- var _THM3NAFOcjs = require('./THM3NAFO.cjs');
14
-
15
-
16
- var _KFNK5PLGcjs = require('./KFNK5PLG.cjs');
17
-
18
-
19
- var _QODNNCT2cjs = require('./QODNNCT2.cjs');
20
-
21
- // css-module:./Modal.module.css#css-module
22
- var Modal_module_default = { "backdrop": "_backdrop_17lbk_1", "closeButton": "_closeButton_17lbk_10" };
23
-
24
- // src/Modal/Modal.tsx
25
- var _jsxruntime = require('react/jsx-runtime');
26
- function XIcon({ className }) {
27
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
28
- "svg",
29
- {
30
- className,
31
- fill: "currentColor",
32
- focusable: "false",
33
- "aria-hidden": "true",
34
- viewBox: "0 0 24 24",
35
- children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })
36
- }
37
- );
38
- }
39
- function Modal({
40
- header,
41
- children,
42
- image,
43
- onDismiss,
44
- footer,
45
- accessibilityCloseLabel = "close modal",
46
- zIndex = 1,
47
- "data-testid": dataTestId
48
- }) {
49
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _7KH536I2cjs.Layer, { zIndex, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _HUIHS6RNcjs.StopScroll, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _THM3NAFOcjs.FocusTrap, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
50
- "div",
51
- {
52
- className: Modal_module_default.backdrop,
53
- role: "presentation",
54
- onMouseDown: (e) => e.target === e.currentTarget && onDismiss(),
55
- onKeyDown: (e) => e.key === "Escape" && onDismiss(),
56
- children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
57
- _QODNNCT2cjs.Box_default,
58
- {
59
- "data-testid": dataTestId,
60
- backgroundColor: "gray100",
61
- rounding: "md",
62
- display: "flex",
63
- marginStart: 4,
64
- marginEnd: 4,
65
- marginTop: 8,
66
- marginBottom: 8,
67
- minWidth: 240,
68
- maxHeight: "calc(100vh - 64px)",
69
- maxWidth: 600,
70
- overflow: "hidden",
71
- position: "relative",
72
- width: "100%",
73
- children: [
74
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
75
- _QODNNCT2cjs.Box_default,
76
- {
77
- position: "absolute",
78
- dangerouslySetInlineStyle: {
79
- __style: { top: 4, right: 4 }
80
- },
81
- children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
82
- _KFNK5PLGcjs.IconButton_default,
83
- {
84
- accessibilityLabel: accessibilityCloseLabel,
85
- color: image ? "primary" : "tertiary",
86
- on: image ? "darkBackground" : "lightBackground",
87
- onClick: onDismiss,
88
- size: "md",
89
- icon: XIcon
90
- }
91
- )
92
- }
93
- ),
94
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _QODNNCT2cjs.Box_default, { display: "flex", direction: "column", width: "100%", children: [
95
- image && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _QODNNCT2cjs.Box_default, { children: image }),
96
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _QODNNCT2cjs.Box_default, { padding: 6, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _O7M2NMNZcjs.Heading_default, { as: "h1", size: 700, fontStyle: "serif", children: header }) }),
97
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
98
- _QODNNCT2cjs.Box_default,
99
- {
100
- height: "100%",
101
- overflowY: "auto",
102
- paddingX: 6,
103
- marginBottom: footer ? 0 : 6,
104
- children
105
- }
106
- ),
107
- footer && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
108
- _QODNNCT2cjs.Box_default,
109
- {
110
- display: "flex",
111
- direction: "column",
112
- gap: 3,
113
- smDirection: "row",
114
- smJustifyContent: "end",
115
- lgDirection: "row",
116
- lgJustifyContent: "end",
117
- padding: 6,
118
- children: footer
119
- }
120
- )
121
- ] })
122
- ]
123
- }
124
- )
125
- }
126
- ) }) }) });
127
- }
128
- Modal.displayName = "Modal";
129
-
130
-
131
-
132
- exports.Modal = Modal;
133
- //# sourceMappingURL=AHM6QK6U.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["css-module:./Modal.module.css#css-module","../../src/Modal/Modal.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAA0F,IAAO,uBAAQ,EAAC,YAAW,qBAAoB,eAAc,wBAAuB;;;ACoBxK,cAsJQ,YAtJR;AATN,SAAS,MAAM,EAAE,UAAU,GAA2B;AACpD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,SAAQ;AAAA,MAER,8BAAC,UAAK,GAAE,yGAAwG;AAAA;AAAA,EAClH;AAEJ;AAmCe,SAAR,MAAuB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,0BAA0B;AAAA,EAC1B,SAAS;AAAA,EACT,eAAe;AACjB,GA4DiB;AACf,SACE,oBAAC,SAAM,QACL,8BAAC,cACC,8BAAC,aACC;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,qBAAO;AAAA,MAClB,MAAK;AAAA,MACL,aAAa,CAAC,MAAM,EAAE,WAAW,EAAE,iBAAiB,UAAU;AAAA,MAC9D,WAAW,CAAC,MAAM,EAAE,QAAQ,YAAY,UAAU;AAAA,MAElD;AAAA,QAAC;AAAA;AAAA,UACC,eAAa;AAAA,UACb,iBAAgB;AAAA,UAChB,UAAS;AAAA,UACT,SAAQ;AAAA,UACR,aAAa;AAAA,UACb,WAAW;AAAA,UACX,WAAW;AAAA,UACX,cAAc;AAAA,UACd,UAAU;AAAA,UACV,WAAU;AAAA,UACV,UAAU;AAAA,UACV,UAAS;AAAA,UACT,UAAS;AAAA,UACT,OAAM;AAAA,UAEN;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,UAAS;AAAA,gBACT,2BAA2B;AAAA,kBACzB,SAAS,EAAE,KAAK,GAAG,OAAO,EAAE;AAAA,gBAC9B;AAAA,gBAEA;AAAA,kBAAC;AAAA;AAAA,oBACC,oBAAoB;AAAA,oBACpB,OAAO,QAAQ,YAAY;AAAA,oBAC3B,IAAI,QAAQ,mBAAmB;AAAA,oBAC/B,SAAS;AAAA,oBACT,MAAK;AAAA,oBACL,MAAM;AAAA;AAAA,gBACR;AAAA;AAAA,YACF;AAAA,YAEA,qBAAC,eAAI,SAAQ,QAAO,WAAU,UAAS,OAAM,QAC1C;AAAA,uBAAS,oBAAC,eAAK,iBAAM;AAAA,cACtB,oBAAC,eAAI,SAAS,GACZ,8BAAC,mBAAQ,IAAG,MAAK,MAAM,KAAK,WAAU,SACnC,kBACH,GACF;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,QAAO;AAAA,kBACP,WAAU;AAAA,kBACV,UAAU;AAAA,kBACV,cAAc,SAAS,IAAI;AAAA,kBAE1B;AAAA;AAAA,cACH;AAAA,cACC,UACC;AAAA,gBAAC;AAAA;AAAA,kBACC,SAAQ;AAAA,kBACR,WAAU;AAAA,kBACV,KAAK;AAAA,kBACL,aAAY;AAAA,kBACZ,kBAAiB;AAAA,kBACjB,aAAY;AAAA,kBACZ,kBAAiB;AAAA,kBACjB,SAAS;AAAA,kBAER;AAAA;AAAA,cACH;AAAA,eAEJ;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF,GACF,GACF,GACF;AAEJ;AAEA,MAAM,cAAc","sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Modal/Modal.module.css\"; export default {\"backdrop\":\"_backdrop_17lbk_1\",\"closeButton\":\"_closeButton_17lbk_10\"}","import { type ReactElement } from \"react\";\n\nimport Heading from \"../Heading/Heading\";\nimport Box from \"../Box/Box\";\n\nimport FocusTrap from \"./FocusTrap\";\nimport StopScroll from \"./StopScroll\";\nimport Layer from \"./Layer\";\nimport styles from \"./Modal.module.css\";\nimport IconButton from \"../IconButton/IconButton\";\n\nfunction XIcon({ className }: { className?: string }) {\n return (\n <svg\n className={className}\n fill=\"currentColor\"\n focusable=\"false\"\n aria-hidden=\"true\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"></path>\n </svg>\n );\n}\n\n/**\n * [Modal](https://cambly-syntax.vercel.app/?path=/docs/components-modal--docs) is a dialog that appears on top of the main content and locks user interaction within the modal.\n *\n ```\n const [showModal, setShowModal] = useState(false)\n\n return (\n <>\n {showModal && <Modal\n header=\"header text\"\n onDismiss={() => setShowModal(false)}\n footer={\n <>\n <Button\n text=\"Cancel\"\n color=\"secondary\"\n onClick={() => {}}\n />\n <Button\n text=\"Confirm\"\n onClick={() => {}}\n />\n </>\n }\n >\n <Typography>\n Body text goes here!\n </Typography>\n </Modal> }\n </>\n )\n ```\n */\nexport default function Modal({\n header,\n children,\n image,\n onDismiss,\n footer,\n accessibilityCloseLabel = \"close modal\",\n zIndex = 1,\n \"data-testid\": dataTestId,\n}: {\n /**\n * The modal's main content. Should typically take in `Typography`'d text.\n */\n children: JSX.Element;\n /**\n * The header inside a modal as a string.\n */\n header: string;\n /**\n * What the X button (or clicking out of the modal area) does.\n * Typically used for closing the Modal\n */\n onDismiss: () => void;\n /**\n * The optional image rendered above the Modal.\n * Image\n * * Size should be 600w x 200h\n * * Be sure to set width=\"100%\" on the image\n * If images aren't that sized, should ask design to give another image.\n */\n image?: JSX.Element;\n /**\n * The footer for the bottom area of the Modal. Typically used for rendering buttons.\n * * Use Syntax `Button` and pass it into footer.\n * * If one button, just pass it in. If two, wrap in a React fragment (`<> </>`)\n * * If two(2) buttons, put primary button _second_.\n *\n <>\n <Button\n text=\"Cancel\"\n color=\"secondary\"\n onClick={() => {}}\n />\n <Button\n text=\"Confirm\"\n onClick={() => {}}\n />\n </>\n */\n footer?: JSX.Element;\n /**\n * The accessibilty text on the close button.\n * (Sets the aria-label of the button)\n *\n *\n * @defaultValue close modal\n */\n accessibilityCloseLabel?: string;\n /**\n * The z-index for the modal.\n * Typically used if there are other things on the page with higher z-index and you need this overlayed on top.\n *\n * @defaultValue 0\n */\n zIndex?: number;\n /**\n * Test id for the modal\n */\n \"data-testid\"?: string;\n}): ReactElement {\n return (\n <Layer zIndex={zIndex}>\n <StopScroll>\n <FocusTrap>\n <div\n className={styles.backdrop}\n role=\"presentation\"\n onMouseDown={(e) => e.target === e.currentTarget && onDismiss()}\n onKeyDown={(e) => e.key === \"Escape\" && onDismiss()}\n >\n <Box\n data-testid={dataTestId}\n backgroundColor=\"gray100\"\n rounding=\"md\"\n display=\"flex\"\n marginStart={4}\n marginEnd={4}\n marginTop={8}\n marginBottom={8}\n minWidth={240}\n maxHeight=\"calc(100vh - 64px)\"\n maxWidth={600}\n overflow=\"hidden\"\n position=\"relative\"\n width=\"100%\"\n >\n <Box\n position=\"absolute\"\n dangerouslySetInlineStyle={{\n __style: { top: 4, right: 4 },\n }}\n >\n <IconButton\n accessibilityLabel={accessibilityCloseLabel}\n color={image ? \"primary\" : \"tertiary\"}\n on={image ? \"darkBackground\" : \"lightBackground\"}\n onClick={onDismiss}\n size=\"md\"\n icon={XIcon}\n />\n </Box>\n\n <Box display=\"flex\" direction=\"column\" width=\"100%\">\n {image && <Box>{image}</Box>}\n <Box padding={6}>\n <Heading as=\"h1\" size={700} fontStyle=\"serif\">\n {header}\n </Heading>\n </Box>\n <Box\n height=\"100%\"\n overflowY=\"auto\"\n paddingX={6}\n marginBottom={footer ? 0 : 6}\n >\n {children}\n </Box>\n {footer && (\n <Box\n display=\"flex\"\n direction=\"column\"\n gap={3}\n smDirection=\"row\"\n smJustifyContent=\"end\"\n lgDirection=\"row\"\n lgJustifyContent=\"end\"\n padding={6}\n >\n {footer}\n </Box>\n )}\n </Box>\n </Box>\n </div>\n </FocusTrap>\n </StopScroll>\n </Layer>\n );\n}\n\nModal.displayName = \"Modal\";\n"]}
@@ -1,37 +0,0 @@
1
- "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
2
-
3
-
4
- var _QODNNCT2cjs = require('./QODNNCT2.cjs');
5
-
6
-
7
- var _X2SDR4SDcjs = require('./X2SDR4SD.cjs');
8
-
9
- // src/Card/Card.tsx
10
- var _react = require('react');
11
- var _jsxruntime = require('react/jsx-runtime');
12
- var Card = _react.forwardRef.call(void 0, function Card2(props, ref) {
13
- const _a = props, { children } = _a, cardProps = _X2SDR4SDcjs.__objRest.call(void 0, _a, ["children"]);
14
- const {
15
- backgroundColor = "white",
16
- size = "roomy",
17
- "data-testid": dataTestId
18
- } = cardProps;
19
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
20
- _QODNNCT2cjs.Box_default,
21
- {
22
- rounding: "md",
23
- padding: size === "compact" ? 2 : 4,
24
- width: "100%",
25
- backgroundColor,
26
- "data-testid": dataTestId,
27
- ref,
28
- children
29
- }
30
- );
31
- });
32
- var Card_default = Card;
33
-
34
-
35
-
36
- exports.Card_default = Card_default;
37
- //# sourceMappingURL=AVJQ2E2G.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/Card/Card.tsx"],"names":["Card"],"mappings":";;;;;;;;;AAAA,SAAS,kBAAkB;AA4CvB;AAZJ,IAAM,OAAO,WAAsC,SAASA,MAC1D,OACA,KACa;AACb,QAAmC,YAA3B,WApCV,IAoCqC,IAAd,sBAAc,IAAd,CAAb;AACR,QAAM;AAAA,IACJ,kBAAkB;AAAA,IAClB,OAAO;AAAA,IACP,eAAe;AAAA,EACjB,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAS;AAAA,MACT,SAAS,SAAS,YAAY,IAAI;AAAA,MAClC,OAAM;AAAA,MACN;AAAA,MACA,eAAa;AAAA,MACb;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,IAAO,eAAQ","sourcesContent":["import { forwardRef } from \"react\";\nimport Box from \"../Box/Box\";\nimport type allColors from \"../colors/allColors\";\n\ntype CardProps = {\n /**\n * Test id for the button\n */\n \"data-testid\"?: string;\n /**\n * The background color of the box.\n * @defaultValue `white`\n */\n backgroundColor?: (typeof allColors)[number];\n /**\n * The child components to render within Card.\n */\n children: JSX.Element;\n /**\n * The size of the card which specifies the padding and spacing of the card.\n *\n * `compact`: 8px padding\n * `roomy`: 16px padding\n *\n * @defaultValue `roomy`\n */\n size?: \"compact\" | \"roomy\";\n};\n\n/**\n * [Card](https://cambly-syntax.vercel.app/?path=/docs/components-card--docs) is a basic container component to apply consistent styling and render child components.\n */\nconst Card = forwardRef<HTMLDivElement, CardProps>(function Card(\n props: CardProps,\n ref,\n): JSX.Element {\n const { children, ...cardProps } = props;\n const {\n backgroundColor = \"white\",\n size = \"roomy\",\n \"data-testid\": dataTestId,\n } = cardProps;\n\n return (\n <Box\n rounding=\"md\"\n padding={size === \"compact\" ? 2 : 4}\n width=\"100%\"\n backgroundColor={backgroundColor}\n data-testid={dataTestId}\n ref={ref}\n >\n {children}\n </Box>\n );\n});\n\nexport default Card;\n"]}
@@ -1,35 +0,0 @@
1
- "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
2
-
3
-
4
- var _2XIVACBMcjs = require('./2XIVACBM.cjs');
5
-
6
- // src/colors/textColors.ts
7
- function textColor(color) {
8
- switch (color) {
9
- case "gray700":
10
- return _2XIVACBMcjs.colors_module_default.cambioGray700Color;
11
- case "white":
12
- return _2XIVACBMcjs.colors_module_default.cambioWhiteColor;
13
- case "white-secondary":
14
- return _2XIVACBMcjs.colors_module_default.cambioWhite70Color;
15
- case "inherit":
16
- return _2XIVACBMcjs.colors_module_default.inheritColor;
17
- case "destructive-primary":
18
- return _2XIVACBMcjs.colors_module_default.cambioDestructive900Color;
19
- case "destructive-lightBackground":
20
- return _2XIVACBMcjs.colors_module_default.cambioDestructive900Color;
21
- case "destructive-darkBackground":
22
- return _2XIVACBMcjs.colors_module_default.cambioDestructive300Color;
23
- case "success":
24
- return _2XIVACBMcjs.colors_module_default.cambioSuccess700Color;
25
- case "success-darkBackground":
26
- return _2XIVACBMcjs.colors_module_default.cambioSuccess100Color;
27
- default:
28
- return _2XIVACBMcjs.colors_module_default.cambioBlackColor;
29
- }
30
- }
31
-
32
-
33
-
34
- exports.textColor = textColor;
35
- //# sourceMappingURL=B3JRSVBD.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/colors/textColors.ts"],"names":[],"mappings":";;;;;;AAEe,SAAR,UACL,OAYQ;AACR,UAAQ,OAAO;AAAA,IACb,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IAErB;AACE,aAAO,sBAAY;AAAA,EACvB;AACF","sourcesContent":["import colorStyles from \"../colors/colors.module.css\";\n\nexport default function textColor(\n color:\n | \"gray900\"\n | \"gray700\"\n | \"primary\"\n | \"destructive-primary\"\n | \"destructive-lightBackground\"\n | \"destructive-darkBackground\"\n | \"success\"\n | \"success-darkBackground\"\n | \"white\"\n | \"white-secondary\"\n | \"inherit\",\n): string {\n switch (color) {\n case \"gray700\":\n return colorStyles.cambioGray700Color;\n case \"white\":\n return colorStyles.cambioWhiteColor;\n case \"white-secondary\":\n return colorStyles.cambioWhite70Color;\n case \"inherit\":\n return colorStyles.inheritColor;\n case \"destructive-primary\":\n return colorStyles.cambioDestructive900Color;\n case \"destructive-lightBackground\":\n return colorStyles.cambioDestructive900Color;\n case \"destructive-darkBackground\":\n return colorStyles.cambioDestructive300Color;\n case \"success\":\n return colorStyles.cambioSuccess700Color;\n case \"success-darkBackground\":\n return colorStyles.cambioSuccess100Color;\n // primary / gray900\n default:\n return colorStyles.cambioBlackColor;\n }\n}\n"]}
@@ -1,149 +0,0 @@
1
- "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
2
-
3
-
4
- var _5JUNB754cjs = require('./5JUNB754.cjs');
5
-
6
-
7
- var _3P2PWHOUcjs = require('./3P2PWHOU.cjs');
8
-
9
-
10
-
11
- var _UEY7FXLXcjs = require('./UEY7FXLX.cjs');
12
-
13
-
14
- var _RXQBNEFRcjs = require('./RXQBNEFR.cjs');
15
-
16
-
17
- var _2D3DOVVZcjs = require('./2D3DOVVZ.cjs');
18
-
19
-
20
- var _F3SUJGZLcjs = require('./F3SUJGZL.cjs');
21
-
22
-
23
- var _QODNNCT2cjs = require('./QODNNCT2.cjs');
24
-
25
-
26
- var _4TYOP5XMcjs = require('./4TYOP5XM.cjs');
27
-
28
-
29
- var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
30
-
31
- // src/Button/Button.tsx
32
- var _react = require('react');
33
- var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
34
-
35
- // css-module:./Button.module.css#css-module
36
- var Button_module_default = { "button": "_button_v2jgj_1", "buttonGap": "_buttonGap_v2jgj_8", "disabled": "_disabled_v2jgj_42", "disabledPrimary": "_disabledPrimary_v2jgj_57", "fullWidth": "_fullWidth_v2jgj_61", "sm": "_sm_v2jgj_65", "md": "_md_v2jgj_72", "lg": "_lg_v2jgj_79", "icon": "_icon_v2jgj_86", "smIcon": "_smIcon_v2jgj_90", "mdIcon": "_mdIcon_v2jgj_97", "lgIcon": "_lgIcon_v2jgj_104", "loading": "_loading_v2jgj_121", "syntaxButtonLoadingRotate": "_syntaxButtonLoadingRotate_v2jgj_1", "loadingCircle": "_loadingCircle_v2jgj_125" };
37
-
38
- // src/Button/Button.tsx
39
- var _jsxruntime = require('react/jsx-runtime');
40
- var Button = _react.forwardRef.call(void 0,
41
- ({
42
- "data-testid": dataTestId,
43
- text,
44
- loadingText,
45
- color = "primary",
46
- size = "md",
47
- accessibilityLabel,
48
- disabled = false,
49
- loading = false,
50
- fullWidth = false,
51
- startIcon: StartIcon,
52
- endIcon: EndIcon,
53
- on = "lightBackground",
54
- onClick,
55
- tooltip,
56
- type = "button"
57
- }, ref) => {
58
- const isHydrated = _K4AUV2VKcjs.useIsHydrated.call(void 0, );
59
- const foregroundColorClass = _RXQBNEFRcjs.foregroundColor.call(void 0, color, on);
60
- const backgroundColorClass = _F3SUJGZLcjs.backgroundColor.call(void 0, color, on);
61
- const disabledPrimary = color === "primary" && disabled;
62
- const isDisabled = !isHydrated || disabled || loading;
63
- return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
64
- "button",
65
- {
66
- "data-testid": dataTestId,
67
- ref,
68
- "aria-label": accessibilityLabel,
69
- type,
70
- title: tooltip,
71
- disabled: isDisabled,
72
- onClick,
73
- className: _classnames2.default.call(void 0,
74
- Button_module_default.button,
75
- foregroundColorClass,
76
- backgroundColorClass,
77
- _2D3DOVVZcjs.border.call(void 0, color, on),
78
- Button_module_default[size],
79
- {
80
- [Button_module_default.fullWidth]: fullWidth,
81
- [Button_module_default.buttonGap]: size === "lg" || size === "md",
82
- [Button_module_default.disabled]: isDisabled
83
- }
84
- ),
85
- children: [
86
- !loading && StartIcon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
87
- StartIcon,
88
- {
89
- className: _classnames2.default.call(void 0,
90
- Button_module_default.icon,
91
- _UEY7FXLXcjs.materialIconSize[size],
92
- disabledPrimary && Button_module_default.disabledPrimary
93
- ),
94
- size: _UEY7FXLXcjs.internalIconSize[size]
95
- }
96
- ),
97
- (loading && loadingText || !loading && text) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _QODNNCT2cjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _4TYOP5XMcjs.Typography_default, { size: _5JUNB754cjs.textVariant_default[size], weight: "medium", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
98
- "span",
99
- {
100
- className: _classnames2.default.call(void 0,
101
- foregroundColorClass,
102
- disabledPrimary && Button_module_default.disabledPrimary
103
- ),
104
- children: loading ? loadingText : text
105
- }
106
- ) }) }),
107
- !loading && EndIcon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
108
- EndIcon,
109
- {
110
- className: _classnames2.default.call(void 0,
111
- Button_module_default.icon,
112
- _UEY7FXLXcjs.materialIconSize[size],
113
- disabledPrimary && Button_module_default.disabledPrimary
114
- ),
115
- size: _UEY7FXLXcjs.internalIconSize[size]
116
- }
117
- ),
118
- loading && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
119
- "svg",
120
- {
121
- className: _classnames2.default.call(void 0, Button_module_default.loading, foregroundColorClass),
122
- viewBox: "22 22 44 44",
123
- width: _3P2PWHOUcjs.loadingIconSize_default[size],
124
- height: _3P2PWHOUcjs.loadingIconSize_default[size],
125
- children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
126
- "circle",
127
- {
128
- className: Button_module_default.loadingCircle,
129
- cx: "44",
130
- cy: "44",
131
- r: "20.2",
132
- fill: "none",
133
- strokeWidth: "3.6"
134
- }
135
- )
136
- }
137
- )
138
- ]
139
- }
140
- );
141
- }
142
- );
143
- Button.displayName = "Button";
144
- var Button_default = Button;
145
-
146
-
147
-
148
- exports.Button_default = Button_default;
149
- //# sourceMappingURL=BVNFNAUO.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/Button/Button.tsx","css-module:./Button.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAgB,kBAAuC;AACvD,OAAO,gBAAgB;;;ACDqE,IAAO,wBAAQ,EAAC,UAAS,mBAAkB,aAAY,sBAAqB,YAAW,sBAAqB,mBAAkB,6BAA4B,aAAY,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,QAAO,kBAAiB,UAAS,oBAAmB,UAAS,oBAAmB,UAAS,qBAAoB,WAAU,sBAAqB,6BAA4B,sCAAqC,iBAAgB,2BAA0B;;;AD4IrkB,SAsBI,KAtBJ;AA7BN,IAAM,SAAS;AAAA,EACb,CACE;AAAA,IACE,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,OAAO;AAAA,IACP;AAAA,IACA,WAAW;AAAA,IACX,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,SAAS;AAAA,IACT,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA,OAAO;AAAA,EACT,GACA,QACG;AACH,UAAM,aAAa,cAAc;AAEjC,UAAM,uBAAuB,gBAAgB,OAAO,EAAE;AACtD,UAAM,uBAAuB,gBAAgB,OAAO,EAAE;AACtD,UAAM,kBAAkB,UAAU,aAAa;AAC/C,UAAM,aAAa,CAAC,cAAc,YAAY;AAE9C,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAa;AAAA,QACb;AAAA,QACA,cAAY;AAAA,QACZ;AAAA,QACA,OAAO;AAAA,QACP,UAAU;AAAA,QACV;AAAA,QACA,WAAW;AAAA,UACT,sBAAO;AAAA,UACP;AAAA,UACA;AAAA,UACA,OAAO,OAAO,EAAE;AAAA,UAChB,sBAAO,IAAI;AAAA,UACX;AAAA,YACE,CAAC,sBAAO,SAAS,GAAG;AAAA,YACpB,CAAC,sBAAO,SAAS,GAAG,SAAS,QAAQ,SAAS;AAAA,YAC9C,CAAC,sBAAO,QAAQ,GAAG;AAAA,UACrB;AAAA,QACF;AAAA,QAEC;AAAA,WAAC,WAAW,aACX;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT,sBAAO;AAAA,gBACP,iBAAiB,IAAI;AAAA,gBACrB,mBAAmB,sBAAO;AAAA,cAC5B;AAAA,cACA,MAAM,iBAAiB,IAAI;AAAA;AAAA,UAC7B;AAAA,WAEC,WAAW,eAAiB,CAAC,WAAW,SACzC,oBAAC,eAAI,UAAU,GACb,8BAAC,sBAAW,MAAM,oBAAY,IAAI,GAAG,QAAO,UAC1C;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,mBAAmB,sBAAO;AAAA,cAC5B;AAAA,cAEC,oBAAU,cAAc;AAAA;AAAA,UAC3B,GACF,GACF;AAAA,UAED,CAAC,WAAW,WACX;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT,sBAAO;AAAA,gBACP,iBAAiB,IAAI;AAAA,gBACrB,mBAAmB,sBAAO;AAAA,cAC5B;AAAA,cACA,MAAM,iBAAiB,IAAI;AAAA;AAAA,UAC7B;AAAA,UAED,WACC;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,WAAW,sBAAO,SAAS,oBAAoB;AAAA,cAC1D,SAAQ;AAAA,cACR,OAAO,wBAAgB,IAAI;AAAA,cAC3B,QAAQ,wBAAgB,IAAI;AAAA,cAE5B;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAW,sBAAO;AAAA,kBAClB,IAAG;AAAA,kBACH,IAAG;AAAA,kBACH,GAAE;AAAA,kBACF,MAAK;AAAA,kBACL,aAAY;AAAA;AAAA,cACd;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;AAErB,IAAO,iBAAQ","sourcesContent":["import React, { forwardRef, type ComponentProps } from \"react\";\nimport classNames from \"classnames\";\nimport { type Size } from \"../constants\";\nimport Typography from \"../Typography/Typography\";\nimport Box from \"../Box/Box\";\nimport { materialIconSize, internalIconSize } from \"./constants/iconSize\";\nimport textVariant from \"./constants/textVariant\";\nimport loadingIconSize from \"./constants/loadingIconSize\";\nimport styles from \"./Button.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { backgroundColor } from \"../colors/backgroundColor\";\nimport { foregroundColor } from \"../colors/foregroundColor\";\nimport { border } from \"../colors/border\";\nimport type InternalIcon from \"../Icon/Icon\";\n\ntype ButtonProps = {\n /**\n * Test id for the button\n */\n \"data-testid\"?: string;\n /**\n * The text to be displayed inside the button\n */\n text: string;\n /**\n * The text to be displayed inside the button when it is in a loading state\n */\n loadingText?: string;\n /**\n * The color of the button\n *\n * @defaultValue \"primary\"\n */\n color?:\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"destructive-primary\"\n | \"destructive-secondary\"\n | \"destructive-tertiary\"\n | \"branded\"\n | \"success-primary\"\n | \"success-secondary\"\n | \"success-tertiary\";\n /**\n * The size of the button\n *\n * * `sm`: 32px\n * * `md`: 48px\n * * `lg`: 64px\n *\n * @defaultValue \"md\"\n */\n size?: (typeof Size)[number];\n /**\n * The label to be used for accessibility\n */\n accessibilityLabel?: string;\n /**\n * If `true`, the button will be disabled\n *\n * @defaultValue false\n */\n disabled?: boolean;\n /**\n * If `true`, the button will be in a loading state\n *\n * @defaultValue false\n */\n loading?: boolean;\n /**\n * If `true`, the button will take up the full width of its container\n *\n * @defaultValue false\n */\n fullWidth?: boolean;\n /**\n * The icon to be displayed at the start of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n */\n startIcon?:\n | React.ComponentType<{ className?: string }>\n | React.ComponentType<ComponentProps<typeof InternalIcon>>;\n /**\n * The icon to be displayed at the end of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n */\n endIcon?:\n | React.ComponentType<{ className?: string }>\n | React.ComponentType<ComponentProps<typeof InternalIcon>>;\n /**\n * Indicate whether the button renders on a light or dark background. Changes the color of the button\n *\n * @defaulValue `lightBackground`\n */\n on?: \"lightBackground\" | \"darkBackground\";\n /**\n * The callback to be called when the button is clicked\n */\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n /**\n * The tooltip to be displayed when the user hovers over the button\n */\n tooltip?: string;\n /**\n * The type you want to set for the primitive `<button/>`\n */\n type?: \"button\" | \"submit\" | \"reset\";\n};\n\n/**\n * [Button](https://cambly-syntax.vercel.app/?path=/docs/components-button--docs) is used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.\n */\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n \"data-testid\": dataTestId,\n text,\n loadingText,\n color = \"primary\",\n size = \"md\",\n accessibilityLabel,\n disabled = false,\n loading = false,\n fullWidth = false,\n startIcon: StartIcon,\n endIcon: EndIcon,\n on = \"lightBackground\",\n onClick,\n tooltip,\n type = \"button\",\n }: ButtonProps,\n ref,\n ) => {\n const isHydrated = useIsHydrated();\n\n const foregroundColorClass = foregroundColor(color, on);\n const backgroundColorClass = backgroundColor(color, on);\n const disabledPrimary = color === \"primary\" && disabled;\n const isDisabled = !isHydrated || disabled || loading;\n\n return (\n <button\n data-testid={dataTestId}\n ref={ref}\n aria-label={accessibilityLabel}\n type={type}\n title={tooltip}\n disabled={isDisabled}\n onClick={onClick}\n className={classNames(\n styles.button,\n foregroundColorClass,\n backgroundColorClass,\n border(color, on),\n styles[size],\n {\n [styles.fullWidth]: fullWidth,\n [styles.buttonGap]: size === \"lg\" || size === \"md\",\n [styles.disabled]: isDisabled,\n },\n )}\n >\n {!loading && StartIcon && (\n <StartIcon\n className={classNames(\n styles.icon,\n materialIconSize[size],\n disabledPrimary && styles.disabledPrimary,\n )}\n size={internalIconSize[size]}\n />\n )}\n {((loading && loadingText) || (!loading && text)) && (\n <Box paddingX={1}>\n <Typography size={textVariant[size]} weight=\"medium\">\n <span\n className={classNames(\n foregroundColorClass,\n disabledPrimary && styles.disabledPrimary,\n )}\n >\n {loading ? loadingText : text}\n </span>\n </Typography>\n </Box>\n )}\n {!loading && EndIcon && (\n <EndIcon\n className={classNames(\n styles.icon,\n materialIconSize[size],\n disabledPrimary && styles.disabledPrimary,\n )}\n size={internalIconSize[size]}\n />\n )}\n {loading && (\n <svg\n className={classNames(styles.loading, foregroundColorClass)}\n viewBox=\"22 22 44 44\"\n width={loadingIconSize[size]}\n height={loadingIconSize[size]}\n >\n <circle\n className={styles.loadingCircle}\n cx=\"44\"\n cy=\"44\"\n r=\"20.2\"\n fill=\"none\"\n strokeWidth=\"3.6\"\n />\n </svg>\n )}\n </button>\n );\n },\n);\n\nButton.displayName = \"Button\";\n\nexport default Button;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Button/Button.module.css\"; export default {\"button\":\"_button_v2jgj_1\",\"buttonGap\":\"_buttonGap_v2jgj_8\",\"disabled\":\"_disabled_v2jgj_42\",\"disabledPrimary\":\"_disabledPrimary_v2jgj_57\",\"fullWidth\":\"_fullWidth_v2jgj_61\",\"sm\":\"_sm_v2jgj_65\",\"md\":\"_md_v2jgj_72\",\"lg\":\"_lg_v2jgj_79\",\"icon\":\"_icon_v2jgj_86\",\"smIcon\":\"_smIcon_v2jgj_90\",\"mdIcon\":\"_mdIcon_v2jgj_97\",\"lgIcon\":\"_lgIcon_v2jgj_104\",\"loading\":\"_loading_v2jgj_121\",\"syntaxButtonLoadingRotate\":\"_syntaxButtonLoadingRotate_v2jgj_1\",\"loadingCircle\":\"_loadingCircle_v2jgj_125\"}"]}