@hopper-ui/components 1.0.6 → 1.0.7

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 (237) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/Avatar/src/AnonymousAvatar.css +10 -10
  3. package/dist/Avatar/src/AnonymousAvatar.js +3 -3
  4. package/dist/Avatar/src/Avatar.css +37 -37
  5. package/dist/Avatar/src/Avatar.js +5 -5
  6. package/dist/Avatar/src/AvatarContext.js +1 -1
  7. package/dist/Avatar/src/DeletedAvatar.css +10 -10
  8. package/dist/Avatar/src/DeletedAvatar.js +3 -3
  9. package/dist/Avatar/src/RichIconAvatarImage.css +10 -10
  10. package/dist/Avatar/src/RichIconAvatarImage.js +2 -2
  11. package/dist/Avatar/src/RichIconAvatarImageContext.js +1 -1
  12. package/dist/Avatar/src/index.css +37 -37
  13. package/dist/Avatar/src/index.js +7 -7
  14. package/dist/Avatar/src/useImageFallback.js +1 -1
  15. package/dist/Badge/src/Badge.css +10 -10
  16. package/dist/Badge/src/Badge.js +3 -3
  17. package/dist/Badge/src/BadgeContext.js +1 -1
  18. package/dist/Badge/src/index.css +10 -10
  19. package/dist/Badge/src/index.js +3 -3
  20. package/dist/Chip/src/Chip.css +33 -33
  21. package/dist/Chip/src/Chip.js +3 -3
  22. package/dist/Chip/src/ChipContext.js +1 -1
  23. package/dist/Chip/src/index.css +33 -33
  24. package/dist/Chip/src/index.js +3 -3
  25. package/dist/Divider/src/Divider.css +2 -2
  26. package/dist/Divider/src/Divider.js +2 -2
  27. package/dist/Divider/src/DividerContext.js +1 -1
  28. package/dist/Divider/src/index.css +2 -2
  29. package/dist/Divider/src/index.js +2 -2
  30. package/dist/ErrorMessage/src/ErrorMessage.css +11 -11
  31. package/dist/ErrorMessage/src/ErrorMessage.js +3 -3
  32. package/dist/ErrorMessage/src/ErrorMessageContext.js +1 -1
  33. package/dist/ErrorMessage/src/index.css +11 -11
  34. package/dist/ErrorMessage/src/index.js +3 -3
  35. package/dist/Header/src/Header.js +1 -1
  36. package/dist/Header/src/HeaderContext.js +1 -1
  37. package/dist/Header/src/index.js +1 -1
  38. package/dist/HelperMessage/src/HelperMessage.css +11 -11
  39. package/dist/HelperMessage/src/HelperMessage.js +3 -3
  40. package/dist/HelperMessage/src/HelperMessageContext.js +1 -1
  41. package/dist/HelperMessage/src/index.css +11 -11
  42. package/dist/HelperMessage/src/index.js +3 -3
  43. package/dist/HopperProvider/src/HopperProvider.js +1 -1
  44. package/dist/HopperProvider/src/index.js +1 -1
  45. package/dist/IconList/src/IconList.css +1 -1
  46. package/dist/IconList/src/IconList.js +2 -2
  47. package/dist/IconList/src/IconListContext.js +1 -1
  48. package/dist/IconList/src/index.css +1 -1
  49. package/dist/IconList/src/index.js +2 -2
  50. package/dist/Link/src/Link.css +31 -31
  51. package/dist/Link/src/Link.js +3 -3
  52. package/dist/Link/src/LinkContext.js +1 -1
  53. package/dist/Link/src/index.css +31 -31
  54. package/dist/Link/src/index.js +3 -3
  55. package/dist/ListBox/src/ListBox.css +175 -175
  56. package/dist/ListBox/src/ListBox.js +11 -11
  57. package/dist/ListBox/src/ListBoxContext.js +1 -1
  58. package/dist/ListBox/src/ListBoxItem.css +160 -160
  59. package/dist/ListBox/src/ListBoxItem.js +10 -10
  60. package/dist/ListBox/src/ListBoxItemContext.js +1 -1
  61. package/dist/ListBox/src/ListBoxItemSkeleton.css +7 -7
  62. package/dist/ListBox/src/ListBoxItemSkeleton.js +2 -2
  63. package/dist/ListBox/src/ListBoxItemSkeletonContext.js +1 -1
  64. package/dist/ListBox/src/index.css +175 -175
  65. package/dist/ListBox/src/index.js +11 -11
  66. package/dist/ListBox/src/useLoadOnScroll.js +1 -1
  67. package/dist/Section/src/Section.js +1 -1
  68. package/dist/Section/src/SectionContext.js +1 -1
  69. package/dist/Section/src/index.js +1 -1
  70. package/dist/Spinner/src/Spinner.css +19 -19
  71. package/dist/Spinner/src/Spinner.js +3 -3
  72. package/dist/Spinner/src/SpinnerContext.js +1 -1
  73. package/dist/Spinner/src/index.css +19 -19
  74. package/dist/Spinner/src/index.js +3 -3
  75. package/dist/buttons/src/Button.css +103 -103
  76. package/dist/buttons/src/Button.js +6 -6
  77. package/dist/buttons/src/ButtonContext.js +1 -1
  78. package/dist/buttons/src/ButtonGroup.css +11 -11
  79. package/dist/buttons/src/ButtonGroup.js +2 -2
  80. package/dist/buttons/src/ButtonGroupContext.js +1 -1
  81. package/dist/buttons/src/ClearButton.css +12 -12
  82. package/dist/buttons/src/ClearButton.js +4 -4
  83. package/dist/buttons/src/ClearButtonContext.js +1 -1
  84. package/dist/buttons/src/EmbeddedButton.css +12 -12
  85. package/dist/buttons/src/EmbeddedButton.js +2 -2
  86. package/dist/buttons/src/EmbeddedButtonContext.js +1 -1
  87. package/dist/buttons/src/index.css +126 -126
  88. package/dist/buttons/src/index.js +9 -9
  89. package/dist/checkbox/src/Checkbox.css +31 -31
  90. package/dist/checkbox/src/Checkbox.js +3 -3
  91. package/dist/checkbox/src/CheckboxContext.js +1 -1
  92. package/dist/checkbox/src/CheckboxField.css +15 -15
  93. package/dist/checkbox/src/CheckboxField.js +2 -2
  94. package/dist/checkbox/src/CheckboxFieldContext.js +1 -1
  95. package/dist/checkbox/src/CheckboxGroup.css +66 -66
  96. package/dist/checkbox/src/CheckboxGroup.js +4 -4
  97. package/dist/checkbox/src/CheckboxGroupContext.js +1 -1
  98. package/dist/checkbox/src/CheckboxList.js +1 -1
  99. package/dist/checkbox/src/CheckboxListContext.js +1 -1
  100. package/dist/checkbox/src/index.css +66 -66
  101. package/dist/checkbox/src/index.js +8 -8
  102. package/dist/{chunk-53FHDOG7.js → chunk-2NJ3RDMJ.js} +2 -2
  103. package/dist/chunk-3LGP5T4C.js +625 -0
  104. package/dist/{chunk-JRDN364E.js → chunk-3WUDQLLR.js} +2 -2
  105. package/dist/{chunk-MED2BIDV.js → chunk-4TJUYXYN.js} +1 -1
  106. package/dist/{chunk-MVRI6GLQ.js → chunk-4V75RYJN.js} +2 -2
  107. package/dist/{chunk-QBCCF2C2.js → chunk-5CIADHZR.js} +2 -2
  108. package/dist/{chunk-6QMIRVLY.js → chunk-666H6UTL.js} +1 -1
  109. package/dist/{chunk-J53HGLCT.js → chunk-AE24HPDG.js} +1 -1
  110. package/dist/chunk-CK5HMGDC.js +156 -0
  111. package/dist/{chunk-HR25MLRP.js → chunk-COBPJHIY.js} +1 -1
  112. package/dist/{chunk-XRC7XE6B.js → chunk-CXIMLIUB.js} +2 -2
  113. package/dist/{chunk-RA7PM75O.js → chunk-DESANYPD.js} +5 -5
  114. package/dist/{chunk-RG4JKE4N.js → chunk-E7Y25WJE.js} +1 -1
  115. package/dist/{chunk-K4ZGI7DJ.js → chunk-EBXHYPDU.js} +1 -1
  116. package/dist/{chunk-BKC74M6Y.js → chunk-FMSIW5AX.js} +1 -1
  117. package/dist/{chunk-OHB5QR5P.js → chunk-HVUX7ZQ3.js} +2 -2
  118. package/dist/{chunk-37NW34QM.js → chunk-IUQNDY3E.js} +3 -3
  119. package/dist/{chunk-2P3A4VVY.js → chunk-JSBRDJBE.js} +1 -6
  120. package/dist/{chunk-J33IFG4U.js → chunk-LIUW56HE.js} +1 -1
  121. package/dist/chunk-LJXTJRSB.js +1 -0
  122. package/dist/{chunk-SOSHKMNI.js → chunk-LM4HMPSD.js} +2 -2
  123. package/dist/{chunk-2XUHTPCX.js → chunk-NQOLP5NY.js} +2 -2
  124. package/dist/{chunk-XGKPMLYD.js → chunk-OKAYIZ45.js} +4 -4
  125. package/dist/{chunk-ITQK6JTD.js → chunk-QACERXDV.js} +1 -1
  126. package/dist/{chunk-JUMJ6A3K.js → chunk-R2UVMOIP.js} +1 -1
  127. package/dist/{chunk-4TXFHYHL.js → chunk-RW4GDPRX.js} +1 -1
  128. package/dist/{chunk-E4WFKXW4.js → chunk-SHVSB6MD.js} +4 -4
  129. package/dist/{chunk-3LH2JHUO.js → chunk-SSCPXYN6.js} +3 -3
  130. package/dist/{chunk-E4ALW4MZ.js → chunk-SXPMPVDJ.js} +8 -8
  131. package/dist/chunk-U4NXU44C.js +118 -0
  132. package/dist/{chunk-F2URSFJA.js → chunk-UUUU6SUW.js} +2 -2
  133. package/dist/chunk-W2ZCHVKP.js +119 -0
  134. package/dist/{chunk-3A6TTZAA.js → chunk-WSNJNUUA.js} +1 -1
  135. package/dist/{chunk-P5CWOV3L.js → chunk-WXJ3U2DV.js} +2 -2
  136. package/dist/{chunk-RCX5B3S3.js → chunk-XC7OT325.js} +1 -1
  137. package/dist/{chunk-G242LPQE.js → chunk-XVKZ3Q3B.js} +2 -2
  138. package/dist/{chunk-ZOTVZM6F.js → chunk-YEYNRBMQ.js} +1 -1
  139. package/dist/{chunk-4JAV3FIH.js → chunk-YTPFSLHU.js} +2 -2
  140. package/dist/{chunk-V5GOY6TV.js → chunk-YZRL7TXT.js} +1 -1
  141. package/dist/chunk-ZMDHYGEP.js +57 -0
  142. package/dist/i18n/src/index.js +2 -2
  143. package/dist/i18n/src/useLocalizedString.js +2 -2
  144. package/dist/index.css +3297 -0
  145. package/dist/index.d.ts +113 -0
  146. package/dist/index.js +107 -0
  147. package/dist/inputs/src/InputGroup.css +12 -12
  148. package/dist/inputs/src/InputGroup.js +2 -2
  149. package/dist/inputs/src/InputGroupContext.js +1 -1
  150. package/dist/inputs/src/PasswordField.css +229 -2405
  151. package/dist/inputs/src/PasswordField.js +12 -91
  152. package/dist/inputs/src/PasswordFieldContext.js +1 -1
  153. package/dist/inputs/src/SearchField.css +235 -2390
  154. package/dist/inputs/src/SearchField.js +13 -90
  155. package/dist/inputs/src/SearchFieldContext.js +1 -1
  156. package/dist/inputs/src/TextField.css +230 -2402
  157. package/dist/inputs/src/TextField.js +13 -89
  158. package/dist/inputs/src/TextFieldContext.js +1 -1
  159. package/dist/inputs/src/index.css +219 -2302
  160. package/dist/inputs/src/index.js +16 -88
  161. package/dist/layout/src/Content.js +1 -1
  162. package/dist/layout/src/ContentContext.js +1 -1
  163. package/dist/layout/src/Flex.js +1 -1
  164. package/dist/layout/src/Footer.js +1 -1
  165. package/dist/layout/src/FooterContext.js +1 -1
  166. package/dist/layout/src/Grid.js +1 -1
  167. package/dist/layout/src/Inline.js +1 -1
  168. package/dist/layout/src/Stack.js +1 -1
  169. package/dist/layout/src/grid-helpers.js +1 -1
  170. package/dist/overlays/Popover/src/Popover.css +457 -457
  171. package/dist/overlays/Popover/src/Popover.js +52 -47
  172. package/dist/overlays/Popover/src/PopoverContext.js +1 -1
  173. package/dist/overlays/Popover/src/PopoverTrigger.js +1 -1
  174. package/dist/overlays/Popover/src/index.css +457 -457
  175. package/dist/overlays/Popover/src/index.js +52 -47
  176. package/dist/radio/src/Radio.css +31 -31
  177. package/dist/radio/src/Radio.js +3 -3
  178. package/dist/radio/src/RadioContext.js +1 -1
  179. package/dist/radio/src/RadioField.css +15 -15
  180. package/dist/radio/src/RadioField.js +2 -2
  181. package/dist/radio/src/RadioFieldContext.js +1 -1
  182. package/dist/radio/src/RadioGroup.css +66 -66
  183. package/dist/radio/src/RadioGroup.js +3 -3
  184. package/dist/radio/src/RadioGroupContext.js +1 -1
  185. package/dist/radio/src/RadioList.js +1 -1
  186. package/dist/radio/src/RadioListContext.js +1 -1
  187. package/dist/radio/src/index.css +66 -66
  188. package/dist/radio/src/index.js +6 -6
  189. package/dist/switch/src/Switch.css +25 -25
  190. package/dist/switch/src/Switch.js +3 -3
  191. package/dist/switch/src/SwitchContext.js +1 -1
  192. package/dist/switch/src/SwitchField.css +15 -15
  193. package/dist/switch/src/SwitchField.js +3 -3
  194. package/dist/switch/src/SwitchFieldContext.js +1 -1
  195. package/dist/switch/src/index.css +31 -31
  196. package/dist/switch/src/index.js +5 -5
  197. package/dist/tag/src/Tag.css +457 -457
  198. package/dist/tag/src/Tag.js +52 -47
  199. package/dist/tag/src/TagContext.js +1 -1
  200. package/dist/tag/src/TagGroup.css +28 -28
  201. package/dist/tag/src/TagGroup.js +4 -4
  202. package/dist/tag/src/TagGroupContext.js +1 -1
  203. package/dist/tag/src/TagList.js +1 -1
  204. package/dist/tag/src/TagListContext.js +1 -1
  205. package/dist/tag/src/index.css +457 -457
  206. package/dist/tag/src/index.js +52 -47
  207. package/dist/typography/Heading/src/Heading.css +9 -3222
  208. package/dist/typography/Heading/src/Heading.js +2 -100
  209. package/dist/typography/Heading/src/HeadingContext.js +1 -1
  210. package/dist/typography/Heading/src/index.css +9 -3222
  211. package/dist/typography/Heading/src/index.js +2 -100
  212. package/dist/typography/Label/src/Label.css +9 -9
  213. package/dist/typography/Label/src/Label.js +2 -2
  214. package/dist/typography/Label/src/LabelContext.js +1 -1
  215. package/dist/typography/Label/src/index.css +9 -9
  216. package/dist/typography/Label/src/index.js +2 -2
  217. package/dist/typography/OverlineText/src/OverlineText.css +6 -6
  218. package/dist/typography/OverlineText/src/OverlineText.js +2 -2
  219. package/dist/typography/OverlineText/src/OverlineTextContext.js +1 -1
  220. package/dist/typography/OverlineText/src/index.css +6 -6
  221. package/dist/typography/OverlineText/src/index.js +2 -2
  222. package/dist/typography/Text/src/Text.css +9 -9
  223. package/dist/typography/Text/src/Text.js +2 -2
  224. package/dist/typography/Text/src/TextContext.js +1 -1
  225. package/dist/typography/Text/src/index.css +9 -9
  226. package/dist/typography/Text/src/index.js +2 -2
  227. package/dist/utils/src/ClearSlots.js +1 -1
  228. package/dist/utils/src/SlotProvider.js +1 -1
  229. package/dist/utils/src/assertion.js +1 -1
  230. package/dist/utils/src/composeClassnameRenderProps.js +1 -1
  231. package/dist/utils/src/cssModule.js +1 -1
  232. package/dist/utils/src/index.js +1 -1
  233. package/dist/utils/src/isTextOnlyChildren.js +1 -1
  234. package/dist/utils/src/useRenderProps.js +1 -1
  235. package/dist/utils/src/useSlot.js +1 -1
  236. package/package.json +1 -1
  237. package/dist/chunk-BC5A7RHI.js +0 -1260
package/dist/index.css ADDED
@@ -0,0 +1,3297 @@
1
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/Text/src/Text.module.css/#css-module-data */
2
+ .Text-module__hop-Text___QAKDh {
3
+ --hop-Text-xs-font-size: var(--hop-body-xs-font-size);
4
+ --hop-Text-xs-font-family: var(--hop-body-xs-font-family);
5
+ --hop-Text-xs-font-weight: var(--hop-body-xs-font-weight);
6
+ --hop-Text-xs-line-height: var(--hop-body-xs-line-height);
7
+ --hop-Text-sm-font-size: var(--hop-body-sm-font-size);
8
+ --hop-Text-sm-font-family: var(--hop-body-sm-font-family);
9
+ --hop-Text-sm-font-weight: var(--hop-body-sm-font-weight);
10
+ --hop-Text-sm-line-height: var(--hop-body-sm-line-height);
11
+ --hop-Text-md-font-size: var(--hop-body-md-font-size);
12
+ --hop-Text-md-font-family: var(--hop-body-md-font-family);
13
+ --hop-Text-md-font-weight: var(--hop-body-md-font-weight);
14
+ --hop-Text-md-line-height: var(--hop-body-md-line-height);
15
+ --hop-Text-lg-font-size: var(--hop-body-lg-font-size);
16
+ --hop-Text-lg-font-family: var(--hop-body-lg-font-family);
17
+ --hop-Text-lg-font-weight: var(--hop-body-lg-font-weight);
18
+ --hop-Text-lg-line-height: var(--hop-body-lg-line-height);
19
+ --hop-Text-xl-font-size: var(--hop-body-xl-font-size);
20
+ --hop-Text-xl-font-family: var(--hop-body-xl-font-family);
21
+ --hop-Text-xl-font-weight: var(--hop-body-xl-font-weight);
22
+ --hop-Text-xl-line-height: var(--hop-body-xl-line-height);
23
+ --hop-Text-2xl-font-size: var(--hop-body-2xl-font-size);
24
+ --hop-Text-2xl-font-family: var(--hop-body-2xl-font-family);
25
+ --hop-Text-2xl-font-weight: var(--hop-body-2xl-font-weight);
26
+ --hop-Text-2xl-line-height: var(--hop-body-2xl-line-height);
27
+ --hop-Text-inherit-size-font-size: inherit;
28
+ --hop-Text-inherit-size-font-family: inherit;
29
+ --hop-Text-inherit-size-font-weight: inherit;
30
+ --hop-Text-inherit-size-line-height: inherit;
31
+ }
32
+ :where(.Text-module__hop-Text___QAKDh) {
33
+ font-family: var(--font-family);
34
+ font-size: var(--font-size);
35
+ font-weight: var(--font-weight);
36
+ line-height: var(--line-height);
37
+ }
38
+ :where(.Text-module__hop-Text--xs___q7OkS) {
39
+ --font-size: var(--hop-Text-xs-font-size);
40
+ --font-family: var(--hop-Text-xs-font-family);
41
+ --font-weight: var(--hop-Text-xs-font-weight);
42
+ --line-height: var(--hop-Text-xs-line-height);
43
+ }
44
+ :where(.Text-module__hop-Text--sm___5RyDW) {
45
+ --font-size: var(--hop-Text-sm-font-size);
46
+ --font-family: var(--hop-Text-sm-font-family);
47
+ --font-weight: var(--hop-Text-sm-font-weight);
48
+ --line-height: var(--hop-Text-sm-line-height);
49
+ }
50
+ :where(.Text-module__hop-Text--md___qmqwg) {
51
+ --font-size: var(--hop-Text-md-font-size);
52
+ --font-family: var(--hop-Text-md-font-family);
53
+ --font-weight: var(--hop-Text-md-font-weight);
54
+ --line-height: var(--hop-Text-md-line-height);
55
+ }
56
+ :where(.Text-module__hop-Text--lg___BZX0m) {
57
+ --font-size: var(--hop-Text-lg-font-size);
58
+ --font-family: var(--hop-Text-lg-font-family);
59
+ --font-weight: var(--hop-Text-lg-font-weight);
60
+ --line-height: var(--hop-Text-lg-line-height);
61
+ }
62
+ :where(.Text-module__hop-Text--xl___3Zi7y) {
63
+ --font-size: var(--hop-Text-xl-font-size);
64
+ --font-family: var(--hop-Text-xl-font-family);
65
+ --font-weight: var(--hop-Text-xl-font-weight);
66
+ --line-height: var(--hop-Text-xl-line-height);
67
+ }
68
+ :where(.Text-module__hop-Text--2xl___RbrDM) {
69
+ --font-size: var(--hop-Text-2xl-font-size);
70
+ --font-family: var(--hop-Text-2xl-font-family);
71
+ --font-weight: var(--hop-Text-2xl-font-weight);
72
+ --line-height: var(--hop-Text-2xl-line-height);
73
+ }
74
+ :where(.Text-module__hop-Text--inherit___G5g04) {
75
+ --font-size: var(--hop-Text-inherit-size-font-size);
76
+ --font-family: var(--hop-Text-inherit-size-font-family);
77
+ --font-weight: var(--hop-Text-inherit-size-font-weight);
78
+ --line-height: var(--hop-Text-inherit-size-line-height);
79
+ }
80
+
81
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/Avatar/src/RichIconAvatarImage.module.css/#css-module-data */
82
+ .RichIconAvatarImage-module__hop-RichIconAvatarImage___r1-2L {
83
+ --hop-RichIconAvatarImage-background-color: var(--hop-decorative-option7-surface);
84
+ --hop-RichIconAvatarImage-border-radius: var(--hop-shape-circle);
85
+ --hop-RichIconAvatarImage-icon-color: var(--hop-decorative-option7-icon);
86
+ --hop-RichIconAvatarImage-xs-size: 1rem;
87
+ --hop-RichIconAvatarImage-icon-xs-size: 1rem;
88
+ --hop-RichIconAvatarImage-sm-size: 1.5rem;
89
+ --hop-RichIconAvatarImage-icon-sm-size: 1.5rem;
90
+ --hop-RichIconAvatarImage-md-size: 2rem;
91
+ --hop-RichIconAvatarImage-icon-md-size: 2rem;
92
+ --hop-RichIconAvatarImage-lg-size: 3rem;
93
+ --hop-RichIconAvatarImage-icon-lg-size: 3rem;
94
+ --hop-RichIconAvatarImage-xl-size: 4rem;
95
+ --hop-RichIconAvatarImage-icon-xl-size: 4rem;
96
+ --hop-RichIconAvatarImage-2xl-size: 6rem;
97
+ --hop-RichIconAvatarImage-icon-2xl-size: 4rem;
98
+ --hop-RichIconAvatarImage-background-color-disabled: var(--hop-neutral-surface-disabled);
99
+ --hop-RichIconAvatarImage-icon-color-disabled: var(--hop-neutral-icon-disabled);
100
+ --background-color: var(--hop-RichIconAvatarImage-background-color);
101
+ user-select: none;
102
+ position: relative;
103
+ overflow: hidden;
104
+ display: flex;
105
+ align-items: center;
106
+ justify-content: center;
107
+ inline-size: var(--size, var(--hop-RichIconAvatarImage-md-size));
108
+ block-size: var(--size, var(--hop-RichIconAvatarImage-md-size));
109
+ color: var(--hop-RichIconAvatarImage-icon-color);
110
+ background-color: var(--background-color);
111
+ border-radius: var(--hop-RichIconAvatarImage-border-radius);
112
+ }
113
+ .RichIconAvatarImage-module__hop-RichIconAvatarImage--xs___exS4L {
114
+ --size: var(--hop-RichIconAvatarImage-xs-size);
115
+ --icon-size: var(--hop-RichIconAvatarImage-icon-xs-size);
116
+ }
117
+ .RichIconAvatarImage-module__hop-RichIconAvatarImage--sm___tjY3E {
118
+ --size: var(--hop-RichIconAvatarImage-sm-size);
119
+ --icon-size: var(--hop-RichIconAvatarImage-icon-sm-size);
120
+ }
121
+ .RichIconAvatarImage-module__hop-RichIconAvatarImage--md___7bEZJ {
122
+ --size: var(--hop-RichIconAvatarImage-md-size);
123
+ --icon-size: var(--hop-RichIconAvatarImage-icon-md-size);
124
+ }
125
+ .RichIconAvatarImage-module__hop-RichIconAvatarImage--lg___IXng- {
126
+ --size: var(--hop-RichIconAvatarImage-lg-size);
127
+ --icon-size: var(--hop-RichIconAvatarImage-icon-lg-size);
128
+ }
129
+ .RichIconAvatarImage-module__hop-RichIconAvatarImage--xl___8tAP7 {
130
+ --size: var(--hop-RichIconAvatarImage-xl-size);
131
+ --icon-size: var(--hop-RichIconAvatarImage-icon-xl-size);
132
+ }
133
+ .RichIconAvatarImage-module__hop-RichIconAvatarImage--2xl___2PYru {
134
+ --size: var(--hop-RichIconAvatarImage-2xl-size);
135
+ --icon-size: var(--hop-RichIconAvatarImage-icon-2xl-size);
136
+ }
137
+ .RichIconAvatarImage-module__hop-RichIconAvatarImage___r1-2L[data-disabled] {
138
+ --background-color: var(--hop-RichIconAvatarImage-background-color-disabled);
139
+ }
140
+ .RichIconAvatarImage-module__hop-RichIconAvatarImage__icon___aE4RN {
141
+ position: relative;
142
+ display: block;
143
+ inline-size: var(--icon-size, var(--hop-RichIconAvatarImage-icon-md-size));
144
+ block-size: var(--icon-size, var(--hop-RichIconAvatarImage-icon-md-size));
145
+ }
146
+ .RichIconAvatarImage-module__hop-RichIconAvatarImage___r1-2L[data-disabled] .RichIconAvatarImage-module__hop-RichIconAvatarImage__icon___aE4RN {
147
+ --hop-RichIcon-placeholder-background: var(--hop-RichIconAvatarImage-background-color-disabled);
148
+ --hop-RichIcon-placeholder-shadow: var(--hop-RichIconAvatarImage-icon-color-disabled);
149
+ }
150
+
151
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/Avatar/src/Avatar.module.css/#css-module-data */
152
+ .Avatar-module__hop-Avatar___xgLGn {
153
+ --hop-Avatar-border-radius: var(--hop-shape-circle);
154
+ --hop-Avatar-mix-blend-mode: normal;
155
+ --hop-Avatar-decorative-1-background-color: var(--hop-decorative-option1-surface-strong);
156
+ --hop-Avatar-decorative-2-background-color: var(--hop-decorative-option2-surface-strong);
157
+ --hop-Avatar-decorative-3-background-color: var(--hop-decorative-option3-surface-strong);
158
+ --hop-Avatar-decorative-4-background-color: var(--hop-decorative-option4-surface-strong);
159
+ --hop-Avatar-decorative-5-background-color: var(--hop-decorative-option5-surface-strong);
160
+ --hop-Avatar-decorative-6-background-color: var(--hop-decorative-option6-surface-strong);
161
+ --hop-Avatar-decorative-7-background-color: var(--hop-decorative-option7-surface-strong);
162
+ --hop-Avatar-decorative-8-background-color: var(--hop-decorative-option8-surface-strong);
163
+ --hop-Avatar-decorative-9-background-color: var(--hop-decorative-option9-surface-strong);
164
+ --hop-Avatar-decorative-1-text-color: var(--hop-decorative-option1-text);
165
+ --hop-Avatar-decorative-2-text-color: var(--hop-decorative-option2-text);
166
+ --hop-Avatar-decorative-3-text-color: var(--hop-decorative-option3-text);
167
+ --hop-Avatar-decorative-4-text-color: var(--hop-decorative-option4-text);
168
+ --hop-Avatar-decorative-5-text-color: var(--hop-decorative-option5-text);
169
+ --hop-Avatar-decorative-6-text-color: var(--hop-decorative-option6-text);
170
+ --hop-Avatar-decorative-7-text-color: var(--hop-decorative-option7-text);
171
+ --hop-Avatar-decorative-8-text-color: var(--hop-decorative-option8-text);
172
+ --hop-Avatar-decorative-9-text-color: var(--hop-decorative-option9-text);
173
+ --hop-Avatar-xs-size: 1rem;
174
+ --hop-Avatar-sm-size: 1.5rem;
175
+ --hop-Avatar-md-size: 2rem;
176
+ --hop-Avatar-lg-size: 3rem;
177
+ --hop-Avatar-xl-size: 4rem;
178
+ --hop-Avatar-2xl-size: 6rem;
179
+ --hop-Avatar-background-color-disabled: var(--hop-neutral-surface-disabled);
180
+ --hop-Avatar-text-color-disabled: var(--hop-neutral-text-disabled);
181
+ --hop-Avatar-mix-blend-mode-disabled: luminosity;
182
+ --mix-blend-mode: var(--hop-Avatar-mix-blend-mode);
183
+ user-select: none;
184
+ position: relative;
185
+ overflow: hidden;
186
+ display: flex;
187
+ flex: 0 0 auto;
188
+ align-items: center;
189
+ justify-content: center;
190
+ box-sizing: border-box;
191
+ inline-size: var(--size, var(--hop-Avatar-md-size));
192
+ block-size: var(--size, var(--hop-Avatar-md-size));
193
+ color: var(--text-color, var(--hop-neutral-text));
194
+ background-color: var(--background-color, transparent);
195
+ border-radius: var(--hop-Avatar-border-radius);
196
+ }
197
+ .Avatar-module__hop-Avatar--xs___71MWt {
198
+ --size: var(--hop-Avatar-xs-size);
199
+ }
200
+ .Avatar-module__hop-Avatar--sm___-VT24 {
201
+ --size: var(--hop-Avatar-sm-size);
202
+ }
203
+ .Avatar-module__hop-Avatar--md___DhOit {
204
+ --size: var(--hop-Avatar-md-size);
205
+ }
206
+ .Avatar-module__hop-Avatar--lg___LhUBE {
207
+ --size: var(--hop-Avatar-lg-size);
208
+ }
209
+ .Avatar-module__hop-Avatar--xl___nRU6l {
210
+ --size: var(--hop-Avatar-xl-size);
211
+ }
212
+ .Avatar-module__hop-Avatar--2xl___EvIhQ {
213
+ --size: var(--hop-Avatar-2xl-size);
214
+ }
215
+ .Avatar-module__hop-Avatar--decorative-option1___tJoic {
216
+ --background-color: var(--hop-Avatar-decorative-1-background-color);
217
+ --text-color: var(--hop-Avatar-decorative-1-text-color);
218
+ }
219
+ .Avatar-module__hop-Avatar--decorative-option2___J6Alx {
220
+ --background-color: var(--hop-Avatar-decorative-2-background-color);
221
+ --text-color: var(--hop-Avatar-decorative-2-text-color);
222
+ }
223
+ .Avatar-module__hop-Avatar--decorative-option3___PFZAI {
224
+ --background-color: var(--hop-Avatar-decorative-3-background-color);
225
+ --text-color: var(--hop-Avatar-decorative-3-text-color);
226
+ }
227
+ .Avatar-module__hop-Avatar--decorative-option4___eUcwp {
228
+ --background-color: var(--hop-Avatar-decorative-4-background-color);
229
+ --text-color: var(--hop-Avatar-decorative-4-text-color);
230
+ }
231
+ .Avatar-module__hop-Avatar--decorative-option5___ICYLl {
232
+ --background-color: var(--hop-Avatar-decorative-5-background-color);
233
+ --text-color: var(--hop-Avatar-decorative-5-text-color);
234
+ }
235
+ .Avatar-module__hop-Avatar--decorative-option6___R0WGe {
236
+ --background-color: var(--hop-Avatar-decorative-6-background-color);
237
+ --text-color: var(--hop-Avatar-decorative-6-text-color);
238
+ }
239
+ .Avatar-module__hop-Avatar--decorative-option7___iAAz0 {
240
+ --background-color: var(--hop-Avatar-decorative-7-background-color);
241
+ --text-color: var(--hop-Avatar-decorative-7-text-color);
242
+ }
243
+ .Avatar-module__hop-Avatar--decorative-option8___p03Dg {
244
+ --background-color: var(--hop-Avatar-decorative-8-background-color);
245
+ --text-color: var(--hop-Avatar-decorative-8-text-color);
246
+ }
247
+ .Avatar-module__hop-Avatar--decorative-option9___DkcTO {
248
+ --background-color: var(--hop-Avatar-decorative-9-background-color);
249
+ --text-color: var(--hop-Avatar-decorative-9-text-color);
250
+ }
251
+ .Avatar-module__hop-Avatar___xgLGn[data-disabled] {
252
+ --background-color: var(--hop-Avatar-background-color-disabled);
253
+ --text-color: var(--hop-Avatar-text-color-disabled);
254
+ --mix-blend-mode: var(--hop-Avatar-mix-blend-mode-disabled);
255
+ isolation: isolate;
256
+ }
257
+ .Avatar-module__hop-Avatar__image___EMxQb {
258
+ position: relative;
259
+ display: block;
260
+ box-sizing: border-box;
261
+ inline-size: 100%;
262
+ block-size: 100%;
263
+ object-fit: cover;
264
+ mix-blend-mode: var(--mix-blend-mode);
265
+ }
266
+
267
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/OverlineText/src/OverlineText.module.css/#css-module-data */
268
+ :where(.OverlineText-module__hop-OverlineText___ENkOl) {
269
+ --hop-OverlineText-font-family: var(--hop-overline-font-family);
270
+ --hop-OverlineText-font-size: var(--hop-overline-font-size);
271
+ --hop-OverlineText-font-weight: var(--hop-overline-font-weight);
272
+ --hop-OverlineText-letter-spacing: 0.015rem;
273
+ --hop-OverlineText-line-height: var(--hop-overline-line-height);
274
+ --hop-OverlineText-top-offset: var(--hop-overline-top-offset);
275
+ --hop-OverlineText-bottom-offset: var(--hop-overline-bottom-offset);
276
+ --font-family: var(--hop-OverlineText-font-family);
277
+ --font-size: var(--hop-OverlineText-font-size);
278
+ --font-weight: var(--hop-OverlineText-font-weight);
279
+ --letter-spacing: var(--hop-OverlineText-letter-spacing);
280
+ --line-height: var(--hop-OverlineText-line-height);
281
+ --top-offset: var(--hop-OverlineText-top-offset);
282
+ --bottom-offset: var(--hop-OverlineText-bottom-offset);
283
+ box-sizing: border-box;
284
+ font-family: var(--font-family);
285
+ font-size: var(--font-size);
286
+ font-feature-settings: "case";
287
+ font-weight: var(--font-weight);
288
+ line-height: var(--line-height);
289
+ text-transform: uppercase;
290
+ letter-spacing: var(--letter-spacing);
291
+ }
292
+ .OverlineText-module__hop-OverlineText__text___NnNns {
293
+ box-sizing: border-box;
294
+ }
295
+ .OverlineText-module__hop-OverlineText__text___NnNns::before,
296
+ .OverlineText-module__hop-OverlineText__text___NnNns::after {
297
+ content: "";
298
+ display: block;
299
+ box-sizing: border-box;
300
+ inline-size: 0;
301
+ block-size: 0;
302
+ }
303
+ .OverlineText-module__hop-OverlineText__text___NnNns::before {
304
+ margin-block-end: var(--bottom-offset);
305
+ }
306
+ .OverlineText-module__hop-OverlineText__text___NnNns::after {
307
+ margin-block-start: var(--top-offset);
308
+ }
309
+
310
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/Badge/src/Badge.module.css/#css-module-data */
311
+ .Badge-module__hop-Badge___gejg5 {
312
+ --hop-Badge-height: 1.5rem;
313
+ --hop-Badge-padding-inline: var(--hop-space-inset-sm);
314
+ --hop-Badge-border-radius: var(--hop-shape-pill);
315
+ --hop-Badge-primary-text-color: var(--hop-primary-text-strong);
316
+ --hop-Badge-primary-background-color: var(--hop-primary-surface-strong);
317
+ --hop-Badge-secondary-text-color: var(--hop-neutral-text);
318
+ --hop-Badge-secondary-background-color: var(--hop-neutral-surface-weak);
319
+ --hop-Badge-text-color-disabled: var(--hop-neutral-text-disabled);
320
+ --hop-Badge-background-color-disabled: var(--hop-neutral-surface-disabled);
321
+ --height: var(--hop-Badge-height);
322
+ --padding-inline: var(--hop-Badge-padding-inline);
323
+ --border-radius: var(--hop-Badge-border-radius);
324
+ display: inline-flex;
325
+ align-items: center;
326
+ justify-content: center;
327
+ box-sizing: border-box;
328
+ inline-size: max-content;
329
+ block-size: var(--height);
330
+ padding-inline: var(--padding-inline);
331
+ color: var(--text-color, var(--hop-Badge-primary-text-color));
332
+ background-color: var(--background-color, var(--hop-Badge-primary-background-color));
333
+ border-radius: var(--border-radius);
334
+ }
335
+ .Badge-module__hop-Badge--primary___-DIFS {
336
+ --background-color: var(--hop-Badge-primary-background-color);
337
+ --text-color: var(--hop-Badge-primary-text-color);
338
+ }
339
+ .Badge-module__hop-Badge--secondary___aTpzY {
340
+ --background-color: var(--hop-Badge-secondary-background-color);
341
+ --text-color: var(--hop-Badge-secondary-text-color);
342
+ }
343
+ .Badge-module__hop-Badge___gejg5[data-disabled] {
344
+ --background-color: var(--hop-Badge-background-color-disabled);
345
+ --text-color: var(--hop-Badge-text-color-disabled);
346
+ }
347
+
348
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/IconList/src/IconList.module.css/#css-module-data */
349
+ .IconList-module__hop-IconList___to9W2 {
350
+ --hop-IconList-gap: var(--hop-space-inline-xs);
351
+ display: flex;
352
+ flex-wrap: wrap;
353
+ gap: var(--hop-IconList-gap);
354
+ box-sizing: border-box;
355
+ }
356
+
357
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/Label/src/Label.module.css/#css-module-data */
358
+ .Label-module__hop-Label___1Q95u {
359
+ --hop-Label-xs-font-size: var(--hop-body-xs-font-size);
360
+ --hop-Label-xs-font-family: var(--hop-body-xs-font-family);
361
+ --hop-Label-xs-font-weight: var(--hop-body-xs-font-weight);
362
+ --hop-Label-xs-line-height: var(--hop-body-xs-line-height);
363
+ --hop-Label-sm-font-size: var(--hop-body-sm-font-size);
364
+ --hop-Label-sm-font-family: var(--hop-body-sm-font-family);
365
+ --hop-Label-sm-font-weight: var(--hop-body-sm-font-weight);
366
+ --hop-Label-sm-line-height: var(--hop-body-sm-line-height);
367
+ --hop-Label-md-font-size: var(--hop-body-md-font-size);
368
+ --hop-Label-md-font-family: var(--hop-body-md-font-family);
369
+ --hop-Label-md-font-weight: var(--hop-body-md-font-weight);
370
+ --hop-Label-md-line-height: var(--hop-body-md-line-height);
371
+ --hop-Label-lg-font-size: var(--hop-body-lg-font-size);
372
+ --hop-Label-lg-font-family: var(--hop-body-lg-font-family);
373
+ --hop-Label-lg-font-weight: var(--hop-body-lg-font-weight);
374
+ --hop-Label-lg-line-height: var(--hop-body-lg-line-height);
375
+ --hop-Label-xl-font-size: var(--hop-body-xl-font-size);
376
+ --hop-Label-xl-font-family: var(--hop-body-xl-font-family);
377
+ --hop-Label-xl-font-weight: var(--hop-body-xl-font-weight);
378
+ --hop-Label-xl-line-height: var(--hop-body-xl-line-height);
379
+ --hop-Label-2xl-font-size: var(--hop-body-2xl-font-size);
380
+ --hop-Label-2xl-font-family: var(--hop-body-2xl-font-family);
381
+ --hop-Label-2xl-font-weight: var(--hop-body-2xl-font-weight);
382
+ --hop-Label-2xl-line-height: var(--hop-body-2xl-line-height);
383
+ --hop-Label-inherit-size-font-size: inherit;
384
+ --hop-Label-inherit-size-font-family: inherit;
385
+ --hop-Label-inherit-size-font-weight: inherit;
386
+ --hop-Label-inherit-size-line-height: inherit;
387
+ }
388
+ :where(.Label-module__hop-Label___1Q95u) {
389
+ font-family: var(--font-family);
390
+ font-size: var(--font-size);
391
+ font-weight: var(--font-weight);
392
+ line-height: var(--line-height);
393
+ }
394
+ :where(.Label-module__hop-Label--xs___26au1) {
395
+ --font-size: var(--hop-Label-xs-font-size);
396
+ --font-family: var(--hop-Label-xs-font-family);
397
+ --font-weight: var(--hop-Label-xs-font-weight);
398
+ --line-height: var(--hop-Label-xs-line-height);
399
+ }
400
+ :where(.Label-module__hop-Label--sm___yXnaV) {
401
+ --font-size: var(--hop-Label-sm-font-size);
402
+ --font-family: var(--hop-Label-sm-font-family);
403
+ --font-weight: var(--hop-Label-sm-font-weight);
404
+ --line-height: var(--hop-Label-sm-line-height);
405
+ }
406
+ :where(.Label-module__hop-Label--md___KkrL-) {
407
+ --font-size: var(--hop-Label-md-font-size);
408
+ --font-family: var(--hop-Label-md-font-family);
409
+ --font-weight: var(--hop-Label-md-font-weight);
410
+ --line-height: var(--hop-Label-md-line-height);
411
+ }
412
+ :where(.Label-module__hop-Label--lg___t1zeQ) {
413
+ --font-size: var(--hop-Label-lg-font-size);
414
+ --font-family: var(--hop-Label-lg-font-family);
415
+ --font-weight: var(--hop-Label-lg-font-weight);
416
+ --line-height: var(--hop-Label-lg-line-height);
417
+ }
418
+ :where(.Label-module__hop-Label--xl___FWD2K) {
419
+ --font-size: var(--hop-Label-xl-font-size);
420
+ --font-family: var(--hop-Label-xl-font-family);
421
+ --font-weight: var(--hop-Label-xl-font-weight);
422
+ --line-height: var(--hop-Label-xl-line-height);
423
+ }
424
+ :where(.Label-module__hop-Label--2xl___nw4yX) {
425
+ --font-size: var(--hop-Label-2xl-font-size);
426
+ --font-family: var(--hop-Label-2xl-font-family);
427
+ --font-weight: var(--hop-Label-2xl-font-weight);
428
+ --line-height: var(--hop-Label-2xl-line-height);
429
+ }
430
+ :where(.Label-module__hop-Label--inherit___1xo-7) {
431
+ --font-size: var(--hop-Label-inherit-size-font-size);
432
+ --font-family: var(--hop-Label-inherit-size-font-family);
433
+ --font-weight: var(--hop-Label-inherit-size-font-weight);
434
+ --line-height: var(--hop-Label-inherit-size-line-height);
435
+ }
436
+
437
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/Spinner/src/Spinner.module.css/#css-module-data */
438
+ @keyframes Spinner-module__spin___F4J93 {
439
+ 0% {
440
+ transform: rotate(0deg);
441
+ }
442
+ 100% {
443
+ transform: rotate(360deg);
444
+ }
445
+ }
446
+ .Spinner-module__hop-Spinner___t2j7Q {
447
+ --hop-Spinner-border-radius: var(--hop-shape-circle);
448
+ --hop-Spinner-sm-wheel-size: 1rem;
449
+ --hop-Spinner-md-wheel-size: 1.25rem;
450
+ --hop-Spinner-lg-wheel-size: 1.5rem;
451
+ --hop-Spinner-track-width: 0.125rem;
452
+ --hop-Spinner-track-opacity: 0.2;
453
+ --hop-Spinner-track-border: var(--hop-Spinner-track-width) solid currentcolor;
454
+ --hop-Spinner-fill-animation: Spinner-module__spin___F4J93 .8s infinite linear;
455
+ --hop-Spinner-fill-animation-reduced-motion-duration: 2s;
456
+ --hop-Spinner-fill-border: var(--hop-Spinner-track-width) solid transparent;
457
+ --hop-Spinner-fill-border-inline-start: var(--hop-Spinner-track-width) solid currentcolor;
458
+ --hop-Spinner-label-margin-inline-start: var(--hop-space-inline-sm);
459
+ display: grid;
460
+ grid-template-areas: "spinner label";
461
+ grid-template-columns: min-content auto;
462
+ align-items: center;
463
+ box-sizing: border-box;
464
+ }
465
+ .Spinner-module__hop-Spinner--sm___0huCq {
466
+ --width: var(--hop-Spinner-sm-wheel-size);
467
+ --height: var(--hop-Spinner-sm-wheel-size);
468
+ }
469
+ .Spinner-module__hop-Spinner--md___vhdek {
470
+ --width: var(--hop-Spinner-md-wheel-size);
471
+ --height: var(--hop-Spinner-md-wheel-size);
472
+ }
473
+ .Spinner-module__hop-Spinner--lg___fQeir {
474
+ --width: var(--hop-Spinner-lg-wheel-size);
475
+ --height: var(--hop-Spinner-lg-wheel-size);
476
+ }
477
+ .Spinner-module__hop-Spinner__track___7mFcL {
478
+ grid-area: spinner;
479
+ box-sizing: border-box;
480
+ inline-size: var(--width, var(--hop-Spinner-md-wheel-size));
481
+ block-size: var(--height, var(--hop-Spinner-md-wheel-size));
482
+ opacity: var(--hop-Spinner-track-opacity);
483
+ border: var(--hop-Spinner-track-border);
484
+ border-radius: var(--hop-Spinner-border-radius);
485
+ }
486
+ .Spinner-module__hop-Spinner__fill___ZyNaP {
487
+ grid-area: spinner;
488
+ box-sizing: border-box;
489
+ inline-size: var(--width, var(--hop-Spinner-md-wheel-size));
490
+ block-size: var(--height, var(--hop-Spinner-md-wheel-size));
491
+ border: var(--hop-Spinner-fill-border);
492
+ border-inline-start: var(--hop-Spinner-fill-border-inline-start);
493
+ border-radius: var(--hop-Spinner-border-radius);
494
+ animation: var(--hop-Spinner-fill-animation);
495
+ }
496
+ @media (prefers-reduced-motion: reduce) {
497
+ .Spinner-module__hop-Spinner__fill___ZyNaP {
498
+ animation-duration: var(--hop-Spinner-fill-animation-reduced-motion-duration);
499
+ }
500
+ }
501
+ .Spinner-module__hop-Spinner__label___a5K-1 {
502
+ grid-area: label;
503
+ margin-inline-start: var(--hop-Spinner-label-margin-inline-start);
504
+ }
505
+
506
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/buttons/src/Button.module.css/#css-module-data */
507
+ .Button-module__hop-Button___UAzFm {
508
+ --hop-Button-border-radius: var(--hop-shape-rounded-md);
509
+ --hop-Button-focus-ring-color: var(--hop-primary-border-focus);
510
+ --hop-Button-icon-only-padding: 0;
511
+ --hop-Button-sm-height: 2rem;
512
+ --hop-Button-md-height: 2.5rem;
513
+ --hop-Button-primary-color: var(--hop-primary-text-strong);
514
+ --hop-Button-primary-color-hover: var(--hop-primary-text-strong-hover);
515
+ --hop-Button-primary-color-pressed: var(--hop-primary-text-strong);
516
+ --hop-Button-primary-color-disabled: var(--hop-neutral-text-disabled);
517
+ --hop-Button-primary-background-color: var(--hop-primary-surface-strong);
518
+ --hop-Button-primary-background-color-hover: var(--hop-primary-surface-strong-hover);
519
+ --hop-Button-primary-background-color-pressed: var(--hop-primary-surface-strong-press);
520
+ --hop-Button-primary-background-color-disabled: var(--hop-neutral-surface-disabled);
521
+ --hop-Button-primary-border: 0.0625rem solid var(--hop-Button-primary-background-color);
522
+ --hop-Button-primary-border-hover: 0.0625rem solid var(--hop-Button-primary-background-color-hover);
523
+ --hop-Button-primary-border-pressed: 0.0625rem solid var(--hop-Button-primary-background-color-pressed);
524
+ --hop-Button-primary-border-disabled: 0.0625rem solid var(--hop-Button-primary-background-color-disabled);
525
+ --hop-Button-primary-spinner-color: var(--hop-primary-icon-strong);
526
+ --hop-Button-primary-sm-padding-x: var(--hop-space-inset-sm);
527
+ --hop-Button-primary-sm-padding-y: 0;
528
+ --hop-Button-primary-md-padding-x: var(--hop-space-inset-md);
529
+ --hop-Button-primary-md-padding-y: 0;
530
+ --hop-Button-secondary-color: var(--hop-neutral-text);
531
+ --hop-Button-secondary-color-hover: var(--hop-neutral-text-hover);
532
+ --hop-Button-secondary-color-pressed: var(--hop-neutral-text-press);
533
+ --hop-Button-secondary-color-disabled: var(--hop-neutral-text-disabled);
534
+ --hop-Button-secondary-background-color: var(--hop-neutral-surface);
535
+ --hop-Button-secondary-background-color-hover: var(--hop-neutral-surface-hover);
536
+ --hop-Button-secondary-background-color-pressed: var(--hop-neutral-surface-press);
537
+ --hop-Button-secondary-background-color-disabled: var(--hop-neutral-surface-disabled);
538
+ --hop-Button-secondary-border: 0.0625rem solid var(--hop-neutral-border-strong);
539
+ --hop-Button-secondary-border-hover: 0.0625rem solid var(--hop-neutral-border-strong-hover);
540
+ --hop-Button-secondary-border-pressed: 0.0625rem solid var(--hop-neutral-border-strong);
541
+ --hop-Button-secondary-border-disabled: 0.0625rem solid var(--hop-Button-secondary-background-color-disabled);
542
+ --hop-Button-secondary-spinner-color: var(--hop-neutral-icon);
543
+ --hop-Button-secondary-sm-padding-x: var(--hop-space-inset-sm);
544
+ --hop-Button-secondary-sm-padding-y: 0;
545
+ --hop-Button-secondary-md-padding-x: var(--hop-space-inset-md);
546
+ --hop-Button-secondary-md-padding-y: 0;
547
+ --hop-Button-upsell-color: var(--hop-upsell-text);
548
+ --hop-Button-upsell-color-hover: var(--hop-upsell-text-hover);
549
+ --hop-Button-upsell-color-pressed: var(--hop-upsell-text-press);
550
+ --hop-Button-upsell-color-disabled: var(--hop-neutral-text-disabled);
551
+ --hop-Button-upsell-background-color: var(--hop-upsell-surface);
552
+ --hop-Button-upsell-background-color-hover: var(--hop-upsell-surface-hover);
553
+ --hop-Button-upsell-background-color-pressed: var(--hop-upsell-surface-press);
554
+ --hop-Button-upsell-background-color-disabled: var(--hop-neutral-surface-disabled);
555
+ --hop-Button-upsell-border: 0.0625rem solid var(--hop-Button-upsell-background-color);
556
+ --hop-Button-upsell-border-hover: 0.0625rem solid var(--hop-Button-upsell-background-color-hover);
557
+ --hop-Button-upsell-border-pressed: 0.0625rem solid var(--hop-Button-upsell-background-color-pressed);
558
+ --hop-Button-upsell-border-disabled: 0.0625rem solid var(--hop-Button-upsell-background-color-disabled);
559
+ --hop-Button-upsell-spinner-color: var(--hop-upsell-icon);
560
+ --hop-Button-upsell-sm-padding-x: var(--hop-space-inset-sm);
561
+ --hop-Button-upsell-sm-padding-y: 0;
562
+ --hop-Button-upsell-md-padding-x: var(--hop-space-inset-md);
563
+ --hop-Button-upsell-md-padding-y: 0;
564
+ --hop-Button-danger-color: var(--hop-danger-text-strong);
565
+ --hop-Button-danger-color-hover: var(--hop-danger-text-strong-hover);
566
+ --hop-Button-danger-color-pressed: var(--hop-danger-text-strong-hover);
567
+ --hop-Button-danger-color-disabled: var(--hop-neutral-text-disabled);
568
+ --hop-Button-danger-background-color: var(--hop-danger-surface-strong);
569
+ --hop-Button-danger-background-color-hover: var(--hop-danger-surface-strong-hover);
570
+ --hop-Button-danger-background-color-pressed: var(--hop-danger-surface-press);
571
+ --hop-Button-danger-background-color-disabled: var(--hop-neutral-surface-disabled);
572
+ --hop-Button-danger-border: 0.0625rem solid var(--hop-Button-danger-background-color);
573
+ --hop-Button-danger-border-hover: 0.0625rem solid var(--hop-Button-danger-background-color-hover);
574
+ --hop-Button-danger-border-pressed: 0.0625rem solid var(--hop-Button-danger-background-color-pressed);
575
+ --hop-Button-danger-border-disabled: 0.0625rem solid var(--hop-Button-danger-background-color-disabled);
576
+ --hop-Button-danger-spinner-color: var(--hop-primary-icon-strong);
577
+ --hop-Button-danger-sm-padding-x: var(--hop-space-inset-sm);
578
+ --hop-Button-danger-sm-padding-y: 0;
579
+ --hop-Button-danger-md-padding-x: var(--hop-space-inset-md);
580
+ --hop-Button-danger-md-padding-y: 0;
581
+ --hop-Button-ghost-primary-color: var(--hop-primary-text);
582
+ --hop-Button-ghost-primary-color-hover: var(--hop-primary-text-hover);
583
+ --hop-Button-ghost-primary-color-pressed: var(--hop-primary-text-press);
584
+ --hop-Button-ghost-primary-color-disabled: var(--hop-neutral-text-disabled);
585
+ --hop-Button-ghost-primary-background-color: transparent;
586
+ --hop-Button-ghost-primary-background-color-hover: var(--hop-neutral-surface-hover);
587
+ --hop-Button-ghost-primary-background-color-pressed: var(--hop-primary-surface-weak-press);
588
+ --hop-Button-ghost-primary-background-color-disabled: transparent;
589
+ --hop-Button-ghost-primary-border: 0.0625rem solid var(--hop-Button-ghost-primary-background-color);
590
+ --hop-Button-ghost-primary-border-hover: 0.0625rem solid var(--hop-Button-ghost-primary-background-color-hover);
591
+ --hop-Button-ghost-primary-border-pressed: 0.0625rem solid var(--hop-Button-ghost-primary-background-color-pressed);
592
+ --hop-Button-ghost-primary-border-disabled: 0.0625rem solid var(--hop-Button-ghost-primary-background-color-disabled);
593
+ --hop-Button-ghost-primary-spinner-color: var(--hop-neutral-icon);
594
+ --hop-Button-ghost-primary-sm-padding-x: var(--hop-space-inset-xs);
595
+ --hop-Button-ghost-primary-sm-padding-y: 0;
596
+ --hop-Button-ghost-primary-md-padding-x: var(--hop-space-inset-sm);
597
+ --hop-Button-ghost-primary-md-padding-y: 0;
598
+ --hop-Button-ghost-secondary-color: var(--hop-neutral-text);
599
+ --hop-Button-ghost-secondary-color-hover: var(--hop-neutral-text-hover);
600
+ --hop-Button-ghost-secondary-color-pressed: var(--hop-neutral-text-press);
601
+ --hop-Button-ghost-secondary-color-disabled: var(--hop-neutral-text-disabled);
602
+ --hop-Button-ghost-secondary-background-color: transparent;
603
+ --hop-Button-ghost-secondary-background-color-hover: var(--hop-neutral-surface-hover);
604
+ --hop-Button-ghost-secondary-background-color-pressed: var(--hop-neutral-surface-press);
605
+ --hop-Button-ghost-secondary-background-color-disabled: transparent;
606
+ --hop-Button-ghost-secondary-border: 0.0625rem solid var(--hop-Button-ghost-secondary-background-color);
607
+ --hop-Button-ghost-secondary-border-hover: 0.0625rem solid var(--hop-Button-ghost-secondary-background-color-hover);
608
+ --hop-Button-ghost-secondary-border-pressed: 0.0625rem solid var(--hop-Button-ghost-secondary-background-color-pressed);
609
+ --hop-Button-ghost-secondary-border-disabled: 0.0625rem solid var(--hop-Button-ghost-secondary-background-color-disabled);
610
+ --hop-Button-ghost-secondary-spinner-color: var(--hop-neutral-icon);
611
+ --hop-Button-ghost-secondary-sm-padding-x: var(--hop-space-inset-xs);
612
+ --hop-Button-ghost-secondary-sm-padding-y: 0;
613
+ --hop-Button-ghost-secondary-md-padding-x: var(--hop-space-inset-sm);
614
+ --hop-Button-ghost-secondary-md-padding-y: 0;
615
+ --hop-Button-ghost-danger-color: var(--hop-danger-text-weak);
616
+ --hop-Button-ghost-danger-color-hover: var(--hop-danger-text-hover);
617
+ --hop-Button-ghost-danger-color-pressed: var(--hop-danger-text-press);
618
+ --hop-Button-ghost-danger-color-disabled: var(--hop-neutral-text-disabled);
619
+ --hop-Button-ghost-danger-background-color: transparent;
620
+ --hop-Button-ghost-danger-background-color-hover: var(--hop-neutral-surface-hover);
621
+ --hop-Button-ghost-danger-background-color-pressed: var(--hop-danger-surface-weak-press);
622
+ --hop-Button-ghost-danger-background-color-disabled: transparent;
623
+ --hop-Button-ghost-danger-border: 0.0625rem solid var(--hop-Button-ghost-danger-background-color);
624
+ --hop-Button-ghost-danger-border-hover: 0.0625rem solid var(--hop-Button-ghost-danger-background-color-hover);
625
+ --hop-Button-ghost-danger-border-pressed: 0.0625rem solid var(--hop-Button-ghost-danger-background-color-pressed);
626
+ --hop-Button-ghost-danger-border-disabled: 0.0625rem solid var(--hop-Button-ghost-danger-background-color-disabled);
627
+ --hop-Button-ghost-danger-spinner-color: var(--hop-neutral-icon);
628
+ --hop-Button-ghost-danger-sm-padding-x: var(--hop-space-inset-xs);
629
+ --hop-Button-ghost-danger-sm-padding-y: 0;
630
+ --hop-Button-ghost-danger-md-padding-x: var(--hop-space-inset-sm);
631
+ --hop-Button-ghost-danger-md-padding-y: 0;
632
+ --inline-size: max-content;
633
+ --block-size: var(--hop-Button-md-height);
634
+ --background-color: var(--hop-primary-surface-strong);
635
+ --color: var(--hop-primary-text-strong);
636
+ --spinner: var(--hop-primary-icon-strong);
637
+ --border: 0;
638
+ --padding-inline: 0;
639
+ --padding-block: 0;
640
+ cursor: pointer;
641
+ position: relative;
642
+ overflow: hidden;
643
+ display: grid;
644
+ grid-template-areas: "start-icon content end-icon";
645
+ grid-template-columns: auto min-content auto;
646
+ column-gap: var(--hop-space-inline-xs);
647
+ align-items: center;
648
+ box-sizing: border-box;
649
+ inline-size: var(--inline-size);
650
+ block-size: var(--block-size);
651
+ padding-block: var(--padding-block);
652
+ padding-inline: var(--padding-inline);
653
+ color: var(--color);
654
+ text-decoration: none;
655
+ white-space: nowrap;
656
+ background-color: var(--background-color);
657
+ border: var(--border);
658
+ border-radius: var(--hop-Button-border-radius);
659
+ outline: none;
660
+ outline-offset: 0.125rem;
661
+ transition:
662
+ color var(--hop-easing-duration-2) var(--hop-easing-productive),
663
+ background-color var(--hop-easing-duration-2) var(--hop-easing-productive),
664
+ border var(--hop-easing-duration-2) var(--hop-easing-productive);
665
+ }
666
+ .Button-module__hop-Button___UAzFm[data-focus-visible] {
667
+ outline: 0.125rem solid var(--hop-Button-focus-ring-color);
668
+ }
669
+ .Button-module__hop-Button--icon-only___05dkO {
670
+ --padding-block: var(--hop-Button-icon-only-padding);
671
+ --padding-inline: var(--hop-Button-icon-only-padding);
672
+ column-gap: 0;
673
+ aspect-ratio: 1;
674
+ }
675
+ .Button-module__hop-Button___UAzFm[data-disabled],
676
+ .Button-module__hop-Button___UAzFm[data-loading] {
677
+ cursor: not-allowed;
678
+ }
679
+ .Button-module__hop-Button--fluid___YVpDX {
680
+ --inline-size: 100%;
681
+ }
682
+ .Button-module__hop-Button--sm___gvwId {
683
+ --block-size: var(--hop-Button-sm-height);
684
+ }
685
+ .Button-module__hop-Button--primary___A28Rq.Button-module__hop-Button--sm___gvwId:not(.Button-module__hop-Button--icon-only___05dkO) {
686
+ --padding-inline: var(--hop-Button-primary-sm-padding-x);
687
+ --padding-block: var(--hop-Button-primary-sm-padding-y);
688
+ }
689
+ .Button-module__hop-Button--primary___A28Rq.Button-module__hop-Button--md___M3MyD:not(.Button-module__hop-Button--icon-only___05dkO) {
690
+ --padding-inline: var(--hop-Button-primary-md-padding-x);
691
+ --padding-block: var(--hop-Button-primary-md-padding-y);
692
+ }
693
+ .Button-module__hop-Button--secondary___u0ZGt.Button-module__hop-Button--md___M3MyD:not(.Button-module__hop-Button--icon-only___05dkO) {
694
+ --padding-inline: var(--hop-Button-secondary-md-padding-x);
695
+ --padding-block: var(--hop-Button-secondary-md-padding-y);
696
+ }
697
+ .Button-module__hop-Button--secondary___u0ZGt.Button-module__hop-Button--sm___gvwId:not(.Button-module__hop-Button--icon-only___05dkO) {
698
+ --padding-inline: var(--hop-Button-secondary-sm-padding-x);
699
+ --padding-block: var(--hop-Button-secondary-sm-padding-y);
700
+ }
701
+ .Button-module__hop-Button--upsell___arFHv.Button-module__hop-Button--md___M3MyD:not(.Button-module__hop-Button--icon-only___05dkO) {
702
+ --padding-inline: var(--hop-Button-upsell-md-padding-x);
703
+ --padding-block: var(--hop-Button-upsell-md-padding-y);
704
+ }
705
+ .Button-module__hop-Button--upsell___arFHv.Button-module__hop-Button--sm___gvwId:not(.Button-module__hop-Button--icon-only___05dkO) {
706
+ --padding-inline: var(--hop-Button-upsell-sm-padding-x);
707
+ --padding-block: var(--hop-Button-upsell-sm-padding-y);
708
+ }
709
+ .Button-module__hop-Button--danger___lL8-r.Button-module__hop-Button--md___M3MyD:not(.Button-module__hop-Button--icon-only___05dkO) {
710
+ --padding-inline: var(--hop-Button-danger-md-padding-x);
711
+ --padding-block: var(--hop-Button-danger-md-padding-y);
712
+ }
713
+ .Button-module__hop-Button--danger___lL8-r.Button-module__hop-Button--sm___gvwId:not(.Button-module__hop-Button--icon-only___05dkO) {
714
+ --padding-inline: var(--hop-Button-danger-sm-padding-x);
715
+ --padding-block: var(--hop-Button-danger-sm-padding-y);
716
+ }
717
+ .Button-module__hop-Button--ghost-danger___X4kNh.Button-module__hop-Button--md___M3MyD:not(.Button-module__hop-Button--icon-only___05dkO) {
718
+ --padding-inline: var(--hop-Button-ghost-danger-md-padding-x);
719
+ --padding-block: var(--hop-Button-ghost-danger-md-padding-y);
720
+ }
721
+ .Button-module__hop-Button--ghost-danger___X4kNh.Button-module__hop-Button--sm___gvwId:not(.Button-module__hop-Button--icon-only___05dkO) {
722
+ --padding-inline: var(--hop-Button-ghost-danger-sm-padding-x);
723
+ --padding-block: var(--hop-Button-ghost-danger-sm-padding-y);
724
+ }
725
+ .Button-module__hop-Button--ghost-secondary___aN7yP.Button-module__hop-Button--md___M3MyD:not(.Button-module__hop-Button--icon-only___05dkO) {
726
+ --padding-inline: var(--hop-Button-ghost-secondary-md-padding-x);
727
+ --padding-block: var(--hop-Button-ghost-secondary-md-padding-y);
728
+ }
729
+ .Button-module__hop-Button--ghost-secondary___aN7yP.Button-module__hop-Button--sm___gvwId:not(.Button-module__hop-Button--icon-only___05dkO) {
730
+ --padding-inline: var(--hop-Button-ghost-secondary-sm-padding-x);
731
+ --padding-block: var(--hop-Button-ghost-secondary-sm-padding-y);
732
+ }
733
+ .Button-module__hop-Button--ghost-primary___vBKjd.Button-module__hop-Button--md___M3MyD:not(.Button-module__hop-Button--icon-only___05dkO) {
734
+ --padding-inline: var(--hop-Button-ghost-primary-md-padding-x);
735
+ --padding-block: var(--hop-Button-ghost-primary-md-padding-y);
736
+ }
737
+ .Button-module__hop-Button--ghost-primary___vBKjd.Button-module__hop-Button--sm___gvwId:not(.Button-module__hop-Button--icon-only___05dkO) {
738
+ --padding-inline: var(--hop-Button-ghost-primary-sm-padding-x);
739
+ --padding-block: var(--hop-Button-ghost-primary-sm-padding-y);
740
+ }
741
+ .Button-module__hop-Button--primary___A28Rq {
742
+ --background-color: var(--hop-Button-primary-background-color);
743
+ --color: var(--hop-Button-primary-color);
744
+ --border: var(--hop-Button-primary-border);
745
+ --spinner-color: var(--hop-Button-primary-spinner-color);
746
+ }
747
+ .Button-module__hop-Button--primary___A28Rq[data-disabled]:not([data-loading]) {
748
+ --background-color: var(--hop-Button-primary-background-color-disabled);
749
+ --color: var(--hop-Button-primary-color-disabled);
750
+ --border: var(--hop-Button-primary-border-disabled);
751
+ }
752
+ .Button-module__hop-Button--primary___A28Rq[data-hovered]:not([data-disabled], [data-loading]),
753
+ .Button-module__hop-Button--primary___A28Rq[data-focus-visible]:not([data-disabled], [data-loading]) {
754
+ --background-color: var(--hop-Button-primary-background-color-hover);
755
+ --color: var(--hop-Button-primary-color-hover);
756
+ --border: var(--hop-Button-primary-border-hover);
757
+ }
758
+ .Button-module__hop-Button--primary___A28Rq[data-pressed]:not([data-loading]) {
759
+ --background-color: var(--hop-Button-primary-background-color-pressed);
760
+ --color: var(--hop-Button-primary-color-pressed);
761
+ --border: var(--hop-Button-primary-border-pressed);
762
+ }
763
+ .Button-module__hop-Button--secondary___u0ZGt {
764
+ --background-color: var(--hop-Button-secondary-background-color);
765
+ --color: var(--hop-Button-secondary-color);
766
+ --border: var(--hop-Button-secondary-border);
767
+ --spinner-color: var(--hop-Button-secondary-spinner-color);
768
+ }
769
+ .Button-module__hop-Button--secondary___u0ZGt[data-disabled]:not([data-loading]) {
770
+ --background-color: var(--hop-Button-secondary-background-color-disabled);
771
+ --color: var(--hop-Button-secondary-color-disabled);
772
+ --border: var(--hop-Button-secondary-border-disabled);
773
+ }
774
+ .Button-module__hop-Button--secondary___u0ZGt[data-hovered]:not([data-disabled], [data-loading]),
775
+ .Button-module__hop-Button--secondary___u0ZGt[data-focus-visible]:not([data-disabled], [data-loading]) {
776
+ --background-color: var(--hop-Button-secondary-background-color-hover);
777
+ --color: var(--hop-Button-secondary-color-hover);
778
+ --border: var(--hop-Button-secondary-border-hover);
779
+ }
780
+ .Button-module__hop-Button--secondary___u0ZGt[data-pressed]:not([data-loading]) {
781
+ --background-color: var(--hop-Button-secondary-background-color-pressed);
782
+ --color: var(--hop-Button-secondary-color-pressed);
783
+ --border: var(--hop-Button-secondary-border-pressed);
784
+ }
785
+ .Button-module__hop-Button--upsell___arFHv {
786
+ --background-color: var(--hop-Button-upsell-background-color);
787
+ --color: var(--hop-Button-upsell-color);
788
+ --border: var(--hop-Button-upsell-border);
789
+ --spinner-color: var(--hop-Button-upsell-spinner-color);
790
+ }
791
+ .Button-module__hop-Button--upsell___arFHv[data-disabled]:not([data-loading]) {
792
+ --background-color: var(--hop-Button-upsell-background-color-disabled);
793
+ --color: var(--hop-Button-upsell-color-disabled);
794
+ --border: var(--hop-Button-upsell-border-disabled);
795
+ }
796
+ .Button-module__hop-Button--upsell___arFHv[data-hovered]:not([data-disabled], [data-loading]),
797
+ .Button-module__hop-Button--upsell___arFHv[data-focus-visible]:not([data-disabled], [data-loading]) {
798
+ --background-color: var(--hop-Button-upsell-background-color-hover);
799
+ --color: var(--hop-Button-upsell-color-hover);
800
+ --border: var(--hop-Button-upsell-border-hover);
801
+ }
802
+ .Button-module__hop-Button--upsell___arFHv[data-pressed]:not([data-loading]) {
803
+ --background-color: var(--hop-Button-upsell-background-color-pressed);
804
+ --color: var(--hop-Button-upsell-color-pressed);
805
+ --border: var(--hop-Button-upsell-border-pressed);
806
+ }
807
+ .Button-module__hop-Button--danger___lL8-r {
808
+ --background-color: var(--hop-Button-danger-background-color);
809
+ --color: var(--hop-Button-danger-color);
810
+ --border: var(--hop-Button-danger-border);
811
+ --spinner-color: var(--hop-Button-danger-spinner-color);
812
+ }
813
+ .Button-module__hop-Button--danger___lL8-r[data-disabled]:not([data-loading]) {
814
+ --background-color: var(--hop-Button-danger-background-color-disabled);
815
+ --color: var(--hop-Button-danger-color-disabled);
816
+ --border: var(--hop-Button-danger-border-disabled);
817
+ }
818
+ .Button-module__hop-Button--danger___lL8-r[data-hovered]:not([data-disabled], [data-loading]),
819
+ .Button-module__hop-Button--danger___lL8-r[data-focus-visible]:not([data-disabled], [data-loading]) {
820
+ --background-color: var(--hop-Button-danger-background-color-hover);
821
+ --color: var(--hop-Button-danger-color-hover);
822
+ --border: var(--hop-Button-danger-border-hover);
823
+ }
824
+ .Button-module__hop-Button--danger___lL8-r[data-pressed]:not([data-loading]) {
825
+ --background-color: var(--hop-Button-danger-background-color-pressed);
826
+ --color: var(--hop-Button-danger-color-pressed);
827
+ --border: var(--hop-Button-danger-border-pressed);
828
+ }
829
+ .Button-module__hop-Button--ghost-primary___vBKjd {
830
+ --background-color: var(--hop-Button-ghost-primary-background-color);
831
+ --color: var(--hop-Button-ghost-primary-color);
832
+ --border: var(--hop-Button-ghost-primary-border);
833
+ --spinner-color: var(--hop-Button-ghost-primary-spinner-color);
834
+ }
835
+ .Button-module__hop-Button--ghost-primary___vBKjd[data-disabled]:not([data-loading]) {
836
+ --background-color: var(--hop-Button-ghost-primary-background-color-disabled);
837
+ --color: var(--hop-Button-ghost-primary-color-disabled);
838
+ --border: var(--hop-Button-ghost-primary-border-disabled);
839
+ }
840
+ .Button-module__hop-Button--ghost-primary___vBKjd[data-hovered]:not([data-disabled], [data-loading]),
841
+ .Button-module__hop-Button--ghost-primary___vBKjd[data-focus-visible]:not([data-disabled], [data-loading]) {
842
+ --background-color: var(--hop-Button-ghost-primary-background-color-hover);
843
+ --color: var(--hop-Button-ghost-primary-color-hover);
844
+ --border: var(--hop-Button-ghost-primary-border-hover);
845
+ }
846
+ .Button-module__hop-Button--ghost-primary___vBKjd[data-pressed]:not([data-loading]) {
847
+ --background-color: var(--hop-Button-ghost-primary-background-color-pressed);
848
+ --color: var(--hop-Button-ghost-primary-color-pressed);
849
+ --border: var(--hop-Button-ghost-primary-border-pressed);
850
+ }
851
+ .Button-module__hop-Button--ghost-secondary___aN7yP {
852
+ --background-color: var(--hop-Button-ghost-secondary-background-color);
853
+ --color: var(--hop-Button-ghost-secondary-color);
854
+ --border: var(--hop-Button-ghost-secondary-border);
855
+ --spinner-color: var(--hop-Button-ghost-secondary-spinner-color);
856
+ }
857
+ .Button-module__hop-Button--ghost-secondary___aN7yP[data-disabled]:not([data-loading]) {
858
+ --background-color: var(--hop-Button-ghost-secondary-background-color-disabled);
859
+ --color: var(--hop-Button-ghost-secondary-color-disabled);
860
+ --border: var(--hop-Button-ghost-secondary-border-disabled);
861
+ }
862
+ .Button-module__hop-Button--ghost-secondary___aN7yP[data-hovered]:not([data-disabled], [data-loading]),
863
+ .Button-module__hop-Button--ghost-secondary___aN7yP[data-focus-visible]:not([data-disabled], [data-loading]) {
864
+ --background-color: var(--hop-Button-ghost-secondary-background-color-hover);
865
+ --color: var(--hop-Button-ghost-secondary-color-hover);
866
+ --border: var(--hop-Button-ghost-secondary-border-hover);
867
+ }
868
+ .Button-module__hop-Button--ghost-secondary___aN7yP[data-pressed]:not([data-loading]) {
869
+ --background-color: var(--hop-Button-ghost-secondary-background-color-pressed);
870
+ --color: var(--hop-Button-ghost-secondary-color-pressed);
871
+ --border: var(--hop-Button-ghost-secondary-border-pressed);
872
+ }
873
+ .Button-module__hop-Button--ghost-danger___X4kNh {
874
+ --background-color: var(--hop-Button-ghost-danger-background-color);
875
+ --color: var(--hop-Button-ghost-danger-color);
876
+ --border: var(--hop-Button-ghost-danger-border);
877
+ --spinner-color: var(--hop-Button-ghost-danger-spinner-color);
878
+ }
879
+ .Button-module__hop-Button--ghost-danger___X4kNh[data-disabled]:not([data-loading]) {
880
+ --background-color: var(--hop-Button-ghost-danger-background-color-disabled);
881
+ --color: var(--hop-Button-ghost-danger-color-disabled);
882
+ --border: var(--hop-Button-ghost-danger-border-disabled);
883
+ }
884
+ .Button-module__hop-Button--ghost-danger___X4kNh[data-hovered]:not([data-disabled], [data-loading]),
885
+ .Button-module__hop-Button--ghost-danger___X4kNh[data-focus-visible]:not([data-disabled], [data-loading]) {
886
+ --background-color: var(--hop-Button-ghost-danger-background-color-hover);
887
+ --color: var(--hop-Button-ghost-danger-color-hover);
888
+ --border: var(--hop-Button-ghost-danger-border-hover);
889
+ }
890
+ .Button-module__hop-Button--ghost-danger___X4kNh[data-pressed]:not([data-loading]) {
891
+ --background-color: var(--hop-Button-ghost-danger-background-color-pressed);
892
+ --color: var(--hop-Button-ghost-danger-color-pressed);
893
+ --border: var(--hop-Button-ghost-danger-border-pressed);
894
+ }
895
+ .Button-module__hop-Button__Spinner___kL-1- {
896
+ position: absolute;
897
+ justify-self: center;
898
+ color: var(--spinner-color);
899
+ }
900
+ .Button-module__hop-Button__icon___iMiLP,
901
+ .Button-module__hop-Button__icon-list___zInte {
902
+ grid-area: start-icon;
903
+ justify-self: end;
904
+ }
905
+ .Button-module__hop-Button__text___OyaRf {
906
+ user-select: none;
907
+ overflow: visible;
908
+ grid-area: content;
909
+ font-weight: var(--hop-font-weight-505);
910
+ text-wrap: nowrap;
911
+ }
912
+ .Button-module__hop-Button--ghost-primary___vBKjd[data-hovered]:not([data-loading]) .Button-module__hop-Button__text___OyaRf,
913
+ .Button-module__hop-Button--ghost-secondary___aN7yP[data-hovered]:not([data-loading]) .Button-module__hop-Button__text___OyaRf,
914
+ .Button-module__hop-Button--ghost-danger___X4kNh[data-hovered]:not([data-loading]) .Button-module__hop-Button__text___OyaRf,
915
+ .Button-module__hop-Button--ghost-primary___vBKjd[data-pressed]:not([data-loading]) .Button-module__hop-Button__text___OyaRf,
916
+ .Button-module__hop-Button--ghost-secondary___aN7yP[data-pressed]:not([data-loading]) .Button-module__hop-Button__text___OyaRf,
917
+ .Button-module__hop-Button--ghost-danger___X4kNh[data-pressed]:not([data-loading]) .Button-module__hop-Button__text___OyaRf,
918
+ .Button-module__hop-Button--ghost-primary___vBKjd[data-focus-visible]:not([data-loading]) .Button-module__hop-Button__text___OyaRf,
919
+ .Button-module__hop-Button--ghost-secondary___aN7yP[data-focus-visible]:not([data-loading]) .Button-module__hop-Button__text___OyaRf,
920
+ .Button-module__hop-Button--ghost-danger___X4kNh[data-focus-visible]:not([data-loading]) .Button-module__hop-Button__text___OyaRf {
921
+ text-decoration: underline;
922
+ text-underline-offset: 0.125rem;
923
+ }
924
+ .Button-module__hop-Button__end-icon___noDbN,
925
+ .Button-module__hop-Button__end-icon-list___mFNXl {
926
+ grid-area: end-icon;
927
+ }
928
+ .Button-module__hop-Button___UAzFm .Button-module__hop-Button__icon-list___zInte,
929
+ .Button-module__hop-Button___UAzFm .Button-module__hop-Button__end-icon-list___mFNXl {
930
+ flex-wrap: nowrap;
931
+ }
932
+ .Button-module__hop-Button___UAzFm[data-loading] > *:not(.Button-module__hop-Button__Spinner___kL-1-) {
933
+ opacity: 0;
934
+ }
935
+
936
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/buttons/src/ButtonGroup.module.css/#css-module-data */
937
+ .ButtonGroup-module__hop-ButtonGroup___Puvx- {
938
+ display: inline-flex;
939
+ flex-wrap: nowrap;
940
+ gap: var(--hop-space-inline-md);
941
+ }
942
+ .ButtonGroup-module__hop-ButtonGroup--horizontal___69pSm {
943
+ justify-content: center;
944
+ }
945
+ .ButtonGroup-module__hop-ButtonGroup--vertical___pbI9w {
946
+ flex-direction: column;
947
+ gap: var(--hop-space-stack-md);
948
+ align-items: center;
949
+ }
950
+ .ButtonGroup-module__hop-ButtonGroup--start___kjLfN.ButtonGroup-module__hop-ButtonGroup--vertical___pbI9w {
951
+ align-items: flex-start;
952
+ }
953
+ .ButtonGroup-module__hop-ButtonGroup--center___-WZys.ButtonGroup-module__hop-ButtonGroup--vertical___pbI9w {
954
+ align-items: center;
955
+ }
956
+ .ButtonGroup-module__hop-ButtonGroup--end___NaHco.ButtonGroup-module__hop-ButtonGroup--vertical___pbI9w {
957
+ align-items: flex-end;
958
+ }
959
+ .ButtonGroup-module__hop-ButtonGroup--start___kjLfN.ButtonGroup-module__hop-ButtonGroup--horizontal___69pSm {
960
+ justify-content: flex-start;
961
+ }
962
+ .ButtonGroup-module__hop-ButtonGroup--center___-WZys.ButtonGroup-module__hop-ButtonGroup--horizontal___69pSm {
963
+ justify-content: center;
964
+ }
965
+ .ButtonGroup-module__hop-ButtonGroup--end___NaHco.ButtonGroup-module__hop-ButtonGroup--horizontal___69pSm {
966
+ justify-content: flex-end;
967
+ }
968
+ .ButtonGroup-module__hop-ButtonGroup--wrap___XuRNe {
969
+ flex-wrap: wrap;
970
+ }
971
+ .ButtonGroup-module__hop-ButtonGroup--fluid___lKp5V {
972
+ inline-size: 100%;
973
+ }
974
+
975
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/buttons/src/EmbeddedButton.module.css/#css-module-data */
976
+ .EmbeddedButton-module__hop-EmbeddedButton___15Hny {
977
+ --hop-EmbeddedButton-border-radius: var(--hop-shape-rounded-md);
978
+ --hop-EmbeddedButton-focus-ring-color: var(--hop-primary-border-focus);
979
+ --hop-EmbeddedButton-color: var(--hop-neutral-icon-weak);
980
+ --hop-EmbeddedButton-color-hover: var(--hop-neutral-icon-weak-hover);
981
+ --hop-EmbeddedButton-color-pressed: var(--hop-neutral-icon-weak-press);
982
+ --hop-EmbeddedButton-color-disabled: var(--hop-neutral-icon-disabled);
983
+ --hop-EmbeddedButton-effect-background-color: transparent;
984
+ --hop-EmbeddedButton-effect-background-color-hover: var(--hop-neutral-surface-weak-hover);
985
+ --hop-EmbeddedButton-effect-background-color-pressed: var(--hop-neutral-surface-weak-press);
986
+ --hop-EmbeddedButton-effect-background-color-disabled: transparent;
987
+ --hop-EmbeddedButton-effect-border-radius: var(--hop-shape-circle);
988
+ --hop-EmbeddedButton-md-height: 1.5rem;
989
+ --hop-EmbeddedButton-md-width: 1.5rem;
990
+ --hop-EmbeddedButton-md-effect-height: 1rem;
991
+ --hop-EmbeddedButton-md-effect-width: 1rem;
992
+ --hop-EmbeddedButton-lg-height: 1.5rem;
993
+ --hop-EmbeddedButton-lg-width: 1.5rem;
994
+ --hop-EmbeddedButton-lg-effect-height: 1.5rem;
995
+ --hop-EmbeddedButton-lg-effect-width: 1.5rem;
996
+ --spinner: var(--hop-primary-icon-strong);
997
+ --padding-inline: 0;
998
+ --padding-block: 0;
999
+ --effect-background-color: var(--hop-EmbeddedButton-effect-background-color);
1000
+ --color: var(--hop-EmbeddedButton-color);
1001
+ --transition: var(--hop-easing-duration-2) var(--hop-easing-productive);
1002
+ --effect-border-radius: var(--hop-EmbeddedButton-effect-border-radius);
1003
+ --focus-ring-size: 0.125rem;
1004
+ cursor: pointer;
1005
+ position: relative;
1006
+ overflow: hidden;
1007
+ display: flex;
1008
+ flex-shrink: 0;
1009
+ align-items: center;
1010
+ justify-content: center;
1011
+ box-sizing: border-box;
1012
+ inline-size: var(--inline-size);
1013
+ block-size: var(--block-size);
1014
+ padding-block: var(--padding-block);
1015
+ padding-inline: var(--padding-inline);
1016
+ color: var(--color);
1017
+ text-decoration: none;
1018
+ white-space: nowrap;
1019
+ background: none;
1020
+ border: none;
1021
+ border-radius: var(--hop-EmbeddedButton-border-radius);
1022
+ outline: none;
1023
+ transition: color var(--transition);
1024
+ }
1025
+ .EmbeddedButton-module__hop-EmbeddedButton___15Hny::before {
1026
+ content: "";
1027
+ position: absolute;
1028
+ inset-block-start: 50%;
1029
+ inset-inline-start: 50%;
1030
+ transform: translate(-50%, -50%);
1031
+ display: block;
1032
+ inline-size: var(--effect-inline-size);
1033
+ block-size: var(--effect-block-size);
1034
+ background-color: var(--effect-background-color);
1035
+ border-radius: var(--effect-border-radius);
1036
+ transition: background-color var(--transition);
1037
+ }
1038
+ .EmbeddedButton-module__hop-EmbeddedButton--md___wjXPk {
1039
+ --inline-size: var(--hop-EmbeddedButton-md-width);
1040
+ --block-size: var(--hop-EmbeddedButton-md-height);
1041
+ --focus-ring-offset: calc(-1 * var(--focus-ring-size));
1042
+ }
1043
+ .EmbeddedButton-module__hop-EmbeddedButton--lg___-W1aK {
1044
+ --inline-size: var(--hop-EmbeddedButton-lg-width);
1045
+ --block-size: var(--hop-EmbeddedButton-lg-height);
1046
+ --focus-ring-offset: 0;
1047
+ }
1048
+ .EmbeddedButton-module__hop-EmbeddedButton--md___wjXPk::before {
1049
+ --effect-inline-size: var(--hop-EmbeddedButton-md-effect-width);
1050
+ --effect-block-size: var(--hop-EmbeddedButton-md-effect-height);
1051
+ }
1052
+ .EmbeddedButton-module__hop-EmbeddedButton--lg___-W1aK::before {
1053
+ --effect-inline-size: var(--hop-EmbeddedButton-lg-effect-width);
1054
+ --effect-block-size: var(--hop-EmbeddedButton-lg-effect-height);
1055
+ }
1056
+ .EmbeddedButton-module__hop-EmbeddedButton___15Hny[data-focus-visible] {
1057
+ outline: var(--focus-ring-size) solid var(--hop-EmbeddedButton-focus-ring-color);
1058
+ outline-offset: var(--focus-ring-offset);
1059
+ }
1060
+ .EmbeddedButton-module__hop-EmbeddedButton___15Hny[data-disabled] {
1061
+ --effect-background-color: var(--hop-EmbeddedButton-effect-background-color-disabled);
1062
+ --color: var(--hop-EmbeddedButton-color-disabled);
1063
+ cursor: not-allowed;
1064
+ }
1065
+ .EmbeddedButton-module__hop-EmbeddedButton___15Hny[data-hovered]:not([data-disabled], [data-pressed]),
1066
+ .EmbeddedButton-module__hop-EmbeddedButton___15Hny[data-focus-visible]:not([data-disabled], [data-pressed]) {
1067
+ --effect-background-color: var(--hop-EmbeddedButton-effect-background-color-hover);
1068
+ --color: var(--hop-EmbeddedButton-color-hover);
1069
+ }
1070
+ .EmbeddedButton-module__hop-EmbeddedButton___15Hny[data-pressed]:not([data-disabled]) {
1071
+ --effect-background-color: var(--hop-EmbeddedButton-effect-background-color-pressed);
1072
+ --color: var(--hop-EmbeddedButton-color-pressed);
1073
+ }
1074
+ .EmbeddedButton-module__hop-EmbeddedButton__icon___pSB2G {
1075
+ position: relative;
1076
+ }
1077
+
1078
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/checkbox/src/Checkbox.module.css/#css-module-data */
1079
+ .Checkbox-module__hop-Checkbox___AB4SB {
1080
+ --hop-Checkbox-box-border-size: 0.0625rem;
1081
+ --hop-Checkbox-box-border-color: var(--hop-neutral-border);
1082
+ --hop-Checkbox-box-background-color: var(--hop-neutral-surface);
1083
+ --hop-Checkbox-box-outline-size: 0.125rem;
1084
+ --hop-Checkbox-box-outline-color: var(--hop-primary-border-focus);
1085
+ --hop-Checkbox-check-color: var(--hop-neutral-icon-selected);
1086
+ --hop-Checkbox-check-display: none;
1087
+ --hop-Checkbox-text-color: var(--hop-neutral-text);
1088
+ --hop-Checkbox-icon-color: var(--hop-neutral-icon);
1089
+ --hop-Checkbox-box-border-color-hovered: var(--hop-neutral-border-hover);
1090
+ --hop-Checkbox-box-background-color-hovered: var(--hop-neutral-surface-hover);
1091
+ --hop-Checkbox-text-color-hovered: var(--hop-neutral-text-hover);
1092
+ --hop-Checkbox-icon-color-hovered: var(--hop-neutral-icon-hover);
1093
+ --hop-Checkbox-box-border-color-pressed: var(--hop-neutral-border-press);
1094
+ --hop-Checkbox-box-background-color-pressed: var(--hop-neutral-surface-press);
1095
+ --hop-Checkbox-text-color-pressed: var(--hop-neutral-text-press);
1096
+ --hop-Checkbox-icon-color-pressed: var(--hop-neutral-icon-press);
1097
+ --hop-Checkbox-box-border-color-selected: var(--hop-neutral-border-selected);
1098
+ --hop-Checkbox-box-background-color-selected: var(--hop-neutral-surface-selected);
1099
+ --hop-Checkbox-check-display-selected: block;
1100
+ --hop-Checkbox-text-color-selected: var(--hop-neutral-text);
1101
+ --hop-Checkbox-icon-color-selected: var(--hop-neutral-icon);
1102
+ --hop-Checkbox-box-border-color-disabled: var(--hop-neutral-border-disabled);
1103
+ --hop-Checkbox-box-background-color-disabled: var(--hop-neutral-surface-disabled);
1104
+ --hop-Checkbox-check-color-disabled: var(--hop-neutral-icon-disabled);
1105
+ --hop-Checkbox-text-color-disabled: var(--hop-neutral-text-disabled);
1106
+ --hop-Checkbox-icon-color-disabled: var(--hop-neutral-icon-disabled);
1107
+ --hop-Checkbox-box-border-color-focused: var(--hop-neutral-border-hover);
1108
+ --hop-Checkbox-box-background-color-focused: var(--hop-neutral-surface-hover);
1109
+ --hop-Checkbox-text-color-focused: var(--hop-neutral-text-hover);
1110
+ --hop-Checkbox-icon-color-focused: var(--hop-neutral-icon-hover);
1111
+ --hop-Checkbox-box-border-color-invalid: var(--hop-danger-border-strong);
1112
+ --hop-Checkbox-box-background-color-invalid: var(--hop-neutral-surface);
1113
+ --hop-Checkbox-box-border-color-hovered-invalid: var(--hop-danger-border-strong);
1114
+ --hop-Checkbox-box-background-color-hovered-invalid: var(--hop-danger-surface-weak-hover);
1115
+ --hop-Checkbox-box-border-color-pressed-invalid: var(--hop-danger-border-press);
1116
+ --hop-Checkbox-box-background-color-pressed-invalid: var(--hop-danger-surface-weak-press);
1117
+ --hop-Checkbox-box-border-color-focused-invalid: var(--hop-danger-border-press);
1118
+ --hop-Checkbox-box-background-color-focused-invalid: var(--hop-danger-surface);
1119
+ --hop-Checkbox-box-border-color-selected-invalid: var(--hop-danger-border-strong);
1120
+ --hop-Checkbox-box-background-color-selected-invalid: var(--hop-danger-surface-strong);
1121
+ --hop-Checkbox-check-color-invalid: var(--hop-danger-icon-strong);
1122
+ --hop-Checkbox-text-color-invalid: var(--hop-danger-text-weak);
1123
+ --hop-Checkbox-text-color-hovered-invalid: var(--hop-danger-text-weak-hover);
1124
+ --hop-Checkbox-text-color-pressed-invalid: var(--hop-danger-text-weak-press);
1125
+ --hop-Checkbox-icon-color-invalid: var(--hop-danger-icon-weak);
1126
+ --hop-Checkbox-icon-color-hovered-invalid: var(--hop-danger-icon-weak-hover);
1127
+ --hop-Checkbox-icon-color-pressed-invalid: var(--hop-danger-icon-weak-press);
1128
+ --hop-Checkbox-box-sm-block-size: 1rem;
1129
+ --hop-Checkbox-box-sm-inline-size: 1rem;
1130
+ --hop-Checkbox-text-sm-top-offset: calc((var(--box-inline-size) - (var(--hop-body-sm-line-height) * var(--hop-body-sm-font-size))) / 2);
1131
+ --hop-Checkbox-text-sm-margin-inline-start: calc(var(--hop-space-inline-sm) - var(--hop-space-inline-xs));
1132
+ --hop-Checkbox-box-md-block-size: 1.5rem;
1133
+ --hop-Checkbox-box-md-inline-size: 1.5rem;
1134
+ --hop-Checkbox-text-md-top-offset: calc((var(--box-inline-size) - (var(--hop-body-md-line-height) * var(--hop-body-md-font-size))) / 2);
1135
+ --hop-Checkbox-text-md-margin-inline-start: calc(var(--hop-space-inline-md) - var(--hop-space-inline-xs));
1136
+ --box-background-color: var(--hop-Checkbox-box-background-color);
1137
+ --box-border-color: var(--hop-Checkbox-box-border-color);
1138
+ --box-border-radius: var(--hop-shape-rounded-sm);
1139
+ --check-color: var(--hop-Checkbox-check-color);
1140
+ --check-display: var(--hop-Checkbox-check-display);
1141
+ --cursor: pointer;
1142
+ --text-color: var(--hop-Checkbox-text-color);
1143
+ --icon-color: var(--hop-Checkbox-icon-color);
1144
+ --description-color: var(--hop-Checkbox-description-color);
1145
+ --transition-duration: var(--hop-easing-duration-2);
1146
+ cursor: var(--cursor);
1147
+ display: flex;
1148
+ column-gap: var(--hop-space-inline-xs);
1149
+ align-items: flex-start;
1150
+ justify-content: flex-start;
1151
+ box-sizing: border-box;
1152
+ inline-size: max-content;
1153
+ max-inline-size: 100%;
1154
+ }
1155
+ .Checkbox-module__hop-Checkbox___AB4SB[data-focus-visible],
1156
+ .Checkbox-module__hop-Checkbox--focused___DQc5r {
1157
+ --box-background-color: var(--hop-Checkbox-box-background-color-focused);
1158
+ --box-border-color: var(--hop-Checkbox-box-border-color-focused);
1159
+ --box-outline: var(--hop-Checkbox-box-outline-size) solid var(--hop-Checkbox-box-outline-color);
1160
+ --text-color: var(--hop-Checkbox-text-color-focused);
1161
+ --icon-color: var(--hop-Checkbox-icon-color-focused);
1162
+ --description-color: var(--hop-Checkbox-description-color-focus);
1163
+ }
1164
+ .Checkbox-module__hop-Checkbox___AB4SB[data-hovered],
1165
+ .Checkbox-module__hop-Checkbox--hovered___X9SRZ {
1166
+ --box-background-color: var(--hop-Checkbox-box-background-color-hovered);
1167
+ --box-border-color: var(--hop-Checkbox-box-border-color-hovered);
1168
+ --text-color: var(--hop-Checkbox-text-color-hovered);
1169
+ --icon-color: var(--hop-Checkbox-icon-color-hovered);
1170
+ --description-color: var(--hop-Checkbox-description-color-hover);
1171
+ }
1172
+ .Checkbox-module__hop-Checkbox___AB4SB[data-pressed],
1173
+ .Checkbox-module__hop-Checkbox--pressed___LhSG7 {
1174
+ --box-background-color: var(--hop-Checkbox-box-background-color-pressed);
1175
+ --box-border-color: var(--hop-Checkbox-box-border-color-pressed);
1176
+ --text-color: var(--hop-Checkbox-text-color-pressed);
1177
+ --icon-color: var(--hop-Checkbox-icon-color-pressed);
1178
+ }
1179
+ .Checkbox-module__hop-Checkbox___AB4SB[data-selected] {
1180
+ --box-background-color: var(--hop-Checkbox-box-background-color-selected);
1181
+ --box-border-color: var(--hop-Checkbox-box-border-color-selected);
1182
+ --check-display: var(--hop-Checkbox-check-display-selected);
1183
+ --text-color: var(--hop-Checkbox-text-color-selected);
1184
+ --icon-color: var(--hop-Checkbox-icon-color-selected);
1185
+ --description-color: var(--hop-Checkbox-description-color-checked);
1186
+ }
1187
+ .Checkbox-module__hop-Checkbox___AB4SB[data-invalid] {
1188
+ --box-background-color: var(--hop-Checkbox-box-background-color-invalid);
1189
+ --box-border-color: var(--hop-Checkbox-box-border-color-invalid);
1190
+ --check-color: var(--hop-Checkbox-check-color-invalid);
1191
+ --text-color: var(--hop-Checkbox-text-color-invalid);
1192
+ --icon-color: var(--hop-Checkbox-icon-color-invalid);
1193
+ --description-color: var(--hop-Checkbox-description-color-invalid);
1194
+ }
1195
+ .Checkbox-module__hop-Checkbox___AB4SB[data-invalid]:where([data-focus-visible], .Checkbox-module__hop-Checkbox--focused___DQc5r) {
1196
+ --box-background-color: var(--hop-Checkbox-box-background-color-focused-invalid);
1197
+ --box-border-color: var(--hop-Checkbox-box-border-color-focused-invalid);
1198
+ }
1199
+ .Checkbox-module__hop-Checkbox___AB4SB[data-invalid]:where([data-hovered], .Checkbox-module__hop-Checkbox--hovered___X9SRZ) {
1200
+ --box-background-color: var(--hop-Checkbox-box-background-color-hovered-invalid);
1201
+ --box-border-color: var(--hop-Checkbox-box-border-color-hovered-invalid);
1202
+ --text-color: var(--hop-Checkbox-text-color-hovered-invalid);
1203
+ --icon-color: var(--hop-Checkbox-icon-color-hovered-invalid);
1204
+ }
1205
+ .Checkbox-module__hop-Checkbox___AB4SB[data-invalid]:where([data-pressed], .Checkbox-module__hop-Checkbox--pressed___LhSG7) {
1206
+ --box-background-color: var(--hop-Checkbox-box-background-color-pressed-invalid);
1207
+ --box-border-color: var(--hop-Checkbox-box-border-color-pressed-invalid);
1208
+ --text-color: var(--hop-Checkbox-text-color-pressed-invalid);
1209
+ --icon-color: var(--hop-Checkbox-icon-color-pressed-invalid);
1210
+ }
1211
+ .Checkbox-module__hop-Checkbox___AB4SB:where([data-invalid])[data-selected] {
1212
+ --box-background-color: var(--hop-Checkbox-box-background-color-selected-invalid);
1213
+ --box-border-color: var(--hop-Checkbox-box-border-color-selected-invalid);
1214
+ }
1215
+ .Checkbox-module__hop-Checkbox___AB4SB[data-disabled] {
1216
+ --box-background-color: var(--hop-Checkbox-box-background-color-disabled);
1217
+ --box-border-color: var(--hop-Checkbox-box-border-color-disabled);
1218
+ --check-color: var(--hop-Checkbox-check-color-disabled);
1219
+ --cursor: not-allowed;
1220
+ --text-color: var(--hop-Checkbox-text-color-disabled);
1221
+ --icon-color: var(--hop-Checkbox-icon-color-disabled);
1222
+ --description-color: var(--hop-Checkbox-description-color-disabled);
1223
+ }
1224
+ .Checkbox-module__hop-Checkbox--sm___G3jc8 {
1225
+ --box-block-size: var(--hop-Checkbox-box-sm-block-size);
1226
+ --box-inline-size: var(--hop-Checkbox-box-sm-inline-size);
1227
+ --text-top-offset: var(--hop-Checkbox-text-sm-top-offset);
1228
+ --text-margin-inline-start: var(--hop-Checkbox-text-sm-margin-inline-start);
1229
+ }
1230
+ .Checkbox-module__hop-Checkbox--md___kHtjB {
1231
+ --box-block-size: var(--hop-Checkbox-box-md-block-size);
1232
+ --box-inline-size: var(--hop-Checkbox-box-md-inline-size);
1233
+ --text-top-offset: var(--hop-Checkbox-text-md-top-offset);
1234
+ --text-margin-inline-start: var(--hop-Checkbox-text-md-margin-inline-start);
1235
+ }
1236
+ .Checkbox-module__hop-Checkbox__icon___0Awxl,
1237
+ .Checkbox-module__hop-Checkbox__icon-list___XOIbN {
1238
+ flex: 0 0 auto;
1239
+ order: 3;
1240
+ color: var(--icon-color);
1241
+ }
1242
+ .Checkbox-module__hop-Checkbox__box___snrsb {
1243
+ display: flex;
1244
+ flex: 0 0 auto;
1245
+ align-items: center;
1246
+ justify-content: center;
1247
+ order: 1;
1248
+ box-sizing: border-box;
1249
+ inline-size: var(--box-inline-size, var(--hop-Checkbox-box-md-inline-size));
1250
+ block-size: var(--box-block-size, var(--hop-Checkbox-box-md-block-size));
1251
+ background-color: var(--box-background-color);
1252
+ border: var(--hop-Checkbox-box-border-size) solid var(--box-border-color);
1253
+ border-radius: var(--box-border-radius);
1254
+ outline: var(--box-outline, none);
1255
+ outline-offset: 0.125rem;
1256
+ transition: background-color var(--transition-duration) var(--hop-easing-productive), border var(--transition-duration) var(--hop-easing-productive);
1257
+ }
1258
+ .Checkbox-module__hop-Checkbox__check___EOwms {
1259
+ display: var(--check-display);
1260
+ color: var(--check-color);
1261
+ }
1262
+ .Checkbox-module__hop-Checkbox__text___KMdBt {
1263
+ flex: 0 1 auto;
1264
+ order: 2;
1265
+ min-inline-size: 0;
1266
+ margin-block-start: var(--text-top-offset, var(--hop-Checkbox-text-md-top-offset));
1267
+ margin-inline-start: var(--text-margin-inline-start, var(--hop-Checkbox-text-md-margin-inline-start));
1268
+ color: var(--text-color);
1269
+ }
1270
+
1271
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/checkbox/src/CheckboxField.module.css/#css-module-data */
1272
+ .CheckboxField-module__hop-CheckboxField___lRXrF {
1273
+ --hop-CheckboxField-description-color: var(--hop-neutral-text-weak);
1274
+ --hop-CheckboxField-description-color-disabled: var(--hop-neutral-text-disabled);
1275
+ --hop-CheckboxField-sm-row-gap: var(--hop-space-stack-xs);
1276
+ --hop-CheckboxField-checkbox-sm-inline-size: 1rem;
1277
+ --hop-CheckboxField-description-sm-margin-inline-start: calc(var(--hop-CheckboxField-checkbox-sm-inline-size) + var(--hop-space-inline-sm));
1278
+ --hop-CheckboxField-md-row-gap: var(--hop-space-stack-xs);
1279
+ --hop-CheckboxField-checkbox-md-inline-size: 1.5rem;
1280
+ --hop-CheckboxField-description-md-margin-inline-start: calc(var(--hop-CheckboxField-checkbox-md-inline-size) + var(--hop-space-inline-md));
1281
+ --description-color: var(--hop-CheckboxField-description-color);
1282
+ display: flex;
1283
+ flex-direction: column;
1284
+ row-gap: var(--row-gap, var(--hop-space-stack-sm));
1285
+ align-items: flex-start;
1286
+ justify-content: flex-start;
1287
+ box-sizing: border-box;
1288
+ inline-size: max-content;
1289
+ max-inline-size: 100%;
1290
+ }
1291
+ .CheckboxField-module__hop-CheckboxField___lRXrF[data-disabled] {
1292
+ --description-color: var(--hop-CheckboxField-description-color-disabled);
1293
+ }
1294
+ .CheckboxField-module__hop-CheckboxField--sm___QyS56 {
1295
+ --row-gap: var(--hop-CheckboxField-sm-row-gap);
1296
+ --description-margin-inline-start: var(--hop-CheckboxField-description-sm-margin-inline-start);
1297
+ }
1298
+ .CheckboxField-module__hop-CheckboxField--md___FDfFW {
1299
+ --row-gap: var(--hop-CheckboxField-md-row-gap);
1300
+ --description-margin-inline-start: var(--hop-CheckboxField-description-md-margin-inline-start);
1301
+ }
1302
+ .CheckboxField-module__hop-CheckboxField__description___5z4Zy {
1303
+ order: 2;
1304
+ margin-inline-start: var(--description-margin-inline-start, var(--hop-CheckboxField-description-md-margin-inline-start));
1305
+ color: var(--description-color);
1306
+ }
1307
+ .CheckboxField-module__hop-CheckboxField__checkbox___wUKGl {
1308
+ order: 1;
1309
+ }
1310
+
1311
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/ErrorMessage/src/ErrorMessage.module.css/#css-module-data */
1312
+ .ErrorMessage-module__hop-ErrorMessage___GySei {
1313
+ --hop-ErrorMessage-color: var(--hop-danger-text-weak);
1314
+ --hop-ErrorMessage-font-family: var(--hop-body-xs-font-family);
1315
+ --hop-ErrorMessage-font-size: var(--hop-body-xs-font-size);
1316
+ --hop-ErrorMessage-font-weight: var(--hop-body-xs-font-weight);
1317
+ --hop-ErrorMessage-line-height: var(--hop-body-xs-line-height);
1318
+ --hop-ErrorMessage-column-gap: var(--hop-space-inline-xs);
1319
+ display: flex;
1320
+ column-gap: var(--hop-ErrorMessage-column-gap);
1321
+ align-items: center;
1322
+ box-sizing: border-box;
1323
+ font-family: var(--hop-ErrorMessage-font-family);
1324
+ font-size: var(--hop-ErrorMessage-font-size);
1325
+ font-weight: var(--hop-ErrorMessage-font-weight);
1326
+ line-height: var(--hop-ErrorMessage-line-height);
1327
+ color: var(--hop-ErrorMessage-color);
1328
+ }
1329
+ .ErrorMessage-module__hop-ErrorMessage__icon___pc97t {
1330
+ flex: 0 0 auto;
1331
+ align-self: flex-start;
1332
+ }
1333
+
1334
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/HelperMessage/src/HelperMessage.module.css/#css-module-data */
1335
+ .HelperMessage-module__hop-HelperMessage___rjIiP {
1336
+ --hop-HelperMessage-color: var(--hop-neutral-text-weak);
1337
+ --hop-HelperMessage-column-gap: var(--hop-space-inline-xs);
1338
+ display: flex;
1339
+ column-gap: var(--hop-HelperMessage-column-gap);
1340
+ align-items: center;
1341
+ box-sizing: border-box;
1342
+ color: var(--hop-HelperMessage-color);
1343
+ }
1344
+ .HelperMessage-module__hop-HelperMessage__icon___kQ-oH {
1345
+ flex: 0 0 auto;
1346
+ align-self: flex-start;
1347
+ }
1348
+
1349
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/checkbox/src/CheckboxGroup.module.css/#css-module-data */
1350
+ .CheckboxGroup-module__hop-CheckboxGroup___IJEPv {
1351
+ --hop-CheckboxGroup-align-items: flex-start;
1352
+ --hop-CheckboxGroup-justify-content: flex-start;
1353
+ --hop-CheckboxGroup-bordered-border-color: var(--hop-neutral-border-weak);
1354
+ --hop-CheckboxGroup-sm-column-gap: var(--hop-space-inline-sm);
1355
+ --hop-CheckboxGroup-sm-row-gap: var(--hop-space-stack-sm);
1356
+ --hop-CheckboxGroup-list-sm-column-gap: var(--hop-space-inline-sm);
1357
+ --hop-CheckboxGroup-list-sm-row-gap: var(--hop-space-stack-sm);
1358
+ --hop-CheckboxGroup-bordered-sm-padding: var(--hop-space-inset-sm);
1359
+ --hop-CheckboxGroup-bordered-sm-column-gap: var(--hop-space-inline-sm);
1360
+ --hop-CheckboxGroup-bordered-sm-row-gap: var(--hop-space-stack-sm);
1361
+ --hop-CheckboxGroup-list-bordered-sm-column-gap: 0;
1362
+ --hop-CheckboxGroup-list-bordered-sm-row-gap: 0;
1363
+ --hop-CheckboxGroup-md-column-gap: var(--hop-space-inline-md);
1364
+ --hop-CheckboxGroup-md-row-gap: var(--hop-space-stack-md);
1365
+ --hop-CheckboxGroup-list-md-column-gap: var(--hop-space-inline-md);
1366
+ --hop-CheckboxGroup-list-md-row-gap: var(--hop-space-stack-md);
1367
+ --hop-CheckboxGroup-bordered-md-padding: var(--hop-space-inset-md);
1368
+ --hop-CheckboxGroup-bordered-md-column-gap: var(--hop-space-inline-sm);
1369
+ --hop-CheckboxGroup-bordered-md-row-gap: var(--hop-space-stack-sm);
1370
+ --hop-CheckboxGroup-list-bordered-md-column-gap: 0;
1371
+ --hop-CheckboxGroup-list-bordered-md-row-gap: 0;
1372
+ --hop-CheckboxGroup-vertical-flex-direction: column;
1373
+ --hop-CheckboxGroup-horizontal-flex-direction: row;
1374
+ --checkbox-border-size: 0.0625rem;
1375
+ --checkbox-border-color: var(--hop-neutral-border-weak);
1376
+ --flex-direction: var(--hop-CheckboxGroup-vertical-flex-direction);
1377
+ --align-items: var(--hop-CheckboxGroup-align-items);
1378
+ --justify-content: var(--hop-CheckboxGroup-justify-content);
1379
+ --flex-wrap: wrap;
1380
+ display: flex;
1381
+ flex-direction: column;
1382
+ gap: var(--row-gap, var(--hop-space-stack-md)) var(--column-gap, var(--hop-space-inline-md));
1383
+ align-items: var(--align-items);
1384
+ justify-content: var(--justify-content);
1385
+ box-sizing: border-box;
1386
+ inline-size: max-content;
1387
+ max-inline-size: 100%;
1388
+ }
1389
+ .CheckboxGroup-module__hop-CheckboxGroup--bordered___xnlV3 {
1390
+ --list-border: var(--checkbox-border-size) solid var(--checkbox-border-color);
1391
+ --list-border-radius: var(--hop-shape-rounded-md);
1392
+ }
1393
+ .CheckboxGroup-module__hop-CheckboxGroup--sm___kPe9U {
1394
+ --column-gap: var(--hop-CheckboxGroup-sm-column-gap);
1395
+ --row-gap: var(--hop-CheckboxGroup-sm-row-gap);
1396
+ --list-column-gap: var(--hop-CheckboxGroup-list-sm-column-gap);
1397
+ --list-row-gap: var(--hop-CheckboxGroup-list-sm-row-gap);
1398
+ }
1399
+ .CheckboxGroup-module__hop-CheckboxGroup--md___AGdL- {
1400
+ --column-gap: var(--hop-CheckboxGroup-md-column-gap);
1401
+ --row-gap: var(--hop-CheckboxGroup-md-row-gap);
1402
+ --list-column-gap: var(--hop-CheckboxGroup-list-md-column-gap);
1403
+ --list-row-gap: var(--hop-CheckboxGroup-list-md-row-gap);
1404
+ }
1405
+ .CheckboxGroup-module__hop-CheckboxGroup--bordered___xnlV3.CheckboxGroup-module__hop-CheckboxGroup--sm___kPe9U {
1406
+ --checkbox-padding: var(--hop-CheckboxGroup-bordered-sm-padding);
1407
+ --column-gap: var(--hop-CheckboxGroup-bordered-sm-column-gap);
1408
+ --row-gap: var(--hop-CheckboxGroup-bordered-sm-row-gap);
1409
+ --list-column-gap: var(--hop-CheckboxGroup-list-bordered-sm-column-gap);
1410
+ --list-row-gap: var(--hop-CheckboxGroup-list-bordered-sm-row-gap);
1411
+ }
1412
+ .CheckboxGroup-module__hop-CheckboxGroup--bordered___xnlV3.CheckboxGroup-module__hop-CheckboxGroup--md___AGdL- {
1413
+ --checkbox-padding: var(--hop-CheckboxGroup-bordered-md-padding);
1414
+ --column-gap: var(--hop-CheckboxGroup-bordered-md-column-gap);
1415
+ --row-gap: var(--hop-CheckboxGroup-bordered-md-row-gap);
1416
+ --list-column-gap: var(--hop-CheckboxGroup-list-bordered-md-column-gap);
1417
+ --list-row-gap: var(--hop-CheckboxGroup-list-bordered-md-row-gap);
1418
+ }
1419
+ .CheckboxGroup-module__hop-CheckboxGroup___IJEPv[data-orientation=horizontal] {
1420
+ --flex-direction: var(--hop-CheckboxGroup-horizontal-flex-direction);
1421
+ }
1422
+ .CheckboxGroup-module__hop-CheckboxGroup--bordered___xnlV3[data-orientation=horizontal] {
1423
+ --flex-wrap: nowrap;
1424
+ }
1425
+ .CheckboxGroup-module__hop-CheckboxGroup___IJEPv > .CheckboxGroup-module__hop-CheckboxGroup__label___GHPL- {
1426
+ order: 1;
1427
+ }
1428
+ .CheckboxGroup-module__hop-CheckboxGroup__list___n1ORj {
1429
+ display: flex;
1430
+ flex-flow: var(--flex-direction) var(--flex-wrap);
1431
+ gap: var(--list-row-gap, var(--hop-space-stack-md)) var(--list-column-gap, var(--hop-space-inline-md));
1432
+ order: 2;
1433
+ box-sizing: border-box;
1434
+ inline-size: max-content;
1435
+ max-inline-size: 100%;
1436
+ border: var(--list-border, none);
1437
+ border-radius: var(--list-border-radius, 0);
1438
+ }
1439
+ .CheckboxGroup-module__hop-CheckboxGroup__list___n1ORj > .CheckboxGroup-module__hop-CheckboxGroup__checkbox___3H5YY {
1440
+ position: relative;
1441
+ flex: 0 1 auto;
1442
+ align-content: start;
1443
+ inline-size: auto;
1444
+ min-inline-size: 0;
1445
+ padding: var(--checkbox-padding, 0);
1446
+ }
1447
+ .CheckboxGroup-module__hop-CheckboxGroup--bordered___xnlV3 .CheckboxGroup-module__hop-CheckboxGroup__list___n1ORj > .CheckboxGroup-module__hop-CheckboxGroup__checkbox___3H5YY ~ .CheckboxGroup-module__hop-CheckboxGroup__checkbox___3H5YY::before {
1448
+ content: "";
1449
+ position: absolute;
1450
+ display: block;
1451
+ }
1452
+ .CheckboxGroup-module__hop-CheckboxGroup--bordered___xnlV3[data-orientation=vertical] .CheckboxGroup-module__hop-CheckboxGroup__list___n1ORj > .CheckboxGroup-module__hop-CheckboxGroup__checkbox___3H5YY ~ .CheckboxGroup-module__hop-CheckboxGroup__checkbox___3H5YY::before {
1453
+ inset-block-start: 0;
1454
+ inset-inline: 0;
1455
+ border-block-start: var(--list-border, none);
1456
+ }
1457
+ .CheckboxGroup-module__hop-CheckboxGroup--bordered___xnlV3[data-orientation=horizontal] .CheckboxGroup-module__hop-CheckboxGroup__list___n1ORj > .CheckboxGroup-module__hop-CheckboxGroup__checkbox___3H5YY ~ .CheckboxGroup-module__hop-CheckboxGroup__checkbox___3H5YY::before {
1458
+ inset-block: 0;
1459
+ inset-inline-start: 0;
1460
+ border-inline-start: var(--list-border, none);
1461
+ }
1462
+ .CheckboxGroup-module__hop-CheckboxGroup___IJEPv > .CheckboxGroup-module__hop-CheckboxGroup__error-message___OgYjL,
1463
+ .CheckboxGroup-module__hop-CheckboxGroup___IJEPv > .CheckboxGroup-module__hop-CheckboxGroup__helper-message___dbWhu {
1464
+ order: 3;
1465
+ }
1466
+
1467
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/Chip/src/Chip.module.css/#css-module-data */
1468
+ .Chip-module__hop-Chip___eH28d {
1469
+ --hop-Chip-border-size: 0.0625rem;
1470
+ --hop-Chip-border-radius: var(--hop-shape-pill);
1471
+ --hop-Chip-column-gap: var(--hop-space-inline-xs);
1472
+ --hop-Chip-xs-block-size: 1rem;
1473
+ --hop-Chip-xs-padding-inline: var(--hop-space-inset-sm);
1474
+ --hop-Chip-sm-block-size: 1.25rem;
1475
+ --hop-Chip-sm-padding-inline: var(--hop-space-inset-sm);
1476
+ --hop-Chip-md-block-size: 1.5rem;
1477
+ --hop-Chip-md-padding-inline: var(--hop-space-inset-sm);
1478
+ --hop-Chip-lg-block-size: 2rem;
1479
+ --hop-Chip-lg-padding-inline: var(--hop-space-inset-md);
1480
+ --hop-Chip-neutral-border-color: var(--hop-neutral-border-weak);
1481
+ --hop-Chip-neutral-background-color: var(--hop-neutral-surface);
1482
+ --hop-Chip-neutral-text-color: var(--hop-neutral-text);
1483
+ --hop-Chip-progress-border-color: transparent;
1484
+ --hop-Chip-progress-background-color: var(--hop-status-progress-surface);
1485
+ --hop-Chip-progress-text-color: var(--hop-status-progress-text);
1486
+ --hop-Chip-positive-border-color: transparent;
1487
+ --hop-Chip-positive-background-color: var(--hop-status-positive-surface);
1488
+ --hop-Chip-positive-text-color: var(--hop-status-positive-text);
1489
+ --hop-Chip-caution-border-color: transparent;
1490
+ --hop-Chip-caution-background-color: var(--hop-status-caution-surface);
1491
+ --hop-Chip-caution-text-color: var(--hop-status-caution-text);
1492
+ --hop-Chip-negative-border-color: transparent;
1493
+ --hop-Chip-negative-background-color: var(--hop-status-negative-surface);
1494
+ --hop-Chip-negative-text-color: var(--hop-status-negative-text);
1495
+ --hop-Chip-option1-border-color: transparent;
1496
+ --hop-Chip-option1-background-color: var(--hop-status-option1-surface);
1497
+ --hop-Chip-option1-text-color: var(--hop-status-option1-text);
1498
+ --hop-Chip-option2-border-color: transparent;
1499
+ --hop-Chip-option2-background-color: var(--hop-status-option2-surface);
1500
+ --hop-Chip-option2-text-color: var(--hop-status-option2-text);
1501
+ --hop-Chip-option3-border-color: transparent;
1502
+ --hop-Chip-option3-background-color: var(--hop-status-option3-surface);
1503
+ --hop-Chip-option3-text-color: var(--hop-status-option3-text);
1504
+ --hop-Chip-option4-border-color: transparent;
1505
+ --hop-Chip-option4-background-color: var(--hop-status-option4-surface);
1506
+ --hop-Chip-option4-text-color: var(--hop-status-option4-text);
1507
+ --hop-Chip-option5-border-color: transparent;
1508
+ --hop-Chip-option5-background-color: var(--hop-status-option5-surface);
1509
+ --hop-Chip-option5-text-color: var(--hop-status-option5-text);
1510
+ --hop-Chip-option6-border-color: transparent;
1511
+ --hop-Chip-option6-background-color: var(--hop-status-option6-surface);
1512
+ --hop-Chip-option6-text-color: var(--hop-status-option6-text);
1513
+ --hop-Chip-inactive-border-color: transparent;
1514
+ --hop-Chip-inactive-background-color: var(--hop-status-inactive-surface);
1515
+ --hop-Chip-inactive-text-color: var(--hop-status-inactive-text);
1516
+ --hop-Chip-disabled-border-color: var(--hop-neutral-border-weak);
1517
+ --hop-Chip-disabled-background-color: var(--hop-neutral-surface-disabled);
1518
+ --hop-Chip-disabled-text-color: var(--hop-neutral-text-disabled);
1519
+ --border-radius: var(--hop-Chip-border-radius);
1520
+ --border-size: var(--hop-Chip-border-size);
1521
+ --column-gap: var(--hop-Chip-column-gap);
1522
+ overflow: hidden;
1523
+ display: inline-flex;
1524
+ column-gap: var(--column-gap);
1525
+ align-items: center;
1526
+ justify-content: center;
1527
+ box-sizing: border-box;
1528
+ inline-size: max-content;
1529
+ max-inline-size: 100%;
1530
+ block-size: var(--block-size);
1531
+ padding-inline: var(--padding-inline);
1532
+ color: var(--text-color);
1533
+ white-space: nowrap;
1534
+ background-color: var(--background-color);
1535
+ border: var(--border-size) solid var(--border-color);
1536
+ border-radius: var(--border-radius);
1537
+ }
1538
+ .Chip-module__hop-Chip--xs___my4zs {
1539
+ --block-size: var(--hop-Chip-xs-block-size);
1540
+ --padding-inline: var(--hop-Chip-xs-padding-inline);
1541
+ }
1542
+ .Chip-module__hop-Chip--sm___xi4J9 {
1543
+ --block-size: var(--hop-Chip-sm-block-size);
1544
+ --padding-inline: var(--hop-Chip-sm-padding-inline);
1545
+ }
1546
+ .Chip-module__hop-Chip--md___KWl-M {
1547
+ --block-size: var(--hop-Chip-md-block-size);
1548
+ --padding-inline: var(--hop-Chip-md-padding-inline);
1549
+ }
1550
+ .Chip-module__hop-Chip--lg___irUCs {
1551
+ --block-size: var(--hop-Chip-lg-block-size);
1552
+ --padding-inline: var(--hop-Chip-lg-padding-inline);
1553
+ }
1554
+ .Chip-module__hop-Chip--neutral___jhS3M {
1555
+ --border-color: var(--hop-Chip-neutral-border-color);
1556
+ --background-color: var(--hop-Chip-neutral-background-color);
1557
+ --text-color: var(--hop-Chip-neutral-text-color);
1558
+ }
1559
+ .Chip-module__hop-Chip--progress___6hJzP {
1560
+ --border-color: var(--hop-Chip-progress-border-color);
1561
+ --background-color: var(--hop-Chip-progress-background-color);
1562
+ --text-color: var(--hop-Chip-progress-text-color);
1563
+ }
1564
+ .Chip-module__hop-Chip--positive___BnnSY {
1565
+ --border-color: var(--hop-Chip-positive-border-color);
1566
+ --background-color: var(--hop-Chip-positive-background-color);
1567
+ --text-color: var(--hop-Chip-positive-text-color);
1568
+ }
1569
+ .Chip-module__hop-Chip--caution___tM9z3 {
1570
+ --border-color: var(--hop-Chip-caution-border-color);
1571
+ --background-color: var(--hop-Chip-caution-background-color);
1572
+ --text-color: var(--hop-Chip-caution-text-color);
1573
+ }
1574
+ .Chip-module__hop-Chip--negative___RWQMh {
1575
+ --border-color: var(--hop-Chip-negative-border-color);
1576
+ --background-color: var(--hop-Chip-negative-background-color);
1577
+ --text-color: var(--hop-Chip-negative-text-color);
1578
+ }
1579
+ .Chip-module__hop-Chip--option1___ue6cW {
1580
+ --border-color: var(--hop-Chip-option1-border-color);
1581
+ --background-color: var(--hop-Chip-option1-background-color);
1582
+ --text-color: var(--hop-Chip-option1-text-color);
1583
+ }
1584
+ .Chip-module__hop-Chip--option2___LkCcg {
1585
+ --border-color: var(--hop-Chip-option2-border-color);
1586
+ --background-color: var(--hop-Chip-option2-background-color);
1587
+ --text-color: var(--hop-Chip-option2-text-color);
1588
+ }
1589
+ .Chip-module__hop-Chip--option3___iag-k {
1590
+ --border-color: var(--hop-Chip-option3-border-color);
1591
+ --background-color: var(--hop-Chip-option3-background-color);
1592
+ --text-color: var(--hop-Chip-option3-text-color);
1593
+ }
1594
+ .Chip-module__hop-Chip--option4___rvfE7 {
1595
+ --border-color: var(--hop-Chip-option4-border-color);
1596
+ --background-color: var(--hop-Chip-option4-background-color);
1597
+ --text-color: var(--hop-Chip-option4-text-color);
1598
+ }
1599
+ .Chip-module__hop-Chip--option5___SjH-I {
1600
+ --border-color: var(--hop-Chip-option5-border-color);
1601
+ --background-color: var(--hop-Chip-option5-background-color);
1602
+ --text-color: var(--hop-Chip-option5-text-color);
1603
+ }
1604
+ .Chip-module__hop-Chip--option6___FswlN {
1605
+ --border-color: var(--hop-Chip-option6-border-color);
1606
+ --background-color: var(--hop-Chip-option6-background-color);
1607
+ --text-color: var(--hop-Chip-option6-text-color);
1608
+ }
1609
+ .Chip-module__hop-Chip--inactive___-Ffkx {
1610
+ --border-color: var(--hop-Chip-inactive-border-color);
1611
+ --background-color: var(--hop-Chip-inactive-background-color);
1612
+ --text-color: var(--hop-Chip-inactive-text-color);
1613
+ }
1614
+ .Chip-module__hop-Chip--disabled___CaGLC {
1615
+ --border-color: var(--hop-Chip-disabled-border-color);
1616
+ --background-color: var(--hop-Chip-disabled-background-color);
1617
+ --text-color: var(--hop-Chip-disabled-text-color);
1618
+ }
1619
+ .Chip-module__hop-Chip__icon___7bCB7,
1620
+ .Chip-module__hop-Chip__icon-list___XiOd6 {
1621
+ flex: 0 0 auto;
1622
+ flex-wrap: nowrap;
1623
+ order: 1;
1624
+ }
1625
+ .Chip-module__hop-Chip__text___UdTwh {
1626
+ overflow: hidden;
1627
+ flex: 1 1 auto;
1628
+ order: 2;
1629
+ min-inline-size: 0;
1630
+ text-align: center;
1631
+ text-overflow: ellipsis;
1632
+ }
1633
+ .Chip-module__hop-Chip__end-icon___oOI3X,
1634
+ .Chip-module__hop-Chip__end-icon-list___qTqq9 {
1635
+ flex: 0 0 auto;
1636
+ flex-wrap: nowrap;
1637
+ order: 3;
1638
+ }
1639
+
1640
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/Divider/src/Divider.module.css/#css-module-data */
1641
+ :where(.Divider-module__hop-Divider___7TzJN) {
1642
+ --hop-Divider-border-color: var(--hop-neutral-border-weak);
1643
+ --hop-Divider-border-size: 0.0625rem;
1644
+ --hop-Divider-horizontal-border-block-end: var(--hop-Divider-border-size) solid var(--hop-Divider-border-color);
1645
+ --hop-Divider-horizontal-border-inline-start: none;
1646
+ --hop-Divider-horizontal-inline-size: auto;
1647
+ --hop-Divider-horizontal-block-size: 0;
1648
+ --hop-Divider-vertical-border-inline-start: var(--hop-Divider-border-size) solid var(--hop-Divider-border-color);
1649
+ --hop-Divider-vertical-border-block-end: none;
1650
+ --hop-Divider-vertical-inline-size: 0;
1651
+ --hop-Divider-vertical-block-size: auto;
1652
+ --border-block-end: var(--hop-Divider-horizontal-border-block-end);
1653
+ --border-inline-start: var(--hop-Divider-horizontal-border-inline-start);
1654
+ --inline-size: var(--hop-Divider-horizontal-inline-size);
1655
+ --block-size: var(--hop-Divider-horizontal-block-size);
1656
+ display: block;
1657
+ flex: 0 0 auto;
1658
+ box-sizing: border-box;
1659
+ inline-size: var(--inline-size);
1660
+ block-size: var(--block-size);
1661
+ margin: 0;
1662
+ border: none;
1663
+ border-block-end: var(--border-block-end);
1664
+ border-inline-start: var(--border-inline-start);
1665
+ }
1666
+ .Divider-module__hop-Divider--vertical___9DyxE {
1667
+ --border-block-end: var(--hop-Divider-vertical-border-block-end);
1668
+ --border-inline-start: var(--hop-Divider-vertical-border-inline-start);
1669
+ --inline-size: var(--hop-Divider-vertical-inline-size);
1670
+ --block-size: var(--hop-Divider-vertical-block-size);
1671
+ }
1672
+
1673
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/inputs/src/InputGroup.module.css/#css-module-data */
1674
+ .InputGroup-module__hop-InputGroup___aX9Nc {
1675
+ --hop-InputGroup-background: var(--hop-neutral-surface);
1676
+ --hop-InputGroup-border-color: var(--hop-neutral-border);
1677
+ --hop-InputGroup-border-width: 0.0625rem;
1678
+ --hop-InputGroup-gap: var(--hop-space-inline-sm);
1679
+ --hop-InputGroup-sm-block-size: 2rem;
1680
+ --hop-InputGroup-md-block-size: 2.5rem;
1681
+ --hop-InputGroup-border-radius: var(--hop-shape-rounded-md);
1682
+ --hop-InputGroup-padding-inline: var(--hop-space-inset-md);
1683
+ --hop-InputGroup-border-color-hover: var(--hop-neutral-border-hover);
1684
+ --hop-InputGroup-border-color-focus: var(--hop-primary-border-focus);
1685
+ --hop-InputGroup-background-hover: var(--hop-neutral-surface-hover);
1686
+ --hop-InputGroup-border-color-invalid: var(--hop-danger-border-strong);
1687
+ --hop-InputGroup-input-color: var(--hop-neutral-text);
1688
+ --hop-InputGroup-input-sm-font-family: var(--hop-body-sm-font-family);
1689
+ --hop-InputGroup-input-sm-font-size: var(--hop-body-sm-font-size);
1690
+ --hop-InputGroup-input-sm-font-weight: var(--hop-body-sm-font-weight);
1691
+ --hop-InputGroup-input-sm-line-height: var(--hop-body-sm-line-height);
1692
+ --hop-InputGroup-input-sm-block-size: 1.5rem;
1693
+ --hop-InputGroup-input-md-font-family: var(--hop-body-md-font-family);
1694
+ --hop-InputGroup-input-md-font-size: var(--hop-body-md-font-size);
1695
+ --hop-InputGroup-input-md-font-weight: var(--hop-body-md-font-weight);
1696
+ --hop-InputGroup-input-md-line-height: var(--hop-body-md-line-height);
1697
+ --hop-InputGroup-input-md-block-size: 2rem;
1698
+ --hop-InputGroup-background-disabled: var(--hop-neutral-surface-disabled);
1699
+ --hop-InputGroup-border-color-disabled: var(--hop-neutral-border-disabled);
1700
+ --hop-InputGroup-placeholder-font-family: inherit;
1701
+ --hop-InputGroup-placeholder-font-size: inherit;
1702
+ --hop-InputGroup-placeholder-font-weight: inherit;
1703
+ --hop-InputGroup-placeholder-line-height: inherit;
1704
+ --hop-InputGroup-placeholder-color: var(--hop-neutral-text-weakest);
1705
+ --hop-InputGroup-placeholder-color-disabled: var(--hop-neutral-text-disabled);
1706
+ --inline-size: fit-content;
1707
+ --border: var(--hop-InputGroup-border-width) solid var(--hop-InputGroup-border-color);
1708
+ --background: var(--hop-InputGroup-background);
1709
+ --block-size: var(--hop-InputGroup-md-block-size);
1710
+ position: relative;
1711
+ display: inline-flex;
1712
+ gap: var(--hop-InputGroup-gap);
1713
+ align-items: center;
1714
+ box-sizing: border-box;
1715
+ inline-size: var(--inline-size);
1716
+ block-size: var(--block-size);
1717
+ padding-inline: var(--hop-InputGroup-padding-inline);
1718
+ background: var(--background);
1719
+ border: var(--border);
1720
+ border-radius: var(--hop-InputGroup-border-radius);
1721
+ }
1722
+ .InputGroup-module__hop-InputGroup--fluid___VC53v {
1723
+ --inline-size: 100% ;
1724
+ }
1725
+ .InputGroup-module__hop-InputGroup--sm___9NnAz {
1726
+ --block-size: var(--hop-InputGroup-sm-block-size);
1727
+ }
1728
+ .InputGroup-module__hop-InputGroup___aX9Nc[data-hovered] {
1729
+ --background: var(--hop-InputGroup-background-hover);
1730
+ --border: var(--hop-InputGroup-border-width) solid var(--hop-InputGroup-border-color-hover) ;
1731
+ }
1732
+ .InputGroup-module__hop-InputGroup___aX9Nc[data-focus-within] {
1733
+ --border: var(--hop-InputGroup-border-width) solid var(--hop-InputGroup-border-color-focus) ;
1734
+ }
1735
+ .InputGroup-module__hop-InputGroup___aX9Nc[data-invalid] {
1736
+ --border: var(--hop-InputGroup-border-width) solid var(--hop-InputGroup-border-color-invalid) ;
1737
+ }
1738
+ .InputGroup-module__hop-InputGroup___aX9Nc[data-disabled] {
1739
+ --background: var(--hop-InputGroup-background-disabled);
1740
+ --border: 0.0625rem solid var(--hop-InputGroup-border-color-disabled) ;
1741
+ }
1742
+ .InputGroup-module__hop-InputGroup__input___yyZz- {
1743
+ --input-font-family: var(--hop-InputGroup-input-md-font-family);
1744
+ --input-font-size: var(--hop-InputGroup-input-md-font-size);
1745
+ --input-font-weight: var(--hop-InputGroup-input-md-font-weight);
1746
+ --input-line-height: var(--hop-InputGroup-input-md-line-height);
1747
+ --input-block-size: var(--hop-InputGroup-input-md-block-size);
1748
+ --input-inline-size: initial;
1749
+ --input-placeholder-color: var(--hop-InputGroup-placeholder-color);
1750
+ flex: 1 1 auto;
1751
+ inline-size: var(--input-inline-size);
1752
+ min-inline-size: 0;
1753
+ block-size: var(--input-block-size);
1754
+ padding: 0;
1755
+ font-family: var(--input-font-family);
1756
+ font-size: var(--input-font-size);
1757
+ font-weight: var(--input-font-weight);
1758
+ line-height: var(--input-line-height);
1759
+ color: var(--hop-InputGroup-input-color);
1760
+ background: transparent;
1761
+ border: none;
1762
+ outline: none;
1763
+ }
1764
+ .InputGroup-module__hop-InputGroup--fluid___VC53v .InputGroup-module__hop-InputGroup__input___yyZz- {
1765
+ --input-inline-size: 100%;
1766
+ }
1767
+ .InputGroup-module__hop-InputGroup--sm___9NnAz .InputGroup-module__hop-InputGroup__input___yyZz- {
1768
+ --input-font-family: var(--hop-InputGroup-input-sm-font-family);
1769
+ --input-font-size: var(--hop-InputGroup-input-sm-font-size);
1770
+ --input-font-weight: var(--hop-InputGroup-input-sm-font-weight);
1771
+ --input-line-height: var(--hop-InputGroup-input-sm-line-height);
1772
+ --input-block-size: var(--hop-InputGroup-input-sm-block-size);
1773
+ }
1774
+ .InputGroup-module__hop-InputGroup__input___yyZz-::placeholder {
1775
+ font-family: var(--hop-InputGroup-placeholder-font-family);
1776
+ font-size: var(--hop-InputGroup-placeholder-font-size);
1777
+ font-weight: var(--hop-InputGroup-placeholder-font-weight);
1778
+ line-height: var(--hop-InputGroup-placeholder-line-height);
1779
+ color: var(--input-placeholder-color);
1780
+ }
1781
+ .InputGroup-module__hop-InputGroup__input___yyZz-[data-disabled]::placeholder {
1782
+ --input-placeholder-color: var(--hop-InputGroup-placeholder-color-disabled);
1783
+ }
1784
+
1785
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/Heading/src/Heading.module.css/#css-module-data */
1786
+ .Heading-module__hop-Heading___tWbtc {
1787
+ --hop-Heading-xs-font-size: var(--hop-heading-xs-font-size);
1788
+ --hop-Heading-xs-font-family: var(--hop-heading-xs-font-family);
1789
+ --hop-Heading-xs-font-weight: var(--hop-heading-xs-font-weight);
1790
+ --hop-Heading-xs-line-height: var(--hop-heading-xs-line-height);
1791
+ --hop-Heading-sm-font-size: var(--hop-heading-sm-font-size);
1792
+ --hop-Heading-sm-font-family: var(--hop-heading-sm-font-family);
1793
+ --hop-Heading-sm-font-weight: var(--hop-heading-sm-font-weight);
1794
+ --hop-Heading-sm-line-height: var(--hop-heading-sm-line-height);
1795
+ --hop-Heading-md-font-size: var(--hop-heading-md-font-size);
1796
+ --hop-Heading-md-font-family: var(--hop-heading-md-font-family);
1797
+ --hop-Heading-md-font-weight: var(--hop-heading-md-font-weight);
1798
+ --hop-Heading-md-line-height: var(--hop-heading-md-line-height);
1799
+ --hop-Heading-lg-font-size: var(--hop-heading-lg-font-size);
1800
+ --hop-Heading-lg-font-family: var(--hop-heading-lg-font-family);
1801
+ --hop-Heading-lg-font-weight: var(--hop-heading-lg-font-weight);
1802
+ --hop-Heading-lg-line-height: var(--hop-heading-lg-line-height);
1803
+ --hop-Heading-xl-font-size: var(--hop-heading-xl-font-size);
1804
+ --hop-Heading-xl-font-family: var(--hop-heading-xl-font-family);
1805
+ --hop-Heading-xl-font-weight: var(--hop-heading-xl-font-weight);
1806
+ --hop-Heading-xl-line-height: var(--hop-heading-xl-line-height);
1807
+ --hop-Heading-2xl-font-size: var(--hop-heading-2xl-font-size);
1808
+ --hop-Heading-2xl-font-family: var(--hop-heading-2xl-font-family);
1809
+ --hop-Heading-2xl-font-weight: var(--hop-heading-2xl-font-weight);
1810
+ --hop-Heading-2xl-line-height: var(--hop-heading-2xl-line-height);
1811
+ --hop-Heading-3xl-font-size: var(--hop-heading-3xl-font-size);
1812
+ --hop-Heading-3xl-font-family: var(--hop-heading-3xl-font-family);
1813
+ --hop-Heading-3xl-font-weight: var(--hop-heading-3xl-font-weight);
1814
+ --hop-Heading-3xl-line-height: var(--hop-heading-3xl-line-height);
1815
+ --hop-Heading-inherit-size-font-size: inherit;
1816
+ --hop-Heading-inherit-size-font-family: inherit;
1817
+ --hop-Heading-inherit-size-font-weight: inherit;
1818
+ --hop-Heading-inherit-size-line-height: inherit;
1819
+ }
1820
+ :where(.Heading-module__hop-Heading___tWbtc) {
1821
+ margin: 0;
1822
+ font-family: var(--font-family);
1823
+ font-size: var(--font-size);
1824
+ font-weight: var(--font-weight);
1825
+ line-height: var(--line-height);
1826
+ }
1827
+ :where(.Heading-module__hop-Heading--xs___uee-Q) {
1828
+ --font-size: var(--hop-Heading-xs-font-size);
1829
+ --font-family: var(--hop-Heading-xs-font-family);
1830
+ --font-weight: var(--hop-Heading-xs-font-weight);
1831
+ --line-height: var(--hop-Heading-xs-line-height);
1832
+ }
1833
+ :where(.Heading-module__hop-Heading--sm___Vawt0) {
1834
+ --font-size: var(--hop-Heading-sm-font-size);
1835
+ --font-family: var(--hop-Heading-sm-font-family);
1836
+ --font-weight: var(--hop-Heading-sm-font-weight);
1837
+ --line-height: var(--hop-Heading-sm-line-height);
1838
+ }
1839
+ :where(.Heading-module__hop-Heading--md___OHy3C) {
1840
+ --font-size: var(--hop-Heading-md-font-size);
1841
+ --font-family: var(--hop-Heading-md-font-family);
1842
+ --font-weight: var(--hop-Heading-md-font-weight);
1843
+ --line-height: var(--hop-Heading-md-line-height);
1844
+ }
1845
+ :where(.Heading-module__hop-Heading--lg___jyfMT) {
1846
+ --font-size: var(--hop-Heading-lg-font-size);
1847
+ --font-family: var(--hop-Heading-lg-font-family);
1848
+ --font-weight: var(--hop-Heading-lg-font-weight);
1849
+ --line-height: var(--hop-Heading-lg-line-height);
1850
+ }
1851
+ :where(.Heading-module__hop-Heading--xl___Z1Czd) {
1852
+ --font-size: var(--hop-Heading-xl-font-size);
1853
+ --font-family: var(--hop-Heading-xl-font-family);
1854
+ --font-weight: var(--hop-Heading-xl-font-weight);
1855
+ --line-height: var(--hop-Heading-xl-line-height);
1856
+ }
1857
+ :where(.Heading-module__hop-Heading--2xl___1mNUt) {
1858
+ --font-size: var(--hop-Heading-2xl-font-size);
1859
+ --font-family: var(--hop-Heading-2xl-font-family);
1860
+ --font-weight: var(--hop-Heading-2xl-font-weight);
1861
+ --line-height: var(--hop-Heading-2xl-line-height);
1862
+ }
1863
+ :where(.Heading-module__hop-Heading--3xl___lYJTo) {
1864
+ --font-size: var(--hop-Heading-3xl-font-size);
1865
+ --font-family: var(--hop-Heading-3xl-font-family);
1866
+ --font-weight: var(--hop-Heading-3xl-font-weight);
1867
+ --line-height: var(--hop-Heading-3xl-line-height);
1868
+ }
1869
+
1870
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/inputs/src/TextField.module.css/#css-module-data */
1871
+ .TextField-module__hop-TextField___LZ2cj {
1872
+ --hop-TextField-gap: var(--hop-space-stack-xs);
1873
+ --hop-TextField-inline-size: 20rem;
1874
+ --hop-TextField-prefix-color: var(--hop-neutral-text-weak);
1875
+ --hop-TextField-font-family: var(--hop-heading-xs-font-family);
1876
+ --hop-TextField-font-size: var(--hop-heading-xs-font-size);
1877
+ --hop-TextField-font-weight: var(--hop-heading-xs-font-weight);
1878
+ --hop-TextField-line-height: var(--hop-heading-xs-line-height);
1879
+ --hop-TextField-color: var(--hop-neutral-text-weak);
1880
+ --inline-size: var(--hop-TextField-inline-size);
1881
+ display: flex;
1882
+ flex-direction: column;
1883
+ gap: var(--hop-TextField-gap);
1884
+ inline-size: var(--inline-size);
1885
+ }
1886
+ .TextField-module__hop-TextField--fluid___mVkPz {
1887
+ --inline-size: 100%;
1888
+ }
1889
+ .TextField-module__hop-TextField__Label___0R9nA {
1890
+ order: 0;
1891
+ font-family: var(--hop-TextField-font-family);
1892
+ font-size: var(--hop-TextField-font-size);
1893
+ font-weight: var(--hop-TextField-font-weight);
1894
+ line-height: var(--hop-TextField-line-height);
1895
+ color: var(--hop-TextField-color);
1896
+ }
1897
+ .TextField-module__hop-TextField__prefix___mOaIR {
1898
+ color: var(--hop-TextField-prefix-color);
1899
+ }
1900
+ .TextField-module__hop-TextField__InputGroup___OWSvz {
1901
+ order: 1;
1902
+ }
1903
+ .TextField-module__hop-TextField__ErrorMessage___-nvCK,
1904
+ .TextField-module__hop-TextField__HelperMessage___J31YD {
1905
+ order: 3;
1906
+ }
1907
+
1908
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/inputs/src/PasswordField.module.css/#css-module-data */
1909
+ .PasswordField-module__hop-PasswordField___WQs-a {
1910
+ --hop-PasswordField-gap: var(--hop-space-stack-xs);
1911
+ --hop-PasswordField-inline-size: 20rem;
1912
+ --hop-PasswordField-font-family: var(--hop-heading-xs-font-family);
1913
+ --hop-PasswordField-font-size: var(--hop-heading-xs-font-size);
1914
+ --hop-PasswordField-font-weight: var(--hop-heading-xs-font-weight);
1915
+ --hop-PasswordField-line-height: var(--hop-heading-xs-line-height);
1916
+ --hop-PasswordField-color: var(--hop-neutral-text-weak);
1917
+ --inline-size: var(--hop-PasswordField-inline-size);
1918
+ display: flex;
1919
+ flex-direction: column;
1920
+ gap: var(--hop-PasswordField-gap);
1921
+ inline-size: var(--inline-size);
1922
+ }
1923
+ .PasswordField-module__hop-PasswordField--fluid___4feQC {
1924
+ --inline-size: 100%;
1925
+ }
1926
+ .PasswordField-module__hop-PasswordField__Label___SfgLw {
1927
+ order: 0;
1928
+ font-family: var(--hop-PasswordField-font-family);
1929
+ font-size: var(--hop-PasswordField-font-size);
1930
+ font-weight: var(--hop-PasswordField-font-weight);
1931
+ line-height: var(--hop-PasswordField-line-height);
1932
+ color: var(--hop-PasswordField-color);
1933
+ }
1934
+ .PasswordField-module__hop-PasswordField__InputGroup___W4E3o {
1935
+ order: 1;
1936
+ }
1937
+ .PasswordField-module__hop-PasswordField__ErrorMessage___l8hTY,
1938
+ .PasswordField-module__hop-PasswordField__HelperMessage___xpGf3 {
1939
+ order: 3;
1940
+ }
1941
+
1942
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/inputs/src/SearchField.module.css/#css-module-data */
1943
+ .SearchField-module__hop-SearchField___fjYpy {
1944
+ --hop-SearchField-gap: var(--hop-space-stack-xs);
1945
+ --hop-SearchField-inline-size: 20rem;
1946
+ --hop-SearchField-color: var(--hop-neutral-text-weak);
1947
+ --hop-SearchField-padding: var(--hop-space-inset-md);
1948
+ --hop-SearchField-font-family: var(--hop-heading-xs-font-family);
1949
+ --hop-SearchField-font-size: var(--hop-heading-xs-font-size);
1950
+ --hop-SearchField-font-weight: var(--hop-heading-xs-font-weight);
1951
+ --hop-SearchField-line-height: var(--hop-heading-xs-line-height);
1952
+ --inline-size: var(--hop-SearchField-inline-size);
1953
+ --input-group-padding-inline-end: var(--hop-SearchField-padding);
1954
+ --input-group-padding-inline-start: var(--hop-SearchField-padding);
1955
+ --clear-button-display: flex;
1956
+ display: flex;
1957
+ flex-direction: column;
1958
+ gap: var(--hop-SearchField-gap);
1959
+ inline-size: var(--inline-size);
1960
+ }
1961
+ .SearchField-module__hop-SearchField--fluid___4uRa7 {
1962
+ --inline-size: 100%;
1963
+ }
1964
+ .SearchField-module__hop-SearchField__Label___wLVDN {
1965
+ order: 0;
1966
+ font-family: var(--hop-SearchField-font-family);
1967
+ font-size: var(--hop-SearchField-font-size);
1968
+ font-weight: var(--hop-SearchField-font-weight);
1969
+ line-height: var(--hop-SearchField-line-height);
1970
+ color: var(--hop-SearchField-color);
1971
+ }
1972
+ .SearchField-module__hop-SearchField__prefix___fTYJ5 {
1973
+ color: var(--hop-SearchField-color);
1974
+ }
1975
+ .SearchField-module__hop-SearchField__InputGroup___d2Mc7 {
1976
+ order: 1;
1977
+ padding-inline: var(--input-group-padding-inline-start) var(--input-group-padding-inline-end);
1978
+ }
1979
+ .SearchField-module__hop-SearchField--clearable___v0yM- {
1980
+ --input-group-padding-inline-end: 0;
1981
+ }
1982
+ .SearchField-module__hop-SearchField__ErrorMessage___hjFPO,
1983
+ .SearchField-module__hop-SearchField__HelperMessage___-FCvM {
1984
+ order: 3;
1985
+ }
1986
+ .SearchField-module__hop-SearchField___fjYpy input::-webkit-search-cancel-button,
1987
+ .SearchField-module__hop-SearchField___fjYpy input::-webkit-search-decoration {
1988
+ appearance: none;
1989
+ }
1990
+ .SearchField-module__hop-SearchField___fjYpy[data-empty] {
1991
+ --clear-button-display: none;
1992
+ }
1993
+ .SearchField-module__hop-SearchField__ClearButton___NTKEw {
1994
+ display: var(--clear-button-display);
1995
+ }
1996
+
1997
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/Link/src/Link.module.css/#css-module-data */
1998
+ .Link-module__hop-Link___A7403 {
1999
+ --hop-Link-border-radius: var(--hop-shape-rounded-sm);
2000
+ --hop-Link-focus-ring-color: var(--hop-primary-border-focus);
2001
+ --hop-Link-color-disabled: var(--hop-neutral-text-disabled);
2002
+ --hop-Link-column-gap: var(--hop-space-inline-xs);
2003
+ --hop-Link-primary-text-color: var(--hop-primary-text);
2004
+ --hop-Link-primary-text-disabled-color: var(--hop-primary-text-disabled);
2005
+ --hop-Link-primary-text-hover-color: var(--hop-primary-text-hover);
2006
+ --hop-Link-primary-text-pressed-color: var(--hop-primary-text-press);
2007
+ --hop-Link-neutral-text-color: var(--hop-neutral-text);
2008
+ --hop-Link-neutral-text-disabled-color: var(--hop-neutral-text-disabled);
2009
+ --hop-Link-neutral-text-hover-color: var(--hop-neutral-text-hover);
2010
+ --hop-Link-neutral-text-pressed-color: var(--hop-neutral-text-press);
2011
+ cursor: pointer;
2012
+ display: inline-flex;
2013
+ column-gap: var(--hop-Link-column-gap);
2014
+ align-items: center;
2015
+ box-sizing: border-box;
2016
+ inline-size: fit-content;
2017
+ text-decoration: none;
2018
+ text-underline-offset: 0.125rem;
2019
+ border-radius: var(--hop-Link-border-radius);
2020
+ outline: none;
2021
+ outline-offset: 0.125rem;
2022
+ }
2023
+ .Link-module__hop-Link___A7403[data-focus-visible] {
2024
+ outline: 0.125rem solid var(--hop-Link-focus-ring-color);
2025
+ }
2026
+ .Link-module__hop-Link___A7403[data-disabled] {
2027
+ cursor: default;
2028
+ }
2029
+ .Link-module__hop-Link--quiet___ZckQe[data-focus-visible],
2030
+ .Link-module__hop-Link--quiet___ZckQe[data-hovered] {
2031
+ text-decoration: underline;
2032
+ }
2033
+ .Link-module__hop-Link___A7403:not(.Link-module__hop-Link--quiet___ZckQe) {
2034
+ text-decoration: underline;
2035
+ }
2036
+ .Link-module__hop-Link--primary___7RcG1 {
2037
+ color: var(--hop-Link-primary-text-color);
2038
+ }
2039
+ .Link-module__hop-Link--primary___7RcG1[data-disabled] {
2040
+ color: var(--hop-Link-primary-text-disabled-color);
2041
+ }
2042
+ .Link-module__hop-Link--primary___7RcG1:not([data-disabled])[data-focus-visible],
2043
+ .Link-module__hop-Link--primary___7RcG1:not([data-disabled])[data-hovered] {
2044
+ color: var(--hop-Link-primary-text-hover-color);
2045
+ }
2046
+ .Link-module__hop-Link--primary___7RcG1:not([data-disabled])[data-pressed] {
2047
+ color: var(--hop-Link-primary-text-pressed-color);
2048
+ }
2049
+ .Link-module__hop-Link--secondary___HiMOh {
2050
+ color: var(--hop-Link-neutral-text-color);
2051
+ }
2052
+ .Link-module__hop-Link--secondary___HiMOh[data-disabled] {
2053
+ color: var(--hop-Link-neutral-text-disabled-color);
2054
+ }
2055
+ .Link-module__hop-Link--secondary___HiMOh:not([data-disabled])[data-focus-visible],
2056
+ .Link-module__hop-Link--secondary___HiMOh:not([data-disabled])[data-hovered] {
2057
+ color: var(--hop-Link-neutral-text-hover-color);
2058
+ }
2059
+ .Link-module__hop-Link--secondary___HiMOh:not([data-disabled])[data-pressed] {
2060
+ color: var(--hop-Link-neutral-text-pressed-color);
2061
+ }
2062
+ .Link-module__hop-Link__icon___D-D9r,
2063
+ .Link-module__hop-Link__icon-list___RDI-L {
2064
+ order: 2;
2065
+ }
2066
+ .Link-module__hop-Link__text___Vnxs6 {
2067
+ order: 1;
2068
+ }
2069
+ .Link-module__hop-Link__start-icon___pwaHz,
2070
+ .Link-module__hop-Link__start-icon-list___74vmY {
2071
+ order: 0;
2072
+ }
2073
+
2074
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/radio/src/Radio.module.css/#css-module-data */
2075
+ .Radio-module__hop-Radio___tvFFT {
2076
+ --hop-Radio-box-border-size: 0.0625rem;
2077
+ --hop-Radio-box-border-color: var(--hop-neutral-border);
2078
+ --hop-Radio-box-background-color: var(--hop-neutral-surface);
2079
+ --hop-Radio-box-outline-size: 0.125rem;
2080
+ --hop-Radio-box-outline-color: var(--hop-primary-border-focus);
2081
+ --hop-Radio-bullet-color: var(--hop-neutral-icon-selected);
2082
+ --hop-Radio-bullet-display: none;
2083
+ --hop-Radio-text-color: var(--hop-neutral-text);
2084
+ --hop-Radio-icon-color: var(--hop-neutral-icon);
2085
+ --hop-Radio-box-border-color-hovered: var(--hop-neutral-border-hover);
2086
+ --hop-Radio-box-background-color-hovered: var(--hop-neutral-surface-hover);
2087
+ --hop-Radio-text-color-hovered: var(--hop-neutral-text-hover);
2088
+ --hop-Radio-icon-color-hovered: var(--hop-neutral-icon-hover);
2089
+ --hop-Radio-box-border-color-pressed: var(--hop-neutral-border-press);
2090
+ --hop-Radio-box-background-color-pressed: var(--hop-neutral-surface-press);
2091
+ --hop-Radio-text-color-pressed: var(--hop-neutral-text-press);
2092
+ --hop-Radio-icon-color-pressed: var(--hop-neutral-icon-press);
2093
+ --hop-Radio-box-border-color-selected: var(--hop-neutral-border-selected);
2094
+ --hop-Radio-box-background-color-selected: var(--hop-neutral-surface-selected);
2095
+ --hop-Radio-bullet-display-selected: block;
2096
+ --hop-Radio-text-color-selected: var(--hop-neutral-text);
2097
+ --hop-Radio-icon-color-selected: var(--hop-neutral-icon);
2098
+ --hop-Radio-box-border-color-disabled: var(--hop-neutral-border-disabled);
2099
+ --hop-Radio-box-background-color-disabled: var(--hop-neutral-surface-disabled);
2100
+ --hop-Radio-bullet-color-disabled: var(--hop-neutral-icon-disabled);
2101
+ --hop-Radio-text-color-disabled: var(--hop-neutral-text-disabled);
2102
+ --hop-Radio-icon-color-disabled: var(--hop-neutral-icon-disabled);
2103
+ --hop-Radio-box-border-color-focused: var(--hop-neutral-border-hover);
2104
+ --hop-Radio-box-background-color-focused: var(--hop-neutral-surface-hover);
2105
+ --hop-Radio-text-color-focused: var(--hop-neutral-text);
2106
+ --hop-Radio-icon-color-focused: var(--hop-neutral-icon);
2107
+ --hop-Radio-box-border-color-invalid: var(--hop-danger-border-strong);
2108
+ --hop-Radio-box-background-color-invalid: var(--hop-neutral-surface);
2109
+ --hop-Radio-box-border-color-hovered-invalid: var(--hop-danger-border-strong);
2110
+ --hop-Radio-box-background-color-hovered-invalid: var(--hop-danger-surface);
2111
+ --hop-Radio-box-border-color-pressed-invalid: var(--hop-danger-border-press);
2112
+ --hop-Radio-box-background-color-pressed-invalid: var(--hop-danger-surface-weak);
2113
+ --hop-Radio-box-border-color-focused-invalid: var(--hop-danger-border-strong);
2114
+ --hop-Radio-box-background-color-focused-invalid: var(--hop-danger-surface);
2115
+ --hop-Radio-box-border-color-selected-invalid: var(--hop-danger-border-strong);
2116
+ --hop-Radio-box-background-color-selected-invalid: var(--hop-danger-surface-strong);
2117
+ --hop-Radio-bullet-color-invalid: var(--hop-danger-icon-strong);
2118
+ --hop-Radio-text-color-invalid: var(--hop-danger-text-weak);
2119
+ --hop-Radio-icon-color-invalid: var(--hop-danger-icon-weak);
2120
+ --hop-Radio-text-color-hovered-invalid: var(--hop-danger-text-weak-hover);
2121
+ --hop-Radio-icon-color-hovered-invalid: var(--hop-danger-icon-weak-hover);
2122
+ --hop-Radio-text-color-pressed-invalid: var(--hop-danger-text-weak-press);
2123
+ --hop-Radio-box-sm-inline-size: 1rem;
2124
+ --hop-Radio-box-sm-block-size: 1rem;
2125
+ --hop-Radio-text-sm-top-offset: calc((var(--box-inline-size) - (var(--hop-body-sm-line-height) * var(--hop-body-sm-font-size))) / 2);
2126
+ --hop-Radio-text-sm-margin-inline-start: calc(var(--hop-space-inline-sm) - var(--hop-space-inline-xs));
2127
+ --hop-Radio-box-md-inline-size: 1.5rem;
2128
+ --hop-Radio-box-md-block-size: 1.5rem;
2129
+ --hop-Radio-text-md-top-offset: calc((var(--box-inline-size) - (var(--hop-body-md-line-height) * var(--hop-body-md-font-size))) / 2);
2130
+ --hop-Radio-text-md-margin-inline-start: calc(var(--hop-space-inline-md) - var(--hop-space-inline-xs));
2131
+ --box-background-color: var(--hop-Radio-box-background-color);
2132
+ --box-border-color: var(--hop-Radio-box-border-color);
2133
+ --box-border-radius: var(--hop-shape-circle);
2134
+ --bullet-color: var(--hop-Radio-bullet-color);
2135
+ --bullet-display: var(--hop-Radio-bullet-display);
2136
+ --cursor: pointer;
2137
+ --text-color: var(--hop-Radio-text-color);
2138
+ --icon-color: var(--hop-Radio-icon-color);
2139
+ --description-color: var(--hop-Radio-description-color);
2140
+ --transition-duration: var(--hop-easing-duration-2);
2141
+ cursor: var(--cursor);
2142
+ display: flex;
2143
+ column-gap: var(--hop-space-inline-xs);
2144
+ align-items: flex-start;
2145
+ justify-content: flex-start;
2146
+ box-sizing: border-box;
2147
+ inline-size: max-content;
2148
+ max-inline-size: 100%;
2149
+ }
2150
+ .Radio-module__hop-Radio___tvFFT[data-focus-visible],
2151
+ .Radio-module__hop-Radio--focused___qmLB6 {
2152
+ --box-background-color: var(--hop-Radio-box-background-color-focused);
2153
+ --box-border-color: var(--hop-Radio-box-border-color-focused);
2154
+ --box-outline: var(--hop-Radio-box-outline-size) solid var(--hop-Radio-box-outline-color);
2155
+ --text-color: var(--hop-Radio-text-color-focused);
2156
+ --icon-color: var(--hop-Radio-icon-color-focused);
2157
+ --description-color: var(--hop-Radio-description-color-focus);
2158
+ }
2159
+ .Radio-module__hop-Radio___tvFFT[data-hovered],
2160
+ .Radio-module__hop-Radio--hovered___vZ50W {
2161
+ --box-background-color: var(--hop-Radio-box-background-color-hovered);
2162
+ --box-border-color: var(--hop-Radio-box-border-color-hovered);
2163
+ --text-color: var(--hop-Radio-text-color-hovered);
2164
+ --icon-color: var(--hop-Radio-icon-color-hovered);
2165
+ --description-color: var(--hop-Radio-description-color-hover);
2166
+ }
2167
+ .Radio-module__hop-Radio___tvFFT[data-pressed],
2168
+ .Radio-module__hop-Radio--pressed___wBVf6 {
2169
+ --box-background-color: var(--hop-Radio-box-background-color-pressed);
2170
+ --box-border-color: var(--hop-Radio-box-border-color-pressed);
2171
+ --text-color: var(--hop-Radio-text-color-pressed);
2172
+ --icon-color: var(--hop-Radio-icon-color-pressed);
2173
+ --description-color: var(--hop-Radio-description-color-pressed);
2174
+ }
2175
+ .Radio-module__hop-Radio___tvFFT[data-selected] {
2176
+ --box-background-color: var(--hop-Radio-box-background-color-selected);
2177
+ --box-border-color: var(--hop-Radio-box-border-color-selected);
2178
+ --bullet-display: var(--hop-Radio-bullet-display-selected);
2179
+ --text-color: var(--hop-Radio-text-color-selected);
2180
+ --icon-color: var(--hop-Radio-icon-color-selected);
2181
+ --description-color: var(--hop-Radio-description-color-selected);
2182
+ }
2183
+ .Radio-module__hop-Radio___tvFFT[data-invalid] {
2184
+ --box-background-color: var(--hop-Radio-box-background-color-invalid);
2185
+ --box-border-color: var(--hop-Radio-box-border-color-invalid);
2186
+ --bullet-color: var(--hop-Radio-bullet-color-invalid);
2187
+ --text-color: var(--hop-Radio-text-color-invalid);
2188
+ --icon-color: var(--hop-Radio-icon-color-invalid);
2189
+ --description-color: var(--hop-Radio-description-color-invalid);
2190
+ }
2191
+ .Radio-module__hop-Radio___tvFFT:where([data-invalid])[data-focus-visible] {
2192
+ --box-background-color: var(--hop-Radio-box-background-color-focused-invalid);
2193
+ --box-border-color: var(--hop-Radio-box-border-color-focused-invalid);
2194
+ }
2195
+ .Radio-module__hop-Radio___tvFFT:where([data-invalid])[data-hovered] {
2196
+ --box-background-color: var(--hop-Radio-box-background-color-hovered-invalid);
2197
+ --box-border-color: var(--hop-Radio-box-border-color-hovered-invalid);
2198
+ --text-color: var(--hop-Radio-text-color-hovered-invalid);
2199
+ --icon-color: var(--hop-Radio-text-color-hovered-invalid);
2200
+ }
2201
+ .Radio-module__hop-Radio___tvFFT:where([data-invalid])[data-pressed] {
2202
+ --box-background-color: var(--hop-Radio-box-background-color-pressed-invalid);
2203
+ --box-border-color: var(--hop-Radio-box-border-color-pressed-invalid);
2204
+ --text-color: var(--hop-Radio-text-color-pressed-invalid);
2205
+ --icon-color: var(--hop-Radio-icon-color-pressed-invalid);
2206
+ }
2207
+ .Radio-module__hop-Radio___tvFFT:where([data-invalid])[data-selected] {
2208
+ --box-background-color: var(--hop-Radio-box-background-color-selected-invalid);
2209
+ --box-border-color: var(--hop-Radio-box-border-color-selected-invalid);
2210
+ }
2211
+ .Radio-module__hop-Radio___tvFFT[data-disabled] {
2212
+ --box-background-color: var(--hop-Radio-box-background-color-disabled);
2213
+ --box-border-color: var(--hop-Radio-box-border-color-disabled);
2214
+ --bullet-color: var(--hop-Radio-bullet-color-disabled);
2215
+ --cursor: not-allowed;
2216
+ --text-color: var(--hop-Radio-text-color-disabled);
2217
+ --icon-color: var(--hop-Radio-icon-color-disabled);
2218
+ --description-color: var(--hop-Radio-description-color-disabled);
2219
+ }
2220
+ .Radio-module__hop-Radio--sm___5kxPW {
2221
+ --box-inline-size: var(--hop-Radio-box-sm-inline-size);
2222
+ --box-block-size: var(--hop-Radio-box-sm-block-size);
2223
+ --text-top-offset: var(--hop-Radio-text-sm-top-offset);
2224
+ --text-margin-inline-start: var(--hop-Radio-text-sm-margin-inline-start);
2225
+ }
2226
+ .Radio-module__hop-Radio--md___4M0c- {
2227
+ --box-inline-size: var(--hop-Radio-box-md-inline-size);
2228
+ --box-block-size: var(--hop-Radio-box-md-block-size);
2229
+ --text-top-offset: var(--hop-Radio-text-md-top-offset);
2230
+ --text-margin-inline-start: var(--hop-Radio-text-md-margin-inline-start);
2231
+ }
2232
+ .Radio-module__hop-Radio__icon___Fgjja,
2233
+ .Radio-module__hop-Radio__icon-list___bQRXR {
2234
+ flex: 0 0 auto;
2235
+ order: 3;
2236
+ color: var(--icon-color);
2237
+ }
2238
+ .Radio-module__hop-Radio__box___FserC {
2239
+ display: flex;
2240
+ flex: 0 0 auto;
2241
+ align-items: center;
2242
+ justify-content: center;
2243
+ order: 1;
2244
+ box-sizing: border-box;
2245
+ inline-size: var(--box-inline-size, var(--hop-Radio-box-md-inline-size));
2246
+ block-size: var(--box-block-size, var(--hop-Radio-box-md-block-size));
2247
+ background-color: var(--box-background-color);
2248
+ border: var(--hop-Radio-box-border-size) solid var(--box-border-color);
2249
+ border-radius: var(--box-border-radius);
2250
+ outline: var(--box-outline, none);
2251
+ outline-offset: 0.125rem;
2252
+ transition: background-color var(--transition-duration) var(--hop-easing-productive), border var(--transition-duration) var(--hop-easing-productive);
2253
+ }
2254
+ .Radio-module__hop-Radio__bullet___k73mE {
2255
+ display: var(--bullet-display);
2256
+ color: var(--bullet-color);
2257
+ }
2258
+ .Radio-module__hop-Radio__text___qi3fJ {
2259
+ flex: 0 1 auto;
2260
+ order: 2;
2261
+ min-inline-size: 0;
2262
+ margin-block-start: var(--text-top-offset, var(--hop-Radio-text-md-top-offset));
2263
+ margin-inline-start: var(--text-margin-inline-start, var(--hop-Radio-text-md-margin-inline-start));
2264
+ color: var(--text-color);
2265
+ }
2266
+
2267
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/radio/src/RadioField.module.css/#css-module-data */
2268
+ .RadioField-module__hop-RadioField___yJGpS {
2269
+ --hop-RadioField-description-color: var(--hop-neutral-text-weak);
2270
+ --hop-RadioField-description-color-disabled: var(--hop-neutral-text-disabled);
2271
+ --hop-RadioField-sm-row-gap: var(--hop-space-stack-xs);
2272
+ --hop-RadioField-radio-sm-inline-size: 1rem;
2273
+ --hop-RadioField-description-sm-margin-inline-start: calc(var(--hop-RadioField-radio-sm-inline-size) + var(--hop-space-inline-sm));
2274
+ --hop-RadioField-md-row-gap: var(--hop-space-stack-xs);
2275
+ --hop-RadioField-radio-md-inline-size: 1.5rem;
2276
+ --hop-RadioField-description-md-margin-inline-start: calc(var(--hop-RadioField-radio-md-inline-size) + var(--hop-space-inline-md));
2277
+ --description-color: var(--hop-RadioField-description-color);
2278
+ display: flex;
2279
+ flex-direction: column;
2280
+ row-gap: var(--row-gap, var(--hop-space-stack-sm));
2281
+ align-items: flex-start;
2282
+ justify-content: flex-start;
2283
+ box-sizing: border-box;
2284
+ inline-size: max-content;
2285
+ max-inline-size: 100%;
2286
+ }
2287
+ .RadioField-module__hop-RadioField___yJGpS[data-disabled] {
2288
+ --description-color: var(--hop-RadioField-description-color-disabled);
2289
+ }
2290
+ .RadioField-module__hop-RadioField--sm___Ebkgx {
2291
+ --row-gap: var(--hop-RadioField-sm-row-gap);
2292
+ --description-margin-inline-start: var(--hop-RadioField-description-sm-margin-inline-start);
2293
+ }
2294
+ .RadioField-module__hop-RadioField--md___-5LDz {
2295
+ --row-gap: var(--hop-RadioField-md-row-gap);
2296
+ --description-margin-inline-start: var(--hop-RadioField-description-md-margin-inline-start);
2297
+ }
2298
+ .RadioField-module__hop-RadioField__description___SLwmm {
2299
+ order: 2;
2300
+ margin-inline-start: var(--description-margin-inline-start, var(--hop-RadioField-description-md-margin-inline-start));
2301
+ color: var(--description-color);
2302
+ }
2303
+ .RadioField-module__hop-RadioField__radio___W-PyW {
2304
+ order: 1;
2305
+ }
2306
+
2307
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/radio/src/RadioGroup.module.css/#css-module-data */
2308
+ .RadioGroup-module__hop-RadioGroup___0LfBO {
2309
+ --hop-RadioGroup-align-items: flex-start;
2310
+ --hop-RadioGroup-justify-content: flex-start;
2311
+ --hop-RadioGroup-bordered-border-color: var(--hop-neutral-border-weak);
2312
+ --hop-RadioGroup-sm-column-gap: var(--hop-space-inline-sm);
2313
+ --hop-RadioGroup-sm-row-gap: var(--hop-space-stack-sm);
2314
+ --hop-RadioGroup-list-sm-column-gap: var(--hop-space-inline-sm);
2315
+ --hop-RadioGroup-list-sm-row-gap: var(--hop-space-stack-sm);
2316
+ --hop-RadioGroup-bordered-sm-padding: var(--hop-space-inset-sm);
2317
+ --hop-RadioGroup-bordered-sm-column-gap: var(--hop-space-inline-sm);
2318
+ --hop-RadioGroup-bordered-sm-row-gap: var(--hop-space-stack-sm);
2319
+ --hop-RadioGroup-list-bordered-sm-column-gap: 0;
2320
+ --hop-RadioGroup-list-bordered-sm-row-gap: 0;
2321
+ --hop-RadioGroup-md-column-gap: var(--hop-space-inline-md);
2322
+ --hop-RadioGroup-md-row-gap: var(--hop-space-stack-md);
2323
+ --hop-RadioGroup-list-md-column-gap: var(--hop-space-inline-md);
2324
+ --hop-RadioGroup-list-md-row-gap: var(--hop-space-stack-md);
2325
+ --hop-RadioGroup-bordered-md-padding: var(--hop-space-inset-md);
2326
+ --hop-RadioGroup-bordered-md-column-gap: var(--hop-space-inline-sm);
2327
+ --hop-RadioGroup-bordered-md-row-gap: var(--hop-space-stack-sm);
2328
+ --hop-RadioGroup-list-bordered-md-column-gap: 0;
2329
+ --hop-RadioGroup-list-bordered-md-row-gap: 0;
2330
+ --hop-RadioGroup-vertical-flex-direction: column;
2331
+ --hop-RadioGroup-horizontal-flex-direction: row;
2332
+ --radio-border-size: 0.0625rem;
2333
+ --radio-border-color: var(--hop-neutral-border-weak);
2334
+ --flex-direction: var(--hop-RadioGroup-vertical-flex-direction);
2335
+ --align-items: var(--hop-RadioGroup-align-items);
2336
+ --justify-content: var(--hop-RadioGroup-justify-content);
2337
+ --flex-wrap: wrap;
2338
+ --inline-size: max-content;
2339
+ display: flex;
2340
+ flex-direction: column;
2341
+ gap: var(--row-gap, var(--hop-space-stack-md)) var(--column-gap, var(--hop-space-inline-md));
2342
+ align-items: var(--align-items);
2343
+ justify-content: var(--justify-content);
2344
+ box-sizing: border-box;
2345
+ inline-size: var(--inline-size);
2346
+ max-inline-size: 100%;
2347
+ }
2348
+ .RadioGroup-module__hop-RadioGroup--bordered___v6dmv {
2349
+ --list-border: var(--radio-border-size) solid var(--radio-border-color);
2350
+ --list-border-radius: var(--hop-shape-rounded-md);
2351
+ }
2352
+ .RadioGroup-module__hop-RadioGroup--sm___BGmAJ {
2353
+ --column-gap: var(--hop-RadioGroup-sm-column-gap);
2354
+ --row-gap: var(--hop-RadioGroup-sm-row-gap);
2355
+ --list-column-gap: var(--hop-RadioGroup-list-sm-column-gap);
2356
+ --list-row-gap: var(--hop-RadioGroup-list-sm-row-gap);
2357
+ }
2358
+ .RadioGroup-module__hop-RadioGroup--md___DTbSi {
2359
+ --column-gap: var(--hop-RadioGroup-md-column-gap);
2360
+ --row-gap: var(--hop-RadioGroup-md-row-gap);
2361
+ --list-column-gap: var(--hop-RadioGroup-list-md-column-gap);
2362
+ --list-row-gap: var(--hop-RadioGroup-list-md-row-gap);
2363
+ }
2364
+ .RadioGroup-module__hop-RadioGroup--bordered___v6dmv.RadioGroup-module__hop-RadioGroup--sm___BGmAJ {
2365
+ --radio-padding: var(--hop-RadioGroup-bordered-sm-padding);
2366
+ --column-gap: var(--hop-RadioGroup-bordered-sm-column-gap);
2367
+ --row-gap: var(--hop-RadioGroup-bordered-sm-row-gap);
2368
+ --list-column-gap: var(--hop-RadioGroup-list-bordered-sm-column-gap);
2369
+ --list-row-gap: var(--hop-RadioGroup-list-bordered-sm-row-gap);
2370
+ }
2371
+ .RadioGroup-module__hop-RadioGroup--bordered___v6dmv.RadioGroup-module__hop-RadioGroup--md___DTbSi {
2372
+ --radio-padding: var(--hop-RadioGroup-bordered-md-padding);
2373
+ --column-gap: var(--hop-RadioGroup-bordered-md-column-gap);
2374
+ --row-gap: var(--hop-RadioGroup-bordered-md-row-gap);
2375
+ --list-column-gap: var(--hop-RadioGroup-list-bordered-md-column-gap);
2376
+ --list-row-gap: var(--hop-RadioGroup-list-bordered-md-row-gap);
2377
+ }
2378
+ .RadioGroup-module__hop-RadioGroup___0LfBO[data-orientation=horizontal] {
2379
+ --flex-direction: var(--hop-RadioGroup-horizontal-flex-direction);
2380
+ }
2381
+ .RadioGroup-module__hop-RadioGroup--bordered___v6dmv[data-orientation=horizontal] {
2382
+ --flex-wrap: nowrap;
2383
+ }
2384
+ .RadioGroup-module__hop-RadioGroup___0LfBO > .RadioGroup-module__hop-RadioGroup__label___C8kFI {
2385
+ order: 1;
2386
+ }
2387
+ .RadioGroup-module__hop-RadioGroup__list___w-EHk {
2388
+ display: flex;
2389
+ flex-flow: var(--flex-direction) var(--flex-wrap);
2390
+ gap: var(--list-row-gap, var(--hop-space-stack-md)) var(--list-column-gap, var(--hop-space-inline-md));
2391
+ order: 2;
2392
+ box-sizing: border-box;
2393
+ inline-size: var(--inline-size);
2394
+ max-inline-size: 100%;
2395
+ border: var(--list-border, none);
2396
+ border-radius: var(--list-border-radius, 0);
2397
+ }
2398
+ .RadioGroup-module__hop-RadioGroup__list___w-EHk > .RadioGroup-module__hop-RadioGroup__radio___aY5Cj {
2399
+ position: relative;
2400
+ flex: 0 1 auto;
2401
+ align-content: start;
2402
+ inline-size: auto;
2403
+ min-inline-size: 0;
2404
+ padding: var(--radio-padding, 0);
2405
+ }
2406
+ .RadioGroup-module__hop-RadioGroup--bordered___v6dmv .RadioGroup-module__hop-RadioGroup__list___w-EHk > .RadioGroup-module__hop-RadioGroup__radio___aY5Cj ~ .RadioGroup-module__hop-RadioGroup__radio___aY5Cj::before {
2407
+ content: "";
2408
+ position: absolute;
2409
+ display: block;
2410
+ }
2411
+ .RadioGroup-module__hop-RadioGroup--bordered___v6dmv[data-orientation=vertical] .RadioGroup-module__hop-RadioGroup__list___w-EHk > .RadioGroup-module__hop-RadioGroup__radio___aY5Cj ~ .RadioGroup-module__hop-RadioGroup__radio___aY5Cj::before {
2412
+ inset-block-start: 0;
2413
+ inset-inline: 0;
2414
+ border-block-start: var(--list-border, none);
2415
+ }
2416
+ .RadioGroup-module__hop-RadioGroup--bordered___v6dmv[data-orientation=horizontal] .RadioGroup-module__hop-RadioGroup__list___w-EHk > .RadioGroup-module__hop-RadioGroup__radio___aY5Cj ~ .RadioGroup-module__hop-RadioGroup__radio___aY5Cj::before {
2417
+ inset-block: 0;
2418
+ inset-inline-start: 0;
2419
+ border-inline-start: var(--list-border, none);
2420
+ }
2421
+ .RadioGroup-module__hop-RadioGroup___0LfBO > .RadioGroup-module__hop-RadioGroup__error-message___2-GLQ,
2422
+ .RadioGroup-module__hop-RadioGroup___0LfBO > .RadioGroup-module__hop-RadioGroup__helper-message___MfsKX {
2423
+ order: 3;
2424
+ }
2425
+
2426
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/ListBox/src/ListBoxItemSkeleton.module.css/#css-module-data */
2427
+ .ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton___j-yVV {
2428
+ --hop-ListBoxItemSkeleton-background-color: var(--hop-rock-50);
2429
+ --hop-ListBoxItemSkeleton-background-color-dark: var(--hop-rock-75);
2430
+ --hop-ListBoxItemSkeleton-border-radius: var(--hop-shape-rounded-md);
2431
+ --hop-ListBoxItemSkeleton-animation-duration: 1.4s;
2432
+ --hop-ListBoxItemSkeleton-animation-reduced-motion-duration: 3.4s;
2433
+ --hop-ListBoxItemSkeleton-linear-gradient:
2434
+ linear-gradient(
2435
+
2436
+ 90deg,
2437
+ var(--hop-ListBoxItemSkeleton-background-color) 25%,
2438
+ var(--hop-ListBoxItemSkeleton-background-color-dark) 37%,
2439
+ var(--hop-ListBoxItemSkeleton-background-color-dark) 63%,
2440
+ var(--hop-ListBoxItemSkeleton-background-color) 100% );
2441
+ --hop-ListBoxItemSkeleton-xs-height: 1.25rem;
2442
+ --hop-ListBoxItemSkeleton-sm-height: 1.25rem;
2443
+ --hop-ListBoxItemSkeleton-md-height: 1.25rem;
2444
+ --hop-ListBoxItemSkeleton-lg-height: 1.5rem;
2445
+ --animation-duration: var(--hop-ListBoxItemSkeleton-animation-duration);
2446
+ grid-area: label;
2447
+ box-sizing: border-box;
2448
+ block-size: var(--height);
2449
+ background-color: var(--hop-ListBoxItemSkeleton-background-color);
2450
+ background-image: var(--hop-ListBoxItemSkeleton-linear-gradient);
2451
+ background-size: 400% 100%;
2452
+ border-radius: var(--hop-ListBoxItemSkeleton-border-radius);
2453
+ animation-name: ListBoxItemSkeleton-module__placeholder-shimmer___-EhAf;
2454
+ animation-duration: var(--animation-duration);
2455
+ animation-timing-function: ease-in-out;
2456
+ animation-fill-mode: forwards;
2457
+ animation-iteration-count: infinite;
2458
+ @media (prefers-reduced-motion: reduce) {
2459
+ --animation-duration: var(--hop-ListBoxItemSkeleton-animation-reduced-motion-duration);
2460
+ }
2461
+ }
2462
+ .ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--xs___vJ3Zw {
2463
+ --height: var(--hop-ListBoxItemSkeleton-xs-height);
2464
+ }
2465
+ .ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--sm___0NFkM {
2466
+ --height: var(--hop-ListBoxItemSkeleton-sm-height);
2467
+ }
2468
+ .ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--md___Q1wFA {
2469
+ --height: var(--hop-ListBoxItemSkeleton-md-height);
2470
+ }
2471
+ .ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--lg___EOBf9 {
2472
+ --height: var(--hop-ListBoxItemSkeleton-lg-height);
2473
+ }
2474
+ @keyframes ListBoxItemSkeleton-module__placeholder-shimmer___-EhAf {
2475
+ 0% {
2476
+ background-position: 125% 50%;
2477
+ }
2478
+ 100% {
2479
+ background-position: -25% 50%;
2480
+ }
2481
+ }
2482
+
2483
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/ListBox/src/ListBoxItem.module.css/#css-module-data */
2484
+ .ListBoxItem-module__hop-ListBoxItem___yV2lV {
2485
+ --hop-ListBoxItem-background-color: transparent;
2486
+ --hop-ListBoxItem-border-radius: var(--hop-shape-rounded-md);
2487
+ --hop-ListBoxItem-text-color: var(--hop-neutral-text);
2488
+ --hop-ListBoxItem-icon-color: var(--hop-neutral-icon);
2489
+ --hop-ListBoxItem-outline-size: 0.125rem;
2490
+ --hop-ListBoxItem-outline-color: var(--hop-primary-border-focus);
2491
+ --hop-ListBoxItem-row-gap: var(--hop-space-stack-xs);
2492
+ --hop-ListBoxItem-column-gap: var(--hop-space-inline-sm);
2493
+ --hop-ListBoxItem-indicator-inline-size: calc( 1rem + var(--hop-ListBoxItem-column-gap));
2494
+ --hop-ListBoxItem-description-text-color: var(--hop-neutral-text-weak);
2495
+ --hop-ListBoxItem-grid-template-areas: "indicator avatar icon label end-icon badge";
2496
+ --hop-ListBoxItem-grid-template-areas-with-description: "indicator avatar icon label end-icon badge" ". avatar . description description description";
2497
+ --hop-ListBoxItem-grid-template-areas-loading: "label";
2498
+ --hop-ListBoxItem-grid-template-columns: var(--hop-ListBoxItem-indicator-inline-size) auto auto 1fr auto auto;
2499
+ --hop-ListBoxItem-grid-template-columns-not-selected: 0 auto auto 1fr auto auto;
2500
+ --hop-ListBoxItem-grid-template-columns-loading: 1fr;
2501
+ --hop-ListBoxItem-xs-padding-block: var(--hop-space-inset-xs);
2502
+ --hop-ListBoxItem-xs-padding-inline: var(--hop-space-inset-md);
2503
+ --hop-ListBoxItem-xs-min-height: 2rem;
2504
+ --hop-ListBoxItem-sm-padding-block: var(--hop-space-inset-sm);
2505
+ --hop-ListBoxItem-sm-padding-inline: var(--hop-space-inset-md);
2506
+ --hop-ListBoxItem-sm-min-height: 2.5rem;
2507
+ --hop-ListBoxItem-md-padding-block: var(--hop-space-inset-md);
2508
+ --hop-ListBoxItem-md-padding-inline: var(--hop-space-inset-md);
2509
+ --hop-ListBoxItem-md-min-height: 3.5rem;
2510
+ --hop-ListBoxItem-lg-padding-block: var(--hop-space-inset-md);
2511
+ --hop-ListBoxItem-lg-padding-inline: var(--hop-space-inset-md);
2512
+ --hop-ListBoxItem-lg-min-height: 4rem;
2513
+ --hop-ListBoxItem-background-color-hovered: var(--hop-neutral-surface-hover);
2514
+ --hop-ListBoxItem-text-color-hovered: var(--hop-neutral-text-hover);
2515
+ --hop-ListBoxItem-icon-color-hovered: var(--hop-neutral-icon-hover);
2516
+ --hop-ListBoxItem-background-color-pressed: var(--hop-neutral-surface-press);
2517
+ --hop-ListBoxItem-text-color-pressed: var(--hop-neutral-text-press);
2518
+ --hop-ListBoxItem-icon-color-pressed: var(--hop-neutral-icon-press);
2519
+ --hop-ListBoxItem-background-color-focused: var(--hop-neutral-surface-hover);
2520
+ --hop-ListBoxItem-text-color-focused: var(--hop-neutral-text-hover);
2521
+ --hop-ListBoxItem-icon-color-focused: var(--hop-neutral-icon-hover);
2522
+ --hop-ListBoxItem-background-color-selected: transparent;
2523
+ --hop-ListBoxItem-text-color-selected: var(--hop-neutral-text);
2524
+ --hop-ListBoxItem-icon-color-selected: var(--hop-neutral-icon);
2525
+ --hop-ListBoxItem-background-color-invalid: transparent;
2526
+ --hop-ListBoxItem-background-color-invalid-hovered: var(--hop-danger-surface-hover);
2527
+ --hop-ListBoxItem-background-color-invalid-pressed: var(--hop-danger-surface-press);
2528
+ --hop-ListBoxItem-background-color-invalid-focused: var(--hop-danger-surface-hover);
2529
+ --hop-ListBoxItem-background-color-invalid-selected: transparent;
2530
+ --hop-ListBoxItem-background-color-invalid-disabled: transparent;
2531
+ --hop-ListBoxItem-text-color-invalid: var(--hop-danger-text-weak);
2532
+ --hop-ListBoxItem-text-color-invalid-hovered: var(--hop-danger-text-strong);
2533
+ --hop-ListBoxItem-text-color-invalid-pressed: var(--hop-danger-text-strong);
2534
+ --hop-ListBoxItem-text-color-invalid-focused: var(--hop-danger-text-strong);
2535
+ --hop-ListBoxItem-text-color-invalid-selected: var(--hop-danger-text-weak);
2536
+ --hop-ListBoxItem-text-color-invalid-disabled: var(--hop-danger-text-disabled);
2537
+ --hop-ListBoxItem-icon-color-invalid: var(--hop-danger-icon-weak);
2538
+ --hop-ListBoxItem-icon-color-invalid-hovered: var(--hop-danger-icon-strong);
2539
+ --hop-ListBoxItem-icon-color-invalid-pressed: var(--hop-danger-icon-strong);
2540
+ --hop-ListBoxItem-icon-color-invalid-focused: var(--hop-danger-icon-strong);
2541
+ --hop-ListBoxItem-icon-color-invalid-selected: var(--hop-danger-icon-weak);
2542
+ --hop-ListBoxItem-icon-color-invalid-disabled: var(--hop-danger-icon-disabled);
2543
+ --hop-ListBoxItem-description-text-color-invalid-hovered: inherit;
2544
+ --hop-ListBoxItem-description-text-color-invalid-pressed: inherit;
2545
+ --hop-ListBoxItem-description-text-color-invalid-focused: inherit;
2546
+ --hop-ListBoxItem-background-color-disabled: transparent;
2547
+ --hop-ListBoxItem-text-color-disabled: var(--hop-neutral-text-disabled);
2548
+ --hop-ListBoxItem-icon-color-disabled: var(--hop-neutral-icon-disabled);
2549
+ --background-color: var(--hop-ListBoxItem-background-color);
2550
+ --text-color: var(--hop-ListBoxItem-text-color);
2551
+ --icon-color: var(--hop-ListBoxItem-icon-color);
2552
+ --outline: none;
2553
+ --cursor: default;
2554
+ --checkmark-opacity: 0;
2555
+ --description-text-color: var(--hop-ListBoxItem-description-text-color);
2556
+ --row-gap: 0;
2557
+ --grid-template-areas: var(--hop-ListBoxItem-grid-template-areas);
2558
+ --grid-template-columns: var(--hop-ListBoxItem-grid-template-columns);
2559
+ --checkmark-transition: opacity 0.2s ease-in-out .2s;
2560
+ cursor: var(--cursor);
2561
+ box-sizing: border-box;
2562
+ color: var(--text-color);
2563
+ background-color: var(--background-color);
2564
+ border-radius: var(--hop-ListBoxItem-border-radius);
2565
+ outline: var(--outline);
2566
+ }
2567
+ .ListBoxItem-module__hop-ListBoxItem--xs___zojZL {
2568
+ --padding-block: var(--hop-ListBoxItem-xs-padding-block);
2569
+ --padding-inline: var(--hop-ListBoxItem-xs-padding-inline);
2570
+ --min-height: var(--hop-ListBoxItem-xs-min-height);
2571
+ }
2572
+ .ListBoxItem-module__hop-ListBoxItem--sm___pgMdo {
2573
+ --padding-block: var(--hop-ListBoxItem-sm-padding-block);
2574
+ --padding-inline: var(--hop-ListBoxItem-sm-padding-inline);
2575
+ --min-height: var(--hop-ListBoxItem-sm-min-height);
2576
+ }
2577
+ .ListBoxItem-module__hop-ListBoxItem--md___scZYZ {
2578
+ --padding-block: var(--hop-ListBoxItem-md-padding-block);
2579
+ --padding-inline: var(--hop-ListBoxItem-md-padding-inline);
2580
+ --min-height: var(--hop-ListBoxItem-md-min-height);
2581
+ }
2582
+ .ListBoxItem-module__hop-ListBoxItem--lg___RGvvE {
2583
+ --padding-block: var(--hop-ListBoxItem-lg-padding-block);
2584
+ --padding-inline: var(--hop-ListBoxItem-lg-padding-inline);
2585
+ --min-height: var(--hop-ListBoxItem-lg-min-height);
2586
+ }
2587
+ .ListBoxItem-module__hop-ListBoxItem___yV2lV[data-selection-mode] {
2588
+ --cursor: pointer;
2589
+ }
2590
+ .ListBoxItem-module__hop-ListBoxItem___yV2lV:not([data-selection-mode]) {
2591
+ --grid-template-columns: var(--hop-ListBoxItem-grid-template-columns-not-selected);
2592
+ }
2593
+ .ListBoxItem-module__hop-ListBoxItem__inner___wPFzb:not([data-list-has-selection]):has(.ListBoxItem-module__hop-ListBoxItem__checkmark___ojOFi) {
2594
+ --grid-template-columns: var(--hop-ListBoxItem-grid-template-columns-not-selected);
2595
+ }
2596
+ .ListBoxItem-module__hop-ListBoxItem__inner___wPFzb[data-list-has-selection-end]:has(.ListBoxItem-module__hop-ListBoxItem__checkmark___ojOFi) {
2597
+ --checkmark-transition: none;
2598
+ }
2599
+ .ListBoxItem-module__hop-ListBoxItem___yV2lV[data-selected] {
2600
+ --background-color: var(--hop-ListBoxItem-background-color-selected);
2601
+ --text-color: var(--hop-ListBoxItem-text-color-selected);
2602
+ --icon-color: var(--hop-ListBoxItem-icon-color-selected);
2603
+ --checkmark-opacity: 1;
2604
+ }
2605
+ .ListBoxItem-module__hop-ListBoxItem___yV2lV[data-focus-visible] {
2606
+ --background-color: var(--hop-ListBoxItem-background-color-focused);
2607
+ --text-color: var(--hop-ListBoxItem-text-color-focused);
2608
+ --icon-color: var(--hop-ListBoxItem-icon-color-focused);
2609
+ --outline: var(--hop-ListBoxItem-outline-size) solid var(--hop-ListBoxItem-outline-color);
2610
+ }
2611
+ .ListBoxItem-module__hop-ListBoxItem___yV2lV[data-hovered] {
2612
+ --background-color: var(--hop-ListBoxItem-background-color-hovered);
2613
+ --text-color: var(--hop-ListBoxItem-text-color-hovered);
2614
+ --icon-color: var(--hop-ListBoxItem-icon-color-hovered);
2615
+ }
2616
+ .ListBoxItem-module__hop-ListBoxItem___yV2lV[data-pressed] {
2617
+ --background-color: var(--hop-ListBoxItem-background-color-pressed);
2618
+ --text-color: var(--hop-ListBoxItem-text-color-pressed);
2619
+ --icon-color: var(--hop-ListBoxItem-icon-color-pressed);
2620
+ }
2621
+ .ListBoxItem-module__hop-ListBoxItem___yV2lV[data-disabled] {
2622
+ --background-color: var(--hop-ListBoxItem-background-color-disabled);
2623
+ --text-color: var(--hop-ListBoxItem-text-color-disabled);
2624
+ --icon-color: var(--hop-ListBoxItem-icon-color-disabled);
2625
+ --description-text-color: var(--hop-ListBoxItem-text-color-disabled);
2626
+ --cursor: not-allowed;
2627
+ }
2628
+ .ListBoxItem-module__hop-ListBoxItem___yV2lV[data-invalid] {
2629
+ --background-color: var(--hop-ListBoxItem-background-color-invalid);
2630
+ --text-color: var(--hop-ListBoxItem-text-color-invalid);
2631
+ --icon-color: var(--hop-ListBoxItem-icon-color-invalid);
2632
+ }
2633
+ .ListBoxItem-module__hop-ListBoxItem___yV2lV[data-invalid][data-selected] {
2634
+ --background-color: var(--hop-ListBoxItem-background-color-invalid-selected);
2635
+ --text-color: var(--hop-ListBoxItem-text-color-invalid-selected);
2636
+ --icon-color: var(--hop-ListBoxItem-icon-color-invalid-selected);
2637
+ }
2638
+ .ListBoxItem-module__hop-ListBoxItem___yV2lV[data-invalid][data-focus-visible] {
2639
+ --background-color: var(--hop-ListBoxItem-background-color-invalid-focused);
2640
+ --text-color: var(--hop-ListBoxItem-text-color-invalid-focused);
2641
+ --icon-color: var(--hop-ListBoxItem-icon-color-invalid-focused);
2642
+ --description-text-color: var(--hop-ListBoxItem-description-text-color-invalid-focused);
2643
+ }
2644
+ .ListBoxItem-module__hop-ListBoxItem___yV2lV[data-invalid][data-hovered] {
2645
+ --background-color: var(--hop-ListBoxItem-background-color-invalid-hovered);
2646
+ --text-color: var(--hop-ListBoxItem-text-color-invalid-hovered);
2647
+ --icon-color: var(--hop-ListBoxItem-icon-color-invalid-hovered);
2648
+ --description-text-color: var(--hop-ListBoxItem-description-text-color-invalid-hovered);
2649
+ }
2650
+ .ListBoxItem-module__hop-ListBoxItem___yV2lV[data-invalid][data-pressed] {
2651
+ --background-color: var(--hop-ListBoxItem-background-color-invalid-pressed);
2652
+ --text-color: var(--hop-ListBoxItem-text-color-invalid-pressed);
2653
+ --icon-color: var(--hop-ListBoxItem-icon-color-invalid-pressed);
2654
+ --description-text-color: var(--hop-ListBoxItem-description-text-color-invalid-pressed);
2655
+ }
2656
+ .ListBoxItem-module__hop-ListBoxItem___yV2lV[data-invalid][data-disabled] {
2657
+ --background-color: var(--hop-ListBoxItem-background-color-invalid-disabled);
2658
+ --text-color: var(--hop-ListBoxItem-text-color-invalid-disabled);
2659
+ --icon-color: var(--hop-ListBoxItem-icon-color-invalid-disabled);
2660
+ }
2661
+ .ListBoxItem-module__hop-ListBoxItem___yV2lV:has(.ListBoxItem-module__hop-ListBoxItem__description___wOYyA) {
2662
+ --row-gap: var(--hop-ListBoxItem-row-gap);
2663
+ --grid-template-areas: var(--hop-ListBoxItem-grid-template-areas-with-description);
2664
+ }
2665
+ .ListBoxItem-module__hop-ListBoxItem___yV2lV[data-loading] {
2666
+ --grid-template-areas: var(--hop-ListBoxItem-grid-template-areas-loading);
2667
+ --grid-template-columns: var(--hop-ListBoxItem-grid-template-columns-loading);
2668
+ }
2669
+ .ListBoxItem-module__hop-ListBoxItem__inner___wPFzb {
2670
+ display: grid;
2671
+ grid-template-areas: var(--grid-template-areas);
2672
+ grid-template-columns: var(--grid-template-columns);
2673
+ row-gap: var(--row-gap);
2674
+ align-items: center;
2675
+ box-sizing: border-box;
2676
+ min-block-size: var(--min-height);
2677
+ padding-block: var(--padding-block);
2678
+ padding-inline: var(--padding-inline);
2679
+ transition: grid-template-columns .3s ease-in-out;
2680
+ }
2681
+ .ListBoxItem-module__hop-ListBoxItem__checkmark___ojOFi {
2682
+ grid-area: indicator;
2683
+ margin-inline-end: var(--hop-ListBoxItem-column-gap);
2684
+ color: var(--icon-color);
2685
+ opacity: var(--checkmark-opacity);
2686
+ transition: var(--checkmark-transition);
2687
+ }
2688
+ .ListBoxItem-module__hop-ListBoxItem__radio-group___neL2N,
2689
+ .ListBoxItem-module__hop-ListBoxItem__checkbox___K1mdm {
2690
+ pointer-events: none;
2691
+ user-select: none;
2692
+ grid-area: indicator;
2693
+ margin-inline-end: var(--hop-ListBoxItem-column-gap);
2694
+ }
2695
+ .ListBoxItem-module__hop-ListBoxItem__avatar___u30th {
2696
+ grid-area: avatar;
2697
+ margin-inline-end: var(--hop-ListBoxItem-column-gap);
2698
+ }
2699
+ .ListBoxItem-module__hop-ListBoxItem__icon-list___XfSik,
2700
+ .ListBoxItem-module__hop-ListBoxItem__icon___NYKSZ {
2701
+ grid-area: icon;
2702
+ flex: 0 0 auto;
2703
+ margin-inline-end: var(--hop-ListBoxItem-column-gap);
2704
+ color: var(--icon-color);
2705
+ }
2706
+ .ListBoxItem-module__hop-ListBoxItem__label___csfbD {
2707
+ overflow: hidden;
2708
+ grid-area: label;
2709
+ min-inline-size: 0;
2710
+ text-overflow: ellipsis;
2711
+ white-space: nowrap;
2712
+ }
2713
+ .ListBoxItem-module__hop-ListBoxItem__end-icon-list___nhfer,
2714
+ .ListBoxItem-module__hop-ListBoxItem__end-icon___P9SLM {
2715
+ grid-area: end-icon;
2716
+ margin-inline-start: var(--hop-ListBoxItem-column-gap);
2717
+ color: var(--icon-color);
2718
+ }
2719
+ .ListBoxItem-module__hop-ListBoxItem__badge___f9Zb9 {
2720
+ grid-area: badge;
2721
+ margin-inline-start: var(--hop-ListBoxItem-column-gap);
2722
+ }
2723
+ .ListBoxItem-module__hop-ListBoxItem__description___wOYyA {
2724
+ overflow: hidden;
2725
+ display: -webkit-box;
2726
+ grid-area: description;
2727
+ -webkit-box-orient: vertical;
2728
+ color: var(--description-text-color);
2729
+ -webkit-line-clamp: 2;
2730
+ line-clamp: 2;
2731
+ }
2732
+
2733
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/ListBox/src/ListBox.module.css/#css-module-data */
2734
+ .ListBox-module__hop-ListBox___QXVwa {
2735
+ --hop-ListBox-background-color: var(--hop-neutral-surface);
2736
+ --hop-ListBox-border-color: var(--hop-neutral-border-weak);
2737
+ --hop-ListBox-border-radius: var(--hop-shape-rounded-md);
2738
+ --hop-ListBox-border-size: 0.0625rem;
2739
+ --hop-ListBox-padding-inline: var(--hop-space-inset-sm);
2740
+ --hop-ListBox-padding-block: var(--hop-space-inset-sm);
2741
+ --hop-ListBox-min-width: 13.625rem;
2742
+ --hop-ListBox-max-width: 18rem;
2743
+ --hop-ListBox-width: max-content;
2744
+ --hop-ListBox-fluid-width: 100%;
2745
+ --hop-ListBox-fluid-max-width: 100%;
2746
+ --hop-ListBox-section-padding-block: var(--hop-ListBox-padding-block);
2747
+ --hop-ListBox-section-padding-inline: var(--hop-ListBox-padding-inline);
2748
+ --hop-ListBox-section-margin-block: var(--hop-space-stack-sm);
2749
+ --hop-ListBox-section-margin-inline: calc(-1 * var(--hop-ListBox-padding-inline));
2750
+ --hop-ListBox-section-border-size: var(--hop-ListBox-border-size);
2751
+ --hop-ListBox-section-border-color: var(--hop-ListBox-border-color);
2752
+ --hop-ListBox-section-header-font-family: var(--hop-overline-font-family);
2753
+ --hop-ListBox-section-header-font-size: var(--hop-overline-font-size);
2754
+ --hop-ListBox-section-header-font-weight: var(--hop-overline-font-weight);
2755
+ --hop-ListBox-section-header-letter-spacing: 0.015rem;
2756
+ --hop-ListBox-section-header-line-height: var(--hop-overline-line-height);
2757
+ --hop-ListBox-section-header-text-transform: uppercase;
2758
+ --hop-ListBox-section-header-padding: var(--hop-space-inset-stretch-sm);
2759
+ --hop-ListBox-section-header-top-offset: var(--hop-overline-top-offset);
2760
+ --hop-ListBox-section-header-bottom-offset: var(--hop-overline-bottom-offset);
2761
+ --hop-ListBox-divider-margin-block: var(--hop-space-stack-sm);
2762
+ --hop-ListBox-divider-margin-inline: calc(-1 * var(--hop-ListBox-padding-inline));
2763
+ --max-width: var(--hop-ListBox-max-width);
2764
+ --width: var(--hop-ListBox-width);
2765
+ --section-padding-block-start: var(--hop-ListBox-section-padding-block);
2766
+ --section-padding-block-end: var(--hop-ListBox-section-padding-block);
2767
+ --section-margin-block-start: 0;
2768
+ --section-margin-block-end: 0;
2769
+ --section-border-block-start: 0;
2770
+ --section-border-block-end: var(--hop-ListBox-section-border-size) solid var(--hop-ListBox-section-border-color);
2771
+ overflow-y: auto;
2772
+ box-sizing: border-box;
2773
+ inline-size: var(--width);
2774
+ min-inline-size: var(--hop-ListBox-min-width);
2775
+ max-inline-size: var(--max-width);
2776
+ padding-block: var(--hop-ListBox-padding-block);
2777
+ padding-inline: var(--hop-ListBox-padding-inline);
2778
+ background-color: var(--hop-ListBox-background-color);
2779
+ border: var(--hop-ListBox-border-size) solid var(--hop-ListBox-border-color);
2780
+ border-radius: var(--hop-ListBox-border-radius);
2781
+ }
2782
+ .ListBox-module__hop-ListBox--fluid___Bk46B {
2783
+ --max-width: var(--hop-ListBox-fluid-max-width);
2784
+ --width: var(--hop-ListBox-fluid-width);
2785
+ }
2786
+ .ListBox-module__hop-ListBox__section___L6k5l {
2787
+ margin-block: var(--section-margin-block-start) var(--section-margin-block-end);
2788
+ margin-inline: var(--hop-ListBox-section-margin-inline);
2789
+ padding-block: var(--section-padding-block-start) var(--section-padding-block-end);
2790
+ padding-inline: var(--hop-ListBox-section-padding-inline);
2791
+ border-block-start: var(--section-border-block-start);
2792
+ border-block-end: var(--section-border-block-end);
2793
+ }
2794
+ .ListBox-module__hop-ListBox__item___n2kTc + .ListBox-module__hop-ListBox__section___L6k5l {
2795
+ --section-margin-block-start: var(--hop-ListBox-section-margin-block);
2796
+ --section-border-block-start: var(--hop-ListBox-section-border-size) solid var(--hop-ListBox-section-border-color);
2797
+ }
2798
+ .ListBox-module__hop-ListBox__section___L6k5l:has(+ .ListBox-module__hop-ListBox__item___n2kTc) {
2799
+ --section-margin-block-end: var(--hop-ListBox-section-margin-block);
2800
+ }
2801
+ .ListBox-module__hop-ListBox__section___L6k5l:first-child {
2802
+ --section-padding-block-start: 0;
2803
+ }
2804
+ .ListBox-module__hop-ListBox__section___L6k5l:last-child {
2805
+ --section-padding-block-end: 0;
2806
+ --section-border-block-end: 0;
2807
+ }
2808
+ .ListBox-module__hop-ListBox__section-header___-2AbX {
2809
+ margin: 0;
2810
+ padding: var(--hop-ListBox-section-header-padding);
2811
+ font-family: var(--hop-ListBox-section-header-font-family);
2812
+ font-size: var(--hop-ListBox-section-header-font-size);
2813
+ font-weight: var(--hop-ListBox-section-header-font-weight);
2814
+ line-height: var(--hop-ListBox-section-header-line-height);
2815
+ text-transform: var(--hop-ListBox-section-header-text-transform);
2816
+ letter-spacing: var(--hop-ListBox-section-header-letter-spacing);
2817
+ }
2818
+ .ListBox-module__hop-ListBox__section-header___-2AbX::before,
2819
+ .ListBox-module__hop-ListBox__section-header___-2AbX::after {
2820
+ content: "";
2821
+ display: block;
2822
+ box-sizing: border-box;
2823
+ inline-size: 0;
2824
+ block-size: 0;
2825
+ }
2826
+ .ListBox-module__hop-ListBox__section-header___-2AbX::before {
2827
+ margin-block-end: var(--hop-ListBox-section-header-bottom-offset);
2828
+ }
2829
+ .ListBox-module__hop-ListBox__section-header___-2AbX::after {
2830
+ margin-block-start: var(--hop-ListBox-section-header-top-offset);
2831
+ }
2832
+ .ListBox-module__hop-ListBox__divider___nHChF {
2833
+ margin-block: var(--hop-ListBox-divider-margin-block);
2834
+ margin-inline: var(--hop-ListBox-divider-margin-inline);
2835
+ }
2836
+
2837
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/overlays/Popover/src/Popover.module.css/#css-module-data */
2838
+ :where(.Popover-module__hop-Popover___Z-GAs *) {
2839
+ font-family: var(--font-family);
2840
+ font-size: var(--font-size);
2841
+ font-weight: var(--font-weight);
2842
+ line-height: var(--line-height);
2843
+ outline: none;
2844
+ }
2845
+ .Popover-module__hop-Popover__dialog___pY0tm {
2846
+ --hop-Popover-background: var(--hop-neutral-surface);
2847
+ --hop-Popover-font-family: var(--hop-body-sm-font-family);
2848
+ --hop-Popover-font-size: var(--hop-body-sm-font-size);
2849
+ --hop-Popover-font-weight: var(--hop-body-sm-font-weight);
2850
+ --hop-Popover-line-height: var(--hop-body-sm-line-height);
2851
+ --hop-Popover-color: var(--hop-neutral-text);
2852
+ --hop-Popover-title-font-family: var(--hop-body-sm-font-family);
2853
+ --hop-Popover-title-font-weight: var(--hop-body-sm-semibold-font-weight);
2854
+ --hop-Popover-content-font-size: var(--hop-body-sm-font-size);
2855
+ --hop-Popover-content-line-height: var(--hop-body-sm-line-height);
2856
+ --hop-Popover-content-color: var(--hop-neutral-text-weak);
2857
+ --hop-Popover-footer-font-size: var(--hop-body-sm-font-size);
2858
+ --hop-Popover-footer-line-height: var(--hop-body-sm-line-height);
2859
+ --hop-Popover-footer-link-color: var(--hop-primary-text);
2860
+ --hop-Popover-border: 0.0625rem solid var(--hop-neutral-border-weak);
2861
+ --hop-Popover-border-radius: var(--hop-shape-rounded-md);
2862
+ --hop-Popover-box-shadow: var(--hop-elevation-lifted);
2863
+ --hop-Popover-max-inline-width: calc(100% - var(--hop-space-inline-md));
2864
+ --font-family: var(--hop-Popover-font-family);
2865
+ --font-size: var(--hop-Popover-font-size);
2866
+ --font-weight: var(--hop-Popover-font-weight);
2867
+ --line-height: var(--hop-Popover-line-height);
2868
+ --width: var(--hop-Popover-max-inline-width);
2869
+ display: grid;
2870
+ grid-template-areas: "header header" "content content" "footer action";
2871
+ grid-template-columns: repeat(2, auto);
2872
+ column-gap: var(--hop-space-inset-sm);
2873
+ box-sizing: border-box;
2874
+ inline-size: var(--width);
2875
+ max-inline-size: var(--width);
2876
+ padding: var(--hop-space-inset-md);
2877
+ background-color: var(--hop-Popover-background);
2878
+ border: var(--hop-Popover-border);
2879
+ border-radius: var(--hop-Popover-border-radius);
2880
+ box-shadow: var(--hop-Popover-box-shadow);
2881
+ @media (width >= 40rem) {
2882
+ --width: 25rem;
2883
+ }
2884
+ }
2885
+ .Popover-module__hop-Popover__title___S6A5Z {
2886
+ grid-area: header;
2887
+ color: var(--hop-Popover-color);
2888
+ }
2889
+ .Popover-module__hop-Popover__actions___95sTO,
2890
+ .Popover-module__hop-Popover__action___nfocQ {
2891
+ grid-area: action;
2892
+ justify-self: end;
2893
+ margin-block-start: var(--hop-space-stack-sm);
2894
+ }
2895
+ .Popover-module__hop-Popover__content___GTE4M {
2896
+ --font-size: var(--hop-Popover-content-font-size);
2897
+ --line-height: var(--hop-Popover-content-line-height);
2898
+ grid-area: content;
2899
+ margin-block: var(--hop-space-stack-sm) 0;
2900
+ margin-inline: 0;
2901
+ padding: 0;
2902
+ color: var(--hop-Popover-content-color);
2903
+ }
2904
+ .Popover-module__hop-Popover__footer___VHYUA {
2905
+ --font-size: var(--hop-Popover-footer-font-size);
2906
+ --line-height: var(--hop-Popover-footer-line-height);
2907
+ grid-area: footer;
2908
+ place-self: center start;
2909
+ margin-block-start: var(--hop-space-stack-sm);
2910
+ color: var(--hop-Popover-color);
2911
+ }
2912
+
2913
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/switch/src/Switch.module.css/#css-module-data */
2914
+ .Switch-module__hop-Switch___SEquW {
2915
+ --hop-Switch-border-size: 0.0625rem;
2916
+ --hop-Switch-border-color: var(--hop-neutral-border);
2917
+ --hop-Switch-border-radius: var(--hop-shape-rounded-lg);
2918
+ --hop-Switch-background-color: var(--hop-neutral-surface);
2919
+ --hop-Switch-thumb-color: var(--hop-neutral-icon);
2920
+ --hop-Switch-text-color: var(--hop-neutral-text);
2921
+ --hop-Switch-border-color-hover: var(--hop-neutral-border-hover);
2922
+ --hop-Switch-background-color-hover: var(--hop-neutral-surface-hover);
2923
+ --hop-Switch-thumb-color-hover: var(--hop-neutral-icon-hover);
2924
+ --hop-Switch-text-color-hover: var(--hop-neutral-text-hover);
2925
+ --hop-Switch-border-color-pressed: var(--hop-neutral-border-press);
2926
+ --hop-Switch-background-color-pressed: var(--hop-neutral-surface-press);
2927
+ --hop-Switch-thumb-color-pressed: var(--hop-neutral-icon-press);
2928
+ --hop-Switch-text-color-pressed: var(--hop-neutral-text-press);
2929
+ --hop-Switch-border-color-focus: var(--hop-neutral-border-hover);
2930
+ --hop-Switch-background-color-focus: var(--hop-neutral-surface-hover);
2931
+ --hop-Switch-thumb-color-focus: var(--hop-neutral-icon-hover);
2932
+ --hop-Switch-focus-ring-color: var(--hop-primary-border-focus);
2933
+ --hop-Switch-text-color-focus: var(--hop-neutral-text);
2934
+ --hop-Switch-border-color-selected: var(--hop-neutral-border-selected);
2935
+ --hop-Switch-background-color-selected: var(--hop-neutral-surface-selected);
2936
+ --hop-Switch-thumb-color-selected: var(--hop-neutral-icon-selected);
2937
+ --hop-Switch-text-color-selected: var(--hop-neutral-text);
2938
+ --hop-Switch-border-color-disabled: var(--hop-neutral-border-disabled);
2939
+ --hop-Switch-background-color-disabled: var(--hop-neutral-surface-disabled);
2940
+ --hop-Switch-thumb-color-disabled: var(--hop-neutral-icon-disabled);
2941
+ --hop-Switch-text-color-disabled: var(--hop-neutral-text-disabled);
2942
+ --hop-Switch-inline-size-md: 3rem;
2943
+ --hop-Switch-block-size-md: 1.5rem;
2944
+ --hop-Switch-thumb-size-md: 1rem;
2945
+ --hop-Switch-inset-inline-start-md: var(--hop-space-inset-xs);
2946
+ --hop-Switch-text-top-offset-md: calc((var(--block-size) - (var(--hop-body-md-line-height) * var(--hop-body-md-font-size))) / 2);
2947
+ --hop-Switch-inline-size-sm: 2rem;
2948
+ --hop-Switch-block-size-sm: 1rem;
2949
+ --hop-Switch-thumb-size-sm: 0.75rem;
2950
+ --hop-Switch-inset-inline-start-sm: calc(var(--hop-space-inset-xs) / 2);
2951
+ --hop-Switch-text-top-offset-sm: calc((var(--block-size) - (var(--hop-body-sm-line-height) * var(--hop-body-sm-font-size))) / 2);
2952
+ --border-size: var(--hop-Switch-border-size);
2953
+ --border-color: var(--hop-Switch-border-color);
2954
+ --border-radius: var(--hop-Switch-border-radius);
2955
+ --background-color: var(--hop-Switch-background-color);
2956
+ --column-gap: var(--hop-space-inline-sm);
2957
+ --thumb-color: var(--hop-Switch-thumb-color);
2958
+ --thumb-transform: translate(0, -50%);
2959
+ --outline: none;
2960
+ --cursor: pointer;
2961
+ --text-color: var(--hop-Switch-text-color);
2962
+ cursor: var(--cursor);
2963
+ display: inline-flex;
2964
+ column-gap: var(--column-gap);
2965
+ align-items: flex-start;
2966
+ justify-content: flex-start;
2967
+ box-sizing: border-box;
2968
+ inline-size: max-content;
2969
+ max-inline-size: 100%;
2970
+ }
2971
+ .Switch-module__hop-Switch--sm___fHOlk {
2972
+ --inline-size: var(--hop-Switch-inline-size-sm);
2973
+ --block-size: var(--hop-Switch-block-size-sm);
2974
+ --thumb-size: var(--hop-Switch-thumb-size-sm);
2975
+ --inset-inline-start: var(--hop-Switch-inset-inline-start-sm);
2976
+ --text-top-offset: var(--hop-Switch-text-top-offset-sm);
2977
+ }
2978
+ .Switch-module__hop-Switch--md___bpZdR {
2979
+ --inline-size: var(--hop-Switch-inline-size-md);
2980
+ --block-size: var(--hop-Switch-block-size-md);
2981
+ --thumb-size: var(--hop-Switch-thumb-size-md);
2982
+ --inset-inline-start: var(--hop-Switch-inset-inline-start-md);
2983
+ --text-top-offset: var(--hop-Switch-text-top-offset-md);
2984
+ }
2985
+ .Switch-module__hop-Switch___SEquW[data-hovered] {
2986
+ --border-color: var(--hop-Switch-border-color-hover);
2987
+ --background-color: var(--hop-Switch-background-color-hover);
2988
+ --thumb-color: var(--hop-Switch-thumb-color-hover);
2989
+ --text-color: var(--hop-Switch-text-color-hover);
2990
+ }
2991
+ .Switch-module__hop-Switch___SEquW[data-pressed],
2992
+ .Switch-module__hop-Switch___SEquW[data-pressed][data-focus-visible] {
2993
+ --border-color: var(--hop-Switch-border-color-pressed);
2994
+ --background-color: var(--hop-Switch-background-color-pressed);
2995
+ --thumb-color: var(--hop-Switch-thumb-color-pressed);
2996
+ --text-color: var(--hop-Switch-text-color-pressed);
2997
+ }
2998
+ .Switch-module__hop-Switch___SEquW[data-focus-visible] {
2999
+ --border-color: var(--hop-Switch-border-color-focus);
3000
+ --background-color: var(--hop-Switch-background-color-focus);
3001
+ --thumb-color: var(--hop-Switch-thumb-color-focus);
3002
+ --outline: 0.125rem solid var(--hop-Switch-focus-ring-color);
3003
+ --text-color: var(--hop-Switch-text-color-focus);
3004
+ }
3005
+ .Switch-module__hop-Switch___SEquW[data-selected],
3006
+ .Switch-module__hop-Switch___SEquW[data-selected][data-pressed] {
3007
+ --border-color: var(--hop-Switch-border-color-selected);
3008
+ --background-color: var(--hop-Switch-background-color-selected);
3009
+ --thumb-color: var(--hop-Switch-thumb-color-selected);
3010
+ --thumb-transform: translate(calc(var(--inline-size) - var(--thumb-size, var(--hop-Switch-thumb-size-md)) - (2 * var(--inset-inline-start, var(--hop-Switch-inset-inline-start-md))) - (2 * var(--border-size))), -50%);
3011
+ --text-color: var(--hop-Switch-text-color-selected);
3012
+ }
3013
+ .Switch-module__hop-Switch___SEquW[data-disabled] {
3014
+ --border-color: var(--hop-Switch-border-color-disabled);
3015
+ --background-color: var(--hop-Switch-background-color-disabled);
3016
+ --thumb-color: var(--hop-Switch-thumb-color-disabled);
3017
+ --text-color: var(--hop-Switch-text-color-disabled);
3018
+ --cursor: not-allowed;
3019
+ }
3020
+ .Switch-module__hop-Switch__indicator___uUx3m {
3021
+ position: relative;
3022
+ flex: 0 0 auto;
3023
+ box-sizing: border-box;
3024
+ inline-size: var(--inline-size, var(--hop-Switch-inline-size-md));
3025
+ block-size: var(--block-size, var(--hop-Switch-block-size-md));
3026
+ background-color: var(--background-color);
3027
+ border: var(--border-size) solid var(--border-color);
3028
+ border-radius: var(--border-radius);
3029
+ outline: var(--outline);
3030
+ outline-offset: 0.125rem;
3031
+ transition: background var(--hop-easing-duration-2), border-color var(--hop-easing-duration-2);
3032
+ }
3033
+ .Switch-module__hop-Switch__indicator___uUx3m::before {
3034
+ content: "";
3035
+ position: absolute;
3036
+ inset-block-start: 50%;
3037
+ inset-inline-start: var(--inset-inline-start);
3038
+ transform: var(--thumb-transform);
3039
+ flex: 0 0 auto;
3040
+ order: 1;
3041
+ box-sizing: border-box;
3042
+ inline-size: var(--thumb-size);
3043
+ block-size: var(--thumb-size);
3044
+ background-color: var(--thumb-color);
3045
+ border-radius: var(--hop-shape-circle);
3046
+ transition: transform var(--hop-easing-duration-2), background var(--hop-easing-duration-2);
3047
+ }
3048
+ .Switch-module__hop-Switch__text___fdTPU {
3049
+ flex: 0 1 auto;
3050
+ order: 2;
3051
+ min-inline-size: 0;
3052
+ margin-block-start: var(--text-top-offset, var(--hop-Switch-text-top-offset-md));
3053
+ color: var(--text-color);
3054
+ }
3055
+ .Switch-module__hop-Switch__icon-list___3MhtC,
3056
+ .Switch-module__hop-Switch__icon___TY0dJ {
3057
+ order: 3;
3058
+ }
3059
+
3060
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/switch/src/SwitchField.module.css/#css-module-data */
3061
+ .SwitchField-module__hop-SwitchField___cXB1T {
3062
+ --hop-SwitchField-description-color: var(--hop-neutral-text-weak);
3063
+ --hop-SwitchField-description-color-disabled: var(--hop-neutral-text-disabled);
3064
+ --hop-SwitchField-sm-row-gap: var(--hop-space-stack-xs);
3065
+ --hop-SwitchField-switch-sm-inline-size: 2rem;
3066
+ --hop-SwitchField-description-sm-margin-inline-start: calc(var(--hop-SwitchField-switch-sm-inline-size) + var(--hop-space-inline-sm));
3067
+ --hop-SwitchField-md-row-gap: var(--hop-space-stack-xs);
3068
+ --hop-SwitchField-switch-md-inline-size: 3rem;
3069
+ --hop-SwitchField-description-md-margin-inline-start: calc(var(--hop-SwitchField-switch-md-inline-size) + var(--hop-space-inline-sm));
3070
+ --description-color: var(--hop-SwitchField-description-color);
3071
+ display: flex;
3072
+ flex-direction: column;
3073
+ row-gap: var(--row-gap, var(--hop-space-stack-sm));
3074
+ align-items: flex-start;
3075
+ justify-content: flex-start;
3076
+ box-sizing: border-box;
3077
+ inline-size: max-content;
3078
+ max-inline-size: 100%;
3079
+ }
3080
+ .SwitchField-module__hop-SwitchField___cXB1T[data-disabled] {
3081
+ --description-color: var(--hop-SwitchField-description-color-disabled);
3082
+ }
3083
+ .SwitchField-module__hop-SwitchField--sm___6MUUx {
3084
+ --row-gap: var(--hop-SwitchField-sm-row-gap);
3085
+ --description-margin-inline-start: var(--hop-SwitchField-description-sm-margin-inline-start);
3086
+ }
3087
+ .SwitchField-module__hop-SwitchField--md___-JFZO {
3088
+ --row-gap: var(--hop-SwitchField-md-row-gap);
3089
+ --description-margin-inline-start: var(--hop-SwitchField-description-md-margin-inline-start);
3090
+ }
3091
+ .SwitchField-module__hop-SwitchField__description___GRPT3 {
3092
+ order: 2;
3093
+ margin-inline-start: var(--description-margin-inline-start, var(--hop-SwitchField-description-md-margin-inline-start));
3094
+ color: var(--description-color);
3095
+ }
3096
+ .SwitchField-module__hop-SwitchField__switch___qRL1p {
3097
+ order: 1;
3098
+ }
3099
+
3100
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/tag/src/Tag.module.css/#css-module-data */
3101
+ .Tag-module__hop-Tag___44f2t {
3102
+ --hop-Tag-border-size: 0.0625rem;
3103
+ --hop-Tag-border-radius: var(--hop-shape-pill);
3104
+ --hop-Tag-border-color: var(--hop-neutral-border);
3105
+ --hop-Tag-background-color: var(--hop-neutral-surface-weak);
3106
+ --hop-Tag-text-color: var(--hop-neutral-text);
3107
+ --hop-Tag-md-block-size: 1.5rem;
3108
+ --hop-Tag-md-padding-inline-start: var(--hop-space-inset-xs);
3109
+ --hop-Tag-md-padding-inline-start-text-first: var(--hop-space-inset-sm);
3110
+ --hop-Tag-md-padding-inline-end: var(--hop-space-inset-xs);
3111
+ --hop-Tag-md-padding-inline-end-text-last: var(--hop-space-inset-sm);
3112
+ --hop-Tag-md-column-gap: var(--hop-space-inline-xs);
3113
+ --hop-Tag-lg-block-size: 2rem;
3114
+ --hop-Tag-lg-padding-inline-start: var(--hop-space-inset-xs);
3115
+ --hop-Tag-lg-padding-inline-start-text-first: var(--hop-space-inset-md);
3116
+ --hop-Tag-lg-padding-inline-end: var(--hop-space-inset-xs);
3117
+ --hop-Tag-lg-padding-inline-end-text-last: var(--hop-space-inset-md);
3118
+ --hop-Tag-lg-column-gap: var(--hop-space-inline-sm);
3119
+ --hop-Tag-background-color-focus: var(--hop-neutral-surface-weak-hover);
3120
+ --hop-Tag-border-color-focus: var(--hop-neutral-border-hover);
3121
+ --hop-Tag-text-color-focus: var(--hop-neutral-text-hover);
3122
+ --hop-Tag-focus-ring-color: var(--hop-primary-border-focus);
3123
+ --hop-Tag-background-color-hover: var(--hop-neutral-surface-weak-hover);
3124
+ --hop-Tag-border-color-hover: var(--hop-neutral-border-hover);
3125
+ --hop-Tag-text-color-hover: var(--hop-neutral-text-hover);
3126
+ --hop-Tag-background-color-selected: var(--hop-neutral-surface-weak-selected);
3127
+ --hop-Tag-border-color-selected: var(--hop-neutral-border-selected);
3128
+ --hop-Tag-text-color-selected: var(--hop-neutral-text);
3129
+ --hop-Tag-background-color-press: var(--hop-neutral-surface-weak-press);
3130
+ --hop-Tag-border-color-press: var(--hop-neutral-border-press);
3131
+ --hop-Tag-text-color-press: var(--hop-neutral-text-press);
3132
+ --hop-Tag-border-color-invalid: var(--hop-danger-border-strong);
3133
+ --hop-Tag-background-color-disabled: var(--hop-neutral-surface-disabled);
3134
+ --hop-Tag-border-color-disabled: var(--hop-neutral-border-disabled);
3135
+ --hop-Tag-text-color-disabled: var(--hop-neutral-text-disabled);
3136
+ --border-radius: var(--hop-Tag-border-radius);
3137
+ --border-size: var(--hop-Tag-border-size);
3138
+ --border-color: var(--hop-Tag-border-color);
3139
+ --background-color: var(--hop-Tag-background-color);
3140
+ --text-color: var(--hop-Tag-text-color);
3141
+ --badge-secondary-inline-margin-start: calc(-1 * var(--column-gap));
3142
+ --focus-ring-color: var(--hop-Tag-focus-ring-color);
3143
+ overflow: hidden;
3144
+ display: inline-flex;
3145
+ column-gap: var(--column-gap);
3146
+ align-items: center;
3147
+ justify-content: center;
3148
+ box-sizing: border-box;
3149
+ inline-size: max-content;
3150
+ max-inline-size: 100%;
3151
+ block-size: var(--block-size);
3152
+ padding-inline: var(--padding-inline-start) var(--padding-inline-end);
3153
+ color: var(--text-color);
3154
+ white-space: nowrap;
3155
+ background-color: var(--background-color);
3156
+ border: var(--border-size) solid var(--border-color);
3157
+ border-radius: var(--border-radius);
3158
+ outline: none;
3159
+ outline-offset: 0.125rem;
3160
+ }
3161
+ .Tag-module__hop-Tag--md___a-8Gl {
3162
+ --block-size: var(--hop-Tag-md-block-size);
3163
+ --padding-inline-start: var(--hop-Tag-md-padding-inline-start);
3164
+ --padding-inline-end: var(--hop-Tag-md-padding-inline-end);
3165
+ --column-gap: var(--hop-Tag-md-column-gap);
3166
+ --clear-btn-margin-inline: calc(-1 * var(--hop-space-inline-xs));
3167
+ }
3168
+ .Tag-module__hop-Tag--md___a-8Gl:not(:has(.Tag-module__hop-Tag__icon___Flh-O, .Tag-module__hop-Tag__icon-list___DwhHI)) {
3169
+ --padding-inline-start: var(--hop-Tag-md-padding-inline-start-text-first);
3170
+ }
3171
+ .Tag-module__hop-Tag--md___a-8Gl:not(:has(.Tag-module__hop-Tag__badge___T-TB5, .Tag-module__hop-Tag__remove-btn___p33BD, .Tag-module__hop-Tag__Spinner___qNetT)) {
3172
+ --padding-inline-end: var(--hop-Tag-md-padding-inline-end-text-last);
3173
+ }
3174
+ .Tag-module__hop-Tag--md___a-8Gl:not(:has(.Tag-module__hop-Tag__remove-btn___p33BD, .Tag-module__hop-Tag__Spinner___qNetT)) {
3175
+ --badge-margin-inline-end: calc(-1 * var(--padding-inline-end));
3176
+ }
3177
+ .Tag-module__hop-Tag--lg___7bKF1 {
3178
+ --block-size: var(--hop-Tag-lg-block-size);
3179
+ --padding-inline-start: var(--hop-Tag-lg-padding-inline-start);
3180
+ --padding-inline-end: var(--hop-Tag-lg-padding-inline-end);
3181
+ --column-gap: var(--hop-Tag-lg-column-gap);
3182
+ --clear-btn-margin-inline: 0;
3183
+ --badge-margin-inline-end: 0;
3184
+ }
3185
+ .Tag-module__hop-Tag--lg___7bKF1:not(:has(.Tag-module__hop-Tag__icon___Flh-O, .Tag-module__hop-Tag__icon-list___DwhHI)) {
3186
+ --padding-inline-start: var(--hop-Tag-lg-padding-inline-start-text-first);
3187
+ }
3188
+ .Tag-module__hop-Tag--lg___7bKF1:not(:has(.Tag-module__hop-Tag__badge___T-TB5, .Tag-module__hop-Tag__remove-btn___p33BD, .Tag-module__hop-Tag__Spinner___qNetT)) {
3189
+ --padding-inline-end: var(--hop-Tag-lg-padding-inline-end-text-last);
3190
+ }
3191
+ .Tag-module__hop-Tag___44f2t[data-href] {
3192
+ cursor: pointer;
3193
+ }
3194
+ .Tag-module__hop-Tag___44f2t[data-focus-visible] {
3195
+ --background-color: var(--hop-Tag-background-color-focus);
3196
+ --border-color: var(--hop-Tag-border-color-focus);
3197
+ --text-color: var(--hop-Tag-text-color-focus);
3198
+ outline: 0.125rem solid var(--focus-ring-color);
3199
+ }
3200
+ .Tag-module__hop-Tag___44f2t[data-hovered] {
3201
+ --background-color: var(--hop-Tag-background-color-hover);
3202
+ --border-color: var(--hop-Tag-border-color-hover);
3203
+ --text-color: var(--hop-Tag-text-color-hover);
3204
+ cursor: pointer;
3205
+ }
3206
+ .Tag-module__hop-Tag___44f2t[data-selected] {
3207
+ --background-color: var(--hop-Tag-background-color-selected);
3208
+ --border-color: var(--hop-Tag-border-color-selected);
3209
+ --text-color: var(--hop-Tag-text-color-selected);
3210
+ }
3211
+ .Tag-module__hop-Tag___44f2t[data-pressed] {
3212
+ --background-color: var(--hop-Tag-background-color-press);
3213
+ --border-color: var(--hop-Tag-border-color-press);
3214
+ --text-color: var(--hop-Tag-text-color-press);
3215
+ cursor: pointer;
3216
+ }
3217
+ .Tag-module__hop-Tag___44f2t[data-invalid] {
3218
+ --border-color: var(--hop-Tag-border-color-invalid);
3219
+ }
3220
+ .Tag-module__hop-Tag___44f2t[data-disabled] {
3221
+ --background-color: var(--hop-Tag-background-color-disabled);
3222
+ --border-color: var(--hop-Tag-border-color-disabled);
3223
+ --text-color: var(--hop-Tag-text-color-disabled);
3224
+ cursor: not-allowed;
3225
+ }
3226
+ .Tag-module__hop-Tag__icon___Flh-O,
3227
+ .Tag-module__hop-Tag__icon-list___DwhHI {
3228
+ flex: 0 0 auto;
3229
+ flex-wrap: nowrap;
3230
+ order: 1;
3231
+ }
3232
+ .Tag-module__hop-Tag__text___5AXmt {
3233
+ overflow: hidden;
3234
+ flex: 1 1 auto;
3235
+ order: 2;
3236
+ min-inline-size: 0;
3237
+ text-align: center;
3238
+ text-overflow: ellipsis;
3239
+ }
3240
+ .Tag-module__hop-Tag__badge___T-TB5 {
3241
+ flex: 0 0 auto;
3242
+ order: 3;
3243
+ margin-inline-end: var(--badge-margin-inline-end);
3244
+ }
3245
+ .Tag-module__hop-Tag__badge___T-TB5.Tag-module__hop-Badge--secondary___t5ajm {
3246
+ margin-inline-start: var(--badge-secondary-inline-margin-start);
3247
+ }
3248
+ .Tag-module__hop-Tag__remove-btn___p33BD,
3249
+ .Tag-module__hop-Tag__Spinner___qNetT {
3250
+ flex: 0 0 auto;
3251
+ order: 4;
3252
+ }
3253
+ .Tag-module__hop-Tag__remove-btn___p33BD {
3254
+ margin-inline: var(--clear-btn-margin-inline);
3255
+ }
3256
+
3257
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/tag/src/TagGroup.module.css/#css-module-data */
3258
+ .TagGroup-module__hop-TagGroup___56WQ3 {
3259
+ --hop-TagGroup-row-gap: var(--hop-space-inline-sm);
3260
+ --hop-TagGroup-list-column-gap: var(--hop-space-inline-sm);
3261
+ --hop-TagGroup-list-row-gap: var(--hop-space-inline-sm);
3262
+ --hop-TagGroup-list-focus-ring-color: var(--hop-primary-border-focus);
3263
+ --hop-TagGroup-list-border-radius: var(--hop-shape-rounded-sm);
3264
+ --row-gap: var(--hop-TagGroup-row-gap);
3265
+ --list-column-gap: var(--hop-TagGroup-list-column-gap);
3266
+ --list-row-gap: var(--hop-TagGroup-list-row-gap);
3267
+ --list-focus-ring-color: var(--hop-TagGroup-list-focus-ring-color);
3268
+ --list-border-radius: var(--hop-TagGroup-list-border-radius);
3269
+ display: flex;
3270
+ flex-direction: column;
3271
+ row-gap: var(--row-gap);
3272
+ align-items: flex-start;
3273
+ justify-content: flex-start;
3274
+ box-sizing: border-box;
3275
+ inline-size: max-content;
3276
+ max-inline-size: 100%;
3277
+ }
3278
+ .TagGroup-module__hop-TagGroup___56WQ3 > .TagGroup-module__hop-TagGroup__label___f0j9J {
3279
+ order: 1;
3280
+ }
3281
+ .TagGroup-module__hop-TagGroup__list___aSjzB {
3282
+ display: flex;
3283
+ flex-wrap: wrap;
3284
+ gap: var(--list-row-gap) var(--list-column-gap);
3285
+ align-items: center;
3286
+ order: 2;
3287
+ border-radius: var(--list-border-radius);
3288
+ outline: none;
3289
+ }
3290
+ .TagGroup-module__hop-TagGroup__list___aSjzB[data-focus-visible] {
3291
+ outline: 0.125rem solid var(--list-focus-ring-color);
3292
+ outline-offset: 0.125rem;
3293
+ }
3294
+ .TagGroup-module__hop-TagGroup___56WQ3 > .TagGroup-module__hop-TagGroup__error-message___PLqFO,
3295
+ .TagGroup-module__hop-TagGroup___56WQ3 > .TagGroup-module__hop-TagGroup__helper-message___DQNXE {
3296
+ order: 3;
3297
+ }