@hopper-ui/components 1.1.0 → 1.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (198) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/README.md +1 -1
  3. package/dist/Avatar/src/AnonymousAvatar.css +10 -10
  4. package/dist/Avatar/src/AnonymousAvatar.js +2 -2
  5. package/dist/Avatar/src/Avatar.css +37 -37
  6. package/dist/Avatar/src/Avatar.js +3 -3
  7. package/dist/Avatar/src/AvatarContext.d.ts +1 -1
  8. package/dist/Avatar/src/DeletedAvatar.css +10 -10
  9. package/dist/Avatar/src/DeletedAvatar.js +2 -2
  10. package/dist/Avatar/src/RichIconAvatarImage.css +10 -10
  11. package/dist/Avatar/src/RichIconAvatarImage.js +1 -1
  12. package/dist/Avatar/src/index.css +37 -37
  13. package/dist/Avatar/src/index.js +5 -5
  14. package/dist/Badge/src/Badge.css +10 -10
  15. package/dist/Badge/src/Badge.js +2 -2
  16. package/dist/Badge/src/index.css +10 -10
  17. package/dist/Badge/src/index.js +2 -2
  18. package/dist/Divider/src/Divider.css +2 -2
  19. package/dist/Divider/src/Divider.js +1 -1
  20. package/dist/Divider/src/index.css +2 -2
  21. package/dist/Divider/src/index.js +1 -1
  22. package/dist/ErrorMessage/src/ErrorMessage.css +11 -11
  23. package/dist/ErrorMessage/src/ErrorMessage.js +2 -2
  24. package/dist/ErrorMessage/src/index.css +11 -11
  25. package/dist/ErrorMessage/src/index.js +2 -2
  26. package/dist/Form/src/Form.css +4111 -0
  27. package/dist/Form/src/Form.d.ts +28 -0
  28. package/dist/Form/src/Form.js +114 -0
  29. package/dist/Form/src/FormContext.d.ts +8 -0
  30. package/dist/Form/src/FormContext.js +2 -0
  31. package/dist/Form/src/index.css +4111 -0
  32. package/dist/Form/src/index.d.ts +5 -0
  33. package/dist/Form/src/index.js +114 -0
  34. package/dist/HelperMessage/src/HelperMessage.css +11 -11
  35. package/dist/HelperMessage/src/HelperMessage.js +2 -2
  36. package/dist/HelperMessage/src/index.css +11 -11
  37. package/dist/HelperMessage/src/index.js +2 -2
  38. package/dist/IconList/src/IconList.css +1 -1
  39. package/dist/IconList/src/IconList.js +1 -1
  40. package/dist/IconList/src/index.css +1 -1
  41. package/dist/IconList/src/index.js +1 -1
  42. package/dist/Link/src/Link.css +31 -31
  43. package/dist/Link/src/Link.js +3 -3
  44. package/dist/Link/src/index.css +31 -31
  45. package/dist/Link/src/index.js +3 -3
  46. package/dist/ListBox/src/ListBox.css +369 -169
  47. package/dist/ListBox/src/ListBox.js +13 -12
  48. package/dist/ListBox/src/ListBoxItem.css +425 -225
  49. package/dist/ListBox/src/ListBoxItem.js +10 -9
  50. package/dist/ListBox/src/ListBoxItemSkeleton.css +7 -7
  51. package/dist/ListBox/src/ListBoxItemSkeleton.js +1 -1
  52. package/dist/ListBox/src/index.css +369 -169
  53. package/dist/ListBox/src/index.js +13 -12
  54. package/dist/Spinner/src/Spinner.css +19 -19
  55. package/dist/Spinner/src/Spinner.js +2 -2
  56. package/dist/Spinner/src/index.css +19 -19
  57. package/dist/Spinner/src/index.js +2 -2
  58. package/dist/buttons/src/Button.css +94 -94
  59. package/dist/buttons/src/Button.js +6 -6
  60. package/dist/buttons/src/ButtonGroup.css +11 -11
  61. package/dist/buttons/src/ButtonGroup.js +1 -1
  62. package/dist/buttons/src/ClearButton.css +375 -28
  63. package/dist/buttons/src/ClearButton.js +3 -3
  64. package/dist/buttons/src/EmbeddedButton.css +375 -28
  65. package/dist/buttons/src/EmbeddedButton.d.ts +9 -0
  66. package/dist/buttons/src/EmbeddedButton.js +1 -1
  67. package/dist/buttons/src/index.css +480 -133
  68. package/dist/buttons/src/index.js +9 -9
  69. package/dist/checkbox/src/Checkbox.css +31 -31
  70. package/dist/checkbox/src/Checkbox.js +3 -3
  71. package/dist/checkbox/src/CheckboxField.css +15 -15
  72. package/dist/checkbox/src/CheckboxField.js +1 -1
  73. package/dist/checkbox/src/CheckboxGroup.css +62 -59
  74. package/dist/checkbox/src/CheckboxGroup.js +1 -1
  75. package/dist/checkbox/src/index.css +62 -59
  76. package/dist/checkbox/src/index.js +6 -6
  77. package/dist/{chunk-UMD6RDUS.js → chunk-2DPE3H3G.js} +1 -1
  78. package/dist/{chunk-BLQ72S4U.js → chunk-462UBJV3.js} +1 -1
  79. package/dist/{chunk-KA6KVIVV.js → chunk-4APVXEPA.js} +3 -3
  80. package/dist/{chunk-RD6VCI72.js → chunk-4H7PKEMJ.js} +20 -8
  81. package/dist/{chunk-BGRKDTCG.js → chunk-55AWCUQF.js} +1 -1
  82. package/dist/{chunk-QY6U3R3W.js → chunk-6WKRP4MN.js} +3 -2
  83. package/dist/{chunk-WAUGFWZA.js → chunk-AGRQ7UGN.js} +2 -2
  84. package/dist/{chunk-Q52NUBN7.js → chunk-BN32T6QQ.js} +2 -2
  85. package/dist/{chunk-I6OII2RA.js → chunk-C7XRB2J6.js} +3 -3
  86. package/dist/{chunk-FQO2QRSC.js → chunk-CSE22YXO.js} +1 -1
  87. package/dist/{chunk-ICDMJUNE.js → chunk-CXWMHWSS.js} +1 -1
  88. package/dist/{chunk-TGXZJJJA.js → chunk-DZKJZSTQ.js} +6 -2
  89. package/dist/chunk-EURJK4ZT.js +7 -0
  90. package/dist/{chunk-GXFFLWNF.js → chunk-F47GZGT7.js} +1 -1
  91. package/dist/{chunk-YEYNRBMQ.js → chunk-F4H76S4H.js} +6 -2
  92. package/dist/{chunk-VVY3ONWS.js → chunk-F4KQUFXI.js} +1 -1
  93. package/dist/{chunk-VFYGHX3N.js → chunk-IUFABTFZ.js} +1 -1
  94. package/dist/chunk-J6YYPRGY.js +150 -0
  95. package/dist/chunk-J7BXE7WN.js +172 -0
  96. package/dist/{chunk-6MSRPPI6.js → chunk-K7DU4YR4.js} +1 -1
  97. package/dist/{chunk-XHZ4R2MB.js → chunk-LXCCS4SA.js} +4 -4
  98. package/dist/{chunk-6CDXS774.js → chunk-MFFXNI66.js} +6 -6
  99. package/dist/{chunk-YE7RARJB.js → chunk-MX5BW5VE.js} +1 -1
  100. package/dist/{chunk-BXPZ6HPC.js → chunk-PUNJWQAN.js} +142 -159
  101. package/dist/{chunk-TKB5Q2WX.js → chunk-QGC3OX7W.js} +1 -1
  102. package/dist/{chunk-GCJT5PQ4.js → chunk-RLDQEH6F.js} +7 -5
  103. package/dist/{chunk-TVV4RMFR.js → chunk-RYZNMKWB.js} +1 -1
  104. package/dist/{chunk-PQV24MM4.js → chunk-SPFANCCV.js} +3 -3
  105. package/dist/{chunk-ZNGSZW7M.js → chunk-T7QJEHL7.js} +3 -3
  106. package/dist/{chunk-YRUBXLBX.js → chunk-TFELIWJO.js} +6 -3
  107. package/dist/{chunk-6PH4IIEW.js → chunk-THUFFPGX.js} +1 -1
  108. package/dist/{chunk-P7UUQGGF.js → chunk-TM4R5NO7.js} +2 -2
  109. package/dist/{chunk-6K6W32Q7.js → chunk-VQC5F6I7.js} +6 -4
  110. package/dist/{chunk-AT7ZY6GA.js → chunk-WQSVNGFJ.js} +1 -1
  111. package/dist/{chunk-SR3GAXY5.js → chunk-WYBQCRQB.js} +2 -2
  112. package/dist/{chunk-XGI4LDIF.js → chunk-XI3BX2TP.js} +4 -4
  113. package/dist/chunk-XUCH26RT.js +70 -0
  114. package/dist/{chunk-CXCOSGTO.js → chunk-YWIDJ55Q.js} +4 -2
  115. package/dist/{chunk-BQZQTNI6.js → chunk-YXD3IR3T.js} +1 -1
  116. package/dist/{chunk-A7HLXFSP.js → chunk-ZEXXNE5U.js} +9 -7
  117. package/dist/{chunk-TMWNNF4J.js → chunk-ZPPQJKHC.js} +3 -3
  118. package/dist/i18n/src/index.js +1 -1
  119. package/dist/i18n/src/useLocalizedString.js +1 -1
  120. package/dist/index.css +1521 -694
  121. package/dist/index.d.ts +5 -3
  122. package/dist/index.js +47 -45
  123. package/dist/inputs/src/InputGroup.css +14 -14
  124. package/dist/inputs/src/InputGroup.d.ts +2 -1
  125. package/dist/inputs/src/InputGroup.js +1 -1
  126. package/dist/inputs/src/NumberField.css +65 -62
  127. package/dist/inputs/src/NumberField.d.ts +1 -0
  128. package/dist/inputs/src/NumberField.js +18 -173
  129. package/dist/inputs/src/PasswordField.css +524 -174
  130. package/dist/inputs/src/PasswordField.d.ts +1 -0
  131. package/dist/inputs/src/PasswordField.js +9 -9
  132. package/dist/inputs/src/SearchField.css +530 -180
  133. package/dist/inputs/src/SearchField.d.ts +1 -0
  134. package/dist/inputs/src/SearchField.js +10 -10
  135. package/dist/inputs/src/TextArea.css +59 -56
  136. package/dist/inputs/src/TextArea.js +8 -8
  137. package/dist/inputs/src/TextField.css +525 -175
  138. package/dist/inputs/src/TextField.d.ts +2 -0
  139. package/dist/inputs/src/TextField.js +11 -11
  140. package/dist/inputs/src/index.css +694 -205
  141. package/dist/inputs/src/index.d.ts +2 -0
  142. package/dist/inputs/src/index.js +17 -14
  143. package/dist/overlays/Popover/src/Popover.css +1521 -694
  144. package/dist/overlays/Popover/src/Popover.js +47 -45
  145. package/dist/overlays/Popover/src/index.css +1521 -694
  146. package/dist/overlays/Popover/src/index.js +47 -45
  147. package/dist/radio/src/Radio.css +31 -31
  148. package/dist/radio/src/Radio.js +3 -3
  149. package/dist/radio/src/RadioField.css +15 -15
  150. package/dist/radio/src/RadioField.js +1 -1
  151. package/dist/radio/src/RadioGroup.css +62 -59
  152. package/dist/radio/src/RadioGroup.js +1 -1
  153. package/dist/radio/src/index.css +62 -59
  154. package/dist/radio/src/index.js +6 -6
  155. package/dist/switch/src/Switch.css +25 -25
  156. package/dist/switch/src/Switch.js +3 -3
  157. package/dist/switch/src/SwitchField.css +15 -15
  158. package/dist/switch/src/SwitchField.js +1 -1
  159. package/dist/switch/src/index.css +31 -31
  160. package/dist/switch/src/index.js +4 -4
  161. package/dist/tag/src/Tag.css +1041 -2332
  162. package/dist/tag/src/Tag.d.ts +6 -1
  163. package/dist/tag/src/Tag.js +7 -99
  164. package/dist/tag/src/TagGroup.css +24 -21
  165. package/dist/tag/src/TagGroup.d.ts +7 -2
  166. package/dist/tag/src/TagGroup.js +1 -1
  167. package/dist/tag/src/index.css +1104 -2296
  168. package/dist/tag/src/index.js +9 -94
  169. package/dist/typography/Heading/src/Heading.css +9 -9
  170. package/dist/typography/Heading/src/Heading.js +1 -1
  171. package/dist/typography/Heading/src/index.css +9 -9
  172. package/dist/typography/Heading/src/index.js +1 -1
  173. package/dist/typography/Label/src/Label.css +5 -2
  174. package/dist/typography/Label/src/Label.d.ts +8 -0
  175. package/dist/typography/Label/src/Label.js +2 -1
  176. package/dist/typography/Label/src/index.css +5 -2
  177. package/dist/typography/Label/src/index.js +2 -1
  178. package/dist/typography/OverlineText/src/OverlineText.css +6 -6
  179. package/dist/typography/OverlineText/src/OverlineText.js +1 -1
  180. package/dist/typography/OverlineText/src/index.css +6 -6
  181. package/dist/typography/OverlineText/src/index.js +1 -1
  182. package/dist/typography/Text/src/Text.css +9 -9
  183. package/dist/typography/Text/src/Text.js +1 -1
  184. package/dist/typography/Text/src/index.css +9 -9
  185. package/dist/typography/Text/src/index.js +1 -1
  186. package/dist/utils/src/index.js +1 -1
  187. package/package.json +3 -3
  188. package/dist/Chip/src/Chip.css +0 -261
  189. package/dist/Chip/src/Chip.d.ts +0 -27
  190. package/dist/Chip/src/Chip.js +0 -10
  191. package/dist/Chip/src/ChipContext.d.ts +0 -10
  192. package/dist/Chip/src/ChipContext.js +0 -2
  193. package/dist/Chip/src/index.css +0 -261
  194. package/dist/Chip/src/index.d.ts +0 -7
  195. package/dist/Chip/src/index.js +0 -10
  196. package/dist/chunk-632B5YBQ.js +0 -7
  197. package/dist/chunk-7VS566A2.js +0 -43
  198. package/dist/chunk-OETAIO6N.js +0 -105
@@ -0,0 +1,4111 @@
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___Ww7PP {
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___Ww7PP) {
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___YsuwL) {
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___9lTR-) {
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___to5eX) {
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___Y-6Mo) {
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___Qo9et) {
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___dViKj) {
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___uMHTH) {
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___jKuOm {
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___YOClX {
114
+ --size: var(--hop-RichIconAvatarImage-xs-size);
115
+ --icon-size: var(--hop-RichIconAvatarImage-icon-xs-size);
116
+ }
117
+ .RichIconAvatarImage-module__hop-RichIconAvatarImage--sm___orivw {
118
+ --size: var(--hop-RichIconAvatarImage-sm-size);
119
+ --icon-size: var(--hop-RichIconAvatarImage-icon-sm-size);
120
+ }
121
+ .RichIconAvatarImage-module__hop-RichIconAvatarImage--md___0grkn {
122
+ --size: var(--hop-RichIconAvatarImage-md-size);
123
+ --icon-size: var(--hop-RichIconAvatarImage-icon-md-size);
124
+ }
125
+ .RichIconAvatarImage-module__hop-RichIconAvatarImage--lg___qCvt- {
126
+ --size: var(--hop-RichIconAvatarImage-lg-size);
127
+ --icon-size: var(--hop-RichIconAvatarImage-icon-lg-size);
128
+ }
129
+ .RichIconAvatarImage-module__hop-RichIconAvatarImage--xl___lVnHc {
130
+ --size: var(--hop-RichIconAvatarImage-xl-size);
131
+ --icon-size: var(--hop-RichIconAvatarImage-icon-xl-size);
132
+ }
133
+ .RichIconAvatarImage-module__hop-RichIconAvatarImage--2xl___RlCbj {
134
+ --size: var(--hop-RichIconAvatarImage-2xl-size);
135
+ --icon-size: var(--hop-RichIconAvatarImage-icon-2xl-size);
136
+ }
137
+ .RichIconAvatarImage-module__hop-RichIconAvatarImage___jKuOm[data-disabled] {
138
+ --background-color: var(--hop-RichIconAvatarImage-background-color-disabled);
139
+ }
140
+ .RichIconAvatarImage-module__hop-RichIconAvatarImage__icon___--Ntp {
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___jKuOm[data-disabled] .RichIconAvatarImage-module__hop-RichIconAvatarImage__icon___--Ntp {
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___IsFnk {
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___xVZ4Y {
198
+ --size: var(--hop-Avatar-xs-size);
199
+ }
200
+ .Avatar-module__hop-Avatar--sm___dAvAi {
201
+ --size: var(--hop-Avatar-sm-size);
202
+ }
203
+ .Avatar-module__hop-Avatar--md___v2kru {
204
+ --size: var(--hop-Avatar-md-size);
205
+ }
206
+ .Avatar-module__hop-Avatar--lg___4a7C- {
207
+ --size: var(--hop-Avatar-lg-size);
208
+ }
209
+ .Avatar-module__hop-Avatar--xl___GGmZt {
210
+ --size: var(--hop-Avatar-xl-size);
211
+ }
212
+ .Avatar-module__hop-Avatar--2xl___V0vm2 {
213
+ --size: var(--hop-Avatar-2xl-size);
214
+ }
215
+ .Avatar-module__hop-Avatar--decorative-option1___WjAhq {
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___lp7nc {
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___L4QFf {
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___XDAjT {
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___HT6Yj {
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___ID7fC {
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___yDEQt {
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___FKawW {
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___y4zJc {
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___IsFnk[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___ikmZz {
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___N5J5g) {
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___EUFfb {
293
+ box-sizing: border-box;
294
+ }
295
+ .OverlineText-module__hop-OverlineText__text___EUFfb::before,
296
+ .OverlineText-module__hop-OverlineText__text___EUFfb::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___EUFfb::before {
304
+ margin-block-end: var(--bottom-offset);
305
+ }
306
+ .OverlineText-module__hop-OverlineText__text___EUFfb::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___OCCIL {
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___-dKpN {
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___R7NCL {
340
+ --background-color: var(--hop-Badge-secondary-background-color);
341
+ --text-color: var(--hop-Badge-secondary-text-color);
342
+ }
343
+ .Badge-module__hop-Badge___OCCIL[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___gfJWC {
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/Spinner/src/Spinner.module.css/#css-module-data */
358
+ @keyframes Spinner-module__spin___rd-Rj {
359
+ 0% {
360
+ transform: rotate(0deg);
361
+ }
362
+ 100% {
363
+ transform: rotate(360deg);
364
+ }
365
+ }
366
+ .Spinner-module__hop-Spinner___P0jhV {
367
+ --hop-Spinner-border-radius: var(--hop-shape-circle);
368
+ --hop-Spinner-sm-wheel-size: 1rem;
369
+ --hop-Spinner-md-wheel-size: 1.25rem;
370
+ --hop-Spinner-lg-wheel-size: 1.5rem;
371
+ --hop-Spinner-track-width: 0.125rem;
372
+ --hop-Spinner-track-opacity: 0.2;
373
+ --hop-Spinner-track-border: var(--hop-Spinner-track-width) solid currentcolor;
374
+ --hop-Spinner-fill-animation: Spinner-module__spin___rd-Rj .8s infinite linear;
375
+ --hop-Spinner-fill-animation-reduced-motion-duration: 2s;
376
+ --hop-Spinner-fill-border: var(--hop-Spinner-track-width) solid transparent;
377
+ --hop-Spinner-fill-border-inline-start: var(--hop-Spinner-track-width) solid currentcolor;
378
+ --hop-Spinner-label-margin-inline-start: var(--hop-space-inline-sm);
379
+ display: grid;
380
+ grid-template-areas: "spinner label";
381
+ grid-template-columns: min-content auto;
382
+ align-items: center;
383
+ box-sizing: border-box;
384
+ }
385
+ .Spinner-module__hop-Spinner--sm___ZnMZ7 {
386
+ --width: var(--hop-Spinner-sm-wheel-size);
387
+ --height: var(--hop-Spinner-sm-wheel-size);
388
+ }
389
+ .Spinner-module__hop-Spinner--md___7YS0S {
390
+ --width: var(--hop-Spinner-md-wheel-size);
391
+ --height: var(--hop-Spinner-md-wheel-size);
392
+ }
393
+ .Spinner-module__hop-Spinner--lg___0t21N {
394
+ --width: var(--hop-Spinner-lg-wheel-size);
395
+ --height: var(--hop-Spinner-lg-wheel-size);
396
+ }
397
+ .Spinner-module__hop-Spinner__track___iI6Dd {
398
+ grid-area: spinner;
399
+ box-sizing: border-box;
400
+ inline-size: var(--width, var(--hop-Spinner-md-wheel-size));
401
+ block-size: var(--height, var(--hop-Spinner-md-wheel-size));
402
+ opacity: var(--hop-Spinner-track-opacity);
403
+ border: var(--hop-Spinner-track-border);
404
+ border-radius: var(--hop-Spinner-border-radius);
405
+ }
406
+ .Spinner-module__hop-Spinner__fill___BCOFL {
407
+ grid-area: spinner;
408
+ box-sizing: border-box;
409
+ inline-size: var(--width, var(--hop-Spinner-md-wheel-size));
410
+ block-size: var(--height, var(--hop-Spinner-md-wheel-size));
411
+ border: var(--hop-Spinner-fill-border);
412
+ border-inline-start: var(--hop-Spinner-fill-border-inline-start);
413
+ border-radius: var(--hop-Spinner-border-radius);
414
+ animation: var(--hop-Spinner-fill-animation);
415
+ }
416
+ @media (prefers-reduced-motion: reduce) {
417
+ .Spinner-module__hop-Spinner__fill___BCOFL {
418
+ animation-duration: var(--hop-Spinner-fill-animation-reduced-motion-duration);
419
+ }
420
+ }
421
+ .Spinner-module__hop-Spinner__label___fkVwj {
422
+ grid-area: label;
423
+ margin-inline-start: var(--hop-Spinner-label-margin-inline-start);
424
+ }
425
+
426
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/buttons/src/Button.module.css/#css-module-data */
427
+ .Button-module__hop-Button___jX9LE {
428
+ --hop-Button-border-radius: var(--hop-shape-rounded-md);
429
+ --hop-Button-focus-ring-color: var(--hop-primary-border-focus);
430
+ --hop-Button-icon-only-padding: 0;
431
+ --hop-Button-sm-height: 2rem;
432
+ --hop-Button-md-height: 2.5rem;
433
+ --hop-Button-primary-color: var(--hop-primary-text-strong);
434
+ --hop-Button-primary-color-hover: var(--hop-primary-text-strong-hover);
435
+ --hop-Button-primary-color-pressed: var(--hop-primary-text-strong);
436
+ --hop-Button-primary-color-disabled: var(--hop-neutral-text-disabled);
437
+ --hop-Button-primary-background-color: var(--hop-primary-surface-strong);
438
+ --hop-Button-primary-background-color-hover: var(--hop-primary-surface-strong-hover);
439
+ --hop-Button-primary-background-color-pressed: var(--hop-primary-surface-strong-press);
440
+ --hop-Button-primary-background-color-disabled: var(--hop-neutral-surface-disabled);
441
+ --hop-Button-primary-border: 0.0625rem solid var(--hop-Button-primary-background-color);
442
+ --hop-Button-primary-border-hover: 0.0625rem solid var(--hop-Button-primary-background-color-hover);
443
+ --hop-Button-primary-border-pressed: 0.0625rem solid var(--hop-Button-primary-background-color-pressed);
444
+ --hop-Button-primary-border-disabled: 0.0625rem solid var(--hop-Button-primary-background-color-disabled);
445
+ --hop-Button-primary-spinner-color: var(--hop-primary-icon-strong);
446
+ --hop-Button-primary-sm-padding-x: var(--hop-space-inset-sm);
447
+ --hop-Button-primary-sm-padding-y: 0;
448
+ --hop-Button-primary-md-padding-x: var(--hop-space-inset-md);
449
+ --hop-Button-primary-md-padding-y: 0;
450
+ --hop-Button-secondary-color: var(--hop-neutral-text);
451
+ --hop-Button-secondary-color-hover: var(--hop-neutral-text-hover);
452
+ --hop-Button-secondary-color-pressed: var(--hop-neutral-text-press);
453
+ --hop-Button-secondary-color-disabled: var(--hop-neutral-text-disabled);
454
+ --hop-Button-secondary-background-color: var(--hop-neutral-surface);
455
+ --hop-Button-secondary-background-color-hover: var(--hop-neutral-surface-hover);
456
+ --hop-Button-secondary-background-color-pressed: var(--hop-neutral-surface-press);
457
+ --hop-Button-secondary-background-color-disabled: var(--hop-neutral-surface-disabled);
458
+ --hop-Button-secondary-border: 0.0625rem solid var(--hop-neutral-border-strong);
459
+ --hop-Button-secondary-border-hover: 0.0625rem solid var(--hop-neutral-border-strong-hover);
460
+ --hop-Button-secondary-border-pressed: 0.0625rem solid var(--hop-neutral-border-strong);
461
+ --hop-Button-secondary-border-disabled: 0.0625rem solid var(--hop-Button-secondary-background-color-disabled);
462
+ --hop-Button-secondary-spinner-color: var(--hop-neutral-icon);
463
+ --hop-Button-secondary-sm-padding-x: var(--hop-space-inset-sm);
464
+ --hop-Button-secondary-sm-padding-y: 0;
465
+ --hop-Button-secondary-md-padding-x: var(--hop-space-inset-md);
466
+ --hop-Button-secondary-md-padding-y: 0;
467
+ --hop-Button-upsell-color: var(--hop-upsell-text);
468
+ --hop-Button-upsell-color-hover: var(--hop-upsell-text-hover);
469
+ --hop-Button-upsell-color-pressed: var(--hop-upsell-text-press);
470
+ --hop-Button-upsell-color-disabled: var(--hop-neutral-text-disabled);
471
+ --hop-Button-upsell-background-color: var(--hop-upsell-surface);
472
+ --hop-Button-upsell-background-color-hover: var(--hop-upsell-surface-hover);
473
+ --hop-Button-upsell-background-color-pressed: var(--hop-upsell-surface-press);
474
+ --hop-Button-upsell-background-color-disabled: var(--hop-neutral-surface-disabled);
475
+ --hop-Button-upsell-border: 0.0625rem solid var(--hop-Button-upsell-background-color);
476
+ --hop-Button-upsell-border-hover: 0.0625rem solid var(--hop-Button-upsell-background-color-hover);
477
+ --hop-Button-upsell-border-pressed: 0.0625rem solid var(--hop-Button-upsell-background-color-pressed);
478
+ --hop-Button-upsell-border-disabled: 0.0625rem solid var(--hop-Button-upsell-background-color-disabled);
479
+ --hop-Button-upsell-spinner-color: var(--hop-upsell-icon);
480
+ --hop-Button-upsell-sm-padding-x: var(--hop-space-inset-sm);
481
+ --hop-Button-upsell-sm-padding-y: 0;
482
+ --hop-Button-upsell-md-padding-x: var(--hop-space-inset-md);
483
+ --hop-Button-upsell-md-padding-y: 0;
484
+ --hop-Button-danger-color: var(--hop-danger-text-strong);
485
+ --hop-Button-danger-color-hover: var(--hop-danger-text-strong-hover);
486
+ --hop-Button-danger-color-pressed: var(--hop-danger-text-strong-hover);
487
+ --hop-Button-danger-color-disabled: var(--hop-neutral-text-disabled);
488
+ --hop-Button-danger-background-color: var(--hop-danger-surface-strong);
489
+ --hop-Button-danger-background-color-hover: var(--hop-danger-surface-strong-hover);
490
+ --hop-Button-danger-background-color-pressed: var(--hop-danger-surface-press);
491
+ --hop-Button-danger-background-color-disabled: var(--hop-neutral-surface-disabled);
492
+ --hop-Button-danger-border: 0.0625rem solid var(--hop-Button-danger-background-color);
493
+ --hop-Button-danger-border-hover: 0.0625rem solid var(--hop-Button-danger-background-color-hover);
494
+ --hop-Button-danger-border-pressed: 0.0625rem solid var(--hop-Button-danger-background-color-pressed);
495
+ --hop-Button-danger-border-disabled: 0.0625rem solid var(--hop-Button-danger-background-color-disabled);
496
+ --hop-Button-danger-spinner-color: var(--hop-primary-icon-strong);
497
+ --hop-Button-danger-sm-padding-x: var(--hop-space-inset-sm);
498
+ --hop-Button-danger-sm-padding-y: 0;
499
+ --hop-Button-danger-md-padding-x: var(--hop-space-inset-md);
500
+ --hop-Button-danger-md-padding-y: 0;
501
+ --hop-Button-ghost-primary-color: var(--hop-primary-text);
502
+ --hop-Button-ghost-primary-color-hover: var(--hop-primary-text-hover);
503
+ --hop-Button-ghost-primary-color-pressed: var(--hop-primary-text-press);
504
+ --hop-Button-ghost-primary-color-disabled: var(--hop-neutral-text-disabled);
505
+ --hop-Button-ghost-primary-background-color: transparent;
506
+ --hop-Button-ghost-primary-background-color-hover: var(--hop-neutral-surface-hover);
507
+ --hop-Button-ghost-primary-background-color-pressed: var(--hop-primary-surface-weak-press);
508
+ --hop-Button-ghost-primary-background-color-disabled: transparent;
509
+ --hop-Button-ghost-primary-border: 0.0625rem solid var(--hop-Button-ghost-primary-background-color);
510
+ --hop-Button-ghost-primary-border-hover: 0.0625rem solid var(--hop-Button-ghost-primary-background-color-hover);
511
+ --hop-Button-ghost-primary-border-pressed: 0.0625rem solid var(--hop-Button-ghost-primary-background-color-pressed);
512
+ --hop-Button-ghost-primary-border-disabled: 0.0625rem solid var(--hop-Button-ghost-primary-background-color-disabled);
513
+ --hop-Button-ghost-primary-spinner-color: var(--hop-neutral-icon);
514
+ --hop-Button-ghost-primary-sm-padding-x: var(--hop-space-inset-xs);
515
+ --hop-Button-ghost-primary-sm-padding-y: 0;
516
+ --hop-Button-ghost-primary-md-padding-x: var(--hop-space-inset-sm);
517
+ --hop-Button-ghost-primary-md-padding-y: 0;
518
+ --hop-Button-ghost-secondary-color: var(--hop-neutral-text-weak);
519
+ --hop-Button-ghost-secondary-color-hover: var(--hop-neutral-text-weak-hover);
520
+ --hop-Button-ghost-secondary-color-pressed: var(--hop-neutral-text-weak-press);
521
+ --hop-Button-ghost-secondary-color-disabled: var(--hop-neutral-text-disabled);
522
+ --hop-Button-ghost-secondary-background-color: transparent;
523
+ --hop-Button-ghost-secondary-background-color-hover: var(--hop-neutral-surface-hover);
524
+ --hop-Button-ghost-secondary-background-color-pressed: var(--hop-neutral-surface-press);
525
+ --hop-Button-ghost-secondary-background-color-disabled: transparent;
526
+ --hop-Button-ghost-secondary-border: 0.0625rem solid var(--hop-Button-ghost-secondary-background-color);
527
+ --hop-Button-ghost-secondary-border-hover: 0.0625rem solid var(--hop-Button-ghost-secondary-background-color-hover);
528
+ --hop-Button-ghost-secondary-border-pressed: 0.0625rem solid var(--hop-Button-ghost-secondary-background-color-pressed);
529
+ --hop-Button-ghost-secondary-border-disabled: 0.0625rem solid var(--hop-Button-ghost-secondary-background-color-disabled);
530
+ --hop-Button-ghost-secondary-spinner-color: var(--hop-neutral-icon);
531
+ --hop-Button-ghost-secondary-sm-padding-x: var(--hop-space-inset-xs);
532
+ --hop-Button-ghost-secondary-sm-padding-y: 0;
533
+ --hop-Button-ghost-secondary-md-padding-x: var(--hop-space-inset-sm);
534
+ --hop-Button-ghost-secondary-md-padding-y: 0;
535
+ --hop-Button-ghost-danger-color: var(--hop-danger-text-weak);
536
+ --hop-Button-ghost-danger-color-hover: var(--hop-danger-text-hover);
537
+ --hop-Button-ghost-danger-color-pressed: var(--hop-danger-text-press);
538
+ --hop-Button-ghost-danger-color-disabled: var(--hop-neutral-text-disabled);
539
+ --hop-Button-ghost-danger-background-color: transparent;
540
+ --hop-Button-ghost-danger-background-color-hover: var(--hop-neutral-surface-hover);
541
+ --hop-Button-ghost-danger-background-color-pressed: var(--hop-danger-surface-weak-press);
542
+ --hop-Button-ghost-danger-background-color-disabled: transparent;
543
+ --hop-Button-ghost-danger-border: 0.0625rem solid var(--hop-Button-ghost-danger-background-color);
544
+ --hop-Button-ghost-danger-border-hover: 0.0625rem solid var(--hop-Button-ghost-danger-background-color-hover);
545
+ --hop-Button-ghost-danger-border-pressed: 0.0625rem solid var(--hop-Button-ghost-danger-background-color-pressed);
546
+ --hop-Button-ghost-danger-border-disabled: 0.0625rem solid var(--hop-Button-ghost-danger-background-color-disabled);
547
+ --hop-Button-ghost-danger-spinner-color: var(--hop-neutral-icon);
548
+ --hop-Button-ghost-danger-sm-padding-x: var(--hop-space-inset-xs);
549
+ --hop-Button-ghost-danger-sm-padding-y: 0;
550
+ --hop-Button-ghost-danger-md-padding-x: var(--hop-space-inset-sm);
551
+ --hop-Button-ghost-danger-md-padding-y: 0;
552
+ --inline-size: max-content;
553
+ --block-size: var(--hop-Button-md-height);
554
+ --background-color: var(--hop-primary-surface-strong);
555
+ --color: var(--hop-primary-text-strong);
556
+ --spinner: var(--hop-primary-icon-strong);
557
+ --border: 0;
558
+ --padding-inline: 0;
559
+ --padding-block: 0;
560
+ cursor: pointer;
561
+ position: relative;
562
+ overflow: hidden;
563
+ display: grid;
564
+ grid-template-areas: "start-icon content end-icon";
565
+ grid-template-columns: auto min-content auto;
566
+ column-gap: var(--hop-space-inline-xs);
567
+ align-items: center;
568
+ box-sizing: border-box;
569
+ inline-size: var(--inline-size);
570
+ block-size: var(--block-size);
571
+ padding-block: var(--padding-block);
572
+ padding-inline: var(--padding-inline);
573
+ color: var(--color);
574
+ text-decoration: none;
575
+ white-space: nowrap;
576
+ background-color: var(--background-color);
577
+ border: var(--border);
578
+ border-radius: var(--hop-Button-border-radius);
579
+ outline: none;
580
+ outline-offset: 0.125rem;
581
+ transition:
582
+ color var(--hop-easing-duration-2) var(--hop-easing-productive),
583
+ background-color var(--hop-easing-duration-2) var(--hop-easing-productive),
584
+ border var(--hop-easing-duration-2) var(--hop-easing-productive);
585
+ }
586
+ .Button-module__hop-Button___jX9LE[data-focus-visible] {
587
+ outline: 0.125rem solid var(--hop-Button-focus-ring-color);
588
+ }
589
+ .Button-module__hop-Button--icon-only___71t1L {
590
+ --padding-block: var(--hop-Button-icon-only-padding);
591
+ --padding-inline: var(--hop-Button-icon-only-padding);
592
+ column-gap: 0;
593
+ aspect-ratio: 1;
594
+ }
595
+ .Button-module__hop-Button___jX9LE[data-disabled],
596
+ .Button-module__hop-Button___jX9LE[data-loading] {
597
+ cursor: not-allowed;
598
+ }
599
+ .Button-module__hop-Button--fluid___SYpjM {
600
+ --inline-size: 100%;
601
+ }
602
+ .Button-module__hop-Button--sm___wPAMa {
603
+ --block-size: var(--hop-Button-sm-height);
604
+ }
605
+ .Button-module__hop-Button--primary___BvniH.Button-module__hop-Button--sm___wPAMa:not(.Button-module__hop-Button--icon-only___71t1L) {
606
+ --padding-inline: var(--hop-Button-primary-sm-padding-x);
607
+ --padding-block: var(--hop-Button-primary-sm-padding-y);
608
+ }
609
+ .Button-module__hop-Button--primary___BvniH.Button-module__hop-Button--md___B9RAI:not(.Button-module__hop-Button--icon-only___71t1L) {
610
+ --padding-inline: var(--hop-Button-primary-md-padding-x);
611
+ --padding-block: var(--hop-Button-primary-md-padding-y);
612
+ }
613
+ .Button-module__hop-Button--secondary___lCKXs.Button-module__hop-Button--md___B9RAI:not(.Button-module__hop-Button--icon-only___71t1L) {
614
+ --padding-inline: var(--hop-Button-secondary-md-padding-x);
615
+ --padding-block: var(--hop-Button-secondary-md-padding-y);
616
+ }
617
+ .Button-module__hop-Button--secondary___lCKXs.Button-module__hop-Button--sm___wPAMa:not(.Button-module__hop-Button--icon-only___71t1L) {
618
+ --padding-inline: var(--hop-Button-secondary-sm-padding-x);
619
+ --padding-block: var(--hop-Button-secondary-sm-padding-y);
620
+ }
621
+ .Button-module__hop-Button--upsell___NyM1V.Button-module__hop-Button--md___B9RAI:not(.Button-module__hop-Button--icon-only___71t1L) {
622
+ --padding-inline: var(--hop-Button-upsell-md-padding-x);
623
+ --padding-block: var(--hop-Button-upsell-md-padding-y);
624
+ }
625
+ .Button-module__hop-Button--upsell___NyM1V.Button-module__hop-Button--sm___wPAMa:not(.Button-module__hop-Button--icon-only___71t1L) {
626
+ --padding-inline: var(--hop-Button-upsell-sm-padding-x);
627
+ --padding-block: var(--hop-Button-upsell-sm-padding-y);
628
+ }
629
+ .Button-module__hop-Button--danger___k-o-0.Button-module__hop-Button--md___B9RAI:not(.Button-module__hop-Button--icon-only___71t1L) {
630
+ --padding-inline: var(--hop-Button-danger-md-padding-x);
631
+ --padding-block: var(--hop-Button-danger-md-padding-y);
632
+ }
633
+ .Button-module__hop-Button--danger___k-o-0.Button-module__hop-Button--sm___wPAMa:not(.Button-module__hop-Button--icon-only___71t1L) {
634
+ --padding-inline: var(--hop-Button-danger-sm-padding-x);
635
+ --padding-block: var(--hop-Button-danger-sm-padding-y);
636
+ }
637
+ .Button-module__hop-Button--ghost-danger___omDnE.Button-module__hop-Button--md___B9RAI:not(.Button-module__hop-Button--icon-only___71t1L) {
638
+ --padding-inline: var(--hop-Button-ghost-danger-md-padding-x);
639
+ --padding-block: var(--hop-Button-ghost-danger-md-padding-y);
640
+ }
641
+ .Button-module__hop-Button--ghost-danger___omDnE.Button-module__hop-Button--sm___wPAMa:not(.Button-module__hop-Button--icon-only___71t1L) {
642
+ --padding-inline: var(--hop-Button-ghost-danger-sm-padding-x);
643
+ --padding-block: var(--hop-Button-ghost-danger-sm-padding-y);
644
+ }
645
+ .Button-module__hop-Button--ghost-secondary___OFQHT.Button-module__hop-Button--md___B9RAI:not(.Button-module__hop-Button--icon-only___71t1L) {
646
+ --padding-inline: var(--hop-Button-ghost-secondary-md-padding-x);
647
+ --padding-block: var(--hop-Button-ghost-secondary-md-padding-y);
648
+ }
649
+ .Button-module__hop-Button--ghost-secondary___OFQHT.Button-module__hop-Button--sm___wPAMa:not(.Button-module__hop-Button--icon-only___71t1L) {
650
+ --padding-inline: var(--hop-Button-ghost-secondary-sm-padding-x);
651
+ --padding-block: var(--hop-Button-ghost-secondary-sm-padding-y);
652
+ }
653
+ .Button-module__hop-Button--ghost-primary___ceb7C.Button-module__hop-Button--md___B9RAI:not(.Button-module__hop-Button--icon-only___71t1L) {
654
+ --padding-inline: var(--hop-Button-ghost-primary-md-padding-x);
655
+ --padding-block: var(--hop-Button-ghost-primary-md-padding-y);
656
+ }
657
+ .Button-module__hop-Button--ghost-primary___ceb7C.Button-module__hop-Button--sm___wPAMa:not(.Button-module__hop-Button--icon-only___71t1L) {
658
+ --padding-inline: var(--hop-Button-ghost-primary-sm-padding-x);
659
+ --padding-block: var(--hop-Button-ghost-primary-sm-padding-y);
660
+ }
661
+ .Button-module__hop-Button--primary___BvniH {
662
+ --background-color: var(--hop-Button-primary-background-color);
663
+ --color: var(--hop-Button-primary-color);
664
+ --border: var(--hop-Button-primary-border);
665
+ --spinner-color: var(--hop-Button-primary-spinner-color);
666
+ }
667
+ .Button-module__hop-Button--primary___BvniH[data-disabled]:not([data-loading]) {
668
+ --background-color: var(--hop-Button-primary-background-color-disabled);
669
+ --color: var(--hop-Button-primary-color-disabled);
670
+ --border: var(--hop-Button-primary-border-disabled);
671
+ }
672
+ .Button-module__hop-Button--primary___BvniH[data-hovered]:not([data-disabled], [data-loading]),
673
+ .Button-module__hop-Button--primary___BvniH[data-focus-visible]:not([data-disabled], [data-loading]) {
674
+ --background-color: var(--hop-Button-primary-background-color-hover);
675
+ --color: var(--hop-Button-primary-color-hover);
676
+ --border: var(--hop-Button-primary-border-hover);
677
+ }
678
+ .Button-module__hop-Button--primary___BvniH[data-pressed]:not([data-loading]) {
679
+ --background-color: var(--hop-Button-primary-background-color-pressed);
680
+ --color: var(--hop-Button-primary-color-pressed);
681
+ --border: var(--hop-Button-primary-border-pressed);
682
+ }
683
+ .Button-module__hop-Button--secondary___lCKXs {
684
+ --background-color: var(--hop-Button-secondary-background-color);
685
+ --color: var(--hop-Button-secondary-color);
686
+ --border: var(--hop-Button-secondary-border);
687
+ --spinner-color: var(--hop-Button-secondary-spinner-color);
688
+ }
689
+ .Button-module__hop-Button--secondary___lCKXs[data-disabled]:not([data-loading]) {
690
+ --background-color: var(--hop-Button-secondary-background-color-disabled);
691
+ --color: var(--hop-Button-secondary-color-disabled);
692
+ --border: var(--hop-Button-secondary-border-disabled);
693
+ }
694
+ .Button-module__hop-Button--secondary___lCKXs[data-hovered]:not([data-disabled], [data-loading]),
695
+ .Button-module__hop-Button--secondary___lCKXs[data-focus-visible]:not([data-disabled], [data-loading]) {
696
+ --background-color: var(--hop-Button-secondary-background-color-hover);
697
+ --color: var(--hop-Button-secondary-color-hover);
698
+ --border: var(--hop-Button-secondary-border-hover);
699
+ }
700
+ .Button-module__hop-Button--secondary___lCKXs[data-pressed]:not([data-loading]) {
701
+ --background-color: var(--hop-Button-secondary-background-color-pressed);
702
+ --color: var(--hop-Button-secondary-color-pressed);
703
+ --border: var(--hop-Button-secondary-border-pressed);
704
+ }
705
+ .Button-module__hop-Button--upsell___NyM1V {
706
+ --background-color: var(--hop-Button-upsell-background-color);
707
+ --color: var(--hop-Button-upsell-color);
708
+ --border: var(--hop-Button-upsell-border);
709
+ --spinner-color: var(--hop-Button-upsell-spinner-color);
710
+ }
711
+ .Button-module__hop-Button--upsell___NyM1V[data-disabled]:not([data-loading]) {
712
+ --background-color: var(--hop-Button-upsell-background-color-disabled);
713
+ --color: var(--hop-Button-upsell-color-disabled);
714
+ --border: var(--hop-Button-upsell-border-disabled);
715
+ }
716
+ .Button-module__hop-Button--upsell___NyM1V[data-hovered]:not([data-disabled], [data-loading]),
717
+ .Button-module__hop-Button--upsell___NyM1V[data-focus-visible]:not([data-disabled], [data-loading]) {
718
+ --background-color: var(--hop-Button-upsell-background-color-hover);
719
+ --color: var(--hop-Button-upsell-color-hover);
720
+ --border: var(--hop-Button-upsell-border-hover);
721
+ }
722
+ .Button-module__hop-Button--upsell___NyM1V[data-pressed]:not([data-loading]) {
723
+ --background-color: var(--hop-Button-upsell-background-color-pressed);
724
+ --color: var(--hop-Button-upsell-color-pressed);
725
+ --border: var(--hop-Button-upsell-border-pressed);
726
+ }
727
+ .Button-module__hop-Button--danger___k-o-0 {
728
+ --background-color: var(--hop-Button-danger-background-color);
729
+ --color: var(--hop-Button-danger-color);
730
+ --border: var(--hop-Button-danger-border);
731
+ --spinner-color: var(--hop-Button-danger-spinner-color);
732
+ }
733
+ .Button-module__hop-Button--danger___k-o-0[data-disabled]:not([data-loading]) {
734
+ --background-color: var(--hop-Button-danger-background-color-disabled);
735
+ --color: var(--hop-Button-danger-color-disabled);
736
+ --border: var(--hop-Button-danger-border-disabled);
737
+ }
738
+ .Button-module__hop-Button--danger___k-o-0[data-hovered]:not([data-disabled], [data-loading]),
739
+ .Button-module__hop-Button--danger___k-o-0[data-focus-visible]:not([data-disabled], [data-loading]) {
740
+ --background-color: var(--hop-Button-danger-background-color-hover);
741
+ --color: var(--hop-Button-danger-color-hover);
742
+ --border: var(--hop-Button-danger-border-hover);
743
+ }
744
+ .Button-module__hop-Button--danger___k-o-0[data-pressed]:not([data-loading]) {
745
+ --background-color: var(--hop-Button-danger-background-color-pressed);
746
+ --color: var(--hop-Button-danger-color-pressed);
747
+ --border: var(--hop-Button-danger-border-pressed);
748
+ }
749
+ .Button-module__hop-Button--ghost-primary___ceb7C {
750
+ --background-color: var(--hop-Button-ghost-primary-background-color);
751
+ --color: var(--hop-Button-ghost-primary-color);
752
+ --border: var(--hop-Button-ghost-primary-border);
753
+ --spinner-color: var(--hop-Button-ghost-primary-spinner-color);
754
+ }
755
+ .Button-module__hop-Button--ghost-primary___ceb7C[data-disabled]:not([data-loading]) {
756
+ --background-color: var(--hop-Button-ghost-primary-background-color-disabled);
757
+ --color: var(--hop-Button-ghost-primary-color-disabled);
758
+ --border: var(--hop-Button-ghost-primary-border-disabled);
759
+ }
760
+ .Button-module__hop-Button--ghost-primary___ceb7C[data-hovered]:not([data-disabled], [data-loading]),
761
+ .Button-module__hop-Button--ghost-primary___ceb7C[data-focus-visible]:not([data-disabled], [data-loading]) {
762
+ --background-color: var(--hop-Button-ghost-primary-background-color-hover);
763
+ --color: var(--hop-Button-ghost-primary-color-hover);
764
+ --border: var(--hop-Button-ghost-primary-border-hover);
765
+ }
766
+ .Button-module__hop-Button--ghost-primary___ceb7C[data-pressed]:not([data-loading]) {
767
+ --background-color: var(--hop-Button-ghost-primary-background-color-pressed);
768
+ --color: var(--hop-Button-ghost-primary-color-pressed);
769
+ --border: var(--hop-Button-ghost-primary-border-pressed);
770
+ }
771
+ .Button-module__hop-Button--ghost-secondary___OFQHT {
772
+ --background-color: var(--hop-Button-ghost-secondary-background-color);
773
+ --color: var(--hop-Button-ghost-secondary-color);
774
+ --border: var(--hop-Button-ghost-secondary-border);
775
+ --spinner-color: var(--hop-Button-ghost-secondary-spinner-color);
776
+ }
777
+ .Button-module__hop-Button--ghost-secondary___OFQHT[data-disabled]:not([data-loading]) {
778
+ --background-color: var(--hop-Button-ghost-secondary-background-color-disabled);
779
+ --color: var(--hop-Button-ghost-secondary-color-disabled);
780
+ --border: var(--hop-Button-ghost-secondary-border-disabled);
781
+ }
782
+ .Button-module__hop-Button--ghost-secondary___OFQHT[data-hovered]:not([data-disabled], [data-loading]),
783
+ .Button-module__hop-Button--ghost-secondary___OFQHT[data-focus-visible]:not([data-disabled], [data-loading]) {
784
+ --background-color: var(--hop-Button-ghost-secondary-background-color-hover);
785
+ --color: var(--hop-Button-ghost-secondary-color-hover);
786
+ --border: var(--hop-Button-ghost-secondary-border-hover);
787
+ }
788
+ .Button-module__hop-Button--ghost-secondary___OFQHT[data-pressed]:not([data-loading]) {
789
+ --background-color: var(--hop-Button-ghost-secondary-background-color-pressed);
790
+ --color: var(--hop-Button-ghost-secondary-color-pressed);
791
+ --border: var(--hop-Button-ghost-secondary-border-pressed);
792
+ }
793
+ .Button-module__hop-Button--ghost-danger___omDnE {
794
+ --background-color: var(--hop-Button-ghost-danger-background-color);
795
+ --color: var(--hop-Button-ghost-danger-color);
796
+ --border: var(--hop-Button-ghost-danger-border);
797
+ --spinner-color: var(--hop-Button-ghost-danger-spinner-color);
798
+ }
799
+ .Button-module__hop-Button--ghost-danger___omDnE[data-disabled]:not([data-loading]) {
800
+ --background-color: var(--hop-Button-ghost-danger-background-color-disabled);
801
+ --color: var(--hop-Button-ghost-danger-color-disabled);
802
+ --border: var(--hop-Button-ghost-danger-border-disabled);
803
+ }
804
+ .Button-module__hop-Button--ghost-danger___omDnE[data-hovered]:not([data-disabled], [data-loading]),
805
+ .Button-module__hop-Button--ghost-danger___omDnE[data-focus-visible]:not([data-disabled], [data-loading]) {
806
+ --background-color: var(--hop-Button-ghost-danger-background-color-hover);
807
+ --color: var(--hop-Button-ghost-danger-color-hover);
808
+ --border: var(--hop-Button-ghost-danger-border-hover);
809
+ }
810
+ .Button-module__hop-Button--ghost-danger___omDnE[data-pressed]:not([data-loading]) {
811
+ --background-color: var(--hop-Button-ghost-danger-background-color-pressed);
812
+ --color: var(--hop-Button-ghost-danger-color-pressed);
813
+ --border: var(--hop-Button-ghost-danger-border-pressed);
814
+ }
815
+ .Button-module__hop-Button__Spinner___kILk7 {
816
+ position: absolute;
817
+ justify-self: center;
818
+ color: var(--spinner-color);
819
+ }
820
+ .Button-module__hop-Button__icon___6lA2X,
821
+ .Button-module__hop-Button__icon-list___N8k0v {
822
+ grid-area: start-icon;
823
+ justify-self: end;
824
+ }
825
+ .Button-module__hop-Button__text___Rgagt {
826
+ user-select: none;
827
+ overflow: visible;
828
+ grid-area: content;
829
+ font-weight: var(--hop-font-weight-505);
830
+ text-wrap: nowrap;
831
+ }
832
+ .Button-module__hop-Button--ghost-primary___ceb7C[data-hovered]:not([data-loading]) .Button-module__hop-Button__text___Rgagt,
833
+ .Button-module__hop-Button--ghost-secondary___OFQHT[data-hovered]:not([data-loading]) .Button-module__hop-Button__text___Rgagt,
834
+ .Button-module__hop-Button--ghost-danger___omDnE[data-hovered]:not([data-loading]) .Button-module__hop-Button__text___Rgagt,
835
+ .Button-module__hop-Button--ghost-primary___ceb7C[data-pressed]:not([data-loading]) .Button-module__hop-Button__text___Rgagt,
836
+ .Button-module__hop-Button--ghost-secondary___OFQHT[data-pressed]:not([data-loading]) .Button-module__hop-Button__text___Rgagt,
837
+ .Button-module__hop-Button--ghost-danger___omDnE[data-pressed]:not([data-loading]) .Button-module__hop-Button__text___Rgagt,
838
+ .Button-module__hop-Button--ghost-primary___ceb7C[data-focus-visible]:not([data-loading]) .Button-module__hop-Button__text___Rgagt,
839
+ .Button-module__hop-Button--ghost-secondary___OFQHT[data-focus-visible]:not([data-loading]) .Button-module__hop-Button__text___Rgagt,
840
+ .Button-module__hop-Button--ghost-danger___omDnE[data-focus-visible]:not([data-loading]) .Button-module__hop-Button__text___Rgagt {
841
+ text-decoration: underline;
842
+ text-underline-offset: 0.125rem;
843
+ }
844
+ .Button-module__hop-Button__end-icon___M1yPt,
845
+ .Button-module__hop-Button__end-icon-list___E8IaO {
846
+ grid-area: end-icon;
847
+ }
848
+ .Button-module__hop-Button___jX9LE .Button-module__hop-Button__icon-list___N8k0v,
849
+ .Button-module__hop-Button___jX9LE .Button-module__hop-Button__end-icon-list___E8IaO {
850
+ flex-wrap: nowrap;
851
+ }
852
+ .Button-module__hop-Button___jX9LE[data-loading] > *:not(.Button-module__hop-Button__Spinner___kILk7) {
853
+ opacity: 0;
854
+ }
855
+
856
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/buttons/src/ButtonGroup.module.css/#css-module-data */
857
+ .ButtonGroup-module__hop-ButtonGroup___MX7aG {
858
+ display: inline-flex;
859
+ flex-wrap: nowrap;
860
+ gap: var(--hop-space-inline-md);
861
+ }
862
+ .ButtonGroup-module__hop-ButtonGroup--horizontal___7TWF1 {
863
+ justify-content: center;
864
+ }
865
+ .ButtonGroup-module__hop-ButtonGroup--vertical___61uoU {
866
+ flex-direction: column;
867
+ gap: var(--hop-space-stack-md);
868
+ align-items: center;
869
+ }
870
+ .ButtonGroup-module__hop-ButtonGroup--start___QEKHx.ButtonGroup-module__hop-ButtonGroup--vertical___61uoU {
871
+ align-items: flex-start;
872
+ }
873
+ .ButtonGroup-module__hop-ButtonGroup--center___ocgo8.ButtonGroup-module__hop-ButtonGroup--vertical___61uoU {
874
+ align-items: center;
875
+ }
876
+ .ButtonGroup-module__hop-ButtonGroup--end___2BNou.ButtonGroup-module__hop-ButtonGroup--vertical___61uoU {
877
+ align-items: flex-end;
878
+ }
879
+ .ButtonGroup-module__hop-ButtonGroup--start___QEKHx.ButtonGroup-module__hop-ButtonGroup--horizontal___7TWF1 {
880
+ justify-content: flex-start;
881
+ }
882
+ .ButtonGroup-module__hop-ButtonGroup--center___ocgo8.ButtonGroup-module__hop-ButtonGroup--horizontal___7TWF1 {
883
+ justify-content: center;
884
+ }
885
+ .ButtonGroup-module__hop-ButtonGroup--end___2BNou.ButtonGroup-module__hop-ButtonGroup--horizontal___7TWF1 {
886
+ justify-content: flex-end;
887
+ }
888
+ .ButtonGroup-module__hop-ButtonGroup--wrap___aW16k {
889
+ flex-wrap: wrap;
890
+ }
891
+ .ButtonGroup-module__hop-ButtonGroup--fluid___FZLER {
892
+ inline-size: 100%;
893
+ }
894
+
895
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/buttons/src/EmbeddedButton.module.css/#css-module-data */
896
+ .EmbeddedButton-module__hop-EmbeddedButton___BR2tE {
897
+ --hop-EmbeddedButton-border-radius: var(--hop-shape-rounded-md);
898
+ --hop-EmbeddedButton-focus-ring-color: var(--hop-primary-border-focus);
899
+ --hop-EmbeddedButton-effect-border-radius: var(--hop-shape-circle);
900
+ --hop-EmbeddedButton-md-height: 1.5rem;
901
+ --hop-EmbeddedButton-md-width: 1.5rem;
902
+ --hop-EmbeddedButton-md-effect-height: 1rem;
903
+ --hop-EmbeddedButton-md-effect-width: 1rem;
904
+ --hop-EmbeddedButton-lg-height: 1.5rem;
905
+ --hop-EmbeddedButton-lg-width: 1.5rem;
906
+ --hop-EmbeddedButton-lg-effect-height: 1.5rem;
907
+ --hop-EmbeddedButton-lg-effect-width: 1.5rem;
908
+ --hop-EmbeddedButton-neutral-color: var(--hop-neutral-icon-weak);
909
+ --hop-EmbeddedButton-neutral-color-hovered: var(--hop-neutral-icon-weak-hover);
910
+ --hop-EmbeddedButton-neutral-color-focused: var(--hop-neutral-icon-weak-hover);
911
+ --hop-EmbeddedButton-neutral-color-pressed: var(--hop-neutral-icon-weak-press);
912
+ --hop-EmbeddedButton-neutral-color-disabled: var(--hop-neutral-icon-disabled);
913
+ --hop-EmbeddedButton-neutral-effect-background-color: transparent;
914
+ --hop-EmbeddedButton-neutral-effect-background-color-hovered: var(--hop-neutral-surface-weak-hover);
915
+ --hop-EmbeddedButton-neutral-effect-background-color-focused: var(--hop-neutral-surface-weak-hover);
916
+ --hop-EmbeddedButton-neutral-effect-background-color-pressed: var(--hop-neutral-surface-weak-press);
917
+ --hop-EmbeddedButton-neutral-effect-background-color-disabled: transparent;
918
+ --hop-EmbeddedButton-subdued-color: var(--hop-neutral-icon-weak);
919
+ --hop-EmbeddedButton-subdued-color-hovered: var(--hop-neutral-icon-weak-hover);
920
+ --hop-EmbeddedButton-subdued-color-focused: var(--hop-neutral-icon-weak-hover);
921
+ --hop-EmbeddedButton-subdued-color-pressed: var(--hop-neutral-icon-weak-press);
922
+ --hop-EmbeddedButton-subdued-color-disabled: var(--hop-neutral-icon-disabled);
923
+ --hop-EmbeddedButton-subdued-effect-background-color: transparent;
924
+ --hop-EmbeddedButton-subdued-effect-background-color-hovered: var(--hop-neutral-surface-weak-hover);
925
+ --hop-EmbeddedButton-subdued-effect-background-color-focused: var(--hop-neutral-surface-weak-hover);
926
+ --hop-EmbeddedButton-subdued-effect-background-color-pressed: var(--hop-neutral-surface-weak-press);
927
+ --hop-EmbeddedButton-subdued-effect-background-color-disabled: transparent;
928
+ --hop-EmbeddedButton-progress-color: var(--hop-status-progress-icon);
929
+ --hop-EmbeddedButton-progress-color-hovered: var(--hop-status-progress-icon-hover);
930
+ --hop-EmbeddedButton-progress-color-focused: var(--hop-status-progress-icon-hover);
931
+ --hop-EmbeddedButton-progress-color-pressed: var(--hop-status-progress-icon-press);
932
+ --hop-EmbeddedButton-progress-color-disabled: var(--hop-status-progress-icon-disabled);
933
+ --hop-EmbeddedButton-progress-effect-background-color: transparent;
934
+ --hop-EmbeddedButton-progress-effect-background-color-hovered: var(--hop-status-progress-surface-hover);
935
+ --hop-EmbeddedButton-progress-effect-background-color-focused: var(--hop-status-progress-surface-hover);
936
+ --hop-EmbeddedButton-progress-effect-background-color-pressed: var(--hop-status-progress-surface-press);
937
+ --hop-EmbeddedButton-progress-effect-background-color-disabled: transparent;
938
+ --hop-EmbeddedButton-positive-color: var(--hop-status-positive-icon);
939
+ --hop-EmbeddedButton-positive-color-hovered: var(--hop-status-positive-icon-hover);
940
+ --hop-EmbeddedButton-positive-color-focused: var(--hop-status-positive-icon-hover);
941
+ --hop-EmbeddedButton-positive-color-pressed: var(--hop-status-positive-icon-press);
942
+ --hop-EmbeddedButton-positive-color-disabled: var(--hop-status-positive-icon-disabled);
943
+ --hop-EmbeddedButton-positive-effect-background-color: transparent;
944
+ --hop-EmbeddedButton-positive-effect-background-color-hovered: var(--hop-status-positive-surface-hover);
945
+ --hop-EmbeddedButton-positive-effect-background-color-focused: var(--hop-status-positive-surface-hover);
946
+ --hop-EmbeddedButton-positive-effect-background-color-pressed: var(--hop-status-positive-surface-press);
947
+ --hop-EmbeddedButton-positive-effect-background-color-disabled: transparent;
948
+ --hop-EmbeddedButton-caution-color: var(--hop-status-caution-icon);
949
+ --hop-EmbeddedButton-caution-color-hovered: var(--hop-status-caution-icon-hover);
950
+ --hop-EmbeddedButton-caution-color-focused: var(--hop-status-caution-icon-hover);
951
+ --hop-EmbeddedButton-caution-color-pressed: var(--hop-status-caution-icon-press);
952
+ --hop-EmbeddedButton-caution-color-disabled: var(--hop-status-caution-icon-disabled);
953
+ --hop-EmbeddedButton-caution-effect-background-color: transparent;
954
+ --hop-EmbeddedButton-caution-effect-background-color-hovered: var(--hop-status-caution-surface-hover);
955
+ --hop-EmbeddedButton-caution-effect-background-color-focused: var(--hop-status-caution-surface-hover);
956
+ --hop-EmbeddedButton-caution-effect-background-color-pressed: var(--hop-status-caution-surface-press);
957
+ --hop-EmbeddedButton-caution-effect-background-color-disabled: transparent;
958
+ --hop-EmbeddedButton-negative-color: var(--hop-status-negative-icon);
959
+ --hop-EmbeddedButton-negative-color-hovered: var(--hop-status-negative-icon-hover);
960
+ --hop-EmbeddedButton-negative-color-focused: var(--hop-status-negative-icon-hover);
961
+ --hop-EmbeddedButton-negative-color-pressed: var(--hop-status-negative-icon-press);
962
+ --hop-EmbeddedButton-negative-color-disabled: var(--hop-status-negative-icon-disabled);
963
+ --hop-EmbeddedButton-negative-effect-background-color: transparent;
964
+ --hop-EmbeddedButton-negative-effect-background-color-hovered: var(--hop-status-negative-surface-hover);
965
+ --hop-EmbeddedButton-negative-effect-background-color-focused: var(--hop-status-negative-surface-hover);
966
+ --hop-EmbeddedButton-negative-effect-background-color-pressed: var(--hop-status-negative-surface-press);
967
+ --hop-EmbeddedButton-negative-effect-background-color-disabled: transparent;
968
+ --hop-EmbeddedButton-option1-color: var(--hop-status-option1-icon);
969
+ --hop-EmbeddedButton-option1-color-hovered: var(--hop-status-option1-icon-hover);
970
+ --hop-EmbeddedButton-option1-color-focused: var(--hop-status-option1-icon-hover);
971
+ --hop-EmbeddedButton-option1-color-pressed: var(--hop-status-option1-icon-press);
972
+ --hop-EmbeddedButton-option1-color-disabled: var(--hop-status-option1-icon-disabled);
973
+ --hop-EmbeddedButton-option1-effect-background-color: transparent;
974
+ --hop-EmbeddedButton-option1-effect-background-color-hovered: var(--hop-status-option1-surface-hover);
975
+ --hop-EmbeddedButton-option1-effect-background-color-focused: var(--hop-status-option1-surface-hover);
976
+ --hop-EmbeddedButton-option1-effect-background-color-pressed: var(--hop-status-option1-surface-press);
977
+ --hop-EmbeddedButton-option1-effect-background-color-disabled: transparent;
978
+ --hop-EmbeddedButton-option2-color: var(--hop-status-option2-icon);
979
+ --hop-EmbeddedButton-option2-color-hovered: var(--hop-status-option2-icon-hover);
980
+ --hop-EmbeddedButton-option2-color-focused: var(--hop-status-option2-icon-hover);
981
+ --hop-EmbeddedButton-option2-color-pressed: var(--hop-status-option2-icon-press);
982
+ --hop-EmbeddedButton-option2-color-disabled: var(--hop-status-option2-icon-disabled);
983
+ --hop-EmbeddedButton-option2-effect-background-color: transparent;
984
+ --hop-EmbeddedButton-option2-effect-background-color-hovered: var(--hop-status-option2-surface-hover);
985
+ --hop-EmbeddedButton-option2-effect-background-color-focused: var(--hop-status-option2-surface-hover);
986
+ --hop-EmbeddedButton-option2-effect-background-color-pressed: var(--hop-status-option2-surface-press);
987
+ --hop-EmbeddedButton-option2-effect-background-color-disabled: transparent;
988
+ --hop-EmbeddedButton-option3-color: var(--hop-status-option3-icon);
989
+ --hop-EmbeddedButton-option3-color-hovered: var(--hop-status-option3-icon-hover);
990
+ --hop-EmbeddedButton-option3-color-focused: var(--hop-status-option3-icon-hover);
991
+ --hop-EmbeddedButton-option3-color-pressed: var(--hop-status-option3-icon-press);
992
+ --hop-EmbeddedButton-option3-color-disabled: var(--hop-status-option3-icon-disabled);
993
+ --hop-EmbeddedButton-option3-effect-background-color: transparent;
994
+ --hop-EmbeddedButton-option3-effect-background-color-hovered: var(--hop-status-option3-surface-hover);
995
+ --hop-EmbeddedButton-option3-effect-background-color-focused: var(--hop-status-option3-surface-hover);
996
+ --hop-EmbeddedButton-option3-effect-background-color-pressed: var(--hop-status-option3-surface-press);
997
+ --hop-EmbeddedButton-option3-effect-background-color-disabled: transparent;
998
+ --hop-EmbeddedButton-option4-color: var(--hop-status-option4-icon);
999
+ --hop-EmbeddedButton-option4-color-hovered: var(--hop-status-option4-icon-hover);
1000
+ --hop-EmbeddedButton-option4-color-focused: var(--hop-status-option4-icon-hover);
1001
+ --hop-EmbeddedButton-option4-color-pressed: var(--hop-status-option4-icon-press);
1002
+ --hop-EmbeddedButton-option4-color-disabled: var(--hop-status-option4-icon-disabled);
1003
+ --hop-EmbeddedButton-option4-effect-background-color: transparent;
1004
+ --hop-EmbeddedButton-option4-effect-background-color-hovered: var(--hop-status-option4-surface-hover);
1005
+ --hop-EmbeddedButton-option4-effect-background-color-focused: var(--hop-status-option4-surface-hover);
1006
+ --hop-EmbeddedButton-option4-effect-background-color-pressed: var(--hop-status-option4-surface-press);
1007
+ --hop-EmbeddedButton-option4-effect-background-color-disabled: transparent;
1008
+ --hop-EmbeddedButton-option5-color: var(--hop-status-option5-icon);
1009
+ --hop-EmbeddedButton-option5-color-hovered: var(--hop-status-option5-icon-hover);
1010
+ --hop-EmbeddedButton-option5-color-focused: var(--hop-status-option5-icon-hover);
1011
+ --hop-EmbeddedButton-option5-color-pressed: var(--hop-status-option5-icon-press);
1012
+ --hop-EmbeddedButton-option5-color-disabled: var(--hop-status-option5-icon-disabled);
1013
+ --hop-EmbeddedButton-option5-effect-background-color: transparent;
1014
+ --hop-EmbeddedButton-option5-effect-background-color-hovered: var(--hop-status-option5-surface-hover);
1015
+ --hop-EmbeddedButton-option5-effect-background-color-focused: var(--hop-status-option5-surface-hover);
1016
+ --hop-EmbeddedButton-option5-effect-background-color-pressed: var(--hop-status-option5-surface-press);
1017
+ --hop-EmbeddedButton-option5-effect-background-color-disabled: transparent;
1018
+ --hop-EmbeddedButton-option6-color: var(--hop-status-option6-icon);
1019
+ --hop-EmbeddedButton-option6-color-hovered: var(--hop-status-option6-icon-hover);
1020
+ --hop-EmbeddedButton-option6-color-focused: var(--hop-status-option6-icon-hover);
1021
+ --hop-EmbeddedButton-option6-color-pressed: var(--hop-status-option6-icon-press);
1022
+ --hop-EmbeddedButton-option6-color-disabled: var(--hop-status-option6-icon-disabled);
1023
+ --hop-EmbeddedButton-option6-effect-background-color: transparent;
1024
+ --hop-EmbeddedButton-option6-effect-background-color-hovered: var(--hop-status-option6-surface-hover);
1025
+ --hop-EmbeddedButton-option6-effect-background-color-focused: var(--hop-status-option6-surface-hover);
1026
+ --hop-EmbeddedButton-option6-effect-background-color-pressed: var(--hop-status-option6-surface-press);
1027
+ --hop-EmbeddedButton-option6-effect-background-color-disabled: transparent;
1028
+ --hop-EmbeddedButton-selected-color: var(--hop-neutral-icon-weak-selected);
1029
+ --hop-EmbeddedButton-selected-effect-background-color: var(--hop-neutral-surface-weak-selected);
1030
+ --spinner: var(--hop-primary-icon-strong);
1031
+ --padding-inline: 0;
1032
+ --padding-block: 0;
1033
+ --effect-background-color: var(--hop-EmbeddedButton-neutral-effect-background-color);
1034
+ --color: var(--hop-EmbeddedButton-neutral-color);
1035
+ --transition: var(--hop-easing-duration-2) var(--hop-easing-productive);
1036
+ --effect-border-radius: var(--hop-EmbeddedButton-effect-border-radius);
1037
+ --focus-ring-size: 0.125rem;
1038
+ cursor: pointer;
1039
+ position: relative;
1040
+ overflow: hidden;
1041
+ display: flex;
1042
+ flex-shrink: 0;
1043
+ align-items: center;
1044
+ justify-content: center;
1045
+ box-sizing: border-box;
1046
+ inline-size: var(--inline-size);
1047
+ block-size: var(--block-size);
1048
+ padding-block: var(--padding-block);
1049
+ padding-inline: var(--padding-inline);
1050
+ color: var(--color);
1051
+ text-decoration: none;
1052
+ white-space: nowrap;
1053
+ background: none;
1054
+ border: none;
1055
+ border-radius: var(--hop-EmbeddedButton-border-radius);
1056
+ outline: none;
1057
+ transition: color var(--transition);
1058
+ }
1059
+ .EmbeddedButton-module__hop-EmbeddedButton___BR2tE::before {
1060
+ content: "";
1061
+ position: absolute;
1062
+ inset-block-start: 50%;
1063
+ inset-inline-start: 50%;
1064
+ transform: translate(-50%, -50%);
1065
+ display: block;
1066
+ inline-size: var(--effect-inline-size);
1067
+ block-size: var(--effect-block-size);
1068
+ background-color: var(--effect-background-color);
1069
+ border-radius: var(--effect-border-radius);
1070
+ transition: background-color var(--transition);
1071
+ }
1072
+ .EmbeddedButton-module__hop-EmbeddedButton--md___-cQfW {
1073
+ --inline-size: var(--hop-EmbeddedButton-md-width);
1074
+ --block-size: var(--hop-EmbeddedButton-md-height);
1075
+ --focus-ring-offset: calc(-1 * var(--focus-ring-size));
1076
+ }
1077
+ .EmbeddedButton-module__hop-EmbeddedButton--lg___NGhbV {
1078
+ --inline-size: var(--hop-EmbeddedButton-lg-width);
1079
+ --block-size: var(--hop-EmbeddedButton-lg-height);
1080
+ --focus-ring-offset: 0;
1081
+ }
1082
+ .EmbeddedButton-module__hop-EmbeddedButton--md___-cQfW::before {
1083
+ --effect-inline-size: var(--hop-EmbeddedButton-md-effect-width);
1084
+ --effect-block-size: var(--hop-EmbeddedButton-md-effect-height);
1085
+ }
1086
+ .EmbeddedButton-module__hop-EmbeddedButton--lg___NGhbV::before {
1087
+ --effect-inline-size: var(--hop-EmbeddedButton-lg-effect-width);
1088
+ --effect-block-size: var(--hop-EmbeddedButton-lg-effect-height);
1089
+ }
1090
+ .EmbeddedButton-module__hop-EmbeddedButton--neutral___vcdy2 {
1091
+ --color: var(--hop-EmbeddedButton-neutral-color);
1092
+ --effect-background-color: var(--hop-EmbeddedButton-neutral-effect-background-color);
1093
+ }
1094
+ .EmbeddedButton-module__hop-EmbeddedButton--subdued___oZwBg {
1095
+ --color: var(--hop-EmbeddedButton-subdued-color);
1096
+ --effect-background-color: var(--hop-EmbeddedButton-subdued-effect-background-color);
1097
+ }
1098
+ .EmbeddedButton-module__hop-EmbeddedButton--progress___rYnCU {
1099
+ --color: var(--hop-EmbeddedButton-progress-color);
1100
+ --effect-background-color: var(--hop-EmbeddedButton-progress-effect-background-color);
1101
+ }
1102
+ .EmbeddedButton-module__hop-EmbeddedButton--positive___oxHkr {
1103
+ --color: var(--hop-EmbeddedButton-positive-color);
1104
+ --effect-background-color: var(--hop-EmbeddedButton-positive-effect-background-color);
1105
+ }
1106
+ .EmbeddedButton-module__hop-EmbeddedButton--caution___-k3Mi {
1107
+ --color: var(--hop-EmbeddedButton-caution-color);
1108
+ --effect-background-color: var(--hop-EmbeddedButton-caution-effect-background-color);
1109
+ }
1110
+ .EmbeddedButton-module__hop-EmbeddedButton--negative___foo-0 {
1111
+ --color: var(--hop-EmbeddedButton-negative-color);
1112
+ --effect-background-color: var(--hop-EmbeddedButton-negative-effect-background-color);
1113
+ }
1114
+ .EmbeddedButton-module__hop-EmbeddedButton--option1___CQod- {
1115
+ --color: var(--hop-EmbeddedButton-option1-color);
1116
+ --effect-background-color: var(--hop-EmbeddedButton-option1-effect-background-color);
1117
+ }
1118
+ .EmbeddedButton-module__hop-EmbeddedButton--option2___B9Yky {
1119
+ --color: var(--hop-EmbeddedButton-option2-color);
1120
+ --effect-background-color: var(--hop-EmbeddedButton-option2-effect-background-color);
1121
+ }
1122
+ .EmbeddedButton-module__hop-EmbeddedButton--option3___vhwNL {
1123
+ --color: var(--hop-EmbeddedButton-option3-color);
1124
+ --effect-background-color: var(--hop-EmbeddedButton-option3-effect-background-color);
1125
+ }
1126
+ .EmbeddedButton-module__hop-EmbeddedButton--option4___-Ht34 {
1127
+ --color: var(--hop-EmbeddedButton-option4-color);
1128
+ --effect-background-color: var(--hop-EmbeddedButton-option4-effect-background-color);
1129
+ }
1130
+ .EmbeddedButton-module__hop-EmbeddedButton--option5___dCb-s {
1131
+ --color: var(--hop-EmbeddedButton-option5-color);
1132
+ --effect-background-color: var(--hop-EmbeddedButton-option5-effect-background-color);
1133
+ }
1134
+ .EmbeddedButton-module__hop-EmbeddedButton--option6___JJJlT {
1135
+ --color: var(--hop-EmbeddedButton-option6-color);
1136
+ --effect-background-color: var(--hop-EmbeddedButton-option6-effect-background-color);
1137
+ }
1138
+ .EmbeddedButton-module__hop-EmbeddedButton___BR2tE[data-selected] {
1139
+ --color: var(--hop-EmbeddedButton-selected-color);
1140
+ --effect-background-color: var(--hop-EmbeddedButton-selected-effect-background-color);
1141
+ }
1142
+ .EmbeddedButton-module__hop-EmbeddedButton___BR2tE[data-focus-visible] {
1143
+ outline: var(--focus-ring-size) solid var(--hop-EmbeddedButton-focus-ring-color);
1144
+ outline-offset: var(--focus-ring-offset);
1145
+ }
1146
+ .EmbeddedButton-module__hop-EmbeddedButton___BR2tE[data-disabled] {
1147
+ cursor: not-allowed;
1148
+ }
1149
+ .EmbeddedButton-module__hop-EmbeddedButton--neutral___vcdy2[data-hovered] {
1150
+ --effect-background-color: var(--hop-EmbeddedButton-neutral-effect-background-color-hovered);
1151
+ --color: var(--hop-EmbeddedButton-neutral-color-hovered);
1152
+ }
1153
+ .EmbeddedButton-module__hop-EmbeddedButton--neutral___vcdy2[data-focus-visible] {
1154
+ --effect-background-color: var(--hop-EmbeddedButton-neutral-effect-background-color-focused);
1155
+ --color: var(--hop-EmbeddedButton-neutral-color-focused);
1156
+ }
1157
+ .EmbeddedButton-module__hop-EmbeddedButton--neutral___vcdy2[data-pressed] {
1158
+ --effect-background-color: var(--hop-EmbeddedButton-neutral-effect-background-color-pressed);
1159
+ --color: var(--hop-EmbeddedButton-neutral-color-pressed);
1160
+ }
1161
+ .EmbeddedButton-module__hop-EmbeddedButton--neutral___vcdy2[data-disabled] {
1162
+ --effect-background-color: var(--hop-EmbeddedButton-neutral-effect-background-color-disabled);
1163
+ --color: var(--hop-EmbeddedButton-neutral-color-disabled);
1164
+ }
1165
+ .EmbeddedButton-module__hop-EmbeddedButton--subdued___oZwBg[data-hovered] {
1166
+ --effect-background-color: var(--hop-EmbeddedButton-subdued-effect-background-color-hovered);
1167
+ --color: var(--hop-EmbeddedButton-subdued-color-hovered);
1168
+ }
1169
+ .EmbeddedButton-module__hop-EmbeddedButton--subdued___oZwBg[data-focus-visible] {
1170
+ --effect-background-color: var(--hop-EmbeddedButton-subdued-effect-background-color-focused);
1171
+ --color: var(--hop-EmbeddedButton-subdued-color-focused);
1172
+ }
1173
+ .EmbeddedButton-module__hop-EmbeddedButton--subdued___oZwBg[data-pressed] {
1174
+ --effect-background-color: var(--hop-EmbeddedButton-subdued-effect-background-color-pressed);
1175
+ --color: var(--hop-EmbeddedButton-subdued-color-pressed);
1176
+ }
1177
+ .EmbeddedButton-module__hop-EmbeddedButton--subdued___oZwBg[data-disabled] {
1178
+ --effect-background-color: var(--hop-EmbeddedButton-subdued-effect-background-color-disabled);
1179
+ --color: var(--hop-EmbeddedButton-subdued-color-disabled);
1180
+ }
1181
+ .EmbeddedButton-module__hop-EmbeddedButton--progress___rYnCU[data-hovered] {
1182
+ --effect-background-color: var(--hop-EmbeddedButton-progress-effect-background-color-hovered);
1183
+ --color: var(--hop-EmbeddedButton-progress-color-hovered);
1184
+ }
1185
+ .EmbeddedButton-module__hop-EmbeddedButton--progress___rYnCU[data-focus-visible] {
1186
+ --effect-background-color: var(--hop-EmbeddedButton-progress-effect-background-color-focused);
1187
+ --color: var(--hop-EmbeddedButton-progress-color-focused);
1188
+ }
1189
+ .EmbeddedButton-module__hop-EmbeddedButton--progress___rYnCU[data-pressed] {
1190
+ --effect-background-color: var(--hop-EmbeddedButton-progress-effect-background-color-pressed);
1191
+ --color: var(--hop-EmbeddedButton-progress-color-pressed);
1192
+ }
1193
+ .EmbeddedButton-module__hop-EmbeddedButton--progress___rYnCU[data-disabled] {
1194
+ --effect-background-color: var(--hop-EmbeddedButton-progress-effect-background-color-disabled);
1195
+ --color: var(--hop-EmbeddedButton-progress-color-disabled);
1196
+ }
1197
+ .EmbeddedButton-module__hop-EmbeddedButton--positive___oxHkr[data-hovered] {
1198
+ --effect-background-color: var(--hop-EmbeddedButton-positive-effect-background-color-hovered);
1199
+ --color: var(--hop-EmbeddedButton-positive-color-hovered);
1200
+ }
1201
+ .EmbeddedButton-module__hop-EmbeddedButton--positive___oxHkr[data-focus-visible] {
1202
+ --effect-background-color: var(--hop-EmbeddedButton-positive-effect-background-color-focused);
1203
+ --color: var(--hop-EmbeddedButton-positive-color-focused);
1204
+ }
1205
+ .EmbeddedButton-module__hop-EmbeddedButton--positive___oxHkr[data-pressed] {
1206
+ --effect-background-color: var(--hop-EmbeddedButton-positive-effect-background-color-pressed);
1207
+ --color: var(--hop-EmbeddedButton-positive-color-pressed);
1208
+ }
1209
+ .EmbeddedButton-module__hop-EmbeddedButton--positive___oxHkr[data-disabled] {
1210
+ --effect-background-color: var(--hop-EmbeddedButton-positive-effect-background-color-disabled);
1211
+ --color: var(--hop-EmbeddedButton-positive-color-disabled);
1212
+ }
1213
+ .EmbeddedButton-module__hop-EmbeddedButton--caution___-k3Mi[data-hovered] {
1214
+ --effect-background-color: var(--hop-EmbeddedButton-caution-effect-background-color-hovered);
1215
+ --color: var(--hop-EmbeddedButton-caution-color-hovered);
1216
+ }
1217
+ .EmbeddedButton-module__hop-EmbeddedButton--caution___-k3Mi[data-focus-visible] {
1218
+ --effect-background-color: var(--hop-EmbeddedButton-caution-effect-background-color-focused);
1219
+ --color: var(--hop-EmbeddedButton-caution-color-focused);
1220
+ }
1221
+ .EmbeddedButton-module__hop-EmbeddedButton--caution___-k3Mi[data-pressed] {
1222
+ --effect-background-color: var(--hop-EmbeddedButton-caution-effect-background-color-pressed);
1223
+ --color: var(--hop-EmbeddedButton-caution-color-pressed);
1224
+ }
1225
+ .EmbeddedButton-module__hop-EmbeddedButton--caution___-k3Mi[data-disabled] {
1226
+ --effect-background-color: var(--hop-EmbeddedButton-caution-effect-background-color-disabled);
1227
+ --color: var(--hop-EmbeddedButton-caution-color-disabled);
1228
+ }
1229
+ .EmbeddedButton-module__hop-EmbeddedButton--negative___foo-0[data-hovered] {
1230
+ --effect-background-color: var(--hop-EmbeddedButton-negative-effect-background-color-hovered);
1231
+ --color: var(--hop-EmbeddedButton-negative-color-hovered);
1232
+ }
1233
+ .EmbeddedButton-module__hop-EmbeddedButton--negative___foo-0[data-focus-visible] {
1234
+ --effect-background-color: var(--hop-EmbeddedButton-negative-effect-background-color-focused);
1235
+ --color: var(--hop-EmbeddedButton-negative-color-focused);
1236
+ }
1237
+ .EmbeddedButton-module__hop-EmbeddedButton--negative___foo-0[data-pressed] {
1238
+ --effect-background-color: var(--hop-EmbeddedButton-negative-effect-background-color-pressed);
1239
+ --color: var(--hop-EmbeddedButton-negative-color-pressed);
1240
+ }
1241
+ .EmbeddedButton-module__hop-EmbeddedButton--negative___foo-0[data-disabled] {
1242
+ --effect-background-color: var(--hop-EmbeddedButton-negative-effect-background-color-disabled);
1243
+ --color: var(--hop-EmbeddedButton-negative-color-disabled);
1244
+ }
1245
+ .EmbeddedButton-module__hop-EmbeddedButton--option1___CQod-[data-hovered] {
1246
+ --effect-background-color: var(--hop-EmbeddedButton-option1-effect-background-color-hovered);
1247
+ --color: var(--hop-EmbeddedButton-option1-color-hovered);
1248
+ }
1249
+ .EmbeddedButton-module__hop-EmbeddedButton--option1___CQod-[data-focus-visible] {
1250
+ --effect-background-color: var(--hop-EmbeddedButton-option1-effect-background-color-focused);
1251
+ --color: var(--hop-EmbeddedButton-option1-color-focused);
1252
+ }
1253
+ .EmbeddedButton-module__hop-EmbeddedButton--option1___CQod-[data-pressed] {
1254
+ --effect-background-color: var(--hop-EmbeddedButton-option1-effect-background-color-pressed);
1255
+ --color: var(--hop-EmbeddedButton-option1-color-pressed);
1256
+ }
1257
+ .EmbeddedButton-module__hop-EmbeddedButton--option1___CQod-[data-disabled] {
1258
+ --effect-background-color: var(--hop-EmbeddedButton-option1-effect-background-color-disabled);
1259
+ --color: var(--hop-EmbeddedButton-option1-color-disabled);
1260
+ }
1261
+ .EmbeddedButton-module__hop-EmbeddedButton--option2___B9Yky[data-hovered] {
1262
+ --effect-background-color: var(--hop-EmbeddedButton-option2-effect-background-color-hovered);
1263
+ --color: var(--hop-EmbeddedButton-option2-color-hovered);
1264
+ }
1265
+ .EmbeddedButton-module__hop-EmbeddedButton--option2___B9Yky[data-focus-visible] {
1266
+ --effect-background-color: var(--hop-EmbeddedButton-option2-effect-background-color-focused);
1267
+ --color: var(--hop-EmbeddedButton-option2-color-focused);
1268
+ }
1269
+ .EmbeddedButton-module__hop-EmbeddedButton--option2___B9Yky[data-pressed] {
1270
+ --effect-background-color: var(--hop-EmbeddedButton-option2-effect-background-color-pressed);
1271
+ --color: var(--hop-EmbeddedButton-option2-color-pressed);
1272
+ }
1273
+ .EmbeddedButton-module__hop-EmbeddedButton--option2___B9Yky[data-disabled] {
1274
+ --effect-background-color: var(--hop-EmbeddedButton-option2-effect-background-color-disabled);
1275
+ --color: var(--hop-EmbeddedButton-option2-color-disabled);
1276
+ }
1277
+ .EmbeddedButton-module__hop-EmbeddedButton--option3___vhwNL[data-hovered] {
1278
+ --effect-background-color: var(--hop-EmbeddedButton-option3-effect-background-color-hovered);
1279
+ --color: var(--hop-EmbeddedButton-option3-color-hovered);
1280
+ }
1281
+ .EmbeddedButton-module__hop-EmbeddedButton--option3___vhwNL[data-focus-visible] {
1282
+ --effect-background-color: var(--hop-EmbeddedButton-option3-effect-background-color-focused);
1283
+ --color: var(--hop-EmbeddedButton-option3-color-focused);
1284
+ }
1285
+ .EmbeddedButton-module__hop-EmbeddedButton--option3___vhwNL[data-pressed] {
1286
+ --effect-background-color: var(--hop-EmbeddedButton-option3-effect-background-color-pressed);
1287
+ --color: var(--hop-EmbeddedButton-option3-color-pressed);
1288
+ }
1289
+ .EmbeddedButton-module__hop-EmbeddedButton--option3___vhwNL[data-disabled] {
1290
+ --effect-background-color: var(--hop-EmbeddedButton-option3-effect-background-color-disabled);
1291
+ --color: var(--hop-EmbeddedButton-option3-color-disabled);
1292
+ }
1293
+ .EmbeddedButton-module__hop-EmbeddedButton--option4___-Ht34[data-hovered] {
1294
+ --effect-background-color: var(--hop-EmbeddedButton-option4-effect-background-color-hovered);
1295
+ --color: var(--hop-EmbeddedButton-option4-color-hovered);
1296
+ }
1297
+ .EmbeddedButton-module__hop-EmbeddedButton--option4___-Ht34[data-focus-visible] {
1298
+ --effect-background-color: var(--hop-EmbeddedButton-option4-effect-background-color-focused);
1299
+ --color: var(--hop-EmbeddedButton-option4-color-focused);
1300
+ }
1301
+ .EmbeddedButton-module__hop-EmbeddedButton--option4___-Ht34[data-pressed] {
1302
+ --effect-background-color: var(--hop-EmbeddedButton-option4-effect-background-color-pressed);
1303
+ --color: var(--hop-EmbeddedButton-option4-color-pressed);
1304
+ }
1305
+ .EmbeddedButton-module__hop-EmbeddedButton--option4___-Ht34[data-disabled] {
1306
+ --effect-background-color: var(--hop-EmbeddedButton-option4-effect-background-color-disabled);
1307
+ --color: var(--hop-EmbeddedButton-option4-color-disabled);
1308
+ }
1309
+ .EmbeddedButton-module__hop-EmbeddedButton--option5___dCb-s[data-hovered] {
1310
+ --effect-background-color: var(--hop-EmbeddedButton-option5-effect-background-color-hovered);
1311
+ --color: var(--hop-EmbeddedButton-option5-color-hovered);
1312
+ }
1313
+ .EmbeddedButton-module__hop-EmbeddedButton--option5___dCb-s[data-focus-visible] {
1314
+ --effect-background-color: var(--hop-EmbeddedButton-option5-effect-background-color-focused);
1315
+ --color: var(--hop-EmbeddedButton-option5-color-focused);
1316
+ }
1317
+ .EmbeddedButton-module__hop-EmbeddedButton--option5___dCb-s[data-pressed] {
1318
+ --effect-background-color: var(--hop-EmbeddedButton-option5-effect-background-color-pressed);
1319
+ --color: var(--hop-EmbeddedButton-option5-color-pressed);
1320
+ }
1321
+ .EmbeddedButton-module__hop-EmbeddedButton--option5___dCb-s[data-disabled] {
1322
+ --effect-background-color: var(--hop-EmbeddedButton-option5-effect-background-color-disabled);
1323
+ --color: var(--hop-EmbeddedButton-option5-color-disabled);
1324
+ }
1325
+ .EmbeddedButton-module__hop-EmbeddedButton--option6___JJJlT[data-hovered] {
1326
+ --effect-background-color: var(--hop-EmbeddedButton-option6-effect-background-color-hovered);
1327
+ --color: var(--hop-EmbeddedButton-option6-color-hovered);
1328
+ }
1329
+ .EmbeddedButton-module__hop-EmbeddedButton--option6___JJJlT[data-focus-visible] {
1330
+ --effect-background-color: var(--hop-EmbeddedButton-option6-effect-background-color-focused);
1331
+ --color: var(--hop-EmbeddedButton-option6-color-focused);
1332
+ }
1333
+ .EmbeddedButton-module__hop-EmbeddedButton--option6___JJJlT[data-pressed] {
1334
+ --effect-background-color: var(--hop-EmbeddedButton-option6-effect-background-color-pressed);
1335
+ --color: var(--hop-EmbeddedButton-option6-color-pressed);
1336
+ }
1337
+ .EmbeddedButton-module__hop-EmbeddedButton--option6___JJJlT[data-disabled] {
1338
+ --effect-background-color: var(--hop-EmbeddedButton-option6-effect-background-color-disabled);
1339
+ --color: var(--hop-EmbeddedButton-option6-color-disabled);
1340
+ }
1341
+ .EmbeddedButton-module__hop-EmbeddedButton__icon___LTuRz {
1342
+ position: relative;
1343
+ }
1344
+
1345
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/checkbox/src/Checkbox.module.css/#css-module-data */
1346
+ .Checkbox-module__hop-Checkbox___RQpte {
1347
+ --hop-Checkbox-box-border-size: 0.0625rem;
1348
+ --hop-Checkbox-box-border-color: var(--hop-neutral-border);
1349
+ --hop-Checkbox-box-background-color: var(--hop-neutral-surface);
1350
+ --hop-Checkbox-box-outline-size: 0.125rem;
1351
+ --hop-Checkbox-box-outline-color: var(--hop-primary-border-focus);
1352
+ --hop-Checkbox-check-color: var(--hop-neutral-icon-selected);
1353
+ --hop-Checkbox-check-display: none;
1354
+ --hop-Checkbox-text-color: var(--hop-neutral-text);
1355
+ --hop-Checkbox-icon-color: var(--hop-neutral-icon);
1356
+ --hop-Checkbox-box-border-color-hovered: var(--hop-neutral-border-hover);
1357
+ --hop-Checkbox-box-background-color-hovered: var(--hop-neutral-surface-hover);
1358
+ --hop-Checkbox-text-color-hovered: var(--hop-neutral-text-hover);
1359
+ --hop-Checkbox-icon-color-hovered: var(--hop-neutral-icon-hover);
1360
+ --hop-Checkbox-box-border-color-pressed: var(--hop-neutral-border-press);
1361
+ --hop-Checkbox-box-background-color-pressed: var(--hop-neutral-surface-press);
1362
+ --hop-Checkbox-text-color-pressed: var(--hop-neutral-text-press);
1363
+ --hop-Checkbox-icon-color-pressed: var(--hop-neutral-icon-press);
1364
+ --hop-Checkbox-box-border-color-selected: var(--hop-neutral-border-selected);
1365
+ --hop-Checkbox-box-background-color-selected: var(--hop-neutral-surface-selected);
1366
+ --hop-Checkbox-check-display-selected: block;
1367
+ --hop-Checkbox-text-color-selected: var(--hop-neutral-text);
1368
+ --hop-Checkbox-icon-color-selected: var(--hop-neutral-icon);
1369
+ --hop-Checkbox-box-border-color-disabled: var(--hop-neutral-border-disabled);
1370
+ --hop-Checkbox-box-background-color-disabled: var(--hop-neutral-surface-disabled);
1371
+ --hop-Checkbox-check-color-disabled: var(--hop-neutral-icon-disabled);
1372
+ --hop-Checkbox-text-color-disabled: var(--hop-neutral-text-disabled);
1373
+ --hop-Checkbox-icon-color-disabled: var(--hop-neutral-icon-disabled);
1374
+ --hop-Checkbox-box-border-color-focused: var(--hop-neutral-border-hover);
1375
+ --hop-Checkbox-box-background-color-focused: var(--hop-neutral-surface-hover);
1376
+ --hop-Checkbox-text-color-focused: var(--hop-neutral-text-hover);
1377
+ --hop-Checkbox-icon-color-focused: var(--hop-neutral-icon-hover);
1378
+ --hop-Checkbox-box-border-color-invalid: var(--hop-danger-border-strong);
1379
+ --hop-Checkbox-box-background-color-invalid: var(--hop-neutral-surface);
1380
+ --hop-Checkbox-box-border-color-hovered-invalid: var(--hop-danger-border-strong);
1381
+ --hop-Checkbox-box-background-color-hovered-invalid: var(--hop-danger-surface-weak-hover);
1382
+ --hop-Checkbox-box-border-color-pressed-invalid: var(--hop-danger-border-press);
1383
+ --hop-Checkbox-box-background-color-pressed-invalid: var(--hop-danger-surface-weak-press);
1384
+ --hop-Checkbox-box-border-color-focused-invalid: var(--hop-danger-border-press);
1385
+ --hop-Checkbox-box-background-color-focused-invalid: var(--hop-danger-surface);
1386
+ --hop-Checkbox-box-border-color-selected-invalid: var(--hop-danger-border-strong);
1387
+ --hop-Checkbox-box-background-color-selected-invalid: var(--hop-danger-surface-strong);
1388
+ --hop-Checkbox-check-color-invalid: var(--hop-danger-icon-strong);
1389
+ --hop-Checkbox-text-color-invalid: var(--hop-danger-text-weak);
1390
+ --hop-Checkbox-text-color-hovered-invalid: var(--hop-danger-text-weak-hover);
1391
+ --hop-Checkbox-text-color-pressed-invalid: var(--hop-danger-text-weak-press);
1392
+ --hop-Checkbox-icon-color-invalid: var(--hop-danger-icon-weak);
1393
+ --hop-Checkbox-icon-color-hovered-invalid: var(--hop-danger-icon-weak-hover);
1394
+ --hop-Checkbox-icon-color-pressed-invalid: var(--hop-danger-icon-weak-press);
1395
+ --hop-Checkbox-box-sm-block-size: 1rem;
1396
+ --hop-Checkbox-box-sm-inline-size: 1rem;
1397
+ --hop-Checkbox-text-sm-top-offset: calc((var(--box-inline-size) - (var(--hop-body-sm-line-height) * var(--hop-body-sm-font-size))) / 2);
1398
+ --hop-Checkbox-text-sm-margin-inline-start: calc(var(--hop-space-inline-sm) - var(--hop-space-inline-xs));
1399
+ --hop-Checkbox-box-md-block-size: 1.5rem;
1400
+ --hop-Checkbox-box-md-inline-size: 1.5rem;
1401
+ --hop-Checkbox-text-md-top-offset: calc((var(--box-inline-size) - (var(--hop-body-md-line-height) * var(--hop-body-md-font-size))) / 2);
1402
+ --hop-Checkbox-text-md-margin-inline-start: calc(var(--hop-space-inline-md) - var(--hop-space-inline-xs));
1403
+ --box-background-color: var(--hop-Checkbox-box-background-color);
1404
+ --box-border-color: var(--hop-Checkbox-box-border-color);
1405
+ --box-border-radius: var(--hop-shape-rounded-sm);
1406
+ --check-color: var(--hop-Checkbox-check-color);
1407
+ --check-display: var(--hop-Checkbox-check-display);
1408
+ --cursor: pointer;
1409
+ --text-color: var(--hop-Checkbox-text-color);
1410
+ --icon-color: var(--hop-Checkbox-icon-color);
1411
+ --transition-duration: var(--hop-easing-duration-2);
1412
+ cursor: var(--cursor);
1413
+ display: flex;
1414
+ column-gap: var(--hop-space-inline-xs);
1415
+ align-items: flex-start;
1416
+ justify-content: flex-start;
1417
+ box-sizing: border-box;
1418
+ inline-size: max-content;
1419
+ max-inline-size: 100%;
1420
+ }
1421
+ .Checkbox-module__hop-Checkbox___RQpte[data-focus-visible],
1422
+ .Checkbox-module__hop-Checkbox--focused___sxf-2 {
1423
+ --box-background-color: var(--hop-Checkbox-box-background-color-focused);
1424
+ --box-border-color: var(--hop-Checkbox-box-border-color-focused);
1425
+ --box-outline: var(--hop-Checkbox-box-outline-size) solid var(--hop-Checkbox-box-outline-color);
1426
+ --text-color: var(--hop-Checkbox-text-color-focused);
1427
+ --icon-color: var(--hop-Checkbox-icon-color-focused);
1428
+ }
1429
+ .Checkbox-module__hop-Checkbox___RQpte[data-hovered],
1430
+ .Checkbox-module__hop-Checkbox--hovered___9BGUP {
1431
+ --box-background-color: var(--hop-Checkbox-box-background-color-hovered);
1432
+ --box-border-color: var(--hop-Checkbox-box-border-color-hovered);
1433
+ --text-color: var(--hop-Checkbox-text-color-hovered);
1434
+ --icon-color: var(--hop-Checkbox-icon-color-hovered);
1435
+ }
1436
+ .Checkbox-module__hop-Checkbox___RQpte[data-pressed],
1437
+ .Checkbox-module__hop-Checkbox--pressed___o-zB5 {
1438
+ --box-background-color: var(--hop-Checkbox-box-background-color-pressed);
1439
+ --box-border-color: var(--hop-Checkbox-box-border-color-pressed);
1440
+ --text-color: var(--hop-Checkbox-text-color-pressed);
1441
+ --icon-color: var(--hop-Checkbox-icon-color-pressed);
1442
+ }
1443
+ .Checkbox-module__hop-Checkbox___RQpte[data-selected] {
1444
+ --box-background-color: var(--hop-Checkbox-box-background-color-selected);
1445
+ --box-border-color: var(--hop-Checkbox-box-border-color-selected);
1446
+ --check-display: var(--hop-Checkbox-check-display-selected);
1447
+ --text-color: var(--hop-Checkbox-text-color-selected);
1448
+ --icon-color: var(--hop-Checkbox-icon-color-selected);
1449
+ }
1450
+ .Checkbox-module__hop-Checkbox___RQpte[data-invalid] {
1451
+ --box-background-color: var(--hop-Checkbox-box-background-color-invalid);
1452
+ --box-border-color: var(--hop-Checkbox-box-border-color-invalid);
1453
+ --check-color: var(--hop-Checkbox-check-color-invalid);
1454
+ --text-color: var(--hop-Checkbox-text-color-invalid);
1455
+ --icon-color: var(--hop-Checkbox-icon-color-invalid);
1456
+ }
1457
+ .Checkbox-module__hop-Checkbox___RQpte[data-invalid]:where([data-focus-visible], .Checkbox-module__hop-Checkbox--focused___sxf-2) {
1458
+ --box-background-color: var(--hop-Checkbox-box-background-color-focused-invalid);
1459
+ --box-border-color: var(--hop-Checkbox-box-border-color-focused-invalid);
1460
+ }
1461
+ .Checkbox-module__hop-Checkbox___RQpte[data-invalid]:where([data-hovered], .Checkbox-module__hop-Checkbox--hovered___9BGUP) {
1462
+ --box-background-color: var(--hop-Checkbox-box-background-color-hovered-invalid);
1463
+ --box-border-color: var(--hop-Checkbox-box-border-color-hovered-invalid);
1464
+ --text-color: var(--hop-Checkbox-text-color-hovered-invalid);
1465
+ --icon-color: var(--hop-Checkbox-icon-color-hovered-invalid);
1466
+ }
1467
+ .Checkbox-module__hop-Checkbox___RQpte[data-invalid]:where([data-pressed], .Checkbox-module__hop-Checkbox--pressed___o-zB5) {
1468
+ --box-background-color: var(--hop-Checkbox-box-background-color-pressed-invalid);
1469
+ --box-border-color: var(--hop-Checkbox-box-border-color-pressed-invalid);
1470
+ --text-color: var(--hop-Checkbox-text-color-pressed-invalid);
1471
+ --icon-color: var(--hop-Checkbox-icon-color-pressed-invalid);
1472
+ }
1473
+ .Checkbox-module__hop-Checkbox___RQpte:where([data-invalid])[data-selected] {
1474
+ --box-background-color: var(--hop-Checkbox-box-background-color-selected-invalid);
1475
+ --box-border-color: var(--hop-Checkbox-box-border-color-selected-invalid);
1476
+ }
1477
+ .Checkbox-module__hop-Checkbox___RQpte[data-disabled] {
1478
+ --box-background-color: var(--hop-Checkbox-box-background-color-disabled);
1479
+ --box-border-color: var(--hop-Checkbox-box-border-color-disabled);
1480
+ --check-color: var(--hop-Checkbox-check-color-disabled);
1481
+ --cursor: not-allowed;
1482
+ --text-color: var(--hop-Checkbox-text-color-disabled);
1483
+ --icon-color: var(--hop-Checkbox-icon-color-disabled);
1484
+ }
1485
+ .Checkbox-module__hop-Checkbox--sm___2KCPX {
1486
+ --box-block-size: var(--hop-Checkbox-box-sm-block-size);
1487
+ --box-inline-size: var(--hop-Checkbox-box-sm-inline-size);
1488
+ --text-top-offset: var(--hop-Checkbox-text-sm-top-offset);
1489
+ --text-margin-inline-start: var(--hop-Checkbox-text-sm-margin-inline-start);
1490
+ }
1491
+ .Checkbox-module__hop-Checkbox--md___WC3aH {
1492
+ --box-block-size: var(--hop-Checkbox-box-md-block-size);
1493
+ --box-inline-size: var(--hop-Checkbox-box-md-inline-size);
1494
+ --text-top-offset: var(--hop-Checkbox-text-md-top-offset);
1495
+ --text-margin-inline-start: var(--hop-Checkbox-text-md-margin-inline-start);
1496
+ }
1497
+ .Checkbox-module__hop-Checkbox__icon___L-2Lw,
1498
+ .Checkbox-module__hop-Checkbox__icon-list___vNkoh {
1499
+ flex: 0 0 auto;
1500
+ order: 3;
1501
+ color: var(--icon-color);
1502
+ }
1503
+ .Checkbox-module__hop-Checkbox__box___ZGHp6 {
1504
+ display: flex;
1505
+ flex: 0 0 auto;
1506
+ align-items: center;
1507
+ justify-content: center;
1508
+ order: 1;
1509
+ box-sizing: border-box;
1510
+ inline-size: var(--box-inline-size, var(--hop-Checkbox-box-md-inline-size));
1511
+ block-size: var(--box-block-size, var(--hop-Checkbox-box-md-block-size));
1512
+ background-color: var(--box-background-color);
1513
+ border: var(--hop-Checkbox-box-border-size) solid var(--box-border-color);
1514
+ border-radius: var(--box-border-radius);
1515
+ outline: var(--box-outline, none);
1516
+ outline-offset: 0.125rem;
1517
+ transition: background-color var(--transition-duration) var(--hop-easing-productive), border var(--transition-duration) var(--hop-easing-productive);
1518
+ }
1519
+ .Checkbox-module__hop-Checkbox__check___kD0CL {
1520
+ display: var(--check-display);
1521
+ color: var(--check-color);
1522
+ }
1523
+ .Checkbox-module__hop-Checkbox__text___YwAjq {
1524
+ flex: 0 1 auto;
1525
+ order: 2;
1526
+ min-inline-size: 0;
1527
+ margin-block-start: var(--text-top-offset, var(--hop-Checkbox-text-md-top-offset));
1528
+ margin-inline-start: var(--text-margin-inline-start, var(--hop-Checkbox-text-md-margin-inline-start));
1529
+ color: var(--text-color);
1530
+ }
1531
+
1532
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/checkbox/src/CheckboxField.module.css/#css-module-data */
1533
+ .CheckboxField-module__hop-CheckboxField___X9IXA {
1534
+ --hop-CheckboxField-description-color: var(--hop-neutral-text-weak);
1535
+ --hop-CheckboxField-description-color-disabled: var(--hop-neutral-text-disabled);
1536
+ --hop-CheckboxField-sm-row-gap: var(--hop-space-stack-xs);
1537
+ --hop-CheckboxField-checkbox-sm-inline-size: 1rem;
1538
+ --hop-CheckboxField-description-sm-margin-inline-start: calc(var(--hop-CheckboxField-checkbox-sm-inline-size) + var(--hop-space-inline-sm));
1539
+ --hop-CheckboxField-md-row-gap: var(--hop-space-stack-xs);
1540
+ --hop-CheckboxField-checkbox-md-inline-size: 1.5rem;
1541
+ --hop-CheckboxField-description-md-margin-inline-start: calc(var(--hop-CheckboxField-checkbox-md-inline-size) + var(--hop-space-inline-md));
1542
+ --description-color: var(--hop-CheckboxField-description-color);
1543
+ display: flex;
1544
+ flex-direction: column;
1545
+ row-gap: var(--row-gap, var(--hop-space-stack-sm));
1546
+ align-items: flex-start;
1547
+ justify-content: flex-start;
1548
+ box-sizing: border-box;
1549
+ inline-size: max-content;
1550
+ max-inline-size: 100%;
1551
+ }
1552
+ .CheckboxField-module__hop-CheckboxField___X9IXA[data-disabled] {
1553
+ --description-color: var(--hop-CheckboxField-description-color-disabled);
1554
+ }
1555
+ .CheckboxField-module__hop-CheckboxField--sm___lXT-t {
1556
+ --row-gap: var(--hop-CheckboxField-sm-row-gap);
1557
+ --description-margin-inline-start: var(--hop-CheckboxField-description-sm-margin-inline-start);
1558
+ }
1559
+ .CheckboxField-module__hop-CheckboxField--md___-KAiM {
1560
+ --row-gap: var(--hop-CheckboxField-md-row-gap);
1561
+ --description-margin-inline-start: var(--hop-CheckboxField-description-md-margin-inline-start);
1562
+ }
1563
+ .CheckboxField-module__hop-CheckboxField__description___7XYfp {
1564
+ order: 2;
1565
+ margin-inline-start: var(--description-margin-inline-start, var(--hop-CheckboxField-description-md-margin-inline-start));
1566
+ color: var(--description-color);
1567
+ }
1568
+ .CheckboxField-module__hop-CheckboxField__checkbox___98XHd {
1569
+ order: 1;
1570
+ }
1571
+
1572
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/ErrorMessage/src/ErrorMessage.module.css/#css-module-data */
1573
+ .ErrorMessage-module__hop-ErrorMessage___mPK9U {
1574
+ --hop-ErrorMessage-color: var(--hop-danger-text-weak);
1575
+ --hop-ErrorMessage-font-family: var(--hop-body-xs-font-family);
1576
+ --hop-ErrorMessage-font-size: var(--hop-body-xs-font-size);
1577
+ --hop-ErrorMessage-font-weight: var(--hop-body-xs-font-weight);
1578
+ --hop-ErrorMessage-line-height: var(--hop-body-xs-line-height);
1579
+ --hop-ErrorMessage-column-gap: var(--hop-space-inline-xs);
1580
+ display: flex;
1581
+ column-gap: var(--hop-ErrorMessage-column-gap);
1582
+ align-items: center;
1583
+ box-sizing: border-box;
1584
+ font-family: var(--hop-ErrorMessage-font-family);
1585
+ font-size: var(--hop-ErrorMessage-font-size);
1586
+ font-weight: var(--hop-ErrorMessage-font-weight);
1587
+ line-height: var(--hop-ErrorMessage-line-height);
1588
+ color: var(--hop-ErrorMessage-color);
1589
+ }
1590
+ .ErrorMessage-module__hop-ErrorMessage__icon___blB3q {
1591
+ flex: 0 0 auto;
1592
+ align-self: flex-start;
1593
+ }
1594
+
1595
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/HelperMessage/src/HelperMessage.module.css/#css-module-data */
1596
+ .HelperMessage-module__hop-HelperMessage___g-wQa {
1597
+ --hop-HelperMessage-color: var(--hop-neutral-text-weak);
1598
+ --hop-HelperMessage-column-gap: var(--hop-space-inline-xs);
1599
+ display: flex;
1600
+ column-gap: var(--hop-HelperMessage-column-gap);
1601
+ align-items: center;
1602
+ box-sizing: border-box;
1603
+ color: var(--hop-HelperMessage-color);
1604
+ }
1605
+ .HelperMessage-module__hop-HelperMessage__icon___3-slU {
1606
+ flex: 0 0 auto;
1607
+ align-self: flex-start;
1608
+ }
1609
+
1610
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/Label/src/Label.module.css/#css-module-data */
1611
+ .Label-module__hop-Label___43PE1 {
1612
+ --hop-Label-font-size: var(--hop-heading-xs-font-size);
1613
+ --hop-Label-font-family: var(--hop-heading-xs-font-family);
1614
+ --hop-Label-font-weight: var(--hop-heading-xs-font-weight);
1615
+ --hop-Label-line-height: var(--hop-heading-xs-line-height);
1616
+ --hop-Label-color: var(--hop-neutral-text-weak);
1617
+ }
1618
+ :where(.Label-module__hop-Label___43PE1) {
1619
+ font-family: var(--hop-Label-font-family);
1620
+ font-size: var(--hop-Label-font-size);
1621
+ font-weight: var(--hop-Label-font-weight);
1622
+ line-height: var(--hop-Label-line-height);
1623
+ color: var(--hop-Label-color);
1624
+ }
1625
+ :where(.Label-module__hop-Label__indicator___PXvS0) {
1626
+ padding-inline-start: var(--hop-space-20);
1627
+ }
1628
+
1629
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/checkbox/src/CheckboxGroup.module.css/#css-module-data */
1630
+ .CheckboxGroup-module__hop-CheckboxGroup___nBYJh {
1631
+ --hop-CheckboxGroup-align-items: flex-start;
1632
+ --hop-CheckboxGroup-justify-content: flex-start;
1633
+ --hop-CheckboxGroup-bordered-border-color: var(--hop-neutral-border-weak);
1634
+ --hop-CheckboxGroup-sm-column-gap: var(--hop-space-inline-sm);
1635
+ --hop-CheckboxGroup-sm-row-gap: var(--hop-space-stack-sm);
1636
+ --hop-CheckboxGroup-list-sm-column-gap: var(--hop-space-inline-sm);
1637
+ --hop-CheckboxGroup-list-sm-row-gap: var(--hop-space-stack-sm);
1638
+ --hop-CheckboxGroup-bordered-sm-padding: var(--hop-space-inset-sm);
1639
+ --hop-CheckboxGroup-bordered-sm-column-gap: var(--hop-space-inline-sm);
1640
+ --hop-CheckboxGroup-bordered-sm-row-gap: var(--hop-space-stack-sm);
1641
+ --hop-CheckboxGroup-list-bordered-sm-column-gap: 0;
1642
+ --hop-CheckboxGroup-list-bordered-sm-row-gap: 0;
1643
+ --hop-CheckboxGroup-md-column-gap: var(--hop-space-inline-md);
1644
+ --hop-CheckboxGroup-md-row-gap: var(--hop-space-stack-md);
1645
+ --hop-CheckboxGroup-list-md-column-gap: var(--hop-space-inline-md);
1646
+ --hop-CheckboxGroup-list-md-row-gap: var(--hop-space-stack-md);
1647
+ --hop-CheckboxGroup-bordered-md-padding: var(--hop-space-inset-md);
1648
+ --hop-CheckboxGroup-bordered-md-column-gap: var(--hop-space-inline-sm);
1649
+ --hop-CheckboxGroup-bordered-md-row-gap: var(--hop-space-stack-sm);
1650
+ --hop-CheckboxGroup-list-bordered-md-column-gap: 0;
1651
+ --hop-CheckboxGroup-list-bordered-md-row-gap: 0;
1652
+ --hop-CheckboxGroup-vertical-flex-direction: column;
1653
+ --hop-CheckboxGroup-horizontal-flex-direction: row;
1654
+ --checkbox-border-size: 0.0625rem;
1655
+ --checkbox-border-color: var(--hop-neutral-border-weak);
1656
+ --flex-direction: var(--hop-CheckboxGroup-vertical-flex-direction);
1657
+ --align-items: var(--hop-CheckboxGroup-align-items);
1658
+ --justify-content: var(--hop-CheckboxGroup-justify-content);
1659
+ --flex-wrap: wrap;
1660
+ display: flex;
1661
+ flex-direction: column;
1662
+ gap: var(--row-gap, var(--hop-space-stack-md)) var(--column-gap, var(--hop-space-inline-md));
1663
+ align-items: var(--align-items);
1664
+ justify-content: var(--justify-content);
1665
+ box-sizing: border-box;
1666
+ inline-size: max-content;
1667
+ max-inline-size: 100%;
1668
+ }
1669
+ .CheckboxGroup-module__hop-CheckboxGroup--bordered___-8cjG {
1670
+ --list-border: var(--checkbox-border-size) solid var(--checkbox-border-color);
1671
+ --list-border-radius: var(--hop-shape-rounded-md);
1672
+ }
1673
+ .CheckboxGroup-module__hop-CheckboxGroup--sm___gUe3Q {
1674
+ --column-gap: var(--hop-CheckboxGroup-sm-column-gap);
1675
+ --row-gap: var(--hop-CheckboxGroup-sm-row-gap);
1676
+ --list-column-gap: var(--hop-CheckboxGroup-list-sm-column-gap);
1677
+ --list-row-gap: var(--hop-CheckboxGroup-list-sm-row-gap);
1678
+ }
1679
+ .CheckboxGroup-module__hop-CheckboxGroup--md___KRNPK {
1680
+ --column-gap: var(--hop-CheckboxGroup-md-column-gap);
1681
+ --row-gap: var(--hop-CheckboxGroup-md-row-gap);
1682
+ --list-column-gap: var(--hop-CheckboxGroup-list-md-column-gap);
1683
+ --list-row-gap: var(--hop-CheckboxGroup-list-md-row-gap);
1684
+ }
1685
+ .CheckboxGroup-module__hop-CheckboxGroup--bordered___-8cjG.CheckboxGroup-module__hop-CheckboxGroup--sm___gUe3Q {
1686
+ --checkbox-padding: var(--hop-CheckboxGroup-bordered-sm-padding);
1687
+ --column-gap: var(--hop-CheckboxGroup-bordered-sm-column-gap);
1688
+ --row-gap: var(--hop-CheckboxGroup-bordered-sm-row-gap);
1689
+ --list-column-gap: var(--hop-CheckboxGroup-list-bordered-sm-column-gap);
1690
+ --list-row-gap: var(--hop-CheckboxGroup-list-bordered-sm-row-gap);
1691
+ }
1692
+ .CheckboxGroup-module__hop-CheckboxGroup--bordered___-8cjG.CheckboxGroup-module__hop-CheckboxGroup--md___KRNPK {
1693
+ --checkbox-padding: var(--hop-CheckboxGroup-bordered-md-padding);
1694
+ --column-gap: var(--hop-CheckboxGroup-bordered-md-column-gap);
1695
+ --row-gap: var(--hop-CheckboxGroup-bordered-md-row-gap);
1696
+ --list-column-gap: var(--hop-CheckboxGroup-list-bordered-md-column-gap);
1697
+ --list-row-gap: var(--hop-CheckboxGroup-list-bordered-md-row-gap);
1698
+ }
1699
+ .CheckboxGroup-module__hop-CheckboxGroup___nBYJh[data-orientation=horizontal] {
1700
+ --flex-direction: var(--hop-CheckboxGroup-horizontal-flex-direction);
1701
+ }
1702
+ .CheckboxGroup-module__hop-CheckboxGroup--bordered___-8cjG[data-orientation=horizontal] {
1703
+ --flex-wrap: nowrap;
1704
+ }
1705
+ .CheckboxGroup-module__hop-CheckboxGroup___nBYJh > .CheckboxGroup-module__hop-CheckboxGroup__label___JwdnG {
1706
+ order: 1;
1707
+ }
1708
+ .CheckboxGroup-module__hop-CheckboxGroup__list___hWoaT {
1709
+ display: flex;
1710
+ flex-flow: var(--flex-direction) var(--flex-wrap);
1711
+ gap: var(--list-row-gap, var(--hop-space-stack-md)) var(--list-column-gap, var(--hop-space-inline-md));
1712
+ order: 2;
1713
+ box-sizing: border-box;
1714
+ inline-size: max-content;
1715
+ max-inline-size: 100%;
1716
+ border: var(--list-border, none);
1717
+ border-radius: var(--list-border-radius, 0);
1718
+ }
1719
+ .CheckboxGroup-module__hop-CheckboxGroup__list___hWoaT > .CheckboxGroup-module__hop-CheckboxGroup__checkbox___DUT6w {
1720
+ position: relative;
1721
+ flex: 0 1 auto;
1722
+ align-content: start;
1723
+ inline-size: auto;
1724
+ min-inline-size: 0;
1725
+ padding: var(--checkbox-padding, 0);
1726
+ }
1727
+ .CheckboxGroup-module__hop-CheckboxGroup--bordered___-8cjG .CheckboxGroup-module__hop-CheckboxGroup__list___hWoaT > .CheckboxGroup-module__hop-CheckboxGroup__checkbox___DUT6w ~ .CheckboxGroup-module__hop-CheckboxGroup__checkbox___DUT6w::before {
1728
+ content: "";
1729
+ position: absolute;
1730
+ display: block;
1731
+ }
1732
+ .CheckboxGroup-module__hop-CheckboxGroup--bordered___-8cjG[data-orientation=vertical] .CheckboxGroup-module__hop-CheckboxGroup__list___hWoaT > .CheckboxGroup-module__hop-CheckboxGroup__checkbox___DUT6w ~ .CheckboxGroup-module__hop-CheckboxGroup__checkbox___DUT6w::before {
1733
+ inset-block-start: 0;
1734
+ inset-inline: 0;
1735
+ border-block-start: var(--list-border, none);
1736
+ }
1737
+ .CheckboxGroup-module__hop-CheckboxGroup--bordered___-8cjG[data-orientation=horizontal] .CheckboxGroup-module__hop-CheckboxGroup__list___hWoaT > .CheckboxGroup-module__hop-CheckboxGroup__checkbox___DUT6w ~ .CheckboxGroup-module__hop-CheckboxGroup__checkbox___DUT6w::before {
1738
+ inset-block: 0;
1739
+ inset-inline-start: 0;
1740
+ border-inline-start: var(--list-border, none);
1741
+ }
1742
+ .CheckboxGroup-module__hop-CheckboxGroup___nBYJh > .CheckboxGroup-module__hop-CheckboxGroup__error-message___mtOo4,
1743
+ .CheckboxGroup-module__hop-CheckboxGroup___nBYJh > .CheckboxGroup-module__hop-CheckboxGroup__helper-message___CysB1 {
1744
+ order: 3;
1745
+ }
1746
+
1747
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/Divider/src/Divider.module.css/#css-module-data */
1748
+ :where(.Divider-module__hop-Divider___jOTOX) {
1749
+ --hop-Divider-border-color: var(--hop-neutral-border-weak);
1750
+ --hop-Divider-border-size: 0.0625rem;
1751
+ --hop-Divider-horizontal-border-block-end: var(--hop-Divider-border-size) solid var(--hop-Divider-border-color);
1752
+ --hop-Divider-horizontal-border-inline-start: none;
1753
+ --hop-Divider-horizontal-inline-size: auto;
1754
+ --hop-Divider-horizontal-block-size: 0;
1755
+ --hop-Divider-vertical-border-inline-start: var(--hop-Divider-border-size) solid var(--hop-Divider-border-color);
1756
+ --hop-Divider-vertical-border-block-end: none;
1757
+ --hop-Divider-vertical-inline-size: 0;
1758
+ --hop-Divider-vertical-block-size: auto;
1759
+ --border-block-end: var(--hop-Divider-horizontal-border-block-end);
1760
+ --border-inline-start: var(--hop-Divider-horizontal-border-inline-start);
1761
+ --inline-size: var(--hop-Divider-horizontal-inline-size);
1762
+ --block-size: var(--hop-Divider-horizontal-block-size);
1763
+ display: block;
1764
+ flex: 0 0 auto;
1765
+ box-sizing: border-box;
1766
+ inline-size: var(--inline-size);
1767
+ block-size: var(--block-size);
1768
+ margin: 0;
1769
+ border: none;
1770
+ border-block-end: var(--border-block-end);
1771
+ border-inline-start: var(--border-inline-start);
1772
+ }
1773
+ .Divider-module__hop-Divider--vertical___8HYrb {
1774
+ --border-block-end: var(--hop-Divider-vertical-border-block-end);
1775
+ --border-inline-start: var(--hop-Divider-vertical-border-inline-start);
1776
+ --inline-size: var(--hop-Divider-vertical-inline-size);
1777
+ --block-size: var(--hop-Divider-vertical-block-size);
1778
+ }
1779
+
1780
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/inputs/src/InputGroup.module.css/#css-module-data */
1781
+ .InputGroup-module__hop-InputGroup___JGJFG {
1782
+ --hop-InputGroup-background: var(--hop-neutral-surface);
1783
+ --hop-InputGroup-border-color: var(--hop-neutral-border);
1784
+ --hop-InputGroup-border-width: 0.0625rem;
1785
+ --hop-InputGroup-display: inline-flex;
1786
+ --hop-InputGroup-display-number: grid;
1787
+ --hop-InputGroup-gap: var(--hop-space-inline-sm);
1788
+ --hop-InputGroup-gap-textarea: 0;
1789
+ --hop-InputGroup-gap-number: 0;
1790
+ --hop-InputGroup-flex-direction: row;
1791
+ --hop-InputGroup-flex-direction-textarea: column;
1792
+ --hop-InputGroup-align-items: center;
1793
+ --hop-InputGroup-align-items-textarea: flex-end;
1794
+ --hop-InputGroup-inline-size: fit-content;
1795
+ --hop-InputGroup-inline-size-number: 100%;
1796
+ --hop-InputGroup-sm-block-size: 2rem;
1797
+ --hop-InputGroup-md-block-size: 2.5rem;
1798
+ --hop-InputGroup-block-size-textarea: auto;
1799
+ --hop-InputGroup-border-radius: var(--hop-shape-rounded-md);
1800
+ --hop-InputGroup-padding-inline: var(--hop-space-inset-md);
1801
+ --hop-InputGroup-padding-block: 0;
1802
+ --hop-InputGroup-padding-inline-textarea: var(--hop-space-inset-xs);
1803
+ --hop-InputGroup-padding-block-textarea: var(--hop-space-inset-xs);
1804
+ --hop-InputGroup-border-color-hover: var(--hop-neutral-border-hover);
1805
+ --hop-InputGroup-border-color-focus: var(--hop-primary-border-focus);
1806
+ --hop-InputGroup-background-hover: var(--hop-neutral-surface-hover);
1807
+ --hop-InputGroup-border-color-invalid: var(--hop-danger-border-strong);
1808
+ --hop-InputGroup-input-color: var(--hop-neutral-text);
1809
+ --hop-InputGroup-input-color-disabled: var(--hop-neutral-text-disabled);
1810
+ --hop-InputGroup-input-sm-font-family: var(--hop-body-sm-font-family);
1811
+ --hop-InputGroup-input-sm-font-size: var(--hop-body-sm-font-size);
1812
+ --hop-InputGroup-input-sm-font-weight: var(--hop-body-sm-font-weight);
1813
+ --hop-InputGroup-input-sm-line-height: var(--hop-body-sm-line-height);
1814
+ --hop-InputGroup-input-sm-block-size: 1.5rem;
1815
+ --hop-InputGroup-input-md-font-family: var(--hop-body-md-font-family);
1816
+ --hop-InputGroup-input-md-font-size: var(--hop-body-md-font-size);
1817
+ --hop-InputGroup-input-md-font-weight: var(--hop-body-md-font-weight);
1818
+ --hop-InputGroup-input-md-line-height: var(--hop-body-md-line-height);
1819
+ --hop-InputGroup-input-md-block-size: 2rem;
1820
+ --hop-InputGroup-input-padding: 0;
1821
+ --hop-InputGroup-textarea-padding: var(--hop-space-inset-xs) calc(var(--hop-space-inset-md) - var(--hop-space-inset-xs));
1822
+ --hop-InputGroup-background-disabled: var(--hop-neutral-surface-disabled);
1823
+ --hop-InputGroup-border-color-disabled: var(--hop-neutral-border-disabled);
1824
+ --hop-InputGroup-placeholder-font-family: inherit;
1825
+ --hop-InputGroup-placeholder-font-size: inherit;
1826
+ --hop-InputGroup-placeholder-font-weight: inherit;
1827
+ --hop-InputGroup-placeholder-line-height: inherit;
1828
+ --hop-InputGroup-placeholder-color: var(--hop-neutral-text-weakest);
1829
+ --hop-InputGroup-placeholder-color-disabled: var(--hop-neutral-text-disabled);
1830
+ --inline-size: var(--hop-InputGroup-inline-size);
1831
+ --border: var(--hop-InputGroup-border-width) solid var(--hop-InputGroup-border-color);
1832
+ --background: var(--hop-InputGroup-background);
1833
+ --block-size: var(--hop-InputGroup-md-block-size);
1834
+ --display: var(--hop-InputGroup-display);
1835
+ --gap: var(--hop-InputGroup-gap);
1836
+ --flex-direction: var(--hop-InputGroup-flex-direction);
1837
+ --align-items: var(--hop-InputGroup-align-items);
1838
+ --padding-inline: var(--hop-InputGroup-padding-inline);
1839
+ --padding-block: var(--hop-InputGroup-padding-block);
1840
+ --input-font-family: var(--hop-InputGroup-input-md-font-family);
1841
+ --input-font-size: var(--hop-InputGroup-input-md-font-size);
1842
+ --input-font-weight: var(--hop-InputGroup-input-md-font-weight);
1843
+ --input-line-height: var(--hop-InputGroup-input-md-line-height);
1844
+ --input-block-size: var(--hop-InputGroup-input-md-block-size);
1845
+ --input-inline-size: initial;
1846
+ --input-color: var(--hop-InputGroup-input-color);
1847
+ --input-placeholder-color: var(--hop-InputGroup-placeholder-color);
1848
+ position: relative;
1849
+ display: var(--display);
1850
+ flex-direction: var(--flex-direction);
1851
+ gap: var(--gap);
1852
+ align-items: var(--align-items);
1853
+ box-sizing: border-box;
1854
+ inline-size: var(--inline-size);
1855
+ block-size: var(--block-size);
1856
+ padding-block: var(--padding-block);
1857
+ padding-inline: var(--padding-inline);
1858
+ background: var(--background);
1859
+ border: var(--border);
1860
+ border-radius: var(--hop-InputGroup-border-radius);
1861
+ }
1862
+ .InputGroup-module__hop-InputGroup--fluid___6JfQH {
1863
+ --inline-size: 100%;
1864
+ --input-inline-size: 100%;
1865
+ }
1866
+ .InputGroup-module__hop-InputGroup--sm___JoxWu {
1867
+ --block-size: var(--hop-InputGroup-sm-block-size);
1868
+ --input-font-family: var(--hop-InputGroup-input-sm-font-family);
1869
+ --input-font-size: var(--hop-InputGroup-input-sm-font-size);
1870
+ --input-font-weight: var(--hop-InputGroup-input-sm-font-weight);
1871
+ --input-line-height: var(--hop-InputGroup-input-sm-line-height);
1872
+ --input-block-size: var(--hop-InputGroup-input-sm-block-size);
1873
+ }
1874
+ .InputGroup-module__hop-InputGroup___JGJFG[data-input-type=textarea] {
1875
+ --gap: var(--hop-InputGroup-gap-textarea);
1876
+ --flex-direction: var(--hop-InputGroup-flex-direction-textarea);
1877
+ --align-items: var(--hop-InputGroup-align-items-textarea);
1878
+ --block-size: var(--hop-InputGroup-block-size-textarea);
1879
+ --padding-inline: var(--hop-InputGroup-padding-inline-textarea);
1880
+ --padding-block: var(--hop-InputGroup-padding-block-textarea);
1881
+ }
1882
+ .InputGroup-module__hop-InputGroup___JGJFG[data-input-type=number] {
1883
+ --display: var(--hop-InputGroup-display-number);
1884
+ --gap: var(--hop-InputGroup-gap-number);
1885
+ --inline-size: var(--hop-InputGroup-inline-size-number);
1886
+ }
1887
+ .InputGroup-module__hop-InputGroup___JGJFG[data-hovered] {
1888
+ --background: var(--hop-InputGroup-background-hover);
1889
+ --border: var(--hop-InputGroup-border-width) solid var(--hop-InputGroup-border-color-hover) ;
1890
+ }
1891
+ .InputGroup-module__hop-InputGroup___JGJFG[data-focus-within] {
1892
+ --border: var(--hop-InputGroup-border-width) solid var(--hop-InputGroup-border-color-focus) ;
1893
+ }
1894
+ .InputGroup-module__hop-InputGroup___JGJFG[data-invalid] {
1895
+ --border: var(--hop-InputGroup-border-width) solid var(--hop-InputGroup-border-color-invalid) ;
1896
+ }
1897
+ .InputGroup-module__hop-InputGroup___JGJFG[data-disabled] {
1898
+ --background: var(--hop-InputGroup-background-disabled);
1899
+ --border: 0.0625rem solid var(--hop-InputGroup-border-color-disabled);
1900
+ --input-color: var(--hop-InputGroup-input-color-disabled);
1901
+ --input-placeholder-color: var(--hop-InputGroup-placeholder-color-disabled);
1902
+ }
1903
+ .InputGroup-module__hop-InputGroup__input___2VtDU,
1904
+ .InputGroup-module__hop-InputGroup__textarea___eOkGw {
1905
+ flex: 1 1 auto;
1906
+ box-sizing: border-box;
1907
+ inline-size: var(--input-inline-size);
1908
+ min-inline-size: 0;
1909
+ font-family: var(--input-font-family);
1910
+ font-size: var(--input-font-size);
1911
+ font-weight: var(--input-font-weight);
1912
+ line-height: var(--input-line-height);
1913
+ color: var(--input-color);
1914
+ background: transparent;
1915
+ border: none;
1916
+ outline: none;
1917
+ }
1918
+ .InputGroup-module__hop-InputGroup__input___2VtDU {
1919
+ block-size: var(--input-block-size);
1920
+ padding: var(--hop-InputGroup-input-padding);
1921
+ }
1922
+ .InputGroup-module__hop-InputGroup__textarea___eOkGw {
1923
+ padding: var(--hop-InputGroup-textarea-padding);
1924
+ }
1925
+ .InputGroup-module__hop-InputGroup__input___2VtDU::placeholder {
1926
+ font-family: var(--hop-InputGroup-placeholder-font-family);
1927
+ font-size: var(--hop-InputGroup-placeholder-font-size);
1928
+ font-weight: var(--hop-InputGroup-placeholder-font-weight);
1929
+ line-height: var(--hop-InputGroup-placeholder-line-height);
1930
+ color: var(--input-placeholder-color);
1931
+ }
1932
+
1933
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/Heading/src/Heading.module.css/#css-module-data */
1934
+ .Heading-module__hop-Heading___uAJ5h {
1935
+ --hop-Heading-xs-font-size: var(--hop-heading-xs-font-size);
1936
+ --hop-Heading-xs-font-family: var(--hop-heading-xs-font-family);
1937
+ --hop-Heading-xs-font-weight: var(--hop-heading-xs-font-weight);
1938
+ --hop-Heading-xs-line-height: var(--hop-heading-xs-line-height);
1939
+ --hop-Heading-sm-font-size: var(--hop-heading-sm-font-size);
1940
+ --hop-Heading-sm-font-family: var(--hop-heading-sm-font-family);
1941
+ --hop-Heading-sm-font-weight: var(--hop-heading-sm-font-weight);
1942
+ --hop-Heading-sm-line-height: var(--hop-heading-sm-line-height);
1943
+ --hop-Heading-md-font-size: var(--hop-heading-md-font-size);
1944
+ --hop-Heading-md-font-family: var(--hop-heading-md-font-family);
1945
+ --hop-Heading-md-font-weight: var(--hop-heading-md-font-weight);
1946
+ --hop-Heading-md-line-height: var(--hop-heading-md-line-height);
1947
+ --hop-Heading-lg-font-size: var(--hop-heading-lg-font-size);
1948
+ --hop-Heading-lg-font-family: var(--hop-heading-lg-font-family);
1949
+ --hop-Heading-lg-font-weight: var(--hop-heading-lg-font-weight);
1950
+ --hop-Heading-lg-line-height: var(--hop-heading-lg-line-height);
1951
+ --hop-Heading-xl-font-size: var(--hop-heading-xl-font-size);
1952
+ --hop-Heading-xl-font-family: var(--hop-heading-xl-font-family);
1953
+ --hop-Heading-xl-font-weight: var(--hop-heading-xl-font-weight);
1954
+ --hop-Heading-xl-line-height: var(--hop-heading-xl-line-height);
1955
+ --hop-Heading-2xl-font-size: var(--hop-heading-2xl-font-size);
1956
+ --hop-Heading-2xl-font-family: var(--hop-heading-2xl-font-family);
1957
+ --hop-Heading-2xl-font-weight: var(--hop-heading-2xl-font-weight);
1958
+ --hop-Heading-2xl-line-height: var(--hop-heading-2xl-line-height);
1959
+ --hop-Heading-3xl-font-size: var(--hop-heading-3xl-font-size);
1960
+ --hop-Heading-3xl-font-family: var(--hop-heading-3xl-font-family);
1961
+ --hop-Heading-3xl-font-weight: var(--hop-heading-3xl-font-weight);
1962
+ --hop-Heading-3xl-line-height: var(--hop-heading-3xl-line-height);
1963
+ --hop-Heading-inherit-size-font-size: inherit;
1964
+ --hop-Heading-inherit-size-font-family: inherit;
1965
+ --hop-Heading-inherit-size-font-weight: inherit;
1966
+ --hop-Heading-inherit-size-line-height: inherit;
1967
+ }
1968
+ :where(.Heading-module__hop-Heading___uAJ5h) {
1969
+ margin: 0;
1970
+ font-family: var(--font-family);
1971
+ font-size: var(--font-size);
1972
+ font-weight: var(--font-weight);
1973
+ line-height: var(--line-height);
1974
+ }
1975
+ :where(.Heading-module__hop-Heading--xs___GM0hn) {
1976
+ --font-size: var(--hop-Heading-xs-font-size);
1977
+ --font-family: var(--hop-Heading-xs-font-family);
1978
+ --font-weight: var(--hop-Heading-xs-font-weight);
1979
+ --line-height: var(--hop-Heading-xs-line-height);
1980
+ }
1981
+ :where(.Heading-module__hop-Heading--sm___jvfjH) {
1982
+ --font-size: var(--hop-Heading-sm-font-size);
1983
+ --font-family: var(--hop-Heading-sm-font-family);
1984
+ --font-weight: var(--hop-Heading-sm-font-weight);
1985
+ --line-height: var(--hop-Heading-sm-line-height);
1986
+ }
1987
+ :where(.Heading-module__hop-Heading--md___8sUov) {
1988
+ --font-size: var(--hop-Heading-md-font-size);
1989
+ --font-family: var(--hop-Heading-md-font-family);
1990
+ --font-weight: var(--hop-Heading-md-font-weight);
1991
+ --line-height: var(--hop-Heading-md-line-height);
1992
+ }
1993
+ :where(.Heading-module__hop-Heading--lg___AaXUx) {
1994
+ --font-size: var(--hop-Heading-lg-font-size);
1995
+ --font-family: var(--hop-Heading-lg-font-family);
1996
+ --font-weight: var(--hop-Heading-lg-font-weight);
1997
+ --line-height: var(--hop-Heading-lg-line-height);
1998
+ }
1999
+ :where(.Heading-module__hop-Heading--xl___V5Rgs) {
2000
+ --font-size: var(--hop-Heading-xl-font-size);
2001
+ --font-family: var(--hop-Heading-xl-font-family);
2002
+ --font-weight: var(--hop-Heading-xl-font-weight);
2003
+ --line-height: var(--hop-Heading-xl-line-height);
2004
+ }
2005
+ :where(.Heading-module__hop-Heading--2xl___21pHk) {
2006
+ --font-size: var(--hop-Heading-2xl-font-size);
2007
+ --font-family: var(--hop-Heading-2xl-font-family);
2008
+ --font-weight: var(--hop-Heading-2xl-font-weight);
2009
+ --line-height: var(--hop-Heading-2xl-line-height);
2010
+ }
2011
+ :where(.Heading-module__hop-Heading--3xl___Z-RFz) {
2012
+ --font-size: var(--hop-Heading-3xl-font-size);
2013
+ --font-family: var(--hop-Heading-3xl-font-family);
2014
+ --font-weight: var(--hop-Heading-3xl-font-weight);
2015
+ --line-height: var(--hop-Heading-3xl-line-height);
2016
+ }
2017
+
2018
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/inputs/src/NumberField.module.css/#css-module-data */
2019
+ .NumberField-module__hop-NumberField___UgGQL {
2020
+ --hop-NumberField-gap: var(--hop-space-stack-xs);
2021
+ --hop-NumberField-inline-size: 20rem;
2022
+ --hop-NumberField-inline-size-fluid: 100%;
2023
+ --hop-NumberField-prefix-color: var(--hop-neutral-text-weak);
2024
+ --hop-NumberField-prefix-margin-inline-end: var(--hop-space-inline-sm);
2025
+ --hop-NumberField-input-group-display: grid;
2026
+ --hop-NumberField-input-group-template: "prefix input stepup" auto "prefix input stepdown" auto / auto 1fr auto;
2027
+ --hop-NumberField-input-group-template-mobile: "stepdown prefix input stepup" auto / auto auto 1fr auto;
2028
+ --hop-NumberField-stepper-color: var(--hop-neutral-icon);
2029
+ --hop-NumberField-stepper-color-hovered: var(--hop-neutral-icon-hover);
2030
+ --hop-NumberField-stepper-color-pressed: var(--hop-neutral-icon-press);
2031
+ --hop-NumberField-stepper-color-disabled: var(--hop-neutral-icon-disabled);
2032
+ --hop-NumberField-stepper-background-color: var(--hop-neutral-surface);
2033
+ --hop-NumberField-stepper-background-color-hovered: var(--hop-neutral-surface-hover);
2034
+ --hop-NumberField-stepper-background-color-pressed: var(--hop-neutral-surface-press);
2035
+ --hop-NumberField-stepper-background-color-disabled: transparent;
2036
+ --hop-NumberField-stepper-border-radius: calc(var(--hop-shape-rounded-sm));
2037
+ --hop-NumberField-stepper-border-radius-increment: var(--hop-NumberField-stepper-border-radius) var(--hop-NumberField-stepper-border-radius) 0 0;
2038
+ --hop-NumberField-stepper-border-radius-decrement: 0 0 var(--hop-NumberField-stepper-border-radius) var(--hop-NumberField-stepper-border-radius);
2039
+ --hop-NumberField-stepper-border-radius-mobile-increment: 0 var(--hop-shape-rounded-md) var(--hop-shape-rounded-md) 0;
2040
+ --hop-NumberField-stepper-border-radius-mobile-decrement: var(--hop-shape-rounded-md) 0 0 var(--hop-shape-rounded-md);
2041
+ --hop-NumberField-stepper-height: 0.86rem;
2042
+ --hop-NumberField-stepper-height-mobile: 100%;
2043
+ --hop-NumberField-stepper-width: 1.5rem;
2044
+ --hop-NumberField-stepper-border-color: var(--hop-neutral-border);
2045
+ --hop-NumberField-stepper-border-width: 0.0625rem;
2046
+ --hop-NumberField-stepper-align-self-increment: end;
2047
+ --hop-NumberField-stepper-align-self-decrement: start;
2048
+ --hop-NumberField-stepper-align-self-increment-mobile: center;
2049
+ --hop-NumberField-stepper-align-self-decrement-mobile: center;
2050
+ --hop-NumberField-stepper-margin-inline-increment: var(--hop-space-inline-sm) calc(-1 * var(--hop-space-inline-sm));
2051
+ --hop-NumberField-stepper-margin-inline-decrement: var(--hop-space-inline-sm) calc(-1 * var(--hop-space-inline-sm));
2052
+ --hop-NumberField-stepper-margin-inline-increment-mobile: var(--hop-space-inline-sm) calc(-1 * var(--hop-space-inline-md));
2053
+ --hop-NumberField-stepper-margin-inline-decrement-mobile: calc(-1 * var(--hop-space-inline-md)) var(--hop-space-inline-sm);
2054
+ --inline-size: var(--hop-NumberField-inline-size);
2055
+ --stepper-color: var(--hop-NumberField-stepper-color);
2056
+ --stepper-background-color: var(--hop-NumberField-stepper-background-color);
2057
+ --stepper-border: var(--hop-NumberField-stepper-border-width) solid var(--hop-NumberField-stepper-border-color);
2058
+ --stepper-height: var(--hop-NumberField-stepper-height);
2059
+ --input-group-display: var(--hop-NumberField-input-group-display);
2060
+ --input-group-template: var(--hop-NumberField-input-group-template);
2061
+ overflow: hidden;
2062
+ display: flex;
2063
+ flex-direction: column;
2064
+ gap: var(--hop-NumberField-gap);
2065
+ inline-size: var(--inline-size);
2066
+ }
2067
+ .NumberField-module__hop-NumberField--fluid___JQJsO {
2068
+ --inline-size: var(--hop-NumberField-inline-size-fluid);
2069
+ }
2070
+ .NumberField-module__hop-NumberField--mobile___-rjzF {
2071
+ --input-group-template: var(--hop-NumberField-input-group-template-mobile);
2072
+ --stepper-height: var(--hop-NumberField-stepper-height-mobile);
2073
+ }
2074
+ .NumberField-module__hop-NumberField__Label___AIkme {
2075
+ order: 0;
2076
+ }
2077
+ .NumberField-module__hop-NumberField__prefix___k9Amr {
2078
+ grid-area: prefix;
2079
+ margin-inline-end: var(--hop-NumberField-prefix-margin-inline-end);
2080
+ color: var(--hop-NumberField-prefix-color);
2081
+ }
2082
+ .NumberField-module__hop-NumberField__InputGroup___AmBST {
2083
+ grid-template: var(--input-group-template);
2084
+ order: 1;
2085
+ }
2086
+ .NumberField-module__hop-NumberField__ErrorMessage___1ZR-C,
2087
+ .NumberField-module__hop-NumberField__HelperMessage___aL7XZ {
2088
+ order: 3;
2089
+ }
2090
+ .NumberField-module__hop-NumberField__stepper-button___O8-2A {
2091
+ cursor: pointer;
2092
+ display: flex;
2093
+ grid-area: var(--grid-area, unset);
2094
+ align-items: center;
2095
+ align-self: var(--stepper-align-self);
2096
+ justify-content: center;
2097
+ box-sizing: border-box;
2098
+ inline-size: var(--hop-NumberField-stepper-width);
2099
+ block-size: var(--stepper-height);
2100
+ margin-inline: var(--stepper-margin-inline);
2101
+ padding: 0;
2102
+ color: var(--stepper-color);
2103
+ background-color: var(--stepper-background-color);
2104
+ border-color: var(--hop-NumberField-stepper-border-color);
2105
+ border-style: solid;
2106
+ border-width: var(--stepper-border-width);
2107
+ border-radius: var(--stepper-border-radius, 0);
2108
+ outline: none;
2109
+ }
2110
+ .NumberField-module__hop-NumberField__stepper-button--increment___yxvZH {
2111
+ --stepper-border-radius: var(--hop-NumberField-stepper-border-radius-increment);
2112
+ --stepper-border-width: var(--hop-NumberField-stepper-border-width) var(--hop-NumberField-stepper-border-width) 0 var(--hop-NumberField-stepper-border-width);
2113
+ --stepper-align-self: var(--hop-NumberField-stepper-align-self-increment);
2114
+ --stepper-margin-inline: var(--hop-NumberField-stepper-margin-inline-increment);
2115
+ --grid-area: stepup;
2116
+ }
2117
+ .NumberField-module__hop-NumberField__stepper-button--decrement___z-fu- {
2118
+ --stepper-border-radius: var(--hop-NumberField-stepper-border-radius-decrement);
2119
+ --stepper-border-width: 0 var(--hop-NumberField-stepper-border-width) var(--hop-NumberField-stepper-border-width) var(--hop-NumberField-stepper-border-width);
2120
+ --stepper-align-self: var(--hop-NumberField-stepper-align-self-decrement);
2121
+ --stepper-margin-inline: var(--hop-NumberField-stepper-margin-inline-decrement);
2122
+ --grid-area: stepdown;
2123
+ }
2124
+ .NumberField-module__hop-NumberField__stepper-button--mobile___2Fw9-.NumberField-module__hop-NumberField__stepper-button--increment___yxvZH {
2125
+ --stepper-border-width: 0 0 0 var(--hop-NumberField-stepper-border-width);
2126
+ --stepper-align-self: var(--hop-NumberField-stepper-align-self-increment-mobile);
2127
+ --stepper-margin-inline: var(--hop-NumberField-stepper-margin-inline-increment-mobile);
2128
+ --stepper-border-radius: var(--hop-NumberField-stepper-border-radius-mobile-increment);
2129
+ }
2130
+ .NumberField-module__hop-NumberField__stepper-button--mobile___2Fw9-.NumberField-module__hop-NumberField__stepper-button--decrement___z-fu- {
2131
+ --stepper-border-width: 0 var(--hop-NumberField-stepper-border-width) 0 0;
2132
+ --stepper-align-self: var(--hop-NumberField-stepper-align-self-decrement-mobile);
2133
+ --stepper-margin-inline: var(--hop-NumberField-stepper-margin-inline-decrement-mobile);
2134
+ --stepper-border-radius: var(--hop-NumberField-stepper-border-radius-mobile-decrement);
2135
+ }
2136
+ .NumberField-module__hop-NumberField__stepper-button___O8-2A[data-hovered] {
2137
+ color: var(--hop-NumberField-stepper-color-hovered);
2138
+ background-color: var(--hop-NumberField-stepper-background-color-hovered);
2139
+ }
2140
+ .NumberField-module__hop-NumberField__stepper-button___O8-2A[data-pressed] {
2141
+ color: var(--hop-NumberField-stepper-color-pressed);
2142
+ background-color: var(--hop-NumberField-stepper-background-color-pressed);
2143
+ }
2144
+ .NumberField-module__hop-NumberField__stepper-button___O8-2A[data-disabled] {
2145
+ cursor: not-allowed;
2146
+ color: var(--hop-NumberField-stepper-color-disabled);
2147
+ background-color: var(--hop-NumberField-stepper-background-color-disabled);
2148
+ }
2149
+ .NumberField-module__hop-NumberField__stepper-button__icon___QtyaS {
2150
+ display: block;
2151
+ max-block-size: 100%;
2152
+ }
2153
+ .NumberField-module__hop-NumberField__input___XsNK4 {
2154
+ grid-area: input;
2155
+ }
2156
+
2157
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/inputs/src/TextArea.module.css/#css-module-data */
2158
+ .TextArea-module__hop-TextArea___RQPX1 {
2159
+ --hop-TextArea-gap: var(--hop-space-stack-xs);
2160
+ --hop-TextArea-inline-size: 20rem;
2161
+ --hop-TextArea-prefix-color: var(--hop-neutral-text-weak);
2162
+ --hop-TextArea-char-count-padding: 0 calc(var(--hop-space-inset-md) - var(--hop-space-inset-xs)) var(--hop-space-inset-xs);
2163
+ --hop-TextArea-char-count-color: var(--hop-neutral-text-weakest);
2164
+ --hop-TextArea-char-count-color-disabled: var(--hop-neutral-text-disabled);
2165
+ --hop-TextArea-char-count-color-invalid: var(--hop-danger-text-weak);
2166
+ --hop-TextArea-input-min-height: 2rem;
2167
+ --inline-size: var(--hop-TextArea-inline-size);
2168
+ --resize: none;
2169
+ --char-count-color: var(--hop-TextArea-char-count-color);
2170
+ display: flex;
2171
+ flex-direction: column;
2172
+ gap: var(--hop-TextArea-gap);
2173
+ inline-size: var(--inline-size);
2174
+ }
2175
+ .TextArea-module__hop-TextArea--fluid___8Dtb- {
2176
+ --inline-size: 100%;
2177
+ }
2178
+ .TextArea-module__hop-TextArea___RQPX1[data-resize-mode=vertical] {
2179
+ --resize: vertical;
2180
+ }
2181
+ .TextArea-module__hop-TextArea___RQPX1[data-over-max-length] {
2182
+ --char-count-color: var(--hop-TextArea-char-count-color-invalid);
2183
+ }
2184
+ .TextArea-module__hop-TextArea___RQPX1[data-disabled] {
2185
+ --char-count-color: var(--hop-TextArea-char-count-color-disabled);
2186
+ }
2187
+ .TextArea-module__hop-TextArea__Label___up8f- {
2188
+ order: 0;
2189
+ }
2190
+ .TextArea-module__hop-TextArea__prefix___Goc9g {
2191
+ color: var(--hop-TextArea-prefix-color);
2192
+ }
2193
+ .TextArea-module__hop-TextArea__InputGroup___5CqUn {
2194
+ order: 1;
2195
+ }
2196
+ .TextArea-module__hop-TextArea__textarea___Hc7Ow {
2197
+ resize: var(--resize);
2198
+ min-block-size: var(--hop-TextArea-input-min-height);
2199
+ }
2200
+ .TextArea-module__hop-TextArea__char-count___U8NGM {
2201
+ padding: var(--hop-TextArea-char-count-padding);
2202
+ color: var(--char-count-color);
2203
+ }
2204
+ .TextArea-module__hop-TextArea__ErrorMessage___QQhT-,
2205
+ .TextArea-module__hop-TextArea__HelperMessage___JSKR5 {
2206
+ order: 3;
2207
+ }
2208
+
2209
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/inputs/src/TextField.module.css/#css-module-data */
2210
+ .TextField-module__hop-TextField___YVH8a {
2211
+ --hop-TextField-gap: var(--hop-space-stack-xs);
2212
+ --hop-TextField-inline-size: 20rem;
2213
+ --hop-TextField-prefix-color: var(--hop-neutral-text-weak);
2214
+ --inline-size: var(--hop-TextField-inline-size);
2215
+ display: flex;
2216
+ flex-direction: column;
2217
+ gap: var(--hop-TextField-gap);
2218
+ inline-size: var(--inline-size);
2219
+ }
2220
+ .TextField-module__hop-TextField--fluid___ZNRHZ {
2221
+ --inline-size: 100%;
2222
+ }
2223
+ .TextField-module__hop-TextField__Label___ztJuQ {
2224
+ order: 0;
2225
+ }
2226
+ .TextField-module__hop-TextField__prefix___Jjuy- {
2227
+ color: var(--hop-TextField-prefix-color);
2228
+ }
2229
+ .TextField-module__hop-TextField__InputGroup___N7bZl {
2230
+ order: 1;
2231
+ }
2232
+ .TextField-module__hop-TextField__ErrorMessage___CUNme,
2233
+ .TextField-module__hop-TextField__HelperMessage___FIu1i {
2234
+ order: 3;
2235
+ }
2236
+
2237
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/inputs/src/PasswordField.module.css/#css-module-data */
2238
+ .PasswordField-module__hop-PasswordField___lt7Vx {
2239
+ --hop-PasswordField-gap: var(--hop-space-stack-xs);
2240
+ --hop-PasswordField-inline-size: 20rem;
2241
+ --inline-size: var(--hop-PasswordField-inline-size);
2242
+ display: flex;
2243
+ flex-direction: column;
2244
+ gap: var(--hop-PasswordField-gap);
2245
+ inline-size: var(--inline-size);
2246
+ }
2247
+ .PasswordField-module__hop-PasswordField--fluid___gKwge {
2248
+ --inline-size: 100%;
2249
+ }
2250
+ .PasswordField-module__hop-PasswordField__Label___sPG7D {
2251
+ order: 0;
2252
+ }
2253
+ .PasswordField-module__hop-PasswordField__InputGroup___xPVPF {
2254
+ order: 1;
2255
+ }
2256
+ .PasswordField-module__hop-PasswordField__ErrorMessage___b3s4v,
2257
+ .PasswordField-module__hop-PasswordField__HelperMessage___oeGil {
2258
+ order: 3;
2259
+ }
2260
+
2261
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/inputs/src/SearchField.module.css/#css-module-data */
2262
+ .SearchField-module__hop-SearchField___1Lofe {
2263
+ --hop-SearchField-gap: var(--hop-space-stack-xs);
2264
+ --hop-SearchField-inline-size: 20rem;
2265
+ --hop-SearchField-color: var(--hop-neutral-text-weak);
2266
+ --hop-SearchField-padding: var(--hop-space-inset-md);
2267
+ --inline-size: var(--hop-SearchField-inline-size);
2268
+ --input-group-padding-inline-end: var(--hop-SearchField-padding);
2269
+ --input-group-padding-inline-start: var(--hop-SearchField-padding);
2270
+ --clear-button-display: flex;
2271
+ display: flex;
2272
+ flex-direction: column;
2273
+ gap: var(--hop-SearchField-gap);
2274
+ inline-size: var(--inline-size);
2275
+ }
2276
+ .SearchField-module__hop-SearchField--fluid___FFqyK {
2277
+ --inline-size: 100%;
2278
+ }
2279
+ .SearchField-module__hop-SearchField__Label___X46if {
2280
+ order: 0;
2281
+ }
2282
+ .SearchField-module__hop-SearchField__prefix___mdypj {
2283
+ color: var(--hop-SearchField-color);
2284
+ }
2285
+ .SearchField-module__hop-SearchField__InputGroup___-mBBv {
2286
+ order: 1;
2287
+ padding-inline: var(--input-group-padding-inline-start) var(--input-group-padding-inline-end);
2288
+ }
2289
+ .SearchField-module__hop-SearchField--clearable___7zPYO {
2290
+ --input-group-padding-inline-end: 0;
2291
+ }
2292
+ .SearchField-module__hop-SearchField__ErrorMessage___ETtN4,
2293
+ .SearchField-module__hop-SearchField__HelperMessage___yE4eo {
2294
+ order: 3;
2295
+ }
2296
+ .SearchField-module__hop-SearchField___1Lofe input::-webkit-search-cancel-button,
2297
+ .SearchField-module__hop-SearchField___1Lofe input::-webkit-search-decoration {
2298
+ appearance: none;
2299
+ }
2300
+ .SearchField-module__hop-SearchField___1Lofe[data-empty] {
2301
+ --clear-button-display: none;
2302
+ }
2303
+ .SearchField-module__hop-SearchField__ClearButton___-jk3D {
2304
+ display: var(--clear-button-display);
2305
+ }
2306
+
2307
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/Link/src/Link.module.css/#css-module-data */
2308
+ .Link-module__hop-Link___Boezo {
2309
+ --hop-Link-border-radius: var(--hop-shape-rounded-sm);
2310
+ --hop-Link-focus-ring-color: var(--hop-primary-border-focus);
2311
+ --hop-Link-color-disabled: var(--hop-neutral-text-disabled);
2312
+ --hop-Link-column-gap: var(--hop-space-inline-xs);
2313
+ --hop-Link-primary-text-color: var(--hop-primary-text);
2314
+ --hop-Link-primary-text-disabled-color: var(--hop-primary-text-disabled);
2315
+ --hop-Link-primary-text-hover-color: var(--hop-primary-text-hover);
2316
+ --hop-Link-primary-text-pressed-color: var(--hop-primary-text-press);
2317
+ --hop-Link-neutral-text-color: var(--hop-neutral-text);
2318
+ --hop-Link-neutral-text-disabled-color: var(--hop-neutral-text-disabled);
2319
+ --hop-Link-neutral-text-hover-color: var(--hop-neutral-text-hover);
2320
+ --hop-Link-neutral-text-pressed-color: var(--hop-neutral-text-press);
2321
+ cursor: pointer;
2322
+ display: inline-flex;
2323
+ column-gap: var(--hop-Link-column-gap);
2324
+ align-items: center;
2325
+ box-sizing: border-box;
2326
+ inline-size: fit-content;
2327
+ text-decoration: none;
2328
+ text-underline-offset: 0.125rem;
2329
+ border-radius: var(--hop-Link-border-radius);
2330
+ outline: none;
2331
+ outline-offset: 0.125rem;
2332
+ }
2333
+ .Link-module__hop-Link___Boezo[data-focus-visible] {
2334
+ outline: 0.125rem solid var(--hop-Link-focus-ring-color);
2335
+ }
2336
+ .Link-module__hop-Link___Boezo[data-disabled] {
2337
+ cursor: default;
2338
+ }
2339
+ .Link-module__hop-Link--quiet___77fxF[data-focus-visible],
2340
+ .Link-module__hop-Link--quiet___77fxF[data-hovered] {
2341
+ text-decoration: underline;
2342
+ }
2343
+ .Link-module__hop-Link___Boezo:not(.Link-module__hop-Link--quiet___77fxF) {
2344
+ text-decoration: underline;
2345
+ }
2346
+ .Link-module__hop-Link--primary___Wq3cw {
2347
+ color: var(--hop-Link-primary-text-color);
2348
+ }
2349
+ .Link-module__hop-Link--primary___Wq3cw[data-disabled] {
2350
+ color: var(--hop-Link-primary-text-disabled-color);
2351
+ }
2352
+ .Link-module__hop-Link--primary___Wq3cw:not([data-disabled])[data-focus-visible],
2353
+ .Link-module__hop-Link--primary___Wq3cw:not([data-disabled])[data-hovered] {
2354
+ color: var(--hop-Link-primary-text-hover-color);
2355
+ }
2356
+ .Link-module__hop-Link--primary___Wq3cw:not([data-disabled])[data-pressed] {
2357
+ color: var(--hop-Link-primary-text-pressed-color);
2358
+ }
2359
+ .Link-module__hop-Link--secondary___BqDZu {
2360
+ color: var(--hop-Link-neutral-text-color);
2361
+ }
2362
+ .Link-module__hop-Link--secondary___BqDZu[data-disabled] {
2363
+ color: var(--hop-Link-neutral-text-disabled-color);
2364
+ }
2365
+ .Link-module__hop-Link--secondary___BqDZu:not([data-disabled])[data-focus-visible],
2366
+ .Link-module__hop-Link--secondary___BqDZu:not([data-disabled])[data-hovered] {
2367
+ color: var(--hop-Link-neutral-text-hover-color);
2368
+ }
2369
+ .Link-module__hop-Link--secondary___BqDZu:not([data-disabled])[data-pressed] {
2370
+ color: var(--hop-Link-neutral-text-pressed-color);
2371
+ }
2372
+ .Link-module__hop-Link__icon___u8diB,
2373
+ .Link-module__hop-Link__icon-list___LbUtG {
2374
+ order: 2;
2375
+ }
2376
+ .Link-module__hop-Link__text___KXRwM {
2377
+ order: 1;
2378
+ }
2379
+ .Link-module__hop-Link__start-icon___ijvu8,
2380
+ .Link-module__hop-Link__start-icon-list___svfU1 {
2381
+ order: 0;
2382
+ }
2383
+
2384
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/radio/src/Radio.module.css/#css-module-data */
2385
+ .Radio-module__hop-Radio___W0NkE {
2386
+ --hop-Radio-box-border-size: 0.0625rem;
2387
+ --hop-Radio-box-border-color: var(--hop-neutral-border);
2388
+ --hop-Radio-box-background-color: var(--hop-neutral-surface);
2389
+ --hop-Radio-box-outline-size: 0.125rem;
2390
+ --hop-Radio-box-outline-color: var(--hop-primary-border-focus);
2391
+ --hop-Radio-bullet-color: var(--hop-neutral-icon-selected);
2392
+ --hop-Radio-bullet-display: none;
2393
+ --hop-Radio-text-color: var(--hop-neutral-text);
2394
+ --hop-Radio-icon-color: var(--hop-neutral-icon);
2395
+ --hop-Radio-box-border-color-hovered: var(--hop-neutral-border-hover);
2396
+ --hop-Radio-box-background-color-hovered: var(--hop-neutral-surface-hover);
2397
+ --hop-Radio-text-color-hovered: var(--hop-neutral-text-hover);
2398
+ --hop-Radio-icon-color-hovered: var(--hop-neutral-icon-hover);
2399
+ --hop-Radio-box-border-color-pressed: var(--hop-neutral-border-press);
2400
+ --hop-Radio-box-background-color-pressed: var(--hop-neutral-surface-press);
2401
+ --hop-Radio-text-color-pressed: var(--hop-neutral-text-press);
2402
+ --hop-Radio-icon-color-pressed: var(--hop-neutral-icon-press);
2403
+ --hop-Radio-box-border-color-selected: var(--hop-neutral-border-selected);
2404
+ --hop-Radio-box-background-color-selected: var(--hop-neutral-surface-selected);
2405
+ --hop-Radio-bullet-display-selected: block;
2406
+ --hop-Radio-text-color-selected: var(--hop-neutral-text);
2407
+ --hop-Radio-icon-color-selected: var(--hop-neutral-icon);
2408
+ --hop-Radio-box-border-color-disabled: var(--hop-neutral-border-disabled);
2409
+ --hop-Radio-box-background-color-disabled: var(--hop-neutral-surface-disabled);
2410
+ --hop-Radio-bullet-color-disabled: var(--hop-neutral-icon-disabled);
2411
+ --hop-Radio-text-color-disabled: var(--hop-neutral-text-disabled);
2412
+ --hop-Radio-icon-color-disabled: var(--hop-neutral-icon-disabled);
2413
+ --hop-Radio-box-border-color-focused: var(--hop-neutral-border-hover);
2414
+ --hop-Radio-box-background-color-focused: var(--hop-neutral-surface-hover);
2415
+ --hop-Radio-text-color-focused: var(--hop-neutral-text);
2416
+ --hop-Radio-icon-color-focused: var(--hop-neutral-icon);
2417
+ --hop-Radio-box-border-color-invalid: var(--hop-danger-border-strong);
2418
+ --hop-Radio-box-background-color-invalid: var(--hop-neutral-surface);
2419
+ --hop-Radio-box-border-color-hovered-invalid: var(--hop-danger-border-strong);
2420
+ --hop-Radio-box-background-color-hovered-invalid: var(--hop-danger-surface);
2421
+ --hop-Radio-box-border-color-pressed-invalid: var(--hop-danger-border-press);
2422
+ --hop-Radio-box-background-color-pressed-invalid: var(--hop-danger-surface-weak);
2423
+ --hop-Radio-box-border-color-focused-invalid: var(--hop-danger-border-strong);
2424
+ --hop-Radio-box-background-color-focused-invalid: var(--hop-danger-surface);
2425
+ --hop-Radio-box-border-color-selected-invalid: var(--hop-danger-border-strong);
2426
+ --hop-Radio-box-background-color-selected-invalid: var(--hop-danger-surface-strong);
2427
+ --hop-Radio-bullet-color-invalid: var(--hop-danger-icon-strong);
2428
+ --hop-Radio-text-color-invalid: var(--hop-danger-text-weak);
2429
+ --hop-Radio-icon-color-invalid: var(--hop-danger-icon-weak);
2430
+ --hop-Radio-text-color-hovered-invalid: var(--hop-danger-text-weak-hover);
2431
+ --hop-Radio-icon-color-hovered-invalid: var(--hop-danger-icon-weak-hover);
2432
+ --hop-Radio-text-color-pressed-invalid: var(--hop-danger-text-weak-press);
2433
+ --hop-Radio-box-sm-inline-size: 1rem;
2434
+ --hop-Radio-box-sm-block-size: 1rem;
2435
+ --hop-Radio-text-sm-top-offset: calc((var(--box-inline-size) - (var(--hop-body-sm-line-height) * var(--hop-body-sm-font-size))) / 2);
2436
+ --hop-Radio-text-sm-margin-inline-start: calc(var(--hop-space-inline-sm) - var(--hop-space-inline-xs));
2437
+ --hop-Radio-box-md-inline-size: 1.5rem;
2438
+ --hop-Radio-box-md-block-size: 1.5rem;
2439
+ --hop-Radio-text-md-top-offset: calc((var(--box-inline-size) - (var(--hop-body-md-line-height) * var(--hop-body-md-font-size))) / 2);
2440
+ --hop-Radio-text-md-margin-inline-start: calc(var(--hop-space-inline-md) - var(--hop-space-inline-xs));
2441
+ --box-background-color: var(--hop-Radio-box-background-color);
2442
+ --box-border-color: var(--hop-Radio-box-border-color);
2443
+ --box-border-radius: var(--hop-shape-circle);
2444
+ --bullet-color: var(--hop-Radio-bullet-color);
2445
+ --bullet-display: var(--hop-Radio-bullet-display);
2446
+ --cursor: pointer;
2447
+ --text-color: var(--hop-Radio-text-color);
2448
+ --icon-color: var(--hop-Radio-icon-color);
2449
+ --transition-duration: var(--hop-easing-duration-2);
2450
+ cursor: var(--cursor);
2451
+ display: flex;
2452
+ column-gap: var(--hop-space-inline-xs);
2453
+ align-items: flex-start;
2454
+ justify-content: flex-start;
2455
+ box-sizing: border-box;
2456
+ inline-size: max-content;
2457
+ max-inline-size: 100%;
2458
+ }
2459
+ .Radio-module__hop-Radio___W0NkE[data-focus-visible],
2460
+ .Radio-module__hop-Radio--focused___37nBy {
2461
+ --box-background-color: var(--hop-Radio-box-background-color-focused);
2462
+ --box-border-color: var(--hop-Radio-box-border-color-focused);
2463
+ --box-outline: var(--hop-Radio-box-outline-size) solid var(--hop-Radio-box-outline-color);
2464
+ --text-color: var(--hop-Radio-text-color-focused);
2465
+ --icon-color: var(--hop-Radio-icon-color-focused);
2466
+ }
2467
+ .Radio-module__hop-Radio___W0NkE[data-hovered],
2468
+ .Radio-module__hop-Radio--hovered___bnBdz {
2469
+ --box-background-color: var(--hop-Radio-box-background-color-hovered);
2470
+ --box-border-color: var(--hop-Radio-box-border-color-hovered);
2471
+ --text-color: var(--hop-Radio-text-color-hovered);
2472
+ --icon-color: var(--hop-Radio-icon-color-hovered);
2473
+ }
2474
+ .Radio-module__hop-Radio___W0NkE[data-pressed],
2475
+ .Radio-module__hop-Radio--pressed___Idq0t {
2476
+ --box-background-color: var(--hop-Radio-box-background-color-pressed);
2477
+ --box-border-color: var(--hop-Radio-box-border-color-pressed);
2478
+ --text-color: var(--hop-Radio-text-color-pressed);
2479
+ --icon-color: var(--hop-Radio-icon-color-pressed);
2480
+ }
2481
+ .Radio-module__hop-Radio___W0NkE[data-selected] {
2482
+ --box-background-color: var(--hop-Radio-box-background-color-selected);
2483
+ --box-border-color: var(--hop-Radio-box-border-color-selected);
2484
+ --bullet-display: var(--hop-Radio-bullet-display-selected);
2485
+ --text-color: var(--hop-Radio-text-color-selected);
2486
+ --icon-color: var(--hop-Radio-icon-color-selected);
2487
+ }
2488
+ .Radio-module__hop-Radio___W0NkE[data-invalid] {
2489
+ --box-background-color: var(--hop-Radio-box-background-color-invalid);
2490
+ --box-border-color: var(--hop-Radio-box-border-color-invalid);
2491
+ --bullet-color: var(--hop-Radio-bullet-color-invalid);
2492
+ --text-color: var(--hop-Radio-text-color-invalid);
2493
+ --icon-color: var(--hop-Radio-icon-color-invalid);
2494
+ }
2495
+ .Radio-module__hop-Radio___W0NkE:where([data-invalid])[data-focus-visible] {
2496
+ --box-background-color: var(--hop-Radio-box-background-color-focused-invalid);
2497
+ --box-border-color: var(--hop-Radio-box-border-color-focused-invalid);
2498
+ }
2499
+ .Radio-module__hop-Radio___W0NkE:where([data-invalid])[data-hovered] {
2500
+ --box-background-color: var(--hop-Radio-box-background-color-hovered-invalid);
2501
+ --box-border-color: var(--hop-Radio-box-border-color-hovered-invalid);
2502
+ --text-color: var(--hop-Radio-text-color-hovered-invalid);
2503
+ --icon-color: var(--hop-Radio-text-color-hovered-invalid);
2504
+ }
2505
+ .Radio-module__hop-Radio___W0NkE:where([data-invalid])[data-pressed] {
2506
+ --box-background-color: var(--hop-Radio-box-background-color-pressed-invalid);
2507
+ --box-border-color: var(--hop-Radio-box-border-color-pressed-invalid);
2508
+ --text-color: var(--hop-Radio-text-color-pressed-invalid);
2509
+ --icon-color: var(--hop-Radio-icon-color-pressed-invalid);
2510
+ }
2511
+ .Radio-module__hop-Radio___W0NkE:where([data-invalid])[data-selected] {
2512
+ --box-background-color: var(--hop-Radio-box-background-color-selected-invalid);
2513
+ --box-border-color: var(--hop-Radio-box-border-color-selected-invalid);
2514
+ }
2515
+ .Radio-module__hop-Radio___W0NkE[data-disabled] {
2516
+ --box-background-color: var(--hop-Radio-box-background-color-disabled);
2517
+ --box-border-color: var(--hop-Radio-box-border-color-disabled);
2518
+ --bullet-color: var(--hop-Radio-bullet-color-disabled);
2519
+ --cursor: not-allowed;
2520
+ --text-color: var(--hop-Radio-text-color-disabled);
2521
+ --icon-color: var(--hop-Radio-icon-color-disabled);
2522
+ }
2523
+ .Radio-module__hop-Radio--sm___Xk9cY {
2524
+ --box-inline-size: var(--hop-Radio-box-sm-inline-size);
2525
+ --box-block-size: var(--hop-Radio-box-sm-block-size);
2526
+ --text-top-offset: var(--hop-Radio-text-sm-top-offset);
2527
+ --text-margin-inline-start: var(--hop-Radio-text-sm-margin-inline-start);
2528
+ }
2529
+ .Radio-module__hop-Radio--md___Ookee {
2530
+ --box-inline-size: var(--hop-Radio-box-md-inline-size);
2531
+ --box-block-size: var(--hop-Radio-box-md-block-size);
2532
+ --text-top-offset: var(--hop-Radio-text-md-top-offset);
2533
+ --text-margin-inline-start: var(--hop-Radio-text-md-margin-inline-start);
2534
+ }
2535
+ .Radio-module__hop-Radio__icon___V-YEN,
2536
+ .Radio-module__hop-Radio__icon-list___-ZAQI {
2537
+ flex: 0 0 auto;
2538
+ order: 3;
2539
+ color: var(--icon-color);
2540
+ }
2541
+ .Radio-module__hop-Radio__box___o2-Za {
2542
+ display: flex;
2543
+ flex: 0 0 auto;
2544
+ align-items: center;
2545
+ justify-content: center;
2546
+ order: 1;
2547
+ box-sizing: border-box;
2548
+ inline-size: var(--box-inline-size, var(--hop-Radio-box-md-inline-size));
2549
+ block-size: var(--box-block-size, var(--hop-Radio-box-md-block-size));
2550
+ background-color: var(--box-background-color);
2551
+ border: var(--hop-Radio-box-border-size) solid var(--box-border-color);
2552
+ border-radius: var(--box-border-radius);
2553
+ outline: var(--box-outline, none);
2554
+ outline-offset: 0.125rem;
2555
+ transition: background-color var(--transition-duration) var(--hop-easing-productive), border var(--transition-duration) var(--hop-easing-productive);
2556
+ }
2557
+ .Radio-module__hop-Radio__bullet___c4d6u {
2558
+ display: var(--bullet-display);
2559
+ color: var(--bullet-color);
2560
+ }
2561
+ .Radio-module__hop-Radio__text___3HhWA {
2562
+ flex: 0 1 auto;
2563
+ order: 2;
2564
+ min-inline-size: 0;
2565
+ margin-block-start: var(--text-top-offset, var(--hop-Radio-text-md-top-offset));
2566
+ margin-inline-start: var(--text-margin-inline-start, var(--hop-Radio-text-md-margin-inline-start));
2567
+ color: var(--text-color);
2568
+ }
2569
+
2570
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/radio/src/RadioField.module.css/#css-module-data */
2571
+ .RadioField-module__hop-RadioField___iH4DX {
2572
+ --hop-RadioField-description-color: var(--hop-neutral-text-weak);
2573
+ --hop-RadioField-description-color-disabled: var(--hop-neutral-text-disabled);
2574
+ --hop-RadioField-sm-row-gap: var(--hop-space-stack-xs);
2575
+ --hop-RadioField-radio-sm-inline-size: 1rem;
2576
+ --hop-RadioField-description-sm-margin-inline-start: calc(var(--hop-RadioField-radio-sm-inline-size) + var(--hop-space-inline-sm));
2577
+ --hop-RadioField-md-row-gap: var(--hop-space-stack-xs);
2578
+ --hop-RadioField-radio-md-inline-size: 1.5rem;
2579
+ --hop-RadioField-description-md-margin-inline-start: calc(var(--hop-RadioField-radio-md-inline-size) + var(--hop-space-inline-md));
2580
+ --description-color: var(--hop-RadioField-description-color);
2581
+ display: flex;
2582
+ flex-direction: column;
2583
+ row-gap: var(--row-gap, var(--hop-space-stack-sm));
2584
+ align-items: flex-start;
2585
+ justify-content: flex-start;
2586
+ box-sizing: border-box;
2587
+ inline-size: max-content;
2588
+ max-inline-size: 100%;
2589
+ }
2590
+ .RadioField-module__hop-RadioField___iH4DX[data-disabled] {
2591
+ --description-color: var(--hop-RadioField-description-color-disabled);
2592
+ }
2593
+ .RadioField-module__hop-RadioField--sm___82LpO {
2594
+ --row-gap: var(--hop-RadioField-sm-row-gap);
2595
+ --description-margin-inline-start: var(--hop-RadioField-description-sm-margin-inline-start);
2596
+ }
2597
+ .RadioField-module__hop-RadioField--md___mHhI1 {
2598
+ --row-gap: var(--hop-RadioField-md-row-gap);
2599
+ --description-margin-inline-start: var(--hop-RadioField-description-md-margin-inline-start);
2600
+ }
2601
+ .RadioField-module__hop-RadioField__description___VXjob {
2602
+ order: 2;
2603
+ margin-inline-start: var(--description-margin-inline-start, var(--hop-RadioField-description-md-margin-inline-start));
2604
+ color: var(--description-color);
2605
+ }
2606
+ .RadioField-module__hop-RadioField__radio___-LJe8 {
2607
+ order: 1;
2608
+ }
2609
+
2610
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/radio/src/RadioGroup.module.css/#css-module-data */
2611
+ .RadioGroup-module__hop-RadioGroup___uUMYg {
2612
+ --hop-RadioGroup-align-items: flex-start;
2613
+ --hop-RadioGroup-justify-content: flex-start;
2614
+ --hop-RadioGroup-bordered-border-color: var(--hop-neutral-border-weak);
2615
+ --hop-RadioGroup-sm-column-gap: var(--hop-space-inline-sm);
2616
+ --hop-RadioGroup-sm-row-gap: var(--hop-space-stack-sm);
2617
+ --hop-RadioGroup-list-sm-column-gap: var(--hop-space-inline-sm);
2618
+ --hop-RadioGroup-list-sm-row-gap: var(--hop-space-stack-sm);
2619
+ --hop-RadioGroup-bordered-sm-padding: var(--hop-space-inset-sm);
2620
+ --hop-RadioGroup-bordered-sm-column-gap: var(--hop-space-inline-sm);
2621
+ --hop-RadioGroup-bordered-sm-row-gap: var(--hop-space-stack-sm);
2622
+ --hop-RadioGroup-list-bordered-sm-column-gap: 0;
2623
+ --hop-RadioGroup-list-bordered-sm-row-gap: 0;
2624
+ --hop-RadioGroup-md-column-gap: var(--hop-space-inline-md);
2625
+ --hop-RadioGroup-md-row-gap: var(--hop-space-stack-md);
2626
+ --hop-RadioGroup-list-md-column-gap: var(--hop-space-inline-md);
2627
+ --hop-RadioGroup-list-md-row-gap: var(--hop-space-stack-md);
2628
+ --hop-RadioGroup-bordered-md-padding: var(--hop-space-inset-md);
2629
+ --hop-RadioGroup-bordered-md-column-gap: var(--hop-space-inline-sm);
2630
+ --hop-RadioGroup-bordered-md-row-gap: var(--hop-space-stack-sm);
2631
+ --hop-RadioGroup-list-bordered-md-column-gap: 0;
2632
+ --hop-RadioGroup-list-bordered-md-row-gap: 0;
2633
+ --hop-RadioGroup-vertical-flex-direction: column;
2634
+ --hop-RadioGroup-horizontal-flex-direction: row;
2635
+ --radio-border-size: 0.0625rem;
2636
+ --radio-border-color: var(--hop-neutral-border-weak);
2637
+ --flex-direction: var(--hop-RadioGroup-vertical-flex-direction);
2638
+ --align-items: var(--hop-RadioGroup-align-items);
2639
+ --justify-content: var(--hop-RadioGroup-justify-content);
2640
+ --flex-wrap: wrap;
2641
+ --inline-size: max-content;
2642
+ display: flex;
2643
+ flex-direction: column;
2644
+ gap: var(--row-gap, var(--hop-space-stack-md)) var(--column-gap, var(--hop-space-inline-md));
2645
+ align-items: var(--align-items);
2646
+ justify-content: var(--justify-content);
2647
+ box-sizing: border-box;
2648
+ inline-size: var(--inline-size);
2649
+ max-inline-size: 100%;
2650
+ }
2651
+ .RadioGroup-module__hop-RadioGroup--bordered___GS69Y {
2652
+ --list-border: var(--radio-border-size) solid var(--radio-border-color);
2653
+ --list-border-radius: var(--hop-shape-rounded-md);
2654
+ }
2655
+ .RadioGroup-module__hop-RadioGroup--sm___aaj9S {
2656
+ --column-gap: var(--hop-RadioGroup-sm-column-gap);
2657
+ --row-gap: var(--hop-RadioGroup-sm-row-gap);
2658
+ --list-column-gap: var(--hop-RadioGroup-list-sm-column-gap);
2659
+ --list-row-gap: var(--hop-RadioGroup-list-sm-row-gap);
2660
+ }
2661
+ .RadioGroup-module__hop-RadioGroup--md___GZDza {
2662
+ --column-gap: var(--hop-RadioGroup-md-column-gap);
2663
+ --row-gap: var(--hop-RadioGroup-md-row-gap);
2664
+ --list-column-gap: var(--hop-RadioGroup-list-md-column-gap);
2665
+ --list-row-gap: var(--hop-RadioGroup-list-md-row-gap);
2666
+ }
2667
+ .RadioGroup-module__hop-RadioGroup--bordered___GS69Y.RadioGroup-module__hop-RadioGroup--sm___aaj9S {
2668
+ --radio-padding: var(--hop-RadioGroup-bordered-sm-padding);
2669
+ --column-gap: var(--hop-RadioGroup-bordered-sm-column-gap);
2670
+ --row-gap: var(--hop-RadioGroup-bordered-sm-row-gap);
2671
+ --list-column-gap: var(--hop-RadioGroup-list-bordered-sm-column-gap);
2672
+ --list-row-gap: var(--hop-RadioGroup-list-bordered-sm-row-gap);
2673
+ }
2674
+ .RadioGroup-module__hop-RadioGroup--bordered___GS69Y.RadioGroup-module__hop-RadioGroup--md___GZDza {
2675
+ --radio-padding: var(--hop-RadioGroup-bordered-md-padding);
2676
+ --column-gap: var(--hop-RadioGroup-bordered-md-column-gap);
2677
+ --row-gap: var(--hop-RadioGroup-bordered-md-row-gap);
2678
+ --list-column-gap: var(--hop-RadioGroup-list-bordered-md-column-gap);
2679
+ --list-row-gap: var(--hop-RadioGroup-list-bordered-md-row-gap);
2680
+ }
2681
+ .RadioGroup-module__hop-RadioGroup___uUMYg[data-orientation=horizontal] {
2682
+ --flex-direction: var(--hop-RadioGroup-horizontal-flex-direction);
2683
+ }
2684
+ .RadioGroup-module__hop-RadioGroup--bordered___GS69Y[data-orientation=horizontal] {
2685
+ --flex-wrap: nowrap;
2686
+ }
2687
+ .RadioGroup-module__hop-RadioGroup___uUMYg > .RadioGroup-module__hop-RadioGroup__label___6FEgv {
2688
+ order: 1;
2689
+ }
2690
+ .RadioGroup-module__hop-RadioGroup__list___ram8I {
2691
+ display: flex;
2692
+ flex-flow: var(--flex-direction) var(--flex-wrap);
2693
+ gap: var(--list-row-gap, var(--hop-space-stack-md)) var(--list-column-gap, var(--hop-space-inline-md));
2694
+ order: 2;
2695
+ box-sizing: border-box;
2696
+ inline-size: var(--inline-size);
2697
+ max-inline-size: 100%;
2698
+ border: var(--list-border, none);
2699
+ border-radius: var(--list-border-radius, 0);
2700
+ }
2701
+ .RadioGroup-module__hop-RadioGroup__list___ram8I > .RadioGroup-module__hop-RadioGroup__radio___Wg80N {
2702
+ position: relative;
2703
+ flex: 0 1 auto;
2704
+ align-content: start;
2705
+ inline-size: auto;
2706
+ min-inline-size: 0;
2707
+ padding: var(--radio-padding, 0);
2708
+ }
2709
+ .RadioGroup-module__hop-RadioGroup--bordered___GS69Y .RadioGroup-module__hop-RadioGroup__list___ram8I > .RadioGroup-module__hop-RadioGroup__radio___Wg80N ~ .RadioGroup-module__hop-RadioGroup__radio___Wg80N::before {
2710
+ content: "";
2711
+ position: absolute;
2712
+ display: block;
2713
+ }
2714
+ .RadioGroup-module__hop-RadioGroup--bordered___GS69Y[data-orientation=vertical] .RadioGroup-module__hop-RadioGroup__list___ram8I > .RadioGroup-module__hop-RadioGroup__radio___Wg80N ~ .RadioGroup-module__hop-RadioGroup__radio___Wg80N::before {
2715
+ inset-block-start: 0;
2716
+ inset-inline: 0;
2717
+ border-block-start: var(--list-border, none);
2718
+ }
2719
+ .RadioGroup-module__hop-RadioGroup--bordered___GS69Y[data-orientation=horizontal] .RadioGroup-module__hop-RadioGroup__list___ram8I > .RadioGroup-module__hop-RadioGroup__radio___Wg80N ~ .RadioGroup-module__hop-RadioGroup__radio___Wg80N::before {
2720
+ inset-block: 0;
2721
+ inset-inline-start: 0;
2722
+ border-inline-start: var(--list-border, none);
2723
+ }
2724
+ .RadioGroup-module__hop-RadioGroup___uUMYg > .RadioGroup-module__hop-RadioGroup__error-message___xY86-,
2725
+ .RadioGroup-module__hop-RadioGroup___uUMYg > .RadioGroup-module__hop-RadioGroup__helper-message___vidfD {
2726
+ order: 3;
2727
+ }
2728
+
2729
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/ListBox/src/ListBoxItemSkeleton.module.css/#css-module-data */
2730
+ .ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton___gNkoN {
2731
+ --hop-ListBoxItemSkeleton-background-color: var(--hop-rock-50);
2732
+ --hop-ListBoxItemSkeleton-background-color-dark: var(--hop-rock-75);
2733
+ --hop-ListBoxItemSkeleton-border-radius: var(--hop-shape-rounded-md);
2734
+ --hop-ListBoxItemSkeleton-animation-duration: 1.4s;
2735
+ --hop-ListBoxItemSkeleton-animation-reduced-motion-duration: 3.4s;
2736
+ --hop-ListBoxItemSkeleton-linear-gradient:
2737
+ linear-gradient(
2738
+
2739
+ 90deg,
2740
+ var(--hop-ListBoxItemSkeleton-background-color) 25%,
2741
+ var(--hop-ListBoxItemSkeleton-background-color-dark) 37%,
2742
+ var(--hop-ListBoxItemSkeleton-background-color-dark) 63%,
2743
+ var(--hop-ListBoxItemSkeleton-background-color) 100% );
2744
+ --hop-ListBoxItemSkeleton-xs-height: 1.25rem;
2745
+ --hop-ListBoxItemSkeleton-sm-height: 1.25rem;
2746
+ --hop-ListBoxItemSkeleton-md-height: 1.25rem;
2747
+ --hop-ListBoxItemSkeleton-lg-height: 1.5rem;
2748
+ --animation-duration: var(--hop-ListBoxItemSkeleton-animation-duration);
2749
+ grid-area: label;
2750
+ box-sizing: border-box;
2751
+ block-size: var(--height);
2752
+ background-color: var(--hop-ListBoxItemSkeleton-background-color);
2753
+ background-image: var(--hop-ListBoxItemSkeleton-linear-gradient);
2754
+ background-size: 400% 100%;
2755
+ border-radius: var(--hop-ListBoxItemSkeleton-border-radius);
2756
+ animation-name: ListBoxItemSkeleton-module__placeholder-shimmer___NWJHR;
2757
+ animation-duration: var(--animation-duration);
2758
+ animation-timing-function: ease-in-out;
2759
+ animation-fill-mode: forwards;
2760
+ animation-iteration-count: infinite;
2761
+ @media (prefers-reduced-motion: reduce) {
2762
+ --animation-duration: var(--hop-ListBoxItemSkeleton-animation-reduced-motion-duration);
2763
+ }
2764
+ }
2765
+ .ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--xs___FVwx5 {
2766
+ --height: var(--hop-ListBoxItemSkeleton-xs-height);
2767
+ }
2768
+ .ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--sm___NUBWK {
2769
+ --height: var(--hop-ListBoxItemSkeleton-sm-height);
2770
+ }
2771
+ .ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--md___8jdqN {
2772
+ --height: var(--hop-ListBoxItemSkeleton-md-height);
2773
+ }
2774
+ .ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--lg___e6YxG {
2775
+ --height: var(--hop-ListBoxItemSkeleton-lg-height);
2776
+ }
2777
+ @keyframes ListBoxItemSkeleton-module__placeholder-shimmer___NWJHR {
2778
+ 0% {
2779
+ background-position: 125% 50%;
2780
+ }
2781
+ 100% {
2782
+ background-position: -25% 50%;
2783
+ }
2784
+ }
2785
+
2786
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/ListBox/src/ListBoxItem.module.css/#css-module-data */
2787
+ .ListBoxItem-module__hop-ListBoxItem___KW-Fj {
2788
+ --hop-ListBoxItem-background-color: transparent;
2789
+ --hop-ListBoxItem-border-radius: var(--hop-shape-rounded-md);
2790
+ --hop-ListBoxItem-text-color: var(--hop-neutral-text);
2791
+ --hop-ListBoxItem-icon-color: var(--hop-neutral-icon);
2792
+ --hop-ListBoxItem-outline-size: 0.125rem;
2793
+ --hop-ListBoxItem-outline-color: var(--hop-primary-border-focus);
2794
+ --hop-ListBoxItem-row-gap: var(--hop-space-stack-xs);
2795
+ --hop-ListBoxItem-column-gap: var(--hop-space-inline-sm);
2796
+ --hop-ListBoxItem-indicator-inline-size: calc( 1rem + var(--hop-ListBoxItem-column-gap));
2797
+ --hop-ListBoxItem-description-text-color: var(--hop-neutral-text-weak);
2798
+ --hop-ListBoxItem-grid-template-areas: "indicator avatar icon label end-icon badge";
2799
+ --hop-ListBoxItem-grid-template-areas-with-description: "indicator avatar icon label end-icon badge" ". . . description description description";
2800
+ --hop-ListBoxItem-grid-template-areas-loading: "label";
2801
+ --hop-ListBoxItem-grid-template-columns: var(--hop-ListBoxItem-indicator-inline-size) auto auto 1fr auto auto;
2802
+ --hop-ListBoxItem-grid-template-columns-not-selected: 0 auto auto 1fr auto auto;
2803
+ --hop-ListBoxItem-grid-template-columns-loading: 1fr;
2804
+ --hop-ListBoxItem-badge-margin-block: calc(-1 * (var(--hop-space-stack-xs) / 2));
2805
+ --hop-ListBoxItem-xs-padding-block: var(--hop-space-inset-xs);
2806
+ --hop-ListBoxItem-xs-padding-inline: var(--hop-space-inset-md);
2807
+ --hop-ListBoxItem-xs-min-height: 2rem;
2808
+ --hop-ListBoxItem-xs-avatar-margin-block: 0;
2809
+ --hop-ListBoxItem-sm-padding-block: var(--hop-space-inset-sm);
2810
+ --hop-ListBoxItem-sm-padding-inline: var(--hop-space-inset-md);
2811
+ --hop-ListBoxItem-sm-min-height: 2.5rem;
2812
+ --hop-ListBoxItem-sm-avatar-margin-block: 0;
2813
+ --hop-ListBoxItem-md-padding-block: var(--hop-space-inset-md);
2814
+ --hop-ListBoxItem-md-padding-inline: var(--hop-space-inset-md);
2815
+ --hop-ListBoxItem-md-min-height: 3.5rem;
2816
+ --hop-ListBoxItem-md-avatar-margin-block: calc(-1 * var(--hop-space-stack-xs));
2817
+ --hop-ListBoxItem-lg-padding-block: var(--hop-space-inset-md);
2818
+ --hop-ListBoxItem-lg-padding-inline: var(--hop-space-inset-md);
2819
+ --hop-ListBoxItem-lg-min-height: 4rem;
2820
+ --hop-ListBoxItem-lg-avatar-margin-block: calc(-1 * var(--hop-space-stack-xs));
2821
+ --hop-ListBoxItem-background-color-hovered: var(--hop-neutral-surface-hover);
2822
+ --hop-ListBoxItem-text-color-hovered: var(--hop-neutral-text-hover);
2823
+ --hop-ListBoxItem-icon-color-hovered: var(--hop-neutral-icon-hover);
2824
+ --hop-ListBoxItem-background-color-pressed: var(--hop-neutral-surface-press);
2825
+ --hop-ListBoxItem-text-color-pressed: var(--hop-neutral-text-press);
2826
+ --hop-ListBoxItem-icon-color-pressed: var(--hop-neutral-icon-press);
2827
+ --hop-ListBoxItem-background-color-focused: var(--hop-neutral-surface-hover);
2828
+ --hop-ListBoxItem-text-color-focused: var(--hop-neutral-text-hover);
2829
+ --hop-ListBoxItem-icon-color-focused: var(--hop-neutral-icon-hover);
2830
+ --hop-ListBoxItem-background-color-selected: transparent;
2831
+ --hop-ListBoxItem-text-color-selected: var(--hop-neutral-text);
2832
+ --hop-ListBoxItem-icon-color-selected: var(--hop-neutral-icon);
2833
+ --hop-ListBoxItem-background-color-invalid: transparent;
2834
+ --hop-ListBoxItem-background-color-invalid-hovered: var(--hop-danger-surface-hover);
2835
+ --hop-ListBoxItem-background-color-invalid-pressed: var(--hop-danger-surface-press);
2836
+ --hop-ListBoxItem-background-color-invalid-focused: var(--hop-danger-surface-hover);
2837
+ --hop-ListBoxItem-background-color-invalid-selected: transparent;
2838
+ --hop-ListBoxItem-background-color-invalid-disabled: transparent;
2839
+ --hop-ListBoxItem-text-color-invalid: var(--hop-danger-text-weak);
2840
+ --hop-ListBoxItem-text-color-invalid-hovered: var(--hop-danger-text-strong);
2841
+ --hop-ListBoxItem-text-color-invalid-pressed: var(--hop-danger-text-strong);
2842
+ --hop-ListBoxItem-text-color-invalid-focused: var(--hop-danger-text-strong);
2843
+ --hop-ListBoxItem-text-color-invalid-selected: var(--hop-danger-text-weak);
2844
+ --hop-ListBoxItem-text-color-invalid-disabled: var(--hop-danger-text-disabled);
2845
+ --hop-ListBoxItem-icon-color-invalid: var(--hop-danger-icon-weak);
2846
+ --hop-ListBoxItem-icon-color-invalid-hovered: var(--hop-danger-icon-strong);
2847
+ --hop-ListBoxItem-icon-color-invalid-pressed: var(--hop-danger-icon-strong);
2848
+ --hop-ListBoxItem-icon-color-invalid-focused: var(--hop-danger-icon-strong);
2849
+ --hop-ListBoxItem-icon-color-invalid-selected: var(--hop-danger-icon-weak);
2850
+ --hop-ListBoxItem-icon-color-invalid-disabled: var(--hop-danger-icon-disabled);
2851
+ --hop-ListBoxItem-description-text-color-invalid-hovered: inherit;
2852
+ --hop-ListBoxItem-description-text-color-invalid-pressed: inherit;
2853
+ --hop-ListBoxItem-description-text-color-invalid-focused: inherit;
2854
+ --hop-ListBoxItem-background-color-disabled: transparent;
2855
+ --hop-ListBoxItem-text-color-disabled: var(--hop-neutral-text-disabled);
2856
+ --hop-ListBoxItem-icon-color-disabled: var(--hop-neutral-icon-disabled);
2857
+ --background-color: var(--hop-ListBoxItem-background-color);
2858
+ --text-color: var(--hop-ListBoxItem-text-color);
2859
+ --icon-color: var(--hop-ListBoxItem-icon-color);
2860
+ --outline: none;
2861
+ --cursor: default;
2862
+ --checkmark-opacity: 0;
2863
+ --description-text-color: var(--hop-ListBoxItem-description-text-color);
2864
+ --row-gap: 0;
2865
+ --grid-template-areas: var(--hop-ListBoxItem-grid-template-areas);
2866
+ --grid-template-columns: var(--hop-ListBoxItem-grid-template-columns);
2867
+ --checkmark-transition: opacity 0.2s ease-in-out .2s;
2868
+ cursor: var(--cursor);
2869
+ box-sizing: border-box;
2870
+ color: var(--text-color);
2871
+ background-color: var(--background-color);
2872
+ border-radius: var(--hop-ListBoxItem-border-radius);
2873
+ outline: var(--outline);
2874
+ }
2875
+ .ListBoxItem-module__hop-ListBoxItem--xs___mWNki {
2876
+ --padding-block: var(--hop-ListBoxItem-xs-padding-block);
2877
+ --padding-inline: var(--hop-ListBoxItem-xs-padding-inline);
2878
+ --min-height: var(--hop-ListBoxItem-xs-min-height);
2879
+ --avatar-margin-block: var(--hop-ListBoxItem-xs-avatar-margin-block);
2880
+ }
2881
+ .ListBoxItem-module__hop-ListBoxItem--sm___b8UQ1 {
2882
+ --padding-block: var(--hop-ListBoxItem-sm-padding-block);
2883
+ --padding-inline: var(--hop-ListBoxItem-sm-padding-inline);
2884
+ --min-height: var(--hop-ListBoxItem-sm-min-height);
2885
+ --avatar-margin-block: var(--hop-ListBoxItem-sm-avatar-margin-block);
2886
+ }
2887
+ .ListBoxItem-module__hop-ListBoxItem--md___vnKzK {
2888
+ --padding-block: var(--hop-ListBoxItem-md-padding-block);
2889
+ --padding-inline: var(--hop-ListBoxItem-md-padding-inline);
2890
+ --min-height: var(--hop-ListBoxItem-md-min-height);
2891
+ --avatar-margin-block: var(--hop-ListBoxItem-md-avatar-margin-block);
2892
+ }
2893
+ .ListBoxItem-module__hop-ListBoxItem--lg___uNSNE {
2894
+ --padding-block: var(--hop-ListBoxItem-lg-padding-block);
2895
+ --padding-inline: var(--hop-ListBoxItem-lg-padding-inline);
2896
+ --min-height: var(--hop-ListBoxItem-lg-min-height);
2897
+ --avatar-margin-block: var(--hop-ListBoxItem-lg-avatar-margin-block);
2898
+ }
2899
+ .ListBoxItem-module__hop-ListBoxItem___KW-Fj[data-selection-mode] {
2900
+ --cursor: pointer;
2901
+ }
2902
+ .ListBoxItem-module__hop-ListBoxItem___KW-Fj:not([data-selection-mode]) {
2903
+ --grid-template-columns: var(--hop-ListBoxItem-grid-template-columns-not-selected);
2904
+ }
2905
+ .ListBoxItem-module__hop-ListBoxItem__inner___hBeAr:not([data-list-has-selection]):has(.ListBoxItem-module__hop-ListBoxItem__checkmark___DcHi6) {
2906
+ --grid-template-columns: var(--hop-ListBoxItem-grid-template-columns-not-selected);
2907
+ }
2908
+ .ListBoxItem-module__hop-ListBoxItem__inner___hBeAr[data-list-has-selection-end]:has(.ListBoxItem-module__hop-ListBoxItem__checkmark___DcHi6) {
2909
+ --checkmark-transition: none;
2910
+ }
2911
+ .ListBoxItem-module__hop-ListBoxItem___KW-Fj[data-selected] {
2912
+ --background-color: var(--hop-ListBoxItem-background-color-selected);
2913
+ --text-color: var(--hop-ListBoxItem-text-color-selected);
2914
+ --icon-color: var(--hop-ListBoxItem-icon-color-selected);
2915
+ --checkmark-opacity: 1;
2916
+ }
2917
+ .ListBoxItem-module__hop-ListBoxItem___KW-Fj[data-focus-visible] {
2918
+ --background-color: var(--hop-ListBoxItem-background-color-focused);
2919
+ --text-color: var(--hop-ListBoxItem-text-color-focused);
2920
+ --icon-color: var(--hop-ListBoxItem-icon-color-focused);
2921
+ --outline: var(--hop-ListBoxItem-outline-size) solid var(--hop-ListBoxItem-outline-color);
2922
+ }
2923
+ .ListBoxItem-module__hop-ListBoxItem___KW-Fj[data-hovered] {
2924
+ --background-color: var(--hop-ListBoxItem-background-color-hovered);
2925
+ --text-color: var(--hop-ListBoxItem-text-color-hovered);
2926
+ --icon-color: var(--hop-ListBoxItem-icon-color-hovered);
2927
+ }
2928
+ .ListBoxItem-module__hop-ListBoxItem___KW-Fj[data-pressed] {
2929
+ --background-color: var(--hop-ListBoxItem-background-color-pressed);
2930
+ --text-color: var(--hop-ListBoxItem-text-color-pressed);
2931
+ --icon-color: var(--hop-ListBoxItem-icon-color-pressed);
2932
+ }
2933
+ .ListBoxItem-module__hop-ListBoxItem___KW-Fj[data-disabled] {
2934
+ --background-color: var(--hop-ListBoxItem-background-color-disabled);
2935
+ --text-color: var(--hop-ListBoxItem-text-color-disabled);
2936
+ --icon-color: var(--hop-ListBoxItem-icon-color-disabled);
2937
+ --description-text-color: var(--hop-ListBoxItem-text-color-disabled);
2938
+ --cursor: not-allowed;
2939
+ }
2940
+ .ListBoxItem-module__hop-ListBoxItem___KW-Fj[data-invalid] {
2941
+ --background-color: var(--hop-ListBoxItem-background-color-invalid);
2942
+ --text-color: var(--hop-ListBoxItem-text-color-invalid);
2943
+ --icon-color: var(--hop-ListBoxItem-icon-color-invalid);
2944
+ }
2945
+ .ListBoxItem-module__hop-ListBoxItem___KW-Fj[data-invalid][data-selected] {
2946
+ --background-color: var(--hop-ListBoxItem-background-color-invalid-selected);
2947
+ --text-color: var(--hop-ListBoxItem-text-color-invalid-selected);
2948
+ --icon-color: var(--hop-ListBoxItem-icon-color-invalid-selected);
2949
+ }
2950
+ .ListBoxItem-module__hop-ListBoxItem___KW-Fj[data-invalid][data-focus-visible] {
2951
+ --background-color: var(--hop-ListBoxItem-background-color-invalid-focused);
2952
+ --text-color: var(--hop-ListBoxItem-text-color-invalid-focused);
2953
+ --icon-color: var(--hop-ListBoxItem-icon-color-invalid-focused);
2954
+ --description-text-color: var(--hop-ListBoxItem-description-text-color-invalid-focused);
2955
+ }
2956
+ .ListBoxItem-module__hop-ListBoxItem___KW-Fj[data-invalid][data-hovered] {
2957
+ --background-color: var(--hop-ListBoxItem-background-color-invalid-hovered);
2958
+ --text-color: var(--hop-ListBoxItem-text-color-invalid-hovered);
2959
+ --icon-color: var(--hop-ListBoxItem-icon-color-invalid-hovered);
2960
+ --description-text-color: var(--hop-ListBoxItem-description-text-color-invalid-hovered);
2961
+ }
2962
+ .ListBoxItem-module__hop-ListBoxItem___KW-Fj[data-invalid][data-pressed] {
2963
+ --background-color: var(--hop-ListBoxItem-background-color-invalid-pressed);
2964
+ --text-color: var(--hop-ListBoxItem-text-color-invalid-pressed);
2965
+ --icon-color: var(--hop-ListBoxItem-icon-color-invalid-pressed);
2966
+ --description-text-color: var(--hop-ListBoxItem-description-text-color-invalid-pressed);
2967
+ }
2968
+ .ListBoxItem-module__hop-ListBoxItem___KW-Fj[data-invalid][data-disabled] {
2969
+ --background-color: var(--hop-ListBoxItem-background-color-invalid-disabled);
2970
+ --text-color: var(--hop-ListBoxItem-text-color-invalid-disabled);
2971
+ --icon-color: var(--hop-ListBoxItem-icon-color-invalid-disabled);
2972
+ }
2973
+ .ListBoxItem-module__hop-ListBoxItem___KW-Fj:has(.ListBoxItem-module__hop-ListBoxItem__description___OfyKj) {
2974
+ --row-gap: var(--hop-ListBoxItem-row-gap);
2975
+ --grid-template-areas: var(--hop-ListBoxItem-grid-template-areas-with-description);
2976
+ }
2977
+ .ListBoxItem-module__hop-ListBoxItem___KW-Fj[data-loading] {
2978
+ --grid-template-areas: var(--hop-ListBoxItem-grid-template-areas-loading);
2979
+ --grid-template-columns: var(--hop-ListBoxItem-grid-template-columns-loading);
2980
+ }
2981
+ .ListBoxItem-module__hop-ListBoxItem__inner___hBeAr {
2982
+ display: grid;
2983
+ grid-template-areas: var(--grid-template-areas);
2984
+ grid-template-columns: var(--grid-template-columns);
2985
+ row-gap: var(--row-gap);
2986
+ align-items: center;
2987
+ box-sizing: border-box;
2988
+ min-block-size: var(--min-height);
2989
+ padding-block: var(--padding-block);
2990
+ padding-inline: var(--padding-inline);
2991
+ transition: grid-template-columns .3s ease-in-out;
2992
+ }
2993
+ .ListBoxItem-module__hop-ListBoxItem__checkmark___DcHi6 {
2994
+ grid-area: indicator;
2995
+ margin-inline-end: var(--hop-ListBoxItem-column-gap);
2996
+ color: var(--icon-color);
2997
+ opacity: var(--checkmark-opacity);
2998
+ transition: var(--checkmark-transition);
2999
+ }
3000
+ .ListBoxItem-module__hop-ListBoxItem__radio-group___EKfQh,
3001
+ .ListBoxItem-module__hop-ListBoxItem__checkbox___q423u {
3002
+ pointer-events: none;
3003
+ user-select: none;
3004
+ grid-area: indicator;
3005
+ margin-inline-end: var(--hop-ListBoxItem-column-gap);
3006
+ }
3007
+ .ListBoxItem-module__hop-ListBoxItem__avatar___wfflG {
3008
+ grid-area: avatar;
3009
+ margin-block: var(--avatar-margin-block, 0);
3010
+ margin-inline-end: var(--hop-ListBoxItem-column-gap);
3011
+ }
3012
+ .ListBoxItem-module__hop-ListBoxItem__icon-list___fnOlc,
3013
+ .ListBoxItem-module__hop-ListBoxItem__icon___75U3q {
3014
+ grid-area: icon;
3015
+ flex: 0 0 auto;
3016
+ margin-inline-end: var(--hop-ListBoxItem-column-gap);
3017
+ color: var(--icon-color);
3018
+ }
3019
+ .ListBoxItem-module__hop-ListBoxItem__label___wO73- {
3020
+ overflow: hidden;
3021
+ grid-area: label;
3022
+ min-inline-size: 0;
3023
+ text-overflow: ellipsis;
3024
+ white-space: nowrap;
3025
+ }
3026
+ .ListBoxItem-module__hop-ListBoxItem__end-icon-list___JORQf,
3027
+ .ListBoxItem-module__hop-ListBoxItem__end-icon___-kQHv {
3028
+ grid-area: end-icon;
3029
+ margin-inline-start: var(--hop-ListBoxItem-column-gap);
3030
+ color: var(--icon-color);
3031
+ }
3032
+ .ListBoxItem-module__hop-ListBoxItem__badge___g-FPT {
3033
+ grid-area: badge;
3034
+ margin-block: var(--hop-ListBoxItem-badge-margin-block);
3035
+ margin-inline-start: var(--hop-ListBoxItem-column-gap);
3036
+ }
3037
+ .ListBoxItem-module__hop-ListBoxItem__description___OfyKj {
3038
+ overflow: hidden;
3039
+ display: -webkit-box;
3040
+ grid-area: description;
3041
+ -webkit-box-orient: vertical;
3042
+ -webkit-line-clamp: 2;
3043
+ line-clamp: 2;
3044
+ color: var(--description-text-color);
3045
+ }
3046
+
3047
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/ListBox/src/ListBox.module.css/#css-module-data */
3048
+ .ListBox-module__hop-ListBox___gMv2t {
3049
+ --hop-ListBox-background-color: var(--hop-neutral-surface);
3050
+ --hop-ListBox-border-color: var(--hop-neutral-border-weak);
3051
+ --hop-ListBox-border-radius: var(--hop-shape-rounded-md);
3052
+ --hop-ListBox-border-size: 0.0625rem;
3053
+ --hop-ListBox-padding-inline: var(--hop-space-inset-sm);
3054
+ --hop-ListBox-padding-block: var(--hop-space-inset-sm);
3055
+ --hop-ListBox-min-width: 13.625rem;
3056
+ --hop-ListBox-max-width: 18rem;
3057
+ --hop-ListBox-width: max-content;
3058
+ --hop-ListBox-fluid-width: 100%;
3059
+ --hop-ListBox-fluid-max-width: 100%;
3060
+ --hop-ListBox-section-padding-block: var(--hop-ListBox-padding-block);
3061
+ --hop-ListBox-section-padding-inline: var(--hop-ListBox-padding-inline);
3062
+ --hop-ListBox-section-margin-block: var(--hop-space-stack-sm);
3063
+ --hop-ListBox-section-margin-inline: calc(-1 * var(--hop-ListBox-padding-inline));
3064
+ --hop-ListBox-section-border-size: var(--hop-ListBox-border-size);
3065
+ --hop-ListBox-section-border-color: var(--hop-ListBox-border-color);
3066
+ --hop-ListBox-section-header-font-family: var(--hop-overline-font-family);
3067
+ --hop-ListBox-section-header-font-size: var(--hop-overline-font-size);
3068
+ --hop-ListBox-section-header-font-weight: var(--hop-overline-font-weight);
3069
+ --hop-ListBox-section-header-letter-spacing: 0.015rem;
3070
+ --hop-ListBox-section-header-line-height: var(--hop-overline-line-height);
3071
+ --hop-ListBox-section-header-text-transform: uppercase;
3072
+ --hop-ListBox-section-header-padding: var(--hop-space-inset-stretch-sm);
3073
+ --hop-ListBox-section-header-top-offset: var(--hop-overline-top-offset);
3074
+ --hop-ListBox-section-header-bottom-offset: var(--hop-overline-bottom-offset);
3075
+ --hop-ListBox-divider-margin-block: var(--hop-space-stack-sm);
3076
+ --hop-ListBox-divider-margin-inline: calc(-1 * var(--hop-ListBox-padding-inline));
3077
+ --max-width: var(--hop-ListBox-max-width);
3078
+ --width: var(--hop-ListBox-width);
3079
+ --section-padding-block-start: var(--hop-ListBox-section-padding-block);
3080
+ --section-padding-block-end: var(--hop-ListBox-section-padding-block);
3081
+ --section-margin-block-start: 0;
3082
+ --section-margin-block-end: 0;
3083
+ --section-border-block-start: 0;
3084
+ --section-border-block-end: var(--hop-ListBox-section-border-size) solid var(--hop-ListBox-section-border-color);
3085
+ overflow-y: auto;
3086
+ box-sizing: border-box;
3087
+ inline-size: var(--width);
3088
+ min-inline-size: var(--hop-ListBox-min-width);
3089
+ max-inline-size: var(--max-width);
3090
+ padding-block: var(--hop-ListBox-padding-block);
3091
+ padding-inline: var(--hop-ListBox-padding-inline);
3092
+ background-color: var(--hop-ListBox-background-color);
3093
+ border: var(--hop-ListBox-border-size) solid var(--hop-ListBox-border-color);
3094
+ border-radius: var(--hop-ListBox-border-radius);
3095
+ }
3096
+ .ListBox-module__hop-ListBox--fluid___3coRA {
3097
+ --max-width: var(--hop-ListBox-fluid-max-width);
3098
+ --width: var(--hop-ListBox-fluid-width);
3099
+ }
3100
+ .ListBox-module__hop-ListBox__section___gO1Qv {
3101
+ margin-block: var(--section-margin-block-start) var(--section-margin-block-end);
3102
+ margin-inline: var(--hop-ListBox-section-margin-inline);
3103
+ padding-block: var(--section-padding-block-start) var(--section-padding-block-end);
3104
+ padding-inline: var(--hop-ListBox-section-padding-inline);
3105
+ border-block-start: var(--section-border-block-start);
3106
+ border-block-end: var(--section-border-block-end);
3107
+ }
3108
+ .ListBox-module__hop-ListBox__item___RB9VA + .ListBox-module__hop-ListBox__section___gO1Qv {
3109
+ --section-margin-block-start: var(--hop-ListBox-section-margin-block);
3110
+ --section-border-block-start: var(--hop-ListBox-section-border-size) solid var(--hop-ListBox-section-border-color);
3111
+ }
3112
+ .ListBox-module__hop-ListBox__section___gO1Qv:has(+ .ListBox-module__hop-ListBox__item___RB9VA) {
3113
+ --section-margin-block-end: var(--hop-ListBox-section-margin-block);
3114
+ }
3115
+ .ListBox-module__hop-ListBox__section___gO1Qv:first-child {
3116
+ --section-padding-block-start: 0;
3117
+ }
3118
+ .ListBox-module__hop-ListBox__section___gO1Qv:last-child {
3119
+ --section-padding-block-end: 0;
3120
+ --section-border-block-end: 0;
3121
+ }
3122
+ .ListBox-module__hop-ListBox__section-header___NklA1 {
3123
+ margin: 0;
3124
+ padding: var(--hop-ListBox-section-header-padding);
3125
+ font-family: var(--hop-ListBox-section-header-font-family);
3126
+ font-size: var(--hop-ListBox-section-header-font-size);
3127
+ font-weight: var(--hop-ListBox-section-header-font-weight);
3128
+ line-height: var(--hop-ListBox-section-header-line-height);
3129
+ text-transform: var(--hop-ListBox-section-header-text-transform);
3130
+ letter-spacing: var(--hop-ListBox-section-header-letter-spacing);
3131
+ }
3132
+ .ListBox-module__hop-ListBox__section-header___NklA1::before,
3133
+ .ListBox-module__hop-ListBox__section-header___NklA1::after {
3134
+ content: "";
3135
+ display: block;
3136
+ box-sizing: border-box;
3137
+ inline-size: 0;
3138
+ block-size: 0;
3139
+ }
3140
+ .ListBox-module__hop-ListBox__section-header___NklA1::before {
3141
+ margin-block-end: var(--hop-ListBox-section-header-bottom-offset);
3142
+ }
3143
+ .ListBox-module__hop-ListBox__section-header___NklA1::after {
3144
+ margin-block-start: var(--hop-ListBox-section-header-top-offset);
3145
+ }
3146
+ .ListBox-module__hop-ListBox__divider___fsuh2 {
3147
+ margin-block: var(--hop-ListBox-divider-margin-block);
3148
+ margin-inline: var(--hop-ListBox-divider-margin-inline);
3149
+ }
3150
+
3151
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/overlays/Popover/src/Popover.module.css/#css-module-data */
3152
+ :where(.Popover-module__hop-Popover___RNUtp *) {
3153
+ font-family: var(--font-family);
3154
+ font-size: var(--font-size);
3155
+ font-weight: var(--font-weight);
3156
+ line-height: var(--line-height);
3157
+ outline: none;
3158
+ }
3159
+ .Popover-module__hop-Popover__dialog___EcMei {
3160
+ --hop-Popover-background: var(--hop-neutral-surface);
3161
+ --hop-Popover-font-family: var(--hop-body-sm-font-family);
3162
+ --hop-Popover-font-size: var(--hop-body-sm-font-size);
3163
+ --hop-Popover-font-weight: var(--hop-body-sm-font-weight);
3164
+ --hop-Popover-line-height: var(--hop-body-sm-line-height);
3165
+ --hop-Popover-color: var(--hop-neutral-text);
3166
+ --hop-Popover-title-font-family: var(--hop-body-sm-font-family);
3167
+ --hop-Popover-title-font-weight: var(--hop-body-sm-semibold-font-weight);
3168
+ --hop-Popover-content-font-size: var(--hop-body-sm-font-size);
3169
+ --hop-Popover-content-line-height: var(--hop-body-sm-line-height);
3170
+ --hop-Popover-content-color: var(--hop-neutral-text-weak);
3171
+ --hop-Popover-footer-font-size: var(--hop-body-sm-font-size);
3172
+ --hop-Popover-footer-line-height: var(--hop-body-sm-line-height);
3173
+ --hop-Popover-footer-link-color: var(--hop-primary-text);
3174
+ --hop-Popover-border: 0.0625rem solid var(--hop-neutral-border-weak);
3175
+ --hop-Popover-border-radius: var(--hop-shape-rounded-md);
3176
+ --hop-Popover-box-shadow: var(--hop-elevation-lifted);
3177
+ --hop-Popover-max-inline-width: calc(100% - var(--hop-space-inline-md));
3178
+ --font-family: var(--hop-Popover-font-family);
3179
+ --font-size: var(--hop-Popover-font-size);
3180
+ --font-weight: var(--hop-Popover-font-weight);
3181
+ --line-height: var(--hop-Popover-line-height);
3182
+ --width: var(--hop-Popover-max-inline-width);
3183
+ display: grid;
3184
+ grid-template-areas: "header header" "content content" "footer action";
3185
+ grid-template-columns: repeat(2, auto);
3186
+ column-gap: var(--hop-space-inset-sm);
3187
+ box-sizing: border-box;
3188
+ inline-size: var(--width);
3189
+ max-inline-size: var(--width);
3190
+ padding: var(--hop-space-inset-md);
3191
+ background-color: var(--hop-Popover-background);
3192
+ border: var(--hop-Popover-border);
3193
+ border-radius: var(--hop-Popover-border-radius);
3194
+ box-shadow: var(--hop-Popover-box-shadow);
3195
+ @media (width >= 40rem) {
3196
+ --width: 25rem;
3197
+ }
3198
+ }
3199
+ .Popover-module__hop-Popover__title___mb1-K {
3200
+ grid-area: header;
3201
+ color: var(--hop-Popover-color);
3202
+ }
3203
+ .Popover-module__hop-Popover__actions___OAUQ0,
3204
+ .Popover-module__hop-Popover__action___5Ok8v {
3205
+ grid-area: action;
3206
+ justify-self: end;
3207
+ margin-block-start: var(--hop-space-stack-sm);
3208
+ }
3209
+ .Popover-module__hop-Popover__content___n-NbF {
3210
+ --font-size: var(--hop-Popover-content-font-size);
3211
+ --line-height: var(--hop-Popover-content-line-height);
3212
+ grid-area: content;
3213
+ margin-block: var(--hop-space-stack-sm) 0;
3214
+ margin-inline: 0;
3215
+ padding: 0;
3216
+ color: var(--hop-Popover-content-color);
3217
+ }
3218
+ .Popover-module__hop-Popover__footer___zKrod {
3219
+ --font-size: var(--hop-Popover-footer-font-size);
3220
+ --line-height: var(--hop-Popover-footer-line-height);
3221
+ grid-area: footer;
3222
+ place-self: center start;
3223
+ margin-block-start: var(--hop-space-stack-sm);
3224
+ color: var(--hop-Popover-color);
3225
+ }
3226
+
3227
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/switch/src/Switch.module.css/#css-module-data */
3228
+ .Switch-module__hop-Switch___PBSbj {
3229
+ --hop-Switch-border-size: 0.0625rem;
3230
+ --hop-Switch-border-color: var(--hop-neutral-border);
3231
+ --hop-Switch-border-radius: var(--hop-shape-rounded-lg);
3232
+ --hop-Switch-background-color: var(--hop-neutral-surface);
3233
+ --hop-Switch-thumb-color: var(--hop-neutral-icon);
3234
+ --hop-Switch-text-color: var(--hop-neutral-text);
3235
+ --hop-Switch-border-color-hover: var(--hop-neutral-border-hover);
3236
+ --hop-Switch-background-color-hover: var(--hop-neutral-surface-hover);
3237
+ --hop-Switch-thumb-color-hover: var(--hop-neutral-icon-hover);
3238
+ --hop-Switch-text-color-hover: var(--hop-neutral-text-hover);
3239
+ --hop-Switch-border-color-pressed: var(--hop-neutral-border-press);
3240
+ --hop-Switch-background-color-pressed: var(--hop-neutral-surface-press);
3241
+ --hop-Switch-thumb-color-pressed: var(--hop-neutral-icon-press);
3242
+ --hop-Switch-text-color-pressed: var(--hop-neutral-text-press);
3243
+ --hop-Switch-border-color-focus: var(--hop-neutral-border-hover);
3244
+ --hop-Switch-background-color-focus: var(--hop-neutral-surface-hover);
3245
+ --hop-Switch-thumb-color-focus: var(--hop-neutral-icon-hover);
3246
+ --hop-Switch-focus-ring-color: var(--hop-primary-border-focus);
3247
+ --hop-Switch-text-color-focus: var(--hop-neutral-text);
3248
+ --hop-Switch-border-color-selected: var(--hop-neutral-border-selected);
3249
+ --hop-Switch-background-color-selected: var(--hop-neutral-surface-selected);
3250
+ --hop-Switch-thumb-color-selected: var(--hop-neutral-icon-selected);
3251
+ --hop-Switch-text-color-selected: var(--hop-neutral-text);
3252
+ --hop-Switch-border-color-disabled: var(--hop-neutral-border-disabled);
3253
+ --hop-Switch-background-color-disabled: var(--hop-neutral-surface-disabled);
3254
+ --hop-Switch-thumb-color-disabled: var(--hop-neutral-icon-disabled);
3255
+ --hop-Switch-text-color-disabled: var(--hop-neutral-text-disabled);
3256
+ --hop-Switch-inline-size-md: 3rem;
3257
+ --hop-Switch-block-size-md: 1.5rem;
3258
+ --hop-Switch-thumb-size-md: 1rem;
3259
+ --hop-Switch-inset-inline-start-md: var(--hop-space-inset-xs);
3260
+ --hop-Switch-text-top-offset-md: calc((var(--block-size) - (var(--hop-body-md-line-height) * var(--hop-body-md-font-size))) / 2);
3261
+ --hop-Switch-inline-size-sm: 2rem;
3262
+ --hop-Switch-block-size-sm: 1rem;
3263
+ --hop-Switch-thumb-size-sm: 0.75rem;
3264
+ --hop-Switch-inset-inline-start-sm: calc(var(--hop-space-inset-xs) / 2);
3265
+ --hop-Switch-text-top-offset-sm: calc((var(--block-size) - (var(--hop-body-sm-line-height) * var(--hop-body-sm-font-size))) / 2);
3266
+ --border-size: var(--hop-Switch-border-size);
3267
+ --border-color: var(--hop-Switch-border-color);
3268
+ --border-radius: var(--hop-Switch-border-radius);
3269
+ --background-color: var(--hop-Switch-background-color);
3270
+ --column-gap: var(--hop-space-inline-sm);
3271
+ --thumb-color: var(--hop-Switch-thumb-color);
3272
+ --thumb-transform: translate(0, -50%);
3273
+ --outline: none;
3274
+ --cursor: pointer;
3275
+ --text-color: var(--hop-Switch-text-color);
3276
+ cursor: var(--cursor);
3277
+ display: inline-flex;
3278
+ column-gap: var(--column-gap);
3279
+ align-items: flex-start;
3280
+ justify-content: flex-start;
3281
+ box-sizing: border-box;
3282
+ inline-size: max-content;
3283
+ max-inline-size: 100%;
3284
+ }
3285
+ .Switch-module__hop-Switch--sm___XOtE7 {
3286
+ --inline-size: var(--hop-Switch-inline-size-sm);
3287
+ --block-size: var(--hop-Switch-block-size-sm);
3288
+ --thumb-size: var(--hop-Switch-thumb-size-sm);
3289
+ --inset-inline-start: var(--hop-Switch-inset-inline-start-sm);
3290
+ --text-top-offset: var(--hop-Switch-text-top-offset-sm);
3291
+ }
3292
+ .Switch-module__hop-Switch--md___2hAHs {
3293
+ --inline-size: var(--hop-Switch-inline-size-md);
3294
+ --block-size: var(--hop-Switch-block-size-md);
3295
+ --thumb-size: var(--hop-Switch-thumb-size-md);
3296
+ --inset-inline-start: var(--hop-Switch-inset-inline-start-md);
3297
+ --text-top-offset: var(--hop-Switch-text-top-offset-md);
3298
+ }
3299
+ .Switch-module__hop-Switch___PBSbj[data-hovered] {
3300
+ --border-color: var(--hop-Switch-border-color-hover);
3301
+ --background-color: var(--hop-Switch-background-color-hover);
3302
+ --thumb-color: var(--hop-Switch-thumb-color-hover);
3303
+ --text-color: var(--hop-Switch-text-color-hover);
3304
+ }
3305
+ .Switch-module__hop-Switch___PBSbj[data-pressed],
3306
+ .Switch-module__hop-Switch___PBSbj[data-pressed][data-focus-visible] {
3307
+ --border-color: var(--hop-Switch-border-color-pressed);
3308
+ --background-color: var(--hop-Switch-background-color-pressed);
3309
+ --thumb-color: var(--hop-Switch-thumb-color-pressed);
3310
+ --text-color: var(--hop-Switch-text-color-pressed);
3311
+ }
3312
+ .Switch-module__hop-Switch___PBSbj[data-focus-visible] {
3313
+ --border-color: var(--hop-Switch-border-color-focus);
3314
+ --background-color: var(--hop-Switch-background-color-focus);
3315
+ --thumb-color: var(--hop-Switch-thumb-color-focus);
3316
+ --outline: 0.125rem solid var(--hop-Switch-focus-ring-color);
3317
+ --text-color: var(--hop-Switch-text-color-focus);
3318
+ }
3319
+ .Switch-module__hop-Switch___PBSbj[data-selected],
3320
+ .Switch-module__hop-Switch___PBSbj[data-selected][data-pressed] {
3321
+ --border-color: var(--hop-Switch-border-color-selected);
3322
+ --background-color: var(--hop-Switch-background-color-selected);
3323
+ --thumb-color: var(--hop-Switch-thumb-color-selected);
3324
+ --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%);
3325
+ --text-color: var(--hop-Switch-text-color-selected);
3326
+ }
3327
+ .Switch-module__hop-Switch___PBSbj[data-disabled] {
3328
+ --border-color: var(--hop-Switch-border-color-disabled);
3329
+ --background-color: var(--hop-Switch-background-color-disabled);
3330
+ --thumb-color: var(--hop-Switch-thumb-color-disabled);
3331
+ --text-color: var(--hop-Switch-text-color-disabled);
3332
+ --cursor: not-allowed;
3333
+ }
3334
+ .Switch-module__hop-Switch__indicator___yA7xK {
3335
+ position: relative;
3336
+ flex: 0 0 auto;
3337
+ box-sizing: border-box;
3338
+ inline-size: var(--inline-size, var(--hop-Switch-inline-size-md));
3339
+ block-size: var(--block-size, var(--hop-Switch-block-size-md));
3340
+ background-color: var(--background-color);
3341
+ border: var(--border-size) solid var(--border-color);
3342
+ border-radius: var(--border-radius);
3343
+ outline: var(--outline);
3344
+ outline-offset: 0.125rem;
3345
+ transition: background var(--hop-easing-duration-2), border-color var(--hop-easing-duration-2);
3346
+ }
3347
+ .Switch-module__hop-Switch__indicator___yA7xK::before {
3348
+ content: "";
3349
+ position: absolute;
3350
+ inset-block-start: 50%;
3351
+ inset-inline-start: var(--inset-inline-start);
3352
+ transform: var(--thumb-transform);
3353
+ flex: 0 0 auto;
3354
+ order: 1;
3355
+ box-sizing: border-box;
3356
+ inline-size: var(--thumb-size);
3357
+ block-size: var(--thumb-size);
3358
+ background-color: var(--thumb-color);
3359
+ border-radius: var(--hop-shape-circle);
3360
+ transition: transform var(--hop-easing-duration-2), background var(--hop-easing-duration-2);
3361
+ }
3362
+ .Switch-module__hop-Switch__text___zM-BW {
3363
+ flex: 0 1 auto;
3364
+ order: 2;
3365
+ min-inline-size: 0;
3366
+ margin-block-start: var(--text-top-offset, var(--hop-Switch-text-top-offset-md));
3367
+ color: var(--text-color);
3368
+ }
3369
+ .Switch-module__hop-Switch__icon-list___rl5uH,
3370
+ .Switch-module__hop-Switch__icon___TgU-E {
3371
+ order: 3;
3372
+ }
3373
+
3374
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/switch/src/SwitchField.module.css/#css-module-data */
3375
+ .SwitchField-module__hop-SwitchField___zDwCH {
3376
+ --hop-SwitchField-description-color: var(--hop-neutral-text-weak);
3377
+ --hop-SwitchField-description-color-disabled: var(--hop-neutral-text-disabled);
3378
+ --hop-SwitchField-sm-row-gap: var(--hop-space-stack-xs);
3379
+ --hop-SwitchField-switch-sm-inline-size: 2rem;
3380
+ --hop-SwitchField-description-sm-margin-inline-start: calc(var(--hop-SwitchField-switch-sm-inline-size) + var(--hop-space-inline-sm));
3381
+ --hop-SwitchField-md-row-gap: var(--hop-space-stack-xs);
3382
+ --hop-SwitchField-switch-md-inline-size: 3rem;
3383
+ --hop-SwitchField-description-md-margin-inline-start: calc(var(--hop-SwitchField-switch-md-inline-size) + var(--hop-space-inline-sm));
3384
+ --description-color: var(--hop-SwitchField-description-color);
3385
+ display: flex;
3386
+ flex-direction: column;
3387
+ row-gap: var(--row-gap, var(--hop-space-stack-sm));
3388
+ align-items: flex-start;
3389
+ justify-content: flex-start;
3390
+ box-sizing: border-box;
3391
+ inline-size: max-content;
3392
+ max-inline-size: 100%;
3393
+ }
3394
+ .SwitchField-module__hop-SwitchField___zDwCH[data-disabled] {
3395
+ --description-color: var(--hop-SwitchField-description-color-disabled);
3396
+ }
3397
+ .SwitchField-module__hop-SwitchField--sm___lMs5H {
3398
+ --row-gap: var(--hop-SwitchField-sm-row-gap);
3399
+ --description-margin-inline-start: var(--hop-SwitchField-description-sm-margin-inline-start);
3400
+ }
3401
+ .SwitchField-module__hop-SwitchField--md___QxTMV {
3402
+ --row-gap: var(--hop-SwitchField-md-row-gap);
3403
+ --description-margin-inline-start: var(--hop-SwitchField-description-md-margin-inline-start);
3404
+ }
3405
+ .SwitchField-module__hop-SwitchField__description___VfRpb {
3406
+ order: 2;
3407
+ margin-inline-start: var(--description-margin-inline-start, var(--hop-SwitchField-description-md-margin-inline-start));
3408
+ color: var(--description-color);
3409
+ }
3410
+ .SwitchField-module__hop-SwitchField__switch___CmbgN {
3411
+ order: 1;
3412
+ }
3413
+
3414
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/tag/src/Tag.module.css/#css-module-data */
3415
+ .Tag-module__hop-Tag___ny25M {
3416
+ --hop-Tag-border-size: 0.0625rem;
3417
+ --hop-Tag-border-radius: var(--hop-shape-pill);
3418
+ --hop-Tag-sm-block-size: 1.25rem;
3419
+ --hop-Tag-sm-padding-inline: var(--hop-space-inset-sm);
3420
+ --hop-Tag-sm-column-gap: var(--hop-space-inline-xs);
3421
+ --hop-Tag-sm-icon-margin-inline-start: 0;
3422
+ --hop-Tag-sm-element-margin-inline-end-sm: calc(-1 * var(--hop-space-inline-xs));
3423
+ --hop-Tag-sm-element-margin-inline-end-zero: calc(-1 * var(--hop-Tag-sm-padding-inline));
3424
+ --hop-Tag-sm-badge-margin-inline-end: var(--hop-Tag-sm-element-margin-inline-end-zero);
3425
+ --hop-Tag-sm-avatar-margin-inline-start: calc(var(--hop-Tag-sm-element-margin-inline-end-sm) - (var(--hop-space-inline-xs) / 2));
3426
+ --hop-Tag-sm-clear-btn-margin-inline: calc(-1 * var(--hop-Tag-sm-column-gap)) var(--hop-Tag-sm-element-margin-inline-end-zero);
3427
+ --hop-Tag-sm-spinner-margin-inline-end: var(--hop-Tag-sm-element-margin-inline-end-sm);
3428
+ --hop-Tag-md-block-size: 1.5rem;
3429
+ --hop-Tag-md-padding-inline: var(--hop-space-inset-sm);
3430
+ --hop-Tag-md-column-gap: var(--hop-space-inline-xs);
3431
+ --hop-Tag-md-icon-margin-inline-start: 0;
3432
+ --hop-Tag-md-element-margin-inline-end-sm: calc(-1 * var(--hop-space-inline-xs));
3433
+ --hop-Tag-md-element-margin-inline-end-zero: calc(-1 * var(--hop-Tag-md-padding-inline));
3434
+ --hop-Tag-md-badge-margin-inline-end: var(--hop-Tag-md-element-margin-inline-end-zero);
3435
+ --hop-Tag-md-avatar-margin-inline-start: var(--hop-Tag-md-element-margin-inline-end-sm);
3436
+ --hop-Tag-md-clear-btn-margin-inline: calc(-1 * var(--hop-Tag-md-column-gap)) var(--hop-Tag-md-element-margin-inline-end-zero);
3437
+ --hop-Tag-md-spinner-margin-inline-end: var(--hop-Tag-md-element-margin-inline-end-sm);
3438
+ --hop-Tag-lg-block-size: 2rem;
3439
+ --hop-Tag-lg-padding-inline: var(--hop-space-inset-md);
3440
+ --hop-Tag-lg-column-gap: var(--hop-space-inline-sm);
3441
+ --hop-Tag-lg-icon-margin-inline-start: calc(-1 * var(--hop-space-inline-sm));
3442
+ --hop-Tag-lg-element-margin-inline-end-sm: calc(-1 * (var(--hop-Tag-lg-padding-inline) - var(--hop-space-inline-xs)));
3443
+ --hop-Tag-lg-badge-margin-inline-end: var(--hop-Tag-lg-element-margin-inline-end-sm);
3444
+ --hop-Tag-lg-avatar-margin-inline-start: var(--hop-Tag-lg-element-margin-inline-end-sm);
3445
+ --hop-Tag-lg-clear-btn-margin-inline: 0 var(--hop-Tag-lg-element-margin-inline-end-sm);
3446
+ --hop-Tag-lg-spinner-margin-inline-end: var(--hop-Tag-lg-element-margin-inline-end-sm);
3447
+ --hop-Tag-neutral-border-color: var(--hop-neutral-border);
3448
+ --hop-Tag-neutral-background-color: var(--hop-neutral-surface);
3449
+ --hop-Tag-neutral-text-color: var(--hop-neutral-text);
3450
+ --hop-Tag-subdued-border-color: var(--hop-neutral-border);
3451
+ --hop-Tag-subdued-background-color: var(--hop-neutral-surface-weak);
3452
+ --hop-Tag-subdued-text-color: var(--hop-neutral-text);
3453
+ --hop-Tag-progress-border-color: transparent;
3454
+ --hop-Tag-progress-background-color: var(--hop-status-progress-surface);
3455
+ --hop-Tag-progress-text-color: var(--hop-status-progress-text);
3456
+ --hop-Tag-positive-border-color: transparent;
3457
+ --hop-Tag-positive-background-color: var(--hop-status-positive-surface);
3458
+ --hop-Tag-positive-text-color: var(--hop-status-positive-text);
3459
+ --hop-Tag-caution-border-color: transparent;
3460
+ --hop-Tag-caution-background-color: var(--hop-status-caution-surface);
3461
+ --hop-Tag-caution-text-color: var(--hop-status-caution-text);
3462
+ --hop-Tag-negative-border-color: transparent;
3463
+ --hop-Tag-negative-background-color: var(--hop-status-negative-surface);
3464
+ --hop-Tag-negative-text-color: var(--hop-status-negative-text);
3465
+ --hop-Tag-option1-border-color: transparent;
3466
+ --hop-Tag-option1-background-color: var(--hop-status-option1-surface);
3467
+ --hop-Tag-option1-text-color: var(--hop-status-option1-text);
3468
+ --hop-Tag-option2-border-color: transparent;
3469
+ --hop-Tag-option2-background-color: var(--hop-status-option2-surface);
3470
+ --hop-Tag-option2-text-color: var(--hop-status-option2-text);
3471
+ --hop-Tag-option3-border-color: transparent;
3472
+ --hop-Tag-option3-background-color: var(--hop-status-option3-surface);
3473
+ --hop-Tag-option3-text-color: var(--hop-status-option3-text);
3474
+ --hop-Tag-option4-border-color: transparent;
3475
+ --hop-Tag-option4-background-color: var(--hop-status-option4-surface);
3476
+ --hop-Tag-option4-text-color: var(--hop-status-option4-text);
3477
+ --hop-Tag-option5-border-color: transparent;
3478
+ --hop-Tag-option5-background-color: var(--hop-status-option5-surface);
3479
+ --hop-Tag-option5-text-color: var(--hop-status-option5-text);
3480
+ --hop-Tag-option6-border-color: transparent;
3481
+ --hop-Tag-option6-background-color: var(--hop-status-option6-surface);
3482
+ --hop-Tag-option6-text-color: var(--hop-status-option6-text);
3483
+ --hop-Tag-focus-ring-color: var(--hop-primary-border-focus);
3484
+ --hop-Tag-neutral-background-color-focus: var(--hop-neutral-surface-hover);
3485
+ --hop-Tag-neutral-border-color-focus: var(--hop-neutral-border-hover);
3486
+ --hop-Tag-neutral-text-color-focus: var(--hop-neutral-text-hover);
3487
+ --hop-Tag-subdued-background-color-focus: var(--hop-neutral-surface-weak-hover);
3488
+ --hop-Tag-subdued-border-color-focus: var(--hop-neutral-border-hover);
3489
+ --hop-Tag-subdued-text-color-focus: var(--hop-neutral-text-hover);
3490
+ --hop-Tag-progress-background-color-focus: var(--hop-status-progress-surface-hover);
3491
+ --hop-Tag-progress-border-color-focus: transparent;
3492
+ --hop-Tag-progress-text-color-focus: var(--hop-status-progress-text-hover);
3493
+ --hop-Tag-positive-background-color-focus: var(--hop-status-positive-surface-hover);
3494
+ --hop-Tag-positive-border-color-focus: transparent;
3495
+ --hop-Tag-positive-text-color-focus: var(--hop-status-positive-text-hover);
3496
+ --hop-Tag-caution-background-color-focus: var(--hop-status-caution-surface-hover);
3497
+ --hop-Tag-caution-border-color-focus: transparent;
3498
+ --hop-Tag-caution-text-color-focus: var(--hop-status-caution-text-hover);
3499
+ --hop-Tag-negative-background-color-focus: var(--hop-status-negative-surface-hover);
3500
+ --hop-Tag-negative-border-color-focus: transparent;
3501
+ --hop-Tag-negative-text-color-focus: var(--hop-status-negative-text-hover);
3502
+ --hop-Tag-option1-background-color-focus: var(--hop-status-option1-surface-hover);
3503
+ --hop-Tag-option1-border-color-focus: transparent;
3504
+ --hop-Tag-option1-text-color-focus: var(--hop-status-option1-text-hover);
3505
+ --hop-Tag-option2-background-color-focus: var(--hop-status-option2-surface-hover);
3506
+ --hop-Tag-option2-border-color-focus: transparent;
3507
+ --hop-Tag-option2-text-color-focus: var(--hop-status-option2-text-hover);
3508
+ --hop-Tag-option3-background-color-focus: var(--hop-status-option3-surface-hover);
3509
+ --hop-Tag-option3-border-color-focus: transparent;
3510
+ --hop-Tag-option3-text-color-focus: var(--hop-status-option3-text-hover);
3511
+ --hop-Tag-option4-background-color-focus: var(--hop-status-option4-surface-hover);
3512
+ --hop-Tag-option4-border-color-focus: transparent;
3513
+ --hop-Tag-option4-text-color-focus: var(--hop-status-option4-text-hover);
3514
+ --hop-Tag-option5-background-color-focus: var(--hop-status-option5-surface-hover);
3515
+ --hop-Tag-option5-border-color-focus: transparent;
3516
+ --hop-Tag-option5-text-color-focus: var(--hop-status-option5-text-hover);
3517
+ --hop-Tag-option6-background-color-focus: var(--hop-status-option6-surface-hover);
3518
+ --hop-Tag-option6-border-color-focus: transparent;
3519
+ --hop-Tag-option6-text-color-focus: var(--hop-status-option6-text-hover);
3520
+ --hop-Tag-neutral-background-color-hover: var(--hop-neutral-surface-hover);
3521
+ --hop-Tag-neutral-border-color-hover: var(--hop-neutral-border-hover);
3522
+ --hop-Tag-neutral-text-color-hover: var(--hop-neutral-text-hover);
3523
+ --hop-Tag-subdued-background-color-hover: var(--hop-neutral-surface-weak-hover);
3524
+ --hop-Tag-subdued-border-color-hover: var(--hop-neutral-border-hover);
3525
+ --hop-Tag-subdued-text-color-hover: var(--hop-neutral-text-hover);
3526
+ --hop-Tag-progress-background-color-hover: var(--hop-status-progress-surface-hover);
3527
+ --hop-Tag-progress-border-color-hover: transparent;
3528
+ --hop-Tag-progress-text-color-hover: var(--hop-status-progress-text-hover);
3529
+ --hop-Tag-positive-background-color-hover: var(--hop-status-positive-surface-hover);
3530
+ --hop-Tag-positive-border-color-hover: transparent;
3531
+ --hop-Tag-positive-text-color-hover: var(--hop-status-positive-text-hover);
3532
+ --hop-Tag-caution-background-color-hover: var(--hop-status-caution-surface-hover);
3533
+ --hop-Tag-caution-border-color-hover: transparent;
3534
+ --hop-Tag-caution-text-color-hover: var(--hop-status-caution-text-hover);
3535
+ --hop-Tag-negative-background-color-hover: var(--hop-status-negative-surface-hover);
3536
+ --hop-Tag-negative-border-color-hover: transparent;
3537
+ --hop-Tag-negative-text-color-hover: var(--hop-status-negative-text-hover);
3538
+ --hop-Tag-option1-background-color-hover: var(--hop-status-option1-surface-hover);
3539
+ --hop-Tag-option1-border-color-hover: transparent;
3540
+ --hop-Tag-option1-text-color-hover: var(--hop-status-option1-text-hover);
3541
+ --hop-Tag-option2-background-color-hover: var(--hop-status-option2-surface-hover);
3542
+ --hop-Tag-option2-border-color-hover: transparent;
3543
+ --hop-Tag-option2-text-color-hover: var(--hop-status-option2-text-hover);
3544
+ --hop-Tag-option3-background-color-hover: var(--hop-status-option3-surface-hover);
3545
+ --hop-Tag-option3-border-color-hover: transparent;
3546
+ --hop-Tag-option3-text-color-hover: var(--hop-status-option3-text-hover);
3547
+ --hop-Tag-option4-background-color-hover: var(--hop-status-option4-surface-hover);
3548
+ --hop-Tag-option4-border-color-hover: transparent;
3549
+ --hop-Tag-option4-text-color-hover: var(--hop-status-option4-text-hover);
3550
+ --hop-Tag-option5-background-color-hover: var(--hop-status-option5-surface-hover);
3551
+ --hop-Tag-option5-border-color-hover: transparent;
3552
+ --hop-Tag-option5-text-color-hover: var(--hop-status-option5-text-hover);
3553
+ --hop-Tag-option6-background-color-hover: var(--hop-status-option6-surface-hover);
3554
+ --hop-Tag-option6-border-color-hover: transparent;
3555
+ --hop-Tag-option6-text-color-hover: var(--hop-status-option6-text-hover);
3556
+ --hop-Tag-background-color-selected: var(--hop-neutral-surface-selected);
3557
+ --hop-Tag-border-color-selected: var(--hop-neutral-border-selected);
3558
+ --hop-Tag-text-color-selected: var(--hop-neutral-text-selected);
3559
+ --hop-Tag-neutral-background-color-press: var(--hop-neutral-surface-press);
3560
+ --hop-Tag-neutral-border-color-press: var(--hop-neutral-border-press);
3561
+ --hop-Tag-neutral-text-color-press: var(--hop-neutral-text-press);
3562
+ --hop-Tag-subdued-background-color-press: var(--hop-neutral-surface-weak-press);
3563
+ --hop-Tag-subdued-border-color-press: var(--hop-neutral-border-press);
3564
+ --hop-Tag-subdued-text-color-press: var(--hop-neutral-text-press);
3565
+ --hop-Tag-progress-background-color-press: var(--hop-status-progress-surface-press);
3566
+ --hop-Tag-progress-border-color-press: transparent;
3567
+ --hop-Tag-progress-text-color-press: var(--hop-status-progress-text-press);
3568
+ --hop-Tag-positive-background-color-press: var(--hop-status-positive-surface-press);
3569
+ --hop-Tag-positive-border-color-press: transparent;
3570
+ --hop-Tag-positive-text-color-press: var(--hop-status-positive-text-press);
3571
+ --hop-Tag-caution-background-color-press: var(--hop-status-caution-surface-press);
3572
+ --hop-Tag-caution-border-color-press: transparent;
3573
+ --hop-Tag-caution-text-color-press: var(--hop-status-caution-text-press);
3574
+ --hop-Tag-negative-background-color-press: var(--hop-status-negative-surface-press);
3575
+ --hop-Tag-negative-border-color-press: transparent;
3576
+ --hop-Tag-negative-text-color-press: var(--hop-status-negative-text-press);
3577
+ --hop-Tag-option1-background-color-press: var(--hop-status-option1-surface-press);
3578
+ --hop-Tag-option1-border-color-press: transparent;
3579
+ --hop-Tag-option1-text-color-press: var(--hop-status-option1-text-press);
3580
+ --hop-Tag-option2-background-color-press: var(--hop-status-option2-surface-press);
3581
+ --hop-Tag-option2-border-color-press: transparent;
3582
+ --hop-Tag-option2-text-color-press: var(--hop-status-option2-text-press);
3583
+ --hop-Tag-option3-background-color-press: var(--hop-status-option3-surface-press);
3584
+ --hop-Tag-option3-border-color-press: transparent;
3585
+ --hop-Tag-option3-text-color-press: var(--hop-status-option3-text-press);
3586
+ --hop-Tag-option4-background-color-press: var(--hop-status-option4-surface-press);
3587
+ --hop-Tag-option4-border-color-press: transparent;
3588
+ --hop-Tag-option4-text-color-press: var(--hop-status-option4-text-press);
3589
+ --hop-Tag-option5-background-color-press: var(--hop-status-option5-surface-press);
3590
+ --hop-Tag-option5-border-color-press: transparent;
3591
+ --hop-Tag-option5-text-color-press: var(--hop-status-option5-text-press);
3592
+ --hop-Tag-option6-background-color-press: var(--hop-status-option6-surface-press);
3593
+ --hop-Tag-option6-border-color-press: transparent;
3594
+ --hop-Tag-option6-text-color-press: var(--hop-status-option6-text-press);
3595
+ --hop-Tag-border-color-invalid: var(--hop-danger-border-strong);
3596
+ --hop-Tag-neutral-background-color-disabled: var(--hop-neutral-surface-disabled);
3597
+ --hop-Tag-neutral-border-color-disabled: var(--hop-neutral-border-weak);
3598
+ --hop-Tag-neutral-text-color-disabled: var(--hop-neutral-text-disabled);
3599
+ --hop-Tag-subdued-background-color-disabled: var(--hop-neutral-surface-disabled);
3600
+ --hop-Tag-subdued-border-color-disabled: var(--hop-neutral-border-weak);
3601
+ --hop-Tag-subdued-text-color-disabled: var(--hop-neutral-text-disabled);
3602
+ --hop-Tag-progress-background-color-disabled: var(--hop-status-progress-surface-disabled);
3603
+ --hop-Tag-progress-border-color-disabled: transparent;
3604
+ --hop-Tag-progress-text-color-disabled: var(--hop-status-progress-text-disabled);
3605
+ --hop-Tag-positive-background-color-disabled: var(--hop-status-positive-surface-disabled);
3606
+ --hop-Tag-positive-border-color-disabled: transparent;
3607
+ --hop-Tag-positive-text-color-disabled: var(--hop-status-positive-text-disabled);
3608
+ --hop-Tag-caution-background-color-disabled: var(--hop-status-caution-surface-disabled);
3609
+ --hop-Tag-caution-border-color-disabled: transparent;
3610
+ --hop-Tag-caution-text-color-disabled: var(--hop-status-caution-text-disabled);
3611
+ --hop-Tag-negative-background-color-disabled: var(--hop-status-negative-surface-disabled);
3612
+ --hop-Tag-negative-border-color-disabled: transparent;
3613
+ --hop-Tag-negative-text-color-disabled: var(--hop-status-negative-text-disabled);
3614
+ --hop-Tag-option1-background-color-disabled: var(--hop-status-option1-surface-disabled);
3615
+ --hop-Tag-option1-border-color-disabled: transparent;
3616
+ --hop-Tag-option1-text-color-disabled: var(--hop-status-option1-text-disabled);
3617
+ --hop-Tag-option2-background-color-disabled: var(--hop-status-option2-surface-disabled);
3618
+ --hop-Tag-option2-border-color-disabled: transparent;
3619
+ --hop-Tag-option2-text-color-disabled: var(--hop-status-option2-text-disabled);
3620
+ --hop-Tag-option3-background-color-disabled: var(--hop-status-option3-surface-disabled);
3621
+ --hop-Tag-option3-border-color-disabled: transparent;
3622
+ --hop-Tag-option3-text-color-disabled: var(--hop-status-option3-text-disabled);
3623
+ --hop-Tag-option4-background-color-disabled: var(--hop-status-option4-surface-disabled);
3624
+ --hop-Tag-option4-border-color-disabled: transparent;
3625
+ --hop-Tag-option4-text-color-disabled: var(--hop-status-option4-text-disabled);
3626
+ --hop-Tag-option5-background-color-disabled: var(--hop-status-option5-surface-disabled);
3627
+ --hop-Tag-option5-border-color-disabled: transparent;
3628
+ --hop-Tag-option5-text-color-disabled: var(--hop-status-option5-text-disabled);
3629
+ --hop-Tag-option6-background-color-disabled: var(--hop-status-option6-surface-disabled);
3630
+ --hop-Tag-option6-border-color-disabled: transparent;
3631
+ --hop-Tag-option6-text-color-disabled: var(--hop-status-option6-text-disabled);
3632
+ --border-radius: var(--hop-Tag-border-radius);
3633
+ --border-size: var(--hop-Tag-border-size);
3634
+ --badge-secondary-margin-inline-start: calc(-1 * var(--column-gap));
3635
+ --focus-ring-color: var(--hop-Tag-focus-ring-color);
3636
+ overflow: hidden;
3637
+ display: inline-flex;
3638
+ column-gap: var(--column-gap);
3639
+ align-items: center;
3640
+ justify-content: center;
3641
+ box-sizing: border-box;
3642
+ inline-size: max-content;
3643
+ max-inline-size: 100%;
3644
+ block-size: var(--block-size);
3645
+ padding-inline: var(--padding-inline);
3646
+ color: var(--text-color);
3647
+ white-space: nowrap;
3648
+ background-color: var(--background-color);
3649
+ border: var(--border-size) solid var(--border-color);
3650
+ border-radius: var(--border-radius);
3651
+ outline: none;
3652
+ outline-offset: 0.125rem;
3653
+ }
3654
+ .Tag-module__hop-Tag--sm___8HZnL {
3655
+ --block-size: var(--hop-Tag-sm-block-size);
3656
+ --padding-inline: var(--hop-Tag-sm-padding-inline);
3657
+ --column-gap: var(--hop-Tag-sm-column-gap);
3658
+ --clear-btn-margin-inline: var(--hop-Tag-sm-clear-btn-margin-inline);
3659
+ --avatar-margin-inline-start: var(--hop-Tag-sm-avatar-margin-inline-start);
3660
+ --spinner-margin-inline-end: var(--hop-Tag-sm-spinner-margin-inline-end);
3661
+ }
3662
+ .Tag-module__hop-Tag--sm___8HZnL:not(:has(.Tag-module__hop-Tag__remove-btn___t3dDt, .Tag-module__hop-Tag__Spinner___ElUBi)) {
3663
+ --badge-margin-inline-end: var(--hop-Tag-sm-badge-margin-inline-end);
3664
+ }
3665
+ .Tag-module__hop-Tag--sm___8HZnL:not(:has(.Tag-module__hop-Tag__avatar___iBocm)) {
3666
+ --icon-margin-inline-start: var(--hop-Tag-sm-icon-margin-inline-start);
3667
+ }
3668
+ .Tag-module__hop-Tag--md___I7jIl {
3669
+ --block-size: var(--hop-Tag-md-block-size);
3670
+ --padding-inline: var(--hop-Tag-md-padding-inline);
3671
+ --column-gap: var(--hop-Tag-md-column-gap);
3672
+ --clear-btn-margin-inline: var(--hop-Tag-md-clear-btn-margin-inline);
3673
+ --avatar-margin-inline-start: var(--hop-Tag-md-avatar-margin-inline-start);
3674
+ --spinner-margin-inline-end: var(--hop-Tag-md-spinner-margin-inline-end);
3675
+ }
3676
+ .Tag-module__hop-Tag--md___I7jIl:not(:has(.Tag-module__hop-Tag__remove-btn___t3dDt, .Tag-module__hop-Tag__Spinner___ElUBi)) {
3677
+ --badge-margin-inline-end: var(--hop-Tag-md-badge-margin-inline-end);
3678
+ }
3679
+ .Tag-module__hop-Tag--md___I7jIl:not(:has(.Tag-module__hop-Tag__avatar___iBocm)) {
3680
+ --icon-margin-inline-start: var(--hop-Tag-md-icon-margin-inline-start);
3681
+ }
3682
+ .Tag-module__hop-Tag--lg___qi94e {
3683
+ --block-size: var(--hop-Tag-lg-block-size);
3684
+ --padding-inline: var(--hop-Tag-lg-padding-inline);
3685
+ --column-gap: var(--hop-Tag-lg-column-gap);
3686
+ --clear-btn-margin-inline: var(--hop-Tag-lg-clear-btn-margin-inline);
3687
+ --avatar-margin-inline-start: var(--hop-Tag-lg-avatar-margin-inline-start);
3688
+ --spinner-margin-inline-end: var(--hop-Tag-lg-spinner-margin-inline-end);
3689
+ }
3690
+ .Tag-module__hop-Tag--lg___qi94e:not(:has(.Tag-module__hop-Tag__remove-btn___t3dDt, .Tag-module__hop-Tag__Spinner___ElUBi)) {
3691
+ --badge-margin-inline-end: var(--hop-Tag-lg-badge-margin-inline-end);
3692
+ }
3693
+ .Tag-module__hop-Tag--lg___qi94e:not(:has(.Tag-module__hop-Tag__avatar___iBocm)) {
3694
+ --icon-margin-inline-start: var(--hop-Tag-lg-icon-margin-inline-start);
3695
+ }
3696
+ .Tag-module__hop-Tag--neutral___sFxLb {
3697
+ --border-color: var(--hop-Tag-neutral-border-color);
3698
+ --background-color: var(--hop-Tag-neutral-background-color);
3699
+ --text-color: var(--hop-Tag-neutral-text-color);
3700
+ }
3701
+ .Tag-module__hop-Tag--subdued___8gdRL {
3702
+ --border-color: var(--hop-Tag-subdued-border-color);
3703
+ --background-color: var(--hop-Tag-subdued-background-color);
3704
+ --text-color: var(--hop-Tag-subdued-text-color);
3705
+ }
3706
+ .Tag-module__hop-Tag--progress___NnhA5 {
3707
+ --border-color: var(--hop-Tag-progress-border-color);
3708
+ --background-color: var(--hop-Tag-progress-background-color);
3709
+ --text-color: var(--hop-Tag-progress-text-color);
3710
+ }
3711
+ .Tag-module__hop-Tag--positive___H8sFB {
3712
+ --border-color: var(--hop-Tag-positive-border-color);
3713
+ --background-color: var(--hop-Tag-positive-background-color);
3714
+ --text-color: var(--hop-Tag-positive-text-color);
3715
+ }
3716
+ .Tag-module__hop-Tag--caution___yiUVc {
3717
+ --border-color: var(--hop-Tag-caution-border-color);
3718
+ --background-color: var(--hop-Tag-caution-background-color);
3719
+ --text-color: var(--hop-Tag-caution-text-color);
3720
+ }
3721
+ .Tag-module__hop-Tag--negative___Kx5BK {
3722
+ --border-color: var(--hop-Tag-negative-border-color);
3723
+ --background-color: var(--hop-Tag-negative-background-color);
3724
+ --text-color: var(--hop-Tag-negative-text-color);
3725
+ }
3726
+ .Tag-module__hop-Tag--option1___y-QlT {
3727
+ --border-color: var(--hop-Tag-option1-border-color);
3728
+ --background-color: var(--hop-Tag-option1-background-color);
3729
+ --text-color: var(--hop-Tag-option1-text-color);
3730
+ }
3731
+ .Tag-module__hop-Tag--option2___eupOO {
3732
+ --border-color: var(--hop-Tag-option2-border-color);
3733
+ --background-color: var(--hop-Tag-option2-background-color);
3734
+ --text-color: var(--hop-Tag-option2-text-color);
3735
+ }
3736
+ .Tag-module__hop-Tag--option3___HdIm3 {
3737
+ --border-color: var(--hop-Tag-option3-border-color);
3738
+ --background-color: var(--hop-Tag-option3-background-color);
3739
+ --text-color: var(--hop-Tag-option3-text-color);
3740
+ }
3741
+ .Tag-module__hop-Tag--option4___6MNs5 {
3742
+ --border-color: var(--hop-Tag-option4-border-color);
3743
+ --background-color: var(--hop-Tag-option4-background-color);
3744
+ --text-color: var(--hop-Tag-option4-text-color);
3745
+ }
3746
+ .Tag-module__hop-Tag--option5___GBX7K {
3747
+ --border-color: var(--hop-Tag-option5-border-color);
3748
+ --background-color: var(--hop-Tag-option5-background-color);
3749
+ --text-color: var(--hop-Tag-option5-text-color);
3750
+ }
3751
+ .Tag-module__hop-Tag--option6___AQNi2 {
3752
+ --border-color: var(--hop-Tag-option6-border-color);
3753
+ --background-color: var(--hop-Tag-option6-background-color);
3754
+ --text-color: var(--hop-Tag-option6-text-color);
3755
+ }
3756
+ .Tag-module__hop-Tag___ny25M[data-href] {
3757
+ cursor: pointer;
3758
+ }
3759
+ .Tag-module__hop-Tag--neutral___sFxLb[data-focus-visible] {
3760
+ --border-color: var(--hop-Tag-neutral-border-color-focus);
3761
+ --background-color: var(--hop-Tag-neutral-background-color-focus);
3762
+ --text-color: var(--hop-Tag-neutral-text-color-focus);
3763
+ }
3764
+ .Tag-module__hop-Tag--neutral___sFxLb[data-hovered] {
3765
+ --border-color: var(--hop-Tag-neutral-border-color-hover);
3766
+ --background-color: var(--hop-Tag-neutral-background-color-hover);
3767
+ --text-color: var(--hop-Tag-neutral-text-color-hover);
3768
+ }
3769
+ .Tag-module__hop-Tag--neutral___sFxLb[data-pressed] {
3770
+ --border-color: var(--hop-Tag-neutral-border-color-press);
3771
+ --background-color: var(--hop-Tag-neutral-background-color-press);
3772
+ --text-color: var(--hop-Tag-neutral-text-color-press);
3773
+ }
3774
+ .Tag-module__hop-Tag--neutral___sFxLb[data-disabled] {
3775
+ --border-color: var(--hop-Tag-neutral-border-color-disabled);
3776
+ --background-color: var(--hop-Tag-neutral-background-color-disabled);
3777
+ --text-color: var(--hop-Tag-neutral-text-color-disabled);
3778
+ }
3779
+ .Tag-module__hop-Tag--subdued___8gdRL[data-focus-visible] {
3780
+ --border-color: var(--hop-Tag-subdued-border-color-focus);
3781
+ --background-color: var(--hop-Tag-subdued-background-color-focus);
3782
+ --text-color: var(--hop-Tag-subdued-text-color-focus);
3783
+ }
3784
+ .Tag-module__hop-Tag--subdued___8gdRL[data-hovered] {
3785
+ --border-color: var(--hop-Tag-subdued-border-color-hover);
3786
+ --background-color: var(--hop-Tag-subdued-background-color-hover);
3787
+ --text-color: var(--hop-Tag-subdued-text-color-hover);
3788
+ }
3789
+ .Tag-module__hop-Tag--subdued___8gdRL[data-pressed] {
3790
+ --border-color: var(--hop-Tag-subdued-border-color-press);
3791
+ --background-color: var(--hop-Tag-subdued-background-color-press);
3792
+ --text-color: var(--hop-Tag-subdued-text-color-press);
3793
+ }
3794
+ .Tag-module__hop-Tag--subdued___8gdRL[data-disabled] {
3795
+ --border-color: var(--hop-Tag-subdued-border-color-disabled);
3796
+ --background-color: var(--hop-Tag-subdued-background-color-disabled);
3797
+ --text-color: var(--hop-Tag-subdued-text-color-disabled);
3798
+ }
3799
+ .Tag-module__hop-Tag--progress___NnhA5[data-focus-visible] {
3800
+ --border-color: var(--hop-Tag-progress-border-color-focus);
3801
+ --background-color: var(--hop-Tag-progress-background-color-focus);
3802
+ --text-color: var(--hop-Tag-progress-text-color-focus);
3803
+ }
3804
+ .Tag-module__hop-Tag--progress___NnhA5[data-hovered] {
3805
+ --border-color: var(--hop-Tag-progress-border-color-hover);
3806
+ --background-color: var(--hop-Tag-progress-background-color-hover);
3807
+ --text-color: var(--hop-Tag-progress-text-color-hover);
3808
+ }
3809
+ .Tag-module__hop-Tag--progress___NnhA5[data-pressed] {
3810
+ --border-color: var(--hop-Tag-progress-border-color-press);
3811
+ --background-color: var(--hop-Tag-progress-background-color-press);
3812
+ --text-color: var(--hop-Tag-progress-text-color-press);
3813
+ }
3814
+ .Tag-module__hop-Tag--progress___NnhA5[data-disabled] {
3815
+ --border-color: var(--hop-Tag-progress-border-color-disabled);
3816
+ --background-color: var(--hop-Tag-progress-background-color-disabled);
3817
+ --text-color: var(--hop-Tag-progress-text-color-disabled);
3818
+ }
3819
+ .Tag-module__hop-Tag--positive___H8sFB[data-focus-visible] {
3820
+ --border-color: var(--hop-Tag-positive-border-color-focus);
3821
+ --background-color: var(--hop-Tag-positive-background-color-focus);
3822
+ --text-color: var(--hop-Tag-positive-text-color-focus);
3823
+ }
3824
+ .Tag-module__hop-Tag--positive___H8sFB[data-hovered] {
3825
+ --border-color: var(--hop-Tag-positive-border-color-hover);
3826
+ --background-color: var(--hop-Tag-positive-background-color-hover);
3827
+ --text-color: var(--hop-Tag-positive-text-color-hover);
3828
+ }
3829
+ .Tag-module__hop-Tag--positive___H8sFB[data-pressed] {
3830
+ --border-color: var(--hop-Tag-positive-border-color-press);
3831
+ --background-color: var(--hop-Tag-positive-background-color-press);
3832
+ --text-color: var(--hop-Tag-positive-text-color-press);
3833
+ }
3834
+ .Tag-module__hop-Tag--positive___H8sFB[data-disabled] {
3835
+ --border-color: var(--hop-Tag-positive-border-color-disabled);
3836
+ --background-color: var(--hop-Tag-positive-background-color-disabled);
3837
+ --text-color: var(--hop-Tag-positive-text-color-disabled);
3838
+ }
3839
+ .Tag-module__hop-Tag--caution___yiUVc[data-focus-visible] {
3840
+ --border-color: var(--hop-Tag-caution-border-color-focus);
3841
+ --background-color: var(--hop-Tag-caution-background-color-focus);
3842
+ --text-color: var(--hop-Tag-caution-text-color-focus);
3843
+ }
3844
+ .Tag-module__hop-Tag--caution___yiUVc[data-hovered] {
3845
+ --border-color: var(--hop-Tag-caution-border-color-hover);
3846
+ --background-color: var(--hop-Tag-caution-background-color-hover);
3847
+ --text-color: var(--hop-Tag-caution-text-color-hover);
3848
+ }
3849
+ .Tag-module__hop-Tag--caution___yiUVc[data-pressed] {
3850
+ --border-color: var(--hop-Tag-caution-border-color-press);
3851
+ --background-color: var(--hop-Tag-caution-background-color-press);
3852
+ --text-color: var(--hop-Tag-caution-text-color-press);
3853
+ }
3854
+ .Tag-module__hop-Tag--caution___yiUVc[data-disabled] {
3855
+ --border-color: var(--hop-Tag-caution-border-color-disabled);
3856
+ --background-color: var(--hop-Tag-caution-background-color-disabled);
3857
+ --text-color: var(--hop-Tag-caution-text-color-disabled);
3858
+ }
3859
+ .Tag-module__hop-Tag--negative___Kx5BK[data-focus-visible] {
3860
+ --border-color: var(--hop-Tag-negative-border-color-focus);
3861
+ --background-color: var(--hop-Tag-negative-background-color-focus);
3862
+ --text-color: var(--hop-Tag-negative-text-color-focus);
3863
+ }
3864
+ .Tag-module__hop-Tag--negative___Kx5BK[data-hovered] {
3865
+ --border-color: var(--hop-Tag-negative-border-color-hover);
3866
+ --background-color: var(--hop-Tag-negative-background-color-hover);
3867
+ --text-color: var(--hop-Tag-negative-text-color-hover);
3868
+ }
3869
+ .Tag-module__hop-Tag--negative___Kx5BK[data-pressed] {
3870
+ --border-color: var(--hop-Tag-negative-border-color-press);
3871
+ --background-color: var(--hop-Tag-negative-background-color-press);
3872
+ --text-color: var(--hop-Tag-negative-text-color-press);
3873
+ }
3874
+ .Tag-module__hop-Tag--negative___Kx5BK[data-disabled] {
3875
+ --border-color: var(--hop-Tag-negative-border-color-disabled);
3876
+ --background-color: var(--hop-Tag-negative-background-color-disabled);
3877
+ --text-color: var(--hop-Tag-negative-text-color-disabled);
3878
+ }
3879
+ .Tag-module__hop-Tag--option1___y-QlT[data-focus-visible] {
3880
+ --border-color: var(--hop-Tag-option1-border-color-focus);
3881
+ --background-color: var(--hop-Tag-option1-background-color-focus);
3882
+ --text-color: var(--hop-Tag-option1-text-color-focus);
3883
+ }
3884
+ .Tag-module__hop-Tag--option1___y-QlT[data-hovered] {
3885
+ --border-color: var(--hop-Tag-option1-border-color-hover);
3886
+ --background-color: var(--hop-Tag-option1-background-color-hover);
3887
+ --text-color: var(--hop-Tag-option1-text-color-hover);
3888
+ }
3889
+ .Tag-module__hop-Tag--option1___y-QlT[data-pressed] {
3890
+ --border-color: var(--hop-Tag-option1-border-color-press);
3891
+ --background-color: var(--hop-Tag-option1-background-color-press);
3892
+ --text-color: var(--hop-Tag-option1-text-color-press);
3893
+ }
3894
+ .Tag-module__hop-Tag--option1___y-QlT[data-disabled] {
3895
+ --border-color: var(--hop-Tag-option1-border-color-disabled);
3896
+ --background-color: var(--hop-Tag-option1-background-color-disabled);
3897
+ --text-color: var(--hop-Tag-option1-text-color-disabled);
3898
+ }
3899
+ .Tag-module__hop-Tag--option2___eupOO[data-focus-visible] {
3900
+ --border-color: var(--hop-Tag-option2-border-color-focus);
3901
+ --background-color: var(--hop-Tag-option2-background-color-focus);
3902
+ --text-color: var(--hop-Tag-option2-text-color-focus);
3903
+ }
3904
+ .Tag-module__hop-Tag--option2___eupOO[data-hovered] {
3905
+ --border-color: var(--hop-Tag-option2-border-color-hover);
3906
+ --background-color: var(--hop-Tag-option2-background-color-hover);
3907
+ --text-color: var(--hop-Tag-option2-text-color-hover);
3908
+ }
3909
+ .Tag-module__hop-Tag--option2___eupOO[data-pressed] {
3910
+ --border-color: var(--hop-Tag-option2-border-color-press);
3911
+ --background-color: var(--hop-Tag-option2-background-color-press);
3912
+ --text-color: var(--hop-Tag-option2-text-color-press);
3913
+ }
3914
+ .Tag-module__hop-Tag--option2___eupOO[data-disabled] {
3915
+ --border-color: var(--hop-Tag-option2-border-color-disabled);
3916
+ --background-color: var(--hop-Tag-option2-background-color-disabled);
3917
+ --text-color: var(--hop-Tag-option2-text-color-disabled);
3918
+ }
3919
+ .Tag-module__hop-Tag--option3___HdIm3[data-focus-visible] {
3920
+ --border-color: var(--hop-Tag-option3-border-color-focus);
3921
+ --background-color: var(--hop-Tag-option3-background-color-focus);
3922
+ --text-color: var(--hop-Tag-option3-text-color-focus);
3923
+ }
3924
+ .Tag-module__hop-Tag--option3___HdIm3[data-hovered] {
3925
+ --border-color: var(--hop-Tag-option3-border-color-hover);
3926
+ --background-color: var(--hop-Tag-option3-background-color-hover);
3927
+ --text-color: var(--hop-Tag-option3-text-color-hover);
3928
+ }
3929
+ .Tag-module__hop-Tag--option3___HdIm3[data-pressed] {
3930
+ --border-color: var(--hop-Tag-option3-border-color-press);
3931
+ --background-color: var(--hop-Tag-option3-background-color-press);
3932
+ --text-color: var(--hop-Tag-option3-text-color-press);
3933
+ }
3934
+ .Tag-module__hop-Tag--option3___HdIm3[data-disabled] {
3935
+ --border-color: var(--hop-Tag-option3-border-color-disabled);
3936
+ --background-color: var(--hop-Tag-option3-background-color-disabled);
3937
+ --text-color: var(--hop-Tag-option3-text-color-disabled);
3938
+ }
3939
+ .Tag-module__hop-Tag--option4___6MNs5[data-focus-visible] {
3940
+ --border-color: var(--hop-Tag-option4-border-color-focus);
3941
+ --background-color: var(--hop-Tag-option4-background-color-focus);
3942
+ --text-color: var(--hop-Tag-option4-text-color-focus);
3943
+ }
3944
+ .Tag-module__hop-Tag--option4___6MNs5[data-hovered] {
3945
+ --border-color: var(--hop-Tag-option4-border-color-hover);
3946
+ --background-color: var(--hop-Tag-option4-background-color-hover);
3947
+ --text-color: var(--hop-Tag-option4-text-color-hover);
3948
+ }
3949
+ .Tag-module__hop-Tag--option4___6MNs5[data-pressed] {
3950
+ --border-color: var(--hop-Tag-option4-border-color-press);
3951
+ --background-color: var(--hop-Tag-option4-background-color-press);
3952
+ --text-color: var(--hop-Tag-option4-text-color-press);
3953
+ }
3954
+ .Tag-module__hop-Tag--option4___6MNs5[data-disabled] {
3955
+ --border-color: var(--hop-Tag-option4-border-color-disabled);
3956
+ --background-color: var(--hop-Tag-option4-background-color-disabled);
3957
+ --text-color: var(--hop-Tag-option4-text-color-disabled);
3958
+ }
3959
+ .Tag-module__hop-Tag--option5___GBX7K[data-focus-visible] {
3960
+ --border-color: var(--hop-Tag-option5-border-color-focus);
3961
+ --background-color: var(--hop-Tag-option5-background-color-focus);
3962
+ --text-color: var(--hop-Tag-option5-text-color-focus);
3963
+ }
3964
+ .Tag-module__hop-Tag--option5___GBX7K[data-hovered] {
3965
+ --border-color: var(--hop-Tag-option5-border-color-hover);
3966
+ --background-color: var(--hop-Tag-option5-background-color-hover);
3967
+ --text-color: var(--hop-Tag-option5-text-color-hover);
3968
+ }
3969
+ .Tag-module__hop-Tag--option5___GBX7K[data-pressed] {
3970
+ --border-color: var(--hop-Tag-option5-border-color-press);
3971
+ --background-color: var(--hop-Tag-option5-background-color-press);
3972
+ --text-color: var(--hop-Tag-option5-text-color-press);
3973
+ }
3974
+ .Tag-module__hop-Tag--option5___GBX7K[data-disabled] {
3975
+ --border-color: var(--hop-Tag-option5-border-color-disabled);
3976
+ --background-color: var(--hop-Tag-option5-background-color-disabled);
3977
+ --text-color: var(--hop-Tag-option5-text-color-disabled);
3978
+ }
3979
+ .Tag-module__hop-Tag--option6___AQNi2[data-focus-visible] {
3980
+ --border-color: var(--hop-Tag-option6-border-color-focus);
3981
+ --background-color: var(--hop-Tag-option6-background-color-focus);
3982
+ --text-color: var(--hop-Tag-option6-text-color-focus);
3983
+ }
3984
+ .Tag-module__hop-Tag--option6___AQNi2[data-hovered] {
3985
+ --border-color: var(--hop-Tag-option6-border-color-hover);
3986
+ --background-color: var(--hop-Tag-option6-background-color-hover);
3987
+ --text-color: var(--hop-Tag-option6-text-color-hover);
3988
+ }
3989
+ .Tag-module__hop-Tag--option6___AQNi2[data-pressed] {
3990
+ --border-color: var(--hop-Tag-option6-border-color-press);
3991
+ --background-color: var(--hop-Tag-option6-background-color-press);
3992
+ --text-color: var(--hop-Tag-option6-text-color-press);
3993
+ }
3994
+ .Tag-module__hop-Tag--option6___AQNi2[data-disabled] {
3995
+ --border-color: var(--hop-Tag-option6-border-color-disabled);
3996
+ --background-color: var(--hop-Tag-option6-background-color-disabled);
3997
+ --text-color: var(--hop-Tag-option6-text-color-disabled);
3998
+ }
3999
+ .Tag-module__hop-Tag___ny25M[data-focus-visible] {
4000
+ outline: 0.125rem solid var(--focus-ring-color);
4001
+ }
4002
+ .Tag-module__hop-Tag___ny25M[data-hovered] {
4003
+ cursor: pointer;
4004
+ }
4005
+ .Tag-module__hop-Tag___ny25M[data-selected] {
4006
+ --background-color: var(--hop-Tag-background-color-selected);
4007
+ --border-color: var(--hop-Tag-border-color-selected);
4008
+ --text-color: var(--hop-Tag-text-color-selected);
4009
+ }
4010
+ .Tag-module__hop-Tag___ny25M[data-pressed] {
4011
+ cursor: pointer;
4012
+ }
4013
+ .Tag-module__hop-Tag___ny25M[data-invalid] {
4014
+ --border-color: var(--hop-Tag-border-color-invalid);
4015
+ }
4016
+ .Tag-module__hop-Tag___ny25M[data-disabled] {
4017
+ cursor: not-allowed;
4018
+ }
4019
+ .Tag-module__hop-Tag__avatar___iBocm {
4020
+ flex: 0 0 auto;
4021
+ order: 1;
4022
+ margin-inline-start: var(--avatar-margin-inline-start);
4023
+ }
4024
+ .Tag-module__hop-Tag__icon___vldcj,
4025
+ .Tag-module__hop-Tag__icon-list___DzL7g {
4026
+ flex: 0 0 auto;
4027
+ flex-wrap: nowrap;
4028
+ order: 2;
4029
+ margin-inline-start: var(--icon-margin-inline-start, 0);
4030
+ }
4031
+ .Tag-module__hop-Tag__text___iQuoP {
4032
+ overflow: hidden;
4033
+ flex: 1 1 auto;
4034
+ order: 3;
4035
+ min-inline-size: 0;
4036
+ text-align: center;
4037
+ text-overflow: ellipsis;
4038
+ }
4039
+ .Tag-module__hop-Tag__badge___0hHIo {
4040
+ flex: 0 0 auto;
4041
+ order: 4;
4042
+ margin-inline-end: var(--badge-margin-inline-end);
4043
+ }
4044
+ .Tag-module__hop-Tag__badge___0hHIo[data-variant=secondary] {
4045
+ margin-inline-start: var(--badge-secondary-margin-inline-start);
4046
+ color: inherit;
4047
+ background: none;
4048
+ }
4049
+ .Tag-module__hop-Tag--sm___8HZnL .Tag-module__hop-Tag__badge___0hHIo {
4050
+ block-size: 100%;
4051
+ }
4052
+ .Tag-module__hop-Tag__remove-btn___t3dDt,
4053
+ .Tag-module__hop-Tag__Spinner___ElUBi {
4054
+ flex: 0 0 auto;
4055
+ order: 5;
4056
+ }
4057
+ .Tag-module__hop-Tag__Spinner___ElUBi {
4058
+ margin-inline-end: var(--spinner-margin-inline-end);
4059
+ }
4060
+ .Tag-module__hop-Tag__remove-btn___t3dDt {
4061
+ margin-inline: var(--clear-btn-margin-inline);
4062
+ }
4063
+
4064
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/tag/src/TagGroup.module.css/#css-module-data */
4065
+ .TagGroup-module__hop-TagGroup___-qsWY {
4066
+ --hop-TagGroup-row-gap: var(--hop-space-inline-sm);
4067
+ --hop-TagGroup-list-column-gap: var(--hop-space-inline-sm);
4068
+ --hop-TagGroup-list-row-gap: var(--hop-space-inline-sm);
4069
+ --hop-TagGroup-list-focus-ring-color: var(--hop-primary-border-focus);
4070
+ --hop-TagGroup-list-border-radius: var(--hop-shape-rounded-sm);
4071
+ --row-gap: var(--hop-TagGroup-row-gap);
4072
+ --list-column-gap: var(--hop-TagGroup-list-column-gap);
4073
+ --list-row-gap: var(--hop-TagGroup-list-row-gap);
4074
+ --list-focus-ring-color: var(--hop-TagGroup-list-focus-ring-color);
4075
+ --list-border-radius: var(--hop-TagGroup-list-border-radius);
4076
+ display: flex;
4077
+ flex-direction: column;
4078
+ row-gap: var(--row-gap);
4079
+ align-items: flex-start;
4080
+ justify-content: flex-start;
4081
+ box-sizing: border-box;
4082
+ inline-size: max-content;
4083
+ max-inline-size: 100%;
4084
+ }
4085
+ .TagGroup-module__hop-TagGroup___-qsWY > .TagGroup-module__hop-TagGroup__label___-6iVf {
4086
+ order: 1;
4087
+ }
4088
+ .TagGroup-module__hop-TagGroup__list___JxCmr {
4089
+ display: flex;
4090
+ flex-wrap: wrap;
4091
+ gap: var(--list-row-gap) var(--list-column-gap);
4092
+ align-items: center;
4093
+ order: 2;
4094
+ border-radius: var(--list-border-radius);
4095
+ outline: none;
4096
+ }
4097
+ .TagGroup-module__hop-TagGroup__list___JxCmr[data-focus-visible] {
4098
+ outline: 0.125rem solid var(--list-focus-ring-color);
4099
+ outline-offset: 0.125rem;
4100
+ }
4101
+ .TagGroup-module__hop-TagGroup___-qsWY > .TagGroup-module__hop-TagGroup__error-message___b3sVo,
4102
+ .TagGroup-module__hop-TagGroup___-qsWY > .TagGroup-module__hop-TagGroup__helper-message___KFfUh {
4103
+ order: 3;
4104
+ }
4105
+
4106
+ /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/Form/src/Form.module.css/#css-module-data */
4107
+ .Form-module__hop-Form___QJzNB {
4108
+ display: flex;
4109
+ flex-direction: column;
4110
+ gap: var(--hop-space-stack-lg);
4111
+ }