@hopper-ui/components 1.4.7 → 1.4.9

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 (335) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/dist/Accordion/src/Accordion.css +68 -68
  3. package/dist/Accordion/src/Accordion.js +3 -3
  4. package/dist/Accordion/src/index.css +68 -68
  5. package/dist/Accordion/src/index.js +3 -3
  6. package/dist/Avatar/src/AnonymousAvatar.css +38 -38
  7. package/dist/Avatar/src/AnonymousAvatar.js +4 -4
  8. package/dist/Avatar/src/Avatar.css +56 -56
  9. package/dist/Avatar/src/Avatar.js +7 -7
  10. package/dist/Avatar/src/DeletedAvatar.css +38 -38
  11. package/dist/Avatar/src/DeletedAvatar.js +4 -4
  12. package/dist/Avatar/src/RichIconAvatarImage.css +38 -38
  13. package/dist/Avatar/src/RichIconAvatarImage.js +2 -2
  14. package/dist/Avatar/src/index.css +56 -56
  15. package/dist/Avatar/src/index.js +9 -9
  16. package/dist/Badge/src/Badge.css +43 -43
  17. package/dist/Badge/src/Badge.js +5 -5
  18. package/dist/Badge/src/FloatingBadge.css +38 -38
  19. package/dist/Badge/src/FloatingBadge.js +4 -4
  20. package/dist/Badge/src/index.css +53 -53
  21. package/dist/Badge/src/index.js +7 -7
  22. package/dist/Callout/src/Callout.css +262 -262
  23. package/dist/Callout/src/Callout.js +13 -13
  24. package/dist/Callout/src/CompactCallout.css +293 -293
  25. package/dist/Callout/src/CompactCallout.js +13 -13
  26. package/dist/Callout/src/index.css +304 -304
  27. package/dist/Callout/src/index.js +14 -14
  28. package/dist/Card/src/Card.css +31 -31
  29. package/dist/Card/src/Card.js +1 -1
  30. package/dist/Card/src/index.css +31 -31
  31. package/dist/Card/src/index.js +1 -1
  32. package/dist/ComboBox/src/ComboBox.css +3202 -2852
  33. package/dist/ComboBox/src/ComboBox.d.ts +6 -6
  34. package/dist/ComboBox/src/ComboBox.js +26 -23
  35. package/dist/ComboBox/src/ComboBoxContext.d.ts +3 -2
  36. package/dist/ComboBox/src/index.css +3202 -2852
  37. package/dist/ComboBox/src/index.d.ts +4 -3
  38. package/dist/ComboBox/src/index.js +26 -23
  39. package/dist/Disclosure/src/Disclosure.css +38 -38
  40. package/dist/Disclosure/src/Disclosure.js +3 -3
  41. package/dist/Disclosure/src/DisclosureHeader.css +45 -45
  42. package/dist/Disclosure/src/DisclosureHeader.js +11 -11
  43. package/dist/Disclosure/src/DisclosurePanel.css +38 -38
  44. package/dist/Disclosure/src/DisclosurePanel.js +11 -11
  45. package/dist/Disclosure/src/index.css +63 -63
  46. package/dist/Disclosure/src/index.js +15 -15
  47. package/dist/Divider/src/Divider.css +30 -30
  48. package/dist/Divider/src/Divider.js +1 -1
  49. package/dist/Divider/src/index.css +30 -30
  50. package/dist/Divider/src/index.js +1 -1
  51. package/dist/ErrorMessage/src/ErrorMessage.css +30 -30
  52. package/dist/ErrorMessage/src/ErrorMessage.js +4 -4
  53. package/dist/ErrorMessage/src/index.css +30 -30
  54. package/dist/ErrorMessage/src/index.js +4 -4
  55. package/dist/Form/src/Form.css +28 -28
  56. package/dist/Form/src/Form.js +1 -1
  57. package/dist/Form/src/index.css +28 -28
  58. package/dist/Form/src/index.js +1 -1
  59. package/dist/HelperMessage/src/HelperMessage.css +30 -30
  60. package/dist/HelperMessage/src/HelperMessage.js +3 -3
  61. package/dist/HelperMessage/src/index.css +30 -30
  62. package/dist/HelperMessage/src/index.js +3 -3
  63. package/dist/IconList/src/IconList.css +29 -29
  64. package/dist/IconList/src/IconList.js +1 -1
  65. package/dist/IconList/src/index.css +29 -29
  66. package/dist/IconList/src/index.js +1 -1
  67. package/dist/IllustratedMessage/src/IllustratedMessage.css +270 -270
  68. package/dist/IllustratedMessage/src/IllustratedMessage.js +1 -1
  69. package/dist/IllustratedMessage/src/index.css +270 -270
  70. package/dist/IllustratedMessage/src/index.js +1 -1
  71. package/dist/Image/src/Image.css +31 -31
  72. package/dist/Image/src/Image.js +1 -1
  73. package/dist/Image/src/SvgImage.css +29 -29
  74. package/dist/Image/src/SvgImage.js +1 -1
  75. package/dist/Image/src/index.css +32 -32
  76. package/dist/Image/src/index.js +2 -2
  77. package/dist/Link/src/Link.css +59 -59
  78. package/dist/Link/src/Link.js +9 -9
  79. package/dist/Link/src/index.css +59 -59
  80. package/dist/Link/src/index.js +9 -9
  81. package/dist/ListBox/src/ListBox.css +275 -275
  82. package/dist/ListBox/src/ListBox.js +16 -16
  83. package/dist/ListBox/src/ListBoxItem.css +263 -263
  84. package/dist/ListBox/src/ListBoxItem.js +15 -15
  85. package/dist/ListBox/src/ListBoxItemSkeleton.css +35 -35
  86. package/dist/ListBox/src/ListBoxItemSkeleton.js +1 -1
  87. package/dist/ListBox/src/index.css +275 -275
  88. package/dist/ListBox/src/index.js +16 -16
  89. package/dist/Modal/src/BaseModal.css +347 -0
  90. package/dist/Modal/src/BaseModal.d.ts +24 -0
  91. package/dist/Modal/src/BaseModal.js +5 -0
  92. package/dist/Modal/src/BaseModalContext.d.ts +8 -0
  93. package/dist/Modal/src/BaseModalContext.js +2 -0
  94. package/dist/Modal/src/CustomModal.css +361 -0
  95. package/dist/Modal/src/CustomModal.d.ts +35 -0
  96. package/dist/Modal/src/CustomModal.js +7 -0
  97. package/dist/Modal/src/CustomModalContext.d.ts +8 -0
  98. package/dist/Modal/src/CustomModalContext.js +2 -0
  99. package/dist/Modal/src/Modal.css +1806 -0
  100. package/dist/Modal/src/Modal.d.ts +33 -0
  101. package/dist/Modal/src/Modal.js +37 -0
  102. package/dist/Modal/src/ModalContext.d.ts +8 -0
  103. package/dist/Modal/src/ModalContext.js +2 -0
  104. package/dist/Modal/src/ModalTrigger.d.ts +5 -0
  105. package/dist/Modal/src/ModalTrigger.js +2 -0
  106. package/dist/Modal/src/index.css +1820 -0
  107. package/dist/Modal/src/index.d.ts +8 -0
  108. package/dist/Modal/src/index.js +40 -0
  109. package/dist/SegmentedControl/src/SegmentedControl.css +29 -29
  110. package/dist/SegmentedControl/src/SegmentedControl.js +1 -1
  111. package/dist/SegmentedControl/src/SegmentedControlItem.css +43 -43
  112. package/dist/SegmentedControl/src/SegmentedControlItem.js +8 -8
  113. package/dist/SegmentedControl/src/index.css +44 -44
  114. package/dist/SegmentedControl/src/index.js +9 -9
  115. package/dist/Select/src/Select.css +576 -576
  116. package/dist/Select/src/Select.js +23 -23
  117. package/dist/Select/src/SelectValue.css +62 -62
  118. package/dist/Select/src/SelectValue.js +10 -10
  119. package/dist/Select/src/index.css +576 -576
  120. package/dist/Select/src/index.js +23 -23
  121. package/dist/Spinner/src/Spinner.css +38 -38
  122. package/dist/Spinner/src/Spinner.js +3 -3
  123. package/dist/Spinner/src/index.css +38 -38
  124. package/dist/Spinner/src/index.js +3 -3
  125. package/dist/Tile/src/Tile.css +326 -0
  126. package/dist/Tile/src/Tile.d.ts +20 -0
  127. package/dist/Tile/src/Tile.js +19 -0
  128. package/dist/Tile/src/TileContext.d.ts +9 -0
  129. package/dist/Tile/src/TileContext.js +2 -0
  130. package/dist/Tile/src/TileGroup.css +241 -0
  131. package/dist/Tile/src/TileGroup.d.ts +30 -0
  132. package/dist/Tile/src/TileGroup.js +6 -0
  133. package/dist/Tile/src/TileGroupContext.d.ts +8 -0
  134. package/dist/Tile/src/TileGroupContext.js +2 -0
  135. package/dist/Tile/src/index.css +334 -0
  136. package/dist/Tile/src/index.d.ts +7 -0
  137. package/dist/Tile/src/index.js +21 -0
  138. package/dist/ToggleArrow/src/ToggleArrow.css +30 -30
  139. package/dist/ToggleArrow/src/ToggleArrow.js +1 -1
  140. package/dist/ToggleArrow/src/index.css +30 -30
  141. package/dist/ToggleArrow/src/index.js +1 -1
  142. package/dist/buttons/src/Button.css +94 -94
  143. package/dist/buttons/src/Button.js +10 -10
  144. package/dist/buttons/src/ButtonGroup.css +39 -39
  145. package/dist/buttons/src/ButtonGroup.js +1 -1
  146. package/dist/buttons/src/ClearButton.css +99 -99
  147. package/dist/buttons/src/ClearButton.d.ts +12 -5
  148. package/dist/buttons/src/ClearButton.js +3 -3
  149. package/dist/buttons/src/ClearButtonContext.d.ts +2 -4
  150. package/dist/buttons/src/CloseButton.css +95 -95
  151. package/dist/buttons/src/CloseButton.js +12 -12
  152. package/dist/buttons/src/EmbeddedButton.css +99 -99
  153. package/dist/buttons/src/EmbeddedButton.d.ts +27 -7
  154. package/dist/buttons/src/EmbeddedButton.js +1 -1
  155. package/dist/buttons/src/EmbeddedButtonContext.d.ts +1 -4
  156. package/dist/buttons/src/LinkButton.css +103 -103
  157. package/dist/buttons/src/LinkButton.js +9 -9
  158. package/dist/buttons/src/index.css +251 -251
  159. package/dist/buttons/src/index.d.ts +2 -1
  160. package/dist/buttons/src/index.js +17 -17
  161. package/dist/checkbox/src/Checkbox.css +47 -47
  162. package/dist/checkbox/src/Checkbox.js +9 -9
  163. package/dist/checkbox/src/CheckboxField.css +34 -34
  164. package/dist/checkbox/src/CheckboxField.js +5 -5
  165. package/dist/checkbox/src/CheckboxGroup.css +99 -99
  166. package/dist/checkbox/src/CheckboxGroup.js +9 -9
  167. package/dist/checkbox/src/DecorativeCheckbox.css +55 -55
  168. package/dist/checkbox/src/DecorativeCheckbox.js +10 -10
  169. package/dist/checkbox/src/index.css +99 -99
  170. package/dist/checkbox/src/index.js +16 -16
  171. package/dist/{chunk-P5EIKUXO.js → chunk-26I53B5Y.js} +5 -5
  172. package/dist/{chunk-NH3IVMXB.js → chunk-2NSUMKNH.js} +1 -1
  173. package/dist/{chunk-7UNZPFF5.js → chunk-2NUBBFM5.js} +13 -12
  174. package/dist/{chunk-TZEOP7YF.js → chunk-35HDR5EW.js} +1 -1
  175. package/dist/{chunk-MIZJXB3R.js → chunk-35MPBJ2Y.js} +6 -6
  176. package/dist/chunk-3MTGAZ77.js +7 -0
  177. package/dist/{chunk-IIAAY3DD.js → chunk-3TXCNKNC.js} +2 -2
  178. package/dist/{chunk-MF2LIHC6.js → chunk-4O36V5KR.js} +4 -4
  179. package/dist/{chunk-K7JDZAO3.js → chunk-4VGF4WNW.js} +11 -11
  180. package/dist/{chunk-ERIQNISN.js → chunk-6HV32IPY.js} +1 -1
  181. package/dist/{chunk-JAR25BBL.js → chunk-7RPAPVYW.js} +4 -4
  182. package/dist/{chunk-4B5NJLD3.js → chunk-B277P7AQ.js} +1 -1
  183. package/dist/{chunk-KBHWDMMF.js → chunk-BTV2OYVC.js} +1 -3
  184. package/dist/{chunk-55OPYST3.js → chunk-BXG66HY3.js} +1 -1
  185. package/dist/{chunk-DW44WR6W.js → chunk-C34TTCEP.js} +4 -4
  186. package/dist/chunk-DRFFM5PG.js +6 -0
  187. package/dist/chunk-EG6J2LGD.js +34 -0
  188. package/dist/{chunk-RYJBYNZT.js → chunk-EZ5RRUX5.js} +1 -1
  189. package/dist/chunk-FLU4UPP6.js +7 -0
  190. package/dist/{chunk-ZVNGQXRR.js → chunk-GEZPNFFE.js} +2 -2
  191. package/dist/{chunk-6LIFUQT4.js → chunk-GGPG3AP3.js} +5 -5
  192. package/dist/{chunk-NJUYQ7VF.js → chunk-GTHTPLWR.js} +3 -3
  193. package/dist/{chunk-MO4EWTIM.js → chunk-H7ATUWV2.js} +2 -2
  194. package/dist/{chunk-OIELLCFE.js → chunk-HCYKOE75.js} +1 -1
  195. package/dist/{chunk-GNPTWYD3.js → chunk-HSK7PS5Z.js} +3 -3
  196. package/dist/{chunk-7EUXODLY.js → chunk-I7VLBEP3.js} +1 -1
  197. package/dist/chunk-IJY4EEMM.js +120 -0
  198. package/dist/{chunk-BHIQ5PPC.js → chunk-JA3YZAMV.js} +2 -2
  199. package/dist/{chunk-Z3WDZ52E.js → chunk-JALNC6MF.js} +1 -1
  200. package/dist/{chunk-2DF25AEQ.js → chunk-JHZLARBW.js} +2 -2
  201. package/dist/chunk-JTNKUYE5.js +8 -0
  202. package/dist/{chunk-ZWDUMUN4.js → chunk-JWHK6VZE.js} +2 -2
  203. package/dist/{chunk-XLPW4NX3.js → chunk-KRWMJC24.js} +53 -74
  204. package/dist/{chunk-JZ6DMATL.js → chunk-KYGM6GSZ.js} +5 -5
  205. package/dist/{chunk-MHQ3VHAA.js → chunk-L52ZO6DK.js} +6 -6
  206. package/dist/chunk-LUO2HNXA.js +7 -0
  207. package/dist/{chunk-N3XC5CZP.js → chunk-M43P32S2.js} +3 -3
  208. package/dist/{chunk-HXNEWO5D.js → chunk-MJD4HEF7.js} +16 -14
  209. package/dist/{chunk-UICYQNAO.js → chunk-MRKDMC6T.js} +4 -4
  210. package/dist/chunk-MS353K3B.js +77 -0
  211. package/dist/{chunk-OCG7CSY5.js → chunk-MYDMC5AL.js} +1 -1
  212. package/dist/{chunk-WICGT2T5.js → chunk-NSFQDIGS.js} +1 -1
  213. package/dist/{chunk-DOYWH7O2.js → chunk-O4BGMHFN.js} +30 -18
  214. package/dist/{chunk-J6RDT7TX.js → chunk-O7ASYBWX.js} +5 -5
  215. package/dist/chunk-O7T4L4C5.js +77 -0
  216. package/dist/{chunk-HJXC5SRI.js → chunk-OKFJ545T.js} +2 -2
  217. package/dist/{chunk-YQLCOKBQ.js → chunk-OLY7SREJ.js} +3 -3
  218. package/dist/chunk-PESGOSPX.js +59 -0
  219. package/dist/{chunk-OQFPMKF2.js → chunk-PFUFA75W.js} +13 -13
  220. package/dist/chunk-PH5BSJDK.js +7 -0
  221. package/dist/{chunk-IYRRO5H3.js → chunk-QHB7NUOZ.js} +2 -2
  222. package/dist/{chunk-LMATFHSS.js → chunk-R54ZMYQ4.js} +5 -5
  223. package/dist/chunk-RU2R4HRN.js +73 -0
  224. package/dist/chunk-RZVA6GTJ.js +75 -0
  225. package/dist/{chunk-NFIZ44XF.js → chunk-SQ4WQLG3.js} +5 -5
  226. package/dist/{chunk-3JJL6GD6.js → chunk-TEOQZH4R.js} +2 -2
  227. package/dist/{chunk-7SCKD7PW.js → chunk-TFMCSZBX.js} +4 -4
  228. package/dist/{chunk-5JYQWCE5.js → chunk-V6IGV2A6.js} +9 -9
  229. package/dist/{chunk-HMG6U7FQ.js → chunk-VLRWUC3G.js} +3 -3
  230. package/dist/{chunk-2GGER6XM.js → chunk-W2QZ6LNV.js} +1 -1
  231. package/dist/{chunk-4BXMSXYQ.js → chunk-W7UY3AN2.js} +1 -1
  232. package/dist/{chunk-7DLSOYOU.js → chunk-WEOELGV3.js} +5 -5
  233. package/dist/{chunk-WX5UNPM3.js → chunk-WNCTZPDC.js} +1 -1
  234. package/dist/{chunk-WLIPEWRM.js → chunk-WOHPT4IQ.js} +3 -3
  235. package/dist/{chunk-PHQ6YPQQ.js → chunk-WTW6WMRY.js} +2 -2
  236. package/dist/{chunk-K3IUMMRF.js → chunk-XCLYO62A.js} +4 -4
  237. package/dist/{chunk-JUVZRX26.js → chunk-XPU2VOT2.js} +4 -4
  238. package/dist/{chunk-JNJYQ26N.js → chunk-YDFVC72F.js} +14 -14
  239. package/dist/{chunk-BXPKRAAY.js → chunk-YE2X3QC5.js} +1 -1
  240. package/dist/{chunk-2XVB536Z.js → chunk-YGO4PKGI.js} +18 -26
  241. package/dist/{chunk-W5HTSWT3.js → chunk-YI3NOFUB.js} +3 -3
  242. package/dist/{chunk-MPCOEMN2.js → chunk-YYYKLACT.js} +3 -3
  243. package/dist/{chunk-KXAYZ6PQ.js → chunk-Z2OMFFPS.js} +1 -1
  244. package/dist/{chunk-SV6RSWOR.js → chunk-ZNATFVK3.js} +2 -2
  245. package/dist/{chunk-I73SWVA3.js → chunk-ZSBIKIOS.js} +4 -4
  246. package/dist/{chunk-Y7ATRH3L.js → chunk-ZVFVY7LL.js} +3 -3
  247. package/dist/index.css +1468 -1337
  248. package/dist/index.d.ts +12 -4
  249. package/dist/index.js +98 -90
  250. package/dist/inputs/src/Input.css +302 -0
  251. package/dist/inputs/src/Input.d.ts +15 -0
  252. package/dist/inputs/src/Input.js +3 -0
  253. package/dist/inputs/src/InputGroup.css +47 -1483
  254. package/dist/inputs/src/InputGroup.d.ts +1 -18
  255. package/dist/inputs/src/InputGroup.js +1 -3
  256. package/dist/inputs/src/InputGroupContext.d.ts +0 -2
  257. package/dist/inputs/src/NumberField.css +130 -1526
  258. package/dist/inputs/src/NumberField.js +14 -15
  259. package/dist/inputs/src/PasswordField.css +346 -380
  260. package/dist/inputs/src/PasswordField.d.ts +4 -4
  261. package/dist/inputs/src/PasswordField.js +15 -14
  262. package/dist/inputs/src/PasswordFieldContext.d.ts +2 -2
  263. package/dist/inputs/src/RemainingCharacterCount.css +31 -31
  264. package/dist/inputs/src/RemainingCharacterCount.js +9 -9
  265. package/dist/inputs/src/SearchField.css +350 -386
  266. package/dist/inputs/src/SearchField.d.ts +2 -2
  267. package/dist/inputs/src/SearchField.js +17 -16
  268. package/dist/inputs/src/SearchFieldContext.d.ts +2 -2
  269. package/dist/inputs/src/TextArea.css +122 -1498
  270. package/dist/inputs/src/TextArea.js +13 -14
  271. package/dist/inputs/src/TextField.css +348 -384
  272. package/dist/inputs/src/TextField.js +19 -18
  273. package/dist/inputs/src/index.css +625 -628
  274. package/dist/inputs/src/index.d.ts +4 -3
  275. package/dist/inputs/src/index.js +23 -23
  276. package/dist/overlays/Popover/src/Popover.css +552 -552
  277. package/dist/overlays/Popover/src/Popover.js +9 -9
  278. package/dist/overlays/Popover/src/index.css +552 -552
  279. package/dist/overlays/Popover/src/index.js +9 -9
  280. package/dist/radio/src/DecorativeRadio.css +55 -55
  281. package/dist/radio/src/DecorativeRadio.js +10 -10
  282. package/dist/radio/src/Radio.css +47 -47
  283. package/dist/radio/src/Radio.js +9 -9
  284. package/dist/radio/src/RadioField.css +34 -34
  285. package/dist/radio/src/RadioField.js +4 -4
  286. package/dist/radio/src/RadioGroup.css +99 -99
  287. package/dist/radio/src/RadioGroup.js +8 -8
  288. package/dist/radio/src/index.css +99 -99
  289. package/dist/radio/src/index.js +15 -15
  290. package/dist/switch/src/Switch.css +44 -44
  291. package/dist/switch/src/Switch.js +9 -9
  292. package/dist/switch/src/SwitchField.css +34 -34
  293. package/dist/switch/src/SwitchField.js +5 -5
  294. package/dist/switch/src/index.css +50 -50
  295. package/dist/switch/src/index.js +12 -12
  296. package/dist/tag/src/Tag.css +392 -392
  297. package/dist/tag/src/Tag.d.ts +46 -5
  298. package/dist/tag/src/Tag.js +15 -15
  299. package/dist/tag/src/TagContext.d.ts +3 -1
  300. package/dist/tag/src/TagGroup.css +38 -38
  301. package/dist/tag/src/TagGroup.d.ts +3 -1
  302. package/dist/tag/src/TagGroup.js +9 -9
  303. package/dist/tag/src/TagGroupContext.d.ts +3 -1
  304. package/dist/tag/src/index.css +402 -402
  305. package/dist/tag/src/index.d.ts +3 -1
  306. package/dist/tag/src/index.js +20 -20
  307. package/dist/typography/Heading/src/Heading.css +28 -28
  308. package/dist/typography/Heading/src/Heading.js +1 -1
  309. package/dist/typography/Heading/src/index.css +28 -28
  310. package/dist/typography/Heading/src/index.js +1 -1
  311. package/dist/typography/Label/src/Label.css +28 -28
  312. package/dist/typography/Label/src/Label.js +2 -2
  313. package/dist/typography/Label/src/index.css +28 -28
  314. package/dist/typography/Label/src/index.js +2 -2
  315. package/dist/typography/OverlineText/src/OverlineText.css +28 -28
  316. package/dist/typography/OverlineText/src/OverlineText.js +1 -1
  317. package/dist/typography/OverlineText/src/index.css +28 -28
  318. package/dist/typography/OverlineText/src/index.js +1 -1
  319. package/dist/typography/Text/src/Text.css +28 -28
  320. package/dist/typography/Text/src/Text.js +2 -2
  321. package/dist/typography/Text/src/index.css +28 -28
  322. package/dist/typography/Text/src/index.js +2 -2
  323. package/dist/utils/src/EnsureTextWrapper.css +28 -28
  324. package/dist/utils/src/EnsureTextWrapper.js +8 -8
  325. package/dist/utils/src/index.css +28 -28
  326. package/dist/utils/src/index.d.ts +0 -1
  327. package/dist/utils/src/index.js +9 -10
  328. package/dist/utils/src/types.d.ts +1 -1
  329. package/dist/utils/src/useRenderProps.js +1 -1
  330. package/package.json +5 -2
  331. package/dist/ClearButton-wcnm_ugx.d.ts +0 -80
  332. package/dist/chunk-2JXEPUMG.js +0 -102
  333. package/dist/chunk-MTDFS4CZ.js +0 -12
  334. package/dist/utils/src/useScale.d.ts +0 -11
  335. package/dist/utils/src/useScale.js +0 -2
@@ -1,5 +1,5 @@
1
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___MV97T {
2
+ .Heading-module__hop-Heading___gDDJq {
3
3
  --hop-Heading-xs-font-size: var(--hop-heading-xs-font-size);
4
4
  --hop-Heading-xs-font-family: var(--hop-heading-xs-font-family);
5
5
  --hop-Heading-xs-font-weight: var(--hop-heading-xs-font-weight);
@@ -33,50 +33,50 @@
33
33
  --hop-Heading-inherit-size-font-weight: inherit;
34
34
  --hop-Heading-inherit-size-line-height: inherit;
35
35
  }
36
- :where(.Heading-module__hop-Heading___MV97T) {
36
+ :where(.Heading-module__hop-Heading___gDDJq) {
37
37
  margin: 0;
38
38
  font-family: var(--font-family);
39
39
  font-size: var(--font-size);
40
40
  font-weight: var(--font-weight);
41
41
  line-height: var(--line-height);
42
42
  }
43
- :where(.Heading-module__hop-Heading--xs___skrqP) {
43
+ :where(.Heading-module__hop-Heading--xs___yWlqb) {
44
44
  --font-size: var(--hop-Heading-xs-font-size);
45
45
  --font-family: var(--hop-Heading-xs-font-family);
46
46
  --font-weight: var(--hop-Heading-xs-font-weight);
47
47
  --line-height: var(--hop-Heading-xs-line-height);
48
48
  }
49
- :where(.Heading-module__hop-Heading--sm___3HGuM) {
49
+ :where(.Heading-module__hop-Heading--sm___mqLrL) {
50
50
  --font-size: var(--hop-Heading-sm-font-size);
51
51
  --font-family: var(--hop-Heading-sm-font-family);
52
52
  --font-weight: var(--hop-Heading-sm-font-weight);
53
53
  --line-height: var(--hop-Heading-sm-line-height);
54
54
  }
55
- :where(.Heading-module__hop-Heading--md___4p-Ip) {
55
+ :where(.Heading-module__hop-Heading--md___X7XCd) {
56
56
  --font-size: var(--hop-Heading-md-font-size);
57
57
  --font-family: var(--hop-Heading-md-font-family);
58
58
  --font-weight: var(--hop-Heading-md-font-weight);
59
59
  --line-height: var(--hop-Heading-md-line-height);
60
60
  }
61
- :where(.Heading-module__hop-Heading--lg___91wTX) {
61
+ :where(.Heading-module__hop-Heading--lg___VGfmX) {
62
62
  --font-size: var(--hop-Heading-lg-font-size);
63
63
  --font-family: var(--hop-Heading-lg-font-family);
64
64
  --font-weight: var(--hop-Heading-lg-font-weight);
65
65
  --line-height: var(--hop-Heading-lg-line-height);
66
66
  }
67
- :where(.Heading-module__hop-Heading--xl___1a9tn) {
67
+ :where(.Heading-module__hop-Heading--xl___1F9En) {
68
68
  --font-size: var(--hop-Heading-xl-font-size);
69
69
  --font-family: var(--hop-Heading-xl-font-family);
70
70
  --font-weight: var(--hop-Heading-xl-font-weight);
71
71
  --line-height: var(--hop-Heading-xl-line-height);
72
72
  }
73
- :where(.Heading-module__hop-Heading--2xl___HRwDE) {
73
+ :where(.Heading-module__hop-Heading--2xl___Gtdvn) {
74
74
  --font-size: var(--hop-Heading-2xl-font-size);
75
75
  --font-family: var(--hop-Heading-2xl-font-family);
76
76
  --font-weight: var(--hop-Heading-2xl-font-weight);
77
77
  --line-height: var(--hop-Heading-2xl-line-height);
78
78
  }
79
- :where(.Heading-module__hop-Heading--3xl___Ni3KL) {
79
+ :where(.Heading-module__hop-Heading--3xl___77gn-) {
80
80
  --font-size: var(--hop-Heading-3xl-font-size);
81
81
  --font-family: var(--hop-Heading-3xl-font-family);
82
82
  --font-weight: var(--hop-Heading-3xl-font-weight);
@@ -84,7 +84,7 @@
84
84
  }
85
85
 
86
86
  /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/OverlineText/src/OverlineText.module.css/#css-module-data */
87
- :where(.OverlineText-module__hop-OverlineText___wsazM) {
87
+ :where(.OverlineText-module__hop-OverlineText___lWll0) {
88
88
  --hop-OverlineText-font-family: var(--hop-overline-font-family);
89
89
  --hop-OverlineText-font-size: var(--hop-overline-font-size);
90
90
  --hop-OverlineText-font-weight: var(--hop-overline-font-weight);
@@ -108,52 +108,52 @@
108
108
  text-transform: uppercase;
109
109
  letter-spacing: var(--letter-spacing);
110
110
  }
111
- .OverlineText-module__hop-OverlineText__text___sBkU7 {
111
+ .OverlineText-module__hop-OverlineText__text___7TAMR {
112
112
  box-sizing: border-box;
113
113
  }
114
- .OverlineText-module__hop-OverlineText__text___sBkU7::before,
115
- .OverlineText-module__hop-OverlineText__text___sBkU7::after {
114
+ .OverlineText-module__hop-OverlineText__text___7TAMR::before,
115
+ .OverlineText-module__hop-OverlineText__text___7TAMR::after {
116
116
  content: "";
117
117
  display: block;
118
118
  box-sizing: border-box;
119
119
  inline-size: 0;
120
120
  block-size: 0;
121
121
  }
122
- .OverlineText-module__hop-OverlineText__text___sBkU7::before {
122
+ .OverlineText-module__hop-OverlineText__text___7TAMR::before {
123
123
  margin-block-end: var(--bottom-offset);
124
124
  }
125
- .OverlineText-module__hop-OverlineText__text___sBkU7::after {
125
+ .OverlineText-module__hop-OverlineText__text___7TAMR::after {
126
126
  margin-block-start: var(--top-offset);
127
127
  }
128
128
 
129
129
  /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/Form/src/Form.module.css/#css-module-data */
130
- .Form-module__hop-Form___jhdfJ {
130
+ .Form-module__hop-Form___AjIDb {
131
131
  display: flex;
132
132
  flex-direction: column;
133
133
  gap: var(--hop-space-stack-lg);
134
134
  }
135
135
 
136
136
  /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/Label/src/Label.module.css/#css-module-data */
137
- .Label-module__hop-Label___GS84I {
137
+ .Label-module__hop-Label___uQPTW {
138
138
  --hop-Label-font-size: var(--hop-heading-xs-font-size);
139
139
  --hop-Label-font-family: var(--hop-heading-xs-font-family);
140
140
  --hop-Label-font-weight: var(--hop-heading-xs-font-weight);
141
141
  --hop-Label-line-height: var(--hop-heading-xs-line-height);
142
142
  --hop-Label-color: var(--hop-neutral-text-weak);
143
143
  }
144
- :where(.Label-module__hop-Label___GS84I) {
144
+ :where(.Label-module__hop-Label___uQPTW) {
145
145
  font-family: var(--hop-Label-font-family);
146
146
  font-size: var(--hop-Label-font-size);
147
147
  font-weight: var(--hop-Label-font-weight);
148
148
  line-height: var(--hop-Label-line-height);
149
149
  color: var(--hop-Label-color);
150
150
  }
151
- :where(.Label-module__hop-Label__indicator___GAUqr) {
151
+ :where(.Label-module__hop-Label__indicator___7ga-3) {
152
152
  padding-inline-start: var(--hop-space-20);
153
153
  }
154
154
 
155
155
  /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/Text/src/Text.module.css/#css-module-data */
156
- .Text-module__hop-Text___M2a7F {
156
+ .Text-module__hop-Text___rlMcQ {
157
157
  --hop-Text-xs-font-size: var(--hop-body-xs-font-size);
158
158
  --hop-Text-xs-font-family: var(--hop-body-xs-font-family);
159
159
  --hop-Text-xs-font-weight: var(--hop-body-xs-font-weight);
@@ -183,49 +183,49 @@
183
183
  --hop-Text-inherit-size-font-weight: inherit;
184
184
  --hop-Text-inherit-size-line-height: inherit;
185
185
  }
186
- :where(.Text-module__hop-Text___M2a7F) {
186
+ :where(.Text-module__hop-Text___rlMcQ) {
187
187
  font-family: var(--font-family);
188
188
  font-size: var(--font-size);
189
189
  font-weight: var(--font-weight);
190
190
  line-height: var(--line-height);
191
191
  }
192
- :where(.Text-module__hop-Text--xs___wFmT7) {
192
+ :where(.Text-module__hop-Text--xs___pVoEH) {
193
193
  --font-size: var(--hop-Text-xs-font-size);
194
194
  --font-family: var(--hop-Text-xs-font-family);
195
195
  --font-weight: var(--hop-Text-xs-font-weight);
196
196
  --line-height: var(--hop-Text-xs-line-height);
197
197
  }
198
- :where(.Text-module__hop-Text--sm___mVKDe) {
198
+ :where(.Text-module__hop-Text--sm___qf5q2) {
199
199
  --font-size: var(--hop-Text-sm-font-size);
200
200
  --font-family: var(--hop-Text-sm-font-family);
201
201
  --font-weight: var(--hop-Text-sm-font-weight);
202
202
  --line-height: var(--hop-Text-sm-line-height);
203
203
  }
204
- :where(.Text-module__hop-Text--md___r-Who) {
204
+ :where(.Text-module__hop-Text--md___AgOX7) {
205
205
  --font-size: var(--hop-Text-md-font-size);
206
206
  --font-family: var(--hop-Text-md-font-family);
207
207
  --font-weight: var(--hop-Text-md-font-weight);
208
208
  --line-height: var(--hop-Text-md-line-height);
209
209
  }
210
- :where(.Text-module__hop-Text--lg___xmcjP) {
210
+ :where(.Text-module__hop-Text--lg___ERZC0) {
211
211
  --font-size: var(--hop-Text-lg-font-size);
212
212
  --font-family: var(--hop-Text-lg-font-family);
213
213
  --font-weight: var(--hop-Text-lg-font-weight);
214
214
  --line-height: var(--hop-Text-lg-line-height);
215
215
  }
216
- :where(.Text-module__hop-Text--xl___HB5dh) {
216
+ :where(.Text-module__hop-Text--xl___mX12o) {
217
217
  --font-size: var(--hop-Text-xl-font-size);
218
218
  --font-family: var(--hop-Text-xl-font-family);
219
219
  --font-weight: var(--hop-Text-xl-font-weight);
220
220
  --line-height: var(--hop-Text-xl-line-height);
221
221
  }
222
- :where(.Text-module__hop-Text--2xl___vay0i) {
222
+ :where(.Text-module__hop-Text--2xl___8NiTf) {
223
223
  --font-size: var(--hop-Text-2xl-font-size);
224
224
  --font-family: var(--hop-Text-2xl-font-family);
225
225
  --font-weight: var(--hop-Text-2xl-font-weight);
226
226
  --line-height: var(--hop-Text-2xl-line-height);
227
227
  }
228
- :where(.Text-module__hop-Text--inherit___VAeUU) {
228
+ :where(.Text-module__hop-Text--inherit___6kPt2) {
229
229
  --font-size: var(--hop-Text-inherit-size-font-size);
230
230
  --font-family: var(--hop-Text-inherit-size-font-family);
231
231
  --font-weight: var(--hop-Text-inherit-size-font-weight);
@@ -233,7 +233,7 @@
233
233
  }
234
234
 
235
235
  /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/ErrorMessage/src/ErrorMessage.module.css/#css-module-data */
236
- .ErrorMessage-module__hop-ErrorMessage___s2fkF {
236
+ .ErrorMessage-module__hop-ErrorMessage___TlSrl {
237
237
  --hop-ErrorMessage-color: var(--hop-danger-text-weak);
238
238
  --hop-ErrorMessage-font-family: var(--hop-body-xs-font-family);
239
239
  --hop-ErrorMessage-font-size: var(--hop-body-xs-font-size);
@@ -250,13 +250,13 @@
250
250
  line-height: var(--hop-ErrorMessage-line-height);
251
251
  color: var(--hop-ErrorMessage-color);
252
252
  }
253
- .ErrorMessage-module__hop-ErrorMessage__icon___r9WM6 {
253
+ .ErrorMessage-module__hop-ErrorMessage__icon___XJNoD {
254
254
  flex: 0 0 auto;
255
255
  align-self: flex-start;
256
256
  }
257
257
 
258
258
  /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/HelperMessage/src/HelperMessage.module.css/#css-module-data */
259
- .HelperMessage-module__hop-HelperMessage___yGssP {
259
+ .HelperMessage-module__hop-HelperMessage___V7HTt {
260
260
  --hop-HelperMessage-color: var(--hop-neutral-text-weak);
261
261
  --hop-HelperMessage-column-gap: var(--hop-space-inline-xs);
262
262
  display: flex;
@@ -265,1550 +265,174 @@
265
265
  box-sizing: border-box;
266
266
  color: var(--hop-HelperMessage-color);
267
267
  }
268
- .HelperMessage-module__hop-HelperMessage__icon___VEalH {
268
+ .HelperMessage-module__hop-HelperMessage__icon___yyO6X {
269
269
  flex: 0 0 auto;
270
270
  align-self: flex-start;
271
271
  }
272
272
 
273
- /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/IconList/src/IconList.module.css/#css-module-data */
274
- .IconList-module__hop-IconList___9zmbW {
275
- --hop-IconList-gap: var(--hop-space-inline-xs);
276
- display: flex;
277
- flex-wrap: wrap;
278
- gap: var(--hop-IconList-gap);
279
- box-sizing: border-box;
280
- }
281
-
282
- /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/Spinner/src/Spinner.module.css/#css-module-data */
283
- @keyframes Spinner-module__spin___EOl7q {
284
- 0% {
285
- transform: rotate(0deg);
286
- }
287
- 100% {
288
- transform: rotate(360deg);
289
- }
290
- }
291
- .Spinner-module__hop-Spinner___-bvVm {
292
- --hop-Spinner-border-radius: var(--hop-shape-circle);
293
- --hop-Spinner-sm-wheel-size: 1rem;
294
- --hop-Spinner-md-wheel-size: 1.25rem;
295
- --hop-Spinner-lg-wheel-size: 1.5rem;
296
- --hop-Spinner-track-width: 0.125rem;
297
- --hop-Spinner-track-opacity: 0.2;
298
- --hop-Spinner-track-border: var(--hop-Spinner-track-width) solid currentcolor;
299
- --hop-Spinner-fill-animation: Spinner-module__spin___EOl7q .8s infinite linear;
300
- --hop-Spinner-fill-animation-reduced-motion-duration: 2s;
301
- --hop-Spinner-fill-border: var(--hop-Spinner-track-width) solid transparent;
302
- --hop-Spinner-fill-border-inline-start: var(--hop-Spinner-track-width) solid currentcolor;
303
- --hop-Spinner-label-margin-inline-start: var(--hop-space-inline-sm);
304
- display: grid;
305
- grid-template-areas: "spinner label";
306
- grid-template-columns: min-content auto;
307
- align-items: center;
308
- box-sizing: border-box;
309
- }
310
- .Spinner-module__hop-Spinner--sm___kALZ7 {
311
- --width: var(--hop-Spinner-sm-wheel-size);
312
- --height: var(--hop-Spinner-sm-wheel-size);
313
- }
314
- .Spinner-module__hop-Spinner--md___toRLX {
315
- --width: var(--hop-Spinner-md-wheel-size);
316
- --height: var(--hop-Spinner-md-wheel-size);
317
- }
318
- .Spinner-module__hop-Spinner--lg___vHSM8 {
319
- --width: var(--hop-Spinner-lg-wheel-size);
320
- --height: var(--hop-Spinner-lg-wheel-size);
321
- }
322
- .Spinner-module__hop-Spinner__track___Boq34 {
323
- grid-area: spinner;
324
- box-sizing: border-box;
325
- inline-size: var(--width, var(--hop-Spinner-md-wheel-size));
326
- block-size: var(--height, var(--hop-Spinner-md-wheel-size));
327
- opacity: var(--hop-Spinner-track-opacity);
328
- border: var(--hop-Spinner-track-border);
329
- border-radius: var(--hop-Spinner-border-radius);
330
- }
331
- .Spinner-module__hop-Spinner__fill___GD1Cj {
332
- grid-area: spinner;
333
- box-sizing: border-box;
334
- inline-size: var(--width, var(--hop-Spinner-md-wheel-size));
335
- block-size: var(--height, var(--hop-Spinner-md-wheel-size));
336
- border: var(--hop-Spinner-fill-border);
337
- border-inline-start: var(--hop-Spinner-fill-border-inline-start);
338
- border-radius: var(--hop-Spinner-border-radius);
339
- animation: var(--hop-Spinner-fill-animation);
340
- }
341
- @media (prefers-reduced-motion: reduce) {
342
- .Spinner-module__hop-Spinner__fill___GD1Cj {
343
- animation-duration: var(--hop-Spinner-fill-animation-reduced-motion-duration);
344
- }
345
- }
346
- .Spinner-module__hop-Spinner__label___KPTGD {
347
- grid-area: label;
348
- margin-inline-start: var(--hop-Spinner-label-margin-inline-start);
349
- }
350
-
351
- /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/buttons/src/Button.module.css/#css-module-data */
352
- .Button-module__hop-Button___XnpzX {
353
- --hop-Button-border-radius: var(--hop-shape-rounded-md);
354
- --hop-Button-focus-ring-color: var(--hop-primary-border-focus);
355
- --hop-Button-column-gap: var(--hop-space-inline-xs);
356
- --hop-Button-icon-only-column-gap: 0;
357
- --hop-Button-outline-size: var(--hop-space-20);
358
- --hop-Button-border-size: var(--hop-space-10);
359
- --hop-Button-text-underline-offset: var(--hop-space-20);
360
- --hop-Button-icon-only-padding: 0;
361
- --hop-Button-sm-height: 2rem;
362
- --hop-Button-md-height: 2.5rem;
363
- --hop-Button-sm-padding: 0 var(--hop-space-inset-md);
364
- --hop-Button-md-padding: 0 var(--hop-space-inset-md);
365
- --hop-Button-ghost-sm-padding: 0 var(--hop-space-inset-xs);
366
- --hop-Button-ghost-md-padding: 0 var(--hop-space-inset-sm);
367
- --hop-Button-color-disabled: var(--hop-neutral-text-disabled);
368
- --hop-Button-background-color-disabled: var(--hop-neutral-surface-disabled);
369
- --hop-Button-border-disabled: var(--hop-Button-border-size) solid var(--hop-Button-background-color-disabled);
370
- --hop-Button-ghost-color-disabled: var(--hop-neutral-text-disabled);
371
- --hop-Button-ghost-background-color-disabled: transparent;
372
- --hop-Button-ghost-border-disabled: var(--hop-Button-border-size) solid var(--hop-Button-ghost-background-color-disabled);
373
- --hop-Button-primary-color: var(--hop-primary-text-strong);
374
- --hop-Button-primary-color-hover: var(--hop-primary-text-strong-hover);
375
- --hop-Button-primary-color-pressed: var(--hop-primary-text-strong);
376
- --hop-Button-primary-background-color: var(--hop-primary-surface-strong);
377
- --hop-Button-primary-background-color-hover: var(--hop-primary-surface-strong-hover);
378
- --hop-Button-primary-background-color-pressed: var(--hop-primary-surface-strong-press);
379
- --hop-Button-primary-border: var(--hop-Button-border-size) solid var(--hop-Button-primary-background-color);
380
- --hop-Button-primary-border-hover: var(--hop-Button-border-size) solid var(--hop-Button-primary-background-color-hover);
381
- --hop-Button-primary-border-pressed: var(--hop-Button-border-size) solid var(--hop-Button-primary-background-color-pressed);
382
- --hop-Button-primary-spinner-color: var(--hop-primary-icon-strong);
383
- --hop-Button-secondary-color: var(--hop-neutral-text);
384
- --hop-Button-secondary-color-hover: var(--hop-neutral-text-hover);
385
- --hop-Button-secondary-color-pressed: var(--hop-neutral-text-press);
386
- --hop-Button-secondary-background-color: var(--hop-neutral-surface);
387
- --hop-Button-secondary-background-color-hover: var(--hop-neutral-surface-hover);
388
- --hop-Button-secondary-background-color-pressed: var(--hop-neutral-surface-press);
389
- --hop-Button-secondary-border: var(--hop-Button-border-size) solid var(--hop-neutral-border-strong);
390
- --hop-Button-secondary-border-hover: var(--hop-Button-border-size) solid var(--hop-neutral-border-strong-hover);
391
- --hop-Button-secondary-border-pressed: var(--hop-Button-border-size) solid var(--hop-neutral-border-strong);
392
- --hop-Button-secondary-spinner-color: var(--hop-neutral-icon);
393
- --hop-Button-upsell-color: var(--hop-upsell-text);
394
- --hop-Button-upsell-color-hover: var(--hop-upsell-text-hover);
395
- --hop-Button-upsell-color-pressed: var(--hop-upsell-text-press);
396
- --hop-Button-upsell-background-color: var(--hop-upsell-surface);
397
- --hop-Button-upsell-background-color-hover: var(--hop-upsell-surface-hover);
398
- --hop-Button-upsell-background-color-pressed: var(--hop-upsell-surface-press);
399
- --hop-Button-upsell-border: var(--hop-Button-border-size) solid var(--hop-Button-upsell-background-color);
400
- --hop-Button-upsell-border-hover: var(--hop-Button-border-size) solid var(--hop-Button-upsell-background-color-hover);
401
- --hop-Button-upsell-border-pressed: var(--hop-Button-border-size) solid var(--hop-Button-upsell-background-color-pressed);
402
- --hop-Button-upsell-spinner-color: var(--hop-upsell-icon);
403
- --hop-Button-danger-color: var(--hop-danger-text-strong);
404
- --hop-Button-danger-color-hover: var(--hop-danger-text-strong-hover);
405
- --hop-Button-danger-color-pressed: var(--hop-danger-text-strong-hover);
406
- --hop-Button-danger-background-color: var(--hop-danger-surface-strong);
407
- --hop-Button-danger-background-color-hover: var(--hop-danger-surface-strong-hover);
408
- --hop-Button-danger-background-color-pressed: var(--hop-danger-surface-press);
409
- --hop-Button-danger-border: var(--hop-Button-border-size) solid var(--hop-Button-danger-background-color);
410
- --hop-Button-danger-border-hover: var(--hop-Button-border-size) solid var(--hop-Button-danger-background-color-hover);
411
- --hop-Button-danger-border-pressed: var(--hop-Button-border-size) solid var(--hop-Button-danger-background-color-pressed);
412
- --hop-Button-danger-spinner-color: var(--hop-primary-icon-strong);
413
- --hop-Button-ghost-primary-color: var(--hop-primary-text);
414
- --hop-Button-ghost-primary-color-hover: var(--hop-primary-text-hover);
415
- --hop-Button-ghost-primary-color-pressed: var(--hop-primary-text-press);
416
- --hop-Button-ghost-primary-background-color: transparent;
417
- --hop-Button-ghost-primary-background-color-hover: var(--hop-neutral-surface-hover);
418
- --hop-Button-ghost-primary-background-color-pressed: var(--hop-primary-surface-weak-press);
419
- --hop-Button-ghost-primary-border: var(--hop-Button-border-size) solid var(--hop-Button-ghost-primary-background-color);
420
- --hop-Button-ghost-primary-border-hover: var(--hop-Button-border-size) solid var(--hop-Button-ghost-primary-background-color-hover);
421
- --hop-Button-ghost-primary-border-pressed: var(--hop-Button-border-size) solid var(--hop-Button-ghost-primary-background-color-pressed);
422
- --hop-Button-ghost-primary-spinner-color: var(--hop-neutral-icon);
423
- --hop-Button-ghost-secondary-color: var(--hop-neutral-text-weak);
424
- --hop-Button-ghost-secondary-color-hover: var(--hop-neutral-text-weak-hover);
425
- --hop-Button-ghost-secondary-color-pressed: var(--hop-neutral-text-weak-press);
426
- --hop-Button-ghost-secondary-background-color: transparent;
427
- --hop-Button-ghost-secondary-background-color-hover: var(--hop-neutral-surface-hover);
428
- --hop-Button-ghost-secondary-background-color-pressed: var(--hop-neutral-surface-press);
429
- --hop-Button-ghost-secondary-border: var(--hop-Button-border-size) solid var(--hop-Button-ghost-secondary-background-color);
430
- --hop-Button-ghost-secondary-border-hover: var(--hop-Button-border-size) solid var(--hop-Button-ghost-secondary-background-color-hover);
431
- --hop-Button-ghost-secondary-border-pressed: var(--hop-Button-border-size) solid var(--hop-Button-ghost-secondary-background-color-pressed);
432
- --hop-Button-ghost-secondary-spinner-color: var(--hop-neutral-icon);
433
- --hop-Button-ghost-danger-color: var(--hop-danger-text-weak);
434
- --hop-Button-ghost-danger-color-hover: var(--hop-danger-text-hover);
435
- --hop-Button-ghost-danger-color-pressed: var(--hop-danger-text-press);
436
- --hop-Button-ghost-danger-background-color: transparent;
437
- --hop-Button-ghost-danger-background-color-hover: var(--hop-neutral-surface-hover);
438
- --hop-Button-ghost-danger-background-color-pressed: var(--hop-danger-surface-weak-press);
439
- --hop-Button-ghost-danger-border: var(--hop-Button-border-size) solid var(--hop-Button-ghost-danger-background-color);
440
- --hop-Button-ghost-danger-border-hover: var(--hop-Button-border-size) solid var(--hop-Button-ghost-danger-background-color-hover);
441
- --hop-Button-ghost-danger-border-pressed: var(--hop-Button-border-size) solid var(--hop-Button-ghost-danger-background-color-pressed);
442
- --hop-Button-ghost-danger-spinner-color: var(--hop-neutral-icon);
443
- --inline-size: max-content;
444
- --block-size: var(--hop-Button-md-height);
445
- --background-color: var(--hop-primary-surface-strong);
446
- --color: var(--hop-primary-text-strong);
447
- --column-gap: var(--hop-Button-column-gap);
448
- --spinner: var(--hop-primary-icon-strong);
449
- --border: 0;
450
- --padding: var(--hop-Button-md-padding);
451
- --text-underline: none;
452
- cursor: pointer;
453
- position: relative;
454
- overflow: hidden;
455
- display: flex;
456
- column-gap: var(--column-gap);
457
- align-items: center;
458
- justify-content: center;
459
- box-sizing: border-box;
460
- inline-size: var(--inline-size);
461
- block-size: var(--block-size);
462
- padding: var(--padding);
463
- color: var(--color);
464
- text-decoration: none;
465
- white-space: nowrap;
466
- background-color: var(--background-color);
467
- border: var(--border);
468
- border-radius: var(--hop-Button-border-radius);
469
- outline: none;
470
- outline-offset: var(--hop-Button-outline-size);
471
- transition:
472
- color var(--hop-easing-duration-2) var(--hop-easing-productive),
473
- background-color var(--hop-easing-duration-2) var(--hop-easing-productive),
474
- border var(--hop-easing-duration-2) var(--hop-easing-productive);
475
- }
476
- .Button-module__hop-Button--fluid___ZZXwq {
477
- --inline-size: 100%;
478
- }
479
- .Button-module__hop-Button--sm___6jOD3 {
480
- --block-size: var(--hop-Button-sm-height);
481
- --padding: var(--hop-Button-sm-padding);
482
- }
483
- .Button-module__hop-Button--sm___6jOD3[class*=--ghost] {
484
- --padding: var(--hop-Button-ghost-sm-padding);
485
- }
486
- .Button-module__hop-Button--md___3yl4O[class*=--ghost] {
487
- --padding: var(--hop-Button-ghost-md-padding);
488
- }
489
- .Button-module__hop-Button--icon-only___-VLNH {
490
- --column-gap: var(--hop-Button-icon-only-column-gap);
491
- --padding: var(--hop-Button-icon-only-padding);
492
- aspect-ratio: 1;
493
- }
494
- .Button-module__hop-Button--primary___5doCv {
495
- --background-color: var(--hop-Button-primary-background-color);
496
- --color: var(--hop-Button-primary-color);
497
- --border: var(--hop-Button-primary-border);
498
- --spinner-color: var(--hop-Button-primary-spinner-color);
499
- }
500
- .Button-module__hop-Button--primary___5doCv[data-hovered],
501
- .Button-module__hop-Button--primary___5doCv[data-focus-visible] {
502
- --background-color: var(--hop-Button-primary-background-color-hover);
503
- --color: var(--hop-Button-primary-color-hover);
504
- --border: var(--hop-Button-primary-border-hover);
505
- }
506
- .Button-module__hop-Button--primary___5doCv[data-pressed] {
507
- --background-color: var(--hop-Button-primary-background-color-pressed);
508
- --color: var(--hop-Button-primary-color-pressed);
509
- --border: var(--hop-Button-primary-border-pressed);
510
- }
511
- .Button-module__hop-Button--secondary___p2tPu {
512
- --background-color: var(--hop-Button-secondary-background-color);
513
- --color: var(--hop-Button-secondary-color);
514
- --border: var(--hop-Button-secondary-border);
515
- --spinner-color: var(--hop-Button-secondary-spinner-color);
516
- }
517
- .Button-module__hop-Button--secondary___p2tPu[data-hovered],
518
- .Button-module__hop-Button--secondary___p2tPu[data-focus-visible] {
519
- --background-color: var(--hop-Button-secondary-background-color-hover);
520
- --color: var(--hop-Button-secondary-color-hover);
521
- --border: var(--hop-Button-secondary-border-hover);
522
- }
523
- .Button-module__hop-Button--secondary___p2tPu[data-pressed] {
524
- --background-color: var(--hop-Button-secondary-background-color-pressed);
525
- --color: var(--hop-Button-secondary-color-pressed);
526
- --border: var(--hop-Button-secondary-border-pressed);
527
- }
528
- .Button-module__hop-Button--upsell___pbl2O {
529
- --background-color: var(--hop-Button-upsell-background-color);
530
- --color: var(--hop-Button-upsell-color);
531
- --border: var(--hop-Button-upsell-border);
532
- --spinner-color: var(--hop-Button-upsell-spinner-color);
533
- }
534
- .Button-module__hop-Button--upsell___pbl2O[data-hovered],
535
- .Button-module__hop-Button--upsell___pbl2O[data-focus-visible] {
536
- --background-color: var(--hop-Button-upsell-background-color-hover);
537
- --color: var(--hop-Button-upsell-color-hover);
538
- --border: var(--hop-Button-upsell-border-hover);
539
- }
540
- .Button-module__hop-Button--upsell___pbl2O[data-pressed] {
541
- --background-color: var(--hop-Button-upsell-background-color-pressed);
542
- --color: var(--hop-Button-upsell-color-pressed);
543
- --border: var(--hop-Button-upsell-border-pressed);
544
- }
545
- .Button-module__hop-Button--danger___D4nJ- {
546
- --background-color: var(--hop-Button-danger-background-color);
547
- --color: var(--hop-Button-danger-color);
548
- --border: var(--hop-Button-danger-border);
549
- --spinner-color: var(--hop-Button-danger-spinner-color);
550
- }
551
- .Button-module__hop-Button--danger___D4nJ-[data-hovered],
552
- .Button-module__hop-Button--danger___D4nJ-[data-focus-visible] {
553
- --background-color: var(--hop-Button-danger-background-color-hover);
554
- --color: var(--hop-Button-danger-color-hover);
555
- --border: var(--hop-Button-danger-border-hover);
556
- }
557
- .Button-module__hop-Button--danger___D4nJ-[data-pressed] {
558
- --background-color: var(--hop-Button-danger-background-color-pressed);
559
- --color: var(--hop-Button-danger-color-pressed);
560
- --border: var(--hop-Button-danger-border-pressed);
561
- }
562
- .Button-module__hop-Button--ghost-primary___WPu49 {
563
- --background-color: var(--hop-Button-ghost-primary-background-color);
564
- --color: var(--hop-Button-ghost-primary-color);
565
- --border: var(--hop-Button-ghost-primary-border);
566
- --spinner-color: var(--hop-Button-ghost-primary-spinner-color);
567
- }
568
- .Button-module__hop-Button--ghost-primary___WPu49[data-hovered],
569
- .Button-module__hop-Button--ghost-primary___WPu49[data-focus-visible] {
570
- --background-color: var(--hop-Button-ghost-primary-background-color-hover);
571
- --color: var(--hop-Button-ghost-primary-color-hover);
572
- --border: var(--hop-Button-ghost-primary-border-hover);
573
- --text-underline: underline;
574
- }
575
- .Button-module__hop-Button--ghost-primary___WPu49[data-pressed] {
576
- --background-color: var(--hop-Button-ghost-primary-background-color-pressed);
577
- --color: var(--hop-Button-ghost-primary-color-pressed);
578
- --border: var(--hop-Button-ghost-primary-border-pressed);
579
- --text-underline: underline;
580
- }
581
- .Button-module__hop-Button--ghost-secondary___M0eZA {
582
- --background-color: var(--hop-Button-ghost-secondary-background-color);
583
- --color: var(--hop-Button-ghost-secondary-color);
584
- --border: var(--hop-Button-ghost-secondary-border);
585
- --spinner-color: var(--hop-Button-ghost-secondary-spinner-color);
586
- }
587
- .Button-module__hop-Button--ghost-secondary___M0eZA[data-hovered],
588
- .Button-module__hop-Button--ghost-secondary___M0eZA[data-focus-visible] {
589
- --background-color: var(--hop-Button-ghost-secondary-background-color-hover);
590
- --color: var(--hop-Button-ghost-secondary-color-hover);
591
- --border: var(--hop-Button-ghost-secondary-border-hover);
592
- --text-underline: underline;
593
- }
594
- .Button-module__hop-Button--ghost-secondary___M0eZA[data-pressed] {
595
- --background-color: var(--hop-Button-ghost-secondary-background-color-pressed);
596
- --color: var(--hop-Button-ghost-secondary-color-pressed);
597
- --border: var(--hop-Button-ghost-secondary-border-pressed);
598
- --text-underline: underline;
599
- }
600
- .Button-module__hop-Button--ghost-danger___-Mvaw {
601
- --background-color: var(--hop-Button-ghost-danger-background-color);
602
- --color: var(--hop-Button-ghost-danger-color);
603
- --border: var(--hop-Button-ghost-danger-border);
604
- --spinner-color: var(--hop-Button-ghost-danger-spinner-color);
605
- }
606
- .Button-module__hop-Button--ghost-danger___-Mvaw[data-hovered],
607
- .Button-module__hop-Button--ghost-danger___-Mvaw[data-focus-visible] {
608
- --background-color: var(--hop-Button-ghost-danger-background-color-hover);
609
- --color: var(--hop-Button-ghost-danger-color-hover);
610
- --border: var(--hop-Button-ghost-danger-border-hover);
611
- --text-underline: underline;
612
- }
613
- .Button-module__hop-Button--ghost-danger___-Mvaw[data-pressed] {
614
- --background-color: var(--hop-Button-ghost-danger-background-color-pressed);
615
- --color: var(--hop-Button-ghost-danger-color-pressed);
616
- --border: var(--hop-Button-ghost-danger-border-pressed);
617
- --text-underline: underline;
618
- }
619
- .Button-module__hop-Button___XnpzX[data-focus-visible] {
620
- outline: var(--hop-Button-outline-size) solid var(--hop-Button-focus-ring-color);
621
- }
622
- .Button-module__hop-Button___XnpzX[data-disabled],
623
- .Button-module__hop-Button___XnpzX[data-pending] {
624
- cursor: not-allowed;
625
- }
626
- .Button-module__hop-Button___XnpzX[data-disabled] {
627
- --background-color: var(--hop-Button-background-color-disabled);
628
- --color: var(--hop-Button-color-disabled);
629
- --border: var(--hop-Button-border-disabled);
630
- }
631
- .Button-module__hop-Button___XnpzX[class*=--ghost][data-disabled] {
632
- --background-color: var(--hop-Button-ghost-background-color-disabled);
633
- --color: var(--hop-Button-ghost-color-disabled);
634
- --border: var(--hop-Button-ghost-border-disabled);
635
- }
636
- .Button-module__hop-Button--primary___5doCv[data-pending] {
637
- --background-color: var(--hop-Button-primary-background-color);
638
- --color: var(--hop-Button-primary-color);
639
- --border: var(--hop-Button-primary-border);
640
- }
641
- .Button-module__hop-Button--secondary___p2tPu[data-pending] {
642
- --background-color: var(--hop-Button-secondary-background-color);
643
- --color: var(--hop-Button-secondary-color);
644
- --border: var(--hop-Button-secondary-border);
645
- }
646
- .Button-module__hop-Button--upsell___pbl2O[data-pending] {
647
- --background-color: var(--hop-Button-upsell-background-color);
648
- --color: var(--hop-Button-upsell-color);
649
- --border: var(--hop-Button-upsell-border);
650
- }
651
- .Button-module__hop-Button--danger___D4nJ-[data-pending] {
652
- --background-color: var(--hop-Button-danger-background-color);
653
- --color: var(--hop-Button-danger-color);
654
- --border: var(--hop-Button-danger-border);
655
- }
656
- .Button-module__hop-Button--ghost-primary___WPu49[data-pending] {
657
- --background-color: var(--hop-Button-ghost-primary-background-color);
658
- --color: var(--hop-Button-ghost-primary-color);
659
- --border: var(--hop-Button-ghost-primary-border);
660
- --text-underline: none;
661
- }
662
- .Button-module__hop-Button--ghost-secondary___M0eZA[data-pending] {
663
- --background-color: var(--hop-Button-ghost-secondary-background-color);
664
- --color: var(--hop-Button-ghost-secondary-color);
665
- --border: var(--hop-Button-ghost-secondary-border);
666
- --text-underline: none;
667
- }
668
- .Button-module__hop-Button--ghost-danger___-Mvaw[data-pending] {
669
- --background-color: var(--hop-Button-ghost-danger-background-color);
670
- --color: var(--hop-Button-ghost-danger-color);
671
- --border: var(--hop-Button-ghost-danger-border);
672
- --text-underline: none;
673
- }
674
- .Button-module__hop-Button__Spinner___Bhn4b {
675
- position: absolute;
676
- color: var(--spinner-color);
677
- }
678
- .Button-module__hop-Button__icon___ShNZp,
679
- .Button-module__hop-Button__icon-list___dbXFP {
680
- flex: 0 0 auto;
681
- justify-self: end;
682
- order: 1;
683
- }
684
- .Button-module__hop-Button__text___iwCeX {
685
- user-select: none;
686
- overflow: visible;
687
- flex: 0 1 auto;
688
- order: 2;
689
- font-weight: var(--hop-font-weight-505);
690
- text-decoration: var(--text-underline);
691
- text-underline-offset: 0.125rem;
692
- text-wrap: nowrap;
693
- }
694
- .Button-module__hop-Button__end-icon___4hJm7,
695
- .Button-module__hop-Button__end-icon-list___SXzot {
696
- flex: 0 0 auto;
697
- order: 3;
698
- }
699
- .Button-module__hop-Button___XnpzX .Button-module__hop-Button__icon-list___dbXFP,
700
- .Button-module__hop-Button___XnpzX .Button-module__hop-Button__end-icon-list___SXzot {
701
- flex-wrap: nowrap;
702
- }
703
- .Button-module__hop-Button___XnpzX[data-pending] > *:not(.Button-module__hop-Button__Spinner___Bhn4b) {
704
- opacity: 0;
705
- }
706
-
707
- /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/buttons/src/ButtonGroup.module.css/#css-module-data */
708
- .ButtonGroup-module__hop-ButtonGroup___W5IvL {
709
- display: inline-flex;
710
- flex-wrap: nowrap;
711
- gap: var(--hop-space-inline-md);
712
- }
713
- .ButtonGroup-module__hop-ButtonGroup--horizontal___a77h0 {
714
- align-items: center;
715
- }
716
- .ButtonGroup-module__hop-ButtonGroup--vertical___bfr82 {
717
- flex-direction: column;
718
- gap: var(--hop-space-stack-md);
719
- justify-content: center;
720
- }
721
- .ButtonGroup-module__hop-ButtonGroup--start___idg--.ButtonGroup-module__hop-ButtonGroup--vertical___bfr82 {
722
- align-items: flex-start;
723
- }
724
- .ButtonGroup-module__hop-ButtonGroup--center___Eb4Kc.ButtonGroup-module__hop-ButtonGroup--vertical___bfr82 {
725
- align-items: center;
726
- }
727
- .ButtonGroup-module__hop-ButtonGroup--end___O6dNO.ButtonGroup-module__hop-ButtonGroup--vertical___bfr82 {
728
- align-items: flex-end;
729
- }
730
- .ButtonGroup-module__hop-ButtonGroup--start___idg--.ButtonGroup-module__hop-ButtonGroup--horizontal___a77h0 {
731
- justify-content: flex-start;
732
- }
733
- .ButtonGroup-module__hop-ButtonGroup--center___Eb4Kc.ButtonGroup-module__hop-ButtonGroup--horizontal___a77h0 {
734
- justify-content: center;
735
- }
736
- .ButtonGroup-module__hop-ButtonGroup--end___O6dNO.ButtonGroup-module__hop-ButtonGroup--horizontal___a77h0 {
737
- justify-content: flex-end;
738
- }
739
- .ButtonGroup-module__hop-ButtonGroup--wrap___gXtS1 {
740
- flex-wrap: wrap;
741
- }
742
- .ButtonGroup-module__hop-ButtonGroup--fluid___N2aYl {
743
- inline-size: 100%;
744
- }
745
-
746
- /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/buttons/src/EmbeddedButton.module.css/#css-module-data */
747
- .EmbeddedButton-module__hop-EmbeddedButton___tHTN9 {
748
- --hop-EmbeddedButton-border-radius: var(--hop-shape-rounded-md);
749
- --hop-EmbeddedButton-focus-ring-color: var(--hop-primary-border-focus);
750
- --hop-EmbeddedButton-effect-border-radius: var(--hop-shape-circle);
751
- --hop-EmbeddedButton-effect-square-border-radius: var(--hop-shape-rounded-sm);
752
- --hop-EmbeddedButton-md-height: 1.5rem;
753
- --hop-EmbeddedButton-md-width: 1.5rem;
754
- --hop-EmbeddedButton-md-effect-height: 1rem;
755
- --hop-EmbeddedButton-md-effect-width: 1rem;
756
- --hop-EmbeddedButton-lg-height: 1.5rem;
757
- --hop-EmbeddedButton-lg-width: 1.5rem;
758
- --hop-EmbeddedButton-lg-effect-height: 1.5rem;
759
- --hop-EmbeddedButton-lg-effect-width: 1.5rem;
760
- --hop-EmbeddedButton-neutral-color: var(--hop-neutral-icon-weak);
761
- --hop-EmbeddedButton-neutral-color-hovered: var(--hop-neutral-icon-weak-hover);
762
- --hop-EmbeddedButton-neutral-color-focused: var(--hop-neutral-icon-weak-hover);
763
- --hop-EmbeddedButton-neutral-color-pressed: var(--hop-neutral-icon-weak-press);
764
- --hop-EmbeddedButton-neutral-color-disabled: var(--hop-neutral-icon-disabled);
765
- --hop-EmbeddedButton-neutral-effect-background-color: transparent;
766
- --hop-EmbeddedButton-neutral-effect-background-color-hovered: var(--hop-neutral-surface-weak-hover);
767
- --hop-EmbeddedButton-neutral-effect-background-color-focused: var(--hop-neutral-surface-weak-hover);
768
- --hop-EmbeddedButton-neutral-effect-background-color-pressed: var(--hop-neutral-surface-weak-press);
769
- --hop-EmbeddedButton-neutral-effect-background-color-disabled: transparent;
770
- --hop-EmbeddedButton-subdued-color: var(--hop-neutral-icon-weak);
771
- --hop-EmbeddedButton-subdued-color-hovered: var(--hop-neutral-icon-weak-hover);
772
- --hop-EmbeddedButton-subdued-color-focused: var(--hop-neutral-icon-weak-hover);
773
- --hop-EmbeddedButton-subdued-color-pressed: var(--hop-neutral-icon-weak-press);
774
- --hop-EmbeddedButton-subdued-color-disabled: var(--hop-neutral-icon-disabled);
775
- --hop-EmbeddedButton-subdued-effect-background-color: transparent;
776
- --hop-EmbeddedButton-subdued-effect-background-color-hovered: var(--hop-neutral-surface-weak-hover);
777
- --hop-EmbeddedButton-subdued-effect-background-color-focused: var(--hop-neutral-surface-weak-hover);
778
- --hop-EmbeddedButton-subdued-effect-background-color-pressed: var(--hop-neutral-surface-weak-press);
779
- --hop-EmbeddedButton-subdued-effect-background-color-disabled: transparent;
780
- --hop-EmbeddedButton-progress-color: var(--hop-status-progress-icon);
781
- --hop-EmbeddedButton-progress-color-hovered: var(--hop-status-progress-icon-hover);
782
- --hop-EmbeddedButton-progress-color-focused: var(--hop-status-progress-icon-hover);
783
- --hop-EmbeddedButton-progress-color-pressed: var(--hop-status-progress-icon-press);
784
- --hop-EmbeddedButton-progress-color-disabled: var(--hop-status-progress-icon-disabled);
785
- --hop-EmbeddedButton-progress-effect-background-color: transparent;
786
- --hop-EmbeddedButton-progress-effect-background-color-hovered: var(--hop-status-progress-surface-hover);
787
- --hop-EmbeddedButton-progress-effect-background-color-focused: var(--hop-status-progress-surface-hover);
788
- --hop-EmbeddedButton-progress-effect-background-color-pressed: var(--hop-status-progress-surface-press);
789
- --hop-EmbeddedButton-progress-effect-background-color-disabled: transparent;
790
- --hop-EmbeddedButton-positive-color: var(--hop-status-positive-icon);
791
- --hop-EmbeddedButton-positive-color-hovered: var(--hop-status-positive-icon-hover);
792
- --hop-EmbeddedButton-positive-color-focused: var(--hop-status-positive-icon-hover);
793
- --hop-EmbeddedButton-positive-color-pressed: var(--hop-status-positive-icon-press);
794
- --hop-EmbeddedButton-positive-color-disabled: var(--hop-status-positive-icon-disabled);
795
- --hop-EmbeddedButton-positive-effect-background-color: transparent;
796
- --hop-EmbeddedButton-positive-effect-background-color-hovered: var(--hop-status-positive-surface-hover);
797
- --hop-EmbeddedButton-positive-effect-background-color-focused: var(--hop-status-positive-surface-hover);
798
- --hop-EmbeddedButton-positive-effect-background-color-pressed: var(--hop-status-positive-surface-press);
799
- --hop-EmbeddedButton-positive-effect-background-color-disabled: transparent;
800
- --hop-EmbeddedButton-caution-color: var(--hop-status-caution-icon);
801
- --hop-EmbeddedButton-caution-color-hovered: var(--hop-status-caution-icon-hover);
802
- --hop-EmbeddedButton-caution-color-focused: var(--hop-status-caution-icon-hover);
803
- --hop-EmbeddedButton-caution-color-pressed: var(--hop-status-caution-icon-press);
804
- --hop-EmbeddedButton-caution-color-disabled: var(--hop-status-caution-icon-disabled);
805
- --hop-EmbeddedButton-caution-effect-background-color: transparent;
806
- --hop-EmbeddedButton-caution-effect-background-color-hovered: var(--hop-status-caution-surface-hover);
807
- --hop-EmbeddedButton-caution-effect-background-color-focused: var(--hop-status-caution-surface-hover);
808
- --hop-EmbeddedButton-caution-effect-background-color-pressed: var(--hop-status-caution-surface-press);
809
- --hop-EmbeddedButton-caution-effect-background-color-disabled: transparent;
810
- --hop-EmbeddedButton-negative-color: var(--hop-status-negative-icon);
811
- --hop-EmbeddedButton-negative-color-hovered: var(--hop-status-negative-icon-hover);
812
- --hop-EmbeddedButton-negative-color-focused: var(--hop-status-negative-icon-hover);
813
- --hop-EmbeddedButton-negative-color-pressed: var(--hop-status-negative-icon-press);
814
- --hop-EmbeddedButton-negative-color-disabled: var(--hop-status-negative-icon-disabled);
815
- --hop-EmbeddedButton-negative-effect-background-color: transparent;
816
- --hop-EmbeddedButton-negative-effect-background-color-hovered: var(--hop-status-negative-surface-hover);
817
- --hop-EmbeddedButton-negative-effect-background-color-focused: var(--hop-status-negative-surface-hover);
818
- --hop-EmbeddedButton-negative-effect-background-color-pressed: var(--hop-status-negative-surface-press);
819
- --hop-EmbeddedButton-negative-effect-background-color-disabled: transparent;
820
- --hop-EmbeddedButton-option1-color: var(--hop-status-option1-icon);
821
- --hop-EmbeddedButton-option1-color-hovered: var(--hop-status-option1-icon-hover);
822
- --hop-EmbeddedButton-option1-color-focused: var(--hop-status-option1-icon-hover);
823
- --hop-EmbeddedButton-option1-color-pressed: var(--hop-status-option1-icon-press);
824
- --hop-EmbeddedButton-option1-color-disabled: var(--hop-status-option1-icon-disabled);
825
- --hop-EmbeddedButton-option1-effect-background-color: transparent;
826
- --hop-EmbeddedButton-option1-effect-background-color-hovered: var(--hop-status-option1-surface-hover);
827
- --hop-EmbeddedButton-option1-effect-background-color-focused: var(--hop-status-option1-surface-hover);
828
- --hop-EmbeddedButton-option1-effect-background-color-pressed: var(--hop-status-option1-surface-press);
829
- --hop-EmbeddedButton-option1-effect-background-color-disabled: transparent;
830
- --hop-EmbeddedButton-option2-color: var(--hop-status-option2-icon);
831
- --hop-EmbeddedButton-option2-color-hovered: var(--hop-status-option2-icon-hover);
832
- --hop-EmbeddedButton-option2-color-focused: var(--hop-status-option2-icon-hover);
833
- --hop-EmbeddedButton-option2-color-pressed: var(--hop-status-option2-icon-press);
834
- --hop-EmbeddedButton-option2-color-disabled: var(--hop-status-option2-icon-disabled);
835
- --hop-EmbeddedButton-option2-effect-background-color: transparent;
836
- --hop-EmbeddedButton-option2-effect-background-color-hovered: var(--hop-status-option2-surface-hover);
837
- --hop-EmbeddedButton-option2-effect-background-color-focused: var(--hop-status-option2-surface-hover);
838
- --hop-EmbeddedButton-option2-effect-background-color-pressed: var(--hop-status-option2-surface-press);
839
- --hop-EmbeddedButton-option2-effect-background-color-disabled: transparent;
840
- --hop-EmbeddedButton-option3-color: var(--hop-status-option3-icon);
841
- --hop-EmbeddedButton-option3-color-hovered: var(--hop-status-option3-icon-hover);
842
- --hop-EmbeddedButton-option3-color-focused: var(--hop-status-option3-icon-hover);
843
- --hop-EmbeddedButton-option3-color-pressed: var(--hop-status-option3-icon-press);
844
- --hop-EmbeddedButton-option3-color-disabled: var(--hop-status-option3-icon-disabled);
845
- --hop-EmbeddedButton-option3-effect-background-color: transparent;
846
- --hop-EmbeddedButton-option3-effect-background-color-hovered: var(--hop-status-option3-surface-hover);
847
- --hop-EmbeddedButton-option3-effect-background-color-focused: var(--hop-status-option3-surface-hover);
848
- --hop-EmbeddedButton-option3-effect-background-color-pressed: var(--hop-status-option3-surface-press);
849
- --hop-EmbeddedButton-option3-effect-background-color-disabled: transparent;
850
- --hop-EmbeddedButton-option4-color: var(--hop-status-option4-icon);
851
- --hop-EmbeddedButton-option4-color-hovered: var(--hop-status-option4-icon-hover);
852
- --hop-EmbeddedButton-option4-color-focused: var(--hop-status-option4-icon-hover);
853
- --hop-EmbeddedButton-option4-color-pressed: var(--hop-status-option4-icon-press);
854
- --hop-EmbeddedButton-option4-color-disabled: var(--hop-status-option4-icon-disabled);
855
- --hop-EmbeddedButton-option4-effect-background-color: transparent;
856
- --hop-EmbeddedButton-option4-effect-background-color-hovered: var(--hop-status-option4-surface-hover);
857
- --hop-EmbeddedButton-option4-effect-background-color-focused: var(--hop-status-option4-surface-hover);
858
- --hop-EmbeddedButton-option4-effect-background-color-pressed: var(--hop-status-option4-surface-press);
859
- --hop-EmbeddedButton-option4-effect-background-color-disabled: transparent;
860
- --hop-EmbeddedButton-option5-color: var(--hop-status-option5-icon);
861
- --hop-EmbeddedButton-option5-color-hovered: var(--hop-status-option5-icon-hover);
862
- --hop-EmbeddedButton-option5-color-focused: var(--hop-status-option5-icon-hover);
863
- --hop-EmbeddedButton-option5-color-pressed: var(--hop-status-option5-icon-press);
864
- --hop-EmbeddedButton-option5-color-disabled: var(--hop-status-option5-icon-disabled);
865
- --hop-EmbeddedButton-option5-effect-background-color: transparent;
866
- --hop-EmbeddedButton-option5-effect-background-color-hovered: var(--hop-status-option5-surface-hover);
867
- --hop-EmbeddedButton-option5-effect-background-color-focused: var(--hop-status-option5-surface-hover);
868
- --hop-EmbeddedButton-option5-effect-background-color-pressed: var(--hop-status-option5-surface-press);
869
- --hop-EmbeddedButton-option5-effect-background-color-disabled: transparent;
870
- --hop-EmbeddedButton-option6-color: var(--hop-status-option6-icon);
871
- --hop-EmbeddedButton-option6-color-hovered: var(--hop-status-option6-icon-hover);
872
- --hop-EmbeddedButton-option6-color-focused: var(--hop-status-option6-icon-hover);
873
- --hop-EmbeddedButton-option6-color-pressed: var(--hop-status-option6-icon-press);
874
- --hop-EmbeddedButton-option6-color-disabled: var(--hop-status-option6-icon-disabled);
875
- --hop-EmbeddedButton-option6-effect-background-color: transparent;
876
- --hop-EmbeddedButton-option6-effect-background-color-hovered: var(--hop-status-option6-surface-hover);
877
- --hop-EmbeddedButton-option6-effect-background-color-focused: var(--hop-status-option6-surface-hover);
878
- --hop-EmbeddedButton-option6-effect-background-color-pressed: var(--hop-status-option6-surface-press);
879
- --hop-EmbeddedButton-option6-effect-background-color-disabled: transparent;
880
- --hop-EmbeddedButton-selected-color: var(--hop-neutral-icon-weak-selected);
881
- --hop-EmbeddedButton-selected-effect-background-color: var(--hop-neutral-surface-weak-selected);
882
- --spinner: var(--hop-primary-icon-strong);
883
- --padding-inline: 0;
884
- --padding-block: 0;
885
- --effect-background-color: var(--hop-EmbeddedButton-neutral-effect-background-color);
886
- --color: var(--hop-EmbeddedButton-neutral-color);
887
- --transition: var(--hop-easing-duration-2) var(--hop-easing-productive);
888
- --effect-border-radius: var(--hop-EmbeddedButton-effect-border-radius);
889
- --focus-ring-size: 0.125rem;
890
- cursor: pointer;
891
- position: relative;
892
- overflow: hidden;
893
- display: flex;
894
- flex-shrink: 0;
895
- align-items: center;
896
- justify-content: center;
897
- box-sizing: border-box;
898
- inline-size: var(--inline-size);
899
- block-size: var(--block-size);
900
- padding-block: var(--padding-block);
901
- padding-inline: var(--padding-inline);
902
- color: var(--color);
903
- text-decoration: none;
904
- white-space: nowrap;
905
- background: none;
906
- border: none;
907
- border-radius: var(--hop-EmbeddedButton-border-radius);
908
- outline: none;
909
- transition: color var(--transition);
910
- }
911
- .EmbeddedButton-module__hop-EmbeddedButton___tHTN9::before {
912
- content: "";
913
- position: absolute;
914
- inset-block-start: 50%;
915
- inset-inline-start: 50%;
916
- transform: translate(-50%, -50%);
917
- display: block;
918
- inline-size: var(--effect-inline-size);
919
- block-size: var(--effect-block-size);
920
- background-color: var(--effect-background-color);
921
- border-radius: var(--effect-border-radius);
922
- transition: background-color var(--transition);
923
- }
924
- .EmbeddedButton-module__hop-EmbeddedButton___tHTN9[data-square] {
925
- --effect-border-radius: var(--hop-EmbeddedButton-effect-square-border-radius);
926
- }
927
- .EmbeddedButton-module__hop-EmbeddedButton--md___GGTp9 {
928
- --inline-size: var(--hop-EmbeddedButton-md-width);
929
- --block-size: var(--hop-EmbeddedButton-md-height);
930
- --focus-ring-offset: calc(-1 * var(--focus-ring-size));
931
- }
932
- .EmbeddedButton-module__hop-EmbeddedButton--lg___y8j8G {
933
- --inline-size: var(--hop-EmbeddedButton-lg-width);
934
- --block-size: var(--hop-EmbeddedButton-lg-height);
935
- --focus-ring-offset: 0;
936
- }
937
- .EmbeddedButton-module__hop-EmbeddedButton--md___GGTp9::before {
938
- --effect-inline-size: var(--hop-EmbeddedButton-md-effect-width);
939
- --effect-block-size: var(--hop-EmbeddedButton-md-effect-height);
940
- }
941
- .EmbeddedButton-module__hop-EmbeddedButton--lg___y8j8G::before {
942
- --effect-inline-size: var(--hop-EmbeddedButton-lg-effect-width);
943
- --effect-block-size: var(--hop-EmbeddedButton-lg-effect-height);
944
- }
945
- .EmbeddedButton-module__hop-EmbeddedButton--neutral___zK4NR {
946
- --color: var(--hop-EmbeddedButton-neutral-color);
947
- --effect-background-color: var(--hop-EmbeddedButton-neutral-effect-background-color);
948
- }
949
- .EmbeddedButton-module__hop-EmbeddedButton--subdued___euARn {
950
- --color: var(--hop-EmbeddedButton-subdued-color);
951
- --effect-background-color: var(--hop-EmbeddedButton-subdued-effect-background-color);
952
- }
953
- .EmbeddedButton-module__hop-EmbeddedButton--progress___Fe8-g {
954
- --color: var(--hop-EmbeddedButton-progress-color);
955
- --effect-background-color: var(--hop-EmbeddedButton-progress-effect-background-color);
956
- }
957
- .EmbeddedButton-module__hop-EmbeddedButton--positive___WxJr- {
958
- --color: var(--hop-EmbeddedButton-positive-color);
959
- --effect-background-color: var(--hop-EmbeddedButton-positive-effect-background-color);
960
- }
961
- .EmbeddedButton-module__hop-EmbeddedButton--caution___IQR3x {
962
- --color: var(--hop-EmbeddedButton-caution-color);
963
- --effect-background-color: var(--hop-EmbeddedButton-caution-effect-background-color);
964
- }
965
- .EmbeddedButton-module__hop-EmbeddedButton--negative___HdKSY {
966
- --color: var(--hop-EmbeddedButton-negative-color);
967
- --effect-background-color: var(--hop-EmbeddedButton-negative-effect-background-color);
968
- }
969
- .EmbeddedButton-module__hop-EmbeddedButton--option1___dJCvA {
970
- --color: var(--hop-EmbeddedButton-option1-color);
971
- --effect-background-color: var(--hop-EmbeddedButton-option1-effect-background-color);
972
- }
973
- .EmbeddedButton-module__hop-EmbeddedButton--option2___2Ek0f {
974
- --color: var(--hop-EmbeddedButton-option2-color);
975
- --effect-background-color: var(--hop-EmbeddedButton-option2-effect-background-color);
976
- }
977
- .EmbeddedButton-module__hop-EmbeddedButton--option3___0DPJ- {
978
- --color: var(--hop-EmbeddedButton-option3-color);
979
- --effect-background-color: var(--hop-EmbeddedButton-option3-effect-background-color);
980
- }
981
- .EmbeddedButton-module__hop-EmbeddedButton--option4___RmwOz {
982
- --color: var(--hop-EmbeddedButton-option4-color);
983
- --effect-background-color: var(--hop-EmbeddedButton-option4-effect-background-color);
984
- }
985
- .EmbeddedButton-module__hop-EmbeddedButton--option5___uxtHf {
986
- --color: var(--hop-EmbeddedButton-option5-color);
987
- --effect-background-color: var(--hop-EmbeddedButton-option5-effect-background-color);
988
- }
989
- .EmbeddedButton-module__hop-EmbeddedButton--option6___9JkLZ {
990
- --color: var(--hop-EmbeddedButton-option6-color);
991
- --effect-background-color: var(--hop-EmbeddedButton-option6-effect-background-color);
992
- }
993
- .EmbeddedButton-module__hop-EmbeddedButton___tHTN9[data-selected] {
994
- --color: var(--hop-EmbeddedButton-selected-color);
995
- --effect-background-color: var(--hop-EmbeddedButton-selected-effect-background-color);
996
- }
997
- .EmbeddedButton-module__hop-EmbeddedButton___tHTN9[data-focus-visible] {
998
- outline: var(--focus-ring-size) solid var(--hop-EmbeddedButton-focus-ring-color);
999
- outline-offset: var(--focus-ring-offset);
1000
- }
1001
- .EmbeddedButton-module__hop-EmbeddedButton___tHTN9[data-disabled] {
1002
- cursor: not-allowed;
1003
- }
1004
- .EmbeddedButton-module__hop-EmbeddedButton--neutral___zK4NR[data-hovered] {
1005
- --effect-background-color: var(--hop-EmbeddedButton-neutral-effect-background-color-hovered);
1006
- --color: var(--hop-EmbeddedButton-neutral-color-hovered);
1007
- }
1008
- .EmbeddedButton-module__hop-EmbeddedButton--neutral___zK4NR[data-focus-visible] {
1009
- --effect-background-color: var(--hop-EmbeddedButton-neutral-effect-background-color-focused);
1010
- --color: var(--hop-EmbeddedButton-neutral-color-focused);
1011
- }
1012
- .EmbeddedButton-module__hop-EmbeddedButton--neutral___zK4NR[data-pressed] {
1013
- --effect-background-color: var(--hop-EmbeddedButton-neutral-effect-background-color-pressed);
1014
- --color: var(--hop-EmbeddedButton-neutral-color-pressed);
1015
- }
1016
- .EmbeddedButton-module__hop-EmbeddedButton--neutral___zK4NR[data-disabled] {
1017
- --effect-background-color: var(--hop-EmbeddedButton-neutral-effect-background-color-disabled);
1018
- --color: var(--hop-EmbeddedButton-neutral-color-disabled);
1019
- }
1020
- .EmbeddedButton-module__hop-EmbeddedButton--subdued___euARn[data-hovered] {
1021
- --effect-background-color: var(--hop-EmbeddedButton-subdued-effect-background-color-hovered);
1022
- --color: var(--hop-EmbeddedButton-subdued-color-hovered);
1023
- }
1024
- .EmbeddedButton-module__hop-EmbeddedButton--subdued___euARn[data-focus-visible] {
1025
- --effect-background-color: var(--hop-EmbeddedButton-subdued-effect-background-color-focused);
1026
- --color: var(--hop-EmbeddedButton-subdued-color-focused);
1027
- }
1028
- .EmbeddedButton-module__hop-EmbeddedButton--subdued___euARn[data-pressed] {
1029
- --effect-background-color: var(--hop-EmbeddedButton-subdued-effect-background-color-pressed);
1030
- --color: var(--hop-EmbeddedButton-subdued-color-pressed);
1031
- }
1032
- .EmbeddedButton-module__hop-EmbeddedButton--subdued___euARn[data-disabled] {
1033
- --effect-background-color: var(--hop-EmbeddedButton-subdued-effect-background-color-disabled);
1034
- --color: var(--hop-EmbeddedButton-subdued-color-disabled);
1035
- }
1036
- .EmbeddedButton-module__hop-EmbeddedButton--progress___Fe8-g[data-hovered] {
1037
- --effect-background-color: var(--hop-EmbeddedButton-progress-effect-background-color-hovered);
1038
- --color: var(--hop-EmbeddedButton-progress-color-hovered);
1039
- }
1040
- .EmbeddedButton-module__hop-EmbeddedButton--progress___Fe8-g[data-focus-visible] {
1041
- --effect-background-color: var(--hop-EmbeddedButton-progress-effect-background-color-focused);
1042
- --color: var(--hop-EmbeddedButton-progress-color-focused);
1043
- }
1044
- .EmbeddedButton-module__hop-EmbeddedButton--progress___Fe8-g[data-pressed] {
1045
- --effect-background-color: var(--hop-EmbeddedButton-progress-effect-background-color-pressed);
1046
- --color: var(--hop-EmbeddedButton-progress-color-pressed);
1047
- }
1048
- .EmbeddedButton-module__hop-EmbeddedButton--progress___Fe8-g[data-disabled] {
1049
- --effect-background-color: var(--hop-EmbeddedButton-progress-effect-background-color-disabled);
1050
- --color: var(--hop-EmbeddedButton-progress-color-disabled);
1051
- }
1052
- .EmbeddedButton-module__hop-EmbeddedButton--positive___WxJr-[data-hovered] {
1053
- --effect-background-color: var(--hop-EmbeddedButton-positive-effect-background-color-hovered);
1054
- --color: var(--hop-EmbeddedButton-positive-color-hovered);
1055
- }
1056
- .EmbeddedButton-module__hop-EmbeddedButton--positive___WxJr-[data-focus-visible] {
1057
- --effect-background-color: var(--hop-EmbeddedButton-positive-effect-background-color-focused);
1058
- --color: var(--hop-EmbeddedButton-positive-color-focused);
1059
- }
1060
- .EmbeddedButton-module__hop-EmbeddedButton--positive___WxJr-[data-pressed] {
1061
- --effect-background-color: var(--hop-EmbeddedButton-positive-effect-background-color-pressed);
1062
- --color: var(--hop-EmbeddedButton-positive-color-pressed);
1063
- }
1064
- .EmbeddedButton-module__hop-EmbeddedButton--positive___WxJr-[data-disabled] {
1065
- --effect-background-color: var(--hop-EmbeddedButton-positive-effect-background-color-disabled);
1066
- --color: var(--hop-EmbeddedButton-positive-color-disabled);
1067
- }
1068
- .EmbeddedButton-module__hop-EmbeddedButton--caution___IQR3x[data-hovered] {
1069
- --effect-background-color: var(--hop-EmbeddedButton-caution-effect-background-color-hovered);
1070
- --color: var(--hop-EmbeddedButton-caution-color-hovered);
1071
- }
1072
- .EmbeddedButton-module__hop-EmbeddedButton--caution___IQR3x[data-focus-visible] {
1073
- --effect-background-color: var(--hop-EmbeddedButton-caution-effect-background-color-focused);
1074
- --color: var(--hop-EmbeddedButton-caution-color-focused);
1075
- }
1076
- .EmbeddedButton-module__hop-EmbeddedButton--caution___IQR3x[data-pressed] {
1077
- --effect-background-color: var(--hop-EmbeddedButton-caution-effect-background-color-pressed);
1078
- --color: var(--hop-EmbeddedButton-caution-color-pressed);
1079
- }
1080
- .EmbeddedButton-module__hop-EmbeddedButton--caution___IQR3x[data-disabled] {
1081
- --effect-background-color: var(--hop-EmbeddedButton-caution-effect-background-color-disabled);
1082
- --color: var(--hop-EmbeddedButton-caution-color-disabled);
1083
- }
1084
- .EmbeddedButton-module__hop-EmbeddedButton--negative___HdKSY[data-hovered] {
1085
- --effect-background-color: var(--hop-EmbeddedButton-negative-effect-background-color-hovered);
1086
- --color: var(--hop-EmbeddedButton-negative-color-hovered);
1087
- }
1088
- .EmbeddedButton-module__hop-EmbeddedButton--negative___HdKSY[data-focus-visible] {
1089
- --effect-background-color: var(--hop-EmbeddedButton-negative-effect-background-color-focused);
1090
- --color: var(--hop-EmbeddedButton-negative-color-focused);
1091
- }
1092
- .EmbeddedButton-module__hop-EmbeddedButton--negative___HdKSY[data-pressed] {
1093
- --effect-background-color: var(--hop-EmbeddedButton-negative-effect-background-color-pressed);
1094
- --color: var(--hop-EmbeddedButton-negative-color-pressed);
1095
- }
1096
- .EmbeddedButton-module__hop-EmbeddedButton--negative___HdKSY[data-disabled] {
1097
- --effect-background-color: var(--hop-EmbeddedButton-negative-effect-background-color-disabled);
1098
- --color: var(--hop-EmbeddedButton-negative-color-disabled);
1099
- }
1100
- .EmbeddedButton-module__hop-EmbeddedButton--option1___dJCvA[data-hovered] {
1101
- --effect-background-color: var(--hop-EmbeddedButton-option1-effect-background-color-hovered);
1102
- --color: var(--hop-EmbeddedButton-option1-color-hovered);
1103
- }
1104
- .EmbeddedButton-module__hop-EmbeddedButton--option1___dJCvA[data-focus-visible] {
1105
- --effect-background-color: var(--hop-EmbeddedButton-option1-effect-background-color-focused);
1106
- --color: var(--hop-EmbeddedButton-option1-color-focused);
1107
- }
1108
- .EmbeddedButton-module__hop-EmbeddedButton--option1___dJCvA[data-pressed] {
1109
- --effect-background-color: var(--hop-EmbeddedButton-option1-effect-background-color-pressed);
1110
- --color: var(--hop-EmbeddedButton-option1-color-pressed);
1111
- }
1112
- .EmbeddedButton-module__hop-EmbeddedButton--option1___dJCvA[data-disabled] {
1113
- --effect-background-color: var(--hop-EmbeddedButton-option1-effect-background-color-disabled);
1114
- --color: var(--hop-EmbeddedButton-option1-color-disabled);
1115
- }
1116
- .EmbeddedButton-module__hop-EmbeddedButton--option2___2Ek0f[data-hovered] {
1117
- --effect-background-color: var(--hop-EmbeddedButton-option2-effect-background-color-hovered);
1118
- --color: var(--hop-EmbeddedButton-option2-color-hovered);
1119
- }
1120
- .EmbeddedButton-module__hop-EmbeddedButton--option2___2Ek0f[data-focus-visible] {
1121
- --effect-background-color: var(--hop-EmbeddedButton-option2-effect-background-color-focused);
1122
- --color: var(--hop-EmbeddedButton-option2-color-focused);
1123
- }
1124
- .EmbeddedButton-module__hop-EmbeddedButton--option2___2Ek0f[data-pressed] {
1125
- --effect-background-color: var(--hop-EmbeddedButton-option2-effect-background-color-pressed);
1126
- --color: var(--hop-EmbeddedButton-option2-color-pressed);
1127
- }
1128
- .EmbeddedButton-module__hop-EmbeddedButton--option2___2Ek0f[data-disabled] {
1129
- --effect-background-color: var(--hop-EmbeddedButton-option2-effect-background-color-disabled);
1130
- --color: var(--hop-EmbeddedButton-option2-color-disabled);
1131
- }
1132
- .EmbeddedButton-module__hop-EmbeddedButton--option3___0DPJ-[data-hovered] {
1133
- --effect-background-color: var(--hop-EmbeddedButton-option3-effect-background-color-hovered);
1134
- --color: var(--hop-EmbeddedButton-option3-color-hovered);
1135
- }
1136
- .EmbeddedButton-module__hop-EmbeddedButton--option3___0DPJ-[data-focus-visible] {
1137
- --effect-background-color: var(--hop-EmbeddedButton-option3-effect-background-color-focused);
1138
- --color: var(--hop-EmbeddedButton-option3-color-focused);
1139
- }
1140
- .EmbeddedButton-module__hop-EmbeddedButton--option3___0DPJ-[data-pressed] {
1141
- --effect-background-color: var(--hop-EmbeddedButton-option3-effect-background-color-pressed);
1142
- --color: var(--hop-EmbeddedButton-option3-color-pressed);
1143
- }
1144
- .EmbeddedButton-module__hop-EmbeddedButton--option3___0DPJ-[data-disabled] {
1145
- --effect-background-color: var(--hop-EmbeddedButton-option3-effect-background-color-disabled);
1146
- --color: var(--hop-EmbeddedButton-option3-color-disabled);
1147
- }
1148
- .EmbeddedButton-module__hop-EmbeddedButton--option4___RmwOz[data-hovered] {
1149
- --effect-background-color: var(--hop-EmbeddedButton-option4-effect-background-color-hovered);
1150
- --color: var(--hop-EmbeddedButton-option4-color-hovered);
1151
- }
1152
- .EmbeddedButton-module__hop-EmbeddedButton--option4___RmwOz[data-focus-visible] {
1153
- --effect-background-color: var(--hop-EmbeddedButton-option4-effect-background-color-focused);
1154
- --color: var(--hop-EmbeddedButton-option4-color-focused);
1155
- }
1156
- .EmbeddedButton-module__hop-EmbeddedButton--option4___RmwOz[data-pressed] {
1157
- --effect-background-color: var(--hop-EmbeddedButton-option4-effect-background-color-pressed);
1158
- --color: var(--hop-EmbeddedButton-option4-color-pressed);
1159
- }
1160
- .EmbeddedButton-module__hop-EmbeddedButton--option4___RmwOz[data-disabled] {
1161
- --effect-background-color: var(--hop-EmbeddedButton-option4-effect-background-color-disabled);
1162
- --color: var(--hop-EmbeddedButton-option4-color-disabled);
1163
- }
1164
- .EmbeddedButton-module__hop-EmbeddedButton--option5___uxtHf[data-hovered] {
1165
- --effect-background-color: var(--hop-EmbeddedButton-option5-effect-background-color-hovered);
1166
- --color: var(--hop-EmbeddedButton-option5-color-hovered);
1167
- }
1168
- .EmbeddedButton-module__hop-EmbeddedButton--option5___uxtHf[data-focus-visible] {
1169
- --effect-background-color: var(--hop-EmbeddedButton-option5-effect-background-color-focused);
1170
- --color: var(--hop-EmbeddedButton-option5-color-focused);
1171
- }
1172
- .EmbeddedButton-module__hop-EmbeddedButton--option5___uxtHf[data-pressed] {
1173
- --effect-background-color: var(--hop-EmbeddedButton-option5-effect-background-color-pressed);
1174
- --color: var(--hop-EmbeddedButton-option5-color-pressed);
1175
- }
1176
- .EmbeddedButton-module__hop-EmbeddedButton--option5___uxtHf[data-disabled] {
1177
- --effect-background-color: var(--hop-EmbeddedButton-option5-effect-background-color-disabled);
1178
- --color: var(--hop-EmbeddedButton-option5-color-disabled);
1179
- }
1180
- .EmbeddedButton-module__hop-EmbeddedButton--option6___9JkLZ[data-hovered] {
1181
- --effect-background-color: var(--hop-EmbeddedButton-option6-effect-background-color-hovered);
1182
- --color: var(--hop-EmbeddedButton-option6-color-hovered);
1183
- }
1184
- .EmbeddedButton-module__hop-EmbeddedButton--option6___9JkLZ[data-focus-visible] {
1185
- --effect-background-color: var(--hop-EmbeddedButton-option6-effect-background-color-focused);
1186
- --color: var(--hop-EmbeddedButton-option6-color-focused);
1187
- }
1188
- .EmbeddedButton-module__hop-EmbeddedButton--option6___9JkLZ[data-pressed] {
1189
- --effect-background-color: var(--hop-EmbeddedButton-option6-effect-background-color-pressed);
1190
- --color: var(--hop-EmbeddedButton-option6-color-pressed);
1191
- }
1192
- .EmbeddedButton-module__hop-EmbeddedButton--option6___9JkLZ[data-disabled] {
1193
- --effect-background-color: var(--hop-EmbeddedButton-option6-effect-background-color-disabled);
1194
- --color: var(--hop-EmbeddedButton-option6-color-disabled);
1195
- }
1196
- .EmbeddedButton-module__hop-EmbeddedButton__icon___QJXMa {
1197
- position: relative;
1198
- }
1199
-
1200
- /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/buttons/src/CloseButton.module.css/#css-module-data */
1201
- button.CloseButton-module__hop-CloseButton___hk3-W {
1202
- --hop-CloseButton-margin-top: 0rem;
1203
- --hop-CloseButton-padding: 0rem;
1204
- --hop-CloseButton-witdh: "fit-content";
1205
- --hop-CloseButton-height: "fit-content";
1206
- inline-size: var(--hop-CloseButton-width);
1207
- block-size: var(--hop-CloseButton-height);
1208
- margin-block-start: var(--hop-CloseButton-margin-top);
1209
- padding: var(--hop-CloseButton-padding);
1210
- }
1211
-
1212
- /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/buttons/src/LinkButton.module.css/#css-module-data */
1213
- .Button-module__hop-Button___XnpzX {
1214
- --hop-Button-border-radius: var(--hop-shape-rounded-md);
1215
- --hop-Button-focus-ring-color: var(--hop-primary-border-focus);
1216
- --hop-Button-column-gap: var(--hop-space-inline-xs);
1217
- --hop-Button-icon-only-column-gap: 0;
1218
- --hop-Button-outline-size: var(--hop-space-20);
1219
- --hop-Button-border-size: var(--hop-space-10);
1220
- --hop-Button-text-underline-offset: var(--hop-space-20);
1221
- --hop-Button-icon-only-padding: 0;
1222
- --hop-Button-sm-height: 2rem;
1223
- --hop-Button-md-height: 2.5rem;
1224
- --hop-Button-sm-padding: 0 var(--hop-space-inset-md);
1225
- --hop-Button-md-padding: 0 var(--hop-space-inset-md);
1226
- --hop-Button-ghost-sm-padding: 0 var(--hop-space-inset-xs);
1227
- --hop-Button-ghost-md-padding: 0 var(--hop-space-inset-sm);
1228
- --hop-Button-color-disabled: var(--hop-neutral-text-disabled);
1229
- --hop-Button-background-color-disabled: var(--hop-neutral-surface-disabled);
1230
- --hop-Button-border-disabled: var(--hop-Button-border-size) solid var(--hop-Button-background-color-disabled);
1231
- --hop-Button-ghost-color-disabled: var(--hop-neutral-text-disabled);
1232
- --hop-Button-ghost-background-color-disabled: transparent;
1233
- --hop-Button-ghost-border-disabled: var(--hop-Button-border-size) solid var(--hop-Button-ghost-background-color-disabled);
1234
- --hop-Button-primary-color: var(--hop-primary-text-strong);
1235
- --hop-Button-primary-color-hover: var(--hop-primary-text-strong-hover);
1236
- --hop-Button-primary-color-pressed: var(--hop-primary-text-strong);
1237
- --hop-Button-primary-background-color: var(--hop-primary-surface-strong);
1238
- --hop-Button-primary-background-color-hover: var(--hop-primary-surface-strong-hover);
1239
- --hop-Button-primary-background-color-pressed: var(--hop-primary-surface-strong-press);
1240
- --hop-Button-primary-border: var(--hop-Button-border-size) solid var(--hop-Button-primary-background-color);
1241
- --hop-Button-primary-border-hover: var(--hop-Button-border-size) solid var(--hop-Button-primary-background-color-hover);
1242
- --hop-Button-primary-border-pressed: var(--hop-Button-border-size) solid var(--hop-Button-primary-background-color-pressed);
1243
- --hop-Button-primary-spinner-color: var(--hop-primary-icon-strong);
1244
- --hop-Button-secondary-color: var(--hop-neutral-text);
1245
- --hop-Button-secondary-color-hover: var(--hop-neutral-text-hover);
1246
- --hop-Button-secondary-color-pressed: var(--hop-neutral-text-press);
1247
- --hop-Button-secondary-background-color: var(--hop-neutral-surface);
1248
- --hop-Button-secondary-background-color-hover: var(--hop-neutral-surface-hover);
1249
- --hop-Button-secondary-background-color-pressed: var(--hop-neutral-surface-press);
1250
- --hop-Button-secondary-border: var(--hop-Button-border-size) solid var(--hop-neutral-border-strong);
1251
- --hop-Button-secondary-border-hover: var(--hop-Button-border-size) solid var(--hop-neutral-border-strong-hover);
1252
- --hop-Button-secondary-border-pressed: var(--hop-Button-border-size) solid var(--hop-neutral-border-strong);
1253
- --hop-Button-secondary-spinner-color: var(--hop-neutral-icon);
1254
- --hop-Button-upsell-color: var(--hop-upsell-text);
1255
- --hop-Button-upsell-color-hover: var(--hop-upsell-text-hover);
1256
- --hop-Button-upsell-color-pressed: var(--hop-upsell-text-press);
1257
- --hop-Button-upsell-background-color: var(--hop-upsell-surface);
1258
- --hop-Button-upsell-background-color-hover: var(--hop-upsell-surface-hover);
1259
- --hop-Button-upsell-background-color-pressed: var(--hop-upsell-surface-press);
1260
- --hop-Button-upsell-border: var(--hop-Button-border-size) solid var(--hop-Button-upsell-background-color);
1261
- --hop-Button-upsell-border-hover: var(--hop-Button-border-size) solid var(--hop-Button-upsell-background-color-hover);
1262
- --hop-Button-upsell-border-pressed: var(--hop-Button-border-size) solid var(--hop-Button-upsell-background-color-pressed);
1263
- --hop-Button-upsell-spinner-color: var(--hop-upsell-icon);
1264
- --hop-Button-danger-color: var(--hop-danger-text-strong);
1265
- --hop-Button-danger-color-hover: var(--hop-danger-text-strong-hover);
1266
- --hop-Button-danger-color-pressed: var(--hop-danger-text-strong-hover);
1267
- --hop-Button-danger-background-color: var(--hop-danger-surface-strong);
1268
- --hop-Button-danger-background-color-hover: var(--hop-danger-surface-strong-hover);
1269
- --hop-Button-danger-background-color-pressed: var(--hop-danger-surface-press);
1270
- --hop-Button-danger-border: var(--hop-Button-border-size) solid var(--hop-Button-danger-background-color);
1271
- --hop-Button-danger-border-hover: var(--hop-Button-border-size) solid var(--hop-Button-danger-background-color-hover);
1272
- --hop-Button-danger-border-pressed: var(--hop-Button-border-size) solid var(--hop-Button-danger-background-color-pressed);
1273
- --hop-Button-danger-spinner-color: var(--hop-primary-icon-strong);
1274
- --hop-Button-ghost-primary-color: var(--hop-primary-text);
1275
- --hop-Button-ghost-primary-color-hover: var(--hop-primary-text-hover);
1276
- --hop-Button-ghost-primary-color-pressed: var(--hop-primary-text-press);
1277
- --hop-Button-ghost-primary-background-color: transparent;
1278
- --hop-Button-ghost-primary-background-color-hover: var(--hop-neutral-surface-hover);
1279
- --hop-Button-ghost-primary-background-color-pressed: var(--hop-primary-surface-weak-press);
1280
- --hop-Button-ghost-primary-border: var(--hop-Button-border-size) solid var(--hop-Button-ghost-primary-background-color);
1281
- --hop-Button-ghost-primary-border-hover: var(--hop-Button-border-size) solid var(--hop-Button-ghost-primary-background-color-hover);
1282
- --hop-Button-ghost-primary-border-pressed: var(--hop-Button-border-size) solid var(--hop-Button-ghost-primary-background-color-pressed);
1283
- --hop-Button-ghost-primary-spinner-color: var(--hop-neutral-icon);
1284
- --hop-Button-ghost-secondary-color: var(--hop-neutral-text-weak);
1285
- --hop-Button-ghost-secondary-color-hover: var(--hop-neutral-text-weak-hover);
1286
- --hop-Button-ghost-secondary-color-pressed: var(--hop-neutral-text-weak-press);
1287
- --hop-Button-ghost-secondary-background-color: transparent;
1288
- --hop-Button-ghost-secondary-background-color-hover: var(--hop-neutral-surface-hover);
1289
- --hop-Button-ghost-secondary-background-color-pressed: var(--hop-neutral-surface-press);
1290
- --hop-Button-ghost-secondary-border: var(--hop-Button-border-size) solid var(--hop-Button-ghost-secondary-background-color);
1291
- --hop-Button-ghost-secondary-border-hover: var(--hop-Button-border-size) solid var(--hop-Button-ghost-secondary-background-color-hover);
1292
- --hop-Button-ghost-secondary-border-pressed: var(--hop-Button-border-size) solid var(--hop-Button-ghost-secondary-background-color-pressed);
1293
- --hop-Button-ghost-secondary-spinner-color: var(--hop-neutral-icon);
1294
- --hop-Button-ghost-danger-color: var(--hop-danger-text-weak);
1295
- --hop-Button-ghost-danger-color-hover: var(--hop-danger-text-hover);
1296
- --hop-Button-ghost-danger-color-pressed: var(--hop-danger-text-press);
1297
- --hop-Button-ghost-danger-background-color: transparent;
1298
- --hop-Button-ghost-danger-background-color-hover: var(--hop-neutral-surface-hover);
1299
- --hop-Button-ghost-danger-background-color-pressed: var(--hop-danger-surface-weak-press);
1300
- --hop-Button-ghost-danger-border: var(--hop-Button-border-size) solid var(--hop-Button-ghost-danger-background-color);
1301
- --hop-Button-ghost-danger-border-hover: var(--hop-Button-border-size) solid var(--hop-Button-ghost-danger-background-color-hover);
1302
- --hop-Button-ghost-danger-border-pressed: var(--hop-Button-border-size) solid var(--hop-Button-ghost-danger-background-color-pressed);
1303
- --hop-Button-ghost-danger-spinner-color: var(--hop-neutral-icon);
1304
- --inline-size: max-content;
1305
- --block-size: var(--hop-Button-md-height);
1306
- --background-color: var(--hop-primary-surface-strong);
1307
- --color: var(--hop-primary-text-strong);
1308
- --column-gap: var(--hop-Button-column-gap);
1309
- --spinner: var(--hop-primary-icon-strong);
1310
- --border: 0;
1311
- --padding: var(--hop-Button-md-padding);
1312
- --text-underline: none;
1313
- cursor: pointer;
1314
- position: relative;
1315
- overflow: hidden;
1316
- display: flex;
1317
- column-gap: var(--column-gap);
1318
- align-items: center;
1319
- justify-content: center;
1320
- box-sizing: border-box;
1321
- inline-size: var(--inline-size);
1322
- block-size: var(--block-size);
1323
- padding: var(--padding);
1324
- color: var(--color);
1325
- text-decoration: none;
1326
- white-space: nowrap;
1327
- background-color: var(--background-color);
1328
- border: var(--border);
1329
- border-radius: var(--hop-Button-border-radius);
1330
- outline: none;
1331
- outline-offset: var(--hop-Button-outline-size);
1332
- transition:
1333
- color var(--hop-easing-duration-2) var(--hop-easing-productive),
1334
- background-color var(--hop-easing-duration-2) var(--hop-easing-productive),
1335
- border var(--hop-easing-duration-2) var(--hop-easing-productive);
1336
- }
1337
- .Button-module__hop-Button--fluid___ZZXwq {
1338
- --inline-size: 100%;
1339
- }
1340
- .Button-module__hop-Button--sm___6jOD3 {
1341
- --block-size: var(--hop-Button-sm-height);
1342
- --padding: var(--hop-Button-sm-padding);
1343
- }
1344
- .Button-module__hop-Button--sm___6jOD3[class*=--ghost] {
1345
- --padding: var(--hop-Button-ghost-sm-padding);
1346
- }
1347
- .Button-module__hop-Button--md___3yl4O[class*=--ghost] {
1348
- --padding: var(--hop-Button-ghost-md-padding);
1349
- }
1350
- .Button-module__hop-Button--icon-only___-VLNH {
1351
- --column-gap: var(--hop-Button-icon-only-column-gap);
1352
- --padding: var(--hop-Button-icon-only-padding);
1353
- aspect-ratio: 1;
1354
- }
1355
- .Button-module__hop-Button--primary___5doCv {
1356
- --background-color: var(--hop-Button-primary-background-color);
1357
- --color: var(--hop-Button-primary-color);
1358
- --border: var(--hop-Button-primary-border);
1359
- --spinner-color: var(--hop-Button-primary-spinner-color);
1360
- }
1361
- .Button-module__hop-Button--primary___5doCv[data-hovered],
1362
- .Button-module__hop-Button--primary___5doCv[data-focus-visible] {
1363
- --background-color: var(--hop-Button-primary-background-color-hover);
1364
- --color: var(--hop-Button-primary-color-hover);
1365
- --border: var(--hop-Button-primary-border-hover);
1366
- }
1367
- .Button-module__hop-Button--primary___5doCv[data-pressed] {
1368
- --background-color: var(--hop-Button-primary-background-color-pressed);
1369
- --color: var(--hop-Button-primary-color-pressed);
1370
- --border: var(--hop-Button-primary-border-pressed);
1371
- }
1372
- .Button-module__hop-Button--secondary___p2tPu {
1373
- --background-color: var(--hop-Button-secondary-background-color);
1374
- --color: var(--hop-Button-secondary-color);
1375
- --border: var(--hop-Button-secondary-border);
1376
- --spinner-color: var(--hop-Button-secondary-spinner-color);
1377
- }
1378
- .Button-module__hop-Button--secondary___p2tPu[data-hovered],
1379
- .Button-module__hop-Button--secondary___p2tPu[data-focus-visible] {
1380
- --background-color: var(--hop-Button-secondary-background-color-hover);
1381
- --color: var(--hop-Button-secondary-color-hover);
1382
- --border: var(--hop-Button-secondary-border-hover);
1383
- }
1384
- .Button-module__hop-Button--secondary___p2tPu[data-pressed] {
1385
- --background-color: var(--hop-Button-secondary-background-color-pressed);
1386
- --color: var(--hop-Button-secondary-color-pressed);
1387
- --border: var(--hop-Button-secondary-border-pressed);
1388
- }
1389
- .Button-module__hop-Button--upsell___pbl2O {
1390
- --background-color: var(--hop-Button-upsell-background-color);
1391
- --color: var(--hop-Button-upsell-color);
1392
- --border: var(--hop-Button-upsell-border);
1393
- --spinner-color: var(--hop-Button-upsell-spinner-color);
1394
- }
1395
- .Button-module__hop-Button--upsell___pbl2O[data-hovered],
1396
- .Button-module__hop-Button--upsell___pbl2O[data-focus-visible] {
1397
- --background-color: var(--hop-Button-upsell-background-color-hover);
1398
- --color: var(--hop-Button-upsell-color-hover);
1399
- --border: var(--hop-Button-upsell-border-hover);
1400
- }
1401
- .Button-module__hop-Button--upsell___pbl2O[data-pressed] {
1402
- --background-color: var(--hop-Button-upsell-background-color-pressed);
1403
- --color: var(--hop-Button-upsell-color-pressed);
1404
- --border: var(--hop-Button-upsell-border-pressed);
1405
- }
1406
- .Button-module__hop-Button--danger___D4nJ- {
1407
- --background-color: var(--hop-Button-danger-background-color);
1408
- --color: var(--hop-Button-danger-color);
1409
- --border: var(--hop-Button-danger-border);
1410
- --spinner-color: var(--hop-Button-danger-spinner-color);
1411
- }
1412
- .Button-module__hop-Button--danger___D4nJ-[data-hovered],
1413
- .Button-module__hop-Button--danger___D4nJ-[data-focus-visible] {
1414
- --background-color: var(--hop-Button-danger-background-color-hover);
1415
- --color: var(--hop-Button-danger-color-hover);
1416
- --border: var(--hop-Button-danger-border-hover);
1417
- }
1418
- .Button-module__hop-Button--danger___D4nJ-[data-pressed] {
1419
- --background-color: var(--hop-Button-danger-background-color-pressed);
1420
- --color: var(--hop-Button-danger-color-pressed);
1421
- --border: var(--hop-Button-danger-border-pressed);
1422
- }
1423
- .Button-module__hop-Button--ghost-primary___WPu49 {
1424
- --background-color: var(--hop-Button-ghost-primary-background-color);
1425
- --color: var(--hop-Button-ghost-primary-color);
1426
- --border: var(--hop-Button-ghost-primary-border);
1427
- --spinner-color: var(--hop-Button-ghost-primary-spinner-color);
1428
- }
1429
- .Button-module__hop-Button--ghost-primary___WPu49[data-hovered],
1430
- .Button-module__hop-Button--ghost-primary___WPu49[data-focus-visible] {
1431
- --background-color: var(--hop-Button-ghost-primary-background-color-hover);
1432
- --color: var(--hop-Button-ghost-primary-color-hover);
1433
- --border: var(--hop-Button-ghost-primary-border-hover);
1434
- --text-underline: underline;
1435
- }
1436
- .Button-module__hop-Button--ghost-primary___WPu49[data-pressed] {
1437
- --background-color: var(--hop-Button-ghost-primary-background-color-pressed);
1438
- --color: var(--hop-Button-ghost-primary-color-pressed);
1439
- --border: var(--hop-Button-ghost-primary-border-pressed);
1440
- --text-underline: underline;
1441
- }
1442
- .Button-module__hop-Button--ghost-secondary___M0eZA {
1443
- --background-color: var(--hop-Button-ghost-secondary-background-color);
1444
- --color: var(--hop-Button-ghost-secondary-color);
1445
- --border: var(--hop-Button-ghost-secondary-border);
1446
- --spinner-color: var(--hop-Button-ghost-secondary-spinner-color);
1447
- }
1448
- .Button-module__hop-Button--ghost-secondary___M0eZA[data-hovered],
1449
- .Button-module__hop-Button--ghost-secondary___M0eZA[data-focus-visible] {
1450
- --background-color: var(--hop-Button-ghost-secondary-background-color-hover);
1451
- --color: var(--hop-Button-ghost-secondary-color-hover);
1452
- --border: var(--hop-Button-ghost-secondary-border-hover);
1453
- --text-underline: underline;
1454
- }
1455
- .Button-module__hop-Button--ghost-secondary___M0eZA[data-pressed] {
1456
- --background-color: var(--hop-Button-ghost-secondary-background-color-pressed);
1457
- --color: var(--hop-Button-ghost-secondary-color-pressed);
1458
- --border: var(--hop-Button-ghost-secondary-border-pressed);
1459
- --text-underline: underline;
1460
- }
1461
- .Button-module__hop-Button--ghost-danger___-Mvaw {
1462
- --background-color: var(--hop-Button-ghost-danger-background-color);
1463
- --color: var(--hop-Button-ghost-danger-color);
1464
- --border: var(--hop-Button-ghost-danger-border);
1465
- --spinner-color: var(--hop-Button-ghost-danger-spinner-color);
1466
- }
1467
- .Button-module__hop-Button--ghost-danger___-Mvaw[data-hovered],
1468
- .Button-module__hop-Button--ghost-danger___-Mvaw[data-focus-visible] {
1469
- --background-color: var(--hop-Button-ghost-danger-background-color-hover);
1470
- --color: var(--hop-Button-ghost-danger-color-hover);
1471
- --border: var(--hop-Button-ghost-danger-border-hover);
1472
- --text-underline: underline;
1473
- }
1474
- .Button-module__hop-Button--ghost-danger___-Mvaw[data-pressed] {
1475
- --background-color: var(--hop-Button-ghost-danger-background-color-pressed);
1476
- --color: var(--hop-Button-ghost-danger-color-pressed);
1477
- --border: var(--hop-Button-ghost-danger-border-pressed);
1478
- --text-underline: underline;
1479
- }
1480
- .Button-module__hop-Button___XnpzX[data-focus-visible] {
1481
- outline: var(--hop-Button-outline-size) solid var(--hop-Button-focus-ring-color);
1482
- }
1483
- .Button-module__hop-Button___XnpzX[data-disabled],
1484
- .Button-module__hop-Button___XnpzX[data-pending] {
1485
- cursor: not-allowed;
1486
- }
1487
- .Button-module__hop-Button___XnpzX[data-disabled] {
1488
- --background-color: var(--hop-Button-background-color-disabled);
1489
- --color: var(--hop-Button-color-disabled);
1490
- --border: var(--hop-Button-border-disabled);
1491
- }
1492
- .Button-module__hop-Button___XnpzX[class*=--ghost][data-disabled] {
1493
- --background-color: var(--hop-Button-ghost-background-color-disabled);
1494
- --color: var(--hop-Button-ghost-color-disabled);
1495
- --border: var(--hop-Button-ghost-border-disabled);
1496
- }
1497
- .Button-module__hop-Button--primary___5doCv[data-pending] {
1498
- --background-color: var(--hop-Button-primary-background-color);
1499
- --color: var(--hop-Button-primary-color);
1500
- --border: var(--hop-Button-primary-border);
1501
- }
1502
- .Button-module__hop-Button--secondary___p2tPu[data-pending] {
1503
- --background-color: var(--hop-Button-secondary-background-color);
1504
- --color: var(--hop-Button-secondary-color);
1505
- --border: var(--hop-Button-secondary-border);
1506
- }
1507
- .Button-module__hop-Button--upsell___pbl2O[data-pending] {
1508
- --background-color: var(--hop-Button-upsell-background-color);
1509
- --color: var(--hop-Button-upsell-color);
1510
- --border: var(--hop-Button-upsell-border);
1511
- }
1512
- .Button-module__hop-Button--danger___D4nJ-[data-pending] {
1513
- --background-color: var(--hop-Button-danger-background-color);
1514
- --color: var(--hop-Button-danger-color);
1515
- --border: var(--hop-Button-danger-border);
1516
- }
1517
- .Button-module__hop-Button--ghost-primary___WPu49[data-pending] {
1518
- --background-color: var(--hop-Button-ghost-primary-background-color);
1519
- --color: var(--hop-Button-ghost-primary-color);
1520
- --border: var(--hop-Button-ghost-primary-border);
1521
- --text-underline: none;
1522
- }
1523
- .Button-module__hop-Button--ghost-secondary___M0eZA[data-pending] {
1524
- --background-color: var(--hop-Button-ghost-secondary-background-color);
1525
- --color: var(--hop-Button-ghost-secondary-color);
1526
- --border: var(--hop-Button-ghost-secondary-border);
1527
- --text-underline: none;
1528
- }
1529
- .Button-module__hop-Button--ghost-danger___-Mvaw[data-pending] {
1530
- --background-color: var(--hop-Button-ghost-danger-background-color);
1531
- --color: var(--hop-Button-ghost-danger-color);
1532
- --border: var(--hop-Button-ghost-danger-border);
1533
- --text-underline: none;
1534
- }
1535
- .Button-module__hop-Button__Spinner___Bhn4b {
1536
- position: absolute;
1537
- color: var(--spinner-color);
1538
- }
1539
- .Button-module__hop-Button__icon___ShNZp,
1540
- .Button-module__hop-Button__icon-list___dbXFP {
1541
- flex: 0 0 auto;
1542
- justify-self: end;
1543
- order: 1;
1544
- }
1545
- .Button-module__hop-Button__text___iwCeX {
1546
- user-select: none;
1547
- overflow: visible;
1548
- flex: 0 1 auto;
1549
- order: 2;
1550
- font-weight: var(--hop-font-weight-505);
1551
- text-decoration: var(--text-underline);
1552
- text-underline-offset: 0.125rem;
1553
- text-wrap: nowrap;
1554
- }
1555
- .Button-module__hop-Button__end-icon___4hJm7,
1556
- .Button-module__hop-Button__end-icon-list___SXzot {
1557
- flex: 0 0 auto;
1558
- order: 3;
1559
- }
1560
- .Button-module__hop-Button___XnpzX .Button-module__hop-Button__icon-list___dbXFP,
1561
- .Button-module__hop-Button___XnpzX .Button-module__hop-Button__end-icon-list___SXzot {
1562
- flex-wrap: nowrap;
1563
- }
1564
- .Button-module__hop-Button___XnpzX[data-pending] > *:not(.Button-module__hop-Button__Spinner___Bhn4b) {
1565
- opacity: 0;
1566
- }
1567
- .LinkButton-module__hop-LinkButton___N0s1M {
1568
- }
1569
- .LinkButton-module__hop-LinkButton--fluid___jCmDA {
1570
- }
1571
- .LinkButton-module__hop-LinkButton--sm___8o1s3 {
1572
- }
1573
- .LinkButton-module__hop-LinkButton--icon-only___EtSuw {
1574
- }
1575
- .LinkButton-module__hop-LinkButton--primary___XcaN5 {
1576
- }
1577
- .LinkButton-module__hop-LinkButton--secondary___41COB {
1578
- }
1579
- .LinkButton-module__hop-LinkButton--upsell___0W6-c {
1580
- }
1581
- .LinkButton-module__hop-LinkButton--danger___Tngcg {
1582
- }
1583
- .LinkButton-module__hop-LinkButton--ghost-primary___I-JA1 {
1584
- }
1585
- .LinkButton-module__hop-LinkButton--ghost-secondary___gDQ1B {
1586
- }
1587
- .LinkButton-module__hop-LinkButton--ghost-danger___4sqcD {
1588
- }
1589
- .LinkButton-module__hop-LinkButton__Spinner___wBN9a {
1590
- }
1591
- .LinkButton-module__hop-LinkButton__icon___5G09q,
1592
- .LinkButton-module__hop-LinkButton__icon-list___ELEM2 {
1593
- }
1594
- .LinkButton-module__hop-LinkButton__text___gC5VW {
1595
- }
1596
- .LinkButton-module__hop-LinkButton__end-icon___uFvlC,
1597
- .LinkButton-module__hop-LinkButton__end-icon-list___rCbkA {
1598
- }
1599
- .LinkButton-module__hop-LinkButton___N0s1M .LinkButton-module__hop-LinkButton__icon-list___ELEM2,
1600
- .LinkButton-module__hop-LinkButton___N0s1M .LinkButton-module__hop-LinkButton__end-icon-list___rCbkA {
1601
- flex-wrap: nowrap;
1602
- }
1603
-
1604
273
  /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/inputs/src/InputGroup.module.css/#css-module-data */
1605
- .InputGroup-module__hop-InputGroup___OXTad {
274
+ .InputGroup-module__hop-InputGroup___9rw5R {
1606
275
  --hop-InputGroup-background: var(--hop-neutral-surface);
1607
276
  --hop-InputGroup-border-color: var(--hop-neutral-border);
1608
277
  --hop-InputGroup-border-width: 0.0625rem;
1609
- --hop-InputGroup-display: inline-flex;
1610
- --hop-InputGroup-display-number: grid;
1611
278
  --hop-InputGroup-gap: var(--hop-space-inline-sm);
1612
- --hop-InputGroup-gap-textarea: 0;
1613
- --hop-InputGroup-gap-number: 0;
1614
- --hop-InputGroup-flex-direction: row;
1615
- --hop-InputGroup-flex-direction-textarea: column;
1616
- --hop-InputGroup-align-items: center;
1617
- --hop-InputGroup-align-items-textarea: flex-end;
1618
279
  --hop-InputGroup-inline-size: fit-content;
1619
- --hop-InputGroup-sm-block-size: 2rem;
1620
- --hop-InputGroup-md-block-size: 2.5rem;
1621
- --hop-InputGroup-block-size-textarea: auto;
1622
280
  --hop-InputGroup-border-radius: var(--hop-shape-rounded-md);
1623
281
  --hop-InputGroup-padding-inline: var(--hop-space-inset-md);
1624
282
  --hop-InputGroup-padding-block: 0;
1625
- --hop-InputGroup-padding-inline-textarea: var(--hop-space-inset-xs);
1626
- --hop-InputGroup-padding-block-textarea: var(--hop-space-inset-xs);
1627
283
  --hop-InputGroup-border-color-hover: var(--hop-neutral-border-hover);
1628
284
  --hop-InputGroup-border-color-focus: var(--hop-primary-border-focus);
1629
285
  --hop-InputGroup-background-hover: var(--hop-neutral-surface-hover);
1630
286
  --hop-InputGroup-border-color-invalid: var(--hop-danger-border-strong);
1631
- --hop-InputGroup-input-color: var(--hop-neutral-text);
1632
- --hop-InputGroup-input-color-disabled: var(--hop-neutral-text-disabled);
1633
- --hop-InputGroup-input-sm-font-family: var(--hop-body-sm-font-family);
1634
- --hop-InputGroup-input-sm-font-size: var(--hop-body-sm-font-size);
1635
- --hop-InputGroup-input-sm-font-weight: var(--hop-body-sm-font-weight);
1636
- --hop-InputGroup-input-sm-line-height: var(--hop-body-sm-line-height);
1637
- --hop-InputGroup-input-sm-block-size: 1.5rem;
1638
- --hop-InputGroup-input-md-font-family: var(--hop-body-md-font-family);
1639
- --hop-InputGroup-input-md-font-size: var(--hop-body-md-font-size);
1640
- --hop-InputGroup-input-md-font-weight: var(--hop-body-md-font-weight);
1641
- --hop-InputGroup-input-md-line-height: var(--hop-body-md-line-height);
1642
- --hop-InputGroup-input-md-block-size: 2rem;
1643
- --hop-InputGroup-input-padding: 0;
1644
- --hop-InputGroup-textarea-padding: var(--hop-space-inset-xs) calc(var(--hop-space-inset-md) - var(--hop-space-inset-xs));
1645
287
  --hop-InputGroup-background-disabled: var(--hop-neutral-surface-disabled);
1646
288
  --hop-InputGroup-border-color-disabled: var(--hop-neutral-border-disabled);
1647
- --hop-InputGroup-placeholder-font-family: inherit;
1648
- --hop-InputGroup-placeholder-font-size: inherit;
1649
- --hop-InputGroup-placeholder-font-weight: inherit;
1650
- --hop-InputGroup-placeholder-line-height: inherit;
1651
- --hop-InputGroup-placeholder-color: var(--hop-neutral-text-weakest);
1652
- --hop-InputGroup-placeholder-color-disabled: var(--hop-neutral-text-disabled);
1653
- --hop-InputGroup-embedded-button-margin-inline-end: calc(-1 * var(--hop-space-inline-sm));
1654
289
  --inline-size: var(--hop-InputGroup-inline-size);
1655
290
  --border: var(--hop-InputGroup-border-width) solid var(--hop-InputGroup-border-color);
1656
291
  --background: var(--hop-InputGroup-background);
1657
- --block-size: var(--hop-InputGroup-md-block-size);
1658
- --display: var(--hop-InputGroup-display);
1659
- --gap: var(--hop-InputGroup-gap);
1660
- --flex-direction: var(--hop-InputGroup-flex-direction);
1661
- --align-items: var(--hop-InputGroup-align-items);
1662
- --padding-inline: var(--hop-InputGroup-padding-inline);
1663
- --padding-block: var(--hop-InputGroup-padding-block);
1664
- --input-font-family: var(--hop-InputGroup-input-md-font-family);
1665
- --input-font-size: var(--hop-InputGroup-input-md-font-size);
1666
- --input-font-weight: var(--hop-InputGroup-input-md-font-weight);
1667
- --input-line-height: var(--hop-InputGroup-input-md-line-height);
1668
- --input-block-size: var(--hop-InputGroup-input-md-block-size);
1669
- --input-inline-size: initial;
1670
- --input-color: var(--hop-InputGroup-input-color);
1671
- --input-placeholder-color: var(--hop-InputGroup-placeholder-color);
1672
292
  position: relative;
1673
- display: var(--display);
1674
- flex-direction: var(--flex-direction);
1675
- gap: var(--gap);
1676
- align-items: var(--align-items);
293
+ display: inline-flex;
294
+ flex-direction: row;
295
+ gap: var(--hop-InputGroup-gap);
296
+ align-items: center;
1677
297
  box-sizing: border-box;
1678
298
  inline-size: var(--inline-size);
1679
- block-size: var(--block-size);
1680
- padding-block: var(--padding-block);
1681
- padding-inline: var(--padding-inline);
299
+ padding-block: var(--hop-InputGroup-padding-block);
300
+ padding-inline: var(--hop-InputGroup-padding-inline);
1682
301
  background: var(--background);
1683
302
  border: var(--border);
1684
303
  border-radius: var(--hop-InputGroup-border-radius);
1685
304
  }
1686
- .InputGroup-module__hop-InputGroup--fluid___LRrQa {
305
+ .InputGroup-module__hop-InputGroup--fluid___sKCvC {
1687
306
  --inline-size: 100%;
1688
- --input-inline-size: 100%;
1689
- }
1690
- .InputGroup-module__hop-InputGroup--sm___zPq-r {
1691
- --block-size: var(--hop-InputGroup-sm-block-size);
1692
- --input-font-family: var(--hop-InputGroup-input-sm-font-family);
1693
- --input-font-size: var(--hop-InputGroup-input-sm-font-size);
1694
- --input-font-weight: var(--hop-InputGroup-input-sm-font-weight);
1695
- --input-line-height: var(--hop-InputGroup-input-sm-line-height);
1696
- --input-block-size: var(--hop-InputGroup-input-sm-block-size);
1697
- }
1698
- .InputGroup-module__hop-InputGroup___OXTad[data-input-type=textarea] {
1699
- --gap: var(--hop-InputGroup-gap-textarea);
1700
- --flex-direction: var(--hop-InputGroup-flex-direction-textarea);
1701
- --align-items: var(--hop-InputGroup-align-items-textarea);
1702
- --block-size: var(--hop-InputGroup-block-size-textarea);
1703
- --padding-inline: var(--hop-InputGroup-padding-inline-textarea);
1704
- --padding-block: var(--hop-InputGroup-padding-block-textarea);
1705
307
  }
1706
- .InputGroup-module__hop-InputGroup___OXTad[data-input-type=number] {
1707
- --display: var(--hop-InputGroup-display-number);
1708
- --gap: var(--hop-InputGroup-gap-number);
1709
- }
1710
- .InputGroup-module__hop-InputGroup___OXTad[data-hovered] {
308
+ .InputGroup-module__hop-InputGroup___9rw5R[data-hovered] {
1711
309
  --background: var(--hop-InputGroup-background-hover);
1712
310
  --border: var(--hop-InputGroup-border-width) solid var(--hop-InputGroup-border-color-hover) ;
1713
311
  }
1714
- .InputGroup-module__hop-InputGroup___OXTad[data-focus-within] {
312
+ .InputGroup-module__hop-InputGroup___9rw5R[data-focus-within] {
1715
313
  --border: var(--hop-InputGroup-border-width) solid var(--hop-InputGroup-border-color-focus) ;
1716
314
  }
1717
- .InputGroup-module__hop-InputGroup___OXTad[data-invalid] {
315
+ .InputGroup-module__hop-InputGroup___9rw5R[data-invalid] {
1718
316
  --border: var(--hop-InputGroup-border-width) solid var(--hop-InputGroup-border-color-invalid) ;
1719
317
  }
1720
- .InputGroup-module__hop-InputGroup___OXTad[data-disabled] {
318
+ .InputGroup-module__hop-InputGroup___9rw5R[data-disabled] {
1721
319
  --background: var(--hop-InputGroup-background-disabled);
1722
- --border: 0.0625rem solid var(--hop-InputGroup-border-color-disabled);
1723
- --input-color: var(--hop-InputGroup-input-color-disabled);
1724
- --input-placeholder-color: var(--hop-InputGroup-placeholder-color-disabled);
1725
- }
1726
- .InputGroup-module__hop-InputGroup__input___Tv0Yf,
1727
- .InputGroup-module__hop-InputGroup__textarea___UwBOu {
1728
- flex: 1 1 auto;
1729
- box-sizing: border-box;
1730
- inline-size: var(--input-inline-size);
1731
- min-inline-size: 0;
1732
- font-family: var(--input-font-family);
1733
- font-size: var(--input-font-size);
1734
- font-weight: var(--input-font-weight);
1735
- line-height: var(--input-line-height);
1736
- color: var(--input-color);
1737
- background: transparent;
1738
- border: none;
1739
- outline: none;
1740
- }
1741
- .InputGroup-module__hop-InputGroup__input___Tv0Yf {
1742
- block-size: var(--input-block-size);
1743
- padding: var(--hop-InputGroup-input-padding);
1744
- }
1745
- .InputGroup-module__hop-InputGroup__textarea___UwBOu {
1746
- padding: var(--hop-InputGroup-textarea-padding);
1747
- }
1748
- .InputGroup-module__hop-InputGroup__input___Tv0Yf::placeholder {
1749
- font-family: var(--hop-InputGroup-placeholder-font-family);
1750
- font-size: var(--hop-InputGroup-placeholder-font-size);
1751
- font-weight: var(--hop-InputGroup-placeholder-font-weight);
1752
- line-height: var(--hop-InputGroup-placeholder-line-height);
1753
- color: var(--input-placeholder-color);
1754
- }
1755
- .InputGroup-module__hop-InputGroup__embedded-button___fVr-x {
1756
- margin-inline-end: var(--hop-InputGroup-embedded-button-margin-inline-end);
320
+ --border: var(--hop-InputGroup-border-width) solid var(--hop-InputGroup-border-color-disabled);
1757
321
  }
1758
322
 
1759
323
  /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/inputs/src/RemainingCharacterCount.module.css/#css-module-data */
1760
- .RemainingCharacterCount-module__hop-RemainingCharacterCount___fWRUl {
324
+ .RemainingCharacterCount-module__hop-RemainingCharacterCount___s9M-c {
1761
325
  --hop-RemainingCharacterCount-color: var(--hop-neutral-text-weak);
1762
326
  --hop-RemainingCharacterCount-color-disabled: var(--hop-neutral-text-disabled);
1763
327
  --hop-RemainingCharacterCount-color-invalid: var(--hop-danger-text-weak);
1764
328
  --char-count-color: var(--hop-RemainingCharacterCount-color);
1765
329
  color: var(--char-count-color);
1766
330
  }
1767
- .RemainingCharacterCount-module__hop-RemainingCharacterCount___fWRUl[data-invalid] {
331
+ .RemainingCharacterCount-module__hop-RemainingCharacterCount___s9M-c[data-invalid] {
1768
332
  --char-count-color: var(--hop-RemainingCharacterCount-color-invalid);
1769
333
  }
1770
- .RemainingCharacterCount-module__hop-RemainingCharacterCount___fWRUl[data-disabled] {
334
+ .RemainingCharacterCount-module__hop-RemainingCharacterCount___s9M-c[data-disabled] {
1771
335
  --char-count-color: var(--hop-RemainingCharacterCount-color-disabled);
1772
336
  }
1773
337
 
1774
338
  /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/inputs/src/TextArea.module.css/#css-module-data */
1775
- .TextArea-module__hop-TextArea___R2rzZ {
339
+ .TextArea-module__hop-TextArea___HRJaC {
1776
340
  --hop-TextArea-gap: var(--hop-space-stack-xs);
1777
341
  --hop-TextArea-inline-size: 20rem;
1778
342
  --hop-TextArea-prefix-color: var(--hop-neutral-text-weak);
1779
343
  --hop-TextArea-input-min-height: 2rem;
1780
- --hop-TextArea-remaining-character-count-padding: 0 calc(var(--hop-space-inset-md) - var(--hop-space-inset-xs)) var(--hop-space-inset-xs);
344
+ --hop-TextArea-sm-font-family: var(--hop-body-sm-font-family);
345
+ --hop-TextArea-sm-font-size: var(--hop-body-sm-font-size);
346
+ --hop-TextArea-sm-font-weight: var(--hop-body-sm-font-weight);
347
+ --hop-TextArea-sm-line-height: var(--hop-body-sm-line-height);
348
+ --hop-TextArea-md-font-family: var(--hop-body-md-font-family);
349
+ --hop-TextArea-md-font-size: var(--hop-body-md-font-size);
350
+ --hop-TextArea-md-font-weight: var(--hop-body-md-font-weight);
351
+ --hop-TextArea-md-line-height: var(--hop-body-md-line-height);
352
+ --hop-TextArea-color-disabled: var(--hop-neutral-text-disabled);
353
+ --hop-TextArea-placeholder-color: var(--hop-neutral-text-weakest);
354
+ --hop-TextArea-placeholder-color-disabled: var(--hop-neutral-text-disabled);
1781
355
  --inline-size: var(--hop-TextArea-inline-size);
1782
356
  --resize: none;
357
+ --input-placeholder-color: var(--hop-TextArea-placeholder-color);
358
+ --font-family: var(--hop-TextArea-md-font-family);
359
+ --font-size: var(--hop-TextArea-md-font-size);
360
+ --font-weight: var(--hop-TextArea-md-font-weight);
361
+ --line-height: var(--hop-TextArea-md-line-height);
362
+ --block-size: var(--hop-TextArea-md-block-size);
1783
363
  display: flex;
1784
364
  flex-direction: column;
1785
365
  gap: var(--hop-TextArea-gap);
1786
366
  inline-size: var(--inline-size);
1787
367
  max-inline-size: 100%;
1788
368
  }
1789
- .TextArea-module__hop-TextArea--fluid___QLz0P {
369
+ .TextArea-module__hop-TextArea--fluid___yWvrM {
1790
370
  --inline-size: 100%;
1791
371
  }
1792
- .TextArea-module__hop-TextArea___R2rzZ[data-resize-mode=vertical] {
372
+ .TextArea-module__hop-TextArea___HRJaC[data-resize-mode=vertical] {
1793
373
  --resize: vertical;
1794
374
  }
1795
- .TextArea-module__hop-TextArea__Label___Ks2KO {
375
+ .TextArea-module__hop-TextArea__Label___IkJVe {
1796
376
  order: 0;
1797
377
  }
1798
- .TextArea-module__hop-TextArea__prefix___ZPTAp {
378
+ .TextArea-module__hop-TextArea__prefix___yCWvd {
1799
379
  color: var(--hop-TextArea-prefix-color);
1800
380
  }
1801
- .TextArea-module__hop-TextArea__InputGroup___PFycK {
381
+ .TextArea-module__hop-TextArea__RemainingCharacterCount___xIxHm {
382
+ padding-block-end: var(--hop-space-inset-sm);
383
+ padding-inline: var(--hop-space-inset-md);
384
+ }
385
+ .TextArea-module__hop-TextArea__InputGroup___7JcmJ {
386
+ flex-direction: column;
387
+ gap: 0;
388
+ align-items: flex-end;
1802
389
  order: 1;
390
+ padding: 0;
1803
391
  }
1804
- .TextArea-module__hop-TextArea__RemainingCharacterCount___uCjxU {
1805
- padding: var(--hop-TextArea-remaining-character-count-padding);
392
+ .TextArea-module__hop-TextArea__ErrorMessage___Zt1yk,
393
+ .TextArea-module__hop-TextArea__HelperMessage___Fowsg {
394
+ order: 3;
1806
395
  }
1807
- .TextArea-module__hop-TextArea__textarea___CK8JF {
396
+ .TextArea-module__hop-TextArea__textarea___Om6nK {
1808
397
  resize: var(--resize);
1809
- min-block-size: var(--hop-TextArea-input-min-height);
398
+ overflow: hidden;
399
+ flex-direction: column;
400
+ flex-grow: 1;
401
+ flex-shrink: 1;
402
+ gap: 0;
403
+ align-items: flex-end;
404
+ box-sizing: border-box;
405
+ inline-size: 100%;
406
+ min-inline-size: 0;
407
+ block-size: auto;
408
+ min-block-size: 0;
409
+ padding: var(--hop-space-inset-sm) var(--hop-space-inset-md);
410
+ font-family: var(--font-family);
411
+ font-size: var(--font-size);
412
+ font-weight: var(--font-weight);
413
+ line-height: var(--line-height);
414
+ color: inherit;
415
+ background-color: transparent;
416
+ border: 0;
417
+ outline-style: none;
418
+ }
419
+ .TextArea-module__hop-TextArea__textarea--with-character-count___bhxTQ {
420
+ padding-block-end: 0;
421
+ }
422
+ .TextArea-module__hop-TextArea__textarea--sm___4cfiJ {
423
+ --font-family: var(--hop-TextArea-sm-font-family);
424
+ --font-size: var(--hop-TextArea-sm-font-size);
425
+ --font-weight: var(--hop-TextArea-sm-font-weight);
426
+ --line-height: var(--hop-TextArea-sm-line-height);
427
+ }
428
+ .TextArea-module__hop-TextArea__textarea___Om6nK::placeholder {
429
+ font-family: var(--hop-TextArea-placeholder-font-family);
430
+ font-size: var(--hop-TextArea-placeholder-font-size);
431
+ font-weight: var(--hop-TextArea-placeholder-font-weight);
432
+ line-height: var(--hop-TextArea-placeholder-line-height);
433
+ color: var(--input-placeholder-color);
1810
434
  }
1811
- .TextArea-module__hop-TextArea__ErrorMessage___67p6A,
1812
- .TextArea-module__hop-TextArea__HelperMessage___Gifdy {
1813
- order: 3;
435
+ .TextArea-module__hop-TextArea__textarea___Om6nK[data-disabled] {
436
+ --input-placeholder-color: var(--hop-TextArea-placeholder-color-disabled);
437
+ color: var(--hop-TextArea-color-disabled);
1814
438
  }