@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 +0,0 @@
1
- {"version":3,"sources":["../../src/Tabs/Tabs.tsx","css-module:./Tabs.module.css#css-module"],"names":[],"mappings":";;;;;;AACA,OAAO,gBAAgB;;;ACDiE,IAAO,sBAAQ,EAAC,+BAA8B,wCAAuC,8BAA6B,uCAAsC,OAAM,gBAAe,gCAA+B,0CAAyC,+BAA8B,yCAAwC,iBAAgB,2BAA0B,QAAO,iBAAgB;;;ADsC9c;AA9BS,SAAR,KAAsB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,KAAK;AACP,GAgBgB;AACd,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,WAAW,WAAW;AAAA,QACpB,CAAC,oBAAO,2BAA2B,GAAG,OAAO;AAAA,QAC7C,CAAC,oBAAO,0BAA0B,GAAG,OAAO;AAAA,MAC9C,CAAC;AAAA,MAED;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,YAAW;AAAA,UACX,gBAAe;AAAA,UACf,OAAM;AAAA,UACN,KAAK;AAAA,UACL,QAAQ;AAAA,UAEP;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ","sourcesContent":["import { type ReactNode } from \"react\";\nimport classnames from \"classnames\";\nimport styles from \"./Tabs.module.css\";\nimport Box from \"../Box/Box\";\n\n/**\n * [Tabs](https://cambly-syntax.vercel.app/?path=/docs/components-tabs--docs) are used to organize content into different sections.\n */\nexport default function Tabs({\n children,\n accessibilityLabel,\n on = \"lightBackground\",\n}: {\n /**\n * The Tabs to display. Each Tab should be a `TabButton` or a `TabLink`.\n * Only use `TabLink` for clicking tab that update the URL upon selection. Otherwise, use `TabButton`.\n */\n children: ReactNode;\n /**\n * Accessibility label for the Tabs container.\n */\n accessibilityLabel: string;\n /**\n * Indicate whether the Tabs render on a light or dark background.\n *\n * @defaulValue `lightBackground`\n */\n on?: \"lightBackground\" | \"darkBackground\";\n}): JSX.Element {\n return (\n <div\n role=\"tablist\"\n aria-label={accessibilityLabel}\n className={classnames({\n [styles.tabContainerlightBackground]: on === \"lightBackground\",\n [styles.tabContainerDarkBackground]: on === \"darkBackground\",\n })}\n >\n <Box\n display=\"flex\"\n alignItems=\"center\"\n justifyContent=\"start\"\n width=\"100%\"\n gap={8}\n height={56}\n >\n {children}\n </Box>\n </div>\n );\n}\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Tabs/Tabs.module.css\"; export default {\"tabContainerlightBackground\":\"_tabContainerlightBackground_b6c60_1\",\"tabContainerDarkBackground\":\"_tabContainerDarkBackground_b6c60_5\",\"tab\":\"_tab_b6c60_1\",\"selectedTabOnLightBackground\":\"_selectedTabOnLightBackground_b6c60_13\",\"selectedTabOnDarkBackground\":\"_selectedTabOnDarkBackground_b6c60_17\",\"unselectedTab\":\"_unselectedTab_b6c60_21\",\"link\":\"_link_b6c60_25\"}"]}
@@ -1,64 +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 _B3JRSVBDcjs = require('./B3JRSVBD.cjs');
5
-
6
- // src/Typography/Typography.tsx
7
- var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
8
- var _react = require('react');
9
-
10
- // css-module:./Typography.module.css#css-module
11
- var Typography_module_default = { "typography": "_typography_15w34_1", "sansSerif": "_sansSerif_15w34_22", "serif": "_serif_15w34_27", "size0": "_size0_15w34_73", "size100": "_size100_15w34_77", "size200": "_size200_15w34_81", "size300": "_size300_15w34_85", "size400": "_size400_15w34_89", "size500": "_size500_15w34_93", "size700": "_size700_15w34_97", "size800": "_size800_15w34_101", "size900": "_size900_15w34_105", "size1100": "_size1100_15w34_109", "center": "_center_15w34_137", "forceLeft": "_forceLeft_15w34_141", "forceRight": "_forceRight_15w34_145", "start": "_start_15w34_149", "end": "_end_15w34_153", "regular": "_regular_15w34_159", "medium": "_medium_15w34_163", "semiBold": "_semiBold_15w34_167", "bold": "_bold_15w34_171", "underline": "_underline_15w34_175", "inline": "_inline_15w34_179", "uppercase": "_uppercase_15w34_183", "lineClamp": "_lineClamp_15w34_187", "p100": "_p100_15w34_196", "p200": "_p200_15w34_200", "p300": "_p300_15w34_204", "p400": "_p400_15w34_208", "p500": "_p500_15w34_212" };
12
-
13
- // src/Typography/Typography.tsx
14
- var _jsxruntime = require('react/jsx-runtime');
15
- var Typography = _react.forwardRef.call(void 0, function Typography2({
16
- align = "start",
17
- as = "div",
18
- children,
19
- color = "gray900",
20
- "data-testid": dataTestId,
21
- fontStyle = "sans-serif",
22
- id,
23
- inline = false,
24
- lineClamp = void 0,
25
- size = 200,
26
- tooltip,
27
- transform = "none",
28
- underline = false,
29
- weight = "regular"
30
- }, ref) {
31
- const Tag = as;
32
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
33
- Tag,
34
- {
35
- id,
36
- className: _classnames2.default.call(void 0,
37
- Typography_module_default.typography,
38
- Typography_module_default[align],
39
- Typography_module_default[weight],
40
- fontStyle === "serif" ? Typography_module_default.serif : Typography_module_default.sansSerif,
41
- _B3JRSVBDcjs.textColor.call(void 0, color),
42
- inline && Typography_module_default.inline,
43
- Typography_module_default[`size${size}`],
44
- transform === "uppercase" && Typography_module_default.uppercase,
45
- underline && Typography_module_default.underline,
46
- lineClamp != null && Typography_module_default.lineClamp,
47
- as === "p" && Typography_module_default[`p${size}`]
48
- ),
49
- "data-testid": dataTestId,
50
- style: {
51
- WebkitLineClamp: lineClamp
52
- },
53
- title: tooltip,
54
- ref,
55
- children
56
- }
57
- );
58
- });
59
- var Typography_default = Typography;
60
-
61
-
62
-
63
- exports.Typography_default = Typography_default;
64
- //# sourceMappingURL=4TYOP5XM.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/Typography/Typography.tsx","css-module:./Typography.module.css#css-module"],"names":["Typography"],"mappings":";;;;;;AAAA,OAAO,gBAAgB;AACvB,SAAS,kBAAqD;;;ACDsC,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,aAAY,uBAAsB,SAAQ,mBAAkB,SAAQ,mBAAkB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,sBAAqB,WAAU,sBAAqB,YAAW,uBAAsB,UAAS,qBAAoB,aAAY,wBAAuB,cAAa,yBAAwB,SAAQ,oBAAmB,OAAM,kBAAiB,WAAU,sBAAqB,UAAS,qBAAoB,YAAW,uBAAsB,QAAO,mBAAkB,aAAY,wBAAuB,UAAS,qBAAoB,aAAY,wBAAuB,aAAY,wBAAuB,QAAO,mBAAkB,QAAO,mBAAkB,QAAO,mBAAkB,QAAO,mBAAkB,QAAO,kBAAiB;;;ADwJ3gC;AAhJJ,IAAM,aAAa,WA0HjB,SAASA,YACT;AAAA,EACE,QAAQ;AAAA,EACR,KAAK;AAAA,EACL;AAAA,EACA,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,YAAY;AAAA,EACZ;AAAA,EACA,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,OAAO;AAAA,EACP;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,SAAS;AACX,GACA,KACc;AACd,QAAM,MAAM;AAEZ,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,0BAAO;AAAA,QACP,0BAAO,KAAK;AAAA,QACZ,0BAAO,MAAM;AAAA,QACb,cAAc,UAAU,0BAAO,QAAQ,0BAAO;AAAA,QAC9C,UAAU,KAAK;AAAA,QACf,UAAU,0BAAO;AAAA,QACjB,0BAAO,OAAO,MAAM;AAAA,QACpB,cAAc,eAAe,0BAAO;AAAA,QACpC,aAAa,0BAAO;AAAA,QACpB,aAAa,QAAQ,0BAAO;AAAA,QAC5B,OAAO,OAAO,0BAAO,IAAI,MAAM;AAAA,MACjC;AAAA,MACA,eAAa;AAAA,MACb,OAAO;AAAA,QACL,iBAAiB;AAAA,MACnB;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,IAAO,qBAAQ","sourcesContent":["import classNames from \"classnames\";\nimport { forwardRef, type ReactElement, type ReactNode } from \"react\";\nimport styles from \"./Typography.module.css\";\nimport textColor from \"../colors/textColors\";\n\n/**\n * [Typography](https://cambly-syntax.vercel.app/?path=/docs/components-typography--docs) is a component that renders text.\n */\nconst Typography = forwardRef<\n HTMLDivElement,\n {\n /**\n * Aligns the text to the left, right, or center of the container.\n * * `start` and `end` will align the text to the left or right of the container depending on the locale.\n * * `forceLeft` and `forceRight` will align the text to the left or right of the container regardless of the locale (should be used sparingly).\n *\n * @defaultValue \"start\"\n */\n align?: \"start\" | \"end\" | \"forceLeft\" | \"center\" | \"forceRight\";\n /**\n * DOM element to render as.\n *\n * @defaultValue \"div\"\n */\n as?: \"div\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"p\";\n /**\n * The text to be rendered\n */\n children?: ReactNode;\n /**\n * The color of the text.\n *\n * @defaultValue \"gray900\"\n */\n color?:\n | \"gray900\"\n | \"gray700\"\n | \"primary\"\n | \"destructive-primary\"\n | \"destructive-darkBackground\"\n | \"destructive-lightBackground\"\n | \"success\"\n | \"success-darkBackground\"\n | \"white\"\n | \"white-secondary\"\n | \"inherit\";\n /**\n * Test id for the text\n */\n \"data-testid\"?: string;\n /**\n * Style of the font\n *\n * Classic only supports `sans-serif`\n *\n * @defaultValue \"sans-serif\"\n */\n fontStyle?: \"serif\" | \"sans-serif\";\n /**\n * The id for the element\n */\n id?: string;\n /**\n * Whether the text should flow inline with other elements.\n *\n * @defaultValue false\n */\n inline?: boolean;\n /**\n * The number of lines we should truncate the text at\n */\n lineClamp?: number | undefined;\n /**\n * Size of the text.\n *\n * Mobile (viewport width <= 480px)::\n * * `0`: 12px\n * * `100`: 13px\n * * `200`: 16px\n * * `300`: 19px\n * * `400`: 25px\n * * `500`: 32px\n * * `700`: 38px\n * * `800`: 46px\n * * `900`: 55px\n * * `1100`: 83px\n *\n * Desktop (viewport width > 480px):\n * * `0`: 12px\n * * `100`: 13px\n * * `200`: 16px\n * * `300`: 20px\n * * `400`: 25px\n * * `500`: 32px\n * * `700`: 49px\n * * `800`: 63px\n * * `900`: 76px\n * * `1100`: 119px\n *\n * @defaultValue 200\n */\n size?: 0 | 100 | 200 | 300 | 400 | 500 | 700 | 800 | 900 | 1100;\n /**\n * The tooltip to be displayed when the user hovers the text\n */\n tooltip?: string;\n /**\n * Whether the text should be transformed to uppercase.\n *\n * @defaultValue \"none\"\n */\n transform?: \"none\" | \"uppercase\";\n /**\n * Whether the text has an underline.\n *\n * @defaultValue false\n */\n underline?: boolean;\n /**\n * Indicates the boldness of the text.\n *\n * * `regular`: 400\n * * `medium`: 510\n * * `semiBold`: 590\n * * `bold`: 710\n *\n * @defaultValue \"regular\"\n */\n weight?: \"regular\" | \"medium\" | \"semiBold\" | \"bold\";\n }\n>(function Typography(\n {\n align = \"start\",\n as = \"div\",\n children,\n color = \"gray900\",\n \"data-testid\": dataTestId,\n fontStyle = \"sans-serif\",\n id,\n inline = false,\n lineClamp = undefined,\n size = 200,\n tooltip,\n transform = \"none\",\n underline = false,\n weight = \"regular\",\n },\n ref,\n): ReactElement {\n const Tag = as;\n\n return (\n <Tag\n id={id}\n className={classNames(\n styles.typography,\n styles[align],\n styles[weight],\n fontStyle === \"serif\" ? styles.serif : styles.sansSerif,\n textColor(color),\n inline && styles.inline,\n styles[`size${size}`],\n transform === \"uppercase\" && styles.uppercase,\n underline && styles.underline,\n lineClamp != null && styles.lineClamp,\n as === \"p\" && styles[`p${size}`],\n )}\n data-testid={dataTestId}\n style={{\n WebkitLineClamp: lineClamp,\n }}\n title={tooltip}\n ref={ref}\n >\n {children}\n </Tag>\n );\n});\n\nexport default Typography;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Typography/Typography.module.css\"; export default {\"typography\":\"_typography_15w34_1\",\"sansSerif\":\"_sansSerif_15w34_22\",\"serif\":\"_serif_15w34_27\",\"size0\":\"_size0_15w34_73\",\"size100\":\"_size100_15w34_77\",\"size200\":\"_size200_15w34_81\",\"size300\":\"_size300_15w34_85\",\"size400\":\"_size400_15w34_89\",\"size500\":\"_size500_15w34_93\",\"size700\":\"_size700_15w34_97\",\"size800\":\"_size800_15w34_101\",\"size900\":\"_size900_15w34_105\",\"size1100\":\"_size1100_15w34_109\",\"center\":\"_center_15w34_137\",\"forceLeft\":\"_forceLeft_15w34_141\",\"forceRight\":\"_forceRight_15w34_145\",\"start\":\"_start_15w34_149\",\"end\":\"_end_15w34_153\",\"regular\":\"_regular_15w34_159\",\"medium\":\"_medium_15w34_163\",\"semiBold\":\"_semiBold_15w34_167\",\"bold\":\"_bold_15w34_171\",\"underline\":\"_underline_15w34_175\",\"inline\":\"_inline_15w34_179\",\"uppercase\":\"_uppercase_15w34_183\",\"lineClamp\":\"_lineClamp_15w34_187\",\"p100\":\"_p100_15w34_196\",\"p200\":\"_p200_15w34_200\",\"p300\":\"_p300_15w34_204\",\"p400\":\"_p400_15w34_208\",\"p500\":\"_p500_15w34_212\"}"]}
@@ -1,141 +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 _TH4TA3JNcjs = require('./TH4TA3JN.cjs');
5
-
6
-
7
- var _5JUNB754cjs = require('./5JUNB754.cjs');
8
-
9
-
10
- var _3P2PWHOUcjs = require('./3P2PWHOU.cjs');
11
-
12
-
13
-
14
- var _UEY7FXLXcjs = require('./UEY7FXLX.cjs');
15
-
16
-
17
- var _RXQBNEFRcjs = require('./RXQBNEFR.cjs');
18
-
19
-
20
- var _2D3DOVVZcjs = require('./2D3DOVVZ.cjs');
21
-
22
-
23
- var _F3SUJGZLcjs = require('./F3SUJGZL.cjs');
24
-
25
-
26
- var _4TYOP5XMcjs = require('./4TYOP5XM.cjs');
27
-
28
- // src/LinkButton/LinkButton.tsx
29
-
30
-
31
- var _react = require('react');
32
- var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
33
-
34
- // css-module:./LinkButton.module.css#css-module
35
- var LinkButton_module_default = { "linkButton": "_linkButton_1qjrb_1", "fitContent": "_fitContent_1qjrb_11" };
36
-
37
- // src/LinkButton/LinkButton.tsx
38
- var _jsxruntime = require('react/jsx-runtime');
39
- var LinkButton = _react.forwardRef.call(void 0,
40
- ({
41
- text,
42
- href,
43
- target,
44
- rel,
45
- "data-testid": dataTestId,
46
- color = "primary",
47
- size = "md",
48
- loading = false,
49
- fullWidth = false,
50
- startIcon: StartIcon,
51
- endIcon: EndIcon,
52
- on = "lightBackground",
53
- onClick
54
- }, ref) => {
55
- const foregroundColorClass = _RXQBNEFRcjs.foregroundColor.call(void 0, color, on);
56
- const backgroundColorClass = _F3SUJGZLcjs.backgroundColor.call(void 0, color, on);
57
- return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
58
- "a",
59
- {
60
- href,
61
- "data-testid": dataTestId,
62
- target,
63
- ref,
64
- rel,
65
- className: _classnames2.default.call(void 0,
66
- LinkButton_module_default.linkButton,
67
- _TH4TA3JNcjs.Button_module_default.button,
68
- foregroundColorClass,
69
- backgroundColorClass,
70
- _2D3DOVVZcjs.border.call(void 0, color, on),
71
- _TH4TA3JNcjs.Button_module_default[size],
72
- {
73
- [_TH4TA3JNcjs.Button_module_default.fullWidth]: fullWidth,
74
- [LinkButton_module_default.fitContent]: !fullWidth,
75
- [_TH4TA3JNcjs.Button_module_default.buttonGap]: size === "lg" || size === "md",
76
- [_TH4TA3JNcjs.Button_module_default.disabled]: loading
77
- }
78
- ),
79
- onClick,
80
- children: [
81
- !loading && StartIcon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
82
- StartIcon,
83
- {
84
- className: _classnames2.default.call(void 0,
85
- _TH4TA3JNcjs.Button_module_default.icon,
86
- _UEY7FXLXcjs.materialIconSize[size],
87
- foregroundColorClass
88
- ),
89
- size: _UEY7FXLXcjs.internalIconSize[size]
90
- }
91
- ),
92
- !loading && text && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _4TYOP5XMcjs.Typography_default, { size: _5JUNB754cjs.textVariant_default[size], weight: "medium", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
93
- "span",
94
- {
95
- className: foregroundColorClass,
96
- children: text
97
- }
98
- ) }),
99
- !loading && EndIcon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
100
- EndIcon,
101
- {
102
- className: _classnames2.default.call(void 0,
103
- _TH4TA3JNcjs.Button_module_default.icon,
104
- _UEY7FXLXcjs.materialIconSize[size],
105
- foregroundColorClass
106
- ),
107
- size: _UEY7FXLXcjs.internalIconSize[size]
108
- }
109
- ),
110
- loading && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
111
- "svg",
112
- {
113
- className: _classnames2.default.call(void 0, _TH4TA3JNcjs.Button_module_default.loading, foregroundColorClass),
114
- viewBox: "22 22 44 44",
115
- width: _3P2PWHOUcjs.loadingIconSize_default[size],
116
- height: _3P2PWHOUcjs.loadingIconSize_default[size],
117
- children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
118
- "circle",
119
- {
120
- className: _TH4TA3JNcjs.Button_module_default.loadingCircle,
121
- cx: "44",
122
- cy: "44",
123
- r: "20.2",
124
- fill: "none",
125
- strokeWidth: "3.6"
126
- }
127
- )
128
- }
129
- )
130
- ]
131
- }
132
- );
133
- }
134
- );
135
- LinkButton.displayName = "LinkButton";
136
- var LinkButton_default = LinkButton;
137
-
138
-
139
-
140
- exports.LinkButton_default = LinkButton_default;
141
- //# sourceMappingURL=4UT6BROB.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/LinkButton/LinkButton.tsx","css-module:./LinkButton.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA,EACE;AAAA,OAGK;AACP,OAAO,gBAAgB;;;ACL6E,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,cAAa,uBAAsB;;;ADqIpL,SAuBI,KAvBJ;AAvBN,IAAM,aAAa;AAAA,EACjB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,SAAS;AAAA,IACT,KAAK;AAAA,IACL;AAAA,EACF,GACA,QACG;AACH,UAAM,uBAAuB,gBAAgB,OAAO,EAAE;AACtD,UAAM,uBAAuB,gBAAgB,OAAO,EAAE;AAEtD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,UACT,0BAAO;AAAA,UACP,sBAAa;AAAA,UACb;AAAA,UACA;AAAA,UACA,OAAO,OAAO,EAAE;AAAA,UAChB,sBAAa,IAAI;AAAA,UACjB;AAAA,YACE,CAAC,sBAAa,SAAS,GAAG;AAAA,YAC1B,CAAC,0BAAO,UAAU,GAAG,CAAC;AAAA,YACtB,CAAC,sBAAa,SAAS,GAAG,SAAS,QAAQ,SAAS;AAAA,YACpD,CAAC,sBAAa,QAAQ,GAAG;AAAA,UAC3B;AAAA,QACF;AAAA,QACA;AAAA,QAEC;AAAA,WAAC,WAAW,aACX;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT,sBAAa;AAAA,gBACb,iBAAiB,IAAI;AAAA,gBACrB;AAAA,cACF;AAAA,cACA,MAAM,iBAAiB,IAAI;AAAA;AAAA,UAC7B;AAAA,UAED,CAAC,WAAW,QACX,oBAAC,sBAAW,MAAM,oBAAY,IAAI,GAAG,QAAO,UAC1C;AAAA,YAAC;AAAA;AAAA,cAEC,WAAW;AAAA,cAEV;AAAA;AAAA,UACH,GACF;AAAA,UAED,CAAC,WAAW,WACX;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT,sBAAa;AAAA,gBACb,iBAAiB,IAAI;AAAA,gBACrB;AAAA,cACF;AAAA,cACA,MAAM,iBAAiB,IAAI;AAAA;AAAA,UAC7B;AAAA,UAED,WACC;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,WAAW,sBAAa,SAAS,oBAAoB;AAAA,cAChE,SAAQ;AAAA,cACR,OAAO,wBAAgB,IAAI;AAAA,cAC3B,QAAQ,wBAAgB,IAAI;AAAA,cAE5B;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAW,sBAAa;AAAA,kBACxB,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,WAAW,cAAc;AAEzB,IAAO,qBAAQ","sourcesContent":["import {\n forwardRef,\n type HtmlHTMLAttributes,\n type ComponentProps,\n} from \"react\";\nimport classNames from \"classnames\";\nimport React from \"react\";\nimport { type Size } from \"../constants\";\nimport Typography from \"../Typography/Typography\";\nimport buttonStyles from \"../Button/Button.module.css\";\nimport {\n materialIconSize,\n internalIconSize,\n} from \"../Button/constants/iconSize\";\nimport textVariant from \"../Button/constants/textVariant\";\nimport loadingIconSize from \"../Button/constants/loadingIconSize\";\nimport styles from \"./LinkButton.module.css\";\nimport { backgroundColor } from \"../colors//backgroundColor\";\nimport { foregroundColor } from \"../colors/foregroundColor\";\nimport { border } from \"../colors/border\";\nimport type InternalIcon from \"../Icon/Icon\";\n\ntype LinkButtonProps = {\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 link that the LinkButton should route to.\n *\n */\n href?: string;\n /**\n * The target attribute specifies where to open the linked document.\n *\n */\n target?: \"_blank\" | \"_self\" | \"_parent\" | \"_top\";\n /**\n * The rel attribute specifies the relationship between the document and the link.\n *\n */\n rel?: HtmlHTMLAttributes<HTMLAnchorElement>[\"rel\"];\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 * * `sm`: 32px\n * * `md`: 48px\n * * `lg`: 64px\n *\n * @defaultValue \"md\"\n */\n size?: (typeof Size)[number];\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 * An optional onClick event. This is used for certain wrapper's support (such as react-router-dom).\n */\n onClick?: React.MouseEventHandler<HTMLAnchorElement>;\n};\n\n/**\n * [LinkButton](https://cambly-syntax.vercel.app/?path=/docs/components-linkbutton--docs) is a \"variation\" of Button that should look identical to Button, but should be used to render links instead.\n */\nconst LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(\n (\n {\n text,\n href,\n target,\n rel,\n \"data-testid\": dataTestId,\n color = \"primary\",\n size = \"md\",\n loading = false,\n fullWidth = false,\n startIcon: StartIcon,\n endIcon: EndIcon,\n on = \"lightBackground\",\n onClick,\n }: LinkButtonProps,\n ref,\n ) => {\n const foregroundColorClass = foregroundColor(color, on);\n const backgroundColorClass = backgroundColor(color, on);\n\n return (\n <a\n href={href}\n data-testid={dataTestId}\n target={target}\n ref={ref}\n rel={rel}\n className={classNames(\n styles.linkButton,\n buttonStyles.button,\n foregroundColorClass,\n backgroundColorClass,\n border(color, on),\n buttonStyles[size],\n {\n [buttonStyles.fullWidth]: fullWidth,\n [styles.fitContent]: !fullWidth,\n [buttonStyles.buttonGap]: size === \"lg\" || size === \"md\",\n [buttonStyles.disabled]: loading,\n },\n )}\n onClick={onClick}\n >\n {!loading && StartIcon && (\n <StartIcon\n className={classNames(\n buttonStyles.icon,\n materialIconSize[size],\n foregroundColorClass,\n )}\n size={internalIconSize[size]}\n />\n )}\n {!loading && text && (\n <Typography size={textVariant[size]} weight=\"medium\">\n <span\n // Temporary - until we have cambio colors on Typogrphay\n className={foregroundColorClass}\n >\n {text}\n </span>\n </Typography>\n )}\n {!loading && EndIcon && (\n <EndIcon\n className={classNames(\n buttonStyles.icon,\n materialIconSize[size],\n foregroundColorClass,\n )}\n size={internalIconSize[size]}\n />\n )}\n {loading && (\n <svg\n className={classNames(buttonStyles.loading, foregroundColorClass)}\n viewBox=\"22 22 44 44\"\n width={loadingIconSize[size]}\n height={loadingIconSize[size]}\n >\n <circle\n className={buttonStyles.loadingCircle}\n cx=\"44\"\n cy=\"44\"\n r=\"20.2\"\n fill=\"none\"\n strokeWidth=\"3.6\"\n />\n </svg>\n )}\n </a>\n );\n },\n);\n\nLinkButton.displayName = \"LinkButton\";\n\nexport default LinkButton;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/LinkButton/LinkButton.module.css\"; export default {\"linkButton\":\"_linkButton_1qjrb_1\",\"fitContent\":\"_fitContent_1qjrb_11\"}"]}
@@ -1,109 +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 _4TYOP5XMcjs = require('./4TYOP5XM.cjs');
8
-
9
- // src/WordConfetti/WordConfetti.tsx
10
- var _react = require('react');
11
- var _jsxruntime = require('react/jsx-runtime');
12
- var themeBackgroundColors = {
13
- neutral: ["pink", "lilac", "thistle"],
14
- cool: ["sky", "slate", "teal"],
15
- warm: ["red", "tan", "orange"]
16
- };
17
- var degreeOfTiltOptions = [-6, -3, 0, 3, 6];
18
- var paddings = {
19
- 300: "16px 20px 16px 20px",
20
- 400: "20px 24px 20px 24px",
21
- 700: "24px 28px 24px 28px",
22
- 800: "28px 40px 28px 40px",
23
- 900: "32px 48px 32px 48px",
24
- 1100: "36px 56px 36px 56px"
25
- };
26
- var gaps = {
27
- 300: 3,
28
- 400: 4,
29
- 700: 6,
30
- 800: 6,
31
- 900: 9,
32
- 1100: 10
33
- };
34
- var hashWord = (string) => {
35
- let hash = 0;
36
- if (string.length === 0)
37
- return hash;
38
- for (let i = 0; i < string.length; i++) {
39
- const char = string.charCodeAt(i);
40
- hash = (hash << 5) - hash + char;
41
- hash |= 0;
42
- }
43
- return Math.abs(hash);
44
- };
45
- var WordConfetto = ({
46
- "data-testid": dataTestId,
47
- size,
48
- text,
49
- theme
50
- }) => {
51
- const hash = hashWord(text);
52
- const backgroundColor = themeBackgroundColors[theme][hash % Object.values(themeBackgroundColors[theme]).length];
53
- const rotation = degreeOfTiltOptions[hash % degreeOfTiltOptions.length];
54
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
55
- _QODNNCT2cjs.Box_default,
56
- {
57
- "data-testid": dataTestId,
58
- backgroundColor,
59
- dangerouslySetInlineStyle: {
60
- __style: {
61
- padding: paddings[size],
62
- transform: `rotate(${rotation}deg)`
63
- }
64
- },
65
- width: "fit-content",
66
- children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _4TYOP5XMcjs.Typography_default, { size, weight: "bold", fontStyle: "serif", children: text })
67
- }
68
- );
69
- };
70
- var WordConfetti = _react.forwardRef.call(void 0,
71
- function WordConfetti2(props, ref) {
72
- const {
73
- "data-testid": dataTestId,
74
- direction = "row",
75
- size,
76
- theme,
77
- words
78
- } = props;
79
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
80
- _QODNNCT2cjs.Box_default,
81
- {
82
- display: "flex",
83
- direction,
84
- flexWrap: "wrap",
85
- "data-testid": dataTestId,
86
- ref,
87
- gap: gaps[size],
88
- children: words.map((word, index) => {
89
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
90
- WordConfetto,
91
- {
92
- "data-testid": dataTestId ? `${dataTestId}-${index}` : void 0,
93
- size,
94
- text: word,
95
- theme
96
- },
97
- `${word}${index}`
98
- );
99
- })
100
- }
101
- );
102
- }
103
- );
104
- var WordConfetti_default = WordConfetti;
105
-
106
-
107
-
108
- exports.WordConfetti_default = WordConfetti_default;
109
- //# sourceMappingURL=5ITNEIMC.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/WordConfetti/WordConfetti.tsx"],"names":["WordConfetti"],"mappings":";;;;;;;;;AAAA,SAAyB,kBAAqC;AAuExD;AAnEN,IAAM,wBAAwB;AAAA,EAC5B,SAAS,CAAC,QAAQ,SAAS,SAAS;AAAA,EACpC,MAAM,CAAC,OAAO,SAAS,MAAM;AAAA,EAC7B,MAAM,CAAC,OAAO,OAAO,QAAQ;AAC/B;AAEA,IAAM,sBAAsB,CAAC,IAAI,IAAI,GAAG,GAAG,CAAC;AAE5C,IAAM,WAAW;AAAA,EACf,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,MAAM;AACR;AAEA,IAAM,OAAO;AAAA,EACX,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,MAAM;AACR;AAEA,IAAM,WAAW,CAAC,WAA2B;AAC3C,MAAI,OAAO;AACX,MAAI,OAAO,WAAW;AAAG,WAAO;AAChC,WAAS,IAAI,GAAG,IAAI,OAAO,QAAQ,KAAK;AACtC,UAAM,OAAO,OAAO,WAAW,CAAC;AAChC,YAAQ,QAAQ,KAAK,OAAO;AAC5B,YAAQ;AAAA,EACV;AACA,SAAO,KAAK,IAAI,IAAI;AACtB;AAEA,IAAM,eAAe,CAAC;AAAA,EACpB,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AACF,MAKoB;AAClB,QAAM,OAAO,SAAS,IAAI;AAC1B,QAAM,kBACJ,sBAAsB,KAAK,EACzB,OAAO,OAAO,OAAO,sBAAsB,KAAK,CAAC,EAAE,MACrD;AACF,QAAM,WAAW,oBAAoB,OAAO,oBAAoB,MAAM;AAEtE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa;AAAA,MACb;AAAA,MACA,2BAA2B;AAAA,QACzB,SAAS;AAAA,UACP,SAAS,SAAS,IAAI;AAAA,UACtB,WAAW,UAAU;AAAA,QACvB;AAAA,MACF;AAAA,MACA,OAAM;AAAA,MAEN,8BAAC,sBAAW,MAAY,QAAO,QAAO,WAAU,SAC7C,gBACH;AAAA;AAAA,EACF;AAEJ;AA8BA,IAAM,eAAe;AAAA,EACnB,SAASA,cAAa,OAA0B,KAAkB;AAChE,UAAM;AAAA,MACJ,eAAe;AAAA,MACf,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI;AAEJ,WACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR;AAAA,QACA,UAAS;AAAA,QACT,eAAa;AAAA,QACb;AAAA,QACA,KAAK,KAAK,IAAI;AAAA,QAEb,gBAAM,IAAI,CAAC,MAAM,UAAqB;AACrC,iBACE;AAAA,YAAC;AAAA;AAAA,cACC,eAAa,aAAa,GAAG,cAAc,UAAU;AAAA,cAErD;AAAA,cACA,MAAM;AAAA,cACN;AAAA;AAAA,YAHK,GAAG,OAAO;AAAA,UAIjB;AAAA,QAEJ,CAAC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,IAAO,uBAAQ","sourcesContent":["import { type ReactNode, forwardRef, type ReactElement } from \"react\";\nimport Box from \"../Box/Box\";\nimport Typography from \"../Typography/Typography\";\n\nconst themeBackgroundColors = {\n neutral: [\"pink\", \"lilac\", \"thistle\"],\n cool: [\"sky\", \"slate\", \"teal\"],\n warm: [\"red\", \"tan\", \"orange\"],\n} as const;\n\nconst degreeOfTiltOptions = [-6, -3, 0, 3, 6] as const;\n\nconst paddings = {\n 300: \"16px 20px 16px 20px\",\n 400: \"20px 24px 20px 24px\",\n 700: \"24px 28px 24px 28px\",\n 800: \"28px 40px 28px 40px\",\n 900: \"32px 48px 32px 48px\",\n 1100: \"36px 56px 36px 56px\",\n};\n\nconst gaps = {\n 300: 3,\n 400: 4,\n 700: 6,\n 800: 6,\n 900: 9,\n 1100: 10,\n} as const;\n\nconst hashWord = (string: string): number => {\n let hash = 0;\n if (string.length === 0) return hash;\n for (let i = 0; i < string.length; i++) {\n const char = string.charCodeAt(i);\n hash = (hash << 5) - hash + char;\n hash |= 0; // Convert to 32bit integer\n }\n return Math.abs(hash);\n};\n\nconst WordConfetto = ({\n \"data-testid\": dataTestId,\n size,\n text,\n theme,\n}: {\n \"data-testid\"?: string;\n size: 300 | 400 | 700 | 800 | 900 | 1100;\n text: string;\n theme: \"neutral\" | \"cool\" | \"warm\";\n}): ReactElement => {\n const hash = hashWord(text);\n const backgroundColor =\n themeBackgroundColors[theme][\n hash % Object.values(themeBackgroundColors[theme]).length\n ];\n const rotation = degreeOfTiltOptions[hash % degreeOfTiltOptions.length];\n\n return (\n <Box\n data-testid={dataTestId}\n backgroundColor={backgroundColor}\n dangerouslySetInlineStyle={{\n __style: {\n padding: paddings[size],\n transform: `rotate(${rotation}deg)`,\n },\n }}\n width=\"fit-content\"\n >\n <Typography size={size} weight=\"bold\" fontStyle=\"serif\">\n {text}\n </Typography>\n </Box>\n );\n};\n\ntype Direction = \"row\" | \"column\";\ntype WordConfettiProps = {\n /**\n * Test id for the confetti\n */\n \"data-testid\"?: string;\n /**\n * The direction to display the words.\n * @defaultValue row\n */\n direction?: Direction;\n /**\n * The size of the font in the confetti.\n */\n size: 300 | 400 | 700 | 800 | 900 | 1100;\n /**\n * The theme for the background colors of the confetti.\n */\n theme: \"neutral\" | \"cool\" | \"warm\";\n /**\n * The words to display as confetti.\n */\n words: string[];\n};\n\n/**\n * [WordConfetti](https://cambly-syntax.vercel.app/?path=/docs/components-wordconfetti--docs) is a container for displaying words in different color themes and fun offset angles.\n */\nconst WordConfetti = forwardRef<HTMLDivElement, WordConfettiProps>(\n function WordConfetti(props: WordConfettiProps, ref): JSX.Element {\n const {\n \"data-testid\": dataTestId,\n direction = \"row\",\n size,\n theme,\n words,\n } = props;\n\n return (\n <Box\n display=\"flex\"\n direction={direction}\n flexWrap=\"wrap\"\n data-testid={dataTestId}\n ref={ref}\n gap={gaps[size]}\n >\n {words.map((word, index): ReactNode => {\n return (\n <WordConfetto\n data-testid={dataTestId ? `${dataTestId}-${index}` : undefined}\n key={`${word}${index}`}\n size={size}\n text={word}\n theme={theme}\n />\n );\n })}\n </Box>\n );\n },\n);\n\nexport default WordConfetti;\n"]}
@@ -1,15 +0,0 @@
1
- "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
2
-
3
- // src/Button/constants/textVariant.ts
4
- var textVariant = {
5
- sm: 100,
6
- md: 200,
7
- lg: 300,
8
- xl: 500
9
- };
10
- var textVariant_default = textVariant;
11
-
12
-
13
-
14
- exports.textVariant_default = textVariant_default;
15
- //# sourceMappingURL=5JUNB754.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/Button/constants/textVariant.ts"],"names":[],"mappings":";;;AAAA,IAAM,cAAc;AAAA,EAClB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAO,sBAAQ","sourcesContent":["const textVariant = {\n sm: 100,\n md: 200,\n lg: 300,\n xl: 500,\n} as const;\n\nexport default textVariant;\n"]}
@@ -1,38 +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
- // css-module:./ButtonGroup.module.css#css-module
4
- var ButtonGroup_module_default = { "buttonGroup": "_buttonGroup_6o6o0_1", "horizontal": "_horizontal_6o6o0_5", "vertical": "_vertical_6o6o0_9", "smallGap": "_smallGap_6o6o0_13", "mediumGap": "_mediumGap_6o6o0_17", "largeGap": "_largeGap_6o6o0_21", "orientationhorizontalSmall": "_orientationhorizontalSmall_6o6o0_27", "orientationverticalSmall": "_orientationverticalSmall_6o6o0_31", "orientationhorizontalLarge": "_orientationhorizontalLarge_6o6o0_38", "orientationverticalLarge": "_orientationverticalLarge_6o6o0_42" };
5
-
6
- // src/ButtonGroup/ButtonGroup.tsx
7
- var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
8
- var _jsxruntime = require('react/jsx-runtime');
9
- var gap = {
10
- sm: ButtonGroup_module_default.smallGap,
11
- md: ButtonGroup_module_default.mediumGap,
12
- lg: ButtonGroup_module_default.largeGap
13
- };
14
- var ButtonGroup = ({
15
- orientation = "horizontal",
16
- size = "md",
17
- children,
18
- smOrientation,
19
- lgOrientation
20
- }) => {
21
- const classnames = _classnames2.default.call(void 0,
22
- ButtonGroup_module_default.buttonGroup,
23
- gap[size],
24
- smOrientation != null && ButtonGroup_module_default[`orientation${smOrientation}Small`],
25
- lgOrientation != null && ButtonGroup_module_default[`orientation${lgOrientation}Large`],
26
- {
27
- [ButtonGroup_module_default.horizontal]: orientation === "horizontal",
28
- [ButtonGroup_module_default.vertical]: orientation === "vertical"
29
- }
30
- );
31
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: classnames, children });
32
- };
33
- var ButtonGroup_default = ButtonGroup;
34
-
35
-
36
-
37
- exports.ButtonGroup_default = ButtonGroup_default;
38
- //# sourceMappingURL=6KSVCCCB.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["css-module:./ButtonGroup.module.css#css-module","../../src/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":";;;AAAsG,IAAO,6BAAQ,EAAC,eAAc,wBAAuB,cAAa,uBAAsB,YAAW,qBAAoB,YAAW,sBAAqB,aAAY,uBAAsB,YAAW,sBAAqB,8BAA6B,wCAAuC,4BAA2B,sCAAqC,8BAA6B,wCAAuC,4BAA2B,qCAAoC;;;ACGtkB,OAAO,gBAAgB;AA8Dd;AA5DT,IAAM,MAAM;AAAA,EACV,IAAI,2BAAO;AAAA,EACX,IAAI,2BAAO;AAAA,EACX,IAAI,2BAAO;AACb;AAKA,IAAM,cAAc,CAAC;AAAA,EACnB,cAAc;AAAA,EACd,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AACF,MAiCoB;AAClB,QAAM,aAAa;AAAA,IACjB,2BAAO;AAAA,IACP,IAAI,IAAI;AAAA,IACR,iBAAiB,QAAQ,2BAAO,cAAc,oBAAoB;AAAA,IAClE,iBAAiB,QAAQ,2BAAO,cAAc,oBAAoB;AAAA,IAClE;AAAA,MACE,CAAC,2BAAO,UAAU,GAAG,gBAAgB;AAAA,MACrC,CAAC,2BAAO,QAAQ,GAAG,gBAAgB;AAAA,IACrC;AAAA,EACF;AAEA,SAAO,oBAAC,SAAI,WAAW,YAAa,UAAS;AAC/C;AAEA,IAAO,sBAAQ","sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/ButtonGroup/ButtonGroup.module.css\"; export default {\"buttonGroup\":\"_buttonGroup_6o6o0_1\",\"horizontal\":\"_horizontal_6o6o0_5\",\"vertical\":\"_vertical_6o6o0_9\",\"smallGap\":\"_smallGap_6o6o0_13\",\"mediumGap\":\"_mediumGap_6o6o0_17\",\"largeGap\":\"_largeGap_6o6o0_21\",\"orientationhorizontalSmall\":\"_orientationhorizontalSmall_6o6o0_27\",\"orientationverticalSmall\":\"_orientationverticalSmall_6o6o0_31\",\"orientationhorizontalLarge\":\"_orientationhorizontalLarge_6o6o0_38\",\"orientationverticalLarge\":\"_orientationverticalLarge_6o6o0_42\"}","import { type ReactElement, type ReactNode } from \"react\";\nimport styles from \"./ButtonGroup.module.css\";\nimport { type Size } from \"../constants\";\nimport classNames from \"classnames\";\n\nconst gap = {\n sm: styles.smallGap,\n md: styles.mediumGap,\n lg: styles.largeGap,\n} as const;\n\n/**\n * [ButtonGroup](https://cambly-syntax.vercel.app/?path=/docs/components-buttongroup--docs) groups buttons in a row or column with consistent spacing between each button.\n */\nconst ButtonGroup = ({\n orientation = \"horizontal\",\n size = \"md\",\n children,\n smOrientation,\n lgOrientation,\n}: {\n /**\n * The orientation of the button group\n *\n * @defaultValue \"horizontal\"\n *\n * Responsive props:\n * `smOrientation`\n * `lgOrientation`\n */\n orientation?: \"horizontal\" | \"vertical\";\n /**\n * The size of the button group defines the spacing between each button\n *\n * * `sm`: 4px\n * * `md`: 8px\n * * `lg`: 12px\n *\n * @defaultValue \"md\"\n */\n size?: (typeof Size)[number];\n /**\n * Buttons to be rendered inside the button group\n */\n children?: ReactNode;\n /**\n * Bottom margin on sm (480px) or larger viewports.\n */\n smOrientation?: typeof orientation;\n /**\n * Bottom margin on lg (960px) or larger viewports.\n */\n lgOrientation?: typeof orientation;\n}): ReactElement => {\n const classnames = classNames(\n styles.buttonGroup,\n gap[size],\n smOrientation != null && styles[`orientation${smOrientation}Small`],\n lgOrientation != null && styles[`orientation${lgOrientation}Large`],\n {\n [styles.horizontal]: orientation === \"horizontal\",\n [styles.vertical]: orientation === \"vertical\",\n },\n );\n\n return <div className={classnames}>{children}</div>;\n};\n\nexport default ButtonGroup;\n"]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/TapArea/TapArea.tsx","css-module:./TapArea.module.css#css-module"],"sourcesContent":["import React, {\n type ReactNode,\n forwardRef,\n useReducer,\n type AriaAttributes,\n} from \"react\";\nimport classNames from \"classnames\";\nimport styles from \"./TapArea.module.css\";\nimport roundingStyles from \"../rounding.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\n\ntype TapAreaProps = AriaAttributes & {\n /**\n * The children to be rendered inside the tap area.\n */\n children?: ReactNode;\n /**\n * The label to be used for accessibility\n */\n accessibilityLabel?: string;\n /**\n * Test id for the tap area\n */\n \"data-testid\"?: string;\n /**\n * If `true`, the tap area will be disabled\n *\n * @defaultValue false\n */\n disabled?: boolean;\n /**\n * If `true`, the tap area will be full width\n */\n fullWidth?: boolean;\n /**\n * The callback to be called when the tap area is clicked\n */\n onClick: (event: React.SyntheticEvent<HTMLDivElement>) => void;\n /**\n * The callback to be called when the tap area is hovered\n */\n onMouseEnter?: (event: React.SyntheticEvent<HTMLDivElement>) => void;\n /**\n * The callback to be called when the tap area is no longer hovered\n */\n onMouseLeave?: (event: React.SyntheticEvent<HTMLDivElement>) => void;\n /**\n * Border radius of the tap area.\n *\n * * `none`: 0px\n * * `sm`: 8px\n * * `md`: 12px\n * * `full`: 999px\n *\n * @defaultValue \"none\"\n */\n rounding?: \"md\" | \"sm\" | \"full\" | \"none\";\n /**\n * The tab index of the tap area\n */\n tabIndex?: 0 | -1;\n};\n\nfunction reducer(\n state: {\n hovered: boolean;\n focussed: boolean;\n },\n action: {\n type: \"BLUR\" | \"FOCUS\" | \"MOUSE_ENTER\" | \"MOUSE_LEAVE\";\n },\n) {\n switch (action.type) {\n case \"BLUR\":\n return { ...state, focussed: false };\n case \"FOCUS\":\n return { ...state, focussed: true };\n case \"MOUSE_ENTER\":\n return { ...state, hovered: true };\n case \"MOUSE_LEAVE\":\n return { ...state, hovered: false };\n default:\n return state;\n }\n}\n\n/**\n * [TapArea](https://cambly-syntax.vercel.app/?path=/docs/components-taparea--docs) allows components to be clickable and touchable in an accessible way.\n */\nconst TapArea = forwardRef<HTMLDivElement, TapAreaProps>(\n (\n {\n children,\n accessibilityLabel,\n \"data-testid\": dataTestId,\n disabled: disabledProp = false,\n fullWidth = true,\n onClick,\n onMouseEnter,\n onMouseLeave,\n rounding = \"none\",\n tabIndex = 0,\n ...accessibilityProps\n }: TapAreaProps,\n ref,\n ) => {\n const isHydrated = useIsHydrated();\n const disabled = !isHydrated || disabledProp;\n const [{ hovered, focussed }, dispatch] = useReducer(reducer, {\n hovered: false,\n focussed: false,\n });\n\n const handleClick: React.MouseEventHandler<HTMLDivElement> = (event) => {\n if (disabled) {\n undefined;\n } else {\n event.currentTarget.blur();\n onClick(event);\n }\n };\n\n const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (\n event,\n ) => {\n if (disabled) return;\n if (event.key === \"Enter\" || event.key === \" \" || event.key === \"Space\") {\n event.preventDefault();\n onClick(event);\n }\n };\n\n const handleOnMouseEnter: React.MouseEventHandler<HTMLDivElement> = (\n event,\n ) => {\n if (disabled) return;\n dispatch({ type: \"MOUSE_ENTER\" });\n onMouseEnter?.(event);\n };\n\n const handleOnMouseLeave: React.MouseEventHandler<HTMLDivElement> = (\n event,\n ) => {\n if (disabled) return;\n dispatch({ type: \"MOUSE_LEAVE\" });\n onMouseLeave?.(event);\n };\n\n const isHoveredOrFocussed = !disabled && (hovered || focussed);\n const roundingClasses =\n rounding !== \"none\" && roundingStyles[`rounding${rounding}`];\n\n return (\n <div\n {...accessibilityProps}\n aria-disabled={disabled || accessibilityProps[\"aria-disabled\"]}\n aria-label={accessibilityLabel ?? accessibilityProps[\"aria-label\"]}\n className={classNames(\n styles.tapArea,\n styles[`${disabled ? \"disabled\" : \"enabled\"}`],\n fullWidth && styles.fullWidth,\n isHoveredOrFocussed && styles.hoveredOrFocussed,\n roundingClasses,\n )}\n data-testid={dataTestId}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n onMouseEnter={handleOnMouseEnter}\n onMouseLeave={handleOnMouseLeave}\n onFocus={() => dispatch({ type: \"FOCUS\" })}\n onBlur={() => dispatch({ type: \"BLUR\" })}\n ref={ref}\n role=\"button\"\n tabIndex={disabled ? undefined : tabIndex}\n >\n {!disabled && (hovered || focussed) && (\n <div className={classNames(styles.overlay, roundingClasses)} />\n )}\n {children}\n </div>\n );\n },\n);\n\nTapArea.displayName = \"TapArea\";\n\nexport default TapArea;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/TapArea/TapArea.module.css\"; export default {\"tapArea\":\"_tapArea_g6gkz_1\",\"fullWidth\":\"_fullWidth_g6gkz_5\",\"disabled\":\"_disabled_g6gkz_9\",\"enabled\":\"_enabled_g6gkz_16\",\"overlay\":\"_overlay_g6gkz_29\",\"hoveredOrFocussed\":\"_hoveredOrFocussed_g6gkz_39\"}"],"mappings":";;;;;;;;;;;;;;AAAA;AAAA,EAEE;AAAA,EACA;AAAA,OAEK;AACP,OAAO,gBAAgB;;;ACNuE,IAAO,yBAAQ,EAAC,WAAU,oBAAmB,aAAY,sBAAqB,YAAW,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,qBAAoB,8BAA6B;;;ADyJlT,SAuBI,KAvBJ;AA1FN,SAAS,QACP,OAIA,QAGA;AACA,UAAQ,OAAO,MAAM;AAAA,IACnB,KAAK;AACH,aAAO,iCAAK,QAAL,EAAY,UAAU,MAAM;AAAA,IACrC,KAAK;AACH,aAAO,iCAAK,QAAL,EAAY,UAAU,KAAK;AAAA,IACpC,KAAK;AACH,aAAO,iCAAK,QAAL,EAAY,SAAS,KAAK;AAAA,IACnC,KAAK;AACH,aAAO,iCAAK,QAAL,EAAY,SAAS,MAAM;AAAA,IACpC;AACE,aAAO;AAAA,EACX;AACF;AAKA,IAAM,UAAU;AAAA,EACd,CACE,IAaA,QACG;AAdH,iBACE;AAAA;AAAA,MACA;AAAA,MACA,eAAe;AAAA,MACf,UAAU,eAAe;AAAA,MACzB,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,WAAW;AAAA,IArGjB,IA2FI,IAWK,+BAXL,IAWK;AAAA,MAVH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,aAAa,cAAc;AACjC,UAAM,WAAW,CAAC,cAAc;AAChC,UAAM,CAAC,EAAE,SAAS,SAAS,GAAG,QAAQ,IAAI,WAAW,SAAS;AAAA,MAC5D,SAAS;AAAA,MACT,UAAU;AAAA,IACZ,CAAC;AAED,UAAM,cAAuD,CAAC,UAAU;AACtE,UAAI,UAAU;AAAA,MAEd,OAAO;AACL,cAAM,cAAc,KAAK;AACzB,gBAAQ,KAAK;AAAA,MACf;AAAA,IACF;AAEA,UAAM,gBAA4D,CAChE,UACG;AACH,UAAI;AAAU;AACd,UAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,OAAO,MAAM,QAAQ,SAAS;AACvE,cAAM,eAAe;AACrB,gBAAQ,KAAK;AAAA,MACf;AAAA,IACF;AAEA,UAAM,qBAA8D,CAClE,UACG;AACH,UAAI;AAAU;AACd,eAAS,EAAE,MAAM,cAAc,CAAC;AAChC,mDAAe;AAAA,IACjB;AAEA,UAAM,qBAA8D,CAClE,UACG;AACH,UAAI;AAAU;AACd,eAAS,EAAE,MAAM,cAAc,CAAC;AAChC,mDAAe;AAAA,IACjB;AAEA,UAAM,sBAAsB,CAAC,aAAa,WAAW;AACrD,UAAM,kBACJ,aAAa,UAAU,wBAAe,WAAW,UAAU;AAE7D,WACE;AAAA,MAAC;AAAA,uCACK,qBADL;AAAA,QAEC,iBAAe,YAAY,mBAAmB,eAAe;AAAA,QAC7D,cAAY,kDAAsB,mBAAmB,YAAY;AAAA,QACjE,WAAW;AAAA,UACT,uBAAO;AAAA,UACP,uBAAO,GAAG,WAAW,aAAa,WAAW;AAAA,UAC7C,aAAa,uBAAO;AAAA,UACpB,uBAAuB,uBAAO;AAAA,UAC9B;AAAA,QACF;AAAA,QACA,eAAa;AAAA,QACb,SAAS;AAAA,QACT,WAAW;AAAA,QACX,cAAc;AAAA,QACd,cAAc;AAAA,QACd,SAAS,MAAM,SAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,QACzC,QAAQ,MAAM,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,QACvC;AAAA,QACA,MAAK;AAAA,QACL,UAAU,WAAW,SAAY;AAAA,QAEhC;AAAA,WAAC,aAAa,WAAW,aACxB,oBAAC,SAAI,WAAW,WAAW,uBAAO,SAAS,eAAe,GAAG;AAAA,UAE9D;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,QAAQ,cAAc;AAEtB,IAAO,kBAAQ;","names":[]}
@@ -1,9 +0,0 @@
1
- "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
2
-
3
- // css-module:../Tabs/Tabs.module.css#css-module
4
- var Tabs_module_default = { "tabContainerlightBackground": "_tabContainerlightBackground_b6c60_1", "tabContainerDarkBackground": "_tabContainerDarkBackground_b6c60_5", "tab": "_tab_b6c60_1", "selectedTabOnLightBackground": "_selectedTabOnLightBackground_b6c60_13", "selectedTabOnDarkBackground": "_selectedTabOnDarkBackground_b6c60_17", "unselectedTab": "_unselectedTab_b6c60_21", "link": "_link_b6c60_25" };
5
-
6
-
7
-
8
- exports.Tabs_module_default = Tabs_module_default;
9
- //# sourceMappingURL=7DGFMDT7.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["css-module:../Tabs/Tabs.module.css#css-module"],"names":[],"mappings":";;;AAAwF,IAAO,sBAAQ,EAAC,+BAA8B,wCAAuC,8BAA6B,uCAAsC,OAAM,gBAAe,gCAA+B,0CAAyC,+BAA8B,yCAAwC,iBAAgB,2BAA0B,QAAO,iBAAgB","sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Tabs/Tabs.module.css\"; export default {\"tabContainerlightBackground\":\"_tabContainerlightBackground_b6c60_1\",\"tabContainerDarkBackground\":\"_tabContainerDarkBackground_b6c60_5\",\"tab\":\"_tab_b6c60_1\",\"selectedTabOnLightBackground\":\"_selectedTabOnLightBackground_b6c60_13\",\"selectedTabOnDarkBackground\":\"_selectedTabOnDarkBackground_b6c60_17\",\"unselectedTab\":\"_unselectedTab_b6c60_21\",\"link\":\"_link_b6c60_25\"}"]}
@@ -1,32 +0,0 @@
1
- "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
2
-
3
-
4
- var _QODNNCT2cjs = require('./QODNNCT2.cjs');
5
-
6
- // src/Modal/Layer.tsx
7
- var _reactdom = require('react-dom');
8
- var _jsxruntime = require('react/jsx-runtime');
9
- function Layer({
10
- children,
11
- zIndex = 1
12
- }) {
13
- return typeof document !== "undefined" ? _reactdom.createPortal.call(void 0,
14
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
15
- _QODNNCT2cjs.Box_default,
16
- {
17
- "data-testid": "syntax-layer",
18
- position: "fixed",
19
- dangerouslySetInlineStyle: {
20
- __style: { zIndex, inset: 0 }
21
- },
22
- children
23
- }
24
- ),
25
- document.body
26
- ) : null;
27
- }
28
-
29
-
30
-
31
- exports.Layer = Layer;
32
- //# sourceMappingURL=7KH536I2.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/Modal/Layer.tsx"],"names":[],"mappings":";;;;;;AACA,SAAS,oBAAoB;AAYrB;AATO,SAAR,MAAuB;AAAA,EAC5B;AAAA,EACA,SAAS;AACX,GAGuB;AACrB,SAAO,OAAO,aAAa,cACvB;AAAA,IACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ,UAAS;AAAA,QACT,2BAA2B;AAAA,UACzB,SAAS,EAAE,QAAQ,OAAO,EAAE;AAAA,QAC9B;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,IACA,SAAS;AAAA,EACX,IACA;AACN","sourcesContent":["import { type ReactElement, type ReactPortal } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport Box from \"../Box/Box\";\n\nexport default function Layer({\n children,\n zIndex = 1,\n}: {\n children: ReactElement;\n zIndex?: number;\n}): ReactPortal | null {\n return typeof document !== \"undefined\"\n ? createPortal(\n <Box\n data-testid=\"syntax-layer\"\n position=\"fixed\"\n dangerouslySetInlineStyle={{\n __style: { zIndex, inset: 0 },\n }}\n >\n {children}\n </Box>,\n document.body,\n )\n : null;\n}\n"]}
@@ -1,13 +0,0 @@
1
- "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
2
-
3
- // ../syntax-design-tokens/dist/js/index.js
4
- var ColorBaseDestructive700 = "#d32a4b";
5
- var ColorBaseGray700 = "#767676";
6
- var ColorCambioWhite100 = "#ffffff";
7
-
8
-
9
-
10
-
11
-
12
- exports.ColorBaseDestructive700 = ColorBaseDestructive700; exports.ColorBaseGray700 = ColorBaseGray700; exports.ColorCambioWhite100 = ColorCambioWhite100;
13
- //# sourceMappingURL=7VI7DO7P.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"names":[],"mappings":";;;AASO,IAAM,0BAA0B;AAUhC,IAAM,mBAAmB;AAqCzB,IAAM,sBAAsB","sourcesContent":["/**\n * Do not edit directly\n * Generated on Tue, 01 Oct 2024 21:18:21 GMT\n */\n\nexport const ColorBaseBlack = \"#000000\";\nexport const ColorBaseDestructive100 = \"#fef3f5\";\nexport const ColorBaseDestructive200 = \"#fad6de\";\nexport const ColorBaseDestructive300 = \"#f2a2b2\";\nexport const ColorBaseDestructive700 = \"#d32a4b\";\nexport const ColorBaseDestructive800 = \"#81162c\";\nexport const ColorBaseDestructive900 = \"#55101d\";\nexport const ColorBaseGray10 = \"#cbcbcb\"; // Used as the default color for dividers and inner strokes\nexport const ColorBaseGray30 = \"#000000\"; // For IconButton background when on top of an image\nexport const ColorBaseGray60 = \"#000000\"; // Used for icon background in classroom video grid\nexport const ColorBaseGray80 = \"#000000\"; // Used as the background for modals\nexport const ColorBaseGray100 = \"#f7f7f7\";\nexport const ColorBaseGray200 = \"#f0f0f0\"; // Used for light mode backgrounds when showing card content on top\nexport const ColorBaseGray300 = \"#d0d0d0\"; // Used for component outlines, eg: select and textfield\nexport const ColorBaseGray700 = \"#767676\"; // For secondary text in light mode\nexport const ColorBaseGray800 = \"#353535\";\nexport const ColorBaseGray900 = \"#191919\"; // Default text color, Classroom background\nexport const ColorBaseOrange100 = \"#fdf2f0\";\nexport const ColorBaseOrange200 = \"#f6cdc4\";\nexport const ColorBaseOrange300 = \"#ec9987\";\nexport const ColorBaseOrange700 = \"#c34124\";\nexport const ColorBaseOrange800 = \"#732818\";\nexport const ColorBaseOrange900 = \"#4d1a10\";\nexport const ColorBasePrimary100 = \"#eff6fa\";\nexport const ColorBasePrimary200 = \"#c1dbe7\";\nexport const ColorBasePrimary300 = \"#84b7d0\";\nexport const ColorBasePrimary700 = \"#236482\";\nexport const ColorBasePrimary800 = \"#274858\";\nexport const ColorBasePrimary900 = \"#1b303b\";\nexport const ColorBaseSuccess100 = \"#eff7f1\";\nexport const ColorBaseSuccess200 = \"#bddcc6\";\nexport const ColorBaseSuccess300 = \"#81ba92\";\nexport const ColorBaseSuccess700 = \"#397b4d\";\nexport const ColorBaseSuccess800 = \"#2d4936\";\nexport const ColorBaseSuccess900 = \"#1e3124\";\nexport const ColorBasePurple100 = \"#f9f5fa\";\nexport const ColorBasePurple200 = \"#e8dceb\";\nexport const ColorBasePurple300 = \"#cdb4d3\";\nexport const ColorBasePurple700 = \"#8b5f95\";\nexport const ColorBasePurple800 = \"#523b58\";\nexport const ColorBasePurple900 = \"#37273b\";\nexport const ColorBaseYellow100 = \"#fdf5d9\";\nexport const ColorBaseYellow200 = \"#fbe8a3\";\nexport const ColorBaseYellow300 = \"#f8d663\";\nexport const ColorBaseYellow700 = \"#ffc929\";\nexport const ColorBaseYellow800 = \"#765f1c\";\nexport const ColorBaseYellow900 = \"#3b3009\";\nexport const ColorBaseWhite = \"#ffffff\";\nexport const ColorCambioBlack = \"#050500\";\nexport const ColorCambioWhite40 = \"#ffffff\";\nexport const ColorCambioWhite70 = \"#ffffff\";\nexport const ColorCambioWhite100 = \"#ffffff\";\nexport const ColorCambioGray100 = \"#faf4eb\";\nexport const ColorCambioGray200 = \"#e4dbd3\";\nexport const ColorCambioGray270 = \"#e4dbd3\";\nexport const ColorCambioGray300 = \"#beb4ab\";\nexport const ColorCambioGray370 = \"#beb4ab\";\nexport const ColorCambioGray700 = \"#5e5952\";\nexport const ColorCambioGray800 = \"#363432\";\nexport const ColorCambioGray870 = \"#5e5952\";\nexport const ColorCambioGray900 = \"#262625\";\nexport const ColorCambioDestructive100 = \"#ffdeda\";\nexport const ColorCambioDestructive300 = \"#ff8071\";\nexport const ColorCambioDestructive370 = \"#ff8071\";\nexport const ColorCambioDestructive700 = \"#c93f32\";\nexport const ColorCambioDestructive770 = \"#c93f32\";\nexport const ColorCambioDestructive900 = \"#6d0002\";\nexport const ColorCambioSuccess100 = \"#daf2c8\";\nexport const ColorCambioSuccess300 = \"#84ce64\";\nexport const ColorCambioSuccess370 = \"#84ce64\";\nexport const ColorCambioSuccess700 = \"#3c7f20\";\nexport const ColorCambioSuccess770 = \"#3c7f20\";\nexport const ColorCambioSuccess900 = \"#103e00\";\nexport const ColorCambioRed = \"#f56e56\";\nexport const ColorCambioOrange = \"#ff8f57\";\nexport const ColorCambioTan = \"#ffb47d\";\nexport const ColorCambioCream = \"#fffad1\";\nexport const ColorCambioPurple = \"#6840a8\";\nexport const ColorCambioLilac = \"#b59ef0\";\nexport const ColorCambioThistle = \"#d69ca4\";\nexport const ColorCambioPink = \"#ffccea\";\nexport const ColorCambioNavy = \"#191142\";\nexport const ColorCambioTeal = \"#44a6cf\";\nexport const ColorCambioSlate = \"#7c9fc6\";\nexport const ColorCambioSky = \"#b1e8fc\";\nexport const ColorCambioYellow700 = \"#ffe733\";\nexport const ColorCambioTransparentFull = \"#000000\";\nexport const Elevation400 = \"0px 16px 32px 0px #00000040\";\nexport const SyntaxFontSansSerif = \"-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif\";\nexport const ShadowInteractive = \"0px 3px 16px 0px rgba(144, 134, 130, 0.05), 0px 2px 30px 0px rgba(144, 134, 130, 0.02)\";\n"]}
@@ -1,28 +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 _2XIVACBMcjs = require('./2XIVACBM.cjs');
5
-
6
- // css-module:./Divider.module.css#css-module
7
- var Divider_module_default = { "divider": "_divider_1uaon_1", "dividerClassic": "_dividerClassic_1uaon_9" };
8
-
9
- // src/Divider/Divider.tsx
10
- var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
11
- var _jsxruntime = require('react/jsx-runtime');
12
- function Divider() {
13
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
14
- "hr",
15
- {
16
- className: _classnames2.default.call(void 0,
17
- Divider_module_default.divider,
18
- _2XIVACBMcjs.colors_module_default.cambioGray370BackgroundColor
19
- )
20
- }
21
- );
22
- }
23
- Divider.displayName = "Divider";
24
-
25
-
26
-
27
- exports.Divider = Divider;
28
- //# sourceMappingURL=A3B4YKGN.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["css-module:./Divider.module.css#css-module","../../src/Divider/Divider.tsx"],"names":[],"mappings":";;;;;;AAA8F,IAAO,yBAAQ,EAAC,WAAU,oBAAmB,kBAAiB,0BAAyB;;;ACCrL,OAAO,gBAAgB;AAQnB;AAFW,SAAR,UAA+C;AACpD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,uBAAO;AAAA,QACP,sBAAY;AAAA,MACd;AAAA;AAAA,EACF;AAEJ;AAEA,QAAQ,cAAc","sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Divider/Divider.module.css\"; export default {\"divider\":\"_divider_1uaon_1\",\"dividerClassic\":\"_dividerClassic_1uaon_9\"}","import styles from \"./Divider.module.css\";\nimport classNames from \"classnames\";\nimport colorStyles from \"../colors/colors.module.css\";\n\n/**\n * [Divider](https://cambly-syntax.vercel.app/?path=/docs/components-divider--docs) is a thin horizontal line to group content in lists and layouts.\n */\nexport default function Divider(): React.ReactElement {\n return (\n <hr\n className={classNames(\n styles.divider,\n colorStyles.cambioGray370BackgroundColor,\n )}\n />\n );\n}\n\nDivider.displayName = \"Divider\";\n"]}