@cambly/syntax-core 10.16.0 → 10.18.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 (216) hide show
  1. package/dist/Avatar/Avatar.cjs +3 -3
  2. package/dist/Avatar/Avatar.css +21 -13
  3. package/dist/Avatar/Avatar.css.map +1 -1
  4. package/dist/Avatar/Avatar.d.ts +2 -1
  5. package/dist/Avatar/Avatar.js +2 -2
  6. package/dist/AvatarGroup/AvatarGroup.cjs +2 -2
  7. package/dist/AvatarGroup/AvatarGroup.d.ts +2 -1
  8. package/dist/AvatarGroup/AvatarGroup.js +1 -1
  9. package/dist/Badge/Badge.cjs +3 -3
  10. package/dist/Badge/Badge.css +49 -48
  11. package/dist/Badge/Badge.css.map +1 -1
  12. package/dist/Badge/Badge.js +2 -2
  13. package/dist/Button/Button.cjs +3 -3
  14. package/dist/Button/Button.css +49 -48
  15. package/dist/Button/Button.css.map +1 -1
  16. package/dist/Button/Button.d.ts +0 -2
  17. package/dist/Button/Button.js +2 -2
  18. package/dist/Checkbox/Checkbox.cjs +3 -3
  19. package/dist/Checkbox/Checkbox.css +72 -65
  20. package/dist/Checkbox/Checkbox.css.map +1 -1
  21. package/dist/Checkbox/Checkbox.js +2 -2
  22. package/dist/Chip/Chip.cjs +3 -3
  23. package/dist/Chip/Chip.css +49 -48
  24. package/dist/Chip/Chip.css.map +1 -1
  25. package/dist/Chip/Chip.js +2 -2
  26. package/dist/Dialog/Dialog.cjs +3 -2
  27. package/dist/Dialog/Dialog.js +2 -1
  28. package/dist/Dialog/ModalDialog.cjs +3 -3
  29. package/dist/Dialog/ModalDialog.js +2 -2
  30. package/dist/Heading/Heading.cjs +3 -3
  31. package/dist/Heading/Heading.css +49 -48
  32. package/dist/Heading/Heading.css.map +1 -1
  33. package/dist/Heading/Heading.js +2 -2
  34. package/dist/LinkButton/LinkButton.cjs +3 -3
  35. package/dist/LinkButton/LinkButton.css +49 -48
  36. package/dist/LinkButton/LinkButton.css.map +1 -1
  37. package/dist/LinkButton/LinkButton.js +2 -2
  38. package/dist/Modal/Modal.cjs +4 -4
  39. package/dist/Modal/Modal.css +49 -48
  40. package/dist/Modal/Modal.css.map +1 -1
  41. package/dist/Modal/Modal.d.ts +5 -1
  42. package/dist/Modal/Modal.js +3 -3
  43. package/dist/Popover/Popover.cjs +4 -4
  44. package/dist/Popover/Popover.js +3 -3
  45. package/dist/RadioButton/RadioButton.cjs +3 -3
  46. package/dist/RadioButton/RadioButton.css +49 -48
  47. package/dist/RadioButton/RadioButton.css.map +1 -1
  48. package/dist/RadioButton/RadioButton.js +2 -2
  49. package/dist/RichSelect/RichSelectBox.cjs +9 -9
  50. package/dist/RichSelect/RichSelectBox.css +49 -48
  51. package/dist/RichSelect/RichSelectBox.css.map +1 -1
  52. package/dist/RichSelect/RichSelectBox.js +8 -8
  53. package/dist/RichSelect/RichSelectChip.cjs +4 -4
  54. package/dist/RichSelect/RichSelectChip.css +49 -48
  55. package/dist/RichSelect/RichSelectChip.css.map +1 -1
  56. package/dist/RichSelect/RichSelectChip.js +3 -3
  57. package/dist/RichSelect/RichSelectList.cjs +14 -14
  58. package/dist/RichSelect/RichSelectList.css +67 -76
  59. package/dist/RichSelect/RichSelectList.css.map +1 -1
  60. package/dist/RichSelect/RichSelectList.js +13 -13
  61. package/dist/RichSelect/RichSelectRadioButton.cjs +4 -4
  62. package/dist/RichSelect/RichSelectRadioButton.css +49 -48
  63. package/dist/RichSelect/RichSelectRadioButton.css.map +1 -1
  64. package/dist/RichSelect/RichSelectRadioButton.js +3 -3
  65. package/dist/RichSelect/RichSelectSection.cjs +3 -3
  66. package/dist/RichSelect/RichSelectSection.css +49 -48
  67. package/dist/RichSelect/RichSelectSection.css.map +1 -1
  68. package/dist/RichSelect/RichSelectSection.js +2 -2
  69. package/dist/SelectList/SelectList.cjs +4 -4
  70. package/dist/SelectList/SelectList.css +67 -76
  71. package/dist/SelectList/SelectList.css.map +1 -1
  72. package/dist/SelectList/SelectList.js +3 -3
  73. package/dist/TextArea/TextArea.cjs +3 -3
  74. package/dist/TextArea/TextArea.css +76 -97
  75. package/dist/TextArea/TextArea.css.map +1 -1
  76. package/dist/TextArea/TextArea.js +2 -2
  77. package/dist/TextField/TextField.cjs +3 -3
  78. package/dist/TextField/TextField.css +69 -85
  79. package/dist/TextField/TextField.css.map +1 -1
  80. package/dist/TextField/TextField.js +2 -2
  81. package/dist/Tooltip/Tooltip.cjs +3 -3
  82. package/dist/Tooltip/Tooltip.css +49 -48
  83. package/dist/Tooltip/Tooltip.css.map +1 -1
  84. package/dist/Tooltip/Tooltip.js +2 -2
  85. package/dist/Typography/Typography.cjs +2 -2
  86. package/dist/Typography/Typography.css +49 -48
  87. package/dist/Typography/Typography.css.map +1 -1
  88. package/dist/Typography/Typography.js +1 -1
  89. package/dist/__chunks/{WASW7BJX.js → 22W7JX3C.js} +3 -2
  90. package/dist/__chunks/{WASW7BJX.js.map → 22W7JX3C.js.map} +1 -1
  91. package/dist/__chunks/{M3US55ZU.js → 2RIIE7CU.js} +2 -2
  92. package/dist/__chunks/{M3US55ZU.js.map → 2RIIE7CU.js.map} +1 -1
  93. package/dist/__chunks/{5L6ZVKXY.cjs → 364LH7BQ.cjs} +9 -6
  94. package/dist/__chunks/364LH7BQ.cjs.map +1 -0
  95. package/dist/__chunks/{LME64WQ5.js → 4K4SF7RI.js} +2 -2
  96. package/dist/__chunks/{A5O4QH7P.js → 4LCJJZPI.js} +3 -3
  97. package/dist/__chunks/{EBKE2QMG.cjs → 4U2YGWTW.cjs} +5 -5
  98. package/dist/__chunks/4U2YGWTW.cjs.map +1 -0
  99. package/dist/__chunks/{VL5ONCQD.cjs → 577X7X3J.cjs} +6 -2
  100. package/dist/__chunks/577X7X3J.cjs.map +1 -0
  101. package/dist/__chunks/{WTVLR5TH.js → 5ODCKBUB.js} +6 -17
  102. package/dist/__chunks/5ODCKBUB.js.map +1 -0
  103. package/dist/__chunks/{7OYM5HJI.cjs → 635VMAFB.cjs} +9 -6
  104. package/dist/__chunks/635VMAFB.cjs.map +1 -0
  105. package/dist/__chunks/{ADHTE22D.cjs → 762IDERQ.cjs} +3 -3
  106. package/dist/__chunks/{MHXIUSQ6.js → 7NE5Y7AO.js} +8 -5
  107. package/dist/__chunks/7NE5Y7AO.js.map +1 -0
  108. package/dist/__chunks/{KG2M6SNT.js → 7VMMLAGL.js} +10 -10
  109. package/dist/__chunks/{KG2M6SNT.js.map → 7VMMLAGL.js.map} +1 -1
  110. package/dist/__chunks/{WRMF47QN.cjs → AL4ECXRL.cjs} +9 -5
  111. package/dist/__chunks/AL4ECXRL.cjs.map +1 -0
  112. package/dist/__chunks/{Q3GQP4AU.cjs → AOKSJPV6.cjs} +1 -1
  113. package/dist/__chunks/{Q3GQP4AU.cjs.map → AOKSJPV6.cjs.map} +1 -1
  114. package/dist/__chunks/{HPXOG4FB.js → BA5NNKNL.js} +2 -2
  115. package/dist/__chunks/{7K5BKF5X.cjs → CYMLBKRU.cjs} +5 -5
  116. package/dist/__chunks/{KHZ4ITXI.cjs → DC7G3PCP.cjs} +20 -11
  117. package/dist/__chunks/DC7G3PCP.cjs.map +1 -0
  118. package/dist/__chunks/{AREAWDHD.js → DUANKQDU.js} +19 -10
  119. package/dist/__chunks/DUANKQDU.js.map +1 -0
  120. package/dist/__chunks/DV73RCNK.cjs +104 -0
  121. package/dist/__chunks/DV73RCNK.cjs.map +1 -0
  122. package/dist/__chunks/{A7AAGKC2.js → E5L5ZBOW.js} +6 -2
  123. package/dist/__chunks/E5L5ZBOW.js.map +1 -0
  124. package/dist/__chunks/{4HRJ2HGG.cjs → EIR3V4AH.cjs} +7 -18
  125. package/dist/__chunks/EIR3V4AH.cjs.map +1 -0
  126. package/dist/__chunks/{W4GZKF4S.cjs → ESGW3XTV.cjs} +4 -4
  127. package/dist/__chunks/{FVILLLRC.js → HA4KAF7N.js} +2 -2
  128. package/dist/__chunks/{IQP3Q2PT.cjs → IAOEIH7U.cjs} +4 -4
  129. package/dist/__chunks/IAOEIH7U.cjs.map +1 -0
  130. package/dist/__chunks/{S7GKKM5T.js → IJNZIOML.js} +2 -2
  131. package/dist/__chunks/{J5JBNASA.cjs → LKLPRA6D.cjs} +8 -15
  132. package/dist/__chunks/LKLPRA6D.cjs.map +1 -0
  133. package/dist/__chunks/{ONYVX4WU.js → LZ4LFK7N.js} +1 -1
  134. package/dist/__chunks/{ONYVX4WU.js.map → LZ4LFK7N.js.map} +1 -1
  135. package/dist/__chunks/{JEHUXNNK.cjs → OWLMHTW5.cjs} +2 -2
  136. package/dist/__chunks/{JEHUXNNK.cjs.map → OWLMHTW5.cjs.map} +1 -1
  137. package/dist/__chunks/{ZFFZWYYU.js → P234RPXN.js} +2 -2
  138. package/dist/__chunks/{GOMOMWQO.cjs → Q3I37NS7.cjs} +3 -3
  139. package/dist/__chunks/{S3UJPL7R.js → Q5GSB3Y5.js} +3 -3
  140. package/dist/__chunks/Q5GSB3Y5.js.map +1 -0
  141. package/dist/__chunks/{ATC5Z75T.cjs → QTGWI2GM.cjs} +3 -3
  142. package/dist/__chunks/{ZQYWEWWE.js → R4TBYKLS.js} +1 -1
  143. package/dist/__chunks/R4TBYKLS.js.map +1 -0
  144. package/dist/__chunks/{YPOSL2OK.js → S2VZE6RS.js} +2 -2
  145. package/dist/__chunks/{JT7PXHSX.cjs → SDTI2RBA.cjs} +4 -3
  146. package/dist/__chunks/SDTI2RBA.cjs.map +1 -0
  147. package/dist/__chunks/{TPT2EGAE.js → SEFHKYBL.js} +8 -5
  148. package/dist/__chunks/SEFHKYBL.js.map +1 -0
  149. package/dist/__chunks/{PZFK4YV7.cjs → SXABWYV4.cjs} +3 -3
  150. package/dist/__chunks/{DN43TX54.cjs → T75E3KPP.cjs} +10 -10
  151. package/dist/__chunks/TLVOHYPL.js +104 -0
  152. package/dist/__chunks/TLVOHYPL.js.map +1 -0
  153. package/dist/__chunks/{WYNZQWGG.cjs → ULHGK75R.cjs} +3 -3
  154. package/dist/__chunks/{FSIIRTOI.cjs → VW7HLULP.cjs} +3 -3
  155. package/dist/__chunks/{DE4RZUBC.js → WILWV75P.js} +6 -13
  156. package/dist/__chunks/WILWV75P.js.map +1 -0
  157. package/dist/__chunks/{OQFQZGQM.js → YAL24M7H.js} +4 -4
  158. package/dist/__chunks/YAL24M7H.js.map +1 -0
  159. package/dist/__chunks/{KHQQ6NTQ.js → YHHU5RSR.js} +8 -4
  160. package/dist/__chunks/YHHU5RSR.js.map +1 -0
  161. package/dist/__chunks/{6S3NMK6F.cjs → ZFZJ56ZA.cjs} +22 -22
  162. package/dist/__chunks/ZFZJ56ZA.cjs.map +1 -0
  163. package/dist/__chunks/{OUW7IJ3Y.cjs → ZIBKOWAK.cjs} +1 -1
  164. package/dist/__chunks/ZIBKOWAK.cjs.map +1 -0
  165. package/dist/__chunks/{KLMWBBII.js → ZOWJFE7W.js} +5 -5
  166. package/dist/__chunks/{C4MSZDCG.js → ZWTXIPP3.js} +2 -2
  167. package/dist/index.cjs +27 -25
  168. package/dist/index.css +138 -155
  169. package/dist/index.css.map +1 -1
  170. package/dist/index.d.ts +1 -1
  171. package/dist/index.js +28 -26
  172. package/package.json +1 -1
  173. package/dist/__chunks/4HRJ2HGG.cjs.map +0 -1
  174. package/dist/__chunks/52D6HVA3.js +0 -122
  175. package/dist/__chunks/52D6HVA3.js.map +0 -1
  176. package/dist/__chunks/5L6ZVKXY.cjs.map +0 -1
  177. package/dist/__chunks/6S3NMK6F.cjs.map +0 -1
  178. package/dist/__chunks/7OYM5HJI.cjs.map +0 -1
  179. package/dist/__chunks/A7AAGKC2.js.map +0 -1
  180. package/dist/__chunks/AREAWDHD.js.map +0 -1
  181. package/dist/__chunks/DE4RZUBC.js.map +0 -1
  182. package/dist/__chunks/EBKE2QMG.cjs.map +0 -1
  183. package/dist/__chunks/IQP3Q2PT.cjs.map +0 -1
  184. package/dist/__chunks/J5JBNASA.cjs.map +0 -1
  185. package/dist/__chunks/JT7PXHSX.cjs.map +0 -1
  186. package/dist/__chunks/KHQQ6NTQ.js.map +0 -1
  187. package/dist/__chunks/KHZ4ITXI.cjs.map +0 -1
  188. package/dist/__chunks/MHXIUSQ6.js.map +0 -1
  189. package/dist/__chunks/OQFQZGQM.js.map +0 -1
  190. package/dist/__chunks/OUW7IJ3Y.cjs.map +0 -1
  191. package/dist/__chunks/S3UJPL7R.js.map +0 -1
  192. package/dist/__chunks/TPT2EGAE.js.map +0 -1
  193. package/dist/__chunks/VL5ONCQD.cjs.map +0 -1
  194. package/dist/__chunks/WRMF47QN.cjs.map +0 -1
  195. package/dist/__chunks/WTVLR5TH.js.map +0 -1
  196. package/dist/__chunks/YF53M62E.cjs +0 -122
  197. package/dist/__chunks/YF53M62E.cjs.map +0 -1
  198. package/dist/__chunks/ZQYWEWWE.js.map +0 -1
  199. /package/dist/__chunks/{LME64WQ5.js.map → 4K4SF7RI.js.map} +0 -0
  200. /package/dist/__chunks/{A5O4QH7P.js.map → 4LCJJZPI.js.map} +0 -0
  201. /package/dist/__chunks/{ADHTE22D.cjs.map → 762IDERQ.cjs.map} +0 -0
  202. /package/dist/__chunks/{HPXOG4FB.js.map → BA5NNKNL.js.map} +0 -0
  203. /package/dist/__chunks/{7K5BKF5X.cjs.map → CYMLBKRU.cjs.map} +0 -0
  204. /package/dist/__chunks/{W4GZKF4S.cjs.map → ESGW3XTV.cjs.map} +0 -0
  205. /package/dist/__chunks/{FVILLLRC.js.map → HA4KAF7N.js.map} +0 -0
  206. /package/dist/__chunks/{S7GKKM5T.js.map → IJNZIOML.js.map} +0 -0
  207. /package/dist/__chunks/{ZFFZWYYU.js.map → P234RPXN.js.map} +0 -0
  208. /package/dist/__chunks/{GOMOMWQO.cjs.map → Q3I37NS7.cjs.map} +0 -0
  209. /package/dist/__chunks/{ATC5Z75T.cjs.map → QTGWI2GM.cjs.map} +0 -0
  210. /package/dist/__chunks/{YPOSL2OK.js.map → S2VZE6RS.js.map} +0 -0
  211. /package/dist/__chunks/{PZFK4YV7.cjs.map → SXABWYV4.cjs.map} +0 -0
  212. /package/dist/__chunks/{DN43TX54.cjs.map → T75E3KPP.cjs.map} +0 -0
  213. /package/dist/__chunks/{WYNZQWGG.cjs.map → ULHGK75R.cjs.map} +0 -0
  214. /package/dist/__chunks/{FSIIRTOI.cjs.map → VW7HLULP.cjs.map} +0 -0
  215. /package/dist/__chunks/{KLMWBBII.js.map → ZOWJFE7W.js.map} +0 -0
  216. /package/dist/__chunks/{C4MSZDCG.js.map → ZWTXIPP3.js.map} +0 -0
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Typography/Typography.tsx","css-module:./Typography.module.css#css-module"],"names":["Typography"],"mappings":"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","sourcesContent":["import classNames from \"classnames\";\nimport { forwardRef, type ReactElement, type ReactNode } from \"react\";\nimport styles from \"./Typography.module.css\";\nimport colorStyles from \"../colors/colors.module.css\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\n\nfunction classicTextColor(\n color:\n | \"gray900\"\n | \"gray700\"\n | \"primary\"\n | \"destructive-primary\"\n | \"destructive-darkBackground\"\n | \"success\"\n | \"success-darkBackground\"\n | \"white\"\n | \"inherit\",\n): string {\n switch (color) {\n case \"gray700\":\n return colorStyles.gray700Color;\n case \"white\":\n return colorStyles.whiteColor;\n case \"inherit\":\n return colorStyles.inheritColor;\n case \"primary\":\n return colorStyles.primary700Color;\n case \"destructive-primary\":\n case \"destructive-darkBackground\":\n return colorStyles.destructive700Color;\n case \"success\":\n return colorStyles.success700Color;\n default:\n return colorStyles.gray900Color;\n }\n}\n\nfunction cambioTextColor(\n color:\n | \"gray900\"\n | \"gray700\"\n | \"primary\"\n | \"destructive-primary\"\n | \"destructive-darkBackground\"\n | \"success\"\n | \"success-darkBackground\"\n | \"white\"\n | \"inherit\",\n): string {\n switch (color) {\n case \"gray700\":\n return colorStyles.cambioGray800Color;\n case \"white\":\n return colorStyles.cambioWhiteColor;\n case \"inherit\":\n return colorStyles.inheritColor;\n case \"destructive-primary\":\n return colorStyles.cambioDestructive900Color;\n case \"destructive-darkBackground\":\n return colorStyles.cambioDestructive100Color;\n case \"success\":\n return colorStyles.cambioSuccess900Color;\n case \"success-darkBackground\":\n return colorStyles.cambioSuccess100Color;\n // primary / gray900\n default:\n return colorStyles.cambioBlackColor;\n }\n}\n\nfunction classicWeight(\n weight: \"regular\" | \"interactive\" | \"medium\" | \"semiBold\" | \"bold\" | \"heavy\",\n): \"regular\" | \"interactive\" | \"semiBold\" | \"bold\" | \"heavy\" {\n switch (weight) {\n case \"medium\":\n return \"regular\";\n default:\n return weight;\n }\n}\n\nfunction cambioWeight(\n weight: \"regular\" | \"interactive\" | \"medium\" | \"semiBold\" | \"bold\" | \"heavy\",\n): \"regular\" | \"medium\" | \"semiBold\" | \"bold\" {\n switch (weight) {\n case \"interactive\":\n return \"medium\";\n case \"heavy\":\n return \"regular\";\n default:\n return weight;\n }\n}\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\";\n /**\n * The text to be rendered\n */\n children?: ReactNode;\n /**\n * The color of the text.\n *\n * Cambio only: `success-darkBackground` / `destructive-darkBackground`\n *\n * @defaultValue \"gray900\"\n */\n color?:\n | \"gray900\"\n | \"gray700\"\n | \"primary\"\n | \"destructive-primary\"\n | \"destructive-darkBackground\"\n | \"success\"\n | \"success-darkBackground\"\n | \"white\"\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 * Classic:\n * * `100`: 12px\n * * `200`: 14px\n * * `300`: 16px\n * * `500`: 20px\n * * `600`: 28px\n * * `700`: 40px\n * * `800`: 64px\n *\n * Cambio Mobile:\n * * `100`: 14px\n * * `200`: 16px\n * * `300`: 18px\n * * `400`: 20px\n * * `500`: 23px\n * * `600`: 26px\n * * `700`: 29px\n * * `800`: 33px\n * * `900`: 37px\n * * `1000`: 41px\n * * `1100`: 46px\n *\n * Cambio Desktop (viewport width > 480px):\n * * `100`: 13px\n * * `200`: 16px\n * * `300`: 20px\n * * `400`: 25px\n * * `500`: 31px\n * * `600`: 39px\n * * `700`: 49px\n * * `800`: 61px\n * * `900`: 76px\n * * `1000`: 95px\n * * `1100`: 119px\n *\n * @defaultValue 200\n */\n size?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000 | 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 * Classic:\n * * `regular`: 400\n * * `interactive`: 500 (Classic only)\n * * `semiBold`: 600\n * * `bold`: 700\n * * `heavy`: 860 (Classic only)\n *\n * Cambio:\n * * `regular`: 400\n * * `medium`: 510\n * * `semiBold`: 590\n * * `bold`: 710\n *\n *\n * @defaultValue \"regular\"\n */\n weight?:\n | \"regular\"\n | \"interactive\"\n | \"medium\"\n | \"semiBold\"\n | \"bold\"\n | \"heavy\";\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 const { themeName } = useTheme();\n\n const weightStyles =\n themeName === \"classic\"\n ? styles[classicWeight(weight)]\n : styles[`${cambioWeight(weight)}Cambio`];\n\n return (\n <Tag\n id={id}\n className={classNames(\n styles.typography,\n styles[align],\n weightStyles,\n themeName === \"cambio\" && fontStyle === \"serif\"\n ? styles.serif\n : styles.sansSerif,\n themeName === \"cambio\"\n ? cambioTextColor(color)\n : classicTextColor(color),\n inline && styles.inline,\n themeName === \"classic\"\n ? styles[\n `size${\n // TypeScript doesn't narrow the type of size with `.includes` so we have to do it manually\n // https://github.com/microsoft/TypeScript/issues/36275#issuecomment-643376433\n // One we ship Cambio, we can remove these checks\n size === 100 ||\n size === 200 ||\n size === 300 ||\n size === 500 ||\n size === 600 ||\n size === 700 ||\n size === 800\n ? size\n : 200\n }`\n ]\n : styles[`size${size}Cambio`],\n transform === \"uppercase\" && styles.uppercase,\n underline && styles.underline,\n lineClamp != null && styles.lineClamp,\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_imwgy_1\",\"sansSerif\":\"_sansSerif_imwgy_23\",\"serif\":\"_serif_imwgy_29\",\"size100\":\"_size100_imwgy_36\",\"size200\":\"_size200_imwgy_40\",\"size300\":\"_size300_imwgy_44\",\"size500\":\"_size500_imwgy_48\",\"size600\":\"_size600_imwgy_52\",\"size700\":\"_size700_imwgy_56\",\"size800\":\"_size800_imwgy_60\",\"size100Cambio\":\"_size100Cambio_imwgy_65\",\"size200Cambio\":\"_size200Cambio_imwgy_69\",\"size300Cambio\":\"_size300Cambio_imwgy_73\",\"size400Cambio\":\"_size400Cambio_imwgy_77\",\"size500Cambio\":\"_size500Cambio_imwgy_81\",\"size600Cambio\":\"_size600Cambio_imwgy_85\",\"size700Cambio\":\"_size700Cambio_imwgy_89\",\"size800Cambio\":\"_size800Cambio_imwgy_93\",\"size900Cambio\":\"_size900Cambio_imwgy_97\",\"size1000Cambio\":\"_size1000Cambio_imwgy_138\",\"size1100Cambio\":\"_size1100Cambio_imwgy_142\",\"center\":\"_center_imwgy_148\",\"forceLeft\":\"_forceLeft_imwgy_152\",\"forceRight\":\"_forceRight_imwgy_156\",\"start\":\"_start_imwgy_160\",\"end\":\"_end_imwgy_164\",\"bold\":\"_bold_imwgy_169\",\"regular\":\"_regular_imwgy_173\",\"interactive\":\"_interactive_imwgy_177\",\"semiBold\":\"_semiBold_imwgy_181\",\"heavy\":\"_heavy_imwgy_185\",\"regularCambio\":\"_regularCambio_imwgy_189\",\"mediumCambio\":\"_mediumCambio_imwgy_193\",\"semiBoldCambio\":\"_semiBoldCambio_imwgy_197\",\"boldCambio\":\"_boldCambio_imwgy_201\",\"underline\":\"_underline_imwgy_205\",\"inline\":\"_inline_imwgy_209\",\"uppercase\":\"_uppercase_imwgy_213\",\"lineClamp\":\"_lineClamp_imwgy_217\"}"]}
1
+ {"version":3,"sources":["../../src/Typography/Typography.tsx","css-module:./Typography.module.css#css-module"],"names":["Typography"],"mappings":"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","sourcesContent":["import classNames from \"classnames\";\nimport { forwardRef, type ReactElement, type ReactNode } from \"react\";\nimport styles from \"./Typography.module.css\";\nimport colorStyles from \"../colors/colors.module.css\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\n\nfunction classicTextColor(\n color:\n | \"gray900\"\n | \"gray700\"\n | \"primary\"\n | \"destructive-primary\"\n | \"destructive-darkBackground\"\n | \"success\"\n | \"success-darkBackground\"\n | \"white\"\n | \"inherit\",\n): string {\n switch (color) {\n case \"gray700\":\n return colorStyles.gray700Color;\n case \"white\":\n return colorStyles.whiteColor;\n case \"inherit\":\n return colorStyles.inheritColor;\n case \"primary\":\n return colorStyles.primary700Color;\n case \"destructive-primary\":\n case \"destructive-darkBackground\":\n return colorStyles.destructive700Color;\n case \"success\":\n return colorStyles.success700Color;\n default:\n return colorStyles.gray900Color;\n }\n}\n\nfunction cambioTextColor(\n color:\n | \"gray900\"\n | \"gray700\"\n | \"primary\"\n | \"destructive-primary\"\n | \"destructive-darkBackground\"\n | \"success\"\n | \"success-darkBackground\"\n | \"white\"\n | \"inherit\",\n): string {\n switch (color) {\n case \"gray700\":\n return colorStyles.cambioGray800Color;\n case \"white\":\n return colorStyles.cambioWhiteColor;\n case \"inherit\":\n return colorStyles.inheritColor;\n case \"destructive-primary\":\n return colorStyles.cambioDestructive900Color;\n case \"destructive-darkBackground\":\n return colorStyles.cambioDestructive100Color;\n case \"success\":\n return colorStyles.cambioSuccess900Color;\n case \"success-darkBackground\":\n return colorStyles.cambioSuccess100Color;\n // primary / gray900\n default:\n return colorStyles.cambioBlackColor;\n }\n}\n\nfunction classicWeight(\n weight: \"regular\" | \"interactive\" | \"medium\" | \"semiBold\" | \"bold\" | \"heavy\",\n): \"regular\" | \"interactive\" | \"semiBold\" | \"bold\" | \"heavy\" {\n switch (weight) {\n case \"medium\":\n return \"regular\";\n default:\n return weight;\n }\n}\n\nfunction cambioWeight(\n weight: \"regular\" | \"interactive\" | \"medium\" | \"semiBold\" | \"bold\" | \"heavy\",\n): \"regular\" | \"medium\" | \"semiBold\" | \"bold\" {\n switch (weight) {\n case \"interactive\":\n return \"medium\";\n case \"heavy\":\n return \"regular\";\n default:\n return weight;\n }\n}\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\";\n /**\n * The text to be rendered\n */\n children?: ReactNode;\n /**\n * The color of the text.\n *\n * Cambio only: `success-darkBackground` / `destructive-darkBackground`\n *\n * @defaultValue \"gray900\"\n */\n color?:\n | \"gray900\"\n | \"gray700\"\n | \"primary\"\n | \"destructive-primary\"\n | \"destructive-darkBackground\"\n | \"success\"\n | \"success-darkBackground\"\n | \"white\"\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 * Classic:\n * * `100`: 12px\n * * `200`: 14px\n * * `300`: 16px\n * * `500`: 20px\n * * `600`: 28px\n * * `700`: 40px\n * * `800`: 64px\n *\n * Cambio Mobile:\n * * `100`: 14px\n * * `200`: 16px\n * * `300`: 18px\n * * `400`: 20px\n * * `500`: 23px\n * * `600`: 26px\n * * `700`: 29px\n * * `800`: 33px\n * * `900`: 37px\n * * `1000`: 41px\n * * `1100`: 46px\n *\n * Cambio Desktop (viewport width > 480px):\n * * `100`: 13px\n * * `200`: 16px\n * * `300`: 20px\n * * `400`: 25px\n * * `500`: 31px\n * * `600`: 39px\n * * `700`: 49px\n * * `800`: 61px\n * * `900`: 76px\n * * `1000`: 95px\n * * `1100`: 119px\n *\n * @defaultValue 200\n */\n size?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000 | 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 * Classic:\n * * `regular`: 400\n * * `interactive`: 500 (Classic only)\n * * `semiBold`: 600\n * * `bold`: 700\n * * `heavy`: 860 (Classic only)\n *\n * Cambio:\n * * `regular`: 400\n * * `medium`: 510\n * * `semiBold`: 590\n * * `bold`: 710\n *\n *\n * @defaultValue \"regular\"\n */\n weight?:\n | \"regular\"\n | \"interactive\"\n | \"medium\"\n | \"semiBold\"\n | \"bold\"\n | \"heavy\";\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 const { themeName } = useTheme();\n\n const weightStyles =\n themeName === \"classic\"\n ? styles[classicWeight(weight)]\n : styles[`${cambioWeight(weight)}Cambio`];\n\n return (\n <Tag\n id={id}\n className={classNames(\n styles.typography,\n styles[align],\n weightStyles,\n themeName === \"cambio\" && fontStyle === \"serif\"\n ? styles.serif\n : styles.sansSerif,\n themeName === \"cambio\"\n ? cambioTextColor(color)\n : classicTextColor(color),\n inline && styles.inline,\n themeName === \"classic\"\n ? styles[\n `size${\n // TypeScript doesn't narrow the type of size with `.includes` so we have to do it manually\n // https://github.com/microsoft/TypeScript/issues/36275#issuecomment-643376433\n // One we ship Cambio, we can remove these checks\n size === 100 ||\n size === 200 ||\n size === 300 ||\n size === 500 ||\n size === 600 ||\n size === 700 ||\n size === 800\n ? size\n : 200\n }`\n ]\n : styles[`size${size}Cambio`],\n transform === \"uppercase\" && styles.uppercase,\n underline && styles.underline,\n lineClamp != null && styles.lineClamp,\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_rz4gh_1\",\"sansSerif\":\"_sansSerif_rz4gh_24\",\"serif\":\"_serif_rz4gh_30\",\"size100\":\"_size100_rz4gh_37\",\"size200\":\"_size200_rz4gh_41\",\"size300\":\"_size300_rz4gh_45\",\"size500\":\"_size500_rz4gh_49\",\"size600\":\"_size600_rz4gh_53\",\"size700\":\"_size700_rz4gh_57\",\"size800\":\"_size800_rz4gh_61\",\"size100Cambio\":\"_size100Cambio_rz4gh_66\",\"size200Cambio\":\"_size200Cambio_rz4gh_70\",\"size300Cambio\":\"_size300Cambio_rz4gh_74\",\"size400Cambio\":\"_size400Cambio_rz4gh_78\",\"size500Cambio\":\"_size500Cambio_rz4gh_82\",\"size600Cambio\":\"_size600Cambio_rz4gh_86\",\"size700Cambio\":\"_size700Cambio_rz4gh_90\",\"size800Cambio\":\"_size800Cambio_rz4gh_94\",\"size900Cambio\":\"_size900Cambio_rz4gh_98\",\"size1000Cambio\":\"_size1000Cambio_rz4gh_139\",\"size1100Cambio\":\"_size1100Cambio_rz4gh_143\",\"center\":\"_center_rz4gh_149\",\"forceLeft\":\"_forceLeft_rz4gh_153\",\"forceRight\":\"_forceRight_rz4gh_157\",\"start\":\"_start_rz4gh_161\",\"end\":\"_end_rz4gh_165\",\"bold\":\"_bold_rz4gh_170\",\"regular\":\"_regular_rz4gh_174\",\"interactive\":\"_interactive_rz4gh_178\",\"semiBold\":\"_semiBold_rz4gh_182\",\"heavy\":\"_heavy_rz4gh_186\",\"regularCambio\":\"_regularCambio_rz4gh_190\",\"mediumCambio\":\"_mediumCambio_rz4gh_194\",\"semiBoldCambio\":\"_semiBoldCambio_rz4gh_198\",\"boldCambio\":\"_boldCambio_rz4gh_202\",\"underline\":\"_underline_rz4gh_206\",\"inline\":\"_inline_rz4gh_210\",\"uppercase\":\"_uppercase_rz4gh_214\",\"lineClamp\":\"_lineClamp_rz4gh_218\"}"]}
@@ -4,7 +4,7 @@ import {
4
4
  } from "./KU5UT5RY.js";
5
5
  import {
6
6
  Typography_default
7
- } from "./M3US55ZU.js";
7
+ } from "./2RIIE7CU.js";
8
8
  import {
9
9
  useTheme
10
10
  } from "./ZSHAHV4F.js";
@@ -60,4 +60,4 @@ var Badge_default = Badge;
60
60
  export {
61
61
  Badge_default
62
62
  };
63
- //# sourceMappingURL=ZFFZWYYU.js.map
63
+ //# sourceMappingURL=P234RPXN.js.map
@@ -7,7 +7,7 @@ var _MF7LLV7Vcjs = require('./MF7LLV7V.cjs');
7
7
  var _IL22HCBFcjs = require('./IL22HCBF.cjs');
8
8
 
9
9
 
10
- var _JEHUXNNKcjs = require('./JEHUXNNK.cjs');
10
+ var _OWLMHTW5cjs = require('./OWLMHTW5.cjs');
11
11
 
12
12
  // src/RichSelect/RichSelectSection.tsx
13
13
  var _react = require('react');
@@ -39,7 +39,7 @@ var RichSelectSection_default = _react.forwardRef.call(void 0,
39
39
  }
40
40
  ),
41
41
  children: [
42
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactariacomponents.Header, { className: _classnames2.default.call(void 0, _MF7LLV7Vcjs.layout_module_default.fullWidth), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _JEHUXNNKcjs.Typography_default, { children: label }) }),
42
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactariacomponents.Header, { className: _classnames2.default.call(void 0, _MF7LLV7Vcjs.layout_module_default.fullWidth), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _OWLMHTW5cjs.Typography_default, { children: label }) }),
43
43
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactariacomponents.Collection, { children })
44
44
  ]
45
45
  }
@@ -50,4 +50,4 @@ var RichSelectSection_default = _react.forwardRef.call(void 0,
50
50
 
51
51
 
52
52
  exports.RichSelectSection_default = RichSelectSection_default;
53
- //# sourceMappingURL=GOMOMWQO.cjs.map
53
+ //# sourceMappingURL=Q3I37NS7.cjs.map
@@ -7,7 +7,7 @@ import {
7
7
  } from "./KU5UT5RY.js";
8
8
  import {
9
9
  Typography_default
10
- } from "./M3US55ZU.js";
10
+ } from "./2RIIE7CU.js";
11
11
  import {
12
12
  colors_module_default
13
13
  } from "./JHJZ5COD.js";
@@ -81,7 +81,7 @@ var RadioButton = ({
81
81
  themeName === "cambio" && checked && /* @__PURE__ */ jsx(
82
82
  Box_default,
83
83
  {
84
- backgroundColor: "gray900",
84
+ backgroundColor: error ? "destructive900" : "gray900",
85
85
  width: size === "md" ? 12 : 8,
86
86
  height: size === "md" ? 12 : 8,
87
87
  position: "absolute",
@@ -137,4 +137,4 @@ var RadioButton_default = RadioButton;
137
137
  export {
138
138
  RadioButton_default
139
139
  };
140
- //# sourceMappingURL=S3UJPL7R.js.map
140
+ //# sourceMappingURL=Q5GSB3Y5.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/RadioButton/RadioButton.tsx","css-module:./RadioButton.module.css#css-module"],"sourcesContent":["import React, { type ReactElement, useState } from \"react\";\nimport classnames from \"classnames\";\n\nimport styles from \"./RadioButton.module.css\";\nimport focusStyles from \"../Focus.module.css\";\nimport Typography from \"../Typography/Typography\";\nimport useFocusVisible from \"../useFocusVisible\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\nimport colorStyles from \"../colors/colors.module.css\";\nimport Box from \"../Box/Box\";\n\n/**\n * [RadioButton](https://cambly-syntax.vercel.app/?path=/docs/components-radiobutton--docs) is a radio button with accompanying text\n */\nconst RadioButton = ({\n checked = false,\n \"data-testid\": dataTestId,\n dangerouslyForceFocusStyles = false,\n disabled: disabledProp = false,\n error = false,\n id,\n label,\n name,\n onChange,\n size = \"md\",\n value,\n}: {\n /**\n * Whether or not the radio button is checked\n *\n * @defaultValue false\n */\n checked?: boolean;\n /**\n * Test id for the radio button\n */\n \"data-testid\"?: string;\n /**\n * Whether or not the radio button is disabled\n *\n * @defaultValue false\n */\n disabled?: boolean;\n /**\n * Whether to show error color schema\n *\n * @defaultValue false\n */\n error?: boolean;\n /**\n * Id for the the radio button\n */\n id?: string;\n /**\n * Value to show end user\n */\n label: string;\n /**\n * The name of the grouping the radio buttons are in\n */\n name: string;\n /**\n * The callback to be called when the radio button is clicked\n */\n onChange: React.ChangeEventHandler<HTMLInputElement>;\n /**\n * Size of the components\n *\n * * `sm`: 16px\n * * `md`: 24px\n *\n * @defaultValue \"md\"\n */\n size?: \"sm\" | \"md\";\n /**\n * Value of the selected radio option\n */\n value: string | number;\n /** forces focus ring styling */\n dangerouslyForceFocusStyles?: boolean;\n}): ReactElement => {\n const { themeName } = useTheme();\n const isHydrated = useIsHydrated();\n const disabled = !isHydrated || disabledProp;\n const [isFocused, setIsFocused] = useState(false);\n const { isFocusVisible } = useFocusVisible();\n\n const classicStyles = classnames(styles.background, styles[size], {\n [styles.errorBorderColor]: error,\n [styles.borderColor]: !error,\n [focusStyles.accessibilityOutlineFocus]:\n (isFocused && isFocusVisible) || dangerouslyForceFocusStyles,\n [styles.mdCheckedBorder]: checked && size === \"md\",\n [styles.smCheckedBorder]: checked && size === \"sm\",\n [styles.neutralBorder]: !checked && size === \"md\",\n });\n\n const cambioStyles = classnames(\n styles.background,\n error\n ? colorStyles.cambioDestructive370BackgroundColor\n : colorStyles.cambioGray370BackgroundColor,\n styles[size],\n {\n [focusStyles.accessibilityOutlineFocus]:\n (isFocused && isFocusVisible) || dangerouslyForceFocusStyles,\n },\n );\n\n return (\n <label\n className={classnames(\n styles.radioBaseContainer,\n styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n {\n [styles.disabled]: disabled,\n [styles.smBase]: size === \"sm\",\n [styles.mdBase]: size === \"md\",\n },\n )}\n >\n <div className={themeName === \"classic\" ? classicStyles : cambioStyles} />\n {themeName === \"cambio\" && checked && (\n <Box\n backgroundColor={error ? \"destructive900\" : \"gray900\"}\n width={size === \"md\" ? 12 : 8}\n height={size === \"md\" ? 12 : 8}\n position=\"absolute\"\n rounding=\"full\"\n dangerouslySetInlineStyle={{\n __style: {\n left: size === \"md\" ? 6 : 4,\n },\n }}\n />\n )}\n <input\n data-testid={dataTestId}\n type=\"radio\"\n id={id}\n name={name}\n className={classnames(\n styles.radioStyleOverride,\n styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n {\n [styles.smOverride]: size === \"sm\",\n [styles.mdOverride]: size === \"md\",\n },\n )}\n checked={checked}\n onChange={onChange}\n disabled={disabled}\n value={value}\n onFocus={() => {\n setIsFocused(true);\n }}\n onBlur={() => {\n setIsFocused(false);\n }}\n />\n {label && (\n <Typography\n size={size === \"md\" ? 200 : 100}\n color={error ? \"destructive-primary\" : \"gray900\"}\n >\n {label}\n </Typography>\n )}\n </label>\n );\n};\n\nexport default RadioButton;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/RadioButton/RadioButton.module.css\"; export default {\"radioBaseContainer\":\"_radioBaseContainer_6h2zg_1\",\"disabled\":\"_disabled_6h2zg_9\",\"cursorDisabled\":\"_cursorDisabled_6h2zg_13\",\"cursorEnabled\":\"_cursorEnabled_6h2zg_17\",\"smBase\":\"_smBase_6h2zg_21\",\"mdBase\":\"_mdBase_6h2zg_25\",\"radioStyleOverride\":\"_radioStyleOverride_6h2zg_29\",\"smOverride\":\"_smOverride_6h2zg_34\",\"mdOverride\":\"_mdOverride_6h2zg_39\",\"background\":\"_background_6h2zg_44\",\"sm\":\"_sm_6h2zg_21\",\"md\":\"_md_6h2zg_25\",\"neutralBorder\":\"_neutralBorder_6h2zg_61\",\"smCheckedBorder\":\"_smCheckedBorder_6h2zg_65\",\"mdCheckedBorder\":\"_mdCheckedBorder_6h2zg_69\",\"errorBorderColor\":\"_errorBorderColor_6h2zg_73\",\"borderColor\":\"_borderColor_6h2zg_77\"}"],"mappings":"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","names":[]}
@@ -1,7 +1,7 @@
1
1
  "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
2
2
 
3
3
 
4
- var _JT7PXHSXcjs = require('./JT7PXHSX.cjs');
4
+ var _SDTI2RBAcjs = require('./SDTI2RBA.cjs');
5
5
 
6
6
 
7
7
  var _RYUXG4AScjs = require('./RYUXG4AS.cjs');
@@ -16,7 +16,7 @@ var _jsxruntime = require('react/jsx-runtime');
16
16
  var RichSelectChip_default = _react.forwardRef.call(void 0,
17
17
  function RichSelectChip(props, ref) {
18
18
  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _RYUXG4AScjs.RichSelectItem_default, _X2SDR4SDcjs.__spreadProps.call(void 0, _X2SDR4SDcjs.__spreadValues.call(void 0, {}, props), { ref, children: ({ isSelected, isFocusVisible, isDisabled }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
19
- _JT7PXHSXcjs.Chip_default,
19
+ _SDTI2RBAcjs.Chip_default,
20
20
  {
21
21
  text: props.label,
22
22
  selected: isSelected,
@@ -31,4 +31,4 @@ var RichSelectChip_default = _react.forwardRef.call(void 0,
31
31
 
32
32
 
33
33
  exports.RichSelectChip_default = RichSelectChip_default;
34
- //# sourceMappingURL=ATC5Z75T.cjs.map
34
+ //# sourceMappingURL=QTGWI2GM.cjs.map
@@ -44,4 +44,4 @@ export {
44
44
  useAvatarGroup,
45
45
  AvatarGroup
46
46
  };
47
- //# sourceMappingURL=ZQYWEWWE.js.map
47
+ //# sourceMappingURL=R4TBYKLS.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import {\n type ReactNode,\n createContext,\n useContext,\n type ReactElement,\n} from \"react\";\nimport Box from \"../Box/Box\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\n\ntype Size =\n | \"xs\"\n | \"sm\"\n | \"md\"\n | \"lg\"\n /* `xl` is deprecated and mapped to `lg` in Cambio */\n | \"xl\";\ntype Orientation = \"standard\" | \"reverse\";\n\ntype AvatarGroupContextType = {\n size: Size;\n orientation: Orientation;\n};\n\nconst AvatarGroupContext = createContext<AvatarGroupContextType | null>(null);\n\nexport function useAvatarGroup(): AvatarGroupContextType | null {\n const context = useContext(AvatarGroupContext);\n return !context ? null : context;\n}\n\n/**\n * [AvatarGroup](https://cambly-syntax.vercel.app/?path=/docs/components-avatargroup--docs) is a stack of avatars to represent a group of people\n *\n * Pass in Avatar components as children to the AvatarGroup component. The size prop that is passed into the AvatarGroup component will override Avatar's size prop..\n *\n * Usage:\n *\n * <AvatarGroup size=\"xl\" orientation=\"standard\">\n * <Avatar accessibilityLabel=\"Joseph Liotta\" src=\"image.png\" />\n * <Avatar accessibilityLabel=\"Joseph Liotta\" src=\"image.png\" />\n * <Avatar accessibilityLabel=\"Joseph Liotta\" src=\"image.png\" />\n * </AvatarGroup>\n *\n */\nexport default function AvatarGroup({\n size = \"md\",\n orientation = \"standard\",\n children,\n}: {\n /**\n * Size of the avatars in the AvatarGroup.\n *\n * Classic:\n * * `sm`: 24px\n * * `md`: 40px\n * * `lg`: 72px\n * * `xl`: 128px\n *\n * Cambio:\n * * `xs`: 24px (Cambio only)\n * * `sm`: 32px\n * * `md`: 48px\n * * `lg`: 64px\n * * `xl`: 64px (deprecated, maps to `lg` in Cambio)\n *\n * @defaultValue `md`\n */\n size?: Size;\n /**\n * Orientation of the AvatarGroup.\n * This describes the order of rendering of the Avatar components.\n * Standard renders the Avatar components with the right component on top.\n * Reverse renders the Avatar components with the left component on top.\n *\n * @defaultValue `standard`\n */\n orientation?: Orientation;\n /**\n * Avatars to be rendered within the AvatarGroup.\n */\n children: ReactNode;\n}): ReactElement {\n const { themeName } = useTheme();\n const parsedSize = themeName === \"cambio\" && size === \"xl\" ? \"lg\" : size;\n\n return (\n <AvatarGroupContext.Provider value={{ size: parsedSize, orientation }}>\n <Box\n display=\"flex\"\n justifyContent={orientation === \"standard\" ? \"start\" : \"end\"}\n dangerouslySetInlineStyle={{\n __style: {\n flexDirection: orientation === \"standard\" ? \"row\" : \"row-reverse\",\n },\n }}\n >\n {children}\n </Box>\n </AvatarGroupContext.Provider>\n );\n}\n\nAvatarGroup.displayName = \"AvatarGroup\";\n"],"mappings":";;;;;;;;;AAAA;AAAA,EAEE;AAAA,EACA;AAAA,OAEK;AAkFD;AAhEN,IAAM,qBAAqB,cAA6C,IAAI;AAErE,SAAS,iBAAgD;AAC9D,QAAM,UAAU,WAAW,kBAAkB;AAC7C,SAAO,CAAC,UAAU,OAAO;AAC3B;AAgBe,SAAR,YAA6B;AAAA,EAClC,OAAO;AAAA,EACP,cAAc;AAAA,EACd;AACF,GAiCiB;AACf,QAAM,EAAE,UAAU,IAAI,SAAS;AAC/B,QAAM,aAAa,cAAc,YAAY,SAAS,OAAO,OAAO;AAEpE,SACE,oBAAC,mBAAmB,UAAnB,EAA4B,OAAO,EAAE,MAAM,YAAY,YAAY,GAClE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,gBAAgB,gBAAgB,aAAa,UAAU;AAAA,MACvD,2BAA2B;AAAA,QACzB,SAAS;AAAA,UACP,eAAe,gBAAgB,aAAa,QAAQ;AAAA,QACtD;AAAA,MACF;AAAA,MAEC;AAAA;AAAA,EACH,GACF;AAEJ;AAEA,YAAY,cAAc;","names":[]}
@@ -1,7 +1,7 @@
1
1
  "use client"
2
2
  import {
3
3
  Typography_default
4
- } from "./M3US55ZU.js";
4
+ } from "./2RIIE7CU.js";
5
5
  import {
6
6
  useTheme
7
7
  } from "./ZSHAHV4F.js";
@@ -52,4 +52,4 @@ var Heading_default = Heading;
52
52
  export {
53
53
  Heading_default
54
54
  };
55
- //# sourceMappingURL=YPOSL2OK.js.map
55
+ //# sourceMappingURL=S2VZE6RS.js.map
@@ -4,7 +4,7 @@
4
4
  var _SNYEHXDAcjs = require('./SNYEHXDA.cjs');
5
5
 
6
6
 
7
- var _JEHUXNNKcjs = require('./JEHUXNNK.cjs');
7
+ var _OWLMHTW5cjs = require('./OWLMHTW5.cjs');
8
8
 
9
9
 
10
10
  var _TBQR2FPScjs = require('./TBQR2FPS.cjs');
@@ -93,10 +93,11 @@ var Chip = _react.forwardRef.call(void 0,
93
93
  children: [
94
94
  Icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Icon, { className: iconStyles }),
95
95
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _SNYEHXDAcjs.Box_default, { paddingX: Icon ? 1 : 0, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
96
- _JEHUXNNKcjs.Typography_default,
96
+ _OWLMHTW5cjs.Typography_default,
97
97
  {
98
98
  size: themeName === "classic" ? typographySize[transformedSize] : 100,
99
99
  color,
100
+ weight: themeName === "classic" ? "regular" : "medium",
100
101
  children: text
101
102
  }
102
103
  ) })
@@ -111,4 +112,4 @@ var Chip_default = Chip;
111
112
 
112
113
 
113
114
  exports.Chip_default = Chip_default;
114
- //# sourceMappingURL=JT7PXHSX.cjs.map
115
+ //# sourceMappingURL=SDTI2RBA.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/Chip/Chip.tsx","css-module:./Chip.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,SAAgB,YAAY,eAAe;AAC3C,OAAO,gBAAgB;;;ACDiE,IAAO,sBAAQ,EAAC,QAAO,iBAAgB,eAAc,yBAAwB,cAAa,wBAAuB,YAAW,sBAAqB,kBAAiB,4BAA2B,gBAAe,0BAAyB,wBAAuB,kCAAiC,wCAAuC,kDAAiD,sBAAqB,gCAA+B,sCAAqC,gDAA+C,QAAO,kBAAiB,gBAAe,0BAAyB,MAAK,gBAAe,MAAK,gBAAe,cAAa,uBAAsB;;;ADiJ1tB,SASW,KATX;AAzIN,SAAS,gBAAgB;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AACF,GAIwB;AACtB,MAAI,cAAc,YAAY,OAAO,kBAAkB;AACrD,QAAI,UAAU;AACZ,aAAO;AAAA,IACT,OAAO;AACL,aAAO;AAAA,IACT;AAAA,EACF,OAAO;AACL,QAAI,UAAU;AACZ,aAAO;AAAA,IACT,OAAO;AACL,aAAO;AAAA,IACT;AAAA,EACF;AACF;AAwDA,IAAM,OAAO;AAAA,EACX,CACE;AAAA,IACE,UAAU,eAAe;AAAA,IACzB,WAAW;AAAA,IACX,eAAe;AAAA,IACf,OAAO;AAAA,IACP;AAAA,IACA,KAAK;AAAA,IACL;AAAA,IACA,MAAM;AAAA,IACN;AAAA,EACF,GACA,QACG;AACH,UAAM,EAAE,UAAU,IAAI,SAAS;AAC/B,UAAM,kBAAkB,cAAc,WAAW,OAAO;AACxD,UAAM,aAAa,cAAc;AACjC,UAAM,WAAW,CAAC,cAAc;AAEhC,UAAM,0BACJ,OAAO,oBACH,oBAAO,qBACP,oBAAO;AAEb,UAAM,4BACJ,OAAO,oBACH,oBAAO,uBACP,oBAAO;AAEb,UAAM,aAAa;AAAA,MACjB,oBAAO;AAAA,MACP,cAAc,YAAY,oBAAO,cAAc,oBAAO;AAAA,MACtD,oBAAO,eAAe;AAAA,MACtB;AAAA,QACE,CAAC,cAAc,YACX,oBAAO,eACP,uBAAuB,GAAG;AAAA,QAC9B,CAAC,cAAc,YACX,oBAAO,iBACP,yBAAyB,GAAG,CAAC;AAAA,QACjC,CAAC,oBAAO,QAAQ,GAAG;AAAA,QACnB,CAAC,oBAAO,UAAU,GAAG;AAAA,MACvB;AAAA,IACF;AACA,UAAM,aAAa,WAAW,oBAAO,MAAM;AAAA,MACzC,CAAC,oBAAO,YAAY,GAAG;AAAA,IACzB,CAAC;AACD,UAAM,iBAAiB;AAAA,MACrB,CAAC,IAAI,GAAG;AAAA,MACR,CAAC,IAAI,GAAG;AAAA,IACV;AAEA,UAAM,QAAQ;AAAA,MACZ,MAAM,gBAAgB,EAAE,WAAW,UAAU,GAAG,CAAC;AAAA,MACjD,CAAC,WAAW,UAAU,EAAE;AAAA,IAC1B;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,QACX;AAAA,QACA,eAAa;AAAA,QACb;AAAA,QACA,MAAK;AAAA,QACL,gBAAc;AAAA,QACd,SAAS;AAAA,QAER;AAAA,kBAAQ,oBAAC,QAAK,WAAW,YAAY;AAAA,UACtC,oBAAC,eAAI,UAAU,OAAO,IAAI,GACxB;AAAA,YAAC;AAAA;AAAA,cACC,MACE,cAAc,YAAY,eAAe,eAAe,IAAI;AAAA,cAE9D;AAAA,cACA,QAAQ,cAAc,YAAY,YAAY;AAAA,cAE7C;AAAA;AAAA,UACH,GACF;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,KAAK,cAAc;AAEnB,IAAO,eAAQ","sourcesContent":["import React, { forwardRef, useMemo } from \"react\";\nimport classnames from \"classnames\";\nimport Typography from \"../Typography/Typography\";\nimport Box from \"../Box/Box\";\nimport styles from \"./Chip.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\n\nfunction typographyColor({\n themeName,\n selected,\n on,\n}: {\n themeName: \"cambio\" | \"classic\";\n selected: boolean;\n on: \"lightBackground\" | \"darkBackground\";\n}): \"white\" | \"gray900\" {\n if (themeName === \"cambio\" && on === \"darkBackground\") {\n if (selected) {\n return \"gray900\";\n } else {\n return \"white\";\n }\n } else {\n if (selected) {\n return \"white\";\n } else {\n return \"gray900\";\n }\n }\n}\n\ntype ChipProps = {\n /**\n * If true, the chip will be disabled.\n */\n disabled?: boolean;\n /**\n * Sets the initial status of this chip component.\n * * `true` will display a grey chip.\n * * `false` will display a premium800 color chip.\n *\n * @defaultValue \"false\"\n */\n selected?: boolean;\n /**\n * Test id for the button\n */\n \"data-testid\"?: string;\n /**\n * Size of the chip.\n *\n * Classic:\n * * `sm`: 32px\n * * `lg`: 48px\n *\n * Cambio:\n * * `sm`: 32px\n *\n * @defaultValue sm\n */\n size?: \"sm\" | \"lg\";\n /**\n * The text to be displayed on the chip\n */\n text: string;\n /**\n * Indicate whether the badge renders on a light or dark background. Changes the color of the chip (Cambio only)\n *\n * @defaulValue `lightBackground`\n */\n on?: \"lightBackground\" | \"darkBackground\";\n /**\n * The callback to be called when the chip is clicked\n */\n onChange: React.MouseEventHandler<HTMLButtonElement>;\n /**\n * The icon to be displayed.\n */\n icon?: React.ComponentType<{ className?: string }>;\n /** forces focus ring styling */\n dangerouslyForceFocusStyles?: boolean;\n};\n/**\n * [Chip](https://cambly-syntax.vercel.app/?path=/docs/components-chip--docs) is used to show status (selected/not selected) like a toggle button.\n */\nconst Chip = forwardRef<HTMLButtonElement, ChipProps>(\n (\n {\n disabled: disabledProp = false,\n selected = false,\n \"data-testid\": dataTestId,\n size = \"sm\",\n text,\n on = \"lightBackground\",\n onChange,\n icon: Icon,\n dangerouslyForceFocusStyles,\n }: ChipProps,\n ref,\n ) => {\n const { themeName } = useTheme();\n const transformedSize = themeName === \"cambio\" ? \"sm\" : size;\n const isHydrated = useIsHydrated();\n const disabled = !isHydrated || disabledProp;\n\n const selectedChipCambioStyle =\n on === \"lightBackground\"\n ? styles.selectedChipCambio\n : styles.selectedChipCambioOnDarkBackground;\n\n const deselectedChipCambioStyle =\n on === \"lightBackground\"\n ? styles.deselectedChipCambio\n : styles.deselectedChipCambioOnDarkBackground;\n\n const chipStyles = classnames(\n styles.chip,\n themeName === \"classic\" ? styles.chipClassic : styles.chipCambio,\n styles[transformedSize],\n {\n [themeName === \"classic\"\n ? styles.selectedChip\n : selectedChipCambioStyle]: selected,\n [themeName === \"classic\"\n ? styles.deselectedChip\n : deselectedChipCambioStyle]: !selected,\n [styles.disabled]: disabled,\n [styles.forceFocus]: dangerouslyForceFocusStyles,\n },\n );\n const iconStyles = classnames(styles.icon, {\n [styles.selectedIcon]: selected,\n });\n const typographySize = {\n [\"sm\"]: 200,\n [\"lg\"]: 300,\n } as const;\n\n const color = useMemo(\n () => typographyColor({ themeName, selected, on }),\n [themeName, selected, on],\n );\n\n return (\n <button\n className={chipStyles}\n disabled={disabled}\n data-testid={dataTestId}\n ref={ref}\n type=\"button\"\n aria-pressed={selected}\n onClick={onChange}\n >\n {Icon && <Icon className={iconStyles} />}\n <Box paddingX={Icon ? 1 : 0}>\n <Typography\n size={\n themeName === \"classic\" ? typographySize[transformedSize] : 100\n }\n color={color}\n weight={themeName === \"classic\" ? \"regular\" : \"medium\"}\n >\n {text}\n </Typography>\n </Box>\n </button>\n );\n },\n);\n\nChip.displayName = \"Chip\";\n\nexport default Chip;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Chip/Chip.module.css\"; export default {\"chip\":\"_chip_1ndh3_1\",\"chipClassic\":\"_chipClassic_1ndh3_10\",\"chipCambio\":\"_chipCambio_1ndh3_15\",\"disabled\":\"_disabled_1ndh3_20\",\"deselectedChip\":\"_deselectedChip_1ndh3_25\",\"selectedChip\":\"_selectedChip_1ndh3_29\",\"deselectedChipCambio\":\"_deselectedChipCambio_1ndh3_34\",\"deselectedChipCambioOnDarkBackground\":\"_deselectedChipCambioOnDarkBackground_1ndh3_38\",\"selectedChipCambio\":\"_selectedChipCambio_1ndh3_42\",\"selectedChipCambioOnDarkBackground\":\"_selectedChipCambioOnDarkBackground_1ndh3_46\",\"icon\":\"_icon_1ndh3_50\",\"selectedIcon\":\"_selectedIcon_1ndh3_58\",\"sm\":\"_sm_1ndh3_62\",\"lg\":\"_lg_1ndh3_68\",\"forceFocus\":\"_forceFocus_1ndh3_75\"}"]}
@@ -1,7 +1,7 @@
1
1
  "use client"
2
2
  import {
3
3
  Heading_default
4
- } from "./YPOSL2OK.js";
4
+ } from "./S2VZE6RS.js";
5
5
  import {
6
6
  StopScroll
7
7
  } from "./QQT35OLE.js";
@@ -85,8 +85,10 @@ function Modal({
85
85
  rounding: themeName === "classic" ? "xl" : "md",
86
86
  display: "flex",
87
87
  direction: "column",
88
+ marginStart: 4,
89
+ marginEnd: 4,
88
90
  minWidth: 240,
89
- maxWidth: sizeWidth[size],
91
+ maxWidth: sizeWidth[themeName === "classic" ? size : "lg"],
90
92
  width: "100%",
91
93
  dangerouslySetInlineStyle: { __style: { overflow: "hidden" } },
92
94
  children: [
@@ -129,7 +131,7 @@ function Modal({
129
131
  Box_default,
130
132
  {
131
133
  display: "flex",
132
- gap: 3,
134
+ gap: themeName === "classic" ? 3 : 4,
133
135
  direction: "column",
134
136
  padding: themeName === "classic" ? 9 : 6,
135
137
  children: [
@@ -137,7 +139,7 @@ function Modal({
137
139
  Heading_default,
138
140
  {
139
141
  as: "h1",
140
- size: themeName === "classic" ? 500 : 400,
142
+ size: themeName === "classic" ? 500 : 600,
141
143
  fontStyle: themeName === "classic" ? "sans-serif" : "serif",
142
144
  children: header
143
145
  }
@@ -149,6 +151,7 @@ function Modal({
149
151
  display: "flex",
150
152
  direction: "column",
151
153
  gap: 3,
154
+ marginTop: themeName === "classic" ? 0 : 2,
152
155
  smDirection: "row",
153
156
  smJustifyContent: "end",
154
157
  lgDirection: "row",
@@ -170,4 +173,4 @@ Modal.displayName = "Modal";
170
173
  export {
171
174
  Modal
172
175
  };
173
- //# sourceMappingURL=TPT2EGAE.js.map
176
+ //# sourceMappingURL=SEFHKYBL.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/Modal/Modal.tsx","css-module:./Modal.module.css#css-module"],"sourcesContent":["import { type ReactElement } from \"react\";\nimport classnames from \"classnames\";\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 { useTheme } from \"../ThemeProvider/ThemeProvider\";\nimport IconButton from \"../IconButton/IconButton\";\n\nfunction XIcon({ color = \"#000\" }: { color?: string }) {\n return (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" fill={color}>\n <path\n fill=\"inherit\"\n d=\"M11.25.758a.83.83 0 0 0-1.175 0L6 4.825 1.925.75A.83.83 0 1 0 .75 1.925L4.825 6 .75 10.075a.83.83 0 1 0 1.175 1.175L6 7.175l4.075 4.075a.83.83 0 1 0 1.175-1.175L7.175 6l4.075-4.075a.835.835 0 0 0 0-1.167Z\"\n />\n </svg>\n );\n}\n\nfunction XIconCambio({ 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// Note: Only sm + lg size currently. design thinks there should only be two sizes.\n// If there IS a md size at some point, we should use the \"size\" const.\nconst sizeWidth = {\n sm: 400,\n lg: 600,\n} as const;\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 size = \"sm\",\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 size should be 400w x 200h.\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 size of the card\n *\n * Classic:\n * * `sm`: 400px (Classic only)\n * * `lg`: 600px\n *\n * Cambio:\n * * `lg`: 600px\n *\n *\n * @defaultValue sm\n */\n size?: keyof typeof sizeWidth;\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 const { themeName } = useTheme();\n return (\n <Layer zIndex={zIndex}>\n <StopScroll>\n <FocusTrap>\n <div\n className={classnames(\n styles.backdrop,\n themeName === \"classic\"\n ? styles.backdropClassic\n : styles.backdropCambio,\n )}\n role=\"presentation\"\n onClick={(e) => e.target === e.currentTarget && onDismiss()}\n onKeyDown={(e) => e.key === \"Escape\" && onDismiss()}\n >\n <Box\n data-testid={dataTestId}\n backgroundColor=\"white\"\n rounding={themeName === \"classic\" ? \"xl\" : \"md\"}\n display=\"flex\"\n direction=\"column\"\n marginStart={4}\n marginEnd={4}\n minWidth={240}\n maxWidth={sizeWidth[themeName === \"classic\" ? size : \"lg\"]}\n width=\"100%\"\n dangerouslySetInlineStyle={{ __style: { overflow: \"hidden\" } }}\n >\n <Box position=\"relative\">\n {themeName === \"classic\" ? (\n <button\n aria-label={accessibilityCloseLabel}\n type=\"button\"\n className={classnames(\n styles.closeButton,\n styles.closeButtonClassic,\n {\n [styles.closeButtonWithImage]: !!image,\n },\n )}\n onClick={onDismiss}\n >\n <XIcon color={image ? \"#fff\" : \"#000\"} />\n </button>\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 size=\"sm\"\n icon={XIconCambio}\n />\n </Box>\n )}\n </Box>\n {image && <Box maxHeight={200}>{image}</Box>}\n <Box\n display=\"flex\"\n gap={themeName === \"classic\" ? 3 : 4}\n direction=\"column\"\n padding={themeName === \"classic\" ? 9 : 6}\n >\n <Heading\n as=\"h1\"\n size={themeName === \"classic\" ? 500 : 600}\n fontStyle={themeName === \"classic\" ? \"sans-serif\" : \"serif\"}\n >\n {header}\n </Heading>\n <Box marginBottom={themeName === \"classic\" ? 4 : 0}>\n {children}\n </Box>\n {footer && (\n <Box\n display=\"flex\"\n direction=\"column\"\n gap={3}\n marginTop={themeName === \"classic\" ? 0 : 2}\n smDirection=\"row\"\n smJustifyContent=\"end\"\n lgDirection=\"row\"\n lgJustifyContent=\"end\"\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","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Modal/Modal.module.css\"; export default {\"backdrop\":\"_backdrop_1w5vm_1\",\"backdropClassic\":\"_backdropClassic_1w5vm_11\",\"backdropCambio\":\"_backdropCambio_1w5vm_15\",\"closeButton\":\"_closeButton_1w5vm_19\",\"closeButtonClassic\":\"_closeButtonClassic_1w5vm_34\",\"closeButtonWithImage\":\"_closeButtonWithImage_1w5vm_46\",\"closeButtonWithImageCambio\":\"_closeButtonWithImageCambio_1w5vm_50\"}"],"mappings":"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","names":[]}
@@ -22,7 +22,7 @@ var _HCM63U3Jcjs = require('./HCM63U3J.cjs');
22
22
  var _QWMAWIWIcjs = require('./QWMAWIWI.cjs');
23
23
 
24
24
 
25
- var _JEHUXNNKcjs = require('./JEHUXNNK.cjs');
25
+ var _OWLMHTW5cjs = require('./OWLMHTW5.cjs');
26
26
 
27
27
 
28
28
  var _TBQR2FPScjs = require('./TBQR2FPS.cjs');
@@ -89,7 +89,7 @@ var LinkButton = _react.forwardRef.call(void 0,
89
89
  }
90
90
  ),
91
91
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
92
- _JEHUXNNKcjs.Typography_default,
92
+ _OWLMHTW5cjs.Typography_default,
93
93
  {
94
94
  size: themeName === "classic" ? _5JUNB754cjs.textVariant_default[size] : _5JUNB754cjs.textVariant_default[size],
95
95
  children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
@@ -123,4 +123,4 @@ var LinkButton_default = LinkButton;
123
123
 
124
124
 
125
125
  exports.LinkButton_default = LinkButton_default;
126
- //# sourceMappingURL=PZFK4YV7.cjs.map
126
+ //# sourceMappingURL=SXABWYV4.cjs.map
@@ -4,19 +4,19 @@
4
4
  var _VBQTLO2Pcjs = require('./VBQTLO2P.cjs');
5
5
 
6
6
 
7
- var _EBKE2QMGcjs = require('./EBKE2QMG.cjs');
7
+ var _4U2YGWTWcjs = require('./4U2YGWTW.cjs');
8
8
 
9
9
 
10
10
  var _UD4IRT6Ucjs = require('./UD4IRT6U.cjs');
11
11
 
12
12
 
13
- var _ATC5Z75Tcjs = require('./ATC5Z75T.cjs');
13
+ var _QTGWI2GMcjs = require('./QTGWI2GM.cjs');
14
14
 
15
15
 
16
- var _GOMOMWQOcjs = require('./GOMOMWQO.cjs');
16
+ var _Q3I37NS7cjs = require('./Q3I37NS7.cjs');
17
17
 
18
18
 
19
- var _FSIIRTOIcjs = require('./FSIIRTOI.cjs');
19
+ var _VW7HLULPcjs = require('./VW7HLULP.cjs');
20
20
 
21
21
 
22
22
 
@@ -169,7 +169,7 @@ var RichSelectBox = _react.forwardRef.call(void 0,
169
169
  justifyContent: "end",
170
170
  children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _VBQTLO2Pcjs.ButtonGroup_default, { orientation: "horizontal", children: [
171
171
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
172
- _EBKE2QMGcjs.Button_default,
172
+ _4U2YGWTWcjs.Button_default,
173
173
  {
174
174
  onClick: clearChanges,
175
175
  color: "secondary",
@@ -179,7 +179,7 @@ var RichSelectBox = _react.forwardRef.call(void 0,
179
179
  }
180
180
  ),
181
181
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
182
- _EBKE2QMGcjs.Button_default,
182
+ _4U2YGWTWcjs.Button_default,
183
183
  {
184
184
  onClick: saveChanges,
185
185
  text: primaryButtonText,
@@ -198,9 +198,9 @@ var RichSelectBox = _react.forwardRef.call(void 0,
198
198
  }
199
199
  );
200
200
  var RichSelectBox_default = Object.assign(RichSelectBox, {
201
- Section: _GOMOMWQOcjs.RichSelectSection_default,
202
- Chip: _ATC5Z75Tcjs.RichSelectChip_default,
203
- RadioButton: _FSIIRTOIcjs.RichSelectRadioButton_default
201
+ Section: _Q3I37NS7cjs.RichSelectSection_default,
202
+ Chip: _QTGWI2GMcjs.RichSelectChip_default,
203
+ RadioButton: _VW7HLULPcjs.RichSelectRadioButton_default
204
204
  });
205
205
 
206
206
 
@@ -208,4 +208,4 @@ var RichSelectBox_default = Object.assign(RichSelectBox, {
208
208
 
209
209
 
210
210
  exports.convertSelection = convertSelection; exports.RichSelectBoxContext = RichSelectBoxContext; exports.RichSelectBox_default = RichSelectBox_default;
211
- //# sourceMappingURL=DN43TX54.cjs.map
211
+ //# sourceMappingURL=T75E3KPP.cjs.map
@@ -0,0 +1,104 @@
1
+ "use client"
2
+ import {
3
+ Box_default
4
+ } from "./KU5UT5RY.js";
5
+ import {
6
+ Typography_default
7
+ } from "./2RIIE7CU.js";
8
+ import {
9
+ useTheme
10
+ } from "./ZSHAHV4F.js";
11
+ import {
12
+ useIsHydrated
13
+ } from "./JB65NEXK.js";
14
+
15
+ // src/TextArea/TextArea.tsx
16
+ import { useId, forwardRef } from "react";
17
+
18
+ // css-module:./TextArea.module.css#css-module
19
+ var TextArea_module_default = { "textarea": "_textarea_1owb5_1", "sm": "_sm_1owb5_5", "md": "_md_1owb5_10", "lg": "_lg_1owb5_15", "textareaCambio": "_textareaCambio_1owb5_20" };
20
+
21
+ // css-module:../TextField/TextField.module.css#css-module
22
+ var TextField_module_default = { "textfield": "_textfield_kbdbw_1", "textfieldClassic": "_textfieldClassic_kbdbw_10", "textfieldCambio": "_textfieldCambio_kbdbw_14", "label": "_label_kbdbw_29", "sm": "_sm_kbdbw_33", "mdCambio": "_mdCambio_kbdbw_40", "heightCambio": "_heightCambio_kbdbw_44", "smHeight": "_smHeight_kbdbw_48", "md": "_md_kbdbw_40", "mdHeight": "_mdHeight_kbdbw_59", "lg": "_lg_kbdbw_63", "lgHeight": "_lgHeight_kbdbw_70", "inputError": "_inputError_kbdbw_74", "inputErrorCambio": "_inputErrorCambio_kbdbw_84" };
23
+
24
+ // src/TextArea/TextArea.tsx
25
+ import classNames from "classnames";
26
+ import { jsx, jsxs } from "react/jsx-runtime";
27
+ var TextArea = forwardRef(
28
+ function TextArea2({
29
+ "data-testid": dataTestId,
30
+ disabled: disabledProp = false,
31
+ errorText = "",
32
+ helperText = "",
33
+ id,
34
+ label,
35
+ maxLength = 1024,
36
+ placeholder = "",
37
+ rows = 3,
38
+ size = "md",
39
+ value = "",
40
+ onChange
41
+ }, forwardedRef) {
42
+ const isHydrated = useIsHydrated();
43
+ const disabled = !isHydrated || disabledProp;
44
+ const reactId = useId();
45
+ const { themeName } = useTheme();
46
+ const inputId = id != null ? id : reactId;
47
+ return /* @__PURE__ */ jsxs(
48
+ Box_default,
49
+ {
50
+ display: "flex",
51
+ direction: "column",
52
+ gap: 2,
53
+ width: "100%",
54
+ dangerouslySetInlineStyle: {
55
+ __style: {
56
+ opacity: disabled ? 0.5 : 1
57
+ }
58
+ },
59
+ position: themeName === "cambio" ? "relative" : void 0,
60
+ children: [
61
+ /* @__PURE__ */ jsx("label", { className: TextField_module_default.label, htmlFor: inputId, children: /* @__PURE__ */ jsx(Box_default, { paddingX: 1, children: /* @__PURE__ */ jsx(Typography_default, { size: 100, color: "gray700", children: label }) }) }),
62
+ /* @__PURE__ */ jsx(Typography_default, { size: themeName === "cambio" ? 100 : 200, children: /* @__PURE__ */ jsx(
63
+ "textarea",
64
+ {
65
+ "data-testid": dataTestId,
66
+ ref: forwardedRef,
67
+ className: classNames(
68
+ TextField_module_default.textfield,
69
+ themeName === "classic" ? TextField_module_default.textfieldClassic : TextField_module_default.textfieldCambio,
70
+ themeName === "classic" && TextField_module_default[size],
71
+ themeName === "classic" && TextArea_module_default[size],
72
+ themeName === "classic" ? TextArea_module_default.textarea : TextArea_module_default.textareaCambio,
73
+ {
74
+ [themeName === "classic" ? TextField_module_default.inputError : TextField_module_default.inputErrorCambio]: errorText
75
+ }
76
+ ),
77
+ id: inputId,
78
+ placeholder,
79
+ maxLength,
80
+ onChange,
81
+ rows,
82
+ value,
83
+ disabled
84
+ }
85
+ ) }),
86
+ (helperText || errorText) && /* @__PURE__ */ jsx(Box_default, { paddingX: 1, children: /* @__PURE__ */ jsx(
87
+ Typography_default,
88
+ {
89
+ size: 100,
90
+ color: errorText ? "destructive-primary" : "gray700",
91
+ children: errorText || helperText
92
+ }
93
+ ) })
94
+ ]
95
+ }
96
+ );
97
+ }
98
+ );
99
+ var TextArea_default = TextArea;
100
+
101
+ export {
102
+ TextArea_default
103
+ };
104
+ //# sourceMappingURL=TLVOHYPL.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/TextArea/TextArea.tsx","css-module:./TextArea.module.css#css-module","css-module:../TextField/TextField.module.css#css-module"],"sourcesContent":["import Box from \"../Box/Box\";\nimport Typography from \"../Typography/Typography\";\nimport React, { type ReactElement, useId, forwardRef } from \"react\";\nimport styles from \"./TextArea.module.css\";\nimport textFieldStyles from \"../TextField/TextField.module.css\";\nimport classNames from \"classnames\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\n\ntype TextAreaProps = {\n /**\n * A data-testid to make querying for the TextArea easier.\n */\n \"data-testid\"?: string;\n /**\n * If true, the TextArea will be disabled.\n */\n disabled?: boolean;\n /**\n * Text shown below TextArea if there is an input error.\n */\n errorText?: string;\n /**\n * Informative helper text shown below TextArea\n */\n helperText?: string;\n /**\n * TextField id, if not provided, a unique id will be generated\n */\n id?: string;\n /**\n * TextArea visible label\n */\n label: string;\n /**\n * Maximum number of characters allowed in the TextArea\n */\n maxLength?: number;\n /**\n * Callback fired when the value is changed.\n */\n onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;\n /**\n * Placeholder text to display when TextArea is empty\n */\n placeholder?: string;\n /**\n * Size of the TextArea. Defines the font size and padding.\n *\n * Cambio only supports `md`\n *\n * @defaultValue \"md\"\n */\n size?: \"sm\" | \"md\" | \"lg\";\n /**\n * Number of rows to display\n */\n rows?: number;\n /**\n * Value of the TextArea\n */\n value: string;\n};\n\n/**\n * [TextArea](https://cambly-syntax.vercel.app/?path=/docs/components-textarea--docs) allows users to enter multiple lines of text.\n */\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n function TextArea(\n {\n \"data-testid\": dataTestId,\n disabled: disabledProp = false,\n errorText = \"\",\n helperText = \"\",\n id,\n label,\n maxLength = 1024,\n placeholder = \"\",\n rows = 3,\n size = \"md\",\n value = \"\",\n onChange,\n }: TextAreaProps,\n forwardedRef,\n ): ReactElement {\n const isHydrated = useIsHydrated();\n const disabled = !isHydrated || disabledProp;\n const reactId = useId();\n const { themeName } = useTheme();\n const inputId = id ?? reactId;\n\n return (\n <Box\n display=\"flex\"\n direction=\"column\"\n gap={2}\n width=\"100%\"\n dangerouslySetInlineStyle={{\n __style: {\n opacity: disabled ? 0.5 : 1,\n },\n }}\n position={themeName === \"cambio\" ? \"relative\" : undefined}\n >\n <label className={textFieldStyles.label} htmlFor={inputId}>\n <Box paddingX={1}>\n <Typography size={100} color=\"gray700\">\n {label}\n </Typography>\n </Box>\n </label>\n <Typography size={themeName === \"cambio\" ? 100 : 200}>\n <textarea\n data-testid={dataTestId}\n ref={forwardedRef}\n className={classNames(\n textFieldStyles.textfield,\n themeName === \"classic\"\n ? textFieldStyles.textfieldClassic\n : textFieldStyles.textfieldCambio,\n themeName === \"classic\" && textFieldStyles[size],\n themeName === \"classic\" && styles[size],\n themeName === \"classic\" ? styles.textarea : styles.textareaCambio,\n {\n [themeName === \"classic\"\n ? textFieldStyles.inputError\n : textFieldStyles.inputErrorCambio]: errorText,\n },\n )}\n id={inputId}\n placeholder={placeholder}\n maxLength={maxLength}\n onChange={onChange}\n rows={rows}\n value={value}\n disabled={disabled}\n />\n </Typography>\n {(helperText || errorText) && (\n <Box paddingX={1}>\n <Typography\n size={100}\n color={errorText ? \"destructive-primary\" : \"gray700\"}\n >\n {errorText || helperText}\n </Typography>\n </Box>\n )}\n </Box>\n );\n },\n);\n\nexport default TextArea;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/TextArea/TextArea.module.css\"; export default {\"textarea\":\"_textarea_1owb5_1\",\"sm\":\"_sm_1owb5_5\",\"md\":\"_md_1owb5_10\",\"lg\":\"_lg_1owb5_15\",\"textareaCambio\":\"_textareaCambio_1owb5_20\"}","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/TextField/TextField.module.css\"; export default {\"textfield\":\"_textfield_kbdbw_1\",\"textfieldClassic\":\"_textfieldClassic_kbdbw_10\",\"textfieldCambio\":\"_textfieldCambio_kbdbw_14\",\"label\":\"_label_kbdbw_29\",\"sm\":\"_sm_kbdbw_33\",\"mdCambio\":\"_mdCambio_kbdbw_40\",\"heightCambio\":\"_heightCambio_kbdbw_44\",\"smHeight\":\"_smHeight_kbdbw_48\",\"md\":\"_md_kbdbw_40\",\"mdHeight\":\"_mdHeight_kbdbw_59\",\"lg\":\"_lg_kbdbw_63\",\"lgHeight\":\"_lgHeight_kbdbw_70\",\"inputError\":\"_inputError_kbdbw_74\",\"inputErrorCambio\":\"_inputErrorCambio_kbdbw_84\"}"],"mappings":";;;;;;;;;;;;;;;AAEA,SAAmC,OAAO,kBAAkB;;;ACFoC,IAAO,0BAAQ,EAAC,YAAW,qBAAoB,MAAK,eAAc,MAAK,gBAAe,MAAK,gBAAe,kBAAiB,2BAA0B;;;ACAnJ,IAAO,2BAAQ,EAAC,aAAY,sBAAqB,oBAAmB,8BAA6B,mBAAkB,6BAA4B,SAAQ,mBAAkB,MAAK,gBAAe,YAAW,sBAAqB,gBAAe,0BAAyB,YAAW,sBAAqB,MAAK,gBAAe,YAAW,sBAAqB,MAAK,gBAAe,YAAW,sBAAqB,cAAa,wBAAuB,oBAAmB,6BAA4B;;;AFKlkB,OAAO,gBAAgB;AAuFjB,SAcM,KAdN;AAzBN,IAAM,WAAW;AAAA,EACf,SAASA,UACP;AAAA,IACE,eAAe;AAAA,IACf,UAAU,eAAe;AAAA,IACzB,YAAY;AAAA,IACZ,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR;AAAA,EACF,GACA,cACc;AACd,UAAM,aAAa,cAAc;AACjC,UAAM,WAAW,CAAC,cAAc;AAChC,UAAM,UAAU,MAAM;AACtB,UAAM,EAAE,UAAU,IAAI,SAAS;AAC/B,UAAM,UAAU,kBAAM;AAEtB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,WAAU;AAAA,QACV,KAAK;AAAA,QACL,OAAM;AAAA,QACN,2BAA2B;AAAA,UACzB,SAAS;AAAA,YACP,SAAS,WAAW,MAAM;AAAA,UAC5B;AAAA,QACF;AAAA,QACA,UAAU,cAAc,WAAW,aAAa;AAAA,QAEhD;AAAA,8BAAC,WAAM,WAAW,yBAAgB,OAAO,SAAS,SAChD,8BAAC,eAAI,UAAU,GACb,8BAAC,sBAAW,MAAM,KAAK,OAAM,WAC1B,iBACH,GACF,GACF;AAAA,UACA,oBAAC,sBAAW,MAAM,cAAc,WAAW,MAAM,KAC/C;AAAA,YAAC;AAAA;AAAA,cACC,eAAa;AAAA,cACb,KAAK;AAAA,cACL,WAAW;AAAA,gBACT,yBAAgB;AAAA,gBAChB,cAAc,YACV,yBAAgB,mBAChB,yBAAgB;AAAA,gBACpB,cAAc,aAAa,yBAAgB,IAAI;AAAA,gBAC/C,cAAc,aAAa,wBAAO,IAAI;AAAA,gBACtC,cAAc,YAAY,wBAAO,WAAW,wBAAO;AAAA,gBACnD;AAAA,kBACE,CAAC,cAAc,YACX,yBAAgB,aAChB,yBAAgB,gBAAgB,GAAG;AAAA,gBACzC;AAAA,cACF;AAAA,cACA,IAAI;AAAA,cACJ;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA;AAAA,UACF,GACF;AAAA,WACE,cAAc,cACd,oBAAC,eAAI,UAAU,GACb;AAAA,YAAC;AAAA;AAAA,cACC,MAAM;AAAA,cACN,OAAO,YAAY,wBAAwB;AAAA,cAE1C,uBAAa;AAAA;AAAA,UAChB,GACF;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,IAAO,mBAAQ;","names":["TextArea"]}
@@ -1,7 +1,7 @@
1
1
  "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
2
2
 
3
3
 
4
- var _JEHUXNNKcjs = require('./JEHUXNNK.cjs');
4
+ var _OWLMHTW5cjs = require('./OWLMHTW5.cjs');
5
5
 
6
6
 
7
7
  var _TBQR2FPScjs = require('./TBQR2FPS.cjs');
@@ -33,7 +33,7 @@ var Heading = ({
33
33
  const { themeName } = _TBQR2FPScjs.useTheme.call(void 0, );
34
34
  const classicWeight = [700, 800].includes(size) ? "heavy" : "bold";
35
35
  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
36
- _JEHUXNNKcjs.Typography_default,
36
+ _OWLMHTW5cjs.Typography_default,
37
37
  {
38
38
  align,
39
39
  as,
@@ -52,4 +52,4 @@ var Heading_default = Heading;
52
52
 
53
53
 
54
54
  exports.Heading_default = Heading_default;
55
- //# sourceMappingURL=WYNZQWGG.cjs.map
55
+ //# sourceMappingURL=ULHGK75R.cjs.map
@@ -1,7 +1,7 @@
1
1
  "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
2
2
 
3
3
 
4
- var _IQP3Q2PTcjs = require('./IQP3Q2PT.cjs');
4
+ var _IAOEIH7Ucjs = require('./IAOEIH7U.cjs');
5
5
 
6
6
 
7
7
  var _RYUXG4AScjs = require('./RYUXG4AS.cjs');
@@ -19,7 +19,7 @@ var RichSelectRadioButton_default = _react.forwardRef.call(void 0,
19
19
  function RichSelectRadioButton(props, ref) {
20
20
  const _a = props, { size, name } = _a, otherProps = _X2SDR4SDcjs.__objRest.call(void 0, _a, ["size", "name"]);
21
21
  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _RYUXG4AScjs.RichSelectItem_default, _X2SDR4SDcjs.__spreadProps.call(void 0, _X2SDR4SDcjs.__spreadValues.call(void 0, {}, otherProps), { ref, children: ({ isSelected, isFocusVisible, isDisabled }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
22
- _IQP3Q2PTcjs.RadioButton_default,
22
+ _IAOEIH7Ucjs.RadioButton_default,
23
23
  {
24
24
  checked: isSelected,
25
25
  disabled: isDisabled,
@@ -37,4 +37,4 @@ var RichSelectRadioButton_default = _react.forwardRef.call(void 0,
37
37
 
38
38
 
39
39
  exports.RichSelectRadioButton_default = RichSelectRadioButton_default;
40
- //# sourceMappingURL=FSIIRTOI.cjs.map
40
+ //# sourceMappingURL=VW7HLULP.cjs.map