@cambly/syntax-core 10.8.1 → 10.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (196) hide show
  1. package/dist/Avatar/Avatar.d.ts +1 -1
  2. package/dist/Badge/Badge.cjs +4 -3
  3. package/dist/Badge/Badge.css +114 -22
  4. package/dist/Badge/Badge.css.map +1 -1
  5. package/dist/Badge/Badge.d.ts +1 -1
  6. package/dist/Badge/Badge.js +3 -2
  7. package/dist/Button/Button.cjs +4 -4
  8. package/dist/Button/Button.css +114 -22
  9. package/dist/Button/Button.css.map +1 -1
  10. package/dist/Button/Button.js +3 -3
  11. package/dist/ButtonGroup/ButtonGroup.d.ts +1 -1
  12. package/dist/Checkbox/Checkbox.cjs +4 -3
  13. package/dist/Checkbox/Checkbox.css +114 -22
  14. package/dist/Checkbox/Checkbox.css.map +1 -1
  15. package/dist/Checkbox/Checkbox.d.ts +1 -1
  16. package/dist/Checkbox/Checkbox.js +3 -2
  17. package/dist/Chip/Chip.cjs +4 -3
  18. package/dist/Chip/Chip.css +114 -22
  19. package/dist/Chip/Chip.css.map +1 -1
  20. package/dist/Chip/Chip.js +3 -2
  21. package/dist/Dialog/ModalDialog.cjs +4 -4
  22. package/dist/Dialog/ModalDialog.js +3 -3
  23. package/dist/Heading/Heading.cjs +4 -3
  24. package/dist/Heading/Heading.css +114 -22
  25. package/dist/Heading/Heading.css.map +1 -1
  26. package/dist/Heading/Heading.d.ts +33 -4
  27. package/dist/Heading/Heading.js +3 -2
  28. package/dist/IconButton/IconButton.cjs +3 -3
  29. package/dist/IconButton/IconButton.js +2 -2
  30. package/dist/LinkButton/LinkButton.cjs +4 -4
  31. package/dist/LinkButton/LinkButton.css +114 -22
  32. package/dist/LinkButton/LinkButton.css.map +1 -1
  33. package/dist/LinkButton/LinkButton.js +3 -3
  34. package/dist/Modal/Modal.cjs +5 -4
  35. package/dist/Modal/Modal.css +114 -22
  36. package/dist/Modal/Modal.css.map +1 -1
  37. package/dist/Modal/Modal.js +4 -3
  38. package/dist/Popover/Popover.cjs +5 -5
  39. package/dist/Popover/Popover.js +4 -4
  40. package/dist/RadioButton/RadioButton.cjs +4 -3
  41. package/dist/RadioButton/RadioButton.css +114 -22
  42. package/dist/RadioButton/RadioButton.css.map +1 -1
  43. package/dist/RadioButton/RadioButton.d.ts +1 -1
  44. package/dist/RadioButton/RadioButton.js +3 -2
  45. package/dist/RichSelect/RichSelectBox.cjs +10 -10
  46. package/dist/RichSelect/RichSelectBox.css +114 -22
  47. package/dist/RichSelect/RichSelectBox.css.map +1 -1
  48. package/dist/RichSelect/RichSelectBox.d.ts +1 -1
  49. package/dist/RichSelect/RichSelectBox.js +9 -9
  50. package/dist/RichSelect/RichSelectChip.cjs +5 -4
  51. package/dist/RichSelect/RichSelectChip.css +114 -22
  52. package/dist/RichSelect/RichSelectChip.css.map +1 -1
  53. package/dist/RichSelect/RichSelectChip.js +4 -3
  54. package/dist/RichSelect/RichSelectList.cjs +15 -15
  55. package/dist/RichSelect/RichSelectList.css +114 -22
  56. package/dist/RichSelect/RichSelectList.css.map +1 -1
  57. package/dist/RichSelect/RichSelectList.d.ts +1 -1
  58. package/dist/RichSelect/RichSelectList.js +14 -14
  59. package/dist/RichSelect/RichSelectRadioButton.cjs +5 -4
  60. package/dist/RichSelect/RichSelectRadioButton.css +114 -22
  61. package/dist/RichSelect/RichSelectRadioButton.css.map +1 -1
  62. package/dist/RichSelect/RichSelectRadioButton.d.ts +1 -1
  63. package/dist/RichSelect/RichSelectRadioButton.js +4 -3
  64. package/dist/RichSelect/RichSelectSection.cjs +4 -3
  65. package/dist/RichSelect/RichSelectSection.css +114 -22
  66. package/dist/RichSelect/RichSelectSection.css.map +1 -1
  67. package/dist/RichSelect/RichSelectSection.js +3 -2
  68. package/dist/SelectList/SelectList.cjs +5 -4
  69. package/dist/SelectList/SelectList.css +114 -22
  70. package/dist/SelectList/SelectList.css.map +1 -1
  71. package/dist/SelectList/SelectList.js +4 -3
  72. package/dist/TapArea/TapArea.d.ts +1 -1
  73. package/dist/TextArea/TextArea.cjs +4 -3
  74. package/dist/TextArea/TextArea.css +114 -22
  75. package/dist/TextArea/TextArea.css.map +1 -1
  76. package/dist/TextArea/TextArea.js +3 -2
  77. package/dist/TextField/TextField.cjs +4 -3
  78. package/dist/TextField/TextField.css +114 -22
  79. package/dist/TextField/TextField.css.map +1 -1
  80. package/dist/TextField/TextField.js +3 -2
  81. package/dist/ThemeProvider/ThemeProvider.cjs +2 -2
  82. package/dist/ThemeProvider/ThemeProvider.js +1 -1
  83. package/dist/Tooltip/Tooltip.cjs +4 -3
  84. package/dist/Tooltip/Tooltip.css +114 -22
  85. package/dist/Tooltip/Tooltip.css.map +1 -1
  86. package/dist/Tooltip/Tooltip.js +3 -2
  87. package/dist/Typography/Typography.cjs +3 -2
  88. package/dist/Typography/Typography.css +114 -22
  89. package/dist/Typography/Typography.css.map +1 -1
  90. package/dist/Typography/Typography.d.ts +54 -5
  91. package/dist/Typography/Typography.js +2 -1
  92. package/dist/__chunks/{L4KE5YQS.cjs → 2IVYMX2N.cjs} +3 -3
  93. package/dist/__chunks/{FKV5VN7F.js → 2L772DMJ.js} +2 -2
  94. package/dist/__chunks/32FNU7ZY.js +128 -0
  95. package/dist/__chunks/32FNU7ZY.js.map +1 -0
  96. package/dist/__chunks/{CS6U6WBZ.js → 3UFCDOCF.js} +2 -2
  97. package/dist/__chunks/{3BFH4YPH.cjs → 4QCCTDDW.cjs} +4 -4
  98. package/dist/__chunks/{PLF2SHYM.js → 5HJFQPOL.js} +2 -2
  99. package/dist/__chunks/{RRAXSCWL.js → 6LBX2D7Z.js} +8 -8
  100. package/dist/__chunks/{BANKR5VQ.js → 6NXOQHE2.js} +2 -2
  101. package/dist/__chunks/{GQC7B3U6.cjs → 7W5RYLTS.cjs} +3 -3
  102. package/dist/__chunks/{KX4HD3Q3.cjs → ANT3IQ3X.cjs} +10 -10
  103. package/dist/__chunks/{53IMFXFX.js → ARYTS7XZ.js} +3 -3
  104. package/dist/__chunks/{53IMFXFX.js.map → ARYTS7XZ.js.map} +1 -1
  105. package/dist/__chunks/{RMC2RSHW.js → BIOBVFK4.js} +2 -2
  106. package/dist/__chunks/{4PICWHAJ.js → BQ6CW43H.js} +2 -2
  107. package/dist/__chunks/{LW7YGM7C.js → CRDTRKBH.js} +2 -2
  108. package/dist/__chunks/{P7UEPXTA.cjs → CVY5S6ZX.cjs} +4 -4
  109. package/dist/__chunks/{LIP6F5HL.js → DAMHOGG6.js} +2 -2
  110. package/dist/__chunks/{S6D6YJNT.cjs → DM4UMQ5D.cjs} +19 -19
  111. package/dist/__chunks/{EW5FQDYY.cjs → DSCWFIR3.cjs} +4 -4
  112. package/dist/__chunks/{EW5FQDYY.cjs.map → DSCWFIR3.cjs.map} +1 -1
  113. package/dist/__chunks/{2OKXRMSO.cjs → DWTZH7KM.cjs} +5 -5
  114. package/dist/__chunks/{4QLZTDKE.cjs → FINKF5MC.cjs} +3 -3
  115. package/dist/__chunks/{VXNZTCXZ.cjs → GJ44NFS5.cjs} +12 -5
  116. package/dist/__chunks/GJ44NFS5.cjs.map +1 -0
  117. package/dist/__chunks/{YCBSKN3Q.js → HOSRHZZG.js} +2 -2
  118. package/dist/__chunks/{2DU7NSCB.js → IOQT7L7F.js} +1 -1
  119. package/dist/__chunks/{2DU7NSCB.js.map → IOQT7L7F.js.map} +1 -1
  120. package/dist/__chunks/{TYZIM5GF.js → IOYNCG2J.js} +3 -3
  121. package/dist/__chunks/{4LYJ2Z5F.js → JBEJC7X2.js} +11 -4
  122. package/dist/__chunks/JBEJC7X2.js.map +1 -0
  123. package/dist/__chunks/{SSFANAKU.js → JOG44CT2.js} +5 -5
  124. package/dist/__chunks/{YMNL37TU.cjs → K2AMFXJG.cjs} +5 -5
  125. package/dist/__chunks/{BTZDTIOB.cjs → K2SCOMJX.cjs} +3 -3
  126. package/dist/__chunks/{NGCJ3BBY.js → KOZMH6AE.js} +3 -3
  127. package/dist/__chunks/{NGCJ3BBY.js.map → KOZMH6AE.js.map} +1 -1
  128. package/dist/__chunks/{HKGPCZ2V.js → KP3CHNJW.js} +5 -5
  129. package/dist/__chunks/{ZQFEITZH.cjs → LCEAHKFE.cjs} +3 -3
  130. package/dist/__chunks/{C6UG54GY.js → MQUMPR4A.js} +2 -2
  131. package/dist/__chunks/{HFRUEPJM.cjs → OI44OAX7.cjs} +6 -6
  132. package/dist/__chunks/{U6LLWKED.cjs → POAYQEOA.cjs} +1 -1
  133. package/dist/__chunks/{U6LLWKED.cjs.map → POAYQEOA.cjs.map} +1 -1
  134. package/dist/__chunks/{FXDPBBRB.js → Q5RYWCW7.js} +2 -2
  135. package/dist/__chunks/{HVGUWZ5I.js → RXNTJFP4.js} +5 -2
  136. package/dist/__chunks/RXNTJFP4.js.map +1 -0
  137. package/dist/__chunks/{W4UIYTBG.cjs → SJG2X2VN.cjs} +4 -4
  138. package/dist/__chunks/{W4UIYTBG.cjs.map → SJG2X2VN.cjs.map} +1 -1
  139. package/dist/__chunks/{DO56RCLX.js → T2WKEFB5.js} +2 -2
  140. package/dist/__chunks/TIW4V757.cjs +128 -0
  141. package/dist/__chunks/TIW4V757.cjs.map +1 -0
  142. package/dist/__chunks/{5WQ23BQE.js → TMH27D62.js} +5 -5
  143. package/dist/__chunks/{I37F5HVM.cjs → TVGN7SBI.cjs} +3 -3
  144. package/dist/__chunks/{EJTCFSQF.cjs → UXWIAEKV.cjs} +6 -6
  145. package/dist/__chunks/{63LUPH3X.cjs → WDR3YIMA.cjs} +3 -3
  146. package/dist/__chunks/{5NIFOD6K.cjs → WKDXUPAM.cjs} +5 -2
  147. package/dist/__chunks/WKDXUPAM.cjs.map +1 -0
  148. package/dist/__chunks/{5JI6NPPE.cjs → WPRJVUVL.cjs} +3 -3
  149. package/dist/__chunks/{JYKKN54U.cjs → X6F66N7W.cjs} +3 -3
  150. package/dist/index.cjs +26 -26
  151. package/dist/index.css +114 -22
  152. package/dist/index.css.map +1 -1
  153. package/dist/index.js +25 -25
  154. package/package.json +1 -1
  155. package/dist/__chunks/4LYJ2Z5F.js.map +0 -1
  156. package/dist/__chunks/5NIFOD6K.cjs.map +0 -1
  157. package/dist/__chunks/HVGUWZ5I.js.map +0 -1
  158. package/dist/__chunks/JBNXAIXY.cjs +0 -78
  159. package/dist/__chunks/JBNXAIXY.cjs.map +0 -1
  160. package/dist/__chunks/TGGJZ5GF.js +0 -78
  161. package/dist/__chunks/TGGJZ5GF.js.map +0 -1
  162. package/dist/__chunks/VXNZTCXZ.cjs.map +0 -1
  163. /package/dist/__chunks/{L4KE5YQS.cjs.map → 2IVYMX2N.cjs.map} +0 -0
  164. /package/dist/__chunks/{FKV5VN7F.js.map → 2L772DMJ.js.map} +0 -0
  165. /package/dist/__chunks/{CS6U6WBZ.js.map → 3UFCDOCF.js.map} +0 -0
  166. /package/dist/__chunks/{3BFH4YPH.cjs.map → 4QCCTDDW.cjs.map} +0 -0
  167. /package/dist/__chunks/{PLF2SHYM.js.map → 5HJFQPOL.js.map} +0 -0
  168. /package/dist/__chunks/{RRAXSCWL.js.map → 6LBX2D7Z.js.map} +0 -0
  169. /package/dist/__chunks/{BANKR5VQ.js.map → 6NXOQHE2.js.map} +0 -0
  170. /package/dist/__chunks/{GQC7B3U6.cjs.map → 7W5RYLTS.cjs.map} +0 -0
  171. /package/dist/__chunks/{KX4HD3Q3.cjs.map → ANT3IQ3X.cjs.map} +0 -0
  172. /package/dist/__chunks/{RMC2RSHW.js.map → BIOBVFK4.js.map} +0 -0
  173. /package/dist/__chunks/{4PICWHAJ.js.map → BQ6CW43H.js.map} +0 -0
  174. /package/dist/__chunks/{LW7YGM7C.js.map → CRDTRKBH.js.map} +0 -0
  175. /package/dist/__chunks/{P7UEPXTA.cjs.map → CVY5S6ZX.cjs.map} +0 -0
  176. /package/dist/__chunks/{LIP6F5HL.js.map → DAMHOGG6.js.map} +0 -0
  177. /package/dist/__chunks/{S6D6YJNT.cjs.map → DM4UMQ5D.cjs.map} +0 -0
  178. /package/dist/__chunks/{2OKXRMSO.cjs.map → DWTZH7KM.cjs.map} +0 -0
  179. /package/dist/__chunks/{4QLZTDKE.cjs.map → FINKF5MC.cjs.map} +0 -0
  180. /package/dist/__chunks/{YCBSKN3Q.js.map → HOSRHZZG.js.map} +0 -0
  181. /package/dist/__chunks/{TYZIM5GF.js.map → IOYNCG2J.js.map} +0 -0
  182. /package/dist/__chunks/{SSFANAKU.js.map → JOG44CT2.js.map} +0 -0
  183. /package/dist/__chunks/{YMNL37TU.cjs.map → K2AMFXJG.cjs.map} +0 -0
  184. /package/dist/__chunks/{BTZDTIOB.cjs.map → K2SCOMJX.cjs.map} +0 -0
  185. /package/dist/__chunks/{HKGPCZ2V.js.map → KP3CHNJW.js.map} +0 -0
  186. /package/dist/__chunks/{ZQFEITZH.cjs.map → LCEAHKFE.cjs.map} +0 -0
  187. /package/dist/__chunks/{C6UG54GY.js.map → MQUMPR4A.js.map} +0 -0
  188. /package/dist/__chunks/{HFRUEPJM.cjs.map → OI44OAX7.cjs.map} +0 -0
  189. /package/dist/__chunks/{FXDPBBRB.js.map → Q5RYWCW7.js.map} +0 -0
  190. /package/dist/__chunks/{DO56RCLX.js.map → T2WKEFB5.js.map} +0 -0
  191. /package/dist/__chunks/{5WQ23BQE.js.map → TMH27D62.js.map} +0 -0
  192. /package/dist/__chunks/{I37F5HVM.cjs.map → TVGN7SBI.cjs.map} +0 -0
  193. /package/dist/__chunks/{EJTCFSQF.cjs.map → UXWIAEKV.cjs.map} +0 -0
  194. /package/dist/__chunks/{63LUPH3X.cjs.map → WDR3YIMA.cjs.map} +0 -0
  195. /package/dist/__chunks/{5JI6NPPE.cjs.map → WPRJVUVL.cjs.map} +0 -0
  196. /package/dist/__chunks/{JYKKN54U.cjs.map → X6F66N7W.cjs.map} +0 -0
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/ThemeProvider/ThemeProvider.tsx","../../../syntax-design-tokens/dist/json/variables.json"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport variables from \"@cambly/syntax-design-tokens/dist/json/variables.json\";\n\ntype ThemeName = \"classic\" | \"cambio\";\n\ntype Theme = {\n themeName: ThemeName;\n};\n\nconst ThemeContext = React.createContext<Theme>({\n themeName: \"classic\",\n});\nThemeContext.displayName = \"ThemeContext\";\n\nconst classicToCambioKeyLookup = {\n \"color-base-black\": \"color-cambio-black\",\n \"color-base-destructive-100\": \"color-cambio-destructive-100\",\n \"color-base-destructive-200\": undefined, // Deprecated - to be deleted\n \"color-base-destructive-300\": \"color-cambio-destructive-300\",\n \"color-base-destructive-700\": \"color-cambio-destructive-700\",\n \"color-base-destructive-800\": undefined, // Deprecated - to be deleted\n \"color-base-destructive-900\": \"color-cambio-destructive-900\",\n \"color-base-gray-10\": \"color-cambio-gray-370\",\n \"color-base-gray-30\": \"color-cambio-gray-370\",\n \"color-base-gray-60\": \"color-cambio-gray-870\",\n \"color-base-gray-80\": \"color-cambio-gray-870\",\n \"color-base-gray-100\": \"color-cambio-gray-100\",\n \"color-base-gray-200\": \"color-cambio-gray-200\",\n \"color-base-gray-300\": \"color-cambio-gray-300\",\n \"color-base-gray-700\": \"color-cambio-gray-700\",\n \"color-base-gray-800\": \"color-cambio-gray-800\",\n \"color-base-gray-900\": \"color-cambio-gray-900\",\n \"color-base-orange-100\": undefined, // Deprecated - to be deleted\n \"color-base-orange-200\": undefined, // Deprecated - to be deleted\n \"color-base-orange-300\": undefined, // Deprecated - to be deleted\n \"color-base-orange-700\": \"color-cambio-orange\",\n \"color-base-orange-800\": undefined, // Deprecated - to be deleted\n \"color-base-orange-900\": undefined, // Deprecated - to be deleted\n \"color-base-primary-100\": \"color-cambio-gray-100\",\n \"color-base-primary-200\": \"color-cambio-gray-200\",\n \"color-base-primary-300\": \"color-cambio-gray-300\",\n \"color-base-primary-700\": \"color-cambio-gray-700\",\n \"color-base-primary-800\": \"color-cambio-gray-800\",\n \"color-base-primary-900\": \"color-cambio-gray-900\",\n \"color-base-success-100\": \"color-cambio-success-100\",\n \"color-base-success-200\": undefined, // Deprecated - to be deleted\n \"color-base-success-300\": \"color-cambio-success-300\",\n \"color-base-success-700\": \"color-cambio-success-700\",\n \"color-base-success-800\": undefined, // Deprecated - to be deleted\n \"color-base-success-900\": \"color-cambio-success-900\",\n \"color-base-purple-100\": undefined, // Deprecated - to be deleted\n \"color-base-purple-200\": undefined, // Deprecated - to be deleted\n \"color-base-purple-300\": undefined, // Deprecated - to be deleted\n \"color-base-purple-700\": \"color-cambio-purple\",\n \"color-base-purple-800\": undefined, // Deprecated - to be deleted\n \"color-base-purple-900\": undefined, // Deprecated - to be deleted\n \"color-base-yellow-100\": undefined, // Deprecated - to be deleted\n \"color-base-yellow-200\": undefined, // Deprecated - to be deleted\n \"color-base-yellow-300\": undefined, // Deprecated - to be deleted\n \"color-base-yellow-700\": \"color-cambio-yellow-700\",\n \"color-base-yellow-800\": undefined, // Deprecated - to be deleted\n \"color-base-yellow-900\": undefined, // Deprecated - to be deleted\n \"color-base-white\": \"color-cambio-white\",\n};\n\nfunction stylesForTheme(themeName: ThemeName) {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n const tokenVariables: Record<string, string> = variables;\n return `\n :root {\n ${Object.entries(tokenVariables)\n .filter(([key]) => {\n return themeName === \"classic\" ? !key.includes(\"cambio\") : true;\n })\n .map(([key, value]) => {\n // Replace classic values with cambio ones if they exist\n if (\n themeName === \"cambio\" &&\n classicToCambioKeyLookup[\n key as keyof typeof classicToCambioKeyLookup\n ]\n ) {\n return [\n key,\n tokenVariables[\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n classicToCambioKeyLookup[\n key as keyof typeof classicToCambioKeyLookup\n ]!\n ],\n ];\n }\n return [key, value];\n })\n .map(([key, value]) => `--${key}: ${value};`)\n .join(\"\\n\")}\n }\n `;\n}\n\nexport default function ThemeProvider({\n themeName = \"classic\",\n children,\n}: {\n themeName: ThemeName;\n children: React.ReactNode;\n}): React.ReactElement {\n const value = useMemo(() => ({ themeName }), [themeName]);\n\n const innerStyles = useMemo(() => stylesForTheme(themeName), [themeName]);\n\n return (\n <ThemeContext.Provider value={value}>\n <style\n dangerouslySetInnerHTML={{ __html: innerStyles }}\n data-testid=\"themeprovider-style\"\n ></style>\n {children}\n </ThemeContext.Provider>\n );\n}\n\nexport function useTheme(): Theme {\n return React.useContext(ThemeContext);\n}\n","{\n \"color-base-black\": \"#000000\",\n \"color-base-destructive-100\": \"#fef3f5\",\n \"color-base-destructive-200\": \"#fad6de\",\n \"color-base-destructive-300\": \"#f2a2b2\",\n \"color-base-destructive-700\": \"#d32a4b\",\n \"color-base-destructive-800\": \"#81162c\",\n \"color-base-destructive-900\": \"#55101d\",\n \"color-base-gray-10\": \"rgba(203, 203, 203, 0.5)\",\n \"color-base-gray-30\": \"rgba(0, 0, 0, 0.3)\",\n \"color-base-gray-60\": \"rgba(0, 0, 0, 0.6)\",\n \"color-base-gray-80\": \"rgba(0, 0, 0, 0.8)\",\n \"color-base-gray-100\": \"#f7f7f7\",\n \"color-base-gray-200\": \"#f0f0f0\",\n \"color-base-gray-300\": \"#d0d0d0\",\n \"color-base-gray-700\": \"#767676\",\n \"color-base-gray-800\": \"#353535\",\n \"color-base-gray-900\": \"#191919\",\n \"color-base-orange-100\": \"#fdf2f0\",\n \"color-base-orange-200\": \"#f6cdc4\",\n \"color-base-orange-300\": \"#ec9987\",\n \"color-base-orange-700\": \"#c34124\",\n \"color-base-orange-800\": \"#732818\",\n \"color-base-orange-900\": \"#4d1a10\",\n \"color-base-primary-100\": \"#eff6fa\",\n \"color-base-primary-200\": \"#c1dbe7\",\n \"color-base-primary-300\": \"#84b7d0\",\n \"color-base-primary-700\": \"#236482\",\n \"color-base-primary-800\": \"#274858\",\n \"color-base-primary-900\": \"#1b303b\",\n \"color-base-success-100\": \"#eff7f1\",\n \"color-base-success-200\": \"#bddcc6\",\n \"color-base-success-300\": \"#81ba92\",\n \"color-base-success-700\": \"#397b4d\",\n \"color-base-success-800\": \"#2d4936\",\n \"color-base-success-900\": \"#1e3124\",\n \"color-base-purple-100\": \"#f9f5fa\",\n \"color-base-purple-200\": \"#e8dceb\",\n \"color-base-purple-300\": \"#cdb4d3\",\n \"color-base-purple-700\": \"#8b5f95\",\n \"color-base-purple-800\": \"#523b58\",\n \"color-base-purple-900\": \"#37273b\",\n \"color-base-yellow-100\": \"#fdf5d9\",\n \"color-base-yellow-200\": \"#fbe8a3\",\n \"color-base-yellow-300\": \"#f8d663\",\n \"color-base-yellow-700\": \"#ffc929\",\n \"color-base-yellow-800\": \"#765f1c\",\n \"color-base-yellow-900\": \"#3b3009\",\n \"color-base-white\": \"#ffffff\",\n \"color-cambio-black\": \"#050500\",\n \"color-cambio-white\": \"#ffffff\",\n \"color-cambio-gray-100\": \"#faf4eb\",\n \"color-cambio-gray-200\": \"#e4dbd3\",\n \"color-cambio-gray-300\": \"#beb4ab\",\n \"color-cambio-gray-370\": \"rgba(190, 180, 171, 0.7)\",\n \"color-cambio-gray-700\": \"#888077\",\n \"color-cambio-gray-800\": \"#5c554d\",\n \"color-cambio-gray-870\": \"rgba(92, 85, 77, 0.7)\",\n \"color-cambio-gray-900\": \"#312b23\",\n \"color-cambio-destructive-100\": \"#ffdeda\",\n \"color-cambio-destructive-300\": \"#ff8071\",\n \"color-cambio-destructive-370\": \"rgba(255, 128, 113, 0.7)\",\n \"color-cambio-destructive-700\": \"#c93f32\",\n \"color-cambio-destructive-770\": \"rgba(201, 63, 50, 0.7)\",\n \"color-cambio-destructive-900\": \"#6d0002\",\n \"color-cambio-success-100\": \"#daf2c8\",\n \"color-cambio-success-300\": \"#84ce64\",\n \"color-cambio-success-370\": \"rgba(132, 206, 100, 0.7)\",\n \"color-cambio-success-700\": \"#3c7f20\",\n \"color-cambio-success-770\": \"rgba(60, 127, 32, 0.7)\",\n \"color-cambio-success-900\": \"#103e00\",\n \"color-cambio-red\": \"#f56e56\",\n \"color-cambio-orange\": \"#ff8f57\",\n \"color-cambio-tan\": \"#ffb47d\",\n \"color-cambio-cream\": \"#fffad1\",\n \"color-cambio-purple\": \"#6840a8\",\n \"color-cambio-lilac\": \"#b59ef0\",\n \"color-cambio-thistle\": \"#d69ca4\",\n \"color-cambio-pink\": \"#ffccea\",\n \"color-cambio-navy\": \"#191142\",\n \"color-cambio-teal\": \"#44a6cf\",\n \"color-cambio-slate\": \"#7c9fc6\",\n \"color-cambio-sky\": \"#b1e8fc\",\n \"color-cambio-yellow-700\": \"#ffe733\",\n \"color-cambio-transparent-full\": \"rgba(0, 0, 0, 0)\",\n \"elevation-400\": \"0px 16px 32px 0px #00000040\"\n}\n"],"mappings":"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","names":[]}
@@ -1,78 +0,0 @@
1
- "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
2
-
3
- var _TF76F532cjs = require('./TF76F532.cjs');
4
-
5
- // src/Typography/Typography.tsx
6
- var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
7
- var _react = require('react');
8
-
9
- // css-module:./Typography.module.css#css-module
10
- var Typography_module_default = { "typography": "_typography_1vnry_1", "size100": "_size100_1vnry_8", "size200": "_size200_1vnry_12", "size300": "_size300_1vnry_16", "size500": "_size500_1vnry_20", "size600": "_size600_1vnry_24", "size700": "_size700_1vnry_28", "size800": "_size800_1vnry_32", "center": "_center_1vnry_37", "forceLeft": "_forceLeft_1vnry_41", "forceRight": "_forceRight_1vnry_45", "start": "_start_1vnry_49", "end": "_end_1vnry_53", "bold": "_bold_1vnry_58", "regular": "_regular_1vnry_62", "interactive": "_interactive_1vnry_66", "semiBold": "_semiBold_1vnry_70", "heavy": "_heavy_1vnry_74", "underline": "_underline_1vnry_78", "inline": "_inline_1vnry_82", "uppercase": "_uppercase_1vnry_86", "lineClamp": "_lineClamp_1vnry_90" };
11
-
12
- // src/Typography/Typography.tsx
13
- var _jsxruntime = require('react/jsx-runtime');
14
- function textColor(color) {
15
- switch (color) {
16
- case "gray700":
17
- return _TF76F532cjs.colors_module_default.gray700Color;
18
- case "white":
19
- return _TF76F532cjs.colors_module_default.whiteColor;
20
- case "inherit":
21
- return _TF76F532cjs.colors_module_default.inheritColor;
22
- case "primary":
23
- return _TF76F532cjs.colors_module_default.primary700Color;
24
- case "destructive-primary":
25
- return _TF76F532cjs.colors_module_default.destructive700Color;
26
- case "success":
27
- return _TF76F532cjs.colors_module_default.success700Color;
28
- default:
29
- return _TF76F532cjs.colors_module_default.gray900Color;
30
- }
31
- }
32
- var Typography = _react.forwardRef.call(void 0, function Typography2({
33
- align = "start",
34
- as = "div",
35
- children,
36
- color = "gray900",
37
- "data-testid": dataTestId,
38
- id,
39
- inline = false,
40
- lineClamp = void 0,
41
- size = 200,
42
- tooltip,
43
- transform = "none",
44
- underline = false,
45
- weight = "regular"
46
- }, ref) {
47
- const Tag = as;
48
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
49
- Tag,
50
- {
51
- id,
52
- className: _classnames2.default.call(void 0,
53
- Typography_module_default.typography,
54
- Typography_module_default[align],
55
- Typography_module_default[weight],
56
- textColor(color),
57
- inline && Typography_module_default.inline,
58
- Typography_module_default[`size${size}`],
59
- transform === "uppercase" && Typography_module_default.uppercase,
60
- underline && Typography_module_default.underline,
61
- lineClamp != null && Typography_module_default.lineClamp
62
- ),
63
- "data-testid": dataTestId,
64
- style: {
65
- WebkitLineClamp: lineClamp
66
- },
67
- title: tooltip,
68
- ref,
69
- children
70
- }
71
- );
72
- });
73
- var Typography_default = Typography;
74
-
75
-
76
-
77
- exports.Typography_default = Typography_default;
78
- //# sourceMappingURL=JBNXAIXY.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,WAAU,oBAAmB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,UAAS,oBAAmB,aAAY,uBAAsB,cAAa,wBAAuB,SAAQ,mBAAkB,OAAM,iBAAgB,QAAO,kBAAiB,WAAU,qBAAoB,eAAc,yBAAwB,YAAW,sBAAqB,SAAQ,mBAAkB,aAAY,uBAAsB,UAAS,oBAAmB,aAAY,uBAAsB,aAAY,sBAAqB;;;ADmI7wB;AA7HJ,SAAS,UAAU,OAAuC;AACxD,UAAQ,OAAO;AAAA,IACb,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB;AACE,aAAO,sBAAY;AAAA,EACvB;AACF;AAKA,IAAM,aAAa,WAkFjB,SAASA,YACT;AAAA,EACE,QAAQ;AAAA,EACR,KAAK;AAAA,EACL;AAAA,EACA,QAAQ;AAAA,EACR,eAAe;AAAA,EACf;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,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,MAC9B;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 { type Color } from \"../constants\";\nimport styles from \"./Typography.module.css\";\nimport colorStyles from \"../colors/colors.module.css\";\n\nfunction textColor(color: (typeof Color)[number]): 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 return colorStyles.destructive700Color;\n case \"success\":\n return colorStyles.success700Color;\n default:\n return colorStyles.gray900Color;\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 * @defaultValue \"gray900\"\n */\n color?: (typeof Color)[number];\n /**\n * Test id for the text\n */\n \"data-testid\"?: string;\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 * * `100`: 12px\n * * `200`: 14px\n * * `300`: 16px\n * * `500`: 20px\n * * `600`: 28px\n * * `700`: 40px\n * * `800`: 64px\n *\n * @defaultValue 200\n */\n size?: 100 | 200 | 300 | 500 | 600 | 700 | 800;\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 * @defaultValue \"regular\"\n */\n weight?: \"regular\" | \"interactive\" | \"semiBold\" | \"bold\" | \"heavy\";\n }\n>(function Typography(\n {\n align = \"start\",\n as = \"div\",\n children,\n color = \"gray900\",\n \"data-testid\": dataTestId,\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 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 )}\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_1vnry_1\",\"size100\":\"_size100_1vnry_8\",\"size200\":\"_size200_1vnry_12\",\"size300\":\"_size300_1vnry_16\",\"size500\":\"_size500_1vnry_20\",\"size600\":\"_size600_1vnry_24\",\"size700\":\"_size700_1vnry_28\",\"size800\":\"_size800_1vnry_32\",\"center\":\"_center_1vnry_37\",\"forceLeft\":\"_forceLeft_1vnry_41\",\"forceRight\":\"_forceRight_1vnry_45\",\"start\":\"_start_1vnry_49\",\"end\":\"_end_1vnry_53\",\"bold\":\"_bold_1vnry_58\",\"regular\":\"_regular_1vnry_62\",\"interactive\":\"_interactive_1vnry_66\",\"semiBold\":\"_semiBold_1vnry_70\",\"heavy\":\"_heavy_1vnry_74\",\"underline\":\"_underline_1vnry_78\",\"inline\":\"_inline_1vnry_82\",\"uppercase\":\"_uppercase_1vnry_86\",\"lineClamp\":\"_lineClamp_1vnry_90\"}"]}
@@ -1,78 +0,0 @@
1
- import {
2
- colors_module_default
3
- } from "./5OB72SMM.js";
4
-
5
- // src/Typography/Typography.tsx
6
- import classNames from "classnames";
7
- import { forwardRef } from "react";
8
-
9
- // css-module:./Typography.module.css#css-module
10
- var Typography_module_default = { "typography": "_typography_1vnry_1", "size100": "_size100_1vnry_8", "size200": "_size200_1vnry_12", "size300": "_size300_1vnry_16", "size500": "_size500_1vnry_20", "size600": "_size600_1vnry_24", "size700": "_size700_1vnry_28", "size800": "_size800_1vnry_32", "center": "_center_1vnry_37", "forceLeft": "_forceLeft_1vnry_41", "forceRight": "_forceRight_1vnry_45", "start": "_start_1vnry_49", "end": "_end_1vnry_53", "bold": "_bold_1vnry_58", "regular": "_regular_1vnry_62", "interactive": "_interactive_1vnry_66", "semiBold": "_semiBold_1vnry_70", "heavy": "_heavy_1vnry_74", "underline": "_underline_1vnry_78", "inline": "_inline_1vnry_82", "uppercase": "_uppercase_1vnry_86", "lineClamp": "_lineClamp_1vnry_90" };
11
-
12
- // src/Typography/Typography.tsx
13
- import { jsx } from "react/jsx-runtime";
14
- function textColor(color) {
15
- switch (color) {
16
- case "gray700":
17
- return colors_module_default.gray700Color;
18
- case "white":
19
- return colors_module_default.whiteColor;
20
- case "inherit":
21
- return colors_module_default.inheritColor;
22
- case "primary":
23
- return colors_module_default.primary700Color;
24
- case "destructive-primary":
25
- return colors_module_default.destructive700Color;
26
- case "success":
27
- return colors_module_default.success700Color;
28
- default:
29
- return colors_module_default.gray900Color;
30
- }
31
- }
32
- var Typography = forwardRef(function Typography2({
33
- align = "start",
34
- as = "div",
35
- children,
36
- color = "gray900",
37
- "data-testid": dataTestId,
38
- id,
39
- inline = false,
40
- lineClamp = void 0,
41
- size = 200,
42
- tooltip,
43
- transform = "none",
44
- underline = false,
45
- weight = "regular"
46
- }, ref) {
47
- const Tag = as;
48
- return /* @__PURE__ */ jsx(
49
- Tag,
50
- {
51
- id,
52
- className: classNames(
53
- Typography_module_default.typography,
54
- Typography_module_default[align],
55
- Typography_module_default[weight],
56
- textColor(color),
57
- inline && Typography_module_default.inline,
58
- Typography_module_default[`size${size}`],
59
- transform === "uppercase" && Typography_module_default.uppercase,
60
- underline && Typography_module_default.underline,
61
- lineClamp != null && Typography_module_default.lineClamp
62
- ),
63
- "data-testid": dataTestId,
64
- style: {
65
- WebkitLineClamp: lineClamp
66
- },
67
- title: tooltip,
68
- ref,
69
- children
70
- }
71
- );
72
- });
73
- var Typography_default = Typography;
74
-
75
- export {
76
- Typography_default
77
- };
78
- //# sourceMappingURL=TGGJZ5GF.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/Typography/Typography.tsx","css-module:./Typography.module.css#css-module"],"sourcesContent":["import classNames from \"classnames\";\nimport { forwardRef, type ReactElement, type ReactNode } from \"react\";\nimport { type Color } from \"../constants\";\nimport styles from \"./Typography.module.css\";\nimport colorStyles from \"../colors/colors.module.css\";\n\nfunction textColor(color: (typeof Color)[number]): 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 return colorStyles.destructive700Color;\n case \"success\":\n return colorStyles.success700Color;\n default:\n return colorStyles.gray900Color;\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 * @defaultValue \"gray900\"\n */\n color?: (typeof Color)[number];\n /**\n * Test id for the text\n */\n \"data-testid\"?: string;\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 * * `100`: 12px\n * * `200`: 14px\n * * `300`: 16px\n * * `500`: 20px\n * * `600`: 28px\n * * `700`: 40px\n * * `800`: 64px\n *\n * @defaultValue 200\n */\n size?: 100 | 200 | 300 | 500 | 600 | 700 | 800;\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 * @defaultValue \"regular\"\n */\n weight?: \"regular\" | \"interactive\" | \"semiBold\" | \"bold\" | \"heavy\";\n }\n>(function Typography(\n {\n align = \"start\",\n as = \"div\",\n children,\n color = \"gray900\",\n \"data-testid\": dataTestId,\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 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 )}\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_1vnry_1\",\"size100\":\"_size100_1vnry_8\",\"size200\":\"_size200_1vnry_12\",\"size300\":\"_size300_1vnry_16\",\"size500\":\"_size500_1vnry_20\",\"size600\":\"_size600_1vnry_24\",\"size700\":\"_size700_1vnry_28\",\"size800\":\"_size800_1vnry_32\",\"center\":\"_center_1vnry_37\",\"forceLeft\":\"_forceLeft_1vnry_41\",\"forceRight\":\"_forceRight_1vnry_45\",\"start\":\"_start_1vnry_49\",\"end\":\"_end_1vnry_53\",\"bold\":\"_bold_1vnry_58\",\"regular\":\"_regular_1vnry_62\",\"interactive\":\"_interactive_1vnry_66\",\"semiBold\":\"_semiBold_1vnry_70\",\"heavy\":\"_heavy_1vnry_74\",\"underline\":\"_underline_1vnry_78\",\"inline\":\"_inline_1vnry_82\",\"uppercase\":\"_uppercase_1vnry_86\",\"lineClamp\":\"_lineClamp_1vnry_90\"}"],"mappings":";;;;;AAAA,OAAO,gBAAgB;AACvB,SAAS,kBAAqD;;;ACDsC,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,WAAU,oBAAmB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,UAAS,oBAAmB,aAAY,uBAAsB,cAAa,wBAAuB,SAAQ,mBAAkB,OAAM,iBAAgB,QAAO,kBAAiB,WAAU,qBAAoB,eAAc,yBAAwB,YAAW,sBAAqB,SAAQ,mBAAkB,aAAY,uBAAsB,UAAS,oBAAmB,aAAY,uBAAsB,aAAY,sBAAqB;;;ADmI7wB;AA7HJ,SAAS,UAAU,OAAuC;AACxD,UAAQ,OAAO;AAAA,IACb,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB;AACE,aAAO,sBAAY;AAAA,EACvB;AACF;AAKA,IAAM,aAAa,WAkFjB,SAASA,YACT;AAAA,EACE,QAAQ;AAAA,EACR,KAAK;AAAA,EACL;AAAA,EACA,QAAQ;AAAA,EACR,eAAe;AAAA,EACf;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,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,MAC9B;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;","names":["Typography"]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/Heading/Heading.tsx"],"names":[],"mappings":";;;;;AA8DI;AAvDJ,IAAM,UAAU,CAAC;AAAA,EACf,QAAQ;AAAA,EACR,KAAK;AAAA,EACL;AAAA,EACA,QAAQ;AAAA,EACR,eAAe;AAAA,EACf;AAAA,EACA,OAAO;AACT,MA4CoB;AAClB,QAAM,SAAS,CAAC,KAAK,GAAG,EAAE,SAAS,IAAI,IAAI,UAAU;AACrD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,kBAAQ","sourcesContent":["import { type ReactElement, type ReactNode } from \"react\";\nimport { type Color } from \"../constants\";\nimport Typography from \"../Typography/Typography\";\n\n/**\n * [Heading](https://cambly-syntax.vercel.app/?path=/docs/components-heading--docs) enforces a consistent style & accessibility best practices for headings.\n */\nconst Heading = ({\n align = \"start\",\n as = \"h1\",\n children,\n color = \"gray900\",\n \"data-testid\": dataTestId,\n lineClamp,\n size = 500,\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 \"h1\"\n */\n as?: \"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 * @defaultValue \"gray900\"\n */\n color?: (typeof Color)[number];\n /**\n * Test id for the text.\n */\n \"data-testid\"?: string;\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 * * `500`: 20px\n * * `600`: 28px\n * * `700`: 40px\n * * `800`: 64px\n *\n * @defaultValue 500\n */\n size?: 500 | 600 | 700 | 800;\n}): ReactElement => {\n const weight = [700, 800].includes(size) ? \"heavy\" : \"bold\";\n return (\n <Typography\n align={align}\n as={as}\n color={color}\n data-testid={dataTestId}\n lineClamp={lineClamp}\n size={size}\n weight={weight}\n >\n {children}\n </Typography>\n );\n};\n\nexport default Heading;\n"]}