@hopper-ui/components 1.6.1 → 1.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (396) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/accordion/src/Accordion.css +84 -77
  3. package/dist/accordion/src/Accordion.js +2 -2
  4. package/dist/accordion/src/index.css +84 -77
  5. package/dist/accordion/src/index.js +2 -2
  6. package/dist/alert/src/Alert.css +617 -325
  7. package/dist/alert/src/Alert.js +13 -12
  8. package/dist/alert/src/index.css +617 -325
  9. package/dist/alert/src/index.js +13 -12
  10. package/dist/avatar/src/AnonymousAvatar.css +54 -47
  11. package/dist/avatar/src/AnonymousAvatar.js +2 -2
  12. package/dist/avatar/src/Avatar.css +72 -65
  13. package/dist/avatar/src/Avatar.js +5 -5
  14. package/dist/avatar/src/AvatarGroup.css +71 -64
  15. package/dist/avatar/src/AvatarGroup.js +8 -8
  16. package/dist/avatar/src/BrokenAvatar.css +54 -47
  17. package/dist/avatar/src/BrokenAvatar.js +2 -2
  18. package/dist/avatar/src/DeletedAvatar.css +54 -47
  19. package/dist/avatar/src/DeletedAvatar.js +2 -2
  20. package/dist/avatar/src/RichIconAvatarImage.css +54 -47
  21. package/dist/avatar/src/RichIconAvatarImage.js +1 -1
  22. package/dist/avatar/src/index.css +99 -92
  23. package/dist/avatar/src/index.js +13 -13
  24. package/dist/badge/src/Badge.css +59 -52
  25. package/dist/badge/src/Badge.js +3 -3
  26. package/dist/badge/src/FloatingBadge.css +54 -47
  27. package/dist/badge/src/FloatingBadge.js +2 -2
  28. package/dist/badge/src/index.css +69 -62
  29. package/dist/badge/src/index.js +4 -4
  30. package/dist/buttons/src/Button.css +110 -103
  31. package/dist/buttons/src/Button.js +9 -8
  32. package/dist/buttons/src/ButtonContext.d.ts +13 -3
  33. package/dist/buttons/src/ButtonGroup.css +55 -48
  34. package/dist/buttons/src/ButtonGroup.js +3 -1
  35. package/dist/buttons/src/ButtonGroupContext.d.ts +13 -3
  36. package/dist/buttons/src/ClearButton.css +115 -108
  37. package/dist/buttons/src/ClearButton.js +3 -3
  38. package/dist/buttons/src/CloseButton.css +111 -104
  39. package/dist/buttons/src/CloseButton.js +10 -9
  40. package/dist/buttons/src/EmbeddedButton.css +115 -108
  41. package/dist/buttons/src/EmbeddedButton.js +1 -1
  42. package/dist/buttons/src/LinkButton.css +119 -112
  43. package/dist/buttons/src/LinkButton.js +6 -6
  44. package/dist/buttons/src/ToggleButton.css +630 -0
  45. package/dist/buttons/src/ToggleButton.d.ts +51 -0
  46. package/dist/buttons/src/ToggleButton.js +17 -0
  47. package/dist/buttons/src/ToggleButtonContext.d.ts +22 -0
  48. package/dist/buttons/src/ToggleButtonContext.js +2 -0
  49. package/dist/buttons/src/index.css +540 -260
  50. package/dist/buttons/src/index.d.ts +4 -2
  51. package/dist/buttons/src/index.js +16 -13
  52. package/dist/callout/src/Callout.css +552 -272
  53. package/dist/callout/src/Callout.js +11 -10
  54. package/dist/callout/src/CompactCallout.css +589 -309
  55. package/dist/callout/src/CompactCallout.js +11 -10
  56. package/dist/callout/src/index.css +601 -321
  57. package/dist/callout/src/index.js +13 -12
  58. package/dist/card/src/Card.css +47 -40
  59. package/dist/card/src/Card.js +1 -1
  60. package/dist/card/src/index.css +47 -40
  61. package/dist/card/src/index.js +1 -1
  62. package/dist/checkbox/src/Checkbox.css +63 -56
  63. package/dist/checkbox/src/Checkbox.js +6 -6
  64. package/dist/checkbox/src/CheckboxField.css +50 -43
  65. package/dist/checkbox/src/CheckboxField.js +4 -4
  66. package/dist/checkbox/src/CheckboxGroup.css +115 -108
  67. package/dist/checkbox/src/CheckboxGroup.js +10 -9
  68. package/dist/checkbox/src/DecorativeCheckbox.css +71 -64
  69. package/dist/checkbox/src/DecorativeCheckbox.js +4 -4
  70. package/dist/checkbox/src/index.css +115 -108
  71. package/dist/checkbox/src/index.js +15 -14
  72. package/dist/{chunk-SGQFSCGP.js → chunk-2AD6XN2R.js} +3 -3
  73. package/dist/chunk-3ETJUGAP.js +178 -0
  74. package/dist/{chunk-6EXB57VD.js → chunk-3OGBUJLO.js} +4 -4
  75. package/dist/chunk-3YYC7XZW.js +190 -0
  76. package/dist/{chunk-CFBDROF2.js → chunk-57WEWZ4L.js} +2 -2
  77. package/dist/{chunk-B3VVOS3E.js → chunk-5F2LUFRN.js} +3 -3
  78. package/dist/{chunk-ZJKGATZR.js → chunk-5I6PDORP.js} +8 -2
  79. package/dist/{chunk-V6QSG3P7.js → chunk-5MNBACCS.js} +1 -1
  80. package/dist/{chunk-N63SCDXK.js → chunk-72UDPGXN.js} +2 -2
  81. package/dist/{chunk-TVDSIL3G.js → chunk-76JOA74P.js} +15 -6
  82. package/dist/{chunk-3WNM2QCE.js → chunk-7K3TKE2R.js} +2 -2
  83. package/dist/{chunk-Z6Z2LMH2.js → chunk-7KXUKO5L.js} +1 -1
  84. package/dist/{chunk-5H7VC5CQ.js → chunk-7WJAJGOX.js} +3 -3
  85. package/dist/{chunk-IEGPCDG2.js → chunk-A5MNOCQ2.js} +1 -1
  86. package/dist/{chunk-Q5UDUQNS.js → chunk-BD2ZOQJW.js} +4 -28
  87. package/dist/chunk-BYERWFG4.js +7 -0
  88. package/dist/{chunk-54G54DA4.js → chunk-D3QAZ56J.js} +4 -4
  89. package/dist/{chunk-FVYE4WG4.js → chunk-D7ICCQM5.js} +2 -2
  90. package/dist/{chunk-NNBUHQU4.js → chunk-DB4Y2SXS.js} +17 -15
  91. package/dist/{chunk-RNYGUJIL.js → chunk-DGU5YZM5.js} +8 -8
  92. package/dist/{chunk-H7EN3SVB.js → chunk-DOP43XH5.js} +2 -2
  93. package/dist/{chunk-2PIBQPSE.js → chunk-DSK6IH5M.js} +4 -4
  94. package/dist/chunk-E5RHW4IY.js +70 -0
  95. package/dist/chunk-ESCEY6RN.js +137 -0
  96. package/dist/{chunk-FMAMU4X6.js → chunk-ETBPFG5Z.js} +8 -4
  97. package/dist/{chunk-DROINCCH.js → chunk-EWP3IGMD.js} +1 -1
  98. package/dist/{chunk-HVTA4MEG.js → chunk-F6VSINXC.js} +1 -1
  99. package/dist/{chunk-MC6PDZR7.js → chunk-FJUFE7XU.js} +10 -8
  100. package/dist/{chunk-KB2NZRJF.js → chunk-FORSJNLX.js} +20 -10
  101. package/dist/{chunk-HPOWDWRH.js → chunk-FPHBQO6G.js} +1 -1
  102. package/dist/{chunk-PDVJDA3N.js → chunk-FSS4CZQI.js} +25 -13
  103. package/dist/{chunk-S37LFZ2Z.js → chunk-FXNQDM7U.js} +1 -1
  104. package/dist/{chunk-6C22LT4E.js → chunk-G5AQXKGI.js} +2 -2
  105. package/dist/{chunk-PZZ76MYC.js → chunk-GDODCIB6.js} +3 -3
  106. package/dist/{chunk-6BW3MSBX.js → chunk-GHMBKUTU.js} +1 -1
  107. package/dist/{chunk-4DNIPOHN.js → chunk-GVGOWUJG.js} +2 -2
  108. package/dist/{chunk-VE63YOPC.js → chunk-HF5YS5Z6.js} +6 -6
  109. package/dist/{chunk-GN2XLV5G.js → chunk-HL2I2YUG.js} +3 -3
  110. package/dist/chunk-HZTYQ5FQ.js +22 -0
  111. package/dist/{chunk-ZICTGDRV.js → chunk-I377K7IX.js} +2 -2
  112. package/dist/{chunk-RKYCEGIB.js → chunk-JASPC6XG.js} +5 -5
  113. package/dist/{chunk-ZAORXIJR.js → chunk-JHAHLWQJ.js} +2 -2
  114. package/dist/{chunk-23MPRPHQ.js → chunk-JNV6W5JC.js} +18 -16
  115. package/dist/{chunk-TY3S7XMW.js → chunk-JQLKVLV7.js} +2 -2
  116. package/dist/{chunk-4V3BBI6M.js → chunk-K3GNQGLK.js} +1 -1
  117. package/dist/{chunk-UZTC5A7X.js → chunk-KD5CC7J2.js} +1 -1
  118. package/dist/{chunk-VRCFCFB5.js → chunk-KIXYAIPB.js} +4 -4
  119. package/dist/{chunk-I4IBMLV4.js → chunk-KN6OG3WN.js} +2 -2
  120. package/dist/{chunk-IKSYTHKX.js → chunk-KOLL65WL.js} +3 -3
  121. package/dist/{chunk-KNHM5GQQ.js → chunk-L64YORM7.js} +10 -8
  122. package/dist/{chunk-NOD7XFD7.js → chunk-LO44K2EI.js} +3 -3
  123. package/dist/{chunk-BARSXCGR.js → chunk-M64J2RXB.js} +2 -2
  124. package/dist/chunk-MR5BPD6R.js +7 -0
  125. package/dist/{chunk-PHPJULDV.js → chunk-N6JCPZ5G.js} +2 -2
  126. package/dist/{chunk-GDUMGSIP.js → chunk-NGZNCS3G.js} +1 -1
  127. package/dist/{chunk-75DHKNW2.js → chunk-NNLLQWDS.js} +4 -4
  128. package/dist/{chunk-FCWARLFN.js → chunk-NNPOWTQ4.js} +5 -5
  129. package/dist/{chunk-N6FVXOZU.js → chunk-NRUHVUQY.js} +1 -1
  130. package/dist/{chunk-RIEGA5XZ.js → chunk-PPBA6RPY.js} +2 -2
  131. package/dist/{chunk-WJ55ZV54.js → chunk-PQSMCDAM.js} +3 -0
  132. package/dist/{chunk-IYYEOE54.js → chunk-PWYDH3ZA.js} +1 -1
  133. package/dist/{chunk-YPZVGCLY.js → chunk-Q252HANX.js} +3 -3
  134. package/dist/{chunk-WD34LPOD.js → chunk-Q4BKNDZD.js} +3 -3
  135. package/dist/{chunk-QYLYNHMO.js → chunk-QCFV6G6K.js} +2 -2
  136. package/dist/{chunk-G75ACCCJ.js → chunk-QXTTPOP5.js} +1 -1
  137. package/dist/{chunk-3SSWKFF2.js → chunk-QXZSPZWJ.js} +2 -2
  138. package/dist/{chunk-MEJX5PMD.js → chunk-RBUBE5ET.js} +1 -1
  139. package/dist/{chunk-MDFOHG56.js → chunk-RM3WVAEZ.js} +1 -1
  140. package/dist/{chunk-VOZN65OL.js → chunk-RN3FLBX4.js} +8 -2
  141. package/dist/{chunk-UWUX4HB6.js → chunk-RNGFFSNG.js} +21 -11
  142. package/dist/{chunk-LORXIAD3.js → chunk-SLK22PRQ.js} +19 -9
  143. package/dist/{chunk-FRX2T2G4.js → chunk-TGQ4XIIL.js} +1 -1
  144. package/dist/{chunk-FM7FVXF6.js → chunk-TXETMX5H.js} +2 -2
  145. package/dist/{chunk-BROSH5WN.js → chunk-UGZYYO3T.js} +1 -1
  146. package/dist/{chunk-AI4IV7FO.js → chunk-UH3WEXVR.js} +19 -22
  147. package/dist/{chunk-ENPVMPHJ.js → chunk-UPGCU4V3.js} +3 -3
  148. package/dist/{chunk-Y24SHU4H.js → chunk-URTTLQAC.js} +1 -1
  149. package/dist/{chunk-O7H6JXIB.js → chunk-VECFKZI5.js} +4 -4
  150. package/dist/{chunk-HCNRBWQR.js → chunk-VEXKMBM6.js} +1 -1
  151. package/dist/{chunk-BV2IOLOJ.js → chunk-VFURXZPW.js} +3 -3
  152. package/dist/{chunk-XUTZ5DK5.js → chunk-VQRXNT3Q.js} +2 -2
  153. package/dist/{chunk-MAWL2EMK.js → chunk-VTHB4J4N.js} +3 -3
  154. package/dist/{chunk-VB42QDEC.js → chunk-VUWTKMHT.js} +2 -2
  155. package/dist/{chunk-ZVJPFIET.js → chunk-VX7TMQSF.js} +3 -3
  156. package/dist/{chunk-S72G6RPK.js → chunk-WEKPO5YP.js} +2 -2
  157. package/dist/{chunk-J34HZLGN.js → chunk-WLNEXEEX.js} +1 -1
  158. package/dist/{chunk-4HT6QOTO.js → chunk-WOQOIB6V.js} +9 -3
  159. package/dist/{chunk-HPSQSM3G.js → chunk-X72OOA2X.js} +3 -3
  160. package/dist/{chunk-JOCKBZYP.js → chunk-XLJODMSX.js} +8 -2
  161. package/dist/{chunk-BHXYYOF6.js → chunk-XQ3MES4Y.js} +20 -10
  162. package/dist/{chunk-DPEJN5GM.js → chunk-Y7ACQLH4.js} +10 -4
  163. package/dist/{chunk-4VGMZWJ2.js → chunk-YF4DILIQ.js} +1 -1
  164. package/dist/{chunk-IGVGBFT6.js → chunk-ZHEWPE46.js} +1 -1
  165. package/dist/{chunk-6OC3EASW.js → chunk-ZWCN6ASW.js} +2 -2
  166. package/dist/combobox/src/ComboBox.css +960 -684
  167. package/dist/combobox/src/ComboBox.js +25 -24
  168. package/dist/combobox/src/index.css +960 -684
  169. package/dist/combobox/src/index.js +25 -24
  170. package/dist/contextual-help/src/ContextualHelp.css +4438 -0
  171. package/dist/contextual-help/src/ContextualHelp.d.ts +40 -0
  172. package/dist/contextual-help/src/ContextualHelp.js +14 -0
  173. package/dist/contextual-help/src/ContextualHelpContext.d.ts +13 -0
  174. package/dist/contextual-help/src/ContextualHelpContext.js +2 -0
  175. package/dist/contextual-help/src/index.css +4438 -0
  176. package/dist/contextual-help/src/index.d.ts +10 -0
  177. package/dist/contextual-help/src/index.js +14 -0
  178. package/dist/disclosure/src/Disclosure.css +54 -47
  179. package/dist/disclosure/src/Disclosure.js +2 -2
  180. package/dist/disclosure/src/DisclosureHeader.css +61 -54
  181. package/dist/disclosure/src/DisclosureHeader.js +4 -3
  182. package/dist/disclosure/src/DisclosurePanel.css +54 -47
  183. package/dist/disclosure/src/DisclosurePanel.js +5 -5
  184. package/dist/disclosure/src/index.css +79 -72
  185. package/dist/disclosure/src/index.js +9 -9
  186. package/dist/divider/src/Divider.css +46 -39
  187. package/dist/divider/src/Divider.js +1 -1
  188. package/dist/divider/src/index.css +46 -39
  189. package/dist/divider/src/index.js +1 -1
  190. package/dist/error-message/src/ErrorMessage.css +46 -39
  191. package/dist/error-message/src/ErrorMessage.js +3 -3
  192. package/dist/error-message/src/index.css +46 -39
  193. package/dist/error-message/src/index.js +3 -3
  194. package/dist/form/src/Form.css +44 -37
  195. package/dist/form/src/Form.js +1 -1
  196. package/dist/form/src/index.css +44 -37
  197. package/dist/form/src/index.js +1 -1
  198. package/dist/header/src/Header.css +279 -0
  199. package/dist/header/src/Header.js +3 -1
  200. package/dist/header/src/HeaderContext.d.ts +13 -3
  201. package/dist/header/src/index.css +279 -0
  202. package/dist/header/src/index.d.ts +1 -1
  203. package/dist/header/src/index.js +3 -1
  204. package/dist/helper-message/src/HelperMessage.css +46 -39
  205. package/dist/helper-message/src/HelperMessage.js +3 -3
  206. package/dist/helper-message/src/index.css +46 -39
  207. package/dist/helper-message/src/index.js +3 -3
  208. package/dist/hopper-provider/src/HopperProvider.css +45 -38
  209. package/dist/hopper-provider/src/HopperProvider.js +1 -1
  210. package/dist/hopper-provider/src/index.css +45 -38
  211. package/dist/hopper-provider/src/index.js +1 -1
  212. package/dist/i18n/src/index.js +1 -1
  213. package/dist/i18n/src/useLocalizedString.js +1 -1
  214. package/dist/icon-list/src/IconList.css +45 -38
  215. package/dist/icon-list/src/IconList.js +1 -1
  216. package/dist/icon-list/src/index.css +45 -38
  217. package/dist/icon-list/src/index.js +1 -1
  218. package/dist/illustrated-message/src/IllustratedMessage.css +559 -279
  219. package/dist/illustrated-message/src/IllustratedMessage.js +2 -2
  220. package/dist/illustrated-message/src/index.css +559 -279
  221. package/dist/illustrated-message/src/index.js +2 -2
  222. package/dist/image/src/Image.css +47 -40
  223. package/dist/image/src/Image.js +3 -1
  224. package/dist/image/src/ImageContext.d.ts +13 -3
  225. package/dist/image/src/SvgImage.css +45 -38
  226. package/dist/image/src/SvgImage.js +1 -1
  227. package/dist/image/src/index.css +48 -41
  228. package/dist/image/src/index.d.ts +1 -1
  229. package/dist/image/src/index.js +4 -2
  230. package/dist/index.css +1397 -1044
  231. package/dist/index.d.ts +13 -7
  232. package/dist/index.js +124 -118
  233. package/dist/inputs/src/Input.css +48 -41
  234. package/dist/inputs/src/Input.js +1 -1
  235. package/dist/inputs/src/InputGroup.css +50 -43
  236. package/dist/inputs/src/InputGroup.js +1 -1
  237. package/dist/inputs/src/NumberField.css +74 -67
  238. package/dist/inputs/src/NumberField.js +12 -11
  239. package/dist/inputs/src/PasswordField.css +560 -280
  240. package/dist/inputs/src/PasswordField.js +12 -11
  241. package/dist/inputs/src/RemainingCharacterCount.css +47 -40
  242. package/dist/inputs/src/RemainingCharacterCount.js +4 -4
  243. package/dist/inputs/src/SearchField.css +566 -286
  244. package/dist/inputs/src/SearchField.js +13 -12
  245. package/dist/inputs/src/TextArea.css +71 -64
  246. package/dist/inputs/src/TextArea.js +11 -10
  247. package/dist/inputs/src/TextField.css +564 -284
  248. package/dist/inputs/src/TextField.js +16 -15
  249. package/dist/inputs/src/index.css +612 -332
  250. package/dist/inputs/src/index.js +22 -21
  251. package/dist/layout/src/Content.css +279 -0
  252. package/dist/layout/src/Content.js +3 -1
  253. package/dist/layout/src/ContentContext.d.ts +13 -3
  254. package/dist/layout/src/Footer.css +279 -0
  255. package/dist/layout/src/Footer.js +3 -1
  256. package/dist/layout/src/FooterContext.d.ts +13 -3
  257. package/dist/link/src/Link.css +83 -76
  258. package/dist/link/src/Link.js +4 -4
  259. package/dist/link/src/index.css +83 -76
  260. package/dist/link/src/index.js +4 -4
  261. package/dist/list-box/src/ListBox.css +318 -311
  262. package/dist/list-box/src/ListBox.js +10 -10
  263. package/dist/list-box/src/ListBoxItem.css +306 -299
  264. package/dist/list-box/src/ListBoxItem.js +7 -7
  265. package/dist/list-box/src/ListBoxItemSkeleton.css +51 -44
  266. package/dist/list-box/src/ListBoxItemSkeleton.js +1 -1
  267. package/dist/list-box/src/index.css +318 -311
  268. package/dist/list-box/src/index.js +11 -11
  269. package/dist/menu/src/Menu.css +885 -609
  270. package/dist/menu/src/Menu.js +4 -4
  271. package/dist/menu/src/MenuItem.css +123 -116
  272. package/dist/menu/src/MenuItem.js +3 -3
  273. package/dist/menu/src/MenuSection.css +46 -39
  274. package/dist/menu/src/MenuSection.js +1 -1
  275. package/dist/menu/src/index.css +910 -634
  276. package/dist/menu/src/index.js +9 -9
  277. package/dist/modal/src/BaseModal.css +59 -52
  278. package/dist/modal/src/BaseModal.js +1 -1
  279. package/dist/modal/src/CustomModal.css +60 -53
  280. package/dist/modal/src/CustomModal.js +2 -2
  281. package/dist/modal/src/Modal.css +607 -315
  282. package/dist/modal/src/Modal.js +12 -11
  283. package/dist/modal/src/index.css +608 -316
  284. package/dist/modal/src/index.js +14 -13
  285. package/dist/overlays/popover/src/Popover.css +877 -597
  286. package/dist/overlays/popover/src/Popover.js +2 -2
  287. package/dist/overlays/popover/src/PopoverBase.css +47 -44
  288. package/dist/overlays/popover/src/PopoverBase.js +1 -1
  289. package/dist/overlays/popover/src/index.css +880 -604
  290. package/dist/overlays/popover/src/index.js +3 -3
  291. package/dist/radio/src/DecorativeRadio.css +71 -64
  292. package/dist/radio/src/DecorativeRadio.js +4 -4
  293. package/dist/radio/src/Radio.css +63 -56
  294. package/dist/radio/src/Radio.js +4 -4
  295. package/dist/radio/src/RadioField.css +50 -43
  296. package/dist/radio/src/RadioField.js +3 -3
  297. package/dist/radio/src/RadioGroup.css +115 -108
  298. package/dist/radio/src/RadioGroup.js +10 -9
  299. package/dist/radio/src/index.css +115 -108
  300. package/dist/radio/src/index.js +15 -14
  301. package/dist/segmented-control/src/SegmentedControl.css +45 -38
  302. package/dist/segmented-control/src/SegmentedControl.js +1 -1
  303. package/dist/segmented-control/src/SegmentedControlItem.css +59 -52
  304. package/dist/segmented-control/src/SegmentedControlItem.js +3 -3
  305. package/dist/segmented-control/src/index.css +60 -53
  306. package/dist/segmented-control/src/index.js +4 -4
  307. package/dist/select/src/Select.css +904 -628
  308. package/dist/select/src/Select.js +23 -22
  309. package/dist/select/src/SelectValue.css +105 -98
  310. package/dist/select/src/SelectValue.js +4 -4
  311. package/dist/select/src/index.css +904 -628
  312. package/dist/select/src/index.js +23 -22
  313. package/dist/spinner/src/Spinner.css +54 -47
  314. package/dist/spinner/src/Spinner.js +3 -3
  315. package/dist/spinner/src/index.css +54 -47
  316. package/dist/spinner/src/index.js +3 -3
  317. package/dist/switch/src/Switch.css +60 -53
  318. package/dist/switch/src/Switch.js +4 -4
  319. package/dist/switch/src/SwitchField.css +50 -43
  320. package/dist/switch/src/SwitchField.js +4 -4
  321. package/dist/switch/src/index.css +66 -59
  322. package/dist/switch/src/index.js +6 -6
  323. package/dist/tabs/src/Tab.css +730 -450
  324. package/dist/tabs/src/Tab.js +4 -4
  325. package/dist/tabs/src/TabLine.css +46 -39
  326. package/dist/tabs/src/TabLine.js +1 -1
  327. package/dist/tabs/src/TabList.css +53 -46
  328. package/dist/tabs/src/TabList.js +2 -2
  329. package/dist/tabs/src/TabPanel.css +46 -39
  330. package/dist/tabs/src/TabPanel.js +1 -1
  331. package/dist/tabs/src/index.css +741 -461
  332. package/dist/tabs/src/index.js +7 -7
  333. package/dist/tag/src/Tag.css +708 -428
  334. package/dist/tag/src/Tag.js +10 -10
  335. package/dist/tag/src/TagGroup.css +54 -47
  336. package/dist/tag/src/TagGroup.js +9 -8
  337. package/dist/tag/src/index.css +718 -438
  338. package/dist/tag/src/index.js +15 -14
  339. package/dist/tile/src/Tile.css +53 -46
  340. package/dist/tile/src/Tile.js +3 -3
  341. package/dist/tile/src/TileGroup.css +45 -38
  342. package/dist/tile/src/TileGroup.js +2 -2
  343. package/dist/tile/src/index.css +54 -47
  344. package/dist/tile/src/index.js +5 -5
  345. package/dist/toggle-arrow/src/ToggleArrow.css +46 -39
  346. package/dist/toggle-arrow/src/ToggleArrow.js +1 -1
  347. package/dist/toggle-arrow/src/index.css +46 -39
  348. package/dist/toggle-arrow/src/index.js +1 -1
  349. package/dist/tooltip/src/Tooltip.css +54 -47
  350. package/dist/tooltip/src/Tooltip.js +4 -4
  351. package/dist/tooltip/src/TooltipTrigger.css +44 -37
  352. package/dist/tooltip/src/TooltipTrigger.js +2 -2
  353. package/dist/tooltip/src/index.css +54 -47
  354. package/dist/tooltip/src/index.js +7 -7
  355. package/dist/typography/heading/src/Heading.css +44 -37
  356. package/dist/typography/heading/src/Heading.js +3 -1
  357. package/dist/typography/heading/src/HeadingContext.d.ts +13 -3
  358. package/dist/typography/heading/src/index.css +44 -37
  359. package/dist/typography/heading/src/index.d.ts +1 -1
  360. package/dist/typography/heading/src/index.js +3 -1
  361. package/dist/typography/label/src/FieldLabel.css +279 -0
  362. package/dist/typography/label/src/FieldLabel.d.ts +30 -0
  363. package/dist/typography/label/src/FieldLabel.js +8 -0
  364. package/dist/typography/label/src/Label.css +52 -45
  365. package/dist/typography/label/src/Label.d.ts +0 -10
  366. package/dist/typography/label/src/Label.js +1 -4
  367. package/dist/typography/label/src/LabelContext.d.ts +1 -3
  368. package/dist/typography/label/src/index.css +44 -37
  369. package/dist/typography/label/src/index.d.ts +4 -2
  370. package/dist/typography/label/src/index.js +4 -3
  371. package/dist/typography/overline-text/src/OverlineText.css +44 -37
  372. package/dist/typography/overline-text/src/OverlineText.js +1 -1
  373. package/dist/typography/overline-text/src/index.css +44 -37
  374. package/dist/typography/overline-text/src/index.js +1 -1
  375. package/dist/typography/paragraph/src/Paragraph.css +44 -37
  376. package/dist/typography/paragraph/src/Paragraph.js +3 -3
  377. package/dist/typography/paragraph/src/index.css +44 -37
  378. package/dist/typography/paragraph/src/index.js +3 -3
  379. package/dist/typography/text/src/Text.css +44 -37
  380. package/dist/typography/text/src/Text.js +2 -2
  381. package/dist/typography/text/src/index.css +44 -37
  382. package/dist/typography/text/src/index.js +2 -2
  383. package/dist/utils/src/ClearSlots.css +44 -37
  384. package/dist/utils/src/ClearSlots.d.ts +1 -2
  385. package/dist/utils/src/ClearSlots.js +1 -1
  386. package/dist/utils/src/EnsureTextWrapper.css +44 -37
  387. package/dist/utils/src/EnsureTextWrapper.js +3 -3
  388. package/dist/utils/src/index.css +44 -37
  389. package/dist/utils/src/index.d.ts +2 -1
  390. package/dist/utils/src/index.js +5 -4
  391. package/dist/utils/src/types.d.ts +4 -0
  392. package/dist/utils/src/useProgressVisibility.d.ts +3 -0
  393. package/dist/utils/src/useProgressVisibility.js +2 -0
  394. package/package.json +2 -2
  395. package/dist/chunk-LUQYZSMV.js +0 -121
  396. package/dist/{chunk-DCO4XGBI.js → chunk-DAF2CRGN.js} +1 -1
package/dist/contextual-help/src/index.css ADDED
@@ -0,0 +1,4438 @@
1
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/heading/src/Heading.module.css/#css-module-data */
2
+ .Heading-module__hop-Heading___EG00A {
3
+ --hop-Heading-xs-font-size: var(--hop-heading-xs-font-size);
4
+ --hop-Heading-xs-font-family: var(--hop-heading-xs-font-family);
5
+ --hop-Heading-xs-font-weight: var(--hop-heading-xs-font-weight);
6
+ --hop-Heading-xs-line-height: var(--hop-heading-xs-line-height);
7
+ --hop-Heading-sm-font-size: var(--hop-heading-sm-font-size);
8
+ --hop-Heading-sm-font-family: var(--hop-heading-sm-font-family);
9
+ --hop-Heading-sm-font-weight: var(--hop-heading-sm-font-weight);
10
+ --hop-Heading-sm-line-height: var(--hop-heading-sm-line-height);
11
+ --hop-Heading-md-font-size: var(--hop-heading-md-font-size);
12
+ --hop-Heading-md-font-family: var(--hop-heading-md-font-family);
13
+ --hop-Heading-md-font-weight: var(--hop-heading-md-font-weight);
14
+ --hop-Heading-md-line-height: var(--hop-heading-md-line-height);
15
+ --hop-Heading-lg-font-size: var(--hop-heading-lg-font-size);
16
+ --hop-Heading-lg-font-family: var(--hop-heading-lg-font-family);
17
+ --hop-Heading-lg-font-weight: var(--hop-heading-lg-font-weight);
18
+ --hop-Heading-lg-line-height: var(--hop-heading-lg-line-height);
19
+ --hop-Heading-xl-font-size: var(--hop-heading-xl-font-size);
20
+ --hop-Heading-xl-font-family: var(--hop-heading-xl-font-family);
21
+ --hop-Heading-xl-font-weight: var(--hop-heading-xl-font-weight);
22
+ --hop-Heading-xl-line-height: var(--hop-heading-xl-line-height);
23
+ --hop-Heading-2xl-font-size: var(--hop-heading-2xl-font-size);
24
+ --hop-Heading-2xl-font-family: var(--hop-heading-2xl-font-family);
25
+ --hop-Heading-2xl-font-weight: var(--hop-heading-2xl-font-weight);
26
+ --hop-Heading-2xl-line-height: var(--hop-heading-2xl-line-height);
27
+ --hop-Heading-3xl-font-size: var(--hop-heading-3xl-font-size);
28
+ --hop-Heading-3xl-font-family: var(--hop-heading-3xl-font-family);
29
+ --hop-Heading-3xl-font-weight: var(--hop-heading-3xl-font-weight);
30
+ --hop-Heading-3xl-line-height: var(--hop-heading-3xl-line-height);
31
+ --hop-Heading-inherit-size-font-size: inherit;
32
+ --hop-Heading-inherit-size-font-family: inherit;
33
+ --hop-Heading-inherit-size-font-weight: inherit;
34
+ --hop-Heading-inherit-size-line-height: inherit;
35
+ }
36
+ :where(.Heading-module__hop-Heading___EG00A) {
37
+ margin: 0;
38
+ font-family: var(--font-family);
39
+ font-size: var(--font-size);
40
+ font-weight: var(--font-weight);
41
+ line-height: var(--line-height);
42
+ color: var(--hop-neutral-text);
43
+ }
44
+ :where(.Heading-module__hop-Heading--xs___xNucC) {
45
+ --font-size: var(--hop-Heading-xs-font-size);
46
+ --font-family: var(--hop-Heading-xs-font-family);
47
+ --font-weight: var(--hop-Heading-xs-font-weight);
48
+ --line-height: var(--hop-Heading-xs-line-height);
49
+ }
50
+ :where(.Heading-module__hop-Heading--sm___05Byx) {
51
+ --font-size: var(--hop-Heading-sm-font-size);
52
+ --font-family: var(--hop-Heading-sm-font-family);
53
+ --font-weight: var(--hop-Heading-sm-font-weight);
54
+ --line-height: var(--hop-Heading-sm-line-height);
55
+ }
56
+ :where(.Heading-module__hop-Heading--md___7vlXO) {
57
+ --font-size: var(--hop-Heading-md-font-size);
58
+ --font-family: var(--hop-Heading-md-font-family);
59
+ --font-weight: var(--hop-Heading-md-font-weight);
60
+ --line-height: var(--hop-Heading-md-line-height);
61
+ }
62
+ :where(.Heading-module__hop-Heading--lg___-iM4S) {
63
+ --font-size: var(--hop-Heading-lg-font-size);
64
+ --font-family: var(--hop-Heading-lg-font-family);
65
+ --font-weight: var(--hop-Heading-lg-font-weight);
66
+ --line-height: var(--hop-Heading-lg-line-height);
67
+ }
68
+ :where(.Heading-module__hop-Heading--xl___YiFxf) {
69
+ --font-size: var(--hop-Heading-xl-font-size);
70
+ --font-family: var(--hop-Heading-xl-font-family);
71
+ --font-weight: var(--hop-Heading-xl-font-weight);
72
+ --line-height: var(--hop-Heading-xl-line-height);
73
+ }
74
+ :where(.Heading-module__hop-Heading--2xl___sLtGX) {
75
+ --font-size: var(--hop-Heading-2xl-font-size);
76
+ --font-family: var(--hop-Heading-2xl-font-family);
77
+ --font-weight: var(--hop-Heading-2xl-font-weight);
78
+ --line-height: var(--hop-Heading-2xl-line-height);
79
+ }
80
+ :where(.Heading-module__hop-Heading--3xl___L3BmC) {
81
+ --font-size: var(--hop-Heading-3xl-font-size);
82
+ --font-family: var(--hop-Heading-3xl-font-family);
83
+ --font-weight: var(--hop-Heading-3xl-font-weight);
84
+ --line-height: var(--hop-Heading-3xl-line-height);
85
+ }
86
+
87
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/label/src/Label.module.css/#css-module-data */
88
+ .Label-module__hop-Label___x-D7q {
89
+ --hop-Label-font-size: var(--hop-heading-xs-font-size);
90
+ --hop-Label-font-family: var(--hop-heading-xs-font-family);
91
+ --hop-Label-font-weight: var(--hop-heading-xs-font-weight);
92
+ --hop-Label-line-height: var(--hop-heading-xs-line-height);
93
+ --hop-Label-color: var(--hop-neutral-text-weak);
94
+ }
95
+ :where(.Label-module__hop-Label___x-D7q) {
96
+ font-family: var(--hop-Label-font-family);
97
+ font-size: var(--hop-Label-font-size);
98
+ font-weight: var(--hop-Label-font-weight);
99
+ line-height: var(--hop-Label-line-height);
100
+ color: var(--hop-Label-color);
101
+ }
102
+
103
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/label/src/FieldLabel.module.css/#css-module-data */
104
+ .FieldLabel-module__hop-FieldLabel__wrapper___VGoF6 {
105
+ display: flex;
106
+ gap: var(--hop-space-inset-xs);
107
+ align-items: center;
108
+ }
109
+ .FieldLabel-module__hop-FieldLabel__indicator___fp8NS {
110
+ padding-inline-start: var(--hop-space-20);
111
+ }
112
+
113
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/overline-text/src/OverlineText.module.css/#css-module-data */
114
+ :where(.OverlineText-module__hop-OverlineText___uqriG) {
115
+ --hop-OverlineText-font-family: var(--hop-overline-font-family);
116
+ --hop-OverlineText-font-size: var(--hop-overline-font-size);
117
+ --hop-OverlineText-font-weight: var(--hop-overline-font-weight);
118
+ --hop-OverlineText-letter-spacing: 0.015rem;
119
+ --hop-OverlineText-line-height: var(--hop-overline-line-height);
120
+ --hop-OverlineText-top-offset: var(--hop-overline-top-offset);
121
+ --hop-OverlineText-bottom-offset: var(--hop-overline-bottom-offset);
122
+ --font-family: var(--hop-OverlineText-font-family);
123
+ --font-size: var(--hop-OverlineText-font-size);
124
+ --font-weight: var(--hop-OverlineText-font-weight);
125
+ --letter-spacing: var(--hop-OverlineText-letter-spacing);
126
+ --line-height: var(--hop-OverlineText-line-height);
127
+ --top-offset: var(--hop-OverlineText-top-offset);
128
+ --bottom-offset: var(--hop-OverlineText-bottom-offset);
129
+ box-sizing: border-box;
130
+ font-family: var(--font-family);
131
+ font-size: var(--font-size);
132
+ font-feature-settings: "case";
133
+ font-weight: var(--font-weight);
134
+ line-height: var(--line-height);
135
+ text-transform: uppercase;
136
+ letter-spacing: var(--letter-spacing);
137
+ }
138
+ .OverlineText-module__hop-OverlineText__text___QC4h8 {
139
+ box-sizing: border-box;
140
+ }
141
+ .OverlineText-module__hop-OverlineText__text___QC4h8::before,
142
+ .OverlineText-module__hop-OverlineText__text___QC4h8::after {
143
+ content: "";
144
+ display: block;
145
+ box-sizing: border-box;
146
+ inline-size: 0;
147
+ block-size: 0;
148
+ }
149
+ .OverlineText-module__hop-OverlineText__text___QC4h8::before {
150
+ margin-block-end: var(--bottom-offset);
151
+ }
152
+ .OverlineText-module__hop-OverlineText__text___QC4h8::after {
153
+ margin-block-start: var(--top-offset);
154
+ }
155
+
156
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/text/src/Text.module.css/#css-module-data */
157
+ .Text-module__hop-Text___TlqAw {
158
+ --hop-Text-xs-font-size: var(--hop-body-xs-font-size);
159
+ --hop-Text-xs-font-family: var(--hop-body-xs-font-family);
160
+ --hop-Text-xs-font-weight: var(--hop-body-xs-font-weight);
161
+ --hop-Text-xs-line-height: var(--hop-body-xs-line-height);
162
+ --hop-Text-sm-font-size: var(--hop-body-sm-font-size);
163
+ --hop-Text-sm-font-family: var(--hop-body-sm-font-family);
164
+ --hop-Text-sm-font-weight: var(--hop-body-sm-font-weight);
165
+ --hop-Text-sm-line-height: var(--hop-body-sm-line-height);
166
+ --hop-Text-md-font-size: var(--hop-body-md-font-size);
167
+ --hop-Text-md-font-family: var(--hop-body-md-font-family);
168
+ --hop-Text-md-font-weight: var(--hop-body-md-font-weight);
169
+ --hop-Text-md-line-height: var(--hop-body-md-line-height);
170
+ --hop-Text-lg-font-size: var(--hop-body-lg-font-size);
171
+ --hop-Text-lg-font-family: var(--hop-body-lg-font-family);
172
+ --hop-Text-lg-font-weight: var(--hop-body-lg-font-weight);
173
+ --hop-Text-lg-line-height: var(--hop-body-lg-line-height);
174
+ --hop-Text-xl-font-size: var(--hop-body-xl-font-size);
175
+ --hop-Text-xl-font-family: var(--hop-body-xl-font-family);
176
+ --hop-Text-xl-font-weight: var(--hop-body-xl-font-weight);
177
+ --hop-Text-xl-line-height: var(--hop-body-xl-line-height);
178
+ --hop-Text-2xl-font-size: var(--hop-body-2xl-font-size);
179
+ --hop-Text-2xl-font-family: var(--hop-body-2xl-font-family);
180
+ --hop-Text-2xl-font-weight: var(--hop-body-2xl-font-weight);
181
+ --hop-Text-2xl-line-height: var(--hop-body-2xl-line-height);
182
+ --hop-Text-inherit-size-font-size: inherit;
183
+ --hop-Text-inherit-size-font-family: inherit;
184
+ --hop-Text-inherit-size-font-weight: inherit;
185
+ --hop-Text-inherit-size-line-height: inherit;
186
+ }
187
+ :where(.Text-module__hop-Text___TlqAw) {
188
+ font-family: var(--font-family);
189
+ font-size: var(--font-size);
190
+ font-weight: var(--font-weight);
191
+ line-height: var(--line-height);
192
+ }
193
+ :where(.Text-module__hop-Text--xs___r7Jh2) {
194
+ --font-size: var(--hop-Text-xs-font-size);
195
+ --font-family: var(--hop-Text-xs-font-family);
196
+ --font-weight: var(--hop-Text-xs-font-weight);
197
+ --line-height: var(--hop-Text-xs-line-height);
198
+ }
199
+ :where(.Text-module__hop-Text--sm___47IuM) {
200
+ --font-size: var(--hop-Text-sm-font-size);
201
+ --font-family: var(--hop-Text-sm-font-family);
202
+ --font-weight: var(--hop-Text-sm-font-weight);
203
+ --line-height: var(--hop-Text-sm-line-height);
204
+ }
205
+ :where(.Text-module__hop-Text--md___C2YwB) {
206
+ --font-size: var(--hop-Text-md-font-size);
207
+ --font-family: var(--hop-Text-md-font-family);
208
+ --font-weight: var(--hop-Text-md-font-weight);
209
+ --line-height: var(--hop-Text-md-line-height);
210
+ }
211
+ :where(.Text-module__hop-Text--lg___hfcIw) {
212
+ --font-size: var(--hop-Text-lg-font-size);
213
+ --font-family: var(--hop-Text-lg-font-family);
214
+ --font-weight: var(--hop-Text-lg-font-weight);
215
+ --line-height: var(--hop-Text-lg-line-height);
216
+ }
217
+ :where(.Text-module__hop-Text--xl___jSZWl) {
218
+ --font-size: var(--hop-Text-xl-font-size);
219
+ --font-family: var(--hop-Text-xl-font-family);
220
+ --font-weight: var(--hop-Text-xl-font-weight);
221
+ --line-height: var(--hop-Text-xl-line-height);
222
+ }
223
+ :where(.Text-module__hop-Text--2xl___3Q3EA) {
224
+ --font-size: var(--hop-Text-2xl-font-size);
225
+ --font-family: var(--hop-Text-2xl-font-family);
226
+ --font-weight: var(--hop-Text-2xl-font-weight);
227
+ --line-height: var(--hop-Text-2xl-line-height);
228
+ }
229
+ :where(.Text-module__hop-Text--inherit___S3ePi) {
230
+ --font-size: var(--hop-Text-inherit-size-font-size);
231
+ --font-family: var(--hop-Text-inherit-size-font-family);
232
+ --font-weight: var(--hop-Text-inherit-size-font-weight);
233
+ --line-height: var(--hop-Text-inherit-size-line-height);
234
+ }
235
+
236
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/paragraph/src/Paragraph.module.css/#css-module-data */
237
+ .Paragraph-module__hop-Paragraph___HpT17 {
238
+ --hop-Paragraph-xs-margin-bottom: calc(.625rem * .75);
239
+ --hop-Paragraph-sm-margin-bottom: calc(.75rem * .75);
240
+ --hop-Paragraph-md-margin-bottom: calc(.875rem * .75);
241
+ --hop-Paragraph-lg-margin-bottom: calc(1rem * .75);
242
+ --hop-Paragraph-xl-margin-bottom: calc(1.125rem * .75);
243
+ --hop-Paragraph-2xl-margin-bottom: calc(1.375rem * .75);
244
+ --hop-Paragraph-inherit-margin-bottom: .75em;
245
+ margin: 0;
246
+ margin-block-end: var(--margin-block-end);
247
+ overflow-wrap: break-word;
248
+ }
249
+ .Paragraph-module__hop-Paragraph___HpT17:last-child {
250
+ --margin-block-end: 0;
251
+ }
252
+ .Paragraph-module__hop-Paragraph--xs___DXGDe {
253
+ --margin-block-end: var(--hop-Paragraph-xs-margin-bottom);
254
+ }
255
+ .Paragraph-module__hop-Paragraph--sm___qshKm {
256
+ --margin-block-end: var(--hop-Paragraph-sm-margin-bottom);
257
+ }
258
+ .Paragraph-module__hop-Paragraph--md___UEgGX {
259
+ --margin-block-end: var(--hop-Paragraph-md-margin-bottom);
260
+ }
261
+ .Paragraph-module__hop-Paragraph--lg___EvhSs {
262
+ --margin-block-end: var(--hop-Paragraph-lg-margin-bottom);
263
+ }
264
+ .Paragraph-module__hop-Paragraph--xl___X9E7u {
265
+ --margin-block-end: var(--hop-Paragraph-xl-margin-bottom);
266
+ }
267
+ .Paragraph-module__hop-Paragraph--2xl___MYUu5 {
268
+ --margin-block-end: var(--hop-Paragraph-2xl-margin-bottom);
269
+ }
270
+ .Paragraph-module__hop-Paragraph--inherit___IZyrO {
271
+ --margin-block-end: var(--hop-Paragraph-inherit-margin-bottom);
272
+ }
273
+
274
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/form/src/Form.module.css/#css-module-data */
275
+ .Form-module__hop-Form___uqGvw {
276
+ display: flex;
277
+ flex-direction: column;
278
+ gap: var(--hop-space-stack-lg);
279
+ }
280
+
281
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/icon-list/src/IconList.module.css/#css-module-data */
282
+ .IconList-module__hop-IconList___TpK2G {
283
+ --hop-IconList-gap: var(--hop-space-inline-xs);
284
+ display: flex;
285
+ flex-wrap: wrap;
286
+ gap: var(--hop-IconList-gap);
287
+ box-sizing: border-box;
288
+ }
289
+
290
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/spinner/src/Spinner.module.css/#css-module-data */
291
+ @keyframes Spinner-module__spin___Qq0VA {
292
+ 0% {
293
+ transform: rotate(0deg);
294
+ }
295
+ 100% {
296
+ transform: rotate(360deg);
297
+ }
298
+ }
299
+ .Spinner-module__hop-Spinner___q7lsB {
300
+ --hop-Spinner-border-radius: var(--hop-shape-circle);
301
+ --hop-Spinner-sm-wheel-size: 1rem;
302
+ --hop-Spinner-md-wheel-size: 1.25rem;
303
+ --hop-Spinner-lg-wheel-size: 1.5rem;
304
+ --hop-Spinner-track-width: 0.125rem;
305
+ --hop-Spinner-track-opacity: 0.2;
306
+ --hop-Spinner-track-border: var(--hop-Spinner-track-width) solid currentcolor;
307
+ --hop-Spinner-fill-animation: Spinner-module__spin___Qq0VA .8s infinite linear;
308
+ --hop-Spinner-fill-animation-reduced-motion-duration: 2s;
309
+ --hop-Spinner-fill-border: var(--hop-Spinner-track-width) solid transparent;
310
+ --hop-Spinner-fill-border-inline-start: var(--hop-Spinner-track-width) solid currentcolor;
311
+ --hop-Spinner-label-margin-inline-start: var(--hop-space-inline-sm);
312
+ display: grid;
313
+ grid-template-areas: "spinner label";
314
+ grid-template-columns: min-content auto;
315
+ align-items: center;
316
+ box-sizing: border-box;
317
+ }
318
+ .Spinner-module__hop-Spinner--sm___jaKcR {
319
+ --width: var(--hop-Spinner-sm-wheel-size);
320
+ --height: var(--hop-Spinner-sm-wheel-size);
321
+ }
322
+ .Spinner-module__hop-Spinner--md___GNVfI {
323
+ --width: var(--hop-Spinner-md-wheel-size);
324
+ --height: var(--hop-Spinner-md-wheel-size);
325
+ }
326
+ .Spinner-module__hop-Spinner--lg___s54Hy {
327
+ --width: var(--hop-Spinner-lg-wheel-size);
328
+ --height: var(--hop-Spinner-lg-wheel-size);
329
+ }
330
+ .Spinner-module__hop-Spinner__track___P2N1M {
331
+ grid-area: spinner;
332
+ box-sizing: border-box;
333
+ inline-size: var(--width, var(--hop-Spinner-md-wheel-size));
334
+ block-size: var(--height, var(--hop-Spinner-md-wheel-size));
335
+ opacity: var(--hop-Spinner-track-opacity);
336
+ border: var(--hop-Spinner-track-border);
337
+ border-radius: var(--hop-Spinner-border-radius);
338
+ }
339
+ .Spinner-module__hop-Spinner__fill___DA6KG {
340
+ grid-area: spinner;
341
+ box-sizing: border-box;
342
+ inline-size: var(--width, var(--hop-Spinner-md-wheel-size));
343
+ block-size: var(--height, var(--hop-Spinner-md-wheel-size));
344
+ border: var(--hop-Spinner-fill-border);
345
+ border-inline-start: var(--hop-Spinner-fill-border-inline-start);
346
+ border-radius: var(--hop-Spinner-border-radius);
347
+ animation: var(--hop-Spinner-fill-animation);
348
+ }
349
+ @media (prefers-reduced-motion: reduce) {
350
+ .Spinner-module__hop-Spinner__fill___DA6KG {
351
+ animation-duration: var(--hop-Spinner-fill-animation-reduced-motion-duration);
352
+ }
353
+ }
354
+ .Spinner-module__hop-Spinner__label___7Vmlu {
355
+ grid-area: label;
356
+ margin-inline-start: var(--hop-Spinner-label-margin-inline-start);
357
+ }
358
+
359
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/buttons/src/Button.module.css/#css-module-data */
360
+ .Button-module__hop-Button___0Z1G- {
361
+ --hop-Button-border-radius: var(--hop-shape-rounded-md);
362
+ --hop-Button-focus-ring-color: var(--hop-primary-border-focus);
363
+ --hop-Button-column-gap: var(--hop-space-inline-xs);
364
+ --hop-Button-icon-only-column-gap: 0;
365
+ --hop-Button-outline-size: var(--hop-space-20);
366
+ --hop-Button-border-size: var(--hop-space-10);
367
+ --hop-Button-text-underline-offset: var(--hop-space-20);
368
+ --hop-Button-icon-only-padding: 0;
369
+ --hop-Button-sm-height: 2rem;
370
+ --hop-Button-md-height: 2.5rem;
371
+ --hop-Button-sm-padding: 0 var(--hop-space-inset-md);
372
+ --hop-Button-md-padding: 0 var(--hop-space-inset-md);
373
+ --hop-Button-ghost-sm-padding: 0 var(--hop-space-inset-xs);
374
+ --hop-Button-ghost-md-padding: 0 var(--hop-space-inset-sm);
375
+ --hop-Button-color-disabled: var(--hop-neutral-text-disabled);
376
+ --hop-Button-background-color-disabled: var(--hop-neutral-surface-disabled);
377
+ --hop-Button-border-disabled: var(--hop-Button-border-size) solid var(--hop-Button-background-color-disabled);
378
+ --hop-Button-ghost-color-disabled: var(--hop-neutral-text-disabled);
379
+ --hop-Button-ghost-background-color-disabled: transparent;
380
+ --hop-Button-ghost-border-disabled: var(--hop-Button-border-size) solid var(--hop-Button-ghost-background-color-disabled);
381
+ --hop-Button-primary-color: var(--hop-primary-text-strong);
382
+ --hop-Button-primary-color-hover: var(--hop-primary-text-strong-hover);
383
+ --hop-Button-primary-color-pressed: var(--hop-primary-text-strong);
384
+ --hop-Button-primary-background-color: var(--hop-primary-surface-strong);
385
+ --hop-Button-primary-background-color-hover: var(--hop-primary-surface-strong-hover);
386
+ --hop-Button-primary-background-color-pressed: var(--hop-primary-surface-strong-press);
387
+ --hop-Button-primary-border: var(--hop-Button-border-size) solid var(--hop-Button-primary-background-color);
388
+ --hop-Button-primary-border-hover: var(--hop-Button-border-size) solid var(--hop-Button-primary-background-color-hover);
389
+ --hop-Button-primary-border-pressed: var(--hop-Button-border-size) solid var(--hop-Button-primary-background-color-pressed);
390
+ --hop-Button-primary-spinner-color: var(--hop-primary-icon-strong);
391
+ --hop-Button-secondary-color: var(--hop-neutral-text);
392
+ --hop-Button-secondary-color-hover: var(--hop-neutral-text-hover);
393
+ --hop-Button-secondary-color-pressed: var(--hop-neutral-text-press);
394
+ --hop-Button-secondary-background-color: var(--hop-neutral-surface);
395
+ --hop-Button-secondary-background-color-hover: var(--hop-neutral-surface-hover);
396
+ --hop-Button-secondary-background-color-pressed: var(--hop-neutral-surface-press);
397
+ --hop-Button-secondary-border: var(--hop-Button-border-size) solid var(--hop-neutral-border-strong);
398
+ --hop-Button-secondary-border-hover: var(--hop-Button-border-size) solid var(--hop-neutral-border-strong-hover);
399
+ --hop-Button-secondary-border-pressed: var(--hop-Button-border-size) solid var(--hop-neutral-border-strong);
400
+ --hop-Button-secondary-spinner-color: var(--hop-neutral-icon);
401
+ --hop-Button-upsell-color: var(--hop-upsell-text);
402
+ --hop-Button-upsell-color-hover: var(--hop-upsell-text-hover);
403
+ --hop-Button-upsell-color-pressed: var(--hop-upsell-text-press);
404
+ --hop-Button-upsell-background-color: var(--hop-upsell-surface);
405
+ --hop-Button-upsell-background-color-hover: var(--hop-upsell-surface-hover);
406
+ --hop-Button-upsell-background-color-pressed: var(--hop-upsell-surface-press);
407
+ --hop-Button-upsell-border: var(--hop-Button-border-size) solid var(--hop-Button-upsell-background-color);
408
+ --hop-Button-upsell-border-hover: var(--hop-Button-border-size) solid var(--hop-Button-upsell-background-color-hover);
409
+ --hop-Button-upsell-border-pressed: var(--hop-Button-border-size) solid var(--hop-Button-upsell-background-color-pressed);
410
+ --hop-Button-upsell-spinner-color: var(--hop-upsell-icon);
411
+ --hop-Button-danger-color: var(--hop-danger-text-strong);
412
+ --hop-Button-danger-color-hover: var(--hop-danger-text-strong-hover);
413
+ --hop-Button-danger-color-pressed: var(--hop-danger-text-strong-hover);
414
+ --hop-Button-danger-background-color: var(--hop-danger-surface-strong);
415
+ --hop-Button-danger-background-color-hover: var(--hop-danger-surface-strong-hover);
416
+ --hop-Button-danger-background-color-pressed: var(--hop-danger-surface-press);
417
+ --hop-Button-danger-border: var(--hop-Button-border-size) solid var(--hop-Button-danger-background-color);
418
+ --hop-Button-danger-border-hover: var(--hop-Button-border-size) solid var(--hop-Button-danger-background-color-hover);
419
+ --hop-Button-danger-border-pressed: var(--hop-Button-border-size) solid var(--hop-Button-danger-background-color-pressed);
420
+ --hop-Button-danger-spinner-color: var(--hop-primary-icon-strong);
421
+ --hop-Button-ghost-primary-color: var(--hop-primary-text);
422
+ --hop-Button-ghost-primary-color-hover: var(--hop-primary-text-hover);
423
+ --hop-Button-ghost-primary-color-pressed: var(--hop-primary-text-press);
424
+ --hop-Button-ghost-primary-background-color: transparent;
425
+ --hop-Button-ghost-primary-background-color-hover: var(--hop-neutral-surface-hover);
426
+ --hop-Button-ghost-primary-background-color-pressed: var(--hop-primary-surface-weak-press);
427
+ --hop-Button-ghost-primary-border: var(--hop-Button-border-size) solid var(--hop-Button-ghost-primary-background-color);
428
+ --hop-Button-ghost-primary-border-hover: var(--hop-Button-border-size) solid var(--hop-Button-ghost-primary-background-color-hover);
429
+ --hop-Button-ghost-primary-border-pressed: var(--hop-Button-border-size) solid var(--hop-Button-ghost-primary-background-color-pressed);
430
+ --hop-Button-ghost-primary-spinner-color: var(--hop-neutral-icon);
431
+ --hop-Button-ghost-secondary-color: var(--hop-neutral-text-weak);
432
+ --hop-Button-ghost-secondary-color-hover: var(--hop-neutral-text-weak-hover);
433
+ --hop-Button-ghost-secondary-color-pressed: var(--hop-neutral-text-weak-press);
434
+ --hop-Button-ghost-secondary-background-color: transparent;
435
+ --hop-Button-ghost-secondary-background-color-hover: var(--hop-neutral-surface-hover);
436
+ --hop-Button-ghost-secondary-background-color-pressed: var(--hop-neutral-surface-press);
437
+ --hop-Button-ghost-secondary-border: var(--hop-Button-border-size) solid var(--hop-Button-ghost-secondary-background-color);
438
+ --hop-Button-ghost-secondary-border-hover: var(--hop-Button-border-size) solid var(--hop-Button-ghost-secondary-background-color-hover);
439
+ --hop-Button-ghost-secondary-border-pressed: var(--hop-Button-border-size) solid var(--hop-Button-ghost-secondary-background-color-pressed);
440
+ --hop-Button-ghost-secondary-spinner-color: var(--hop-neutral-icon);
441
+ --hop-Button-ghost-danger-color: var(--hop-danger-text-weak);
442
+ --hop-Button-ghost-danger-color-hover: var(--hop-danger-text-hover);
443
+ --hop-Button-ghost-danger-color-pressed: var(--hop-danger-text-press);
444
+ --hop-Button-ghost-danger-background-color: transparent;
445
+ --hop-Button-ghost-danger-background-color-hover: var(--hop-neutral-surface-hover);
446
+ --hop-Button-ghost-danger-background-color-pressed: var(--hop-danger-surface-weak-press);
447
+ --hop-Button-ghost-danger-border: var(--hop-Button-border-size) solid var(--hop-Button-ghost-danger-background-color);
448
+ --hop-Button-ghost-danger-border-hover: var(--hop-Button-border-size) solid var(--hop-Button-ghost-danger-background-color-hover);
449
+ --hop-Button-ghost-danger-border-pressed: var(--hop-Button-border-size) solid var(--hop-Button-ghost-danger-background-color-pressed);
450
+ --hop-Button-ghost-danger-spinner-color: var(--hop-neutral-icon);
451
+ --inline-size: max-content;
452
+ --block-size: var(--hop-Button-md-height);
453
+ --background-color: var(--hop-primary-surface-strong);
454
+ --color: var(--hop-primary-text-strong);
455
+ --column-gap: var(--hop-Button-column-gap);
456
+ --spinner: var(--hop-primary-icon-strong);
457
+ --border: 0;
458
+ --padding: var(--hop-Button-md-padding);
459
+ --text-underline: none;
460
+ cursor: pointer;
461
+ position: relative;
462
+ overflow: hidden;
463
+ display: flex;
464
+ column-gap: var(--column-gap);
465
+ align-items: center;
466
+ justify-content: center;
467
+ box-sizing: border-box;
468
+ inline-size: var(--inline-size);
469
+ block-size: var(--block-size);
470
+ padding: var(--padding);
471
+ color: var(--color);
472
+ text-decoration: none;
473
+ white-space: nowrap;
474
+ background-color: var(--background-color);
475
+ border: var(--border);
476
+ border-radius: var(--hop-Button-border-radius);
477
+ outline: none;
478
+ outline-offset: var(--hop-Button-outline-size);
479
+ transition:
480
+ color var(--hop-easing-duration-2) var(--hop-easing-productive),
481
+ background-color var(--hop-easing-duration-2) var(--hop-easing-productive),
482
+ border var(--hop-easing-duration-2) var(--hop-easing-productive);
483
+ }
484
+ .Button-module__hop-Button--fluid___ocE9B {
485
+ --inline-size: 100%;
486
+ }
487
+ .Button-module__hop-Button--sm___Iin1k {
488
+ --block-size: var(--hop-Button-sm-height);
489
+ --padding: var(--hop-Button-sm-padding);
490
+ }
491
+ .Button-module__hop-Button--sm___Iin1k[class*=--ghost] {
492
+ --padding: var(--hop-Button-ghost-sm-padding);
493
+ }
494
+ .Button-module__hop-Button--md___bYBGM[class*=--ghost] {
495
+ --padding: var(--hop-Button-ghost-md-padding);
496
+ }
497
+ .Button-module__hop-Button--icon-only___aWeym {
498
+ --column-gap: var(--hop-Button-icon-only-column-gap);
499
+ --padding: var(--hop-Button-icon-only-padding);
500
+ aspect-ratio: 1;
501
+ }
502
+ .Button-module__hop-Button--primary___3Qmg3 {
503
+ --background-color: var(--hop-Button-primary-background-color);
504
+ --color: var(--hop-Button-primary-color);
505
+ --border: var(--hop-Button-primary-border);
506
+ --spinner-color: var(--hop-Button-primary-spinner-color);
507
+ }
508
+ .Button-module__hop-Button--primary___3Qmg3[data-hovered],
509
+ .Button-module__hop-Button--primary___3Qmg3[data-focus-visible] {
510
+ --background-color: var(--hop-Button-primary-background-color-hover);
511
+ --color: var(--hop-Button-primary-color-hover);
512
+ --border: var(--hop-Button-primary-border-hover);
513
+ }
514
+ .Button-module__hop-Button--primary___3Qmg3[data-pressed] {
515
+ --background-color: var(--hop-Button-primary-background-color-pressed);
516
+ --color: var(--hop-Button-primary-color-pressed);
517
+ --border: var(--hop-Button-primary-border-pressed);
518
+ }
519
+ .Button-module__hop-Button--secondary___u3qlM {
520
+ --background-color: var(--hop-Button-secondary-background-color);
521
+ --color: var(--hop-Button-secondary-color);
522
+ --border: var(--hop-Button-secondary-border);
523
+ --spinner-color: var(--hop-Button-secondary-spinner-color);
524
+ }
525
+ .Button-module__hop-Button--secondary___u3qlM[data-hovered],
526
+ .Button-module__hop-Button--secondary___u3qlM[data-focus-visible] {
527
+ --background-color: var(--hop-Button-secondary-background-color-hover);
528
+ --color: var(--hop-Button-secondary-color-hover);
529
+ --border: var(--hop-Button-secondary-border-hover);
530
+ }
531
+ .Button-module__hop-Button--secondary___u3qlM[data-pressed] {
532
+ --background-color: var(--hop-Button-secondary-background-color-pressed);
533
+ --color: var(--hop-Button-secondary-color-pressed);
534
+ --border: var(--hop-Button-secondary-border-pressed);
535
+ }
536
+ .Button-module__hop-Button--upsell___Wa1Kb {
537
+ --background-color: var(--hop-Button-upsell-background-color);
538
+ --color: var(--hop-Button-upsell-color);
539
+ --border: var(--hop-Button-upsell-border);
540
+ --spinner-color: var(--hop-Button-upsell-spinner-color);
541
+ }
542
+ .Button-module__hop-Button--upsell___Wa1Kb[data-hovered],
543
+ .Button-module__hop-Button--upsell___Wa1Kb[data-focus-visible] {
544
+ --background-color: var(--hop-Button-upsell-background-color-hover);
545
+ --color: var(--hop-Button-upsell-color-hover);
546
+ --border: var(--hop-Button-upsell-border-hover);
547
+ }
548
+ .Button-module__hop-Button--upsell___Wa1Kb[data-pressed] {
549
+ --background-color: var(--hop-Button-upsell-background-color-pressed);
550
+ --color: var(--hop-Button-upsell-color-pressed);
551
+ --border: var(--hop-Button-upsell-border-pressed);
552
+ }
553
+ .Button-module__hop-Button--danger___de-7T {
554
+ --background-color: var(--hop-Button-danger-background-color);
555
+ --color: var(--hop-Button-danger-color);
556
+ --border: var(--hop-Button-danger-border);
557
+ --spinner-color: var(--hop-Button-danger-spinner-color);
558
+ }
559
+ .Button-module__hop-Button--danger___de-7T[data-hovered],
560
+ .Button-module__hop-Button--danger___de-7T[data-focus-visible] {
561
+ --background-color: var(--hop-Button-danger-background-color-hover);
562
+ --color: var(--hop-Button-danger-color-hover);
563
+ --border: var(--hop-Button-danger-border-hover);
564
+ }
565
+ .Button-module__hop-Button--danger___de-7T[data-pressed] {
566
+ --background-color: var(--hop-Button-danger-background-color-pressed);
567
+ --color: var(--hop-Button-danger-color-pressed);
568
+ --border: var(--hop-Button-danger-border-pressed);
569
+ }
570
+ .Button-module__hop-Button--ghost-primary___f-GHo {
571
+ --background-color: var(--hop-Button-ghost-primary-background-color);
572
+ --color: var(--hop-Button-ghost-primary-color);
573
+ --border: var(--hop-Button-ghost-primary-border);
574
+ --spinner-color: var(--hop-Button-ghost-primary-spinner-color);
575
+ }
576
+ .Button-module__hop-Button--ghost-primary___f-GHo[data-hovered],
577
+ .Button-module__hop-Button--ghost-primary___f-GHo[data-focus-visible] {
578
+ --background-color: var(--hop-Button-ghost-primary-background-color-hover);
579
+ --color: var(--hop-Button-ghost-primary-color-hover);
580
+ --border: var(--hop-Button-ghost-primary-border-hover);
581
+ --text-underline: underline;
582
+ }
583
+ .Button-module__hop-Button--ghost-primary___f-GHo[data-pressed] {
584
+ --background-color: var(--hop-Button-ghost-primary-background-color-pressed);
585
+ --color: var(--hop-Button-ghost-primary-color-pressed);
586
+ --border: var(--hop-Button-ghost-primary-border-pressed);
587
+ --text-underline: underline;
588
+ }
589
+ .Button-module__hop-Button--ghost-secondary___732dQ {
590
+ --background-color: var(--hop-Button-ghost-secondary-background-color);
591
+ --color: var(--hop-Button-ghost-secondary-color);
592
+ --border: var(--hop-Button-ghost-secondary-border);
593
+ --spinner-color: var(--hop-Button-ghost-secondary-spinner-color);
594
+ }
595
+ .Button-module__hop-Button--ghost-secondary___732dQ[data-hovered],
596
+ .Button-module__hop-Button--ghost-secondary___732dQ[data-focus-visible] {
597
+ --background-color: var(--hop-Button-ghost-secondary-background-color-hover);
598
+ --color: var(--hop-Button-ghost-secondary-color-hover);
599
+ --border: var(--hop-Button-ghost-secondary-border-hover);
600
+ --text-underline: underline;
601
+ }
602
+ .Button-module__hop-Button--ghost-secondary___732dQ[data-pressed] {
603
+ --background-color: var(--hop-Button-ghost-secondary-background-color-pressed);
604
+ --color: var(--hop-Button-ghost-secondary-color-pressed);
605
+ --border: var(--hop-Button-ghost-secondary-border-pressed);
606
+ --text-underline: underline;
607
+ }
608
+ .Button-module__hop-Button--ghost-danger___mXQFT {
609
+ --background-color: var(--hop-Button-ghost-danger-background-color);
610
+ --color: var(--hop-Button-ghost-danger-color);
611
+ --border: var(--hop-Button-ghost-danger-border);
612
+ --spinner-color: var(--hop-Button-ghost-danger-spinner-color);
613
+ }
614
+ .Button-module__hop-Button--ghost-danger___mXQFT[data-hovered],
615
+ .Button-module__hop-Button--ghost-danger___mXQFT[data-focus-visible] {
616
+ --background-color: var(--hop-Button-ghost-danger-background-color-hover);
617
+ --color: var(--hop-Button-ghost-danger-color-hover);
618
+ --border: var(--hop-Button-ghost-danger-border-hover);
619
+ --text-underline: underline;
620
+ }
621
+ .Button-module__hop-Button--ghost-danger___mXQFT[data-pressed] {
622
+ --background-color: var(--hop-Button-ghost-danger-background-color-pressed);
623
+ --color: var(--hop-Button-ghost-danger-color-pressed);
624
+ --border: var(--hop-Button-ghost-danger-border-pressed);
625
+ --text-underline: underline;
626
+ }
627
+ .Button-module__hop-Button___0Z1G-[data-focus-visible] {
628
+ outline: var(--hop-Button-outline-size) solid var(--hop-Button-focus-ring-color);
629
+ }
630
+ .Button-module__hop-Button___0Z1G-[data-disabled],
631
+ .Button-module__hop-Button--loading___3l487 {
632
+ cursor: not-allowed;
633
+ }
634
+ .Button-module__hop-Button___0Z1G-[data-disabled] {
635
+ --background-color: var(--hop-Button-background-color-disabled);
636
+ --color: var(--hop-Button-color-disabled);
637
+ --border: var(--hop-Button-border-disabled);
638
+ }
639
+ .Button-module__hop-Button___0Z1G-[class*=--ghost][data-disabled] {
640
+ --background-color: var(--hop-Button-ghost-background-color-disabled);
641
+ --color: var(--hop-Button-ghost-color-disabled);
642
+ --border: var(--hop-Button-ghost-border-disabled);
643
+ }
644
+ .Button-module__hop-Button--loading___3l487.Button-module__hop-Button--primary___3Qmg3 {
645
+ --background-color: var(--hop-Button-primary-background-color);
646
+ --color: var(--hop-Button-primary-color);
647
+ --border: var(--hop-Button-primary-border);
648
+ }
649
+ .Button-module__hop-Button--loading___3l487.Button-module__hop-Button--secondary___u3qlM {
650
+ --background-color: var(--hop-Button-secondary-background-color);
651
+ --color: var(--hop-Button-secondary-color);
652
+ --border: var(--hop-Button-secondary-border);
653
+ }
654
+ .Button-module__hop-Button--loading___3l487.Button-module__hop-Button--upsell___Wa1Kb {
655
+ --background-color: var(--hop-Button-upsell-background-color);
656
+ --color: var(--hop-Button-upsell-color);
657
+ --border: var(--hop-Button-upsell-border);
658
+ }
659
+ .Button-module__hop-Button--loading___3l487.Button-module__hop-Button--danger___de-7T {
660
+ --background-color: var(--hop-Button-danger-background-color);
661
+ --color: var(--hop-Button-danger-color);
662
+ --border: var(--hop-Button-danger-border);
663
+ }
664
+ .Button-module__hop-Button--loading___3l487.Button-module__hop-Button--ghost-primary___f-GHo {
665
+ --background-color: var(--hop-Button-ghost-primary-background-color);
666
+ --color: var(--hop-Button-ghost-primary-color);
667
+ --border: var(--hop-Button-ghost-primary-border);
668
+ --text-underline: none;
669
+ }
670
+ .Button-module__hop-Button--loading___3l487.Button-module__hop-Button--ghost-secondary___732dQ {
671
+ --background-color: var(--hop-Button-ghost-secondary-background-color);
672
+ --color: var(--hop-Button-ghost-secondary-color);
673
+ --border: var(--hop-Button-ghost-secondary-border);
674
+ --text-underline: none;
675
+ }
676
+ .Button-module__hop-Button--loading___3l487.Button-module__hop-Button--ghost-danger___mXQFT {
677
+ --background-color: var(--hop-Button-ghost-danger-background-color);
678
+ --color: var(--hop-Button-ghost-danger-color);
679
+ --border: var(--hop-Button-ghost-danger-border);
680
+ --text-underline: none;
681
+ }
682
+ .Button-module__hop-Button__Spinner___Aydmf {
683
+ position: absolute;
684
+ color: var(--spinner-color);
685
+ }
686
+ .Button-module__hop-Button__icon___3H1Sb,
687
+ .Button-module__hop-Button__icon-list___iWElA {
688
+ flex: 0 0 auto;
689
+ justify-self: end;
690
+ order: 1;
691
+ }
692
+ .Button-module__hop-Button__text___ZFtXo {
693
+ user-select: none;
694
+ overflow: visible;
695
+ flex: 0 1 auto;
696
+ order: 2;
697
+ font-weight: var(--hop-font-weight-505);
698
+ text-decoration: var(--text-underline);
699
+ text-underline-offset: 0.125rem;
700
+ text-wrap: nowrap;
701
+ }
702
+ .Button-module__hop-Button__end-icon___nOaCX,
703
+ .Button-module__hop-Button__end-icon-list___ge2sI {
704
+ flex: 0 0 auto;
705
+ order: 3;
706
+ }
707
+ .Button-module__hop-Button___0Z1G- .Button-module__hop-Button__icon-list___iWElA,
708
+ .Button-module__hop-Button___0Z1G- .Button-module__hop-Button__end-icon-list___ge2sI {
709
+ flex-wrap: nowrap;
710
+ }
711
+ .Button-module__hop-Button--loading___3l487.Button-module__hop-Button___0Z1G- > *:not(.Button-module__hop-Button__Spinner___Aydmf) {
712
+ opacity: 0;
713
+ }
714
+
715
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/buttons/src/ButtonGroup.module.css/#css-module-data */
716
+ .ButtonGroup-module__hop-ButtonGroup___LQF3m {
717
+ display: inline-flex;
718
+ flex-wrap: nowrap;
719
+ gap: var(--hop-space-inline-md);
720
+ }
721
+ .ButtonGroup-module__hop-ButtonGroup--horizontal___hTrDu {
722
+ align-items: center;
723
+ }
724
+ .ButtonGroup-module__hop-ButtonGroup--vertical___i-5VQ {
725
+ flex-direction: column;
726
+ gap: var(--hop-space-stack-md);
727
+ justify-content: center;
728
+ }
729
+ .ButtonGroup-module__hop-ButtonGroup--start___EoJmg.ButtonGroup-module__hop-ButtonGroup--vertical___i-5VQ {
730
+ align-items: flex-start;
731
+ }
732
+ .ButtonGroup-module__hop-ButtonGroup--center___cwZyh.ButtonGroup-module__hop-ButtonGroup--vertical___i-5VQ {
733
+ align-items: center;
734
+ }
735
+ .ButtonGroup-module__hop-ButtonGroup--end___BMbbc.ButtonGroup-module__hop-ButtonGroup--vertical___i-5VQ {
736
+ align-items: flex-end;
737
+ }
738
+ .ButtonGroup-module__hop-ButtonGroup--start___EoJmg.ButtonGroup-module__hop-ButtonGroup--horizontal___hTrDu {
739
+ justify-content: flex-start;
740
+ }
741
+ .ButtonGroup-module__hop-ButtonGroup--center___cwZyh.ButtonGroup-module__hop-ButtonGroup--horizontal___hTrDu {
742
+ justify-content: center;
743
+ }
744
+ .ButtonGroup-module__hop-ButtonGroup--end___BMbbc.ButtonGroup-module__hop-ButtonGroup--horizontal___hTrDu {
745
+ justify-content: flex-end;
746
+ }
747
+ .ButtonGroup-module__hop-ButtonGroup--wrap___TJ4km {
748
+ flex-wrap: wrap;
749
+ }
750
+ .ButtonGroup-module__hop-ButtonGroup--fluid___gXntW {
751
+ inline-size: 100%;
752
+ }
753
+
754
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/buttons/src/EmbeddedButton.module.css/#css-module-data */
755
+ .EmbeddedButton-module__hop-EmbeddedButton___xYGNu {
756
+ --hop-EmbeddedButton-border-radius: var(--hop-shape-rounded-md);
757
+ --hop-EmbeddedButton-focus-ring-color: var(--hop-primary-border-focus);
758
+ --hop-EmbeddedButton-effect-border-radius: var(--hop-shape-circle);
759
+ --hop-EmbeddedButton-effect-square-border-radius: var(--hop-shape-rounded-sm);
760
+ --hop-EmbeddedButton-md-height: 1.5rem;
761
+ --hop-EmbeddedButton-md-width: 1.5rem;
762
+ --hop-EmbeddedButton-md-effect-height: 1rem;
763
+ --hop-EmbeddedButton-md-effect-width: 1rem;
764
+ --hop-EmbeddedButton-lg-height: 1.5rem;
765
+ --hop-EmbeddedButton-lg-width: 1.5rem;
766
+ --hop-EmbeddedButton-lg-effect-height: 1.5rem;
767
+ --hop-EmbeddedButton-lg-effect-width: 1.5rem;
768
+ --hop-EmbeddedButton-neutral-color: var(--hop-neutral-icon-weak);
769
+ --hop-EmbeddedButton-neutral-color-hovered: var(--hop-neutral-icon-weak-hover);
770
+ --hop-EmbeddedButton-neutral-color-focused: var(--hop-neutral-icon-weak-hover);
771
+ --hop-EmbeddedButton-neutral-color-pressed: var(--hop-neutral-icon-weak-press);
772
+ --hop-EmbeddedButton-neutral-color-disabled: var(--hop-neutral-icon-disabled);
773
+ --hop-EmbeddedButton-neutral-effect-background-color: transparent;
774
+ --hop-EmbeddedButton-neutral-effect-background-color-hovered: var(--hop-neutral-surface-weak-hover);
775
+ --hop-EmbeddedButton-neutral-effect-background-color-focused: var(--hop-neutral-surface-weak-hover);
776
+ --hop-EmbeddedButton-neutral-effect-background-color-pressed: var(--hop-neutral-surface-weak-press);
777
+ --hop-EmbeddedButton-neutral-effect-background-color-disabled: transparent;
778
+ --hop-EmbeddedButton-subdued-color: var(--hop-neutral-icon-weak);
779
+ --hop-EmbeddedButton-subdued-color-hovered: var(--hop-neutral-icon-weak-hover);
780
+ --hop-EmbeddedButton-subdued-color-focused: var(--hop-neutral-icon-weak-hover);
781
+ --hop-EmbeddedButton-subdued-color-pressed: var(--hop-neutral-icon-weak-press);
782
+ --hop-EmbeddedButton-subdued-color-disabled: var(--hop-neutral-icon-disabled);
783
+ --hop-EmbeddedButton-subdued-effect-background-color: transparent;
784
+ --hop-EmbeddedButton-subdued-effect-background-color-hovered: var(--hop-neutral-surface-weak-hover);
785
+ --hop-EmbeddedButton-subdued-effect-background-color-focused: var(--hop-neutral-surface-weak-hover);
786
+ --hop-EmbeddedButton-subdued-effect-background-color-pressed: var(--hop-neutral-surface-weak-press);
787
+ --hop-EmbeddedButton-subdued-effect-background-color-disabled: transparent;
788
+ --hop-EmbeddedButton-progress-color: var(--hop-status-progress-icon);
789
+ --hop-EmbeddedButton-progress-color-hovered: var(--hop-status-progress-icon-hover);
790
+ --hop-EmbeddedButton-progress-color-focused: var(--hop-status-progress-icon-hover);
791
+ --hop-EmbeddedButton-progress-color-pressed: var(--hop-status-progress-icon-press);
792
+ --hop-EmbeddedButton-progress-color-disabled: var(--hop-status-progress-icon-disabled);
793
+ --hop-EmbeddedButton-progress-effect-background-color: transparent;
794
+ --hop-EmbeddedButton-progress-effect-background-color-hovered: var(--hop-status-progress-surface-hover);
795
+ --hop-EmbeddedButton-progress-effect-background-color-focused: var(--hop-status-progress-surface-hover);
796
+ --hop-EmbeddedButton-progress-effect-background-color-pressed: var(--hop-status-progress-surface-press);
797
+ --hop-EmbeddedButton-progress-effect-background-color-disabled: transparent;
798
+ --hop-EmbeddedButton-positive-color: var(--hop-status-positive-icon);
799
+ --hop-EmbeddedButton-positive-color-hovered: var(--hop-status-positive-icon-hover);
800
+ --hop-EmbeddedButton-positive-color-focused: var(--hop-status-positive-icon-hover);
801
+ --hop-EmbeddedButton-positive-color-pressed: var(--hop-status-positive-icon-press);
802
+ --hop-EmbeddedButton-positive-color-disabled: var(--hop-status-positive-icon-disabled);
803
+ --hop-EmbeddedButton-positive-effect-background-color: transparent;
804
+ --hop-EmbeddedButton-positive-effect-background-color-hovered: var(--hop-status-positive-surface-hover);
805
+ --hop-EmbeddedButton-positive-effect-background-color-focused: var(--hop-status-positive-surface-hover);
806
+ --hop-EmbeddedButton-positive-effect-background-color-pressed: var(--hop-status-positive-surface-press);
807
+ --hop-EmbeddedButton-positive-effect-background-color-disabled: transparent;
808
+ --hop-EmbeddedButton-caution-color: var(--hop-status-caution-icon);
809
+ --hop-EmbeddedButton-caution-color-hovered: var(--hop-status-caution-icon-hover);
810
+ --hop-EmbeddedButton-caution-color-focused: var(--hop-status-caution-icon-hover);
811
+ --hop-EmbeddedButton-caution-color-pressed: var(--hop-status-caution-icon-press);
812
+ --hop-EmbeddedButton-caution-color-disabled: var(--hop-status-caution-icon-disabled);
813
+ --hop-EmbeddedButton-caution-effect-background-color: transparent;
814
+ --hop-EmbeddedButton-caution-effect-background-color-hovered: var(--hop-status-caution-surface-hover);
815
+ --hop-EmbeddedButton-caution-effect-background-color-focused: var(--hop-status-caution-surface-hover);
816
+ --hop-EmbeddedButton-caution-effect-background-color-pressed: var(--hop-status-caution-surface-press);
817
+ --hop-EmbeddedButton-caution-effect-background-color-disabled: transparent;
818
+ --hop-EmbeddedButton-negative-color: var(--hop-status-negative-icon);
819
+ --hop-EmbeddedButton-negative-color-hovered: var(--hop-status-negative-icon-hover);
820
+ --hop-EmbeddedButton-negative-color-focused: var(--hop-status-negative-icon-hover);
821
+ --hop-EmbeddedButton-negative-color-pressed: var(--hop-status-negative-icon-press);
822
+ --hop-EmbeddedButton-negative-color-disabled: var(--hop-status-negative-icon-disabled);
823
+ --hop-EmbeddedButton-negative-effect-background-color: transparent;
824
+ --hop-EmbeddedButton-negative-effect-background-color-hovered: var(--hop-status-negative-surface-hover);
825
+ --hop-EmbeddedButton-negative-effect-background-color-focused: var(--hop-status-negative-surface-hover);
826
+ --hop-EmbeddedButton-negative-effect-background-color-pressed: var(--hop-status-negative-surface-press);
827
+ --hop-EmbeddedButton-negative-effect-background-color-disabled: transparent;
828
+ --hop-EmbeddedButton-option1-color: var(--hop-status-option1-icon);
829
+ --hop-EmbeddedButton-option1-color-hovered: var(--hop-status-option1-icon-hover);
830
+ --hop-EmbeddedButton-option1-color-focused: var(--hop-status-option1-icon-hover);
831
+ --hop-EmbeddedButton-option1-color-pressed: var(--hop-status-option1-icon-press);
832
+ --hop-EmbeddedButton-option1-color-disabled: var(--hop-status-option1-icon-disabled);
833
+ --hop-EmbeddedButton-option1-effect-background-color: transparent;
834
+ --hop-EmbeddedButton-option1-effect-background-color-hovered: var(--hop-status-option1-surface-hover);
835
+ --hop-EmbeddedButton-option1-effect-background-color-focused: var(--hop-status-option1-surface-hover);
836
+ --hop-EmbeddedButton-option1-effect-background-color-pressed: var(--hop-status-option1-surface-press);
837
+ --hop-EmbeddedButton-option1-effect-background-color-disabled: transparent;
838
+ --hop-EmbeddedButton-option2-color: var(--hop-status-option2-icon);
839
+ --hop-EmbeddedButton-option2-color-hovered: var(--hop-status-option2-icon-hover);
840
+ --hop-EmbeddedButton-option2-color-focused: var(--hop-status-option2-icon-hover);
841
+ --hop-EmbeddedButton-option2-color-pressed: var(--hop-status-option2-icon-press);
842
+ --hop-EmbeddedButton-option2-color-disabled: var(--hop-status-option2-icon-disabled);
843
+ --hop-EmbeddedButton-option2-effect-background-color: transparent;
844
+ --hop-EmbeddedButton-option2-effect-background-color-hovered: var(--hop-status-option2-surface-hover);
845
+ --hop-EmbeddedButton-option2-effect-background-color-focused: var(--hop-status-option2-surface-hover);
846
+ --hop-EmbeddedButton-option2-effect-background-color-pressed: var(--hop-status-option2-surface-press);
847
+ --hop-EmbeddedButton-option2-effect-background-color-disabled: transparent;
848
+ --hop-EmbeddedButton-option3-color: var(--hop-status-option3-icon);
849
+ --hop-EmbeddedButton-option3-color-hovered: var(--hop-status-option3-icon-hover);
850
+ --hop-EmbeddedButton-option3-color-focused: var(--hop-status-option3-icon-hover);
851
+ --hop-EmbeddedButton-option3-color-pressed: var(--hop-status-option3-icon-press);
852
+ --hop-EmbeddedButton-option3-color-disabled: var(--hop-status-option3-icon-disabled);
853
+ --hop-EmbeddedButton-option3-effect-background-color: transparent;
854
+ --hop-EmbeddedButton-option3-effect-background-color-hovered: var(--hop-status-option3-surface-hover);
855
+ --hop-EmbeddedButton-option3-effect-background-color-focused: var(--hop-status-option3-surface-hover);
856
+ --hop-EmbeddedButton-option3-effect-background-color-pressed: var(--hop-status-option3-surface-press);
857
+ --hop-EmbeddedButton-option3-effect-background-color-disabled: transparent;
858
+ --hop-EmbeddedButton-option4-color: var(--hop-status-option4-icon);
859
+ --hop-EmbeddedButton-option4-color-hovered: var(--hop-status-option4-icon-hover);
860
+ --hop-EmbeddedButton-option4-color-focused: var(--hop-status-option4-icon-hover);
861
+ --hop-EmbeddedButton-option4-color-pressed: var(--hop-status-option4-icon-press);
862
+ --hop-EmbeddedButton-option4-color-disabled: var(--hop-status-option4-icon-disabled);
863
+ --hop-EmbeddedButton-option4-effect-background-color: transparent;
864
+ --hop-EmbeddedButton-option4-effect-background-color-hovered: var(--hop-status-option4-surface-hover);
865
+ --hop-EmbeddedButton-option4-effect-background-color-focused: var(--hop-status-option4-surface-hover);
866
+ --hop-EmbeddedButton-option4-effect-background-color-pressed: var(--hop-status-option4-surface-press);
867
+ --hop-EmbeddedButton-option4-effect-background-color-disabled: transparent;
868
+ --hop-EmbeddedButton-option5-color: var(--hop-status-option5-icon);
869
+ --hop-EmbeddedButton-option5-color-hovered: var(--hop-status-option5-icon-hover);
870
+ --hop-EmbeddedButton-option5-color-focused: var(--hop-status-option5-icon-hover);
871
+ --hop-EmbeddedButton-option5-color-pressed: var(--hop-status-option5-icon-press);
872
+ --hop-EmbeddedButton-option5-color-disabled: var(--hop-status-option5-icon-disabled);
873
+ --hop-EmbeddedButton-option5-effect-background-color: transparent;
874
+ --hop-EmbeddedButton-option5-effect-background-color-hovered: var(--hop-status-option5-surface-hover);
875
+ --hop-EmbeddedButton-option5-effect-background-color-focused: var(--hop-status-option5-surface-hover);
876
+ --hop-EmbeddedButton-option5-effect-background-color-pressed: var(--hop-status-option5-surface-press);
877
+ --hop-EmbeddedButton-option5-effect-background-color-disabled: transparent;
878
+ --hop-EmbeddedButton-option6-color: var(--hop-status-option6-icon);
879
+ --hop-EmbeddedButton-option6-color-hovered: var(--hop-status-option6-icon-hover);
880
+ --hop-EmbeddedButton-option6-color-focused: var(--hop-status-option6-icon-hover);
881
+ --hop-EmbeddedButton-option6-color-pressed: var(--hop-status-option6-icon-press);
882
+ --hop-EmbeddedButton-option6-color-disabled: var(--hop-status-option6-icon-disabled);
883
+ --hop-EmbeddedButton-option6-effect-background-color: transparent;
884
+ --hop-EmbeddedButton-option6-effect-background-color-hovered: var(--hop-status-option6-surface-hover);
885
+ --hop-EmbeddedButton-option6-effect-background-color-focused: var(--hop-status-option6-surface-hover);
886
+ --hop-EmbeddedButton-option6-effect-background-color-pressed: var(--hop-status-option6-surface-press);
887
+ --hop-EmbeddedButton-option6-effect-background-color-disabled: transparent;
888
+ --hop-EmbeddedButton-selected-color: var(--hop-neutral-icon-weak-selected);
889
+ --hop-EmbeddedButton-selected-effect-background-color: var(--hop-neutral-surface-weak-selected);
890
+ --spinner: var(--hop-primary-icon-strong);
891
+ --padding-inline: 0;
892
+ --padding-block: 0;
893
+ --effect-background-color: var(--hop-EmbeddedButton-neutral-effect-background-color);
894
+ --color: var(--hop-EmbeddedButton-neutral-color);
895
+ --transition: var(--hop-easing-duration-2) var(--hop-easing-productive);
896
+ --effect-border-radius: var(--hop-EmbeddedButton-effect-border-radius);
897
+ --focus-ring-size: 0.125rem;
898
+ cursor: pointer;
899
+ position: relative;
900
+ overflow: hidden;
901
+ display: flex;
902
+ flex-shrink: 0;
903
+ align-items: center;
904
+ justify-content: center;
905
+ box-sizing: border-box;
906
+ inline-size: var(--inline-size);
907
+ block-size: var(--block-size);
908
+ padding-block: var(--padding-block);
909
+ padding-inline: var(--padding-inline);
910
+ color: var(--color);
911
+ text-decoration: none;
912
+ white-space: nowrap;
913
+ background: none;
914
+ border: none;
915
+ border-radius: var(--hop-EmbeddedButton-border-radius);
916
+ outline: none;
917
+ transition: color var(--transition);
918
+ }
919
+ .EmbeddedButton-module__hop-EmbeddedButton___xYGNu::before {
920
+ content: "";
921
+ position: absolute;
922
+ inset-block-start: 50%;
923
+ inset-inline-start: 50%;
924
+ transform: translate(-50%, -50%);
925
+ display: block;
926
+ inline-size: var(--effect-inline-size);
927
+ block-size: var(--effect-block-size);
928
+ background-color: var(--effect-background-color);
929
+ border-radius: var(--effect-border-radius);
930
+ transition: background-color var(--transition);
931
+ }
932
+ .EmbeddedButton-module__hop-EmbeddedButton___xYGNu[data-square] {
933
+ --effect-border-radius: var(--hop-EmbeddedButton-effect-square-border-radius);
934
+ }
935
+ .EmbeddedButton-module__hop-EmbeddedButton--md___rMja7 {
936
+ --inline-size: var(--hop-EmbeddedButton-md-width);
937
+ --block-size: var(--hop-EmbeddedButton-md-height);
938
+ --focus-ring-offset: calc(-1 * var(--focus-ring-size));
939
+ }
940
+ .EmbeddedButton-module__hop-EmbeddedButton--lg___6Doe- {
941
+ --inline-size: var(--hop-EmbeddedButton-lg-width);
942
+ --block-size: var(--hop-EmbeddedButton-lg-height);
943
+ --focus-ring-offset: 0;
944
+ }
945
+ .EmbeddedButton-module__hop-EmbeddedButton--md___rMja7::before {
946
+ --effect-inline-size: var(--hop-EmbeddedButton-md-effect-width);
947
+ --effect-block-size: var(--hop-EmbeddedButton-md-effect-height);
948
+ }
949
+ .EmbeddedButton-module__hop-EmbeddedButton--lg___6Doe-::before {
950
+ --effect-inline-size: var(--hop-EmbeddedButton-lg-effect-width);
951
+ --effect-block-size: var(--hop-EmbeddedButton-lg-effect-height);
952
+ }
953
+ .EmbeddedButton-module__hop-EmbeddedButton--neutral___BeN5r {
954
+ --color: var(--hop-EmbeddedButton-neutral-color);
955
+ --effect-background-color: var(--hop-EmbeddedButton-neutral-effect-background-color);
956
+ }
957
+ .EmbeddedButton-module__hop-EmbeddedButton--subdued___yuQCr {
958
+ --color: var(--hop-EmbeddedButton-subdued-color);
959
+ --effect-background-color: var(--hop-EmbeddedButton-subdued-effect-background-color);
960
+ }
961
+ .EmbeddedButton-module__hop-EmbeddedButton--progress___bUJKv {
962
+ --color: var(--hop-EmbeddedButton-progress-color);
963
+ --effect-background-color: var(--hop-EmbeddedButton-progress-effect-background-color);
964
+ }
965
+ .EmbeddedButton-module__hop-EmbeddedButton--positive___Qaqgf {
966
+ --color: var(--hop-EmbeddedButton-positive-color);
967
+ --effect-background-color: var(--hop-EmbeddedButton-positive-effect-background-color);
968
+ }
969
+ .EmbeddedButton-module__hop-EmbeddedButton--caution___aKBZ0 {
970
+ --color: var(--hop-EmbeddedButton-caution-color);
971
+ --effect-background-color: var(--hop-EmbeddedButton-caution-effect-background-color);
972
+ }
973
+ .EmbeddedButton-module__hop-EmbeddedButton--negative___deFvU {
974
+ --color: var(--hop-EmbeddedButton-negative-color);
975
+ --effect-background-color: var(--hop-EmbeddedButton-negative-effect-background-color);
976
+ }
977
+ .EmbeddedButton-module__hop-EmbeddedButton--option1___sSKL9 {
978
+ --color: var(--hop-EmbeddedButton-option1-color);
979
+ --effect-background-color: var(--hop-EmbeddedButton-option1-effect-background-color);
980
+ }
981
+ .EmbeddedButton-module__hop-EmbeddedButton--option2___68Bh2 {
982
+ --color: var(--hop-EmbeddedButton-option2-color);
983
+ --effect-background-color: var(--hop-EmbeddedButton-option2-effect-background-color);
984
+ }
985
+ .EmbeddedButton-module__hop-EmbeddedButton--option3___PNksw {
986
+ --color: var(--hop-EmbeddedButton-option3-color);
987
+ --effect-background-color: var(--hop-EmbeddedButton-option3-effect-background-color);
988
+ }
989
+ .EmbeddedButton-module__hop-EmbeddedButton--option4___b77U3 {
990
+ --color: var(--hop-EmbeddedButton-option4-color);
991
+ --effect-background-color: var(--hop-EmbeddedButton-option4-effect-background-color);
992
+ }
993
+ .EmbeddedButton-module__hop-EmbeddedButton--option5___tqsSF {
994
+ --color: var(--hop-EmbeddedButton-option5-color);
995
+ --effect-background-color: var(--hop-EmbeddedButton-option5-effect-background-color);
996
+ }
997
+ .EmbeddedButton-module__hop-EmbeddedButton--option6___27kdo {
998
+ --color: var(--hop-EmbeddedButton-option6-color);
999
+ --effect-background-color: var(--hop-EmbeddedButton-option6-effect-background-color);
1000
+ }
1001
+ .EmbeddedButton-module__hop-EmbeddedButton___xYGNu[data-selected] {
1002
+ --color: var(--hop-EmbeddedButton-selected-color);
1003
+ --effect-background-color: var(--hop-EmbeddedButton-selected-effect-background-color);
1004
+ }
1005
+ .EmbeddedButton-module__hop-EmbeddedButton___xYGNu[data-focus-visible] {
1006
+ outline: var(--focus-ring-size) solid var(--hop-EmbeddedButton-focus-ring-color);
1007
+ outline-offset: var(--focus-ring-offset);
1008
+ }
1009
+ .EmbeddedButton-module__hop-EmbeddedButton___xYGNu[data-disabled] {
1010
+ cursor: not-allowed;
1011
+ }
1012
+ .EmbeddedButton-module__hop-EmbeddedButton--neutral___BeN5r[data-hovered] {
1013
+ --effect-background-color: var(--hop-EmbeddedButton-neutral-effect-background-color-hovered);
1014
+ --color: var(--hop-EmbeddedButton-neutral-color-hovered);
1015
+ }
1016
+ .EmbeddedButton-module__hop-EmbeddedButton--neutral___BeN5r[data-focus-visible] {
1017
+ --effect-background-color: var(--hop-EmbeddedButton-neutral-effect-background-color-focused);
1018
+ --color: var(--hop-EmbeddedButton-neutral-color-focused);
1019
+ }
1020
+ .EmbeddedButton-module__hop-EmbeddedButton--neutral___BeN5r[data-pressed] {
1021
+ --effect-background-color: var(--hop-EmbeddedButton-neutral-effect-background-color-pressed);
1022
+ --color: var(--hop-EmbeddedButton-neutral-color-pressed);
1023
+ }
1024
+ .EmbeddedButton-module__hop-EmbeddedButton--neutral___BeN5r[data-disabled] {
1025
+ --effect-background-color: var(--hop-EmbeddedButton-neutral-effect-background-color-disabled);
1026
+ --color: var(--hop-EmbeddedButton-neutral-color-disabled);
1027
+ }
1028
+ .EmbeddedButton-module__hop-EmbeddedButton--subdued___yuQCr[data-hovered] {
1029
+ --effect-background-color: var(--hop-EmbeddedButton-subdued-effect-background-color-hovered);
1030
+ --color: var(--hop-EmbeddedButton-subdued-color-hovered);
1031
+ }
1032
+ .EmbeddedButton-module__hop-EmbeddedButton--subdued___yuQCr[data-focus-visible] {
1033
+ --effect-background-color: var(--hop-EmbeddedButton-subdued-effect-background-color-focused);
1034
+ --color: var(--hop-EmbeddedButton-subdued-color-focused);
1035
+ }
1036
+ .EmbeddedButton-module__hop-EmbeddedButton--subdued___yuQCr[data-pressed] {
1037
+ --effect-background-color: var(--hop-EmbeddedButton-subdued-effect-background-color-pressed);
1038
+ --color: var(--hop-EmbeddedButton-subdued-color-pressed);
1039
+ }
1040
+ .EmbeddedButton-module__hop-EmbeddedButton--subdued___yuQCr[data-disabled] {
1041
+ --effect-background-color: var(--hop-EmbeddedButton-subdued-effect-background-color-disabled);
1042
+ --color: var(--hop-EmbeddedButton-subdued-color-disabled);
1043
+ }
1044
+ .EmbeddedButton-module__hop-EmbeddedButton--progress___bUJKv[data-hovered] {
1045
+ --effect-background-color: var(--hop-EmbeddedButton-progress-effect-background-color-hovered);
1046
+ --color: var(--hop-EmbeddedButton-progress-color-hovered);
1047
+ }
1048
+ .EmbeddedButton-module__hop-EmbeddedButton--progress___bUJKv[data-focus-visible] {
1049
+ --effect-background-color: var(--hop-EmbeddedButton-progress-effect-background-color-focused);
1050
+ --color: var(--hop-EmbeddedButton-progress-color-focused);
1051
+ }
1052
+ .EmbeddedButton-module__hop-EmbeddedButton--progress___bUJKv[data-pressed] {
1053
+ --effect-background-color: var(--hop-EmbeddedButton-progress-effect-background-color-pressed);
1054
+ --color: var(--hop-EmbeddedButton-progress-color-pressed);
1055
+ }
1056
+ .EmbeddedButton-module__hop-EmbeddedButton--progress___bUJKv[data-disabled] {
1057
+ --effect-background-color: var(--hop-EmbeddedButton-progress-effect-background-color-disabled);
1058
+ --color: var(--hop-EmbeddedButton-progress-color-disabled);
1059
+ }
1060
+ .EmbeddedButton-module__hop-EmbeddedButton--positive___Qaqgf[data-hovered] {
1061
+ --effect-background-color: var(--hop-EmbeddedButton-positive-effect-background-color-hovered);
1062
+ --color: var(--hop-EmbeddedButton-positive-color-hovered);
1063
+ }
1064
+ .EmbeddedButton-module__hop-EmbeddedButton--positive___Qaqgf[data-focus-visible] {
1065
+ --effect-background-color: var(--hop-EmbeddedButton-positive-effect-background-color-focused);
1066
+ --color: var(--hop-EmbeddedButton-positive-color-focused);
1067
+ }
1068
+ .EmbeddedButton-module__hop-EmbeddedButton--positive___Qaqgf[data-pressed] {
1069
+ --effect-background-color: var(--hop-EmbeddedButton-positive-effect-background-color-pressed);
1070
+ --color: var(--hop-EmbeddedButton-positive-color-pressed);
1071
+ }
1072
+ .EmbeddedButton-module__hop-EmbeddedButton--positive___Qaqgf[data-disabled] {
1073
+ --effect-background-color: var(--hop-EmbeddedButton-positive-effect-background-color-disabled);
1074
+ --color: var(--hop-EmbeddedButton-positive-color-disabled);
1075
+ }
1076
+ .EmbeddedButton-module__hop-EmbeddedButton--caution___aKBZ0[data-hovered] {
1077
+ --effect-background-color: var(--hop-EmbeddedButton-caution-effect-background-color-hovered);
1078
+ --color: var(--hop-EmbeddedButton-caution-color-hovered);
1079
+ }
1080
+ .EmbeddedButton-module__hop-EmbeddedButton--caution___aKBZ0[data-focus-visible] {
1081
+ --effect-background-color: var(--hop-EmbeddedButton-caution-effect-background-color-focused);
1082
+ --color: var(--hop-EmbeddedButton-caution-color-focused);
1083
+ }
1084
+ .EmbeddedButton-module__hop-EmbeddedButton--caution___aKBZ0[data-pressed] {
1085
+ --effect-background-color: var(--hop-EmbeddedButton-caution-effect-background-color-pressed);
1086
+ --color: var(--hop-EmbeddedButton-caution-color-pressed);
1087
+ }
1088
+ .EmbeddedButton-module__hop-EmbeddedButton--caution___aKBZ0[data-disabled] {
1089
+ --effect-background-color: var(--hop-EmbeddedButton-caution-effect-background-color-disabled);
1090
+ --color: var(--hop-EmbeddedButton-caution-color-disabled);
1091
+ }
1092
+ .EmbeddedButton-module__hop-EmbeddedButton--negative___deFvU[data-hovered] {
1093
+ --effect-background-color: var(--hop-EmbeddedButton-negative-effect-background-color-hovered);
1094
+ --color: var(--hop-EmbeddedButton-negative-color-hovered);
1095
+ }
1096
+ .EmbeddedButton-module__hop-EmbeddedButton--negative___deFvU[data-focus-visible] {
1097
+ --effect-background-color: var(--hop-EmbeddedButton-negative-effect-background-color-focused);
1098
+ --color: var(--hop-EmbeddedButton-negative-color-focused);
1099
+ }
1100
+ .EmbeddedButton-module__hop-EmbeddedButton--negative___deFvU[data-pressed] {
1101
+ --effect-background-color: var(--hop-EmbeddedButton-negative-effect-background-color-pressed);
1102
+ --color: var(--hop-EmbeddedButton-negative-color-pressed);
1103
+ }
1104
+ .EmbeddedButton-module__hop-EmbeddedButton--negative___deFvU[data-disabled] {
1105
+ --effect-background-color: var(--hop-EmbeddedButton-negative-effect-background-color-disabled);
1106
+ --color: var(--hop-EmbeddedButton-negative-color-disabled);
1107
+ }
1108
+ .EmbeddedButton-module__hop-EmbeddedButton--option1___sSKL9[data-hovered] {
1109
+ --effect-background-color: var(--hop-EmbeddedButton-option1-effect-background-color-hovered);
1110
+ --color: var(--hop-EmbeddedButton-option1-color-hovered);
1111
+ }
1112
+ .EmbeddedButton-module__hop-EmbeddedButton--option1___sSKL9[data-focus-visible] {
1113
+ --effect-background-color: var(--hop-EmbeddedButton-option1-effect-background-color-focused);
1114
+ --color: var(--hop-EmbeddedButton-option1-color-focused);
1115
+ }
1116
+ .EmbeddedButton-module__hop-EmbeddedButton--option1___sSKL9[data-pressed] {
1117
+ --effect-background-color: var(--hop-EmbeddedButton-option1-effect-background-color-pressed);
1118
+ --color: var(--hop-EmbeddedButton-option1-color-pressed);
1119
+ }
1120
+ .EmbeddedButton-module__hop-EmbeddedButton--option1___sSKL9[data-disabled] {
1121
+ --effect-background-color: var(--hop-EmbeddedButton-option1-effect-background-color-disabled);
1122
+ --color: var(--hop-EmbeddedButton-option1-color-disabled);
1123
+ }
1124
+ .EmbeddedButton-module__hop-EmbeddedButton--option2___68Bh2[data-hovered] {
1125
+ --effect-background-color: var(--hop-EmbeddedButton-option2-effect-background-color-hovered);
1126
+ --color: var(--hop-EmbeddedButton-option2-color-hovered);
1127
+ }
1128
+ .EmbeddedButton-module__hop-EmbeddedButton--option2___68Bh2[data-focus-visible] {
1129
+ --effect-background-color: var(--hop-EmbeddedButton-option2-effect-background-color-focused);
1130
+ --color: var(--hop-EmbeddedButton-option2-color-focused);
1131
+ }
1132
+ .EmbeddedButton-module__hop-EmbeddedButton--option2___68Bh2[data-pressed] {
1133
+ --effect-background-color: var(--hop-EmbeddedButton-option2-effect-background-color-pressed);
1134
+ --color: var(--hop-EmbeddedButton-option2-color-pressed);
1135
+ }
1136
+ .EmbeddedButton-module__hop-EmbeddedButton--option2___68Bh2[data-disabled] {
1137
+ --effect-background-color: var(--hop-EmbeddedButton-option2-effect-background-color-disabled);
1138
+ --color: var(--hop-EmbeddedButton-option2-color-disabled);
1139
+ }
1140
+ .EmbeddedButton-module__hop-EmbeddedButton--option3___PNksw[data-hovered] {
1141
+ --effect-background-color: var(--hop-EmbeddedButton-option3-effect-background-color-hovered);
1142
+ --color: var(--hop-EmbeddedButton-option3-color-hovered);
1143
+ }
1144
+ .EmbeddedButton-module__hop-EmbeddedButton--option3___PNksw[data-focus-visible] {
1145
+ --effect-background-color: var(--hop-EmbeddedButton-option3-effect-background-color-focused);
1146
+ --color: var(--hop-EmbeddedButton-option3-color-focused);
1147
+ }
1148
+ .EmbeddedButton-module__hop-EmbeddedButton--option3___PNksw[data-pressed] {
1149
+ --effect-background-color: var(--hop-EmbeddedButton-option3-effect-background-color-pressed);
1150
+ --color: var(--hop-EmbeddedButton-option3-color-pressed);
1151
+ }
1152
+ .EmbeddedButton-module__hop-EmbeddedButton--option3___PNksw[data-disabled] {
1153
+ --effect-background-color: var(--hop-EmbeddedButton-option3-effect-background-color-disabled);
1154
+ --color: var(--hop-EmbeddedButton-option3-color-disabled);
1155
+ }
1156
+ .EmbeddedButton-module__hop-EmbeddedButton--option4___b77U3[data-hovered] {
1157
+ --effect-background-color: var(--hop-EmbeddedButton-option4-effect-background-color-hovered);
1158
+ --color: var(--hop-EmbeddedButton-option4-color-hovered);
1159
+ }
1160
+ .EmbeddedButton-module__hop-EmbeddedButton--option4___b77U3[data-focus-visible] {
1161
+ --effect-background-color: var(--hop-EmbeddedButton-option4-effect-background-color-focused);
1162
+ --color: var(--hop-EmbeddedButton-option4-color-focused);
1163
+ }
1164
+ .EmbeddedButton-module__hop-EmbeddedButton--option4___b77U3[data-pressed] {
1165
+ --effect-background-color: var(--hop-EmbeddedButton-option4-effect-background-color-pressed);
1166
+ --color: var(--hop-EmbeddedButton-option4-color-pressed);
1167
+ }
1168
+ .EmbeddedButton-module__hop-EmbeddedButton--option4___b77U3[data-disabled] {
1169
+ --effect-background-color: var(--hop-EmbeddedButton-option4-effect-background-color-disabled);
1170
+ --color: var(--hop-EmbeddedButton-option4-color-disabled);
1171
+ }
1172
+ .EmbeddedButton-module__hop-EmbeddedButton--option5___tqsSF[data-hovered] {
1173
+ --effect-background-color: var(--hop-EmbeddedButton-option5-effect-background-color-hovered);
1174
+ --color: var(--hop-EmbeddedButton-option5-color-hovered);
1175
+ }
1176
+ .EmbeddedButton-module__hop-EmbeddedButton--option5___tqsSF[data-focus-visible] {
1177
+ --effect-background-color: var(--hop-EmbeddedButton-option5-effect-background-color-focused);
1178
+ --color: var(--hop-EmbeddedButton-option5-color-focused);
1179
+ }
1180
+ .EmbeddedButton-module__hop-EmbeddedButton--option5___tqsSF[data-pressed] {
1181
+ --effect-background-color: var(--hop-EmbeddedButton-option5-effect-background-color-pressed);
1182
+ --color: var(--hop-EmbeddedButton-option5-color-pressed);
1183
+ }
1184
+ .EmbeddedButton-module__hop-EmbeddedButton--option5___tqsSF[data-disabled] {
1185
+ --effect-background-color: var(--hop-EmbeddedButton-option5-effect-background-color-disabled);
1186
+ --color: var(--hop-EmbeddedButton-option5-color-disabled);
1187
+ }
1188
+ .EmbeddedButton-module__hop-EmbeddedButton--option6___27kdo[data-hovered] {
1189
+ --effect-background-color: var(--hop-EmbeddedButton-option6-effect-background-color-hovered);
1190
+ --color: var(--hop-EmbeddedButton-option6-color-hovered);
1191
+ }
1192
+ .EmbeddedButton-module__hop-EmbeddedButton--option6___27kdo[data-focus-visible] {
1193
+ --effect-background-color: var(--hop-EmbeddedButton-option6-effect-background-color-focused);
1194
+ --color: var(--hop-EmbeddedButton-option6-color-focused);
1195
+ }
1196
+ .EmbeddedButton-module__hop-EmbeddedButton--option6___27kdo[data-pressed] {
1197
+ --effect-background-color: var(--hop-EmbeddedButton-option6-effect-background-color-pressed);
1198
+ --color: var(--hop-EmbeddedButton-option6-color-pressed);
1199
+ }
1200
+ .EmbeddedButton-module__hop-EmbeddedButton--option6___27kdo[data-disabled] {
1201
+ --effect-background-color: var(--hop-EmbeddedButton-option6-effect-background-color-disabled);
1202
+ --color: var(--hop-EmbeddedButton-option6-color-disabled);
1203
+ }
1204
+ .EmbeddedButton-module__hop-EmbeddedButton__icon___LgoT6 {
1205
+ position: relative;
1206
+ }
1207
+
1208
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/buttons/src/CloseButton.module.css/#css-module-data */
1209
+ button.CloseButton-module__hop-CloseButton___i-yPG {
1210
+ --hop-CloseButton-margin-top: 0rem;
1211
+ --hop-CloseButton-padding: 0rem;
1212
+ --hop-CloseButton-width: fit-content;
1213
+ --hop-CloseButton-height: fit-content;
1214
+ inline-size: var(--hop-CloseButton-width);
1215
+ block-size: var(--hop-CloseButton-height);
1216
+ margin-block-start: var(--hop-CloseButton-margin-top);
1217
+ padding: var(--hop-CloseButton-padding);
1218
+ }
1219
+
1220
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/buttons/src/LinkButton.module.css/#css-module-data */
1221
+ .Button-module__hop-Button___0Z1G- {
1222
+ --hop-Button-border-radius: var(--hop-shape-rounded-md);
1223
+ --hop-Button-focus-ring-color: var(--hop-primary-border-focus);
1224
+ --hop-Button-column-gap: var(--hop-space-inline-xs);
1225
+ --hop-Button-icon-only-column-gap: 0;
1226
+ --hop-Button-outline-size: var(--hop-space-20);
1227
+ --hop-Button-border-size: var(--hop-space-10);
1228
+ --hop-Button-text-underline-offset: var(--hop-space-20);
1229
+ --hop-Button-icon-only-padding: 0;
1230
+ --hop-Button-sm-height: 2rem;
1231
+ --hop-Button-md-height: 2.5rem;
1232
+ --hop-Button-sm-padding: 0 var(--hop-space-inset-md);
1233
+ --hop-Button-md-padding: 0 var(--hop-space-inset-md);
1234
+ --hop-Button-ghost-sm-padding: 0 var(--hop-space-inset-xs);
1235
+ --hop-Button-ghost-md-padding: 0 var(--hop-space-inset-sm);
1236
+ --hop-Button-color-disabled: var(--hop-neutral-text-disabled);
1237
+ --hop-Button-background-color-disabled: var(--hop-neutral-surface-disabled);
1238
+ --hop-Button-border-disabled: var(--hop-Button-border-size) solid var(--hop-Button-background-color-disabled);
1239
+ --hop-Button-ghost-color-disabled: var(--hop-neutral-text-disabled);
1240
+ --hop-Button-ghost-background-color-disabled: transparent;
1241
+ --hop-Button-ghost-border-disabled: var(--hop-Button-border-size) solid var(--hop-Button-ghost-background-color-disabled);
1242
+ --hop-Button-primary-color: var(--hop-primary-text-strong);
1243
+ --hop-Button-primary-color-hover: var(--hop-primary-text-strong-hover);
1244
+ --hop-Button-primary-color-pressed: var(--hop-primary-text-strong);
1245
+ --hop-Button-primary-background-color: var(--hop-primary-surface-strong);
1246
+ --hop-Button-primary-background-color-hover: var(--hop-primary-surface-strong-hover);
1247
+ --hop-Button-primary-background-color-pressed: var(--hop-primary-surface-strong-press);
1248
+ --hop-Button-primary-border: var(--hop-Button-border-size) solid var(--hop-Button-primary-background-color);
1249
+ --hop-Button-primary-border-hover: var(--hop-Button-border-size) solid var(--hop-Button-primary-background-color-hover);
1250
+ --hop-Button-primary-border-pressed: var(--hop-Button-border-size) solid var(--hop-Button-primary-background-color-pressed);
1251
+ --hop-Button-primary-spinner-color: var(--hop-primary-icon-strong);
1252
+ --hop-Button-secondary-color: var(--hop-neutral-text);
1253
+ --hop-Button-secondary-color-hover: var(--hop-neutral-text-hover);
1254
+ --hop-Button-secondary-color-pressed: var(--hop-neutral-text-press);
1255
+ --hop-Button-secondary-background-color: var(--hop-neutral-surface);
1256
+ --hop-Button-secondary-background-color-hover: var(--hop-neutral-surface-hover);
1257
+ --hop-Button-secondary-background-color-pressed: var(--hop-neutral-surface-press);
1258
+ --hop-Button-secondary-border: var(--hop-Button-border-size) solid var(--hop-neutral-border-strong);
1259
+ --hop-Button-secondary-border-hover: var(--hop-Button-border-size) solid var(--hop-neutral-border-strong-hover);
1260
+ --hop-Button-secondary-border-pressed: var(--hop-Button-border-size) solid var(--hop-neutral-border-strong);
1261
+ --hop-Button-secondary-spinner-color: var(--hop-neutral-icon);
1262
+ --hop-Button-upsell-color: var(--hop-upsell-text);
1263
+ --hop-Button-upsell-color-hover: var(--hop-upsell-text-hover);
1264
+ --hop-Button-upsell-color-pressed: var(--hop-upsell-text-press);
1265
+ --hop-Button-upsell-background-color: var(--hop-upsell-surface);
1266
+ --hop-Button-upsell-background-color-hover: var(--hop-upsell-surface-hover);
1267
+ --hop-Button-upsell-background-color-pressed: var(--hop-upsell-surface-press);
1268
+ --hop-Button-upsell-border: var(--hop-Button-border-size) solid var(--hop-Button-upsell-background-color);
1269
+ --hop-Button-upsell-border-hover: var(--hop-Button-border-size) solid var(--hop-Button-upsell-background-color-hover);
1270
+ --hop-Button-upsell-border-pressed: var(--hop-Button-border-size) solid var(--hop-Button-upsell-background-color-pressed);
1271
+ --hop-Button-upsell-spinner-color: var(--hop-upsell-icon);
1272
+ --hop-Button-danger-color: var(--hop-danger-text-strong);
1273
+ --hop-Button-danger-color-hover: var(--hop-danger-text-strong-hover);
1274
+ --hop-Button-danger-color-pressed: var(--hop-danger-text-strong-hover);
1275
+ --hop-Button-danger-background-color: var(--hop-danger-surface-strong);
1276
+ --hop-Button-danger-background-color-hover: var(--hop-danger-surface-strong-hover);
1277
+ --hop-Button-danger-background-color-pressed: var(--hop-danger-surface-press);
1278
+ --hop-Button-danger-border: var(--hop-Button-border-size) solid var(--hop-Button-danger-background-color);
1279
+ --hop-Button-danger-border-hover: var(--hop-Button-border-size) solid var(--hop-Button-danger-background-color-hover);
1280
+ --hop-Button-danger-border-pressed: var(--hop-Button-border-size) solid var(--hop-Button-danger-background-color-pressed);
1281
+ --hop-Button-danger-spinner-color: var(--hop-primary-icon-strong);
1282
+ --hop-Button-ghost-primary-color: var(--hop-primary-text);
1283
+ --hop-Button-ghost-primary-color-hover: var(--hop-primary-text-hover);
1284
+ --hop-Button-ghost-primary-color-pressed: var(--hop-primary-text-press);
1285
+ --hop-Button-ghost-primary-background-color: transparent;
1286
+ --hop-Button-ghost-primary-background-color-hover: var(--hop-neutral-surface-hover);
1287
+ --hop-Button-ghost-primary-background-color-pressed: var(--hop-primary-surface-weak-press);
1288
+ --hop-Button-ghost-primary-border: var(--hop-Button-border-size) solid var(--hop-Button-ghost-primary-background-color);
1289
+ --hop-Button-ghost-primary-border-hover: var(--hop-Button-border-size) solid var(--hop-Button-ghost-primary-background-color-hover);
1290
+ --hop-Button-ghost-primary-border-pressed: var(--hop-Button-border-size) solid var(--hop-Button-ghost-primary-background-color-pressed);
1291
+ --hop-Button-ghost-primary-spinner-color: var(--hop-neutral-icon);
1292
+ --hop-Button-ghost-secondary-color: var(--hop-neutral-text-weak);
1293
+ --hop-Button-ghost-secondary-color-hover: var(--hop-neutral-text-weak-hover);
1294
+ --hop-Button-ghost-secondary-color-pressed: var(--hop-neutral-text-weak-press);
1295
+ --hop-Button-ghost-secondary-background-color: transparent;
1296
+ --hop-Button-ghost-secondary-background-color-hover: var(--hop-neutral-surface-hover);
1297
+ --hop-Button-ghost-secondary-background-color-pressed: var(--hop-neutral-surface-press);
1298
+ --hop-Button-ghost-secondary-border: var(--hop-Button-border-size) solid var(--hop-Button-ghost-secondary-background-color);
1299
+ --hop-Button-ghost-secondary-border-hover: var(--hop-Button-border-size) solid var(--hop-Button-ghost-secondary-background-color-hover);
1300
+ --hop-Button-ghost-secondary-border-pressed: var(--hop-Button-border-size) solid var(--hop-Button-ghost-secondary-background-color-pressed);
1301
+ --hop-Button-ghost-secondary-spinner-color: var(--hop-neutral-icon);
1302
+ --hop-Button-ghost-danger-color: var(--hop-danger-text-weak);
1303
+ --hop-Button-ghost-danger-color-hover: var(--hop-danger-text-hover);
1304
+ --hop-Button-ghost-danger-color-pressed: var(--hop-danger-text-press);
1305
+ --hop-Button-ghost-danger-background-color: transparent;
1306
+ --hop-Button-ghost-danger-background-color-hover: var(--hop-neutral-surface-hover);
1307
+ --hop-Button-ghost-danger-background-color-pressed: var(--hop-danger-surface-weak-press);
1308
+ --hop-Button-ghost-danger-border: var(--hop-Button-border-size) solid var(--hop-Button-ghost-danger-background-color);
1309
+ --hop-Button-ghost-danger-border-hover: var(--hop-Button-border-size) solid var(--hop-Button-ghost-danger-background-color-hover);
1310
+ --hop-Button-ghost-danger-border-pressed: var(--hop-Button-border-size) solid var(--hop-Button-ghost-danger-background-color-pressed);
1311
+ --hop-Button-ghost-danger-spinner-color: var(--hop-neutral-icon);
1312
+ --inline-size: max-content;
1313
+ --block-size: var(--hop-Button-md-height);
1314
+ --background-color: var(--hop-primary-surface-strong);
1315
+ --color: var(--hop-primary-text-strong);
1316
+ --column-gap: var(--hop-Button-column-gap);
1317
+ --spinner: var(--hop-primary-icon-strong);
1318
+ --border: 0;
1319
+ --padding: var(--hop-Button-md-padding);
1320
+ --text-underline: none;
1321
+ cursor: pointer;
1322
+ position: relative;
1323
+ overflow: hidden;
1324
+ display: flex;
1325
+ column-gap: var(--column-gap);
1326
+ align-items: center;
1327
+ justify-content: center;
1328
+ box-sizing: border-box;
1329
+ inline-size: var(--inline-size);
1330
+ block-size: var(--block-size);
1331
+ padding: var(--padding);
1332
+ color: var(--color);
1333
+ text-decoration: none;
1334
+ white-space: nowrap;
1335
+ background-color: var(--background-color);
1336
+ border: var(--border);
1337
+ border-radius: var(--hop-Button-border-radius);
1338
+ outline: none;
1339
+ outline-offset: var(--hop-Button-outline-size);
1340
+ transition:
1341
+ color var(--hop-easing-duration-2) var(--hop-easing-productive),
1342
+ background-color var(--hop-easing-duration-2) var(--hop-easing-productive),
1343
+ border var(--hop-easing-duration-2) var(--hop-easing-productive);
1344
+ }
1345
+ .Button-module__hop-Button--fluid___ocE9B {
1346
+ --inline-size: 100%;
1347
+ }
1348
+ .Button-module__hop-Button--sm___Iin1k {
1349
+ --block-size: var(--hop-Button-sm-height);
1350
+ --padding: var(--hop-Button-sm-padding);
1351
+ }
1352
+ .Button-module__hop-Button--sm___Iin1k[class*=--ghost] {
1353
+ --padding: var(--hop-Button-ghost-sm-padding);
1354
+ }
1355
+ .Button-module__hop-Button--md___bYBGM[class*=--ghost] {
1356
+ --padding: var(--hop-Button-ghost-md-padding);
1357
+ }
1358
+ .Button-module__hop-Button--icon-only___aWeym {
1359
+ --column-gap: var(--hop-Button-icon-only-column-gap);
1360
+ --padding: var(--hop-Button-icon-only-padding);
1361
+ aspect-ratio: 1;
1362
+ }
1363
+ .Button-module__hop-Button--primary___3Qmg3 {
1364
+ --background-color: var(--hop-Button-primary-background-color);
1365
+ --color: var(--hop-Button-primary-color);
1366
+ --border: var(--hop-Button-primary-border);
1367
+ --spinner-color: var(--hop-Button-primary-spinner-color);
1368
+ }
1369
+ .Button-module__hop-Button--primary___3Qmg3[data-hovered],
1370
+ .Button-module__hop-Button--primary___3Qmg3[data-focus-visible] {
1371
+ --background-color: var(--hop-Button-primary-background-color-hover);
1372
+ --color: var(--hop-Button-primary-color-hover);
1373
+ --border: var(--hop-Button-primary-border-hover);
1374
+ }
1375
+ .Button-module__hop-Button--primary___3Qmg3[data-pressed] {
1376
+ --background-color: var(--hop-Button-primary-background-color-pressed);
1377
+ --color: var(--hop-Button-primary-color-pressed);
1378
+ --border: var(--hop-Button-primary-border-pressed);
1379
+ }
1380
+ .Button-module__hop-Button--secondary___u3qlM {
1381
+ --background-color: var(--hop-Button-secondary-background-color);
1382
+ --color: var(--hop-Button-secondary-color);
1383
+ --border: var(--hop-Button-secondary-border);
1384
+ --spinner-color: var(--hop-Button-secondary-spinner-color);
1385
+ }
1386
+ .Button-module__hop-Button--secondary___u3qlM[data-hovered],
1387
+ .Button-module__hop-Button--secondary___u3qlM[data-focus-visible] {
1388
+ --background-color: var(--hop-Button-secondary-background-color-hover);
1389
+ --color: var(--hop-Button-secondary-color-hover);
1390
+ --border: var(--hop-Button-secondary-border-hover);
1391
+ }
1392
+ .Button-module__hop-Button--secondary___u3qlM[data-pressed] {
1393
+ --background-color: var(--hop-Button-secondary-background-color-pressed);
1394
+ --color: var(--hop-Button-secondary-color-pressed);
1395
+ --border: var(--hop-Button-secondary-border-pressed);
1396
+ }
1397
+ .Button-module__hop-Button--upsell___Wa1Kb {
1398
+ --background-color: var(--hop-Button-upsell-background-color);
1399
+ --color: var(--hop-Button-upsell-color);
1400
+ --border: var(--hop-Button-upsell-border);
1401
+ --spinner-color: var(--hop-Button-upsell-spinner-color);
1402
+ }
1403
+ .Button-module__hop-Button--upsell___Wa1Kb[data-hovered],
1404
+ .Button-module__hop-Button--upsell___Wa1Kb[data-focus-visible] {
1405
+ --background-color: var(--hop-Button-upsell-background-color-hover);
1406
+ --color: var(--hop-Button-upsell-color-hover);
1407
+ --border: var(--hop-Button-upsell-border-hover);
1408
+ }
1409
+ .Button-module__hop-Button--upsell___Wa1Kb[data-pressed] {
1410
+ --background-color: var(--hop-Button-upsell-background-color-pressed);
1411
+ --color: var(--hop-Button-upsell-color-pressed);
1412
+ --border: var(--hop-Button-upsell-border-pressed);
1413
+ }
1414
+ .Button-module__hop-Button--danger___de-7T {
1415
+ --background-color: var(--hop-Button-danger-background-color);
1416
+ --color: var(--hop-Button-danger-color);
1417
+ --border: var(--hop-Button-danger-border);
1418
+ --spinner-color: var(--hop-Button-danger-spinner-color);
1419
+ }
1420
+ .Button-module__hop-Button--danger___de-7T[data-hovered],
1421
+ .Button-module__hop-Button--danger___de-7T[data-focus-visible] {
1422
+ --background-color: var(--hop-Button-danger-background-color-hover);
1423
+ --color: var(--hop-Button-danger-color-hover);
1424
+ --border: var(--hop-Button-danger-border-hover);
1425
+ }
1426
+ .Button-module__hop-Button--danger___de-7T[data-pressed] {
1427
+ --background-color: var(--hop-Button-danger-background-color-pressed);
1428
+ --color: var(--hop-Button-danger-color-pressed);
1429
+ --border: var(--hop-Button-danger-border-pressed);
1430
+ }
1431
+ .Button-module__hop-Button--ghost-primary___f-GHo {
1432
+ --background-color: var(--hop-Button-ghost-primary-background-color);
1433
+ --color: var(--hop-Button-ghost-primary-color);
1434
+ --border: var(--hop-Button-ghost-primary-border);
1435
+ --spinner-color: var(--hop-Button-ghost-primary-spinner-color);
1436
+ }
1437
+ .Button-module__hop-Button--ghost-primary___f-GHo[data-hovered],
1438
+ .Button-module__hop-Button--ghost-primary___f-GHo[data-focus-visible] {
1439
+ --background-color: var(--hop-Button-ghost-primary-background-color-hover);
1440
+ --color: var(--hop-Button-ghost-primary-color-hover);
1441
+ --border: var(--hop-Button-ghost-primary-border-hover);
1442
+ --text-underline: underline;
1443
+ }
1444
+ .Button-module__hop-Button--ghost-primary___f-GHo[data-pressed] {
1445
+ --background-color: var(--hop-Button-ghost-primary-background-color-pressed);
1446
+ --color: var(--hop-Button-ghost-primary-color-pressed);
1447
+ --border: var(--hop-Button-ghost-primary-border-pressed);
1448
+ --text-underline: underline;
1449
+ }
1450
+ .Button-module__hop-Button--ghost-secondary___732dQ {
1451
+ --background-color: var(--hop-Button-ghost-secondary-background-color);
1452
+ --color: var(--hop-Button-ghost-secondary-color);
1453
+ --border: var(--hop-Button-ghost-secondary-border);
1454
+ --spinner-color: var(--hop-Button-ghost-secondary-spinner-color);
1455
+ }
1456
+ .Button-module__hop-Button--ghost-secondary___732dQ[data-hovered],
1457
+ .Button-module__hop-Button--ghost-secondary___732dQ[data-focus-visible] {
1458
+ --background-color: var(--hop-Button-ghost-secondary-background-color-hover);
1459
+ --color: var(--hop-Button-ghost-secondary-color-hover);
1460
+ --border: var(--hop-Button-ghost-secondary-border-hover);
1461
+ --text-underline: underline;
1462
+ }
1463
+ .Button-module__hop-Button--ghost-secondary___732dQ[data-pressed] {
1464
+ --background-color: var(--hop-Button-ghost-secondary-background-color-pressed);
1465
+ --color: var(--hop-Button-ghost-secondary-color-pressed);
1466
+ --border: var(--hop-Button-ghost-secondary-border-pressed);
1467
+ --text-underline: underline;
1468
+ }
1469
+ .Button-module__hop-Button--ghost-danger___mXQFT {
1470
+ --background-color: var(--hop-Button-ghost-danger-background-color);
1471
+ --color: var(--hop-Button-ghost-danger-color);
1472
+ --border: var(--hop-Button-ghost-danger-border);
1473
+ --spinner-color: var(--hop-Button-ghost-danger-spinner-color);
1474
+ }
1475
+ .Button-module__hop-Button--ghost-danger___mXQFT[data-hovered],
1476
+ .Button-module__hop-Button--ghost-danger___mXQFT[data-focus-visible] {
1477
+ --background-color: var(--hop-Button-ghost-danger-background-color-hover);
1478
+ --color: var(--hop-Button-ghost-danger-color-hover);
1479
+ --border: var(--hop-Button-ghost-danger-border-hover);
1480
+ --text-underline: underline;
1481
+ }
1482
+ .Button-module__hop-Button--ghost-danger___mXQFT[data-pressed] {
1483
+ --background-color: var(--hop-Button-ghost-danger-background-color-pressed);
1484
+ --color: var(--hop-Button-ghost-danger-color-pressed);
1485
+ --border: var(--hop-Button-ghost-danger-border-pressed);
1486
+ --text-underline: underline;
1487
+ }
1488
+ .Button-module__hop-Button___0Z1G-[data-focus-visible] {
1489
+ outline: var(--hop-Button-outline-size) solid var(--hop-Button-focus-ring-color);
1490
+ }
1491
+ .Button-module__hop-Button___0Z1G-[data-disabled],
1492
+ .Button-module__hop-Button--loading___3l487 {
1493
+ cursor: not-allowed;
1494
+ }
1495
+ .Button-module__hop-Button___0Z1G-[data-disabled] {
1496
+ --background-color: var(--hop-Button-background-color-disabled);
1497
+ --color: var(--hop-Button-color-disabled);
1498
+ --border: var(--hop-Button-border-disabled);
1499
+ }
1500
+ .Button-module__hop-Button___0Z1G-[class*=--ghost][data-disabled] {
1501
+ --background-color: var(--hop-Button-ghost-background-color-disabled);
1502
+ --color: var(--hop-Button-ghost-color-disabled);
1503
+ --border: var(--hop-Button-ghost-border-disabled);
1504
+ }
1505
+ .Button-module__hop-Button--loading___3l487.Button-module__hop-Button--primary___3Qmg3 {
1506
+ --background-color: var(--hop-Button-primary-background-color);
1507
+ --color: var(--hop-Button-primary-color);
1508
+ --border: var(--hop-Button-primary-border);
1509
+ }
1510
+ .Button-module__hop-Button--loading___3l487.Button-module__hop-Button--secondary___u3qlM {
1511
+ --background-color: var(--hop-Button-secondary-background-color);
1512
+ --color: var(--hop-Button-secondary-color);
1513
+ --border: var(--hop-Button-secondary-border);
1514
+ }
1515
+ .Button-module__hop-Button--loading___3l487.Button-module__hop-Button--upsell___Wa1Kb {
1516
+ --background-color: var(--hop-Button-upsell-background-color);
1517
+ --color: var(--hop-Button-upsell-color);
1518
+ --border: var(--hop-Button-upsell-border);
1519
+ }
1520
+ .Button-module__hop-Button--loading___3l487.Button-module__hop-Button--danger___de-7T {
1521
+ --background-color: var(--hop-Button-danger-background-color);
1522
+ --color: var(--hop-Button-danger-color);
1523
+ --border: var(--hop-Button-danger-border);
1524
+ }
1525
+ .Button-module__hop-Button--loading___3l487.Button-module__hop-Button--ghost-primary___f-GHo {
1526
+ --background-color: var(--hop-Button-ghost-primary-background-color);
1527
+ --color: var(--hop-Button-ghost-primary-color);
1528
+ --border: var(--hop-Button-ghost-primary-border);
1529
+ --text-underline: none;
1530
+ }
1531
+ .Button-module__hop-Button--loading___3l487.Button-module__hop-Button--ghost-secondary___732dQ {
1532
+ --background-color: var(--hop-Button-ghost-secondary-background-color);
1533
+ --color: var(--hop-Button-ghost-secondary-color);
1534
+ --border: var(--hop-Button-ghost-secondary-border);
1535
+ --text-underline: none;
1536
+ }
1537
+ .Button-module__hop-Button--loading___3l487.Button-module__hop-Button--ghost-danger___mXQFT {
1538
+ --background-color: var(--hop-Button-ghost-danger-background-color);
1539
+ --color: var(--hop-Button-ghost-danger-color);
1540
+ --border: var(--hop-Button-ghost-danger-border);
1541
+ --text-underline: none;
1542
+ }
1543
+ .Button-module__hop-Button__Spinner___Aydmf {
1544
+ position: absolute;
1545
+ color: var(--spinner-color);
1546
+ }
1547
+ .Button-module__hop-Button__icon___3H1Sb,
1548
+ .Button-module__hop-Button__icon-list___iWElA {
1549
+ flex: 0 0 auto;
1550
+ justify-self: end;
1551
+ order: 1;
1552
+ }
1553
+ .Button-module__hop-Button__text___ZFtXo {
1554
+ user-select: none;
1555
+ overflow: visible;
1556
+ flex: 0 1 auto;
1557
+ order: 2;
1558
+ font-weight: var(--hop-font-weight-505);
1559
+ text-decoration: var(--text-underline);
1560
+ text-underline-offset: 0.125rem;
1561
+ text-wrap: nowrap;
1562
+ }
1563
+ .Button-module__hop-Button__end-icon___nOaCX,
1564
+ .Button-module__hop-Button__end-icon-list___ge2sI {
1565
+ flex: 0 0 auto;
1566
+ order: 3;
1567
+ }
1568
+ .Button-module__hop-Button___0Z1G- .Button-module__hop-Button__icon-list___iWElA,
1569
+ .Button-module__hop-Button___0Z1G- .Button-module__hop-Button__end-icon-list___ge2sI {
1570
+ flex-wrap: nowrap;
1571
+ }
1572
+ .Button-module__hop-Button--loading___3l487.Button-module__hop-Button___0Z1G- > *:not(.Button-module__hop-Button__Spinner___Aydmf) {
1573
+ opacity: 0;
1574
+ }
1575
+ .LinkButton-module__hop-LinkButton___-WoGS {
1576
+ }
1577
+ .LinkButton-module__hop-LinkButton--fluid___dxw2A {
1578
+ }
1579
+ .LinkButton-module__hop-LinkButton--sm___OyTLF {
1580
+ }
1581
+ .LinkButton-module__hop-LinkButton--icon-only___JOox2 {
1582
+ }
1583
+ .LinkButton-module__hop-LinkButton--primary___GqNpo {
1584
+ }
1585
+ .LinkButton-module__hop-LinkButton--secondary___Bekbp {
1586
+ }
1587
+ .LinkButton-module__hop-LinkButton--upsell___SKX6u {
1588
+ }
1589
+ .LinkButton-module__hop-LinkButton--danger___qDii5 {
1590
+ }
1591
+ .LinkButton-module__hop-LinkButton--ghost-primary___e2zJB {
1592
+ }
1593
+ .LinkButton-module__hop-LinkButton--ghost-secondary___8BpKH {
1594
+ }
1595
+ .LinkButton-module__hop-LinkButton--ghost-danger___VmCaQ {
1596
+ }
1597
+ .LinkButton-module__hop-LinkButton__Spinner___3DWvP {
1598
+ }
1599
+ .LinkButton-module__hop-LinkButton__icon___agTeu,
1600
+ .LinkButton-module__hop-LinkButton__icon-list___vFCgT {
1601
+ }
1602
+ .LinkButton-module__hop-LinkButton__text___pBNkq {
1603
+ }
1604
+ .LinkButton-module__hop-LinkButton__end-icon___Ya3uz,
1605
+ .LinkButton-module__hop-LinkButton__end-icon-list___mVfmL {
1606
+ }
1607
+ .LinkButton-module__hop-LinkButton___-WoGS .LinkButton-module__hop-LinkButton__icon-list___vFCgT,
1608
+ .LinkButton-module__hop-LinkButton___-WoGS .LinkButton-module__hop-LinkButton__end-icon-list___mVfmL {
1609
+ flex-wrap: nowrap;
1610
+ }
1611
+
1612
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/buttons/src/ToggleButton.module.css/#css-module-data */
1613
+ .ToggleButton-module__hop-ToggleButton___oE-c4 {
1614
+ --hop-ToggleButton-border-radius: var(--hop-shape-rounded-md);
1615
+ --hop-ToggleButton-focus-ring-color: var(--hop-primary-border-focus);
1616
+ --hop-ToggleButton-column-gap: var(--hop-space-inline-xs);
1617
+ --hop-ToggleButton-icon-only-column-gap: 0;
1618
+ --hop-ToggleButton-outline-size: var(--hop-space-20);
1619
+ --hop-ToggleButton-border-size: var(--hop-space-10);
1620
+ --hop-ToggleButton-text-underline-offset: var(--hop-space-20);
1621
+ --hop-ToggleButton-icon-only-padding: 0;
1622
+ --hop-ToggleButton-sm-height: 2rem;
1623
+ --hop-ToggleButton-md-height: 2.5rem;
1624
+ --hop-ToggleButton-sm-padding: 0 var(--hop-space-inset-md);
1625
+ --hop-ToggleButton-md-padding: 0 var(--hop-space-inset-md);
1626
+ --hop-ToggleButton-color-disabled: var(--hop-neutral-text-disabled);
1627
+ --hop-ToggleButton-background-color-disabled: var(--hop-neutral-surface-disabled);
1628
+ --hop-ToggleButton-border-disabled: var(--hop-ToggleButton-border-size) solid var(--hop-ToggleButton-background-color-disabled);
1629
+ --hop-ToggleButton-primary-color: var(--hop-primary-text-strong);
1630
+ --hop-ToggleButton-primary-color-hover: var(--hop-primary-text-strong-hover);
1631
+ --hop-ToggleButton-primary-color-pressed: var(--hop-primary-text-strong);
1632
+ --hop-ToggleButton-primary-color-selected: var(--hop-primary-text-selected);
1633
+ --hop-ToggleButton-primary-background-color: var(--hop-primary-surface-strong);
1634
+ --hop-ToggleButton-primary-background-color-hover: var(--hop-primary-surface-strong-hover);
1635
+ --hop-ToggleButton-primary-background-color-pressed: var(--hop-primary-surface-strong-press);
1636
+ --hop-ToggleButton-primary-background-color-selected: var(--hop-primary-surface-selected);
1637
+ --hop-ToggleButton-primary-border: var(--hop-ToggleButton-border-size) solid var(--hop-ToggleButton-primary-background-color);
1638
+ --hop-ToggleButton-primary-border-hover: var(--hop-ToggleButton-border-size) solid var(--hop-ToggleButton-primary-background-color-hover);
1639
+ --hop-ToggleButton-primary-border-pressed: var(--hop-ToggleButton-border-size) solid var(--hop-ToggleButton-primary-background-color-pressed);
1640
+ --hop-ToggleButton-primary-border-selected: var(--hop-ToggleButton-border-size) solid var(--hop-primary-border-selected);
1641
+ --hop-ToggleButton-primary-spinner-color: var(--hop-primary-icon-strong);
1642
+ --hop-ToggleButton-secondary-color: var(--hop-neutral-text);
1643
+ --hop-ToggleButton-secondary-color-hover: var(--hop-neutral-text-hover);
1644
+ --hop-ToggleButton-secondary-color-pressed: var(--hop-neutral-text-press);
1645
+ --hop-ToggleButton-secondary-color-selected: var(--hop-neutral-text-selected);
1646
+ --hop-ToggleButton-secondary-background-color: var(--hop-neutral-surface);
1647
+ --hop-ToggleButton-secondary-background-color-hover: var(--hop-neutral-surface-hover);
1648
+ --hop-ToggleButton-secondary-background-color-pressed: var(--hop-neutral-surface-press);
1649
+ --hop-ToggleButton-secondary-background-color-selected: var(--hop-neutral-surface-selected);
1650
+ --hop-ToggleButton-secondary-border: var(--hop-ToggleButton-border-size) solid var(--hop-neutral-border-strong);
1651
+ --hop-ToggleButton-secondary-border-hover: var(--hop-ToggleButton-border-size) solid var(--hop-neutral-border-strong-hover);
1652
+ --hop-ToggleButton-secondary-border-pressed: var(--hop-ToggleButton-border-size) solid var(--hop-neutral-border-strong);
1653
+ --hop-ToggleButton-secondary-border-selected: var(--hop-ToggleButton-border-size) solid var(--hop-neutral-border-selected);
1654
+ --hop-ToggleButton-secondary-spinner-color: var(--hop-neutral-icon);
1655
+ --hop-ToggleButton-upsell-color: var(--hop-upsell-text);
1656
+ --hop-ToggleButton-upsell-color-hover: var(--hop-upsell-text-hover);
1657
+ --hop-ToggleButton-upsell-color-pressed: var(--hop-upsell-text-press);
1658
+ --hop-ToggleButton-upsell-color-selected: var(--hop-upsell-text-selected);
1659
+ --hop-ToggleButton-upsell-background-color: var(--hop-upsell-surface);
1660
+ --hop-ToggleButton-upsell-background-color-hover: var(--hop-upsell-surface-hover);
1661
+ --hop-ToggleButton-upsell-background-color-pressed: var(--hop-upsell-surface-press);
1662
+ --hop-ToggleButton-upsell-background-color-selected: var(--hop-upsell-surface-selected);
1663
+ --hop-ToggleButton-upsell-border: var(--hop-ToggleButton-border-size) solid var(--hop-ToggleButton-upsell-background-color);
1664
+ --hop-ToggleButton-upsell-border-hover: var(--hop-ToggleButton-border-size) solid var(--hop-ToggleButton-upsell-background-color-hover);
1665
+ --hop-ToggleButton-upsell-border-pressed: var(--hop-ToggleButton-border-size) solid var(--hop-ToggleButton-upsell-background-color-pressed);
1666
+ --hop-ToggleButton-upsell-border-selected: var(--hop-ToggleButton-border-size) solid var(--hop-upsell-border-selected);
1667
+ --hop-ToggleButton-upsell-spinner-color: var(--hop-upsell-icon);
1668
+ --hop-ToggleButton-tertiary-color: var(--hop-neutral-text-weak);
1669
+ --hop-ToggleButton-tertiary-color-hover: var(--hop-neutral-text-weak-hover);
1670
+ --hop-ToggleButton-tertiary-color-pressed: var(--hop-neutral-text-weak-press);
1671
+ --hop-ToggleButton-tertiary-background-color: transparent;
1672
+ --hop-ToggleButton-tertiary-background-color-hover: var(--hop-neutral-surface-hover);
1673
+ --hop-ToggleButton-tertiary-background-color-pressed: var(--hop-neutral-surface-press);
1674
+ --hop-ToggleButton-tertiary-border: var(--hop-ToggleButton-border-size) solid var(--hop-ToggleButton-tertiary-background-color);
1675
+ --hop-ToggleButton-tertiary-border-hover: var(--hop-ToggleButton-border-size) solid var(--hop-ToggleButton-tertiary-background-color-hover);
1676
+ --hop-ToggleButton-tertiary-border-pressed: var(--hop-ToggleButton-border-size) solid var(--hop-ToggleButton-tertiary-background-color-pressed);
1677
+ --hop-ToggleButton-tertiary-spinner-color: var(--hop-neutral-icon);
1678
+ --hop-ToggleButton-tertiary-color-disabled: var(--hop-neutral-text-disabled);
1679
+ --hop-ToggleButton-tertiary-background-color-disabled: transparent;
1680
+ --hop-ToggleButton-tertiary-border-disabled: var(--hop-ToggleButton-border-size) solid var(--hop-ToggleButton-tertiary-background-color-disabled);
1681
+ --inline-size: max-content;
1682
+ --block-size: var(--hop-ToggleButton-md-height);
1683
+ --background-color: var(--hop-primary-surface-strong);
1684
+ --color: var(--hop-primary-text-strong);
1685
+ --column-gap: var(--hop-ToggleButton-column-gap);
1686
+ --spinner: var(--hop-primary-icon-strong);
1687
+ --border: 0;
1688
+ --padding: var(--hop-ToggleButton-md-padding);
1689
+ --text-underline: none;
1690
+ cursor: pointer;
1691
+ position: relative;
1692
+ overflow: hidden;
1693
+ display: flex;
1694
+ column-gap: var(--column-gap);
1695
+ align-items: center;
1696
+ justify-content: center;
1697
+ box-sizing: border-box;
1698
+ inline-size: var(--inline-size);
1699
+ block-size: var(--block-size);
1700
+ padding: var(--padding);
1701
+ color: var(--color);
1702
+ text-decoration: none;
1703
+ white-space: nowrap;
1704
+ background-color: var(--background-color);
1705
+ border: var(--border);
1706
+ border-radius: var(--hop-ToggleButton-border-radius);
1707
+ outline: none;
1708
+ outline-offset: var(--hop-ToggleButton-outline-size);
1709
+ transition:
1710
+ color var(--hop-easing-duration-2) var(--hop-easing-productive),
1711
+ background-color var(--hop-easing-duration-2) var(--hop-easing-productive),
1712
+ border var(--hop-easing-duration-2) var(--hop-easing-productive);
1713
+ }
1714
+ .ToggleButton-module__hop-ToggleButton--fluid___tjNCt {
1715
+ --inline-size: 100%;
1716
+ }
1717
+ .ToggleButton-module__hop-ToggleButton--sm___3FzX2 {
1718
+ --block-size: var(--hop-ToggleButton-sm-height);
1719
+ --padding: var(--hop-ToggleButton-sm-padding);
1720
+ }
1721
+ .ToggleButton-module__hop-ToggleButton--icon-only___sdnLP {
1722
+ --column-gap: var(--hop-ToggleButton-icon-only-column-gap);
1723
+ --padding: var(--hop-ToggleButton-icon-only-padding);
1724
+ aspect-ratio: 1;
1725
+ }
1726
+ .ToggleButton-module__hop-ToggleButton--primary___j98yk {
1727
+ --background-color: var(--hop-ToggleButton-primary-background-color);
1728
+ --color: var(--hop-ToggleButton-primary-color);
1729
+ --border: var(--hop-ToggleButton-primary-border);
1730
+ --spinner-color: var(--hop-ToggleButton-primary-spinner-color);
1731
+ }
1732
+ .ToggleButton-module__hop-ToggleButton--primary___j98yk[data-hovered],
1733
+ .ToggleButton-module__hop-ToggleButton--primary___j98yk[data-focus-visible] {
1734
+ --background-color: var(--hop-ToggleButton-primary-background-color-hover);
1735
+ --color: var(--hop-ToggleButton-primary-color-hover);
1736
+ --border: var(--hop-ToggleButton-primary-border-hover);
1737
+ }
1738
+ .ToggleButton-module__hop-ToggleButton--primary___j98yk[data-pressed] {
1739
+ --background-color: var(--hop-ToggleButton-primary-background-color-pressed);
1740
+ --color: var(--hop-ToggleButton-primary-color-pressed);
1741
+ --border: var(--hop-ToggleButton-primary-border-pressed);
1742
+ }
1743
+ .ToggleButton-module__hop-ToggleButton--primary___j98yk[data-selected] {
1744
+ --background-color: var(--hop-ToggleButton-primary-background-color-selected);
1745
+ --color: var(--hop-ToggleButton-primary-color-selected);
1746
+ --border: var(--hop-ToggleButton-primary-border-selected);
1747
+ }
1748
+ .ToggleButton-module__hop-ToggleButton--secondary___8WysN {
1749
+ --background-color: var(--hop-ToggleButton-secondary-background-color);
1750
+ --color: var(--hop-ToggleButton-secondary-color);
1751
+ --border: var(--hop-ToggleButton-secondary-border);
1752
+ --spinner-color: var(--hop-ToggleButton-secondary-spinner-color);
1753
+ }
1754
+ .ToggleButton-module__hop-ToggleButton--secondary___8WysN[data-hovered],
1755
+ .ToggleButton-module__hop-ToggleButton--secondary___8WysN[data-focus-visible] {
1756
+ --background-color: var(--hop-ToggleButton-secondary-background-color-hover);
1757
+ --color: var(--hop-ToggleButton-secondary-color-hover);
1758
+ --border: var(--hop-ToggleButton-secondary-border-hover);
1759
+ }
1760
+ .ToggleButton-module__hop-ToggleButton--secondary___8WysN[data-pressed] {
1761
+ --background-color: var(--hop-ToggleButton-secondary-background-color-pressed);
1762
+ --color: var(--hop-ToggleButton-secondary-color-pressed);
1763
+ --border: var(--hop-ToggleButton-secondary-border-pressed);
1764
+ }
1765
+ .ToggleButton-module__hop-ToggleButton--secondary___8WysN[data-selected] {
1766
+ --background-color: var(--hop-ToggleButton-secondary-background-color-selected);
1767
+ --color: var(--hop-ToggleButton-secondary-color-selected);
1768
+ --border: var(--hop-ToggleButton-secondary-border-selected);
1769
+ }
1770
+ .ToggleButton-module__hop-ToggleButton--upsell___Op-iH {
1771
+ --background-color: var(--hop-ToggleButton-upsell-background-color);
1772
+ --color: var(--hop-ToggleButton-upsell-color);
1773
+ --border: var(--hop-ToggleButton-upsell-border);
1774
+ --spinner-color: var(--hop-ToggleButton-upsell-spinner-color);
1775
+ }
1776
+ .ToggleButton-module__hop-ToggleButton--upsell___Op-iH[data-hovered],
1777
+ .ToggleButton-module__hop-ToggleButton--upsell___Op-iH[data-focus-visible] {
1778
+ --background-color: var(--hop-ToggleButton-upsell-background-color-hover);
1779
+ --color: var(--hop-ToggleButton-upsell-color-hover);
1780
+ --border: var(--hop-ToggleButton-upsell-border-hover);
1781
+ }
1782
+ .ToggleButton-module__hop-ToggleButton--upsell___Op-iH[data-pressed] {
1783
+ --background-color: var(--hop-ToggleButton-upsell-background-color-pressed);
1784
+ --color: var(--hop-ToggleButton-upsell-color-pressed);
1785
+ --border: var(--hop-ToggleButton-upsell-border-pressed);
1786
+ }
1787
+ .ToggleButton-module__hop-ToggleButton--upsell___Op-iH[data-selected] {
1788
+ --background-color: var(--hop-ToggleButton-upsell-background-color-selected);
1789
+ --color: var(--hop-ToggleButton-upsell-color-selected);
1790
+ --border: var(--hop-ToggleButton-upsell-border-selected);
1791
+ }
1792
+ .ToggleButton-module__hop-ToggleButton--tertiary___YiTR9 {
1793
+ --background-color: var(--hop-ToggleButton-tertiary-background-color);
1794
+ --color: var(--hop-ToggleButton-tertiary-color);
1795
+ --border: var(--hop-ToggleButton-tertiary-border);
1796
+ --spinner-color: var(--hop-ToggleButton-tertiary-spinner-color);
1797
+ }
1798
+ .ToggleButton-module__hop-ToggleButton--tertiary___YiTR9[data-hovered],
1799
+ .ToggleButton-module__hop-ToggleButton--tertiary___YiTR9[data-focus-visible] {
1800
+ --background-color: var(--hop-ToggleButton-tertiary-background-color-hover);
1801
+ --color: var(--hop-ToggleButton-tertiary-color-hover);
1802
+ --border: var(--hop-ToggleButton-tertiary-border-hover);
1803
+ --text-underline: underline;
1804
+ }
1805
+ .ToggleButton-module__hop-ToggleButton--tertiary___YiTR9[data-pressed],
1806
+ .ToggleButton-module__hop-ToggleButton--tertiary___YiTR9[data-selected] {
1807
+ --background-color: var(--hop-ToggleButton-tertiary-background-color-pressed);
1808
+ --color: var(--hop-ToggleButton-tertiary-color-pressed);
1809
+ --border: var(--hop-ToggleButton-tertiary-border-pressed);
1810
+ }
1811
+ .ToggleButton-module__hop-ToggleButton--tertiary___YiTR9[data-pressed] {
1812
+ --text-underline: underline;
1813
+ }
1814
+ .ToggleButton-module__hop-ToggleButton___oE-c4[data-focus-visible] {
1815
+ outline: var(--hop-ToggleButton-outline-size) solid var(--hop-ToggleButton-focus-ring-color);
1816
+ }
1817
+ .ToggleButton-module__hop-ToggleButton___oE-c4[data-disabled],
1818
+ .ToggleButton-module__hop-ToggleButton--loading___l26Nv {
1819
+ cursor: not-allowed;
1820
+ }
1821
+ .ToggleButton-module__hop-ToggleButton___oE-c4[data-disabled] {
1822
+ --background-color: var(--hop-ToggleButton-background-color-disabled);
1823
+ --color: var(--hop-ToggleButton-color-disabled);
1824
+ --border: var(--hop-ToggleButton-border-disabled);
1825
+ }
1826
+ .ToggleButton-module__hop-ToggleButton--tertiary___YiTR9[data-disabled] {
1827
+ --background-color: var(--hop-ToggleButton-tertiary-background-color-disabled);
1828
+ --color: var(--hop-ToggleButton-tertiary-color-disabled);
1829
+ --border: var(--hop-ToggleButton-tertiary-border-disabled);
1830
+ }
1831
+ .ToggleButton-module__hop-ToggleButton--loading___l26Nv.ToggleButton-module__hop-ToggleButton--primary___j98yk {
1832
+ --background-color: var(--hop-ToggleButton-primary-background-color);
1833
+ --color: var(--hop-ToggleButton-primary-color);
1834
+ --border: var(--hop-ToggleButton-primary-border);
1835
+ }
1836
+ .ToggleButton-module__hop-ToggleButton--loading___l26Nv.ToggleButton-module__hop-ToggleButton--secondary___8WysN {
1837
+ --background-color: var(--hop-ToggleButton-secondary-background-color);
1838
+ --color: var(--hop-ToggleButton-secondary-color);
1839
+ --border: var(--hop-ToggleButton-secondary-border);
1840
+ }
1841
+ .ToggleButton-module__hop-ToggleButton--loading___l26Nv.ToggleButton-module__hop-ToggleButton--upsell___Op-iH {
1842
+ --background-color: var(--hop-ToggleButton-upsell-background-color);
1843
+ --color: var(--hop-ToggleButton-upsell-color);
1844
+ --border: var(--hop-ToggleButton-upsell-border);
1845
+ }
1846
+ .ToggleButton-module__hop-ToggleButton--loading___l26Nv.ToggleButton-module__hop-ToggleButton--tertiary___YiTR9 {
1847
+ --background-color: var(--hop-ToggleButton-tertiary-background-color);
1848
+ --color: var(--hop-ToggleButton-tertiary-color);
1849
+ --border: var(--hop-ToggleButton-tertiary-border);
1850
+ --text-underline: none;
1851
+ }
1852
+ .ToggleButton-module__hop-ToggleButton__Spinner___eTDKR {
1853
+ position: absolute;
1854
+ color: var(--spinner-color);
1855
+ }
1856
+ .ToggleButton-module__hop-ToggleButton__icon___9MF68,
1857
+ .ToggleButton-module__hop-ToggleButton__icon-list___36wAy {
1858
+ flex: 0 0 auto;
1859
+ justify-self: end;
1860
+ order: 1;
1861
+ }
1862
+ .ToggleButton-module__hop-ToggleButton__text___dDxdD {
1863
+ user-select: none;
1864
+ overflow: visible;
1865
+ flex: 0 1 auto;
1866
+ order: 2;
1867
+ font-weight: var(--hop-font-weight-505);
1868
+ text-decoration: var(--text-underline);
1869
+ text-underline-offset: 0.125rem;
1870
+ text-wrap: nowrap;
1871
+ }
1872
+ .ToggleButton-module__hop-ToggleButton__end-icon___kTzUI,
1873
+ .ToggleButton-module__hop-ToggleButton__end-icon-list___OooWy {
1874
+ flex: 0 0 auto;
1875
+ order: 3;
1876
+ }
1877
+ .ToggleButton-module__hop-ToggleButton___oE-c4 .ToggleButton-module__hop-ToggleButton__icon-list___36wAy,
1878
+ .ToggleButton-module__hop-ToggleButton___oE-c4 .ToggleButton-module__hop-ToggleButton__end-icon-list___OooWy {
1879
+ flex-wrap: nowrap;
1880
+ }
1881
+ .ToggleButton-module__hop-ToggleButton--loading___l26Nv.ToggleButton-module__hop-ToggleButton___oE-c4 > *:not(.ToggleButton-module__hop-ToggleButton__Spinner___eTDKR) {
1882
+ opacity: 0;
1883
+ }
1884
+
1885
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/hopper-provider/src/HopperProvider.module.css/#css-module-data */
1886
+ .HopperProvider-module__hop-HopperProvider___0oWjx {
1887
+ font-family: var(--hop-body-md-font-family);
1888
+ font-size: var(--hop-body-md-font-size);
1889
+ font-weight: var(--hop-body-md-font-weight);
1890
+ -webkit-font-smoothing: antialiased;
1891
+ line-height: var(--hop-body-md-line-height);
1892
+ color: var(--hop-neutral-text);
1893
+ }
1894
+
1895
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/link/src/Link.module.css/#css-module-data */
1896
+ .Link-module__hop-Link___zN0GU {
1897
+ --hop-Link-border-radius: var(--hop-shape-rounded-sm);
1898
+ --hop-Link-focus-ring-color: var(--hop-primary-border-focus);
1899
+ --hop-Link-color-disabled: var(--hop-neutral-text-disabled);
1900
+ --hop-Link-column-gap: var(--hop-space-inline-xs);
1901
+ --hop-Link-xs-font-size: var(--hop-body-xs-font-size);
1902
+ --hop-Link-xs-font-family: var(--hop-body-xs-font-family);
1903
+ --hop-Link-xs-font-weight: var(--hop-body-xs-font-weight);
1904
+ --hop-Link-xs-line-height: var(--hop-body-xs-line-height);
1905
+ --hop-Link-sm-font-size: var(--hop-body-sm-font-size);
1906
+ --hop-Link-sm-font-family: var(--hop-body-sm-font-family);
1907
+ --hop-Link-sm-font-weight: var(--hop-body-sm-font-weight);
1908
+ --hop-Link-sm-line-height: var(--hop-body-sm-line-height);
1909
+ --hop-Link-md-font-size: var(--hop-body-md-font-size);
1910
+ --hop-Link-md-font-family: var(--hop-body-md-font-family);
1911
+ --hop-Link-md-font-weight: var(--hop-body-md-font-weight);
1912
+ --hop-Link-md-line-height: var(--hop-body-md-line-height);
1913
+ --hop-Link-lg-font-size: var(--hop-body-lg-font-size);
1914
+ --hop-Link-lg-font-family: var(--hop-body-lg-font-family);
1915
+ --hop-Link-lg-font-weight: var(--hop-body-lg-font-weight);
1916
+ --hop-Link-lg-line-height: var(--hop-body-lg-line-height);
1917
+ --hop-Link-xl-font-size: var(--hop-body-xl-font-size);
1918
+ --hop-Link-xl-font-family: var(--hop-body-xl-font-family);
1919
+ --hop-Link-xl-font-weight: var(--hop-body-xl-font-weight);
1920
+ --hop-Link-xl-line-height: var(--hop-body-xl-line-height);
1921
+ --hop-Link-2xl-font-size: var(--hop-body-2xl-font-size);
1922
+ --hop-Link-2xl-font-family: var(--hop-body-2xl-font-family);
1923
+ --hop-Link-2xl-font-weight: var(--hop-body-2xl-font-weight);
1924
+ --hop-Link-2xl-line-height: var(--hop-body-2xl-line-height);
1925
+ --hop-Link-inherit-size-font-size: inherit;
1926
+ --hop-Link-inherit-size-font-family: inherit;
1927
+ --hop-Link-inherit-size-font-weight: inherit;
1928
+ --hop-Link-inherit-size-line-height: inherit;
1929
+ --hop-Link-primary-text-color: var(--hop-primary-text);
1930
+ --hop-Link-primary-text-disabled-color: var(--hop-primary-text-disabled);
1931
+ --hop-Link-primary-text-hover-color: var(--hop-primary-text-hover);
1932
+ --hop-Link-primary-text-pressed-color: var(--hop-primary-text-press);
1933
+ --hop-Link-neutral-text-color: var(--hop-neutral-text);
1934
+ --hop-Link-neutral-text-disabled-color: var(--hop-neutral-text-disabled);
1935
+ --hop-Link-neutral-text-hover-color: var(--hop-neutral-text-hover);
1936
+ --hop-Link-neutral-text-pressed-color: var(--hop-neutral-text-press);
1937
+ --hop-Link-padding-standalone: 0.125em 0;
1938
+ --hop-Link-padding-standalone-xs: var(--hop-space-20) 0;
1939
+ --hop-Link-padding-standalone-sm: var(--hop-space-20) 0;
1940
+ --hop-Link-padding-standalone-md: var(--hop-space-40) 0;
1941
+ --hop-Link-padding-standalone-lg: var(--hop-space-40) 0;
1942
+ --hop-Link-padding-standalone-xl: var(--hop-space-80) 0;
1943
+ --hop-Link-padding-standalone-2xl: var(--hop-space-80) 0;
1944
+ cursor: pointer;
1945
+ display: inline-flex;
1946
+ column-gap: var(--hop-Link-column-gap);
1947
+ align-items: center;
1948
+ box-sizing: border-box;
1949
+ inline-size: fit-content;
1950
+ text-decoration: none;
1951
+ text-underline-offset: 0.125rem;
1952
+ border-radius: var(--hop-Link-border-radius);
1953
+ outline: none;
1954
+ outline-offset: 0.125rem;
1955
+ }
1956
+ :where(.Link-module__hop-Link___zN0GU) {
1957
+ font-family: var(--font-family);
1958
+ font-size: var(--font-size);
1959
+ font-weight: var(--font-weight);
1960
+ line-height: var(--line-height);
1961
+ }
1962
+ :where(.Link-module__hop-Link--xs___ABclH) {
1963
+ --font-size: var(--hop-Link-xs-font-size);
1964
+ --font-family: var(--hop-Link-xs-font-family);
1965
+ --font-weight: var(--hop-Link-xs-font-weight);
1966
+ --line-height: var(--hop-Link-xs-line-height);
1967
+ }
1968
+ :where(.Link-module__hop-Link--sm___6euWI) {
1969
+ --font-size: var(--hop-Link-sm-font-size);
1970
+ --font-family: var(--hop-Link-sm-font-family);
1971
+ --font-weight: var(--hop-Link-sm-font-weight);
1972
+ --line-height: var(--hop-Link-sm-line-height);
1973
+ }
1974
+ :where(.Link-module__hop-Link--md___-4wx-) {
1975
+ --font-size: var(--hop-Link-md-font-size);
1976
+ --font-family: var(--hop-Link-md-font-family);
1977
+ --font-weight: var(--hop-Link-md-font-weight);
1978
+ --line-height: var(--hop-Link-md-line-height);
1979
+ }
1980
+ :where(.Link-module__hop-Link--lg___r5ujq) {
1981
+ --font-size: var(--hop-Link-lg-font-size);
1982
+ --font-family: var(--hop-Link-lg-font-family);
1983
+ --font-weight: var(--hop-Link-lg-font-weight);
1984
+ --line-height: var(--hop-Link-lg-line-height);
1985
+ }
1986
+ :where(.Link-module__hop-Link--xl___ntD7P) {
1987
+ --font-size: var(--hop-Link-xl-font-size);
1988
+ --font-family: var(--hop-Link-xl-font-family);
1989
+ --font-weight: var(--hop-Link-xl-font-weight);
1990
+ --line-height: var(--hop-Link-xl-line-height);
1991
+ }
1992
+ :where(.Link-module__hop-Link--2xl___tluwP) {
1993
+ --font-size: var(--hop-Link-2xl-font-size);
1994
+ --font-family: var(--hop-Link-2xl-font-family);
1995
+ --font-weight: var(--hop-Link-2xl-font-weight);
1996
+ --line-height: var(--hop-Link-2xl-line-height);
1997
+ }
1998
+ :where(.Link-module__hop-Link--inherit___RyQa4) {
1999
+ --font-size: var(--hop-Link-inherit-size-font-size);
2000
+ --font-family: var(--hop-Link-inherit-size-font-family);
2001
+ --font-weight: var(--hop-Link-inherit-size-font-weight);
2002
+ --line-height: var(--hop-Link-inherit-size-line-height);
2003
+ }
2004
+ .Link-module__hop-Link___zN0GU[data-focus-visible] {
2005
+ outline: 0.125rem solid var(--hop-Link-focus-ring-color);
2006
+ }
2007
+ .Link-module__hop-Link___zN0GU[data-disabled] {
2008
+ cursor: default;
2009
+ }
2010
+ .Link-module__hop-Link--standalone___l-iNG .Link-module__hop-Link__text___9BuwZ {
2011
+ padding: var(--hop-Link-padding-standalone);
2012
+ }
2013
+ .Link-module__hop-Link--standalone___l-iNG.Link-module__hop-Link--xs___ABclH .Link-module__hop-Link__text___9BuwZ {
2014
+ padding: var(--hop-Link-padding-standalone-xs);
2015
+ }
2016
+ .Link-module__hop-Link--standalone___l-iNG.Link-module__hop-Link--sm___6euWI .Link-module__hop-Link__text___9BuwZ {
2017
+ padding: var(--hop-Link-padding-standalone-sm);
2018
+ }
2019
+ .Link-module__hop-Link--standalone___l-iNG.Link-module__hop-Link--md___-4wx- .Link-module__hop-Link__text___9BuwZ {
2020
+ padding: var(--hop-Link-padding-standalone-md);
2021
+ }
2022
+ .Link-module__hop-Link--standalone___l-iNG.Link-module__hop-Link--lg___r5ujq .Link-module__hop-Link__text___9BuwZ {
2023
+ padding: var(--hop-Link-padding-standalone-lg);
2024
+ }
2025
+ .Link-module__hop-Link--standalone___l-iNG.Link-module__hop-Link--xl___ntD7P .Link-module__hop-Link__text___9BuwZ {
2026
+ padding: var(--hop-Link-padding-standalone-xl);
2027
+ }
2028
+ .Link-module__hop-Link--standalone___l-iNG.Link-module__hop-Link--2xl___tluwP .Link-module__hop-Link__text___9BuwZ {
2029
+ padding: var(--hop-Link-padding-standalone-2xl);
2030
+ }
2031
+ .Link-module__hop-Link--quiet___p89Vc[data-focus-visible],
2032
+ .Link-module__hop-Link--quiet___p89Vc[data-hovered],
2033
+ .Link-module__hop-Link--standalone___l-iNG[data-focus-visible],
2034
+ .Link-module__hop-Link--standalone___l-iNG[data-hovered] {
2035
+ text-decoration: underline;
2036
+ }
2037
+ .Link-module__hop-Link___zN0GU:not(.Link-module__hop-Link--quiet___p89Vc, .Link-module__hop-Link--standalone___l-iNG) {
2038
+ text-decoration: underline;
2039
+ }
2040
+ .Link-module__hop-Link--primary___o0ags {
2041
+ color: var(--hop-Link-primary-text-color);
2042
+ }
2043
+ .Link-module__hop-Link--primary___o0ags[data-disabled] {
2044
+ color: var(--hop-Link-primary-text-disabled-color);
2045
+ }
2046
+ .Link-module__hop-Link--primary___o0ags:not([data-disabled])[data-focus-visible],
2047
+ .Link-module__hop-Link--primary___o0ags:not([data-disabled])[data-hovered] {
2048
+ color: var(--hop-Link-primary-text-hover-color);
2049
+ }
2050
+ .Link-module__hop-Link--primary___o0ags:not([data-disabled])[data-pressed] {
2051
+ color: var(--hop-Link-primary-text-pressed-color);
2052
+ }
2053
+ .Link-module__hop-Link--secondary___jcpD5 {
2054
+ color: var(--hop-Link-neutral-text-color);
2055
+ }
2056
+ .Link-module__hop-Link--secondary___jcpD5[data-disabled] {
2057
+ color: var(--hop-Link-neutral-text-disabled-color);
2058
+ }
2059
+ .Link-module__hop-Link--secondary___jcpD5:not([data-disabled])[data-focus-visible],
2060
+ .Link-module__hop-Link--secondary___jcpD5:not([data-disabled])[data-hovered] {
2061
+ color: var(--hop-Link-neutral-text-hover-color);
2062
+ }
2063
+ .Link-module__hop-Link--secondary___jcpD5:not([data-disabled])[data-pressed] {
2064
+ color: var(--hop-Link-neutral-text-pressed-color);
2065
+ }
2066
+ .Link-module__hop-Link__icon___N8Pvt,
2067
+ .Link-module__hop-Link__icon-list___jgYl- {
2068
+ order: 2;
2069
+ }
2070
+ .Link-module__hop-Link__text___9BuwZ {
2071
+ order: 1;
2072
+ }
2073
+ .Link-module__hop-Link__start-icon___GOMwu,
2074
+ .Link-module__hop-Link__start-icon-list___P72wB {
2075
+ order: 0;
2076
+ }
2077
+
2078
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/avatar/src/RichIconAvatarImage.module.css/#css-module-data */
2079
+ .RichIconAvatarImage-module__hop-RichIconAvatarImage___Xl-OB {
2080
+ --hop-RichIconAvatarImage-background-color: var(--hop-decorative-option7-surface);
2081
+ --hop-RichIconAvatarImage-border-radius: var(--hop-shape-circle);
2082
+ --hop-RichIconAvatarImage-icon-color: var(--hop-decorative-option7-icon);
2083
+ --hop-RichIconAvatarImage-xs-size: 1rem;
2084
+ --hop-RichIconAvatarImage-icon-xs-size: 1rem;
2085
+ --hop-RichIconAvatarImage-sm-size: 1.5rem;
2086
+ --hop-RichIconAvatarImage-icon-sm-size: 1.5rem;
2087
+ --hop-RichIconAvatarImage-md-size: 2rem;
2088
+ --hop-RichIconAvatarImage-icon-md-size: 2rem;
2089
+ --hop-RichIconAvatarImage-lg-size: 3rem;
2090
+ --hop-RichIconAvatarImage-icon-lg-size: 3rem;
2091
+ --hop-RichIconAvatarImage-xl-size: 4rem;
2092
+ --hop-RichIconAvatarImage-icon-xl-size: 4rem;
2093
+ --hop-RichIconAvatarImage-2xl-size: 6rem;
2094
+ --hop-RichIconAvatarImage-icon-2xl-size: 4rem;
2095
+ --hop-RichIconAvatarImage-background-color-disabled: var(--hop-neutral-surface-disabled);
2096
+ --hop-RichIconAvatarImage-icon-color-disabled: var(--hop-neutral-icon-disabled);
2097
+ --background-color: var(--hop-RichIconAvatarImage-background-color);
2098
+ user-select: none;
2099
+ position: relative;
2100
+ overflow: hidden;
2101
+ display: flex;
2102
+ align-items: center;
2103
+ justify-content: center;
2104
+ inline-size: var(--size, var(--hop-RichIconAvatarImage-md-size));
2105
+ block-size: var(--size, var(--hop-RichIconAvatarImage-md-size));
2106
+ color: var(--hop-RichIconAvatarImage-icon-color);
2107
+ background-color: var(--background-color);
2108
+ border-radius: var(--hop-RichIconAvatarImage-border-radius);
2109
+ }
2110
+ .RichIconAvatarImage-module__hop-RichIconAvatarImage--xs___soMMV {
2111
+ --size: var(--hop-RichIconAvatarImage-xs-size);
2112
+ --icon-size: var(--hop-RichIconAvatarImage-icon-xs-size);
2113
+ }
2114
+ .RichIconAvatarImage-module__hop-RichIconAvatarImage--sm___L2Ls0 {
2115
+ --size: var(--hop-RichIconAvatarImage-sm-size);
2116
+ --icon-size: var(--hop-RichIconAvatarImage-icon-sm-size);
2117
+ }
2118
+ .RichIconAvatarImage-module__hop-RichIconAvatarImage--md___-TpFk {
2119
+ --size: var(--hop-RichIconAvatarImage-md-size);
2120
+ --icon-size: var(--hop-RichIconAvatarImage-icon-md-size);
2121
+ }
2122
+ .RichIconAvatarImage-module__hop-RichIconAvatarImage--lg___RjDDs {
2123
+ --size: var(--hop-RichIconAvatarImage-lg-size);
2124
+ --icon-size: var(--hop-RichIconAvatarImage-icon-lg-size);
2125
+ }
2126
+ .RichIconAvatarImage-module__hop-RichIconAvatarImage--xl___VCcO5 {
2127
+ --size: var(--hop-RichIconAvatarImage-xl-size);
2128
+ --icon-size: var(--hop-RichIconAvatarImage-icon-xl-size);
2129
+ }
2130
+ .RichIconAvatarImage-module__hop-RichIconAvatarImage--2xl___2EFbN {
2131
+ --size: var(--hop-RichIconAvatarImage-2xl-size);
2132
+ --icon-size: var(--hop-RichIconAvatarImage-icon-2xl-size);
2133
+ }
2134
+ .RichIconAvatarImage-module__hop-RichIconAvatarImage___Xl-OB[data-disabled] {
2135
+ --background-color: var(--hop-RichIconAvatarImage-background-color-disabled);
2136
+ }
2137
+ .RichIconAvatarImage-module__hop-RichIconAvatarImage__icon___27lgk {
2138
+ position: relative;
2139
+ display: block;
2140
+ inline-size: var(--icon-size, var(--hop-RichIconAvatarImage-icon-md-size));
2141
+ block-size: var(--icon-size, var(--hop-RichIconAvatarImage-icon-md-size));
2142
+ }
2143
+ .RichIconAvatarImage-module__hop-RichIconAvatarImage___Xl-OB[data-disabled] .RichIconAvatarImage-module__hop-RichIconAvatarImage__icon___27lgk {
2144
+ --hop-RichIcon-placeholder-background: var(--hop-RichIconAvatarImage-background-color-disabled);
2145
+ --hop-RichIcon-placeholder-shadow: var(--hop-RichIconAvatarImage-icon-color-disabled);
2146
+ }
2147
+
2148
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/avatar/src/Avatar.module.css/#css-module-data */
2149
+ .Avatar-module__hop-Avatar___sOX9A {
2150
+ --hop-Avatar-border-radius: var(--hop-shape-circle);
2151
+ --hop-Avatar-mix-blend-mode: normal;
2152
+ --hop-Avatar-decorative-1-background-color: var(--hop-decorative-option1-surface-strong);
2153
+ --hop-Avatar-decorative-2-background-color: var(--hop-decorative-option2-surface-strong);
2154
+ --hop-Avatar-decorative-3-background-color: var(--hop-decorative-option3-surface-strong);
2155
+ --hop-Avatar-decorative-4-background-color: var(--hop-decorative-option4-surface-strong);
2156
+ --hop-Avatar-decorative-5-background-color: var(--hop-decorative-option5-surface-strong);
2157
+ --hop-Avatar-decorative-6-background-color: var(--hop-decorative-option6-surface-strong);
2158
+ --hop-Avatar-decorative-7-background-color: var(--hop-decorative-option7-surface-strong);
2159
+ --hop-Avatar-decorative-8-background-color: var(--hop-decorative-option8-surface-strong);
2160
+ --hop-Avatar-decorative-9-background-color: var(--hop-decorative-option9-surface-strong);
2161
+ --hop-Avatar-decorative-1-text-color: var(--hop-decorative-option1-text);
2162
+ --hop-Avatar-decorative-2-text-color: var(--hop-decorative-option2-text);
2163
+ --hop-Avatar-decorative-3-text-color: var(--hop-decorative-option3-text);
2164
+ --hop-Avatar-decorative-4-text-color: var(--hop-decorative-option4-text);
2165
+ --hop-Avatar-decorative-5-text-color: var(--hop-decorative-option5-text);
2166
+ --hop-Avatar-decorative-6-text-color: var(--hop-decorative-option6-text);
2167
+ --hop-Avatar-decorative-7-text-color: var(--hop-decorative-option7-text);
2168
+ --hop-Avatar-decorative-8-text-color: var(--hop-decorative-option8-text);
2169
+ --hop-Avatar-decorative-9-text-color: var(--hop-decorative-option9-text);
2170
+ --hop-Avatar-xs-size: 1rem;
2171
+ --hop-Avatar-sm-size: 1.5rem;
2172
+ --hop-Avatar-md-size: 2rem;
2173
+ --hop-Avatar-lg-size: 3rem;
2174
+ --hop-Avatar-xl-size: 4rem;
2175
+ --hop-Avatar-2xl-size: 6rem;
2176
+ --hop-Avatar-background-color-disabled: var(--hop-neutral-surface-disabled);
2177
+ --hop-Avatar-text-color-disabled: var(--hop-neutral-text-disabled);
2178
+ --hop-Avatar-mix-blend-mode-disabled: luminosity;
2179
+ --mix-blend-mode: var(--hop-Avatar-mix-blend-mode);
2180
+ user-select: none;
2181
+ position: relative;
2182
+ overflow: hidden;
2183
+ display: flex;
2184
+ flex: 0 0 auto;
2185
+ align-items: center;
2186
+ justify-content: center;
2187
+ box-sizing: border-box;
2188
+ inline-size: var(--size, var(--hop-Avatar-md-size));
2189
+ block-size: var(--size, var(--hop-Avatar-md-size));
2190
+ color: var(--text-color, var(--hop-neutral-text));
2191
+ background-color: var(--background-color, transparent);
2192
+ border-radius: var(--hop-Avatar-border-radius);
2193
+ }
2194
+ .Avatar-module__hop-Avatar--xs___i1aUW {
2195
+ --size: var(--hop-Avatar-xs-size);
2196
+ }
2197
+ .Avatar-module__hop-Avatar--sm___nwUvL {
2198
+ --size: var(--hop-Avatar-sm-size);
2199
+ }
2200
+ .Avatar-module__hop-Avatar--md___uyw33 {
2201
+ --size: var(--hop-Avatar-md-size);
2202
+ }
2203
+ .Avatar-module__hop-Avatar--lg___Mui78 {
2204
+ --size: var(--hop-Avatar-lg-size);
2205
+ }
2206
+ .Avatar-module__hop-Avatar--xl___hHaUG {
2207
+ --size: var(--hop-Avatar-xl-size);
2208
+ }
2209
+ .Avatar-module__hop-Avatar--2xl___pqrQN {
2210
+ --size: var(--hop-Avatar-2xl-size);
2211
+ }
2212
+ .Avatar-module__hop-Avatar--decorative-option1___s0WXt {
2213
+ --background-color: var(--hop-Avatar-decorative-1-background-color);
2214
+ --text-color: var(--hop-Avatar-decorative-1-text-color);
2215
+ }
2216
+ .Avatar-module__hop-Avatar--decorative-option2___c3i5W {
2217
+ --background-color: var(--hop-Avatar-decorative-2-background-color);
2218
+ --text-color: var(--hop-Avatar-decorative-2-text-color);
2219
+ }
2220
+ .Avatar-module__hop-Avatar--decorative-option3___vCyti {
2221
+ --background-color: var(--hop-Avatar-decorative-3-background-color);
2222
+ --text-color: var(--hop-Avatar-decorative-3-text-color);
2223
+ }
2224
+ .Avatar-module__hop-Avatar--decorative-option4___JbRKY {
2225
+ --background-color: var(--hop-Avatar-decorative-4-background-color);
2226
+ --text-color: var(--hop-Avatar-decorative-4-text-color);
2227
+ }
2228
+ .Avatar-module__hop-Avatar--decorative-option5___xoYBk {
2229
+ --background-color: var(--hop-Avatar-decorative-5-background-color);
2230
+ --text-color: var(--hop-Avatar-decorative-5-text-color);
2231
+ }
2232
+ .Avatar-module__hop-Avatar--decorative-option6___T7ZoY {
2233
+ --background-color: var(--hop-Avatar-decorative-6-background-color);
2234
+ --text-color: var(--hop-Avatar-decorative-6-text-color);
2235
+ }
2236
+ .Avatar-module__hop-Avatar--decorative-option7___wTPOD {
2237
+ --background-color: var(--hop-Avatar-decorative-7-background-color);
2238
+ --text-color: var(--hop-Avatar-decorative-7-text-color);
2239
+ }
2240
+ .Avatar-module__hop-Avatar--decorative-option8___swMm0 {
2241
+ --background-color: var(--hop-Avatar-decorative-8-background-color);
2242
+ --text-color: var(--hop-Avatar-decorative-8-text-color);
2243
+ }
2244
+ .Avatar-module__hop-Avatar--decorative-option9___en8-c {
2245
+ --background-color: var(--hop-Avatar-decorative-9-background-color);
2246
+ --text-color: var(--hop-Avatar-decorative-9-text-color);
2247
+ }
2248
+ .Avatar-module__hop-Avatar___sOX9A[data-disabled] {
2249
+ --background-color: var(--hop-Avatar-background-color-disabled);
2250
+ --text-color: var(--hop-Avatar-text-color-disabled);
2251
+ --mix-blend-mode: var(--hop-Avatar-mix-blend-mode-disabled);
2252
+ isolation: isolate;
2253
+ }
2254
+ .Avatar-module__hop-Avatar__image___aGfAg {
2255
+ position: relative;
2256
+ display: block;
2257
+ box-sizing: border-box;
2258
+ inline-size: 100%;
2259
+ block-size: 100%;
2260
+ object-fit: cover;
2261
+ mix-blend-mode: var(--mix-blend-mode);
2262
+ }
2263
+
2264
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/tooltip/src/Tooltip.module.css/#css-module-data */
2265
+ .Tooltip-module__hop-Tooltip___nVbS- {
2266
+ --hop-Tooltip-max-inline-size: 20rem;
2267
+ --hop-Tooltip-slide-amount: 0.25rem;
2268
+ --hop-Tooltip-background: var(--hop-neutral-surface-strong);
2269
+ --hop-Tooltip-border-radius: var(--hop-shape-rounded-md);
2270
+ --hop-Tooltip-box-shadow: var(--hop-elevation-raised);
2271
+ --hop-Tooltip-font-family: var(--hop-body-md-font-family);
2272
+ --hop-Tooltip-font-size: var(--hop-body-md-font-size);
2273
+ --hop-Tooltip-font-weight: var(--hop-body-md-font-weight);
2274
+ --hop-Tooltip-line-height: var(--hop-body-md-line-height);
2275
+ --hop-Tooltip-font-smoothing: antialiased;
2276
+ --hop-Tooltip-color: var(--hop-neutral-text-strong);
2277
+ --hop-Tooltip-padding: var(--hop-space-inset-squish-md);
2278
+ --origin-x: 0;
2279
+ --origin-y: 0;
2280
+ max-inline-size: min(var(--hop-Tooltip-max-inline-size), calc(100% - (var(--container-padding) * 2)));
2281
+ padding: var(--hop-Tooltip-padding);
2282
+ font-family: var(--hop-Tooltip-font-family);
2283
+ font-size: var(--hop-Tooltip-font-size);
2284
+ font-weight: var(--hop-Tooltip-font-weight);
2285
+ -webkit-font-smoothing: var(--hop-Tooltip-font-smoothing);
2286
+ line-height: var(--hop-Tooltip-line-height);
2287
+ color: var(--hop-Tooltip-color);
2288
+ background: var(--hop-Tooltip-background);
2289
+ border-radius: var(--hop-Tooltip-border-radius);
2290
+ box-shadow: var(--hop-Tooltip-box-shadow);
2291
+ }
2292
+ .Tooltip-module__hop-Tooltip--top___0Picg {
2293
+ --origin-x: 0;
2294
+ --origin-y: var(--hop-Tooltip-slide-amount);
2295
+ }
2296
+ .Tooltip-module__hop-Tooltip--right___J7XGb {
2297
+ --origin-x: calc(-1 * var(--hop-Tooltip-slide-amount));
2298
+ --origin-y: 0;
2299
+ }
2300
+ .Tooltip-module__hop-Tooltip--bottom___apr36 {
2301
+ --origin-x: 0;
2302
+ --origin-y: calc(-1 * var(--hop-Tooltip-slide-amount));
2303
+ }
2304
+ .Tooltip-module__hop-Tooltip--left___98KWK {
2305
+ --origin-x: var(--hop-Tooltip-slide-amount);
2306
+ --origin-y: 0;
2307
+ }
2308
+ .Tooltip-module__hop-Tooltip___nVbS-[data-entering] {
2309
+ animation: Tooltip-module__slide___COczJ 0.2s ease-out;
2310
+ }
2311
+ .Tooltip-module__hop-Tooltip___nVbS-[data-exiting] {
2312
+ animation: Tooltip-module__slide___COczJ 0.2s ease-in reverse;
2313
+ }
2314
+ @keyframes Tooltip-module__slide___COczJ {
2315
+ from {
2316
+ transform: translate(var(--origin-x), var(--origin-y));
2317
+ opacity: 0;
2318
+ }
2319
+ to {
2320
+ transform: translateY(0);
2321
+ opacity: 1;
2322
+ }
2323
+ }
2324
+
2325
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/avatar/src/AvatarGroup.module.css/#css-module-data */
2326
+ .AvatarGroup-module__hop-AvatarGroup___OnxWJ {
2327
+ --hop-AvatarGroup-display: flex;
2328
+ --hop-AvatarGroup-align-items: center;
2329
+ display: var(--hop-AvatarGroup-display);
2330
+ align-items: var(--hop-AvatarGroup-align-items);
2331
+ }
2332
+ .AvatarGroup-module__hop-AvatarGroup--wrap___4--rv {
2333
+ flex-wrap: wrap;
2334
+ }
2335
+ .AvatarGroup-module__hop-AvatarGroup--xs___L8mre {
2336
+ --gap: -0.125rem;
2337
+ }
2338
+ .AvatarGroup-module__hop-AvatarGroup--sm___UjcIm {
2339
+ --gap: -0.25rem;
2340
+ }
2341
+ .AvatarGroup-module__hop-AvatarGroup--md___sBcpK {
2342
+ --gap: -0.5rem;
2343
+ }
2344
+ .AvatarGroup-module__hop-AvatarGroup--lg___7YAak {
2345
+ --gap: -1rem;
2346
+ }
2347
+ .AvatarGroup-module__hop-AvatarGroup--xl___nbZIy {
2348
+ --gap: -1rem;
2349
+ }
2350
+ .AvatarGroup-module__hop-AvatarGroup--2xl___ljxbT {
2351
+ --gap: -2rem;
2352
+ }
2353
+ .AvatarGroup-module__hop-AvatarGroup__avatar___O46a5 {
2354
+ margin-inline-start: var(--gap);
2355
+ transition: margin var(--hop-easing-duration-2);
2356
+ }
2357
+ .AvatarGroup-module__hop-AvatarGroup__avatar___O46a5:hover:not(:last-child) + .AvatarGroup-module__hop-AvatarGroup__avatar___O46a5 {
2358
+ margin-inline-start: 0;
2359
+ }
2360
+ .AvatarGroup-module__hop-AvatarGroup__avatar___O46a5:first-child {
2361
+ margin-inline-start: 0;
2362
+ }
2363
+ .AvatarGroup-module__hop-AvatarGroup__label___fbjFq {
2364
+ --hop-AvatarGroup-label-font-size: var(--hop-body-sm-font-size);
2365
+ --hop-AvatarGroup-label-font-weight: var(--hop-body-sm-semibold-font-weight);
2366
+ --hop-AvatarGroup-label-line-height: var(--hop-body-sm-line-height);
2367
+ --hop-AvatarGroup-label-font-family: var(--hop-body-sm-font-family);
2368
+ --hop-AvatarGroup-label-margin-left: 0.25rem;
2369
+ margin-inline-start: var(--hop-AvatarGroup-label-margin-left);
2370
+ font-family: var(--hop-AvatarGroup-label-font-family);
2371
+ font-size: var(--hop-AvatarGroup-label-font-size);
2372
+ font-weight: var(--hop-AvatarGroup-label-font-weight);
2373
+ line-height: var(--hop-AvatarGroup-label-line-height);
2374
+ }
2375
+ .AvatarGroup-module__hop-AvatarGroup__hiddenAvatar___fFImk {
2376
+ --hop-AvatarGroup__hiddenAvatar-display: flex;
2377
+ --hop-AvatarGroup__hiddenAvatar-align-items: center;
2378
+ --hop-AvatarGroup__hiddenAvatar-gap: var(--hop-space-inset-sm);
2379
+ --hop-AvatarGroup__hiddenAvatar-font-family: var(--hop-body-xs-font-family);
2380
+ --hop-AvatarGroup__hiddenAvatar-font-size: var(--hop-body-xs-font-size);
2381
+ --hop-AvatarGroup__hiddenAvatar-font-weight: var(--hop-body-xs-semibold-font-weight);
2382
+ --hop-AvatarGroup__hiddenAvatar-line-height: var(--hop-body-xs-line-height);
2383
+ --hop-AvatarGroup__hiddenAvatar-color: var(--hop-neutral-text-strong);
2384
+ display: var(--hop-AvatarGroup__hiddenAvatar-display);
2385
+ gap: var(--hop-AvatarGroup__hiddenAvatar-gap);
2386
+ align-items: var(--hop-AvatarGroup__hiddenAvatar-align-items);
2387
+ font-family: var(--hop-AvatarGroup__hiddenAvatar-font-family);
2388
+ font-size: var(--hop-AvatarGroup__hiddenAvatar-font-size);
2389
+ font-weight: var(--hop-AvatarGroup__hiddenAvatar-font-weight);
2390
+ line-height: var(--hop-AvatarGroup__hiddenAvatar-line-height);
2391
+ color: var(--hop-AvatarGroup__hiddenAvatar-color);
2392
+ }
2393
+ .AvatarGroup-module__hop-AvatarGroup__hiddenAvatar___fFImk:not(:last-child) {
2394
+ margin-block-end: 0.25rem;
2395
+ }
2396
+ .AvatarGroup-module__hop-AvatarGroup--start___rucz5 {
2397
+ justify-content: flex-start;
2398
+ }
2399
+ .AvatarGroup-module__hop-AvatarGroup--end___9n-g7 {
2400
+ justify-content: flex-end;
2401
+ }
2402
+ .AvatarGroup-module__hop-AvatarGroup--center___KbbSx {
2403
+ justify-content: center;
2404
+ }
2405
+
2406
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/badge/src/Badge.module.css/#css-module-data */
2407
+ .Badge-module__hop-Badge___zgMp1 {
2408
+ --hop-Badge-height: 1.5rem;
2409
+ --hop-Badge-width: max-content;
2410
+ --hop-Badge-padding-inline: var(--hop-space-inset-sm);
2411
+ --hop-Badge-border-radius: var(--hop-shape-pill);
2412
+ --hop-Badge-indeterminate-border-radius: var(--hop-shape-circle);
2413
+ --hop-Badge-indeterminate-height: 1rem;
2414
+ --hop-Badge-indeterminate-width: 1rem;
2415
+ --hop-Badge-indeterminate-padding-inline: 0;
2416
+ --hop-Badge-primary-text-color: var(--hop-primary-text-strong);
2417
+ --hop-Badge-primary-background-color: var(--hop-primary-surface-strong);
2418
+ --hop-Badge-primary-text-color-hovered: var(--hop-primary-text-strong-hover);
2419
+ --hop-Badge-primary-background-color-hovered: var(--hop-primary-surface-strong-hover);
2420
+ --hop-Badge-primary-text-color-pressed: var(--hop-primary-text-strong);
2421
+ --hop-Badge-primary-background-color-pressed: var(--hop-primary-surface-strong-press);
2422
+ --hop-Badge-primary-text-color-selected: var(--hop-neutral-text-selected);
2423
+ --hop-Badge-primary-background-color-selected: var(--hop-neutral-surface-selected);
2424
+ --hop-Badge-secondary-text-color: var(--hop-neutral-text-strong);
2425
+ --hop-Badge-secondary-background-color: var(--hop-neutral-surface-strong);
2426
+ --hop-Badge-secondary-text-color-hovered: var(--hop-neutral-text-strong);
2427
+ --hop-Badge-secondary-background-color-hovered: var(--hop-neutral-surface-strong);
2428
+ --hop-Badge-secondary-text-color-pressed: var(--hop-neutral-text-strong);
2429
+ --hop-Badge-secondary-background-color-pressed: var(--hop-neutral-surface-strong);
2430
+ --hop-Badge-secondary-text-color-selected: var(--hop-neutral-text-selected);
2431
+ --hop-Badge-secondary-background-color-selected: var(--hop-neutral-surface-selected);
2432
+ --hop-Badge-subdued-text-color: var(--hop-neutral-text);
2433
+ --hop-Badge-subdued-background-color: var(--hop-neutral-surface-weak);
2434
+ --hop-Badge-subdued-text-color-hovered: var(--hop-neutral-text-weak-hover);
2435
+ --hop-Badge-subdued-background-color-hovered: var(--hop-neutral-surface-weak-hover);
2436
+ --hop-Badge-subdued-text-color-pressed: var(--hop-neutral-text-weak-press);
2437
+ --hop-Badge-subdued-background-color-pressed: var(--hop-neutral-surface-weak-press);
2438
+ --hop-Badge-subdued-text-color-selected: var(--hop-neutral-text-weak-selected);
2439
+ --hop-Badge-subdued-background-color-selected: var(--hop-neutral-surface-weak-selected);
2440
+ --hop-Badge-text-color-disabled: var(--hop-neutral-text-disabled);
2441
+ --hop-Badge-background-color-disabled: var(--hop-neutral-surface-disabled);
2442
+ --height: var(--hop-Badge-height);
2443
+ --width: var(--hop-Badge-width);
2444
+ --padding-inline: var(--hop-Badge-padding-inline);
2445
+ --border-radius: var(--hop-Badge-border-radius);
2446
+ display: inline-flex;
2447
+ align-items: center;
2448
+ justify-content: center;
2449
+ box-sizing: border-box;
2450
+ inline-size: var(--width);
2451
+ block-size: var(--height);
2452
+ padding-inline: var(--padding-inline);
2453
+ color: var(--text-color, var(--hop-Badge-primary-text-color));
2454
+ background-color: var(--background-color, var(--hop-Badge-primary-background-color));
2455
+ border-radius: var(--border-radius);
2456
+ }
2457
+ .Badge-module__hop-Badge--primary___FtMRN {
2458
+ --background-color: var(--hop-Badge-primary-background-color);
2459
+ --text-color: var(--hop-Badge-primary-text-color);
2460
+ }
2461
+ .Badge-module__hop-Badge--primary___FtMRN[data-hovered] {
2462
+ --background-color: var(--hop-Badge-primary-background-color-hovered);
2463
+ --text-color: var(--hop-Badge-primary-text-color-hovered);
2464
+ }
2465
+ .Badge-module__hop-Badge--primary___FtMRN[data-pressed] {
2466
+ --background-color: var(--hop-Badge-primary-background-color-pressed);
2467
+ --text-color: var(--hop-Badge-primary-text-color-pressed);
2468
+ }
2469
+ .Badge-module__hop-Badge--primary___FtMRN[data-selected] {
2470
+ --background-color: var(--hop-Badge-primary-background-color-selected);
2471
+ --text-color: var(--hop-Badge-primary-text-color-selected);
2472
+ }
2473
+ .Badge-module__hop-Badge--secondary___mIP5m {
2474
+ --background-color: var(--hop-Badge-secondary-background-color);
2475
+ --text-color: var(--hop-Badge-secondary-text-color);
2476
+ }
2477
+ .Badge-module__hop-Badge--secondary___mIP5m[data-hovered] {
2478
+ --background-color: var(--hop-Badge-secondary-background-color-hovered);
2479
+ --text-color: var(--hop-Badge-secondary-text-color-hovered);
2480
+ }
2481
+ .Badge-module__hop-Badge--secondary___mIP5m[data-pressed] {
2482
+ --background-color: var(--hop-Badge-secondary-background-color-pressed);
2483
+ --text-color: var(--hop-Badge-secondary-text-color-pressed);
2484
+ }
2485
+ .Badge-module__hop-Badge--secondary___mIP5m[data-selected] {
2486
+ --background-color: var(--hop-Badge-secondary-background-color-selected);
2487
+ --text-color: var(--hop-Badge-secondary-text-color-selected);
2488
+ }
2489
+ .Badge-module__hop-Badge--subdued___8iY3E {
2490
+ --background-color: var(--hop-Badge-subdued-background-color);
2491
+ --text-color: var(--hop-Badge-subdued-text-color);
2492
+ }
2493
+ .Badge-module__hop-Badge--subdued___8iY3E[data-hovered] {
2494
+ --background-color: var(--hop-Badge-subdued-background-color-hovered);
2495
+ --text-color: var(--hop-Badge-subdued-text-color-hovered);
2496
+ }
2497
+ .Badge-module__hop-Badge--subdued___8iY3E[data-pressed] {
2498
+ --background-color: var(--hop-Badge-subdued-background-color-pressed);
2499
+ --text-color: var(--hop-Badge-subdued-text-color-pressed);
2500
+ }
2501
+ .Badge-module__hop-Badge--subdued___8iY3E[data-selected] {
2502
+ --background-color: var(--hop-Badge-subdued-background-color-selected);
2503
+ --text-color: var(--hop-Badge-subdued-text-color-selected);
2504
+ }
2505
+ .Badge-module__hop-Badge___zgMp1[data-indeterminate] {
2506
+ --border-radius: var(--hop-Badge-indeterminate-border-radius);
2507
+ --height: var(--hop-Badge-indeterminate-height);
2508
+ --width: var(--hop-Badge-indeterminate-width);
2509
+ --padding-inline: var(--hop-Badge-indeterminate-padding-inline);
2510
+ }
2511
+ .Badge-module__hop-Badge___zgMp1[data-disabled] {
2512
+ --background-color: var(--hop-Badge-background-color-disabled);
2513
+ --text-color: var(--hop-Badge-text-color-disabled);
2514
+ }
2515
+
2516
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/badge/src/FloatingBadge.module.css/#css-module-data */
2517
+ .FloatingBadge-module__hop-FloatingBadge___R2B4j {
2518
+ --hop-FloatingBadge-badge-x: calc(0% + var(--hop-FloatingBadge-offset-x));
2519
+ --hop-FloatingBadge-badge-circular-x: calc(10% + var(--hop-FloatingBadge-offset-x));
2520
+ --hop-FloatingBadge-badge-y: calc(0% + var(--hop-FloatingBadge-offset-y));
2521
+ --hop-FloatingBadge-badge-circular-y: calc(10% + var(--hop-FloatingBadge-offset-y));
2522
+ --hop-FloatingBadge-badge-topright-top: var(--hop-FloatingBadge-badge-y);
2523
+ --hop-FloatingBadge-badge-topright-right: var(--hop-FloatingBadge-badge-x);
2524
+ --hop-FloatingBadge-badge-topright-circular-top: var(--hop-FloatingBadge-badge-circular-y);
2525
+ --hop-FloatingBadge-badge-topright-circular-right: var(--hop-FloatingBadge-badge-circular-x);
2526
+ --hop-FloatingBadge-badge-topright-bottom: auto;
2527
+ --hop-FloatingBadge-badge-topright-left: auto;
2528
+ --hop-FloatingBadge-badge-topright-transform: translate(50%, -50%);
2529
+ --hop-FloatingBadge-badge-topright-transform-origin: 100% 0;
2530
+ --hop-FloatingBadge-badge-topleft-top: var(--hop-FloatingBadge-badge-y);
2531
+ --hop-FloatingBadge-badge-topleft-circular-top: var(--hop-FloatingBadge-badge-circular-y);
2532
+ --hop-FloatingBadge-badge-topleft-right: auto;
2533
+ --hop-FloatingBadge-badge-topleft-bottom: auto;
2534
+ --hop-FloatingBadge-badge-topleft-left: var(--hop-FloatingBadge-badge-x);
2535
+ --hop-FloatingBadge-badge-topleft-circular-left: var(--hop-FloatingBadge-badge-circular-x);
2536
+ --hop-FloatingBadge-badge-topleft-transform: translate(-50%, -50%);
2537
+ --hop-FloatingBadge-badge-topleft-transform-origin: 0 0;
2538
+ --hop-FloatingBadge-badge-bottomright-top: auto;
2539
+ --hop-FloatingBadge-badge-bottomright-right: var(--hop-FloatingBadge-badge-x);
2540
+ --hop-FloatingBadge-badge-bottomright-circular-right: var(--hop-FloatingBadge-badge-circular-x);
2541
+ --hop-FloatingBadge-badge-bottomright-bottom: var(--hop-FloatingBadge-badge-y);
2542
+ --hop-FloatingBadge-badge-bottomright-circular-bottom: var(--hop-FloatingBadge-badge-circular-y);
2543
+ --hop-FloatingBadge-badge-bottomright-left: auto;
2544
+ --hop-FloatingBadge-badge-bottomright-transform: translate(50%, 50%);
2545
+ --hop-FloatingBadge-badge-bottomright-transform-origin: 100% 100%;
2546
+ --hop-FloatingBadge-badge-bottomleft-top: auto;
2547
+ --hop-FloatingBadge-badge-bottomleft-right: auto;
2548
+ --hop-FloatingBadge-badge-bottomleft-bottom: var(--hop-FloatingBadge-badge-y);
2549
+ --hop-FloatingBadge-badge-bottomleft-circular-bottom: var(--hop-FloatingBadge-badge-circular-y);
2550
+ --hop-FloatingBadge-badge-bottomleft-left: var(--hop-FloatingBadge-badge-x);
2551
+ --hop-FloatingBadge-badge-bottomleft-circular-left: var(--hop-FloatingBadge-badge-circular-x);
2552
+ --hop-FloatingBadge-badge-bottomleft-transform: translate(-50%, 50%);
2553
+ --hop-FloatingBadge-badge-bottomleft-transform-origin: 0 100%;
2554
+ position: relative;
2555
+ box-sizing: border-box;
2556
+ inline-size: max-content;
2557
+ }
2558
+ .FloatingBadge-module__hop-FloatingBadge___R2B4j[data-placement="top right"] {
2559
+ --badge-top: var(--hop-FloatingBadge-badge-topright-top);
2560
+ --badge-right: var(--hop-FloatingBadge-badge-topright-right);
2561
+ --badge-bottom: var(--hop-FloatingBadge-badge-topright-bottom);
2562
+ --badge-left: var(--hop-FloatingBadge-badge-topright-left);
2563
+ --badge-transform: var(--hop-FloatingBadge-badge-topright-transform);
2564
+ --badge-transform-origin: var(--hop-FloatingBadge-badge-topright-transform-origin);
2565
+ }
2566
+ .FloatingBadge-module__hop-FloatingBadge___R2B4j[data-placement="top right"][data-overlap=circular] {
2567
+ --badge-top: var(--hop-FloatingBadge-badge-topright-circular-top);
2568
+ --badge-right: var(--hop-FloatingBadge-badge-topright-circular-right);
2569
+ }
2570
+ .FloatingBadge-module__hop-FloatingBadge___R2B4j[data-placement="top left"] {
2571
+ --badge-top: var(--hop-FloatingBadge-badge-topleft-top);
2572
+ --badge-right: var(--hop-FloatingBadge-badge-topleft-right);
2573
+ --badge-bottom: var(--hop-FloatingBadge-badge-topleft-bottom);
2574
+ --badge-left: var(--hop-FloatingBadge-badge-topleft-left);
2575
+ --badge-transform: var(--hop-FloatingBadge-badge-topleft-transform);
2576
+ --badge-transform-origin: var(--hop-FloatingBadge-badge-topleft-transform-origin);
2577
+ }
2578
+ .FloatingBadge-module__hop-FloatingBadge___R2B4j[data-placement="top left"][data-overlap=circular] {
2579
+ --badge-top: var(--hop-FloatingBadge-badge-topleft-circular-top);
2580
+ --badge-left: var(--hop-FloatingBadge-badge-topleft-circular-left);
2581
+ }
2582
+ .FloatingBadge-module__hop-FloatingBadge___R2B4j[data-placement="bottom right"] {
2583
+ --badge-top: var(--hop-FloatingBadge-badge-bottomright-top);
2584
+ --badge-right: var(--hop-FloatingBadge-badge-bottomright-right);
2585
+ --badge-bottom: var(--hop-FloatingBadge-badge-bottomright-bottom);
2586
+ --badge-left: var(--hop-FloatingBadge-badge-bottomright-left);
2587
+ --badge-transform: var(--hop-FloatingBadge-badge-bottomright-transform);
2588
+ --badge-transform-origin: var(--hop-FloatingBadge-badge-bottomright-transform-origin);
2589
+ }
2590
+ .FloatingBadge-module__hop-FloatingBadge___R2B4j[data-placement="bottom right"][data-overlap=circular] {
2591
+ --badge-right: var(--hop-FloatingBadge-badge-bottomright-circular-right);
2592
+ --badge-bottom: var(--hop-FloatingBadge-badge-bottomright-circular-bottom);
2593
+ }
2594
+ .FloatingBadge-module__hop-FloatingBadge___R2B4j[data-placement="bottom left"] {
2595
+ --badge-top: var(--hop-FloatingBadge-badge-bottomleft-top);
2596
+ --badge-right: var(--hop-FloatingBadge-badge-bottomleft-right);
2597
+ --badge-bottom: var(--hop-FloatingBadge-badge-bottomleft-bottom);
2598
+ --badge-left: var(--hop-FloatingBadge-badge-bottomleft-left);
2599
+ --badge-transform: var(--hop-FloatingBadge-badge-bottomleft-transform);
2600
+ --badge-transform-origin: var(--hop-FloatingBadge-badge-bottomleft-transform-origin);
2601
+ }
2602
+ .FloatingBadge-module__hop-FloatingBadge___R2B4j[data-placement="bottom left"][data-overlap=circular] {
2603
+ --badge-bottom: var(--hop-FloatingBadge-badge-bottomleft-circular-bottom);
2604
+ --badge-left: var(--hop-FloatingBadge-badge-bottomleft-circular-left);
2605
+ }
2606
+ .FloatingBadge-module__hop-FloatingBadge__badge___CDxdk {
2607
+ position: absolute;
2608
+ inset: var(--badge-top) var(--badge-right) var(--badge-bottom) var(--badge-left);
2609
+ transform-origin: var(--badge-transform-origin);
2610
+ transform: var(--badge-transform);
2611
+ }
2612
+
2613
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/checkbox/src/Checkbox.module.css/#css-module-data */
2614
+ .Checkbox-module__hop-Checkbox___5v0b4 {
2615
+ --hop-Checkbox-box-border-size: 0.0625rem;
2616
+ --hop-Checkbox-box-border-color: var(--hop-neutral-border);
2617
+ --hop-Checkbox-box-background-color: var(--hop-neutral-surface);
2618
+ --hop-Checkbox-box-outline-size: 0.125rem;
2619
+ --hop-Checkbox-box-outline-color: var(--hop-primary-border-focus);
2620
+ --hop-Checkbox-check-color: var(--hop-neutral-icon-selected);
2621
+ --hop-Checkbox-check-display: none;
2622
+ --hop-Checkbox-text-color: var(--hop-neutral-text);
2623
+ --hop-Checkbox-icon-color: var(--hop-neutral-icon);
2624
+ --hop-Checkbox-box-border-color-hovered: var(--hop-neutral-border-hover);
2625
+ --hop-Checkbox-box-background-color-hovered: var(--hop-neutral-surface-hover);
2626
+ --hop-Checkbox-text-color-hovered: var(--hop-neutral-text-hover);
2627
+ --hop-Checkbox-icon-color-hovered: var(--hop-neutral-icon-hover);
2628
+ --hop-Checkbox-box-border-color-pressed: var(--hop-neutral-border-press);
2629
+ --hop-Checkbox-box-background-color-pressed: var(--hop-neutral-surface-press);
2630
+ --hop-Checkbox-text-color-pressed: var(--hop-neutral-text-press);
2631
+ --hop-Checkbox-icon-color-pressed: var(--hop-neutral-icon-press);
2632
+ --hop-Checkbox-box-border-color-selected: var(--hop-neutral-border-selected);
2633
+ --hop-Checkbox-box-background-color-selected: var(--hop-neutral-surface-selected);
2634
+ --hop-Checkbox-check-display-selected: block;
2635
+ --hop-Checkbox-text-color-selected: var(--hop-neutral-text);
2636
+ --hop-Checkbox-icon-color-selected: var(--hop-neutral-icon);
2637
+ --hop-Checkbox-box-border-color-disabled: var(--hop-neutral-border-disabled);
2638
+ --hop-Checkbox-box-background-color-disabled: var(--hop-neutral-surface-disabled);
2639
+ --hop-Checkbox-check-color-disabled: var(--hop-neutral-icon-disabled);
2640
+ --hop-Checkbox-text-color-disabled: var(--hop-neutral-text-disabled);
2641
+ --hop-Checkbox-icon-color-disabled: var(--hop-neutral-icon-disabled);
2642
+ --hop-Checkbox-box-border-color-focused: var(--hop-neutral-border-hover);
2643
+ --hop-Checkbox-box-background-color-focused: var(--hop-neutral-surface-hover);
2644
+ --hop-Checkbox-text-color-focused: var(--hop-neutral-text-hover);
2645
+ --hop-Checkbox-icon-color-focused: var(--hop-neutral-icon-hover);
2646
+ --hop-Checkbox-box-border-color-invalid: var(--hop-danger-border-strong);
2647
+ --hop-Checkbox-box-background-color-invalid: var(--hop-neutral-surface);
2648
+ --hop-Checkbox-box-border-color-hovered-invalid: var(--hop-danger-border-strong);
2649
+ --hop-Checkbox-box-background-color-hovered-invalid: var(--hop-danger-surface-weak-hover);
2650
+ --hop-Checkbox-box-border-color-pressed-invalid: var(--hop-danger-border-press);
2651
+ --hop-Checkbox-box-background-color-pressed-invalid: var(--hop-danger-surface-weak-press);
2652
+ --hop-Checkbox-box-border-color-focused-invalid: var(--hop-danger-border-press);
2653
+ --hop-Checkbox-box-background-color-focused-invalid: var(--hop-danger-surface);
2654
+ --hop-Checkbox-box-border-color-selected-invalid: var(--hop-danger-border-strong);
2655
+ --hop-Checkbox-box-background-color-selected-invalid: var(--hop-danger-surface-strong);
2656
+ --hop-Checkbox-check-color-invalid: var(--hop-danger-icon-strong);
2657
+ --hop-Checkbox-text-color-invalid: var(--hop-danger-text-weak);
2658
+ --hop-Checkbox-text-color-hovered-invalid: var(--hop-danger-text-weak-hover);
2659
+ --hop-Checkbox-text-color-pressed-invalid: var(--hop-danger-text-weak-press);
2660
+ --hop-Checkbox-icon-color-invalid: var(--hop-danger-icon-weak);
2661
+ --hop-Checkbox-icon-color-hovered-invalid: var(--hop-danger-icon-weak-hover);
2662
+ --hop-Checkbox-icon-color-pressed-invalid: var(--hop-danger-icon-weak-press);
2663
+ --hop-Checkbox-box-sm-block-size: 1rem;
2664
+ --hop-Checkbox-box-sm-inline-size: 1rem;
2665
+ --hop-Checkbox-text-sm-top-offset: calc((var(--box-inline-size) - (var(--hop-body-sm-line-height) * var(--hop-body-sm-font-size))) / 2);
2666
+ --hop-Checkbox-text-sm-margin-inline-start: calc(var(--hop-space-inline-sm) - var(--hop-space-inline-xs));
2667
+ --hop-Checkbox-box-md-block-size: 1.5rem;
2668
+ --hop-Checkbox-box-md-inline-size: 1.5rem;
2669
+ --hop-Checkbox-text-md-top-offset: calc((var(--box-inline-size) - (var(--hop-body-md-line-height) * var(--hop-body-md-font-size))) / 2);
2670
+ --hop-Checkbox-text-md-margin-inline-start: calc(var(--hop-space-inline-md) - var(--hop-space-inline-xs));
2671
+ --box-background-color: var(--hop-Checkbox-box-background-color);
2672
+ --box-border-color: var(--hop-Checkbox-box-border-color);
2673
+ --box-border-radius: var(--hop-shape-rounded-sm);
2674
+ --check-color: var(--hop-Checkbox-check-color);
2675
+ --check-display: var(--hop-Checkbox-check-display);
2676
+ --cursor: pointer;
2677
+ --text-color: var(--hop-Checkbox-text-color);
2678
+ --icon-color: var(--hop-Checkbox-icon-color);
2679
+ --transition-duration: var(--hop-easing-duration-2);
2680
+ cursor: var(--cursor);
2681
+ display: flex;
2682
+ column-gap: var(--hop-space-inline-xs);
2683
+ align-items: flex-start;
2684
+ justify-content: flex-start;
2685
+ box-sizing: border-box;
2686
+ inline-size: max-content;
2687
+ max-inline-size: 100%;
2688
+ }
2689
+ .Checkbox-module__hop-Checkbox___5v0b4[data-focus-visible] {
2690
+ --box-background-color: var(--hop-Checkbox-box-background-color-focused);
2691
+ --box-border-color: var(--hop-Checkbox-box-border-color-focused);
2692
+ --box-outline: var(--hop-Checkbox-box-outline-size) solid var(--hop-Checkbox-box-outline-color);
2693
+ --text-color: var(--hop-Checkbox-text-color-focused);
2694
+ --icon-color: var(--hop-Checkbox-icon-color-focused);
2695
+ }
2696
+ .Checkbox-module__hop-Checkbox___5v0b4[data-hovered] {
2697
+ --box-background-color: var(--hop-Checkbox-box-background-color-hovered);
2698
+ --box-border-color: var(--hop-Checkbox-box-border-color-hovered);
2699
+ --text-color: var(--hop-Checkbox-text-color-hovered);
2700
+ --icon-color: var(--hop-Checkbox-icon-color-hovered);
2701
+ }
2702
+ .Checkbox-module__hop-Checkbox___5v0b4[data-pressed] {
2703
+ --box-background-color: var(--hop-Checkbox-box-background-color-pressed);
2704
+ --box-border-color: var(--hop-Checkbox-box-border-color-pressed);
2705
+ --text-color: var(--hop-Checkbox-text-color-pressed);
2706
+ --icon-color: var(--hop-Checkbox-icon-color-pressed);
2707
+ }
2708
+ .Checkbox-module__hop-Checkbox___5v0b4[data-selected] {
2709
+ --box-background-color: var(--hop-Checkbox-box-background-color-selected);
2710
+ --box-border-color: var(--hop-Checkbox-box-border-color-selected);
2711
+ --check-display: var(--hop-Checkbox-check-display-selected);
2712
+ --text-color: var(--hop-Checkbox-text-color-selected);
2713
+ --icon-color: var(--hop-Checkbox-icon-color-selected);
2714
+ }
2715
+ .Checkbox-module__hop-Checkbox___5v0b4[data-invalid] {
2716
+ --box-background-color: var(--hop-Checkbox-box-background-color-invalid);
2717
+ --box-border-color: var(--hop-Checkbox-box-border-color-invalid);
2718
+ --check-color: var(--hop-Checkbox-check-color-invalid);
2719
+ --text-color: var(--hop-Checkbox-text-color-invalid);
2720
+ --icon-color: var(--hop-Checkbox-icon-color-invalid);
2721
+ }
2722
+ .Checkbox-module__hop-Checkbox___5v0b4[data-invalid]:where([data-focus-visible]) {
2723
+ --box-background-color: var(--hop-Checkbox-box-background-color-focused-invalid);
2724
+ --box-border-color: var(--hop-Checkbox-box-border-color-focused-invalid);
2725
+ }
2726
+ .Checkbox-module__hop-Checkbox___5v0b4[data-invalid]:where([data-hovered]) {
2727
+ --box-background-color: var(--hop-Checkbox-box-background-color-hovered-invalid);
2728
+ --box-border-color: var(--hop-Checkbox-box-border-color-hovered-invalid);
2729
+ --text-color: var(--hop-Checkbox-text-color-hovered-invalid);
2730
+ --icon-color: var(--hop-Checkbox-icon-color-hovered-invalid);
2731
+ }
2732
+ .Checkbox-module__hop-Checkbox___5v0b4[data-invalid]:where([data-pressed]) {
2733
+ --box-background-color: var(--hop-Checkbox-box-background-color-pressed-invalid);
2734
+ --box-border-color: var(--hop-Checkbox-box-border-color-pressed-invalid);
2735
+ --text-color: var(--hop-Checkbox-text-color-pressed-invalid);
2736
+ --icon-color: var(--hop-Checkbox-icon-color-pressed-invalid);
2737
+ }
2738
+ .Checkbox-module__hop-Checkbox___5v0b4:where([data-invalid])[data-selected] {
2739
+ --box-background-color: var(--hop-Checkbox-box-background-color-selected-invalid);
2740
+ --box-border-color: var(--hop-Checkbox-box-border-color-selected-invalid);
2741
+ }
2742
+ .Checkbox-module__hop-Checkbox___5v0b4[data-disabled] {
2743
+ --box-background-color: var(--hop-Checkbox-box-background-color-disabled);
2744
+ --box-border-color: var(--hop-Checkbox-box-border-color-disabled);
2745
+ --check-color: var(--hop-Checkbox-check-color-disabled);
2746
+ --cursor: not-allowed;
2747
+ --text-color: var(--hop-Checkbox-text-color-disabled);
2748
+ --icon-color: var(--hop-Checkbox-icon-color-disabled);
2749
+ }
2750
+ .Checkbox-module__hop-Checkbox--sm___dSQOY {
2751
+ --box-block-size: var(--hop-Checkbox-box-sm-block-size);
2752
+ --box-inline-size: var(--hop-Checkbox-box-sm-inline-size);
2753
+ --text-top-offset: var(--hop-Checkbox-text-sm-top-offset);
2754
+ --text-margin-inline-start: var(--hop-Checkbox-text-sm-margin-inline-start);
2755
+ }
2756
+ .Checkbox-module__hop-Checkbox--md___TOu-C {
2757
+ --box-block-size: var(--hop-Checkbox-box-md-block-size);
2758
+ --box-inline-size: var(--hop-Checkbox-box-md-inline-size);
2759
+ --text-top-offset: var(--hop-Checkbox-text-md-top-offset);
2760
+ --text-margin-inline-start: var(--hop-Checkbox-text-md-margin-inline-start);
2761
+ }
2762
+ .Checkbox-module__hop-Checkbox__icon___nd2aw,
2763
+ .Checkbox-module__hop-Checkbox__icon-list___5WN5y {
2764
+ flex: 0 0 auto;
2765
+ order: 3;
2766
+ color: var(--icon-color);
2767
+ }
2768
+ .Checkbox-module__hop-Checkbox__box___jxojt {
2769
+ display: flex;
2770
+ flex: 0 0 auto;
2771
+ align-items: center;
2772
+ justify-content: center;
2773
+ order: 1;
2774
+ box-sizing: border-box;
2775
+ inline-size: var(--box-inline-size, var(--hop-Checkbox-box-md-inline-size));
2776
+ block-size: var(--box-block-size, var(--hop-Checkbox-box-md-block-size));
2777
+ background-color: var(--box-background-color);
2778
+ border: var(--hop-Checkbox-box-border-size) solid var(--box-border-color);
2779
+ border-radius: var(--box-border-radius);
2780
+ outline: var(--box-outline, none);
2781
+ outline-offset: 0.125rem;
2782
+ transition: background-color var(--transition-duration) var(--hop-easing-productive), border var(--transition-duration) var(--hop-easing-productive);
2783
+ }
2784
+ .Checkbox-module__hop-Checkbox__check___AxXm6 {
2785
+ display: var(--check-display);
2786
+ color: var(--check-color);
2787
+ }
2788
+ .Checkbox-module__hop-Checkbox__text___RWv7Z {
2789
+ flex: 0 1 auto;
2790
+ order: 2;
2791
+ min-inline-size: 0;
2792
+ margin-block-start: var(--text-top-offset, var(--hop-Checkbox-text-md-top-offset));
2793
+ margin-inline-start: var(--text-margin-inline-start, var(--hop-Checkbox-text-md-margin-inline-start));
2794
+ color: var(--text-color);
2795
+ }
2796
+
2797
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/checkbox/src/CheckboxField.module.css/#css-module-data */
2798
+ .CheckboxField-module__hop-CheckboxField___Moz-- {
2799
+ --hop-CheckboxField-description-color: var(--hop-neutral-text-weak);
2800
+ --hop-CheckboxField-description-color-disabled: var(--hop-neutral-text-disabled);
2801
+ --hop-CheckboxField-sm-row-gap: var(--hop-space-stack-xs);
2802
+ --hop-CheckboxField-checkbox-sm-inline-size: 1rem;
2803
+ --hop-CheckboxField-description-sm-margin-inline-start: calc(var(--hop-CheckboxField-checkbox-sm-inline-size) + var(--hop-space-inline-sm));
2804
+ --hop-CheckboxField-md-row-gap: var(--hop-space-stack-xs);
2805
+ --hop-CheckboxField-checkbox-md-inline-size: 1.5rem;
2806
+ --hop-CheckboxField-description-md-margin-inline-start: calc(var(--hop-CheckboxField-checkbox-md-inline-size) + var(--hop-space-inline-md));
2807
+ --description-color: var(--hop-CheckboxField-description-color);
2808
+ display: flex;
2809
+ flex-direction: column;
2810
+ row-gap: var(--row-gap, var(--hop-space-stack-sm));
2811
+ align-items: flex-start;
2812
+ justify-content: flex-start;
2813
+ box-sizing: border-box;
2814
+ inline-size: max-content;
2815
+ max-inline-size: 100%;
2816
+ }
2817
+ .CheckboxField-module__hop-CheckboxField___Moz--[data-disabled] {
2818
+ --description-color: var(--hop-CheckboxField-description-color-disabled);
2819
+ }
2820
+ .CheckboxField-module__hop-CheckboxField--sm___WFkN2 {
2821
+ --row-gap: var(--hop-CheckboxField-sm-row-gap);
2822
+ --description-margin-inline-start: var(--hop-CheckboxField-description-sm-margin-inline-start);
2823
+ }
2824
+ .CheckboxField-module__hop-CheckboxField--md___0I29B {
2825
+ --row-gap: var(--hop-CheckboxField-md-row-gap);
2826
+ --description-margin-inline-start: var(--hop-CheckboxField-description-md-margin-inline-start);
2827
+ }
2828
+ .CheckboxField-module__hop-CheckboxField__description___FQ5t0 {
2829
+ order: 2;
2830
+ margin-inline-start: var(--description-margin-inline-start, var(--hop-CheckboxField-description-md-margin-inline-start));
2831
+ color: var(--description-color);
2832
+ }
2833
+ .CheckboxField-module__hop-CheckboxField__checkbox___hNlqN {
2834
+ order: 1;
2835
+ }
2836
+
2837
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/error-message/src/ErrorMessage.module.css/#css-module-data */
2838
+ .ErrorMessage-module__hop-ErrorMessage___V-yBH {
2839
+ --hop-ErrorMessage-color: var(--hop-danger-text-weak);
2840
+ --hop-ErrorMessage-font-family: var(--hop-body-xs-font-family);
2841
+ --hop-ErrorMessage-font-size: var(--hop-body-xs-font-size);
2842
+ --hop-ErrorMessage-font-weight: var(--hop-body-xs-font-weight);
2843
+ --hop-ErrorMessage-line-height: var(--hop-body-xs-line-height);
2844
+ --hop-ErrorMessage-column-gap: var(--hop-space-inline-xs);
2845
+ display: flex;
2846
+ column-gap: var(--hop-ErrorMessage-column-gap);
2847
+ align-items: center;
2848
+ box-sizing: border-box;
2849
+ font-family: var(--hop-ErrorMessage-font-family);
2850
+ font-size: var(--hop-ErrorMessage-font-size);
2851
+ font-weight: var(--hop-ErrorMessage-font-weight);
2852
+ line-height: var(--hop-ErrorMessage-line-height);
2853
+ color: var(--hop-ErrorMessage-color);
2854
+ }
2855
+ .ErrorMessage-module__hop-ErrorMessage__icon___DIRtx {
2856
+ flex: 0 0 auto;
2857
+ align-self: flex-start;
2858
+ }
2859
+
2860
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/helper-message/src/HelperMessage.module.css/#css-module-data */
2861
+ .HelperMessage-module__hop-HelperMessage___eMQ7m {
2862
+ --hop-HelperMessage-color: var(--hop-neutral-text-weak);
2863
+ --hop-HelperMessage-column-gap: var(--hop-space-inline-xs);
2864
+ display: flex;
2865
+ column-gap: var(--hop-HelperMessage-column-gap);
2866
+ align-items: center;
2867
+ box-sizing: border-box;
2868
+ color: var(--hop-HelperMessage-color);
2869
+ }
2870
+ .HelperMessage-module__hop-HelperMessage__icon___hi1Mh {
2871
+ flex: 0 0 auto;
2872
+ align-self: flex-start;
2873
+ }
2874
+
2875
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/checkbox/src/CheckboxGroup.module.css/#css-module-data */
2876
+ .CheckboxGroup-module__hop-CheckboxGroup___FPWi2 {
2877
+ --hop-CheckboxGroup-align-items: flex-start;
2878
+ --hop-CheckboxGroup-justify-content: flex-start;
2879
+ --hop-CheckboxGroup-bordered-border-color: var(--hop-neutral-border-weak);
2880
+ --hop-CheckboxGroup-sm-column-gap: var(--hop-space-inline-sm);
2881
+ --hop-CheckboxGroup-sm-row-gap: var(--hop-space-stack-sm);
2882
+ --hop-CheckboxGroup-list-sm-column-gap: var(--hop-space-inline-sm);
2883
+ --hop-CheckboxGroup-list-sm-row-gap: var(--hop-space-stack-sm);
2884
+ --hop-CheckboxGroup-bordered-sm-padding: var(--hop-space-inset-sm);
2885
+ --hop-CheckboxGroup-bordered-sm-column-gap: var(--hop-space-inline-sm);
2886
+ --hop-CheckboxGroup-bordered-sm-row-gap: var(--hop-space-stack-sm);
2887
+ --hop-CheckboxGroup-list-bordered-sm-column-gap: 0;
2888
+ --hop-CheckboxGroup-list-bordered-sm-row-gap: 0;
2889
+ --hop-CheckboxGroup-md-column-gap: var(--hop-space-inline-md);
2890
+ --hop-CheckboxGroup-md-row-gap: var(--hop-space-stack-md);
2891
+ --hop-CheckboxGroup-list-md-column-gap: var(--hop-space-inline-md);
2892
+ --hop-CheckboxGroup-list-md-row-gap: var(--hop-space-stack-md);
2893
+ --hop-CheckboxGroup-bordered-md-padding: var(--hop-space-inset-md);
2894
+ --hop-CheckboxGroup-bordered-md-column-gap: var(--hop-space-inline-sm);
2895
+ --hop-CheckboxGroup-bordered-md-row-gap: var(--hop-space-stack-sm);
2896
+ --hop-CheckboxGroup-list-bordered-md-column-gap: 0;
2897
+ --hop-CheckboxGroup-list-bordered-md-row-gap: 0;
2898
+ --hop-CheckboxGroup-vertical-flex-direction: column;
2899
+ --hop-CheckboxGroup-horizontal-flex-direction: row;
2900
+ --checkbox-border-size: 0.0625rem;
2901
+ --checkbox-border-color: var(--hop-neutral-border-weak);
2902
+ --flex-direction: var(--hop-CheckboxGroup-vertical-flex-direction);
2903
+ --align-items: var(--hop-CheckboxGroup-align-items);
2904
+ --justify-content: var(--hop-CheckboxGroup-justify-content);
2905
+ --flex-wrap: wrap;
2906
+ display: flex;
2907
+ flex-direction: column;
2908
+ gap: var(--row-gap, var(--hop-space-stack-md)) var(--column-gap, var(--hop-space-inline-md));
2909
+ align-items: var(--align-items);
2910
+ justify-content: var(--justify-content);
2911
+ box-sizing: border-box;
2912
+ inline-size: max-content;
2913
+ max-inline-size: 100%;
2914
+ }
2915
+ .CheckboxGroup-module__hop-CheckboxGroup--bordered___eaDJ- {
2916
+ --list-border: var(--checkbox-border-size) solid var(--checkbox-border-color);
2917
+ --list-border-radius: var(--hop-shape-rounded-md);
2918
+ }
2919
+ .CheckboxGroup-module__hop-CheckboxGroup--sm___vIgLP {
2920
+ --column-gap: var(--hop-CheckboxGroup-sm-column-gap);
2921
+ --row-gap: var(--hop-CheckboxGroup-sm-row-gap);
2922
+ --list-column-gap: var(--hop-CheckboxGroup-list-sm-column-gap);
2923
+ --list-row-gap: var(--hop-CheckboxGroup-list-sm-row-gap);
2924
+ }
2925
+ .CheckboxGroup-module__hop-CheckboxGroup--md___XAwZY {
2926
+ --column-gap: var(--hop-CheckboxGroup-md-column-gap);
2927
+ --row-gap: var(--hop-CheckboxGroup-md-row-gap);
2928
+ --list-column-gap: var(--hop-CheckboxGroup-list-md-column-gap);
2929
+ --list-row-gap: var(--hop-CheckboxGroup-list-md-row-gap);
2930
+ }
2931
+ .CheckboxGroup-module__hop-CheckboxGroup--bordered___eaDJ-.CheckboxGroup-module__hop-CheckboxGroup--sm___vIgLP {
2932
+ --checkbox-padding: var(--hop-CheckboxGroup-bordered-sm-padding);
2933
+ --column-gap: var(--hop-CheckboxGroup-bordered-sm-column-gap);
2934
+ --row-gap: var(--hop-CheckboxGroup-bordered-sm-row-gap);
2935
+ --list-column-gap: var(--hop-CheckboxGroup-list-bordered-sm-column-gap);
2936
+ --list-row-gap: var(--hop-CheckboxGroup-list-bordered-sm-row-gap);
2937
+ }
2938
+ .CheckboxGroup-module__hop-CheckboxGroup--bordered___eaDJ-.CheckboxGroup-module__hop-CheckboxGroup--md___XAwZY {
2939
+ --checkbox-padding: var(--hop-CheckboxGroup-bordered-md-padding);
2940
+ --column-gap: var(--hop-CheckboxGroup-bordered-md-column-gap);
2941
+ --row-gap: var(--hop-CheckboxGroup-bordered-md-row-gap);
2942
+ --list-column-gap: var(--hop-CheckboxGroup-list-bordered-md-column-gap);
2943
+ --list-row-gap: var(--hop-CheckboxGroup-list-bordered-md-row-gap);
2944
+ }
2945
+ .CheckboxGroup-module__hop-CheckboxGroup___FPWi2[data-orientation=horizontal] {
2946
+ --flex-direction: var(--hop-CheckboxGroup-horizontal-flex-direction);
2947
+ }
2948
+ .CheckboxGroup-module__hop-CheckboxGroup--bordered___eaDJ-[data-orientation=horizontal] {
2949
+ --flex-wrap: nowrap;
2950
+ }
2951
+ .CheckboxGroup-module__hop-CheckboxGroup___FPWi2 > .CheckboxGroup-module__hop-CheckboxGroup__label___5XiPD {
2952
+ order: 1;
2953
+ }
2954
+ .CheckboxGroup-module__hop-CheckboxGroup__list___CDciU {
2955
+ display: flex;
2956
+ flex-flow: var(--flex-direction) var(--flex-wrap);
2957
+ gap: var(--list-row-gap, var(--hop-space-stack-md)) var(--list-column-gap, var(--hop-space-inline-md));
2958
+ order: 2;
2959
+ box-sizing: border-box;
2960
+ inline-size: max-content;
2961
+ max-inline-size: 100%;
2962
+ border: var(--list-border, none);
2963
+ border-radius: var(--list-border-radius, 0);
2964
+ }
2965
+ .CheckboxGroup-module__hop-CheckboxGroup__list___CDciU > .CheckboxGroup-module__hop-CheckboxGroup__checkbox___0tf6w {
2966
+ position: relative;
2967
+ flex: 0 1 auto;
2968
+ align-content: start;
2969
+ inline-size: auto;
2970
+ min-inline-size: 0;
2971
+ padding: var(--checkbox-padding, 0);
2972
+ }
2973
+ .CheckboxGroup-module__hop-CheckboxGroup--bordered___eaDJ- .CheckboxGroup-module__hop-CheckboxGroup__list___CDciU > .CheckboxGroup-module__hop-CheckboxGroup__checkbox___0tf6w ~ .CheckboxGroup-module__hop-CheckboxGroup__checkbox___0tf6w::before {
2974
+ content: "";
2975
+ position: absolute;
2976
+ display: block;
2977
+ }
2978
+ .CheckboxGroup-module__hop-CheckboxGroup--bordered___eaDJ-[data-orientation=vertical] .CheckboxGroup-module__hop-CheckboxGroup__list___CDciU > .CheckboxGroup-module__hop-CheckboxGroup__checkbox___0tf6w ~ .CheckboxGroup-module__hop-CheckboxGroup__checkbox___0tf6w::before {
2979
+ inset-block-start: 0;
2980
+ inset-inline: 0;
2981
+ border-block-start: var(--list-border, none);
2982
+ }
2983
+ .CheckboxGroup-module__hop-CheckboxGroup--bordered___eaDJ-[data-orientation=horizontal] .CheckboxGroup-module__hop-CheckboxGroup__list___CDciU > .CheckboxGroup-module__hop-CheckboxGroup__checkbox___0tf6w ~ .CheckboxGroup-module__hop-CheckboxGroup__checkbox___0tf6w::before {
2984
+ inset-block: 0;
2985
+ inset-inline-start: 0;
2986
+ border-inline-start: var(--list-border, none);
2987
+ }
2988
+ .CheckboxGroup-module__hop-CheckboxGroup___FPWi2 > .CheckboxGroup-module__hop-CheckboxGroup__error-message___fx1ES,
2989
+ .CheckboxGroup-module__hop-CheckboxGroup___FPWi2 > .CheckboxGroup-module__hop-CheckboxGroup__helper-message___JhiB- {
2990
+ order: 3;
2991
+ }
2992
+
2993
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/checkbox/src/DecorativeCheckbox.module.css/#css-module-data */
2994
+ .Checkbox-module__hop-Checkbox___5v0b4 {
2995
+ --hop-Checkbox-box-border-size: 0.0625rem;
2996
+ --hop-Checkbox-box-border-color: var(--hop-neutral-border);
2997
+ --hop-Checkbox-box-background-color: var(--hop-neutral-surface);
2998
+ --hop-Checkbox-box-outline-size: 0.125rem;
2999
+ --hop-Checkbox-box-outline-color: var(--hop-primary-border-focus);
3000
+ --hop-Checkbox-check-color: var(--hop-neutral-icon-selected);
3001
+ --hop-Checkbox-check-display: none;
3002
+ --hop-Checkbox-text-color: var(--hop-neutral-text);
3003
+ --hop-Checkbox-icon-color: var(--hop-neutral-icon);
3004
+ --hop-Checkbox-box-border-color-hovered: var(--hop-neutral-border-hover);
3005
+ --hop-Checkbox-box-background-color-hovered: var(--hop-neutral-surface-hover);
3006
+ --hop-Checkbox-text-color-hovered: var(--hop-neutral-text-hover);
3007
+ --hop-Checkbox-icon-color-hovered: var(--hop-neutral-icon-hover);
3008
+ --hop-Checkbox-box-border-color-pressed: var(--hop-neutral-border-press);
3009
+ --hop-Checkbox-box-background-color-pressed: var(--hop-neutral-surface-press);
3010
+ --hop-Checkbox-text-color-pressed: var(--hop-neutral-text-press);
3011
+ --hop-Checkbox-icon-color-pressed: var(--hop-neutral-icon-press);
3012
+ --hop-Checkbox-box-border-color-selected: var(--hop-neutral-border-selected);
3013
+ --hop-Checkbox-box-background-color-selected: var(--hop-neutral-surface-selected);
3014
+ --hop-Checkbox-check-display-selected: block;
3015
+ --hop-Checkbox-text-color-selected: var(--hop-neutral-text);
3016
+ --hop-Checkbox-icon-color-selected: var(--hop-neutral-icon);
3017
+ --hop-Checkbox-box-border-color-disabled: var(--hop-neutral-border-disabled);
3018
+ --hop-Checkbox-box-background-color-disabled: var(--hop-neutral-surface-disabled);
3019
+ --hop-Checkbox-check-color-disabled: var(--hop-neutral-icon-disabled);
3020
+ --hop-Checkbox-text-color-disabled: var(--hop-neutral-text-disabled);
3021
+ --hop-Checkbox-icon-color-disabled: var(--hop-neutral-icon-disabled);
3022
+ --hop-Checkbox-box-border-color-focused: var(--hop-neutral-border-hover);
3023
+ --hop-Checkbox-box-background-color-focused: var(--hop-neutral-surface-hover);
3024
+ --hop-Checkbox-text-color-focused: var(--hop-neutral-text-hover);
3025
+ --hop-Checkbox-icon-color-focused: var(--hop-neutral-icon-hover);
3026
+ --hop-Checkbox-box-border-color-invalid: var(--hop-danger-border-strong);
3027
+ --hop-Checkbox-box-background-color-invalid: var(--hop-neutral-surface);
3028
+ --hop-Checkbox-box-border-color-hovered-invalid: var(--hop-danger-border-strong);
3029
+ --hop-Checkbox-box-background-color-hovered-invalid: var(--hop-danger-surface-weak-hover);
3030
+ --hop-Checkbox-box-border-color-pressed-invalid: var(--hop-danger-border-press);
3031
+ --hop-Checkbox-box-background-color-pressed-invalid: var(--hop-danger-surface-weak-press);
3032
+ --hop-Checkbox-box-border-color-focused-invalid: var(--hop-danger-border-press);
3033
+ --hop-Checkbox-box-background-color-focused-invalid: var(--hop-danger-surface);
3034
+ --hop-Checkbox-box-border-color-selected-invalid: var(--hop-danger-border-strong);
3035
+ --hop-Checkbox-box-background-color-selected-invalid: var(--hop-danger-surface-strong);
3036
+ --hop-Checkbox-check-color-invalid: var(--hop-danger-icon-strong);
3037
+ --hop-Checkbox-text-color-invalid: var(--hop-danger-text-weak);
3038
+ --hop-Checkbox-text-color-hovered-invalid: var(--hop-danger-text-weak-hover);
3039
+ --hop-Checkbox-text-color-pressed-invalid: var(--hop-danger-text-weak-press);
3040
+ --hop-Checkbox-icon-color-invalid: var(--hop-danger-icon-weak);
3041
+ --hop-Checkbox-icon-color-hovered-invalid: var(--hop-danger-icon-weak-hover);
3042
+ --hop-Checkbox-icon-color-pressed-invalid: var(--hop-danger-icon-weak-press);
3043
+ --hop-Checkbox-box-sm-block-size: 1rem;
3044
+ --hop-Checkbox-box-sm-inline-size: 1rem;
3045
+ --hop-Checkbox-text-sm-top-offset: calc((var(--box-inline-size) - (var(--hop-body-sm-line-height) * var(--hop-body-sm-font-size))) / 2);
3046
+ --hop-Checkbox-text-sm-margin-inline-start: calc(var(--hop-space-inline-sm) - var(--hop-space-inline-xs));
3047
+ --hop-Checkbox-box-md-block-size: 1.5rem;
3048
+ --hop-Checkbox-box-md-inline-size: 1.5rem;
3049
+ --hop-Checkbox-text-md-top-offset: calc((var(--box-inline-size) - (var(--hop-body-md-line-height) * var(--hop-body-md-font-size))) / 2);
3050
+ --hop-Checkbox-text-md-margin-inline-start: calc(var(--hop-space-inline-md) - var(--hop-space-inline-xs));
3051
+ --box-background-color: var(--hop-Checkbox-box-background-color);
3052
+ --box-border-color: var(--hop-Checkbox-box-border-color);
3053
+ --box-border-radius: var(--hop-shape-rounded-sm);
3054
+ --check-color: var(--hop-Checkbox-check-color);
3055
+ --check-display: var(--hop-Checkbox-check-display);
3056
+ --cursor: pointer;
3057
+ --text-color: var(--hop-Checkbox-text-color);
3058
+ --icon-color: var(--hop-Checkbox-icon-color);
3059
+ --transition-duration: var(--hop-easing-duration-2);
3060
+ cursor: var(--cursor);
3061
+ display: flex;
3062
+ column-gap: var(--hop-space-inline-xs);
3063
+ align-items: flex-start;
3064
+ justify-content: flex-start;
3065
+ box-sizing: border-box;
3066
+ inline-size: max-content;
3067
+ max-inline-size: 100%;
3068
+ }
3069
+ .Checkbox-module__hop-Checkbox___5v0b4[data-focus-visible] {
3070
+ --box-background-color: var(--hop-Checkbox-box-background-color-focused);
3071
+ --box-border-color: var(--hop-Checkbox-box-border-color-focused);
3072
+ --box-outline: var(--hop-Checkbox-box-outline-size) solid var(--hop-Checkbox-box-outline-color);
3073
+ --text-color: var(--hop-Checkbox-text-color-focused);
3074
+ --icon-color: var(--hop-Checkbox-icon-color-focused);
3075
+ }
3076
+ .Checkbox-module__hop-Checkbox___5v0b4[data-hovered] {
3077
+ --box-background-color: var(--hop-Checkbox-box-background-color-hovered);
3078
+ --box-border-color: var(--hop-Checkbox-box-border-color-hovered);
3079
+ --text-color: var(--hop-Checkbox-text-color-hovered);
3080
+ --icon-color: var(--hop-Checkbox-icon-color-hovered);
3081
+ }
3082
+ .Checkbox-module__hop-Checkbox___5v0b4[data-pressed] {
3083
+ --box-background-color: var(--hop-Checkbox-box-background-color-pressed);
3084
+ --box-border-color: var(--hop-Checkbox-box-border-color-pressed);
3085
+ --text-color: var(--hop-Checkbox-text-color-pressed);
3086
+ --icon-color: var(--hop-Checkbox-icon-color-pressed);
3087
+ }
3088
+ .Checkbox-module__hop-Checkbox___5v0b4[data-selected] {
3089
+ --box-background-color: var(--hop-Checkbox-box-background-color-selected);
3090
+ --box-border-color: var(--hop-Checkbox-box-border-color-selected);
3091
+ --check-display: var(--hop-Checkbox-check-display-selected);
3092
+ --text-color: var(--hop-Checkbox-text-color-selected);
3093
+ --icon-color: var(--hop-Checkbox-icon-color-selected);
3094
+ }
3095
+ .Checkbox-module__hop-Checkbox___5v0b4[data-invalid] {
3096
+ --box-background-color: var(--hop-Checkbox-box-background-color-invalid);
3097
+ --box-border-color: var(--hop-Checkbox-box-border-color-invalid);
3098
+ --check-color: var(--hop-Checkbox-check-color-invalid);
3099
+ --text-color: var(--hop-Checkbox-text-color-invalid);
3100
+ --icon-color: var(--hop-Checkbox-icon-color-invalid);
3101
+ }
3102
+ .Checkbox-module__hop-Checkbox___5v0b4[data-invalid]:where([data-focus-visible]) {
3103
+ --box-background-color: var(--hop-Checkbox-box-background-color-focused-invalid);
3104
+ --box-border-color: var(--hop-Checkbox-box-border-color-focused-invalid);
3105
+ }
3106
+ .Checkbox-module__hop-Checkbox___5v0b4[data-invalid]:where([data-hovered]) {
3107
+ --box-background-color: var(--hop-Checkbox-box-background-color-hovered-invalid);
3108
+ --box-border-color: var(--hop-Checkbox-box-border-color-hovered-invalid);
3109
+ --text-color: var(--hop-Checkbox-text-color-hovered-invalid);
3110
+ --icon-color: var(--hop-Checkbox-icon-color-hovered-invalid);
3111
+ }
3112
+ .Checkbox-module__hop-Checkbox___5v0b4[data-invalid]:where([data-pressed]) {
3113
+ --box-background-color: var(--hop-Checkbox-box-background-color-pressed-invalid);
3114
+ --box-border-color: var(--hop-Checkbox-box-border-color-pressed-invalid);
3115
+ --text-color: var(--hop-Checkbox-text-color-pressed-invalid);
3116
+ --icon-color: var(--hop-Checkbox-icon-color-pressed-invalid);
3117
+ }
3118
+ .Checkbox-module__hop-Checkbox___5v0b4:where([data-invalid])[data-selected] {
3119
+ --box-background-color: var(--hop-Checkbox-box-background-color-selected-invalid);
3120
+ --box-border-color: var(--hop-Checkbox-box-border-color-selected-invalid);
3121
+ }
3122
+ .Checkbox-module__hop-Checkbox___5v0b4[data-disabled] {
3123
+ --box-background-color: var(--hop-Checkbox-box-background-color-disabled);
3124
+ --box-border-color: var(--hop-Checkbox-box-border-color-disabled);
3125
+ --check-color: var(--hop-Checkbox-check-color-disabled);
3126
+ --cursor: not-allowed;
3127
+ --text-color: var(--hop-Checkbox-text-color-disabled);
3128
+ --icon-color: var(--hop-Checkbox-icon-color-disabled);
3129
+ }
3130
+ .Checkbox-module__hop-Checkbox--sm___dSQOY {
3131
+ --box-block-size: var(--hop-Checkbox-box-sm-block-size);
3132
+ --box-inline-size: var(--hop-Checkbox-box-sm-inline-size);
3133
+ --text-top-offset: var(--hop-Checkbox-text-sm-top-offset);
3134
+ --text-margin-inline-start: var(--hop-Checkbox-text-sm-margin-inline-start);
3135
+ }
3136
+ .Checkbox-module__hop-Checkbox--md___TOu-C {
3137
+ --box-block-size: var(--hop-Checkbox-box-md-block-size);
3138
+ --box-inline-size: var(--hop-Checkbox-box-md-inline-size);
3139
+ --text-top-offset: var(--hop-Checkbox-text-md-top-offset);
3140
+ --text-margin-inline-start: var(--hop-Checkbox-text-md-margin-inline-start);
3141
+ }
3142
+ .Checkbox-module__hop-Checkbox__icon___nd2aw,
3143
+ .Checkbox-module__hop-Checkbox__icon-list___5WN5y {
3144
+ flex: 0 0 auto;
3145
+ order: 3;
3146
+ color: var(--icon-color);
3147
+ }
3148
+ .Checkbox-module__hop-Checkbox__box___jxojt {
3149
+ display: flex;
3150
+ flex: 0 0 auto;
3151
+ align-items: center;
3152
+ justify-content: center;
3153
+ order: 1;
3154
+ box-sizing: border-box;
3155
+ inline-size: var(--box-inline-size, var(--hop-Checkbox-box-md-inline-size));
3156
+ block-size: var(--box-block-size, var(--hop-Checkbox-box-md-block-size));
3157
+ background-color: var(--box-background-color);
3158
+ border: var(--hop-Checkbox-box-border-size) solid var(--box-border-color);
3159
+ border-radius: var(--box-border-radius);
3160
+ outline: var(--box-outline, none);
3161
+ outline-offset: 0.125rem;
3162
+ transition: background-color var(--transition-duration) var(--hop-easing-productive), border var(--transition-duration) var(--hop-easing-productive);
3163
+ }
3164
+ .Checkbox-module__hop-Checkbox__check___AxXm6 {
3165
+ display: var(--check-display);
3166
+ color: var(--check-color);
3167
+ }
3168
+ .Checkbox-module__hop-Checkbox__text___RWv7Z {
3169
+ flex: 0 1 auto;
3170
+ order: 2;
3171
+ min-inline-size: 0;
3172
+ margin-block-start: var(--text-top-offset, var(--hop-Checkbox-text-md-top-offset));
3173
+ margin-inline-start: var(--text-margin-inline-start, var(--hop-Checkbox-text-md-margin-inline-start));
3174
+ color: var(--text-color);
3175
+ }
3176
+ .DecorativeCheckbox-module__hop-DecorativeCheckbox___TZCQR {
3177
+ }
3178
+ .DecorativeCheckbox-module__hop-DecorativeCheckbox--sm___WAN3J {
3179
+ }
3180
+ .DecorativeCheckbox-module__hop-DecorativeCheckbox--md___ycopn {
3181
+ }
3182
+ .DecorativeCheckbox-module__hop-DecorativeCheckbox__icon___HP7Ir,
3183
+ .DecorativeCheckbox-module__hop-DecorativeCheckbox__icon-list___TV-j- {
3184
+ }
3185
+ .DecorativeCheckbox-module__hop-DecorativeCheckbox__box___aQDXk {
3186
+ }
3187
+ .DecorativeCheckbox-module__hop-DecorativeCheckbox__check___EYvRS {
3188
+ }
3189
+ .DecorativeCheckbox-module__hop-DecorativeCheckbox__text___db9bV {
3190
+ }
3191
+
3192
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/radio/src/DecorativeRadio.module.css/#css-module-data */
3193
+ .Radio-module__hop-Radio___H2CQS {
3194
+ --hop-Radio-box-border-size: 0.0625rem;
3195
+ --hop-Radio-box-border-color: var(--hop-neutral-border);
3196
+ --hop-Radio-box-background-color: var(--hop-neutral-surface);
3197
+ --hop-Radio-box-outline-size: 0.125rem;
3198
+ --hop-Radio-box-outline-color: var(--hop-primary-border-focus);
3199
+ --hop-Radio-bullet-color: var(--hop-neutral-icon-selected);
3200
+ --hop-Radio-bullet-display: none;
3201
+ --hop-Radio-text-color: var(--hop-neutral-text);
3202
+ --hop-Radio-icon-color: var(--hop-neutral-icon);
3203
+ --hop-Radio-box-border-color-hovered: var(--hop-neutral-border-hover);
3204
+ --hop-Radio-box-background-color-hovered: var(--hop-neutral-surface-hover);
3205
+ --hop-Radio-text-color-hovered: var(--hop-neutral-text-hover);
3206
+ --hop-Radio-icon-color-hovered: var(--hop-neutral-icon-hover);
3207
+ --hop-Radio-box-border-color-pressed: var(--hop-neutral-border-press);
3208
+ --hop-Radio-box-background-color-pressed: var(--hop-neutral-surface-press);
3209
+ --hop-Radio-text-color-pressed: var(--hop-neutral-text-press);
3210
+ --hop-Radio-icon-color-pressed: var(--hop-neutral-icon-press);
3211
+ --hop-Radio-box-border-color-selected: var(--hop-neutral-border-selected);
3212
+ --hop-Radio-box-background-color-selected: var(--hop-neutral-surface-selected);
3213
+ --hop-Radio-bullet-display-selected: block;
3214
+ --hop-Radio-text-color-selected: var(--hop-neutral-text);
3215
+ --hop-Radio-icon-color-selected: var(--hop-neutral-icon);
3216
+ --hop-Radio-box-border-color-disabled: var(--hop-neutral-border-disabled);
3217
+ --hop-Radio-box-background-color-disabled: var(--hop-neutral-surface-disabled);
3218
+ --hop-Radio-bullet-color-disabled: var(--hop-neutral-icon-disabled);
3219
+ --hop-Radio-text-color-disabled: var(--hop-neutral-text-disabled);
3220
+ --hop-Radio-icon-color-disabled: var(--hop-neutral-icon-disabled);
3221
+ --hop-Radio-box-border-color-focused: var(--hop-neutral-border-hover);
3222
+ --hop-Radio-box-background-color-focused: var(--hop-neutral-surface-hover);
3223
+ --hop-Radio-text-color-focused: var(--hop-neutral-text);
3224
+ --hop-Radio-icon-color-focused: var(--hop-neutral-icon);
3225
+ --hop-Radio-box-border-color-invalid: var(--hop-danger-border-strong);
3226
+ --hop-Radio-box-background-color-invalid: var(--hop-neutral-surface);
3227
+ --hop-Radio-box-border-color-hovered-invalid: var(--hop-danger-border-strong);
3228
+ --hop-Radio-box-background-color-hovered-invalid: var(--hop-danger-surface);
3229
+ --hop-Radio-box-border-color-pressed-invalid: var(--hop-danger-border-press);
3230
+ --hop-Radio-box-background-color-pressed-invalid: var(--hop-danger-surface-weak);
3231
+ --hop-Radio-box-border-color-focused-invalid: var(--hop-danger-border-strong);
3232
+ --hop-Radio-box-background-color-focused-invalid: var(--hop-danger-surface);
3233
+ --hop-Radio-box-border-color-selected-invalid: var(--hop-danger-border-strong);
3234
+ --hop-Radio-box-background-color-selected-invalid: var(--hop-danger-surface-strong);
3235
+ --hop-Radio-bullet-color-invalid: var(--hop-danger-icon-strong);
3236
+ --hop-Radio-text-color-invalid: var(--hop-danger-text-weak);
3237
+ --hop-Radio-icon-color-invalid: var(--hop-danger-icon-weak);
3238
+ --hop-Radio-text-color-hovered-invalid: var(--hop-danger-text-weak-hover);
3239
+ --hop-Radio-icon-color-hovered-invalid: var(--hop-danger-icon-weak-hover);
3240
+ --hop-Radio-text-color-pressed-invalid: var(--hop-danger-text-weak-press);
3241
+ --hop-Radio-box-sm-inline-size: 1rem;
3242
+ --hop-Radio-box-sm-block-size: 1rem;
3243
+ --hop-Radio-text-sm-top-offset: calc((var(--box-inline-size) - (var(--hop-body-sm-line-height) * var(--hop-body-sm-font-size))) / 2);
3244
+ --hop-Radio-text-sm-margin-inline-start: calc(var(--hop-space-inline-sm) - var(--hop-space-inline-xs));
3245
+ --hop-Radio-box-md-inline-size: 1.5rem;
3246
+ --hop-Radio-box-md-block-size: 1.5rem;
3247
+ --hop-Radio-text-md-top-offset: calc((var(--box-inline-size) - (var(--hop-body-md-line-height) * var(--hop-body-md-font-size))) / 2);
3248
+ --hop-Radio-text-md-margin-inline-start: calc(var(--hop-space-inline-md) - var(--hop-space-inline-xs));
3249
+ --box-background-color: var(--hop-Radio-box-background-color);
3250
+ --box-border-color: var(--hop-Radio-box-border-color);
3251
+ --box-border-radius: var(--hop-shape-circle);
3252
+ --bullet-color: var(--hop-Radio-bullet-color);
3253
+ --bullet-display: var(--hop-Radio-bullet-display);
3254
+ --cursor: pointer;
3255
+ --text-color: var(--hop-Radio-text-color);
3256
+ --icon-color: var(--hop-Radio-icon-color);
3257
+ --transition-duration: var(--hop-easing-duration-2);
3258
+ cursor: var(--cursor);
3259
+ display: flex;
3260
+ column-gap: var(--hop-space-inline-xs);
3261
+ align-items: flex-start;
3262
+ justify-content: flex-start;
3263
+ box-sizing: border-box;
3264
+ inline-size: max-content;
3265
+ max-inline-size: 100%;
3266
+ }
3267
+ .Radio-module__hop-Radio___H2CQS[data-focus-visible] {
3268
+ --box-background-color: var(--hop-Radio-box-background-color-focused);
3269
+ --box-border-color: var(--hop-Radio-box-border-color-focused);
3270
+ --box-outline: var(--hop-Radio-box-outline-size) solid var(--hop-Radio-box-outline-color);
3271
+ --text-color: var(--hop-Radio-text-color-focused);
3272
+ --icon-color: var(--hop-Radio-icon-color-focused);
3273
+ }
3274
+ .Radio-module__hop-Radio___H2CQS[data-hovered] {
3275
+ --box-background-color: var(--hop-Radio-box-background-color-hovered);
3276
+ --box-border-color: var(--hop-Radio-box-border-color-hovered);
3277
+ --text-color: var(--hop-Radio-text-color-hovered);
3278
+ --icon-color: var(--hop-Radio-icon-color-hovered);
3279
+ }
3280
+ .Radio-module__hop-Radio___H2CQS[data-pressed] {
3281
+ --box-background-color: var(--hop-Radio-box-background-color-pressed);
3282
+ --box-border-color: var(--hop-Radio-box-border-color-pressed);
3283
+ --text-color: var(--hop-Radio-text-color-pressed);
3284
+ --icon-color: var(--hop-Radio-icon-color-pressed);
3285
+ }
3286
+ .Radio-module__hop-Radio___H2CQS[data-selected] {
3287
+ --box-background-color: var(--hop-Radio-box-background-color-selected);
3288
+ --box-border-color: var(--hop-Radio-box-border-color-selected);
3289
+ --bullet-display: var(--hop-Radio-bullet-display-selected);
3290
+ --text-color: var(--hop-Radio-text-color-selected);
3291
+ --icon-color: var(--hop-Radio-icon-color-selected);
3292
+ }
3293
+ .Radio-module__hop-Radio___H2CQS[data-invalid] {
3294
+ --box-background-color: var(--hop-Radio-box-background-color-invalid);
3295
+ --box-border-color: var(--hop-Radio-box-border-color-invalid);
3296
+ --bullet-color: var(--hop-Radio-bullet-color-invalid);
3297
+ --text-color: var(--hop-Radio-text-color-invalid);
3298
+ --icon-color: var(--hop-Radio-icon-color-invalid);
3299
+ }
3300
+ .Radio-module__hop-Radio___H2CQS:where([data-invalid])[data-focus-visible] {
3301
+ --box-background-color: var(--hop-Radio-box-background-color-focused-invalid);
3302
+ --box-border-color: var(--hop-Radio-box-border-color-focused-invalid);
3303
+ }
3304
+ .Radio-module__hop-Radio___H2CQS:where([data-invalid])[data-hovered] {
3305
+ --box-background-color: var(--hop-Radio-box-background-color-hovered-invalid);
3306
+ --box-border-color: var(--hop-Radio-box-border-color-hovered-invalid);
3307
+ --text-color: var(--hop-Radio-text-color-hovered-invalid);
3308
+ --icon-color: var(--hop-Radio-text-color-hovered-invalid);
3309
+ }
3310
+ .Radio-module__hop-Radio___H2CQS:where([data-invalid])[data-pressed] {
3311
+ --box-background-color: var(--hop-Radio-box-background-color-pressed-invalid);
3312
+ --box-border-color: var(--hop-Radio-box-border-color-pressed-invalid);
3313
+ --text-color: var(--hop-Radio-text-color-pressed-invalid);
3314
+ --icon-color: var(--hop-Radio-icon-color-pressed-invalid);
3315
+ }
3316
+ .Radio-module__hop-Radio___H2CQS:where([data-invalid])[data-selected] {
3317
+ --box-background-color: var(--hop-Radio-box-background-color-selected-invalid);
3318
+ --box-border-color: var(--hop-Radio-box-border-color-selected-invalid);
3319
+ }
3320
+ .Radio-module__hop-Radio___H2CQS[data-disabled] {
3321
+ --box-background-color: var(--hop-Radio-box-background-color-disabled);
3322
+ --box-border-color: var(--hop-Radio-box-border-color-disabled);
3323
+ --bullet-color: var(--hop-Radio-bullet-color-disabled);
3324
+ --cursor: not-allowed;
3325
+ --text-color: var(--hop-Radio-text-color-disabled);
3326
+ --icon-color: var(--hop-Radio-icon-color-disabled);
3327
+ }
3328
+ .Radio-module__hop-Radio--sm___wsMEb {
3329
+ --box-inline-size: var(--hop-Radio-box-sm-inline-size);
3330
+ --box-block-size: var(--hop-Radio-box-sm-block-size);
3331
+ --text-top-offset: var(--hop-Radio-text-sm-top-offset);
3332
+ --text-margin-inline-start: var(--hop-Radio-text-sm-margin-inline-start);
3333
+ }
3334
+ .Radio-module__hop-Radio--md___Y9v6E {
3335
+ --box-inline-size: var(--hop-Radio-box-md-inline-size);
3336
+ --box-block-size: var(--hop-Radio-box-md-block-size);
3337
+ --text-top-offset: var(--hop-Radio-text-md-top-offset);
3338
+ --text-margin-inline-start: var(--hop-Radio-text-md-margin-inline-start);
3339
+ }
3340
+ .Radio-module__hop-Radio__icon___AnsTY,
3341
+ .Radio-module__hop-Radio__icon-list___bpfWX {
3342
+ flex: 0 0 auto;
3343
+ order: 3;
3344
+ color: var(--icon-color);
3345
+ }
3346
+ .Radio-module__hop-Radio__box___sb7RR {
3347
+ display: flex;
3348
+ flex: 0 0 auto;
3349
+ align-items: center;
3350
+ justify-content: center;
3351
+ order: 1;
3352
+ box-sizing: border-box;
3353
+ inline-size: var(--box-inline-size, var(--hop-Radio-box-md-inline-size));
3354
+ block-size: var(--box-block-size, var(--hop-Radio-box-md-block-size));
3355
+ background-color: var(--box-background-color);
3356
+ border: var(--hop-Radio-box-border-size) solid var(--box-border-color);
3357
+ border-radius: var(--box-border-radius);
3358
+ outline: var(--box-outline, none);
3359
+ outline-offset: 0.125rem;
3360
+ transition: background-color var(--transition-duration) var(--hop-easing-productive), border var(--transition-duration) var(--hop-easing-productive);
3361
+ }
3362
+ .Radio-module__hop-Radio__bullet___d4tcu {
3363
+ display: var(--bullet-display);
3364
+ color: var(--bullet-color);
3365
+ }
3366
+ .Radio-module__hop-Radio__text___y2Kzb {
3367
+ flex: 0 1 auto;
3368
+ order: 2;
3369
+ min-inline-size: 0;
3370
+ margin-block-start: var(--text-top-offset, var(--hop-Radio-text-md-top-offset));
3371
+ margin-inline-start: var(--text-margin-inline-start, var(--hop-Radio-text-md-margin-inline-start));
3372
+ color: var(--text-color);
3373
+ }
3374
+ .DecorativeRadio-module__hop-DecorativeRadio___tSJL5 {
3375
+ }
3376
+ .DecorativeRadio-module__hop-DecorativeRadio--sm___DUA4e {
3377
+ }
3378
+ .DecorativeRadio-module__hop-DecorativeRadio--md___PZiXZ {
3379
+ }
3380
+ .DecorativeRadio-module__hop-DecorativeRadio__icon___uynj0,
3381
+ .DecorativeRadio-module__hop-DecorativeRadio__icon-list___LHJUz {
3382
+ }
3383
+ .DecorativeRadio-module__hop-DecorativeRadio__box___LRGSc {
3384
+ }
3385
+ .DecorativeRadio-module__hop-DecorativeRadio__bullet___ckmQf {
3386
+ }
3387
+ .DecorativeRadio-module__hop-DecorativeRadio__text___tL5B5 {
3388
+ }
3389
+
3390
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/radio/src/Radio.module.css/#css-module-data */
3391
+ .Radio-module__hop-Radio___H2CQS {
3392
+ --hop-Radio-box-border-size: 0.0625rem;
3393
+ --hop-Radio-box-border-color: var(--hop-neutral-border);
3394
+ --hop-Radio-box-background-color: var(--hop-neutral-surface);
3395
+ --hop-Radio-box-outline-size: 0.125rem;
3396
+ --hop-Radio-box-outline-color: var(--hop-primary-border-focus);
3397
+ --hop-Radio-bullet-color: var(--hop-neutral-icon-selected);
3398
+ --hop-Radio-bullet-display: none;
3399
+ --hop-Radio-text-color: var(--hop-neutral-text);
3400
+ --hop-Radio-icon-color: var(--hop-neutral-icon);
3401
+ --hop-Radio-box-border-color-hovered: var(--hop-neutral-border-hover);
3402
+ --hop-Radio-box-background-color-hovered: var(--hop-neutral-surface-hover);
3403
+ --hop-Radio-text-color-hovered: var(--hop-neutral-text-hover);
3404
+ --hop-Radio-icon-color-hovered: var(--hop-neutral-icon-hover);
3405
+ --hop-Radio-box-border-color-pressed: var(--hop-neutral-border-press);
3406
+ --hop-Radio-box-background-color-pressed: var(--hop-neutral-surface-press);
3407
+ --hop-Radio-text-color-pressed: var(--hop-neutral-text-press);
3408
+ --hop-Radio-icon-color-pressed: var(--hop-neutral-icon-press);
3409
+ --hop-Radio-box-border-color-selected: var(--hop-neutral-border-selected);
3410
+ --hop-Radio-box-background-color-selected: var(--hop-neutral-surface-selected);
3411
+ --hop-Radio-bullet-display-selected: block;
3412
+ --hop-Radio-text-color-selected: var(--hop-neutral-text);
3413
+ --hop-Radio-icon-color-selected: var(--hop-neutral-icon);
3414
+ --hop-Radio-box-border-color-disabled: var(--hop-neutral-border-disabled);
3415
+ --hop-Radio-box-background-color-disabled: var(--hop-neutral-surface-disabled);
3416
+ --hop-Radio-bullet-color-disabled: var(--hop-neutral-icon-disabled);
3417
+ --hop-Radio-text-color-disabled: var(--hop-neutral-text-disabled);
3418
+ --hop-Radio-icon-color-disabled: var(--hop-neutral-icon-disabled);
3419
+ --hop-Radio-box-border-color-focused: var(--hop-neutral-border-hover);
3420
+ --hop-Radio-box-background-color-focused: var(--hop-neutral-surface-hover);
3421
+ --hop-Radio-text-color-focused: var(--hop-neutral-text);
3422
+ --hop-Radio-icon-color-focused: var(--hop-neutral-icon);
3423
+ --hop-Radio-box-border-color-invalid: var(--hop-danger-border-strong);
3424
+ --hop-Radio-box-background-color-invalid: var(--hop-neutral-surface);
3425
+ --hop-Radio-box-border-color-hovered-invalid: var(--hop-danger-border-strong);
3426
+ --hop-Radio-box-background-color-hovered-invalid: var(--hop-danger-surface);
3427
+ --hop-Radio-box-border-color-pressed-invalid: var(--hop-danger-border-press);
3428
+ --hop-Radio-box-background-color-pressed-invalid: var(--hop-danger-surface-weak);
3429
+ --hop-Radio-box-border-color-focused-invalid: var(--hop-danger-border-strong);
3430
+ --hop-Radio-box-background-color-focused-invalid: var(--hop-danger-surface);
3431
+ --hop-Radio-box-border-color-selected-invalid: var(--hop-danger-border-strong);
3432
+ --hop-Radio-box-background-color-selected-invalid: var(--hop-danger-surface-strong);
3433
+ --hop-Radio-bullet-color-invalid: var(--hop-danger-icon-strong);
3434
+ --hop-Radio-text-color-invalid: var(--hop-danger-text-weak);
3435
+ --hop-Radio-icon-color-invalid: var(--hop-danger-icon-weak);
3436
+ --hop-Radio-text-color-hovered-invalid: var(--hop-danger-text-weak-hover);
3437
+ --hop-Radio-icon-color-hovered-invalid: var(--hop-danger-icon-weak-hover);
3438
+ --hop-Radio-text-color-pressed-invalid: var(--hop-danger-text-weak-press);
3439
+ --hop-Radio-box-sm-inline-size: 1rem;
3440
+ --hop-Radio-box-sm-block-size: 1rem;
3441
+ --hop-Radio-text-sm-top-offset: calc((var(--box-inline-size) - (var(--hop-body-sm-line-height) * var(--hop-body-sm-font-size))) / 2);
3442
+ --hop-Radio-text-sm-margin-inline-start: calc(var(--hop-space-inline-sm) - var(--hop-space-inline-xs));
3443
+ --hop-Radio-box-md-inline-size: 1.5rem;
3444
+ --hop-Radio-box-md-block-size: 1.5rem;
3445
+ --hop-Radio-text-md-top-offset: calc((var(--box-inline-size) - (var(--hop-body-md-line-height) * var(--hop-body-md-font-size))) / 2);
3446
+ --hop-Radio-text-md-margin-inline-start: calc(var(--hop-space-inline-md) - var(--hop-space-inline-xs));
3447
+ --box-background-color: var(--hop-Radio-box-background-color);
3448
+ --box-border-color: var(--hop-Radio-box-border-color);
3449
+ --box-border-radius: var(--hop-shape-circle);
3450
+ --bullet-color: var(--hop-Radio-bullet-color);
3451
+ --bullet-display: var(--hop-Radio-bullet-display);
3452
+ --cursor: pointer;
3453
+ --text-color: var(--hop-Radio-text-color);
3454
+ --icon-color: var(--hop-Radio-icon-color);
3455
+ --transition-duration: var(--hop-easing-duration-2);
3456
+ cursor: var(--cursor);
3457
+ display: flex;
3458
+ column-gap: var(--hop-space-inline-xs);
3459
+ align-items: flex-start;
3460
+ justify-content: flex-start;
3461
+ box-sizing: border-box;
3462
+ inline-size: max-content;
3463
+ max-inline-size: 100%;
3464
+ }
3465
+ .Radio-module__hop-Radio___H2CQS[data-focus-visible] {
3466
+ --box-background-color: var(--hop-Radio-box-background-color-focused);
3467
+ --box-border-color: var(--hop-Radio-box-border-color-focused);
3468
+ --box-outline: var(--hop-Radio-box-outline-size) solid var(--hop-Radio-box-outline-color);
3469
+ --text-color: var(--hop-Radio-text-color-focused);
3470
+ --icon-color: var(--hop-Radio-icon-color-focused);
3471
+ }
3472
+ .Radio-module__hop-Radio___H2CQS[data-hovered] {
3473
+ --box-background-color: var(--hop-Radio-box-background-color-hovered);
3474
+ --box-border-color: var(--hop-Radio-box-border-color-hovered);
3475
+ --text-color: var(--hop-Radio-text-color-hovered);
3476
+ --icon-color: var(--hop-Radio-icon-color-hovered);
3477
+ }
3478
+ .Radio-module__hop-Radio___H2CQS[data-pressed] {
3479
+ --box-background-color: var(--hop-Radio-box-background-color-pressed);
3480
+ --box-border-color: var(--hop-Radio-box-border-color-pressed);
3481
+ --text-color: var(--hop-Radio-text-color-pressed);
3482
+ --icon-color: var(--hop-Radio-icon-color-pressed);
3483
+ }
3484
+ .Radio-module__hop-Radio___H2CQS[data-selected] {
3485
+ --box-background-color: var(--hop-Radio-box-background-color-selected);
3486
+ --box-border-color: var(--hop-Radio-box-border-color-selected);
3487
+ --bullet-display: var(--hop-Radio-bullet-display-selected);
3488
+ --text-color: var(--hop-Radio-text-color-selected);
3489
+ --icon-color: var(--hop-Radio-icon-color-selected);
3490
+ }
3491
+ .Radio-module__hop-Radio___H2CQS[data-invalid] {
3492
+ --box-background-color: var(--hop-Radio-box-background-color-invalid);
3493
+ --box-border-color: var(--hop-Radio-box-border-color-invalid);
3494
+ --bullet-color: var(--hop-Radio-bullet-color-invalid);
3495
+ --text-color: var(--hop-Radio-text-color-invalid);
3496
+ --icon-color: var(--hop-Radio-icon-color-invalid);
3497
+ }
3498
+ .Radio-module__hop-Radio___H2CQS:where([data-invalid])[data-focus-visible] {
3499
+ --box-background-color: var(--hop-Radio-box-background-color-focused-invalid);
3500
+ --box-border-color: var(--hop-Radio-box-border-color-focused-invalid);
3501
+ }
3502
+ .Radio-module__hop-Radio___H2CQS:where([data-invalid])[data-hovered] {
3503
+ --box-background-color: var(--hop-Radio-box-background-color-hovered-invalid);
3504
+ --box-border-color: var(--hop-Radio-box-border-color-hovered-invalid);
3505
+ --text-color: var(--hop-Radio-text-color-hovered-invalid);
3506
+ --icon-color: var(--hop-Radio-text-color-hovered-invalid);
3507
+ }
3508
+ .Radio-module__hop-Radio___H2CQS:where([data-invalid])[data-pressed] {
3509
+ --box-background-color: var(--hop-Radio-box-background-color-pressed-invalid);
3510
+ --box-border-color: var(--hop-Radio-box-border-color-pressed-invalid);
3511
+ --text-color: var(--hop-Radio-text-color-pressed-invalid);
3512
+ --icon-color: var(--hop-Radio-icon-color-pressed-invalid);
3513
+ }
3514
+ .Radio-module__hop-Radio___H2CQS:where([data-invalid])[data-selected] {
3515
+ --box-background-color: var(--hop-Radio-box-background-color-selected-invalid);
3516
+ --box-border-color: var(--hop-Radio-box-border-color-selected-invalid);
3517
+ }
3518
+ .Radio-module__hop-Radio___H2CQS[data-disabled] {
3519
+ --box-background-color: var(--hop-Radio-box-background-color-disabled);
3520
+ --box-border-color: var(--hop-Radio-box-border-color-disabled);
3521
+ --bullet-color: var(--hop-Radio-bullet-color-disabled);
3522
+ --cursor: not-allowed;
3523
+ --text-color: var(--hop-Radio-text-color-disabled);
3524
+ --icon-color: var(--hop-Radio-icon-color-disabled);
3525
+ }
3526
+ .Radio-module__hop-Radio--sm___wsMEb {
3527
+ --box-inline-size: var(--hop-Radio-box-sm-inline-size);
3528
+ --box-block-size: var(--hop-Radio-box-sm-block-size);
3529
+ --text-top-offset: var(--hop-Radio-text-sm-top-offset);
3530
+ --text-margin-inline-start: var(--hop-Radio-text-sm-margin-inline-start);
3531
+ }
3532
+ .Radio-module__hop-Radio--md___Y9v6E {
3533
+ --box-inline-size: var(--hop-Radio-box-md-inline-size);
3534
+ --box-block-size: var(--hop-Radio-box-md-block-size);
3535
+ --text-top-offset: var(--hop-Radio-text-md-top-offset);
3536
+ --text-margin-inline-start: var(--hop-Radio-text-md-margin-inline-start);
3537
+ }
3538
+ .Radio-module__hop-Radio__icon___AnsTY,
3539
+ .Radio-module__hop-Radio__icon-list___bpfWX {
3540
+ flex: 0 0 auto;
3541
+ order: 3;
3542
+ color: var(--icon-color);
3543
+ }
3544
+ .Radio-module__hop-Radio__box___sb7RR {
3545
+ display: flex;
3546
+ flex: 0 0 auto;
3547
+ align-items: center;
3548
+ justify-content: center;
3549
+ order: 1;
3550
+ box-sizing: border-box;
3551
+ inline-size: var(--box-inline-size, var(--hop-Radio-box-md-inline-size));
3552
+ block-size: var(--box-block-size, var(--hop-Radio-box-md-block-size));
3553
+ background-color: var(--box-background-color);
3554
+ border: var(--hop-Radio-box-border-size) solid var(--box-border-color);
3555
+ border-radius: var(--box-border-radius);
3556
+ outline: var(--box-outline, none);
3557
+ outline-offset: 0.125rem;
3558
+ transition: background-color var(--transition-duration) var(--hop-easing-productive), border var(--transition-duration) var(--hop-easing-productive);
3559
+ }
3560
+ .Radio-module__hop-Radio__bullet___d4tcu {
3561
+ display: var(--bullet-display);
3562
+ color: var(--bullet-color);
3563
+ }
3564
+ .Radio-module__hop-Radio__text___y2Kzb {
3565
+ flex: 0 1 auto;
3566
+ order: 2;
3567
+ min-inline-size: 0;
3568
+ margin-block-start: var(--text-top-offset, var(--hop-Radio-text-md-top-offset));
3569
+ margin-inline-start: var(--text-margin-inline-start, var(--hop-Radio-text-md-margin-inline-start));
3570
+ color: var(--text-color);
3571
+ }
3572
+
3573
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/radio/src/RadioField.module.css/#css-module-data */
3574
+ .RadioField-module__hop-RadioField___Q4QIQ {
3575
+ --hop-RadioField-description-color: var(--hop-neutral-text-weak);
3576
+ --hop-RadioField-description-color-disabled: var(--hop-neutral-text-disabled);
3577
+ --hop-RadioField-sm-row-gap: var(--hop-space-stack-xs);
3578
+ --hop-RadioField-radio-sm-inline-size: 1rem;
3579
+ --hop-RadioField-description-sm-margin-inline-start: calc(var(--hop-RadioField-radio-sm-inline-size) + var(--hop-space-inline-sm));
3580
+ --hop-RadioField-md-row-gap: var(--hop-space-stack-xs);
3581
+ --hop-RadioField-radio-md-inline-size: 1.5rem;
3582
+ --hop-RadioField-description-md-margin-inline-start: calc(var(--hop-RadioField-radio-md-inline-size) + var(--hop-space-inline-md));
3583
+ --description-color: var(--hop-RadioField-description-color);
3584
+ display: flex;
3585
+ flex-direction: column;
3586
+ row-gap: var(--row-gap, var(--hop-space-stack-sm));
3587
+ align-items: flex-start;
3588
+ justify-content: flex-start;
3589
+ box-sizing: border-box;
3590
+ inline-size: max-content;
3591
+ max-inline-size: 100%;
3592
+ }
3593
+ .RadioField-module__hop-RadioField___Q4QIQ[data-disabled] {
3594
+ --description-color: var(--hop-RadioField-description-color-disabled);
3595
+ }
3596
+ .RadioField-module__hop-RadioField--sm___VXiap {
3597
+ --row-gap: var(--hop-RadioField-sm-row-gap);
3598
+ --description-margin-inline-start: var(--hop-RadioField-description-sm-margin-inline-start);
3599
+ }
3600
+ .RadioField-module__hop-RadioField--md___HW2CQ {
3601
+ --row-gap: var(--hop-RadioField-md-row-gap);
3602
+ --description-margin-inline-start: var(--hop-RadioField-description-md-margin-inline-start);
3603
+ }
3604
+ .RadioField-module__hop-RadioField__description___ia1Zr {
3605
+ order: 2;
3606
+ margin-inline-start: var(--description-margin-inline-start, var(--hop-RadioField-description-md-margin-inline-start));
3607
+ color: var(--description-color);
3608
+ }
3609
+ .RadioField-module__hop-RadioField__radio___EivJe {
3610
+ order: 1;
3611
+ }
3612
+
3613
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/radio/src/RadioGroup.module.css/#css-module-data */
3614
+ .RadioGroup-module__hop-RadioGroup___GAhMc {
3615
+ --hop-RadioGroup-align-items: flex-start;
3616
+ --hop-RadioGroup-justify-content: flex-start;
3617
+ --hop-RadioGroup-bordered-border-color: var(--hop-neutral-border-weak);
3618
+ --hop-RadioGroup-sm-column-gap: var(--hop-space-inline-sm);
3619
+ --hop-RadioGroup-sm-row-gap: var(--hop-space-stack-sm);
3620
+ --hop-RadioGroup-list-sm-column-gap: var(--hop-space-inline-sm);
3621
+ --hop-RadioGroup-list-sm-row-gap: var(--hop-space-stack-sm);
3622
+ --hop-RadioGroup-bordered-sm-padding: var(--hop-space-inset-sm);
3623
+ --hop-RadioGroup-bordered-sm-column-gap: var(--hop-space-inline-sm);
3624
+ --hop-RadioGroup-bordered-sm-row-gap: var(--hop-space-stack-sm);
3625
+ --hop-RadioGroup-list-bordered-sm-column-gap: 0;
3626
+ --hop-RadioGroup-list-bordered-sm-row-gap: 0;
3627
+ --hop-RadioGroup-md-column-gap: var(--hop-space-inline-md);
3628
+ --hop-RadioGroup-md-row-gap: var(--hop-space-stack-md);
3629
+ --hop-RadioGroup-list-md-column-gap: var(--hop-space-inline-md);
3630
+ --hop-RadioGroup-list-md-row-gap: var(--hop-space-stack-md);
3631
+ --hop-RadioGroup-bordered-md-padding: var(--hop-space-inset-md);
3632
+ --hop-RadioGroup-bordered-md-column-gap: var(--hop-space-inline-sm);
3633
+ --hop-RadioGroup-bordered-md-row-gap: var(--hop-space-stack-sm);
3634
+ --hop-RadioGroup-list-bordered-md-column-gap: 0;
3635
+ --hop-RadioGroup-list-bordered-md-row-gap: 0;
3636
+ --hop-RadioGroup-vertical-flex-direction: column;
3637
+ --hop-RadioGroup-horizontal-flex-direction: row;
3638
+ --radio-border-size: 0.0625rem;
3639
+ --radio-border-color: var(--hop-neutral-border-weak);
3640
+ --flex-direction: var(--hop-RadioGroup-vertical-flex-direction);
3641
+ --align-items: var(--hop-RadioGroup-align-items);
3642
+ --justify-content: var(--hop-RadioGroup-justify-content);
3643
+ --flex-wrap: wrap;
3644
+ --inline-size: max-content;
3645
+ display: flex;
3646
+ flex-direction: column;
3647
+ gap: var(--row-gap, var(--hop-space-stack-md)) var(--column-gap, var(--hop-space-inline-md));
3648
+ align-items: var(--align-items);
3649
+ justify-content: var(--justify-content);
3650
+ box-sizing: border-box;
3651
+ inline-size: var(--inline-size);
3652
+ max-inline-size: 100%;
3653
+ }
3654
+ .RadioGroup-module__hop-RadioGroup--bordered___aW9rV {
3655
+ --list-border: var(--radio-border-size) solid var(--radio-border-color);
3656
+ --list-border-radius: var(--hop-shape-rounded-md);
3657
+ }
3658
+ .RadioGroup-module__hop-RadioGroup--sm___TlUOa {
3659
+ --column-gap: var(--hop-RadioGroup-sm-column-gap);
3660
+ --row-gap: var(--hop-RadioGroup-sm-row-gap);
3661
+ --list-column-gap: var(--hop-RadioGroup-list-sm-column-gap);
3662
+ --list-row-gap: var(--hop-RadioGroup-list-sm-row-gap);
3663
+ }
3664
+ .RadioGroup-module__hop-RadioGroup--md___K9W8i {
3665
+ --column-gap: var(--hop-RadioGroup-md-column-gap);
3666
+ --row-gap: var(--hop-RadioGroup-md-row-gap);
3667
+ --list-column-gap: var(--hop-RadioGroup-list-md-column-gap);
3668
+ --list-row-gap: var(--hop-RadioGroup-list-md-row-gap);
3669
+ }
3670
+ .RadioGroup-module__hop-RadioGroup--bordered___aW9rV.RadioGroup-module__hop-RadioGroup--sm___TlUOa {
3671
+ --radio-padding: var(--hop-RadioGroup-bordered-sm-padding);
3672
+ --column-gap: var(--hop-RadioGroup-bordered-sm-column-gap);
3673
+ --row-gap: var(--hop-RadioGroup-bordered-sm-row-gap);
3674
+ --list-column-gap: var(--hop-RadioGroup-list-bordered-sm-column-gap);
3675
+ --list-row-gap: var(--hop-RadioGroup-list-bordered-sm-row-gap);
3676
+ }
3677
+ .RadioGroup-module__hop-RadioGroup--bordered___aW9rV.RadioGroup-module__hop-RadioGroup--md___K9W8i {
3678
+ --radio-padding: var(--hop-RadioGroup-bordered-md-padding);
3679
+ --column-gap: var(--hop-RadioGroup-bordered-md-column-gap);
3680
+ --row-gap: var(--hop-RadioGroup-bordered-md-row-gap);
3681
+ --list-column-gap: var(--hop-RadioGroup-list-bordered-md-column-gap);
3682
+ --list-row-gap: var(--hop-RadioGroup-list-bordered-md-row-gap);
3683
+ }
3684
+ .RadioGroup-module__hop-RadioGroup___GAhMc[data-orientation=horizontal] {
3685
+ --flex-direction: var(--hop-RadioGroup-horizontal-flex-direction);
3686
+ }
3687
+ .RadioGroup-module__hop-RadioGroup--bordered___aW9rV[data-orientation=horizontal] {
3688
+ --flex-wrap: nowrap;
3689
+ }
3690
+ .RadioGroup-module__hop-RadioGroup___GAhMc > .RadioGroup-module__hop-RadioGroup__label___Vi-x9 {
3691
+ order: 1;
3692
+ }
3693
+ .RadioGroup-module__hop-RadioGroup__list___pz3Nn {
3694
+ display: flex;
3695
+ flex-flow: var(--flex-direction) var(--flex-wrap);
3696
+ gap: var(--list-row-gap, var(--hop-space-stack-md)) var(--list-column-gap, var(--hop-space-inline-md));
3697
+ order: 2;
3698
+ box-sizing: border-box;
3699
+ inline-size: var(--inline-size);
3700
+ max-inline-size: 100%;
3701
+ border: var(--list-border, none);
3702
+ border-radius: var(--list-border-radius, 0);
3703
+ }
3704
+ .RadioGroup-module__hop-RadioGroup__list___pz3Nn > .RadioGroup-module__hop-RadioGroup__radio___HdWpQ {
3705
+ position: relative;
3706
+ flex: 0 1 auto;
3707
+ align-content: start;
3708
+ inline-size: auto;
3709
+ min-inline-size: 0;
3710
+ padding: var(--radio-padding, 0);
3711
+ }
3712
+ .RadioGroup-module__hop-RadioGroup--bordered___aW9rV .RadioGroup-module__hop-RadioGroup__list___pz3Nn > .RadioGroup-module__hop-RadioGroup__radio___HdWpQ ~ .RadioGroup-module__hop-RadioGroup__radio___HdWpQ::before {
3713
+ content: "";
3714
+ position: absolute;
3715
+ display: block;
3716
+ }
3717
+ .RadioGroup-module__hop-RadioGroup--bordered___aW9rV[data-orientation=vertical] .RadioGroup-module__hop-RadioGroup__list___pz3Nn > .RadioGroup-module__hop-RadioGroup__radio___HdWpQ ~ .RadioGroup-module__hop-RadioGroup__radio___HdWpQ::before {
3718
+ inset-block-start: 0;
3719
+ inset-inline: 0;
3720
+ border-block-start: var(--list-border, none);
3721
+ }
3722
+ .RadioGroup-module__hop-RadioGroup--bordered___aW9rV[data-orientation=horizontal] .RadioGroup-module__hop-RadioGroup__list___pz3Nn > .RadioGroup-module__hop-RadioGroup__radio___HdWpQ ~ .RadioGroup-module__hop-RadioGroup__radio___HdWpQ::before {
3723
+ inset-block: 0;
3724
+ inset-inline-start: 0;
3725
+ border-inline-start: var(--list-border, none);
3726
+ }
3727
+ .RadioGroup-module__hop-RadioGroup___GAhMc > .RadioGroup-module__hop-RadioGroup__error-message___KU5wE,
3728
+ .RadioGroup-module__hop-RadioGroup___GAhMc > .RadioGroup-module__hop-RadioGroup__helper-message___Rx1kN {
3729
+ order: 3;
3730
+ }
3731
+
3732
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/list-box/src/ListBoxItemSkeleton.module.css/#css-module-data */
3733
+ .ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton___MaL8f {
3734
+ --hop-ListBoxItemSkeleton-background-color: var(--hop-neutral-surface-weak);
3735
+ --hop-ListBoxItemSkeleton-background-color-dark: var(--hop-neutral-surface-weak-hover);
3736
+ --hop-ListBoxItemSkeleton-border-radius: var(--hop-shape-rounded-md);
3737
+ --hop-ListBoxItemSkeleton-animation-duration: 1.4s;
3738
+ --hop-ListBoxItemSkeleton-animation-reduced-motion-duration: 3.4s;
3739
+ --hop-ListBoxItemSkeleton-linear-gradient:
3740
+ linear-gradient(
3741
+
3742
+ 90deg,
3743
+ var(--hop-ListBoxItemSkeleton-background-color) 25%,
3744
+ var(--hop-ListBoxItemSkeleton-background-color-dark) 37%,
3745
+ var(--hop-ListBoxItemSkeleton-background-color-dark) 63%,
3746
+ var(--hop-ListBoxItemSkeleton-background-color) 100% );
3747
+ --hop-ListBoxItemSkeleton-xs-height: 1.25rem;
3748
+ --hop-ListBoxItemSkeleton-sm-height: 1.25rem;
3749
+ --hop-ListBoxItemSkeleton-md-height: 1.25rem;
3750
+ --hop-ListBoxItemSkeleton-lg-height: 1.5rem;
3751
+ --animation-duration: var(--hop-ListBoxItemSkeleton-animation-duration);
3752
+ grid-area: label;
3753
+ box-sizing: border-box;
3754
+ block-size: var(--height);
3755
+ background-color: var(--hop-ListBoxItemSkeleton-background-color);
3756
+ background-image: var(--hop-ListBoxItemSkeleton-linear-gradient);
3757
+ background-size: 400% 100%;
3758
+ border-radius: var(--hop-ListBoxItemSkeleton-border-radius);
3759
+ animation-name: ListBoxItemSkeleton-module__placeholder-shimmer___MgwG1;
3760
+ animation-duration: var(--animation-duration);
3761
+ animation-timing-function: ease-in-out;
3762
+ animation-fill-mode: forwards;
3763
+ animation-iteration-count: infinite;
3764
+ @media (prefers-reduced-motion: reduce) {
3765
+ --animation-duration: var(--hop-ListBoxItemSkeleton-animation-reduced-motion-duration);
3766
+ }
3767
+ }
3768
+ .ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--xs___COLzl {
3769
+ --height: var(--hop-ListBoxItemSkeleton-xs-height);
3770
+ }
3771
+ .ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--sm___kEXil {
3772
+ --height: var(--hop-ListBoxItemSkeleton-sm-height);
3773
+ }
3774
+ .ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--md___W4gr6 {
3775
+ --height: var(--hop-ListBoxItemSkeleton-md-height);
3776
+ }
3777
+ .ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--lg___KNfCL {
3778
+ --height: var(--hop-ListBoxItemSkeleton-lg-height);
3779
+ }
3780
+ @keyframes ListBoxItemSkeleton-module__placeholder-shimmer___MgwG1 {
3781
+ 0% {
3782
+ background-position: 125% 50%;
3783
+ }
3784
+ 100% {
3785
+ background-position: -25% 50%;
3786
+ }
3787
+ }
3788
+
3789
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/list-box/src/ListBoxItem.module.css/#css-module-data */
3790
+ .ListBoxItem-module__hop-ListBoxItem___QvcpN {
3791
+ --hop-ListBoxItem-background-color: transparent;
3792
+ --hop-ListBoxItem-border-radius: var(--hop-shape-rounded-md);
3793
+ --hop-ListBoxItem-text-color: var(--hop-neutral-text);
3794
+ --hop-ListBoxItem-icon-color: var(--hop-neutral-icon);
3795
+ --hop-ListBoxItem-outline-size: 0.125rem;
3796
+ --hop-ListBoxItem-outline-color: var(--hop-primary-border-focus);
3797
+ --hop-ListBoxItem-row-gap: var(--hop-space-stack-xs);
3798
+ --hop-ListBoxItem-column-gap: var(--hop-space-inline-sm);
3799
+ --hop-ListBoxItem-indicator-inline-size: calc( 1rem + var(--hop-ListBoxItem-column-gap));
3800
+ --hop-ListBoxItem-description-text-color: var(--hop-neutral-text-weak);
3801
+ --hop-ListBoxItem-grid-template-areas: "indicator avatar icon label end-icon badge";
3802
+ --hop-ListBoxItem-grid-template-areas-with-description: "indicator avatar icon label end-icon badge" ". . . description description description";
3803
+ --hop-ListBoxItem-grid-template-areas-loading: "label";
3804
+ --hop-ListBoxItem-grid-template-columns: var(--hop-ListBoxItem-indicator-inline-size) auto auto 1fr auto auto;
3805
+ --hop-ListBoxItem-grid-template-columns-not-selected: 0 auto auto 1fr auto auto;
3806
+ --hop-ListBoxItem-grid-template-columns-loading: 1fr;
3807
+ --hop-ListBoxItem-badge-margin-block: calc(-1 * (var(--hop-space-stack-xs) / 2));
3808
+ --hop-ListBoxItem-xs-padding-block: var(--hop-space-inset-xs);
3809
+ --hop-ListBoxItem-xs-padding-inline: var(--hop-space-inset-md);
3810
+ --hop-ListBoxItem-xs-min-height: 2rem;
3811
+ --hop-ListBoxItem-xs-avatar-margin-block: 0;
3812
+ --hop-ListBoxItem-xs-label-font-weight: var(--hop-body-sm-font-weight);
3813
+ --hop-ListBoxItem-xs-label-font-weight-selected: var(--hop-body-sm-medium-font-weight);
3814
+ --hop-ListBoxItem-sm-padding-block: var(--hop-space-inset-sm);
3815
+ --hop-ListBoxItem-sm-padding-inline: var(--hop-space-inset-md);
3816
+ --hop-ListBoxItem-sm-min-height: 2.5rem;
3817
+ --hop-ListBoxItem-sm-avatar-margin-block: 0;
3818
+ --hop-ListBoxItem-sm-label-font-weight: var(--hop-body-sm-font-weight);
3819
+ --hop-ListBoxItem-sm-label-font-weight-selected: var(--hop-body-sm-medium-font-weight);
3820
+ --hop-ListBoxItem-md-padding-block: var(--hop-space-inset-md);
3821
+ --hop-ListBoxItem-md-padding-inline: var(--hop-space-inset-md);
3822
+ --hop-ListBoxItem-md-min-height: 3.5rem;
3823
+ --hop-ListBoxItem-md-avatar-margin-block: calc(-1 * var(--hop-space-stack-xs));
3824
+ --hop-ListBoxItem-md-label-font-weight: var(--hop-body-sm-font-weight);
3825
+ --hop-ListBoxItem-md-label-font-weight-selected: var(--hop-body-sm-medium-font-weight);
3826
+ --hop-ListBoxItem-lg-padding-block: var(--hop-space-inset-md);
3827
+ --hop-ListBoxItem-lg-padding-inline: var(--hop-space-inset-md);
3828
+ --hop-ListBoxItem-lg-min-height: 4rem;
3829
+ --hop-ListBoxItem-lg-avatar-margin-block: calc(-1 * var(--hop-space-stack-xs));
3830
+ --hop-ListBoxItem-lg-label-font-weight: var(--hop-body-md-font-weight);
3831
+ --hop-ListBoxItem-lg-label-font-weight-selected: var(--hop-body-md-medium-font-weight);
3832
+ --hop-ListBoxItem-background-color-hovered: var(--hop-neutral-surface-hover);
3833
+ --hop-ListBoxItem-text-color-hovered: var(--hop-neutral-text-hover);
3834
+ --hop-ListBoxItem-icon-color-hovered: var(--hop-neutral-icon-hover);
3835
+ --hop-ListBoxItem-background-color-pressed: var(--hop-neutral-surface-press);
3836
+ --hop-ListBoxItem-text-color-pressed: var(--hop-neutral-text-press);
3837
+ --hop-ListBoxItem-icon-color-pressed: var(--hop-neutral-icon-press);
3838
+ --hop-ListBoxItem-background-color-focused: var(--hop-neutral-surface-hover);
3839
+ --hop-ListBoxItem-text-color-focused: var(--hop-neutral-text-hover);
3840
+ --hop-ListBoxItem-icon-color-focused: var(--hop-neutral-icon-hover);
3841
+ --hop-ListBoxItem-background-color-selected: transparent;
3842
+ --hop-ListBoxItem-text-color-selected: var(--hop-neutral-text);
3843
+ --hop-ListBoxItem-icon-color-selected: var(--hop-neutral-icon);
3844
+ --hop-ListBoxItem-background-color-invalid: transparent;
3845
+ --hop-ListBoxItem-background-color-invalid-hovered: var(--hop-danger-surface-hover);
3846
+ --hop-ListBoxItem-background-color-invalid-pressed: var(--hop-danger-surface-press);
3847
+ --hop-ListBoxItem-background-color-invalid-focused: var(--hop-danger-surface-hover);
3848
+ --hop-ListBoxItem-background-color-invalid-selected: transparent;
3849
+ --hop-ListBoxItem-background-color-invalid-disabled: transparent;
3850
+ --hop-ListBoxItem-text-color-invalid: var(--hop-danger-text-weak);
3851
+ --hop-ListBoxItem-text-color-invalid-hovered: var(--hop-danger-text-strong);
3852
+ --hop-ListBoxItem-text-color-invalid-pressed: var(--hop-danger-text-strong);
3853
+ --hop-ListBoxItem-text-color-invalid-focused: var(--hop-danger-text-strong);
3854
+ --hop-ListBoxItem-text-color-invalid-selected: var(--hop-danger-text-weak);
3855
+ --hop-ListBoxItem-text-color-invalid-disabled: var(--hop-danger-text-disabled);
3856
+ --hop-ListBoxItem-icon-color-invalid: var(--hop-danger-icon-weak);
3857
+ --hop-ListBoxItem-icon-color-invalid-hovered: var(--hop-danger-icon-strong);
3858
+ --hop-ListBoxItem-icon-color-invalid-pressed: var(--hop-danger-icon-strong);
3859
+ --hop-ListBoxItem-icon-color-invalid-focused: var(--hop-danger-icon-strong);
3860
+ --hop-ListBoxItem-icon-color-invalid-selected: var(--hop-danger-icon-weak);
3861
+ --hop-ListBoxItem-icon-color-invalid-disabled: var(--hop-danger-icon-disabled);
3862
+ --hop-ListBoxItem-description-text-color-invalid-hovered: inherit;
3863
+ --hop-ListBoxItem-description-text-color-invalid-pressed: inherit;
3864
+ --hop-ListBoxItem-description-text-color-invalid-focused: inherit;
3865
+ --hop-ListBoxItem-background-color-disabled: transparent;
3866
+ --hop-ListBoxItem-text-color-disabled: var(--hop-neutral-text-disabled);
3867
+ --hop-ListBoxItem-icon-color-disabled: var(--hop-neutral-icon-disabled);
3868
+ --background-color: var(--hop-ListBoxItem-background-color);
3869
+ --text-color: var(--hop-ListBoxItem-text-color);
3870
+ --icon-color: var(--hop-ListBoxItem-icon-color);
3871
+ --outline: none;
3872
+ --cursor: default;
3873
+ --checkmark-opacity: 0;
3874
+ --description-text-color: var(--hop-ListBoxItem-description-text-color);
3875
+ --row-gap: 0;
3876
+ --grid-template-areas: var(--hop-ListBoxItem-grid-template-areas);
3877
+ --grid-template-columns: var(--hop-ListBoxItem-grid-template-columns);
3878
+ --checkmark-transition: opacity 0.2s ease-in-out .2s;
3879
+ cursor: var(--cursor);
3880
+ box-sizing: border-box;
3881
+ color: var(--text-color);
3882
+ background-color: var(--background-color);
3883
+ border-radius: var(--hop-ListBoxItem-border-radius);
3884
+ outline: var(--outline);
3885
+ outline-offset: calc(-1 * var(--hop-ListBoxItem-outline-size));
3886
+ }
3887
+ .ListBoxItem-module__hop-ListBoxItem--xs___lZib0 {
3888
+ --padding-block: var(--hop-ListBoxItem-xs-padding-block);
3889
+ --padding-inline: var(--hop-ListBoxItem-xs-padding-inline);
3890
+ --min-height: var(--hop-ListBoxItem-xs-min-height);
3891
+ --avatar-margin-block: var(--hop-ListBoxItem-xs-avatar-margin-block);
3892
+ --label-font-weight: var(--hop-ListBoxItem-xs-label-font-weight);
3893
+ }
3894
+ .ListBoxItem-module__hop-ListBoxItem--sm___NG9Qu {
3895
+ --padding-block: var(--hop-ListBoxItem-sm-padding-block);
3896
+ --padding-inline: var(--hop-ListBoxItem-sm-padding-inline);
3897
+ --min-height: var(--hop-ListBoxItem-sm-min-height);
3898
+ --avatar-margin-block: var(--hop-ListBoxItem-sm-avatar-margin-block);
3899
+ --label-font-weight: var(--hop-ListBoxItem-sm-label-font-weight);
3900
+ }
3901
+ .ListBoxItem-module__hop-ListBoxItem--md___sRrPz {
3902
+ --padding-block: var(--hop-ListBoxItem-md-padding-block);
3903
+ --padding-inline: var(--hop-ListBoxItem-md-padding-inline);
3904
+ --min-height: var(--hop-ListBoxItem-md-min-height);
3905
+ --avatar-margin-block: var(--hop-ListBoxItem-md-avatar-margin-block);
3906
+ --label-font-weight: var(--hop-ListBoxItem-md-label-font-weight);
3907
+ }
3908
+ .ListBoxItem-module__hop-ListBoxItem--lg___3nQ83 {
3909
+ --padding-block: var(--hop-ListBoxItem-lg-padding-block);
3910
+ --padding-inline: var(--hop-ListBoxItem-lg-padding-inline);
3911
+ --min-height: var(--hop-ListBoxItem-lg-min-height);
3912
+ --avatar-margin-block: var(--hop-ListBoxItem-lg-avatar-margin-block);
3913
+ --label-font-weight: var(--hop-ListBoxItem-lg-label-font-weight);
3914
+ }
3915
+ .ListBoxItem-module__hop-ListBoxItem___QvcpN[data-selection-mode] {
3916
+ --cursor: pointer;
3917
+ }
3918
+ .ListBoxItem-module__hop-ListBoxItem___QvcpN:not([data-selection-mode]) {
3919
+ --grid-template-columns: var(--hop-ListBoxItem-grid-template-columns-not-selected);
3920
+ }
3921
+ .ListBoxItem-module__hop-ListBoxItem__inner___txRTc:not([data-list-has-selection]):has(.ListBoxItem-module__hop-ListBoxItem__checkmark___MbqOD) {
3922
+ --grid-template-columns: var(--hop-ListBoxItem-grid-template-columns-not-selected);
3923
+ }
3924
+ .ListBoxItem-module__hop-ListBoxItem__inner___txRTc[data-list-has-selection-end]:has(.ListBoxItem-module__hop-ListBoxItem__checkmark___MbqOD) {
3925
+ --checkmark-transition: none;
3926
+ }
3927
+ .ListBoxItem-module__hop-ListBoxItem___QvcpN[data-selected] {
3928
+ --background-color: var(--hop-ListBoxItem-background-color-selected);
3929
+ --text-color: var(--hop-ListBoxItem-text-color-selected);
3930
+ --icon-color: var(--hop-ListBoxItem-icon-color-selected);
3931
+ --checkmark-opacity: 1;
3932
+ }
3933
+ .ListBoxItem-module__hop-ListBoxItem--xs___lZib0[data-selected] {
3934
+ --label-font-weight: var(--hop-ListBoxItem-xs-label-font-weight-selected);
3935
+ }
3936
+ .ListBoxItem-module__hop-ListBoxItem--sm___NG9Qu[data-selected] {
3937
+ --label-font-weight: var(--hop-ListBoxItem-sm-label-font-weight-selected);
3938
+ }
3939
+ .ListBoxItem-module__hop-ListBoxItem--md___sRrPz[data-selected] {
3940
+ --label-font-weight: var(--hop-ListBoxItem-md-label-font-weight-selected);
3941
+ }
3942
+ .ListBoxItem-module__hop-ListBoxItem--lg___3nQ83[data-selected] {
3943
+ --label-font-weight: var(--hop-ListBoxItem-lg-label-font-weight-selected);
3944
+ }
3945
+ .ListBoxItem-module__hop-ListBoxItem___QvcpN[data-focus-visible] {
3946
+ --background-color: var(--hop-ListBoxItem-background-color-focused);
3947
+ --text-color: var(--hop-ListBoxItem-text-color-focused);
3948
+ --icon-color: var(--hop-ListBoxItem-icon-color-focused);
3949
+ --outline: var(--hop-ListBoxItem-outline-size) solid var(--hop-ListBoxItem-outline-color);
3950
+ }
3951
+ .ListBoxItem-module__hop-ListBoxItem___QvcpN[data-hovered] {
3952
+ --background-color: var(--hop-ListBoxItem-background-color-hovered);
3953
+ --text-color: var(--hop-ListBoxItem-text-color-hovered);
3954
+ --icon-color: var(--hop-ListBoxItem-icon-color-hovered);
3955
+ }
3956
+ .ListBoxItem-module__hop-ListBoxItem___QvcpN[data-pressed] {
3957
+ --background-color: var(--hop-ListBoxItem-background-color-pressed);
3958
+ --text-color: var(--hop-ListBoxItem-text-color-pressed);
3959
+ --icon-color: var(--hop-ListBoxItem-icon-color-pressed);
3960
+ }
3961
+ .ListBoxItem-module__hop-ListBoxItem___QvcpN[data-disabled] {
3962
+ --background-color: var(--hop-ListBoxItem-background-color-disabled);
3963
+ --text-color: var(--hop-ListBoxItem-text-color-disabled);
3964
+ --icon-color: var(--hop-ListBoxItem-icon-color-disabled);
3965
+ --description-text-color: var(--hop-ListBoxItem-text-color-disabled);
3966
+ --cursor: not-allowed;
3967
+ }
3968
+ .ListBoxItem-module__hop-ListBoxItem___QvcpN[data-invalid] {
3969
+ --background-color: var(--hop-ListBoxItem-background-color-invalid);
3970
+ --text-color: var(--hop-ListBoxItem-text-color-invalid);
3971
+ --icon-color: var(--hop-ListBoxItem-icon-color-invalid);
3972
+ }
3973
+ .ListBoxItem-module__hop-ListBoxItem___QvcpN[data-invalid][data-selected] {
3974
+ --background-color: var(--hop-ListBoxItem-background-color-invalid-selected);
3975
+ --text-color: var(--hop-ListBoxItem-text-color-invalid-selected);
3976
+ --icon-color: var(--hop-ListBoxItem-icon-color-invalid-selected);
3977
+ }
3978
+ .ListBoxItem-module__hop-ListBoxItem___QvcpN[data-invalid][data-focus-visible] {
3979
+ --background-color: var(--hop-ListBoxItem-background-color-invalid-focused);
3980
+ --text-color: var(--hop-ListBoxItem-text-color-invalid-focused);
3981
+ --icon-color: var(--hop-ListBoxItem-icon-color-invalid-focused);
3982
+ --description-text-color: var(--hop-ListBoxItem-description-text-color-invalid-focused);
3983
+ }
3984
+ .ListBoxItem-module__hop-ListBoxItem___QvcpN[data-invalid][data-hovered] {
3985
+ --background-color: var(--hop-ListBoxItem-background-color-invalid-hovered);
3986
+ --text-color: var(--hop-ListBoxItem-text-color-invalid-hovered);
3987
+ --icon-color: var(--hop-ListBoxItem-icon-color-invalid-hovered);
3988
+ --description-text-color: var(--hop-ListBoxItem-description-text-color-invalid-hovered);
3989
+ }
3990
+ .ListBoxItem-module__hop-ListBoxItem___QvcpN[data-invalid][data-pressed] {
3991
+ --background-color: var(--hop-ListBoxItem-background-color-invalid-pressed);
3992
+ --text-color: var(--hop-ListBoxItem-text-color-invalid-pressed);
3993
+ --icon-color: var(--hop-ListBoxItem-icon-color-invalid-pressed);
3994
+ --description-text-color: var(--hop-ListBoxItem-description-text-color-invalid-pressed);
3995
+ }
3996
+ .ListBoxItem-module__hop-ListBoxItem___QvcpN[data-invalid][data-disabled] {
3997
+ --background-color: var(--hop-ListBoxItem-background-color-invalid-disabled);
3998
+ --text-color: var(--hop-ListBoxItem-text-color-invalid-disabled);
3999
+ --icon-color: var(--hop-ListBoxItem-icon-color-invalid-disabled);
4000
+ }
4001
+ .ListBoxItem-module__hop-ListBoxItem___QvcpN:has(.ListBoxItem-module__hop-ListBoxItem__description___GUzrd) {
4002
+ --row-gap: var(--hop-ListBoxItem-row-gap);
4003
+ --grid-template-areas: var(--hop-ListBoxItem-grid-template-areas-with-description);
4004
+ }
4005
+ .ListBoxItem-module__hop-ListBoxItem___QvcpN[data-loading] {
4006
+ --grid-template-areas: var(--hop-ListBoxItem-grid-template-areas-loading);
4007
+ --grid-template-columns: var(--hop-ListBoxItem-grid-template-columns-loading);
4008
+ }
4009
+ .ListBoxItem-module__hop-ListBoxItem__inner___txRTc {
4010
+ display: grid;
4011
+ grid-template-areas: var(--grid-template-areas);
4012
+ grid-template-columns: var(--grid-template-columns);
4013
+ row-gap: var(--row-gap);
4014
+ align-items: center;
4015
+ box-sizing: border-box;
4016
+ min-block-size: var(--min-height);
4017
+ padding-block: var(--padding-block);
4018
+ padding-inline: var(--padding-inline);
4019
+ transition: grid-template-columns .3s ease-in-out;
4020
+ }
4021
+ .ListBoxItem-module__hop-ListBoxItem__checkmark___MbqOD {
4022
+ grid-area: indicator;
4023
+ margin-inline-end: var(--hop-ListBoxItem-column-gap);
4024
+ color: var(--icon-color);
4025
+ opacity: var(--checkmark-opacity);
4026
+ transition: var(--checkmark-transition);
4027
+ }
4028
+ .ListBoxItem-module__hop-ListBoxItem__radio___Urn5f,
4029
+ .ListBoxItem-module__hop-ListBoxItem__checkbox___LHciW {
4030
+ pointer-events: none;
4031
+ user-select: none;
4032
+ grid-area: indicator;
4033
+ margin-inline-end: var(--hop-ListBoxItem-column-gap);
4034
+ }
4035
+ .ListBoxItem-module__hop-ListBoxItem__avatar___K1Ark {
4036
+ grid-area: avatar;
4037
+ margin-block: var(--avatar-margin-block, 0);
4038
+ margin-inline-end: var(--hop-ListBoxItem-column-gap);
4039
+ }
4040
+ .ListBoxItem-module__hop-ListBoxItem__icon-list___r8RQE,
4041
+ .ListBoxItem-module__hop-ListBoxItem__icon___Y3uVa {
4042
+ grid-area: icon;
4043
+ flex: 0 0 auto;
4044
+ margin-inline-end: var(--hop-ListBoxItem-column-gap);
4045
+ color: var(--icon-color);
4046
+ }
4047
+ .ListBoxItem-module__hop-ListBoxItem__label___1L0EC {
4048
+ overflow: hidden;
4049
+ grid-area: label;
4050
+ min-inline-size: 0;
4051
+ font-weight: var(--label-font-weight);
4052
+ text-overflow: ellipsis;
4053
+ white-space: nowrap;
4054
+ }
4055
+ .ListBoxItem-module__hop-ListBoxItem__end-icon-list___zp7WO,
4056
+ .ListBoxItem-module__hop-ListBoxItem__end-icon___f-q1U {
4057
+ grid-area: end-icon;
4058
+ margin-inline-start: var(--hop-ListBoxItem-column-gap);
4059
+ color: var(--icon-color);
4060
+ }
4061
+ .ListBoxItem-module__hop-ListBoxItem__badge___ltsNo {
4062
+ grid-area: badge;
4063
+ margin-block: var(--hop-ListBoxItem-badge-margin-block);
4064
+ margin-inline-start: var(--hop-ListBoxItem-column-gap);
4065
+ }
4066
+ .ListBoxItem-module__hop-ListBoxItem__description___GUzrd {
4067
+ overflow: hidden;
4068
+ display: -webkit-box;
4069
+ grid-area: description;
4070
+ -webkit-box-orient: vertical;
4071
+ -webkit-line-clamp: 2;
4072
+ line-clamp: 2;
4073
+ color: var(--description-text-color);
4074
+ }
4075
+
4076
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/list-box/src/ListBox.module.css/#css-module-data */
4077
+ .ListBox-module__hop-ListBox___PSbqU {
4078
+ --hop-ListBox-background-color: var(--hop-neutral-surface);
4079
+ --hop-ListBox-border-color: var(--hop-neutral-border-weak);
4080
+ --hop-ListBox-border-radius: var(--hop-shape-rounded-md);
4081
+ --hop-ListBox-border-size: 0.0625rem;
4082
+ --hop-ListBox-padding-inline: var(--hop-space-inset-sm);
4083
+ --hop-ListBox-padding-block: var(--hop-space-inset-sm);
4084
+ --hop-ListBox-min-width: 13.625rem;
4085
+ --hop-ListBox-max-width: 18rem;
4086
+ --hop-ListBox-width: max-content;
4087
+ --hop-ListBox-fluid-width: 100%;
4088
+ --hop-ListBox-fluid-max-width: 100%;
4089
+ --hop-ListBox-section-padding-block: var(--hop-ListBox-padding-block);
4090
+ --hop-ListBox-section-padding-inline: var(--hop-ListBox-padding-inline);
4091
+ --hop-ListBox-section-margin-block: var(--hop-space-stack-sm);
4092
+ --hop-ListBox-section-margin-inline: calc(-1 * var(--hop-ListBox-padding-inline));
4093
+ --hop-ListBox-section-border-size: var(--hop-ListBox-border-size);
4094
+ --hop-ListBox-section-border-color: var(--hop-ListBox-border-color);
4095
+ --hop-ListBox-section-header-color: var(--hop-neutral-text-weak);
4096
+ --hop-ListBox-section-header-font-family: var(--hop-overline-font-family);
4097
+ --hop-ListBox-section-header-font-size: var(--hop-overline-font-size);
4098
+ --hop-ListBox-section-header-font-weight: var(--hop-overline-font-weight);
4099
+ --hop-ListBox-section-header-letter-spacing: 0.015rem;
4100
+ --hop-ListBox-section-header-line-height: var(--hop-overline-line-height);
4101
+ --hop-ListBox-section-header-text-transform: uppercase;
4102
+ --hop-ListBox-section-header-padding: var(--hop-space-inset-stretch-sm);
4103
+ --hop-ListBox-section-header-top-offset: var(--hop-overline-top-offset);
4104
+ --hop-ListBox-section-header-bottom-offset: var(--hop-overline-bottom-offset);
4105
+ --max-width: var(--hop-ListBox-max-width);
4106
+ --width: var(--hop-ListBox-width);
4107
+ --section-padding-block-start: var(--hop-ListBox-section-padding-block);
4108
+ --section-padding-block-end: var(--hop-ListBox-section-padding-block);
4109
+ --section-margin-block-start: 0;
4110
+ --section-margin-block-end: 0;
4111
+ --section-border-block-start: 0;
4112
+ --section-border-block-end: var(--hop-ListBox-section-border-size) solid var(--hop-ListBox-section-border-color);
4113
+ overflow: hidden auto;
4114
+ box-sizing: border-box;
4115
+ inline-size: var(--width);
4116
+ min-inline-size: var(--hop-ListBox-min-width);
4117
+ max-inline-size: var(--max-width);
4118
+ padding-block: var(--hop-ListBox-padding-block);
4119
+ padding-inline: var(--hop-ListBox-padding-inline);
4120
+ background-color: var(--hop-ListBox-background-color);
4121
+ border: var(--hop-ListBox-border-size) solid var(--hop-ListBox-border-color);
4122
+ border-radius: var(--hop-ListBox-border-radius);
4123
+ }
4124
+ .ListBox-module__hop-ListBox--fluid___GX-qg {
4125
+ --max-width: var(--hop-ListBox-fluid-max-width);
4126
+ --width: var(--hop-ListBox-fluid-width);
4127
+ }
4128
+ .ListBox-module__hop-ListBox__section___bsYz4 {
4129
+ margin-block: var(--section-margin-block-start) var(--section-margin-block-end);
4130
+ margin-inline: var(--hop-ListBox-section-margin-inline);
4131
+ padding-block: var(--section-padding-block-start) var(--section-padding-block-end);
4132
+ padding-inline: var(--hop-ListBox-section-padding-inline);
4133
+ border-block-start: var(--section-border-block-start);
4134
+ border-block-end: var(--section-border-block-end);
4135
+ }
4136
+ .ListBox-module__hop-ListBox__item___LdnNS + .ListBox-module__hop-ListBox__section___bsYz4 {
4137
+ --section-margin-block-start: var(--hop-ListBox-section-margin-block);
4138
+ --section-border-block-start: var(--hop-ListBox-section-border-size) solid var(--hop-ListBox-section-border-color);
4139
+ }
4140
+ .ListBox-module__hop-ListBox__section___bsYz4:has(+ .ListBox-module__hop-ListBox__item___LdnNS) {
4141
+ --section-margin-block-end: var(--hop-ListBox-section-margin-block);
4142
+ }
4143
+ .ListBox-module__hop-ListBox__section___bsYz4:first-child {
4144
+ --section-padding-block-start: 0;
4145
+ }
4146
+ .ListBox-module__hop-ListBox__section___bsYz4:last-child {
4147
+ --section-padding-block-end: 0;
4148
+ --section-border-block-end: 0;
4149
+ }
4150
+ .ListBox-module__hop-ListBox__section-header___JA5vG {
4151
+ margin: 0;
4152
+ padding: var(--hop-ListBox-section-header-padding);
4153
+ font-family: var(--hop-ListBox-section-header-font-family);
4154
+ font-size: var(--hop-ListBox-section-header-font-size);
4155
+ font-weight: var(--hop-ListBox-section-header-font-weight);
4156
+ line-height: var(--hop-ListBox-section-header-line-height);
4157
+ color: var(--hop-ListBox-section-header-color);
4158
+ text-transform: var(--hop-ListBox-section-header-text-transform);
4159
+ letter-spacing: var(--hop-ListBox-section-header-letter-spacing);
4160
+ }
4161
+ .ListBox-module__hop-ListBox__section-header___JA5vG::before,
4162
+ .ListBox-module__hop-ListBox__section-header___JA5vG::after {
4163
+ content: "";
4164
+ display: block;
4165
+ box-sizing: border-box;
4166
+ inline-size: 0;
4167
+ block-size: 0;
4168
+ }
4169
+ .ListBox-module__hop-ListBox__section-header___JA5vG::before {
4170
+ margin-block-end: var(--hop-ListBox-section-header-bottom-offset);
4171
+ }
4172
+ .ListBox-module__hop-ListBox__section-header___JA5vG::after {
4173
+ margin-block-start: var(--hop-ListBox-section-header-top-offset);
4174
+ }
4175
+
4176
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/overlays/popover/src/Popover.module.css/#css-module-data */
4177
+ :where(.Popover-module__hop-Popover___Tn-G9 *) {
4178
+ font-family: var(--font-family);
4179
+ font-size: var(--font-size);
4180
+ font-weight: var(--font-weight);
4181
+ line-height: var(--line-height);
4182
+ outline: none;
4183
+ }
4184
+ .Popover-module__hop-Popover___Tn-G9 {
4185
+ --hop-Popover-max-inline-width: calc(100% - (var(--container-padding) * 2));
4186
+ --hop-Popover-inline-width: 25rem;
4187
+ --hop-Popover-dropdown-inline-width: var(--trigger-width);
4188
+ --hop-Popover-combo-box-dropdown-inline-width: var(--custom-trigger-width);
4189
+ --hop-Popover-dropdown-auto-inline-width: auto;
4190
+ --width: var(--hop-Popover-inline-width);
4191
+ --max-width: var(--hop-Popover-max-inline-width);
4192
+ display: flex;
4193
+ flex-direction: column;
4194
+ inline-size: var(--width);
4195
+ max-inline-size: var(--max-width);
4196
+ }
4197
+ .Popover-module__hop-Popover___Tn-G9[data-trigger=Select] {
4198
+ --width: var(--hop-Popover-dropdown-inline-width);
4199
+ }
4200
+ .Popover-module__hop-Popover___Tn-G9[data-trigger=ComboBox] {
4201
+ --width: var(--hop-Popover-combo-box-dropdown-inline-width);
4202
+ }
4203
+ .Popover-module__hop-Popover___Tn-G9[data-auto-width] {
4204
+ --width: var(--hop-Popover-dropdown-auto-inline-width);
4205
+ }
4206
+ .Popover-module__hop-Popover___Tn-G9[data-entering] {
4207
+ animation: Popover-module__fade___nUmvV 0.25s;
4208
+ }
4209
+ .Popover-module__hop-Popover___Tn-G9[data-exiting] {
4210
+ animation: Popover-module__fade___nUmvV 0.25s reverse;
4211
+ }
4212
+ @keyframes Popover-module__fade___nUmvV {
4213
+ from {
4214
+ opacity: 0;
4215
+ }
4216
+ to {
4217
+ opacity: 1;
4218
+ }
4219
+ }
4220
+ .Popover-module__hop-Popover__wrapper___606o6 {
4221
+ display: flex;
4222
+ flex: 1 1 auto;
4223
+ flex-direction: column;
4224
+ min-block-size: 0;
4225
+ }
4226
+ .Popover-module__hop-Popover__dialog___OKeOS,
4227
+ .Popover-module__hop-Popover__dropdown___GLwYO {
4228
+ --hop-Popover-background: var(--hop-neutral-surface);
4229
+ --hop-Popover-font-family: var(--hop-body-sm-font-family);
4230
+ --hop-Popover-font-size: var(--hop-body-sm-font-size);
4231
+ --hop-Popover-font-weight: var(--hop-body-sm-font-weight);
4232
+ --hop-Popover-line-height: var(--hop-body-sm-line-height);
4233
+ --hop-Popover-color: var(--hop-neutral-text);
4234
+ --hop-Popover-grid-template: "header header" "content content" 1fr "footer action" / auto auto;
4235
+ --hop-Popover-column-gap: var(--hop-space-inset-sm);
4236
+ --hop-Popover-row-gap: var(--hop-space-stack-sm);
4237
+ --hop-Popover-dialog-padding: var(--hop-space-inset-md);
4238
+ --hop-Popover-dropdown-padding: 0;
4239
+ --hop-Popover-title-font-family: var(--hop-body-sm-font-family);
4240
+ --hop-Popover-title-font-weight: var(--hop-body-sm-semibold-font-weight);
4241
+ --hop-Popover-content-font-size: var(--hop-body-sm-font-size);
4242
+ --hop-Popover-content-font-family: var(--hop-body-sm-font-family);
4243
+ --hop-Popover-content-font-weight: var(--hop-body-sm-font-weight);
4244
+ --hop-Popover-content-line-height: var(--hop-body-sm-line-height);
4245
+ --hop-Popover-content-color: var(--hop-neutral-text-weak);
4246
+ --hop-Popover-footer-font-size: var(--hop-body-sm-font-size);
4247
+ --hop-Popover-footer-line-height: var(--hop-body-sm-line-height);
4248
+ --hop-Popover-footer-link-color: var(--hop-primary-text);
4249
+ --hop-Popover-footer-margin: var(--hop-space-stack-md) 0 0;
4250
+ --hop-Popover-border: 0.0625rem solid var(--hop-neutral-border-weak);
4251
+ --hop-Popover-border-radius: var(--hop-shape-rounded-md);
4252
+ --hop-Popover-box-shadow: var(--hop-elevation-lifted);
4253
+ --hop-Popover-dropdown-grid-template: "header" "content" 1fr "footer" / auto;
4254
+ --hop-Popover-list-box-dropdown-max-height: 18.75rem;
4255
+ --hop-Popover-footer-dropdown-margin: var(--hop-Popover-dropdown-padding) calc(-1 * var(--hop-Popover-dropdown-padding)) calc(-1 * var(--hop-Popover-dropdown-padding));
4256
+ --hop-Popover-footer-dropdown-footer-padding: var(--hop-space-inset-sm);
4257
+ --hop-Popover-footer-dropdown-footer-border-top: 0.0625rem solid var(--hop-neutral-border-weak);
4258
+ --font-family: var(--hop-Popover-font-family);
4259
+ --font-size: var(--hop-Popover-font-size);
4260
+ --font-weight: var(--hop-Popover-font-weight);
4261
+ --line-height: var(--hop-Popover-line-height);
4262
+ --grid-template: var(--hop-Popover-grid-template);
4263
+ --footer-margin: var(--hop-Popover-footer-margin);
4264
+ --footer-place-self: center start;
4265
+ display: grid;
4266
+ grid-template: var(--grid-template);
4267
+ box-sizing: border-box;
4268
+ min-block-size: 0;
4269
+ padding: var(--padding);
4270
+ background-color: var(--hop-Popover-background);
4271
+ border: var(--hop-Popover-border);
4272
+ border-radius: var(--hop-Popover-border-radius);
4273
+ box-shadow: var(--hop-Popover-box-shadow);
4274
+ }
4275
+ .Popover-module__hop-Popover__dropdown___GLwYO {
4276
+ --footer-margin: var(--hop-Popover-footer-dropdown-margin);
4277
+ --footer-place-self: stretch;
4278
+ --grid-template: var(--hop-Popover-dropdown-grid-template);
4279
+ --padding: var(--hop-Popover-dropdown-padding);
4280
+ overflow: hidden;
4281
+ }
4282
+ .Popover-module__hop-Popover__dialog___OKeOS {
4283
+ --padding: var(--hop-Popover-dialog-padding);
4284
+ }
4285
+ .Popover-module__hop-Popover__title___Tu4KH {
4286
+ grid-area: header;
4287
+ color: var(--hop-Popover-color);
4288
+ }
4289
+ .Popover-module__hop-Popover__content___t3KK5 {
4290
+ --font-size: var(--hop-Popover-content-font-size);
4291
+ --line-height: var(--hop-Popover-content-line-height);
4292
+ --font-family: var(--hop-Popover-content-font-family);
4293
+ --font-weight: var(--hop-Popover-content-font-weight);
4294
+ grid-area: content;
4295
+ margin-block: var(--hop-Popover-row-gap) 0;
4296
+ margin-inline: 0;
4297
+ padding: 0;
4298
+ color: var(--hop-Popover-content-color);
4299
+ }
4300
+ .Popover-module__hop-Popover___Tn-G9:not(:has(.Popover-module__hop-Popover__title___Tu4KH)) {
4301
+ .Popover-module__hop-Popover__content___t3KK5 {
4302
+ margin-block: 0 var(--hop-Popover-row-gap) 0;
4303
+ }
4304
+ }
4305
+ .Popover-module__hop-Popover__dropdown___GLwYO .Popover-module__hop-Popover__list-box___XmUYJ {
4306
+ grid-area: content;
4307
+ inline-size: auto;
4308
+ min-inline-size: auto;
4309
+ max-inline-size: none;
4310
+ max-block-size: var(--hop-Popover-list-box-dropdown-max-height);
4311
+ border: none;
4312
+ }
4313
+ .Popover-module__hop-Popover__footer___jo9Dl {
4314
+ --font-size: var(--hop-Popover-footer-font-size);
4315
+ --line-height: var(--hop-Popover-footer-line-height);
4316
+ grid-area: footer;
4317
+ place-self: var(--footer-place-self);
4318
+ margin: var(--footer-margin);
4319
+ color: var(--hop-Popover-color);
4320
+ }
4321
+ .Popover-module__hop-Popover__dropdown___GLwYO .Popover-module__hop-Popover__footer___jo9Dl {
4322
+ padding: var(--hop-Popover-footer-dropdown-footer-padding);
4323
+ border-block-start: var(--hop-Popover-footer-dropdown-footer-border-top);
4324
+ }
4325
+ .Popover-module__hop-Popover__actions___dcbdB,
4326
+ .Popover-module__hop-Popover__action___6mpc0 {
4327
+ grid-area: action;
4328
+ justify-self: end;
4329
+ margin-block-start: var(--hop-Popover-row-gap);
4330
+ }
4331
+ .Popover-module__hop-Popover___Tn-G9:has(.Popover-module__hop-Popover__actions___dcbdB, .Popover-module__hop-Popover__action___6mpc0) .Popover-module__hop-Popover__footer___jo9Dl {
4332
+ margin-inline-end: var(--hop-Popover-column-gap);
4333
+ }
4334
+
4335
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/overlays/popover/src/PopoverBase.module.css/#css-module-data */
4336
+ .PopoverBase-module__hop-PopoverBase___R08eb {
4337
+ --hop-Popover-background: var(--hop-neutral-surface);
4338
+ --hop-Popover-border: 0.0625rem solid var(--hop-neutral-border-weak);
4339
+ --hop-Popover-border-radius: var(--hop-shape-rounded-md);
4340
+ --hop-Popover-box-shadow: var(--hop-elevation-lifted);
4341
+ --hop-Popover-color: var(--hop-neutral-text);
4342
+ --hop-Popover-font-family: var(--hop-body-md-font-family);
4343
+ --hop-Popover-font-size: var(--hop-body-md-font-size);
4344
+ --hop-Popover-font-weight: var(--hop-body-md-font-weight);
4345
+ --hop-Popover-line-height: var(--hop-body-md-line-height);
4346
+ --hop-Popover-font-smoothing: antialiased;
4347
+ isolation: isolate;
4348
+ display: flex;
4349
+ flex-shrink: 0;
4350
+ align-items: center;
4351
+ box-sizing: border-box;
4352
+ max-inline-size: calc(100vw - 2* var(--container-padding, 0));
4353
+ font-family: var(--hop-Popover-font-family);
4354
+ font-size: var(--hop-Popover-font-size);
4355
+ font-weight: var(--hop-Popover-font-weight);
4356
+ -webkit-font-smoothing: var(--hop-Popover-font-smoothing);
4357
+ line-height: var(--hop-Popover-line-height);
4358
+ color: var(--hop-Popover-color);
4359
+ background-color: var(--hop-Popover-background);
4360
+ border: var(--hop-Popover-border);
4361
+ border-radius: var(--hop-Popover-border-radius);
4362
+ outline: none;
4363
+ box-shadow: var(--hop-Popover-box-shadow);
4364
+ transition: opacity var(--hop-easing-duration-2);
4365
+ }
4366
+ .PopoverBase-module__hop-PopoverBase___R08eb[data-entering] {
4367
+ opacity: 0;
4368
+ }
4369
+ .PopoverBase-module__hop-PopoverBase___R08eb[data-exiting] {
4370
+ pointer-events: none;
4371
+ opacity: 0;
4372
+ transition-timing-function: var(--hop-easing-productive);
4373
+ }
4374
+
4375
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/contextual-help/src/ContextualHelp.module.css/#css-module-data */
4376
+ .ContextualHelp-module__hop-ContextualHelp___-cswK {
4377
+ --hop-ContextualHelp-block-size: fit-content;
4378
+ --hop-ContextualHelp-inline-size: fit-content;
4379
+ --hop-ContextualHelp-box-sizing: border-box;
4380
+ --hop-ContextualHelp-background-color: transparent;
4381
+ --hop-ContextualHelp-border: none;
4382
+ --hop-ContextualHelp-border-radius: var(--hop-shape-rounded-md);
4383
+ --hop-ContextualHelp-outline: none;
4384
+ --hop-ContextualHelp-outline-size: var(--hop-space-20);
4385
+ --hop-ContextualHelp-padding: var(--hop-space-20);
4386
+ --hop-ContextualHelp-color: var(--hop-neutral-text-weak);
4387
+ --hop-ContextualHelp-focus-ring-color: var(--hop-primary-border-focus);
4388
+ --hop-ContextualHelp-display: flex;
4389
+ --hop-ContextualHelp-aspect-ratio: 1;
4390
+ --hop-ContextualHelp-column-gap: 0;
4391
+ --hop-ContextualHelp-align-items: center;
4392
+ --hop-ContextualHelp-justify-content: center;
4393
+ display: var(--hop-ContextualHelp-display);
4394
+ column-gap: var(--hop-ContextualHelp-column-gap);
4395
+ align-items: var(--hop-ContextualHelp-align-items);
4396
+ justify-content: var(--hop-ContextualHelp-justify-content);
4397
+ box-sizing: var(--hop-ContextualHelp-box-sizing);
4398
+ aspect-ratio: var(--hop-ContextualHelp-aspect-ratio);
4399
+ inline-size: var(--hop-ContextualHelp-inline-size);
4400
+ block-size: var(--hop-ContextualHelp-block-size);
4401
+ padding: var( --hop-ContextualHelp-padding);
4402
+ color: var(--hop-ContextualHelp-color);
4403
+ background-color: var(--hop-ContextualHelp-background-color);
4404
+ border: var(--hop-ContextualHelp-border);
4405
+ border-radius: var(--hop-ContextualHelp-border-radius);
4406
+ outline: var(--hop-ContextualHelp-outline);
4407
+ }
4408
+ .ContextualHelp-module__hop-ContextualHelp___-cswK[data-focus-visible] {
4409
+ outline: var(--hop-ContextualHelp-outline-size) solid var(--hop-ContextualHelp-focus-ring-color);
4410
+ }
4411
+ .ContextualHelp-module__hop-ContextualHelp__popover___-vnF0 {
4412
+ --hop-ContextualHelp__popover-outline: none;
4413
+ --hop-ContextualHelp__popover-border: none;
4414
+ --hop-ContextualHelp__popover-max-inline-size: 20rem;
4415
+ --hop-ContextualHelp__popover-background: var(--hop-neutral-surface-strong);
4416
+ --hop-ContextualHelp__popover-border-radius: var(--hop-shape-rounded-md);
4417
+ --hop-ContextualHelp__popover-box-shadow: var(--hop-elevation-raised);
4418
+ --hop-ContextualHelp__popover-font-family: var(--hop-body-md-font-family);
4419
+ --hop-ContextualHelp__popover-font-size: var(--hop-body-md-font-size);
4420
+ --hop-ContextualHelp__popover-font-weight: var(--hop-body-md-font-weight);
4421
+ --hop-ContextualHelp__popover-line-height: var(--hop-body-md-line-height);
4422
+ --hop-ContextualHelp__popover-font-smoothing: antialiased;
4423
+ --hop-ContextualHelp__popover-color: var(--hop-neutral-text-strong);
4424
+ --hop-ContextualHelp__popover-padding: var(--hop-space-inset-squish-md);
4425
+ max-inline-size: min(var(--hop-ContextualHelp__popover-max-inline-size), calc(100% - (var(--container-padding) * 2)));
4426
+ padding: var(--hop-ContextualHelp__popover-padding);
4427
+ font-family: var(--hop-ContextualHelp__popover-font-family);
4428
+ font-size: var(--hop-ContextualHelp__popover-font-size);
4429
+ font-weight: var(--hop-ContextualHelp__popover-font-weight);
4430
+ -webkit-font-smoothing: var(--hop-ContextualHelp__popover-font-smoothing);
4431
+ line-height: var(--hop-ContextualHelp__popover-line-height);
4432
+ color: var(--hop-ContextualHelp__popover-color);
4433
+ background: var(--hop-ContextualHelp__popover-background);
4434
+ border: var(--hop-ContextualHelp__popover-border);
4435
+ border-radius: var(--hop-ContextualHelp__popover-border-radius);
4436
+ outline: var(--hop-ContextualHelp__popover-outline);
4437
+ box-shadow: var(--hop-ContextualHelp__popover-box-shadow);
4438
+ }