@hopper-ui/components 1.4.7 → 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 (308) hide show
  1. package/CHANGELOG.md +12 -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 +4 -4
  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 +6 -6
  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 +1 -1
  20. package/dist/Badge/src/index.css +53 -53
  21. package/dist/Badge/src/index.js +4 -4
  22. package/dist/Callout/src/Callout.css +262 -262
  23. package/dist/Callout/src/Callout.js +11 -11
  24. package/dist/Callout/src/CompactCallout.css +293 -293
  25. package/dist/Callout/src/CompactCallout.js +13 -13
  26. package/dist/Callout/src/index.css +304 -304
  27. package/dist/Callout/src/index.js +14 -14
  28. package/dist/Card/src/Card.css +31 -31
  29. package/dist/Card/src/Card.js +1 -1
  30. package/dist/Card/src/index.css +31 -31
  31. package/dist/Card/src/index.js +1 -1
  32. package/dist/ComboBox/src/ComboBox.css +3202 -2852
  33. package/dist/ComboBox/src/ComboBox.d.ts +6 -6
  34. package/dist/ComboBox/src/ComboBox.js +21 -18
  35. package/dist/ComboBox/src/ComboBoxContext.d.ts +3 -2
  36. package/dist/ComboBox/src/index.css +3202 -2852
  37. package/dist/ComboBox/src/index.d.ts +4 -3
  38. package/dist/ComboBox/src/index.js +21 -18
  39. package/dist/Disclosure/src/Disclosure.css +38 -38
  40. package/dist/Disclosure/src/Disclosure.js +3 -3
  41. package/dist/Disclosure/src/DisclosureHeader.css +45 -45
  42. package/dist/Disclosure/src/DisclosureHeader.js +8 -8
  43. package/dist/Disclosure/src/DisclosurePanel.css +38 -38
  44. package/dist/Disclosure/src/DisclosurePanel.js +8 -8
  45. package/dist/Disclosure/src/index.css +63 -63
  46. package/dist/Disclosure/src/index.js +12 -12
  47. package/dist/Divider/src/Divider.css +30 -30
  48. package/dist/Divider/src/Divider.js +1 -1
  49. package/dist/Divider/src/index.css +30 -30
  50. package/dist/Divider/src/index.js +1 -1
  51. package/dist/ErrorMessage/src/ErrorMessage.css +30 -30
  52. package/dist/ErrorMessage/src/ErrorMessage.js +3 -3
  53. package/dist/ErrorMessage/src/index.css +30 -30
  54. package/dist/ErrorMessage/src/index.js +3 -3
  55. package/dist/Form/src/Form.css +28 -28
  56. package/dist/Form/src/Form.js +1 -1
  57. package/dist/Form/src/index.css +28 -28
  58. package/dist/Form/src/index.js +1 -1
  59. package/dist/HelperMessage/src/HelperMessage.css +30 -30
  60. package/dist/HelperMessage/src/HelperMessage.js +2 -2
  61. package/dist/HelperMessage/src/index.css +30 -30
  62. package/dist/HelperMessage/src/index.js +2 -2
  63. package/dist/IconList/src/IconList.css +29 -29
  64. package/dist/IconList/src/IconList.js +1 -1
  65. package/dist/IconList/src/index.css +29 -29
  66. package/dist/IconList/src/index.js +1 -1
  67. package/dist/IllustratedMessage/src/IllustratedMessage.css +270 -270
  68. package/dist/IllustratedMessage/src/IllustratedMessage.js +1 -1
  69. package/dist/IllustratedMessage/src/index.css +270 -270
  70. package/dist/IllustratedMessage/src/index.js +1 -1
  71. package/dist/Image/src/Image.css +31 -31
  72. package/dist/Image/src/Image.js +1 -1
  73. package/dist/Image/src/SvgImage.css +29 -29
  74. package/dist/Image/src/SvgImage.js +1 -1
  75. package/dist/Image/src/index.css +32 -32
  76. package/dist/Image/src/index.js +2 -2
  77. package/dist/Link/src/Link.css +59 -59
  78. package/dist/Link/src/Link.js +7 -7
  79. package/dist/Link/src/index.css +59 -59
  80. package/dist/Link/src/index.js +7 -7
  81. package/dist/ListBox/src/ListBox.css +275 -275
  82. package/dist/ListBox/src/ListBox.js +12 -12
  83. package/dist/ListBox/src/ListBoxItem.css +263 -263
  84. package/dist/ListBox/src/ListBoxItem.js +11 -11
  85. package/dist/ListBox/src/ListBoxItemSkeleton.css +35 -35
  86. package/dist/ListBox/src/ListBoxItemSkeleton.js +1 -1
  87. package/dist/ListBox/src/index.css +275 -275
  88. package/dist/ListBox/src/index.js +12 -12
  89. package/dist/SegmentedControl/src/SegmentedControl.css +29 -29
  90. package/dist/SegmentedControl/src/SegmentedControl.js +1 -1
  91. package/dist/SegmentedControl/src/SegmentedControlItem.css +43 -43
  92. package/dist/SegmentedControl/src/SegmentedControlItem.js +6 -6
  93. package/dist/SegmentedControl/src/index.css +44 -44
  94. package/dist/SegmentedControl/src/index.js +7 -7
  95. package/dist/Select/src/Select.css +576 -576
  96. package/dist/Select/src/Select.js +18 -18
  97. package/dist/Select/src/SelectValue.css +62 -62
  98. package/dist/Select/src/SelectValue.js +7 -7
  99. package/dist/Select/src/index.css +576 -576
  100. package/dist/Select/src/index.js +18 -18
  101. package/dist/Spinner/src/Spinner.css +38 -38
  102. package/dist/Spinner/src/Spinner.js +2 -2
  103. package/dist/Spinner/src/index.css +38 -38
  104. package/dist/Spinner/src/index.js +2 -2
  105. package/dist/Tile/src/Tile.css +326 -0
  106. package/dist/Tile/src/Tile.d.ts +20 -0
  107. package/dist/Tile/src/Tile.js +19 -0
  108. package/dist/Tile/src/TileContext.d.ts +9 -0
  109. package/dist/Tile/src/TileContext.js +2 -0
  110. package/dist/Tile/src/TileGroup.css +241 -0
  111. package/dist/Tile/src/TileGroup.d.ts +30 -0
  112. package/dist/Tile/src/TileGroup.js +6 -0
  113. package/dist/Tile/src/TileGroupContext.d.ts +8 -0
  114. package/dist/Tile/src/TileGroupContext.js +2 -0
  115. package/dist/Tile/src/index.css +334 -0
  116. package/dist/Tile/src/index.d.ts +7 -0
  117. package/dist/Tile/src/index.js +21 -0
  118. package/dist/ToggleArrow/src/ToggleArrow.css +30 -30
  119. package/dist/ToggleArrow/src/ToggleArrow.js +1 -1
  120. package/dist/ToggleArrow/src/index.css +30 -30
  121. package/dist/ToggleArrow/src/index.js +1 -1
  122. package/dist/buttons/src/Button.css +94 -94
  123. package/dist/buttons/src/Button.js +8 -8
  124. package/dist/buttons/src/ButtonGroup.css +39 -39
  125. package/dist/buttons/src/ButtonGroup.js +1 -1
  126. package/dist/buttons/src/ClearButton.css +99 -99
  127. package/dist/buttons/src/ClearButton.d.ts +12 -5
  128. package/dist/buttons/src/ClearButton.js +3 -3
  129. package/dist/buttons/src/ClearButtonContext.d.ts +2 -4
  130. package/dist/buttons/src/CloseButton.css +95 -95
  131. package/dist/buttons/src/CloseButton.js +10 -10
  132. package/dist/buttons/src/EmbeddedButton.css +99 -99
  133. package/dist/buttons/src/EmbeddedButton.d.ts +27 -7
  134. package/dist/buttons/src/EmbeddedButton.js +1 -1
  135. package/dist/buttons/src/EmbeddedButtonContext.d.ts +1 -4
  136. package/dist/buttons/src/LinkButton.css +103 -103
  137. package/dist/buttons/src/LinkButton.js +8 -8
  138. package/dist/buttons/src/index.css +251 -251
  139. package/dist/buttons/src/index.d.ts +2 -1
  140. package/dist/buttons/src/index.js +17 -17
  141. package/dist/checkbox/src/Checkbox.css +47 -47
  142. package/dist/checkbox/src/Checkbox.js +7 -7
  143. package/dist/checkbox/src/CheckboxField.css +34 -34
  144. package/dist/checkbox/src/CheckboxField.js +4 -4
  145. package/dist/checkbox/src/CheckboxGroup.css +99 -99
  146. package/dist/checkbox/src/CheckboxGroup.js +8 -8
  147. package/dist/checkbox/src/DecorativeCheckbox.css +55 -55
  148. package/dist/checkbox/src/DecorativeCheckbox.js +8 -8
  149. package/dist/checkbox/src/index.css +99 -99
  150. package/dist/checkbox/src/index.js +14 -14
  151. package/dist/{chunk-NH3IVMXB.js → chunk-2NSUMKNH.js} +1 -1
  152. package/dist/chunk-3MTGAZ77.js +7 -0
  153. package/dist/{chunk-7UNZPFF5.js → chunk-53WBWLKL.js} +12 -11
  154. package/dist/{chunk-ZVNGQXRR.js → chunk-56WMYNUD.js} +3 -3
  155. package/dist/{chunk-HXNEWO5D.js → chunk-5TGWIM5C.js} +15 -13
  156. package/dist/{chunk-2DF25AEQ.js → chunk-6CVROWNN.js} +2 -2
  157. package/dist/{chunk-RYJBYNZT.js → chunk-725VVVMA.js} +1 -1
  158. package/dist/{chunk-MHQ3VHAA.js → chunk-72CSHV4D.js} +6 -6
  159. package/dist/chunk-7HIGRTLG.js +34 -0
  160. package/dist/{chunk-TZEOP7YF.js → chunk-7JQJ5U7J.js} +1 -1
  161. package/dist/{chunk-BHIQ5PPC.js → chunk-7SMF3TO5.js} +2 -2
  162. package/dist/{chunk-OCG7CSY5.js → chunk-AD5GQ24L.js} +1 -1
  163. package/dist/{chunk-JAR25BBL.js → chunk-B7MWXJWS.js} +1 -1
  164. package/dist/{chunk-J6RDT7TX.js → chunk-BPO44JV2.js} +4 -4
  165. package/dist/{chunk-7SCKD7PW.js → chunk-CKH5EUEC.js} +3 -3
  166. package/dist/{chunk-WX5UNPM3.js → chunk-CYICQ2TZ.js} +1 -1
  167. package/dist/{chunk-I73SWVA3.js → chunk-CZRMFNRT.js} +3 -3
  168. package/dist/{chunk-NJUYQ7VF.js → chunk-EZF74GSX.js} +2 -2
  169. package/dist/chunk-EZXZMHPJ.js +77 -0
  170. package/dist/chunk-F6D7LSXZ.js +73 -0
  171. package/dist/{chunk-Z3WDZ52E.js → chunk-F6NQHY35.js} +1 -1
  172. package/dist/{chunk-6LIFUQT4.js → chunk-GOY3T3HI.js} +3 -3
  173. package/dist/{chunk-7DLSOYOU.js → chunk-GZYLFGDT.js} +4 -4
  174. package/dist/{chunk-PHQ6YPQQ.js → chunk-I2LTZFXN.js} +2 -2
  175. package/dist/{chunk-IIAAY3DD.js → chunk-IMUQCB4Q.js} +2 -2
  176. package/dist/{chunk-HJXC5SRI.js → chunk-IYT75GWO.js} +2 -2
  177. package/dist/chunk-JTNKUYE5.js +8 -0
  178. package/dist/{chunk-JUVZRX26.js → chunk-JZ4LJ4M4.js} +4 -4
  179. package/dist/{chunk-LMATFHSS.js → chunk-KFH2WZVX.js} +5 -5
  180. package/dist/{chunk-MF2LIHC6.js → chunk-KIQW5BE4.js} +3 -3
  181. package/dist/{chunk-XLPW4NX3.js → chunk-KVJHBVJU.js} +51 -72
  182. package/dist/{chunk-MPCOEMN2.js → chunk-KW6WJUD5.js} +3 -3
  183. package/dist/{chunk-WICGT2T5.js → chunk-M35EMGMO.js} +1 -1
  184. package/dist/{chunk-2XVB536Z.js → chunk-ML4JW4EF.js} +17 -25
  185. package/dist/chunk-MM2SG6JU.js +75 -0
  186. package/dist/{chunk-SV6RSWOR.js → chunk-N455JVEG.js} +1 -1
  187. package/dist/{chunk-MO4EWTIM.js → chunk-NHKYEZTW.js} +2 -2
  188. package/dist/{chunk-IYRRO5H3.js → chunk-NIOF2SKT.js} +2 -2
  189. package/dist/{chunk-GNPTWYD3.js → chunk-NXT7EAML.js} +3 -3
  190. package/dist/{chunk-4B5NJLD3.js → chunk-OSGTA6DG.js} +1 -1
  191. package/dist/{chunk-ERIQNISN.js → chunk-PAVQC74G.js} +1 -1
  192. package/dist/{chunk-2GGER6XM.js → chunk-PXOVV47X.js} +1 -1
  193. package/dist/{chunk-5JYQWCE5.js → chunk-Q5XBTXXT.js} +7 -7
  194. package/dist/{chunk-DW44WR6W.js → chunk-QOFWY452.js} +3 -3
  195. package/dist/{chunk-HMG6U7FQ.js → chunk-QR6WDDBN.js} +2 -2
  196. package/dist/{chunk-KXAYZ6PQ.js → chunk-QVXYZX5B.js} +1 -1
  197. package/dist/{chunk-OQFPMKF2.js → chunk-RZG5PUET.js} +11 -11
  198. package/dist/{chunk-DOYWH7O2.js → chunk-S4VWM2B6.js} +29 -17
  199. package/dist/{chunk-4BXMSXYQ.js → chunk-SRMMLWHK.js} +1 -1
  200. package/dist/{chunk-ZWDUMUN4.js → chunk-SSV5APP2.js} +2 -2
  201. package/dist/{chunk-K3IUMMRF.js → chunk-TMVLBCMF.js} +3 -3
  202. package/dist/{chunk-P5EIKUXO.js → chunk-U2E2PK7O.js} +3 -3
  203. package/dist/{chunk-JNJYQ26N.js → chunk-UC2WGSJH.js} +13 -13
  204. package/dist/{chunk-MIZJXB3R.js → chunk-UIG77WBM.js} +6 -6
  205. package/dist/{chunk-N3XC5CZP.js → chunk-UXCNMI34.js} +3 -3
  206. package/dist/{chunk-BXPKRAAY.js → chunk-UXGG4SUH.js} +1 -1
  207. package/dist/{chunk-WLIPEWRM.js → chunk-VFZ2K6U6.js} +2 -2
  208. package/dist/{chunk-JZ6DMATL.js → chunk-VHVRECJY.js} +5 -5
  209. package/dist/{chunk-7EUXODLY.js → chunk-VOXZA4YS.js} +1 -1
  210. package/dist/{chunk-OIELLCFE.js → chunk-W2TEMTXK.js} +1 -1
  211. package/dist/{chunk-UICYQNAO.js → chunk-WNFSIU36.js} +3 -3
  212. package/dist/{chunk-K7JDZAO3.js → chunk-XV2C6MXF.js} +8 -8
  213. package/dist/{chunk-55OPYST3.js → chunk-YHRCBRDZ.js} +1 -1
  214. package/dist/{chunk-W5HTSWT3.js → chunk-YMQMJAC4.js} +4 -4
  215. package/dist/{chunk-Y7ATRH3L.js → chunk-YP2IQM4Y.js} +3 -3
  216. package/dist/{chunk-NFIZ44XF.js → chunk-Z2SUHJJH.js} +4 -4
  217. package/dist/{chunk-3JJL6GD6.js → chunk-Z7ORLEY6.js} +1 -1
  218. package/dist/{chunk-KBHWDMMF.js → chunk-ZJBNVQTB.js} +1 -3
  219. package/dist/{chunk-YQLCOKBQ.js → chunk-ZMNX5LVE.js} +2 -2
  220. package/dist/index.css +1845 -1948
  221. package/dist/index.d.ts +6 -4
  222. package/dist/index.js +83 -83
  223. package/dist/inputs/src/Input.css +302 -0
  224. package/dist/inputs/src/Input.d.ts +15 -0
  225. package/dist/inputs/src/Input.js +3 -0
  226. package/dist/inputs/src/InputGroup.css +47 -1483
  227. package/dist/inputs/src/InputGroup.d.ts +1 -18
  228. package/dist/inputs/src/InputGroup.js +1 -3
  229. package/dist/inputs/src/InputGroupContext.d.ts +0 -2
  230. package/dist/inputs/src/NumberField.css +130 -1526
  231. package/dist/inputs/src/NumberField.js +12 -13
  232. package/dist/inputs/src/PasswordField.css +346 -380
  233. package/dist/inputs/src/PasswordField.d.ts +4 -4
  234. package/dist/inputs/src/PasswordField.js +13 -12
  235. package/dist/inputs/src/PasswordFieldContext.d.ts +2 -2
  236. package/dist/inputs/src/RemainingCharacterCount.css +31 -31
  237. package/dist/inputs/src/RemainingCharacterCount.js +7 -7
  238. package/dist/inputs/src/SearchField.css +350 -386
  239. package/dist/inputs/src/SearchField.d.ts +2 -2
  240. package/dist/inputs/src/SearchField.js +15 -14
  241. package/dist/inputs/src/SearchFieldContext.d.ts +2 -2
  242. package/dist/inputs/src/TextArea.css +122 -1498
  243. package/dist/inputs/src/TextArea.js +11 -12
  244. package/dist/inputs/src/TextField.css +348 -384
  245. package/dist/inputs/src/TextField.js +17 -16
  246. package/dist/inputs/src/index.css +625 -628
  247. package/dist/inputs/src/index.d.ts +4 -3
  248. package/dist/inputs/src/index.js +22 -22
  249. package/dist/overlays/Popover/src/Popover.css +552 -552
  250. package/dist/overlays/Popover/src/Popover.js +6 -6
  251. package/dist/overlays/Popover/src/index.css +552 -552
  252. package/dist/overlays/Popover/src/index.js +6 -6
  253. package/dist/radio/src/DecorativeRadio.css +55 -55
  254. package/dist/radio/src/DecorativeRadio.js +8 -8
  255. package/dist/radio/src/Radio.css +47 -47
  256. package/dist/radio/src/Radio.js +7 -7
  257. package/dist/radio/src/RadioField.css +34 -34
  258. package/dist/radio/src/RadioField.js +3 -3
  259. package/dist/radio/src/RadioGroup.css +99 -99
  260. package/dist/radio/src/RadioGroup.js +7 -7
  261. package/dist/radio/src/index.css +99 -99
  262. package/dist/radio/src/index.js +13 -13
  263. package/dist/switch/src/Switch.css +44 -44
  264. package/dist/switch/src/Switch.js +7 -7
  265. package/dist/switch/src/SwitchField.css +34 -34
  266. package/dist/switch/src/SwitchField.js +4 -4
  267. package/dist/switch/src/index.css +50 -50
  268. package/dist/switch/src/index.js +10 -10
  269. package/dist/tag/src/Tag.css +392 -392
  270. package/dist/tag/src/Tag.d.ts +46 -5
  271. package/dist/tag/src/Tag.js +11 -11
  272. package/dist/tag/src/TagContext.d.ts +3 -1
  273. package/dist/tag/src/TagGroup.css +38 -38
  274. package/dist/tag/src/TagGroup.d.ts +3 -1
  275. package/dist/tag/src/TagGroup.js +8 -8
  276. package/dist/tag/src/TagGroupContext.d.ts +3 -1
  277. package/dist/tag/src/index.css +402 -402
  278. package/dist/tag/src/index.d.ts +3 -1
  279. package/dist/tag/src/index.js +17 -17
  280. package/dist/typography/Heading/src/Heading.css +28 -28
  281. package/dist/typography/Heading/src/Heading.js +1 -1
  282. package/dist/typography/Heading/src/index.css +28 -28
  283. package/dist/typography/Heading/src/index.js +1 -1
  284. package/dist/typography/Label/src/Label.css +28 -28
  285. package/dist/typography/Label/src/Label.js +2 -2
  286. package/dist/typography/Label/src/index.css +28 -28
  287. package/dist/typography/Label/src/index.js +2 -2
  288. package/dist/typography/OverlineText/src/OverlineText.css +28 -28
  289. package/dist/typography/OverlineText/src/OverlineText.js +1 -1
  290. package/dist/typography/OverlineText/src/index.css +28 -28
  291. package/dist/typography/OverlineText/src/index.js +1 -1
  292. package/dist/typography/Text/src/Text.css +28 -28
  293. package/dist/typography/Text/src/Text.js +1 -1
  294. package/dist/typography/Text/src/index.css +28 -28
  295. package/dist/typography/Text/src/index.js +1 -1
  296. package/dist/utils/src/EnsureTextWrapper.css +28 -28
  297. package/dist/utils/src/EnsureTextWrapper.js +6 -6
  298. package/dist/utils/src/index.css +28 -28
  299. package/dist/utils/src/index.d.ts +0 -1
  300. package/dist/utils/src/index.js +8 -9
  301. package/dist/utils/src/types.d.ts +1 -1
  302. package/dist/utils/src/useRenderProps.js +1 -1
  303. package/package.json +1 -1
  304. package/dist/ClearButton-wcnm_ugx.d.ts +0 -80
  305. package/dist/chunk-2JXEPUMG.js +0 -102
  306. package/dist/chunk-MTDFS4CZ.js +0 -12
  307. package/dist/utils/src/useScale.d.ts +0 -11
  308. package/dist/utils/src/useScale.js +0 -2
@@ -1,5 +1,5 @@
1
1
  /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/Heading/src/Heading.module.css/#css-module-data */
2
- .Heading-module__hop-Heading___MV97T {
2
+ .Heading-module__hop-Heading___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___MV97T) {
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___skrqP) {
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___3HGuM) {
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___4p-Ip) {
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___91wTX) {
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___1a9tn) {
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___HRwDE) {
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___Ni3KL) {
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___M2a7F {
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___M2a7F) {
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___wFmT7) {
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___mVKDe) {
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___r-Who) {
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___xmcjP) {
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___HB5dh) {
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___vay0i) {
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___VAeUU) {
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___wsazM) {
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,1532 +188,96 @@
188
188
  text-transform: uppercase;
189
189
  letter-spacing: var(--letter-spacing);
190
190
  }
191
- .OverlineText-module__hop-OverlineText__text___sBkU7 {
191
+ .OverlineText-module__hop-OverlineText__text___ExOHp {
192
192
  box-sizing: border-box;
193
193
  }
194
- .OverlineText-module__hop-OverlineText__text___sBkU7::before,
195
- .OverlineText-module__hop-OverlineText__text___sBkU7::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___sBkU7::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___sBkU7::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___GS84I {
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___GS84I) {
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___GAUqr) {
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___jhdfJ {
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___9zmbW {
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___EOl7q {
246
- 0% {
247
- transform: rotate(0deg);
248
- }
249
- 100% {
250
- transform: rotate(360deg);
251
- }
252
- }
253
- .Spinner-module__hop-Spinner___-bvVm {
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___EOl7q .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___kALZ7 {
273
- --width: var(--hop-Spinner-sm-wheel-size);
274
- --height: var(--hop-Spinner-sm-wheel-size);
275
- }
276
- .Spinner-module__hop-Spinner--md___toRLX {
277
- --width: var(--hop-Spinner-md-wheel-size);
278
- --height: var(--hop-Spinner-md-wheel-size);
279
- }
280
- .Spinner-module__hop-Spinner--lg___vHSM8 {
281
- --width: var(--hop-Spinner-lg-wheel-size);
282
- --height: var(--hop-Spinner-lg-wheel-size);
283
- }
284
- .Spinner-module__hop-Spinner__track___Boq34 {
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___GD1Cj {
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___GD1Cj {
305
- animation-duration: var(--hop-Spinner-fill-animation-reduced-motion-duration);
306
- }
307
- }
308
- .Spinner-module__hop-Spinner__label___KPTGD {
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___XnpzX {
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___ZZXwq {
439
- --inline-size: 100%;
440
- }
441
- .Button-module__hop-Button--sm___6jOD3 {
442
- --block-size: var(--hop-Button-sm-height);
443
- --padding: var(--hop-Button-sm-padding);
444
- }
445
- .Button-module__hop-Button--sm___6jOD3[class*=--ghost] {
446
- --padding: var(--hop-Button-ghost-sm-padding);
447
- }
448
- .Button-module__hop-Button--md___3yl4O[class*=--ghost] {
449
- --padding: var(--hop-Button-ghost-md-padding);
450
- }
451
- .Button-module__hop-Button--icon-only___-VLNH {
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___5doCv {
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___5doCv[data-hovered],
463
- .Button-module__hop-Button--primary___5doCv[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___5doCv[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___p2tPu {
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___p2tPu[data-hovered],
480
- .Button-module__hop-Button--secondary___p2tPu[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___p2tPu[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___pbl2O {
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___pbl2O[data-hovered],
497
- .Button-module__hop-Button--upsell___pbl2O[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___pbl2O[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___D4nJ- {
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___D4nJ-[data-hovered],
514
- .Button-module__hop-Button--danger___D4nJ-[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___D4nJ-[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___WPu49 {
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___WPu49[data-hovered],
531
- .Button-module__hop-Button--ghost-primary___WPu49[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___WPu49[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___M0eZA {
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___M0eZA[data-hovered],
550
- .Button-module__hop-Button--ghost-secondary___M0eZA[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___M0eZA[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___-Mvaw {
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___-Mvaw[data-hovered],
569
- .Button-module__hop-Button--ghost-danger___-Mvaw[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___-Mvaw[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___XnpzX[data-focus-visible] {
582
- outline: var(--hop-Button-outline-size) solid var(--hop-Button-focus-ring-color);
583
- }
584
- .Button-module__hop-Button___XnpzX[data-disabled],
585
- .Button-module__hop-Button___XnpzX[data-pending] {
586
- cursor: not-allowed;
587
- }
588
- .Button-module__hop-Button___XnpzX[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___XnpzX[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___5doCv[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___p2tPu[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___pbl2O[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___D4nJ-[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___WPu49[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___M0eZA[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___-Mvaw[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___Bhn4b {
637
- position: absolute;
638
- color: var(--spinner-color);
639
- }
640
- .Button-module__hop-Button__icon___ShNZp,
641
- .Button-module__hop-Button__icon-list___dbXFP {
642
- flex: 0 0 auto;
643
- justify-self: end;
644
- order: 1;
645
- }
646
- .Button-module__hop-Button__text___iwCeX {
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___4hJm7,
657
- .Button-module__hop-Button__end-icon-list___SXzot {
658
- flex: 0 0 auto;
659
- order: 3;
660
- }
661
- .Button-module__hop-Button___XnpzX .Button-module__hop-Button__icon-list___dbXFP,
662
- .Button-module__hop-Button___XnpzX .Button-module__hop-Button__end-icon-list___SXzot {
663
- flex-wrap: nowrap;
664
- }
665
- .Button-module__hop-Button___XnpzX[data-pending] > *:not(.Button-module__hop-Button__Spinner___Bhn4b) {
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___W5IvL {
671
- display: inline-flex;
672
- flex-wrap: nowrap;
673
- gap: var(--hop-space-inline-md);
674
- }
675
- .ButtonGroup-module__hop-ButtonGroup--horizontal___a77h0 {
676
- align-items: center;
677
- }
678
- .ButtonGroup-module__hop-ButtonGroup--vertical___bfr82 {
679
- flex-direction: column;
680
- gap: var(--hop-space-stack-md);
681
- justify-content: center;
682
- }
683
- .ButtonGroup-module__hop-ButtonGroup--start___idg--.ButtonGroup-module__hop-ButtonGroup--vertical___bfr82 {
684
- align-items: flex-start;
685
- }
686
- .ButtonGroup-module__hop-ButtonGroup--center___Eb4Kc.ButtonGroup-module__hop-ButtonGroup--vertical___bfr82 {
687
- align-items: center;
688
- }
689
- .ButtonGroup-module__hop-ButtonGroup--end___O6dNO.ButtonGroup-module__hop-ButtonGroup--vertical___bfr82 {
690
- align-items: flex-end;
691
- }
692
- .ButtonGroup-module__hop-ButtonGroup--start___idg--.ButtonGroup-module__hop-ButtonGroup--horizontal___a77h0 {
693
- justify-content: flex-start;
694
- }
695
- .ButtonGroup-module__hop-ButtonGroup--center___Eb4Kc.ButtonGroup-module__hop-ButtonGroup--horizontal___a77h0 {
696
- justify-content: center;
697
- }
698
- .ButtonGroup-module__hop-ButtonGroup--end___O6dNO.ButtonGroup-module__hop-ButtonGroup--horizontal___a77h0 {
699
- justify-content: flex-end;
700
- }
701
- .ButtonGroup-module__hop-ButtonGroup--wrap___gXtS1 {
702
- flex-wrap: wrap;
703
- }
704
- .ButtonGroup-module__hop-ButtonGroup--fluid___N2aYl {
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___tHTN9 {
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___tHTN9::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___tHTN9[data-square] {
887
- --effect-border-radius: var(--hop-EmbeddedButton-effect-square-border-radius);
888
- }
889
- .EmbeddedButton-module__hop-EmbeddedButton--md___GGTp9 {
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___y8j8G {
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___GGTp9::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___y8j8G::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___zK4NR {
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___euARn {
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___Fe8-g {
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___WxJr- {
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___IQR3x {
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___HdKSY {
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___dJCvA {
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___2Ek0f {
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___0DPJ- {
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___RmwOz {
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___uxtHf {
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___9JkLZ {
952
- --color: var(--hop-EmbeddedButton-option6-color);
953
- --effect-background-color: var(--hop-EmbeddedButton-option6-effect-background-color);
954
- }
955
- .EmbeddedButton-module__hop-EmbeddedButton___tHTN9[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___tHTN9[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___tHTN9[data-disabled] {
964
- cursor: not-allowed;
965
- }
966
- .EmbeddedButton-module__hop-EmbeddedButton--neutral___zK4NR[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___zK4NR[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___zK4NR[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___zK4NR[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___euARn[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___euARn[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___euARn[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___euARn[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___Fe8-g[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___Fe8-g[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___Fe8-g[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___Fe8-g[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___WxJr-[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___WxJr-[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___WxJr-[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___WxJr-[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___IQR3x[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___IQR3x[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___IQR3x[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___IQR3x[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___HdKSY[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___HdKSY[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___HdKSY[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___HdKSY[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___dJCvA[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___dJCvA[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___dJCvA[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___dJCvA[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___2Ek0f[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___2Ek0f[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___2Ek0f[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___2Ek0f[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___0DPJ-[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___0DPJ-[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___0DPJ-[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___0DPJ-[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___RmwOz[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___RmwOz[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___RmwOz[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___RmwOz[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___uxtHf[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___uxtHf[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___uxtHf[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___uxtHf[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___9JkLZ[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___9JkLZ[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___9JkLZ[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___9JkLZ[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___QJXMa {
1159
- position: relative;
1160
- }
1161
-
1162
- /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/buttons/src/CloseButton.module.css/#css-module-data */
1163
- button.CloseButton-module__hop-CloseButton___hk3-W {
1164
- --hop-CloseButton-margin-top: 0rem;
1165
- --hop-CloseButton-padding: 0rem;
1166
- --hop-CloseButton-witdh: "fit-content";
1167
- --hop-CloseButton-height: "fit-content";
1168
- inline-size: var(--hop-CloseButton-width);
1169
- block-size: var(--hop-CloseButton-height);
1170
- margin-block-start: var(--hop-CloseButton-margin-top);
1171
- padding: var(--hop-CloseButton-padding);
1172
- }
1173
-
1174
- /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/buttons/src/LinkButton.module.css/#css-module-data */
1175
- .Button-module__hop-Button___XnpzX {
1176
- --hop-Button-border-radius: var(--hop-shape-rounded-md);
1177
- --hop-Button-focus-ring-color: var(--hop-primary-border-focus);
1178
- --hop-Button-column-gap: var(--hop-space-inline-xs);
1179
- --hop-Button-icon-only-column-gap: 0;
1180
- --hop-Button-outline-size: var(--hop-space-20);
1181
- --hop-Button-border-size: var(--hop-space-10);
1182
- --hop-Button-text-underline-offset: var(--hop-space-20);
1183
- --hop-Button-icon-only-padding: 0;
1184
- --hop-Button-sm-height: 2rem;
1185
- --hop-Button-md-height: 2.5rem;
1186
- --hop-Button-sm-padding: 0 var(--hop-space-inset-md);
1187
- --hop-Button-md-padding: 0 var(--hop-space-inset-md);
1188
- --hop-Button-ghost-sm-padding: 0 var(--hop-space-inset-xs);
1189
- --hop-Button-ghost-md-padding: 0 var(--hop-space-inset-sm);
1190
- --hop-Button-color-disabled: var(--hop-neutral-text-disabled);
1191
- --hop-Button-background-color-disabled: var(--hop-neutral-surface-disabled);
1192
- --hop-Button-border-disabled: var(--hop-Button-border-size) solid var(--hop-Button-background-color-disabled);
1193
- --hop-Button-ghost-color-disabled: var(--hop-neutral-text-disabled);
1194
- --hop-Button-ghost-background-color-disabled: transparent;
1195
- --hop-Button-ghost-border-disabled: var(--hop-Button-border-size) solid var(--hop-Button-ghost-background-color-disabled);
1196
- --hop-Button-primary-color: var(--hop-primary-text-strong);
1197
- --hop-Button-primary-color-hover: var(--hop-primary-text-strong-hover);
1198
- --hop-Button-primary-color-pressed: var(--hop-primary-text-strong);
1199
- --hop-Button-primary-background-color: var(--hop-primary-surface-strong);
1200
- --hop-Button-primary-background-color-hover: var(--hop-primary-surface-strong-hover);
1201
- --hop-Button-primary-background-color-pressed: var(--hop-primary-surface-strong-press);
1202
- --hop-Button-primary-border: var(--hop-Button-border-size) solid var(--hop-Button-primary-background-color);
1203
- --hop-Button-primary-border-hover: var(--hop-Button-border-size) solid var(--hop-Button-primary-background-color-hover);
1204
- --hop-Button-primary-border-pressed: var(--hop-Button-border-size) solid var(--hop-Button-primary-background-color-pressed);
1205
- --hop-Button-primary-spinner-color: var(--hop-primary-icon-strong);
1206
- --hop-Button-secondary-color: var(--hop-neutral-text);
1207
- --hop-Button-secondary-color-hover: var(--hop-neutral-text-hover);
1208
- --hop-Button-secondary-color-pressed: var(--hop-neutral-text-press);
1209
- --hop-Button-secondary-background-color: var(--hop-neutral-surface);
1210
- --hop-Button-secondary-background-color-hover: var(--hop-neutral-surface-hover);
1211
- --hop-Button-secondary-background-color-pressed: var(--hop-neutral-surface-press);
1212
- --hop-Button-secondary-border: var(--hop-Button-border-size) solid var(--hop-neutral-border-strong);
1213
- --hop-Button-secondary-border-hover: var(--hop-Button-border-size) solid var(--hop-neutral-border-strong-hover);
1214
- --hop-Button-secondary-border-pressed: var(--hop-Button-border-size) solid var(--hop-neutral-border-strong);
1215
- --hop-Button-secondary-spinner-color: var(--hop-neutral-icon);
1216
- --hop-Button-upsell-color: var(--hop-upsell-text);
1217
- --hop-Button-upsell-color-hover: var(--hop-upsell-text-hover);
1218
- --hop-Button-upsell-color-pressed: var(--hop-upsell-text-press);
1219
- --hop-Button-upsell-background-color: var(--hop-upsell-surface);
1220
- --hop-Button-upsell-background-color-hover: var(--hop-upsell-surface-hover);
1221
- --hop-Button-upsell-background-color-pressed: var(--hop-upsell-surface-press);
1222
- --hop-Button-upsell-border: var(--hop-Button-border-size) solid var(--hop-Button-upsell-background-color);
1223
- --hop-Button-upsell-border-hover: var(--hop-Button-border-size) solid var(--hop-Button-upsell-background-color-hover);
1224
- --hop-Button-upsell-border-pressed: var(--hop-Button-border-size) solid var(--hop-Button-upsell-background-color-pressed);
1225
- --hop-Button-upsell-spinner-color: var(--hop-upsell-icon);
1226
- --hop-Button-danger-color: var(--hop-danger-text-strong);
1227
- --hop-Button-danger-color-hover: var(--hop-danger-text-strong-hover);
1228
- --hop-Button-danger-color-pressed: var(--hop-danger-text-strong-hover);
1229
- --hop-Button-danger-background-color: var(--hop-danger-surface-strong);
1230
- --hop-Button-danger-background-color-hover: var(--hop-danger-surface-strong-hover);
1231
- --hop-Button-danger-background-color-pressed: var(--hop-danger-surface-press);
1232
- --hop-Button-danger-border: var(--hop-Button-border-size) solid var(--hop-Button-danger-background-color);
1233
- --hop-Button-danger-border-hover: var(--hop-Button-border-size) solid var(--hop-Button-danger-background-color-hover);
1234
- --hop-Button-danger-border-pressed: var(--hop-Button-border-size) solid var(--hop-Button-danger-background-color-pressed);
1235
- --hop-Button-danger-spinner-color: var(--hop-primary-icon-strong);
1236
- --hop-Button-ghost-primary-color: var(--hop-primary-text);
1237
- --hop-Button-ghost-primary-color-hover: var(--hop-primary-text-hover);
1238
- --hop-Button-ghost-primary-color-pressed: var(--hop-primary-text-press);
1239
- --hop-Button-ghost-primary-background-color: transparent;
1240
- --hop-Button-ghost-primary-background-color-hover: var(--hop-neutral-surface-hover);
1241
- --hop-Button-ghost-primary-background-color-pressed: var(--hop-primary-surface-weak-press);
1242
- --hop-Button-ghost-primary-border: var(--hop-Button-border-size) solid var(--hop-Button-ghost-primary-background-color);
1243
- --hop-Button-ghost-primary-border-hover: var(--hop-Button-border-size) solid var(--hop-Button-ghost-primary-background-color-hover);
1244
- --hop-Button-ghost-primary-border-pressed: var(--hop-Button-border-size) solid var(--hop-Button-ghost-primary-background-color-pressed);
1245
- --hop-Button-ghost-primary-spinner-color: var(--hop-neutral-icon);
1246
- --hop-Button-ghost-secondary-color: var(--hop-neutral-text-weak);
1247
- --hop-Button-ghost-secondary-color-hover: var(--hop-neutral-text-weak-hover);
1248
- --hop-Button-ghost-secondary-color-pressed: var(--hop-neutral-text-weak-press);
1249
- --hop-Button-ghost-secondary-background-color: transparent;
1250
- --hop-Button-ghost-secondary-background-color-hover: var(--hop-neutral-surface-hover);
1251
- --hop-Button-ghost-secondary-background-color-pressed: var(--hop-neutral-surface-press);
1252
- --hop-Button-ghost-secondary-border: var(--hop-Button-border-size) solid var(--hop-Button-ghost-secondary-background-color);
1253
- --hop-Button-ghost-secondary-border-hover: var(--hop-Button-border-size) solid var(--hop-Button-ghost-secondary-background-color-hover);
1254
- --hop-Button-ghost-secondary-border-pressed: var(--hop-Button-border-size) solid var(--hop-Button-ghost-secondary-background-color-pressed);
1255
- --hop-Button-ghost-secondary-spinner-color: var(--hop-neutral-icon);
1256
- --hop-Button-ghost-danger-color: var(--hop-danger-text-weak);
1257
- --hop-Button-ghost-danger-color-hover: var(--hop-danger-text-hover);
1258
- --hop-Button-ghost-danger-color-pressed: var(--hop-danger-text-press);
1259
- --hop-Button-ghost-danger-background-color: transparent;
1260
- --hop-Button-ghost-danger-background-color-hover: var(--hop-neutral-surface-hover);
1261
- --hop-Button-ghost-danger-background-color-pressed: var(--hop-danger-surface-weak-press);
1262
- --hop-Button-ghost-danger-border: var(--hop-Button-border-size) solid var(--hop-Button-ghost-danger-background-color);
1263
- --hop-Button-ghost-danger-border-hover: var(--hop-Button-border-size) solid var(--hop-Button-ghost-danger-background-color-hover);
1264
- --hop-Button-ghost-danger-border-pressed: var(--hop-Button-border-size) solid var(--hop-Button-ghost-danger-background-color-pressed);
1265
- --hop-Button-ghost-danger-spinner-color: var(--hop-neutral-icon);
1266
- --inline-size: max-content;
1267
- --block-size: var(--hop-Button-md-height);
1268
- --background-color: var(--hop-primary-surface-strong);
1269
- --color: var(--hop-primary-text-strong);
1270
- --column-gap: var(--hop-Button-column-gap);
1271
- --spinner: var(--hop-primary-icon-strong);
1272
- --border: 0;
1273
- --padding: var(--hop-Button-md-padding);
1274
- --text-underline: none;
1275
- cursor: pointer;
1276
- position: relative;
1277
- overflow: hidden;
1278
- display: flex;
1279
- column-gap: var(--column-gap);
1280
- align-items: center;
1281
- justify-content: center;
1282
- box-sizing: border-box;
1283
- inline-size: var(--inline-size);
1284
- block-size: var(--block-size);
1285
- padding: var(--padding);
1286
- color: var(--color);
1287
- text-decoration: none;
1288
- white-space: nowrap;
1289
- background-color: var(--background-color);
1290
- border: var(--border);
1291
- border-radius: var(--hop-Button-border-radius);
1292
- outline: none;
1293
- outline-offset: var(--hop-Button-outline-size);
1294
- transition:
1295
- color var(--hop-easing-duration-2) var(--hop-easing-productive),
1296
- background-color var(--hop-easing-duration-2) var(--hop-easing-productive),
1297
- border var(--hop-easing-duration-2) var(--hop-easing-productive);
1298
- }
1299
- .Button-module__hop-Button--fluid___ZZXwq {
1300
- --inline-size: 100%;
1301
- }
1302
- .Button-module__hop-Button--sm___6jOD3 {
1303
- --block-size: var(--hop-Button-sm-height);
1304
- --padding: var(--hop-Button-sm-padding);
1305
- }
1306
- .Button-module__hop-Button--sm___6jOD3[class*=--ghost] {
1307
- --padding: var(--hop-Button-ghost-sm-padding);
1308
- }
1309
- .Button-module__hop-Button--md___3yl4O[class*=--ghost] {
1310
- --padding: var(--hop-Button-ghost-md-padding);
1311
- }
1312
- .Button-module__hop-Button--icon-only___-VLNH {
1313
- --column-gap: var(--hop-Button-icon-only-column-gap);
1314
- --padding: var(--hop-Button-icon-only-padding);
1315
- aspect-ratio: 1;
1316
- }
1317
- .Button-module__hop-Button--primary___5doCv {
1318
- --background-color: var(--hop-Button-primary-background-color);
1319
- --color: var(--hop-Button-primary-color);
1320
- --border: var(--hop-Button-primary-border);
1321
- --spinner-color: var(--hop-Button-primary-spinner-color);
1322
- }
1323
- .Button-module__hop-Button--primary___5doCv[data-hovered],
1324
- .Button-module__hop-Button--primary___5doCv[data-focus-visible] {
1325
- --background-color: var(--hop-Button-primary-background-color-hover);
1326
- --color: var(--hop-Button-primary-color-hover);
1327
- --border: var(--hop-Button-primary-border-hover);
1328
- }
1329
- .Button-module__hop-Button--primary___5doCv[data-pressed] {
1330
- --background-color: var(--hop-Button-primary-background-color-pressed);
1331
- --color: var(--hop-Button-primary-color-pressed);
1332
- --border: var(--hop-Button-primary-border-pressed);
1333
- }
1334
- .Button-module__hop-Button--secondary___p2tPu {
1335
- --background-color: var(--hop-Button-secondary-background-color);
1336
- --color: var(--hop-Button-secondary-color);
1337
- --border: var(--hop-Button-secondary-border);
1338
- --spinner-color: var(--hop-Button-secondary-spinner-color);
1339
- }
1340
- .Button-module__hop-Button--secondary___p2tPu[data-hovered],
1341
- .Button-module__hop-Button--secondary___p2tPu[data-focus-visible] {
1342
- --background-color: var(--hop-Button-secondary-background-color-hover);
1343
- --color: var(--hop-Button-secondary-color-hover);
1344
- --border: var(--hop-Button-secondary-border-hover);
1345
- }
1346
- .Button-module__hop-Button--secondary___p2tPu[data-pressed] {
1347
- --background-color: var(--hop-Button-secondary-background-color-pressed);
1348
- --color: var(--hop-Button-secondary-color-pressed);
1349
- --border: var(--hop-Button-secondary-border-pressed);
1350
- }
1351
- .Button-module__hop-Button--upsell___pbl2O {
1352
- --background-color: var(--hop-Button-upsell-background-color);
1353
- --color: var(--hop-Button-upsell-color);
1354
- --border: var(--hop-Button-upsell-border);
1355
- --spinner-color: var(--hop-Button-upsell-spinner-color);
1356
- }
1357
- .Button-module__hop-Button--upsell___pbl2O[data-hovered],
1358
- .Button-module__hop-Button--upsell___pbl2O[data-focus-visible] {
1359
- --background-color: var(--hop-Button-upsell-background-color-hover);
1360
- --color: var(--hop-Button-upsell-color-hover);
1361
- --border: var(--hop-Button-upsell-border-hover);
1362
- }
1363
- .Button-module__hop-Button--upsell___pbl2O[data-pressed] {
1364
- --background-color: var(--hop-Button-upsell-background-color-pressed);
1365
- --color: var(--hop-Button-upsell-color-pressed);
1366
- --border: var(--hop-Button-upsell-border-pressed);
1367
- }
1368
- .Button-module__hop-Button--danger___D4nJ- {
1369
- --background-color: var(--hop-Button-danger-background-color);
1370
- --color: var(--hop-Button-danger-color);
1371
- --border: var(--hop-Button-danger-border);
1372
- --spinner-color: var(--hop-Button-danger-spinner-color);
1373
- }
1374
- .Button-module__hop-Button--danger___D4nJ-[data-hovered],
1375
- .Button-module__hop-Button--danger___D4nJ-[data-focus-visible] {
1376
- --background-color: var(--hop-Button-danger-background-color-hover);
1377
- --color: var(--hop-Button-danger-color-hover);
1378
- --border: var(--hop-Button-danger-border-hover);
1379
- }
1380
- .Button-module__hop-Button--danger___D4nJ-[data-pressed] {
1381
- --background-color: var(--hop-Button-danger-background-color-pressed);
1382
- --color: var(--hop-Button-danger-color-pressed);
1383
- --border: var(--hop-Button-danger-border-pressed);
1384
- }
1385
- .Button-module__hop-Button--ghost-primary___WPu49 {
1386
- --background-color: var(--hop-Button-ghost-primary-background-color);
1387
- --color: var(--hop-Button-ghost-primary-color);
1388
- --border: var(--hop-Button-ghost-primary-border);
1389
- --spinner-color: var(--hop-Button-ghost-primary-spinner-color);
1390
- }
1391
- .Button-module__hop-Button--ghost-primary___WPu49[data-hovered],
1392
- .Button-module__hop-Button--ghost-primary___WPu49[data-focus-visible] {
1393
- --background-color: var(--hop-Button-ghost-primary-background-color-hover);
1394
- --color: var(--hop-Button-ghost-primary-color-hover);
1395
- --border: var(--hop-Button-ghost-primary-border-hover);
1396
- --text-underline: underline;
1397
- }
1398
- .Button-module__hop-Button--ghost-primary___WPu49[data-pressed] {
1399
- --background-color: var(--hop-Button-ghost-primary-background-color-pressed);
1400
- --color: var(--hop-Button-ghost-primary-color-pressed);
1401
- --border: var(--hop-Button-ghost-primary-border-pressed);
1402
- --text-underline: underline;
1403
- }
1404
- .Button-module__hop-Button--ghost-secondary___M0eZA {
1405
- --background-color: var(--hop-Button-ghost-secondary-background-color);
1406
- --color: var(--hop-Button-ghost-secondary-color);
1407
- --border: var(--hop-Button-ghost-secondary-border);
1408
- --spinner-color: var(--hop-Button-ghost-secondary-spinner-color);
1409
- }
1410
- .Button-module__hop-Button--ghost-secondary___M0eZA[data-hovered],
1411
- .Button-module__hop-Button--ghost-secondary___M0eZA[data-focus-visible] {
1412
- --background-color: var(--hop-Button-ghost-secondary-background-color-hover);
1413
- --color: var(--hop-Button-ghost-secondary-color-hover);
1414
- --border: var(--hop-Button-ghost-secondary-border-hover);
1415
- --text-underline: underline;
1416
- }
1417
- .Button-module__hop-Button--ghost-secondary___M0eZA[data-pressed] {
1418
- --background-color: var(--hop-Button-ghost-secondary-background-color-pressed);
1419
- --color: var(--hop-Button-ghost-secondary-color-pressed);
1420
- --border: var(--hop-Button-ghost-secondary-border-pressed);
1421
- --text-underline: underline;
1422
- }
1423
- .Button-module__hop-Button--ghost-danger___-Mvaw {
1424
- --background-color: var(--hop-Button-ghost-danger-background-color);
1425
- --color: var(--hop-Button-ghost-danger-color);
1426
- --border: var(--hop-Button-ghost-danger-border);
1427
- --spinner-color: var(--hop-Button-ghost-danger-spinner-color);
1428
- }
1429
- .Button-module__hop-Button--ghost-danger___-Mvaw[data-hovered],
1430
- .Button-module__hop-Button--ghost-danger___-Mvaw[data-focus-visible] {
1431
- --background-color: var(--hop-Button-ghost-danger-background-color-hover);
1432
- --color: var(--hop-Button-ghost-danger-color-hover);
1433
- --border: var(--hop-Button-ghost-danger-border-hover);
1434
- --text-underline: underline;
1435
- }
1436
- .Button-module__hop-Button--ghost-danger___-Mvaw[data-pressed] {
1437
- --background-color: var(--hop-Button-ghost-danger-background-color-pressed);
1438
- --color: var(--hop-Button-ghost-danger-color-pressed);
1439
- --border: var(--hop-Button-ghost-danger-border-pressed);
1440
- --text-underline: underline;
1441
- }
1442
- .Button-module__hop-Button___XnpzX[data-focus-visible] {
1443
- outline: var(--hop-Button-outline-size) solid var(--hop-Button-focus-ring-color);
1444
- }
1445
- .Button-module__hop-Button___XnpzX[data-disabled],
1446
- .Button-module__hop-Button___XnpzX[data-pending] {
1447
- cursor: not-allowed;
1448
- }
1449
- .Button-module__hop-Button___XnpzX[data-disabled] {
1450
- --background-color: var(--hop-Button-background-color-disabled);
1451
- --color: var(--hop-Button-color-disabled);
1452
- --border: var(--hop-Button-border-disabled);
1453
- }
1454
- .Button-module__hop-Button___XnpzX[class*=--ghost][data-disabled] {
1455
- --background-color: var(--hop-Button-ghost-background-color-disabled);
1456
- --color: var(--hop-Button-ghost-color-disabled);
1457
- --border: var(--hop-Button-ghost-border-disabled);
1458
- }
1459
- .Button-module__hop-Button--primary___5doCv[data-pending] {
1460
- --background-color: var(--hop-Button-primary-background-color);
1461
- --color: var(--hop-Button-primary-color);
1462
- --border: var(--hop-Button-primary-border);
1463
- }
1464
- .Button-module__hop-Button--secondary___p2tPu[data-pending] {
1465
- --background-color: var(--hop-Button-secondary-background-color);
1466
- --color: var(--hop-Button-secondary-color);
1467
- --border: var(--hop-Button-secondary-border);
1468
- }
1469
- .Button-module__hop-Button--upsell___pbl2O[data-pending] {
1470
- --background-color: var(--hop-Button-upsell-background-color);
1471
- --color: var(--hop-Button-upsell-color);
1472
- --border: var(--hop-Button-upsell-border);
1473
- }
1474
- .Button-module__hop-Button--danger___D4nJ-[data-pending] {
1475
- --background-color: var(--hop-Button-danger-background-color);
1476
- --color: var(--hop-Button-danger-color);
1477
- --border: var(--hop-Button-danger-border);
1478
- }
1479
- .Button-module__hop-Button--ghost-primary___WPu49[data-pending] {
1480
- --background-color: var(--hop-Button-ghost-primary-background-color);
1481
- --color: var(--hop-Button-ghost-primary-color);
1482
- --border: var(--hop-Button-ghost-primary-border);
1483
- --text-underline: none;
1484
- }
1485
- .Button-module__hop-Button--ghost-secondary___M0eZA[data-pending] {
1486
- --background-color: var(--hop-Button-ghost-secondary-background-color);
1487
- --color: var(--hop-Button-ghost-secondary-color);
1488
- --border: var(--hop-Button-ghost-secondary-border);
1489
- --text-underline: none;
1490
- }
1491
- .Button-module__hop-Button--ghost-danger___-Mvaw[data-pending] {
1492
- --background-color: var(--hop-Button-ghost-danger-background-color);
1493
- --color: var(--hop-Button-ghost-danger-color);
1494
- --border: var(--hop-Button-ghost-danger-border);
1495
- --text-underline: none;
1496
- }
1497
- .Button-module__hop-Button__Spinner___Bhn4b {
1498
- position: absolute;
1499
- color: var(--spinner-color);
1500
- }
1501
- .Button-module__hop-Button__icon___ShNZp,
1502
- .Button-module__hop-Button__icon-list___dbXFP {
1503
- flex: 0 0 auto;
1504
- justify-self: end;
1505
- order: 1;
1506
- }
1507
- .Button-module__hop-Button__text___iwCeX {
1508
- user-select: none;
1509
- overflow: visible;
1510
- flex: 0 1 auto;
1511
- order: 2;
1512
- font-weight: var(--hop-font-weight-505);
1513
- text-decoration: var(--text-underline);
1514
- text-underline-offset: 0.125rem;
1515
- text-wrap: nowrap;
1516
- }
1517
- .Button-module__hop-Button__end-icon___4hJm7,
1518
- .Button-module__hop-Button__end-icon-list___SXzot {
1519
- flex: 0 0 auto;
1520
- order: 3;
1521
- }
1522
- .Button-module__hop-Button___XnpzX .Button-module__hop-Button__icon-list___dbXFP,
1523
- .Button-module__hop-Button___XnpzX .Button-module__hop-Button__end-icon-list___SXzot {
1524
- flex-wrap: nowrap;
1525
- }
1526
- .Button-module__hop-Button___XnpzX[data-pending] > *:not(.Button-module__hop-Button__Spinner___Bhn4b) {
1527
- opacity: 0;
1528
- }
1529
- .LinkButton-module__hop-LinkButton___N0s1M {
1530
- }
1531
- .LinkButton-module__hop-LinkButton--fluid___jCmDA {
1532
- }
1533
- .LinkButton-module__hop-LinkButton--sm___8o1s3 {
1534
- }
1535
- .LinkButton-module__hop-LinkButton--icon-only___EtSuw {
1536
- }
1537
- .LinkButton-module__hop-LinkButton--primary___XcaN5 {
1538
- }
1539
- .LinkButton-module__hop-LinkButton--secondary___41COB {
1540
- }
1541
- .LinkButton-module__hop-LinkButton--upsell___0W6-c {
1542
- }
1543
- .LinkButton-module__hop-LinkButton--danger___Tngcg {
1544
- }
1545
- .LinkButton-module__hop-LinkButton--ghost-primary___I-JA1 {
1546
- }
1547
- .LinkButton-module__hop-LinkButton--ghost-secondary___gDQ1B {
1548
- }
1549
- .LinkButton-module__hop-LinkButton--ghost-danger___4sqcD {
1550
- }
1551
- .LinkButton-module__hop-LinkButton__Spinner___wBN9a {
1552
- }
1553
- .LinkButton-module__hop-LinkButton__icon___5G09q,
1554
- .LinkButton-module__hop-LinkButton__icon-list___ELEM2 {
1555
- }
1556
- .LinkButton-module__hop-LinkButton__text___gC5VW {
1557
- }
1558
- .LinkButton-module__hop-LinkButton__end-icon___uFvlC,
1559
- .LinkButton-module__hop-LinkButton__end-icon-list___rCbkA {
1560
- }
1561
- .LinkButton-module__hop-LinkButton___N0s1M .LinkButton-module__hop-LinkButton__icon-list___ELEM2,
1562
- .LinkButton-module__hop-LinkButton___N0s1M .LinkButton-module__hop-LinkButton__end-icon-list___rCbkA {
1563
- flex-wrap: nowrap;
1564
- }
1565
-
1566
235
  /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/inputs/src/InputGroup.module.css/#css-module-data */
1567
- .InputGroup-module__hop-InputGroup___OXTad {
236
+ .InputGroup-module__hop-InputGroup___-SLz7 {
1568
237
  --hop-InputGroup-background: var(--hop-neutral-surface);
1569
238
  --hop-InputGroup-border-color: var(--hop-neutral-border);
1570
239
  --hop-InputGroup-border-width: 0.0625rem;
1571
- --hop-InputGroup-display: inline-flex;
1572
- --hop-InputGroup-display-number: grid;
1573
240
  --hop-InputGroup-gap: var(--hop-space-inline-sm);
1574
- --hop-InputGroup-gap-textarea: 0;
1575
- --hop-InputGroup-gap-number: 0;
1576
- --hop-InputGroup-flex-direction: row;
1577
- --hop-InputGroup-flex-direction-textarea: column;
1578
- --hop-InputGroup-align-items: center;
1579
- --hop-InputGroup-align-items-textarea: flex-end;
1580
241
  --hop-InputGroup-inline-size: fit-content;
1581
- --hop-InputGroup-sm-block-size: 2rem;
1582
- --hop-InputGroup-md-block-size: 2.5rem;
1583
- --hop-InputGroup-block-size-textarea: auto;
1584
242
  --hop-InputGroup-border-radius: var(--hop-shape-rounded-md);
1585
243
  --hop-InputGroup-padding-inline: var(--hop-space-inset-md);
1586
244
  --hop-InputGroup-padding-block: 0;
1587
- --hop-InputGroup-padding-inline-textarea: var(--hop-space-inset-xs);
1588
- --hop-InputGroup-padding-block-textarea: var(--hop-space-inset-xs);
1589
245
  --hop-InputGroup-border-color-hover: var(--hop-neutral-border-hover);
1590
246
  --hop-InputGroup-border-color-focus: var(--hop-primary-border-focus);
1591
247
  --hop-InputGroup-background-hover: var(--hop-neutral-surface-hover);
1592
248
  --hop-InputGroup-border-color-invalid: var(--hop-danger-border-strong);
1593
- --hop-InputGroup-input-color: var(--hop-neutral-text);
1594
- --hop-InputGroup-input-color-disabled: var(--hop-neutral-text-disabled);
1595
- --hop-InputGroup-input-sm-font-family: var(--hop-body-sm-font-family);
1596
- --hop-InputGroup-input-sm-font-size: var(--hop-body-sm-font-size);
1597
- --hop-InputGroup-input-sm-font-weight: var(--hop-body-sm-font-weight);
1598
- --hop-InputGroup-input-sm-line-height: var(--hop-body-sm-line-height);
1599
- --hop-InputGroup-input-sm-block-size: 1.5rem;
1600
- --hop-InputGroup-input-md-font-family: var(--hop-body-md-font-family);
1601
- --hop-InputGroup-input-md-font-size: var(--hop-body-md-font-size);
1602
- --hop-InputGroup-input-md-font-weight: var(--hop-body-md-font-weight);
1603
- --hop-InputGroup-input-md-line-height: var(--hop-body-md-line-height);
1604
- --hop-InputGroup-input-md-block-size: 2rem;
1605
- --hop-InputGroup-input-padding: 0;
1606
- --hop-InputGroup-textarea-padding: var(--hop-space-inset-xs) calc(var(--hop-space-inset-md) - var(--hop-space-inset-xs));
1607
249
  --hop-InputGroup-background-disabled: var(--hop-neutral-surface-disabled);
1608
250
  --hop-InputGroup-border-color-disabled: var(--hop-neutral-border-disabled);
1609
- --hop-InputGroup-placeholder-font-family: inherit;
1610
- --hop-InputGroup-placeholder-font-size: inherit;
1611
- --hop-InputGroup-placeholder-font-weight: inherit;
1612
- --hop-InputGroup-placeholder-line-height: inherit;
1613
- --hop-InputGroup-placeholder-color: var(--hop-neutral-text-weakest);
1614
- --hop-InputGroup-placeholder-color-disabled: var(--hop-neutral-text-disabled);
1615
- --hop-InputGroup-embedded-button-margin-inline-end: calc(-1 * var(--hop-space-inline-sm));
1616
251
  --inline-size: var(--hop-InputGroup-inline-size);
1617
252
  --border: var(--hop-InputGroup-border-width) solid var(--hop-InputGroup-border-color);
1618
253
  --background: var(--hop-InputGroup-background);
1619
- --block-size: var(--hop-InputGroup-md-block-size);
1620
- --display: var(--hop-InputGroup-display);
1621
- --gap: var(--hop-InputGroup-gap);
1622
- --flex-direction: var(--hop-InputGroup-flex-direction);
1623
- --align-items: var(--hop-InputGroup-align-items);
1624
- --padding-inline: var(--hop-InputGroup-padding-inline);
1625
- --padding-block: var(--hop-InputGroup-padding-block);
1626
- --input-font-family: var(--hop-InputGroup-input-md-font-family);
1627
- --input-font-size: var(--hop-InputGroup-input-md-font-size);
1628
- --input-font-weight: var(--hop-InputGroup-input-md-font-weight);
1629
- --input-line-height: var(--hop-InputGroup-input-md-line-height);
1630
- --input-block-size: var(--hop-InputGroup-input-md-block-size);
1631
- --input-inline-size: initial;
1632
- --input-color: var(--hop-InputGroup-input-color);
1633
- --input-placeholder-color: var(--hop-InputGroup-placeholder-color);
1634
254
  position: relative;
1635
- display: var(--display);
1636
- flex-direction: var(--flex-direction);
1637
- gap: var(--gap);
1638
- align-items: var(--align-items);
255
+ display: inline-flex;
256
+ flex-direction: row;
257
+ gap: var(--hop-InputGroup-gap);
258
+ align-items: center;
1639
259
  box-sizing: border-box;
1640
260
  inline-size: var(--inline-size);
1641
- block-size: var(--block-size);
1642
- padding-block: var(--padding-block);
1643
- padding-inline: var(--padding-inline);
261
+ padding-block: var(--hop-InputGroup-padding-block);
262
+ padding-inline: var(--hop-InputGroup-padding-inline);
1644
263
  background: var(--background);
1645
264
  border: var(--border);
1646
265
  border-radius: var(--hop-InputGroup-border-radius);
1647
266
  }
1648
- .InputGroup-module__hop-InputGroup--fluid___LRrQa {
267
+ .InputGroup-module__hop-InputGroup--fluid___Ev-PS {
1649
268
  --inline-size: 100%;
1650
- --input-inline-size: 100%;
1651
- }
1652
- .InputGroup-module__hop-InputGroup--sm___zPq-r {
1653
- --block-size: var(--hop-InputGroup-sm-block-size);
1654
- --input-font-family: var(--hop-InputGroup-input-sm-font-family);
1655
- --input-font-size: var(--hop-InputGroup-input-sm-font-size);
1656
- --input-font-weight: var(--hop-InputGroup-input-sm-font-weight);
1657
- --input-line-height: var(--hop-InputGroup-input-sm-line-height);
1658
- --input-block-size: var(--hop-InputGroup-input-sm-block-size);
1659
269
  }
1660
- .InputGroup-module__hop-InputGroup___OXTad[data-input-type=textarea] {
1661
- --gap: var(--hop-InputGroup-gap-textarea);
1662
- --flex-direction: var(--hop-InputGroup-flex-direction-textarea);
1663
- --align-items: var(--hop-InputGroup-align-items-textarea);
1664
- --block-size: var(--hop-InputGroup-block-size-textarea);
1665
- --padding-inline: var(--hop-InputGroup-padding-inline-textarea);
1666
- --padding-block: var(--hop-InputGroup-padding-block-textarea);
1667
- }
1668
- .InputGroup-module__hop-InputGroup___OXTad[data-input-type=number] {
1669
- --display: var(--hop-InputGroup-display-number);
1670
- --gap: var(--hop-InputGroup-gap-number);
1671
- }
1672
- .InputGroup-module__hop-InputGroup___OXTad[data-hovered] {
270
+ .InputGroup-module__hop-InputGroup___-SLz7[data-hovered] {
1673
271
  --background: var(--hop-InputGroup-background-hover);
1674
272
  --border: var(--hop-InputGroup-border-width) solid var(--hop-InputGroup-border-color-hover) ;
1675
273
  }
1676
- .InputGroup-module__hop-InputGroup___OXTad[data-focus-within] {
274
+ .InputGroup-module__hop-InputGroup___-SLz7[data-focus-within] {
1677
275
  --border: var(--hop-InputGroup-border-width) solid var(--hop-InputGroup-border-color-focus) ;
1678
276
  }
1679
- .InputGroup-module__hop-InputGroup___OXTad[data-invalid] {
277
+ .InputGroup-module__hop-InputGroup___-SLz7[data-invalid] {
1680
278
  --border: var(--hop-InputGroup-border-width) solid var(--hop-InputGroup-border-color-invalid) ;
1681
279
  }
1682
- .InputGroup-module__hop-InputGroup___OXTad[data-disabled] {
280
+ .InputGroup-module__hop-InputGroup___-SLz7[data-disabled] {
1683
281
  --background: var(--hop-InputGroup-background-disabled);
1684
- --border: 0.0625rem solid var(--hop-InputGroup-border-color-disabled);
1685
- --input-color: var(--hop-InputGroup-input-color-disabled);
1686
- --input-placeholder-color: var(--hop-InputGroup-placeholder-color-disabled);
1687
- }
1688
- .InputGroup-module__hop-InputGroup__input___Tv0Yf,
1689
- .InputGroup-module__hop-InputGroup__textarea___UwBOu {
1690
- flex: 1 1 auto;
1691
- box-sizing: border-box;
1692
- inline-size: var(--input-inline-size);
1693
- min-inline-size: 0;
1694
- font-family: var(--input-font-family);
1695
- font-size: var(--input-font-size);
1696
- font-weight: var(--input-font-weight);
1697
- line-height: var(--input-line-height);
1698
- color: var(--input-color);
1699
- background: transparent;
1700
- border: none;
1701
- outline: none;
1702
- }
1703
- .InputGroup-module__hop-InputGroup__input___Tv0Yf {
1704
- block-size: var(--input-block-size);
1705
- padding: var(--hop-InputGroup-input-padding);
1706
- }
1707
- .InputGroup-module__hop-InputGroup__textarea___UwBOu {
1708
- padding: var(--hop-InputGroup-textarea-padding);
1709
- }
1710
- .InputGroup-module__hop-InputGroup__input___Tv0Yf::placeholder {
1711
- font-family: var(--hop-InputGroup-placeholder-font-family);
1712
- font-size: var(--hop-InputGroup-placeholder-font-size);
1713
- font-weight: var(--hop-InputGroup-placeholder-font-weight);
1714
- line-height: var(--hop-InputGroup-placeholder-line-height);
1715
- color: var(--input-placeholder-color);
1716
- }
1717
- .InputGroup-module__hop-InputGroup__embedded-button___fVr-x {
1718
- 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);
1719
283
  }