@hopper-ui/components 1.6.0 → 1.7.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 (384) 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 +344 -325
  7. package/dist/alert/src/Alert.js +11 -11
  8. package/dist/alert/src/index.css +344 -325
  9. package/dist/alert/src/index.js +11 -11
  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 +6 -6
  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 +11 -11
  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 +7 -7
  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 +8 -8
  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 +5 -5
  44. package/dist/buttons/src/index.css +267 -260
  45. package/dist/buttons/src/index.d.ts +2 -2
  46. package/dist/buttons/src/index.js +12 -12
  47. package/dist/callout/src/Callout.css +279 -272
  48. package/dist/callout/src/Callout.js +9 -9
  49. package/dist/callout/src/CompactCallout.css +316 -309
  50. package/dist/callout/src/CompactCallout.js +9 -9
  51. package/dist/callout/src/index.css +328 -321
  52. package/dist/callout/src/index.js +10 -10
  53. package/dist/card/src/Card.css +47 -40
  54. package/dist/card/src/Card.js +1 -1
  55. package/dist/card/src/index.css +47 -40
  56. package/dist/card/src/index.js +1 -1
  57. package/dist/checkbox/src/Checkbox.css +63 -56
  58. package/dist/checkbox/src/Checkbox.js +5 -5
  59. package/dist/checkbox/src/CheckboxField.css +50 -43
  60. package/dist/checkbox/src/CheckboxField.js +4 -4
  61. package/dist/checkbox/src/CheckboxGroup.css +115 -108
  62. package/dist/checkbox/src/CheckboxGroup.js +9 -8
  63. package/dist/checkbox/src/DecorativeCheckbox.css +71 -64
  64. package/dist/checkbox/src/DecorativeCheckbox.js +4 -4
  65. package/dist/checkbox/src/index.css +115 -108
  66. package/dist/checkbox/src/index.js +13 -12
  67. package/dist/{chunk-HCFKAC4T.js → chunk-23WYVBUK.js} +2 -2
  68. package/dist/{chunk-QYEV2QUA.js → chunk-2C4RHHUL.js} +2 -2
  69. package/dist/{chunk-MCUPCFYQ.js → chunk-2KFOOJ34.js} +20 -10
  70. package/dist/{chunk-H7K7KLU4.js → chunk-2WU7UWOH.js} +3 -3
  71. package/dist/{chunk-HEHMZWBC.js → chunk-3FHJOMUC.js} +1 -1
  72. package/dist/{chunk-AXBVBNPN.js → chunk-3VZPTUVR.js} +3 -3
  73. package/dist/{chunk-C76BH4QR.js → chunk-53QBBZR4.js} +2 -2
  74. package/dist/{chunk-SKHYIVXR.js → chunk-57RTMTQ7.js} +3 -3
  75. package/dist/{chunk-SW4UF2MM.js → chunk-5FXGGEA5.js} +26 -20
  76. package/dist/{chunk-36S3E6PJ.js → chunk-5H2DG3VF.js} +2 -2
  77. package/dist/{chunk-ZJKGATZR.js → chunk-5I6PDORP.js} +8 -2
  78. package/dist/{chunk-STU7DFF5.js → chunk-5ZP2KUGN.js} +17 -15
  79. package/dist/{chunk-2USDHEIV.js → chunk-67EK2P5M.js} +3 -3
  80. package/dist/{chunk-GEMZ5EDW.js → chunk-6G56A3XH.js} +20 -10
  81. package/dist/{chunk-TU5MAMGV.js → chunk-6Q6Q4HUH.js} +10 -8
  82. package/dist/chunk-6T7TUF6N.js +178 -0
  83. package/dist/{chunk-ONCR64LB.js → chunk-AC5FLJJL.js} +2 -2
  84. package/dist/{chunk-H6CZ6DKP.js → chunk-ACG3BFJQ.js} +1 -1
  85. package/dist/{chunk-XKREPRGK.js → chunk-AV7XDPXN.js} +1 -1
  86. package/dist/{chunk-LAN2LJO2.js → chunk-AX3SYX3G.js} +1 -1
  87. package/dist/{chunk-H637L477.js → chunk-CC5SXS5R.js} +1 -1
  88. package/dist/{chunk-KUGVMCIB.js → chunk-CIQZIY5N.js} +1 -1
  89. package/dist/{chunk-AYAKR4MK.js → chunk-CNG2EXC7.js} +3 -3
  90. package/dist/{chunk-REXPSB5P.js → chunk-CT3S2ZJP.js} +2 -2
  91. package/dist/{chunk-B2PCJYJW.js → chunk-DE74UTDH.js} +2 -2
  92. package/dist/{chunk-W53AAAUA.js → chunk-DEFXMEBJ.js} +2 -2
  93. package/dist/{chunk-HGSA2Y3P.js → chunk-DP4FHVJR.js} +25 -13
  94. package/dist/{chunk-62EZGVKH.js → chunk-EBXH6HHZ.js} +21 -11
  95. package/dist/{chunk-R5CEXZPL.js → chunk-EDDYY4KO.js} +1 -1
  96. package/dist/{chunk-SINPHU2Z.js → chunk-FIY4TUYL.js} +4 -28
  97. package/dist/{chunk-V2AGZ5A5.js → chunk-G2IQWVGX.js} +1 -1
  98. package/dist/{chunk-K73FGFB2.js → chunk-G5GYOSK7.js} +8 -8
  99. package/dist/{chunk-TZZQP76M.js → chunk-GR5QWFCA.js} +4 -4
  100. package/dist/{chunk-BI3MQKBI.js → chunk-HERQEWF5.js} +3 -3
  101. package/dist/{chunk-R4ICRVDS.js → chunk-HQJZSCV7.js} +1 -1
  102. package/dist/{chunk-DLYK3JRB.js → chunk-I25B6DME.js} +2 -2
  103. package/dist/{chunk-W2C47VCH.js → chunk-IIBLQ2CB.js} +1 -1
  104. package/dist/{chunk-SLFA36JO.js → chunk-J5FY5YAZ.js} +1 -1
  105. package/dist/{chunk-V7HFSPRY.js → chunk-J6FKM7WM.js} +1 -1
  106. package/dist/{chunk-R3PAHNRL.js → chunk-JBTFYM4B.js} +3 -3
  107. package/dist/{chunk-L4D32IWU.js → chunk-JNJFX2LE.js} +2 -2
  108. package/dist/{chunk-A2BFPCVC.js → chunk-JVLK5INM.js} +3 -3
  109. package/dist/{chunk-5WUSHVW7.js → chunk-KKUSWUZC.js} +1 -1
  110. package/dist/{chunk-CQHB3HRC.js → chunk-L7DSMPLQ.js} +2 -2
  111. package/dist/{chunk-RMAIQQFV.js → chunk-LACYHXY5.js} +2 -2
  112. package/dist/{chunk-EELIGZUD.js → chunk-LBXB3JFD.js} +5 -5
  113. package/dist/{chunk-6LKFNPEM.js → chunk-LMH2XI5J.js} +10 -4
  114. package/dist/{chunk-J62I6GH3.js → chunk-LOFWD2GD.js} +2 -2
  115. package/dist/{chunk-JNFQC65H.js → chunk-LUCUQMMD.js} +3 -3
  116. package/dist/chunk-MR5BPD6R.js +7 -0
  117. package/dist/{chunk-NVOQLDA5.js → chunk-N7A4SDQA.js} +18 -16
  118. package/dist/{chunk-GKN3BY36.js → chunk-NAK42XEC.js} +3 -3
  119. package/dist/{chunk-M3L2VYKL.js → chunk-NC7G3EHF.js} +2 -2
  120. package/dist/{chunk-GKUY4QWP.js → chunk-NFETZ57D.js} +2 -2
  121. package/dist/{chunk-75DHKNW2.js → chunk-NNLLQWDS.js} +4 -4
  122. package/dist/{chunk-YWNBO3UY.js → chunk-OABMTS4J.js} +1 -1
  123. package/dist/{chunk-KWXJDQ4M.js → chunk-OCK54JWW.js} +2 -2
  124. package/dist/{chunk-MYZE5GJA.js → chunk-OINTMN5W.js} +2 -2
  125. package/dist/{chunk-D7IJXSDN.js → chunk-OS6JDQKO.js} +2 -2
  126. package/dist/{chunk-K7PQOHUQ.js → chunk-OYPIU6JL.js} +2 -2
  127. package/dist/chunk-PDWWX5JI.js +70 -0
  128. package/dist/{chunk-XUO7HGRK.js → chunk-PJ2RHMZ3.js} +2 -2
  129. package/dist/{chunk-WJ55ZV54.js → chunk-PQSMCDAM.js} +3 -0
  130. package/dist/{chunk-ARCWWXRR.js → chunk-PQVBUEXC.js} +3 -3
  131. package/dist/{chunk-SEQN7G35.js → chunk-QARGGDML.js} +4 -4
  132. package/dist/{chunk-IJZK5LYV.js → chunk-QDN24QKG.js} +1 -1
  133. package/dist/{chunk-QVHMDEWO.js → chunk-QSCBTSIF.js} +9 -3
  134. package/dist/{chunk-RNVPPIZQ.js → chunk-RIFW5PYW.js} +3 -3
  135. package/dist/{chunk-VOZN65OL.js → chunk-RN3FLBX4.js} +8 -2
  136. package/dist/{chunk-U35DID2L.js → chunk-S5AHDRSE.js} +1 -1
  137. package/dist/chunk-TQQMWXRK.js +190 -0
  138. package/dist/{chunk-PPV6OKAK.js → chunk-UBBZ4LV5.js} +19 -9
  139. package/dist/{chunk-MYPNAEEC.js → chunk-UBILZ2MS.js} +1 -1
  140. package/dist/{chunk-VLGOJ5DY.js → chunk-UFR36PXP.js} +4 -4
  141. package/dist/{chunk-KEDXRQG2.js → chunk-ULY62A7P.js} +6 -6
  142. package/dist/{chunk-FOD6Q7UN.js → chunk-V5PLUMR5.js} +3 -3
  143. package/dist/{chunk-UIOWILYW.js → chunk-V7OAPBQT.js} +1 -1
  144. package/dist/{chunk-ZSOUOAD4.js → chunk-V7VDYDIQ.js} +3 -4
  145. package/dist/{chunk-MP4UER4S.js → chunk-VBJVG2YA.js} +15 -6
  146. package/dist/{chunk-RKZRG2QV.js → chunk-VSCRFXJ2.js} +5 -5
  147. package/dist/{chunk-WDZO4L7Z.js → chunk-W2EX7F7K.js} +1 -1
  148. package/dist/{chunk-TLAJAVGL.js → chunk-WJE3JIRZ.js} +3 -3
  149. package/dist/{chunk-LERLQFPC.js → chunk-X4IV4VLD.js} +4 -4
  150. package/dist/{chunk-FJJG6PMV.js → chunk-XEMYAR47.js} +1 -1
  151. package/dist/{chunk-JOCKBZYP.js → chunk-XLJODMSX.js} +8 -2
  152. package/dist/{chunk-TN5C3AE3.js → chunk-YDNBMCQD.js} +8 -4
  153. package/dist/{chunk-2EAZ5H42.js → chunk-YFQIN27E.js} +1 -1
  154. package/dist/{chunk-FJ6AAK5Z.js → chunk-YZBOR2D4.js} +9 -7
  155. package/dist/{chunk-VMGVHR42.js → chunk-Z5WDAIAE.js} +2 -2
  156. package/dist/{chunk-CICKS5HQ.js → chunk-ZLL3VV5V.js} +3 -3
  157. package/dist/{chunk-WY3JOP43.js → chunk-ZRYHXQDJ.js} +1 -1
  158. package/dist/combobox/src/ComboBox.css +687 -684
  159. package/dist/combobox/src/ComboBox.js +24 -23
  160. package/dist/combobox/src/index.css +687 -684
  161. package/dist/combobox/src/index.js +24 -23
  162. package/dist/contextual-help/src/ContextualHelp.css +4165 -0
  163. package/dist/contextual-help/src/ContextualHelp.d.ts +40 -0
  164. package/dist/contextual-help/src/ContextualHelp.js +14 -0
  165. package/dist/contextual-help/src/ContextualHelpContext.d.ts +13 -0
  166. package/dist/contextual-help/src/ContextualHelpContext.js +2 -0
  167. package/dist/contextual-help/src/index.css +4165 -0
  168. package/dist/contextual-help/src/index.d.ts +10 -0
  169. package/dist/contextual-help/src/index.js +14 -0
  170. package/dist/disclosure/src/Disclosure.css +54 -47
  171. package/dist/disclosure/src/Disclosure.js +2 -2
  172. package/dist/disclosure/src/DisclosureHeader.css +61 -54
  173. package/dist/disclosure/src/DisclosureHeader.js +4 -3
  174. package/dist/disclosure/src/DisclosurePanel.css +54 -47
  175. package/dist/disclosure/src/DisclosurePanel.js +5 -5
  176. package/dist/disclosure/src/index.css +79 -72
  177. package/dist/disclosure/src/index.js +9 -9
  178. package/dist/divider/src/Divider.css +46 -39
  179. package/dist/divider/src/Divider.js +1 -1
  180. package/dist/divider/src/index.css +46 -39
  181. package/dist/divider/src/index.js +1 -1
  182. package/dist/error-message/src/ErrorMessage.css +46 -39
  183. package/dist/error-message/src/ErrorMessage.js +3 -3
  184. package/dist/error-message/src/index.css +46 -39
  185. package/dist/error-message/src/index.js +3 -3
  186. package/dist/form/src/Form.css +44 -37
  187. package/dist/form/src/Form.js +1 -1
  188. package/dist/form/src/index.css +44 -37
  189. package/dist/form/src/index.js +1 -1
  190. package/dist/header/src/Header.css +279 -0
  191. package/dist/header/src/Header.js +3 -1
  192. package/dist/header/src/HeaderContext.d.ts +13 -3
  193. package/dist/header/src/index.css +279 -0
  194. package/dist/header/src/index.d.ts +1 -1
  195. package/dist/header/src/index.js +3 -1
  196. package/dist/helper-message/src/HelperMessage.css +46 -39
  197. package/dist/helper-message/src/HelperMessage.js +3 -3
  198. package/dist/helper-message/src/index.css +46 -39
  199. package/dist/helper-message/src/index.js +3 -3
  200. package/dist/hopper-provider/src/HopperProvider.css +45 -38
  201. package/dist/hopper-provider/src/HopperProvider.js +1 -1
  202. package/dist/hopper-provider/src/index.css +45 -38
  203. package/dist/hopper-provider/src/index.js +1 -1
  204. package/dist/i18n/src/index.js +1 -1
  205. package/dist/i18n/src/useLocalizedString.js +1 -1
  206. package/dist/icon-list/src/IconList.css +45 -38
  207. package/dist/icon-list/src/IconList.js +1 -1
  208. package/dist/icon-list/src/index.css +45 -38
  209. package/dist/icon-list/src/index.js +1 -1
  210. package/dist/illustrated-message/src/IllustratedMessage.css +286 -279
  211. package/dist/illustrated-message/src/IllustratedMessage.js +2 -2
  212. package/dist/illustrated-message/src/index.css +286 -279
  213. package/dist/illustrated-message/src/index.js +2 -2
  214. package/dist/image/src/Image.css +47 -40
  215. package/dist/image/src/Image.js +3 -1
  216. package/dist/image/src/ImageContext.d.ts +13 -3
  217. package/dist/image/src/SvgImage.css +45 -38
  218. package/dist/image/src/SvgImage.js +1 -1
  219. package/dist/image/src/index.css +48 -41
  220. package/dist/image/src/index.d.ts +1 -1
  221. package/dist/image/src/index.js +4 -2
  222. package/dist/index.css +1135 -1064
  223. package/dist/index.d.ts +10 -7
  224. package/dist/index.js +116 -113
  225. package/dist/inputs/src/Input.css +48 -41
  226. package/dist/inputs/src/Input.js +1 -1
  227. package/dist/inputs/src/InputGroup.css +50 -43
  228. package/dist/inputs/src/InputGroup.js +1 -1
  229. package/dist/inputs/src/NumberField.css +74 -67
  230. package/dist/inputs/src/NumberField.js +12 -11
  231. package/dist/inputs/src/PasswordField.css +287 -280
  232. package/dist/inputs/src/PasswordField.js +12 -11
  233. package/dist/inputs/src/RemainingCharacterCount.css +47 -40
  234. package/dist/inputs/src/RemainingCharacterCount.js +4 -4
  235. package/dist/inputs/src/SearchField.css +293 -286
  236. package/dist/inputs/src/SearchField.js +13 -12
  237. package/dist/inputs/src/TextArea.css +71 -64
  238. package/dist/inputs/src/TextArea.js +11 -10
  239. package/dist/inputs/src/TextField.css +291 -284
  240. package/dist/inputs/src/TextField.js +16 -15
  241. package/dist/inputs/src/index.css +339 -332
  242. package/dist/inputs/src/index.js +22 -21
  243. package/dist/layout/src/Content.css +279 -0
  244. package/dist/layout/src/Content.js +3 -1
  245. package/dist/layout/src/ContentContext.d.ts +13 -3
  246. package/dist/layout/src/Footer.css +279 -0
  247. package/dist/layout/src/Footer.js +3 -1
  248. package/dist/layout/src/FooterContext.d.ts +13 -3
  249. package/dist/link/src/Link.css +83 -76
  250. package/dist/link/src/Link.js +4 -4
  251. package/dist/link/src/index.css +83 -76
  252. package/dist/link/src/index.js +4 -4
  253. package/dist/list-box/src/ListBox.css +318 -311
  254. package/dist/list-box/src/ListBox.js +10 -10
  255. package/dist/list-box/src/ListBoxItem.css +306 -299
  256. package/dist/list-box/src/ListBoxItem.js +7 -7
  257. package/dist/list-box/src/ListBoxItemSkeleton.css +51 -44
  258. package/dist/list-box/src/ListBoxItemSkeleton.js +1 -1
  259. package/dist/list-box/src/index.css +318 -311
  260. package/dist/list-box/src/index.js +11 -11
  261. package/dist/menu/src/Menu.css +621 -627
  262. package/dist/menu/src/Menu.js +4 -4
  263. package/dist/menu/src/MenuItem.css +125 -118
  264. package/dist/menu/src/MenuItem.js +3 -3
  265. package/dist/menu/src/MenuSection.css +46 -39
  266. package/dist/menu/src/MenuSection.js +1 -1
  267. package/dist/menu/src/index.css +648 -654
  268. package/dist/menu/src/index.js +9 -9
  269. package/dist/modal/src/BaseModal.css +59 -52
  270. package/dist/modal/src/BaseModal.js +1 -1
  271. package/dist/modal/src/CustomModal.css +60 -53
  272. package/dist/modal/src/CustomModal.js +2 -2
  273. package/dist/modal/src/Modal.css +334 -315
  274. package/dist/modal/src/Modal.js +10 -10
  275. package/dist/modal/src/index.css +335 -316
  276. package/dist/modal/src/index.js +12 -12
  277. package/dist/overlays/popover/src/Popover.css +604 -597
  278. package/dist/overlays/popover/src/Popover.js +2 -2
  279. package/dist/overlays/popover/src/PopoverBase.css +47 -44
  280. package/dist/overlays/popover/src/PopoverBase.js +1 -1
  281. package/dist/overlays/popover/src/index.css +607 -604
  282. package/dist/overlays/popover/src/index.js +3 -3
  283. package/dist/radio/src/DecorativeRadio.css +71 -64
  284. package/dist/radio/src/DecorativeRadio.js +4 -4
  285. package/dist/radio/src/Radio.css +63 -56
  286. package/dist/radio/src/Radio.js +4 -4
  287. package/dist/radio/src/RadioField.css +50 -43
  288. package/dist/radio/src/RadioField.js +3 -3
  289. package/dist/radio/src/RadioGroup.css +115 -108
  290. package/dist/radio/src/RadioGroup.js +10 -9
  291. package/dist/radio/src/index.css +115 -108
  292. package/dist/radio/src/index.js +14 -13
  293. package/dist/segmented-control/src/SegmentedControl.css +45 -38
  294. package/dist/segmented-control/src/SegmentedControl.js +2 -2
  295. package/dist/segmented-control/src/SegmentedControlItem.css +59 -52
  296. package/dist/segmented-control/src/SegmentedControlItem.js +4 -4
  297. package/dist/segmented-control/src/index.css +60 -53
  298. package/dist/segmented-control/src/index.js +5 -5
  299. package/dist/select/src/Select.css +631 -628
  300. package/dist/select/src/Select.js +23 -22
  301. package/dist/select/src/SelectValue.css +105 -98
  302. package/dist/select/src/SelectValue.js +4 -4
  303. package/dist/select/src/index.css +631 -628
  304. package/dist/select/src/index.js +23 -22
  305. package/dist/spinner/src/Spinner.css +54 -47
  306. package/dist/spinner/src/Spinner.js +3 -3
  307. package/dist/spinner/src/index.css +54 -47
  308. package/dist/spinner/src/index.js +3 -3
  309. package/dist/switch/src/Switch.css +60 -53
  310. package/dist/switch/src/Switch.js +4 -4
  311. package/dist/switch/src/SwitchField.css +50 -43
  312. package/dist/switch/src/SwitchField.js +4 -4
  313. package/dist/switch/src/index.css +66 -59
  314. package/dist/switch/src/index.js +6 -6
  315. package/dist/tabs/src/Tab.css +457 -450
  316. package/dist/tabs/src/Tab.js +4 -4
  317. package/dist/tabs/src/TabLine.css +46 -39
  318. package/dist/tabs/src/TabLine.js +1 -1
  319. package/dist/tabs/src/TabList.css +53 -46
  320. package/dist/tabs/src/TabList.js +2 -2
  321. package/dist/tabs/src/TabPanel.css +46 -39
  322. package/dist/tabs/src/TabPanel.js +1 -1
  323. package/dist/tabs/src/index.css +468 -461
  324. package/dist/tabs/src/index.js +7 -7
  325. package/dist/tag/src/Tag.css +435 -428
  326. package/dist/tag/src/Tag.js +9 -9
  327. package/dist/tag/src/TagGroup.css +54 -47
  328. package/dist/tag/src/TagGroup.js +9 -8
  329. package/dist/tag/src/index.css +445 -438
  330. package/dist/tag/src/index.js +14 -13
  331. package/dist/tile/src/Tile.css +53 -46
  332. package/dist/tile/src/Tile.js +3 -3
  333. package/dist/tile/src/TileGroup.css +45 -38
  334. package/dist/tile/src/TileGroup.js +2 -2
  335. package/dist/tile/src/index.css +54 -47
  336. package/dist/tile/src/index.js +5 -5
  337. package/dist/toggle-arrow/src/ToggleArrow.css +46 -39
  338. package/dist/toggle-arrow/src/ToggleArrow.js +1 -1
  339. package/dist/toggle-arrow/src/index.css +46 -39
  340. package/dist/toggle-arrow/src/index.js +1 -1
  341. package/dist/tooltip/src/Tooltip.css +54 -47
  342. package/dist/tooltip/src/Tooltip.js +4 -4
  343. package/dist/tooltip/src/TooltipTrigger.css +44 -37
  344. package/dist/tooltip/src/index.css +54 -47
  345. package/dist/tooltip/src/index.js +5 -5
  346. package/dist/typography/heading/src/Heading.css +44 -37
  347. package/dist/typography/heading/src/Heading.js +3 -1
  348. package/dist/typography/heading/src/HeadingContext.d.ts +13 -3
  349. package/dist/typography/heading/src/index.css +44 -37
  350. package/dist/typography/heading/src/index.d.ts +1 -1
  351. package/dist/typography/heading/src/index.js +3 -1
  352. package/dist/typography/label/src/FieldLabel.css +279 -0
  353. package/dist/typography/label/src/FieldLabel.d.ts +30 -0
  354. package/dist/typography/label/src/FieldLabel.js +8 -0
  355. package/dist/typography/label/src/Label.css +52 -45
  356. package/dist/typography/label/src/Label.d.ts +0 -10
  357. package/dist/typography/label/src/Label.js +1 -4
  358. package/dist/typography/label/src/LabelContext.d.ts +1 -3
  359. package/dist/typography/label/src/index.css +44 -37
  360. package/dist/typography/label/src/index.d.ts +4 -2
  361. package/dist/typography/label/src/index.js +4 -3
  362. package/dist/typography/overline-text/src/OverlineText.css +44 -37
  363. package/dist/typography/overline-text/src/OverlineText.js +1 -1
  364. package/dist/typography/overline-text/src/index.css +44 -37
  365. package/dist/typography/overline-text/src/index.js +1 -1
  366. package/dist/typography/paragraph/src/Paragraph.css +44 -37
  367. package/dist/typography/paragraph/src/Paragraph.js +3 -3
  368. package/dist/typography/paragraph/src/index.css +44 -37
  369. package/dist/typography/paragraph/src/index.js +3 -3
  370. package/dist/typography/text/src/Text.css +44 -37
  371. package/dist/typography/text/src/Text.js +2 -2
  372. package/dist/typography/text/src/index.css +44 -37
  373. package/dist/typography/text/src/index.js +2 -2
  374. package/dist/utils/src/ClearSlots.css +44 -37
  375. package/dist/utils/src/ClearSlots.d.ts +1 -2
  376. package/dist/utils/src/ClearSlots.js +1 -1
  377. package/dist/utils/src/EnsureTextWrapper.css +44 -37
  378. package/dist/utils/src/EnsureTextWrapper.js +3 -3
  379. package/dist/utils/src/index.css +44 -37
  380. package/dist/utils/src/index.d.ts +1 -1
  381. package/dist/utils/src/index.js +3 -3
  382. package/dist/utils/src/types.d.ts +4 -0
  383. package/package.json +1 -1
  384. package/dist/chunk-67EKVQAF.js +0 -121
package/dist/contextual-help/src/index.css ADDED
@@ -0,0 +1,4165 @@
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___f8I5B {
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___f8I5B) {
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___RO7T9) {
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___u2TRR) {
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___BFmdf) {
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___hMrrH) {
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___gQz6L) {
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___9oHXD) {
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___7ZGiB) {
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___dgJtM {
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___dgJtM) {
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___HNiwu {
105
+ display: flex;
106
+ gap: var(--hop-space-inset-xs);
107
+ align-items: center;
108
+ }
109
+ .FieldLabel-module__hop-FieldLabel__indicator___X3yqm {
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___LSVJ2) {
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___-Cgyx {
139
+ box-sizing: border-box;
140
+ }
141
+ .OverlineText-module__hop-OverlineText__text___-Cgyx::before,
142
+ .OverlineText-module__hop-OverlineText__text___-Cgyx::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___-Cgyx::before {
150
+ margin-block-end: var(--bottom-offset);
151
+ }
152
+ .OverlineText-module__hop-OverlineText__text___-Cgyx::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___NFTCi {
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___NFTCi) {
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___I0d0v) {
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___33NDY) {
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___12lqb) {
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___EIx-l) {
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___Hgsci) {
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___bZva7) {
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___D42Q3) {
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___pDtiI {
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___pDtiI:last-child {
250
+ --margin-block-end: 0;
251
+ }
252
+ .Paragraph-module__hop-Paragraph--xs___yzl-N {
253
+ --margin-block-end: var(--hop-Paragraph-xs-margin-bottom);
254
+ }
255
+ .Paragraph-module__hop-Paragraph--sm___mssXe {
256
+ --margin-block-end: var(--hop-Paragraph-sm-margin-bottom);
257
+ }
258
+ .Paragraph-module__hop-Paragraph--md___Ujb4e {
259
+ --margin-block-end: var(--hop-Paragraph-md-margin-bottom);
260
+ }
261
+ .Paragraph-module__hop-Paragraph--lg___fzVC0 {
262
+ --margin-block-end: var(--hop-Paragraph-lg-margin-bottom);
263
+ }
264
+ .Paragraph-module__hop-Paragraph--xl___bF-Yd {
265
+ --margin-block-end: var(--hop-Paragraph-xl-margin-bottom);
266
+ }
267
+ .Paragraph-module__hop-Paragraph--2xl___UuYkH {
268
+ --margin-block-end: var(--hop-Paragraph-2xl-margin-bottom);
269
+ }
270
+ .Paragraph-module__hop-Paragraph--inherit___jW721 {
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___7RaBZ {
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___m2E3v {
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___pKwfA {
292
+ 0% {
293
+ transform: rotate(0deg);
294
+ }
295
+ 100% {
296
+ transform: rotate(360deg);
297
+ }
298
+ }
299
+ .Spinner-module__hop-Spinner___NL-2c {
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___pKwfA .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___o8oor {
319
+ --width: var(--hop-Spinner-sm-wheel-size);
320
+ --height: var(--hop-Spinner-sm-wheel-size);
321
+ }
322
+ .Spinner-module__hop-Spinner--md___Z3T3P {
323
+ --width: var(--hop-Spinner-md-wheel-size);
324
+ --height: var(--hop-Spinner-md-wheel-size);
325
+ }
326
+ .Spinner-module__hop-Spinner--lg___-2JJ5 {
327
+ --width: var(--hop-Spinner-lg-wheel-size);
328
+ --height: var(--hop-Spinner-lg-wheel-size);
329
+ }
330
+ .Spinner-module__hop-Spinner__track___-5qNx {
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___ds519 {
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___ds519 {
351
+ animation-duration: var(--hop-Spinner-fill-animation-reduced-motion-duration);
352
+ }
353
+ }
354
+ .Spinner-module__hop-Spinner__label___aAqY5 {
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___drz4z {
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___jF2LE {
485
+ --inline-size: 100%;
486
+ }
487
+ .Button-module__hop-Button--sm___yWI1w {
488
+ --block-size: var(--hop-Button-sm-height);
489
+ --padding: var(--hop-Button-sm-padding);
490
+ }
491
+ .Button-module__hop-Button--sm___yWI1w[class*=--ghost] {
492
+ --padding: var(--hop-Button-ghost-sm-padding);
493
+ }
494
+ .Button-module__hop-Button--md___5pA46[class*=--ghost] {
495
+ --padding: var(--hop-Button-ghost-md-padding);
496
+ }
497
+ .Button-module__hop-Button--icon-only___ZVI03 {
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___gQcR4 {
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___gQcR4[data-hovered],
509
+ .Button-module__hop-Button--primary___gQcR4[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___gQcR4[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___iPATA {
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___iPATA[data-hovered],
526
+ .Button-module__hop-Button--secondary___iPATA[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___iPATA[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___1odMt {
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___1odMt[data-hovered],
543
+ .Button-module__hop-Button--upsell___1odMt[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___1odMt[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___nvNVv {
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___nvNVv[data-hovered],
560
+ .Button-module__hop-Button--danger___nvNVv[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___nvNVv[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___XUMG1 {
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___XUMG1[data-hovered],
577
+ .Button-module__hop-Button--ghost-primary___XUMG1[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___XUMG1[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___YirRd {
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___YirRd[data-hovered],
596
+ .Button-module__hop-Button--ghost-secondary___YirRd[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___YirRd[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___J37kT {
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___J37kT[data-hovered],
615
+ .Button-module__hop-Button--ghost-danger___J37kT[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___J37kT[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___drz4z[data-focus-visible] {
628
+ outline: var(--hop-Button-outline-size) solid var(--hop-Button-focus-ring-color);
629
+ }
630
+ .Button-module__hop-Button___drz4z[data-disabled],
631
+ .Button-module__hop-Button--loading___Vt2Li {
632
+ cursor: not-allowed;
633
+ }
634
+ .Button-module__hop-Button___drz4z[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___drz4z[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___Vt2Li.Button-module__hop-Button--primary___gQcR4 {
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___Vt2Li.Button-module__hop-Button--secondary___iPATA {
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___Vt2Li.Button-module__hop-Button--upsell___1odMt {
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___Vt2Li.Button-module__hop-Button--danger___nvNVv {
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___Vt2Li.Button-module__hop-Button--ghost-primary___XUMG1 {
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___Vt2Li.Button-module__hop-Button--ghost-secondary___YirRd {
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___Vt2Li.Button-module__hop-Button--ghost-danger___J37kT {
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___qFcTX {
683
+ position: absolute;
684
+ color: var(--spinner-color);
685
+ }
686
+ .Button-module__hop-Button__icon___i0bX0,
687
+ .Button-module__hop-Button__icon-list___h-l1l {
688
+ flex: 0 0 auto;
689
+ justify-self: end;
690
+ order: 1;
691
+ }
692
+ .Button-module__hop-Button__text___gW1zi {
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___H4Qu5,
703
+ .Button-module__hop-Button__end-icon-list___k4l7m {
704
+ flex: 0 0 auto;
705
+ order: 3;
706
+ }
707
+ .Button-module__hop-Button___drz4z .Button-module__hop-Button__icon-list___h-l1l,
708
+ .Button-module__hop-Button___drz4z .Button-module__hop-Button__end-icon-list___k4l7m {
709
+ flex-wrap: nowrap;
710
+ }
711
+ .Button-module__hop-Button--loading___Vt2Li.Button-module__hop-Button___drz4z > *:not(.Button-module__hop-Button__Spinner___qFcTX) {
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___-ALaZ {
717
+ display: inline-flex;
718
+ flex-wrap: nowrap;
719
+ gap: var(--hop-space-inline-md);
720
+ }
721
+ .ButtonGroup-module__hop-ButtonGroup--horizontal___DnLYQ {
722
+ align-items: center;
723
+ }
724
+ .ButtonGroup-module__hop-ButtonGroup--vertical___xVumF {
725
+ flex-direction: column;
726
+ gap: var(--hop-space-stack-md);
727
+ justify-content: center;
728
+ }
729
+ .ButtonGroup-module__hop-ButtonGroup--start___MCLnI.ButtonGroup-module__hop-ButtonGroup--vertical___xVumF {
730
+ align-items: flex-start;
731
+ }
732
+ .ButtonGroup-module__hop-ButtonGroup--center___Yzha7.ButtonGroup-module__hop-ButtonGroup--vertical___xVumF {
733
+ align-items: center;
734
+ }
735
+ .ButtonGroup-module__hop-ButtonGroup--end___TPfzu.ButtonGroup-module__hop-ButtonGroup--vertical___xVumF {
736
+ align-items: flex-end;
737
+ }
738
+ .ButtonGroup-module__hop-ButtonGroup--start___MCLnI.ButtonGroup-module__hop-ButtonGroup--horizontal___DnLYQ {
739
+ justify-content: flex-start;
740
+ }
741
+ .ButtonGroup-module__hop-ButtonGroup--center___Yzha7.ButtonGroup-module__hop-ButtonGroup--horizontal___DnLYQ {
742
+ justify-content: center;
743
+ }
744
+ .ButtonGroup-module__hop-ButtonGroup--end___TPfzu.ButtonGroup-module__hop-ButtonGroup--horizontal___DnLYQ {
745
+ justify-content: flex-end;
746
+ }
747
+ .ButtonGroup-module__hop-ButtonGroup--wrap___lpmtc {
748
+ flex-wrap: wrap;
749
+ }
750
+ .ButtonGroup-module__hop-ButtonGroup--fluid___bOmqM {
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___SrrcP {
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___SrrcP::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___SrrcP[data-square] {
933
+ --effect-border-radius: var(--hop-EmbeddedButton-effect-square-border-radius);
934
+ }
935
+ .EmbeddedButton-module__hop-EmbeddedButton--md___M-G5L {
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___WgM6T {
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___M-G5L::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___WgM6T::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___dqSB7 {
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___XAbGu {
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___j2QOS {
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___DTxsT {
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___KpwA0 {
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___ik7EE {
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___5uZL3 {
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___JM5dT {
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___RWK1H {
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___saiRd {
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___f45MX {
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___K9AOA {
998
+ --color: var(--hop-EmbeddedButton-option6-color);
999
+ --effect-background-color: var(--hop-EmbeddedButton-option6-effect-background-color);
1000
+ }
1001
+ .EmbeddedButton-module__hop-EmbeddedButton___SrrcP[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___SrrcP[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___SrrcP[data-disabled] {
1010
+ cursor: not-allowed;
1011
+ }
1012
+ .EmbeddedButton-module__hop-EmbeddedButton--neutral___dqSB7[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___dqSB7[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___dqSB7[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___dqSB7[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___XAbGu[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___XAbGu[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___XAbGu[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___XAbGu[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___j2QOS[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___j2QOS[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___j2QOS[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___j2QOS[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___DTxsT[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___DTxsT[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___DTxsT[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___DTxsT[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___KpwA0[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___KpwA0[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___KpwA0[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___KpwA0[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___ik7EE[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___ik7EE[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___ik7EE[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___ik7EE[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___5uZL3[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___5uZL3[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___5uZL3[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___5uZL3[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___JM5dT[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___JM5dT[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___JM5dT[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___JM5dT[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___RWK1H[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___RWK1H[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___RWK1H[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___RWK1H[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___saiRd[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___saiRd[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___saiRd[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___saiRd[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___f45MX[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___f45MX[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___f45MX[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___f45MX[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___K9AOA[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___K9AOA[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___K9AOA[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___K9AOA[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___cOcXK {
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___aWaMI {
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___drz4z {
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___jF2LE {
1346
+ --inline-size: 100%;
1347
+ }
1348
+ .Button-module__hop-Button--sm___yWI1w {
1349
+ --block-size: var(--hop-Button-sm-height);
1350
+ --padding: var(--hop-Button-sm-padding);
1351
+ }
1352
+ .Button-module__hop-Button--sm___yWI1w[class*=--ghost] {
1353
+ --padding: var(--hop-Button-ghost-sm-padding);
1354
+ }
1355
+ .Button-module__hop-Button--md___5pA46[class*=--ghost] {
1356
+ --padding: var(--hop-Button-ghost-md-padding);
1357
+ }
1358
+ .Button-module__hop-Button--icon-only___ZVI03 {
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___gQcR4 {
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___gQcR4[data-hovered],
1370
+ .Button-module__hop-Button--primary___gQcR4[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___gQcR4[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___iPATA {
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___iPATA[data-hovered],
1387
+ .Button-module__hop-Button--secondary___iPATA[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___iPATA[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___1odMt {
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___1odMt[data-hovered],
1404
+ .Button-module__hop-Button--upsell___1odMt[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___1odMt[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___nvNVv {
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___nvNVv[data-hovered],
1421
+ .Button-module__hop-Button--danger___nvNVv[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___nvNVv[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___XUMG1 {
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___XUMG1[data-hovered],
1438
+ .Button-module__hop-Button--ghost-primary___XUMG1[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___XUMG1[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___YirRd {
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___YirRd[data-hovered],
1457
+ .Button-module__hop-Button--ghost-secondary___YirRd[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___YirRd[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___J37kT {
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___J37kT[data-hovered],
1476
+ .Button-module__hop-Button--ghost-danger___J37kT[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___J37kT[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___drz4z[data-focus-visible] {
1489
+ outline: var(--hop-Button-outline-size) solid var(--hop-Button-focus-ring-color);
1490
+ }
1491
+ .Button-module__hop-Button___drz4z[data-disabled],
1492
+ .Button-module__hop-Button--loading___Vt2Li {
1493
+ cursor: not-allowed;
1494
+ }
1495
+ .Button-module__hop-Button___drz4z[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___drz4z[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___Vt2Li.Button-module__hop-Button--primary___gQcR4 {
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___Vt2Li.Button-module__hop-Button--secondary___iPATA {
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___Vt2Li.Button-module__hop-Button--upsell___1odMt {
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___Vt2Li.Button-module__hop-Button--danger___nvNVv {
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___Vt2Li.Button-module__hop-Button--ghost-primary___XUMG1 {
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___Vt2Li.Button-module__hop-Button--ghost-secondary___YirRd {
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___Vt2Li.Button-module__hop-Button--ghost-danger___J37kT {
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___qFcTX {
1544
+ position: absolute;
1545
+ color: var(--spinner-color);
1546
+ }
1547
+ .Button-module__hop-Button__icon___i0bX0,
1548
+ .Button-module__hop-Button__icon-list___h-l1l {
1549
+ flex: 0 0 auto;
1550
+ justify-self: end;
1551
+ order: 1;
1552
+ }
1553
+ .Button-module__hop-Button__text___gW1zi {
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___H4Qu5,
1564
+ .Button-module__hop-Button__end-icon-list___k4l7m {
1565
+ flex: 0 0 auto;
1566
+ order: 3;
1567
+ }
1568
+ .Button-module__hop-Button___drz4z .Button-module__hop-Button__icon-list___h-l1l,
1569
+ .Button-module__hop-Button___drz4z .Button-module__hop-Button__end-icon-list___k4l7m {
1570
+ flex-wrap: nowrap;
1571
+ }
1572
+ .Button-module__hop-Button--loading___Vt2Li.Button-module__hop-Button___drz4z > *:not(.Button-module__hop-Button__Spinner___qFcTX) {
1573
+ opacity: 0;
1574
+ }
1575
+ .LinkButton-module__hop-LinkButton___hlYkA {
1576
+ }
1577
+ .LinkButton-module__hop-LinkButton--fluid___iCMfM {
1578
+ }
1579
+ .LinkButton-module__hop-LinkButton--sm___yzSw4 {
1580
+ }
1581
+ .LinkButton-module__hop-LinkButton--icon-only___DGxSD {
1582
+ }
1583
+ .LinkButton-module__hop-LinkButton--primary___l-P07 {
1584
+ }
1585
+ .LinkButton-module__hop-LinkButton--secondary___37NV- {
1586
+ }
1587
+ .LinkButton-module__hop-LinkButton--upsell___cIPT- {
1588
+ }
1589
+ .LinkButton-module__hop-LinkButton--danger___6bQIM {
1590
+ }
1591
+ .LinkButton-module__hop-LinkButton--ghost-primary___yKI9C {
1592
+ }
1593
+ .LinkButton-module__hop-LinkButton--ghost-secondary___L3AXZ {
1594
+ }
1595
+ .LinkButton-module__hop-LinkButton--ghost-danger___mT1c- {
1596
+ }
1597
+ .LinkButton-module__hop-LinkButton__Spinner___wDyVO {
1598
+ }
1599
+ .LinkButton-module__hop-LinkButton__icon___CjXqw,
1600
+ .LinkButton-module__hop-LinkButton__icon-list___fJZQG {
1601
+ }
1602
+ .LinkButton-module__hop-LinkButton__text___PNN59 {
1603
+ }
1604
+ .LinkButton-module__hop-LinkButton__end-icon___bC5qj,
1605
+ .LinkButton-module__hop-LinkButton__end-icon-list___5IdE7 {
1606
+ }
1607
+ .LinkButton-module__hop-LinkButton___hlYkA .LinkButton-module__hop-LinkButton__icon-list___fJZQG,
1608
+ .LinkButton-module__hop-LinkButton___hlYkA .LinkButton-module__hop-LinkButton__end-icon-list___5IdE7 {
1609
+ flex-wrap: nowrap;
1610
+ }
1611
+
1612
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/hopper-provider/src/HopperProvider.module.css/#css-module-data */
1613
+ .HopperProvider-module__hop-HopperProvider___1mjTd {
1614
+ font-family: var(--hop-body-md-font-family);
1615
+ font-size: var(--hop-body-md-font-size);
1616
+ font-weight: var(--hop-body-md-font-weight);
1617
+ -webkit-font-smoothing: antialiased;
1618
+ line-height: var(--hop-body-md-line-height);
1619
+ color: var(--hop-neutral-text);
1620
+ }
1621
+
1622
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/link/src/Link.module.css/#css-module-data */
1623
+ .Link-module__hop-Link___n4WL9 {
1624
+ --hop-Link-border-radius: var(--hop-shape-rounded-sm);
1625
+ --hop-Link-focus-ring-color: var(--hop-primary-border-focus);
1626
+ --hop-Link-color-disabled: var(--hop-neutral-text-disabled);
1627
+ --hop-Link-column-gap: var(--hop-space-inline-xs);
1628
+ --hop-Link-xs-font-size: var(--hop-body-xs-font-size);
1629
+ --hop-Link-xs-font-family: var(--hop-body-xs-font-family);
1630
+ --hop-Link-xs-font-weight: var(--hop-body-xs-font-weight);
1631
+ --hop-Link-xs-line-height: var(--hop-body-xs-line-height);
1632
+ --hop-Link-sm-font-size: var(--hop-body-sm-font-size);
1633
+ --hop-Link-sm-font-family: var(--hop-body-sm-font-family);
1634
+ --hop-Link-sm-font-weight: var(--hop-body-sm-font-weight);
1635
+ --hop-Link-sm-line-height: var(--hop-body-sm-line-height);
1636
+ --hop-Link-md-font-size: var(--hop-body-md-font-size);
1637
+ --hop-Link-md-font-family: var(--hop-body-md-font-family);
1638
+ --hop-Link-md-font-weight: var(--hop-body-md-font-weight);
1639
+ --hop-Link-md-line-height: var(--hop-body-md-line-height);
1640
+ --hop-Link-lg-font-size: var(--hop-body-lg-font-size);
1641
+ --hop-Link-lg-font-family: var(--hop-body-lg-font-family);
1642
+ --hop-Link-lg-font-weight: var(--hop-body-lg-font-weight);
1643
+ --hop-Link-lg-line-height: var(--hop-body-lg-line-height);
1644
+ --hop-Link-xl-font-size: var(--hop-body-xl-font-size);
1645
+ --hop-Link-xl-font-family: var(--hop-body-xl-font-family);
1646
+ --hop-Link-xl-font-weight: var(--hop-body-xl-font-weight);
1647
+ --hop-Link-xl-line-height: var(--hop-body-xl-line-height);
1648
+ --hop-Link-2xl-font-size: var(--hop-body-2xl-font-size);
1649
+ --hop-Link-2xl-font-family: var(--hop-body-2xl-font-family);
1650
+ --hop-Link-2xl-font-weight: var(--hop-body-2xl-font-weight);
1651
+ --hop-Link-2xl-line-height: var(--hop-body-2xl-line-height);
1652
+ --hop-Link-inherit-size-font-size: inherit;
1653
+ --hop-Link-inherit-size-font-family: inherit;
1654
+ --hop-Link-inherit-size-font-weight: inherit;
1655
+ --hop-Link-inherit-size-line-height: inherit;
1656
+ --hop-Link-primary-text-color: var(--hop-primary-text);
1657
+ --hop-Link-primary-text-disabled-color: var(--hop-primary-text-disabled);
1658
+ --hop-Link-primary-text-hover-color: var(--hop-primary-text-hover);
1659
+ --hop-Link-primary-text-pressed-color: var(--hop-primary-text-press);
1660
+ --hop-Link-neutral-text-color: var(--hop-neutral-text);
1661
+ --hop-Link-neutral-text-disabled-color: var(--hop-neutral-text-disabled);
1662
+ --hop-Link-neutral-text-hover-color: var(--hop-neutral-text-hover);
1663
+ --hop-Link-neutral-text-pressed-color: var(--hop-neutral-text-press);
1664
+ --hop-Link-padding-standalone: 0.125em 0;
1665
+ --hop-Link-padding-standalone-xs: var(--hop-space-20) 0;
1666
+ --hop-Link-padding-standalone-sm: var(--hop-space-20) 0;
1667
+ --hop-Link-padding-standalone-md: var(--hop-space-40) 0;
1668
+ --hop-Link-padding-standalone-lg: var(--hop-space-40) 0;
1669
+ --hop-Link-padding-standalone-xl: var(--hop-space-80) 0;
1670
+ --hop-Link-padding-standalone-2xl: var(--hop-space-80) 0;
1671
+ cursor: pointer;
1672
+ display: inline-flex;
1673
+ column-gap: var(--hop-Link-column-gap);
1674
+ align-items: center;
1675
+ box-sizing: border-box;
1676
+ inline-size: fit-content;
1677
+ text-decoration: none;
1678
+ text-underline-offset: 0.125rem;
1679
+ border-radius: var(--hop-Link-border-radius);
1680
+ outline: none;
1681
+ outline-offset: 0.125rem;
1682
+ }
1683
+ :where(.Link-module__hop-Link___n4WL9) {
1684
+ font-family: var(--font-family);
1685
+ font-size: var(--font-size);
1686
+ font-weight: var(--font-weight);
1687
+ line-height: var(--line-height);
1688
+ }
1689
+ :where(.Link-module__hop-Link--xs___kEypx) {
1690
+ --font-size: var(--hop-Link-xs-font-size);
1691
+ --font-family: var(--hop-Link-xs-font-family);
1692
+ --font-weight: var(--hop-Link-xs-font-weight);
1693
+ --line-height: var(--hop-Link-xs-line-height);
1694
+ }
1695
+ :where(.Link-module__hop-Link--sm___oCoo0) {
1696
+ --font-size: var(--hop-Link-sm-font-size);
1697
+ --font-family: var(--hop-Link-sm-font-family);
1698
+ --font-weight: var(--hop-Link-sm-font-weight);
1699
+ --line-height: var(--hop-Link-sm-line-height);
1700
+ }
1701
+ :where(.Link-module__hop-Link--md___4u0Jm) {
1702
+ --font-size: var(--hop-Link-md-font-size);
1703
+ --font-family: var(--hop-Link-md-font-family);
1704
+ --font-weight: var(--hop-Link-md-font-weight);
1705
+ --line-height: var(--hop-Link-md-line-height);
1706
+ }
1707
+ :where(.Link-module__hop-Link--lg___nFVvq) {
1708
+ --font-size: var(--hop-Link-lg-font-size);
1709
+ --font-family: var(--hop-Link-lg-font-family);
1710
+ --font-weight: var(--hop-Link-lg-font-weight);
1711
+ --line-height: var(--hop-Link-lg-line-height);
1712
+ }
1713
+ :where(.Link-module__hop-Link--xl___yqMaS) {
1714
+ --font-size: var(--hop-Link-xl-font-size);
1715
+ --font-family: var(--hop-Link-xl-font-family);
1716
+ --font-weight: var(--hop-Link-xl-font-weight);
1717
+ --line-height: var(--hop-Link-xl-line-height);
1718
+ }
1719
+ :where(.Link-module__hop-Link--2xl___EgZxg) {
1720
+ --font-size: var(--hop-Link-2xl-font-size);
1721
+ --font-family: var(--hop-Link-2xl-font-family);
1722
+ --font-weight: var(--hop-Link-2xl-font-weight);
1723
+ --line-height: var(--hop-Link-2xl-line-height);
1724
+ }
1725
+ :where(.Link-module__hop-Link--inherit___Xpj78) {
1726
+ --font-size: var(--hop-Link-inherit-size-font-size);
1727
+ --font-family: var(--hop-Link-inherit-size-font-family);
1728
+ --font-weight: var(--hop-Link-inherit-size-font-weight);
1729
+ --line-height: var(--hop-Link-inherit-size-line-height);
1730
+ }
1731
+ .Link-module__hop-Link___n4WL9[data-focus-visible] {
1732
+ outline: 0.125rem solid var(--hop-Link-focus-ring-color);
1733
+ }
1734
+ .Link-module__hop-Link___n4WL9[data-disabled] {
1735
+ cursor: default;
1736
+ }
1737
+ .Link-module__hop-Link--standalone___wSlf4 .Link-module__hop-Link__text___1mmQh {
1738
+ padding: var(--hop-Link-padding-standalone);
1739
+ }
1740
+ .Link-module__hop-Link--standalone___wSlf4.Link-module__hop-Link--xs___kEypx .Link-module__hop-Link__text___1mmQh {
1741
+ padding: var(--hop-Link-padding-standalone-xs);
1742
+ }
1743
+ .Link-module__hop-Link--standalone___wSlf4.Link-module__hop-Link--sm___oCoo0 .Link-module__hop-Link__text___1mmQh {
1744
+ padding: var(--hop-Link-padding-standalone-sm);
1745
+ }
1746
+ .Link-module__hop-Link--standalone___wSlf4.Link-module__hop-Link--md___4u0Jm .Link-module__hop-Link__text___1mmQh {
1747
+ padding: var(--hop-Link-padding-standalone-md);
1748
+ }
1749
+ .Link-module__hop-Link--standalone___wSlf4.Link-module__hop-Link--lg___nFVvq .Link-module__hop-Link__text___1mmQh {
1750
+ padding: var(--hop-Link-padding-standalone-lg);
1751
+ }
1752
+ .Link-module__hop-Link--standalone___wSlf4.Link-module__hop-Link--xl___yqMaS .Link-module__hop-Link__text___1mmQh {
1753
+ padding: var(--hop-Link-padding-standalone-xl);
1754
+ }
1755
+ .Link-module__hop-Link--standalone___wSlf4.Link-module__hop-Link--2xl___EgZxg .Link-module__hop-Link__text___1mmQh {
1756
+ padding: var(--hop-Link-padding-standalone-2xl);
1757
+ }
1758
+ .Link-module__hop-Link--quiet___9GBMr[data-focus-visible],
1759
+ .Link-module__hop-Link--quiet___9GBMr[data-hovered],
1760
+ .Link-module__hop-Link--standalone___wSlf4[data-focus-visible],
1761
+ .Link-module__hop-Link--standalone___wSlf4[data-hovered] {
1762
+ text-decoration: underline;
1763
+ }
1764
+ .Link-module__hop-Link___n4WL9:not(.Link-module__hop-Link--quiet___9GBMr, .Link-module__hop-Link--standalone___wSlf4) {
1765
+ text-decoration: underline;
1766
+ }
1767
+ .Link-module__hop-Link--primary___YeNRh {
1768
+ color: var(--hop-Link-primary-text-color);
1769
+ }
1770
+ .Link-module__hop-Link--primary___YeNRh[data-disabled] {
1771
+ color: var(--hop-Link-primary-text-disabled-color);
1772
+ }
1773
+ .Link-module__hop-Link--primary___YeNRh:not([data-disabled])[data-focus-visible],
1774
+ .Link-module__hop-Link--primary___YeNRh:not([data-disabled])[data-hovered] {
1775
+ color: var(--hop-Link-primary-text-hover-color);
1776
+ }
1777
+ .Link-module__hop-Link--primary___YeNRh:not([data-disabled])[data-pressed] {
1778
+ color: var(--hop-Link-primary-text-pressed-color);
1779
+ }
1780
+ .Link-module__hop-Link--secondary___0pBbc {
1781
+ color: var(--hop-Link-neutral-text-color);
1782
+ }
1783
+ .Link-module__hop-Link--secondary___0pBbc[data-disabled] {
1784
+ color: var(--hop-Link-neutral-text-disabled-color);
1785
+ }
1786
+ .Link-module__hop-Link--secondary___0pBbc:not([data-disabled])[data-focus-visible],
1787
+ .Link-module__hop-Link--secondary___0pBbc:not([data-disabled])[data-hovered] {
1788
+ color: var(--hop-Link-neutral-text-hover-color);
1789
+ }
1790
+ .Link-module__hop-Link--secondary___0pBbc:not([data-disabled])[data-pressed] {
1791
+ color: var(--hop-Link-neutral-text-pressed-color);
1792
+ }
1793
+ .Link-module__hop-Link__icon___QFMUA,
1794
+ .Link-module__hop-Link__icon-list___eQlWg {
1795
+ order: 2;
1796
+ }
1797
+ .Link-module__hop-Link__text___1mmQh {
1798
+ order: 1;
1799
+ }
1800
+ .Link-module__hop-Link__start-icon___Tury5,
1801
+ .Link-module__hop-Link__start-icon-list___lkoEc {
1802
+ order: 0;
1803
+ }
1804
+
1805
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/avatar/src/RichIconAvatarImage.module.css/#css-module-data */
1806
+ .RichIconAvatarImage-module__hop-RichIconAvatarImage___1PUxR {
1807
+ --hop-RichIconAvatarImage-background-color: var(--hop-decorative-option7-surface);
1808
+ --hop-RichIconAvatarImage-border-radius: var(--hop-shape-circle);
1809
+ --hop-RichIconAvatarImage-icon-color: var(--hop-decorative-option7-icon);
1810
+ --hop-RichIconAvatarImage-xs-size: 1rem;
1811
+ --hop-RichIconAvatarImage-icon-xs-size: 1rem;
1812
+ --hop-RichIconAvatarImage-sm-size: 1.5rem;
1813
+ --hop-RichIconAvatarImage-icon-sm-size: 1.5rem;
1814
+ --hop-RichIconAvatarImage-md-size: 2rem;
1815
+ --hop-RichIconAvatarImage-icon-md-size: 2rem;
1816
+ --hop-RichIconAvatarImage-lg-size: 3rem;
1817
+ --hop-RichIconAvatarImage-icon-lg-size: 3rem;
1818
+ --hop-RichIconAvatarImage-xl-size: 4rem;
1819
+ --hop-RichIconAvatarImage-icon-xl-size: 4rem;
1820
+ --hop-RichIconAvatarImage-2xl-size: 6rem;
1821
+ --hop-RichIconAvatarImage-icon-2xl-size: 4rem;
1822
+ --hop-RichIconAvatarImage-background-color-disabled: var(--hop-neutral-surface-disabled);
1823
+ --hop-RichIconAvatarImage-icon-color-disabled: var(--hop-neutral-icon-disabled);
1824
+ --background-color: var(--hop-RichIconAvatarImage-background-color);
1825
+ user-select: none;
1826
+ position: relative;
1827
+ overflow: hidden;
1828
+ display: flex;
1829
+ align-items: center;
1830
+ justify-content: center;
1831
+ inline-size: var(--size, var(--hop-RichIconAvatarImage-md-size));
1832
+ block-size: var(--size, var(--hop-RichIconAvatarImage-md-size));
1833
+ color: var(--hop-RichIconAvatarImage-icon-color);
1834
+ background-color: var(--background-color);
1835
+ border-radius: var(--hop-RichIconAvatarImage-border-radius);
1836
+ }
1837
+ .RichIconAvatarImage-module__hop-RichIconAvatarImage--xs___AaOnx {
1838
+ --size: var(--hop-RichIconAvatarImage-xs-size);
1839
+ --icon-size: var(--hop-RichIconAvatarImage-icon-xs-size);
1840
+ }
1841
+ .RichIconAvatarImage-module__hop-RichIconAvatarImage--sm___8Ecej {
1842
+ --size: var(--hop-RichIconAvatarImage-sm-size);
1843
+ --icon-size: var(--hop-RichIconAvatarImage-icon-sm-size);
1844
+ }
1845
+ .RichIconAvatarImage-module__hop-RichIconAvatarImage--md___aIh9w {
1846
+ --size: var(--hop-RichIconAvatarImage-md-size);
1847
+ --icon-size: var(--hop-RichIconAvatarImage-icon-md-size);
1848
+ }
1849
+ .RichIconAvatarImage-module__hop-RichIconAvatarImage--lg___9uTaH {
1850
+ --size: var(--hop-RichIconAvatarImage-lg-size);
1851
+ --icon-size: var(--hop-RichIconAvatarImage-icon-lg-size);
1852
+ }
1853
+ .RichIconAvatarImage-module__hop-RichIconAvatarImage--xl___ZOuAb {
1854
+ --size: var(--hop-RichIconAvatarImage-xl-size);
1855
+ --icon-size: var(--hop-RichIconAvatarImage-icon-xl-size);
1856
+ }
1857
+ .RichIconAvatarImage-module__hop-RichIconAvatarImage--2xl___ybj8I {
1858
+ --size: var(--hop-RichIconAvatarImage-2xl-size);
1859
+ --icon-size: var(--hop-RichIconAvatarImage-icon-2xl-size);
1860
+ }
1861
+ .RichIconAvatarImage-module__hop-RichIconAvatarImage___1PUxR[data-disabled] {
1862
+ --background-color: var(--hop-RichIconAvatarImage-background-color-disabled);
1863
+ }
1864
+ .RichIconAvatarImage-module__hop-RichIconAvatarImage__icon___SKpum {
1865
+ position: relative;
1866
+ display: block;
1867
+ inline-size: var(--icon-size, var(--hop-RichIconAvatarImage-icon-md-size));
1868
+ block-size: var(--icon-size, var(--hop-RichIconAvatarImage-icon-md-size));
1869
+ }
1870
+ .RichIconAvatarImage-module__hop-RichIconAvatarImage___1PUxR[data-disabled] .RichIconAvatarImage-module__hop-RichIconAvatarImage__icon___SKpum {
1871
+ --hop-RichIcon-placeholder-background: var(--hop-RichIconAvatarImage-background-color-disabled);
1872
+ --hop-RichIcon-placeholder-shadow: var(--hop-RichIconAvatarImage-icon-color-disabled);
1873
+ }
1874
+
1875
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/avatar/src/Avatar.module.css/#css-module-data */
1876
+ .Avatar-module__hop-Avatar___Ihw-T {
1877
+ --hop-Avatar-border-radius: var(--hop-shape-circle);
1878
+ --hop-Avatar-mix-blend-mode: normal;
1879
+ --hop-Avatar-decorative-1-background-color: var(--hop-decorative-option1-surface-strong);
1880
+ --hop-Avatar-decorative-2-background-color: var(--hop-decorative-option2-surface-strong);
1881
+ --hop-Avatar-decorative-3-background-color: var(--hop-decorative-option3-surface-strong);
1882
+ --hop-Avatar-decorative-4-background-color: var(--hop-decorative-option4-surface-strong);
1883
+ --hop-Avatar-decorative-5-background-color: var(--hop-decorative-option5-surface-strong);
1884
+ --hop-Avatar-decorative-6-background-color: var(--hop-decorative-option6-surface-strong);
1885
+ --hop-Avatar-decorative-7-background-color: var(--hop-decorative-option7-surface-strong);
1886
+ --hop-Avatar-decorative-8-background-color: var(--hop-decorative-option8-surface-strong);
1887
+ --hop-Avatar-decorative-9-background-color: var(--hop-decorative-option9-surface-strong);
1888
+ --hop-Avatar-decorative-1-text-color: var(--hop-decorative-option1-text);
1889
+ --hop-Avatar-decorative-2-text-color: var(--hop-decorative-option2-text);
1890
+ --hop-Avatar-decorative-3-text-color: var(--hop-decorative-option3-text);
1891
+ --hop-Avatar-decorative-4-text-color: var(--hop-decorative-option4-text);
1892
+ --hop-Avatar-decorative-5-text-color: var(--hop-decorative-option5-text);
1893
+ --hop-Avatar-decorative-6-text-color: var(--hop-decorative-option6-text);
1894
+ --hop-Avatar-decorative-7-text-color: var(--hop-decorative-option7-text);
1895
+ --hop-Avatar-decorative-8-text-color: var(--hop-decorative-option8-text);
1896
+ --hop-Avatar-decorative-9-text-color: var(--hop-decorative-option9-text);
1897
+ --hop-Avatar-xs-size: 1rem;
1898
+ --hop-Avatar-sm-size: 1.5rem;
1899
+ --hop-Avatar-md-size: 2rem;
1900
+ --hop-Avatar-lg-size: 3rem;
1901
+ --hop-Avatar-xl-size: 4rem;
1902
+ --hop-Avatar-2xl-size: 6rem;
1903
+ --hop-Avatar-background-color-disabled: var(--hop-neutral-surface-disabled);
1904
+ --hop-Avatar-text-color-disabled: var(--hop-neutral-text-disabled);
1905
+ --hop-Avatar-mix-blend-mode-disabled: luminosity;
1906
+ --mix-blend-mode: var(--hop-Avatar-mix-blend-mode);
1907
+ user-select: none;
1908
+ position: relative;
1909
+ overflow: hidden;
1910
+ display: flex;
1911
+ flex: 0 0 auto;
1912
+ align-items: center;
1913
+ justify-content: center;
1914
+ box-sizing: border-box;
1915
+ inline-size: var(--size, var(--hop-Avatar-md-size));
1916
+ block-size: var(--size, var(--hop-Avatar-md-size));
1917
+ color: var(--text-color, var(--hop-neutral-text));
1918
+ background-color: var(--background-color, transparent);
1919
+ border-radius: var(--hop-Avatar-border-radius);
1920
+ }
1921
+ .Avatar-module__hop-Avatar--xs___wUBE6 {
1922
+ --size: var(--hop-Avatar-xs-size);
1923
+ }
1924
+ .Avatar-module__hop-Avatar--sm___zFiEI {
1925
+ --size: var(--hop-Avatar-sm-size);
1926
+ }
1927
+ .Avatar-module__hop-Avatar--md___gGnf1 {
1928
+ --size: var(--hop-Avatar-md-size);
1929
+ }
1930
+ .Avatar-module__hop-Avatar--lg___59OtB {
1931
+ --size: var(--hop-Avatar-lg-size);
1932
+ }
1933
+ .Avatar-module__hop-Avatar--xl___zCYTU {
1934
+ --size: var(--hop-Avatar-xl-size);
1935
+ }
1936
+ .Avatar-module__hop-Avatar--2xl___lpaAF {
1937
+ --size: var(--hop-Avatar-2xl-size);
1938
+ }
1939
+ .Avatar-module__hop-Avatar--decorative-option1___x2qeq {
1940
+ --background-color: var(--hop-Avatar-decorative-1-background-color);
1941
+ --text-color: var(--hop-Avatar-decorative-1-text-color);
1942
+ }
1943
+ .Avatar-module__hop-Avatar--decorative-option2___2unk3 {
1944
+ --background-color: var(--hop-Avatar-decorative-2-background-color);
1945
+ --text-color: var(--hop-Avatar-decorative-2-text-color);
1946
+ }
1947
+ .Avatar-module__hop-Avatar--decorative-option3___rOlnd {
1948
+ --background-color: var(--hop-Avatar-decorative-3-background-color);
1949
+ --text-color: var(--hop-Avatar-decorative-3-text-color);
1950
+ }
1951
+ .Avatar-module__hop-Avatar--decorative-option4___FxzGH {
1952
+ --background-color: var(--hop-Avatar-decorative-4-background-color);
1953
+ --text-color: var(--hop-Avatar-decorative-4-text-color);
1954
+ }
1955
+ .Avatar-module__hop-Avatar--decorative-option5___4y8u9 {
1956
+ --background-color: var(--hop-Avatar-decorative-5-background-color);
1957
+ --text-color: var(--hop-Avatar-decorative-5-text-color);
1958
+ }
1959
+ .Avatar-module__hop-Avatar--decorative-option6___jliDF {
1960
+ --background-color: var(--hop-Avatar-decorative-6-background-color);
1961
+ --text-color: var(--hop-Avatar-decorative-6-text-color);
1962
+ }
1963
+ .Avatar-module__hop-Avatar--decorative-option7___Qy8IM {
1964
+ --background-color: var(--hop-Avatar-decorative-7-background-color);
1965
+ --text-color: var(--hop-Avatar-decorative-7-text-color);
1966
+ }
1967
+ .Avatar-module__hop-Avatar--decorative-option8___AEFBt {
1968
+ --background-color: var(--hop-Avatar-decorative-8-background-color);
1969
+ --text-color: var(--hop-Avatar-decorative-8-text-color);
1970
+ }
1971
+ .Avatar-module__hop-Avatar--decorative-option9___qaNLY {
1972
+ --background-color: var(--hop-Avatar-decorative-9-background-color);
1973
+ --text-color: var(--hop-Avatar-decorative-9-text-color);
1974
+ }
1975
+ .Avatar-module__hop-Avatar___Ihw-T[data-disabled] {
1976
+ --background-color: var(--hop-Avatar-background-color-disabled);
1977
+ --text-color: var(--hop-Avatar-text-color-disabled);
1978
+ --mix-blend-mode: var(--hop-Avatar-mix-blend-mode-disabled);
1979
+ isolation: isolate;
1980
+ }
1981
+ .Avatar-module__hop-Avatar__image___4XmMJ {
1982
+ position: relative;
1983
+ display: block;
1984
+ box-sizing: border-box;
1985
+ inline-size: 100%;
1986
+ block-size: 100%;
1987
+ object-fit: cover;
1988
+ mix-blend-mode: var(--mix-blend-mode);
1989
+ }
1990
+
1991
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/tooltip/src/Tooltip.module.css/#css-module-data */
1992
+ .Tooltip-module__hop-Tooltip___RIZp2 {
1993
+ --hop-Tooltip-max-inline-size: 20rem;
1994
+ --hop-Tooltip-slide-amount: 0.25rem;
1995
+ --hop-Tooltip-background: var(--hop-neutral-surface-strong);
1996
+ --hop-Tooltip-border-radius: var(--hop-shape-rounded-md);
1997
+ --hop-Tooltip-box-shadow: var(--hop-elevation-raised);
1998
+ --hop-Tooltip-font-family: var(--hop-body-md-font-family);
1999
+ --hop-Tooltip-font-size: var(--hop-body-md-font-size);
2000
+ --hop-Tooltip-font-weight: var(--hop-body-md-font-weight);
2001
+ --hop-Tooltip-line-height: var(--hop-body-md-line-height);
2002
+ --hop-Tooltip-font-smoothing: antialiased;
2003
+ --hop-Tooltip-color: var(--hop-neutral-text-strong);
2004
+ --hop-Tooltip-padding: var(--hop-space-inset-squish-md);
2005
+ --origin-x: 0;
2006
+ --origin-y: 0;
2007
+ max-inline-size: min(var(--hop-Tooltip-max-inline-size), calc(100% - (var(--container-padding) * 2)));
2008
+ padding: var(--hop-Tooltip-padding);
2009
+ font-family: var(--hop-Tooltip-font-family);
2010
+ font-size: var(--hop-Tooltip-font-size);
2011
+ font-weight: var(--hop-Tooltip-font-weight);
2012
+ -webkit-font-smoothing: var(--hop-Tooltip-font-smoothing);
2013
+ line-height: var(--hop-Tooltip-line-height);
2014
+ color: var(--hop-Tooltip-color);
2015
+ background: var(--hop-Tooltip-background);
2016
+ border-radius: var(--hop-Tooltip-border-radius);
2017
+ box-shadow: var(--hop-Tooltip-box-shadow);
2018
+ }
2019
+ .Tooltip-module__hop-Tooltip--top___LYimQ {
2020
+ --origin-x: 0;
2021
+ --origin-y: var(--hop-Tooltip-slide-amount);
2022
+ }
2023
+ .Tooltip-module__hop-Tooltip--right___U7MIG {
2024
+ --origin-x: calc(-1 * var(--hop-Tooltip-slide-amount));
2025
+ --origin-y: 0;
2026
+ }
2027
+ .Tooltip-module__hop-Tooltip--bottom___dawQ8 {
2028
+ --origin-x: 0;
2029
+ --origin-y: calc(-1 * var(--hop-Tooltip-slide-amount));
2030
+ }
2031
+ .Tooltip-module__hop-Tooltip--left___qVC3o {
2032
+ --origin-x: var(--hop-Tooltip-slide-amount);
2033
+ --origin-y: 0;
2034
+ }
2035
+ .Tooltip-module__hop-Tooltip___RIZp2[data-entering] {
2036
+ animation: Tooltip-module__slide___-wv3b 0.2s ease-out;
2037
+ }
2038
+ .Tooltip-module__hop-Tooltip___RIZp2[data-exiting] {
2039
+ animation: Tooltip-module__slide___-wv3b 0.2s ease-in reverse;
2040
+ }
2041
+ @keyframes Tooltip-module__slide___-wv3b {
2042
+ from {
2043
+ transform: translate(var(--origin-x), var(--origin-y));
2044
+ opacity: 0;
2045
+ }
2046
+ to {
2047
+ transform: translateY(0);
2048
+ opacity: 1;
2049
+ }
2050
+ }
2051
+
2052
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/avatar/src/AvatarGroup.module.css/#css-module-data */
2053
+ .AvatarGroup-module__hop-AvatarGroup___2Ak-A {
2054
+ --hop-AvatarGroup-display: flex;
2055
+ --hop-AvatarGroup-align-items: center;
2056
+ display: var(--hop-AvatarGroup-display);
2057
+ align-items: var(--hop-AvatarGroup-align-items);
2058
+ }
2059
+ .AvatarGroup-module__hop-AvatarGroup--wrap___1DU6Z {
2060
+ flex-wrap: wrap;
2061
+ }
2062
+ .AvatarGroup-module__hop-AvatarGroup--xs___zbilM {
2063
+ --gap: -0.125rem;
2064
+ }
2065
+ .AvatarGroup-module__hop-AvatarGroup--sm___9fEko {
2066
+ --gap: -0.25rem;
2067
+ }
2068
+ .AvatarGroup-module__hop-AvatarGroup--md___kEMKx {
2069
+ --gap: -0.5rem;
2070
+ }
2071
+ .AvatarGroup-module__hop-AvatarGroup--lg___jXOOK {
2072
+ --gap: -1rem;
2073
+ }
2074
+ .AvatarGroup-module__hop-AvatarGroup--xl___FxILA {
2075
+ --gap: -1rem;
2076
+ }
2077
+ .AvatarGroup-module__hop-AvatarGroup--2xl___cMa1B {
2078
+ --gap: -2rem;
2079
+ }
2080
+ .AvatarGroup-module__hop-AvatarGroup__avatar___T5Tfl {
2081
+ margin-inline-start: var(--gap);
2082
+ transition: margin var(--hop-easing-duration-2);
2083
+ }
2084
+ .AvatarGroup-module__hop-AvatarGroup__avatar___T5Tfl:hover:not(:last-child) + .AvatarGroup-module__hop-AvatarGroup__avatar___T5Tfl {
2085
+ margin-inline-start: 0;
2086
+ }
2087
+ .AvatarGroup-module__hop-AvatarGroup__avatar___T5Tfl:first-child {
2088
+ margin-inline-start: 0;
2089
+ }
2090
+ .AvatarGroup-module__hop-AvatarGroup__label___f4h8d {
2091
+ --hop-AvatarGroup-label-font-size: var(--hop-body-sm-font-size);
2092
+ --hop-AvatarGroup-label-font-weight: var(--hop-body-sm-semibold-font-weight);
2093
+ --hop-AvatarGroup-label-line-height: var(--hop-body-sm-line-height);
2094
+ --hop-AvatarGroup-label-font-family: var(--hop-body-sm-font-family);
2095
+ --hop-AvatarGroup-label-margin-left: 0.25rem;
2096
+ margin-inline-start: var(--hop-AvatarGroup-label-margin-left);
2097
+ font-family: var(--hop-AvatarGroup-label-font-family);
2098
+ font-size: var(--hop-AvatarGroup-label-font-size);
2099
+ font-weight: var(--hop-AvatarGroup-label-font-weight);
2100
+ line-height: var(--hop-AvatarGroup-label-line-height);
2101
+ }
2102
+ .AvatarGroup-module__hop-AvatarGroup__hiddenAvatar___GDwNB {
2103
+ --hop-AvatarGroup__hiddenAvatar-display: flex;
2104
+ --hop-AvatarGroup__hiddenAvatar-align-items: center;
2105
+ --hop-AvatarGroup__hiddenAvatar-gap: var(--hop-space-inset-sm);
2106
+ --hop-AvatarGroup__hiddenAvatar-font-family: var(--hop-body-xs-font-family);
2107
+ --hop-AvatarGroup__hiddenAvatar-font-size: var(--hop-body-xs-font-size);
2108
+ --hop-AvatarGroup__hiddenAvatar-font-weight: var(--hop-body-xs-semibold-font-weight);
2109
+ --hop-AvatarGroup__hiddenAvatar-line-height: var(--hop-body-xs-line-height);
2110
+ --hop-AvatarGroup__hiddenAvatar-color: var(--hop-neutral-text-strong);
2111
+ display: var(--hop-AvatarGroup__hiddenAvatar-display);
2112
+ gap: var(--hop-AvatarGroup__hiddenAvatar-gap);
2113
+ align-items: var(--hop-AvatarGroup__hiddenAvatar-align-items);
2114
+ font-family: var(--hop-AvatarGroup__hiddenAvatar-font-family);
2115
+ font-size: var(--hop-AvatarGroup__hiddenAvatar-font-size);
2116
+ font-weight: var(--hop-AvatarGroup__hiddenAvatar-font-weight);
2117
+ line-height: var(--hop-AvatarGroup__hiddenAvatar-line-height);
2118
+ color: var(--hop-AvatarGroup__hiddenAvatar-color);
2119
+ }
2120
+ .AvatarGroup-module__hop-AvatarGroup__hiddenAvatar___GDwNB:not(:last-child) {
2121
+ margin-block-end: 0.25rem;
2122
+ }
2123
+ .AvatarGroup-module__hop-AvatarGroup--start___zDpr- {
2124
+ justify-content: flex-start;
2125
+ }
2126
+ .AvatarGroup-module__hop-AvatarGroup--end___mNOnu {
2127
+ justify-content: flex-end;
2128
+ }
2129
+ .AvatarGroup-module__hop-AvatarGroup--center___jDYuI {
2130
+ justify-content: center;
2131
+ }
2132
+
2133
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/badge/src/Badge.module.css/#css-module-data */
2134
+ .Badge-module__hop-Badge___A-Bla {
2135
+ --hop-Badge-height: 1.5rem;
2136
+ --hop-Badge-width: max-content;
2137
+ --hop-Badge-padding-inline: var(--hop-space-inset-sm);
2138
+ --hop-Badge-border-radius: var(--hop-shape-pill);
2139
+ --hop-Badge-indeterminate-border-radius: var(--hop-shape-circle);
2140
+ --hop-Badge-indeterminate-height: 1rem;
2141
+ --hop-Badge-indeterminate-width: 1rem;
2142
+ --hop-Badge-indeterminate-padding-inline: 0;
2143
+ --hop-Badge-primary-text-color: var(--hop-primary-text-strong);
2144
+ --hop-Badge-primary-background-color: var(--hop-primary-surface-strong);
2145
+ --hop-Badge-primary-text-color-hovered: var(--hop-primary-text-strong-hover);
2146
+ --hop-Badge-primary-background-color-hovered: var(--hop-primary-surface-strong-hover);
2147
+ --hop-Badge-primary-text-color-pressed: var(--hop-primary-text-strong);
2148
+ --hop-Badge-primary-background-color-pressed: var(--hop-primary-surface-strong-press);
2149
+ --hop-Badge-primary-text-color-selected: var(--hop-neutral-text-selected);
2150
+ --hop-Badge-primary-background-color-selected: var(--hop-neutral-surface-selected);
2151
+ --hop-Badge-secondary-text-color: var(--hop-neutral-text-strong);
2152
+ --hop-Badge-secondary-background-color: var(--hop-neutral-surface-strong);
2153
+ --hop-Badge-secondary-text-color-hovered: var(--hop-neutral-text-strong);
2154
+ --hop-Badge-secondary-background-color-hovered: var(--hop-neutral-surface-strong);
2155
+ --hop-Badge-secondary-text-color-pressed: var(--hop-neutral-text-strong);
2156
+ --hop-Badge-secondary-background-color-pressed: var(--hop-neutral-surface-strong);
2157
+ --hop-Badge-secondary-text-color-selected: var(--hop-neutral-text-selected);
2158
+ --hop-Badge-secondary-background-color-selected: var(--hop-neutral-surface-selected);
2159
+ --hop-Badge-subdued-text-color: var(--hop-neutral-text);
2160
+ --hop-Badge-subdued-background-color: var(--hop-neutral-surface-weak);
2161
+ --hop-Badge-subdued-text-color-hovered: var(--hop-neutral-text-weak-hover);
2162
+ --hop-Badge-subdued-background-color-hovered: var(--hop-neutral-surface-weak-hover);
2163
+ --hop-Badge-subdued-text-color-pressed: var(--hop-neutral-text-weak-press);
2164
+ --hop-Badge-subdued-background-color-pressed: var(--hop-neutral-surface-weak-press);
2165
+ --hop-Badge-subdued-text-color-selected: var(--hop-neutral-text-weak-selected);
2166
+ --hop-Badge-subdued-background-color-selected: var(--hop-neutral-surface-weak-selected);
2167
+ --hop-Badge-text-color-disabled: var(--hop-neutral-text-disabled);
2168
+ --hop-Badge-background-color-disabled: var(--hop-neutral-surface-disabled);
2169
+ --height: var(--hop-Badge-height);
2170
+ --width: var(--hop-Badge-width);
2171
+ --padding-inline: var(--hop-Badge-padding-inline);
2172
+ --border-radius: var(--hop-Badge-border-radius);
2173
+ display: inline-flex;
2174
+ align-items: center;
2175
+ justify-content: center;
2176
+ box-sizing: border-box;
2177
+ inline-size: var(--width);
2178
+ block-size: var(--height);
2179
+ padding-inline: var(--padding-inline);
2180
+ color: var(--text-color, var(--hop-Badge-primary-text-color));
2181
+ background-color: var(--background-color, var(--hop-Badge-primary-background-color));
2182
+ border-radius: var(--border-radius);
2183
+ }
2184
+ .Badge-module__hop-Badge--primary___E55Gz {
2185
+ --background-color: var(--hop-Badge-primary-background-color);
2186
+ --text-color: var(--hop-Badge-primary-text-color);
2187
+ }
2188
+ .Badge-module__hop-Badge--primary___E55Gz[data-hovered] {
2189
+ --background-color: var(--hop-Badge-primary-background-color-hovered);
2190
+ --text-color: var(--hop-Badge-primary-text-color-hovered);
2191
+ }
2192
+ .Badge-module__hop-Badge--primary___E55Gz[data-pressed] {
2193
+ --background-color: var(--hop-Badge-primary-background-color-pressed);
2194
+ --text-color: var(--hop-Badge-primary-text-color-pressed);
2195
+ }
2196
+ .Badge-module__hop-Badge--primary___E55Gz[data-selected] {
2197
+ --background-color: var(--hop-Badge-primary-background-color-selected);
2198
+ --text-color: var(--hop-Badge-primary-text-color-selected);
2199
+ }
2200
+ .Badge-module__hop-Badge--secondary___0bxAx {
2201
+ --background-color: var(--hop-Badge-secondary-background-color);
2202
+ --text-color: var(--hop-Badge-secondary-text-color);
2203
+ }
2204
+ .Badge-module__hop-Badge--secondary___0bxAx[data-hovered] {
2205
+ --background-color: var(--hop-Badge-secondary-background-color-hovered);
2206
+ --text-color: var(--hop-Badge-secondary-text-color-hovered);
2207
+ }
2208
+ .Badge-module__hop-Badge--secondary___0bxAx[data-pressed] {
2209
+ --background-color: var(--hop-Badge-secondary-background-color-pressed);
2210
+ --text-color: var(--hop-Badge-secondary-text-color-pressed);
2211
+ }
2212
+ .Badge-module__hop-Badge--secondary___0bxAx[data-selected] {
2213
+ --background-color: var(--hop-Badge-secondary-background-color-selected);
2214
+ --text-color: var(--hop-Badge-secondary-text-color-selected);
2215
+ }
2216
+ .Badge-module__hop-Badge--subdued___zdomT {
2217
+ --background-color: var(--hop-Badge-subdued-background-color);
2218
+ --text-color: var(--hop-Badge-subdued-text-color);
2219
+ }
2220
+ .Badge-module__hop-Badge--subdued___zdomT[data-hovered] {
2221
+ --background-color: var(--hop-Badge-subdued-background-color-hovered);
2222
+ --text-color: var(--hop-Badge-subdued-text-color-hovered);
2223
+ }
2224
+ .Badge-module__hop-Badge--subdued___zdomT[data-pressed] {
2225
+ --background-color: var(--hop-Badge-subdued-background-color-pressed);
2226
+ --text-color: var(--hop-Badge-subdued-text-color-pressed);
2227
+ }
2228
+ .Badge-module__hop-Badge--subdued___zdomT[data-selected] {
2229
+ --background-color: var(--hop-Badge-subdued-background-color-selected);
2230
+ --text-color: var(--hop-Badge-subdued-text-color-selected);
2231
+ }
2232
+ .Badge-module__hop-Badge___A-Bla[data-indeterminate] {
2233
+ --border-radius: var(--hop-Badge-indeterminate-border-radius);
2234
+ --height: var(--hop-Badge-indeterminate-height);
2235
+ --width: var(--hop-Badge-indeterminate-width);
2236
+ --padding-inline: var(--hop-Badge-indeterminate-padding-inline);
2237
+ }
2238
+ .Badge-module__hop-Badge___A-Bla[data-disabled] {
2239
+ --background-color: var(--hop-Badge-background-color-disabled);
2240
+ --text-color: var(--hop-Badge-text-color-disabled);
2241
+ }
2242
+
2243
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/badge/src/FloatingBadge.module.css/#css-module-data */
2244
+ .FloatingBadge-module__hop-FloatingBadge___TCgcQ {
2245
+ --hop-FloatingBadge-badge-x: calc(0% + var(--hop-FloatingBadge-offset-x));
2246
+ --hop-FloatingBadge-badge-circular-x: calc(10% + var(--hop-FloatingBadge-offset-x));
2247
+ --hop-FloatingBadge-badge-y: calc(0% + var(--hop-FloatingBadge-offset-y));
2248
+ --hop-FloatingBadge-badge-circular-y: calc(10% + var(--hop-FloatingBadge-offset-y));
2249
+ --hop-FloatingBadge-badge-topright-top: var(--hop-FloatingBadge-badge-y);
2250
+ --hop-FloatingBadge-badge-topright-right: var(--hop-FloatingBadge-badge-x);
2251
+ --hop-FloatingBadge-badge-topright-circular-top: var(--hop-FloatingBadge-badge-circular-y);
2252
+ --hop-FloatingBadge-badge-topright-circular-right: var(--hop-FloatingBadge-badge-circular-x);
2253
+ --hop-FloatingBadge-badge-topright-bottom: auto;
2254
+ --hop-FloatingBadge-badge-topright-left: auto;
2255
+ --hop-FloatingBadge-badge-topright-transform: translate(50%, -50%);
2256
+ --hop-FloatingBadge-badge-topright-transform-origin: 100% 0;
2257
+ --hop-FloatingBadge-badge-topleft-top: var(--hop-FloatingBadge-badge-y);
2258
+ --hop-FloatingBadge-badge-topleft-circular-top: var(--hop-FloatingBadge-badge-circular-y);
2259
+ --hop-FloatingBadge-badge-topleft-right: auto;
2260
+ --hop-FloatingBadge-badge-topleft-bottom: auto;
2261
+ --hop-FloatingBadge-badge-topleft-left: var(--hop-FloatingBadge-badge-x);
2262
+ --hop-FloatingBadge-badge-topleft-circular-left: var(--hop-FloatingBadge-badge-circular-x);
2263
+ --hop-FloatingBadge-badge-topleft-transform: translate(-50%, -50%);
2264
+ --hop-FloatingBadge-badge-topleft-transform-origin: 0 0;
2265
+ --hop-FloatingBadge-badge-bottomright-top: auto;
2266
+ --hop-FloatingBadge-badge-bottomright-right: var(--hop-FloatingBadge-badge-x);
2267
+ --hop-FloatingBadge-badge-bottomright-circular-right: var(--hop-FloatingBadge-badge-circular-x);
2268
+ --hop-FloatingBadge-badge-bottomright-bottom: var(--hop-FloatingBadge-badge-y);
2269
+ --hop-FloatingBadge-badge-bottomright-circular-bottom: var(--hop-FloatingBadge-badge-circular-y);
2270
+ --hop-FloatingBadge-badge-bottomright-left: auto;
2271
+ --hop-FloatingBadge-badge-bottomright-transform: translate(50%, 50%);
2272
+ --hop-FloatingBadge-badge-bottomright-transform-origin: 100% 100%;
2273
+ --hop-FloatingBadge-badge-bottomleft-top: auto;
2274
+ --hop-FloatingBadge-badge-bottomleft-right: auto;
2275
+ --hop-FloatingBadge-badge-bottomleft-bottom: var(--hop-FloatingBadge-badge-y);
2276
+ --hop-FloatingBadge-badge-bottomleft-circular-bottom: var(--hop-FloatingBadge-badge-circular-y);
2277
+ --hop-FloatingBadge-badge-bottomleft-left: var(--hop-FloatingBadge-badge-x);
2278
+ --hop-FloatingBadge-badge-bottomleft-circular-left: var(--hop-FloatingBadge-badge-circular-x);
2279
+ --hop-FloatingBadge-badge-bottomleft-transform: translate(-50%, 50%);
2280
+ --hop-FloatingBadge-badge-bottomleft-transform-origin: 0 100%;
2281
+ position: relative;
2282
+ box-sizing: border-box;
2283
+ inline-size: max-content;
2284
+ }
2285
+ .FloatingBadge-module__hop-FloatingBadge___TCgcQ[data-placement="top right"] {
2286
+ --badge-top: var(--hop-FloatingBadge-badge-topright-top);
2287
+ --badge-right: var(--hop-FloatingBadge-badge-topright-right);
2288
+ --badge-bottom: var(--hop-FloatingBadge-badge-topright-bottom);
2289
+ --badge-left: var(--hop-FloatingBadge-badge-topright-left);
2290
+ --badge-transform: var(--hop-FloatingBadge-badge-topright-transform);
2291
+ --badge-transform-origin: var(--hop-FloatingBadge-badge-topright-transform-origin);
2292
+ }
2293
+ .FloatingBadge-module__hop-FloatingBadge___TCgcQ[data-placement="top right"][data-overlap=circular] {
2294
+ --badge-top: var(--hop-FloatingBadge-badge-topright-circular-top);
2295
+ --badge-right: var(--hop-FloatingBadge-badge-topright-circular-right);
2296
+ }
2297
+ .FloatingBadge-module__hop-FloatingBadge___TCgcQ[data-placement="top left"] {
2298
+ --badge-top: var(--hop-FloatingBadge-badge-topleft-top);
2299
+ --badge-right: var(--hop-FloatingBadge-badge-topleft-right);
2300
+ --badge-bottom: var(--hop-FloatingBadge-badge-topleft-bottom);
2301
+ --badge-left: var(--hop-FloatingBadge-badge-topleft-left);
2302
+ --badge-transform: var(--hop-FloatingBadge-badge-topleft-transform);
2303
+ --badge-transform-origin: var(--hop-FloatingBadge-badge-topleft-transform-origin);
2304
+ }
2305
+ .FloatingBadge-module__hop-FloatingBadge___TCgcQ[data-placement="top left"][data-overlap=circular] {
2306
+ --badge-top: var(--hop-FloatingBadge-badge-topleft-circular-top);
2307
+ --badge-left: var(--hop-FloatingBadge-badge-topleft-circular-left);
2308
+ }
2309
+ .FloatingBadge-module__hop-FloatingBadge___TCgcQ[data-placement="bottom right"] {
2310
+ --badge-top: var(--hop-FloatingBadge-badge-bottomright-top);
2311
+ --badge-right: var(--hop-FloatingBadge-badge-bottomright-right);
2312
+ --badge-bottom: var(--hop-FloatingBadge-badge-bottomright-bottom);
2313
+ --badge-left: var(--hop-FloatingBadge-badge-bottomright-left);
2314
+ --badge-transform: var(--hop-FloatingBadge-badge-bottomright-transform);
2315
+ --badge-transform-origin: var(--hop-FloatingBadge-badge-bottomright-transform-origin);
2316
+ }
2317
+ .FloatingBadge-module__hop-FloatingBadge___TCgcQ[data-placement="bottom right"][data-overlap=circular] {
2318
+ --badge-right: var(--hop-FloatingBadge-badge-bottomright-circular-right);
2319
+ --badge-bottom: var(--hop-FloatingBadge-badge-bottomright-circular-bottom);
2320
+ }
2321
+ .FloatingBadge-module__hop-FloatingBadge___TCgcQ[data-placement="bottom left"] {
2322
+ --badge-top: var(--hop-FloatingBadge-badge-bottomleft-top);
2323
+ --badge-right: var(--hop-FloatingBadge-badge-bottomleft-right);
2324
+ --badge-bottom: var(--hop-FloatingBadge-badge-bottomleft-bottom);
2325
+ --badge-left: var(--hop-FloatingBadge-badge-bottomleft-left);
2326
+ --badge-transform: var(--hop-FloatingBadge-badge-bottomleft-transform);
2327
+ --badge-transform-origin: var(--hop-FloatingBadge-badge-bottomleft-transform-origin);
2328
+ }
2329
+ .FloatingBadge-module__hop-FloatingBadge___TCgcQ[data-placement="bottom left"][data-overlap=circular] {
2330
+ --badge-bottom: var(--hop-FloatingBadge-badge-bottomleft-circular-bottom);
2331
+ --badge-left: var(--hop-FloatingBadge-badge-bottomleft-circular-left);
2332
+ }
2333
+ .FloatingBadge-module__hop-FloatingBadge__badge___sf8Z8 {
2334
+ position: absolute;
2335
+ inset: var(--badge-top) var(--badge-right) var(--badge-bottom) var(--badge-left);
2336
+ transform-origin: var(--badge-transform-origin);
2337
+ transform: var(--badge-transform);
2338
+ }
2339
+
2340
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/checkbox/src/Checkbox.module.css/#css-module-data */
2341
+ .Checkbox-module__hop-Checkbox___RAOey {
2342
+ --hop-Checkbox-box-border-size: 0.0625rem;
2343
+ --hop-Checkbox-box-border-color: var(--hop-neutral-border);
2344
+ --hop-Checkbox-box-background-color: var(--hop-neutral-surface);
2345
+ --hop-Checkbox-box-outline-size: 0.125rem;
2346
+ --hop-Checkbox-box-outline-color: var(--hop-primary-border-focus);
2347
+ --hop-Checkbox-check-color: var(--hop-neutral-icon-selected);
2348
+ --hop-Checkbox-check-display: none;
2349
+ --hop-Checkbox-text-color: var(--hop-neutral-text);
2350
+ --hop-Checkbox-icon-color: var(--hop-neutral-icon);
2351
+ --hop-Checkbox-box-border-color-hovered: var(--hop-neutral-border-hover);
2352
+ --hop-Checkbox-box-background-color-hovered: var(--hop-neutral-surface-hover);
2353
+ --hop-Checkbox-text-color-hovered: var(--hop-neutral-text-hover);
2354
+ --hop-Checkbox-icon-color-hovered: var(--hop-neutral-icon-hover);
2355
+ --hop-Checkbox-box-border-color-pressed: var(--hop-neutral-border-press);
2356
+ --hop-Checkbox-box-background-color-pressed: var(--hop-neutral-surface-press);
2357
+ --hop-Checkbox-text-color-pressed: var(--hop-neutral-text-press);
2358
+ --hop-Checkbox-icon-color-pressed: var(--hop-neutral-icon-press);
2359
+ --hop-Checkbox-box-border-color-selected: var(--hop-neutral-border-selected);
2360
+ --hop-Checkbox-box-background-color-selected: var(--hop-neutral-surface-selected);
2361
+ --hop-Checkbox-check-display-selected: block;
2362
+ --hop-Checkbox-text-color-selected: var(--hop-neutral-text);
2363
+ --hop-Checkbox-icon-color-selected: var(--hop-neutral-icon);
2364
+ --hop-Checkbox-box-border-color-disabled: var(--hop-neutral-border-disabled);
2365
+ --hop-Checkbox-box-background-color-disabled: var(--hop-neutral-surface-disabled);
2366
+ --hop-Checkbox-check-color-disabled: var(--hop-neutral-icon-disabled);
2367
+ --hop-Checkbox-text-color-disabled: var(--hop-neutral-text-disabled);
2368
+ --hop-Checkbox-icon-color-disabled: var(--hop-neutral-icon-disabled);
2369
+ --hop-Checkbox-box-border-color-focused: var(--hop-neutral-border-hover);
2370
+ --hop-Checkbox-box-background-color-focused: var(--hop-neutral-surface-hover);
2371
+ --hop-Checkbox-text-color-focused: var(--hop-neutral-text-hover);
2372
+ --hop-Checkbox-icon-color-focused: var(--hop-neutral-icon-hover);
2373
+ --hop-Checkbox-box-border-color-invalid: var(--hop-danger-border-strong);
2374
+ --hop-Checkbox-box-background-color-invalid: var(--hop-neutral-surface);
2375
+ --hop-Checkbox-box-border-color-hovered-invalid: var(--hop-danger-border-strong);
2376
+ --hop-Checkbox-box-background-color-hovered-invalid: var(--hop-danger-surface-weak-hover);
2377
+ --hop-Checkbox-box-border-color-pressed-invalid: var(--hop-danger-border-press);
2378
+ --hop-Checkbox-box-background-color-pressed-invalid: var(--hop-danger-surface-weak-press);
2379
+ --hop-Checkbox-box-border-color-focused-invalid: var(--hop-danger-border-press);
2380
+ --hop-Checkbox-box-background-color-focused-invalid: var(--hop-danger-surface);
2381
+ --hop-Checkbox-box-border-color-selected-invalid: var(--hop-danger-border-strong);
2382
+ --hop-Checkbox-box-background-color-selected-invalid: var(--hop-danger-surface-strong);
2383
+ --hop-Checkbox-check-color-invalid: var(--hop-danger-icon-strong);
2384
+ --hop-Checkbox-text-color-invalid: var(--hop-danger-text-weak);
2385
+ --hop-Checkbox-text-color-hovered-invalid: var(--hop-danger-text-weak-hover);
2386
+ --hop-Checkbox-text-color-pressed-invalid: var(--hop-danger-text-weak-press);
2387
+ --hop-Checkbox-icon-color-invalid: var(--hop-danger-icon-weak);
2388
+ --hop-Checkbox-icon-color-hovered-invalid: var(--hop-danger-icon-weak-hover);
2389
+ --hop-Checkbox-icon-color-pressed-invalid: var(--hop-danger-icon-weak-press);
2390
+ --hop-Checkbox-box-sm-block-size: 1rem;
2391
+ --hop-Checkbox-box-sm-inline-size: 1rem;
2392
+ --hop-Checkbox-text-sm-top-offset: calc((var(--box-inline-size) - (var(--hop-body-sm-line-height) * var(--hop-body-sm-font-size))) / 2);
2393
+ --hop-Checkbox-text-sm-margin-inline-start: calc(var(--hop-space-inline-sm) - var(--hop-space-inline-xs));
2394
+ --hop-Checkbox-box-md-block-size: 1.5rem;
2395
+ --hop-Checkbox-box-md-inline-size: 1.5rem;
2396
+ --hop-Checkbox-text-md-top-offset: calc((var(--box-inline-size) - (var(--hop-body-md-line-height) * var(--hop-body-md-font-size))) / 2);
2397
+ --hop-Checkbox-text-md-margin-inline-start: calc(var(--hop-space-inline-md) - var(--hop-space-inline-xs));
2398
+ --box-background-color: var(--hop-Checkbox-box-background-color);
2399
+ --box-border-color: var(--hop-Checkbox-box-border-color);
2400
+ --box-border-radius: var(--hop-shape-rounded-sm);
2401
+ --check-color: var(--hop-Checkbox-check-color);
2402
+ --check-display: var(--hop-Checkbox-check-display);
2403
+ --cursor: pointer;
2404
+ --text-color: var(--hop-Checkbox-text-color);
2405
+ --icon-color: var(--hop-Checkbox-icon-color);
2406
+ --transition-duration: var(--hop-easing-duration-2);
2407
+ cursor: var(--cursor);
2408
+ display: flex;
2409
+ column-gap: var(--hop-space-inline-xs);
2410
+ align-items: flex-start;
2411
+ justify-content: flex-start;
2412
+ box-sizing: border-box;
2413
+ inline-size: max-content;
2414
+ max-inline-size: 100%;
2415
+ }
2416
+ .Checkbox-module__hop-Checkbox___RAOey[data-focus-visible] {
2417
+ --box-background-color: var(--hop-Checkbox-box-background-color-focused);
2418
+ --box-border-color: var(--hop-Checkbox-box-border-color-focused);
2419
+ --box-outline: var(--hop-Checkbox-box-outline-size) solid var(--hop-Checkbox-box-outline-color);
2420
+ --text-color: var(--hop-Checkbox-text-color-focused);
2421
+ --icon-color: var(--hop-Checkbox-icon-color-focused);
2422
+ }
2423
+ .Checkbox-module__hop-Checkbox___RAOey[data-hovered] {
2424
+ --box-background-color: var(--hop-Checkbox-box-background-color-hovered);
2425
+ --box-border-color: var(--hop-Checkbox-box-border-color-hovered);
2426
+ --text-color: var(--hop-Checkbox-text-color-hovered);
2427
+ --icon-color: var(--hop-Checkbox-icon-color-hovered);
2428
+ }
2429
+ .Checkbox-module__hop-Checkbox___RAOey[data-pressed] {
2430
+ --box-background-color: var(--hop-Checkbox-box-background-color-pressed);
2431
+ --box-border-color: var(--hop-Checkbox-box-border-color-pressed);
2432
+ --text-color: var(--hop-Checkbox-text-color-pressed);
2433
+ --icon-color: var(--hop-Checkbox-icon-color-pressed);
2434
+ }
2435
+ .Checkbox-module__hop-Checkbox___RAOey[data-selected] {
2436
+ --box-background-color: var(--hop-Checkbox-box-background-color-selected);
2437
+ --box-border-color: var(--hop-Checkbox-box-border-color-selected);
2438
+ --check-display: var(--hop-Checkbox-check-display-selected);
2439
+ --text-color: var(--hop-Checkbox-text-color-selected);
2440
+ --icon-color: var(--hop-Checkbox-icon-color-selected);
2441
+ }
2442
+ .Checkbox-module__hop-Checkbox___RAOey[data-invalid] {
2443
+ --box-background-color: var(--hop-Checkbox-box-background-color-invalid);
2444
+ --box-border-color: var(--hop-Checkbox-box-border-color-invalid);
2445
+ --check-color: var(--hop-Checkbox-check-color-invalid);
2446
+ --text-color: var(--hop-Checkbox-text-color-invalid);
2447
+ --icon-color: var(--hop-Checkbox-icon-color-invalid);
2448
+ }
2449
+ .Checkbox-module__hop-Checkbox___RAOey[data-invalid]:where([data-focus-visible]) {
2450
+ --box-background-color: var(--hop-Checkbox-box-background-color-focused-invalid);
2451
+ --box-border-color: var(--hop-Checkbox-box-border-color-focused-invalid);
2452
+ }
2453
+ .Checkbox-module__hop-Checkbox___RAOey[data-invalid]:where([data-hovered]) {
2454
+ --box-background-color: var(--hop-Checkbox-box-background-color-hovered-invalid);
2455
+ --box-border-color: var(--hop-Checkbox-box-border-color-hovered-invalid);
2456
+ --text-color: var(--hop-Checkbox-text-color-hovered-invalid);
2457
+ --icon-color: var(--hop-Checkbox-icon-color-hovered-invalid);
2458
+ }
2459
+ .Checkbox-module__hop-Checkbox___RAOey[data-invalid]:where([data-pressed]) {
2460
+ --box-background-color: var(--hop-Checkbox-box-background-color-pressed-invalid);
2461
+ --box-border-color: var(--hop-Checkbox-box-border-color-pressed-invalid);
2462
+ --text-color: var(--hop-Checkbox-text-color-pressed-invalid);
2463
+ --icon-color: var(--hop-Checkbox-icon-color-pressed-invalid);
2464
+ }
2465
+ .Checkbox-module__hop-Checkbox___RAOey:where([data-invalid])[data-selected] {
2466
+ --box-background-color: var(--hop-Checkbox-box-background-color-selected-invalid);
2467
+ --box-border-color: var(--hop-Checkbox-box-border-color-selected-invalid);
2468
+ }
2469
+ .Checkbox-module__hop-Checkbox___RAOey[data-disabled] {
2470
+ --box-background-color: var(--hop-Checkbox-box-background-color-disabled);
2471
+ --box-border-color: var(--hop-Checkbox-box-border-color-disabled);
2472
+ --check-color: var(--hop-Checkbox-check-color-disabled);
2473
+ --cursor: not-allowed;
2474
+ --text-color: var(--hop-Checkbox-text-color-disabled);
2475
+ --icon-color: var(--hop-Checkbox-icon-color-disabled);
2476
+ }
2477
+ .Checkbox-module__hop-Checkbox--sm___i3CSP {
2478
+ --box-block-size: var(--hop-Checkbox-box-sm-block-size);
2479
+ --box-inline-size: var(--hop-Checkbox-box-sm-inline-size);
2480
+ --text-top-offset: var(--hop-Checkbox-text-sm-top-offset);
2481
+ --text-margin-inline-start: var(--hop-Checkbox-text-sm-margin-inline-start);
2482
+ }
2483
+ .Checkbox-module__hop-Checkbox--md___GL7zO {
2484
+ --box-block-size: var(--hop-Checkbox-box-md-block-size);
2485
+ --box-inline-size: var(--hop-Checkbox-box-md-inline-size);
2486
+ --text-top-offset: var(--hop-Checkbox-text-md-top-offset);
2487
+ --text-margin-inline-start: var(--hop-Checkbox-text-md-margin-inline-start);
2488
+ }
2489
+ .Checkbox-module__hop-Checkbox__icon___s-OVR,
2490
+ .Checkbox-module__hop-Checkbox__icon-list___LdGhF {
2491
+ flex: 0 0 auto;
2492
+ order: 3;
2493
+ color: var(--icon-color);
2494
+ }
2495
+ .Checkbox-module__hop-Checkbox__box___oqQ7- {
2496
+ display: flex;
2497
+ flex: 0 0 auto;
2498
+ align-items: center;
2499
+ justify-content: center;
2500
+ order: 1;
2501
+ box-sizing: border-box;
2502
+ inline-size: var(--box-inline-size, var(--hop-Checkbox-box-md-inline-size));
2503
+ block-size: var(--box-block-size, var(--hop-Checkbox-box-md-block-size));
2504
+ background-color: var(--box-background-color);
2505
+ border: var(--hop-Checkbox-box-border-size) solid var(--box-border-color);
2506
+ border-radius: var(--box-border-radius);
2507
+ outline: var(--box-outline, none);
2508
+ outline-offset: 0.125rem;
2509
+ transition: background-color var(--transition-duration) var(--hop-easing-productive), border var(--transition-duration) var(--hop-easing-productive);
2510
+ }
2511
+ .Checkbox-module__hop-Checkbox__check___QKTgI {
2512
+ display: var(--check-display);
2513
+ color: var(--check-color);
2514
+ }
2515
+ .Checkbox-module__hop-Checkbox__text___vQWZ9 {
2516
+ flex: 0 1 auto;
2517
+ order: 2;
2518
+ min-inline-size: 0;
2519
+ margin-block-start: var(--text-top-offset, var(--hop-Checkbox-text-md-top-offset));
2520
+ margin-inline-start: var(--text-margin-inline-start, var(--hop-Checkbox-text-md-margin-inline-start));
2521
+ color: var(--text-color);
2522
+ }
2523
+
2524
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/checkbox/src/CheckboxField.module.css/#css-module-data */
2525
+ .CheckboxField-module__hop-CheckboxField___5HYK9 {
2526
+ --hop-CheckboxField-description-color: var(--hop-neutral-text-weak);
2527
+ --hop-CheckboxField-description-color-disabled: var(--hop-neutral-text-disabled);
2528
+ --hop-CheckboxField-sm-row-gap: var(--hop-space-stack-xs);
2529
+ --hop-CheckboxField-checkbox-sm-inline-size: 1rem;
2530
+ --hop-CheckboxField-description-sm-margin-inline-start: calc(var(--hop-CheckboxField-checkbox-sm-inline-size) + var(--hop-space-inline-sm));
2531
+ --hop-CheckboxField-md-row-gap: var(--hop-space-stack-xs);
2532
+ --hop-CheckboxField-checkbox-md-inline-size: 1.5rem;
2533
+ --hop-CheckboxField-description-md-margin-inline-start: calc(var(--hop-CheckboxField-checkbox-md-inline-size) + var(--hop-space-inline-md));
2534
+ --description-color: var(--hop-CheckboxField-description-color);
2535
+ display: flex;
2536
+ flex-direction: column;
2537
+ row-gap: var(--row-gap, var(--hop-space-stack-sm));
2538
+ align-items: flex-start;
2539
+ justify-content: flex-start;
2540
+ box-sizing: border-box;
2541
+ inline-size: max-content;
2542
+ max-inline-size: 100%;
2543
+ }
2544
+ .CheckboxField-module__hop-CheckboxField___5HYK9[data-disabled] {
2545
+ --description-color: var(--hop-CheckboxField-description-color-disabled);
2546
+ }
2547
+ .CheckboxField-module__hop-CheckboxField--sm___5W8yn {
2548
+ --row-gap: var(--hop-CheckboxField-sm-row-gap);
2549
+ --description-margin-inline-start: var(--hop-CheckboxField-description-sm-margin-inline-start);
2550
+ }
2551
+ .CheckboxField-module__hop-CheckboxField--md___90C92 {
2552
+ --row-gap: var(--hop-CheckboxField-md-row-gap);
2553
+ --description-margin-inline-start: var(--hop-CheckboxField-description-md-margin-inline-start);
2554
+ }
2555
+ .CheckboxField-module__hop-CheckboxField__description___Dqu-O {
2556
+ order: 2;
2557
+ margin-inline-start: var(--description-margin-inline-start, var(--hop-CheckboxField-description-md-margin-inline-start));
2558
+ color: var(--description-color);
2559
+ }
2560
+ .CheckboxField-module__hop-CheckboxField__checkbox___JDrLW {
2561
+ order: 1;
2562
+ }
2563
+
2564
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/error-message/src/ErrorMessage.module.css/#css-module-data */
2565
+ .ErrorMessage-module__hop-ErrorMessage___XomeT {
2566
+ --hop-ErrorMessage-color: var(--hop-danger-text-weak);
2567
+ --hop-ErrorMessage-font-family: var(--hop-body-xs-font-family);
2568
+ --hop-ErrorMessage-font-size: var(--hop-body-xs-font-size);
2569
+ --hop-ErrorMessage-font-weight: var(--hop-body-xs-font-weight);
2570
+ --hop-ErrorMessage-line-height: var(--hop-body-xs-line-height);
2571
+ --hop-ErrorMessage-column-gap: var(--hop-space-inline-xs);
2572
+ display: flex;
2573
+ column-gap: var(--hop-ErrorMessage-column-gap);
2574
+ align-items: center;
2575
+ box-sizing: border-box;
2576
+ font-family: var(--hop-ErrorMessage-font-family);
2577
+ font-size: var(--hop-ErrorMessage-font-size);
2578
+ font-weight: var(--hop-ErrorMessage-font-weight);
2579
+ line-height: var(--hop-ErrorMessage-line-height);
2580
+ color: var(--hop-ErrorMessage-color);
2581
+ }
2582
+ .ErrorMessage-module__hop-ErrorMessage__icon___aiAt8 {
2583
+ flex: 0 0 auto;
2584
+ align-self: flex-start;
2585
+ }
2586
+
2587
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/helper-message/src/HelperMessage.module.css/#css-module-data */
2588
+ .HelperMessage-module__hop-HelperMessage___QIP7E {
2589
+ --hop-HelperMessage-color: var(--hop-neutral-text-weak);
2590
+ --hop-HelperMessage-column-gap: var(--hop-space-inline-xs);
2591
+ display: flex;
2592
+ column-gap: var(--hop-HelperMessage-column-gap);
2593
+ align-items: center;
2594
+ box-sizing: border-box;
2595
+ color: var(--hop-HelperMessage-color);
2596
+ }
2597
+ .HelperMessage-module__hop-HelperMessage__icon___bYyzZ {
2598
+ flex: 0 0 auto;
2599
+ align-self: flex-start;
2600
+ }
2601
+
2602
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/checkbox/src/CheckboxGroup.module.css/#css-module-data */
2603
+ .CheckboxGroup-module__hop-CheckboxGroup___3meDG {
2604
+ --hop-CheckboxGroup-align-items: flex-start;
2605
+ --hop-CheckboxGroup-justify-content: flex-start;
2606
+ --hop-CheckboxGroup-bordered-border-color: var(--hop-neutral-border-weak);
2607
+ --hop-CheckboxGroup-sm-column-gap: var(--hop-space-inline-sm);
2608
+ --hop-CheckboxGroup-sm-row-gap: var(--hop-space-stack-sm);
2609
+ --hop-CheckboxGroup-list-sm-column-gap: var(--hop-space-inline-sm);
2610
+ --hop-CheckboxGroup-list-sm-row-gap: var(--hop-space-stack-sm);
2611
+ --hop-CheckboxGroup-bordered-sm-padding: var(--hop-space-inset-sm);
2612
+ --hop-CheckboxGroup-bordered-sm-column-gap: var(--hop-space-inline-sm);
2613
+ --hop-CheckboxGroup-bordered-sm-row-gap: var(--hop-space-stack-sm);
2614
+ --hop-CheckboxGroup-list-bordered-sm-column-gap: 0;
2615
+ --hop-CheckboxGroup-list-bordered-sm-row-gap: 0;
2616
+ --hop-CheckboxGroup-md-column-gap: var(--hop-space-inline-md);
2617
+ --hop-CheckboxGroup-md-row-gap: var(--hop-space-stack-md);
2618
+ --hop-CheckboxGroup-list-md-column-gap: var(--hop-space-inline-md);
2619
+ --hop-CheckboxGroup-list-md-row-gap: var(--hop-space-stack-md);
2620
+ --hop-CheckboxGroup-bordered-md-padding: var(--hop-space-inset-md);
2621
+ --hop-CheckboxGroup-bordered-md-column-gap: var(--hop-space-inline-sm);
2622
+ --hop-CheckboxGroup-bordered-md-row-gap: var(--hop-space-stack-sm);
2623
+ --hop-CheckboxGroup-list-bordered-md-column-gap: 0;
2624
+ --hop-CheckboxGroup-list-bordered-md-row-gap: 0;
2625
+ --hop-CheckboxGroup-vertical-flex-direction: column;
2626
+ --hop-CheckboxGroup-horizontal-flex-direction: row;
2627
+ --checkbox-border-size: 0.0625rem;
2628
+ --checkbox-border-color: var(--hop-neutral-border-weak);
2629
+ --flex-direction: var(--hop-CheckboxGroup-vertical-flex-direction);
2630
+ --align-items: var(--hop-CheckboxGroup-align-items);
2631
+ --justify-content: var(--hop-CheckboxGroup-justify-content);
2632
+ --flex-wrap: wrap;
2633
+ display: flex;
2634
+ flex-direction: column;
2635
+ gap: var(--row-gap, var(--hop-space-stack-md)) var(--column-gap, var(--hop-space-inline-md));
2636
+ align-items: var(--align-items);
2637
+ justify-content: var(--justify-content);
2638
+ box-sizing: border-box;
2639
+ inline-size: max-content;
2640
+ max-inline-size: 100%;
2641
+ }
2642
+ .CheckboxGroup-module__hop-CheckboxGroup--bordered___qH2KW {
2643
+ --list-border: var(--checkbox-border-size) solid var(--checkbox-border-color);
2644
+ --list-border-radius: var(--hop-shape-rounded-md);
2645
+ }
2646
+ .CheckboxGroup-module__hop-CheckboxGroup--sm___ia-zO {
2647
+ --column-gap: var(--hop-CheckboxGroup-sm-column-gap);
2648
+ --row-gap: var(--hop-CheckboxGroup-sm-row-gap);
2649
+ --list-column-gap: var(--hop-CheckboxGroup-list-sm-column-gap);
2650
+ --list-row-gap: var(--hop-CheckboxGroup-list-sm-row-gap);
2651
+ }
2652
+ .CheckboxGroup-module__hop-CheckboxGroup--md___3XedT {
2653
+ --column-gap: var(--hop-CheckboxGroup-md-column-gap);
2654
+ --row-gap: var(--hop-CheckboxGroup-md-row-gap);
2655
+ --list-column-gap: var(--hop-CheckboxGroup-list-md-column-gap);
2656
+ --list-row-gap: var(--hop-CheckboxGroup-list-md-row-gap);
2657
+ }
2658
+ .CheckboxGroup-module__hop-CheckboxGroup--bordered___qH2KW.CheckboxGroup-module__hop-CheckboxGroup--sm___ia-zO {
2659
+ --checkbox-padding: var(--hop-CheckboxGroup-bordered-sm-padding);
2660
+ --column-gap: var(--hop-CheckboxGroup-bordered-sm-column-gap);
2661
+ --row-gap: var(--hop-CheckboxGroup-bordered-sm-row-gap);
2662
+ --list-column-gap: var(--hop-CheckboxGroup-list-bordered-sm-column-gap);
2663
+ --list-row-gap: var(--hop-CheckboxGroup-list-bordered-sm-row-gap);
2664
+ }
2665
+ .CheckboxGroup-module__hop-CheckboxGroup--bordered___qH2KW.CheckboxGroup-module__hop-CheckboxGroup--md___3XedT {
2666
+ --checkbox-padding: var(--hop-CheckboxGroup-bordered-md-padding);
2667
+ --column-gap: var(--hop-CheckboxGroup-bordered-md-column-gap);
2668
+ --row-gap: var(--hop-CheckboxGroup-bordered-md-row-gap);
2669
+ --list-column-gap: var(--hop-CheckboxGroup-list-bordered-md-column-gap);
2670
+ --list-row-gap: var(--hop-CheckboxGroup-list-bordered-md-row-gap);
2671
+ }
2672
+ .CheckboxGroup-module__hop-CheckboxGroup___3meDG[data-orientation=horizontal] {
2673
+ --flex-direction: var(--hop-CheckboxGroup-horizontal-flex-direction);
2674
+ }
2675
+ .CheckboxGroup-module__hop-CheckboxGroup--bordered___qH2KW[data-orientation=horizontal] {
2676
+ --flex-wrap: nowrap;
2677
+ }
2678
+ .CheckboxGroup-module__hop-CheckboxGroup___3meDG > .CheckboxGroup-module__hop-CheckboxGroup__label___Y7B8T {
2679
+ order: 1;
2680
+ }
2681
+ .CheckboxGroup-module__hop-CheckboxGroup__list___9rEXj {
2682
+ display: flex;
2683
+ flex-flow: var(--flex-direction) var(--flex-wrap);
2684
+ gap: var(--list-row-gap, var(--hop-space-stack-md)) var(--list-column-gap, var(--hop-space-inline-md));
2685
+ order: 2;
2686
+ box-sizing: border-box;
2687
+ inline-size: max-content;
2688
+ max-inline-size: 100%;
2689
+ border: var(--list-border, none);
2690
+ border-radius: var(--list-border-radius, 0);
2691
+ }
2692
+ .CheckboxGroup-module__hop-CheckboxGroup__list___9rEXj > .CheckboxGroup-module__hop-CheckboxGroup__checkbox___79msR {
2693
+ position: relative;
2694
+ flex: 0 1 auto;
2695
+ align-content: start;
2696
+ inline-size: auto;
2697
+ min-inline-size: 0;
2698
+ padding: var(--checkbox-padding, 0);
2699
+ }
2700
+ .CheckboxGroup-module__hop-CheckboxGroup--bordered___qH2KW .CheckboxGroup-module__hop-CheckboxGroup__list___9rEXj > .CheckboxGroup-module__hop-CheckboxGroup__checkbox___79msR ~ .CheckboxGroup-module__hop-CheckboxGroup__checkbox___79msR::before {
2701
+ content: "";
2702
+ position: absolute;
2703
+ display: block;
2704
+ }
2705
+ .CheckboxGroup-module__hop-CheckboxGroup--bordered___qH2KW[data-orientation=vertical] .CheckboxGroup-module__hop-CheckboxGroup__list___9rEXj > .CheckboxGroup-module__hop-CheckboxGroup__checkbox___79msR ~ .CheckboxGroup-module__hop-CheckboxGroup__checkbox___79msR::before {
2706
+ inset-block-start: 0;
2707
+ inset-inline: 0;
2708
+ border-block-start: var(--list-border, none);
2709
+ }
2710
+ .CheckboxGroup-module__hop-CheckboxGroup--bordered___qH2KW[data-orientation=horizontal] .CheckboxGroup-module__hop-CheckboxGroup__list___9rEXj > .CheckboxGroup-module__hop-CheckboxGroup__checkbox___79msR ~ .CheckboxGroup-module__hop-CheckboxGroup__checkbox___79msR::before {
2711
+ inset-block: 0;
2712
+ inset-inline-start: 0;
2713
+ border-inline-start: var(--list-border, none);
2714
+ }
2715
+ .CheckboxGroup-module__hop-CheckboxGroup___3meDG > .CheckboxGroup-module__hop-CheckboxGroup__error-message___AwqY7,
2716
+ .CheckboxGroup-module__hop-CheckboxGroup___3meDG > .CheckboxGroup-module__hop-CheckboxGroup__helper-message___hpbyJ {
2717
+ order: 3;
2718
+ }
2719
+
2720
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/checkbox/src/DecorativeCheckbox.module.css/#css-module-data */
2721
+ .Checkbox-module__hop-Checkbox___RAOey {
2722
+ --hop-Checkbox-box-border-size: 0.0625rem;
2723
+ --hop-Checkbox-box-border-color: var(--hop-neutral-border);
2724
+ --hop-Checkbox-box-background-color: var(--hop-neutral-surface);
2725
+ --hop-Checkbox-box-outline-size: 0.125rem;
2726
+ --hop-Checkbox-box-outline-color: var(--hop-primary-border-focus);
2727
+ --hop-Checkbox-check-color: var(--hop-neutral-icon-selected);
2728
+ --hop-Checkbox-check-display: none;
2729
+ --hop-Checkbox-text-color: var(--hop-neutral-text);
2730
+ --hop-Checkbox-icon-color: var(--hop-neutral-icon);
2731
+ --hop-Checkbox-box-border-color-hovered: var(--hop-neutral-border-hover);
2732
+ --hop-Checkbox-box-background-color-hovered: var(--hop-neutral-surface-hover);
2733
+ --hop-Checkbox-text-color-hovered: var(--hop-neutral-text-hover);
2734
+ --hop-Checkbox-icon-color-hovered: var(--hop-neutral-icon-hover);
2735
+ --hop-Checkbox-box-border-color-pressed: var(--hop-neutral-border-press);
2736
+ --hop-Checkbox-box-background-color-pressed: var(--hop-neutral-surface-press);
2737
+ --hop-Checkbox-text-color-pressed: var(--hop-neutral-text-press);
2738
+ --hop-Checkbox-icon-color-pressed: var(--hop-neutral-icon-press);
2739
+ --hop-Checkbox-box-border-color-selected: var(--hop-neutral-border-selected);
2740
+ --hop-Checkbox-box-background-color-selected: var(--hop-neutral-surface-selected);
2741
+ --hop-Checkbox-check-display-selected: block;
2742
+ --hop-Checkbox-text-color-selected: var(--hop-neutral-text);
2743
+ --hop-Checkbox-icon-color-selected: var(--hop-neutral-icon);
2744
+ --hop-Checkbox-box-border-color-disabled: var(--hop-neutral-border-disabled);
2745
+ --hop-Checkbox-box-background-color-disabled: var(--hop-neutral-surface-disabled);
2746
+ --hop-Checkbox-check-color-disabled: var(--hop-neutral-icon-disabled);
2747
+ --hop-Checkbox-text-color-disabled: var(--hop-neutral-text-disabled);
2748
+ --hop-Checkbox-icon-color-disabled: var(--hop-neutral-icon-disabled);
2749
+ --hop-Checkbox-box-border-color-focused: var(--hop-neutral-border-hover);
2750
+ --hop-Checkbox-box-background-color-focused: var(--hop-neutral-surface-hover);
2751
+ --hop-Checkbox-text-color-focused: var(--hop-neutral-text-hover);
2752
+ --hop-Checkbox-icon-color-focused: var(--hop-neutral-icon-hover);
2753
+ --hop-Checkbox-box-border-color-invalid: var(--hop-danger-border-strong);
2754
+ --hop-Checkbox-box-background-color-invalid: var(--hop-neutral-surface);
2755
+ --hop-Checkbox-box-border-color-hovered-invalid: var(--hop-danger-border-strong);
2756
+ --hop-Checkbox-box-background-color-hovered-invalid: var(--hop-danger-surface-weak-hover);
2757
+ --hop-Checkbox-box-border-color-pressed-invalid: var(--hop-danger-border-press);
2758
+ --hop-Checkbox-box-background-color-pressed-invalid: var(--hop-danger-surface-weak-press);
2759
+ --hop-Checkbox-box-border-color-focused-invalid: var(--hop-danger-border-press);
2760
+ --hop-Checkbox-box-background-color-focused-invalid: var(--hop-danger-surface);
2761
+ --hop-Checkbox-box-border-color-selected-invalid: var(--hop-danger-border-strong);
2762
+ --hop-Checkbox-box-background-color-selected-invalid: var(--hop-danger-surface-strong);
2763
+ --hop-Checkbox-check-color-invalid: var(--hop-danger-icon-strong);
2764
+ --hop-Checkbox-text-color-invalid: var(--hop-danger-text-weak);
2765
+ --hop-Checkbox-text-color-hovered-invalid: var(--hop-danger-text-weak-hover);
2766
+ --hop-Checkbox-text-color-pressed-invalid: var(--hop-danger-text-weak-press);
2767
+ --hop-Checkbox-icon-color-invalid: var(--hop-danger-icon-weak);
2768
+ --hop-Checkbox-icon-color-hovered-invalid: var(--hop-danger-icon-weak-hover);
2769
+ --hop-Checkbox-icon-color-pressed-invalid: var(--hop-danger-icon-weak-press);
2770
+ --hop-Checkbox-box-sm-block-size: 1rem;
2771
+ --hop-Checkbox-box-sm-inline-size: 1rem;
2772
+ --hop-Checkbox-text-sm-top-offset: calc((var(--box-inline-size) - (var(--hop-body-sm-line-height) * var(--hop-body-sm-font-size))) / 2);
2773
+ --hop-Checkbox-text-sm-margin-inline-start: calc(var(--hop-space-inline-sm) - var(--hop-space-inline-xs));
2774
+ --hop-Checkbox-box-md-block-size: 1.5rem;
2775
+ --hop-Checkbox-box-md-inline-size: 1.5rem;
2776
+ --hop-Checkbox-text-md-top-offset: calc((var(--box-inline-size) - (var(--hop-body-md-line-height) * var(--hop-body-md-font-size))) / 2);
2777
+ --hop-Checkbox-text-md-margin-inline-start: calc(var(--hop-space-inline-md) - var(--hop-space-inline-xs));
2778
+ --box-background-color: var(--hop-Checkbox-box-background-color);
2779
+ --box-border-color: var(--hop-Checkbox-box-border-color);
2780
+ --box-border-radius: var(--hop-shape-rounded-sm);
2781
+ --check-color: var(--hop-Checkbox-check-color);
2782
+ --check-display: var(--hop-Checkbox-check-display);
2783
+ --cursor: pointer;
2784
+ --text-color: var(--hop-Checkbox-text-color);
2785
+ --icon-color: var(--hop-Checkbox-icon-color);
2786
+ --transition-duration: var(--hop-easing-duration-2);
2787
+ cursor: var(--cursor);
2788
+ display: flex;
2789
+ column-gap: var(--hop-space-inline-xs);
2790
+ align-items: flex-start;
2791
+ justify-content: flex-start;
2792
+ box-sizing: border-box;
2793
+ inline-size: max-content;
2794
+ max-inline-size: 100%;
2795
+ }
2796
+ .Checkbox-module__hop-Checkbox___RAOey[data-focus-visible] {
2797
+ --box-background-color: var(--hop-Checkbox-box-background-color-focused);
2798
+ --box-border-color: var(--hop-Checkbox-box-border-color-focused);
2799
+ --box-outline: var(--hop-Checkbox-box-outline-size) solid var(--hop-Checkbox-box-outline-color);
2800
+ --text-color: var(--hop-Checkbox-text-color-focused);
2801
+ --icon-color: var(--hop-Checkbox-icon-color-focused);
2802
+ }
2803
+ .Checkbox-module__hop-Checkbox___RAOey[data-hovered] {
2804
+ --box-background-color: var(--hop-Checkbox-box-background-color-hovered);
2805
+ --box-border-color: var(--hop-Checkbox-box-border-color-hovered);
2806
+ --text-color: var(--hop-Checkbox-text-color-hovered);
2807
+ --icon-color: var(--hop-Checkbox-icon-color-hovered);
2808
+ }
2809
+ .Checkbox-module__hop-Checkbox___RAOey[data-pressed] {
2810
+ --box-background-color: var(--hop-Checkbox-box-background-color-pressed);
2811
+ --box-border-color: var(--hop-Checkbox-box-border-color-pressed);
2812
+ --text-color: var(--hop-Checkbox-text-color-pressed);
2813
+ --icon-color: var(--hop-Checkbox-icon-color-pressed);
2814
+ }
2815
+ .Checkbox-module__hop-Checkbox___RAOey[data-selected] {
2816
+ --box-background-color: var(--hop-Checkbox-box-background-color-selected);
2817
+ --box-border-color: var(--hop-Checkbox-box-border-color-selected);
2818
+ --check-display: var(--hop-Checkbox-check-display-selected);
2819
+ --text-color: var(--hop-Checkbox-text-color-selected);
2820
+ --icon-color: var(--hop-Checkbox-icon-color-selected);
2821
+ }
2822
+ .Checkbox-module__hop-Checkbox___RAOey[data-invalid] {
2823
+ --box-background-color: var(--hop-Checkbox-box-background-color-invalid);
2824
+ --box-border-color: var(--hop-Checkbox-box-border-color-invalid);
2825
+ --check-color: var(--hop-Checkbox-check-color-invalid);
2826
+ --text-color: var(--hop-Checkbox-text-color-invalid);
2827
+ --icon-color: var(--hop-Checkbox-icon-color-invalid);
2828
+ }
2829
+ .Checkbox-module__hop-Checkbox___RAOey[data-invalid]:where([data-focus-visible]) {
2830
+ --box-background-color: var(--hop-Checkbox-box-background-color-focused-invalid);
2831
+ --box-border-color: var(--hop-Checkbox-box-border-color-focused-invalid);
2832
+ }
2833
+ .Checkbox-module__hop-Checkbox___RAOey[data-invalid]:where([data-hovered]) {
2834
+ --box-background-color: var(--hop-Checkbox-box-background-color-hovered-invalid);
2835
+ --box-border-color: var(--hop-Checkbox-box-border-color-hovered-invalid);
2836
+ --text-color: var(--hop-Checkbox-text-color-hovered-invalid);
2837
+ --icon-color: var(--hop-Checkbox-icon-color-hovered-invalid);
2838
+ }
2839
+ .Checkbox-module__hop-Checkbox___RAOey[data-invalid]:where([data-pressed]) {
2840
+ --box-background-color: var(--hop-Checkbox-box-background-color-pressed-invalid);
2841
+ --box-border-color: var(--hop-Checkbox-box-border-color-pressed-invalid);
2842
+ --text-color: var(--hop-Checkbox-text-color-pressed-invalid);
2843
+ --icon-color: var(--hop-Checkbox-icon-color-pressed-invalid);
2844
+ }
2845
+ .Checkbox-module__hop-Checkbox___RAOey:where([data-invalid])[data-selected] {
2846
+ --box-background-color: var(--hop-Checkbox-box-background-color-selected-invalid);
2847
+ --box-border-color: var(--hop-Checkbox-box-border-color-selected-invalid);
2848
+ }
2849
+ .Checkbox-module__hop-Checkbox___RAOey[data-disabled] {
2850
+ --box-background-color: var(--hop-Checkbox-box-background-color-disabled);
2851
+ --box-border-color: var(--hop-Checkbox-box-border-color-disabled);
2852
+ --check-color: var(--hop-Checkbox-check-color-disabled);
2853
+ --cursor: not-allowed;
2854
+ --text-color: var(--hop-Checkbox-text-color-disabled);
2855
+ --icon-color: var(--hop-Checkbox-icon-color-disabled);
2856
+ }
2857
+ .Checkbox-module__hop-Checkbox--sm___i3CSP {
2858
+ --box-block-size: var(--hop-Checkbox-box-sm-block-size);
2859
+ --box-inline-size: var(--hop-Checkbox-box-sm-inline-size);
2860
+ --text-top-offset: var(--hop-Checkbox-text-sm-top-offset);
2861
+ --text-margin-inline-start: var(--hop-Checkbox-text-sm-margin-inline-start);
2862
+ }
2863
+ .Checkbox-module__hop-Checkbox--md___GL7zO {
2864
+ --box-block-size: var(--hop-Checkbox-box-md-block-size);
2865
+ --box-inline-size: var(--hop-Checkbox-box-md-inline-size);
2866
+ --text-top-offset: var(--hop-Checkbox-text-md-top-offset);
2867
+ --text-margin-inline-start: var(--hop-Checkbox-text-md-margin-inline-start);
2868
+ }
2869
+ .Checkbox-module__hop-Checkbox__icon___s-OVR,
2870
+ .Checkbox-module__hop-Checkbox__icon-list___LdGhF {
2871
+ flex: 0 0 auto;
2872
+ order: 3;
2873
+ color: var(--icon-color);
2874
+ }
2875
+ .Checkbox-module__hop-Checkbox__box___oqQ7- {
2876
+ display: flex;
2877
+ flex: 0 0 auto;
2878
+ align-items: center;
2879
+ justify-content: center;
2880
+ order: 1;
2881
+ box-sizing: border-box;
2882
+ inline-size: var(--box-inline-size, var(--hop-Checkbox-box-md-inline-size));
2883
+ block-size: var(--box-block-size, var(--hop-Checkbox-box-md-block-size));
2884
+ background-color: var(--box-background-color);
2885
+ border: var(--hop-Checkbox-box-border-size) solid var(--box-border-color);
2886
+ border-radius: var(--box-border-radius);
2887
+ outline: var(--box-outline, none);
2888
+ outline-offset: 0.125rem;
2889
+ transition: background-color var(--transition-duration) var(--hop-easing-productive), border var(--transition-duration) var(--hop-easing-productive);
2890
+ }
2891
+ .Checkbox-module__hop-Checkbox__check___QKTgI {
2892
+ display: var(--check-display);
2893
+ color: var(--check-color);
2894
+ }
2895
+ .Checkbox-module__hop-Checkbox__text___vQWZ9 {
2896
+ flex: 0 1 auto;
2897
+ order: 2;
2898
+ min-inline-size: 0;
2899
+ margin-block-start: var(--text-top-offset, var(--hop-Checkbox-text-md-top-offset));
2900
+ margin-inline-start: var(--text-margin-inline-start, var(--hop-Checkbox-text-md-margin-inline-start));
2901
+ color: var(--text-color);
2902
+ }
2903
+ .DecorativeCheckbox-module__hop-DecorativeCheckbox___agg1U {
2904
+ }
2905
+ .DecorativeCheckbox-module__hop-DecorativeCheckbox--sm___9dMA0 {
2906
+ }
2907
+ .DecorativeCheckbox-module__hop-DecorativeCheckbox--md___Rd0Gm {
2908
+ }
2909
+ .DecorativeCheckbox-module__hop-DecorativeCheckbox__icon___6J6me,
2910
+ .DecorativeCheckbox-module__hop-DecorativeCheckbox__icon-list___w-8bI {
2911
+ }
2912
+ .DecorativeCheckbox-module__hop-DecorativeCheckbox__box___Uw7KN {
2913
+ }
2914
+ .DecorativeCheckbox-module__hop-DecorativeCheckbox__check___m8tUW {
2915
+ }
2916
+ .DecorativeCheckbox-module__hop-DecorativeCheckbox__text___0JcKA {
2917
+ }
2918
+
2919
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/radio/src/DecorativeRadio.module.css/#css-module-data */
2920
+ .Radio-module__hop-Radio___oBKRQ {
2921
+ --hop-Radio-box-border-size: 0.0625rem;
2922
+ --hop-Radio-box-border-color: var(--hop-neutral-border);
2923
+ --hop-Radio-box-background-color: var(--hop-neutral-surface);
2924
+ --hop-Radio-box-outline-size: 0.125rem;
2925
+ --hop-Radio-box-outline-color: var(--hop-primary-border-focus);
2926
+ --hop-Radio-bullet-color: var(--hop-neutral-icon-selected);
2927
+ --hop-Radio-bullet-display: none;
2928
+ --hop-Radio-text-color: var(--hop-neutral-text);
2929
+ --hop-Radio-icon-color: var(--hop-neutral-icon);
2930
+ --hop-Radio-box-border-color-hovered: var(--hop-neutral-border-hover);
2931
+ --hop-Radio-box-background-color-hovered: var(--hop-neutral-surface-hover);
2932
+ --hop-Radio-text-color-hovered: var(--hop-neutral-text-hover);
2933
+ --hop-Radio-icon-color-hovered: var(--hop-neutral-icon-hover);
2934
+ --hop-Radio-box-border-color-pressed: var(--hop-neutral-border-press);
2935
+ --hop-Radio-box-background-color-pressed: var(--hop-neutral-surface-press);
2936
+ --hop-Radio-text-color-pressed: var(--hop-neutral-text-press);
2937
+ --hop-Radio-icon-color-pressed: var(--hop-neutral-icon-press);
2938
+ --hop-Radio-box-border-color-selected: var(--hop-neutral-border-selected);
2939
+ --hop-Radio-box-background-color-selected: var(--hop-neutral-surface-selected);
2940
+ --hop-Radio-bullet-display-selected: block;
2941
+ --hop-Radio-text-color-selected: var(--hop-neutral-text);
2942
+ --hop-Radio-icon-color-selected: var(--hop-neutral-icon);
2943
+ --hop-Radio-box-border-color-disabled: var(--hop-neutral-border-disabled);
2944
+ --hop-Radio-box-background-color-disabled: var(--hop-neutral-surface-disabled);
2945
+ --hop-Radio-bullet-color-disabled: var(--hop-neutral-icon-disabled);
2946
+ --hop-Radio-text-color-disabled: var(--hop-neutral-text-disabled);
2947
+ --hop-Radio-icon-color-disabled: var(--hop-neutral-icon-disabled);
2948
+ --hop-Radio-box-border-color-focused: var(--hop-neutral-border-hover);
2949
+ --hop-Radio-box-background-color-focused: var(--hop-neutral-surface-hover);
2950
+ --hop-Radio-text-color-focused: var(--hop-neutral-text);
2951
+ --hop-Radio-icon-color-focused: var(--hop-neutral-icon);
2952
+ --hop-Radio-box-border-color-invalid: var(--hop-danger-border-strong);
2953
+ --hop-Radio-box-background-color-invalid: var(--hop-neutral-surface);
2954
+ --hop-Radio-box-border-color-hovered-invalid: var(--hop-danger-border-strong);
2955
+ --hop-Radio-box-background-color-hovered-invalid: var(--hop-danger-surface);
2956
+ --hop-Radio-box-border-color-pressed-invalid: var(--hop-danger-border-press);
2957
+ --hop-Radio-box-background-color-pressed-invalid: var(--hop-danger-surface-weak);
2958
+ --hop-Radio-box-border-color-focused-invalid: var(--hop-danger-border-strong);
2959
+ --hop-Radio-box-background-color-focused-invalid: var(--hop-danger-surface);
2960
+ --hop-Radio-box-border-color-selected-invalid: var(--hop-danger-border-strong);
2961
+ --hop-Radio-box-background-color-selected-invalid: var(--hop-danger-surface-strong);
2962
+ --hop-Radio-bullet-color-invalid: var(--hop-danger-icon-strong);
2963
+ --hop-Radio-text-color-invalid: var(--hop-danger-text-weak);
2964
+ --hop-Radio-icon-color-invalid: var(--hop-danger-icon-weak);
2965
+ --hop-Radio-text-color-hovered-invalid: var(--hop-danger-text-weak-hover);
2966
+ --hop-Radio-icon-color-hovered-invalid: var(--hop-danger-icon-weak-hover);
2967
+ --hop-Radio-text-color-pressed-invalid: var(--hop-danger-text-weak-press);
2968
+ --hop-Radio-box-sm-inline-size: 1rem;
2969
+ --hop-Radio-box-sm-block-size: 1rem;
2970
+ --hop-Radio-text-sm-top-offset: calc((var(--box-inline-size) - (var(--hop-body-sm-line-height) * var(--hop-body-sm-font-size))) / 2);
2971
+ --hop-Radio-text-sm-margin-inline-start: calc(var(--hop-space-inline-sm) - var(--hop-space-inline-xs));
2972
+ --hop-Radio-box-md-inline-size: 1.5rem;
2973
+ --hop-Radio-box-md-block-size: 1.5rem;
2974
+ --hop-Radio-text-md-top-offset: calc((var(--box-inline-size) - (var(--hop-body-md-line-height) * var(--hop-body-md-font-size))) / 2);
2975
+ --hop-Radio-text-md-margin-inline-start: calc(var(--hop-space-inline-md) - var(--hop-space-inline-xs));
2976
+ --box-background-color: var(--hop-Radio-box-background-color);
2977
+ --box-border-color: var(--hop-Radio-box-border-color);
2978
+ --box-border-radius: var(--hop-shape-circle);
2979
+ --bullet-color: var(--hop-Radio-bullet-color);
2980
+ --bullet-display: var(--hop-Radio-bullet-display);
2981
+ --cursor: pointer;
2982
+ --text-color: var(--hop-Radio-text-color);
2983
+ --icon-color: var(--hop-Radio-icon-color);
2984
+ --transition-duration: var(--hop-easing-duration-2);
2985
+ cursor: var(--cursor);
2986
+ display: flex;
2987
+ column-gap: var(--hop-space-inline-xs);
2988
+ align-items: flex-start;
2989
+ justify-content: flex-start;
2990
+ box-sizing: border-box;
2991
+ inline-size: max-content;
2992
+ max-inline-size: 100%;
2993
+ }
2994
+ .Radio-module__hop-Radio___oBKRQ[data-focus-visible] {
2995
+ --box-background-color: var(--hop-Radio-box-background-color-focused);
2996
+ --box-border-color: var(--hop-Radio-box-border-color-focused);
2997
+ --box-outline: var(--hop-Radio-box-outline-size) solid var(--hop-Radio-box-outline-color);
2998
+ --text-color: var(--hop-Radio-text-color-focused);
2999
+ --icon-color: var(--hop-Radio-icon-color-focused);
3000
+ }
3001
+ .Radio-module__hop-Radio___oBKRQ[data-hovered] {
3002
+ --box-background-color: var(--hop-Radio-box-background-color-hovered);
3003
+ --box-border-color: var(--hop-Radio-box-border-color-hovered);
3004
+ --text-color: var(--hop-Radio-text-color-hovered);
3005
+ --icon-color: var(--hop-Radio-icon-color-hovered);
3006
+ }
3007
+ .Radio-module__hop-Radio___oBKRQ[data-pressed] {
3008
+ --box-background-color: var(--hop-Radio-box-background-color-pressed);
3009
+ --box-border-color: var(--hop-Radio-box-border-color-pressed);
3010
+ --text-color: var(--hop-Radio-text-color-pressed);
3011
+ --icon-color: var(--hop-Radio-icon-color-pressed);
3012
+ }
3013
+ .Radio-module__hop-Radio___oBKRQ[data-selected] {
3014
+ --box-background-color: var(--hop-Radio-box-background-color-selected);
3015
+ --box-border-color: var(--hop-Radio-box-border-color-selected);
3016
+ --bullet-display: var(--hop-Radio-bullet-display-selected);
3017
+ --text-color: var(--hop-Radio-text-color-selected);
3018
+ --icon-color: var(--hop-Radio-icon-color-selected);
3019
+ }
3020
+ .Radio-module__hop-Radio___oBKRQ[data-invalid] {
3021
+ --box-background-color: var(--hop-Radio-box-background-color-invalid);
3022
+ --box-border-color: var(--hop-Radio-box-border-color-invalid);
3023
+ --bullet-color: var(--hop-Radio-bullet-color-invalid);
3024
+ --text-color: var(--hop-Radio-text-color-invalid);
3025
+ --icon-color: var(--hop-Radio-icon-color-invalid);
3026
+ }
3027
+ .Radio-module__hop-Radio___oBKRQ:where([data-invalid])[data-focus-visible] {
3028
+ --box-background-color: var(--hop-Radio-box-background-color-focused-invalid);
3029
+ --box-border-color: var(--hop-Radio-box-border-color-focused-invalid);
3030
+ }
3031
+ .Radio-module__hop-Radio___oBKRQ:where([data-invalid])[data-hovered] {
3032
+ --box-background-color: var(--hop-Radio-box-background-color-hovered-invalid);
3033
+ --box-border-color: var(--hop-Radio-box-border-color-hovered-invalid);
3034
+ --text-color: var(--hop-Radio-text-color-hovered-invalid);
3035
+ --icon-color: var(--hop-Radio-text-color-hovered-invalid);
3036
+ }
3037
+ .Radio-module__hop-Radio___oBKRQ:where([data-invalid])[data-pressed] {
3038
+ --box-background-color: var(--hop-Radio-box-background-color-pressed-invalid);
3039
+ --box-border-color: var(--hop-Radio-box-border-color-pressed-invalid);
3040
+ --text-color: var(--hop-Radio-text-color-pressed-invalid);
3041
+ --icon-color: var(--hop-Radio-icon-color-pressed-invalid);
3042
+ }
3043
+ .Radio-module__hop-Radio___oBKRQ:where([data-invalid])[data-selected] {
3044
+ --box-background-color: var(--hop-Radio-box-background-color-selected-invalid);
3045
+ --box-border-color: var(--hop-Radio-box-border-color-selected-invalid);
3046
+ }
3047
+ .Radio-module__hop-Radio___oBKRQ[data-disabled] {
3048
+ --box-background-color: var(--hop-Radio-box-background-color-disabled);
3049
+ --box-border-color: var(--hop-Radio-box-border-color-disabled);
3050
+ --bullet-color: var(--hop-Radio-bullet-color-disabled);
3051
+ --cursor: not-allowed;
3052
+ --text-color: var(--hop-Radio-text-color-disabled);
3053
+ --icon-color: var(--hop-Radio-icon-color-disabled);
3054
+ }
3055
+ .Radio-module__hop-Radio--sm___C-Q1U {
3056
+ --box-inline-size: var(--hop-Radio-box-sm-inline-size);
3057
+ --box-block-size: var(--hop-Radio-box-sm-block-size);
3058
+ --text-top-offset: var(--hop-Radio-text-sm-top-offset);
3059
+ --text-margin-inline-start: var(--hop-Radio-text-sm-margin-inline-start);
3060
+ }
3061
+ .Radio-module__hop-Radio--md___8cI7H {
3062
+ --box-inline-size: var(--hop-Radio-box-md-inline-size);
3063
+ --box-block-size: var(--hop-Radio-box-md-block-size);
3064
+ --text-top-offset: var(--hop-Radio-text-md-top-offset);
3065
+ --text-margin-inline-start: var(--hop-Radio-text-md-margin-inline-start);
3066
+ }
3067
+ .Radio-module__hop-Radio__icon___Ai4EA,
3068
+ .Radio-module__hop-Radio__icon-list___Ml4fa {
3069
+ flex: 0 0 auto;
3070
+ order: 3;
3071
+ color: var(--icon-color);
3072
+ }
3073
+ .Radio-module__hop-Radio__box___gF3Ys {
3074
+ display: flex;
3075
+ flex: 0 0 auto;
3076
+ align-items: center;
3077
+ justify-content: center;
3078
+ order: 1;
3079
+ box-sizing: border-box;
3080
+ inline-size: var(--box-inline-size, var(--hop-Radio-box-md-inline-size));
3081
+ block-size: var(--box-block-size, var(--hop-Radio-box-md-block-size));
3082
+ background-color: var(--box-background-color);
3083
+ border: var(--hop-Radio-box-border-size) solid var(--box-border-color);
3084
+ border-radius: var(--box-border-radius);
3085
+ outline: var(--box-outline, none);
3086
+ outline-offset: 0.125rem;
3087
+ transition: background-color var(--transition-duration) var(--hop-easing-productive), border var(--transition-duration) var(--hop-easing-productive);
3088
+ }
3089
+ .Radio-module__hop-Radio__bullet___DLVyb {
3090
+ display: var(--bullet-display);
3091
+ color: var(--bullet-color);
3092
+ }
3093
+ .Radio-module__hop-Radio__text___md8fJ {
3094
+ flex: 0 1 auto;
3095
+ order: 2;
3096
+ min-inline-size: 0;
3097
+ margin-block-start: var(--text-top-offset, var(--hop-Radio-text-md-top-offset));
3098
+ margin-inline-start: var(--text-margin-inline-start, var(--hop-Radio-text-md-margin-inline-start));
3099
+ color: var(--text-color);
3100
+ }
3101
+ .DecorativeRadio-module__hop-DecorativeRadio___X2ojB {
3102
+ }
3103
+ .DecorativeRadio-module__hop-DecorativeRadio--sm___0duOP {
3104
+ }
3105
+ .DecorativeRadio-module__hop-DecorativeRadio--md___qlpiC {
3106
+ }
3107
+ .DecorativeRadio-module__hop-DecorativeRadio__icon___X3Y3Y,
3108
+ .DecorativeRadio-module__hop-DecorativeRadio__icon-list___Pe71- {
3109
+ }
3110
+ .DecorativeRadio-module__hop-DecorativeRadio__box___whoC1 {
3111
+ }
3112
+ .DecorativeRadio-module__hop-DecorativeRadio__bullet___-GKnC {
3113
+ }
3114
+ .DecorativeRadio-module__hop-DecorativeRadio__text___RXYUE {
3115
+ }
3116
+
3117
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/radio/src/Radio.module.css/#css-module-data */
3118
+ .Radio-module__hop-Radio___oBKRQ {
3119
+ --hop-Radio-box-border-size: 0.0625rem;
3120
+ --hop-Radio-box-border-color: var(--hop-neutral-border);
3121
+ --hop-Radio-box-background-color: var(--hop-neutral-surface);
3122
+ --hop-Radio-box-outline-size: 0.125rem;
3123
+ --hop-Radio-box-outline-color: var(--hop-primary-border-focus);
3124
+ --hop-Radio-bullet-color: var(--hop-neutral-icon-selected);
3125
+ --hop-Radio-bullet-display: none;
3126
+ --hop-Radio-text-color: var(--hop-neutral-text);
3127
+ --hop-Radio-icon-color: var(--hop-neutral-icon);
3128
+ --hop-Radio-box-border-color-hovered: var(--hop-neutral-border-hover);
3129
+ --hop-Radio-box-background-color-hovered: var(--hop-neutral-surface-hover);
3130
+ --hop-Radio-text-color-hovered: var(--hop-neutral-text-hover);
3131
+ --hop-Radio-icon-color-hovered: var(--hop-neutral-icon-hover);
3132
+ --hop-Radio-box-border-color-pressed: var(--hop-neutral-border-press);
3133
+ --hop-Radio-box-background-color-pressed: var(--hop-neutral-surface-press);
3134
+ --hop-Radio-text-color-pressed: var(--hop-neutral-text-press);
3135
+ --hop-Radio-icon-color-pressed: var(--hop-neutral-icon-press);
3136
+ --hop-Radio-box-border-color-selected: var(--hop-neutral-border-selected);
3137
+ --hop-Radio-box-background-color-selected: var(--hop-neutral-surface-selected);
3138
+ --hop-Radio-bullet-display-selected: block;
3139
+ --hop-Radio-text-color-selected: var(--hop-neutral-text);
3140
+ --hop-Radio-icon-color-selected: var(--hop-neutral-icon);
3141
+ --hop-Radio-box-border-color-disabled: var(--hop-neutral-border-disabled);
3142
+ --hop-Radio-box-background-color-disabled: var(--hop-neutral-surface-disabled);
3143
+ --hop-Radio-bullet-color-disabled: var(--hop-neutral-icon-disabled);
3144
+ --hop-Radio-text-color-disabled: var(--hop-neutral-text-disabled);
3145
+ --hop-Radio-icon-color-disabled: var(--hop-neutral-icon-disabled);
3146
+ --hop-Radio-box-border-color-focused: var(--hop-neutral-border-hover);
3147
+ --hop-Radio-box-background-color-focused: var(--hop-neutral-surface-hover);
3148
+ --hop-Radio-text-color-focused: var(--hop-neutral-text);
3149
+ --hop-Radio-icon-color-focused: var(--hop-neutral-icon);
3150
+ --hop-Radio-box-border-color-invalid: var(--hop-danger-border-strong);
3151
+ --hop-Radio-box-background-color-invalid: var(--hop-neutral-surface);
3152
+ --hop-Radio-box-border-color-hovered-invalid: var(--hop-danger-border-strong);
3153
+ --hop-Radio-box-background-color-hovered-invalid: var(--hop-danger-surface);
3154
+ --hop-Radio-box-border-color-pressed-invalid: var(--hop-danger-border-press);
3155
+ --hop-Radio-box-background-color-pressed-invalid: var(--hop-danger-surface-weak);
3156
+ --hop-Radio-box-border-color-focused-invalid: var(--hop-danger-border-strong);
3157
+ --hop-Radio-box-background-color-focused-invalid: var(--hop-danger-surface);
3158
+ --hop-Radio-box-border-color-selected-invalid: var(--hop-danger-border-strong);
3159
+ --hop-Radio-box-background-color-selected-invalid: var(--hop-danger-surface-strong);
3160
+ --hop-Radio-bullet-color-invalid: var(--hop-danger-icon-strong);
3161
+ --hop-Radio-text-color-invalid: var(--hop-danger-text-weak);
3162
+ --hop-Radio-icon-color-invalid: var(--hop-danger-icon-weak);
3163
+ --hop-Radio-text-color-hovered-invalid: var(--hop-danger-text-weak-hover);
3164
+ --hop-Radio-icon-color-hovered-invalid: var(--hop-danger-icon-weak-hover);
3165
+ --hop-Radio-text-color-pressed-invalid: var(--hop-danger-text-weak-press);
3166
+ --hop-Radio-box-sm-inline-size: 1rem;
3167
+ --hop-Radio-box-sm-block-size: 1rem;
3168
+ --hop-Radio-text-sm-top-offset: calc((var(--box-inline-size) - (var(--hop-body-sm-line-height) * var(--hop-body-sm-font-size))) / 2);
3169
+ --hop-Radio-text-sm-margin-inline-start: calc(var(--hop-space-inline-sm) - var(--hop-space-inline-xs));
3170
+ --hop-Radio-box-md-inline-size: 1.5rem;
3171
+ --hop-Radio-box-md-block-size: 1.5rem;
3172
+ --hop-Radio-text-md-top-offset: calc((var(--box-inline-size) - (var(--hop-body-md-line-height) * var(--hop-body-md-font-size))) / 2);
3173
+ --hop-Radio-text-md-margin-inline-start: calc(var(--hop-space-inline-md) - var(--hop-space-inline-xs));
3174
+ --box-background-color: var(--hop-Radio-box-background-color);
3175
+ --box-border-color: var(--hop-Radio-box-border-color);
3176
+ --box-border-radius: var(--hop-shape-circle);
3177
+ --bullet-color: var(--hop-Radio-bullet-color);
3178
+ --bullet-display: var(--hop-Radio-bullet-display);
3179
+ --cursor: pointer;
3180
+ --text-color: var(--hop-Radio-text-color);
3181
+ --icon-color: var(--hop-Radio-icon-color);
3182
+ --transition-duration: var(--hop-easing-duration-2);
3183
+ cursor: var(--cursor);
3184
+ display: flex;
3185
+ column-gap: var(--hop-space-inline-xs);
3186
+ align-items: flex-start;
3187
+ justify-content: flex-start;
3188
+ box-sizing: border-box;
3189
+ inline-size: max-content;
3190
+ max-inline-size: 100%;
3191
+ }
3192
+ .Radio-module__hop-Radio___oBKRQ[data-focus-visible] {
3193
+ --box-background-color: var(--hop-Radio-box-background-color-focused);
3194
+ --box-border-color: var(--hop-Radio-box-border-color-focused);
3195
+ --box-outline: var(--hop-Radio-box-outline-size) solid var(--hop-Radio-box-outline-color);
3196
+ --text-color: var(--hop-Radio-text-color-focused);
3197
+ --icon-color: var(--hop-Radio-icon-color-focused);
3198
+ }
3199
+ .Radio-module__hop-Radio___oBKRQ[data-hovered] {
3200
+ --box-background-color: var(--hop-Radio-box-background-color-hovered);
3201
+ --box-border-color: var(--hop-Radio-box-border-color-hovered);
3202
+ --text-color: var(--hop-Radio-text-color-hovered);
3203
+ --icon-color: var(--hop-Radio-icon-color-hovered);
3204
+ }
3205
+ .Radio-module__hop-Radio___oBKRQ[data-pressed] {
3206
+ --box-background-color: var(--hop-Radio-box-background-color-pressed);
3207
+ --box-border-color: var(--hop-Radio-box-border-color-pressed);
3208
+ --text-color: var(--hop-Radio-text-color-pressed);
3209
+ --icon-color: var(--hop-Radio-icon-color-pressed);
3210
+ }
3211
+ .Radio-module__hop-Radio___oBKRQ[data-selected] {
3212
+ --box-background-color: var(--hop-Radio-box-background-color-selected);
3213
+ --box-border-color: var(--hop-Radio-box-border-color-selected);
3214
+ --bullet-display: var(--hop-Radio-bullet-display-selected);
3215
+ --text-color: var(--hop-Radio-text-color-selected);
3216
+ --icon-color: var(--hop-Radio-icon-color-selected);
3217
+ }
3218
+ .Radio-module__hop-Radio___oBKRQ[data-invalid] {
3219
+ --box-background-color: var(--hop-Radio-box-background-color-invalid);
3220
+ --box-border-color: var(--hop-Radio-box-border-color-invalid);
3221
+ --bullet-color: var(--hop-Radio-bullet-color-invalid);
3222
+ --text-color: var(--hop-Radio-text-color-invalid);
3223
+ --icon-color: var(--hop-Radio-icon-color-invalid);
3224
+ }
3225
+ .Radio-module__hop-Radio___oBKRQ:where([data-invalid])[data-focus-visible] {
3226
+ --box-background-color: var(--hop-Radio-box-background-color-focused-invalid);
3227
+ --box-border-color: var(--hop-Radio-box-border-color-focused-invalid);
3228
+ }
3229
+ .Radio-module__hop-Radio___oBKRQ:where([data-invalid])[data-hovered] {
3230
+ --box-background-color: var(--hop-Radio-box-background-color-hovered-invalid);
3231
+ --box-border-color: var(--hop-Radio-box-border-color-hovered-invalid);
3232
+ --text-color: var(--hop-Radio-text-color-hovered-invalid);
3233
+ --icon-color: var(--hop-Radio-text-color-hovered-invalid);
3234
+ }
3235
+ .Radio-module__hop-Radio___oBKRQ:where([data-invalid])[data-pressed] {
3236
+ --box-background-color: var(--hop-Radio-box-background-color-pressed-invalid);
3237
+ --box-border-color: var(--hop-Radio-box-border-color-pressed-invalid);
3238
+ --text-color: var(--hop-Radio-text-color-pressed-invalid);
3239
+ --icon-color: var(--hop-Radio-icon-color-pressed-invalid);
3240
+ }
3241
+ .Radio-module__hop-Radio___oBKRQ:where([data-invalid])[data-selected] {
3242
+ --box-background-color: var(--hop-Radio-box-background-color-selected-invalid);
3243
+ --box-border-color: var(--hop-Radio-box-border-color-selected-invalid);
3244
+ }
3245
+ .Radio-module__hop-Radio___oBKRQ[data-disabled] {
3246
+ --box-background-color: var(--hop-Radio-box-background-color-disabled);
3247
+ --box-border-color: var(--hop-Radio-box-border-color-disabled);
3248
+ --bullet-color: var(--hop-Radio-bullet-color-disabled);
3249
+ --cursor: not-allowed;
3250
+ --text-color: var(--hop-Radio-text-color-disabled);
3251
+ --icon-color: var(--hop-Radio-icon-color-disabled);
3252
+ }
3253
+ .Radio-module__hop-Radio--sm___C-Q1U {
3254
+ --box-inline-size: var(--hop-Radio-box-sm-inline-size);
3255
+ --box-block-size: var(--hop-Radio-box-sm-block-size);
3256
+ --text-top-offset: var(--hop-Radio-text-sm-top-offset);
3257
+ --text-margin-inline-start: var(--hop-Radio-text-sm-margin-inline-start);
3258
+ }
3259
+ .Radio-module__hop-Radio--md___8cI7H {
3260
+ --box-inline-size: var(--hop-Radio-box-md-inline-size);
3261
+ --box-block-size: var(--hop-Radio-box-md-block-size);
3262
+ --text-top-offset: var(--hop-Radio-text-md-top-offset);
3263
+ --text-margin-inline-start: var(--hop-Radio-text-md-margin-inline-start);
3264
+ }
3265
+ .Radio-module__hop-Radio__icon___Ai4EA,
3266
+ .Radio-module__hop-Radio__icon-list___Ml4fa {
3267
+ flex: 0 0 auto;
3268
+ order: 3;
3269
+ color: var(--icon-color);
3270
+ }
3271
+ .Radio-module__hop-Radio__box___gF3Ys {
3272
+ display: flex;
3273
+ flex: 0 0 auto;
3274
+ align-items: center;
3275
+ justify-content: center;
3276
+ order: 1;
3277
+ box-sizing: border-box;
3278
+ inline-size: var(--box-inline-size, var(--hop-Radio-box-md-inline-size));
3279
+ block-size: var(--box-block-size, var(--hop-Radio-box-md-block-size));
3280
+ background-color: var(--box-background-color);
3281
+ border: var(--hop-Radio-box-border-size) solid var(--box-border-color);
3282
+ border-radius: var(--box-border-radius);
3283
+ outline: var(--box-outline, none);
3284
+ outline-offset: 0.125rem;
3285
+ transition: background-color var(--transition-duration) var(--hop-easing-productive), border var(--transition-duration) var(--hop-easing-productive);
3286
+ }
3287
+ .Radio-module__hop-Radio__bullet___DLVyb {
3288
+ display: var(--bullet-display);
3289
+ color: var(--bullet-color);
3290
+ }
3291
+ .Radio-module__hop-Radio__text___md8fJ {
3292
+ flex: 0 1 auto;
3293
+ order: 2;
3294
+ min-inline-size: 0;
3295
+ margin-block-start: var(--text-top-offset, var(--hop-Radio-text-md-top-offset));
3296
+ margin-inline-start: var(--text-margin-inline-start, var(--hop-Radio-text-md-margin-inline-start));
3297
+ color: var(--text-color);
3298
+ }
3299
+
3300
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/radio/src/RadioField.module.css/#css-module-data */
3301
+ .RadioField-module__hop-RadioField___RAV19 {
3302
+ --hop-RadioField-description-color: var(--hop-neutral-text-weak);
3303
+ --hop-RadioField-description-color-disabled: var(--hop-neutral-text-disabled);
3304
+ --hop-RadioField-sm-row-gap: var(--hop-space-stack-xs);
3305
+ --hop-RadioField-radio-sm-inline-size: 1rem;
3306
+ --hop-RadioField-description-sm-margin-inline-start: calc(var(--hop-RadioField-radio-sm-inline-size) + var(--hop-space-inline-sm));
3307
+ --hop-RadioField-md-row-gap: var(--hop-space-stack-xs);
3308
+ --hop-RadioField-radio-md-inline-size: 1.5rem;
3309
+ --hop-RadioField-description-md-margin-inline-start: calc(var(--hop-RadioField-radio-md-inline-size) + var(--hop-space-inline-md));
3310
+ --description-color: var(--hop-RadioField-description-color);
3311
+ display: flex;
3312
+ flex-direction: column;
3313
+ row-gap: var(--row-gap, var(--hop-space-stack-sm));
3314
+ align-items: flex-start;
3315
+ justify-content: flex-start;
3316
+ box-sizing: border-box;
3317
+ inline-size: max-content;
3318
+ max-inline-size: 100%;
3319
+ }
3320
+ .RadioField-module__hop-RadioField___RAV19[data-disabled] {
3321
+ --description-color: var(--hop-RadioField-description-color-disabled);
3322
+ }
3323
+ .RadioField-module__hop-RadioField--sm___Z2a5J {
3324
+ --row-gap: var(--hop-RadioField-sm-row-gap);
3325
+ --description-margin-inline-start: var(--hop-RadioField-description-sm-margin-inline-start);
3326
+ }
3327
+ .RadioField-module__hop-RadioField--md___GeCMi {
3328
+ --row-gap: var(--hop-RadioField-md-row-gap);
3329
+ --description-margin-inline-start: var(--hop-RadioField-description-md-margin-inline-start);
3330
+ }
3331
+ .RadioField-module__hop-RadioField__description___Y7cUM {
3332
+ order: 2;
3333
+ margin-inline-start: var(--description-margin-inline-start, var(--hop-RadioField-description-md-margin-inline-start));
3334
+ color: var(--description-color);
3335
+ }
3336
+ .RadioField-module__hop-RadioField__radio___XYtjJ {
3337
+ order: 1;
3338
+ }
3339
+
3340
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/radio/src/RadioGroup.module.css/#css-module-data */
3341
+ .RadioGroup-module__hop-RadioGroup___ydYgr {
3342
+ --hop-RadioGroup-align-items: flex-start;
3343
+ --hop-RadioGroup-justify-content: flex-start;
3344
+ --hop-RadioGroup-bordered-border-color: var(--hop-neutral-border-weak);
3345
+ --hop-RadioGroup-sm-column-gap: var(--hop-space-inline-sm);
3346
+ --hop-RadioGroup-sm-row-gap: var(--hop-space-stack-sm);
3347
+ --hop-RadioGroup-list-sm-column-gap: var(--hop-space-inline-sm);
3348
+ --hop-RadioGroup-list-sm-row-gap: var(--hop-space-stack-sm);
3349
+ --hop-RadioGroup-bordered-sm-padding: var(--hop-space-inset-sm);
3350
+ --hop-RadioGroup-bordered-sm-column-gap: var(--hop-space-inline-sm);
3351
+ --hop-RadioGroup-bordered-sm-row-gap: var(--hop-space-stack-sm);
3352
+ --hop-RadioGroup-list-bordered-sm-column-gap: 0;
3353
+ --hop-RadioGroup-list-bordered-sm-row-gap: 0;
3354
+ --hop-RadioGroup-md-column-gap: var(--hop-space-inline-md);
3355
+ --hop-RadioGroup-md-row-gap: var(--hop-space-stack-md);
3356
+ --hop-RadioGroup-list-md-column-gap: var(--hop-space-inline-md);
3357
+ --hop-RadioGroup-list-md-row-gap: var(--hop-space-stack-md);
3358
+ --hop-RadioGroup-bordered-md-padding: var(--hop-space-inset-md);
3359
+ --hop-RadioGroup-bordered-md-column-gap: var(--hop-space-inline-sm);
3360
+ --hop-RadioGroup-bordered-md-row-gap: var(--hop-space-stack-sm);
3361
+ --hop-RadioGroup-list-bordered-md-column-gap: 0;
3362
+ --hop-RadioGroup-list-bordered-md-row-gap: 0;
3363
+ --hop-RadioGroup-vertical-flex-direction: column;
3364
+ --hop-RadioGroup-horizontal-flex-direction: row;
3365
+ --radio-border-size: 0.0625rem;
3366
+ --radio-border-color: var(--hop-neutral-border-weak);
3367
+ --flex-direction: var(--hop-RadioGroup-vertical-flex-direction);
3368
+ --align-items: var(--hop-RadioGroup-align-items);
3369
+ --justify-content: var(--hop-RadioGroup-justify-content);
3370
+ --flex-wrap: wrap;
3371
+ --inline-size: max-content;
3372
+ display: flex;
3373
+ flex-direction: column;
3374
+ gap: var(--row-gap, var(--hop-space-stack-md)) var(--column-gap, var(--hop-space-inline-md));
3375
+ align-items: var(--align-items);
3376
+ justify-content: var(--justify-content);
3377
+ box-sizing: border-box;
3378
+ inline-size: var(--inline-size);
3379
+ max-inline-size: 100%;
3380
+ }
3381
+ .RadioGroup-module__hop-RadioGroup--bordered___GVWZO {
3382
+ --list-border: var(--radio-border-size) solid var(--radio-border-color);
3383
+ --list-border-radius: var(--hop-shape-rounded-md);
3384
+ }
3385
+ .RadioGroup-module__hop-RadioGroup--sm___0Y-FF {
3386
+ --column-gap: var(--hop-RadioGroup-sm-column-gap);
3387
+ --row-gap: var(--hop-RadioGroup-sm-row-gap);
3388
+ --list-column-gap: var(--hop-RadioGroup-list-sm-column-gap);
3389
+ --list-row-gap: var(--hop-RadioGroup-list-sm-row-gap);
3390
+ }
3391
+ .RadioGroup-module__hop-RadioGroup--md___mccGP {
3392
+ --column-gap: var(--hop-RadioGroup-md-column-gap);
3393
+ --row-gap: var(--hop-RadioGroup-md-row-gap);
3394
+ --list-column-gap: var(--hop-RadioGroup-list-md-column-gap);
3395
+ --list-row-gap: var(--hop-RadioGroup-list-md-row-gap);
3396
+ }
3397
+ .RadioGroup-module__hop-RadioGroup--bordered___GVWZO.RadioGroup-module__hop-RadioGroup--sm___0Y-FF {
3398
+ --radio-padding: var(--hop-RadioGroup-bordered-sm-padding);
3399
+ --column-gap: var(--hop-RadioGroup-bordered-sm-column-gap);
3400
+ --row-gap: var(--hop-RadioGroup-bordered-sm-row-gap);
3401
+ --list-column-gap: var(--hop-RadioGroup-list-bordered-sm-column-gap);
3402
+ --list-row-gap: var(--hop-RadioGroup-list-bordered-sm-row-gap);
3403
+ }
3404
+ .RadioGroup-module__hop-RadioGroup--bordered___GVWZO.RadioGroup-module__hop-RadioGroup--md___mccGP {
3405
+ --radio-padding: var(--hop-RadioGroup-bordered-md-padding);
3406
+ --column-gap: var(--hop-RadioGroup-bordered-md-column-gap);
3407
+ --row-gap: var(--hop-RadioGroup-bordered-md-row-gap);
3408
+ --list-column-gap: var(--hop-RadioGroup-list-bordered-md-column-gap);
3409
+ --list-row-gap: var(--hop-RadioGroup-list-bordered-md-row-gap);
3410
+ }
3411
+ .RadioGroup-module__hop-RadioGroup___ydYgr[data-orientation=horizontal] {
3412
+ --flex-direction: var(--hop-RadioGroup-horizontal-flex-direction);
3413
+ }
3414
+ .RadioGroup-module__hop-RadioGroup--bordered___GVWZO[data-orientation=horizontal] {
3415
+ --flex-wrap: nowrap;
3416
+ }
3417
+ .RadioGroup-module__hop-RadioGroup___ydYgr > .RadioGroup-module__hop-RadioGroup__label___-qCbZ {
3418
+ order: 1;
3419
+ }
3420
+ .RadioGroup-module__hop-RadioGroup__list___DSncc {
3421
+ display: flex;
3422
+ flex-flow: var(--flex-direction) var(--flex-wrap);
3423
+ gap: var(--list-row-gap, var(--hop-space-stack-md)) var(--list-column-gap, var(--hop-space-inline-md));
3424
+ order: 2;
3425
+ box-sizing: border-box;
3426
+ inline-size: var(--inline-size);
3427
+ max-inline-size: 100%;
3428
+ border: var(--list-border, none);
3429
+ border-radius: var(--list-border-radius, 0);
3430
+ }
3431
+ .RadioGroup-module__hop-RadioGroup__list___DSncc > .RadioGroup-module__hop-RadioGroup__radio___ucqLt {
3432
+ position: relative;
3433
+ flex: 0 1 auto;
3434
+ align-content: start;
3435
+ inline-size: auto;
3436
+ min-inline-size: 0;
3437
+ padding: var(--radio-padding, 0);
3438
+ }
3439
+ .RadioGroup-module__hop-RadioGroup--bordered___GVWZO .RadioGroup-module__hop-RadioGroup__list___DSncc > .RadioGroup-module__hop-RadioGroup__radio___ucqLt ~ .RadioGroup-module__hop-RadioGroup__radio___ucqLt::before {
3440
+ content: "";
3441
+ position: absolute;
3442
+ display: block;
3443
+ }
3444
+ .RadioGroup-module__hop-RadioGroup--bordered___GVWZO[data-orientation=vertical] .RadioGroup-module__hop-RadioGroup__list___DSncc > .RadioGroup-module__hop-RadioGroup__radio___ucqLt ~ .RadioGroup-module__hop-RadioGroup__radio___ucqLt::before {
3445
+ inset-block-start: 0;
3446
+ inset-inline: 0;
3447
+ border-block-start: var(--list-border, none);
3448
+ }
3449
+ .RadioGroup-module__hop-RadioGroup--bordered___GVWZO[data-orientation=horizontal] .RadioGroup-module__hop-RadioGroup__list___DSncc > .RadioGroup-module__hop-RadioGroup__radio___ucqLt ~ .RadioGroup-module__hop-RadioGroup__radio___ucqLt::before {
3450
+ inset-block: 0;
3451
+ inset-inline-start: 0;
3452
+ border-inline-start: var(--list-border, none);
3453
+ }
3454
+ .RadioGroup-module__hop-RadioGroup___ydYgr > .RadioGroup-module__hop-RadioGroup__error-message___OWDLe,
3455
+ .RadioGroup-module__hop-RadioGroup___ydYgr > .RadioGroup-module__hop-RadioGroup__helper-message___XhqFy {
3456
+ order: 3;
3457
+ }
3458
+
3459
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/list-box/src/ListBoxItemSkeleton.module.css/#css-module-data */
3460
+ .ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton___rObah {
3461
+ --hop-ListBoxItemSkeleton-background-color: var(--hop-neutral-surface-weak);
3462
+ --hop-ListBoxItemSkeleton-background-color-dark: var(--hop-neutral-surface-weak-hover);
3463
+ --hop-ListBoxItemSkeleton-border-radius: var(--hop-shape-rounded-md);
3464
+ --hop-ListBoxItemSkeleton-animation-duration: 1.4s;
3465
+ --hop-ListBoxItemSkeleton-animation-reduced-motion-duration: 3.4s;
3466
+ --hop-ListBoxItemSkeleton-linear-gradient:
3467
+ linear-gradient(
3468
+
3469
+ 90deg,
3470
+ var(--hop-ListBoxItemSkeleton-background-color) 25%,
3471
+ var(--hop-ListBoxItemSkeleton-background-color-dark) 37%,
3472
+ var(--hop-ListBoxItemSkeleton-background-color-dark) 63%,
3473
+ var(--hop-ListBoxItemSkeleton-background-color) 100% );
3474
+ --hop-ListBoxItemSkeleton-xs-height: 1.25rem;
3475
+ --hop-ListBoxItemSkeleton-sm-height: 1.25rem;
3476
+ --hop-ListBoxItemSkeleton-md-height: 1.25rem;
3477
+ --hop-ListBoxItemSkeleton-lg-height: 1.5rem;
3478
+ --animation-duration: var(--hop-ListBoxItemSkeleton-animation-duration);
3479
+ grid-area: label;
3480
+ box-sizing: border-box;
3481
+ block-size: var(--height);
3482
+ background-color: var(--hop-ListBoxItemSkeleton-background-color);
3483
+ background-image: var(--hop-ListBoxItemSkeleton-linear-gradient);
3484
+ background-size: 400% 100%;
3485
+ border-radius: var(--hop-ListBoxItemSkeleton-border-radius);
3486
+ animation-name: ListBoxItemSkeleton-module__placeholder-shimmer___-NuVJ;
3487
+ animation-duration: var(--animation-duration);
3488
+ animation-timing-function: ease-in-out;
3489
+ animation-fill-mode: forwards;
3490
+ animation-iteration-count: infinite;
3491
+ @media (prefers-reduced-motion: reduce) {
3492
+ --animation-duration: var(--hop-ListBoxItemSkeleton-animation-reduced-motion-duration);
3493
+ }
3494
+ }
3495
+ .ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--xs___iG7AV {
3496
+ --height: var(--hop-ListBoxItemSkeleton-xs-height);
3497
+ }
3498
+ .ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--sm___RTYn- {
3499
+ --height: var(--hop-ListBoxItemSkeleton-sm-height);
3500
+ }
3501
+ .ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--md___79v-l {
3502
+ --height: var(--hop-ListBoxItemSkeleton-md-height);
3503
+ }
3504
+ .ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--lg___oDs-0 {
3505
+ --height: var(--hop-ListBoxItemSkeleton-lg-height);
3506
+ }
3507
+ @keyframes ListBoxItemSkeleton-module__placeholder-shimmer___-NuVJ {
3508
+ 0% {
3509
+ background-position: 125% 50%;
3510
+ }
3511
+ 100% {
3512
+ background-position: -25% 50%;
3513
+ }
3514
+ }
3515
+
3516
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/list-box/src/ListBoxItem.module.css/#css-module-data */
3517
+ .ListBoxItem-module__hop-ListBoxItem___BJFwm {
3518
+ --hop-ListBoxItem-background-color: transparent;
3519
+ --hop-ListBoxItem-border-radius: var(--hop-shape-rounded-md);
3520
+ --hop-ListBoxItem-text-color: var(--hop-neutral-text);
3521
+ --hop-ListBoxItem-icon-color: var(--hop-neutral-icon);
3522
+ --hop-ListBoxItem-outline-size: 0.125rem;
3523
+ --hop-ListBoxItem-outline-color: var(--hop-primary-border-focus);
3524
+ --hop-ListBoxItem-row-gap: var(--hop-space-stack-xs);
3525
+ --hop-ListBoxItem-column-gap: var(--hop-space-inline-sm);
3526
+ --hop-ListBoxItem-indicator-inline-size: calc( 1rem + var(--hop-ListBoxItem-column-gap));
3527
+ --hop-ListBoxItem-description-text-color: var(--hop-neutral-text-weak);
3528
+ --hop-ListBoxItem-grid-template-areas: "indicator avatar icon label end-icon badge";
3529
+ --hop-ListBoxItem-grid-template-areas-with-description: "indicator avatar icon label end-icon badge" ". . . description description description";
3530
+ --hop-ListBoxItem-grid-template-areas-loading: "label";
3531
+ --hop-ListBoxItem-grid-template-columns: var(--hop-ListBoxItem-indicator-inline-size) auto auto 1fr auto auto;
3532
+ --hop-ListBoxItem-grid-template-columns-not-selected: 0 auto auto 1fr auto auto;
3533
+ --hop-ListBoxItem-grid-template-columns-loading: 1fr;
3534
+ --hop-ListBoxItem-badge-margin-block: calc(-1 * (var(--hop-space-stack-xs) / 2));
3535
+ --hop-ListBoxItem-xs-padding-block: var(--hop-space-inset-xs);
3536
+ --hop-ListBoxItem-xs-padding-inline: var(--hop-space-inset-md);
3537
+ --hop-ListBoxItem-xs-min-height: 2rem;
3538
+ --hop-ListBoxItem-xs-avatar-margin-block: 0;
3539
+ --hop-ListBoxItem-xs-label-font-weight: var(--hop-body-sm-font-weight);
3540
+ --hop-ListBoxItem-xs-label-font-weight-selected: var(--hop-body-sm-medium-font-weight);
3541
+ --hop-ListBoxItem-sm-padding-block: var(--hop-space-inset-sm);
3542
+ --hop-ListBoxItem-sm-padding-inline: var(--hop-space-inset-md);
3543
+ --hop-ListBoxItem-sm-min-height: 2.5rem;
3544
+ --hop-ListBoxItem-sm-avatar-margin-block: 0;
3545
+ --hop-ListBoxItem-sm-label-font-weight: var(--hop-body-sm-font-weight);
3546
+ --hop-ListBoxItem-sm-label-font-weight-selected: var(--hop-body-sm-medium-font-weight);
3547
+ --hop-ListBoxItem-md-padding-block: var(--hop-space-inset-md);
3548
+ --hop-ListBoxItem-md-padding-inline: var(--hop-space-inset-md);
3549
+ --hop-ListBoxItem-md-min-height: 3.5rem;
3550
+ --hop-ListBoxItem-md-avatar-margin-block: calc(-1 * var(--hop-space-stack-xs));
3551
+ --hop-ListBoxItem-md-label-font-weight: var(--hop-body-sm-font-weight);
3552
+ --hop-ListBoxItem-md-label-font-weight-selected: var(--hop-body-sm-medium-font-weight);
3553
+ --hop-ListBoxItem-lg-padding-block: var(--hop-space-inset-md);
3554
+ --hop-ListBoxItem-lg-padding-inline: var(--hop-space-inset-md);
3555
+ --hop-ListBoxItem-lg-min-height: 4rem;
3556
+ --hop-ListBoxItem-lg-avatar-margin-block: calc(-1 * var(--hop-space-stack-xs));
3557
+ --hop-ListBoxItem-lg-label-font-weight: var(--hop-body-md-font-weight);
3558
+ --hop-ListBoxItem-lg-label-font-weight-selected: var(--hop-body-md-medium-font-weight);
3559
+ --hop-ListBoxItem-background-color-hovered: var(--hop-neutral-surface-hover);
3560
+ --hop-ListBoxItem-text-color-hovered: var(--hop-neutral-text-hover);
3561
+ --hop-ListBoxItem-icon-color-hovered: var(--hop-neutral-icon-hover);
3562
+ --hop-ListBoxItem-background-color-pressed: var(--hop-neutral-surface-press);
3563
+ --hop-ListBoxItem-text-color-pressed: var(--hop-neutral-text-press);
3564
+ --hop-ListBoxItem-icon-color-pressed: var(--hop-neutral-icon-press);
3565
+ --hop-ListBoxItem-background-color-focused: var(--hop-neutral-surface-hover);
3566
+ --hop-ListBoxItem-text-color-focused: var(--hop-neutral-text-hover);
3567
+ --hop-ListBoxItem-icon-color-focused: var(--hop-neutral-icon-hover);
3568
+ --hop-ListBoxItem-background-color-selected: transparent;
3569
+ --hop-ListBoxItem-text-color-selected: var(--hop-neutral-text);
3570
+ --hop-ListBoxItem-icon-color-selected: var(--hop-neutral-icon);
3571
+ --hop-ListBoxItem-background-color-invalid: transparent;
3572
+ --hop-ListBoxItem-background-color-invalid-hovered: var(--hop-danger-surface-hover);
3573
+ --hop-ListBoxItem-background-color-invalid-pressed: var(--hop-danger-surface-press);
3574
+ --hop-ListBoxItem-background-color-invalid-focused: var(--hop-danger-surface-hover);
3575
+ --hop-ListBoxItem-background-color-invalid-selected: transparent;
3576
+ --hop-ListBoxItem-background-color-invalid-disabled: transparent;
3577
+ --hop-ListBoxItem-text-color-invalid: var(--hop-danger-text-weak);
3578
+ --hop-ListBoxItem-text-color-invalid-hovered: var(--hop-danger-text-strong);
3579
+ --hop-ListBoxItem-text-color-invalid-pressed: var(--hop-danger-text-strong);
3580
+ --hop-ListBoxItem-text-color-invalid-focused: var(--hop-danger-text-strong);
3581
+ --hop-ListBoxItem-text-color-invalid-selected: var(--hop-danger-text-weak);
3582
+ --hop-ListBoxItem-text-color-invalid-disabled: var(--hop-danger-text-disabled);
3583
+ --hop-ListBoxItem-icon-color-invalid: var(--hop-danger-icon-weak);
3584
+ --hop-ListBoxItem-icon-color-invalid-hovered: var(--hop-danger-icon-strong);
3585
+ --hop-ListBoxItem-icon-color-invalid-pressed: var(--hop-danger-icon-strong);
3586
+ --hop-ListBoxItem-icon-color-invalid-focused: var(--hop-danger-icon-strong);
3587
+ --hop-ListBoxItem-icon-color-invalid-selected: var(--hop-danger-icon-weak);
3588
+ --hop-ListBoxItem-icon-color-invalid-disabled: var(--hop-danger-icon-disabled);
3589
+ --hop-ListBoxItem-description-text-color-invalid-hovered: inherit;
3590
+ --hop-ListBoxItem-description-text-color-invalid-pressed: inherit;
3591
+ --hop-ListBoxItem-description-text-color-invalid-focused: inherit;
3592
+ --hop-ListBoxItem-background-color-disabled: transparent;
3593
+ --hop-ListBoxItem-text-color-disabled: var(--hop-neutral-text-disabled);
3594
+ --hop-ListBoxItem-icon-color-disabled: var(--hop-neutral-icon-disabled);
3595
+ --background-color: var(--hop-ListBoxItem-background-color);
3596
+ --text-color: var(--hop-ListBoxItem-text-color);
3597
+ --icon-color: var(--hop-ListBoxItem-icon-color);
3598
+ --outline: none;
3599
+ --cursor: default;
3600
+ --checkmark-opacity: 0;
3601
+ --description-text-color: var(--hop-ListBoxItem-description-text-color);
3602
+ --row-gap: 0;
3603
+ --grid-template-areas: var(--hop-ListBoxItem-grid-template-areas);
3604
+ --grid-template-columns: var(--hop-ListBoxItem-grid-template-columns);
3605
+ --checkmark-transition: opacity 0.2s ease-in-out .2s;
3606
+ cursor: var(--cursor);
3607
+ box-sizing: border-box;
3608
+ color: var(--text-color);
3609
+ background-color: var(--background-color);
3610
+ border-radius: var(--hop-ListBoxItem-border-radius);
3611
+ outline: var(--outline);
3612
+ outline-offset: calc(-1 * var(--hop-ListBoxItem-outline-size));
3613
+ }
3614
+ .ListBoxItem-module__hop-ListBoxItem--xs___C3DWZ {
3615
+ --padding-block: var(--hop-ListBoxItem-xs-padding-block);
3616
+ --padding-inline: var(--hop-ListBoxItem-xs-padding-inline);
3617
+ --min-height: var(--hop-ListBoxItem-xs-min-height);
3618
+ --avatar-margin-block: var(--hop-ListBoxItem-xs-avatar-margin-block);
3619
+ --label-font-weight: var(--hop-ListBoxItem-xs-label-font-weight);
3620
+ }
3621
+ .ListBoxItem-module__hop-ListBoxItem--sm___kkqrK {
3622
+ --padding-block: var(--hop-ListBoxItem-sm-padding-block);
3623
+ --padding-inline: var(--hop-ListBoxItem-sm-padding-inline);
3624
+ --min-height: var(--hop-ListBoxItem-sm-min-height);
3625
+ --avatar-margin-block: var(--hop-ListBoxItem-sm-avatar-margin-block);
3626
+ --label-font-weight: var(--hop-ListBoxItem-sm-label-font-weight);
3627
+ }
3628
+ .ListBoxItem-module__hop-ListBoxItem--md___WuaWQ {
3629
+ --padding-block: var(--hop-ListBoxItem-md-padding-block);
3630
+ --padding-inline: var(--hop-ListBoxItem-md-padding-inline);
3631
+ --min-height: var(--hop-ListBoxItem-md-min-height);
3632
+ --avatar-margin-block: var(--hop-ListBoxItem-md-avatar-margin-block);
3633
+ --label-font-weight: var(--hop-ListBoxItem-md-label-font-weight);
3634
+ }
3635
+ .ListBoxItem-module__hop-ListBoxItem--lg___IjSL2 {
3636
+ --padding-block: var(--hop-ListBoxItem-lg-padding-block);
3637
+ --padding-inline: var(--hop-ListBoxItem-lg-padding-inline);
3638
+ --min-height: var(--hop-ListBoxItem-lg-min-height);
3639
+ --avatar-margin-block: var(--hop-ListBoxItem-lg-avatar-margin-block);
3640
+ --label-font-weight: var(--hop-ListBoxItem-lg-label-font-weight);
3641
+ }
3642
+ .ListBoxItem-module__hop-ListBoxItem___BJFwm[data-selection-mode] {
3643
+ --cursor: pointer;
3644
+ }
3645
+ .ListBoxItem-module__hop-ListBoxItem___BJFwm:not([data-selection-mode]) {
3646
+ --grid-template-columns: var(--hop-ListBoxItem-grid-template-columns-not-selected);
3647
+ }
3648
+ .ListBoxItem-module__hop-ListBoxItem__inner___FXwnT:not([data-list-has-selection]):has(.ListBoxItem-module__hop-ListBoxItem__checkmark___4i-g1) {
3649
+ --grid-template-columns: var(--hop-ListBoxItem-grid-template-columns-not-selected);
3650
+ }
3651
+ .ListBoxItem-module__hop-ListBoxItem__inner___FXwnT[data-list-has-selection-end]:has(.ListBoxItem-module__hop-ListBoxItem__checkmark___4i-g1) {
3652
+ --checkmark-transition: none;
3653
+ }
3654
+ .ListBoxItem-module__hop-ListBoxItem___BJFwm[data-selected] {
3655
+ --background-color: var(--hop-ListBoxItem-background-color-selected);
3656
+ --text-color: var(--hop-ListBoxItem-text-color-selected);
3657
+ --icon-color: var(--hop-ListBoxItem-icon-color-selected);
3658
+ --checkmark-opacity: 1;
3659
+ }
3660
+ .ListBoxItem-module__hop-ListBoxItem--xs___C3DWZ[data-selected] {
3661
+ --label-font-weight: var(--hop-ListBoxItem-xs-label-font-weight-selected);
3662
+ }
3663
+ .ListBoxItem-module__hop-ListBoxItem--sm___kkqrK[data-selected] {
3664
+ --label-font-weight: var(--hop-ListBoxItem-sm-label-font-weight-selected);
3665
+ }
3666
+ .ListBoxItem-module__hop-ListBoxItem--md___WuaWQ[data-selected] {
3667
+ --label-font-weight: var(--hop-ListBoxItem-md-label-font-weight-selected);
3668
+ }
3669
+ .ListBoxItem-module__hop-ListBoxItem--lg___IjSL2[data-selected] {
3670
+ --label-font-weight: var(--hop-ListBoxItem-lg-label-font-weight-selected);
3671
+ }
3672
+ .ListBoxItem-module__hop-ListBoxItem___BJFwm[data-focus-visible] {
3673
+ --background-color: var(--hop-ListBoxItem-background-color-focused);
3674
+ --text-color: var(--hop-ListBoxItem-text-color-focused);
3675
+ --icon-color: var(--hop-ListBoxItem-icon-color-focused);
3676
+ --outline: var(--hop-ListBoxItem-outline-size) solid var(--hop-ListBoxItem-outline-color);
3677
+ }
3678
+ .ListBoxItem-module__hop-ListBoxItem___BJFwm[data-hovered] {
3679
+ --background-color: var(--hop-ListBoxItem-background-color-hovered);
3680
+ --text-color: var(--hop-ListBoxItem-text-color-hovered);
3681
+ --icon-color: var(--hop-ListBoxItem-icon-color-hovered);
3682
+ }
3683
+ .ListBoxItem-module__hop-ListBoxItem___BJFwm[data-pressed] {
3684
+ --background-color: var(--hop-ListBoxItem-background-color-pressed);
3685
+ --text-color: var(--hop-ListBoxItem-text-color-pressed);
3686
+ --icon-color: var(--hop-ListBoxItem-icon-color-pressed);
3687
+ }
3688
+ .ListBoxItem-module__hop-ListBoxItem___BJFwm[data-disabled] {
3689
+ --background-color: var(--hop-ListBoxItem-background-color-disabled);
3690
+ --text-color: var(--hop-ListBoxItem-text-color-disabled);
3691
+ --icon-color: var(--hop-ListBoxItem-icon-color-disabled);
3692
+ --description-text-color: var(--hop-ListBoxItem-text-color-disabled);
3693
+ --cursor: not-allowed;
3694
+ }
3695
+ .ListBoxItem-module__hop-ListBoxItem___BJFwm[data-invalid] {
3696
+ --background-color: var(--hop-ListBoxItem-background-color-invalid);
3697
+ --text-color: var(--hop-ListBoxItem-text-color-invalid);
3698
+ --icon-color: var(--hop-ListBoxItem-icon-color-invalid);
3699
+ }
3700
+ .ListBoxItem-module__hop-ListBoxItem___BJFwm[data-invalid][data-selected] {
3701
+ --background-color: var(--hop-ListBoxItem-background-color-invalid-selected);
3702
+ --text-color: var(--hop-ListBoxItem-text-color-invalid-selected);
3703
+ --icon-color: var(--hop-ListBoxItem-icon-color-invalid-selected);
3704
+ }
3705
+ .ListBoxItem-module__hop-ListBoxItem___BJFwm[data-invalid][data-focus-visible] {
3706
+ --background-color: var(--hop-ListBoxItem-background-color-invalid-focused);
3707
+ --text-color: var(--hop-ListBoxItem-text-color-invalid-focused);
3708
+ --icon-color: var(--hop-ListBoxItem-icon-color-invalid-focused);
3709
+ --description-text-color: var(--hop-ListBoxItem-description-text-color-invalid-focused);
3710
+ }
3711
+ .ListBoxItem-module__hop-ListBoxItem___BJFwm[data-invalid][data-hovered] {
3712
+ --background-color: var(--hop-ListBoxItem-background-color-invalid-hovered);
3713
+ --text-color: var(--hop-ListBoxItem-text-color-invalid-hovered);
3714
+ --icon-color: var(--hop-ListBoxItem-icon-color-invalid-hovered);
3715
+ --description-text-color: var(--hop-ListBoxItem-description-text-color-invalid-hovered);
3716
+ }
3717
+ .ListBoxItem-module__hop-ListBoxItem___BJFwm[data-invalid][data-pressed] {
3718
+ --background-color: var(--hop-ListBoxItem-background-color-invalid-pressed);
3719
+ --text-color: var(--hop-ListBoxItem-text-color-invalid-pressed);
3720
+ --icon-color: var(--hop-ListBoxItem-icon-color-invalid-pressed);
3721
+ --description-text-color: var(--hop-ListBoxItem-description-text-color-invalid-pressed);
3722
+ }
3723
+ .ListBoxItem-module__hop-ListBoxItem___BJFwm[data-invalid][data-disabled] {
3724
+ --background-color: var(--hop-ListBoxItem-background-color-invalid-disabled);
3725
+ --text-color: var(--hop-ListBoxItem-text-color-invalid-disabled);
3726
+ --icon-color: var(--hop-ListBoxItem-icon-color-invalid-disabled);
3727
+ }
3728
+ .ListBoxItem-module__hop-ListBoxItem___BJFwm:has(.ListBoxItem-module__hop-ListBoxItem__description___yaCZn) {
3729
+ --row-gap: var(--hop-ListBoxItem-row-gap);
3730
+ --grid-template-areas: var(--hop-ListBoxItem-grid-template-areas-with-description);
3731
+ }
3732
+ .ListBoxItem-module__hop-ListBoxItem___BJFwm[data-loading] {
3733
+ --grid-template-areas: var(--hop-ListBoxItem-grid-template-areas-loading);
3734
+ --grid-template-columns: var(--hop-ListBoxItem-grid-template-columns-loading);
3735
+ }
3736
+ .ListBoxItem-module__hop-ListBoxItem__inner___FXwnT {
3737
+ display: grid;
3738
+ grid-template-areas: var(--grid-template-areas);
3739
+ grid-template-columns: var(--grid-template-columns);
3740
+ row-gap: var(--row-gap);
3741
+ align-items: center;
3742
+ box-sizing: border-box;
3743
+ min-block-size: var(--min-height);
3744
+ padding-block: var(--padding-block);
3745
+ padding-inline: var(--padding-inline);
3746
+ transition: grid-template-columns .3s ease-in-out;
3747
+ }
3748
+ .ListBoxItem-module__hop-ListBoxItem__checkmark___4i-g1 {
3749
+ grid-area: indicator;
3750
+ margin-inline-end: var(--hop-ListBoxItem-column-gap);
3751
+ color: var(--icon-color);
3752
+ opacity: var(--checkmark-opacity);
3753
+ transition: var(--checkmark-transition);
3754
+ }
3755
+ .ListBoxItem-module__hop-ListBoxItem__radio___kSSTz,
3756
+ .ListBoxItem-module__hop-ListBoxItem__checkbox___0uY-0 {
3757
+ pointer-events: none;
3758
+ user-select: none;
3759
+ grid-area: indicator;
3760
+ margin-inline-end: var(--hop-ListBoxItem-column-gap);
3761
+ }
3762
+ .ListBoxItem-module__hop-ListBoxItem__avatar___tr3eK {
3763
+ grid-area: avatar;
3764
+ margin-block: var(--avatar-margin-block, 0);
3765
+ margin-inline-end: var(--hop-ListBoxItem-column-gap);
3766
+ }
3767
+ .ListBoxItem-module__hop-ListBoxItem__icon-list___EIeaN,
3768
+ .ListBoxItem-module__hop-ListBoxItem__icon___sNOpK {
3769
+ grid-area: icon;
3770
+ flex: 0 0 auto;
3771
+ margin-inline-end: var(--hop-ListBoxItem-column-gap);
3772
+ color: var(--icon-color);
3773
+ }
3774
+ .ListBoxItem-module__hop-ListBoxItem__label___-oyrC {
3775
+ overflow: hidden;
3776
+ grid-area: label;
3777
+ min-inline-size: 0;
3778
+ font-weight: var(--label-font-weight);
3779
+ text-overflow: ellipsis;
3780
+ white-space: nowrap;
3781
+ }
3782
+ .ListBoxItem-module__hop-ListBoxItem__end-icon-list___kT6s1,
3783
+ .ListBoxItem-module__hop-ListBoxItem__end-icon___qJatC {
3784
+ grid-area: end-icon;
3785
+ margin-inline-start: var(--hop-ListBoxItem-column-gap);
3786
+ color: var(--icon-color);
3787
+ }
3788
+ .ListBoxItem-module__hop-ListBoxItem__badge___C1SqW {
3789
+ grid-area: badge;
3790
+ margin-block: var(--hop-ListBoxItem-badge-margin-block);
3791
+ margin-inline-start: var(--hop-ListBoxItem-column-gap);
3792
+ }
3793
+ .ListBoxItem-module__hop-ListBoxItem__description___yaCZn {
3794
+ overflow: hidden;
3795
+ display: -webkit-box;
3796
+ grid-area: description;
3797
+ -webkit-box-orient: vertical;
3798
+ -webkit-line-clamp: 2;
3799
+ line-clamp: 2;
3800
+ color: var(--description-text-color);
3801
+ }
3802
+
3803
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/list-box/src/ListBox.module.css/#css-module-data */
3804
+ .ListBox-module__hop-ListBox___lYzDi {
3805
+ --hop-ListBox-background-color: var(--hop-neutral-surface);
3806
+ --hop-ListBox-border-color: var(--hop-neutral-border-weak);
3807
+ --hop-ListBox-border-radius: var(--hop-shape-rounded-md);
3808
+ --hop-ListBox-border-size: 0.0625rem;
3809
+ --hop-ListBox-padding-inline: var(--hop-space-inset-sm);
3810
+ --hop-ListBox-padding-block: var(--hop-space-inset-sm);
3811
+ --hop-ListBox-min-width: 13.625rem;
3812
+ --hop-ListBox-max-width: 18rem;
3813
+ --hop-ListBox-width: max-content;
3814
+ --hop-ListBox-fluid-width: 100%;
3815
+ --hop-ListBox-fluid-max-width: 100%;
3816
+ --hop-ListBox-section-padding-block: var(--hop-ListBox-padding-block);
3817
+ --hop-ListBox-section-padding-inline: var(--hop-ListBox-padding-inline);
3818
+ --hop-ListBox-section-margin-block: var(--hop-space-stack-sm);
3819
+ --hop-ListBox-section-margin-inline: calc(-1 * var(--hop-ListBox-padding-inline));
3820
+ --hop-ListBox-section-border-size: var(--hop-ListBox-border-size);
3821
+ --hop-ListBox-section-border-color: var(--hop-ListBox-border-color);
3822
+ --hop-ListBox-section-header-color: var(--hop-neutral-text-weak);
3823
+ --hop-ListBox-section-header-font-family: var(--hop-overline-font-family);
3824
+ --hop-ListBox-section-header-font-size: var(--hop-overline-font-size);
3825
+ --hop-ListBox-section-header-font-weight: var(--hop-overline-font-weight);
3826
+ --hop-ListBox-section-header-letter-spacing: 0.015rem;
3827
+ --hop-ListBox-section-header-line-height: var(--hop-overline-line-height);
3828
+ --hop-ListBox-section-header-text-transform: uppercase;
3829
+ --hop-ListBox-section-header-padding: var(--hop-space-inset-stretch-sm);
3830
+ --hop-ListBox-section-header-top-offset: var(--hop-overline-top-offset);
3831
+ --hop-ListBox-section-header-bottom-offset: var(--hop-overline-bottom-offset);
3832
+ --max-width: var(--hop-ListBox-max-width);
3833
+ --width: var(--hop-ListBox-width);
3834
+ --section-padding-block-start: var(--hop-ListBox-section-padding-block);
3835
+ --section-padding-block-end: var(--hop-ListBox-section-padding-block);
3836
+ --section-margin-block-start: 0;
3837
+ --section-margin-block-end: 0;
3838
+ --section-border-block-start: 0;
3839
+ --section-border-block-end: var(--hop-ListBox-section-border-size) solid var(--hop-ListBox-section-border-color);
3840
+ overflow: hidden auto;
3841
+ box-sizing: border-box;
3842
+ inline-size: var(--width);
3843
+ min-inline-size: var(--hop-ListBox-min-width);
3844
+ max-inline-size: var(--max-width);
3845
+ padding-block: var(--hop-ListBox-padding-block);
3846
+ padding-inline: var(--hop-ListBox-padding-inline);
3847
+ background-color: var(--hop-ListBox-background-color);
3848
+ border: var(--hop-ListBox-border-size) solid var(--hop-ListBox-border-color);
3849
+ border-radius: var(--hop-ListBox-border-radius);
3850
+ }
3851
+ .ListBox-module__hop-ListBox--fluid___s8oHK {
3852
+ --max-width: var(--hop-ListBox-fluid-max-width);
3853
+ --width: var(--hop-ListBox-fluid-width);
3854
+ }
3855
+ .ListBox-module__hop-ListBox__section___dSbP6 {
3856
+ margin-block: var(--section-margin-block-start) var(--section-margin-block-end);
3857
+ margin-inline: var(--hop-ListBox-section-margin-inline);
3858
+ padding-block: var(--section-padding-block-start) var(--section-padding-block-end);
3859
+ padding-inline: var(--hop-ListBox-section-padding-inline);
3860
+ border-block-start: var(--section-border-block-start);
3861
+ border-block-end: var(--section-border-block-end);
3862
+ }
3863
+ .ListBox-module__hop-ListBox__item___-NndN + .ListBox-module__hop-ListBox__section___dSbP6 {
3864
+ --section-margin-block-start: var(--hop-ListBox-section-margin-block);
3865
+ --section-border-block-start: var(--hop-ListBox-section-border-size) solid var(--hop-ListBox-section-border-color);
3866
+ }
3867
+ .ListBox-module__hop-ListBox__section___dSbP6:has(+ .ListBox-module__hop-ListBox__item___-NndN) {
3868
+ --section-margin-block-end: var(--hop-ListBox-section-margin-block);
3869
+ }
3870
+ .ListBox-module__hop-ListBox__section___dSbP6:first-child {
3871
+ --section-padding-block-start: 0;
3872
+ }
3873
+ .ListBox-module__hop-ListBox__section___dSbP6:last-child {
3874
+ --section-padding-block-end: 0;
3875
+ --section-border-block-end: 0;
3876
+ }
3877
+ .ListBox-module__hop-ListBox__section-header___OPwVg {
3878
+ margin: 0;
3879
+ padding: var(--hop-ListBox-section-header-padding);
3880
+ font-family: var(--hop-ListBox-section-header-font-family);
3881
+ font-size: var(--hop-ListBox-section-header-font-size);
3882
+ font-weight: var(--hop-ListBox-section-header-font-weight);
3883
+ line-height: var(--hop-ListBox-section-header-line-height);
3884
+ color: var(--hop-ListBox-section-header-color);
3885
+ text-transform: var(--hop-ListBox-section-header-text-transform);
3886
+ letter-spacing: var(--hop-ListBox-section-header-letter-spacing);
3887
+ }
3888
+ .ListBox-module__hop-ListBox__section-header___OPwVg::before,
3889
+ .ListBox-module__hop-ListBox__section-header___OPwVg::after {
3890
+ content: "";
3891
+ display: block;
3892
+ box-sizing: border-box;
3893
+ inline-size: 0;
3894
+ block-size: 0;
3895
+ }
3896
+ .ListBox-module__hop-ListBox__section-header___OPwVg::before {
3897
+ margin-block-end: var(--hop-ListBox-section-header-bottom-offset);
3898
+ }
3899
+ .ListBox-module__hop-ListBox__section-header___OPwVg::after {
3900
+ margin-block-start: var(--hop-ListBox-section-header-top-offset);
3901
+ }
3902
+
3903
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/overlays/popover/src/Popover.module.css/#css-module-data */
3904
+ :where(.Popover-module__hop-Popover___26umq *) {
3905
+ font-family: var(--font-family);
3906
+ font-size: var(--font-size);
3907
+ font-weight: var(--font-weight);
3908
+ line-height: var(--line-height);
3909
+ outline: none;
3910
+ }
3911
+ .Popover-module__hop-Popover___26umq {
3912
+ --hop-Popover-max-inline-width: calc(100% - (var(--container-padding) * 2));
3913
+ --hop-Popover-inline-width: 25rem;
3914
+ --hop-Popover-dropdown-inline-width: var(--trigger-width);
3915
+ --hop-Popover-combo-box-dropdown-inline-width: var(--custom-trigger-width);
3916
+ --hop-Popover-dropdown-auto-inline-width: auto;
3917
+ --width: var(--hop-Popover-inline-width);
3918
+ --max-width: var(--hop-Popover-max-inline-width);
3919
+ display: flex;
3920
+ flex-direction: column;
3921
+ inline-size: var(--width);
3922
+ max-inline-size: var(--max-width);
3923
+ }
3924
+ .Popover-module__hop-Popover___26umq[data-trigger=Select] {
3925
+ --width: var(--hop-Popover-dropdown-inline-width);
3926
+ }
3927
+ .Popover-module__hop-Popover___26umq[data-trigger=ComboBox] {
3928
+ --width: var(--hop-Popover-combo-box-dropdown-inline-width);
3929
+ }
3930
+ .Popover-module__hop-Popover___26umq[data-auto-width] {
3931
+ --width: var(--hop-Popover-dropdown-auto-inline-width);
3932
+ }
3933
+ .Popover-module__hop-Popover___26umq[data-entering] {
3934
+ animation: Popover-module__fade___Rb7-0 0.25s;
3935
+ }
3936
+ .Popover-module__hop-Popover___26umq[data-exiting] {
3937
+ animation: Popover-module__fade___Rb7-0 0.25s reverse;
3938
+ }
3939
+ @keyframes Popover-module__fade___Rb7-0 {
3940
+ from {
3941
+ opacity: 0;
3942
+ }
3943
+ to {
3944
+ opacity: 1;
3945
+ }
3946
+ }
3947
+ .Popover-module__hop-Popover__wrapper___uZgAA {
3948
+ display: flex;
3949
+ flex: 1 1 auto;
3950
+ flex-direction: column;
3951
+ min-block-size: 0;
3952
+ }
3953
+ .Popover-module__hop-Popover__dialog___GGJWK,
3954
+ .Popover-module__hop-Popover__dropdown___jeauL {
3955
+ --hop-Popover-background: var(--hop-neutral-surface);
3956
+ --hop-Popover-font-family: var(--hop-body-sm-font-family);
3957
+ --hop-Popover-font-size: var(--hop-body-sm-font-size);
3958
+ --hop-Popover-font-weight: var(--hop-body-sm-font-weight);
3959
+ --hop-Popover-line-height: var(--hop-body-sm-line-height);
3960
+ --hop-Popover-color: var(--hop-neutral-text);
3961
+ --hop-Popover-grid-template: "header header" "content content" 1fr "footer action" / auto auto;
3962
+ --hop-Popover-column-gap: var(--hop-space-inset-sm);
3963
+ --hop-Popover-row-gap: var(--hop-space-stack-sm);
3964
+ --hop-Popover-dialog-padding: var(--hop-space-inset-md);
3965
+ --hop-Popover-dropdown-padding: 0;
3966
+ --hop-Popover-title-font-family: var(--hop-body-sm-font-family);
3967
+ --hop-Popover-title-font-weight: var(--hop-body-sm-semibold-font-weight);
3968
+ --hop-Popover-content-font-size: var(--hop-body-sm-font-size);
3969
+ --hop-Popover-content-font-family: var(--hop-body-sm-font-family);
3970
+ --hop-Popover-content-font-weight: var(--hop-body-sm-font-weight);
3971
+ --hop-Popover-content-line-height: var(--hop-body-sm-line-height);
3972
+ --hop-Popover-content-color: var(--hop-neutral-text-weak);
3973
+ --hop-Popover-footer-font-size: var(--hop-body-sm-font-size);
3974
+ --hop-Popover-footer-line-height: var(--hop-body-sm-line-height);
3975
+ --hop-Popover-footer-link-color: var(--hop-primary-text);
3976
+ --hop-Popover-footer-margin: var(--hop-space-stack-md) 0 0;
3977
+ --hop-Popover-border: 0.0625rem solid var(--hop-neutral-border-weak);
3978
+ --hop-Popover-border-radius: var(--hop-shape-rounded-md);
3979
+ --hop-Popover-box-shadow: var(--hop-elevation-lifted);
3980
+ --hop-Popover-dropdown-grid-template: "header" "content" 1fr "footer" / auto;
3981
+ --hop-Popover-list-box-dropdown-max-height: 18.75rem;
3982
+ --hop-Popover-footer-dropdown-margin: var(--hop-Popover-dropdown-padding) calc(-1 * var(--hop-Popover-dropdown-padding)) calc(-1 * var(--hop-Popover-dropdown-padding));
3983
+ --hop-Popover-footer-dropdown-footer-padding: var(--hop-space-inset-sm);
3984
+ --hop-Popover-footer-dropdown-footer-border-top: 0.0625rem solid var(--hop-neutral-border-weak);
3985
+ --font-family: var(--hop-Popover-font-family);
3986
+ --font-size: var(--hop-Popover-font-size);
3987
+ --font-weight: var(--hop-Popover-font-weight);
3988
+ --line-height: var(--hop-Popover-line-height);
3989
+ --grid-template: var(--hop-Popover-grid-template);
3990
+ --footer-margin: var(--hop-Popover-footer-margin);
3991
+ --footer-place-self: center start;
3992
+ display: grid;
3993
+ grid-template: var(--grid-template);
3994
+ box-sizing: border-box;
3995
+ min-block-size: 0;
3996
+ padding: var(--padding);
3997
+ background-color: var(--hop-Popover-background);
3998
+ border: var(--hop-Popover-border);
3999
+ border-radius: var(--hop-Popover-border-radius);
4000
+ box-shadow: var(--hop-Popover-box-shadow);
4001
+ }
4002
+ .Popover-module__hop-Popover__dropdown___jeauL {
4003
+ --footer-margin: var(--hop-Popover-footer-dropdown-margin);
4004
+ --footer-place-self: stretch;
4005
+ --grid-template: var(--hop-Popover-dropdown-grid-template);
4006
+ --padding: var(--hop-Popover-dropdown-padding);
4007
+ overflow: hidden;
4008
+ }
4009
+ .Popover-module__hop-Popover__dialog___GGJWK {
4010
+ --padding: var(--hop-Popover-dialog-padding);
4011
+ }
4012
+ .Popover-module__hop-Popover__title___Rlj3j {
4013
+ grid-area: header;
4014
+ color: var(--hop-Popover-color);
4015
+ }
4016
+ .Popover-module__hop-Popover__content___xnLU- {
4017
+ --font-size: var(--hop-Popover-content-font-size);
4018
+ --line-height: var(--hop-Popover-content-line-height);
4019
+ --font-family: var(--hop-Popover-content-font-family);
4020
+ --font-weight: var(--hop-Popover-content-font-weight);
4021
+ grid-area: content;
4022
+ margin-block: var(--hop-Popover-row-gap) 0;
4023
+ margin-inline: 0;
4024
+ padding: 0;
4025
+ color: var(--hop-Popover-content-color);
4026
+ }
4027
+ .Popover-module__hop-Popover___26umq:not(:has(.Popover-module__hop-Popover__title___Rlj3j)) {
4028
+ .Popover-module__hop-Popover__content___xnLU- {
4029
+ margin-block: 0 var(--hop-Popover-row-gap) 0;
4030
+ }
4031
+ }
4032
+ .Popover-module__hop-Popover__dropdown___jeauL .Popover-module__hop-Popover__list-box___zuSW3 {
4033
+ grid-area: content;
4034
+ inline-size: auto;
4035
+ min-inline-size: auto;
4036
+ max-inline-size: none;
4037
+ max-block-size: var(--hop-Popover-list-box-dropdown-max-height);
4038
+ border: none;
4039
+ }
4040
+ .Popover-module__hop-Popover__footer___0FFAg {
4041
+ --font-size: var(--hop-Popover-footer-font-size);
4042
+ --line-height: var(--hop-Popover-footer-line-height);
4043
+ grid-area: footer;
4044
+ place-self: var(--footer-place-self);
4045
+ margin: var(--footer-margin);
4046
+ color: var(--hop-Popover-color);
4047
+ }
4048
+ .Popover-module__hop-Popover__dropdown___jeauL .Popover-module__hop-Popover__footer___0FFAg {
4049
+ padding: var(--hop-Popover-footer-dropdown-footer-padding);
4050
+ border-block-start: var(--hop-Popover-footer-dropdown-footer-border-top);
4051
+ }
4052
+ .Popover-module__hop-Popover__actions___22QyU,
4053
+ .Popover-module__hop-Popover__action___1YRad {
4054
+ grid-area: action;
4055
+ justify-self: end;
4056
+ margin-block-start: var(--hop-Popover-row-gap);
4057
+ }
4058
+ .Popover-module__hop-Popover___26umq:has(.Popover-module__hop-Popover__actions___22QyU, .Popover-module__hop-Popover__action___1YRad) .Popover-module__hop-Popover__footer___0FFAg {
4059
+ margin-inline-end: var(--hop-Popover-column-gap);
4060
+ }
4061
+
4062
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/overlays/popover/src/PopoverBase.module.css/#css-module-data */
4063
+ .PopoverBase-module__hop-PopoverBase___31efu {
4064
+ --hop-Popover-background: var(--hop-neutral-surface);
4065
+ --hop-Popover-border: 0.0625rem solid var(--hop-neutral-border-weak);
4066
+ --hop-Popover-border-radius: var(--hop-shape-rounded-md);
4067
+ --hop-Popover-box-shadow: var(--hop-elevation-lifted);
4068
+ --hop-Popover-color: var(--hop-neutral-text);
4069
+ --hop-Popover-font-family: var(--hop-body-md-font-family);
4070
+ --hop-Popover-font-size: var(--hop-body-md-font-size);
4071
+ --hop-Popover-font-weight: var(--hop-body-md-font-weight);
4072
+ --hop-Popover-line-height: var(--hop-body-md-line-height);
4073
+ --hop-Popover-font-smoothing: antialiased;
4074
+ isolation: isolate;
4075
+ display: flex;
4076
+ flex-shrink: 0;
4077
+ align-items: center;
4078
+ box-sizing: border-box;
4079
+ max-inline-size: calc(100vw - 2* var(--container-padding, 0));
4080
+ font-family: var(--hop-Popover-font-family);
4081
+ font-size: var(--hop-Popover-font-size);
4082
+ font-weight: var(--hop-Popover-font-weight);
4083
+ -webkit-font-smoothing: var(--hop-Popover-font-smoothing);
4084
+ line-height: var(--hop-Popover-line-height);
4085
+ color: var(--hop-Popover-color);
4086
+ background-color: var(--hop-Popover-background);
4087
+ border: var(--hop-Popover-border);
4088
+ border-radius: var(--hop-Popover-border-radius);
4089
+ outline: none;
4090
+ box-shadow: var(--hop-Popover-box-shadow);
4091
+ transition: opacity var(--hop-easing-duration-2);
4092
+ }
4093
+ .PopoverBase-module__hop-PopoverBase___31efu[data-entering] {
4094
+ opacity: 0;
4095
+ }
4096
+ .PopoverBase-module__hop-PopoverBase___31efu[data-exiting] {
4097
+ pointer-events: none;
4098
+ opacity: 0;
4099
+ transition-timing-function: var(--hop-easing-productive);
4100
+ }
4101
+
4102
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/contextual-help/src/ContextualHelp.module.css/#css-module-data */
4103
+ .ContextualHelp-module__hop-ContextualHelp___DzLJ0 {
4104
+ --hop-ContextualHelp-block-size: fit-content;
4105
+ --hop-ContextualHelp-inline-size: fit-content;
4106
+ --hop-ContextualHelp-box-sizing: border-box;
4107
+ --hop-ContextualHelp-background-color: transparent;
4108
+ --hop-ContextualHelp-border: none;
4109
+ --hop-ContextualHelp-border-radius: var(--hop-shape-rounded-md);
4110
+ --hop-ContextualHelp-outline: none;
4111
+ --hop-ContextualHelp-outline-size: var(--hop-space-20);
4112
+ --hop-ContextualHelp-padding: var(--hop-space-20);
4113
+ --hop-ContextualHelp-color: var(--hop-neutral-text-weak);
4114
+ --hop-ContextualHelp-focus-ring-color: var(--hop-primary-border-focus);
4115
+ --hop-ContextualHelp-display: flex;
4116
+ --hop-ContextualHelp-aspect-ratio: 1;
4117
+ --hop-ContextualHelp-column-gap: 0;
4118
+ --hop-ContextualHelp-align-items: center;
4119
+ --hop-ContextualHelp-justify-content: center;
4120
+ display: var(--hop-ContextualHelp-display);
4121
+ column-gap: var(--hop-ContextualHelp-column-gap);
4122
+ align-items: var(--hop-ContextualHelp-align-items);
4123
+ justify-content: var(--hop-ContextualHelp-justify-content);
4124
+ box-sizing: var(--hop-ContextualHelp-box-sizing);
4125
+ aspect-ratio: var(--hop-ContextualHelp-aspect-ratio);
4126
+ inline-size: var(--hop-ContextualHelp-inline-size);
4127
+ block-size: var(--hop-ContextualHelp-block-size);
4128
+ padding: var( --hop-ContextualHelp-padding);
4129
+ color: var(--hop-ContextualHelp-color);
4130
+ background-color: var(--hop-ContextualHelp-background-color);
4131
+ border: var(--hop-ContextualHelp-border);
4132
+ border-radius: var(--hop-ContextualHelp-border-radius);
4133
+ outline: var(--hop-ContextualHelp-outline);
4134
+ }
4135
+ .ContextualHelp-module__hop-ContextualHelp___DzLJ0[data-focus-visible] {
4136
+ outline: var(--hop-ContextualHelp-outline-size) solid var(--hop-ContextualHelp-focus-ring-color);
4137
+ }
4138
+ .ContextualHelp-module__hop-ContextualHelp__popover___rV7qC {
4139
+ --hop-ContextualHelp__popover-outline: none;
4140
+ --hop-ContextualHelp__popover-border: none;
4141
+ --hop-ContextualHelp__popover-max-inline-size: 20rem;
4142
+ --hop-ContextualHelp__popover-background: var(--hop-neutral-surface-strong);
4143
+ --hop-ContextualHelp__popover-border-radius: var(--hop-shape-rounded-md);
4144
+ --hop-ContextualHelp__popover-box-shadow: var(--hop-elevation-raised);
4145
+ --hop-ContextualHelp__popover-font-family: var(--hop-body-md-font-family);
4146
+ --hop-ContextualHelp__popover-font-size: var(--hop-body-md-font-size);
4147
+ --hop-ContextualHelp__popover-font-weight: var(--hop-body-md-font-weight);
4148
+ --hop-ContextualHelp__popover-line-height: var(--hop-body-md-line-height);
4149
+ --hop-ContextualHelp__popover-font-smoothing: antialiased;
4150
+ --hop-ContextualHelp__popover-color: var(--hop-neutral-text-strong);
4151
+ --hop-ContextualHelp__popover-padding: var(--hop-space-inset-squish-md);
4152
+ max-inline-size: min(var(--hop-ContextualHelp__popover-max-inline-size), calc(100% - (var(--container-padding) * 2)));
4153
+ padding: var(--hop-ContextualHelp__popover-padding);
4154
+ font-family: var(--hop-ContextualHelp__popover-font-family);
4155
+ font-size: var(--hop-ContextualHelp__popover-font-size);
4156
+ font-weight: var(--hop-ContextualHelp__popover-font-weight);
4157
+ -webkit-font-smoothing: var(--hop-ContextualHelp__popover-font-smoothing);
4158
+ line-height: var(--hop-ContextualHelp__popover-line-height);
4159
+ color: var(--hop-ContextualHelp__popover-color);
4160
+ background: var(--hop-ContextualHelp__popover-background);
4161
+ border: var(--hop-ContextualHelp__popover-border);
4162
+ border-radius: var(--hop-ContextualHelp__popover-border-radius);
4163
+ outline: var(--hop-ContextualHelp__popover-outline);
4164
+ box-shadow: var(--hop-ContextualHelp__popover-box-shadow);
4165
+ }