@hopper-ui/components 1.0.6 → 1.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (237) hide show
  1. package/CHANGELOG.md +12 -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 +12 -12
  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 +11 -11
  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 +12 -12
  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-JUMJ6A3K.js → chunk-2O5GW4WZ.js} +1 -1
  103. package/dist/{chunk-BKC74M6Y.js → chunk-2PZTP7OD.js} +1 -1
  104. package/dist/{chunk-RG4JKE4N.js → chunk-375NGVSY.js} +1 -1
  105. package/dist/{chunk-SOSHKMNI.js → chunk-576NZEOZ.js} +2 -2
  106. package/dist/{chunk-E4WFKXW4.js → chunk-5YCINTI3.js} +4 -4
  107. package/dist/{chunk-J53HGLCT.js → chunk-6FJ6VT7L.js} +1 -1
  108. package/dist/{chunk-6QMIRVLY.js → chunk-7F63PQML.js} +1 -1
  109. package/dist/{chunk-E4ALW4MZ.js → chunk-B2NAEXNH.js} +9 -9
  110. package/dist/chunk-BHRRVORW.js +625 -0
  111. package/dist/{chunk-F2URSFJA.js → chunk-C5SNXNGO.js} +2 -2
  112. package/dist/{chunk-ITQK6JTD.js → chunk-DERV7IO4.js} +1 -1
  113. package/dist/{chunk-OHB5QR5P.js → chunk-FJYIXPAV.js} +2 -2
  114. package/dist/{chunk-RA7PM75O.js → chunk-FX7SCMAB.js} +5 -5
  115. package/dist/{chunk-XRC7XE6B.js → chunk-GEDAZSYP.js} +2 -2
  116. package/dist/{chunk-53FHDOG7.js → chunk-GVS7P3EP.js} +2 -2
  117. package/dist/{chunk-3LH2JHUO.js → chunk-HJGIOIZH.js} +3 -3
  118. package/dist/{chunk-4TXFHYHL.js → chunk-HK6NUAOU.js} +1 -1
  119. package/dist/{chunk-K4ZGI7DJ.js → chunk-IGDXWHDV.js} +1 -1
  120. package/dist/{chunk-QBCCF2C2.js → chunk-J3FFNHVC.js} +2 -2
  121. package/dist/{chunk-2P3A4VVY.js → chunk-JSBRDJBE.js} +1 -6
  122. package/dist/{chunk-MVRI6GLQ.js → chunk-JYS47NMI.js} +2 -2
  123. package/dist/{chunk-XGKPMLYD.js → chunk-KC5DWQN5.js} +4 -4
  124. package/dist/chunk-KUOVH2WS.js +57 -0
  125. package/dist/{chunk-P5CWOV3L.js → chunk-LAYIMWCS.js} +2 -2
  126. package/dist/{chunk-3A6TTZAA.js → chunk-LD4PHTV5.js} +1 -1
  127. package/dist/chunk-LJXTJRSB.js +1 -0
  128. package/dist/{chunk-HR25MLRP.js → chunk-LYGSWKBB.js} +1 -1
  129. package/dist/{chunk-2XUHTPCX.js → chunk-O3B5AAY5.js} +2 -2
  130. package/dist/{chunk-G242LPQE.js → chunk-PFQFQTAW.js} +2 -2
  131. package/dist/{chunk-V5GOY6TV.js → chunk-Q4P2MTYE.js} +1 -1
  132. package/dist/{chunk-37NW34QM.js → chunk-Q6XETWRV.js} +3 -3
  133. package/dist/chunk-QVK2N2AZ.js +119 -0
  134. package/dist/{chunk-MED2BIDV.js → chunk-RERJ4IWC.js} +1 -1
  135. package/dist/chunk-SVUAG4RI.js +156 -0
  136. package/dist/{chunk-RCX5B3S3.js → chunk-T3KA26BR.js} +1 -1
  137. package/dist/{chunk-4JAV3FIH.js → chunk-VILNMAVP.js} +2 -2
  138. package/dist/chunk-WWLAPWPS.js +118 -0
  139. package/dist/{chunk-JRDN364E.js → chunk-XGLY57N7.js} +2 -2
  140. package/dist/{chunk-ZOTVZM6F.js → chunk-YEYNRBMQ.js} +1 -1
  141. package/dist/{chunk-J33IFG4U.js → chunk-YORVWKUU.js} +1 -1
  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 +14 -90
  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 +17 -89
  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 +54 -49
  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 +54 -49
  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 +54 -49
  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 +54 -49
  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 +4 -2
  237. package/dist/chunk-BC5A7RHI.js +0 -1260
@@ -1,3218 +1,5 @@
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___B7ZPi {
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___B7ZPi) {
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___2lyVp) {
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___ZJw0q) {
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___JVXXA) {
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___cL0LO) {
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___KLn7g) {
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___gb6mt) {
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___-UFCW) {
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___R2v-y {
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___r7PMb {
114
- --size: var(--hop-RichIconAvatarImage-xs-size);
115
- --icon-size: var(--hop-RichIconAvatarImage-icon-xs-size);
116
- }
117
- .RichIconAvatarImage-module__hop-RichIconAvatarImage--sm___nZFlr {
118
- --size: var(--hop-RichIconAvatarImage-sm-size);
119
- --icon-size: var(--hop-RichIconAvatarImage-icon-sm-size);
120
- }
121
- .RichIconAvatarImage-module__hop-RichIconAvatarImage--md___mkcIx {
122
- --size: var(--hop-RichIconAvatarImage-md-size);
123
- --icon-size: var(--hop-RichIconAvatarImage-icon-md-size);
124
- }
125
- .RichIconAvatarImage-module__hop-RichIconAvatarImage--lg___TifOU {
126
- --size: var(--hop-RichIconAvatarImage-lg-size);
127
- --icon-size: var(--hop-RichIconAvatarImage-icon-lg-size);
128
- }
129
- .RichIconAvatarImage-module__hop-RichIconAvatarImage--xl___xs3Zv {
130
- --size: var(--hop-RichIconAvatarImage-xl-size);
131
- --icon-size: var(--hop-RichIconAvatarImage-icon-xl-size);
132
- }
133
- .RichIconAvatarImage-module__hop-RichIconAvatarImage--2xl___l0TTX {
134
- --size: var(--hop-RichIconAvatarImage-2xl-size);
135
- --icon-size: var(--hop-RichIconAvatarImage-icon-2xl-size);
136
- }
137
- .RichIconAvatarImage-module__hop-RichIconAvatarImage___R2v-y[data-disabled] {
138
- --background-color: var(--hop-RichIconAvatarImage-background-color-disabled);
139
- }
140
- .RichIconAvatarImage-module__hop-RichIconAvatarImage__icon___6FWkl {
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___R2v-y[data-disabled] .RichIconAvatarImage-module__hop-RichIconAvatarImage__icon___6FWkl {
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___8RZO3 {
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___ynFuF {
198
- --size: var(--hop-Avatar-xs-size);
199
- }
200
- .Avatar-module__hop-Avatar--sm___3oY2t {
201
- --size: var(--hop-Avatar-sm-size);
202
- }
203
- .Avatar-module__hop-Avatar--md___6Gv9Q {
204
- --size: var(--hop-Avatar-md-size);
205
- }
206
- .Avatar-module__hop-Avatar--lg___S6Ehu {
207
- --size: var(--hop-Avatar-lg-size);
208
- }
209
- .Avatar-module__hop-Avatar--xl___1CYyi {
210
- --size: var(--hop-Avatar-xl-size);
211
- }
212
- .Avatar-module__hop-Avatar--2xl___u7E0y {
213
- --size: var(--hop-Avatar-2xl-size);
214
- }
215
- .Avatar-module__hop-Avatar--decorative-option1___ULBn2 {
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___J4qwW {
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___yKw7L {
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___KS3Oe {
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___lTcxY {
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___vuJcI {
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___SBK4z {
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___smE79 {
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___vvtuE {
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___8RZO3[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___M4hSZ {
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___a5x6R) {
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___TV62d {
293
- box-sizing: border-box;
294
- }
295
- .OverlineText-module__hop-OverlineText__text___TV62d::before,
296
- .OverlineText-module__hop-OverlineText__text___TV62d::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___TV62d::before {
304
- margin-block-end: var(--bottom-offset);
305
- }
306
- .OverlineText-module__hop-OverlineText__text___TV62d::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___vobuo {
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___qDeOA {
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___jTHaT {
340
- --background-color: var(--hop-Badge-secondary-background-color);
341
- --text-color: var(--hop-Badge-secondary-text-color);
342
- }
343
- .Badge-module__hop-Badge___vobuo[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___dMC-1 {
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___mLBaa {
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___mLBaa) {
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___SooLf) {
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___0IFHf) {
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___OwSmD) {
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___NtQQ0) {
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___-Hdm9) {
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___Ulb-V) {
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___K1Xcp) {
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___Z5UnU {
439
- 0% {
440
- transform: rotate(0deg);
441
- }
442
- 100% {
443
- transform: rotate(360deg);
444
- }
445
- }
446
- .Spinner-module__hop-Spinner___LbEMh {
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___Z5UnU .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___peiQV {
466
- --width: var(--hop-Spinner-sm-wheel-size);
467
- --height: var(--hop-Spinner-sm-wheel-size);
468
- }
469
- .Spinner-module__hop-Spinner--md___8fE20 {
470
- --width: var(--hop-Spinner-md-wheel-size);
471
- --height: var(--hop-Spinner-md-wheel-size);
472
- }
473
- .Spinner-module__hop-Spinner--lg___3UVCZ {
474
- --width: var(--hop-Spinner-lg-wheel-size);
475
- --height: var(--hop-Spinner-lg-wheel-size);
476
- }
477
- .Spinner-module__hop-Spinner__track___tZuJb {
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___EVNJP {
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___EVNJP {
498
- animation-duration: var(--hop-Spinner-fill-animation-reduced-motion-duration);
499
- }
500
- }
501
- .Spinner-module__hop-Spinner__label___nM4Dw {
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___6Jiki {
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___6Jiki[data-focus-visible] {
667
- outline: 0.125rem solid var(--hop-Button-focus-ring-color);
668
- }
669
- .Button-module__hop-Button--icon-only___y4CMb {
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___6Jiki[data-disabled],
676
- .Button-module__hop-Button___6Jiki[data-loading] {
677
- cursor: not-allowed;
678
- }
679
- .Button-module__hop-Button--fluid___amZH5 {
680
- --inline-size: 100%;
681
- }
682
- .Button-module__hop-Button--sm___3GNbY {
683
- --block-size: var(--hop-Button-sm-height);
684
- }
685
- .Button-module__hop-Button--primary___7PQ3v.Button-module__hop-Button--sm___3GNbY:not(.Button-module__hop-Button--icon-only___y4CMb) {
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___7PQ3v.Button-module__hop-Button--md___jB89G:not(.Button-module__hop-Button--icon-only___y4CMb) {
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___M28Qu.Button-module__hop-Button--md___jB89G:not(.Button-module__hop-Button--icon-only___y4CMb) {
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___M28Qu.Button-module__hop-Button--sm___3GNbY:not(.Button-module__hop-Button--icon-only___y4CMb) {
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___kpJX6.Button-module__hop-Button--md___jB89G:not(.Button-module__hop-Button--icon-only___y4CMb) {
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___kpJX6.Button-module__hop-Button--sm___3GNbY:not(.Button-module__hop-Button--icon-only___y4CMb) {
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___3zlGc.Button-module__hop-Button--md___jB89G:not(.Button-module__hop-Button--icon-only___y4CMb) {
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___3zlGc.Button-module__hop-Button--sm___3GNbY:not(.Button-module__hop-Button--icon-only___y4CMb) {
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___Lm-JJ.Button-module__hop-Button--md___jB89G:not(.Button-module__hop-Button--icon-only___y4CMb) {
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___Lm-JJ.Button-module__hop-Button--sm___3GNbY:not(.Button-module__hop-Button--icon-only___y4CMb) {
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___5s8pM.Button-module__hop-Button--md___jB89G:not(.Button-module__hop-Button--icon-only___y4CMb) {
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___5s8pM.Button-module__hop-Button--sm___3GNbY:not(.Button-module__hop-Button--icon-only___y4CMb) {
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___exZqP.Button-module__hop-Button--md___jB89G:not(.Button-module__hop-Button--icon-only___y4CMb) {
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___exZqP.Button-module__hop-Button--sm___3GNbY:not(.Button-module__hop-Button--icon-only___y4CMb) {
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___7PQ3v {
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___7PQ3v[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___7PQ3v[data-hovered]:not([data-disabled], [data-loading]),
753
- .Button-module__hop-Button--primary___7PQ3v[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___7PQ3v[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___M28Qu {
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___M28Qu[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___M28Qu[data-hovered]:not([data-disabled], [data-loading]),
775
- .Button-module__hop-Button--secondary___M28Qu[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___M28Qu[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___kpJX6 {
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___kpJX6[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___kpJX6[data-hovered]:not([data-disabled], [data-loading]),
797
- .Button-module__hop-Button--upsell___kpJX6[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___kpJX6[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___3zlGc {
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___3zlGc[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___3zlGc[data-hovered]:not([data-disabled], [data-loading]),
819
- .Button-module__hop-Button--danger___3zlGc[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___3zlGc[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___exZqP {
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___exZqP[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___exZqP[data-hovered]:not([data-disabled], [data-loading]),
841
- .Button-module__hop-Button--ghost-primary___exZqP[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___exZqP[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___5s8pM {
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___5s8pM[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___5s8pM[data-hovered]:not([data-disabled], [data-loading]),
863
- .Button-module__hop-Button--ghost-secondary___5s8pM[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___5s8pM[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___Lm-JJ {
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___Lm-JJ[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___Lm-JJ[data-hovered]:not([data-disabled], [data-loading]),
885
- .Button-module__hop-Button--ghost-danger___Lm-JJ[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___Lm-JJ[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___4F-DD {
896
- position: absolute;
897
- justify-self: center;
898
- color: var(--spinner-color);
899
- }
900
- .Button-module__hop-Button__icon___2A2PD,
901
- .Button-module__hop-Button__icon-list___Zttas {
902
- grid-area: start-icon;
903
- justify-self: end;
904
- }
905
- .Button-module__hop-Button__text___Wa9pk {
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___exZqP[data-hovered]:not([data-loading]) .Button-module__hop-Button__text___Wa9pk,
913
- .Button-module__hop-Button--ghost-secondary___5s8pM[data-hovered]:not([data-loading]) .Button-module__hop-Button__text___Wa9pk,
914
- .Button-module__hop-Button--ghost-danger___Lm-JJ[data-hovered]:not([data-loading]) .Button-module__hop-Button__text___Wa9pk,
915
- .Button-module__hop-Button--ghost-primary___exZqP[data-pressed]:not([data-loading]) .Button-module__hop-Button__text___Wa9pk,
916
- .Button-module__hop-Button--ghost-secondary___5s8pM[data-pressed]:not([data-loading]) .Button-module__hop-Button__text___Wa9pk,
917
- .Button-module__hop-Button--ghost-danger___Lm-JJ[data-pressed]:not([data-loading]) .Button-module__hop-Button__text___Wa9pk,
918
- .Button-module__hop-Button--ghost-primary___exZqP[data-focus-visible]:not([data-loading]) .Button-module__hop-Button__text___Wa9pk,
919
- .Button-module__hop-Button--ghost-secondary___5s8pM[data-focus-visible]:not([data-loading]) .Button-module__hop-Button__text___Wa9pk,
920
- .Button-module__hop-Button--ghost-danger___Lm-JJ[data-focus-visible]:not([data-loading]) .Button-module__hop-Button__text___Wa9pk {
921
- text-decoration: underline;
922
- text-underline-offset: 0.125rem;
923
- }
924
- .Button-module__hop-Button__end-icon___471ZI,
925
- .Button-module__hop-Button__end-icon-list___WAbW6 {
926
- grid-area: end-icon;
927
- }
928
- .Button-module__hop-Button___6Jiki .Button-module__hop-Button__icon-list___Zttas,
929
- .Button-module__hop-Button___6Jiki .Button-module__hop-Button__end-icon-list___WAbW6 {
930
- flex-wrap: nowrap;
931
- }
932
- .Button-module__hop-Button___6Jiki[data-loading] > *:not(.Button-module__hop-Button__Spinner___4F-DD) {
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___WMOza {
938
- display: inline-flex;
939
- flex-wrap: nowrap;
940
- gap: var(--hop-space-inline-md);
941
- }
942
- .ButtonGroup-module__hop-ButtonGroup--horizontal___Ifbuz {
943
- justify-content: center;
944
- }
945
- .ButtonGroup-module__hop-ButtonGroup--vertical___FV4jP {
946
- flex-direction: column;
947
- gap: var(--hop-space-stack-md);
948
- align-items: center;
949
- }
950
- .ButtonGroup-module__hop-ButtonGroup--start___SCa6l.ButtonGroup-module__hop-ButtonGroup--vertical___FV4jP {
951
- align-items: flex-start;
952
- }
953
- .ButtonGroup-module__hop-ButtonGroup--center___09ey-.ButtonGroup-module__hop-ButtonGroup--vertical___FV4jP {
954
- align-items: center;
955
- }
956
- .ButtonGroup-module__hop-ButtonGroup--end___SudBa.ButtonGroup-module__hop-ButtonGroup--vertical___FV4jP {
957
- align-items: flex-end;
958
- }
959
- .ButtonGroup-module__hop-ButtonGroup--start___SCa6l.ButtonGroup-module__hop-ButtonGroup--horizontal___Ifbuz {
960
- justify-content: flex-start;
961
- }
962
- .ButtonGroup-module__hop-ButtonGroup--center___09ey-.ButtonGroup-module__hop-ButtonGroup--horizontal___Ifbuz {
963
- justify-content: center;
964
- }
965
- .ButtonGroup-module__hop-ButtonGroup--end___SudBa.ButtonGroup-module__hop-ButtonGroup--horizontal___Ifbuz {
966
- justify-content: flex-end;
967
- }
968
- .ButtonGroup-module__hop-ButtonGroup--wrap___O3fzZ {
969
- flex-wrap: wrap;
970
- }
971
- .ButtonGroup-module__hop-ButtonGroup--fluid___70I5p {
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___-vxw3 {
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___-vxw3::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___-R-Cb {
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___RoLAu {
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___-R-Cb::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___RoLAu::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___-vxw3[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___-vxw3[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___-vxw3[data-hovered]:not([data-disabled], [data-pressed]),
1066
- .EmbeddedButton-module__hop-EmbeddedButton___-vxw3[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___-vxw3[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___JHGDE {
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___kkfkh {
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___kkfkh[data-focus-visible],
1156
- .Checkbox-module__hop-Checkbox--focused___TlPED {
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___kkfkh[data-hovered],
1165
- .Checkbox-module__hop-Checkbox--hovered___RChm- {
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___kkfkh[data-pressed],
1173
- .Checkbox-module__hop-Checkbox--pressed___rF14S {
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___kkfkh[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___kkfkh[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___kkfkh[data-invalid]:where([data-focus-visible], .Checkbox-module__hop-Checkbox--focused___TlPED) {
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___kkfkh[data-invalid]:where([data-hovered], .Checkbox-module__hop-Checkbox--hovered___RChm-) {
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___kkfkh[data-invalid]:where([data-pressed], .Checkbox-module__hop-Checkbox--pressed___rF14S) {
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___kkfkh: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___kkfkh[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___meRzS {
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___FP707 {
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___riT8C,
1237
- .Checkbox-module__hop-Checkbox__icon-list___qqh1A {
1238
- flex: 0 0 auto;
1239
- order: 3;
1240
- color: var(--icon-color);
1241
- }
1242
- .Checkbox-module__hop-Checkbox__box___0yaup {
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___QslyE {
1259
- display: var(--check-display);
1260
- color: var(--check-color);
1261
- }
1262
- .Checkbox-module__hop-Checkbox__text___dS-ci {
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___sv7hL {
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___sv7hL[data-disabled] {
1292
- --description-color: var(--hop-CheckboxField-description-color-disabled);
1293
- }
1294
- .CheckboxField-module__hop-CheckboxField--sm___Kkdsk {
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___2zUca {
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___0-Wfs {
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___ziF8w {
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___SA3fD {
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___cB2Bk {
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___msUnY {
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___-GUWj {
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___J0v3l {
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___D1T7w {
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___UpAzu {
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___hdnvw {
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___D1T7w.CheckboxGroup-module__hop-CheckboxGroup--sm___UpAzu {
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___D1T7w.CheckboxGroup-module__hop-CheckboxGroup--md___hdnvw {
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___J0v3l[data-orientation=horizontal] {
1420
- --flex-direction: var(--hop-CheckboxGroup-horizontal-flex-direction);
1421
- }
1422
- .CheckboxGroup-module__hop-CheckboxGroup--bordered___D1T7w[data-orientation=horizontal] {
1423
- --flex-wrap: nowrap;
1424
- }
1425
- .CheckboxGroup-module__hop-CheckboxGroup___J0v3l > .CheckboxGroup-module__hop-CheckboxGroup__label___4s1y7 {
1426
- order: 1;
1427
- }
1428
- .CheckboxGroup-module__hop-CheckboxGroup__list___f-Ifz {
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___f-Ifz > .CheckboxGroup-module__hop-CheckboxGroup__checkbox___x1-dz {
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___D1T7w .CheckboxGroup-module__hop-CheckboxGroup__list___f-Ifz > .CheckboxGroup-module__hop-CheckboxGroup__checkbox___x1-dz ~ .CheckboxGroup-module__hop-CheckboxGroup__checkbox___x1-dz::before {
1448
- content: "";
1449
- position: absolute;
1450
- display: block;
1451
- }
1452
- .CheckboxGroup-module__hop-CheckboxGroup--bordered___D1T7w[data-orientation=vertical] .CheckboxGroup-module__hop-CheckboxGroup__list___f-Ifz > .CheckboxGroup-module__hop-CheckboxGroup__checkbox___x1-dz ~ .CheckboxGroup-module__hop-CheckboxGroup__checkbox___x1-dz::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___D1T7w[data-orientation=horizontal] .CheckboxGroup-module__hop-CheckboxGroup__list___f-Ifz > .CheckboxGroup-module__hop-CheckboxGroup__checkbox___x1-dz ~ .CheckboxGroup-module__hop-CheckboxGroup__checkbox___x1-dz::before {
1458
- inset-block: 0;
1459
- inset-inline-start: 0;
1460
- border-inline-start: var(--list-border, none);
1461
- }
1462
- .CheckboxGroup-module__hop-CheckboxGroup___J0v3l > .CheckboxGroup-module__hop-CheckboxGroup__error-message___RXQBs,
1463
- .CheckboxGroup-module__hop-CheckboxGroup___J0v3l > .CheckboxGroup-module__hop-CheckboxGroup__helper-message___ArBfp {
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___s008o {
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___b5iix {
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___C8xGE {
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___taZzL {
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___7MJ0a {
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___WiQy4 {
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___D-NIl {
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___x7VFX {
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___4ZjhL {
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___D02Dr {
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___eYOWy {
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___2gGTf {
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___1ZcdZ {
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___5KV7u {
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___dcyfm {
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___PO6T4 {
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___ASMuf {
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___-uqxh {
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___mqVpj,
1620
- .Chip-module__hop-Chip__icon-list___PV91l {
1621
- flex: 0 0 auto;
1622
- flex-wrap: nowrap;
1623
- order: 1;
1624
- }
1625
- .Chip-module__hop-Chip__text___KOlG8 {
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___yJdUP,
1634
- .Chip-module__hop-Chip__end-icon-list___BmX3z {
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___lUCFu) {
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___uIryJ {
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___8-hBh {
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___IhxFv {
1723
- --inline-size: 100% ;
1724
- }
1725
- .InputGroup-module__hop-InputGroup--sm___xBYVZ {
1726
- --block-size: var(--hop-InputGroup-sm-block-size);
1727
- }
1728
- .InputGroup-module__hop-InputGroup___8-hBh[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___8-hBh[data-focus-within] {
1733
- --border: var(--hop-InputGroup-border-width) solid var(--hop-InputGroup-border-color-focus) ;
1734
- }
1735
- .InputGroup-module__hop-InputGroup___8-hBh[data-invalid] {
1736
- --border: var(--hop-InputGroup-border-width) solid var(--hop-InputGroup-border-color-invalid) ;
1737
- }
1738
- .InputGroup-module__hop-InputGroup___8-hBh[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___8IwkG {
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___IhxFv .InputGroup-module__hop-InputGroup__input___8IwkG {
1765
- --input-inline-size: 100%;
1766
- }
1767
- .InputGroup-module__hop-InputGroup--sm___xBYVZ .InputGroup-module__hop-InputGroup__input___8IwkG {
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___8IwkG::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___8IwkG[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/inputs/src/TextField.module.css/#css-module-data */
1786
- .TextField-module__hop-TextField___Ueoup {
1787
- --hop-TextField-gap: var(--hop-space-stack-xs);
1788
- --hop-TextField-inline-size: 20rem;
1789
- --hop-TextField-prefix-color: var(--hop-neutral-text-weak);
1790
- --hop-TextField-font-family: var(--hop-heading-xs-font-family);
1791
- --hop-TextField-font-size: var(--hop-heading-xs-font-size);
1792
- --hop-TextField-font-weight: var(--hop-heading-xs-font-weight);
1793
- --hop-TextField-line-height: var(--hop-heading-xs-line-height);
1794
- --hop-TextField-color: var(--hop-neutral-text-weak);
1795
- --inline-size: var(--hop-TextField-inline-size);
1796
- display: flex;
1797
- flex-direction: column;
1798
- gap: var(--hop-TextField-gap);
1799
- inline-size: var(--inline-size);
1800
- }
1801
- .TextField-module__hop-TextField--fluid___4EfDT {
1802
- --inline-size: 100%;
1803
- }
1804
- .TextField-module__hop-TextField__Label___evsNo {
1805
- order: 0;
1806
- font-family: var(--hop-TextField-font-family);
1807
- font-size: var(--hop-TextField-font-size);
1808
- font-weight: var(--hop-TextField-font-weight);
1809
- line-height: var(--hop-TextField-line-height);
1810
- color: var(--hop-TextField-color);
1811
- }
1812
- .TextField-module__hop-TextField__prefix___84A9c {
1813
- color: var(--hop-TextField-prefix-color);
1814
- }
1815
- .TextField-module__hop-TextField__InputGroup___nPfog {
1816
- order: 1;
1817
- }
1818
- .TextField-module__hop-TextField__ErrorMessage___9o-kF,
1819
- .TextField-module__hop-TextField__HelperMessage___GWvWo {
1820
- order: 3;
1821
- }
1822
-
1823
- /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/inputs/src/PasswordField.module.css/#css-module-data */
1824
- .PasswordField-module__hop-PasswordField___qT1M7 {
1825
- --hop-PasswordField-gap: var(--hop-space-stack-xs);
1826
- --hop-PasswordField-inline-size: 20rem;
1827
- --hop-PasswordField-font-family: var(--hop-heading-xs-font-family);
1828
- --hop-PasswordField-font-size: var(--hop-heading-xs-font-size);
1829
- --hop-PasswordField-font-weight: var(--hop-heading-xs-font-weight);
1830
- --hop-PasswordField-line-height: var(--hop-heading-xs-line-height);
1831
- --hop-PasswordField-color: var(--hop-neutral-text-weak);
1832
- --inline-size: var(--hop-PasswordField-inline-size);
1833
- display: flex;
1834
- flex-direction: column;
1835
- gap: var(--hop-PasswordField-gap);
1836
- inline-size: var(--inline-size);
1837
- }
1838
- .PasswordField-module__hop-PasswordField--fluid___-BkfP {
1839
- --inline-size: 100%;
1840
- }
1841
- .PasswordField-module__hop-PasswordField__Label___--1oo {
1842
- order: 0;
1843
- font-family: var(--hop-PasswordField-font-family);
1844
- font-size: var(--hop-PasswordField-font-size);
1845
- font-weight: var(--hop-PasswordField-font-weight);
1846
- line-height: var(--hop-PasswordField-line-height);
1847
- color: var(--hop-PasswordField-color);
1848
- }
1849
- .PasswordField-module__hop-PasswordField__InputGroup___-SsGj {
1850
- order: 1;
1851
- }
1852
- .PasswordField-module__hop-PasswordField__ErrorMessage___KPTAA,
1853
- .PasswordField-module__hop-PasswordField__HelperMessage___EF3Zx {
1854
- order: 3;
1855
- }
1856
-
1857
- /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/inputs/src/SearchField.module.css/#css-module-data */
1858
- .SearchField-module__hop-SearchField___XyPuD {
1859
- --hop-SearchField-gap: var(--hop-space-stack-xs);
1860
- --hop-SearchField-inline-size: 20rem;
1861
- --hop-SearchField-color: var(--hop-neutral-text-weak);
1862
- --hop-SearchField-padding: var(--hop-space-inset-md);
1863
- --hop-SearchField-font-family: var(--hop-heading-xs-font-family);
1864
- --hop-SearchField-font-size: var(--hop-heading-xs-font-size);
1865
- --hop-SearchField-font-weight: var(--hop-heading-xs-font-weight);
1866
- --hop-SearchField-line-height: var(--hop-heading-xs-line-height);
1867
- --inline-size: var(--hop-SearchField-inline-size);
1868
- --input-group-padding-inline-end: var(--hop-SearchField-padding);
1869
- --input-group-padding-inline-start: var(--hop-SearchField-padding);
1870
- --clear-button-display: flex;
1871
- display: flex;
1872
- flex-direction: column;
1873
- gap: var(--hop-SearchField-gap);
1874
- inline-size: var(--inline-size);
1875
- }
1876
- .SearchField-module__hop-SearchField--fluid___fuYKp {
1877
- --inline-size: 100%;
1878
- }
1879
- .SearchField-module__hop-SearchField__Label___JKz99 {
1880
- order: 0;
1881
- font-family: var(--hop-SearchField-font-family);
1882
- font-size: var(--hop-SearchField-font-size);
1883
- font-weight: var(--hop-SearchField-font-weight);
1884
- line-height: var(--hop-SearchField-line-height);
1885
- color: var(--hop-SearchField-color);
1886
- }
1887
- .SearchField-module__hop-SearchField__prefix___mWvae {
1888
- color: var(--hop-SearchField-color);
1889
- }
1890
- .SearchField-module__hop-SearchField__InputGroup___NPE92 {
1891
- order: 1;
1892
- padding-inline: var(--input-group-padding-inline-start) var(--input-group-padding-inline-end);
1893
- }
1894
- .SearchField-module__hop-SearchField--clearable___HIr0R {
1895
- --input-group-padding-inline-end: 0;
1896
- }
1897
- .SearchField-module__hop-SearchField__ErrorMessage___DIvi3,
1898
- .SearchField-module__hop-SearchField__HelperMessage___E5AoO {
1899
- order: 3;
1900
- }
1901
- .SearchField-module__hop-SearchField___XyPuD input::-webkit-search-cancel-button,
1902
- .SearchField-module__hop-SearchField___XyPuD input::-webkit-search-decoration {
1903
- appearance: none;
1904
- }
1905
- .SearchField-module__hop-SearchField___XyPuD[data-empty] {
1906
- --clear-button-display: none;
1907
- }
1908
- .SearchField-module__hop-SearchField__ClearButton___hyUlh {
1909
- display: var(--clear-button-display);
1910
- }
1911
-
1912
- /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/Link/src/Link.module.css/#css-module-data */
1913
- .Link-module__hop-Link___m4HlM {
1914
- --hop-Link-border-radius: var(--hop-shape-rounded-sm);
1915
- --hop-Link-focus-ring-color: var(--hop-primary-border-focus);
1916
- --hop-Link-color-disabled: var(--hop-neutral-text-disabled);
1917
- --hop-Link-column-gap: var(--hop-space-inline-xs);
1918
- --hop-Link-primary-text-color: var(--hop-primary-text);
1919
- --hop-Link-primary-text-disabled-color: var(--hop-primary-text-disabled);
1920
- --hop-Link-primary-text-hover-color: var(--hop-primary-text-hover);
1921
- --hop-Link-primary-text-pressed-color: var(--hop-primary-text-press);
1922
- --hop-Link-neutral-text-color: var(--hop-neutral-text);
1923
- --hop-Link-neutral-text-disabled-color: var(--hop-neutral-text-disabled);
1924
- --hop-Link-neutral-text-hover-color: var(--hop-neutral-text-hover);
1925
- --hop-Link-neutral-text-pressed-color: var(--hop-neutral-text-press);
1926
- cursor: pointer;
1927
- display: inline-flex;
1928
- column-gap: var(--hop-Link-column-gap);
1929
- align-items: center;
1930
- box-sizing: border-box;
1931
- inline-size: fit-content;
1932
- text-decoration: none;
1933
- text-underline-offset: 0.125rem;
1934
- border-radius: var(--hop-Link-border-radius);
1935
- outline: none;
1936
- outline-offset: 0.125rem;
1937
- }
1938
- .Link-module__hop-Link___m4HlM[data-focus-visible] {
1939
- outline: 0.125rem solid var(--hop-Link-focus-ring-color);
1940
- }
1941
- .Link-module__hop-Link___m4HlM[data-disabled] {
1942
- cursor: default;
1943
- }
1944
- .Link-module__hop-Link--quiet___PEKek[data-focus-visible],
1945
- .Link-module__hop-Link--quiet___PEKek[data-hovered] {
1946
- text-decoration: underline;
1947
- }
1948
- .Link-module__hop-Link___m4HlM:not(.Link-module__hop-Link--quiet___PEKek) {
1949
- text-decoration: underline;
1950
- }
1951
- .Link-module__hop-Link--primary___-EqWZ {
1952
- color: var(--hop-Link-primary-text-color);
1953
- }
1954
- .Link-module__hop-Link--primary___-EqWZ[data-disabled] {
1955
- color: var(--hop-Link-primary-text-disabled-color);
1956
- }
1957
- .Link-module__hop-Link--primary___-EqWZ:not([data-disabled])[data-focus-visible],
1958
- .Link-module__hop-Link--primary___-EqWZ:not([data-disabled])[data-hovered] {
1959
- color: var(--hop-Link-primary-text-hover-color);
1960
- }
1961
- .Link-module__hop-Link--primary___-EqWZ:not([data-disabled])[data-pressed] {
1962
- color: var(--hop-Link-primary-text-pressed-color);
1963
- }
1964
- .Link-module__hop-Link--secondary___UNknc {
1965
- color: var(--hop-Link-neutral-text-color);
1966
- }
1967
- .Link-module__hop-Link--secondary___UNknc[data-disabled] {
1968
- color: var(--hop-Link-neutral-text-disabled-color);
1969
- }
1970
- .Link-module__hop-Link--secondary___UNknc:not([data-disabled])[data-focus-visible],
1971
- .Link-module__hop-Link--secondary___UNknc:not([data-disabled])[data-hovered] {
1972
- color: var(--hop-Link-neutral-text-hover-color);
1973
- }
1974
- .Link-module__hop-Link--secondary___UNknc:not([data-disabled])[data-pressed] {
1975
- color: var(--hop-Link-neutral-text-pressed-color);
1976
- }
1977
- .Link-module__hop-Link__icon___KiZR6,
1978
- .Link-module__hop-Link__icon-list___eu2Y4 {
1979
- order: 2;
1980
- }
1981
- .Link-module__hop-Link__text___I34XD {
1982
- order: 1;
1983
- }
1984
- .Link-module__hop-Link__start-icon___Klqm6,
1985
- .Link-module__hop-Link__start-icon-list___23TDM {
1986
- order: 0;
1987
- }
1988
-
1989
- /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/radio/src/Radio.module.css/#css-module-data */
1990
- .Radio-module__hop-Radio___Ej0dA {
1991
- --hop-Radio-box-border-size: 0.0625rem;
1992
- --hop-Radio-box-border-color: var(--hop-neutral-border);
1993
- --hop-Radio-box-background-color: var(--hop-neutral-surface);
1994
- --hop-Radio-box-outline-size: 0.125rem;
1995
- --hop-Radio-box-outline-color: var(--hop-primary-border-focus);
1996
- --hop-Radio-bullet-color: var(--hop-neutral-icon-selected);
1997
- --hop-Radio-bullet-display: none;
1998
- --hop-Radio-text-color: var(--hop-neutral-text);
1999
- --hop-Radio-icon-color: var(--hop-neutral-icon);
2000
- --hop-Radio-box-border-color-hovered: var(--hop-neutral-border-hover);
2001
- --hop-Radio-box-background-color-hovered: var(--hop-neutral-surface-hover);
2002
- --hop-Radio-text-color-hovered: var(--hop-neutral-text-hover);
2003
- --hop-Radio-icon-color-hovered: var(--hop-neutral-icon-hover);
2004
- --hop-Radio-box-border-color-pressed: var(--hop-neutral-border-press);
2005
- --hop-Radio-box-background-color-pressed: var(--hop-neutral-surface-press);
2006
- --hop-Radio-text-color-pressed: var(--hop-neutral-text-press);
2007
- --hop-Radio-icon-color-pressed: var(--hop-neutral-icon-press);
2008
- --hop-Radio-box-border-color-selected: var(--hop-neutral-border-selected);
2009
- --hop-Radio-box-background-color-selected: var(--hop-neutral-surface-selected);
2010
- --hop-Radio-bullet-display-selected: block;
2011
- --hop-Radio-text-color-selected: var(--hop-neutral-text);
2012
- --hop-Radio-icon-color-selected: var(--hop-neutral-icon);
2013
- --hop-Radio-box-border-color-disabled: var(--hop-neutral-border-disabled);
2014
- --hop-Radio-box-background-color-disabled: var(--hop-neutral-surface-disabled);
2015
- --hop-Radio-bullet-color-disabled: var(--hop-neutral-icon-disabled);
2016
- --hop-Radio-text-color-disabled: var(--hop-neutral-text-disabled);
2017
- --hop-Radio-icon-color-disabled: var(--hop-neutral-icon-disabled);
2018
- --hop-Radio-box-border-color-focused: var(--hop-neutral-border-hover);
2019
- --hop-Radio-box-background-color-focused: var(--hop-neutral-surface-hover);
2020
- --hop-Radio-text-color-focused: var(--hop-neutral-text);
2021
- --hop-Radio-icon-color-focused: var(--hop-neutral-icon);
2022
- --hop-Radio-box-border-color-invalid: var(--hop-danger-border-strong);
2023
- --hop-Radio-box-background-color-invalid: var(--hop-neutral-surface);
2024
- --hop-Radio-box-border-color-hovered-invalid: var(--hop-danger-border-strong);
2025
- --hop-Radio-box-background-color-hovered-invalid: var(--hop-danger-surface);
2026
- --hop-Radio-box-border-color-pressed-invalid: var(--hop-danger-border-press);
2027
- --hop-Radio-box-background-color-pressed-invalid: var(--hop-danger-surface-weak);
2028
- --hop-Radio-box-border-color-focused-invalid: var(--hop-danger-border-strong);
2029
- --hop-Radio-box-background-color-focused-invalid: var(--hop-danger-surface);
2030
- --hop-Radio-box-border-color-selected-invalid: var(--hop-danger-border-strong);
2031
- --hop-Radio-box-background-color-selected-invalid: var(--hop-danger-surface-strong);
2032
- --hop-Radio-bullet-color-invalid: var(--hop-danger-icon-strong);
2033
- --hop-Radio-text-color-invalid: var(--hop-danger-text-weak);
2034
- --hop-Radio-icon-color-invalid: var(--hop-danger-icon-weak);
2035
- --hop-Radio-text-color-hovered-invalid: var(--hop-danger-text-weak-hover);
2036
- --hop-Radio-icon-color-hovered-invalid: var(--hop-danger-icon-weak-hover);
2037
- --hop-Radio-text-color-pressed-invalid: var(--hop-danger-text-weak-press);
2038
- --hop-Radio-box-sm-inline-size: 1rem;
2039
- --hop-Radio-box-sm-block-size: 1rem;
2040
- --hop-Radio-text-sm-top-offset: calc((var(--box-inline-size) - (var(--hop-body-sm-line-height) * var(--hop-body-sm-font-size))) / 2);
2041
- --hop-Radio-text-sm-margin-inline-start: calc(var(--hop-space-inline-sm) - var(--hop-space-inline-xs));
2042
- --hop-Radio-box-md-inline-size: 1.5rem;
2043
- --hop-Radio-box-md-block-size: 1.5rem;
2044
- --hop-Radio-text-md-top-offset: calc((var(--box-inline-size) - (var(--hop-body-md-line-height) * var(--hop-body-md-font-size))) / 2);
2045
- --hop-Radio-text-md-margin-inline-start: calc(var(--hop-space-inline-md) - var(--hop-space-inline-xs));
2046
- --box-background-color: var(--hop-Radio-box-background-color);
2047
- --box-border-color: var(--hop-Radio-box-border-color);
2048
- --box-border-radius: var(--hop-shape-circle);
2049
- --bullet-color: var(--hop-Radio-bullet-color);
2050
- --bullet-display: var(--hop-Radio-bullet-display);
2051
- --cursor: pointer;
2052
- --text-color: var(--hop-Radio-text-color);
2053
- --icon-color: var(--hop-Radio-icon-color);
2054
- --description-color: var(--hop-Radio-description-color);
2055
- --transition-duration: var(--hop-easing-duration-2);
2056
- cursor: var(--cursor);
2057
- display: flex;
2058
- column-gap: var(--hop-space-inline-xs);
2059
- align-items: flex-start;
2060
- justify-content: flex-start;
2061
- box-sizing: border-box;
2062
- inline-size: max-content;
2063
- max-inline-size: 100%;
2064
- }
2065
- .Radio-module__hop-Radio___Ej0dA[data-focus-visible],
2066
- .Radio-module__hop-Radio--focused___EBP2c {
2067
- --box-background-color: var(--hop-Radio-box-background-color-focused);
2068
- --box-border-color: var(--hop-Radio-box-border-color-focused);
2069
- --box-outline: var(--hop-Radio-box-outline-size) solid var(--hop-Radio-box-outline-color);
2070
- --text-color: var(--hop-Radio-text-color-focused);
2071
- --icon-color: var(--hop-Radio-icon-color-focused);
2072
- --description-color: var(--hop-Radio-description-color-focus);
2073
- }
2074
- .Radio-module__hop-Radio___Ej0dA[data-hovered],
2075
- .Radio-module__hop-Radio--hovered___4dfUm {
2076
- --box-background-color: var(--hop-Radio-box-background-color-hovered);
2077
- --box-border-color: var(--hop-Radio-box-border-color-hovered);
2078
- --text-color: var(--hop-Radio-text-color-hovered);
2079
- --icon-color: var(--hop-Radio-icon-color-hovered);
2080
- --description-color: var(--hop-Radio-description-color-hover);
2081
- }
2082
- .Radio-module__hop-Radio___Ej0dA[data-pressed],
2083
- .Radio-module__hop-Radio--pressed___GXIqK {
2084
- --box-background-color: var(--hop-Radio-box-background-color-pressed);
2085
- --box-border-color: var(--hop-Radio-box-border-color-pressed);
2086
- --text-color: var(--hop-Radio-text-color-pressed);
2087
- --icon-color: var(--hop-Radio-icon-color-pressed);
2088
- --description-color: var(--hop-Radio-description-color-pressed);
2089
- }
2090
- .Radio-module__hop-Radio___Ej0dA[data-selected] {
2091
- --box-background-color: var(--hop-Radio-box-background-color-selected);
2092
- --box-border-color: var(--hop-Radio-box-border-color-selected);
2093
- --bullet-display: var(--hop-Radio-bullet-display-selected);
2094
- --text-color: var(--hop-Radio-text-color-selected);
2095
- --icon-color: var(--hop-Radio-icon-color-selected);
2096
- --description-color: var(--hop-Radio-description-color-selected);
2097
- }
2098
- .Radio-module__hop-Radio___Ej0dA[data-invalid] {
2099
- --box-background-color: var(--hop-Radio-box-background-color-invalid);
2100
- --box-border-color: var(--hop-Radio-box-border-color-invalid);
2101
- --bullet-color: var(--hop-Radio-bullet-color-invalid);
2102
- --text-color: var(--hop-Radio-text-color-invalid);
2103
- --icon-color: var(--hop-Radio-icon-color-invalid);
2104
- --description-color: var(--hop-Radio-description-color-invalid);
2105
- }
2106
- .Radio-module__hop-Radio___Ej0dA:where([data-invalid])[data-focus-visible] {
2107
- --box-background-color: var(--hop-Radio-box-background-color-focused-invalid);
2108
- --box-border-color: var(--hop-Radio-box-border-color-focused-invalid);
2109
- }
2110
- .Radio-module__hop-Radio___Ej0dA:where([data-invalid])[data-hovered] {
2111
- --box-background-color: var(--hop-Radio-box-background-color-hovered-invalid);
2112
- --box-border-color: var(--hop-Radio-box-border-color-hovered-invalid);
2113
- --text-color: var(--hop-Radio-text-color-hovered-invalid);
2114
- --icon-color: var(--hop-Radio-text-color-hovered-invalid);
2115
- }
2116
- .Radio-module__hop-Radio___Ej0dA:where([data-invalid])[data-pressed] {
2117
- --box-background-color: var(--hop-Radio-box-background-color-pressed-invalid);
2118
- --box-border-color: var(--hop-Radio-box-border-color-pressed-invalid);
2119
- --text-color: var(--hop-Radio-text-color-pressed-invalid);
2120
- --icon-color: var(--hop-Radio-icon-color-pressed-invalid);
2121
- }
2122
- .Radio-module__hop-Radio___Ej0dA:where([data-invalid])[data-selected] {
2123
- --box-background-color: var(--hop-Radio-box-background-color-selected-invalid);
2124
- --box-border-color: var(--hop-Radio-box-border-color-selected-invalid);
2125
- }
2126
- .Radio-module__hop-Radio___Ej0dA[data-disabled] {
2127
- --box-background-color: var(--hop-Radio-box-background-color-disabled);
2128
- --box-border-color: var(--hop-Radio-box-border-color-disabled);
2129
- --bullet-color: var(--hop-Radio-bullet-color-disabled);
2130
- --cursor: not-allowed;
2131
- --text-color: var(--hop-Radio-text-color-disabled);
2132
- --icon-color: var(--hop-Radio-icon-color-disabled);
2133
- --description-color: var(--hop-Radio-description-color-disabled);
2134
- }
2135
- .Radio-module__hop-Radio--sm___XUcRq {
2136
- --box-inline-size: var(--hop-Radio-box-sm-inline-size);
2137
- --box-block-size: var(--hop-Radio-box-sm-block-size);
2138
- --text-top-offset: var(--hop-Radio-text-sm-top-offset);
2139
- --text-margin-inline-start: var(--hop-Radio-text-sm-margin-inline-start);
2140
- }
2141
- .Radio-module__hop-Radio--md___-Thls {
2142
- --box-inline-size: var(--hop-Radio-box-md-inline-size);
2143
- --box-block-size: var(--hop-Radio-box-md-block-size);
2144
- --text-top-offset: var(--hop-Radio-text-md-top-offset);
2145
- --text-margin-inline-start: var(--hop-Radio-text-md-margin-inline-start);
2146
- }
2147
- .Radio-module__hop-Radio__icon___6mbf6,
2148
- .Radio-module__hop-Radio__icon-list___VBhFT {
2149
- flex: 0 0 auto;
2150
- order: 3;
2151
- color: var(--icon-color);
2152
- }
2153
- .Radio-module__hop-Radio__box___QMuH4 {
2154
- display: flex;
2155
- flex: 0 0 auto;
2156
- align-items: center;
2157
- justify-content: center;
2158
- order: 1;
2159
- box-sizing: border-box;
2160
- inline-size: var(--box-inline-size, var(--hop-Radio-box-md-inline-size));
2161
- block-size: var(--box-block-size, var(--hop-Radio-box-md-block-size));
2162
- background-color: var(--box-background-color);
2163
- border: var(--hop-Radio-box-border-size) solid var(--box-border-color);
2164
- border-radius: var(--box-border-radius);
2165
- outline: var(--box-outline, none);
2166
- outline-offset: 0.125rem;
2167
- transition: background-color var(--transition-duration) var(--hop-easing-productive), border var(--transition-duration) var(--hop-easing-productive);
2168
- }
2169
- .Radio-module__hop-Radio__bullet___5-SbO {
2170
- display: var(--bullet-display);
2171
- color: var(--bullet-color);
2172
- }
2173
- .Radio-module__hop-Radio__text___fZ6br {
2174
- flex: 0 1 auto;
2175
- order: 2;
2176
- min-inline-size: 0;
2177
- margin-block-start: var(--text-top-offset, var(--hop-Radio-text-md-top-offset));
2178
- margin-inline-start: var(--text-margin-inline-start, var(--hop-Radio-text-md-margin-inline-start));
2179
- color: var(--text-color);
2180
- }
2181
-
2182
- /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/radio/src/RadioField.module.css/#css-module-data */
2183
- .RadioField-module__hop-RadioField___8QRjD {
2184
- --hop-RadioField-description-color: var(--hop-neutral-text-weak);
2185
- --hop-RadioField-description-color-disabled: var(--hop-neutral-text-disabled);
2186
- --hop-RadioField-sm-row-gap: var(--hop-space-stack-xs);
2187
- --hop-RadioField-radio-sm-inline-size: 1rem;
2188
- --hop-RadioField-description-sm-margin-inline-start: calc(var(--hop-RadioField-radio-sm-inline-size) + var(--hop-space-inline-sm));
2189
- --hop-RadioField-md-row-gap: var(--hop-space-stack-xs);
2190
- --hop-RadioField-radio-md-inline-size: 1.5rem;
2191
- --hop-RadioField-description-md-margin-inline-start: calc(var(--hop-RadioField-radio-md-inline-size) + var(--hop-space-inline-md));
2192
- --description-color: var(--hop-RadioField-description-color);
2193
- display: flex;
2194
- flex-direction: column;
2195
- row-gap: var(--row-gap, var(--hop-space-stack-sm));
2196
- align-items: flex-start;
2197
- justify-content: flex-start;
2198
- box-sizing: border-box;
2199
- inline-size: max-content;
2200
- max-inline-size: 100%;
2201
- }
2202
- .RadioField-module__hop-RadioField___8QRjD[data-disabled] {
2203
- --description-color: var(--hop-RadioField-description-color-disabled);
2204
- }
2205
- .RadioField-module__hop-RadioField--sm___X4Gkl {
2206
- --row-gap: var(--hop-RadioField-sm-row-gap);
2207
- --description-margin-inline-start: var(--hop-RadioField-description-sm-margin-inline-start);
2208
- }
2209
- .RadioField-module__hop-RadioField--md___Z451F {
2210
- --row-gap: var(--hop-RadioField-md-row-gap);
2211
- --description-margin-inline-start: var(--hop-RadioField-description-md-margin-inline-start);
2212
- }
2213
- .RadioField-module__hop-RadioField__description___SqBmM {
2214
- order: 2;
2215
- margin-inline-start: var(--description-margin-inline-start, var(--hop-RadioField-description-md-margin-inline-start));
2216
- color: var(--description-color);
2217
- }
2218
- .RadioField-module__hop-RadioField__radio___CfAFT {
2219
- order: 1;
2220
- }
2221
-
2222
- /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/radio/src/RadioGroup.module.css/#css-module-data */
2223
- .RadioGroup-module__hop-RadioGroup___S6s5y {
2224
- --hop-RadioGroup-align-items: flex-start;
2225
- --hop-RadioGroup-justify-content: flex-start;
2226
- --hop-RadioGroup-bordered-border-color: var(--hop-neutral-border-weak);
2227
- --hop-RadioGroup-sm-column-gap: var(--hop-space-inline-sm);
2228
- --hop-RadioGroup-sm-row-gap: var(--hop-space-stack-sm);
2229
- --hop-RadioGroup-list-sm-column-gap: var(--hop-space-inline-sm);
2230
- --hop-RadioGroup-list-sm-row-gap: var(--hop-space-stack-sm);
2231
- --hop-RadioGroup-bordered-sm-padding: var(--hop-space-inset-sm);
2232
- --hop-RadioGroup-bordered-sm-column-gap: var(--hop-space-inline-sm);
2233
- --hop-RadioGroup-bordered-sm-row-gap: var(--hop-space-stack-sm);
2234
- --hop-RadioGroup-list-bordered-sm-column-gap: 0;
2235
- --hop-RadioGroup-list-bordered-sm-row-gap: 0;
2236
- --hop-RadioGroup-md-column-gap: var(--hop-space-inline-md);
2237
- --hop-RadioGroup-md-row-gap: var(--hop-space-stack-md);
2238
- --hop-RadioGroup-list-md-column-gap: var(--hop-space-inline-md);
2239
- --hop-RadioGroup-list-md-row-gap: var(--hop-space-stack-md);
2240
- --hop-RadioGroup-bordered-md-padding: var(--hop-space-inset-md);
2241
- --hop-RadioGroup-bordered-md-column-gap: var(--hop-space-inline-sm);
2242
- --hop-RadioGroup-bordered-md-row-gap: var(--hop-space-stack-sm);
2243
- --hop-RadioGroup-list-bordered-md-column-gap: 0;
2244
- --hop-RadioGroup-list-bordered-md-row-gap: 0;
2245
- --hop-RadioGroup-vertical-flex-direction: column;
2246
- --hop-RadioGroup-horizontal-flex-direction: row;
2247
- --radio-border-size: 0.0625rem;
2248
- --radio-border-color: var(--hop-neutral-border-weak);
2249
- --flex-direction: var(--hop-RadioGroup-vertical-flex-direction);
2250
- --align-items: var(--hop-RadioGroup-align-items);
2251
- --justify-content: var(--hop-RadioGroup-justify-content);
2252
- --flex-wrap: wrap;
2253
- --inline-size: max-content;
2254
- display: flex;
2255
- flex-direction: column;
2256
- gap: var(--row-gap, var(--hop-space-stack-md)) var(--column-gap, var(--hop-space-inline-md));
2257
- align-items: var(--align-items);
2258
- justify-content: var(--justify-content);
2259
- box-sizing: border-box;
2260
- inline-size: var(--inline-size);
2261
- max-inline-size: 100%;
2262
- }
2263
- .RadioGroup-module__hop-RadioGroup--bordered___CFrBV {
2264
- --list-border: var(--radio-border-size) solid var(--radio-border-color);
2265
- --list-border-radius: var(--hop-shape-rounded-md);
2266
- }
2267
- .RadioGroup-module__hop-RadioGroup--sm___2p7Wk {
2268
- --column-gap: var(--hop-RadioGroup-sm-column-gap);
2269
- --row-gap: var(--hop-RadioGroup-sm-row-gap);
2270
- --list-column-gap: var(--hop-RadioGroup-list-sm-column-gap);
2271
- --list-row-gap: var(--hop-RadioGroup-list-sm-row-gap);
2272
- }
2273
- .RadioGroup-module__hop-RadioGroup--md___eqGjG {
2274
- --column-gap: var(--hop-RadioGroup-md-column-gap);
2275
- --row-gap: var(--hop-RadioGroup-md-row-gap);
2276
- --list-column-gap: var(--hop-RadioGroup-list-md-column-gap);
2277
- --list-row-gap: var(--hop-RadioGroup-list-md-row-gap);
2278
- }
2279
- .RadioGroup-module__hop-RadioGroup--bordered___CFrBV.RadioGroup-module__hop-RadioGroup--sm___2p7Wk {
2280
- --radio-padding: var(--hop-RadioGroup-bordered-sm-padding);
2281
- --column-gap: var(--hop-RadioGroup-bordered-sm-column-gap);
2282
- --row-gap: var(--hop-RadioGroup-bordered-sm-row-gap);
2283
- --list-column-gap: var(--hop-RadioGroup-list-bordered-sm-column-gap);
2284
- --list-row-gap: var(--hop-RadioGroup-list-bordered-sm-row-gap);
2285
- }
2286
- .RadioGroup-module__hop-RadioGroup--bordered___CFrBV.RadioGroup-module__hop-RadioGroup--md___eqGjG {
2287
- --radio-padding: var(--hop-RadioGroup-bordered-md-padding);
2288
- --column-gap: var(--hop-RadioGroup-bordered-md-column-gap);
2289
- --row-gap: var(--hop-RadioGroup-bordered-md-row-gap);
2290
- --list-column-gap: var(--hop-RadioGroup-list-bordered-md-column-gap);
2291
- --list-row-gap: var(--hop-RadioGroup-list-bordered-md-row-gap);
2292
- }
2293
- .RadioGroup-module__hop-RadioGroup___S6s5y[data-orientation=horizontal] {
2294
- --flex-direction: var(--hop-RadioGroup-horizontal-flex-direction);
2295
- }
2296
- .RadioGroup-module__hop-RadioGroup--bordered___CFrBV[data-orientation=horizontal] {
2297
- --flex-wrap: nowrap;
2298
- }
2299
- .RadioGroup-module__hop-RadioGroup___S6s5y > .RadioGroup-module__hop-RadioGroup__label___7-iXB {
2300
- order: 1;
2301
- }
2302
- .RadioGroup-module__hop-RadioGroup__list___C5N0N {
2303
- display: flex;
2304
- flex-flow: var(--flex-direction) var(--flex-wrap);
2305
- gap: var(--list-row-gap, var(--hop-space-stack-md)) var(--list-column-gap, var(--hop-space-inline-md));
2306
- order: 2;
2307
- box-sizing: border-box;
2308
- inline-size: var(--inline-size);
2309
- max-inline-size: 100%;
2310
- border: var(--list-border, none);
2311
- border-radius: var(--list-border-radius, 0);
2312
- }
2313
- .RadioGroup-module__hop-RadioGroup__list___C5N0N > .RadioGroup-module__hop-RadioGroup__radio___k3eYk {
2314
- position: relative;
2315
- flex: 0 1 auto;
2316
- align-content: start;
2317
- inline-size: auto;
2318
- min-inline-size: 0;
2319
- padding: var(--radio-padding, 0);
2320
- }
2321
- .RadioGroup-module__hop-RadioGroup--bordered___CFrBV .RadioGroup-module__hop-RadioGroup__list___C5N0N > .RadioGroup-module__hop-RadioGroup__radio___k3eYk ~ .RadioGroup-module__hop-RadioGroup__radio___k3eYk::before {
2322
- content: "";
2323
- position: absolute;
2324
- display: block;
2325
- }
2326
- .RadioGroup-module__hop-RadioGroup--bordered___CFrBV[data-orientation=vertical] .RadioGroup-module__hop-RadioGroup__list___C5N0N > .RadioGroup-module__hop-RadioGroup__radio___k3eYk ~ .RadioGroup-module__hop-RadioGroup__radio___k3eYk::before {
2327
- inset-block-start: 0;
2328
- inset-inline: 0;
2329
- border-block-start: var(--list-border, none);
2330
- }
2331
- .RadioGroup-module__hop-RadioGroup--bordered___CFrBV[data-orientation=horizontal] .RadioGroup-module__hop-RadioGroup__list___C5N0N > .RadioGroup-module__hop-RadioGroup__radio___k3eYk ~ .RadioGroup-module__hop-RadioGroup__radio___k3eYk::before {
2332
- inset-block: 0;
2333
- inset-inline-start: 0;
2334
- border-inline-start: var(--list-border, none);
2335
- }
2336
- .RadioGroup-module__hop-RadioGroup___S6s5y > .RadioGroup-module__hop-RadioGroup__error-message___vOUPq,
2337
- .RadioGroup-module__hop-RadioGroup___S6s5y > .RadioGroup-module__hop-RadioGroup__helper-message___uQgIj {
2338
- order: 3;
2339
- }
2340
-
2341
- /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/ListBox/src/ListBoxItemSkeleton.module.css/#css-module-data */
2342
- .ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton___vxdl4 {
2343
- --hop-ListBoxItemSkeleton-background-color: var(--hop-rock-50);
2344
- --hop-ListBoxItemSkeleton-background-color-dark: var(--hop-rock-75);
2345
- --hop-ListBoxItemSkeleton-border-radius: var(--hop-shape-rounded-md);
2346
- --hop-ListBoxItemSkeleton-animation-duration: 1.4s;
2347
- --hop-ListBoxItemSkeleton-animation-reduced-motion-duration: 3.4s;
2348
- --hop-ListBoxItemSkeleton-linear-gradient:
2349
- linear-gradient(
2350
-
2351
- 90deg,
2352
- var(--hop-ListBoxItemSkeleton-background-color) 25%,
2353
- var(--hop-ListBoxItemSkeleton-background-color-dark) 37%,
2354
- var(--hop-ListBoxItemSkeleton-background-color-dark) 63%,
2355
- var(--hop-ListBoxItemSkeleton-background-color) 100% );
2356
- --hop-ListBoxItemSkeleton-xs-height: 1.25rem;
2357
- --hop-ListBoxItemSkeleton-sm-height: 1.25rem;
2358
- --hop-ListBoxItemSkeleton-md-height: 1.25rem;
2359
- --hop-ListBoxItemSkeleton-lg-height: 1.5rem;
2360
- --animation-duration: var(--hop-ListBoxItemSkeleton-animation-duration);
2361
- grid-area: label;
2362
- box-sizing: border-box;
2363
- block-size: var(--height);
2364
- background-color: var(--hop-ListBoxItemSkeleton-background-color);
2365
- background-image: var(--hop-ListBoxItemSkeleton-linear-gradient);
2366
- background-size: 400% 100%;
2367
- border-radius: var(--hop-ListBoxItemSkeleton-border-radius);
2368
- animation-name: ListBoxItemSkeleton-module__placeholder-shimmer___zxMXK;
2369
- animation-duration: var(--animation-duration);
2370
- animation-timing-function: ease-in-out;
2371
- animation-fill-mode: forwards;
2372
- animation-iteration-count: infinite;
2373
- @media (prefers-reduced-motion: reduce) {
2374
- --animation-duration: var(--hop-ListBoxItemSkeleton-animation-reduced-motion-duration);
2375
- }
2376
- }
2377
- .ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--xs___lRdbr {
2378
- --height: var(--hop-ListBoxItemSkeleton-xs-height);
2379
- }
2380
- .ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--sm___yWx0f {
2381
- --height: var(--hop-ListBoxItemSkeleton-sm-height);
2382
- }
2383
- .ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--md___S7Deh {
2384
- --height: var(--hop-ListBoxItemSkeleton-md-height);
2385
- }
2386
- .ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--lg___Rrcau {
2387
- --height: var(--hop-ListBoxItemSkeleton-lg-height);
2388
- }
2389
- @keyframes ListBoxItemSkeleton-module__placeholder-shimmer___zxMXK {
2390
- 0% {
2391
- background-position: 125% 50%;
2392
- }
2393
- 100% {
2394
- background-position: -25% 50%;
2395
- }
2396
- }
2397
-
2398
- /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/ListBox/src/ListBoxItem.module.css/#css-module-data */
2399
- .ListBoxItem-module__hop-ListBoxItem___Yx1lW {
2400
- --hop-ListBoxItem-background-color: transparent;
2401
- --hop-ListBoxItem-border-radius: var(--hop-shape-rounded-md);
2402
- --hop-ListBoxItem-text-color: var(--hop-neutral-text);
2403
- --hop-ListBoxItem-icon-color: var(--hop-neutral-icon);
2404
- --hop-ListBoxItem-outline-size: 0.125rem;
2405
- --hop-ListBoxItem-outline-color: var(--hop-primary-border-focus);
2406
- --hop-ListBoxItem-row-gap: var(--hop-space-stack-xs);
2407
- --hop-ListBoxItem-column-gap: var(--hop-space-inline-sm);
2408
- --hop-ListBoxItem-indicator-inline-size: calc( 1rem + var(--hop-ListBoxItem-column-gap));
2409
- --hop-ListBoxItem-description-text-color: var(--hop-neutral-text-weak);
2410
- --hop-ListBoxItem-grid-template-areas: "indicator avatar icon label end-icon badge";
2411
- --hop-ListBoxItem-grid-template-areas-with-description: "indicator avatar icon label end-icon badge" ". avatar . description description description";
2412
- --hop-ListBoxItem-grid-template-areas-loading: "label";
2413
- --hop-ListBoxItem-grid-template-columns: var(--hop-ListBoxItem-indicator-inline-size) auto auto 1fr auto auto;
2414
- --hop-ListBoxItem-grid-template-columns-not-selected: 0 auto auto 1fr auto auto;
2415
- --hop-ListBoxItem-grid-template-columns-loading: 1fr;
2416
- --hop-ListBoxItem-xs-padding-block: var(--hop-space-inset-xs);
2417
- --hop-ListBoxItem-xs-padding-inline: var(--hop-space-inset-md);
2418
- --hop-ListBoxItem-xs-min-height: 2rem;
2419
- --hop-ListBoxItem-sm-padding-block: var(--hop-space-inset-sm);
2420
- --hop-ListBoxItem-sm-padding-inline: var(--hop-space-inset-md);
2421
- --hop-ListBoxItem-sm-min-height: 2.5rem;
2422
- --hop-ListBoxItem-md-padding-block: var(--hop-space-inset-md);
2423
- --hop-ListBoxItem-md-padding-inline: var(--hop-space-inset-md);
2424
- --hop-ListBoxItem-md-min-height: 3.5rem;
2425
- --hop-ListBoxItem-lg-padding-block: var(--hop-space-inset-md);
2426
- --hop-ListBoxItem-lg-padding-inline: var(--hop-space-inset-md);
2427
- --hop-ListBoxItem-lg-min-height: 4rem;
2428
- --hop-ListBoxItem-background-color-hovered: var(--hop-neutral-surface-hover);
2429
- --hop-ListBoxItem-text-color-hovered: var(--hop-neutral-text-hover);
2430
- --hop-ListBoxItem-icon-color-hovered: var(--hop-neutral-icon-hover);
2431
- --hop-ListBoxItem-background-color-pressed: var(--hop-neutral-surface-press);
2432
- --hop-ListBoxItem-text-color-pressed: var(--hop-neutral-text-press);
2433
- --hop-ListBoxItem-icon-color-pressed: var(--hop-neutral-icon-press);
2434
- --hop-ListBoxItem-background-color-focused: var(--hop-neutral-surface-hover);
2435
- --hop-ListBoxItem-text-color-focused: var(--hop-neutral-text-hover);
2436
- --hop-ListBoxItem-icon-color-focused: var(--hop-neutral-icon-hover);
2437
- --hop-ListBoxItem-background-color-selected: transparent;
2438
- --hop-ListBoxItem-text-color-selected: var(--hop-neutral-text);
2439
- --hop-ListBoxItem-icon-color-selected: var(--hop-neutral-icon);
2440
- --hop-ListBoxItem-background-color-invalid: transparent;
2441
- --hop-ListBoxItem-background-color-invalid-hovered: var(--hop-danger-surface-hover);
2442
- --hop-ListBoxItem-background-color-invalid-pressed: var(--hop-danger-surface-press);
2443
- --hop-ListBoxItem-background-color-invalid-focused: var(--hop-danger-surface-hover);
2444
- --hop-ListBoxItem-background-color-invalid-selected: transparent;
2445
- --hop-ListBoxItem-background-color-invalid-disabled: transparent;
2446
- --hop-ListBoxItem-text-color-invalid: var(--hop-danger-text-weak);
2447
- --hop-ListBoxItem-text-color-invalid-hovered: var(--hop-danger-text-strong);
2448
- --hop-ListBoxItem-text-color-invalid-pressed: var(--hop-danger-text-strong);
2449
- --hop-ListBoxItem-text-color-invalid-focused: var(--hop-danger-text-strong);
2450
- --hop-ListBoxItem-text-color-invalid-selected: var(--hop-danger-text-weak);
2451
- --hop-ListBoxItem-text-color-invalid-disabled: var(--hop-danger-text-disabled);
2452
- --hop-ListBoxItem-icon-color-invalid: var(--hop-danger-icon-weak);
2453
- --hop-ListBoxItem-icon-color-invalid-hovered: var(--hop-danger-icon-strong);
2454
- --hop-ListBoxItem-icon-color-invalid-pressed: var(--hop-danger-icon-strong);
2455
- --hop-ListBoxItem-icon-color-invalid-focused: var(--hop-danger-icon-strong);
2456
- --hop-ListBoxItem-icon-color-invalid-selected: var(--hop-danger-icon-weak);
2457
- --hop-ListBoxItem-icon-color-invalid-disabled: var(--hop-danger-icon-disabled);
2458
- --hop-ListBoxItem-description-text-color-invalid-hovered: inherit;
2459
- --hop-ListBoxItem-description-text-color-invalid-pressed: inherit;
2460
- --hop-ListBoxItem-description-text-color-invalid-focused: inherit;
2461
- --hop-ListBoxItem-background-color-disabled: transparent;
2462
- --hop-ListBoxItem-text-color-disabled: var(--hop-neutral-text-disabled);
2463
- --hop-ListBoxItem-icon-color-disabled: var(--hop-neutral-icon-disabled);
2464
- --background-color: var(--hop-ListBoxItem-background-color);
2465
- --text-color: var(--hop-ListBoxItem-text-color);
2466
- --icon-color: var(--hop-ListBoxItem-icon-color);
2467
- --outline: none;
2468
- --cursor: default;
2469
- --checkmark-opacity: 0;
2470
- --description-text-color: var(--hop-ListBoxItem-description-text-color);
2471
- --row-gap: 0;
2472
- --grid-template-areas: var(--hop-ListBoxItem-grid-template-areas);
2473
- --grid-template-columns: var(--hop-ListBoxItem-grid-template-columns);
2474
- --checkmark-transition: opacity 0.2s ease-in-out .2s;
2475
- cursor: var(--cursor);
2476
- box-sizing: border-box;
2477
- color: var(--text-color);
2478
- background-color: var(--background-color);
2479
- border-radius: var(--hop-ListBoxItem-border-radius);
2480
- outline: var(--outline);
2481
- }
2482
- .ListBoxItem-module__hop-ListBoxItem--xs___-dXrA {
2483
- --padding-block: var(--hop-ListBoxItem-xs-padding-block);
2484
- --padding-inline: var(--hop-ListBoxItem-xs-padding-inline);
2485
- --min-height: var(--hop-ListBoxItem-xs-min-height);
2486
- }
2487
- .ListBoxItem-module__hop-ListBoxItem--sm___PJua2 {
2488
- --padding-block: var(--hop-ListBoxItem-sm-padding-block);
2489
- --padding-inline: var(--hop-ListBoxItem-sm-padding-inline);
2490
- --min-height: var(--hop-ListBoxItem-sm-min-height);
2491
- }
2492
- .ListBoxItem-module__hop-ListBoxItem--md___tUXMc {
2493
- --padding-block: var(--hop-ListBoxItem-md-padding-block);
2494
- --padding-inline: var(--hop-ListBoxItem-md-padding-inline);
2495
- --min-height: var(--hop-ListBoxItem-md-min-height);
2496
- }
2497
- .ListBoxItem-module__hop-ListBoxItem--lg___eGqO4 {
2498
- --padding-block: var(--hop-ListBoxItem-lg-padding-block);
2499
- --padding-inline: var(--hop-ListBoxItem-lg-padding-inline);
2500
- --min-height: var(--hop-ListBoxItem-lg-min-height);
2501
- }
2502
- .ListBoxItem-module__hop-ListBoxItem___Yx1lW[data-selection-mode] {
2503
- --cursor: pointer;
2504
- }
2505
- .ListBoxItem-module__hop-ListBoxItem___Yx1lW:not([data-selection-mode]) {
2506
- --grid-template-columns: var(--hop-ListBoxItem-grid-template-columns-not-selected);
2507
- }
2508
- .ListBoxItem-module__hop-ListBoxItem__inner___QR5j1:not([data-list-has-selection]):has(.ListBoxItem-module__hop-ListBoxItem__checkmark___Ei8-S) {
2509
- --grid-template-columns: var(--hop-ListBoxItem-grid-template-columns-not-selected);
2510
- }
2511
- .ListBoxItem-module__hop-ListBoxItem__inner___QR5j1[data-list-has-selection-end]:has(.ListBoxItem-module__hop-ListBoxItem__checkmark___Ei8-S) {
2512
- --checkmark-transition: none;
2513
- }
2514
- .ListBoxItem-module__hop-ListBoxItem___Yx1lW[data-selected] {
2515
- --background-color: var(--hop-ListBoxItem-background-color-selected);
2516
- --text-color: var(--hop-ListBoxItem-text-color-selected);
2517
- --icon-color: var(--hop-ListBoxItem-icon-color-selected);
2518
- --checkmark-opacity: 1;
2519
- }
2520
- .ListBoxItem-module__hop-ListBoxItem___Yx1lW[data-focus-visible] {
2521
- --background-color: var(--hop-ListBoxItem-background-color-focused);
2522
- --text-color: var(--hop-ListBoxItem-text-color-focused);
2523
- --icon-color: var(--hop-ListBoxItem-icon-color-focused);
2524
- --outline: var(--hop-ListBoxItem-outline-size) solid var(--hop-ListBoxItem-outline-color);
2525
- }
2526
- .ListBoxItem-module__hop-ListBoxItem___Yx1lW[data-hovered] {
2527
- --background-color: var(--hop-ListBoxItem-background-color-hovered);
2528
- --text-color: var(--hop-ListBoxItem-text-color-hovered);
2529
- --icon-color: var(--hop-ListBoxItem-icon-color-hovered);
2530
- }
2531
- .ListBoxItem-module__hop-ListBoxItem___Yx1lW[data-pressed] {
2532
- --background-color: var(--hop-ListBoxItem-background-color-pressed);
2533
- --text-color: var(--hop-ListBoxItem-text-color-pressed);
2534
- --icon-color: var(--hop-ListBoxItem-icon-color-pressed);
2535
- }
2536
- .ListBoxItem-module__hop-ListBoxItem___Yx1lW[data-disabled] {
2537
- --background-color: var(--hop-ListBoxItem-background-color-disabled);
2538
- --text-color: var(--hop-ListBoxItem-text-color-disabled);
2539
- --icon-color: var(--hop-ListBoxItem-icon-color-disabled);
2540
- --description-text-color: var(--hop-ListBoxItem-text-color-disabled);
2541
- --cursor: not-allowed;
2542
- }
2543
- .ListBoxItem-module__hop-ListBoxItem___Yx1lW[data-invalid] {
2544
- --background-color: var(--hop-ListBoxItem-background-color-invalid);
2545
- --text-color: var(--hop-ListBoxItem-text-color-invalid);
2546
- --icon-color: var(--hop-ListBoxItem-icon-color-invalid);
2547
- }
2548
- .ListBoxItem-module__hop-ListBoxItem___Yx1lW[data-invalid][data-selected] {
2549
- --background-color: var(--hop-ListBoxItem-background-color-invalid-selected);
2550
- --text-color: var(--hop-ListBoxItem-text-color-invalid-selected);
2551
- --icon-color: var(--hop-ListBoxItem-icon-color-invalid-selected);
2552
- }
2553
- .ListBoxItem-module__hop-ListBoxItem___Yx1lW[data-invalid][data-focus-visible] {
2554
- --background-color: var(--hop-ListBoxItem-background-color-invalid-focused);
2555
- --text-color: var(--hop-ListBoxItem-text-color-invalid-focused);
2556
- --icon-color: var(--hop-ListBoxItem-icon-color-invalid-focused);
2557
- --description-text-color: var(--hop-ListBoxItem-description-text-color-invalid-focused);
2558
- }
2559
- .ListBoxItem-module__hop-ListBoxItem___Yx1lW[data-invalid][data-hovered] {
2560
- --background-color: var(--hop-ListBoxItem-background-color-invalid-hovered);
2561
- --text-color: var(--hop-ListBoxItem-text-color-invalid-hovered);
2562
- --icon-color: var(--hop-ListBoxItem-icon-color-invalid-hovered);
2563
- --description-text-color: var(--hop-ListBoxItem-description-text-color-invalid-hovered);
2564
- }
2565
- .ListBoxItem-module__hop-ListBoxItem___Yx1lW[data-invalid][data-pressed] {
2566
- --background-color: var(--hop-ListBoxItem-background-color-invalid-pressed);
2567
- --text-color: var(--hop-ListBoxItem-text-color-invalid-pressed);
2568
- --icon-color: var(--hop-ListBoxItem-icon-color-invalid-pressed);
2569
- --description-text-color: var(--hop-ListBoxItem-description-text-color-invalid-pressed);
2570
- }
2571
- .ListBoxItem-module__hop-ListBoxItem___Yx1lW[data-invalid][data-disabled] {
2572
- --background-color: var(--hop-ListBoxItem-background-color-invalid-disabled);
2573
- --text-color: var(--hop-ListBoxItem-text-color-invalid-disabled);
2574
- --icon-color: var(--hop-ListBoxItem-icon-color-invalid-disabled);
2575
- }
2576
- .ListBoxItem-module__hop-ListBoxItem___Yx1lW:has(.ListBoxItem-module__hop-ListBoxItem__description___grvX-) {
2577
- --row-gap: var(--hop-ListBoxItem-row-gap);
2578
- --grid-template-areas: var(--hop-ListBoxItem-grid-template-areas-with-description);
2579
- }
2580
- .ListBoxItem-module__hop-ListBoxItem___Yx1lW[data-loading] {
2581
- --grid-template-areas: var(--hop-ListBoxItem-grid-template-areas-loading);
2582
- --grid-template-columns: var(--hop-ListBoxItem-grid-template-columns-loading);
2583
- }
2584
- .ListBoxItem-module__hop-ListBoxItem__inner___QR5j1 {
2585
- display: grid;
2586
- grid-template-areas: var(--grid-template-areas);
2587
- grid-template-columns: var(--grid-template-columns);
2588
- row-gap: var(--row-gap);
2589
- align-items: center;
2590
- box-sizing: border-box;
2591
- min-block-size: var(--min-height);
2592
- padding-block: var(--padding-block);
2593
- padding-inline: var(--padding-inline);
2594
- transition: grid-template-columns .3s ease-in-out;
2595
- }
2596
- .ListBoxItem-module__hop-ListBoxItem__checkmark___Ei8-S {
2597
- grid-area: indicator;
2598
- margin-inline-end: var(--hop-ListBoxItem-column-gap);
2599
- color: var(--icon-color);
2600
- opacity: var(--checkmark-opacity);
2601
- transition: var(--checkmark-transition);
2602
- }
2603
- .ListBoxItem-module__hop-ListBoxItem__radio-group___7RjtE,
2604
- .ListBoxItem-module__hop-ListBoxItem__checkbox___jfL9v {
2605
- pointer-events: none;
2606
- user-select: none;
2607
- grid-area: indicator;
2608
- margin-inline-end: var(--hop-ListBoxItem-column-gap);
2609
- }
2610
- .ListBoxItem-module__hop-ListBoxItem__avatar___q2xtk {
2611
- grid-area: avatar;
2612
- margin-inline-end: var(--hop-ListBoxItem-column-gap);
2613
- }
2614
- .ListBoxItem-module__hop-ListBoxItem__icon-list___FHexQ,
2615
- .ListBoxItem-module__hop-ListBoxItem__icon___0KEwI {
2616
- grid-area: icon;
2617
- flex: 0 0 auto;
2618
- margin-inline-end: var(--hop-ListBoxItem-column-gap);
2619
- color: var(--icon-color);
2620
- }
2621
- .ListBoxItem-module__hop-ListBoxItem__label___-q2Uo {
2622
- overflow: hidden;
2623
- grid-area: label;
2624
- min-inline-size: 0;
2625
- text-overflow: ellipsis;
2626
- white-space: nowrap;
2627
- }
2628
- .ListBoxItem-module__hop-ListBoxItem__end-icon-list___h93Wc,
2629
- .ListBoxItem-module__hop-ListBoxItem__end-icon___bzOPv {
2630
- grid-area: end-icon;
2631
- margin-inline-start: var(--hop-ListBoxItem-column-gap);
2632
- color: var(--icon-color);
2633
- }
2634
- .ListBoxItem-module__hop-ListBoxItem__badge___AONN3 {
2635
- grid-area: badge;
2636
- margin-inline-start: var(--hop-ListBoxItem-column-gap);
2637
- }
2638
- .ListBoxItem-module__hop-ListBoxItem__description___grvX- {
2639
- overflow: hidden;
2640
- display: -webkit-box;
2641
- grid-area: description;
2642
- -webkit-box-orient: vertical;
2643
- color: var(--description-text-color);
2644
- -webkit-line-clamp: 2;
2645
- line-clamp: 2;
2646
- }
2647
-
2648
- /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/ListBox/src/ListBox.module.css/#css-module-data */
2649
- .ListBox-module__hop-ListBox___SARwA {
2650
- --hop-ListBox-background-color: var(--hop-neutral-surface);
2651
- --hop-ListBox-border-color: var(--hop-neutral-border-weak);
2652
- --hop-ListBox-border-radius: var(--hop-shape-rounded-md);
2653
- --hop-ListBox-border-size: 0.0625rem;
2654
- --hop-ListBox-padding-inline: var(--hop-space-inset-sm);
2655
- --hop-ListBox-padding-block: var(--hop-space-inset-sm);
2656
- --hop-ListBox-min-width: 13.625rem;
2657
- --hop-ListBox-max-width: 18rem;
2658
- --hop-ListBox-width: max-content;
2659
- --hop-ListBox-fluid-width: 100%;
2660
- --hop-ListBox-fluid-max-width: 100%;
2661
- --hop-ListBox-section-padding-block: var(--hop-ListBox-padding-block);
2662
- --hop-ListBox-section-padding-inline: var(--hop-ListBox-padding-inline);
2663
- --hop-ListBox-section-margin-block: var(--hop-space-stack-sm);
2664
- --hop-ListBox-section-margin-inline: calc(-1 * var(--hop-ListBox-padding-inline));
2665
- --hop-ListBox-section-border-size: var(--hop-ListBox-border-size);
2666
- --hop-ListBox-section-border-color: var(--hop-ListBox-border-color);
2667
- --hop-ListBox-section-header-font-family: var(--hop-overline-font-family);
2668
- --hop-ListBox-section-header-font-size: var(--hop-overline-font-size);
2669
- --hop-ListBox-section-header-font-weight: var(--hop-overline-font-weight);
2670
- --hop-ListBox-section-header-letter-spacing: 0.015rem;
2671
- --hop-ListBox-section-header-line-height: var(--hop-overline-line-height);
2672
- --hop-ListBox-section-header-text-transform: uppercase;
2673
- --hop-ListBox-section-header-padding: var(--hop-space-inset-stretch-sm);
2674
- --hop-ListBox-section-header-top-offset: var(--hop-overline-top-offset);
2675
- --hop-ListBox-section-header-bottom-offset: var(--hop-overline-bottom-offset);
2676
- --hop-ListBox-divider-margin-block: var(--hop-space-stack-sm);
2677
- --hop-ListBox-divider-margin-inline: calc(-1 * var(--hop-ListBox-padding-inline));
2678
- --max-width: var(--hop-ListBox-max-width);
2679
- --width: var(--hop-ListBox-width);
2680
- --section-padding-block-start: var(--hop-ListBox-section-padding-block);
2681
- --section-padding-block-end: var(--hop-ListBox-section-padding-block);
2682
- --section-margin-block-start: 0;
2683
- --section-margin-block-end: 0;
2684
- --section-border-block-start: 0;
2685
- --section-border-block-end: var(--hop-ListBox-section-border-size) solid var(--hop-ListBox-section-border-color);
2686
- overflow-y: auto;
2687
- box-sizing: border-box;
2688
- inline-size: var(--width);
2689
- min-inline-size: var(--hop-ListBox-min-width);
2690
- max-inline-size: var(--max-width);
2691
- padding-block: var(--hop-ListBox-padding-block);
2692
- padding-inline: var(--hop-ListBox-padding-inline);
2693
- background-color: var(--hop-ListBox-background-color);
2694
- border: var(--hop-ListBox-border-size) solid var(--hop-ListBox-border-color);
2695
- border-radius: var(--hop-ListBox-border-radius);
2696
- }
2697
- .ListBox-module__hop-ListBox--fluid___Imbbr {
2698
- --max-width: var(--hop-ListBox-fluid-max-width);
2699
- --width: var(--hop-ListBox-fluid-width);
2700
- }
2701
- .ListBox-module__hop-ListBox__section___EdImM {
2702
- margin-block: var(--section-margin-block-start) var(--section-margin-block-end);
2703
- margin-inline: var(--hop-ListBox-section-margin-inline);
2704
- padding-block: var(--section-padding-block-start) var(--section-padding-block-end);
2705
- padding-inline: var(--hop-ListBox-section-padding-inline);
2706
- border-block-start: var(--section-border-block-start);
2707
- border-block-end: var(--section-border-block-end);
2708
- }
2709
- .ListBox-module__hop-ListBox__item___-dZ1Z + .ListBox-module__hop-ListBox__section___EdImM {
2710
- --section-margin-block-start: var(--hop-ListBox-section-margin-block);
2711
- --section-border-block-start: var(--hop-ListBox-section-border-size) solid var(--hop-ListBox-section-border-color);
2712
- }
2713
- .ListBox-module__hop-ListBox__section___EdImM:has(+ .ListBox-module__hop-ListBox__item___-dZ1Z) {
2714
- --section-margin-block-end: var(--hop-ListBox-section-margin-block);
2715
- }
2716
- .ListBox-module__hop-ListBox__section___EdImM:first-child {
2717
- --section-padding-block-start: 0;
2718
- }
2719
- .ListBox-module__hop-ListBox__section___EdImM:last-child {
2720
- --section-padding-block-end: 0;
2721
- --section-border-block-end: 0;
2722
- }
2723
- .ListBox-module__hop-ListBox__section-header___F18mO {
2724
- margin: 0;
2725
- padding: var(--hop-ListBox-section-header-padding);
2726
- font-family: var(--hop-ListBox-section-header-font-family);
2727
- font-size: var(--hop-ListBox-section-header-font-size);
2728
- font-weight: var(--hop-ListBox-section-header-font-weight);
2729
- line-height: var(--hop-ListBox-section-header-line-height);
2730
- text-transform: var(--hop-ListBox-section-header-text-transform);
2731
- letter-spacing: var(--hop-ListBox-section-header-letter-spacing);
2732
- }
2733
- .ListBox-module__hop-ListBox__section-header___F18mO::before,
2734
- .ListBox-module__hop-ListBox__section-header___F18mO::after {
2735
- content: "";
2736
- display: block;
2737
- box-sizing: border-box;
2738
- inline-size: 0;
2739
- block-size: 0;
2740
- }
2741
- .ListBox-module__hop-ListBox__section-header___F18mO::before {
2742
- margin-block-end: var(--hop-ListBox-section-header-bottom-offset);
2743
- }
2744
- .ListBox-module__hop-ListBox__section-header___F18mO::after {
2745
- margin-block-start: var(--hop-ListBox-section-header-top-offset);
2746
- }
2747
- .ListBox-module__hop-ListBox__divider___5vc2s {
2748
- margin-block: var(--hop-ListBox-divider-margin-block);
2749
- margin-inline: var(--hop-ListBox-divider-margin-inline);
2750
- }
2751
-
2752
- /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/overlays/Popover/src/Popover.module.css/#css-module-data */
2753
- :where(.Popover-module__hop-Popover___ahosg *) {
2754
- font-family: var(--font-family);
2755
- font-size: var(--font-size);
2756
- font-weight: var(--font-weight);
2757
- line-height: var(--line-height);
2758
- outline: none;
2759
- }
2760
- .Popover-module__hop-Popover__dialog___rwQSO {
2761
- --hop-Popover-background: var(--hop-neutral-surface);
2762
- --hop-Popover-font-family: var(--hop-body-sm-font-family);
2763
- --hop-Popover-font-size: var(--hop-body-sm-font-size);
2764
- --hop-Popover-font-weight: var(--hop-body-sm-font-weight);
2765
- --hop-Popover-line-height: var(--hop-body-sm-line-height);
2766
- --hop-Popover-color: var(--hop-neutral-text);
2767
- --hop-Popover-title-font-family: var(--hop-body-sm-font-family);
2768
- --hop-Popover-title-font-weight: var(--hop-body-sm-semibold-font-weight);
2769
- --hop-Popover-content-font-size: var(--hop-body-sm-font-size);
2770
- --hop-Popover-content-line-height: var(--hop-body-sm-line-height);
2771
- --hop-Popover-content-color: var(--hop-neutral-text-weak);
2772
- --hop-Popover-footer-font-size: var(--hop-body-sm-font-size);
2773
- --hop-Popover-footer-line-height: var(--hop-body-sm-line-height);
2774
- --hop-Popover-footer-link-color: var(--hop-primary-text);
2775
- --hop-Popover-border: 0.0625rem solid var(--hop-neutral-border-weak);
2776
- --hop-Popover-border-radius: var(--hop-shape-rounded-md);
2777
- --hop-Popover-box-shadow: var(--hop-elevation-lifted);
2778
- --hop-Popover-max-inline-width: calc(100% - var(--hop-space-inline-md));
2779
- --font-family: var(--hop-Popover-font-family);
2780
- --font-size: var(--hop-Popover-font-size);
2781
- --font-weight: var(--hop-Popover-font-weight);
2782
- --line-height: var(--hop-Popover-line-height);
2783
- --width: var(--hop-Popover-max-inline-width);
2784
- display: grid;
2785
- grid-template-areas: "header header" "content content" "footer action";
2786
- grid-template-columns: repeat(2, auto);
2787
- column-gap: var(--hop-space-inset-sm);
2788
- box-sizing: border-box;
2789
- inline-size: var(--width);
2790
- max-inline-size: var(--width);
2791
- padding: var(--hop-space-inset-md);
2792
- background-color: var(--hop-Popover-background);
2793
- border: var(--hop-Popover-border);
2794
- border-radius: var(--hop-Popover-border-radius);
2795
- box-shadow: var(--hop-Popover-box-shadow);
2796
- @media (width >= 40rem) {
2797
- --width: 25rem;
2798
- }
2799
- }
2800
- .Popover-module__hop-Popover__title___VkIXX {
2801
- grid-area: header;
2802
- color: var(--hop-Popover-color);
2803
- }
2804
- .Popover-module__hop-Popover__actions___A24RL,
2805
- .Popover-module__hop-Popover__action___i8Fan {
2806
- grid-area: action;
2807
- justify-self: end;
2808
- margin-block-start: var(--hop-space-stack-sm);
2809
- }
2810
- .Popover-module__hop-Popover__content___kMgPZ {
2811
- --font-size: var(--hop-Popover-content-font-size);
2812
- --line-height: var(--hop-Popover-content-line-height);
2813
- grid-area: content;
2814
- margin-block: var(--hop-space-stack-sm) 0;
2815
- margin-inline: 0;
2816
- padding: 0;
2817
- color: var(--hop-Popover-content-color);
2818
- }
2819
- .Popover-module__hop-Popover__footer___N7P2Q {
2820
- --font-size: var(--hop-Popover-footer-font-size);
2821
- --line-height: var(--hop-Popover-footer-line-height);
2822
- grid-area: footer;
2823
- place-self: center start;
2824
- margin-block-start: var(--hop-space-stack-sm);
2825
- color: var(--hop-Popover-color);
2826
- }
2827
-
2828
- /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/switch/src/Switch.module.css/#css-module-data */
2829
- .Switch-module__hop-Switch___xTzRj {
2830
- --hop-Switch-border-size: 0.0625rem;
2831
- --hop-Switch-border-color: var(--hop-neutral-border);
2832
- --hop-Switch-border-radius: var(--hop-shape-rounded-lg);
2833
- --hop-Switch-background-color: var(--hop-neutral-surface);
2834
- --hop-Switch-thumb-color: var(--hop-neutral-icon);
2835
- --hop-Switch-text-color: var(--hop-neutral-text);
2836
- --hop-Switch-border-color-hover: var(--hop-neutral-border-hover);
2837
- --hop-Switch-background-color-hover: var(--hop-neutral-surface-hover);
2838
- --hop-Switch-thumb-color-hover: var(--hop-neutral-icon-hover);
2839
- --hop-Switch-text-color-hover: var(--hop-neutral-text-hover);
2840
- --hop-Switch-border-color-pressed: var(--hop-neutral-border-press);
2841
- --hop-Switch-background-color-pressed: var(--hop-neutral-surface-press);
2842
- --hop-Switch-thumb-color-pressed: var(--hop-neutral-icon-press);
2843
- --hop-Switch-text-color-pressed: var(--hop-neutral-text-press);
2844
- --hop-Switch-border-color-focus: var(--hop-neutral-border-hover);
2845
- --hop-Switch-background-color-focus: var(--hop-neutral-surface-hover);
2846
- --hop-Switch-thumb-color-focus: var(--hop-neutral-icon-hover);
2847
- --hop-Switch-focus-ring-color: var(--hop-primary-border-focus);
2848
- --hop-Switch-text-color-focus: var(--hop-neutral-text);
2849
- --hop-Switch-border-color-selected: var(--hop-neutral-border-selected);
2850
- --hop-Switch-background-color-selected: var(--hop-neutral-surface-selected);
2851
- --hop-Switch-thumb-color-selected: var(--hop-neutral-icon-selected);
2852
- --hop-Switch-text-color-selected: var(--hop-neutral-text);
2853
- --hop-Switch-border-color-disabled: var(--hop-neutral-border-disabled);
2854
- --hop-Switch-background-color-disabled: var(--hop-neutral-surface-disabled);
2855
- --hop-Switch-thumb-color-disabled: var(--hop-neutral-icon-disabled);
2856
- --hop-Switch-text-color-disabled: var(--hop-neutral-text-disabled);
2857
- --hop-Switch-inline-size-md: 3rem;
2858
- --hop-Switch-block-size-md: 1.5rem;
2859
- --hop-Switch-thumb-size-md: 1rem;
2860
- --hop-Switch-inset-inline-start-md: var(--hop-space-inset-xs);
2861
- --hop-Switch-text-top-offset-md: calc((var(--block-size) - (var(--hop-body-md-line-height) * var(--hop-body-md-font-size))) / 2);
2862
- --hop-Switch-inline-size-sm: 2rem;
2863
- --hop-Switch-block-size-sm: 1rem;
2864
- --hop-Switch-thumb-size-sm: 0.75rem;
2865
- --hop-Switch-inset-inline-start-sm: calc(var(--hop-space-inset-xs) / 2);
2866
- --hop-Switch-text-top-offset-sm: calc((var(--block-size) - (var(--hop-body-sm-line-height) * var(--hop-body-sm-font-size))) / 2);
2867
- --border-size: var(--hop-Switch-border-size);
2868
- --border-color: var(--hop-Switch-border-color);
2869
- --border-radius: var(--hop-Switch-border-radius);
2870
- --background-color: var(--hop-Switch-background-color);
2871
- --column-gap: var(--hop-space-inline-sm);
2872
- --thumb-color: var(--hop-Switch-thumb-color);
2873
- --thumb-transform: translate(0, -50%);
2874
- --outline: none;
2875
- --cursor: pointer;
2876
- --text-color: var(--hop-Switch-text-color);
2877
- cursor: var(--cursor);
2878
- display: inline-flex;
2879
- column-gap: var(--column-gap);
2880
- align-items: flex-start;
2881
- justify-content: flex-start;
2882
- box-sizing: border-box;
2883
- inline-size: max-content;
2884
- max-inline-size: 100%;
2885
- }
2886
- .Switch-module__hop-Switch--sm___pMOUQ {
2887
- --inline-size: var(--hop-Switch-inline-size-sm);
2888
- --block-size: var(--hop-Switch-block-size-sm);
2889
- --thumb-size: var(--hop-Switch-thumb-size-sm);
2890
- --inset-inline-start: var(--hop-Switch-inset-inline-start-sm);
2891
- --text-top-offset: var(--hop-Switch-text-top-offset-sm);
2892
- }
2893
- .Switch-module__hop-Switch--md___XkV-u {
2894
- --inline-size: var(--hop-Switch-inline-size-md);
2895
- --block-size: var(--hop-Switch-block-size-md);
2896
- --thumb-size: var(--hop-Switch-thumb-size-md);
2897
- --inset-inline-start: var(--hop-Switch-inset-inline-start-md);
2898
- --text-top-offset: var(--hop-Switch-text-top-offset-md);
2899
- }
2900
- .Switch-module__hop-Switch___xTzRj[data-hovered] {
2901
- --border-color: var(--hop-Switch-border-color-hover);
2902
- --background-color: var(--hop-Switch-background-color-hover);
2903
- --thumb-color: var(--hop-Switch-thumb-color-hover);
2904
- --text-color: var(--hop-Switch-text-color-hover);
2905
- }
2906
- .Switch-module__hop-Switch___xTzRj[data-pressed],
2907
- .Switch-module__hop-Switch___xTzRj[data-pressed][data-focus-visible] {
2908
- --border-color: var(--hop-Switch-border-color-pressed);
2909
- --background-color: var(--hop-Switch-background-color-pressed);
2910
- --thumb-color: var(--hop-Switch-thumb-color-pressed);
2911
- --text-color: var(--hop-Switch-text-color-pressed);
2912
- }
2913
- .Switch-module__hop-Switch___xTzRj[data-focus-visible] {
2914
- --border-color: var(--hop-Switch-border-color-focus);
2915
- --background-color: var(--hop-Switch-background-color-focus);
2916
- --thumb-color: var(--hop-Switch-thumb-color-focus);
2917
- --outline: 0.125rem solid var(--hop-Switch-focus-ring-color);
2918
- --text-color: var(--hop-Switch-text-color-focus);
2919
- }
2920
- .Switch-module__hop-Switch___xTzRj[data-selected],
2921
- .Switch-module__hop-Switch___xTzRj[data-selected][data-pressed] {
2922
- --border-color: var(--hop-Switch-border-color-selected);
2923
- --background-color: var(--hop-Switch-background-color-selected);
2924
- --thumb-color: var(--hop-Switch-thumb-color-selected);
2925
- --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%);
2926
- --text-color: var(--hop-Switch-text-color-selected);
2927
- }
2928
- .Switch-module__hop-Switch___xTzRj[data-disabled] {
2929
- --border-color: var(--hop-Switch-border-color-disabled);
2930
- --background-color: var(--hop-Switch-background-color-disabled);
2931
- --thumb-color: var(--hop-Switch-thumb-color-disabled);
2932
- --text-color: var(--hop-Switch-text-color-disabled);
2933
- --cursor: not-allowed;
2934
- }
2935
- .Switch-module__hop-Switch__indicator___tCcAc {
2936
- position: relative;
2937
- flex: 0 0 auto;
2938
- box-sizing: border-box;
2939
- inline-size: var(--inline-size, var(--hop-Switch-inline-size-md));
2940
- block-size: var(--block-size, var(--hop-Switch-block-size-md));
2941
- background-color: var(--background-color);
2942
- border: var(--border-size) solid var(--border-color);
2943
- border-radius: var(--border-radius);
2944
- outline: var(--outline);
2945
- outline-offset: 0.125rem;
2946
- transition: background var(--hop-easing-duration-2), border-color var(--hop-easing-duration-2);
2947
- }
2948
- .Switch-module__hop-Switch__indicator___tCcAc::before {
2949
- content: "";
2950
- position: absolute;
2951
- inset-block-start: 50%;
2952
- inset-inline-start: var(--inset-inline-start);
2953
- transform: var(--thumb-transform);
2954
- flex: 0 0 auto;
2955
- order: 1;
2956
- box-sizing: border-box;
2957
- inline-size: var(--thumb-size);
2958
- block-size: var(--thumb-size);
2959
- background-color: var(--thumb-color);
2960
- border-radius: var(--hop-shape-circle);
2961
- transition: transform var(--hop-easing-duration-2), background var(--hop-easing-duration-2);
2962
- }
2963
- .Switch-module__hop-Switch__text___nvsfu {
2964
- flex: 0 1 auto;
2965
- order: 2;
2966
- min-inline-size: 0;
2967
- margin-block-start: var(--text-top-offset, var(--hop-Switch-text-top-offset-md));
2968
- color: var(--text-color);
2969
- }
2970
- .Switch-module__hop-Switch__icon-list___322IP,
2971
- .Switch-module__hop-Switch__icon___IIFNL {
2972
- order: 3;
2973
- }
2974
-
2975
- /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/switch/src/SwitchField.module.css/#css-module-data */
2976
- .SwitchField-module__hop-SwitchField___w3L7V {
2977
- --hop-SwitchField-description-color: var(--hop-neutral-text-weak);
2978
- --hop-SwitchField-description-color-disabled: var(--hop-neutral-text-disabled);
2979
- --hop-SwitchField-sm-row-gap: var(--hop-space-stack-xs);
2980
- --hop-SwitchField-switch-sm-inline-size: 2rem;
2981
- --hop-SwitchField-description-sm-margin-inline-start: calc(var(--hop-SwitchField-switch-sm-inline-size) + var(--hop-space-inline-sm));
2982
- --hop-SwitchField-md-row-gap: var(--hop-space-stack-xs);
2983
- --hop-SwitchField-switch-md-inline-size: 3rem;
2984
- --hop-SwitchField-description-md-margin-inline-start: calc(var(--hop-SwitchField-switch-md-inline-size) + var(--hop-space-inline-sm));
2985
- --description-color: var(--hop-SwitchField-description-color);
2986
- display: flex;
2987
- flex-direction: column;
2988
- row-gap: var(--row-gap, var(--hop-space-stack-sm));
2989
- align-items: flex-start;
2990
- justify-content: flex-start;
2991
- box-sizing: border-box;
2992
- inline-size: max-content;
2993
- max-inline-size: 100%;
2994
- }
2995
- .SwitchField-module__hop-SwitchField___w3L7V[data-disabled] {
2996
- --description-color: var(--hop-SwitchField-description-color-disabled);
2997
- }
2998
- .SwitchField-module__hop-SwitchField--sm___xSnx9 {
2999
- --row-gap: var(--hop-SwitchField-sm-row-gap);
3000
- --description-margin-inline-start: var(--hop-SwitchField-description-sm-margin-inline-start);
3001
- }
3002
- .SwitchField-module__hop-SwitchField--md___lEJk0 {
3003
- --row-gap: var(--hop-SwitchField-md-row-gap);
3004
- --description-margin-inline-start: var(--hop-SwitchField-description-md-margin-inline-start);
3005
- }
3006
- .SwitchField-module__hop-SwitchField__description___qqhZZ {
3007
- order: 2;
3008
- margin-inline-start: var(--description-margin-inline-start, var(--hop-SwitchField-description-md-margin-inline-start));
3009
- color: var(--description-color);
3010
- }
3011
- .SwitchField-module__hop-SwitchField__switch___sDRnX {
3012
- order: 1;
3013
- }
3014
-
3015
- /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/tag/src/Tag.module.css/#css-module-data */
3016
- .Tag-module__hop-Tag___APxsb {
3017
- --hop-Tag-border-size: 0.0625rem;
3018
- --hop-Tag-border-radius: var(--hop-shape-pill);
3019
- --hop-Tag-border-color: var(--hop-neutral-border);
3020
- --hop-Tag-background-color: var(--hop-neutral-surface-weak);
3021
- --hop-Tag-text-color: var(--hop-neutral-text);
3022
- --hop-Tag-md-block-size: 1.5rem;
3023
- --hop-Tag-md-padding-inline-start: var(--hop-space-inset-xs);
3024
- --hop-Tag-md-padding-inline-start-text-first: var(--hop-space-inset-sm);
3025
- --hop-Tag-md-padding-inline-end: var(--hop-space-inset-xs);
3026
- --hop-Tag-md-padding-inline-end-text-last: var(--hop-space-inset-sm);
3027
- --hop-Tag-md-column-gap: var(--hop-space-inline-xs);
3028
- --hop-Tag-lg-block-size: 2rem;
3029
- --hop-Tag-lg-padding-inline-start: var(--hop-space-inset-xs);
3030
- --hop-Tag-lg-padding-inline-start-text-first: var(--hop-space-inset-md);
3031
- --hop-Tag-lg-padding-inline-end: var(--hop-space-inset-xs);
3032
- --hop-Tag-lg-padding-inline-end-text-last: var(--hop-space-inset-md);
3033
- --hop-Tag-lg-column-gap: var(--hop-space-inline-sm);
3034
- --hop-Tag-background-color-focus: var(--hop-neutral-surface-weak-hover);
3035
- --hop-Tag-border-color-focus: var(--hop-neutral-border-hover);
3036
- --hop-Tag-text-color-focus: var(--hop-neutral-text-hover);
3037
- --hop-Tag-focus-ring-color: var(--hop-primary-border-focus);
3038
- --hop-Tag-background-color-hover: var(--hop-neutral-surface-weak-hover);
3039
- --hop-Tag-border-color-hover: var(--hop-neutral-border-hover);
3040
- --hop-Tag-text-color-hover: var(--hop-neutral-text-hover);
3041
- --hop-Tag-background-color-selected: var(--hop-neutral-surface-weak-selected);
3042
- --hop-Tag-border-color-selected: var(--hop-neutral-border-selected);
3043
- --hop-Tag-text-color-selected: var(--hop-neutral-text);
3044
- --hop-Tag-background-color-press: var(--hop-neutral-surface-weak-press);
3045
- --hop-Tag-border-color-press: var(--hop-neutral-border-press);
3046
- --hop-Tag-text-color-press: var(--hop-neutral-text-press);
3047
- --hop-Tag-border-color-invalid: var(--hop-danger-border-strong);
3048
- --hop-Tag-background-color-disabled: var(--hop-neutral-surface-disabled);
3049
- --hop-Tag-border-color-disabled: var(--hop-neutral-border-disabled);
3050
- --hop-Tag-text-color-disabled: var(--hop-neutral-text-disabled);
3051
- --border-radius: var(--hop-Tag-border-radius);
3052
- --border-size: var(--hop-Tag-border-size);
3053
- --border-color: var(--hop-Tag-border-color);
3054
- --background-color: var(--hop-Tag-background-color);
3055
- --text-color: var(--hop-Tag-text-color);
3056
- --badge-secondary-inline-margin-start: calc(-1 * var(--column-gap));
3057
- --focus-ring-color: var(--hop-Tag-focus-ring-color);
3058
- overflow: hidden;
3059
- display: inline-flex;
3060
- column-gap: var(--column-gap);
3061
- align-items: center;
3062
- justify-content: center;
3063
- box-sizing: border-box;
3064
- inline-size: max-content;
3065
- max-inline-size: 100%;
3066
- block-size: var(--block-size);
3067
- padding-inline: var(--padding-inline-start) var(--padding-inline-end);
3068
- color: var(--text-color);
3069
- white-space: nowrap;
3070
- background-color: var(--background-color);
3071
- border: var(--border-size) solid var(--border-color);
3072
- border-radius: var(--border-radius);
3073
- outline: none;
3074
- outline-offset: 0.125rem;
3075
- }
3076
- .Tag-module__hop-Tag--md___PGGfP {
3077
- --block-size: var(--hop-Tag-md-block-size);
3078
- --padding-inline-start: var(--hop-Tag-md-padding-inline-start);
3079
- --padding-inline-end: var(--hop-Tag-md-padding-inline-end);
3080
- --column-gap: var(--hop-Tag-md-column-gap);
3081
- --clear-btn-margin-inline: calc(-1 * var(--hop-space-inline-xs));
3082
- }
3083
- .Tag-module__hop-Tag--md___PGGfP:not(:has(.Tag-module__hop-Tag__icon___oelf8, .Tag-module__hop-Tag__icon-list___HNt-z)) {
3084
- --padding-inline-start: var(--hop-Tag-md-padding-inline-start-text-first);
3085
- }
3086
- .Tag-module__hop-Tag--md___PGGfP:not(:has(.Tag-module__hop-Tag__badge___IZs0J, .Tag-module__hop-Tag__remove-btn___PINTP, .Tag-module__hop-Tag__Spinner___lbIMQ)) {
3087
- --padding-inline-end: var(--hop-Tag-md-padding-inline-end-text-last);
3088
- }
3089
- .Tag-module__hop-Tag--md___PGGfP:not(:has(.Tag-module__hop-Tag__remove-btn___PINTP, .Tag-module__hop-Tag__Spinner___lbIMQ)) {
3090
- --badge-margin-inline-end: calc(-1 * var(--padding-inline-end));
3091
- }
3092
- .Tag-module__hop-Tag--lg___YTw5A {
3093
- --block-size: var(--hop-Tag-lg-block-size);
3094
- --padding-inline-start: var(--hop-Tag-lg-padding-inline-start);
3095
- --padding-inline-end: var(--hop-Tag-lg-padding-inline-end);
3096
- --column-gap: var(--hop-Tag-lg-column-gap);
3097
- --clear-btn-margin-inline: 0;
3098
- --badge-margin-inline-end: 0;
3099
- }
3100
- .Tag-module__hop-Tag--lg___YTw5A:not(:has(.Tag-module__hop-Tag__icon___oelf8, .Tag-module__hop-Tag__icon-list___HNt-z)) {
3101
- --padding-inline-start: var(--hop-Tag-lg-padding-inline-start-text-first);
3102
- }
3103
- .Tag-module__hop-Tag--lg___YTw5A:not(:has(.Tag-module__hop-Tag__badge___IZs0J, .Tag-module__hop-Tag__remove-btn___PINTP, .Tag-module__hop-Tag__Spinner___lbIMQ)) {
3104
- --padding-inline-end: var(--hop-Tag-lg-padding-inline-end-text-last);
3105
- }
3106
- .Tag-module__hop-Tag___APxsb[data-href] {
3107
- cursor: pointer;
3108
- }
3109
- .Tag-module__hop-Tag___APxsb[data-focus-visible] {
3110
- --background-color: var(--hop-Tag-background-color-focus);
3111
- --border-color: var(--hop-Tag-border-color-focus);
3112
- --text-color: var(--hop-Tag-text-color-focus);
3113
- outline: 0.125rem solid var(--focus-ring-color);
3114
- }
3115
- .Tag-module__hop-Tag___APxsb[data-hovered] {
3116
- --background-color: var(--hop-Tag-background-color-hover);
3117
- --border-color: var(--hop-Tag-border-color-hover);
3118
- --text-color: var(--hop-Tag-text-color-hover);
3119
- cursor: pointer;
3120
- }
3121
- .Tag-module__hop-Tag___APxsb[data-selected] {
3122
- --background-color: var(--hop-Tag-background-color-selected);
3123
- --border-color: var(--hop-Tag-border-color-selected);
3124
- --text-color: var(--hop-Tag-text-color-selected);
3125
- }
3126
- .Tag-module__hop-Tag___APxsb[data-pressed] {
3127
- --background-color: var(--hop-Tag-background-color-press);
3128
- --border-color: var(--hop-Tag-border-color-press);
3129
- --text-color: var(--hop-Tag-text-color-press);
3130
- cursor: pointer;
3131
- }
3132
- .Tag-module__hop-Tag___APxsb[data-invalid] {
3133
- --border-color: var(--hop-Tag-border-color-invalid);
3134
- }
3135
- .Tag-module__hop-Tag___APxsb[data-disabled] {
3136
- --background-color: var(--hop-Tag-background-color-disabled);
3137
- --border-color: var(--hop-Tag-border-color-disabled);
3138
- --text-color: var(--hop-Tag-text-color-disabled);
3139
- cursor: not-allowed;
3140
- }
3141
- .Tag-module__hop-Tag__icon___oelf8,
3142
- .Tag-module__hop-Tag__icon-list___HNt-z {
3143
- flex: 0 0 auto;
3144
- flex-wrap: nowrap;
3145
- order: 1;
3146
- }
3147
- .Tag-module__hop-Tag__text___3hZ83 {
3148
- overflow: hidden;
3149
- flex: 1 1 auto;
3150
- order: 2;
3151
- min-inline-size: 0;
3152
- text-align: center;
3153
- text-overflow: ellipsis;
3154
- }
3155
- .Tag-module__hop-Tag__badge___IZs0J {
3156
- flex: 0 0 auto;
3157
- order: 3;
3158
- margin-inline-end: var(--badge-margin-inline-end);
3159
- }
3160
- .Tag-module__hop-Tag__badge___IZs0J.Tag-module__hop-Badge--secondary___OeS9R {
3161
- margin-inline-start: var(--badge-secondary-inline-margin-start);
3162
- }
3163
- .Tag-module__hop-Tag__remove-btn___PINTP,
3164
- .Tag-module__hop-Tag__Spinner___lbIMQ {
3165
- flex: 0 0 auto;
3166
- order: 4;
3167
- }
3168
- .Tag-module__hop-Tag__remove-btn___PINTP {
3169
- margin-inline: var(--clear-btn-margin-inline);
3170
- }
3171
-
3172
- /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/tag/src/TagGroup.module.css/#css-module-data */
3173
- .TagGroup-module__hop-TagGroup___HSRyk {
3174
- --hop-TagGroup-row-gap: var(--hop-space-inline-sm);
3175
- --hop-TagGroup-list-column-gap: var(--hop-space-inline-sm);
3176
- --hop-TagGroup-list-row-gap: var(--hop-space-inline-sm);
3177
- --hop-TagGroup-list-focus-ring-color: var(--hop-primary-border-focus);
3178
- --hop-TagGroup-list-border-radius: var(--hop-shape-rounded-sm);
3179
- --row-gap: var(--hop-TagGroup-row-gap);
3180
- --list-column-gap: var(--hop-TagGroup-list-column-gap);
3181
- --list-row-gap: var(--hop-TagGroup-list-row-gap);
3182
- --list-focus-ring-color: var(--hop-TagGroup-list-focus-ring-color);
3183
- --list-border-radius: var(--hop-TagGroup-list-border-radius);
3184
- display: flex;
3185
- flex-direction: column;
3186
- row-gap: var(--row-gap);
3187
- align-items: flex-start;
3188
- justify-content: flex-start;
3189
- box-sizing: border-box;
3190
- inline-size: max-content;
3191
- max-inline-size: 100%;
3192
- }
3193
- .TagGroup-module__hop-TagGroup___HSRyk > .TagGroup-module__hop-TagGroup__label___2FqNk {
3194
- order: 1;
3195
- }
3196
- .TagGroup-module__hop-TagGroup__list___PssjU {
3197
- display: flex;
3198
- flex-wrap: wrap;
3199
- gap: var(--list-row-gap) var(--list-column-gap);
3200
- align-items: center;
3201
- order: 2;
3202
- border-radius: var(--list-border-radius);
3203
- outline: none;
3204
- }
3205
- .TagGroup-module__hop-TagGroup__list___PssjU[data-focus-visible] {
3206
- outline: 0.125rem solid var(--list-focus-ring-color);
3207
- outline-offset: 0.125rem;
3208
- }
3209
- .TagGroup-module__hop-TagGroup___HSRyk > .TagGroup-module__hop-TagGroup__error-message___Nd-LK,
3210
- .TagGroup-module__hop-TagGroup___HSRyk > .TagGroup-module__hop-TagGroup__helper-message___-MMag {
3211
- order: 3;
3212
- }
3213
-
3214
1
  /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/Heading/src/Heading.module.css/#css-module-data */
3215
- .Heading-module__hop-Heading___0-OVa {
2
+ .Heading-module__hop-Heading___CV7-P {
3216
3
  --hop-Heading-xs-font-size: var(--hop-heading-xs-font-size);
3217
4
  --hop-Heading-xs-font-family: var(--hop-heading-xs-font-family);
3218
5
  --hop-Heading-xs-font-weight: var(--hop-heading-xs-font-weight);
@@ -3246,50 +33,50 @@
3246
33
  --hop-Heading-inherit-size-font-weight: inherit;
3247
34
  --hop-Heading-inherit-size-line-height: inherit;
3248
35
  }
3249
- :where(.Heading-module__hop-Heading___0-OVa) {
36
+ :where(.Heading-module__hop-Heading___CV7-P) {
3250
37
  margin: 0;
3251
38
  font-family: var(--font-family);
3252
39
  font-size: var(--font-size);
3253
40
  font-weight: var(--font-weight);
3254
41
  line-height: var(--line-height);
3255
42
  }
3256
- :where(.Heading-module__hop-Heading--xs___Gv8a-) {
43
+ :where(.Heading-module__hop-Heading--xs___lUG86) {
3257
44
  --font-size: var(--hop-Heading-xs-font-size);
3258
45
  --font-family: var(--hop-Heading-xs-font-family);
3259
46
  --font-weight: var(--hop-Heading-xs-font-weight);
3260
47
  --line-height: var(--hop-Heading-xs-line-height);
3261
48
  }
3262
- :where(.Heading-module__hop-Heading--sm___Pp2Y3) {
49
+ :where(.Heading-module__hop-Heading--sm___Cj41K) {
3263
50
  --font-size: var(--hop-Heading-sm-font-size);
3264
51
  --font-family: var(--hop-Heading-sm-font-family);
3265
52
  --font-weight: var(--hop-Heading-sm-font-weight);
3266
53
  --line-height: var(--hop-Heading-sm-line-height);
3267
54
  }
3268
- :where(.Heading-module__hop-Heading--md___WcfUF) {
55
+ :where(.Heading-module__hop-Heading--md___J5xM6) {
3269
56
  --font-size: var(--hop-Heading-md-font-size);
3270
57
  --font-family: var(--hop-Heading-md-font-family);
3271
58
  --font-weight: var(--hop-Heading-md-font-weight);
3272
59
  --line-height: var(--hop-Heading-md-line-height);
3273
60
  }
3274
- :where(.Heading-module__hop-Heading--lg___bdnQF) {
61
+ :where(.Heading-module__hop-Heading--lg___danQV) {
3275
62
  --font-size: var(--hop-Heading-lg-font-size);
3276
63
  --font-family: var(--hop-Heading-lg-font-family);
3277
64
  --font-weight: var(--hop-Heading-lg-font-weight);
3278
65
  --line-height: var(--hop-Heading-lg-line-height);
3279
66
  }
3280
- :where(.Heading-module__hop-Heading--xl___Lt00B) {
67
+ :where(.Heading-module__hop-Heading--xl___WqtBx) {
3281
68
  --font-size: var(--hop-Heading-xl-font-size);
3282
69
  --font-family: var(--hop-Heading-xl-font-family);
3283
70
  --font-weight: var(--hop-Heading-xl-font-weight);
3284
71
  --line-height: var(--hop-Heading-xl-line-height);
3285
72
  }
3286
- :where(.Heading-module__hop-Heading--2xl___yT4Le) {
73
+ :where(.Heading-module__hop-Heading--2xl___rdouL) {
3287
74
  --font-size: var(--hop-Heading-2xl-font-size);
3288
75
  --font-family: var(--hop-Heading-2xl-font-family);
3289
76
  --font-weight: var(--hop-Heading-2xl-font-weight);
3290
77
  --line-height: var(--hop-Heading-2xl-line-height);
3291
78
  }
3292
- :where(.Heading-module__hop-Heading--3xl___z-3OX) {
79
+ :where(.Heading-module__hop-Heading--3xl___mLIMt) {
3293
80
  --font-size: var(--hop-Heading-3xl-font-size);
3294
81
  --font-family: var(--hop-Heading-3xl-font-family);
3295
82
  --font-weight: var(--hop-Heading-3xl-font-weight);