@hopper-ui/components 1.4.6 → 1.4.8

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 (325) 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 +3 -3
  8. package/dist/Avatar/src/Avatar.css +56 -56
  9. package/dist/Avatar/src/Avatar.js +5 -5
  10. package/dist/Avatar/src/DeletedAvatar.css +38 -38
  11. package/dist/Avatar/src/DeletedAvatar.js +3 -3
  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 +7 -7
  16. package/dist/Badge/src/Badge.css +43 -43
  17. package/dist/Badge/src/Badge.js +3 -3
  18. package/dist/Badge/src/FloatingBadge.css +38 -38
  19. package/dist/Badge/src/FloatingBadge.js +2 -2
  20. package/dist/Badge/src/index.css +53 -53
  21. package/dist/Badge/src/index.js +5 -5
  22. package/dist/Callout/src/Callout.css +1649 -0
  23. package/dist/Callout/src/Callout.d.ts +38 -0
  24. package/dist/Callout/src/Callout.js +30 -0
  25. package/dist/Callout/src/CalloutContext.d.ts +10 -0
  26. package/dist/Callout/src/CalloutContext.js +2 -0
  27. package/dist/Callout/src/CompactCallout.css +1750 -0
  28. package/dist/Callout/src/CompactCallout.d.ts +18 -0
  29. package/dist/Callout/src/CompactCallout.js +31 -0
  30. package/dist/Callout/src/CompactCalloutContext.d.ts +11 -0
  31. package/dist/Callout/src/CompactCalloutContext.js +2 -0
  32. package/dist/Callout/src/index.css +1835 -0
  33. package/dist/Callout/src/index.d.ts +9 -0
  34. package/dist/Callout/src/index.js +33 -0
  35. package/dist/Card/src/Card.css +31 -31
  36. package/dist/Card/src/Card.js +1 -1
  37. package/dist/Card/src/index.css +31 -31
  38. package/dist/Card/src/index.js +1 -1
  39. package/dist/ComboBox/src/ComboBox.css +3200 -2838
  40. package/dist/ComboBox/src/ComboBox.d.ts +6 -6
  41. package/dist/ComboBox/src/ComboBox.js +28 -25
  42. package/dist/ComboBox/src/ComboBoxContext.d.ts +3 -2
  43. package/dist/ComboBox/src/index.css +3200 -2838
  44. package/dist/ComboBox/src/index.d.ts +4 -3
  45. package/dist/ComboBox/src/index.js +28 -25
  46. package/dist/Disclosure/src/Disclosure.css +38 -38
  47. package/dist/Disclosure/src/Disclosure.js +3 -3
  48. package/dist/Disclosure/src/DisclosureHeader.css +45 -45
  49. package/dist/Disclosure/src/DisclosureHeader.js +10 -10
  50. package/dist/Disclosure/src/DisclosurePanel.css +38 -38
  51. package/dist/Disclosure/src/DisclosurePanel.js +9 -9
  52. package/dist/Disclosure/src/index.css +63 -63
  53. package/dist/Disclosure/src/index.js +14 -14
  54. package/dist/Divider/src/Divider.css +30 -30
  55. package/dist/Divider/src/Divider.js +1 -1
  56. package/dist/Divider/src/index.css +30 -30
  57. package/dist/Divider/src/index.js +1 -1
  58. package/dist/ErrorMessage/src/ErrorMessage.css +30 -30
  59. package/dist/ErrorMessage/src/ErrorMessage.js +3 -3
  60. package/dist/ErrorMessage/src/index.css +30 -30
  61. package/dist/ErrorMessage/src/index.js +3 -3
  62. package/dist/Form/src/Form.css +28 -28
  63. package/dist/Form/src/Form.js +1 -1
  64. package/dist/Form/src/index.css +28 -28
  65. package/dist/Form/src/index.js +1 -1
  66. package/dist/HelperMessage/src/HelperMessage.css +30 -30
  67. package/dist/HelperMessage/src/HelperMessage.js +2 -2
  68. package/dist/HelperMessage/src/index.css +30 -30
  69. package/dist/HelperMessage/src/index.js +2 -2
  70. package/dist/IconList/src/IconList.css +29 -29
  71. package/dist/IconList/src/IconList.js +1 -1
  72. package/dist/IconList/src/index.css +29 -29
  73. package/dist/IconList/src/index.js +1 -1
  74. package/dist/IllustratedMessage/src/IllustratedMessage.css +281 -269
  75. package/dist/IllustratedMessage/src/IllustratedMessage.js +2 -2
  76. package/dist/IllustratedMessage/src/index.css +281 -269
  77. package/dist/IllustratedMessage/src/index.js +2 -2
  78. package/dist/Image/src/Image.css +31 -31
  79. package/dist/Image/src/Image.js +1 -1
  80. package/dist/Image/src/SvgImage.css +29 -29
  81. package/dist/Image/src/SvgImage.js +1 -1
  82. package/dist/Image/src/index.css +32 -32
  83. package/dist/Image/src/index.js +2 -2
  84. package/dist/Link/src/Link.css +59 -59
  85. package/dist/Link/src/Link.js +8 -8
  86. package/dist/Link/src/index.css +59 -59
  87. package/dist/Link/src/index.js +8 -8
  88. package/dist/ListBox/src/ListBox.css +275 -275
  89. package/dist/ListBox/src/ListBox.js +14 -14
  90. package/dist/ListBox/src/ListBoxItem.css +263 -263
  91. package/dist/ListBox/src/ListBoxItem.js +12 -12
  92. package/dist/ListBox/src/ListBoxItemSkeleton.css +35 -35
  93. package/dist/ListBox/src/ListBoxItemSkeleton.js +1 -1
  94. package/dist/ListBox/src/index.css +275 -275
  95. package/dist/ListBox/src/index.js +14 -14
  96. package/dist/SegmentedControl/src/SegmentedControl.css +29 -29
  97. package/dist/SegmentedControl/src/SegmentedControl.js +1 -1
  98. package/dist/SegmentedControl/src/SegmentedControlItem.css +43 -43
  99. package/dist/SegmentedControl/src/SegmentedControlItem.js +7 -7
  100. package/dist/SegmentedControl/src/index.css +44 -44
  101. package/dist/SegmentedControl/src/index.d.ts +2 -0
  102. package/dist/SegmentedControl/src/index.js +10 -10
  103. package/dist/Select/src/Select.css +587 -575
  104. package/dist/Select/src/Select.js +26 -26
  105. package/dist/Select/src/SelectValue.css +62 -62
  106. package/dist/Select/src/SelectValue.js +8 -8
  107. package/dist/Select/src/index.css +587 -575
  108. package/dist/Select/src/index.js +26 -26
  109. package/dist/Spinner/src/Spinner.css +38 -38
  110. package/dist/Spinner/src/Spinner.js +2 -2
  111. package/dist/Spinner/src/index.css +38 -38
  112. package/dist/Spinner/src/index.js +2 -2
  113. package/dist/Tile/src/Tile.css +326 -0
  114. package/dist/Tile/src/Tile.d.ts +20 -0
  115. package/dist/Tile/src/Tile.js +19 -0
  116. package/dist/Tile/src/TileContext.d.ts +9 -0
  117. package/dist/Tile/src/TileContext.js +2 -0
  118. package/dist/Tile/src/TileGroup.css +241 -0
  119. package/dist/Tile/src/TileGroup.d.ts +30 -0
  120. package/dist/Tile/src/TileGroup.js +6 -0
  121. package/dist/Tile/src/TileGroupContext.d.ts +8 -0
  122. package/dist/Tile/src/TileGroupContext.js +2 -0
  123. package/dist/Tile/src/index.css +334 -0
  124. package/dist/Tile/src/index.d.ts +7 -0
  125. package/dist/Tile/src/index.js +21 -0
  126. package/dist/ToggleArrow/src/ToggleArrow.css +30 -30
  127. package/dist/ToggleArrow/src/ToggleArrow.js +1 -1
  128. package/dist/ToggleArrow/src/index.css +30 -30
  129. package/dist/ToggleArrow/src/index.js +1 -1
  130. package/dist/buttons/src/Button.css +94 -94
  131. package/dist/buttons/src/Button.js +10 -10
  132. package/dist/buttons/src/ButtonGroup.css +39 -39
  133. package/dist/buttons/src/ButtonGroup.js +1 -1
  134. package/dist/buttons/src/ClearButton.css +99 -99
  135. package/dist/buttons/src/ClearButton.d.ts +12 -5
  136. package/dist/buttons/src/ClearButton.js +4 -4
  137. package/dist/buttons/src/ClearButtonContext.d.ts +2 -4
  138. package/dist/buttons/src/CloseButton.css +679 -0
  139. package/dist/buttons/src/CloseButton.d.ts +18 -0
  140. package/dist/buttons/src/CloseButton.js +27 -0
  141. package/dist/buttons/src/CloseButtonContext.d.ts +13 -0
  142. package/dist/buttons/src/CloseButtonContext.js +2 -0
  143. package/dist/buttons/src/EmbeddedButton.css +99 -99
  144. package/dist/buttons/src/EmbeddedButton.d.ts +27 -7
  145. package/dist/buttons/src/EmbeddedButton.js +1 -1
  146. package/dist/buttons/src/EmbeddedButtonContext.d.ts +1 -4
  147. package/dist/buttons/src/LinkButton.css +103 -103
  148. package/dist/buttons/src/LinkButton.js +8 -8
  149. package/dist/buttons/src/index.css +262 -250
  150. package/dist/buttons/src/index.d.ts +4 -1
  151. package/dist/buttons/src/index.js +17 -15
  152. package/dist/checkbox/src/Checkbox.css +47 -47
  153. package/dist/checkbox/src/Checkbox.js +8 -8
  154. package/dist/checkbox/src/CheckboxField.css +34 -34
  155. package/dist/checkbox/src/CheckboxField.js +4 -4
  156. package/dist/checkbox/src/CheckboxGroup.css +99 -99
  157. package/dist/checkbox/src/CheckboxGroup.js +9 -9
  158. package/dist/checkbox/src/DecorativeCheckbox.css +55 -55
  159. package/dist/checkbox/src/DecorativeCheckbox.js +9 -9
  160. package/dist/checkbox/src/index.css +99 -99
  161. package/dist/checkbox/src/index.js +16 -16
  162. package/dist/{chunk-NH3IVMXB.js → chunk-2NSUMKNH.js} +1 -1
  163. package/dist/chunk-3MTGAZ77.js +7 -0
  164. package/dist/{chunk-FQHHLFAB.js → chunk-53WBWLKL.js} +12 -11
  165. package/dist/chunk-56WMYNUD.js +79 -0
  166. package/dist/{chunk-73CBNN4K.js → chunk-5TGWIM5C.js} +16 -14
  167. package/dist/{chunk-OUGECIOS.js → chunk-6CVROWNN.js} +2 -2
  168. package/dist/{chunk-67VFL63C.js → chunk-725VVVMA.js} +1 -1
  169. package/dist/{chunk-OMGZXRVE.js → chunk-72CSHV4D.js} +6 -6
  170. package/dist/{chunk-TFVDF4YH.js → chunk-75DHKNW2.js} +2 -0
  171. package/dist/chunk-7HIGRTLG.js +34 -0
  172. package/dist/{chunk-ZLWJJVD3.js → chunk-7JQJ5U7J.js} +1 -1
  173. package/dist/{chunk-Q5WT3U7W.js → chunk-7SMF3TO5.js} +2 -2
  174. package/dist/{chunk-OUTV4GW4.js → chunk-AD5GQ24L.js} +1 -1
  175. package/dist/{chunk-GK7I65BF.js → chunk-B7MWXJWS.js} +2 -2
  176. package/dist/{chunk-X5H6RCTP.js → chunk-BPO44JV2.js} +4 -4
  177. package/dist/{chunk-XE6JG2MF.js → chunk-CKH5EUEC.js} +3 -3
  178. package/dist/{chunk-JELBOYLB.js → chunk-CYICQ2TZ.js} +1 -1
  179. package/dist/{chunk-RTB477QF.js → chunk-CZRMFNRT.js} +3 -3
  180. package/dist/{chunk-KUBUEVXB.js → chunk-EZF74GSX.js} +2 -2
  181. package/dist/chunk-EZXZMHPJ.js +77 -0
  182. package/dist/chunk-F6D7LSXZ.js +73 -0
  183. package/dist/{chunk-25APP2V4.js → chunk-F6NQHY35.js} +1 -1
  184. package/dist/{chunk-5OS5HF6G.js → chunk-GOY3T3HI.js} +3 -3
  185. package/dist/chunk-GRCAVJC6.js +7 -0
  186. package/dist/{chunk-5CW3ZTUM.js → chunk-GZYLFGDT.js} +4 -4
  187. package/dist/{chunk-C67PNOQX.js → chunk-I2LTZFXN.js} +3 -3
  188. package/dist/{chunk-X7QAJPWB.js → chunk-IMUQCB4Q.js} +2 -2
  189. package/dist/{chunk-BQZSLU4S.js → chunk-IYT75GWO.js} +2 -2
  190. package/dist/chunk-JTNKUYE5.js +8 -0
  191. package/dist/{chunk-3AB3J5EP.js → chunk-JZ4LJ4M4.js} +4 -4
  192. package/dist/{chunk-BQJA5YLU.js → chunk-KFH2WZVX.js} +7 -7
  193. package/dist/{chunk-MISFLYHH.js → chunk-KIQW5BE4.js} +3 -3
  194. package/dist/{chunk-IFQPPUVZ.js → chunk-KVJHBVJU.js} +51 -72
  195. package/dist/{chunk-XQIEHXUJ.js → chunk-KW6WJUD5.js} +4 -4
  196. package/dist/{chunk-DCIGY462.js → chunk-M35EMGMO.js} +1 -1
  197. package/dist/{chunk-ULU4LXYF.js → chunk-ML4JW4EF.js} +17 -25
  198. package/dist/chunk-MM2SG6JU.js +75 -0
  199. package/dist/{chunk-YKHKR2GB.js → chunk-N455JVEG.js} +4 -4
  200. package/dist/chunk-NHKYEZTW.js +56 -0
  201. package/dist/{chunk-E74QE424.js → chunk-NIOF2SKT.js} +2 -2
  202. package/dist/{chunk-6I4ZCACA.js → chunk-NXT7EAML.js} +3 -3
  203. package/dist/chunk-NZ4VFVXA.js +7 -0
  204. package/dist/{chunk-3HGZNFEQ.js → chunk-OSGTA6DG.js} +1 -1
  205. package/dist/{chunk-56QFPH7A.js → chunk-PAVQC74G.js} +1 -1
  206. package/dist/{chunk-YA5VMTPD.js → chunk-PXOVV47X.js} +2 -2
  207. package/dist/{chunk-DW26OLDB.js → chunk-Q5XBTXXT.js} +7 -7
  208. package/dist/{chunk-LULTNKIP.js → chunk-QOFWY452.js} +3 -3
  209. package/dist/{chunk-SUB3BVYD.js → chunk-QR6WDDBN.js} +2 -2
  210. package/dist/{chunk-LLEWW4UQ.js → chunk-QVXYZX5B.js} +1 -1
  211. package/dist/chunk-RBWFFWIG.js +7 -0
  212. package/dist/{chunk-LUC6XJU7.js → chunk-RZG5PUET.js} +11 -11
  213. package/dist/{chunk-D4CWHBFC.js → chunk-S4VWM2B6.js} +29 -17
  214. package/dist/{chunk-YAK3UMON.js → chunk-SRMMLWHK.js} +1 -1
  215. package/dist/chunk-SSV5APP2.js +118 -0
  216. package/dist/{chunk-CPI34H7R.js → chunk-TMVLBCMF.js} +3 -3
  217. package/dist/{chunk-P63VMXVG.js → chunk-U2E2PK7O.js} +4 -4
  218. package/dist/{chunk-WN3TGQHF.js → chunk-UC2WGSJH.js} +13 -13
  219. package/dist/{chunk-4WKUWT6B.js → chunk-UIG77WBM.js} +6 -6
  220. package/dist/{chunk-SC6GOFII.js → chunk-UXCNMI34.js} +3 -3
  221. package/dist/{chunk-VUDALBYV.js → chunk-UXGG4SUH.js} +1 -1
  222. package/dist/{chunk-OT3SSSAN.js → chunk-VFZ2K6U6.js} +2 -2
  223. package/dist/{chunk-B22BEVRV.js → chunk-VHVRECJY.js} +6 -6
  224. package/dist/{chunk-M5Q2CFRQ.js → chunk-VOXZA4YS.js} +1 -1
  225. package/dist/{chunk-EOES5IUI.js → chunk-W2TEMTXK.js} +1 -1
  226. package/dist/{chunk-QZL7DSHL.js → chunk-WNFSIU36.js} +4 -4
  227. package/dist/{chunk-AZBN2SOE.js → chunk-XV2C6MXF.js} +9 -9
  228. package/dist/{chunk-LPKBOHFG.js → chunk-YHRCBRDZ.js} +2 -2
  229. package/dist/{chunk-ZXHTDMQB.js → chunk-YMQMJAC4.js} +3 -3
  230. package/dist/{chunk-5DW5MIOP.js → chunk-YP2IQM4Y.js} +3 -3
  231. package/dist/{chunk-4PZCXSIJ.js → chunk-Z2SUHJJH.js} +4 -4
  232. package/dist/{chunk-BOOMSDK7.js → chunk-Z7ORLEY6.js} +1 -1
  233. package/dist/{chunk-NKCDMR4Y.js → chunk-ZJBNVQTB.js} +1 -3
  234. package/dist/{chunk-O2YRPX5E.js → chunk-ZMNX5LVE.js} +2 -2
  235. package/dist/i18n/src/index.js +1 -1
  236. package/dist/i18n/src/useLocalizedString.js +1 -1
  237. package/dist/index.css +1636 -1563
  238. package/dist/index.d.ts +14 -4
  239. package/dist/index.js +94 -88
  240. package/dist/inputs/src/Input.css +302 -0
  241. package/dist/inputs/src/Input.d.ts +15 -0
  242. package/dist/inputs/src/Input.js +3 -0
  243. package/dist/inputs/src/InputGroup.css +47 -1471
  244. package/dist/inputs/src/InputGroup.d.ts +1 -18
  245. package/dist/inputs/src/InputGroup.js +1 -3
  246. package/dist/inputs/src/InputGroupContext.d.ts +0 -2
  247. package/dist/inputs/src/NumberField.css +130 -1514
  248. package/dist/inputs/src/NumberField.js +13 -14
  249. package/dist/inputs/src/PasswordField.css +357 -379
  250. package/dist/inputs/src/PasswordField.d.ts +4 -4
  251. package/dist/inputs/src/PasswordField.js +14 -13
  252. package/dist/inputs/src/PasswordFieldContext.d.ts +2 -2
  253. package/dist/inputs/src/RemainingCharacterCount.css +31 -31
  254. package/dist/inputs/src/RemainingCharacterCount.js +8 -8
  255. package/dist/inputs/src/SearchField.css +361 -385
  256. package/dist/inputs/src/SearchField.d.ts +2 -2
  257. package/dist/inputs/src/SearchField.js +16 -15
  258. package/dist/inputs/src/SearchFieldContext.d.ts +2 -2
  259. package/dist/inputs/src/TextArea.css +122 -1486
  260. package/dist/inputs/src/TextArea.js +12 -13
  261. package/dist/inputs/src/TextField.css +359 -383
  262. package/dist/inputs/src/TextField.js +18 -17
  263. package/dist/inputs/src/index.css +636 -627
  264. package/dist/inputs/src/index.d.ts +4 -3
  265. package/dist/inputs/src/index.js +23 -23
  266. package/dist/overlays/Popover/src/Popover.css +563 -551
  267. package/dist/overlays/Popover/src/Popover.js +10 -10
  268. package/dist/overlays/Popover/src/index.css +563 -551
  269. package/dist/overlays/Popover/src/index.js +10 -10
  270. package/dist/radio/src/DecorativeRadio.css +55 -55
  271. package/dist/radio/src/DecorativeRadio.js +9 -9
  272. package/dist/radio/src/Radio.css +47 -47
  273. package/dist/radio/src/Radio.js +8 -8
  274. package/dist/radio/src/RadioField.css +34 -34
  275. package/dist/radio/src/RadioField.js +3 -3
  276. package/dist/radio/src/RadioGroup.css +99 -99
  277. package/dist/radio/src/RadioGroup.js +9 -9
  278. package/dist/radio/src/index.css +99 -99
  279. package/dist/radio/src/index.js +16 -16
  280. package/dist/switch/src/Switch.css +44 -44
  281. package/dist/switch/src/Switch.js +8 -8
  282. package/dist/switch/src/SwitchField.css +34 -34
  283. package/dist/switch/src/SwitchField.js +4 -4
  284. package/dist/switch/src/index.css +50 -50
  285. package/dist/switch/src/index.js +11 -11
  286. package/dist/tag/src/Tag.css +403 -391
  287. package/dist/tag/src/Tag.d.ts +46 -5
  288. package/dist/tag/src/Tag.js +12 -12
  289. package/dist/tag/src/TagContext.d.ts +3 -1
  290. package/dist/tag/src/TagGroup.css +38 -38
  291. package/dist/tag/src/TagGroup.d.ts +3 -1
  292. package/dist/tag/src/TagGroup.js +9 -9
  293. package/dist/tag/src/TagGroupContext.d.ts +3 -1
  294. package/dist/tag/src/index.css +413 -401
  295. package/dist/tag/src/index.d.ts +3 -1
  296. package/dist/tag/src/index.js +18 -18
  297. package/dist/typography/Heading/src/Heading.css +28 -28
  298. package/dist/typography/Heading/src/Heading.js +1 -1
  299. package/dist/typography/Heading/src/index.css +28 -28
  300. package/dist/typography/Heading/src/index.js +1 -1
  301. package/dist/typography/Label/src/Label.css +28 -28
  302. package/dist/typography/Label/src/Label.js +3 -3
  303. package/dist/typography/Label/src/index.css +28 -28
  304. package/dist/typography/Label/src/index.js +3 -3
  305. package/dist/typography/OverlineText/src/OverlineText.css +28 -28
  306. package/dist/typography/OverlineText/src/OverlineText.js +1 -1
  307. package/dist/typography/OverlineText/src/index.css +28 -28
  308. package/dist/typography/OverlineText/src/index.js +1 -1
  309. package/dist/typography/Text/src/Text.css +28 -28
  310. package/dist/typography/Text/src/Text.js +1 -1
  311. package/dist/typography/Text/src/index.css +28 -28
  312. package/dist/typography/Text/src/index.js +1 -1
  313. package/dist/utils/src/EnsureTextWrapper.css +28 -28
  314. package/dist/utils/src/EnsureTextWrapper.js +7 -7
  315. package/dist/utils/src/index.css +28 -28
  316. package/dist/utils/src/index.d.ts +0 -1
  317. package/dist/utils/src/index.js +9 -10
  318. package/dist/utils/src/types.d.ts +1 -1
  319. package/dist/utils/src/useRenderProps.js +1 -1
  320. package/package.json +2 -2
  321. package/dist/ClearButton-wcnm_ugx.d.ts +0 -80
  322. package/dist/chunk-MTDFS4CZ.js +0 -12
  323. package/dist/chunk-X7PEWS4A.js +0 -102
  324. package/dist/utils/src/useScale.d.ts +0 -11
  325. package/dist/utils/src/useScale.js +0 -2
package/dist/inputs/src/InputGroup.css CHANGED
@@ -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___6rgZ- {
2
+ .Heading-module__hop-Heading___o-v-P {
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___6rgZ-) {
36
+ :where(.Heading-module__hop-Heading___o-v-P) {
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___CU9xu) {
43
+ :where(.Heading-module__hop-Heading--xs___KXQEX) {
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___exgBk) {
49
+ :where(.Heading-module__hop-Heading--sm___-WdRn) {
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___rcL9t) {
55
+ :where(.Heading-module__hop-Heading--md___ukpIT) {
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___DYMzj) {
61
+ :where(.Heading-module__hop-Heading--lg___i2P5H) {
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___Hna8N) {
67
+ :where(.Heading-module__hop-Heading--xl___Tsi-u) {
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___1s5HE) {
73
+ :where(.Heading-module__hop-Heading--2xl___yfzVl) {
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___Rxofk) {
79
+ :where(.Heading-module__hop-Heading--3xl___4mhyI) {
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/Text/src/Text.module.css/#css-module-data */
87
- .Text-module__hop-Text___QOekS {
87
+ .Text-module__hop-Text___w4sro {
88
88
  --hop-Text-xs-font-size: var(--hop-body-xs-font-size);
89
89
  --hop-Text-xs-font-family: var(--hop-body-xs-font-family);
90
90
  --hop-Text-xs-font-weight: var(--hop-body-xs-font-weight);
@@ -114,49 +114,49 @@
114
114
  --hop-Text-inherit-size-font-weight: inherit;
115
115
  --hop-Text-inherit-size-line-height: inherit;
116
116
  }
117
- :where(.Text-module__hop-Text___QOekS) {
117
+ :where(.Text-module__hop-Text___w4sro) {
118
118
  font-family: var(--font-family);
119
119
  font-size: var(--font-size);
120
120
  font-weight: var(--font-weight);
121
121
  line-height: var(--line-height);
122
122
  }
123
- :where(.Text-module__hop-Text--xs___dC-dY) {
123
+ :where(.Text-module__hop-Text--xs___YJQqc) {
124
124
  --font-size: var(--hop-Text-xs-font-size);
125
125
  --font-family: var(--hop-Text-xs-font-family);
126
126
  --font-weight: var(--hop-Text-xs-font-weight);
127
127
  --line-height: var(--hop-Text-xs-line-height);
128
128
  }
129
- :where(.Text-module__hop-Text--sm___Cc616) {
129
+ :where(.Text-module__hop-Text--sm___b-Fyx) {
130
130
  --font-size: var(--hop-Text-sm-font-size);
131
131
  --font-family: var(--hop-Text-sm-font-family);
132
132
  --font-weight: var(--hop-Text-sm-font-weight);
133
133
  --line-height: var(--hop-Text-sm-line-height);
134
134
  }
135
- :where(.Text-module__hop-Text--md___-Cnfu) {
135
+ :where(.Text-module__hop-Text--md___Mv6pk) {
136
136
  --font-size: var(--hop-Text-md-font-size);
137
137
  --font-family: var(--hop-Text-md-font-family);
138
138
  --font-weight: var(--hop-Text-md-font-weight);
139
139
  --line-height: var(--hop-Text-md-line-height);
140
140
  }
141
- :where(.Text-module__hop-Text--lg___42oYt) {
141
+ :where(.Text-module__hop-Text--lg___meTgy) {
142
142
  --font-size: var(--hop-Text-lg-font-size);
143
143
  --font-family: var(--hop-Text-lg-font-family);
144
144
  --font-weight: var(--hop-Text-lg-font-weight);
145
145
  --line-height: var(--hop-Text-lg-line-height);
146
146
  }
147
- :where(.Text-module__hop-Text--xl___NuxkX) {
147
+ :where(.Text-module__hop-Text--xl___62mE-) {
148
148
  --font-size: var(--hop-Text-xl-font-size);
149
149
  --font-family: var(--hop-Text-xl-font-family);
150
150
  --font-weight: var(--hop-Text-xl-font-weight);
151
151
  --line-height: var(--hop-Text-xl-line-height);
152
152
  }
153
- :where(.Text-module__hop-Text--2xl___edbgN) {
153
+ :where(.Text-module__hop-Text--2xl___MKyPg) {
154
154
  --font-size: var(--hop-Text-2xl-font-size);
155
155
  --font-family: var(--hop-Text-2xl-font-family);
156
156
  --font-weight: var(--hop-Text-2xl-font-weight);
157
157
  --line-height: var(--hop-Text-2xl-line-height);
158
158
  }
159
- :where(.Text-module__hop-Text--inherit___ipzBl) {
159
+ :where(.Text-module__hop-Text--inherit___CbsDY) {
160
160
  --font-size: var(--hop-Text-inherit-size-font-size);
161
161
  --font-family: var(--hop-Text-inherit-size-font-family);
162
162
  --font-weight: var(--hop-Text-inherit-size-font-weight);
@@ -164,7 +164,7 @@
164
164
  }
165
165
 
166
166
  /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/OverlineText/src/OverlineText.module.css/#css-module-data */
167
- :where(.OverlineText-module__hop-OverlineText___XmSxB) {
167
+ :where(.OverlineText-module__hop-OverlineText___LwiJI) {
168
168
  --hop-OverlineText-font-family: var(--hop-overline-font-family);
169
169
  --hop-OverlineText-font-size: var(--hop-overline-font-size);
170
170
  --hop-OverlineText-font-weight: var(--hop-overline-font-weight);
@@ -188,1520 +188,96 @@
188
188
  text-transform: uppercase;
189
189
  letter-spacing: var(--letter-spacing);
190
190
  }
191
- .OverlineText-module__hop-OverlineText__text___VSfku {
191
+ .OverlineText-module__hop-OverlineText__text___ExOHp {
192
192
  box-sizing: border-box;
193
193
  }
194
- .OverlineText-module__hop-OverlineText__text___VSfku::before,
195
- .OverlineText-module__hop-OverlineText__text___VSfku::after {
194
+ .OverlineText-module__hop-OverlineText__text___ExOHp::before,
195
+ .OverlineText-module__hop-OverlineText__text___ExOHp::after {
196
196
  content: "";
197
197
  display: block;
198
198
  box-sizing: border-box;
199
199
  inline-size: 0;
200
200
  block-size: 0;
201
201
  }
202
- .OverlineText-module__hop-OverlineText__text___VSfku::before {
202
+ .OverlineText-module__hop-OverlineText__text___ExOHp::before {
203
203
  margin-block-end: var(--bottom-offset);
204
204
  }
205
- .OverlineText-module__hop-OverlineText__text___VSfku::after {
205
+ .OverlineText-module__hop-OverlineText__text___ExOHp::after {
206
206
  margin-block-start: var(--top-offset);
207
207
  }
208
208
 
209
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/Form/src/Form.module.css/#css-module-data */
210
+ .Form-module__hop-Form___CQAzy {
211
+ display: flex;
212
+ flex-direction: column;
213
+ gap: var(--hop-space-stack-lg);
214
+ }
215
+
209
216
  /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/Label/src/Label.module.css/#css-module-data */
210
- .Label-module__hop-Label___hi6n3 {
217
+ .Label-module__hop-Label___fv4X4 {
211
218
  --hop-Label-font-size: var(--hop-heading-xs-font-size);
212
219
  --hop-Label-font-family: var(--hop-heading-xs-font-family);
213
220
  --hop-Label-font-weight: var(--hop-heading-xs-font-weight);
214
221
  --hop-Label-line-height: var(--hop-heading-xs-line-height);
215
222
  --hop-Label-color: var(--hop-neutral-text-weak);
216
223
  }
217
- :where(.Label-module__hop-Label___hi6n3) {
224
+ :where(.Label-module__hop-Label___fv4X4) {
218
225
  font-family: var(--hop-Label-font-family);
219
226
  font-size: var(--hop-Label-font-size);
220
227
  font-weight: var(--hop-Label-font-weight);
221
228
  line-height: var(--hop-Label-line-height);
222
229
  color: var(--hop-Label-color);
223
230
  }
224
- :where(.Label-module__hop-Label__indicator___dmiaC) {
231
+ :where(.Label-module__hop-Label__indicator___5kTP2) {
225
232
  padding-inline-start: var(--hop-space-20);
226
233
  }
227
234
 
228
- /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/Form/src/Form.module.css/#css-module-data */
229
- .Form-module__hop-Form___Z7zNm {
230
- display: flex;
231
- flex-direction: column;
232
- gap: var(--hop-space-stack-lg);
233
- }
234
-
235
- /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/IconList/src/IconList.module.css/#css-module-data */
236
- .IconList-module__hop-IconList___oGz4y {
237
- --hop-IconList-gap: var(--hop-space-inline-xs);
238
- display: flex;
239
- flex-wrap: wrap;
240
- gap: var(--hop-IconList-gap);
241
- box-sizing: border-box;
242
- }
243
-
244
- /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/Spinner/src/Spinner.module.css/#css-module-data */
245
- @keyframes Spinner-module__spin___PHhy2 {
246
- 0% {
247
- transform: rotate(0deg);
248
- }
249
- 100% {
250
- transform: rotate(360deg);
251
- }
252
- }
253
- .Spinner-module__hop-Spinner___CE9PO {
254
- --hop-Spinner-border-radius: var(--hop-shape-circle);
255
- --hop-Spinner-sm-wheel-size: 1rem;
256
- --hop-Spinner-md-wheel-size: 1.25rem;
257
- --hop-Spinner-lg-wheel-size: 1.5rem;
258
- --hop-Spinner-track-width: 0.125rem;
259
- --hop-Spinner-track-opacity: 0.2;
260
- --hop-Spinner-track-border: var(--hop-Spinner-track-width) solid currentcolor;
261
- --hop-Spinner-fill-animation: Spinner-module__spin___PHhy2 .8s infinite linear;
262
- --hop-Spinner-fill-animation-reduced-motion-duration: 2s;
263
- --hop-Spinner-fill-border: var(--hop-Spinner-track-width) solid transparent;
264
- --hop-Spinner-fill-border-inline-start: var(--hop-Spinner-track-width) solid currentcolor;
265
- --hop-Spinner-label-margin-inline-start: var(--hop-space-inline-sm);
266
- display: grid;
267
- grid-template-areas: "spinner label";
268
- grid-template-columns: min-content auto;
269
- align-items: center;
270
- box-sizing: border-box;
271
- }
272
- .Spinner-module__hop-Spinner--sm___oyy2U {
273
- --width: var(--hop-Spinner-sm-wheel-size);
274
- --height: var(--hop-Spinner-sm-wheel-size);
275
- }
276
- .Spinner-module__hop-Spinner--md___FQE4Q {
277
- --width: var(--hop-Spinner-md-wheel-size);
278
- --height: var(--hop-Spinner-md-wheel-size);
279
- }
280
- .Spinner-module__hop-Spinner--lg___ecNMl {
281
- --width: var(--hop-Spinner-lg-wheel-size);
282
- --height: var(--hop-Spinner-lg-wheel-size);
283
- }
284
- .Spinner-module__hop-Spinner__track___J800C {
285
- grid-area: spinner;
286
- box-sizing: border-box;
287
- inline-size: var(--width, var(--hop-Spinner-md-wheel-size));
288
- block-size: var(--height, var(--hop-Spinner-md-wheel-size));
289
- opacity: var(--hop-Spinner-track-opacity);
290
- border: var(--hop-Spinner-track-border);
291
- border-radius: var(--hop-Spinner-border-radius);
292
- }
293
- .Spinner-module__hop-Spinner__fill___s6E6e {
294
- grid-area: spinner;
295
- box-sizing: border-box;
296
- inline-size: var(--width, var(--hop-Spinner-md-wheel-size));
297
- block-size: var(--height, var(--hop-Spinner-md-wheel-size));
298
- border: var(--hop-Spinner-fill-border);
299
- border-inline-start: var(--hop-Spinner-fill-border-inline-start);
300
- border-radius: var(--hop-Spinner-border-radius);
301
- animation: var(--hop-Spinner-fill-animation);
302
- }
303
- @media (prefers-reduced-motion: reduce) {
304
- .Spinner-module__hop-Spinner__fill___s6E6e {
305
- animation-duration: var(--hop-Spinner-fill-animation-reduced-motion-duration);
306
- }
307
- }
308
- .Spinner-module__hop-Spinner__label___-tdyJ {
309
- grid-area: label;
310
- margin-inline-start: var(--hop-Spinner-label-margin-inline-start);
311
- }
312
-
313
- /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/buttons/src/Button.module.css/#css-module-data */
314
- .Button-module__hop-Button___NTFpr {
315
- --hop-Button-border-radius: var(--hop-shape-rounded-md);
316
- --hop-Button-focus-ring-color: var(--hop-primary-border-focus);
317
- --hop-Button-column-gap: var(--hop-space-inline-xs);
318
- --hop-Button-icon-only-column-gap: 0;
319
- --hop-Button-outline-size: var(--hop-space-20);
320
- --hop-Button-border-size: var(--hop-space-10);
321
- --hop-Button-text-underline-offset: var(--hop-space-20);
322
- --hop-Button-icon-only-padding: 0;
323
- --hop-Button-sm-height: 2rem;
324
- --hop-Button-md-height: 2.5rem;
325
- --hop-Button-sm-padding: 0 var(--hop-space-inset-md);
326
- --hop-Button-md-padding: 0 var(--hop-space-inset-md);
327
- --hop-Button-ghost-sm-padding: 0 var(--hop-space-inset-xs);
328
- --hop-Button-ghost-md-padding: 0 var(--hop-space-inset-sm);
329
- --hop-Button-color-disabled: var(--hop-neutral-text-disabled);
330
- --hop-Button-background-color-disabled: var(--hop-neutral-surface-disabled);
331
- --hop-Button-border-disabled: var(--hop-Button-border-size) solid var(--hop-Button-background-color-disabled);
332
- --hop-Button-ghost-color-disabled: var(--hop-neutral-text-disabled);
333
- --hop-Button-ghost-background-color-disabled: transparent;
334
- --hop-Button-ghost-border-disabled: var(--hop-Button-border-size) solid var(--hop-Button-ghost-background-color-disabled);
335
- --hop-Button-primary-color: var(--hop-primary-text-strong);
336
- --hop-Button-primary-color-hover: var(--hop-primary-text-strong-hover);
337
- --hop-Button-primary-color-pressed: var(--hop-primary-text-strong);
338
- --hop-Button-primary-background-color: var(--hop-primary-surface-strong);
339
- --hop-Button-primary-background-color-hover: var(--hop-primary-surface-strong-hover);
340
- --hop-Button-primary-background-color-pressed: var(--hop-primary-surface-strong-press);
341
- --hop-Button-primary-border: var(--hop-Button-border-size) solid var(--hop-Button-primary-background-color);
342
- --hop-Button-primary-border-hover: var(--hop-Button-border-size) solid var(--hop-Button-primary-background-color-hover);
343
- --hop-Button-primary-border-pressed: var(--hop-Button-border-size) solid var(--hop-Button-primary-background-color-pressed);
344
- --hop-Button-primary-spinner-color: var(--hop-primary-icon-strong);
345
- --hop-Button-secondary-color: var(--hop-neutral-text);
346
- --hop-Button-secondary-color-hover: var(--hop-neutral-text-hover);
347
- --hop-Button-secondary-color-pressed: var(--hop-neutral-text-press);
348
- --hop-Button-secondary-background-color: var(--hop-neutral-surface);
349
- --hop-Button-secondary-background-color-hover: var(--hop-neutral-surface-hover);
350
- --hop-Button-secondary-background-color-pressed: var(--hop-neutral-surface-press);
351
- --hop-Button-secondary-border: var(--hop-Button-border-size) solid var(--hop-neutral-border-strong);
352
- --hop-Button-secondary-border-hover: var(--hop-Button-border-size) solid var(--hop-neutral-border-strong-hover);
353
- --hop-Button-secondary-border-pressed: var(--hop-Button-border-size) solid var(--hop-neutral-border-strong);
354
- --hop-Button-secondary-spinner-color: var(--hop-neutral-icon);
355
- --hop-Button-upsell-color: var(--hop-upsell-text);
356
- --hop-Button-upsell-color-hover: var(--hop-upsell-text-hover);
357
- --hop-Button-upsell-color-pressed: var(--hop-upsell-text-press);
358
- --hop-Button-upsell-background-color: var(--hop-upsell-surface);
359
- --hop-Button-upsell-background-color-hover: var(--hop-upsell-surface-hover);
360
- --hop-Button-upsell-background-color-pressed: var(--hop-upsell-surface-press);
361
- --hop-Button-upsell-border: var(--hop-Button-border-size) solid var(--hop-Button-upsell-background-color);
362
- --hop-Button-upsell-border-hover: var(--hop-Button-border-size) solid var(--hop-Button-upsell-background-color-hover);
363
- --hop-Button-upsell-border-pressed: var(--hop-Button-border-size) solid var(--hop-Button-upsell-background-color-pressed);
364
- --hop-Button-upsell-spinner-color: var(--hop-upsell-icon);
365
- --hop-Button-danger-color: var(--hop-danger-text-strong);
366
- --hop-Button-danger-color-hover: var(--hop-danger-text-strong-hover);
367
- --hop-Button-danger-color-pressed: var(--hop-danger-text-strong-hover);
368
- --hop-Button-danger-background-color: var(--hop-danger-surface-strong);
369
- --hop-Button-danger-background-color-hover: var(--hop-danger-surface-strong-hover);
370
- --hop-Button-danger-background-color-pressed: var(--hop-danger-surface-press);
371
- --hop-Button-danger-border: var(--hop-Button-border-size) solid var(--hop-Button-danger-background-color);
372
- --hop-Button-danger-border-hover: var(--hop-Button-border-size) solid var(--hop-Button-danger-background-color-hover);
373
- --hop-Button-danger-border-pressed: var(--hop-Button-border-size) solid var(--hop-Button-danger-background-color-pressed);
374
- --hop-Button-danger-spinner-color: var(--hop-primary-icon-strong);
375
- --hop-Button-ghost-primary-color: var(--hop-primary-text);
376
- --hop-Button-ghost-primary-color-hover: var(--hop-primary-text-hover);
377
- --hop-Button-ghost-primary-color-pressed: var(--hop-primary-text-press);
378
- --hop-Button-ghost-primary-background-color: transparent;
379
- --hop-Button-ghost-primary-background-color-hover: var(--hop-neutral-surface-hover);
380
- --hop-Button-ghost-primary-background-color-pressed: var(--hop-primary-surface-weak-press);
381
- --hop-Button-ghost-primary-border: var(--hop-Button-border-size) solid var(--hop-Button-ghost-primary-background-color);
382
- --hop-Button-ghost-primary-border-hover: var(--hop-Button-border-size) solid var(--hop-Button-ghost-primary-background-color-hover);
383
- --hop-Button-ghost-primary-border-pressed: var(--hop-Button-border-size) solid var(--hop-Button-ghost-primary-background-color-pressed);
384
- --hop-Button-ghost-primary-spinner-color: var(--hop-neutral-icon);
385
- --hop-Button-ghost-secondary-color: var(--hop-neutral-text-weak);
386
- --hop-Button-ghost-secondary-color-hover: var(--hop-neutral-text-weak-hover);
387
- --hop-Button-ghost-secondary-color-pressed: var(--hop-neutral-text-weak-press);
388
- --hop-Button-ghost-secondary-background-color: transparent;
389
- --hop-Button-ghost-secondary-background-color-hover: var(--hop-neutral-surface-hover);
390
- --hop-Button-ghost-secondary-background-color-pressed: var(--hop-neutral-surface-press);
391
- --hop-Button-ghost-secondary-border: var(--hop-Button-border-size) solid var(--hop-Button-ghost-secondary-background-color);
392
- --hop-Button-ghost-secondary-border-hover: var(--hop-Button-border-size) solid var(--hop-Button-ghost-secondary-background-color-hover);
393
- --hop-Button-ghost-secondary-border-pressed: var(--hop-Button-border-size) solid var(--hop-Button-ghost-secondary-background-color-pressed);
394
- --hop-Button-ghost-secondary-spinner-color: var(--hop-neutral-icon);
395
- --hop-Button-ghost-danger-color: var(--hop-danger-text-weak);
396
- --hop-Button-ghost-danger-color-hover: var(--hop-danger-text-hover);
397
- --hop-Button-ghost-danger-color-pressed: var(--hop-danger-text-press);
398
- --hop-Button-ghost-danger-background-color: transparent;
399
- --hop-Button-ghost-danger-background-color-hover: var(--hop-neutral-surface-hover);
400
- --hop-Button-ghost-danger-background-color-pressed: var(--hop-danger-surface-weak-press);
401
- --hop-Button-ghost-danger-border: var(--hop-Button-border-size) solid var(--hop-Button-ghost-danger-background-color);
402
- --hop-Button-ghost-danger-border-hover: var(--hop-Button-border-size) solid var(--hop-Button-ghost-danger-background-color-hover);
403
- --hop-Button-ghost-danger-border-pressed: var(--hop-Button-border-size) solid var(--hop-Button-ghost-danger-background-color-pressed);
404
- --hop-Button-ghost-danger-spinner-color: var(--hop-neutral-icon);
405
- --inline-size: max-content;
406
- --block-size: var(--hop-Button-md-height);
407
- --background-color: var(--hop-primary-surface-strong);
408
- --color: var(--hop-primary-text-strong);
409
- --column-gap: var(--hop-Button-column-gap);
410
- --spinner: var(--hop-primary-icon-strong);
411
- --border: 0;
412
- --padding: var(--hop-Button-md-padding);
413
- --text-underline: none;
414
- cursor: pointer;
415
- position: relative;
416
- overflow: hidden;
417
- display: flex;
418
- column-gap: var(--column-gap);
419
- align-items: center;
420
- justify-content: center;
421
- box-sizing: border-box;
422
- inline-size: var(--inline-size);
423
- block-size: var(--block-size);
424
- padding: var(--padding);
425
- color: var(--color);
426
- text-decoration: none;
427
- white-space: nowrap;
428
- background-color: var(--background-color);
429
- border: var(--border);
430
- border-radius: var(--hop-Button-border-radius);
431
- outline: none;
432
- outline-offset: var(--hop-Button-outline-size);
433
- transition:
434
- color var(--hop-easing-duration-2) var(--hop-easing-productive),
435
- background-color var(--hop-easing-duration-2) var(--hop-easing-productive),
436
- border var(--hop-easing-duration-2) var(--hop-easing-productive);
437
- }
438
- .Button-module__hop-Button--fluid___koaex {
439
- --inline-size: 100%;
440
- }
441
- .Button-module__hop-Button--sm___Ovyb2 {
442
- --block-size: var(--hop-Button-sm-height);
443
- --padding: var(--hop-Button-sm-padding);
444
- }
445
- .Button-module__hop-Button--sm___Ovyb2[class*=--ghost] {
446
- --padding: var(--hop-Button-ghost-sm-padding);
447
- }
448
- .Button-module__hop-Button--md___i0loO[class*=--ghost] {
449
- --padding: var(--hop-Button-ghost-md-padding);
450
- }
451
- .Button-module__hop-Button--icon-only___pUmd7 {
452
- --column-gap: var(--hop-Button-icon-only-column-gap);
453
- --padding: var(--hop-Button-icon-only-padding);
454
- aspect-ratio: 1;
455
- }
456
- .Button-module__hop-Button--primary___Pm4Kg {
457
- --background-color: var(--hop-Button-primary-background-color);
458
- --color: var(--hop-Button-primary-color);
459
- --border: var(--hop-Button-primary-border);
460
- --spinner-color: var(--hop-Button-primary-spinner-color);
461
- }
462
- .Button-module__hop-Button--primary___Pm4Kg[data-hovered],
463
- .Button-module__hop-Button--primary___Pm4Kg[data-focus-visible] {
464
- --background-color: var(--hop-Button-primary-background-color-hover);
465
- --color: var(--hop-Button-primary-color-hover);
466
- --border: var(--hop-Button-primary-border-hover);
467
- }
468
- .Button-module__hop-Button--primary___Pm4Kg[data-pressed] {
469
- --background-color: var(--hop-Button-primary-background-color-pressed);
470
- --color: var(--hop-Button-primary-color-pressed);
471
- --border: var(--hop-Button-primary-border-pressed);
472
- }
473
- .Button-module__hop-Button--secondary___aXDWm {
474
- --background-color: var(--hop-Button-secondary-background-color);
475
- --color: var(--hop-Button-secondary-color);
476
- --border: var(--hop-Button-secondary-border);
477
- --spinner-color: var(--hop-Button-secondary-spinner-color);
478
- }
479
- .Button-module__hop-Button--secondary___aXDWm[data-hovered],
480
- .Button-module__hop-Button--secondary___aXDWm[data-focus-visible] {
481
- --background-color: var(--hop-Button-secondary-background-color-hover);
482
- --color: var(--hop-Button-secondary-color-hover);
483
- --border: var(--hop-Button-secondary-border-hover);
484
- }
485
- .Button-module__hop-Button--secondary___aXDWm[data-pressed] {
486
- --background-color: var(--hop-Button-secondary-background-color-pressed);
487
- --color: var(--hop-Button-secondary-color-pressed);
488
- --border: var(--hop-Button-secondary-border-pressed);
489
- }
490
- .Button-module__hop-Button--upsell___Z1fpJ {
491
- --background-color: var(--hop-Button-upsell-background-color);
492
- --color: var(--hop-Button-upsell-color);
493
- --border: var(--hop-Button-upsell-border);
494
- --spinner-color: var(--hop-Button-upsell-spinner-color);
495
- }
496
- .Button-module__hop-Button--upsell___Z1fpJ[data-hovered],
497
- .Button-module__hop-Button--upsell___Z1fpJ[data-focus-visible] {
498
- --background-color: var(--hop-Button-upsell-background-color-hover);
499
- --color: var(--hop-Button-upsell-color-hover);
500
- --border: var(--hop-Button-upsell-border-hover);
501
- }
502
- .Button-module__hop-Button--upsell___Z1fpJ[data-pressed] {
503
- --background-color: var(--hop-Button-upsell-background-color-pressed);
504
- --color: var(--hop-Button-upsell-color-pressed);
505
- --border: var(--hop-Button-upsell-border-pressed);
506
- }
507
- .Button-module__hop-Button--danger___Gzic4 {
508
- --background-color: var(--hop-Button-danger-background-color);
509
- --color: var(--hop-Button-danger-color);
510
- --border: var(--hop-Button-danger-border);
511
- --spinner-color: var(--hop-Button-danger-spinner-color);
512
- }
513
- .Button-module__hop-Button--danger___Gzic4[data-hovered],
514
- .Button-module__hop-Button--danger___Gzic4[data-focus-visible] {
515
- --background-color: var(--hop-Button-danger-background-color-hover);
516
- --color: var(--hop-Button-danger-color-hover);
517
- --border: var(--hop-Button-danger-border-hover);
518
- }
519
- .Button-module__hop-Button--danger___Gzic4[data-pressed] {
520
- --background-color: var(--hop-Button-danger-background-color-pressed);
521
- --color: var(--hop-Button-danger-color-pressed);
522
- --border: var(--hop-Button-danger-border-pressed);
523
- }
524
- .Button-module__hop-Button--ghost-primary___5O9QG {
525
- --background-color: var(--hop-Button-ghost-primary-background-color);
526
- --color: var(--hop-Button-ghost-primary-color);
527
- --border: var(--hop-Button-ghost-primary-border);
528
- --spinner-color: var(--hop-Button-ghost-primary-spinner-color);
529
- }
530
- .Button-module__hop-Button--ghost-primary___5O9QG[data-hovered],
531
- .Button-module__hop-Button--ghost-primary___5O9QG[data-focus-visible] {
532
- --background-color: var(--hop-Button-ghost-primary-background-color-hover);
533
- --color: var(--hop-Button-ghost-primary-color-hover);
534
- --border: var(--hop-Button-ghost-primary-border-hover);
535
- --text-underline: underline;
536
- }
537
- .Button-module__hop-Button--ghost-primary___5O9QG[data-pressed] {
538
- --background-color: var(--hop-Button-ghost-primary-background-color-pressed);
539
- --color: var(--hop-Button-ghost-primary-color-pressed);
540
- --border: var(--hop-Button-ghost-primary-border-pressed);
541
- --text-underline: underline;
542
- }
543
- .Button-module__hop-Button--ghost-secondary___e0DRm {
544
- --background-color: var(--hop-Button-ghost-secondary-background-color);
545
- --color: var(--hop-Button-ghost-secondary-color);
546
- --border: var(--hop-Button-ghost-secondary-border);
547
- --spinner-color: var(--hop-Button-ghost-secondary-spinner-color);
548
- }
549
- .Button-module__hop-Button--ghost-secondary___e0DRm[data-hovered],
550
- .Button-module__hop-Button--ghost-secondary___e0DRm[data-focus-visible] {
551
- --background-color: var(--hop-Button-ghost-secondary-background-color-hover);
552
- --color: var(--hop-Button-ghost-secondary-color-hover);
553
- --border: var(--hop-Button-ghost-secondary-border-hover);
554
- --text-underline: underline;
555
- }
556
- .Button-module__hop-Button--ghost-secondary___e0DRm[data-pressed] {
557
- --background-color: var(--hop-Button-ghost-secondary-background-color-pressed);
558
- --color: var(--hop-Button-ghost-secondary-color-pressed);
559
- --border: var(--hop-Button-ghost-secondary-border-pressed);
560
- --text-underline: underline;
561
- }
562
- .Button-module__hop-Button--ghost-danger___JU7M7 {
563
- --background-color: var(--hop-Button-ghost-danger-background-color);
564
- --color: var(--hop-Button-ghost-danger-color);
565
- --border: var(--hop-Button-ghost-danger-border);
566
- --spinner-color: var(--hop-Button-ghost-danger-spinner-color);
567
- }
568
- .Button-module__hop-Button--ghost-danger___JU7M7[data-hovered],
569
- .Button-module__hop-Button--ghost-danger___JU7M7[data-focus-visible] {
570
- --background-color: var(--hop-Button-ghost-danger-background-color-hover);
571
- --color: var(--hop-Button-ghost-danger-color-hover);
572
- --border: var(--hop-Button-ghost-danger-border-hover);
573
- --text-underline: underline;
574
- }
575
- .Button-module__hop-Button--ghost-danger___JU7M7[data-pressed] {
576
- --background-color: var(--hop-Button-ghost-danger-background-color-pressed);
577
- --color: var(--hop-Button-ghost-danger-color-pressed);
578
- --border: var(--hop-Button-ghost-danger-border-pressed);
579
- --text-underline: underline;
580
- }
581
- .Button-module__hop-Button___NTFpr[data-focus-visible] {
582
- outline: var(--hop-Button-outline-size) solid var(--hop-Button-focus-ring-color);
583
- }
584
- .Button-module__hop-Button___NTFpr[data-disabled],
585
- .Button-module__hop-Button___NTFpr[data-pending] {
586
- cursor: not-allowed;
587
- }
588
- .Button-module__hop-Button___NTFpr[data-disabled] {
589
- --background-color: var(--hop-Button-background-color-disabled);
590
- --color: var(--hop-Button-color-disabled);
591
- --border: var(--hop-Button-border-disabled);
592
- }
593
- .Button-module__hop-Button___NTFpr[class*=--ghost][data-disabled] {
594
- --background-color: var(--hop-Button-ghost-background-color-disabled);
595
- --color: var(--hop-Button-ghost-color-disabled);
596
- --border: var(--hop-Button-ghost-border-disabled);
597
- }
598
- .Button-module__hop-Button--primary___Pm4Kg[data-pending] {
599
- --background-color: var(--hop-Button-primary-background-color);
600
- --color: var(--hop-Button-primary-color);
601
- --border: var(--hop-Button-primary-border);
602
- }
603
- .Button-module__hop-Button--secondary___aXDWm[data-pending] {
604
- --background-color: var(--hop-Button-secondary-background-color);
605
- --color: var(--hop-Button-secondary-color);
606
- --border: var(--hop-Button-secondary-border);
607
- }
608
- .Button-module__hop-Button--upsell___Z1fpJ[data-pending] {
609
- --background-color: var(--hop-Button-upsell-background-color);
610
- --color: var(--hop-Button-upsell-color);
611
- --border: var(--hop-Button-upsell-border);
612
- }
613
- .Button-module__hop-Button--danger___Gzic4[data-pending] {
614
- --background-color: var(--hop-Button-danger-background-color);
615
- --color: var(--hop-Button-danger-color);
616
- --border: var(--hop-Button-danger-border);
617
- }
618
- .Button-module__hop-Button--ghost-primary___5O9QG[data-pending] {
619
- --background-color: var(--hop-Button-ghost-primary-background-color);
620
- --color: var(--hop-Button-ghost-primary-color);
621
- --border: var(--hop-Button-ghost-primary-border);
622
- --text-underline: none;
623
- }
624
- .Button-module__hop-Button--ghost-secondary___e0DRm[data-pending] {
625
- --background-color: var(--hop-Button-ghost-secondary-background-color);
626
- --color: var(--hop-Button-ghost-secondary-color);
627
- --border: var(--hop-Button-ghost-secondary-border);
628
- --text-underline: none;
629
- }
630
- .Button-module__hop-Button--ghost-danger___JU7M7[data-pending] {
631
- --background-color: var(--hop-Button-ghost-danger-background-color);
632
- --color: var(--hop-Button-ghost-danger-color);
633
- --border: var(--hop-Button-ghost-danger-border);
634
- --text-underline: none;
635
- }
636
- .Button-module__hop-Button__Spinner___Y2HxQ {
637
- position: absolute;
638
- color: var(--spinner-color);
639
- }
640
- .Button-module__hop-Button__icon___iJr7x,
641
- .Button-module__hop-Button__icon-list___JRDIl {
642
- flex: 0 0 auto;
643
- justify-self: end;
644
- order: 1;
645
- }
646
- .Button-module__hop-Button__text___sKE6W {
647
- user-select: none;
648
- overflow: visible;
649
- flex: 0 1 auto;
650
- order: 2;
651
- font-weight: var(--hop-font-weight-505);
652
- text-decoration: var(--text-underline);
653
- text-underline-offset: 0.125rem;
654
- text-wrap: nowrap;
655
- }
656
- .Button-module__hop-Button__end-icon___o0aoJ,
657
- .Button-module__hop-Button__end-icon-list___-hxB- {
658
- flex: 0 0 auto;
659
- order: 3;
660
- }
661
- .Button-module__hop-Button___NTFpr .Button-module__hop-Button__icon-list___JRDIl,
662
- .Button-module__hop-Button___NTFpr .Button-module__hop-Button__end-icon-list___-hxB- {
663
- flex-wrap: nowrap;
664
- }
665
- .Button-module__hop-Button___NTFpr[data-pending] > *:not(.Button-module__hop-Button__Spinner___Y2HxQ) {
666
- opacity: 0;
667
- }
668
-
669
- /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/buttons/src/ButtonGroup.module.css/#css-module-data */
670
- .ButtonGroup-module__hop-ButtonGroup___ouAnr {
671
- display: inline-flex;
672
- flex-wrap: nowrap;
673
- gap: var(--hop-space-inline-md);
674
- }
675
- .ButtonGroup-module__hop-ButtonGroup--horizontal___J7KXB {
676
- align-items: center;
677
- }
678
- .ButtonGroup-module__hop-ButtonGroup--vertical___ZWW8V {
679
- flex-direction: column;
680
- gap: var(--hop-space-stack-md);
681
- justify-content: center;
682
- }
683
- .ButtonGroup-module__hop-ButtonGroup--start___IlnuR.ButtonGroup-module__hop-ButtonGroup--vertical___ZWW8V {
684
- align-items: flex-start;
685
- }
686
- .ButtonGroup-module__hop-ButtonGroup--center___zsIwv.ButtonGroup-module__hop-ButtonGroup--vertical___ZWW8V {
687
- align-items: center;
688
- }
689
- .ButtonGroup-module__hop-ButtonGroup--end___mmlUu.ButtonGroup-module__hop-ButtonGroup--vertical___ZWW8V {
690
- align-items: flex-end;
691
- }
692
- .ButtonGroup-module__hop-ButtonGroup--start___IlnuR.ButtonGroup-module__hop-ButtonGroup--horizontal___J7KXB {
693
- justify-content: flex-start;
694
- }
695
- .ButtonGroup-module__hop-ButtonGroup--center___zsIwv.ButtonGroup-module__hop-ButtonGroup--horizontal___J7KXB {
696
- justify-content: center;
697
- }
698
- .ButtonGroup-module__hop-ButtonGroup--end___mmlUu.ButtonGroup-module__hop-ButtonGroup--horizontal___J7KXB {
699
- justify-content: flex-end;
700
- }
701
- .ButtonGroup-module__hop-ButtonGroup--wrap___0-jfB {
702
- flex-wrap: wrap;
703
- }
704
- .ButtonGroup-module__hop-ButtonGroup--fluid___xMsbE {
705
- inline-size: 100%;
706
- }
707
-
708
- /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/buttons/src/EmbeddedButton.module.css/#css-module-data */
709
- .EmbeddedButton-module__hop-EmbeddedButton___yzIQS {
710
- --hop-EmbeddedButton-border-radius: var(--hop-shape-rounded-md);
711
- --hop-EmbeddedButton-focus-ring-color: var(--hop-primary-border-focus);
712
- --hop-EmbeddedButton-effect-border-radius: var(--hop-shape-circle);
713
- --hop-EmbeddedButton-effect-square-border-radius: var(--hop-shape-rounded-sm);
714
- --hop-EmbeddedButton-md-height: 1.5rem;
715
- --hop-EmbeddedButton-md-width: 1.5rem;
716
- --hop-EmbeddedButton-md-effect-height: 1rem;
717
- --hop-EmbeddedButton-md-effect-width: 1rem;
718
- --hop-EmbeddedButton-lg-height: 1.5rem;
719
- --hop-EmbeddedButton-lg-width: 1.5rem;
720
- --hop-EmbeddedButton-lg-effect-height: 1.5rem;
721
- --hop-EmbeddedButton-lg-effect-width: 1.5rem;
722
- --hop-EmbeddedButton-neutral-color: var(--hop-neutral-icon-weak);
723
- --hop-EmbeddedButton-neutral-color-hovered: var(--hop-neutral-icon-weak-hover);
724
- --hop-EmbeddedButton-neutral-color-focused: var(--hop-neutral-icon-weak-hover);
725
- --hop-EmbeddedButton-neutral-color-pressed: var(--hop-neutral-icon-weak-press);
726
- --hop-EmbeddedButton-neutral-color-disabled: var(--hop-neutral-icon-disabled);
727
- --hop-EmbeddedButton-neutral-effect-background-color: transparent;
728
- --hop-EmbeddedButton-neutral-effect-background-color-hovered: var(--hop-neutral-surface-weak-hover);
729
- --hop-EmbeddedButton-neutral-effect-background-color-focused: var(--hop-neutral-surface-weak-hover);
730
- --hop-EmbeddedButton-neutral-effect-background-color-pressed: var(--hop-neutral-surface-weak-press);
731
- --hop-EmbeddedButton-neutral-effect-background-color-disabled: transparent;
732
- --hop-EmbeddedButton-subdued-color: var(--hop-neutral-icon-weak);
733
- --hop-EmbeddedButton-subdued-color-hovered: var(--hop-neutral-icon-weak-hover);
734
- --hop-EmbeddedButton-subdued-color-focused: var(--hop-neutral-icon-weak-hover);
735
- --hop-EmbeddedButton-subdued-color-pressed: var(--hop-neutral-icon-weak-press);
736
- --hop-EmbeddedButton-subdued-color-disabled: var(--hop-neutral-icon-disabled);
737
- --hop-EmbeddedButton-subdued-effect-background-color: transparent;
738
- --hop-EmbeddedButton-subdued-effect-background-color-hovered: var(--hop-neutral-surface-weak-hover);
739
- --hop-EmbeddedButton-subdued-effect-background-color-focused: var(--hop-neutral-surface-weak-hover);
740
- --hop-EmbeddedButton-subdued-effect-background-color-pressed: var(--hop-neutral-surface-weak-press);
741
- --hop-EmbeddedButton-subdued-effect-background-color-disabled: transparent;
742
- --hop-EmbeddedButton-progress-color: var(--hop-status-progress-icon);
743
- --hop-EmbeddedButton-progress-color-hovered: var(--hop-status-progress-icon-hover);
744
- --hop-EmbeddedButton-progress-color-focused: var(--hop-status-progress-icon-hover);
745
- --hop-EmbeddedButton-progress-color-pressed: var(--hop-status-progress-icon-press);
746
- --hop-EmbeddedButton-progress-color-disabled: var(--hop-status-progress-icon-disabled);
747
- --hop-EmbeddedButton-progress-effect-background-color: transparent;
748
- --hop-EmbeddedButton-progress-effect-background-color-hovered: var(--hop-status-progress-surface-hover);
749
- --hop-EmbeddedButton-progress-effect-background-color-focused: var(--hop-status-progress-surface-hover);
750
- --hop-EmbeddedButton-progress-effect-background-color-pressed: var(--hop-status-progress-surface-press);
751
- --hop-EmbeddedButton-progress-effect-background-color-disabled: transparent;
752
- --hop-EmbeddedButton-positive-color: var(--hop-status-positive-icon);
753
- --hop-EmbeddedButton-positive-color-hovered: var(--hop-status-positive-icon-hover);
754
- --hop-EmbeddedButton-positive-color-focused: var(--hop-status-positive-icon-hover);
755
- --hop-EmbeddedButton-positive-color-pressed: var(--hop-status-positive-icon-press);
756
- --hop-EmbeddedButton-positive-color-disabled: var(--hop-status-positive-icon-disabled);
757
- --hop-EmbeddedButton-positive-effect-background-color: transparent;
758
- --hop-EmbeddedButton-positive-effect-background-color-hovered: var(--hop-status-positive-surface-hover);
759
- --hop-EmbeddedButton-positive-effect-background-color-focused: var(--hop-status-positive-surface-hover);
760
- --hop-EmbeddedButton-positive-effect-background-color-pressed: var(--hop-status-positive-surface-press);
761
- --hop-EmbeddedButton-positive-effect-background-color-disabled: transparent;
762
- --hop-EmbeddedButton-caution-color: var(--hop-status-caution-icon);
763
- --hop-EmbeddedButton-caution-color-hovered: var(--hop-status-caution-icon-hover);
764
- --hop-EmbeddedButton-caution-color-focused: var(--hop-status-caution-icon-hover);
765
- --hop-EmbeddedButton-caution-color-pressed: var(--hop-status-caution-icon-press);
766
- --hop-EmbeddedButton-caution-color-disabled: var(--hop-status-caution-icon-disabled);
767
- --hop-EmbeddedButton-caution-effect-background-color: transparent;
768
- --hop-EmbeddedButton-caution-effect-background-color-hovered: var(--hop-status-caution-surface-hover);
769
- --hop-EmbeddedButton-caution-effect-background-color-focused: var(--hop-status-caution-surface-hover);
770
- --hop-EmbeddedButton-caution-effect-background-color-pressed: var(--hop-status-caution-surface-press);
771
- --hop-EmbeddedButton-caution-effect-background-color-disabled: transparent;
772
- --hop-EmbeddedButton-negative-color: var(--hop-status-negative-icon);
773
- --hop-EmbeddedButton-negative-color-hovered: var(--hop-status-negative-icon-hover);
774
- --hop-EmbeddedButton-negative-color-focused: var(--hop-status-negative-icon-hover);
775
- --hop-EmbeddedButton-negative-color-pressed: var(--hop-status-negative-icon-press);
776
- --hop-EmbeddedButton-negative-color-disabled: var(--hop-status-negative-icon-disabled);
777
- --hop-EmbeddedButton-negative-effect-background-color: transparent;
778
- --hop-EmbeddedButton-negative-effect-background-color-hovered: var(--hop-status-negative-surface-hover);
779
- --hop-EmbeddedButton-negative-effect-background-color-focused: var(--hop-status-negative-surface-hover);
780
- --hop-EmbeddedButton-negative-effect-background-color-pressed: var(--hop-status-negative-surface-press);
781
- --hop-EmbeddedButton-negative-effect-background-color-disabled: transparent;
782
- --hop-EmbeddedButton-option1-color: var(--hop-status-option1-icon);
783
- --hop-EmbeddedButton-option1-color-hovered: var(--hop-status-option1-icon-hover);
784
- --hop-EmbeddedButton-option1-color-focused: var(--hop-status-option1-icon-hover);
785
- --hop-EmbeddedButton-option1-color-pressed: var(--hop-status-option1-icon-press);
786
- --hop-EmbeddedButton-option1-color-disabled: var(--hop-status-option1-icon-disabled);
787
- --hop-EmbeddedButton-option1-effect-background-color: transparent;
788
- --hop-EmbeddedButton-option1-effect-background-color-hovered: var(--hop-status-option1-surface-hover);
789
- --hop-EmbeddedButton-option1-effect-background-color-focused: var(--hop-status-option1-surface-hover);
790
- --hop-EmbeddedButton-option1-effect-background-color-pressed: var(--hop-status-option1-surface-press);
791
- --hop-EmbeddedButton-option1-effect-background-color-disabled: transparent;
792
- --hop-EmbeddedButton-option2-color: var(--hop-status-option2-icon);
793
- --hop-EmbeddedButton-option2-color-hovered: var(--hop-status-option2-icon-hover);
794
- --hop-EmbeddedButton-option2-color-focused: var(--hop-status-option2-icon-hover);
795
- --hop-EmbeddedButton-option2-color-pressed: var(--hop-status-option2-icon-press);
796
- --hop-EmbeddedButton-option2-color-disabled: var(--hop-status-option2-icon-disabled);
797
- --hop-EmbeddedButton-option2-effect-background-color: transparent;
798
- --hop-EmbeddedButton-option2-effect-background-color-hovered: var(--hop-status-option2-surface-hover);
799
- --hop-EmbeddedButton-option2-effect-background-color-focused: var(--hop-status-option2-surface-hover);
800
- --hop-EmbeddedButton-option2-effect-background-color-pressed: var(--hop-status-option2-surface-press);
801
- --hop-EmbeddedButton-option2-effect-background-color-disabled: transparent;
802
- --hop-EmbeddedButton-option3-color: var(--hop-status-option3-icon);
803
- --hop-EmbeddedButton-option3-color-hovered: var(--hop-status-option3-icon-hover);
804
- --hop-EmbeddedButton-option3-color-focused: var(--hop-status-option3-icon-hover);
805
- --hop-EmbeddedButton-option3-color-pressed: var(--hop-status-option3-icon-press);
806
- --hop-EmbeddedButton-option3-color-disabled: var(--hop-status-option3-icon-disabled);
807
- --hop-EmbeddedButton-option3-effect-background-color: transparent;
808
- --hop-EmbeddedButton-option3-effect-background-color-hovered: var(--hop-status-option3-surface-hover);
809
- --hop-EmbeddedButton-option3-effect-background-color-focused: var(--hop-status-option3-surface-hover);
810
- --hop-EmbeddedButton-option3-effect-background-color-pressed: var(--hop-status-option3-surface-press);
811
- --hop-EmbeddedButton-option3-effect-background-color-disabled: transparent;
812
- --hop-EmbeddedButton-option4-color: var(--hop-status-option4-icon);
813
- --hop-EmbeddedButton-option4-color-hovered: var(--hop-status-option4-icon-hover);
814
- --hop-EmbeddedButton-option4-color-focused: var(--hop-status-option4-icon-hover);
815
- --hop-EmbeddedButton-option4-color-pressed: var(--hop-status-option4-icon-press);
816
- --hop-EmbeddedButton-option4-color-disabled: var(--hop-status-option4-icon-disabled);
817
- --hop-EmbeddedButton-option4-effect-background-color: transparent;
818
- --hop-EmbeddedButton-option4-effect-background-color-hovered: var(--hop-status-option4-surface-hover);
819
- --hop-EmbeddedButton-option4-effect-background-color-focused: var(--hop-status-option4-surface-hover);
820
- --hop-EmbeddedButton-option4-effect-background-color-pressed: var(--hop-status-option4-surface-press);
821
- --hop-EmbeddedButton-option4-effect-background-color-disabled: transparent;
822
- --hop-EmbeddedButton-option5-color: var(--hop-status-option5-icon);
823
- --hop-EmbeddedButton-option5-color-hovered: var(--hop-status-option5-icon-hover);
824
- --hop-EmbeddedButton-option5-color-focused: var(--hop-status-option5-icon-hover);
825
- --hop-EmbeddedButton-option5-color-pressed: var(--hop-status-option5-icon-press);
826
- --hop-EmbeddedButton-option5-color-disabled: var(--hop-status-option5-icon-disabled);
827
- --hop-EmbeddedButton-option5-effect-background-color: transparent;
828
- --hop-EmbeddedButton-option5-effect-background-color-hovered: var(--hop-status-option5-surface-hover);
829
- --hop-EmbeddedButton-option5-effect-background-color-focused: var(--hop-status-option5-surface-hover);
830
- --hop-EmbeddedButton-option5-effect-background-color-pressed: var(--hop-status-option5-surface-press);
831
- --hop-EmbeddedButton-option5-effect-background-color-disabled: transparent;
832
- --hop-EmbeddedButton-option6-color: var(--hop-status-option6-icon);
833
- --hop-EmbeddedButton-option6-color-hovered: var(--hop-status-option6-icon-hover);
834
- --hop-EmbeddedButton-option6-color-focused: var(--hop-status-option6-icon-hover);
835
- --hop-EmbeddedButton-option6-color-pressed: var(--hop-status-option6-icon-press);
836
- --hop-EmbeddedButton-option6-color-disabled: var(--hop-status-option6-icon-disabled);
837
- --hop-EmbeddedButton-option6-effect-background-color: transparent;
838
- --hop-EmbeddedButton-option6-effect-background-color-hovered: var(--hop-status-option6-surface-hover);
839
- --hop-EmbeddedButton-option6-effect-background-color-focused: var(--hop-status-option6-surface-hover);
840
- --hop-EmbeddedButton-option6-effect-background-color-pressed: var(--hop-status-option6-surface-press);
841
- --hop-EmbeddedButton-option6-effect-background-color-disabled: transparent;
842
- --hop-EmbeddedButton-selected-color: var(--hop-neutral-icon-weak-selected);
843
- --hop-EmbeddedButton-selected-effect-background-color: var(--hop-neutral-surface-weak-selected);
844
- --spinner: var(--hop-primary-icon-strong);
845
- --padding-inline: 0;
846
- --padding-block: 0;
847
- --effect-background-color: var(--hop-EmbeddedButton-neutral-effect-background-color);
848
- --color: var(--hop-EmbeddedButton-neutral-color);
849
- --transition: var(--hop-easing-duration-2) var(--hop-easing-productive);
850
- --effect-border-radius: var(--hop-EmbeddedButton-effect-border-radius);
851
- --focus-ring-size: 0.125rem;
852
- cursor: pointer;
853
- position: relative;
854
- overflow: hidden;
855
- display: flex;
856
- flex-shrink: 0;
857
- align-items: center;
858
- justify-content: center;
859
- box-sizing: border-box;
860
- inline-size: var(--inline-size);
861
- block-size: var(--block-size);
862
- padding-block: var(--padding-block);
863
- padding-inline: var(--padding-inline);
864
- color: var(--color);
865
- text-decoration: none;
866
- white-space: nowrap;
867
- background: none;
868
- border: none;
869
- border-radius: var(--hop-EmbeddedButton-border-radius);
870
- outline: none;
871
- transition: color var(--transition);
872
- }
873
- .EmbeddedButton-module__hop-EmbeddedButton___yzIQS::before {
874
- content: "";
875
- position: absolute;
876
- inset-block-start: 50%;
877
- inset-inline-start: 50%;
878
- transform: translate(-50%, -50%);
879
- display: block;
880
- inline-size: var(--effect-inline-size);
881
- block-size: var(--effect-block-size);
882
- background-color: var(--effect-background-color);
883
- border-radius: var(--effect-border-radius);
884
- transition: background-color var(--transition);
885
- }
886
- .EmbeddedButton-module__hop-EmbeddedButton___yzIQS[data-square] {
887
- --effect-border-radius: var(--hop-EmbeddedButton-effect-square-border-radius);
888
- }
889
- .EmbeddedButton-module__hop-EmbeddedButton--md___r2Bw3 {
890
- --inline-size: var(--hop-EmbeddedButton-md-width);
891
- --block-size: var(--hop-EmbeddedButton-md-height);
892
- --focus-ring-offset: calc(-1 * var(--focus-ring-size));
893
- }
894
- .EmbeddedButton-module__hop-EmbeddedButton--lg___8OhW7 {
895
- --inline-size: var(--hop-EmbeddedButton-lg-width);
896
- --block-size: var(--hop-EmbeddedButton-lg-height);
897
- --focus-ring-offset: 0;
898
- }
899
- .EmbeddedButton-module__hop-EmbeddedButton--md___r2Bw3::before {
900
- --effect-inline-size: var(--hop-EmbeddedButton-md-effect-width);
901
- --effect-block-size: var(--hop-EmbeddedButton-md-effect-height);
902
- }
903
- .EmbeddedButton-module__hop-EmbeddedButton--lg___8OhW7::before {
904
- --effect-inline-size: var(--hop-EmbeddedButton-lg-effect-width);
905
- --effect-block-size: var(--hop-EmbeddedButton-lg-effect-height);
906
- }
907
- .EmbeddedButton-module__hop-EmbeddedButton--neutral___L1B-3 {
908
- --color: var(--hop-EmbeddedButton-neutral-color);
909
- --effect-background-color: var(--hop-EmbeddedButton-neutral-effect-background-color);
910
- }
911
- .EmbeddedButton-module__hop-EmbeddedButton--subdued___qKe-N {
912
- --color: var(--hop-EmbeddedButton-subdued-color);
913
- --effect-background-color: var(--hop-EmbeddedButton-subdued-effect-background-color);
914
- }
915
- .EmbeddedButton-module__hop-EmbeddedButton--progress___--F2T {
916
- --color: var(--hop-EmbeddedButton-progress-color);
917
- --effect-background-color: var(--hop-EmbeddedButton-progress-effect-background-color);
918
- }
919
- .EmbeddedButton-module__hop-EmbeddedButton--positive___fpzVV {
920
- --color: var(--hop-EmbeddedButton-positive-color);
921
- --effect-background-color: var(--hop-EmbeddedButton-positive-effect-background-color);
922
- }
923
- .EmbeddedButton-module__hop-EmbeddedButton--caution___eMIOA {
924
- --color: var(--hop-EmbeddedButton-caution-color);
925
- --effect-background-color: var(--hop-EmbeddedButton-caution-effect-background-color);
926
- }
927
- .EmbeddedButton-module__hop-EmbeddedButton--negative___kr4pW {
928
- --color: var(--hop-EmbeddedButton-negative-color);
929
- --effect-background-color: var(--hop-EmbeddedButton-negative-effect-background-color);
930
- }
931
- .EmbeddedButton-module__hop-EmbeddedButton--option1___6lwWT {
932
- --color: var(--hop-EmbeddedButton-option1-color);
933
- --effect-background-color: var(--hop-EmbeddedButton-option1-effect-background-color);
934
- }
935
- .EmbeddedButton-module__hop-EmbeddedButton--option2___PSYKj {
936
- --color: var(--hop-EmbeddedButton-option2-color);
937
- --effect-background-color: var(--hop-EmbeddedButton-option2-effect-background-color);
938
- }
939
- .EmbeddedButton-module__hop-EmbeddedButton--option3___9fXcs {
940
- --color: var(--hop-EmbeddedButton-option3-color);
941
- --effect-background-color: var(--hop-EmbeddedButton-option3-effect-background-color);
942
- }
943
- .EmbeddedButton-module__hop-EmbeddedButton--option4___ymvcy {
944
- --color: var(--hop-EmbeddedButton-option4-color);
945
- --effect-background-color: var(--hop-EmbeddedButton-option4-effect-background-color);
946
- }
947
- .EmbeddedButton-module__hop-EmbeddedButton--option5___LY9cs {
948
- --color: var(--hop-EmbeddedButton-option5-color);
949
- --effect-background-color: var(--hop-EmbeddedButton-option5-effect-background-color);
950
- }
951
- .EmbeddedButton-module__hop-EmbeddedButton--option6___H2A66 {
952
- --color: var(--hop-EmbeddedButton-option6-color);
953
- --effect-background-color: var(--hop-EmbeddedButton-option6-effect-background-color);
954
- }
955
- .EmbeddedButton-module__hop-EmbeddedButton___yzIQS[data-selected] {
956
- --color: var(--hop-EmbeddedButton-selected-color);
957
- --effect-background-color: var(--hop-EmbeddedButton-selected-effect-background-color);
958
- }
959
- .EmbeddedButton-module__hop-EmbeddedButton___yzIQS[data-focus-visible] {
960
- outline: var(--focus-ring-size) solid var(--hop-EmbeddedButton-focus-ring-color);
961
- outline-offset: var(--focus-ring-offset);
962
- }
963
- .EmbeddedButton-module__hop-EmbeddedButton___yzIQS[data-disabled] {
964
- cursor: not-allowed;
965
- }
966
- .EmbeddedButton-module__hop-EmbeddedButton--neutral___L1B-3[data-hovered] {
967
- --effect-background-color: var(--hop-EmbeddedButton-neutral-effect-background-color-hovered);
968
- --color: var(--hop-EmbeddedButton-neutral-color-hovered);
969
- }
970
- .EmbeddedButton-module__hop-EmbeddedButton--neutral___L1B-3[data-focus-visible] {
971
- --effect-background-color: var(--hop-EmbeddedButton-neutral-effect-background-color-focused);
972
- --color: var(--hop-EmbeddedButton-neutral-color-focused);
973
- }
974
- .EmbeddedButton-module__hop-EmbeddedButton--neutral___L1B-3[data-pressed] {
975
- --effect-background-color: var(--hop-EmbeddedButton-neutral-effect-background-color-pressed);
976
- --color: var(--hop-EmbeddedButton-neutral-color-pressed);
977
- }
978
- .EmbeddedButton-module__hop-EmbeddedButton--neutral___L1B-3[data-disabled] {
979
- --effect-background-color: var(--hop-EmbeddedButton-neutral-effect-background-color-disabled);
980
- --color: var(--hop-EmbeddedButton-neutral-color-disabled);
981
- }
982
- .EmbeddedButton-module__hop-EmbeddedButton--subdued___qKe-N[data-hovered] {
983
- --effect-background-color: var(--hop-EmbeddedButton-subdued-effect-background-color-hovered);
984
- --color: var(--hop-EmbeddedButton-subdued-color-hovered);
985
- }
986
- .EmbeddedButton-module__hop-EmbeddedButton--subdued___qKe-N[data-focus-visible] {
987
- --effect-background-color: var(--hop-EmbeddedButton-subdued-effect-background-color-focused);
988
- --color: var(--hop-EmbeddedButton-subdued-color-focused);
989
- }
990
- .EmbeddedButton-module__hop-EmbeddedButton--subdued___qKe-N[data-pressed] {
991
- --effect-background-color: var(--hop-EmbeddedButton-subdued-effect-background-color-pressed);
992
- --color: var(--hop-EmbeddedButton-subdued-color-pressed);
993
- }
994
- .EmbeddedButton-module__hop-EmbeddedButton--subdued___qKe-N[data-disabled] {
995
- --effect-background-color: var(--hop-EmbeddedButton-subdued-effect-background-color-disabled);
996
- --color: var(--hop-EmbeddedButton-subdued-color-disabled);
997
- }
998
- .EmbeddedButton-module__hop-EmbeddedButton--progress___--F2T[data-hovered] {
999
- --effect-background-color: var(--hop-EmbeddedButton-progress-effect-background-color-hovered);
1000
- --color: var(--hop-EmbeddedButton-progress-color-hovered);
1001
- }
1002
- .EmbeddedButton-module__hop-EmbeddedButton--progress___--F2T[data-focus-visible] {
1003
- --effect-background-color: var(--hop-EmbeddedButton-progress-effect-background-color-focused);
1004
- --color: var(--hop-EmbeddedButton-progress-color-focused);
1005
- }
1006
- .EmbeddedButton-module__hop-EmbeddedButton--progress___--F2T[data-pressed] {
1007
- --effect-background-color: var(--hop-EmbeddedButton-progress-effect-background-color-pressed);
1008
- --color: var(--hop-EmbeddedButton-progress-color-pressed);
1009
- }
1010
- .EmbeddedButton-module__hop-EmbeddedButton--progress___--F2T[data-disabled] {
1011
- --effect-background-color: var(--hop-EmbeddedButton-progress-effect-background-color-disabled);
1012
- --color: var(--hop-EmbeddedButton-progress-color-disabled);
1013
- }
1014
- .EmbeddedButton-module__hop-EmbeddedButton--positive___fpzVV[data-hovered] {
1015
- --effect-background-color: var(--hop-EmbeddedButton-positive-effect-background-color-hovered);
1016
- --color: var(--hop-EmbeddedButton-positive-color-hovered);
1017
- }
1018
- .EmbeddedButton-module__hop-EmbeddedButton--positive___fpzVV[data-focus-visible] {
1019
- --effect-background-color: var(--hop-EmbeddedButton-positive-effect-background-color-focused);
1020
- --color: var(--hop-EmbeddedButton-positive-color-focused);
1021
- }
1022
- .EmbeddedButton-module__hop-EmbeddedButton--positive___fpzVV[data-pressed] {
1023
- --effect-background-color: var(--hop-EmbeddedButton-positive-effect-background-color-pressed);
1024
- --color: var(--hop-EmbeddedButton-positive-color-pressed);
1025
- }
1026
- .EmbeddedButton-module__hop-EmbeddedButton--positive___fpzVV[data-disabled] {
1027
- --effect-background-color: var(--hop-EmbeddedButton-positive-effect-background-color-disabled);
1028
- --color: var(--hop-EmbeddedButton-positive-color-disabled);
1029
- }
1030
- .EmbeddedButton-module__hop-EmbeddedButton--caution___eMIOA[data-hovered] {
1031
- --effect-background-color: var(--hop-EmbeddedButton-caution-effect-background-color-hovered);
1032
- --color: var(--hop-EmbeddedButton-caution-color-hovered);
1033
- }
1034
- .EmbeddedButton-module__hop-EmbeddedButton--caution___eMIOA[data-focus-visible] {
1035
- --effect-background-color: var(--hop-EmbeddedButton-caution-effect-background-color-focused);
1036
- --color: var(--hop-EmbeddedButton-caution-color-focused);
1037
- }
1038
- .EmbeddedButton-module__hop-EmbeddedButton--caution___eMIOA[data-pressed] {
1039
- --effect-background-color: var(--hop-EmbeddedButton-caution-effect-background-color-pressed);
1040
- --color: var(--hop-EmbeddedButton-caution-color-pressed);
1041
- }
1042
- .EmbeddedButton-module__hop-EmbeddedButton--caution___eMIOA[data-disabled] {
1043
- --effect-background-color: var(--hop-EmbeddedButton-caution-effect-background-color-disabled);
1044
- --color: var(--hop-EmbeddedButton-caution-color-disabled);
1045
- }
1046
- .EmbeddedButton-module__hop-EmbeddedButton--negative___kr4pW[data-hovered] {
1047
- --effect-background-color: var(--hop-EmbeddedButton-negative-effect-background-color-hovered);
1048
- --color: var(--hop-EmbeddedButton-negative-color-hovered);
1049
- }
1050
- .EmbeddedButton-module__hop-EmbeddedButton--negative___kr4pW[data-focus-visible] {
1051
- --effect-background-color: var(--hop-EmbeddedButton-negative-effect-background-color-focused);
1052
- --color: var(--hop-EmbeddedButton-negative-color-focused);
1053
- }
1054
- .EmbeddedButton-module__hop-EmbeddedButton--negative___kr4pW[data-pressed] {
1055
- --effect-background-color: var(--hop-EmbeddedButton-negative-effect-background-color-pressed);
1056
- --color: var(--hop-EmbeddedButton-negative-color-pressed);
1057
- }
1058
- .EmbeddedButton-module__hop-EmbeddedButton--negative___kr4pW[data-disabled] {
1059
- --effect-background-color: var(--hop-EmbeddedButton-negative-effect-background-color-disabled);
1060
- --color: var(--hop-EmbeddedButton-negative-color-disabled);
1061
- }
1062
- .EmbeddedButton-module__hop-EmbeddedButton--option1___6lwWT[data-hovered] {
1063
- --effect-background-color: var(--hop-EmbeddedButton-option1-effect-background-color-hovered);
1064
- --color: var(--hop-EmbeddedButton-option1-color-hovered);
1065
- }
1066
- .EmbeddedButton-module__hop-EmbeddedButton--option1___6lwWT[data-focus-visible] {
1067
- --effect-background-color: var(--hop-EmbeddedButton-option1-effect-background-color-focused);
1068
- --color: var(--hop-EmbeddedButton-option1-color-focused);
1069
- }
1070
- .EmbeddedButton-module__hop-EmbeddedButton--option1___6lwWT[data-pressed] {
1071
- --effect-background-color: var(--hop-EmbeddedButton-option1-effect-background-color-pressed);
1072
- --color: var(--hop-EmbeddedButton-option1-color-pressed);
1073
- }
1074
- .EmbeddedButton-module__hop-EmbeddedButton--option1___6lwWT[data-disabled] {
1075
- --effect-background-color: var(--hop-EmbeddedButton-option1-effect-background-color-disabled);
1076
- --color: var(--hop-EmbeddedButton-option1-color-disabled);
1077
- }
1078
- .EmbeddedButton-module__hop-EmbeddedButton--option2___PSYKj[data-hovered] {
1079
- --effect-background-color: var(--hop-EmbeddedButton-option2-effect-background-color-hovered);
1080
- --color: var(--hop-EmbeddedButton-option2-color-hovered);
1081
- }
1082
- .EmbeddedButton-module__hop-EmbeddedButton--option2___PSYKj[data-focus-visible] {
1083
- --effect-background-color: var(--hop-EmbeddedButton-option2-effect-background-color-focused);
1084
- --color: var(--hop-EmbeddedButton-option2-color-focused);
1085
- }
1086
- .EmbeddedButton-module__hop-EmbeddedButton--option2___PSYKj[data-pressed] {
1087
- --effect-background-color: var(--hop-EmbeddedButton-option2-effect-background-color-pressed);
1088
- --color: var(--hop-EmbeddedButton-option2-color-pressed);
1089
- }
1090
- .EmbeddedButton-module__hop-EmbeddedButton--option2___PSYKj[data-disabled] {
1091
- --effect-background-color: var(--hop-EmbeddedButton-option2-effect-background-color-disabled);
1092
- --color: var(--hop-EmbeddedButton-option2-color-disabled);
1093
- }
1094
- .EmbeddedButton-module__hop-EmbeddedButton--option3___9fXcs[data-hovered] {
1095
- --effect-background-color: var(--hop-EmbeddedButton-option3-effect-background-color-hovered);
1096
- --color: var(--hop-EmbeddedButton-option3-color-hovered);
1097
- }
1098
- .EmbeddedButton-module__hop-EmbeddedButton--option3___9fXcs[data-focus-visible] {
1099
- --effect-background-color: var(--hop-EmbeddedButton-option3-effect-background-color-focused);
1100
- --color: var(--hop-EmbeddedButton-option3-color-focused);
1101
- }
1102
- .EmbeddedButton-module__hop-EmbeddedButton--option3___9fXcs[data-pressed] {
1103
- --effect-background-color: var(--hop-EmbeddedButton-option3-effect-background-color-pressed);
1104
- --color: var(--hop-EmbeddedButton-option3-color-pressed);
1105
- }
1106
- .EmbeddedButton-module__hop-EmbeddedButton--option3___9fXcs[data-disabled] {
1107
- --effect-background-color: var(--hop-EmbeddedButton-option3-effect-background-color-disabled);
1108
- --color: var(--hop-EmbeddedButton-option3-color-disabled);
1109
- }
1110
- .EmbeddedButton-module__hop-EmbeddedButton--option4___ymvcy[data-hovered] {
1111
- --effect-background-color: var(--hop-EmbeddedButton-option4-effect-background-color-hovered);
1112
- --color: var(--hop-EmbeddedButton-option4-color-hovered);
1113
- }
1114
- .EmbeddedButton-module__hop-EmbeddedButton--option4___ymvcy[data-focus-visible] {
1115
- --effect-background-color: var(--hop-EmbeddedButton-option4-effect-background-color-focused);
1116
- --color: var(--hop-EmbeddedButton-option4-color-focused);
1117
- }
1118
- .EmbeddedButton-module__hop-EmbeddedButton--option4___ymvcy[data-pressed] {
1119
- --effect-background-color: var(--hop-EmbeddedButton-option4-effect-background-color-pressed);
1120
- --color: var(--hop-EmbeddedButton-option4-color-pressed);
1121
- }
1122
- .EmbeddedButton-module__hop-EmbeddedButton--option4___ymvcy[data-disabled] {
1123
- --effect-background-color: var(--hop-EmbeddedButton-option4-effect-background-color-disabled);
1124
- --color: var(--hop-EmbeddedButton-option4-color-disabled);
1125
- }
1126
- .EmbeddedButton-module__hop-EmbeddedButton--option5___LY9cs[data-hovered] {
1127
- --effect-background-color: var(--hop-EmbeddedButton-option5-effect-background-color-hovered);
1128
- --color: var(--hop-EmbeddedButton-option5-color-hovered);
1129
- }
1130
- .EmbeddedButton-module__hop-EmbeddedButton--option5___LY9cs[data-focus-visible] {
1131
- --effect-background-color: var(--hop-EmbeddedButton-option5-effect-background-color-focused);
1132
- --color: var(--hop-EmbeddedButton-option5-color-focused);
1133
- }
1134
- .EmbeddedButton-module__hop-EmbeddedButton--option5___LY9cs[data-pressed] {
1135
- --effect-background-color: var(--hop-EmbeddedButton-option5-effect-background-color-pressed);
1136
- --color: var(--hop-EmbeddedButton-option5-color-pressed);
1137
- }
1138
- .EmbeddedButton-module__hop-EmbeddedButton--option5___LY9cs[data-disabled] {
1139
- --effect-background-color: var(--hop-EmbeddedButton-option5-effect-background-color-disabled);
1140
- --color: var(--hop-EmbeddedButton-option5-color-disabled);
1141
- }
1142
- .EmbeddedButton-module__hop-EmbeddedButton--option6___H2A66[data-hovered] {
1143
- --effect-background-color: var(--hop-EmbeddedButton-option6-effect-background-color-hovered);
1144
- --color: var(--hop-EmbeddedButton-option6-color-hovered);
1145
- }
1146
- .EmbeddedButton-module__hop-EmbeddedButton--option6___H2A66[data-focus-visible] {
1147
- --effect-background-color: var(--hop-EmbeddedButton-option6-effect-background-color-focused);
1148
- --color: var(--hop-EmbeddedButton-option6-color-focused);
1149
- }
1150
- .EmbeddedButton-module__hop-EmbeddedButton--option6___H2A66[data-pressed] {
1151
- --effect-background-color: var(--hop-EmbeddedButton-option6-effect-background-color-pressed);
1152
- --color: var(--hop-EmbeddedButton-option6-color-pressed);
1153
- }
1154
- .EmbeddedButton-module__hop-EmbeddedButton--option6___H2A66[data-disabled] {
1155
- --effect-background-color: var(--hop-EmbeddedButton-option6-effect-background-color-disabled);
1156
- --color: var(--hop-EmbeddedButton-option6-color-disabled);
1157
- }
1158
- .EmbeddedButton-module__hop-EmbeddedButton__icon___U-qG2 {
1159
- position: relative;
1160
- }
1161
-
1162
- /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/buttons/src/LinkButton.module.css/#css-module-data */
1163
- .Button-module__hop-Button___NTFpr {
1164
- --hop-Button-border-radius: var(--hop-shape-rounded-md);
1165
- --hop-Button-focus-ring-color: var(--hop-primary-border-focus);
1166
- --hop-Button-column-gap: var(--hop-space-inline-xs);
1167
- --hop-Button-icon-only-column-gap: 0;
1168
- --hop-Button-outline-size: var(--hop-space-20);
1169
- --hop-Button-border-size: var(--hop-space-10);
1170
- --hop-Button-text-underline-offset: var(--hop-space-20);
1171
- --hop-Button-icon-only-padding: 0;
1172
- --hop-Button-sm-height: 2rem;
1173
- --hop-Button-md-height: 2.5rem;
1174
- --hop-Button-sm-padding: 0 var(--hop-space-inset-md);
1175
- --hop-Button-md-padding: 0 var(--hop-space-inset-md);
1176
- --hop-Button-ghost-sm-padding: 0 var(--hop-space-inset-xs);
1177
- --hop-Button-ghost-md-padding: 0 var(--hop-space-inset-sm);
1178
- --hop-Button-color-disabled: var(--hop-neutral-text-disabled);
1179
- --hop-Button-background-color-disabled: var(--hop-neutral-surface-disabled);
1180
- --hop-Button-border-disabled: var(--hop-Button-border-size) solid var(--hop-Button-background-color-disabled);
1181
- --hop-Button-ghost-color-disabled: var(--hop-neutral-text-disabled);
1182
- --hop-Button-ghost-background-color-disabled: transparent;
1183
- --hop-Button-ghost-border-disabled: var(--hop-Button-border-size) solid var(--hop-Button-ghost-background-color-disabled);
1184
- --hop-Button-primary-color: var(--hop-primary-text-strong);
1185
- --hop-Button-primary-color-hover: var(--hop-primary-text-strong-hover);
1186
- --hop-Button-primary-color-pressed: var(--hop-primary-text-strong);
1187
- --hop-Button-primary-background-color: var(--hop-primary-surface-strong);
1188
- --hop-Button-primary-background-color-hover: var(--hop-primary-surface-strong-hover);
1189
- --hop-Button-primary-background-color-pressed: var(--hop-primary-surface-strong-press);
1190
- --hop-Button-primary-border: var(--hop-Button-border-size) solid var(--hop-Button-primary-background-color);
1191
- --hop-Button-primary-border-hover: var(--hop-Button-border-size) solid var(--hop-Button-primary-background-color-hover);
1192
- --hop-Button-primary-border-pressed: var(--hop-Button-border-size) solid var(--hop-Button-primary-background-color-pressed);
1193
- --hop-Button-primary-spinner-color: var(--hop-primary-icon-strong);
1194
- --hop-Button-secondary-color: var(--hop-neutral-text);
1195
- --hop-Button-secondary-color-hover: var(--hop-neutral-text-hover);
1196
- --hop-Button-secondary-color-pressed: var(--hop-neutral-text-press);
1197
- --hop-Button-secondary-background-color: var(--hop-neutral-surface);
1198
- --hop-Button-secondary-background-color-hover: var(--hop-neutral-surface-hover);
1199
- --hop-Button-secondary-background-color-pressed: var(--hop-neutral-surface-press);
1200
- --hop-Button-secondary-border: var(--hop-Button-border-size) solid var(--hop-neutral-border-strong);
1201
- --hop-Button-secondary-border-hover: var(--hop-Button-border-size) solid var(--hop-neutral-border-strong-hover);
1202
- --hop-Button-secondary-border-pressed: var(--hop-Button-border-size) solid var(--hop-neutral-border-strong);
1203
- --hop-Button-secondary-spinner-color: var(--hop-neutral-icon);
1204
- --hop-Button-upsell-color: var(--hop-upsell-text);
1205
- --hop-Button-upsell-color-hover: var(--hop-upsell-text-hover);
1206
- --hop-Button-upsell-color-pressed: var(--hop-upsell-text-press);
1207
- --hop-Button-upsell-background-color: var(--hop-upsell-surface);
1208
- --hop-Button-upsell-background-color-hover: var(--hop-upsell-surface-hover);
1209
- --hop-Button-upsell-background-color-pressed: var(--hop-upsell-surface-press);
1210
- --hop-Button-upsell-border: var(--hop-Button-border-size) solid var(--hop-Button-upsell-background-color);
1211
- --hop-Button-upsell-border-hover: var(--hop-Button-border-size) solid var(--hop-Button-upsell-background-color-hover);
1212
- --hop-Button-upsell-border-pressed: var(--hop-Button-border-size) solid var(--hop-Button-upsell-background-color-pressed);
1213
- --hop-Button-upsell-spinner-color: var(--hop-upsell-icon);
1214
- --hop-Button-danger-color: var(--hop-danger-text-strong);
1215
- --hop-Button-danger-color-hover: var(--hop-danger-text-strong-hover);
1216
- --hop-Button-danger-color-pressed: var(--hop-danger-text-strong-hover);
1217
- --hop-Button-danger-background-color: var(--hop-danger-surface-strong);
1218
- --hop-Button-danger-background-color-hover: var(--hop-danger-surface-strong-hover);
1219
- --hop-Button-danger-background-color-pressed: var(--hop-danger-surface-press);
1220
- --hop-Button-danger-border: var(--hop-Button-border-size) solid var(--hop-Button-danger-background-color);
1221
- --hop-Button-danger-border-hover: var(--hop-Button-border-size) solid var(--hop-Button-danger-background-color-hover);
1222
- --hop-Button-danger-border-pressed: var(--hop-Button-border-size) solid var(--hop-Button-danger-background-color-pressed);
1223
- --hop-Button-danger-spinner-color: var(--hop-primary-icon-strong);
1224
- --hop-Button-ghost-primary-color: var(--hop-primary-text);
1225
- --hop-Button-ghost-primary-color-hover: var(--hop-primary-text-hover);
1226
- --hop-Button-ghost-primary-color-pressed: var(--hop-primary-text-press);
1227
- --hop-Button-ghost-primary-background-color: transparent;
1228
- --hop-Button-ghost-primary-background-color-hover: var(--hop-neutral-surface-hover);
1229
- --hop-Button-ghost-primary-background-color-pressed: var(--hop-primary-surface-weak-press);
1230
- --hop-Button-ghost-primary-border: var(--hop-Button-border-size) solid var(--hop-Button-ghost-primary-background-color);
1231
- --hop-Button-ghost-primary-border-hover: var(--hop-Button-border-size) solid var(--hop-Button-ghost-primary-background-color-hover);
1232
- --hop-Button-ghost-primary-border-pressed: var(--hop-Button-border-size) solid var(--hop-Button-ghost-primary-background-color-pressed);
1233
- --hop-Button-ghost-primary-spinner-color: var(--hop-neutral-icon);
1234
- --hop-Button-ghost-secondary-color: var(--hop-neutral-text-weak);
1235
- --hop-Button-ghost-secondary-color-hover: var(--hop-neutral-text-weak-hover);
1236
- --hop-Button-ghost-secondary-color-pressed: var(--hop-neutral-text-weak-press);
1237
- --hop-Button-ghost-secondary-background-color: transparent;
1238
- --hop-Button-ghost-secondary-background-color-hover: var(--hop-neutral-surface-hover);
1239
- --hop-Button-ghost-secondary-background-color-pressed: var(--hop-neutral-surface-press);
1240
- --hop-Button-ghost-secondary-border: var(--hop-Button-border-size) solid var(--hop-Button-ghost-secondary-background-color);
1241
- --hop-Button-ghost-secondary-border-hover: var(--hop-Button-border-size) solid var(--hop-Button-ghost-secondary-background-color-hover);
1242
- --hop-Button-ghost-secondary-border-pressed: var(--hop-Button-border-size) solid var(--hop-Button-ghost-secondary-background-color-pressed);
1243
- --hop-Button-ghost-secondary-spinner-color: var(--hop-neutral-icon);
1244
- --hop-Button-ghost-danger-color: var(--hop-danger-text-weak);
1245
- --hop-Button-ghost-danger-color-hover: var(--hop-danger-text-hover);
1246
- --hop-Button-ghost-danger-color-pressed: var(--hop-danger-text-press);
1247
- --hop-Button-ghost-danger-background-color: transparent;
1248
- --hop-Button-ghost-danger-background-color-hover: var(--hop-neutral-surface-hover);
1249
- --hop-Button-ghost-danger-background-color-pressed: var(--hop-danger-surface-weak-press);
1250
- --hop-Button-ghost-danger-border: var(--hop-Button-border-size) solid var(--hop-Button-ghost-danger-background-color);
1251
- --hop-Button-ghost-danger-border-hover: var(--hop-Button-border-size) solid var(--hop-Button-ghost-danger-background-color-hover);
1252
- --hop-Button-ghost-danger-border-pressed: var(--hop-Button-border-size) solid var(--hop-Button-ghost-danger-background-color-pressed);
1253
- --hop-Button-ghost-danger-spinner-color: var(--hop-neutral-icon);
1254
- --inline-size: max-content;
1255
- --block-size: var(--hop-Button-md-height);
1256
- --background-color: var(--hop-primary-surface-strong);
1257
- --color: var(--hop-primary-text-strong);
1258
- --column-gap: var(--hop-Button-column-gap);
1259
- --spinner: var(--hop-primary-icon-strong);
1260
- --border: 0;
1261
- --padding: var(--hop-Button-md-padding);
1262
- --text-underline: none;
1263
- cursor: pointer;
1264
- position: relative;
1265
- overflow: hidden;
1266
- display: flex;
1267
- column-gap: var(--column-gap);
1268
- align-items: center;
1269
- justify-content: center;
1270
- box-sizing: border-box;
1271
- inline-size: var(--inline-size);
1272
- block-size: var(--block-size);
1273
- padding: var(--padding);
1274
- color: var(--color);
1275
- text-decoration: none;
1276
- white-space: nowrap;
1277
- background-color: var(--background-color);
1278
- border: var(--border);
1279
- border-radius: var(--hop-Button-border-radius);
1280
- outline: none;
1281
- outline-offset: var(--hop-Button-outline-size);
1282
- transition:
1283
- color var(--hop-easing-duration-2) var(--hop-easing-productive),
1284
- background-color var(--hop-easing-duration-2) var(--hop-easing-productive),
1285
- border var(--hop-easing-duration-2) var(--hop-easing-productive);
1286
- }
1287
- .Button-module__hop-Button--fluid___koaex {
1288
- --inline-size: 100%;
1289
- }
1290
- .Button-module__hop-Button--sm___Ovyb2 {
1291
- --block-size: var(--hop-Button-sm-height);
1292
- --padding: var(--hop-Button-sm-padding);
1293
- }
1294
- .Button-module__hop-Button--sm___Ovyb2[class*=--ghost] {
1295
- --padding: var(--hop-Button-ghost-sm-padding);
1296
- }
1297
- .Button-module__hop-Button--md___i0loO[class*=--ghost] {
1298
- --padding: var(--hop-Button-ghost-md-padding);
1299
- }
1300
- .Button-module__hop-Button--icon-only___pUmd7 {
1301
- --column-gap: var(--hop-Button-icon-only-column-gap);
1302
- --padding: var(--hop-Button-icon-only-padding);
1303
- aspect-ratio: 1;
1304
- }
1305
- .Button-module__hop-Button--primary___Pm4Kg {
1306
- --background-color: var(--hop-Button-primary-background-color);
1307
- --color: var(--hop-Button-primary-color);
1308
- --border: var(--hop-Button-primary-border);
1309
- --spinner-color: var(--hop-Button-primary-spinner-color);
1310
- }
1311
- .Button-module__hop-Button--primary___Pm4Kg[data-hovered],
1312
- .Button-module__hop-Button--primary___Pm4Kg[data-focus-visible] {
1313
- --background-color: var(--hop-Button-primary-background-color-hover);
1314
- --color: var(--hop-Button-primary-color-hover);
1315
- --border: var(--hop-Button-primary-border-hover);
1316
- }
1317
- .Button-module__hop-Button--primary___Pm4Kg[data-pressed] {
1318
- --background-color: var(--hop-Button-primary-background-color-pressed);
1319
- --color: var(--hop-Button-primary-color-pressed);
1320
- --border: var(--hop-Button-primary-border-pressed);
1321
- }
1322
- .Button-module__hop-Button--secondary___aXDWm {
1323
- --background-color: var(--hop-Button-secondary-background-color);
1324
- --color: var(--hop-Button-secondary-color);
1325
- --border: var(--hop-Button-secondary-border);
1326
- --spinner-color: var(--hop-Button-secondary-spinner-color);
1327
- }
1328
- .Button-module__hop-Button--secondary___aXDWm[data-hovered],
1329
- .Button-module__hop-Button--secondary___aXDWm[data-focus-visible] {
1330
- --background-color: var(--hop-Button-secondary-background-color-hover);
1331
- --color: var(--hop-Button-secondary-color-hover);
1332
- --border: var(--hop-Button-secondary-border-hover);
1333
- }
1334
- .Button-module__hop-Button--secondary___aXDWm[data-pressed] {
1335
- --background-color: var(--hop-Button-secondary-background-color-pressed);
1336
- --color: var(--hop-Button-secondary-color-pressed);
1337
- --border: var(--hop-Button-secondary-border-pressed);
1338
- }
1339
- .Button-module__hop-Button--upsell___Z1fpJ {
1340
- --background-color: var(--hop-Button-upsell-background-color);
1341
- --color: var(--hop-Button-upsell-color);
1342
- --border: var(--hop-Button-upsell-border);
1343
- --spinner-color: var(--hop-Button-upsell-spinner-color);
1344
- }
1345
- .Button-module__hop-Button--upsell___Z1fpJ[data-hovered],
1346
- .Button-module__hop-Button--upsell___Z1fpJ[data-focus-visible] {
1347
- --background-color: var(--hop-Button-upsell-background-color-hover);
1348
- --color: var(--hop-Button-upsell-color-hover);
1349
- --border: var(--hop-Button-upsell-border-hover);
1350
- }
1351
- .Button-module__hop-Button--upsell___Z1fpJ[data-pressed] {
1352
- --background-color: var(--hop-Button-upsell-background-color-pressed);
1353
- --color: var(--hop-Button-upsell-color-pressed);
1354
- --border: var(--hop-Button-upsell-border-pressed);
1355
- }
1356
- .Button-module__hop-Button--danger___Gzic4 {
1357
- --background-color: var(--hop-Button-danger-background-color);
1358
- --color: var(--hop-Button-danger-color);
1359
- --border: var(--hop-Button-danger-border);
1360
- --spinner-color: var(--hop-Button-danger-spinner-color);
1361
- }
1362
- .Button-module__hop-Button--danger___Gzic4[data-hovered],
1363
- .Button-module__hop-Button--danger___Gzic4[data-focus-visible] {
1364
- --background-color: var(--hop-Button-danger-background-color-hover);
1365
- --color: var(--hop-Button-danger-color-hover);
1366
- --border: var(--hop-Button-danger-border-hover);
1367
- }
1368
- .Button-module__hop-Button--danger___Gzic4[data-pressed] {
1369
- --background-color: var(--hop-Button-danger-background-color-pressed);
1370
- --color: var(--hop-Button-danger-color-pressed);
1371
- --border: var(--hop-Button-danger-border-pressed);
1372
- }
1373
- .Button-module__hop-Button--ghost-primary___5O9QG {
1374
- --background-color: var(--hop-Button-ghost-primary-background-color);
1375
- --color: var(--hop-Button-ghost-primary-color);
1376
- --border: var(--hop-Button-ghost-primary-border);
1377
- --spinner-color: var(--hop-Button-ghost-primary-spinner-color);
1378
- }
1379
- .Button-module__hop-Button--ghost-primary___5O9QG[data-hovered],
1380
- .Button-module__hop-Button--ghost-primary___5O9QG[data-focus-visible] {
1381
- --background-color: var(--hop-Button-ghost-primary-background-color-hover);
1382
- --color: var(--hop-Button-ghost-primary-color-hover);
1383
- --border: var(--hop-Button-ghost-primary-border-hover);
1384
- --text-underline: underline;
1385
- }
1386
- .Button-module__hop-Button--ghost-primary___5O9QG[data-pressed] {
1387
- --background-color: var(--hop-Button-ghost-primary-background-color-pressed);
1388
- --color: var(--hop-Button-ghost-primary-color-pressed);
1389
- --border: var(--hop-Button-ghost-primary-border-pressed);
1390
- --text-underline: underline;
1391
- }
1392
- .Button-module__hop-Button--ghost-secondary___e0DRm {
1393
- --background-color: var(--hop-Button-ghost-secondary-background-color);
1394
- --color: var(--hop-Button-ghost-secondary-color);
1395
- --border: var(--hop-Button-ghost-secondary-border);
1396
- --spinner-color: var(--hop-Button-ghost-secondary-spinner-color);
1397
- }
1398
- .Button-module__hop-Button--ghost-secondary___e0DRm[data-hovered],
1399
- .Button-module__hop-Button--ghost-secondary___e0DRm[data-focus-visible] {
1400
- --background-color: var(--hop-Button-ghost-secondary-background-color-hover);
1401
- --color: var(--hop-Button-ghost-secondary-color-hover);
1402
- --border: var(--hop-Button-ghost-secondary-border-hover);
1403
- --text-underline: underline;
1404
- }
1405
- .Button-module__hop-Button--ghost-secondary___e0DRm[data-pressed] {
1406
- --background-color: var(--hop-Button-ghost-secondary-background-color-pressed);
1407
- --color: var(--hop-Button-ghost-secondary-color-pressed);
1408
- --border: var(--hop-Button-ghost-secondary-border-pressed);
1409
- --text-underline: underline;
1410
- }
1411
- .Button-module__hop-Button--ghost-danger___JU7M7 {
1412
- --background-color: var(--hop-Button-ghost-danger-background-color);
1413
- --color: var(--hop-Button-ghost-danger-color);
1414
- --border: var(--hop-Button-ghost-danger-border);
1415
- --spinner-color: var(--hop-Button-ghost-danger-spinner-color);
1416
- }
1417
- .Button-module__hop-Button--ghost-danger___JU7M7[data-hovered],
1418
- .Button-module__hop-Button--ghost-danger___JU7M7[data-focus-visible] {
1419
- --background-color: var(--hop-Button-ghost-danger-background-color-hover);
1420
- --color: var(--hop-Button-ghost-danger-color-hover);
1421
- --border: var(--hop-Button-ghost-danger-border-hover);
1422
- --text-underline: underline;
1423
- }
1424
- .Button-module__hop-Button--ghost-danger___JU7M7[data-pressed] {
1425
- --background-color: var(--hop-Button-ghost-danger-background-color-pressed);
1426
- --color: var(--hop-Button-ghost-danger-color-pressed);
1427
- --border: var(--hop-Button-ghost-danger-border-pressed);
1428
- --text-underline: underline;
1429
- }
1430
- .Button-module__hop-Button___NTFpr[data-focus-visible] {
1431
- outline: var(--hop-Button-outline-size) solid var(--hop-Button-focus-ring-color);
1432
- }
1433
- .Button-module__hop-Button___NTFpr[data-disabled],
1434
- .Button-module__hop-Button___NTFpr[data-pending] {
1435
- cursor: not-allowed;
1436
- }
1437
- .Button-module__hop-Button___NTFpr[data-disabled] {
1438
- --background-color: var(--hop-Button-background-color-disabled);
1439
- --color: var(--hop-Button-color-disabled);
1440
- --border: var(--hop-Button-border-disabled);
1441
- }
1442
- .Button-module__hop-Button___NTFpr[class*=--ghost][data-disabled] {
1443
- --background-color: var(--hop-Button-ghost-background-color-disabled);
1444
- --color: var(--hop-Button-ghost-color-disabled);
1445
- --border: var(--hop-Button-ghost-border-disabled);
1446
- }
1447
- .Button-module__hop-Button--primary___Pm4Kg[data-pending] {
1448
- --background-color: var(--hop-Button-primary-background-color);
1449
- --color: var(--hop-Button-primary-color);
1450
- --border: var(--hop-Button-primary-border);
1451
- }
1452
- .Button-module__hop-Button--secondary___aXDWm[data-pending] {
1453
- --background-color: var(--hop-Button-secondary-background-color);
1454
- --color: var(--hop-Button-secondary-color);
1455
- --border: var(--hop-Button-secondary-border);
1456
- }
1457
- .Button-module__hop-Button--upsell___Z1fpJ[data-pending] {
1458
- --background-color: var(--hop-Button-upsell-background-color);
1459
- --color: var(--hop-Button-upsell-color);
1460
- --border: var(--hop-Button-upsell-border);
1461
- }
1462
- .Button-module__hop-Button--danger___Gzic4[data-pending] {
1463
- --background-color: var(--hop-Button-danger-background-color);
1464
- --color: var(--hop-Button-danger-color);
1465
- --border: var(--hop-Button-danger-border);
1466
- }
1467
- .Button-module__hop-Button--ghost-primary___5O9QG[data-pending] {
1468
- --background-color: var(--hop-Button-ghost-primary-background-color);
1469
- --color: var(--hop-Button-ghost-primary-color);
1470
- --border: var(--hop-Button-ghost-primary-border);
1471
- --text-underline: none;
1472
- }
1473
- .Button-module__hop-Button--ghost-secondary___e0DRm[data-pending] {
1474
- --background-color: var(--hop-Button-ghost-secondary-background-color);
1475
- --color: var(--hop-Button-ghost-secondary-color);
1476
- --border: var(--hop-Button-ghost-secondary-border);
1477
- --text-underline: none;
1478
- }
1479
- .Button-module__hop-Button--ghost-danger___JU7M7[data-pending] {
1480
- --background-color: var(--hop-Button-ghost-danger-background-color);
1481
- --color: var(--hop-Button-ghost-danger-color);
1482
- --border: var(--hop-Button-ghost-danger-border);
1483
- --text-underline: none;
1484
- }
1485
- .Button-module__hop-Button__Spinner___Y2HxQ {
1486
- position: absolute;
1487
- color: var(--spinner-color);
1488
- }
1489
- .Button-module__hop-Button__icon___iJr7x,
1490
- .Button-module__hop-Button__icon-list___JRDIl {
1491
- flex: 0 0 auto;
1492
- justify-self: end;
1493
- order: 1;
1494
- }
1495
- .Button-module__hop-Button__text___sKE6W {
1496
- user-select: none;
1497
- overflow: visible;
1498
- flex: 0 1 auto;
1499
- order: 2;
1500
- font-weight: var(--hop-font-weight-505);
1501
- text-decoration: var(--text-underline);
1502
- text-underline-offset: 0.125rem;
1503
- text-wrap: nowrap;
1504
- }
1505
- .Button-module__hop-Button__end-icon___o0aoJ,
1506
- .Button-module__hop-Button__end-icon-list___-hxB- {
1507
- flex: 0 0 auto;
1508
- order: 3;
1509
- }
1510
- .Button-module__hop-Button___NTFpr .Button-module__hop-Button__icon-list___JRDIl,
1511
- .Button-module__hop-Button___NTFpr .Button-module__hop-Button__end-icon-list___-hxB- {
1512
- flex-wrap: nowrap;
1513
- }
1514
- .Button-module__hop-Button___NTFpr[data-pending] > *:not(.Button-module__hop-Button__Spinner___Y2HxQ) {
1515
- opacity: 0;
1516
- }
1517
- .LinkButton-module__hop-LinkButton___e7amV {
1518
- }
1519
- .LinkButton-module__hop-LinkButton--fluid___EZ70J {
1520
- }
1521
- .LinkButton-module__hop-LinkButton--sm___MWhRm {
1522
- }
1523
- .LinkButton-module__hop-LinkButton--icon-only___56tLs {
1524
- }
1525
- .LinkButton-module__hop-LinkButton--primary___IFi-0 {
1526
- }
1527
- .LinkButton-module__hop-LinkButton--secondary___9C09g {
1528
- }
1529
- .LinkButton-module__hop-LinkButton--upsell___nAUtv {
1530
- }
1531
- .LinkButton-module__hop-LinkButton--danger___aUFiz {
1532
- }
1533
- .LinkButton-module__hop-LinkButton--ghost-primary___biEfy {
1534
- }
1535
- .LinkButton-module__hop-LinkButton--ghost-secondary___y8x9I {
1536
- }
1537
- .LinkButton-module__hop-LinkButton--ghost-danger___-Teso {
1538
- }
1539
- .LinkButton-module__hop-LinkButton__Spinner___TtQwh {
1540
- }
1541
- .LinkButton-module__hop-LinkButton__icon___nAzTW,
1542
- .LinkButton-module__hop-LinkButton__icon-list___iGU0e {
1543
- }
1544
- .LinkButton-module__hop-LinkButton__text___-OM4Y {
1545
- }
1546
- .LinkButton-module__hop-LinkButton__end-icon___YfWUP,
1547
- .LinkButton-module__hop-LinkButton__end-icon-list___UyX1X {
1548
- }
1549
- .LinkButton-module__hop-LinkButton___e7amV .LinkButton-module__hop-LinkButton__icon-list___iGU0e,
1550
- .LinkButton-module__hop-LinkButton___e7amV .LinkButton-module__hop-LinkButton__end-icon-list___UyX1X {
1551
- flex-wrap: nowrap;
1552
- }
1553
-
1554
235
  /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/inputs/src/InputGroup.module.css/#css-module-data */
1555
- .InputGroup-module__hop-InputGroup___N8RYp {
236
+ .InputGroup-module__hop-InputGroup___-SLz7 {
1556
237
  --hop-InputGroup-background: var(--hop-neutral-surface);
1557
238
  --hop-InputGroup-border-color: var(--hop-neutral-border);
1558
239
  --hop-InputGroup-border-width: 0.0625rem;
1559
- --hop-InputGroup-display: inline-flex;
1560
- --hop-InputGroup-display-number: grid;
1561
240
  --hop-InputGroup-gap: var(--hop-space-inline-sm);
1562
- --hop-InputGroup-gap-textarea: 0;
1563
- --hop-InputGroup-gap-number: 0;
1564
- --hop-InputGroup-flex-direction: row;
1565
- --hop-InputGroup-flex-direction-textarea: column;
1566
- --hop-InputGroup-align-items: center;
1567
- --hop-InputGroup-align-items-textarea: flex-end;
1568
241
  --hop-InputGroup-inline-size: fit-content;
1569
- --hop-InputGroup-sm-block-size: 2rem;
1570
- --hop-InputGroup-md-block-size: 2.5rem;
1571
- --hop-InputGroup-block-size-textarea: auto;
1572
242
  --hop-InputGroup-border-radius: var(--hop-shape-rounded-md);
1573
243
  --hop-InputGroup-padding-inline: var(--hop-space-inset-md);
1574
244
  --hop-InputGroup-padding-block: 0;
1575
- --hop-InputGroup-padding-inline-textarea: var(--hop-space-inset-xs);
1576
- --hop-InputGroup-padding-block-textarea: var(--hop-space-inset-xs);
1577
245
  --hop-InputGroup-border-color-hover: var(--hop-neutral-border-hover);
1578
246
  --hop-InputGroup-border-color-focus: var(--hop-primary-border-focus);
1579
247
  --hop-InputGroup-background-hover: var(--hop-neutral-surface-hover);
1580
248
  --hop-InputGroup-border-color-invalid: var(--hop-danger-border-strong);
1581
- --hop-InputGroup-input-color: var(--hop-neutral-text);
1582
- --hop-InputGroup-input-color-disabled: var(--hop-neutral-text-disabled);
1583
- --hop-InputGroup-input-sm-font-family: var(--hop-body-sm-font-family);
1584
- --hop-InputGroup-input-sm-font-size: var(--hop-body-sm-font-size);
1585
- --hop-InputGroup-input-sm-font-weight: var(--hop-body-sm-font-weight);
1586
- --hop-InputGroup-input-sm-line-height: var(--hop-body-sm-line-height);
1587
- --hop-InputGroup-input-sm-block-size: 1.5rem;
1588
- --hop-InputGroup-input-md-font-family: var(--hop-body-md-font-family);
1589
- --hop-InputGroup-input-md-font-size: var(--hop-body-md-font-size);
1590
- --hop-InputGroup-input-md-font-weight: var(--hop-body-md-font-weight);
1591
- --hop-InputGroup-input-md-line-height: var(--hop-body-md-line-height);
1592
- --hop-InputGroup-input-md-block-size: 2rem;
1593
- --hop-InputGroup-input-padding: 0;
1594
- --hop-InputGroup-textarea-padding: var(--hop-space-inset-xs) calc(var(--hop-space-inset-md) - var(--hop-space-inset-xs));
1595
249
  --hop-InputGroup-background-disabled: var(--hop-neutral-surface-disabled);
1596
250
  --hop-InputGroup-border-color-disabled: var(--hop-neutral-border-disabled);
1597
- --hop-InputGroup-placeholder-font-family: inherit;
1598
- --hop-InputGroup-placeholder-font-size: inherit;
1599
- --hop-InputGroup-placeholder-font-weight: inherit;
1600
- --hop-InputGroup-placeholder-line-height: inherit;
1601
- --hop-InputGroup-placeholder-color: var(--hop-neutral-text-weakest);
1602
- --hop-InputGroup-placeholder-color-disabled: var(--hop-neutral-text-disabled);
1603
- --hop-InputGroup-embedded-button-margin-inline-end: calc(-1 * var(--hop-space-inline-sm));
1604
251
  --inline-size: var(--hop-InputGroup-inline-size);
1605
252
  --border: var(--hop-InputGroup-border-width) solid var(--hop-InputGroup-border-color);
1606
253
  --background: var(--hop-InputGroup-background);
1607
- --block-size: var(--hop-InputGroup-md-block-size);
1608
- --display: var(--hop-InputGroup-display);
1609
- --gap: var(--hop-InputGroup-gap);
1610
- --flex-direction: var(--hop-InputGroup-flex-direction);
1611
- --align-items: var(--hop-InputGroup-align-items);
1612
- --padding-inline: var(--hop-InputGroup-padding-inline);
1613
- --padding-block: var(--hop-InputGroup-padding-block);
1614
- --input-font-family: var(--hop-InputGroup-input-md-font-family);
1615
- --input-font-size: var(--hop-InputGroup-input-md-font-size);
1616
- --input-font-weight: var(--hop-InputGroup-input-md-font-weight);
1617
- --input-line-height: var(--hop-InputGroup-input-md-line-height);
1618
- --input-block-size: var(--hop-InputGroup-input-md-block-size);
1619
- --input-inline-size: initial;
1620
- --input-color: var(--hop-InputGroup-input-color);
1621
- --input-placeholder-color: var(--hop-InputGroup-placeholder-color);
1622
254
  position: relative;
1623
- display: var(--display);
1624
- flex-direction: var(--flex-direction);
1625
- gap: var(--gap);
1626
- align-items: var(--align-items);
255
+ display: inline-flex;
256
+ flex-direction: row;
257
+ gap: var(--hop-InputGroup-gap);
258
+ align-items: center;
1627
259
  box-sizing: border-box;
1628
260
  inline-size: var(--inline-size);
1629
- block-size: var(--block-size);
1630
- padding-block: var(--padding-block);
1631
- padding-inline: var(--padding-inline);
261
+ padding-block: var(--hop-InputGroup-padding-block);
262
+ padding-inline: var(--hop-InputGroup-padding-inline);
1632
263
  background: var(--background);
1633
264
  border: var(--border);
1634
265
  border-radius: var(--hop-InputGroup-border-radius);
1635
266
  }
1636
- .InputGroup-module__hop-InputGroup--fluid___9vGKT {
267
+ .InputGroup-module__hop-InputGroup--fluid___Ev-PS {
1637
268
  --inline-size: 100%;
1638
- --input-inline-size: 100%;
1639
- }
1640
- .InputGroup-module__hop-InputGroup--sm___Jx4ce {
1641
- --block-size: var(--hop-InputGroup-sm-block-size);
1642
- --input-font-family: var(--hop-InputGroup-input-sm-font-family);
1643
- --input-font-size: var(--hop-InputGroup-input-sm-font-size);
1644
- --input-font-weight: var(--hop-InputGroup-input-sm-font-weight);
1645
- --input-line-height: var(--hop-InputGroup-input-sm-line-height);
1646
- --input-block-size: var(--hop-InputGroup-input-sm-block-size);
1647
269
  }
1648
- .InputGroup-module__hop-InputGroup___N8RYp[data-input-type=textarea] {
1649
- --gap: var(--hop-InputGroup-gap-textarea);
1650
- --flex-direction: var(--hop-InputGroup-flex-direction-textarea);
1651
- --align-items: var(--hop-InputGroup-align-items-textarea);
1652
- --block-size: var(--hop-InputGroup-block-size-textarea);
1653
- --padding-inline: var(--hop-InputGroup-padding-inline-textarea);
1654
- --padding-block: var(--hop-InputGroup-padding-block-textarea);
1655
- }
1656
- .InputGroup-module__hop-InputGroup___N8RYp[data-input-type=number] {
1657
- --display: var(--hop-InputGroup-display-number);
1658
- --gap: var(--hop-InputGroup-gap-number);
1659
- }
1660
- .InputGroup-module__hop-InputGroup___N8RYp[data-hovered] {
270
+ .InputGroup-module__hop-InputGroup___-SLz7[data-hovered] {
1661
271
  --background: var(--hop-InputGroup-background-hover);
1662
272
  --border: var(--hop-InputGroup-border-width) solid var(--hop-InputGroup-border-color-hover) ;
1663
273
  }
1664
- .InputGroup-module__hop-InputGroup___N8RYp[data-focus-within] {
274
+ .InputGroup-module__hop-InputGroup___-SLz7[data-focus-within] {
1665
275
  --border: var(--hop-InputGroup-border-width) solid var(--hop-InputGroup-border-color-focus) ;
1666
276
  }
1667
- .InputGroup-module__hop-InputGroup___N8RYp[data-invalid] {
277
+ .InputGroup-module__hop-InputGroup___-SLz7[data-invalid] {
1668
278
  --border: var(--hop-InputGroup-border-width) solid var(--hop-InputGroup-border-color-invalid) ;
1669
279
  }
1670
- .InputGroup-module__hop-InputGroup___N8RYp[data-disabled] {
280
+ .InputGroup-module__hop-InputGroup___-SLz7[data-disabled] {
1671
281
  --background: var(--hop-InputGroup-background-disabled);
1672
- --border: 0.0625rem solid var(--hop-InputGroup-border-color-disabled);
1673
- --input-color: var(--hop-InputGroup-input-color-disabled);
1674
- --input-placeholder-color: var(--hop-InputGroup-placeholder-color-disabled);
1675
- }
1676
- .InputGroup-module__hop-InputGroup__input___Dys-L,
1677
- .InputGroup-module__hop-InputGroup__textarea___mTuX6 {
1678
- flex: 1 1 auto;
1679
- box-sizing: border-box;
1680
- inline-size: var(--input-inline-size);
1681
- min-inline-size: 0;
1682
- font-family: var(--input-font-family);
1683
- font-size: var(--input-font-size);
1684
- font-weight: var(--input-font-weight);
1685
- line-height: var(--input-line-height);
1686
- color: var(--input-color);
1687
- background: transparent;
1688
- border: none;
1689
- outline: none;
1690
- }
1691
- .InputGroup-module__hop-InputGroup__input___Dys-L {
1692
- block-size: var(--input-block-size);
1693
- padding: var(--hop-InputGroup-input-padding);
1694
- }
1695
- .InputGroup-module__hop-InputGroup__textarea___mTuX6 {
1696
- padding: var(--hop-InputGroup-textarea-padding);
1697
- }
1698
- .InputGroup-module__hop-InputGroup__input___Dys-L::placeholder {
1699
- font-family: var(--hop-InputGroup-placeholder-font-family);
1700
- font-size: var(--hop-InputGroup-placeholder-font-size);
1701
- font-weight: var(--hop-InputGroup-placeholder-font-weight);
1702
- line-height: var(--hop-InputGroup-placeholder-line-height);
1703
- color: var(--input-placeholder-color);
1704
- }
1705
- .InputGroup-module__hop-InputGroup__embedded-button___WwmYu {
1706
- margin-inline-end: var(--hop-InputGroup-embedded-button-margin-inline-end);
282
+ --border: var(--hop-InputGroup-border-width) solid var(--hop-InputGroup-border-color-disabled);
1707
283
  }