@cambly/syntax-core 10.8.0 → 10.8.1

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 (49) hide show
  1. package/dist/Dialog/ModalDialog.cjs +3 -3
  2. package/dist/Dialog/ModalDialog.js +2 -2
  3. package/dist/IconButton/IconButton.cjs +2 -2
  4. package/dist/IconButton/IconButton.d.ts +1 -1
  5. package/dist/IconButton/IconButton.js +1 -1
  6. package/dist/LinkButton/LinkButton.cjs +2 -2
  7. package/dist/LinkButton/LinkButton.d.ts +1 -1
  8. package/dist/LinkButton/LinkButton.js +1 -1
  9. package/dist/Popover/Popover.cjs +4 -4
  10. package/dist/Popover/Popover.js +3 -3
  11. package/dist/RichSelect/RichSelectList.cjs +6 -6
  12. package/dist/RichSelect/RichSelectList.js +5 -5
  13. package/dist/SelectList/SelectList.cjs +3 -3
  14. package/dist/SelectList/SelectList.js +2 -2
  15. package/dist/__chunks/{XJW7XS7M.js → 2DU7NSCB.js} +1 -1
  16. package/dist/__chunks/{XJW7XS7M.js.map → 2DU7NSCB.js.map} +1 -1
  17. package/dist/__chunks/{VG3KCHZI.cjs → BTZDTIOB.cjs} +3 -3
  18. package/dist/__chunks/{77GCYQJQ.js → C6UG54GY.js} +2 -2
  19. package/dist/__chunks/{A7HHS3KY.js → DO56RCLX.js} +2 -2
  20. package/dist/__chunks/{DU7RZXSR.cjs → HFRUEPJM.cjs} +3 -3
  21. package/dist/__chunks/{XSO53O27.js → HKGPCZ2V.js} +1 -1
  22. package/dist/__chunks/HKGPCZ2V.js.map +1 -0
  23. package/dist/__chunks/{3QJ5N4GA.cjs → I37F5HVM.cjs} +3 -3
  24. package/dist/__chunks/{R7VED2O3.cjs → L4KE5YQS.cjs} +1 -1
  25. package/dist/__chunks/L4KE5YQS.cjs.map +1 -0
  26. package/dist/__chunks/{OSGLKEGE.js → LW7YGM7C.js} +1 -1
  27. package/dist/__chunks/LW7YGM7C.js.map +1 -0
  28. package/dist/__chunks/{VVIDGIIT.js → RRAXSCWL.js} +3 -3
  29. package/dist/__chunks/{DWAH45NN.cjs → S6D6YJNT.cjs} +5 -5
  30. package/dist/__chunks/{E6XEQ7AW.js → TYZIM5GF.js} +2 -2
  31. package/dist/__chunks/{AVING5PW.cjs → U6LLWKED.cjs} +1 -1
  32. package/dist/__chunks/{AVING5PW.cjs.map → U6LLWKED.cjs.map} +1 -1
  33. package/dist/__chunks/{4H5DX5BW.cjs → YMNL37TU.cjs} +1 -1
  34. package/dist/__chunks/YMNL37TU.cjs.map +1 -0
  35. package/dist/index.cjs +8 -8
  36. package/dist/index.js +7 -7
  37. package/package.json +3 -3
  38. package/dist/__chunks/4H5DX5BW.cjs.map +0 -1
  39. package/dist/__chunks/OSGLKEGE.js.map +0 -1
  40. package/dist/__chunks/R7VED2O3.cjs.map +0 -1
  41. package/dist/__chunks/XSO53O27.js.map +0 -1
  42. /package/dist/__chunks/{VG3KCHZI.cjs.map → BTZDTIOB.cjs.map} +0 -0
  43. /package/dist/__chunks/{77GCYQJQ.js.map → C6UG54GY.js.map} +0 -0
  44. /package/dist/__chunks/{A7HHS3KY.js.map → DO56RCLX.js.map} +0 -0
  45. /package/dist/__chunks/{DU7RZXSR.cjs.map → HFRUEPJM.cjs.map} +0 -0
  46. /package/dist/__chunks/{3QJ5N4GA.cjs.map → I37F5HVM.cjs.map} +0 -0
  47. /package/dist/__chunks/{VVIDGIIT.js.map → RRAXSCWL.js.map} +0 -0
  48. /package/dist/__chunks/{DWAH45NN.cjs.map → S6D6YJNT.cjs.map} +0 -0
  49. /package/dist/__chunks/{E6XEQ7AW.js.map → TYZIM5GF.js.map} +0 -0
@@ -2,8 +2,8 @@
2
2
 
3
3
 
4
4
 
5
- var _VG3KCHZIcjs = require('../__chunks/VG3KCHZI.cjs');
6
- require('../__chunks/R7VED2O3.cjs');
5
+ var _BTZDTIOBcjs = require('../__chunks/BTZDTIOB.cjs');
6
+ require('../__chunks/L4KE5YQS.cjs');
7
7
  require('../__chunks/33HJ72Y2.cjs');
8
8
  require('../__chunks/VA23P3ZI.cjs');
9
9
  require('../__chunks/VUANIQYP.cjs');
@@ -28,5 +28,5 @@ require('../__chunks/I64JGYX7.cjs');
28
28
 
29
29
 
30
30
 
31
- exports.AriaModal = _VG3KCHZIcjs.AriaModal; exports.AriaModalOverlay = _VG3KCHZIcjs.AriaModalOverlay; exports.default = _VG3KCHZIcjs.ModalDialog_default;
31
+ exports.AriaModal = _BTZDTIOBcjs.AriaModal; exports.AriaModalOverlay = _BTZDTIOBcjs.AriaModalOverlay; exports.default = _BTZDTIOBcjs.ModalDialog_default;
32
32
  //# sourceMappingURL=ModalDialog.cjs.map
@@ -2,8 +2,8 @@ import {
2
2
  AriaModal,
3
3
  AriaModalOverlay,
4
4
  ModalDialog_default
5
- } from "../__chunks/77GCYQJQ.js";
6
- import "../__chunks/OSGLKEGE.js";
5
+ } from "../__chunks/C6UG54GY.js";
6
+ import "../__chunks/LW7YGM7C.js";
7
7
  import "../__chunks/DSGIOBWG.js";
8
8
  import "../__chunks/ZEA5JDEB.js";
9
9
  import "../__chunks/5AR53MHD.js";
@@ -1,6 +1,6 @@
1
1
  "use strict";Object.defineProperty(exports, "__esModule", {value: true});
2
2
 
3
- var _R7VED2O3cjs = require('../__chunks/R7VED2O3.cjs');
3
+ var _L4KE5YQScjs = require('../__chunks/L4KE5YQS.cjs');
4
4
  require('../__chunks/33HJ72Y2.cjs');
5
5
  require('../__chunks/VUANIQYP.cjs');
6
6
  require('../__chunks/PSWX5DBC.cjs');
@@ -13,5 +13,5 @@ require('../__chunks/FZRIE7EX.cjs');
13
13
  require('../__chunks/I64JGYX7.cjs');
14
14
 
15
15
 
16
- exports.default = _R7VED2O3cjs.IconButton_default;
16
+ exports.default = _L4KE5YQScjs.IconButton_default;
17
17
  //# sourceMappingURL=IconButton.cjs.map
@@ -16,7 +16,7 @@ type IconButtonProps = {
16
16
  *
17
17
  * @defaultValue "primary"
18
18
  */
19
- color?: "primary" | "secondary" | "tertiary" | "destructive-primary" | "destructive-secondary" | "destructive-tertiary" | "branded" | "success" | "success-primary" | "success-secondary" | "inverse";
19
+ color?: "primary" | "secondary" | "tertiary" | "destructive-primary" | "destructive-secondary" | "destructive-tertiary" | "branded" | "success" | "success-primary" | "success-secondary" | "success-tertiary" | "inverse";
20
20
  /**
21
21
  * Test id for the button
22
22
  */
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  IconButton_default
3
- } from "../__chunks/OSGLKEGE.js";
3
+ } from "../__chunks/LW7YGM7C.js";
4
4
  import "../__chunks/DSGIOBWG.js";
5
5
  import "../__chunks/5AR53MHD.js";
6
6
  import "../__chunks/K3H7QFPB.js";
@@ -1,6 +1,6 @@
1
1
  "use strict";Object.defineProperty(exports, "__esModule", {value: true});
2
2
 
3
- var _4H5DX5BWcjs = require('../__chunks/4H5DX5BW.cjs');
3
+ var _YMNL37TUcjs = require('../__chunks/YMNL37TU.cjs');
4
4
  require('../__chunks/7AYSDTC6.cjs');
5
5
  require('../__chunks/A72TS5OX.cjs');
6
6
  require('../__chunks/33HJ72Y2.cjs');
@@ -16,5 +16,5 @@ require('../__chunks/TF76F532.cjs');
16
16
  require('../__chunks/I64JGYX7.cjs');
17
17
 
18
18
 
19
- exports.default = _4H5DX5BWcjs.LinkButton_default;
19
+ exports.default = _YMNL37TUcjs.LinkButton_default;
20
20
  //# sourceMappingURL=LinkButton.cjs.map
@@ -39,7 +39,7 @@ type LinkButtonProps = {
39
39
  *
40
40
  * @defaultValue "primary"
41
41
  */
42
- color?: "primary" | "secondary" | "tertiary" | "destructive-primary" | "destructive-secondary" | "destructive-tertiary" | "branded" | "success" | "success-primary" | "success-secondary" | "inverse";
42
+ color?: "primary" | "secondary" | "tertiary" | "destructive-primary" | "destructive-secondary" | "destructive-tertiary" | "branded" | "success" | "success-primary" | "success-secondary" | "success-tertiary" | "inverse";
43
43
  /**
44
44
  * The size of the button
45
45
  *
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  LinkButton_default
3
- } from "../__chunks/XSO53O27.js";
3
+ } from "../__chunks/HKGPCZ2V.js";
4
4
  import "../__chunks/JXZMI4WT.js";
5
5
  import "../__chunks/PKXXQ3OV.js";
6
6
  import "../__chunks/DSGIOBWG.js";
@@ -1,9 +1,9 @@
1
1
  "use strict";Object.defineProperty(exports, "__esModule", {value: true});
2
2
 
3
3
 
4
- var _3QJ5N4GAcjs = require('../__chunks/3QJ5N4GA.cjs');
5
- require('../__chunks/VG3KCHZI.cjs');
6
- require('../__chunks/R7VED2O3.cjs');
4
+ var _I37F5HVMcjs = require('../__chunks/I37F5HVM.cjs');
5
+ require('../__chunks/BTZDTIOB.cjs');
6
+ require('../__chunks/L4KE5YQS.cjs');
7
7
  require('../__chunks/33HJ72Y2.cjs');
8
8
  require('../__chunks/VA23P3ZI.cjs');
9
9
  require('../__chunks/VUANIQYP.cjs');
@@ -30,5 +30,5 @@ require('../__chunks/I64JGYX7.cjs');
30
30
 
31
31
 
32
32
 
33
- exports.AriaPopover = _3QJ5N4GAcjs.AriaPopover; exports.default = _3QJ5N4GAcjs.Popover_default;
33
+ exports.AriaPopover = _I37F5HVMcjs.AriaPopover; exports.default = _I37F5HVMcjs.Popover_default;
34
34
  //# sourceMappingURL=Popover.cjs.map
@@ -1,9 +1,9 @@
1
1
  import {
2
2
  AriaPopover,
3
3
  Popover_default
4
- } from "../__chunks/A7HHS3KY.js";
5
- import "../__chunks/77GCYQJQ.js";
6
- import "../__chunks/OSGLKEGE.js";
4
+ } from "../__chunks/DO56RCLX.js";
5
+ import "../__chunks/C6UG54GY.js";
6
+ import "../__chunks/LW7YGM7C.js";
7
7
  import "../__chunks/DSGIOBWG.js";
8
8
  import "../__chunks/ZEA5JDEB.js";
9
9
  import "../__chunks/5AR53MHD.js";
@@ -1,6 +1,6 @@
1
1
  "use strict";Object.defineProperty(exports, "__esModule", {value: true});
2
2
 
3
- var _DWAH45NNcjs = require('../__chunks/DWAH45NN.cjs');
3
+ var _S6D6YJNTcjs = require('../__chunks/S6D6YJNT.cjs');
4
4
  require('../__chunks/KX4HD3Q3.cjs');
5
5
  require('../__chunks/TZX4M4BC.cjs');
6
6
  require('../__chunks/EJTCFSQF.cjs');
@@ -10,15 +10,15 @@ require('../__chunks/A72TS5OX.cjs');
10
10
  require('../__chunks/3TXXNWWA.cjs');
11
11
  require('../__chunks/ZQFEITZH.cjs');
12
12
  require('../__chunks/4QLZTDKE.cjs');
13
- require('../__chunks/3QJ5N4GA.cjs');
14
- require('../__chunks/VG3KCHZI.cjs');
15
- require('../__chunks/R7VED2O3.cjs');
13
+ require('../__chunks/I37F5HVM.cjs');
14
+ require('../__chunks/BTZDTIOB.cjs');
15
+ require('../__chunks/L4KE5YQS.cjs');
16
16
  require('../__chunks/33HJ72Y2.cjs');
17
17
  require('../__chunks/VA23P3ZI.cjs');
18
18
  require('../__chunks/VUANIQYP.cjs');
19
19
  require('../__chunks/PSWX5DBC.cjs');
20
20
  require('../__chunks/M3L2KJQY.cjs');
21
- require('../__chunks/AVING5PW.cjs');
21
+ require('../__chunks/U6LLWKED.cjs');
22
22
  require('../__chunks/GQC7B3U6.cjs');
23
23
  require('../__chunks/ZDMSFZS3.cjs');
24
24
  require('../__chunks/63LUPH3X.cjs');
@@ -47,5 +47,5 @@ require('../__chunks/RFHPSEBF.cjs');
47
47
  require('../__chunks/I64JGYX7.cjs');
48
48
 
49
49
 
50
- exports.default = _DWAH45NNcjs.RichSelectList_default;
50
+ exports.default = _S6D6YJNTcjs.RichSelectList_default;
51
51
  //# sourceMappingURL=RichSelectList.cjs.map
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  RichSelectList_default
3
- } from "../__chunks/VVIDGIIT.js";
3
+ } from "../__chunks/RRAXSCWL.js";
4
4
  import "../__chunks/SSFANAKU.js";
5
5
  import "../__chunks/IISMRA4R.js";
6
6
  import "../__chunks/5WQ23BQE.js";
@@ -10,15 +10,15 @@ import "../__chunks/PKXXQ3OV.js";
10
10
  import "../__chunks/6VWFOSQZ.js";
11
11
  import "../__chunks/LIP6F5HL.js";
12
12
  import "../__chunks/CS6U6WBZ.js";
13
- import "../__chunks/A7HHS3KY.js";
14
- import "../__chunks/77GCYQJQ.js";
15
- import "../__chunks/OSGLKEGE.js";
13
+ import "../__chunks/DO56RCLX.js";
14
+ import "../__chunks/C6UG54GY.js";
15
+ import "../__chunks/LW7YGM7C.js";
16
16
  import "../__chunks/DSGIOBWG.js";
17
17
  import "../__chunks/ZEA5JDEB.js";
18
18
  import "../__chunks/5AR53MHD.js";
19
19
  import "../__chunks/K3H7QFPB.js";
20
20
  import "../__chunks/OXKLJY2L.js";
21
- import "../__chunks/XJW7XS7M.js";
21
+ import "../__chunks/2DU7NSCB.js";
22
22
  import "../__chunks/RMC2RSHW.js";
23
23
  import "../__chunks/PTWXXDFF.js";
24
24
  import "../__chunks/YCBSKN3Q.js";
@@ -1,8 +1,8 @@
1
1
  "use strict";Object.defineProperty(exports, "__esModule", {value: true});
2
2
 
3
- var _DU7RZXSRcjs = require('../__chunks/DU7RZXSR.cjs');
3
+ var _HFRUEPJMcjs = require('../__chunks/HFRUEPJM.cjs');
4
4
  require('../__chunks/GKECCWR3.cjs');
5
- require('../__chunks/AVING5PW.cjs');
5
+ require('../__chunks/U6LLWKED.cjs');
6
6
  require('../__chunks/LTM57QMY.cjs');
7
7
  require('../__chunks/JBNXAIXY.cjs');
8
8
  require('../__chunks/TF76F532.cjs');
@@ -12,5 +12,5 @@ require('../__chunks/GVEA7SLQ.cjs');
12
12
  require('../__chunks/I64JGYX7.cjs');
13
13
 
14
14
 
15
- exports.default = _DU7RZXSRcjs.SelectList;
15
+ exports.default = _HFRUEPJMcjs.SelectList;
16
16
  //# sourceMappingURL=SelectList.cjs.map
@@ -1,8 +1,8 @@
1
1
  import {
2
2
  SelectList
3
- } from "../__chunks/E6XEQ7AW.js";
3
+ } from "../__chunks/TYZIM5GF.js";
4
4
  import "../__chunks/HOUO3WV6.js";
5
- import "../__chunks/XJW7XS7M.js";
5
+ import "../__chunks/2DU7NSCB.js";
6
6
  import "../__chunks/2O6FDRTF.js";
7
7
  import "../__chunks/TGGJZ5GF.js";
8
8
  import "../__chunks/5OB72SMM.js";
@@ -6,4 +6,4 @@ export {
6
6
  ColorBaseDestructive700,
7
7
  ColorBaseGray800
8
8
  };
9
- //# sourceMappingURL=XJW7XS7M.js.map
9
+ //# sourceMappingURL=2DU7NSCB.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"sourcesContent":["/**\n * Do not edit directly\n * Generated on Fri, 01 Mar 2024 21:51:53 GMT\n */\n\nexport const ColorBaseBlack = \"#000000\";\nexport const ColorBaseDestructive100 = \"#fef3f5\";\nexport const ColorBaseDestructive200 = \"#fad6de\";\nexport const ColorBaseDestructive300 = \"#f2a2b2\";\nexport const ColorBaseDestructive700 = \"#d32a4b\";\nexport const ColorBaseDestructive800 = \"#81162c\";\nexport const ColorBaseDestructive900 = \"#55101d\";\nexport const ColorBaseGray10 = \"#cbcbcb\"; // Used as the default color for dividers and inner strokes\nexport const ColorBaseGray30 = \"#000000\"; // For IconButton background when on top of an image\nexport const ColorBaseGray60 = \"#000000\"; // Used for icon background in classroom video grid\nexport const ColorBaseGray80 = \"#000000\"; // Used as the background for modals\nexport const ColorBaseGray100 = \"#f7f7f7\";\nexport const ColorBaseGray200 = \"#f0f0f0\"; // Used for light mode backgrounds when showing card content on top\nexport const ColorBaseGray300 = \"#d0d0d0\"; // Used for component outlines, eg: select and textfield\nexport const ColorBaseGray700 = \"#767676\"; // For secondary text in light mode\nexport const ColorBaseGray800 = \"#353535\";\nexport const ColorBaseGray900 = \"#191919\"; // Default text color, Classroom background\nexport const ColorBaseOrange100 = \"#fdf2f0\";\nexport const ColorBaseOrange200 = \"#f6cdc4\";\nexport const ColorBaseOrange300 = \"#ec9987\";\nexport const ColorBaseOrange700 = \"#c34124\";\nexport const ColorBaseOrange800 = \"#732818\";\nexport const ColorBaseOrange900 = \"#4d1a10\";\nexport const ColorBasePrimary100 = \"#eff6fa\";\nexport const ColorBasePrimary200 = \"#c1dbe7\";\nexport const ColorBasePrimary300 = \"#84b7d0\";\nexport const ColorBasePrimary700 = \"#236482\";\nexport const ColorBasePrimary800 = \"#274858\";\nexport const ColorBasePrimary900 = \"#1b303b\";\nexport const ColorBaseSuccess100 = \"#eff7f1\";\nexport const ColorBaseSuccess200 = \"#bddcc6\";\nexport const ColorBaseSuccess300 = \"#81ba92\";\nexport const ColorBaseSuccess700 = \"#397b4d\";\nexport const ColorBaseSuccess800 = \"#2d4936\";\nexport const ColorBaseSuccess900 = \"#1e3124\";\nexport const ColorBasePurple100 = \"#f9f5fa\";\nexport const ColorBasePurple200 = \"#e8dceb\";\nexport const ColorBasePurple300 = \"#cdb4d3\";\nexport const ColorBasePurple700 = \"#8b5f95\";\nexport const ColorBasePurple800 = \"#523b58\";\nexport const ColorBasePurple900 = \"#37273b\";\nexport const ColorBaseYellow100 = \"#fdf5d9\";\nexport const ColorBaseYellow200 = \"#fbe8a3\";\nexport const ColorBaseYellow300 = \"#f8d663\";\nexport const ColorBaseYellow700 = \"#ffc929\";\nexport const ColorBaseYellow800 = \"#765f1c\";\nexport const ColorBaseYellow900 = \"#3b3009\";\nexport const ColorBaseWhite = \"#ffffff\";\nexport const ColorCambioBlack = \"#050500\";\nexport const ColorCambioWhite = \"#ffffff\";\nexport const ColorCambioGray100 = \"#faf4eb\";\nexport const ColorCambioGray200 = \"#e4dbd3\";\nexport const ColorCambioGray300 = \"#beb4ab\";\nexport const ColorCambioGray370 = \"#beb4ab\";\nexport const ColorCambioGray700 = \"#888077\";\nexport const ColorCambioGray800 = \"#5c554d\";\nexport const ColorCambioGray870 = \"#5c554d\";\nexport const ColorCambioGray900 = \"#312b23\";\nexport const ColorCambioDestructive100 = \"#ffdeda\";\nexport const ColorCambioDestructive300 = \"#ff8071\";\nexport const ColorCambioDestructive370 = \"#ff8071\";\nexport const ColorCambioDestructive700 = \"#c93f32\";\nexport const ColorCambioDestructive770 = \"#c93f32\";\nexport const ColorCambioDestructive900 = \"#6d0002\";\nexport const ColorCambioSuccess100 = \"#daf2c8\";\nexport const ColorCambioSuccess300 = \"#84ce64\";\nexport const ColorCambioSuccess370 = \"#84ce64\";\nexport const ColorCambioSuccess700 = \"#3c7f20\";\nexport const ColorCambioSuccess770 = \"#3c7f20\";\nexport const ColorCambioSuccess900 = \"#103e00\";\nexport const ColorCambioRed = \"#f56e56\";\nexport const ColorCambioOrange = \"#ff8f57\";\nexport const ColorCambioTan = \"#ffb47d\";\nexport const ColorCambioCream = \"#fffad1\";\nexport const ColorCambioPurple = \"#6840a8\";\nexport const ColorCambioLilac = \"#b59ef0\";\nexport const ColorCambioThistle = \"#d69ca4\";\nexport const ColorCambioPink = \"#ffccea\";\nexport const ColorCambioNavy = \"#191142\";\nexport const ColorCambioTeal = \"#44a6cf\";\nexport const ColorCambioSlate = \"#7c9fc6\";\nexport const ColorCambioSky = \"#b1e8fc\";\nexport const ColorCambioYellow700 = \"#ffe733\";\nexport const ColorCambioTransparentFull = \"#000000\";\nexport const Elevation400 = \"0px 16px 32px 0px #00000040\";\n"],"mappings":";AASO,IAAM,0BAA0B;AAWhC,IAAM,mBAAmB;","names":[]}
1
+ {"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"sourcesContent":["/**\n * Do not edit directly\n * Generated on Fri, 01 Mar 2024 22:17:47 GMT\n */\n\nexport const ColorBaseBlack = \"#000000\";\nexport const ColorBaseDestructive100 = \"#fef3f5\";\nexport const ColorBaseDestructive200 = \"#fad6de\";\nexport const ColorBaseDestructive300 = \"#f2a2b2\";\nexport const ColorBaseDestructive700 = \"#d32a4b\";\nexport const ColorBaseDestructive800 = \"#81162c\";\nexport const ColorBaseDestructive900 = \"#55101d\";\nexport const ColorBaseGray10 = \"#cbcbcb\"; // Used as the default color for dividers and inner strokes\nexport const ColorBaseGray30 = \"#000000\"; // For IconButton background when on top of an image\nexport const ColorBaseGray60 = \"#000000\"; // Used for icon background in classroom video grid\nexport const ColorBaseGray80 = \"#000000\"; // Used as the background for modals\nexport const ColorBaseGray100 = \"#f7f7f7\";\nexport const ColorBaseGray200 = \"#f0f0f0\"; // Used for light mode backgrounds when showing card content on top\nexport const ColorBaseGray300 = \"#d0d0d0\"; // Used for component outlines, eg: select and textfield\nexport const ColorBaseGray700 = \"#767676\"; // For secondary text in light mode\nexport const ColorBaseGray800 = \"#353535\";\nexport const ColorBaseGray900 = \"#191919\"; // Default text color, Classroom background\nexport const ColorBaseOrange100 = \"#fdf2f0\";\nexport const ColorBaseOrange200 = \"#f6cdc4\";\nexport const ColorBaseOrange300 = \"#ec9987\";\nexport const ColorBaseOrange700 = \"#c34124\";\nexport const ColorBaseOrange800 = \"#732818\";\nexport const ColorBaseOrange900 = \"#4d1a10\";\nexport const ColorBasePrimary100 = \"#eff6fa\";\nexport const ColorBasePrimary200 = \"#c1dbe7\";\nexport const ColorBasePrimary300 = \"#84b7d0\";\nexport const ColorBasePrimary700 = \"#236482\";\nexport const ColorBasePrimary800 = \"#274858\";\nexport const ColorBasePrimary900 = \"#1b303b\";\nexport const ColorBaseSuccess100 = \"#eff7f1\";\nexport const ColorBaseSuccess200 = \"#bddcc6\";\nexport const ColorBaseSuccess300 = \"#81ba92\";\nexport const ColorBaseSuccess700 = \"#397b4d\";\nexport const ColorBaseSuccess800 = \"#2d4936\";\nexport const ColorBaseSuccess900 = \"#1e3124\";\nexport const ColorBasePurple100 = \"#f9f5fa\";\nexport const ColorBasePurple200 = \"#e8dceb\";\nexport const ColorBasePurple300 = \"#cdb4d3\";\nexport const ColorBasePurple700 = \"#8b5f95\";\nexport const ColorBasePurple800 = \"#523b58\";\nexport const ColorBasePurple900 = \"#37273b\";\nexport const ColorBaseYellow100 = \"#fdf5d9\";\nexport const ColorBaseYellow200 = \"#fbe8a3\";\nexport const ColorBaseYellow300 = \"#f8d663\";\nexport const ColorBaseYellow700 = \"#ffc929\";\nexport const ColorBaseYellow800 = \"#765f1c\";\nexport const ColorBaseYellow900 = \"#3b3009\";\nexport const ColorBaseWhite = \"#ffffff\";\nexport const ColorCambioBlack = \"#050500\";\nexport const ColorCambioWhite = \"#ffffff\";\nexport const ColorCambioGray100 = \"#faf4eb\";\nexport const ColorCambioGray200 = \"#e4dbd3\";\nexport const ColorCambioGray300 = \"#beb4ab\";\nexport const ColorCambioGray370 = \"#beb4ab\";\nexport const ColorCambioGray700 = \"#888077\";\nexport const ColorCambioGray800 = \"#5c554d\";\nexport const ColorCambioGray870 = \"#5c554d\";\nexport const ColorCambioGray900 = \"#312b23\";\nexport const ColorCambioDestructive100 = \"#ffdeda\";\nexport const ColorCambioDestructive300 = \"#ff8071\";\nexport const ColorCambioDestructive370 = \"#ff8071\";\nexport const ColorCambioDestructive700 = \"#c93f32\";\nexport const ColorCambioDestructive770 = \"#c93f32\";\nexport const ColorCambioDestructive900 = \"#6d0002\";\nexport const ColorCambioSuccess100 = \"#daf2c8\";\nexport const ColorCambioSuccess300 = \"#84ce64\";\nexport const ColorCambioSuccess370 = \"#84ce64\";\nexport const ColorCambioSuccess700 = \"#3c7f20\";\nexport const ColorCambioSuccess770 = \"#3c7f20\";\nexport const ColorCambioSuccess900 = \"#103e00\";\nexport const ColorCambioRed = \"#f56e56\";\nexport const ColorCambioOrange = \"#ff8f57\";\nexport const ColorCambioTan = \"#ffb47d\";\nexport const ColorCambioCream = \"#fffad1\";\nexport const ColorCambioPurple = \"#6840a8\";\nexport const ColorCambioLilac = \"#b59ef0\";\nexport const ColorCambioThistle = \"#d69ca4\";\nexport const ColorCambioPink = \"#ffccea\";\nexport const ColorCambioNavy = \"#191142\";\nexport const ColorCambioTeal = \"#44a6cf\";\nexport const ColorCambioSlate = \"#7c9fc6\";\nexport const ColorCambioSky = \"#b1e8fc\";\nexport const ColorCambioYellow700 = \"#ffe733\";\nexport const ColorCambioTransparentFull = \"#000000\";\nexport const Elevation400 = \"0px 16px 32px 0px #00000040\";\n"],"mappings":";AASO,IAAM,0BAA0B;AAWhC,IAAM,mBAAmB;","names":[]}
@@ -1,6 +1,6 @@
1
1
  "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
2
2
 
3
- var _R7VED2O3cjs = require('./R7VED2O3.cjs');
3
+ var _L4KE5YQScjs = require('./L4KE5YQS.cjs');
4
4
 
5
5
 
6
6
  var _VA23P3ZIcjs = require('./VA23P3ZI.cjs');
@@ -129,7 +129,7 @@ var ModalDialog = _react.forwardRef.call(void 0,
129
129
  }
130
130
  },
131
131
  children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
132
- _R7VED2O3cjs.IconButton_default,
132
+ _L4KE5YQScjs.IconButton_default,
133
133
  {
134
134
  onClick: () => state.close(),
135
135
  color: "tertiary",
@@ -156,4 +156,4 @@ var ModalDialog_default = ModalDialog;
156
156
 
157
157
 
158
158
  exports.AriaModalOverlay = AriaModalOverlay; exports.AriaModal = AriaModal; exports.ModalDialog_default = ModalDialog_default;
159
- //# sourceMappingURL=VG3KCHZI.cjs.map
159
+ //# sourceMappingURL=BTZDTIOB.cjs.map
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  IconButton_default
3
- } from "./OSGLKEGE.js";
3
+ } from "./LW7YGM7C.js";
4
4
  import {
5
5
  Dialog_default
6
6
  } from "./ZEA5JDEB.js";
@@ -156,4 +156,4 @@ export {
156
156
  AriaModal,
157
157
  ModalDialog_default
158
158
  };
159
- //# sourceMappingURL=77GCYQJQ.js.map
159
+ //# sourceMappingURL=C6UG54GY.js.map
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  ModalDialog_default
3
- } from "./77GCYQJQ.js";
3
+ } from "./C6UG54GY.js";
4
4
  import {
5
5
  Dialog_default
6
6
  } from "./ZEA5JDEB.js";
@@ -140,4 +140,4 @@ export {
140
140
  AriaPopover,
141
141
  Popover_default
142
142
  };
143
- //# sourceMappingURL=A7HHS3KY.js.map
143
+ //# sourceMappingURL=DO56RCLX.js.map
@@ -4,7 +4,7 @@ var _GKECCWR3cjs = require('./GKECCWR3.cjs');
4
4
 
5
5
 
6
6
 
7
- var _AVING5PWcjs = require('./AVING5PW.cjs');
7
+ var _U6LLWKEDcjs = require('./U6LLWKED.cjs');
8
8
 
9
9
 
10
10
  var _LTM57QMYcjs = require('./LTM57QMY.cjs');
@@ -100,7 +100,7 @@ function SelectList({
100
100
  children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
101
101
  "path",
102
102
  {
103
- fill: errorText ? _AVING5PWcjs.ColorBaseDestructive700 : _AVING5PWcjs.ColorBaseGray800,
103
+ fill: errorText ? _U6LLWKEDcjs.ColorBaseDestructive700 : _U6LLWKEDcjs.ColorBaseGray800,
104
104
  d: "M15.88 9.29 12 13.17 8.12 9.29a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
105
105
  }
106
106
  )
@@ -124,4 +124,4 @@ SelectList.Option = _GKECCWR3cjs.SelectOption_default;
124
124
 
125
125
 
126
126
  exports.SelectList = SelectList;
127
- //# sourceMappingURL=DU7RZXSR.cjs.map
127
+ //# sourceMappingURL=HFRUEPJM.cjs.map
@@ -121,4 +121,4 @@ var LinkButton_default = LinkButton;
121
121
  export {
122
122
  LinkButton_default
123
123
  };
124
- //# sourceMappingURL=XSO53O27.js.map
124
+ //# sourceMappingURL=HKGPCZ2V.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/LinkButton/LinkButton.tsx","css-module:./LinkButton.module.css#css-module"],"sourcesContent":["import { forwardRef, type HtmlHTMLAttributes } from \"react\";\nimport classNames from \"classnames\";\nimport React from \"react\";\nimport { type Size } from \"../constants\";\nimport Typography from \"../Typography/Typography\";\nimport buttonStyles from \"../Button/Button.module.css\";\nimport iconSize from \"../Button/constants/iconSize\";\nimport textVariant from \"../Button/constants/textVariant\";\nimport styles from \"./LinkButton.module.css\";\n\nimport { classicColor, cambioColor } from \"../Button/constants/color\";\nimport {\n classicBackgroundColor,\n cambioBackgroundColor,\n} from \"../colors//backgroundColor\";\nimport {\n classicForegroundColor,\n cambioForegroundColor,\n} from \"../colors/foregroundColor\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\n\ntype LinkButtonProps = {\n /**\n * Test id for the button\n */\n \"data-testid\"?: string;\n /**\n * The text to be displayed inside the button\n */\n text: string;\n /**\n * The link that the LinkButton should route to.\n *\n */\n href?: string;\n /**\n * The target attribute specifies where to open the linked document.\n *\n */\n target?: \"_blank\" | \"_self\" | \"_parent\" | \"_top\";\n /**\n * The rel attribute specifies the relationship between the document and the link.\n *\n */\n rel?: HtmlHTMLAttributes<HTMLAnchorElement>[\"rel\"];\n /**\n * The color of the button\n *\n * Classic only:\n * * `inverse`\n * * `success`\n *\n * Cambio only:\n * * `success-primary`\n * * `success-secondary`\n * * `success-tertiary`\n *\n * @defaultValue \"primary\"\n */\n color?:\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"destructive-primary\"\n | \"destructive-secondary\"\n | \"destructive-tertiary\"\n | \"branded\"\n | \"success\"\n | \"success-primary\"\n | \"success-secondary\"\n | \"success-tertiary\"\n | \"inverse\";\n /**\n * The size of the button\n *\n * Classic:\n * * `sm`: 32px\n * * `md`: 40px\n * * `lg`: 48px\n *\n * Cambio:\n * * `sm`: 32px\n * * `md`: 48px\n * * `lg`: 64px\n *\n * @defaultValue \"md\"\n */\n size?: (typeof Size)[number];\n /**\n * If `true`, the button will take up the full width of its container\n *\n * @defaultValue false\n */\n fullWidth?: boolean;\n /**\n * The icon to be displayed at the start of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n * Note: startIcon is not supported in the Cambio theme\n */\n startIcon?: React.ComponentType<{ className?: string }>;\n /**\n * The icon to be displayed at the end of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n * Note: endIcon is not supported in the Cambio theme\n */\n endIcon?: React.ComponentType<{ className?: string }>;\n /**\n * An optional onClick event. This is used for certain wrapper's support (such as react-router-dom).\n */\n onClick?: React.MouseEventHandler<HTMLAnchorElement>;\n};\n\n/**\n * [LinkButton](https://cambly-syntax.vercel.app/?path=/docs/components-linkbutton--docs) is a \"variation\" of Button that should look identical to Button, but should be used to render links instead.\n */\nconst LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(\n (\n {\n text,\n href,\n target,\n rel,\n \"data-testid\": dataTestId,\n color = \"primary\",\n size = \"md\",\n fullWidth = false,\n startIcon: StartIcon,\n endIcon: EndIcon,\n onClick,\n }: LinkButtonProps,\n ref,\n ) => {\n const { themeName } = useTheme();\n\n const foregroundColorClass =\n themeName === \"classic\"\n ? classicForegroundColor(classicColor(color))\n : cambioForegroundColor(cambioColor(color));\n\n const backgroundColorClass =\n themeName === \"classic\"\n ? classicBackgroundColor(classicColor(color))\n : cambioBackgroundColor(cambioColor(color));\n\n return (\n <a\n href={href}\n data-testid={dataTestId}\n target={target}\n ref={ref}\n rel={rel}\n className={classNames(\n styles.linkButton,\n buttonStyles.button,\n foregroundColorClass,\n backgroundColorClass,\n themeName === \"classic\"\n ? buttonStyles[size]\n : buttonStyles[`${size}Cambio`],\n {\n [buttonStyles.fullWidth]: fullWidth,\n [styles.fitContent]: !fullWidth,\n [buttonStyles.buttonGap]:\n themeName === \"classic\" && (size === \"lg\" || size === \"md\"),\n [buttonStyles.secondaryBorder]:\n themeName === \"classic\" && color === \"secondary\",\n [buttonStyles.secondaryDestructiveBorder]:\n themeName === \"classic\" && color === \"destructive-secondary\",\n },\n )}\n onClick={onClick}\n >\n {StartIcon && themeName === \"classic\" && (\n <StartIcon\n className={classNames(\n buttonStyles.icon,\n iconSize[size],\n foregroundColorClass,\n )}\n />\n )}\n <Typography\n size={themeName === \"classic\" ? textVariant[size] : textVariant[size]}\n >\n <span\n // Temporary - until we have cambio colors on Typogrphay\n className={foregroundColorClass}\n style={{ fontWeight: 500 }}\n >\n {text}\n </span>\n </Typography>\n {EndIcon && themeName === \"classic\" && (\n <EndIcon\n className={classNames(\n buttonStyles.icon,\n iconSize[size],\n foregroundColorClass,\n )}\n />\n )}\n </a>\n );\n },\n);\n\nLinkButton.displayName = \"LinkButton\";\n\nexport default LinkButton;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/LinkButton/LinkButton.module.css\"; export default {\"linkButton\":\"_linkButton_1qjrb_1\",\"fitContent\":\"_fitContent_1qjrb_11\"}"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAS,kBAA2C;AACpD,OAAO,gBAAgB;;;ACD6E,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,cAAa,uBAAsB;;;AD+IpL,SA4BI,KA5BJ;AA9BN,IAAM,aAAa;AAAA,EACjB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,SAAS;AAAA,IACT;AAAA,EACF,GACA,QACG;AACH,UAAM,EAAE,UAAU,IAAI,SAAS;AAE/B,UAAM,uBACJ,cAAc,YACV,uBAAuB,aAAa,KAAK,CAAC,IAC1C,sBAAsB,YAAY,KAAK,CAAC;AAE9C,UAAM,uBACJ,cAAc,YACV,uBAAuB,aAAa,KAAK,CAAC,IAC1C,sBAAsB,YAAY,KAAK,CAAC;AAE9C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,UACT,0BAAO;AAAA,UACP,sBAAa;AAAA,UACb;AAAA,UACA;AAAA,UACA,cAAc,YACV,sBAAa,IAAI,IACjB,sBAAa,GAAG,YAAY;AAAA,UAChC;AAAA,YACE,CAAC,sBAAa,SAAS,GAAG;AAAA,YAC1B,CAAC,0BAAO,UAAU,GAAG,CAAC;AAAA,YACtB,CAAC,sBAAa,SAAS,GACrB,cAAc,cAAc,SAAS,QAAQ,SAAS;AAAA,YACxD,CAAC,sBAAa,eAAe,GAC3B,cAAc,aAAa,UAAU;AAAA,YACvC,CAAC,sBAAa,0BAA0B,GACtC,cAAc,aAAa,UAAU;AAAA,UACzC;AAAA,QACF;AAAA,QACA;AAAA,QAEC;AAAA,uBAAa,cAAc,aAC1B;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT,sBAAa;AAAA,gBACb,iBAAS,IAAI;AAAA,gBACb;AAAA,cACF;AAAA;AAAA,UACF;AAAA,UAEF;AAAA,YAAC;AAAA;AAAA,cACC,MAAM,cAAc,YAAY,oBAAY,IAAI,IAAI,oBAAY,IAAI;AAAA,cAEpE;AAAA,gBAAC;AAAA;AAAA,kBAEC,WAAW;AAAA,kBACX,OAAO,EAAE,YAAY,IAAI;AAAA,kBAExB;AAAA;AAAA,cACH;AAAA;AAAA,UACF;AAAA,UACC,WAAW,cAAc,aACxB;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT,sBAAa;AAAA,gBACb,iBAAS,IAAI;AAAA,gBACb;AAAA,cACF;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AAEzB,IAAO,qBAAQ;","names":[]}
@@ -1,6 +1,6 @@
1
1
  "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
2
2
 
3
- var _VG3KCHZIcjs = require('./VG3KCHZI.cjs');
3
+ var _BTZDTIOBcjs = require('./BTZDTIOB.cjs');
4
4
 
5
5
 
6
6
  var _VA23P3ZIcjs = require('./VA23P3ZI.cjs');
@@ -99,7 +99,7 @@ var Popover = _react.forwardRef.call(void 0, function Popover2(props, ref) {
99
99
  } = props;
100
100
  const modal = !children || modalProp;
101
101
  const modalNode = /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
102
- _VG3KCHZIcjs.ModalDialog_default,
102
+ _BTZDTIOBcjs.ModalDialog_default,
103
103
  {
104
104
  accessibilityLabel,
105
105
  accessibilityCloseLabel,
@@ -140,4 +140,4 @@ var Popover_default = Popover;
140
140
 
141
141
 
142
142
  exports.AriaPopover = AriaPopover; exports.Popover_default = Popover_default;
143
- //# sourceMappingURL=3QJ5N4GA.cjs.map
143
+ //# sourceMappingURL=I37F5HVM.cjs.map
@@ -92,4 +92,4 @@ var IconButton_default = IconButton;
92
92
 
93
93
 
94
94
  exports.IconButton_default = IconButton_default;
95
- //# sourceMappingURL=R7VED2O3.cjs.map
95
+ //# sourceMappingURL=L4KE5YQS.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/IconButton/IconButton.tsx","css-module:./IconButton.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,gBAAgB;AAKvB,SAAgB,kBAAkB;;;ACLkE,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,sBAAqB,+BAA8B,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,YAAW,sBAAqB,YAAW,sBAAqB,YAAW,sBAAqB,UAAS,oBAAmB,UAAS,oBAAmB,UAAS,oBAAmB,gBAAe,2BAA0B,gBAAe,2BAA0B,gBAAe,2BAA0B,gBAAe,0BAAyB;;;AD8JrlB;AA7IR,IAAM,kBAAkB;AAAA,EACtB,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AACb;AAEA,IAAM,iBAAiB;AAAA,EACrB,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AACb;AA6EA,IAAM,aAAa;AAAA,EACjB,CACE;AAAA,IACE;AAAA,IACA,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,WAAW;AAAA,IACX,MAAM;AAAA,IACN,OAAO;AAAA,IACP;AAAA,IACA;AAAA,EACF,GACA,QACG;AACH,UAAM,aAAa,cAAc;AACjC,UAAM,EAAE,UAAU,IAAI,SAAS;AAE/B,UAAM,uBACJ,cAAc,YACV,uBAAuB,aAAa,KAAK,CAAC,IAC1C,sBAAsB,YAAY,KAAK,CAAC;AAE9C,UAAM,uBACJ,cAAc,YACV,uBAAuB,aAAa,KAAK,CAAC,IAC1C,sBAAsB,YAAY,KAAK,CAAC;AAE9C,WACE;AAAA,MAAC;AAAA;AAAA,QACC,cAAY;AAAA,QACZ,eAAa;AAAA,QACb,MAAK;AAAA,QACL,OAAO;AAAA,QACP,UAAU,CAAC,cAAc;AAAA,QACzB;AAAA,QACA,WAAW;AAAA,UACT,0BAAO;AAAA,UACP;AAAA,UACA;AAAA,UACA,cAAc,YAAY,0BAAO,IAAI,IAAI,0BAAO,GAAG,YAAY;AAAA,UAC/D;AAAA,YACE,CAAC,sBAAa,eAAe,GAC3B,cAAc,aAAa,UAAU;AAAA,YACvC,CAAC,sBAAa,0BAA0B,GACtC,cAAc,aAAa,UAAU;AAAA,YACvC,CAAC,0BAAO,kBAAkB,GACvB,cAAc,aACb,CAAC,CAAC,aAAa,uBAAuB,EAAE,SAAS,KAAK,KACxD,cAAc;AAAA,UAClB;AAAA,QACF;AAAA,QACA;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,WACE,cAAc,YACV,gBAAgB,IAAI,IACpB,eAAe,IAAI;AAAA;AAAA,QAE3B;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AAEzB,IAAO,qBAAQ","sourcesContent":["import classNames from \"classnames\";\nimport {\n classicForegroundColor,\n cambioForegroundColor,\n} from \"../colors/foregroundColor\";\nimport React, { forwardRef } from \"react\";\nimport { type Size } from \"../constants\";\nimport styles from \"./IconButton.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\nimport { classicColor, cambioColor } from \"../Button/constants/color\";\nimport buttonStyles from \"../Button/Button.module.css\";\nimport {\n classicBackgroundColor,\n cambioBackgroundColor,\n} from \"../colors/backgroundColor\";\n\nconst classicIconSize = {\n sm: styles.smIcon,\n md: styles.mdIcon,\n lg: styles.lgIcon,\n};\n\nconst cambioIconSize = {\n sm: styles.smIconCambio,\n md: styles.mdIconCambio,\n lg: styles.lgIconCambio,\n xl: styles.xlIconCambio,\n};\n\ntype IconButtonProps = {\n /**\n * The color of the button\n *\n * Classic only:\n * * `inverse`\n * * `success`\n *\n * Cambio only:\n * * `success-primary`\n * * `success-secondary`\n * * `success-tertiary`\n *\n * @defaultValue \"primary\"\n */\n color?:\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"destructive-primary\"\n | \"destructive-secondary\"\n | \"destructive-tertiary\"\n | \"branded\"\n | \"success\"\n | \"success-primary\"\n | \"success-secondary\"\n | \"success-tertiary\"\n | \"inverse\";\n /**\n * Test id for the button\n */\n \"data-testid\"?: string;\n /**\n * The size of the button\n *\n * Classic:\n * * `sm`: 32px\n * * `md`: 40px\n * * `lg`: 48px\n *\n * Cambio:\n * * `sm`: 32px\n * * `md`: 48px\n * * `lg`: 64px\n *\n * @defaultValue \"md\"\n */\n size?: (typeof Size)[number];\n /**\n * The label to be used for accessibility\n */\n accessibilityLabel: string;\n /**\n * The icon to be displayed. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n */\n icon: React.ComponentType<{ className?: string }>;\n /**\n * If `true`, the button will be disabled\n *\n * @defaultValue false\n */\n disabled?: boolean;\n /**\n * The callback to be called when the button is clicked\n */\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n /**\n * The tooltip to be displayed when the user hovers over the button\n */\n tooltip?: string;\n};\n\n/**\n * [IconButton](https://cambly-syntax.vercel.app/?path=/docs/components-iconbutton--docs) is a clickable element that is used to perform an action.\n */\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n (\n {\n accessibilityLabel,\n color = \"primary\",\n \"data-testid\": dataTestId,\n disabled = false,\n icon: Icon,\n size = \"md\",\n tooltip,\n onClick,\n }: IconButtonProps,\n ref,\n ) => {\n const isHydrated = useIsHydrated();\n const { themeName } = useTheme();\n\n const foregroundColorClass =\n themeName === \"classic\"\n ? classicForegroundColor(classicColor(color))\n : cambioForegroundColor(cambioColor(color));\n\n const backgroundColorClass =\n themeName === \"classic\"\n ? classicBackgroundColor(classicColor(color))\n : cambioBackgroundColor(cambioColor(color));\n\n return (\n <button\n aria-label={accessibilityLabel}\n data-testid={dataTestId}\n type=\"button\"\n title={tooltip}\n disabled={!isHydrated || disabled}\n onClick={onClick}\n className={classNames(\n styles.iconButton,\n foregroundColorClass,\n backgroundColorClass,\n themeName === \"classic\" ? styles[size] : styles[`${size}Cambio`],\n {\n [buttonStyles.secondaryBorder]:\n themeName === \"classic\" && color === \"secondary\",\n [buttonStyles.secondaryDestructiveBorder]:\n themeName === \"classic\" && color === \"destructive-secondary\",\n [styles.iconButtonNoBorder]:\n (themeName === \"classic\" &&\n ![\"secondary\", \"destructive-secondary\"].includes(color)) ||\n themeName === \"cambio\",\n },\n )}\n ref={ref}\n >\n <Icon\n className={\n themeName === \"classic\"\n ? classicIconSize[size]\n : cambioIconSize[size]\n }\n />\n </button>\n );\n },\n);\n\nIconButton.displayName = \"IconButton\";\n\nexport default IconButton;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/IconButton/IconButton.module.css\"; export default {\"iconButton\":\"_iconButton_1q9cs_1\",\"iconButtonNoBorder\":\"_iconButtonNoBorder_1q9cs_8\",\"sm\":\"_sm_1q9cs_49\",\"md\":\"_md_1q9cs_54\",\"lg\":\"_lg_1q9cs_59\",\"smCambio\":\"_smCambio_1q9cs_64\",\"mdCambio\":\"_mdCambio_1q9cs_69\",\"lgCambio\":\"_lgCambio_1q9cs_74\",\"smIcon\":\"_smIcon_1q9cs_79\",\"mdIcon\":\"_mdIcon_1q9cs_86\",\"lgIcon\":\"_lgIcon_1q9cs_93\",\"smIconCambio\":\"_smIconCambio_1q9cs_100\",\"mdIconCambio\":\"_mdIconCambio_1q9cs_107\",\"lgIconCambio\":\"_lgIconCambio_1q9cs_114\",\"xlIconCambio\":\"_xlIconCambio_1q9cs_121\"}"]}
@@ -92,4 +92,4 @@ var IconButton_default = IconButton;
92
92
  export {
93
93
  IconButton_default
94
94
  };
95
- //# sourceMappingURL=OSGLKEGE.js.map
95
+ //# sourceMappingURL=LW7YGM7C.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/IconButton/IconButton.tsx","css-module:./IconButton.module.css#css-module"],"sourcesContent":["import classNames from \"classnames\";\nimport {\n classicForegroundColor,\n cambioForegroundColor,\n} from \"../colors/foregroundColor\";\nimport React, { forwardRef } from \"react\";\nimport { type Size } from \"../constants\";\nimport styles from \"./IconButton.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\nimport { classicColor, cambioColor } from \"../Button/constants/color\";\nimport buttonStyles from \"../Button/Button.module.css\";\nimport {\n classicBackgroundColor,\n cambioBackgroundColor,\n} from \"../colors/backgroundColor\";\n\nconst classicIconSize = {\n sm: styles.smIcon,\n md: styles.mdIcon,\n lg: styles.lgIcon,\n};\n\nconst cambioIconSize = {\n sm: styles.smIconCambio,\n md: styles.mdIconCambio,\n lg: styles.lgIconCambio,\n xl: styles.xlIconCambio,\n};\n\ntype IconButtonProps = {\n /**\n * The color of the button\n *\n * Classic only:\n * * `inverse`\n * * `success`\n *\n * Cambio only:\n * * `success-primary`\n * * `success-secondary`\n * * `success-tertiary`\n *\n * @defaultValue \"primary\"\n */\n color?:\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"destructive-primary\"\n | \"destructive-secondary\"\n | \"destructive-tertiary\"\n | \"branded\"\n | \"success\"\n | \"success-primary\"\n | \"success-secondary\"\n | \"success-tertiary\"\n | \"inverse\";\n /**\n * Test id for the button\n */\n \"data-testid\"?: string;\n /**\n * The size of the button\n *\n * Classic:\n * * `sm`: 32px\n * * `md`: 40px\n * * `lg`: 48px\n *\n * Cambio:\n * * `sm`: 32px\n * * `md`: 48px\n * * `lg`: 64px\n *\n * @defaultValue \"md\"\n */\n size?: (typeof Size)[number];\n /**\n * The label to be used for accessibility\n */\n accessibilityLabel: string;\n /**\n * The icon to be displayed. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n */\n icon: React.ComponentType<{ className?: string }>;\n /**\n * If `true`, the button will be disabled\n *\n * @defaultValue false\n */\n disabled?: boolean;\n /**\n * The callback to be called when the button is clicked\n */\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n /**\n * The tooltip to be displayed when the user hovers over the button\n */\n tooltip?: string;\n};\n\n/**\n * [IconButton](https://cambly-syntax.vercel.app/?path=/docs/components-iconbutton--docs) is a clickable element that is used to perform an action.\n */\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n (\n {\n accessibilityLabel,\n color = \"primary\",\n \"data-testid\": dataTestId,\n disabled = false,\n icon: Icon,\n size = \"md\",\n tooltip,\n onClick,\n }: IconButtonProps,\n ref,\n ) => {\n const isHydrated = useIsHydrated();\n const { themeName } = useTheme();\n\n const foregroundColorClass =\n themeName === \"classic\"\n ? classicForegroundColor(classicColor(color))\n : cambioForegroundColor(cambioColor(color));\n\n const backgroundColorClass =\n themeName === \"classic\"\n ? classicBackgroundColor(classicColor(color))\n : cambioBackgroundColor(cambioColor(color));\n\n return (\n <button\n aria-label={accessibilityLabel}\n data-testid={dataTestId}\n type=\"button\"\n title={tooltip}\n disabled={!isHydrated || disabled}\n onClick={onClick}\n className={classNames(\n styles.iconButton,\n foregroundColorClass,\n backgroundColorClass,\n themeName === \"classic\" ? styles[size] : styles[`${size}Cambio`],\n {\n [buttonStyles.secondaryBorder]:\n themeName === \"classic\" && color === \"secondary\",\n [buttonStyles.secondaryDestructiveBorder]:\n themeName === \"classic\" && color === \"destructive-secondary\",\n [styles.iconButtonNoBorder]:\n (themeName === \"classic\" &&\n ![\"secondary\", \"destructive-secondary\"].includes(color)) ||\n themeName === \"cambio\",\n },\n )}\n ref={ref}\n >\n <Icon\n className={\n themeName === \"classic\"\n ? classicIconSize[size]\n : cambioIconSize[size]\n }\n />\n </button>\n );\n },\n);\n\nIconButton.displayName = \"IconButton\";\n\nexport default IconButton;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/IconButton/IconButton.module.css\"; export default {\"iconButton\":\"_iconButton_1q9cs_1\",\"iconButtonNoBorder\":\"_iconButtonNoBorder_1q9cs_8\",\"sm\":\"_sm_1q9cs_49\",\"md\":\"_md_1q9cs_54\",\"lg\":\"_lg_1q9cs_59\",\"smCambio\":\"_smCambio_1q9cs_64\",\"mdCambio\":\"_mdCambio_1q9cs_69\",\"lgCambio\":\"_lgCambio_1q9cs_74\",\"smIcon\":\"_smIcon_1q9cs_79\",\"mdIcon\":\"_mdIcon_1q9cs_86\",\"lgIcon\":\"_lgIcon_1q9cs_93\",\"smIconCambio\":\"_smIconCambio_1q9cs_100\",\"mdIconCambio\":\"_mdIconCambio_1q9cs_107\",\"lgIconCambio\":\"_lgIconCambio_1q9cs_114\",\"xlIconCambio\":\"_xlIconCambio_1q9cs_121\"}"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,gBAAgB;AAKvB,SAAgB,kBAAkB;;;ACLkE,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,sBAAqB,+BAA8B,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,YAAW,sBAAqB,YAAW,sBAAqB,YAAW,sBAAqB,UAAS,oBAAmB,UAAS,oBAAmB,UAAS,oBAAmB,gBAAe,2BAA0B,gBAAe,2BAA0B,gBAAe,2BAA0B,gBAAe,0BAAyB;;;AD8JrlB;AA7IR,IAAM,kBAAkB;AAAA,EACtB,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AACb;AAEA,IAAM,iBAAiB;AAAA,EACrB,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AACb;AA6EA,IAAM,aAAa;AAAA,EACjB,CACE;AAAA,IACE;AAAA,IACA,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,WAAW;AAAA,IACX,MAAM;AAAA,IACN,OAAO;AAAA,IACP;AAAA,IACA;AAAA,EACF,GACA,QACG;AACH,UAAM,aAAa,cAAc;AACjC,UAAM,EAAE,UAAU,IAAI,SAAS;AAE/B,UAAM,uBACJ,cAAc,YACV,uBAAuB,aAAa,KAAK,CAAC,IAC1C,sBAAsB,YAAY,KAAK,CAAC;AAE9C,UAAM,uBACJ,cAAc,YACV,uBAAuB,aAAa,KAAK,CAAC,IAC1C,sBAAsB,YAAY,KAAK,CAAC;AAE9C,WACE;AAAA,MAAC;AAAA;AAAA,QACC,cAAY;AAAA,QACZ,eAAa;AAAA,QACb,MAAK;AAAA,QACL,OAAO;AAAA,QACP,UAAU,CAAC,cAAc;AAAA,QACzB;AAAA,QACA,WAAW;AAAA,UACT,0BAAO;AAAA,UACP;AAAA,UACA;AAAA,UACA,cAAc,YAAY,0BAAO,IAAI,IAAI,0BAAO,GAAG,YAAY;AAAA,UAC/D;AAAA,YACE,CAAC,sBAAa,eAAe,GAC3B,cAAc,aAAa,UAAU;AAAA,YACvC,CAAC,sBAAa,0BAA0B,GACtC,cAAc,aAAa,UAAU;AAAA,YACvC,CAAC,0BAAO,kBAAkB,GACvB,cAAc,aACb,CAAC,CAAC,aAAa,uBAAuB,EAAE,SAAS,KAAK,KACxD,cAAc;AAAA,UAClB;AAAA,QACF;AAAA,QACA;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,WACE,cAAc,YACV,gBAAgB,IAAI,IACpB,eAAe,IAAI;AAAA;AAAA,QAE3B;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AAEzB,IAAO,qBAAQ;","names":[]}
@@ -8,7 +8,7 @@ import {
8
8
  } from "./LIP6F5HL.js";
9
9
  import {
10
10
  Popover_default
11
- } from "./A7HHS3KY.js";
11
+ } from "./DO56RCLX.js";
12
12
  import {
13
13
  DialogContext
14
14
  } from "./ZEA5JDEB.js";
@@ -18,7 +18,7 @@ import {
18
18
  import {
19
19
  ColorBaseDestructive700,
20
20
  ColorBaseGray800
21
- } from "./XJW7XS7M.js";
21
+ } from "./2DU7NSCB.js";
22
22
  import {
23
23
  RichSelectSection_default
24
24
  } from "./RMC2RSHW.js";
@@ -267,4 +267,4 @@ var RichSelectList_default = Object.assign(RichSelectList, {
267
267
  export {
268
268
  RichSelectList_default
269
269
  };
270
- //# sourceMappingURL=VVIDGIIT.js.map
270
+ //# sourceMappingURL=RRAXSCWL.js.map
@@ -8,7 +8,7 @@ var _KX4HD3Q3cjs = require('./KX4HD3Q3.cjs');
8
8
  var _ZQFEITZHcjs = require('./ZQFEITZH.cjs');
9
9
 
10
10
 
11
- var _3QJ5N4GAcjs = require('./3QJ5N4GA.cjs');
11
+ var _I37F5HVMcjs = require('./I37F5HVM.cjs');
12
12
 
13
13
 
14
14
  var _VA23P3ZIcjs = require('./VA23P3ZI.cjs');
@@ -18,7 +18,7 @@ var _M3L2KJQYcjs = require('./M3L2KJQY.cjs');
18
18
 
19
19
 
20
20
 
21
- var _AVING5PWcjs = require('./AVING5PW.cjs');
21
+ var _U6LLWKEDcjs = require('./U6LLWKED.cjs');
22
22
 
23
23
 
24
24
  var _GQC7B3U6cjs = require('./GQC7B3U6.cjs');
@@ -174,7 +174,7 @@ function RichSelectList(props) {
174
174
  })
175
175
  ),
176
176
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
177
- _3QJ5N4GAcjs.Popover_default,
177
+ _I37F5HVMcjs.Popover_default,
178
178
  {
179
179
  ref: overlayHandlerRef,
180
180
  disabled,
@@ -232,7 +232,7 @@ function RichSelectList(props) {
232
232
  children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
233
233
  "path",
234
234
  {
235
- fill: errorText ? _AVING5PWcjs.ColorBaseDestructive700 : _AVING5PWcjs.ColorBaseGray800,
235
+ fill: errorText ? _U6LLWKEDcjs.ColorBaseDestructive700 : _U6LLWKEDcjs.ColorBaseGray800,
236
236
  d: "M15.88 9.29 12 13.17 8.12 9.29a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
237
237
  }
238
238
  )
@@ -267,4 +267,4 @@ var RichSelectList_default = Object.assign(RichSelectList, {
267
267
 
268
268
 
269
269
  exports.RichSelectList_default = RichSelectList_default;
270
- //# sourceMappingURL=DWAH45NN.cjs.map
270
+ //# sourceMappingURL=S6D6YJNT.cjs.map
@@ -4,7 +4,7 @@ import {
4
4
  import {
5
5
  ColorBaseDestructive700,
6
6
  ColorBaseGray800
7
- } from "./XJW7XS7M.js";
7
+ } from "./2DU7NSCB.js";
8
8
  import {
9
9
  Focus_module_default
10
10
  } from "./2O6FDRTF.js";
@@ -124,4 +124,4 @@ SelectList.Option = SelectOption_default;
124
124
  export {
125
125
  SelectList
126
126
  };
127
- //# sourceMappingURL=E6XEQ7AW.js.map
127
+ //# sourceMappingURL=TYZIM5GF.js.map
@@ -6,4 +6,4 @@ var ColorBaseGray800 = "#353535";
6
6
 
7
7
 
8
8
  exports.ColorBaseDestructive700 = ColorBaseDestructive700; exports.ColorBaseGray800 = ColorBaseGray800;
9
- //# sourceMappingURL=AVING5PW.cjs.map
9
+ //# sourceMappingURL=U6LLWKED.cjs.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"names":[],"mappings":";AASO,IAAM,0BAA0B;AAWhC,IAAM,mBAAmB","sourcesContent":["/**\n * Do not edit directly\n * Generated on Fri, 01 Mar 2024 21:51:53 GMT\n */\n\nexport const ColorBaseBlack = \"#000000\";\nexport const ColorBaseDestructive100 = \"#fef3f5\";\nexport const ColorBaseDestructive200 = \"#fad6de\";\nexport const ColorBaseDestructive300 = \"#f2a2b2\";\nexport const ColorBaseDestructive700 = \"#d32a4b\";\nexport const ColorBaseDestructive800 = \"#81162c\";\nexport const ColorBaseDestructive900 = \"#55101d\";\nexport const ColorBaseGray10 = \"#cbcbcb\"; // Used as the default color for dividers and inner strokes\nexport const ColorBaseGray30 = \"#000000\"; // For IconButton background when on top of an image\nexport const ColorBaseGray60 = \"#000000\"; // Used for icon background in classroom video grid\nexport const ColorBaseGray80 = \"#000000\"; // Used as the background for modals\nexport const ColorBaseGray100 = \"#f7f7f7\";\nexport const ColorBaseGray200 = \"#f0f0f0\"; // Used for light mode backgrounds when showing card content on top\nexport const ColorBaseGray300 = \"#d0d0d0\"; // Used for component outlines, eg: select and textfield\nexport const ColorBaseGray700 = \"#767676\"; // For secondary text in light mode\nexport const ColorBaseGray800 = \"#353535\";\nexport const ColorBaseGray900 = \"#191919\"; // Default text color, Classroom background\nexport const ColorBaseOrange100 = \"#fdf2f0\";\nexport const ColorBaseOrange200 = \"#f6cdc4\";\nexport const ColorBaseOrange300 = \"#ec9987\";\nexport const ColorBaseOrange700 = \"#c34124\";\nexport const ColorBaseOrange800 = \"#732818\";\nexport const ColorBaseOrange900 = \"#4d1a10\";\nexport const ColorBasePrimary100 = \"#eff6fa\";\nexport const ColorBasePrimary200 = \"#c1dbe7\";\nexport const ColorBasePrimary300 = \"#84b7d0\";\nexport const ColorBasePrimary700 = \"#236482\";\nexport const ColorBasePrimary800 = \"#274858\";\nexport const ColorBasePrimary900 = \"#1b303b\";\nexport const ColorBaseSuccess100 = \"#eff7f1\";\nexport const ColorBaseSuccess200 = \"#bddcc6\";\nexport const ColorBaseSuccess300 = \"#81ba92\";\nexport const ColorBaseSuccess700 = \"#397b4d\";\nexport const ColorBaseSuccess800 = \"#2d4936\";\nexport const ColorBaseSuccess900 = \"#1e3124\";\nexport const ColorBasePurple100 = \"#f9f5fa\";\nexport const ColorBasePurple200 = \"#e8dceb\";\nexport const ColorBasePurple300 = \"#cdb4d3\";\nexport const ColorBasePurple700 = \"#8b5f95\";\nexport const ColorBasePurple800 = \"#523b58\";\nexport const ColorBasePurple900 = \"#37273b\";\nexport const ColorBaseYellow100 = \"#fdf5d9\";\nexport const ColorBaseYellow200 = \"#fbe8a3\";\nexport const ColorBaseYellow300 = \"#f8d663\";\nexport const ColorBaseYellow700 = \"#ffc929\";\nexport const ColorBaseYellow800 = \"#765f1c\";\nexport const ColorBaseYellow900 = \"#3b3009\";\nexport const ColorBaseWhite = \"#ffffff\";\nexport const ColorCambioBlack = \"#050500\";\nexport const ColorCambioWhite = \"#ffffff\";\nexport const ColorCambioGray100 = \"#faf4eb\";\nexport const ColorCambioGray200 = \"#e4dbd3\";\nexport const ColorCambioGray300 = \"#beb4ab\";\nexport const ColorCambioGray370 = \"#beb4ab\";\nexport const ColorCambioGray700 = \"#888077\";\nexport const ColorCambioGray800 = \"#5c554d\";\nexport const ColorCambioGray870 = \"#5c554d\";\nexport const ColorCambioGray900 = \"#312b23\";\nexport const ColorCambioDestructive100 = \"#ffdeda\";\nexport const ColorCambioDestructive300 = \"#ff8071\";\nexport const ColorCambioDestructive370 = \"#ff8071\";\nexport const ColorCambioDestructive700 = \"#c93f32\";\nexport const ColorCambioDestructive770 = \"#c93f32\";\nexport const ColorCambioDestructive900 = \"#6d0002\";\nexport const ColorCambioSuccess100 = \"#daf2c8\";\nexport const ColorCambioSuccess300 = \"#84ce64\";\nexport const ColorCambioSuccess370 = \"#84ce64\";\nexport const ColorCambioSuccess700 = \"#3c7f20\";\nexport const ColorCambioSuccess770 = \"#3c7f20\";\nexport const ColorCambioSuccess900 = \"#103e00\";\nexport const ColorCambioRed = \"#f56e56\";\nexport const ColorCambioOrange = \"#ff8f57\";\nexport const ColorCambioTan = \"#ffb47d\";\nexport const ColorCambioCream = \"#fffad1\";\nexport const ColorCambioPurple = \"#6840a8\";\nexport const ColorCambioLilac = \"#b59ef0\";\nexport const ColorCambioThistle = \"#d69ca4\";\nexport const ColorCambioPink = \"#ffccea\";\nexport const ColorCambioNavy = \"#191142\";\nexport const ColorCambioTeal = \"#44a6cf\";\nexport const ColorCambioSlate = \"#7c9fc6\";\nexport const ColorCambioSky = \"#b1e8fc\";\nexport const ColorCambioYellow700 = \"#ffe733\";\nexport const ColorCambioTransparentFull = \"#000000\";\nexport const Elevation400 = \"0px 16px 32px 0px #00000040\";\n"]}
1
+ {"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"names":[],"mappings":";AASO,IAAM,0BAA0B;AAWhC,IAAM,mBAAmB","sourcesContent":["/**\n * Do not edit directly\n * Generated on Fri, 01 Mar 2024 22:17:47 GMT\n */\n\nexport const ColorBaseBlack = \"#000000\";\nexport const ColorBaseDestructive100 = \"#fef3f5\";\nexport const ColorBaseDestructive200 = \"#fad6de\";\nexport const ColorBaseDestructive300 = \"#f2a2b2\";\nexport const ColorBaseDestructive700 = \"#d32a4b\";\nexport const ColorBaseDestructive800 = \"#81162c\";\nexport const ColorBaseDestructive900 = \"#55101d\";\nexport const ColorBaseGray10 = \"#cbcbcb\"; // Used as the default color for dividers and inner strokes\nexport const ColorBaseGray30 = \"#000000\"; // For IconButton background when on top of an image\nexport const ColorBaseGray60 = \"#000000\"; // Used for icon background in classroom video grid\nexport const ColorBaseGray80 = \"#000000\"; // Used as the background for modals\nexport const ColorBaseGray100 = \"#f7f7f7\";\nexport const ColorBaseGray200 = \"#f0f0f0\"; // Used for light mode backgrounds when showing card content on top\nexport const ColorBaseGray300 = \"#d0d0d0\"; // Used for component outlines, eg: select and textfield\nexport const ColorBaseGray700 = \"#767676\"; // For secondary text in light mode\nexport const ColorBaseGray800 = \"#353535\";\nexport const ColorBaseGray900 = \"#191919\"; // Default text color, Classroom background\nexport const ColorBaseOrange100 = \"#fdf2f0\";\nexport const ColorBaseOrange200 = \"#f6cdc4\";\nexport const ColorBaseOrange300 = \"#ec9987\";\nexport const ColorBaseOrange700 = \"#c34124\";\nexport const ColorBaseOrange800 = \"#732818\";\nexport const ColorBaseOrange900 = \"#4d1a10\";\nexport const ColorBasePrimary100 = \"#eff6fa\";\nexport const ColorBasePrimary200 = \"#c1dbe7\";\nexport const ColorBasePrimary300 = \"#84b7d0\";\nexport const ColorBasePrimary700 = \"#236482\";\nexport const ColorBasePrimary800 = \"#274858\";\nexport const ColorBasePrimary900 = \"#1b303b\";\nexport const ColorBaseSuccess100 = \"#eff7f1\";\nexport const ColorBaseSuccess200 = \"#bddcc6\";\nexport const ColorBaseSuccess300 = \"#81ba92\";\nexport const ColorBaseSuccess700 = \"#397b4d\";\nexport const ColorBaseSuccess800 = \"#2d4936\";\nexport const ColorBaseSuccess900 = \"#1e3124\";\nexport const ColorBasePurple100 = \"#f9f5fa\";\nexport const ColorBasePurple200 = \"#e8dceb\";\nexport const ColorBasePurple300 = \"#cdb4d3\";\nexport const ColorBasePurple700 = \"#8b5f95\";\nexport const ColorBasePurple800 = \"#523b58\";\nexport const ColorBasePurple900 = \"#37273b\";\nexport const ColorBaseYellow100 = \"#fdf5d9\";\nexport const ColorBaseYellow200 = \"#fbe8a3\";\nexport const ColorBaseYellow300 = \"#f8d663\";\nexport const ColorBaseYellow700 = \"#ffc929\";\nexport const ColorBaseYellow800 = \"#765f1c\";\nexport const ColorBaseYellow900 = \"#3b3009\";\nexport const ColorBaseWhite = \"#ffffff\";\nexport const ColorCambioBlack = \"#050500\";\nexport const ColorCambioWhite = \"#ffffff\";\nexport const ColorCambioGray100 = \"#faf4eb\";\nexport const ColorCambioGray200 = \"#e4dbd3\";\nexport const ColorCambioGray300 = \"#beb4ab\";\nexport const ColorCambioGray370 = \"#beb4ab\";\nexport const ColorCambioGray700 = \"#888077\";\nexport const ColorCambioGray800 = \"#5c554d\";\nexport const ColorCambioGray870 = \"#5c554d\";\nexport const ColorCambioGray900 = \"#312b23\";\nexport const ColorCambioDestructive100 = \"#ffdeda\";\nexport const ColorCambioDestructive300 = \"#ff8071\";\nexport const ColorCambioDestructive370 = \"#ff8071\";\nexport const ColorCambioDestructive700 = \"#c93f32\";\nexport const ColorCambioDestructive770 = \"#c93f32\";\nexport const ColorCambioDestructive900 = \"#6d0002\";\nexport const ColorCambioSuccess100 = \"#daf2c8\";\nexport const ColorCambioSuccess300 = \"#84ce64\";\nexport const ColorCambioSuccess370 = \"#84ce64\";\nexport const ColorCambioSuccess700 = \"#3c7f20\";\nexport const ColorCambioSuccess770 = \"#3c7f20\";\nexport const ColorCambioSuccess900 = \"#103e00\";\nexport const ColorCambioRed = \"#f56e56\";\nexport const ColorCambioOrange = \"#ff8f57\";\nexport const ColorCambioTan = \"#ffb47d\";\nexport const ColorCambioCream = \"#fffad1\";\nexport const ColorCambioPurple = \"#6840a8\";\nexport const ColorCambioLilac = \"#b59ef0\";\nexport const ColorCambioThistle = \"#d69ca4\";\nexport const ColorCambioPink = \"#ffccea\";\nexport const ColorCambioNavy = \"#191142\";\nexport const ColorCambioTeal = \"#44a6cf\";\nexport const ColorCambioSlate = \"#7c9fc6\";\nexport const ColorCambioSky = \"#b1e8fc\";\nexport const ColorCambioYellow700 = \"#ffe733\";\nexport const ColorCambioTransparentFull = \"#000000\";\nexport const Elevation400 = \"0px 16px 32px 0px #00000040\";\n"]}
@@ -121,4 +121,4 @@ var LinkButton_default = LinkButton;
121
121
 
122
122
 
123
123
  exports.LinkButton_default = LinkButton_default;
124
- //# sourceMappingURL=4H5DX5BW.cjs.map
124
+ //# sourceMappingURL=YMNL37TU.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/LinkButton/LinkButton.tsx","css-module:./LinkButton.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAS,kBAA2C;AACpD,OAAO,gBAAgB;;;ACD6E,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,cAAa,uBAAsB;;;AD+IpL,SA4BI,KA5BJ;AA9BN,IAAM,aAAa;AAAA,EACjB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,SAAS;AAAA,IACT;AAAA,EACF,GACA,QACG;AACH,UAAM,EAAE,UAAU,IAAI,SAAS;AAE/B,UAAM,uBACJ,cAAc,YACV,uBAAuB,aAAa,KAAK,CAAC,IAC1C,sBAAsB,YAAY,KAAK,CAAC;AAE9C,UAAM,uBACJ,cAAc,YACV,uBAAuB,aAAa,KAAK,CAAC,IAC1C,sBAAsB,YAAY,KAAK,CAAC;AAE9C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,UACT,0BAAO;AAAA,UACP,sBAAa;AAAA,UACb;AAAA,UACA;AAAA,UACA,cAAc,YACV,sBAAa,IAAI,IACjB,sBAAa,GAAG,YAAY;AAAA,UAChC;AAAA,YACE,CAAC,sBAAa,SAAS,GAAG;AAAA,YAC1B,CAAC,0BAAO,UAAU,GAAG,CAAC;AAAA,YACtB,CAAC,sBAAa,SAAS,GACrB,cAAc,cAAc,SAAS,QAAQ,SAAS;AAAA,YACxD,CAAC,sBAAa,eAAe,GAC3B,cAAc,aAAa,UAAU;AAAA,YACvC,CAAC,sBAAa,0BAA0B,GACtC,cAAc,aAAa,UAAU;AAAA,UACzC;AAAA,QACF;AAAA,QACA;AAAA,QAEC;AAAA,uBAAa,cAAc,aAC1B;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT,sBAAa;AAAA,gBACb,iBAAS,IAAI;AAAA,gBACb;AAAA,cACF;AAAA;AAAA,UACF;AAAA,UAEF;AAAA,YAAC;AAAA;AAAA,cACC,MAAM,cAAc,YAAY,oBAAY,IAAI,IAAI,oBAAY,IAAI;AAAA,cAEpE;AAAA,gBAAC;AAAA;AAAA,kBAEC,WAAW;AAAA,kBACX,OAAO,EAAE,YAAY,IAAI;AAAA,kBAExB;AAAA;AAAA,cACH;AAAA;AAAA,UACF;AAAA,UACC,WAAW,cAAc,aACxB;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT,sBAAa;AAAA,gBACb,iBAAS,IAAI;AAAA,gBACb;AAAA,cACF;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AAEzB,IAAO,qBAAQ","sourcesContent":["import { forwardRef, type HtmlHTMLAttributes } from \"react\";\nimport classNames from \"classnames\";\nimport React from \"react\";\nimport { type Size } from \"../constants\";\nimport Typography from \"../Typography/Typography\";\nimport buttonStyles from \"../Button/Button.module.css\";\nimport iconSize from \"../Button/constants/iconSize\";\nimport textVariant from \"../Button/constants/textVariant\";\nimport styles from \"./LinkButton.module.css\";\n\nimport { classicColor, cambioColor } from \"../Button/constants/color\";\nimport {\n classicBackgroundColor,\n cambioBackgroundColor,\n} from \"../colors//backgroundColor\";\nimport {\n classicForegroundColor,\n cambioForegroundColor,\n} from \"../colors/foregroundColor\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\n\ntype LinkButtonProps = {\n /**\n * Test id for the button\n */\n \"data-testid\"?: string;\n /**\n * The text to be displayed inside the button\n */\n text: string;\n /**\n * The link that the LinkButton should route to.\n *\n */\n href?: string;\n /**\n * The target attribute specifies where to open the linked document.\n *\n */\n target?: \"_blank\" | \"_self\" | \"_parent\" | \"_top\";\n /**\n * The rel attribute specifies the relationship between the document and the link.\n *\n */\n rel?: HtmlHTMLAttributes<HTMLAnchorElement>[\"rel\"];\n /**\n * The color of the button\n *\n * Classic only:\n * * `inverse`\n * * `success`\n *\n * Cambio only:\n * * `success-primary`\n * * `success-secondary`\n * * `success-tertiary`\n *\n * @defaultValue \"primary\"\n */\n color?:\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"destructive-primary\"\n | \"destructive-secondary\"\n | \"destructive-tertiary\"\n | \"branded\"\n | \"success\"\n | \"success-primary\"\n | \"success-secondary\"\n | \"success-tertiary\"\n | \"inverse\";\n /**\n * The size of the button\n *\n * Classic:\n * * `sm`: 32px\n * * `md`: 40px\n * * `lg`: 48px\n *\n * Cambio:\n * * `sm`: 32px\n * * `md`: 48px\n * * `lg`: 64px\n *\n * @defaultValue \"md\"\n */\n size?: (typeof Size)[number];\n /**\n * If `true`, the button will take up the full width of its container\n *\n * @defaultValue false\n */\n fullWidth?: boolean;\n /**\n * The icon to be displayed at the start of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n * Note: startIcon is not supported in the Cambio theme\n */\n startIcon?: React.ComponentType<{ className?: string }>;\n /**\n * The icon to be displayed at the end of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n * Note: endIcon is not supported in the Cambio theme\n */\n endIcon?: React.ComponentType<{ className?: string }>;\n /**\n * An optional onClick event. This is used for certain wrapper's support (such as react-router-dom).\n */\n onClick?: React.MouseEventHandler<HTMLAnchorElement>;\n};\n\n/**\n * [LinkButton](https://cambly-syntax.vercel.app/?path=/docs/components-linkbutton--docs) is a \"variation\" of Button that should look identical to Button, but should be used to render links instead.\n */\nconst LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(\n (\n {\n text,\n href,\n target,\n rel,\n \"data-testid\": dataTestId,\n color = \"primary\",\n size = \"md\",\n fullWidth = false,\n startIcon: StartIcon,\n endIcon: EndIcon,\n onClick,\n }: LinkButtonProps,\n ref,\n ) => {\n const { themeName } = useTheme();\n\n const foregroundColorClass =\n themeName === \"classic\"\n ? classicForegroundColor(classicColor(color))\n : cambioForegroundColor(cambioColor(color));\n\n const backgroundColorClass =\n themeName === \"classic\"\n ? classicBackgroundColor(classicColor(color))\n : cambioBackgroundColor(cambioColor(color));\n\n return (\n <a\n href={href}\n data-testid={dataTestId}\n target={target}\n ref={ref}\n rel={rel}\n className={classNames(\n styles.linkButton,\n buttonStyles.button,\n foregroundColorClass,\n backgroundColorClass,\n themeName === \"classic\"\n ? buttonStyles[size]\n : buttonStyles[`${size}Cambio`],\n {\n [buttonStyles.fullWidth]: fullWidth,\n [styles.fitContent]: !fullWidth,\n [buttonStyles.buttonGap]:\n themeName === \"classic\" && (size === \"lg\" || size === \"md\"),\n [buttonStyles.secondaryBorder]:\n themeName === \"classic\" && color === \"secondary\",\n [buttonStyles.secondaryDestructiveBorder]:\n themeName === \"classic\" && color === \"destructive-secondary\",\n },\n )}\n onClick={onClick}\n >\n {StartIcon && themeName === \"classic\" && (\n <StartIcon\n className={classNames(\n buttonStyles.icon,\n iconSize[size],\n foregroundColorClass,\n )}\n />\n )}\n <Typography\n size={themeName === \"classic\" ? textVariant[size] : textVariant[size]}\n >\n <span\n // Temporary - until we have cambio colors on Typogrphay\n className={foregroundColorClass}\n style={{ fontWeight: 500 }}\n >\n {text}\n </span>\n </Typography>\n {EndIcon && themeName === \"classic\" && (\n <EndIcon\n className={classNames(\n buttonStyles.icon,\n iconSize[size],\n foregroundColorClass,\n )}\n />\n )}\n </a>\n );\n },\n);\n\nLinkButton.displayName = \"LinkButton\";\n\nexport default LinkButton;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/LinkButton/LinkButton.module.css\"; export default {\"linkButton\":\"_linkButton_1qjrb_1\",\"fitContent\":\"_fitContent_1qjrb_11\"}"]}
package/dist/index.cjs CHANGED
@@ -12,7 +12,7 @@ var _MGHMASZRcjs = require('./__chunks/MGHMASZR.cjs');
12
12
  var _SPWDKPHTcjs = require('./__chunks/SPWDKPHT.cjs');
13
13
 
14
14
 
15
- var _4H5DX5BWcjs = require('./__chunks/4H5DX5BW.cjs');
15
+ var _YMNL37TUcjs = require('./__chunks/YMNL37TU.cjs');
16
16
 
17
17
 
18
18
  var _EW5FQDYYcjs = require('./__chunks/EW5FQDYY.cjs');
@@ -30,11 +30,11 @@ require('./__chunks/SJFWRAOP.cjs');
30
30
  var _2OKXRMSOcjs = require('./__chunks/2OKXRMSO.cjs');
31
31
 
32
32
 
33
- var _DU7RZXSRcjs = require('./__chunks/DU7RZXSR.cjs');
33
+ var _HFRUEPJMcjs = require('./__chunks/HFRUEPJM.cjs');
34
34
  require('./__chunks/GKECCWR3.cjs');
35
35
 
36
36
 
37
- var _DWAH45NNcjs = require('./__chunks/DWAH45NN.cjs');
37
+ var _S6D6YJNTcjs = require('./__chunks/S6D6YJNT.cjs');
38
38
  require('./__chunks/KX4HD3Q3.cjs');
39
39
 
40
40
 
@@ -54,11 +54,11 @@ require('./__chunks/ZQFEITZH.cjs');
54
54
  var _4QLZTDKEcjs = require('./__chunks/4QLZTDKE.cjs');
55
55
 
56
56
 
57
- var _3QJ5N4GAcjs = require('./__chunks/3QJ5N4GA.cjs');
58
- require('./__chunks/VG3KCHZI.cjs');
57
+ var _I37F5HVMcjs = require('./__chunks/I37F5HVM.cjs');
58
+ require('./__chunks/BTZDTIOB.cjs');
59
59
 
60
60
 
61
- var _R7VED2O3cjs = require('./__chunks/R7VED2O3.cjs');
61
+ var _L4KE5YQScjs = require('./__chunks/L4KE5YQS.cjs');
62
62
  require('./__chunks/33HJ72Y2.cjs');
63
63
  require('./__chunks/VA23P3ZI.cjs');
64
64
  require('./__chunks/VUANIQYP.cjs');
@@ -66,7 +66,7 @@ require('./__chunks/PSWX5DBC.cjs');
66
66
 
67
67
 
68
68
  var _M3L2KJQYcjs = require('./__chunks/M3L2KJQY.cjs');
69
- require('./__chunks/AVING5PW.cjs');
69
+ require('./__chunks/U6LLWKED.cjs');
70
70
  require('./__chunks/GQC7B3U6.cjs');
71
71
  require('./__chunks/ZDMSFZS3.cjs');
72
72
  require('./__chunks/63LUPH3X.cjs');
@@ -133,5 +133,5 @@ require('./__chunks/I64JGYX7.cjs');
133
133
 
134
134
 
135
135
 
136
- exports.Avatar = _AXP5KWIYcjs.Avatar_default; exports.AvatarGroup = _MGHMASZRcjs.AvatarGroup; exports.Badge = _3BFH4YPHcjs.Badge_default; exports.Box = _SZCVEBN2cjs.Box_default; exports.Button = _EJTCFSQFcjs.Button_default; exports.ButtonGroup = _TZX4M4BCcjs.ButtonGroup_default; exports.Card = _SPWDKPHTcjs.Card; exports.Checkbox = _EW5FQDYYcjs.Checkbox_default; exports.Chip = _4QLZTDKEcjs.Chip_default; exports.Divider = _3TXXNWWAcjs.Divider; exports.Heading = _VXNZTCXZcjs.Heading_default; exports.IconButton = _R7VED2O3cjs.IconButton_default; exports.LinkButton = _4H5DX5BWcjs.LinkButton_default; exports.Modal = _JYKKN54Ucjs.Modal; exports.Popover = _3QJ5N4GAcjs.Popover_default; exports.RadioButton = _W4UIYTBGcjs.RadioButton_default; exports.RichSelectList = _DWAH45NNcjs.RichSelectList_default; exports.SelectList = _DU7RZXSRcjs.SelectList; exports.TapArea = _M3L2KJQYcjs.TapArea_default; exports.TextArea = _2OKXRMSOcjs.TextArea_default; exports.TextField = _P7UEPXTAcjs.TextField; exports.ThemeProvider = _5NIFOD6Kcjs.ThemeProvider; exports.Tooltip = _5JI6NPPEcjs.Tooltip_default; exports.Typography = _JBNXAIXYcjs.Typography_default;
136
+ exports.Avatar = _AXP5KWIYcjs.Avatar_default; exports.AvatarGroup = _MGHMASZRcjs.AvatarGroup; exports.Badge = _3BFH4YPHcjs.Badge_default; exports.Box = _SZCVEBN2cjs.Box_default; exports.Button = _EJTCFSQFcjs.Button_default; exports.ButtonGroup = _TZX4M4BCcjs.ButtonGroup_default; exports.Card = _SPWDKPHTcjs.Card; exports.Checkbox = _EW5FQDYYcjs.Checkbox_default; exports.Chip = _4QLZTDKEcjs.Chip_default; exports.Divider = _3TXXNWWAcjs.Divider; exports.Heading = _VXNZTCXZcjs.Heading_default; exports.IconButton = _L4KE5YQScjs.IconButton_default; exports.LinkButton = _YMNL37TUcjs.LinkButton_default; exports.Modal = _JYKKN54Ucjs.Modal; exports.Popover = _I37F5HVMcjs.Popover_default; exports.RadioButton = _W4UIYTBGcjs.RadioButton_default; exports.RichSelectList = _S6D6YJNTcjs.RichSelectList_default; exports.SelectList = _HFRUEPJMcjs.SelectList; exports.TapArea = _M3L2KJQYcjs.TapArea_default; exports.TextArea = _2OKXRMSOcjs.TextArea_default; exports.TextField = _P7UEPXTAcjs.TextField; exports.ThemeProvider = _5NIFOD6Kcjs.ThemeProvider; exports.Tooltip = _5JI6NPPEcjs.Tooltip_default; exports.Typography = _JBNXAIXYcjs.Typography_default;
137
137
  //# sourceMappingURL=index.cjs.map
package/dist/index.js CHANGED
@@ -12,7 +12,7 @@ import {
12
12
  } from "./__chunks/74UCGNED.js";
13
13
  import {
14
14
  LinkButton_default
15
- } from "./__chunks/XSO53O27.js";
15
+ } from "./__chunks/HKGPCZ2V.js";
16
16
  import {
17
17
  Checkbox_default
18
18
  } from "./__chunks/53IMFXFX.js";
@@ -30,11 +30,11 @@ import {
30
30
  } from "./__chunks/FKV5VN7F.js";
31
31
  import {
32
32
  SelectList
33
- } from "./__chunks/E6XEQ7AW.js";
33
+ } from "./__chunks/TYZIM5GF.js";
34
34
  import "./__chunks/HOUO3WV6.js";
35
35
  import {
36
36
  RichSelectList_default
37
- } from "./__chunks/VVIDGIIT.js";
37
+ } from "./__chunks/RRAXSCWL.js";
38
38
  import "./__chunks/SSFANAKU.js";
39
39
  import {
40
40
  ButtonGroup_default
@@ -54,11 +54,11 @@ import {
54
54
  } from "./__chunks/CS6U6WBZ.js";
55
55
  import {
56
56
  Popover_default
57
- } from "./__chunks/A7HHS3KY.js";
58
- import "./__chunks/77GCYQJQ.js";
57
+ } from "./__chunks/DO56RCLX.js";
58
+ import "./__chunks/C6UG54GY.js";
59
59
  import {
60
60
  IconButton_default
61
- } from "./__chunks/OSGLKEGE.js";
61
+ } from "./__chunks/LW7YGM7C.js";
62
62
  import "./__chunks/DSGIOBWG.js";
63
63
  import "./__chunks/ZEA5JDEB.js";
64
64
  import "./__chunks/5AR53MHD.js";
@@ -66,7 +66,7 @@ import "./__chunks/K3H7QFPB.js";
66
66
  import {
67
67
  TapArea_default
68
68
  } from "./__chunks/OXKLJY2L.js";
69
- import "./__chunks/XJW7XS7M.js";
69
+ import "./__chunks/2DU7NSCB.js";
70
70
  import "./__chunks/RMC2RSHW.js";
71
71
  import "./__chunks/PTWXXDFF.js";
72
72
  import "./__chunks/YCBSKN3Q.js";
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@cambly/syntax-core",
3
3
  "description": "Cambly design system core components",
4
- "version": "10.8.0",
4
+ "version": "10.8.1",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",
7
7
  "module": "./dist/index.js",
@@ -12,7 +12,7 @@
12
12
  "dist/**"
13
13
  ],
14
14
  "dependencies": {
15
- "@cambly/syntax-design-tokens": "0.11.0",
15
+ "@cambly/syntax-design-tokens": "0.11.1",
16
16
  "@react-aria/focus": "^3.16.0",
17
17
  "@react-aria/utils": "^3.23.0",
18
18
  "react-aria": "^3.31.0",
@@ -29,7 +29,7 @@
29
29
  "tsup": "6.7.0",
30
30
  "typescript": "5.0.4",
31
31
  "@cambly/eslint-config-syntax": "1.4.0",
32
- "@cambly/syntax-tsconfig": "1.4.0"
32
+ "@cambly/syntax-tsconfig": "1.4.1"
33
33
  },
34
34
  "publishConfig": {
35
35
  "access": "public"
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/LinkButton/LinkButton.tsx","css-module:./LinkButton.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAS,kBAA2C;AACpD,OAAO,gBAAgB;;;ACD6E,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,cAAa,uBAAsB;;;AD8IpL,SA4BI,KA5BJ;AA9BN,IAAM,aAAa;AAAA,EACjB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,SAAS;AAAA,IACT;AAAA,EACF,GACA,QACG;AACH,UAAM,EAAE,UAAU,IAAI,SAAS;AAE/B,UAAM,uBACJ,cAAc,YACV,uBAAuB,aAAa,KAAK,CAAC,IAC1C,sBAAsB,YAAY,KAAK,CAAC;AAE9C,UAAM,uBACJ,cAAc,YACV,uBAAuB,aAAa,KAAK,CAAC,IAC1C,sBAAsB,YAAY,KAAK,CAAC;AAE9C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,UACT,0BAAO;AAAA,UACP,sBAAa;AAAA,UACb;AAAA,UACA;AAAA,UACA,cAAc,YACV,sBAAa,IAAI,IACjB,sBAAa,GAAG,YAAY;AAAA,UAChC;AAAA,YACE,CAAC,sBAAa,SAAS,GAAG;AAAA,YAC1B,CAAC,0BAAO,UAAU,GAAG,CAAC;AAAA,YACtB,CAAC,sBAAa,SAAS,GACrB,cAAc,cAAc,SAAS,QAAQ,SAAS;AAAA,YACxD,CAAC,sBAAa,eAAe,GAC3B,cAAc,aAAa,UAAU;AAAA,YACvC,CAAC,sBAAa,0BAA0B,GACtC,cAAc,aAAa,UAAU;AAAA,UACzC;AAAA,QACF;AAAA,QACA;AAAA,QAEC;AAAA,uBAAa,cAAc,aAC1B;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT,sBAAa;AAAA,gBACb,iBAAS,IAAI;AAAA,gBACb;AAAA,cACF;AAAA;AAAA,UACF;AAAA,UAEF;AAAA,YAAC;AAAA;AAAA,cACC,MAAM,cAAc,YAAY,oBAAY,IAAI,IAAI,oBAAY,IAAI;AAAA,cAEpE;AAAA,gBAAC;AAAA;AAAA,kBAEC,WAAW;AAAA,kBACX,OAAO,EAAE,YAAY,IAAI;AAAA,kBAExB;AAAA;AAAA,cACH;AAAA;AAAA,UACF;AAAA,UACC,WAAW,cAAc,aACxB;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT,sBAAa;AAAA,gBACb,iBAAS,IAAI;AAAA,gBACb;AAAA,cACF;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AAEzB,IAAO,qBAAQ","sourcesContent":["import { forwardRef, type HtmlHTMLAttributes } from \"react\";\nimport classNames from \"classnames\";\nimport React from \"react\";\nimport { type Size } from \"../constants\";\nimport Typography from \"../Typography/Typography\";\nimport buttonStyles from \"../Button/Button.module.css\";\nimport iconSize from \"../Button/constants/iconSize\";\nimport textVariant from \"../Button/constants/textVariant\";\nimport styles from \"./LinkButton.module.css\";\n\nimport { classicColor, cambioColor } from \"../Button/constants/color\";\nimport {\n classicBackgroundColor,\n cambioBackgroundColor,\n} from \"../colors//backgroundColor\";\nimport {\n classicForegroundColor,\n cambioForegroundColor,\n} from \"../colors/foregroundColor\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\n\ntype LinkButtonProps = {\n /**\n * Test id for the button\n */\n \"data-testid\"?: string;\n /**\n * The text to be displayed inside the button\n */\n text: string;\n /**\n * The link that the LinkButton should route to.\n *\n */\n href?: string;\n /**\n * The target attribute specifies where to open the linked document.\n *\n */\n target?: \"_blank\" | \"_self\" | \"_parent\" | \"_top\";\n /**\n * The rel attribute specifies the relationship between the document and the link.\n *\n */\n rel?: HtmlHTMLAttributes<HTMLAnchorElement>[\"rel\"];\n /**\n * The color of the button\n *\n * Classic only:\n * * `inverse`\n * * `success`\n *\n * Cambio only:\n * * `success-primary`\n * * `success-secondary`\n * * `success-tertiary`\n *\n * @defaultValue \"primary\"\n */\n color?:\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"destructive-primary\"\n | \"destructive-secondary\"\n | \"destructive-tertiary\"\n | \"branded\"\n | \"success\"\n | \"success-primary\"\n | \"success-secondary\"\n | \"inverse\";\n /**\n * The size of the button\n *\n * Classic:\n * * `sm`: 32px\n * * `md`: 40px\n * * `lg`: 48px\n *\n * Cambio:\n * * `sm`: 32px\n * * `md`: 48px\n * * `lg`: 64px\n *\n * @defaultValue \"md\"\n */\n size?: (typeof Size)[number];\n /**\n * If `true`, the button will take up the full width of its container\n *\n * @defaultValue false\n */\n fullWidth?: boolean;\n /**\n * The icon to be displayed at the start of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n * Note: startIcon is not supported in the Cambio theme\n */\n startIcon?: React.ComponentType<{ className?: string }>;\n /**\n * The icon to be displayed at the end of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n * Note: endIcon is not supported in the Cambio theme\n */\n endIcon?: React.ComponentType<{ className?: string }>;\n /**\n * An optional onClick event. This is used for certain wrapper's support (such as react-router-dom).\n */\n onClick?: React.MouseEventHandler<HTMLAnchorElement>;\n};\n\n/**\n * [LinkButton](https://cambly-syntax.vercel.app/?path=/docs/components-linkbutton--docs) is a \"variation\" of Button that should look identical to Button, but should be used to render links instead.\n */\nconst LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(\n (\n {\n text,\n href,\n target,\n rel,\n \"data-testid\": dataTestId,\n color = \"primary\",\n size = \"md\",\n fullWidth = false,\n startIcon: StartIcon,\n endIcon: EndIcon,\n onClick,\n }: LinkButtonProps,\n ref,\n ) => {\n const { themeName } = useTheme();\n\n const foregroundColorClass =\n themeName === \"classic\"\n ? classicForegroundColor(classicColor(color))\n : cambioForegroundColor(cambioColor(color));\n\n const backgroundColorClass =\n themeName === \"classic\"\n ? classicBackgroundColor(classicColor(color))\n : cambioBackgroundColor(cambioColor(color));\n\n return (\n <a\n href={href}\n data-testid={dataTestId}\n target={target}\n ref={ref}\n rel={rel}\n className={classNames(\n styles.linkButton,\n buttonStyles.button,\n foregroundColorClass,\n backgroundColorClass,\n themeName === \"classic\"\n ? buttonStyles[size]\n : buttonStyles[`${size}Cambio`],\n {\n [buttonStyles.fullWidth]: fullWidth,\n [styles.fitContent]: !fullWidth,\n [buttonStyles.buttonGap]:\n themeName === \"classic\" && (size === \"lg\" || size === \"md\"),\n [buttonStyles.secondaryBorder]:\n themeName === \"classic\" && color === \"secondary\",\n [buttonStyles.secondaryDestructiveBorder]:\n themeName === \"classic\" && color === \"destructive-secondary\",\n },\n )}\n onClick={onClick}\n >\n {StartIcon && themeName === \"classic\" && (\n <StartIcon\n className={classNames(\n buttonStyles.icon,\n iconSize[size],\n foregroundColorClass,\n )}\n />\n )}\n <Typography\n size={themeName === \"classic\" ? textVariant[size] : textVariant[size]}\n >\n <span\n // Temporary - until we have cambio colors on Typogrphay\n className={foregroundColorClass}\n style={{ fontWeight: 500 }}\n >\n {text}\n </span>\n </Typography>\n {EndIcon && themeName === \"classic\" && (\n <EndIcon\n className={classNames(\n buttonStyles.icon,\n iconSize[size],\n foregroundColorClass,\n )}\n />\n )}\n </a>\n );\n },\n);\n\nLinkButton.displayName = \"LinkButton\";\n\nexport default LinkButton;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/LinkButton/LinkButton.module.css\"; export default {\"linkButton\":\"_linkButton_1qjrb_1\",\"fitContent\":\"_fitContent_1qjrb_11\"}"]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/IconButton/IconButton.tsx","css-module:./IconButton.module.css#css-module"],"sourcesContent":["import classNames from \"classnames\";\nimport {\n classicForegroundColor,\n cambioForegroundColor,\n} from \"../colors/foregroundColor\";\nimport React, { forwardRef } from \"react\";\nimport { type Size } from \"../constants\";\nimport styles from \"./IconButton.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\nimport { classicColor, cambioColor } from \"../Button/constants/color\";\nimport buttonStyles from \"../Button/Button.module.css\";\nimport {\n classicBackgroundColor,\n cambioBackgroundColor,\n} from \"../colors/backgroundColor\";\n\nconst classicIconSize = {\n sm: styles.smIcon,\n md: styles.mdIcon,\n lg: styles.lgIcon,\n};\n\nconst cambioIconSize = {\n sm: styles.smIconCambio,\n md: styles.mdIconCambio,\n lg: styles.lgIconCambio,\n xl: styles.xlIconCambio,\n};\n\ntype IconButtonProps = {\n /**\n * The color of the button\n *\n * Classic only:\n * * `inverse`\n * * `success`\n *\n * Cambio only:\n * * `success-primary`\n * * `success-secondary`\n * * `success-tertiary`\n *\n * @defaultValue \"primary\"\n */\n color?:\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"destructive-primary\"\n | \"destructive-secondary\"\n | \"destructive-tertiary\"\n | \"branded\"\n | \"success\"\n | \"success-primary\"\n | \"success-secondary\"\n | \"inverse\";\n /**\n * Test id for the button\n */\n \"data-testid\"?: string;\n /**\n * The size of the button\n *\n * Classic:\n * * `sm`: 32px\n * * `md`: 40px\n * * `lg`: 48px\n *\n * Cambio:\n * * `sm`: 32px\n * * `md`: 48px\n * * `lg`: 64px\n *\n * @defaultValue \"md\"\n */\n size?: (typeof Size)[number];\n /**\n * The label to be used for accessibility\n */\n accessibilityLabel: string;\n /**\n * The icon to be displayed. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n */\n icon: React.ComponentType<{ className?: string }>;\n /**\n * If `true`, the button will be disabled\n *\n * @defaultValue false\n */\n disabled?: boolean;\n /**\n * The callback to be called when the button is clicked\n */\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n /**\n * The tooltip to be displayed when the user hovers over the button\n */\n tooltip?: string;\n};\n\n/**\n * [IconButton](https://cambly-syntax.vercel.app/?path=/docs/components-iconbutton--docs) is a clickable element that is used to perform an action.\n */\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n (\n {\n accessibilityLabel,\n color = \"primary\",\n \"data-testid\": dataTestId,\n disabled = false,\n icon: Icon,\n size = \"md\",\n tooltip,\n onClick,\n }: IconButtonProps,\n ref,\n ) => {\n const isHydrated = useIsHydrated();\n const { themeName } = useTheme();\n\n const foregroundColorClass =\n themeName === \"classic\"\n ? classicForegroundColor(classicColor(color))\n : cambioForegroundColor(cambioColor(color));\n\n const backgroundColorClass =\n themeName === \"classic\"\n ? classicBackgroundColor(classicColor(color))\n : cambioBackgroundColor(cambioColor(color));\n\n return (\n <button\n aria-label={accessibilityLabel}\n data-testid={dataTestId}\n type=\"button\"\n title={tooltip}\n disabled={!isHydrated || disabled}\n onClick={onClick}\n className={classNames(\n styles.iconButton,\n foregroundColorClass,\n backgroundColorClass,\n themeName === \"classic\" ? styles[size] : styles[`${size}Cambio`],\n {\n [buttonStyles.secondaryBorder]:\n themeName === \"classic\" && color === \"secondary\",\n [buttonStyles.secondaryDestructiveBorder]:\n themeName === \"classic\" && color === \"destructive-secondary\",\n [styles.iconButtonNoBorder]:\n (themeName === \"classic\" &&\n ![\"secondary\", \"destructive-secondary\"].includes(color)) ||\n themeName === \"cambio\",\n },\n )}\n ref={ref}\n >\n <Icon\n className={\n themeName === \"classic\"\n ? classicIconSize[size]\n : cambioIconSize[size]\n }\n />\n </button>\n );\n },\n);\n\nIconButton.displayName = \"IconButton\";\n\nexport default IconButton;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/IconButton/IconButton.module.css\"; export default {\"iconButton\":\"_iconButton_1q9cs_1\",\"iconButtonNoBorder\":\"_iconButtonNoBorder_1q9cs_8\",\"sm\":\"_sm_1q9cs_49\",\"md\":\"_md_1q9cs_54\",\"lg\":\"_lg_1q9cs_59\",\"smCambio\":\"_smCambio_1q9cs_64\",\"mdCambio\":\"_mdCambio_1q9cs_69\",\"lgCambio\":\"_lgCambio_1q9cs_74\",\"smIcon\":\"_smIcon_1q9cs_79\",\"mdIcon\":\"_mdIcon_1q9cs_86\",\"lgIcon\":\"_lgIcon_1q9cs_93\",\"smIconCambio\":\"_smIconCambio_1q9cs_100\",\"mdIconCambio\":\"_mdIconCambio_1q9cs_107\",\"lgIconCambio\":\"_lgIconCambio_1q9cs_114\",\"xlIconCambio\":\"_xlIconCambio_1q9cs_121\"}"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,gBAAgB;AAKvB,SAAgB,kBAAkB;;;ACLkE,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,sBAAqB,+BAA8B,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,YAAW,sBAAqB,YAAW,sBAAqB,YAAW,sBAAqB,UAAS,oBAAmB,UAAS,oBAAmB,UAAS,oBAAmB,gBAAe,2BAA0B,gBAAe,2BAA0B,gBAAe,2BAA0B,gBAAe,0BAAyB;;;AD6JrlB;AA5IR,IAAM,kBAAkB;AAAA,EACtB,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AACb;AAEA,IAAM,iBAAiB;AAAA,EACrB,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AACb;AA4EA,IAAM,aAAa;AAAA,EACjB,CACE;AAAA,IACE;AAAA,IACA,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,WAAW;AAAA,IACX,MAAM;AAAA,IACN,OAAO;AAAA,IACP;AAAA,IACA;AAAA,EACF,GACA,QACG;AACH,UAAM,aAAa,cAAc;AACjC,UAAM,EAAE,UAAU,IAAI,SAAS;AAE/B,UAAM,uBACJ,cAAc,YACV,uBAAuB,aAAa,KAAK,CAAC,IAC1C,sBAAsB,YAAY,KAAK,CAAC;AAE9C,UAAM,uBACJ,cAAc,YACV,uBAAuB,aAAa,KAAK,CAAC,IAC1C,sBAAsB,YAAY,KAAK,CAAC;AAE9C,WACE;AAAA,MAAC;AAAA;AAAA,QACC,cAAY;AAAA,QACZ,eAAa;AAAA,QACb,MAAK;AAAA,QACL,OAAO;AAAA,QACP,UAAU,CAAC,cAAc;AAAA,QACzB;AAAA,QACA,WAAW;AAAA,UACT,0BAAO;AAAA,UACP;AAAA,UACA;AAAA,UACA,cAAc,YAAY,0BAAO,IAAI,IAAI,0BAAO,GAAG,YAAY;AAAA,UAC/D;AAAA,YACE,CAAC,sBAAa,eAAe,GAC3B,cAAc,aAAa,UAAU;AAAA,YACvC,CAAC,sBAAa,0BAA0B,GACtC,cAAc,aAAa,UAAU;AAAA,YACvC,CAAC,0BAAO,kBAAkB,GACvB,cAAc,aACb,CAAC,CAAC,aAAa,uBAAuB,EAAE,SAAS,KAAK,KACxD,cAAc;AAAA,UAClB;AAAA,QACF;AAAA,QACA;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,WACE,cAAc,YACV,gBAAgB,IAAI,IACpB,eAAe,IAAI;AAAA;AAAA,QAE3B;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AAEzB,IAAO,qBAAQ;","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/IconButton/IconButton.tsx","css-module:./IconButton.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,gBAAgB;AAKvB,SAAgB,kBAAkB;;;ACLkE,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,sBAAqB,+BAA8B,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,YAAW,sBAAqB,YAAW,sBAAqB,YAAW,sBAAqB,UAAS,oBAAmB,UAAS,oBAAmB,UAAS,oBAAmB,gBAAe,2BAA0B,gBAAe,2BAA0B,gBAAe,2BAA0B,gBAAe,0BAAyB;;;AD6JrlB;AA5IR,IAAM,kBAAkB;AAAA,EACtB,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AACb;AAEA,IAAM,iBAAiB;AAAA,EACrB,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AACb;AA4EA,IAAM,aAAa;AAAA,EACjB,CACE;AAAA,IACE;AAAA,IACA,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,WAAW;AAAA,IACX,MAAM;AAAA,IACN,OAAO;AAAA,IACP;AAAA,IACA;AAAA,EACF,GACA,QACG;AACH,UAAM,aAAa,cAAc;AACjC,UAAM,EAAE,UAAU,IAAI,SAAS;AAE/B,UAAM,uBACJ,cAAc,YACV,uBAAuB,aAAa,KAAK,CAAC,IAC1C,sBAAsB,YAAY,KAAK,CAAC;AAE9C,UAAM,uBACJ,cAAc,YACV,uBAAuB,aAAa,KAAK,CAAC,IAC1C,sBAAsB,YAAY,KAAK,CAAC;AAE9C,WACE;AAAA,MAAC;AAAA;AAAA,QACC,cAAY;AAAA,QACZ,eAAa;AAAA,QACb,MAAK;AAAA,QACL,OAAO;AAAA,QACP,UAAU,CAAC,cAAc;AAAA,QACzB;AAAA,QACA,WAAW;AAAA,UACT,0BAAO;AAAA,UACP;AAAA,UACA;AAAA,UACA,cAAc,YAAY,0BAAO,IAAI,IAAI,0BAAO,GAAG,YAAY;AAAA,UAC/D;AAAA,YACE,CAAC,sBAAa,eAAe,GAC3B,cAAc,aAAa,UAAU;AAAA,YACvC,CAAC,sBAAa,0BAA0B,GACtC,cAAc,aAAa,UAAU;AAAA,YACvC,CAAC,0BAAO,kBAAkB,GACvB,cAAc,aACb,CAAC,CAAC,aAAa,uBAAuB,EAAE,SAAS,KAAK,KACxD,cAAc;AAAA,UAClB;AAAA,QACF;AAAA,QACA;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,WACE,cAAc,YACV,gBAAgB,IAAI,IACpB,eAAe,IAAI;AAAA;AAAA,QAE3B;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AAEzB,IAAO,qBAAQ","sourcesContent":["import classNames from \"classnames\";\nimport {\n classicForegroundColor,\n cambioForegroundColor,\n} from \"../colors/foregroundColor\";\nimport React, { forwardRef } from \"react\";\nimport { type Size } from \"../constants\";\nimport styles from \"./IconButton.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\nimport { classicColor, cambioColor } from \"../Button/constants/color\";\nimport buttonStyles from \"../Button/Button.module.css\";\nimport {\n classicBackgroundColor,\n cambioBackgroundColor,\n} from \"../colors/backgroundColor\";\n\nconst classicIconSize = {\n sm: styles.smIcon,\n md: styles.mdIcon,\n lg: styles.lgIcon,\n};\n\nconst cambioIconSize = {\n sm: styles.smIconCambio,\n md: styles.mdIconCambio,\n lg: styles.lgIconCambio,\n xl: styles.xlIconCambio,\n};\n\ntype IconButtonProps = {\n /**\n * The color of the button\n *\n * Classic only:\n * * `inverse`\n * * `success`\n *\n * Cambio only:\n * * `success-primary`\n * * `success-secondary`\n * * `success-tertiary`\n *\n * @defaultValue \"primary\"\n */\n color?:\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"destructive-primary\"\n | \"destructive-secondary\"\n | \"destructive-tertiary\"\n | \"branded\"\n | \"success\"\n | \"success-primary\"\n | \"success-secondary\"\n | \"inverse\";\n /**\n * Test id for the button\n */\n \"data-testid\"?: string;\n /**\n * The size of the button\n *\n * Classic:\n * * `sm`: 32px\n * * `md`: 40px\n * * `lg`: 48px\n *\n * Cambio:\n * * `sm`: 32px\n * * `md`: 48px\n * * `lg`: 64px\n *\n * @defaultValue \"md\"\n */\n size?: (typeof Size)[number];\n /**\n * The label to be used for accessibility\n */\n accessibilityLabel: string;\n /**\n * The icon to be displayed. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n */\n icon: React.ComponentType<{ className?: string }>;\n /**\n * If `true`, the button will be disabled\n *\n * @defaultValue false\n */\n disabled?: boolean;\n /**\n * The callback to be called when the button is clicked\n */\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n /**\n * The tooltip to be displayed when the user hovers over the button\n */\n tooltip?: string;\n};\n\n/**\n * [IconButton](https://cambly-syntax.vercel.app/?path=/docs/components-iconbutton--docs) is a clickable element that is used to perform an action.\n */\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n (\n {\n accessibilityLabel,\n color = \"primary\",\n \"data-testid\": dataTestId,\n disabled = false,\n icon: Icon,\n size = \"md\",\n tooltip,\n onClick,\n }: IconButtonProps,\n ref,\n ) => {\n const isHydrated = useIsHydrated();\n const { themeName } = useTheme();\n\n const foregroundColorClass =\n themeName === \"classic\"\n ? classicForegroundColor(classicColor(color))\n : cambioForegroundColor(cambioColor(color));\n\n const backgroundColorClass =\n themeName === \"classic\"\n ? classicBackgroundColor(classicColor(color))\n : cambioBackgroundColor(cambioColor(color));\n\n return (\n <button\n aria-label={accessibilityLabel}\n data-testid={dataTestId}\n type=\"button\"\n title={tooltip}\n disabled={!isHydrated || disabled}\n onClick={onClick}\n className={classNames(\n styles.iconButton,\n foregroundColorClass,\n backgroundColorClass,\n themeName === \"classic\" ? styles[size] : styles[`${size}Cambio`],\n {\n [buttonStyles.secondaryBorder]:\n themeName === \"classic\" && color === \"secondary\",\n [buttonStyles.secondaryDestructiveBorder]:\n themeName === \"classic\" && color === \"destructive-secondary\",\n [styles.iconButtonNoBorder]:\n (themeName === \"classic\" &&\n ![\"secondary\", \"destructive-secondary\"].includes(color)) ||\n themeName === \"cambio\",\n },\n )}\n ref={ref}\n >\n <Icon\n className={\n themeName === \"classic\"\n ? classicIconSize[size]\n : cambioIconSize[size]\n }\n />\n </button>\n );\n },\n);\n\nIconButton.displayName = \"IconButton\";\n\nexport default IconButton;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/IconButton/IconButton.module.css\"; export default {\"iconButton\":\"_iconButton_1q9cs_1\",\"iconButtonNoBorder\":\"_iconButtonNoBorder_1q9cs_8\",\"sm\":\"_sm_1q9cs_49\",\"md\":\"_md_1q9cs_54\",\"lg\":\"_lg_1q9cs_59\",\"smCambio\":\"_smCambio_1q9cs_64\",\"mdCambio\":\"_mdCambio_1q9cs_69\",\"lgCambio\":\"_lgCambio_1q9cs_74\",\"smIcon\":\"_smIcon_1q9cs_79\",\"mdIcon\":\"_mdIcon_1q9cs_86\",\"lgIcon\":\"_lgIcon_1q9cs_93\",\"smIconCambio\":\"_smIconCambio_1q9cs_100\",\"mdIconCambio\":\"_mdIconCambio_1q9cs_107\",\"lgIconCambio\":\"_lgIconCambio_1q9cs_114\",\"xlIconCambio\":\"_xlIconCambio_1q9cs_121\"}"]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/LinkButton/LinkButton.tsx","css-module:./LinkButton.module.css#css-module"],"sourcesContent":["import { forwardRef, type HtmlHTMLAttributes } from \"react\";\nimport classNames from \"classnames\";\nimport React from \"react\";\nimport { type Size } from \"../constants\";\nimport Typography from \"../Typography/Typography\";\nimport buttonStyles from \"../Button/Button.module.css\";\nimport iconSize from \"../Button/constants/iconSize\";\nimport textVariant from \"../Button/constants/textVariant\";\nimport styles from \"./LinkButton.module.css\";\n\nimport { classicColor, cambioColor } from \"../Button/constants/color\";\nimport {\n classicBackgroundColor,\n cambioBackgroundColor,\n} from \"../colors//backgroundColor\";\nimport {\n classicForegroundColor,\n cambioForegroundColor,\n} from \"../colors/foregroundColor\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\n\ntype LinkButtonProps = {\n /**\n * Test id for the button\n */\n \"data-testid\"?: string;\n /**\n * The text to be displayed inside the button\n */\n text: string;\n /**\n * The link that the LinkButton should route to.\n *\n */\n href?: string;\n /**\n * The target attribute specifies where to open the linked document.\n *\n */\n target?: \"_blank\" | \"_self\" | \"_parent\" | \"_top\";\n /**\n * The rel attribute specifies the relationship between the document and the link.\n *\n */\n rel?: HtmlHTMLAttributes<HTMLAnchorElement>[\"rel\"];\n /**\n * The color of the button\n *\n * Classic only:\n * * `inverse`\n * * `success`\n *\n * Cambio only:\n * * `success-primary`\n * * `success-secondary`\n * * `success-tertiary`\n *\n * @defaultValue \"primary\"\n */\n color?:\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"destructive-primary\"\n | \"destructive-secondary\"\n | \"destructive-tertiary\"\n | \"branded\"\n | \"success\"\n | \"success-primary\"\n | \"success-secondary\"\n | \"inverse\";\n /**\n * The size of the button\n *\n * Classic:\n * * `sm`: 32px\n * * `md`: 40px\n * * `lg`: 48px\n *\n * Cambio:\n * * `sm`: 32px\n * * `md`: 48px\n * * `lg`: 64px\n *\n * @defaultValue \"md\"\n */\n size?: (typeof Size)[number];\n /**\n * If `true`, the button will take up the full width of its container\n *\n * @defaultValue false\n */\n fullWidth?: boolean;\n /**\n * The icon to be displayed at the start of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n * Note: startIcon is not supported in the Cambio theme\n */\n startIcon?: React.ComponentType<{ className?: string }>;\n /**\n * The icon to be displayed at the end of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n * Note: endIcon is not supported in the Cambio theme\n */\n endIcon?: React.ComponentType<{ className?: string }>;\n /**\n * An optional onClick event. This is used for certain wrapper's support (such as react-router-dom).\n */\n onClick?: React.MouseEventHandler<HTMLAnchorElement>;\n};\n\n/**\n * [LinkButton](https://cambly-syntax.vercel.app/?path=/docs/components-linkbutton--docs) is a \"variation\" of Button that should look identical to Button, but should be used to render links instead.\n */\nconst LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(\n (\n {\n text,\n href,\n target,\n rel,\n \"data-testid\": dataTestId,\n color = \"primary\",\n size = \"md\",\n fullWidth = false,\n startIcon: StartIcon,\n endIcon: EndIcon,\n onClick,\n }: LinkButtonProps,\n ref,\n ) => {\n const { themeName } = useTheme();\n\n const foregroundColorClass =\n themeName === \"classic\"\n ? classicForegroundColor(classicColor(color))\n : cambioForegroundColor(cambioColor(color));\n\n const backgroundColorClass =\n themeName === \"classic\"\n ? classicBackgroundColor(classicColor(color))\n : cambioBackgroundColor(cambioColor(color));\n\n return (\n <a\n href={href}\n data-testid={dataTestId}\n target={target}\n ref={ref}\n rel={rel}\n className={classNames(\n styles.linkButton,\n buttonStyles.button,\n foregroundColorClass,\n backgroundColorClass,\n themeName === \"classic\"\n ? buttonStyles[size]\n : buttonStyles[`${size}Cambio`],\n {\n [buttonStyles.fullWidth]: fullWidth,\n [styles.fitContent]: !fullWidth,\n [buttonStyles.buttonGap]:\n themeName === \"classic\" && (size === \"lg\" || size === \"md\"),\n [buttonStyles.secondaryBorder]:\n themeName === \"classic\" && color === \"secondary\",\n [buttonStyles.secondaryDestructiveBorder]:\n themeName === \"classic\" && color === \"destructive-secondary\",\n },\n )}\n onClick={onClick}\n >\n {StartIcon && themeName === \"classic\" && (\n <StartIcon\n className={classNames(\n buttonStyles.icon,\n iconSize[size],\n foregroundColorClass,\n )}\n />\n )}\n <Typography\n size={themeName === \"classic\" ? textVariant[size] : textVariant[size]}\n >\n <span\n // Temporary - until we have cambio colors on Typogrphay\n className={foregroundColorClass}\n style={{ fontWeight: 500 }}\n >\n {text}\n </span>\n </Typography>\n {EndIcon && themeName === \"classic\" && (\n <EndIcon\n className={classNames(\n buttonStyles.icon,\n iconSize[size],\n foregroundColorClass,\n )}\n />\n )}\n </a>\n );\n },\n);\n\nLinkButton.displayName = \"LinkButton\";\n\nexport default LinkButton;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/LinkButton/LinkButton.module.css\"; export default {\"linkButton\":\"_linkButton_1qjrb_1\",\"fitContent\":\"_fitContent_1qjrb_11\"}"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAS,kBAA2C;AACpD,OAAO,gBAAgB;;;ACD6E,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,cAAa,uBAAsB;;;AD8IpL,SA4BI,KA5BJ;AA9BN,IAAM,aAAa;AAAA,EACjB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,SAAS;AAAA,IACT;AAAA,EACF,GACA,QACG;AACH,UAAM,EAAE,UAAU,IAAI,SAAS;AAE/B,UAAM,uBACJ,cAAc,YACV,uBAAuB,aAAa,KAAK,CAAC,IAC1C,sBAAsB,YAAY,KAAK,CAAC;AAE9C,UAAM,uBACJ,cAAc,YACV,uBAAuB,aAAa,KAAK,CAAC,IAC1C,sBAAsB,YAAY,KAAK,CAAC;AAE9C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,UACT,0BAAO;AAAA,UACP,sBAAa;AAAA,UACb;AAAA,UACA;AAAA,UACA,cAAc,YACV,sBAAa,IAAI,IACjB,sBAAa,GAAG,YAAY;AAAA,UAChC;AAAA,YACE,CAAC,sBAAa,SAAS,GAAG;AAAA,YAC1B,CAAC,0BAAO,UAAU,GAAG,CAAC;AAAA,YACtB,CAAC,sBAAa,SAAS,GACrB,cAAc,cAAc,SAAS,QAAQ,SAAS;AAAA,YACxD,CAAC,sBAAa,eAAe,GAC3B,cAAc,aAAa,UAAU;AAAA,YACvC,CAAC,sBAAa,0BAA0B,GACtC,cAAc,aAAa,UAAU;AAAA,UACzC;AAAA,QACF;AAAA,QACA;AAAA,QAEC;AAAA,uBAAa,cAAc,aAC1B;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT,sBAAa;AAAA,gBACb,iBAAS,IAAI;AAAA,gBACb;AAAA,cACF;AAAA;AAAA,UACF;AAAA,UAEF;AAAA,YAAC;AAAA;AAAA,cACC,MAAM,cAAc,YAAY,oBAAY,IAAI,IAAI,oBAAY,IAAI;AAAA,cAEpE;AAAA,gBAAC;AAAA;AAAA,kBAEC,WAAW;AAAA,kBACX,OAAO,EAAE,YAAY,IAAI;AAAA,kBAExB;AAAA;AAAA,cACH;AAAA;AAAA,UACF;AAAA,UACC,WAAW,cAAc,aACxB;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT,sBAAa;AAAA,gBACb,iBAAS,IAAI;AAAA,gBACb;AAAA,cACF;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AAEzB,IAAO,qBAAQ;","names":[]}