@hopper-ui/components 1.8.2 → 1.9.1

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 (374) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/accordion/src/Accordion.css +78 -78
  3. package/dist/accordion/src/Accordion.js +1 -1
  4. package/dist/accordion/src/index.css +78 -78
  5. package/dist/accordion/src/index.js +1 -1
  6. package/dist/alert/src/Alert.css +770 -593
  7. package/dist/alert/src/Alert.js +10 -9
  8. package/dist/alert/src/index.css +770 -593
  9. package/dist/alert/src/index.js +10 -9
  10. package/dist/avatar/src/AnonymousAvatar.css +55 -48
  11. package/dist/avatar/src/AnonymousAvatar.d.ts +5 -0
  12. package/dist/avatar/src/AnonymousAvatar.js +2 -2
  13. package/dist/avatar/src/Avatar.css +80 -66
  14. package/dist/avatar/src/Avatar.d.ts +9 -1
  15. package/dist/avatar/src/Avatar.js +4 -4
  16. package/dist/avatar/src/AvatarGroup.css +65 -65
  17. package/dist/avatar/src/AvatarGroup.d.ts +1 -0
  18. package/dist/avatar/src/AvatarGroup.js +4 -4
  19. package/dist/avatar/src/AvatarGroupContext.d.ts +1 -0
  20. package/dist/avatar/src/BrokenAvatar.css +55 -48
  21. package/dist/avatar/src/BrokenAvatar.d.ts +5 -0
  22. package/dist/avatar/src/BrokenAvatar.js +2 -2
  23. package/dist/avatar/src/DeletedAvatar.css +55 -48
  24. package/dist/avatar/src/DeletedAvatar.d.ts +5 -0
  25. package/dist/avatar/src/DeletedAvatar.js +2 -2
  26. package/dist/avatar/src/RichIconAvatarImage.css +55 -48
  27. package/dist/avatar/src/RichIconAvatarImage.d.ts +9 -0
  28. package/dist/avatar/src/RichIconAvatarImage.js +1 -1
  29. package/dist/avatar/src/RichIconAvatarImageContext.d.ts +1 -0
  30. package/dist/avatar/src/index.css +107 -93
  31. package/dist/avatar/src/index.d.ts +1 -0
  32. package/dist/avatar/src/index.js +9 -9
  33. package/dist/badge/src/Badge.css +53 -53
  34. package/dist/badge/src/Badge.js +2 -2
  35. package/dist/badge/src/FloatingBadge.css +48 -48
  36. package/dist/badge/src/FloatingBadge.js +1 -1
  37. package/dist/badge/src/index.css +63 -63
  38. package/dist/badge/src/index.js +3 -3
  39. package/dist/buttons/src/Button.css +120 -110
  40. package/dist/buttons/src/Button.d.ts +5 -2
  41. package/dist/buttons/src/Button.js +6 -5
  42. package/dist/buttons/src/ButtonContext.d.ts +3 -1
  43. package/dist/buttons/src/ButtonGroup.css +49 -49
  44. package/dist/buttons/src/ButtonGroup.d.ts +1 -1
  45. package/dist/buttons/src/ButtonGroup.js +1 -1
  46. package/dist/buttons/src/ButtonGroupContext.d.ts +1 -1
  47. package/dist/buttons/src/ClearButton.css +109 -109
  48. package/dist/buttons/src/ClearButton.js +2 -2
  49. package/dist/buttons/src/CloseButton.css +115 -105
  50. package/dist/buttons/src/CloseButton.d.ts +3 -1
  51. package/dist/buttons/src/CloseButton.js +7 -6
  52. package/dist/buttons/src/CloseButtonContext.d.ts +3 -1
  53. package/dist/buttons/src/EmbeddedButton.css +109 -109
  54. package/dist/buttons/src/EmbeddedButton.js +1 -1
  55. package/dist/buttons/src/LinkButton.css +131 -119
  56. package/dist/buttons/src/LinkButton.d.ts +5 -2
  57. package/dist/buttons/src/LinkButton.js +5 -4
  58. package/dist/buttons/src/LinkButtonContext.d.ts +3 -1
  59. package/dist/buttons/src/ToggleButton.css +485 -330
  60. package/dist/buttons/src/ToggleButton.d.ts +6 -3
  61. package/dist/buttons/src/ToggleButton.js +4 -4
  62. package/dist/buttons/src/ToggleButtonContext.d.ts +3 -1
  63. package/dist/buttons/src/index.css +718 -541
  64. package/dist/buttons/src/index.d.ts +6 -4
  65. package/dist/buttons/src/index.js +12 -11
  66. package/dist/callout/src/Callout.css +730 -553
  67. package/dist/callout/src/Callout.js +8 -7
  68. package/dist/callout/src/CompactCallout.css +767 -590
  69. package/dist/callout/src/CompactCallout.js +8 -7
  70. package/dist/callout/src/index.css +779 -602
  71. package/dist/callout/src/index.js +10 -9
  72. package/dist/card/src/Card.css +41 -41
  73. package/dist/card/src/Card.js +1 -1
  74. package/dist/card/src/index.css +41 -41
  75. package/dist/card/src/index.js +1 -1
  76. package/dist/checkbox/src/Checkbox.css +57 -57
  77. package/dist/checkbox/src/Checkbox.js +4 -4
  78. package/dist/checkbox/src/CheckboxField.css +44 -44
  79. package/dist/checkbox/src/CheckboxField.js +3 -3
  80. package/dist/checkbox/src/CheckboxGroup.css +109 -109
  81. package/dist/checkbox/src/CheckboxGroup.js +7 -7
  82. package/dist/checkbox/src/DecorativeCheckbox.css +65 -65
  83. package/dist/checkbox/src/DecorativeCheckbox.js +3 -3
  84. package/dist/checkbox/src/index.css +109 -109
  85. package/dist/checkbox/src/index.js +11 -11
  86. package/dist/{chunk-RXNIOPGX.js → chunk-27YZA2A6.js} +2 -2
  87. package/dist/{chunk-T52WHF7R.js → chunk-2A4SQELV.js} +1 -1
  88. package/dist/{chunk-GTGTEHOA.js → chunk-2TZLC5MY.js} +2 -2
  89. package/dist/{chunk-6Y4WK3RQ.js → chunk-333CF3S7.js} +1 -1
  90. package/dist/{chunk-WTBYPRRW.js → chunk-3BCZJCQ3.js} +3 -3
  91. package/dist/{chunk-J6QWUF6I.js → chunk-3VOSETB5.js} +18 -12
  92. package/dist/{chunk-YJZJ6EGK.js → chunk-446J7ADD.js} +3 -3
  93. package/dist/{chunk-O4U6DKHU.js → chunk-4GAGBXT4.js} +2 -2
  94. package/dist/{chunk-TQFW3GV6.js → chunk-4WWPGWIY.js} +1 -1
  95. package/dist/{chunk-2ZNBGFYO.js → chunk-4Y2FHAJZ.js} +1 -1
  96. package/dist/{chunk-2QPUHBJ6.js → chunk-4YDVFQFT.js} +22 -9
  97. package/dist/{chunk-V4FVG6RD.js → chunk-5MWWUEMG.js} +3 -3
  98. package/dist/{chunk-YG4VQFHZ.js → chunk-5SCGTPMN.js} +2 -2
  99. package/dist/{chunk-VNFZDWVB.js → chunk-6DOMKHG4.js} +1 -1
  100. package/dist/{chunk-JG7DCSZ7.js → chunk-7CK3J42S.js} +1 -1
  101. package/dist/{chunk-AJ4JHO3L.js → chunk-7N6N5ZQW.js} +2 -2
  102. package/dist/{chunk-CMNPB35A.js → chunk-AU3U7OXE.js} +12 -12
  103. package/dist/{chunk-XSUYZDYB.js → chunk-BQB4WR4X.js} +1 -1
  104. package/dist/{chunk-BHFIGTK6.js → chunk-BXX3M2TF.js} +1 -1
  105. package/dist/{chunk-MVXDSVBA.js → chunk-BYIZ6YTQ.js} +1 -1
  106. package/dist/{chunk-3MYOCKT2.js → chunk-C4OUFO6E.js} +8 -8
  107. package/dist/{chunk-SLJKAEOC.js → chunk-CCXYS5EF.js} +5 -5
  108. package/dist/{chunk-BV3ROFY6.js → chunk-CG4N4NJW.js} +1 -1
  109. package/dist/{chunk-UH3RWAZV.js → chunk-CJFALWKZ.js} +2 -2
  110. package/dist/{chunk-C2JYCOJJ.js → chunk-D54XSA2G.js} +2 -2
  111. package/dist/{chunk-ZBVXOGE7.js → chunk-DR22UMIB.js} +8 -8
  112. package/dist/{chunk-P4YL7PZX.js → chunk-EIHFLKML.js} +2 -2
  113. package/dist/{chunk-YT6KAZ7W.js → chunk-EPZBUE2N.js} +2 -2
  114. package/dist/{chunk-TRMO7MV5.js → chunk-FICUPRHV.js} +11 -11
  115. package/dist/{chunk-N2INWSSP.js → chunk-FKVHRFPV.js} +1 -1
  116. package/dist/chunk-GFYRA4EN.js +23 -0
  117. package/dist/{chunk-I62K2ZHG.js → chunk-GXR774K5.js} +1 -1
  118. package/dist/{chunk-TSXCJZLH.js → chunk-H7IMS4PR.js} +2 -2
  119. package/dist/{chunk-OM4XR33Z.js → chunk-HLAMRSGD.js} +2 -2
  120. package/dist/{chunk-GNG2NV76.js → chunk-IF7OASII.js} +1 -1
  121. package/dist/{chunk-O6RCJ73Y.js → chunk-IZ6AOTXC.js} +2 -2
  122. package/dist/{chunk-2UBRJW2J.js → chunk-J45YC7C2.js} +1 -1
  123. package/dist/{chunk-WSW2WVYZ.js → chunk-J7ENAT22.js} +1 -1
  124. package/dist/{chunk-OZ7NZPDM.js → chunk-JGUOHQEO.js} +16 -7
  125. package/dist/{chunk-VK4C7IPE.js → chunk-JHHAFKNM.js} +7 -7
  126. package/dist/{chunk-PVIZJ22K.js → chunk-JIOQK4T7.js} +1 -1
  127. package/dist/{chunk-BCBQINY3.js → chunk-KADWB3R4.js} +2 -2
  128. package/dist/{chunk-TBOTEIRR.js → chunk-KPFBET2X.js} +1 -1
  129. package/dist/{chunk-KHPSEX4H.js → chunk-L3MHODGB.js} +1 -1
  130. package/dist/{chunk-VQ6HKO7S.js → chunk-LM6KSNRY.js} +2 -2
  131. package/dist/{chunk-UEJAUKJY.js → chunk-LRAE7OJJ.js} +8 -8
  132. package/dist/{chunk-PT5SYITB.js → chunk-LSZ6ETKU.js} +5 -5
  133. package/dist/{chunk-Y5RKQQHZ.js → chunk-LWSF2VLC.js} +2 -2
  134. package/dist/{chunk-FC6G5MQ3.js → chunk-MIHSQG7D.js} +2 -2
  135. package/dist/{chunk-B62S77SN.js → chunk-MNZODLBT.js} +3 -3
  136. package/dist/{chunk-C7CNYQRP.js → chunk-N3KZBYMB.js} +2 -2
  137. package/dist/{chunk-KG3UXYPM.js → chunk-N4QFGCPW.js} +3 -3
  138. package/dist/{chunk-VDPXCFLQ.js → chunk-NIAAMHIX.js} +5 -5
  139. package/dist/{chunk-GDX6X4AK.js → chunk-NL7JSTHF.js} +2 -2
  140. package/dist/{chunk-THRSW2TA.js → chunk-NMT2J3X6.js} +1 -1
  141. package/dist/{chunk-XIWBIDKX.js → chunk-OBODGTPP.js} +16 -10
  142. package/dist/{chunk-GUPD7SCD.js → chunk-PEIFEGNC.js} +1 -1
  143. package/dist/{chunk-CDC6G4DW.js → chunk-PH3YCU3Y.js} +1 -1
  144. package/dist/{chunk-WTDBPVO2.js → chunk-PY7LQUG3.js} +3 -3
  145. package/dist/{chunk-XYQU45MO.js → chunk-QH36FSEG.js} +3 -3
  146. package/dist/{chunk-R3F4R2GR.js → chunk-QJA2OD7N.js} +5 -5
  147. package/dist/{chunk-YLUR4I4O.js → chunk-QNAAYTKT.js} +1 -1
  148. package/dist/{chunk-LDWHZCH4.js → chunk-QQ7AWYFY.js} +1 -1
  149. package/dist/{chunk-FQHEXVEO.js → chunk-QSMUIB57.js} +2 -2
  150. package/dist/{chunk-5ZMGVSCQ.js → chunk-R2GEGPOO.js} +1 -1
  151. package/dist/{chunk-EOXIVZJH.js → chunk-RZWF5H5Q.js} +1 -1
  152. package/dist/{chunk-2EOZLJ3U.js → chunk-S3RZ45UA.js} +6 -6
  153. package/dist/{chunk-Q7NZNQEE.js → chunk-SJKZJBNT.js} +2 -2
  154. package/dist/{chunk-A5X5HCFF.js → chunk-SYAUYFR3.js} +1 -1
  155. package/dist/{chunk-VSAMAS7P.js → chunk-UE2MKTQA.js} +5 -5
  156. package/dist/{chunk-CU3QGP2L.js → chunk-UHXLZOSK.js} +2 -2
  157. package/dist/{chunk-JSK57VIX.js → chunk-UL24FHXE.js} +2 -2
  158. package/dist/{chunk-4O27LL2N.js → chunk-V25S5IBB.js} +2 -2
  159. package/dist/{chunk-MRHZL6GL.js → chunk-VAXZGJLC.js} +2 -2
  160. package/dist/{chunk-QXX3VYMF.js → chunk-VRQANX3T.js} +1 -1
  161. package/dist/{chunk-VQN3EOEE.js → chunk-W3TNGPJI.js} +2 -2
  162. package/dist/{chunk-QIGTPOAF.js → chunk-WAXG3VQ3.js} +10 -10
  163. package/dist/{chunk-IKQ2EV2Y.js → chunk-X6YIJ7TI.js} +1 -1
  164. package/dist/{chunk-E3KVQKBW.js → chunk-XAAZVXFG.js} +3 -3
  165. package/dist/{chunk-CHJUYY53.js → chunk-XBXWGDWC.js} +1 -1
  166. package/dist/{chunk-OPG3YAOS.js → chunk-XWZOU65F.js} +1 -1
  167. package/dist/{chunk-C4F7EZIQ.js → chunk-XX37YQKD.js} +1 -1
  168. package/dist/{chunk-SUNGEQNN.js → chunk-YC6V3NJ3.js} +2 -2
  169. package/dist/{chunk-3BP4XOAL.js → chunk-YIIEDUWW.js} +1 -1
  170. package/dist/{chunk-XFWOCVQF.js → chunk-YKJCXEWE.js} +15 -9
  171. package/dist/{chunk-AN3RU3NY.js → chunk-YLL2OBOQ.js} +3 -3
  172. package/dist/{chunk-W57EDX3L.js → chunk-ZKWHOGLL.js} +1 -1
  173. package/dist/combobox/src/ComboBox.css +1146 -955
  174. package/dist/combobox/src/ComboBox.js +18 -18
  175. package/dist/combobox/src/index.css +1146 -955
  176. package/dist/combobox/src/index.js +18 -18
  177. package/dist/contextual-help/src/ContextualHelp.css +1075 -884
  178. package/dist/contextual-help/src/ContextualHelp.js +4 -4
  179. package/dist/contextual-help/src/index.css +1075 -884
  180. package/dist/contextual-help/src/index.js +4 -4
  181. package/dist/disclosure/src/Disclosure.css +48 -48
  182. package/dist/disclosure/src/Disclosure.js +1 -1
  183. package/dist/disclosure/src/DisclosureHeader.css +55 -55
  184. package/dist/disclosure/src/DisclosureHeader.js +3 -3
  185. package/dist/disclosure/src/DisclosurePanel.css +48 -48
  186. package/dist/disclosure/src/DisclosurePanel.js +3 -3
  187. package/dist/disclosure/src/index.css +73 -73
  188. package/dist/disclosure/src/index.js +7 -7
  189. package/dist/divider/src/Divider.css +40 -40
  190. package/dist/divider/src/Divider.js +1 -1
  191. package/dist/divider/src/index.css +40 -40
  192. package/dist/divider/src/index.js +1 -1
  193. package/dist/error-message/src/ErrorMessage.css +40 -40
  194. package/dist/error-message/src/ErrorMessage.js +2 -2
  195. package/dist/error-message/src/index.css +40 -40
  196. package/dist/error-message/src/index.js +2 -2
  197. package/dist/form/src/Form.css +38 -38
  198. package/dist/form/src/Form.d.ts +1 -1
  199. package/dist/form/src/Form.js +1 -1
  200. package/dist/form/src/index.css +38 -38
  201. package/dist/form/src/index.js +1 -1
  202. package/dist/header/src/Header.css +38 -38
  203. package/dist/header/src/index.css +38 -38
  204. package/dist/helper-message/src/HelperMessage.css +40 -40
  205. package/dist/helper-message/src/HelperMessage.js +2 -2
  206. package/dist/helper-message/src/index.css +40 -40
  207. package/dist/helper-message/src/index.js +2 -2
  208. package/dist/hopper-provider/src/HopperProvider.css +39 -39
  209. package/dist/hopper-provider/src/HopperProvider.js +1 -1
  210. package/dist/hopper-provider/src/index.css +39 -39
  211. package/dist/hopper-provider/src/index.js +1 -1
  212. package/dist/icon-list/src/IconList.css +39 -39
  213. package/dist/icon-list/src/IconList.js +1 -1
  214. package/dist/icon-list/src/index.css +39 -39
  215. package/dist/icon-list/src/index.js +1 -1
  216. package/dist/illustrated-message/src/IllustratedMessage.css +737 -560
  217. package/dist/illustrated-message/src/IllustratedMessage.js +1 -1
  218. package/dist/illustrated-message/src/index.css +737 -560
  219. package/dist/illustrated-message/src/index.js +1 -1
  220. package/dist/image/src/Image.css +41 -41
  221. package/dist/image/src/Image.js +1 -1
  222. package/dist/image/src/SvgImage.css +39 -39
  223. package/dist/image/src/SvgImage.js +1 -1
  224. package/dist/image/src/index.css +42 -42
  225. package/dist/image/src/index.js +2 -2
  226. package/dist/index.css +1496 -1305
  227. package/dist/index.d.ts +25 -7
  228. package/dist/index.js +89 -88
  229. package/dist/inputs/src/Input.css +42 -42
  230. package/dist/inputs/src/Input.js +1 -1
  231. package/dist/inputs/src/InputGroup.css +44 -44
  232. package/dist/inputs/src/InputGroup.js +1 -1
  233. package/dist/inputs/src/NumberField.css +68 -68
  234. package/dist/inputs/src/NumberField.js +10 -10
  235. package/dist/inputs/src/PasswordField.css +738 -561
  236. package/dist/inputs/src/PasswordField.js +10 -10
  237. package/dist/inputs/src/RemainingCharacterCount.css +41 -41
  238. package/dist/inputs/src/RemainingCharacterCount.js +2 -2
  239. package/dist/inputs/src/SearchField.css +744 -567
  240. package/dist/inputs/src/SearchField.js +11 -11
  241. package/dist/inputs/src/TextArea.css +65 -65
  242. package/dist/inputs/src/TextArea.js +9 -9
  243. package/dist/inputs/src/TextField.css +742 -565
  244. package/dist/inputs/src/TextField.js +13 -13
  245. package/dist/inputs/src/index.css +784 -607
  246. package/dist/inputs/src/index.js +17 -17
  247. package/dist/layout/src/Content.css +38 -38
  248. package/dist/layout/src/Footer.css +38 -38
  249. package/dist/link/src/Link.css +77 -77
  250. package/dist/link/src/Link.js +3 -3
  251. package/dist/link/src/index.css +77 -77
  252. package/dist/link/src/index.js +3 -3
  253. package/dist/list-box/src/ListBox.css +326 -312
  254. package/dist/list-box/src/ListBox.js +7 -7
  255. package/dist/list-box/src/ListBoxItem.css +314 -300
  256. package/dist/list-box/src/ListBoxItem.js +6 -6
  257. package/dist/list-box/src/ListBoxItemSkeleton.css +45 -45
  258. package/dist/list-box/src/ListBoxItemSkeleton.js +1 -1
  259. package/dist/list-box/src/index.css +326 -312
  260. package/dist/list-box/src/index.js +7 -7
  261. package/dist/menu/src/Menu.css +1071 -880
  262. package/dist/menu/src/Menu.js +2 -2
  263. package/dist/menu/src/MenuItem.css +131 -117
  264. package/dist/menu/src/MenuItem.js +2 -2
  265. package/dist/menu/src/MenuSection.css +40 -40
  266. package/dist/menu/src/MenuSection.js +1 -1
  267. package/dist/menu/src/index.css +1096 -905
  268. package/dist/menu/src/index.js +5 -5
  269. package/dist/modal/src/BaseModal.css +53 -53
  270. package/dist/modal/src/BaseModal.js +1 -1
  271. package/dist/modal/src/CustomModal.css +54 -54
  272. package/dist/modal/src/CustomModal.js +2 -2
  273. package/dist/modal/src/Modal.css +760 -583
  274. package/dist/modal/src/Modal.js +9 -8
  275. package/dist/modal/src/index.css +755 -578
  276. package/dist/modal/src/index.js +10 -9
  277. package/dist/overlays/popover/src/Popover.css +1069 -878
  278. package/dist/overlays/popover/src/Popover.js +2 -2
  279. package/dist/overlays/popover/src/PopoverBase.css +41 -41
  280. package/dist/overlays/popover/src/PopoverBase.js +1 -1
  281. package/dist/overlays/popover/src/index.css +1072 -881
  282. package/dist/overlays/popover/src/index.js +3 -3
  283. package/dist/radio/src/DecorativeRadio.css +65 -65
  284. package/dist/radio/src/DecorativeRadio.js +3 -3
  285. package/dist/radio/src/Radio.css +57 -57
  286. package/dist/radio/src/Radio.js +3 -3
  287. package/dist/radio/src/RadioField.css +44 -44
  288. package/dist/radio/src/RadioField.js +2 -2
  289. package/dist/radio/src/RadioGroup.css +109 -109
  290. package/dist/radio/src/RadioGroup.js +7 -7
  291. package/dist/radio/src/index.css +109 -109
  292. package/dist/radio/src/index.js +11 -11
  293. package/dist/segmented-control/src/SegmentedControl.css +39 -39
  294. package/dist/segmented-control/src/SegmentedControl.js +1 -1
  295. package/dist/segmented-control/src/SegmentedControlItem.css +53 -53
  296. package/dist/segmented-control/src/SegmentedControlItem.js +2 -2
  297. package/dist/segmented-control/src/index.css +54 -54
  298. package/dist/segmented-control/src/index.js +3 -3
  299. package/dist/select/src/Select.css +1090 -899
  300. package/dist/select/src/Select.js +17 -17
  301. package/dist/select/src/SelectValue.css +113 -99
  302. package/dist/select/src/SelectValue.js +2 -2
  303. package/dist/select/src/index.css +1090 -899
  304. package/dist/select/src/index.js +17 -17
  305. package/dist/spinner/src/Spinner.css +48 -48
  306. package/dist/spinner/src/Spinner.js +2 -2
  307. package/dist/spinner/src/index.css +48 -48
  308. package/dist/spinner/src/index.js +2 -2
  309. package/dist/switch/src/Switch.css +54 -54
  310. package/dist/switch/src/Switch.js +3 -3
  311. package/dist/switch/src/SwitchField.css +44 -44
  312. package/dist/switch/src/SwitchField.js +2 -2
  313. package/dist/switch/src/index.css +60 -60
  314. package/dist/switch/src/index.js +4 -4
  315. package/dist/tabs/src/Tab.css +916 -725
  316. package/dist/tabs/src/Tab.js +2 -2
  317. package/dist/tabs/src/TabLine.css +40 -40
  318. package/dist/tabs/src/TabLine.js +1 -1
  319. package/dist/tabs/src/TabList.css +47 -47
  320. package/dist/tabs/src/TabList.js +2 -2
  321. package/dist/tabs/src/TabPanel.css +40 -40
  322. package/dist/tabs/src/TabPanel.js +1 -1
  323. package/dist/tabs/src/index.css +927 -736
  324. package/dist/tabs/src/index.js +5 -5
  325. package/dist/tag/src/Tag.css +894 -703
  326. package/dist/tag/src/Tag.js +7 -7
  327. package/dist/tag/src/TagGroup.css +48 -48
  328. package/dist/tag/src/TagGroup.js +7 -7
  329. package/dist/tag/src/index.css +904 -713
  330. package/dist/tag/src/index.js +12 -12
  331. package/dist/tile/src/Tile.css +47 -47
  332. package/dist/tile/src/Tile.js +2 -2
  333. package/dist/tile/src/TileGroup.css +39 -39
  334. package/dist/tile/src/TileGroup.js +1 -1
  335. package/dist/tile/src/index.css +48 -48
  336. package/dist/tile/src/index.js +3 -3
  337. package/dist/toggle-arrow/src/ToggleArrow.css +40 -40
  338. package/dist/toggle-arrow/src/ToggleArrow.js +1 -1
  339. package/dist/toggle-arrow/src/index.css +40 -40
  340. package/dist/toggle-arrow/src/index.js +1 -1
  341. package/dist/tooltip/src/Tooltip.css +48 -48
  342. package/dist/tooltip/src/Tooltip.js +3 -3
  343. package/dist/tooltip/src/TooltipTrigger.css +38 -38
  344. package/dist/tooltip/src/index.css +48 -48
  345. package/dist/tooltip/src/index.js +3 -3
  346. package/dist/{types-CVCUJ7un.d.ts → types-BqmVPR6K.d.ts} +2 -2
  347. package/dist/typography/heading/src/Heading.css +38 -38
  348. package/dist/typography/heading/src/Heading.js +1 -1
  349. package/dist/typography/heading/src/index.css +38 -38
  350. package/dist/typography/heading/src/index.js +1 -1
  351. package/dist/typography/label/src/FieldLabel.css +38 -38
  352. package/dist/typography/label/src/FieldLabel.js +3 -3
  353. package/dist/typography/label/src/Label.css +38 -38
  354. package/dist/typography/label/src/Label.js +1 -1
  355. package/dist/typography/label/src/index.css +38 -38
  356. package/dist/typography/label/src/index.js +3 -3
  357. package/dist/typography/overline-text/src/OverlineText.css +38 -38
  358. package/dist/typography/overline-text/src/OverlineText.js +1 -1
  359. package/dist/typography/overline-text/src/index.css +38 -38
  360. package/dist/typography/overline-text/src/index.js +1 -1
  361. package/dist/typography/paragraph/src/Paragraph.css +38 -38
  362. package/dist/typography/paragraph/src/Paragraph.js +2 -2
  363. package/dist/typography/paragraph/src/index.css +38 -38
  364. package/dist/typography/paragraph/src/index.js +2 -2
  365. package/dist/typography/text/src/Text.css +38 -38
  366. package/dist/typography/text/src/Text.js +1 -1
  367. package/dist/typography/text/src/index.css +38 -38
  368. package/dist/typography/text/src/index.js +1 -1
  369. package/dist/utils/src/ClearSlots.css +38 -38
  370. package/dist/utils/src/EnsureTextWrapper.css +38 -38
  371. package/dist/utils/src/EnsureTextWrapper.js +2 -2
  372. package/dist/utils/src/index.css +38 -38
  373. package/dist/utils/src/index.js +2 -2
  374. package/package.json +1 -1
package/dist/buttons/src/ToggleButton.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/heading/src/Heading.module.css/#css-module-data */
2
- .Heading-module__hop-Heading___ex9Pl {
2
+ .Heading-module__hop-Heading___z2REG {
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,7 +33,7 @@
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___ex9Pl) {
36
+ :where(.Heading-module__hop-Heading___z2REG) {
37
37
  margin: 0;
38
38
  font-family: var(--font-family);
39
39
  font-size: var(--font-size);
@@ -41,43 +41,43 @@
41
41
  line-height: var(--line-height);
42
42
  color: var(--hop-neutral-text);
43
43
  }
44
- :where(.Heading-module__hop-Heading--xs___U-anE) {
44
+ :where(.Heading-module__hop-Heading--xs___UvA8B) {
45
45
  --font-size: var(--hop-Heading-xs-font-size);
46
46
  --font-family: var(--hop-Heading-xs-font-family);
47
47
  --font-weight: var(--hop-Heading-xs-font-weight);
48
48
  --line-height: var(--hop-Heading-xs-line-height);
49
49
  }
50
- :where(.Heading-module__hop-Heading--sm___9euNX) {
50
+ :where(.Heading-module__hop-Heading--sm___8LA8Z) {
51
51
  --font-size: var(--hop-Heading-sm-font-size);
52
52
  --font-family: var(--hop-Heading-sm-font-family);
53
53
  --font-weight: var(--hop-Heading-sm-font-weight);
54
54
  --line-height: var(--hop-Heading-sm-line-height);
55
55
  }
56
- :where(.Heading-module__hop-Heading--md___m9G-q) {
56
+ :where(.Heading-module__hop-Heading--md___-vdE8) {
57
57
  --font-size: var(--hop-Heading-md-font-size);
58
58
  --font-family: var(--hop-Heading-md-font-family);
59
59
  --font-weight: var(--hop-Heading-md-font-weight);
60
60
  --line-height: var(--hop-Heading-md-line-height);
61
61
  }
62
- :where(.Heading-module__hop-Heading--lg___seVEu) {
62
+ :where(.Heading-module__hop-Heading--lg___R--az) {
63
63
  --font-size: var(--hop-Heading-lg-font-size);
64
64
  --font-family: var(--hop-Heading-lg-font-family);
65
65
  --font-weight: var(--hop-Heading-lg-font-weight);
66
66
  --line-height: var(--hop-Heading-lg-line-height);
67
67
  }
68
- :where(.Heading-module__hop-Heading--xl___-ctXd) {
68
+ :where(.Heading-module__hop-Heading--xl___Us1B5) {
69
69
  --font-size: var(--hop-Heading-xl-font-size);
70
70
  --font-family: var(--hop-Heading-xl-font-family);
71
71
  --font-weight: var(--hop-Heading-xl-font-weight);
72
72
  --line-height: var(--hop-Heading-xl-line-height);
73
73
  }
74
- :where(.Heading-module__hop-Heading--2xl___nm0lD) {
74
+ :where(.Heading-module__hop-Heading--2xl___-Dui8) {
75
75
  --font-size: var(--hop-Heading-2xl-font-size);
76
76
  --font-family: var(--hop-Heading-2xl-font-family);
77
77
  --font-weight: var(--hop-Heading-2xl-font-weight);
78
78
  --line-height: var(--hop-Heading-2xl-line-height);
79
79
  }
80
- :where(.Heading-module__hop-Heading--3xl___UlnoB) {
80
+ :where(.Heading-module__hop-Heading--3xl___Niq8Y) {
81
81
  --font-size: var(--hop-Heading-3xl-font-size);
82
82
  --font-family: var(--hop-Heading-3xl-font-family);
83
83
  --font-weight: var(--hop-Heading-3xl-font-weight);
@@ -85,21 +85,21 @@
85
85
  }
86
86
 
87
87
  /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/form/src/Form.module.css/#css-module-data */
88
- .Form-module__hop-Form___oRthn {
88
+ .Form-module__hop-Form___5gPvH {
89
89
  display: flex;
90
90
  flex-direction: column;
91
91
  gap: var(--hop-space-stack-lg);
92
92
  }
93
93
 
94
94
  /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/label/src/Label.module.css/#css-module-data */
95
- .Label-module__hop-Label___ClY-C {
95
+ .Label-module__hop-Label___XkwKF {
96
96
  --hop-Label-font-size: var(--hop-heading-xs-font-size);
97
97
  --hop-Label-font-family: var(--hop-heading-xs-font-family);
98
98
  --hop-Label-font-weight: var(--hop-heading-xs-font-weight);
99
99
  --hop-Label-line-height: var(--hop-heading-xs-line-height);
100
100
  --hop-Label-color: var(--hop-neutral-text-weak);
101
101
  }
102
- :where(.Label-module__hop-Label___ClY-C) {
102
+ :where(.Label-module__hop-Label___XkwKF) {
103
103
  font-family: var(--hop-Label-font-family);
104
104
  font-size: var(--hop-Label-font-size);
105
105
  font-weight: var(--hop-Label-font-weight);
@@ -108,17 +108,17 @@
108
108
  }
109
109
 
110
110
  /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/label/src/FieldLabel.module.css/#css-module-data */
111
- .FieldLabel-module__hop-FieldLabel__wrapper___P-qSb {
111
+ .FieldLabel-module__hop-FieldLabel__wrapper___g-kwE {
112
112
  display: flex;
113
113
  gap: var(--hop-space-inset-xs);
114
114
  align-items: center;
115
115
  }
116
- .FieldLabel-module__hop-FieldLabel__indicator___lbxSg {
116
+ .FieldLabel-module__hop-FieldLabel__indicator___hyzp- {
117
117
  padding-inline-start: var(--hop-space-20);
118
118
  }
119
119
 
120
120
  /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/overline-text/src/OverlineText.module.css/#css-module-data */
121
- :where(.OverlineText-module__hop-OverlineText___RBrct) {
121
+ :where(.OverlineText-module__hop-OverlineText___nUpbh) {
122
122
  --hop-OverlineText-font-family: var(--hop-overline-font-family);
123
123
  --hop-OverlineText-font-size: var(--hop-overline-font-size);
124
124
  --hop-OverlineText-font-weight: var(--hop-overline-font-weight);
@@ -142,26 +142,26 @@
142
142
  text-transform: uppercase;
143
143
  letter-spacing: var(--letter-spacing);
144
144
  }
145
- .OverlineText-module__hop-OverlineText__text___ue5ai {
145
+ .OverlineText-module__hop-OverlineText__text___piSUd {
146
146
  box-sizing: border-box;
147
147
  }
148
- .OverlineText-module__hop-OverlineText__text___ue5ai::before,
149
- .OverlineText-module__hop-OverlineText__text___ue5ai::after {
148
+ .OverlineText-module__hop-OverlineText__text___piSUd::before,
149
+ .OverlineText-module__hop-OverlineText__text___piSUd::after {
150
150
  content: "";
151
151
  display: block;
152
152
  box-sizing: border-box;
153
153
  inline-size: 0;
154
154
  block-size: 0;
155
155
  }
156
- .OverlineText-module__hop-OverlineText__text___ue5ai::before {
156
+ .OverlineText-module__hop-OverlineText__text___piSUd::before {
157
157
  margin-block-end: var(--bottom-offset);
158
158
  }
159
- .OverlineText-module__hop-OverlineText__text___ue5ai::after {
159
+ .OverlineText-module__hop-OverlineText__text___piSUd::after {
160
160
  margin-block-start: var(--top-offset);
161
161
  }
162
162
 
163
163
  /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/text/src/Text.module.css/#css-module-data */
164
- .Text-module__hop-Text___Mm3Jn {
164
+ .Text-module__hop-Text___cfXZY {
165
165
  --hop-Text-xs-font-size: var(--hop-body-xs-font-size);
166
166
  --hop-Text-xs-font-family: var(--hop-body-xs-font-family);
167
167
  --hop-Text-xs-font-weight: var(--hop-body-xs-font-weight);
@@ -191,49 +191,49 @@
191
191
  --hop-Text-inherit-size-font-weight: inherit;
192
192
  --hop-Text-inherit-size-line-height: inherit;
193
193
  }
194
- :where(.Text-module__hop-Text___Mm3Jn) {
194
+ :where(.Text-module__hop-Text___cfXZY) {
195
195
  font-family: var(--font-family);
196
196
  font-size: var(--font-size);
197
197
  font-weight: var(--font-weight);
198
198
  line-height: var(--line-height);
199
199
  }
200
- :where(.Text-module__hop-Text--xs___Ce3vK) {
200
+ :where(.Text-module__hop-Text--xs___XLJcP) {
201
201
  --font-size: var(--hop-Text-xs-font-size);
202
202
  --font-family: var(--hop-Text-xs-font-family);
203
203
  --font-weight: var(--hop-Text-xs-font-weight);
204
204
  --line-height: var(--hop-Text-xs-line-height);
205
205
  }
206
- :where(.Text-module__hop-Text--sm___UcccH) {
206
+ :where(.Text-module__hop-Text--sm___I6KRc) {
207
207
  --font-size: var(--hop-Text-sm-font-size);
208
208
  --font-family: var(--hop-Text-sm-font-family);
209
209
  --font-weight: var(--hop-Text-sm-font-weight);
210
210
  --line-height: var(--hop-Text-sm-line-height);
211
211
  }
212
- :where(.Text-module__hop-Text--md___YcqAT) {
212
+ :where(.Text-module__hop-Text--md___E8yDa) {
213
213
  --font-size: var(--hop-Text-md-font-size);
214
214
  --font-family: var(--hop-Text-md-font-family);
215
215
  --font-weight: var(--hop-Text-md-font-weight);
216
216
  --line-height: var(--hop-Text-md-line-height);
217
217
  }
218
- :where(.Text-module__hop-Text--lg___RaBlz) {
218
+ :where(.Text-module__hop-Text--lg___iJqjo) {
219
219
  --font-size: var(--hop-Text-lg-font-size);
220
220
  --font-family: var(--hop-Text-lg-font-family);
221
221
  --font-weight: var(--hop-Text-lg-font-weight);
222
222
  --line-height: var(--hop-Text-lg-line-height);
223
223
  }
224
- :where(.Text-module__hop-Text--xl___jBI5K) {
224
+ :where(.Text-module__hop-Text--xl___IU4Uc) {
225
225
  --font-size: var(--hop-Text-xl-font-size);
226
226
  --font-family: var(--hop-Text-xl-font-family);
227
227
  --font-weight: var(--hop-Text-xl-font-weight);
228
228
  --line-height: var(--hop-Text-xl-line-height);
229
229
  }
230
- :where(.Text-module__hop-Text--2xl___jrcN4) {
230
+ :where(.Text-module__hop-Text--2xl___B48R7) {
231
231
  --font-size: var(--hop-Text-2xl-font-size);
232
232
  --font-family: var(--hop-Text-2xl-font-family);
233
233
  --font-weight: var(--hop-Text-2xl-font-weight);
234
234
  --line-height: var(--hop-Text-2xl-line-height);
235
235
  }
236
- :where(.Text-module__hop-Text--inherit___Rc2fv) {
236
+ :where(.Text-module__hop-Text--inherit___KVVuG) {
237
237
  --font-size: var(--hop-Text-inherit-size-font-size);
238
238
  --font-family: var(--hop-Text-inherit-size-font-family);
239
239
  --font-weight: var(--hop-Text-inherit-size-font-weight);
@@ -241,7 +241,7 @@
241
241
  }
242
242
 
243
243
  /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/paragraph/src/Paragraph.module.css/#css-module-data */
244
- .Paragraph-module__hop-Paragraph___AWLqo {
244
+ .Paragraph-module__hop-Paragraph___5eXfe {
245
245
  --hop-Paragraph-xs-margin-bottom: calc(.625rem * .75);
246
246
  --hop-Paragraph-sm-margin-bottom: calc(.75rem * .75);
247
247
  --hop-Paragraph-md-margin-bottom: calc(.875rem * .75);
@@ -253,33 +253,33 @@
253
253
  margin-block-end: var(--margin-block-end);
254
254
  overflow-wrap: break-word;
255
255
  }
256
- .Paragraph-module__hop-Paragraph___AWLqo:last-child {
256
+ .Paragraph-module__hop-Paragraph___5eXfe:last-child {
257
257
  --margin-block-end: 0;
258
258
  }
259
- .Paragraph-module__hop-Paragraph--xs___us82- {
259
+ .Paragraph-module__hop-Paragraph--xs___8HE0r {
260
260
  --margin-block-end: var(--hop-Paragraph-xs-margin-bottom);
261
261
  }
262
- .Paragraph-module__hop-Paragraph--sm___oQXcj {
262
+ .Paragraph-module__hop-Paragraph--sm___3Px67 {
263
263
  --margin-block-end: var(--hop-Paragraph-sm-margin-bottom);
264
264
  }
265
- .Paragraph-module__hop-Paragraph--md___ONjfY {
265
+ .Paragraph-module__hop-Paragraph--md___G2Zu6 {
266
266
  --margin-block-end: var(--hop-Paragraph-md-margin-bottom);
267
267
  }
268
- .Paragraph-module__hop-Paragraph--lg___MwXba {
268
+ .Paragraph-module__hop-Paragraph--lg___8JjcZ {
269
269
  --margin-block-end: var(--hop-Paragraph-lg-margin-bottom);
270
270
  }
271
- .Paragraph-module__hop-Paragraph--xl___G0-ya {
271
+ .Paragraph-module__hop-Paragraph--xl___yloh- {
272
272
  --margin-block-end: var(--hop-Paragraph-xl-margin-bottom);
273
273
  }
274
- .Paragraph-module__hop-Paragraph--2xl___RNqOG {
274
+ .Paragraph-module__hop-Paragraph--2xl___d7pjT {
275
275
  --margin-block-end: var(--hop-Paragraph-2xl-margin-bottom);
276
276
  }
277
- .Paragraph-module__hop-Paragraph--inherit___EaPeU {
277
+ .Paragraph-module__hop-Paragraph--inherit___mHkEn {
278
278
  --margin-block-end: var(--hop-Paragraph-inherit-margin-bottom);
279
279
  }
280
280
 
281
281
  /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/icon-list/src/IconList.module.css/#css-module-data */
282
- .IconList-module__hop-IconList___z6OUy {
282
+ .IconList-module__hop-IconList___F2-OF {
283
283
  --hop-IconList-gap: var(--hop-space-inline-xs);
284
284
  display: flex;
285
285
  flex-wrap: wrap;
@@ -288,7 +288,7 @@
288
288
  }
289
289
 
290
290
  /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/spinner/src/Spinner.module.css/#css-module-data */
291
- @keyframes Spinner-module__spin___SnxzS {
291
+ @keyframes Spinner-module__spin___hJWfc {
292
292
  0% {
293
293
  transform: rotate(0deg);
294
294
  }
@@ -296,7 +296,7 @@
296
296
  transform: rotate(360deg);
297
297
  }
298
298
  }
299
- .Spinner-module__hop-Spinner___Oa3G6 {
299
+ .Spinner-module__hop-Spinner___Pj1aA {
300
300
  --hop-Spinner-border-radius: var(--hop-shape-circle);
301
301
  --hop-Spinner-sm-wheel-size: 1rem;
302
302
  --hop-Spinner-md-wheel-size: 1.25rem;
@@ -304,7 +304,7 @@
304
304
  --hop-Spinner-track-width: 0.125rem;
305
305
  --hop-Spinner-track-opacity: 0.2;
306
306
  --hop-Spinner-track-border: var(--hop-Spinner-track-width) solid currentcolor;
307
- --hop-Spinner-fill-animation: Spinner-module__spin___SnxzS .8s infinite linear;
307
+ --hop-Spinner-fill-animation: Spinner-module__spin___hJWfc .8s infinite linear;
308
308
  --hop-Spinner-fill-animation-reduced-motion-duration: 2s;
309
309
  --hop-Spinner-fill-border: var(--hop-Spinner-track-width) solid transparent;
310
310
  --hop-Spinner-fill-border-inline-start: var(--hop-Spinner-track-width) solid currentcolor;
@@ -315,19 +315,19 @@
315
315
  align-items: center;
316
316
  box-sizing: border-box;
317
317
  }
318
- .Spinner-module__hop-Spinner--sm___0XkYa {
318
+ .Spinner-module__hop-Spinner--sm___FUNC1 {
319
319
  --width: var(--hop-Spinner-sm-wheel-size);
320
320
  --height: var(--hop-Spinner-sm-wheel-size);
321
321
  }
322
- .Spinner-module__hop-Spinner--md___dWYu5 {
322
+ .Spinner-module__hop-Spinner--md___7-Z5Z {
323
323
  --width: var(--hop-Spinner-md-wheel-size);
324
324
  --height: var(--hop-Spinner-md-wheel-size);
325
325
  }
326
- .Spinner-module__hop-Spinner--lg___qpxbh {
326
+ .Spinner-module__hop-Spinner--lg___vVobo {
327
327
  --width: var(--hop-Spinner-lg-wheel-size);
328
328
  --height: var(--hop-Spinner-lg-wheel-size);
329
329
  }
330
- .Spinner-module__hop-Spinner__track___Yntu2 {
330
+ .Spinner-module__hop-Spinner__track___81-D9 {
331
331
  grid-area: spinner;
332
332
  box-sizing: border-box;
333
333
  inline-size: var(--width, var(--hop-Spinner-md-wheel-size));
@@ -336,7 +336,7 @@
336
336
  border: var(--hop-Spinner-track-border);
337
337
  border-radius: var(--hop-Spinner-border-radius);
338
338
  }
339
- .Spinner-module__hop-Spinner__fill___bJDXw {
339
+ .Spinner-module__hop-Spinner__fill___xInfZ {
340
340
  grid-area: spinner;
341
341
  box-sizing: border-box;
342
342
  inline-size: var(--width, var(--hop-Spinner-md-wheel-size));
@@ -347,125 +347,118 @@
347
347
  animation: var(--hop-Spinner-fill-animation);
348
348
  }
349
349
  @media (prefers-reduced-motion: reduce) {
350
- .Spinner-module__hop-Spinner__fill___bJDXw {
350
+ .Spinner-module__hop-Spinner__fill___xInfZ {
351
351
  animation-duration: var(--hop-Spinner-fill-animation-reduced-motion-duration);
352
352
  }
353
353
  }
354
- .Spinner-module__hop-Spinner__label___oVU-P {
354
+ .Spinner-module__hop-Spinner__label___elRWc {
355
355
  grid-area: label;
356
356
  margin-inline-start: var(--hop-Spinner-label-margin-inline-start);
357
357
  }
358
358
 
359
359
  /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/buttons/src/ToggleButton.module.css/#css-module-data */
360
- .ToggleButton-module__hop-ToggleButton___cQggT {
361
- --hop-ToggleButton-border-radius: var(--hop-shape-rounded-md);
362
- --hop-ToggleButton-focus-ring-color: var(--hop-primary-border-focus);
363
- --hop-ToggleButton-column-gap: var(--hop-space-inline-xs);
364
- --hop-ToggleButton-icon-only-column-gap: 0;
365
- --hop-ToggleButton-outline-size: var(--hop-space-20);
366
- --hop-ToggleButton-border-size: var(--hop-space-10);
367
- --hop-ToggleButton-text-underline-offset: var(--hop-space-20);
368
- --hop-ToggleButton-icon-only-padding: 0;
369
- --hop-ToggleButton-sm-height: 2rem;
370
- --hop-ToggleButton-md-height: 2.5rem;
371
- --hop-ToggleButton-sm-padding: 0 var(--hop-space-inset-md);
372
- --hop-ToggleButton-md-padding: 0 var(--hop-space-inset-md);
373
- --hop-ToggleButton-color-disabled: var(--hop-neutral-text-disabled);
374
- --hop-ToggleButton-background-color-disabled: var(--hop-neutral-surface-disabled);
375
- --hop-ToggleButton-border-disabled: var(--hop-ToggleButton-border-size) solid var(--hop-ToggleButton-background-color-disabled);
376
- --hop-ToggleButton-primary-color: var(--hop-primary-text-strong);
377
- --hop-ToggleButton-primary-color-hover: var(--hop-primary-text-strong-hover);
378
- --hop-ToggleButton-primary-color-pressed: var(--hop-primary-text-strong);
379
- --hop-ToggleButton-primary-color-selected: var(--hop-primary-text-selected);
380
- --hop-ToggleButton-primary-background-color: var(--hop-primary-surface-strong);
381
- --hop-ToggleButton-primary-background-color-hover: var(--hop-primary-surface-strong-hover);
382
- --hop-ToggleButton-primary-background-color-pressed: var(--hop-primary-surface-strong-press);
383
- --hop-ToggleButton-primary-background-color-selected: var(--hop-primary-surface-selected);
384
- --hop-ToggleButton-primary-border: var(--hop-ToggleButton-border-size) solid var(--hop-ToggleButton-primary-background-color);
385
- --hop-ToggleButton-primary-border-hover: var(--hop-ToggleButton-border-size) solid var(--hop-ToggleButton-primary-background-color-hover);
386
- --hop-ToggleButton-primary-border-pressed: var(--hop-ToggleButton-border-size) solid var(--hop-ToggleButton-primary-background-color-pressed);
387
- --hop-ToggleButton-primary-border-selected: var(--hop-ToggleButton-border-size) solid var(--hop-primary-border-selected);
388
- --hop-ToggleButton-primary-spinner-color: var(--hop-primary-icon-strong);
389
- --hop-ToggleButton-secondary-color: var(--hop-neutral-text);
390
- --hop-ToggleButton-secondary-color-hover: var(--hop-neutral-text-hover);
391
- --hop-ToggleButton-secondary-color-pressed: var(--hop-neutral-text-press);
392
- --hop-ToggleButton-secondary-color-selected: var(--hop-neutral-text-selected);
393
- --hop-ToggleButton-secondary-background-color: var(--hop-neutral-surface);
394
- --hop-ToggleButton-secondary-background-color-hover: var(--hop-neutral-surface-hover);
395
- --hop-ToggleButton-secondary-background-color-pressed: var(--hop-neutral-surface-press);
396
- --hop-ToggleButton-secondary-background-color-selected: var(--hop-neutral-surface-selected);
397
- --hop-ToggleButton-secondary-border: var(--hop-ToggleButton-border-size) solid var(--hop-neutral-border-strong);
398
- --hop-ToggleButton-secondary-border-hover: var(--hop-ToggleButton-border-size) solid var(--hop-neutral-border-strong-hover);
399
- --hop-ToggleButton-secondary-border-pressed: var(--hop-ToggleButton-border-size) solid var(--hop-neutral-border-strong);
400
- --hop-ToggleButton-secondary-border-selected: var(--hop-ToggleButton-border-size) solid var(--hop-neutral-border-selected);
401
- --hop-ToggleButton-secondary-spinner-color: var(--hop-neutral-icon);
402
- --hop-ToggleButton-upsell-color: var(--hop-upsell-text);
403
- --hop-ToggleButton-upsell-color-hover: var(--hop-upsell-text-hover);
404
- --hop-ToggleButton-upsell-color-pressed: var(--hop-upsell-text-press);
405
- --hop-ToggleButton-upsell-color-selected: var(--hop-upsell-text-selected);
406
- --hop-ToggleButton-upsell-background-color: var(--hop-upsell-surface);
407
- --hop-ToggleButton-upsell-background-color-hover: var(--hop-upsell-surface-hover);
408
- --hop-ToggleButton-upsell-background-color-pressed: var(--hop-upsell-surface-press);
409
- --hop-ToggleButton-upsell-background-color-selected: var(--hop-upsell-surface-selected);
410
- --hop-ToggleButton-upsell-border: var(--hop-ToggleButton-border-size) solid var(--hop-ToggleButton-upsell-background-color);
411
- --hop-ToggleButton-upsell-border-hover: var(--hop-ToggleButton-border-size) solid var(--hop-ToggleButton-upsell-background-color-hover);
412
- --hop-ToggleButton-upsell-border-pressed: var(--hop-ToggleButton-border-size) solid var(--hop-ToggleButton-upsell-background-color-pressed);
413
- --hop-ToggleButton-upsell-border-selected: var(--hop-ToggleButton-border-size) solid var(--hop-upsell-border-selected);
414
- --hop-ToggleButton-upsell-spinner-color: var(--hop-upsell-icon);
415
- --hop-ToggleButton-danger-color: var(--hop-danger-text-strong);
416
- --hop-ToggleButton-danger-color-hover: var(--hop-danger-text-strong-hover);
417
- --hop-ToggleButton-danger-color-pressed: var(--hop-danger-text-strong-hover);
418
- --hop-ToggleButton-danger-color-selected: var(--hop-danger-text-selected);
419
- --hop-ToggleButton-danger-background-color: var(--hop-danger-surface-strong);
420
- --hop-ToggleButton-danger-background-color-hover: var(--hop-danger-surface-strong-hover);
421
- --hop-ToggleButton-danger-background-color-pressed: var(--hop-danger-surface-press);
422
- --hop-ToggleButton-danger-background-color-selected: var(--hop-danger-surface-selected);
423
- --hop-ToggleButton-danger-border: var(--hop-ToggleButton-border-size) solid var(--hop-ToggleButton-danger-background-color);
424
- --hop-ToggleButton-danger-border-hover: var(--hop-ToggleButton-border-size) solid var(--hop-ToggleButton-danger-background-color-hover);
425
- --hop-ToggleButton-danger-border-pressed: var(--hop-ToggleButton-border-size) solid var(--hop-ToggleButton-danger-background-color-pressed);
426
- --hop-ToggleButton-danger-border-selected: var(--hop-ToggleButton-border-size) solid var(--hop-danger-border-selected);
427
- --hop-ToggleButton-danger-spinner-color: var(--hop-primary-icon-strong);
428
- --hop-ToggleButton-ghost-color-disabled: var(--hop-neutral-text-disabled);
429
- --hop-ToggleButton-ghost-background-color-disabled: transparent;
430
- --hop-ToggleButton-ghost-border-disabled: var(--hop-ToggleButton-border-size) solid var(--hop-ToggleButton-ghost-background-color-disabled);
431
- --hop-ToggleButton-ghost-primary-color: var(--hop-primary-text);
432
- --hop-ToggleButton-ghost-primary-color-hover: var(--hop-primary-text-hover);
433
- --hop-ToggleButton-ghost-primary-color-pressed: var(--hop-primary-text-press);
434
- --hop-ToggleButton-ghost-primary-background-color: transparent;
435
- --hop-ToggleButton-ghost-primary-background-color-hover: var(--hop-neutral-surface-hover);
436
- --hop-ToggleButton-ghost-primary-background-color-pressed: var(--hop-primary-surface-weak-press);
437
- --hop-ToggleButton-ghost-primary-border: var(--hop-ToggleButton-border-size) solid var(--hop-ToggleButton-ghost-primary-background-color);
438
- --hop-ToggleButton-ghost-primary-border-hover: var(--hop-ToggleButton-border-size) solid var(--hop-ToggleButton-ghost-primary-background-color-hover);
439
- --hop-ToggleButton-ghost-primary-border-pressed: var(--hop-ToggleButton-border-size) solid var(--hop-ToggleButton-ghost-primary-background-color-pressed);
440
- --hop-ToggleButton-ghost-primary-spinner-color: var(--hop-neutral-icon);
441
- --hop-ToggleButton-ghost-secondary-color: var(--hop-neutral-text-weak);
442
- --hop-ToggleButton-ghost-secondary-color-hover: var(--hop-neutral-text-weak-hover);
443
- --hop-ToggleButton-ghost-secondary-color-pressed: var(--hop-neutral-text-weak-press);
444
- --hop-ToggleButton-ghost-secondary-background-color: transparent;
445
- --hop-ToggleButton-ghost-secondary-background-color-hover: var(--hop-neutral-surface-hover);
446
- --hop-ToggleButton-ghost-secondary-background-color-pressed: var(--hop-neutral-surface-press);
447
- --hop-ToggleButton-ghost-secondary-border: var(--hop-ToggleButton-border-size) solid var(--hop-ToggleButton-ghost-secondary-background-color);
448
- --hop-ToggleButton-ghost-secondary-border-hover: var(--hop-ToggleButton-border-size) solid var(--hop-ToggleButton-ghost-secondary-background-color-hover);
449
- --hop-ToggleButton-ghost-secondary-border-pressed: var(--hop-ToggleButton-border-size) solid var(--hop-ToggleButton-ghost-secondary-background-color-pressed);
450
- --hop-ToggleButton-ghost-secondary-spinner-color: var(--hop-neutral-icon);
451
- --hop-ToggleButton-ghost-danger-color: var(--hop-danger-text-weak);
452
- --hop-ToggleButton-ghost-danger-color-hover: var(--hop-danger-text-hover);
453
- --hop-ToggleButton-ghost-danger-color-pressed: var(--hop-danger-text-press);
454
- --hop-ToggleButton-ghost-danger-background-color: transparent;
455
- --hop-ToggleButton-ghost-danger-background-color-hover: var(--hop-neutral-surface-hover);
456
- --hop-ToggleButton-ghost-danger-background-color-pressed: var(--hop-danger-surface-weak-press);
457
- --hop-ToggleButton-ghost-danger-border: var(--hop-ToggleButton-border-size) solid var(--hop-ToggleButton-ghost-danger-background-color);
458
- --hop-ToggleButton-ghost-danger-border-hover: var(--hop-ToggleButton-border-size) solid var(--hop-ToggleButton-ghost-danger-background-color-hover);
459
- --hop-ToggleButton-ghost-danger-border-pressed: var(--hop-ToggleButton-border-size) solid var(--hop-ToggleButton-ghost-danger-background-color-pressed);
460
- --hop-ToggleButton-ghost-danger-spinner-color: var(--hop-neutral-icon);
360
+ .Button-module__hop-Button___pi420 {
361
+ --hop-Button-border-radius: var(--hop-shape-rounded-md);
362
+ --hop-Button-focus-ring-color: var(--hop-primary-border-focus);
363
+ --hop-Button-column-gap: var(--hop-space-inline-xs);
364
+ --hop-Button-icon-only-column-gap: 0;
365
+ --hop-Button-outline-size: var(--hop-space-20);
366
+ --hop-Button-border-size: var(--hop-space-10);
367
+ --hop-Button-text-underline-offset: var(--hop-space-20);
368
+ --hop-Button-icon-only-padding: 0;
369
+ --hop-Button-xs-height: 1.5rem;
370
+ --hop-Button-sm-height: 2rem;
371
+ --hop-Button-md-height: 2.5rem;
372
+ --hop-Button-xs-padding: 0 var(--hop-space-inset-sm);
373
+ --hop-Button-sm-padding: 0 var(--hop-space-inset-md);
374
+ --hop-Button-md-padding: 0 var(--hop-space-inset-md);
375
+ --hop-Button-ghost-xs-padding: 0 var(--hop-space-inset-xs);
376
+ --hop-Button-ghost-sm-padding: 0 var(--hop-space-inset-xs);
377
+ --hop-Button-ghost-md-padding: 0 var(--hop-space-inset-sm);
378
+ --hop-Button-color-disabled: var(--hop-neutral-text-disabled);
379
+ --hop-Button-background-color-disabled: var(--hop-neutral-surface-disabled);
380
+ --hop-Button-border-disabled: var(--hop-Button-border-size) solid var(--hop-Button-background-color-disabled);
381
+ --hop-Button-ghost-color-disabled: var(--hop-neutral-text-disabled);
382
+ --hop-Button-ghost-background-color-disabled: transparent;
383
+ --hop-Button-ghost-border-disabled: var(--hop-Button-border-size) solid var(--hop-Button-ghost-background-color-disabled);
384
+ --hop-Button-primary-color: var(--hop-primary-text-strong);
385
+ --hop-Button-primary-color-hover: var(--hop-primary-text-strong-hover);
386
+ --hop-Button-primary-color-pressed: var(--hop-primary-text-strong);
387
+ --hop-Button-primary-background-color: var(--hop-primary-surface-strong);
388
+ --hop-Button-primary-background-color-hover: var(--hop-primary-surface-strong-hover);
389
+ --hop-Button-primary-background-color-pressed: var(--hop-primary-surface-strong-press);
390
+ --hop-Button-primary-border: var(--hop-Button-border-size) solid var(--hop-Button-primary-background-color);
391
+ --hop-Button-primary-border-hover: var(--hop-Button-border-size) solid var(--hop-Button-primary-background-color-hover);
392
+ --hop-Button-primary-border-pressed: var(--hop-Button-border-size) solid var(--hop-Button-primary-background-color-pressed);
393
+ --hop-Button-primary-spinner-color: var(--hop-primary-icon-strong);
394
+ --hop-Button-secondary-color: var(--hop-neutral-text);
395
+ --hop-Button-secondary-color-hover: var(--hop-neutral-text-hover);
396
+ --hop-Button-secondary-color-pressed: var(--hop-neutral-text-press);
397
+ --hop-Button-secondary-background-color: var(--hop-neutral-surface);
398
+ --hop-Button-secondary-background-color-hover: var(--hop-neutral-surface-hover);
399
+ --hop-Button-secondary-background-color-pressed: var(--hop-neutral-surface-press);
400
+ --hop-Button-secondary-border: var(--hop-Button-border-size) solid var(--hop-neutral-border-strong);
401
+ --hop-Button-secondary-border-hover: var(--hop-Button-border-size) solid var(--hop-neutral-border-strong-hover);
402
+ --hop-Button-secondary-border-pressed: var(--hop-Button-border-size) solid var(--hop-neutral-border-strong);
403
+ --hop-Button-secondary-spinner-color: var(--hop-neutral-icon);
404
+ --hop-Button-upsell-color: var(--hop-upsell-text);
405
+ --hop-Button-upsell-color-hover: var(--hop-upsell-text-hover);
406
+ --hop-Button-upsell-color-pressed: var(--hop-upsell-text-press);
407
+ --hop-Button-upsell-background-color: var(--hop-upsell-surface);
408
+ --hop-Button-upsell-background-color-hover: var(--hop-upsell-surface-hover);
409
+ --hop-Button-upsell-background-color-pressed: var(--hop-upsell-surface-press);
410
+ --hop-Button-upsell-border: var(--hop-Button-border-size) solid var(--hop-Button-upsell-background-color);
411
+ --hop-Button-upsell-border-hover: var(--hop-Button-border-size) solid var(--hop-Button-upsell-background-color-hover);
412
+ --hop-Button-upsell-border-pressed: var(--hop-Button-border-size) solid var(--hop-Button-upsell-background-color-pressed);
413
+ --hop-Button-upsell-spinner-color: var(--hop-upsell-icon);
414
+ --hop-Button-danger-color: var(--hop-danger-text-strong);
415
+ --hop-Button-danger-color-hover: var(--hop-danger-text-strong-hover);
416
+ --hop-Button-danger-color-pressed: var(--hop-danger-text-strong-hover);
417
+ --hop-Button-danger-background-color: var(--hop-danger-surface-strong);
418
+ --hop-Button-danger-background-color-hover: var(--hop-danger-surface-strong-hover);
419
+ --hop-Button-danger-background-color-pressed: var(--hop-danger-surface-press);
420
+ --hop-Button-danger-border: var(--hop-Button-border-size) solid var(--hop-Button-danger-background-color);
421
+ --hop-Button-danger-border-hover: var(--hop-Button-border-size) solid var(--hop-Button-danger-background-color-hover);
422
+ --hop-Button-danger-border-pressed: var(--hop-Button-border-size) solid var(--hop-Button-danger-background-color-pressed);
423
+ --hop-Button-danger-spinner-color: var(--hop-primary-icon-strong);
424
+ --hop-Button-ghost-primary-color: var(--hop-primary-text);
425
+ --hop-Button-ghost-primary-color-hover: var(--hop-primary-text-hover);
426
+ --hop-Button-ghost-primary-color-pressed: var(--hop-primary-text-press);
427
+ --hop-Button-ghost-primary-background-color: transparent;
428
+ --hop-Button-ghost-primary-background-color-hover: var(--hop-neutral-surface-hover);
429
+ --hop-Button-ghost-primary-background-color-pressed: var(--hop-primary-surface-weak-press);
430
+ --hop-Button-ghost-primary-border: var(--hop-Button-border-size) solid var(--hop-Button-ghost-primary-background-color);
431
+ --hop-Button-ghost-primary-border-hover: var(--hop-Button-border-size) solid var(--hop-Button-ghost-primary-background-color-hover);
432
+ --hop-Button-ghost-primary-border-pressed: var(--hop-Button-border-size) solid var(--hop-Button-ghost-primary-background-color-pressed);
433
+ --hop-Button-ghost-primary-spinner-color: var(--hop-neutral-icon);
434
+ --hop-Button-ghost-secondary-color: var(--hop-neutral-text-weak);
435
+ --hop-Button-ghost-secondary-color-hover: var(--hop-neutral-text-weak-hover);
436
+ --hop-Button-ghost-secondary-color-pressed: var(--hop-neutral-text-weak-press);
437
+ --hop-Button-ghost-secondary-background-color: transparent;
438
+ --hop-Button-ghost-secondary-background-color-hover: var(--hop-neutral-surface-hover);
439
+ --hop-Button-ghost-secondary-background-color-pressed: var(--hop-neutral-surface-press);
440
+ --hop-Button-ghost-secondary-border: var(--hop-Button-border-size) solid var(--hop-Button-ghost-secondary-background-color);
441
+ --hop-Button-ghost-secondary-border-hover: var(--hop-Button-border-size) solid var(--hop-Button-ghost-secondary-background-color-hover);
442
+ --hop-Button-ghost-secondary-border-pressed: var(--hop-Button-border-size) solid var(--hop-Button-ghost-secondary-background-color-pressed);
443
+ --hop-Button-ghost-secondary-spinner-color: var(--hop-neutral-icon);
444
+ --hop-Button-ghost-danger-color: var(--hop-danger-text-weak);
445
+ --hop-Button-ghost-danger-color-hover: var(--hop-danger-text-hover);
446
+ --hop-Button-ghost-danger-color-pressed: var(--hop-danger-text-press);
447
+ --hop-Button-ghost-danger-background-color: transparent;
448
+ --hop-Button-ghost-danger-background-color-hover: var(--hop-neutral-surface-hover);
449
+ --hop-Button-ghost-danger-background-color-pressed: var(--hop-danger-surface-weak-press);
450
+ --hop-Button-ghost-danger-border: var(--hop-Button-border-size) solid var(--hop-Button-ghost-danger-background-color);
451
+ --hop-Button-ghost-danger-border-hover: var(--hop-Button-border-size) solid var(--hop-Button-ghost-danger-background-color-hover);
452
+ --hop-Button-ghost-danger-border-pressed: var(--hop-Button-border-size) solid var(--hop-Button-ghost-danger-background-color-pressed);
453
+ --hop-Button-ghost-danger-spinner-color: var(--hop-neutral-icon);
461
454
  --inline-size: max-content;
462
- --block-size: var(--hop-ToggleButton-md-height);
455
+ --block-size: var(--hop-Button-md-height);
463
456
  --background-color: var(--hop-primary-surface-strong);
464
457
  --color: var(--hop-primary-text-strong);
465
- --column-gap: var(--hop-ToggleButton-column-gap);
458
+ --column-gap: var(--hop-Button-column-gap);
466
459
  --spinner: var(--hop-primary-icon-strong);
467
460
  --border: 0;
468
- --padding: var(--hop-ToggleButton-md-padding);
461
+ --padding: var(--hop-Button-md-padding);
469
462
  --text-underline: none;
470
463
  cursor: pointer;
471
464
  position: relative;
@@ -483,247 +476,409 @@
483
476
  white-space: nowrap;
484
477
  background-color: var(--background-color);
485
478
  border: var(--border);
486
- border-radius: var(--hop-ToggleButton-border-radius);
479
+ border-radius: var(--hop-Button-border-radius);
487
480
  outline: none;
488
- outline-offset: var(--hop-ToggleButton-outline-size);
481
+ outline-offset: var(--hop-Button-outline-size);
489
482
  transition:
490
483
  color var(--hop-easing-duration-2) var(--hop-easing-productive),
491
484
  background-color var(--hop-easing-duration-2) var(--hop-easing-productive),
492
485
  border var(--hop-easing-duration-2) var(--hop-easing-productive);
493
486
  }
494
- .ToggleButton-module__hop-ToggleButton--fluid___rl9FX {
487
+ .Button-module__hop-Button--fluid___Ool8- {
495
488
  --inline-size: 100%;
496
489
  }
497
- .ToggleButton-module__hop-ToggleButton--sm___-x-OZ {
498
- --block-size: var(--hop-ToggleButton-sm-height);
499
- --padding: var(--hop-ToggleButton-sm-padding);
490
+ .Button-module__hop-Button--xs___-XuKf {
491
+ --block-size: var(--hop-Button-xs-height);
492
+ --padding: var(--hop-Button-xs-padding);
493
+ }
494
+ .Button-module__hop-Button--xs___-XuKf[class*=--ghost] {
495
+ --padding: var(--hop-Button-ghost-xs-padding);
496
+ }
497
+ .Button-module__hop-Button--sm___-RNK5 {
498
+ --block-size: var(--hop-Button-sm-height);
499
+ --padding: var(--hop-Button-sm-padding);
500
500
  }
501
- .ToggleButton-module__hop-ToggleButton--icon-only___W2v-S {
502
- --column-gap: var(--hop-ToggleButton-icon-only-column-gap);
503
- --padding: var(--hop-ToggleButton-icon-only-padding);
501
+ .Button-module__hop-Button--sm___-RNK5[class*=--ghost] {
502
+ --padding: var(--hop-Button-ghost-sm-padding);
503
+ }
504
+ .Button-module__hop-Button--md___4-osd[class*=--ghost] {
505
+ --padding: var(--hop-Button-ghost-md-padding);
506
+ }
507
+ .Button-module__hop-Button--icon-only___OzV1R {
508
+ --column-gap: var(--hop-Button-icon-only-column-gap);
509
+ --padding: var(--hop-Button-icon-only-padding);
504
510
  aspect-ratio: 1;
505
511
  }
506
- .ToggleButton-module__hop-ToggleButton--primary___-CkAf {
507
- --background-color: var(--hop-ToggleButton-primary-background-color);
508
- --color: var(--hop-ToggleButton-primary-color);
509
- --border: var(--hop-ToggleButton-primary-border);
510
- --spinner-color: var(--hop-ToggleButton-primary-spinner-color);
512
+ .Button-module__hop-Button--primary___aX9Xf {
513
+ --background-color: var(--hop-Button-primary-background-color);
514
+ --color: var(--hop-Button-primary-color);
515
+ --border: var(--hop-Button-primary-border);
516
+ --spinner-color: var(--hop-Button-primary-spinner-color);
517
+ }
518
+ .Button-module__hop-Button--primary___aX9Xf[data-hovered],
519
+ .Button-module__hop-Button--primary___aX9Xf[data-focus-visible] {
520
+ --background-color: var(--hop-Button-primary-background-color-hover);
521
+ --color: var(--hop-Button-primary-color-hover);
522
+ --border: var(--hop-Button-primary-border-hover);
523
+ }
524
+ .Button-module__hop-Button--primary___aX9Xf[data-pressed] {
525
+ --background-color: var(--hop-Button-primary-background-color-pressed);
526
+ --color: var(--hop-Button-primary-color-pressed);
527
+ --border: var(--hop-Button-primary-border-pressed);
528
+ }
529
+ .Button-module__hop-Button--secondary___1I0Vr {
530
+ --background-color: var(--hop-Button-secondary-background-color);
531
+ --color: var(--hop-Button-secondary-color);
532
+ --border: var(--hop-Button-secondary-border);
533
+ --spinner-color: var(--hop-Button-secondary-spinner-color);
534
+ }
535
+ .Button-module__hop-Button--secondary___1I0Vr[data-hovered],
536
+ .Button-module__hop-Button--secondary___1I0Vr[data-focus-visible] {
537
+ --background-color: var(--hop-Button-secondary-background-color-hover);
538
+ --color: var(--hop-Button-secondary-color-hover);
539
+ --border: var(--hop-Button-secondary-border-hover);
540
+ }
541
+ .Button-module__hop-Button--secondary___1I0Vr[data-pressed] {
542
+ --background-color: var(--hop-Button-secondary-background-color-pressed);
543
+ --color: var(--hop-Button-secondary-color-pressed);
544
+ --border: var(--hop-Button-secondary-border-pressed);
545
+ }
546
+ .Button-module__hop-Button--upsell___NvVOn {
547
+ --background-color: var(--hop-Button-upsell-background-color);
548
+ --color: var(--hop-Button-upsell-color);
549
+ --border: var(--hop-Button-upsell-border);
550
+ --spinner-color: var(--hop-Button-upsell-spinner-color);
551
+ }
552
+ .Button-module__hop-Button--upsell___NvVOn[data-hovered],
553
+ .Button-module__hop-Button--upsell___NvVOn[data-focus-visible] {
554
+ --background-color: var(--hop-Button-upsell-background-color-hover);
555
+ --color: var(--hop-Button-upsell-color-hover);
556
+ --border: var(--hop-Button-upsell-border-hover);
557
+ }
558
+ .Button-module__hop-Button--upsell___NvVOn[data-pressed] {
559
+ --background-color: var(--hop-Button-upsell-background-color-pressed);
560
+ --color: var(--hop-Button-upsell-color-pressed);
561
+ --border: var(--hop-Button-upsell-border-pressed);
562
+ }
563
+ .Button-module__hop-Button--danger___YkZ1u {
564
+ --background-color: var(--hop-Button-danger-background-color);
565
+ --color: var(--hop-Button-danger-color);
566
+ --border: var(--hop-Button-danger-border);
567
+ --spinner-color: var(--hop-Button-danger-spinner-color);
568
+ }
569
+ .Button-module__hop-Button--danger___YkZ1u[data-hovered],
570
+ .Button-module__hop-Button--danger___YkZ1u[data-focus-visible] {
571
+ --background-color: var(--hop-Button-danger-background-color-hover);
572
+ --color: var(--hop-Button-danger-color-hover);
573
+ --border: var(--hop-Button-danger-border-hover);
574
+ }
575
+ .Button-module__hop-Button--danger___YkZ1u[data-pressed] {
576
+ --background-color: var(--hop-Button-danger-background-color-pressed);
577
+ --color: var(--hop-Button-danger-color-pressed);
578
+ --border: var(--hop-Button-danger-border-pressed);
579
+ }
580
+ .Button-module__hop-Button--ghost-primary___RJdkS {
581
+ --background-color: var(--hop-Button-ghost-primary-background-color);
582
+ --color: var(--hop-Button-ghost-primary-color);
583
+ --border: var(--hop-Button-ghost-primary-border);
584
+ --spinner-color: var(--hop-Button-ghost-primary-spinner-color);
585
+ }
586
+ .Button-module__hop-Button--ghost-primary___RJdkS[data-hovered],
587
+ .Button-module__hop-Button--ghost-primary___RJdkS[data-focus-visible] {
588
+ --background-color: var(--hop-Button-ghost-primary-background-color-hover);
589
+ --color: var(--hop-Button-ghost-primary-color-hover);
590
+ --border: var(--hop-Button-ghost-primary-border-hover);
591
+ --text-underline: underline;
511
592
  }
512
- .ToggleButton-module__hop-ToggleButton--primary___-CkAf[data-hovered],
513
- .ToggleButton-module__hop-ToggleButton--primary___-CkAf[data-focus-visible] {
514
- --background-color: var(--hop-ToggleButton-primary-background-color-hover);
515
- --color: var(--hop-ToggleButton-primary-color-hover);
516
- --border: var(--hop-ToggleButton-primary-border-hover);
593
+ .Button-module__hop-Button--ghost-primary___RJdkS[data-pressed] {
594
+ --background-color: var(--hop-Button-ghost-primary-background-color-pressed);
595
+ --color: var(--hop-Button-ghost-primary-color-pressed);
596
+ --border: var(--hop-Button-ghost-primary-border-pressed);
597
+ --text-underline: underline;
517
598
  }
518
- .ToggleButton-module__hop-ToggleButton--primary___-CkAf[data-pressed] {
519
- --background-color: var(--hop-ToggleButton-primary-background-color-pressed);
520
- --color: var(--hop-ToggleButton-primary-color-pressed);
521
- --border: var(--hop-ToggleButton-primary-border-pressed);
599
+ .Button-module__hop-Button--ghost-secondary___1NLPo {
600
+ --background-color: var(--hop-Button-ghost-secondary-background-color);
601
+ --color: var(--hop-Button-ghost-secondary-color);
602
+ --border: var(--hop-Button-ghost-secondary-border);
603
+ --spinner-color: var(--hop-Button-ghost-secondary-spinner-color);
604
+ }
605
+ .Button-module__hop-Button--ghost-secondary___1NLPo[data-hovered],
606
+ .Button-module__hop-Button--ghost-secondary___1NLPo[data-focus-visible] {
607
+ --background-color: var(--hop-Button-ghost-secondary-background-color-hover);
608
+ --color: var(--hop-Button-ghost-secondary-color-hover);
609
+ --border: var(--hop-Button-ghost-secondary-border-hover);
610
+ --text-underline: underline;
522
611
  }
523
- .ToggleButton-module__hop-ToggleButton--primary___-CkAf[data-selected] {
524
- --background-color: var(--hop-ToggleButton-primary-background-color-selected);
525
- --color: var(--hop-ToggleButton-primary-color-selected);
526
- --border: var(--hop-ToggleButton-primary-border-selected);
612
+ .Button-module__hop-Button--ghost-secondary___1NLPo[data-pressed] {
613
+ --background-color: var(--hop-Button-ghost-secondary-background-color-pressed);
614
+ --color: var(--hop-Button-ghost-secondary-color-pressed);
615
+ --border: var(--hop-Button-ghost-secondary-border-pressed);
616
+ --text-underline: underline;
527
617
  }
528
- .ToggleButton-module__hop-ToggleButton--secondary___pw82S {
529
- --background-color: var(--hop-ToggleButton-secondary-background-color);
530
- --color: var(--hop-ToggleButton-secondary-color);
531
- --border: var(--hop-ToggleButton-secondary-border);
532
- --spinner-color: var(--hop-ToggleButton-secondary-spinner-color);
618
+ .Button-module__hop-Button--ghost-danger___mDGly {
619
+ --background-color: var(--hop-Button-ghost-danger-background-color);
620
+ --color: var(--hop-Button-ghost-danger-color);
621
+ --border: var(--hop-Button-ghost-danger-border);
622
+ --spinner-color: var(--hop-Button-ghost-danger-spinner-color);
623
+ }
624
+ .Button-module__hop-Button--ghost-danger___mDGly[data-hovered],
625
+ .Button-module__hop-Button--ghost-danger___mDGly[data-focus-visible] {
626
+ --background-color: var(--hop-Button-ghost-danger-background-color-hover);
627
+ --color: var(--hop-Button-ghost-danger-color-hover);
628
+ --border: var(--hop-Button-ghost-danger-border-hover);
629
+ --text-underline: underline;
533
630
  }
534
- .ToggleButton-module__hop-ToggleButton--secondary___pw82S[data-hovered],
535
- .ToggleButton-module__hop-ToggleButton--secondary___pw82S[data-focus-visible] {
536
- --background-color: var(--hop-ToggleButton-secondary-background-color-hover);
537
- --color: var(--hop-ToggleButton-secondary-color-hover);
538
- --border: var(--hop-ToggleButton-secondary-border-hover);
631
+ .Button-module__hop-Button--ghost-danger___mDGly[data-pressed] {
632
+ --background-color: var(--hop-Button-ghost-danger-background-color-pressed);
633
+ --color: var(--hop-Button-ghost-danger-color-pressed);
634
+ --border: var(--hop-Button-ghost-danger-border-pressed);
635
+ --text-underline: underline;
539
636
  }
540
- .ToggleButton-module__hop-ToggleButton--secondary___pw82S[data-pressed] {
541
- --background-color: var(--hop-ToggleButton-secondary-background-color-pressed);
542
- --color: var(--hop-ToggleButton-secondary-color-pressed);
543
- --border: var(--hop-ToggleButton-secondary-border-pressed);
637
+ .Button-module__hop-Button___pi420[data-focus-visible] {
638
+ outline: var(--hop-Button-outline-size) solid var(--hop-Button-focus-ring-color);
544
639
  }
545
- .ToggleButton-module__hop-ToggleButton--secondary___pw82S[data-selected] {
546
- --background-color: var(--hop-ToggleButton-secondary-background-color-selected);
547
- --color: var(--hop-ToggleButton-secondary-color-selected);
548
- --border: var(--hop-ToggleButton-secondary-border-selected);
640
+ .Button-module__hop-Button___pi420[data-disabled],
641
+ .Button-module__hop-Button--loading___as6iI {
642
+ cursor: not-allowed;
549
643
  }
550
- .ToggleButton-module__hop-ToggleButton--upsell___Y7PyT {
551
- --background-color: var(--hop-ToggleButton-upsell-background-color);
552
- --color: var(--hop-ToggleButton-upsell-color);
553
- --border: var(--hop-ToggleButton-upsell-border);
554
- --spinner-color: var(--hop-ToggleButton-upsell-spinner-color);
644
+ .Button-module__hop-Button___pi420[data-disabled] {
645
+ --background-color: var(--hop-Button-background-color-disabled);
646
+ --color: var(--hop-Button-color-disabled);
647
+ --border: var(--hop-Button-border-disabled);
648
+ }
649
+ .Button-module__hop-Button___pi420[class*=--ghost][data-disabled] {
650
+ --background-color: var(--hop-Button-ghost-background-color-disabled);
651
+ --color: var(--hop-Button-ghost-color-disabled);
652
+ --border: var(--hop-Button-ghost-border-disabled);
653
+ }
654
+ .Button-module__hop-Button--loading___as6iI.Button-module__hop-Button--primary___aX9Xf {
655
+ --background-color: var(--hop-Button-primary-background-color);
656
+ --color: var(--hop-Button-primary-color);
657
+ --border: var(--hop-Button-primary-border);
658
+ }
659
+ .Button-module__hop-Button--loading___as6iI.Button-module__hop-Button--secondary___1I0Vr {
660
+ --background-color: var(--hop-Button-secondary-background-color);
661
+ --color: var(--hop-Button-secondary-color);
662
+ --border: var(--hop-Button-secondary-border);
663
+ }
664
+ .Button-module__hop-Button--loading___as6iI.Button-module__hop-Button--upsell___NvVOn {
665
+ --background-color: var(--hop-Button-upsell-background-color);
666
+ --color: var(--hop-Button-upsell-color);
667
+ --border: var(--hop-Button-upsell-border);
668
+ }
669
+ .Button-module__hop-Button--loading___as6iI.Button-module__hop-Button--danger___YkZ1u {
670
+ --background-color: var(--hop-Button-danger-background-color);
671
+ --color: var(--hop-Button-danger-color);
672
+ --border: var(--hop-Button-danger-border);
673
+ }
674
+ .Button-module__hop-Button--loading___as6iI.Button-module__hop-Button--ghost-primary___RJdkS {
675
+ --background-color: var(--hop-Button-ghost-primary-background-color);
676
+ --color: var(--hop-Button-ghost-primary-color);
677
+ --border: var(--hop-Button-ghost-primary-border);
678
+ --text-underline: none;
555
679
  }
556
- .ToggleButton-module__hop-ToggleButton--upsell___Y7PyT[data-hovered],
557
- .ToggleButton-module__hop-ToggleButton--upsell___Y7PyT[data-focus-visible] {
558
- --background-color: var(--hop-ToggleButton-upsell-background-color-hover);
559
- --color: var(--hop-ToggleButton-upsell-color-hover);
560
- --border: var(--hop-ToggleButton-upsell-border-hover);
680
+ .Button-module__hop-Button--loading___as6iI.Button-module__hop-Button--ghost-secondary___1NLPo {
681
+ --background-color: var(--hop-Button-ghost-secondary-background-color);
682
+ --color: var(--hop-Button-ghost-secondary-color);
683
+ --border: var(--hop-Button-ghost-secondary-border);
684
+ --text-underline: none;
561
685
  }
562
- .ToggleButton-module__hop-ToggleButton--upsell___Y7PyT[data-pressed] {
563
- --background-color: var(--hop-ToggleButton-upsell-background-color-pressed);
564
- --color: var(--hop-ToggleButton-upsell-color-pressed);
565
- --border: var(--hop-ToggleButton-upsell-border-pressed);
686
+ .Button-module__hop-Button--loading___as6iI.Button-module__hop-Button--ghost-danger___mDGly {
687
+ --background-color: var(--hop-Button-ghost-danger-background-color);
688
+ --color: var(--hop-Button-ghost-danger-color);
689
+ --border: var(--hop-Button-ghost-danger-border);
690
+ --text-underline: none;
566
691
  }
567
- .ToggleButton-module__hop-ToggleButton--upsell___Y7PyT[data-selected] {
568
- --background-color: var(--hop-ToggleButton-upsell-background-color-selected);
569
- --color: var(--hop-ToggleButton-upsell-color-selected);
570
- --border: var(--hop-ToggleButton-upsell-border-selected);
692
+ .Button-module__hop-Button__Spinner___CYr30 {
693
+ position: absolute;
694
+ color: var(--spinner-color);
571
695
  }
572
- .ToggleButton-module__hop-ToggleButton--danger___ia5G7 {
573
- --background-color: var(--hop-ToggleButton-danger-background-color);
574
- --color: var(--hop-ToggleButton-danger-color);
575
- --border: var(--hop-ToggleButton-danger-border);
576
- --spinner-color: var(--hop-ToggleButton-danger-spinner-color);
696
+ .Button-module__hop-Button__icon___T9Jgx,
697
+ .Button-module__hop-Button__icon-list___ED0mS {
698
+ flex: 0 0 auto;
699
+ justify-self: end;
700
+ order: 1;
577
701
  }
578
- .ToggleButton-module__hop-ToggleButton--danger___ia5G7[data-hovered],
579
- .ToggleButton-module__hop-ToggleButton--danger___ia5G7[data-focus-visible] {
580
- --background-color: var(--hop-ToggleButton-danger-background-color-hover);
581
- --color: var(--hop-ToggleButton-danger-color-hover);
582
- --border: var(--hop-ToggleButton-danger-border-hover);
702
+ .Button-module__hop-Button__text___K8N7h {
703
+ user-select: none;
704
+ overflow: visible;
705
+ flex: 0 1 auto;
706
+ order: 2;
707
+ font-weight: var(--hop-font-weight-505);
708
+ text-decoration: var(--text-underline);
709
+ text-underline-offset: 0.125rem;
710
+ text-wrap: nowrap;
583
711
  }
584
- .ToggleButton-module__hop-ToggleButton--danger___ia5G7[data-pressed] {
585
- --background-color: var(--hop-ToggleButton-danger-background-color-pressed);
586
- --color: var(--hop-ToggleButton-danger-color-pressed);
587
- --border: var(--hop-ToggleButton-danger-border-pressed);
712
+ .Button-module__hop-Button__end-icon___2motE,
713
+ .Button-module__hop-Button__end-icon-list___IoU7E {
714
+ flex: 0 0 auto;
715
+ order: 3;
588
716
  }
589
- .ToggleButton-module__hop-ToggleButton--danger___ia5G7[data-selected] {
590
- --background-color: var(--hop-ToggleButton-danger-background-color-selected);
591
- --color: var(--hop-ToggleButton-danger-color-selected);
592
- --border: var(--hop-ToggleButton-danger-border-selected);
717
+ .Button-module__hop-Button___pi420 .Button-module__hop-Button__icon-list___ED0mS,
718
+ .Button-module__hop-Button___pi420 .Button-module__hop-Button__end-icon-list___IoU7E {
719
+ flex-wrap: nowrap;
593
720
  }
594
- .ToggleButton-module__hop-ToggleButton--ghost-primary___-Rc5u {
595
- --background-color: var(--hop-ToggleButton-ghost-primary-background-color);
596
- --color: var(--hop-ToggleButton-ghost-primary-color);
597
- --border: var(--hop-ToggleButton-ghost-primary-border);
598
- --spinner-color: var(--hop-ToggleButton-ghost-primary-spinner-color);
721
+ .Button-module__hop-Button--loading___as6iI.Button-module__hop-Button___pi420 > *:not(.Button-module__hop-Button__Spinner___CYr30) {
722
+ opacity: 0;
599
723
  }
600
- .ToggleButton-module__hop-ToggleButton--ghost-primary___-Rc5u[data-hovered],
601
- .ToggleButton-module__hop-ToggleButton--ghost-primary___-Rc5u[data-focus-visible] {
602
- --background-color: var(--hop-ToggleButton-ghost-primary-background-color-hover);
603
- --color: var(--hop-ToggleButton-ghost-primary-color-hover);
604
- --border: var(--hop-ToggleButton-ghost-primary-border-hover);
605
- --text-underline: underline;
724
+ .ToggleButton-module__hop-ToggleButton___7uOg3 {
725
+ --hop-ToggleButton-border-size: var(--hop-space-10);
726
+ --hop-ToggleButton-primary-color: var(--hop-primary-text-strong);
727
+ --hop-ToggleButton-primary-background-color: var(--hop-primary-surface-strong);
728
+ --hop-ToggleButton-primary-border: var(--hop-ToggleButton-border-size) solid var(--hop-ToggleButton-primary-background-color);
729
+ --hop-ToggleButton-primary-color-selected: var(--hop-primary-text-selected);
730
+ --hop-ToggleButton-primary-background-color-selected: var(--hop-primary-surface-selected);
731
+ --hop-ToggleButton-primary-border-selected: var(--hop-ToggleButton-border-size) solid var(--hop-primary-border-selected);
732
+ --hop-ToggleButton-secondary-color: var(--hop-neutral-text);
733
+ --hop-ToggleButton-secondary-background-color: var(--hop-neutral-surface);
734
+ --hop-ToggleButton-secondary-border: var(--hop-ToggleButton-border-size) solid var(--hop-neutral-border-strong);
735
+ --hop-ToggleButton-secondary-color-selected: var(--hop-neutral-text-selected);
736
+ --hop-ToggleButton-secondary-background-color-selected: var(--hop-neutral-surface-selected);
737
+ --hop-ToggleButton-secondary-border-selected: var(--hop-ToggleButton-border-size) solid var(--hop-neutral-border-selected);
738
+ --hop-ToggleButton-upsell-color: var(--hop-upsell-text);
739
+ --hop-ToggleButton-upsell-background-color: var(--hop-upsell-surface);
740
+ --hop-ToggleButton-upsell-border: var(--hop-ToggleButton-border-size) solid var(--hop-ToggleButton-upsell-background-color);
741
+ --hop-ToggleButton-upsell-color-selected: var(--hop-upsell-text-selected);
742
+ --hop-ToggleButton-upsell-background-color-selected: var(--hop-upsell-surface-selected);
743
+ --hop-ToggleButton-upsell-border-selected: var(--hop-ToggleButton-border-size) solid var(--hop-upsell-border-selected);
744
+ --hop-ToggleButton-danger-color: var(--hop-danger-text-strong);
745
+ --hop-ToggleButton-danger-background-color: var(--hop-danger-surface-strong);
746
+ --hop-ToggleButton-danger-border: var(--hop-ToggleButton-border-size) solid var(--hop-ToggleButton-danger-background-color);
747
+ --hop-ToggleButton-danger-color-selected: var(--hop-danger-text-selected);
748
+ --hop-ToggleButton-danger-background-color-selected: var(--hop-danger-surface-selected);
749
+ --hop-ToggleButton-danger-border-selected: var(--hop-ToggleButton-border-size) solid var(--hop-danger-border-selected);
750
+ --hop-ToggleButton-ghost-primary-color: var(--hop-primary-text);
751
+ --hop-ToggleButton-ghost-primary-background-color: transparent;
752
+ --hop-ToggleButton-ghost-primary-border: var(--hop-ToggleButton-border-size) solid var(--hop-ToggleButton-ghost-primary-background-color);
753
+ --hop-ToggleButton-ghost-primary-color-selected: var(--hop-primary-text-press);
754
+ --hop-ToggleButton-ghost-primary-background-color-selected: var(--hop-primary-surface-weak-press);
755
+ --hop-ToggleButton-ghost-primary-border-selected: var(--hop-ToggleButton-border-size) solid var(--hop-ToggleButton-ghost-primary-background-color-selected);
756
+ --hop-ToggleButton-ghost-secondary-color: var(--hop-neutral-text-weak);
757
+ --hop-ToggleButton-ghost-secondary-background-color: transparent;
758
+ --hop-ToggleButton-ghost-secondary-border: var(--hop-ToggleButton-border-size) solid var(--hop-ToggleButton-ghost-secondary-background-color);
759
+ --hop-ToggleButton-ghost-secondary-color-selected: var(--hop-neutral-text-weak-press);
760
+ --hop-ToggleButton-ghost-secondary-background-color-selected: var(--hop-neutral-surface-press);
761
+ --hop-ToggleButton-ghost-secondary-border-selected: var(--hop-ToggleButton-border-size) solid var(--hop-ToggleButton-ghost-secondary-background-color-selected);
762
+ --hop-ToggleButton-ghost-danger-color: var(--hop-danger-text-weak);
763
+ --hop-ToggleButton-ghost-danger-background-color: transparent;
764
+ --hop-ToggleButton-ghost-danger-border: var(--hop-ToggleButton-border-size) solid var(--hop-ToggleButton-ghost-danger-background-color);
765
+ --hop-ToggleButton-ghost-danger-color-selected: var(--hop-danger-text-press);
766
+ --hop-ToggleButton-ghost-danger-background-color-selected: var(--hop-danger-surface-weak-press);
767
+ --hop-ToggleButton-ghost-danger-border-selected: var(--hop-ToggleButton-border-size) solid var(--hop-ToggleButton-ghost-danger-background-color-selected);
606
768
  }
607
- .ToggleButton-module__hop-ToggleButton--ghost-primary___-Rc5u[data-pressed],
608
- .ToggleButton-module__hop-ToggleButton--ghost-primary___-Rc5u[data-selected] {
609
- --background-color: var(--hop-ToggleButton-ghost-primary-background-color-pressed);
610
- --color: var(--hop-ToggleButton-ghost-primary-color-pressed);
611
- --border: var(--hop-ToggleButton-ghost-primary-border-pressed);
769
+ .ToggleButton-module__hop-ToggleButton--fluid___dGmQY {
612
770
  }
613
- .ToggleButton-module__hop-ToggleButton--ghost-primary___-Rc5u[data-pressed] {
614
- --text-underline: underline;
771
+ .ToggleButton-module__hop-ToggleButton--xs___-Pwsh {
615
772
  }
616
- .ToggleButton-module__hop-ToggleButton--ghost-secondary___V3f-d {
617
- --background-color: var(--hop-ToggleButton-ghost-secondary-background-color);
618
- --color: var(--hop-ToggleButton-ghost-secondary-color);
619
- --border: var(--hop-ToggleButton-ghost-secondary-border);
620
- --spinner-color: var(--hop-ToggleButton-ghost-secondary-spinner-color);
773
+ .ToggleButton-module__hop-ToggleButton--sm___rcih7 {
621
774
  }
622
- .ToggleButton-module__hop-ToggleButton--ghost-secondary___V3f-d[data-hovered],
623
- .ToggleButton-module__hop-ToggleButton--ghost-secondary___V3f-d[data-focus-visible] {
624
- --background-color: var(--hop-ToggleButton-ghost-secondary-background-color-hover);
625
- --color: var(--hop-ToggleButton-ghost-secondary-color-hover);
626
- --border: var(--hop-ToggleButton-ghost-secondary-border-hover);
627
- --text-underline: underline;
775
+ .ToggleButton-module__hop-ToggleButton--md___EHY7t {
628
776
  }
629
- .ToggleButton-module__hop-ToggleButton--ghost-secondary___V3f-d[data-pressed],
630
- .ToggleButton-module__hop-ToggleButton--ghost-secondary___V3f-d[data-selected] {
631
- --background-color: var(--hop-ToggleButton-ghost-secondary-background-color-pressed);
632
- --color: var(--hop-ToggleButton-ghost-secondary-color-pressed);
633
- --border: var(--hop-ToggleButton-ghost-secondary-border-pressed);
777
+ .ToggleButton-module__hop-ToggleButton--icon-only___HUyAp {
634
778
  }
635
- .ToggleButton-module__hop-ToggleButton--ghost-secondary___V3f-d[data-pressed] {
636
- --text-underline: underline;
779
+ .ToggleButton-module__hop-ToggleButton--primary___YRmoZ {
637
780
  }
638
- .ToggleButton-module__hop-ToggleButton--ghost-danger___sqLa8 {
639
- --background-color: var(--hop-ToggleButton-ghost-danger-background-color);
640
- --color: var(--hop-ToggleButton-ghost-danger-color);
641
- --border: var(--hop-ToggleButton-ghost-danger-border);
642
- --spinner-color: var(--hop-ToggleButton-ghost-danger-spinner-color);
781
+ .ToggleButton-module__hop-ToggleButton--primary___YRmoZ[data-selected] {
782
+ --background-color: var(--hop-ToggleButton-primary-background-color-selected);
783
+ --color: var(--hop-ToggleButton-primary-color-selected);
784
+ --border: var(--hop-ToggleButton-primary-border-selected);
643
785
  }
644
- .ToggleButton-module__hop-ToggleButton--ghost-danger___sqLa8[data-hovered],
645
- .ToggleButton-module__hop-ToggleButton--ghost-danger___sqLa8[data-focus-visible] {
646
- --background-color: var(--hop-ToggleButton-ghost-danger-background-color-hover);
647
- --color: var(--hop-ToggleButton-ghost-danger-color-hover);
648
- --border: var(--hop-ToggleButton-ghost-danger-border-hover);
649
- --text-underline: underline;
786
+ .ToggleButton-module__hop-ToggleButton--secondary___AMcYW {
650
787
  }
651
- .ToggleButton-module__hop-ToggleButton--ghost-danger___sqLa8[data-pressed],
652
- .ToggleButton-module__hop-ToggleButton--ghost-danger___sqLa8[data-selected] {
653
- --background-color: var(--hop-ToggleButton-ghost-danger-background-color-pressed);
654
- --color: var(--hop-ToggleButton-ghost-danger-color-pressed);
655
- --border: var(--hop-ToggleButton-ghost-danger-border-pressed);
788
+ .ToggleButton-module__hop-ToggleButton--secondary___AMcYW[data-selected] {
789
+ --background-color: var(--hop-ToggleButton-secondary-background-color-selected);
790
+ --color: var(--hop-ToggleButton-secondary-color-selected);
791
+ --border: var(--hop-ToggleButton-secondary-border-selected);
656
792
  }
657
- .ToggleButton-module__hop-ToggleButton--ghost-danger___sqLa8[data-pressed] {
658
- --text-underline: underline;
793
+ .ToggleButton-module__hop-ToggleButton--upsell___31OZm {
794
+ }
795
+ .ToggleButton-module__hop-ToggleButton--upsell___31OZm[data-selected] {
796
+ --background-color: var(--hop-ToggleButton-upsell-background-color-selected);
797
+ --color: var(--hop-ToggleButton-upsell-color-selected);
798
+ --border: var(--hop-ToggleButton-upsell-border-selected);
659
799
  }
660
- .ToggleButton-module__hop-ToggleButton___cQggT[data-focus-visible] {
661
- outline: var(--hop-ToggleButton-outline-size) solid var(--hop-ToggleButton-focus-ring-color);
800
+ .ToggleButton-module__hop-ToggleButton--danger___neytT {
662
801
  }
663
- .ToggleButton-module__hop-ToggleButton___cQggT[data-disabled],
664
- .ToggleButton-module__hop-ToggleButton--loading___sF-01 {
665
- cursor: not-allowed;
802
+ .ToggleButton-module__hop-ToggleButton--danger___neytT[data-selected] {
803
+ --background-color: var(--hop-ToggleButton-danger-background-color-selected);
804
+ --color: var(--hop-ToggleButton-danger-color-selected);
805
+ --border: var(--hop-ToggleButton-danger-border-selected);
666
806
  }
667
- .ToggleButton-module__hop-ToggleButton___cQggT[data-disabled] {
668
- --background-color: var(--hop-ToggleButton-background-color-disabled);
669
- --color: var(--hop-ToggleButton-color-disabled);
670
- --border: var(--hop-ToggleButton-border-disabled);
807
+ .ToggleButton-module__hop-ToggleButton--ghost-primary___ZFaWi {
671
808
  }
672
- .ToggleButton-module__hop-ToggleButton___cQggT[class*=--ghost][data-disabled] {
673
- --background-color: var(--hop-ToggleButton-ghost-background-color-disabled);
674
- --color: var(--hop-ToggleButton-ghost-color-disabled);
675
- --border: var(--hop-ToggleButton-ghost-border-disabled);
809
+ .ToggleButton-module__hop-ToggleButton--ghost-primary___ZFaWi[data-selected] {
810
+ --text-underline: normal;
811
+ --background-color: var(--hop-ToggleButton-ghost-primary-background-color-selected);
812
+ --color: var(--hop-ToggleButton-ghost-primary-color-selected);
813
+ --border: var(--hop-ToggleButton-ghost-primary-border-selected);
676
814
  }
677
- .ToggleButton-module__hop-ToggleButton--loading___sF-01.ToggleButton-module__hop-ToggleButton--primary___-CkAf {
815
+ .ToggleButton-module__hop-ToggleButton--ghost-secondary___DOt72 {
816
+ }
817
+ .ToggleButton-module__hop-ToggleButton--ghost-secondary___DOt72[data-selected] {
818
+ --text-underline: normal;
819
+ --background-color: var(--hop-ToggleButton-ghost-secondary-background-color-selected);
820
+ --color: var(--hop-ToggleButton-ghost-secondary-color-selected);
821
+ --border: var(--hop-ToggleButton-ghost-secondary-border-selected);
822
+ }
823
+ .ToggleButton-module__hop-ToggleButton--ghost-danger___4TSgP {
824
+ }
825
+ .ToggleButton-module__hop-ToggleButton--ghost-danger___4TSgP[data-selected] {
826
+ --text-underline: normal;
827
+ --background-color: var(--hop-ToggleButton-ghost-danger-background-color-selected);
828
+ --color: var(--hop-ToggleButton-ghost-danger-color-selected);
829
+ --border: var(--hop-ToggleButton-ghost-danger-border-selected);
830
+ }
831
+ .ToggleButton-module__hop-ToggleButton--loading___pjYBF.ToggleButton-module__hop-ToggleButton--primary___YRmoZ {
678
832
  --background-color: var(--hop-ToggleButton-primary-background-color);
679
833
  --color: var(--hop-ToggleButton-primary-color);
680
834
  --border: var(--hop-ToggleButton-primary-border);
681
835
  }
682
- .ToggleButton-module__hop-ToggleButton--loading___sF-01.ToggleButton-module__hop-ToggleButton--secondary___pw82S {
836
+ .ToggleButton-module__hop-ToggleButton--loading___pjYBF.ToggleButton-module__hop-ToggleButton--secondary___AMcYW {
683
837
  --background-color: var(--hop-ToggleButton-secondary-background-color);
684
838
  --color: var(--hop-ToggleButton-secondary-color);
685
839
  --border: var(--hop-ToggleButton-secondary-border);
686
840
  }
687
- .ToggleButton-module__hop-ToggleButton--loading___sF-01.ToggleButton-module__hop-ToggleButton--upsell___Y7PyT {
841
+ .ToggleButton-module__hop-ToggleButton--loading___pjYBF.ToggleButton-module__hop-ToggleButton--upsell___31OZm {
688
842
  --background-color: var(--hop-ToggleButton-upsell-background-color);
689
843
  --color: var(--hop-ToggleButton-upsell-color);
690
844
  --border: var(--hop-ToggleButton-upsell-border);
691
845
  }
692
- .ToggleButton-module__hop-ToggleButton--loading___sF-01.ToggleButton-module__hop-ToggleButton___cQggT[class*=--ghost] {
846
+ .ToggleButton-module__hop-ToggleButton--loading___pjYBF.ToggleButton-module__hop-ToggleButton--danger___neytT {
847
+ --background-color: var(--hop-ToggleButton-danger-background-color);
848
+ --color: var(--hop-ToggleButton-danger-color);
849
+ --border: var(--hop-ToggleButton-danger-border);
850
+ }
851
+ .ToggleButton-module__hop-ToggleButton--loading___pjYBF.ToggleButton-module__hop-ToggleButton--ghost-primary___ZFaWi {
852
+ --background-color: var(--hop-ToggleButton-ghost-primary-background-color);
853
+ --color: var(--hop-ToggleButton-ghost-primary-color);
854
+ --border: var(--hop-ToggleButton-ghost-primary-border);
855
+ --text-underline: none;
856
+ }
857
+ .ToggleButton-module__hop-ToggleButton--loading___pjYBF.ToggleButton-module__hop-ToggleButton--ghost-secondary___DOt72 {
693
858
  --background-color: var(--hop-ToggleButton-ghost-secondary-background-color);
694
859
  --color: var(--hop-ToggleButton-ghost-secondary-color);
695
860
  --border: var(--hop-ToggleButton-ghost-secondary-border);
696
861
  --text-underline: none;
697
862
  }
698
- .ToggleButton-module__hop-ToggleButton__Spinner___SwSbO {
699
- position: absolute;
700
- color: var(--spinner-color);
863
+ .ToggleButton-module__hop-ToggleButton--loading___pjYBF.ToggleButton-module__hop-ToggleButton--ghost-danger___4TSgP {
864
+ --background-color: var(--hop-ToggleButton-ghost-danger-background-color);
865
+ --color: var(--hop-ToggleButton-ghost-danger-color);
866
+ --border: var(--hop-ToggleButton-ghost-danger-border);
867
+ --text-underline: none;
701
868
  }
702
- .ToggleButton-module__hop-ToggleButton__icon___nOFkE,
703
- .ToggleButton-module__hop-ToggleButton__icon-list___OtBGk {
704
- flex: 0 0 auto;
705
- justify-self: end;
706
- order: 1;
869
+ .ToggleButton-module__hop-ToggleButton__Spinner___0jyPO {
707
870
  }
708
- .ToggleButton-module__hop-ToggleButton__text___ZdN6c {
709
- user-select: none;
710
- overflow: visible;
711
- flex: 0 1 auto;
712
- order: 2;
713
- font-weight: var(--hop-font-weight-505);
714
- text-decoration: var(--text-underline);
715
- text-underline-offset: 0.125rem;
716
- text-wrap: nowrap;
871
+ .ToggleButton-module__hop-ToggleButton__icon___GWJDN,
872
+ .ToggleButton-module__hop-ToggleButton__icon-list___Tmu8m {
717
873
  }
718
- .ToggleButton-module__hop-ToggleButton__end-icon___gYUgH,
719
- .ToggleButton-module__hop-ToggleButton__end-icon-list___JqSZC {
720
- flex: 0 0 auto;
721
- order: 3;
874
+ .ToggleButton-module__hop-ToggleButton__text___bKuM- {
722
875
  }
723
- .ToggleButton-module__hop-ToggleButton___cQggT .ToggleButton-module__hop-ToggleButton__icon-list___OtBGk,
724
- .ToggleButton-module__hop-ToggleButton___cQggT .ToggleButton-module__hop-ToggleButton__end-icon-list___JqSZC {
725
- flex-wrap: nowrap;
876
+ .ToggleButton-module__hop-ToggleButton__end-icon___ZFyb5,
877
+ .ToggleButton-module__hop-ToggleButton__end-icon-list___Cj63s {
878
+ }
879
+ .ToggleButton-module__hop-ToggleButton__icon-list___Tmu8m,
880
+ .ToggleButton-module__hop-ToggleButton__end-icon-list___Cj63s {
726
881
  }
727
- .ToggleButton-module__hop-ToggleButton--loading___sF-01.ToggleButton-module__hop-ToggleButton___cQggT > *:not(.ToggleButton-module__hop-ToggleButton__Spinner___SwSbO) {
882
+ .ToggleButton-module__hop-ToggleButton--loading___pjYBF.ToggleButton-module__hop-ToggleButton___7uOg3 > *:not(.ToggleButton-module__hop-ToggleButton__Spinner___0jyPO) {
728
883
  opacity: 0;
729
884
  }