@cambly/syntax-core 10.30.0 → 10.32.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Avatar/Avatar.cjs +6 -8
- package/dist/Avatar/Avatar.css +175 -189
- package/dist/Avatar/Avatar.css.map +1 -1
- package/dist/Avatar/Avatar.d.ts +2 -9
- package/dist/Avatar/Avatar.js +5 -7
- package/dist/AvatarGroup/AvatarGroup.cjs +5 -7
- package/dist/AvatarGroup/AvatarGroup.css +167 -158
- package/dist/AvatarGroup/AvatarGroup.css.map +1 -1
- package/dist/AvatarGroup/AvatarGroup.d.ts +2 -9
- package/dist/AvatarGroup/AvatarGroup.js +4 -6
- package/dist/Badge/Badge.cjs +6 -8
- package/dist/Badge/Badge.css +212 -239
- package/dist/Badge/Badge.css.map +1 -1
- package/dist/Badge/Badge.js +5 -7
- package/dist/Box/Box.cjs +6 -6
- package/dist/Box/Box.css +167 -158
- package/dist/Box/Box.css.map +1 -1
- package/dist/Box/Box.d.ts +2 -10
- package/dist/Box/Box.js +7 -7
- package/dist/Button/Button.cjs +11 -14
- package/dist/Button/Button.css +231 -283
- package/dist/Button/Button.css.map +1 -1
- package/dist/Button/Button.d.ts +1 -16
- package/dist/Button/Button.js +10 -13
- package/dist/Button/constants/iconSize.cjs +2 -3
- package/dist/Button/constants/iconSize.css +19 -44
- package/dist/Button/constants/iconSize.css.map +1 -1
- package/dist/Button/constants/iconSize.js +1 -2
- package/dist/ButtonGroup/ButtonGroup.cjs +2 -3
- package/dist/ButtonGroup/ButtonGroup.css +6 -15
- package/dist/ButtonGroup/ButtonGroup.css.map +1 -1
- package/dist/ButtonGroup/ButtonGroup.d.ts +0 -6
- package/dist/ButtonGroup/ButtonGroup.js +1 -2
- package/dist/Card/Card.cjs +5 -7
- package/dist/Card/Card.css +167 -158
- package/dist/Card/Card.css.map +1 -1
- package/dist/Card/Card.d.ts +1 -1
- package/dist/Card/Card.js +4 -6
- package/dist/Checkbox/Checkbox.cjs +4 -5
- package/dist/Checkbox/Checkbox.css +222 -254
- package/dist/Checkbox/Checkbox.css.map +1 -1
- package/dist/Checkbox/Checkbox.js +3 -4
- package/dist/Chip/Chip.cjs +6 -8
- package/dist/Chip/Chip.css +225 -270
- package/dist/Chip/Chip.css.map +1 -1
- package/dist/Chip/Chip.d.ts +1 -4
- package/dist/Chip/Chip.js +5 -7
- package/dist/Dialog/Dialog.cjs +4 -6
- package/dist/Dialog/Dialog.css +167 -158
- package/dist/Dialog/Dialog.css.map +1 -1
- package/dist/Dialog/Dialog.js +3 -5
- package/dist/Dialog/ModalDialog.cjs +12 -16
- package/dist/Dialog/ModalDialog.css +178 -309
- package/dist/Dialog/ModalDialog.css.map +1 -1
- package/dist/Dialog/ModalDialog.js +10 -14
- package/dist/Divider/Divider.cjs +3 -4
- package/dist/Divider/Divider.css +164 -140
- package/dist/Divider/Divider.css.map +1 -1
- package/dist/Divider/Divider.js +2 -3
- package/dist/Heading/Heading.cjs +4 -5
- package/dist/Heading/Heading.css +209 -221
- package/dist/Heading/Heading.css.map +1 -1
- package/dist/Heading/Heading.d.ts +3 -9
- package/dist/Heading/Heading.js +3 -4
- package/dist/IconButton/IconButton.cjs +6 -9
- package/dist/IconButton/IconButton.css +175 -291
- package/dist/IconButton/IconButton.css.map +1 -1
- package/dist/IconButton/IconButton.d.ts +3 -18
- package/dist/IconButton/IconButton.js +5 -8
- package/dist/LinkButton/LinkButton.cjs +9 -12
- package/dist/LinkButton/LinkButton.css +228 -265
- package/dist/LinkButton/LinkButton.css.map +1 -1
- package/dist/LinkButton/LinkButton.d.ts +2 -20
- package/dist/LinkButton/LinkButton.js +8 -11
- package/dist/Modal/Layer.cjs +5 -7
- package/dist/Modal/Layer.css +167 -158
- package/dist/Modal/Layer.css.map +1 -1
- package/dist/Modal/Layer.js +4 -6
- package/dist/Modal/Modal.cjs +13 -17
- package/dist/Modal/Modal.css +227 -411
- package/dist/Modal/Modal.css.map +1 -1
- package/dist/Modal/Modal.js +12 -16
- package/dist/Popover/Popover.cjs +13 -17
- package/dist/Popover/Popover.css +178 -309
- package/dist/Popover/Popover.css.map +1 -1
- package/dist/Popover/Popover.js +11 -15
- package/dist/RadioButton/RadioButton.cjs +6 -8
- package/dist/RadioButton/RadioButton.css +212 -239
- package/dist/RadioButton/RadioButton.css.map +1 -1
- package/dist/RadioButton/RadioButton.js +5 -7
- package/dist/RichSelect/RichSelectBox.cjs +20 -23
- package/dist/RichSelect/RichSelectBox.css +250 -329
- package/dist/RichSelect/RichSelectBox.css.map +1 -1
- package/dist/RichSelect/RichSelectBox.js +18 -21
- package/dist/RichSelect/RichSelectChip.cjs +7 -9
- package/dist/RichSelect/RichSelectChip.css +225 -270
- package/dist/RichSelect/RichSelectChip.css.map +1 -1
- package/dist/RichSelect/RichSelectChip.js +6 -8
- package/dist/RichSelect/RichSelectList.cjs +27 -31
- package/dist/RichSelect/RichSelectList.css +338 -468
- package/dist/RichSelect/RichSelectList.css.map +1 -1
- package/dist/RichSelect/RichSelectList.js +25 -29
- package/dist/RichSelect/RichSelectRadioButton.cjs +7 -9
- package/dist/RichSelect/RichSelectRadioButton.css +212 -239
- package/dist/RichSelect/RichSelectRadioButton.css.map +1 -1
- package/dist/RichSelect/RichSelectRadioButton.js +6 -8
- package/dist/RichSelect/RichSelectSection.cjs +4 -5
- package/dist/RichSelect/RichSelectSection.css +209 -221
- package/dist/RichSelect/RichSelectSection.css.map +1 -1
- package/dist/RichSelect/RichSelectSection.js +3 -4
- package/dist/SelectList/SelectList.cjs +7 -9
- package/dist/SelectList/SelectList.css +223 -274
- package/dist/SelectList/SelectList.css.map +1 -1
- package/dist/SelectList/SelectList.d.ts +1 -0
- package/dist/SelectList/SelectList.js +6 -8
- package/dist/TapArea/TapArea.cjs +7 -3
- package/dist/TapArea/TapArea.css +2054 -15
- package/dist/TapArea/TapArea.css.map +1 -1
- package/dist/TapArea/TapArea.js +6 -2
- package/dist/TextArea/TextArea.cjs +6 -8
- package/dist/TextArea/TextArea.css +223 -305
- package/dist/TextArea/TextArea.css.map +1 -1
- package/dist/TextArea/TextArea.js +5 -7
- package/dist/TextField/TextField.cjs +6 -8
- package/dist/TextField/TextField.css +222 -289
- package/dist/TextField/TextField.css.map +1 -1
- package/dist/TextField/TextField.d.ts +0 -6
- package/dist/TextField/TextField.js +5 -7
- package/dist/ThemeProvider/ThemeProvider.cjs +2 -4
- package/dist/ThemeProvider/ThemeProvider.d.ts +3 -9
- package/dist/ThemeProvider/ThemeProvider.js +3 -5
- package/dist/Tooltip/Tooltip.cjs +5 -7
- package/dist/Tooltip/Tooltip.css +212 -239
- package/dist/Tooltip/Tooltip.css.map +1 -1
- package/dist/Tooltip/Tooltip.js +4 -6
- package/dist/Typography/Typography.cjs +3 -4
- package/dist/Typography/Typography.css +209 -221
- package/dist/Typography/Typography.css.map +1 -1
- package/dist/Typography/Typography.d.ts +3 -21
- package/dist/Typography/Typography.js +2 -3
- package/dist/__chunks/2MQDGNBM.cjs +112 -0
- package/dist/__chunks/2MQDGNBM.cjs.map +1 -0
- package/dist/__chunks/{GJBW4BG7.js → 2XOJNXTC.js} +2 -2
- package/dist/__chunks/{BVYHALMT.cjs → 3RDV2SM7.cjs} +8 -12
- package/dist/__chunks/3RDV2SM7.cjs.map +1 -0
- package/dist/__chunks/{FPHP3T7U.js → 423C767D.js} +8 -25
- package/dist/__chunks/423C767D.js.map +1 -0
- package/dist/__chunks/{Q4HTXMNF.js → 4325RESS.js} +3 -7
- package/dist/__chunks/4325RESS.js.map +1 -0
- package/dist/__chunks/45TMKSJQ.cjs +9 -0
- package/dist/__chunks/45TMKSJQ.cjs.map +1 -0
- package/dist/__chunks/{CS66HKUB.cjs → 4E7A4J3K.cjs} +28 -42
- package/dist/__chunks/4E7A4J3K.cjs.map +1 -0
- package/dist/__chunks/{GEGGHBSM.cjs → 4HCWQMZO.cjs} +18 -18
- package/dist/__chunks/{AKKJTW7U.js → 53IGOH2V.js} +9 -19
- package/dist/__chunks/53IGOH2V.js.map +1 -0
- package/dist/__chunks/{UKLQ64N7.cjs → 5PL5GKUK.cjs} +6 -3
- package/dist/__chunks/5PL5GKUK.cjs.map +1 -0
- package/dist/__chunks/5VVFGPW6.cjs +72 -0
- package/dist/__chunks/5VVFGPW6.cjs.map +1 -0
- package/dist/__chunks/6CZHUML6.js +37 -0
- package/dist/__chunks/6CZHUML6.js.map +1 -0
- package/dist/__chunks/{JXOKXBDZ.cjs → ASFZDRJJ.cjs} +9 -21
- package/dist/__chunks/ASFZDRJJ.cjs.map +1 -0
- package/dist/__chunks/{ICDRMDXD.js → B5BNKWTJ.js} +1 -1
- package/dist/__chunks/{ICDRMDXD.js.map → B5BNKWTJ.js.map} +1 -1
- package/dist/__chunks/{A323TCSA.cjs → BEKUOSKU.cjs} +5 -11
- package/dist/__chunks/BEKUOSKU.cjs.map +1 -0
- package/dist/__chunks/{W5MIJIZA.cjs → BNBE2XVM.cjs} +5 -14
- package/dist/__chunks/BNBE2XVM.cjs.map +1 -0
- package/dist/__chunks/BOX3VY3Q.js +30 -0
- package/dist/__chunks/BOX3VY3Q.js.map +1 -0
- package/dist/__chunks/BYVURUTU.cjs +37 -0
- package/dist/__chunks/BYVURUTU.cjs.map +1 -0
- package/dist/__chunks/C5XPZTFO.cjs +30 -0
- package/dist/__chunks/C5XPZTFO.cjs.map +1 -0
- package/dist/__chunks/{4GTNQPPD.js → CAEGAJQ2.js} +9 -21
- package/dist/__chunks/CAEGAJQ2.js.map +1 -0
- package/dist/__chunks/{3OWAOKRW.js → CPQLZKCY.js} +17 -27
- package/dist/__chunks/CPQLZKCY.js.map +1 -0
- package/dist/__chunks/{BQOD4WU7.js → CUJFDOPJ.js} +29 -43
- package/dist/__chunks/CUJFDOPJ.js.map +1 -0
- package/dist/__chunks/{IB3FQANU.js → DEXL5BXD.js} +10 -36
- package/dist/__chunks/DEXL5BXD.js.map +1 -0
- package/dist/__chunks/{HYRATHVK.cjs → DMA6PPUZ.cjs} +6 -7
- package/dist/__chunks/DMA6PPUZ.cjs.map +1 -0
- package/dist/__chunks/{7SCBZPIF.cjs → DQRU6NZI.cjs} +1 -1
- package/dist/__chunks/{7SCBZPIF.cjs.map → DQRU6NZI.cjs.map} +1 -1
- package/dist/__chunks/{6P6ARVEA.cjs → E32CAKEB.cjs} +3 -3
- package/dist/__chunks/EB7WKQ35.js +9 -0
- package/dist/__chunks/EB7WKQ35.js.map +1 -0
- package/dist/__chunks/{6OCOGTM5.cjs → EMVONWGI.cjs} +20 -33
- package/dist/__chunks/EMVONWGI.cjs.map +1 -0
- package/dist/__chunks/{3FMGCZP2.cjs → EOHYUABJ.cjs} +12 -22
- package/dist/__chunks/EOHYUABJ.cjs.map +1 -0
- package/dist/__chunks/ESGHXEEA.cjs +91 -0
- package/dist/__chunks/ESGHXEEA.cjs.map +1 -0
- package/dist/__chunks/{MONMI3LS.js → FRR2K77P.js} +2 -2
- package/dist/__chunks/{HCHFPFNX.js → GCE2CI4A.js} +5 -11
- package/dist/__chunks/GCE2CI4A.js.map +1 -0
- package/dist/__chunks/HAI43LQ2.cjs +117 -0
- package/dist/__chunks/HAI43LQ2.cjs.map +1 -0
- package/dist/__chunks/{EKHHYK7U.cjs → HNXMVFBH.cjs} +15 -25
- package/dist/__chunks/HNXMVFBH.cjs.map +1 -0
- package/dist/__chunks/JFI6TDAC.js +72 -0
- package/dist/__chunks/JFI6TDAC.js.map +1 -0
- package/dist/__chunks/{FTKHKS6W.js → JJMHCJ37.js} +3 -3
- package/dist/__chunks/JWJK72BH.js +17 -0
- package/dist/__chunks/JWJK72BH.js.map +1 -0
- package/dist/__chunks/{TDR3JRXZ.js → KCGPFLPK.js} +16 -29
- package/dist/__chunks/KCGPFLPK.js.map +1 -0
- package/dist/__chunks/{WOIJRASP.cjs → KNFEGYQM.cjs} +3 -3
- package/dist/__chunks/KZR322YX.cjs +97 -0
- package/dist/__chunks/KZR322YX.cjs.map +1 -0
- package/dist/__chunks/KZT53ITQ.cjs +9 -0
- package/dist/__chunks/KZT53ITQ.cjs.map +1 -0
- package/dist/__chunks/LBA34HLF.cjs +47 -0
- package/dist/__chunks/LBA34HLF.cjs.map +1 -0
- package/dist/__chunks/{3CNALXRL.js → LQ6UZ6GG.js} +8 -8
- package/dist/__chunks/{3HBVE6VG.js → LV2KIGSE.js} +8 -18
- package/dist/__chunks/LV2KIGSE.js.map +1 -0
- package/dist/__chunks/M3PAAPMI.cjs +56 -0
- package/dist/__chunks/M3PAAPMI.cjs.map +1 -0
- package/dist/__chunks/{ZUQC37VB.cjs → MI5OUDV4.cjs} +3 -3
- package/dist/__chunks/{5MKCDCHQ.cjs → MLUQYLT2.cjs} +20 -28
- package/dist/__chunks/MLUQYLT2.cjs.map +1 -0
- package/dist/__chunks/{KTTIFVGY.js → MOLOILVI.js} +2 -2
- package/dist/__chunks/{AYTJYJHI.js → N6YLXBLU.js} +4 -9
- package/dist/__chunks/N6YLXBLU.js.map +1 -0
- package/dist/__chunks/{VLK5CARI.cjs → N7WA46RL.cjs} +7 -7
- package/dist/__chunks/{Y2HREK3T.js → NFIK6RYN.js} +4 -4
- package/dist/__chunks/NPOX7QNB.js +91 -0
- package/dist/__chunks/NPOX7QNB.js.map +1 -0
- package/dist/__chunks/PIB5AHP5.js +128 -0
- package/dist/__chunks/PIB5AHP5.js.map +1 -0
- package/dist/__chunks/PUTZ53EC.js +9 -0
- package/dist/__chunks/PUTZ53EC.js.map +1 -0
- package/dist/__chunks/QT6IRCGW.cjs +9 -0
- package/dist/__chunks/QT6IRCGW.cjs.map +1 -0
- package/dist/__chunks/{5MJ6NOUC.js → RCEIKIN5.js} +6 -3
- package/dist/__chunks/RCEIKIN5.js.map +1 -0
- package/dist/__chunks/{7BAMJSUF.js → RGOIFORP.js} +4 -10
- package/dist/__chunks/RGOIFORP.js.map +1 -0
- package/dist/__chunks/{GANR5JVV.cjs → RJ3ZYLJS.cjs} +7 -13
- package/dist/__chunks/RJ3ZYLJS.cjs.map +1 -0
- package/dist/__chunks/S6TNP7G5.js +9 -0
- package/dist/__chunks/S6TNP7G5.js.map +1 -0
- package/dist/__chunks/{FLFJRP4T.js → SJRKFU77.js} +23 -37
- package/dist/__chunks/SJRKFU77.js.map +1 -0
- package/dist/__chunks/{SFOAZYZG.cjs → SND6HHAL.cjs} +3 -3
- package/dist/__chunks/{2HNPYS3S.cjs → T75YP5VR.cjs} +32 -42
- package/dist/__chunks/T75YP5VR.cjs.map +1 -0
- package/dist/__chunks/{I6CGA2ER.js → TEKYRS2R.js} +6 -10
- package/dist/__chunks/TEKYRS2R.js.map +1 -0
- package/dist/__chunks/{63GEZVJ4.js → TK2EQ6QG.js} +6 -7
- package/dist/__chunks/TK2EQ6QG.js.map +1 -0
- package/dist/__chunks/{PKBQW5T6.cjs → TNVQI6LF.cjs} +4 -8
- package/dist/__chunks/TNVQI6LF.cjs.map +1 -0
- package/dist/__chunks/{X5KCRFFF.js → TSR66LRL.js} +11 -21
- package/dist/__chunks/TSR66LRL.js.map +1 -0
- package/dist/__chunks/UAXX2ZEQ.cjs +17 -0
- package/dist/__chunks/UAXX2ZEQ.cjs.map +1 -0
- package/dist/__chunks/VKL4RHBK.js +97 -0
- package/dist/__chunks/VKL4RHBK.js.map +1 -0
- package/dist/__chunks/{CPIFXRXD.cjs → VM56IP2S.cjs} +19 -29
- package/dist/__chunks/VM56IP2S.cjs.map +1 -0
- package/dist/__chunks/W74F2R45.cjs +128 -0
- package/dist/__chunks/W74F2R45.cjs.map +1 -0
- package/dist/__chunks/{N5B6KNJR.js → WBMHYMAT.js} +18 -26
- package/dist/__chunks/WBMHYMAT.js.map +1 -0
- package/dist/__chunks/XCSW34UM.cjs +94 -0
- package/dist/__chunks/XCSW34UM.cjs.map +1 -0
- package/dist/__chunks/XL37HTXI.js +117 -0
- package/dist/__chunks/XL37HTXI.js.map +1 -0
- package/dist/__chunks/YAM7DAOZ.js +94 -0
- package/dist/__chunks/YAM7DAOZ.js.map +1 -0
- package/dist/__chunks/{UF7SXHS4.js → YBOF6XGJ.js} +4 -13
- package/dist/__chunks/YBOF6XGJ.js.map +1 -0
- package/dist/__chunks/{K27Z66LH.js → YF53K6PE.js} +2 -2
- package/dist/__chunks/{LECUYS4O.cjs → YJI76DU2.cjs} +5 -5
- package/dist/__chunks/{THYSYYWS.cjs → ZQRUOZFX.cjs} +5 -10
- package/dist/__chunks/ZQRUOZFX.cjs.map +1 -0
- package/dist/colors/backgroundColor.cjs +3 -5
- package/dist/colors/backgroundColor.css +164 -140
- package/dist/colors/backgroundColor.css.map +1 -1
- package/dist/colors/backgroundColor.d.ts +3 -4
- package/dist/colors/backgroundColor.js +4 -6
- package/dist/colors/border.cjs +11 -0
- package/dist/colors/border.css +446 -0
- package/dist/colors/border.css.map +1 -0
- package/dist/colors/border.d.ts +5 -0
- package/dist/colors/border.js +11 -0
- package/dist/colors/foregroundColor.cjs +3 -5
- package/dist/colors/foregroundColor.css +164 -140
- package/dist/colors/foregroundColor.css.map +1 -1
- package/dist/colors/foregroundColor.d.ts +3 -4
- package/dist/colors/foregroundColor.js +4 -6
- package/dist/constants.cjs +0 -2
- package/dist/constants.cjs.map +1 -1
- package/dist/constants.d.ts +1 -1
- package/dist/constants.js +0 -2
- package/dist/constants.js.map +1 -1
- package/dist/index.cjs +41 -46
- package/dist/index.css +308 -553
- package/dist/index.css.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +44 -49
- package/package.json +1 -1
- package/dist/Button/constants/classicSize.cjs +0 -11
- package/dist/Button/constants/classicSize.cjs.map +0 -1
- package/dist/Button/constants/classicSize.d.ts +0 -3
- package/dist/Button/constants/classicSize.js +0 -11
- package/dist/Button/constants/classicSize.js.map +0 -1
- package/dist/Button/constants/color.cjs +0 -11
- package/dist/Button/constants/color.d.ts +0 -4
- package/dist/Button/constants/color.js +0 -11
- package/dist/__chunks/2HNPYS3S.cjs.map +0 -1
- package/dist/__chunks/2RWNBVOK.cjs +0 -114
- package/dist/__chunks/2RWNBVOK.cjs.map +0 -1
- package/dist/__chunks/3FMGCZP2.cjs.map +0 -1
- package/dist/__chunks/3HBVE6VG.js.map +0 -1
- package/dist/__chunks/3OWAOKRW.js.map +0 -1
- package/dist/__chunks/4GTNQPPD.js.map +0 -1
- package/dist/__chunks/5MJ6NOUC.js.map +0 -1
- package/dist/__chunks/5MKCDCHQ.cjs.map +0 -1
- package/dist/__chunks/5OLT2HH5.js +0 -43
- package/dist/__chunks/5OLT2HH5.js.map +0 -1
- package/dist/__chunks/5PWYNWVE.js +0 -115
- package/dist/__chunks/5PWYNWVE.js.map +0 -1
- package/dist/__chunks/63GEZVJ4.js.map +0 -1
- package/dist/__chunks/6OCOGTM5.cjs.map +0 -1
- package/dist/__chunks/7BAMJSUF.js.map +0 -1
- package/dist/__chunks/A323TCSA.cjs.map +0 -1
- package/dist/__chunks/AKKJTW7U.js.map +0 -1
- package/dist/__chunks/AYTJYJHI.js.map +0 -1
- package/dist/__chunks/B7PDT66P.js +0 -9
- package/dist/__chunks/B7PDT66P.js.map +0 -1
- package/dist/__chunks/BQOD4WU7.js.map +0 -1
- package/dist/__chunks/BVYHALMT.cjs.map +0 -1
- package/dist/__chunks/BXHT3UUW.js +0 -9
- package/dist/__chunks/BXHT3UUW.js.map +0 -1
- package/dist/__chunks/CPIFXRXD.cjs.map +0 -1
- package/dist/__chunks/CS66HKUB.cjs.map +0 -1
- package/dist/__chunks/DTKTTGU5.cjs +0 -9
- package/dist/__chunks/DTKTTGU5.cjs.map +0 -1
- package/dist/__chunks/EKHHYK7U.cjs.map +0 -1
- package/dist/__chunks/FH2W3CI2.cjs +0 -126
- package/dist/__chunks/FH2W3CI2.cjs.map +0 -1
- package/dist/__chunks/FLFJRP4T.js.map +0 -1
- package/dist/__chunks/FPHP3T7U.js.map +0 -1
- package/dist/__chunks/GANR5JVV.cjs.map +0 -1
- package/dist/__chunks/GFKDPMFK.js +0 -25
- package/dist/__chunks/GFKDPMFK.js.map +0 -1
- package/dist/__chunks/GWJGZYZO.js +0 -150
- package/dist/__chunks/GWJGZYZO.js.map +0 -1
- package/dist/__chunks/HCHFPFNX.js.map +0 -1
- package/dist/__chunks/HWQUS53M.cjs +0 -25
- package/dist/__chunks/HWQUS53M.cjs.map +0 -1
- package/dist/__chunks/HYRATHVK.cjs.map +0 -1
- package/dist/__chunks/I6CGA2ER.js.map +0 -1
- package/dist/__chunks/IB3FQANU.js.map +0 -1
- package/dist/__chunks/J43HGNHN.cjs +0 -82
- package/dist/__chunks/J43HGNHN.cjs.map +0 -1
- package/dist/__chunks/JAC64LLA.js +0 -17
- package/dist/__chunks/JAC64LLA.js.map +0 -1
- package/dist/__chunks/JNYNLJGY.js +0 -137
- package/dist/__chunks/JNYNLJGY.js.map +0 -1
- package/dist/__chunks/JXOKXBDZ.cjs.map +0 -1
- package/dist/__chunks/KYIRM6PZ.cjs +0 -137
- package/dist/__chunks/KYIRM6PZ.cjs.map +0 -1
- package/dist/__chunks/N5B6KNJR.js.map +0 -1
- package/dist/__chunks/NCUQOLOV.cjs +0 -115
- package/dist/__chunks/NCUQOLOV.cjs.map +0 -1
- package/dist/__chunks/OAZD7W2W.cjs +0 -96
- package/dist/__chunks/OAZD7W2W.cjs.map +0 -1
- package/dist/__chunks/OMFFRI3K.js +0 -9
- package/dist/__chunks/OMFFRI3K.js.map +0 -1
- package/dist/__chunks/OU5C2MBA.js +0 -114
- package/dist/__chunks/OU5C2MBA.js.map +0 -1
- package/dist/__chunks/PKBQW5T6.cjs.map +0 -1
- package/dist/__chunks/Q4HTXMNF.js.map +0 -1
- package/dist/__chunks/QAS3KERZ.cjs +0 -9
- package/dist/__chunks/QAS3KERZ.cjs.map +0 -1
- package/dist/__chunks/RVFY33X2.cjs +0 -43
- package/dist/__chunks/RVFY33X2.cjs.map +0 -1
- package/dist/__chunks/S5QHTHST.cjs +0 -9
- package/dist/__chunks/S5QHTHST.cjs.map +0 -1
- package/dist/__chunks/SHHN3SRR.js +0 -9
- package/dist/__chunks/SHHN3SRR.js.map +0 -1
- package/dist/__chunks/TDR3JRXZ.js.map +0 -1
- package/dist/__chunks/THYSYYWS.cjs.map +0 -1
- package/dist/__chunks/UF7SXHS4.js.map +0 -1
- package/dist/__chunks/UKLQ64N7.cjs.map +0 -1
- package/dist/__chunks/UQY2ELTZ.cjs +0 -64
- package/dist/__chunks/UQY2ELTZ.cjs.map +0 -1
- package/dist/__chunks/UVROGDYB.js +0 -128
- package/dist/__chunks/UVROGDYB.js.map +0 -1
- package/dist/__chunks/VR4ZFZ4Z.js +0 -96
- package/dist/__chunks/VR4ZFZ4Z.js.map +0 -1
- package/dist/__chunks/W2JRKN5E.cjs +0 -9
- package/dist/__chunks/W2JRKN5E.cjs.map +0 -1
- package/dist/__chunks/W5MIJIZA.cjs.map +0 -1
- package/dist/__chunks/X5KCRFFF.js.map +0 -1
- package/dist/__chunks/XU3CLITI.cjs +0 -128
- package/dist/__chunks/XU3CLITI.cjs.map +0 -1
- package/dist/__chunks/ZCSR6NFB.cjs +0 -17
- package/dist/__chunks/ZCSR6NFB.cjs.map +0 -1
- package/dist/__chunks/ZRO3RCYX.cjs +0 -150
- package/dist/__chunks/ZRO3RCYX.cjs.map +0 -1
- package/dist/colors/foregroundTypographyColor.cjs +0 -24
- package/dist/colors/foregroundTypographyColor.cjs.map +0 -1
- package/dist/colors/foregroundTypographyColor.d.ts +0 -5
- package/dist/colors/foregroundTypographyColor.js +0 -24
- package/dist/colors/foregroundTypographyColor.js.map +0 -1
- /package/dist/__chunks/{GJBW4BG7.js.map → 2XOJNXTC.js.map} +0 -0
- /package/dist/__chunks/{GEGGHBSM.cjs.map → 4HCWQMZO.cjs.map} +0 -0
- /package/dist/__chunks/{6P6ARVEA.cjs.map → E32CAKEB.cjs.map} +0 -0
- /package/dist/__chunks/{MONMI3LS.js.map → FRR2K77P.js.map} +0 -0
- /package/dist/__chunks/{FTKHKS6W.js.map → JJMHCJ37.js.map} +0 -0
- /package/dist/__chunks/{WOIJRASP.cjs.map → KNFEGYQM.cjs.map} +0 -0
- /package/dist/__chunks/{3CNALXRL.js.map → LQ6UZ6GG.js.map} +0 -0
- /package/dist/__chunks/{ZUQC37VB.cjs.map → MI5OUDV4.cjs.map} +0 -0
- /package/dist/__chunks/{KTTIFVGY.js.map → MOLOILVI.js.map} +0 -0
- /package/dist/__chunks/{VLK5CARI.cjs.map → N7WA46RL.cjs.map} +0 -0
- /package/dist/__chunks/{Y2HREK3T.js.map → NFIK6RYN.js.map} +0 -0
- /package/dist/__chunks/{SFOAZYZG.cjs.map → SND6HHAL.cjs.map} +0 -0
- /package/dist/__chunks/{K27Z66LH.js.map → YF53K6PE.js.map} +0 -0
- /package/dist/__chunks/{LECUYS4O.cjs.map → YJI76DU2.cjs.map} +0 -0
- /package/dist/{Button/constants/color.cjs.map → colors/border.cjs.map} +0 -0
- /package/dist/{Button/constants/color.js.map → colors/border.js.map} +0 -0
|
@@ -1,82 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
var _DTKTTGU5cjs = require('./DTKTTGU5.cjs');
|
|
5
|
-
|
|
6
|
-
// src/colors/backgroundColor.ts
|
|
7
|
-
function classicBackgroundColor(color) {
|
|
8
|
-
switch (color) {
|
|
9
|
-
case "secondary":
|
|
10
|
-
return _DTKTTGU5cjs.colors_module_default.primary100BackgroundColor;
|
|
11
|
-
case "destructive-primary":
|
|
12
|
-
return _DTKTTGU5cjs.colors_module_default.destructive700BackgroundColor;
|
|
13
|
-
case "destructive-secondary":
|
|
14
|
-
return _DTKTTGU5cjs.colors_module_default.destructive100BackgroundColor;
|
|
15
|
-
case "success":
|
|
16
|
-
return _DTKTTGU5cjs.colors_module_default.success700BackgroundColor;
|
|
17
|
-
case "tertiary":
|
|
18
|
-
case "destructive-tertiary":
|
|
19
|
-
return _DTKTTGU5cjs.colors_module_default.whiteBackgroundColor;
|
|
20
|
-
case "branded":
|
|
21
|
-
return _DTKTTGU5cjs.colors_module_default.yellow700BackgroundColor;
|
|
22
|
-
case "inverse":
|
|
23
|
-
return _DTKTTGU5cjs.colors_module_default.gray60BackgroundColor;
|
|
24
|
-
default:
|
|
25
|
-
return _DTKTTGU5cjs.colors_module_default.primary700BackgroundColor;
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
function cambioBackgroundColor(color, on) {
|
|
29
|
-
if (on === "lightBackground") {
|
|
30
|
-
switch (color) {
|
|
31
|
-
case "primary":
|
|
32
|
-
return _DTKTTGU5cjs.colors_module_default.cambioBlackBackgroundColor;
|
|
33
|
-
case "secondary":
|
|
34
|
-
return _DTKTTGU5cjs.colors_module_default.cambioGray370BackgroundColor;
|
|
35
|
-
case "tertiary":
|
|
36
|
-
case "success-tertiary":
|
|
37
|
-
case "destructive-tertiary":
|
|
38
|
-
return _DTKTTGU5cjs.colors_module_default.cambioTransparentFullBackgroundColor;
|
|
39
|
-
case "success-primary":
|
|
40
|
-
return _DTKTTGU5cjs.colors_module_default.cambioSuccess700BackgroundColor;
|
|
41
|
-
case "success-secondary":
|
|
42
|
-
return _DTKTTGU5cjs.colors_module_default.cambioSuccess370BackgroundColor;
|
|
43
|
-
case "destructive-primary":
|
|
44
|
-
return _DTKTTGU5cjs.colors_module_default.cambioDestructive700BackgroundColor;
|
|
45
|
-
case "destructive-secondary":
|
|
46
|
-
return _DTKTTGU5cjs.colors_module_default.cambioDestructive370BackgroundColor;
|
|
47
|
-
case "branded":
|
|
48
|
-
return _DTKTTGU5cjs.colors_module_default.cambioYellow700BackgroundColor;
|
|
49
|
-
default:
|
|
50
|
-
return _DTKTTGU5cjs.colors_module_default.cambioBlackBackgroundColor;
|
|
51
|
-
}
|
|
52
|
-
} else {
|
|
53
|
-
switch (color) {
|
|
54
|
-
case "primary":
|
|
55
|
-
return _DTKTTGU5cjs.colors_module_default.cambioGray200BackgroundColor;
|
|
56
|
-
case "secondary":
|
|
57
|
-
return _DTKTTGU5cjs.colors_module_default.cambioGray870BackgroundColor;
|
|
58
|
-
case "tertiary":
|
|
59
|
-
case "success-tertiary":
|
|
60
|
-
case "destructive-tertiary":
|
|
61
|
-
return _DTKTTGU5cjs.colors_module_default.cambioTransparentFullBackgroundColor;
|
|
62
|
-
case "success-primary":
|
|
63
|
-
return _DTKTTGU5cjs.colors_module_default.cambioSuccess300BackgroundColor;
|
|
64
|
-
case "success-secondary":
|
|
65
|
-
return _DTKTTGU5cjs.colors_module_default.cambioSuccess770BackgroundColor;
|
|
66
|
-
case "destructive-primary":
|
|
67
|
-
return _DTKTTGU5cjs.colors_module_default.cambioDestructive300BackgroundColor;
|
|
68
|
-
case "destructive-secondary":
|
|
69
|
-
return _DTKTTGU5cjs.colors_module_default.cambioDestructive770BackgroundColor;
|
|
70
|
-
case "branded":
|
|
71
|
-
return _DTKTTGU5cjs.colors_module_default.cambioYellow700BackgroundColor;
|
|
72
|
-
default:
|
|
73
|
-
return _DTKTTGU5cjs.colors_module_default.cambioWhiteBackgroundColor;
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
exports.classicBackgroundColor = classicBackgroundColor; exports.cambioBackgroundColor = cambioBackgroundColor;
|
|
82
|
-
//# sourceMappingURL=J43HGNHN.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/colors/backgroundColor.ts"],"names":[],"mappings":";;;;;;AAGO,SAAS,uBAAuB,OAAuC;AAC5E,UAAQ,OAAO;AAAA,IACb,KAAK;AACH,aAAO,sBAAO;AAAA,IAChB,KAAK;AACH,aAAO,sBAAO;AAAA,IAChB,KAAK;AACH,aAAO,sBAAO;AAAA,IAChB,KAAK;AACH,aAAO,sBAAO;AAAA,IAChB,KAAK;AAAA,IACL,KAAK;AACH,aAAO,sBAAO;AAAA,IAChB,KAAK;AACH,aAAO,sBAAO;AAAA,IAChB,KAAK;AACH,aAAO,sBAAO;AAAA,IAChB;AACE,aAAO,sBAAO;AAAA,EAClB;AACF;AAEO,SAAS,sBACd,OACA,IACQ;AACR,MAAI,OAAO,mBAAmB;AAC5B,YAAQ,OAAO;AAAA,MACb,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB;AACE,eAAO,sBAAO;AAAA,IAClB;AAAA,EACF,OAAO;AACL,YAAQ,OAAO;AAAA,MACb,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB;AACE,eAAO,sBAAO;AAAA,IAClB;AAAA,EACF;AACF","sourcesContent":["import { type CambioColor, type Color } from \"../constants\";\nimport styles from \"./colors.module.css\";\n\nexport function classicBackgroundColor(color: (typeof Color)[number]): string {\n switch (color) {\n case \"secondary\":\n return styles.primary100BackgroundColor;\n case \"destructive-primary\":\n return styles.destructive700BackgroundColor;\n case \"destructive-secondary\":\n return styles.destructive100BackgroundColor;\n case \"success\":\n return styles.success700BackgroundColor;\n case \"tertiary\":\n case \"destructive-tertiary\":\n return styles.whiteBackgroundColor;\n case \"branded\":\n return styles.yellow700BackgroundColor;\n case \"inverse\":\n return styles.gray60BackgroundColor;\n default:\n return styles.primary700BackgroundColor;\n }\n}\n\nexport function cambioBackgroundColor(\n color: (typeof CambioColor)[number],\n on: \"lightBackground\" | \"darkBackground\",\n): string {\n if (on === \"lightBackground\") {\n switch (color) {\n case \"primary\":\n return styles.cambioBlackBackgroundColor;\n case \"secondary\":\n return styles.cambioGray370BackgroundColor;\n case \"tertiary\":\n case \"success-tertiary\":\n case \"destructive-tertiary\":\n return styles.cambioTransparentFullBackgroundColor;\n case \"success-primary\":\n return styles.cambioSuccess700BackgroundColor;\n case \"success-secondary\":\n return styles.cambioSuccess370BackgroundColor;\n case \"destructive-primary\":\n return styles.cambioDestructive700BackgroundColor;\n case \"destructive-secondary\":\n return styles.cambioDestructive370BackgroundColor;\n case \"branded\":\n return styles.cambioYellow700BackgroundColor;\n default:\n return styles.cambioBlackBackgroundColor;\n }\n } else {\n switch (color) {\n case \"primary\":\n return styles.cambioGray200BackgroundColor;\n case \"secondary\":\n return styles.cambioGray870BackgroundColor;\n case \"tertiary\":\n case \"success-tertiary\":\n case \"destructive-tertiary\":\n return styles.cambioTransparentFullBackgroundColor;\n case \"success-primary\":\n return styles.cambioSuccess300BackgroundColor;\n case \"success-secondary\":\n return styles.cambioSuccess770BackgroundColor;\n case \"destructive-primary\":\n return styles.cambioDestructive300BackgroundColor;\n case \"destructive-secondary\":\n return styles.cambioDestructive770BackgroundColor;\n case \"branded\":\n return styles.cambioYellow700BackgroundColor;\n default:\n return styles.cambioWhiteBackgroundColor;\n }\n }\n}\n"]}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
"use client"
|
|
2
|
-
|
|
3
|
-
// css-module:../Button.module.css#css-module
|
|
4
|
-
var Button_module_default = { "button": "_button_9efd1_1", "buttonGap": "_buttonGap_9efd1_9", "disabledCambioPrimary": "_disabledCambioPrimary_9efd1_50", "fullWidth": "_fullWidth_9efd1_54", "sm": "_sm_9efd1_58", "md": "_md_9efd1_65", "lg": "_lg_9efd1_72", "smCambio": "_smCambio_9efd1_79", "mdCambio": "_mdCambio_9efd1_86", "lgCambio": "_lgCambio_9efd1_93", "icon": "_icon_9efd1_100", "smIcon": "_smIcon_9efd1_104", "mdIcon": "_mdIcon_9efd1_111", "lgIcon": "_lgIcon_9efd1_118", "secondaryBorder": "_secondaryBorder_9efd1_125", "secondaryDestructiveBorder": "_secondaryDestructiveBorder_9efd1_129", "loading": "_loading_9efd1_143", "syntaxButtonLoadingRotate": "_syntaxButtonLoadingRotate_9efd1_1", "loadingCircle": "_loadingCircle_9efd1_147" };
|
|
5
|
-
|
|
6
|
-
// src/Button/constants/iconSize.ts
|
|
7
|
-
var iconSize = {
|
|
8
|
-
sm: Button_module_default.smIcon,
|
|
9
|
-
md: Button_module_default.mdIcon,
|
|
10
|
-
lg: Button_module_default.lgIcon
|
|
11
|
-
};
|
|
12
|
-
var iconSize_default = iconSize;
|
|
13
|
-
|
|
14
|
-
export {
|
|
15
|
-
iconSize_default
|
|
16
|
-
};
|
|
17
|
-
//# sourceMappingURL=JAC64LLA.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["css-module:../Button.module.css#css-module","../../src/Button/constants/iconSize.ts"],"sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Button/Button.module.css\"; export default {\"button\":\"_button_9efd1_1\",\"buttonGap\":\"_buttonGap_9efd1_9\",\"disabledCambioPrimary\":\"_disabledCambioPrimary_9efd1_50\",\"fullWidth\":\"_fullWidth_9efd1_54\",\"sm\":\"_sm_9efd1_58\",\"md\":\"_md_9efd1_65\",\"lg\":\"_lg_9efd1_72\",\"smCambio\":\"_smCambio_9efd1_79\",\"mdCambio\":\"_mdCambio_9efd1_86\",\"lgCambio\":\"_lgCambio_9efd1_93\",\"icon\":\"_icon_9efd1_100\",\"smIcon\":\"_smIcon_9efd1_104\",\"mdIcon\":\"_mdIcon_9efd1_111\",\"lgIcon\":\"_lgIcon_9efd1_118\",\"secondaryBorder\":\"_secondaryBorder_9efd1_125\",\"secondaryDestructiveBorder\":\"_secondaryDestructiveBorder_9efd1_129\",\"loading\":\"_loading_9efd1_143\",\"syntaxButtonLoadingRotate\":\"_syntaxButtonLoadingRotate_9efd1_1\",\"loadingCircle\":\"_loadingCircle_9efd1_147\"}","import styles from \"../Button.module.css\";\n\nconst iconSize = {\n sm: styles.smIcon,\n md: styles.mdIcon,\n lg: styles.lgIcon,\n};\n\nexport default iconSize;\n"],"mappings":";;;AAA4F,IAAO,wBAAQ,EAAC,UAAS,mBAAkB,aAAY,sBAAqB,yBAAwB,mCAAkC,aAAY,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,YAAW,sBAAqB,YAAW,sBAAqB,YAAW,sBAAqB,QAAO,mBAAkB,UAAS,qBAAoB,UAAS,qBAAoB,UAAS,qBAAoB,mBAAkB,8BAA6B,8BAA6B,yCAAwC,WAAU,sBAAqB,6BAA4B,sCAAqC,iBAAgB,2BAA0B;;;ACE9wB,IAAM,WAAW;AAAA,EACf,IAAI,sBAAO;AAAA,EACX,IAAI,sBAAO;AAAA,EACX,IAAI,sBAAO;AACb;AAEA,IAAO,mBAAQ;","names":[]}
|
|
@@ -1,137 +0,0 @@
|
|
|
1
|
-
"use client"
|
|
2
|
-
import {
|
|
3
|
-
Focus_module_default
|
|
4
|
-
} from "./KKADUD65.js";
|
|
5
|
-
import {
|
|
6
|
-
Typography_default
|
|
7
|
-
} from "./UVROGDYB.js";
|
|
8
|
-
import {
|
|
9
|
-
colors_module_default
|
|
10
|
-
} from "./B7PDT66P.js";
|
|
11
|
-
import {
|
|
12
|
-
useTheme
|
|
13
|
-
} from "./4GTNQPPD.js";
|
|
14
|
-
import {
|
|
15
|
-
useIsHydrated
|
|
16
|
-
} from "./JB65NEXK.js";
|
|
17
|
-
import {
|
|
18
|
-
useFocusVisible
|
|
19
|
-
} from "./BWPNF6RD.js";
|
|
20
|
-
|
|
21
|
-
// src/Checkbox/Checkbox.tsx
|
|
22
|
-
import { useState } from "react";
|
|
23
|
-
import classNames from "classnames";
|
|
24
|
-
|
|
25
|
-
// css-module:./Checkbox.module.css#css-module
|
|
26
|
-
var Checkbox_module_default = { "mainContainer": "_mainContainer_19quh_1", "inputOverlay": "_inputOverlay_19quh_9", "checkbox": "_checkbox_19quh_17", "cambioCheckbox": "_cambioCheckbox_19quh_25", "disabled": "_disabled_19quh_29", "cursorDisabled": "_cursorDisabled_19quh_33", "cursorEnabled": "_cursorEnabled_19quh_37", "uncheckedBox": "_uncheckedBox_19quh_41", "uncheckedBorder": "_uncheckedBorder_19quh_45", "uncheckedErrorBorder": "_uncheckedErrorBorder_19quh_49", "checkedBox": "_checkedBox_19quh_53", "checkedNonError": "_checkedNonError_19quh_57", "checkedError": "_checkedError_19quh_61", "sm": "_sm_19quh_65", "md": "_md_19quh_70", "smBorderRadius": "_smBorderRadius_19quh_75", "mdBorderRadius": "_mdBorderRadius_19quh_79", "checkmark": "_checkmark_19quh_83", "checkmarkError": "_checkmarkError_19quh_87" };
|
|
27
|
-
|
|
28
|
-
// src/Checkbox/Checkbox.tsx
|
|
29
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
30
|
-
var typographySize = {
|
|
31
|
-
sm: 100,
|
|
32
|
-
md: 200
|
|
33
|
-
};
|
|
34
|
-
var iconWidth = {
|
|
35
|
-
sm: 12,
|
|
36
|
-
md: 20
|
|
37
|
-
};
|
|
38
|
-
var Checkbox = ({
|
|
39
|
-
checked = false,
|
|
40
|
-
"data-testid": dataTestId,
|
|
41
|
-
disabled: disabledProp = false,
|
|
42
|
-
size = "md",
|
|
43
|
-
label,
|
|
44
|
-
error = false,
|
|
45
|
-
onChange
|
|
46
|
-
}) => {
|
|
47
|
-
const { themeName } = useTheme();
|
|
48
|
-
const isHydrated = useIsHydrated();
|
|
49
|
-
const disabled = !isHydrated || disabledProp;
|
|
50
|
-
const [isFocused, setIsFocused] = useState(false);
|
|
51
|
-
const { isFocusVisible } = useFocusVisible();
|
|
52
|
-
const checkboxStyling = classNames(Checkbox_module_default.checkbox, Checkbox_module_default[size], {
|
|
53
|
-
[Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible
|
|
54
|
-
});
|
|
55
|
-
const classicCheckboxStyling = classNames(
|
|
56
|
-
checkboxStyling,
|
|
57
|
-
Checkbox_module_default[`${size}BorderRadius`]
|
|
58
|
-
);
|
|
59
|
-
const cambioCheckboxStyling = classNames(
|
|
60
|
-
checkboxStyling,
|
|
61
|
-
Checkbox_module_default.cambioCheckbox,
|
|
62
|
-
error ? colors_module_default.cambioDestructive370BackgroundColor : colors_module_default.cambioGray370BackgroundColor
|
|
63
|
-
);
|
|
64
|
-
const uncheckedStyling = themeName === "classic" ? classNames(classicCheckboxStyling, Checkbox_module_default.uncheckedBox, {
|
|
65
|
-
[Checkbox_module_default.uncheckedBorder]: !error,
|
|
66
|
-
[Checkbox_module_default.uncheckedErrorBorder]: error
|
|
67
|
-
}) : cambioCheckboxStyling;
|
|
68
|
-
const checkedStyling = themeName === "classic" ? classNames(classicCheckboxStyling, Checkbox_module_default.checkedBox, {
|
|
69
|
-
[Checkbox_module_default.checkedNonError]: !error,
|
|
70
|
-
[Checkbox_module_default.checkedError]: error
|
|
71
|
-
}) : cambioCheckboxStyling;
|
|
72
|
-
return /* @__PURE__ */ jsxs(
|
|
73
|
-
"label",
|
|
74
|
-
{
|
|
75
|
-
className: classNames(
|
|
76
|
-
Checkbox_module_default.mainContainer,
|
|
77
|
-
Checkbox_module_default[`cursor${disabled ? "Disabled" : "Enabled"}`],
|
|
78
|
-
{
|
|
79
|
-
[Checkbox_module_default.disabled]: disabled
|
|
80
|
-
}
|
|
81
|
-
),
|
|
82
|
-
children: [
|
|
83
|
-
/* @__PURE__ */ jsxs("div", { className: checked ? checkedStyling : uncheckedStyling, children: [
|
|
84
|
-
checked && themeName === "classic" && /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", width: iconWidth[size], children: /* @__PURE__ */ jsx(
|
|
85
|
-
"path",
|
|
86
|
-
{
|
|
87
|
-
fill: "#fff",
|
|
88
|
-
d: "m9 16.2-3.5-3.5a.9839.9839 0 0 0-1.4 0c-.39.39-.39 1.01 0 1.4l4.19 4.19c.39.39 1.02.39 1.41 0L20.3 7.7c.39-.39.39-1.01 0-1.4a.9839.9839 0 0 0-1.4 0L9 16.2z"
|
|
89
|
-
}
|
|
90
|
-
) }),
|
|
91
|
-
checked && themeName === "cambio" && /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", width: iconWidth[size], children: /* @__PURE__ */ jsx(
|
|
92
|
-
"path",
|
|
93
|
-
{
|
|
94
|
-
className: error ? Checkbox_module_default.checkmarkError : Checkbox_module_default.checkmark,
|
|
95
|
-
d: "m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4 9.55 18Z"
|
|
96
|
-
}
|
|
97
|
-
) })
|
|
98
|
-
] }),
|
|
99
|
-
/* @__PURE__ */ jsx(
|
|
100
|
-
"input",
|
|
101
|
-
{
|
|
102
|
-
"data-testid": dataTestId,
|
|
103
|
-
type: "checkbox",
|
|
104
|
-
className: classNames(
|
|
105
|
-
Checkbox_module_default.inputOverlay,
|
|
106
|
-
Checkbox_module_default[size],
|
|
107
|
-
Checkbox_module_default[`cursor${disabled ? "Disabled" : "Enabled"}`]
|
|
108
|
-
),
|
|
109
|
-
checked,
|
|
110
|
-
onChange,
|
|
111
|
-
disabled,
|
|
112
|
-
onFocus: () => {
|
|
113
|
-
setIsFocused(true);
|
|
114
|
-
},
|
|
115
|
-
onBlur: () => {
|
|
116
|
-
setIsFocused(false);
|
|
117
|
-
}
|
|
118
|
-
}
|
|
119
|
-
),
|
|
120
|
-
/* @__PURE__ */ jsx(
|
|
121
|
-
Typography_default,
|
|
122
|
-
{
|
|
123
|
-
size: typographySize[size],
|
|
124
|
-
color: error ? "destructive-primary" : "gray900",
|
|
125
|
-
children: label
|
|
126
|
-
}
|
|
127
|
-
)
|
|
128
|
-
]
|
|
129
|
-
}
|
|
130
|
-
);
|
|
131
|
-
};
|
|
132
|
-
var Checkbox_default = Checkbox;
|
|
133
|
-
|
|
134
|
-
export {
|
|
135
|
-
Checkbox_default
|
|
136
|
-
};
|
|
137
|
-
//# sourceMappingURL=JNYNLJGY.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Checkbox/Checkbox.tsx","css-module:./Checkbox.module.css#css-module"],"sourcesContent":["import React, { type ReactElement, useState } from \"react\";\nimport classNames from \"classnames\";\nimport useFocusVisible from \"../useFocusVisible\";\nimport styles from \"./Checkbox.module.css\";\nimport focusStyles from \"../Focus.module.css\";\nimport Typography from \"../Typography/Typography\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\nimport colorStyles from \"../colors/colors.module.css\";\n\nconst typographySize = {\n sm: 100,\n md: 200,\n} as const;\n\nconst iconWidth = {\n sm: 12,\n md: 20,\n};\n\n/**\n * [Checkbox](https://cambly-syntax.vercel.app/?path=/docs/components-checkbox--docs) is a clickable element that will show if an option has been selected or not.\n */\nconst Checkbox = ({\n checked = false,\n \"data-testid\": dataTestId,\n disabled: disabledProp = false,\n size = \"md\",\n label,\n error = false,\n onChange,\n}: {\n /**\n * Whether or not the box has been clicked\n *\n * @defaultValue false\n */\n checked: boolean;\n /**\n * Test id for the checkbox\n */\n \"data-testid\"?: string;\n /**\n * The callback to be called when the checkbox value changes\n */\n onChange: React.ChangeEventHandler<HTMLInputElement>;\n /**\n * Whether or not the box is disabled\n *\n * @defaultValue false\n */\n disabled?: boolean;\n /**\n * The size of the checkbox and icon\n *\n * * `sm`: 16px\n * * `md`: 24px\n *\n * @defaultValue \"md\"\n */\n size?: \"sm\" | \"md\";\n /**\n * The text accompanying the checkbox\n */\n label: string;\n /**\n * Whether or not there is an error with the input\n *\n * @defaultValue false\n */\n error?: boolean;\n}): ReactElement => {\n const { themeName } = useTheme();\n const isHydrated = useIsHydrated();\n const disabled = !isHydrated || disabledProp;\n const [isFocused, setIsFocused] = useState(false);\n const { isFocusVisible } = useFocusVisible();\n\n const checkboxStyling = classNames(styles.checkbox, styles[size], {\n [focusStyles.accessibilityOutlineFocus]: isFocused && isFocusVisible,\n });\n\n const classicCheckboxStyling = classNames(\n checkboxStyling,\n styles[`${size}BorderRadius`],\n );\n\n const cambioCheckboxStyling = classNames(\n checkboxStyling,\n styles.cambioCheckbox,\n error\n ? colorStyles.cambioDestructive370BackgroundColor\n : colorStyles.cambioGray370BackgroundColor,\n );\n\n const uncheckedStyling =\n themeName === \"classic\"\n ? classNames(classicCheckboxStyling, styles.uncheckedBox, {\n [styles.uncheckedBorder]: !error,\n [styles.uncheckedErrorBorder]: error,\n })\n : cambioCheckboxStyling;\n const checkedStyling =\n themeName === \"classic\"\n ? classNames(classicCheckboxStyling, styles.checkedBox, {\n [styles.checkedNonError]: !error,\n [styles.checkedError]: error,\n })\n : cambioCheckboxStyling;\n\n return (\n <label\n className={classNames(\n styles.mainContainer,\n styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n {\n [styles.disabled]: disabled,\n },\n )}\n >\n <div className={checked ? checkedStyling : uncheckedStyling}>\n {checked && themeName === \"classic\" && (\n <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" width={iconWidth[size]}>\n <path\n fill=\"#fff\"\n d=\"m9 16.2-3.5-3.5a.9839.9839 0 0 0-1.4 0c-.39.39-.39 1.01 0 1.4l4.19 4.19c.39.39 1.02.39 1.41 0L20.3 7.7c.39-.39.39-1.01 0-1.4a.9839.9839 0 0 0-1.4 0L9 16.2z\"\n ></path>\n </svg>\n )}\n {checked && themeName === \"cambio\" && (\n <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" width={iconWidth[size]}>\n <path\n className={error ? styles.checkmarkError : styles.checkmark}\n d=\"m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4 9.55 18Z\"\n ></path>\n </svg>\n )}\n </div>\n <input\n data-testid={dataTestId}\n type=\"checkbox\"\n className={classNames(\n styles.inputOverlay,\n styles[size],\n styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n )}\n checked={checked}\n onChange={onChange}\n disabled={disabled}\n onFocus={() => {\n setIsFocused(true);\n }}\n onBlur={() => {\n setIsFocused(false);\n }}\n />\n <Typography\n size={typographySize[size]}\n color={error ? \"destructive-primary\" : \"gray900\"}\n >\n {label}\n </Typography>\n </label>\n );\n};\n\nexport default Checkbox;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Checkbox/Checkbox.module.css\"; export default {\"mainContainer\":\"_mainContainer_19quh_1\",\"inputOverlay\":\"_inputOverlay_19quh_9\",\"checkbox\":\"_checkbox_19quh_17\",\"cambioCheckbox\":\"_cambioCheckbox_19quh_25\",\"disabled\":\"_disabled_19quh_29\",\"cursorDisabled\":\"_cursorDisabled_19quh_33\",\"cursorEnabled\":\"_cursorEnabled_19quh_37\",\"uncheckedBox\":\"_uncheckedBox_19quh_41\",\"uncheckedBorder\":\"_uncheckedBorder_19quh_45\",\"uncheckedErrorBorder\":\"_uncheckedErrorBorder_19quh_49\",\"checkedBox\":\"_checkedBox_19quh_53\",\"checkedNonError\":\"_checkedNonError_19quh_57\",\"checkedError\":\"_checkedError_19quh_61\",\"sm\":\"_sm_19quh_65\",\"md\":\"_md_19quh_70\",\"smBorderRadius\":\"_smBorderRadius_19quh_75\",\"mdBorderRadius\":\"_mdBorderRadius_19quh_79\",\"checkmark\":\"_checkmark_19quh_83\",\"checkmarkError\":\"_checkmarkError_19quh_87\"}"],"mappings":"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","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/ThemeProvider/ThemeProvider.tsx","../../../syntax-design-tokens/dist/json/variables.json"],"names":[],"mappings":";;;AAAA,OAAO,SAAS,eAAe;;;ACA/B;AAAA,EACE,oBAAoB;AAAA,EACpB,8BAA8B;AAAA,EAC9B,8BAA8B;AAAA,EAC9B,8BAA8B;AAAA,EAC9B,8BAA8B;AAAA,EAC9B,8BAA8B;AAAA,EAC9B,8BAA8B;AAAA,EAC9B,sBAAsB;AAAA,EACtB,sBAAsB;AAAA,EACtB,sBAAsB;AAAA,EACtB,sBAAsB;AAAA,EACtB,uBAAuB;AAAA,EACvB,uBAAuB;AAAA,EACvB,uBAAuB;AAAA,EACvB,uBAAuB;AAAA,EACvB,uBAAuB;AAAA,EACvB,uBAAuB;AAAA,EACvB,yBAAyB;AAAA,EACzB,yBAAyB;AAAA,EACzB,yBAAyB;AAAA,EACzB,yBAAyB;AAAA,EACzB,yBAAyB;AAAA,EACzB,yBAAyB;AAAA,EACzB,0BAA0B;AAAA,EAC1B,0BAA0B;AAAA,EAC1B,0BAA0B;AAAA,EAC1B,0BAA0B;AAAA,EAC1B,0BAA0B;AAAA,EAC1B,0BAA0B;AAAA,EAC1B,0BAA0B;AAAA,EAC1B,0BAA0B;AAAA,EAC1B,0BAA0B;AAAA,EAC1B,0BAA0B;AAAA,EAC1B,0BAA0B;AAAA,EAC1B,0BAA0B;AAAA,EAC1B,yBAAyB;AAAA,EACzB,yBAAyB;AAAA,EACzB,yBAAyB;AAAA,EACzB,yBAAyB;AAAA,EACzB,yBAAyB;AAAA,EACzB,yBAAyB;AAAA,EACzB,yBAAyB;AAAA,EACzB,yBAAyB;AAAA,EACzB,yBAAyB;AAAA,EACzB,yBAAyB;AAAA,EACzB,yBAAyB;AAAA,EACzB,yBAAyB;AAAA,EACzB,oBAAoB;AAAA,EACpB,sBAAsB;AAAA,EACtB,sBAAsB;AAAA,EACtB,yBAAyB;AAAA,EACzB,yBAAyB;AAAA,EACzB,yBAAyB;AAAA,EACzB,yBAAyB;AAAA,EACzB,yBAAyB;AAAA,EACzB,yBAAyB;AAAA,EACzB,yBAAyB;AAAA,EACzB,yBAAyB;AAAA,EACzB,gCAAgC;AAAA,EAChC,gCAAgC;AAAA,EAChC,gCAAgC;AAAA,EAChC,gCAAgC;AAAA,EAChC,gCAAgC;AAAA,EAChC,gCAAgC;AAAA,EAChC,4BAA4B;AAAA,EAC5B,4BAA4B;AAAA,EAC5B,4BAA4B;AAAA,EAC5B,4BAA4B;AAAA,EAC5B,4BAA4B;AAAA,EAC5B,4BAA4B;AAAA,EAC5B,oBAAoB;AAAA,EACpB,uBAAuB;AAAA,EACvB,oBAAoB;AAAA,EACpB,sBAAsB;AAAA,EACtB,uBAAuB;AAAA,EACvB,sBAAsB;AAAA,EACtB,wBAAwB;AAAA,EACxB,qBAAqB;AAAA,EACrB,qBAAqB;AAAA,EACrB,qBAAqB;AAAA,EACrB,sBAAsB;AAAA,EACtB,oBAAoB;AAAA,EACpB,2BAA2B;AAAA,EAC3B,iCAAiC;AAAA,EACjC,iBAAiB;AAAA,EACjB,0BAA0B;AAC5B;;;AD0BI,SACE,KADF;AAxGJ,IAAM,eAAe,MAAM,cAAqB;AAAA,EAC9C,WAAW;AACb,CAAC;AACD,aAAa,cAAc;AAE3B,IAAM,2BAA2B;AAAA,EAC/B,oBAAoB;AAAA,EACpB,8BAA8B;AAAA,EAC9B,8BAA8B;AAAA,EAC9B,8BAA8B;AAAA,EAC9B,8BAA8B;AAAA,EAC9B,8BAA8B;AAAA,EAC9B,8BAA8B;AAAA,EAC9B,sBAAsB;AAAA,EACtB,sBAAsB;AAAA,EACtB,sBAAsB;AAAA,EACtB,sBAAsB;AAAA,EACtB,uBAAuB;AAAA,EACvB,uBAAuB;AAAA,EACvB,uBAAuB;AAAA,EACvB,uBAAuB;AAAA,EACvB,uBAAuB;AAAA,EACvB,uBAAuB;AAAA,EACvB,yBAAyB;AAAA;AAAA,EACzB,yBAAyB;AAAA;AAAA,EACzB,yBAAyB;AAAA;AAAA,EACzB,yBAAyB;AAAA,EACzB,yBAAyB;AAAA;AAAA,EACzB,yBAAyB;AAAA;AAAA,EACzB,0BAA0B;AAAA,EAC1B,0BAA0B;AAAA,EAC1B,0BAA0B;AAAA,EAC1B,0BAA0B;AAAA,EAC1B,0BAA0B;AAAA,EAC1B,0BAA0B;AAAA,EAC1B,0BAA0B;AAAA,EAC1B,0BAA0B;AAAA,EAC1B,0BAA0B;AAAA,EAC1B,0BAA0B;AAAA,EAC1B,0BAA0B;AAAA,EAC1B,0BAA0B;AAAA,EAC1B,yBAAyB;AAAA;AAAA,EACzB,yBAAyB;AAAA;AAAA,EACzB,yBAAyB;AAAA;AAAA,EACzB,yBAAyB;AAAA,EACzB,yBAAyB;AAAA;AAAA,EACzB,yBAAyB;AAAA;AAAA,EACzB,yBAAyB;AAAA;AAAA,EACzB,yBAAyB;AAAA;AAAA,EACzB,yBAAyB;AAAA;AAAA,EACzB,yBAAyB;AAAA,EACzB,yBAAyB;AAAA;AAAA,EACzB,yBAAyB;AAAA;AAAA,EACzB,oBAAoB;AACtB;AAEA,SAAS,eAAe,WAAsB;AAE5C,QAAM,iBAAyC;AAC/C,SAAO;AAAA;AAAA,QAED,OAAO,QAAQ,cAAc,EAC5B,OAAO,CAAC,CAAC,GAAG,MAAM;AACjB,WAAO,cAAc,YAAY,CAAC,IAAI,SAAS,QAAQ,IAAI;AAAA,EAC7D,CAAC,EACA,IAAI,CAAC,CAAC,KAAK,KAAK,MAAM;AAErB,QACE,cAAc,YACd,yBACE,GACF,GACA;AACA,aAAO;AAAA,QACL;AAAA,QACA;AAAA;AAAA,UAEE,yBACE,GACF;AAAA,QACF;AAAA,MACF;AAAA,IACF;AACA,WAAO,CAAC,KAAK,KAAK;AAAA,EACpB,CAAC,EACA,IAAI,CAAC,CAAC,KAAK,KAAK,MAAO,OAAO,QAAQ,KAAK,QAAQ,WAAW,IAAK,EACnE,OAAO,OAAO,EACd,KAAK,IAAI;AAAA;AAAA;AAGlB;AAEe,SAAR,cAA+B;AAAA,EACpC,YAAY;AAAA,EACZ;AACF,GAGuB;AACrB,QAAM,QAAQ,QAAQ,OAAO,EAAE,UAAU,IAAI,CAAC,SAAS,CAAC;AAExD,QAAM,cAAc,QAAQ,MAAM,eAAe,SAAS,GAAG,CAAC,SAAS,CAAC;AAExE,SACE,qBAAC,aAAa,UAAb,EAAsB,OACrB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,yBAAyB,EAAE,QAAQ,YAAY;AAAA,QAC/C,eAAY;AAAA;AAAA,IACb;AAAA,IACA;AAAA,KACH;AAEJ;AAEO,SAAS,WAAkB;AAChC,SAAO,MAAM,WAAW,YAAY;AACtC","sourcesContent":["import React, { useMemo } from \"react\";\nimport variables from \"@cambly/syntax-design-tokens/dist/json/variables.json\";\n\ntype ThemeName = \"classic\" | \"cambio\";\n\ntype Theme = {\n themeName: ThemeName;\n};\n\nconst ThemeContext = React.createContext<Theme>({\n themeName: \"classic\",\n});\nThemeContext.displayName = \"ThemeContext\";\n\nconst classicToCambioKeyLookup = {\n \"color-base-black\": \"color-cambio-black\",\n \"color-base-destructive-100\": \"color-cambio-destructive-100\",\n \"color-base-destructive-200\": \"color-cambio-destructive-300\",\n \"color-base-destructive-300\": \"color-cambio-destructive-300\",\n \"color-base-destructive-700\": \"color-cambio-destructive-700\",\n \"color-base-destructive-800\": \"color-cambio-destructive-900\",\n \"color-base-destructive-900\": \"color-cambio-destructive-900\",\n \"color-base-gray-10\": \"color-cambio-gray-370\",\n \"color-base-gray-30\": \"color-cambio-gray-370\",\n \"color-base-gray-60\": \"color-cambio-gray-870\",\n \"color-base-gray-80\": \"color-cambio-gray-870\",\n \"color-base-gray-100\": \"color-cambio-gray-100\",\n \"color-base-gray-200\": \"color-cambio-gray-200\",\n \"color-base-gray-300\": \"color-cambio-gray-300\",\n \"color-base-gray-700\": \"color-cambio-gray-700\",\n \"color-base-gray-800\": \"color-cambio-gray-800\",\n \"color-base-gray-900\": \"color-cambio-gray-900\",\n \"color-base-orange-100\": undefined, // Deprecated - to be deleted\n \"color-base-orange-200\": undefined, // Deprecated - to be deleted\n \"color-base-orange-300\": undefined, // Deprecated - to be deleted\n \"color-base-orange-700\": \"color-cambio-orange\",\n \"color-base-orange-800\": undefined, // Deprecated - to be deleted\n \"color-base-orange-900\": undefined, // Deprecated - to be deleted\n \"color-base-primary-100\": \"color-cambio-gray-100\",\n \"color-base-primary-200\": \"color-cambio-gray-200\",\n \"color-base-primary-300\": \"color-cambio-gray-300\",\n \"color-base-primary-700\": \"color-cambio-gray-700\",\n \"color-base-primary-800\": \"color-cambio-gray-800\",\n \"color-base-primary-900\": \"color-cambio-gray-900\",\n \"color-base-success-100\": \"color-cambio-success-100\",\n \"color-base-success-200\": \"color-cambio-success-300\",\n \"color-base-success-300\": \"color-cambio-success-300\",\n \"color-base-success-700\": \"color-cambio-success-700\",\n \"color-base-success-800\": \"color-cambio-success-900\",\n \"color-base-success-900\": \"color-cambio-success-900\",\n \"color-base-purple-100\": undefined, // Deprecated - to be deleted\n \"color-base-purple-200\": undefined, // Deprecated - to be deleted\n \"color-base-purple-300\": undefined, // Deprecated - to be deleted\n \"color-base-purple-700\": \"color-cambio-purple\",\n \"color-base-purple-800\": undefined, // Deprecated - to be deleted\n \"color-base-purple-900\": undefined, // Deprecated - to be deleted\n \"color-base-yellow-100\": undefined, // Deprecated - to be deleted\n \"color-base-yellow-200\": undefined, // Deprecated - to be deleted\n \"color-base-yellow-300\": undefined, // Deprecated - to be deleted\n \"color-base-yellow-700\": \"color-cambio-yellow-700\",\n \"color-base-yellow-800\": undefined, // Deprecated - to be deleted\n \"color-base-yellow-900\": undefined, // Deprecated - to be deleted\n \"color-base-white\": \"color-cambio-white\",\n};\n\nfunction stylesForTheme(themeName: ThemeName) {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n const tokenVariables: Record<string, string> = variables;\n return `\n :root {\n ${Object.entries(tokenVariables)\n .filter(([key]) => {\n return themeName === \"classic\" ? !key.includes(\"cambio\") : true;\n })\n .map(([key, value]) => {\n // Replace classic values with cambio ones if they exist\n if (\n themeName === \"cambio\" &&\n classicToCambioKeyLookup[\n key as keyof typeof classicToCambioKeyLookup\n ]\n ) {\n return [\n key,\n tokenVariables[\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n classicToCambioKeyLookup[\n key as keyof typeof classicToCambioKeyLookup\n ]!\n ],\n ];\n }\n return [key, value];\n })\n .map(([key, value]) => (key && value ? `--${key}: ${value};` : null))\n .filter(Boolean)\n .join(\"\\n\")}\n }\n `;\n}\n\nexport default function ThemeProvider({\n themeName = \"classic\",\n children,\n}: {\n themeName: ThemeName;\n children: React.ReactNode;\n}): React.ReactElement {\n const value = useMemo(() => ({ themeName }), [themeName]);\n\n const innerStyles = useMemo(() => stylesForTheme(themeName), [themeName]);\n\n return (\n <ThemeContext.Provider value={value}>\n <style\n dangerouslySetInnerHTML={{ __html: innerStyles }}\n data-testid=\"themeprovider-style\"\n ></style>\n {children}\n </ThemeContext.Provider>\n );\n}\n\nexport function useTheme(): Theme {\n return React.useContext(ThemeContext);\n}\n","{\n \"color-base-black\": \"#000000\",\n \"color-base-destructive-100\": \"#fef3f5\",\n \"color-base-destructive-200\": \"#fad6de\",\n \"color-base-destructive-300\": \"#f2a2b2\",\n \"color-base-destructive-700\": \"#d32a4b\",\n \"color-base-destructive-800\": \"#81162c\",\n \"color-base-destructive-900\": \"#55101d\",\n \"color-base-gray-10\": \"rgba(203, 203, 203, 0.5)\",\n \"color-base-gray-30\": \"rgba(0, 0, 0, 0.3)\",\n \"color-base-gray-60\": \"rgba(0, 0, 0, 0.6)\",\n \"color-base-gray-80\": \"rgba(0, 0, 0, 0.8)\",\n \"color-base-gray-100\": \"#f7f7f7\",\n \"color-base-gray-200\": \"#f0f0f0\",\n \"color-base-gray-300\": \"#d0d0d0\",\n \"color-base-gray-700\": \"#767676\",\n \"color-base-gray-800\": \"#353535\",\n \"color-base-gray-900\": \"#191919\",\n \"color-base-orange-100\": \"#fdf2f0\",\n \"color-base-orange-200\": \"#f6cdc4\",\n \"color-base-orange-300\": \"#ec9987\",\n \"color-base-orange-700\": \"#c34124\",\n \"color-base-orange-800\": \"#732818\",\n \"color-base-orange-900\": \"#4d1a10\",\n \"color-base-primary-100\": \"#eff6fa\",\n \"color-base-primary-200\": \"#c1dbe7\",\n \"color-base-primary-300\": \"#84b7d0\",\n \"color-base-primary-700\": \"#236482\",\n \"color-base-primary-800\": \"#274858\",\n \"color-base-primary-900\": \"#1b303b\",\n \"color-base-success-100\": \"#eff7f1\",\n \"color-base-success-200\": \"#bddcc6\",\n \"color-base-success-300\": \"#81ba92\",\n \"color-base-success-700\": \"#397b4d\",\n \"color-base-success-800\": \"#2d4936\",\n \"color-base-success-900\": \"#1e3124\",\n \"color-base-purple-100\": \"#f9f5fa\",\n \"color-base-purple-200\": \"#e8dceb\",\n \"color-base-purple-300\": \"#cdb4d3\",\n \"color-base-purple-700\": \"#8b5f95\",\n \"color-base-purple-800\": \"#523b58\",\n \"color-base-purple-900\": \"#37273b\",\n \"color-base-yellow-100\": \"#fdf5d9\",\n \"color-base-yellow-200\": \"#fbe8a3\",\n \"color-base-yellow-300\": \"#f8d663\",\n \"color-base-yellow-700\": \"#ffc929\",\n \"color-base-yellow-800\": \"#765f1c\",\n \"color-base-yellow-900\": \"#3b3009\",\n \"color-base-white\": \"#ffffff\",\n \"color-cambio-black\": \"#050500\",\n \"color-cambio-white\": \"#ffffff\",\n \"color-cambio-gray-100\": \"#faf4eb\",\n \"color-cambio-gray-200\": \"#e4dbd3\",\n \"color-cambio-gray-300\": \"#beb4ab\",\n \"color-cambio-gray-370\": \"rgba(190, 180, 171, 0.7)\",\n \"color-cambio-gray-700\": \"#888077\",\n \"color-cambio-gray-800\": \"#5c554d\",\n \"color-cambio-gray-870\": \"rgba(92, 85, 77, 0.7)\",\n \"color-cambio-gray-900\": \"#312b23\",\n \"color-cambio-destructive-100\": \"#ffdeda\",\n \"color-cambio-destructive-300\": \"#ff8071\",\n \"color-cambio-destructive-370\": \"rgba(255, 128, 113, 0.7)\",\n \"color-cambio-destructive-700\": \"#c93f32\",\n \"color-cambio-destructive-770\": \"rgba(201, 63, 50, 0.7)\",\n \"color-cambio-destructive-900\": \"#6d0002\",\n \"color-cambio-success-100\": \"#daf2c8\",\n \"color-cambio-success-300\": \"#84ce64\",\n \"color-cambio-success-370\": \"rgba(132, 206, 100, 0.7)\",\n \"color-cambio-success-700\": \"#3c7f20\",\n \"color-cambio-success-770\": \"rgba(60, 127, 32, 0.7)\",\n \"color-cambio-success-900\": \"#103e00\",\n \"color-cambio-red\": \"#f56e56\",\n \"color-cambio-orange\": \"#ff8f57\",\n \"color-cambio-tan\": \"#ffb47d\",\n \"color-cambio-cream\": \"#fffad1\",\n \"color-cambio-purple\": \"#6840a8\",\n \"color-cambio-lilac\": \"#b59ef0\",\n \"color-cambio-thistle\": \"#d69ca4\",\n \"color-cambio-pink\": \"#ffccea\",\n \"color-cambio-navy\": \"#191142\",\n \"color-cambio-teal\": \"#44a6cf\",\n \"color-cambio-slate\": \"#7c9fc6\",\n \"color-cambio-sky\": \"#b1e8fc\",\n \"color-cambio-yellow-700\": \"#ffe733\",\n \"color-cambio-transparent-full\": \"rgba(0, 0, 0, 0)\",\n \"elevation-400\": \"0px 16px 32px 0px #00000040\",\n \"syntax-font-sans-serif\": \"-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif\"\n}\n"]}
|
|
@@ -1,137 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
var _XLUVINJWcjs = require('./XLUVINJW.cjs');
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
var _XU3CLITIcjs = require('./XU3CLITI.cjs');
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
var _QAS3KERZcjs = require('./QAS3KERZ.cjs');
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
var _JXOKXBDZcjs = require('./JXOKXBDZ.cjs');
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
var _NOELZTQXcjs = require('./NOELZTQX.cjs');
|
|
20
|
-
|
|
21
|
-
// src/Checkbox/Checkbox.tsx
|
|
22
|
-
var _react = require('react');
|
|
23
|
-
var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
|
|
24
|
-
|
|
25
|
-
// css-module:./Checkbox.module.css#css-module
|
|
26
|
-
var Checkbox_module_default = { "mainContainer": "_mainContainer_19quh_1", "inputOverlay": "_inputOverlay_19quh_9", "checkbox": "_checkbox_19quh_17", "cambioCheckbox": "_cambioCheckbox_19quh_25", "disabled": "_disabled_19quh_29", "cursorDisabled": "_cursorDisabled_19quh_33", "cursorEnabled": "_cursorEnabled_19quh_37", "uncheckedBox": "_uncheckedBox_19quh_41", "uncheckedBorder": "_uncheckedBorder_19quh_45", "uncheckedErrorBorder": "_uncheckedErrorBorder_19quh_49", "checkedBox": "_checkedBox_19quh_53", "checkedNonError": "_checkedNonError_19quh_57", "checkedError": "_checkedError_19quh_61", "sm": "_sm_19quh_65", "md": "_md_19quh_70", "smBorderRadius": "_smBorderRadius_19quh_75", "mdBorderRadius": "_mdBorderRadius_19quh_79", "checkmark": "_checkmark_19quh_83", "checkmarkError": "_checkmarkError_19quh_87" };
|
|
27
|
-
|
|
28
|
-
// src/Checkbox/Checkbox.tsx
|
|
29
|
-
var _jsxruntime = require('react/jsx-runtime');
|
|
30
|
-
var typographySize = {
|
|
31
|
-
sm: 100,
|
|
32
|
-
md: 200
|
|
33
|
-
};
|
|
34
|
-
var iconWidth = {
|
|
35
|
-
sm: 12,
|
|
36
|
-
md: 20
|
|
37
|
-
};
|
|
38
|
-
var Checkbox = ({
|
|
39
|
-
checked = false,
|
|
40
|
-
"data-testid": dataTestId,
|
|
41
|
-
disabled: disabledProp = false,
|
|
42
|
-
size = "md",
|
|
43
|
-
label,
|
|
44
|
-
error = false,
|
|
45
|
-
onChange
|
|
46
|
-
}) => {
|
|
47
|
-
const { themeName } = _JXOKXBDZcjs.useTheme.call(void 0, );
|
|
48
|
-
const isHydrated = _K4AUV2VKcjs.useIsHydrated.call(void 0, );
|
|
49
|
-
const disabled = !isHydrated || disabledProp;
|
|
50
|
-
const [isFocused, setIsFocused] = _react.useState.call(void 0, false);
|
|
51
|
-
const { isFocusVisible } = _NOELZTQXcjs.useFocusVisible.call(void 0, );
|
|
52
|
-
const checkboxStyling = _classnames2.default.call(void 0, Checkbox_module_default.checkbox, Checkbox_module_default[size], {
|
|
53
|
-
[_XLUVINJWcjs.Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible
|
|
54
|
-
});
|
|
55
|
-
const classicCheckboxStyling = _classnames2.default.call(void 0,
|
|
56
|
-
checkboxStyling,
|
|
57
|
-
Checkbox_module_default[`${size}BorderRadius`]
|
|
58
|
-
);
|
|
59
|
-
const cambioCheckboxStyling = _classnames2.default.call(void 0,
|
|
60
|
-
checkboxStyling,
|
|
61
|
-
Checkbox_module_default.cambioCheckbox,
|
|
62
|
-
error ? _QAS3KERZcjs.colors_module_default.cambioDestructive370BackgroundColor : _QAS3KERZcjs.colors_module_default.cambioGray370BackgroundColor
|
|
63
|
-
);
|
|
64
|
-
const uncheckedStyling = themeName === "classic" ? _classnames2.default.call(void 0, classicCheckboxStyling, Checkbox_module_default.uncheckedBox, {
|
|
65
|
-
[Checkbox_module_default.uncheckedBorder]: !error,
|
|
66
|
-
[Checkbox_module_default.uncheckedErrorBorder]: error
|
|
67
|
-
}) : cambioCheckboxStyling;
|
|
68
|
-
const checkedStyling = themeName === "classic" ? _classnames2.default.call(void 0, classicCheckboxStyling, Checkbox_module_default.checkedBox, {
|
|
69
|
-
[Checkbox_module_default.checkedNonError]: !error,
|
|
70
|
-
[Checkbox_module_default.checkedError]: error
|
|
71
|
-
}) : cambioCheckboxStyling;
|
|
72
|
-
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
|
|
73
|
-
"label",
|
|
74
|
-
{
|
|
75
|
-
className: _classnames2.default.call(void 0,
|
|
76
|
-
Checkbox_module_default.mainContainer,
|
|
77
|
-
Checkbox_module_default[`cursor${disabled ? "Disabled" : "Enabled"}`],
|
|
78
|
-
{
|
|
79
|
-
[Checkbox_module_default.disabled]: disabled
|
|
80
|
-
}
|
|
81
|
-
),
|
|
82
|
-
children: [
|
|
83
|
-
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: checked ? checkedStyling : uncheckedStyling, children: [
|
|
84
|
-
checked && themeName === "classic" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { "aria-hidden": "true", viewBox: "0 0 24 24", width: iconWidth[size], children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
85
|
-
"path",
|
|
86
|
-
{
|
|
87
|
-
fill: "#fff",
|
|
88
|
-
d: "m9 16.2-3.5-3.5a.9839.9839 0 0 0-1.4 0c-.39.39-.39 1.01 0 1.4l4.19 4.19c.39.39 1.02.39 1.41 0L20.3 7.7c.39-.39.39-1.01 0-1.4a.9839.9839 0 0 0-1.4 0L9 16.2z"
|
|
89
|
-
}
|
|
90
|
-
) }),
|
|
91
|
-
checked && themeName === "cambio" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { "aria-hidden": "true", viewBox: "0 0 24 24", width: iconWidth[size], children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
92
|
-
"path",
|
|
93
|
-
{
|
|
94
|
-
className: error ? Checkbox_module_default.checkmarkError : Checkbox_module_default.checkmark,
|
|
95
|
-
d: "m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4 9.55 18Z"
|
|
96
|
-
}
|
|
97
|
-
) })
|
|
98
|
-
] }),
|
|
99
|
-
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
100
|
-
"input",
|
|
101
|
-
{
|
|
102
|
-
"data-testid": dataTestId,
|
|
103
|
-
type: "checkbox",
|
|
104
|
-
className: _classnames2.default.call(void 0,
|
|
105
|
-
Checkbox_module_default.inputOverlay,
|
|
106
|
-
Checkbox_module_default[size],
|
|
107
|
-
Checkbox_module_default[`cursor${disabled ? "Disabled" : "Enabled"}`]
|
|
108
|
-
),
|
|
109
|
-
checked,
|
|
110
|
-
onChange,
|
|
111
|
-
disabled,
|
|
112
|
-
onFocus: () => {
|
|
113
|
-
setIsFocused(true);
|
|
114
|
-
},
|
|
115
|
-
onBlur: () => {
|
|
116
|
-
setIsFocused(false);
|
|
117
|
-
}
|
|
118
|
-
}
|
|
119
|
-
),
|
|
120
|
-
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
121
|
-
_XU3CLITIcjs.Typography_default,
|
|
122
|
-
{
|
|
123
|
-
size: typographySize[size],
|
|
124
|
-
color: error ? "destructive-primary" : "gray900",
|
|
125
|
-
children: label
|
|
126
|
-
}
|
|
127
|
-
)
|
|
128
|
-
]
|
|
129
|
-
}
|
|
130
|
-
);
|
|
131
|
-
};
|
|
132
|
-
var Checkbox_default = Checkbox;
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
exports.Checkbox_default = Checkbox_default;
|
|
137
|
-
//# sourceMappingURL=KYIRM6PZ.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Checkbox/Checkbox.tsx","css-module:./Checkbox.module.css#css-module"],"names":[],"mappings":"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","sourcesContent":["import React, { type ReactElement, useState } from \"react\";\nimport classNames from \"classnames\";\nimport useFocusVisible from \"../useFocusVisible\";\nimport styles from \"./Checkbox.module.css\";\nimport focusStyles from \"../Focus.module.css\";\nimport Typography from \"../Typography/Typography\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\nimport colorStyles from \"../colors/colors.module.css\";\n\nconst typographySize = {\n sm: 100,\n md: 200,\n} as const;\n\nconst iconWidth = {\n sm: 12,\n md: 20,\n};\n\n/**\n * [Checkbox](https://cambly-syntax.vercel.app/?path=/docs/components-checkbox--docs) is a clickable element that will show if an option has been selected or not.\n */\nconst Checkbox = ({\n checked = false,\n \"data-testid\": dataTestId,\n disabled: disabledProp = false,\n size = \"md\",\n label,\n error = false,\n onChange,\n}: {\n /**\n * Whether or not the box has been clicked\n *\n * @defaultValue false\n */\n checked: boolean;\n /**\n * Test id for the checkbox\n */\n \"data-testid\"?: string;\n /**\n * The callback to be called when the checkbox value changes\n */\n onChange: React.ChangeEventHandler<HTMLInputElement>;\n /**\n * Whether or not the box is disabled\n *\n * @defaultValue false\n */\n disabled?: boolean;\n /**\n * The size of the checkbox and icon\n *\n * * `sm`: 16px\n * * `md`: 24px\n *\n * @defaultValue \"md\"\n */\n size?: \"sm\" | \"md\";\n /**\n * The text accompanying the checkbox\n */\n label: string;\n /**\n * Whether or not there is an error with the input\n *\n * @defaultValue false\n */\n error?: boolean;\n}): ReactElement => {\n const { themeName } = useTheme();\n const isHydrated = useIsHydrated();\n const disabled = !isHydrated || disabledProp;\n const [isFocused, setIsFocused] = useState(false);\n const { isFocusVisible } = useFocusVisible();\n\n const checkboxStyling = classNames(styles.checkbox, styles[size], {\n [focusStyles.accessibilityOutlineFocus]: isFocused && isFocusVisible,\n });\n\n const classicCheckboxStyling = classNames(\n checkboxStyling,\n styles[`${size}BorderRadius`],\n );\n\n const cambioCheckboxStyling = classNames(\n checkboxStyling,\n styles.cambioCheckbox,\n error\n ? colorStyles.cambioDestructive370BackgroundColor\n : colorStyles.cambioGray370BackgroundColor,\n );\n\n const uncheckedStyling =\n themeName === \"classic\"\n ? classNames(classicCheckboxStyling, styles.uncheckedBox, {\n [styles.uncheckedBorder]: !error,\n [styles.uncheckedErrorBorder]: error,\n })\n : cambioCheckboxStyling;\n const checkedStyling =\n themeName === \"classic\"\n ? classNames(classicCheckboxStyling, styles.checkedBox, {\n [styles.checkedNonError]: !error,\n [styles.checkedError]: error,\n })\n : cambioCheckboxStyling;\n\n return (\n <label\n className={classNames(\n styles.mainContainer,\n styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n {\n [styles.disabled]: disabled,\n },\n )}\n >\n <div className={checked ? checkedStyling : uncheckedStyling}>\n {checked && themeName === \"classic\" && (\n <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" width={iconWidth[size]}>\n <path\n fill=\"#fff\"\n d=\"m9 16.2-3.5-3.5a.9839.9839 0 0 0-1.4 0c-.39.39-.39 1.01 0 1.4l4.19 4.19c.39.39 1.02.39 1.41 0L20.3 7.7c.39-.39.39-1.01 0-1.4a.9839.9839 0 0 0-1.4 0L9 16.2z\"\n ></path>\n </svg>\n )}\n {checked && themeName === \"cambio\" && (\n <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" width={iconWidth[size]}>\n <path\n className={error ? styles.checkmarkError : styles.checkmark}\n d=\"m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4 9.55 18Z\"\n ></path>\n </svg>\n )}\n </div>\n <input\n data-testid={dataTestId}\n type=\"checkbox\"\n className={classNames(\n styles.inputOverlay,\n styles[size],\n styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n )}\n checked={checked}\n onChange={onChange}\n disabled={disabled}\n onFocus={() => {\n setIsFocused(true);\n }}\n onBlur={() => {\n setIsFocused(false);\n }}\n />\n <Typography\n size={typographySize[size]}\n color={error ? \"destructive-primary\" : \"gray900\"}\n >\n {label}\n </Typography>\n </label>\n );\n};\n\nexport default Checkbox;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Checkbox/Checkbox.module.css\"; export default {\"mainContainer\":\"_mainContainer_19quh_1\",\"inputOverlay\":\"_inputOverlay_19quh_9\",\"checkbox\":\"_checkbox_19quh_17\",\"cambioCheckbox\":\"_cambioCheckbox_19quh_25\",\"disabled\":\"_disabled_19quh_29\",\"cursorDisabled\":\"_cursorDisabled_19quh_33\",\"cursorEnabled\":\"_cursorEnabled_19quh_37\",\"uncheckedBox\":\"_uncheckedBox_19quh_41\",\"uncheckedBorder\":\"_uncheckedBorder_19quh_45\",\"uncheckedErrorBorder\":\"_uncheckedErrorBorder_19quh_49\",\"checkedBox\":\"_checkedBox_19quh_53\",\"checkedNonError\":\"_checkedNonError_19quh_57\",\"checkedError\":\"_checkedError_19quh_61\",\"sm\":\"_sm_19quh_65\",\"md\":\"_md_19quh_70\",\"smBorderRadius\":\"_smBorderRadius_19quh_75\",\"mdBorderRadius\":\"_mdBorderRadius_19quh_79\",\"checkmark\":\"_checkmark_19quh_83\",\"checkmarkError\":\"_checkmarkError_19quh_87\"}"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/RadioButton/RadioButton.tsx","css-module:./RadioButton.module.css#css-module"],"sourcesContent":["import React, { type ReactElement, useState } from \"react\";\nimport classnames from \"classnames\";\n\nimport styles from \"./RadioButton.module.css\";\nimport focusStyles from \"../Focus.module.css\";\nimport Typography from \"../Typography/Typography\";\nimport useFocusVisible from \"../useFocusVisible\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\nimport colorStyles from \"../colors/colors.module.css\";\nimport Box from \"../Box/Box\";\n\n/**\n * [RadioButton](https://cambly-syntax.vercel.app/?path=/docs/components-radiobutton--docs) is a radio button with accompanying text\n */\nconst RadioButton = ({\n checked = false,\n \"data-testid\": dataTestId,\n dangerouslyForceFocusStyles = false,\n disabled: disabledProp = false,\n error = false,\n id,\n label,\n name,\n onChange,\n size = \"md\",\n value,\n}: {\n /**\n * Whether or not the radio button is checked\n *\n * @defaultValue false\n */\n checked?: boolean;\n /**\n * Test id for the radio button\n */\n \"data-testid\"?: string;\n /**\n * Whether or not the radio button is disabled\n *\n * @defaultValue false\n */\n disabled?: boolean;\n /**\n * Whether to show error color schema\n *\n * @defaultValue false\n */\n error?: boolean;\n /**\n * Id for the the radio button\n */\n id?: string;\n /**\n * Value to show end user\n */\n label: string;\n /**\n * The name of the grouping the radio buttons are in\n */\n name: string;\n /**\n * The callback to be called when the radio button is clicked\n */\n onChange: React.ChangeEventHandler<HTMLInputElement>;\n /**\n * Size of the components\n *\n * * `sm`: 16px\n * * `md`: 24px\n *\n * @defaultValue \"md\"\n */\n size?: \"sm\" | \"md\";\n /**\n * Value of the selected radio option\n */\n value: string | number;\n /** forces focus ring styling */\n dangerouslyForceFocusStyles?: boolean;\n}): ReactElement => {\n const { themeName } = useTheme();\n const isHydrated = useIsHydrated();\n const disabled = !isHydrated || disabledProp;\n const [isFocused, setIsFocused] = useState(false);\n const { isFocusVisible } = useFocusVisible();\n\n const classicStyles = classnames(styles.background, styles[size], {\n [styles.errorBorderColor]: error,\n [styles.borderColor]: !error,\n [focusStyles.accessibilityOutlineFocus]:\n (isFocused && isFocusVisible) || dangerouslyForceFocusStyles,\n [styles.mdCheckedBorder]: checked && size === \"md\",\n [styles.smCheckedBorder]: checked && size === \"sm\",\n [styles.neutralBorder]: !checked && size === \"md\",\n });\n\n const cambioStyles = classnames(\n styles.background,\n error\n ? colorStyles.cambioDestructive370BackgroundColor\n : colorStyles.cambioGray370BackgroundColor,\n styles[size],\n {\n [focusStyles.accessibilityOutlineFocus]:\n (isFocused && isFocusVisible) || dangerouslyForceFocusStyles,\n },\n );\n\n return (\n <label\n className={classnames(\n styles.radioBaseContainer,\n styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n {\n [styles.disabled]: disabled,\n [styles.smBase]: size === \"sm\",\n [styles.mdBase]: size === \"md\",\n },\n )}\n >\n <div className={themeName === \"classic\" ? classicStyles : cambioStyles} />\n {themeName === \"cambio\" && checked && (\n <Box\n backgroundColor={error ? \"destructive900\" : \"gray900\"}\n width={size === \"md\" ? 12 : 8}\n height={size === \"md\" ? 12 : 8}\n position=\"absolute\"\n rounding=\"full\"\n dangerouslySetInlineStyle={{\n __style: {\n left: size === \"md\" ? 6 : 4,\n },\n }}\n />\n )}\n <input\n data-testid={dataTestId}\n type=\"radio\"\n id={id}\n name={name}\n className={classnames(\n styles.radioStyleOverride,\n styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n {\n [styles.smOverride]: size === \"sm\",\n [styles.mdOverride]: size === \"md\",\n },\n )}\n checked={checked}\n onChange={onChange}\n disabled={disabled}\n value={value}\n onFocus={() => {\n setIsFocused(true);\n }}\n onBlur={() => {\n setIsFocused(false);\n }}\n />\n {label && (\n <Typography\n size={size === \"md\" ? 200 : 100}\n color={error ? \"destructive-primary\" : \"gray900\"}\n >\n {label}\n </Typography>\n )}\n </label>\n );\n};\n\nexport default RadioButton;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/RadioButton/RadioButton.module.css\"; export default {\"radioBaseContainer\":\"_radioBaseContainer_6h2zg_1\",\"disabled\":\"_disabled_6h2zg_9\",\"cursorDisabled\":\"_cursorDisabled_6h2zg_13\",\"cursorEnabled\":\"_cursorEnabled_6h2zg_17\",\"smBase\":\"_smBase_6h2zg_21\",\"mdBase\":\"_mdBase_6h2zg_25\",\"radioStyleOverride\":\"_radioStyleOverride_6h2zg_29\",\"smOverride\":\"_smOverride_6h2zg_34\",\"mdOverride\":\"_mdOverride_6h2zg_39\",\"background\":\"_background_6h2zg_44\",\"sm\":\"_sm_6h2zg_21\",\"md\":\"_md_6h2zg_25\",\"neutralBorder\":\"_neutralBorder_6h2zg_61\",\"smCheckedBorder\":\"_smCheckedBorder_6h2zg_65\",\"mdCheckedBorder\":\"_mdCheckedBorder_6h2zg_69\",\"errorBorderColor\":\"_errorBorderColor_6h2zg_73\",\"borderColor\":\"_borderColor_6h2zg_77\"}"],"mappings":"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","names":[]}
|
|
@@ -1,115 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
var _GANR5JVVcjs = require('./GANR5JVV.cjs');
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
var _XU3CLITIcjs = require('./XU3CLITI.cjs');
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
var _JXOKXBDZcjs = require('./JXOKXBDZ.cjs');
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
|
|
14
|
-
|
|
15
|
-
// src/Chip/Chip.tsx
|
|
16
|
-
var _react = require('react');
|
|
17
|
-
var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
|
|
18
|
-
|
|
19
|
-
// css-module:./Chip.module.css#css-module
|
|
20
|
-
var Chip_module_default = { "chip": "_chip_1ndh3_1", "chipClassic": "_chipClassic_1ndh3_10", "chipCambio": "_chipCambio_1ndh3_15", "disabled": "_disabled_1ndh3_20", "deselectedChip": "_deselectedChip_1ndh3_25", "selectedChip": "_selectedChip_1ndh3_29", "deselectedChipCambio": "_deselectedChipCambio_1ndh3_34", "deselectedChipCambioOnDarkBackground": "_deselectedChipCambioOnDarkBackground_1ndh3_38", "selectedChipCambio": "_selectedChipCambio_1ndh3_42", "selectedChipCambioOnDarkBackground": "_selectedChipCambioOnDarkBackground_1ndh3_46", "icon": "_icon_1ndh3_50", "selectedIcon": "_selectedIcon_1ndh3_58", "sm": "_sm_1ndh3_62", "lg": "_lg_1ndh3_68", "forceFocus": "_forceFocus_1ndh3_75" };
|
|
21
|
-
|
|
22
|
-
// src/Chip/Chip.tsx
|
|
23
|
-
var _jsxruntime = require('react/jsx-runtime');
|
|
24
|
-
function typographyColor({
|
|
25
|
-
themeName,
|
|
26
|
-
selected,
|
|
27
|
-
on
|
|
28
|
-
}) {
|
|
29
|
-
if (themeName === "cambio" && on === "darkBackground") {
|
|
30
|
-
if (selected) {
|
|
31
|
-
return "gray900";
|
|
32
|
-
} else {
|
|
33
|
-
return "white";
|
|
34
|
-
}
|
|
35
|
-
} else {
|
|
36
|
-
if (selected) {
|
|
37
|
-
return "white";
|
|
38
|
-
} else {
|
|
39
|
-
return "gray900";
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
var Chip = _react.forwardRef.call(void 0,
|
|
44
|
-
({
|
|
45
|
-
disabled: disabledProp = false,
|
|
46
|
-
selected = false,
|
|
47
|
-
"data-testid": dataTestId,
|
|
48
|
-
size = "sm",
|
|
49
|
-
text,
|
|
50
|
-
on = "lightBackground",
|
|
51
|
-
onChange,
|
|
52
|
-
icon: Icon,
|
|
53
|
-
dangerouslyForceFocusStyles
|
|
54
|
-
}, ref) => {
|
|
55
|
-
const { themeName } = _JXOKXBDZcjs.useTheme.call(void 0, );
|
|
56
|
-
const transformedSize = themeName === "cambio" ? "sm" : size;
|
|
57
|
-
const isHydrated = _K4AUV2VKcjs.useIsHydrated.call(void 0, );
|
|
58
|
-
const disabled = !isHydrated || disabledProp;
|
|
59
|
-
const selectedChipCambioStyle = on === "lightBackground" ? Chip_module_default.selectedChipCambio : Chip_module_default.selectedChipCambioOnDarkBackground;
|
|
60
|
-
const deselectedChipCambioStyle = on === "lightBackground" ? Chip_module_default.deselectedChipCambio : Chip_module_default.deselectedChipCambioOnDarkBackground;
|
|
61
|
-
const chipStyles = _classnames2.default.call(void 0,
|
|
62
|
-
Chip_module_default.chip,
|
|
63
|
-
themeName === "classic" ? Chip_module_default.chipClassic : Chip_module_default.chipCambio,
|
|
64
|
-
Chip_module_default[transformedSize],
|
|
65
|
-
{
|
|
66
|
-
[themeName === "classic" ? Chip_module_default.selectedChip : selectedChipCambioStyle]: selected,
|
|
67
|
-
[themeName === "classic" ? Chip_module_default.deselectedChip : deselectedChipCambioStyle]: !selected,
|
|
68
|
-
[Chip_module_default.disabled]: disabled,
|
|
69
|
-
[Chip_module_default.forceFocus]: dangerouslyForceFocusStyles
|
|
70
|
-
}
|
|
71
|
-
);
|
|
72
|
-
const iconStyles = _classnames2.default.call(void 0, Chip_module_default.icon, {
|
|
73
|
-
[Chip_module_default.selectedIcon]: selected
|
|
74
|
-
});
|
|
75
|
-
const typographySize = {
|
|
76
|
-
["sm"]: 200,
|
|
77
|
-
["lg"]: 300
|
|
78
|
-
};
|
|
79
|
-
const color = _react.useMemo.call(void 0,
|
|
80
|
-
() => typographyColor({ themeName, selected, on }),
|
|
81
|
-
[themeName, selected, on]
|
|
82
|
-
);
|
|
83
|
-
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
|
|
84
|
-
"button",
|
|
85
|
-
{
|
|
86
|
-
className: chipStyles,
|
|
87
|
-
disabled,
|
|
88
|
-
"data-testid": dataTestId,
|
|
89
|
-
ref,
|
|
90
|
-
type: "button",
|
|
91
|
-
"aria-pressed": selected,
|
|
92
|
-
onClick: onChange,
|
|
93
|
-
children: [
|
|
94
|
-
Icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Icon, { className: iconStyles }),
|
|
95
|
-
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _GANR5JVVcjs.Box_default, { paddingX: Icon ? 1 : 0, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
96
|
-
_XU3CLITIcjs.Typography_default,
|
|
97
|
-
{
|
|
98
|
-
size: themeName === "classic" ? typographySize[transformedSize] : 100,
|
|
99
|
-
color,
|
|
100
|
-
weight: themeName === "classic" ? "regular" : "medium",
|
|
101
|
-
children: text
|
|
102
|
-
}
|
|
103
|
-
) })
|
|
104
|
-
]
|
|
105
|
-
}
|
|
106
|
-
);
|
|
107
|
-
}
|
|
108
|
-
);
|
|
109
|
-
Chip.displayName = "Chip";
|
|
110
|
-
var Chip_default = Chip;
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
exports.Chip_default = Chip_default;
|
|
115
|
-
//# sourceMappingURL=NCUQOLOV.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Chip/Chip.tsx","css-module:./Chip.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,SAAgB,YAAY,eAAe;AAC3C,OAAO,gBAAgB;;;ACDiE,IAAO,sBAAQ,EAAC,QAAO,iBAAgB,eAAc,yBAAwB,cAAa,wBAAuB,YAAW,sBAAqB,kBAAiB,4BAA2B,gBAAe,0BAAyB,wBAAuB,kCAAiC,wCAAuC,kDAAiD,sBAAqB,gCAA+B,sCAAqC,gDAA+C,QAAO,kBAAiB,gBAAe,0BAAyB,MAAK,gBAAe,MAAK,gBAAe,cAAa,uBAAsB;;;ADiJ1tB,SASW,KATX;AAzIN,SAAS,gBAAgB;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AACF,GAIwB;AACtB,MAAI,cAAc,YAAY,OAAO,kBAAkB;AACrD,QAAI,UAAU;AACZ,aAAO;AAAA,IACT,OAAO;AACL,aAAO;AAAA,IACT;AAAA,EACF,OAAO;AACL,QAAI,UAAU;AACZ,aAAO;AAAA,IACT,OAAO;AACL,aAAO;AAAA,IACT;AAAA,EACF;AACF;AAwDA,IAAM,OAAO;AAAA,EACX,CACE;AAAA,IACE,UAAU,eAAe;AAAA,IACzB,WAAW;AAAA,IACX,eAAe;AAAA,IACf,OAAO;AAAA,IACP;AAAA,IACA,KAAK;AAAA,IACL;AAAA,IACA,MAAM;AAAA,IACN;AAAA,EACF,GACA,QACG;AACH,UAAM,EAAE,UAAU,IAAI,SAAS;AAC/B,UAAM,kBAAkB,cAAc,WAAW,OAAO;AACxD,UAAM,aAAa,cAAc;AACjC,UAAM,WAAW,CAAC,cAAc;AAEhC,UAAM,0BACJ,OAAO,oBACH,oBAAO,qBACP,oBAAO;AAEb,UAAM,4BACJ,OAAO,oBACH,oBAAO,uBACP,oBAAO;AAEb,UAAM,aAAa;AAAA,MACjB,oBAAO;AAAA,MACP,cAAc,YAAY,oBAAO,cAAc,oBAAO;AAAA,MACtD,oBAAO,eAAe;AAAA,MACtB;AAAA,QACE,CAAC,cAAc,YACX,oBAAO,eACP,uBAAuB,GAAG;AAAA,QAC9B,CAAC,cAAc,YACX,oBAAO,iBACP,yBAAyB,GAAG,CAAC;AAAA,QACjC,CAAC,oBAAO,QAAQ,GAAG;AAAA,QACnB,CAAC,oBAAO,UAAU,GAAG;AAAA,MACvB;AAAA,IACF;AACA,UAAM,aAAa,WAAW,oBAAO,MAAM;AAAA,MACzC,CAAC,oBAAO,YAAY,GAAG;AAAA,IACzB,CAAC;AACD,UAAM,iBAAiB;AAAA,MACrB,CAAC,IAAI,GAAG;AAAA,MACR,CAAC,IAAI,GAAG;AAAA,IACV;AAEA,UAAM,QAAQ;AAAA,MACZ,MAAM,gBAAgB,EAAE,WAAW,UAAU,GAAG,CAAC;AAAA,MACjD,CAAC,WAAW,UAAU,EAAE;AAAA,IAC1B;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,QACX;AAAA,QACA,eAAa;AAAA,QACb;AAAA,QACA,MAAK;AAAA,QACL,gBAAc;AAAA,QACd,SAAS;AAAA,QAER;AAAA,kBAAQ,oBAAC,QAAK,WAAW,YAAY;AAAA,UACtC,oBAAC,eAAI,UAAU,OAAO,IAAI,GACxB;AAAA,YAAC;AAAA;AAAA,cACC,MACE,cAAc,YAAY,eAAe,eAAe,IAAI;AAAA,cAE9D;AAAA,cACA,QAAQ,cAAc,YAAY,YAAY;AAAA,cAE7C;AAAA;AAAA,UACH,GACF;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,KAAK,cAAc;AAEnB,IAAO,eAAQ","sourcesContent":["import React, { forwardRef, useMemo } from \"react\";\nimport classnames from \"classnames\";\nimport Typography from \"../Typography/Typography\";\nimport Box from \"../Box/Box\";\nimport styles from \"./Chip.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\n\nfunction typographyColor({\n themeName,\n selected,\n on,\n}: {\n themeName: \"cambio\" | \"classic\";\n selected: boolean;\n on: \"lightBackground\" | \"darkBackground\";\n}): \"white\" | \"gray900\" {\n if (themeName === \"cambio\" && on === \"darkBackground\") {\n if (selected) {\n return \"gray900\";\n } else {\n return \"white\";\n }\n } else {\n if (selected) {\n return \"white\";\n } else {\n return \"gray900\";\n }\n }\n}\n\ntype ChipProps = {\n /**\n * If true, the chip will be disabled.\n */\n disabled?: boolean;\n /**\n * Sets the initial status of this chip component.\n * * `true` will display a grey chip.\n * * `false` will display a premium800 color chip.\n *\n * @defaultValue \"false\"\n */\n selected?: boolean;\n /**\n * Test id for the button\n */\n \"data-testid\"?: string;\n /**\n * Size of the chip.\n *\n * Classic:\n * * `sm`: 32px\n * * `lg`: 48px\n *\n * Cambio:\n * * `sm`: 32px\n *\n * @defaultValue sm\n */\n size?: \"sm\" | \"lg\";\n /**\n * The text to be displayed on the chip\n */\n text: string;\n /**\n * Indicate whether the badge renders on a light or dark background. Changes the color of the chip (Cambio only)\n *\n * @defaulValue `lightBackground`\n */\n on?: \"lightBackground\" | \"darkBackground\";\n /**\n * The callback to be called when the chip is clicked\n */\n onChange: React.MouseEventHandler<HTMLButtonElement>;\n /**\n * The icon to be displayed.\n */\n icon?: React.ComponentType<{ className?: string }>;\n /** forces focus ring styling */\n dangerouslyForceFocusStyles?: boolean;\n};\n/**\n * [Chip](https://cambly-syntax.vercel.app/?path=/docs/components-chip--docs) is used to show status (selected/not selected) like a toggle button.\n */\nconst Chip = forwardRef<HTMLButtonElement, ChipProps>(\n (\n {\n disabled: disabledProp = false,\n selected = false,\n \"data-testid\": dataTestId,\n size = \"sm\",\n text,\n on = \"lightBackground\",\n onChange,\n icon: Icon,\n dangerouslyForceFocusStyles,\n }: ChipProps,\n ref,\n ) => {\n const { themeName } = useTheme();\n const transformedSize = themeName === \"cambio\" ? \"sm\" : size;\n const isHydrated = useIsHydrated();\n const disabled = !isHydrated || disabledProp;\n\n const selectedChipCambioStyle =\n on === \"lightBackground\"\n ? styles.selectedChipCambio\n : styles.selectedChipCambioOnDarkBackground;\n\n const deselectedChipCambioStyle =\n on === \"lightBackground\"\n ? styles.deselectedChipCambio\n : styles.deselectedChipCambioOnDarkBackground;\n\n const chipStyles = classnames(\n styles.chip,\n themeName === \"classic\" ? styles.chipClassic : styles.chipCambio,\n styles[transformedSize],\n {\n [themeName === \"classic\"\n ? styles.selectedChip\n : selectedChipCambioStyle]: selected,\n [themeName === \"classic\"\n ? styles.deselectedChip\n : deselectedChipCambioStyle]: !selected,\n [styles.disabled]: disabled,\n [styles.forceFocus]: dangerouslyForceFocusStyles,\n },\n );\n const iconStyles = classnames(styles.icon, {\n [styles.selectedIcon]: selected,\n });\n const typographySize = {\n [\"sm\"]: 200,\n [\"lg\"]: 300,\n } as const;\n\n const color = useMemo(\n () => typographyColor({ themeName, selected, on }),\n [themeName, selected, on],\n );\n\n return (\n <button\n className={chipStyles}\n disabled={disabled}\n data-testid={dataTestId}\n ref={ref}\n type=\"button\"\n aria-pressed={selected}\n onClick={onChange}\n >\n {Icon && <Icon className={iconStyles} />}\n <Box paddingX={Icon ? 1 : 0}>\n <Typography\n size={\n themeName === \"classic\" ? typographySize[transformedSize] : 100\n }\n color={color}\n weight={themeName === \"classic\" ? \"regular\" : \"medium\"}\n >\n {text}\n </Typography>\n </Box>\n </button>\n );\n },\n);\n\nChip.displayName = \"Chip\";\n\nexport default Chip;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Chip/Chip.module.css\"; export default {\"chip\":\"_chip_1ndh3_1\",\"chipClassic\":\"_chipClassic_1ndh3_10\",\"chipCambio\":\"_chipCambio_1ndh3_15\",\"disabled\":\"_disabled_1ndh3_20\",\"deselectedChip\":\"_deselectedChip_1ndh3_25\",\"selectedChip\":\"_selectedChip_1ndh3_29\",\"deselectedChipCambio\":\"_deselectedChipCambio_1ndh3_34\",\"deselectedChipCambioOnDarkBackground\":\"_deselectedChipCambioOnDarkBackground_1ndh3_38\",\"selectedChipCambio\":\"_selectedChipCambio_1ndh3_42\",\"selectedChipCambioOnDarkBackground\":\"_selectedChipCambioOnDarkBackground_1ndh3_46\",\"icon\":\"_icon_1ndh3_50\",\"selectedIcon\":\"_selectedIcon_1ndh3_58\",\"sm\":\"_sm_1ndh3_62\",\"lg\":\"_lg_1ndh3_68\",\"forceFocus\":\"_forceFocus_1ndh3_75\"}"]}
|